@brightspot/ui 1.2.0 → 1.4.0

package/dist/storybook/assets/CopyToClipboard.stories-BW3oaT1i.js

@@ -0,0 +1,277 @@
+import{g as s,x as i}from"./iframe-lTczLWsL.js";import"./preload-helper-PPVm8Dsz.js";var r=Object.freeze,c=Object.defineProperty,p=(e,l)=>r(c(e,"raw",{value:r(l||e.slice())})),d;const{events:b,args:u,argTypes:a}=s("btu-copy-to-clipboard"),f={title:"Components/CopyToClipboard",component:"btu-copy-to-clipboard",tags:["autodocs"],parameters:{docs:{subtitle:"btu-copy-to-clipboard",description:{component:`
+A button component for copying text to the clipboard. The button becomes disabled and displays a success state for 3 seconds after copying.
+
+<h3>When to use:</h3>
+<ul>
+  <li>To allow users to quickly copy text, URLs, or codes</li>
+  <li>When providing API keys or tokens, which may be hidden</li>
+  <li>For giving users access to text content that does not need to be displayed</li>
+</ul>
+
+<h3>Use Cases in the CMS:</h3>
+<ul>
+  <li>Saved Searches > more actions button > Copy Shareable Link</li>
+  <li>Mirror Preview (accessed via profile dropdown)</li>
+  <li>Admin > APIs >
+    <ul>
+      <li>Clients > \`.ApiKey-copy\`</li>
+      <li>GraphQL > \`.GraphQL-copy\`</li>
+    </ul>
+  </li>
+</ul>
+
+<h3>Behavior Notes:</h3>
+<ul>
+  <li>The button is disabled when there is no text to copy (<code>copydata</code> is empty or not set)</li>
+  <li>Success styles are dependent on the <code>btu-clipboard-copied</code> state, which can be styled using the <code>:state()</code> pseudo-class</li>
+</ul>
+        `}},actions:{handles:b},controls:{expanded:!0}},args:{...u,copydata:"https://example.com/cms/content/edit",buttonClasses:""},argTypes:{...a,copydata:{...a.copydata,control:{type:"text"},description:"The text to copy to clipboard"},buttonClasses:{...a.buttonClasses,control:{type:"text"},description:"Custom CSS classes for the button. If provided, replaces the default classes."}},render:e=>i`
+      <div style="display: flex; flex-direction: column; gap: 1rem;">
+        <div style="display: flex; align-items: center; gap: 1rem;">
+          <code style="padding: 0.5rem; background: #f5f5f5; border-radius: 4px; flex: 1;">${e.copydata}</code>
+          <btu-copy-to-clipboard copydata="${e.copydata}" .buttonClasses="${e.buttonClasses||void 0}"
+            >Copy to Clipboard</btu-copy-to-clipboard
+          >
+        </div>
+        <div style="display: flex; flex-direction: column; gap: 0.25rem;">
+          <textarea
+            aria-label="Click the copy button, then paste here (Cmd/Ctrl+V) to test"
+            placeholder="Click the copy button, then paste here (Cmd/Ctrl+V) to test"
+            style="padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 4px; font-family: monospace; font-size: 0.875rem;"
+          ></textarea>
+        </div>
+      </div>
+    `},t={args:{}},o={render:()=>i(d||(d=p([`
+      <div style="display: flex; flex-direction: column; gap: 1rem;">
+        <div style="display: flex; align-items: center; gap: 1rem;">
+          <code style="padding: 0.5rem; background: #f5f5f5; border-radius: 4px; flex: 1;">Hello, World!</code>
+          <btu-copy-to-clipboard copydata="Hello, World!" id="event-demo-button">Copy</btu-copy-to-clipboard>
+        </div>
+        <div
+          id="event-log"
+          style="padding: 0.5rem; background: #fffbeb; border: 1px solid #fbbf24; border-radius: 4px; font-family: monospace; font-size: 0.875rem; color: #92400e;"
+        >
+          Event Log: Waiting for copy event...
+        </div>
+        <div style="display: flex; flex-direction: column; gap: 0.25rem;">
+          <textarea
+            aria-label="Click the copy button, then paste here (Cmd/Ctrl+V) to test"
+            placeholder="Click the copy button, then paste here (Cmd/Ctrl+V) to test"
+            style="padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 4px; font-family: monospace; font-size: 0.875rem;"
+          ></textarea>
+        </div>
+        <script>
+          ;(() => {
+            const button = document.getElementById('event-demo-button')
+            const log = document.getElementById('event-log')
+            if (button && log) {
+              button.addEventListener('btu-clipboard-copied', e => {
+                const timestamp = new Date().toLocaleTimeString()
+                log.textContent = \`Event Log: btu-clipboard-copied fired at \${timestamp}\`
+                console.log('Event fired:', e)
+              })
+            }
+          })()
+        <\/script>
+      </div>
+    `],[`
+      <div style="display: flex; flex-direction: column; gap: 1rem;">
+        <div style="display: flex; align-items: center; gap: 1rem;">
+          <code style="padding: 0.5rem; background: #f5f5f5; border-radius: 4px; flex: 1;">Hello, World!</code>
+          <btu-copy-to-clipboard copydata="Hello, World!" id="event-demo-button">Copy</btu-copy-to-clipboard>
+        </div>
+        <div
+          id="event-log"
+          style="padding: 0.5rem; background: #fffbeb; border: 1px solid #fbbf24; border-radius: 4px; font-family: monospace; font-size: 0.875rem; color: #92400e;"
+        >
+          Event Log: Waiting for copy event...
+        </div>
+        <div style="display: flex; flex-direction: column; gap: 0.25rem;">
+          <textarea
+            aria-label="Click the copy button, then paste here (Cmd/Ctrl+V) to test"
+            placeholder="Click the copy button, then paste here (Cmd/Ctrl+V) to test"
+            style="padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 4px; font-family: monospace; font-size: 0.875rem;"
+          ></textarea>
+        </div>
+        <script>
+          ;(() => {
+            const button = document.getElementById('event-demo-button')
+            const log = document.getElementById('event-log')
+            if (button && log) {
+              button.addEventListener('btu-clipboard-copied', e => {
+                const timestamp = new Date().toLocaleTimeString()
+                log.textContent = \\\`Event Log: btu-clipboard-copied fired at \\\${timestamp}\\\`
+                console.log('Event fired:', e)
+              })
+            }
+          })()
+        <\/script>
+      </div>
+    `]))),parameters:{docs:{description:{story:"You can listen for the `btu-clipboard-copied` event to perform custom actions when text is copied. This example displays an event log that updates with a timestamp each time the button is clicked."}}}},n={render:()=>i`
+      <div class="flex flex-col gap-6">
+        <div class="flex flex-col gap-2">
+          <strong>Custom Button Styling:</strong>
+          <div style="display: flex; align-items: center; gap: 1rem;">
+            <code style="padding: 0.5rem; background: #f5f5f5; border-radius: 4px; flex: 1;">
+              https://example.com/cms/content/edit
+            </code>
+            <btu-copy-to-clipboard
+              copydata="https://example.com/cms/content/edit"
+              buttonClasses="btu-button btu-button-primary btu-button-fill-none after:btu-icon after:btu-icon-clipboard-copy"
+              >Copy Link</btu-copy-to-clipboard
+            >
+          </div>
+          <textarea
+            aria-label="Click the copy button, then paste here (Cmd/Ctrl+V) to test"
+            placeholder="Click the copy button, then paste here (Cmd/Ctrl+V) to test"
+            style="padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 4px; font-family: monospace; font-size: 0.875rem;"
+          ></textarea>
+        </div>
+
+        <div class="flex flex-col gap-2">
+          <strong>Icon-Only Button:</strong>
+          <div style="display: flex; align-items: center; gap: 1rem;">
+            <div
+              style="padding: 0.5rem; background: #f5f5f5; border-radius: 4px; flex: 1; display: flex; align-items: center; gap: 0.5rem; color: #6b7280;"
+            >
+              <span class="before:btu-icon before:btu-icon-key"></span>
+              <span style="font-family: monospace; font-style: italic;">API Key (hidden)</span>
+            </div>
+            <btu-copy-to-clipboard
+              id="icon-only-demo"
+              aria-label="Copy API key to clipboard"
+              copydata="sk_live_abc123xyz789secret"
+              buttonClasses="btu-button btu-button-primary before:btu-icon before:btu-icon-clipboard-copy btu-button-text-hidden"
+              >Copy API Key</btu-copy-to-clipboard
+            >
+          </div>
+          <textarea
+            aria-label="Click the copy button, then paste here (Cmd/Ctrl+V) to test"
+            placeholder="Click the copy button, then paste here (Cmd/Ctrl+V) to test"
+            style="padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 4px; font-family: monospace; font-size: 0.875rem;"
+          ></textarea>
+          <style>
+            #icon-only-demo:state(btu-clipboard-copied) button {
+              background-color: oklch(68.59% 0.167 157);
+            }
+            #icon-only-demo:state(btu-clipboard-copied) button::before {
+              content: '\\e168';
+            }
+          </style>
+        </div>
+      </div>
+    `,parameters:{docs:{description:{story:"\n**Custom Button Styling:** Use the `buttonClasses` attribute to override default button classes with your own styling.\n\n**Icon-Only Button:** An icon-only button for a minimal style. Uses `buttonClasses` for initial styles, notably `btu-button-text-hidden` to hide the text. The `aria-label` attribute is passed from the host element to the inner button for accessibility. CSS `:state(btu-clipboard-copied)` is used to change styles when copied.\n        "}}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
+  args: {}
+}`,...t.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    return html\`
+      <div style="display: flex; flex-direction: column; gap: 1rem;">
+        <div style="display: flex; align-items: center; gap: 1rem;">
+          <code style="padding: 0.5rem; background: #f5f5f5; border-radius: 4px; flex: 1;">Hello, World!</code>
+          <btu-copy-to-clipboard copydata="Hello, World!" id="event-demo-button">Copy</btu-copy-to-clipboard>
+        </div>
+        <div
+          id="event-log"
+          style="padding: 0.5rem; background: #fffbeb; border: 1px solid #fbbf24; border-radius: 4px; font-family: monospace; font-size: 0.875rem; color: #92400e;"
+        >
+          Event Log: Waiting for copy event...
+        </div>
+        <div style="display: flex; flex-direction: column; gap: 0.25rem;">
+          <textarea
+            aria-label="Click the copy button, then paste here (Cmd/Ctrl+V) to test"
+            placeholder="Click the copy button, then paste here (Cmd/Ctrl+V) to test"
+            style="padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 4px; font-family: monospace; font-size: 0.875rem;"
+          ></textarea>
+        </div>
+        <script>
+          ;(() => {
+            const button = document.getElementById('event-demo-button')
+            const log = document.getElementById('event-log')
+            if (button && log) {
+              button.addEventListener('btu-clipboard-copied', e => {
+                const timestamp = new Date().toLocaleTimeString()
+                log.textContent = \\\`Event Log: btu-clipboard-copied fired at \\\${timestamp}\\\`
+                console.log('Event fired:', e)
+              })
+            }
+          })()
+        <\/script>
+      </div>
+    \`;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: \`You can listen for the \\\`btu-clipboard-copied\\\` event to perform custom actions when text is copied. This example displays an event log that updates with a timestamp each time the button is clicked.\`
+      }
+    }
+  }
+}`,...o.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    return html\`
+      <div class="flex flex-col gap-6">
+        <div class="flex flex-col gap-2">
+          <strong>Custom Button Styling:</strong>
+          <div style="display: flex; align-items: center; gap: 1rem;">
+            <code style="padding: 0.5rem; background: #f5f5f5; border-radius: 4px; flex: 1;">
+              https://example.com/cms/content/edit
+            </code>
+            <btu-copy-to-clipboard
+              copydata="https://example.com/cms/content/edit"
+              buttonClasses="btu-button btu-button-primary btu-button-fill-none after:btu-icon after:btu-icon-clipboard-copy"
+              >Copy Link</btu-copy-to-clipboard
+            >
+          </div>
+          <textarea
+            aria-label="Click the copy button, then paste here (Cmd/Ctrl+V) to test"
+            placeholder="Click the copy button, then paste here (Cmd/Ctrl+V) to test"
+            style="padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 4px; font-family: monospace; font-size: 0.875rem;"
+          ></textarea>
+        </div>
+
+        <div class="flex flex-col gap-2">
+          <strong>Icon-Only Button:</strong>
+          <div style="display: flex; align-items: center; gap: 1rem;">
+            <div
+              style="padding: 0.5rem; background: #f5f5f5; border-radius: 4px; flex: 1; display: flex; align-items: center; gap: 0.5rem; color: #6b7280;"
+            >
+              <span class="before:btu-icon before:btu-icon-key"></span>
+              <span style="font-family: monospace; font-style: italic;">API Key (hidden)</span>
+            </div>
+            <btu-copy-to-clipboard
+              id="icon-only-demo"
+              aria-label="Copy API key to clipboard"
+              copydata="sk_live_abc123xyz789secret"
+              buttonClasses="btu-button btu-button-primary before:btu-icon before:btu-icon-clipboard-copy btu-button-text-hidden"
+              >Copy API Key</btu-copy-to-clipboard
+            >
+          </div>
+          <textarea
+            aria-label="Click the copy button, then paste here (Cmd/Ctrl+V) to test"
+            placeholder="Click the copy button, then paste here (Cmd/Ctrl+V) to test"
+            style="padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 4px; font-family: monospace; font-size: 0.875rem;"
+          ></textarea>
+          <style>
+            #icon-only-demo:state(btu-clipboard-copied) button {
+              background-color: oklch(68.59% 0.167 157);
+            }
+            #icon-only-demo:state(btu-clipboard-copied) button::before {
+              content: '\\\\e168';
+            }
+          </style>
+        </div>
+      </div>
+    \`;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: \`
+**Custom Button Styling:** Use the \\\`buttonClasses\\\` attribute to override default button classes with your own styling.
+
+**Icon-Only Button:** An icon-only button for a minimal style. Uses \\\`buttonClasses\\\` for initial styles, notably \\\`btu-button-text-hidden\\\` to hide the text. The \\\`aria-label\\\` attribute is passed from the host element to the inner button for accessibility. CSS \\\`:state(btu-clipboard-copied)\\\` is used to change styles when copied.
+        \`
+      }
+    }
+  }
+}`,...n.parameters?.docs?.source}}};const g=["Default","CopiedEvent","AdvancedUsage"];export{n as AdvancedUsage,o as CopiedEvent,t as Default,g as __namedExportsOrder,f as default};

