@brightspot/ui 6.8.1 → 6.8.2

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 (170) hide show
  1. package/CHANGELOG.md +661 -0
  2. package/README.md +18 -2
  3. package/dist/storybook/CHANGELOG.md +661 -0
  4. package/dist/storybook/README.md +195 -0
  5. package/dist/storybook/assets/{ActionBar.stories-BOXYJYXy.js → ActionBar.stories-TlhuCumU.js} +1 -1
  6. package/dist/storybook/assets/{ActionItem-WoDvowFu.js → ActionItem-CjtyGLd5.js} +1 -1
  7. package/dist/storybook/assets/{ActionItem.stories-CVFoWP54.js → ActionItem.stories-BVlNQvfP.js} +1 -1
  8. package/dist/storybook/assets/{AiSparkle.stories-Psv9jNpy.js → AiSparkle.stories-DMzc8JUe.js} +2 -2
  9. package/dist/storybook/assets/{Avatar-CIQcHS8b.js → Avatar-C6Li1sPI.js} +1 -1
  10. package/dist/storybook/assets/{Avatar.stories-BE2Xn8fx.js → Avatar.stories-COj6XrPn.js} +1 -1
  11. package/dist/storybook/assets/{AvatarGroup-Chs0VKPg.js → AvatarGroup-DgxRTZBe.js} +1 -1
  12. package/dist/storybook/assets/{AvatarGroup.stories-2ar6gCeX.js → AvatarGroup.stories-Dh3e7iN2.js} +1 -1
  13. package/dist/storybook/assets/{Badge-AV20mCMJ.js → Badge-bWrvpEgX.js} +1 -1
  14. package/dist/storybook/assets/{Badge.stories-w9LqNw0A.js → Badge.stories-KXpmEXpt.js} +1 -1
  15. package/dist/storybook/assets/{Banner.stories-Clhh1bBs.js → Banner.stories-Cnhm3dXK.js} +1 -1
  16. package/dist/storybook/assets/{Button-B7fn_wd5.js → Button-DE0s-gat.js} +1 -1
  17. package/dist/storybook/assets/{Button.stories-5h4M8nd2.js → Button.stories-Cwg1YZEb.js} +1 -1
  18. package/dist/storybook/assets/{ButtonGroup-BmndBsBy.js → ButtonGroup-CoLI5nGO.js} +1 -1
  19. package/dist/storybook/assets/{ButtonGroup.stories-CR1H4H7u.js → ButtonGroup.stories-VhnKPP1n.js} +1 -1
  20. package/dist/storybook/assets/{Card.stories-Bz5vXq5y.js → Card.stories-BgpL90zB.js} +1 -1
  21. package/dist/storybook/assets/{Celebrate.stories-Bu3CNw0k.js → Celebrate.stories-D3NJgYcX.js} +1 -1
  22. package/dist/storybook/assets/{Checkbox-BALsanB1.js → Checkbox-BC1T_KxW.js} +1 -1
  23. package/dist/storybook/assets/{Checkbox.stories-BdvCht5c.js → Checkbox.stories-AFQNz7dQ.js} +1 -1
  24. package/dist/storybook/assets/{CircularProgress-BeE2fWON.js → CircularProgress-eqVb2jUD.js} +1 -1
  25. package/dist/storybook/assets/{CircularProgress.stories-CL8Lc6eU.js → CircularProgress.stories-B6t8VhmJ.js} +1 -1
  26. package/dist/storybook/assets/{ClipboardMixin-C6wcbXIO.js → ClipboardMixin-DcxrOy5B.js} +1 -1
  27. package/dist/storybook/assets/{ClipboardMixin.stories-BsjzC7wd.js → ClipboardMixin.stories-BqtQMjmS.js} +1 -1
  28. package/dist/storybook/assets/{Color-6BZIO3FS-Dsd6EVV9.js → Color-6BZIO3FS-CDluohEc.js} +1 -1
  29. package/dist/storybook/assets/{Colors.stories-CkCdNN9Y.js → Colors.stories-CqTniDIa.js} +1 -1
  30. package/dist/storybook/assets/{CombinedEffects.stories-QG78pIiG.js → CombinedEffects.stories-FwW0chy5.js} +1 -1
  31. package/dist/storybook/assets/{ComponentStatesMixin-CG-Dx_Vk.js → ComponentStatesMixin-hUqOL2aW.js} +1 -1
  32. package/dist/storybook/assets/{ComponentStatesMixin.stories-B1yuAqua.js → ComponentStatesMixin.stories-CwGoq685.js} +1 -1
  33. package/dist/storybook/assets/{CopyToClipboard.stories-CyKcumJ9.js → CopyToClipboard.stories-DUGjgtQx.js} +1 -1
  34. package/dist/storybook/assets/{Debounce.stories-BuNskQ33.js → Debounce.stories-CrWfXhKS.js} +1 -1
  35. package/dist/storybook/assets/{DocsRenderer-LL677BLK-BrPyc8XX.js → DocsRenderer-LL677BLK-9e51z9Xc.js} +3 -3
  36. package/dist/storybook/assets/{Dropdown.stories-DHXeP07z.js → Dropdown.stories-BsBxV0wp.js} +1 -1
  37. package/dist/storybook/assets/{DropdownMenu-WoWnJiQk.js → DropdownMenu-B-LvOIGj.js} +1 -1
  38. package/dist/storybook/assets/{EmptyState.stories-BRoVusey.js → EmptyState.stories-CJ1w8Tp2.js} +1 -1
  39. package/dist/storybook/assets/{EscaAvatar.stories-CWAE-4Uz.js → EscaAvatar.stories-BoLLSj9q.js} +2 -2
  40. package/dist/storybook/assets/{Events.stories-D-npDwlx.js → Events.stories-C3sTBwPJ.js} +1 -1
  41. package/dist/storybook/assets/{Heading.stories-D7hmvFEN.js → Heading.stories-jmXDRBmM.js} +1 -1
  42. package/dist/storybook/assets/{HueRipple.stories-Dx3ozdHi.js → HueRipple.stories-BPx5aSYd.js} +1 -1
  43. package/dist/storybook/assets/{Icon-DPQKiWDz.js → Icon-CWyJRQf7.js} +1 -1
  44. package/dist/storybook/assets/{Icon.stories-CVsQvcwd.js → Icon.stories-iYBxmv2x.js} +1 -1
  45. package/dist/storybook/assets/{IconButton-Dp4Z06bL.js → IconButton-Di5Rgs7F.js} +1 -1
  46. package/dist/storybook/assets/{IconButton.stories-DTbfHfcQ.js → IconButton.stories-DENLoxVk.js} +1 -1
  47. package/dist/storybook/assets/{LinearProgress-DG3tPlGH.js → LinearProgress-D9ngIVlv.js} +1 -1
  48. package/dist/storybook/assets/{LinearProgress.stories-VIU6OqYd.js → LinearProgress.stories-u90B_VJR.js} +1 -1
  49. package/dist/storybook/assets/{Message-BzkpGg8z.js → Message-nFAa55c_.js} +1 -1
  50. package/dist/storybook/assets/{Message.stories-C9bzoQes.js → Message.stories-B4rpz5rI.js} +1 -1
  51. package/dist/storybook/assets/{OnFindMixin-CeeYfx9k.js → OnFindMixin-oL1bvTFj.js} +1 -1
  52. package/dist/storybook/assets/{OnFindMixin.stories-Dq06nuVf.js → OnFindMixin.stories-CdeS5sFA.js} +1 -1
  53. package/dist/storybook/assets/{Pagination-CnWa6AX5.js → Pagination-CSWcjuDU.js} +1 -1
  54. package/dist/storybook/assets/{Pagination.stories-BsH2eN2W.js → Pagination.stories-Da2WzJkv.js} +1 -1
  55. package/dist/storybook/assets/{Popover.stories-CLnzpgEE.js → Popover.stories-CVljlVHc.js} +1 -1
  56. package/dist/storybook/assets/{ProgressMixin-D1atDw3n.js → ProgressMixin-CeSrn0_P.js} +1 -1
  57. package/dist/storybook/assets/{Radio-B6Aq6K0V.js → Radio-rvfGhZwK.js} +1 -1
  58. package/dist/storybook/assets/{Radio.stories-BCVbISmb.js → Radio.stories-B0wHdJuc.js} +1 -1
  59. package/dist/storybook/assets/{RadioGroup.stories-B-TGP_-v.js → RadioGroup.stories-D8krOSlP.js} +1 -1
  60. package/dist/storybook/assets/{ReadyMixin-C8HW2nGE.js → ReadyMixin-CvX_eidU.js} +1 -1
  61. package/dist/storybook/assets/{RovingTabindexMixin-DI5rmyR7.js → RovingTabindexMixin-9z8lwaM9.js} +1 -1
  62. package/dist/storybook/assets/{RovingTabindexMixin.stories-DVKCC_R7.js → RovingTabindexMixin.stories-Y8vBWjJp.js} +1 -1
  63. package/dist/storybook/assets/{Rtc.stories-bBYHOszW.js → Rtc.stories-D3Y-z8y_.js} +1 -1
  64. package/dist/storybook/assets/{ScrollShadow.stories-BIK8YINt.js → ScrollShadow.stories-1KD0lWHX.js} +1 -1
  65. package/dist/storybook/assets/{Switch.stories-COEk74kM.js → Switch.stories-Bsqvm_HE.js} +1 -1
  66. package/dist/storybook/assets/{Tab.stories-Dbt9JvSx.js → Tab.stories-CzcTisNs.js} +1 -1
  67. package/dist/storybook/assets/{Tabs-BIScOPS0.js → Tabs-DdpYNZSW.js} +1 -1
  68. package/dist/storybook/assets/{Tabs.stories-CodKgVf2.js → Tabs.stories-UOS3V0J4.js} +1 -1
  69. package/dist/storybook/assets/{Throttle.stories-BhIqWWrQ.js → Throttle.stories-C8jgzh6e.js} +1 -1
  70. package/dist/storybook/assets/{Tooltip.stories-DKD8nBM1.js → Tooltip.stories-B5BoI0cH.js} +1 -1
  71. package/dist/storybook/assets/{TooltipMixin-CRNNusJ7.js → TooltipMixin-CVKslCDt.js} +1 -1
  72. package/dist/storybook/assets/{Upload.stories-WTO15ST1.js → Upload.stories-BsQDCDqo.js} +1 -1
  73. package/dist/storybook/assets/{UploadItem-DejgZ5A0.js → UploadItem-CYQqNwUF.js} +1 -1
  74. package/dist/storybook/assets/{UploadItem.stories-Pk3ghOcI.js → UploadItem.stories-_le7XBTV.js} +1 -1
  75. package/dist/storybook/assets/{Welcome.stories-DrNnxvt9.js → Welcome.stories-rramKkhd.js} +33 -3
  76. package/dist/storybook/assets/{Widget.stories-CYC5Qdac.js → Widget.stories-DtbAaklk.js} +1 -1
  77. package/dist/storybook/assets/{WithTooltip-65CFNBJE-DK6PZNaa.js → WithTooltip-65CFNBJE-DK6GcBuR.js} +1 -1
  78. package/dist/storybook/assets/{blocks-Dzcxb014.js → blocks-DHnzPh43.js} +5 -5
  79. package/dist/storybook/assets/{formatter-EIJCOSYU-PioIuXjk.js → formatter-EIJCOSYU-qig-qWlG.js} +1 -1
  80. package/dist/storybook/assets/if-defined-DerKRcyC.js +1 -0
  81. package/dist/storybook/assets/{iframe-Byo_x5o2.js → iframe-DlBK9Drk.js} +3 -3
  82. package/dist/storybook/assets/{index-gox-Wle0.js → index-CItQyB37.js} +1 -1
  83. package/dist/storybook/assets/{lottie_svg-3t2UJxjZ.js → lottie_svg-C3v6xdng.js} +1 -1
  84. package/dist/storybook/assets/{onFind-BWiaccUj.js → onFind-Ci35eu2y.js} +1 -1
  85. package/dist/storybook/assets/{onFind.stories-CC_XTN2G.js → onFind.stories-BmbwWWo1.js} +1 -1
  86. package/dist/storybook/assets/{onRemove.stories-CXxpL4ud.js → onRemove.stories-DFWCIgE4.js} +1 -1
  87. package/dist/storybook/assets/{onVisible.stories-DKA9cexx.js → onVisible.stories-B-onpgE-.js} +1 -1
  88. package/dist/storybook/assets/{property-_few0Xe5.js → property-Bmq4RTSP.js} +1 -1
  89. package/dist/storybook/assets/{ref-BaIdO8Sk.js → ref-BhKk4SDh.js} +1 -1
  90. package/dist/storybook/assets/state-DVIUS0Gf.js +1 -0
  91. package/dist/storybook/assets/{style-map-DxZm5Cj7.js → style-map-DE4G47KD.js} +1 -1
  92. package/dist/storybook/assets/{syntaxhighlighter-ED5Y7EFY-B0_bSGZz.js → syntaxhighlighter-ED5Y7EFY-Dfgnal1d.js} +1 -1
  93. package/dist/storybook/custom-elements.json +11835 -0
  94. package/dist/storybook/docs/components/ActionBar.md +55 -0
  95. package/dist/storybook/docs/components/ActionItem.md +50 -0
  96. package/dist/storybook/docs/components/AiSparkle.md +33 -0
  97. package/dist/storybook/docs/components/Avatar.md +45 -0
  98. package/dist/storybook/docs/components/AvatarGroup.md +34 -0
  99. package/dist/storybook/docs/components/Badge.md +47 -0
  100. package/dist/storybook/docs/components/Banner.md +35 -0
  101. package/dist/storybook/docs/components/ButtonGroup.md +65 -0
  102. package/dist/storybook/docs/components/Card.md +67 -0
  103. package/dist/storybook/docs/components/Checkbox.md +49 -0
  104. package/dist/storybook/docs/components/CircularProgress.md +40 -0
  105. package/dist/storybook/docs/components/CopyToClipboard.md +51 -0
  106. package/dist/storybook/docs/components/Dropdown.md +74 -0
  107. package/dist/storybook/docs/components/DropdownItem.md +45 -0
  108. package/dist/storybook/docs/components/DropdownMenu.md +41 -0
  109. package/dist/storybook/docs/components/EmptyState.md +62 -0
  110. package/dist/storybook/docs/components/EscaAvatar.md +40 -0
  111. package/dist/storybook/docs/components/Icon.md +40 -0
  112. package/dist/storybook/docs/components/IconButton.md +36 -0
  113. package/dist/storybook/docs/components/LinearProgress.md +37 -0
  114. package/dist/storybook/docs/components/Message.md +50 -0
  115. package/dist/storybook/docs/components/Pagination.md +70 -0
  116. package/dist/storybook/docs/components/Popover.md +59 -0
  117. package/dist/storybook/docs/components/README.md +48 -0
  118. package/dist/storybook/docs/components/Radio.md +55 -0
  119. package/dist/storybook/docs/components/RadioGroup.md +34 -0
  120. package/dist/storybook/docs/components/Switch.md +48 -0
  121. package/dist/storybook/docs/components/Tab.md +40 -0
  122. package/dist/storybook/docs/components/Tabs.md +49 -0
  123. package/dist/storybook/docs/components/Upload.md +63 -0
  124. package/dist/storybook/docs/components/UploadItem.md +30 -0
  125. package/dist/storybook/docs/components/Widget.md +88 -0
  126. package/dist/storybook/docs/dari-elements.md +55 -0
  127. package/dist/storybook/iframe.html +1 -1
  128. package/dist/storybook/index.html +29 -2
  129. package/dist/storybook/llms-full.txt +1721 -0
  130. package/dist/storybook/llms.txt +65 -0
  131. package/dist/storybook/project.json +1 -1
  132. package/dist/storybook/robots.txt +7 -0
  133. package/dist/storybook/sb-addons/storybook-3/manager-bundle.js +1 -1
  134. package/dist/storybook/sitemap.xml +90 -0
  135. package/docs/components/ActionBar.md +41 -64
  136. package/docs/components/ActionItem.md +50 -96
  137. package/docs/components/AiSparkle.md +23 -60
  138. package/docs/components/Avatar.md +45 -88
  139. package/docs/components/AvatarGroup.md +24 -44
  140. package/docs/components/Badge.md +34 -62
  141. package/docs/components/Banner.md +25 -39
  142. package/docs/components/ButtonGroup.md +65 -99
  143. package/docs/components/Card.md +67 -83
  144. package/docs/components/Checkbox.md +49 -91
  145. package/docs/components/CircularProgress.md +40 -84
  146. package/docs/components/CopyToClipboard.md +35 -40
  147. package/docs/components/Dropdown.md +74 -120
  148. package/docs/components/DropdownItem.md +45 -81
  149. package/docs/components/DropdownMenu.md +30 -70
  150. package/docs/components/EmptyState.md +45 -62
  151. package/docs/components/EscaAvatar.md +30 -61
  152. package/docs/components/Icon.md +29 -62
  153. package/docs/components/IconButton.md +36 -83
  154. package/docs/components/LinearProgress.md +28 -70
  155. package/docs/components/Message.md +38 -63
  156. package/docs/components/Pagination.md +70 -100
  157. package/docs/components/Popover.md +46 -79
  158. package/docs/components/README.md +34 -40
  159. package/docs/components/Radio.md +55 -105
  160. package/docs/components/RadioGroup.md +26 -55
  161. package/docs/components/Switch.md +48 -84
  162. package/docs/components/Tab.md +30 -70
  163. package/docs/components/Tabs.md +49 -86
  164. package/docs/components/Upload.md +63 -112
  165. package/docs/components/UploadItem.md +22 -53
  166. package/docs/components/Widget.md +66 -67
  167. package/llms.txt +63 -0
  168. package/package.json +8 -6
  169. package/dist/storybook/assets/if-defined-DL7cQU7O.js +0 -1
  170. package/dist/storybook/assets/state-BBcPmYaV.js +0 -1
