@brandsync/wc 1.18.0 → 1.20.0

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

@@ -0,0 +1,49 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { assertShadowParts, assertCssCustomProperties, runAxeCheck } from "../../test/helpers/conventions";
+const q = (el, s) => el.shadowRoot.querySelector(s);
+describe('bs-stat', () => {
+    it('renders label and value inside a bs-card with dl semantics', async () => {
+        const { root } = await render(h("bs-stat", { label: "Active users", value: "1,284" }));
+        expect(q(root, '[part="container"]').tagName).toBe('BS-CARD');
+        expect(q(root, 'dl dt [part="label"]').textContent).toBe('Active users');
+        expect(q(root, 'dl dd [part="value"]').textContent).toBe('1,284');
+        expect(q(root, '[part="trend"]')).toBeNull();
+        assertShadowParts(root.shadowRoot, ['container', 'label', 'value']);
+        assertCssCustomProperties(root, ['--bs-stat-value-size', '--bs-stat-label-color', '--bs-stat-trend-color-positive']);
+    });
+    it.each([
+        ['up', 'positive', 'Increase of'],
+        ['down', 'negative', 'Decrease of'],
+        ['neutral', 'neutral', 'No change'],
+    ])('trend %s has %s styling and accessible text', async (trend, intent, text) => {
+        const { root } = await render(h("bs-stat", { label: "L", value: "1", trend: trend, trendValue: "12%" }));
+        const t = q(root, '[part="trend"]');
+        expect(t.classList.contains(`bs-stat__trend--${intent}`)).toBe(true);
+        expect(t.textContent).toContain(text);
+        expect(t.textContent).toContain('12%');
+        expect(q(root, '[part="trend-icon"]').getAttribute('aria-hidden')).toBe('true');
+    });
+    it('trendIntent overrides the direction colour (e.g. churn going up)', async () => {
+        const { root } = await render(h("bs-stat", { label: "Churn", value: "4%", trend: "up", trendValue: "1%", trendIntent: "negative" }));
+        expect(q(root, '[part="trend"]').classList.contains('bs-stat__trend--negative')).toBe(true);
+        expect(q(root, '[part="trend"]').textContent).toContain('Increase of');
+    });
+    it('uses custom trend labels', async () => {
+        const { root } = await render(h("bs-stat", { label: "L", value: "1", trend: "up", trendValue: "2", trendUpLabel: "Op med" }));
+        expect(q(root, '[part="trend"]').textContent).toContain('Op med');
+    });
+    it('passes surface to bs-card', async () => {
+        const { root } = await render(h("bs-stat", { label: "L", value: "1", surface: "base" }));
+        expect(q(root, '[part="container"]').getAttribute('surface')).toBe('base');
+    });
+    it('shows the icon wrapper only with a slotted icon', async () => {
+        const { root } = await render(h("bs-stat", { label: "L", value: "1" }, h("svg", { slot: "icon", viewBox: "0 0 20 20" })));
+        expect(getComputedStyle(q(root, '.bs-stat__icon')).display).not.toBe('none');
+        const { root: plain } = await render(h("bs-stat", { label: "L", value: "1" }));
+        expect(getComputedStyle(q(plain, '.bs-stat__icon')).display).toBe('none');
+    });
+    it('passes axe', async () => {
+        const { root } = await render(h("div", null, h("bs-stat", { label: "Active users", value: "1,284", trend: "up", trendValue: "12%" }), h("bs-stat", { label: "Churn", value: "4%", trend: "down", trendValue: "1%" }), h("bs-stat", { label: "Revenue", value: "$2M", trend: "neutral" })));
+        await runAxeCheck(root);
+    });
+});

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

