@brightspot/ui 5.0.3-toggleable-fix.0 → 5.1.0

package/dist/storybook/assets/Card.stories-BNMJ-H5I.js

@@ -0,0 +1,556 @@
+import{g as u,x as e}from"./iframe-BqpRijx3.js";import{o as p}from"./style-map-DukvFNCc.js";import"./preload-helper-PPVm8Dsz.js";const{events:m,args:b,argTypes:l}=u("btu-card"),h=[1,2,3,4,5,6],f={title:"Components/Card",component:"btu-card",tags:["autodocs"],parameters:{docs:{subtitle:"A flexible content container for presenting and organizing information",description:{component:`
+<h3>When to use:</h3>
+<ul>
+  <li>To present content items in a browsable grid or list — search results, board views, quick start cards</li>
+  <li>When content needs a thumbnail, status badge, or metadata fields alongside its title</li>
+  <li>When items need to be selectable, draggable, or navigable as a unit</li>
+</ul>
+<h3>Accessibility:</h3>
+<ul>
+  <li>Cards are focusable when they have an href set (unless disabled)</li>
+</ul>
+        `}},actions:{handles:m},controls:{expanded:!0}},args:{...b,compact:!1,heading:"Content heading",description:"Content Type · Summary Field · Summary Field","heading-level":2},argTypes:{...l,"--card-min-width":{table:{disable:!0}},"--card-background":{table:{disable:!0}},"--card-border":{table:{disable:!0}},"--card-radius":{table:{disable:!0}},"--card-img-ratio":{table:{disable:!0}},"--card-img-fit":{table:{disable:!0}},"--card-icon-background":{table:{disable:!0}},compact:{...l.compact,control:{type:"boolean"}},"heading-level":{...l["heading-level"],control:{type:"select"},options:h,description:"Heading level (1-6) for the card heading element. Drives the semantic h1–h6 tag (default: 2)."},customMinWidth:{name:"--card-min-width",control:{type:"text"},description:"Minimum width of the card (default: 160px)",table:{category:"CSS Properties"}},customBg:{name:"--card-background",control:{type:"color"},description:"Background color",table:{category:"CSS Properties"}},customBorder:{name:"--card-border",control:{type:"text"},description:"Border shorthand (default: 1px solid gray-200)",table:{category:"CSS Properties"}},customRadius:{name:"--card-radius",control:{type:"text"},description:"Corner rounding (default: 8px)",table:{category:"CSS Properties"}},customImgRatio:{name:"--card-img-ratio",control:{type:"text"},description:"Fixed aspect ratio for the thumbnail when an `<img>` child is present (default: 16 / 9)",table:{category:"CSS Properties"}},customImgFit:{name:"--card-img-fit",control:{type:"select"},options:["contain","cover"],description:"Object-fit mode for the `<img>` child thumbnail (default: contain)",table:{category:"CSS Properties"}},customIconBg:{name:"--card-icon-background",control:{type:"color"},description:"Background color behind the `<btu-icon>` child (compact card and media-image fallback) (default: gray-100)",table:{category:"CSS Properties"}}},render:t=>{const a={};return t.customMinWidth&&(a["--card-min-width"]=t.customMinWidth),t.customBg&&(a["--card-background"]=t.customBg),t.customBorder&&(a["--card-border"]=t.customBorder),t.customRadius&&(a["--card-radius"]=t.customRadius),t.customImgRatio&&(a["--card-img-ratio"]=t.customImgRatio),t.customImgFit&&(a["--card-img-fit"]=t.customImgFit),t.customIconBg&&(a["--card-icon-background"]=t.customIconBg),e`
+      <div style="max-width: 262px;">
+        <btu-card
+          ?compact="${t.compact}"
+          heading="${t.heading}"
+          heading-level="${t["heading-level"]}"
+          description="${t.description}"
+          ?disabled="${t.disabled}"
+          href="${t.href}"
+          style=${p(a)}
+        >
+        </btu-card>
+      </div>
+    `}},i={args:{}},n={render:()=>e`
+    <div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: start;">
+      <div style="width: 262px;">
+        <btu-card heading="Media Card" description="Content Type · Summary Field · Summary Field">
+          <img src="https://picsum.photos/seed/image/300/225" alt="Article thumbnail" />
+          <btu-badge variant="info" size="sm">Published</btu-badge>
+        </btu-card>
+      </div>
+      <div style="width: 262px;">
+        <btu-card heading="Broken image" description="Falls back to the composed icon">
+          <img src="https://example.com/does-not-exist.jpg" alt="Missing thumbnail" />
+          <btu-icon symbol="file-text"></btu-icon>
+          <btu-badge variant="warning" size="sm">Draft</btu-badge>
+        </btu-card>
+      </div>
+      <div style="width: 262px;">
+        <btu-card heading="Icon only" description="No image — icon shown in the image area">
+          <btu-icon symbol="clipboard-check"></btu-icon>
+          <btu-badge variant="info" size="sm">Status</btu-badge>
+        </btu-card>
+      </div>
+      <div style="width: 262px;">
+        <btu-card heading="Text Card" description="No image or icon">
+          <btu-badge variant="success" size="sm">Approved</btu-badge>
+        </btu-card>
+      </div>
+    </div>
+  `,parameters:{docs:{description:{story:'The layout is driven by composition. This way the implementer has control over the inner components, such as badge.\n\n- A card with an `<img>` direct child renders the image above the text content.\n- A `<btu-icon>` direct child shows in the image area — as the fallback when an image fails to load, or as the only media when no `<img>` is provided (see "Icon only"). Without a composed icon, a failed image defaults to a `file-text` icon.\n- A `<btu-badge>` direct child renders a status badge in the top-left corner.\n'}}}},o={render:()=>{const t=a=>{a.stopPropagation(),alert("Action clicked — navigation prevented")};return e`
+      <div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: start;">
+        <div style="width: 262px;">
+          <btu-card
+            heading="Media Card"
+            description="Content Type · Summary Field · Summary Field"
+            href="https://example.com"
+          >
+            <img src="https://picsum.photos/seed/action/300/225" alt="Article thumbnail" />
+            <btu-badge variant="info" size="sm">Status</btu-badge>
+            <btu-checkbox slot="action"></btu-checkbox>
+            <btu-icon-button
+              slot="secondary-action"
+              symbol="info"
+              size="sm"
+              type="secondary-clear"
+              aria-label="Quick view"
+              @click=${t}
+            ></btu-icon-button>
+          </btu-card>
+        </div>
+        <div style="width: 262px;">
+          <btu-card
+            heading="Text Card"
+            description="Content Type · Summary Field · Summary Field"
+            href="https://example.com"
+          >
+            <btu-badge variant="info" size="sm">Draft</btu-badge>
+            <btu-icon-button
+              slot="action"
+              symbol="star"
+              size="sm"
+              type="secondary-clear"
+              aria-label="Favorite"
+              @click=${t}
+            ></btu-icon-button>
+            <btu-icon-button
+              slot="secondary-action"
+              symbol="info"
+              size="sm"
+              type="secondary-clear"
+              aria-label="Quick view"
+              @click=${t}
+            ></btu-icon-button>
+          </btu-card>
+        </div>
+        <div style="width: 262px;">
+          <btu-card
+            heading="Text Card — no badge"
+            description="Content Type · Summary Field · Summary Field"
+            href="https://example.com"
+          >
+            <btu-checkbox slot="action"></btu-checkbox>
+            <btu-icon-button
+              slot="secondary-action"
+              symbol="info"
+              size="sm"
+              type="secondary-clear"
+              aria-label="Quick view"
+              @click=${t}
+            ></btu-icon-button>
+          </btu-card>
+        </div>
+      </div>
+    `},parameters:{docs:{description:{story:'Cards expose two action positions, both pseudo-slots:\n\n- `slot="action"` — the top-right corner.\n- `slot="secondary-action"` — next to the title.\n\nA `<btu-checkbox>` action stays visible, while a `<btu-icon-button>` action is revealed on hover/focus.\n\nThese cards also have `href` set to demonstrate that clicking anywhere on the card navigates to the link, while clicking an action triggers its own handler without navigating. Tabbing focuses the card first, then the actions.'}}}},s={render:()=>e`
+    <div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: start;">
+      <div style="width: 262px;">
+        <btu-card heading="Content title" description="Content Type · Summary Field · Summary Field">
+          <btu-badge variant="info" size="sm">Status</btu-badge>
+          <div slot="fields">
+            <div class="flex flex-col">
+              <span class="text-xs font-medium" style="color: oklch(var(--btu-theme-gray-500))">Content Type</span>
+              <span class="text-xs font-medium" style="color: oklch(var(--btu-theme-gray-900))">Article</span>
+            </div>
+            <div class="flex flex-col">
+              <span class="text-xs font-medium" style="color: oklch(var(--btu-theme-gray-500))">Last Updated</span>
+              <span class="text-xs font-medium" style="color: oklch(var(--btu-theme-gray-900))"
+                >Thu, Dec 08 9:59 AM</span
+              >
+            </div>
+            <div class="flex flex-col gap-1">
+              <span class="text-xs font-medium" style="color: oklch(var(--btu-theme-gray-500))">Viewers</span>
+              <btu-avatar-group max="3" size="xs">
+                <btu-avatar fallback="AC" alt="Ashley" tooltip="Ashley" size="xs"></btu-avatar>
+                <btu-avatar fallback="DG" alt="Dylan" tooltip="Dylan" size="xs"></btu-avatar>
+                <btu-avatar fallback="JP" alt="Pencola" tooltip="Pencola" size="xs"></btu-avatar>
+                <btu-avatar fallback="JR" alt="John R." tooltip="John R." size="xs"></btu-avatar>
+                <btu-avatar fallback="KW" alt="Kat(e)" tooltip="Kat(e)" size="xs"></btu-avatar>
+                <btu-avatar fallback="KL" alt="hotpink" tooltip="hotpink" size="xs"></btu-avatar>
+                <btu-avatar fallback="ML" alt="Lunsford" tooltip="Lunsford" size="xs"></btu-avatar>
+                <btu-avatar fallback="MW" alt="Wardian" tooltip="Wardian" size="xs"></btu-avatar>
+              </btu-avatar-group>
+            </div>
+          </div>
+        </btu-card>
+      </div>
+      <div style="width: 262px;">
+        <btu-card heading="Media with fields" description="Content Type · Summary Field · Summary Field">
+          <img src="https://picsum.photos/seed/fields/300/225" alt="Article thumbnail" />
+          <btu-badge variant="info" size="sm">Status</btu-badge>
+          <div slot="fields">
+            <div class="flex flex-col">
+              <span class="text-xs font-medium" style="color: oklch(var(--btu-theme-gray-500))">Content Type</span>
+              <span class="text-xs font-medium" style="color: oklch(var(--btu-theme-gray-900))">Article</span>
+            </div>
+            <div class="flex flex-col">
+              <span class="text-xs font-medium" style="color: oklch(var(--btu-theme-gray-500))">Last Updated</span>
+              <span class="text-xs font-medium" style="color: oklch(var(--btu-theme-gray-900))"
+                >Thu, Dec 08 9:59 AM</span
+              >
+            </div>
+            <div class="flex flex-col gap-1">
+              <span class="text-xs font-medium" style="color: oklch(var(--btu-theme-gray-500))">Viewers</span>
+              <btu-avatar-group max="3" size="xs">
+                <btu-avatar fallback="AC" alt="Ashley" tooltip="Ashley" size="xs"></btu-avatar>
+                <btu-avatar fallback="DG" alt="Dylan" tooltip="Dylan" size="xs"></btu-avatar>
+                <btu-avatar fallback="JP" alt="Pencola" tooltip="Pencola" size="xs"></btu-avatar>
+                <btu-avatar fallback="JR" alt="John R." tooltip="John R." size="xs"></btu-avatar>
+                <btu-avatar fallback="KW" alt="Kat(e)" tooltip="Kat(e)" size="xs"></btu-avatar>
+              </btu-avatar-group>
+            </div>
+          </div>
+        </btu-card>
+      </div>
+    </div>
+  `,parameters:{docs:{description:{story:'Cards support a `slot="fields"` pseudo-slot for structured metadata. These cards show content type, last updated date, and a viewers section with an avatar group.'}}}},r={render:()=>e`
+    <div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: start;">
+      <div style="width: 262px;">
+        <btu-card compact heading="Quick Action" description="Quick start tile">
+          <btu-icon symbol="zap" gradient="primary"></btu-icon>
+          <btu-icon-button slot="action" symbol="star" size="sm" type="secondary-clear" aria-label="Favorite">
+          </btu-icon-button>
+        </btu-card>
+      </div>
+      <div style="width: 262px;">
+        <btu-card compact heading="New Document" description="Create a blank document">
+          <btu-icon symbol="file-plus" gradient="primary"></btu-icon>
+          <btu-icon-button slot="action" symbol="star" size="sm" type="secondary-clear" aria-label="Favorite">
+          </btu-icon-button>
+        </btu-card>
+      </div>
+    </div>
+  `,parameters:{docs:{description:{story:"Set the `compact` attribute for a quick-start tile with a featured icon. Provide the featured icon as a `<btu-icon>` direct child. Badge, image, fields, and secondary-action slots are ignored in this case. Only the top-right `action` slot is available."}}}},c={render:()=>e`
+    <div style="display: flex; flex-direction: column; gap: 1.5rem;">
+      <div>
+        <p
+          style="font-size: 0.75rem; font-weight: 500; margin-bottom: 0.75rem; color: oklch(var(--btu-theme-gray-500));"
+        >
+          contain (default)
+        </p>
+        <div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: start;">
+          <div style="width: 262px;">
+            <btu-card heading="Portrait">
+              <img src="https://picsum.photos/seed/portrait/400/600" alt="Portrait" />
+            </btu-card>
+          </div>
+          <div style="width: 262px;">
+            <btu-card heading="Landscape">
+              <img src="https://picsum.photos/seed/landscape/1200/300" alt="Landscape" />
+            </btu-card>
+          </div>
+          <div style="width: 262px;">
+            <btu-card heading="Square">
+              <img src="https://picsum.photos/seed/square/400/400" alt="Square" />
+            </btu-card>
+          </div>
+        </div>
+      </div>
+      <div>
+        <p
+          style="font-size: 0.75rem; font-weight: 500; margin-bottom: 0.75rem; color: oklch(var(--btu-theme-gray-500));"
+        >
+          cover (--card-img-fit: cover)
+        </p>
+        <div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: start;">
+          <div style="width: 262px;">
+            <btu-card heading="Portrait" style="--card-img-fit: cover;">
+              <img src="https://picsum.photos/seed/portrait/400/600" alt="Portrait" />
+            </btu-card>
+          </div>
+          <div style="width: 262px;">
+            <btu-card heading="Landscape" style="--card-img-fit: cover;">
+              <img src="https://picsum.photos/seed/landscape/1200/300" alt="Landscape" />
+            </btu-card>
+          </div>
+          <div style="width: 262px;">
+            <btu-card heading="Square" style="--card-img-fit: cover;">
+              <img src="https://picsum.photos/seed/square/400/400" alt="Square" />
+            </btu-card>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,parameters:{docs:{description:{story:"By default images use `object-fit: contain` so the full image is always visible. Set `--card-img-fit: cover` to fill the thumbnail area by cropping instead."}}}},d={render:()=>e`
+    <div style="display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));">
+      ${[1,2,3,4,5].map(t=>e`
+          <btu-card heading="Card ${t}" description="Content Type · Summary Field">
+            <btu-badge variant="info" size="sm">Content Status</btu-badge>
+          </btu-card>
+        `)}
+    </div>
+  `,parameters:{docs:{description:{story:"Cards are `width: 100%` by default and rely on the parent layout to control their size. A CSS grid with `repeat(auto-fill, minmax(220px, 1fr))` is a common responsive pattern."}}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  args: {}
+}`,...i.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: start;">
+      <div style="width: 262px;">
+        <btu-card heading="Media Card" description="Content Type · Summary Field · Summary Field">
+          <img src="https://picsum.photos/seed/image/300/225" alt="Article thumbnail" />
+          <btu-badge variant="info" size="sm">Published</btu-badge>
+        </btu-card>
+      </div>
+      <div style="width: 262px;">
+        <btu-card heading="Broken image" description="Falls back to the composed icon">
+          <img src="https://example.com/does-not-exist.jpg" alt="Missing thumbnail" />
+          <btu-icon symbol="file-text"></btu-icon>
+          <btu-badge variant="warning" size="sm">Draft</btu-badge>
+        </btu-card>
+      </div>
+      <div style="width: 262px;">
+        <btu-card heading="Icon only" description="No image — icon shown in the image area">
+          <btu-icon symbol="clipboard-check"></btu-icon>
+          <btu-badge variant="info" size="sm">Status</btu-badge>
+        </btu-card>
+      </div>
+      <div style="width: 262px;">
+        <btu-card heading="Text Card" description="No image or icon">
+          <btu-badge variant="success" size="sm">Approved</btu-badge>
+        </btu-card>
+      </div>
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: \`The layout is driven by composition. This way the implementer has control over the inner components, such as badge.
+
+- A card with an \\\`<img>\\\` direct child renders the image above the text content.
+- A \\\`<btu-icon>\\\` direct child shows in the image area — as the fallback when an image fails to load, or as the only media when no \\\`<img>\\\` is provided (see "Icon only"). Without a composed icon, a failed image defaults to a \\\`file-text\\\` icon.
+- A \\\`<btu-badge>\\\` direct child renders a status badge in the top-left corner.
+\`
+      }
+    }
+  }
+}`,...n.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const handleActionClick = (e: Event) => {
+      e.stopPropagation();
+      // eslint-disable-next-line no-alert
+      alert('Action clicked — navigation prevented');
+    };
+    return html\`
+      <div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: start;">
+        <div style="width: 262px;">
+          <btu-card
+            heading="Media Card"
+            description="Content Type · Summary Field · Summary Field"
+            href="https://example.com"
+          >
+            <img src="https://picsum.photos/seed/action/300/225" alt="Article thumbnail" />
+            <btu-badge variant="info" size="sm">Status</btu-badge>
+            <btu-checkbox slot="action"></btu-checkbox>
+            <btu-icon-button
+              slot="secondary-action"
+              symbol="info"
+              size="sm"
+              type="secondary-clear"
+              aria-label="Quick view"
+              @click=\${handleActionClick}
+            ></btu-icon-button>
+          </btu-card>
+        </div>
+        <div style="width: 262px;">
+          <btu-card
+            heading="Text Card"
+            description="Content Type · Summary Field · Summary Field"
+            href="https://example.com"
+          >
+            <btu-badge variant="info" size="sm">Draft</btu-badge>
+            <btu-icon-button
+              slot="action"
+              symbol="star"
+              size="sm"
+              type="secondary-clear"
+              aria-label="Favorite"
+              @click=\${handleActionClick}
+            ></btu-icon-button>
+            <btu-icon-button
+              slot="secondary-action"
+              symbol="info"
+              size="sm"
+              type="secondary-clear"
+              aria-label="Quick view"
+              @click=\${handleActionClick}
+            ></btu-icon-button>
+          </btu-card>
+        </div>
+        <div style="width: 262px;">
+          <btu-card
+            heading="Text Card — no badge"
+            description="Content Type · Summary Field · Summary Field"
+            href="https://example.com"
+          >
+            <btu-checkbox slot="action"></btu-checkbox>
+            <btu-icon-button
+              slot="secondary-action"
+              symbol="info"
+              size="sm"
+              type="secondary-clear"
+              aria-label="Quick view"
+              @click=\${handleActionClick}
+            ></btu-icon-button>
+          </btu-card>
+        </div>
+      </div>
+    \`;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: \`Cards expose two action positions, both pseudo-slots:
+
+- \\\`slot="action"\\\` — the top-right corner.
+- \\\`slot="secondary-action"\\\` — next to the title.
+
+A \\\`<btu-checkbox>\\\` action stays visible, while a \\\`<btu-icon-button>\\\` action is revealed on hover/focus.
+
+These cards also have \\\`href\\\` set to demonstrate that clicking anywhere on the card navigates to the link, while clicking an action triggers its own handler without navigating. Tabbing focuses the card first, then the actions.\`
+      }
+    }
+  }
+}`,...o.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: start;">
+      <div style="width: 262px;">
+        <btu-card heading="Content title" description="Content Type · Summary Field · Summary Field">
+          <btu-badge variant="info" size="sm">Status</btu-badge>
+          <div slot="fields">
+            <div class="flex flex-col">
+              <span class="text-xs font-medium" style="color: oklch(var(--btu-theme-gray-500))">Content Type</span>
+              <span class="text-xs font-medium" style="color: oklch(var(--btu-theme-gray-900))">Article</span>
+            </div>
+            <div class="flex flex-col">
+              <span class="text-xs font-medium" style="color: oklch(var(--btu-theme-gray-500))">Last Updated</span>
+              <span class="text-xs font-medium" style="color: oklch(var(--btu-theme-gray-900))"
+                >Thu, Dec 08 9:59 AM</span
+              >
+            </div>
+            <div class="flex flex-col gap-1">
+              <span class="text-xs font-medium" style="color: oklch(var(--btu-theme-gray-500))">Viewers</span>
+              <btu-avatar-group max="3" size="xs">
+                <btu-avatar fallback="AC" alt="Ashley" tooltip="Ashley" size="xs"></btu-avatar>
+                <btu-avatar fallback="DG" alt="Dylan" tooltip="Dylan" size="xs"></btu-avatar>
+                <btu-avatar fallback="JP" alt="Pencola" tooltip="Pencola" size="xs"></btu-avatar>
+                <btu-avatar fallback="JR" alt="John R." tooltip="John R." size="xs"></btu-avatar>
+                <btu-avatar fallback="KW" alt="Kat(e)" tooltip="Kat(e)" size="xs"></btu-avatar>
+                <btu-avatar fallback="KL" alt="hotpink" tooltip="hotpink" size="xs"></btu-avatar>
+                <btu-avatar fallback="ML" alt="Lunsford" tooltip="Lunsford" size="xs"></btu-avatar>
+                <btu-avatar fallback="MW" alt="Wardian" tooltip="Wardian" size="xs"></btu-avatar>
+              </btu-avatar-group>
+            </div>
+          </div>
+        </btu-card>
+      </div>
+      <div style="width: 262px;">
+        <btu-card heading="Media with fields" description="Content Type · Summary Field · Summary Field">
+          <img src="https://picsum.photos/seed/fields/300/225" alt="Article thumbnail" />
+          <btu-badge variant="info" size="sm">Status</btu-badge>
+          <div slot="fields">
+            <div class="flex flex-col">
+              <span class="text-xs font-medium" style="color: oklch(var(--btu-theme-gray-500))">Content Type</span>
+              <span class="text-xs font-medium" style="color: oklch(var(--btu-theme-gray-900))">Article</span>
+            </div>
+            <div class="flex flex-col">
+              <span class="text-xs font-medium" style="color: oklch(var(--btu-theme-gray-500))">Last Updated</span>
+              <span class="text-xs font-medium" style="color: oklch(var(--btu-theme-gray-900))"
+                >Thu, Dec 08 9:59 AM</span
+              >
+            </div>
+            <div class="flex flex-col gap-1">
+              <span class="text-xs font-medium" style="color: oklch(var(--btu-theme-gray-500))">Viewers</span>
+              <btu-avatar-group max="3" size="xs">
+                <btu-avatar fallback="AC" alt="Ashley" tooltip="Ashley" size="xs"></btu-avatar>
+                <btu-avatar fallback="DG" alt="Dylan" tooltip="Dylan" size="xs"></btu-avatar>
+                <btu-avatar fallback="JP" alt="Pencola" tooltip="Pencola" size="xs"></btu-avatar>
+                <btu-avatar fallback="JR" alt="John R." tooltip="John R." size="xs"></btu-avatar>
+                <btu-avatar fallback="KW" alt="Kat(e)" tooltip="Kat(e)" size="xs"></btu-avatar>
+              </btu-avatar-group>
+            </div>
+          </div>
+        </btu-card>
+      </div>
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: \`Cards support a \\\`slot="fields"\\\` pseudo-slot for structured metadata. These cards show content type, last updated date, and a viewers section with an avatar group.\`
+      }
+    }
+  }
+}`,...s.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: start;">
+      <div style="width: 262px;">
+        <btu-card compact heading="Quick Action" description="Quick start tile">
+          <btu-icon symbol="zap" gradient="primary"></btu-icon>
+          <btu-icon-button slot="action" symbol="star" size="sm" type="secondary-clear" aria-label="Favorite">
+          </btu-icon-button>
+        </btu-card>
+      </div>
+      <div style="width: 262px;">
+        <btu-card compact heading="New Document" description="Create a blank document">
+          <btu-icon symbol="file-plus" gradient="primary"></btu-icon>
+          <btu-icon-button slot="action" symbol="star" size="sm" type="secondary-clear" aria-label="Favorite">
+          </btu-icon-button>
+        </btu-card>
+      </div>
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: \`Set the \\\`compact\\\` attribute for a quick-start tile with a featured icon. Provide the featured icon as a \\\`<btu-icon>\\\` direct child. Badge, image, fields, and secondary-action slots are ignored in this case. Only the top-right \\\`action\\\` slot is available.\`
+      }
+    }
+  }
+}`,...r.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <div style="display: flex; flex-direction: column; gap: 1.5rem;">
+      <div>
+        <p
+          style="font-size: 0.75rem; font-weight: 500; margin-bottom: 0.75rem; color: oklch(var(--btu-theme-gray-500));"
+        >
+          contain (default)
+        </p>
+        <div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: start;">
+          <div style="width: 262px;">
+            <btu-card heading="Portrait">
+              <img src="https://picsum.photos/seed/portrait/400/600" alt="Portrait" />
+            </btu-card>
+          </div>
+          <div style="width: 262px;">
+            <btu-card heading="Landscape">
+              <img src="https://picsum.photos/seed/landscape/1200/300" alt="Landscape" />
+            </btu-card>
+          </div>
+          <div style="width: 262px;">
+            <btu-card heading="Square">
+              <img src="https://picsum.photos/seed/square/400/400" alt="Square" />
+            </btu-card>
+          </div>
+        </div>
+      </div>
+      <div>
+        <p
+          style="font-size: 0.75rem; font-weight: 500; margin-bottom: 0.75rem; color: oklch(var(--btu-theme-gray-500));"
+        >
+          cover (--card-img-fit: cover)
+        </p>
+        <div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: start;">
+          <div style="width: 262px;">
+            <btu-card heading="Portrait" style="--card-img-fit: cover;">
+              <img src="https://picsum.photos/seed/portrait/400/600" alt="Portrait" />
+            </btu-card>
+          </div>
+          <div style="width: 262px;">
+            <btu-card heading="Landscape" style="--card-img-fit: cover;">
+              <img src="https://picsum.photos/seed/landscape/1200/300" alt="Landscape" />
+            </btu-card>
+          </div>
+          <div style="width: 262px;">
+            <btu-card heading="Square" style="--card-img-fit: cover;">
+              <img src="https://picsum.photos/seed/square/400/400" alt="Square" />
+            </btu-card>
+          </div>
+        </div>
+      </div>
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'By default images use \`object-fit: contain\` so the full image is always visible. Set \`--card-img-fit: cover\` to fill the thumbnail area by cropping instead.'
+      }
+    }
+  }
+}`,...c.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <div style="display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));">
+      \${[1, 2, 3, 4, 5].map(i => html\`
+          <btu-card heading="Card \${i}" description="Content Type · Summary Field">
+            <btu-badge variant="info" size="sm">Content Status</btu-badge>
+          </btu-card>
+        \`)}
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: \`Cards are \\\`width: 100%\\\` by default and rely on the parent layout to control their size. A CSS grid with \\\`repeat(auto-fill, minmax(220px, 1fr))\\\` is a common responsive pattern.\`
+      }
+    }
+  }
+}`,...d.parameters?.docs?.source}}};const x=["Default","Composition","ActionSlots","FieldsSlot","Compact","ImageCropping","Sizing"];export{o as ActionSlots,r as Compact,n as Composition,i as Default,s as FieldsSlot,c as ImageCropping,d as Sizing,x as __namedExportsOrder,f as default};

