@brightspot/ui 1.6.0 → 1.8.0

package/dist/tailwind-plugin-dropdown.ts

@@ -0,0 +1,249 @@
+import plugin from 'tailwindcss/plugin'
+import type { CSSRuleObject } from 'tailwindcss/types/config'
+declare let module: any
+
+/**
+ * Dropdown menu component styling.
+ *
+ * Class Names:
+ *
+ *  btu-dropdown-panel - Panel container with popover positioning
+ *  btu-dropdown-item - Menu item row
+ *  btu-dropdown-item-selected - Selected/checked item highlight
+ *  btu-dropdown-item-disabled - Disabled item styling (no pointer-events: none)
+ *  btu-dropdown-divider - Horizontal separator between item groups
+ *  btu-dropdown-subhead - Group heading label
+ *  btu-dropdown-header - Menu header bar
+ *  btu-dropdown-checkbox - Checkbox indicator
+ *  btu-dropdown-favorite - Favorite star button
+ *  btu-dropdown-shortcut - Keyboard shortcut text
+ *  btu-dropdown-chevron - Trigger chevron icon
+ */
+
+module.exports = plugin(function ({ addComponents, config, theme }) {
+  const itemFontSize = config('theme.fontSize.sm')?.[0] ?? '0.875rem'
+  const itemLineHeight = config('theme.fontSize.sm')?.[1] ?? '1.25rem'
+  const subheadFontSize = config('theme.fontSize.xs')?.[0] ?? '0.75rem'
+
+  const components: CSSRuleObject = {
+    /* ─── Panel ─── */
+    '.btu-dropdown-panel': {
+      backgroundColor: 'var(--dropdown-panel-background, var(--btu-theme-white))',
+      border: '1px solid var(--dropdown-panel-border-color, oklch(var(--btu-theme-gray-200)))',
+      borderRadius: `var(--dropdown-panel-border-radius, ${theme('borderRadius.lg')})`,
+      boxShadow: theme('boxShadow.lg'),
+      padding: '0.25rem 0',
+      overflow: 'auto',
+      maxHeight: 'min(20rem, 50vh)',
+
+      /* High-contrast border */
+      ':root.is-moreContrast &': {
+        borderColor: 'var(--dropdown-panel-border-color, oklch(var(--btu-theme-gray-400)))',
+      },
+      '@media screen and (prefers-contrast: more) and (forced-colors: none)': {
+        ':root:not(.is-normalContrast) &': {
+          borderColor: 'var(--dropdown-panel-border-color, oklch(var(--btu-theme-gray-400)))',
+        },
+      },
+
+      /* Exit state — hidden */
+      opacity: '0',
+
+      /* Transitions with allow-discrete for display/overlay */
+      transition: `opacity 150ms ease`,
+      '@supports (transition-behavior: allow-discrete)': {
+        transition: `opacity 150ms ease, display 150ms allow-discrete, overlay 150ms allow-discrete`,
+      },
+
+      /* Reduced motion */
+      '@media (prefers-reduced-motion: reduce)': {
+        transition: 'opacity 0.01ms ease',
+        '@supports (transition-behavior: allow-discrete)': {
+          transition: 'opacity 0.01ms ease, display 0.01ms allow-discrete, overlay 0.01ms allow-discrete',
+        },
+      },
+    },
+    /* Entry state — visible (popover open) */
+    '.btu-dropdown-panel:popover-open': {
+      opacity: '1',
+    },
+    /* Starting style for entry animation */
+    '@starting-style': {
+      '.btu-dropdown-panel:popover-open': {
+        opacity: '0',
+      },
+    } as any,
+
+    /* ─── Header ─── */
+    '.btu-dropdown-header': {
+      display: 'flex',
+      alignItems: 'center',
+      padding: '0.5rem 0.75rem',
+      fontSize: subheadFontSize,
+      fontWeight: theme('fontWeight.semibold'),
+      color: 'oklch(var(--btu-theme-gray-900))',
+      borderBottom: '1px solid var(--dropdown-divider-color, oklch(var(--btu-theme-gray-200)))',
+      marginBottom: '0.25rem',
+    },
+
+    /* ─── Empty state ─── */
+    '.btu-dropdown-empty': {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '1rem',
+      fontSize: itemFontSize,
+      color: 'var(--dropdown-empty-color, oklch(var(--btu-theme-gray-400)))',
+    },
+
+    /* ─── Item ─── */
+    '.btu-dropdown-item': {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '0.5rem',
+      padding: '0.375rem 0.75rem',
+      fontSize: `var(--dropdown-item-font-size, ${itemFontSize})`,
+      lineHeight: itemLineHeight,
+      color: 'var(--dropdown-item-color, oklch(var(--btu-theme-gray-700)))',
+      backgroundColor: 'var(--dropdown-item-background, transparent)',
+      cursor: 'pointer',
+      userSelect: 'none',
+      outline: 'none',
+      whiteSpace: 'nowrap',
+
+      '&:hover': {
+        backgroundColor: 'var(--dropdown-item-hover-background, oklch(var(--btu-theme-gray-100)))',
+        color: 'var(--dropdown-item-hover-color, oklch(var(--btu-theme-gray-900)))',
+      },
+      '&:focus-visible': {
+        backgroundColor: 'var(--dropdown-item-hover-background, oklch(var(--btu-theme-gray-100)))',
+        color: 'var(--dropdown-item-hover-color, oklch(var(--btu-theme-gray-900)))',
+      },
+    },
+
+    '.btu-dropdown-item-selected': {
+      backgroundColor: 'var(--dropdown-item-selected-background, oklch(var(--btu-theme-primary-50)))',
+      color: 'var(--dropdown-item-selected-color, oklch(var(--btu-theme-primary-700)))',
+      '&:hover': {
+        backgroundColor: 'var(--dropdown-item-selected-background, oklch(var(--btu-theme-primary-50)))',
+        color: 'var(--dropdown-item-selected-color, oklch(var(--btu-theme-primary-700)))',
+      },
+      '&:focus-visible': {
+        backgroundColor: 'var(--dropdown-item-selected-background, oklch(var(--btu-theme-primary-50)))',
+        color: 'var(--dropdown-item-selected-color, oklch(var(--btu-theme-primary-700)))',
+      },
+    },
+
+    '.btu-dropdown-item-disabled': {
+      opacity: '0.5',
+      cursor: 'default',
+
+      ':root.is-moreContrast &': {
+        opacity: '0.4',
+      },
+      '@media screen and (prefers-contrast: more) and (forced-colors: none)': {
+        ':root:not(.is-normalContrast) &': {
+          opacity: '0.4',
+        },
+      },
+    },
+
+    /* ─── Checkbox indicator ─── */
+    '.btu-dropdown-checkbox': {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '1rem',
+      height: '1rem',
+      flexShrink: '0',
+      borderRadius: theme('borderRadius.sm'),
+      border: '1px solid oklch(var(--btu-theme-gray-300))',
+      backgroundColor: 'transparent',
+      color: 'transparent',
+    },
+    '.btu-dropdown-checkbox-checked': {
+      backgroundColor: 'oklch(var(--btu-theme-primary-600))',
+      borderColor: 'oklch(var(--btu-theme-primary-600))',
+      color: 'var(--btu-theme-white)',
+    },
+
+    /* ─── Divider ─── */
+    '.btu-dropdown-divider': {
+      borderTop: '1px solid var(--dropdown-divider-color, oklch(var(--btu-theme-gray-200)))',
+      margin: '0.25rem 0',
+    },
+
+    /* ─── Subhead ─── */
+    '.btu-dropdown-subhead': {
+      padding: '0.5rem 0.75rem 0.25rem',
+      fontSize: subheadFontSize,
+      fontWeight: theme('fontWeight.semibold'),
+      color: 'oklch(var(--btu-theme-gray-500))',
+      textTransform: 'uppercase',
+      letterSpacing: '0.05em',
+      lineHeight: '1rem',
+    },
+
+    /* ─── Favorite star ─── */
+    'button.btu-dropdown-favorite': {
+      flexShrink: '0',
+      marginLeft: 'auto',
+      color: 'oklch(var(--btu-theme-gray-400))',
+      '&:hover': {
+        color: 'oklch(var(--btu-theme-warning-500))',
+      },
+    },
+    'button.btu-dropdown-favorite-active': {
+      color: 'oklch(var(--btu-theme-warning-500))',
+    },
+
+    /* ─── Shortcut text ─── */
+    '.btu-dropdown-shortcut': {
+      marginLeft: 'auto',
+      fontSize: subheadFontSize,
+      color: 'oklch(var(--btu-theme-gray-400))',
+    },
+
+    /* ─── Disabled trigger ─── */
+    'btu-dropdown[disabled]': {
+      opacity: '0.5',
+      pointerEvents: 'none',
+    },
+
+    /* ─── Chevron ─── */
+    '.btu-dropdown-chevron': {
+      transition: 'transform 200ms ease',
+      flexShrink: '0',
+    },
+    /* Icon-only trigger with chevron: override square sizing so both icons fit */
+    '.btu-button-text-hidden:has(.btu-dropdown-chevron)': {
+      width: 'auto',
+      gap: '0.5rem',
+    },
+    'btu-dropdown[open] .btu-dropdown-chevron': {
+      transform: 'rotate(180deg)',
+    },
+
+    /* ─── Item icon container ─── */
+    '.btu-dropdown-item-icon': {
+      display: 'inline-flex',
+      flexShrink: '0',
+    },
+
+    /* ─── Item label ─── */
+    '.btu-dropdown-item-label': {
+      flex: '1',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    },
+
+    /* ─── Selected check mark (non-checkbox mode) ─── */
+    '.btu-dropdown-check': {
+      display: 'inline-flex',
+      flexShrink: '0',
+      color: 'oklch(var(--btu-theme-primary-600))',
+    },
+  }
+
+  addComponents(components)
+})

