entasis 0.11.0 → 0.13.0

package/dist/components/Avatar/avatar.theme.d.ts

@@ -1,114 +1,114 @@
 import { type InferComponentTheme } from '../../utils/cva/index.js';
 export declare const avatarTheme: {
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    root: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             normal: string;
             small: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    avatarImage: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    avatarImage: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             normal: string;
             small: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    avatarPrefix: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    avatarPrefix: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             normal: string;
             small: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    avatarSuffix: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    avatarSuffix: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             normal: string;
             small: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    avatarInitials: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    avatarInitials: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             normal: string;
             small: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 };
 export type AvatarTheme = typeof avatarTheme;
 export type AvatarThemeProps = InferComponentTheme<AvatarTheme>;
 export declare const setAvatarTheme: (theme: InferComponentTheme<{
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    root: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             normal: string;
             small: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    avatarImage: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    avatarImage: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             normal: string;
             small: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    avatarPrefix: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    avatarPrefix: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             normal: string;
             small: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    avatarSuffix: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    avatarSuffix: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             normal: string;
             small: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    avatarInitials: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    avatarInitials: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             normal: string;
             small: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 }>) => void;
-export declare const useAvatarTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+export declare const useAvatarTheme: import("../../utils/cva/theme.ts").UseComponentTheme<{
+    root: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             normal: string;
             small: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    avatarImage: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    avatarImage: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             normal: string;
             small: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    avatarPrefix: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    avatarPrefix: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             normal: string;
             small: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    avatarSuffix: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    avatarSuffix: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             normal: string;
             small: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    avatarInitials: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    avatarInitials: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             normal: string;
             small: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 }>;

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

