@brightspot/ui 1.6.0 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (82) hide show
  1. package/dist/components/dropdown/Dropdown.d.ts +172 -0
  2. package/dist/components/dropdown/Dropdown.d.ts.map +1 -0
  3. package/dist/components/dropdown/Dropdown.js +407 -0
  4. package/dist/components/dropdown/Dropdown.js.map +1 -0
  5. package/dist/components/dropdown/DropdownItem.d.ts +108 -0
  6. package/dist/components/dropdown/DropdownItem.d.ts.map +1 -0
  7. package/dist/components/dropdown/DropdownItem.js +210 -0
  8. package/dist/components/dropdown/DropdownItem.js.map +1 -0
  9. package/dist/components/dropdown/DropdownMenu.d.ts +117 -0
  10. package/dist/components/dropdown/DropdownMenu.d.ts.map +1 -0
  11. package/dist/components/dropdown/DropdownMenu.js +295 -0
  12. package/dist/components/dropdown/DropdownMenu.js.map +1 -0
  13. package/dist/custom-elements.json +1097 -101
  14. package/dist/storybook/assets/Avatar.stories-BAaSlDF7.js +213 -0
  15. package/dist/storybook/assets/{AvatarGroup.stories-BBkQuFKk.js → AvatarGroup.stories-CgoDB4N4.js} +1 -1
  16. package/dist/storybook/assets/{Badge.stories-mFZsls7i.js → Badge.stories-uexxdmo6.js} +3 -3
  17. package/dist/storybook/assets/{Button.stories-CAWX17L1.js → Button.stories-T9UJUPHI.js} +1 -1
  18. package/dist/storybook/assets/{CircularProgress.stories-DBVt4Cg2.js → CircularProgress.stories-DW-VJA5j.js} +6 -6
  19. package/dist/storybook/assets/{ClipboardMixin.stories-BH9E-OI6.js → ClipboardMixin.stories-DzU4vxu5.js} +1 -1
  20. package/dist/storybook/assets/{Color-6BZIO3FS-CVnTzq2p.js → Color-6BZIO3FS-DRk2xjoN.js} +1 -1
  21. package/dist/storybook/assets/{Colors.stories-BFYmP0LL.js → Colors.stories-_UPdvuhY.js} +1 -1
  22. package/dist/storybook/assets/{ComponentStatesMixin-Cu7YXkU8.js → ComponentStatesMixin-BIu5SKeV.js} +1 -1
  23. package/dist/storybook/assets/{ComponentStatesMixin.stories-CAvyYt0H.js → ComponentStatesMixin.stories-C0FLaqLu.js} +1 -1
  24. package/dist/storybook/assets/{CopyToClipboard.stories-DbJZsp_L.js → CopyToClipboard.stories-D31zoUVI.js} +1 -1
  25. package/dist/storybook/assets/{Debounce.stories-BiFiH1K9.js → Debounce.stories-CgPPl5Ee.js} +1 -1
  26. package/dist/storybook/assets/{DocsRenderer-LL677BLK-Bq6G4eeC.js → DocsRenderer-LL677BLK-iwiwOzX9.js} +6 -6
  27. package/dist/storybook/assets/Dropdown.stories-CDcl6rmG.js +697 -0
  28. package/dist/storybook/assets/{Events.stories-BsDBxh8_.js → Events.stories-DS6UC9dZ.js} +1 -1
  29. package/dist/storybook/assets/{Heading.stories-zGzWgHVO.js → Heading.stories-CAQfEGE2.js} +1 -1
  30. package/dist/storybook/assets/{Icon.stories-B4T6sSwf.js → Icon.stories-C7msWlHs.js} +11 -11
  31. package/dist/storybook/assets/{LinearProgress.stories-qzqmUUwY.js → LinearProgress.stories-DBGJ5a2-.js} +7 -7
  32. package/dist/storybook/assets/{Pagination.stories-B6Q-7taJ.js → Pagination.stories-C58bGOdf.js} +1 -1
  33. package/dist/storybook/assets/{Popover.stories-CGkU0SGv.js → Popover.stories-C9zU0sEX.js} +5 -5
  34. package/dist/storybook/assets/{ReadyMixin-3YCzoG6W.js → ReadyMixin-qf8SAjMu.js} +1 -1
  35. package/dist/storybook/assets/{Rtc.stories-Y1MYTWAt.js → Rtc.stories-k9tKHNhD.js} +1 -1
  36. package/dist/storybook/assets/{ScrollShadow.stories-B9kSpLT1.js → ScrollShadow.stories-Bp42zyLH.js} +1 -1
  37. package/dist/storybook/assets/{Throttle.stories-BgvLDrS3.js → Throttle.stories-B5YU-Nms.js} +1 -1
  38. package/dist/storybook/assets/Tooltip.stories-COQcvOnL.js +143 -0
  39. package/dist/storybook/assets/{Widget.stories--JpqVyJe.js → Widget.stories-D3Sq5-_A.js} +13 -13
  40. package/dist/storybook/assets/{WithTooltip-65CFNBJE-DNbD9hAX.js → WithTooltip-65CFNBJE-Cox81aM_.js} +1 -1
  41. package/dist/storybook/assets/{formatter-EIJCOSYU-Cy8KIxab.js → formatter-EIJCOSYU-3ErcoV9q.js} +1 -1
  42. package/dist/storybook/assets/if-defined-Bv2_qPJg.js +1 -0
  43. package/dist/storybook/assets/{iframe-Dz6CxatW.js → iframe-CM6gBkqA.js} +152 -152
  44. package/dist/storybook/assets/{iframe-DiT9Iz2T.css → iframe-D3r2Ciu8.css} +1 -1
  45. package/dist/storybook/assets/{index-CebChkmF.js → index-iwfnMgqg.js} +1 -1
  46. package/dist/storybook/assets/{onFind.stories-nHDImx0x.js → onFind.stories-CDtoTN6S.js} +1 -1
  47. package/dist/storybook/assets/{onRemove.stories-CBxYVPwd.js → onRemove.stories-CSTeFCLU.js} +1 -1
  48. package/dist/storybook/assets/{onVisible.stories-D4Qewc9Y.js → onVisible.stories-C-yiw9n4.js} +1 -1
  49. package/dist/storybook/assets/{style-map-BgW9piaW.js → style-map-BJGdSb_D.js} +1 -1
  50. package/dist/storybook/assets/{syntaxhighlighter-ED5Y7EFY-CROW1475.js → syntaxhighlighter-ED5Y7EFY-BEudYlVi.js} +1 -1
  51. package/dist/storybook/iframe.html +2 -2
  52. package/dist/storybook/index.json +1 -1
  53. package/dist/storybook/project.json +1 -1
  54. package/dist/tailwind-plugin-button.js +10 -0
  55. package/dist/tailwind-plugin-button.js.map +1 -1
  56. package/dist/tailwind-plugin-button.ts +10 -0
  57. package/dist/tailwind-plugin-dropdown.d.ts +2 -0
  58. package/dist/tailwind-plugin-dropdown.d.ts.map +1 -0
  59. package/dist/tailwind-plugin-dropdown.js +223 -0
  60. package/dist/tailwind-plugin-dropdown.js.map +1 -0
  61. package/dist/tailwind-plugin-dropdown.ts +249 -0
  62. package/dist/util/EventEmitterMixin.d.ts +13 -0
  63. package/dist/util/EventEmitterMixin.d.ts.map +1 -1
  64. package/dist/util/EventEmitterMixin.js.map +1 -1
  65. package/docs/components/Avatar.md +62 -0
  66. package/docs/components/AvatarGroup.md +52 -0
  67. package/docs/components/Badge.md +58 -0
  68. package/docs/components/CircularProgress.md +55 -0
  69. package/docs/components/CopyToClipboard.md +54 -0
  70. package/docs/components/Dropdown.md +100 -0
  71. package/docs/components/DropdownItem.md +64 -0
  72. package/docs/components/DropdownMenu.md +81 -0
  73. package/docs/components/Icon.md +61 -0
  74. package/docs/components/LinearProgress.md +40 -0
  75. package/docs/components/Pagination.md +95 -0
  76. package/docs/components/Popover.md +71 -0
  77. package/docs/components/README.md +24 -0
  78. package/docs/components/Widget.md +79 -0
  79. package/package.json +3 -2
  80. package/dist/storybook/assets/Avatar.stories-CafEcy4T.js +0 -214
  81. package/dist/storybook/assets/Tooltip.stories-POo1M-ew.js +0 -143
  82. package/dist/storybook/assets/if-defined-CngSGyRu.js +0 -1
