@brightspot/ui 1.6.0 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (82) hide show
  1. package/dist/components/dropdown/Dropdown.d.ts +172 -0
  2. package/dist/components/dropdown/Dropdown.d.ts.map +1 -0
  3. package/dist/components/dropdown/Dropdown.js +407 -0
  4. package/dist/components/dropdown/Dropdown.js.map +1 -0
  5. package/dist/components/dropdown/DropdownItem.d.ts +108 -0
  6. package/dist/components/dropdown/DropdownItem.d.ts.map +1 -0
  7. package/dist/components/dropdown/DropdownItem.js +210 -0
  8. package/dist/components/dropdown/DropdownItem.js.map +1 -0
  9. package/dist/components/dropdown/DropdownMenu.d.ts +117 -0
  10. package/dist/components/dropdown/DropdownMenu.d.ts.map +1 -0
  11. package/dist/components/dropdown/DropdownMenu.js +295 -0
  12. package/dist/components/dropdown/DropdownMenu.js.map +1 -0
  13. package/dist/custom-elements.json +1097 -101
  14. package/dist/storybook/assets/Avatar.stories-BAaSlDF7.js +213 -0
  15. package/dist/storybook/assets/{AvatarGroup.stories-BBkQuFKk.js → AvatarGroup.stories-CgoDB4N4.js} +1 -1
  16. package/dist/storybook/assets/{Badge.stories-mFZsls7i.js → Badge.stories-uexxdmo6.js} +3 -3
  17. package/dist/storybook/assets/{Button.stories-CAWX17L1.js → Button.stories-T9UJUPHI.js} +1 -1
  18. package/dist/storybook/assets/{CircularProgress.stories-DBVt4Cg2.js → CircularProgress.stories-DW-VJA5j.js} +6 -6
  19. package/dist/storybook/assets/{ClipboardMixin.stories-BH9E-OI6.js → ClipboardMixin.stories-DzU4vxu5.js} +1 -1
  20. package/dist/storybook/assets/{Color-6BZIO3FS-CVnTzq2p.js → Color-6BZIO3FS-DRk2xjoN.js} +1 -1
  21. package/dist/storybook/assets/{Colors.stories-BFYmP0LL.js → Colors.stories-_UPdvuhY.js} +1 -1
  22. package/dist/storybook/assets/{ComponentStatesMixin-Cu7YXkU8.js → ComponentStatesMixin-BIu5SKeV.js} +1 -1
  23. package/dist/storybook/assets/{ComponentStatesMixin.stories-CAvyYt0H.js → ComponentStatesMixin.stories-C0FLaqLu.js} +1 -1
  24. package/dist/storybook/assets/{CopyToClipboard.stories-DbJZsp_L.js → CopyToClipboard.stories-D31zoUVI.js} +1 -1
  25. package/dist/storybook/assets/{Debounce.stories-BiFiH1K9.js → Debounce.stories-CgPPl5Ee.js} +1 -1
  26. package/dist/storybook/assets/{DocsRenderer-LL677BLK-Bq6G4eeC.js → DocsRenderer-LL677BLK-iwiwOzX9.js} +6 -6
  27. package/dist/storybook/assets/Dropdown.stories-CDcl6rmG.js +697 -0
  28. package/dist/storybook/assets/{Events.stories-BsDBxh8_.js → Events.stories-DS6UC9dZ.js} +1 -1
  29. package/dist/storybook/assets/{Heading.stories-zGzWgHVO.js → Heading.stories-CAQfEGE2.js} +1 -1
  30. package/dist/storybook/assets/{Icon.stories-B4T6sSwf.js → Icon.stories-C7msWlHs.js} +11 -11
  31. package/dist/storybook/assets/{LinearProgress.stories-qzqmUUwY.js → LinearProgress.stories-DBGJ5a2-.js} +7 -7
  32. package/dist/storybook/assets/{Pagination.stories-B6Q-7taJ.js → Pagination.stories-C58bGOdf.js} +1 -1
  33. package/dist/storybook/assets/{Popover.stories-CGkU0SGv.js → Popover.stories-C9zU0sEX.js} +5 -5
  34. package/dist/storybook/assets/{ReadyMixin-3YCzoG6W.js → ReadyMixin-qf8SAjMu.js} +1 -1
  35. package/dist/storybook/assets/{Rtc.stories-Y1MYTWAt.js → Rtc.stories-k9tKHNhD.js} +1 -1
  36. package/dist/storybook/assets/{ScrollShadow.stories-B9kSpLT1.js → ScrollShadow.stories-Bp42zyLH.js} +1 -1
  37. package/dist/storybook/assets/{Throttle.stories-BgvLDrS3.js → Throttle.stories-B5YU-Nms.js} +1 -1
  38. package/dist/storybook/assets/Tooltip.stories-COQcvOnL.js +143 -0
  39. package/dist/storybook/assets/{Widget.stories--JpqVyJe.js → Widget.stories-D3Sq5-_A.js} +13 -13
  40. package/dist/storybook/assets/{WithTooltip-65CFNBJE-DNbD9hAX.js → WithTooltip-65CFNBJE-Cox81aM_.js} +1 -1
  41. package/dist/storybook/assets/{formatter-EIJCOSYU-Cy8KIxab.js → formatter-EIJCOSYU-3ErcoV9q.js} +1 -1
  42. package/dist/storybook/assets/if-defined-Bv2_qPJg.js +1 -0
  43. package/dist/storybook/assets/{iframe-Dz6CxatW.js → iframe-CM6gBkqA.js} +152 -152
  44. package/dist/storybook/assets/{iframe-DiT9Iz2T.css → iframe-D3r2Ciu8.css} +1 -1
  45. package/dist/storybook/assets/{index-CebChkmF.js → index-iwfnMgqg.js} +1 -1
  46. package/dist/storybook/assets/{onFind.stories-nHDImx0x.js → onFind.stories-CDtoTN6S.js} +1 -1
  47. package/dist/storybook/assets/{onRemove.stories-CBxYVPwd.js → onRemove.stories-CSTeFCLU.js} +1 -1
  48. package/dist/storybook/assets/{onVisible.stories-D4Qewc9Y.js → onVisible.stories-C-yiw9n4.js} +1 -1
  49. package/dist/storybook/assets/{style-map-BgW9piaW.js → style-map-BJGdSb_D.js} +1 -1
  50. package/dist/storybook/assets/{syntaxhighlighter-ED5Y7EFY-CROW1475.js → syntaxhighlighter-ED5Y7EFY-BEudYlVi.js} +1 -1
  51. package/dist/storybook/iframe.html +2 -2
  52. package/dist/storybook/index.json +1 -1
  53. package/dist/storybook/project.json +1 -1
  54. package/dist/tailwind-plugin-button.js +10 -0
  55. package/dist/tailwind-plugin-button.js.map +1 -1
  56. package/dist/tailwind-plugin-button.ts +10 -0
  57. package/dist/tailwind-plugin-dropdown.d.ts +2 -0
  58. package/dist/tailwind-plugin-dropdown.d.ts.map +1 -0
  59. package/dist/tailwind-plugin-dropdown.js +223 -0
  60. package/dist/tailwind-plugin-dropdown.js.map +1 -0
  61. package/dist/tailwind-plugin-dropdown.ts +249 -0
  62. package/dist/util/EventEmitterMixin.d.ts +13 -0
  63. package/dist/util/EventEmitterMixin.d.ts.map +1 -1
  64. package/dist/util/EventEmitterMixin.js.map +1 -1
  65. package/docs/components/Avatar.md +62 -0
  66. package/docs/components/AvatarGroup.md +52 -0
  67. package/docs/components/Badge.md +58 -0
  68. package/docs/components/CircularProgress.md +55 -0
  69. package/docs/components/CopyToClipboard.md +54 -0
  70. package/docs/components/Dropdown.md +100 -0
  71. package/docs/components/DropdownItem.md +64 -0
  72. package/docs/components/DropdownMenu.md +81 -0
  73. package/docs/components/Icon.md +61 -0
  74. package/docs/components/LinearProgress.md +40 -0
  75. package/docs/components/Pagination.md +95 -0
  76. package/docs/components/Popover.md +71 -0
  77. package/docs/components/README.md +24 -0
  78. package/docs/components/Widget.md +79 -0
  79. package/package.json +3 -2
  80. package/dist/storybook/assets/Avatar.stories-CafEcy4T.js +0 -214
  81. package/dist/storybook/assets/Tooltip.stories-POo1M-ew.js +0 -143
  82. package/dist/storybook/assets/if-defined-CngSGyRu.js +0 -1
