@brandsync/wc 0.0.10 → 0.0.12

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: '1551d4e87c9bdedfc51a1a325c93ea9849aa9702', 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: '3966f47ff21fef8687d6d04289863039c2837f10', part: "icon", class: "bs-icon-button__icon" }, h("slot", { key: 'c673adaf051d568be40b13ddad39447994935b2b' }))));
+    }
+    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: '3d08a657337abf1db82ab85d3ef6c6a15a23010a', part: "container", class: `bs-button-skeleton bs-button-skeleton--${this.size}`, role: "status", "aria-label": "Loading" });
+        return h("span", { key: 'ebb3b98f01114e96f304e11a5104235abaf97db0', 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-chatbot-feedback/bs-chatbot-feedback.js

@@ -123,7 +123,7 @@ export class BsChatbotFeedback {
     }
     render() {
         const stars = [1, 2, 3, 4, 5];
-        return (h("div", { key: 'e509feb04a65ee7908c9021befe43ddb0727fd00', class: "bs-chatbot-feedback", role: "region", "aria-label": this.computedHeading() }, h("button", { key: '3c1e7f84bb1a2e0e6f89323f2c45102c3714c0f6', type: "button", part: "close", class: "bs-chatbot-feedback__close", "aria-label": "Close", onClick: this.onCloseClick }, h(CloseIcon, { key: '30202380a79f55d4187ff6f50fc0a11d7a282b81' })), h("div", { key: '228f8195087f1d6d3ec6ba53f954ab722cae2971', class: "bs-chatbot-feedback__top" }, h("div", { key: 'd7fb1f58d21aed4fa9b0e5da83a5506e8082c5ff', class: "bs-chatbot-feedback__text" }, h("p", { key: '7e275ebb91562a2f3b4eaf8076a7238f82260bcf', part: "heading", class: "bs-chatbot-feedback__heading" }, this.computedHeading()), h("p", { key: '0bd022e0594dee0a084a83fcce90abeb2b8c8a98', part: "subtitle", class: "bs-chatbot-feedback__subtitle" }, this.computedSubtitle())), h("div", { key: '0c54cd7cfc1b14c4feac0859e1ad2dd3ee2af8a1', class: "bs-chatbot-feedback__stars", role: "radiogroup", "aria-label": "Rating" }, stars.map(value => (h("button", { type: "button", part: "star", class: "bs-chatbot-feedback__star", role: "radio", "aria-checked": (this.rating >= value).toString(), "aria-label": `${value} star${value > 1 ? 's' : ''}`, disabled: this.submitted, onClick: () => this.onStarClick(value) }, h(StarIcon, { filled: this.rating >= value }))))), !this.submitted && (h("div", { key: '4e00821d17646c1d71d9893a7459557f9fcf24d2', class: "bs-chatbot-feedback__field" }, h("label", { key: '11d31fb2ff6897e97e2ec4196ead7269d60cec7b', part: "label", class: "bs-chatbot-feedback__label", htmlFor: "bs-chatbot-feedback-comment" }, "Tell us what you think"), h("textarea", { key: 'd6228e4d737e90ab61cca91d633e36ac69f1c172', part: "textarea", id: "bs-chatbot-feedback-comment", class: "bs-chatbot-feedback__textarea", placeholder: "e.g.The response was helpful ....", value: this.comment, onInput: this.onCommentInput }))), this.submitted && this.comment && (h("p", { key: 'bb5fdd240b07a6051cb784077b3476af1e1217fb', part: "comment", class: "bs-chatbot-feedback__comment" }, this.comment))), h("div", { key: '0d262521f8f13b464f4cbfa746ce49bd330986c6', class: "bs-chatbot-feedback__actions" }, !this.submitted && (h("button", { key: 'a5e8cc2a7bdd290cc95afeefe5d1fc5a1dde86ce', type: "button", part: "submit", class: "bs-chatbot-feedback__submit", disabled: this.rating === 0, onClick: this.onSubmitClick }, h(SendIcon, { key: '163b0c11e0038ae01d7bc61ae1f8c50930b7f8f2' }), "Submit feedback")), h("button", { key: '3cf2d4b2cd6b9043d4194a991cc0e33fa09c69e4', type: "button", part: "new-chat", class: `bs-chatbot-feedback__new-chat ${this.submitted ? 'bs-chatbot-feedback__new-chat--primary' : 'bs-chatbot-feedback__new-chat--outlined'}`, onClick: this.onNewChatClick }, h(EditIcon, { key: 'a0fddede710c06b60302e4cb12b7affe9ed8afec' }), "Start new chat"))));
+        return (h("div", { key: '958b381765b939194015956808f4174d722ba0ce', class: "bs-chatbot-feedback", role: "region", "aria-label": this.computedHeading() }, h("button", { key: '17530d9be43a87fb4c618f7f4e0565fbd0593a2e', type: "button", part: "close", class: "bs-chatbot-feedback__close", "aria-label": "Close", onClick: this.onCloseClick }, h(CloseIcon, { key: '1b6355d2d0573cbace8dafc6cc1e78495de853a6' })), h("div", { key: 'c6da57111aa1cce21ff870737a0056978291b3d6', class: "bs-chatbot-feedback__top" }, h("div", { key: '8b4ee3b5e67c2595114d9aeb7de0925f3fb3d588', class: "bs-chatbot-feedback__text" }, h("p", { key: '2bba1c4dff7a114f805ed99f6a059691b255e254', part: "heading", class: "bs-chatbot-feedback__heading" }, this.computedHeading()), h("p", { key: 'cde3ca2f01bbaffb68a0acbe0a63ab5ddb0d3e3a', part: "subtitle", class: "bs-chatbot-feedback__subtitle" }, this.computedSubtitle())), h("div", { key: '5254779fd0034d29f8680715368e955601f0e5e2', class: "bs-chatbot-feedback__stars", role: "radiogroup", "aria-label": "Rating" }, stars.map(value => (h("button", { type: "button", part: "star", class: "bs-chatbot-feedback__star", role: "radio", "aria-checked": (this.rating >= value).toString(), "aria-label": `${value} star${value > 1 ? 's' : ''}`, disabled: this.submitted, onClick: () => this.onStarClick(value) }, h(StarIcon, { filled: this.rating >= value }))))), !this.submitted && (h("div", { key: '065adc6951f38a51d030927903611433c1999af9', class: "bs-chatbot-feedback__field" }, h("label", { key: 'ff30ad230c00ba317d93c79e035a1b62694a76d2', part: "label", class: "bs-chatbot-feedback__label", htmlFor: "bs-chatbot-feedback-comment" }, "Tell us what you think"), h("textarea", { key: '43fc6cadc16018698d2c6302cf825d0b75c76504', part: "textarea", id: "bs-chatbot-feedback-comment", class: "bs-chatbot-feedback__textarea", placeholder: "e.g.The response was helpful ....", value: this.comment, onInput: this.onCommentInput }))), this.submitted && this.comment && (h("p", { key: '9287bcb34a6cc9e9f3996849cd053760d5c889d6', part: "comment", class: "bs-chatbot-feedback__comment" }, this.comment))), h("div", { key: 'cc38753eafe474751cf46a0a25c7f96da20c72b0', class: "bs-chatbot-feedback__actions" }, !this.submitted && (h("button", { key: '0ada3886248fd12d092d52440e324c45528b5c18', type: "button", part: "submit", class: "bs-chatbot-feedback__submit", disabled: this.rating === 0, onClick: this.onSubmitClick }, h(SendIcon, { key: 'fa201b999654584cf7fde867f41e9c4d2eba7366' }), "Submit feedback")), h("button", { key: '5d37a84efd037c41402e08a93470ec905475614f', type: "button", part: "new-chat", class: `bs-chatbot-feedback__new-chat ${this.submitted ? 'bs-chatbot-feedback__new-chat--primary' : 'bs-chatbot-feedback__new-chat--outlined'}`, onClick: this.onNewChatClick }, h(EditIcon, { key: 'fbd6ea31d55db9b43895ad75802f733b03daec54' }), "Start new chat"))));
     }
     static get is() { return "bs-chatbot-feedback"; }
     static get encapsulation() { return "shadow"; }