@brandsync/wc 1.12.1 → 1.14.0

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: '37082ba8b750f01d04cec4e437fc3d5481768f27', class: "bs-source-link__left" }, h("span", { key: '10f49ce451047e0b2656d0ec724a5841b112046a', class: "bs-source-link__filename-row" }, h("span", { key: '63b4c0dcb376053f68a5d62c6232a205451f1826', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: '6df8546c36387bd130b68cda5f8aa5e3c35fd388', name: "icon" }, h(FileTextIcon, { key: '8ba49429459a63d05324e31b6994fa5f3b5c6534' }))), h("p", { key: '0b6d7826f62526c903048a25610bfed99381bce0', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: 'f71e6440d5fe06486d5a10493ab5c7b17e2cfd78', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: 'a4d97d5fd1be65d17d9dca52d30eaa9d1a022f0e', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: '809b5e51e436270dd304db280f98e164f2722eda', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: '5e30c00db6cf2d659c62a6fc863a7c6fd8111d12', part: "version", class: "bs-source-link__version" }, this.version)))),
+            h("span", { key: '89dcb19eec419f95ed277d729925296ecfe0e4b1', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: '8d2c8521747a1f3d7cd8b6bff5385ee04b2a7923' })),
         ];
         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-split-pane/bs-split-pane.cmp.test.js

@@ -0,0 +1,107 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+const mount = (props = {}, panes = 3) => render(h("div", { style: { width: '900px', height: '400px' } }, h("bs-split-pane", { ...props }, h("div", { slot: "pane-1" }, "One"), h("div", { slot: "pane-2" }, "Two"), panes === 3 && h("div", { slot: "pane-3" }, "Three"))));
+const size = (el, axis = 'width') => el.getBoundingClientRect()[axis];
+describe('bs-split-pane', () => {
+    it('renders one divider per gap between panes, with separator semantics', async () => {
+        const { root } = await mount();
+        const split = root.querySelector('bs-split-pane');
+        const dividers = split.shadowRoot.querySelectorAll('[part="divider"]');
+        expect(dividers.length).toBe(2);
+        expect(dividers[0]).toEqualAttribute('role', 'separator');
+        expect(dividers[0]).toEqualAttribute('aria-orientation', 'vertical');
+        expect(dividers[0]).toEqualAttribute('aria-label', 'Resize panes');
+        expect(dividers[0]).toEqualAttribute('tabindex', '0');
+        expect(split.shadowRoot.querySelectorAll('[part~="pane"]').length).toBe(3);
+    });
+    it('follows the filled slots: two panes means one divider', async () => {
+        const { root } = await mount({}, 2);
+        const split = root.querySelector('bs-split-pane');
+        expect(split.shadowRoot.querySelectorAll('[part="divider"]').length).toBe(1);
+    });
+    it('uses horizontal dividers when vertical', async () => {
+        const { root } = await mount({ orientation: 'vertical' });
+        const split = root.querySelector('bs-split-pane');
+        expect(split.shadowRoot.querySelector('[part="divider"]')).toEqualAttribute('aria-orientation', 'horizontal');
+    });
+    it('gives the first pane its fixed size and shrinks it to the rail when collapsed', async () => {
+        const { root, waitForChanges } = await mount();
+        const split = root.querySelector('bs-split-pane');
+        const first = split.shadowRoot.querySelector('[part~="pane-1"]');
+        expect(Math.round(size(first))).toBe(333);
+        split.setAttribute('collapsed', '');
+        await waitForChanges();
+        expect(Math.round(size(first))).toBe(106);
+    });
+    it('resizes the first pane with arrow keys and emits bsResize', async () => {
+        const { root, waitForChanges } = await mount();
+        const split = root.querySelector('bs-split-pane');
+        const events = [];
+        split.addEventListener('bsResize', (e) => events.push(e.detail));
+        const first = split.shadowRoot.querySelector('[part~="pane-1"]');
+        const divider = split.shadowRoot.querySelector('[part="divider"]');
+        divider.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, cancelable: true }));
+        await waitForChanges();
+        expect(Math.round(size(first))).toBe(349);
+        divider.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', shiftKey: true, bubbles: true, cancelable: true }));
+        await waitForChanges();
+        expect(Math.round(size(first))).toBe(285);
+        expect(events.length).toBe(2);
+        expect(events[1][0]).toBe(285);
+    });
+    it('clamps to the minimum size with Home', async () => {
+        const { root, waitForChanges } = await mount();
+        const split = root.querySelector('bs-split-pane');
+        const first = split.shadowRoot.querySelector('[part~="pane-1"]');
+        const divider = split.shadowRoot.querySelector('[part="divider"]');
+        divider.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true, cancelable: true }));
+        await waitForChanges();
+        expect(Math.round(size(first))).toBe(96);
+    });
+    it('resizes by dragging with the pointer', async () => {
+        const { root, waitForChanges } = await mount();
+        const split = root.querySelector('bs-split-pane');
+        const first = split.shadowRoot.querySelector('[part~="pane-1"]');
+        const divider = split.shadowRoot.querySelector('[part="divider"]');
+        const fire = (type, clientX) => divider.dispatchEvent(new PointerEvent(type, { clientX, pointerId: 1, bubbles: true, cancelable: true }));
+        // setPointerCapture throws for synthetic pointer ids; the component only needs the move/up events.
+        divider.setPointerCapture = () => { };
+        fire('pointerdown', 340);
+        fire('pointermove', 440);
+        await waitForChanges();
+        expect(Math.round(size(first))).toBe(433);
+        fire('pointerup', 440);
+        await waitForChanges();
+        expect(Math.round(size(first))).toBe(433);
+    });
+    it('toggles collapsed with Enter on the first divider and emits bsCollapsedChange', async () => {
+        const { root, waitForChanges } = await mount();
+        const split = root.querySelector('bs-split-pane');
+        const events = [];
+        split.addEventListener('bsCollapsedChange', (e) => events.push(e.detail));
+        const divider = split.shadowRoot.querySelector('[part="divider"]');
+        divider.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }));
+        await waitForChanges();
+        expect(split.collapsed).toBe(true);
+        expect(split).toHaveAttribute('collapsed');
+        expect(events).toEqual([true]);
+    });
+    it('is not focusable and ignores keys when resizable is false', async () => {
+        const { root, waitForChanges } = await mount({ resizable: false });
+        const split = root.querySelector('bs-split-pane');
+        const first = split.shadowRoot.querySelector('[part~="pane-1"]');
+        const divider = split.shadowRoot.querySelector('[part="divider"]');
+        expect(divider).not.toHaveAttribute('tabindex');
+        divider.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, cancelable: true }));
+        await waitForChanges();
+        expect(Math.round(size(first))).toBe(333);
+    });
+    it('follows dark mode: slotted text and panes use the dark tokens', async () => {
+        const { root } = await render(h("div", { "data-theme": "dark", style: { width: '600px', height: '300px' } }, h("bs-split-pane", null, h("div", { slot: "pane-1" }, "One"), h("div", { slot: "pane-2" }, "Two"))));
+        const split = root.querySelector('bs-split-pane');
+        const pane = split.shadowRoot.querySelector('[part~="pane-1"]');
+        const container = split.shadowRoot.querySelector('.bs-split-pane');
+        expect(getComputedStyle(root.querySelector('[slot="pane-1"]')).color).toBe('rgb(255, 255, 255)');
+        expect(getComputedStyle(pane).backgroundColor).not.toBe('rgb(255, 255, 255)');
+        expect(getComputedStyle(container).color).toBe('rgb(255, 255, 255)');
+    });
+});

