@brightspot/ui 1.6.0 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (82) hide show
  1. package/dist/components/dropdown/Dropdown.d.ts +172 -0
  2. package/dist/components/dropdown/Dropdown.d.ts.map +1 -0
  3. package/dist/components/dropdown/Dropdown.js +407 -0
  4. package/dist/components/dropdown/Dropdown.js.map +1 -0
  5. package/dist/components/dropdown/DropdownItem.d.ts +108 -0
  6. package/dist/components/dropdown/DropdownItem.d.ts.map +1 -0
  7. package/dist/components/dropdown/DropdownItem.js +210 -0
  8. package/dist/components/dropdown/DropdownItem.js.map +1 -0
  9. package/dist/components/dropdown/DropdownMenu.d.ts +117 -0
  10. package/dist/components/dropdown/DropdownMenu.d.ts.map +1 -0
  11. package/dist/components/dropdown/DropdownMenu.js +295 -0
  12. package/dist/components/dropdown/DropdownMenu.js.map +1 -0
  13. package/dist/custom-elements.json +1097 -101
  14. package/dist/storybook/assets/Avatar.stories-BAaSlDF7.js +213 -0
  15. package/dist/storybook/assets/{AvatarGroup.stories-BBkQuFKk.js → AvatarGroup.stories-CgoDB4N4.js} +1 -1
  16. package/dist/storybook/assets/{Badge.stories-mFZsls7i.js → Badge.stories-uexxdmo6.js} +3 -3
  17. package/dist/storybook/assets/{Button.stories-CAWX17L1.js → Button.stories-T9UJUPHI.js} +1 -1
  18. package/dist/storybook/assets/{CircularProgress.stories-DBVt4Cg2.js → CircularProgress.stories-DW-VJA5j.js} +6 -6
  19. package/dist/storybook/assets/{ClipboardMixin.stories-BH9E-OI6.js → ClipboardMixin.stories-DzU4vxu5.js} +1 -1
  20. package/dist/storybook/assets/{Color-6BZIO3FS-CVnTzq2p.js → Color-6BZIO3FS-DRk2xjoN.js} +1 -1
  21. package/dist/storybook/assets/{Colors.stories-BFYmP0LL.js → Colors.stories-_UPdvuhY.js} +1 -1
  22. package/dist/storybook/assets/{ComponentStatesMixin-Cu7YXkU8.js → ComponentStatesMixin-BIu5SKeV.js} +1 -1
  23. package/dist/storybook/assets/{ComponentStatesMixin.stories-CAvyYt0H.js → ComponentStatesMixin.stories-C0FLaqLu.js} +1 -1
  24. package/dist/storybook/assets/{CopyToClipboard.stories-DbJZsp_L.js → CopyToClipboard.stories-D31zoUVI.js} +1 -1
  25. package/dist/storybook/assets/{Debounce.stories-BiFiH1K9.js → Debounce.stories-CgPPl5Ee.js} +1 -1
  26. package/dist/storybook/assets/{DocsRenderer-LL677BLK-Bq6G4eeC.js → DocsRenderer-LL677BLK-iwiwOzX9.js} +6 -6
  27. package/dist/storybook/assets/Dropdown.stories-CDcl6rmG.js +697 -0
  28. package/dist/storybook/assets/{Events.stories-BsDBxh8_.js → Events.stories-DS6UC9dZ.js} +1 -1
  29. package/dist/storybook/assets/{Heading.stories-zGzWgHVO.js → Heading.stories-CAQfEGE2.js} +1 -1
  30. package/dist/storybook/assets/{Icon.stories-B4T6sSwf.js → Icon.stories-C7msWlHs.js} +11 -11
  31. package/dist/storybook/assets/{LinearProgress.stories-qzqmUUwY.js → LinearProgress.stories-DBGJ5a2-.js} +7 -7
  32. package/dist/storybook/assets/{Pagination.stories-B6Q-7taJ.js → Pagination.stories-C58bGOdf.js} +1 -1
  33. package/dist/storybook/assets/{Popover.stories-CGkU0SGv.js → Popover.stories-C9zU0sEX.js} +5 -5
  34. package/dist/storybook/assets/{ReadyMixin-3YCzoG6W.js → ReadyMixin-qf8SAjMu.js} +1 -1
  35. package/dist/storybook/assets/{Rtc.stories-Y1MYTWAt.js → Rtc.stories-k9tKHNhD.js} +1 -1
  36. package/dist/storybook/assets/{ScrollShadow.stories-B9kSpLT1.js → ScrollShadow.stories-Bp42zyLH.js} +1 -1
  37. package/dist/storybook/assets/{Throttle.stories-BgvLDrS3.js → Throttle.stories-B5YU-Nms.js} +1 -1
  38. package/dist/storybook/assets/Tooltip.stories-COQcvOnL.js +143 -0
  39. package/dist/storybook/assets/{Widget.stories--JpqVyJe.js → Widget.stories-D3Sq5-_A.js} +13 -13
  40. package/dist/storybook/assets/{WithTooltip-65CFNBJE-DNbD9hAX.js → WithTooltip-65CFNBJE-Cox81aM_.js} +1 -1
  41. package/dist/storybook/assets/{formatter-EIJCOSYU-Cy8KIxab.js → formatter-EIJCOSYU-3ErcoV9q.js} +1 -1
  42. package/dist/storybook/assets/if-defined-Bv2_qPJg.js +1 -0
  43. package/dist/storybook/assets/{iframe-Dz6CxatW.js → iframe-CM6gBkqA.js} +152 -152
  44. package/dist/storybook/assets/{iframe-DiT9Iz2T.css → iframe-D3r2Ciu8.css} +1 -1
  45. package/dist/storybook/assets/{index-CebChkmF.js → index-iwfnMgqg.js} +1 -1
  46. package/dist/storybook/assets/{onFind.stories-nHDImx0x.js → onFind.stories-CDtoTN6S.js} +1 -1
  47. package/dist/storybook/assets/{onRemove.stories-CBxYVPwd.js → onRemove.stories-CSTeFCLU.js} +1 -1
  48. package/dist/storybook/assets/{onVisible.stories-D4Qewc9Y.js → onVisible.stories-C-yiw9n4.js} +1 -1
  49. package/dist/storybook/assets/{style-map-BgW9piaW.js → style-map-BJGdSb_D.js} +1 -1
  50. package/dist/storybook/assets/{syntaxhighlighter-ED5Y7EFY-CROW1475.js → syntaxhighlighter-ED5Y7EFY-BEudYlVi.js} +1 -1
  51. package/dist/storybook/iframe.html +2 -2
  52. package/dist/storybook/index.json +1 -1
  53. package/dist/storybook/project.json +1 -1
  54. package/dist/tailwind-plugin-button.js +10 -0
  55. package/dist/tailwind-plugin-button.js.map +1 -1
  56. package/dist/tailwind-plugin-button.ts +10 -0
  57. package/dist/tailwind-plugin-dropdown.d.ts +2 -0
  58. package/dist/tailwind-plugin-dropdown.d.ts.map +1 -0
  59. package/dist/tailwind-plugin-dropdown.js +223 -0
  60. package/dist/tailwind-plugin-dropdown.js.map +1 -0
  61. package/dist/tailwind-plugin-dropdown.ts +249 -0
  62. package/dist/util/EventEmitterMixin.d.ts +13 -0
  63. package/dist/util/EventEmitterMixin.d.ts.map +1 -1
  64. package/dist/util/EventEmitterMixin.js.map +1 -1
  65. package/docs/components/Avatar.md +62 -0
  66. package/docs/components/AvatarGroup.md +52 -0
  67. package/docs/components/Badge.md +58 -0
  68. package/docs/components/CircularProgress.md +55 -0
  69. package/docs/components/CopyToClipboard.md +54 -0
  70. package/docs/components/Dropdown.md +100 -0
  71. package/docs/components/DropdownItem.md +64 -0
  72. package/docs/components/DropdownMenu.md +81 -0
  73. package/docs/components/Icon.md +61 -0
  74. package/docs/components/LinearProgress.md +40 -0
  75. package/docs/components/Pagination.md +95 -0
  76. package/docs/components/Popover.md +71 -0
  77. package/docs/components/README.md +24 -0
  78. package/docs/components/Widget.md +79 -0
  79. package/package.json +3 -2
  80. package/dist/storybook/assets/Avatar.stories-CafEcy4T.js +0 -214
  81. package/dist/storybook/assets/Tooltip.stories-POo1M-ew.js +0 -143
  82. package/dist/storybook/assets/if-defined-CngSGyRu.js +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspot/ui",
