From ebfe40b2194c20cf65c019c79a9a3ed7ee7cede4 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 4 Jan 2026 19:53:06 -0800 Subject: [PATCH] reduce item gap and tweak sizing in ElementPicker --- .../ui/element-picker/ElementPicker.svelte | 6 +- .../ElementPickerSegmented.svelte | 76 +++++++++---------- 2 files changed, 42 insertions(+), 40 deletions(-) diff --git a/src/lib/components/ui/element-picker/ElementPicker.svelte b/src/lib/components/ui/element-picker/ElementPicker.svelte index 53bb2ca0..514d2ce7 100644 --- a/src/lib/components/ui/element-picker/ElementPicker.svelte +++ b/src/lib/components/ui/element-picker/ElementPicker.svelte @@ -95,10 +95,11 @@ {options} value={Array.isArray(value) ? value : value !== undefined ? [value] : []} onValueChange={handleMultipleChange} - {size} + size="medium" {contained} disabled={disabled} placeholder="Select elements..." + fullWidth={true} class={className} /> {:else} @@ -106,10 +107,11 @@ {options} value={typeof value === 'number' ? value : undefined} onValueChange={handleSingleChange} - {size} + size="medium" {contained} disabled={disabled} placeholder="Select element" + fullWidth={true} class={className} /> {/if} diff --git a/src/lib/components/ui/element-picker/ElementPickerSegmented.svelte b/src/lib/components/ui/element-picker/ElementPickerSegmented.svelte index 32979d42..7604db00 100644 --- a/src/lib/components/ui/element-picker/ElementPickerSegmented.svelte +++ b/src/lib/components/ui/element-picker/ElementPickerSegmented.svelte @@ -101,7 +101,7 @@ type="multiple" value={stringValue as string[]} onValueChange={handleMultipleChange} - class="group" + class="element-group" {disabled} > {#each elements as element} @@ -109,13 +109,13 @@ {#snippet children()} {getLabel(element)} {/snippet} @@ -127,7 +127,7 @@ type="single" value={stringValue as string | undefined} onValueChange={handleSingleChange} - class="group" + class="element-group" {disabled} > {#each elements as element} @@ -135,13 +135,13 @@ {#snippet children()} {getLabel(element)} {/snippet} @@ -161,7 +161,7 @@ type="multiple" value={stringValue as string[]} onValueChange={handleMultipleChange} - class="group" + class="element-group" {disabled} > {#each elements as element} @@ -169,10 +169,10 @@ {#snippet children()} - {getLabel(element)} + {getLabel(element)} {/snippet} @@ -183,7 +183,7 @@ type="single" value={stringValue as string | undefined} onValueChange={handleSingleChange} - class="group" + class="element-group" {disabled} > {#each elements as element} @@ -191,10 +191,10 @@ {#snippet children()} - {getLabel(element)} + {getLabel(element)} {/snippet} @@ -229,13 +229,13 @@ } } - :global(.group) { + :global(.element-group) { display: flex; - gap: $unit-half; + gap: $unit-quarter; align-items: center; } - :global(.item) { + :global(.element-item) { all: unset; cursor: pointer; border-radius: $full-corner; @@ -243,87 +243,87 @@ @include smooth-transition($duration-quick, background-color, opacity); } - :global(.item:focus-visible) { + :global(.element-item:focus-visible) { @include focus-ring($blue); } - :global(.item:disabled) { + :global(.element-item:disabled) { opacity: 0.5; cursor: not-allowed; } // Element-specific hover and selected states - :global(.item[data-value='0']:hover:not(:disabled)) { + :global(.element-item[data-value='0']:hover:not(:disabled)) { background-color: var(--null-nav-hover-bg); } - :global(.item[data-value='0'][data-state='on']:not(:hover)) { + :global(.element-item[data-value='0'][data-state='on']) { background-color: var(--null-nav-selected-bg); } - :global(.item[data-value='1']:hover:not(:disabled)) { + :global(.element-item[data-value='1']:hover:not(:disabled)) { background-color: var(--wind-nav-hover-bg); } - :global(.item[data-value='1'][data-state='on']:not(:hover)) { + :global(.element-item[data-value='1'][data-state='on']) { background-color: var(--wind-nav-selected-bg); } - :global(.item[data-value='2']:hover:not(:disabled)) { + :global(.element-item[data-value='2']:hover:not(:disabled)) { background-color: var(--fire-nav-hover-bg); } - :global(.item[data-value='2'][data-state='on']:not(:hover)) { + :global(.element-item[data-value='2'][data-state='on']) { background-color: var(--fire-nav-selected-bg); } - :global(.item[data-value='3']:hover:not(:disabled)) { + :global(.element-item[data-value='3']:hover:not(:disabled)) { background-color: var(--water-nav-hover-bg); } - :global(.item[data-value='3'][data-state='on']:not(:hover)) { + :global(.element-item[data-value='3'][data-state='on']) { background-color: var(--water-nav-selected-bg); } - :global(.item[data-value='4']:hover:not(:disabled)) { + :global(.element-item[data-value='4']:hover:not(:disabled)) { background-color: var(--earth-nav-hover-bg); } - :global(.item[data-value='4'][data-state='on']:not(:hover)) { + :global(.element-item[data-value='4'][data-state='on']) { background-color: var(--earth-nav-selected-bg); } - :global(.item[data-value='5']:hover:not(:disabled)) { + :global(.element-item[data-value='5']:hover:not(:disabled)) { background-color: var(--dark-nav-hover-bg); } - :global(.item[data-value='5'][data-state='on']:not(:hover)) { + :global(.element-item[data-value='5'][data-state='on']) { background-color: var(--dark-nav-selected-bg); } - :global(.item[data-value='6']:hover:not(:disabled)) { + :global(.element-item[data-value='6']:hover:not(:disabled)) { background-color: var(--light-nav-hover-bg); } - :global(.item[data-value='6'][data-state='on']:not(:hover)) { + :global(.element-item[data-value='6'][data-state='on']) { background-color: var(--light-nav-selected-bg); } - :global(.image) { + :global(.element-image) { display: block; } // Size variants .small { - :global(.item) { + :global(.element-item) { padding: $unit-half; } - :global(.image) { - width: $unit-3x; - height: $unit-3x; + :global(.element-image) { + width: calc($unit * 3.25); + height: calc($unit * 3.25); } } .regular { - :global(.item) { + :global(.element-item) { padding: $unit-half; } - :global(.image) { + :global(.element-image) { width: $unit-4x; height: $unit-4x; }