@brandsync/wc 1.9.0 → 1.11.0

package/dist/collection/components/bs-session-timeout/bs-session-timeout.stories.js

@@ -0,0 +1,88 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { componentDescription, propDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-session-timeout',
+    parameters: { docs: { description: { component: componentDescription('bs-session-timeout') } } },
+    decorators: [story => html `<div style="padding: 24px; background: var(--bs-color-neutral-container);">${story()}</div>`],
+    render: args => html `
+    <bs-session-timeout
+      type=${args.type}
+      seconds-left=${args.secondsLeft}
+      total-seconds=${args.totalSeconds}
+      ?countdown=${args.countdown}
+      saved-message=${ifDefined(args.savedMessage || undefined)}
+      account-name=${ifDefined(args.accountName || undefined)}
+      account-email=${ifDefined(args.accountEmail || undefined)}
+      password-error=${ifDefined(args.passwordError || undefined)}
+      @bsPrimary=${(ev) => console.log('bsPrimary', ev.detail)}
+      @bsSecondary=${() => console.log('bsSecondary')}
+      @bsAlternative=${(ev) => console.log('bsAlternative', ev.detail)}
+      @bsCancel=${() => console.log('bsCancel')}
+      @bsExpire=${() => console.log('bsExpire')}
+    ></bs-session-timeout>
+  `,
+    argTypes: {
+        type: { control: 'inline-radio', options: ['warning', 'signed-out', 'confirm-identity'], description: propDescription('bs-session-timeout', 'type') },
+        secondsLeft: { control: { type: 'number', min: 0 }, description: propDescription('bs-session-timeout', 'secondsLeft') },
+        totalSeconds: { control: { type: 'number', min: 0 }, description: propDescription('bs-session-timeout', 'totalSeconds') },
+        countdown: { control: 'boolean', description: propDescription('bs-session-timeout', 'countdown') },
+        savedMessage: { control: 'text', description: propDescription('bs-session-timeout', 'savedMessage') },
+        accountName: { control: 'text', description: propDescription('bs-session-timeout', 'accountName') },
+        accountEmail: { control: 'text', description: propDescription('bs-session-timeout', 'accountEmail') },
+        passwordError: { control: 'text', description: propDescription('bs-session-timeout', 'passwordError') },
+    },
+    args: {
+        type: 'warning',
+        secondsLeft: 112,
+        totalSeconds: 335,
+        countdown: false,
+        savedMessage: 'Your draft of INV-2041 is saved automatically.',
+        accountName: 'Mette Jensen',
+        accountEmail: 'mette.jensen@nordlys.no',
+        passwordError: '',
+    },
+};
+export default meta;
+export const Warning = {
+    render: args => html `
+    <bs-session-timeout
+      seconds-left=${args.secondsLeft}
+      total-seconds=${args.totalSeconds}
+      ?countdown=${args.countdown}
+      saved-message=${args.savedMessage}
+      description="For your security, we sign you out after 30 minutes without activity."
+    ></bs-session-timeout>
+  `,
+};
+export const LiveCountdown = {
+    name: 'Live countdown',
+    args: { secondsLeft: 20, totalSeconds: 20, countdown: true },
+};
+export const SignedOut = {
+    name: 'Signed out',
+    args: { type: 'signed-out' },
+    render: args => html `
+    <bs-session-timeout
+      type="signed-out"
+      account-name=${args.accountName}
+      account-email=${args.accountEmail}
+      description="You were inactive for 30 minutes. Your draft of INV-2041 was saved and will be there when you sign in."
+    ></bs-session-timeout>
+  `,
+};
+export const ConfirmIdentity = {
+    name: 'Confirm identity',
+    args: { type: 'confirm-identity' },
+    render: args => html `
+    <bs-session-timeout
+      type="confirm-identity"
+      password-error=${ifDefined(args.passwordError || undefined)}
+      description="Changing bank account details needs a fresh sign-in. Signed in as mette.jensen@nordlys.no."
+    ></bs-session-timeout>
+  `,
+};
+export const WrongPassword = {
+    name: 'Wrong password',
+    args: { type: 'confirm-identity', passwordError: 'That password isn’t right. Try again.' },
+};

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

