@brandsync/wc 0.0.11 → 0.0.12

package/dist/collection/components/bs-ai-thinking/bs-ai-thinking.js

@@ -29,7 +29,7 @@ export class BsAiThinking {
     /** The status text shown next to the icon, e.g. "Retrieving", "Thinking", "Searching". */
     label = 'Thinking';
     render() {
-        return (h("div", { key: '3fb5e1a21daa9244f595c20b19968249388ac027', class: "bs-ai-thinking", role: "status", "aria-live": "polite" }, h("img", { key: 'be5a7f7a2b64da982d8e61dc02668d57d713f6f5', part: "icon", class: "bs-ai-thinking__icon", src: GENIE_MARK_ICON, alt: "", "aria-hidden": "true" }), h("span", { key: '2581cdf1609ba8ff7c653cb2dae959946ef83dac', part: "label", class: "bs-ai-thinking__label" }, this.label)));
+        return (h("div", { key: '2b55697271a1986fca26cd48167608a734ddfcc0', class: "bs-ai-thinking", role: "status", "aria-live": "polite" }, h("img", { key: '900ecba3dc8cd2f925180a9347ecd42db79159ea', part: "icon", class: "bs-ai-thinking__icon", src: GENIE_MARK_ICON, alt: "", "aria-hidden": "true" }), h("span", { key: 'f2f4a35fcdef3111192ca4816a89b1746e3f74a0', part: "label", class: "bs-ai-thinking__label" }, this.label)));
     }
     static get is() { return "bs-ai-thinking"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-attachment/bs-attachment.css

@@ -7,10 +7,6 @@
   --bs-attachment-filename-color: var(--bs-text-default);
   --bs-attachment-badge-bg-pdf: var(--bs-badge-bg-error);
   --bs-attachment-badge-bg-document: var(--bs-badge-bg-info);
-  --bs-attachment-remove-bg: var(--bs-button-neutral-container);
-  --bs-attachment-remove-hover: var(--bs-button-neutral-hover);
-  --bs-attachment-remove-pressed: var(--bs-button-neutral-pressed);
-  --bs-attachment-remove-focus: var(--bs-border-neutral-focus);
 }
 
 .bs-attachment {
@@ -98,35 +94,23 @@
   background: var(--bs-attachment-badge-bg-document);
 }
 
-/* --- Remove button --- */
+/* --- Remove button ---
+   bs-icon-button owns its own background/color/radius/hover/pressed/focus styling internally
+   (variant="neutral" size="xs") -- this component only positions it (absolute, top-right corner)
+   and drives the hover/focus-revealed opacity, both external layout concerns bs-icon-button
+   itself has no opinion on. */
 
 .bs-attachment__remove {
-  box-sizing: border-box;
   position: absolute;
-  top: var(--bs-spacing-50);
-  right: var(--bs-spacing-50);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  background: var(--bs-attachment-remove-bg);
-  border: none;
-  border-radius: var(--bs-border-radius-50);
-  color: var(--bs-icon-default);
-  cursor: pointer;
+  /* Verified against Figma node 2513:32843 (EG Genie UI Kit v1.0): the remove button's own 32x32
+     hit-target box sits flush at the thumbnail's top-right corner (top:0, right:0), with the
+     *visible* 16px button centered inside it (8px inset on every side) -- so the visible button's
+     real offset from the thumbnail's corner is 8px, not 4px. */
+  top: var(--bs-spacing-100);
+  right: var(--bs-spacing-100);
   opacity: 0;
   pointer-events: none;
-  transition: background-color var(--bs-duration-fast) var(--bs-easing-standard), opacity var(--bs-duration-fast) var(--bs-easing-standard);
-}
-
-.bs-attachment__remove:hover {
-  background: var(--bs-attachment-remove-hover);
-}
-
-.bs-attachment__remove:active {
-  background: var(--bs-attachment-remove-pressed);
+  transition: opacity var(--bs-duration-fast) var(--bs-easing-standard);
 }
 
 .bs-attachment:hover .bs-attachment__remove,
@@ -135,11 +119,6 @@
   pointer-events: auto;
 }
 
