@brightspot/ui 1.11.0 → 3.0.1-cms-ui-migration.0

package/dist/storybook/assets/ButtonGroup.stories-D6nkkXxD.js

@@ -0,0 +1,588 @@
+import{g as k,x as e}from"./iframe-D5Uwm8Zd.js";import{o}from"./style-map-Cy6U2K_U.js";import"./preload-helper-PPVm8Dsz.js";const{events:w,args:f,argTypes:n}=k("btu-button-group");function u(t){const a={};return t.customGap&&(a["--button-group-gap"]=t.customGap),t.customBorderRadius&&(a["--button-group-border-radius"]=t.customBorderRadius),t.customBorderColor&&(a["--button-group-border-color"]=t.customBorderColor),a}const z={title:"Components/Button Group",component:"btu-button-group",tags:["autodocs"],parameters:{docs:{subtitle:"btu-button-group",description:{component:`
+A semantic container for grouping related buttons together.
+
+<h3>When to use:</h3>
+<ul>
+  <li>To visually and semantically group related buttons (e.g., text formatting, alignment)</li>
+  <li>To create toggle/selection groups (single-select or multi-select)</li>
+  <li>In toolbars, filter bars, and action clusters</li>
+</ul>
+
+<h3>Variants:</h3>
+<ul>
+  <li><strong>connected</strong> — Buttons are joined with collapsed borders</li>
+  <li><strong>spaced</strong> — Buttons have a gap between them</li>
+</ul>
+
+<h3>Keyboard Navigation (selection modes):</h3>
+<ul>
+  <li><strong>Single select:</strong> Arrow keys move focus and immediately activate the focused button</li>
+  <li><strong>Multiple select:</strong> Arrow keys move focus only; Space/Enter toggles the focused button</li>
+  <li><strong>Home / End</strong> — Jump to first / last button</li>
+  <li><strong>Tab</strong> — Enter and exit the group</li>
+</ul>
+        `}},actions:{handles:w},controls:{expanded:!0}},args:{...f,label:"Actions",orientation:"horizontal",variant:"connected",size:"md",disabled:!1,selection:"none",value:""},argTypes:{...n,"--button-group-gap":{table:{disable:!0}},"--button-group-border-radius":{table:{disable:!0}},"--button-group-border-color":{table:{disable:!0}},size:{...n.size,control:{type:"select"},options:["sm","md","lg"]},orientation:{...n.orientation,control:{type:"select"},options:["horizontal","vertical"]},variant:{...n.variant,control:{type:"select"},options:["connected","spaced"]},selection:{...n.selection,control:{type:"select"},options:["none","single","multiple"]},customGap:{name:"--button-group-gap",control:{type:"text"},description:'Space between buttons when variant="spaced"',table:{category:"css properties",defaultValue:{summary:"spacing.sm"}}},customBorderRadius:{name:"--button-group-border-radius",control:{type:"text"},description:'Corner radius of outer edges when variant="connected"',table:{category:"css properties"}},customBorderColor:{name:"--button-group-border-color",control:{type:"color"},description:"Internal divider color between connected buttons",table:{category:"css properties"}}},render:t=>e`
+    <btu-button-group
+      label=${t.label}
+      orientation=${t.orientation}
+      variant=${t.variant}
+      size=${t.size}
+      ?disabled=${t.disabled}
+      selection=${t.selection}
+      value=${t.value}
+      style=${o(u(t))}
+    >
+      <button class="btu-button-gray btu-button-outline btu-button" value="cut">Cut</button>
+      <button class="btu-button-gray btu-button-outline btu-button" value="copy">Copy</button>
+      <button class="btu-button-gray btu-button-outline btu-button" value="paste">Paste</button>
+    </btu-button-group>
+  `},r={},b={args:{variant:"spaced"},parameters:{docs:{description:{story:"Buttons rendered with a gap between them instead of joined borders."}}}},l={args:{orientation:"vertical"},parameters:{docs:{description:{story:"Vertical layout with connected (joined) buttons."}}}},s={args:{orientation:"vertical",variant:"spaced"},parameters:{docs:{description:{story:"Vertical layout with spaced buttons."}}}},i={render:()=>e`
+    <div style="display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
+      <btu-button-group label="Small actions" size="sm">
+        <button class="btu-button-gray btu-button-outline btu-button" value="cut">Cut</button>
+        <button class="btu-button-gray btu-button-outline btu-button" value="copy">Copy</button>
+        <button class="btu-button-gray btu-button-outline btu-button" value="paste">Paste</button>
+      </btu-button-group>
+      <btu-button-group label="Medium actions" size="md">
+        <button class="btu-button-gray btu-button-outline btu-button" value="cut">Cut</button>
+        <button class="btu-button-gray btu-button-outline btu-button" value="copy">Copy</button>
+        <button class="btu-button-gray btu-button-outline btu-button" value="paste">Paste</button>
+      </btu-button-group>
+      <btu-button-group label="Large actions" size="lg">
+        <button class="btu-button-gray btu-button-outline btu-button" value="cut">Cut</button>
+        <button class="btu-button-gray btu-button-outline btu-button" value="copy">Copy</button>
+        <button class="btu-button-gray btu-button-outline btu-button" value="paste">Paste</button>
+      </btu-button-group>
+    </div>
+  `,parameters:{docs:{description:{story:"The group propagates its `size` to all child buttons. `sm`, `md`, and `lg` shown."}}}},c={args:{disabled:!0},parameters:{docs:{description:{story:'Setting `disabled` on the group disables all child buttons and sets `aria-disabled="true"`.'}}}},d={args:{label:"Text alignment",selection:"single",value:"center"},render:t=>e`
+    <btu-button-group
+      label=${t.label}
+      selection=${t.selection}
+      value=${t.value}
+      variant=${t.variant}
+      size=${t.size}
+      ?disabled=${t.disabled}
+      style=${o(u(t))}
+    >
+      <button class="btu-button-gray btu-button-outline btu-button" value="left">Left</button>
+      <button class="btu-button-gray btu-button-outline btu-button" value="center">Center</button>
+      <button class="btu-button-gray btu-button-outline btu-button" value="right">Right</button>
+      <button class="btu-button-gray btu-button-outline btu-button" value="justify">Justify</button>
+    </btu-button-group>
+  `,parameters:{docs:{description:{story:"Single selection mode — one button active at a time. Click the active button to deselect. Arrow keys move and activate."}}}},p={args:{label:"Text formatting",selection:"multiple",value:"bold,italic"},render:t=>e`
+    <btu-button-group
+      label=${t.label}
+      selection=${t.selection}
+      value=${t.value}
+      variant=${t.variant}
+      size=${t.size}
+      ?disabled=${t.disabled}
+      style=${o(u(t))}
+    >
+      <button class="btu-button-gray btu-button-outline btu-button" value="bold"><strong>B</strong></button>
+      <button class="btu-button-gray btu-button-outline btu-button" value="italic"><em>I</em></button>
+      <button class="btu-button-gray btu-button-outline btu-button" value="underline"><u>U</u></button>
+      <button class="btu-button-gray btu-button-outline btu-button" value="strikethrough"><s>S</s></button>
+    </btu-button-group>
+  `,parameters:{docs:{description:{story:"Multiple selection mode — any number of buttons can be active simultaneously. Arrow keys move focus, Space/Enter toggles."}}}},g={args:{label:"View mode",selection:"single",value:"grid"},render:t=>e`
+    <btu-button-group
+      label=${t.label}
+      selection=${t.selection}
+      value=${t.value}
+      variant=${t.variant}
+      size=${t.size}
+      style=${o(u(t))}
+    >
+      <button class="btu-button-gray btu-button-outline btu-button" value="list">List</button>
+      <button class="btu-button-gray btu-button-outline btu-button" value="grid">Grid</button>
+      <button class="btu-button-gray btu-button-outline btu-button" value="table">Table</button>
+    </btu-button-group>
+  `,parameters:{docs:{description:{story:"The `value` attribute can be set declaratively in HTML to pre-select a button on first render."}}}},y={args:{label:"Toolbar",selection:"multiple",value:""},render:t=>e`
+    <btu-button-group
+      label=${t.label}
+      selection=${t.selection}
+      value=${t.value}
+      variant=${t.variant}
+      size=${t.size}
+      style=${o(u(t))}
+    >
+      <btu-icon-button symbol="bold" type="secondary-stroke" value="bold" aria-label="Bold"></btu-icon-button>
+      <btu-icon-button symbol="italic" type="secondary-stroke" value="italic" aria-label="Italic"></btu-icon-button>
+      <btu-icon-button
+        symbol="underline"
+        type="secondary-stroke"
+        value="underline"
+        aria-label="Underline"
+      ></btu-icon-button>
+      <btu-icon-button
+        symbol="strikethrough"
+        type="secondary-stroke"
+        value="strikethrough"
+        aria-label="Strikethrough"
+      ></btu-icon-button>
+    </btu-button-group>
+  `,parameters:{docs:{description:{story:"Icon-only buttons using `btu-icon-button`. Accessible labels are provided via `aria-label`."}}}},m={render:()=>e`
+    <btu-button-group label="Actions" variant="connected">
+      <button class="btu-button-success btu-button-outline btu-button" value="save">Save</button>
+      <button class="btu-button-secondary btu-button-outline btu-button" value="preview">Preview</button>
+      <btu-dropdown label="More options" variant="tertiary">
+        <btu-dropdown-menu>
+          <btu-dropdown-item label="Export"></btu-dropdown-item>
+          <btu-dropdown-item label="Duplicate"></btu-dropdown-item>
+          <btu-dropdown-item label="Archive"></btu-dropdown-item>
+        </btu-dropdown-menu>
+      </btu-dropdown>
+    </btu-button-group>
+  `,parameters:{docs:{description:{story:"Non-button children like `btu-dropdown` can be placed inside the group. They participate in layout but are excluded from selection sync."}}}},v={render:()=>e`
+    <div
+      style="display: flex; flex-direction: column; height: 400px; width: min-content; border: 1px solid oklch(var(--btu-theme-gray-200)); border-radius: 0.5rem; padding: 0.25rem;"
+    >
+      <btu-button-group
+        label="Sidebar tools"
+        orientation="vertical"
+        variant="spaced"
+        selection="multiple"
+        value="preview,components"
+        style="height: 100%;"
+      >
+        <btu-icon-button symbol="eye" type="secondary-stroke" value="preview" aria-label="Preview"></btu-icon-button>
+        <btu-icon-button
+          symbol="layout-grid"
+          type="secondary-stroke"
+          value="components"
+          aria-label="Components"
+        ></btu-icon-button>
+        <btu-icon-button
+          symbol="history"
+          type="secondary-stroke"
+          value="history"
+          aria-label="History"
+        ></btu-icon-button>
+        <btu-icon-button
+          symbol="message-circle"
+          type="secondary-stroke"
+          value="comments"
+          aria-label="Comments"
+        ></btu-icon-button>
+        <btu-icon-button
+          symbol="search"
+          type="secondary-stroke"
+          value="search"
+          aria-label="Search"
+          slot="end"
+        ></btu-icon-button>
+      </btu-button-group>
+    </div>
+  `,parameters:{docs:{description:{story:'Vertical sidebar with `slot="end"` pushing the search button to the bottom. The group must have explicit height (or fill its parent) for the auto-margin to work.'}}}},h={render:()=>e`
+    <div
+      style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.5rem; border: 1px solid oklch(var(--btu-theme-gray-200)); border-radius: 0.5rem;"
+    >
+      <btu-button-group label="Text formatting" selection="multiple" value="bold,italic" size="sm">
+        <btu-icon-button symbol="bold" type="secondary-stroke" value="bold" aria-label="Bold"></btu-icon-button>
+        <btu-icon-button symbol="italic" type="secondary-stroke" value="italic" aria-label="Italic"></btu-icon-button>
+        <btu-icon-button
+          symbol="underline"
+          type="secondary-stroke"
+          value="underline"
+          aria-label="Underline"
+        ></btu-icon-button>
+      </btu-button-group>
+
+      <div style="width: 1px; height: 1.5rem; background: oklch(var(--btu-theme-gray-200));"></div>
+
+      <btu-button-group label="Text alignment" selection="single" value="left" size="sm">
+        <btu-icon-button
+          symbol="align-left"
+          type="secondary-stroke"
+          value="left"
+          aria-label="Align left"
+        ></btu-icon-button>
+        <btu-icon-button
+          symbol="align-center"
+          type="secondary-stroke"
+          value="center"
+          aria-label="Align center"
+        ></btu-icon-button>
+        <btu-icon-button
+          symbol="align-right"
+          type="secondary-stroke"
+          value="right"
+          aria-label="Align right"
+        ></btu-icon-button>
+        <btu-icon-button
+          symbol="align-justify"
+          type="secondary-stroke"
+          value="justify"
+          aria-label="Justify"
+        ></btu-icon-button>
+      </btu-button-group>
+
+      <div style="width: 1px; height: 1.5rem; background: oklch(var(--btu-theme-gray-200));"></div>
+
+      <btu-button-group label="Lists" selection="single" size="sm">
+        <btu-icon-button
+          symbol="list"
+          type="secondary-stroke"
+          value="bullet"
+          aria-label="Bullet list"
+        ></btu-icon-button>
+        <btu-icon-button
+          symbol="list-ordered"
+          type="secondary-stroke"
+          value="numbered"
+          aria-label="Numbered list"
+        ></btu-icon-button>
+      </btu-button-group>
+
+      <div style="width: 1px; height: 1.5rem; background: oklch(var(--btu-theme-gray-200));"></div>
+
+      <btu-button-group label="Insert" selection="single" size="sm">
+        <btu-icon-button symbol="code" type="secondary-stroke" value="code" aria-label="Code"></btu-icon-button>
+        <btu-icon-button symbol="link" type="secondary-stroke" value="link" aria-label="Link"></btu-icon-button>
+        <btu-icon-button symbol="table" type="secondary-stroke" value="table" aria-label="Table"></btu-icon-button>
+      </btu-button-group>
+    </div>
+  `,parameters:{docs:{description:{story:"Multiple button groups using `btu-icon-button` components to form a rich text editor toolbar. Each group manages its own selection mode independently: formatting (multiple), alignment (single), lists (single), and insert (single)."}}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:"{}",...r.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
+  args: {
+    variant: 'spaced'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Buttons rendered with a gap between them instead of joined borders.'
+      }
+    }
+  }
+}`,...b.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  args: {
+    orientation: 'vertical'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Vertical layout with connected (joined) buttons.'
+      }
+    }
+  }
+}`,...l.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  args: {
+    orientation: 'vertical',
+    variant: 'spaced'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Vertical layout with spaced buttons.'
+      }
+    }
+  }
+}`,...s.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <div style="display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
+      <btu-button-group label="Small actions" size="sm">
+        <button class="btu-button-gray btu-button-outline btu-button" value="cut">Cut</button>
+        <button class="btu-button-gray btu-button-outline btu-button" value="copy">Copy</button>
+        <button class="btu-button-gray btu-button-outline btu-button" value="paste">Paste</button>
+      </btu-button-group>
+      <btu-button-group label="Medium actions" size="md">
+        <button class="btu-button-gray btu-button-outline btu-button" value="cut">Cut</button>
+        <button class="btu-button-gray btu-button-outline btu-button" value="copy">Copy</button>
+        <button class="btu-button-gray btu-button-outline btu-button" value="paste">Paste</button>
+      </btu-button-group>
+      <btu-button-group label="Large actions" size="lg">
+        <button class="btu-button-gray btu-button-outline btu-button" value="cut">Cut</button>
+        <button class="btu-button-gray btu-button-outline btu-button" value="copy">Copy</button>
+        <button class="btu-button-gray btu-button-outline btu-button" value="paste">Paste</button>
+      </btu-button-group>
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'The group propagates its \`size\` to all child buttons. \`sm\`, \`md\`, and \`lg\` shown.'
+      }
+    }
+  }
+}`,...i.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+  args: {
+    disabled: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Setting \`disabled\` on the group disables all child buttons and sets \`aria-disabled="true"\`.'
+      }
+    }
+  }
+}`,...c.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: 'Text alignment',
+    selection: 'single',
+    value: 'center'
+  },
+  render: (args: Record<string, unknown>) => html\`
+    <btu-button-group
+      label=\${args.label}
+      selection=\${args.selection}
+      value=\${args.value}
+      variant=\${args.variant}
+      size=\${args.size}
+      ?disabled=\${args.disabled}
+      style=\${styleMap(cssPropsStyle(args))}
+    >
+      <button class="btu-button-gray btu-button-outline btu-button" value="left">Left</button>
+      <button class="btu-button-gray btu-button-outline btu-button" value="center">Center</button>
+      <button class="btu-button-gray btu-button-outline btu-button" value="right">Right</button>
+      <button class="btu-button-gray btu-button-outline btu-button" value="justify">Justify</button>
+    </btu-button-group>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Single selection mode — one button active at a time. Click the active button to deselect. Arrow keys move and activate.'
+      }
+    }
+  }
+}`,...d.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: 'Text formatting',
+    selection: 'multiple',
+    value: 'bold,italic'
+  },
+  render: (args: Record<string, unknown>) => html\`
+    <btu-button-group
+      label=\${args.label}
+      selection=\${args.selection}
+      value=\${args.value}
+      variant=\${args.variant}
+      size=\${args.size}
+      ?disabled=\${args.disabled}
+      style=\${styleMap(cssPropsStyle(args))}
+    >
+      <button class="btu-button-gray btu-button-outline btu-button" value="bold"><strong>B</strong></button>
+      <button class="btu-button-gray btu-button-outline btu-button" value="italic"><em>I</em></button>
+      <button class="btu-button-gray btu-button-outline btu-button" value="underline"><u>U</u></button>
+      <button class="btu-button-gray btu-button-outline btu-button" value="strikethrough"><s>S</s></button>
+    </btu-button-group>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Multiple selection mode — any number of buttons can be active simultaneously. Arrow keys move focus, Space/Enter toggles.'
+      }
+    }
+  }
+}`,...p.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: 'View mode',
+    selection: 'single',
+    value: 'grid'
+  },
+  render: (args: Record<string, unknown>) => html\`
+    <btu-button-group
+      label=\${args.label}
+      selection=\${args.selection}
+      value=\${args.value}
+      variant=\${args.variant}
+      size=\${args.size}
+      style=\${styleMap(cssPropsStyle(args))}
+    >
+      <button class="btu-button-gray btu-button-outline btu-button" value="list">List</button>
+      <button class="btu-button-gray btu-button-outline btu-button" value="grid">Grid</button>
+      <button class="btu-button-gray btu-button-outline btu-button" value="table">Table</button>
+    </btu-button-group>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'The \`value\` attribute can be set declaratively in HTML to pre-select a button on first render.'
+      }
+    }
+  }
+}`,...g.parameters?.docs?.source}}};y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: 'Toolbar',
+    selection: 'multiple',
+    value: ''
+  },
+  render: (args: Record<string, unknown>) => html\`
+    <btu-button-group
+      label=\${args.label}
+      selection=\${args.selection}
+      value=\${args.value}
+      variant=\${args.variant}
+      size=\${args.size}
+      style=\${styleMap(cssPropsStyle(args))}
+    >
+      <btu-icon-button symbol="bold" type="secondary-stroke" value="bold" aria-label="Bold"></btu-icon-button>
+      <btu-icon-button symbol="italic" type="secondary-stroke" value="italic" aria-label="Italic"></btu-icon-button>
+      <btu-icon-button
+        symbol="underline"
+        type="secondary-stroke"
+        value="underline"
+        aria-label="Underline"
+      ></btu-icon-button>
+      <btu-icon-button
+        symbol="strikethrough"
+        type="secondary-stroke"
+        value="strikethrough"
+        aria-label="Strikethrough"
+      ></btu-icon-button>
+    </btu-button-group>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Icon-only buttons using \`btu-icon-button\`. Accessible labels are provided via \`aria-label\`.'
+      }
+    }
+  }
+}`,...y.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <btu-button-group label="Actions" variant="connected">
+      <button class="btu-button-success btu-button-outline btu-button" value="save">Save</button>
+      <button class="btu-button-secondary btu-button-outline btu-button" value="preview">Preview</button>
+      <btu-dropdown label="More options" variant="tertiary">
+        <btu-dropdown-menu>
+          <btu-dropdown-item label="Export"></btu-dropdown-item>
+          <btu-dropdown-item label="Duplicate"></btu-dropdown-item>
+          <btu-dropdown-item label="Archive"></btu-dropdown-item>
+        </btu-dropdown-menu>
+      </btu-dropdown>
+    </btu-button-group>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Non-button children like \`btu-dropdown\` can be placed inside the group. They participate in layout but are excluded from selection sync.'
+      }
+    }
+  }
+}`,...m.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <div
+      style="display: flex; flex-direction: column; height: 400px; width: min-content; border: 1px solid oklch(var(--btu-theme-gray-200)); border-radius: 0.5rem; padding: 0.25rem;"
+    >
+      <btu-button-group
+        label="Sidebar tools"
+        orientation="vertical"
+        variant="spaced"
+        selection="multiple"
+        value="preview,components"
+        style="height: 100%;"
+      >
+        <btu-icon-button symbol="eye" type="secondary-stroke" value="preview" aria-label="Preview"></btu-icon-button>
+        <btu-icon-button
+          symbol="layout-grid"
+          type="secondary-stroke"
+          value="components"
+          aria-label="Components"
+        ></btu-icon-button>
+        <btu-icon-button
+          symbol="history"
+          type="secondary-stroke"
+          value="history"
+          aria-label="History"
+        ></btu-icon-button>
+        <btu-icon-button
+          symbol="message-circle"
+          type="secondary-stroke"
+          value="comments"
+          aria-label="Comments"
+        ></btu-icon-button>
+        <btu-icon-button
+          symbol="search"
+          type="secondary-stroke"
+          value="search"
+          aria-label="Search"
+          slot="end"
+        ></btu-icon-button>
+      </btu-button-group>
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Vertical sidebar with \`slot="end"\` pushing the search button to the bottom. The group must have explicit height (or fill its parent) for the auto-margin to work.'
+      }
+    }
+  }
+}`,...v.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <div
+      style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.5rem; border: 1px solid oklch(var(--btu-theme-gray-200)); border-radius: 0.5rem;"
+    >
+      <btu-button-group label="Text formatting" selection="multiple" value="bold,italic" size="sm">
+        <btu-icon-button symbol="bold" type="secondary-stroke" value="bold" aria-label="Bold"></btu-icon-button>
+        <btu-icon-button symbol="italic" type="secondary-stroke" value="italic" aria-label="Italic"></btu-icon-button>
+        <btu-icon-button
+          symbol="underline"
+          type="secondary-stroke"
+          value="underline"
+          aria-label="Underline"
+        ></btu-icon-button>
+      </btu-button-group>
+
+      <div style="width: 1px; height: 1.5rem; background: oklch(var(--btu-theme-gray-200));"></div>
+
+      <btu-button-group label="Text alignment" selection="single" value="left" size="sm">
+        <btu-icon-button
+          symbol="align-left"
+          type="secondary-stroke"
+          value="left"
+          aria-label="Align left"
+        ></btu-icon-button>
+        <btu-icon-button
+          symbol="align-center"
+          type="secondary-stroke"
+          value="center"
+          aria-label="Align center"
+        ></btu-icon-button>
+        <btu-icon-button
+          symbol="align-right"
+          type="secondary-stroke"
+          value="right"
+          aria-label="Align right"
+        ></btu-icon-button>
+        <btu-icon-button
+          symbol="align-justify"
+          type="secondary-stroke"
+          value="justify"
+          aria-label="Justify"
+        ></btu-icon-button>
+      </btu-button-group>
+
+      <div style="width: 1px; height: 1.5rem; background: oklch(var(--btu-theme-gray-200));"></div>
+
+      <btu-button-group label="Lists" selection="single" size="sm">
+        <btu-icon-button
+          symbol="list"
+          type="secondary-stroke"
+          value="bullet"
+          aria-label="Bullet list"
+        ></btu-icon-button>
+        <btu-icon-button
+          symbol="list-ordered"
+          type="secondary-stroke"
+          value="numbered"
+          aria-label="Numbered list"
+        ></btu-icon-button>
+      </btu-button-group>
+
+      <div style="width: 1px; height: 1.5rem; background: oklch(var(--btu-theme-gray-200));"></div>
+
+      <btu-button-group label="Insert" selection="single" size="sm">
+        <btu-icon-button symbol="code" type="secondary-stroke" value="code" aria-label="Code"></btu-icon-button>
+        <btu-icon-button symbol="link" type="secondary-stroke" value="link" aria-label="Link"></btu-icon-button>
+        <btu-icon-button symbol="table" type="secondary-stroke" value="table" aria-label="Table"></btu-icon-button>
+      </btu-button-group>
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Multiple button groups using \`btu-icon-button\` components to form a rich text editor toolbar. Each group manages its own selection mode independently: formatting (multiple), alignment (single), lists (single), and insert (single).'
+      }
+    }
+  }
+}`,...h.parameters?.docs?.source}}};const C=["Default","Spaced","VerticalConnected","VerticalSpaced","Sizes","Disabled","SingleSelection","MultipleSelection","PreSelectedValue","WithIcons","MixedContent","VerticalSidebar","RTEToolbar"];export{r as Default,c as Disabled,m as MixedContent,p as MultipleSelection,g as PreSelectedValue,h as RTEToolbar,d as SingleSelection,i as Sizes,b as Spaced,l as VerticalConnected,v as VerticalSidebar,s as VerticalSpaced,y as WithIcons,C as __namedExportsOrder,z as default};