@@ -229,7 +229,7 @@ export class BsSlider {
     render() {
         const isRange = this.type === 'range';
         const rootClasses = ['bs-slider', this.disabled ? 'bs-slider--disabled' : ''].filter(Boolean).join(' ');
-        return (h("div", { key: 'f2db9b3d88d97f4183227dca165e4943586100b7', class: rootClasses }, this.showLabel && (h("div", { key: 'b5898da538670e481c1e0c0120f8ac67fec49ffe', class: "bs-slider__header" }, h("span", { key: '3f0257ee85b18fdce7a51825f9e3005b7c8c8985', 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: '74adbfd1c596cb0de4bf484cd2ffbc2f283d9074', class: "bs-slider__row" }, this.showLabel && (h("span", { key: '334f03095f5246d4156e7853a1b9d3ddcb594f0a', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: '5173a19292bd029121cf9412a2087383700ec61b', part: "bound", class: "bs-slider__bound" }, this.max)))));
+        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)))));
     }
     static get is() { return "bs-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -66,6 +66,26 @@ describe('bs-snackbar', () => {
         });
     });
     describe('aria-live', () => {
+        it('shows the close button by default and hides it with hideClose', async () => {
+            const a = await render(h("bs-snackbar", null, "Saved"));
+            expect(a.root.shadowRoot.querySelector('[part="close"]')).not.toBeNull();
+            const b = await render(h("bs-snackbar", { hideClose: true }, "Saved"));
+            expect(b.root.shadowRoot.querySelector('[part="close"]')).toBeNull();
+        });
+        it('uses the variant-matched action button unless actionVariant is set', async () => {
+            const a = await render(h("bs-snackbar", { actionLabel: "Undo" }, "Saved"));
+            expect(a.root.shadowRoot.querySelector('[part="action"]').variant).toBe('outlined');
+            const b = await render(h("bs-snackbar", { actionLabel: "Undo", actionVariant: "subtle" }, "Saved"));
+            expect(b.root.shadowRoot.querySelector('[part="action"]').variant).toBe('subtle');
+        });
+        it('has a 24px icon by default and takes --bs-snackbar-icon-size', async () => {
+            const a = await render(h("bs-snackbar", null, "Saved"));
+            expect(a.root.shadowRoot.querySelector('[part="icon"]').getBoundingClientRect().width).toBe(24);
+            const b = await render(h("bs-snackbar", { style: { '--bs-snackbar-icon-size': '32px' } }, "Saved"));
+            const icon = b.root.shadowRoot.querySelector('[part="icon"]');
+            expect(icon.getBoundingClientRect().width).toBe(32);
+            expect(icon.querySelector('svg').getBoundingClientRect().width).toBe(32);
+        });
         it('uses aria-live="polite" for non-error variants', async () => {
             const { root } = await render(h("bs-snackbar", { variant: "success" }, "Message"));
             const container = root.shadowRoot.querySelector('[part="container"]');

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

@@ -4,6 +4,7 @@
  * @prop --bs-snackbar-gap: Gap between the content area and the actions area. Aliased to --bs-spacing-100.
  * @prop --bs-snackbar-content-padding-y: Top/bottom padding of the content area. Aliased to --bs-spacing-200.
  * @prop --bs-snackbar-content-padding-x: Left padding of the content area (the bar's own left edge). Aliased to --bs-spacing-200.
+ * @prop --bs-snackbar-icon-size: Width/height of the leading icon or spinner. 24px.
  * @prop --bs-snackbar-content-gap: Gap between the icon and the message. Aliased to --bs-spacing-150.
  * @prop --bs-snackbar-font-size: Message font size. Aliased to --bs-font-size-md.
  * @prop --bs-snackbar-line-height: Message line height. Aliased to --bs-line-height-body-md.
@@ -36,6 +37,7 @@
   --bs-snackbar-content-padding-y: var(--bs-spacing-200);
   --bs-snackbar-content-padding-x: var(--bs-spacing-200);
   --bs-snackbar-content-gap: var(--bs-spacing-150);
+  --bs-snackbar-icon-size: 24px;
   --bs-snackbar-font-size: var(--bs-font-size-md);
   --bs-snackbar-line-height: var(--bs-line-height-body-md);
 
@@ -115,15 +117,15 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: var(--bs-snackbar-icon-size);
+  height: var(--bs-snackbar-icon-size);
   flex-shrink: 0;
   color: inherit;
 }
 
 .bs-snackbar__icon svg {
-  width: 24px;
-  height: 24px;
+  width: var(--bs-snackbar-icon-size);
+  height: var(--bs-snackbar-icon-size);
 }
 
 /* Same border-spin technique as bs-attachment's own upload spinner -- a light track ring plus one

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

@@ -49,6 +49,12 @@ export class BsSnackbar {
     /** Label for the optional action button (e.g. "Undo", "Retry"). Omit this prop entirely to
      * render no action button at all -- its presence, not a boolean flag, is what shows it. */
     actionLabel;
+    /** Variant of the action button. Defaults to the one that matches `variant` (outlined for `default`).
+     * Use `subtle` for a plain text action; colour it with `--bs-button-subtle-color` on `::part(action)`. */
+    actionVariant;
+    /** Hides the close button, for a confirmation that goes away on its own or whose only control is
+     * the action. A snackbar with no way to dismiss it must be removed by the consumer. */
+    hideClose = false;
     /** Fires when the action button is clicked. Ignored/never fires if `actionLabel` isn't set. */
     bsAction;
     /** Fires when the close button is clicked. This component doesn't remove itself from the DOM --
@@ -61,7 +67,7 @@ export class BsSnackbar {
         this.bsDismiss.emit();
     };
     render() {
-        return (h("div", { key: 'c84de130f993938339fd16d9f534f1da18fe6c0a', part: "container", class: `bs-snackbar bs-snackbar--${this.variant}`, role: "status", "aria-live": this.variant === 'error' ? 'assertive' : 'polite' }, h("div", { key: '0941f900229f6b3208f8268d34b0cde49e4dba22', class: "bs-snackbar__content" }, h("span", { key: 'cf89eff5ea640950573f9b610d6eff46e5d0154e', part: "icon", class: "bs-snackbar__icon", "aria-hidden": "true" }, this.loading ? h("span", { class: "bs-snackbar__spinner" }) : h(CheckCircleIcon, null)), h("span", { key: 'd4ae7e62ecaea7b53962b08d69bae435ecf0a810', part: "message", class: "bs-snackbar__message" }, h("slot", { key: 'a99ec601f27f79f42fc61cd14c0fed742d2fa334' }))), h("div", { key: 'a139c0287e2eacb26ccbd604ff0343bca23eeb5d', class: "bs-snackbar__actions" }, this.actionLabel && (h("bs-button", { key: 'f22c4a63903fdb50da087ab2c38dd076298a12ed', part: "action", variant: ACTION_VARIANT[this.variant], size: "sm", onClick: this.onAction }, this.actionLabel)), h("bs-icon-button", { key: '4cd5c8f367ee71f11dad1f6f47ff1cdf6436a764', part: "close", variant: "subtle", size: "md", ariaLabel: "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: 'a52e6af7acf7c95a54aa6cb5237f2b53e30ea601' })))));
+        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' }))))));
     }
     static get is() { return "bs-snackbar"; }
     static get encapsulation() { return "shadow"; }
@@ -141,6 +147,52 @@ export class BsSnackbar {
                 "setter": false,
                 "reflect": false,
                 "attribute": "action-label"
+            },
+            "actionVariant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsButtonVariant",
+                    "resolved": "\"error\" | \"info\" | \"neutral\" | \"outlined\" | \"primary\" | \"subtle\" | \"success\" | \"warning\"",
+                    "references": {
+                        "BsButtonVariant": {
+                            "location": "import",
+                            "path": "../bs-button/bs-button/bs-button",
+                            "id": "src/components/bs-button/bs-button/bs-button.tsx::BsButtonVariant",
+                            "referenceLocation": "BsButtonVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Variant of the action button. Defaults to the one that matches `variant` (outlined for `default`).\nUse `subtle` for a plain text action; colour it with `--bs-button-subtle-color` on `::part(action)`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "action-variant"
+            },
+            "hideClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the close button, for a confirmation that goes away on its own or whose only control is\nthe action. A snackbar with no way to dismiss it must be removed by the consumer."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-close",
+                "defaultValue": "false"
             }
         };
     }

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

@@ -51,8 +51,8 @@ export class BsSourceLink {
     };
     render() {
         const inner = [
-            h("span", { key: '5c6382ad80cc971f302da1d80af089306a612e73', class: "bs-source-link__left" }, h("span", { key: '07c8591469e23fe4304846e9282cea0a9eae3ba2', class: "bs-source-link__filename-row" }, h("span", { key: 'ffdb99816134be212cc4d30ebdbf8dd8bcdc085f', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: '475cd85bcb5caa1d3a82d08318731ef4bdf6cb60', name: "icon" }, h(FileTextIcon, { key: '6915810a89f15b823b2b744d30db5b2cefff8162' }))), h("p", { key: '14facc92c71f91701654ea2ce2f9f2ef4b980c5e', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: 'ecd7080f8bc8ce5d7e169f917aaae275ac7a474e', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: 'f1697d3e278225b26909ec1c40ce2c4cb51c884b', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: '8efe25341dc7c68ec9c66b91f5f399c9b8ed659f', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: 'cddd46792f911af65434554e56d1cb72d2b88cae', part: "version", class: "bs-source-link__version" }, this.version)))),
-            h("span", { key: '166b5070329771cd7e8f20689e5b257d3f6f1fd0', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: 'c2a820c6b36ead5f1bbfd74d84c70cb9894c8f1f' })),
+            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' })),
         ];
         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-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: 'a9c1838c549b0c3ea9cc145624bc38e9edb32a51', role: "list" }, h("slot", { key: '549a18512ad246b5988008b8d2b6a9142e5380a5', onSlotchange: this.onSlotChange })));
+        return (h(Host, { key: '8a3c0b5ce7ffd6dfc34b0c5ae602ef4bca42e33c', role: "list" }, h("slot", { key: 'fcc69d5e89dfa5f1ae7aa2ae38667a7826fee89d', 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: 'fe270c356f44c25a3a12450eec8e1a7657d4d88f', role: "listitem", class: `bs-stepper-step--${this.direction}` }, h("div", { key: '1bc833a5ca917d141078e3b69e9e455ec8d877ad', class: "bs-stepper-step__top" }, h("span", { key: 'aa91b7e91d600b08c389be456b28f4a65450d72e', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: 'e3fee594c97bf9f5d47e1b922bf9adffa1c0d438', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: '4930e7653d7c81c8fcf18920fdd0a9a0e975eee4' }), state === 'error' && h(ExclamationIcon, { key: 'ca757e769dd4411c987bf5f22b7cda904d9fd067' })), h("span", { key: '2b0621849727e355d4d0944087ff1d9eacb5b5f7', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: '0d08b9591ea2c9a967ebf85dce105f667cb86370', class: "bs-stepper-step__connector-line" }))), h("span", { key: '3bd0490ef190a4e4f33f822383be230e4e20e7dc', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: 'cf6cb4f72fcf546a954085d125a72548cfe521fe', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: 'b0ef234071983ae8c87d68440e7bfa4a491a35f5', part: "description", class: "bs-stepper-step__description" }, this.description)))));
+        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)))));
     }
     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: '37466aa7ca1b18c07b92bd7855fd974d62ad5845', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: 'f4e0073dd9a322692003593385da04a9289ea848', 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: 'f8cbdb6bb25964ba79e9cb09d82beab0c3946a14', part: "track", class: trackClasses }, h("span", { key: '7e8598698e08a95d1ada9829264df99abd507d81', part: "knob", class: knobClasses })), h("span", { key: '11d464eaf95f555f3874524adc5fb2373b1fd056', part: "label", class: "bs-switch__label" }, h("slot", { key: '2409cb732d23f613c2595fa62e9fd7539bb2041e' }))));
+        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' }))));
     }
     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: '0d6927b0b39a7d84add287e6473681e5052b5f2d', 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: '866660f0f79927cd018df42286719f2f48262cbb', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: '58e11c8a0a57646644cb0b7c950d73f5cee52310', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '38d2e1df2b4e494f68d3c4b9ea34d7a317401953', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: '51fb6ec04479b18af787bca4e64f8105a0b19311', onSlotchange: this.onLabelSlotchange }))));
+        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 }))));
     }
     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: '383cf44dfcf1feb5404e6a392318c8ce5a8a1178', 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: '8b3a6b9ee663c2957c206024478ee76abf4fb905', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: 'b46fd73bac532345e747bb214f8c91f32b04810c', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '9d3e69f4dc96e20a327ebccdbdf934f07a4892c0', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: 'e724d44bec76845b64e8e0ebb5c883dc47ff11a3', onSlotchange: this.onLabelSlotchange })), h("span", { key: '1cb4e5a8056ebac8b1b098c350c4a5d89bd2968a', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: '46a6bbf2c8702645b85062012294eedf3facceac', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: '38845ccafeddfe79af64c3e291197e88bbced150', part: "indicator", class: "bs-tab__indicator" })));
+        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" })));
     }
     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: '251521d36dcf4d6960df344285bc9a060ff87abb', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: '02216f048eaedb13f00891c30e1c49d15a509c1d', onSlotchange: () => this.syncRovingTabindex() })));
+        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() })));
     }
     static get is() { return "bs-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,141 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+const sr = (root) => root.shadowRoot;
+const spin = (root, label) => sr(root).querySelector(`[role="spinbutton"][aria-label="${label}"]`);
+const text = (root, label) => spin(root, label).textContent;
+const key = (el, k) => el.dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true }));
+const steps = (root) => Array.from(sr(root).querySelectorAll('[part="step"]'));
+// order: hour up, hour down, minute up, minute down
+const period = (root) => sr(root).querySelector('[part="period"]');
+describe('bs-timepicker', () => {
+    it('defaults to 12h, 12:00 AM with no value', async () => {
+        const { root } = await render(h("bs-timepicker", null));
+        expect(text(root, 'Hour')).toBe('12');
+        expect(text(root, 'Minute')).toBe('00');
+        expect(period(root).value).toBe('AM');
+    });
+    it('shows a 24-hour value as 12h with PM', async () => {
+        const { root } = await render(h("bs-timepicker", { value: "14:05" }));
+        expect(text(root, 'Hour')).toBe('02');
+        expect(text(root, 'Minute')).toBe('05');
+        expect(period(root).value).toBe('PM');
+    });
+    it('shows 00-23 and no AM/PM in 24h format', async () => {
+        const { root } = await render(h("bs-timepicker", { format: "24h", value: "14:05" }));
+        expect(text(root, 'Hour')).toBe('14');
+        expect(period(root)).toBeNull();
+    });
+    it('has hour/minute spinbuttons with ARIA values', async () => {
+        const { root } = await render(h("bs-timepicker", { format: "24h", value: "14:05" }));
+        const hourEl = spin(root, 'Hour');
+        expect(hourEl.getAttribute('aria-valuenow')).toBe('14');
+        expect(hourEl.getAttribute('aria-valuemin')).toBe('0');
+        expect(hourEl.getAttribute('aria-valuemax')).toBe('23');
+        expect(spin(root, 'Minute').getAttribute('aria-valuemax')).toBe('59');
+    });
+    it('caret buttons step and wrap the hour (12h: 12 -> 1, keeps PM)', async () => {
+        const { root, waitForChanges } = await render(h("bs-timepicker", { value: "12:00" }));
+        expect(period(root).value).toBe('PM');
+        steps(root)[0].click();
+        await waitForChanges();
+        expect(text(root, 'Hour')).toBe('01');
+        expect(period(root).value).toBe('PM');
+        steps(root)[1].click();
+        await waitForChanges();
+        expect(text(root, 'Hour')).toBe('12');
+    });
+    it('minutes wrap without touching the hour', async () => {
+        const { root, waitForChanges } = await render(h("bs-timepicker", { format: "24h", value: "09:59" }));
+        steps(root)[2].click();
+        await waitForChanges();
+        expect(text(root, 'Minute')).toBe('00');
+        expect(text(root, 'Hour')).toBe('09');
+    });
+    it('honours minuteStep', async () => {
+        const { root, waitForChanges } = await render(h("bs-timepicker", { format: "24h", value: "09:00", minuteStep: 15 }));
+        steps(root)[2].click();
+        await waitForChanges();
+        expect(text(root, 'Minute')).toBe('15');
+        steps(root)[3].click();
+        steps(root)[3].click();
+        await waitForChanges();
+        expect(text(root, 'Minute')).toBe('45');
+    });
+    it('ArrowUp/ArrowDown/Home/End work on a focused value', async () => {
+        const { root, waitForChanges } = await render(h("bs-timepicker", { format: "24h", value: "09:30" }));
+        key(spin(root, 'Hour'), 'ArrowUp');
+        await waitForChanges();
+        expect(text(root, 'Hour')).toBe('10');
+        key(spin(root, 'Hour'), 'End');
+        await waitForChanges();
+        expect(text(root, 'Hour')).toBe('23');
+        key(spin(root, 'Hour'), 'ArrowUp');
+        await waitForChanges();
+        expect(text(root, 'Hour')).toBe('00');
+    });
+    it('typing digits sets the value', async () => {
+        const { root, waitForChanges } = await render(h("bs-timepicker", { format: "24h", value: "00:00" }));
+        key(spin(root, 'Hour'), '1');
+        key(spin(root, 'Hour'), '7');
+        await waitForChanges();
+        expect(text(root, 'Hour')).toBe('17');
+        // 9 can't start a valid 24h hour pair beyond 9x, but 9 itself is valid.
+        key(spin(root, 'Minute'), '4');
+        key(spin(root, 'Minute'), '2');
+        await waitForChanges();
+        expect(text(root, 'Minute')).toBe('42');
+    });
+    it('the AM/PM dropdown flips the period without changing the displayed hour', async () => {
+        const { root, waitForChanges } = await render(h("bs-timepicker", { value: "09:15" }));
+        period(root).dispatchEvent(new CustomEvent('bsChange', { detail: 'PM' }));
+        await waitForChanges();
+        expect(period(root).value).toBe('PM');
+        expect(text(root, 'Hour')).toBe('09');
+    });
+    it('the 24h switch converts the display without changing the time', async () => {
+        const { root, waitForChanges } = await render(h("bs-timepicker", { value: "14:30" }));
+        sr(root).querySelector('bs-switch').dispatchEvent(new CustomEvent('bsChange', { detail: true }));
+        await waitForChanges();
+        expect(root).toEqualAttribute('format', '24h');
+        expect(text(root, 'Hour')).toBe('14');
+    });
+    it('nothing is committed until Confirm, which emits 24-hour HH:mm', async () => {
+        const { root, waitForChanges } = await render(h("bs-timepicker", { value: "09:15" }));
+        const events = [];
+        root.addEventListener('bsChange', (e) => events.push(e.detail));
+        period(root).dispatchEvent(new CustomEvent('bsChange', { detail: 'PM' }));
+        steps(root)[0].click();
+        await waitForChanges();
+        expect(root.value).toBe('09:15');
+        expect(events).toEqual([]);
+        sr(root).querySelector('[part="confirm"]').click();
+        await waitForChanges();
+        expect(events).toEqual([{ value: '22:15' }]);
+        expect(root.value).toBe('22:15');
+    });
+    it('Cancel discards the draft and emits bsCancel', async () => {
+        const { root, waitForChanges } = await render(h("bs-timepicker", { format: "24h", value: "09:15" }));
+        let cancelled = 0;
+        root.addEventListener('bsCancel', () => cancelled++);
+        steps(root)[0].click();
+        await waitForChanges();
+        expect(text(root, 'Hour')).toBe('10');
+        sr(root).querySelector('[part="cancel"]').click();
+        await waitForChanges();
+        expect(cancelled).toBe(1);
+        expect(text(root, 'Hour')).toBe('09');
+        expect(root.value).toBe('09:15');
+    });
+    it('setting value programmatically updates the display without emitting', async () => {
+        const { root, waitForChanges } = await render(h("bs-timepicker", { format: "24h", value: "09:15" }));
+        let fired = 0;
+        root.addEventListener('bsChange', () => fired++);
+        root.value = '18:45';
+        await waitForChanges();
+        expect(text(root, 'Hour')).toBe('18');
+        expect(fired).toBe(0);
+    });
+    it('ignores an invalid value', async () => {
+        const { root } = await render(h("bs-timepicker", { format: "24h", value: "25:99" }));
+        expect(text(root, 'Hour')).toBe('00');
+    });
+});