@brightspot/ui 1.10.0 → 1.11.0

package/dist/tailwind-plugin-tabs.ts

@@ -0,0 +1,162 @@
+import plugin from 'tailwindcss/plugin'
+declare let module: any
+
+/**
+ * Tabs component styles.
+ *
+ * Class Names:
+ *
+ *  btu-tabs           - Root container
+ *  btu-tabs-xs        - Extra small container padding
+ *  btu-tabs-sm        - Small container padding
+ *  btu-tabs-md        - Medium container padding (default)
+ *  btu-tabs-lg        - Large container padding
+ *  btu-tab            - Individual tab wrapper
+ *  btu-tab-button     - Inner tab button
+ *  btu-tab-button-xs  - Extra small button height/text
+ *  btu-tab-button-sm  - Small button height/text
+ *  btu-tab-button-md  - Medium button height/text (default)
+ *  btu-tab-button-lg  - Large button height/text
+ *  btu-tab-indicator  - Active tab underline indicator
+ *  btu-tabs-menu-mode - Menu variant overflow override
+ *  btu-tab-menu-wrapper - Menu variant wrapper for label and dropdown
+ *  btu-tab-menu-label - Menu variant active tab label
+ *
+ * CSS Custom Properties:
+ *
+ *  --tabs-active-color          - Text and icon color of the active tab (default: gray-700)
+ *  --tabs-active-indicator-color - Color of the active tab underline indicator (default: primary gradient)
+ *  --tabs-border-color          - Bottom border divider color (default: gray-200)
+ *  --tabs-color                 - Text and icon color for all tabs (default: gray-500)
+ *  --tabs-background            - Background color for all tab buttons (default: transparent)
+ *  --tabs-container-background  - Background color of the tabs container (default: theme white)
+ *  --tabs-hover-background      - Background color of a tab on hover (default: gray-100)
+ *  --tabs-hover-color           - Text and icon color of a tab on hover (default: gray-700)
+ *  --tabs-gap                   - Spacing between tabs (default: 1rem)
+ */
+
+module.exports = plugin(function ({ addComponents, addBase, config, theme }) {
+  const fontSize_xs = config('theme.fontSize.xs')?.[0] ?? '0.75rem'
+  const fontSize_sm = config('theme.fontSize.sm')?.[0] ?? '0.875rem'
+  const fontSize_base = config('theme.fontSize.base')?.[0] ?? '1rem'
+
+  addBase({
+    '@keyframes btu-tab-draw': {
+      from: { transform: 'scaleX(0)' },
+      to: { transform: 'scaleX(1)' },
+    },
+  })
+
+  addComponents({
+    '.btu-tabs': {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 'var(--tabs-gap, 1rem)',
+      position: 'relative',
+      borderBottom: '1px solid var(--tabs-border-color, oklch(var(--btu-theme-gray-200)))',
+      backgroundColor: 'var(--tabs-container-background, var(--btu-theme-white))',
+      overflowX: 'auto',
+      overflowY: 'clip',
+    },
+    // In menu mode, disable scrolling so the dropdown can extend beyond the container
+    '.btu-tabs-menu-mode': {
+      overflowX: 'visible',
+      overflowY: 'visible',
+    },
+    '.btu-tabs-xs': { paddingInline: '1rem' },
+    '.btu-tabs-sm': { paddingInline: '1rem' },
+    '.btu-tabs-md': { paddingInline: '1.5rem' },
+    '.btu-tabs-lg': { paddingInline: '1.5rem' },
+
+    '.btu-tab': {
+      display: 'inline-flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      flexShrink: '0',
+    },
+
+    '.btu-tab-button': {
+      position: 'relative',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '0.5rem',
+      paddingInline: '0.5rem',
+      cursor: 'pointer',
+      whiteSpace: 'nowrap',
+      boxSizing: 'border-box',
+      backgroundColor: 'var(--tabs-background, transparent)',
+      color: 'var(--tabs-color, oklch(var(--btu-theme-gray-500)))',
+      transitionProperty: 'color, background-color',
+      transitionDuration: '150ms',
+      transitionTimingFunction: 'ease',
+      '&:hover:not([aria-disabled="true"])': {
+        backgroundColor: 'var(--tabs-hover-background, oklch(var(--btu-theme-gray-100)))',
+        color: 'var(--tabs-hover-color, oklch(var(--btu-theme-gray-700)))',
+      },
+      '&[aria-selected="true"]:not([aria-disabled="true"])': {
+        color: 'var(--tabs-active-color, oklch(var(--btu-theme-gray-700)))',
+      },
+      '&[aria-disabled="true"]': {
+        color: 'oklch(var(--btu-theme-gray-300))',
+        cursor: 'not-allowed',
+      },
+      '&:focus-visible': {
+        outline: 'none',
+        boxShadow:
+          'inset 0 0 0 3px oklch(var(--btu-theme-primary-100)), inset 0 0 0 4px oklch(var(--btu-theme-primary-600))',
+      },
+      '@media (prefers-reduced-motion: reduce)': {
+        transitionDuration: '0.01ms',
+      },
+    },
+
+    '.btu-tab-button-xs': {
+      height: '2.25rem',
+      fontSize: fontSize_xs,
+      fontWeight: '400',
+    },
+    '.btu-tab-button-sm': {
+      height: '2.75rem',
+      fontSize: fontSize_sm,
+      fontWeight: '500',
+    },
+    '.btu-tab-button-md': {
+      height: '3.25rem',
+      fontSize: fontSize_sm,
+      fontWeight: '500',
+    },
+    '.btu-tab-button-lg': {
+      height: '3.5rem',
+      fontSize: fontSize_base,
+      fontWeight: '500',
+    },
+
+    '.btu-tab-indicator': {
+      position: 'absolute',
+      bottom: '0',
+      left: '0',
+      right: '0',
+      height: '0.125rem',
+      background: `var(--tabs-active-indicator-color, ${theme('backgroundImage.primary-gradient')})`,
+      transformOrigin: 'left',
+      animation: 'btu-tab-draw 200ms ease-out',
+      '@media (prefers-reduced-motion: reduce)': {
+        animationDuration: '0.01ms',
+      },
+    },
+
+    '.btu-tab-menu-wrapper': {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: '0.5rem',
+    },
+
+    '.btu-tab-menu-label': {
+      fontSize: fontSize_sm,
+      fontWeight: '500',
+      color: 'var(--tabs-active-color, oklch(var(--btu-theme-gray-700)))',
+      whiteSpace: 'nowrap',
+    },
+  })
+})

