@brightspot/ui 1.4.0 → 1.5.0

package/dist/storybook/assets/{Events.stories-PBeiuWQn.js → Events.stories-DDmydlh_.js}

@@ -1,4 +1,4 @@
-import{x as d}from"./iframe-lTczLWsL.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:`
+import{x as d}from"./iframe-CcloOV09.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:`
 <h3>EventEmitterMixin Events</h3>
 
 <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>

package/dist/storybook/assets/{Heading.stories-Djkl0MoC.js → Heading.stories-BLGfko-i.js}

@@ -1,3 +1,3 @@
-import{x as s}from"./iframe-lTczLWsL.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:`{
+import{x as s}from"./iframe-CcloOV09.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:`{
   args: {}
 }`,...e.parameters?.docs?.source}}};const n=["Default"];export{e as Default,n as __namedExportsOrder,o as default};

package/dist/storybook/assets/{Icon.stories-Cam1fyud.js → Icon.stories-BHnAGcFF.js}

@@ -1,4 +1,4 @@
-import{g as d,x as r}from"./iframe-lTczLWsL.js";import"./preload-helper-PPVm8Dsz.js";const p="0.508.0",b={version:p},l=b.version,{events:u,args:m,argTypes:t}=d("btu-icon"),g=["xs","sm","md","lg","xl"],x=["ai","error","gray","primary","purple","rose","success","teal","warning"],v={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:`
+import{g as d,x as r}from"./iframe-CcloOV09.js";import"./preload-helper-PPVm8Dsz.js";const p="0.508.0",b={version:p},l=b.version,{events:u,args:m,argTypes:t}=d("btu-icon"),g=["xs","sm","md","lg","xl"],x=["ai","error","gray","primary","purple","rose","success","teal","warning"],v={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:`
 <strong>When to use:</strong>
 <ul>
   <li>To visually reinforce actions, states, or categories</li>

package/dist/storybook/assets/{LinearProgress.stories-BDNoYIJu.js → LinearProgress.stories-Dx26a0P_.js}

@@ -1,4 +1,4 @@
-import{g as I,E as h,x as T}from"./iframe-lTczLWsL.js";import"./preload-helper-PPVm8Dsz.js";const{events:D,args:V,argTypes:g}=I("btu-linear-progress"),k={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 I,E as h,x as T}from"./iframe-CcloOV09.js";import"./preload-helper-PPVm8Dsz.js";const{events:D,args:V,argTypes:g}=I("btu-linear-progress"),k={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>

package/dist/storybook/assets/Popover.stories-CbqpY6YR.js

@@ -0,0 +1,431 @@
+import{g as c,x as r}from"./iframe-CcloOV09.js";import{o as d}from"./if-defined-COHr0XBn.js";import"./preload-helper-PPVm8Dsz.js";const{events:u,args:g,argTypes:t}=c("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>
+<ul>
+  <li>Confirmation dialogs anchored to a button</li>
+  <li>Rich preview cards on hover</li>
+  <li>Interactive forms or menus in a floating panel</li>
+</ul>
+
+<h3>When not to use:</h3>
+<ul>
+  <li>For simple text-only hints — use <a href="?path=/docs/components-tooltip--docs">Tooltip</a> instead</li>
+  <li>For status messages or inline feedback (use alerts or toasts)</li>
+</ul>
+
+<h3>Accessibility</h3>
+<ul>
+  <li><code>role="dialog"</code> on popover panel</li>
+  <li><code>aria-expanded</code> on trigger element</li>
+  <li><code>aria-controls</code> links trigger to panel</li>
+  <li>Escape key dismisses the popover</li>
+  <li>Click outside dismisses (click trigger only)</li>
+  <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:{...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 Custom Properties",defaultValue:{summary:"white"}}},customTitleColor:{name:"--popover-color-title",description:"Title text color",control:{type:"color"},table:{category:"CSS Custom Properties",defaultValue:{summary:"oklch(var(--btu-theme-gray-900))"}}},customContentColor:{name:"--popover-color-content",description:"Content text color",control:{type:"color"},table:{category:"CSS Custom 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 Custom Properties",defaultValue:{summary:"0.5rem (lg)"}}}},render:o=>{const e=[];o.customBg&&e.push(`--popover-color-background: ${o.customBg}`),o.customTitleColor&&e.push(`--popover-color-title: ${o.customTitleColor}`),o.customContentColor&&e.push(`--popover-color-content: ${o.customContentColor}`),o.customRadius&&e.push(`--popover-border-radius: ${o.customRadius}`);const a=e.length>0?e.join("; "):"";return r`
+      <div style="display: flex; justify-content: center; padding: 6rem 2rem;">
+        <div style="${a}">
+          <btu-popover
+            position="${o.position}"
+            trigger="${o.trigger}"
+            delay="${o.delay}"
+            offset="${d(o.offset)}"
+            ?no-arrow="${o.noArrow}"
+            ?open="${o.open}"
+          >
+            <button class="popover-trigger" slot="trigger">
+              ${o.trigger==="hover"?"Hover me":o.trigger==="focus"?"Focus me":"Click me"}
+            </button>
+            <div slot="content">
+              <div style="font-weight: 500; margin-bottom: 4px; color: var(--popover-color-title);">Popover Title</div>
+              <div style="color: var(--popover-color-content, oklch(var(--btu-theme-gray-900)));">
+                This is a popover with rich content.
+                ${o.trigger==="click"?"Click outside or press Escape to dismiss.":""}
+              </div>
+            </div>
+          </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>
+    <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>
+        <div slot="content">Popover positioned above the trigger</div>
+      </btu-popover>
+      <btu-popover position="bottom">
+        <button class="popover-trigger" 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>
+        <div slot="content">Popover positioned left of the trigger</div>
+      </btu-popover>
+      <btu-popover position="right">
+        <button class="popover-trigger" 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."},story:{inline:!1,iframeHeight:300}}}},s={render:()=>r`
+    <style>
+      ${p} .popover-custom-content {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        min-width: 240px;
+      }
+      .popover-custom-content h3 {
+        margin: 0;
+        font-size: 0.9375rem;
+        font-weight: 600;
+      }
+      .popover-custom-content p {
+        margin: 0;
+        font-size: 0.8125rem;
+        color: oklch(var(--btu-theme-gray-500));
+        line-height: 1.4;
+      }
+      .popover-custom-content .actions {
+        display: flex;
+        gap: 8px;
+        justify-content: flex-end;
+        padding-top: 4px;
+        border-top: 1px solid oklch(var(--btu-theme-gray-100));
+      }
+      .legend-series {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+      .legend-item {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 0.75rem;
+        line-height: 1.125rem;
+        color: oklch(var(--btu-theme-gray-500));
+      }
+      .legend-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 9999px;
+        flex-shrink: 0;
+      }
+      .legend-value {
+        font-weight: 600;
+      }
+    </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>
+        <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>
+            </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>
+        <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;"
+          >
+            Chart Legend
+          </div>
+          <div class="legend-series">
+            <div class="legend-item">
+              <span class="legend-dot" style="background: oklch(var(--btu-theme-primary-900));"></span>
+              Series 1: <span class="legend-value">786</span>
+            </div>
+            <div class="legend-item">
+              <span class="legend-dot" style="background: oklch(var(--btu-theme-primary-700));"></span>
+              Series 2: <span class="legend-value">786</span>
+            </div>
+            <div class="legend-item">
+              <span class="legend-dot" style="background: oklch(var(--btu-theme-primary-500));"></span>
+              Series 3: <span class="legend-value">786</span>
+            </div>
+            <div class="legend-item">
+              <span class="legend-dot" style="background: oklch(var(--btu-theme-teal-700));"></span>
+              Series 4: <span class="legend-value">786</span>
+            </div>
+          </div>
+        </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)."},story:{inline:!1,iframeHeight:300}}}},l={render:()=>r`
+    <style>
+      ${p} .custom-popover-trigger {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.5rem 1rem;
+        border-radius: 0.375rem;
+        background-color: oklch(0.35 0.1 280);
+        color: white;
+        font-weight: 500;
+        font-size: 0.875rem;
+        cursor: pointer;
+        user-select: none;
+        border: 1px solid oklch(0.45 0.1 280);
+      }
+      .custom-popover-trigger:hover {
+        background-color: oklch(0.4 0.1 280);
+      }
+    </style>
+    <div style="display: flex; justify-content: center; padding: 6rem 2rem;">
+      <div
+        style="--popover-color-background: oklch(0.25 20.05 280); --popover-color-title: oklch(0.95 0 0); --popover-color-content: oklch(0.8 120 50); --popover-border-radius: 0px;"
+      >
+        <btu-popover position="bottom" offset="lg" no-arrow>
+          <button class="custom-popover-trigger" slot="trigger">Fully customized</button>
+          <div slot="content">
+            <div style="font-weight: 600; font-size: 1rem; margin-bottom: 8px; color: var(--popover-color-title);">
+              Custom Styled Popover
+            </div>
+            <div style="line-height: 1.5; color: var(--popover-color-content);">
+              This popover overrides all available CSS custom properties: background, title color, and border radius. It
+              also uses
+              <code style="background: oklch(0.35 0.05 280); padding: 2px 6px; border-radius: 4px;">offset="lg"</code>
+              for extra spacing and
+              <code style="background: oklch(0.35 0.05 280); padding: 2px 6px; border-radius: 4px;">no-arrow</code> for
+              a clean look.
+            </div>
+          </div>
+        </btu-popover>
+      </div>
+    </div>
+  `,parameters:{docs:{description:{story:"Demonstrates full customization of all CSS custom properties. Set these on a parent element or directly on the component:\n\n- `--popover-color-background` — Background color\n- `--popover-color-title` — Title text color\n- `--popover-color-content` — Content text color\n- `--popover-border-radius` — Border radius"}}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  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:`{
+  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>
+        <div slot="content">Popover positioned above the trigger</div>
+      </btu-popover>
+      <btu-popover position="bottom">
+        <button class="popover-trigger" 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>
+        <div slot="content">Popover positioned left of the trigger</div>
+      </btu-popover>
+      <btu-popover position="right">
+        <button class="popover-trigger" 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.'
+      },
+      story: {
+        inline: false,
+        iframeHeight: 300
+      }
+    }
+  }
+}`,...i.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <style>
+      \${triggerStyle} .popover-custom-content {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        min-width: 240px;
+      }
+      .popover-custom-content h3 {
+        margin: 0;
+        font-size: 0.9375rem;
+        font-weight: 600;
+      }
+      .popover-custom-content p {
+        margin: 0;
+        font-size: 0.8125rem;
+        color: oklch(var(--btu-theme-gray-500));
+        line-height: 1.4;
+      }
+      .popover-custom-content .actions {
+        display: flex;
+        gap: 8px;
+        justify-content: flex-end;
+        padding-top: 4px;
+        border-top: 1px solid oklch(var(--btu-theme-gray-100));
+      }
+      .legend-series {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+      .legend-item {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 0.75rem;
+        line-height: 1.125rem;
+        color: oklch(var(--btu-theme-gray-500));
+      }
+      .legend-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 9999px;
+        flex-shrink: 0;
+      }
+      .legend-value {
+        font-weight: 600;
+      }
+    </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>
+        <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>
+            </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>
+        <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;"
+          >
+            Chart Legend
+          </div>
+          <div class="legend-series">
+            <div class="legend-item">
+              <span class="legend-dot" style="background: oklch(var(--btu-theme-primary-900));"></span>
+              Series 1: <span class="legend-value">786</span>
+            </div>
+            <div class="legend-item">
+              <span class="legend-dot" style="background: oklch(var(--btu-theme-primary-700));"></span>
+              Series 2: <span class="legend-value">786</span>
+            </div>
+            <div class="legend-item">
+              <span class="legend-dot" style="background: oklch(var(--btu-theme-primary-500));"></span>
+              Series 3: <span class="legend-value">786</span>
+            </div>
+            <div class="legend-item">
+              <span class="legend-dot" style="background: oklch(var(--btu-theme-teal-700));"></span>
+              Series 4: <span class="legend-value">786</span>
+            </div>
+          </div>
+        </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).'
+      },
+      story: {
+        inline: false,
+        iframeHeight: 300
+      }
+    }
+  }
+}`,...s.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <style>
+      \${triggerStyle} .custom-popover-trigger {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.5rem 1rem;
+        border-radius: 0.375rem;
+        background-color: oklch(0.35 0.1 280);
+        color: white;
+        font-weight: 500;
+        font-size: 0.875rem;
+        cursor: pointer;
+        user-select: none;
+        border: 1px solid oklch(0.45 0.1 280);
+      }
+      .custom-popover-trigger:hover {
+        background-color: oklch(0.4 0.1 280);
+      }
+    </style>
+    <div style="display: flex; justify-content: center; padding: 6rem 2rem;">
+      <div
+        style="--popover-color-background: oklch(0.25 20.05 280); --popover-color-title: oklch(0.95 0 0); --popover-color-content: oklch(0.8 120 50); --popover-border-radius: 0px;"
+      >
+        <btu-popover position="bottom" offset="lg" no-arrow>
+          <button class="custom-popover-trigger" slot="trigger">Fully customized</button>
+          <div slot="content">
+            <div style="font-weight: 600; font-size: 1rem; margin-bottom: 8px; color: var(--popover-color-title);">
+              Custom Styled Popover
+            </div>
+            <div style="line-height: 1.5; color: var(--popover-color-content);">
+              This popover overrides all available CSS custom properties: background, title color, and border radius. It
+              also uses
+              <code style="background: oklch(0.35 0.05 280); padding: 2px 6px; border-radius: 4px;">offset="lg"</code>
+              for extra spacing and
+              <code style="background: oklch(0.35 0.05 280); padding: 2px 6px; border-radius: 4px;">no-arrow</code> for
+              a clean look.
+            </div>
+          </div>
+        </btu-popover>
+      </div>
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: \`Demonstrates full customization of all CSS custom properties. Set these on a parent element or directly on the component:
+
+- \\\`--popover-color-background\\\` — Background color
+- \\\`--popover-color-title\\\` — Title text color
+- \\\`--popover-color-content\\\` — Content text color
+- \\\`--popover-border-radius\\\` — Border radius\`
+      }
+    }
+  }
+}`,...l.parameters?.docs?.source}}};const y=["Default","Positions","RichContent","AdvancedUsage"];export{l as AdvancedUsage,n as Default,i as Positions,s as RichContent,y as __namedExportsOrder,h as default};

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