package/dist/storybook/assets/{Celebrate.stories-CuMm15Nr.js → Celebrate.stories-DtKNptXA.js}

@@ -1,4 +1,4 @@
-import{x as a}from"./iframe-DloIUNZz.js";import{b as i}from"./celebrate-KwPoF1K3.js";import{B as r}from"./Button-CFLAI1H9.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-D5Uwm8Zd.js";import{b as i}from"./celebrate-KwPoF1K3.js";import{B as r}from"./Button-CQ2CjiFm.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 btu-button-primary btu-button-fill btu-button-contained btu-button-lg"
+              class="btu-button-primary btu-button-fill btu-button-contained btu-button-lg btu-button"
             >
               <btu-icon name="star" class="btu-icon btu-icon-sm"></btu-icon>
               Star
             </button>
             <button
               @click=${e}
-              class="btu-button btu-button-success btu-button-fill btu-button-contained btu-button-lg"
+              class="btu-button-success btu-button-fill btu-button-contained btu-button-lg btu-button"
             >
               <btu-icon name="check" class="btu-icon btu-icon-sm"></btu-icon>
               Complete
             </button>
             <button
               @click=${e}
-              class="btu-button btu-button-error btu-button-fill btu-button-contained btu-button-lg"
+              class="btu-button-error btu-button-fill btu-button-contained btu-button-lg btu-button"
             >
               <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 btu-button-primary btu-button-fill btu-button-contained btu-button-lg"
+              class="btu-button-primary btu-button-fill btu-button-contained btu-button-lg btu-button"
             >
               <btu-icon name="star" class="btu-icon btu-icon-sm"></btu-icon>
               Star
             </button>
             <button
               @click=\${onButtonClick}
-              class="btu-button btu-button-success btu-button-fill btu-button-contained btu-button-lg"
+              class="btu-button-success btu-button-fill btu-button-contained btu-button-lg btu-button"
             >
               <btu-icon name="check" class="btu-icon btu-icon-sm"></btu-icon>
               Complete
             </button>
             <button
               @click=\${onButtonClick}
-              class="btu-button btu-button-error btu-button-fill btu-button-contained btu-button-lg"
+              class="btu-button-error btu-button-fill btu-button-contained btu-button-lg btu-button"
             >
               <btu-icon name="heart" class="btu-icon btu-icon-sm"></btu-icon>
               Love