@brandsync/wc 0.0.11 → 0.1.0

package/dist/collection/components/bs-breadcrumb/bs-breadcrumbs/bs-breadcrumbs.stories.js

@@ -0,0 +1,84 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../../stories-utils";
+const sizes = ['sm', 'md'];
+const meta = {
+    title: 'Components/bs-breadcrumbs',
+    parameters: { docs: { description: { component: componentDescription('bs-breadcrumbs') } } },
+    argTypes: {
+        label: { control: 'text', description: propDescription('bs-breadcrumbs', 'label') },
+        size: { control: { type: 'select' }, options: sizes, description: propDescription('bs-breadcrumbs', 'size') },
+    },
+    args: {
+        label: 'Breadcrumb',
+        size: 'md',
+    },
+};
+export default meta;
+const overflowItems = [
+    { label: 'Products', href: '/products' },
+    { label: 'Category', href: '/products/category' },
+];
+// A short trail needs no overflow at all -- bs-breadcrumb-overflow is only placed by the consumer
+// when there are actually hidden crumbs to disclose (there's no automatic maxItems collapsing).
+export const Default = {
+    render: args => html `
+    <bs-breadcrumbs label=${args.label} size=${args.size}>
+      <bs-breadcrumb href="/">Home</bs-breadcrumb>
+      <bs-breadcrumb href="/settings">Settings</bs-breadcrumb>
+      <bs-breadcrumb current>Profile</bs-breadcrumb>
+    </bs-breadcrumbs>
+  `,
+};
+// size="sm" set once on the container, propagated as a JS property to every slotted crumb (and the
+// overflow disclosure) -- see bs-breadcrumbs.tsx's propagateSize.
+export const Small = {
+    args: { size: 'sm' },
+    render: args => html `
+    <bs-breadcrumbs label=${args.label} size=${args.size}>
+      <bs-breadcrumb href="/">Home</bs-breadcrumb>
+      <bs-breadcrumb-overflow .items=${overflowItems}></bs-breadcrumb-overflow>
+      <bs-breadcrumb href="/settings/profile">Profile</bs-breadcrumb>
+      <bs-breadcrumb current>Edit</bs-breadcrumb>
+    </bs-breadcrumbs>
+  `,
+};
+// A longer trail where the consumer has chosen to hide the middle crumbs behind a manually placed
+// <bs-breadcrumb-overflow>, reachable via its ellipsis disclosure.
+export const WithOverflow = {
+    name: 'With overflow',
+    render: args => html `
+    <bs-breadcrumbs label=${args.label}>
+      <bs-breadcrumb href="/">Home</bs-breadcrumb>
+      <bs-breadcrumb-overflow .items=${overflowItems}></bs-breadcrumb-overflow>
+      <bs-breadcrumb href="/settings/profile">Profile</bs-breadcrumb>
+      <bs-breadcrumb current>Edit</bs-breadcrumb>
+    </bs-breadcrumbs>
+  `,
+};
+// A crumb with neither `current` nor `href` -- not the current page, but also not navigable (e.g.
+// an archived section heading). Renders as plain, non-interactive text with the same muted styling
+// as a link.
+export const NonLinkCrumb = {
+    args: {
+        size: 'md',
+    },
+    name: 'Non-link crumb',
+    render: args => html `
+    <bs-breadcrumbs label=${args.label}>
+      <bs-breadcrumb href="/">Home</bs-breadcrumb>
+      <bs-breadcrumb>Archived section</bs-breadcrumb>
+      <bs-breadcrumb current>Report</bs-breadcrumb>
+    </bs-breadcrumbs>
+  `,
+};
+// Sanity-checks the :host(:first-child) separator-hiding rule when a <bs-breadcrumb-overflow> --
+// rather than a <bs-breadcrumb> -- is the visually first element in the trail.
+export const OverflowFirst = {
+    name: 'Overflow first',
+    render: () => html `
+    <bs-breadcrumbs label="Breadcrumb">
+      <bs-breadcrumb-overflow .items=${overflowItems}></bs-breadcrumb-overflow>
+      <bs-breadcrumb current>Edit</bs-breadcrumb>
+    </bs-breadcrumbs>
+  `,
+};

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: '3820c965cff86109613dac0d6ffaf5ee0a926f26', 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: 'b8fb25e26d96168d6676acc0c3fa1b4f3429e974', part: "icon", class: `bs-button__icon ${this.hasIcon ? 'bs-button__icon--visible' : ''}` }, h("slot", { key: 'cd5e33cf19f19b89c2f87153d20d32bf0d3dabb9', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '91c9fd334013c495d2ec836619b9aecebc3c8e20', part: "label", class: "bs-button__label" }, h("slot", { key: 'c363d5d5004d2b2e9e5a4e09fa6cbe2ab87d9fff', onSlotchange: this.onLabelSlotchange })), h("span", { key: '29c1b4457efcfb9c11b0095279b77f3e97fa9988', part: "end-icon", class: `bs-button__end-icon ${this.hasEndIcon ? 'bs-button__end-icon--visible' : ''}` }, h("slot", { key: '9a6d3c0fcc16d8b546e225d88ae4d6014e9b2e45', 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();
+    });
+});