@@ -1,7 +1,7 @@
 import { setComponentTheme, useComponentTheme } from '../../utils/cva/index.js';
 import { cva } from '../../utils/cva/index.js';
 const defaultAvatar = cva({
-    base: 'relative items-center border border-neutral-muted text-neutral aspect-ratio-1 rounded-full',
+    base: 'group/avatar relative items-center border border-neutral-muted text-neutral aspect-ratio-1 rounded-full',
     variants: {
         size: {
             normal: 'size-8',
@@ -14,7 +14,7 @@ const defaultAvatar = cva({
     }
 });
 const defaultAvatarImage = cva({
-    base: 'rounded-full absolute top-0 left-0 z-0 object-cover w-full max-w-full h-full max-h-full',
+    base: 'rounded-full absolute top-0 left-0 z-0 object-cover w-full max-w-full h-full max-h-full opacity-0 transition-opacity duration-normal motion-reduce:transition-none group-data-[status=loaded]/avatar:opacity-100',
     variants: {
         size: {
             normal: '',
@@ -55,7 +55,7 @@ const defaultAvatarSuffix = cva({
 // Small initials sit on the type scale's smallest step, so they tighten their tracking instead:
 // two bold capitals then fill the 24px circle in the same proportion the larger sizes do.
 const defaultAvatarInitials = cva({
-    base: 'absolute bg-surface-floating bottom-0 w-full h-full text-center left-0 rounded-full flex items-center justify-center uppercase font-bold text-sm',
+    base: 'absolute bg-surface-floating bottom-0 w-full h-full text-center left-0 rounded-full flex items-center justify-center uppercase font-bold text-sm transition-opacity duration-normal motion-reduce:transition-none group-data-[status=loaded]/avatar:opacity-0',
     variants: {
         size: {
             normal: 'text-sm',

package/dist/components/Avatar/avatarGroup.theme.d.ts

@@ -1,51 +1,51 @@
 import { type InferComponentTheme } from '../../utils/cva/index.js';
 export declare const avatarGroupTheme: {
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    root: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             normal: string;
             small: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    avatarGroupCount: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    avatarGroupCount: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             normal: string;
             small: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 };
 export type AvatarGroupTheme = typeof avatarGroupTheme;
 export type AvatarGroupThemeProps = InferComponentTheme<AvatarGroupTheme>;
 export declare const setAvatarGroupTheme: (theme: InferComponentTheme<{
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    root: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             normal: string;
             small: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    avatarGroupCount: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    avatarGroupCount: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             normal: string;
             small: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 }>) => void;
-export declare const useAvatarGroupTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+export declare const useAvatarGroupTheme: import("../../utils/cva/theme.ts").UseComponentTheme<{
+    root: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             normal: string;
             small: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    avatarGroupCount: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    avatarGroupCount: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             normal: string;
             small: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 }>;

package/dist/components/Avatar/index.d.ts

@@ -1,6 +1,6 @@
 export { default as Avatar } from './Avatar.svelte';
 export { default as AvatarGroup } from './AvatarGroup.svelte';
-export type { AvatarItem, AvatarProps } from './avatar.props.js';
+export type { AvatarImageAttributes, AvatarItem, AvatarProps, AvatarStatus } from './avatar.props.js';
 export type { AvatarGroupProps } from './avatarGroup.props.js';
 export { avatarTheme, setAvatarTheme, useAvatarTheme, type AvatarTheme, type AvatarThemeProps } from './avatar.theme.js';
 export { avatarGroupTheme, setAvatarGroupTheme, useAvatarGroupTheme, type AvatarGroupTheme, type AvatarGroupThemeProps } from './avatarGroup.theme.js';

package/dist/components/Breadcrumbs/breadcrumbs.mcp.d.ts

@@ -1 +1 @@
-export declare const breadcrumbsDescription = "\n# Breadcrumbs Component\n\nA navigation component that displays a hierarchical path of links, helping users understand their location within a website or application. Supports keyboard navigation, dropdown menus for nested items, customizable separators, and ellipsis for long paths. Uses semantic HTML structure (`<nav><ol><li>`) following accessibility best practices.\n\n## Basic Usage\n\n```svelte\n<script>\n  import { Breadcrumbs } from './index.ts';\n  \n  const items = [\n    { label: 'Home', href: '/' },\n    { label: 'Products', href: '/products' },\n    { label: 'Electronics', href: '/products/electronics', active: true }\n  ];\n</script>\n\n<Breadcrumbs {items} />\n```\n\n## Props\n\n### Core Props\n\n- **items**: BreadcrumbItem[] (required)\n  - Array of breadcrumb items to display\n  - Each item is a config object with: label, href, active, disabled, onclick, icon, menu\n\n- **home**: Omit<BreadcrumbItem, 'menu' | 'label'> & { label?: string | Snippet } (optional)\n  - Optional home breadcrumb item to prepend to the items array\n  - If provided, it will be rendered as the first breadcrumb\n  - When `label` is omitted a house icon is rendered\n\n- **maxItems**: number (optional)\n  - Maximum number of items to show before using ellipsis\n  - When set, shows first item, ellipsis, and last N items\n  - Example: `maxItems={3}` shows first item + ellipsis + last 2 items\n  - If maxItems >= items.length, all items are shown (no ellipsis)\n\n- **showSeparator**: boolean (default: true)\n  - Whether to display separators between breadcrumb items\n\n- **class**: string\n  - Additional CSS classes for the breadcrumbs container\n\n- **theme**: BreadcrumbsThemeProps\n  - Custom theme overrides for styling\n\n### BreadcrumbItem Properties\n\n- **label**: string | Snippet (required)\n  - The text or snippet to display for the breadcrumb item\n  - Can be a string or a snippet without parameters\n\n- **href**: string (optional)\n  - URL to navigate to. If provided, renders as an anchor element\n\n- **active**: boolean (default: false)\n  - Whether this breadcrumb represents the current page\n  - Active items render as `<span>` with `font-normal` styling and `aria-current=\"page\"`\n\n- **disabled**: boolean (default: false)\n  - Whether the breadcrumb item is disabled\n  - Disabled items are not navigable and have reduced opacity\n\n- **onclick**: (event: MouseEvent) => void (optional)\n  - Native click event handler for the breadcrumb item\n\n- **icon**: string | Snippet (optional)\n  - Icon snippet or string to display before the label\n\n- **menu**: MenuItem[] (optional)\n  - Array of menu items for dropdown functionality\n  - If provided, the breadcrumb renders as a PopupMenu\n\n### Content Props (Slots)\n\n- **separator**: Snippet\n  - Custom separator between breadcrumb items\n  - Default: `arrowRightIcon` (chevron right icon)\n  - No parameters passed to the snippet\n\n- **ellipsis**: Snippet\n  - Custom rendering for the ellipsis indicator\n  - Default: `dotsThreeOutlineIcon` with \"More\" screen reader text\n  - No parameters passed to the snippet\n\n## Examples\n\n### Basic Breadcrumbs with Links\n\n```svelte\n<script>\n  import { Breadcrumbs } from './index.ts';\n  \n  const items = [\n    { label: 'Home', href: '/' },\n    { label: 'About', href: '/about' },\n    { label: 'Team', href: '/about/team', active: true }\n  ];\n</script>\n\n<Breadcrumbs {items} />\n```\n\n### Breadcrumbs with Home Item\n\n```svelte\n<script>\n  import { Breadcrumbs } from './index.ts';\n  \n  const items = [\n    { label: 'Products', href: '/products' },\n    { label: 'Electronics', href: '/products/electronics', active: true }\n  ];\n</script>\n\n<Breadcrumbs home={{ label: 'Home', href: '/' }} {items} />\n<!-- Or with the default house icon -->\n<Breadcrumbs home={{ href: '/' }} {items} />\n```\n\n### Breadcrumbs with Icons\n\n```svelte\n<script lang=\"ts\">\n  import { Breadcrumbs } from './index.ts';\n  import { houseIcon } from 'entasis/icons/house';\n  import { folderIcon } from 'entasis/icons/folder';\n  import { fileIcon } from 'entasis/icons/file';\n  \n  const items = [\n    { label: 'Home', href: '/', icon: houseIcon },\n    { label: 'Documents', href: '/docs', icon: folderIcon },\n    { label: 'Report.pdf', href: '/docs/report', icon: fileIcon, active: true }\n  ];\n</script>\n\n<Breadcrumbs {items} />\n```\n\n### Breadcrumbs with Dropdown Menus\n\n```svelte\n<script lang=\"ts\">\n  import { Breadcrumbs, type BreadcrumbItem } from './index.ts';\n  \n  const items: BreadcrumbItem[] = [\n    { label: 'Home', href: '/' },\n    { \n      label: 'Products', \n      menu: [\n        { type: 'option', children: 'All Products', href: '/products' },\n        { type: 'option', children: 'Electronics', href: '/products/electronics' },\n        { type: 'option', children: 'Clothing', href: '/products/clothing' }\n      ]\n    },\n    { label: 'Electronics', href: '/products/electronics', active: true }\n  ];\n</script>\n\n<Breadcrumbs {items} />\n```\n\n### Custom Separator\n\n```svelte\n<script>\n  import { Breadcrumbs } from './index.ts';\n  \n  const items = [\n    { label: 'Home', href: '/' },\n    { label: 'Products', href: '/products' },\n    { label: 'Details', href: '/products/details', active: true }\n  ];\n</script>\n\n<Breadcrumbs {items}>\n  {#snippet separator()}\n    <span class=\"text-neutral/70\">\u203A</span>\n  {/snippet}\n</Breadcrumbs>\n```\n\n### Breadcrumbs with Ellipsis\n\n```svelte\n<script>\n  import { Breadcrumbs } from './index.ts';\n  \n  const items = [\n    { label: 'Home', href: '/' },\n    { label: 'Category 1', href: '/cat1' },\n    { label: 'Category 2', href: '/cat2' },\n    { label: 'Category 3', href: '/cat3' },\n    { label: 'Category 4', href: '/cat4' },\n    { label: 'Current Page', href: '/current', active: true }\n  ];\n</script>\n\n<!-- Shows first item + ellipsis + last 2 items -->\n<Breadcrumbs {items} maxItems={3} />\n```\n\n### Inline Items\n\n```svelte\n<script>\n  import { Breadcrumbs } from './index.ts';\n</script>\n\n<Breadcrumbs\n  items={[\n    { label: 'Home', href: '/' },\n    { label: 'Products', href: '/products' },\n    { label: 'Electronics', active: true }\n  ]}\n/>\n```\n\n### Items with Snippet Labels\n\n```svelte\n<script>\n  import { Breadcrumbs } from './index.ts';\n</script>\n\n{#snippet productsLabel()}\n  <strong>Products</strong>\n{/snippet}\n\n<Breadcrumbs\n  items={[\n    { label: 'Home', href: '/' },\n    { label: productsLabel, href: '/products' },\n    { label: 'Details', href: '/products/details', active: true }\n  ]}\n/>\n```\n\n### Disabled Items\n\n```svelte\n<script>\n  import { Breadcrumbs } from './index.ts';\n  \n  const items = [\n    { label: 'Home', href: '/' },\n    { label: 'Products', href: '/products', disabled: true },\n    { label: 'Details', href: '/products/details', active: true }\n  ];\n</script>\n\n<Breadcrumbs {items} />\n```\n\n\n### Without Separators\n\n```svelte\n<script>\n  import { Breadcrumbs } from './index.ts';\n  \n  const items = [\n    { label: 'Home', href: '/' },\n    { label: 'Products', href: '/products' },\n    { label: 'Details', href: '/products/details', active: true }\n  ];\n</script>\n\n<Breadcrumbs {items} showSeparator={false} />\n```\n\n## BreadcrumbItem Type\n\nEach item in the `items` array is a config object with properties like `label`, `href`, `active`, etc.\n\nThe `label` property can be a string or a snippet without parameters.\n\n## Keyboard Navigation\n\nThe Breadcrumbs component supports full keyboard navigation via the `useNavigation` hook:\n\n- **Arrow Left**: Navigate to previous breadcrumb item\n- **Arrow Right**: Navigate to next breadcrumb item\n- **Home**: Navigate to first breadcrumb item\n- **End**: Navigate to last breadcrumb item\n- **Enter/Space**: Activate the focused breadcrumb item\n- **Escape**: Clear focus\n\nDisabled items are automatically skipped during keyboard navigation.\n\n## Accessibility\n\n- Uses semantic `<nav>` element with `aria-label=\"Breadcrumbs\"`\n- Active items use `aria-current=\"page\"` attribute\n- Disabled items use `aria-disabled` attribute\n- Proper focus management with roving tabindex pattern\n- Keyboard navigation support for all interactive elements\n- Screen reader friendly with proper ARIA attributes\n\n## Structure\n\nThe component uses semantic HTML structure:\n- `<nav>` element with `aria-label=\"Breadcrumbs\"`\n- `<ol>` (ordered list) for the breadcrumb list\n- `<li>` elements for each breadcrumb item\n- `<li>` elements for separators with `role=\"presentation\"` and `aria-hidden=\"true\"`\n- Active items render as `<span>` with `role=\"link\"`, `aria-disabled=\"true\"`, and `aria-current=\"page\"`\n- Non-active items render as links (`<a>`) or buttons (`<button>`)\n- Ellipsis indicator for long paths\n- PopupMenu integration for items with nested menus\n\n## Notes\n\n- Items with `href` render as anchor elements, others render as buttons\n- Active items render as `<span>` elements with `font-normal` styling (not bold)\n- Disabled items cannot be navigated and have reduced opacity\n- Separators are not shown after the last item\n- The default separator is `arrowRightIcon` (chevron right) but can be customized via the `separator` slot\n- Items with `menu` property automatically render as PopupMenu components\n- Ellipsis is shown when `maxItems` is set and there are more items than the limit\n- Uses semantic HTML structure (`<nav><ol><li>`) for better accessibility\n- Styling matches shadcn/ui breadcrumb component patterns\n- Items can be simple strings/snippets or full config objects\n- Labels and icons can be strings or snippets (no parameters)\n\n## Theme Customization\n\nThe Breadcrumbs 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 breadcrumbs container styles\n- **item**: Individual breadcrumb item styles\n- **link**: Breadcrumb link/button styles\n- **separator**: Separator icon/styles\n- **ellipsis**: Ellipsis indicator styles\n- **icon**: Icon styles\n\n### Available Variants\n\n**root**:\n- base: Base classes for main container\n\n**item**:\n- base: Base classes for breadcrumb items\n- Variants:\n  - disabled: boolean - Disabled state styling\n  - active: boolean - Active/current page styling\n\n**link**:\n- base: Base classes for links/buttons\n- Variants:\n  - disabled: boolean - Disabled state styling\n  - active: boolean - Active state styling\n\n**separator**:\n- base: Base classes for separator icons\n\n**ellipsis**:\n- base: Base classes for ellipsis indicator\n\n**icon**:\n- base: Base classes for icons\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Icon size\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Breadcrumbs \n  items={items}\n  theme={{\n    root: {\n      base: 'flex items-center gap-2 text-sm'\n    },\n    item: {\n      active: {\n        true: 'text-primary font-semibold'\n      }\n    }\n  }}\n/>\n```\n\n**Custom Link Styling**:\n```svelte\n<Breadcrumbs \n  items={items}\n  theme={{\n    link: {\n      base: 'hover:text-primary transition-colors',\n      active: {\n        true: 'text-gray-900 font-semibold'\n      },\n      disabled: {\n        true: 'opacity-50 cursor-not-allowed'\n      }\n    },\n    separator: {\n      base: 'text-gray-400 mx-2'\n    }\n  }}\n/>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setBreadcrumbsTheme } from './index.ts';\n  \n  setBreadcrumbsTheme({\n    root: {\n      base: 'flex items-center gap-2 text-sm'\n    },\n    item: {\n      active: {\n        true: 'text-primary'\n      }\n    },\n    separator: {\n      base: 'text-gray-400'\n    }\n  });\n</script>\n```\n";
+export declare const breadcrumbsDescription = "\n# Breadcrumbs Component\n\nA navigation component that displays a hierarchical path of links, helping users understand their location within a website or application. Supports keyboard navigation, dropdown menus for nested items, customizable separators, and ellipsis for long paths. Uses semantic HTML structure (`<nav><ol><li>`) following accessibility best practices.\n\n## Basic Usage\n\n```svelte\n<script>\n  import { Breadcrumbs } from './index.ts';\n  \n  const items = [\n    { label: 'Home', href: '/' },\n    { label: 'Products', href: '/products' },\n    { label: 'Electronics', href: '/products/electronics', active: true }\n  ];\n</script>\n\n<Breadcrumbs {items} />\n```\n\n## Props\n\n### Core Props\n\n- **items**: BreadcrumbItem[] (required)\n  - Array of breadcrumb items to display\n  - Each item is a config object with: label, href, active, disabled, onclick, icon, menu\n\n- **home**: Omit<BreadcrumbItem, 'menu' | 'label'> & { label?: string | Snippet } (optional)\n  - Optional home breadcrumb item to prepend to the items array\n  - If provided, it will be rendered as the first breadcrumb\n  - When `label` is omitted a house icon is rendered\n\n- **maxItems**: number (optional)\n  - Maximum number of items to show before using ellipsis\n  - When set, shows first item, ellipsis, and last N items\n  - Example: `maxItems={3}` shows first item + ellipsis + last 2 items\n  - If maxItems >= items.length, all items are shown (no ellipsis)\n\n- **showSeparator**: boolean (default: true)\n  - Whether to display separators between breadcrumb items\n\n- **class**: string\n  - Additional CSS classes for the breadcrumbs container\n\n- **theme**: BreadcrumbsThemeProps\n  - Custom theme overrides for styling\n\n### BreadcrumbItem Properties\n\n- **label**: string | Snippet (required)\n  - The text or snippet to display for the breadcrumb item\n  - Can be a string or a snippet without parameters\n\n- **href**: string (optional)\n  - URL to navigate to. If provided, renders as an anchor element\n\n- **active**: boolean (default: false)\n  - Whether this breadcrumb represents the current page\n  - Active items render as `<span>` with `font-normal` styling and `aria-current=\"page\"`\n\n- **disabled**: boolean (default: false)\n  - Whether the breadcrumb item is disabled\n  - Disabled items are not navigable and have reduced opacity\n\n- **onclick**: (event: MouseEvent) => void (optional)\n  - Native click event handler for the breadcrumb item\n\n- **icon**: string | Snippet (optional)\n  - Icon snippet or string to display before the label\n\n- **menu**: MenuItem[] (optional)\n  - Array of menu items for dropdown functionality\n  - If provided, the breadcrumb renders as a PopupMenu\n\n### Content Props (Slots)\n\n- **separator**: Snippet\n  - Custom separator between breadcrumb items\n  - Default: `arrowRightIcon` (chevron right icon)\n  - No parameters passed to the snippet\n\n- **ellipsis**: Snippet\n  - Custom rendering for the ellipsis indicator\n  - Default: `dotsThreeOutlineIcon` with \"More\" screen reader text\n  - No parameters passed to the snippet\n\n## Examples\n\n### Basic Breadcrumbs with Links\n\n```svelte\n<script>\n  import { Breadcrumbs } from './index.ts';\n  \n  const items = [\n    { label: 'Home', href: '/' },\n    { label: 'About', href: '/about' },\n    { label: 'Team', href: '/about/team', active: true }\n  ];\n</script>\n\n<Breadcrumbs {items} />\n```\n\n### Breadcrumbs with Home Item\n\n```svelte\n<script>\n  import { Breadcrumbs } from './index.ts';\n  \n  const items = [\n    { label: 'Products', href: '/products' },\n    { label: 'Electronics', href: '/products/electronics', active: true }\n  ];\n</script>\n\n<Breadcrumbs home={{ label: 'Home', href: '/' }} {items} />\n<!-- Or with the default house icon -->\n<Breadcrumbs home={{ href: '/' }} {items} />\n```\n\n### Breadcrumbs with Icons\n\n```svelte\n<script lang=\"ts\">\n  import { Breadcrumbs } from './index.ts';\n  import { houseIcon } from 'entasis/icons/house';\n  import { folderIcon } from 'entasis/icons/folder';\n  import { fileIcon } from 'entasis/icons/file';\n  \n  const items = [\n    { label: 'Home', href: '/', icon: houseIcon },\n    { label: 'Documents', href: '/docs', icon: folderIcon },\n    { label: 'Report.pdf', href: '/docs/report', icon: fileIcon, active: true }\n  ];\n</script>\n\n<Breadcrumbs {items} />\n```\n\n### Breadcrumbs with Dropdown Menus\n\n```svelte\n<script lang=\"ts\">\n  import { Breadcrumbs, type BreadcrumbItem } from './index.ts';\n  \n  const items: BreadcrumbItem[] = [\n    { label: 'Home', href: '/' },\n    { \n      label: 'Products', \n      menu: [\n        { type: 'option', children: 'All Products', href: '/products' },\n        { type: 'option', children: 'Electronics', href: '/products/electronics' },\n        { type: 'option', children: 'Clothing', href: '/products/clothing' }\n      ]\n    },\n    { label: 'Electronics', href: '/products/electronics', active: true }\n  ];\n</script>\n\n<Breadcrumbs {items} />\n```\n\n### Custom Separator\n\n```svelte\n<script>\n  import { Breadcrumbs } from './index.ts';\n  \n  const items = [\n    { label: 'Home', href: '/' },\n    { label: 'Products', href: '/products' },\n    { label: 'Details', href: '/products/details', active: true }\n  ];\n</script>\n\n<Breadcrumbs {items}>\n  {#snippet separator()}\n    <span class=\"text-neutral/70\">\u203A</span>\n  {/snippet}\n</Breadcrumbs>\n```\n\n### Breadcrumbs with Ellipsis\n\n```svelte\n<script>\n  import { Breadcrumbs } from './index.ts';\n  \n  const items = [\n    { label: 'Home', href: '/' },\n    { label: 'Category 1', href: '/cat1' },\n    { label: 'Category 2', href: '/cat2' },\n    { label: 'Category 3', href: '/cat3' },\n    { label: 'Category 4', href: '/cat4' },\n    { label: 'Current Page', href: '/current', active: true }\n  ];\n</script>\n\n<!-- Shows first item + ellipsis + last 2 items -->\n<Breadcrumbs {items} maxItems={3} />\n```\n\n### Inline Items\n\n```svelte\n<script>\n  import { Breadcrumbs } from './index.ts';\n</script>\n\n<Breadcrumbs\n  items={[\n    { label: 'Home', href: '/' },\n    { label: 'Products', href: '/products' },\n    { label: 'Electronics', active: true }\n  ]}\n/>\n```\n\n### Items with Snippet Labels\n\n```svelte\n<script>\n  import { Breadcrumbs } from './index.ts';\n</script>\n\n{#snippet productsLabel()}\n  <strong>Products</strong>\n{/snippet}\n\n<Breadcrumbs\n  items={[\n    { label: 'Home', href: '/' },\n    { label: productsLabel, href: '/products' },\n    { label: 'Details', href: '/products/details', active: true }\n  ]}\n/>\n```\n\n### Disabled Items\n\n```svelte\n<script>\n  import { Breadcrumbs } from './index.ts';\n  \n  const items = [\n    { label: 'Home', href: '/' },\n    { label: 'Products', href: '/products', disabled: true },\n    { label: 'Details', href: '/products/details', active: true }\n  ];\n</script>\n\n<Breadcrumbs {items} />\n```\n\n\n### Without Separators\n\n```svelte\n<script>\n  import { Breadcrumbs } from './index.ts';\n  \n  const items = [\n    { label: 'Home', href: '/' },\n    { label: 'Products', href: '/products' },\n    { label: 'Details', href: '/products/details', active: true }\n  ];\n</script>\n\n<Breadcrumbs {items} showSeparator={false} />\n```\n\n## BreadcrumbItem Type\n\nEach item in the `items` array is a config object with properties like `label`, `href`, `active`, etc.\n\nThe `label` property can be a string or a snippet without parameters.\n\n## Keyboard Navigation\n\nThe Breadcrumbs component supports full keyboard navigation via the `useNavigation` hook:\n\n- **Arrow Left**: Navigate to previous breadcrumb item\n- **Arrow Right**: Navigate to next breadcrumb item\n- **Home**: Navigate to first breadcrumb item\n- **End**: Navigate to last breadcrumb item\n- **Enter/Space**: Activate the focused breadcrumb item\n- **Escape**: Clear focus\n\nDisabled items and items hidden with CSS (a `display: none` class, the `hidden` attribute or a media query) are automatically skipped during keyboard navigation. The `<nav>` element is not a Tab stop of its own: Tab reaches the breadcrumbs through their single roving tab stop. Keys pressed on content you render inside Breadcrumbs that is not an item (a custom `ellipsis` button) stay with that content, apart from the arrows and Home/End, which move into the trail.\n\n## Accessibility\n\n- Uses semantic `<nav>` element with `aria-label=\"Breadcrumbs\"`\n- Active items use `aria-current=\"page\"` attribute\n- Disabled items use `aria-disabled` attribute\n- Proper focus management with roving tabindex pattern\n- Keyboard navigation support for all interactive elements\n- Screen reader friendly with proper ARIA attributes\n\n## Structure\n\nThe component uses semantic HTML structure:\n- `<nav>` element with `aria-label=\"Breadcrumbs\"`\n- `<ol>` (ordered list) for the breadcrumb list\n- `<li>` elements for each breadcrumb item\n- `<li>` elements for separators with `role=\"presentation\"` and `aria-hidden=\"true\"`\n- Active items render as `<span>` with `role=\"link\"`, `aria-disabled=\"true\"`, and `aria-current=\"page\"`\n- Non-active items render as links (`<a>`) or buttons (`<button>`)\n- Ellipsis indicator for long paths\n- PopupMenu integration for items with nested menus\n\n## Notes\n\n- Items with `href` render as anchor elements, others render as buttons\n- Active items render as `<span>` elements with `font-normal` styling (not bold)\n- Disabled items cannot be navigated and have reduced opacity\n- Separators are not shown after the last item\n- The default separator is `arrowRightIcon` (chevron right) but can be customized via the `separator` slot\n- Items with `menu` property automatically render as PopupMenu components\n- Ellipsis is shown when `maxItems` is set and there are more items than the limit\n- Uses semantic HTML structure (`<nav><ol><li>`) for better accessibility\n- Styling matches shadcn/ui breadcrumb component patterns\n- Items can be simple strings/snippets or full config objects\n- Labels and icons can be strings or snippets (no parameters)\n\n## Theme Customization\n\nThe Breadcrumbs 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 breadcrumbs container styles\n- **item**: Individual breadcrumb item styles\n- **link**: Breadcrumb link/button styles\n- **separator**: Separator icon/styles\n- **ellipsis**: Ellipsis indicator styles\n- **icon**: Icon styles\n\n### Available Variants\n\n**root**:\n- base: Base classes for main container\n\n**item**:\n- base: Base classes for breadcrumb items\n- Variants:\n  - disabled: boolean - Disabled state styling\n  - active: boolean - Active/current page styling\n\n**link**:\n- base: Base classes for links/buttons\n- Variants:\n  - disabled: boolean - Disabled state styling\n  - active: boolean - Active state styling\n\n**separator**:\n- base: Base classes for separator icons\n\n**ellipsis**:\n- base: Base classes for ellipsis indicator\n\n**icon**:\n- base: Base classes for icons\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Icon size\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Breadcrumbs \n  items={items}\n  theme={{\n    root: {\n      base: 'flex items-center gap-2 text-sm'\n    },\n    item: {\n      active: {\n        true: 'text-primary font-semibold'\n      }\n    }\n  }}\n/>\n```\n\n**Custom Link Styling**:\n```svelte\n<Breadcrumbs \n  items={items}\n  theme={{\n    link: {\n      base: 'hover:text-primary transition-colors',\n      active: {\n        true: 'text-gray-900 font-semibold'\n      },\n      disabled: {\n        true: 'opacity-50 cursor-not-allowed'\n      }\n    },\n    separator: {\n      base: 'text-gray-400 mx-2'\n    }\n  }}\n/>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setBreadcrumbsTheme } from './index.ts';\n  \n  setBreadcrumbsTheme({\n    root: {\n      base: 'flex items-center gap-2 text-sm'\n    },\n    item: {\n      active: {\n        true: 'text-primary'\n      }\n    },\n    separator: {\n      base: 'text-gray-400'\n    }\n  });\n</script>\n```\n";

package/dist/components/Breadcrumbs/breadcrumbs.mcp.js

@@ -289,7 +289,7 @@ The Breadcrumbs component supports full keyboard navigation via the \`useNavigat
 - **Enter/Space**: Activate the focused breadcrumb item
 - **Escape**: Clear focus
 
-Disabled items are automatically skipped during keyboard navigation.
+Disabled items and items hidden with CSS (a \`display: none\` class, the \`hidden\` attribute or a media query) are automatically skipped during keyboard navigation. The \`<nav>\` element is not a Tab stop of its own: Tab reaches the breadcrumbs through their single roving tab stop. Keys pressed on content you render inside Breadcrumbs that is not an item (a custom \`ellipsis\` button) stay with that content, apart from the arrows and Home/End, which move into the trail.
 
 ## Accessibility
 

package/dist/components/Breadcrumbs/breadcrumbs.theme.d.ts

@@ -1,7 +1,7 @@
 import { type InferComponentTheme } from '../../utils/cva/index.js';
 export declare const breadcrumbsTheme: {
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{}> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    item: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    root: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{}> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    item: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         disabled: {
             true: string;
             false: string;
@@ -10,8 +10,8 @@ export declare const breadcrumbsTheme: {
             true: string;
             false: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    link: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    link: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         disabled: {
             true: string;
             false: string;
@@ -20,22 +20,22 @@ export declare const breadcrumbsTheme: {
             true: string;
             false: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    separator: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{}> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    ellipsis: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{}> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    icon: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    separator: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{}> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    ellipsis: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{}> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    icon: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 };
 export type BreadcrumbsTheme = typeof breadcrumbsTheme;
 export type BreadcrumbsThemeProps = InferComponentTheme<BreadcrumbsTheme>;
 export declare const setBreadcrumbsTheme: (theme: InferComponentTheme<{
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{}> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    item: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    root: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{}> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    item: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         disabled: {
             true: string;
             false: string;
@@ -44,8 +44,8 @@ export declare const setBreadcrumbsTheme: (theme: InferComponentTheme<{
             true: string;
             false: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    link: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    link: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         disabled: {
             true: string;
             false: string;
@@ -54,20 +54,20 @@ export declare const setBreadcrumbsTheme: (theme: InferComponentTheme<{
             true: string;
             false: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    separator: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{}> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    ellipsis: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{}> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    icon: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    separator: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{}> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    ellipsis: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{}> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    icon: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 }>) => void;
-export declare const useBreadcrumbsTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{}> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    item: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+export declare const useBreadcrumbsTheme: import("../../utils/cva/theme.ts").UseComponentTheme<{
+    root: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{}> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    item: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         disabled: {
             true: string;
             false: string;
@@ -76,8 +76,8 @@ export declare const useBreadcrumbsTheme: import("../../utils/cva/theme.js").Use
             true: string;
             false: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    link: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    link: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         disabled: {
             true: string;
             false: string;
@@ -86,14 +86,14 @@ export declare const useBreadcrumbsTheme: import("../../utils/cva/theme.js").Use
             true: string;
             false: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    separator: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{}> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    ellipsis: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{}> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    icon: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    separator: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{}> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    ellipsis: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{}> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    icon: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 }>;

package/dist/components/Button/Button.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { Attachment } from 'svelte/attachments';
 	import { spinnerOverlay } from '../../attachments/spinnerOverlay.svelte.js';
 	import Slot from '../Slot/Slot.svelte';
 	import type { ButtonInternalProps } from './button.props.js';
@@ -6,7 +7,6 @@
 	import { useDefaultColor } from '../Theme/theme.state.svelte.js';
 
 	let {
-		as,
 		loading = false,
 		onclick = null,
 		onpointerenter = null,
@@ -25,6 +25,7 @@
 		ref = $bindable(),
 		fullWidth = false,
 		disabled = false,
+		focusableWhenDisabled = false,
 		theme,
 		rel,
 		target,
@@ -45,7 +46,16 @@
 	const isSquared = $derived(
 		squared ?? !!((!children && prefix && !suffix) || (!children && !prefix && suffix))
 	);
-	const isAnchor = $derived(!!(as || href));
+	const isAnchor = $derived(!!href);
+	// Only a disabled <button> uses the native attribute, and only when it may leave the tab order.
+	// A loading button, or one that is `focusableWhenDisabled`, stays focusable, so a keyboard user
+	// keeps their place, and refuses activation through `aria-disabled` instead.
+	const nativeDisabled = $derived(!isAnchor && disabled && !focusableWhenDisabled);
+	const inactive = $derived(disabled || loading);
+	// A disabled anchor has no `href`, so only an explicit tabindex keeps it focusable.
+	const anchorTabindex = $derived(
+		isAnchor && disabled ? (focusableWhenDisabled ? (tabindex ?? 0) : -1) : tabindex
+	);
 
 	const resolvedColor = $derived(useDefaultColor(color));
 	// One set of variant values for every slot; the template reads `slots.x()`.
@@ -57,26 +67,34 @@
 			size,
 			loading,
 			disabled,
+			focusable: focusableWhenDisabled,
 			fullWidth
 		})
 	);
 
-	const handleClick: NonNullable<ButtonInternalProps['onclick']> = (event) => {
-		if (disabled) {
+	// Enter and Space still dispatch `click` on a focusable loading button. A capture listener on
+	// the element cancels that click before anything else sees it: listeners attached to the
+	// button itself (`{@attach popover.trigger}`), Svelte's delegated `onclick` handlers, and a
+	// router listening on <html>, which runs before them for content portaled outside the app
+	// root. Cancelling it also stops a submit button from submitting and an anchor from
+	// navigating. The listener is registered once and reads `inactive` on each click.
+	const refuseInactiveActivation: Attachment<HTMLElement> = (node) => {
+		const refuse = (event: MouseEvent) => {
+			if (!inactive) return;
 			event.preventDefault();
-			event.stopPropagation();
-			return;
-		}
-
-		onclick?.(event);
+			event.stopImmediatePropagation();
+		};
+		node.addEventListener('click', refuse, { capture: true });
+		return () => node.removeEventListener('click', refuse, { capture: true });
 	};
 
+	// A focusable disabled button keeps its pointer events, so hover callbacks (a tooltip) still fire.
 	const handlePointerEnter: NonNullable<ButtonInternalProps['onpointerenter']> = (event) => {
-		if (!disabled) onpointerenter?.(event);
+		if (!disabled || focusableWhenDisabled) onpointerenter?.(event);
 	};
 
 	const handlePointerLeave: NonNullable<ButtonInternalProps['onpointerleave']> = (event) => {
-		if (!disabled) onpointerleave?.(event);
+		if (!disabled || focusableWhenDisabled) onpointerleave?.(event);
 	};
 </script>
 
@@ -88,23 +106,25 @@
 	aria-controls={controls}
 	aria-selected={selected}
 	aria-pressed={pressed}
-	aria-disabled={isAnchor && disabled ? true : undefined}
+	aria-disabled={inactive && !nativeDisabled ? true : undefined}
+	aria-busy={loading ? true : undefined}
 	role={role ?? (isAnchor ? 'link' : 'button')}
 	href={isAnchor && !disabled ? href : undefined}
 	{rel}
 	{target}
 	{download}
 	{type}
-	tabindex={isAnchor && disabled ? -1 : tabindex}
+	tabindex={anchorTabindex}
 	bind:this={ref}
 	data-active={dataActive}
 	data-highlighted={dataHighlighted}
 	data-slot={dataSlot}
 	data-color={resolvedColor}
-	disabled={!isAnchor && disabled ? true : undefined}
+	disabled={nativeDisabled ? true : undefined}
 	class={slots.root({ className })}
+	{@attach refuseInactiveActivation}
 	{@attach spinnerOverlay({ loading, size })}
-	onclick={disabled || onclick ? handleClick : undefined}
+	{onclick}
 	onpointerenter={onpointerenter ? handlePointerEnter : undefined}
 	onpointerleave={onpointerleave ? handlePointerLeave : undefined}
 	{...attachments}

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: 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";
+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. A `<button>` gets the native `disabled` attribute and leaves the tab order; an anchor drops its href, leaves the tab order and renders `aria-disabled=\"true\"`\n- **focusableWhenDisabled**: boolean (default: false) - Keeps a `disabled` button focusable: it renders `aria-disabled=\"true\"` instead of the native `disabled` attribute, stays in the tab order and still receives pointer events (so a tooltip can explain why it is unavailable), and refuses activation: clicks from the pointer, Enter and Space are cancelled before any other listener sees them, and a `type=\"submit\"` button does not submit. A disabled anchor drops its href and takes `tabindex=\"0\"`. Has no effect without `disabled`\n- **loading**: boolean (default: false) - Shows the Theme-configured loading spinner and refuses activation while staying focusable: renders `aria-busy=\"true\"` and `aria-disabled=\"true\"`, and cancels clicks (pointer, Enter and Space) before any other listener sees them, including attachments such as `popover.trigger`, as well as the form submission of a `type=\"submit\"` button and the navigation of an anchor. It never sets the native `disabled` attribute, so keyboard focus stays on the button while the work runs\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 keeps focus on the button and announces it busy (`aria-busy`) and unavailable (`aria-disabled`); clicks, Enter, Space and form submission are cancelled until it ends\n- Prefer `loading` over `disabled` for a button whose own action is running: `disabled` removes the button from the tab order and drops focus to the page body\n- Use `focusableWhenDisabled` for a button that stays in the tab order while unavailable (for example with a tooltip explaining why); it is announced with `aria-disabled` and refuses activation\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; `onclick` also stays silent while `loading`\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  - focusable: boolean - Set with `focusableWhenDisabled`: a disabled button keeps its pointer events\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";