@@ -0,0 +1,116 @@
+/**
+ * @prop --bs-stat-gap: Gap between label, value and extra content. Aliased to --bs-spacing-50.
+ * @prop --bs-stat-padding: Card padding. Aliased to --bs-spacing-200 (forwarded to --bs-card-padding).
+ * @prop --bs-stat-label-color: Aliased to --bs-text-secondary.
+ * @prop --bs-stat-label-size: Aliased to --bs-font-size-sm.
+ * @prop --bs-stat-value-color: Aliased to --bs-text-default.
+ * @prop --bs-stat-value-size: Aliased to --bs-font-size-4xl.
+ * @prop --bs-stat-value-weight: Aliased to --bs-font-weight-bold.
+ * @prop --bs-stat-trend-size: Aliased to --bs-font-size-sm.
+ * @prop --bs-stat-trend-color-positive: Aliased to --bs-text-success.
+ * @prop --bs-stat-trend-color-negative: Aliased to --bs-text-error.
+ * @prop --bs-stat-trend-color-neutral: Aliased to --bs-text-secondary.
+ */
+:host {
+  display: block;
+  --bs-stat-gap: var(--bs-spacing-50);
+  --bs-stat-padding: var(--bs-spacing-200);
+  --bs-stat-label-color: var(--bs-text-secondary);
+  --bs-stat-label-size: var(--bs-font-size-sm);
+  --bs-stat-value-color: var(--bs-text-default);
+  --bs-stat-value-size: var(--bs-font-size-4xl);
+  --bs-stat-value-weight: var(--bs-font-weight-bold);
+  --bs-stat-trend-size: var(--bs-font-size-sm);
+  --bs-stat-trend-color-positive: var(--bs-text-success);
+  --bs-stat-trend-color-negative: var(--bs-text-error);
+  --bs-stat-trend-color-neutral: var(--bs-text-secondary);
+}
+
+.bs-stat {
+  --bs-card-padding: var(--bs-stat-padding);
+}
+
+.bs-stat__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-stat-gap);
+  margin: 0;
+  font-family: inherit;
+}
+.bs-stat__body dd,
+.bs-stat__body dt {
+  margin: 0;
+}
+
+.bs-stat__head {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+  color: var(--bs-stat-label-color);
+  font-size: var(--bs-stat-label-size);
+  line-height: 1.4;
+}
+.bs-stat__icon {
+  display: none;
+}
+.bs-stat__icon--visible {
+  display: inline-flex;
+}
+.bs-stat__icon ::slotted(*) {
+  width: 20px;
+  height: 20px;
+}
+
+.bs-stat__figure {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  column-gap: var(--bs-spacing-150);
+}
+.bs-stat__value {
+  color: var(--bs-stat-value-color);
+  font-size: var(--bs-stat-value-size);
+  font-weight: var(--bs-stat-value-weight);
+  line-height: 1.2;
+}
+
+.bs-stat__trend {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-spacing-25);
+  font-size: var(--bs-stat-trend-size);
+  font-weight: var(--bs-font-weight-semibold);
+}
+.bs-stat__trend--positive {
+  color: var(--bs-stat-trend-color-positive);
+}
+.bs-stat__trend--negative {
+  color: var(--bs-stat-trend-color-negative);
+}
+.bs-stat__trend--neutral {
+  color: var(--bs-stat-trend-color-neutral);
+}
+.bs-stat__trend-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+.bs-stat__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.bs-stat__extra {
+  color: var(--bs-stat-label-color);
+  font-size: var(--bs-stat-label-size);
+}
+.bs-stat__extra:not(.bs-stat__extra--visible) {
+  display: none;
+}

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