-.bs-attachment__remove:focus-visible {
-  outline: 2px solid var(--bs-attachment-remove-focus);
-  outline-offset: 1px;
-}
-
 /* --- Spinner --- */
 
 .bs-attachment__spinner {

package/dist/collection/components/bs-attachment/bs-attachment.js

@@ -2,7 +2,9 @@ import { h } from "@stencil/core";
 /**
  * A single file attachment preview for `bs-composer` -- an image thumbnail, or a filename card
  * with a colored file-type badge (PDF/Document), with an optional upload-in-progress spinner and
- * a hover/focus-revealed remove button.
+ * a hover/focus-revealed remove button (a `bs-icon-button` with `size="xs"` `variant="neutral"` --
+ * the same 16x16px compact tier `bs-icon-button` documents as meant for exactly this kind of
+ * chip/tag "remove" control).
  *
  * ## When to use
  * - Rendered by the consuming app for each file a user has attached to a Genie AI chat message,
@@ -27,14 +29,6 @@ import { h } from "@stencil/core";
  * @prop --bs-attachment-badge-bg-pdf - PDF badge background. Aliased to `--bs-badge-bg-error`.
  * @prop --bs-attachment-badge-bg-document - Document badge background. Aliased to
  *   `--bs-badge-bg-info`.
- * @prop --bs-attachment-remove-bg - Remove button (neutral icon button) default background.
- *   Aliased to `--bs-button-neutral-container`.
- * @prop --bs-attachment-remove-hover - Remove button hover background. Aliased to
- *   `--bs-button-neutral-hover`.
- * @prop --bs-attachment-remove-pressed - Remove button active/pressed background. Aliased to
- *   `--bs-button-neutral-pressed`.
- * @prop --bs-attachment-remove-focus - Remove button focus outline color. Aliased to
- *   `--bs-border-neutral-focus`.
  */
 export class BsAttachment {
     /** Which kind of attachment preview to render. */
@@ -56,7 +50,7 @@ export class BsAttachment {
     };
     render() {
         const isImage = this.type === 'image';
-        return (h("div", { key: '7cebfc51b0453ac6c1fa57d38856b4b54f15def9', class: { 'bs-attachment': true, 'bs-attachment--loading': this.loading }, "aria-busy": this.loading ? 'true' : 'false' }, isImage ? this.renderImage() : this.renderCard(), this.removable && (h("button", { key: '935eb0f9507a9c9d24a1a6121c2fcd0575ac9d16', type: "button", part: "remove", class: "bs-attachment__remove", "aria-label": "Remove attachment", onClick: this.onRemoveClick }, h(CloseIcon, { key: '00e45c411ec831a66dd29d039568f57fc97b3930' })))));
+        return (h("div", { key: '54b6d63b3e3fa98e5ec10444253b145080facc97', class: { 'bs-attachment': true, 'bs-attachment--loading': this.loading }, "aria-busy": this.loading ? 'true' : 'false' }, isImage ? this.renderImage() : this.renderCard(), this.removable && (h("bs-icon-button", { key: 'bc0c6cd660a361886447f38b56578a2271384e99', part: "remove", class: "bs-attachment__remove", size: "xs", variant: "neutral", ariaLabel: `Remove attachment: ${this.fileName}`, onClick: this.onRemoveClick }, h(CloseIcon, { key: 'fc932382233dfe20c46666705f1c79540bc08d35' })))));
     }
     renderImage() {
         return (h("div", { part: "thumbnail", class: "bs-attachment__thumbnail" }, h("img", { class: "bs-attachment__image", src: this.imageSrc, alt: this.imageAlt }), this.loading && h(Spinner, { class: "bs-attachment__spinner bs-attachment__spinner--overlay", size: 16 })));

package/dist/collection/components/bs-attachment-list/bs-attachment-list.js

@@ -58,7 +58,7 @@ export class BsAttachmentList {
         this.canScrollRight = row.scrollWidth - row.clientWidth - row.scrollLeft > 1;
     };
     render() {
-        return (h("div", { key: 'ccf4970df6d8dc81ccd4d717d8ec1c295a7910e7', class: "bs-attachment-list" }, h("div", { key: 'd05b1553540c47825b023cf99ba7acdc11e87b4c', part: "row", class: "bs-attachment-list__row", ref: el => (this.row = el), onScroll: this.onScroll, role: "group", "aria-label": this.ariaLabel, tabIndex: 0 }, h("slot", { key: 'e140bbe3047910cf9a237724d342c720e40889d6', onSlotchange: this.onSlotchange })), this.canScrollRight && h("div", { key: '42a3588c41a3dc63a41e6dea9ba95f267c72d61e', part: "fade", class: "bs-attachment-list__fade", "aria-hidden": "true" })));
+        return (h("div", { key: 'f63adb537ce78135dfaa7d530a55829636ae318b', class: "bs-attachment-list" }, h("div", { key: '2cdd3a578f03db580b0a06088e6b27ed7ac8b06f', part: "row", class: "bs-attachment-list__row", ref: el => (this.row = el), onScroll: this.onScroll, role: "group", "aria-label": this.ariaLabel, tabIndex: 0 }, h("slot", { key: '8095ab8ad53cee9f357360dd1dd1c4cad4a4d513', onSlotchange: this.onSlotchange })), this.canScrollRight && h("div", { key: 'd09bb07a31bc780709f69838556434dc22b0544c', part: "fade", class: "bs-attachment-list__fade", "aria-hidden": "true" })));
     }
     static get is() { return "bs-attachment-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-button/{bs-button.cmp.test.js → bs-button/bs-button.cmp.test.js}

@@ -78,4 +78,30 @@ describe('bs-button', () => {
         const button = root.shadowRoot.querySelector('button');
         expect(button).toHaveClass('bs-button--icon-only');
     });
+    describe('asymmetric padding for icon + label layouts', () => {
+        it('applies bs-button--has-icon (not bs-button--has-end-icon) with a leading icon and a label', async () => {
+            const { root } = await render(h("bs-button", null, h("svg", { slot: "icon", viewBox: "0 0 16 16" }), "Click me"));
+            const button = root.shadowRoot.querySelector('button');
+            expect(button).toHaveClass('bs-button--has-icon');
+            expect(button).not.toHaveClass('bs-button--has-end-icon');
+        });
+        it('applies bs-button--has-end-icon (not bs-button--has-icon) with a trailing icon and a label', async () => {
+            const { root } = await render(h("bs-button", null, "Next", h("svg", { slot: "end-icon", viewBox: "0 0 16 16" })));
+            const button = root.shadowRoot.querySelector('button');
+            expect(button).toHaveClass('bs-button--has-end-icon');
+            expect(button).not.toHaveClass('bs-button--has-icon');
+        });
+        it('applies neither class for an icon-only button (padding stays 0 via bs-button--icon-only)', async () => {
+            const { root } = await render(h("bs-button", { ariaLabel: "Delete" }, h("svg", { slot: "icon", viewBox: "0 0 16 16" })));
+            const button = root.shadowRoot.querySelector('button');
+            expect(button).not.toHaveClass('bs-button--has-icon');
+            expect(button).not.toHaveClass('bs-button--has-end-icon');
+        });
+        it('applies neither class for a plain text-only button', async () => {
+            const { root } = await render(h("bs-button", null, "Click me"));
+            const button = root.shadowRoot.querySelector('button');
+            expect(button).not.toHaveClass('bs-button--has-icon');
+            expect(button).not.toHaveClass('bs-button--has-end-icon');
+        });
+    });
 });

package/dist/collection/components/bs-button/{bs-button.css → bs-button/bs-button.css}

@@ -4,7 +4,9 @@
   --bs-button-height-md: var(--bs-spacing-600);
   --bs-button-height-lg: var(--bs-spacing-700);
   --bs-button-radius: var(--bs-border-radius-100);
-  
+  --bs-button-padding-x-icon-side: var(--bs-spacing-150);
+  --bs-button-padding-x-label-side: var(--bs-spacing-250);
+
   --bs-button-error-default: var(--bs-color-error-default);
   --bs-button-error-hover: var(--bs-color-error-hover);
   --bs-button-error-focus: var(--bs-border-error-focus);
@@ -30,6 +32,20 @@
   --bs-button-subtle-hover: var(--bs-color-neutral-container);
   --bs-button-subtle-pressed: var(--bs-color-neutral-container-pressed);
   --bs-button-subtle-focus: var(--bs-border-primary-focus);
+  /* Verified against Figma node 2842:50178 ("Style=Neutral, States=Enabled"): the neutral variant
+     has its own 1px border, unlike every other filled variant here -- previously missing entirely. */
+  --bs-button-neutral-border: var(--bs-border-neutral-container);
+  --bs-button-neutral-border-hover: var(--bs-border-neutral-container-hover);
+  --bs-button-neutral-border-pressed: var(--bs-border-neutral-container-pressed);
+  /* Locally overriding the vendored --bs-button-neutral-hover/-pressed tokens (used directly
+     below elsewhere in this codebase) -- they alias to --bs-color-neutral-hover (a dark,
+     near-black scale meant for on-neutral text/icons, not a container background) and
+     --bs-color-primary-pressed (BLUE, not neutral at all) respectively. Verified visually: with
+     the vendored values, hover rendered near-black and pressed rendered blue, neither matching the
+     light-lavender-family redline. --bs-color-neutral-container-hover/-pressed are the correct
+     step family, matching --bs-button-neutral-container (--bs-color-neutral-container) itself. */
+  --bs-button-neutral-hover: var(--bs-color-neutral-container-hover);
+  --bs-button-neutral-pressed: var(--bs-color-neutral-container-pressed);
   --bs-button-outlined-border: var(--bs-border-primary);
   --bs-button-outlined-border-hover: var(--bs-border-primary-hover);
   --bs-button-outlined-focus: var(--bs-border-primary-focus);
@@ -44,7 +60,9 @@
   border: none;
   border-radius: var(--bs-button-radius);
   font-family: inherit;
-  font-weight: var(--bs-font-weight-semibold);
+  /* Was semibold, then medium -- both wrong per direct comparison against the live Figma file.
+     Every variant's label actually uses the regular weight. */
+  font-weight: var(--bs-font-weight-regular);
   cursor: pointer;
   transition: background-color var(--bs-duration-fast, 120ms) var(--bs-easing-standard, ease);
 }
@@ -66,7 +84,11 @@
 
 .bs-button--md {
   height: var(--bs-button-height-md);
-  padding: 0 var(--bs-spacing-400);
+  /* Verified against Figma node 2842:50344 (71px-wide frame, 39px-wide "Label" text): horizontal
+     padding is spacing/200 (16px) each side, not spacing-400 (32px) -- the previous value was
+     roughly double what the redline specifies. sm/lg padding-x weren't independently re-verified
+     against their own redlines in this pass. */
+  padding: 0 var(--bs-spacing-200);
   font-size: var(--bs-font-size-md);
 }
 
@@ -94,16 +116,20 @@
 .bs-button--neutral {
   background: var(--bs-button-neutral-container);
   color: var(--bs-text-default);
+  border: 1px solid var(--bs-button-neutral-border);
 }
 .bs-button--neutral:hover:not(:disabled) {
   background: var(--bs-button-neutral-hover);
+  border-color: var(--bs-button-neutral-border-hover);
 }
 .bs-button--neutral:active:not(:disabled) {
   background: var(--bs-button-neutral-pressed);
+  border-color: var(--bs-button-neutral-border-pressed);
 }
 .bs-button--neutral:disabled {
   background: var(--bs-button-neutral-disabled);
   color: var(--bs-text-on-disabled);
+  border-color: var(--bs-button-neutral-border);
 }
 
 .bs-button--error {
@@ -145,7 +171,11 @@
 
 .bs-button--warning {
   background: var(--bs-button-warning-default);
-  color: var(--bs-text-default);
+  /* --bs-text-default (not --bs-text-on-action, unlike every other colored variant here) failed
+     WCAG AA contrast against this background in BOTH themes -- verified: light theme was black
+     text on rgb(128,93,0) at 3.49:1 (needs 4.5:1), dark theme was white text on rgb(177,129,0) at
+     3.51:1. --bs-text-on-action flips appropriately per theme and passes in both (6.02:1 / 5.99:1). */
+  color: var(--bs-text-on-action);
 }
 .bs-button--warning:hover:not(:disabled) {
   background: var(--bs-button-warning-hover);
@@ -220,12 +250,14 @@
   outline-color: var(--bs-button-outlined-focus);
 }
 
+/* Gap between icon and label: spacing/xs (4px) per Figma node 2842:50344's state-layer gap, not
+   spacing-100 (8px). */
 .bs-button__icon--visible {
-  margin-right: var(--bs-spacing-100);
+  margin-right: var(--bs-spacing-50);
 }
 
 .bs-button__end-icon--visible {
-  margin-left: var(--bs-spacing-100);
+  margin-left: var(--bs-spacing-50);
 }
 
 .bs-button__icon ::slotted(*),
@@ -245,3 +277,22 @@
 .bs-button--icon-only .bs-button__end-icon--visible {
   margin-left: 0;
 }
+
+/* Verified against a Figma redline for the icon+label layout: the edge next to an icon is
+   tighter (spacing/150, 12px) than the plain text-only edge (16px), and the opposite edge -- next
+   to just the label, with an icon on the other side pulling the button off-balance -- compensates
+   with more padding (spacing/250, 20px), keeping the total horizontal padding budget the same as
+   the icon-less button (12+20 = 16+16 = 32px for size="md"). This is deliberately NOT
+   size-dependent, same as the icon/label gap above -- neither varies by size in the source spec. */
+.bs-button--has-icon:not(.bs-button--has-end-icon) {
+  padding-left: var(--bs-button-padding-x-icon-side);
+  padding-right: var(--bs-button-padding-x-label-side);
+}
+.bs-button--has-end-icon:not(.bs-button--has-icon) {
+  padding-left: var(--bs-button-padding-x-label-side);
+  padding-right: var(--bs-button-padding-x-icon-side);
+}
+.bs-button--has-icon.bs-button--has-end-icon {
+  padding-left: var(--bs-button-padding-x-icon-side);
+  padding-right: var(--bs-button-padding-x-icon-side);
+}

package/dist/collection/components/bs-button/{bs-button.js → bs-button/bs-button.js}

@@ -27,6 +27,11 @@ import { h } from "@stencil/core";
  * @prop --bs-button-height-sm - Height at `size="sm"`. Aliased to `--bs-spacing-500`.
  * @prop --bs-button-height-md - Height at `size="md"`. Aliased to `--bs-spacing-600`.
  * @prop --bs-button-height-lg - Height at `size="lg"`. Aliased to `--bs-spacing-700`.
+ * @prop --bs-button-neutral-border - Border color, `variant="neutral"`, default/disabled. Aliased to `--bs-border-neutral-container`.
+ * @prop --bs-button-neutral-border-hover - Border color, `variant="neutral"`, hover. Aliased to `--bs-border-neutral-container-hover`.
+ * @prop --bs-button-neutral-border-pressed - Border color, `variant="neutral"`, pressed. Aliased to `--bs-border-neutral-container-pressed`.
+ * @prop --bs-button-padding-x-icon-side - Horizontal padding on an edge that's adjacent to a leading/trailing icon (tighter than the plain text-only edge). Aliased to `--bs-spacing-150`.
+ * @prop --bs-button-padding-x-label-side - Horizontal padding on the opposite edge, when an icon on the other side needs compensating extra space to keep the button optically balanced. Aliased to `--bs-spacing-250`.
  */
 export class BsButton {
     el;
@@ -100,7 +105,7 @@ export class BsButton {
     };
     render() {
         const iconOnly = (this.hasIcon || this.hasEndIcon) && !this.hasLabel;
-        return (h("button", { key: '8fe88c418417a4b2f8944c282aa97dbc98aaeb06', class: `bs-button bs-button--${this.variant} bs-button--${this.size} ${iconOnly ? 'bs-button--icon-only' : ''}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel }, h("span", { key: '85b3a07595c93cbe3113204315669c3b087f216d', part: "icon", class: `bs-button__icon ${this.hasIcon ? 'bs-button__icon--visible' : ''}` }, h("slot", { key: '53740a910449f215229686fa9c506cce6d399b52', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '3a3b133d9386d0d2044d44cdf0b47bd3e100c6d2', part: "label", class: "bs-button__label" }, h("slot", { key: '9c7c0e468651c0d93aafa53afb3fcab60ab7f311', onSlotchange: this.onLabelSlotchange })), h("span", { key: 'fa5b7afa82c697cfa7cf1a0f564e743832c9c039', part: "end-icon", class: `bs-button__end-icon ${this.hasEndIcon ? 'bs-button__end-icon--visible' : ''}` }, h("slot", { key: '20bf73485fbd7c30e524e380ec291ac3939c3ba1', name: "end-icon", onSlotchange: this.onEndIconSlotchange }))));
+        return (h("button", { key: 'b46975b3006b26aee5f52cead685d78c7cc3e4a6', class: `bs-button bs-button--${this.variant} bs-button--${this.size} ${iconOnly ? 'bs-button--icon-only' : ''} ${this.hasIcon && !iconOnly ? 'bs-button--has-icon' : ''} ${this.hasEndIcon && !iconOnly ? 'bs-button--has-end-icon' : ''}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel }, h("span", { key: 'e763e59c2775c3778208eff1e4e78322867e7e2c', part: "icon", class: `bs-button__icon ${this.hasIcon ? 'bs-button__icon--visible' : ''}` }, h("slot", { key: 'b13b8c375a66a34360de7505ae0b3ea88885b3a7', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '10c0fb5b04045e33f67b477e7deb6d213f9455de', part: "label", class: "bs-button__label" }, h("slot", { key: 'd8da8023c86f98cc82a934af4618daaa1fe476cc', onSlotchange: this.onLabelSlotchange })), h("span", { key: 'b584dddc6d4e146bdefb2f0223505c0e4aa5b7ed', part: "end-icon", class: `bs-button__end-icon ${this.hasEndIcon ? 'bs-button__end-icon--visible' : ''}` }, h("slot", { key: '960a015fd755d63fe7385b4516cebe33e29e0808', name: "end-icon", onSlotchange: this.onEndIconSlotchange }))));
     }
     static get is() { return "bs-button"; }
     static get encapsulation() { return "shadow"; }
@@ -126,8 +131,8 @@ export class BsButton {
                     "references": {
                         "BsButtonVariant": {
                             "location": "local",
-                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-button/bs-button.tsx",
-                            "id": "src/components/bs-button/bs-button.tsx::BsButtonVariant"
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-button/bs-button/bs-button.tsx",
+                            "id": "src/components/bs-button/bs-button/bs-button.tsx::BsButtonVariant"
                         }
                     }
                 },
@@ -152,8 +157,8 @@ export class BsButton {
                     "references": {
                         "BsButtonSize": {
                             "location": "local",
-                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-button/bs-button.tsx",
-                            "id": "src/components/bs-button/bs-button.tsx::BsButtonSize"
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-button/bs-button/bs-button.tsx",
+                            "id": "src/components/bs-button/bs-button/bs-button.tsx::BsButtonSize"
                         }
                     }
                 },

package/dist/collection/components/bs-button/{bs-button.stories.js → bs-button/bs-button.stories.js}

@@ -1,9 +1,9 @@
 import { html } from "lit";
-import { componentDescription, propDescription } from "../../stories-utils";
+import { componentDescription, propDescription } from "../../../stories-utils";
 const variants = ['primary', 'neutral', 'subtle', 'outlined', 'success', 'warning', 'info', 'error'];
 const sizes = ['sm', 'md', 'lg'];
 const meta = {
-    title: 'Components/bs-button',
+    title: 'Components/bs-button/bs-button',
     parameters: { docs: { description: { component: componentDescription('bs-button') } } },
     render: args => html `
     <bs-button variant=${args.variant} size=${args.size} type=${args.type} ?disabled=${args.disabled}>
@@ -86,31 +86,6 @@ export const WithEndIcon = {
     </bs-button>
   `,
 };
-export const IconOnly = {
-    name: 'Icon-only',
-    render: args => html `
-    <bs-button variant=${args.variant} size=${args.size} ?disabled=${args.disabled} aria-label="Delete">
-      <svg slot="icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-        <path
-          d="M2 4H14M6 4V2.5C6 2.22386 6.22386 2 6.5 2H9.5C9.77614 2 10 2.22386 10 2.5V4M12.5 4L12 13.5C12 13.7761 11.7761 14 11.5 14H4.5C4.22386 14 4 13.7761 4 13.5L3.5 4"
-          stroke="currentColor"
-          stroke-width="1.3"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-    </bs-button>
-  `,
-};
-export const LongLabel = {
-    name: 'Long label (edge case)',
-    args: { label: 'This button has a much longer label than the icon-and-text layout was designed for' },
-    render: args => html `
-    <div style="max-width: 220px;">
-      <bs-button variant=${args.variant} size=${args.size} ?disabled=${args.disabled}> ${args.label} </bs-button>
-    </div>
-  `,
-};
 export const AllCombinations = {
     name: 'All variant × size × disabled combinations',
     render: () => html `

package/dist/collection/components/bs-button/bs-icon-button/bs-icon-button.cmp.test.js

@@ -0,0 +1,83 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-icon-button', () => {
+    it('renders the default icon slot and variant/size classes', async () => {
+        const { root } = await render(h("bs-icon-button", { ariaLabel: "Confirm" }, h("svg", { viewBox: "0 0 16 16" })));
+        const button = root.shadowRoot.querySelector('button');
+        expect(button).toHaveClass('bs-icon-button--primary');
+        expect(button).toHaveClass('bs-icon-button--md');
+    });
+    it('applies the disabled attribute to the native button', async () => {
+        const { root } = await render(h("bs-icon-button", { ariaLabel: "Confirm", disabled: true }, h("svg", { viewBox: "0 0 16 16" })));
+        const button = root.shadowRoot.querySelector('button');
+        expect(button).toHaveAttribute('disabled');
+    });
+    it('reflects the variant prop to the internal class', async () => {
+        const { root, setProps } = await render(h("bs-icon-button", { ariaLabel: "Confirm", variant: "neutral" }, h("svg", { viewBox: "0 0 16 16" })));
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-icon-button--neutral');
+        await setProps({ variant: 'primary' });
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-icon-button--primary');
+    });
+    it('applies the error variant class and reflects on prop change', async () => {
+        const { root, setProps } = await render(h("bs-icon-button", { ariaLabel: "Delete", variant: "error" }, h("svg", { viewBox: "0 0 16 16" })));
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-icon-button--error');
+        await setProps({ variant: 'primary' });
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-icon-button--primary');
+        expect(root.shadowRoot.querySelector('button')).not.toHaveClass('bs-icon-button--error');
+    });
+    it('applies the subtle variant class', async () => {
+        const { root } = await render(h("bs-icon-button", { ariaLabel: "Confirm", variant: "subtle" }, h("svg", { viewBox: "0 0 16 16" })));
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-icon-button--subtle');
+    });
+    it('applies the outlined variant class', async () => {
+        const { root } = await render(h("bs-icon-button", { ariaLabel: "Confirm", variant: "outlined" }, h("svg", { viewBox: "0 0 16 16" })));
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-icon-button--outlined');
+    });
+    it('applies the success variant class and reflects on prop change', async () => {
+        const { root, setProps } = await render(h("bs-icon-button", { ariaLabel: "Approve", variant: "success" }, h("svg", { viewBox: "0 0 16 16" })));
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-icon-button--success');
+        await setProps({ variant: 'primary' });
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-icon-button--primary');
+        expect(root.shadowRoot.querySelector('button')).not.toHaveClass('bs-icon-button--success');
+    });
+    it('applies the warning variant class', async () => {
+        const { root } = await render(h("bs-icon-button", { ariaLabel: "Proceed anyway", variant: "warning" }, h("svg", { viewBox: "0 0 16 16" })));
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-icon-button--warning');
+    });
+    it('applies the info variant class', async () => {
+        const { root } = await render(h("bs-icon-button", { ariaLabel: "View details", variant: "info" }, h("svg", { viewBox: "0 0 16 16" })));
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-icon-button--info');
+    });
+    it('applies each size class', async () => {
+        const { root, setProps } = await render(h("bs-icon-button", { ariaLabel: "Confirm", size: "sm" }, h("svg", { viewBox: "0 0 16 16" })));
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-icon-button--sm');
+        await setProps({ size: 'lg' });
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-icon-button--lg');
+    });
+    it('renders size="xs" at 16px with an 8px icon and a smaller radius than sm/md/lg', async () => {
+        const { root } = await render(h("bs-icon-button", { ariaLabel: "Remove", size: "xs" }, h("svg", { viewBox: "0 0 16 16" })));
+        const button = root.shadowRoot.querySelector('button');
+        expect(button).toHaveClass('bs-icon-button--xs');
+        expect(getComputedStyle(button).width).toBe('16px');
+        expect(getComputedStyle(button).height).toBe('16px');
+        const icon = root.shadowRoot.querySelector('[part="icon"]');
+        expect(getComputedStyle(icon).width).toBe('8px');
+        expect(getComputedStyle(icon).height).toBe('8px');
+    });
+    it('sets aria-label on the inner button from the ariaLabel prop', async () => {
+        const { root } = await render(h("bs-icon-button", { ariaLabel: "Delete" }, h("svg", { viewBox: "0 0 16 16" })));
+        const button = root.shadowRoot.querySelector('button');
+        expect(button).toEqualAttribute('aria-label', 'Delete');
+    });
+    it('renders the native button type from the type prop', async () => {
+        const { root } = await render(h("bs-icon-button", { ariaLabel: "Submit", type: "submit" }, h("svg", { viewBox: "0 0 16 16" })));
+        const button = root.shadowRoot.querySelector('button');
+        expect(button).toEqualAttribute('type', 'submit');
+    });
+    it('renders the slotted icon content inside part="icon"', async () => {
+        const { root } = await render(h("bs-icon-button", { ariaLabel: "Confirm" }, h("svg", { class: "my-icon", viewBox: "0 0 16 16" })));
+        const iconWrapper = root.shadowRoot.querySelector('[part="icon"]');
+        expect(iconWrapper).not.toBeNull();
+        expect(iconWrapper.querySelector('slot')).not.toBeNull();
+        expect(root.querySelector('svg.my-icon')).not.toBeNull();
+    });
+});