entasis 0.6.0 → 0.7.0

package/dist/components/AIAskUserQuestion/aiAskUserQuestion.theme.js

@@ -65,5 +65,5 @@ export const aiAskUserQuestionTheme = {
     title: defaultTitle,
     description: defaultDescription
 };
-export const setAIAskUserQuestionTheme = setComponentTheme('aiAskUserQuestion');
+export const setAIAskUserQuestionTheme = setComponentTheme('ai-ask-user-question');
 export const useAIAskUserQuestionTheme = useComponentTheme('aiAskUserQuestion', aiAskUserQuestionTheme);

package/dist/components/AIChat/aiChat.theme.js

@@ -27,5 +27,5 @@ export const aiChatTheme = {
     footer: defaultFooter,
     skeletonMessages: defaultSkeletonMessages
 };
-export const setAIChatTheme = setComponentTheme('aiChat');
-export const useAIChatTheme = useComponentTheme('aiChat', aiChatTheme);
+export const setAIChatTheme = setComponentTheme('ai-chat');
+export const useAIChatTheme = useComponentTheme('ai-chat', aiChatTheme);

package/dist/components/AIComposer/aiComposer.theme.js

@@ -85,5 +85,5 @@ export const aiComposerTheme = {
     queueItem: defaultQueueItem,
     queueText: defaultQueueText
 };
-export const setAIComposerTheme = setComponentTheme('aiComposer');
-export const useAIComposerTheme = useComponentTheme('aiComposer', aiComposerTheme);
+export const setAIComposerTheme = setComponentTheme('ai-composer');
+export const useAIComposerTheme = useComponentTheme('ai-composer', aiComposerTheme);

package/dist/components/AIContext/aiContext.theme.js

@@ -54,5 +54,5 @@ export const aiContextTheme = {
     rowLabel: defaultRowLabel,
     rowValue: defaultRowValue
 };
-export const setAIContextTheme = setComponentTheme('aiContext');
-export const useAIContextTheme = useComponentTheme('aiContext', aiContextTheme);
+export const setAIContextTheme = setComponentTheme('ai-context');
+export const useAIContextTheme = useComponentTheme('ai-context', aiContextTheme);

package/dist/components/AIFilePreview/aiFilePreview.theme.js

@@ -20,5 +20,5 @@ export const aiFilePreviewTheme = {
     meta: cva({ base: 'flex items-center gap-xs text-xs text-neutral/70' }),
     error: cva({ base: 'truncate text-xs text-danger-readable' })
 };
-export const setAIFilePreviewTheme = setComponentTheme('aiFilePreview');
+export const setAIFilePreviewTheme = setComponentTheme('ai-file-preview');
 export const useAIFilePreviewTheme = useComponentTheme('aiFilePreview', aiFilePreviewTheme);

package/dist/components/AIMarker/aiMarker.theme.js

@@ -25,5 +25,5 @@ export const aiMarkerTheme = {
     icon: defaultIcon,
     content: defaultContent
 };
-export const setAIMarkerTheme = setComponentTheme('aiMarker');
-export const useAIMarkerTheme = useComponentTheme('aiMarker', aiMarkerTheme);
+export const setAIMarkerTheme = setComponentTheme('ai-marker');
+export const useAIMarkerTheme = useComponentTheme('ai-marker', aiMarkerTheme);

package/dist/components/AIMessage/aiMessage.theme.js

@@ -128,5 +128,5 @@ export const aiMessageTheme = {
     files: defaultFiles,
     actions: defaultActions
 };
-export const setAIMessageTheme = setComponentTheme('aiMessage');
-export const useAIMessageTheme = useComponentTheme('aiMessage', aiMessageTheme);
+export const setAIMessageTheme = setComponentTheme('ai-message');
+export const useAIMessageTheme = useComponentTheme('ai-message', aiMessageTheme);

package/dist/components/AIMessageActions/aiMessageActions.theme.js

@@ -38,5 +38,5 @@ export const aiMessageActionsTheme = {
     button: defaultButton,
     error: defaultError
 };
-export const setAIMessageActionsTheme = setComponentTheme('aiMessageActions');
+export const setAIMessageActionsTheme = setComponentTheme('ai-message-actions');
 export const useAIMessageActionsTheme = useComponentTheme('aiMessageActions', aiMessageActionsTheme);

package/dist/components/AIModelSelector/aiModelSelector.theme.js

@@ -35,5 +35,5 @@ export const aiModelSelectorTheme = {
     group: defaultGroup,
     empty: defaultEmpty
 };
-export const setAIModelSelectorTheme = setComponentTheme('aiModelSelector');
+export const setAIModelSelectorTheme = setComponentTheme('ai-model-selector');
 export const useAIModelSelectorTheme = useComponentTheme('aiModelSelector', aiModelSelectorTheme);

package/dist/components/AIReasoning/aiReasoning.theme.js

@@ -17,5 +17,5 @@ export const aiReasoningTheme = {
     duration: defaultDuration,
     content: defaultContent
 };
-export const setAIReasoningTheme = setComponentTheme('aiReasoning');
+export const setAIReasoningTheme = setComponentTheme('ai-reasoning');
 export const useAIReasoningTheme = useComponentTheme('aiReasoning', aiReasoningTheme);

package/dist/components/AISuggestion/aiSuggestion.theme.js

@@ -7,5 +7,5 @@ export const aiSuggestionTheme = {
     list: defaultList,
     suggestion: defaultSuggestion
 };
-export const setAISuggestionTheme = setComponentTheme('aiSuggestion');
+export const setAISuggestionTheme = setComponentTheme('ai-suggestion');
 export const useAISuggestionTheme = useComponentTheme('aiSuggestion', aiSuggestionTheme);

package/dist/components/AIThread/aiThread.theme.js

@@ -60,5 +60,5 @@ export const aiThreadTheme = {
     tocOverlay: defaultTocOverlay,
     footer: defaultFooter
 };
-export const setAIThreadTheme = setComponentTheme('aiThread');
-export const useAIThreadTheme = useComponentTheme('aiThread', aiThreadTheme);
+export const setAIThreadTheme = setComponentTheme('ai-thread');
+export const useAIThreadTheme = useComponentTheme('ai-thread', aiThreadTheme);

package/dist/components/AIThreadToc/aiThreadToc.theme.js

@@ -84,5 +84,5 @@ export const aiThreadTocTheme = {
     previewMetadata: defaultPreviewMetadata,
     previewFiles: defaultPreviewFiles
 };
-export const setAIThreadTocTheme = setComponentTheme('aiThreadToc');
+export const setAIThreadTocTheme = setComponentTheme('ai-thread-toc');
 export const useAIThreadTocTheme = useComponentTheme('aiThreadToc', aiThreadTocTheme);

package/dist/components/AITool/aiTool.theme.js

@@ -310,5 +310,5 @@ export const aiToolTheme = {
     treeLeaf: defaultTreeLeaf,
     treeValue: defaultTreeValue
 };
