entasis 0.5.0 → 0.7.0

package/dist/components/Sidebar/sidebar.theme.d.ts

@@ -29,6 +29,11 @@ export declare const sidebarTheme: {
             normal: string;
             large: string;
         };
+        iconSize: {
+            small: string;
+            normal: string;
+            large: string;
+        };
         density: {
             compact: string;
             normal: string;
@@ -412,6 +417,11 @@ export declare const sidebarTheme: {
             normal: string;
             large: string;
         };
+        iconSize: {
+            small: string;
+            normal: string;
+            large: string;
+        };
         density: {
             compact: string;
             normal: string;
@@ -490,6 +500,11 @@ export declare const setSidebarTheme: (theme: InferComponentTheme<{
             normal: string;
             large: string;
         };
+        iconSize: {
+            small: string;
+            normal: string;
+            large: string;
+        };
         density: {
             compact: string;
             normal: string;
@@ -873,6 +888,11 @@ export declare const setSidebarTheme: (theme: InferComponentTheme<{
             normal: string;
             large: string;
         };
+        iconSize: {
+            small: string;
+            normal: string;
+            large: string;
+        };
         density: {
             compact: string;
             normal: string;
@@ -949,6 +969,11 @@ export declare const useSidebarTheme: import("../../utils/cva/theme.js").UseComp
             normal: string;
             large: string;
         };
+        iconSize: {
+            small: string;
+            normal: string;
+            large: string;
+        };
         density: {
             compact: string;
             normal: string;
@@ -1332,6 +1357,11 @@ export declare const useSidebarTheme: import("../../utils/cva/theme.js").UseComp
             normal: string;
             large: string;
         };
+        iconSize: {
+            small: string;
+            normal: string;
+            large: string;
+        };
         density: {
             compact: string;
             normal: string;

package/dist/components/Sidebar/sidebar.theme.js

@@ -19,10 +19,14 @@ const activeVariants = {
 // The `--sidebar-*` properties are INTERNAL: one `size` step publishes the icon, media and
 // compact-media dimensions the rows read back, so every part scales together. A consumer
 // changes `size`, never one of these properties.
+// Icon and leading-media sizes. `size` sets them by default; `iconSize`, declared after it on the
+// panel parts, publishes the same variables and wins when a consumer sets it on its own.
 const sidebarSizeVariables = {
-    small: '[--sidebar-icon-size:0.875rem] [--sidebar-media-size:1.75rem] [--sidebar-compact-media-size:1rem]',
-    normal: '[--sidebar-icon-size:1rem] [--sidebar-media-size:2rem] [--sidebar-compact-media-size:1.25rem]',
-    large: '[--sidebar-icon-size:1.25rem] [--sidebar-media-size:2.25rem] [--sidebar-compact-media-size:1.5rem]'
+    // The same tokens the rest of the kit sizes icons and media by, so a `spacing` retune still
+    // reaches the sidebar; `iconSize` simply republishes them one step up or down.
+    small: '[--sidebar-icon-size:var(--icon-size-sm)] [--sidebar-media-size:calc(var(--spacing)*7)] [--sidebar-compact-media-size:calc(var(--spacing)*4)]',
+    normal: '[--sidebar-icon-size:var(--icon-size-md)] [--sidebar-media-size:calc(var(--spacing)*8)] [--sidebar-compact-media-size:calc(var(--spacing)*5)]',
+    large: '[--sidebar-icon-size:var(--icon-size-lg)] [--sidebar-media-size:calc(var(--spacing)*9)] [--sidebar-compact-media-size:calc(var(--spacing)*6)]'
 };
 const sidebarDensityVariables = {
     // The same spacing tokens the group's `p-sm/md/lg` resolve to, so anything positioned from
@@ -63,6 +67,7 @@ const defaultPanel = cva({
             positioned: 'w-full'
         },
         size: sidebarSizeVariables,
+        iconSize: sidebarSizeVariables,
         density: sidebarDensityVariables
     },
     compoundVariants: [
@@ -120,16 +125,16 @@ const defaultGroup = cva({
     }
 });
 const defaultGroupLabel = cva({
-    base: 'text-neutral/70 flex shrink-0 items-center rounded-sm font-medium outline-none transition-[height,margin,padding,opacity] duration-normal ease-linear group-data-[collapsible=icon]:opacity-0 disabled:pointer-events-none [&>svg]:shrink-0',
+    base: 'text-neutral/70 flex shrink-0 items-center rounded-sm font-medium outline-none transition-[height,margin,padding,opacity] duration-normal ease-linear group-data-[collapsible=icon]:opacity-0 disabled:pointer-events-none [&>svg]:shrink-0 [&>svg]:size-[var(--sidebar-icon-size)]',
     variants: {
         interactive: {
             true: 'state-layer hover:text-neutral focus-visible:ring-2 focus-visible:ring-focus/50',
             false: null
         },
         size: {
-            small: 'h-control-sm text-xs group-data-[collapsible=icon]:-mt-layout-md [&>svg]:size-icon-sm',
-            normal: 'h-control-md text-sm group-data-[collapsible=icon]:-mt-layout-lg [&>svg]:size-icon-md',
-            large: 'h-control-lg text-sm group-data-[collapsible=icon]:-mt-layout-lg [&>svg]:size-icon-lg'
+            small: 'h-control-sm text-xs group-data-[collapsible=icon]:-mt-layout-md',
+            normal: 'h-control-md text-sm group-data-[collapsible=icon]:-mt-layout-lg',
+            large: 'h-control-lg text-sm group-data-[collapsible=icon]:-mt-layout-lg'
         },
         density: {
             compact: 'px-md',
@@ -190,7 +195,7 @@ const defaultMenu = cva({
     }
 });
 const defaultMenuButton = cva({
-    base: 'state-layer peer/menu-button group/menu-button flex w-full items-center overflow-hidden rounded-sm text-left outline-none transition-[background,color,width,height,padding,margin,border-radius] duration-normal ease-linear hover:text-neutral focus-visible:ring-2 focus-visible:ring-focus/50 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:font-medium group-has-data-[sidebar=menu-action]/menu-item:pr-layout-lg group-data-[collapsible=icon]:mx-[calc((var(--sidebar-width-icon)-var(--sidebar-icon-button-width))/2-var(--sidebar-group-padding))] group-data-[collapsible=icon]:w-[var(--sidebar-icon-button-width)] group-data-[collapsible=icon]:rounded-none group-data-[variant=admin]:group-data-[collapsible=icon]:rounded-sm group-data-[variant=framed]:group-data-[collapsible=icon]:rounded-sm group-data-[variant=inset]:group-data-[collapsible=icon]:rounded-sm group-data-[collapsible=icon]:![padding-inline:calc((var(--sidebar-icon-button-width)-var(--sidebar-icon-size))/2)] group-data-[collapsible=icon]:ring-inset [&_svg]:shrink-0',
+    base: 'state-layer peer/menu-button group/menu-button flex w-full items-center overflow-hidden rounded-sm text-left outline-none transition-[background,color,width,height,padding,margin,border-radius] duration-normal ease-linear hover:text-neutral focus-visible:ring-2 focus-visible:ring-focus/50 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:font-medium group-has-data-[sidebar=menu-action]/menu-item:pr-layout-lg group-data-[collapsible=icon]:mx-[calc((var(--sidebar-width-icon)-var(--sidebar-icon-button-width))/2-var(--sidebar-group-padding))] group-data-[collapsible=icon]:w-[var(--sidebar-icon-button-width)] group-data-[collapsible=icon]:rounded-none group-data-[variant=admin]:group-data-[collapsible=icon]:rounded-sm group-data-[variant=framed]:group-data-[collapsible=icon]:rounded-sm group-data-[variant=inset]:group-data-[collapsible=icon]:rounded-sm group-data-[collapsible=icon]:![padding-inline:calc((var(--sidebar-icon-button-width)-var(--sidebar-icon-size))/2)] group-data-[collapsible=icon]:ring-inset [&_svg]:shrink-0 [&_svg]:size-[var(--sidebar-icon-size)]',
     variants: {
         activeVariant: activeVariants,
         variant: {
@@ -198,9 +203,9 @@ const defaultMenuButton = cva({
             outline: 'border border-neutral-muted bg-surface'
         },
         size: {
-            small: 'text-xs leading-4 [&_svg]:size-icon-sm',
-            normal: 'text-sm leading-5 [&_svg]:size-icon-md',
-            large: 'text-base leading-6 [&_svg]:size-icon-lg'
+            small: 'text-xs leading-4',
+            normal: 'text-sm leading-5',
+            large: 'text-base leading-6'
         },
         density: {
             compact: 'gap-sm px-sm',
@@ -250,12 +255,12 @@ const defaultMenuSecondary = cva({
     }
 });
 const defaultMenuTrailing = cva({
-    base: 'ml-auto shrink-0 opacity-100 transition-[opacity,transform] duration-normal ease-standard group-data-[collapsible=icon]:pointer-events-none group-data-[collapsible=icon]:translate-x-1 group-data-[collapsible=icon]:opacity-0',
+    base: 'ml-auto shrink-0 opacity-100 transition-[opacity,transform] duration-normal ease-standard group-data-[collapsible=icon]:pointer-events-none group-data-[collapsible=icon]:translate-x-1 group-data-[collapsible=icon]:opacity-0 [&>svg]:size-[var(--sidebar-icon-size)]',
     variants: {
         size: {
-            small: '[&>svg]:size-icon-sm',
-            normal: '[&>svg]:size-icon-md',
-            large: '[&>svg]:size-icon-lg'
+            small: '',
+            normal: '',
+            large: ''
         }
     },
     defaultVariants: {
@@ -289,13 +294,13 @@ const defaultTreeSubMenu = cva({
     }
 });
 const defaultSubButton = cva({
-    base: 'state-layer text-neutral/70 hover:text-neutral flex min-w-0 -translate-x-px items-center overflow-hidden rounded-sm outline-none transition-[background,color,height,padding] duration-normal ease-linear focus-visible:ring-2 focus-visible:ring-focus/50 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0',
+    base: 'state-layer text-neutral/70 hover:text-neutral flex min-w-0 -translate-x-px items-center overflow-hidden rounded-sm outline-none transition-[background,color,height,padding] duration-normal ease-linear focus-visible:ring-2 focus-visible:ring-focus/50 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0 [&>svg]:size-[var(--sidebar-icon-size)]',
     variants: {
         activeVariant: activeVariants,
         size: {
-            small: 'h-6 text-xs leading-4 [&>svg]:size-icon-sm',
-            normal: 'h-control-sm text-sm leading-5 [&>svg]:size-icon-md',
-            large: 'h-control-md text-base leading-6 [&>svg]:size-icon-lg'
+            small: 'h-6 text-xs leading-4',
+            normal: 'h-control-sm text-sm leading-5',
+            large: 'h-control-md text-base leading-6'
         },
         density: {
             compact: 'gap-sm px-md',
@@ -316,12 +321,12 @@ const defaultSubButton = cva({
     }
 });
 const defaultMenuAction = cva({
-    base: 'state-layer text-neutral hover:text-neutral peer-hover/menu-button:text-neutral absolute top-1/2 flex aspect-square -translate-y-1/2 items-center justify-center rounded-sm p-0 opacity-100 outline-none transition group-data-[collapsible=icon]:hidden focus-visible:ring-2 focus-visible:ring-focus/50 md:opacity-0 group-focus-within/menu-row:opacity-100 group-hover/menu-row:opacity-100 has-[[aria-expanded=true]]:opacity-100 [&>svg]:shrink-0',
+    base: 'state-layer text-neutral hover:text-neutral peer-hover/menu-button:text-neutral absolute top-1/2 flex aspect-square -translate-y-1/2 items-center justify-center rounded-sm p-0 opacity-100 outline-none transition group-data-[collapsible=icon]:hidden focus-visible:ring-2 focus-visible:ring-focus/50 md:opacity-0 group-focus-within/menu-row:opacity-100 group-hover/menu-row:opacity-100 has-[[aria-expanded=true]]:opacity-100 [&>svg]:shrink-0 [&>svg]:size-[var(--sidebar-icon-size)]',
     variants: {
         size: {
-            small: 'size-4.5 [&>svg]:size-icon-sm',
-            normal: 'size-5 [&>svg]:size-icon-md',
-            large: 'size-6 [&>svg]:size-icon-lg'
+            small: 'size-4.5',
+            normal: 'size-5',
+            large: 'size-6'
         },
         density: {
             compact: 'right-0.5',
@@ -337,12 +342,12 @@ const defaultMenuAction = cva({
 // One icon-only ghost button box. `size` follows the descriptor, defaulting to the Sidebar size,
 // so a group's `+` lands at row scale instead of at the group label's scale.
 const defaultActionSlot = cva({
-    base: 'state-layer text-neutral hover:text-neutral flex aspect-square shrink-0 items-center justify-center rounded-sm p-0 outline-none transition focus-visible:ring-2 focus-visible:ring-focus/50 [&>svg]:shrink-0',
+    base: 'state-layer text-neutral hover:text-neutral flex aspect-square shrink-0 items-center justify-center rounded-sm p-0 outline-none transition focus-visible:ring-2 focus-visible:ring-focus/50 [&>svg]:shrink-0 [&>svg]:size-[var(--sidebar-icon-size)]',
     variants: {
         size: {
-            small: 'h-control-sm [&>svg]:size-icon-sm',
-            normal: 'h-control-md [&>svg]:size-icon-md',
-            large: 'h-control-lg [&>svg]:size-icon-lg'
+            small: 'h-control-sm',
+            normal: 'h-control-md',
+            large: 'h-control-lg'
         }
     },
     defaultVariants: {
@@ -380,12 +385,12 @@ const defaultButtonRow = cva({
     base: 'flex w-full min-w-0 items-center gap-micro'
 });
 const defaultActionTrigger = cva({
-    base: 'flex size-full items-center justify-center rounded-sm bg-transparent outline-none [&>svg]:shrink-0',
+    base: 'flex size-full items-center justify-center rounded-sm bg-transparent outline-none [&>svg]:shrink-0 [&>svg]:size-[var(--sidebar-icon-size)]',
     variants: {
         size: {
-            small: '[&>svg]:size-icon-sm',
-            normal: '[&>svg]:size-icon-md',
-            large: '[&>svg]:size-icon-lg'
+            small: '',
+            normal: '',
+            large: ''
         }
     },
     defaultVariants: {
@@ -662,6 +667,7 @@ const defaultMobilePanel = cva({
             right: ''
         },
         size: sidebarSizeVariables,
+        iconSize: sidebarSizeVariables,
         density: sidebarDensityVariables
     },
     defaultVariants: {
@@ -674,8 +680,8 @@ const defaultMedia = cva({
     base: 'bg-neutral text-neutral-contrast flex aspect-square shrink-0 items-center justify-center rounded-sm',
     variants: {
         itemSize: {
-            normal: 'text-xs',
-            large: ''
+            normal: 'text-xs size-[var(--sidebar-compact-media-size)]',
+            large: `size-[var(--sidebar-media-size)] [&_svg]:size-[var(--sidebar-icon-size)]`
         },
         size: {
             small: '',
@@ -684,12 +690,9 @@ const defaultMedia = cva({
         }
     },
     compoundVariants: [
-        { itemSize: 'large', size: 'small', class: 'size-7 [&_svg]:size-icon-sm' },
-        { itemSize: 'large', size: 'normal', class: 'size-8 [&_svg]:size-icon-md' },
-        { itemSize: 'large', size: 'large', class: 'size-9 [&_svg]:size-icon-lg' },
-        { itemSize: 'normal', size: 'small', class: 'size-4 [&_svg]:size-icon-xs' },
-        { itemSize: 'normal', size: 'normal', class: 'size-5 [&_svg]:size-icon-xs' },
-        { itemSize: 'normal', size: 'large', class: 'size-6 [&_svg]:size-icon-sm' }
+        { itemSize: 'normal', size: 'small', class: '[&_svg]:size-icon-xs' },
+        { itemSize: 'normal', size: 'normal', class: '[&_svg]:size-icon-xs' },
+        { itemSize: 'normal', size: 'large', class: '[&_svg]:size-icon-sm' }
     ],
     defaultVariants: {
         itemSize: 'large',
@@ -697,12 +700,12 @@ const defaultMedia = cva({
     }
 });
 const defaultAvatar = cva({
-    base: 'bg-neutral-muted text-neutral-muted-readable flex shrink-0 items-center justify-center overflow-hidden rounded-sm font-medium',
+    base: 'bg-neutral-muted text-neutral-muted-readable flex shrink-0 items-center justify-center overflow-hidden rounded-sm font-medium size-[var(--sidebar-media-size)]',
     variants: {
         size: {
-            small: 'size-7 text-xs',
-            normal: 'size-8 text-sm',
-            large: 'size-9 text-sm'
+            small: 'text-xs',
+            normal: 'text-sm',
+            large: 'text-sm'
         }
     },
     defaultVariants: {

package/dist/components/SortableList/sortableList.theme.js

@@ -85,5 +85,5 @@ export const sortableListTheme = {
     handle: defaultHandle,
     empty: defaultEmpty
 };
-export const setSortableListTheme = setComponentTheme('sortableList');
-export const useSortableListTheme = useComponentTheme('sortableList', sortableListTheme);
+export const setSortableListTheme = setComponentTheme('sortable-list');
+export const useSortableListTheme = useComponentTheme('sortable-list', sortableListTheme);

package/dist/components/SpinnerText/spinnerText.mcp.d.ts

@@ -1 +1 @@
-export declare const spinnerTextDescription = "\n# SpinnerText Component\n\nSpinnerText combines the existing Spinner with a stable-width sequence of loading messages. Messages cycle on a configurable delay and transition vertically or through a left-to-right reveal without shifting surrounding layout.\n\n## Import\n\n```svelte\n<script lang=\"ts\">\n\timport { SpinnerText } from 'entasis/spinner-text';\n</script>\n```\n\n## Basic usage\n\n```svelte\n<SpinnerText\n\ttexts={['Reading files', 'Building context', 'Preparing answer']}\n\tdelay={1800}\n\tshimmer\n/>\n```\n\n## Props\n\n- **texts**: `readonly string[]` (required) - Messages displayed in sequence. The first message is rendered during SSR.\n- **delay**: `number` (default: `2200`) - Milliseconds between message changes. Zero, negative, and non-finite values pause cycling.\n- **transition**: `'vertical' | 'reveal'` (default: `'vertical'`) - Moves the outgoing message down while the next enters from above, or replaces both through opposing left-to-right clip reveals.\n- **shimmer**: `boolean` (default: `false`) - Applies the Entasis shimmer utility to the active message.\n- **showSpinner**: `boolean` (default: `true`) - Shows or hides the leading Spinner.\n- **spinnerVariant**: `'default' | 'grid' | 'pulse' | 'puff' | 'lines' | 'circles'` (default: Theme `spinnerVariant`, then `'default'`) - Overrides the global spinner animation for this instance.\n- **spinner**: `Snippet<[SpinnerTextSpinnerPayload]>` - Replaces the default visual spinner. Receives the resolved `color`, `size`, and `variant`.\n- **size**: `'small' | 'normal' | 'large'` (default: `'normal'`) - Controls spinner dimensions, gap, text size, and line height.\n- **color**: `Colors` (default: `'neutral'`) - Semantic color applied to both spinner and text.\n- **label**: `string` (default: `'Loading'`) - Accessible fallback when `texts` is empty.\n- **ref**: `HTMLElement | null` (bindable) - Root status element.\n- **class**: `string` - Additional root classes.\n- **theme**: `SpinnerTextThemeProps` - Per-instance theme overrides.\n\nStandard Svelte attachments are spread onto the root status element.\n\n## Custom spinner\n\n```svelte\n<script lang=\"ts\">\n\timport { Spinner } from 'entasis/spinner';\n\timport { SpinnerText } from 'entasis/spinner-text';\n</script>\n\n<SpinnerText texts={['Thinking', 'Composing']} color=\"primary\">\n\t{#snippet spinner({ size, color })}\n\t\t<Spinner variant=\"circles\" decorative {size} {color} />\n\t{/snippet}\n</SpinnerText>\n```\n\n## Behavior\n\n- A root attachment owns the interval and restarts it when `texts` length or `delay` changes.\n- One or zero messages do not create an interval.\n- All messages occupy the same hidden CSS grid cell, so the component reserves the width of its longest message and does not resize on every transition.\n- The vertical transition uses the design system's configured duration and easing.\n- The reveal transition clips the outgoing text from the left while revealing the incoming text from the left.\n- Vertical uses 1.5 times the configured theme duration; reveal uses 2.5 times that duration. Both use the configured easing.\n- The default Spinner is visually reduced one step relative to the message line height. Custom spinner snippets retain full control over their dimensions.\n- Shimmer behavior remains owned by the existing global shimmer utility.\n- The default indicator delegates to Spinner and remains compatible with global spinner theme configuration.\n\n## Accessibility\n\n- The root uses `role=\"status\"`, `aria-live=\"polite\"`, and `aria-atomic=\"true\"`.\n- Visual transition layers and the spinner are hidden from assistive technology.\n- A single screen-reader-only message changes with the active text, avoiding duplicate announcements while outgoing and incoming visual layers overlap.\n- When `texts` is empty, `label` supplies the accessible status name.\n\n## Theme parts\n\n- **root** - Inline status wrapper, semantic color, and size-specific gap.\n- **spinner** - Default or custom spinner container.\n- **viewport** - Clipped text transition viewport.\n- **sizer** - Hidden grid that reserves the longest message width.\n- **sizerItem** - Individual hidden sizing message.\n- **message** - Active visual message and optional shimmer state.\n\n## Motion\n\n- **motion** theme slot, keyed by `mode`: the `vertical` slide runs on `slow`, the `reveal`\n  wipe on `slower`. Only `duration` / `easing` are read; the geometry is fixed.\n- Ladder: `<Theme components={{ spinnerText: { motion } }}>` \u2192 `setSpinnerTextTheme({ motion })`\n  \u2192 `theme.motion`. Reduced motion collapses it to 0 (the text swaps instantly).\n";
+export declare const spinnerTextDescription = "\n# SpinnerText Component\n\nSpinnerText combines the existing Spinner with a stable-width sequence of loading messages. Messages cycle on a configurable delay and transition vertically or through a left-to-right reveal without shifting surrounding layout.\n\n## Import\n\n```svelte\n<script lang=\"ts\">\n\timport { SpinnerText } from 'entasis/spinner-text';\n</script>\n```\n\n## Basic usage\n\n```svelte\n<SpinnerText\n\ttexts={['Reading files', 'Building context', 'Preparing answer']}\n\tdelay={1800}\n\tshimmer\n/>\n```\n\n## Props\n\n- **texts**: `readonly string[]` (required) - Messages displayed in sequence. The first message is rendered during SSR.\n- **delay**: `number` (default: `2200`) - Milliseconds between message changes. Zero, negative, and non-finite values pause cycling.\n- **transition**: `'vertical' | 'reveal'` (default: `'vertical'`) - Moves the outgoing message down while the next enters from above, or replaces both through opposing left-to-right clip reveals.\n- **shimmer**: `boolean` (default: `false`) - Applies the Entasis shimmer utility to the active message.\n- **showSpinner**: `boolean` (default: `true`) - Shows or hides the leading Spinner.\n- **spinnerVariant**: `'default' | 'grid' | 'pulse' | 'puff' | 'lines' | 'circles'` (default: Theme `spinnerVariant`, then `'default'`) - Overrides the global spinner animation for this instance.\n- **spinner**: `Snippet<[SpinnerTextSpinnerPayload]>` - Replaces the default visual spinner. Receives the resolved `color`, `size`, and `variant`.\n- **size**: `'small' | 'normal' | 'large'` (default: `'normal'`) - Controls spinner dimensions, gap, text size, and line height.\n- **color**: `Colors` (default: `'neutral'`) - Semantic color applied to both spinner and text.\n- **label**: `string` (default: `'Loading'`) - Accessible fallback when `texts` is empty.\n- **ref**: `HTMLElement | null` (bindable) - Root status element.\n- **class**: `string` - Additional root classes.\n- **theme**: `SpinnerTextThemeProps` - Per-instance theme overrides.\n\nStandard Svelte attachments are spread onto the root status element.\n\n## Custom spinner\n\n```svelte\n<script lang=\"ts\">\n\timport { Spinner } from 'entasis/spinner';\n\timport { SpinnerText } from 'entasis/spinner-text';\n</script>\n\n<SpinnerText texts={['Thinking', 'Composing']} color=\"primary\">\n\t{#snippet spinner({ size, color })}\n\t\t<Spinner variant=\"circles\" decorative {size} {color} />\n\t{/snippet}\n</SpinnerText>\n```\n\n## Behavior\n\n- A root attachment owns the interval and restarts it when `texts` length or `delay` changes.\n- One or zero messages do not create an interval.\n- All messages occupy the same hidden CSS grid cell, so the component reserves the width of its longest message and does not resize on every transition.\n- The vertical transition uses the design system's configured duration and easing.\n- The reveal transition clips the outgoing text from the left while revealing the incoming text from the left.\n- Vertical uses 1.5 times the configured theme duration; reveal uses 2.5 times that duration. Both use the configured easing.\n- The default Spinner is visually reduced one step relative to the message line height. Custom spinner snippets retain full control over their dimensions.\n- Shimmer behavior remains owned by the existing global shimmer utility.\n- The default indicator delegates to Spinner and remains compatible with global spinner theme configuration.\n\n## Accessibility\n\n- The root uses `role=\"status\"`, `aria-live=\"polite\"`, and `aria-atomic=\"true\"`.\n- Visual transition layers and the spinner are hidden from assistive technology.\n- A single screen-reader-only message changes with the active text, avoiding duplicate announcements while outgoing and incoming visual layers overlap.\n- When `texts` is empty, `label` supplies the accessible status name.\n\n## Theme parts\n\n- **root** - Inline status wrapper, semantic color, and size-specific gap.\n- **spinner** - Default or custom spinner container.\n- **viewport** - Clipped text transition viewport.\n- **sizer** - Hidden grid that reserves the longest message width.\n- **sizerItem** - Individual hidden sizing message.\n- **message** - Active visual message and optional shimmer state.\n\n## Motion\n\n- **motion** theme slot, keyed by `mode`: the `vertical` slide runs on `slow`, the `reveal`\n  wipe on `slower`. Only `duration` / `easing` are read; the geometry is fixed.\n- Ladder: `<Theme components={{ 'spinner-text': { motion } }}>` \u2192 `setSpinnerTextTheme({ motion })`\n  \u2192 `theme.motion`. Reduced motion collapses it to 0 (the text swaps instantly).\n";

package/dist/components/SpinnerText/spinnerText.mcp.js

@@ -86,6 +86,6 @@ Standard Svelte attachments are spread onto the root status element.
 
 - **motion** theme slot, keyed by \`mode\`: the \`vertical\` slide runs on \`slow\`, the \`reveal\`
   wipe on \`slower\`. Only \`duration\` / \`easing\` are read; the geometry is fixed.
-- Ladder: \`<Theme components={{ spinnerText: { motion } }}>\` → \`setSpinnerTextTheme({ motion })\`
+- Ladder: \`<Theme components={{ 'spinner-text': { motion } }}>\` → \`setSpinnerTextTheme({ motion })\`
   → \`theme.motion\`. Reduced motion collapses it to 0 (the text swaps instantly).
 `;

package/dist/components/SpinnerText/spinnerText.theme.js

@@ -98,6 +98,6 @@ export const spinnerTextTheme = {
     sizerItem: defaultSizerItem,
     message: defaultMessage
 };
-export const setSpinnerTextTheme = setComponentTheme('spinnerText');
+export const setSpinnerTextTheme = setComponentTheme('spinner-text');
 export const useSpinnerTextTheme = useComponentTheme('spinnerText', spinnerTextTheme);
-export const useSpinnerTextMotion = () => useComponentMotion('spinnerText', defaultSpinnerTextMotion);
+export const useSpinnerTextMotion = () => useComponentMotion('spinner-text', defaultSpinnerTextMotion);

package/dist/components/ToggleButton/toggleButton.theme.js

@@ -97,5 +97,5 @@ export const toggleButtonTheme = {
     prefix: defaultToggleButtonPrefix,
     suffix: defaultToggleButtonSuffix
 };
-export const setToggleButtonTheme = setComponentTheme('toggleButton');
+export const setToggleButtonTheme = setComponentTheme('toggle-button');
 export const useToggleButtonTheme = useComponentTheme('toggleButton', toggleButtonTheme);

package/dist/components/ToggleButtonGroup/toggleButtonGroup.theme.js

@@ -15,5 +15,5 @@ const defaultToggleButtonGroup = cva({
 export const toggleButtonGroupTheme = {
     root: defaultToggleButtonGroup
 };
-export const setToggleButtonGroupTheme = setComponentTheme('toggleButtonGroup');
+export const setToggleButtonGroupTheme = setComponentTheme('toggle-button-group');
 export const useToggleButtonGroupTheme = useComponentTheme('toggleButtonGroup', toggleButtonGroupTheme);

package/dist/components/ToggleMenu/toggleMenu.theme.js

@@ -18,5 +18,5 @@ export const toggleMenuTheme = {
     unit: defaultToggleMenuUnit,
     more: defaultToggleMenuMore
 };
-export const setToggleMenuTheme = setComponentTheme('toggleMenu');
-export const useToggleMenuTheme = useComponentTheme('toggleMenu', toggleMenuTheme);
+export const setToggleMenuTheme = setComponentTheme('toggle-menu');
+export const useToggleMenuTheme = useComponentTheme('toggle-menu', toggleMenuTheme);

package/dist/components/VideoPlayer/videoPlayer.theme.js

@@ -314,5 +314,5 @@ export const videoPlayerTheme = {
     popoverPanel: defaultVideoPlayerPopoverPanel,
     volumePanel: defaultVideoPlayerVolumePanel
 };
-export const setVideoPlayerTheme = setComponentTheme('videoPlayer');
-export const useVideoPlayerTheme = useComponentTheme('videoPlayer', videoPlayerTheme);
+export const setVideoPlayerTheme = setComponentTheme('video-player');
+export const useVideoPlayerTheme = useComponentTheme('video-player', videoPlayerTheme);