package/dist/tailwind-plugin-pagination.js

@@ -52,7 +52,7 @@ module.exports = plugin(function ({ addComponents, config }) {
             '& .btu-pagination-total': {
                 opacity: '0.5',
             },
-            '& .btu-pagination-controls > .btu-button': {
+            '& .btu-pagination-controls > btu-icon-button': {
                 opacity: '0.5',
             },
             '& .btu-pagination-controls > btu-circular-progress': {
@@ -112,41 +112,29 @@ module.exports = plugin(function ({ addComponents, config }) {
             marginLeft: 'auto',
             border: '1px solid oklch(var(--btu-theme-gray-300))',
             borderRadius: '0.5rem',
-            '& > :first-child': {
+            '& > btu-icon-button:first-of-type > .btu-button': {
                 borderTopLeftRadius: 'calc(0.5rem - 1px)',
                 borderBottomLeftRadius: 'calc(0.5rem - 1px)',
             },
-            '& > :last-child': {
+            '& > btu-icon-button:last-of-type > .btu-button': {
                 borderTopRightRadius: 'calc(0.5rem - 1px)',
                 borderBottomRightRadius: 'calc(0.5rem - 1px)',
             },
-            '& > :focus-visible': {
+            '& > btu-icon-button > .btu-button:focus-visible': {
                 zIndex: '1',
                 outline: 'none',
                 boxShadow: '0 0 0 1px oklch(var(--btu-theme-primary-400)), 0 0 0 4px oklch(var(--btu-theme-primary-100))',
                 borderRadius: 'calc(0.5rem - 1px)',
             },
-            '& > :focus-within': {
-                zIndex: '1',
-                outline: 'none',
-                boxShadow: '0 0 0 1px oklch(var(--btu-theme-primary-400)), 0 0 0 4px oklch(var(--btu-theme-primary-100))',
-                borderRadius: 'calc(0.5rem - 1px)',
-                '& :focus-visible': {
-                    outline: 'none',
-                    boxShadow: 'none',
-                },
-            },
         },
-        '.btu-pagination-controls > .btu-button': {
+        '.btu-pagination-controls > btu-icon-button > .btu-button': {
             '--button-border-radius': '0',
             '--button-color': 'var(--pagination-color-background, var(--btu-theme-white, #fff))',
+            '--button-text-color': 'var(--pagination-color-foreground, oklch(var(--btu-theme-gray-700)))',
             borderRight: '1px solid oklch(var(--btu-theme-gray-200))',
-            '&:last-child': {
-                borderRight: 'none',
-            },
-            '&:disabled': {
-                color: 'oklch(var(--btu-theme-gray-400))',
-            },
+        },
+        '.btu-pagination-controls > btu-icon-button:last-of-type > .btu-button': {
+            borderRight: 'none',
         },
         '.btu-pagination-jumper': {
             display: 'inline-flex',

package/dist/tailwind-plugin-pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind-plugin-pagination.js","sourceRoot":"","sources":["../src/tailwind-plugin-pagination.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tailwind-plugin-pagination.js","sourceRoot":"","sources":["../src/tailwind-plugin-pagination.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAGvC;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,gDAAgD;AAChD,MAAM,cAAc,GAAG,wPAAwP,CAAA;AAE/Q,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,EAAE,aAAa,EAAE,MAAM,EAAE;IACzD,MAAM,WAAW,GAAG,MAAM,CAAC,mBAAmB,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,UAAU,CAAA;IAClE,MAAM,WAAW,GAAG,MAAM,CAAC,mBAAmB,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,SAAS,CAAA;IAEjE,aAAa,CAAC;QACZ,iBAAiB,EAAE;YACjB,OAAO,EAAE,aAAa;YACtB,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,SAAS;YACd,QAAQ,EAAE,WAAW;YACrB,KAAK,EAAE,sEAAsE;SAC9E;QAED,wBAAwB,EAAE;YACxB,OAAO,EAAE,MAAM;SAChB;QAED,0BAA0B,EAAE;YAC1B,OAAO,EAAE,KAAK;YACd,aAAa,EAAE,MAAM;SACtB;QAED,yBAAyB,EAAE;YACzB,aAAa,EAAE,MAAM;YACrB,gCAAgC,EAAE;gBAChC,OAAO,EAAE,KAAK;aACf;YACD,yBAAyB,EAAE;gBACzB,OAAO,EAAE,KAAK;aACf;YACD,8CAA8C,EAAE;gBAC9C,OAAO,EAAE,KAAK;aACf;YACD,oDAAoD,EAAE;gBACpD,QAAQ,EAAE,UAAU;gBACpB,IAAI,EAAE,KAAK;gBACX,GAAG,EAAE,KAAK;gBACV,SAAS,EAAE,uBAAuB;gBAClC,MAAM,EAAE,GAAG;aACZ;SACF;QAED,qBAAqB,EAAE;YACrB,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,SAAS;YACd,KAAK,EAAE,MAAM;SACd;QAED,8BAA8B,EAAE;YAC9B,OAAO,EAAE,aAAa;YACtB,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,QAAQ;YACb,SAAS,EAAE;gBACT,OAAO,EAAE,MAAM;aAChB;SACF;QAED,wBAAwB,EAAE;YACxB,UAAU,EAAE,MAAM;YAClB,UAAU,EAAE,kEAAkE;YAC9E,MAAM,EAAE,4CAA4C;YACpD,YAAY,EAAE,QAAQ;YACtB,OAAO,EAAE,kCAAkC;YAC3C,QAAQ,EAAE,WAAW;YACrB,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,SAAS;YACjB,eAAe,EAAE,cAAc;YAC/B,gBAAgB,EAAE,WAAW;YAC7B,kBAAkB,EAAE,qBAAqB;YACzC,cAAc,EAAE,MAAM;YACtB,iBAAiB,EAAE;gBACjB,OAAO,EAAE,+CAA+C;gBACxD,aAAa,EAAE,MAAM;aACtB;SACF;QAED,uBAAuB,EAAE;YACvB,QAAQ,EAAE,WAAW;YACrB,KAAK,EAAE,kCAAkC;YACzC,UAAU,EAAE,KAAK;YACjB,UAAU,EAAE,QAAQ;SACrB;QAED,yEAAyE;QACzE,4DAA4D,EAAE;YAC5D,UAAU,EAAE,MAAM;SACnB;QAED,0BAA0B,EAAE;YAC1B,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,aAAa;YACtB,UAAU,EAAE,QAAQ;YACpB,UAAU,EAAE,MAAM;YAClB,MAAM,EAAE,4CAA4C;YACpD,YAAY,EAAE,QAAQ;YACtB,iDAAiD,EAAE;gBACjD,mBAAmB,EAAE,oBAAoB;gBACzC,sBAAsB,EAAE,oBAAoB;aAC7C;YACD,gDAAgD,EAAE;gBAChD,oBAAoB,EAAE,oBAAoB;gBAC1C,uBAAuB,EAAE,oBAAoB;aAC9C;YACD,iDAAiD,EAAE;gBACjD,MAAM,EAAE,GAAG;gBACX,OAAO,EAAE,MAAM;gBACf,SAAS,EAAE,8FAA8F;gBACzG,YAAY,EAAE,oBAAoB;aACnC;SACF;QAED,0DAA0D,EAAE;YAC1D,wBAAwB,EAAE,GAAG;YAC7B,gBAAgB,EAAE,kEAAkE;YACpF,qBAAqB,EAAE,sEAAsE;YAC7F,WAAW,EAAE,4CAA4C;SAC1D;QAED,uEAAuE,EAAE;YACvE,WAAW,EAAE,MAAM;SACpB;QAED,wBAAwB,EAAE;YACxB,OAAO,EAAE,aAAa;YACtB,UAAU,EAAE,QAAQ;YACpB,UAAU,EAAE,kEAAkE;YAC9E,SAAS,EAAE;gBACT,OAAO,EAAE,MAAM;aAChB;YACD,eAAe,EAAE;gBACf,WAAW,EAAE,4CAA4C;aAC1D;SACF;KACF,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/dist/tailwind-plugin-pagination.ts

@@ -60,7 +60,7 @@ module.exports = plugin(function ({ addComponents, config }) {
       '& .btu-pagination-total': {
         opacity: '0.5',
       },
-      '& .btu-pagination-controls > .btu-button': {
+      '& .btu-pagination-controls > btu-icon-button': {
         opacity: '0.5',
       },
       '& .btu-pagination-controls > btu-circular-progress': {
@@ -126,42 +126,31 @@ module.exports = plugin(function ({ addComponents, config }) {
       marginLeft: 'auto',
       border: '1px solid oklch(var(--btu-theme-gray-300))',
       borderRadius: '0.5rem',
-      '& > :first-child': {
+      '& > btu-icon-button:first-of-type > .btu-button': {
         borderTopLeftRadius: 'calc(0.5rem - 1px)',
         borderBottomLeftRadius: 'calc(0.5rem - 1px)',
       },
-      '& > :last-child': {
+      '& > btu-icon-button:last-of-type > .btu-button': {
         borderTopRightRadius: 'calc(0.5rem - 1px)',
         borderBottomRightRadius: 'calc(0.5rem - 1px)',
       },
-      '& > :focus-visible': {
+      '& > btu-icon-button > .btu-button:focus-visible': {
         zIndex: '1',
         outline: 'none',
         boxShadow: '0 0 0 1px oklch(var(--btu-theme-primary-400)), 0 0 0 4px oklch(var(--btu-theme-primary-100))',
         borderRadius: 'calc(0.5rem - 1px)',
       },
-      '& > :focus-within': {
-        zIndex: '1',
-        outline: 'none',
-        boxShadow: '0 0 0 1px oklch(var(--btu-theme-primary-400)), 0 0 0 4px oklch(var(--btu-theme-primary-100))',
-        borderRadius: 'calc(0.5rem - 1px)',
-        '& :focus-visible': {
-          outline: 'none',
-          boxShadow: 'none',
-        },
-      },
     },
 
-    '.btu-pagination-controls > .btu-button': {
+    '.btu-pagination-controls > btu-icon-button > .btu-button': {
       '--button-border-radius': '0',
       '--button-color': 'var(--pagination-color-background, var(--btu-theme-white, #fff))',
+      '--button-text-color': 'var(--pagination-color-foreground, oklch(var(--btu-theme-gray-700)))',
       borderRight: '1px solid oklch(var(--btu-theme-gray-200))',
-      '&:last-child': {
-        borderRight: 'none',
-      },
-      '&:disabled': {
-        color: 'oklch(var(--btu-theme-gray-400))',
-      },
+    },
+
+    '.btu-pagination-controls > btu-icon-button:last-of-type > .btu-button': {
+      borderRight: 'none',
     },
 
     '.btu-pagination-jumper': {

package/dist/util/EventEmitterMixin.d.ts

@@ -49,6 +49,23 @@ export interface CustomEventMap {
         page: number;
         pageSize: number;
     }>;
+    'btu-icon-button-ready': CustomEvent<unknown>;
+    'btu-icon-button-click': CustomEvent<{
+        name: string | undefined;
+    }>;
+    'btu-dropdown-ready': CustomEvent<unknown>;
+    'btu-dropdown-show': CustomEvent<unknown>;
+    'btu-dropdown-hide': CustomEvent<unknown>;
+    'btu-dropdown-menu-ready': CustomEvent<unknown>;
+    'btu-dropdown-item-ready': CustomEvent<unknown>;
+    'btu-dropdown-item-select': CustomEvent<{
+        label: string;
+        selected: boolean;
+    }>;
+    'btu-dropdown-item-favorite': CustomEvent<{
+        label: string;
+        favorited: boolean;
+    }>;
 }
 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;AAwDhC;;;;;;;;;;;;;;;;;;;;;;;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;AAiEhC;;;;;;;;;;;;;;;;;;;;;;;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/docs/components/Avatar.md

@@ -0,0 +1,62 @@
+# `src/components/avatar/Avatar.ts`:
+
+## class: `Avatar`, `btu-avatar`
+
+### 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 |
+| ---------- | ------- | ----------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
+| `src`      |         | `string`                                        | `''`    | Image source URL                                                                                                                                                                                                 |                |
+| `alt`      |         | `string`                                        | `''`    | Alt text for the image                                                                                                                                                                                           |                |
+| `fallback` |         | `string`                                        | `''`    | Fallback text (typically user initials)                                                                                                                                                                          |                |
+| `size`     |         | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'` | `'md'`  | Size variant.
- 'xs': Extra small (1.5rem)
- 'sm': Small (2.25rem)
- 'md': Medium (2.5rem) - default
- 'lg': Large (3rem)
- 'xl': Extra large (3.5rem)
- 'xxl': Extra extra large (4rem) |                |
+
+### Events
+
+| Name                      | Type                                       | Description                                 | Inherited From |
+| ------------------------- | ------------------------------------------ | ------------------------------------------- | -------------- |
+| `btu-avatar-ready`        | `CustomEvent`                              | Fired after first render and initialization |                |
+| `btu-avatar-image-loaded` | `CustomEvent<{src: string}>`               | Fired when image successfully loads         |                |
+| `btu-avatar-image-error`  | `CustomEvent<{src: string, error: Event}>` | Fired when image fails to load              |                |
+
+### Attributes
+
+| Name       | Field    | Inherited From |
+| ---------- | -------- | -------------- |
+| `src`      | src      |                |
+| `alt`      | alt      |                |
+| `fallback` | fallback |                |
+| `size`     | size     |                |
+
+### CSS Properties
+
+| Name                       | Default | Description                                     |
+| -------------------------- | ------- | ----------------------------------------------- |
+| `--avatar-size`            |         | Custom size (overrides size prop)               |
+| `--avatar-bg-color`        |         | Fallback background color (default: purple-600) |
+| `--avatar-corner-rounding` |         | How rounded is the avatar (default: circle)     |
+| `--avatar-ring-color`      |         | Optional ring border color                      |
+| `--avatar-ring-width`      |         | Ring border width (default: 2px)                |
+
+<hr/>
+
+## Exports
+
+| Kind                        | Name         | Declaration | Module                          | Package |
+| --------------------------- | ------------ | ----------- | ------------------------------- | ------- |
+| `js`                        | `default`    | Avatar      | src/components/avatar/Avatar.ts |         |
+| `custom-element-definition` | `btu-avatar` | Avatar      | src/components/avatar/Avatar.ts |         |

package/docs/components/AvatarGroup.md

@@ -0,0 +1,52 @@
+# `src/components/avatar/AvatarGroup.ts`:
+
+## class: `AvatarGroup`, `btu-avatar-group`
+
+### Superclass
+
+| Name         | Module | Package |
+| ------------ | ------ | ------- |
+| `LitElement` |        | lit     |
+
+### Mixins
+
+| Name                | Module                         | Package |
+| ------------------- | ------------------------------ | ------- |
+| `EventEmitterMixin` | /src/util/EventEmitterMixin.js |         |
+| `ReadyMixin`        | /src/util/ReadyMixin.js        |         |
+
+### Fields
+
+| Name   | Privacy | Type                   | Default | Description                                                         | Inherited From |
+| ------ | ------- | ---------------------- | ------- | ------------------------------------------------------------------- | -------------- |
+| `max`  |         | `number \| undefined`  |         | Maximum number of visible avatars. Remaining avatars shown as "+N"  |                |
+| `size` |         | `'xs' \| 'sm' \| 'md'` | `'md'`  | Size variant for all child avatars (unless individually overridden) |                |
+
+### Methods
+
+| Name             | Privacy | Description                                                                                                                 | Parameters | Return | Inherited From |
+| ---------------- | ------- | --------------------------------------------------------------------------------------------------------------------------- | ---------- | ------ | -------------- |
+| `processAvatars` |         | Process all avatar children: apply size, handle overflow
Call this method when avatars are dynamically added or removed |            | `void` |                |
+
+### Events
+
+| Name                        | Type                            | Description                                    | Inherited From |
+| --------------------------- | ------------------------------- | ---------------------------------------------- | -------------- |
+| `btu-avatar-group-ready`    | `CustomEvent`                   | Fired after first render and initialization    |                |
+| `btu-avatar-group-overflow` | `CustomEvent<{hidden: number}>` | Fired when avatars are hidden due to max limit |                |
+
+### Attributes
+
+| Name   | Field | Inherited From |
+| ------ | ----- | -------------- |
+| `max`  | max   |                |
+| `size` | size  |                |
+
+<hr/>
+
+## Exports
+
+| Kind                        | Name               | Declaration | Module                               | Package |
+| --------------------------- | ------------------ | ----------- | ------------------------------------ | ------- |
+| `js`                        | `default`          | AvatarGroup | src/components/avatar/AvatarGroup.ts |         |
+| `custom-element-definition` | `btu-avatar-group` | AvatarGroup | src/components/avatar/AvatarGroup.ts |         |

package/docs/components/Badge.md

@@ -0,0 +1,58 @@
+# `src/components/badge/Badge.ts`:
+
+## class: `Badge`, `btu-badge`
+
+### Superclass
+
+| Name         | Module | Package |
+| ------------ | ------ | ------- |
+| `LitElement` |        | lit     |
+
+### Mixins
+
+| Name                | Module                         | Package |
+| ------------------- | ------------------------------ | ------- |
+| `EventEmitterMixin` | /src/util/EventEmitterMixin.js |         |
+| `ReadyMixin`        | /src/util/ReadyMixin.js        |         |
+
+### Fields
+
+| Name      | Privacy | Type                                                       | Default  | Description                                                                                                                                                                                                                       | Inherited From |
+| --------- | ------- | ---------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
+| `variant` |         | `'info' \| 'primary' \| 'error' \| 'success' \| 'warning'` | `'info'` | Style of the badge.
- 'info': Informational (default)
- 'primary': Primary action or emphasis
- 'error': Error or danger state
- 'success': Success or completion state
- 'warning': Warning or caution state |                |
+| `dot`     |         | `boolean`                                                  | `false`  | Should a dot be displayed before the label?                                                                                                                                                                                       |                |
+| `size`    |         | `string`                                                   | `'sm'`   | Size variant.
- 'sm': Small (default)
- 'md': Medium
- 'lg': Large                                                                                                                                                    |                |
+
+### Events
+
+| Name              | Type          | Description                                 | Inherited From |
+| ----------------- | ------------- | ------------------------------------------- | -------------- |
+| `btu-badge-ready` | `CustomEvent` | Fired after first render and initialization |                |
+
+### Attributes
+
+| Name      | Field   | Inherited From |
+| --------- | ------- | -------------- |
+| `variant` | variant |                |
+| `dot`     | dot     |                |
+| `size`    | size    |                |
+
+### CSS Properties
+
+| Name                       | Default | Description                                                  |
+| -------------------------- | ------- | ------------------------------------------------------------ |
+| `--badge-color-foreground` |         | Text color (overrides theme color)                           |
+| `--badge-color-background` |         | Background color (overrides theme color)                     |
+| `--badge-radius-size`      |         | Border radius size (overrides shape default, default: 999px) |
+| `--badge-px`               |         | Horizontal padding (overrides size default)                  |
+| `--badge-py`               |         | Vertical padding (overrides size default)                    |
+| `--badge-dot-size`         |         | Size of the dot affordance (default: 6px)                    |
+
+<hr/>
+
+## Exports
+
+| Kind                        | Name        | Declaration | Module                        | Package |
+| --------------------------- | ----------- | ----------- | ----------------------------- | ------- |
+| `js`                        | `default`   | Badge       | src/components/badge/Badge.ts |         |
+| `custom-element-definition` | `btu-badge` | Badge       | src/components/badge/Badge.ts |         |