@@ -0,0 +1,213 @@
1
+ import{g as A,x as n}from"./iframe-CM6gBkqA.js";import{o as c}from"./style-map-BJGdSb_D.js";import"./preload-helper-PPVm8Dsz.js";const{events:p,args:g,argTypes:a}=A("btu-avatar"),f=["xs","sm","md","lg","xl","xxl"],r="data:image/jpeg;base64,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",u={title:"Components/Avatar",component:"btu-avatar",tags:["autodocs"],parameters:{docs:{subtitle:"Display user avatars with image loading and fallback text",description:{component:`
2
+ <h3>When to use:</h3>
3
+ <ul>
4
+ <li>To represent a user or entity with a profile picture</li>
5
+ <li>In user lists, comment threads, or navigation bars</li>
6
+ <li>When you need graceful fallback to initials</li>
7
+ </ul>
8
+
9
+ <h3>When not to use:</h3>
10
+ <ul>
11
+ <li>For decorative images (use img tag instead)</li>
12
+ <li>For non-user entities without fallback text</li>
13
+ </ul>
14
+
15
+ <h3>Use Cases in the CMS:</h3>
16
+ <ul>
17
+ <li>The user profile control in the main navigation bar</li>
18
+ <li>Viewers in a search result item</li>
19
+ <li>Viewers in the recent activity dashboard widget</li>
20
+ <li>Used by [AvatarGroup](?path=/docs/components-avatargroup--docs)</li>
21
+ </ul>
22
+ `}},actions:{handles:p},controls:{expanded:!0}},args:{...g,alt:"Dylan",fallback:"DG",size:"md",tooltip:"Dylan G.","tooltip-position":"top"},argTypes:{...a,"--avatar-size":{table:{disable:!0}},"--avatar-bg-color":{table:{disable:!0}},"--avatar-corner-rounding":{table:{disable:!0}},"--avatar-ring-color":{table:{disable:!0}},"--avatar-ring-width":{table:{disable:!0}},src:{...a.src,control:{type:"text"},description:"Image source URL"},alt:{...a.alt,control:{type:"text"},description:"Alt text for the image"},fallback:{...a.fallback,control:{type:"text"},description:"Fallback text (typically initials)"},size:{...a.size,control:{type:"select"},options:f},tooltip:{...a.tooltip,control:{type:"text"},description:"Tooltip text shown on hover (via TooltipMixin)",table:{category:"Tooltip"}},"tooltip-position":{...a["tooltip-position"],control:{type:"select"},options:["top","bottom","left","right"],description:"Tooltip placement",table:{category:"Tooltip"}},customSize:{name:"--avatar-size",control:{type:"text"},description:'Custom size - overrides the size prop (e.g., "5rem")',table:{category:"CSS Properties"}},customBgColor:{name:"--avatar-bg-color",control:{type:"color"},description:"Custom background color for fallback",table:{category:"CSS Properties"}},customCornerRounding:{name:"--avatar-corner-rounding",control:{type:"text"},description:"Custom corner rounding for avatar shape",table:{category:"CSS Properties"}},customRingColor:{name:"--avatar-ring-color",control:{type:"color"},description:"Optional ring border color",table:{category:"CSS Properties"}},customRingWidth:{name:"--avatar-ring-width",control:{type:"text"},description:"Ring border width (default: 2px)",table:{category:"CSS Properties"}}},render:t=>{const e={};return t.customSize&&(e["--avatar-size"]=t.customSize),t.customBgColor&&(e["--avatar-bg-color"]=t.customBgColor),t.customCornerRounding&&(e["--avatar-corner-rounding"]=t.customCornerRounding),t.customRingColor&&(e["--avatar-ring-color"]=t.customRingColor),t.customRingWidth&&(e["--avatar-ring-width"]=t.customRingWidth),n`<btu-avatar
23
+ style=${c(e)}
24
+ src="${t.src}"
25
+ alt="${t.alt}"
26
+ fallback="${t.fallback}"
27
+ size="${t.size}"
28
+ tooltip="${t.tooltip}"
29
+ tooltip-position="${t["tooltip-position"]}"
30
+ ></btu-avatar>`}},o={args:{}},s={render:()=>n`<div class="flex flex-row items-center gap-4">
31
+ <btu-avatar src=${r} alt="dg" fallback="DG" size="xs" tooltip="Extra Small"></btu-avatar>
32
+ <btu-avatar src=${r} alt="dg" fallback="DG" size="sm" tooltip="Small"></btu-avatar>
33
+ <btu-avatar src=${r} alt="dg" fallback="DG" size="md" tooltip="Medium"></btu-avatar>
34
+ <btu-avatar src=${r} alt="dg" fallback="DG" size="lg" tooltip="Large"></btu-avatar>
35
+ <btu-avatar src=${r} alt="dg" fallback="DG" size="xl" tooltip="Extra Large"></btu-avatar>
36
+ <btu-avatar src=${r} alt="dg" fallback="DG" size="xxl" tooltip="Extra Extra Large"></btu-avatar>
37
+ </div>`,parameters:{docs:{description:{story:"Avatar supports six size variants: xs (1.5rem), sm (2.25rem), md (2.5rem), lg (3rem), xl (3.5rem), and xxl (4rem)."}}}},i={render:()=>n`<div class="flex flex-row items-center gap-4">
38
+ <div class="flex flex-col items-center gap-2">
39
+ <btu-avatar src="" alt="No Image" fallback="NI" size="lg" tooltip="No Image"></btu-avatar>
40
+ <span class="text-xs text-gray-600 dark:text-gray-400">No image</span>
41
+ </div>
42
+ <div class="flex flex-col items-center gap-2">
43
+ <btu-avatar
44
+ src="https://invalid-url-that-will-fail.example.com/image.jpg"
45
+ alt="Failed load"
46
+ fallback="FL"
47
+ size="lg"
48
+ tooltip="Failed Load"
49
+ ></btu-avatar>
50
+ <span class="text-xs text-gray-600 dark:text-gray-400">Image failed to load</span>
51
+ </div>
52
+ </div>`,parameters:{docs:{description:{story:"Avatars automatically display fallback text when no image source is provided or when an image fails to load. The failed image is removed from the DOM."}}}},l={render:()=>{const t=`data:image/svg+xml;base64,${btoa(`
53
+ <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
54
+ <defs>
55
+ <linearGradient id="starGrad" x1="0%" y1="0%" x2="100%" y2="100%">
56
+ <stop offset="0%" style="stop-color:rgb(234,179,8);stop-opacity:1" />
57
+ <stop offset="100%" style="stop-color:rgb(249,115,22);stop-opacity:1" />
58
+ </linearGradient>
59
+ </defs>
60
+ <!-- Star shape with gradient fill, transparent background -->
61
+ <polygon
62
+ points="50,15 61,40 88,40 67,56 73,82 50,67 27,82 33,56 12,40 39,40"
63
+ fill="url(#starGrad)"
64
+ stroke="rgb(251,191,36)"
65
+ stroke-width="2"
66
+ />
67
+ </svg>
68
+ `)}`;return n`<div class="flex flex-col gap-4">
69
+ <div class="flex items-center gap-2">
70
+ <strong>Transparent Image:</strong>
71
+ <btu-avatar src=${t} alt="Transparent" fallback="YO" size="lg"></btu-avatar>
72
+ </div>
73
+ <div class="story-custom-colors flex items-center gap-2">
74
+ <strong>Custom Colors:</strong>
75
+ <btu-avatar fallback="🫠" size="lg" style="--avatar-bg-color: oklch(70% 0.3 var(--hue))"></btu-avatar>
76
+ </div>
77
+ <div class="story-custom-colors flex items-center gap-2">
78
+ <strong>Custom Shape:</strong>
79
+ <btu-avatar fallback="🙃" size="lg" style="--avatar-corner-rounding: 0.5rem"></btu-avatar>
80
+ </div>
81
+ <div class="flex items-center gap-2">
82
+ <strong>With Ring:</strong>
83
+ <btu-avatar
84
+ src=${r}
85
+ alt="dg"
86
+ fallback="DG"
87
+ size="lg"
88
+ style="--avatar-ring-color: oklch(var(--btu-theme-primary-500)); --avatar-ring-width: 3px"
89
+ ></btu-avatar>
90
+ <btu-avatar
91
+ fallback="DG"
92
+ size="lg"
93
+ style="--avatar-ring-color: oklch(var(--btu-theme-success-500)); --avatar-ring-width: 3px"
94
+ ></btu-avatar>
95
+ </div>
96
+ </div>`},parameters:{docs:{description:{story:`
97
+ Avatars support advanced customization through CSS properties and content composition:
98
+
99
+ **Transparent Images:** When an avatar image has transparent areas, the fallback initials are automatically hidden once the image loads.
100
+
101
+ **Custom Color:** Override the fallback background color using the \`--avatar-bg-color\` CSS property.
102
+
103
+ **Custom Shape:** Overrides the fallback circular shape (making it a rounded square) using the \`--avatar-corner-rounding\` CSS property.
104
+
105
+ **With Ring:** Add a colored ring border using \`--avatar-ring-color\` and \`--avatar-ring-width\` CSS properties. Useful for indicating status or highlighting specific users.`}}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
106
+ args: {}
107
+ }`,...o.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
108
+ render: () => html\`<div class="flex flex-row items-center gap-4">
109
+ <btu-avatar src=\${DGDATA} alt="dg" fallback="DG" size="xs" tooltip="Extra Small"></btu-avatar>
110
+ <btu-avatar src=\${DGDATA} alt="dg" fallback="DG" size="sm" tooltip="Small"></btu-avatar>
111
+ <btu-avatar src=\${DGDATA} alt="dg" fallback="DG" size="md" tooltip="Medium"></btu-avatar>
112
+ <btu-avatar src=\${DGDATA} alt="dg" fallback="DG" size="lg" tooltip="Large"></btu-avatar>
113
+ <btu-avatar src=\${DGDATA} alt="dg" fallback="DG" size="xl" tooltip="Extra Large"></btu-avatar>
114
+ <btu-avatar src=\${DGDATA} alt="dg" fallback="DG" size="xxl" tooltip="Extra Extra Large"></btu-avatar>
115
+ </div>\`,
116
+ parameters: {
117
+ docs: {
118
+ description: {
119
+ story: 'Avatar supports six size variants: xs (1.5rem), sm (2.25rem), md (2.5rem), lg (3rem), xl (3.5rem), and xxl (4rem).'
120
+ }
121
+ }
122
+ }
123
+ }`,...s.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
124
+ render: () => html\`<div class="flex flex-row items-center gap-4">
125
+ <div class="flex flex-col items-center gap-2">
126
+ <btu-avatar src="" alt="No Image" fallback="NI" size="lg" tooltip="No Image"></btu-avatar>
127
+ <span class="text-xs text-gray-600 dark:text-gray-400">No image</span>
128
+ </div>
129
+ <div class="flex flex-col items-center gap-2">
130
+ <btu-avatar
131
+ src="https://invalid-url-that-will-fail.example.com/image.jpg"
132
+ alt="Failed load"
133
+ fallback="FL"
134
+ size="lg"
135
+ tooltip="Failed Load"
136
+ ></btu-avatar>
137
+ <span class="text-xs text-gray-600 dark:text-gray-400">Image failed to load</span>
138
+ </div>
139
+ </div>\`,
140
+ parameters: {
141
+ docs: {
142
+ description: {
143
+ story: 'Avatars automatically display fallback text when no image source is provided or when an image fails to load. The failed image is removed from the DOM.'
144
+ }
145
+ }
146
+ }
147
+ }`,...i.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
148
+ render: () => {
149
+ // SVG star shape with transparent background - demonstrates that fallback doesn't show through
150
+ const transparentAvatarSvg = \`data:image/svg+xml;base64,\${btoa(\`
151
+ <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
152
+ <defs>
153
+ <linearGradient id="starGrad" x1="0%" y1="0%" x2="100%" y2="100%">
154
+ <stop offset="0%" style="stop-color:rgb(234,179,8);stop-opacity:1" />
155
+ <stop offset="100%" style="stop-color:rgb(249,115,22);stop-opacity:1" />
156
+ </linearGradient>
157
+ </defs>
158
+ <!-- Star shape with gradient fill, transparent background -->
159
+ <polygon
160
+ points="50,15 61,40 88,40 67,56 73,82 50,67 27,82 33,56 12,40 39,40"
161
+ fill="url(#starGrad)"
162
+ stroke="rgb(251,191,36)"
163
+ stroke-width="2"
164
+ />
165
+ </svg>
166
+ \`)}\`;
167
+ return html\`<div class="flex flex-col gap-4">
168
+ <div class="flex items-center gap-2">
169
+ <strong>Transparent Image:</strong>
170
+ <btu-avatar src=\${transparentAvatarSvg} alt="Transparent" fallback="YO" size="lg"></btu-avatar>
171
+ </div>
172
+ <div class="story-custom-colors flex items-center gap-2">
173
+ <strong>Custom Colors:</strong>
174
+ <btu-avatar fallback="🫠" size="lg" style="--avatar-bg-color: oklch(70% 0.3 var(--hue))"></btu-avatar>
175
+ </div>
176
+ <div class="story-custom-colors flex items-center gap-2">
177
+ <strong>Custom Shape:</strong>
178
+ <btu-avatar fallback="🙃" size="lg" style="--avatar-corner-rounding: 0.5rem"></btu-avatar>
179
+ </div>
180
+ <div class="flex items-center gap-2">
181
+ <strong>With Ring:</strong>
182
+ <btu-avatar
183
+ src=\${DGDATA}
184
+ alt="dg"
185
+ fallback="DG"
186
+ size="lg"
187
+ style="--avatar-ring-color: oklch(var(--btu-theme-primary-500)); --avatar-ring-width: 3px"
188
+ ></btu-avatar>
189
+ <btu-avatar
190
+ fallback="DG"
191
+ size="lg"
192
+ style="--avatar-ring-color: oklch(var(--btu-theme-success-500)); --avatar-ring-width: 3px"
193
+ ></btu-avatar>
194
+ </div>
195
+ </div>\`;
196
+ },
197
+ parameters: {
198
+ docs: {
199
+ description: {
200
+ story: \`
201
+ Avatars support advanced customization through CSS properties and content composition:
202
+
203
+ **Transparent Images:** When an avatar image has transparent areas, the fallback initials are automatically hidden once the image loads.
204
+
205
+ **Custom Color:** Override the fallback background color using the \\\`--avatar-bg-color\\\` CSS property.
206
+
207
+ **Custom Shape:** Overrides the fallback circular shape (making it a rounded square) using the \\\`--avatar-corner-rounding\\\` CSS property.
208
+
209
+ **With Ring:** Add a colored ring border using \\\`--avatar-ring-color\\\` and \\\`--avatar-ring-width\\\` CSS properties. Useful for indicating status or highlighting specific users.\`
210
+ }
211
+ }
212
+ }
213
+ }`,...l.parameters?.docs?.source}}};const w=["Default","Sizes","FallbackStates","AdvancedUsage"];export{l as AdvancedUsage,o as Default,i as FallbackStates,s as Sizes,w as __namedExportsOrder,u as default};
@@ -1,4 +1,4 @@
1
- import{g as m,x as n}from"./iframe-Dz6CxatW.js";import{o as p}from"./style-map-BgW9piaW.js";import"./preload-helper-PPVm8Dsz.js";const{events:x,args:h,argTypes:b}=m("btu-avatar-group"),d=["purple","primary","teal","rose","error","warning","success"],P=t=>{let a=5381;for(let i=0;i<t.length;i++)a=a*33^t.charCodeAt(i);return a>>>0},e=t=>{const a=P(t)%d.length;return`oklch(var(--btu-theme-${d[a]}-600))`},S="data:image/jpeg;base64,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",A=[{initials:"AC",name:"Ashley",color:e("AC")},{initials:"DG",name:"Dylan",color:e("DG"),image:S},{initials:"JP",name:"Pencola",color:e("JP")},{initials:"JR",name:"John R.",color:e("JR")},{initials:"KW",name:"Kat(e)",color:e("KW")},{initials:"KL",name:"hotpink",color:e("KL")},{initials:"ML",name:"Lunsford",color:e("ML")},{initials:"MW",name:"Wardian",color:e("MW")},{initials:"PS",name:"Praneetha",color:e("PS")},{initials:"TN",name:"Tom",color:e("TN")}],R={title:"Components/AvatarGroup",component:"btu-avatar-group",tags:["autodocs"],parameters:{docs:{subtitle:"Group multiple avatars with overflow handling",description:{component:`
1
+ import{g as m,x as n}from"./iframe-CM6gBkqA.js";import{o as p}from"./style-map-BJGdSb_D.js";import"./preload-helper-PPVm8Dsz.js";const{events:x,args:h,argTypes:b}=m("btu-avatar-group"),d=["purple","primary","teal","rose","error","warning","success"],P=t=>{let a=5381;for(let i=0;i<t.length;i++)a=a*33^t.charCodeAt(i);return a>>>0},e=t=>{const a=P(t)%d.length;return`oklch(var(--btu-theme-${d[a]}-600))`},S="data:image/jpeg;base64,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",A=[{initials:"AC",name:"Ashley",color:e("AC")},{initials:"DG",name:"Dylan",color:e("DG"),image:S},{initials:"JP",name:"Pencola",color:e("JP")},{initials:"JR",name:"John R.",color:e("JR")},{initials:"KW",name:"Kat(e)",color:e("KW")},{initials:"KL",name:"hotpink",color:e("KL")},{initials:"ML",name:"Lunsford",color:e("ML")},{initials:"MW",name:"Wardian",color:e("MW")},{initials:"PS",name:"Praneetha",color:e("PS")},{initials:"TN",name:"Tom",color:e("TN")}],R={title:"Components/AvatarGroup",component:"btu-avatar-group",tags:["autodocs"],parameters:{docs:{subtitle:"Group multiple avatars with overflow handling",description:{component:`
2
2
  <h3>When to use:</h3>
3
3
  <ul>
4
4
  <li>To display multiple Avatars in a compact layout</li>
@@ -1,4 +1,4 @@
1
- import{g as c,x as s}from"./iframe-Dz6CxatW.js";import"./preload-helper-PPVm8Dsz.js";const{events:d,args:l,argTypes:o}=c("btu-badge"),g=["info","primary","error","success","warning"],u={title:"Components/Badge",component:"btu-badge",tags:["autodocs"],parameters:{docs:{subtitle:"A component for highlighting important information",description:{component:`
1
+ import{g as n,x as s}from"./iframe-CM6gBkqA.js";import{o as c}from"./style-map-BJGdSb_D.js";import"./preload-helper-PPVm8Dsz.js";const{events:d,args:l,argTypes:o}=n("btu-badge"),g=["info","primary","error","success","warning"],b={title:"Components/Badge",component:"btu-badge",tags:["autodocs"],parameters:{docs:{subtitle:"A component for highlighting important information",description:{component:`
2
2
  <h3>When to use:</h3>
3
3
  <ul>
4
4
  <li>To call attention to something</li>
@@ -11,7 +11,7 @@ import{g as c,x as s}from"./iframe-Dz6CxatW.js";import"./preload-helper-PPVm8Dsz
11
11
  <li>For very short numbers. Instead use a notification</li>
12
12
  <li>For circled notifications</li>
13
13
  </ul>
14
- `}},actions:{handles:d},controls:{expanded:!0}},args:{...l,variant:"success",dot:!1,size:"sm"},argTypes:{...o,"--badge-color-foreground":{table:{disable:!0}},"--badge-color-background":{table:{disable:!0}},"--badge-radius-size":{table:{disable:!0}},"--badge-px":{table:{disable:!0}},"--badge-py":{table:{disable:!0}},"--badge-dot-size":{table:{disable:!0}},variant:{...o.variant,control:{type:"select"},options:g},dot:{...o.dot,control:{type:"boolean"}},size:{...o.size,control:{type:"select"},options:["sm","md","lg"]},customBackgroundColor:{name:"--badge-color-background",control:{type:"color"},description:"Custom background color - overrides the theme color",table:{category:"CSS Properties"}},customForegroundColor:{name:"--badge-color-foreground",control:{type:"color"},description:"Custom foreground (text) color - overrides the theme color",table:{category:"CSS Properties"}},customRadiusSize:{name:"--badge-radius-size",control:{type:"text"},description:"Custom border radius size - overrides the shape default (default: 999px)",table:{category:"CSS Properties"}},customPadX:{name:"--badge-px",control:{type:"text"},description:"Horizontal padding - overrides the size default",table:{category:"CSS Properties"}},customPadY:{name:"--badge-py",control:{type:"text"},description:"Vertical padding - overrides the size default",table:{category:"CSS Properties"}},customDotSize:{name:"--badge-dot-size",control:{type:"text"},description:"Size of the dot affordance (default: 6px)",table:{category:"CSS Properties"}}},render:e=>{const a=[];e.customBackgroundColor&&a.push(`--badge-color-background: ${e.customBackgroundColor}`),e.customForegroundColor&&a.push(`--badge-color-foreground: ${e.customForegroundColor}`),e.customRadiusSize&&a.push(`--badge-radius-size: ${e.customRadiusSize}`),e.customPadX&&a.push(`--badge-px: ${e.customPadX}`),e.customPadY&&a.push(`--badge-py: ${e.customPadY}`),e.customDotSize&&a.push(`--badge-dot-size: ${e.customDotSize}`);const n=a.length>0?a.join("; "):"";return s`<btu-badge variant="${e.variant}" ?dot="${e.dot}" size="${e.size}" style="${n}"
14
+ `}},actions:{handles:d},controls:{expanded:!0}},args:{...l,variant:"success",dot:!1,size:"sm"},argTypes:{...o,"--badge-color-foreground":{table:{disable:!0}},"--badge-color-background":{table:{disable:!0}},"--badge-radius-size":{table:{disable:!0}},"--badge-px":{table:{disable:!0}},"--badge-py":{table:{disable:!0}},"--badge-dot-size":{table:{disable:!0}},variant:{...o.variant,control:{type:"select"},options:g},dot:{...o.dot,control:{type:"boolean"}},size:{...o.size,control:{type:"select"},options:["sm","md","lg"]},customBackgroundColor:{name:"--badge-color-background",control:{type:"color"},description:"Custom background color - overrides the theme color",table:{category:"CSS Properties"}},customForegroundColor:{name:"--badge-color-foreground",control:{type:"color"},description:"Custom foreground (text) color - overrides the theme color",table:{category:"CSS Properties"}},customRadiusSize:{name:"--badge-radius-size",control:{type:"text"},description:"Custom border radius size - overrides the shape default (default: 999px)",table:{category:"CSS Properties"}},customPadX:{name:"--badge-px",control:{type:"text"},description:"Horizontal padding - overrides the size default",table:{category:"CSS Properties"}},customPadY:{name:"--badge-py",control:{type:"text"},description:"Vertical padding - overrides the size default",table:{category:"CSS Properties"}},customDotSize:{name:"--badge-dot-size",control:{type:"text"},description:"Size of the dot affordance (default: 6px)",table:{category:"CSS Properties"}}},render:e=>{const a={};return e.customBackgroundColor&&(a["--badge-color-background"]=e.customBackgroundColor),e.customForegroundColor&&(a["--badge-color-foreground"]=e.customForegroundColor),e.customRadiusSize&&(a["--badge-radius-size"]=e.customRadiusSize),e.customPadX&&(a["--badge-px"]=e.customPadX),e.customPadY&&(a["--badge-py"]=e.customPadY),e.customDotSize&&(a["--badge-dot-size"]=e.customDotSize),s`<btu-badge variant="${e.variant}" ?dot="${e.dot}" size="${e.size}" style=${c(a)}
15
15
  >Badge</btu-badge
16
16
  >`}},i={args:{}},t={args:{variant:"success",size:"lg"},render:e=>s`<a href="#" class="hover:text-primary inline-flex items-center gap-2 hover:underline">
17
17
  Hover over me to see the
@@ -118,4 +118,4 @@ Badges support advanced customization through CSS properties and content composi
118
118
  }
119
119
  }
120
120
  }
121
- }`,...r.parameters?.docs?.source}}};const b=["Default","InsideAnchor","AdvancedUsage"];export{r as AdvancedUsage,i as Default,t as InsideAnchor,b as __namedExportsOrder,u as default};
121
+ }`,...r.parameters?.docs?.source}}};const p=["Default","InsideAnchor","AdvancedUsage"];export{r as AdvancedUsage,i as Default,t as InsideAnchor,p as __namedExportsOrder,b as default};
@@ -1,4 +1,4 @@
1
- import{x as c}from"./iframe-Dz6CxatW.js";import"./preload-helper-PPVm8Dsz.js";const v=({color:r="primary",pressed:l,fill:d,contained:u,outlined:p,size:a="sm",label:b,icon:i,hideText:m,disabled:h})=>{const g=d?"":"btu-button-fill-none",y=u?"":"btu-button-container-none",f=p?"btu-button-outline":"",x=m?"btu-button-text-hidden":"";return c`
1
+ import{x as c}from"./iframe-CM6gBkqA.js";import"./preload-helper-PPVm8Dsz.js";const v=({color:r="primary",pressed:l,fill:d,contained:u,outlined:p,size:a="sm",label:b,icon:i,hideText:m,disabled:h})=>{const g=d?"":"btu-button-fill-none",y=u?"":"btu-button-container-none",f=p?"btu-button-outline":"",x=m?"btu-button-text-hidden":"";return c`
2
2
  <button
3
3
  type="button"
4
4
  class=${["btu-button",`btu-button-${r}`,`btu-button-${a}`,g,y,f,x].join(" ")}
@@ -1,4 +1,4 @@
1
- import{g as D,E as h,x as T}from"./iframe-Dz6CxatW.js";import"./preload-helper-PPVm8Dsz.js";const{events:A,args:$,argTypes:u}=D("btu-circular-progress"),k={title:"Components/Circular Progress",component:"btu-circular-progress",tags:["autodocs"],parameters:{docs:{subtitle:"A component for showing loading states or progress",description:{component:`
1
+ import{g as S,E as h,x as T}from"./iframe-CM6gBkqA.js";import{o as $}from"./style-map-BJGdSb_D.js";import"./preload-helper-PPVm8Dsz.js";const{events:V,args:A,argTypes:u}=S("btu-circular-progress"),O={title:"Components/Circular Progress",component:"btu-circular-progress",tags:["autodocs"],parameters:{docs:{subtitle:"A component for showing loading states or progress",description:{component:`
2
2
  <h3>When to use:</h3>
3
3
  <ul>
4
4
  <li>To indicate loading or processing state</li>
@@ -11,7 +11,7 @@ import{g as D,E as h,x as T}from"./iframe-Dz6CxatW.js";import"./preload-helper-P
11
11
  <li><strong>Indeterminate:</strong> Animated spinner for unknown duration (default)</li>
12
12
  <li><strong>Determinate:</strong> Shows specific progress value (0-100)</li>
13
13
  </ul>
14
- `}},actions:{handles:A},controls:{expanded:!0}},args:{...$,indeterminate:!0,color:"primary",size:"sm",thickness:2,progress:0,initialAnimation:!0},argTypes:{...u,"--progress-color":{table:{disable:!0}},"--track-color":{table:{disable:!0}},"--progress-size":{table:{disable:!0}},indeterminate:{...u.indeterminate,control:{type:"boolean"},description:"Whether the progress indicator is indeterminate (animated spinner). When false, shows determinate progress based on the progress value.",table:{category:"Attributes",defaultValue:{summary:"true"}}},color:{...u.color,control:{type:"select"},options:["black","white","primary","teal","gray","purple","rose","error","warning","success"],description:"Theme color of the progress indicator.",table:{category:"Attributes",defaultValue:{summary:"primary"}}},size:{...u.size,control:{type:"select"},options:["sm","md","lg"],description:"Size variant: sm (16px), md (32px), lg (48px)",table:{category:"Attributes",defaultValue:{summary:"sm"}}},thickness:{...u.thickness,control:{type:"number",min:1,max:10},description:"Stroke width of the progress circle.",table:{category:"Attributes",defaultValue:{summary:"2"}}},progress:{...u.progress,control:{type:"range",min:0,max:100,step:1},description:"Progress value for determinate mode. Value between 0 and 100.",table:{category:"Attributes",defaultValue:{summary:"0"}}},label:{...u.label,control:{type:"text"},description:"Optional label text to display below the progress indicator.",table:{category:"Attributes",defaultValue:{summary:"undefined"}}},initialAnimation:{...u.initialAnimation,control:{type:"boolean"},description:"Whether to animate progress from 0 to target value when component first becomes visible in viewport. Only applies to determinate mode. Defaults to true.",table:{category:"Attributes",defaultValue:{summary:"true"}}},ariaLabel:{...u.ariaLabel,control:{type:"text"},description:'Optional aria-label attribute for screen readers. Describes what the progress indicator represents (e.g., "File upload progress").',table:{category:"Attributes",defaultValue:{summary:"undefined"}}},ariaLabelledBy:{...u.ariaLabelledBy,control:{type:"text"},description:"Optional aria-labelledby attribute for screen readers. References the ID of an element that labels the progress indicator.",table:{category:"Attributes",defaultValue:{summary:"undefined"}}},ariaValueText:{...u.ariaValueText,control:{type:"text"},description:"Optional aria-valuetext attribute for screen readers. Provides human-readable text alternative for the progress value in determinate mode.",table:{category:"Attributes",defaultValue:{summary:"undefined"}}},completionAnnouncement:{...u.completionAnnouncement,control:{type:"text"},description:"Optional message to announce to screen readers when progress reaches 100%. If not provided, no announcement will be made on completion.",table:{category:"Attributes",defaultValue:{summary:"undefined"}}},customColor:{name:"--progress-color",control:{type:"color"},description:"Custom progress indicator color - overrides the theme color",table:{category:"CSS Properties"}},customTrackColor:{name:"--track-color",control:{type:"color"},description:"Custom track/background color - overrides default gray-100",table:{category:"CSS Properties"}},customSize:{name:"--progress-size",control:{type:"number",min:1,max:100},description:"Custom size in pixels - overrides the size preset",table:{category:"CSS Properties"}}},render:e=>{const t=[];e.customColor&&t.push(`--progress-color: ${e.customColor}`),e.customTrackColor&&t.push(`--track-color: ${e.customTrackColor}`),e.customSize&&t.push(`--progress-size: ${e.customSize}px`);const r=t.length>0?t.join("; "):"";return T`<btu-circular-progress
14
+ `}},actions:{handles:V},controls:{expanded:!0}},args:{...A,indeterminate:!0,color:"primary",size:"sm",thickness:2,progress:0,"initial-animation":!0},argTypes:{...u,"--progress-color":{table:{disable:!0}},"--track-color":{table:{disable:!0}},"--progress-size":{table:{disable:!0}},indeterminate:{...u.indeterminate,control:{type:"boolean"},description:"Whether the progress indicator is indeterminate (animated spinner). When false, shows determinate progress based on the progress value.",table:{category:"Attributes",defaultValue:{summary:"true"}}},color:{...u.color,control:{type:"select"},options:["black","white","primary","teal","gray","purple","rose","error","warning","success"],description:"Theme color of the progress indicator.",table:{category:"Attributes",defaultValue:{summary:"primary"}}},size:{...u.size,control:{type:"select"},options:["sm","md","lg"],description:"Size variant: sm (16px), md (32px), lg (48px)",table:{category:"Attributes",defaultValue:{summary:"sm"}}},thickness:{...u.thickness,control:{type:"number",min:1,max:10},description:"Stroke width of the progress circle.",table:{category:"Attributes",defaultValue:{summary:"2"}}},progress:{...u.progress,control:{type:"range",min:0,max:100,step:1},description:"Progress value for determinate mode. Value between 0 and 100.",table:{category:"Attributes",defaultValue:{summary:"0"}}},label:{...u.label,control:{type:"text"},description:"Optional label text to display below the progress indicator.",table:{category:"Attributes",defaultValue:{summary:"undefined"}}},"initial-animation":{...u["initial-animation"],control:{type:"boolean"},description:"Whether to animate progress from 0 to target value when component first becomes visible in viewport. Only applies to determinate mode. Defaults to true.",table:{category:"Attributes",defaultValue:{summary:"true"}}},ariaLabel:{...u.ariaLabel,control:{type:"text"},description:'Optional aria-label attribute for screen readers. Describes what the progress indicator represents (e.g., "File upload progress").',table:{category:"Attributes",defaultValue:{summary:"undefined"}}},ariaLabelledBy:{...u.ariaLabelledBy,control:{type:"text"},description:"Optional aria-labelledby attribute for screen readers. References the ID of an element that labels the progress indicator.",table:{category:"Attributes",defaultValue:{summary:"undefined"}}},ariaValueText:{...u.ariaValueText,control:{type:"text"},description:"Optional aria-valuetext attribute for screen readers. Provides human-readable text alternative for the progress value in determinate mode.",table:{category:"Attributes",defaultValue:{summary:"undefined"}}},completionAnnouncement:{...u.completionAnnouncement,control:{type:"text"},description:"Optional message to announce to screen readers when progress reaches 100%. If not provided, no announcement will be made on completion.",table:{category:"Attributes",defaultValue:{summary:"undefined"}}},customColor:{name:"--progress-color",control:{type:"color"},description:"Custom progress indicator color - overrides the theme color",table:{category:"CSS Properties"}},customTrackColor:{name:"--track-color",control:{type:"color"},description:"Custom track/background color - overrides default gray-100",table:{category:"CSS Properties"}},customSize:{name:"--progress-size",control:{type:"number",min:1,max:100},description:"Custom size in pixels - overrides the size preset",table:{category:"CSS Properties"}}},render:e=>{const t={};return e.customColor&&(t["--progress-color"]=e.customColor),e.customTrackColor&&(t["--track-color"]=e.customTrackColor),e.customSize&&(t["--progress-size"]=`${e.customSize}px`),T`<btu-circular-progress
15
15
  ?indeterminate=${e.indeterminate}
16
16
  color="${e.color}"
17
17
  size="${e.size}"
@@ -22,8 +22,8 @@ import{g as D,E as h,x as T}from"./iframe-Dz6CxatW.js";import"./preload-helper-P
22
22
  aria-labelledby="${e.ariaLabelledBy||h}"
23
23
  aria-valuetext="${e.ariaValueText||h}"
24
24
  completion-announcement="${e.completionAnnouncement||h}"
25
- ?initial-animation="${e.initialAnimation}"
26
- style="${r}"
25
+ ?initial-animation="${e["initial-animation"]}"
26
+ style=${$(t)}
27
27
  ></btu-circular-progress>`}},f={args:{},parameters:{docs:{description:{story:"Default indeterminate spinner with primary color and small size."}}}},v={render:()=>T`<div class="flex items-center gap-4">
28
28
  <btu-circular-progress .indeterminate=${!1} progress="25" size="md" label="25%"></btu-circular-progress>
29
29
  <btu-circular-progress
@@ -52,7 +52,7 @@ Animated determinate progress indicators.
52
52
 
53
53
  Left: continuous percentage increments.
54
54
 
55
- Right: step-based progress with 20% increments every 3 seconds, fractional labels, and \`aria-valuetext\` for accessibility (e.g., "3 of 5 steps completed").`}}}},y={render:()=>{let e;const t=()=>{const r=document.createElement("div"),i=document.createElement("div");i.className="flex flex-col items-center mb-4";const s=document.createElement("h3");s.className="text-lg font-semibold mb-2",s.textContent="Scroll within the container to see progress circles animate in";const n=document.createElement("button");n.textContent="Reset",n.className="px-4 py-2 bg-primary-500 text-white rounded hover:bg-primary-600",n.onclick=()=>{e.innerHTML="",e.appendChild(t())},i.appendChild(s),i.appendChild(n),r.appendChild(i);const p=document.createElement("div");p.style.height="150px",p.style.overflowY="auto",p.style.border="1px solid #e5e7eb",p.style.borderRadius="4px",p.style.padding="1rem";const l=document.createElement("div");l.className="flex flex-col items-center gap-8",l.style.minHeight="150vh";const o=document.createElement("btu-circular-progress");o.indeterminate=!1,o.progress=30,o.size="lg",o.color="primary",o.label="30%",l.appendChild(o);const d=document.createElement("div");d.className="flex flex-col items-center",d.style.marginTop="30vh";const c=document.createElement("btu-circular-progress");c.indeterminate=!1,c.progress=50,c.size="lg",c.color="teal",c.label="50%",d.appendChild(c),l.appendChild(d);const b=document.createElement("div");b.className="flex flex-col items-center",b.style.marginTop="30vh";const m=document.createElement("btu-circular-progress");m.indeterminate=!1,m.progress=75,m.size="lg",m.color="purple",m.label="75%",b.appendChild(m),l.appendChild(b);const g=document.createElement("div");g.className="flex flex-col items-center",g.style.marginTop="30vh";const a=document.createElement("btu-circular-progress");return a.indeterminate=!1,a.progress=100,a.size="lg",a.color="success",a.label="100%",g.appendChild(a),l.appendChild(g),p.appendChild(l),r.appendChild(p),r};return e=t(),e},parameters:{docs:{description:{story:'Demonstrates the viewport animation for determinate mode - progress circles animate from 0 to their target value when they become visible. Scroll within the container to see each circle animate in. Click "Reset" to restart.'}}}},C={render:()=>{const e=document.createElement("div");e.className="flex flex-col items-center gap-4";let t=0;const r=document.createElement("btu-circular-progress");r.indeterminate=!1,r.progress=0,r.size="lg",r.color="primary",r.label="0%";const i=document.createElement("div");i.className="text-sm text-gray-600",i.textContent="Status: In Progress...";const s=document.createElement("div");s.className="text-xs text-gray-500 mt-2",s.textContent="Event Log: (waiting for completion)",r.addEventListener("btu-progress-complete",()=>{i.textContent="Status: Complete! ✓",i.className="text-sm text-green-600 font-semibold",s.textContent=`Event Log: btu-progress-complete fired at ${new Date().toLocaleTimeString()}`,s.className="text-xs text-green-600 mt-2"});let n=!1;const p=setInterval(()=>{n||(t=t+1,r.progress=t,r.label=`${t}%`,t<100&&(i.textContent="Status: In Progress...",i.className="text-sm text-gray-600"),t===100&&(n=!0,setTimeout(()=>{t=0,n=!1},3e3)))},50),l=new MutationObserver(o=>{o.forEach(d=>{d.removedNodes.forEach(c=>{(c===e||c.contains(e))&&(clearInterval(p),l.disconnect())})})});return setTimeout(()=>{e.parentNode&&l.observe(e.parentNode,{childList:!0})},0),e.appendChild(r),e.appendChild(i),e.appendChild(s),e},parameters:{docs:{description:{story:"Demonstrates the btu-progress-complete event that fires when determinate progress reaches 100%. The event fires each time progress completes a cycle."}}}},E={render:()=>{const e=document.createElement("div");e.className="flex flex-col gap-8";const t=document.createElement("div");t.className="flex flex-col gap-2";const r=document.createElement("h4");r.className="text-sm font-semibold text-gray-900",r.textContent="Indeterminate with aria-label";const i=document.createElement("p");i.className="text-xs text-gray-600 mb-2",i.textContent='Screen readers announce: "Loading application data"';const s=document.createElement("btu-circular-progress");s.indeterminate=!0,s.size="md",s.color="primary",s.ariaLabel="Loading application data",t.appendChild(r),t.appendChild(i),t.appendChild(s);const n=document.createElement("div");n.className="flex flex-col gap-2";const p=document.createElement("h4");p.className="text-sm font-semibold text-gray-900",p.textContent="Determinate with custom aria-valuetext";const l=document.createElement("p");l.className="text-xs text-gray-600 mb-2",l.textContent='Screen readers announce: "File upload progress, 3 of 5 files uploaded"';const o=document.createElement("btu-circular-progress");o.indeterminate=!1,o.progress=60,o.size="md",o.color="teal",o.label="3/5",o.ariaLabel="File upload progress",o.ariaValueText="3 of 5 files uploaded",n.appendChild(p),n.appendChild(l),n.appendChild(o);const d=document.createElement("div");d.className="flex flex-col gap-2";const c=document.createElement("h4");c.className="text-sm font-semibold text-gray-900",c.textContent="With completion announcement";const b=document.createElement("p");b.className="text-xs text-gray-600 mb-2",b.textContent='Screen readers auto-announce when complete: "Download complete!"';const m=document.createElement("div");m.className="text-xs text-gray-500 mt-2",m.textContent="Announcement status: (waiting...)";let g=0;const a=document.createElement("btu-circular-progress");a.indeterminate=!1,a.progress=0,a.size="md",a.color="success",a.label="0%",a.ariaLabel="Download progress",a.completionAnnouncement="Download complete!",a.addEventListener("btu-progress-complete",()=>{m.textContent='Announcement status: "Download complete!" announced at '+new Date().toLocaleTimeString(),m.className="text-xs text-green-600 mt-2"});const w=setInterval(()=>{g<100?(g+=2,a.progress=g,a.label=`${g}%`,a.ariaValueText=`${g} percent complete`):clearInterval(w)},100);d.appendChild(c),d.appendChild(b),d.appendChild(a),d.appendChild(m);const N=new MutationObserver(S=>{S.forEach(z=>{z.removedNodes.forEach(L=>{(L===e||L.contains(e))&&(clearInterval(w),N.disconnect())})})});return setTimeout(()=>{e.parentNode&&N.observe(e.parentNode,{childList:!0})},0),e.appendChild(t),e.appendChild(n),e.appendChild(d),e},parameters:{docs:{description:{story:"\nDemonstrates accessibility best practices for screen reader users:\n\n**1. Indeterminate mode:** Set `ariaLabel` to describe what's loading.\n\n**2. Determinate mode:** Combine `ariaLabel` (what's progressing) with `ariaValueText` (human-readable progress like \"3 of 5 files uploaded\"). Set `completionAnnouncement` to automatically notify screen readers when progress reaches 100%.\n "}}}};f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
55
+ Right: step-based progress with 20% increments every 3 seconds, fractional labels, and \`aria-valuetext\` for accessibility (e.g., "3 of 5 steps completed").`}}}},y={render:()=>{let e;const t=()=>{const r=document.createElement("div"),i=document.createElement("div");i.className="flex flex-col items-center mb-4";const s=document.createElement("h3");s.className="text-lg font-semibold mb-2",s.textContent="Scroll within the container to see progress circles animate in";const n=document.createElement("button");n.textContent="Reset",n.className="px-4 py-2 bg-primary-500 text-white rounded hover:bg-primary-600",n.onclick=()=>{e.innerHTML="",e.appendChild(t())},i.appendChild(s),i.appendChild(n),r.appendChild(i);const p=document.createElement("div");p.style.height="150px",p.style.overflowY="auto",p.style.border="1px solid #e5e7eb",p.style.borderRadius="4px",p.style.padding="1rem";const l=document.createElement("div");l.className="flex flex-col items-center gap-8",l.style.minHeight="150vh";const o=document.createElement("btu-circular-progress");o.indeterminate=!1,o.progress=30,o.size="lg",o.color="primary",o.label="30%",l.appendChild(o);const d=document.createElement("div");d.className="flex flex-col items-center",d.style.marginTop="30vh";const c=document.createElement("btu-circular-progress");c.indeterminate=!1,c.progress=50,c.size="lg",c.color="teal",c.label="50%",d.appendChild(c),l.appendChild(d);const b=document.createElement("div");b.className="flex flex-col items-center",b.style.marginTop="30vh";const m=document.createElement("btu-circular-progress");m.indeterminate=!1,m.progress=75,m.size="lg",m.color="purple",m.label="75%",b.appendChild(m),l.appendChild(b);const g=document.createElement("div");g.className="flex flex-col items-center",g.style.marginTop="30vh";const a=document.createElement("btu-circular-progress");return a.indeterminate=!1,a.progress=100,a.size="lg",a.color="success",a.label="100%",g.appendChild(a),l.appendChild(g),p.appendChild(l),r.appendChild(p),r};return e=t(),e},parameters:{docs:{description:{story:'Demonstrates the viewport animation for determinate mode - progress circles animate from 0 to their target value when they become visible. Scroll within the container to see each circle animate in. Click "Reset" to restart.'}}}},C={render:()=>{const e=document.createElement("div");e.className="flex flex-col items-center gap-4";let t=0;const r=document.createElement("btu-circular-progress");r.indeterminate=!1,r.progress=0,r.size="lg",r.color="primary",r.label="0%";const i=document.createElement("div");i.className="text-sm text-gray-600",i.textContent="Status: In Progress...";const s=document.createElement("div");s.className="text-xs text-gray-500 mt-2",s.textContent="Event Log: (waiting for completion)",r.addEventListener("btu-progress-complete",()=>{i.textContent="Status: Complete! ✓",i.className="text-sm text-green-600 font-semibold",s.textContent=`Event Log: btu-progress-complete fired at ${new Date().toLocaleTimeString()}`,s.className="text-xs text-green-600 mt-2"});let n=!1;const p=setInterval(()=>{n||(t=t+1,r.progress=t,r.label=`${t}%`,t<100&&(i.textContent="Status: In Progress...",i.className="text-sm text-gray-600"),t===100&&(n=!0,setTimeout(()=>{t=0,n=!1},3e3)))},50),l=new MutationObserver(o=>{o.forEach(d=>{d.removedNodes.forEach(c=>{(c===e||c.contains(e))&&(clearInterval(p),l.disconnect())})})});return setTimeout(()=>{e.parentNode&&l.observe(e.parentNode,{childList:!0})},0),e.appendChild(r),e.appendChild(i),e.appendChild(s),e},parameters:{docs:{description:{story:"Demonstrates the btu-progress-complete event that fires when determinate progress reaches 100%. The event fires each time progress completes a cycle."}}}},E={render:()=>{const e=document.createElement("div");e.className="flex flex-col gap-8";const t=document.createElement("div");t.className="flex flex-col gap-2";const r=document.createElement("h4");r.className="text-sm font-semibold text-gray-900",r.textContent="Indeterminate with aria-label";const i=document.createElement("p");i.className="text-xs text-gray-600 mb-2",i.textContent='Screen readers announce: "Loading application data"';const s=document.createElement("btu-circular-progress");s.indeterminate=!0,s.size="md",s.color="primary",s.ariaLabel="Loading application data",t.appendChild(r),t.appendChild(i),t.appendChild(s);const n=document.createElement("div");n.className="flex flex-col gap-2";const p=document.createElement("h4");p.className="text-sm font-semibold text-gray-900",p.textContent="Determinate with custom aria-valuetext";const l=document.createElement("p");l.className="text-xs text-gray-600 mb-2",l.textContent='Screen readers announce: "File upload progress, 3 of 5 files uploaded"';const o=document.createElement("btu-circular-progress");o.indeterminate=!1,o.progress=60,o.size="md",o.color="teal",o.label="3/5",o.ariaLabel="File upload progress",o.ariaValueText="3 of 5 files uploaded",n.appendChild(p),n.appendChild(l),n.appendChild(o);const d=document.createElement("div");d.className="flex flex-col gap-2";const c=document.createElement("h4");c.className="text-sm font-semibold text-gray-900",c.textContent="With completion announcement";const b=document.createElement("p");b.className="text-xs text-gray-600 mb-2",b.textContent='Screen readers auto-announce when complete: "Download complete!"';const m=document.createElement("div");m.className="text-xs text-gray-500 mt-2",m.textContent="Announcement status: (waiting...)";let g=0;const a=document.createElement("btu-circular-progress");a.indeterminate=!1,a.progress=0,a.size="md",a.color="success",a.label="0%",a.ariaLabel="Download progress",a.completionAnnouncement="Download complete!",a.addEventListener("btu-progress-complete",()=>{m.textContent='Announcement status: "Download complete!" announced at '+new Date().toLocaleTimeString(),m.className="text-xs text-green-600 mt-2"});const w=setInterval(()=>{g<100?(g+=2,a.progress=g,a.label=`${g}%`,a.ariaValueText=`${g} percent complete`):clearInterval(w)},100);d.appendChild(c),d.appendChild(b),d.appendChild(a),d.appendChild(m);const N=new MutationObserver(z=>{z.forEach(D=>{D.removedNodes.forEach(L=>{(L===e||L.contains(e))&&(clearInterval(w),N.disconnect())})})});return setTimeout(()=>{e.parentNode&&N.observe(e.parentNode,{childList:!0})},0),e.appendChild(t),e.appendChild(n),e.appendChild(d),e},parameters:{docs:{description:{story:"\nDemonstrates accessibility best practices for screen reader users:\n\n**1. Indeterminate mode:** Set `ariaLabel` to describe what's loading.\n\n**2. Determinate mode:** Combine `ariaLabel` (what's progressing) with `ariaValueText` (human-readable progress like \"3 of 5 files uploaded\"). Set `completionAnnouncement` to automatically notify screen readers when progress reaches 100%.\n "}}}};f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
56
56
  args: {},