@@ -0,0 +1,284 @@
+import { h } from "@stencil/core";
+/**
+ * A key figure: a label, a large value and an optional trend (up, down or flat) with a change figure.
+ *
+ * ## When to use
+ * - Dashboard KPIs and summary numbers ("Active users 1,284, up 12%").
+ *
+ * ## When not to use
+ * - A time series or comparison of many values -- use a chart.
+ * - A progress toward a goal -- use `bs-progress` / `bs-progress-linear`.
+ * - A count on another element -- use `bs-badge`.
+ *
+ * **Built from:** `bs-card` (the surface).
+ *
+ * The trend is never conveyed by colour or arrow alone: a visually hidden prefix ("Increase of") is
+ * rendered before the change figure. Whether up is good depends on the metric, so the colour comes from
+ * `trendIntent` (default: up is positive, down is negative; set `negative` for e.g. churn going up).
+ *
+ * @slot icon - Optional leading icon next to the label.
+ * @slot - Extra content below the value, e.g. a caption or a sparkline.
+ * @part container - The card surface (`bs-card`).
+ * @part label - The label.
+ * @part value - The value.
+ * @part trend - The trend row (arrow and change figure).
+ * @part trend-icon - The trend arrow.
+ */
+export class BsStat {
+    el;
+    /** What the number measures. */
+    label;
+    /** The figure itself, already formatted (e.g. "1,284" or "98.2%"). */
+    value;
+    /** Direction of change. Omit to hide the trend. */
+    trend;
+    /** The change figure shown next to the arrow (e.g. "12%"). */
+    trendValue;
+    /** Colour of the trend. Defaults from `trend`: up is positive, down is negative, neutral is neutral. */
+    trendIntent;
+    /** Visually hidden prefix for `trend="up"`. */
+    trendUpLabel = 'Increase of';
+    /** Visually hidden prefix for `trend="down"`. */
+    trendDownLabel = 'Decrease of';
+    /** Visually hidden text for `trend="neutral"`. */
+    trendNeutralLabel = 'No change';
+    /** Surface of the underlying `bs-card`. */
+    surface = 'raised';
+    hasIcon = false;
+    hasExtra = false;
+    componentWillLoad() {
+        this.hasIcon = Array.from(this.el.children).some(c => c.getAttribute('slot') === 'icon');
+    }
+    get intent() {
+        if (this.trendIntent)
+            return this.trendIntent;
+        return this.trend === 'up' ? 'positive' : this.trend === 'down' ? 'negative' : 'neutral';
+    }
+    get trendPrefix() {
+        return this.trend === 'up' ? this.trendUpLabel : this.trend === 'down' ? this.trendDownLabel : this.trendNeutralLabel;
+    }
+    arrow() {
+        const d = this.trend === 'up' ? 'M8 13V3M3.5 7.5L8 3l4.5 4.5' : this.trend === 'down' ? 'M8 3v10M3.5 8.5L8 13l4.5-4.5' : 'M3 8h10';
+        return (h("svg", { part: "trend-icon", class: "bs-stat__trend-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { d: d, stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+    }
+    render() {
+        return (h("bs-card", { key: 'b80fd8bcab40a0c0253ba662787400be2d5ce9fa', part: "container", class: "bs-stat", surface: this.surface }, h("dl", { key: 'b0c82e41728231629349dde73fdb6e23ce119b52', class: "bs-stat__body" }, h("dt", { key: '6a774975bc9242d6a875f4e4362dbadfab74c8db', class: "bs-stat__head" }, h("span", { key: 'd38853b09be10da36f162b81544ff8d90f682963', class: { 'bs-stat__icon': true, 'bs-stat__icon--visible': this.hasIcon } }, h("slot", { key: '2c9500cb005e6ccb87525eb5285d0b9fab29a5d6', name: "icon", onSlotchange: (e) => (this.hasIcon = e.target.assignedNodes().length > 0) })), h("span", { key: '2b1d18f442f02334947bd0164741abdb36ffdd1b', part: "label", class: "bs-stat__label" }, this.label)), h("dd", { key: '77b730dc10e13f9dca8b6217efe61cce9dd77f26', class: "bs-stat__figure" }, h("span", { key: '1b3f628b89aa8ba007cc1bbb501cab20ffeaae0e', part: "value", class: "bs-stat__value" }, this.value), this.trend && (h("span", { key: '5abea4bf54d77c759d80ae6fb53630ba5220ade3', part: "trend", class: `bs-stat__trend bs-stat__trend--${this.intent}` }, this.arrow(), h("span", { key: 'd911d6c7b3b560378fa0bed66d193de0d5d43646', class: "bs-stat__sr" }, this.trendPrefix), this.trendValue && h("span", { key: '9f217624152213e1c4b960963d86127e5c33f2c9', class: "bs-stat__trend-value" }, this.trendValue)))), h("dd", { key: 'fb85171704f96b0770d08ff557134bde2a78ccfb', class: { 'bs-stat__extra': true, 'bs-stat__extra--visible': this.hasExtra } }, h("slot", { key: '81ef5d72329b8a4cfa2ef02317fc77abecff74d3', onSlotchange: (e) => (this.hasExtra = e.target.assignedNodes().some(n => n.nodeType === 1 || !!n.textContent?.trim())) })))));
+    }
+    static get is() { return "bs-stat"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-stat.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-stat.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "What the number measures."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The figure itself, already formatted (e.g. \"1,284\" or \"98.2%\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "trend": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsStatTrend",
+                    "resolved": "\"down\" | \"neutral\" | \"up\"",
+                    "references": {
+                        "BsStatTrend": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-stat/bs-stat.tsx",
+                            "id": "src/components/bs-stat/bs-stat.tsx::BsStatTrend"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Direction of change. Omit to hide the trend."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "trend"
+            },
+            "trendValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The change figure shown next to the arrow (e.g. \"12%\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trend-value"
+            },
+            "trendIntent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsStatTrendIntent",
+                    "resolved": "\"negative\" | \"neutral\" | \"positive\"",
+                    "references": {
+                        "BsStatTrendIntent": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-stat/bs-stat.tsx",
+                            "id": "src/components/bs-stat/bs-stat.tsx::BsStatTrendIntent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Colour of the trend. Defaults from `trend`: up is positive, down is negative, neutral is neutral."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "trend-intent"
+            },
+            "trendUpLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visually hidden prefix for `trend=\"up\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trend-up-label",
+                "defaultValue": "'Increase of'"
+            },
+            "trendDownLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visually hidden prefix for `trend=\"down\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trend-down-label",
+                "defaultValue": "'Decrease of'"
+            },
+            "trendNeutralLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visually hidden text for `trend=\"neutral\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trend-neutral-label",
+                "defaultValue": "'No change'"
+            },
+            "surface": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsCardSurface",
+                    "resolved": "\"base\" | \"container\" | \"raised\"",
+                    "references": {
+                        "BsCardSurface": {
+                            "location": "import",
+                            "path": "../bs-card/bs-card",
+                            "id": "src/components/bs-card/bs-card.tsx::BsCardSurface",
+                            "referenceLocation": "BsCardSurface"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Surface of the underlying `bs-card`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "surface",
+                "defaultValue": "'raised'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasIcon": {},
+            "hasExtra": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/bs-stat/bs-stat.stories.js

@@ -0,0 +1,44 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { componentDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-stat',
+    parameters: { docs: { description: { component: componentDescription('bs-stat') } } },
+    argTypes: {
+        label: { control: 'text' },
+        value: { control: 'text' },
+        trend: { control: 'select', options: ['', 'up', 'down', 'neutral'] },
+        trendValue: { control: 'text' },
+        surface: { control: 'select', options: ['raised', 'base', 'container'] },
+    },
+    args: { label: 'Active users', value: '1,284', trend: 'up', trendValue: '12%', surface: 'raised' },
+    render: args => html `
+    <bs-stat style="width: 240px" label=${args.label} value=${args.value} trend=${ifDefined(args.trend || undefined)} trend-value=${args.trendValue} surface=${args.surface}></bs-stat>
+  `,
+};
+export default meta;
+export const Default = {};
+export const Trends = {
+    render: () => html `
+    <div style="display:flex;gap:16px;flex-wrap:wrap">
+      <bs-stat style="width:220px" label="Revenue" value="$2.4M" trend="up" trend-value="8.1%"></bs-stat>
+      <bs-stat style="width:220px" label="Open tickets" value="37" trend="down" trend-value="5"></bs-stat>
+      <bs-stat style="width:220px" label="Uptime" value="99.9%" trend="neutral" trend-value="0%"></bs-stat>
+    </div>
+  `,
+};
+export const NegativeUp = {
+    name: 'Up is bad',
+    parameters: { docs: { description: { story: 'Churn rising is bad news: `trend-intent="negative"` keeps the arrow up but colours it as negative.' } } },
+    render: () => html `<bs-stat style="width:220px" label="Churn" value="4.2%" trend="up" trend-value="0.6%" trend-intent="negative"></bs-stat>`,
+};
+export const WithoutTrend = { name: 'Without trend', args: { trend: '' } };
+export const WithSlots = {
+    name: 'With icon and extra content',
+    render: () => html `
+    <bs-stat style="width:260px" label="Active users" value="1,284" trend="up" trend-value="12%">
+      <svg slot="icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="10" cy="7" r="3" /><path d="M4 17c0-3 2.7-5 6-5s6 2 6 5" /></svg>
+      Compared with last month
+    </bs-stat>
+  `,
+};

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

@@ -62,7 +62,7 @@ export class BsStepper {
     }
     render() {
         // role="list" so each bs-stepper-step's role="listitem" has the required parent.
-        return (h(Host, { key: '26b3570657f0f1f53f8be811b6ccab12adfb6b95', role: "list" }, h("slot", { key: '3d50ee55ee74ca3bffccc6eb74ab4ab6228f3c65', onSlotchange: this.onSlotChange })));
+        return (h(Host, { key: '7161c01432c1d0d35f63a963fba140d4b0f9cd77', role: "list" }, h("slot", { key: '67021fc831679453fa1340bad8df75e338d9fb28', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "bs-stepper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-stepper/bs-stepper-step/bs-stepper-step.js

@@ -57,7 +57,7 @@ export class BsStepperStep {
     }
     render() {
         const state = this.state;
-        return (h(Host, { key: '901bffe1d0482fde0739f1b46fca7759624991ff', role: "listitem", class: `bs-stepper-step--${this.direction}` }, h("div", { key: '6284d29020215b566de5a74c465f97d76c75c3a5', class: "bs-stepper-step__top" }, h("span", { key: '1cdb4cab7e487957286b003bc937ff5f49e0eca9', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: 'ef00cbd4828d7f6e5428575ea8d85697d5ec5b55', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: '480ca636a3d22c04dd0d8a407270efb0e4175cd1' }), state === 'error' && h(ExclamationIcon, { key: '30facdf35bc7f0dcd170a076650fc2cb117aa629' })), h("span", { key: 'a89558fd6b1677868b69512758285325890a7594', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: 'e0b38e517d39a8170f06f0d2fbb6b8c5453ab818', class: "bs-stepper-step__connector-line" }))), h("span", { key: '2808ef00ddbcf4e3b92e0f9613760b8b82291d14', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: '3cb74de8b60d2d1d86bb62b444c241e2f3208d32', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: '3b9820069fea4b146ae886eca951430e34c86c71', part: "description", class: "bs-stepper-step__description" }, this.description)))));
+        return (h(Host, { key: '85fbebb638a7e323d2e524b74c1077c261c00066', role: "listitem", class: `bs-stepper-step--${this.direction}` }, h("div", { key: 'a44a6b58bf74b27cee279c761ed596373882791a', class: "bs-stepper-step__top" }, h("span", { key: 'ae7045a3049b42d245292960fa8eb3f7dfe61864', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: '1ff646a4f8fbb2f81b2208086d280c183ddba61c', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: '9fbe0328c61ac5108b22be369c1db1652523eb00' }), state === 'error' && h(ExclamationIcon, { key: 'ea56eb9dc52b9d1b9070ef273d46fece166c362d' })), h("span", { key: '0c4b5fde931c626e2b3652e7f047c1ac21b51f02', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: '06a69e6f61bb744be078feee462fe293947326fa', class: "bs-stepper-step__connector-line" }))), h("span", { key: '982de1069e1eb3e409ac81600f4fc3c7512fe190', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: 'f946599b4130219b91e76aec9ab6442bf08bd901', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: '043581dd2db1ffc8fae23ebc32a5346ba5bf325e', part: "description", class: "bs-stepper-step__description" }, this.description)))));
     }
     static get is() { return "bs-stepper-step"; }
     static get encapsulation() { return "shadow"; }

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

@@ -128,6 +128,8 @@
 }
 
 .bs-switch__knob {
+  /* Containing block for the bs-ripple halo. */
+  position: relative;
   box-sizing: border-box;
   border-radius: var(--bs-border-radius-full);
   background: var(--bs-switch-knob-bg);
@@ -203,3 +205,10 @@
   .bs-switch__track--checked .bs-switch__knob { background: HighlightText; }
   .bs-switch__track--disabled { border-color: GrayText; }
 }
+
+/* Round halo that extends past the knob, tinted with the brand colour. The press target is the whole label. */
+.bs-switch__ripple {
+  inset: -12px;
+  border-radius: 50%;
+  --bs-ripple-color: var(--bs-color-primary-default);
+}

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

@@ -15,6 +15,7 @@ import { h } from "@stencil/core";
  * @part track - The visual pill-shaped track.
  * @part knob - The sliding circular knob.
  * @part label - The label text wrapper.
+ * @part ripple - The press-ripple halo (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 // Note: this component's CSS Custom Properties are documented via @prop comments in
 // bs-switch.css, not here.
@@ -64,18 +65,11 @@ export class BsSwitch {
         this.bsChange.emit(checked);
     };
     render() {
-        const trackClasses = [
-            'bs-switch__track',
-            `bs-switch__track--${this.size}`,
-            this.checked ? 'bs-switch__track--checked' : '',
-            this.disabled ? 'bs-switch__track--disabled' : '',
-        ]
+        const trackClasses = ['bs-switch__track', `bs-switch__track--${this.size}`, this.checked ? 'bs-switch__track--checked' : '', this.disabled ? 'bs-switch__track--disabled' : '']
             .filter(Boolean)
             .join(' ');
-        const knobClasses = ['bs-switch__knob', `bs-switch__knob--${this.size}`, this.disabled ? 'bs-switch__knob--disabled' : '']
-            .filter(Boolean)
-            .join(' ');
-        return (h("label", { key: '853ef8cff63a735080d2dc13a3bcbf624f90adcd', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: '8ac32fe72fb6284553662925482dfbca96c37875', class: "bs-switch__input", type: "checkbox", role: "switch", checked: this.checked, disabled: this.disabled, "aria-checked": String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), h("span", { key: '8c32a40a08cf3e16f90fda8b6c90c4d4d172b927', part: "track", class: trackClasses }, h("span", { key: 'c5796361aae4834d104a802ccbde22dad715af49', part: "knob", class: knobClasses })), h("span", { key: '3c3a97ce272cbfdc94d23477c05931696cd39ee8', part: "label", class: "bs-switch__label" }, h("slot", { key: '2eb731f751e838ef577e944cc82f9df4dadc0935' }))));
+        const knobClasses = ['bs-switch__knob', `bs-switch__knob--${this.size}`, this.disabled ? 'bs-switch__knob--disabled' : ''].filter(Boolean).join(' ');
+        return (h("label", { key: '8302d6c142ae0c0d761baa10686473abfeed7fe3', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: 'e71a6809194104feeec376fb2af96a5b7930a9c2', class: "bs-switch__input", type: "checkbox", role: "switch", checked: this.checked, disabled: this.disabled, "aria-checked": String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), h("span", { key: 'fa52fc07183460c8c96f1d96f23fc16288d08f2f', part: "track", class: trackClasses }, h("span", { key: '69df38b0f655d07ea203ab8835e3d9d293540a3b', part: "knob", class: knobClasses }, h("bs-ripple", { key: '5806afd146b220e647897d4a0ed6c4ba0577bef9', part: "ripple", class: "bs-switch__ripple", centered: true, triggerSelector: ".bs-switch", disabled: this.disabled }))), h("span", { key: 'bf587f014da6bd9e29326f7246d1bfe73fda6b1c', part: "label", class: "bs-switch__label" }, h("slot", { key: '9d2a90c68a00c1e5d4a53475a25d19365277e71a' }))));
     }
     static get is() { return "bs-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-tab/bs-inline-tab/bs-inline-tab.css

@@ -12,7 +12,7 @@
  * @prop --bs-inline-tab-bg-focus: Background, deselected/focused. Aliased to --bs-color-neutral-container-focused.
  * @prop --bs-inline-tab-bg-pressed: Background, deselected/pressed. Aliased to --bs-color-neutral-container-pressed.
  * @prop --bs-inline-tab-focus-ring-color: Focus ring color. Aliased to --bs-border-neutral-focus.
- * @prop --bs-inline-tab-bg-disabled: Background, disabled (wins over selected). Aliased to --bs-surface-action-disabled.
+ * @prop --bs-inline-tab-bg-disabled: Background, disabled (wins over selected). Aliased to --bs-color-neutral-container (same as the bs-tabs container, so disabled tabs blend in).
  * @prop --bs-inline-tab-color-disabled: Text/icon color, disabled (wins over selected). Aliased to --bs-text-on-disabled.
  * @prop --bs-inline-tab-bg-selected: Background, selected/enabled. Aliased to --bs-color-primary-default.
  * @prop --bs-inline-tab-color-selected: Text/icon color, selected. Aliased to --bs-text-on-action.
@@ -44,7 +44,7 @@
 
   --bs-inline-tab-focus-ring-color: var(--bs-border-neutral-focus);
 
-  --bs-inline-tab-bg-disabled: var(--bs-surface-action-disabled);
+  --bs-inline-tab-bg-disabled: var(--bs-color-neutral-container);
   --bs-inline-tab-color-disabled: var(--bs-text-on-disabled);
 
   --bs-inline-tab-bg-selected: var(--bs-color-primary-default);
@@ -59,6 +59,8 @@
 }
 
 .bs-inline-tab {
+  /* Containing block for the absolutely-positioned bs-ripple layer. */
+  position: relative;
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;

package/dist/collection/components/bs-tab/bs-inline-tab/bs-inline-tab.js

@@ -29,6 +29,7 @@ import { h } from "@stencil/core";
  * @part tab - The button element.
  * @part icon - The icon wrapper.
  * @part label - The label wrapper.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 // Note: this component's CSS Custom Properties (--bs-inline-tab-*) are documented via @prop
 // comments in bs-inline-tab.css, not here -- Stencil's docs generator only parses @prop out of CSS
@@ -94,7 +95,7 @@ export class BsInlineTab {
     };
     render() {
         const iconOnly = this.hasIcon && !this.hasLabel;
-        return (h("button", { key: '593a07fb914f26cb831c92319993fcd161ee7f0d', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, h("span", { key: '42a07b0dfd4cd676f25616f8693ddfa75c55e6fe', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: 'da847d9052ac9cbec891de26f4550b706107aff1', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '85e3dfb8f6c266c1b225b9814194c8eed6d97edd', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: 'f99da4b89292a8399f1d615bd01a1dec7913abdb', onSlotchange: this.onLabelSlotchange }))));
+        return (h("button", { key: 'c44b448caa89c6317c0aec6c316ba31213bc2a79', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, h("bs-ripple", { key: 'f4d5b5cf846ecbb08dbdbcc3496463ed0dba0f77', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: '7da10306a8d27d5846491a3a7f3d8826d96cc62c', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: '023aa132bb9d272577bec309a5b7aeb9c2841651', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'e8eead01034c76f6d5edb591dc861915e5c9707e', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: 'cc085193d58c2b3c8a379dac93983a79f8e5f22f', onSlotchange: this.onLabelSlotchange }))));
     }
     static get is() { return "bs-inline-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-tab/bs-inline-tab/bs-inline-tab.stories.js

@@ -49,10 +49,6 @@ export const WithIcon = {
     name: 'With icon',
     args: { icon: true },
 };
-export const IconOnly = {
-    name: 'Icon only',
-    args: { icon: true, label: '', ariaLabel: 'Home' },
-};
 export const Selected = {
     args: { selected: true },
 };