@@ -0,0 +1,65 @@
1
+ # Brightspot UI
2
+
3
+ > `@brightspot/ui` 6.8.2: Lit web components (`btu-*` tags) and a TailwindCSS v3 preset for building Brightspot CMS screens and plugins.
4
+
5
+ These docs describe 6.8.2. Prefer them over what you remember about this library, because component APIs change between minor versions. For the version a project actually uses, read `node_modules/@brightspot/ui/llms.txt` in that project. Releases without that file still have their manifest at `https://cdn.jsdelivr.net/npm/@brightspot/ui@<version>/dist/custom-elements.json`.
6
+
7
+ Components render in the light DOM, not a shadow root. In HTML, use the attribute names from each component page: many differ from the JavaScript property names, for example `heading-level` for `headingLevel`.
8
+
9
+ The guide and component pages linked below are markdown.
10
+
11
+ ## Getting started
12
+
13
+ - [README](https://ui.brightspot.com/README.md): install, the Tailwind preset and importing components
14
+ - [Using components in a CMS plugin](https://ui.brightspot.com/docs/components/README.md): the CMS defines only `btu-badge`, `btu-copy-to-clipboard`, `btu-icon` and `btu-widget`; import every other element you use
15
+ - [Rendering components from Java](https://ui.brightspot.com/docs/dari-elements.md): the generated `com.brightspot.ui.dari` classes
16
+
17
+ ## Components
18
+
19
+ - [`<btu-action-bar>`](https://ui.brightspot.com/docs/components/ActionBar.md): A persistent container for primary, secondary, tertiary, and destructive actions within an interface, typically anchored to the bottom of a view
20
+ - [`<btu-action-item>`](https://ui.brightspot.com/docs/components/ActionItem.md): An action item button for use within `btu-action-bar`
21
+ - [`<btu-ai-sparkle>`](https://ui.brightspot.com/docs/components/AiSparkle.md): The animated AI-branding sparkle
22
+ - [`<btu-avatar>`](https://ui.brightspot.com/docs/components/Avatar.md): An avatar component for displaying user profile images with fallback support
23
+ - [`<btu-avatar-group>`](https://ui.brightspot.com/docs/components/AvatarGroup.md): A container component for grouping multiple avatars with consistent styling
24
+ - [`<btu-badge>`](https://ui.brightspot.com/docs/components/Badge.md): A badge component for highlighting important information
25
+ - [`<btu-banner>`](https://ui.brightspot.com/docs/components/Banner.md): A full-width container that pins a `<btu-message>` to the top of the CMS or a content edit page
26
+ - [`<btu-button-group>`](https://ui.brightspot.com/docs/components/ButtonGroup.md): A semantic container for grouping related buttons together
27
+ - [`<btu-card>`](https://ui.brightspot.com/docs/components/Card.md): A flexible content container for presenting and organizing information
28
+ - [`<btu-checkbox>`](https://ui.brightspot.com/docs/components/Checkbox.md): A checkbox component for selecting one or more options from a set
29
+ - [`<btu-circular-progress>`](https://ui.brightspot.com/docs/components/CircularProgress.md): A circular progress indicator for showing loading states or progress
30
+ - [`<btu-copy-to-clipboard>`](https://ui.brightspot.com/docs/components/CopyToClipboard.md): A button component that copies text to the system clipboard
31
+ - [`<btu-dropdown>`](https://ui.brightspot.com/docs/components/Dropdown.md): A dropdown component that renders a trigger button and manages a floating panel containing a `btu-dropdown-menu`
32
+ - [`<btu-dropdown-item>`](https://ui.brightspot.com/docs/components/DropdownItem.md): A menu item component for use inside `btu-dropdown-menu`
33
+ - [`<btu-dropdown-menu>`](https://ui.brightspot.com/docs/components/DropdownMenu.md): A menu container component that provides keyboard navigation and ARIA menu semantics
34
+ - [`<btu-empty-state>`](https://ui.brightspot.com/docs/components/EmptyState.md): An empty state component for displaying placeholder content when no data is available
35
+ - [`<btu-esca-avatar>`](https://ui.brightspot.com/docs/components/EscaAvatar.md): The animated avatar for the Esca AI assistant, driven entirely by its `state` attribute so the same element works wherever the assistant appears
36
+ - [`<btu-icon>`](https://ui.brightspot.com/docs/components/Icon.md): An icon component for displaying Lucide icons
37
+ - [`<btu-icon-button>`](https://ui.brightspot.com/docs/components/IconButton.md): Surfaces the different actions someone can perform in an interface where space is limited
38
+ - [`<btu-linear-progress>`](https://ui.brightspot.com/docs/components/LinearProgress.md): A horizontal linear progress bar for showing task completion
39
+ - [`<btu-message>`](https://ui.brightspot.com/docs/components/Message.md): A message for communicating high-visibility content that is not tied to the user's current task — alerts, breaking news, and persistent status
40
+ - [`<btu-pagination>`](https://ui.brightspot.com/docs/components/Pagination.md): A pagination component for navigating through paged content
41
+ - [`<btu-popover>`](https://ui.brightspot.com/docs/components/Popover.md): A popover component for displaying rich interactive content anchored to a trigger element
42
+ - [`<btu-radio>`](https://ui.brightspot.com/docs/components/Radio.md): A single radio option, selectable from a set of mutually exclusive choices
43
+ - [`<btu-radio-group>`](https://ui.brightspot.com/docs/components/RadioGroup.md): A container that groups `btu-radio` options into a single-select control
44
+ - [`<btu-switch>`](https://ui.brightspot.com/docs/components/Switch.md): A toggle switch component for binary on/off states
45
+ - [`<btu-tab>`](https://ui.brightspot.com/docs/components/Tab.md): An individual tab within a tab group
46
+ - [`<btu-tabs>`](https://ui.brightspot.com/docs/components/Tabs.md): A container component for managing a group of tabs
47
+ - [`<btu-upload>`](https://ui.brightspot.com/docs/components/Upload.md): A file upload component with drop zone and file list
48
+ - [`<btu-upload-item>`](https://ui.brightspot.com/docs/components/UploadItem.md): Internal upload item sub-component for displaying individual file upload state
49
+ - [`<btu-widget>`](https://ui.brightspot.com/docs/components/Widget.md): A widget component for displaying content with header, body, and footer sections
50
+
51
+ ## Tailwind classes
52
+
53
+ Each link is a plugin source file; its header comment lists the classes.
54
+
55
+ - [Button](https://cdn.jsdelivr.net/npm/@brightspot/ui@6.8.2/dist/tailwind-plugin-button.ts): Buttons communicate actions that users can take such as submit a form, begin a new task, trigger a new UI element to appear or take a new or next step in some process
56
+ - [Heading](https://cdn.jsdelivr.net/npm/@brightspot/ui@6.8.2/dist/tailwind-plugin-heading.ts): Headings are a combination of font-size, line-height and weight
57
+ - [Scroll Shadow](https://cdn.jsdelivr.net/npm/@brightspot/ui@6.8.2/dist/tailwind-plugin-scroll-shadow.ts): This plugin adds shadows to the edges of a scrollable container when the content of the container overflows
58
+ - [Icon](https://cdn.jsdelivr.net/npm/@brightspot/ui@6.8.2/dist/tailwind-plugin-icon.ts): Lucide icons as classes, for example `before:btu-icon before:btu-icon-heart`, plus size and gradient modifiers
59
+
60
+ ## Optional
61
+
62
+ - [All component pages in one file](https://ui.brightspot.com/llms-full.txt)
63
+ - [Custom Elements Manifest](https://ui.brightspot.com/custom-elements.json): the machine-readable API of every element
64
+ - [Changelog](https://ui.brightspot.com/CHANGELOG.md): what changed in each release
65
+ - [Storybook](https://ui.brightspot.com/): interactive examples; needs JavaScript, so fetching it returns no content
@@ -1 +1 @@
1
- {"generatedAt":1793392614358,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"knownPackages":{"testPackages":{"@storybook/addon-vitest":"10.2.12","@vitest/browser-playwright":"4.1.11","playwright":"1.58.2","vitest":"4.1.11"},"stylingPackages":{"tailwindcss":"^3.4.13","autoprefixer":"10.4.21"}},"hasRouterPackage":false,"packageManager":{"type":"yarn","agent":"yarn","nodeLinker":"undefined"},"preview":{"usesGlobals":true},"framework":{"name":"@storybook/web-components-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/web-components","portableStoriesFileCount":0,"applicationFileCount":6,"storybookVersion":"10.2.12","storybookVersionSpecifier":"10.2.12","language":"typescript","storybookPackages":{"@storybook/addon-themes":{"version":"10.2.12"},"@storybook/web-components-vite":{"version":"10.2.12"},"@wc-toolkit/storybook-helpers":{"version":"10.0.0"},"eslint-plugin-storybook":{"version":"10.0.7"},"storybook":{}},"addons":{"@storybook/addon-docs":{"version":"10.2.12"},"@storybook/addon-vitest":{"version":"10.2.12"}},"packageJsonType":"module"}
1
+ {"generatedAt":1793577198764,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"knownPackages":{"testPackages":{"@storybook/addon-vitest":"10.2.12","@vitest/browser-playwright":"4.1.11","playwright":"1.58.2","vitest":"4.1.11"},"stylingPackages":{"tailwindcss":"^3.4.13","autoprefixer":"10.4.21"}},"hasRouterPackage":false,"packageManager":{"type":"yarn","agent":"yarn","nodeLinker":"undefined"},"preview":{"usesGlobals":true},"framework":{"name":"@storybook/web-components-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/web-components","portableStoriesFileCount":0,"applicationFileCount":6,"storybookVersion":"10.2.12","storybookVersionSpecifier":"10.2.12","language":"typescript","storybookPackages":{"@storybook/addon-themes":{"version":"10.2.12"},"@storybook/web-components-vite":{"version":"10.2.12"},"@wc-toolkit/storybook-helpers":{"version":"10.0.0"},"eslint-plugin-storybook":{"version":"10.0.7"},"storybook":{}},"addons":{"@storybook/addon-docs":{"version":"10.2.12"},"@storybook/addon-vitest":{"version":"10.2.12"}},"packageJsonType":"module"}
@@ -0,0 +1,7 @@
1
+ # Agent-readable docs: https://ui.brightspot.com/llms.txt
2
+
3
+ User-agent: *
4
+ Allow: /
5
+ Content-Signal: search=yes, ai-input=yes, ai-train=yes
6
+
7
+ Sitemap: https://ui.brightspot.com/sitemap.xml
@@ -1,3 +1,3 @@
1
1
  try{
2
- (()=>{var h=__STORYBOOK_API__,{ActiveTabs:_,Consumer:B,ManagerContext:C,Provider:g,RequestResponseError:T,Tag:b,addons:a,combineParameters:v,controlOrMetaKey:x,controlOrMetaSymbol:y,eventMatchesShortcut:A,eventToShortcut:E,experimental_MockUniversalStore:O,experimental_UniversalStore:P,experimental_getStatusStore:f,experimental_getTestProviderStore:k,experimental_requestResponse:R,experimental_useStatusStore:M,experimental_useTestProviderStore:D,experimental_useUniversalStore:N,internal_checklistStore:I,internal_fullStatusStore:H,internal_fullTestProviderStore:K,internal_universalChecklistStore:G,internal_universalStatusStore:U,internal_universalTestProviderStore:w,isMacLike:Y,isShortcutTaken:L,keyToSymbol:q,merge:V,mockChannel:j,optionOrAltSymbol:Q,shortcutMatchesShortcut:W,shortcutToAriaKeyshortcuts:z,shortcutToHumanString:J,types:X,useAddonState:Z,useArgTypes:$,useArgs:ee,useChannel:re,useGlobalTypes:te,useGlobals:oe,useParameter:ae,useSharedState:se,useStoryPrepared:ne,useStorybookApi:le,useStorybookState:ie}=__STORYBOOK_API__;var Fe=__STORYBOOK_THEMING__,{CacheProvider:me,ClassNames:Se,Global:he,ThemeProvider:_e,background:Be,color:Ce,convert:ge,create:o,createCache:Te,createGlobal:be,createReset:ve,css:xe,darken:ye,ensure:Ae,getPreferredColorScheme:Ee,ignoreSsrWarning:Oe,isPropValid:Pe,jsx:fe,keyframes:ke,lighten:Re,styled:Me,themes:De,tokens:Ne,typography:Ie,useTheme:He,withTheme:Ke}=__STORYBOOK_THEMING__;var s={brandTitle:"Brightspot UI",brandImage:"./brightspot-logo.svg",brandTarget:"_self"},n=o({base:"light",...s,colorPrimary:"#F0433E",colorSecondary:"#144CEB",appBg:"#FCFCFD",appContentBg:"#FFFFFF",appPreviewBg:"#FFFFFF",appBorderColor:"#EAECF0",appBorderRadius:6,textColor:"#101828",textInverseColor:"#FFFFFF",textMutedColor:"#667085",barTextColor:"#667085",barHoverColor:"#1D2939",barSelectedColor:"#144CEB",barBg:"#F9FAFB",inputBg:"#FFFFFF",inputBorder:"#D0D5DD",inputTextColor:"#101828",inputBorderRadius:4,fontBase:'"Noto Sans", "Helvetica Neue", Arial, sans-serif',fontCode:"monospace"}),l=o({base:"dark",...s,colorPrimary:"#FDA398",colorSecondary:"#235CEF",appBg:"#1E1F21",appContentBg:"#1E1F21",appPreviewBg:"#1E1F21",appBorderColor:"#3E3E40",appBorderRadius:6,textColor:"#FAFAFA",textInverseColor:"#1E1F21",textMutedColor:"#B9B7B9",barTextColor:"#B9B7B9",barHoverColor:"#F5F5F5",barSelectedColor:"#D1E0FF",barBg:"#2A2B2D",inputBg:"#1E1F21",inputBorder:"#464648",inputTextColor:"#FAFAFA",inputBorderRadius:4,fontBase:'"Noto Sans", "Helvetica Neue", Arial, sans-serif',fontCode:"monospace"});var i=window.matchMedia("(prefers-color-scheme: dark)"),p=()=>{a.setConfig({theme:i.matches?l:n})};p();i.addEventListener("change",p);})();
2
+ (()=>{var B=__STORYBOOK_API__,{ActiveTabs:_,Consumer:g,ManagerContext:C,Provider:T,RequestResponseError:b,Tag:v,addons:a,combineParameters:x,controlOrMetaKey:y,controlOrMetaSymbol:A,eventMatchesShortcut:E,eventToShortcut:O,experimental_MockUniversalStore:P,experimental_UniversalStore:f,experimental_getStatusStore:k,experimental_getTestProviderStore:R,experimental_requestResponse:M,experimental_useStatusStore:D,experimental_useTestProviderStore:I,experimental_useUniversalStore:N,internal_checklistStore:H,internal_fullStatusStore:K,internal_fullTestProviderStore:U,internal_universalChecklistStore:w,internal_universalStatusStore:G,internal_universalTestProviderStore:L,isMacLike:Y,isShortcutTaken:q,keyToSymbol:V,merge:W,mockChannel:j,optionOrAltSymbol:Q,shortcutMatchesShortcut:$,shortcutToAriaKeyshortcuts:z,shortcutToHumanString:J,types:X,useAddonState:Z,useArgTypes:ee,useArgs:re,useChannel:te,useGlobalTypes:oe,useGlobals:ae,useParameter:se,useSharedState:ne,useStoryPrepared:ie,useStorybookApi:le,useStorybookState:ue}=__STORYBOOK_API__;var Fe=__STORYBOOK_THEMING__,{CacheProvider:Se,ClassNames:he,Global:Be,ThemeProvider:_e,background:ge,color:Ce,convert:Te,create:o,createCache:be,createGlobal:ve,createReset:xe,css:ye,darken:Ae,ensure:Ee,getPreferredColorScheme:Oe,ignoreSsrWarning:Pe,isPropValid:fe,jsx:ke,keyframes:Re,lighten:Me,styled:De,themes:Ie,tokens:Ne,typography:He,useTheme:Ke,withTheme:Ue}=__STORYBOOK_THEMING__;var s={brandTitle:"Brightspot UI",brandImage:"./brightspot-logo.svg",brandTarget:"_self"},n=o({base:"light",...s,colorPrimary:"#F0433E",colorSecondary:"#144CEB",appBg:"#FCFCFD",appContentBg:"#FFFFFF",appPreviewBg:"#FFFFFF",appBorderColor:"#EAECF0",appBorderRadius:6,textColor:"#101828",textInverseColor:"#FFFFFF",textMutedColor:"#667085",barTextColor:"#667085",barHoverColor:"#1D2939",barSelectedColor:"#144CEB",barBg:"#F9FAFB",inputBg:"#FFFFFF",inputBorder:"#D0D5DD",inputTextColor:"#101828",inputBorderRadius:4,fontBase:'"Noto Sans", "Helvetica Neue", Arial, sans-serif',fontCode:"monospace"}),i=o({base:"dark",...s,colorPrimary:"#FDA398",colorSecondary:"#235CEF",appBg:"#1E1F21",appContentBg:"#1E1F21",appPreviewBg:"#1E1F21",appBorderColor:"#3E3E40",appBorderRadius:6,textColor:"#FAFAFA",textInverseColor:"#1E1F21",textMutedColor:"#B9B7B9",barTextColor:"#B9B7B9",barHoverColor:"#F5F5F5",barSelectedColor:"#D1E0FF",barBg:"#2A2B2D",inputBg:"#1E1F21",inputBorder:"#464648",inputTextColor:"#FAFAFA",inputBorderRadius:4,fontBase:'"Noto Sans", "Helvetica Neue", Arial, sans-serif',fontCode:"monospace"});var l=window.matchMedia("(prefers-color-scheme: dark)"),u=()=>{a.setConfig({theme:l.matches?i:n})};u();l.addEventListener("change",u);var p=document.querySelector("title");new MutationObserver(()=>{document.title.endsWith(" \u22C5 Storybook")&&(document.title=document.title.replace(/ ⋅ Storybook$/," \u22C5 Brightspot UI"))}).observe(p,{childList:!0,characterData:!0,subtree:!0});})();
3
3
  }catch(e){ console.error("[Storybook] One of your manager-entries failed: " + import.meta.url, e); }
@@ -0,0 +1,90 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
3
+ <url><loc>https://ui.brightspot.com/</loc></url>
4
+ <url><loc>https://ui.brightspot.com/?path=/docs/welcome--docs</loc></url>
5
+ <url><loc>https://ui.brightspot.com/?path=/docs/components-action-bar--docs</loc></url>
6
+ <url><loc>https://ui.brightspot.com/?path=/docs/components-action-bar-action-item--docs</loc></url>
7
+ <url><loc>https://ui.brightspot.com/?path=/docs/components-ai-sparkle--docs</loc></url>
8
+ <url><loc>https://ui.brightspot.com/?path=/docs/components-avatar--docs</loc></url>
9
+ <url><loc>https://ui.brightspot.com/?path=/docs/components-avatar-group--docs</loc></url>
10
+ <url><loc>https://ui.brightspot.com/?path=/docs/components-badge--docs</loc></url>
11
+ <url><loc>https://ui.brightspot.com/?path=/docs/components-banner--docs</loc></url>
12
+ <url><loc>https://ui.brightspot.com/?path=/docs/css-plugins-button--docs</loc></url>
13
+ <url><loc>https://ui.brightspot.com/?path=/docs/components-button-group--docs</loc></url>
14
+ <url><loc>https://ui.brightspot.com/?path=/docs/components-card--docs</loc></url>
15
+ <url><loc>https://ui.brightspot.com/?path=/docs/effects-celebrate--docs</loc></url>
16
+ <url><loc>https://ui.brightspot.com/?path=/docs/components-checkbox--docs</loc></url>
17
+ <url><loc>https://ui.brightspot.com/?path=/docs/components-circular-progress--docs</loc></url>
18
+ <url><loc>https://ui.brightspot.com/?path=/docs/mixins-clipboard--docs</loc></url>
19
+ <url><loc>https://ui.brightspot.com/?path=/docs/design-system-colors--docs</loc></url>
20
+ <url><loc>https://ui.brightspot.com/?path=/docs/effects-combined-effects--docs</loc></url>
21
+ <url><loc>https://ui.brightspot.com/?path=/docs/mixins-component-states--docs</loc></url>
22
+ <url><loc>https://ui.brightspot.com/?path=/docs/components-copy-to-clipboard--docs</loc></url>
23
+ <url><loc>https://ui.brightspot.com/?path=/docs/utilities-debounce--docs</loc></url>
24
+ <url><loc>https://ui.brightspot.com/?path=/docs/components-dropdown--docs</loc></url>
25
+ <url><loc>https://ui.brightspot.com/?path=/docs/components-empty-state--docs</loc></url>
26
+ <url><loc>https://ui.brightspot.com/?path=/docs/components-esca-avatar--docs</loc></url>
27
+ <url><loc>https://ui.brightspot.com/?path=/docs/mixins-events--docs</loc></url>
28
+ <url><loc>https://ui.brightspot.com/?path=/docs/css-plugins-heading--docs</loc></url>
29
+ <url><loc>https://ui.brightspot.com/?path=/docs/effects-hue-ripple--docs</loc></url>
30
+ <url><loc>https://ui.brightspot.com/?path=/docs/components-icon--docs</loc></url>
31
+ <url><loc>https://ui.brightspot.com/?path=/docs/components-icon-button--docs</loc></url>
32
+ <url><loc>https://ui.brightspot.com/?path=/docs/components-linear-progress--docs</loc></url>
33
+ <url><loc>https://ui.brightspot.com/?path=/docs/components-message--docs</loc></url>
34
+ <url><loc>https://ui.brightspot.com/?path=/docs/mixins-onfind-mixin--docs</loc></url>
35
+ <url><loc>https://ui.brightspot.com/?path=/docs/components-pagination--docs</loc></url>
36
+ <url><loc>https://ui.brightspot.com/?path=/docs/components-popover--docs</loc></url>
37
+ <url><loc>https://ui.brightspot.com/?path=/docs/components-radio--docs</loc></url>
38
+ <url><loc>https://ui.brightspot.com/?path=/docs/components-radio-group--docs</loc></url>
39
+ <url><loc>https://ui.brightspot.com/?path=/docs/mixins-ready-mixin--docs</loc></url>
40
+ <url><loc>https://ui.brightspot.com/?path=/docs/mixins-roving-tabindex--docs</loc></url>
41
+ <url><loc>https://ui.brightspot.com/?path=/docs/utilities-rtc--docs</loc></url>
42
+ <url><loc>https://ui.brightspot.com/?path=/docs/css-plugins-scroll-shadow--docs</loc></url>
43
+ <url><loc>https://ui.brightspot.com/?path=/docs/components-switch--docs</loc></url>
44
+ <url><loc>https://ui.brightspot.com/?path=/docs/components-tabs--docs</loc></url>
45
+ <url><loc>https://ui.brightspot.com/?path=/docs/components-tabs-tab--docs</loc></url>
46
+ <url><loc>https://ui.brightspot.com/?path=/docs/utilities-throttle--docs</loc></url>
47
+ <url><loc>https://ui.brightspot.com/?path=/docs/mixins-tooltip--docs</loc></url>
48
+ <url><loc>https://ui.brightspot.com/?path=/docs/components-upload--docs</loc></url>
49
+ <url><loc>https://ui.brightspot.com/?path=/docs/components-upload-upload-item--docs</loc></url>
50
+ <url><loc>https://ui.brightspot.com/?path=/docs/components-widget--docs</loc></url>
51
+ <url><loc>https://ui.brightspot.com/?path=/docs/utilities-onfind--docs</loc></url>
52
+ <url><loc>https://ui.brightspot.com/?path=/docs/utilities-onremove--docs</loc></url>
53
+ <url><loc>https://ui.brightspot.com/?path=/docs/utilities-onvisible--docs</loc></url>
54
+ <url><loc>https://ui.brightspot.com/llms.txt</loc></url>
55
+ <url><loc>https://ui.brightspot.com/llms-full.txt</loc></url>
56
+ <url><loc>https://ui.brightspot.com/README.md</loc></url>
57
+ <url><loc>https://ui.brightspot.com/CHANGELOG.md</loc></url>
58
+ <url><loc>https://ui.brightspot.com/docs/dari-elements.md</loc></url>
59
+ <url><loc>https://ui.brightspot.com/docs/components/ActionBar.md</loc></url>
60
+ <url><loc>https://ui.brightspot.com/docs/components/ActionItem.md</loc></url>
61
+ <url><loc>https://ui.brightspot.com/docs/components/AiSparkle.md</loc></url>
62
+ <url><loc>https://ui.brightspot.com/docs/components/Avatar.md</loc></url>
63
+ <url><loc>https://ui.brightspot.com/docs/components/AvatarGroup.md</loc></url>
64
+ <url><loc>https://ui.brightspot.com/docs/components/Badge.md</loc></url>
65
+ <url><loc>https://ui.brightspot.com/docs/components/Banner.md</loc></url>
66
+ <url><loc>https://ui.brightspot.com/docs/components/ButtonGroup.md</loc></url>
67
+ <url><loc>https://ui.brightspot.com/docs/components/Card.md</loc></url>
68
+ <url><loc>https://ui.brightspot.com/docs/components/Checkbox.md</loc></url>
69
+ <url><loc>https://ui.brightspot.com/docs/components/CircularProgress.md</loc></url>
70
+ <url><loc>https://ui.brightspot.com/docs/components/CopyToClipboard.md</loc></url>
71
+ <url><loc>https://ui.brightspot.com/docs/components/Dropdown.md</loc></url>
72
+ <url><loc>https://ui.brightspot.com/docs/components/DropdownItem.md</loc></url>
73
+ <url><loc>https://ui.brightspot.com/docs/components/DropdownMenu.md</loc></url>
74
+ <url><loc>https://ui.brightspot.com/docs/components/EmptyState.md</loc></url>
75
+ <url><loc>https://ui.brightspot.com/docs/components/EscaAvatar.md</loc></url>
76
+ <url><loc>https://ui.brightspot.com/docs/components/Icon.md</loc></url>
77
+ <url><loc>https://ui.brightspot.com/docs/components/IconButton.md</loc></url>
78
+ <url><loc>https://ui.brightspot.com/docs/components/LinearProgress.md</loc></url>
79
+ <url><loc>https://ui.brightspot.com/docs/components/Message.md</loc></url>
80
+ <url><loc>https://ui.brightspot.com/docs/components/Pagination.md</loc></url>
81
+ <url><loc>https://ui.brightspot.com/docs/components/Popover.md</loc></url>
82
+ <url><loc>https://ui.brightspot.com/docs/components/Radio.md</loc></url>
83
+ <url><loc>https://ui.brightspot.com/docs/components/RadioGroup.md</loc></url>
84
+ <url><loc>https://ui.brightspot.com/docs/components/Switch.md</loc></url>
85
+ <url><loc>https://ui.brightspot.com/docs/components/Tab.md</loc></url>
86
+ <url><loc>https://ui.brightspot.com/docs/components/Tabs.md</loc></url>
87
+ <url><loc>https://ui.brightspot.com/docs/components/Upload.md</loc></url>
88
+ <url><loc>https://ui.brightspot.com/docs/components/UploadItem.md</loc></url>
89
+ <url><loc>https://ui.brightspot.com/docs/components/Widget.md</loc></url>
90
+ </urlset>
@@ -1,78 +1,55 @@
1
- # `src/components/action-bar/ActionBar.ts`:
1
+ # `<btu-action-bar>`
2
2
 
3
- ## class: `ActionBar`, `btu-action-bar`
3
+ A persistent container for primary, secondary, tertiary, and destructive actions
4
+ within an interface, typically anchored to the bottom of a view.
4
5
 
5
- ### Superclass
6
+ Uses a two-zone layout: destructive actions on the left (start zone),
7
+ main actions on the right (end zone). Both zones maintain their position
8
+ even when the other zone is empty (BSP-18087).
6
9
 
7
- | Name | Module | Package |
8
- | ------------ | ------ | ------- |
9
- | `LitElement` | | lit |
10
+ **Positioning:** Uses `margin-top: auto` to push to bottom of flex/grid parents.
11
+ In block layout parents, the bar sits after content (a console warning is emitted).
10
12
 
11
- ### Mixins
13
+ **Overflow:** When items don't fit, the least important overflow into a "More" dropdown.
14
+ Items are auto-sorted by variant priority (tertiary → secondary → primary).
15
+ With `compact`, compactable items progressively hide labels one-by-one before overflowing.
12
16
 
13
- | Name | Module | Package |
14
- | --------------------- | -------------------------------- | ------- |
15
- | `RovingTabindexMixin` | /src/util/RovingTabindexMixin.js | |
16
- | `EventEmitterMixin` | /src/util/EventEmitterMixin.js | |
17
- | `ReadyMixin` | /src/util/ReadyMixin.js | |
17
+ ```js
18
+ import '@brightspot/ui/components/action-bar/ActionBar.js'
19
+ ```
18
20
 
19
- ### Fields
21
+ Interactive examples: https://ui.brightspot.com/?path=/docs/components-action-bar--docs
20
22
 
21
- | Name | Privacy | Type | Default | Description | Inherited From |
22
- | ------------------------- | ------- | ----------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
23
- | `position` | | `Position` | `'bottom'` | Bar position: 'top' or 'bottom' (default). | |
24
- | `sticky` | | `boolean` | `false` | Enables CSS sticky positioning. When combined with position='top',&#xA;the bar sticks to the top of the scroll container. With position='bottom'&#xA;(default), it sticks to the bottom. | |
25
- | `alignment` | | `Alignment` | `'default'` | Content alignment: 'default' (two-zone), 'start', 'center', 'end'.&#xA;Non-default alignments disable two-zone layout. | |
26
- | `shadow` | | `boolean` | `false` | Adds a box-shadow to the bar. | |
27
- | `label` | | `string` | `''` | Accessible label for the toolbar region. | |
28
- | `compact` | | `boolean` | `false` | Enables progressive label compacting. When space shrinks, items marked&#xA;\`compactable\` (with icons) have their labels hidden one-by-one&#xA;from least to most important before items overflow into "More". | |
29
- | `_initialClassesCaptured` | private | `boolean` | `false` | | |
23
+ ## Attributes
30
24
 
31
- ### Methods
25
+ | Attribute | Property | Type | Default | Description |
26
+ | --- | --- | --- | --- | --- |
27
+ | `position` | `position` | `'top' \| 'bottom'` | `'bottom'` | Bar position: 'top' or 'bottom' (default). |
28
+ | `sticky` | `sticky` | `boolean` | `false` | Enables CSS sticky positioning. When combined with position='top', the bar sticks to the top of the scroll container. With position='bottom' (default), it sticks to the bottom. |
29
+ | `item-alignment` | `alignment` | `'default' \| 'start' \| 'center' \| 'end'` | `'default'` | Content alignment: 'default' (two-zone), 'start', 'center', 'end'. Non-default alignments disable two-zone layout. |
30
+ | `shadow` | `shadow` | `boolean` | `false` | Adds a box-shadow to the bar. |
31
+ | `label` | `label` | `string` | `''` | Accessible label for the toolbar region. |
32
+ | `compact` | `compact` | `boolean` | `false` | Enables progressive label compacting. When space shrinks, items marked `compactable` (with icons) have their labels hidden one-by-one from least to most important before items overflow into "More". |
32
33
 
33
- | Name | Privacy | Description | Parameters | Return | Inherited From |
34
- | ------ | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | --------- | ----------------- |
35
- | `emit` | | Dispatches a type-safe CustomEvent with standardized configuration.&#xA;&#xA;All events are configured with:&#xA;- bubbles: true (event propagates up the DOM tree)&#xA;- cancelable: false (event cannot be cancelled)&#xA;- composed: true (event crosses shadow DOM boundaries) | `type: K, detail: UnpackCustomEvent<CustomEventMap[K]>` | `boolean` | EventEmitterMixin |
34
+ ## Events
36
35
 
37
- ### Events
36
+ | Event | Detail | Description |
37
+ | --- | --- | --- |
38
+ | `btu-action-bar-ready` | | Fired after first render and initialization |
39
+ | `btu-action-item-click` | `{label: string}` | Fired when an action item is clicked (bubbles from btu-action-item) |
38
40
 
39
- | Name | Type | Description | Inherited From |
40
- | ----------------------- | ------------------------------ | ------------------------------------------------------------------- | -------------- |
41
- | `btu-action-bar-ready` | `CustomEvent` | Fired after first render and initialization | |
42
- | `btu-action-item-click` | `CustomEvent<{label: string}>` | Fired when an action item is clicked (bubbles from btu-action-item) | |
41
+ ## Slots
43
42
 
44
- ### Attributes
43
+ | Slot | Description |
44
+ | --- | --- |
45
+ | (default) | One or more `btu-action-item` elements |
45
46
 
46
- | Name | Field | Inherited From |
47
- | ---------------- | --------- | -------------- |
48
- | `position` | position | |
49
- | `sticky` | sticky | |
50
- | `item-alignment` | alignment | |
51
- | `shadow` | shadow | |
52
- | `label` | label | |
53
- | `compact` | compact | |
47
+ ## CSS custom properties
54
48
 
55
- ### CSS Properties
56
-
57
- | Name | Default | Description |
58
- | --------------------------- | ------- | ------------------------------------ |
59
- | `--action-bar-gap` | | Gap between items (default: 0.75rem) |
60
- | `--action-bar-padding` | | Bar padding (default: 1.5rem) |
61
- | `--action-bar-background` | | Background color (default: white) |
62
- | `--action-bar-border-color` | | Border color (default: gray-200) |
63
- | `--action-bar-z-index` | | Z-index (default: 100) |
64
-
65
- ### Slots
66
-
67
- | Name | Description |
68
- | ---- | ---------------------------------------- |
69
- | | One or more \`btu-action-item\` elements |
70
-
71
- <hr/>
72
-
73
- ## Exports
74
-
75
- | Kind | Name | Declaration | Module | Package |
76
- | --------------------------- | ---------------- | ----------- | -------------------------------------- | ------- |
77
- | `js` | `default` | ActionBar | src/components/action-bar/ActionBar.ts | |
78
- | `custom-element-definition` | `btu-action-bar` | ActionBar | src/components/action-bar/ActionBar.ts | |
49
+ | Property | Description |
50
+ | --- | --- |
51
+ | `--action-bar-gap` | Gap between items (default: 0.75rem) |
52
+ | `--action-bar-padding` | Bar padding (default: 1.5rem) |
53
+ | `--action-bar-background` | Background color (default: white) |
54
+ | `--action-bar-border-color` | Border color (default: gray-200) |
55
+ | `--action-bar-z-index` | Z-index (default: 100) |
@@ -1,96 +1,50 @@
1
- # `src/components/action-bar/ActionItem.ts`:
2
-
3
- ## class: `ActionItem`, `btu-action-item`
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` | `''` | Button label text. | |
24
- | `variant` | | `ActionItemVariant` | `'secondary'` | Visual variant: 'primary', 'secondary', 'tertiary', 'destructive'. | |
25
- | `symbol` | | `string` | `''` | Lucide icon symbol for the leading icon. | |
26
- | `iconOnly` | | `boolean` | `false` | Show icon only, hiding the label. Tooltip activates automatically with the label text. | |
27
- | `disabled` | | `boolean` | `false` | Disables the action item. The button remains focusable for accessibility&#xA;but click events are suppressed. | |
28
- | `loading` | | `boolean` | `false` | Shows a loading spinner and prevents interaction. | |
29
- | `zone` | | `'start' \| 'end' \| ''` | `''` | Zone placement: 'start' or 'end'. Used by ActionBar for two-zone layout.&#xA;If unset, auto-detected from variant (destructive → start, others → end). | |
30
- | `compactable` | | `boolean` | `false` | Opt-in for progressive label compacting. When the parent bar has \`compact\`&#xA;enabled and space shrinks, compactable items with icons have their labels&#xA;hidden one-by-one (least important first) before overflowing.&#xA;Items without an icon ignore this attribute and go directly to overflow. | |
31
- | `tooltip` | | `string` | `''` | Tooltip text content. Set to empty string to remove the tooltip. | TooltipMixin |
32
- | `tooltipPosition` | | `'top' \| 'bottom' \| 'left' \| 'right'` | `'top'` | Position relative to the host element. Auto-flips when constrained by the viewport. | TooltipMixin |
33
- | `tooltipDelay` | | `number` | `300` | Show delay in milliseconds (hover trigger only). | TooltipMixin |
34
- | `tooltipOffset` | | `TooltipOffset \| null` | `null` | Gap between host and tooltip (sm=4px, md=8px, lg=12px, xl=16px). | TooltipMixin |
35
- | `tooltipNoArrow` | | `boolean` | `false` | Hide the arrow pseudo-element. | TooltipMixin |
36
- | `tooltipTrigger` | | `string` | `'hover focus'` | Space-separated trigger types: 'hover', 'focus', 'click'. | TooltipMixin |
37
- | `_onMouseLeave` | private | | | | TooltipMixin |
38
- | `_onFocusIn` | private | | | | TooltipMixin |
39
- | `_onFocusOut` | private | | | | TooltipMixin |
40
- | `_onClick` | private | | | | TooltipMixin |
41
- | `_onNativeToggle` | private | | | | TooltipMixin |
42
- | `_onKeyDown` | private | | | | TooltipMixin |
43
- | `_onDocumentClick` | private | `((e: MouseEvent) => void) \| null` | `null` | | TooltipMixin |
44
-
45
- ### Methods
46
-
47
- | Name | Privacy | Description | Parameters | Return | Inherited From |
48
- | --------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------------------------ | ----------------- |
49
- | `_relayTooltipAttrs` | private | | | `void` | |
50
- | `_handleClick` | private | | | `void` | |
51
- | `_getSpinnerColor` | private | | | `string` | |
52
- | `_buildButtonClasses` | private | | | `string` | |
53
- | `_getButtonStyles` | private | | | `Record<string, string>` | |
54
- | `emit` | | Dispatches a type-safe CustomEvent with standardized configuration.&#xA;&#xA;All events are configured with:&#xA;- bubbles: true (event propagates up the DOM tree)&#xA;- cancelable: false (event cannot be cancelled)&#xA;- composed: true (event crosses shadow DOM boundaries) | `type: K, detail: UnpackCustomEvent<CustomEventMap[K]>` | `boolean` | EventEmitterMixin |
55
-
56
- ### Events
57
-
58
- | Name | Type | Description | Inherited From |
59
- | ----------------------- | ------------------------------ | -------------------------------------------------------------------------- | -------------- |
60
- | `btu-action-item-click` | `CustomEvent<{label: string}>` | Fired when the action item is clicked (not fired when disabled or loading) | |
61
-
62
- ### Attributes
63
-
64
- | Name | Field | Inherited From |
65
- | ------------------ | --------------- | -------------- |
66
- | `label` | label | |
67
- | `variant` | variant | |
68
- | `symbol` | symbol | |
69
- | `icon-only` | iconOnly | |
70
- | `disabled` | disabled | |
71
- | `loading` | loading | |
72
- | `zone` | zone | |
73
- | `compactable` | compactable | |
74
- | `tooltip` | tooltip | TooltipMixin |
75
- | `tooltip-position` | tooltipPosition | TooltipMixin |
76
- | `tooltip-delay` | tooltipDelay | TooltipMixin |
77
- | `tooltip-offset` | tooltipOffset | TooltipMixin |
78
- | `tooltip-no-arrow` | tooltipNoArrow | TooltipMixin |
79
- | `tooltip-trigger` | tooltipTrigger | TooltipMixin |
80
-
81
- ### CSS Properties
82
-
83
- | Name | Default | Description |
84
- | ------------------------ | ------- | -------------------------------- |
85
- | `--button-color` | | Override button background color |
86
- | `--button-text-color` | | Override button text color |
87
- | `--button-border-radius` | | Override button border radius |
88
-
89
- <hr/>
90
-
91
- ## Exports
92
-
93
- | Kind | Name | Declaration | Module | Package |
94
- | --------------------------- | ----------------- | ----------- | --------------------------------------- | ------- |
95
- | `js` | `default` | ActionItem | src/components/action-bar/ActionItem.ts | |
96
- | `custom-element-definition` | `btu-action-item` | ActionItem | src/components/action-bar/ActionItem.ts | |
1
+ # `<btu-action-item>`
2
+
3
+ An action item button for use within `btu-action-bar`.
4
+
5
+ Renders a styled button using existing `btu-button-*` classes. Supports
6
+ primary, secondary, tertiary, and destructive variants. When `iconOnly`
7
+ is set, the label is hidden and a tooltip is shown instead.
8
+
9
+ **Button styling:** Set `--button-*` CSS custom properties on `<btu-action-item>`
10
+ or a parent element to customize via CSS inheritance. See
11
+ `tailwind-plugin-button.ts` for available props.
12
+
13
+ ```js
14
+ import '@brightspot/ui/components/action-bar/ActionItem.js'
15
+ ```
16
+
17
+ Interactive examples: https://ui.brightspot.com/?path=/docs/components-action-bar-action-item--docs
18
+
19
+ ## Attributes
20
+
21
+ | Attribute | Property | Type | Default | Description |
22
+ | --- | --- | --- | --- | --- |
23
+ | `label` | `label` | `string` | `''` | Button label text. |
24
+ | `variant` | `variant` | `'primary' \| 'secondary' \| 'tertiary' \| 'destructive'` | `'secondary'` | Visual variant: 'primary', 'secondary', 'tertiary', 'destructive'. |
25
+ | `symbol` | `symbol` | `string` | `''` | Lucide icon symbol for the leading icon. |
26
+ | `icon-only` | `iconOnly` | `boolean` | `false` | Show icon only, hiding the label. Tooltip activates automatically with the label text. |
27
+ | `disabled` | `disabled` | `boolean` | `false` | Disables the action item. The button remains focusable for accessibility but click events are suppressed. |
28
+ | `loading` | `loading` | `boolean` | `false` | Shows a loading spinner and prevents interaction. |
29
+ | `zone` | `zone` | `'start' \| 'end' \| ''` | `''` | Zone placement: 'start' or 'end'. Used by ActionBar for two-zone layout. If unset, auto-detected from variant (destructive → start, others → end). |
30
+ | `compactable` | `compactable` | `boolean` | `false` | Opt-in for progressive label compacting. When the parent bar has `compact` enabled and space shrinks, compactable items with icons have their labels hidden one-by-one (least important first) before overflowing. Items without an icon ignore this attribute and go directly to overflow. |
31
+ | `tooltip` | `tooltip` | `string` | `''` | Tooltip text content. Set to empty string to remove the tooltip. |
32
+ | `tooltip-position` | `tooltipPosition` | `'top' \| 'bottom' \| 'left' \| 'right'` | `'top'` | Position relative to the host element. Auto-flips when constrained by the viewport. |
33
+ | `tooltip-delay` | `tooltipDelay` | `number` | `300` | Show delay in milliseconds (hover trigger only). |
34
+ | `tooltip-offset` | `tooltipOffset` | `'sm' \| 'md' \| 'lg' \| 'xl' \| null` | `null` | Gap between host and tooltip (sm=4px, md=8px, lg=12px, xl=16px). |
35
+ | `tooltip-no-arrow` | `tooltipNoArrow` | `boolean` | `false` | Hide the arrow pseudo-element. |
36
+ | `tooltip-trigger` | `tooltipTrigger` | `string` | `'hover focus'` | Space-separated trigger types: 'hover', 'focus', 'click'. |
37
+
38
+ ## Events
39
+
40
+ | Event | Detail | Description |
41
+ | --- | --- | --- |
42
+ | `btu-action-item-click` | `{label: string}` | Fired when the action item is clicked (not fired when disabled or loading) |
43
+
44
+ ## CSS custom properties
45
+
46
+ | Property | Description |
47
+ | --- | --- |
48
+ | `--button-color` | Override button background color |
49
+ | `--button-text-color` | Override button text color |
50
+ | `--button-border-radius` | Override button border radius |