@@ -0,0 +1 @@
+import"./iframe-CcloOV09.js";const i=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){return this.dispatchEvent(new CustomEvent(e,{bubbles:!0,cancelable:!1,composed:!0,detail:c}))}}return n},l=t=>{class n extends t{connectedCallback(){const e=()=>{super.connectedCallback()};document.readyState!=="loading"?e():document.addEventListener("DOMContentLoaded",()=>e())}}return n};export{i as E,l as R};

package/dist/storybook/assets/{Rtc.stories-BrTAIAi1.js → Rtc.stories-CAjDv_Ub.js}

@@ -1,4 +1,4 @@
-import{x as o}from"./iframe-lTczLWsL.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`
+import{x as o}from"./iframe-CcloOV09.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`
     <div class="space-y-6 text-sm">
       <div>
         <h3 class="mb-2 font-bold">Overview</h3>
@@ -51,7 +51,7 @@ import{x as o}from"./iframe-lTczLWsL.js";import"./preload-helper-PPVm8Dsz.js";co
         <h3 class="mb-2 font-bold">Receiving Broadcasts</h3>
         <pre
           class="overflow-x-auto rounded bg-gray-900 p-4 text-gray-100"
-        ><code>import rtc from '@brightspot/ui/dist/util/rtc.js'
+        ><code>import rtc from '@brightspot/ui/util/rtc.js'
 
 // Listen for content publish events
 rtc.receive('com.psddev.cms.tool.page.content.PublishBroadcast', (data) => {
@@ -192,7 +192,7 @@ rtc.execute('com.example.MyAction', { id: '123', value: 'updated' })</code></pre
         <h3 class="mb-2 font-bold">Receiving Broadcasts</h3>
         <pre
           class="overflow-x-auto rounded bg-gray-900 p-4 text-gray-100"
-        ><code>import rtc from '@brightspot/ui/dist/util/rtc.js'
+        ><code>import rtc from '@brightspot/ui/util/rtc.js'
 
 // Listen for content publish events
 rtc.receive('com.psddev.cms.tool.page.content.PublishBroadcast', (data) => {

package/dist/storybook/assets/{ScrollShadow.stories-DHcKhkag.js → ScrollShadow.stories-BSV4U-tq.js}

@@ -1,4 +1,4 @@
-import{x as a}from"./iframe-lTczLWsL.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`
+import{x as a}from"./iframe-CcloOV09.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`
     <style>
       :root {
         --can-scroll:   ;

package/dist/storybook/assets/{Throttle.stories-cSYT_BXu.js → Throttle.stories-kaxXQ8RZ.js}

@@ -1,4 +1,4 @@
-import{x as u}from"./iframe-lTczLWsL.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}},a={render:e=>{const t=`throttle-${Math.random().toString(36).substring(2,9)}`;let n=0,o=0;const r=()=>{const h=document.getElementById(`${t}-normal-count`),m=document.getElementById(`${t}-throttled-count`);h&&(h.textContent=String(n)),m&&(m.textContent=String(o))},s=v(e.interval,()=>{o++,r()}),d=()=>{n++,r()},l=()=>{d(),s()};return u`
+import{x as u}from"./iframe-CcloOV09.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 h=document.getElementById(`${t}-normal-count`),m=document.getElementById(`${t}-throttled-count`);h&&(h.textContent=String(n)),m&&(m.textContent=String(o))},s=v(e.interval,()=>{o++,r()}),a=()=>{n++,r()},l=()=>{a(),s()};return u`
       <div class="space-y-4">
         <div class="text-base">
           <p class="mb-2">
@@ -30,7 +30,7 @@ import{x as u}from"./iframe-lTczLWsL.js";import"./preload-helper-PPVm8Dsz.js";fu
           Reset Counters
         </button>
       </div>
-    `},parameters:{docs:{description:{story:"Interactive example showing throttle in action. Move your mouse over the box to see how throttling reduces function calls."}}}},i={render:()=>{const e=`scroll-${Math.random().toString(36).substring(2,9)}`;let t=0,n=0;const o=()=>{const d=document.getElementById(`${e}-normal-count`),l=document.getElementById(`${e}-throttled-count`);d&&(d.textContent=String(t)),l&&(l.textContent=String(n))},r=v(300,()=>{n++,o()});return u`
+    `},parameters:{docs:{description:{story:"Interactive example showing throttle in action. Move your mouse over the box to see how throttling reduces function calls."}}}},i={render:()=>{const e=`scroll-${Math.random().toString(36).substring(2,9)}`;let t=0,n=0;const o=()=>{const a=document.getElementById(`${e}-normal-count`),l=document.getElementById(`${e}-throttled-count`);a&&(a.textContent=String(t)),l&&(l.textContent=String(n))},r=v(300,()=>{n++,o()});return u`
       <div class="space-y-4">
         <div class="text-base">
           <p class="mb-2">
@@ -41,7 +41,7 @@ import{x as u}from"./iframe-lTczLWsL.js";import"./preload-helper-PPVm8Dsz.js";fu
 
         <div @scroll=${()=>{t++,o(),r()}} class="h-64 overflow-y-scroll rounded border-2 border-gray-300 bg-gray-50 p-4">
           <div class="space-y-4">
-            ${Array.from({length:50},(d,l)=>u` <div class="rounded border bg-white p-4">Item ${l+1}</div> `)}
+            ${Array.from({length:50},(a,l)=>u` <div class="rounded border bg-white p-4">Item ${l+1}</div> `)}
           </div>
         </div>
 
@@ -69,7 +69,7 @@ import{x as u}from"./iframe-lTczLWsL.js";import"./preload-helper-PPVm8Dsz.js";fu
         <h3 class="mb-2 font-bold">Basic Usage</h3>
         <pre
           class="overflow-x-auto rounded bg-gray-900 p-4 text-gray-100"
-        ><code>import { throttle } from '@brightspot/ui/dist/util/throttle.js'
+        ><code>import { throttle } from '@brightspot/ui/util/throttle.js'
 
 const handleScroll = throttle(200, () => {
   console.log('Scroll handler - max once per 200ms')
@@ -109,7 +109,7 @@ window.addEventListener('scroll', handleScroll)</code></pre>
         </p>
       </div>
     </div>
-  `,parameters:{docs:{description:{story:"Code examples and documentation for using the throttle utility."}}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  `,parameters:{docs:{description:{story:"Code examples and documentation for using the throttle utility."}}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
   render: args => {
     const instanceId = \`throttle-\${Math.random().toString(36).substring(2, 9)}\`;
     let normalCount = 0;
@@ -177,7 +177,7 @@ window.addEventListener('scroll', handleScroll)</code></pre>
       }
     }
   }
-}`,...a.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+}`,...d.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
   render: () => {
     const instanceId = \`scroll-\${Math.random().toString(36).substring(2, 9)}\`;
     let scrollCount = 0;
@@ -252,7 +252,7 @@ window.addEventListener('scroll', handleScroll)</code></pre>
         <h3 class="mb-2 font-bold">Basic Usage</h3>
         <pre
           class="overflow-x-auto rounded bg-gray-900 p-4 text-gray-100"
-        ><code>import { throttle } from '@brightspot/ui/dist/util/throttle.js'
+        ><code>import { throttle } from '@brightspot/ui/util/throttle.js'
 
 const handleScroll = throttle(200, () => {
   console.log('Scroll handler - max once per 200ms')
@@ -300,4 +300,4 @@ window.addEventListener('scroll', handleScroll)</code></pre>
       }
     }
   }
-}`,...c.parameters?.docs?.source}}};const y=["Interactive","ScrollExample","UsageExample"];export{a as Interactive,i as ScrollExample,c as UsageExample,y as __namedExportsOrder,x as default};
+}`,...c.parameters?.docs?.source}}};const y=["Interactive","ScrollExample","UsageExample"];export{d as Interactive,i as ScrollExample,c as UsageExample,y as __namedExportsOrder,x as default};