57
57
  parameters: {
58
58
  docs: {
@@ -448,4 +448,4 @@ Demonstrates accessibility best practices for screen reader users:
448
448
  }
449
449
  }
450
450
  }
451
- }`,...E.parameters?.docs?.source}}};const P=["Default","DeterminateProgress","AnimatedProgress","InitialAnimation","CompletionEvent","Accessibility"];export{E as Accessibility,x as AnimatedProgress,C as CompletionEvent,f as Default,v as DeterminateProgress,y as InitialAnimation,P as __namedExportsOrder,k as default};
451
+ }`,...E.parameters?.docs?.source}}};const W=["Default","DeterminateProgress","AnimatedProgress","InitialAnimation","CompletionEvent","Accessibility"];export{E as Accessibility,x as AnimatedProgress,C as CompletionEvent,f as Default,v as DeterminateProgress,y as InitialAnimation,W as __namedExportsOrder,O as default};
@@ -1,4 +1,4 @@
1
- import{x as m,i as b}from"./iframe-Dz6CxatW.js";import{t as u}from"./custom-element-UsVr97OX.js";import{C as h}from"./ComponentStatesMixin-Cu7YXkU8.js";import{E as x,R as y}from"./ReadyMixin-3YCzoG6W.js";import"./preload-helper-PPVm8Dsz.js";function n(e,i){let r=document.getElementById("aria-live-container");r||(r=document.createElement("div"),r.setAttribute("id","aria-live-container"),document.body.appendChild(r));const t=document.createElement("div"),o="speak-"+Date.now();t.setAttribute("id",o),t.setAttribute("aria-atomic","true"),t.setAttribute("aria-live","polite"),t.style.cssText="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;",r.appendChild(t),setTimeout(()=>{const d=document.getElementById(o);d&&(d.innerHTML=e)},150),window.BRIGHTSPOT?.ariaDebug===!0&&console.log(`ARIA Announced: "${e}"`),setTimeout(()=>{document.getElementById(o)?.remove()},2e3)}const g=e=>{class i extends e{async copy(t,o=3e3){if(t&&!this.states.has("btu-clipboard-copied")){try{if(!navigator.clipboard||typeof navigator.clipboard.writeText!="function")throw new Error("Clipboard API is not available in this environment.");await navigator.clipboard.writeText(t)}catch(d){console.error("Failed to copy text to clipboard:",d),n("Copy failed");return}this.states.add("btu-clipboard-copied"),this.requestUpdate(),this.emit("btu-clipboard-copied"),n("Copied!"),setTimeout(()=>{this.states.delete("btu-clipboard-copied"),this.requestUpdate()},o)}}}return i};var c=Object.freeze,f=Object.defineProperty,v=Object.getOwnPropertyDescriptor,C=(e,i,r,t)=>{for(var o=t>1?void 0:t?v(i,r):i,d=e.length-1,s;d>=0;d--)(s=e[d])&&(o=s(o)||o);return o},E=(e,i)=>c(f(e,"raw",{value:c(e.slice())})),l;const I={title:"Mixins/Clipboard",tags:["autodocs"],parameters:{docs:{description:{component:`
1
+ import{x as m,i as b}from"./iframe-CM6gBkqA.js";import{t as u}from"./custom-element-UsVr97OX.js";import{C as h}from"./ComponentStatesMixin-BIu5SKeV.js";import{E as x,R as y}from"./ReadyMixin-qf8SAjMu.js";import"./preload-helper-PPVm8Dsz.js";function n(e,i){let r=document.getElementById("aria-live-container");r||(r=document.createElement("div"),r.setAttribute("id","aria-live-container"),document.body.appendChild(r));const t=document.createElement("div"),o="speak-"+Date.now();t.setAttribute("id",o),t.setAttribute("aria-atomic","true"),t.setAttribute("aria-live","polite"),t.style.cssText="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;",r.appendChild(t),setTimeout(()=>{const d=document.getElementById(o);d&&(d.innerHTML=e)},150),window.BRIGHTSPOT?.ariaDebug===!0&&console.log(`ARIA Announced: "${e}"`),setTimeout(()=>{document.getElementById(o)?.remove()},2e3)}const g=e=>{class i extends e{async copy(t,o=3e3){if(t&&!this.states.has("btu-clipboard-copied")){try{if(!navigator.clipboard||typeof navigator.clipboard.writeText!="function")throw new Error("Clipboard API is not available in this environment.");await navigator.clipboard.writeText(t)}catch(d){console.error("Failed to copy text to clipboard:",d),n("Copy failed");return}this.states.add("btu-clipboard-copied"),this.requestUpdate(),this.emit("btu-clipboard-copied"),n("Copied!"),setTimeout(()=>{this.states.delete("btu-clipboard-copied"),this.requestUpdate()},o)}}}return i};var c=Object.freeze,f=Object.defineProperty,v=Object.getOwnPropertyDescriptor,C=(e,i,r,t)=>{for(var o=t>1?void 0:t?v(i,r):i,d=e.length-1,s;d>=0;d--)(s=e[d])&&(o=s(o)||o);return o},E=(e,i)=>c(f(e,"raw",{value:c(e.slice())})),l;const I={title:"Mixins/Clipboard",tags:["autodocs"],parameters:{docs:{description:{component:`
2
2
  \`ClipboardMixin\` adds clipboard copy functionality via a <code>copy()</code> method that writes text to the system clipboard.
3
3
 
4
4
  It adds a temporary state and emits an event, which web components can use for visual feedback.