package/dist/storybook/assets/Debounce.stories-BXx3CKvQ.js

@@ -0,0 +1,199 @@
+import{x as c}from"./iframe-lTczLWsL.js";import"./preload-helper-PPVm8Dsz.js";function p(n,e){if(n<=0)return e;let t;return function(){clearTimeout(t),t=setTimeout(()=>{t=void 0,e.apply(this,[...arguments])},n)}}const g={title:"Utilities/Debounce",tags:["autodocs"],parameters:{docs:{subtitle:"The `debounce` utility delays function execution until a specified wait period has elapsed since the last invocation. Useful for search inputs, form validation, and window resize handlers."},controls:{expanded:!0}},argTypes:{wait:{control:{type:"number",min:0,max:2e3,step:50},description:"Debounce wait time in milliseconds"}},args:{wait:300}},o={render:n=>{const e=`debounce-${Math.random().toString(36).substring(2,9)}`;let t=0,i=0;const d=()=>{const a=document.getElementById(`${e}-normal-count`),r=document.getElementById(`${e}-debounced-count`);a&&(a.textContent=String(t)),r&&(r.textContent=String(i))},l=p(n.wait,()=>{i++,d()}),u=()=>{t++,d(),l()};return c`
+      <div class="space-y-4">
+        <div class="text-base">
+          <p class="mb-2">
+            Type in the input below. The normal counter increments on every keystroke, while the debounced counter only
+            fires after ${n.wait}ms of inactivity.
+          </p>
+        </div>
+
+        <input
+          @input=${u}
+          type="text"
+          placeholder="Start typing..."
+          class="w-full rounded border-2 border-gray-300 px-4 py-2 focus:border-blue-500 focus:outline-none"
+        />
+
+        <div class="flex justify-around">
+          <div>
+            <div class="text-xs text-gray-500">Keystrokes</div>
+            <div id="${e}-normal-count" class="text-2xl font-bold text-gray-900">0</div>
+          </div>
+          <div>
+            <div class="text-xs text-gray-500">Debounced calls (${n.wait}ms)</div>
+            <div id="${e}-debounced-count" class="text-primary-600 text-2xl font-bold">0</div>
+          </div>
+        </div>
+
+        <button
+          @click=${()=>{t=0,i=0,d()}}
+          class="rounded bg-gray-200 px-4 py-2 hover:bg-gray-300"
+        >
+          Reset Counters
+        </button>
+      </div>
+    `},parameters:{docs:{description:{story:"Interactive example showing debounce in action. Type rapidly in the input to see how the debounced handler waits for a pause before executing."}}}},s={render:()=>c`
+    <div class="space-y-4 text-sm">
+      <div>
+        <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 { debounce } from '@brightspot/ui/dist/util/debounce.js'
+
+const handleSearch = debounce(300, () => {
+  console.log('Search triggered after 300ms of inactivity')
+})
+
+input.addEventListener('input', handleSearch)</code></pre>
+      </div>
+
+      <div>
+        <h3 class="mb-2 font-bold">Debounce vs Throttle</h3>
+        <ul class="list-inside list-disc space-y-1 text-gray-700">
+          <li><strong>Debounce</strong>: Waits until activity stops, then fires once</li>
+          <li><strong>Throttle</strong>: Fires at regular intervals during activity</li>
+          <li>Use debounce for search inputs, form validation, window resize end</li>
+          <li>Use throttle for scroll handlers, mouse tracking, progress updates</li>
+        </ul>
+      </div>
+
+      <div>
+        <h3 class="mb-2 font-bold">Parameters</h3>
+        <ul class="space-y-2">
+          <li>
+            <code class="rounded bg-gray-200 px-1">wait</code> (number): Delay in milliseconds. If 0, the function
+            passes through unchanged.
+          </li>
+          <li><code class="rounded bg-gray-200 px-1">fn</code> (function): The function to debounce</li>
+        </ul>
+      </div>
+
+      <div>
+        <h3 class="mb-2 font-bold">Returns</h3>
+        <p class="text-gray-700">
+          A debounced version of the input function that delays execution until
+          <code class="rounded bg-gray-200 px-1">wait</code> milliseconds have elapsed since the last call.
+        </p>
+      </div>
+    </div>
+  `,parameters:{docs:{description:{story:"Code examples and documentation for using the debounce utility."}}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const instanceId = \`debounce-\${Math.random().toString(36).substring(2, 9)}\`;
+    let normalCount = 0;
+    let debouncedCount = 0;
+    const updateCounts = () => {
+      const normalEl = document.getElementById(\`\${instanceId}-normal-count\`);
+      const debouncedEl = document.getElementById(\`\${instanceId}-debounced-count\`);
+      if (normalEl) normalEl.textContent = String(normalCount);
+      if (debouncedEl) debouncedEl.textContent = String(debouncedCount);
+    };
+    const handleDebounced = debounce(args.wait, () => {
+      debouncedCount++;
+      updateCounts();
+    });
+    const handleInput = () => {
+      normalCount++;
+      updateCounts();
+      handleDebounced();
+    };
+    return html\`
+      <div class="space-y-4">
+        <div class="text-base">
+          <p class="mb-2">
+            Type in the input below. The normal counter increments on every keystroke, while the debounced counter only
+            fires after \${args.wait}ms of inactivity.
+          </p>
+        </div>
+
+        <input
+          @input=\${handleInput}
+          type="text"
+          placeholder="Start typing..."
+          class="w-full rounded border-2 border-gray-300 px-4 py-2 focus:border-blue-500 focus:outline-none"
+        />
+
+        <div class="flex justify-around">
+          <div>
+            <div class="text-xs text-gray-500">Keystrokes</div>
+            <div id="\${instanceId}-normal-count" class="text-2xl font-bold text-gray-900">0</div>
+          </div>
+          <div>
+            <div class="text-xs text-gray-500">Debounced calls (\${args.wait}ms)</div>
+            <div id="\${instanceId}-debounced-count" class="text-primary-600 text-2xl font-bold">0</div>
+          </div>
+        </div>
+
+        <button
+          @click=\${() => {
+      normalCount = 0;
+      debouncedCount = 0;
+      updateCounts();
+    }}
+          class="rounded bg-gray-200 px-4 py-2 hover:bg-gray-300"
+        >
+          Reset Counters
+        </button>
+      </div>
+    \`;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: \`Interactive example showing debounce in action. Type rapidly in the input to see how the debounced handler waits for a pause before executing.\`
+      }
+    }
+  }
+}`,...o.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <div class="space-y-4 text-sm">
+      <div>
+        <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 { debounce } from '@brightspot/ui/dist/util/debounce.js'
+
+const handleSearch = debounce(300, () => {
+  console.log('Search triggered after 300ms of inactivity')
+})
+
+input.addEventListener('input', handleSearch)</code></pre>
+      </div>
+
+      <div>
+        <h3 class="mb-2 font-bold">Debounce vs Throttle</h3>
+        <ul class="list-inside list-disc space-y-1 text-gray-700">
+          <li><strong>Debounce</strong>: Waits until activity stops, then fires once</li>
+          <li><strong>Throttle</strong>: Fires at regular intervals during activity</li>
+          <li>Use debounce for search inputs, form validation, window resize end</li>
+          <li>Use throttle for scroll handlers, mouse tracking, progress updates</li>
+        </ul>
+      </div>
+
+      <div>
+        <h3 class="mb-2 font-bold">Parameters</h3>
+        <ul class="space-y-2">
+          <li>
+            <code class="rounded bg-gray-200 px-1">wait</code> (number): Delay in milliseconds. If 0, the function
+            passes through unchanged.
+          </li>
+          <li><code class="rounded bg-gray-200 px-1">fn</code> (function): The function to debounce</li>
+        </ul>
+      </div>
+
+      <div>
+        <h3 class="mb-2 font-bold">Returns</h3>
+        <p class="text-gray-700">
+          A debounced version of the input function that delays execution until
+          <code class="rounded bg-gray-200 px-1">wait</code> milliseconds have elapsed since the last call.
+        </p>
+      </div>
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: \`Code examples and documentation for using the debounce utility.\`
+      }
+    }
+  }
+}`,...s.parameters?.docs?.source}}};const h=["Interactive","UsageExample"];export{o as Interactive,s as UsageExample,h as __namedExportsOrder,g as default};

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

@@ -1,4 +1,4 @@
-import{x as d}from"./iframe-Z4F0Cgki.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-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:`
 <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-DGqWaBpi.js → Heading.stories-Djkl0MoC.js}

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

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

@@ -1,4 +1,4 @@
-import{g as d,x as r}from"./iframe-Z4F0Cgki.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-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:`
 <strong>When to use:</strong>
 <ul>
   <li>To visually reinforce actions, states, or categories</li>

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

@@ -1,4 +1,4 @@
-import{g as I,E as h,x as T}from"./iframe-Z4F0Cgki.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-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:`
 <h3>When to use:</h3>
 <ul>
   <li>To show progress of a specific task with known completion percentage</li>