@brandsync/wc 0.0.11 → 0.1.0

package/dist/collection/components/bs-button/bs-icon-button/bs-icon-button.css

@@ -0,0 +1,346 @@
+/**
+ * @prop --bs-icon-button-radius: Corner radius, size="sm"/"md"/"lg". Aliased to --bs-border-radius-100.
+ * @prop --bs-icon-button-radius-xs: Corner radius, size="xs" -- a smaller radius than --bs-icon-button-radius, since --bs-border-radius-100 (8px) on a 16px box would look nearly circular. Aliased to --bs-border-radius-50.
+ * @prop --bs-icon-button-size-xs: Container width/height at size="xs". 16px.
+ * @prop --bs-icon-button-icon-size-xs: Slotted icon width/height at size="xs". 8px.
+ * @prop --bs-icon-button-padding-xs: Padding on all sides, size="xs" only -- distinct from --bs-icon-button-padding, since 16px/8px icon math (4px) differs from the sm/md/lg constant (12px). Aliased to --bs-spacing-50.
+ * @prop --bs-icon-button-size-sm: Container width/height at size="sm". 40px.
+ * @prop --bs-icon-button-size-md: Container width/height at size="md". 44px.
+ * @prop --bs-icon-button-size-lg: Container width/height at size="lg". 48px.
+ * @prop --bs-icon-button-icon-size-sm: Slotted icon width/height at size="sm". 16px.
+ * @prop --bs-icon-button-icon-size-md: Slotted icon width/height at size="md". 20px.
+ * @prop --bs-icon-button-icon-size-lg: Slotted icon width/height at size="lg". 24px.
+ * @prop --bs-icon-button-padding: Padding on all sides, all sizes (constant -- centers the icon
+ * inside the container at every size). Aliased to --bs-spacing-150.
+ * @prop --bs-icon-button-primary-default: Background, variant="primary", default. Aliased to --bs-color-primary-default.
+ * @prop --bs-icon-button-primary-hover: Background, variant="primary", hover. Aliased to --bs-color-primary-hover.
+ * @prop --bs-icon-button-primary-pressed: Background, variant="primary", pressed. Aliased to --bs-color-primary-pressed.
+ * @prop --bs-icon-button-primary-disabled: Background, variant="primary", disabled. Aliased to --bs-surface-action-disabled.
+ * @prop --bs-icon-button-neutral-container: Background, variant="neutral", default/disabled. Aliased to --bs-color-neutral-container.
+ * @prop --bs-icon-button-neutral-hover: Background, variant="neutral", hover. Aliased to --bs-color-neutral-container-hover.
+ * @prop --bs-icon-button-neutral-pressed: Background, variant="neutral", pressed. Aliased to --bs-color-neutral-container-pressed.
+ * @prop --bs-icon-button-neutral-border: Border color, variant="neutral", default/disabled. Aliased to --bs-border-neutral-container.
+ * @prop --bs-icon-button-neutral-border-hover: Border color, variant="neutral", hover. Aliased to --bs-border-neutral-container-hover.
+ * @prop --bs-icon-button-neutral-border-pressed: Border color, variant="neutral", pressed. Aliased to --bs-border-neutral-container-pressed.
+ * @prop --bs-icon-button-subtle-hover: Background, variant="subtle", hover. Aliased to --bs-color-neutral-container.
+ * @prop --bs-icon-button-subtle-pressed: Background, variant="subtle", pressed. Aliased to --bs-color-neutral-container-pressed.
+ * @prop --bs-icon-button-subtle-focus: Focus ring color, variant="subtle". Aliased to --bs-border-primary-focus.
+ * @prop --bs-icon-button-outlined-border: Border color, variant="outlined", default. Aliased to --bs-border-primary.
+ * @prop --bs-icon-button-outlined-border-hover: Border color, variant="outlined", hover/pressed. Aliased to --bs-border-primary-hover.
+ * @prop --bs-icon-button-outlined-container: Background, variant="outlined", hover/pressed. Aliased to --bs-color-primary-container.
+ * @prop --bs-icon-button-outlined-focus: Focus ring color, variant="outlined". Aliased to --bs-border-primary-focus.
+ * @prop --bs-icon-button-success-default: Background, variant="success", default. Aliased to --bs-color-success-default.
+ * @prop --bs-icon-button-success-hover: Background, variant="success", hover. Aliased to --bs-color-success-hover.
+ * @prop --bs-icon-button-success-pressed: Background, variant="success", pressed. Aliased to --bs-color-success-pressed.
+ * @prop --bs-icon-button-success-disabled: Background, variant="success", disabled. Aliased to --bs-surface-action-disabled.
+ * @prop --bs-icon-button-success-focus: Focus ring color, variant="success". Aliased to --bs-border-success-focus.
+ * @prop --bs-icon-button-warning-default: Background, variant="warning", default. Aliased to --bs-color-warning-default.
+ * @prop --bs-icon-button-warning-hover: Background, variant="warning", hover. Aliased to --bs-color-warning-hover.
+ * @prop --bs-icon-button-warning-pressed: Background, variant="warning", pressed. Aliased to --bs-color-warning-pressed.
+ * @prop --bs-icon-button-warning-disabled: Background, variant="warning", disabled. Aliased to --bs-surface-action-disabled.
+ * @prop --bs-icon-button-warning-focus: Focus ring color, variant="warning". Aliased to --bs-border-warning-focus.
+ * @prop --bs-icon-button-info-default: Background, variant="info", default. Aliased to --bs-color-info-default.
+ * @prop --bs-icon-button-info-hover: Background, variant="info", hover. Aliased to --bs-color-info-hover.
+ * @prop --bs-icon-button-info-pressed: Background, variant="info", pressed. Aliased to --bs-color-info-pressed.
+ * @prop --bs-icon-button-info-disabled: Background, variant="info", disabled. Aliased to --bs-surface-action-disabled.
+ * @prop --bs-icon-button-info-focus: Focus ring color, variant="info". Aliased to --bs-border-info-focus.
+ * @prop --bs-icon-button-error-default: Background, variant="error", default. Aliased to --bs-color-error-default.
+ * @prop --bs-icon-button-error-hover: Background, variant="error", hover. Aliased to --bs-color-error-hover.
+ * @prop --bs-icon-button-error-pressed: Background, variant="error", pressed. Aliased to --bs-color-error-pressed.
+ * @prop --bs-icon-button-error-disabled: Background, variant="error", disabled. Aliased to --bs-surface-action-disabled.
+ * @prop --bs-icon-button-error-focus: Focus ring color, variant="error". Aliased to --bs-border-error-focus.
+ */
+:host {
+  display: inline-block;
+
+  --bs-icon-button-radius: var(--bs-border-radius-100);
+  /* Confirmed against Figma node 10365:55161: Large is 48x48 with a 24x24 icon, Medium is 44x44
+     with a 20x20 icon, Small is 40x40 with a 16x16 icon -- (container - icon) / 2 is 12px in all
+     three cases, matching the one concrete Figma data point (spacing/150, 12px padding on the
+     Large size) exactly, so padding is a single constant across all sizes. */
+  --bs-icon-button-size-sm: 40px;
+  --bs-icon-button-size-md: 44px;
+  --bs-icon-button-size-lg: 48px;
+  --bs-icon-button-icon-size-sm: 16px;
+  --bs-icon-button-icon-size-md: 20px;
+  --bs-icon-button-icon-size-lg: 24px;
+  --bs-icon-button-padding: var(--bs-spacing-150);
+
+  /* "Extra small" is a separate, much smaller tier (chip/tag "remove" controls) verified against a
+     different Figma redline (EG BrandSync UI Kit v1.5, node 20731:18427) -- 16px container, 8px
+     icon, 4px padding ((16-8)/2), matching --bs-spacing-50 exactly. Its own radius is smaller than
+     --bs-icon-button-radius (8px), which would look nearly circular on a 16px box. */
+  --bs-icon-button-radius-xs: var(--bs-border-radius-50);
+  --bs-icon-button-size-xs: 16px;
+  --bs-icon-button-icon-size-xs: 8px;
+  --bs-icon-button-padding-xs: var(--bs-spacing-50);
+
+  --bs-icon-button-primary-default: var(--bs-color-primary-default);
+  --bs-icon-button-primary-hover: var(--bs-color-primary-hover);
+  --bs-icon-button-primary-pressed: var(--bs-color-primary-pressed);
+  --bs-icon-button-primary-disabled: var(--bs-surface-action-disabled);
+
+  /* Same corrected pattern already applied to bs-button--neutral: a 1px border using the
+     neutral-container border family (not the plain --bs-border-neutral-hover/-active tokens),
+     and hover/pressed backgrounds from --bs-color-neutral-container-hover/-pressed. */
+  --bs-icon-button-neutral-container: var(--bs-color-neutral-container);
+  --bs-icon-button-neutral-hover: var(--bs-color-neutral-container-hover);
+  --bs-icon-button-neutral-pressed: var(--bs-color-neutral-container-pressed);
+  --bs-icon-button-neutral-border: var(--bs-border-neutral-container);
+  --bs-icon-button-neutral-border-hover: var(--bs-border-neutral-container-hover);
+  --bs-icon-button-neutral-border-pressed: var(--bs-border-neutral-container-pressed);
+
+  --bs-icon-button-subtle-hover: var(--bs-color-neutral-container);
+  --bs-icon-button-subtle-pressed: var(--bs-color-neutral-container-pressed);
+  --bs-icon-button-subtle-focus: var(--bs-border-primary-focus);
+
+  --bs-icon-button-outlined-border: var(--bs-border-primary);
+  --bs-icon-button-outlined-border-hover: var(--bs-border-primary-hover);
+  --bs-icon-button-outlined-container: var(--bs-color-primary-container);
+  --bs-icon-button-outlined-focus: var(--bs-border-primary-focus);
+
+  --bs-icon-button-success-default: var(--bs-color-success-default);
+  --bs-icon-button-success-hover: var(--bs-color-success-hover);
+  --bs-icon-button-success-pressed: var(--bs-color-success-pressed);
+  --bs-icon-button-success-disabled: var(--bs-surface-action-disabled);
+  --bs-icon-button-success-focus: var(--bs-border-success-focus);
+
+  --bs-icon-button-warning-default: var(--bs-color-warning-default);
+  --bs-icon-button-warning-hover: var(--bs-color-warning-hover);
+  --bs-icon-button-warning-pressed: var(--bs-color-warning-pressed);
+  --bs-icon-button-warning-disabled: var(--bs-surface-action-disabled);
+  --bs-icon-button-warning-focus: var(--bs-border-warning-focus);
+
+  --bs-icon-button-info-default: var(--bs-color-info-default);
+  --bs-icon-button-info-hover: var(--bs-color-info-hover);
+  --bs-icon-button-info-pressed: var(--bs-color-info-pressed);
+  --bs-icon-button-info-disabled: var(--bs-surface-action-disabled);
+  --bs-icon-button-info-focus: var(--bs-border-info-focus);
+
+  --bs-icon-button-error-default: var(--bs-color-error-default);
+  --bs-icon-button-error-hover: var(--bs-color-error-hover);
+  --bs-icon-button-error-pressed: var(--bs-color-error-pressed);
+  --bs-icon-button-error-disabled: var(--bs-surface-action-disabled);
+  --bs-icon-button-error-focus: var(--bs-border-error-focus);
+}
+
+.bs-icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border: none;
+  border-radius: var(--bs-icon-button-radius);
+  padding: var(--bs-icon-button-padding);
+  cursor: pointer;
+  transition: background-color var(--bs-duration-fast, 120ms) var(--bs-easing-standard, ease);
+}
+
+.bs-icon-button:focus-visible {
+  outline: 2px solid var(--bs-border-neutral-focus);
+  outline-offset: 2px;
+}
+
+.bs-icon-button:disabled {
+  cursor: not-allowed;
+}
+
+.bs-icon-button--xs {
+  width: var(--bs-icon-button-size-xs);
+  height: var(--bs-icon-button-size-xs);
+  padding: var(--bs-icon-button-padding-xs);
+  border-radius: var(--bs-icon-button-radius-xs);
+}
+.bs-icon-button--xs .bs-icon-button__icon {
+  width: var(--bs-icon-button-icon-size-xs);
+  height: var(--bs-icon-button-icon-size-xs);
+}
+
+.bs-icon-button--sm {
+  width: var(--bs-icon-button-size-sm);
+  height: var(--bs-icon-button-size-sm);
+}
+.bs-icon-button--sm .bs-icon-button__icon {
+  width: var(--bs-icon-button-icon-size-sm);
+  height: var(--bs-icon-button-icon-size-sm);
+}
+
+.bs-icon-button--md {
+  width: var(--bs-icon-button-size-md);
+  height: var(--bs-icon-button-size-md);
+}
+.bs-icon-button--md .bs-icon-button__icon {
+  width: var(--bs-icon-button-icon-size-md);
+  height: var(--bs-icon-button-icon-size-md);
+}
+
+.bs-icon-button--lg {
+  width: var(--bs-icon-button-size-lg);
+  height: var(--bs-icon-button-size-lg);
+}
+.bs-icon-button--lg .bs-icon-button__icon {
+  width: var(--bs-icon-button-icon-size-lg);
+  height: var(--bs-icon-button-icon-size-lg);
+}
+
+.bs-icon-button__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+}
+
+.bs-icon-button__icon ::slotted(*) {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.bs-icon-button--primary {
+  background: var(--bs-icon-button-primary-default);
+  color: var(--bs-text-on-action);
+}
+.bs-icon-button--primary:hover:not(:disabled) {
+  background: var(--bs-icon-button-primary-hover);
+}
+.bs-icon-button--primary:active:not(:disabled) {
+  background: var(--bs-icon-button-primary-pressed);
+}
+.bs-icon-button--primary:disabled {
+  background: var(--bs-icon-button-primary-disabled);
+  color: var(--bs-text-on-disabled);
+}
+
+.bs-icon-button--neutral {
+  background: var(--bs-icon-button-neutral-container);
+  color: var(--bs-text-default);
+  border: 1px solid var(--bs-icon-button-neutral-border);
+}
+.bs-icon-button--neutral:hover:not(:disabled) {
+  background: var(--bs-icon-button-neutral-hover);
+  border-color: var(--bs-icon-button-neutral-border-hover);
+}
+.bs-icon-button--neutral:active:not(:disabled) {
+  background: var(--bs-icon-button-neutral-pressed);
+  border-color: var(--bs-icon-button-neutral-border-pressed);
+}
+.bs-icon-button--neutral:disabled {
+  background: var(--bs-icon-button-neutral-container);
+  color: var(--bs-text-on-disabled);
+  border-color: var(--bs-icon-button-neutral-border);
+}
+
+.bs-icon-button--error {
+  background: var(--bs-icon-button-error-default);
+  color: var(--bs-text-on-action);
+}
+.bs-icon-button--error:hover:not(:disabled) {
+  background: var(--bs-icon-button-error-hover);
+}
+.bs-icon-button--error:active:not(:disabled) {
+  background: var(--bs-icon-button-error-pressed);
+}
+.bs-icon-button--error:disabled {
+  background: var(--bs-icon-button-error-disabled);
+  color: var(--bs-text-on-disabled);
+}
+.bs-icon-button--error:focus-visible {
+  outline-color: var(--bs-icon-button-error-focus);
+}
+
+.bs-icon-button--success {
+  background: var(--bs-icon-button-success-default);
+  color: var(--bs-text-on-action);
+}
+.bs-icon-button--success:hover:not(:disabled) {
+  background: var(--bs-icon-button-success-hover);
+}
+.bs-icon-button--success:active:not(:disabled) {
+  background: var(--bs-icon-button-success-pressed);
+}
+.bs-icon-button--success:disabled {
+  background: var(--bs-icon-button-success-disabled);
+  color: var(--bs-text-on-disabled);
+}
+.bs-icon-button--success:focus-visible {
+  outline-color: var(--bs-icon-button-success-focus);
+}
+
+.bs-icon-button--warning {
+  background: var(--bs-icon-button-warning-default);
+  /* --bs-text-on-action (not --bs-text-default), matching bs-button--warning's own contrast fix --
+     --bs-text-default failed WCAG AA against this background in both themes. */
+  color: var(--bs-text-on-action);
+}
+.bs-icon-button--warning:hover:not(:disabled) {
+  background: var(--bs-icon-button-warning-hover);
+}
+.bs-icon-button--warning:active:not(:disabled) {
+  background: var(--bs-icon-button-warning-pressed);
+}
+.bs-icon-button--warning:disabled {
+  background: var(--bs-icon-button-warning-disabled);
+  color: var(--bs-text-on-disabled);
+}
+.bs-icon-button--warning:focus-visible {
+  outline-color: var(--bs-icon-button-warning-focus);
+}
+
+.bs-icon-button--info {
+  background: var(--bs-icon-button-info-default);
+  color: var(--bs-text-on-action);
+}
+.bs-icon-button--info:hover:not(:disabled) {
+  background: var(--bs-icon-button-info-hover);
+}
+.bs-icon-button--info:active:not(:disabled) {
+  background: var(--bs-icon-button-info-pressed);
+}
+.bs-icon-button--info:disabled {
+  background: var(--bs-icon-button-info-disabled);
+  color: var(--bs-text-on-disabled);
+}
+.bs-icon-button--info:focus-visible {
+  outline-color: var(--bs-icon-button-info-focus);
+}
+
+.bs-icon-button--subtle {
+  background: transparent;
+  color: var(--bs-icon-neutral-default);
+}
+.bs-icon-button--subtle:hover:not(:disabled) {
+  background: var(--bs-icon-button-subtle-hover);
+}
+.bs-icon-button--subtle:active:not(:disabled) {
+  background: var(--bs-icon-button-subtle-pressed);
+}
+.bs-icon-button--subtle:disabled {
+  background: transparent;
+  color: var(--bs-text-on-disabled);
+}
+.bs-icon-button--subtle:focus-visible {
+  outline-color: var(--bs-icon-button-subtle-focus);
+  background: var(--bs-icon-button-subtle-hover);
+}
+
+.bs-icon-button--outlined {
+  background: transparent;
+  color: var(--bs-color-primary-default);
+  border: 1.5px solid var(--bs-icon-button-outlined-border);
+}
+.bs-icon-button--outlined:hover:not(:disabled) {
+  background: var(--bs-icon-button-outlined-container);
+  border-color: var(--bs-icon-button-outlined-border-hover);
+}
+.bs-icon-button--outlined:active:not(:disabled) {
+  background: var(--bs-icon-button-outlined-container);
+  color: var(--bs-color-primary-pressed);
+  border-color: var(--bs-icon-button-outlined-border-hover);
+}
+.bs-icon-button--outlined:disabled {
+  opacity: var(--bs-opacity-disabled);
+  cursor: not-allowed;
+}
+.bs-icon-button--outlined:focus-visible {
+  outline-color: var(--bs-icon-button-outlined-focus);
+}

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

@@ -0,0 +1,185 @@
+import { h } from "@stencil/core";
+/**
+ * A clickable, icon-only action element -- the icon-only sibling of `bs-button`, sharing the same
+ * 8 visual variants and color language, but ALWAYS rendering just a single icon, never a label.
+ *
+ * ## When to use
+ * - A compact action where the icon alone is unambiguous (e.g. a close/dismiss control, a toolbar
+ *   action) and adding a text label would take up more space than the context allows.
+ * - The same variant guidance as `bs-button` applies: `primary` for the single most important
+ *   action, `neutral`/`subtle`/`outlined` for lower-emphasis alternatives, `error` reserved for
+ *   destructive/irreversible actions (never `neutral`, per BrandSync guidance), `success`/
+ *   `warning`/`info` only when the action's own outcome is predictable and clearly communicated.
+ *
+ * ## When not to use
+ * - When the action isn't self-evident from the icon alone -- use `bs-button` with a visible label
+ *   instead, don't rely on a tooltip to compensate for an unclear icon.
+ * - For navigation between pages -- use a link/nav component instead.
+ *
+ * Because this component is always icon-only, `ariaLabel` is required for every real usage (not
+ * just conditionally, unlike `bs-button`) -- there's no visible label text to fall back on for an
+ * accessible name.
+ *
+ * @slot - Default slot: the icon content. Exactly one icon, no label.
+ * @part icon - The icon wrapper element.
+ */
+// Note: this component's CSS Custom Properties (--bs-icon-button-*) are documented via @prop
+// comments in bs-icon-button.css, not here -- Stencil's docs generator only parses @prop out of
+// CSS file comments, not the class-level JSDoc (see bs-tab.css's/bs-inline-tab.css's equivalent note).
+export class BsIconButton {
+    el;
+    /**
+     * Visual style. Maps to the same semantic token families as `bs-button`'s `variant`.
+     * `error` is for destructive/irreversible actions per BrandSync guidance, not a stronger
+     * emphasis alternative to `primary`.
+     */
+    variant = 'primary';
+    /** Sizing scale. `xs` (16px, an 8px icon) is a distinct, much smaller tier meant for compact
+     * chip/tag "remove" controls, not just a smaller toolbar button -- verified against a separate
+     * Figma redline (EG BrandSync UI Kit v1.5, node 20731:18427) from the one `sm`/`md`/`lg` were
+     * built against. */
+    size = 'md';
+    /** Disables the button and applies the disabled token set. */
+    disabled = false;
+    /** Native `<button>` type. */
+    type = 'button';
+    /**
+     * Accessible name for the button. Required -- this component is always icon-only, so there's
+     * no visible label text for screen readers to fall back on. Stencil reflects this camelCase
+     * prop to the `aria-label` HTML attribute automatically.
+     */
+    ariaLabel = null;
+    render() {
+        return (h("button", { key: '174cb1f4c7eb14ba404991cebf081ecd25294faf', class: `bs-icon-button bs-icon-button--${this.variant} bs-icon-button--${this.size}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel }, h("span", { key: '613f2701ee211ead437c5137344db4f7e3de1893', part: "icon", class: "bs-icon-button__icon" }, h("slot", { key: '4f7053179b9ce70eb82731f01b5b0b33f9911240' }))));
+    }
+    static get is() { return "bs-icon-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-icon-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-icon-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsIconButtonVariant",
+                    "resolved": "\"error\" | \"info\" | \"neutral\" | \"outlined\" | \"primary\" | \"subtle\" | \"success\" | \"warning\"",
+                    "references": {
+                        "BsIconButtonVariant": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-button/bs-icon-button/bs-icon-button.tsx",
+                            "id": "src/components/bs-button/bs-icon-button/bs-icon-button.tsx::BsIconButtonVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual style. Maps to the same semantic token families as `bs-button`'s `variant`.\n`error` is for destructive/irreversible actions per BrandSync guidance, not a stronger\nemphasis alternative to `primary`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'primary'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsIconButtonSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
+                    "references": {
+                        "BsIconButtonSize": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-button/bs-icon-button/bs-icon-button.tsx",
+                            "id": "src/components/bs-button/bs-icon-button/bs-icon-button.tsx::BsIconButtonSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sizing scale. `xs` (16px, an 8px icon) is a distinct, much smaller tier meant for compact\nchip/tag \"remove\" controls, not just a smaller toolbar button -- verified against a separate\nFigma redline (EG BrandSync UI Kit v1.5, node 20731:18427) from the one `sm`/`md`/`lg` were\nbuilt against."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the button and applies the disabled token set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'button' | 'submit' | 'reset'",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Native `<button>` type."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'button'"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the button. Required -- this component is always icon-only, so there's\nno visible label text for screen readers to fall back on. Stencil reflects this camelCase\nprop to the `aria-label` HTML attribute automatically."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/bs-button/bs-icon-button/bs-icon-button.stories.js

@@ -0,0 +1,74 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../../stories-utils";
+const variants = ['primary', 'neutral', 'subtle', 'outlined', 'success', 'warning', 'info', 'error'];
+const sizes = ['xs', 'sm', 'md', 'lg'];
+const checkIcon = html `
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <path d="M13 4L6 11L3 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+  </svg>
+`;
+const meta = {
+    title: 'Components/bs-button/bs-icon-button',
+    parameters: { docs: { description: { component: componentDescription('bs-icon-button') } } },
+    render: args => html `
+    <bs-icon-button variant=${args.variant} size=${args.size} type=${args.type} aria-label=${args.ariaLabel} ?disabled=${args.disabled}>
+      ${checkIcon}
+    </bs-icon-button>
+  `,
+    argTypes: {
+        variant: { control: 'select', options: variants, description: propDescription('bs-icon-button', 'variant') },
+        size: { control: 'select', options: sizes, description: propDescription('bs-icon-button', 'size') },
+        disabled: { control: 'boolean', description: propDescription('bs-icon-button', 'disabled') },
+        type: { control: 'select', options: ['button', 'submit', 'reset'], description: propDescription('bs-icon-button', 'type') },
+        ariaLabel: { control: 'text', description: propDescription('bs-icon-button', 'ariaLabel') },
+    },
+    args: {
+        variant: 'primary',
+        size: 'md',
+        disabled: false,
+        type: 'button',
+        ariaLabel: 'Confirm',
+    },
+};
+export default meta;
+export const Primary = {};
+export const Sizes = {
+    render: args => html `
+    <div style="display:flex; gap:12px; align-items:center;">
+      <bs-icon-button size="xs" aria-label=${args.ariaLabel}>${checkIcon}</bs-icon-button>
+      <bs-icon-button size="sm" aria-label=${args.ariaLabel}>${checkIcon}</bs-icon-button>
+      <bs-icon-button size="md" aria-label=${args.ariaLabel}>${checkIcon}</bs-icon-button>
+      <bs-icon-button size="lg" aria-label=${args.ariaLabel}>${checkIcon}</bs-icon-button>
+    </div>
+  `,
+};
+export const Disabled = {
+    args: { disabled: true },
+};
+export const AllCombinations = {
+    name: 'All variant × size × disabled combinations',
+    render: () => html `
+    <table style="border-collapse: collapse;">
+      <thead>
+        <tr>
+          <th style="text-align:left; padding: 4px 12px;">Variant</th>
+          ${sizes.map(size => html `<th style="text-align:left; padding: 4px 12px;">${size}</th>`)}
+          ${sizes.map(size => html `<th style="text-align:left; padding: 4px 12px;">${size} (disabled)</th>`)}
+        </tr>
+      </thead>
+      <tbody>
+        ${variants.map(variant => html `
+            <tr>
+              <td style="padding: 8px 12px; font-family: monospace;">${variant}</td>
+              ${sizes.map(size => html `<td style="padding: 8px 12px;">
+                    <bs-icon-button variant=${variant} size=${size} aria-label="Confirm">${checkIcon}</bs-icon-button>
+                  </td>`)}
+              ${sizes.map(size => html `<td style="padding: 8px 12px;">
+                    <bs-icon-button variant=${variant} size=${size} aria-label="Confirm" disabled>${checkIcon}</bs-icon-button>
+                  </td>`)}
+            </tr>
+          `)}
+      </tbody>
+    </table>
+  `,
+};

package/dist/collection/components/bs-button-skeleton/bs-button-skeleton.js

@@ -25,7 +25,7 @@ export class BsButtonSkeleton {
     /** Sizing scale, matching the `bs-button` size it stands in for. */
     size = 'md';
     render() {
-        return h("span", { key: 'e6c4a5ec58e722b27daccd62e9315218205c3c73', part: "container", class: `bs-button-skeleton bs-button-skeleton--${this.size}`, role: "status", "aria-label": "Loading" });
+        return h("span", { key: '3fac3516a35e12ebe5f26d83c1e6df05bf087642', part: "container", class: `bs-button-skeleton bs-button-skeleton--${this.size}`, role: "status", "aria-label": "Loading" });
     }
     static get is() { return "bs-button-skeleton"; }
     static get encapsulation() { return "shadow"; }
@@ -50,8 +50,8 @@ export class BsButtonSkeleton {
                     "references": {
                         "BsButtonSize": {
                             "location": "import",
-                            "path": "../bs-button/bs-button",
-                            "id": "src/components/bs-button/bs-button.tsx::BsButtonSize",
+                            "path": "../bs-button/bs-button/bs-button",
+                            "id": "src/components/bs-button/bs-button/bs-button.tsx::BsButtonSize",
                             "referenceLocation": "BsButtonSize"
                         }
                     }

package/dist/collection/components/bs-card/bs-card.cmp.test.js

@@ -39,4 +39,23 @@ describe('bs-card', () => {
         expect(header.textContent.trim()).toBe('');
         expect(footer.textContent.trim()).toBe('');
     });
+    it('lays out multiple footer items as a right-aligned row', async () => {
+        const { root } = await render(h("bs-card", null, "Body content", h("button", { slot: "footer" }, "Cancel"), h("button", { slot: "footer" }, "Confirm")));
+        const footer = root.shadowRoot.querySelector('[part="footer"]');
+        expect(getComputedStyle(footer).display).toBe('flex');
+        expect(getComputedStyle(footer).justifyContent).toBe('flex-end');
+    });
+    describe('image slot', () => {
+        it('has no visible image wrapper when the image slot is empty', async () => {
+            const { root } = await render(h("bs-card", null, "Body content"));
+            const image = root.shadowRoot.querySelector('[part="image"]');
+            expect(image).not.toBeNull();
+            expect(image).not.toHaveClass('bs-card__image--visible');
+        });
+        it('shows the image wrapper when the image slot has content', async () => {
+            const { root } = await render(h("bs-card", null, "Body content", h("img", { slot: "image", src: "hero.jpg", alt: "" })));
+            const image = root.shadowRoot.querySelector('[part="image"]');
+            expect(image).toHaveClass('bs-card__image--visible');
+        });
+    });
 });