@brightspot/ui 5.1.0 → 5.2.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.
- package/dist/components/esca-avatar/EscaAvatar.d.ts +70 -0
- package/dist/components/esca-avatar/EscaAvatar.d.ts.map +1 -0
- package/dist/components/esca-avatar/EscaAvatar.js +218 -0
- package/dist/components/esca-avatar/EscaAvatar.js.map +1 -0
- package/dist/components/esca-avatar/animations/esca-search.json +1 -0
- package/dist/components/esca-avatar/animations/esca-task-complete.json +1 -0
- package/dist/components/esca-avatar/animations/esca-wave.json +1 -0
- package/dist/custom-elements.json +849 -617
- package/dist/storybook/assets/{ActionBar.stories-D9ok2eVg.js → ActionBar.stories-CBN_ShP5.js} +1 -1
- package/dist/storybook/assets/{ActionItem.stories-DjPfYpgA.js → ActionItem.stories-DysfIj7U.js} +1 -1
- package/dist/storybook/assets/{Avatar.stories-Di3s5wxK.js → Avatar.stories-BdgqH7I_.js} +1 -1
- package/dist/storybook/assets/{AvatarGroup.stories-CT7lYX_U.js → AvatarGroup.stories-DFCG_0Py.js} +1 -1
- package/dist/storybook/assets/{Badge.stories-9unZqfhH.js → Badge.stories-BWPIJ2jm.js} +1 -1
- package/dist/storybook/assets/{Button-DuuAvVjP.js → Button-B1_SwzVL.js} +1 -1
- package/dist/storybook/assets/{Button.stories-KDBmJ9xt.js → Button.stories-C-H-KIcV.js} +1 -1
- package/dist/storybook/assets/{ButtonGroup.stories-BeWYMkDy.js → ButtonGroup.stories-BBdtnaP_.js} +1 -1
- package/dist/storybook/assets/{Card.stories-BNMJ-H5I.js → Card.stories-FLC-WKC_.js} +1 -1
- package/dist/storybook/assets/{Celebrate.stories-Cue8O4hb.js → Celebrate.stories-CZ7SfTOh.js} +1 -1
- package/dist/storybook/assets/{Checkbox.stories-DLe4npId.js → Checkbox.stories-C42Z-jkF.js} +1 -1
- package/dist/storybook/assets/{CircularProgress.stories-BHB2K82M.js → CircularProgress.stories-DoC0japf.js} +1 -1
- package/dist/storybook/assets/{ClipboardMixin.stories-mU-JGoHp.js → ClipboardMixin.stories-Ci-drbJq.js} +1 -1
- package/dist/storybook/assets/{Color-6BZIO3FS-D3GAvUXG.js → Color-6BZIO3FS-rxeQBzj6.js} +1 -1
- package/dist/storybook/assets/{Colors.stories-a83X2cLQ.js → Colors.stories-Bw1Kp3B7.js} +1 -1
- package/dist/storybook/assets/{CombinedEffects.stories-sLTopxBQ.js → CombinedEffects.stories-DArqLKI1.js} +1 -1
- package/dist/storybook/assets/{ComponentStatesMixin-CJ9pmXHc.js → ComponentStatesMixin-kUcZl-YW.js} +1 -1
- package/dist/storybook/assets/{ComponentStatesMixin.stories-DSkFzAxR.js → ComponentStatesMixin.stories-PrGY6akN.js} +1 -1
- package/dist/storybook/assets/{CopyToClipboard.stories-DqMxtd4b.js → CopyToClipboard.stories-CUzNoCic.js} +1 -1
- package/dist/storybook/assets/{Debounce.stories-DV30whKw.js → Debounce.stories-CrnUlkHs.js} +1 -1
- package/dist/storybook/assets/{DocsRenderer-LL677BLK-DmVtYsJx.js → DocsRenderer-LL677BLK-BM3eNhez.js} +3 -3
- package/dist/storybook/assets/{Dropdown.stories-sCz8_Hkw.js → Dropdown.stories-DyIY6e6W.js} +1 -1
- package/dist/storybook/assets/{EmptyState.stories-kBKfr87C.js → EmptyState.stories-BXFcxFcG.js} +1 -1
- package/dist/storybook/assets/EscaAvatar.stories-DnriDX7_.js +138 -0
- package/dist/storybook/assets/{Events.stories-BXdHEFJR.js → Events.stories-YjZ1Qtl4.js} +1 -1
- package/dist/storybook/assets/{Heading.stories-B2XJMBD8.js → Heading.stories-CfQHk5pf.js} +1 -1
- package/dist/storybook/assets/{HueRipple.stories-BfzsAQYM.js → HueRipple.stories-CR75dLBM.js} +1 -1
- package/dist/storybook/assets/{Icon.stories--pcHe1x-.js → Icon.stories-BCSRhY2s.js} +1 -1
- package/dist/storybook/assets/{IconButton.stories-dbXfrgH3.js → IconButton.stories-0O4LM1u6.js} +1 -1
- package/dist/storybook/assets/{LinearProgress.stories-CApOBX0x.js → LinearProgress.stories-B7GYC8WE.js} +1 -1
- package/dist/storybook/assets/{OnFindMixin.stories-df6ckqw3.js → OnFindMixin.stories-UOK_ZP2n.js} +1 -1
- package/dist/storybook/assets/{Pagination.stories-_MiDRipW.js → Pagination.stories-Co3mbyct.js} +1 -1
- package/dist/storybook/assets/{Popover.stories-9hVZFeMx.js → Popover.stories-D5gsWcB0.js} +1 -1
- package/dist/storybook/assets/{ReadyMixin-HHwtCrVi.js → ReadyMixin-DkhLzoe0.js} +1 -1
- package/dist/storybook/assets/{RovingTabindexMixin.stories-B6MPGbVh.js → RovingTabindexMixin.stories-DPhOWmKd.js} +1 -1
- package/dist/storybook/assets/{Rtc.stories-D3tZOSkM.js → Rtc.stories-D5Vpw1oP.js} +1 -1
- package/dist/storybook/assets/{ScrollShadow.stories-B1dTcJR4.js → ScrollShadow.stories-Cmbqjk5X.js} +1 -1
- package/dist/storybook/assets/{Switch.stories-Bp-Guy3z.js → Switch.stories-Bfmr9Ugg.js} +1 -1
- package/dist/storybook/assets/{Tab.stories-Caxi7G_1.js → Tab.stories-DbucUczE.js} +1 -1
- package/dist/storybook/assets/{Tabs.stories-g5Nb7YDi.js → Tabs.stories-DnPRsSsj.js} +1 -1
- package/dist/storybook/assets/{Throttle.stories-BzWv-mzN.js → Throttle.stories-DNwTsNRC.js} +1 -1
- package/dist/storybook/assets/{Tooltip.stories-BlaTc14X.js → Tooltip.stories-Fsp2BRAr.js} +1 -1
- package/dist/storybook/assets/{Upload.stories-a9edmUmW.js → Upload.stories-C-WggEd6.js} +1 -1
- package/dist/storybook/assets/{UploadItem.stories-BOIu5j_i.js → UploadItem.stories-DwQzECXv.js} +1 -1
- package/dist/storybook/assets/{Welcome.stories-D33npbIl.js → Welcome.stories-DFluhbVr.js} +1 -1
- package/dist/storybook/assets/{Widget.stories-D0vHPAyP.js → Widget.stories-7pJNHWTu.js} +1 -1
- package/dist/storybook/assets/{WithTooltip-65CFNBJE-WOhnQufs.js → WithTooltip-65CFNBJE-BcgHQTz7.js} +1 -1
- package/dist/storybook/assets/{blocks-B17JEOI8.js → blocks-U4F5yAu3.js} +5 -5
- package/dist/storybook/assets/{formatter-EIJCOSYU-QKmiwKu7.js → formatter-EIJCOSYU-BjQsmbLH.js} +1 -1
- package/dist/storybook/assets/if-defined-CM2lJk-0.js +1 -0
- package/dist/storybook/assets/iframe-1F7Ef_8q.css +1 -0
- package/dist/storybook/assets/{iframe-BqpRijx3.js → iframe-DNJdsh5L.js} +9 -9
- package/dist/storybook/assets/{index-CpksO7cK.js → index-1U9xrCIK.js} +1 -1
- package/dist/storybook/assets/{onFind-C_VPLxg8.js → onFind-AbVF4rYD.js} +1 -1
- package/dist/storybook/assets/{onFind.stories-BuZMC3tk.js → onFind.stories-j334ViWp.js} +1 -1
- package/dist/storybook/assets/{onRemove.stories-HDkMhdmO.js → onRemove.stories-fKMxne2_.js} +1 -1
- package/dist/storybook/assets/{onVisible.stories-CRCllRfN.js → onVisible.stories-BCRoHlJz.js} +1 -1
- package/dist/storybook/assets/{style-map-DukvFNCc.js → style-map-BZ07XihX.js} +1 -1
- package/dist/storybook/assets/{syntaxhighlighter-ED5Y7EFY-BUo_WYvV.js → syntaxhighlighter-ED5Y7EFY-C2D-CgsB.js} +1 -1
- package/dist/storybook/iframe.html +2 -2
- package/dist/storybook/index.json +1 -1
- package/dist/storybook/project.json +1 -1
- package/dist/tailwind-plugin-button.js +5 -5
- package/dist/tailwind-plugin-button.js.map +1 -1
- package/dist/tailwind-plugin-button.ts +5 -5
- package/dist/tailwind.config.d.ts.map +1 -1
- package/dist/tailwind.config.js +1 -1
- package/dist/tailwind.config.js.map +1 -1
- package/dist/tailwind.config.ts +1 -2
- package/dist/util/EventEmitterMixin.d.ts +4 -0
- package/dist/util/EventEmitterMixin.d.ts.map +1 -1
- package/dist/util/EventEmitterMixin.js.map +1 -1
- package/docs/components/EscaAvatar.md +70 -0
- package/docs/components/README.md +1 -0
- package/package.json +2 -1
- package/src/legacy/tool-ui/src/ContentForm.css +1 -1
- package/src/legacy/tool-ui/src/Guide.css +1 -1
- package/src/legacy/tool-ui/src/Notification.css +1 -1
- package/src/legacy/tool-ui/src/Popup.css +4 -1
- package/src/legacy/tool-ui/src/RepeatableContentInputGroup.css +3 -3
- package/src/legacy/tool-ui/src/dropdown/index.ts +2 -2
- package/src/legacy/tool-ui/src/main/webapp/dist/RTEProseMirror.c6f3142a97caa5cd3c21.js +500 -0
- package/src/legacy/tool-ui/src/main/webapp/dist/v4.c1c3bde6e394b2a2b75c.css +3 -0
- package/src/legacy/tool-ui/src/main/webapp/dist/{v4.b892feb8ec199202fd18.js → v4.da15ce3ce45e85b4880a.js} +3 -3
- package/src/legacy/tool-ui/src/main/webapp/dist/v5.4edf99db4a5f4969d041.css +5 -0
- package/src/legacy/tool-ui/src/main/webapp/dist/{v5.493c3ddf65c4fa599ff0.js → v5.8491d982a282935a3058.js} +4 -4
- package/src/legacy/tool-ui/src/main/webapp/v4/ContentForm.less +1 -1
- package/src/legacy/tool-ui/src/main/webapp/v4/ContentSelector.less +3 -3
- package/src/legacy/tool-ui/src/v5.ts +1 -1
- package/dist/storybook/assets/if-defined-0srVwUDm.js +0 -1
- package/dist/storybook/assets/iframe-DfU9RLLj.css +0 -1
- package/src/legacy/tool-ui/src/main/webapp/dist/RTEProseMirror.e8344eaeea387c600257.js +0 -500
- package/src/legacy/tool-ui/src/main/webapp/dist/v4.a6f53058dbb04a69aa5c.css +0 -3
- package/src/legacy/tool-ui/src/main/webapp/dist/v5.d49a759cb0b7cffd76e4.css +0 -5
- /package/src/legacy/tool-ui/src/main/webapp/dist/{RTEProseMirror.e8344eaeea387c600257.js.LICENSE.txt → RTEProseMirror.c6f3142a97caa5cd3c21.js.LICENSE.txt} +0 -0
- /package/src/legacy/tool-ui/src/main/webapp/dist/{v4.b892feb8ec199202fd18.js.LICENSE.txt → v4.da15ce3ce45e85b4880a.js.LICENSE.txt} +0 -0
- /package/src/legacy/tool-ui/src/main/webapp/dist/{v5.493c3ddf65c4fa599ff0.js.LICENSE.txt → v5.8491d982a282935a3058.js.LICENSE.txt} +0 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{g as S,x as t}from"./iframe-
|
|
1
|
+
import{g as S,x as t}from"./iframe-DNJdsh5L.js";import{o as f}from"./style-map-BZ07XihX.js";import"./preload-helper-PPVm8Dsz.js";const{events:O,args:A,argTypes:n}=S("btu-dropdown"),B={title:"Components/Dropdown",component:"btu-dropdown",tags:["autodocs"],parameters:{docs:{subtitle:"btu-dropdown",description:{component:`
|
|
2
2
|
A dropdown menu component that renders a trigger button and manages a floating panel
|
|
3
3
|
containing a \`btu-dropdown-menu\` with \`btu-dropdown-item\` children.
|
|
4
4
|
|
package/dist/storybook/assets/{EmptyState.stories-kBKfr87C.js → EmptyState.stories-BXFcxFcG.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{g as u,x as e}from"./iframe-
|
|
1
|
+
import{g as u,x as e}from"./iframe-DNJdsh5L.js";import{o as m}from"./if-defined-CM2lJk-0.js";import{o as h}from"./style-map-BZ07XihX.js";import"./preload-helper-PPVm8Dsz.js";const{events:b,args:g,argTypes:s}=u("btu-empty-state"),y=["sm","md","lg"],v=[1,2,3,4,5,6],k={title:"Components/Empty State",component:"btu-empty-state",tags:["autodocs"],parameters:{docs:{subtitle:"A standardized component for communicating the absence of content.",description:{component:`
|
|
2
2
|
<h3>When to use:</h3>
|
|
3
3
|
<ul>
|
|
4
4
|
<li>To communicate the absence of content in tables, lists, or search results</li>
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
import{g as f,x as a}from"./iframe-DNJdsh5L.js";import{o as x}from"./style-map-BZ07XihX.js";import"./preload-helper-PPVm8Dsz.js";const{events:w,args:z,argTypes:m}=f("btu-esca-avatar"),y=["idle","wave","search","complete"],g=["xs","sm","md","lg","xl"],$={title:"Components/Esca/Avatar",component:"btu-esca-avatar",tags:["autodocs"],parameters:{docs:{subtitle:"The animated avatar for the Esca AI assistant",description:{component:`
|
|
2
|
+
<h3>When to use:</h3>
|
|
3
|
+
<ul>
|
|
4
|
+
<li>Alongside the Esca assistant's messages, in any chat surface</li>
|
|
5
|
+
<li>To signal what the assistant is doing: greeting, thinking, or done</li>
|
|
6
|
+
</ul>
|
|
7
|
+
|
|
8
|
+
<h3>States:</h3>
|
|
9
|
+
<ul>
|
|
10
|
+
<li><strong>idle:</strong> a still frame of the wave — the resting state</li>
|
|
11
|
+
<li><strong>wave:</strong> plays once on open, then holds the last frame</li>
|
|
12
|
+
<li><strong>search:</strong> loops while the assistant generates a response</li>
|
|
13
|
+
<li><strong>complete:</strong> plays once when the response finishes, then holds</li>
|
|
14
|
+
</ul>
|
|
15
|
+
|
|
16
|
+
<p>Drive it through the single <code>state</code> attribute. Reduced-motion users get a static frame instead of playback.</p>
|
|
17
|
+
|
|
18
|
+
<h3>Accessibility:</h3>
|
|
19
|
+
<ul>
|
|
20
|
+
<li>The avatar is a visual indicator, not a status channel. By default it exposes a static name (<code>role="img"</code>, <code>aria-label="Esca"</code>), set only when absent so you can override them.</li>
|
|
21
|
+
<li>When the assistant is already named in the surrounding UI (the common case in a chat), treat the avatar as decorative — set <code>aria-hidden="true"</code> to avoid a redundant announcement.</li>
|
|
22
|
+
<li>Don't convey activity (thinking / done) by changing this element's ARIA per <code>state</code> — a looping <code>search</code> would announce repeatedly. Surface status as text in a polite <code>aria-live</code> region owned by the chat UI. The component intentionally does not announce its own state.</li>
|
|
23
|
+
</ul>
|
|
24
|
+
`}},actions:{handles:w},controls:{expanded:!0}},args:{...z,state:"wave",size:"md"},argTypes:{...m,"--esca-avatar-size":{table:{disable:!0}},state:{...m.state,control:{type:"select"},options:y,description:"Animation to play. Changing this swaps the animation.",table:{category:"Attributes",defaultValue:{summary:"idle"}}},size:{...m.size,control:{type:"select"},options:g,description:"Avatar size scale (mirrors btu-avatar). Overridden by `--esca-avatar-size`.",table:{category:"Attributes",defaultValue:{summary:"md"}}},customSize:{name:"--esca-avatar-size",control:{type:"text"},description:'Width/height override (e.g. "3rem"). Beats the `size` attribute; default box is 2.5rem (md).',table:{category:"css properties"}}},render:e=>{const t={};return e.customSize&&(t["--esca-avatar-size"]=e.customSize),a`<btu-esca-avatar state="${e.state}" size="${e.size}" style=${x(t)}></btu-esca-avatar>`}},n={args:{},parameters:{docs:{description:{story:"Use the controls to switch between states and resize the avatar."}}}},r={render:()=>a`<div class="flex flex-row items-start gap-8">
|
|
25
|
+
${y.map(e=>a`
|
|
26
|
+
<div class="flex flex-col items-center gap-2">
|
|
27
|
+
<btu-esca-avatar state="${e}" style="--esca-avatar-size: 4rem"></btu-esca-avatar>
|
|
28
|
+
<span class="text-xs font-medium text-gray-700">${e}</span>
|
|
29
|
+
</div>
|
|
30
|
+
`)}
|
|
31
|
+
</div>`,parameters:{docs:{description:{story:"Every state side by side. `wave`, `search`, and `complete` play on load (`search` loops); `idle` holds a still frame."}}}},o={render:()=>a`<div class="flex flex-row items-center gap-6">
|
|
32
|
+
${g.map(e=>a`
|
|
33
|
+
<div class="flex flex-col items-center gap-2">
|
|
34
|
+
<btu-esca-avatar state="search" size="${e}"></btu-esca-avatar>
|
|
35
|
+
<span class="text-xs text-gray-600">${e}</span>
|
|
36
|
+
</div>
|
|
37
|
+
`)}
|
|
38
|
+
</div>`,parameters:{docs:{description:{story:"The `size` scale (`xs`–`xl`), mirroring `<btu-avatar>`. For an arbitrary size, override with the `--esca-avatar-size` custom property."}}}},i={render:()=>{const e=document.createElement("div");e.className="flex flex-col items-start gap-4";const t=document.createElement("btu-esca-avatar");t.style.setProperty("--esca-avatar-size","4rem");const c=document.createElement("span");c.className="text-xs text-gray-600";const s=document.createElement("button");s.textContent="Replay",s.className="btu-button btu-button-gray rounded px-3 py-1 text-sm";let l;const d=p=>{c.textContent=p},u=()=>{clearTimeout(l),t.state="wave",d("state: wave — greeting on open")};t.addEventListener("btu-esca-avatar-complete",()=>{t.state==="wave"&&(t.state="search",d("state: search — generating a response"),l=setTimeout(()=>{t.state="complete",d("state: complete — response finished")},2500))}),s.addEventListener("click",u),e.append(t,c,s),queueMicrotask(u);const h=new MutationObserver(p=>{p.forEach(b=>b.removedNodes.forEach(v=>{(v===e||v.contains(e))&&(clearTimeout(l),h.disconnect())}))});return queueMicrotask(()=>{e.parentNode&&h.observe(e.parentNode,{childList:!0})}),e},parameters:{docs:{description:{story:"The full assistant flow driven by the `state` attribute: `wave` on open, then `search` while responding (advanced by the `btu-esca-avatar-complete` event), then `complete`. Click Replay to run it again."}}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
|
|
39
|
+
args: {},
|
|
40
|
+
parameters: {
|
|
41
|
+
docs: {
|
|
42
|
+
description: {
|
|
43
|
+
story: 'Use the controls to switch between states and resize the avatar.'
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}`,...n.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
|
|
48
|
+
render: () => html\`<div class="flex flex-row items-start gap-8">
|
|
49
|
+
\${stateOptions.map(state => html\`
|
|
50
|
+
<div class="flex flex-col items-center gap-2">
|
|
51
|
+
<btu-esca-avatar state="\${state}" style="--esca-avatar-size: 4rem"></btu-esca-avatar>
|
|
52
|
+
<span class="text-xs font-medium text-gray-700">\${state}</span>
|
|
53
|
+
</div>
|
|
54
|
+
\`)}
|
|
55
|
+
</div>\`,
|
|
56
|
+
parameters: {
|
|
57
|
+
docs: {
|
|
58
|
+
description: {
|
|
59
|
+
story: 'Every state side by side. \`wave\`, \`search\`, and \`complete\` play on load (\`search\` loops); \`idle\` holds a still frame.'
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}`,...r.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
|
|
64
|
+
render: () => html\`<div class="flex flex-row items-center gap-6">
|
|
65
|
+
\${sizeOptions.map(size => html\`
|
|
66
|
+
<div class="flex flex-col items-center gap-2">
|
|
67
|
+
<btu-esca-avatar state="search" size="\${size}"></btu-esca-avatar>
|
|
68
|
+
<span class="text-xs text-gray-600">\${size}</span>
|
|
69
|
+
</div>
|
|
70
|
+
\`)}
|
|
71
|
+
</div>\`,
|
|
72
|
+
parameters: {
|
|
73
|
+
docs: {
|
|
74
|
+
description: {
|
|
75
|
+
story: 'The \`size\` scale (\`xs\`–\`xl\`), mirroring \`<btu-avatar>\`. For an arbitrary size, override with the \`--esca-avatar-size\` custom property.'
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}`,...o.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
|
|
80
|
+
render: () => {
|
|
81
|
+
const container = document.createElement('div');
|
|
82
|
+
container.className = 'flex flex-col items-start gap-4';
|
|
83
|
+
const avatar = document.createElement('btu-esca-avatar') as EscaAvatar;
|
|
84
|
+
avatar.style.setProperty('--esca-avatar-size', '4rem');
|
|
85
|
+
const status = document.createElement('span');
|
|
86
|
+
status.className = 'text-xs text-gray-600';
|
|
87
|
+
const replay = document.createElement('button');
|
|
88
|
+
replay.textContent = 'Replay';
|
|
89
|
+
replay.className = 'btu-button btu-button-gray rounded px-3 py-1 text-sm';
|
|
90
|
+
let searchTimer: ReturnType<typeof setTimeout> | undefined;
|
|
91
|
+
const setStatus = (text: string) => {
|
|
92
|
+
status.textContent = text;
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
// Mirrors a real exchange: greet on open, think while responding, then settle on completion.
|
|
96
|
+
const run = () => {
|
|
97
|
+
clearTimeout(searchTimer);
|
|
98
|
+
avatar.state = 'wave';
|
|
99
|
+
setStatus('state: wave — greeting on open');
|
|
100
|
+
};
|
|
101
|
+
avatar.addEventListener('btu-esca-avatar-complete', () => {
|
|
102
|
+
if (avatar.state === 'wave') {
|
|
103
|
+
avatar.state = 'search';
|
|
104
|
+
setStatus('state: search — generating a response');
|
|
105
|
+
searchTimer = setTimeout(() => {
|
|
106
|
+
avatar.state = 'complete';
|
|
107
|
+
setStatus('state: complete — response finished');
|
|
108
|
+
}, 2500);
|
|
109
|
+
}
|
|
110
|
+
});
|
|
111
|
+
replay.addEventListener('click', run);
|
|
112
|
+
container.append(avatar, status, replay);
|
|
113
|
+
queueMicrotask(run);
|
|
114
|
+
|
|
115
|
+
// Clear the pending timer when the story unmounts.
|
|
116
|
+
const observer = new MutationObserver(mutations => {
|
|
117
|
+
mutations.forEach(mutation => mutation.removedNodes.forEach(node => {
|
|
118
|
+
if (node === container || node.contains(container)) {
|
|
119
|
+
clearTimeout(searchTimer);
|
|
120
|
+
observer.disconnect();
|
|
121
|
+
}
|
|
122
|
+
}));
|
|
123
|
+
});
|
|
124
|
+
queueMicrotask(() => {
|
|
125
|
+
if (container.parentNode) observer.observe(container.parentNode, {
|
|
126
|
+
childList: true
|
|
127
|
+
});
|
|
128
|
+
});
|
|
129
|
+
return container;
|
|
130
|
+
},
|
|
131
|
+
parameters: {
|
|
132
|
+
docs: {
|
|
133
|
+
description: {
|
|
134
|
+
story: 'The full assistant flow driven by the \`state\` attribute: \`wave\` on open, then \`search\` while responding (advanced by the \`btu-esca-avatar-complete\` event), then \`complete\`. Click Replay to run it again.'
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
}`,...i.parameters?.docs?.source}}};const k=["Default","States","Sizes","Lifecycle"];export{n as Default,i as Lifecycle,o as Sizes,r as States,k as __namedExportsOrder,$ as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{x as d}from"./iframe-
|
|
1
|
+
import{x as d}from"./iframe-DNJdsh5L.js";import"./preload-helper-PPVm8Dsz.js";var n=Object.freeze,r=Object.defineProperty,s=(t,i)=>n(r(t,"raw",{value:n(t.slice())})),o;const l={title:"Mixins/Events",tags:["autodocs"],parameters:{docs:{subtitle:"Events inherited from EventEmitterMixin",description:{component:`
|
|
2
2
|
<h3>EventEmitterMixin Events</h3>
|
|
3
3
|
|
|
4
4
|
<p>All Brightspot UI components that extend EventEmitterMixin emit the following lifecycle events in addition to those inherited from LitElement. These events use CustomEvent and bubble through the DOM with <code>composed: true</code>, meaning they cross shadow DOM boundaries.</p>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import{x as s}from"./iframe-
|
|
1
|
+
import{x as s}from"./iframe-DNJdsh5L.js";import"./preload-helper-PPVm8Dsz.js";const r=({size:t})=>s` <div class=${[`btu-heading-${t}`].join(" ")}>Heading</div> `,o={title:"CSS Plugins/Heading",component:"btu-heading",tags:["autodocs"],parameters:{docs:{subtitle:"This Tailwind CSS plugin provides the `.btu-heading` utility class for styling headings. It supports five different sizes, from 1 (largest) to 5 (smallest). Apply the class to `<h1>` through `<h5>` elements to style them accordingly."},controls:{expanded:!0}},render:t=>r(t),argTypes:{size:{control:{type:"range",min:1,max:5,step:1},description:"Heading size from 1 to 5, where 1 is the largest and 5 is the smallest."}},args:{size:1}},e={args:{}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
|
|
2
2
|
args: {}
|
|
3
3
|
}`,...e.parameters?.docs?.source}}};const n=["Default"];export{e as Default,n as __namedExportsOrder,o as default};
|
package/dist/storybook/assets/{HueRipple.stories-BfzsAQYM.js → HueRipple.stories-CR75dLBM.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{x as i}from"./iframe-
|
|
1
|
+
import{x as i}from"./iframe-DNJdsh5L.js";import{b as l}from"./ripple-DQbyyRUw.js";import{B as e}from"./Button-B1_SwzVL.js";import"./preload-helper-PPVm8Dsz.js";import"./position-CFNQy3J6.js";const m={title:"Effects/Hue Ripple",tags:["autodocs"],parameters:{docs:{subtitle:"Click anywhere to send a hue-shifting ripple across the viewport",description:{component:`
|
|
2
2
|
Uses the **View Transition API** to create an expanding ring that reveals OKLCH-shifted colors as it sweeps past each element, then they return to normal.
|
|
3
3
|
|
|
4
4
|
### Usage
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{g,x as s}from"./iframe-
|
|
1
|
+
import{g,x as s}from"./iframe-DNJdsh5L.js";import{o as h}from"./style-map-BZ07XihX.js";import{L as u}from"./LucideDynamicLoader-jmdq8YDM.js";import"./preload-helper-PPVm8Dsz.js";const{events:x,args:v,argTypes:i}=g("btu-icon"),b=["xs","sm","md","lg","xl"],f=["ai","error","gray","primary","purple","rose","success","teal","warning"],C={title:"Components/Icon",component:"btu-icon",tags:["autodocs"],parameters:{docs:{subtitle:"An icon component using Lucide icons with built-in support for custom colors and sizes.",description:{component:`
|
|
2
2
|
<strong>When to use:</strong>
|
|
3
3
|
<ul>
|
|
4
4
|
<li>To visually reinforce actions, states, or categories</li>
|
package/dist/storybook/assets/{IconButton.stories-dbXfrgH3.js → IconButton.stories-0O4LM1u6.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{g as p,x as e}from"./iframe-
|
|
1
|
+
import{g as p,x as e}from"./iframe-DNJdsh5L.js";import{o as b}from"./if-defined-CM2lJk-0.js";import{L as d}from"./LucideDynamicLoader-jmdq8YDM.js";import"./preload-helper-PPVm8Dsz.js";const{events:u,args:y,argTypes:o}=p("btu-icon-button"),x={title:"Components/Icon Button",component:"btu-icon-button",tags:["autodocs"],parameters:{docs:{subtitle:"Combines button styles with the icon component along with an opinionated API",description:{component:`
|
|
2
2
|
<h3>When to use:</h3>
|
|
3
3
|
<ul>
|
|
4
4
|
<li>For actions in compact or space-constrained interfaces (toolbars, tables, cards)</li>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{g as D,E as h,x as T}from"./iframe-
|
|
1
|
+
import{g as D,E as h,x as T}from"./iframe-DNJdsh5L.js";import{o as A}from"./style-map-BZ07XihX.js";import"./preload-helper-PPVm8Dsz.js";const{events:V,args:k,argTypes:g}=D("btu-linear-progress"),W={title:"Components/Linear Progress",component:"btu-linear-progress",tags:["autodocs"],parameters:{docs:{subtitle:"A horizontal progress bar for showing task completion",description:{component:`
|
|
2
2
|
<h3>When to use:</h3>
|
|
3
3
|
<ul>
|
|
4
4
|
<li>To show progress of a specific task with known completion percentage</li>
|
package/dist/storybook/assets/{OnFindMixin.stories-df6ckqw3.js → OnFindMixin.stories-UOK_ZP2n.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{x as h,i as v}from"./iframe-
|
|
1
|
+
import{x as h,i as v}from"./iframe-DNJdsh5L.js";import{o as k}from"./onFind-AbVF4rYD.js";import"./preload-helper-PPVm8Dsz.js";const x=e=>{class n extends e{#t=[];onFindRegistration(){return null}#e(){if(this.#t.length)return;const i=this.onFindRegistration();if(!i)return;const d=Array.isArray(i)?i:[i];this.#t=d.map(c=>k(this,c.selectors,c.callback))}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.#e()}firstUpdated(i){super.firstUpdated(i),this.#e()}disconnectedCallback(){super.disconnectedCallback(),this.#t.forEach(i=>i()),this.#t=[]}}return n},{expect:a,userEvent:l,waitFor:r,within:w}=__STORYBOOK_MODULE_TEST__,b="ofm-demo";if(!customElements.get(b)){class e extends x(v){onFindRegistration(){return{selectors:":scope > .ofm-item",callback:t=>t.classList.add("ring-2","ring-success-500")}}render(){return h`<slot></slot>`}}customElements.define(b,e)}const p="ofm-multi";if(!customElements.get(p)){class e extends x(v){onFindRegistration(){return[{selectors:":scope > .ofm-a",callback:t=>t.classList.add("ring-2","ring-success-500")},{selectors:":scope > .ofm-b",callback:t=>t.classList.add("ring-2","ring-primary-500")}]}render(){return h`<slot></slot>`}}customElements.define(p,e)}function g(){return globalThis[Symbol.for("brightspot.onFind")]?.callbacks?.length??0}const M={title:"Mixins/OnFind Mixin",tags:["autodocs"],parameters:{docs:{description:{component:`
|
|
2
2
|
\`OnFindMixin\` registers an \`onFind\` child-redistribution callback and
|
|
3
3
|
**tears it down on disconnect**, so a detached component is garbage-collectable
|
|
4
4
|
and stops being visited on every document mutation.
|
package/dist/storybook/assets/{Pagination.stories-_MiDRipW.js → Pagination.stories-Co3mbyct.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{g as m,x as u}from"./iframe-
|
|
1
|
+
import{g as m,x as u}from"./iframe-DNJdsh5L.js";import{o as g}from"./style-map-BZ07XihX.js";import"./preload-helper-PPVm8Dsz.js";const{events:b,args:h,argTypes:y}=m("btu-pagination"),c=e=>{const t={};return e.customBackgroundColor&&(t["--pagination-color-background"]=e.customBackgroundColor),e.customForegroundColor&&(t["--pagination-color-foreground"]=e.customForegroundColor),t},$={title:"Components/Pagination",component:"btu-pagination",tags:["autodocs"],parameters:{docs:{subtitle:"A component for navigating through paged content",description:{component:`
|
|
2
2
|
<h3>When to use:</h3>
|
|
3
3
|
<ul>
|
|
4
4
|
<li>To navigate through large sets of data</li>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{g as p,x as l}from"./iframe-
|
|
1
|
+
import{g as p,x as l}from"./iframe-DNJdsh5L.js";import{o as a}from"./if-defined-CM2lJk-0.js";import{o as c}from"./style-map-BZ07XihX.js";import"./preload-helper-PPVm8Dsz.js";const{events:d,args:u,argTypes:t}=p("btu-popover"),h={title:"Components/Popover",component:"btu-popover",tags:["autodocs"],parameters:{docs:{subtitle:"Rich interactive content anchored to a trigger element",description:{component:`
|
|
2
2
|
\`btu-popover\` displays rich interactive content anchored to a trigger element using CSS anchor positioning and the native Popover API.
|
|
3
3
|
|
|
4
4
|
<h3>When to use:</h3>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import"./iframe-
|
|
1
|
+
import"./iframe-DNJdsh5L.js";const l=t=>{class n extends t{connectedCallback(){super.connectedCallback(),Promise.resolve().then(()=>this.emit("btu-element-connected",{}),e=>this.emit("btu-element-error",{error:e}))}disconnectedCallback(){super.disconnectedCallback(),this.emit("btu-element-disconnected")}emit(e,c){const a=new CustomEvent(e,{bubbles:!0,cancelable:!1,composed:!0,detail:c});return this.dispatchEvent(a)}}return n},d=t=>{class n extends t{connectedCallback(){const e=()=>{super.connectedCallback()};document.readyState!=="loading"?e():document.addEventListener("DOMContentLoaded",()=>e())}}return n};export{l as E,d as R};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{x as l,i as v}from"./iframe-
|
|
1
|
+
import{x as l,i as v}from"./iframe-DNJdsh5L.js";import{t as m}from"./custom-element-UsVr97OX.js";import"./preload-helper-PPVm8Dsz.js";const h=n=>{class i extends n{constructor(){super(...arguments),this._rovingIndex=0}_getRovingTargets(){return[]}_rovingFocus(t,e=!0){const o=this._getRovingTargets();if(o.length===0)return;const r=Math.max(0,Math.min(t,o.length-1));o.forEach((u,b)=>u.setAttribute("tabindex",b===r?"0":"-1")),e&&o[r]?.focus(),this._rovingIndex=r}_rovingNext(){const t=this._getRovingTargets();if(t.length===0)return;const e=this._rovingCurrentIndex(),o=e<t.length-1?e+1:0;this._rovingFocus(o)}_rovingPrev(){const t=this._getRovingTargets();if(t.length===0)return;const e=this._rovingCurrentIndex(),o=e>0?e-1:t.length-1;this._rovingFocus(o)}_rovingFirst(){this._rovingFocus(0)}_rovingLast(){const t=this._getRovingTargets();t.length>0&&this._rovingFocus(t.length-1)}_rovingCurrentIndex(){const t=document.activeElement;return this._getRovingTargets().findIndex(e=>e===t||e.contains(t))}}return i};var a=Object.freeze,x=Object.defineProperty,p=Object.getOwnPropertyDescriptor,f=(n,i,d,t)=>{for(var e=t>1?void 0:t?p(i,d):i,o=n.length-1,r;o>=0;o--)(r=n[o])&&(e=r(e)||e);return e},y=(n,i)=>a(x(n,"raw",{value:a(n.slice())})),c;const T={title:"Mixins/Roving Tabindex",tags:["autodocs"],parameters:{docs:{description:{component:`
|
|
2
2
|
\`RovingTabindexMixin\` provides **roving tabindex** navigation primitives for toolbar and menu components following the <a href="https://www.w3.org/WAI/ARIA/apd/practices/keyboard-interface/#kbd_roving_tabindex" target="_blank">WAI-ARIA Keyboard Interface Pattern</a>.
|
|
3
3
|
|
|
4
4
|
In a roving tabindex, only one element in the group has \`tabindex="0"\` (reachable via Tab), while all others have \`tabindex="-1"\`. Arrow keys move focus between items, wrapping at both ends.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{x as o}from"./iframe-
|
|
1
|
+
import{x as o}from"./iframe-DNJdsh5L.js";import"./preload-helper-PPVm8Dsz.js";const r={title:"Utilities/RTC",tags:["autodocs"],parameters:{docs:{subtitle:"The `rtc` module provides real-time communication between browser tabs and the Brightspot CMS server. Uses BroadcastChannel for cross-tab coordination with leader election, and Server-Sent Events for server communication."},controls:{expanded:!0}}},e={render:()=>o`
|
|
2
2
|
<div class="space-y-6 text-sm">
|
|
3
3
|
<div>
|
|
4
4
|
<h3 class="mb-2 font-bold">Overview</h3>
|
package/dist/storybook/assets/{ScrollShadow.stories-B1dTcJR4.js → ScrollShadow.stories-Cmbqjk5X.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{x as a}from"./iframe-
|
|
1
|
+
import{x as a}from"./iframe-DNJdsh5L.js";import"./preload-helper-PPVm8Dsz.js";const l=({theme:e="btu-scrollshadow-25"})=>{const r=new Array(100).fill(0).map((s,t)=>`Item ${t+1}`);return a`
|
|
2
2
|
<style>
|
|
3
3
|
:root {
|
|
4
4
|
--can-scroll: ;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{g as k,x as c}from"./iframe-
|
|
1
|
+
import{g as k,x as c}from"./iframe-DNJdsh5L.js";import{o as s}from"./if-defined-CM2lJk-0.js";import{o as f}from"./style-map-BZ07XihX.js";import{L as w}from"./LucideDynamicLoader-jmdq8YDM.js";import"./preload-helper-PPVm8Dsz.js";const{events:v,args:y,argTypes:g}=k("btu-switch"),x={customColorOn:"--switch-color-track-on",customColorOff:"--switch-color-track-off",customKnobColor:"--switch-color-knob",customLabelSpacing:"--switch-label-spacing",customIconSize:"--switch-track-icon-size"},S=e=>Object.entries(x).reduce((o,[t,n])=>(e[t]&&(o[n]=e[t]),o),{}),L={title:"Components/Switch",component:"btu-switch",tags:["autodocs"],parameters:{docs:{subtitle:"A toggle switch for binary on/off states",description:{component:`
|
|
2
2
|
<h3>When to use:</h3>
|
|
3
3
|
<ul>
|
|
4
4
|
<li>For toggling a setting or preference on/off</li>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{g as u,x as e}from"./iframe-
|
|
1
|
+
import{g as u,x as e}from"./iframe-DNJdsh5L.js";import{o as d}from"./style-map-BZ07XihX.js";import"./preload-helper-PPVm8Dsz.js";const{events:c,args:m,argTypes:t}=u("btu-tab"),y={title:"Components/Tabs/Tab",component:"btu-tab",tags:["autodocs"],parameters:{docs:{subtitle:"btu-tab",description:{component:`
|
|
2
2
|
An individual tab within a \`btu-tabs\` group.
|
|
3
3
|
|
|
4
4
|
Renders a button with \`role="tab"\` that participates in keyboard navigation and selection state managed by the parent \`btu-tabs\` container.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{g as b,E as i,x as s}from"./iframe-
|
|
1
|
+
import{g as b,E as i,x as s}from"./iframe-DNJdsh5L.js";import{o as c}from"./style-map-BZ07XihX.js";import"./preload-helper-PPVm8Dsz.js";const{events:d,args:u,argTypes:a}=b("btu-tabs"),h={title:"Components/Tabs",component:"btu-tabs",tags:["autodocs"],parameters:{docs:{subtitle:"btu-tabs",description:{component:`
|
|
2
2
|
A tab group component that manages selection state across a set of \`btu-tab\` children.
|
|
3
3
|
|
|
4
4
|
<h3>When to use:</h3>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{x as u}from"./iframe-
|
|
1
|
+
import{x as u}from"./iframe-DNJdsh5L.js";import"./preload-helper-PPVm8Dsz.js";function v(e,t){if(e<=0)return t;let n,o=0;return function(){if(n)return;const r=Date.now(),s=e-r+o;s<=0?(o=r,t.apply(this,[...arguments])):n=setTimeout(()=>{o=r,n=void 0,t.apply(this,[...arguments])},s)}}const x={title:"Utilities/Throttle",tags:["autodocs"],parameters:{docs:{subtitle:"The `throttle` utility function limits how often a function can execute, ensuring it runs at most once per specified interval. Useful for high-frequency events like scroll, resize, or mousemove."},controls:{expanded:!0}},argTypes:{interval:{control:{type:"number",min:0,max:2e3,step:50},description:"Throttle interval in milliseconds"}},args:{interval:200}},d={render:e=>{const t=`throttle-${Math.random().toString(36).substring(2,9)}`;let n=0,o=0;const r=()=>{const m=document.getElementById(`${t}-normal-count`),h=document.getElementById(`${t}-throttled-count`);m&&(m.textContent=String(n)),h&&(h.textContent=String(o))},s=v(e.interval,()=>{o++,r()}),a=()=>{n++,r()},l=()=>{a(),s()};return u`
|
|
2
2
|
<div class="space-y-4">
|
|
3
3
|
<div class="text-base">
|
|
4
4
|
<p class="mb-2">
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{ah as v,ai as x,x as c,i as w}from"./iframe-
|
|
1
|
+
import{ah as v,ai as x,x as c,i as w}from"./iframe-DNJdsh5L.js";import{t as E}from"./custom-element-UsVr97OX.js";import{o as T}from"./if-defined-CM2lJk-0.js";import{o as k}from"./style-map-BZ07XihX.js";import{E as C,R as L}from"./ReadyMixin-DkhLzoe0.js";import"./preload-helper-PPVm8Dsz.js";const D={attribute:!0,type:String,converter:x,reflect:!1,hasChanged:v},S=(o=D,i,l)=>{const{kind:t,metadata:e}=l;let s=globalThis.litPropertyMetadata.get(e);if(s===void 0&&globalThis.litPropertyMetadata.set(e,s=new Map),t==="setter"&&((o=Object.create(o)).wrapped=!0),s.set(l.name,o),t==="accessor"){const{name:r}=l;return{set(n){const g=i.get.call(this);i.set.call(this,n),this.requestUpdate(r,g,o)},init(n){return n!==void 0&&this.C(r,void 0,o,n),n}}}if(t==="setter"){const{name:r}=l;return function(n){const g=this[r];i.call(this,n),this.requestUpdate(r,g,o)}}throw Error("Unsupported decorator location: "+t)};function p(o){return(i,l)=>typeof l=="object"?S(o,i,l):((t,e,s)=>{const r=e.hasOwnProperty(s);return e.constructor.createProperty(s,t),r?Object.getOwnPropertyDescriptor(e,s):void 0})(o,i,l)}var A=Object.defineProperty,a=(o,i,l,t)=>{for(var e=void 0,s=o.length-1,r;s>=0;s--)(r=o[s])&&(e=r(i,l,e)||e);return e&&A(i,l,e),e};const M={top:"btu-tooltip-top",bottom:"btu-tooltip-bottom",left:"btu-tooltip-left",right:"btu-tooltip-right"},_={sm:"btu-tooltip-offset-sm",md:"btu-tooltip-offset-md",lg:"btu-tooltip-offset-lg",xl:"btu-tooltip-offset-xl"},O=o=>{class i extends o{constructor(){super(...arguments),this.tooltip="",this.tooltipPosition="top",this.tooltipDelay=300,this.tooltipOffset=null,this.tooltipNoArrow=!1,this.tooltipTrigger="hover focus",this._tooltipEl=null,this._tooltipId=`btu-tooltip-${crypto.randomUUID()}`,this._anchorName=`--btu-trigger-${crypto.randomUUID()}`,this._showTimer=null,this._isVisible=!1,this._activeTriggers=new Set,this._onMouseEnter=this._handleMouseEnter.bind(this),this._onMouseLeave=this._handleMouseLeave.bind(this),this._onFocusIn=this._handleFocusIn.bind(this),this._onFocusOut=this._handleFocusOut.bind(this),this._onClick=this._handleClick.bind(this),this._onNativeToggle=this._handleNativeToggle.bind(this),this._onKeyDown=this._handleKeyDown.bind(this),this._onDocumentClick=null}connectedCallback(){super.connectedCallback(),this._bindTriggerListeners()}disconnectedCallback(){if(this._clearShowTimer(),this._removeDocumentClickListener(),this._unbindTriggerListeners(),this._tooltipEl){try{this._tooltipEl.hidePopover()}catch(t){t instanceof DOMException&&t.name==="InvalidStateError"||console.warn("[btu-tooltip] Failed to hide tooltip during disconnect:",t)}this._tooltipEl.removeEventListener("toggle",this._onNativeToggle),this._tooltipEl.remove(),this._tooltipEl=null}this._removeAriaDescribedBy(),this.style.removeProperty("anchor-name"),this._isVisible=!1,super.disconnectedCallback()}updated(t){super.updated(t),t.has("tooltipTrigger")&&(this._unbindTriggerListeners(),this._bindTriggerListeners(),this._tooltipEl&&(this._isVisible&&this._hide(),this._tooltipEl.setAttribute("popover",this._getPopoverMode()))),(t.has("tooltip")||t.has("tooltipPosition")||t.has("tooltipDelay")||t.has("tooltipOffset")||t.has("tooltipNoArrow"))&&this._syncTooltipElement()}_getPopoverMode(){return"manual"}_syncTooltipElement(){if(!this.tooltip){this._tooltipEl&&(this._hide(),this._tooltipEl.removeEventListener("toggle",this._onNativeToggle),this._tooltipEl.remove(),this._tooltipEl=null,this._removeAriaDescribedBy(),this.style.removeProperty("anchor-name"),document.removeEventListener("keydown",this._onKeyDown));return}this.style.setProperty("anchor-name",this._anchorName),this._tooltipEl||(this._tooltipEl=this._createTooltipElement(),this.appendChild(this._tooltipEl),this._appendAriaDescribedBy(),document.addEventListener("keydown",this._onKeyDown)),this._tooltipEl.textContent=this.tooltip,this._tooltipEl.className=this._buildTooltipClasses()}_createTooltipElement(){const t=document.createElement("div");return t.id=this._tooltipId,t.className=this._buildTooltipClasses(),t.setAttribute("role","tooltip"),t.setAttribute("data-tooltip-internal",""),t.setAttribute("popover",this._getPopoverMode()),t.style.setProperty("position-anchor",this._anchorName),t.textContent=this.tooltip,t.addEventListener("toggle",this._onNativeToggle),t}_buildTooltipClasses(){const t=["btu-tooltip",M[this.tooltipPosition]];return this.tooltipOffset&&_[this.tooltipOffset]&&t.push(_[this.tooltipOffset]),this.tooltipNoArrow&&t.push("btu-tooltip-no-arrow"),t.join(" ")}_hasTrigger(t){return this._activeTriggers.has(t)}_bindTriggerListeners(){const t=new Set(["hover","focus","click"]);this._activeTriggers=new Set(this.tooltipTrigger.trim().split(/\s+/));for(const e of this._activeTriggers)t.has(e)||console.warn(`[btu-tooltip] Unrecognized tooltip-trigger value: "${e}". Valid values: hover, focus, click.`);this._hasTrigger("hover")&&(this.addEventListener("mouseenter",this._onMouseEnter),this.addEventListener("mouseleave",this._onMouseLeave)),this._hasTrigger("focus")&&(this.addEventListener("focusin",this._onFocusIn),this.addEventListener("focusout",this._onFocusOut)),this._hasTrigger("click")&&this.addEventListener("click",this._onClick)}_unbindTriggerListeners(){this.removeEventListener("mouseenter",this._onMouseEnter),this.removeEventListener("mouseleave",this._onMouseLeave),this.removeEventListener("focusin",this._onFocusIn),this.removeEventListener("focusout",this._onFocusOut),this.removeEventListener("click",this._onClick),document.removeEventListener("keydown",this._onKeyDown)}_show(){if(!(this._isVisible||!this._tooltipEl)){try{this._tooltipEl.showPopover()}catch(t){t instanceof DOMException&&t.name==="InvalidStateError"||console.warn("[btu-tooltip] Failed to show tooltip:",t)}this._hasTrigger("click")&&setTimeout(()=>{this._removeDocumentClickListener(),this._onDocumentClick=t=>{const e=t.composedPath();!e.includes(this)&&(!this._tooltipEl||!e.includes(this._tooltipEl))&&this._hide()},document.addEventListener("click",this._onDocumentClick)},0)}}_hide(){if(this._clearShowTimer(),this._removeDocumentClickListener(),!(!this._isVisible||!this._tooltipEl))try{this._tooltipEl.hidePopover()}catch(t){t instanceof DOMException&&t.name==="InvalidStateError"||console.warn("[btu-tooltip] Failed to hide tooltip:",t)}}_removeDocumentClickListener(){this._onDocumentClick&&(document.removeEventListener("click",this._onDocumentClick),this._onDocumentClick=null)}_handleNativeToggle(t){const{newState:e}=t;this._isVisible=e==="open";const s=this._isVisible?"btu-tooltip-show":"btu-tooltip-hide",r=new CustomEvent(s,{bubbles:!0,composed:!0});this.dispatchEvent(r)}_handleKeyDown(t){t.key==="Escape"&&(this._clearShowTimer(),this._hide())}_clearShowTimer(){this._showTimer!==null&&(clearTimeout(this._showTimer),this._showTimer=null)}_handleMouseEnter(){this._clearShowTimer(),this._showTimer=setTimeout(()=>{this._show()},this.tooltipDelay)}_handleMouseLeave(){this._clearShowTimer(),this._hide()}_handleFocusIn(){this._clearShowTimer(),this._show()}_handleFocusOut(){this._clearShowTimer(),this._hide()}_handleClick(){this._clearShowTimer(),this._isVisible?this._hide():this._show()}_appendAriaDescribedBy(){const t=this.getAttribute("aria-describedby");t?t.includes(this._tooltipId)||this.setAttribute("aria-describedby",`${t} ${this._tooltipId}`):this.setAttribute("aria-describedby",this._tooltipId)}_removeAriaDescribedBy(){const t=this.getAttribute("aria-describedby");if(!t)return;const e=t.split(/\s+/).filter(s=>s!==this._tooltipId).join(" ").trim();e?this.setAttribute("aria-describedby",e):this.removeAttribute("aria-describedby")}}return a([p({attribute:"tooltip"})],i.prototype,"tooltip"),a([p({attribute:"tooltip-position"})],i.prototype,"tooltipPosition"),a([p({attribute:"tooltip-delay",type:Number})],i.prototype,"tooltipDelay"),a([p({attribute:"tooltip-offset"})],i.prototype,"tooltipOffset"),a([p({attribute:"tooltip-no-arrow",type:Boolean})],i.prototype,"tooltipNoArrow"),a([p({attribute:"tooltip-trigger"})],i.prototype,"tooltipTrigger"),i};var P=Object.defineProperty,$=Object.getOwnPropertyDescriptor,y=(o,i,l,t)=>{for(var e=t>1?void 0:t?$(i,l):i,s=o.length-1,r;s>=0;s--)(r=o[s])&&(e=(t?r(i,l,e):r(e))||e);return t&&e&&P(i,l,e),e};let b=class extends O(C(L(w))){constructor(){super(...arguments),this.label="Hover me",this.initialClasses=[]}connectedCallback(){super.connectedCallback(),this.className&&(this.initialClasses=this.className.split(" ").filter(o=>o.trim()))}createRenderRoot(){return this}willUpdate(){const o=[...this.initialClasses,"tooltip-demo"];this.className=o.filter(Boolean).join(" ")}render(){return c`${this.label}`}};y([p({type:String})],b.prototype,"label",2);b=y([E("tooltip-demo")],b);const f=`
|
|
2
2
|
.tooltip-demo {
|
|
3
3
|
display: inline-flex;
|
|
4
4
|
align-items: center;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{g as C,x as S}from"./iframe-
|
|
1
|
+
import{g as C,x as S}from"./iframe-DNJdsh5L.js";import{o as E}from"./if-defined-CM2lJk-0.js";import{o as x}from"./style-map-BZ07XihX.js";import"./preload-helper-PPVm8Dsz.js";const{events:B,args:U,argTypes:c}=C("btu-upload"),F=e=>{const o={};return e.dropzoneBg&&(o["--upload-dropzone-bg"]=e.dropzoneBg),e.dropzoneBorderColor&&(o["--upload-dropzone-border-color"]=e.dropzoneBorderColor),e.dropzoneBorderRadius&&(o["--upload-dropzone-border-radius"]=e.dropzoneBorderRadius),e.dropzoneHoverBg&&(o["--upload-dropzone-hover-bg"]=e.dropzoneHoverBg),e.dropzoneHoverBorderColor&&(o["--upload-dropzone-hover-border-color"]=e.dropzoneHoverBorderColor),e.dropzoneFocusRingColor&&(o["--upload-dropzone-focus-ring-color"]=e.dropzoneFocusRingColor),e.itemBg&&(o["--upload-item-bg"]=e.itemBg),e.itemBorderColor&&(o["--upload-item-border-color"]=e.itemBorderColor),e.itemActiveBorderColor&&(o["--upload-item-active-border-color"]=e.itemActiveBorderColor),e.itemCompleteBorderColor&&(o["--upload-item-complete-border-color"]=e.itemCompleteBorderColor),e.itemErrorBg&&(o["--upload-item-error-bg"]=e.itemErrorBg),e.itemErrorBorderColor&&(o["--upload-item-error-border-color"]=e.itemErrorBorderColor),o},T={title:"Components/Upload",component:"btu-upload",tags:["autodocs"],parameters:{docs:{subtitle:"btu-upload",description:{component:`
|
|
2
2
|
A file upload component with drop zone and file list.
|
|
3
3
|
|
|
4
4
|
The component is **presentation + file-selection only**. It handles file browsing
|
package/dist/storybook/assets/{UploadItem.stories-BOIu5j_i.js → UploadItem.stories-DwQzECXv.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{g as y,x as c}from"./iframe-
|
|
1
|
+
import{g as y,x as c}from"./iframe-DNJdsh5L.js";import"./preload-helper-PPVm8Dsz.js";const{events:b,args:f,argTypes:h}=y("btu-upload-item"),e=r=>{const l=`upload-item-${crypto.randomUUID().slice(0,8)}`;return setTimeout(()=>{const m=document.getElementById(l)?.querySelector("btu-upload-item");if(!m)return;const u=new File([""],r.name,{type:r.mimeType??""});Object.defineProperty(u,"size",{value:r.size??0});const p=r.status??"uploading",d={id:crypto.randomUUID().slice(0,8),file:u,symbol:r.symbol},g=p==="pending"?{...d,status:"pending",progress:0}:p==="complete"?{...d,status:"complete",progress:100}:p==="error"?{...d,status:"error",progress:r.progress??0,errorMessage:r.errorMessage??""}:{...d,status:"uploading",progress:r.progress??0};m._configure(g)},50),c`<div id="${l}" style="max-width: 480px;"><btu-upload-item></btu-upload-item></div>`},k={title:"Components/Upload/Upload Item",component:"btu-upload-item",tags:["autodocs"],parameters:{docs:{subtitle:"Individual file row rendered inside btu-upload",description:{component:`
|
|
2
2
|
\`btu-upload-item\` renders a single file's state inside a \`btu-upload\` file list. It is an **internal sub-component** — consumers should not create, query, or modify items directly. All interaction goes through \`btu-upload\` methods (\`setFileProgress\`, \`setFileStatus\`, \`setFileSymbol\`, \`removeFile\`).
|
|
3
3
|
|
|
4
4
|
These stories exist for design documentation and visual QA of each status state in isolation. In practice, items are always created, configured, and destroyed by their parent \`btu-upload\`.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{S as U}from"./blocks-
|
|
1
|
+
import{S as U}from"./blocks-U4F5yAu3.js";import{e as X,f as _,E as B,r as j,x as A}from"./iframe-DNJdsh5L.js";import"./preload-helper-PPVm8Dsz.js";const C=()=>new J;class J{}const w=new WeakMap,k=X(class extends _{render(e){return B}update(e,[o]){const t=o!==this.G;return t&&this.G!==void 0&&this.rt(void 0),(t||this.lt!==this.ct)&&(this.G=o,this.ht=e.options?.host,this.rt(this.ct=e.element)),B}rt(e){if(this.isConnected||(e=void 0),typeof this.G=="function"){const o=this.ht??globalThis;let t=w.get(o);t===void 0&&(t=new WeakMap,w.set(o,t)),t.get(this.G)!==void 0&&this.G.call(this.ht,void 0),t.set(this.G,e),e!==void 0&&this.G.call(this.ht,e)}else this.G.value=e}get lt(){return typeof this.G=="function"?w.get(this.ht??globalThis)?.get(this.G):this.G?.value}disconnected(){this.lt===this.ct&&this.rt(void 0)}reconnected(){this.rt(this.ct)}}),ee={title:"Welcome",tags:["autodocs","!dev"],parameters:{layout:"fullscreen",controls:{disable:!0},actions:{disable:!0},options:{showPanel:!1},docs:{page:()=>j.createElement("div",{className:"welcome-docs"},j.createElement(U))}}},$=[[13,52,158],[19,183,158],[99,43,176],[95,233,208],[240,67,62],[83,36,148]],d=(e,o)=>e+Math.random()*(o-e),M=e=>e[Math.floor(Math.random()*e.length)];function I(e,o){if(matchMedia("(prefers-reduced-motion: reduce)").matches)return;const t=e.getContext("2d"),l=Array.from({length:3},()=>({x:0,y:0,rgb:M($),opacity:0,radius:d(250,350)}));let h=null;function O(){const s=5*devicePixelRatio,n=Object.assign(document.createElement("canvas"),{width:s,height:s}),r=n.getContext("2d");r.fillStyle="#000",r.arc(s/2,s/2,1.6*devicePixelRatio,0,Math.PI*2),r.fill(),h=t.createPattern(n,"repeat")}function R(){const{width:s,height:n}=e.getBoundingClientRect();e.width=s*devicePixelRatio,e.height=n*devicePixelRatio,t.setTransform(devicePixelRatio,0,0,devicePixelRatio,0,0),O()}R(),addEventListener("resize",R);const a=o?l[0]:null;a&&(a.rgb=M($),a.radius=300),(function s(){if(!e.isConnected)return;const n=e.width/devicePixelRatio,r=e.height/devicePixelRatio;t.clearRect(0,0,n,r),a&&o&&(o.active?(a.x+=(o.tx-a.x)*.06,a.y+=(o.ty-a.y)*.06,a.opacity+=(.35-a.opacity)*.08):a.opacity+=(0-a.opacity)*.04);for(const i of l){if(i.opacity<=0)continue;const[u,p,b]=i.rgb,c=t.createRadialGradient(i.x,i.y,0,i.x,i.y,i.radius);c.addColorStop(0,`rgba(${u},${p},${b},${i.opacity})`),c.addColorStop(1,`rgba(${u},${p},${b},0)`),t.fillStyle=c,t.fillRect(i.x-i.radius,i.y-i.radius,i.radius*2,i.radius*2)}h&&(t.globalCompositeOperation="destination-in",t.fillStyle=h,t.fillRect(0,0,n,r),t.globalCompositeOperation="source-over"),requestAnimationFrame(s)})();function S(s){if(!e.isConnected)return;const{width:n,height:r}=e.getBoundingClientRect(),i=300,u=m=>m<2?{x:d(.15*n,.85*n),y:m===0?-i:r+i}:{x:m===2?-i:n+i,y:d(.15*r,.85*r)},p=Math.floor(Math.random()*4),b=(p+(Math.random()<.5?2:[1,3][Math.floor(Math.random()*2)]))%4,c=u(p),z=u(b),y=z.x-c.x,x=z.y-c.y,E=Math.hypot(y,x)||1,Y=Math.min(n,r)*d(.15,.35),D=d(1.2,2.2);s.rgb=M($),s.radius=d(250,350);let P=null;const F=d(6e3,7500);(function m(G){if(!e.isConnected)return;P??=G;const f=Math.min((G-P)/F,1),L=.5-.5*Math.cos(f*Math.PI),T=Math.sin(f*D*Math.PI)*Y;s.x=c.x+y*L+-x/E*T,s.y=c.y+x*L+y/E*T,s.opacity=.35*Math.min(f/.2,1)*Math.min((1-f)/.2,1),f<1?requestAnimationFrame(m):s.opacity=0})(performance.now())}(o?l.slice(1):l).forEach((s,n)=>setTimeout(()=>{S(s),setInterval(()=>e.isConnected&&S(s),7500)},1e3+n*2500))}const q="position:absolute;inset:0;width:100%;height:100%;pointer-events:none;",N=C(),W=C(),H=C(),v={active:!1,tx:0,ty:0},g={render:()=>(queueMicrotask(()=>{const e=N.value;e&&!e.dataset.init&&(e.dataset.init="1",I(e));const o=W.value;o&&!o.dataset.init&&(o.dataset.init="1",I(o,v));const t=H.value;t&&!t.dataset.init&&(t.dataset.init="1",t.addEventListener("mousemove",l=>{const h=t.getBoundingClientRect();v.tx=l.clientX-h.left,v.ty=l.clientY-h.top,v.active=!0}),t.addEventListener("mouseleave",()=>{v.active=!1}))}),A`
|
|
2
2
|
<div
|
|
3
3
|
${k(H)}
|
|
4
4
|
style="
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{g as h,x as l}from"./iframe-
|
|
1
|
+
import{g as h,x as l}from"./iframe-DNJdsh5L.js";import{o as m}from"./style-map-BZ07XihX.js";import"./preload-helper-PPVm8Dsz.js";const{events:y,args:w,argTypes:a}=h("btu-widget"),$={title:"Components/Widget",component:"btu-widget",tags:["autodocs"],parameters:{docs:{subtitle:"btu-widget",description:{component:`
|
|
2
2
|
<h3>When to use:</h3>
|
|
3
3
|
<ul>
|
|
4
4
|
<li>To display content in a structured widget layout</li>
|