package/docs/components/Dropdown.md ADDED
@@ -0,0 +1,100 @@
1
+ # `src/components/dropdown/Dropdown.ts`:
2
+
3
+ ## class: `Dropdown`, `btu-dropdown`
4
+
5
+ ### Superclass
6
+
7
+ | Name | Module | Package |
8
+ | ------------ | ------ | ------- |
9
+ | `LitElement` | | lit |
10
+
11
+ ### Mixins
12
+
13
+ | Name | Module | Package |
14
+ | ------------------- | ------------------------------ | ------- |
15
+ | `TooltipMixin` | /src/util/TooltipMixin.js | |
16
+ | `EventEmitterMixin` | /src/util/EventEmitterMixin.js | |
17
+ | `ReadyMixin` | /src/util/ReadyMixin.js | |
18
+
19
+ ### Fields
20
+
21
+ | Name | Privacy | Type | Default | Description | Inherited From |
22
+ | ------------------ | ------- | ------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
23
+ | `label` | | `string` | `''` | Trigger button text. | |
24
+ | `open` | | `boolean` | `false` | Panel visibility state. Can be set programmatically (e.g., for tour UIs)
— syncs to \`showPopover()\`/\`hidePopover()\` in \`updated()\`. | |
25
+ | `placement` | | `Placement` | `'bottom-start'` | Panel placement: 'bottom-start', 'bottom-end', 'top-start', 'top-end'. | |
26
+ | `size` | | `Size` | `'medium'` | Button size: 'small', 'medium', 'large'. | |
27
+ | `disabled` | | `boolean` | `false` | Prevents opening. | |
28
+ | `variant` | | `Variant` | `'secondary'` | Button variant: 'primary', 'secondary', 'tertiary', 'primary-clear', 'secondary-clear', 'tertiary-clear'. | |
29
+ | `iconSymbol` | | `string` | `''` | Lucide icon symbol for the trigger. | |
30
+ | `iconPosition` | | `'leading' \| 'trailing'` | `'leading'` | Icon position: 'leading' or 'trailing'. | |
31
+ | `iconOnly` | | `boolean` | `false` | Hides label, shows icon only. | |
32
+ | `stayOpenOnSelect` | | `boolean` | `false` | Keeps panel open on item click. | |
33
+ | `noChevron` | | `boolean` | `false` | Hides the chevron icon on the trigger button. | |
34
+
35
+ ### Methods
36
+
37
+ | Name | Privacy | Description | Parameters | Return | Inherited From |
38
+ | ------------------- | ------- | ------------------------------------------------------- | ---------- | -------- | -------------- |
39
+ | `_getButtonClasses` | private | Build the button class string based on variant and size | | `string` | |
40
+ | `_showPanel` | private | Show the dropdown panel | | `void` | |
41
+ | `_hidePanel` | private | Hide the dropdown panel | | `void` | |
42
+
43
+ ### Events
44
+
45
+ | Name | Type | Description | Inherited From |
46
+ | ---------------------------- | -------------------------------------------------- | ----------------------------------------------------------------------------- | -------------- |
47
+ | `btu-dropdown-ready` | `CustomEvent` | Fired after first render and initialization | |
48
+ | `btu-dropdown-show` | `CustomEvent` | Fired when the dropdown panel opens | |
49
+ | `btu-dropdown-hide` | `CustomEvent` | Fired when the dropdown panel closes | |
50
+ | `btu-dropdown-item-select` | `CustomEvent<{label: string, selected: boolean}>` | Fired when a menu item is activated (bubbles from btu-dropdown-item) | |
51
+ | `btu-dropdown-item-favorite` | `CustomEvent<{label: string, favorited: boolean}>` | Fired when a menu item's favorite is toggled (bubbles from btu-dropdown-item) | |
52
+
53
+ ### Attributes
54
+
55
+ | Name | Field | Inherited From |
56
+ | --------------------- | ---------------- | -------------- |
57
+ | `label` | label | |
58
+ | `open` | open | |
59
+ | `placement` | placement | |
60
+ | `size` | size | |
61
+ | `disabled` | disabled | |
62
+ | `variant` | variant | |
63
+ | `icon-symbol` | iconSymbol | |
64
+ | `icon-position` | iconPosition | |
65
+ | `icon-only` | iconOnly | |
66
+ | `stay-open-on-select` | stayOpenOnSelect | |
67
+ | `no-chevron` | noChevron | |
68
+
69
+ ### CSS Properties
70
+
71
+ | Name | Default | Description |
72
+ | ------------------------------------- | ------- | ------------------------------------------------------------- |
73
+ | `--dropdown-panel-background` | | Panel background color (default: white) |
74
+ | `--dropdown-panel-border-color` | | Panel border color (default: gray-200) |
75
+ | `--dropdown-panel-border-radius` | | Panel border radius (default: borderRadius.lg) |
76
+ | `--dropdown-panel-min-width` | | Panel minimum width (default: max(12rem, anchor-size(width))) |
77
+ | `--dropdown-item-background` | | Item background color (default: transparent) |
78
+ | `--dropdown-item-color` | | Item text color (default: gray-700) |
79
+ | `--dropdown-item-hover-background` | | Item hover background (default: gray-100) |
80
+ | `--dropdown-item-hover-color` | | Item hover text color (default: gray-900) |
81
+ | `--dropdown-item-selected-background` | | Selected item background (default: primary-50) |
82
+ | `--dropdown-item-selected-color` | | Selected item text color (default: primary-700) |
83
+ | `--dropdown-item-font-size` | | Item font size (default: fontSize.sm) |
84
+ | `--dropdown-divider-color` | | Divider line color (default: gray-200) |
85
+ | `--dropdown-empty-color` | | Empty state text color (default: gray-400) |
86
+
87
+ ### Slots
88
+
89
+ | Name | Description |
90
+ | ---- | ------------------------------------------------------------------------- |
91
+ | | A \`btu-dropdown-menu\` element containing \`btu-dropdown-item\` children |
92
+
93
+ <hr/>
94
+
95
+ ## Exports
96
+
97
+ | Kind | Name | Declaration | Module | Package |
98
+ | --------------------------- | -------------- | ----------- | ----------------------------------- | ------- |
99
+ | `js` | `default` | Dropdown | src/components/dropdown/Dropdown.ts | |
100
+ | `custom-element-definition` | `btu-dropdown` | Dropdown | src/components/dropdown/Dropdown.ts | |
package/docs/components/DropdownItem.md ADDED
@@ -0,0 +1,64 @@
1
+ # `src/components/dropdown/DropdownItem.ts`:
2
+
3
+ ## class: `DropdownItem`, `btu-dropdown-item`
4
+
5
+ ### Superclass
6
+
7
+ | Name | Module | Package |
8
+ | ------------ | ------ | ------- |
9
+ | `LitElement` | | lit |
10
+
11
+ ### Mixins
12
+
13
+ | Name | Module | Package |
14
+ | ------------------- | ------------------------------ | ------- |
15
+ | `EventEmitterMixin` | /src/util/EventEmitterMixin.js | |
16
+ | `ReadyMixin` | /src/util/ReadyMixin.js | |
17
+
18
+ ### Fields
19
+
20
+ | Name | Privacy | Type | Default | Description | Inherited From |
21
+ | ------------ | ------- | ------------------------------------- | ----------- | ---------------------------------------------- | -------------- |
22
+ | `label` | | `string` | `''` | Display text for the item. | |
23
+ | `type` | | `'default' \| 'divider' \| 'subhead'` | `'default'` | Item type: 'default', 'divider', or 'subhead'. | |
24
+ | `iconSymbol` | | `string` | `''` | Lucide icon symbol. | |
25
+ | `shortcut` | | `string` | `''` | Keyboard shortcut display text. | |
26
+ | `disabled` | | `boolean` | `false` | Whether the item is disabled. | |
27
+ | `selected` | | `boolean` | `false` | Whether the item is selected/checked. | |
28
+ | `favorited` | | `boolean` | `false` | Whether the item is favorited. | |
29
+
30
+ ### Methods
31
+
32
+ | Name | Privacy | Description | Parameters | Return | Inherited From |
33
+ | ----------------- | ------- | --------------------- | ---------- | ------ | -------------- |
34
+ | `_toggleFavorite` | private | Toggle favorite state | `e: Event` | `void` | |
35
+ | `_handleClick` | private | | | `void` | |
36
+
37
+ ### Events
38
+
39
+ | Name | Type | Description | Inherited From |
40
+ | ---------------------------- | -------------------------------------------------- | ------------------------------ | -------------- |
41
+ | `btu-dropdown-item-ready` | `CustomEvent` | Fired after first render | |
42
+ | `btu-dropdown-item-select` | `CustomEvent<{label: string, selected: boolean}>` | Fired when item is activated | |
43
+ | `btu-dropdown-item-favorite` | `CustomEvent<{label: string, favorited: boolean}>` | Fired when favorite is toggled | |
44
+
45
+ ### Attributes
46
+
47
+ | Name | Field | Inherited From |
48
+ | ------------- | ---------- | -------------- |
49
+ | `label` | label | |
50
+ | `type` | type | |
51
+ | `icon-symbol` | iconSymbol | |
52
+ | `shortcut` | shortcut | |
53
+ | `disabled` | disabled | |
54
+ | `selected` | selected | |
55
+ | `favorited` | favorited | |
56
+
57
+ <hr/>
58
+
59
+ ## Exports
60
+
61
+ | Kind | Name | Declaration | Module | Package |
62
+ | --------------------------- | ------------------- | ------------ | --------------------------------------- | ------- |
63
+ | `js` | `default` | DropdownItem | src/components/dropdown/DropdownItem.ts | |
64
+ | `custom-element-definition` | `btu-dropdown-item` | DropdownItem | src/components/dropdown/DropdownItem.ts | |
package/docs/components/DropdownMenu.md ADDED
@@ -0,0 +1,81 @@
1
+ # `src/components/dropdown/DropdownMenu.ts`:
2
+
3
+ ## class: `DropdownMenu`, `btu-dropdown-menu`
4
+
5
+ ### Superclass
6
+
7
+ | Name | Module | Package |
8
+ | ------------ | ------ | ------- |
9
+ | `LitElement` | | lit |
10
+
11
+ ### Mixins
12
+
13
+ | Name | Module | Package |
14
+ | ------------------- | ------------------------------ | ------- |
15
+ | `EventEmitterMixin` | /src/util/EventEmitterMixin.js | |
16
+ | `ReadyMixin` | /src/util/ReadyMixin.js | |
17
+
18
+ ### Fields
19
+
20
+ | Name | Privacy | Type | Default | Description | Inherited From |
21
+ | -------------- | ------- | --------- | ---------------------- | ---------------------------------------------------------------------- | -------------- |
22
+ | `name` | | `string` | `''` | Accessible name for the menu, displayed in header when header is true. | |
23
+ | `header` | | `boolean` | `false` | Show header bar with menu name. | |
24
+ | `checkbox` | | `boolean` | `false` | Enable checkbox mode for items (menuitemcheckbox role). | |
25
+ | `icon` | | `boolean` | `false` | Show icons before each item. | |
26
+ | `iconSymbol` | | `string` | `''` | Fallback Lucide icon symbol for items without their own. | |
27
+ | `favorites` | | `boolean` | `false` | Show favorite toggle on each item. | |
28
+ | `shortcuts` | | `boolean` | `false` | Show keyboard shortcut text on each item. | |
29
+ | `emptyMessage` | | `string` | `'No items available'` | Message displayed when the menu has no focusable items. | |
30
+ | `_isEmpty` | private | `boolean` | | Check whether the menu has zero focusable items | |
31
+
32
+ ### Methods
33
+
34
+ | Name | Privacy | Description | Parameters | Return | Inherited From |
35
+ | ----------------------- | ------- | --------------------------------------------------------------- | ---------------------------------------------------------------- | ---------------- | -------------- |
36
+ | `_configureItems` | private | Configure all child items with menu-level settings | | `void` | |
37
+ | `_getAllItems` | private | Get all btu-dropdown-item children | | `DropdownItem[]` | |
38
+ | `_getFocusableItems` | private | Get only focusable items (default type, skip dividers/subheads) | | `DropdownItem[]` | |
39
+ | `_getCurrentFocusIndex` | private | Find the current focused item index | `focusable: DropdownItem[]` | `number` | |
40
+ | `_findNextIndex` | private | Find next index wrapping around, moving in direction (+1 or -1) | `focusable: DropdownItem[], current: number, direction: 1 \| -1` | `number` | |
41
+ | `_handleTypeahead` | private | Typeahead character matching with 500ms accumulation | `char: string, focusable: DropdownItem[]` | `void` | |
42
+
43
+ ### Events
44
+
45
+ | Name | Type | Description | Inherited From |
46
+ | ------------------------- | ------------- | ------------------------ | -------------- |
47
+ | `btu-dropdown-menu-ready` | `CustomEvent` | Fired after first render | |
48
+
49
+ ### Attributes
50
+
51
+ | Name | Field | Inherited From |
52
+ | --------------- | ------------ | -------------- |
53
+ | `name` | name | |
54
+ | `header` | header | |
55
+ | `checkbox` | checkbox | |
56
+ | `icon` | icon | |
57
+ | `icon-symbol` | iconSymbol | |
58
+ | `favorites` | favorites | |
59
+ | `shortcuts` | shortcuts | |
60
+ | `empty-message` | emptyMessage | |
61
+
62
+ ### CSS Properties
63
+
64
+ | Name | Default | Description |
65
+ | ------------------------ | ------- | ------------------------------------------ |
66
+ | `--dropdown-empty-color` | | Empty state text color (default: gray-400) |
67
+
68
+ ### Slots
69
+
70
+ | Name | Description |
71
+ | ---- | ------------------------------------------- |
72
+ | | Menu items (\`btu-dropdown-item\` elements) |
73
+
74
+ <hr/>
75
+
76
+ ## Exports
77
+
78
+ | Kind | Name | Declaration | Module | Package |
79
+ | --------------------------- | ------------------- | ------------ | --------------------------------------- | ------- |
80
+ | `js` | `default` | DropdownMenu | src/components/dropdown/DropdownMenu.ts | |
81
+ | `custom-element-definition` | `btu-dropdown-menu` | DropdownMenu | src/components/dropdown/DropdownMenu.ts | |
package/docs/components/Icon.md ADDED
@@ -0,0 +1,61 @@
1
+ # `src/components/icon/Icon.ts`:
2
+
3
+ ## class: `Icon`, `btu-icon`
4
+
5
+ ### Superclass
6
+
7
+ | Name | Module | Package |
8
+ | ------------ | ------ | ------- |
9
+ | `LitElement` | | lit |
10
+
11
+ ### Mixins
12
+
13
+ | Name | Module | Package |
14
+ | ------------------- | ------------------------------ | ------- |
15
+ | `EventEmitterMixin` | /src/util/EventEmitterMixin.js | |
16
+ | `ReadyMixin` | /src/util/ReadyMixin.js | |
17
+
18
+ ### Static Fields
19
+
20
+ | Name | Privacy | Type | Default | Description | Inherited From |
21
+ | --------- | ------- | ---- | ------- | ----------- | -------------- |
22
+ | `tagName` | | | | | |
23
+
24
+ ### Fields
25
+
26
+ | Name | Privacy | Type | Default | Description | Inherited From |
27
+ | ---------- | ------- | --------------------------------------------------------------------------------------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
28
+ | `size` | | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Size of the icon.&#xA;- 'xs': Extra small (0.75rem)&#xA;- 'sm': Small (1rem)&#xA;- 'md': Medium (1.25rem, default)&#xA;- 'lg': Large (1.5rem)&#xA;- 'xl': Extra large (1.75rem) | |
29
+ | `symbol` | | `string` | `'circle-dashed'` | Lucide icon name to display.&#xA;See https\://lucide.dev/icons/ for available icons. | |
30
+ | `gradient` | | `'ai' \| 'error' \| 'gray' \| 'primary' \| 'purple' \| 'rose' \| 'success' \| 'teal' \| 'warning' \| undefined` | | Theme color to use for gradient fill.&#xA;When set, icon displays with gradient. When undefined, icon inherits parent text color. | |
31
+
32
+ ### Events
33
+
34
+ | Name | Type | Description | Inherited From |
35
+ | ---------------- | ------------- | ------------------------------------------- | -------------- |
36
+ | `btu-icon-ready` | `CustomEvent` | Fired after first render and initialization | |
37
+
38
+ ### Attributes
39
+
40
+ | Name | Field | Inherited From |
41
+ | ---------- | -------- | -------------- |
42
+ | `size` | size | |
43
+ | `symbol` | symbol | |
44
+ | `gradient` | gradient | |
45
+
46
+ ### CSS Properties
47
+
48
+ | Name | Default | Description |
49
+ | ------------- | ------- | ------------------------------------------------------- |
50
+ | `--Icon-size` | | Icon size (overrides size default) |
51
+ | `--Icon-fill` | | Icon fill color for filled icons (e.g., "currentColor") |
52
+ | `--Icon-svg` | | SVG data URI for mask-based rendering |
53
+
54
+ <hr/>
55
+
56
+ ## Exports
57
+
58
+ | Kind | Name | Declaration | Module | Package |
59
+ | --------------------------- | ---------- | ----------- | --------------------------- | ------- |
60
+ | `js` | `default` | Icon | src/components/icon/Icon.ts | |
61
+ | `custom-element-definition` | `btu-icon` | Icon | src/components/icon/Icon.ts | |
package/docs/components/LinearProgress.md ADDED
@@ -0,0 +1,40 @@
1
+ # `src/components/linear-progress/LinearProgress.ts`:
2
+
3
+ ## class: `LinearProgress`, `btu-linear-progress`
4
+
5
+ ### Superclass
6
+
7
+ | Name | Module | Package |
8
+ | ------------ | ------ | ------- |
9
+ | `LitElement` | | lit |
10
+
11
+ ### Mixins
12
+
13
+ | Name | Module | Package |
14
+ | ------------------- | ------------------------------ | ------- |
15
+ | `ProgressMixin` | /src/util/ProgressMixin.js | |
16
+ | `EventEmitterMixin` | /src/util/EventEmitterMixin.js | |
17
+ | `ReadyMixin` | /src/util/ReadyMixin.js | |
18
+
19
+ ### Events
20
+
21
+ | Name | Type | Description | Inherited From |
22
+ | ----------------------- | ------------- | ------------------------------------------- | -------------- |
23
+ | `btu-progress-ready` | `CustomEvent` | Fired after first render and initialization | |
24
+ | `btu-progress-complete` | `CustomEvent` | Fired when progress reaches 100 | |
25
+
26
+ ### CSS Properties
27
+
28
+ | Name | Default | Description |
29
+ | ------------------ | ------- | --------------------------------------------------- |
30
+ | `--progress-color` | | Custom progress bar color (overrides theme color) |
31
+ | `--track-color` | | Track/background color (overrides default gray-100) |
32
+
33
+ <hr/>
34
+
35
+ ## Exports
36
+
37
+ | Kind | Name | Declaration | Module | Package |
38
+ | --------------------------- | --------------------- | -------------- | ------------------------------------------------ | ------- |
39
+ | `js` | `default` | LinearProgress | src/components/linear-progress/LinearProgress.ts | |
40
+ | `custom-element-definition` | `btu-linear-progress` | LinearProgress | src/components/linear-progress/LinearProgress.ts | |
package/docs/components/Pagination.md ADDED
@@ -0,0 +1,95 @@
1
+ # `src/components/pagination/Pagination.ts`:
2
+
3
+ ## class: `Pagination`, `btu-pagination`
4
+
5
+ ### Superclass
6
+
7
+ | Name | Module | Package |
8
+ | ------------ | ------ | ------- |
9
+ | `LitElement` | | lit |
10
+
11
+ ### Mixins
12
+
13
+ | Name | Module | Package |
14
+ | ------------------- | ------------------------------ | ------- |
15
+ | `EventEmitterMixin` | /src/util/EventEmitterMixin.js | |
16
+ | `ReadyMixin` | /src/util/ReadyMixin.js | |
17
+
18
+ ### Fields
19
+
20
+ | Name | Privacy | Type | Default | Description | Inherited From |
21
+ | ------------------------ | ------- | --------------------- | -------------- | ------------------------------------------------- | -------------- |
22
+ | `page` | | `number` | `1` | Current page number (1-based) | |
23
+ | `pageSize` | | `number` | `0` | Number of items per page | |
24
+ | `disabled` | | `boolean` | `false` | Disables all pagination controls | |
25
+ | `loading` | | `boolean` | `false` | Shows loading spinner and dims controls | |
26
+ | `hideOnSinglePage` | | `boolean` | `true` | Hide controls when there is only one page | |
27
+ | `pageSizeChanger` | | `boolean` | `true` | Show the page size dropdown | |
28
+ | `pageSizeOptions` | | `string` | `'10, 20, 50'` | Comma-separated page size options | |
29
+ | `totalItems` | | `number` | `0` | Total number of items across all pages | |
30
+ | `boundaryButtons` | | `boolean` | `true` | Show first and last page buttons | |
31
+ | `hideTotalCount` | | `boolean` | `false` | Hide the item count display (e.g., "1-10 of 200") | |
32
+ | `label` | | `string \| undefined` | | Accessible label for the pagination nav landmark | |
33
+ | `_parsedPageSizeOptions` | private | `number[]` | | | |
34
+ | `_totalPages` | private | `number` | | | |
35
+ | `_startItem` | private | `number` | | | |
36
+ | `_endItem` | private | `number` | | | |
37
+
38
+ ### Methods
39
+
40
+ | Name | Privacy | Description | Parameters | Return | Inherited From |
41
+ | ---------------------- | ------- | ----------- | ---------------------------------- | ------ | -------------- |
42
+ | `_setupSlots` | private | | | `void` | |
43
+ | `_goToFirstPage` | private | | `e: Event` | `void` | |
44
+ | `_goToPreviousPage` | private | | `e: Event` | `void` | |
45
+ | `_goToNextPage` | private | | `e: Event` | `void` | |
46
+ | `_goToLastPage` | private | | `e: Event` | `void` | |
47
+ | `_manageBoundaryFocus` | private | | `clickedButton: HTMLButtonElement` | `void` | |
48
+ | `_onPageSizeChange` | private | | `e: Event` | `void` | |
49
+
50
+ ### Events
51
+
52
+ | Name | Type | Description | Inherited From |
53
+ | --------------------------------- | ----------------------------------------------- | ------------------------- | -------------- |
54
+ | `btu-pagination-ready` | `CustomEvent` | Fired after first render | |
55
+ | `btu-pagination-change` | `CustomEvent<{page: number, pageSize: number}>` | Fired on page navigation | |
56
+ | `btu-pagination-page-size-change` | `CustomEvent<{page: number, pageSize: number}>` | Fired on page size change | |
57
+
58
+ ### Attributes
59
+
60
+ | Name | Field | Inherited From |
61
+ | --------------------- | ---------------- | -------------- |
62
+ | `page` | page | |
63
+ | `page-size` | pageSize | |
64
+ | `disabled` | disabled | |
65
+ | `loading` | loading | |
66
+ | `hide-on-single-page` | hideOnSinglePage | |
67
+ | `page-size-changer` | pageSizeChanger | |
68
+ | `page-size-options` | pageSizeOptions | |
69
+ | `total-items` | totalItems | |
70
+ | `boundary-buttons` | boundaryButtons | |
71
+ | `hide-total-count` | hideTotalCount | |
72
+ | `label` | label | |
73
+
74
+ ### CSS Properties
75
+
76
+ | Name | Default | Description |
77
+ | ------------------------------- | ------- | ------------------------------------------------ |
78
+ | `--pagination-color-background` | | Background color for select, buttons, and jumper |
79
+ | `--pagination-color-foreground` | | Text/icon color |
80
+
81
+ ### Slots
82
+
83
+ | Name | Description |
84
+ | ----------- | ----------------------------------------------------------- |
85
+ | `page-size` | Custom page-size selector (replaces built-in select) |
86
+ | `jumper` | Custom jumper content (e.g., page dropdown, "Today" button) |
87
+
88
+ <hr/>
89
+
90
+ ## Exports
91
+
92
+ | Kind | Name | Declaration | Module | Package |
93
+ | --------------------------- | ---------------- | ----------- | --------------------------------------- | ------- |
94
+ | `js` | `default` | Pagination | src/components/pagination/Pagination.ts | |
95
+ | `custom-element-definition` | `btu-pagination` | Pagination | src/components/pagination/Pagination.ts | |
package/docs/components/Popover.md ADDED
@@ -0,0 +1,71 @@
1
+ # `src/components/popover/Popover.ts`:
2
+
3
+ ## class: `Popover`, `btu-popover`
4
+
5
+ ### Superclass
6
+
7
+ | Name | Module | Package |
8
+ | ------------ | ------ | ------- |
9
+ | `LitElement` | | lit |
10
+
11
+ ### Mixins
12
+
13
+ | Name | Module | Package |
14
+ | ------------------- | ------------------------------ | ------- |
15
+ | `EventEmitterMixin` | /src/util/EventEmitterMixin.js | |
16
+ | `ReadyMixin` | /src/util/ReadyMixin.js | |
17
+
18
+ ### Fields
19
+
20
+ | Name | Privacy | Type | Default | Description | Inherited From |
21
+ | ---------------------- | ------- | ---------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
22
+ | `position` | | `'top' \| 'bottom' \| 'left' \| 'right'` | `'bottom'` | Position relative to the trigger element.&#xA;Auto-flips when constrained by the viewport. | |
23
+ | `trigger` | | `'click' \| 'hover' \| 'focus'` | `'click'` | How the popover is activated.&#xA;- 'click': Toggle on click with light dismiss&#xA;- 'hover': Show on mouseenter with delay&#xA;- 'focus': Show on focusin | |
24
+ | `delay` | | `number` | `300` | Show delay in milliseconds (hover trigger only). | |
25
+ | `offset` | | `PopoverOffset \| null` | `null` | Gap between trigger and popover (sm=4px, md=8px, lg=12px, xl=16px). | |
26
+ | `noArrow` | | `boolean` | `false` | Hide the arrow pseudo-element. | |
27
+ | `open` | | `boolean` | `false` | Programmatic open/close state (reflected). | |
28
+ | `panelLabel` | | `string` | `''` | Accessible label for the popover panel (applied as aria-label on the dialog). | |
29
+ | `_onTriggerMouseLeave` | private | | | | |
30
+ | `_onTriggerFocusIn` | private | | | | |
31
+ | `_onTriggerFocusOut` | private | | | | |
32
+ | `_onPanelMouseEnter` | private | | | | |
33
+ | `_onPanelMouseLeave` | private | | | | |
34
+ | `_onNativeToggle` | private | | | | |
35
+ | `_onKeyDown` | private | | | | |
36
+
37
+ ### Events
38
+
39
+ | Name | Type | Description | Inherited From |
40
+ | ------------------ | ------------- | ----------------------------- | -------------- |
41
+ | `btu-popover-show` | `CustomEvent` | Fired when the popover opens | |
42
+ | `btu-popover-hide` | `CustomEvent` | Fired when the popover closes | |
43
+
44
+ ### Attributes
45
+
46
+ | Name | Field | Inherited From |
47
+ | ------------- | ---------- | -------------- |
48
+ | `position` | position | |
49
+ | `trigger` | trigger | |
50
+ | `delay` | delay | |
51
+ | `offset` | offset | |
52
+ | `noArrow` | noArrow | |
53
+ | `open` | open | |
54
+ | `panel-label` | panelLabel | |
55
+ | `no-arrow` | noArrow | |
56
+
57
+ ### Slots
58
+
59
+ | Name | Description |
60
+ | --------- | ---------------------------------------------------- |
61
+ | `trigger` | The element that activates the popover |
62
+ | `content` | Rich HTML content displayed inside the popover panel |
63
+
64
+ <hr/>
65
+
66
+ ## Exports
67
+
68
+ | Kind | Name | Declaration | Module | Package |
69
+ | --------------------------- | ------------- | ----------- | --------------------------------- | ------- |
70
+ | `js` | `default` | Popover | src/components/popover/Popover.ts | |
71
+ | `custom-element-definition` | `btu-popover` | Popover | src/components/popover/Popover.ts | |
package/docs/components/README.md ADDED
@@ -0,0 +1,24 @@
1
+ # Brightspot UI Component API Reference
2
+
3
+ This directory contains auto-generated API documentation for all Brightspot UI web components.
4
+
5
+ ## Components
6
+
7
+ - [`<btu-avatar>` - Avatar](Avatar.md)
8
+ - [`<btu-avatar-group>` - AvatarGroup](AvatarGroup.md)
9
+ - [`<btu-badge>` - Badge](Badge.md)
10
+ - [`<btu-circular-progress>` - CircularProgress](CircularProgress.md)
11
+ - [`<btu-copy-to-clipboard>` - CopyToClipboard](CopyToClipboard.md)
12
+ - [`<btu-dropdown>` - Dropdown](Dropdown.md)
13
+ - [`<btu-dropdown-item>` - DropdownItem](DropdownItem.md)
14
+ - [`<btu-dropdown-menu>` - DropdownMenu](DropdownMenu.md)
15
+ - [`<btu-icon>` - Icon](Icon.md)
16
+ - [`<btu-linear-progress>` - LinearProgress](LinearProgress.md)
17
+ - [`<btu-pagination>` - Pagination](Pagination.md)
18
+ - [`<btu-popover>` - Popover](Popover.md)
19
+ - [`<btu-widget>` - Widget](Widget.md)
20
+
21
+ ---
22
+
23
+ *Documentation generated from Custom Elements Manifest*
24
+ *Run `yarn cem:docs` to regenerate*
package/docs/components/Widget.md ADDED
@@ -0,0 +1,79 @@
1
+ # `src/components/widget/Widget.ts`:
2
+
3
+ ## class: `Widget`, `btu-widget`
4
+
5
+ ### Superclass
6
+
7
+ | Name | Module | Package |
8
+ | ------------ | ------ | ------- |
9
+ | `LitElement` | | lit |
10
+
11
+ ### Mixins
12
+
13
+ | Name | Module | Package |
14
+ | ------------------- | ------------------------------ | ------- |
15
+ | `EventEmitterMixin` | /src/util/EventEmitterMixin.js | |
16
+ | `ReadyMixin` | /src/util/ReadyMixin.js | |
17
+
18
+ ### Static Fields
19
+
20
+ | Name | Privacy | Type | Default | Description | Inherited From |
21
+ | ------------ | ------- | -------- | ------- | ----------- | -------------- |
22
+ | `_idCounter` | private | `number` | `0` | | |
23
+
24
+ ### Fields
25
+
26
+ | Name | Privacy | Type | Default | Description | Inherited From |
27
+ | -------------------- | ------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | -------------- |
28
+ | `_internals` | private | | | | |
29
+ | `heading` | | `string` | `''` | Heading text displayed in the header. | |
30
+ | `collapsible` | | `boolean` | `false` | Whether the widget can be collapsed/expanded.&#xA;When true, a chevron toggle button appears in the header. | |
31
+ | `collapsed` | | `boolean` | `false` | Whether the widget is currently collapsed.&#xA;When true, body and footer are hidden. Implies collapsible. | |
32
+ | `fullscreenable` | | `boolean` | `false` | Whether the widget can enter fullscreen mode.&#xA;When true, a fullscreen toggle button appears in the header. | |
33
+ | `_isFullscreen` | private | `boolean` | `false` | | |
34
+ | `_collapseTooltip` | private | | `new TooltipController(this, { target: 'button[data-tooltip="collapse"]', text: () => (this.collapsed ? 'Expand' : 'Collapse'), position: 'bottom', noArrow: true, offset: 'sm', })` | | |
35
+ | `_fullscreenTooltip` | private | | `new TooltipController(this, { target: 'button[data-tooltip="fullscreen"]', text: () => (this._isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'), position: 'bottom', noArrow: true, offset: 'sm', })` | | |
36
+ | `isFullscreen` | | `boolean` | | Whether the widget is currently in fullscreen mode (read-only).&#xA;Use \`btu-widget-fullscreen-changed\` event to react to changes. | |
37
+
38
+ ### Events
39
+
40
+ | Name | Type | Description | Inherited From |
41
+ | ------------------------------- | ------------------------------------ | ------------------------------------------- | -------------- |
42
+ | `btu-widget-ready` | `CustomEvent` | Fired after first render and redistribution | |
43
+ | `btu-widget-collapse-changed` | `CustomEvent<{collapsed: boolean}>` | Fired when collapsed state changes | |
44
+ | `btu-widget-fullscreen-changed` | `CustomEvent<{fullscreen: boolean}>` | Fired when fullscreen state changes | |
45
+
46
+ ### Attributes
47
+
48
+ | Name | Field | Inherited From |
49
+ | ---------------- | -------------- | -------------- |
50
+ | `heading` | heading | |
51
+ | `collapsible` | collapsible | |
52
+ | `collapsed` | collapsed | |
53
+ | `fullscreenable` | fullscreenable | |
54
+ | `id` | | |
55
+
56
+ ### CSS Properties
57
+
58
+ | Name | Default | Description |
59
+ | --------------------- | ------- | ------------------------------------------------------------- |
60
+ | `--widget-background` | | Body and footer background color (default: --btu-theme-white) |
61
+ | `--widget-border` | | Widget border and dividers (default: 1px solid gray-200) |
62
+ | `--header-background` | | Header background color (default: transparent) |
63
+
64
+ ### Slots
65
+
66
+ | Name | Description |
67
+ | ---------- | ---------------------------------------------------------------------- |
68
+ | | Default pseudo-slot: elements without slot attribute are moved to body |
69
+ | `controls` | Pseudo-slot: buttons/actions moved to header actions area |
70
+ | `footer` | Pseudo-slot: content moved to footer container |
71
+
72
+ <hr/>
73
+
74
+ ## Exports
75
+
76
+ | Kind | Name | Declaration | Module | Package |
77
+ | --------------------------- | ------------ | ----------- | ------------------------------- | ------- |
78
+ | `js` | `default` | Widget | src/components/widget/Widget.ts | |
79
+ | `custom-element-definition` | `btu-widget` | Widget | src/components/widget/Widget.ts | |