3
- "version": "1.6.0",
3
+ "version": "1.7.0",
4
4
  "type": "module",
5
5
  "license": "UNLICENSED",
6
6
  "description": "A UI library for building Brightspot CMS components.",
@@ -86,7 +86,8 @@
86
86
  "dist/components/**/*.js"
87
87
  ],
88
88
  "files": [
89
- "dist/**/*"
89
+ "dist/**/*",
90
+ "docs/**/*"
90
91
  ],
91
92
  "lint-staged": {
92
93
  "src/components/**/*.ts": [
@@ -1,214 +0,0 @@
1
- import{g as c,x as n}from"./iframe-Dz6CxatW.js";import"./preload-helper-PPVm8Dsz.js";const{events:p,args:g,argTypes:r}=c("btu-avatar"),v=["xs","sm","md","lg","xl","xxl"],e="data:image/jpeg;base64,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",b={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:{...r,"--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:{...r.src,control:{type:"text"},description:"Image source URL"},alt:{...r.alt,control:{type:"text"},description:"Alt text for the image"},fallback:{...r.fallback,control:{type:"text"},description:"Fallback text (typically initials)"},size:{...r.size,control:{type:"select"},options:v},tooltip:{...r.tooltip,control:{type:"text"},description:"Tooltip text shown on hover (via TooltipMixin)",table:{category:"Tooltip"}},"tooltip-position":{...r["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 a=[];t.customSize&&a.push(`--avatar-size: ${t.customSize}`),t.customBgColor&&a.push(`--avatar-bg-color: ${t.customBgColor}`),t.customCornerRounding&&a.push(`--avatar-corner-rounding: ${t.customCornerRounding}`),t.customRingColor&&a.push(`--avatar-ring-color: ${t.customRingColor}`),t.customRingWidth&&a.push(`--avatar-ring-width: ${t.customRingWidth}`);const A=a.length>0?a.join("; "):"";return n`<div style="${A}">
23
- <btu-avatar
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>
31
- </div>`}},o={args:{}},s={render:()=>n`<div class="flex flex-row items-center gap-4">
32
- <btu-avatar src=${e} alt="dg" fallback="DG" size="xs" tooltip="Extra Small"></btu-avatar>
33
- <btu-avatar src=${e} alt="dg" fallback="DG" size="sm" tooltip="Small"></btu-avatar>
34
- <btu-avatar src=${e} alt="dg" fallback="DG" size="md" tooltip="Medium"></btu-avatar>
35
- <btu-avatar src=${e} alt="dg" fallback="DG" size="lg" tooltip="Large"></btu-avatar>
36
- <btu-avatar src=${e} alt="dg" fallback="DG" size="xl" tooltip="Extra Large"></btu-avatar>
37
- <btu-avatar src=${e} alt="dg" fallback="DG" size="xxl" tooltip="Extra Extra Large"></btu-avatar>
38
- </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">
39
- <div class="flex flex-col items-center gap-2">
40
- <btu-avatar src="" alt="No Image" fallback="NI" size="lg" tooltip="No Image"></btu-avatar>
41
- <span class="text-xs text-gray-600 dark:text-gray-400">No image</span>
42
- </div>
43
- <div class="flex flex-col items-center gap-2">
44
- <btu-avatar
45
- src="https://invalid-url-that-will-fail.example.com/image.jpg"
46
- alt="Failed load"
47
- fallback="FL"
48
- size="lg"
49
- tooltip="Failed Load"
50
- ></btu-avatar>
51
- <span class="text-xs text-gray-600 dark:text-gray-400">Image failed to load</span>
52
- </div>
53
- </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(`
54
- <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
55
- <defs>
56
- <linearGradient id="starGrad" x1="0%" y1="0%" x2="100%" y2="100%">
57
- <stop offset="0%" style="stop-color:rgb(234,179,8);stop-opacity:1" />
58
- <stop offset="100%" style="stop-color:rgb(249,115,22);stop-opacity:1" />
59
- </linearGradient>
60
- </defs>
61
- <!-- Star shape with gradient fill, transparent background -->
62
- <polygon
63
- points="50,15 61,40 88,40 67,56 73,82 50,67 27,82 33,56 12,40 39,40"
64
- fill="url(#starGrad)"
65
- stroke="rgb(251,191,36)"
66
- stroke-width="2"
67
- />
68
- </svg>
69
- `)}`;return n`<div class="flex flex-col gap-4">
70
- <div class="flex items-center gap-2">
71
- <strong>Transparent Image:</strong>
72
- <btu-avatar src=${t} alt="Transparent" fallback="YO" size="lg"></btu-avatar>
73
- </div>
74
- <div class="story-custom-colors flex items-center gap-2">
75
- <strong>Custom Colors:</strong>
76
- <btu-avatar fallback="🫠" size="lg" style="--avatar-bg-color: oklch(70% 0.3 var(--hue))"></btu-avatar>
77
- </div>
78
- <div class="story-custom-colors flex items-center gap-2">
79
- <strong>Custom Shape:</strong>
80
- <btu-avatar fallback="🙃" size="lg" style="--avatar-corner-rounding: 0.5rem"></btu-avatar>
81
- </div>
82
- <div class="flex items-center gap-2">
83
- <strong>With Ring:</strong>
84
- <btu-avatar
85
- src=${e}
86
- alt="dg"
87
- fallback="DG"
88
- size="lg"
89
- style="--avatar-ring-color: oklch(var(--btu-theme-primary-500)); --avatar-ring-width: 3px"
90
- ></btu-avatar>
91
- <btu-avatar
92
- fallback="DG"
93
- size="lg"
94
- style="--avatar-ring-color: oklch(var(--btu-theme-success-500)); --avatar-ring-width: 3px"
95
- ></btu-avatar>
96
- </div>
97
- </div>`},parameters:{docs:{description:{story:`
98
- Avatars support advanced customization through CSS properties and content composition:
99
-
100
- **Transparent Images:** When an avatar image has transparent areas, the fallback initials are automatically hidden once the image loads.
101
-
102
- **Custom Color:** Override the fallback background color using the \`--avatar-bg-color\` CSS property.
103
-
104
- **Custom Shape:** Overrides the fallback circular shape (making it a rounded square) using the \`--avatar-corner-rounding\` CSS property.
105
-
106
- **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:`{
107
- args: {}
108
- }`,...o.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
109
- render: () => html\`<div class="flex flex-row items-center gap-4">
110
- <btu-avatar src=\${DGDATA} alt="dg" fallback="DG" size="xs" tooltip="Extra Small"></btu-avatar>
111
- <btu-avatar src=\${DGDATA} alt="dg" fallback="DG" size="sm" tooltip="Small"></btu-avatar>
112
- <btu-avatar src=\${DGDATA} alt="dg" fallback="DG" size="md" tooltip="Medium"></btu-avatar>
113
- <btu-avatar src=\${DGDATA} alt="dg" fallback="DG" size="lg" tooltip="Large"></btu-avatar>
114
- <btu-avatar src=\${DGDATA} alt="dg" fallback="DG" size="xl" tooltip="Extra Large"></btu-avatar>
115
- <btu-avatar src=\${DGDATA} alt="dg" fallback="DG" size="xxl" tooltip="Extra Extra Large"></btu-avatar>
116
- </div>\`,
117
- parameters: {
118
- docs: {
119
- description: {
120
- story: 'Avatar supports six size variants: xs (1.5rem), sm (2.25rem), md (2.5rem), lg (3rem), xl (3.5rem), and xxl (4rem).'
121
- }
122
- }
123
- }
124
- }`,...s.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
125
- render: () => html\`<div class="flex flex-row items-center gap-4">
126
- <div class="flex flex-col items-center gap-2">
127
- <btu-avatar src="" alt="No Image" fallback="NI" size="lg" tooltip="No Image"></btu-avatar>
128
- <span class="text-xs text-gray-600 dark:text-gray-400">No image</span>
129
- </div>
130
- <div class="flex flex-col items-center gap-2">
131
- <btu-avatar
132
- src="https://invalid-url-that-will-fail.example.com/image.jpg"
133
- alt="Failed load"
134
- fallback="FL"
135
- size="lg"
136
- tooltip="Failed Load"
137
- ></btu-avatar>
138
- <span class="text-xs text-gray-600 dark:text-gray-400">Image failed to load</span>
139
- </div>
140
- </div>\`,
141
- parameters: {
142
- docs: {
143
- description: {
144
- 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.'
145
- }
146
- }
147
- }
148
- }`,...i.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
149
- render: () => {
150
- // SVG star shape with transparent background - demonstrates that fallback doesn't show through
151
- const transparentAvatarSvg = \`data:image/svg+xml;base64,\${btoa(\`
152
- <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
153
- <defs>
154
- <linearGradient id="starGrad" x1="0%" y1="0%" x2="100%" y2="100%">
155
- <stop offset="0%" style="stop-color:rgb(234,179,8);stop-opacity:1" />
156
- <stop offset="100%" style="stop-color:rgb(249,115,22);stop-opacity:1" />
157
- </linearGradient>
158
- </defs>
159
- <!-- Star shape with gradient fill, transparent background -->
160
- <polygon
161
- points="50,15 61,40 88,40 67,56 73,82 50,67 27,82 33,56 12,40 39,40"
162
- fill="url(#starGrad)"
163
- stroke="rgb(251,191,36)"
164
- stroke-width="2"
165
- />
166
- </svg>
167
- \`)}\`;
168
- return html\`<div class="flex flex-col gap-4">
169
- <div class="flex items-center gap-2">
170
- <strong>Transparent Image:</strong>
171
- <btu-avatar src=\${transparentAvatarSvg} alt="Transparent" fallback="YO" size="lg"></btu-avatar>
172
- </div>
173
- <div class="story-custom-colors flex items-center gap-2">
174
- <strong>Custom Colors:</strong>
175
- <btu-avatar fallback="🫠" size="lg" style="--avatar-bg-color: oklch(70% 0.3 var(--hue))"></btu-avatar>
176
- </div>
177
- <div class="story-custom-colors flex items-center gap-2">
178
- <strong>Custom Shape:</strong>
179
- <btu-avatar fallback="🙃" size="lg" style="--avatar-corner-rounding: 0.5rem"></btu-avatar>
180
- </div>
181
- <div class="flex items-center gap-2">
182
- <strong>With Ring:</strong>
183
- <btu-avatar
184
- src=\${DGDATA}
185
- alt="dg"
186
- fallback="DG"
187
- size="lg"
188
- style="--avatar-ring-color: oklch(var(--btu-theme-primary-500)); --avatar-ring-width: 3px"
189
- ></btu-avatar>
190
- <btu-avatar
191
- fallback="DG"
192
- size="lg"
193
- style="--avatar-ring-color: oklch(var(--btu-theme-success-500)); --avatar-ring-width: 3px"
194
- ></btu-avatar>
195
- </div>
196
- </div>\`;
197
- },
198
- parameters: {
199
- docs: {
200
- description: {
201
- story: \`
202
- Avatars support advanced customization through CSS properties and content composition:
203
-
204
- **Transparent Images:** When an avatar image has transparent areas, the fallback initials are automatically hidden once the image loads.
205
-
206
- **Custom Color:** Override the fallback background color using the \\\`--avatar-bg-color\\\` CSS property.
207
-
208
- **Custom Shape:** Overrides the fallback circular shape (making it a rounded square) using the \\\`--avatar-corner-rounding\\\` CSS property.
209
-
210
- **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.\`
211
- }
212
- }
213
- }
214
- }`,...l.parameters?.docs?.source}}};const u=["Default","Sizes","FallbackStates","AdvancedUsage"];export{l as AdvancedUsage,o as Default,i as FallbackStates,s as Sizes,u as __namedExportsOrder,b as default};
@@ -1,143 +0,0 @@
1
- import{f as v,u as x,x as c,i as w}from"./iframe-Dz6CxatW.js";import{t as E}from"./custom-element-UsVr97OX.js";import{o as T}from"./if-defined-CngSGyRu.js";import{E as k,R as C}from"./ReadyMixin-3YCzoG6W.js";import"./preload-helper-PPVm8Dsz.js";const S={attribute:!0,type:String,converter:x,reflect:!1,hasChanged:v},L=(o=S,i,s)=>{const{kind:t,metadata:e}=s;let l=globalThis.litPropertyMetadata.get(e);if(l===void 0&&globalThis.litPropertyMetadata.set(e,l=new Map),t==="setter"&&((o=Object.create(o)).wrapped=!0),l.set(s.name,o),t==="accessor"){const{name:r}=s;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}=s;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,s)=>typeof s=="object"?L(o,i,s):((t,e,l)=>{const r=e.hasOwnProperty(l);return e.constructor.createProperty(l,t),r?Object.getOwnPropertyDescriptor(e,l):void 0})(o,i,s)}var D=Object.defineProperty,a=(o,i,s,t)=>{for(var e=void 0,l=o.length-1,r;l>=0;l--)(r=o[l])&&(e=r(i,s,e)||e);return e&&D(i,s,e),e};const A={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"},M=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",A[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",this.dispatchEvent(new CustomEvent(this._isVisible?"btu-tooltip-show":"btu-tooltip-hide",{bubbles:!0,composed:!0}))}_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(l=>l!==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 O=Object.defineProperty,P=Object.getOwnPropertyDescriptor,y=(o,i,s,t)=>{for(var e=t>1?void 0:t?P(i,s):i,l=o.length-1,r;l>=0;l--)(r=o[l])&&(e=(t?r(i,s,e):r(e))||e);return t&&e&&O(i,s,e),e};let b=class extends M(k(C(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
- .tooltip-demo {
3
- display: inline-flex;
4
- align-items: center;
5
- justify-content: center;
6
- padding: 0.5rem 1rem;
7
- border-radius: 0.375rem;
8
- background-color: oklch(var(--btu-theme-gray-100));
9
- color: oklch(var(--btu-theme-gray-700));
10
- font-weight: 500;
11
- font-size: 0.875rem;
12
- cursor: default;
13
- user-select: none;
14
- }
15
- `,F={title:"Mixins/Tooltip",tags:["autodocs"],parameters:{docs:{subtitle:"Declarative tooltip support for any LitElement component",description:{component:`
16
- \`TooltipMixin\` adds declarative tooltip support to any LitElement component using CSS anchor positioning and the Popover API.
17
-
18
- <h3>Opt-in Pattern</h3>
19
-
20
- \`\`\`typescript
21
- class MyComponent extends TooltipMixin(EventEmitterMixin(ReadyMixin(LitElement))) {
22
- // Component now supports tooltip attributes
23
- }
24
- \`\`\`
25
-
26
- \`\`\`html
27
- <my-component tooltip="Hello!" tooltip-position="bottom"></my-component>
28
- \`\`\`
29
-
30
- <h3>Accessibility</h3>
31
- <ul>
32
- <li><code>role="tooltip"</code> on tooltip element</li>
33
- <li><code>aria-describedby</code> on host links to tooltip (appends to existing value)</li>
34
- <li>Shows on <code>focusin</code>, hides on <code>focusout</code> and <code>Escape</code></li>
35
- <li><code>prefers-reduced-motion: reduce</code> disables slide animation</li>
36
- </ul>
37
- `}},controls:{expanded:!0}},args:{tooltip:"This is a tooltip","tooltip-position":"top","tooltip-delay":300,"tooltip-no-arrow":!1,"tooltip-trigger":"hover focus",label:"Hover me"},argTypes:{tooltip:{control:{type:"text"},description:"Tooltip text. No tooltip rendered when empty.",table:{category:"Attributes"}},"tooltip-position":{control:{type:"select"},options:["top","bottom","left","right"],description:"Preferred placement (auto-flips if viewport constrained)",table:{category:"Attributes"}},"tooltip-delay":{control:{type:"number"},description:"Delay before showing tooltip on hover (ms)",table:{category:"Attributes"}},"tooltip-offset":{control:{type:"select"},options:["sm","md","lg","xl"],description:"Gap between trigger and tooltip (sm=4px, md=8px, lg=12px, xl=16px)",table:{category:"Attributes"}},"tooltip-no-arrow":{control:{type:"boolean"},description:"Hide the arrow pseudo-element",table:{category:"Attributes"}},"tooltip-trigger":{control:{type:"select"},options:["hover focus","hover","focus","click","hover click"],description:"How the tooltip is activated (combinable triggers)",table:{category:"Attributes"}},label:{control:{type:"text"},description:"Demo button label text",table:{category:"Demo"}},customBg:{name:"--tooltip-color-background",control:{type:"color"},description:"Background color",table:{category:"CSS Custom Properties",defaultValue:{summary:"white"}}},customTextColor:{name:"--tooltip-color-text",control:{type:"color"},description:"Text color",table:{category:"CSS Custom Properties",defaultValue:{summary:"oklch(var(--btu-theme-gray-900))"}}},customRadius:{name:"--tooltip-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)"},description:"Border radius",table:{category:"CSS Custom Properties",defaultValue:{summary:"0.5rem (lg)"}}}},render:o=>{const i=[];o.customBg&&i.push(`--tooltip-color-background: ${o.customBg}`),o.customTextColor&&i.push(`--tooltip-color-text: ${o.customTextColor}`),o.customRadius&&i.push(`--tooltip-border-radius: ${o.customRadius}`);const s=i.length>0?i.join("; "):"";return c`
38
- <style>
39
- ${f}
40
- </style>
41
- <div style="display: flex; justify-content: center; padding: 6rem 2rem;">
42
- <div style="${s}">
43
- <tooltip-demo
44
- tooltip="${o.tooltip}"
45
- tooltip-position="${o["tooltip-position"]}"
46
- tooltip-delay="${o["tooltip-delay"]}"
47
- tooltip-offset="${T(o["tooltip-offset"])}"
48
- ?tooltip-no-arrow="${o["tooltip-no-arrow"]}"
49
- tooltip-trigger="${o["tooltip-trigger"]}"
50
- label="${o.label}"
51
- ></tooltip-demo>
52
- </div>
53
- </div>
54
- `}},d={args:{}},h={render:()=>c`
55
- <style>
56
- ${f}
57
- </style>
58
- <div style="display: flex; gap: 2rem; justify-content: center; padding: 6rem 2rem; flex-wrap: wrap;">
59
- <tooltip-demo tooltip="Top tooltip" tooltip-position="top" label="Top"></tooltip-demo>
60
- <tooltip-demo tooltip="Bottom tooltip" tooltip-position="bottom" label="Bottom"></tooltip-demo>
61
- <tooltip-demo tooltip="Left tooltip" tooltip-position="left" label="Left"></tooltip-demo>
62
- <tooltip-demo tooltip="Right tooltip" tooltip-position="right" label="Right"></tooltip-demo>
63
- </div>
64
- `,parameters:{docs:{description:{story:"Tooltips support four positions: `top`, `bottom`, `left`, and `right`. Each position auto-flips to the opposite side if constrained by the viewport."},story:{inline:!1,iframeHeight:300}}}},m={render:()=>c`
65
- <style>
66
- ${f}
67
- </style>
68
- <div style="display: flex; gap: 2rem; justify-content: center; padding: 4rem 2rem; flex-wrap: wrap;">
69
- <tooltip-demo tooltip="Small offset (4px)" tooltip-offset="sm" label="sm"></tooltip-demo>
70
- <tooltip-demo tooltip="Medium offset (8px)" tooltip-offset="md" label="md"></tooltip-demo>
71
- <tooltip-demo tooltip="Large offset (12px)" tooltip-offset="lg" label="lg"></tooltip-demo>
72
- <tooltip-demo tooltip="Extra large offset (16px)" tooltip-offset="xl" label="xl"></tooltip-demo>
73
- </div>
74
- `,parameters:{docs:{description:{story:"The `tooltip-offset` attribute controls the gap between trigger and tooltip using named sizes: `sm` (4px), `md` (8px), `lg` (12px), `xl` (16px)."}}}},u={render:()=>c`
75
- <style>
76
- ${f}
77
- </style>
78
- <div style="display: flex; gap: 2rem; justify-content: center; padding: 4rem 2rem; flex-wrap: wrap;">
79
- <tooltip-demo tooltip="Click-triggered tooltip" tooltip-trigger="click" label="Click me"></tooltip-demo>
80
- <tooltip-demo tooltip="Hover or click" tooltip-trigger="hover click" label="Hover or click"></tooltip-demo>
81
- </div>
82
- `,parameters:{docs:{description:{story:"The `tooltip-trigger` attribute controls how the tooltip is activated. `click` toggles on click and dismisses on Escape. Triggers can be combined with spaces."}}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
83
- args: {}
84
- }`,...d.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
85
- render: () => html\`
86
- <style>
87
- \${demoStyle}
88
- </style>
89
- <div style="display: flex; gap: 2rem; justify-content: center; padding: 6rem 2rem; flex-wrap: wrap;">
90
- <tooltip-demo tooltip="Top tooltip" tooltip-position="top" label="Top"></tooltip-demo>
91
- <tooltip-demo tooltip="Bottom tooltip" tooltip-position="bottom" label="Bottom"></tooltip-demo>
92
- <tooltip-demo tooltip="Left tooltip" tooltip-position="left" label="Left"></tooltip-demo>
93
- <tooltip-demo tooltip="Right tooltip" tooltip-position="right" label="Right"></tooltip-demo>
94
- </div>
95
- \`,
96
- parameters: {
97
- docs: {
98
- description: {
99
- story: 'Tooltips support four positions: \`top\`, \`bottom\`, \`left\`, and \`right\`. Each position auto-flips to the opposite side if constrained by the viewport.'
100
- },
101
- story: {
102
- inline: false,
103
- iframeHeight: 300
104
- }
105
- }
106
- }
107
- }`,...h.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
108
- render: () => html\`
109
- <style>
110
- \${demoStyle}
111
- </style>
112
- <div style="display: flex; gap: 2rem; justify-content: center; padding: 4rem 2rem; flex-wrap: wrap;">
113
- <tooltip-demo tooltip="Small offset (4px)" tooltip-offset="sm" label="sm"></tooltip-demo>
114
- <tooltip-demo tooltip="Medium offset (8px)" tooltip-offset="md" label="md"></tooltip-demo>
115
- <tooltip-demo tooltip="Large offset (12px)" tooltip-offset="lg" label="lg"></tooltip-demo>
116
- <tooltip-demo tooltip="Extra large offset (16px)" tooltip-offset="xl" label="xl"></tooltip-demo>
117
- </div>
118
- \`,
119
- parameters: {
120
- docs: {
121
- description: {
122
- story: 'The \`tooltip-offset\` attribute controls the gap between trigger and tooltip using named sizes: \`sm\` (4px), \`md\` (8px), \`lg\` (12px), \`xl\` (16px).'
123
- }
124
- }
125
- }
126
- }`,...m.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
127
- render: () => html\`
128
- <style>
129
- \${demoStyle}
130
- </style>
131
- <div style="display: flex; gap: 2rem; justify-content: center; padding: 4rem 2rem; flex-wrap: wrap;">
132
- <tooltip-demo tooltip="Click-triggered tooltip" tooltip-trigger="click" label="Click me"></tooltip-demo>
133
- <tooltip-demo tooltip="Hover or click" tooltip-trigger="hover click" label="Hover or click"></tooltip-demo>
134
- </div>
135
- \`,
136
- parameters: {
137
- docs: {
138
- description: {
139
- story: 'The \`tooltip-trigger\` attribute controls how the tooltip is activated. \`click\` toggles on click and dismisses on Escape. Triggers can be combined with spaces.'
140
- }
141
- }
142
- }
143
- }`,...u.parameters?.docs?.source}}};const R=["Default","Positions","Offset","ClickTrigger"];export{u as ClickTrigger,d as Default,m as Offset,h as Positions,R as __namedExportsOrder,F as default};
@@ -1 +0,0 @@
1
- import{E as r}from"./iframe-Dz6CxatW.js";const m=o=>o??r;export{m as o};