package/dist/util/EventEmitterMixin.d.ts

@@ -60,17 +60,33 @@ export interface CustomEventMap {
     'btu-dropdown-item-ready': CustomEvent<unknown>;
     'btu-dropdown-item-select': CustomEvent<{
         label: string;
+        value: string;
         selected: boolean;
     }>;
     'btu-dropdown-item-favorite': CustomEvent<{
         label: string;
         favorited: boolean;
     }>;
+    'btu-tabs-ready': CustomEvent<unknown>;
+    'btu-tab-ready': CustomEvent<unknown>;
+    'btu-tab-change': CustomEvent<{
+        name: string;
+    }>;
+    'btu-tabs-show': CustomEvent<{
+        name: string;
+    }>;
+    'btu-tabs-hide': CustomEvent<{
+        name: string;
+    }>;
     'btu-switch-ready': CustomEvent<unknown>;
     'btu-switch-change': CustomEvent<{
         checked: boolean;
     }>;
     'btu-switch-focus': CustomEvent<unknown>;
+    'btu-action-bar-ready': CustomEvent<unknown>;
+    'btu-action-item-click': CustomEvent<{
+        label: string;
+    }>;
 }
 interface CombinedEventMap extends HTMLElementEventMap, CustomEventMap {
 }

package/dist/util/EventEmitterMixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EventEmitterMixin.d.ts","sourceRoot":"","sources":["../../src/util/EventEmitterMixin.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"EventEmitterMixin.d.ts","sourceRoot":"","sources":["../../src/util/EventEmitterMixin.ts"],"names":[],"mappings":"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"}

