@brandsync/wc 1.19.0 → 1.20.1

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: '12784d8efa1487b3fb39f9f59d7ebcd314ad6518', role: "list" }, h("slot", { key: 'af46ba1e66089cbacbc4e0b483df643196434f0b', 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: 'e9b5948fbba4037488296cdc5e479f2070e0aff9', role: "listitem", class: `bs-stepper-step--${this.direction}` }, h("div", { key: 'debe65501bcdbc563bad4800d9f5bcad4d5de76a', class: "bs-stepper-step__top" }, h("span", { key: '0e0315aa8146c0f11e6ebd9e939735f7f339113e', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: 'c02f6a5c3de19fa5a2b54d6de53d0a7b345697d2', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: '1147e186c821d21fc164ca589a2f9f6a179c145f' }), state === 'error' && h(ExclamationIcon, { key: '5f8c5874811de90db1e537b0f3d24e82e038a123' })), h("span", { key: 'b0347e06b36bf4fabdba4300803dc1a3b8c68719', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: 'fa4f577a71a70151aaa3a9eb16eb2db91ba0fc01', class: "bs-stepper-step__connector-line" }))), h("span", { key: 'd5d9f431e11074aba9996833adbb9b2cb1f227cb', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: 'bb233d28351a78c13b604fd2f940b29467ae316c', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: '921a2bd021cb0cccb261313f3076370c8e620ccb', part: "description", class: "bs-stepper-step__description" }, this.description)))));
+        return (h(Host, { key: 'a413a500376629d039afab3168b83cae5c636dc1', role: "listitem", class: `bs-stepper-step--${this.direction}`, "aria-disabled": state === 'disabled' ? 'true' : undefined }, h("div", { key: '7978cd670eeafe2dee95a2e3d97625ff22cd006d', class: "bs-stepper-step__top" }, h("span", { key: '0d0e5ef0199013cd0ed59b26fe169c2bac727920', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: '6c9ab59838f63958a54b852c4a8f3babf1ddc48e', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: '284d95f3e0ae3033ab2baa079c00cb2dc1fbcd3f' }), state === 'error' && h(ExclamationIcon, { key: '45b894a13cf54b0d5cb027d89646c712584bf6bb' })), h("span", { key: '79621665f9aecb82c4135ac2e1139ce1ee9af6be', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: '91454b553634d90734dbd2b8bb9ab53d9bead49c', class: "bs-stepper-step__connector-line" }))), h("span", { key: 'd5f1606511df9745571d96cad36d38774fd943b4', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: '81df6e0b9607c22cfdad7e37095d245ec428e0f1', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: '77c4951d570219071e8acedc361a73eed6a89612', 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.js

@@ -69,7 +69,7 @@ export class BsSwitch {
             .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: 'a4fe8b335679d3a8c4cebc519988e9ba65440dda', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: 'bf619000f211f5aecda3f6c5da4e05a11e9b135e', 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: '7f596412be6ae523cb3a41e5672d0a11552f77ba', part: "track", class: trackClasses }, h("span", { key: 'e9ff90d5719c1a3f98564b79a93e0c4d8fe82932', part: "knob", class: knobClasses }, h("bs-ripple", { key: 'bef6b2607487617f53d37ece4f48ae09792564d1', part: "ripple", class: "bs-switch__ripple", centered: true, triggerSelector: ".bs-switch", disabled: this.disabled }))), h("span", { key: '703eb9020f0ee4f887a0b50ef0d711ee34abf1d5', part: "label", class: "bs-switch__label" }, h("slot", { key: '91b178c4820f52eda9414b3ba0763c4fb1192015' }))));
+        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);

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

