@brandsync/wc 1.12.1 → 1.14.0

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

@@ -0,0 +1,404 @@
+import { h } from "@stencil/core";
+const MAX_PANES = 3;
+const DEFAULT_MIN_SIZE = 96;
+/**
+ * A resizable layout of two or three panes separated by draggable, keyboard-operable dividers
+ * (the WAI-ARIA "window splitter" pattern). Content goes into the named slots `pane-1`, `pane-2`
+ * and (optionally) `pane-3`; the pane count follows which slots have content.
+ *
+ * `orientation="horizontal"` places panes side by side (vertical dividers); `"vertical"` stacks
+ * them (horizontal dividers). The first pane has a fixed size (`--bs-split-pane-first-size`) that
+ * the user can change by dragging; the last pane absorbs the remaining space. `collapsed` shrinks
+ * the first pane to a narrow rail (`--bs-split-pane-collapsed-size`) -- the component reflects the
+ * attribute so slotted content can switch to its compact rendering (e.g. icon-only list items).
+ *
+ * ## When to use
+ * - Master/detail layouts: a navigation or list pane next to one or two detail panes.
+ *
+ * ## When not to use
+ * - A temporary overlay panel (use `bs-side-panel`).
+ * - A fixed, non-resizable two-column layout (plain CSS grid; or set `resizable="false"` to keep
+ *   the dividers purely visual).
+ *
+ * @slot pane-1 - The first pane (the one that collapses).
+ * @slot pane-2 - The second pane.
+ * @slot pane-3 - Optional third pane.
+ * @part container - The flex wrapper around all panes and dividers.
+ * @part pane - Every pane wrapper (`pane-1`, `pane-2`, `pane-3` are also exposed as separate parts).
+ * @part divider - Every divider (the focusable `role="separator"` element).
+ * @part divider-thumb - The visible thumb on a divider.
+ * @prop --bs-split-pane-radius - Corner radius of the container. Aliased to `--bs-border-radius-100`.
+ * @prop --bs-split-pane-bg - Pane background. Aliased to `--bs-surface-base`.
+ * @prop --bs-split-pane-color - Text colour inherited by slotted content. Aliased to `--bs-text-default`.
+ * @prop --bs-split-pane-first-size - Initial size of the first pane along the layout axis. Defaults to `333px` (Figma).
+ * @prop --bs-split-pane-collapsed-size - Size of the first pane while `collapsed`. Defaults to `106px` (Figma).
+ * @prop --bs-split-pane-min-size - Smallest size a resized pane may take. Defaults to `96px`.
+ * @prop --bs-split-pane-divider-size - Thickness of a divider. Aliased to `--bs-spacing-75`.
+ * @prop --bs-split-pane-divider-bg - Divider track colour. Aliased to `--bs-surface-container`.
+ * @prop --bs-split-pane-divider-thumb - Divider thumb colour. Aliased to `--bs-border-neutral-container`.
+ * @prop --bs-split-pane-divider-thumb-active - Divider thumb colour on hover, focus and drag. Aliased to `--bs-border-neutral-hover`.
+ * @prop --bs-split-pane-divider-thumb-length - Length of the divider thumb. Defaults to `250px` (Figma).
+ * @prop --bs-split-pane-border - Border between the first pane and the rest when dividers are not resizable. Aliased to `--bs-border-neutral-container`.
+ * @prop --bs-split-pane-focus-ring - Divider focus ring colour. Aliased to `--bs-border-neutral-focus`.
+ */
+export class BsSplitPane {
+    el;
+    /** `horizontal` = panes side by side, `vertical` = panes stacked. */
+    orientation = 'horizontal';
+    /** Collapses the first pane to a narrow rail. Mutable: the Enter key on the first divider toggles it. */
+    collapsed = false;
+    /** Whether the dividers can be dragged / operated by keyboard. `false` keeps them as visual separators. */
+    resizable = true;
+    /** Accessible name of each divider. */
+    dividerLabel = 'Resize panes';
+    /** Pixels moved per arrow-key press (Shift multiplies by 4). */
+    step = 16;
+    /** Fires after a resize (pointer release or key press) with the pixel size of every pane except the last. */
+    bsResize;
+    /** Fires when `collapsed` changes through user interaction. */
+    bsCollapsedChange;
+    paneCount = 2;
+    sizes = [];
+    draggingIndex = -1;
+    observer;
+    dragStart;
+    /** Toggles `collapsed` and emits `bsCollapsedChange`. */
+    async toggleCollapsed() {
+        this.collapsed = !this.collapsed;
+        this.bsCollapsedChange.emit(this.collapsed);
+    }
+    componentWillLoad() {
+        this.countPanes();
+    }
+    connectedCallback() {
+        this.observer = new MutationObserver(() => this.countPanes());
+        this.observer.observe(this.el, { childList: true, attributes: true, attributeFilter: ['slot'], subtree: false });
+    }
+    disconnectedCallback() {
+        this.observer?.disconnect();
+    }
+    countPanes() {
+        let count = 1;
+        for (let i = 1; i <= MAX_PANES; i++) {
+            if (this.el.querySelector(`:scope > [slot="pane-${i}"]`))
+                count = i;
+        }
+        this.paneCount = Math.max(count, 1);
+    }
+    isRtl() {
+        return this.orientation === 'horizontal' && getComputedStyle(this.el).direction === 'rtl';
+    }
+    axisSize(pane) {
+        const rect = pane.getBoundingClientRect();
+        return this.orientation === 'horizontal' ? rect.width : rect.height;
+    }
+    minSize() {
+        const raw = parseFloat(getComputedStyle(this.el).getPropertyValue('--bs-split-pane-min-size'));
+        return Number.isFinite(raw) ? raw : DEFAULT_MIN_SIZE;
+    }
+    /** Largest size pane `index` may take: leave `minSize` for each pane after it, and the dividers. */
+    maxSize(index) {
+        const container = this.el.shadowRoot.querySelector('.bs-split-pane');
+        const total = this.axisSize(container);
+        const dividers = Array.from(container.querySelectorAll('.bs-split-pane__divider'));
+        const dividerTotal = dividers.reduce((sum, d) => sum + this.axisSize(d), 0);
+        const before = Array.from(container.querySelectorAll('.bs-split-pane__pane'))
+            .slice(0, index)
+            .reduce((sum, p) => sum + this.axisSize(p), 0);
+        const after = (this.paneCount - 1 - index) * this.minSize();
+        return Math.max(this.minSize(), total - dividerTotal - before - after);
+    }
+    paneEl(index) {
+        return this.el.shadowRoot.querySelectorAll('.bs-split-pane__pane')[index];
+    }
+    setSize(index, value) {
+        const clamped = Math.min(Math.max(value, this.minSize()), this.maxSize(index));
+        const next = this.sizes.slice();
+        next[index] = clamped;
+        this.sizes = next;
+    }
+    emitResize() {
+        const sizes = [];
+        // Prefer the size just committed to state: the DOM hasn't re-rendered yet when this runs.
+        for (let i = 0; i < this.paneCount - 1; i++)
+            sizes.push(Math.round(this.sizes[i] ?? this.axisSize(this.paneEl(i))));
+        this.bsResize.emit(sizes);
+    }
+    onPointerDown = (index) => (ev) => {
+        if (!this.resizable || (index === 0 && this.collapsed))
+            return;
+        ev.preventDefault();
+        ev.currentTarget.setPointerCapture(ev.pointerId);
+        this.dragStart = {
+            pointer: this.orientation === 'horizontal' ? ev.clientX : ev.clientY,
+            size: this.axisSize(this.paneEl(index)),
+            index,
+        };
+        this.draggingIndex = index;
+    };
+    onPointerMove = (ev) => {
+        if (!this.dragStart)
+            return;
+        const pointer = this.orientation === 'horizontal' ? ev.clientX : ev.clientY;
+        const delta = (pointer - this.dragStart.pointer) * (this.isRtl() ? -1 : 1);
+        this.setSize(this.dragStart.index, this.dragStart.size + delta);
+    };
+    onPointerUp = (ev) => {
+        if (!this.dragStart)
+            return;
+        ev.currentTarget.releasePointerCapture?.(ev.pointerId);
+        this.dragStart = undefined;
+        this.draggingIndex = -1;
+        this.emitResize();
+    };
+    onKeyDown = (index) => (ev) => {
+        if (!this.resizable)
+            return;
+        const horizontal = this.orientation === 'horizontal';
+        const grow = horizontal ? (this.isRtl() ? 'ArrowLeft' : 'ArrowRight') : 'ArrowDown';
+        const shrink = horizontal ? (this.isRtl() ? 'ArrowRight' : 'ArrowLeft') : 'ArrowUp';
+        const amount = this.step * (ev.shiftKey ? 4 : 1);
+        const current = this.axisSize(this.paneEl(index));
+        let handled = true;
+        if (ev.key === 'Enter' && index === 0) {
+            void this.toggleCollapsed();
+        }
+        else if (this.collapsed && index === 0) {
+            handled = false;
+        }
+        else if (ev.key === grow) {
+            this.setSize(index, current + amount);
+        }
+        else if (ev.key === shrink) {
+            this.setSize(index, current - amount);
+        }
+        else if (ev.key === 'Home') {
+            this.setSize(index, this.minSize());
+        }
+        else if (ev.key === 'End') {
+            this.setSize(index, this.maxSize(index));
+        }
+        else {
+            handled = false;
+        }
+        if (!handled)
+            return;
+        ev.preventDefault();
+        this.emitResize();
+    };
+    paneStyle(index) {
+        const last = index === this.paneCount - 1;
+        if (index === 0 && this.collapsed && this.paneCount > 1) {
+            return { flex: '0 0 var(--bs-split-pane-collapsed-size)' };
+        }
+        const size = this.sizes[index];
+        if (size !== undefined && !last)
+            return { flex: `0 0 ${size}px` };
+        if (index === 0 && !last)
+            return { flex: '0 0 var(--bs-split-pane-first-size)' };
+        return { flex: '1 1 0' };
+    }
+    percentFor(index) {
+        const container = this.el.shadowRoot?.querySelector('.bs-split-pane');
+        const pane = this.el.shadowRoot?.querySelectorAll('.bs-split-pane__pane')[index];
+        if (!container || !pane)
+            return 0;
+        const total = this.axisSize(container);
+        return total ? Math.round((this.axisSize(pane) / total) * 100) : 0;
+    }
+    render() {
+        const dividerOrientation = this.orientation === 'horizontal' ? 'vertical' : 'horizontal';
+        const nodes = [];
+        for (let i = 0; i < this.paneCount; i++) {
+            nodes.push(h("div", { part: `pane pane-${i + 1}`, class: `bs-split-pane__pane bs-split-pane__pane--${i + 1}`, style: this.paneStyle(i) }, h("slot", { name: `pane-${i + 1}` })));
+            if (i < this.paneCount - 1) {
+                nodes.push(h("div", { part: "divider", class: { 'bs-split-pane__divider': true, 'bs-split-pane__divider--active': this.draggingIndex === i, 'bs-split-pane__divider--static': !this.resizable }, role: "separator", "aria-orientation": dividerOrientation, "aria-label": this.dividerLabel, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": this.percentFor(i), tabindex: this.resizable ? 0 : undefined, onPointerDown: this.onPointerDown(i), onPointerMove: this.onPointerMove, onPointerUp: this.onPointerUp, onPointerCancel: this.onPointerUp, onKeyDown: this.onKeyDown(i) }, h("span", { part: "divider-thumb", class: "bs-split-pane__thumb" })));
+            }
+        }
+        return (h("div", { key: '8ef79e5ccc0ac2e8d4204f82b3507bef387e95cc', part: "container", class: `bs-split-pane bs-split-pane--${this.orientation}` }, nodes));
+    }
+    static get is() { return "bs-split-pane"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-split-pane.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-split-pane.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsSplitPaneOrientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "BsSplitPaneOrientation": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-split-pane/bs-split-pane.tsx",
+                            "id": "src/components/bs-split-pane/bs-split-pane.tsx::BsSplitPaneOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`horizontal` = panes side by side, `vertical` = panes stacked."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            },
+            "collapsed": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Collapses the first pane to a narrow rail. Mutable: the Enter key on the first divider toggles it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "collapsed",
+                "defaultValue": "false"
+            },
+            "resizable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the dividers can be dragged / operated by keyboard. `false` keeps them as visual separators."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "resizable",
+                "defaultValue": "true"
+            },
+            "dividerLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of each divider."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "divider-label",
+                "defaultValue": "'Resize panes'"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pixels moved per arrow-key press (Shift multiplies by 4)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step",
+                "defaultValue": "16"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "paneCount": {},
+            "sizes": {},
+            "draggingIndex": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsResize",
+                "name": "bsResize",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires after a resize (pointer release or key press) with the pixel size of every pane except the last."
+                },
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                }
+            }, {
+                "method": "bsCollapsedChange",
+                "name": "bsCollapsedChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when `collapsed` changes through user interaction."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toggleCollapsed": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggles `collapsed` and emits `bsCollapsedChange`.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/bs-split-pane/bs-split-pane.stories.js

@@ -0,0 +1,47 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+const list = html `
+  <div style="padding: var(--bs-spacing-300)">
+    <strong>Pane title</strong>
+    <div>Description</div>
+  </div>
+`;
+const detail = (title) => html `
+  <div style="padding: var(--bs-spacing-300)">
+    <strong>${title}</strong>
+    <div>Description</div>
+    <p>Title<br /><strong>Details</strong></p>
+    <p>Title<br /><strong>Details</strong></p>
+  </div>
+`;
+const meta = {
+    title: 'Components/bs-split-pane',
+    parameters: { docs: { description: { component: componentDescription('bs-split-pane') } } },
+    render: args => html `
+    <div style="height: 480px; border: 1px solid var(--bs-border-neutral-container)">
+      <bs-split-pane orientation=${args.orientation} ?collapsed=${args.collapsed} .resizable=${args.resizable}>
+        <div slot="pane-1">${list}</div>
+        <div slot="pane-2">${detail('Detail pane')}</div>
+        ${args.panes === 3 ? html `<div slot="pane-3">${detail('Second detail pane')}</div>` : ''}
+      </bs-split-pane>
+    </div>
+  `,
+    argTypes: {
+        orientation: { control: 'inline-radio', options: ['horizontal', 'vertical'] },
+        collapsed: { control: 'boolean' },
+        resizable: { control: 'boolean' },
+        panes: { control: 'inline-radio', options: [2, 3] },
+    },
+    args: { orientation: 'horizontal', collapsed: false, resizable: true, panes: 3 },
+};
+export default meta;
+export const Horizontal = {};
+export const HorizontalCollapsed = { args: { collapsed: true } };
+export const Vertical = { args: { orientation: 'vertical' } };
+export const TwoPanes = {
+    args: {
+        panes: 2,
+        orientation: 'vertical',
+    },
+};
+export const NotResizable = { args: { resizable: false } };

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: '7956314c41e9add72583aa8e2bd7271e6cf1068b', role: "list" }, h("slot", { key: '0ace9928ce7f573d9202a11e489a50e976d0e351', 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: 'f51401da1a777c73fa70faa5a9f05f0234f517f1', role: "listitem", class: `bs-stepper-step--${this.direction}` }, h("div", { key: '30a1c060295b4addfc53ab67757661c7750ca781', class: "bs-stepper-step__top" }, h("span", { key: 'c4acc0a90fe006ed779072025c0aefc30a96c43f', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: '2a03c4c0b2e07a3879b7dbbcfc2022c6d753072d', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: 'a6492fbd22bc9659fa7e71340bab908eee807dbb' }), state === 'error' && h(ExclamationIcon, { key: '5390c086f6c8314040862b5a4f680685d67a1f86' })), h("span", { key: '535e553bca360fe96538afb4baf0063e18b88fd8', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: 'a04809fbdb2a47a129cf1a499bf0f9956d425e95', class: "bs-stepper-step__connector-line" }))), h("span", { key: 'ff4b573a3f0b1bac78cabbc68d58d4ecfe330fe9', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: '2cecc129a85da61efaa8c670754feca4a56fe717', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: '5c06546a24247733d7df9c99c753074809272feb', 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: '11ad9e104dabafbecba8395436f4f88fff141449', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: '4a6c4400f9193f481b1134517ed7d53828cca27d', 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: 'f6dca44c46b5412135cb43220ece5a8d161018d0', part: "track", class: trackClasses }, h("span", { key: '6a06911e7f17822a4b5df219f9c564cf8d130fbb', part: "knob", class: knobClasses })), h("span", { key: '6628c4ef4e1097d5b41b0b8eaac47eb0af627722', part: "label", class: "bs-switch__label" }, h("slot", { key: 'd1ce12e2a63a3a1a067c4080bae9c7612e8dd933' }))));
     }
     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: 'bccfcaa980bc351de48dc6e0611614721f7e63aa', 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: 'f9bb9caedc8fb34d90dd23a14e431714d2175389', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: '457be6231cd41bfe12198cda4780bff83af84d52', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'dea0e6da1a85682c7e04c93bb6c07165b720e168', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: '6e2c366f47f47a976cdcc667222e281306dbfc63', 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: '088ea367ad3b8b1afa36e8bb4cac7fb150aae7f2', 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: 'a68c2b1a582dbdae20dad694e4d69b80aa5223ea', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: '80a7d2856033c87f9f7cce7b3637e6a91106d76d', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '77e038473baf0bd124c589ce24c25ba0bebe2cde', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: 'dd09813d9c8dcb66fd338ff238861b0b02a8df07', onSlotchange: this.onLabelSlotchange })), h("span", { key: '22f74bafa1ad5948c0e1f09e9eb6f20f3b8d16ae', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: '65b8f288b9fcbfdb492d594226ef5da09fe082dd', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: 'fcda37d86c4c799e97ec0bf60ea7edd647e9c45e', 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: '0bc0de64c29c4bca86e2709fd3f376e4c195eab2', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: '0751673c06ae93234a987fd809a49c9d5517d29c', 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: '74af930fdaa05b2d91f4ca447078175a1c978994', part: "container", class: "bs-timepicker", surface: "raised" }, h("div", { key: 'f67c4d6f522e5ee39dad612521324d87a1d2c48d', class: "bs-timepicker__body" }, h("div", { key: 'c9bef71e51c20f5a09ae38519f89b7823fd2f9ad', part: "header", class: "bs-timepicker__header" }, h("div", { key: '4c4aa31d8f11f92bb789d7720222a39914a283a7', part: "title", class: "bs-timepicker__title" }, this.heading), h("label", { key: 'db8fbe9176836ccf19d60079fd21655a6f078eed', class: "bs-timepicker__format" }, h("span", { key: '42dd4163160e475dc5b27ec99534edf5df1e5a3d' }, this.formatLabel), h("bs-switch", { key: '1eca77cb8284366630ec8a53c2e5ca00ecea4382', part: "format-toggle", size: "md", ariaLabel: this.formatLabel, checked: !this.is12h, onBsChange: (ev) => (this.format = ev.detail ? '24h' : '12h') }))), h("div", { key: 'ec60756f323a04ddc74f9cf8bd6c84276cbe2a0b', class: "bs-timepicker__divider" }), h("div", { key: '15609379e051fe0eddbe491f0ccaeb7efad3ae81', part: "selector", class: "bs-timepicker__selector" }, this.renderColumn('hour', this.hourLabel), h("div", { key: '40760ac8da6112c1c82554ed807f156c3998ceeb', part: "separator", class: "bs-timepicker__separator", "aria-hidden": "true" }, h("svg", { key: 'b15b5bf4db3790c167b13caae40e1d1e7e92bfb7', viewBox: "0 0 4 32", fill: "currentColor" }, h("circle", { key: 'cdc4cee6cd246b05be5f11939425b44160a65d54', cx: "2", cy: "10", r: "2" }), h("circle", { key: '65a5393d6f05c241d7c1aa3c8090c22266386b0e', cx: "2", cy: "22", r: "2" }))), this.renderColumn('minute', this.minuteLabel), this.is12h && (h("bs-input", { key: '4292168e81da8883d93b1ce9e3e60edd00726cfb', 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: '9ceb4e065f2851ae0b4adc22fa6795d593df362a', class: "bs-timepicker__divider" }), h("div", { key: '8cbe32e5381d83e27ab7b97c50091fbf837428b8', part: "footer", class: "bs-timepicker__footer" }, h("bs-button", { key: '17fb1f5fcb3b40033951d13c460500c0bbc3f5a1', part: "cancel", variant: "subtle", onClick: this.cancel }, this.cancelLabel), h("bs-button", { key: '4a3a6a6bb3ef01a66e6198c1bcb148b94a164f8d', 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,