@brightspot/ui 1.1.0 → 1.3.0

package/dist/storybook/assets/CopyToClipboard.stories-6vqDwd-F.js

@@ -0,0 +1,277 @@
+import{g as s,x as i}from"./iframe-D-tG1MVV.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/{Events.stories-B32yjxgf.js → Events.stories-DD9wfoHi.js}

@@ -1,4 +1,4 @@
-import{x as d}from"./iframe-BIFmrRK7.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-D-tG1MVV.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-D-Pvm7NG.js

@@ -0,0 +1,3 @@
+import{x as s}from"./iframe-D-tG1MVV.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-BbR3S56H.js

@@ -0,0 +1,245 @@
+import{g as d,x as r}from"./iframe-D-tG1MVV.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>
+  <li>For navigation elements and buttons</li>
+  <li>To provide visual cues alongside text labels</li>
+  <li>For decorative elements that enhance understanding</li>
+</ul>
+
+<strong>When not to use:</strong>
+<ul>
+  <li>As the sole means of conveying critical information without an accompanying label</li>
+  <li>When text would be clearer than an icon</li>
+</ul>
+
+<h3>Icon Library:</h3>
+<p>All icons are from <a href="https://lucide.dev/icons/" target="_blank">Lucide</a>. Note that the Lucide library is updated regularly, but the Brightspot UI library uses <strong>Lucide v${l}</strong>. Keep this in mind when choosing icons for your project, as icon names and styles may differ between versions.</p>
+        `}},actions:{handles:u},controls:{expanded:!0}},args:{...m,symbol:"heart",size:"md"},argTypes:{...t,"--Icon-size":{table:{disable:!0}},"--Icon-fill":{table:{disable:!0}},"--Icon-svg":{table:{disable:!0}},symbol:{...t.symbol,control:{type:"text"},description:'<a href="https://lucide.dev/icons/" target="_blank">Lucide</a> icon name. Note that only icons available in Lucide v'+l+" are supported.",table:{...t.symbol?.table,type:{summary:"string"}}},size:{...t.size,control:{type:"select"},options:g,description:"Icon size preset"},gradient:{...t.gradient,control:{type:"select"},options:x,description:"Gradient theme icon fill. When not set, icon inherits parent text color."},customSize:{name:"--Icon-size",control:{type:"text"},description:'Custom icon size - overrides the size preset (e.g., "3rem", "48px")',table:{category:"CSS Properties"}},customFill:{name:"--Icon-fill",control:{type:"text"},description:'An advanced option for creating filled-in icons via built-in CSS SVG styling. Works best with simple icons like "heart" or "star".',table:{category:"CSS Properties"}}},render:e=>{const s=[];e.customSize&&s.push(`--Icon-size: ${e.customSize}`),e.customFill&&s.push(`--Icon-fill: ${e.customFill}`);const c=s.length>0?s.join("; "):"";return r`<btu-icon
+      symbol="${e.symbol}"
+      size="${e.size}"
+      gradient="${e.gradient||""}"
+      style="${c}"
+    ></btu-icon>`}},n={args:{}},i={render:()=>r`<div class="flex items-center gap-4">
+      <btu-icon symbol="heart" size="xs"></btu-icon>
+      <btu-icon symbol="heart" size="sm"></btu-icon>
+      <btu-icon symbol="heart" size="md"></btu-icon>
+      <btu-icon symbol="heart" size="lg"></btu-icon>
+      <btu-icon symbol="heart" size="xl"></btu-icon>
+    </div>`,parameters:{docs:{description:{story:"Icons come in five preset sizes: xs, sm, md, lg, and xl. Choose the size that best fits your design context."}}}},o={render:()=>r`<div class="flex flex-wrap items-center justify-between gap-4 px-4">
+      <div class="flex flex-col items-center gap-2">
+        <btu-icon symbol="zap" size="xl" gradient="primary"></btu-icon>
+        <span class="text-xs font-bold">primary</span>
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <btu-icon symbol="check-circle" size="xl" gradient="success"></btu-icon>
+        <span class="text-xs font-bold">success</span>
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <btu-icon symbol="trash-2" size="xl" gradient="error"></btu-icon>
+        <span class="text-xs font-bold">error</span>
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <btu-icon symbol="alert-triangle" size="xl" gradient="warning"></btu-icon>
+        <span class="text-xs font-bold">warning</span>
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <btu-icon symbol="sparkles" size="xl" gradient="ai"></btu-icon>
+        <span class="text-xs font-bold">ai</span>
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <btu-icon symbol="info" size="xl" gradient="purple"></btu-icon>
+        <span class="text-xs font-bold">purple</span>
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <btu-icon symbol="book" size="xl" gradient="teal"></btu-icon>
+        <span class="text-xs font-bold">teal</span>
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <btu-icon symbol="flower" size="xl" gradient="rose"></btu-icon>
+        <span class="text-xs font-bold">rose</span>
+      </div>
+    </div>`,parameters:{docs:{description:{story:"Icons support gradient fills using the following theme colors. Set the `gradient` attribute to one of the theme colors and watch the icon's color come to life! Note that gradient icons use mask-based rendering for smooth color transitions."}}}},a={render:()=>r`<div class="flex flex-col gap-6">
+      <div class="flex items-center gap-2">
+        <strong>Custom sizing:</strong>
+        <btu-icon symbol="trophy" size="md" style="--Icon-size: 4rem" class="text-warning-500"></btu-icon>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <strong>Filled icons:</strong>
+        <div class="flex items-center gap-3">
+          <btu-icon symbol="star" size="xl" class="text-warning-500" style="--Icon-fill: currentColor"></btu-icon>
+          <btu-icon symbol="heart" size="xl" class="text-error-600" style="--Icon-fill: currentColor"></btu-icon>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-3">
+        <strong>RTL language support:</strong>
+        <div class="flex flex-col gap-3 rounded-lg border border-gray-200 bg-gray-50 p-4 text-gray-900">
+          <div class="flex items-center gap-2">
+            <span class="text-sm">Open panel</span>
+            <btu-icon symbol="panel-right-close" size="md"></btu-icon>
+          </div>
+          <div class="flex items-center gap-2" dir="rtl">
+            <span class="text-sm">افتح اللوحة</span>
+            <btu-icon symbol="panel-right-close" size="md" class="rtl:-scale-x-100"></btu-icon>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <strong>Unlabeled icon button (A11y concern!):</strong>
+        <button class="bg-error-200 hover:bg-error-300 rounded p-2">
+          <btu-icon symbol="trash-2" size="md" class="text-gray-900"></btu-icon>
+        </button>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <strong>Labeled via <code>aria-label</code> and <code>title</code>:</strong>
+        <button
+          class="bg-primary-600 hover:bg-primary-800 rounded p-2 text-white"
+          aria-label="Favorite this item"
+          title="Favorite this item"
+        >
+          <btu-icon symbol="heart" size="md"></btu-icon>
+        </button>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <strong>Labeled via accompanying text:</strong>
+        <button class="bg-primary-100 hover:bg-primary-200 text-primary-700 rounded p-2">
+          <btu-icon symbol="heart" size="md"></btu-icon>
+          <span class="ml-1">Favorite</span>
+        </button>
+      </div>
+    </div>`,parameters:{docs:{description:{story:'\n- **Custom sizing** is available via the `--Icon-size` CSS property for precise control. \n- You can create **filled icons** by setting the `--Icon-fill: currentColor` CSS property. Note that this works best with simple icons like "heart" or "star".\n\n- **RTL language support:** Directional icons can be flipped for right-to-left languages using Tailwind\'s `rtl:-scale-x-100` utility class. This ensures icons like panels, arrows, and navigation elements point in the correct direction.\n\n**Accessibility best practices:**\n- If an icon conveys information and there is no visible text to accompany it (e.g., a delete button with only a trash can icon), add an `aria-label` attribute to the component to help users using screen readers understand its purpose.\n- If an icon is purely decorative (e.g. a sparkle icon, accompanying text that already conveys meaning), add `aria-hidden="true"` to the icon to hide it from screen readers.\n- You may consider adding a tooltip (via `title` attribute) to icon buttons for better discoverability.'}}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  args: {}
+}`,...n.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  render: () => html\`<div class="flex items-center gap-4">
+      <btu-icon symbol="heart" size="xs"></btu-icon>
+      <btu-icon symbol="heart" size="sm"></btu-icon>
+      <btu-icon symbol="heart" size="md"></btu-icon>
+      <btu-icon symbol="heart" size="lg"></btu-icon>
+      <btu-icon symbol="heart" size="xl"></btu-icon>
+    </div>\`,
+  parameters: {
+    docs: {
+      description: {
+        story: \`Icons come in five preset sizes: xs, sm, md, lg, and xl. Choose the size that best fits your design context.\`
+      }
+    }
+  }
+}`,...i.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  render: () => html\`<div class="flex flex-wrap items-center justify-between gap-4 px-4">
+      <div class="flex flex-col items-center gap-2">
+        <btu-icon symbol="zap" size="xl" gradient="primary"></btu-icon>
+        <span class="text-xs font-bold">primary</span>
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <btu-icon symbol="check-circle" size="xl" gradient="success"></btu-icon>
+        <span class="text-xs font-bold">success</span>
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <btu-icon symbol="trash-2" size="xl" gradient="error"></btu-icon>
+        <span class="text-xs font-bold">error</span>
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <btu-icon symbol="alert-triangle" size="xl" gradient="warning"></btu-icon>
+        <span class="text-xs font-bold">warning</span>
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <btu-icon symbol="sparkles" size="xl" gradient="ai"></btu-icon>
+        <span class="text-xs font-bold">ai</span>
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <btu-icon symbol="info" size="xl" gradient="purple"></btu-icon>
+        <span class="text-xs font-bold">purple</span>
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <btu-icon symbol="book" size="xl" gradient="teal"></btu-icon>
+        <span class="text-xs font-bold">teal</span>
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <btu-icon symbol="flower" size="xl" gradient="rose"></btu-icon>
+        <span class="text-xs font-bold">rose</span>
+      </div>
+    </div>\`,
+  parameters: {
+    docs: {
+      description: {
+        story: \`Icons support gradient fills using the following theme colors. Set the \\\`gradient\\\` attribute to one of the theme colors and watch the icon's color come to life! Note that gradient icons use mask-based rendering for smooth color transitions.\`
+      }
+    }
+  }
+}`,...o.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  render: () => html\`<div class="flex flex-col gap-6">
+      <div class="flex items-center gap-2">
+        <strong>Custom sizing:</strong>
+        <btu-icon symbol="trophy" size="md" style="--Icon-size: 4rem" class="text-warning-500"></btu-icon>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <strong>Filled icons:</strong>
+        <div class="flex items-center gap-3">
+          <btu-icon symbol="star" size="xl" class="text-warning-500" style="--Icon-fill: currentColor"></btu-icon>
+          <btu-icon symbol="heart" size="xl" class="text-error-600" style="--Icon-fill: currentColor"></btu-icon>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-3">
+        <strong>RTL language support:</strong>
+        <div class="flex flex-col gap-3 rounded-lg border border-gray-200 bg-gray-50 p-4 text-gray-900">
+          <div class="flex items-center gap-2">
+            <span class="text-sm">Open panel</span>
+            <btu-icon symbol="panel-right-close" size="md"></btu-icon>
+          </div>
+          <div class="flex items-center gap-2" dir="rtl">
+            <span class="text-sm">افتح اللوحة</span>
+            <btu-icon symbol="panel-right-close" size="md" class="rtl:-scale-x-100"></btu-icon>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <strong>Unlabeled icon button (A11y concern!):</strong>
+        <button class="bg-error-200 hover:bg-error-300 rounded p-2">
+          <btu-icon symbol="trash-2" size="md" class="text-gray-900"></btu-icon>
+        </button>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <strong>Labeled via <code>aria-label</code> and <code>title</code>:</strong>
+        <button
+          class="bg-primary-600 hover:bg-primary-800 rounded p-2 text-white"
+          aria-label="Favorite this item"
+          title="Favorite this item"
+        >
+          <btu-icon symbol="heart" size="md"></btu-icon>
+        </button>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <strong>Labeled via accompanying text:</strong>
+        <button class="bg-primary-100 hover:bg-primary-200 text-primary-700 rounded p-2">
+          <btu-icon symbol="heart" size="md"></btu-icon>
+          <span class="ml-1">Favorite</span>
+        </button>
+      </div>
+    </div>\`,
+  parameters: {
+    docs: {
+      description: {
+        story: \`
+- **Custom sizing** is available via the \\\`--Icon-size\\\` CSS property for precise control. 
+- You can create **filled icons** by setting the \\\`--Icon-fill: currentColor\\\` CSS property. Note that this works best with simple icons like "heart" or "star".
+
+- **RTL language support:** Directional icons can be flipped for right-to-left languages using Tailwind's \\\`rtl:-scale-x-100\\\` utility class. This ensures icons like panels, arrows, and navigation elements point in the correct direction.
+
+**Accessibility best practices:**
+- If an icon conveys information and there is no visible text to accompany it (e.g., a delete button with only a trash can icon), add an \\\`aria-label\\\` attribute to the component to help users using screen readers understand its purpose.
+- If an icon is purely decorative (e.g. a sparkle icon, accompanying text that already conveys meaning), add \\\`aria-hidden="true"\\\` to the icon to hide it from screen readers.
+- You may consider adding a tooltip (via \\\`title\\\` attribute) to icon buttons for better discoverability.\`
+      }
+    }
+  }
+}`,...a.parameters?.docs?.source}}};const h=["Default","Sizes","GradientIcons","AdvancedUsage"];export{a as AdvancedUsage,n as Default,o as GradientIcons,i as Sizes,h as __namedExportsOrder,v as default};