@brightspot/ui 6.3.5 → 6.4.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 (142) hide show
  1. package/README.md +2 -0
  2. package/dist/components/popover/Popover.d.ts +21 -0
  3. package/dist/components/popover/Popover.d.ts.map +1 -1
  4. package/dist/components/popover/Popover.js +85 -0
  5. package/dist/components/popover/Popover.js.map +1 -1
  6. package/dist/components/tabs/Tab.d.ts +1 -1
  7. package/dist/components/tabs/Tab.js +1 -1
  8. package/dist/custom-elements.json +14 -1
  9. package/dist/storybook/assets/{ActionBar.stories-CgkvHW27.js → ActionBar.stories-CyrWbZkU.js} +1 -1
  10. package/dist/storybook/assets/{ActionItem.stories-CyxwhrvR.js → ActionItem.stories-D289PqhK.js} +1 -1
  11. package/dist/storybook/assets/{AiSparkle.stories-h2LSw10e.js → AiSparkle.stories-Dej2Wktc.js} +1 -1
  12. package/dist/storybook/assets/{Avatar.stories-CQ3eFTbI.js → Avatar.stories-DGUhUkwq.js} +1 -1
  13. package/dist/storybook/assets/{AvatarGroup.stories-CIyZOd7R.js → AvatarGroup.stories-CPwRaMIK.js} +1 -1
  14. package/dist/storybook/assets/{Badge.stories-CwPkYUuY.js → Badge.stories-0KzitC2n.js} +1 -1
  15. package/dist/storybook/assets/{Banner.stories-B7AhWymc.js → Banner.stories-DNtqnXAp.js} +1 -1
  16. package/dist/storybook/assets/{Button-fLz-Mqji.js → Button-CWHtTXwM.js} +1 -1
  17. package/dist/storybook/assets/{Button.stories-Bj_cB5Tr.js → Button.stories-Bi-MajOM.js} +1 -1
  18. package/dist/storybook/assets/{ButtonGroup.stories-DMAr8q3A.js → ButtonGroup.stories-DRVCaM3T.js} +1 -1
  19. package/dist/storybook/assets/{Card.stories-CouVkvTr.js → Card.stories-Ca21MUf2.js} +1 -1
  20. package/dist/storybook/assets/{Celebrate.stories-Cai7aITx.js → Celebrate.stories-d4ouDVSf.js} +1 -1
  21. package/dist/storybook/assets/{Checkbox.stories-BTzuHih7.js → Checkbox.stories-DGYMCoPL.js} +1 -1
  22. package/dist/storybook/assets/{CircularProgress.stories-DwiMDCrW.js → CircularProgress.stories-TLUKn59S.js} +1 -1
  23. package/dist/storybook/assets/{ClipboardMixin.stories-BTzKKsAG.js → ClipboardMixin.stories-D4sLLX3A.js} +1 -1
  24. package/dist/storybook/assets/{Color-6BZIO3FS-z5x4axZs.js → Color-6BZIO3FS-DasxsVys.js} +1 -1
  25. package/dist/storybook/assets/{Colors.stories-LjQN3QJP.js → Colors.stories-BcaxhrWi.js} +1 -1
  26. package/dist/storybook/assets/{CombinedEffects.stories-CcWkxBPD.js → CombinedEffects.stories-Da1vPYog.js} +1 -1
  27. package/dist/storybook/assets/{ComponentStatesMixin-6JmalSeW.js → ComponentStatesMixin-C5-EArF-.js} +1 -1
  28. package/dist/storybook/assets/{ComponentStatesMixin.stories-wr7wl9D5.js → ComponentStatesMixin.stories-DPp1pnlh.js} +1 -1
  29. package/dist/storybook/assets/{CopyToClipboard.stories-CBL_GlzJ.js → CopyToClipboard.stories-CrYOAXIE.js} +1 -1
  30. package/dist/storybook/assets/{Debounce.stories-DDW0347e.js → Debounce.stories-OHpSSOWP.js} +1 -1
  31. package/dist/storybook/assets/{DocsRenderer-LL677BLK-LHrG4h5r.js → DocsRenderer-LL677BLK-BBjqnKJz.js} +3 -3
  32. package/dist/storybook/assets/{Dropdown.stories-BixGKdVC.js → Dropdown.stories-Ca_3OzYk.js} +1 -1
  33. package/dist/storybook/assets/{EmptyState.stories-DYCizkT5.js → EmptyState.stories-IJOBvkeQ.js} +1 -1
  34. package/dist/storybook/assets/{EscaAvatar.stories-IV0FybUu.js → EscaAvatar.stories-Ca5mrHK5.js} +1 -1
  35. package/dist/storybook/assets/{Events.stories-9X1B5LFU.js → Events.stories-mk3o4H-1.js} +1 -1
  36. package/dist/storybook/assets/{Heading.stories-BWFKyeYP.js → Heading.stories-BCmCdDGL.js} +1 -1
  37. package/dist/storybook/assets/{HueRipple.stories-KJySD4yc.js → HueRipple.stories-DFtimmD-.js} +1 -1
  38. package/dist/storybook/assets/{Icon.stories-n4-_RBwe.js → Icon.stories-CfsBM1vA.js} +1 -1
  39. package/dist/storybook/assets/{IconButton.stories--cc9Az0q.js → IconButton.stories-BqMbwr3s.js} +1 -1
  40. package/dist/storybook/assets/{LinearProgress.stories-CXISMQqr.js → LinearProgress.stories-BWdemzi0.js} +1 -1
  41. package/dist/storybook/assets/{Message.stories-DCgZ9H2r.js → Message.stories-Z_H9PmGg.js} +1 -1
  42. package/dist/storybook/assets/{OnFindMixin.stories-DwYEl4q4.js → OnFindMixin.stories-DmCtF_Py.js} +1 -1
  43. package/dist/storybook/assets/{Pagination.stories-B8AqV3jI.js → Pagination.stories-BbiH-XdZ.js} +1 -1
  44. package/dist/storybook/assets/{Popover.stories-Dj8TUysk.js → Popover.stories-bxWb2l8c.js} +97 -14
  45. package/dist/storybook/assets/{ReadyMixin-B1y8EBLz.js → ReadyMixin-DehOcbYB.js} +1 -1
  46. package/dist/storybook/assets/{RovingTabindexMixin.stories-BTYV78Cy.js → RovingTabindexMixin.stories-PDi3Gbmt.js} +1 -1
  47. package/dist/storybook/assets/{Rtc.stories-CiQ4OgEf.js → Rtc.stories-fVPUs7VO.js} +1 -1
  48. package/dist/storybook/assets/{ScrollShadow.stories-BRpbl9WU.js → ScrollShadow.stories-D7MTe49h.js} +1 -1
  49. package/dist/storybook/assets/{Switch.stories-Dfw56-LB.js → Switch.stories-_Xgp_9V4.js} +1 -1
  50. package/dist/storybook/assets/{Tab.stories-DCIPSPwr.js → Tab.stories-DgO_oZX0.js} +4 -4
  51. package/dist/storybook/assets/{Tabs.stories-DrT2D2oW.js → Tabs.stories-ChN1szFL.js} +1 -1
  52. package/dist/storybook/assets/{Throttle.stories-B5Y8K9s3.js → Throttle.stories-ClFkiAMe.js} +1 -1
  53. package/dist/storybook/assets/{Tooltip.stories-CUjm8cuW.js → Tooltip.stories-BHOdZEw2.js} +1 -1
  54. package/dist/storybook/assets/{Upload.stories-Dt7V8qIe.js → Upload.stories-BLs0X2F6.js} +1 -1
  55. package/dist/storybook/assets/{UploadItem.stories-DSXxGs8M.js → UploadItem.stories-CHCpPL7t.js} +1 -1
  56. package/dist/storybook/assets/{Welcome.stories-BDFQb8oF.js → Welcome.stories-DLoiQCnZ.js} +1 -1
  57. package/dist/storybook/assets/{Widget.stories-CQnE1dST.js → Widget.stories-Bk4jjx7Q.js} +1 -1
  58. package/dist/storybook/assets/{WithTooltip-65CFNBJE-D1OYJPzp.js → WithTooltip-65CFNBJE-Ckgk7wzk.js} +1 -1
  59. package/dist/storybook/assets/{blocks-Z0quNc1U.js → blocks-wSKOBuKH.js} +5 -5
  60. package/dist/storybook/assets/{formatter-EIJCOSYU-DwWzDvJC.js → formatter-EIJCOSYU-DEpJ5Gq0.js} +1 -1
  61. package/dist/storybook/assets/if-defined-DphVHb7j.js +1 -0
  62. package/dist/storybook/assets/{iframe-WTEmYHJj.js → iframe-BSHPpSig.js} +4 -4
  63. package/dist/storybook/assets/iframe-D7jBrFjV.css +1 -0
  64. package/dist/storybook/assets/{index-BvPCa7_B.js → index-Cn8vvE6a.js} +1 -1
  65. package/dist/storybook/assets/{onFind-CqIRRMTv.js → onFind-DJOHkvQ2.js} +1 -1
  66. package/dist/storybook/assets/{onFind.stories-C4PPQTaQ.js → onFind.stories-CTmXCV_g.js} +1 -1
  67. package/dist/storybook/assets/{onRemove.stories-BGFCh6DN.js → onRemove.stories-r7-2gQn3.js} +1 -1
  68. package/dist/storybook/assets/{onVisible.stories-4ni7syfJ.js → onVisible.stories-B_Lx-0SL.js} +1 -1
  69. package/dist/storybook/assets/{style-map-BhvFBtuB.js → style-map-uSz4USKK.js} +1 -1
  70. package/dist/storybook/assets/{syntaxhighlighter-ED5Y7EFY-D_cJwnoJ.js → syntaxhighlighter-ED5Y7EFY-D36nxrU2.js} +1 -1
  71. package/dist/storybook/iframe.html +2 -2
  72. package/dist/storybook/index.json +1 -1
  73. package/dist/storybook/project.json +1 -1
  74. package/dist/tailwind-plugin-badge.js +2 -2
  75. package/dist/tailwind-plugin-badge.ts +3 -3
  76. package/dist/tailwind-plugin-button-group.js +50 -27
  77. package/dist/tailwind-plugin-button-group.js.map +1 -1
  78. package/dist/tailwind-plugin-button-group.ts +61 -33
  79. package/dist/tailwind-plugin-button.js +15 -5
  80. package/dist/tailwind-plugin-button.js.map +1 -1
  81. package/dist/tailwind-plugin-button.ts +16 -5
  82. package/dist/tailwind-plugin-pagination.js +4 -1
  83. package/dist/tailwind-plugin-pagination.js.map +1 -1
  84. package/dist/tailwind-plugin-pagination.ts +4 -1
  85. package/dist/tailwind-plugin-popover.js +90 -23
  86. package/dist/tailwind-plugin-popover.js.map +1 -1
  87. package/dist/tailwind-plugin-popover.ts +95 -25
  88. package/dist/tailwind-plugin-tooltip.js +3 -0
  89. package/dist/tailwind-plugin-tooltip.js.map +1 -1
  90. package/dist/tailwind-plugin-tooltip.ts +3 -0
  91. package/docs/components/ActionBar.md +9 -8
  92. package/docs/components/Avatar.md +20 -19
  93. package/docs/components/AvatarGroup.md +5 -4
  94. package/docs/components/Badge.md +8 -7
  95. package/docs/components/ButtonGroup.md +12 -11
  96. package/docs/components/Icon.md +8 -7
  97. package/docs/components/Pagination.md +19 -18
  98. package/docs/components/Popover.md +21 -17
  99. package/docs/components/Tab.md +13 -12
  100. package/docs/components/Tabs.md +13 -12
  101. package/package.json +1 -1
  102. package/src/legacy/tool-ui/src/Admin.css +10 -1
  103. package/src/legacy/tool-ui/src/CodeMirror.css +4 -3
  104. package/src/legacy/tool-ui/src/ContentInputGroup.css +86 -62
  105. package/src/legacy/tool-ui/src/ContentInputGroup.ts +33 -0
  106. package/src/legacy/tool-ui/src/Conversation.ts +3 -0
  107. package/src/legacy/tool-ui/src/Entry.ts +1 -0
  108. package/src/legacy/tool-ui/src/Global.d.ts +3 -0
  109. package/src/legacy/tool-ui/src/LocationMap.css +106 -2
  110. package/src/legacy/tool-ui/src/MenuView.css +1 -2
  111. package/src/legacy/tool-ui/src/NewTabLinks.ts +25 -0
  112. package/src/legacy/tool-ui/src/Notification.css +20 -2
  113. package/src/legacy/tool-ui/src/Notifications.ts +5 -0
  114. package/src/legacy/tool-ui/src/RepeatableContentInputGroup.css +28 -21
  115. package/src/legacy/tool-ui/src/RepeatableContentSelector.css +50 -50
  116. package/src/legacy/tool-ui/src/SearchResult.css +5 -0
  117. package/src/legacy/tool-ui/src/Suggestions.css +1 -1
  118. package/src/legacy/tool-ui/src/form/CodeInput/CodeMirror.ts +0 -1
  119. package/src/legacy/tool-ui/src/main/webapp/dist/130.8cc1870de35c48fb16bc.js +1 -0
  120. package/src/legacy/tool-ui/src/main/webapp/dist/CodeMirror.deeefe0da1691332b8d9.js +1 -0
  121. package/src/legacy/tool-ui/src/main/webapp/dist/{RTEProseMirror.420477026fe7508c83cf.js → RTEProseMirror.3ab7e02ee7ea42af94e5.js} +6 -6
  122. package/src/legacy/tool-ui/src/main/webapp/dist/iframeResizer.contentWindow.min.ea954ff5c2278da22eb4.js +2 -0
  123. package/src/legacy/tool-ui/src/main/webapp/dist/iframeResizer.contentWindow.min.ea954ff5c2278da22eb4.js.LICENSE.txt +7 -0
  124. package/src/legacy/tool-ui/src/main/webapp/dist/lucide.a0ab0ebd23916ff7c28c.woff2 +0 -0
  125. package/src/legacy/tool-ui/src/main/webapp/dist/{v4.f3d988f6f7e664a8ac1f.js → v4.77773a9500063c0e2e37.js} +6 -6
  126. package/src/legacy/tool-ui/src/main/webapp/dist/v4.d48271241dbf3eecc14e.css +3 -0
  127. package/src/legacy/tool-ui/src/main/webapp/dist/v5.78c144a01e1cf543642b.css +5 -0
  128. package/src/legacy/tool-ui/src/main/webapp/dist/{v5.9aca525c9803b3173f73.js → v5.9f309b0ce98df4565933.js} +6 -6
  129. package/src/legacy/tool-ui/src/main/webapp/v4/ContentEdit.less +1 -0
  130. package/src/legacy/tool-ui/src/main/webapp/v4/Entry.less +7 -0
  131. package/src/legacy/tool-ui/src/main/webapp/v4/SearchResult.less +7 -0
  132. package/src/legacy/tool-ui/src/v5.css +9 -0
  133. package/src/legacy/tool-ui/src/v5.ts +13 -0
  134. package/dist/storybook/assets/if-defined-Dl8MuiCE.js +0 -1
  135. package/dist/storybook/assets/iframe-HDp5BmO_.css +0 -1
  136. package/src/legacy/tool-ui/src/main/webapp/dist/2825.c1342ac2662d11fd4125.js +0 -1
  137. package/src/legacy/tool-ui/src/main/webapp/dist/CodeMirror.5ddffe054374f883d6f8.js +0 -1
  138. package/src/legacy/tool-ui/src/main/webapp/dist/v4.05d6a78ae435b930dd53.css +0 -3
  139. package/src/legacy/tool-ui/src/main/webapp/dist/v5.95b7459d6c50c61b6480.css +0 -5
  140. /package/src/legacy/tool-ui/src/main/webapp/dist/{RTEProseMirror.420477026fe7508c83cf.js.LICENSE.txt → RTEProseMirror.3ab7e02ee7ea42af94e5.js.LICENSE.txt} +0 -0
  141. /package/src/legacy/tool-ui/src/main/webapp/dist/{v4.f3d988f6f7e664a8ac1f.js.LICENSE.txt → v4.77773a9500063c0e2e37.js.LICENSE.txt} +0 -0
  142. /package/src/legacy/tool-ui/src/main/webapp/dist/{v5.9aca525c9803b3173f73.js.LICENSE.txt → v5.9f309b0ce98df4565933.js.LICENSE.txt} +0 -0
