@brightspot/ui 1.10.0 → 3.0.0

package/dist/storybook/assets/{LinearProgress.stories-C7IdnJd3.js → LinearProgress.stories-BGxPZuni.js}

@@ -1,11 +1,11 @@
-import{g as D,E as h,x as T}from"./iframe-BqvwP3or.js";import{o as A}from"./style-map-CBrSnxRe.js";import"./preload-helper-PPVm8Dsz.js";const{events:V,args:P,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:`
+import{g as D,E as h,x as T}from"./iframe-Sf9RHZFu.js";import{o as A}from"./style-map-B99QiqCo.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:`
 <h3>When to use:</h3>
 <ul>
   <li>To show progress of a specific task with known completion percentage</li>
   <li>For file uploads, downloads, or processing steps</li>
   <li>When progress needs to be communicated numerically</li>
 </ul>
-        `}},actions:{handles:V},controls:{expanded:!0}},args:{...P,color:"primary",thickness:8,progress:0,"initial-animation":!0},argTypes:{...g,"--progress-color":{table:{disable:!0}},"--track-color":{table:{disable:!0}},size:{table:{disable:!0}},customSize:{table:{disable:!0}},color:{...g.color,control:{type:"select"},options:["black","white","primary","teal","gray","purple","rose","error","warning","success"],description:"Theme color of the progress bar.",table:{category:"Attributes",defaultValue:{summary:"primary"}}},thickness:{...g.thickness,control:{type:"number",min:1,max:10},description:"Height of the progress bar.",table:{category:"Attributes",defaultValue:{summary:"8"}}},progress:{...g.progress,control:{type:"range",min:0,max:100,step:1},description:"Progress value between 0 and 100.",table:{category:"Attributes",defaultValue:{summary:"0"}}},label:{...g.label,control:{type:"text"},description:"Optional label text to display to the right of the progress bar.",table:{category:"Attributes",defaultValue:{summary:"undefined"}}},"initial-animation":{...g["initial-animation"],control:{type:"boolean"},description:"Whether to animate progress from 0 to target value when component first becomes visible in viewport. Defaults to true.",table:{category:"Attributes",defaultValue:{summary:"true"}}},ariaLabel:{...g.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:{...g.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:{...g.ariaValueText,control:{type:"text"},description:"Optional aria-valuetext attribute for screen readers. Provides human-readable text alternative for the progress value.",table:{category:"Attributes",defaultValue:{summary:"undefined"}}},completionAnnouncement:{...g.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 bar 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"}}},render:e=>{const t={};return e.customColor&&(t["--progress-color"]=e.customColor),e.customTrackColor&&(t["--track-color"]=e.customTrackColor),T`<btu-linear-progress
+        `}},actions:{handles:V},controls:{expanded:!0}},args:{...k,color:"primary",thickness:8,progress:0,"initial-animation":!0},argTypes:{...g,"--progress-color":{table:{disable:!0}},"--track-color":{table:{disable:!0}},size:{table:{disable:!0}},customSize:{table:{disable:!0}},color:{...g.color,control:{type:"select"},options:["black","white","primary","teal","gray","purple","rose","error","warning","success"],description:"Theme color of the progress bar.",table:{category:"Attributes",defaultValue:{summary:"primary"}}},thickness:{...g.thickness,control:{type:"number",min:1,max:10},description:"Height of the progress bar.",table:{category:"Attributes",defaultValue:{summary:"8"}}},progress:{...g.progress,control:{type:"range",min:0,max:100,step:1},description:"Progress value between 0 and 100.",table:{category:"Attributes",defaultValue:{summary:"0"}}},label:{...g.label,control:{type:"text"},description:"Optional label text to display to the right of the progress bar.",table:{category:"Attributes",defaultValue:{summary:"undefined"}}},"initial-animation":{...g["initial-animation"],control:{type:"boolean"},description:"Whether to animate progress from 0 to target value when component first becomes visible in viewport. Defaults to true.",table:{category:"Attributes",defaultValue:{summary:"true"}}},ariaLabel:{...g.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:{...g.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:{...g.ariaValueText,control:{type:"text"},description:"Optional aria-valuetext attribute for screen readers. Provides human-readable text alternative for the progress value.",table:{category:"Attributes",defaultValue:{summary:"undefined"}}},completionAnnouncement:{...g.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 bar 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"}}},render:e=>{const t={};return e.customColor&&(t["--progress-color"]=e.customColor),e.customTrackColor&&(t["--track-color"]=e.customTrackColor),T`<btu-linear-progress
       color="${e.color}"
       thickness="${e.thickness}"
       progress="${e.progress}"
@@ -26,7 +26,7 @@ Animated progress bars.
 
 Top: continuous percentage increments. 
 
-Bottom: step-based progress with 20% increments every 3 seconds and \`aria-valuetext\` for accessibility (e.g., "3 of 5 files uploaded").`}}}},y={render:()=>{let e;const t=()=>{const n=document.createElement("div"),o=document.createElement("div");o.className="flex flex-col mb-4 items-center";const s=document.createElement("h3");s.className="text-lg font-semibold mb-2",s.textContent="Scroll within the container to see progress bars animate in";const r=document.createElement("button");r.textContent="Reset",r.className="px-4 py-2 bg-primary-500 text-white rounded hover:bg-primary-600",r.onclick=()=>{e.innerHTML="",e.appendChild(t())},o.appendChild(s),o.appendChild(r),n.appendChild(o);const l=document.createElement("div");l.style.height="150px",l.style.overflowY="auto",l.style.border="1px solid #e5e7eb",l.style.borderRadius="4px",l.style.padding="1rem";const a=document.createElement("div");a.className="flex flex-col gap-8",a.style.minHeight="150vh";const i=document.createElement("btu-linear-progress");i.progress=30,i.color="primary",i.label="30%",a.appendChild(i);const p=document.createElement("div");p.style.marginTop="30vh";const d=document.createElement("btu-linear-progress");d.progress=50,d.color="teal",d.label="50%",p.appendChild(d),a.appendChild(p);const b=document.createElement("div");b.style.marginTop="30vh";const m=document.createElement("btu-linear-progress");m.progress=75,m.color="purple",m.label="75%",b.appendChild(m),a.appendChild(b);const u=document.createElement("div");u.style.marginTop="30vh";const c=document.createElement("btu-linear-progress");return c.progress=100,c.color="success",c.label="100%",u.appendChild(c),a.appendChild(u),l.appendChild(a),n.appendChild(l),n};return e=t(),e},parameters:{docs:{description:{story:'Demonstrates the viewport animation - progress bars animate from 0 to their target value when they become visible. Scroll within the container to see each progress bar animate in. Click "Reset" to restart.'}}}},C={render:()=>{const e=document.createElement("div");e.className="flex flex-col items-start gap-4";let t=0;const n=document.createElement("btu-linear-progress");n.progress=0,n.color="primary",n.label="0%";const o=document.createElement("div");o.className="text-sm text-gray-600",o.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)",n.addEventListener("btu-progress-complete",()=>{o.textContent="Status: Complete! ✓",o.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 r=!1;const l=setInterval(()=>{r||(t=t+1,n.progress=t,n.label=`${t}%`,t<100&&(o.textContent="Status: In Progress...",o.className="text-sm text-gray-600"),t===100&&(r=!0,setTimeout(()=>{t=0,r=!1},3e3)))},50),a=new MutationObserver(i=>{i.forEach(p=>{p.removedNodes.forEach(d=>{(d===e||d.contains(e))&&(clearInterval(l),a.disconnect())})})});return setTimeout(()=>{e.parentNode&&a.observe(e.parentNode,{childList:!0})},0),e.appendChild(n),e.appendChild(o),e.appendChild(s),e},parameters:{docs:{description:{story:"Demonstrates the btu-progress-complete event that fires when 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 n=document.createElement("h4");n.className="text-sm font-semibold text-gray-900",n.textContent="Progress bar with aria-label";const o=document.createElement("p");o.className="text-xs text-gray-600 mb-2",o.textContent='Screen readers announce: "Page loading progress"';const s=document.createElement("btu-linear-progress");s.progress=40,s.color="primary",s.ariaLabel="Page loading progress",t.appendChild(n),t.appendChild(o),t.appendChild(s);const r=document.createElement("div");r.className="flex flex-col gap-2";const l=document.createElement("h4");l.className="text-sm font-semibold text-gray-900",l.textContent="With custom aria-valuetext";const a=document.createElement("p");a.className="text-xs text-gray-600 mb-2",a.textContent='Screen readers announce: "File upload progress, 3 of 5 files uploaded"';const i=document.createElement("btu-linear-progress");i.progress=60,i.color="teal",i.label="3/5 files",i.ariaLabel="File upload progress",i.ariaValueText="3 of 5 files uploaded",r.appendChild(l),r.appendChild(a),r.appendChild(i);const p=document.createElement("div");p.className="flex flex-col gap-2";const d=document.createElement("h4");d.className="text-sm font-semibold text-gray-900",d.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: "Installation complete!"';const m=document.createElement("div");m.className="text-xs text-gray-500 mt-2",m.textContent="Announcement status: (waiting...)";let u=0;const c=document.createElement("btu-linear-progress");c.progress=0,c.color="success",c.label="0%",c.ariaLabel="Installation progress",c.completionAnnouncement="Installation complete!",c.addEventListener("btu-progress-complete",()=>{m.textContent='Announcement status: "Installation complete!" announced at '+new Date().toLocaleTimeString(),m.className="text-xs text-green-600 mt-2"});const w=setInterval(()=>{u<100?(u+=2,c.progress=u,c.label=`${u}%`,c.ariaValueText=`${u} percent complete`):clearInterval(w)},100);p.appendChild(d),p.appendChild(b),p.appendChild(c),p.appendChild(m);const N=new MutationObserver(S=>{S.forEach(I=>{I.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(r),e.appendChild(p),e},parameters:{docs:{description:{story:`
+Bottom: step-based progress with 20% increments every 3 seconds and \`aria-valuetext\` for accessibility (e.g., "3 of 5 files uploaded").`}}}},y={render:()=>{let e;const t=()=>{const n=document.createElement("div"),o=document.createElement("div");o.className="flex flex-col mb-4 items-center";const s=document.createElement("h3");s.className="text-lg font-semibold mb-2",s.textContent="Scroll within the container to see progress bars animate in";const r=document.createElement("button");r.textContent="Reset",r.className="px-4 py-2 bg-primary-500 text-white rounded hover:bg-primary-600",r.onclick=()=>{e.innerHTML="",e.appendChild(t())},o.appendChild(s),o.appendChild(r),n.appendChild(o);const l=document.createElement("div");l.style.height="150px",l.style.overflowY="auto",l.style.border="1px solid #e5e7eb",l.style.borderRadius="4px",l.style.padding="1rem";const a=document.createElement("div");a.className="flex flex-col gap-8",a.style.minHeight="150vh";const i=document.createElement("btu-linear-progress");i.progress=30,i.color="primary",i.label="30%",a.appendChild(i);const p=document.createElement("div");p.style.marginTop="30vh";const d=document.createElement("btu-linear-progress");d.progress=50,d.color="teal",d.label="50%",p.appendChild(d),a.appendChild(p);const b=document.createElement("div");b.style.marginTop="30vh";const m=document.createElement("btu-linear-progress");m.progress=75,m.color="purple",m.label="75%",b.appendChild(m),a.appendChild(b);const u=document.createElement("div");u.style.marginTop="30vh";const c=document.createElement("btu-linear-progress");return c.progress=100,c.color="success",c.label="100%",u.appendChild(c),a.appendChild(u),l.appendChild(a),n.appendChild(l),n};return e=t(),e},parameters:{docs:{description:{story:'Demonstrates the viewport animation - progress bars animate from 0 to their target value when they become visible. Scroll within the container to see each progress bar animate in. Click "Reset" to restart.'}}}},C={render:()=>{const e=document.createElement("div");e.className="flex flex-col items-start gap-4";let t=0;const n=document.createElement("btu-linear-progress");n.progress=0,n.color="primary",n.label="0%";const o=document.createElement("div");o.className="text-sm text-gray-600",o.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)",n.addEventListener("btu-linear-progress-complete",()=>{o.textContent="Status: Complete! ✓",o.className="text-sm text-green-600 font-semibold",s.textContent=`Event Log: btu-linear-progress-complete fired at ${new Date().toLocaleTimeString()}`,s.className="text-xs text-green-600 mt-2"});let r=!1;const l=setInterval(()=>{r||(t=t+1,n.progress=t,n.label=`${t}%`,t<100&&(o.textContent="Status: In Progress...",o.className="text-sm text-gray-600"),t===100&&(r=!0,setTimeout(()=>{t=0,r=!1},3e3)))},50),a=new MutationObserver(i=>{i.forEach(p=>{p.removedNodes.forEach(d=>{(d===e||d.contains(e))&&(clearInterval(l),a.disconnect())})})});return setTimeout(()=>{e.parentNode&&a.observe(e.parentNode,{childList:!0})},0),e.appendChild(n),e.appendChild(o),e.appendChild(s),e},parameters:{docs:{description:{story:"Demonstrates the btu-linear-progress-complete event that fires when 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 n=document.createElement("h4");n.className="text-sm font-semibold text-gray-900",n.textContent="Progress bar with aria-label";const o=document.createElement("p");o.className="text-xs text-gray-600 mb-2",o.textContent='Screen readers announce: "Page loading progress"';const s=document.createElement("btu-linear-progress");s.progress=40,s.color="primary",s.ariaLabel="Page loading progress",t.appendChild(n),t.appendChild(o),t.appendChild(s);const r=document.createElement("div");r.className="flex flex-col gap-2";const l=document.createElement("h4");l.className="text-sm font-semibold text-gray-900",l.textContent="With custom aria-valuetext";const a=document.createElement("p");a.className="text-xs text-gray-600 mb-2",a.textContent='Screen readers announce: "File upload progress, 3 of 5 files uploaded"';const i=document.createElement("btu-linear-progress");i.progress=60,i.color="teal",i.label="3/5 files",i.ariaLabel="File upload progress",i.ariaValueText="3 of 5 files uploaded",r.appendChild(l),r.appendChild(a),r.appendChild(i);const p=document.createElement("div");p.className="flex flex-col gap-2";const d=document.createElement("h4");d.className="text-sm font-semibold text-gray-900",d.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: "Installation complete!"';const m=document.createElement("div");m.className="text-xs text-gray-500 mt-2",m.textContent="Announcement status: (waiting...)";let u=0;const c=document.createElement("btu-linear-progress");c.progress=0,c.color="success",c.label="0%",c.ariaLabel="Installation progress",c.completionAnnouncement="Installation complete!",c.addEventListener("btu-linear-progress-complete",()=>{m.textContent='Announcement status: "Installation complete!" announced at '+new Date().toLocaleTimeString(),m.className="text-xs text-green-600 mt-2"});const w=setInterval(()=>{u<100?(u+=2,c.progress=u,c.label=`${u}%`,c.ariaValueText=`${u} percent complete`):clearInterval(w)},100);p.appendChild(d),p.appendChild(b),p.appendChild(c),p.appendChild(m);const N=new MutationObserver(I=>{I.forEach(S=>{S.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(r),e.appendChild(p),e},parameters:{docs:{description:{story:`
 Demonstrates accessibility best practices for screen reader users:
 
 **1. Basic usage:** Set \`ariaLabel\` to describe what's progressing.
@@ -222,10 +222,10 @@ Bottom: step-based progress with 20% increments every 3 seconds and \\\`aria-val
     const eventLog = document.createElement('div');
     eventLog.className = 'text-xs text-gray-500 mt-2';
     eventLog.textContent = 'Event Log: (waiting for completion)';
-    progressEl.addEventListener('btu-progress-complete', () => {
+    progressEl.addEventListener('btu-linear-progress-complete', () => {
       statusDiv.textContent = 'Status: Complete! ✓';
       statusDiv.className = 'text-sm text-green-600 font-semibold';
-      eventLog.textContent = \`Event Log: btu-progress-complete fired at \${new Date().toLocaleTimeString()}\`;
+      eventLog.textContent = \`Event Log: btu-linear-progress-complete fired at \${new Date().toLocaleTimeString()}\`;
       eventLog.className = 'text-xs text-green-600 mt-2';
     });
     let isWaiting = false;
@@ -273,7 +273,7 @@ Bottom: step-based progress with 20% increments every 3 seconds and \\\`aria-val
   parameters: {
     docs: {
       description: {
-        story: 'Demonstrates the btu-progress-complete event that fires when progress reaches 100%. The event fires each time progress completes a cycle.'
+        story: 'Demonstrates the btu-linear-progress-complete event that fires when progress reaches 100%. The event fires each time progress completes a cycle.'
       }
     }
   }
@@ -337,7 +337,7 @@ Bottom: step-based progress with 20% increments every 3 seconds and \\\`aria-val
     progress3.label = '0%';
     progress3.ariaLabel = 'Installation progress';
     progress3.completionAnnouncement = 'Installation complete!';
-    progress3.addEventListener('btu-progress-complete', () => {
+    progress3.addEventListener('btu-linear-progress-complete', () => {
       announceLog.textContent = 'Announcement status: "Installation complete!" announced at ' + new Date().toLocaleTimeString();
       announceLog.className = 'text-xs text-green-600 mt-2';
     });

package/dist/storybook/assets/Pagination.stories-z3Zq8b4f.js

@@ -0,0 +1,252 @@
+import{g as m,x as u}from"./iframe-Sf9RHZFu.js";import{o as g}from"./style-map-B99QiqCo.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:`
+<h3>When to use:</h3>
+<ul>
+  <li>To navigate through large sets of data</li>
+  <li>For search results, tables, and lists</li>
+  <li>In widgets and calendar views</li>
+</ul>
+
+<h3>Variants:</h3>
+<ul>
+  <li><strong>Widget</strong> (default): Built-in page size dropdown + total display + navigation</li>
+  <li><strong>Search</strong>: With page jumper dropdown (auto-managed by Pagination)</li>
+  <li><strong>Widget Small</strong>: Without first/last page buttons</li>
+  <li><strong>Calendar</strong>: Custom page-size slot (consumer-managed) + jumper slot</li>
+</ul>
+
+<h3>Page size modes:</h3>
+<ul>
+  <li><strong>Built-in</strong>: No <code>slot="page-size"</code> — Pagination renders its own <code>btu-dropdown</code> from <code>page-size-options</code> and manages everything automatically.</li>
+  <li><strong>Custom</strong>: Provide <code>slot="page-size"</code> — built-in dropdown is suppressed. Consumer owns all behavior (events, label sync, etc.).</li>
+</ul>
+        `}},actions:{handles:b},controls:{expanded:!0}},args:{...h,"total-items":200,"boundary-buttons":!0,"hide-on-single-page":!0,"page-size-changer":!0},argTypes:{...y,"--pagination-color-background":{table:{disable:!0}},"--pagination-color-foreground":{table:{disable:!0}},customBackgroundColor:{name:"--pagination-color-background",control:{type:"color"},description:"Custom background color for buttons and dropdowns",table:{category:"css properties"}},customForegroundColor:{name:"--pagination-color-foreground",control:{type:"color"},description:"Custom foreground (text/icon) color",table:{category:"css properties"}}},render:e=>u`
+    <btu-pagination
+      total-items="${e["total-items"]??200}"
+      page="${e.page??1}"
+      page-size="${e["page-size"]??0}"
+      page-size-options="${e["page-size-options"]??"10, 20, 50"}"
+      ?disabled="${e.disabled}"
+      ?loading="${e.loading}"
+      .hideOnSinglePage=${e["hide-on-single-page"]??!0}
+      .pageSizeChanger=${e["page-size-changer"]??!0}
+      .boundaryButtons=${e["boundary-buttons"]??!0}
+      .pageJumper=${e["page-jumper"]??!1}
+      ?hide-total-count=${e["hide-total-count"]}
+      style=${g(c(e))}
+    ></btu-pagination>
+  `},a={args:{},parameters:{docs:{description:{story:"Default Widget variant with page size selector, total display, and full navigation controls."}}}},o={args:{"total-items":500,"page-size-options":"10, 25, 50, 100","page-jumper":!0},parameters:{docs:{description:{story:'Search variant with `page-jumper` enabled. The built-in dropdown renders "Page 1" through "Page N" and updates automatically when page size or total items change.'}}}},s={args:{"total-items":100,"boundary-buttons":!1},parameters:{docs:{description:{story:"Compact widget variant without first/last page buttons. Suitable for tight spaces."}}}},i={args:{"total-items":52},render:e=>u`
+    <btu-pagination
+      total-items="${e["total-items"]??52}"
+      page="${e.page??1}"
+      page-size="1"
+      ?disabled="${e.disabled}"
+      ?loading="${e.loading}"
+      .hideOnSinglePage=${e["hide-on-single-page"]??!0}
+      .pageSizeChanger=${!1}
+      .boundaryButtons=${e["boundary-buttons"]??!0}
+      ?hide-total-count=${e["hide-total-count"]}
+      style=${g(c(e))}
+    >
+      <btu-dropdown
+        slot="page-size"
+        label="Week"
+        variant="secondary"
+        size="sm"
+        aria-label="View type"
+        @btu-dropdown-item-select=${t=>{t.currentTarget.label=t.detail.label}}
+      >
+        <btu-dropdown-menu>
+          <btu-dropdown-item label="Week" value="week" selected></btu-dropdown-item>
+          <btu-dropdown-item label="Month" value="month"></btu-dropdown-item>
+        </btu-dropdown-menu>
+      </btu-dropdown>
+      <button
+        slot="jumper"
+        class="btu-button-sm btu-button"
+        @click=${t=>{const n=t.target.closest("btu-pagination");n&&(n.page=1)}}
+      >
+        Today
+      </button>
+    </btu-pagination>
+  `,parameters:{docs:{description:{story:'Calendar variant using `slot="page-size"` with a consumer-managed `btu-dropdown` for week/month selection and `slot="jumper"` for a Today button. The page-size dropdown is fully consumer-owned — Pagination does not manage its events or label.'}}}},r={args:{"total-items":200,loading:!0},parameters:{docs:{description:{story:"Loading state shows a spinner and dims the navigation controls. The `aria-busy` attribute is set on the live region."}}}},l={args:{"total-items":200,disabled:!0,page:3},parameters:{docs:{description:{story:"Disabled state prevents all interaction. All buttons and dropdowns receive the native `disabled` attribute."}}}},d={render:()=>{const e=t=>{const n=t.target;n.loading=!0,setTimeout(()=>{n.loading=!1},1e3)};return u`
+      <div class="flex flex-col gap-4">
+        <div class="flex items-center gap-2">
+          <label for="total-input" class="text-sm font-medium">Total Items:</label>
+          <input
+            id="total-input"
+            type="number"
+            value="200"
+            min="0"
+            class="w-24 rounded border px-2 py-1 text-sm"
+            @input=${t=>{const n=t.target,p=n.closest(".flex.flex-col")?.querySelector("btu-pagination");p&&(p.totalItems=parseInt(n.value,10)||0)}}
+          />
+        </div>
+        <btu-pagination
+          total-items="200"
+          @btu-pagination-change=${e}
+          @btu-pagination-page-size-change=${e}
+        ></btu-pagination>
+      </div>
+    `},parameters:{docs:{description:{story:"Interactive example demonstrating dynamic `totalItems` changes at runtime. Navigation triggers a simulated 1s loading state."}}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default Widget variant with page size selector, total display, and full navigation controls.'
+      }
+    }
+  }
+}`,...a.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  args: {
+    'total-items': 500,
+    'page-size-options': '10, 25, 50, 100',
+    'page-jumper': true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Search variant with \`page-jumper\` enabled. The built-in dropdown renders "Page 1" through "Page N" and updates automatically when page size or total items change.'
+      }
+    }
+  }
+}`,...o.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  args: {
+    'total-items': 100,
+    'boundary-buttons': false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Compact widget variant without first/last page buttons. Suitable for tight spaces.'
+      }
+    }
+  }
+}`,...s.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  args: {
+    'total-items': 52
+  },
+  render: args => html\`
+    <btu-pagination
+      total-items="\${args['total-items'] ?? 52}"
+      page="\${args.page ?? 1}"
+      page-size="1"
+      ?disabled="\${args.disabled}"
+      ?loading="\${args.loading}"
+      .hideOnSinglePage=\${args['hide-on-single-page'] ?? true}
+      .pageSizeChanger=\${false}
+      .boundaryButtons=\${args['boundary-buttons'] ?? true}
+      ?hide-total-count=\${args['hide-total-count']}
+      style=\${styleMap(paginationStyles(args))}
+    >
+      <btu-dropdown
+        slot="page-size"
+        label="Week"
+        variant="secondary"
+        size="sm"
+        aria-label="View type"
+        @btu-dropdown-item-select=\${(e: CustomEvent<{
+    label: string;
+    value: string;
+    selected: boolean;
+  }>) => {
+    ;
+    (e.currentTarget as HTMLElement & {
+      label: string;
+    }).label = e.detail.label;
+  }}
+      >
+        <btu-dropdown-menu>
+          <btu-dropdown-item label="Week" value="week" selected></btu-dropdown-item>
+          <btu-dropdown-item label="Month" value="month"></btu-dropdown-item>
+        </btu-dropdown-menu>
+      </btu-dropdown>
+      <button
+        slot="jumper"
+        class="btu-button-sm btu-button"
+        @click=\${(e: Event) => {
+    const pagination = (e.target as HTMLElement).closest('btu-pagination');
+    if (pagination) pagination.page = 1;
+  }}
+      >
+        Today
+      </button>
+    </btu-pagination>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Calendar variant using \`slot="page-size"\` with a consumer-managed \`btu-dropdown\` for week/month selection and \`slot="jumper"\` for a Today button. The page-size dropdown is fully consumer-owned — Pagination does not manage its events or label.'
+      }
+    }
+  }
+}`,...i.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  args: {
+    'total-items': 200,
+    loading: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Loading state shows a spinner and dims the navigation controls. The \`aria-busy\` attribute is set on the live region.'
+      }
+    }
+  }
+}`,...r.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  args: {
+    'total-items': 200,
+    disabled: true,
+    page: 3
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Disabled state prevents all interaction. All buttons and dropdowns receive the native \`disabled\` attribute.'
+      }
+    }
+  }
+}`,...l.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const simulateLoading = (e: CustomEvent) => {
+      const pagination = e.target as HTMLElement & {
+        loading: boolean;
+      };
+      pagination.loading = true;
+      setTimeout(() => {
+        pagination.loading = false;
+      }, 1000);
+    };
+    return html\`
+      <div class="flex flex-col gap-4">
+        <div class="flex items-center gap-2">
+          <label for="total-input" class="text-sm font-medium">Total Items:</label>
+          <input
+            id="total-input"
+            type="number"
+            value="200"
+            min="0"
+            class="w-24 rounded border px-2 py-1 text-sm"
+            @input=\${(e: Event) => {
+      const input = e.target as HTMLInputElement;
+      const pagination = (input.closest('.flex.flex-col') as HTMLElement)?.querySelector('btu-pagination') as HTMLElement & {
+        totalItems: number;
+      };
+      if (pagination) pagination.totalItems = parseInt(input.value, 10) || 0;
+    }}
+          />
+        </div>
+        <btu-pagination
+          total-items="200"
+          @btu-pagination-change=\${simulateLoading}
+          @btu-pagination-page-size-change=\${simulateLoading}
+        ></btu-pagination>
+      </div>
+    \`;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Interactive example demonstrating dynamic \`totalItems\` changes at runtime. Navigation triggers a simulated 1s loading state.'
+      }
+    }
+  }
+}`,...d.parameters?.docs?.source}}};const z=["Default","Search","WidgetSmall","Calendar","Loading","Disabled","DynamicTotal"];export{i as Calendar,a as Default,l as Disabled,d as DynamicTotal,r as Loading,o as Search,s as WidgetSmall,z as __namedExportsOrder,$ as default};

