@happyvertical/smrt-svelte 0.55.6 → 0.55.7

package/dist/components/forms/SelectInput.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { Icon } from '@happyvertical/smrt-ui';
+import { FieldLabel } from '@happyvertical/smrt-ui/forms';
 import { matchOption } from '@happyvertical/smrt-ui/utils/forms/formatters.js';
 import { useAppState } from '../../hooks/useAppState.svelte.js';
 import {
@@ -42,10 +43,24 @@ let {
   onchange,
 }: Props = $props();
 
+// Unique per instance: the control stays labelled even if `name` repeats on a page.
+const uid = $props.id();
+const labelId = `${uid}-label`;
+
 const app = useAppState();
 const formContext = tryGetFormContext();
 
 let isFocused = $state(false);
+/** A caller-supplied empty choice replaces the placeholder: one empty option only. */
+const hasEmptyOption = $derived(options.some((o) => o.value === ''));
+// Options are keyed by value: a repeated value (e.g. two empty choices) would
+// throw each_key_duplicate and take the whole form down, so keep the first.
+const uniqueOptions = $derived(
+  options.filter(
+    (option, index) =>
+      options.findIndex((o) => o.value === option.value) === index,
+  ),
+);
 const isSmrt = $derived(app.state.mode === 'smrt');
 
 // Helper to update value
@@ -123,15 +138,14 @@ function handleChange(e: Event) {
   class:disabled
   class:has-value={!!value}
 >
+  {#if label}
+    <FieldLabel id={labelId} for={name} {label} {required} />
+  {/if}
   <div class="container">
     <div class="content">
-      {#if label}
-        <label for={name} class="label">
-          {label}{#if required}*{/if}
-        </label>
-      {/if}
       <select
         id={name}
+        aria-labelledby={label ? labelId : undefined}
         {name}
         {value}
         {disabled}
@@ -142,8 +156,10 @@ function handleChange(e: Event) {
         onfocus={() => isFocused = true}
         onblur={() => isFocused = false}
       >
-        <option value="" disabled selected={!value}>{placeholder}</option>
-        {#each options as option (option.value)}
+        {#if !hasEmptyOption}
+          <option value="" disabled selected={!value}>{placeholder}</option>
+        {/if}
+        {#each uniqueOptions as option (option.value)}
           <option value={option.value}>{option.label}</option>
         {/each}
       </select>
@@ -179,10 +195,11 @@ function handleChange(e: Event) {
     position: relative;
     display: flex;
     align-items: center;
-    background-color: var(--field-bg);
-    border-radius: var(--smrt-radius-sm, 4px) var(--smrt-radius-sm, 4px) 0 0;
-    min-height: 56px;
-    padding: 0 var(--smrt-spacing-4, 16px);
+    background-color: var(--smrt-color-surface, #fff);
+    border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
+    border-radius: var(--smrt-radius-small, 6px);
+    min-height: 40px;
+    padding: 0 var(--smrt-spacing-3, 12px);
     transition: background-color var(--smrt-duration-short3, 200ms) var(--smrt-easing-standard, cubic-bezier(0.2, 0, 0, 1));
   }
 
@@ -196,23 +213,8 @@ function handleChange(e: Event) {
     flex-direction: column;
     justify-content: center;
     height: 100%;
-    padding-top: var(--smrt-spacing-2, 8px);
-  }
+      }
 
-  .label {
-    font-size: var(--smrt-typography-body-large-size, 1rem);
-    line-height: var(--smrt-typography-body-large-line-height, 1.5);
-    letter-spacing: var(--smrt-typography-body-large-tracking, 0.5px);
-    color: var(--field-color);
-    pointer-events: none;
-    transition: all var(--smrt-duration-short3, 200ms) var(--smrt-easing-standard, cubic-bezier(0.2, 0, 0, 1));
-    transform-origin: top left;
-  }
-
-  .focused .label, .has-value .label {
-    transform: translateY(-8px) scale(0.75);
-    color: var(--field-active);
-  }
 
   .input {
     border: none;
@@ -242,23 +244,15 @@ function handleChange(e: Event) {
     margin-right: -4px;
   }
 
-  .active-indicator {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background-color: var(--field-color);
-    transition: all 200ms cubic-bezier(0.2, 0, 0, 1);
-  }
+  .active-indicator { display: none; }
 
-  .focused .active-indicator {
-    height: 2px;
-    background-color: var(--field-active);
+  .focused .container {
+    border-color: var(--field-active);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--field-active) 10%, transparent);
   }
 
   .supporting-text {
-    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-4, 16px) 0;
+    padding: var(--smrt-spacing-1, 4px) 0 0;
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
   }
 

package/dist/components/forms/SelectInput.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/SelectInput.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAG/C,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAkID,QAAA,MAAM,WAAW,gDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SelectInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/SelectInput.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAG/C,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAiJD,QAAA,MAAM,WAAW,gDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/forms/TextInput.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { Icon, ripple } from '@happyvertical/smrt-ui';
+import { FieldLabel } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import {
   formatEmail,
@@ -53,6 +54,10 @@ let {
   onchange,
 }: Props = $props();
 
+// Unique per instance: the control stays labelled even if `name` repeats on a page.
+const uid = $props.id();
+const labelId = `${uid}-label`;
+
 const app = useAppState();
 const stt = useSTT();
 const formContext = tryGetFormContext();
@@ -262,14 +267,15 @@ function handleInput(e: Event) {
   class:has-value={!!value}
   class:listening={isHolding}
 >
+  {#if label}
+    <FieldLabel id={labelId} for={name} {label} {required} />
+  {/if}
   <div class="container">
     <div class="content">
-      {#if label}
-        <label for={name} class="label">{label}{#if required}*{/if}</label>
-      {/if}
       <input
         bind:this={inputEl}
         id={name}
+        aria-labelledby={label ? labelId : undefined}
         {name}
         type={type}
         placeholder={isFocused ? placeholder : ''}
@@ -346,10 +352,11 @@ function handleInput(e: Event) {
     position: relative;
     display: flex;
     align-items: center;
-    background-color: var(--field-bg);
-    border-radius: var(--smrt-radius-sm, 4px) var(--smrt-radius-sm, 4px) 0 0;
-    min-height: 56px;
-    padding: 0 var(--smrt-spacing-4, 16px);
+    background-color: var(--smrt-color-surface, #fff);
+    border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
+    border-radius: var(--smrt-radius-small, 6px);
+    min-height: 40px;
+    padding: 0 var(--smrt-spacing-3, 12px);
     transition: background-color var(--smrt-duration-short3, 200ms) var(--smrt-easing-standard, cubic-bezier(0.2, 0, 0, 1));
   }
 
@@ -363,24 +370,8 @@ function handleInput(e: Event) {
     flex-direction: column;
     justify-content: center;
     height: 100%;
-    padding-top: var(--smrt-spacing-2, 8px);
-  }
+      }
 
-  .label {
-    font-size: var(--smrt-typography-body-large-size, 1rem);
-    line-height: var(--smrt-typography-body-large-line-height, 1.5);
-    letter-spacing: var(--smrt-typography-body-large-tracking, 0.5px);
-    color: var(--field-color);
-    pointer-events: none;
-    transition: all var(--smrt-duration-short3, 200ms) var(--smrt-easing-standard, cubic-bezier(0.2, 0, 0, 1));
-    transform-origin: top left;
-  }
-
-  /* Label float logic */
-  .focused .label, .has-value .label, .listening .label {
-    transform: translateY(-8px) scale(0.75);
-    color: var(--field-active);
-  }
 
   .input {
     border: none;
@@ -399,19 +390,11 @@ function handleInput(e: Event) {
     outline: none;
   }
 
-  .active-indicator {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background-color: var(--field-color);
-    transition: all var(--smrt-duration-short3, 200ms) var(--smrt-easing-standard, cubic-bezier(0.2, 0, 0, 1));
-  }
+  .active-indicator { display: none; }
 
-  .focused .active-indicator {
-    height: 2px;
-    background-color: var(--field-active);
+  .focused .container {
+    border-color: var(--field-active);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--field-active) 10%, transparent);
   }
 
   .mic-btn {
@@ -435,7 +418,7 @@ function handleInput(e: Event) {
   }
 
   .supporting-text {
-    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-4, 16px) 0;
+    padding: var(--smrt-spacing-1, 4px) 0 0;
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
     min-height: 16px;
   }

package/dist/components/forms/TextInput.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/TextInput.svelte.ts"],"names":[],"mappings":"AAoBA,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AA2QD,QAAA,MAAM,SAAS,gDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"TextInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/TextInput.svelte.ts"],"names":[],"mappings":"AAqBA,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAgRD,QAAA,MAAM,SAAS,gDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/forms/TextareaInput.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { Icon, ripple } from '@happyvertical/smrt-ui';
+import { FieldLabel } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { formatText } from '@happyvertical/smrt-ui/utils/forms/formatters.js';
 import { useAppState } from '../../hooks/useAppState.svelte.js';
@@ -50,6 +51,10 @@ let {
   onchange,
 }: Props = $props();
 
+// Unique per instance: the control stays labelled even if `name` repeats on a page.
+const uid = $props.id();
+const labelId = `${uid}-label`;
+
 const app = useAppState();
 const stt = useSTT();
 const formContext = tryGetFormContext();
@@ -225,14 +230,15 @@ function handleInput(e: Event) {
   class:has-value={!!value}
   class:listening={isHolding}
 >
+  {#if label}
+    <FieldLabel id={labelId} for={name} {label} {required} />
+  {/if}
   <div class="container">
     <div class="content">
-      {#if label}
-        <label for={name} class="label">{label}{#if required}*{/if}</label>
-      {/if}
       <textarea
         bind:this={textareaEl}
         id={name}
+        aria-labelledby={label ? labelId : undefined}
         {name}
         placeholder={isFocused ? placeholder : ''}
         {value}
@@ -306,10 +312,11 @@ function handleInput(e: Event) {
     position: relative;
     display: flex;
     align-items: flex-start;
-    background-color: var(--field-bg);
-    border-radius: var(--smrt-radius-sm, 4px) var(--smrt-radius-sm, 4px) 0 0;
-    min-height: 56px;
-    padding: 0 var(--smrt-spacing-4, 16px);
+    background-color: var(--smrt-color-surface, #fff);
+    border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
+    border-radius: var(--smrt-radius-small, 6px);
+    min-height: 40px;
+    padding: 0 var(--smrt-spacing-3, 12px);
     transition: background-color var(--smrt-duration-short3, 200ms) var(--smrt-easing-standard, cubic-bezier(0.2, 0, 0, 1));
   }
 
@@ -325,21 +332,6 @@ function handleInput(e: Event) {
     padding-bottom: var(--smrt-spacing-2, 8px);
   }
 
-  .label {
-    font-size: var(--smrt-typography-body-large-size, 1rem);
-    line-height: var(--smrt-typography-body-large-line-height, 1.5);
-    letter-spacing: var(--smrt-typography-body-large-tracking, 0.5px);
-    color: var(--field-color);
-    pointer-events: none;
-    transition: all var(--smrt-duration-short3, 200ms) var(--smrt-easing-standard, cubic-bezier(0.2, 0, 0, 1));
-    transform-origin: top left;
-    margin-bottom: var(--smrt-spacing-1, 4px);
-  }
-
-  .focused .label, .has-value .label, .listening .label {
-    transform: translateY(-4px) scale(0.75);
-    color: var(--field-active);
-  }
 
   .input {
     border: none;
@@ -359,19 +351,11 @@ function handleInput(e: Event) {
     outline: none;
   }
 
-  .active-indicator {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background-color: var(--field-color);
-    transition: all var(--smrt-duration-short3, 200ms) var(--smrt-easing-standard, cubic-bezier(0.2, 0, 0, 1));
-  }
+  .active-indicator { display: none; }
 
-  .focused .active-indicator {
-    height: 2px;
-    background-color: var(--field-active);
+  .focused .container {
+    border-color: var(--field-active);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--field-active) 10%, transparent);
   }
 
   .mic-btn {
@@ -396,7 +380,7 @@ function handleInput(e: Event) {
   }
 
   .supporting-text {
-    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-4, 16px) 0;
+    padding: var(--smrt-spacing-1, 4px) 0 0;
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
     min-height: 16px;
   }

package/dist/components/forms/TextareaInput.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextareaInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/TextareaInput.svelte.ts"],"names":[],"mappings":"AAiBA,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAwOD,QAAA,MAAM,aAAa,gDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"TextareaInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/TextareaInput.svelte.ts"],"names":[],"mappings":"AAkBA,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AA6OD,QAAA,MAAM,aAAa,gDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/sortable/Sortable.svelte

@@ -1,6 +1,7 @@
 <script lang="ts" generics="Item extends SortableItem, Container extends SortableContainer">
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { M } from '../../i18n/strings.sortable.js';
+import { formatSortableAnnouncement } from './announce.js';
 import {
   createSortable,
   type SortableAnnouncement,
@@ -53,35 +54,7 @@ const containersById = $derived(
 );
 
 function itemMessage(announcement: SortableAnnouncement): string {
-  switch (announcement.type) {
-    case 'pickup':
-      return t(M['ui.sortable.pickup'], {
-        item: announcement.item,
-        destinations: announcement.destinations.join(', '),
-      });
-    case 'position':
-      return t(M['ui.sortable.position'], {
-        item: announcement.item,
-        container: announcement.container,
-        position: announcement.position,
-        count: announcement.count,
-      });
-    case 'drop':
-      return t(M['ui.sortable.drop'], {
-        item: announcement.item,
-        container: announcement.container,
-        position: announcement.position,
-        count: announcement.count,
-      });
-    case 'unavailable':
-      return t(M['ui.sortable.unavailable'], {
-        container: announcement.container,
-      });
-    case 'failed':
-      return t(M['ui.sortable.failed'], { item: announcement.item });
-    case 'cancel':
-      return t(M['ui.sortable.cancel'], { item: announcement.item });
-  }
+  return formatSortableAnnouncement(t, announcement);
 }
 
 const itemSortable = createSortable({
@@ -338,14 +311,14 @@ function containerRank(id: string): number {
 </div>
 
 <style>
-  .smrt-sortable { display: grid; gap: var(--smrt-spacing-3); min-width: 0; position: relative; }
-  .smrt-sortable__containers { display: grid; gap: var(--smrt-spacing-3); }
-  .smrt-sortable__container { display: grid; gap: var(--smrt-spacing-2); padding: var(--smrt-spacing-3); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-md); background: var(--smrt-color-surface-container); min-width: 0; }
+  .smrt-sortable { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--smrt-spacing-3); min-width: 0; position: relative; }
+  .smrt-sortable__containers { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--smrt-spacing-3); min-width: 0; }
+  .smrt-sortable__container { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--smrt-spacing-2); padding: var(--smrt-spacing-3); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-md); background: var(--smrt-color-surface-container); min-width: 0; }
   .smrt-sortable__container--disabled { opacity: 0.6; }
   .smrt-sortable__container--dragging { opacity: 0.55; }
   .smrt-sortable__header { display: flex; align-items: center; gap: var(--smrt-spacing-2); min-block-size: 2.25rem; }
   .smrt-sortable__content { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--smrt-spacing-2); }
-  .smrt-sortable__items { display: grid; gap: var(--smrt-spacing-1); min-block-size: 2.25rem; }
+  .smrt-sortable__items { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--smrt-spacing-1); min-block-size: 2.25rem; min-width: 0; }
   .smrt-sortable__item { display: flex; align-items: center; gap: var(--smrt-spacing-2); padding: var(--smrt-spacing-1) var(--smrt-spacing-2); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-sm); background: var(--smrt-color-surface); min-width: 0; }
   .smrt-sortable__item--dragging { opacity: 0.55; }
   .smrt-sortable__handle { display: inline-grid; place-items: center; flex: 0 0 auto; inline-size: 2rem; block-size: 2rem; padding: 0; border: 0; border-radius: var(--smrt-radius-sm); background: transparent; color: var(--smrt-color-on-surface-variant); cursor: grab; touch-action: none; }

package/dist/components/sortable/Sortable.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sortable.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/sortable/Sortable.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACd,MAAM,YAAY,CAAC;AACpB,iBAAS,QAAQ,CAAC,IAAI,SAAS,YAAY,EAAE,SAAS,SAAS,iBAAiB;WAiRnD,aAAa,CAAC,IAAI,EAAE,SAAS,CAAC;;;;;EAA4E;AACvI,cAAM,iBAAiB,CAAC,IAAI,SAAS,YAAY,EAAC,SAAS,SAAS,iBAAiB;IACjF,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC;IAC7D,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC;IAC/D,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC;IAC7D,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,IAAI,SAAS,YAAY,EAAC,SAAS,SAAS,iBAAiB,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACtgB,CAAC,IAAI,SAAS,YAAY,EAAC,SAAS,SAAS,iBAAiB,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACjN,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,EAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACrE;AACD,QAAA,MAAM,QAAQ,EAAE,qBAAmC,CAAC;AAClC,KAAK,QAAQ,CAAC,IAAI,SAAS,YAAY,EAAC,SAAS,SAAS,iBAAiB,IAAI,YAAY,CAAC,OAAO,QAAQ,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,CAAC;AAC/H,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Sortable.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/sortable/Sortable.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACV,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACd,MAAM,YAAY,CAAC;AACpB,iBAAS,QAAQ,CAAC,IAAI,SAAS,YAAY,EAAE,SAAS,SAAS,iBAAiB;WAsPnD,aAAa,CAAC,IAAI,EAAE,SAAS,CAAC;;;;;EAA4E;AACvI,cAAM,iBAAiB,CAAC,IAAI,SAAS,YAAY,EAAC,SAAS,SAAS,iBAAiB;IACjF,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC;IAC7D,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC;IAC/D,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC;IAC7D,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,IAAI,SAAS,YAAY,EAAC,SAAS,SAAS,iBAAiB,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACtgB,CAAC,IAAI,SAAS,YAAY,EAAC,SAAS,SAAS,iBAAiB,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACjN,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,EAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACrE;AACD,QAAA,MAAM,QAAQ,EAAE,qBAAmC,CAAC;AAClC,KAAK,QAAQ,CAAC,IAAI,SAAS,YAAY,EAAC,SAAS,SAAS,iBAAiB,IAAI,YAAY,CAAC,OAAO,QAAQ,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,CAAC;AAC/H,eAAe,QAAQ,CAAC"}

package/dist/components/sortable/announce.d.ts

@@ -0,0 +1,5 @@
+import type { useI18n } from '@happyvertical/smrt-ui/i18n';
+import type { SortableAnnouncement } from './controller.svelte.js';
+/** Localized screen-reader text for a sortable engine announcement. */
+export declare function formatSortableAnnouncement(t: ReturnType<typeof useI18n>['t'], announcement: SortableAnnouncement): string;
+//# sourceMappingURL=announce.d.ts.map

package/dist/components/sortable/announce.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"announce.d.ts","sourceRoot":"","sources":["../../../src/components/sortable/announce.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAE3D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAEnE,uEAAuE;AACvE,wBAAgB,0BAA0B,CACxC,CAAC,EAAE,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC,GAAG,CAAC,EAClC,YAAY,EAAE,oBAAoB,GACjC,MAAM,CA8BR"}

package/dist/components/sortable/announce.js

@@ -0,0 +1,33 @@
+import { M } from '../../i18n/strings.sortable.js';
+/** Localized screen-reader text for a sortable engine announcement. */
+export function formatSortableAnnouncement(t, announcement) {
+    switch (announcement.type) {
+        case 'pickup':
+            return t(M['ui.sortable.pickup'], {
+                item: announcement.item,
+                destinations: announcement.destinations.join(', '),
+            });
+        case 'position':
+            return t(M['ui.sortable.position'], {
+                item: announcement.item,
+                container: announcement.container,
+                position: announcement.position,
+                count: announcement.count,
+            });
+        case 'drop':
+            return t(M['ui.sortable.drop'], {
+                item: announcement.item,
+                container: announcement.container,
+                position: announcement.position,
+                count: announcement.count,
+            });
+        case 'unavailable':
+            return t(M['ui.sortable.unavailable'], {
+                container: announcement.container,
+            });
+        case 'failed':
+            return t(M['ui.sortable.failed'], { item: announcement.item });
+        case 'cancel':
+            return t(M['ui.sortable.cancel'], { item: announcement.item });
+    }
+}