-export const setAIToolTheme = setComponentTheme('aiTool');
-export const useAIToolTheme = useComponentTheme('aiTool', aiToolTheme);
+export const setAIToolTheme = setComponentTheme('ai-tool');
+export const useAIToolTheme = useComponentTheme('ai-tool', aiToolTheme);

package/dist/components/AudioPlayer/audioPlayer.theme.js

@@ -363,5 +363,5 @@ export const audioPlayerTheme = {
     volumeSlider: defaultAudioPlayerVolumeSlider,
     status: defaultAudioPlayerStatus
 };
-export const setAudioPlayerTheme = setComponentTheme('audioPlayer');
-export const useAudioPlayerTheme = useComponentTheme('audioPlayer', audioPlayerTheme);
+export const setAudioPlayerTheme = setComponentTheme('audio-player');
+export const useAudioPlayerTheme = useComponentTheme('audio-player', audioPlayerTheme);

package/dist/components/Avatar/avatarGroup.theme.js

@@ -30,5 +30,5 @@ export const avatarGroupTheme = {
     root: defaultAvatarGroup,
     avatarGroupCount: defaultAvatarGroupCount
 };
-export const setAvatarGroupTheme = setComponentTheme('avatarGroup');
+export const setAvatarGroupTheme = setComponentTheme('avatar-group');
 export const useAvatarGroupTheme = useComponentTheme('avatarGroup', avatarGroupTheme);

package/dist/components/Button/button.mcp.d.ts