package/dist/storybook/assets/{Popover.stories-Ca1F-wrI.js → Popover.stories-C9GxWcax.js}

@@ -1,4 +1,4 @@
-import{g as a,x as r}from"./iframe-BqvwP3or.js";import{o as c}from"./if-defined-BZFPaJjl.js";import{o as d}from"./style-map-CBrSnxRe.js";import"./preload-helper-PPVm8Dsz.js";const{events:u,args:g,argTypes:e}=a("btu-popover"),y={title:"Components/Popover",component:"btu-popover",tags:["autodocs"],parameters:{docs:{subtitle:"Rich interactive content anchored to a trigger element",description:{component:`
+import{g as p,x as l}from"./iframe-Sf9RHZFu.js";import{o as a}from"./if-defined-CgfCxQoV.js";import{o as c}from"./style-map-B99QiqCo.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:`
 \`btu-popover\` displays rich interactive content anchored to a trigger element using CSS anchor positioning and the native Popover API.
 
 <h3>When to use:</h3>
@@ -24,18 +24,18 @@ import{g as a,x as r}from"./iframe-BqvwP3or.js";import{o as c}from"./if-defined-
   <li>Focus restored to trigger on close</li>
   <li>Add <code>autofocus</code> to an element inside <code>slot="content"</code> for auto-focus on open</li>
 </ul>
-        `}},actions:{handles:u},controls:{expanded:!0}},args:{...g,position:"bottom",trigger:"click",delay:300,open:!1},argTypes:{...e,position:{...e.position,control:{type:"select"},options:["top","bottom","left","right"]},trigger:{...e.trigger,control:{type:"select"},options:["click","hover","focus"]},delay:{...e.delay,control:{type:"number"},description:"Show delay in ms (hover trigger only)"},offset:{...e.offset,control:{type:"select"},options:["sm","md","lg","xl"],description:"Gap between trigger and popover (sm=4px, md=8px, lg=12px, xl=16px)"},open:{...e.open,control:{type:"boolean"},description:"Programmatic open/close (reflected)"},customBg:{name:"--popover-color-background",description:"Background color",control:{type:"color"},table:{category:"CSS Properties",defaultValue:{summary:"white"}}},customTitleColor:{name:"--popover-color-title",description:"Title text color",control:{type:"color"},table:{category:"CSS Properties",defaultValue:{summary:"oklch(var(--btu-theme-gray-900))"}}},customContentColor:{name:"--popover-color-content",description:"Content text color",control:{type:"color"},table:{category:"CSS Properties",defaultValue:{summary:"oklch(var(--btu-theme-gray-900))"}}},customRadius:{name:"--popover-border-radius",description:"Border radius",control:{type:"select"},options:["0px","0.125rem","0.25rem","0.375rem","0.5rem","0.75rem","1rem","1.5rem","9999px"],labels:{"0px":"none (0px)","0.125rem":"sm (0.125rem)","0.25rem":"DEFAULT (0.25rem)","0.375rem":"md (0.375rem)","0.5rem":"lg (0.5rem)","0.75rem":"xl (0.75rem)","1rem":"2xl (1rem)","1.5rem":"3xl (1.5rem)","9999px":"full (9999px)"},table:{category:"CSS Properties",defaultValue:{summary:"0.5rem (lg)"}}}},render:o=>{const t={};return o.customBg&&(t["--popover-color-background"]=o.customBg),o.customTitleColor&&(t["--popover-color-title"]=o.customTitleColor),o.customContentColor&&(t["--popover-color-content"]=o.customContentColor),o.customRadius&&(t["--popover-border-radius"]=o.customRadius),r`
+        `}},actions:{handles:d},controls:{expanded:!0}},args:{...u,position:"bottom",trigger:"click",delay:300,open:!1},argTypes:{...t,position:{...t.position,control:{type:"select"},options:["top","bottom","left","right"]},trigger:{...t.trigger,control:{type:"select"},options:["click","hover","focus"]},delay:{...t.delay,control:{type:"number"},description:"Show delay in ms (hover trigger only)"},offset:{...t.offset,control:{type:"select"},options:["sm","md","lg","xl"],description:"Gap between trigger and popover (sm=4px, md=8px, lg=12px, xl=16px)"},open:{...t.open,control:{type:"boolean"},description:"Programmatic open/close (reflected)"},customBg:{name:"--popover-color-background",description:"Background color",control:{type:"color"},table:{category:"css properties",defaultValue:{summary:"white"}}},customTitleColor:{name:"--popover-color-title",description:"Title text color",control:{type:"color"},table:{category:"css properties",defaultValue:{summary:"oklch(var(--btu-theme-gray-900))"}}},customContentColor:{name:"--popover-color-content",description:"Content text color",control:{type:"color"},table:{category:"css properties",defaultValue:{summary:"oklch(var(--btu-theme-gray-900))"}}},customRadius:{name:"--popover-border-radius",description:"Border radius",control:{type:"select"},options:["0px","0.125rem","0.25rem","0.375rem","0.5rem","0.75rem","1rem","1.5rem","9999px"],labels:{"0px":"none (0px)","0.125rem":"sm (0.125rem)","0.25rem":"DEFAULT (0.25rem)","0.375rem":"md (0.375rem)","0.5rem":"lg (0.5rem)","0.75rem":"xl (0.75rem)","1rem":"2xl (1rem)","1.5rem":"3xl (1.5rem)","9999px":"full (9999px)"},table:{category:"css properties",defaultValue:{summary:"0.5rem (lg)"}}}},render:o=>{const e={};return o.customBg&&(e["--popover-color-background"]=o.customBg),o.customTitleColor&&(e["--popover-color-title"]=o.customTitleColor),o.customContentColor&&(e["--popover-color-content"]=o.customContentColor),o.customRadius&&(e["--popover-border-radius"]=o.customRadius),l`
       <div style="display: flex; justify-content: center; padding: 6rem 2rem;">
-        <div style=${d(t)}>
+        <div style=${c(e)}>
           <btu-popover
             position="${o.position}"
             trigger="${o.trigger}"
             delay="${o.delay}"
-            offset="${c(o.offset)}"
+            offset="${a(o.offset)}"
             ?no-arrow="${o.noArrow}"
             ?open="${o.open}"
           >
-            <button class="popover-trigger" slot="trigger">
+            <button class="btu-button-gray btu-button-sm btu-button" slot="trigger">
               ${o.trigger==="hover"?"Hover me":o.trigger==="focus"?"Focus me":"Click me"}
             </button>
             <div slot="content">
@@ -48,51 +48,28 @@ import{g as a,x as r}from"./iframe-BqvwP3or.js";import{o as c}from"./if-defined-
           </btu-popover>
         </div>
       </div>
-    `}},p=`
-  .popover-trigger {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.5rem 1rem;
-    border-radius: 0.375rem;
-    background-color: oklch(var(--btu-theme-gray-100));
-    color: oklch(var(--btu-theme-gray-700));
-    font-weight: 500;
-    font-size: 0.875rem;
-    cursor: pointer;
-    user-select: none;
-    border: 1px solid oklch(var(--btu-theme-gray-200));
-  }
-  .popover-trigger:hover {
-    background-color: oklch(var(--btu-theme-gray-200));
-  }
-`,n={args:{noArrow:!1,offset:void 0},decorators:[o=>r`<style>
-          ${p}</style
-        >${o()}`]},i={render:()=>r`
-    <style>
-      ${p}
-    </style>
+    `}},n={args:{noArrow:!1,offset:void 0}},r={render:()=>l`
     <div style="display: flex; gap: 2rem; justify-content: center; padding: 6rem 2rem; flex-wrap: wrap;">
       <btu-popover position="top">
-        <button class="popover-trigger" slot="trigger">Top</button>
+        <button class="btu-button-primary btu-button-sm btu-button" slot="trigger">Top</button>
         <div slot="content">Popover positioned above the trigger</div>
       </btu-popover>
       <btu-popover position="bottom">
-        <button class="popover-trigger" slot="trigger">Bottom</button>
+        <button class="btu-button-primary btu-button-sm btu-button" slot="trigger">Bottom</button>
         <div slot="content">Popover positioned below the trigger</div>
       </btu-popover>
       <btu-popover position="left">
-        <button class="popover-trigger" slot="trigger">Left</button>
+        <button class="btu-button-primary btu-button-sm btu-button" slot="trigger">Left</button>
         <div slot="content">Popover positioned left of the trigger</div>
       </btu-popover>
       <btu-popover position="right">
-        <button class="popover-trigger" slot="trigger">Right</button>
+        <button class="btu-button-primary btu-button-sm btu-button" slot="trigger">Right</button>
         <div slot="content">Popover positioned right of the trigger</div>
       </btu-popover>
     </div>
-  `,parameters:{docs:{description:{story:"Popovers support four positions: `top`, `bottom`, `left`, and `right`. Each auto-flips if constrained by the viewport."}}}},s={render:()=>r`
+  `,parameters:{docs:{description:{story:"Popovers support four positions: `top`, `bottom`, `left`, and `right`. Each auto-flips if constrained by the viewport."}}}},i={render:()=>l`
     <style>
-      ${p} .popover-custom-content {
+      .popover-custom-content {
         display: flex;
         flex-direction: column;
         gap: 12px;
@@ -141,20 +118,20 @@ import{g as a,x as r}from"./iframe-BqvwP3or.js";import{o as c}from"./if-defined-
     </style>
     <div style="display: flex; gap: 2rem; justify-content: center; padding: 6rem 2rem; flex-wrap: wrap;">
       <btu-popover position="bottom">
-        <button class="btu-button btu-button-error" slot="trigger">Delete item</button>
+        <button class="btu-button-error btu-button" slot="trigger">Delete item</button>
         <div slot="content">
           <div class="popover-custom-content">
             <h3>Confirm Delete</h3>
             <p>Are you sure you want to delete this item? This action cannot be undone.</p>
             <div class="actions">
-              <button class="btu-button btu-button-warning btu-button-xs">Cancel</button>
-              <button class="btu-button btu-button-error btu-button-xs btu-button-fill-none">Delete</button>
+              <button class="btu-button-warning btu-button-xs btu-button">Cancel</button>
+              <button class="btu-button-error btu-button-xs btu-button-fill-none btu-button">Delete</button>
             </div>
           </div>
         </div>
       </btu-popover>
       <btu-popover trigger="hover" delay="200" position="bottom">
-        <button class="btu-button btu-button-primary" slot="trigger">Hover for chart data</button>
+        <button class="btu-button-primary btu-button" slot="trigger">Hover for chart data</button>
         <div slot="content">
           <div
             style="font-weight: 500; font-size: 0.75rem; line-height: 1.125rem; color: oklch(var(--btu-theme-gray-900)); margin-bottom: 8px;"
@@ -182,9 +159,9 @@ import{g as a,x as r}from"./iframe-BqvwP3or.js";import{o as c}from"./if-defined-
         </div>
       </btu-popover>
     </div>
-  `,parameters:{docs:{description:{story:"Two examples of rich popover content: a confirmation dialog with action buttons (click trigger), and a chart legend with colored series data (hover trigger)."}}}},l={render:()=>r`
+  `,parameters:{docs:{description:{story:"Two examples of rich popover content: a confirmation dialog with action buttons (click trigger), and a chart legend with colored series data (hover trigger)."}}}},s={render:()=>l`
     <style>
-      ${p} .custom-popover-trigger {
+      .custom-popover-trigger {
         display: inline-flex;
         align-items: center;
         justify-content: center;
@@ -228,30 +205,24 @@ import{g as a,x as r}from"./iframe-BqvwP3or.js";import{o as c}from"./if-defined-
   args: {
     noArrow: false,
     offset: undefined
-  },
-  decorators: [story => html\`<style>
-          \${triggerStyle}</style
-        >\${story()}\`]
-}`,...n.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  }
+}`,...n.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
   render: () => html\`
-    <style>
-      \${triggerStyle}
-    </style>
     <div style="display: flex; gap: 2rem; justify-content: center; padding: 6rem 2rem; flex-wrap: wrap;">
       <btu-popover position="top">
-        <button class="popover-trigger" slot="trigger">Top</button>
+        <button class="btu-button-primary btu-button-sm btu-button" slot="trigger">Top</button>
         <div slot="content">Popover positioned above the trigger</div>
       </btu-popover>
       <btu-popover position="bottom">
-        <button class="popover-trigger" slot="trigger">Bottom</button>
+        <button class="btu-button-primary btu-button-sm btu-button" slot="trigger">Bottom</button>
         <div slot="content">Popover positioned below the trigger</div>
       </btu-popover>
       <btu-popover position="left">
-        <button class="popover-trigger" slot="trigger">Left</button>
+        <button class="btu-button-primary btu-button-sm btu-button" slot="trigger">Left</button>
         <div slot="content">Popover positioned left of the trigger</div>
       </btu-popover>
       <btu-popover position="right">
-        <button class="popover-trigger" slot="trigger">Right</button>
+        <button class="btu-button-primary btu-button-sm btu-button" slot="trigger">Right</button>
         <div slot="content">Popover positioned right of the trigger</div>
       </btu-popover>
     </div>
@@ -263,10 +234,10 @@ import{g as a,x as r}from"./iframe-BqvwP3or.js";import{o as c}from"./if-defined-
       }
     }
   }
-}`,...i.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+}`,...r.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <style>
-      \${triggerStyle} .popover-custom-content {
+      .popover-custom-content {
         display: flex;
         flex-direction: column;
         gap: 12px;
@@ -315,20 +286,20 @@ import{g as a,x as r}from"./iframe-BqvwP3or.js";import{o as c}from"./if-defined-
     </style>
     <div style="display: flex; gap: 2rem; justify-content: center; padding: 6rem 2rem; flex-wrap: wrap;">
       <btu-popover position="bottom">
-        <button class="btu-button btu-button-error" slot="trigger">Delete item</button>
+        <button class="btu-button-error btu-button" slot="trigger">Delete item</button>
         <div slot="content">
           <div class="popover-custom-content">
             <h3>Confirm Delete</h3>
             <p>Are you sure you want to delete this item? This action cannot be undone.</p>
             <div class="actions">
-              <button class="btu-button btu-button-warning btu-button-xs">Cancel</button>
-              <button class="btu-button btu-button-error btu-button-xs btu-button-fill-none">Delete</button>
+              <button class="btu-button-warning btu-button-xs btu-button">Cancel</button>
+              <button class="btu-button-error btu-button-xs btu-button-fill-none btu-button">Delete</button>
             </div>
           </div>
         </div>
       </btu-popover>
       <btu-popover trigger="hover" delay="200" position="bottom">
-        <button class="btu-button btu-button-primary" slot="trigger">Hover for chart data</button>
+        <button class="btu-button-primary btu-button" slot="trigger">Hover for chart data</button>
         <div slot="content">
           <div
             style="font-weight: 500; font-size: 0.75rem; line-height: 1.125rem; color: oklch(var(--btu-theme-gray-900)); margin-bottom: 8px;"
@@ -364,10 +335,10 @@ import{g as a,x as r}from"./iframe-BqvwP3or.js";import{o as c}from"./if-defined-
       }
     }
   }
-}`,...s.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+}`,...i.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <style>
-      \${triggerStyle} .custom-popover-trigger {
+      .custom-popover-trigger {
         display: inline-flex;
         align-items: center;
         justify-content: center;
@@ -420,4 +391,4 @@ import{g as a,x as r}from"./iframe-BqvwP3or.js";import{o as c}from"./if-defined-
       }
     }
   }
-}`,...l.parameters?.docs?.source}}};const f=["Default","Positions","RichContent","AdvancedUsage"];export{l as AdvancedUsage,n as Default,i as Positions,s as RichContent,f as __namedExportsOrder,y as default};
+}`,...s.parameters?.docs?.source}}};const f=["Default","Positions","RichContent","AdvancedUsage"];export{s as AdvancedUsage,n as Default,r as Positions,i as RichContent,f as __namedExportsOrder,h as default};

package/dist/storybook/assets/ReadyMixin-CQw8N6P9.js

@@ -0,0 +1 @@
+import"./iframe-Sf9RHZFu.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};