@brandsync/wc 1.12.1 → 1.13.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: '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"; }

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

@@ -107,7 +107,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: '6cb94a173877a8e339585dd41bfca7cdb5152277', 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("span", { key: '87fc3d0b1e958295bb3ff41c3a4f6a76803c4b31', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: '5fb74ca62c8f60b50d7f53cd5b77b02cfb547365', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '4774748fa4d8d5f441914aaca0cc8729c3d85857', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: '87d793b4e8088f51ff64dd388f3769aebd5c507d', onSlotchange: this.onLabelSlotchange })), h("span", { key: 'ddfc8532be46adab986a6f4a6b0e46d2c8fcc8f4', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: '729a03df8dbca1814725d06ceb23d1d1c694cc63', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: 'd873545b4148383e3df42fe1ff76aab027d4a0f8', part: "indicator", class: "bs-tab__indicator" })));
+        return (h("button", { key: '445a6cb3dd289641e7499a612e90a1916b6e85b7', 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("span", { key: 'c14a3671a22711ff388dc5dbd08ed7d337e97f3d', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: '0baa4ff03cfc81ca1c76d10f77997fc85b55d403', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '710df7af9639d65a2d4cb750f73a2369607931ad', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: 'b60afb9f8478feb6fbc9fa5d6a7b402029238807', onSlotchange: this.onLabelSlotchange })), h("span", { key: '7621d5e89eacbe23e66451f294db0012c7fbd18b', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: '9c26f2322701714939b072431e9f9aa91cffc778', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: '77f31d38361e15b81a72acbf43e2ab6d852b835d', part: "indicator", class: "bs-tab__indicator" })));
     }
     static get is() { return "bs-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -135,7 +135,7 @@ export class BsTabs {
     }
     render() {
         const vertical = this.orientation === 'vertical';
-        return (h("div", { key: 'e7f42dc2b8504a99f03c35fa3617155ac430def0', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: 'a9a96d3fca150110a8490b42d516db9609677903', onSlotchange: () => this.syncRovingTabindex() })));
+        return (h("div", { key: 'dcee9772097aec3389f8a87e4bb29ea88cef5298', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: 'dd253eade8f13fd774fb688e01abc8cc05b6af81', onSlotchange: () => this.syncRovingTabindex() })));
     }
     static get is() { return "bs-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -62,6 +62,10 @@ export class BsTimepicker {
     /** Label of the Cancel button. */
     cancelLabel = 'Cancel';
     /** Accessible name of the hour spinner. */
+    /** Verb prefix of each column's increment button name ("Increase hour"). */
+    increaseLabel = 'Increase';
+    /** Verb prefix of each column's decrement button name ("Decrease hour"). */
+    decreaseLabel = 'Decrease';
     hourLabel = 'Hour';
     /** Accessible name of the minute spinner. */
     minuteLabel = 'Minute';
@@ -193,17 +197,17 @@ export class BsTimepicker {
         const [min, max] = this.bounds(col);
         const n = this.shown(col);
         const stepLabel = (dir) => `${dir} ${label.toLowerCase()}`;
-        return (h("div", { part: "spinner", class: "bs-timepicker__spinner" }, h("button", { part: "step", type: "button", class: "bs-timepicker__step", "aria-label": stepLabel('Increase'), tabindex: -1, onClick: () => this.stepBy(col, 1) }, h("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M18 15L12 9L6 15", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { part: "value", class: "bs-timepicker__value", role: "spinbutton", tabindex: 0, "aria-label": label, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": n, "aria-valuetext": pad(n), onKeyDown: this.onKeyDown(col), onBlur: () => (this.typed = '') }, pad(n)), h("button", { part: "step", type: "button", class: "bs-timepicker__step", "aria-label": stepLabel('Decrease'), tabindex: -1, onClick: () => this.stepBy(col, -1) }, h("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M6 9L12 15L18 9", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
+        return (h("div", { part: "spinner", class: "bs-timepicker__spinner" }, h("button", { part: "step", type: "button", class: "bs-timepicker__step", "aria-label": stepLabel(this.increaseLabel), tabindex: -1, onClick: () => this.stepBy(col, 1) }, h("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M18 15L12 9L6 15", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { part: "value", class: "bs-timepicker__value", role: "spinbutton", tabindex: 0, "aria-label": label, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": n, "aria-valuetext": pad(n), onKeyDown: this.onKeyDown(col), onBlur: () => (this.typed = '') }, pad(n)), h("button", { part: "step", type: "button", class: "bs-timepicker__step", "aria-label": stepLabel(this.decreaseLabel), tabindex: -1, onClick: () => this.stepBy(col, -1) }, h("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M6 9L12 15L18 9", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
     }
     render() {
-        return (h("bs-card", { key: 'e0545d99e052005bcad5509f81505f628adb5dc4', part: "container", class: "bs-timepicker", surface: "raised" }, h("div", { key: '664c7184dcefe5c63f03afad3953787cbc3064cc', class: "bs-timepicker__body" }, h("div", { key: '602d4f0ca6975b22daa7c7a37a6d53a259c39768', part: "header", class: "bs-timepicker__header" }, h("div", { key: '1650464c84e066f14f6343f18f779e35932535c3', part: "title", class: "bs-timepicker__title" }, this.heading), h("label", { key: 'debc6155ccf39b90f281d49240203d642fb5039d', class: "bs-timepicker__format" }, h("span", { key: '147a6d85b4f0922b5c7d96ebef88b3c70d1fbe05' }, this.formatLabel), h("bs-switch", { key: 'ddb0be1751ce8246acbfd6c187e66fb6bc878cd5', part: "format-toggle", size: "md", ariaLabel: this.formatLabel, checked: !this.is12h, onBsChange: (ev) => (this.format = ev.detail ? '24h' : '12h') }))), h("div", { key: '35f13bd74133f2c1109df96aafdc456178e4a32f', class: "bs-timepicker__divider" }), h("div", { key: '9c979a8d3300a8f5dba7d8df784dc8ef691a40a6', part: "selector", class: "bs-timepicker__selector" }, this.renderColumn('hour', this.hourLabel), h("div", { key: '5b4af0371fd816067b92854da2b35e5a7de8e4ea', part: "separator", class: "bs-timepicker__separator", "aria-hidden": "true" }, h("svg", { key: 'a70450b5068add559c48e795ce6aca204b30d02d', viewBox: "0 0 4 32", fill: "currentColor" }, h("circle", { key: '26a760f4d4712eca3df48b97bde276ce241511d5', cx: "2", cy: "10", r: "2" }), h("circle", { key: '3c6eb56e2736353dc5e5bc4a1d6ef64242f6a367', cx: "2", cy: "22", r: "2" }))), this.renderColumn('minute', this.minuteLabel), this.is12h && (h("bs-input", { key: '948e724c331008bbd00fd84c516d02e919e622e1', part: "period", class: "bs-timepicker__period", type: "dropdown", label: this.periodLabel, value: this.isPm ? 'PM' : 'AM', options: [
+        return (h("bs-card", { key: '2033e822eb65c41caeb338bd7b0ea569e775b715', part: "container", class: "bs-timepicker", surface: "raised" }, h("div", { key: '952ccde08ccf1c56404c9364c16980c5008abb62', class: "bs-timepicker__body" }, h("div", { key: '39b3370e55682275901c68c84ad8db8142525d31', part: "header", class: "bs-timepicker__header" }, h("div", { key: '77858996498a08dc30cad647eec89ec975db71a9', part: "title", class: "bs-timepicker__title" }, this.heading), h("label", { key: 'f29d33b987ae0a5d1448f0636787b1b1abc79187', class: "bs-timepicker__format" }, h("span", { key: '975b259c50cc3f10366327a75da5e1293ee803f3' }, this.formatLabel), h("bs-switch", { key: 'db35c8e82b52549e5d63e3eb5188f094f3ac56ae', part: "format-toggle", size: "md", ariaLabel: this.formatLabel, checked: !this.is12h, onBsChange: (ev) => (this.format = ev.detail ? '24h' : '12h') }))), h("div", { key: 'bb8875c816372d424f8bbba86d6a1e0bc409f5b2', class: "bs-timepicker__divider" }), h("div", { key: '2dfdd3a449ad53f6d6af142007f73486ce9d852e', part: "selector", class: "bs-timepicker__selector" }, this.renderColumn('hour', this.hourLabel), h("div", { key: '05a3adb45f35c3bd51a275d38cae8f9fe4f3afbf', part: "separator", class: "bs-timepicker__separator", "aria-hidden": "true" }, h("svg", { key: 'b51e22b366c29a293b99ea91f46872f767295d4f', viewBox: "0 0 4 32", fill: "currentColor" }, h("circle", { key: '33e566b81ad2e96bf0033ed43f2b70dfe54371f2', cx: "2", cy: "10", r: "2" }), h("circle", { key: '4210a5cd7058385bd983225951d94aeda4aa9c06', cx: "2", cy: "22", r: "2" }))), this.renderColumn('minute', this.minuteLabel), this.is12h && (h("bs-input", { key: '8f557a95389fbbc579539744230933000a559526', part: "period", class: "bs-timepicker__period", type: "dropdown", label: this.periodLabel, value: this.isPm ? 'PM' : 'AM', options: [
                 { label: 'AM', value: 'AM' },
                 { label: 'PM', value: 'PM' },
             ], onBsChange: (ev) => {
                 const pm = ev.detail === 'PM';
                 if (pm !== this.isPm)
                     this.hour = (this.hour + 12) % 24;
-            } }))), h("div", { key: '08b57e8c0b895e272d98386fe5b2ac2e55a87de0', class: "bs-timepicker__divider" }), h("div", { key: '5b1af1da10c4333ef6b826eaafd75fa12ef2e785', part: "footer", class: "bs-timepicker__footer" }, h("bs-button", { key: 'ad24615dbe6ae46e00ca558f71cee030504573a5', part: "cancel", variant: "subtle", onClick: this.cancel }, this.cancelLabel), h("bs-button", { key: 'f76cd192e1e7e0bb524080cf54a655c5b4508a3c', part: "confirm", variant: "primary", onClick: this.confirm }, this.confirmLabel)))));
+            } }))), h("div", { key: 'fa37a2d7ac535f62e3c7d56eebee4bf6a6dbba5c', class: "bs-timepicker__divider" }), h("div", { key: 'f0c0e549ae1282ee4e93504163c279a9ccd6f241', part: "footer", class: "bs-timepicker__footer" }, h("bs-button", { key: '301330874cad2f9beb3b82e580c24168fc5b0052', part: "cancel", variant: "subtle", onClick: this.cancel }, this.cancelLabel), h("bs-button", { key: 'bf193dbb17a2c71c16b574b31035f1752c89765b', part: "confirm", variant: "primary", onClick: this.confirm }, this.confirmLabel)))));
     }
     static get is() { return "bs-timepicker"; }
     static get encapsulation() { return "shadow"; }
@@ -379,6 +383,46 @@ export class BsTimepicker {
                 "attribute": "cancel-label",
                 "defaultValue": "'Cancel'"
             },
+            "increaseLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Verb prefix of each column's increment button name (\"Increase hour\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "increase-label",
+                "defaultValue": "'Increase'"
+            },
+            "decreaseLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Verb prefix of each column's decrement button name (\"Decrease hour\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "decrease-label",
+                "defaultValue": "'Decrease'"
+            },
             "hourLabel": {
                 "type": "string",
                 "mutable": false,
@@ -391,7 +435,7 @@ export class BsTimepicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Accessible name of the hour spinner."
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,

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

@@ -18,6 +18,8 @@ export class BsToast {
     /** Semantic state. Each state has its own icon and matching container/text tokens -- there is
      * no neutral/default state. */
     state = 'info';
+    /** Accessible name of the dismiss button. */
+    dismissLabel = 'Dismiss';
     /** Fires when the close button is clicked. This component doesn't remove itself from the DOM --
      * the consumer is expected to do that (or hide it) in response to this event. */
     bsDismiss;
@@ -25,7 +27,7 @@ export class BsToast {
         this.bsDismiss.emit();
     };
     render() {
-        return (h("div", { key: 'fcf10204b781318554bd1d1b65b3b003759f47ca', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, h("div", { key: '77a9fc881d530b43aa93cd71ab00d79a402ac5df', class: "bs-toast__content" }, h("span", { key: '18b4ffee843c2f9f235477e729a7a5bca1044595', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, h(StateIcon, { key: '62a78820785f12ccfa503d7690ae99d2b3b47aa2', state: this.state })), h("span", { key: 'b17882e4d5f4afe5bcfa5704b515c145df94799b', part: "message", class: "bs-toast__message" }, h("slot", { key: '678d2256cc21e6e07b099d417837b5891e7d6021' }))), h("div", { key: 'aba935f0a62a599b9eacfed9d13598f70a941283', class: "bs-toast__actions" }, h("button", { key: 'a9ee43cf75eca8e737d5e59507408de7f8bffaf1', part: "close", type: "button", class: "bs-toast__close", "aria-label": "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: '4e4c5a25e6b25da2362385f1be5c4b86f02bbeb0' })))));
+        return (h("div", { key: '376303627d6ffb7b0003dc83e874784ede700486', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, h("div", { key: '767b01d764404a3b801d451ea2b2f52bcccb8425', class: "bs-toast__content" }, h("span", { key: '701619d874f9849da38d4e1c19503ea93773cd75', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, h(StateIcon, { key: 'b3dfc1ae57ed798985074d4572349da5875c1e0a', state: this.state })), h("span", { key: 'e41d7a06af64543073371b57d02439ca93068261', part: "message", class: "bs-toast__message" }, h("slot", { key: '5e4e717afea3ad71c66a06a8c0ab265b8a850fa1' }))), h("div", { key: 'daa05fc5a4911cdadd52169377b8bb72bf0e11f7', class: "bs-toast__actions" }, h("button", { key: '0a2dad22af165429ef95db499f44ee6568a51bfb', part: "close", type: "button", class: "bs-toast__close", "aria-label": this.dismissLabel, onClick: this.onDismiss }, h(CloseIcon, { key: '74b90cc634d5bec5e8e0d64bf1e4ad347d41a533' })))));
     }
     static get is() { return "bs-toast"; }
     static get encapsulation() { return "shadow"; }
@@ -66,6 +68,26 @@ export class BsToast {
                 "reflect": false,
                 "attribute": "state",
                 "defaultValue": "'info'"
+            },
+            "dismissLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the dismiss button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismiss-label",
+                "defaultValue": "'Dismiss'"
             }
         };
     }