@@ -95,7 +95,7 @@ export class BsInlineTab {
     };
     render() {
         const iconOnly = this.hasIcon && !this.hasLabel;
-        return (h("button", { key: '8dc1570ed12bc71fd69e9fee3fe1159006785b52', 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: 'd7548736d118b53c5b0e3fa36af2e3ff8c7a6b5f', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: 'd5f1355d7b9fe756edc2a503bf32c9feafcb3ffc', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: 'ed0d0de3d21804e233b0593b96aebb9bbd07ac80', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '6ab027e86d0d3d1c47e3e22bb53e7f846b32031c', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: '90b51e5ead7fb092ee1ee2f81b68709550b00b32', 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 },
 };

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

@@ -108,7 +108,7 @@ export class BsTab {
         const iconOnly = this.hasIcon && !this.hasLabel;
         const vertical = this.hasIcon && this.hasLabel && this.iconPosition === 'top';
         const showBadge = this.hasBadge && !iconOnly && !vertical;
-        return (h("button", { key: '429e88b9d5240c88eccd55d73f1fd13dd918931c', type: "button", part: "tab", role: "tab", class: `bs-tab ${this.selected ? 'bs-tab--selected' : ''} ${this.disabled ? 'bs-tab--disabled' : ''} ${iconOnly ? 'bs-tab--icon-only' : ''} ${vertical ? 'bs-tab--vertical' : ''}`, 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: 'f652c878d5ce6401b848977600648a9d17abd075', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: 'bf04470844364ec3600b1aa1ad933d4b11c7e0be', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: '8eded138d47876050c0fd4051b8d602a1d60d107', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '4e8d274150281ad1c770b903bec1f92b1ec1da44', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: 'ff20a9b4917fdf7552f152d9bc89a28ca1391adc', onSlotchange: this.onLabelSlotchange })), h("span", { key: 'ea55bb9b1bb8566125285b3621cd28f52d62ad9e', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: 'd3871776604036d6d0889f30edd566e2ed5c5339', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: '610cb54103452951824c47da54d6ad32602ec66d', part: "indicator", class: "bs-tab__indicator" })));
+        return (h("button", { key: 'b2d2de98c36ee3f1a234b26d02301444511c7fa6', type: "button", part: "tab", role: "tab", class: `bs-tab ${this.selected ? 'bs-tab--selected' : ''} ${this.disabled ? 'bs-tab--disabled' : ''} ${iconOnly ? 'bs-tab--icon-only' : ''} ${vertical ? 'bs-tab--vertical' : ''}`, 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: 'ce6536ce97610f7de52ee6015af383a696c1bc27', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: 'c3ac3b7cf5d2991375d5dc1ccde201b3295f80c5', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: '1a07b29dd8a41480a1ddeb74ee5f3064d4b3b270', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'c8e7f3d6a30231994203e5ed44dc84896b23f6ca', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: '5fb9c0fd9b6b71e07d037d9e6a3404c54dab822a', onSlotchange: this.onLabelSlotchange })), h("span", { key: '566c636af2dcb775170b1807c6d022dab2e4a811', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: 'e762c6a042a248ef61d6cd4449e94395788784d2', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: '0ca377dce1ddb8dcafe2bc808355ffdbd3759959', part: "indicator", class: "bs-tab__indicator" })));
     }
     static get is() { return "bs-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,4 @@
-import { html, nothing } from "lit";
+import { html } from "lit";
 import { componentDescription, propDescription } from "../../../stories-utils";
 const iconPositions = ['start', 'top'];
 // `start`/`top` are the real prop values, but "Horizontal"/"Vertical" is what the layout actually
@@ -19,18 +19,18 @@ const meta = {
     // it can strip the element's own role. A plain block-level div has no visual effect worth
     // avoiding here (each story below is a single isolated demo, not part of a larger page layout).
     //
-    // aria-label uses lit's `nothing` sentinel below, not null/'' -- a plain (non-boolean) lit
-    // attribute binding renders null/'' as aria-label="" (present but empty), not an absent
-    // attribute. axe-core then treats the light-DOM <bs-tab> host as ARIA-meaningful in its own
-    // right and stops looking inside its shadow root for the real role="tab", which surfaces as an
-    // aria-required-children violation on the *parent* tablist -- a very confusing place to look.
+    // ariaLabel is bound as a property (`.ariaLabel`), not an `aria-label` attribute. Any aria-label
+    // attribute on the light-DOM <bs-tab> host (even an empty one) makes axe-core treat the host as
+    // ARIA-meaningful in its own right and stop looking inside its shadow root for the real
+    // role="tab", which surfaces as an aria-required-children violation on the *parent* tablist -- a
+    // very confusing place to look. A property reaches the inner button without touching the host.
     render: args => html `
     <div role="tablist">
       <bs-tab
         ?selected=${args.selected}
         ?disabled=${args.disabled}
         icon-position=${args.iconPosition}
-        aria-label=${args.ariaLabel || nothing}
+        .ariaLabel=${args.ariaLabel || null}
       >
         ${args.icon ? homeIcon : ''}${args.label}
         ${args.badge ? html `<bs-badge slot="badge" variant="primary">3</bs-badge>` : ''}

package/dist/collection/components/bs-tab/bs-tabs/bs-tabs.cmp.test.js

@@ -146,4 +146,39 @@ describe('bs-tabs', () => {
             expect(root.querySelector('bs-tab').getAttribute('value')).toBe('overview');
         });
     });
+    it('a value that matches no tab does not clear a tab already marked selected', async () => {
+        const { root, waitForChanges } = await render(h("bs-tabs", null, h("bs-tab", { selected: true }, "Overview"), h("bs-tab", null, "Details")));
+        await waitForChanges();
+        root.value = '';
+        await waitForChanges();
+        expect(Array.from(root.querySelectorAll('bs-tab')).map(t => t.selected)).toEqual([true, false]);
+    });
+    it('bs-tab groups have a 4px gap between tabs', async () => {
+        const { root } = await render(h("bs-tabs", null, h("bs-tab", null, "A"), h("bs-tab", null, "B")));
+        expect(getComputedStyle(root.shadowRoot.querySelector('[part="tablist"]')).columnGap).toBe('4px');
+    });
+    describe('geometry', () => {
+        it('type="bs-inline-tab" container is 48px tall, and a disabled inline tab matches its background', async () => {
+            const { root } = await render(h("bs-tabs", { type: "bs-inline-tab" }, h("bs-inline-tab", { selected: true }, "Overview"), h("bs-inline-tab", null, "Details"), h("bs-inline-tab", { disabled: true }, "Settings")));
+            const tablist = root.shadowRoot.querySelector('[part="tablist"]');
+            expect(tablist.getBoundingClientRect().height).toBe(48);
+            const disabled = root.querySelector('bs-inline-tab:last-child').shadowRoot.querySelector('[part="tab"]');
+            expect(getComputedStyle(disabled).backgroundColor).toBe(getComputedStyle(tablist).backgroundColor);
+        });
+        it('icon-only bs-tab is 56px wide with the icon and indicator centred', async () => {
+            const { root } = await render(h("bs-tabs", null, h("bs-tab", { selected: true, ariaLabel: "Home" }, h("svg", { slot: "icon", viewBox: "0 0 24 24" }))));
+            const tab = root.querySelector('bs-tab');
+            const button = tab.shadowRoot.querySelector('[part="tab"]');
+            const bw = button.getBoundingClientRect();
+            expect(Math.round(tab.getBoundingClientRect().width)).toBe(56);
+            expect(Math.round(bw.width)).toBe(56);
+            const center = (el) => {
+                const r = el.getBoundingClientRect();
+                return r.left + r.width / 2;
+            };
+            const mid = bw.left + bw.width / 2;
+            expect(Math.abs(center(tab.shadowRoot.querySelector('[part="icon"]')) - mid)).toBeLessThan(1);
+            expect(Math.abs(center(tab.shadowRoot.querySelector('[part="indicator"]')) - mid)).toBeLessThan(1);
+        });
+    });
 });

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

@@ -1,18 +1,20 @@
 /**
- * @prop --bs-tabs-tab-gap: Gap between tabs when type="bs-tab". Aliased to --bs-spacing-100.
+ * @prop --bs-tabs-tab-gap: Gap between tabs when type="bs-tab". Aliased to --bs-spacing-50 (4px).
  * @prop --bs-tabs-inline-tab-bg: Bar background when type="bs-inline-tab". Aliased to --bs-color-neutral-container.
  * @prop --bs-tabs-inline-tab-padding-x: Bar horizontal padding when type="bs-inline-tab". Aliased to --bs-spacing-50.
  * @prop --bs-tabs-inline-tab-radius: Bar corner radius when type="bs-inline-tab". Aliased to --bs-border-radius-full.
+ * @prop --bs-tabs-inline-tab-height: Bar height when type="bs-inline-tab". Aliased to --bs-spacing-600 (48px).
  * @prop --bs-tabs-inline-tab-gap: Gap between tabs when type="bs-inline-tab". Aliased to --bs-spacing-50.
  */
 :host {
   display: inline-block;
 
-  --bs-tabs-tab-gap: var(--bs-spacing-100);
+  --bs-tabs-tab-gap: var(--bs-spacing-50);
 
   --bs-tabs-inline-tab-bg: var(--bs-color-neutral-container);
   --bs-tabs-inline-tab-padding-x: var(--bs-spacing-50);
   --bs-tabs-inline-tab-radius: var(--bs-border-radius-full);
+  --bs-tabs-inline-tab-height: var(--bs-spacing-600);
   --bs-tabs-inline-tab-gap: var(--bs-spacing-50);
 }
 
@@ -32,6 +34,8 @@
 }
 
 .bs-tabs--bs-inline-tab {
+  box-sizing: border-box;
+  height: var(--bs-tabs-inline-tab-height);
   background: var(--bs-tabs-inline-tab-bg);
   padding: 0 var(--bs-tabs-inline-tab-padding-x);
   border-radius: var(--bs-tabs-inline-tab-radius);

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

@@ -41,9 +41,11 @@ export class BsTabs {
      * or, for a tab without one, its zero-based position in the group as a string (`"0"`, `"1"`...).
      * If unset, it is read from whichever tab is already `selected` once the group loads. */
     value;
-    /** Fires when the user selects a different tab (click, or arrow/Home/End), with the new
-     * `value`. Does not fire when `value` is set programmatically. `bsSelect` on the individual tab
-     * still fires as before. */
+    /** Fires when the **selection changes** (click, or arrow/Home/End), with the new `value`. It does
+     * not fire when the already-selected tab is clicked again, nor when `value` is set
+     * programmatically. To react to every activation, including a click on the already-selected tab
+     * (e.g. to sync a URL), listen for `bsSelect` on the tab itself (it bubbles, so one listener on
+     * `<bs-tabs>` covers all tabs); it fires on every click. */
     bsChange;
     /**
      * Catches `bsSelect` bubbling up from any slotted `<bs-tab>`/`<bs-inline-tab>` (Stencil's
@@ -85,7 +87,12 @@ export class BsTabs {
     }
     /** Selects the tab whose value matches `this.value` (and deselects the rest). */
     applyValue() {
-        this.tabs().forEach((tab, i) => {
+        // A value that matches no tab (unset, empty, or set before the tabs exist -- e.g. a framework
+        // wrapper assigning props late) must not wipe a tab the consumer marked `selected`.
+        const tabs = this.tabs();
+        if (!tabs.some((tab, i) => this.tabValue(tab, i) === this.value))
+            return;
+        tabs.forEach((tab, i) => {
             tab.selected = this.tabValue(tab, i) === this.value;
         });
         this.syncRovingTabindex();
@@ -135,7 +142,7 @@ export class BsTabs {
     }
     render() {
         const vertical = this.orientation === 'vertical';
-        return (h("div", { key: 'a2aea116ff595f33d3d29bc37920f5596458f3d4', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: '16d36488b01cda28a2214152b2cbd76b0d8c045a', onSlotchange: () => this.syncRovingTabindex() })));
+        return (h("div", { key: 'a5e190b0439a02353c187f94db3c42f274936ce8', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: 'c20d0df9c448227a429dd42f9ec484225c172882', onSlotchange: () => this.syncRovingTabindex() })));
     }
     static get is() { return "bs-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -233,7 +240,7 @@ export class BsTabs {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Fires when the user selects a different tab (click, or arrow/Home/End), with the new\n`value`. Does not fire when `value` is set programmatically. `bsSelect` on the individual tab\nstill fires as before."
+                    "text": "Fires when the **selection changes** (click, or arrow/Home/End), with the new `value`. It does\nnot fire when the already-selected tab is clicked again, nor when `value` is set\nprogrammatically. To react to every activation, including a click on the already-selected tab\n(e.g. to sync a URL), listen for `bsSelect` on the tab itself (it bubbles, so one listener on\n`<bs-tabs>` covers all tabs); it fires on every click."
                 },
                 "complexType": {
                     "original": "{ value: string }",