luxen-ui 0.18.2 → 0.19.0

package/cdn/standalone.css

@@ -5406,11 +5406,19 @@ In dark mode, mixes the base color with black (default 15% black).
     }
 
     @media (hover: hover) {
-      &:hover:not([aria-selected='true']) {
+      &:hover:not([aria-selected='true']):not(:disabled):not([aria-disabled='true']) {
         color: var(--l-color-text-primary);
       }
     }
 
+    /* Placed after the selected and hover rules so a disabled tab still greys
+       out when it is the selected one — equal specificity, source order wins. */
+    &:disabled,
+    &[aria-disabled='true'] {
+      cursor: not-allowed;
+      color: var(--l-color-text-disabled);
+    }
+
     &:focus-visible {
       outline: 2px solid var(--l-focus-ring);
       outline-offset: -2px;
@@ -5561,11 +5569,19 @@ In dark mode, mixes the base color with black (default 15% black).
     }
 
     @media (hover: hover) {
-      &:hover:not([aria-selected='true']) {
+      &:hover:not([aria-selected='true']):not(:disabled):not([aria-disabled='true']) {
         color: var(--l-color-text-primary);
       }
     }
 
+    /* Placed after the selected and hover rules so a disabled tab still greys
+       out when it is the selected one — equal specificity, source order wins. */
+    &:disabled,
+    &[aria-disabled='true'] {
+      cursor: not-allowed;
+      color: var(--l-color-text-disabled);
+    }
+
     &:focus-visible {
       outline: 2px solid var(--l-focus-ring);
       outline-offset: -2px;
@@ -5649,9 +5665,12 @@ In dark mode, mixes the base color with black (default 15% black).
 
       /* Applies to the selected tab too — the fill is click feedback, not a
          selection cue (the underline carries that), so it would read as dead
-         if the active tab were the one place it stopped responding. */
+         if the active tab were the one place it stopped responding. A disabled
+         tab is the exception: `:hover` still matches it (the platform does not
+         gate hover on `disabled`), and promising click feedback where no click
+         will ever register is the wrong signal. */
       @media (hover: hover) {
-        &:hover::after {
+        &:hover:not(:disabled):not([aria-disabled='true'])::after {
           background: var(--hover-color, var(--l-color-bg-state-hover));
         }
       }

package/cdn/standalone.js.map

@@ -1 +1 @@
-{"version":3,"file":"standalone.js","names":[],"sources":["../src/html/elements/alert/index.ts","../src/html/elements/alert-dialog/index.ts","../src/html/elements/avatar/index.ts","../src/html/elements/badge/index.ts","../src/html/elements/button-group/index.ts","../src/html/elements/carousel/index.ts","../src/html/elements/carousel-item/index.ts","../src/html/elements/combobox/index.ts","../src/html/elements/dialog/index.ts","../src/html/elements/divider/index.ts","../src/html/elements/drawer/index.ts","../src/html/elements/dropdown/index.ts","../src/html/elements/dropdown-item/index.ts","../src/html/elements/dropdown-label/index.ts","../src/html/elements/form-field/index.ts","../src/html/elements/icon/index.ts","../src/html/elements/input-group/index.ts","../src/html/elements/input-otp/index.ts","../src/html/elements/input-stepper/index.ts","../src/html/elements/popover/index.ts","../src/html/elements/prose-editor/index.ts","../src/html/elements/rating/index.ts","../src/html/elements/segmented-control/index.ts","../src/html/elements/select/index.ts","../src/html/elements/skeleton/index.ts","../src/html/elements/slider/index.ts","../src/html/elements/spinner/index.ts","../src/html/elements/sticky-bar/index.ts","../src/html/elements/tabs/index.ts","../src/html/elements/tag/index.ts","../src/html/elements/toast/index.ts","../src/html/elements/tooltip/index.ts","../src/html/elements/tree/index.ts","../src/html/elements/tree-item/index.ts","../src/html/registry.ts"],"sourcesContent":["import { define } from '../../define.js';\nimport { Alert } from './alert.js';\nexport * from './alert.js';\ndefine('alert', Alert);\n","import { define } from '../../define.js';\nimport { AlertDialog } from './alert-dialog.js';\nexport * from './alert-dialog.js';\ndefine('alert-dialog', AlertDialog);\n","import { define } from '../../define.js';\nimport { Avatar } from './avatar.js';\nexport * from './avatar.js';\ndefine('avatar', Avatar);\n","import { define } from '../../define.js';\nimport { Badge } from './badge.js';\nexport * from './badge.js';\ndefine('badge', Badge);\n","import { define } from '../../define.js';\nimport { ButtonGroup } from './button-group.js';\nexport * from './button-group.js';\ndefine('button-group', ButtonGroup);\n","import { define } from '../../define.js';\nimport { Carousel } from './carousel.js';\nexport * from './carousel.js';\ndefine('carousel', Carousel);\n","import { define } from '../../define.js';\nimport { CarouselItem } from './carousel-item.js';\nexport * from './carousel-item.js';\ndefine('carousel-item', CarouselItem);\n","import { define } from '../../define.js';\nimport { Combobox } from './combobox.js';\nexport * from './combobox.js';\ndefine('combobox', Combobox);\n","import { define } from '../../define.js';\nimport { Dialog } from './dialog.js';\nexport * from './dialog.js';\ndefine('dialog', Dialog);\n","import { define } from '../../define.js';\nimport { Divider } from './divider.js';\nexport * from './divider.js';\ndefine('divider', Divider);\n","import { define } from '../../define.js';\nimport { Drawer } from './drawer.js';\nexport * from './drawer.js';\ndefine('drawer', Drawer);\n","import { define } from '../../define.js';\nimport { Dropdown } from './dropdown.js';\nexport * from './dropdown.js';\ndefine('dropdown', Dropdown);\n","import { define } from '../../define.js';\nimport { DropdownItem } from './dropdown-item.js';\nexport * from './dropdown-item.js';\ndefine('dropdown-item', DropdownItem);\n","import { define } from '../../define.js';\nimport { DropdownLabel } from './dropdown-label.js';\nexport * from './dropdown-label.js';\ndefine('dropdown-label', DropdownLabel);\n","import { define } from '../../define.js';\nimport { FormField } from './form-field.js';\nexport * from './form-field.js';\ndefine('form-field', FormField);\n","import { define } from '../../define.js';\nimport { Icon } from './icon.js';\nexport * from './icon.js';\ndefine('icon', Icon);\n","import { define } from '../../define.js';\nimport { InputGroup } from './input-group.js';\nexport * from './input-group.js';\ndefine('input-group', InputGroup);\n","import { define } from '../../define.js';\nimport { InputOtp } from './input-otp.js';\nexport * from './input-otp.js';\ndefine('input-otp', InputOtp);\n","import { define } from '../../define.js';\nimport { InputStepper } from './input-stepper.js';\nexport * from './input-stepper.js';\ndefine('input-stepper', InputStepper);\n","import { define } from '../../define.js';\nimport { Popover } from './popover.js';\nexport * from './popover.js';\ndefine('popover', Popover);\n","import { define } from '../../define.js';\nimport { ProseEditor } from './prose-editor.js';\nexport * from './prose-editor.js';\ndefine('prose-editor', ProseEditor);\n","import { define } from '../../define.js';\nimport { Rating } from './rating.js';\nexport * from './rating.js';\ndefine('rating', Rating);\n","import { define } from '../../define.js';\nimport { SegmentedControl } from './segmented-control.js';\nexport * from './segmented-control.js';\ndefine('segmented-control', SegmentedControl);\n","import { define } from '../../define.js';\nimport { Select } from './select.js';\nexport * from './select.js';\ndefine('select', Select);\n","import { define } from '../../define.js';\nimport { Skeleton } from './skeleton.js';\nexport * from './skeleton.js';\ndefine('skeleton', Skeleton);\n","import { define } from '../../define.js';\nimport { Slider } from './slider.js';\nexport * from './slider.js';\ndefine('slider', Slider);\n","import { define } from '../../define.js';\nimport { Spinner } from './spinner.js';\nexport * from './spinner.js';\ndefine('spinner', Spinner);\n","import { define } from '../../define.js';\nimport { StickyBar } from './sticky-bar.js';\nexport * from './sticky-bar.js';\ndefine('sticky-bar', StickyBar);\n","import { define } from '../../define.js';\nimport { Tabs } from './tabs.js';\nexport * from './tabs.js';\ndefine('tabs', Tabs);\n","import { define } from '../../define.js';\nimport { Tag } from './tag.js';\nexport * from './tag.js';\ndefine('tag', Tag);\n","import { define } from '../../define.js';\nimport { Toast, ToastItem } from './toast.js';\nexport * from './toast.js';\ndefine('toast', Toast);\ndefine('toast-item', ToastItem);\n","import { define } from '../../define.js';\nimport { Tooltip } from './tooltip.js';\nexport * from './tooltip.js';\ndefine('tooltip', Tooltip);\n","import { define } from '../../define.js';\nimport { Tree } from './tree.js';\nexport * from './tree.js';\ndefine('tree', Tree);\n","import { define } from '../../define.js';\nimport { TreeItem } from './tree-item.js';\nexport * from './tree-item.js';\ndefine('tree-item', TreeItem);\n","/** Every component base name the library ships. */\nexport type ElementBaseName =\n  | 'alert'\n  | 'alert-dialog'\n  | 'avatar'\n  | 'badge'\n  | 'button-group'\n  | 'carousel'\n  | 'carousel-item'\n  | 'combobox'\n  | 'dialog'\n  | 'divider'\n  | 'drawer'\n  | 'dropdown'\n  | 'dropdown-item'\n  | 'dropdown-label'\n  | 'form-field'\n  | 'icon'\n  | 'input-group'\n  | 'input-otp'\n  | 'input-stepper'\n  | 'popover'\n  | 'prose-editor'\n  | 'skeleton'\n  | 'slider'\n  | 'spinner'\n  | 'rating'\n  | 'segmented-control'\n  | 'select'\n  | 'sticky-bar'\n  | 'stories'\n  | 'story'\n  | 'stories-viewer'\n  | 'tabs'\n  | 'tag'\n  | 'toast'\n  | 'toast-item'\n  | 'tooltip'\n  | 'tree'\n  | 'tree-item';\n\nlet _elementPrefix = 'l';\nlet _cssPrefix = 'l';\nconst _registered = new Set<ElementBaseName>();\n\n/** Set the global prefix. Must be called before defining elements. */\nexport function setPrefix(prefix: { element: string; css: string }): void {\n  _elementPrefix = prefix.element;\n  _cssPrefix = prefix.css;\n}\n\n/** Get the current prefixes. */\nexport function getPrefix(): { element: string; css: string } {\n  return { element: _elementPrefix, css: _cssPrefix };\n}\n\n/** Derive the full tag name from element prefix + base name. */\nexport function tagName(baseName: ElementBaseName): string {\n  return `${_elementPrefix}-${baseName}`;\n}\n\n/** Prefix a CSS class name. `cls('toast-icon')` → `'l-toast-icon'` */\nexport function cls(name: string): string {\n  return `${_cssPrefix}-${name}`;\n}\n\n/** Generate a globally unique prefixed ID. `uniqueId('toast')` → `'l:toast:1'` */\nlet _uid = 0;\nexport function uniqueId(base: string): string {\n  return `${_cssPrefix}:${base}:${++_uid}`;\n}\n\n/** Check if a base name is already registered. */\nexport function isRegistered(baseName: ElementBaseName): boolean {\n  return _registered.has(baseName);\n}\n\n/** Mark a base name as registered. Called internally by define(). */\nexport function markRegistered(baseName: ElementBaseName): void {\n  _registered.add(baseName);\n}\n"],"mappings":";AAGA,UAAO,SAAS,KAAK;;;ACArB,UAAO,gBAAgB,WAAW;;;ACAlC,UAAO,UAAU,MAAM;;;ACAvB,UAAO,SAAS,KAAK;;;ACArB,UAAO,gBAAgB,WAAW;;;ACAlC,UAAO,YAAY,QAAQ;;;ACA3B,UAAO,iBAAiB,YAAY;;;ACApC,UAAO,YAAY,QAAQ;;;ACA3B,UAAO,UAAU,MAAM;;;ACAvB,UAAO,WAAW,OAAO;;;ACAzB,UAAO,UAAU,MAAM;;;ACAvB,UAAO,YAAY,QAAQ;;;ACA3B,UAAO,iBAAiB,YAAY;;;ACApC,UAAO,kBAAkB,aAAa;;;ACAtC,UAAO,cAAc,SAAS;;;ACA9B,UAAO,QAAQ,IAAI;;;ACAnB,UAAO,eAAe,UAAU;;;ACAhC,UAAO,aAAa,QAAQ;;;ACA5B,UAAO,iBAAiB,YAAY;;;ACApC,UAAO,WAAW,OAAO;;;ACAzB,UAAO,gBAAgB,WAAW;;;ACAlC,UAAO,UAAU,MAAM;;;ACAvB,UAAO,qBAAqB,gBAAgB;;;ACA5C,UAAO,UAAU,MAAM;;;ACAvB,SAAO,YAAY,QAAQ;;;ACA3B,SAAO,UAAU,MAAM;;;ACAvB,SAAO,WAAW,OAAO;;;ACAzB,SAAO,cAAc,SAAS;;;ACA9B,SAAO,QAAQ,IAAI;;;ACAnB,SAAO,OAAO,GAAG;;;ACAjB,SAAO,SAAS,KAAK;AACrB,SAAO,cAAc,SAAS;;;ACD9B,SAAO,WAAW,OAAO;;;ACAzB,SAAO,QAAQ,IAAI;;;ACAnB,OAAO,aAAa,QAAQ;;;ACsC5B,IAAI,iBAAiB;AACrB,IAAI,aAAa;;AAIjB,SAAgB,UAAU,QAAgD;CACxE,iBAAiB,OAAO;CACxB,aAAa,OAAO;AACtB;;AAGA,SAAgB,YAA8C;CAC5D,OAAO;EAAE,SAAS;EAAgB,KAAK;CAAW;AACpD"}
+{"version":3,"file":"standalone.js","names":[],"sources":["../src/html/elements/alert/index.ts","../src/html/elements/alert-dialog/index.ts","../src/html/elements/avatar/index.ts","../src/html/elements/badge/index.ts","../src/html/elements/button-group/index.ts","../src/html/elements/carousel/index.ts","../src/html/elements/carousel-item/index.ts","../src/html/elements/combobox/index.ts","../src/html/elements/dialog/index.ts","../src/html/elements/divider/index.ts","../src/html/elements/drawer/index.ts","../src/html/elements/dropdown/index.ts","../src/html/elements/dropdown-item/index.ts","../src/html/elements/dropdown-label/index.ts","../src/html/elements/form-field/index.ts","../src/html/elements/icon/index.ts","../src/html/elements/input-group/index.ts","../src/html/elements/input-otp/index.ts","../src/html/elements/input-stepper/index.ts","../src/html/elements/popover/index.ts","../src/html/elements/prose-editor/index.ts","../src/html/elements/rating/index.ts","../src/html/elements/segmented-control/index.ts","../src/html/elements/select/index.ts","../src/html/elements/skeleton/index.ts","../src/html/elements/slider/index.ts","../src/html/elements/spinner/index.ts","../src/html/elements/sticky-bar/index.ts","../src/html/elements/tabs/index.ts","../src/html/elements/tag/index.ts","../src/html/elements/toast/index.ts","../src/html/elements/tooltip/index.ts","../src/html/elements/tree/index.ts","../src/html/elements/tree-item/index.ts","../src/html/registry.ts"],"sourcesContent":["import { define } from '../../define.js';\nimport { Alert } from './alert.js';\nexport * from './alert.js';\ndefine('alert', Alert);\n","import { define } from '../../define.js';\nimport { AlertDialog } from './alert-dialog.js';\nexport * from './alert-dialog.js';\ndefine('alert-dialog', AlertDialog);\n","import { define } from '../../define.js';\nimport { Avatar } from './avatar.js';\nexport * from './avatar.js';\ndefine('avatar', Avatar);\n","import { define } from '../../define.js';\nimport { Badge } from './badge.js';\nexport * from './badge.js';\ndefine('badge', Badge);\n","import { define } from '../../define.js';\nimport { ButtonGroup } from './button-group.js';\nexport * from './button-group.js';\ndefine('button-group', ButtonGroup);\n","import { define } from '../../define.js';\nimport { Carousel } from './carousel.js';\nexport * from './carousel.js';\ndefine('carousel', Carousel);\n","import { define } from '../../define.js';\nimport { CarouselItem } from './carousel-item.js';\nexport * from './carousel-item.js';\ndefine('carousel-item', CarouselItem);\n","import { define } from '../../define.js';\nimport { Combobox } from './combobox.js';\nexport * from './combobox.js';\ndefine('combobox', Combobox);\n","import { define } from '../../define.js';\nimport { Dialog } from './dialog.js';\nexport * from './dialog.js';\ndefine('dialog', Dialog);\n","import { define } from '../../define.js';\nimport { Divider } from './divider.js';\nexport * from './divider.js';\ndefine('divider', Divider);\n","import { define } from '../../define.js';\nimport { Drawer } from './drawer.js';\nexport * from './drawer.js';\ndefine('drawer', Drawer);\n","import { define } from '../../define.js';\nimport { Dropdown } from './dropdown.js';\nexport * from './dropdown.js';\ndefine('dropdown', Dropdown);\n","import { define } from '../../define.js';\nimport { DropdownItem } from './dropdown-item.js';\nexport * from './dropdown-item.js';\ndefine('dropdown-item', DropdownItem);\n","import { define } from '../../define.js';\nimport { DropdownLabel } from './dropdown-label.js';\nexport * from './dropdown-label.js';\ndefine('dropdown-label', DropdownLabel);\n","import { define } from '../../define.js';\nimport { FormField } from './form-field.js';\nexport * from './form-field.js';\ndefine('form-field', FormField);\n","import { define } from '../../define.js';\nimport { Icon } from './icon.js';\nexport * from './icon.js';\ndefine('icon', Icon);\n","import { define } from '../../define.js';\nimport { InputGroup } from './input-group.js';\nexport * from './input-group.js';\ndefine('input-group', InputGroup);\n","import { define } from '../../define.js';\nimport { InputOtp } from './input-otp.js';\nexport * from './input-otp.js';\ndefine('input-otp', InputOtp);\n","import { define } from '../../define.js';\nimport { InputStepper } from './input-stepper.js';\nexport * from './input-stepper.js';\ndefine('input-stepper', InputStepper);\n","import { define } from '../../define.js';\nimport { Popover } from './popover.js';\nexport * from './popover.js';\ndefine('popover', Popover);\n","import { define } from '../../define.js';\nimport { ProseEditor } from './prose-editor.js';\nexport * from './prose-editor.js';\ndefine('prose-editor', ProseEditor);\n","import { define } from '../../define.js';\nimport { Rating } from './rating.js';\nexport * from './rating.js';\ndefine('rating', Rating);\n","import { define } from '../../define.js';\nimport { SegmentedControl } from './segmented-control.js';\nexport * from './segmented-control.js';\ndefine('segmented-control', SegmentedControl);\n","import { define } from '../../define.js';\nimport { Select } from './select.js';\nexport * from './select.js';\ndefine('select', Select);\n","import { define } from '../../define.js';\nimport { Skeleton } from './skeleton.js';\nexport * from './skeleton.js';\ndefine('skeleton', Skeleton);\n","import { define } from '../../define.js';\nimport { Slider } from './slider.js';\nexport * from './slider.js';\ndefine('slider', Slider);\n","import { define } from '../../define.js';\nimport { Spinner } from './spinner.js';\nexport * from './spinner.js';\ndefine('spinner', Spinner);\n","import { define } from '../../define.js';\nimport { StickyBar } from './sticky-bar.js';\nexport * from './sticky-bar.js';\ndefine('sticky-bar', StickyBar);\n","import { define } from '../../define.js';\nimport { Tabs } from './tabs.js';\nexport * from './tabs.js';\ndefine('tabs', Tabs);\n","import { define } from '../../define.js';\nimport { Tag } from './tag.js';\nexport * from './tag.js';\ndefine('tag', Tag);\n","import { define } from '../../define.js';\nimport { Toast, ToastItem } from './toast.js';\nexport * from './toast.js';\ndefine('toast', Toast);\ndefine('toast-item', ToastItem);\n","import { define } from '../../define.js';\nimport { Tooltip } from './tooltip.js';\nexport * from './tooltip.js';\ndefine('tooltip', Tooltip);\n","import { define } from '../../define.js';\nimport { Tree } from './tree.js';\nexport * from './tree.js';\ndefine('tree', Tree);\n","import { define } from '../../define.js';\nimport { TreeItem } from './tree-item.js';\nexport * from './tree-item.js';\ndefine('tree-item', TreeItem);\n","/** Every component base name the library ships. */\nexport type ElementBaseName =\n  | 'alert'\n  | 'alert-dialog'\n  | 'avatar'\n  | 'badge'\n  | 'button-group'\n  | 'carousel'\n  | 'carousel-item'\n  | 'combobox'\n  | 'dialog'\n  | 'divider'\n  | 'drawer'\n  | 'dropdown'\n  | 'dropdown-item'\n  | 'dropdown-label'\n  | 'form-field'\n  | 'icon'\n  | 'input-group'\n  | 'input-otp'\n  | 'input-stepper'\n  | 'popover'\n  | 'prose-editor'\n  | 'skeleton'\n  | 'slider'\n  | 'spinner'\n  | 'rating'\n  | 'segmented-control'\n  | 'select'\n  | 'sticky-bar'\n  | 'stories'\n  | 'story'\n  | 'stories-viewer'\n  | 'tabs'\n  | 'tag'\n  | 'color-scheme-icon'\n  | 'toast'\n  | 'toast-item'\n  | 'tooltip'\n  | 'tree'\n  | 'tree-item';\n\nlet _elementPrefix = 'l';\nlet _cssPrefix = 'l';\nconst _registered = new Set<ElementBaseName>();\n\n/** Set the global prefix. Must be called before defining elements. */\nexport function setPrefix(prefix: { element: string; css: string }): void {\n  _elementPrefix = prefix.element;\n  _cssPrefix = prefix.css;\n}\n\n/** Get the current prefixes. */\nexport function getPrefix(): { element: string; css: string } {\n  return { element: _elementPrefix, css: _cssPrefix };\n}\n\n/** Derive the full tag name from element prefix + base name. */\nexport function tagName(baseName: ElementBaseName): string {\n  return `${_elementPrefix}-${baseName}`;\n}\n\n/** Prefix a CSS class name. `cls('toast-icon')` → `'l-toast-icon'` */\nexport function cls(name: string): string {\n  return `${_cssPrefix}-${name}`;\n}\n\n/** Generate a globally unique prefixed ID. `uniqueId('toast')` → `'l:toast:1'` */\nlet _uid = 0;\nexport function uniqueId(base: string): string {\n  return `${_cssPrefix}:${base}:${++_uid}`;\n}\n\n/** Check if a base name is already registered. */\nexport function isRegistered(baseName: ElementBaseName): boolean {\n  return _registered.has(baseName);\n}\n\n/** Mark a base name as registered. Called internally by define(). */\nexport function markRegistered(baseName: ElementBaseName): void {\n  _registered.add(baseName);\n}\n"],"mappings":";AAGA,UAAO,SAAS,KAAK;;;ACArB,UAAO,gBAAgB,WAAW;;;ACAlC,UAAO,UAAU,MAAM;;;ACAvB,UAAO,SAAS,KAAK;;;ACArB,UAAO,gBAAgB,WAAW;;;ACAlC,UAAO,YAAY,QAAQ;;;ACA3B,UAAO,iBAAiB,YAAY;;;ACApC,UAAO,YAAY,QAAQ;;;ACA3B,UAAO,UAAU,MAAM;;;ACAvB,UAAO,WAAW,OAAO;;;ACAzB,UAAO,UAAU,MAAM;;;ACAvB,UAAO,YAAY,QAAQ;;;ACA3B,UAAO,iBAAiB,YAAY;;;ACApC,UAAO,kBAAkB,aAAa;;;ACAtC,UAAO,cAAc,SAAS;;;ACA9B,UAAO,QAAQ,IAAI;;;ACAnB,UAAO,eAAe,UAAU;;;ACAhC,UAAO,aAAa,QAAQ;;;ACA5B,UAAO,iBAAiB,YAAY;;;ACApC,UAAO,WAAW,OAAO;;;ACAzB,UAAO,gBAAgB,WAAW;;;ACAlC,UAAO,UAAU,MAAM;;;ACAvB,UAAO,qBAAqB,gBAAgB;;;ACA5C,UAAO,UAAU,MAAM;;;ACAvB,SAAO,YAAY,QAAQ;;;ACA3B,SAAO,UAAU,MAAM;;;ACAvB,SAAO,WAAW,OAAO;;;ACAzB,SAAO,cAAc,SAAS;;;ACA9B,SAAO,QAAQ,IAAI;;;ACAnB,SAAO,OAAO,GAAG;;;ACAjB,SAAO,SAAS,KAAK;AACrB,SAAO,cAAc,SAAS;;;ACD9B,SAAO,WAAW,OAAO;;;ACAzB,SAAO,QAAQ,IAAI;;;ACAnB,OAAO,aAAa,QAAQ;;;ACuC5B,IAAI,iBAAiB;AACrB,IAAI,aAAa;;AAIjB,SAAgB,UAAU,QAAgD;CACxE,iBAAiB,OAAO;CACxB,aAAa,OAAO;AACtB;;AAGA,SAAgB,YAA8C;CAC5D,OAAO;EAAE,SAAS;EAAgB,KAAK;CAAW;AACpD"}

package/cdn/styles/elements/tabs/enclosed.css

@@ -73,11 +73,19 @@
     }
 
     @media (hover: hover) {
-      &:hover:not([aria-selected='true']) {
+      &:hover:not([aria-selected='true']):not(:disabled):not([aria-disabled='true']) {
         color: var(--l-color-text-primary);
       }
     }
 
+    /* Placed after the selected and hover rules so a disabled tab still greys
+       out when it is the selected one — equal specificity, source order wins. */
+    &:disabled,
+    &[aria-disabled='true'] {
+      cursor: not-allowed;
+      color: var(--l-color-text-disabled);
+    }
+
     &:focus-visible {
       outline: 2px solid var(--l-focus-ring);
       outline-offset: -2px;

package/cdn/styles/elements/tabs/line.css

@@ -73,11 +73,19 @@
     }
 
     @media (hover: hover) {
-      &:hover:not([aria-selected='true']) {
+      &:hover:not([aria-selected='true']):not(:disabled):not([aria-disabled='true']) {
         color: var(--l-color-text-primary);
       }
     }
 
+    /* Placed after the selected and hover rules so a disabled tab still greys
+       out when it is the selected one — equal specificity, source order wins. */
+    &:disabled,
+    &[aria-disabled='true'] {
+      cursor: not-allowed;
+      color: var(--l-color-text-disabled);
+    }
+
     &:focus-visible {
       outline: 2px solid var(--l-focus-ring);
       outline-offset: -2px;
@@ -161,9 +169,12 @@
 
       /* Applies to the selected tab too — the fill is click feedback, not a
          selection cue (the underline carries that), so it would read as dead
-         if the active tab were the one place it stopped responding. */
+         if the active tab were the one place it stopped responding. A disabled
+         tab is the exception: `:hover` still matches it (the platform does not
+         gate hover on `disabled`), and promising click feedback where no click
+         will ever register is the wrong signal. */
       @media (hover: hover) {
-        &:hover::after {
+        &:hover:not(:disabled):not([aria-disabled='true'])::after {
           background: var(--hover-color, var(--l-color-bg-state-hover));
         }
       }

package/dist/color-scheme.d.ts

@@ -0,0 +1,76 @@
+/**
+ * Page-level light/dark state, shared by every control that shows or changes it.
+ *
+ * Deliberately not an element: the scheme is one value per document, and a
+ * document can hold several controls for it — a header button, a menu row, a
+ * settings page. Whichever one the user touches, all of them have to agree, so
+ * the state belongs to the page rather than to any of them.
+ *
+ * The model is the one argued in Lea Verou's *Dark mode toggles should be a
+ * two-state switch* (2026): three values — an explicit `light`, an explicit
+ * `dark`, or no preference at all — but only two ever shown. That falls out of
+ * two rules, both implemented here:
+ *
+ * 1. An override is stored **only when it differs from the OS preference**.
+ *    Choosing the scheme the OS already reports removes the override instead,
+ *    handing control back to the system. So a user on a dark OS who switches to
+ *    light and back is following the system again, not pinned to dark — and
+ *    "system" stays reachable without a third button.
+ * 2. The stored value is read **only when the user acts**. If the OS flips while
+ *    an explicit override exists, the override survives: the user asked for it,
+ *    and nothing they did says otherwise.
+ *
+ * SSR-safe: nothing here touches `window`, `document` or `localStorage` at
+ * module scope, and listeners are attached lazily on the first subscription.
+ */
+export type ColorScheme = 'light' | 'dark';
+/** Called whenever the effective scheme changes, from any source. */
+export type ColorSchemeListener = (scheme: ColorScheme, overridden: boolean) => void;
+/** Where the store writes `color-scheme`, if anywhere. */
+export type ColorSchemeApply = 'root' | false;
+export interface ColorSchemeConfig {
+    /**
+     * `localStorage` key holding the override. Set to `''` to disable persistence
+     * entirely — the choice then lasts for the session only.
+     */
+    storageKey?: string;
+    /**
+     * Write `color-scheme` on `<html>` when the scheme changes. Off by default:
+     * most applications already own a color-mode story, and silently rewriting
+     * `documentElement` would fight it. Turn it on for a plain page.
+     */
+    apply?: ColorSchemeApply;
+}
+declare class ColorSchemeStore {
+    #private;
+    /** The scheme actually in effect: a stored override, else the OS preference. */
+    get current(): ColorScheme;
+    /** Whether an override is in place, rather than the OS preference being followed. */
+    get overridden(): boolean;
+    /**
+     * Choose a scheme. Rule 1 lives here: the override is written only when it
+     * disagrees with the OS, and released when it agrees.
+     */
+    set(next: ColorScheme): void;
+    /** Flip to the other scheme. Returns the scheme now in effect. */
+    toggle(): ColorScheme;
+    /**
+     * Observe the effective scheme. The listener is called **immediately with the
+     * current value**, then on a user change, on an OS change with no override in
+     * place, and on a change made in another tab. Returns an unsubscribe function;
+     * the last unsubscribe releases the listeners.
+     *
+     * The immediate call is deliberate. A subscriber's job is almost always to
+     * mirror the scheme somewhere — an `aria-pressed`, a `checked`, a class — and
+     * a change-only contract leaves that mirror wrong until the first change,
+     * which is a bug nobody sees until a screen reader hits it. Callers that only
+     * want transitions can ignore the first call.
+     */
+    subscribe(listener: ColorSchemeListener): () => void;
+    /** Set the storage key and whether the store writes `color-scheme` on `<html>`. */
+    configure(config: ColorSchemeConfig): void;
+}
+/** The document's light/dark state. One instance per page. */
+export declare const colorScheme: ColorSchemeStore;
+export {};
+//# sourceMappingURL=color-scheme.d.ts.map

package/dist/color-scheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-scheme.d.ts","sourceRoot":"","sources":["../src/html/color-scheme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAE3C,qEAAqE;AACrE,MAAM,MAAM,mBAAmB,GAAG,CAAC,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;AAErF,0DAA0D;AAC1D,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,KAAK,CAAC;AAE9C,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B;AA8BD,cAAM,gBAAgB;;IAuBpB,gFAAgF;IAChF,IAAI,OAAO,IAAI,WAAW,CAEzB;IAED,qFAAqF;IACrF,IAAI,UAAU,IAAI,OAAO,CAExB;IAMD;;;OAGG;IACH,GAAG,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IAuB5B,kEAAkE;IAClE,MAAM,IAAI,WAAW;IAKrB;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,QAAQ,EAAE,mBAAmB,GAAG,MAAM,IAAI;IAUpD,mFAAmF;IACnF,SAAS,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI;CAuD3C;AAED,8DAA8D;AAC9D,eAAO,MAAM,WAAW,kBAAyB,CAAC"}

package/dist/color-scheme.js

@@ -0,0 +1,203 @@
+/**
+ * Page-level light/dark state, shared by every control that shows or changes it.
+ *
+ * Deliberately not an element: the scheme is one value per document, and a
+ * document can hold several controls for it — a header button, a menu row, a
+ * settings page. Whichever one the user touches, all of them have to agree, so
+ * the state belongs to the page rather than to any of them.
+ *
+ * The model is the one argued in Lea Verou's *Dark mode toggles should be a
+ * two-state switch* (2026): three values — an explicit `light`, an explicit
+ * `dark`, or no preference at all — but only two ever shown. That falls out of
+ * two rules, both implemented here:
+ *
+ * 1. An override is stored **only when it differs from the OS preference**.
+ *    Choosing the scheme the OS already reports removes the override instead,
+ *    handing control back to the system. So a user on a dark OS who switches to
+ *    light and back is following the system again, not pinned to dark — and
+ *    "system" stays reachable without a third button.
+ * 2. The stored value is read **only when the user acts**. If the OS flips while
+ *    an explicit override exists, the override survives: the user asked for it,
+ *    and nothing they did says otherwise.
+ *
+ * SSR-safe: nothing here touches `window`, `document` or `localStorage` at
+ * module scope, and listeners are attached lazily on the first subscription.
+ */
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _ColorSchemeStore_instances, _ColorSchemeStore_session, _ColorSchemeStore_listeners, _ColorSchemeStore_media, _ColorSchemeStore_last, _ColorSchemeStore_lastOverridden, _ColorSchemeStore_onOsChange, _ColorSchemeStore_onStorageChange, _ColorSchemeStore_override_get, _ColorSchemeStore_applyToRoot, _ColorSchemeStore_notify, _ColorSchemeStore_bind, _ColorSchemeStore_unbind;
+/*
+ * Defaults live as module-level bindings, not class fields, so that
+ * `luxen-ui/vite-plugin` can bake a project's `luxen.config.mjs` values in at
+ * build time by rewriting these two initialisers — the same mechanism it uses
+ * for `_elementPrefix` / `_cssPrefix` in `registry.ts`. `configure()` stays the
+ * runtime path for anything the build cannot know.
+ */
+let _storageKey = 'luxen-color-scheme';
+let _apply = false;
+const DARK_QUERY = '(prefers-color-scheme: dark)';
+/** The OS-level preference. `light` when the query is unsupported. */
+function osScheme() {
+    return globalThis.matchMedia?.(DARK_QUERY).matches ? 'dark' : 'light';
+}
+function readStored(key) {
+    if (!key)
+        return null;
+    try {
+        const value = localStorage.getItem(key);
+        return value === 'light' || value === 'dark' ? value : null;
+    }
+    catch {
+        // Safari private mode, disabled storage, sandboxed iframe.
+        return null;
+    }
+}
+class ColorSchemeStore {
+    constructor() {
+        _ColorSchemeStore_instances.add(this);
+        /**
+         * In-memory copy of the override, used when persistence is off or when the
+         * browser refuses to write. Without it a blocked write would leave every
+         * control unable to move at all.
+         */
+        _ColorSchemeStore_session.set(this, null);
+        _ColorSchemeStore_listeners.set(this, new Set());
+        _ColorSchemeStore_media.set(this, null);
+        _ColorSchemeStore_last.set(this, null);
+        _ColorSchemeStore_lastOverridden.set(this, false);
+        _ColorSchemeStore_onOsChange.set(this, () => __classPrivateFieldGet(this, _ColorSchemeStore_instances, "m", _ColorSchemeStore_notify).call(this));
+        _ColorSchemeStore_onStorageChange.set(this, (event) => {
+            // `key === null` means the whole store was cleared.
+            if (event.key !== null && event.key !== _storageKey)
+                return;
+            // Another tab is the authority now: drop this page's session copy so a
+            // release made over there is not undone by a stale local value.
+            if (_storageKey)
+                __classPrivateFieldSet(this, _ColorSchemeStore_session, null, "f");
+            __classPrivateFieldGet(this, _ColorSchemeStore_instances, "m", _ColorSchemeStore_notify).call(this);
+        });
+    }
+    /** The scheme actually in effect: a stored override, else the OS preference. */
+    get current() {
+        return __classPrivateFieldGet(this, _ColorSchemeStore_instances, "a", _ColorSchemeStore_override_get) ?? osScheme();
+    }
+    /** Whether an override is in place, rather than the OS preference being followed. */
+    get overridden() {
+        return __classPrivateFieldGet(this, _ColorSchemeStore_instances, "a", _ColorSchemeStore_override_get) !== null;
+    }
+    /**
+     * Choose a scheme. Rule 1 lives here: the override is written only when it
+     * disagrees with the OS, and released when it agrees.
+     */
+    set(next) {
+        const release = next === osScheme();
+        if (_storageKey) {
+            try {
+                if (release)
+                    localStorage.removeItem(_storageKey);
+                else
+                    localStorage.setItem(_storageKey, next);
+                // Storage took it, so it is the single authority — drop any session copy
+                // left over from a period when it was unavailable.
+                __classPrivateFieldSet(this, _ColorSchemeStore_session, null, "f");
+                __classPrivateFieldGet(this, _ColorSchemeStore_instances, "m", _ColorSchemeStore_applyToRoot).call(this);
+                __classPrivateFieldGet(this, _ColorSchemeStore_instances, "m", _ColorSchemeStore_notify).call(this);
+                return;
+            }
+            catch {
+                // Refused — fall through to memory.
+            }
+        }
+        __classPrivateFieldSet(this, _ColorSchemeStore_session, release ? null : next, "f");
+        __classPrivateFieldGet(this, _ColorSchemeStore_instances, "m", _ColorSchemeStore_applyToRoot).call(this);
+        __classPrivateFieldGet(this, _ColorSchemeStore_instances, "m", _ColorSchemeStore_notify).call(this);
+    }
+    /** Flip to the other scheme. Returns the scheme now in effect. */
+    toggle() {
+        this.set(this.current === 'dark' ? 'light' : 'dark');
+        return this.current;
+    }
+    /**
+     * Observe the effective scheme. The listener is called **immediately with the
+     * current value**, then on a user change, on an OS change with no override in
+     * place, and on a change made in another tab. Returns an unsubscribe function;
+     * the last unsubscribe releases the listeners.
+     *
+     * The immediate call is deliberate. A subscriber's job is almost always to
+     * mirror the scheme somewhere — an `aria-pressed`, a `checked`, a class — and
+     * a change-only contract leaves that mirror wrong until the first change,
+     * which is a bug nobody sees until a screen reader hits it. Callers that only
+     * want transitions can ignore the first call.
+     */
+    subscribe(listener) {
+        __classPrivateFieldGet(this, _ColorSchemeStore_listeners, "f").add(listener);
+        __classPrivateFieldGet(this, _ColorSchemeStore_instances, "m", _ColorSchemeStore_bind).call(this);
+        listener(this.current, this.overridden);
+        return () => {
+            __classPrivateFieldGet(this, _ColorSchemeStore_listeners, "f").delete(listener);
+            if (__classPrivateFieldGet(this, _ColorSchemeStore_listeners, "f").size === 0)
+                __classPrivateFieldGet(this, _ColorSchemeStore_instances, "m", _ColorSchemeStore_unbind).call(this);
+        };
+    }
+    /** Set the storage key and whether the store writes `color-scheme` on `<html>`. */
+    configure(config) {
+        if (config.storageKey !== undefined)
+            _storageKey = config.storageKey;
+        if (config.apply !== undefined) {
+            const wasApplying = _apply === 'root';
+            _apply = config.apply;
+            // Leave no trace when application is switched off.
+            if (wasApplying && config.apply === false) {
+                globalThis.document?.documentElement.style.removeProperty('color-scheme');
+            }
+        }
+        __classPrivateFieldGet(this, _ColorSchemeStore_instances, "m", _ColorSchemeStore_applyToRoot).call(this);
+        __classPrivateFieldGet(this, _ColorSchemeStore_instances, "m", _ColorSchemeStore_notify).call(this);
+    }
+}
+_ColorSchemeStore_session = new WeakMap(), _ColorSchemeStore_listeners = new WeakMap(), _ColorSchemeStore_media = new WeakMap(), _ColorSchemeStore_last = new WeakMap(), _ColorSchemeStore_lastOverridden = new WeakMap(), _ColorSchemeStore_onOsChange = new WeakMap(), _ColorSchemeStore_onStorageChange = new WeakMap(), _ColorSchemeStore_instances = new WeakSet(), _ColorSchemeStore_override_get = function _ColorSchemeStore_override_get() {
+    return readStored(_storageKey) ?? __classPrivateFieldGet(this, _ColorSchemeStore_session, "f");
+}, _ColorSchemeStore_applyToRoot = function _ColorSchemeStore_applyToRoot() {
+    if (_apply !== 'root')
+        return;
+    const root = globalThis.document?.documentElement;
+    if (root)
+        root.style.colorScheme = __classPrivateFieldGet(this, _ColorSchemeStore_instances, "a", _ColorSchemeStore_override_get) ?? 'light dark';
+}, _ColorSchemeStore_notify = function _ColorSchemeStore_notify() {
+    const next = this.current;
+    const overridden = this.overridden;
+    // Both halves of the payload are compared, not just the scheme: releasing an
+    // override that already agreed with the OS leaves `current` untouched while
+    // `overridden` flips, and a subscriber mirroring it — a "following the
+    // system" badge, a tri-state settings control — would never hear about it.
+    if (next === __classPrivateFieldGet(this, _ColorSchemeStore_last, "f") && overridden === __classPrivateFieldGet(this, _ColorSchemeStore_lastOverridden, "f"))
+        return;
+    __classPrivateFieldSet(this, _ColorSchemeStore_last, next, "f");
+    __classPrivateFieldSet(this, _ColorSchemeStore_lastOverridden, overridden, "f");
+    for (const listener of __classPrivateFieldGet(this, _ColorSchemeStore_listeners, "f"))
+        listener(next, overridden);
+}, _ColorSchemeStore_bind = function _ColorSchemeStore_bind() {
+    if (__classPrivateFieldGet(this, _ColorSchemeStore_media, "f"))
+        return;
+    __classPrivateFieldSet(this, _ColorSchemeStore_media, globalThis.matchMedia?.(DARK_QUERY) ?? null, "f");
+    __classPrivateFieldGet(this, _ColorSchemeStore_media, "f")?.addEventListener('change', __classPrivateFieldGet(this, _ColorSchemeStore_onOsChange, "f"));
+    globalThis.addEventListener?.('storage', __classPrivateFieldGet(this, _ColorSchemeStore_onStorageChange, "f"));
+    __classPrivateFieldSet(this, _ColorSchemeStore_last, this.current, "f");
+    __classPrivateFieldSet(this, _ColorSchemeStore_lastOverridden, this.overridden, "f");
+    __classPrivateFieldGet(this, _ColorSchemeStore_instances, "m", _ColorSchemeStore_applyToRoot).call(this);
+}, _ColorSchemeStore_unbind = function _ColorSchemeStore_unbind() {
+    __classPrivateFieldGet(this, _ColorSchemeStore_media, "f")?.removeEventListener('change', __classPrivateFieldGet(this, _ColorSchemeStore_onOsChange, "f"));
+    __classPrivateFieldSet(this, _ColorSchemeStore_media, null, "f");
+    globalThis.removeEventListener?.('storage', __classPrivateFieldGet(this, _ColorSchemeStore_onStorageChange, "f"));
+};
+/** The document's light/dark state. One instance per page. */
+export const colorScheme = new ColorSchemeStore();

package/dist/config.d.ts

@@ -43,6 +43,24 @@ export interface LuxenEmitTypesConfig {
     /** Overwrite the file even when it exists. Default `false`. */
     force?: boolean;
 }
+/** Build-time defaults for the `luxen-ui/color-scheme` store. */
+export interface LuxenColorSchemeConfig {
+    /**
+     * `localStorage` key holding the light/dark override. Default
+     * `'luxen-color-scheme'`. Set to `''` to disable persistence entirely.
+     *
+     * Change it here and the before-first-paint snippet in your `<head>` has to
+     * read the same key — that snippet runs before any module and cannot be
+     * rewritten by the build.
+     */
+    storageKey?: string;
+    /**
+     * Have the store write `color-scheme` on `<html>` itself. Default `false`,
+     * because most applications already own a color-mode story; `'root'` is the
+     * batteries-included path for a plain page.
+     */
+    apply?: 'root' | false;
+}
 /**
  * Shape of `luxen.config.mjs`. Both the Vite plugin and the CLI read this
  * file; each tool ignores the fields that don't apply to it.
@@ -66,6 +84,11 @@ export interface LuxenConfig {
     cssImportPath?: string;
     /** npm specifier used in `import` examples in `references/`. Default `'luxen-ui'`. */
     jsImportPath?: string;
+    /**
+     * Defaults for `luxen-ui/color-scheme`, baked in at build time so a project
+     * never has to call `colorScheme.configure()` from its entry point.
+     */
+    colorScheme?: LuxenColorSchemeConfig;
     /**
      * Emit a prefix-aware `.d.ts` for `HTMLElementTagNameMap` (and optionally
      * Vue's `GlobalComponents`). Pass a path string for the default behaviour,

package/dist/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/html/config.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAmD;AACnD,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC;AAE1C,kEAAkE;AAClE,MAAM,WAAW,oBAAoB;IACnC,yEAAyE;IACzE,IAAI,EAAE,MAAM,CAAC;IACb;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACvB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,SAAS,oBAAoB,EAAE,CAAC;IAC3C;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;GAGG;AACH,MAAM,WAAW,WAAW;IAE1B,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,uDAAuD;IACvD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0FAA0F;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,2FAA2F;IAC3F,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sFAAsF;IACtF,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,oBAAoB,CAAC;CAC3C;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,WAAW,EAAE,MAAM,EAAE,CAAC,GAAG,CAAC,CAEhE"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/html/config.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAmD;AACnD,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC;AAE1C,kEAAkE;AAClE,MAAM,WAAW,oBAAoB;IACnC,yEAAyE;IACzE,IAAI,EAAE,MAAM,CAAC;IACb;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACvB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,SAAS,oBAAoB,EAAE,CAAC;IAC3C;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,iEAAiE;AACjE,MAAM,WAAW,sBAAsB;IACrC;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CACxB;AAED;;;GAGG;AACH,MAAM,WAAW,WAAW;IAE1B,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,uDAAuD;IACvD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0FAA0F;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,2FAA2F;IAC3F,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sFAAsF;IACtF,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB;;;OAGG;IACH,WAAW,CAAC,EAAE,sBAAsB,CAAC;IAGrC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,oBAAoB,CAAC;CAC3C;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,WAAW,EAAE,MAAM,EAAE,CAAC,GAAG,CAAC,CAEhE"}

package/dist/css/elements/tabs/enclosed.css

@@ -73,11 +73,19 @@
     }
 
     @media (hover: hover) {
-      &:hover:not([aria-selected='true']) {
+      &:hover:not([aria-selected='true']):not(:disabled):not([aria-disabled='true']) {
         color: var(--l-color-text-primary);
       }
     }
 
+    /* Placed after the selected and hover rules so a disabled tab still greys
+       out when it is the selected one — equal specificity, source order wins. */
+    &:disabled,
+    &[aria-disabled='true'] {
+      cursor: not-allowed;
+      color: var(--l-color-text-disabled);
+    }
+
     &:focus-visible {
       outline: 2px solid var(--l-focus-ring);
       outline-offset: -2px;

package/dist/css/elements/tabs/line.css

@@ -73,11 +73,19 @@
     }
 
     @media (hover: hover) {
-      &:hover:not([aria-selected='true']) {
+      &:hover:not([aria-selected='true']):not(:disabled):not([aria-disabled='true']) {
         color: var(--l-color-text-primary);
       }
     }
 
+    /* Placed after the selected and hover rules so a disabled tab still greys
+       out when it is the selected one — equal specificity, source order wins. */
+    &:disabled,
+    &[aria-disabled='true'] {
+      cursor: not-allowed;
+      color: var(--l-color-text-disabled);
+    }
+
     &:focus-visible {
       outline: 2px solid var(--l-focus-ring);
       outline-offset: -2px;
@@ -161,9 +169,12 @@
 
       /* Applies to the selected tab too — the fill is click feedback, not a
          selection cue (the underline carries that), so it would read as dead
-         if the active tab were the one place it stopped responding. */
+         if the active tab were the one place it stopped responding. A disabled
+         tab is the exception: `:hover` still matches it (the platform does not
+         gate hover on `disabled`), and promising click feedback where no click
+         will ever register is the wrong signal. */
       @media (hover: hover) {
-        &:hover::after {
+        &:hover:not(:disabled):not([aria-disabled='true'])::after {
           background: var(--hover-color, var(--l-color-bg-state-hover));
         }
       }