@happyvertical/smrt-svelte 0.55.5 → 0.55.7

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 });
+    }
+}