package/dist/util/EventEmitterMixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"EventEmitterMixin.js","sourceRoot":"","sources":["../../src/util/EventEmitterMixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAoEhC;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAoC,UAAa,EAAE,EAAE;IACpF,MAAM,sBAAuB,SAAQ,UAAU;QAC7C;;;;WAIG;QACH,iBAAiB;YACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;YACzB,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CACpB,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE,EAAE,CAAC,EAC5C,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,EAAE,KAAK,EAAE,CAAC,CACnD,CAAA;QACH,CAAC;QAED;;;;WAIG;QACH,oBAAoB;YAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;YAC5B,IAAI,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAA;QACvC,CAAC;QAED;;;;;;;;;;;;;;;;WAgBG;QACH,IAAI,CAAiC,IAAO,EAAE,MAA6C;YACzF,OAAO,IAAI,CAAC,aAAa,CACvB,IAAI,WAAW,CAAC,IAAI,EAAE;gBACpB,OAAO,EAAE,IAAI;gBACb,UAAU,EAAE,KAAK;gBACjB,QAAQ,EAAE,IAAI;gBACd,MAAM;aACP,CAAC,CACH,CAAA;QACH,CAAC;KACF;IACD,OAAO,sBAAqE,CAAA;AAC9E,CAAC,CAAA"}
+{"version":3,"file":"EventEmitterMixin.js","sourceRoot":"","sources":["../../src/util/EventEmitterMixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AA2EhC;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAoC,UAAa,EAAE,EAAE;IACpF,MAAM,sBAAuB,SAAQ,UAAU;QAC7C;;;;WAIG;QACH,iBAAiB;YACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;YACzB,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CACpB,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE,EAAE,CAAC,EAC5C,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,EAAE,KAAK,EAAE,CAAC,CACnD,CAAA;QACH,CAAC;QAED;;;;WAIG;QACH,oBAAoB;YAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;YAC5B,IAAI,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAA;QACvC,CAAC;QAED;;;;;;;;;;;;;;;;WAgBG;QACH,IAAI,CAAiC,IAAO,EAAE,MAA6C;YACzF,OAAO,IAAI,CAAC,aAAa,CACvB,IAAI,WAAW,CAAC,IAAI,EAAE;gBACpB,OAAO,EAAE,IAAI;gBACb,UAAU,EAAE,KAAK;gBACjB,QAAQ,EAAE,IAAI;gBACd,MAAM;aACP,CAAC,CACH,CAAA;QACH,CAAC;KACF;IACD,OAAO,sBAAqE,CAAA;AAC9E,CAAC,CAAA"}

package/dist/util/RovingTabindexMixin.d.ts

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+type Constructor<T = object> = new (...args: any[]) => T;
+export declare class RovingTabindexInterface {
+    _rovingIndex: number;
+    _getRovingTargets(): HTMLElement[];
+    _rovingFocus(index: number, shouldFocus?: boolean): void;
+    _rovingNext(): void;
+    _rovingPrev(): void;
+    _rovingFirst(): void;
+    _rovingLast(): void;
+    _rovingCurrentIndex(): number;
+}
+/**
+ * @mixin
+ * Mixin that provides roving tabindex navigation primitives for toolbar
+ * and menu components following WAI-ARIA keyboard patterns.
+ *
+ * Subclasses override `_getRovingTargets()` to return the focusable HTMLElements
+ * in DOM order. The mixin manages tabindex across those targets (one `0`, rest `-1`)
+ * and provides wrapping next/prev/first/last navigation.
+ *
+ * Does NOT install a keydown handler — each component defines its own
+ * (horizontal vs vertical, RTL, extra keys like Enter/Escape).
+ *
+ * @example
+ * ```typescript
+ * import { RovingTabindexMixin } from './RovingTabindexMixin'
+ *
+ * class MyToolbar extends RovingTabindexMixin(LitElement) {
+ *   _getRovingTargets(): HTMLElement[] {
+ *     return Array.from(this.querySelectorAll('button'))
+ *   }
+ * }
+ * ```
+ */
+export declare const RovingTabindexMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<RovingTabindexInterface> & T;
+export {};
+//# sourceMappingURL=RovingTabindexMixin.d.ts.map

package/dist/util/RovingTabindexMixin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RovingTabindexMixin.d.ts","sourceRoot":"","sources":["../../src/util/RovingTabindexMixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAEhC,KAAK,WAAW,CAAC,CAAC,GAAG,MAAM,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAA;AAExD,MAAM,CAAC,OAAO,OAAO,uBAAuB;IAC1C,YAAY,EAAE,MAAM,CAAA;IACpB,iBAAiB,IAAI,WAAW,EAAE;IAClC,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,OAAO,GAAG,IAAI;IACxD,WAAW,IAAI,IAAI;IACnB,WAAW,IAAI,IAAI;IACnB,YAAY,IAAI,IAAI;IACpB,WAAW,IAAI,IAAI;IACnB,mBAAmB,IAAI,MAAM;CAC9B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAAE,YAAY,CAAC,KAuDpD,WAAW,CAAC,uBAAuB,CAAC,GAAG,CACtE,CAAA"}

package/dist/util/RovingTabindexMixin.js

@@ -0,0 +1,83 @@
+import { LitElement } from 'lit';
+/**
+ * @mixin
+ * Mixin that provides roving tabindex navigation primitives for toolbar
+ * and menu components following WAI-ARIA keyboard patterns.
+ *
+ * Subclasses override `_getRovingTargets()` to return the focusable HTMLElements
+ * in DOM order. The mixin manages tabindex across those targets (one `0`, rest `-1`)
+ * and provides wrapping next/prev/first/last navigation.
+ *
+ * Does NOT install a keydown handler — each component defines its own
+ * (horizontal vs vertical, RTL, extra keys like Enter/Escape).
+ *
+ * @example
+ * ```typescript
+ * import { RovingTabindexMixin } from './RovingTabindexMixin'
+ *
+ * class MyToolbar extends RovingTabindexMixin(LitElement) {
+ *   _getRovingTargets(): HTMLElement[] {
+ *     return Array.from(this.querySelectorAll('button'))
+ *   }
+ * }
+ * ```
+ */
+export const RovingTabindexMixin = (superClass) => {
+    class RovingTabindexClass extends superClass {
+        constructor() {
+            super(...arguments);
+            /** Index of the last focused target */
+            this._rovingIndex = 0;
+        }
+        /** Override: return focusable HTMLElements in navigation order */
+        _getRovingTargets() {
+            return [];
+        }
+        /** Set tabindex 0 on target at index, -1 on all others. Optionally focus. */
+        _rovingFocus(index, shouldFocus = true) {
+            const targets = this._getRovingTargets();
+            if (targets.length === 0)
+                return;
+            const clamped = Math.max(0, Math.min(index, targets.length - 1));
+            targets.forEach((t, i) => t.setAttribute('tabindex', i === clamped ? '0' : '-1'));
+            if (shouldFocus)
+                targets[clamped]?.focus();
+            this._rovingIndex = clamped;
+        }
+        /** Move to next target (wraps to first) */
+        _rovingNext() {
+            const targets = this._getRovingTargets();
+            if (targets.length === 0)
+                return;
+            const current = this._rovingCurrentIndex();
+            const next = current < targets.length - 1 ? current + 1 : 0;
+            this._rovingFocus(next);
+        }
+        /** Move to previous target (wraps to last) */
+        _rovingPrev() {
+            const targets = this._getRovingTargets();
+            if (targets.length === 0)
+                return;
+            const current = this._rovingCurrentIndex();
+            const prev = current > 0 ? current - 1 : targets.length - 1;
+            this._rovingFocus(prev);
+        }
+        /** Focus first target */
+        _rovingFirst() {
+            this._rovingFocus(0);
+        }
+        /** Focus last target */
+        _rovingLast() {
+            const targets = this._getRovingTargets();
+            if (targets.length > 0)
+                this._rovingFocus(targets.length - 1);
+        }
+        /** Find index of currently focused target */
+        _rovingCurrentIndex() {
+            const active = document.activeElement;
+            return this._getRovingTargets().findIndex(t => t === active || t.contains(active));
+        }
+    }
+    return RovingTabindexClass;
+};
+//# sourceMappingURL=RovingTabindexMixin.js.map

package/dist/util/RovingTabindexMixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RovingTabindexMixin.js","sourceRoot":"","sources":["../../src/util/RovingTabindexMixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAehC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAoC,UAAa,EAAE,EAAE;IACtF,MAAM,mBAAoB,SAAQ,UAAU;QAA5C;;YACE,uCAAuC;YACvC,iBAAY,GAAG,CAAC,CAAA;QAmDlB,CAAC;QAjDC,kEAAkE;QAClE,iBAAiB;YACf,OAAO,EAAE,CAAA;QACX,CAAC;QAED,6EAA6E;QAC7E,YAAY,CAAC,KAAa,EAAE,WAAW,GAAG,IAAI;YAC5C,MAAM,OAAO,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAA;YACxC,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;gBAAE,OAAM;YAChC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAA;YAChE,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,UAAU,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAA;YACjF,IAAI,WAAW;gBAAE,OAAO,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAA;YAC1C,IAAI,CAAC,YAAY,GAAG,OAAO,CAAA;QAC7B,CAAC;QAED,2CAA2C;QAC3C,WAAW;YACT,MAAM,OAAO,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAA;YACxC,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;gBAAE,OAAM;YAChC,MAAM,OAAO,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAA;YAC1C,MAAM,IAAI,GAAG,OAAO,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;YAC3D,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;QACzB,CAAC;QAED,8CAA8C;QAC9C,WAAW;YACT,MAAM,OAAO,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAA;YACxC,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;gBAAE,OAAM;YAChC,MAAM,OAAO,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAA;YAC1C,MAAM,IAAI,GAAG,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAA;YAC3D,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;QACzB,CAAC;QAED,yBAAyB;QACzB,YAAY;YACV,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAA;QACtB,CAAC;QAED,wBAAwB;QACxB,WAAW;YACT,MAAM,OAAO,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAA;YACxC,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC;gBAAE,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;QAC/D,CAAC;QAED,6CAA6C;QAC7C,mBAAmB;YACjB,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAA;YACrC,OAAO,IAAI,CAAC,iBAAiB,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,MAAM,IAAI,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAA;QACpF,CAAC;KACF;IACD,OAAO,mBAA+D,CAAA;AACxE,CAAC,CAAA"}

package/docs/components/ActionBar.md

@@ -0,0 +1,71 @@
+# `src/components/action-bar/ActionBar.ts`:
+
+## class: `ActionBar`, `btu-action-bar`
+
+### Superclass
+
+| Name         | Module | Package |
+| ------------ | ------ | ------- |
+| `LitElement` |        | lit     |
+
+### Mixins
+
+| Name                  | Module                           | Package |
+| --------------------- | -------------------------------- | ------- |
+| `RovingTabindexMixin` | /src/util/RovingTabindexMixin.js |         |
+| `EventEmitterMixin`   | /src/util/EventEmitterMixin.js   |         |
+| `ReadyMixin`          | /src/util/ReadyMixin.js          |         |
+
+### Fields
+
+| Name        | Privacy | Type        | Default     | Description                                                                                                                                                                                                     | Inherited From |
+| ----------- | ------- | ----------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
+| `position`  |         | `Position`  | `'bottom'`  | Bar position: 'top' or 'bottom' (default).                                                                                                                                                                      |                |
+| `sticky`    |         | `boolean`   | `false`     | Enables CSS sticky positioning. When combined with position='top',
the bar sticks to the top of the scroll container. With position='bottom'
(default), it sticks to the bottom.                        |                |
+| `alignment` |         | `Alignment` | `'default'` | Content alignment: 'default' (two-zone), 'start', 'center', 'end'.
Non-default alignments disable two-zone layout.                                                                                          |                |
+| `shadow`    |         | `boolean`   | `false`     | Adds a box-shadow to the bar.                                                                                                                                                                                   |                |
+| `label`     |         | `string`    | `''`        | Accessible label for the toolbar region.                                                                                                                                                                        |                |
+| `compact`   |         | `boolean`   | `false`     | Enables progressive label compacting. When space shrinks, items marked
\`compactable\` (with icons) have their labels hidden one-by-one
from least to most important before items overflow into "More". |                |
+
+### Events
+
+| Name                    | Type                           | Description                                                         | Inherited From |
+| ----------------------- | ------------------------------ | ------------------------------------------------------------------- | -------------- |
+| `btu-action-bar-ready`  | `CustomEvent`                  | Fired after first render and initialization                         |                |
+| `btu-action-item-click` | `CustomEvent<{label: string}>` | Fired when an action item is clicked (bubbles from btu-action-item) |                |
+
+### Attributes
+
+| Name             | Field     | Inherited From |
+| ---------------- | --------- | -------------- |
+| `position`       | position  |                |
+| `sticky`         | sticky    |                |
+| `item-alignment` | alignment |                |
+| `shadow`         | shadow    |                |
+| `label`          | label     |                |
+| `compact`        | compact   |                |
+
+### CSS Properties
+
+| Name                        | Default | Description                          |
+| --------------------------- | ------- | ------------------------------------ |
+| `--action-bar-gap`          |         | Gap between items (default: 0.75rem) |
+| `--action-bar-padding`      |         | Bar padding (default: 1.5rem)        |
+| `--action-bar-background`   |         | Background color (default: white)    |
+| `--action-bar-border-color` |         | Border color (default: gray-200)     |
+| `--action-bar-z-index`      |         | Z-index (default: 100)               |
+
+### Slots
+
+| Name | Description                              |
+| ---- | ---------------------------------------- |
+|      | One or more \`btu-action-item\` elements |
+
+<hr/>
+
+## Exports
+
+| Kind                        | Name             | Declaration | Module                                 | Package |
+| --------------------------- | ---------------- | ----------- | -------------------------------------- | ------- |
+| `js`                        | `default`        | ActionBar   | src/components/action-bar/ActionBar.ts |         |
+| `custom-element-definition` | `btu-action-bar` | ActionBar   | src/components/action-bar/ActionBar.ts |         |

package/docs/components/ActionItem.md

@@ -0,0 +1,76 @@
+# `src/components/action-bar/ActionItem.ts`:
+
+## class: `ActionItem`, `btu-action-item`
+
+### Superclass
+
+| Name         | Module | Package |
+| ------------ | ------ | ------- |
+| `LitElement` |        | lit     |
+
+### Mixins
+
+| Name                | Module                         | Package |
+| ------------------- | ------------------------------ | ------- |
+| `TooltipMixin`      | /src/util/TooltipMixin.js      |         |
+| `EventEmitterMixin` | /src/util/EventEmitterMixin.js |         |
+| `ReadyMixin`        | /src/util/ReadyMixin.js        |         |
+
+### Fields
+
+| Name          | Privacy | Type                     | Default       | Description                                                                                                                                                                                                                                                                                               | Inherited From |
+| ------------- | ------- | ------------------------ | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
+| `label`       |         | `string`                 | `''`          | Button label text.                                                                                                                                                                                                                                                                                        |                |
+| `variant`     |         | `ActionItemVariant`      | `'secondary'` | Visual variant: 'primary', 'secondary', 'tertiary', 'destructive'.                                                                                                                                                                                                                                        |                |
+| `iconName`    |         | `string`                 | `''`          | Lucide icon name for the leading icon.                                                                                                                                                                                                                                                                    |                |
+| `iconOnly`    |         | `boolean`                | `false`       | Show icon only, hiding the label. Tooltip activates automatically with the label text.                                                                                                                                                                                                                    |                |
+| `disabled`    |         | `boolean`                | `false`       | Disables the action item. The button remains focusable for accessibility
but click events are suppressed.                                                                                                                                                                                             |                |
+| `loading`     |         | `boolean`                | `false`       | Shows a loading spinner and prevents interaction.                                                                                                                                                                                                                                                         |                |
+| `zone`        |         | `'start' \| 'end' \| ''` | `''`          | Zone placement: 'start' or 'end'. Used by ActionBar for two-zone layout.
If unset, auto-detected from variant (destructive → start, others → end).                                                                                                                                                    |                |
+| `compactable` |         | `boolean`                | `false`       | Opt-in for progressive label compacting. When the parent bar has \`compact\`
enabled and space shrinks, compactable items with icons have their labels
hidden one-by-one (least important first) before overflowing.
Items without an icon ignore this attribute and go directly to overflow. |                |
+
+### Methods
+
+| Name                  | Privacy | Description | Parameters | Return                   | Inherited From |
+| --------------------- | ------- | ----------- | ---------- | ------------------------ | -------------- |
+| `_relayTooltipAttrs`  | private |             |            | `void`                   |                |
+| `_handleClick`        | private |             |            | `void`                   |                |
+| `_getSpinnerColor`    | private |             |            | `string`                 |                |
+| `_buildButtonClasses` | private |             |            | `string`                 |                |
+| `_getButtonStyles`    | private |             |            | `Record<string, string>` |                |
+
+### Events
+
+| Name                    | Type                           | Description                                                                | Inherited From |
+| ----------------------- | ------------------------------ | -------------------------------------------------------------------------- | -------------- |
+| `btu-action-item-click` | `CustomEvent<{label: string}>` | Fired when the action item is clicked (not fired when disabled or loading) |                |
+
+### Attributes
+
+| Name          | Field       | Inherited From |
+| ------------- | ----------- | -------------- |
+| `label`       | label       |                |
+| `variant`     | variant     |                |
+| `icon-name`   | iconName    |                |
+| `icon-only`   | iconOnly    |                |
+| `disabled`    | disabled    |                |
+| `loading`     | loading     |                |
+| `zone`        | zone        |                |
+| `compactable` | compactable |                |
+
+### CSS Properties
+
+| Name                     | Default | Description                      |
+| ------------------------ | ------- | -------------------------------- |
+| `--button-color`         |         | Override button background color |
+| `--button-text-color`    |         | Override button text color       |
+| `--button-border-radius` |         | Override button border radius    |
+
+<hr/>
+
+## Exports
+
+| Kind                        | Name              | Declaration | Module                                  | Package |
+| --------------------------- | ----------------- | ----------- | --------------------------------------- | ------- |
+| `js`                        | `default`         | ActionItem  | src/components/action-bar/ActionItem.ts |         |
+| `custom-element-definition` | `btu-action-item` | ActionItem  | src/components/action-bar/ActionItem.ts |         |

package/docs/components/Dropdown.md

@@ -42,13 +42,13 @@
 
 ### Events
 
-| Name                         | Type                                               | Description                                                                   | Inherited From |
-| ---------------------------- | -------------------------------------------------- | ----------------------------------------------------------------------------- | -------------- |
-| `btu-dropdown-ready`         | `CustomEvent`                                      | Fired after first render and initialization                                   |                |
-| `btu-dropdown-show`          | `CustomEvent`                                      | Fired when the dropdown panel opens                                           |                |
-| `btu-dropdown-hide`          | `CustomEvent`                                      | Fired when the dropdown panel closes                                          |                |
-| `btu-dropdown-item-select`   | `CustomEvent<{label: string, selected: boolean}>`  | Fired when a menu item is activated (bubbles from btu-dropdown-item)          |                |
-| `btu-dropdown-item-favorite` | `CustomEvent<{label: string, favorited: boolean}>` | Fired when a menu item's favorite is toggled (bubbles from btu-dropdown-item) |                |
+| Name                         | Type                                                             | Description                                                                   | Inherited From |
+| ---------------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------- | -------------- |
+| `btu-dropdown-ready`         | `CustomEvent`                                                    | Fired after first render and initialization                                   |                |
+| `btu-dropdown-show`          | `CustomEvent`                                                    | Fired when the dropdown panel opens                                           |                |
+| `btu-dropdown-hide`          | `CustomEvent`                                                    | Fired when the dropdown panel closes                                          |                |
+| `btu-dropdown-item-select`   | `CustomEvent<{label: string, value: string, selected: boolean}>` | Fired when a menu item is activated (bubbles from btu-dropdown-item)          |                |
+| `btu-dropdown-item-favorite` | `CustomEvent<{label: string, favorited: boolean}>`               | Fired when a menu item's favorite is toggled (bubbles from btu-dropdown-item) |                |
 
 ### Attributes
 

package/docs/components/DropdownItem.md

@@ -23,9 +23,11 @@
 | `type`       |         | `'default' \| 'divider' \| 'subhead'` | `'default'` | Item type: 'default', 'divider', or 'subhead'. |                |
 | `iconSymbol` |         | `string`                              | `''`        | Lucide icon symbol.                            |                |
 | `shortcut`   |         | `string`                              | `''`        | Keyboard shortcut display text.                |                |
+| `value`      |         | `string`                              | `''`        | Optional data value associated with the item.  |                |
 | `disabled`   |         | `boolean`                             | `false`     | Whether the item is disabled.                  |                |
 | `selected`   |         | `boolean`                             | `false`     | Whether the item is selected/checked.          |                |
 | `favorited`  |         | `boolean`                             | `false`     | Whether the item is favorited.                 |                |
+| `error`      |         | `boolean`                             | `false`     | Whether the item has an error.                 |                |
 
 ### Methods
 
@@ -36,11 +38,11 @@
 
 ### Events
 
-| Name                         | Type                                               | Description                    | Inherited From |
-| ---------------------------- | -------------------------------------------------- | ------------------------------ | -------------- |
-| `btu-dropdown-item-ready`    | `CustomEvent`                                      | Fired after first render       |                |
-| `btu-dropdown-item-select`   | `CustomEvent<{label: string, selected: boolean}>`  | Fired when item is activated   |                |
-| `btu-dropdown-item-favorite` | `CustomEvent<{label: string, favorited: boolean}>` | Fired when favorite is toggled |                |
+| Name                         | Type                                                             | Description                    | Inherited From |
+| ---------------------------- | ---------------------------------------------------------------- | ------------------------------ | -------------- |
+| `btu-dropdown-item-ready`    | `CustomEvent`                                                    | Fired after first render       |                |
+| `btu-dropdown-item-select`   | `CustomEvent<{label: string, value: string, selected: boolean}>` | Fired when item is activated   |                |
+| `btu-dropdown-item-favorite` | `CustomEvent<{label: string, favorited: boolean}>`               | Fired when favorite is toggled |                |
 
 ### Attributes
 
@@ -50,9 +52,11 @@
 | `type`        | type       |                |
 | `icon-symbol` | iconSymbol |                |
 | `shortcut`    | shortcut   |                |
+| `value`       | value      |                |
 | `disabled`    | disabled   |                |
 | `selected`    | selected   |                |
 | `favorited`   | favorited  |                |
+| `error`       | error      |                |
 
 <hr/>
 

package/docs/components/DropdownMenu.md

@@ -10,10 +10,11 @@
 
 ### Mixins
 
-| Name                | Module                         | Package |
-| ------------------- | ------------------------------ | ------- |
-| `EventEmitterMixin` | /src/util/EventEmitterMixin.js |         |
-| `ReadyMixin`        | /src/util/ReadyMixin.js        |         |
+| Name                  | Module                           | Package |
+| --------------------- | -------------------------------- | ------- |
+| `RovingTabindexMixin` | /src/util/RovingTabindexMixin.js |         |
+| `EventEmitterMixin`   | /src/util/EventEmitterMixin.js   |         |
+| `ReadyMixin`          | /src/util/ReadyMixin.js          |         |
 
 ### Fields
 
@@ -31,14 +32,13 @@
 
 ### Methods
 
-| Name                    | Privacy | Description                                                     | Parameters                                                       | Return           | Inherited From |
-| ----------------------- | ------- | --------------------------------------------------------------- | ---------------------------------------------------------------- | ---------------- | -------------- |
-| `_configureItems`       | private | Configure all child items with menu-level settings              |                                                                  | `void`           |                |
-| `_getAllItems`          | private | Get all btu-dropdown-item children                              |                                                                  | `DropdownItem[]` |                |
-| `_getFocusableItems`    | private | Get only focusable items (default type, skip dividers/subheads) |                                                                  | `DropdownItem[]` |                |
-| `_getCurrentFocusIndex` | private | Find the current focused item index                             | `focusable: DropdownItem[]`                                      | `number`         |                |
-| `_findNextIndex`        | private | Find next index wrapping around, moving in direction (+1 or -1) | `focusable: DropdownItem[], current: number, direction: 1 \| -1` | `number`         |                |
-| `_handleTypeahead`      | private | Typeahead character matching with 500ms accumulation            | `char: string, focusable: DropdownItem[]`                        | `void`           |                |
+| Name                 | Privacy | Description                                                     | Parameters                                | Return           | Inherited From |
+| -------------------- | ------- | --------------------------------------------------------------- | ----------------------------------------- | ---------------- | -------------- |
+| `_getRovingTargets`  |         | Override: return menuitem elements from focusable items         |                                           | `HTMLElement[]`  |                |
+| `_configureItems`    | private | Configure all child items with menu-level settings              |                                           | `void`           |                |
+| `_getAllItems`       | private | Get all btu-dropdown-item children                              |                                           | `DropdownItem[]` |                |
+| `_getFocusableItems` | private | Get only focusable items (default type, skip dividers/subheads) |                                           | `DropdownItem[]` |                |
+| `_handleTypeahead`   | private | Typeahead character matching with 500ms accumulation            | `char: string, focusable: DropdownItem[]` | `void`           |                |
 
 ### Events