@brandsync/wc 1.12.0 → 1.13.0

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

@@ -0,0 +1,204 @@
+import { h } from "@stencil/core";
+/**
+ * A general-purpose loading placeholder for content whose shape isn't covered by a dedicated
+ * skeleton (e.g. `bs-button-skeleton`). Renders a pulsing text line (or several), rectangle or circle.
+ *
+ * Decorative by default (`aria-hidden="true"`). Set `label` to expose it to assistive tech as a
+ * `role="status"` live region with that accessible name -- do this on one placeholder per loading
+ * region, not on every placeholder, so screen readers don't announce it repeatedly.
+ *
+ * ## When to use
+ * - Standing in for text, images, avatars or other blocks while their data loads.
+ *
+ * ## When not to use
+ * - For a `bs-button` or `bs-checkbox` placeholder -- use `bs-button-skeleton` / `bs-checkbox-skeleton`.
+ * - For an in-progress action on already-rendered UI -- use `bs-spinner` or `bs-progress`.
+ *
+ * @part container - The outer wrapper.
+ * @part line - Each pulsing placeholder element (one per line for `variant="text"`).
+ * @prop --bs-skeleton-bg - Placeholder color. Aliased to `--bs-color-neutral-container`.
+ * @prop --bs-skeleton-radius - Corner radius for `text`/`rect`. Aliased to `--bs-border-radius-100`.
+ * @prop --bs-skeleton-width - Width when the `width` prop is not set. Defaults to `100%`.
+ * @prop --bs-skeleton-text-height - Height of each text line when `height` is not set. Defaults to `1em`.
+ * @prop --bs-skeleton-rect-height - Height of `rect`/`circle` when `height` is not set. Defaults to `96px`.
+ * @prop --bs-skeleton-gap - Gap between text lines. Aliased to `--bs-spacing-100`.
+ * @prop --bs-skeleton-duration - Pulse duration. Defaults to `1.5s`.
+ */
+export class BsSkeleton {
+    /** Shape of the placeholder. */
+    variant = 'text';
+    /** Any CSS length (e.g. `200px`, `50%`). Falls back to `--bs-skeleton-width`. For `circle`, if
+     * only one of `width`/`height` is set the other matches it. */
+    width;
+    /** Any CSS length. Falls back to the variant's default height custom property. */
+    height;
+    /** Number of text lines (`variant="text"` only). The last line of a multi-line block is shorter.
+     * Values below 1 are treated as 1. */
+    lines = 1;
+    /** Whether the placeholder pulses. Disabled automatically under `prefers-reduced-motion`. */
+    animated = true;
+    /** When set, the placeholder gets `role="status"` and this as its `aria-label`; otherwise it is
+     * `aria-hidden="true"`. */
+    label;
+    render() {
+        const isText = this.variant === 'text';
+        const count = isText ? Math.max(1, Math.floor(Number(this.lines)) || 1) : 1;
+        let width = this.width;
+        let height = this.height;
+        if (this.variant === 'circle') {
+            width = width ?? height;
+            height = height ?? width;
+        }
+        const style = {};
+        if (width)
+            style.width = width;
+        if (height)
+            style.height = height;
+        const lines = [];
+        for (let i = 0; i < count; i++) {
+            const isShortLast = isText && count > 1 && i === count - 1 && !this.width;
+            lines.push(h("span", { part: "line", class: { 'bs-skeleton__line': true, [`bs-skeleton__line--${this.variant}`]: true, 'bs-skeleton__line--short': isShortLast }, style: style }));
+        }
+        const hasLabel = !!this.label;
+        return (h("span", { key: 'dc80e4fbb6d9da6387f5bb674595469e7566ce2c', part: "container", class: { 'bs-skeleton': true, 'bs-skeleton--animated': this.animated, [`bs-skeleton--${this.variant}`]: true }, role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.label : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, lines));
+    }
+    static get is() { return "bs-skeleton"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-skeleton.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-skeleton.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsSkeletonVariant",
+                    "resolved": "\"circle\" | \"rect\" | \"text\"",
+                    "references": {
+                        "BsSkeletonVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-skeleton/bs-skeleton.tsx",
+                            "id": "src/components/bs-skeleton/bs-skeleton.tsx::BsSkeletonVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shape of the placeholder."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'text'"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Any CSS length (e.g. `200px`, `50%`). Falls back to `--bs-skeleton-width`. For `circle`, if\nonly one of `width`/`height` is set the other matches it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Any CSS length. Falls back to the variant's default height custom property."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height"
+            },
+            "lines": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of text lines (`variant=\"text\"` only). The last line of a multi-line block is shorter.\nValues below 1 are treated as 1."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "lines",
+                "defaultValue": "1"
+            },
+            "animated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the placeholder pulses. Disabled automatically under `prefers-reduced-motion`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animated",
+                "defaultValue": "true"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "When set, the placeholder gets `role=\"status\"` and this as its `aria-label`; otherwise it is\n`aria-hidden=\"true\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,43 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const variants = ['text', 'rect', 'circle'];
+const meta = {
+    title: 'Components/bs-skeleton',
+    parameters: { docs: { description: { component: componentDescription('bs-skeleton') } } },
+    render: args => html `
+    <bs-skeleton
+      variant=${args.variant}
+      width=${args.width || undefined}
+      height=${args.height || undefined}
+      lines=${args.lines}
+      .animated=${args.animated}
+      label=${args.label || undefined}
+    ></bs-skeleton>
+  `,
+    argTypes: {
+        variant: { control: 'select', options: variants, description: propDescription('bs-skeleton', 'variant') },
+        width: { control: 'text', description: propDescription('bs-skeleton', 'width') },
+        height: { control: 'text', description: propDescription('bs-skeleton', 'height') },
+        lines: { control: 'number', description: propDescription('bs-skeleton', 'lines') },
+        animated: { control: 'boolean', description: propDescription('bs-skeleton', 'animated') },
+        label: { control: 'text', description: propDescription('bs-skeleton', 'label') },
+    },
+    args: { variant: 'text', width: '', height: '', lines: 1, animated: true, label: '' },
+};
+export default meta;
+export const Default = {};
+export const Variants = {
+    render: () => html `
+    <div style="display:flex; flex-direction:column; gap:16px; width:320px;">
+      <bs-skeleton variant="text"></bs-skeleton>
+      <bs-skeleton variant="rect" height="80px"></bs-skeleton>
+      <bs-skeleton variant="circle" width="48px"></bs-skeleton>
+    </div>
+  `,
+};
+export const MultiLineText = {
+    render: () => html `<div style="width:320px;"><bs-skeleton variant="text" lines="4"></bs-skeleton></div>`,
+};
+export const WithLabel = {
+    render: () => html `<div style="width:320px;"><bs-skeleton variant="rect" height="80px" label="Loading content"></bs-skeleton></div>`,
+};

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

@@ -65,6 +65,10 @@ export class BsSlider {
     /** Disables the slider: sets the native `disabled` attribute on the range input(s), suppresses
      * hover/focus/drag styling and the value tooltip, and prevents interaction. */
     disabled = false;
+    /** Accessible name of the lower-bound thumb / percent field when `ariaLabel` is unset. */
+    startValueLabel = 'Start value';
+    /** Accessible name of the upper-bound thumb / percent field when `ariaLabel` is unset. */
+    endValueLabel = 'End value';
     /**
      * Accessible name for the slider's native range input(s). Required whenever `showLabel` is
      * `false` (a bare track with no visible "Label" text) -- without it, the internal native
@@ -224,12 +228,12 @@ export class BsSlider {
         // near one end, only the topmost one is reachable by click, and the topmost one is always the
         // one rendered last (the end thumb) unless we compensate.
         const startOnTop = this.percent(start) > 50;
-        return (h("div", { class: "bs-slider__track-wrapper", style: { '--bs-slider-fill-start': `${fillStart}%`, '--bs-slider-fill-end': `${fillEnd}%` } }, h("div", { part: "track", class: "bs-slider__track" }, h("div", { part: "fill", class: "bs-slider__track-fill" })), h("input", { type: "range", part: "control", class: "bs-slider__input bs-slider__input--start", style: { zIndex: startOnTop ? '4' : '3' }, min: this.min, max: this.max, step: this.step, value: start, disabled: this.disabled, "aria-label": this.ariaLabel ?? 'Start value', onInput: this.onStartInputChange, onChange: this.onStartInputChange }), h("input", { type: "range", part: "control", class: "bs-slider__input bs-slider__input--end", style: { zIndex: startOnTop ? '3' : '4' }, min: this.min, max: this.max, step: this.step, value: end, disabled: this.disabled, "aria-label": this.ariaLabel ? `${this.ariaLabel} end` : 'End value', onInput: this.onEndInputChange, onChange: this.onEndInputChange }), h("span", { class: "bs-slider__tooltip bs-slider__tooltip--start", part: "tooltip", style: { left: `${fillStart}%` }, "aria-hidden": "true" }, Math.round(this.percent(start)), "%"), h("span", { class: "bs-slider__tooltip bs-slider__tooltip--end", part: "tooltip", style: { left: `${fillEnd}%` }, "aria-hidden": "true" }, Math.round(this.percent(end)), "%")));
+        return (h("div", { class: "bs-slider__track-wrapper", style: { '--bs-slider-fill-start': `${fillStart}%`, '--bs-slider-fill-end': `${fillEnd}%` } }, h("div", { part: "track", class: "bs-slider__track" }, h("div", { part: "fill", class: "bs-slider__track-fill" })), h("input", { type: "range", part: "control", class: "bs-slider__input bs-slider__input--start", style: { zIndex: startOnTop ? '4' : '3' }, min: this.min, max: this.max, step: this.step, value: start, disabled: this.disabled, "aria-label": this.ariaLabel ?? this.startValueLabel, onInput: this.onStartInputChange, onChange: this.onStartInputChange }), h("input", { type: "range", part: "control", class: "bs-slider__input bs-slider__input--end", style: { zIndex: startOnTop ? '3' : '4' }, min: this.min, max: this.max, step: this.step, value: end, disabled: this.disabled, "aria-label": this.ariaLabel ? `${this.ariaLabel} end` : this.endValueLabel, onInput: this.onEndInputChange, onChange: this.onEndInputChange }), h("span", { class: "bs-slider__tooltip bs-slider__tooltip--start", part: "tooltip", style: { left: `${fillStart}%` }, "aria-hidden": "true" }, Math.round(this.percent(start)), "%"), h("span", { class: "bs-slider__tooltip bs-slider__tooltip--end", part: "tooltip", style: { left: `${fillEnd}%` }, "aria-hidden": "true" }, Math.round(this.percent(end)), "%")));
     }
     render() {
         const isRange = this.type === 'range';
         const rootClasses = ['bs-slider', this.disabled ? 'bs-slider--disabled' : ''].filter(Boolean).join(' ');
-        return (h("div", { key: '7fb6a534e41e91efe00bcba839641550398eed13', class: rootClasses }, this.showLabel && (h("div", { key: '5892936540c9e4f74dfadd3ad9088ffd2c04fef5', class: "bs-slider__header" }, h("span", { key: '220c0db8a2cc5f5f29cf99830fa0b4d30ec90d32', id: "bs-slider-label", part: "label", class: "bs-slider__label" }, this.label), isRange ? (h("span", { class: "bs-slider__value-fields" }, this.renderPercentField(this.percent(this.effectiveValueStart), this.onStartPercentFieldChange, this.ariaLabel ?? 'Start value'), h("span", { class: "bs-slider__separator" }, "\u2013"), this.renderPercentField(this.percent(this.effectiveValueEnd), this.onEndPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} end` : 'End value'))) : (this.renderPercentField(this.percent(this.value), this.onPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} value` : 'Value')))), h("div", { key: '67830218b3aa9d927ab87c4c6ca419b3a24ca0af', class: "bs-slider__row" }, this.showLabel && (h("span", { key: 'b2569e64400853a503d1566825500f8d10fe0318', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: '2b5ac8ff8dd48f4db7a0d4db3698bb64a4f9277a', part: "bound", class: "bs-slider__bound" }, this.max)))));
+        return (h("div", { key: '24883c8b7d1f00df7a700de4e296ecdfc293bf47', class: rootClasses }, this.showLabel && (h("div", { key: 'd41690990898df937f99a5285f2f407b550d881c', class: "bs-slider__header" }, h("span", { key: '2519779a06f6bb9911be0bdb4539b36c3c16f725', id: "bs-slider-label", part: "label", class: "bs-slider__label" }, this.label), isRange ? (h("span", { class: "bs-slider__value-fields" }, this.renderPercentField(this.percent(this.effectiveValueStart), this.onStartPercentFieldChange, this.ariaLabel ?? this.startValueLabel), h("span", { class: "bs-slider__separator" }, "\u2013"), this.renderPercentField(this.percent(this.effectiveValueEnd), this.onEndPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} end` : this.endValueLabel))) : (this.renderPercentField(this.percent(this.value), this.onPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} value` : 'Value')))), h("div", { key: 'd0525503f51fc1dc3f9753fce131e008db7ded54', class: "bs-slider__row" }, this.showLabel && (h("span", { key: '98ecbdd3462da354a2fb7c719b8eb48c81a0c809', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: '3e1690be98b45b3f595991d5cdde35f0abfe0da3', part: "bound", class: "bs-slider__bound" }, this.max)))));
     }
     static get is() { return "bs-slider"; }
     static get encapsulation() { return "shadow"; }
@@ -490,6 +494,46 @@ export class BsSlider {
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
+            "startValueLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the lower-bound thumb / percent field when `ariaLabel` is unset."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "start-value-label",
+                "defaultValue": "'Start value'"
+            },
+            "endValueLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the upper-bound thumb / percent field when `ariaLabel` is unset."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "end-value-label",
+                "defaultValue": "'End value'"
+            },
             "ariaLabel": {
                 "type": "string",
                 "mutable": false,

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

@@ -67,7 +67,7 @@ export class BsSnackbar {
         this.bsDismiss.emit();
     };
     render() {
-        return (h("div", { key: '291914fd21d4d8634f49aad410f8cda212c7d07c', part: "container", class: `bs-snackbar bs-snackbar--${this.variant}`, role: "status", "aria-live": this.variant === 'error' ? 'assertive' : 'polite' }, h("div", { key: '5d50b75478197ad433c96d66ed9de3fd22360b56', class: "bs-snackbar__content" }, h("span", { key: 'd625eb5d139d7811a28d781b8eb4fffa370debab', part: "icon", class: "bs-snackbar__icon", "aria-hidden": "true" }, this.loading ? h("span", { class: "bs-snackbar__spinner" }) : h(CheckCircleIcon, null)), h("span", { key: '6c7666f8cd8d3bddf44d35a7d8e9d9c645def13f', part: "message", class: "bs-snackbar__message" }, h("slot", { key: '96e8eb40bb7a6c9292d948ac47f6e630dc843bb5' }))), h("div", { key: '60380f06bc10c964155c7cc97eb036a84506a103', class: "bs-snackbar__actions" }, this.actionLabel && (h("bs-button", { key: '843054ee154c565034ddaf7b000419d7ecc4bf63', part: "action", variant: this.actionVariant ?? ACTION_VARIANT[this.variant], size: "sm", onClick: this.onAction }, this.actionLabel)), !this.hideClose && (h("bs-icon-button", { key: '383ea23e7e5f7681651b7a6394cb39b453e5f8cb', part: "close", variant: "subtle", size: "md", ariaLabel: "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: '6ec39615ed1e82f3bb6e45a5917fa6a35166d3f1' }))))));
+        return (h("div", { key: '869f548001524a78fa66a0b295c177a43160531e', part: "container", class: `bs-snackbar bs-snackbar--${this.variant}`, role: "status", "aria-live": this.variant === 'error' ? 'assertive' : 'polite' }, h("div", { key: 'eca8a98a1ae3dff7ecadd7e370bd59c855a56025', class: "bs-snackbar__content" }, h("span", { key: 'ffba923b45ff59cd8501f7d3da9bd5260113de83', part: "icon", class: "bs-snackbar__icon", "aria-hidden": "true" }, this.loading ? h("span", { class: "bs-snackbar__spinner" }) : h(CheckCircleIcon, null)), h("span", { key: '803f3247af157e79e2e2c2822977ae55cc058a98', part: "message", class: "bs-snackbar__message" }, h("slot", { key: 'fd66b14457361cca63be3a152003a098b56aa43e' }))), h("div", { key: 'ba808bf880cfb2f0c32a70f53ff4e0b2df05eb17', class: "bs-snackbar__actions" }, this.actionLabel && (h("bs-button", { key: '4e7ca40abdfd155cd064d153fee866e87ad64e26', part: "action", variant: this.actionVariant ?? ACTION_VARIANT[this.variant], size: "sm", onClick: this.onAction }, this.actionLabel)), !this.hideClose && (h("bs-icon-button", { key: '89ba5909db07c9e910136e5723bb5df25d0a4b51', part: "close", variant: "subtle", size: "md", ariaLabel: "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: '6e3f8d010cf3f234d0e199b3a5d96c8200b25bcc' }))))));
     }
     static get is() { return "bs-snackbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-source-link/bs-source-link.js

@@ -51,8 +51,8 @@ export class BsSourceLink {
     };
     render() {
         const inner = [
-            h("span", { key: '4f7296f4d35b7779c91e791a7e674fff3f963239', class: "bs-source-link__left" }, h("span", { key: 'e8a03fb6ee46d64d8d9b2e86a39d15d36164a23d', class: "bs-source-link__filename-row" }, h("span", { key: '16ed535a5ab56b54edab2a39d02659c9be9cfc69', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: '56661ab02c9628fd407f364c95db3832d9b86fdd', name: "icon" }, h(FileTextIcon, { key: 'c7a6f19c9dfee1c8b1e4ef24334c541fd8c88cbd' }))), h("p", { key: '5dac08dcde183f2a714c04cc0e700c4b2778bf7e', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: 'bc4cd84ea0d990b5c456d7962bce8881cdaaf1b7', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: '94efb5a9ff386f86546ce56dbe2a8b386a342d16', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: 'd084d96de4afe4522fc9ef28c6f870fa49ca68bc', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: 'e2b976a66185a53dbd682081399ed946e1bbb318', part: "version", class: "bs-source-link__version" }, this.version)))),
-            h("span", { key: '23f361d9af84c4804e88d7f019623e2223fe7a33', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: '0316db74234f0c66afc0372d5299b8fd19691163' })),
+            h("span", { key: '317598fbe8a1bde8ca8dcf867e833760b5db55bb', class: "bs-source-link__left" }, h("span", { key: '1f378730e6ef4526a32b91ac5409fef9d0477ac6', class: "bs-source-link__filename-row" }, h("span", { key: 'd3a7ec6ad3636c421607d79c2a4da5db3e318357', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: 'c7d0127901da55d9fc2ac9a96bae37e3fcc45ef7', name: "icon" }, h(FileTextIcon, { key: 'c0b966da9fca5f6c6022d676236a215d8a400c5f' }))), h("p", { key: '1d763e41b6596ff46b0278e10bcce665ab8b783f', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: '5c5826e11bd5d39cb506f3ce55f81c6fc4598c50', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: 'd0096ff3a88f4f78bd0c65b14c50c033a81709e1', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: '0f11dbd4198a12756bbb662c0d98fdae1eaf69c4', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: '1408af4d964a1bdf03d8f5db5638cfcb79a0896a', part: "version", class: "bs-source-link__version" }, this.version)))),
+            h("span", { key: 'ce4b707c7a7ab5b8239f1d7fd703a6a720b08a2e', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: 'ef5d07febc81b561892f4814bc62d1d1d551becf' })),
         ];
         return this.href ? (h("a", { class: "bs-source-link", href: this.href, target: this.target, rel: "noopener noreferrer", onClick: this.onClick }, inner)) : (h("button", { type: "button", class: "bs-source-link", onClick: this.onClick }, inner));
     }

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

@@ -0,0 +1,32 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-spinner', () => {
+    it('defaults to size inherit and is aria-hidden without a label', async () => {
+        const { root } = await render(h("bs-spinner", null));
+        const c = root.shadowRoot.querySelector('[part="container"]');
+        expect(c).toHaveClass('bs-spinner--inherit');
+        expect(c).toEqualAttribute('aria-hidden', 'true');
+        expect(c.hasAttribute('role')).toBe(false);
+    });
+    it('uses role="status" and aria-label when label is set', async () => {
+        const { root } = await render(h("bs-spinner", { label: "Saving" }));
+        const c = root.shadowRoot.querySelector('[part="container"]');
+        expect(c).toEqualAttribute('role', 'status');
+        expect(c).toEqualAttribute('aria-label', 'Saving');
+        expect(c.hasAttribute('aria-hidden')).toBe(false);
+    });
+    it('applies the size class for each size', async () => {
+        const { root, setProps } = await render(h("bs-spinner", { size: "xs" }));
+        const c = root.shadowRoot.querySelector('[part="container"]');
+        expect(c).toHaveClass('bs-spinner--xs');
+        await setProps({ size: 'sm' });
+        expect(c).toHaveClass('bs-spinner--sm');
+        await setProps({ size: 'md' });
+        expect(c).toHaveClass('bs-spinner--md');
+    });
+    it('renders an svg with track and arc', async () => {
+        const { root } = await render(h("bs-spinner", null));
+        expect(root.shadowRoot.querySelector('svg[part="svg"]')).not.toBeNull();
+        expect(root.shadowRoot.querySelector('.bs-spinner__track')).not.toBeNull();
+        expect(root.shadowRoot.querySelector('.bs-spinner__arc')).not.toBeNull();
+    });
+});

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

@@ -0,0 +1,61 @@
+:host {
+  display: inline-block;
+  vertical-align: middle;
+  --bs-spinner-size-xs: var(--bs-spacing-200);
+  --bs-spinner-size-sm: var(--bs-spacing-250);
+  --bs-spinner-size-md: var(--bs-spacing-300);
+  --bs-spinner-color: currentColor;
+  --bs-spinner-track-opacity: 0.25;
+  --bs-spinner-duration: 0.8s;
+}
+
+.bs-spinner {
+  display: inline-flex;
+  width: 1em;
+  height: 1em;
+  color: inherit;
+}
+
+.bs-spinner--xs {
+  width: var(--bs-spinner-size-xs);
+  height: var(--bs-spinner-size-xs);
+}
+
+.bs-spinner--sm {
+  width: var(--bs-spinner-size-sm);
+  height: var(--bs-spinner-size-sm);
+}
+
+.bs-spinner--md {
+  width: var(--bs-spinner-size-md);
+  height: var(--bs-spinner-size-md);
+}
+
+.bs-spinner__svg {
+  width: 100%;
+  height: 100%;
+  animation: bs-spinner-spin var(--bs-spinner-duration) linear infinite;
+}
+
+.bs-spinner__track {
+  stroke: var(--bs-spinner-color);
+  opacity: var(--bs-spinner-track-opacity);
+}
+
+.bs-spinner__arc {
+  stroke: var(--bs-spinner-color);
+}
+
+@keyframes bs-spinner-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Reduced motion: slow the rotation rather than stopping it, so "busy" is still conveyed
+   (same approach as bs-progress's indeterminate ring). */
+@media (prefers-reduced-motion: reduce) {
+  .bs-spinner__svg {
+    animation-duration: calc(var(--bs-spinner-duration) * 4);
+  }
+}

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

@@ -0,0 +1,96 @@
+import { h } from "@stencil/core";
+/**
+ * A small inline spinner sized for text. By default (`size="inherit"`) it is `1em` square so it
+ * scales with the surrounding font size, and it draws in `currentColor` so it matches the
+ * surrounding text. Built as plain inline SVG: `bs-progress` has fixed pixel diameters and a
+ * block layout, so it can't sit inline with text.
+ *
+ * ## When to use
+ * - Inline "busy" feedback next to or inside text, e.g. "Saving..." or within a button label.
+ *
+ * ## When not to use
+ * - For a large or standalone loading indicator, or one with a known percentage -- use `bs-progress`.
+ * - As a content placeholder -- use `bs-skeleton`.
+ *
+ * @part container - The outer inline wrapper (carries the status role).
+ * @part svg - The spinner SVG.
+ * @prop --bs-spinner-size-xs - Diameter at `size="xs"`. Aliased to `--bs-spacing-200`.
+ * @prop --bs-spinner-size-sm - Diameter at `size="sm"`. Aliased to `--bs-spacing-250`.
+ * @prop --bs-spinner-size-md - Diameter at `size="md"`. Aliased to `--bs-spacing-300`.
+ * @prop --bs-spinner-color - Spinner color. Defaults to `currentColor`.
+ * @prop --bs-spinner-track-opacity - Opacity of the background track ring. Defaults to `0.25`.
+ * @prop --bs-spinner-duration - Rotation duration. Defaults to `0.8s`.
+ */
+export class BsSpinner {
+    /** `xs`/`sm`/`md` use fixed token sizes; `inherit` (default) is `1em`, following the font size. */
+    size = 'inherit';
+    /** Accessible name (e.g. "Loading"). When set, the spinner gets `role="status"` and this
+     * `aria-label`; when omitted it is `aria-hidden="true"` (use it next to visible text that already
+     * says what is happening). */
+    label;
+    render() {
+        const hasLabel = !!this.label;
+        return (h("span", { key: '31531b80418f912ded9ffabafc1ad36b48e1c4e1', part: "container", class: `bs-spinner bs-spinner--${this.size}`, role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.label : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, h("svg", { key: '7c820016daa154c8e8486a8d5a60505a39d37bde', part: "svg", class: "bs-spinner__svg", viewBox: "0 0 24 24", fill: "none", focusable: "false" }, h("circle", { key: '60b8dce8ac87753a2a9d3c3521ce387bcf6e9491', class: "bs-spinner__track", cx: "12", cy: "12", r: "9", "stroke-width": "3" }), h("path", { key: '3548aee65c89828fed57465a95b72e15c50807f4', class: "bs-spinner__arc", d: "M12 3a9 9 0 0 1 9 9", "stroke-width": "3", "stroke-linecap": "round" }))));
+    }
+    static get is() { return "bs-spinner"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-spinner.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-spinner.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsSpinnerSize",
+                    "resolved": "\"inherit\" | \"md\" | \"sm\" | \"xs\"",
+                    "references": {
+                        "BsSpinnerSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-spinner/bs-spinner.tsx",
+                            "id": "src/components/bs-spinner/bs-spinner.tsx::BsSpinnerSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`xs`/`sm`/`md` use fixed token sizes; `inherit` (default) is `1em`, following the font size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'inherit'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name (e.g. \"Loading\"). When set, the spinner gets `role=\"status\"` and this\n`aria-label`; when omitted it is `aria-hidden=\"true\"` (use it next to visible text that already\nsays what is happening)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,30 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const sizes = ['xs', 'sm', 'md', 'inherit'];
+const meta = {
+    title: 'Components/bs-spinner',
+    parameters: { docs: { description: { component: componentDescription('bs-spinner') } } },
+    render: args => html `<bs-spinner size=${args.size} label=${args.label || undefined}></bs-spinner>`,
+    argTypes: {
+        size: { control: 'select', options: sizes, description: propDescription('bs-spinner', 'size') },
+        label: { control: 'text', description: propDescription('bs-spinner', 'label') },
+    },
+    args: { size: 'inherit', label: 'Loading' },
+};
+export default meta;
+export const Default = {};
+export const Sizes = {
+    render: () => html `
+    <div style="display:flex; gap:16px; align-items:center;">
+      <bs-spinner size="xs" label="Loading"></bs-spinner>
+      <bs-spinner size="sm" label="Loading"></bs-spinner>
+      <bs-spinner size="md" label="Loading"></bs-spinner>
+    </div>
+  `,
+};
+export const InlineWithText = {
+    render: () => html `
+    <p style="font-size:14px;"><bs-spinner></bs-spinner> Saving...</p>
+    <p style="font-size:24px; color:var(--bs-color-primary-default);"><bs-spinner></bs-spinner> Uploading...</p>
+  `,
+};

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: '8a3c0b5ce7ffd6dfc34b0c5ae602ef4bca42e33c', role: "list" }, h("slot", { key: 'fcc69d5e89dfa5f1ae7aa2ae38667a7826fee89d', onSlotchange: this.onSlotChange })));
+        return (h(Host, { key: '94662e1c7a6539f13c9405e638fb2713d1cadf6c', role: "list" }, h("slot", { key: 'ed491d1b2e37e8b4f581bf0cc06063414c9aac59', 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: '07f068e7e9d54124e72e6f3c395532b1df28bf4d', role: "listitem", class: `bs-stepper-step--${this.direction}` }, h("div", { key: 'aa2c8cf568f8823be576b7cd8453db51dbc28ca3', class: "bs-stepper-step__top" }, h("span", { key: '55053a617f92b0f300987fad2f171d0c5a00cb48', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: '83f5206192f6e3363ee37c1819e2c7584d2b4395', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: '19960813f546d3bed470d486d64cda1f4f9ae05d' }), state === 'error' && h(ExclamationIcon, { key: '5dff15dc5e8183b6ebe75592dddd0710fe6318f3' })), h("span", { key: 'aa91c2544a472e836d79361453eccc6cc3c0ded2', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: 'b4db85cdeed8fcd895ce5fe38fa98aaf9e40401d', class: "bs-stepper-step__connector-line" }))), h("span", { key: 'c4dcd488f9c177eab29d8d9cedee9ff139844049', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: 'd486ade27072093c9bf90824e89b24ab4ff5b8a5', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: 'eae26f6a683805ebc8eeb780df82060cf3ec699f', part: "description", class: "bs-stepper-step__description" }, this.description)))));
+        return (h(Host, { key: '1c5694e67c967484efa955425ec3ed12d8f7a03e', role: "listitem", class: `bs-stepper-step--${this.direction}` }, h("div", { key: 'fe84861fb98c195f54b0032bfdeb0f1002ed9ebb', class: "bs-stepper-step__top" }, h("span", { key: '2d3d16b27bb87230f14ccda2442614db65f703d8', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: 'c547471f2fe4e5a75a255ce09cc6a0c2f2bc11ec', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: 'da0d947ad7661120b764257e3dbd7ae7c9940e75' }), state === 'error' && h(ExclamationIcon, { key: 'a5004b5d62b18e34b34d0c81eb53a4dbd65bc1c2' })), h("span", { key: 'b7e9d951076dfa1aa62bcde535a29d877cc618d3', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: '415ecffabac4da1354660d508db420dbb2610a0a', class: "bs-stepper-step__connector-line" }))), h("span", { key: '99d30eb3bb209f1d4cb98bd8fcc3821c70508a1f', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: '82c9c1e5fac460d45f7aaa6e1ecdaf4a717c408f', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: 'c782b740f87d29aee56c523fccbeeff4a2032562', 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

@@ -75,7 +75,7 @@ export class BsSwitch {
         const knobClasses = ['bs-switch__knob', `bs-switch__knob--${this.size}`, this.disabled ? 'bs-switch__knob--disabled' : '']
             .filter(Boolean)
             .join(' ');
-        return (h("label", { key: '3c1ef40b924c852077b0e82e6f177c3ef029d578', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: '05b9d74d9264d85efad043d3fed9582294245e14', 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: '1df589ae299b9d78841b66964803be1431a902f0', part: "track", class: trackClasses }, h("span", { key: '56f65a6b2c672c13b566eeb94bed37985dd225e1', part: "knob", class: knobClasses })), h("span", { key: '293393bcd0c93a6b67fee20761f2fec6ae350d1f', part: "label", class: "bs-switch__label" }, h("slot", { key: 'a4a89ba0581cb44382b9f81564adb6dd1e3809bc' }))));
+        return (h("label", { key: 'c0b36dcd360b286a7b926268f15389c327071ff5', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: 'b6194c6f6c247aa59f56677e0a8505baebe4cd20', 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: 'bd49a6013acddfff26cdcbbd412725b7b4b0d1d9', part: "track", class: trackClasses }, h("span", { key: '3973bc2716435c5aaf050f772b43a35827362d39', part: "knob", class: knobClasses })), h("span", { key: 'b7dd216fed4ebc98bd83cc7934523ef25e91f9a4', part: "label", class: "bs-switch__label" }, h("slot", { key: '24a8cd4c77ed2fc3038f46e0e619de19a536b8c0' }))));
     }
     static get is() { return "bs-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -94,7 +94,7 @@ export class BsInlineTab {
     };
     render() {
         const iconOnly = this.hasIcon && !this.hasLabel;
-        return (h("button", { key: '84e1e70ea67dba9c45e55cfcbc9afecb5be41b7e', 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: '118ed482a69348bf7ed5b633df36d714c643eea2', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: 'bde742484441571b7e907702c90dff00ff12a515', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'c1c0df916c0d6bbc3c51f74ffc4a659cc731cb5d', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: 'f3ed571ab6a28cd43f08b479eca9a5d70b4851ea', onSlotchange: this.onLabelSlotchange }))));
+        return (h("button", { key: '3c512a80e93fec29f2cfd70cf921477b323064fa', 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: 'a206bde98f6b17c667c3e9690b6dcd3715376f99', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: '9a8ef173b7d97db176c66de0a8f7215c967f07bc', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '53d9fd3a06976bb9366829864ae7f1e86c39ef50', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: '37a6840ad59a98a0bdc13dfc1c87ece5e8d8ec54', onSlotchange: this.onLabelSlotchange }))));
     }
     static get is() { return "bs-inline-tab"; }
     static get encapsulation() { return "shadow"; }