package/dist/storybook/assets/{Celebrate.stories-KtFU9NEQ.js → Celebrate.stories-Cue8O4hb.js}

@@ -1,4 +1,4 @@
-import{x as a}from"./iframe-C3TUQi31.js";import{b as i}from"./celebrate-KwPoF1K3.js";import{B as r}from"./Button-TUtCVpwY.js";import"./preload-helper-PPVm8Dsz.js";import"./position-CFNQy3J6.js";const m={title:"Effects/Celebrate",tags:["autodocs"],parameters:{docs:{subtitle:"A sparkle burst effect for delightful micro-interactions",description:{component:`
+import{x as a}from"./iframe-BqpRijx3.js";import{b as i}from"./celebrate-KwPoF1K3.js";import{B as r}from"./Button-DuuAvVjP.js";import"./preload-helper-PPVm8Dsz.js";import"./position-CFNQy3J6.js";const m={title:"Effects/Celebrate",tags:["autodocs"],parameters:{docs:{subtitle:"A sparkle burst effect for delightful micro-interactions",description:{component:`
 A celebratory sparkle animation that fires from a given position. Colored circles, ellipses, and sparkle particles burst outward using CSS offset-path animations.
 
 ### Usage
@@ -47,21 +47,21 @@ el.dispatchEvent(new CustomEvent('btu-effect-celebrate', {
           <div class="flex flex-wrap items-center gap-4">
             <button
               @click=${e}
-              class="btu-button-primary btu-button-fill btu-button-contained btu-button-lg btu-button"
+              class="btu-button-fill btu-button-contained btu-button btu-button-primary btu-button-lg"
             >
               <btu-icon name="star" class="btu-icon btu-icon-sm"></btu-icon>
               Star
             </button>
             <button
               @click=${e}
-              class="btu-button-success btu-button-fill btu-button-contained btu-button-lg btu-button"
+              class="btu-button-fill btu-button-contained btu-button btu-button-success btu-button-lg"
             >
               <btu-icon name="check" class="btu-icon btu-icon-sm"></btu-icon>
               Complete
             </button>
             <button
               @click=${e}
-              class="btu-button-error btu-button-fill btu-button-contained btu-button-lg btu-button"
+              class="btu-button-fill btu-button-contained btu-button btu-button-error btu-button-lg"
             >
               <btu-icon name="heart" class="btu-icon btu-icon-sm"></btu-icon>
               Love
@@ -150,21 +150,21 @@ el.dispatchEvent(new CustomEvent('btu-effect-celebrate', {
           <div class="flex flex-wrap items-center gap-4">
             <button
               @click=\${onButtonClick}
-              class="btu-button-primary btu-button-fill btu-button-contained btu-button-lg btu-button"
+              class="btu-button-fill btu-button-contained btu-button btu-button-primary btu-button-lg"
             >
               <btu-icon name="star" class="btu-icon btu-icon-sm"></btu-icon>
               Star
             </button>
             <button
               @click=\${onButtonClick}
-              class="btu-button-success btu-button-fill btu-button-contained btu-button-lg btu-button"
+              class="btu-button-fill btu-button-contained btu-button btu-button-success btu-button-lg"
             >
               <btu-icon name="check" class="btu-icon btu-icon-sm"></btu-icon>
               Complete
             </button>
             <button
               @click=\${onButtonClick}
-              class="btu-button-error btu-button-fill btu-button-contained btu-button-lg btu-button"
+              class="btu-button-fill btu-button-contained btu-button btu-button-error btu-button-lg"
             >
               <btu-icon name="heart" class="btu-icon btu-icon-sm"></btu-icon>
               Love

package/dist/storybook/assets/{Checkbox.stories-CDg2caKU.js → Checkbox.stories-DLe4npId.js}

@@ -1,4 +1,4 @@
-import{g as x,x as p}from"./iframe-C3TUQi31.js";import{o as t}from"./if-defined-BkzXcv-a.js";import{o as g}from"./style-map-ADugLljH.js";import"./preload-helper-PPVm8Dsz.js";const{events:y,args:v,argTypes:f}=x("btu-checkbox"),S={customColorPrimary:"--checkbox-color-primary",customColorBorder:"--checkbox-color-border",customColorError:"--checkbox-color-error",customBorderRadius:"--checkbox-border-radius",customLabelSpacing:"--checkbox-label-spacing"},C=e=>Object.entries(S).reduce((r,[h,k])=>(e[h]&&(r[k]=e[h]),r),{}),P={title:"Components/Checkbox",component:"btu-checkbox",tags:["autodocs"],parameters:{docs:{subtitle:"A checkbox for selecting one or more options",description:{component:`
+import{g as x,x as p}from"./iframe-BqpRijx3.js";import{o as t}from"./if-defined-0srVwUDm.js";import{o as g}from"./style-map-DukvFNCc.js";import"./preload-helper-PPVm8Dsz.js";const{events:y,args:v,argTypes:f}=x("btu-checkbox"),S={customColorPrimary:"--checkbox-color-primary",customColorBorder:"--checkbox-color-border",customColorError:"--checkbox-color-error",customBorderRadius:"--checkbox-border-radius",customLabelSpacing:"--checkbox-label-spacing"},C=e=>Object.entries(S).reduce((r,[h,k])=>(e[h]&&(r[k]=e[h]),r),{}),P={title:"Components/Checkbox",component:"btu-checkbox",tags:["autodocs"],parameters:{docs:{subtitle:"A checkbox for selecting one or more options",description:{component:`
 <h3>When to use:</h3>
 <ul>
   <li>For selecting one or more options from a set</li>

package/dist/storybook/assets/{CircularProgress.stories-C0OdRoxU.js → CircularProgress.stories-BHB2K82M.js}

@@ -1,4 +1,4 @@
-import{g as S,E as h,x as T}from"./iframe-C3TUQi31.js";import{o as $}from"./style-map-ADugLljH.js";import"./preload-helper-PPVm8Dsz.js";const{events:V,args:A,argTypes:u}=S("btu-circular-progress"),O={title:"Components/Circular Progress",component:"btu-circular-progress",tags:["autodocs"],parameters:{docs:{subtitle:"A component for showing loading states or progress",description:{component:`
+import{g as S,E as h,x as T}from"./iframe-BqpRijx3.js";import{o as $}from"./style-map-DukvFNCc.js";import"./preload-helper-PPVm8Dsz.js";const{events:V,args:A,argTypes:u}=S("btu-circular-progress"),O={title:"Components/Circular Progress",component:"btu-circular-progress",tags:["autodocs"],parameters:{docs:{subtitle:"A component for showing loading states or progress",description:{component:`
 <h3>When to use:</h3>
 <ul>
   <li>To indicate loading or processing state</li>