@@ -1 +1 @@
-export declare const buttonDescription = "\n# Button Component\n\nThe Button component is a flexible and customizable button element that supports various variants, sizes, colors, and interactive states.\n\n## Basic Usage\n\n```svelte\n<Button>Click me</Button>\n<Button variant=\"outline\">Outline Button</Button>\n<Button color=\"primary\" size=\"large\">Large Primary Button</Button>\n```\n\n## Props\n\n### Core Props\n- **variant**: 'solid' | 'outline' | 'soft' | 'ghost' | 'link' (default: 'solid')\n  - solid: Filled background with color\n  - outline: Transparent background with colored border\n  - soft: Muted color background\n  - ghost: Transparent background with a transient state layer on hover and press\n  - link: Text-only styling with underline on hover\n\n- **color**: 'primary' | 'secondary' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' (default: 'neutral')\n  - Determines the color scheme of the button\n\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n  - small: 24px height, smaller padding and text\n  - normal: 32px height, standard padding\n  - large: 36px height, larger padding and text\n\n### Layout Props\n- **fullWidth**: boolean (default: false) - Makes button take full width of container\n- **squared**: boolean - Makes button square (aspect-ratio 1:1), auto-determined if only prefix/suffix is provided\n- **disabled**: boolean (default: false) - Disables button interaction\n- **loading**: boolean (default: false) - Shows the Theme-configured loading spinner and disables interaction\n\n### State Props\nDescribe the meaning; the Button writes the ARIA. Never pass an aria-* attribute to a Button.\n- **pressed**: boolean - Toggle state of a button that stays on or off (a bold button in a toolbar, a \"show password\" eye). Rendered as aria-pressed\n- **selected**: boolean - Chosen state of a button acting as one option among several (a tab, a listbox option). Rendered as aria-selected\n- **expanded**: boolean - Whether the surface this button opens is showing. Rendered as aria-expanded. A entasis surface (Popover, PopupMenu, Select, Combobox) sets this on its own trigger, so pass it only for a surface you open yourself\n- **haspopup**: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | true - What the surface this button opens contains. Rendered as aria-haspopup, and likewise set by a entasis surface on its own trigger\n\n### Link Props\n- **href**: string - Makes button render as anchor tag\n- **target**: string - Link target (e.g., \"_blank\")\n- **rel**: string - Link relationship\n\n### Event Props\n- **onclick**: (event: MouseEvent) => void - Native click event handler\n- **onpointerenter**: (event: PointerEvent) => void - Native pointer enter event handler\n- **onpointerleave**: (event: PointerEvent) => void - Native pointer leave event handler\n\n### Content Props (Slots)\n- **children**: Snippet - Main button content\n- **prefix**: Snippet - Content before main text (typically icons)\n- **suffix**: Snippet - Content after main text (typically icons)\n\n### Advanced Props\n- **label**: string - Accessible label applied as aria-label on the root element (required for icon-only buttons)\n- **ref**: HTMLElement - Reference to the button element\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Structure\n\nThe button follows this DOM structure:\n```\n<Button>\n\t<Prefix />    <!-- Optional prefix content -->\n\t<Children />  <!-- Main button content -->\n\t<Suffix />    <!-- Optional suffix content -->\n</Button>\n```\n\n## Examples\n\n### Basic Buttons\n```svelte\n<Button>Default Button</Button>\n<Button variant=\"outline\" color=\"primary\">Primary Outline</Button>\n<Button variant=\"soft\" color=\"danger\">Soft Danger</Button>\n<Button variant=\"ghost\">Ghost Button</Button>\n<Button variant=\"link\">Link Button</Button>\n```\n\n### With Icons\n```svelte\n<Button>\n\t{#snippet prefix()}\n\t\t{@render icon()}\n\t{/snippet}\n\tAdd Item\n</Button>\n\n<Button squared>\n\t{#snippet prefix()}\n\t\t{@render icon()}\n\t{/snippet}\n</Button>\n```\n\n### Interactive States\n```svelte\n<Button loading>Loading...</Button>\n<Button disabled>Disabled</Button>\n<Button fullWidth>Full Width Button</Button>\n```\n\n### As Link\n```svelte\n<Button href=\"/dashboard\" target=\"_blank\">Go to Dashboard</Button>\n```\n\n### With Event Handlers\n```svelte\n<script lang=\"ts\">\n\tfunction handleClick(event: MouseEvent) {\n\t\tconsole.log('Clicked:', event.currentTarget);\n\t}\n</script>\n\n<Button onclick={handleClick}>\n\tClick\n</Button>\n```\n\n### Custom Styling\n```svelte\n<Button class=\"lift-4 border-2\" color=\"primary\" variant=\"outline\">\n\tCustom Styled\n</Button>\n```\n\n## Accessibility\n\n- Automatically sets appropriate ARIA roles (button/link)\n- Supports keyboard navigation\n- Disabled state prevents interaction\n- Loading state provides visual feedback\n\n## Notes\n\n- When `href` is provided, renders as `<a>` tag, otherwise `<button>`\n- `squared` is automatically determined when only prefix or suffix is provided without children\n- All event handlers respect disabled state\n- Icon sizing is automatically adjusted based on button size\n\n## Theme Customization\n\nThe Button component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main button container styles\n- **prefix**: Styles for prefix content (icons before text)\n- **suffix**: Styles for suffix content (icons after text)\n\n### Theme Type Definition\n\n```typescript\nimport type { ButtonThemeProps } from 'entasis/button';\n\n// Example theme customization\nconst customTheme: ButtonThemeProps = {\n  root: {\n    base: 'custom-base-classes',\n    size: {\n      small: 'custom-small-classes',\n      normal: 'custom-normal-classes',\n      large: 'custom-large-classes'\n    },\n    color: {\n      primary: 'bg-blue-500 text-white',\n      danger: 'bg-red-500 text-white'\n    },\n    variant: {\n      solid: 'bg-color text-color-contrast',\n      outline: 'border-2 border-color'\n    }\n  },\n  prefix: {\n    size: {\n      small: 'w-3 h-3',\n      normal: 'w-4 h-4',\n      large: 'w-5 h-5'\n    }\n  }\n};\n```\n\n### Available Variants\n\n**root**:\n- base: Base classes applied to all buttons\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Controls padding, text size, and height\n  - color: 'primary' | 'secondary' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' - Color scheme\n  - variant: 'solid' | 'outline' | 'soft' | 'ghost' | 'link' - Visual style variant\n  - loading: boolean - Loading state styling\n  - disabled: boolean - Disabled state styling\n  - squared: boolean - Square button styling\n  - fullWidth: boolean - Full width styling\n\n**prefix**:\n- base: Base classes for prefix content\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Icon size based on button size\n\n**suffix**:\n- base: Base classes for suffix content\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Icon size based on button size\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Button \n  theme={{\n    root: {\n      base: 'rounded-full lift-4',\n      size: {\n        large: 'px-8 py-4 text-xl'\n      }\n    }\n  }}\n>\n  Custom Styled Button\n</Button>\n```\n\n**Color Variant Customization**:\n```svelte\n<Button \n  color=\"primary\"\n  theme={{\n    root: {\n      color: {\n        primary: 'state-layer bg-gradient-to-r from-blue-500 to-purple-500'\n      }\n    }\n  }}\n>\n  Gradient Button\n</Button>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setButtonTheme } from './index.ts';\n  \n  setButtonTheme({\n    root: {\n      variant: {\n        solid: 'state-layer bg-color text-color-contrast lift-3 hover:lift-4 transition-shadow',\n        outline: 'state-layer border-2 border-color'\n      }\n    },\n    prefix: {\n      size: {\n        normal: 'w-5 h-5'\n      }\n    }\n  });\n</script>\n```\n";
+export declare const buttonDescription = "\n# Button Component\n\nThe Button component is a flexible and customizable button element that supports various variants, sizes, colors, and interactive states.\n\n## Basic Usage\n\n```svelte\n<Button>Click me</Button>\n<Button variant=\"outline\">Outline Button</Button>\n<Button color=\"primary\" size=\"large\">Large Primary Button</Button>\n```\n\n## Props\n\n### Core Props\n- **variant**: 'solid' | 'outline' | 'soft' | 'ghost' | 'link' (default: 'solid')\n  - solid: Filled background with color\n  - outline: Transparent background with colored border\n  - soft: Muted color background\n  - ghost: Transparent background with a transient state layer on hover and press\n  - link: Text-only styling with underline on hover\n\n- **color**: 'primary' | 'secondary' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' (default: 'neutral')\n  - Determines the color scheme of the button\n\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n  - small: 28px height, smaller padding and text\n  - normal: 32px height, standard padding\n  - large: 36px height, larger padding and text\n\n### Layout Props\n- **fullWidth**: boolean (default: false) - Makes button take full width of container\n- **squared**: boolean - Makes button square (aspect-ratio 1:1), auto-determined if only prefix/suffix is provided\n- **disabled**: boolean (default: false) - Disables button interaction\n- **loading**: boolean (default: false) - Shows the Theme-configured loading spinner and disables interaction\n\n### State Props\nDescribe the meaning; the Button writes the ARIA. Never pass an aria-* attribute to a Button.\n- **pressed**: boolean - Toggle state of a button that stays on or off (a bold button in a toolbar, a \"show password\" eye). Rendered as aria-pressed\n- **selected**: boolean - Chosen state of a button acting as one option among several (a tab, a listbox option). Rendered as aria-selected\n- **expanded**: boolean - Whether the surface this button opens is showing. Rendered as aria-expanded. A entasis surface (Popover, PopupMenu, Select, Combobox) sets this on its own trigger, so pass it only for a surface you open yourself\n- **haspopup**: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | true - What the surface this button opens contains. Rendered as aria-haspopup, and likewise set by a entasis surface on its own trigger\n\n### Link Props\n- **href**: string - Makes button render as anchor tag\n- **target**: string - Link target (e.g., \"_blank\")\n- **rel**: string - Link relationship\n\n### Event Props\n- **onclick**: (event: MouseEvent) => void - Native click event handler\n- **onpointerenter**: (event: PointerEvent) => void - Native pointer enter event handler\n- **onpointerleave**: (event: PointerEvent) => void - Native pointer leave event handler\n\n### Content Props (Slots)\n- **children**: Snippet - Main button content\n- **prefix**: Snippet - Content before main text (typically icons)\n- **suffix**: Snippet - Content after main text (typically icons)\n\n### Advanced Props\n- **label**: string - Accessible label applied as aria-label on the root element (required for icon-only buttons)\n- **ref**: HTMLElement - Reference to the button element\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Structure\n\nThe button follows this DOM structure:\n```\n<Button>\n\t<Prefix />    <!-- Optional prefix content -->\n\t<Children />  <!-- Main button content -->\n\t<Suffix />    <!-- Optional suffix content -->\n</Button>\n```\n\n## Examples\n\n### Basic Buttons\n```svelte\n<Button>Default Button</Button>\n<Button variant=\"outline\" color=\"primary\">Primary Outline</Button>\n<Button variant=\"soft\" color=\"danger\">Soft Danger</Button>\n<Button variant=\"ghost\">Ghost Button</Button>\n<Button variant=\"link\">Link Button</Button>\n```\n\n### With Icons\n```svelte\n<Button>\n\t{#snippet prefix()}\n\t\t{@render icon()}\n\t{/snippet}\n\tAdd Item\n</Button>\n\n<Button squared>\n\t{#snippet prefix()}\n\t\t{@render icon()}\n\t{/snippet}\n</Button>\n```\n\n### Interactive States\n```svelte\n<Button loading>Loading...</Button>\n<Button disabled>Disabled</Button>\n<Button fullWidth>Full Width Button</Button>\n```\n\n### As Link\n```svelte\n<Button href=\"/dashboard\" target=\"_blank\">Go to Dashboard</Button>\n```\n\n### With Event Handlers\n```svelte\n<script lang=\"ts\">\n\tfunction handleClick(event: MouseEvent) {\n\t\tconsole.log('Clicked:', event.currentTarget);\n\t}\n</script>\n\n<Button onclick={handleClick}>\n\tClick\n</Button>\n```\n\n### Custom Styling\n```svelte\n<Button class=\"lift-4 border-2\" color=\"primary\" variant=\"outline\">\n\tCustom Styled\n</Button>\n```\n\n## Accessibility\n\n- Automatically sets appropriate ARIA roles (button/link)\n- Supports keyboard navigation\n- Disabled state prevents interaction\n- Loading state provides visual feedback\n\n## Notes\n\n- When `href` is provided, renders as `<a>` tag, otherwise `<button>`\n- `squared` is automatically determined when only prefix or suffix is provided without children\n- All event handlers respect disabled state\n- Icon sizing is automatically adjusted based on button size\n\n## Theme Customization\n\nThe Button component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main button container styles\n- **prefix**: Styles for prefix content (icons before text)\n- **suffix**: Styles for suffix content (icons after text)\n\n### Theme Type Definition\n\n```typescript\nimport type { ButtonThemeProps } from 'entasis/button';\n\n// Example theme customization\nconst customTheme: ButtonThemeProps = {\n  root: {\n    base: 'custom-base-classes',\n    size: {\n      small: 'custom-small-classes',\n      normal: 'custom-normal-classes',\n      large: 'custom-large-classes'\n    },\n    color: {\n      primary: 'bg-blue-500 text-white',\n      danger: 'bg-red-500 text-white'\n    },\n    variant: {\n      solid: 'bg-color text-color-contrast',\n      outline: 'border-2 border-color'\n    }\n  },\n  prefix: {\n    size: {\n      small: 'w-3 h-3',\n      normal: 'w-4 h-4',\n      large: 'w-5 h-5'\n    }\n  }\n};\n```\n\n### Available Variants\n\n**root**:\n- base: Base classes applied to all buttons\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Controls padding, text size, and height\n  - color: 'primary' | 'secondary' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' - Color scheme\n  - variant: 'solid' | 'outline' | 'soft' | 'ghost' | 'link' - Visual style variant\n  - loading: boolean - Loading state styling\n  - disabled: boolean - Disabled state styling\n  - squared: boolean - Square button styling\n  - fullWidth: boolean - Full width styling\n\n**prefix**:\n- base: Base classes for prefix content\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Icon size based on button size\n\n**suffix**:\n- base: Base classes for suffix content\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Icon size based on button size\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Button \n  theme={{\n    root: {\n      base: 'rounded-full lift-4',\n      size: {\n        large: 'px-8 py-4 text-xl'\n      }\n    }\n  }}\n>\n  Custom Styled Button\n</Button>\n```\n\n**Color Variant Customization**:\n```svelte\n<Button \n  color=\"primary\"\n  theme={{\n    root: {\n      color: {\n        primary: 'state-layer bg-linear-to-r from-blue-500 to-purple-500'\n      }\n    }\n  }}\n>\n  Gradient Button\n</Button>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setButtonTheme } from './index.ts';\n  \n  setButtonTheme({\n    root: {\n      variant: {\n        solid: 'state-layer bg-color text-color-contrast lift-3 hover:lift-4 transition-shadow',\n        outline: 'state-layer border-2 border-color'\n      }\n    },\n    prefix: {\n      size: {\n        normal: 'w-5 h-5'\n      }\n    }\n  });\n</script>\n```\n";