@@ -1,4 +1,4 @@
1
- import{g as S,x as t}from"./iframe-WTEmYHJj.js";import{o as f}from"./style-map-BhvFBtuB.js";import"./preload-helper-PPVm8Dsz.js";const{events:O,args:A,argTypes:n}=S("btu-dropdown"),B={title:"Components/Dropdown",component:"btu-dropdown",tags:["autodocs"],parameters:{docs:{subtitle:"btu-dropdown",description:{component:`
1
+ import{g as S,x as t}from"./iframe-BSHPpSig.js";import{o as f}from"./style-map-uSz4USKK.js";import"./preload-helper-PPVm8Dsz.js";const{events:O,args:A,argTypes:n}=S("btu-dropdown"),B={title:"Components/Dropdown",component:"btu-dropdown",tags:["autodocs"],parameters:{docs:{subtitle:"btu-dropdown",description:{component:`
2
2
  A dropdown menu component that renders a trigger button and manages a floating panel
3
3
  containing a \`btu-dropdown-menu\` with \`btu-dropdown-item\` children.
4
4
 
@@ -1,4 +1,4 @@
1
- import{g as u,x as e}from"./iframe-WTEmYHJj.js";import{o as m}from"./if-defined-Dl8MuiCE.js";import{o as h}from"./style-map-BhvFBtuB.js";import"./preload-helper-PPVm8Dsz.js";const{events:b,args:g,argTypes:s}=u("btu-empty-state"),y=["sm","md","lg"],v=[1,2,3,4,5,6],k={title:"Components/Empty State",component:"btu-empty-state",tags:["autodocs"],parameters:{docs:{subtitle:"A standardized component for communicating the absence of content.",description:{component:`
1
+ import{g as u,x as e}from"./iframe-BSHPpSig.js";import{o as m}from"./if-defined-DphVHb7j.js";import{o as h}from"./style-map-uSz4USKK.js";import"./preload-helper-PPVm8Dsz.js";const{events:b,args:g,argTypes:s}=u("btu-empty-state"),y=["sm","md","lg"],v=[1,2,3,4,5,6],k={title:"Components/Empty State",component:"btu-empty-state",tags:["autodocs"],parameters:{docs:{subtitle:"A standardized component for communicating the absence of content.",description:{component:`
2
2
  <h3>When to use:</h3>
3
3
  <ul>
4
4
  <li>To communicate the absence of content in tables, lists, or search results</li>
@@ -1,4 +1,4 @@
1
- import{g as f,x as a}from"./iframe-WTEmYHJj.js";import{o as x}from"./style-map-BhvFBtuB.js";import"./preload-helper-PPVm8Dsz.js";const{events:w,args:z,argTypes:m}=f("btu-esca-avatar"),g=["idle","wave","search","complete","glow"],y=["xs","sm","md","lg","xl"],$={title:"Components/Esca/Avatar",component:"btu-esca-avatar",tags:["autodocs"],parameters:{docs:{subtitle:"The animated avatar for the Esca AI assistant",description:{component:`
1
+ import{g as f,x as a}from"./iframe-BSHPpSig.js";import{o as x}from"./style-map-uSz4USKK.js";import"./preload-helper-PPVm8Dsz.js";const{events:w,args:z,argTypes:m}=f("btu-esca-avatar"),g=["idle","wave","search","complete","glow"],y=["xs","sm","md","lg","xl"],$={title:"Components/Esca/Avatar",component:"btu-esca-avatar",tags:["autodocs"],parameters:{docs:{subtitle:"The animated avatar for the Esca AI assistant",description:{component:`
2
2
  <h3>When to use:</h3>
3
3
  <ul>
4
4
  <li>Alongside the Esca assistant's messages, in any chat surface</li>
@@ -1,4 +1,4 @@
1
- import{x as d}from"./iframe-WTEmYHJj.js";import"./preload-helper-PPVm8Dsz.js";var n=Object.freeze,r=Object.defineProperty,s=(t,i)=>n(r(t,"raw",{value:n(t.slice())})),o;const l={title:"Mixins/Events",tags:["autodocs"],parameters:{docs:{subtitle:"Events inherited from EventEmitterMixin",description:{component:`
1
+ import{x as d}from"./iframe-BSHPpSig.js";import"./preload-helper-PPVm8Dsz.js";var n=Object.freeze,r=Object.defineProperty,s=(t,i)=>n(r(t,"raw",{value:n(t.slice())})),o;const l={title:"Mixins/Events",tags:["autodocs"],parameters:{docs:{subtitle:"Events inherited from EventEmitterMixin",description:{component:`
2
2
  <h3>EventEmitterMixin Events</h3>
3
3
 
4
4
  <p>All Brightspot UI components that extend EventEmitterMixin emit the following lifecycle events in addition to those inherited from LitElement. These events use CustomEvent and bubble through the DOM with <code>composed: true</code>, meaning they cross shadow DOM boundaries.</p>
@@ -1,3 +1,3 @@
1
- import{x as s}from"./iframe-WTEmYHJj.js";import"./preload-helper-PPVm8Dsz.js";const r=({size:t})=>s` <div class=${[`btu-heading-${t}`].join(" ")}>Heading</div> `,o={title:"CSS Plugins/Heading",component:"btu-heading",tags:["autodocs"],parameters:{docs:{subtitle:"This Tailwind CSS plugin provides the `.btu-heading` utility class for styling headings. It supports five different sizes, from 1 (largest) to 5 (smallest). Apply the class to `<h1>` through `<h5>` elements to style them accordingly."},controls:{expanded:!0}},render:t=>r(t),argTypes:{size:{control:{type:"range",min:1,max:5,step:1},description:"Heading size from 1 to 5, where 1 is the largest and 5 is the smallest."}},args:{size:1}},e={args:{}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
1
+ import{x as s}from"./iframe-BSHPpSig.js";import"./preload-helper-PPVm8Dsz.js";const r=({size:t})=>s` <div class=${[`btu-heading-${t}`].join(" ")}>Heading</div> `,o={title:"CSS Plugins/Heading",component:"btu-heading",tags:["autodocs"],parameters:{docs:{subtitle:"This Tailwind CSS plugin provides the `.btu-heading` utility class for styling headings. It supports five different sizes, from 1 (largest) to 5 (smallest). Apply the class to `<h1>` through `<h5>` elements to style them accordingly."},controls:{expanded:!0}},render:t=>r(t),argTypes:{size:{control:{type:"range",min:1,max:5,step:1},description:"Heading size from 1 to 5, where 1 is the largest and 5 is the smallest."}},args:{size:1}},e={args:{}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
2
2
  args: {}
3
3
  }`,...e.parameters?.docs?.source}}};const n=["Default"];export{e as Default,n as __namedExportsOrder,o as default};
@@ -1,4 +1,4 @@
1
- import{x as i}from"./iframe-WTEmYHJj.js";import{b as l}from"./ripple-DQbyyRUw.js";import{B as e}from"./Button-fLz-Mqji.js";import"./preload-helper-PPVm8Dsz.js";import"./position-CFNQy3J6.js";const m={title:"Effects/Hue Ripple",tags:["autodocs"],parameters:{docs:{subtitle:"Click anywhere to send a hue-shifting ripple across the viewport",description:{component:`
1
+ import{x as i}from"./iframe-BSHPpSig.js";import{b as l}from"./ripple-DQbyyRUw.js";import{B as e}from"./Button-CWHtTXwM.js";import"./preload-helper-PPVm8Dsz.js";import"./position-CFNQy3J6.js";const m={title:"Effects/Hue Ripple",tags:["autodocs"],parameters:{docs:{subtitle:"Click anywhere to send a hue-shifting ripple across the viewport",description:{component:`
2
2
  Uses the **View Transition API** to create an expanding ring that reveals OKLCH-shifted colors as it sweeps past each element, then they return to normal.
3
3
 
4
4
  ### Usage
@@ -1,4 +1,4 @@
1
- import{g as v,x as s}from"./iframe-WTEmYHJj.js";import{o as x}from"./if-defined-Dl8MuiCE.js";import{o as f}from"./style-map-BhvFBtuB.js";import{L as g}from"./LucideDynamicLoader-THr3lc5T.js";import"./preload-helper-PPVm8Dsz.js";const h={facebook:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="100 100 500 500" fill="currentColor"><path d="M600.0,350.0C600.0,211.929 488.071,100.0 350.0,100.0C211.929,100.0 100.0,211.929 100.0,350.0C100.0,467.245 180.715,565.622 289.606,592.638L289.606,426.396L238.054,426.396L238.054,350.0L289.606,350.0L289.606,317.081C289.606,231.989 328.114,192.549 411.654,192.549C427.492,192.549 454.821,195.654 466.001,198.76L466.001,268.014C460.1,267.393 449.852,267.082 437.119,267.082C396.126,267.082 380.287,282.61 380.287,322.982L380.287,350.0L461.946,350.0L447.918,426.396L380.287,426.396L380.287,598.169C504.073,583.218 600.0,477.818 600.0,350.0Z"/></svg>',instagram:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" fill="currentColor"><path d="M295.42,6c-53.2,2.51-89.53,11-121.29,23.48-32.87,12.81-60.73,30-88.45,57.82S40.89,143,28.17,175.92c-12.31,31.83-20.65,68.19-23,121.42S2.3,367.68,2.56,503.46,3.42,656.26,6,709.6c2.54,53.19,11,89.51,23.48,121.28,12.83,32.87,30,60.72,57.83,88.45S143,964.09,176,976.83c31.8,12.29,68.17,20.67,121.39,23s70.35,2.87,206.09,2.61,152.83-.86,206.16-3.39S799.1,988,830.88,975.58c32.87-12.86,60.74-30,88.45-57.84S964.1,862,976.81,829.06c12.32-31.8,20.69-68.17,23-121.35,2.33-53.37,2.88-70.41,2.62-206.17s-.87-152.78-3.4-206.1-11-89.53-23.47-121.32c-12.85-32.87-30-60.7-57.82-88.45S862,40.87,829.07,28.19c-31.82-12.31-68.17-20.7-121.39-23S637.33,2.3,501.54,2.56,348.75,3.4,295.42,6m5.84,903.88c-48.75-2.12-75.22-10.22-92.86-17-23.36-9-40-19.88-57.58-37.29s-28.38-34.11-37.5-57.42c-6.85-17.64-15.1-44.08-17.38-92.83-2.48-52.69-3-68.51-3.29-202s.22-149.29,2.53-202c2.08-48.71,10.23-75.21,17-92.84,9-23.39,19.84-40,37.29-57.57s34.1-28.39,57.43-37.51c17.62-6.88,44.06-15.06,92.79-17.38,52.73-2.5,68.53-3,202-3.29s149.31.21,202.06,2.53c48.71,2.12,75.22,10.19,92.83,17,23.37,9,40,19.81,57.57,37.29s28.4,34.07,37.52,57.45c6.89,17.57,15.07,44,17.37,92.76,2.51,52.73,3.08,68.54,3.32,202s-.23,149.31-2.54,202c-2.13,48.75-10.21,75.23-17,92.89-9,23.35-19.85,40-37.31,57.56s-34.09,28.38-57.43,37.5c-17.6,6.87-44.07,15.07-92.76,17.39-52.73,2.48-68.53,3-202.05,3.29s-149.27-.25-202-2.53m407.6-674.61a60,60,0,1,0,59.88-60.1,60,60,0,0,0-59.88,60.1M245.77,503c.28,141.8,115.44,256.49,257.21,256.22S759.52,643.8,759.25,502,643.79,245.48,502,245.76,245.5,361.22,245.77,503m90.06-.18a166.67,166.67,0,1,1,167,166.34,166.65,166.65,0,0,1-167-166.34"/></svg>',slack:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="73.6 73.6 122.8 122.8" fill="currentColor"><path d="M99.4,151.2c0,7.1-5.8,12.9-12.9,12.9s-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9h12.9V151.2z"/><path d="M105.9,151.2c0-7.1,5.8-12.9,12.9-12.9s12.9,5.8,12.9,12.9v32.3c0,7.1-5.8,12.9-12.9,12.9s-12.9-5.8-12.9-12.9 C105.9,183.5,105.9,151.2,105.9,151.2z"/><path d="M118.8,99.4c-7.1,0-12.9-5.8-12.9-12.9s5.8-12.9,12.9-12.9s12.9,5.8,12.9,12.9v12.9H118.8z"/><path d="M118.8,105.9c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9H86.5c-7.1,0-12.9-5.8-12.9-12.9s5.8-12.9,12.9-12.9 C86.5,105.9,118.8,105.9,118.8,105.9z"/><path d="M170.6,118.8c0-7.1,5.8-12.9,12.9-12.9c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9h-12.9V118.8z"/><path d="M164.1,118.8c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9V86.5c0-7.1,5.8-12.9,12.9-12.9 c7.1,0,12.9,5.8,12.9,12.9V118.8z"/><path d="M151.2,170.6c7.1,0,12.9,5.8,12.9,12.9c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9v-12.9H151.2z"/><path d="M151.2,164.1c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9h32.3c7.1,0,12.9,5.8,12.9,12.9 c0,7.1-5.8,12.9-12.9,12.9H151.2z"/></svg>',x:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1227" fill="currentColor"><path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"/></svg>'},{events:y,args:z,argTypes:n}=v("btu-icon"),u=["xs","sm","md","lg","xl"],w=["ai","error","gray","primary","purple","rose","success","teal","warning"],T={title:"Components/Icon",component:"btu-icon",tags:["autodocs"],parameters:{docs:{subtitle:"An icon component using Lucide icons with built-in support for custom colors and sizes.",description:{component:`
1
+ import{g as v,x as s}from"./iframe-BSHPpSig.js";import{o as x}from"./if-defined-DphVHb7j.js";import{o as f}from"./style-map-uSz4USKK.js";import{L as g}from"./LucideDynamicLoader-THr3lc5T.js";import"./preload-helper-PPVm8Dsz.js";const h={facebook:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="100 100 500 500" fill="currentColor"><path d="M600.0,350.0C600.0,211.929 488.071,100.0 350.0,100.0C211.929,100.0 100.0,211.929 100.0,350.0C100.0,467.245 180.715,565.622 289.606,592.638L289.606,426.396L238.054,426.396L238.054,350.0L289.606,350.0L289.606,317.081C289.606,231.989 328.114,192.549 411.654,192.549C427.492,192.549 454.821,195.654 466.001,198.76L466.001,268.014C460.1,267.393 449.852,267.082 437.119,267.082C396.126,267.082 380.287,282.61 380.287,322.982L380.287,350.0L461.946,350.0L447.918,426.396L380.287,426.396L380.287,598.169C504.073,583.218 600.0,477.818 600.0,350.0Z"/></svg>',instagram:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" fill="currentColor"><path d="M295.42,6c-53.2,2.51-89.53,11-121.29,23.48-32.87,12.81-60.73,30-88.45,57.82S40.89,143,28.17,175.92c-12.31,31.83-20.65,68.19-23,121.42S2.3,367.68,2.56,503.46,3.42,656.26,6,709.6c2.54,53.19,11,89.51,23.48,121.28,12.83,32.87,30,60.72,57.83,88.45S143,964.09,176,976.83c31.8,12.29,68.17,20.67,121.39,23s70.35,2.87,206.09,2.61,152.83-.86,206.16-3.39S799.1,988,830.88,975.58c32.87-12.86,60.74-30,88.45-57.84S964.1,862,976.81,829.06c12.32-31.8,20.69-68.17,23-121.35,2.33-53.37,2.88-70.41,2.62-206.17s-.87-152.78-3.4-206.1-11-89.53-23.47-121.32c-12.85-32.87-30-60.7-57.82-88.45S862,40.87,829.07,28.19c-31.82-12.31-68.17-20.7-121.39-23S637.33,2.3,501.54,2.56,348.75,3.4,295.42,6m5.84,903.88c-48.75-2.12-75.22-10.22-92.86-17-23.36-9-40-19.88-57.58-37.29s-28.38-34.11-37.5-57.42c-6.85-17.64-15.1-44.08-17.38-92.83-2.48-52.69-3-68.51-3.29-202s.22-149.29,2.53-202c2.08-48.71,10.23-75.21,17-92.84,9-23.39,19.84-40,37.29-57.57s34.1-28.39,57.43-37.51c17.62-6.88,44.06-15.06,92.79-17.38,52.73-2.5,68.53-3,202-3.29s149.31.21,202.06,2.53c48.71,2.12,75.22,10.19,92.83,17,23.37,9,40,19.81,57.57,37.29s28.4,34.07,37.52,57.45c6.89,17.57,15.07,44,17.37,92.76,2.51,52.73,3.08,68.54,3.32,202s-.23,149.31-2.54,202c-2.13,48.75-10.21,75.23-17,92.89-9,23.35-19.85,40-37.31,57.56s-34.09,28.38-57.43,37.5c-17.6,6.87-44.07,15.07-92.76,17.39-52.73,2.48-68.53,3-202.05,3.29s-149.27-.25-202-2.53m407.6-674.61a60,60,0,1,0,59.88-60.1,60,60,0,0,0-59.88,60.1M245.77,503c.28,141.8,115.44,256.49,257.21,256.22S759.52,643.8,759.25,502,643.79,245.48,502,245.76,245.5,361.22,245.77,503m90.06-.18a166.67,166.67,0,1,1,167,166.34,166.65,166.65,0,0,1-167-166.34"/></svg>',slack:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="73.6 73.6 122.8 122.8" fill="currentColor"><path d="M99.4,151.2c0,7.1-5.8,12.9-12.9,12.9s-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9h12.9V151.2z"/><path d="M105.9,151.2c0-7.1,5.8-12.9,12.9-12.9s12.9,5.8,12.9,12.9v32.3c0,7.1-5.8,12.9-12.9,12.9s-12.9-5.8-12.9-12.9 C105.9,183.5,105.9,151.2,105.9,151.2z"/><path d="M118.8,99.4c-7.1,0-12.9-5.8-12.9-12.9s5.8-12.9,12.9-12.9s12.9,5.8,12.9,12.9v12.9H118.8z"/><path d="M118.8,105.9c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9H86.5c-7.1,0-12.9-5.8-12.9-12.9s5.8-12.9,12.9-12.9 C86.5,105.9,118.8,105.9,118.8,105.9z"/><path d="M170.6,118.8c0-7.1,5.8-12.9,12.9-12.9c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9h-12.9V118.8z"/><path d="M164.1,118.8c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9V86.5c0-7.1,5.8-12.9,12.9-12.9 c7.1,0,12.9,5.8,12.9,12.9V118.8z"/><path d="M151.2,170.6c7.1,0,12.9,5.8,12.9,12.9c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9v-12.9H151.2z"/><path d="M151.2,164.1c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9h32.3c7.1,0,12.9,5.8,12.9,12.9 c0,7.1-5.8,12.9-12.9,12.9H151.2z"/></svg>',x:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1227" fill="currentColor"><path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"/></svg>'},{events:y,args:z,argTypes:n}=v("btu-icon"),u=["xs","sm","md","lg","xl"],w=["ai","error","gray","primary","purple","rose","success","teal","warning"],T={title:"Components/Icon",component:"btu-icon",tags:["autodocs"],parameters:{docs:{subtitle:"An icon component using Lucide icons with built-in support for custom colors and sizes.",description:{component:`
2
2
  <strong>When to use:</strong>
3
3
  <ul>
4
4
  <li>To visually reinforce actions, states, or categories</li>
@@ -1,4 +1,4 @@
1
- import{g as p,x as e}from"./iframe-WTEmYHJj.js";import{o as b}from"./if-defined-Dl8MuiCE.js";import{L as d}from"./LucideDynamicLoader-THr3lc5T.js";import"./preload-helper-PPVm8Dsz.js";const{events:u,args:y,argTypes:o}=p("btu-icon-button"),x={title:"Components/Icon Button",component:"btu-icon-button",tags:["autodocs"],parameters:{docs:{subtitle:"Combines button styles with the icon component along with an opinionated API",description:{component:`
1
+ import{g as p,x as e}from"./iframe-BSHPpSig.js";import{o as b}from"./if-defined-DphVHb7j.js";import{L as d}from"./LucideDynamicLoader-THr3lc5T.js";import"./preload-helper-PPVm8Dsz.js";const{events:u,args:y,argTypes:o}=p("btu-icon-button"),x={title:"Components/Icon Button",component:"btu-icon-button",tags:["autodocs"],parameters:{docs:{subtitle:"Combines button styles with the icon component along with an opinionated API",description:{component:`
2
2
  <h3>When to use:</h3>
3
3
  <ul>
4
4
  <li>For actions in compact or space-constrained interfaces (toolbars, tables, cards)</li>
@@ -1,4 +1,4 @@
1
- import{g as D,E as h,x as T}from"./iframe-WTEmYHJj.js";import{o as A}from"./style-map-BhvFBtuB.js";import"./preload-helper-PPVm8Dsz.js";const{events:V,args:k,argTypes:g}=D("btu-linear-progress"),W={title:"Components/Linear Progress",component:"btu-linear-progress",tags:["autodocs"],parameters:{docs:{subtitle:"A horizontal progress bar for showing task completion",description:{component:`
1
+ import{g as D,E as h,x as T}from"./iframe-BSHPpSig.js";import{o as A}from"./style-map-uSz4USKK.js";import"./preload-helper-PPVm8Dsz.js";const{events:V,args:k,argTypes:g}=D("btu-linear-progress"),W={title:"Components/Linear Progress",component:"btu-linear-progress",tags:["autodocs"],parameters:{docs:{subtitle:"A horizontal progress bar for showing task completion",description:{component:`
2
2
  <h3>When to use:</h3>
3
3
  <ul>
4
4
  <li>To show progress of a specific task with known completion percentage</li>
@@ -1,4 +1,4 @@
1
- import{g as S,E as v,x as s}from"./iframe-WTEmYHJj.js";import{o as f}from"./if-defined-Dl8MuiCE.js";import{o as w}from"./style-map-BhvFBtuB.js";import{L as k}from"./LucideDynamicLoader-THr3lc5T.js";import"./preload-helper-PPVm8Dsz.js";const{events:x,args:L,argTypes:o}=S("btu-message"),T=["primary","info","warning","error","success"],C=[{variant:"primary",label:"Scheduled maintenance on Saturday",description:"Expect up to 30 minutes of downtime starting at 02:00 UTC."},{variant:"info",label:"New feature released",description:"The redesigned editor is now available for all workspaces."},{variant:"warning",label:"API rate limits were updated",description:"Review your usage dashboard to make sure your integrations are still within limits."},{variant:"success",label:"Billing anomaly resolved",description:"All affected invoices have been corrected — no action needed."}],$=(e,t)=>{e.setAttribute("variant",t.variant),e.setAttribute("label",t.label);const n=e.querySelector(".btu-message-description");n&&(n.textContent=t.description??"")},D={title:"Components/Message",component:"btu-message",tags:["autodocs"],parameters:{docs:{subtitle:"High-visibility messages and persistent status anchored to a page or container",description:{component:`
1
+ import{g as S,E as v,x as s}from"./iframe-BSHPpSig.js";import{o as f}from"./if-defined-DphVHb7j.js";import{o as w}from"./style-map-uSz4USKK.js";import{L as k}from"./LucideDynamicLoader-THr3lc5T.js";import"./preload-helper-PPVm8Dsz.js";const{events:x,args:L,argTypes:o}=S("btu-message"),T=["primary","info","warning","error","success"],C=[{variant:"primary",label:"Scheduled maintenance on Saturday",description:"Expect up to 30 minutes of downtime starting at 02:00 UTC."},{variant:"info",label:"New feature released",description:"The redesigned editor is now available for all workspaces."},{variant:"warning",label:"API rate limits were updated",description:"Review your usage dashboard to make sure your integrations are still within limits."},{variant:"success",label:"Billing anomaly resolved",description:"All affected invoices have been corrected — no action needed."}],$=(e,t)=>{e.setAttribute("variant",t.variant),e.setAttribute("label",t.label);const n=e.querySelector(".btu-message-description");n&&(n.textContent=t.description??"")},D={title:"Components/Message",component:"btu-message",tags:["autodocs"],parameters:{docs:{subtitle:"High-visibility messages and persistent status anchored to a page or container",description:{component:`
2
2
  <h3>When to use:</h3>
3
3
  <ul>
4
4
  <li>Communicate messages or provide feedback that is not tied to the user's current action or task</li>
@@ -1,4 +1,4 @@
1
- import{x as h,i as v}from"./iframe-WTEmYHJj.js";import{o as k}from"./onFind-CqIRRMTv.js";import"./preload-helper-PPVm8Dsz.js";const x=e=>{class n extends e{#t=[];onFindRegistration(){return null}#e(){if(this.#t.length)return;const i=this.onFindRegistration();if(!i)return;const d=Array.isArray(i)?i:[i];this.#t=d.map(c=>k(this,c.selectors,c.callback))}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.#e()}firstUpdated(i){super.firstUpdated(i),this.#e()}disconnectedCallback(){super.disconnectedCallback(),this.#t.forEach(i=>i()),this.#t=[]}}return n},{expect:a,userEvent:l,waitFor:r,within:w}=__STORYBOOK_MODULE_TEST__,b="ofm-demo";if(!customElements.get(b)){class e extends x(v){onFindRegistration(){return{selectors:":scope > .ofm-item",callback:t=>t.classList.add("ring-2","ring-success-500")}}render(){return h`<slot></slot>`}}customElements.define(b,e)}const p="ofm-multi";if(!customElements.get(p)){class e extends x(v){onFindRegistration(){return[{selectors:":scope > .ofm-a",callback:t=>t.classList.add("ring-2","ring-success-500")},{selectors:":scope > .ofm-b",callback:t=>t.classList.add("ring-2","ring-primary-500")}]}render(){return h`<slot></slot>`}}customElements.define(p,e)}function g(){return globalThis[Symbol.for("brightspot.onFind")]?.callbacks?.length??0}const M={title:"Mixins/OnFind Mixin",tags:["autodocs"],parameters:{docs:{description:{component:`
1
+ import{x as h,i as v}from"./iframe-BSHPpSig.js";import{o as k}from"./onFind-DJOHkvQ2.js";import"./preload-helper-PPVm8Dsz.js";const x=e=>{class n extends e{#t=[];onFindRegistration(){return null}#e(){if(this.#t.length)return;const i=this.onFindRegistration();if(!i)return;const d=Array.isArray(i)?i:[i];this.#t=d.map(c=>k(this,c.selectors,c.callback))}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.#e()}firstUpdated(i){super.firstUpdated(i),this.#e()}disconnectedCallback(){super.disconnectedCallback(),this.#t.forEach(i=>i()),this.#t=[]}}return n},{expect:a,userEvent:l,waitFor:r,within:w}=__STORYBOOK_MODULE_TEST__,b="ofm-demo";if(!customElements.get(b)){class e extends x(v){onFindRegistration(){return{selectors:":scope > .ofm-item",callback:t=>t.classList.add("ring-2","ring-success-500")}}render(){return h`<slot></slot>`}}customElements.define(b,e)}const p="ofm-multi";if(!customElements.get(p)){class e extends x(v){onFindRegistration(){return[{selectors:":scope > .ofm-a",callback:t=>t.classList.add("ring-2","ring-success-500")},{selectors:":scope > .ofm-b",callback:t=>t.classList.add("ring-2","ring-primary-500")}]}render(){return h`<slot></slot>`}}customElements.define(p,e)}function g(){return globalThis[Symbol.for("brightspot.onFind")]?.callbacks?.length??0}const M={title:"Mixins/OnFind Mixin",tags:["autodocs"],parameters:{docs:{description:{component:`
2
2
  \`OnFindMixin\` registers an \`onFind\` child-redistribution callback and
3
3
  **tears it down on disconnect**, so a detached component is garbage-collectable
4
4
  and stops being visited on every document mutation.
@@ -1,4 +1,4 @@
1
- import{g as m,x as u}from"./iframe-WTEmYHJj.js";import{o as g}from"./style-map-BhvFBtuB.js";import"./preload-helper-PPVm8Dsz.js";const{events:b,args:h,argTypes:y}=m("btu-pagination"),c=e=>{const t={};return e.customBackgroundColor&&(t["--pagination-color-background"]=e.customBackgroundColor),e.customForegroundColor&&(t["--pagination-color-foreground"]=e.customForegroundColor),t},$={title:"Components/Pagination",component:"btu-pagination",tags:["autodocs"],parameters:{docs:{subtitle:"A component for navigating through paged content",description:{component:`
1
+ import{g as m,x as u}from"./iframe-BSHPpSig.js";import{o as g}from"./style-map-uSz4USKK.js";import"./preload-helper-PPVm8Dsz.js";const{events:b,args:h,argTypes:y}=m("btu-pagination"),c=e=>{const t={};return e.customBackgroundColor&&(t["--pagination-color-background"]=e.customBackgroundColor),e.customForegroundColor&&(t["--pagination-color-foreground"]=e.customForegroundColor),t},$={title:"Components/Pagination",component:"btu-pagination",tags:["autodocs"],parameters:{docs:{subtitle:"A component for navigating through paged content",description:{component:`
2
2
  <h3>When to use:</h3>
3
3
  <ul>
4
4
  <li>To navigate through large sets of data</li>
@@ -1,4 +1,4 @@
1
- import{g as p,x as n}from"./iframe-WTEmYHJj.js";import{o as c}from"./if-defined-Dl8MuiCE.js";import{o as d}from"./style-map-BhvFBtuB.js";import"./preload-helper-PPVm8Dsz.js";const{events:u,args:g,argTypes:o}=p("btu-popover"),f={title:"Components/Popover",component:"btu-popover",tags:["autodocs"],parameters:{docs:{subtitle:"Rich interactive content anchored to a trigger element",description:{component:`
1
+ import{g as f,x as a}from"./iframe-BSHPpSig.js";import{o as y}from"./if-defined-DphVHb7j.js";import{o as x}from"./style-map-uSz4USKK.js";import"./preload-helper-PPVm8Dsz.js";const{expect:s,waitFor:h}=__STORYBOOK_MODULE_TEST__,{events:k,args:w,argTypes:r}=f("btu-popover"),P={title:"Components/Popover",component:"btu-popover",tags:["autodocs"],parameters:{docs:{subtitle:"Rich interactive content anchored to a trigger element",description:{component:`
2
2
  \`btu-popover\` displays rich interactive content anchored to a trigger element using CSS anchor positioning and the native Popover API.
3
3
 
4
4
  <h3>When to use:</h3>
@@ -24,14 +24,14 @@ import{g as p,x as n}from"./iframe-WTEmYHJj.js";import{o as c}from"./if-defined-
24
24
  <li>Focus restored to trigger on close</li>
25
25
  <li>Add <code>autofocus</code> to an element inside <code>slot="content"</code> for auto-focus on open</li>
26
26
  </ul>
27
- `}},actions:{handles:u},controls:{expanded:!0}},args:{...g,position:"bottom",trigger:"click",delay:300,open:!1,inverted:!1},argTypes:{...o,position:{...o.position,control:{type:"select"},options:["top","bottom","left","right"]},trigger:{...o.trigger,control:{type:"select"},options:["click","hover","focus"]},delay:{...o.delay,control:{type:"number"},description:"Show delay in ms (hover trigger only)"},offset:{...o.offset,control:{type:"select"},options:["sm","md","lg","xl"],description:"Gap between trigger and popover (sm=4px, md=8px, lg=12px, xl=16px)"},open:{...o.open,control:{type:"boolean"},description:"Programmatic open/close (reflected)"},inverted:{...o.inverted,control:{type:"boolean"},description:"Invert the panel surface (dark on light pages, light on dark pages)"},customBg:{name:"--popover-color-background",description:"Background color",control:{type:"color"},table:{category:"css properties",defaultValue:{summary:"white"}}},customTitleColor:{name:"--popover-color-title",description:"Title text color",control:{type:"color"},table:{category:"css properties",defaultValue:{summary:"oklch(var(--btu-theme-gray-900))"}}},customContentColor:{name:"--popover-color-content",description:"Content text color",control:{type:"color"},table:{category:"css properties",defaultValue:{summary:"oklch(var(--btu-theme-gray-900))"}}},customRadius:{name:"--popover-border-radius",description:"Border radius",control:{type:"select"},options:["0px","0.125rem","0.25rem","0.375rem","0.5rem","0.75rem","1rem","1.5rem","9999px"],labels:{"0px":"none (0px)","0.125rem":"sm (0.125rem)","0.25rem":"DEFAULT (0.25rem)","0.375rem":"md (0.375rem)","0.5rem":"lg (0.5rem)","0.75rem":"xl (0.75rem)","1rem":"2xl (1rem)","1.5rem":"3xl (1.5rem)","9999px":"full (9999px)"},table:{category:"css properties",defaultValue:{summary:"0.5rem (lg)"}}}},render:t=>{const e={};return t.customBg&&(e["--popover-color-background"]=t.customBg),t.customTitleColor&&(e["--popover-color-title"]=t.customTitleColor),t.customContentColor&&(e["--popover-color-content"]=t.customContentColor),t.customRadius&&(e["--popover-border-radius"]=t.customRadius),n`
27
+ `}},actions:{handles:k},controls:{expanded:!0}},args:{...w,position:"bottom",trigger:"click",delay:300,open:!1,inverted:!1},argTypes:{...r,position:{...r.position,control:{type:"select"},options:["top","bottom","left","right"]},trigger:{...r.trigger,control:{type:"select"},options:["click","hover","focus"]},delay:{...r.delay,control:{type:"number"},description:"Show delay in ms (hover trigger only)"},offset:{...r.offset,control:{type:"select"},options:["sm","md","lg","xl"],description:"Gap between trigger and popover (sm=4px, md=8px, lg=12px, xl=16px)"},open:{...r.open,control:{type:"boolean"},description:"Programmatic open/close (reflected)"},inverted:{...r.inverted,control:{type:"boolean"},description:"Invert the panel surface (dark on light pages, light on dark pages)"},customBg:{name:"--popover-color-background",description:"Background color",control:{type:"color"},table:{category:"css properties",defaultValue:{summary:"white"}}},customTitleColor:{name:"--popover-color-title",description:"Title text color",control:{type:"color"},table:{category:"css properties",defaultValue:{summary:"oklch(var(--btu-theme-gray-900))"}}},customContentColor:{name:"--popover-color-content",description:"Content text color",control:{type:"color"},table:{category:"css properties",defaultValue:{summary:"oklch(var(--btu-theme-gray-900))"}}},customRadius:{name:"--popover-border-radius",description:"Border radius",control:{type:"select"},options:["0px","0.125rem","0.25rem","0.375rem","0.5rem","0.75rem","1rem","1.5rem","9999px"],labels:{"0px":"none (0px)","0.125rem":"sm (0.125rem)","0.25rem":"DEFAULT (0.25rem)","0.375rem":"md (0.375rem)","0.5rem":"lg (0.5rem)","0.75rem":"xl (0.75rem)","1rem":"2xl (1rem)","1.5rem":"3xl (1.5rem)","9999px":"full (9999px)"},table:{category:"css properties",defaultValue:{summary:"0.5rem (lg)"}}}},render:t=>{const o={};return t.customBg&&(o["--popover-color-background"]=t.customBg),t.customTitleColor&&(o["--popover-color-title"]=t.customTitleColor),t.customContentColor&&(o["--popover-color-content"]=t.customContentColor),t.customRadius&&(o["--popover-border-radius"]=t.customRadius),a`
28
28
  <div style="display: flex; justify-content: center; padding: 6rem 2rem;">
29
- <div style=${d(e)}>
29
+ <div style=${x(o)}>
30
30
  <btu-popover
31
31
  position="${t.position}"
32
32
  trigger="${t.trigger}"
33
33
  delay="${t.delay}"
34
- offset="${c(t.offset)}"
34
+ offset="${y(t.offset)}"
35
35
  ?no-arrow="${t.noArrow}"
36
36
  ?open="${t.open}"
37
37
  ?inverted="${t.inverted}"
@@ -49,7 +49,7 @@ import{g as p,x as n}from"./iframe-WTEmYHJj.js";import{o as c}from"./if-defined-
49
49
  </btu-popover>
50
50
  </div>
51
51
  </div>
52
- `}},r={args:{noArrow:!1,offset:void 0}},i={render:()=>n`
52
+ `}},u={args:{noArrow:!1,offset:void 0}},b={render:()=>a`
53
53
  <div style="display: flex; gap: 2rem; justify-content: center; padding: 6rem 2rem; flex-wrap: wrap;">
54
54
  <btu-popover position="top">
55
55
  <button class="btu-button btu-button-primary btu-button-sm" slot="trigger">Top</button>
@@ -68,7 +68,7 @@ import{g as p,x as n}from"./iframe-WTEmYHJj.js";import{o as c}from"./if-defined-
68
68
  <div slot="content">Popover positioned right of the trigger</div>
69
69
  </btu-popover>
70
70
  </div>
71
- `,parameters:{docs:{description:{story:"Popovers support four positions: `top`, `bottom`, `left`, and `right`. Each auto-flips if constrained by the viewport."}}}},s={render:()=>n`
71
+ `,parameters:{docs:{description:{story:"Popovers support four positions: `top`, `bottom`, `left`, and `right`. Each auto-flips if constrained by the viewport."}}}},g={render:()=>a`
72
72
  <style>
73
73
  .popover-custom-content {
74
74
  display: flex;
@@ -160,7 +160,7 @@ import{g as p,x as n}from"./iframe-WTEmYHJj.js";import{o as c}from"./if-defined-
160
160
  </div>
161
161
  </btu-popover>
162
162
  </div>
163
- `,parameters:{docs:{description:{story:"Two examples of rich popover content: a confirmation dialog with action buttons (click trigger), and a chart legend with colored series data (hover trigger)."}}}},l={render:()=>n`
163
+ `,parameters:{docs:{description:{story:"Two examples of rich popover content: a confirmation dialog with action buttons (click trigger), and a chart legend with colored series data (hover trigger)."}}}},m={render:()=>a`
164
164
  <div style="display: flex; gap: 2rem; justify-content: center; padding: 6rem 2rem; flex-wrap: wrap;">
165
165
  <btu-popover position="bottom">
166
166
  <button class="btu-button btu-button-gray btu-button-sm" slot="trigger">Default surface</button>
@@ -177,7 +177,7 @@ import{g as p,x as n}from"./iframe-WTEmYHJj.js";import{o as c}from"./if-defined-
177
177
  </div>
178
178
  </btu-popover>
179
179
  </div>
180
- `,parameters:{docs:{description:{story:"The `inverted` attribute flips the panel surface to the inverse of the page — a dark panel on light pages and a light panel on dark pages — using the mode-flipping black/white tokens. It's opt-in because the panel holds arbitrary rich content that may assume a light surface."}}}},a={render:()=>n`
180
+ `,parameters:{docs:{description:{story:"The `inverted` attribute flips the panel surface to the inverse of the page — a dark panel on light pages and a light panel on dark pages — using the mode-flipping black/white tokens. It's opt-in because the panel holds arbitrary rich content that may assume a light surface."}}}},v={render:()=>a`
181
181
  <style>
182
182
  .custom-popover-trigger {
183
183
  display: inline-flex;
@@ -219,12 +219,28 @@ import{g as p,x as n}from"./iframe-WTEmYHJj.js";import{o as c}from"./if-defined-
219
219
  </btu-popover>
220
220
  </div>
221
221
  </div>
222
- `,parameters:{docs:{description:{story:"Demonstrates full customization of all CSS custom properties. Set these on a parent element or directly on the component:\n\n- `--popover-color-background` — Background color\n- `--popover-color-title` — Title text color\n- `--popover-color-content` — Content text color\n- `--popover-border-radius` — Border radius"}}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
222
+ `,parameters:{docs:{description:{story:"Demonstrates full customization of all CSS custom properties. Set these on a parent element or directly on the component:\n\n- `--popover-color-background` — Background color\n- `--popover-color-title` — Title text color\n- `--popover-color-content` — Content text color\n- `--popover-border-radius` — Border radius"}}}},l={tags:["!autodocs","!dev"],render:()=>a`
223
+ <div style="height: 100vh;">
224
+ <btu-popover id="tail-anchored" position="bottom" trigger="focus" style="position: fixed; top: 24px; left: 24px;">
225
+ <button class="btu-button btu-button-primary btu-button-sm" slot="trigger">Anchored</button>
226
+ <div slot="content">Room below</div>
227
+ </btu-popover>
228
+ <btu-popover
229
+ id="tail-flipped"
230
+ position="bottom"
231
+ trigger="focus"
232
+ style="position: fixed; bottom: 8px; left: 24px;"
233
+ >
234
+ <button class="btu-button btu-button-primary btu-button-sm" slot="trigger">Flipped</button>
235
+ <div slot="content">No room below</div>
236
+ </btu-popover>
237
+ </div>
238
+ `,play:async()=>{const t=async e=>{const n=document.getElementById(e);n.open=!0;const i=await h(()=>{const p=n.querySelector(".btu-popover");if(!p?.matches(":popover-open"))throw new Error(`${e} did not open`);return p});return{host:n,panel:i}},o=(e,n)=>{const i=e.getBoundingClientRect(),p=n.querySelector('[slot="trigger"]').getBoundingClientRect();return i.top+i.height/2>=p.top+p.height/2?"below":"above"},d=await t("tail-anchored"),c=await t("tail-flipped");s(o(d.panel,d.host)).toBe("below"),s(o(c.panel,c.host)).toBe("above"),await h(()=>s(c.panel.className).toContain("btu-popover-tail-down")),s(d.panel.className).not.toContain("btu-popover-tail-");for(const{panel:e}of[d,c]){s(getComputedStyle(e,"::after").content).toBe("none");const n=parseFloat(getComputedStyle(e).getPropertyValue("--popover-offset")),i=parseFloat(getComputedStyle(e).borderTopWidth);s(parseFloat(getComputedStyle(e,"::before").height)).toBeCloseTo(n+i,1)}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
223
239
  args: {
224
240
  noArrow: false,
225
241
  offset: undefined
226
242
  }
227
- }`,...r.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
243
+ }`,...u.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
228
244
  render: () => html\`
229
245
  <div style="display: flex; gap: 2rem; justify-content: center; padding: 6rem 2rem; flex-wrap: wrap;">
230
246
  <btu-popover position="top">
@@ -252,7 +268,7 @@ import{g as p,x as n}from"./iframe-WTEmYHJj.js";import{o as c}from"./if-defined-
252
268
  }
253
269
  }
254
270
  }
255
- }`,...i.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
271
+ }`,...b.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
256
272
  render: () => html\`
257
273
  <style>
258
274
  .popover-custom-content {
@@ -353,7 +369,7 @@ import{g as p,x as n}from"./iframe-WTEmYHJj.js";import{o as c}from"./if-defined-
353
369
  }
354
370
  }
355
371
  }
356
- }`,...s.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
372
+ }`,...g.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
357
373
  render: () => html\`
358
374
  <div style="display: flex; gap: 2rem; justify-content: center; padding: 6rem 2rem; flex-wrap: wrap;">
359
375
  <btu-popover position="bottom">
@@ -379,7 +395,7 @@ import{g as p,x as n}from"./iframe-WTEmYHJj.js";import{o as c}from"./if-defined-
379
395
  }
380
396
  }
381
397
  }
382
- }`,...l.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
398
+ }`,...m.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
383
399
  render: () => html\`
384
400
  <style>
385
401
  .custom-popover-trigger {
@@ -435,4 +451,71 @@ import{g as p,x as n}from"./iframe-WTEmYHJj.js";import{o as c}from"./if-defined-
435
451
  }
436
452
  }
437
453
  }
438
- }`,...a.parameters?.docs?.source}}};const y=["Default","Positions","RichContent","Inverted","AdvancedUsage"];export{a as AdvancedUsage,r as Default,l as Inverted,i as Positions,s as RichContent,y as __namedExportsOrder,f as default};
454
+ }`,...v.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
455
+ tags: ['!autodocs', '!dev'],
456
+ render: () => html\`
457
+ <div style="height: 100vh;">
458
+ <btu-popover id="tail-anchored" position="bottom" trigger="focus" style="position: fixed; top: 24px; left: 24px;">
459
+ <button class="btu-button btu-button-primary btu-button-sm" slot="trigger">Anchored</button>
460
+ <div slot="content">Room below</div>
461
+ </btu-popover>
462
+ <btu-popover
463
+ id="tail-flipped"
464
+ position="bottom"
465
+ trigger="focus"
466
+ style="position: fixed; bottom: 8px; left: 24px;"
467
+ >
468
+ <button class="btu-button btu-button-primary btu-button-sm" slot="trigger">Flipped</button>
469
+ <div slot="content">No room below</div>
470
+ </btu-popover>
471
+ </div>
472
+ \`,
473
+ play: async () => {
474
+ const open = async (id: string) => {
475
+ const host = document.getElementById(id) as HTMLElement & {
476
+ open: boolean;
477
+ };
478
+ host.open = true;
479
+ const panel = await waitFor(() => {
480
+ const el = host.querySelector<HTMLElement>('.btu-popover');
481
+ if (!el?.matches(':popover-open')) throw new Error(\`\${id} did not open\`);
482
+ return el;
483
+ });
484
+ return {
485
+ host,
486
+ panel
487
+ };
488
+ };
489
+ const side = (panel: HTMLElement, host: HTMLElement) => {
490
+ const p = panel.getBoundingClientRect();
491
+ const t = host.querySelector('[slot="trigger"]')!.getBoundingClientRect();
492
+ return p.top + p.height / 2 >= t.top + t.height / 2 ? 'below' : 'above';
493
+ };
494
+ const anchored = await open('tail-anchored');
495
+ const flipped = await open('tail-flipped');
496
+
497
+ // Sanity: the fixture only means anything if the second one actually flipped.
498
+ expect(side(anchored.panel, anchored.host)).toBe('below');
499
+ expect(side(flipped.panel, flipped.host)).toBe('above');
500
+
501
+ // A flip moves the panel without changing its position class, so the tail has
502
+ // to be re-pointed in JS. Unflipped, the plugin's :where() default covers it
503
+ // and no class is added — markup without the component behaves the same.
504
+ await waitFor(() => expect(flipped.panel.className).toContain('btu-popover-tail-down'));
505
+ expect(anchored.panel.className).not.toContain('btu-popover-tail-');
506
+ for (const {
507
+ panel
508
+ } of [anchored, flipped]) {
509
+ // One painted layer. A second copy of the shape, scaled to make the outline,
510
+ // is what drew a phantom tail on the opposite edge (BSP-20180).
511
+ expect(getComputedStyle(panel, '::after').content).toBe('none');
512
+
513
+ // The tail spans the gap *plus* the panel's border, so its fill can erase
514
+ // that border across the mouth. One border-width short and the two strokes
515
+ // overlap into a thickened corner instead of mitring.
516
+ const offset = parseFloat(getComputedStyle(panel).getPropertyValue('--popover-offset'));
517
+ const border = parseFloat(getComputedStyle(panel).borderTopWidth);
518
+ expect(parseFloat(getComputedStyle(panel, '::before').height)).toBeCloseTo(offset + border, 1);
519
+ }
520
+ }
521
+ }`,...l.parameters?.docs?.source},description:{story:"Regression coverage for the tail. Hidden from the sidebar and the docs page;\nit exists to be run by `vitest --project=storybook`.",...l.parameters?.docs?.description}}};const R=["Default","Positions","RichContent","Inverted","AdvancedUsage","TailRegression"];export{v as AdvancedUsage,u as Default,m as Inverted,b as Positions,g as RichContent,l as TailRegression,R as __namedExportsOrder,P as default};
@@ -1 +1 @@
1
- import"./iframe-WTEmYHJj.js";const l=t=>{class n extends t{connectedCallback(){super.connectedCallback(),Promise.resolve().then(()=>this.emit("btu-element-connected",{}),e=>this.emit("btu-element-error",{error:e}))}disconnectedCallback(){super.disconnectedCallback(),this.emit("btu-element-disconnected")}emit(e,c){const a=new CustomEvent(e,{bubbles:!0,cancelable:!1,composed:!0,detail:c});return this.dispatchEvent(a)}}return n},d=t=>{class n extends t{connectedCallback(){const e=()=>{super.connectedCallback()};document.readyState!=="loading"?e():document.addEventListener("DOMContentLoaded",()=>e())}}return n};export{l as E,d as R};
1
+ import"./iframe-BSHPpSig.js";const l=t=>{class n extends t{connectedCallback(){super.connectedCallback(),Promise.resolve().then(()=>this.emit("btu-element-connected",{}),e=>this.emit("btu-element-error",{error:e}))}disconnectedCallback(){super.disconnectedCallback(),this.emit("btu-element-disconnected")}emit(e,c){const a=new CustomEvent(e,{bubbles:!0,cancelable:!1,composed:!0,detail:c});return this.dispatchEvent(a)}}return n},d=t=>{class n extends t{connectedCallback(){const e=()=>{super.connectedCallback()};document.readyState!=="loading"?e():document.addEventListener("DOMContentLoaded",()=>e())}}return n};export{l as E,d as R};
@@ -1,4 +1,4 @@
1
- import{x as l,i as v}from"./iframe-WTEmYHJj.js";import{t as m}from"./custom-element-UsVr97OX.js";import"./preload-helper-PPVm8Dsz.js";const h=n=>{class i extends n{constructor(){super(...arguments),this._rovingIndex=0}_getRovingTargets(){return[]}_rovingFocus(t,e=!0){const o=this._getRovingTargets();if(o.length===0)return;const r=Math.max(0,Math.min(t,o.length-1));o.forEach((u,b)=>u.setAttribute("tabindex",b===r?"0":"-1")),e&&o[r]?.focus(),this._rovingIndex=r}_rovingNext(){const t=this._getRovingTargets();if(t.length===0)return;const e=this._rovingCurrentIndex(),o=e<t.length-1?e+1:0;this._rovingFocus(o)}_rovingPrev(){const t=this._getRovingTargets();if(t.length===0)return;const e=this._rovingCurrentIndex(),o=e>0?e-1:t.length-1;this._rovingFocus(o)}_rovingFirst(){this._rovingFocus(0)}_rovingLast(){const t=this._getRovingTargets();t.length>0&&this._rovingFocus(t.length-1)}_rovingCurrentIndex(){const t=document.activeElement;return this._getRovingTargets().findIndex(e=>e===t||e.contains(t))}}return i};var a=Object.freeze,x=Object.defineProperty,p=Object.getOwnPropertyDescriptor,f=(n,i,d,t)=>{for(var e=t>1?void 0:t?p(i,d):i,o=n.length-1,r;o>=0;o--)(r=n[o])&&(e=r(e)||e);return e},y=(n,i)=>a(x(n,"raw",{value:a(n.slice())})),c;const T={title:"Mixins/Roving Tabindex",tags:["autodocs"],parameters:{docs:{description:{component:`
1
+ import{x as l,i as v}from"./iframe-BSHPpSig.js";import{t as m}from"./custom-element-UsVr97OX.js";import"./preload-helper-PPVm8Dsz.js";const h=n=>{class i extends n{constructor(){super(...arguments),this._rovingIndex=0}_getRovingTargets(){return[]}_rovingFocus(t,e=!0){const o=this._getRovingTargets();if(o.length===0)return;const r=Math.max(0,Math.min(t,o.length-1));o.forEach((u,b)=>u.setAttribute("tabindex",b===r?"0":"-1")),e&&o[r]?.focus(),this._rovingIndex=r}_rovingNext(){const t=this._getRovingTargets();if(t.length===0)return;const e=this._rovingCurrentIndex(),o=e<t.length-1?e+1:0;this._rovingFocus(o)}_rovingPrev(){const t=this._getRovingTargets();if(t.length===0)return;const e=this._rovingCurrentIndex(),o=e>0?e-1:t.length-1;this._rovingFocus(o)}_rovingFirst(){this._rovingFocus(0)}_rovingLast(){const t=this._getRovingTargets();t.length>0&&this._rovingFocus(t.length-1)}_rovingCurrentIndex(){const t=document.activeElement;return this._getRovingTargets().findIndex(e=>e===t||e.contains(t))}}return i};var a=Object.freeze,x=Object.defineProperty,p=Object.getOwnPropertyDescriptor,f=(n,i,d,t)=>{for(var e=t>1?void 0:t?p(i,d):i,o=n.length-1,r;o>=0;o--)(r=n[o])&&(e=r(e)||e);return e},y=(n,i)=>a(x(n,"raw",{value:a(n.slice())})),c;const T={title:"Mixins/Roving Tabindex",tags:["autodocs"],parameters:{docs:{description:{component:`
2
2
  \`RovingTabindexMixin\` provides **roving tabindex** navigation primitives for toolbar and menu components following the <a href="https://www.w3.org/WAI/ARIA/apd/practices/keyboard-interface/#kbd_roving_tabindex" target="_blank">WAI-ARIA Keyboard Interface Pattern</a>.
3
3
 
4
4
  In a roving tabindex, only one element in the group has \`tabindex="0"\` (reachable via Tab), while all others have \`tabindex="-1"\`. Arrow keys move focus between items, wrapping at both ends.
@@ -1,4 +1,4 @@
1
- import{x as o}from"./iframe-WTEmYHJj.js";import"./preload-helper-PPVm8Dsz.js";const r={title:"Utilities/RTC",tags:["autodocs"],parameters:{docs:{subtitle:"The `rtc` module provides real-time communication between browser tabs and the Brightspot CMS server. Uses BroadcastChannel for cross-tab coordination with leader election, and Server-Sent Events for server communication."},controls:{expanded:!0}}},e={render:()=>o`
1
+ import{x as o}from"./iframe-BSHPpSig.js";import"./preload-helper-PPVm8Dsz.js";const r={title:"Utilities/RTC",tags:["autodocs"],parameters:{docs:{subtitle:"The `rtc` module provides real-time communication between browser tabs and the Brightspot CMS server. Uses BroadcastChannel for cross-tab coordination with leader election, and Server-Sent Events for server communication."},controls:{expanded:!0}}},e={render:()=>o`
2
2
  <div class="space-y-6 text-sm">
3
3
  <div>
4
4
  <h3 class="mb-2 font-bold">Overview</h3>
@@ -1,4 +1,4 @@
1
- import{x as a}from"./iframe-WTEmYHJj.js";import"./preload-helper-PPVm8Dsz.js";const l=({theme:e="btu-scrollshadow-25"})=>{const r=new Array(100).fill(0).map((s,t)=>`Item ${t+1}`);return a`
1
+ import{x as a}from"./iframe-BSHPpSig.js";import"./preload-helper-PPVm8Dsz.js";const l=({theme:e="btu-scrollshadow-25"})=>{const r=new Array(100).fill(0).map((s,t)=>`Item ${t+1}`);return a`
2
2
  <style>
3
3
  :root {
4
4
  --can-scroll: ;
@@ -1,4 +1,4 @@
1
- import{g as k,x as c}from"./iframe-WTEmYHJj.js";import{o as s}from"./if-defined-Dl8MuiCE.js";import{o as f}from"./style-map-BhvFBtuB.js";import{L as w}from"./LucideDynamicLoader-THr3lc5T.js";import"./preload-helper-PPVm8Dsz.js";const{events:v,args:y,argTypes:g}=k("btu-switch"),x={customColorOn:"--switch-color-track-on",customColorOff:"--switch-color-track-off",customKnobColor:"--switch-color-knob",customLabelSpacing:"--switch-label-spacing",customIconSize:"--switch-track-icon-size"},S=e=>Object.entries(x).reduce((o,[t,n])=>(e[t]&&(o[n]=e[t]),o),{}),L={title:"Components/Switch",component:"btu-switch",tags:["autodocs"],parameters:{docs:{subtitle:"A toggle switch for binary on/off states",description:{component:`
1
+ import{g as k,x as c}from"./iframe-BSHPpSig.js";import{o as s}from"./if-defined-DphVHb7j.js";import{o as f}from"./style-map-uSz4USKK.js";import{L as w}from"./LucideDynamicLoader-THr3lc5T.js";import"./preload-helper-PPVm8Dsz.js";const{events:v,args:y,argTypes:g}=k("btu-switch"),x={customColorOn:"--switch-color-track-on",customColorOff:"--switch-color-track-off",customKnobColor:"--switch-color-knob",customLabelSpacing:"--switch-label-spacing",customIconSize:"--switch-track-icon-size"},S=e=>Object.entries(x).reduce((o,[t,n])=>(e[t]&&(o[n]=e[t]),o),{}),L={title:"Components/Switch",component:"btu-switch",tags:["autodocs"],parameters:{docs:{subtitle:"A toggle switch for binary on/off states",description:{component:`
2
2
  <h3>When to use:</h3>
3
3
  <ul>
4
4
  <li>For toggling a setting or preference on/off</li>
@@ -1,11 +1,11 @@
1
- import{g as u,x as e}from"./iframe-WTEmYHJj.js";import{o as d}from"./style-map-BhvFBtuB.js";import"./preload-helper-PPVm8Dsz.js";const{events:c,args:m,argTypes:t}=u("btu-tab"),y={title:"Components/Tabs/Tab",component:"btu-tab",tags:["autodocs"],parameters:{docs:{subtitle:"btu-tab",description:{component:`
1
+ import{g as u,x as e}from"./iframe-BSHPpSig.js";import{o as d}from"./style-map-uSz4USKK.js";import"./preload-helper-PPVm8Dsz.js";const{events:c,args:m,argTypes:t}=u("btu-tab"),y={title:"Components/Tabs/Tab",component:"btu-tab",tags:["autodocs"],parameters:{docs:{subtitle:"btu-tab",description:{component:`
2
2
  An individual tab within a \`btu-tabs\` group.
3
3
 
4
4
  Renders a button with \`role="tab"\` that participates in keyboard navigation and selection state managed by the parent \`btu-tabs\` container.
5
5
 
6
6
  <h3>Props managed by btu-tabs:</h3>
7
7
  <p><code>size</code> and active state are propagated from the parent — do not set them directly.</p>
8
- `}},actions:{handles:c},controls:{expanded:!0}},args:{...m,label:"Main",name:"main",symbol:"",badge:void 0},argTypes:{...t,size:{table:{disable:!0}},"--badge-color-background":{table:{disable:!0}},"--badge-color-foreground":{table:{disable:!0}},label:{...t.label,control:{type:"text"},description:"Text displayed in the tab."},description:{...t.description,control:{type:"text"},description:"Accessibility description for screen readers (`aria-description`)."},disabled:{...t.disabled,control:{type:"boolean"},description:"Whether the tab is disabled and non-interactive."},symbol:{...t.symbol,control:{type:"text"},description:"Lucide icon name to display."},"icon-position":{...t["icon-position"],control:{type:"select"},options:["leading","trailing"],description:"Placement of the icon relative to the label."},"icon-only":{...t["icon-only"],control:{type:"boolean"},description:'When true, hides the label visually while maintaining accessibility. Intended for use with `variant="full"` only.'},error:{...t.error,control:{type:"boolean"},description:"When true, displays an error badge on the tab."},badge:{...t.badge,control:{type:"text"},description:'Displays a badge with the given value alongside the label. Intended for use with `variant="full"` only.'},customBadgeBackground:{name:"--badge-color-background",control:{type:"color"},description:"Background color of the count badge (default: gray-50)",table:{category:"css properties"}},customBadgeForeground:{name:"--badge-color-foreground",control:{type:"color"},description:"Text color of the count badge (default: gray-700)",table:{category:"css properties"}}},render:a=>{const i={};return a.customBadgeBackground&&(i["--badge-color-background"]=a.customBadgeBackground),a.customBadgeForeground&&(i["--badge-color-foreground"]=a.customBadgeForeground),e`
8
+ `}},actions:{handles:c},controls:{expanded:!0}},args:{...m,label:"Main",name:"main",symbol:"",badge:void 0},argTypes:{...t,size:{table:{disable:!0}},"--badge-color-background":{table:{disable:!0}},"--badge-color-foreground":{table:{disable:!0}},label:{...t.label,control:{type:"text"},description:"Text displayed in the tab."},description:{...t.description,control:{type:"text"},description:"Accessibility description for screen readers (`aria-description`)."},disabled:{...t.disabled,control:{type:"boolean"},description:"Whether the tab is disabled and non-interactive."},symbol:{...t.symbol,control:{type:"text"},description:"Lucide icon name to display."},"icon-position":{...t["icon-position"],control:{type:"select"},options:["leading","trailing"],description:"Placement of the icon relative to the label."},"icon-only":{...t["icon-only"],control:{type:"boolean"},description:'When true, hides the label visually while maintaining accessibility. Intended for use with `variant="full"` only.'},error:{...t.error,control:{type:"boolean"},description:"When true, displays an error badge on the tab."},badge:{...t.badge,control:{type:"text"},description:'Displays a badge with the given value alongside the label. Intended for use with `variant="full"` only.'},customBadgeBackground:{name:"--badge-color-background",control:{type:"color"},description:"Background color of the count badge (default: gray-50)",table:{category:"css properties"}},customBadgeForeground:{name:"--badge-color-foreground",control:{type:"color"},description:"Text color of the count badge (default: gray-800)",table:{category:"css properties"}}},render:a=>{const i={};return a.customBadgeBackground&&(i["--badge-color-background"]=a.customBadgeBackground),a.customBadgeForeground&&(i["--badge-color-foreground"]=a.customBadgeForeground),e`
9
9
  <btu-tabs size="md" active-tab="main" style=${d(i)}>
10
10
  <btu-tab
11
11
  name="main"
@@ -59,7 +59,7 @@ Renders a button with \`role="tab"\` that participates in keyboard navigation an
59
59
  style=${d({"--badge-color-background":"oklch(var(--btu-theme-error-50))","--badge-color-foreground":"oklch(var(--btu-theme-error-700))"})}
60
60
  ></btu-tab>
61
61
  </btu-tabs>
62
- `,parameters:{docs:{description:{story:'Set `badge` to display a numeric or text badge alongside the label. Defaults to a gray badge (gray-50 background, gray-700 text). Use `--badge-color-background` and `--badge-color-foreground` to customize — inline on a specific `btu-tab` to scope it, or on `btu-tabs` to apply to all. Intended for use with `variant="full"` only.'}}}},s={render:()=>e`
62
+ `,parameters:{docs:{description:{story:'Set `badge` to display a numeric or text badge alongside the label. Defaults to a gray badge (gray-50 background, gray-800 text). Use `--badge-color-background` and `--badge-color-foreground` to customize — inline on a specific `btu-tab` to scope it, or on `btu-tabs` to apply to all. Intended for use with `variant="full"` only.'}}}},s={render:()=>e`
63
63
  <div class="flex flex-col gap-8">
64
64
  <btu-tabs size="md" active-tab="main">
65
65
  <btu-tab name="main" label="Main" error></btu-tab>
@@ -161,7 +161,7 @@ Renders a button with \`role="tab"\` that participates in keyboard navigation an
161
161
  parameters: {
162
162
  docs: {
163
163
  description: {
164
- story: 'Set \`badge\` to display a numeric or text badge alongside the label. Defaults to a gray badge (gray-50 background, gray-700 text). Use \`--badge-color-background\` and \`--badge-color-foreground\` to customize — inline on a specific \`btu-tab\` to scope it, or on \`btu-tabs\` to apply to all. Intended for use with \`variant="full"\` only.'
164
+ story: 'Set \`badge\` to display a numeric or text badge alongside the label. Defaults to a gray badge (gray-50 background, gray-800 text). Use \`--badge-color-background\` and \`--badge-color-foreground\` to customize — inline on a specific \`btu-tab\` to scope it, or on \`btu-tabs\` to apply to all. Intended for use with \`variant="full"\` only.'
165
165
  }
166
166
  }
167
167
  }
@@ -1,4 +1,4 @@
1
- import{g as b,E as i,x as s}from"./iframe-WTEmYHJj.js";import{o as c}from"./style-map-BhvFBtuB.js";import"./preload-helper-PPVm8Dsz.js";const{events:d,args:u,argTypes:a}=b("btu-tabs"),h={title:"Components/Tabs",component:"btu-tabs",tags:["autodocs"],parameters:{docs:{subtitle:"btu-tabs",description:{component:`
1
+ import{g as b,E as i,x as s}from"./iframe-BSHPpSig.js";import{o as c}from"./style-map-uSz4USKK.js";import"./preload-helper-PPVm8Dsz.js";const{events:d,args:u,argTypes:a}=b("btu-tabs"),h={title:"Components/Tabs",component:"btu-tabs",tags:["autodocs"],parameters:{docs:{subtitle:"btu-tabs",description:{component:`
2
2
  A tab group component that manages selection state across a set of \`btu-tab\` children.
3
3
 
4
4
  <h3>When to use:</h3>
@@ -1,4 +1,4 @@
1
- import{x as u}from"./iframe-WTEmYHJj.js";import"./preload-helper-PPVm8Dsz.js";function v(e,t){if(e<=0)return t;let n,o=0;return function(){if(n)return;const r=Date.now(),s=e-r+o;s<=0?(o=r,t.apply(this,[...arguments])):n=setTimeout(()=>{o=r,n=void 0,t.apply(this,[...arguments])},s)}}const x={title:"Utilities/Throttle",tags:["autodocs"],parameters:{docs:{subtitle:"The `throttle` utility function limits how often a function can execute, ensuring it runs at most once per specified interval. Useful for high-frequency events like scroll, resize, or mousemove."},controls:{expanded:!0}},argTypes:{interval:{control:{type:"number",min:0,max:2e3,step:50},description:"Throttle interval in milliseconds"}},args:{interval:200}},d={render:e=>{const t=`throttle-${Math.random().toString(36).substring(2,9)}`;let n=0,o=0;const r=()=>{const m=document.getElementById(`${t}-normal-count`),h=document.getElementById(`${t}-throttled-count`);m&&(m.textContent=String(n)),h&&(h.textContent=String(o))},s=v(e.interval,()=>{o++,r()}),a=()=>{n++,r()},l=()=>{a(),s()};return u`
1
+ import{x as u}from"./iframe-BSHPpSig.js";import"./preload-helper-PPVm8Dsz.js";function v(e,t){if(e<=0)return t;let n,o=0;return function(){if(n)return;const r=Date.now(),s=e-r+o;s<=0?(o=r,t.apply(this,[...arguments])):n=setTimeout(()=>{o=r,n=void 0,t.apply(this,[...arguments])},s)}}const x={title:"Utilities/Throttle",tags:["autodocs"],parameters:{docs:{subtitle:"The `throttle` utility function limits how often a function can execute, ensuring it runs at most once per specified interval. Useful for high-frequency events like scroll, resize, or mousemove."},controls:{expanded:!0}},argTypes:{interval:{control:{type:"number",min:0,max:2e3,step:50},description:"Throttle interval in milliseconds"}},args:{interval:200}},d={render:e=>{const t=`throttle-${Math.random().toString(36).substring(2,9)}`;let n=0,o=0;const r=()=>{const m=document.getElementById(`${t}-normal-count`),h=document.getElementById(`${t}-throttled-count`);m&&(m.textContent=String(n)),h&&(h.textContent=String(o))},s=v(e.interval,()=>{o++,r()}),a=()=>{n++,r()},l=()=>{a(),s()};return u`
2
2
  <div class="space-y-4">
3
3
  <div class="text-base">
4
4
  <p class="mb-2">
@@ -1,4 +1,4 @@
1
- import{ah as v,ai as x,x as c,i as w}from"./iframe-WTEmYHJj.js";import{t as E}from"./custom-element-UsVr97OX.js";import{o as T}from"./if-defined-Dl8MuiCE.js";import{o as k}from"./style-map-BhvFBtuB.js";import{E as C,R as L}from"./ReadyMixin-B1y8EBLz.js";import"./preload-helper-PPVm8Dsz.js";const D={attribute:!0,type:String,converter:x,reflect:!1,hasChanged:v},S=(o=D,i,l)=>{const{kind:t,metadata:e}=l;let s=globalThis.litPropertyMetadata.get(e);if(s===void 0&&globalThis.litPropertyMetadata.set(e,s=new Map),t==="setter"&&((o=Object.create(o)).wrapped=!0),s.set(l.name,o),t==="accessor"){const{name:r}=l;return{set(n){const g=i.get.call(this);i.set.call(this,n),this.requestUpdate(r,g,o)},init(n){return n!==void 0&&this.C(r,void 0,o,n),n}}}if(t==="setter"){const{name:r}=l;return function(n){const g=this[r];i.call(this,n),this.requestUpdate(r,g,o)}}throw Error("Unsupported decorator location: "+t)};function p(o){return(i,l)=>typeof l=="object"?S(o,i,l):((t,e,s)=>{const r=e.hasOwnProperty(s);return e.constructor.createProperty(s,t),r?Object.getOwnPropertyDescriptor(e,s):void 0})(o,i,l)}var A=Object.defineProperty,a=(o,i,l,t)=>{for(var e=void 0,s=o.length-1,r;s>=0;s--)(r=o[s])&&(e=r(i,l,e)||e);return e&&A(i,l,e),e};const M={top:"btu-tooltip-top",bottom:"btu-tooltip-bottom",left:"btu-tooltip-left",right:"btu-tooltip-right"},_={sm:"btu-tooltip-offset-sm",md:"btu-tooltip-offset-md",lg:"btu-tooltip-offset-lg",xl:"btu-tooltip-offset-xl"},O=o=>{class i extends o{constructor(){super(...arguments),this.tooltip="",this.tooltipPosition="top",this.tooltipDelay=300,this.tooltipOffset=null,this.tooltipNoArrow=!1,this.tooltipTrigger="hover focus",this._tooltipEl=null,this._tooltipId=`btu-tooltip-${crypto.randomUUID()}`,this._anchorName=`--btu-trigger-${crypto.randomUUID()}`,this._showTimer=null,this._isVisible=!1,this._activeTriggers=new Set,this._onMouseEnter=this._handleMouseEnter.bind(this),this._onMouseLeave=this._handleMouseLeave.bind(this),this._onFocusIn=this._handleFocusIn.bind(this),this._onFocusOut=this._handleFocusOut.bind(this),this._onClick=this._handleClick.bind(this),this._onNativeToggle=this._handleNativeToggle.bind(this),this._onKeyDown=this._handleKeyDown.bind(this),this._onDocumentClick=null}connectedCallback(){super.connectedCallback(),this._bindTriggerListeners()}disconnectedCallback(){if(this._clearShowTimer(),this._removeDocumentClickListener(),this._unbindTriggerListeners(),this._tooltipEl){try{this._tooltipEl.hidePopover()}catch(t){t instanceof DOMException&&t.name==="InvalidStateError"||console.warn("[btu-tooltip] Failed to hide tooltip during disconnect:",t)}this._tooltipEl.removeEventListener("toggle",this._onNativeToggle),this._tooltipEl.remove(),this._tooltipEl=null}this._removeAriaDescribedBy(),this.style.removeProperty("anchor-name"),this._isVisible=!1,super.disconnectedCallback()}updated(t){super.updated(t),t.has("tooltipTrigger")&&(this._unbindTriggerListeners(),this._bindTriggerListeners(),this._tooltipEl&&(this._isVisible&&this._hide(),this._tooltipEl.setAttribute("popover",this._getPopoverMode()))),(t.has("tooltip")||t.has("tooltipPosition")||t.has("tooltipDelay")||t.has("tooltipOffset")||t.has("tooltipNoArrow"))&&this._syncTooltipElement()}_getPopoverMode(){return"manual"}_syncTooltipElement(){if(!this.tooltip){this._tooltipEl&&(this._hide(),this._tooltipEl.removeEventListener("toggle",this._onNativeToggle),this._tooltipEl.remove(),this._tooltipEl=null,this._removeAriaDescribedBy(),this.style.removeProperty("anchor-name"),document.removeEventListener("keydown",this._onKeyDown));return}this.style.setProperty("anchor-name",this._anchorName),this._tooltipEl||(this._tooltipEl=this._createTooltipElement(),this.appendChild(this._tooltipEl),this._appendAriaDescribedBy(),document.addEventListener("keydown",this._onKeyDown)),this._tooltipEl.textContent=this.tooltip,this._tooltipEl.className=this._buildTooltipClasses()}_createTooltipElement(){const t=document.createElement("div");return t.id=this._tooltipId,t.className=this._buildTooltipClasses(),t.setAttribute("role","tooltip"),t.setAttribute("data-tooltip-internal",""),t.setAttribute("popover",this._getPopoverMode()),t.style.setProperty("position-anchor",this._anchorName),t.textContent=this.tooltip,t.addEventListener("toggle",this._onNativeToggle),t}_buildTooltipClasses(){const t=["btu-tooltip",M[this.tooltipPosition]];return this.tooltipOffset&&_[this.tooltipOffset]&&t.push(_[this.tooltipOffset]),this.tooltipNoArrow&&t.push("btu-tooltip-no-arrow"),t.join(" ")}_hasTrigger(t){return this._activeTriggers.has(t)}_bindTriggerListeners(){const t=new Set(["hover","focus","click"]);this._activeTriggers=new Set(this.tooltipTrigger.trim().split(/\s+/));for(const e of this._activeTriggers)t.has(e)||console.warn(`[btu-tooltip] Unrecognized tooltip-trigger value: "${e}". Valid values: hover, focus, click.`);this._hasTrigger("hover")&&(this.addEventListener("mouseenter",this._onMouseEnter),this.addEventListener("mouseleave",this._onMouseLeave)),this._hasTrigger("focus")&&(this.addEventListener("focusin",this._onFocusIn),this.addEventListener("focusout",this._onFocusOut)),this._hasTrigger("click")&&this.addEventListener("click",this._onClick)}_unbindTriggerListeners(){this.removeEventListener("mouseenter",this._onMouseEnter),this.removeEventListener("mouseleave",this._onMouseLeave),this.removeEventListener("focusin",this._onFocusIn),this.removeEventListener("focusout",this._onFocusOut),this.removeEventListener("click",this._onClick),document.removeEventListener("keydown",this._onKeyDown)}_show(){if(!(this._isVisible||!this._tooltipEl)){try{this._tooltipEl.showPopover()}catch(t){t instanceof DOMException&&t.name==="InvalidStateError"||console.warn("[btu-tooltip] Failed to show tooltip:",t)}this._hasTrigger("click")&&setTimeout(()=>{this._removeDocumentClickListener(),this._onDocumentClick=t=>{const e=t.composedPath();!e.includes(this)&&(!this._tooltipEl||!e.includes(this._tooltipEl))&&this._hide()},document.addEventListener("click",this._onDocumentClick)},0)}}_hide(){if(this._clearShowTimer(),this._removeDocumentClickListener(),!(!this._isVisible||!this._tooltipEl))try{this._tooltipEl.hidePopover()}catch(t){t instanceof DOMException&&t.name==="InvalidStateError"||console.warn("[btu-tooltip] Failed to hide tooltip:",t)}}_removeDocumentClickListener(){this._onDocumentClick&&(document.removeEventListener("click",this._onDocumentClick),this._onDocumentClick=null)}_handleNativeToggle(t){const{newState:e}=t;this._isVisible=e==="open";const s=this._isVisible?"btu-tooltip-show":"btu-tooltip-hide",r=new CustomEvent(s,{bubbles:!0,composed:!0});this.dispatchEvent(r)}_handleKeyDown(t){t.key==="Escape"&&(this._clearShowTimer(),this._hide())}_clearShowTimer(){this._showTimer!==null&&(clearTimeout(this._showTimer),this._showTimer=null)}_handleMouseEnter(){this._clearShowTimer(),this._showTimer=setTimeout(()=>{this._show()},this.tooltipDelay)}_handleMouseLeave(){this._clearShowTimer(),this._hide()}_handleFocusIn(){this._clearShowTimer(),this._show()}_handleFocusOut(){this._clearShowTimer(),this._hide()}_handleClick(){this._clearShowTimer(),this._isVisible?this._hide():this._show()}_appendAriaDescribedBy(){const t=this.getAttribute("aria-describedby");t?t.includes(this._tooltipId)||this.setAttribute("aria-describedby",`${t} ${this._tooltipId}`):this.setAttribute("aria-describedby",this._tooltipId)}_removeAriaDescribedBy(){const t=this.getAttribute("aria-describedby");if(!t)return;const e=t.split(/\s+/).filter(s=>s!==this._tooltipId).join(" ").trim();e?this.setAttribute("aria-describedby",e):this.removeAttribute("aria-describedby")}}return a([p({attribute:"tooltip"})],i.prototype,"tooltip"),a([p({attribute:"tooltip-position"})],i.prototype,"tooltipPosition"),a([p({attribute:"tooltip-delay",type:Number})],i.prototype,"tooltipDelay"),a([p({attribute:"tooltip-offset"})],i.prototype,"tooltipOffset"),a([p({attribute:"tooltip-no-arrow",type:Boolean})],i.prototype,"tooltipNoArrow"),a([p({attribute:"tooltip-trigger"})],i.prototype,"tooltipTrigger"),i};var P=Object.defineProperty,$=Object.getOwnPropertyDescriptor,y=(o,i,l,t)=>{for(var e=t>1?void 0:t?$(i,l):i,s=o.length-1,r;s>=0;s--)(r=o[s])&&(e=(t?r(i,l,e):r(e))||e);return t&&e&&P(i,l,e),e};let b=class extends O(C(L(w))){constructor(){super(...arguments),this.label="Hover me",this.initialClasses=[]}connectedCallback(){super.connectedCallback(),this.className&&(this.initialClasses=this.className.split(" ").filter(o=>o.trim()))}createRenderRoot(){return this}willUpdate(){const o=[...this.initialClasses,"tooltip-demo"];this.className=o.filter(Boolean).join(" ")}render(){return c`${this.label}`}};y([p({type:String})],b.prototype,"label",2);b=y([E("tooltip-demo")],b);const f=`
1
+ import{ah as v,ai as x,x as c,i as w}from"./iframe-BSHPpSig.js";import{t as E}from"./custom-element-UsVr97OX.js";import{o as T}from"./if-defined-DphVHb7j.js";import{o as k}from"./style-map-uSz4USKK.js";import{E as C,R as L}from"./ReadyMixin-DehOcbYB.js";import"./preload-helper-PPVm8Dsz.js";const D={attribute:!0,type:String,converter:x,reflect:!1,hasChanged:v},S=(o=D,i,l)=>{const{kind:t,metadata:e}=l;let s=globalThis.litPropertyMetadata.get(e);if(s===void 0&&globalThis.litPropertyMetadata.set(e,s=new Map),t==="setter"&&((o=Object.create(o)).wrapped=!0),s.set(l.name,o),t==="accessor"){const{name:r}=l;return{set(n){const g=i.get.call(this);i.set.call(this,n),this.requestUpdate(r,g,o)},init(n){return n!==void 0&&this.C(r,void 0,o,n),n}}}if(t==="setter"){const{name:r}=l;return function(n){const g=this[r];i.call(this,n),this.requestUpdate(r,g,o)}}throw Error("Unsupported decorator location: "+t)};function p(o){return(i,l)=>typeof l=="object"?S(o,i,l):((t,e,s)=>{const r=e.hasOwnProperty(s);return e.constructor.createProperty(s,t),r?Object.getOwnPropertyDescriptor(e,s):void 0})(o,i,l)}var A=Object.defineProperty,a=(o,i,l,t)=>{for(var e=void 0,s=o.length-1,r;s>=0;s--)(r=o[s])&&(e=r(i,l,e)||e);return e&&A(i,l,e),e};const M={top:"btu-tooltip-top",bottom:"btu-tooltip-bottom",left:"btu-tooltip-left",right:"btu-tooltip-right"},_={sm:"btu-tooltip-offset-sm",md:"btu-tooltip-offset-md",lg:"btu-tooltip-offset-lg",xl:"btu-tooltip-offset-xl"},O=o=>{class i extends o{constructor(){super(...arguments),this.tooltip="",this.tooltipPosition="top",this.tooltipDelay=300,this.tooltipOffset=null,this.tooltipNoArrow=!1,this.tooltipTrigger="hover focus",this._tooltipEl=null,this._tooltipId=`btu-tooltip-${crypto.randomUUID()}`,this._anchorName=`--btu-trigger-${crypto.randomUUID()}`,this._showTimer=null,this._isVisible=!1,this._activeTriggers=new Set,this._onMouseEnter=this._handleMouseEnter.bind(this),this._onMouseLeave=this._handleMouseLeave.bind(this),this._onFocusIn=this._handleFocusIn.bind(this),this._onFocusOut=this._handleFocusOut.bind(this),this._onClick=this._handleClick.bind(this),this._onNativeToggle=this._handleNativeToggle.bind(this),this._onKeyDown=this._handleKeyDown.bind(this),this._onDocumentClick=null}connectedCallback(){super.connectedCallback(),this._bindTriggerListeners()}disconnectedCallback(){if(this._clearShowTimer(),this._removeDocumentClickListener(),this._unbindTriggerListeners(),this._tooltipEl){try{this._tooltipEl.hidePopover()}catch(t){t instanceof DOMException&&t.name==="InvalidStateError"||console.warn("[btu-tooltip] Failed to hide tooltip during disconnect:",t)}this._tooltipEl.removeEventListener("toggle",this._onNativeToggle),this._tooltipEl.remove(),this._tooltipEl=null}this._removeAriaDescribedBy(),this.style.removeProperty("anchor-name"),this._isVisible=!1,super.disconnectedCallback()}updated(t){super.updated(t),t.has("tooltipTrigger")&&(this._unbindTriggerListeners(),this._bindTriggerListeners(),this._tooltipEl&&(this._isVisible&&this._hide(),this._tooltipEl.setAttribute("popover",this._getPopoverMode()))),(t.has("tooltip")||t.has("tooltipPosition")||t.has("tooltipDelay")||t.has("tooltipOffset")||t.has("tooltipNoArrow"))&&this._syncTooltipElement()}_getPopoverMode(){return"manual"}_syncTooltipElement(){if(!this.tooltip){this._tooltipEl&&(this._hide(),this._tooltipEl.removeEventListener("toggle",this._onNativeToggle),this._tooltipEl.remove(),this._tooltipEl=null,this._removeAriaDescribedBy(),this.style.removeProperty("anchor-name"),document.removeEventListener("keydown",this._onKeyDown));return}this.style.setProperty("anchor-name",this._anchorName),this._tooltipEl||(this._tooltipEl=this._createTooltipElement(),this.appendChild(this._tooltipEl),this._appendAriaDescribedBy(),document.addEventListener("keydown",this._onKeyDown)),this._tooltipEl.textContent=this.tooltip,this._tooltipEl.className=this._buildTooltipClasses()}_createTooltipElement(){const t=document.createElement("div");return t.id=this._tooltipId,t.className=this._buildTooltipClasses(),t.setAttribute("role","tooltip"),t.setAttribute("data-tooltip-internal",""),t.setAttribute("popover",this._getPopoverMode()),t.style.setProperty("position-anchor",this._anchorName),t.textContent=this.tooltip,t.addEventListener("toggle",this._onNativeToggle),t}_buildTooltipClasses(){const t=["btu-tooltip",M[this.tooltipPosition]];return this.tooltipOffset&&_[this.tooltipOffset]&&t.push(_[this.tooltipOffset]),this.tooltipNoArrow&&t.push("btu-tooltip-no-arrow"),t.join(" ")}_hasTrigger(t){return this._activeTriggers.has(t)}_bindTriggerListeners(){const t=new Set(["hover","focus","click"]);this._activeTriggers=new Set(this.tooltipTrigger.trim().split(/\s+/));for(const e of this._activeTriggers)t.has(e)||console.warn(`[btu-tooltip] Unrecognized tooltip-trigger value: "${e}". Valid values: hover, focus, click.`);this._hasTrigger("hover")&&(this.addEventListener("mouseenter",this._onMouseEnter),this.addEventListener("mouseleave",this._onMouseLeave)),this._hasTrigger("focus")&&(this.addEventListener("focusin",this._onFocusIn),this.addEventListener("focusout",this._onFocusOut)),this._hasTrigger("click")&&this.addEventListener("click",this._onClick)}_unbindTriggerListeners(){this.removeEventListener("mouseenter",this._onMouseEnter),this.removeEventListener("mouseleave",this._onMouseLeave),this.removeEventListener("focusin",this._onFocusIn),this.removeEventListener("focusout",this._onFocusOut),this.removeEventListener("click",this._onClick),document.removeEventListener("keydown",this._onKeyDown)}_show(){if(!(this._isVisible||!this._tooltipEl)){try{this._tooltipEl.showPopover()}catch(t){t instanceof DOMException&&t.name==="InvalidStateError"||console.warn("[btu-tooltip] Failed to show tooltip:",t)}this._hasTrigger("click")&&setTimeout(()=>{this._removeDocumentClickListener(),this._onDocumentClick=t=>{const e=t.composedPath();!e.includes(this)&&(!this._tooltipEl||!e.includes(this._tooltipEl))&&this._hide()},document.addEventListener("click",this._onDocumentClick)},0)}}_hide(){if(this._clearShowTimer(),this._removeDocumentClickListener(),!(!this._isVisible||!this._tooltipEl))try{this._tooltipEl.hidePopover()}catch(t){t instanceof DOMException&&t.name==="InvalidStateError"||console.warn("[btu-tooltip] Failed to hide tooltip:",t)}}_removeDocumentClickListener(){this._onDocumentClick&&(document.removeEventListener("click",this._onDocumentClick),this._onDocumentClick=null)}_handleNativeToggle(t){const{newState:e}=t;this._isVisible=e==="open";const s=this._isVisible?"btu-tooltip-show":"btu-tooltip-hide",r=new CustomEvent(s,{bubbles:!0,composed:!0});this.dispatchEvent(r)}_handleKeyDown(t){t.key==="Escape"&&(this._clearShowTimer(),this._hide())}_clearShowTimer(){this._showTimer!==null&&(clearTimeout(this._showTimer),this._showTimer=null)}_handleMouseEnter(){this._clearShowTimer(),this._showTimer=setTimeout(()=>{this._show()},this.tooltipDelay)}_handleMouseLeave(){this._clearShowTimer(),this._hide()}_handleFocusIn(){this._clearShowTimer(),this._show()}_handleFocusOut(){this._clearShowTimer(),this._hide()}_handleClick(){this._clearShowTimer(),this._isVisible?this._hide():this._show()}_appendAriaDescribedBy(){const t=this.getAttribute("aria-describedby");t?t.includes(this._tooltipId)||this.setAttribute("aria-describedby",`${t} ${this._tooltipId}`):this.setAttribute("aria-describedby",this._tooltipId)}_removeAriaDescribedBy(){const t=this.getAttribute("aria-describedby");if(!t)return;const e=t.split(/\s+/).filter(s=>s!==this._tooltipId).join(" ").trim();e?this.setAttribute("aria-describedby",e):this.removeAttribute("aria-describedby")}}return a([p({attribute:"tooltip"})],i.prototype,"tooltip"),a([p({attribute:"tooltip-position"})],i.prototype,"tooltipPosition"),a([p({attribute:"tooltip-delay",type:Number})],i.prototype,"tooltipDelay"),a([p({attribute:"tooltip-offset"})],i.prototype,"tooltipOffset"),a([p({attribute:"tooltip-no-arrow",type:Boolean})],i.prototype,"tooltipNoArrow"),a([p({attribute:"tooltip-trigger"})],i.prototype,"tooltipTrigger"),i};var P=Object.defineProperty,$=Object.getOwnPropertyDescriptor,y=(o,i,l,t)=>{for(var e=t>1?void 0:t?$(i,l):i,s=o.length-1,r;s>=0;s--)(r=o[s])&&(e=(t?r(i,l,e):r(e))||e);return t&&e&&P(i,l,e),e};let b=class extends O(C(L(w))){constructor(){super(...arguments),this.label="Hover me",this.initialClasses=[]}connectedCallback(){super.connectedCallback(),this.className&&(this.initialClasses=this.className.split(" ").filter(o=>o.trim()))}createRenderRoot(){return this}willUpdate(){const o=[...this.initialClasses,"tooltip-demo"];this.className=o.filter(Boolean).join(" ")}render(){return c`${this.label}`}};y([p({type:String})],b.prototype,"label",2);b=y([E("tooltip-demo")],b);const f=`
2
2
  .tooltip-demo {
3
3
  display: inline-flex;
4
4
  align-items: center;
@@ -1,4 +1,4 @@
1
- import{g as C,x as S}from"./iframe-WTEmYHJj.js";import{o as E}from"./if-defined-Dl8MuiCE.js";import{o as x}from"./style-map-BhvFBtuB.js";import"./preload-helper-PPVm8Dsz.js";const{events:B,args:U,argTypes:c}=C("btu-upload"),F=e=>{const o={};return e.dropzoneBg&&(o["--upload-dropzone-bg"]=e.dropzoneBg),e.dropzoneBorderColor&&(o["--upload-dropzone-border-color"]=e.dropzoneBorderColor),e.dropzoneBorderRadius&&(o["--upload-dropzone-border-radius"]=e.dropzoneBorderRadius),e.dropzoneHoverBg&&(o["--upload-dropzone-hover-bg"]=e.dropzoneHoverBg),e.dropzoneHoverBorderColor&&(o["--upload-dropzone-hover-border-color"]=e.dropzoneHoverBorderColor),e.dropzoneFocusRingColor&&(o["--upload-dropzone-focus-ring-color"]=e.dropzoneFocusRingColor),e.itemBg&&(o["--upload-item-bg"]=e.itemBg),e.itemBorderColor&&(o["--upload-item-border-color"]=e.itemBorderColor),e.itemActiveBorderColor&&(o["--upload-item-active-border-color"]=e.itemActiveBorderColor),e.itemCompleteBorderColor&&(o["--upload-item-complete-border-color"]=e.itemCompleteBorderColor),e.itemErrorBg&&(o["--upload-item-error-bg"]=e.itemErrorBg),e.itemErrorBorderColor&&(o["--upload-item-error-border-color"]=e.itemErrorBorderColor),o},T={title:"Components/Upload",component:"btu-upload",tags:["autodocs"],parameters:{docs:{subtitle:"btu-upload",description:{component:`
1
+ import{g as C,x as S}from"./iframe-BSHPpSig.js";import{o as E}from"./if-defined-DphVHb7j.js";import{o as x}from"./style-map-uSz4USKK.js";import"./preload-helper-PPVm8Dsz.js";const{events:B,args:U,argTypes:c}=C("btu-upload"),F=e=>{const o={};return e.dropzoneBg&&(o["--upload-dropzone-bg"]=e.dropzoneBg),e.dropzoneBorderColor&&(o["--upload-dropzone-border-color"]=e.dropzoneBorderColor),e.dropzoneBorderRadius&&(o["--upload-dropzone-border-radius"]=e.dropzoneBorderRadius),e.dropzoneHoverBg&&(o["--upload-dropzone-hover-bg"]=e.dropzoneHoverBg),e.dropzoneHoverBorderColor&&(o["--upload-dropzone-hover-border-color"]=e.dropzoneHoverBorderColor),e.dropzoneFocusRingColor&&(o["--upload-dropzone-focus-ring-color"]=e.dropzoneFocusRingColor),e.itemBg&&(o["--upload-item-bg"]=e.itemBg),e.itemBorderColor&&(o["--upload-item-border-color"]=e.itemBorderColor),e.itemActiveBorderColor&&(o["--upload-item-active-border-color"]=e.itemActiveBorderColor),e.itemCompleteBorderColor&&(o["--upload-item-complete-border-color"]=e.itemCompleteBorderColor),e.itemErrorBg&&(o["--upload-item-error-bg"]=e.itemErrorBg),e.itemErrorBorderColor&&(o["--upload-item-error-border-color"]=e.itemErrorBorderColor),o},T={title:"Components/Upload",component:"btu-upload",tags:["autodocs"],parameters:{docs:{subtitle:"btu-upload",description:{component:`
2
2
  A file upload component with drop zone and file list.
3
3
 
4
4
  The component is **presentation + file-selection only**. It handles file browsing
@@ -1,4 +1,4 @@
1
- import{g as y,x as c}from"./iframe-WTEmYHJj.js";import"./preload-helper-PPVm8Dsz.js";const{events:b,args:f,argTypes:h}=y("btu-upload-item"),e=r=>{const l=`upload-item-${crypto.randomUUID().slice(0,8)}`;return setTimeout(()=>{const m=document.getElementById(l)?.querySelector("btu-upload-item");if(!m)return;const u=new File([""],r.name,{type:r.mimeType??""});Object.defineProperty(u,"size",{value:r.size??0});const p=r.status??"uploading",d={id:crypto.randomUUID().slice(0,8),file:u,symbol:r.symbol},g=p==="pending"?{...d,status:"pending",progress:0}:p==="complete"?{...d,status:"complete",progress:100}:p==="error"?{...d,status:"error",progress:r.progress??0,errorMessage:r.errorMessage??""}:{...d,status:"uploading",progress:r.progress??0};m._configure(g)},50),c`<div id="${l}" style="max-width: 480px;"><btu-upload-item></btu-upload-item></div>`},k={title:"Components/Upload/Upload Item",component:"btu-upload-item",tags:["autodocs"],parameters:{docs:{subtitle:"Individual file row rendered inside btu-upload",description:{component:`
1
+ import{g as y,x as c}from"./iframe-BSHPpSig.js";import"./preload-helper-PPVm8Dsz.js";const{events:b,args:f,argTypes:h}=y("btu-upload-item"),e=r=>{const l=`upload-item-${crypto.randomUUID().slice(0,8)}`;return setTimeout(()=>{const m=document.getElementById(l)?.querySelector("btu-upload-item");if(!m)return;const u=new File([""],r.name,{type:r.mimeType??""});Object.defineProperty(u,"size",{value:r.size??0});const p=r.status??"uploading",d={id:crypto.randomUUID().slice(0,8),file:u,symbol:r.symbol},g=p==="pending"?{...d,status:"pending",progress:0}:p==="complete"?{...d,status:"complete",progress:100}:p==="error"?{...d,status:"error",progress:r.progress??0,errorMessage:r.errorMessage??""}:{...d,status:"uploading",progress:r.progress??0};m._configure(g)},50),c`<div id="${l}" style="max-width: 480px;"><btu-upload-item></btu-upload-item></div>`},k={title:"Components/Upload/Upload Item",component:"btu-upload-item",tags:["autodocs"],parameters:{docs:{subtitle:"Individual file row rendered inside btu-upload",description:{component:`
2
2
  \`btu-upload-item\` renders a single file's state inside a \`btu-upload\` file list. It is an **internal sub-component** — consumers should not create, query, or modify items directly. All interaction goes through \`btu-upload\` methods (\`setFileProgress\`, \`setFileStatus\`, \`setFileSymbol\`, \`removeFile\`).
3
3
 
4
4
  These stories exist for design documentation and visual QA of each status state in isolation. In practice, items are always created, configured, and destroyed by their parent \`btu-upload\`.
@@ -1,4 +1,4 @@
1
- import{S as U}from"./blocks-Z0quNc1U.js";import{e as X,f as _,E as B,r as j,x as A}from"./iframe-WTEmYHJj.js";import"./preload-helper-PPVm8Dsz.js";const C=()=>new J;class J{}const w=new WeakMap,k=X(class extends _{render(e){return B}update(e,[o]){const t=o!==this.G;return t&&this.G!==void 0&&this.rt(void 0),(t||this.lt!==this.ct)&&(this.G=o,this.ht=e.options?.host,this.rt(this.ct=e.element)),B}rt(e){if(this.isConnected||(e=void 0),typeof this.G=="function"){const o=this.ht??globalThis;let t=w.get(o);t===void 0&&(t=new WeakMap,w.set(o,t)),t.get(this.G)!==void 0&&this.G.call(this.ht,void 0),t.set(this.G,e),e!==void 0&&this.G.call(this.ht,e)}else this.G.value=e}get lt(){return typeof this.G=="function"?w.get(this.ht??globalThis)?.get(this.G):this.G?.value}disconnected(){this.lt===this.ct&&this.rt(void 0)}reconnected(){this.rt(this.ct)}}),ee={title:"Welcome",tags:["autodocs","!dev"],parameters:{layout:"fullscreen",controls:{disable:!0},actions:{disable:!0},options:{showPanel:!1},docs:{page:()=>j.createElement("div",{className:"welcome-docs"},j.createElement(U))}}},$=[[13,52,158],[19,183,158],[99,43,176],[95,233,208],[240,67,62],[83,36,148]],d=(e,o)=>e+Math.random()*(o-e),M=e=>e[Math.floor(Math.random()*e.length)];function I(e,o){if(matchMedia("(prefers-reduced-motion: reduce)").matches)return;const t=e.getContext("2d"),l=Array.from({length:3},()=>({x:0,y:0,rgb:M($),opacity:0,radius:d(250,350)}));let h=null;function O(){const s=5*devicePixelRatio,n=Object.assign(document.createElement("canvas"),{width:s,height:s}),r=n.getContext("2d");r.fillStyle="#000",r.arc(s/2,s/2,1.6*devicePixelRatio,0,Math.PI*2),r.fill(),h=t.createPattern(n,"repeat")}function R(){const{width:s,height:n}=e.getBoundingClientRect();e.width=s*devicePixelRatio,e.height=n*devicePixelRatio,t.setTransform(devicePixelRatio,0,0,devicePixelRatio,0,0),O()}R(),addEventListener("resize",R);const a=o?l[0]:null;a&&(a.rgb=M($),a.radius=300),(function s(){if(!e.isConnected)return;const n=e.width/devicePixelRatio,r=e.height/devicePixelRatio;t.clearRect(0,0,n,r),a&&o&&(o.active?(a.x+=(o.tx-a.x)*.06,a.y+=(o.ty-a.y)*.06,a.opacity+=(.35-a.opacity)*.08):a.opacity+=(0-a.opacity)*.04);for(const i of l){if(i.opacity<=0)continue;const[u,p,b]=i.rgb,c=t.createRadialGradient(i.x,i.y,0,i.x,i.y,i.radius);c.addColorStop(0,`rgba(${u},${p},${b},${i.opacity})`),c.addColorStop(1,`rgba(${u},${p},${b},0)`),t.fillStyle=c,t.fillRect(i.x-i.radius,i.y-i.radius,i.radius*2,i.radius*2)}h&&(t.globalCompositeOperation="destination-in",t.fillStyle=h,t.fillRect(0,0,n,r),t.globalCompositeOperation="source-over"),requestAnimationFrame(s)})();function S(s){if(!e.isConnected)return;const{width:n,height:r}=e.getBoundingClientRect(),i=300,u=m=>m<2?{x:d(.15*n,.85*n),y:m===0?-i:r+i}:{x:m===2?-i:n+i,y:d(.15*r,.85*r)},p=Math.floor(Math.random()*4),b=(p+(Math.random()<.5?2:[1,3][Math.floor(Math.random()*2)]))%4,c=u(p),z=u(b),y=z.x-c.x,x=z.y-c.y,E=Math.hypot(y,x)||1,Y=Math.min(n,r)*d(.15,.35),D=d(1.2,2.2);s.rgb=M($),s.radius=d(250,350);let P=null;const F=d(6e3,7500);(function m(G){if(!e.isConnected)return;P??=G;const f=Math.min((G-P)/F,1),L=.5-.5*Math.cos(f*Math.PI),T=Math.sin(f*D*Math.PI)*Y;s.x=c.x+y*L+-x/E*T,s.y=c.y+x*L+y/E*T,s.opacity=.35*Math.min(f/.2,1)*Math.min((1-f)/.2,1),f<1?requestAnimationFrame(m):s.opacity=0})(performance.now())}(o?l.slice(1):l).forEach((s,n)=>setTimeout(()=>{S(s),setInterval(()=>e.isConnected&&S(s),7500)},1e3+n*2500))}const q="position:absolute;inset:0;width:100%;height:100%;pointer-events:none;",N=C(),W=C(),H=C(),v={active:!1,tx:0,ty:0},g={render:()=>(queueMicrotask(()=>{const e=N.value;e&&!e.dataset.init&&(e.dataset.init="1",I(e));const o=W.value;o&&!o.dataset.init&&(o.dataset.init="1",I(o,v));const t=H.value;t&&!t.dataset.init&&(t.dataset.init="1",t.addEventListener("mousemove",l=>{const h=t.getBoundingClientRect();v.tx=l.clientX-h.left,v.ty=l.clientY-h.top,v.active=!0}),t.addEventListener("mouseleave",()=>{v.active=!1}))}),A`
1
+ import{S as U}from"./blocks-wSKOBuKH.js";import{e as X,f as _,E as B,r as j,x as A}from"./iframe-BSHPpSig.js";import"./preload-helper-PPVm8Dsz.js";const C=()=>new J;class J{}const w=new WeakMap,k=X(class extends _{render(e){return B}update(e,[o]){const t=o!==this.G;return t&&this.G!==void 0&&this.rt(void 0),(t||this.lt!==this.ct)&&(this.G=o,this.ht=e.options?.host,this.rt(this.ct=e.element)),B}rt(e){if(this.isConnected||(e=void 0),typeof this.G=="function"){const o=this.ht??globalThis;let t=w.get(o);t===void 0&&(t=new WeakMap,w.set(o,t)),t.get(this.G)!==void 0&&this.G.call(this.ht,void 0),t.set(this.G,e),e!==void 0&&this.G.call(this.ht,e)}else this.G.value=e}get lt(){return typeof this.G=="function"?w.get(this.ht??globalThis)?.get(this.G):this.G?.value}disconnected(){this.lt===this.ct&&this.rt(void 0)}reconnected(){this.rt(this.ct)}}),ee={title:"Welcome",tags:["autodocs","!dev"],parameters:{layout:"fullscreen",controls:{disable:!0},actions:{disable:!0},options:{showPanel:!1},docs:{page:()=>j.createElement("div",{className:"welcome-docs"},j.createElement(U))}}},$=[[13,52,158],[19,183,158],[99,43,176],[95,233,208],[240,67,62],[83,36,148]],d=(e,o)=>e+Math.random()*(o-e),M=e=>e[Math.floor(Math.random()*e.length)];function I(e,o){if(matchMedia("(prefers-reduced-motion: reduce)").matches)return;const t=e.getContext("2d"),l=Array.from({length:3},()=>({x:0,y:0,rgb:M($),opacity:0,radius:d(250,350)}));let h=null;function O(){const s=5*devicePixelRatio,n=Object.assign(document.createElement("canvas"),{width:s,height:s}),r=n.getContext("2d");r.fillStyle="#000",r.arc(s/2,s/2,1.6*devicePixelRatio,0,Math.PI*2),r.fill(),h=t.createPattern(n,"repeat")}function R(){const{width:s,height:n}=e.getBoundingClientRect();e.width=s*devicePixelRatio,e.height=n*devicePixelRatio,t.setTransform(devicePixelRatio,0,0,devicePixelRatio,0,0),O()}R(),addEventListener("resize",R);const a=o?l[0]:null;a&&(a.rgb=M($),a.radius=300),(function s(){if(!e.isConnected)return;const n=e.width/devicePixelRatio,r=e.height/devicePixelRatio;t.clearRect(0,0,n,r),a&&o&&(o.active?(a.x+=(o.tx-a.x)*.06,a.y+=(o.ty-a.y)*.06,a.opacity+=(.35-a.opacity)*.08):a.opacity+=(0-a.opacity)*.04);for(const i of l){if(i.opacity<=0)continue;const[u,p,b]=i.rgb,c=t.createRadialGradient(i.x,i.y,0,i.x,i.y,i.radius);c.addColorStop(0,`rgba(${u},${p},${b},${i.opacity})`),c.addColorStop(1,`rgba(${u},${p},${b},0)`),t.fillStyle=c,t.fillRect(i.x-i.radius,i.y-i.radius,i.radius*2,i.radius*2)}h&&(t.globalCompositeOperation="destination-in",t.fillStyle=h,t.fillRect(0,0,n,r),t.globalCompositeOperation="source-over"),requestAnimationFrame(s)})();function S(s){if(!e.isConnected)return;const{width:n,height:r}=e.getBoundingClientRect(),i=300,u=m=>m<2?{x:d(.15*n,.85*n),y:m===0?-i:r+i}:{x:m===2?-i:n+i,y:d(.15*r,.85*r)},p=Math.floor(Math.random()*4),b=(p+(Math.random()<.5?2:[1,3][Math.floor(Math.random()*2)]))%4,c=u(p),z=u(b),y=z.x-c.x,x=z.y-c.y,E=Math.hypot(y,x)||1,Y=Math.min(n,r)*d(.15,.35),D=d(1.2,2.2);s.rgb=M($),s.radius=d(250,350);let P=null;const F=d(6e3,7500);(function m(G){if(!e.isConnected)return;P??=G;const f=Math.min((G-P)/F,1),L=.5-.5*Math.cos(f*Math.PI),T=Math.sin(f*D*Math.PI)*Y;s.x=c.x+y*L+-x/E*T,s.y=c.y+x*L+y/E*T,s.opacity=.35*Math.min(f/.2,1)*Math.min((1-f)/.2,1),f<1?requestAnimationFrame(m):s.opacity=0})(performance.now())}(o?l.slice(1):l).forEach((s,n)=>setTimeout(()=>{S(s),setInterval(()=>e.isConnected&&S(s),7500)},1e3+n*2500))}const q="position:absolute;inset:0;width:100%;height:100%;pointer-events:none;",N=C(),W=C(),H=C(),v={active:!1,tx:0,ty:0},g={render:()=>(queueMicrotask(()=>{const e=N.value;e&&!e.dataset.init&&(e.dataset.init="1",I(e));const o=W.value;o&&!o.dataset.init&&(o.dataset.init="1",I(o,v));const t=H.value;t&&!t.dataset.init&&(t.dataset.init="1",t.addEventListener("mousemove",l=>{const h=t.getBoundingClientRect();v.tx=l.clientX-h.left,v.ty=l.clientY-h.top,v.active=!0}),t.addEventListener("mouseleave",()=>{v.active=!1}))}),A`
2
2
  <div
3
3
  ${k(H)}
4
4
  style="
@@ -1,4 +1,4 @@
1
- import{g as h,x as l}from"./iframe-WTEmYHJj.js";import{o as m}from"./style-map-BhvFBtuB.js";import"./preload-helper-PPVm8Dsz.js";const{events:y,args:w,argTypes:a}=h("btu-widget"),$={title:"Components/Widget",component:"btu-widget",tags:["autodocs"],parameters:{docs:{subtitle:"btu-widget",description:{component:`
1
+ import{g as h,x as l}from"./iframe-BSHPpSig.js";import{o as m}from"./style-map-uSz4USKK.js";import"./preload-helper-PPVm8Dsz.js";const{events:y,args:w,argTypes:a}=h("btu-widget"),$={title:"Components/Widget",component:"btu-widget",tags:["autodocs"],parameters:{docs:{subtitle:"btu-widget",description:{component:`
2
2
  <h3>When to use:</h3>
3
3
  <ul>
4
4
  <li>To display content in a structured widget layout</li>