seblify 0.2.0 → 0.3.0

package/dist/components/action/input/select/segment-control/SegmentControl.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
   import type { SeblifyProps } from 'seblify';
+  import type { Component } from 'svelte';
 
   export interface SegmentControlOption {
     value: string;
-    label: string;
+    label?: string;
+    ariaLabel?: string;
     disabled?: boolean;
+    icon?: Component<{ size?: string }>;
   }
 
   type Props = SeblifyProps<{
@@ -24,6 +27,75 @@
     name = 'segment-control',
     disabled = false,
   }: Props = $props();
+
+  let optionsElement = $state<HTMLDivElement>();
+  let indicatorLeft = $state(0);
+  let indicatorWidth = $state(0);
+  let indicatorVisible = $state(false);
+  const optionElements: Array<HTMLLabelElement | undefined> = [];
+
+  function measureIndicator() {
+    if (!optionsElement) {
+      indicatorVisible = false;
+      return;
+    }
+
+    const selectedIndex = options.findIndex((option) => option.value === value);
+    const selectedElement =
+      selectedIndex >= 0 ? optionElements[selectedIndex] : undefined;
+
+    if (!selectedElement) {
+      indicatorVisible = false;
+      return;
+    }
+
+    const parentRect = optionsElement.getBoundingClientRect();
+    const selectedRect = selectedElement.getBoundingClientRect();
+
+    indicatorLeft = selectedRect.left - parentRect.left - optionsElement.clientLeft;
+    indicatorWidth = selectedRect.width;
+    indicatorVisible = true;
+  }
+
+  function registerOption(node: HTMLLabelElement, index: number) {
+    optionElements[index] = node;
+    queueMicrotask(measureIndicator);
+
+    return {
+      destroy() {
+        if (optionElements[index] === node) {
+          optionElements[index] = undefined;
+          queueMicrotask(measureIndicator);
+        }
+      },
+    };
+  }
+
+  $effect(() => {
+    value;
+    options;
+    queueMicrotask(measureIndicator);
+  });
+
+  $effect(() => {
+    if (typeof ResizeObserver === 'undefined') {
+      return;
+    }
+
+    const resizeObserver = new ResizeObserver(() => measureIndicator());
+
+    if (optionsElement) {
+      resizeObserver.observe(optionsElement);
+    }
+
+    for (const optionElement of optionElements) {
+      if (optionElement) {
+        resizeObserver.observe(optionElement);
+      }
+    }
+
+    return () => resizeObserver.disconnect();
+  });
 </script>
 
 <fieldset class="segment-control" class:disabled>
@@ -38,20 +110,41 @@
     </legend>
   {/if}
 
-  <span
-    class="options"
-    style={`--segment-count: ${Math.max(options.length, 1)}`}
-  >
-    {#each options as option}
-      <label>
+  <span class="options" bind:this={optionsElement}>
+    {#if indicatorVisible}
+      <span
+        aria-hidden="true"
+        class="indicator"
+        style:left={`${indicatorLeft}px`}
+        style:width={`${indicatorWidth}px`}
+      ></span>
+    {/if}
+
+    {#each options as option, index (option.value)}
+      <label use:registerOption={index}>
         <input
+          aria-label={option.ariaLabel ?? option.label}
           bind:group={value}
           disabled={disabled || option.disabled}
           {name}
           type="radio"
           value={option.value}
         />
-        <span>{option.label}</span>
+
+        <span
+          class="option-content"
+          data-icon-only={option.icon && !option.label ? 'true' : undefined}
+        >
+          {#if option.icon}
+            <span class="icon">
+              <option.icon size="1rem" />
+            </span>
+          {/if}
+
+          {#if option.label}
+            <span class="option-label">{option.label}</span>
+          {/if}
+        </span>
       </label>
     {/each}
   </span>
@@ -86,20 +179,33 @@
   }
 
   .options {
-    display: grid;
-    grid-template-columns: repeat(var(--segment-count), minmax(0, 1fr));
+    position: relative;
+    display: inline-flex;
     width: fit-content;
     max-width: 100%;
+    align-items: stretch;
     border: 1px solid var(--seblify-color-border-strong, #aab7c5);
     border-radius: 999px;
     background: var(--seblify-color-surface-muted, #d9e0e8);
     padding: 3px;
+    gap: 4px;
+  }
+
+  .indicator {
+    position: absolute;
+    top: 3px;
+    bottom: 3px;
+    border-radius: 999px;
+    background: var(--seblify-color-fill-accent, #146a6f);
+    transition:
+      left 220ms cubic-bezier(0.22, 1, 0.36, 1),
+      width 220ms cubic-bezier(0.22, 1, 0.36, 1);
   }
 
   label {
     position: relative;
     display: grid;
-    min-width: 76px;
+    min-width: max-content;
     cursor: pointer;
   }
 
@@ -114,32 +220,50 @@
     white-space: nowrap;
   }
 
-  label span {
-    display: grid;
+  .option-content {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
     min-height: 32px;
-    place-items: center;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
     border-radius: 999px;
     padding: 6px 12px;
     color: var(--seblify-color-text-muted, #516176);
     font-size: 0.875rem;
     font-weight: 800;
     line-height: 1;
-    transition:
-      color 160ms ease,
-      background 160ms ease;
+    user-select: none;
+    transition: color 160ms ease;
+  }
+
+  .option-content[data-icon-only='true'] {
+    min-width: 32px;
+    padding-inline: 8px;
+  }
+
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
   }
 
-  input:checked + span {
+  .option-label {
+    white-space: nowrap;
+  }
+
+  input:checked + .option-content {
     color: var(--seblify-color-fill-accent-text, #ffffff);
-    background: var(--seblify-color-fill-accent, #146a6f);
   }
 
-  input:focus-visible + span {
+  label:has(input:focus-visible) .option-content {
     outline: 3px solid var(--seblify-color-focus-ring, #9bd4d8);
     outline-offset: 2px;
   }
 
-  input:disabled + span {
+  input:disabled + .option-content {
     cursor: not-allowed;
     opacity: var(--seblify-opacity-disabled, 0.56);
   }

package/dist/components/action/input/select/segment-control/SegmentControl.svelte.d.ts

@@ -1,9 +1,14 @@
+import type { Component } from 'svelte';
 export interface SegmentControlOption {
     value: string;
-    label: string;
+    label?: string;
+    ariaLabel?: string;
     disabled?: boolean;
+    icon?: Component<{
+        size?: string;
+    }>;
 }
-declare const SegmentControl: import("svelte").Component<{
+declare const SegmentControl: Component<{
     value?: string | undefined;
     options: SegmentControlOption[];
     label?: string | undefined;