package/dist/components/Button/button.mcp.js

@@ -25,7 +25,7 @@ The Button component is a flexible and customizable button element that supports
   - Determines the color scheme of the button
 
 - **size**: 'small' | 'normal' | 'large' (default: 'normal')
-  - small: 24px height, smaller padding and text
+  - small: 28px height, smaller padding and text
   - normal: 32px height, standard padding
   - large: 36px height, larger padding and text
 
@@ -239,7 +239,7 @@ const customTheme: ButtonThemeProps = {
   theme={{
     root: {
       color: {
-        primary: 'state-layer bg-gradient-to-r from-blue-500 to-purple-500'
+        primary: 'state-layer bg-linear-to-r from-blue-500 to-purple-500'
       }
     }
   }}

package/dist/components/ButtonGroup/buttonGroup.theme.js

@@ -9,5 +9,5 @@ const defaultButtonGroup = cva({
 export const buttonGroupTheme = {
     root: defaultButtonGroup
 };
-export const setButtonGroupTheme = setComponentTheme('buttonGroup');
+export const setButtonGroupTheme = setComponentTheme('button-group');
 export const useButtonGroupTheme = useComponentTheme('buttonGroup', buttonGroupTheme);

package/dist/components/DocumentViewer/documentViewer.theme.js

@@ -162,5 +162,5 @@ export const documentViewerTheme = {
 export const documentViewerScrollAreaTheme = {
     content: { base: 'h-full' }
 };
-export const setDocumentViewerTheme = setComponentTheme('documentViewer');
+export const setDocumentViewerTheme = setComponentTheme('document-viewer');
 export const useDocumentViewerTheme = useComponentTheme('documentViewer', documentViewerTheme);

package/dist/components/EventCalendar/eventCalendar.theme.js

@@ -186,5 +186,5 @@ export const eventCalendarTheme = {
     agendaDetails,
     resourceHeader
 };
-export const setEventCalendarTheme = setComponentTheme('eventCalendar');
+export const setEventCalendarTheme = setComponentTheme('event-calendar');
 export const useEventCalendarTheme = useComponentTheme('eventCalendar', eventCalendarTheme);

package/dist/components/Form/ColorInput/colorInput.theme.js

@@ -63,5 +63,5 @@ export const colorInputTheme = {
     popover: defaultPopover,
     swatch: defaultSwatch
 };
-export const setColorInputTheme = setComponentTheme('colorInput');
-export const useColorInputTheme = useComponentTheme('colorInput', colorInputTheme);
+export const setColorInputTheme = setComponentTheme('color-input');
+export const useColorInputTheme = useComponentTheme('color-input', colorInputTheme);

package/dist/components/Form/ColorPicker/colorPicker.theme.js

@@ -267,5 +267,5 @@ export const colorPickerTheme = {
     alphaInput: defaultAlphaInput,
     alphaSuffix: defaultAlphaSuffix
 };
-export const setColorPickerTheme = setComponentTheme('colorPicker');
-export const useColorPickerTheme = useComponentTheme('colorPicker', colorPickerTheme);
+export const setColorPickerTheme = setComponentTheme('color-picker');
+export const useColorPickerTheme = useComponentTheme('color-picker', colorPickerTheme);

package/dist/components/Form/DateInput/dateInput.theme.js

@@ -42,5 +42,5 @@ export const dateInputTheme = {
     inputContainer: defaultInputContainer,
     popover: defaultPopover
 };
-export const setDateInputTheme = setComponentTheme('dateInput');
-export const useDateInputTheme = useComponentTheme('dateInput', dateInputTheme);
+export const setDateInputTheme = setComponentTheme('date-input');
+export const useDateInputTheme = useComponentTheme('date-input', dateInputTheme);

package/dist/components/Form/DateSelector/dateSelector.theme.js

@@ -42,5 +42,5 @@ export const dateSelectorTheme = {
     preset: defaultPreset,
     calendar: defaultCalendar
 };
-export const setDateSelectorTheme = setComponentTheme('dateSelector');
+export const setDateSelectorTheme = setComponentTheme('date-selector');
 export const useDateSelectorTheme = useComponentTheme('dateSelector', dateSelectorTheme);

package/dist/components/Form/File/fileInput.theme.js

@@ -68,5 +68,5 @@ export const fileInputTheme = {
     fileList: defaultFileList,
     file: defaultFile
 };
-export const setFileInputTheme = setComponentTheme('fileInput');
-export const useFileInputTheme = useComponentTheme('fileInput', fileInputTheme);
+export const setFileInputTheme = setComponentTheme('file-input');
+export const useFileInputTheme = useComponentTheme('file-input', fileInputTheme);

package/dist/components/Form/KeyValueInput/keyValueInput.theme.js

@@ -87,5 +87,5 @@ export const keyValueInputTheme = {
     removeButton: defaultRemoveButton,
     addButton: defaultAddButton
 };
-export const setKeyValueInputTheme = setComponentTheme('keyValueInput');
-export const useKeyValueInputTheme = useComponentTheme('keyValueInput', keyValueInputTheme);
+export const setKeyValueInputTheme = setComponentTheme('key-value-input');
+export const useKeyValueInputTheme = useComponentTheme('key-value-input', keyValueInputTheme);

package/dist/components/Form/MultiStepForm/multiStepForm.theme.js

@@ -48,5 +48,5 @@ export const multiStepFormTheme = {
     multiStepFormContent: defaultMultiStepContent,
     multiStepFormFooter: defaultMultiStepFooter
 };
-export const setMultiStepFormTheme = setComponentTheme('multiStepForm');
+export const setMultiStepFormTheme = setComponentTheme('multi-step-form');
 export const useMultiStepFormTheme = useComponentTheme('multiStepForm', multiStepFormTheme);

package/dist/components/Form/NumberInput/numberInput.theme.js

@@ -38,5 +38,5 @@ export const numberInputTheme = {
     input: defaultInput,
     inputContainer: defaultInputContainer
 };
-export const setNumberInputTheme = setComponentTheme('numberInput');
-export const useNumberInputTheme = useComponentTheme('numberInput', numberInputTheme);
+export const setNumberInputTheme = setComponentTheme('number-input');
+export const useNumberInputTheme = useComponentTheme('number-input', numberInputTheme);

package/dist/components/Form/PasswordInput/passwordInput.theme.js

@@ -38,5 +38,5 @@ export const passwordInputTheme = {
     input: defaultInput,
     inputContainer: defaultInputContainer
 };
-export const setPasswordInputTheme = setComponentTheme('passwordInput');
-export const usePasswordInputTheme = useComponentTheme('passwordInput', passwordInputTheme);
+export const setPasswordInputTheme = setComponentTheme('password-input');
+export const usePasswordInputTheme = useComponentTheme('password-input', passwordInputTheme);

package/dist/components/Form/PhoneInput/phoneInput.theme.js

@@ -217,5 +217,5 @@ export const phoneInputTheme = {
     countryCheck: defaultCountryCheck,
     countryEmpty: defaultCountryEmpty
 };
-export const setPhoneInputTheme = setComponentTheme('phoneInput');
-export const usePhoneInputTheme = useComponentTheme('phoneInput', phoneInputTheme);
+export const setPhoneInputTheme = setComponentTheme('phone-input');
+export const usePhoneInputTheme = useComponentTheme('phone-input', phoneInputTheme);

package/dist/components/Form/PinInput/pinInput.theme.js

@@ -66,5 +66,5 @@ export const pinInputTheme = {
     character: defaultCharacter,
     caret: defaultCaret
 };
-export const setPinInputTheme = setComponentTheme('pinInput');
-export const usePinInputTheme = useComponentTheme('pinInput', pinInputTheme);
+export const setPinInputTheme = setComponentTheme('pin-input');
+export const usePinInputTheme = useComponentTheme('pin-input', pinInputTheme);

package/dist/components/Form/TagsInput/tagsInput.theme.js

@@ -87,5 +87,5 @@ export const tagsInputTheme = {
     error: defaultError,
     noOptions: defaultNoOptions
 };
-export const setTagsInputTheme = setComponentTheme('tagsInput');
-export const useTagsInputTheme = useComponentTheme('tagsInput', tagsInputTheme);
+export const setTagsInputTheme = setComponentTheme('tags-input');
+export const useTagsInputTheme = useComponentTheme('tags-input', tagsInputTheme);

package/dist/components/Form/TextArea/textArea.theme.js

@@ -38,5 +38,5 @@ export const textAreaTheme = {
     input: defaultTextArea,
     inputContainer: defaultTextAreaContainer
 };
-export const setTextAreaTheme = setComponentTheme('textArea');
-export const useTextAreaTheme = useComponentTheme('textArea', textAreaTheme);
+export const setTextAreaTheme = setComponentTheme('text-area');
+export const useTextAreaTheme = useComponentTheme('text-area', textAreaTheme);

package/dist/components/Form/TextInput/textInput.theme.js

@@ -38,5 +38,5 @@ export const textInputTheme = {
     input: defaultInput,
     inputContainer: defaultInputContainer
 };
-export const setTextInputTheme = setComponentTheme('textInput');
-export const useTextInputTheme = useComponentTheme('textInput', textInputTheme);
+export const setTextInputTheme = setComponentTheme('text-input');
+export const useTextInputTheme = useComponentTheme('text-input', textInputTheme);

package/dist/components/Form/TimeInput/timeInput.theme.js

@@ -88,5 +88,5 @@ export const timeInputTheme = {
     pickerScrollArea: defaultPickerScrollArea,
     pickerOption: defaultPickerOption
 };
-export const setTimeInputTheme = setComponentTheme('timeInput');
-export const useTimeInputTheme = useComponentTheme('timeInput', timeInputTheme);
+export const setTimeInputTheme = setComponentTheme('time-input');
+export const useTimeInputTheme = useComponentTheme('time-input', timeInputTheme);

package/dist/components/Form/VoiceInput/voiceInput.theme.js

@@ -346,5 +346,5 @@ export const voiceInputTheme = {
     timer: defaultTimer,
     error: defaultError
 };
-export const setVoiceInputTheme = setComponentTheme('voiceInput');
-export const useVoiceInputTheme = useComponentTheme('voiceInput', voiceInputTheme);
+export const setVoiceInputTheme = setComponentTheme('voice-input');
+export const useVoiceInputTheme = useComponentTheme('voice-input', voiceInputTheme);

package/dist/components/GanttChart/ganttChart.theme.js

@@ -267,5 +267,5 @@ export const ganttChartTheme = {
     empty,
     liveRegion
 };
-export const setGanttChartTheme = setComponentTheme('ganttChart');
-export const useGanttChartTheme = useComponentTheme('ganttChart', ganttChartTheme);
+export const setGanttChartTheme = setComponentTheme('gantt-chart');
+export const useGanttChartTheme = useComponentTheme('gantt-chart', ganttChartTheme);

package/dist/components/Grid/gridSpan.theme.js

@@ -28,5 +28,5 @@ const defaultGridSpan = cva({
 export const gridSpanTheme = {
     root: defaultGridSpan
 };
-export const setGridSpanTheme = setComponentTheme('gridSpan');
-export const useGridSpanTheme = useComponentTheme('gridSpan', gridSpanTheme);
+export const setGridSpanTheme = setComponentTheme('grid-span');
+export const useGridSpanTheme = useComponentTheme('grid-span', gridSpanTheme);

package/dist/components/MediaVolume/mediaVolumeControl.theme.js

@@ -45,5 +45,5 @@ export const mediaVolumeControlTheme = {
     panel: defaultMediaVolumeControlPanel,
     slider: defaultMediaVolumeControlSlider
 };
-export const setMediaVolumeControlTheme = setComponentTheme('mediaVolumeControl');
+export const setMediaVolumeControlTheme = setComponentTheme('media-volume-control');
 export const useMediaVolumeControlTheme = useComponentTheme('mediaVolumeControl', mediaVolumeControlTheme);

package/dist/components/MenuBar/menuBar.theme.js

@@ -30,5 +30,5 @@ export const menuBarTheme = {
     root: defaultMenuBar,
     trigger: defaultMenuBarTrigger
 };
-export const setMenuBarTheme = setComponentTheme('menuBar');
-export const useMenuBarTheme = useComponentTheme('menuBar', menuBarTheme);
+export const setMenuBarTheme = setComponentTheme('menu-bar');
+export const useMenuBarTheme = useComponentTheme('menu-bar', menuBarTheme);

package/dist/components/MenuOption/menuOption.theme.js

@@ -139,5 +139,5 @@ export const menuOptionTheme = {
     suffix: defaultMenuOptionSuffix,
     content: defaultMenuOptionContent
 };
-export const setMenuOptionTheme = setComponentTheme('menuOption');
-export const useMenuOptionTheme = useComponentTheme('menuOption', menuOptionTheme);
+export const setMenuOptionTheme = setComponentTheme('menu-option');
+export const useMenuOptionTheme = useComponentTheme('menu-option', menuOptionTheme);

package/dist/components/MetadataList/metadataList.theme.js

@@ -189,5 +189,5 @@ export const metadataListTheme = {
     toggle: defaultToggle,
     toggleIcon: defaultToggleIcon
 };
-export const setMetadataListTheme = setComponentTheme('metadataList');
-export const useMetadataListTheme = useComponentTheme('metadataList', metadataListTheme);
+export const setMetadataListTheme = setComponentTheme('metadata-list');
+export const useMetadataListTheme = useComponentTheme('metadata-list', metadataListTheme);

package/dist/components/MiniCalendar/miniCalendar.theme.js

@@ -175,5 +175,5 @@ export const miniCalendarTheme = {
     dayMonth: defaultDayMonth,
     dayNumber: defaultDayNumber
 };
-export const setMiniCalendarTheme = setComponentTheme('miniCalendar');
-export const useMiniCalendarTheme = useComponentTheme('miniCalendar', miniCalendarTheme);
+export const setMiniCalendarTheme = setComponentTheme('mini-calendar');
+export const useMiniCalendarTheme = useComponentTheme('mini-calendar', miniCalendarTheme);

package/dist/components/NetworkIndicator/networkIndicator.mcp.d.ts

@@ -1 +1 @@
-export declare const networkIndicatorDescription = "\n# NetworkIndicator Component\n\nNetworkIndicator is a fixed top loading bar for SvelteKit navigation and explicit async work. Mount one instance near the root layout. It shows automatically during SvelteKit route transitions, can be driven by a controlled `loading` prop, and exposes imperative helpers for request lifecycles.\n\n## Import\n\n```svelte\n<script lang=\"ts\">\n\timport { NetworkIndicator } from 'entasis/network-indicator';\n</script>\n```\n\n## Basic Usage\n\n```svelte\n<!-- +layout.svelte -->\n<script lang=\"ts\">\n\timport { NetworkIndicator } from 'entasis/network-indicator';\n</script>\n\n<NetworkIndicator />\n\n{@render children()}\n```\n\n## Props\n\n- **loading**: boolean = false\n  - Controlled visibility. Use this when the owner already has request state or when rendering examples/previews.\n- **variant**: 'bar' | 'trail' | 'trail-bounce' = 'bar'\n  - `bar` progressively grows one indicator. `trail` renders one randomly sized moving segment at a time. `trail-bounce` sends that random trail fully off one edge, then returns from the opposite edge.\n- **trailGap**: number = 0\n  - Pause between trail passes in milliseconds. Only applies to `variant=\"trail\"`.\n- **color**: 'primary' | 'secondary' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' = 'neutral'\n  - Applies the semantic color token to the bar.\n- **height**: number = 3\n  - Height in pixels. Keep most navigation indicators between 2 and 6.\n- Animation duration and easing come from the `motion` theme slot \u2014 `theme={{ motion: { duration: 450, easing: 'expoOut' } }}` \u2014 not from props; see Motion below.\n- **label**: string = 'Loading'\n  - Accessible label for the indeterminate `role=\"progressbar\"`.\n- **ref**: HTMLDivElement | null\n  - Bindable root element reference while the indicator is visible.\n- **class**: string\n  - Additional classes for the root bar.\n- **theme**: NetworkIndicatorThemeProps\n  - Theme override for the root bar.\n\n## Helper API\n\n```ts\nimport {\n\thideNetworkIndicator,\n\tshowNetworkIndicator,\n\ttoggleNetworkIndicator\n} from 'entasis/network-indicator';\n```\n\nPrefer `showNetworkIndicator()` and `hideNetworkIndicator()` for async work. `toggleNetworkIndicator()` is available for simple demos or manual toggles, but it is easier to desynchronize in request lifecycles.\n\n## Patterns\n\n### Controlled Loading\n\n```svelte\n<script lang=\"ts\">\n\timport { NetworkIndicator } from 'entasis/network-indicator';\n\n\tlet loading = $state(false);\n</script>\n\n<NetworkIndicator {loading} color=\"primary\" label=\"Saving changes\" />\n```\n\n### Async Request\n\n```svelte\n<script lang=\"ts\">\n\timport { Button } from 'entasis/button';\n\timport {\n\t\thideNetworkIndicator,\n\t\tshowNetworkIndicator\n\t} from 'entasis/network-indicator';\n\n\tasync function save() {\n\t\tshowNetworkIndicator();\n\t\ttry {\n\t\t\tawait fetch('/api/save', { method: 'POST' });\n\t\t} finally {\n\t\t\thideNetworkIndicator();\n\t\t}\n\t}\n</script>\n\n<Button onclick={save}>Save</Button>\n```\n\n### Color Variations\n\n```svelte\n<NetworkIndicator loading color=\"primary\" />\n<NetworkIndicator loading color=\"success\" />\n<NetworkIndicator loading color=\"warning\" />\n<NetworkIndicator loading color=\"danger\" />\n```\n\n### Trail Variant\n\n```svelte\n<NetworkIndicator loading variant=\"trail\" color=\"primary\" theme={{ motion: { duration: 650 } }} trailGap={0} />\n<NetworkIndicator loading variant=\"trail\" color=\"success\" height={5} theme={{ motion: { duration: 450 } }} trailGap={120} />\n<NetworkIndicator loading variant=\"trail-bounce\" color=\"info\" theme={{ motion: { duration: 700 } }} trailGap={80} />\n```\n\n### Height Variations\n\n```svelte\n<NetworkIndicator loading height={2} />\n<NetworkIndicator loading height={4} color=\"primary\" />\n<NetworkIndicator loading height={6} color=\"info\" />\n```\n\n### Motion Variations\n\n```svelte\n<NetworkIndicator loading theme={{ motion: { duration: 300, easing: 'cubicInOut' } }} />\n<NetworkIndicator loading theme={{ motion: { duration: 450, easing: 'expoOut' } }} />\n<NetworkIndicator loading theme={{ motion: { duration: 500, easing: 'backOut' } }} />\n```\n\n### Theme Override\n\n```svelte\n<NetworkIndicator\n\tloading\n\tcolor=\"success\"\n\theight={5}\n\ttheme={{\n\t\troot: {\n\t\t\tbase: 'ui-network-indicator fixed top-0 left-0 w-full z-[9999] origin-left rounded-none lift-4'\n\t\t}\n\t}}\n/>\n```\n\n## Theme\n\nThe theme has two parts:\n\n- **root**: the fixed top bar.\n  - `base`: positioning, origin, radius, z-index, and shared bar classes.\n  - `variant`: `bar`, `trail`, or `trail-bounce` container styling.\n  - `color`: semantic color variants.\n- **segment**: trail segment styling.\n  - `base`: segment positioning, radius, opacity, shadow, and transform hints.\n  - `color`: semantic color variants for each trail segment.\n\nThe default root base includes `ui-network-indicator`; keep that class if overriding the base because `toggleNetworkIndicator()` uses it to read current state.\n\n## Accessibility\n\nThe visible bar renders `role=\"progressbar\"` without a value because progress is indeterminate. Use a specific `label` when the loading context matters, such as \"Uploading files\" or \"Saving changes\". If screen readers need richer lifecycle announcements, pair the indicator with app-level live region text.\n\n## Motion\n\n- **motion** theme slot, keyed by `variant`: one growth step of the `bar` loop (`slow`), or\n  one pass of the `trail` / `trail-bounce` variants (the `slower` token, 500ms). Only `duration` / `easing` are read.\n- Ladder: `<Theme components={{ networkIndicator: { motion } }}>` \u2192\n  `setNetworkIndicatorTheme({ motion })` \u2192 `theme={{ motion: { duration, easing } }}`.\n- A resolved duration of 0 (reduced motion) holds the indicator still instead of looping.\n";
+export declare const networkIndicatorDescription = "\n# NetworkIndicator Component\n\nNetworkIndicator is a fixed top loading bar for SvelteKit navigation and explicit async work. Mount one instance near the root layout. It shows automatically during SvelteKit route transitions, can be driven by a controlled `loading` prop, and exposes imperative helpers for request lifecycles.\n\n## Import\n\n```svelte\n<script lang=\"ts\">\n\timport { NetworkIndicator } from 'entasis/network-indicator';\n</script>\n```\n\n## Basic Usage\n\n```svelte\n<!-- +layout.svelte -->\n<script lang=\"ts\">\n\timport { NetworkIndicator } from 'entasis/network-indicator';\n</script>\n\n<NetworkIndicator />\n\n{@render children()}\n```\n\n## Props\n\n- **loading**: boolean = false\n  - Controlled visibility. Use this when the owner already has request state or when rendering examples/previews.\n- **variant**: 'bar' | 'trail' | 'trail-bounce' = 'bar'\n  - `bar` progressively grows one indicator. `trail` renders one randomly sized moving segment at a time. `trail-bounce` sends that random trail fully off one edge, then returns from the opposite edge.\n- **trailGap**: number = 0\n  - Pause between trail passes in milliseconds. Only applies to `variant=\"trail\"`.\n- **color**: 'primary' | 'secondary' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' = 'neutral'\n  - Applies the semantic color token to the bar.\n- **height**: number = 3\n  - Height in pixels. Keep most navigation indicators between 2 and 6.\n- Animation duration and easing come from the `motion` theme slot \u2014 `theme={{ motion: { duration: 450, easing: 'expoOut' } }}` \u2014 not from props; see Motion below.\n- **label**: string = 'Loading'\n  - Accessible label for the indeterminate `role=\"progressbar\"`.\n- **ref**: HTMLDivElement | null\n  - Bindable root element reference while the indicator is visible.\n- **class**: string\n  - Additional classes for the root bar.\n- **theme**: NetworkIndicatorThemeProps\n  - Theme override for the root bar.\n\n## Helper API\n\n```ts\nimport {\n\thideNetworkIndicator,\n\tshowNetworkIndicator,\n\ttoggleNetworkIndicator\n} from 'entasis/network-indicator';\n```\n\nPrefer `showNetworkIndicator()` and `hideNetworkIndicator()` for async work. `toggleNetworkIndicator()` is available for simple demos or manual toggles, but it is easier to desynchronize in request lifecycles.\n\n## Patterns\n\n### Controlled Loading\n\n```svelte\n<script lang=\"ts\">\n\timport { NetworkIndicator } from 'entasis/network-indicator';\n\n\tlet loading = $state(false);\n</script>\n\n<NetworkIndicator {loading} color=\"primary\" label=\"Saving changes\" />\n```\n\n### Async Request\n\n```svelte\n<script lang=\"ts\">\n\timport { Button } from 'entasis/button';\n\timport {\n\t\thideNetworkIndicator,\n\t\tshowNetworkIndicator\n\t} from 'entasis/network-indicator';\n\n\tasync function save() {\n\t\tshowNetworkIndicator();\n\t\ttry {\n\t\t\tawait fetch('/api/save', { method: 'POST' });\n\t\t} finally {\n\t\t\thideNetworkIndicator();\n\t\t}\n\t}\n</script>\n\n<Button onclick={save}>Save</Button>\n```\n\n### Color Variations\n\n```svelte\n<NetworkIndicator loading color=\"primary\" />\n<NetworkIndicator loading color=\"success\" />\n<NetworkIndicator loading color=\"warning\" />\n<NetworkIndicator loading color=\"danger\" />\n```\n\n### Trail Variant\n\n```svelte\n<NetworkIndicator loading variant=\"trail\" color=\"primary\" theme={{ motion: { duration: 650 } }} trailGap={0} />\n<NetworkIndicator loading variant=\"trail\" color=\"success\" height={5} theme={{ motion: { duration: 450 } }} trailGap={120} />\n<NetworkIndicator loading variant=\"trail-bounce\" color=\"info\" theme={{ motion: { duration: 700 } }} trailGap={80} />\n```\n\n### Height Variations\n\n```svelte\n<NetworkIndicator loading height={2} />\n<NetworkIndicator loading height={4} color=\"primary\" />\n<NetworkIndicator loading height={6} color=\"info\" />\n```\n\n### Motion Variations\n\n```svelte\n<NetworkIndicator loading theme={{ motion: { duration: 300, easing: 'cubicInOut' } }} />\n<NetworkIndicator loading theme={{ motion: { duration: 450, easing: 'expoOut' } }} />\n<NetworkIndicator loading theme={{ motion: { duration: 500, easing: 'backOut' } }} />\n```\n\n### Theme Override\n\n```svelte\n<NetworkIndicator\n\tloading\n\tcolor=\"success\"\n\theight={5}\n\ttheme={{\n\t\troot: {\n\t\t\tbase: 'ui-network-indicator fixed top-0 left-0 w-full z-[9999] origin-left rounded-none lift-4'\n\t\t}\n\t}}\n/>\n```\n\n## Theme\n\nThe theme has two parts:\n\n- **root**: the fixed top bar.\n  - `base`: positioning, origin, radius, z-index, and shared bar classes.\n  - `variant`: `bar`, `trail`, or `trail-bounce` container styling.\n  - `color`: semantic color variants.\n- **segment**: trail segment styling.\n  - `base`: segment positioning, radius, opacity, shadow, and transform hints.\n  - `color`: semantic color variants for each trail segment.\n\nThe default root base includes `ui-network-indicator`; keep that class if overriding the base because `toggleNetworkIndicator()` uses it to read current state.\n\n## Accessibility\n\nThe visible bar renders `role=\"progressbar\"` without a value because progress is indeterminate. Use a specific `label` when the loading context matters, such as \"Uploading files\" or \"Saving changes\". If screen readers need richer lifecycle announcements, pair the indicator with app-level live region text.\n\n## Motion\n\n- **motion** theme slot, keyed by `variant`: one growth step of the `bar` loop (`slow`), or\n  one pass of the `trail` / `trail-bounce` variants (the `slower` token, 500ms). Only `duration` / `easing` are read.\n- Ladder: `<Theme components={{ 'network-indicator': { motion } }}>` \u2192\n  `setNetworkIndicatorTheme({ motion })` \u2192 `theme={{ motion: { duration, easing } }}`.\n- A resolved duration of 0 (reduced motion) holds the indicator still instead of looping.\n";

package/dist/components/NetworkIndicator/networkIndicator.mcp.js

@@ -165,7 +165,7 @@ The visible bar renders \`role="progressbar"\` without a value because progress
 
 - **motion** theme slot, keyed by \`variant\`: one growth step of the \`bar\` loop (\`slow\`), or
   one pass of the \`trail\` / \`trail-bounce\` variants (the \`slower\` token, 500ms). Only \`duration\` / \`easing\` are read.
-- Ladder: \`<Theme components={{ networkIndicator: { motion } }}>\` →
+- Ladder: \`<Theme components={{ 'network-indicator': { motion } }}>\` →
   \`setNetworkIndicatorTheme({ motion })\` → \`theme={{ motion: { duration, easing } }}\`.
 - A resolved duration of 0 (reduced motion) holds the indicator still instead of looping.
 `;

package/dist/components/NetworkIndicator/networkIndicator.theme.js

@@ -77,6 +77,6 @@ export const networkIndicatorTheme = {
     root: defaultNetworkIndicator,
     segment: defaultNetworkIndicatorSegment
 };
-export const setNetworkIndicatorTheme = setComponentTheme('networkIndicator');
+export const setNetworkIndicatorTheme = setComponentTheme('network-indicator');
 export const useNetworkIndicatorTheme = useComponentTheme('networkIndicator', networkIndicatorTheme);
-export const useNetworkIndicatorMotion = () => useComponentMotion('networkIndicator', defaultNetworkIndicatorMotion);
+export const useNetworkIndicatorMotion = () => useComponentMotion('network-indicator', defaultNetworkIndicatorMotion);

package/dist/components/QRCode/qrCode.theme.js

@@ -26,5 +26,5 @@ const defaultQRCode = cva({
 export const qrCodeTheme = {
     root: defaultQRCode
 };
-export const setQRCodeTheme = setComponentTheme('qrCode');
-export const useQRCodeTheme = useComponentTheme('qrCode', qrCodeTheme);
+export const setQRCodeTheme = setComponentTheme('qr-code');
+export const useQRCodeTheme = useComponentTheme('qr-code', qrCodeTheme);

package/dist/components/RichTextInput/richTextInput.theme.js

@@ -289,5 +289,5 @@ export const richTextInputTheme = {
     suggestionsStatus: defaultRichTextInputSuggestionsStatus,
     suggestionsError: defaultRichTextInputSuggestionsError
 };
-export const setRichTextInputTheme = setComponentTheme('richTextInput');
-export const useRichTextInputTheme = useComponentTheme('richTextInput', richTextInputTheme);
+export const setRichTextInputTheme = setComponentTheme('rich-text-input');
+export const useRichTextInputTheme = useComponentTheme('rich-text-input', richTextInputTheme);

package/dist/components/ScrollArea/scrollArea.theme.js

@@ -41,5 +41,5 @@ export const scrollAreaTheme = {
     scrollbarX: defaultScrollAreaScrollbarX,
     scrollbarThumb: defaultScrollAreaScrollbarThumb
 };
-export const setScrollAreaTheme = setComponentTheme('scrollArea');
-export const useScrollAreaTheme = useComponentTheme('scrollArea', scrollAreaTheme);
+export const setScrollAreaTheme = setComponentTheme('scroll-area');
+export const useScrollAreaTheme = useComponentTheme('scroll-area', scrollAreaTheme);

package/dist/components/SegmentedControl/segmentedControl.theme.js

@@ -126,5 +126,5 @@ export const segmentedControlTheme = {
     indicator: defaultIndicator,
     staticIndicator: defaultStaticIndicator
 };
-export const setSegmentedControlTheme = setComponentTheme('segmentedControl');
+export const setSegmentedControlTheme = setComponentTheme('segmented-control');
 export const useSegmentedControlTheme = useComponentTheme('segmentedControl', segmentedControlTheme);

package/dist/components/SelectionMenu/selectionMenu.theme.js

@@ -10,5 +10,5 @@ export const selectionMenuTheme = {
     popover: defaultSelectionMenuPopover,
     content: defaultSelectionMenuContent
 };
-export const setSelectionMenuTheme = setComponentTheme('selectionMenu');
+export const setSelectionMenuTheme = setComponentTheme('selection-menu');
 export const useSelectionMenuTheme = useComponentTheme('selectionMenu', selectionMenuTheme);