@brightspot/ui 1.6.0 → 1.7.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/util/EventEmitterMixin.d.ts

@@ -49,6 +49,19 @@ export interface CustomEventMap {
         page: number;
         pageSize: number;
     }>;
+    '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":"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;AACxD,KAAK,iBAAiB,CAAC,CAAC,IAAI,CAAC,SAAS,WAAW,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;AAEtE;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,uBAAuB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC7C,0BAA0B,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAChD,mBAAmB,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,KAAK,CAAA;KAAE,CAAC,CAAA;IAClD,kBAAkB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IACxC,yBAAyB,EAAE,WAAW,CAAC;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACvD,wBAAwB,EAAE,WAAW,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,KAAK,CAAA;KAAE,CAAC,CAAA;IACpE,wBAAwB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC9C,2BAA2B,EAAE,WAAW,CAAC;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IAC5D,iBAAiB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IACvC,sBAAsB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC5C,qBAAqB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC3C,gBAAgB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IACtC,oBAAoB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC1C,uBAAuB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC7C,kBAAkB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IACxC,kBAAkB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IACxC,kBAAkB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IACxC,kBAAkB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IACxC,kBAAkB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IACxC,6BAA6B,EAAE,WAAW,CAAC;QAAE,SAAS,EAAE,OAAO,CAAA;KAAE,CAAC,CAAA;IAClE,+BAA+B,EAAE,WAAW,CAAC;QAAE,UAAU,EAAE,OAAO,CAAA;KAAE,CAAC,CAAA;IACrE,sBAAsB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC5C,uBAAuB,EAAE,WAAW,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACxE,iCAAiC,EAAE,WAAW,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CACnF;AAED,UAAU,gBAAiB,SAAQ,mBAAmB,EAAE,cAAc;CAAG;AAEzE;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,0BAA0B;IAC7C,IAAI,EAAE,CAAC,CAAC,SAAS,MAAM,cAAc,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAA;IACtG,gBAAgB,CAAC,CAAC,SAAS,MAAM,gBAAgB,EAC/C,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,IAAI,EAC9D,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI;IACP,mBAAmB,CAAC,CAAC,SAAS,MAAM,gBAAgB,EAClD,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,IAAI,EAC9D,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI;CACR;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAAE,YAAY,CAAC,KAqD/C,WAAW,CAAC,0BAA0B,CAAC,GAAG,CAC5E,CAAA"}
+{"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;AA+DhC;;;;;;;;;;;;;;;;;;;;;;;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 |         |

package/docs/components/CircularProgress.md

@@ -0,0 +1,55 @@
+# `src/components/circular-progress/CircularProgress.ts`:
+
+## class: `CircularProgress`, `btu-circular-progress`
+
+### Superclass
+
+| Name         | Module | Package |
+| ------------ | ------ | ------- |
+| `LitElement` |        | lit     |
+
+### Mixins
+
+| Name                | Module                         | Package |
+| ------------------- | ------------------------------ | ------- |
+| `ProgressMixin`     | /src/util/ProgressMixin.js     |         |
+| `EventEmitterMixin` | /src/util/EventEmitterMixin.js |         |
+| `ReadyMixin`        | /src/util/ReadyMixin.js        |         |
+
+### Fields
+
+| Name            | Privacy | Type                   | Default | Description                                                                                                                                 | Inherited From |
+| --------------- | ------- | ---------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
+| `indeterminate` |         | `boolean`              | `true`  | Whether the progress indicator is indeterminate (animated spinner).
When false, shows determinate progress based on the progress value. |                |
+| `size`          |         | `'sm' \| 'md' \| 'lg'` | `'sm'`  | Size variant.
- 'sm': Small (16px) - default
- 'md': Medium (32px)
- 'lg': Large (48px)                                         |                |
+
+### Events
+
+| Name                    | Type          | Description                                 | Inherited From |
+| ----------------------- | ------------- | ------------------------------------------- | -------------- |
+| `btu-progress-ready`    | `CustomEvent` | Fired after first render and initialization |                |
+| `btu-progress-complete` | `CustomEvent` | Fired when determinate progress reaches 100 |                |
+
+### Attributes
+
+| Name            | Field         | Inherited From |
+| --------------- | ------------- | -------------- |
+| `indeterminate` | indeterminate |                |
+| `size`          | size          |                |
+
+### CSS Properties
+
+| Name               | Default | Description                                             |
+| ------------------ | ------- | ------------------------------------------------------- |
+| `--progress-color` |         | Custom progress indicator color (overrides theme color) |
+| `--track-color`    |         | Track/background color (overrides default gray-100)     |
+| `--progress-size`  |         | Custom size in pixels (overrides size preset)           |
+
+<hr/>
+
+## Exports
+
+| Kind                        | Name                    | Declaration      | Module                                               | Package |
+| --------------------------- | ----------------------- | ---------------- | ---------------------------------------------------- | ------- |
+| `js`                        | `default`               | CircularProgress | src/components/circular-progress/CircularProgress.ts |         |
+| `custom-element-definition` | `btu-circular-progress` | CircularProgress | src/components/circular-progress/CircularProgress.ts |         |

package/docs/components/CopyToClipboard.md

@@ -0,0 +1,54 @@
+# `src/components/copy-to-clipboard/CopyToClipboard.ts`:
+
+## class: `CopyToClipboard`, `btu-copy-to-clipboard`
+
+### Superclass
+
+| Name         | Module | Package |
+| ------------ | ------ | ------- |
+| `LitElement` |        | lit     |
+
+### Mixins
+
+| Name                   | Module                            | Package |
+| ---------------------- | --------------------------------- | ------- |
+| `ClipboardMixin`       | /src/util/ClipboardMixin.js       |         |
+| `ComponentStatesMixin` | /src/util/ComponentStatesMixin.js |         |
+| `EventEmitterMixin`    | /src/util/EventEmitterMixin.js    |         |
+| `ReadyMixin`           | /src/util/ReadyMixin.js           |         |
+
+### Fields
+
+| Name            | Privacy | Type                  | Default | Description                                                                   | Inherited From |
+| --------------- | ------- | --------------------- | ------- | ----------------------------------------------------------------------------- | -------------- |
+| `copydata`      |         | `string \| undefined` |         | The text to be copied to the system clipboard.                                |                |
+| `buttonClasses` |         | `string \| undefined` |         | Custom CSS classes for the button. If provided, replaces the default classes. |                |
+
+### Methods
+
+| Name   | Privacy | Description                                                                                            | Parameters | Return | Inherited From |
+| ------ | ------- | ------------------------------------------------------------------------------------------------------ | ---------- | ------ | -------------- |
+| `copy` |         | Copies the copydata to the system clipboard.
Displays a success state for 3 seconds after copying. |            |        |                |
+
+### Events
+
+| Name                   | Type          | Description                                         | Inherited From |
+| ---------------------- | ------------- | --------------------------------------------------- | -------------- |
+| `btu-clipboard-ready`  | `CustomEvent` | Fired after first render and initialization         |                |
+| `btu-clipboard-copied` | `CustomEvent` | Fired when text is successfully copied to clipboard |                |
+
+### Attributes
+
+| Name            | Field         | Inherited From |
+| --------------- | ------------- | -------------- |
+| `copydata`      | copydata      |                |
+| `buttonClasses` | buttonClasses |                |
+
+<hr/>
+
+## Exports
+
+| Kind                        | Name                    | Declaration     | Module                                              | Package |
+| --------------------------- | ----------------------- | --------------- | --------------------------------------------------- | ------- |
+| `js`                        | `default`               | CopyToClipboard | src/components/copy-to-clipboard/CopyToClipboard.ts |         |
+| `custom-element-definition` | `btu-copy-to-clipboard` | CopyToClipboard | src/components/copy-to-clipboard/CopyToClipboard.ts |         |