package/dist/collection/components/bs-split-pane/bs-split-pane.css

@@ -0,0 +1,108 @@
+:host {
+  display: block;
+  height: 100%;
+  min-height: 0;
+  --bs-split-pane-radius: var(--bs-border-radius-100);
+  --bs-split-pane-bg: var(--bs-surface-base);
+  --bs-split-pane-color: var(--bs-text-default);
+  /* Pane sizes below are the literal values from the Figma "Split pane" variants (333 / 106). */
+  --bs-split-pane-first-size: 333px;
+  --bs-split-pane-collapsed-size: 106px;
+  --bs-split-pane-min-size: 96px;
+  --bs-split-pane-divider-size: var(--bs-spacing-75);
+  --bs-split-pane-divider-bg: var(--bs-surface-container);
+  --bs-split-pane-divider-thumb: var(--bs-border-neutral-container);
+  --bs-split-pane-divider-thumb-active: var(--bs-border-neutral-hover);
+  --bs-split-pane-divider-thumb-length: 250px;
+  --bs-split-pane-border: var(--bs-border-neutral-container);
+  --bs-split-pane-focus-ring: var(--bs-border-neutral-focus);
+}
+
+.bs-split-pane {
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: clip;
+  border-radius: var(--bs-split-pane-radius);
+  background: var(--bs-split-pane-bg);
+  color: var(--bs-split-pane-color);
+}
+
+.bs-split-pane--vertical {
+  flex-direction: column;
+}
+
+.bs-split-pane__pane {
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  background: var(--bs-split-pane-bg);
+}
+
+.bs-split-pane--horizontal > .bs-split-pane__pane {
+  min-width: min(var(--bs-split-pane-min-size), 100%);
+}
+
+.bs-split-pane--vertical > .bs-split-pane__pane {
+  min-height: min(var(--bs-split-pane-min-size), 100%);
+}
+
+.bs-split-pane__divider {
+  position: relative;
+  flex: 0 0 var(--bs-split-pane-divider-size);
+  display: flex;
+  background: var(--bs-split-pane-divider-bg);
+  touch-action: none;
+  outline: none;
+}
+
+.bs-split-pane--horizontal > .bs-split-pane__divider {
+  cursor: col-resize;
+  flex-direction: column;
+}
+
+.bs-split-pane--vertical > .bs-split-pane__divider {
+  cursor: row-resize;
+  flex-direction: row;
+}
+
+.bs-split-pane__divider--static {
+  cursor: default;
+  pointer-events: none;
+}
+
+.bs-split-pane__thumb {
+  display: block;
+  border-radius: var(--bs-border-radius-full);
+  background: var(--bs-split-pane-divider-thumb);
+  transition: background-color var(--bs-duration-fast) var(--bs-easing-standard);
+}
+
+.bs-split-pane--horizontal > .bs-split-pane__divider > .bs-split-pane__thumb {
+  width: 100%;
+  height: min(var(--bs-split-pane-divider-thumb-length), 100%);
+}
+
+.bs-split-pane--vertical > .bs-split-pane__divider > .bs-split-pane__thumb {
+  height: 100%;
+  width: min(var(--bs-split-pane-divider-thumb-length), 100%);
+}
+
+.bs-split-pane__divider:hover > .bs-split-pane__thumb,
+.bs-split-pane__divider--active > .bs-split-pane__thumb,
+.bs-split-pane__divider:focus-visible > .bs-split-pane__thumb {
+  background: var(--bs-split-pane-divider-thumb-active);
+}
+
+.bs-split-pane__divider:focus-visible {
+  outline: 2px solid var(--bs-split-pane-focus-ring);
+  outline-offset: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bs-split-pane__thumb {
+    transition: none;
+  }
+}