@brandsync/wc 1.8.0 → 1.10.0

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

@@ -58,4 +58,92 @@ describe('bs-tabs', () => {
         expect(first.selected).toBe(true);
         expect(second.selected).toBe(false);
     });
+    describe('value and bsChange', () => {
+        const btn = (el) => el.shadowRoot.querySelector('button');
+        const key = (el, k) => el.dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true, composed: true, cancelable: true }));
+        const group = () => (h("bs-tabs", null, h("bs-tab", { value: "overview" }, "Overview"), h("bs-tab", { value: "details" }, "Details"), h("bs-tab", { value: "history" }, "History")));
+        it('a click selects the tab, updates the group value and emits bsChange with it', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(group());
+            const spy = spyOnEvent('bsChange');
+            const tabs = Array.from(root.querySelectorAll('bs-tab'));
+            btn(tabs[1]).click();
+            await waitForChanges();
+            expect(root.value).toBe('details');
+            expect(root.getAttribute('value')).toBe('details'); // reflected
+            expect(tabs[1].selected).toBe(true);
+            expect(spy).toHaveReceivedEventTimes(1);
+            expect(spy).toHaveReceivedEventDetail({ value: 'details' });
+        });
+        it('does not emit again when the already-selected tab is clicked', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(group());
+            const spy = spyOnEvent('bsChange');
+            const tabs = Array.from(root.querySelectorAll('bs-tab'));
+            btn(tabs[1]).click();
+            await waitForChanges();
+            btn(tabs[1]).click();
+            await waitForChanges();
+            expect(spy).toHaveReceivedEventTimes(1);
+        });
+        it('a tab without a value is identified by its zero-based index as a string', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-tabs", null, h("bs-tab", null, "One"), h("bs-tab", null, "Two")));
+            const spy = spyOnEvent('bsChange');
+            btn(root.querySelectorAll('bs-tab')[1]).click();
+            await waitForChanges();
+            expect(spy).toHaveReceivedEventDetail({ value: '1' });
+            expect(root.value).toBe('1');
+        });
+        it('an initial value selects the matching tab on load', async () => {
+            const { root, waitForChanges } = await render(h("bs-tabs", { value: "history" }, h("bs-tab", { value: "overview" }, "Overview"), h("bs-tab", { value: "details" }, "Details"), h("bs-tab", { value: "history" }, "History")));
+            await waitForChanges();
+            const tabs = Array.from(root.querySelectorAll('bs-tab'));
+            expect(tabs.map(t => t.selected)).toEqual([false, false, true]);
+            // roving tabindex follows the selection
+            expect(btn(tabs[2]).tabIndex).toBe(0);
+            expect(btn(tabs[0]).tabIndex).toBe(-1);
+        });
+        it('setting value from outside selects the matching tab and does NOT emit bsChange', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(group());
+            const spy = spyOnEvent('bsChange');
+            root.value = 'details';
+            await waitForChanges();
+            const tabs = Array.from(root.querySelectorAll('bs-tab'));
+            expect(tabs.map(t => t.selected)).toEqual([false, true, false]);
+            expect(spy).not.toHaveReceivedEvent();
+        });
+        it('with no value set, reports the tab the consumer already marked selected (without emitting)', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-tabs", null, h("bs-tab", { value: "a" }, "A"), h("bs-tab", { value: "b", selected: true }, "B")));
+            const spy = spyOnEvent('bsChange');
+            await waitForChanges();
+            expect(root.value).toBe('b');
+            expect(spy).not.toHaveReceivedEvent();
+        });
+        it('keyboard navigation emits bsChange too (arrow keys select the next tab)', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(group());
+            const spy = spyOnEvent('bsChange');
+            const tabs = Array.from(root.querySelectorAll('bs-tab'));
+            btn(tabs[0]).click();
+            await waitForChanges();
+            key(btn(tabs[0]), 'ArrowRight');
+            await waitForChanges();
+            expect(spy).toHaveReceivedEventDetail({ value: 'details' });
+        });
+        it('still emits bsSelect on the tab itself', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(group());
+            const spy = spyOnEvent('bsSelect');
+            btn(root.querySelectorAll('bs-tab')[2]).click();
+            await waitForChanges();
+            expect(spy).toHaveReceivedEventTimes(1);
+        });
+        it('works for bs-inline-tab groups', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-tabs", { type: "bs-inline-tab" }, h("bs-inline-tab", { value: "x" }, "X"), h("bs-inline-tab", { value: "y" }, "Y")));
+            const spy = spyOnEvent('bsChange');
+            btn(root.querySelectorAll('bs-inline-tab')[1]).click();
+            await waitForChanges();
+            expect(spy).toHaveReceivedEventDetail({ value: 'y' });
+        });
+        it('a tab\'s value prop is reflected as an attribute', async () => {
+            const { root } = await render(group());
+            expect(root.querySelector('bs-tab').getAttribute('value')).toBe('overview');
+        });
+    });
 });

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

@@ -35,6 +35,16 @@ export class BsTabs {
     /** Layout direction of the tab bar itself. Sets `aria-orientation` on the internal wrapper and
      * switches `flex-direction`. */
     orientation = 'horizontal';
+    /** The selected tab's `value`. Mutable and reflected: it follows the user's selection, and
+     * setting it from outside (attribute or property) selects the matching tab -- without emitting
+     * `bsChange`, which only fires for user-driven changes. A tab's value is its own `value` prop,
+     * or, for a tab without one, its zero-based position in the group as a string (`"0"`, `"1"`...).
+     * If unset, it is read from whichever tab is already `selected` once the group loads. */
+    value;
+    /** Fires when the user selects a different tab (click, or arrow/Home/End), with the new
+     * `value`. Does not fire when `value` is set programmatically. `bsSelect` on the individual tab
+     * still fires as before. */
+    bsChange;
     /**
      * Catches `bsSelect` bubbling up from any slotted `<bs-tab>`/`<bs-inline-tab>` (Stencil's
      * `@Event()` defaults to `bubbles: true, composed: true`, and `@Listen` without a target listens
@@ -43,15 +53,46 @@ export class BsTabs {
      * `if (this.disabled) return;`), so no special-casing is needed here.
      */
     onTabSelect(ev) {
-        const tabs = this.el.querySelectorAll(':scope > bs-tab, :scope > bs-inline-tab');
+        const tabs = this.tabs();
         tabs.forEach(tab => {
             tab.selected = tab === ev.target;
         });
         this.syncRovingTabindex();
+        const index = tabs.findIndex(tab => tab === ev.target);
+        if (index === -1)
+            return;
+        const value = this.tabValue(tabs[index], index);
+        if (value !== this.value) {
+            this.value = value;
+            this.bsChange.emit({ value });
+        }
     }
     componentDidLoad() {
+        if (this.value !== undefined) {
+            this.applyValue();
+        }
+        else {
+            // Uncontrolled: report whichever tab the consumer already marked `selected`.
+            const tabs = this.tabs();
+            const index = tabs.findIndex(t => t.selected);
+            if (index !== -1)
+                this.value = this.tabValue(tabs[index], index);
+        }
         this.syncRovingTabindex();
     }
+    tabValue(tab, index) {
+        return tab.value ?? String(index);
+    }
+    /** Selects the tab whose value matches `this.value` (and deselects the rest). */
+    applyValue() {
+        this.tabs().forEach((tab, i) => {
+            tab.selected = this.tabValue(tab, i) === this.value;
+        });
+        this.syncRovingTabindex();
+    }
+    onValueChange() {
+        this.applyValue();
+    }
     syncRovingTabindex() {
         const tabs = this.tabs();
         const anySelected = tabs.some(t => t.selected);
@@ -94,7 +135,7 @@ export class BsTabs {
     }
     render() {
         const vertical = this.orientation === 'vertical';
-        return (h("div", { key: '81b3b46d54d4acc074b0c59d0da5e3e971e7b62e', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: 'ba296a99062629de3e331cd7de1ebc41548c77f9', onSlotchange: () => this.syncRovingTabindex() })));
+        return (h("div", { key: 'b47d3502305490c9098b825f1eb8c60f45dad5d8', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: '133cf0b2ea93354a664bb304579fa59d85e53edf', onSlotchange: () => this.syncRovingTabindex() })));
     }
     static get is() { return "bs-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -161,12 +202,52 @@ export class BsTabs {
                 "reflect": false,
                 "attribute": "orientation",
                 "defaultValue": "'horizontal'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected tab's `value`. Mutable and reflected: it follows the user's selection, and\nsetting it from outside (attribute or property) selects the matching tab -- without emitting\n`bsChange`, which only fires for user-driven changes. A tab's value is its own `value` prop,\nor, for a tab without one, its zero-based position in the group as a string (`\"0\"`, `\"1\"`...).\nIf unset, it is read from whichever tab is already `selected` once the group loads."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
             }
         };
     }
+    static get events() {
+        return [{
+                "method": "bsChange",
+                "name": "bsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the user selects a different tab (click, or arrow/Home/End), with the new\n`value`. Does not fire when `value` is set programmatically. `bsSelect` on the individual tab\nstill fires as before."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }];
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "value",
+                "methodName": "onValueChange"
+            }, {
                 "propName": "orientation",
                 "methodName": "syncRovingTabindex"
             }];

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

@@ -37,3 +37,27 @@ export const InlineTabGroup = {
 export const Vertical = {
     args: { orientation: 'vertical' },
 };
+// The group's `value` follows the selection, and `bsChange` reports user-driven changes: the panel
+// below switches in response to it, with no per-tab selection wiring.
+export const WithValueAndPanels = {
+    name: 'With value and panels',
+    render: () => {
+        const panels = {
+            overview: 'Overview content',
+            details: 'Details content',
+            history: 'History content',
+        };
+        const onChange = (ev) => {
+            const panel = ev.currentTarget.nextElementSibling;
+            panel.textContent = panels[ev.detail.value];
+        };
+        return html `
+      <bs-tabs value="overview" @bsChange=${onChange}>
+        <bs-tab value="overview">Overview</bs-tab>
+        <bs-tab value="details">Details</bs-tab>
+        <bs-tab value="history">History</bs-tab>
+      </bs-tabs>
+      <p role="tabpanel" style="margin: 16px 0 0;">Overview content</p>
+    `;
+    },
+};

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');
+    });
+});

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

@@ -0,0 +1,200 @@
+/**
+ * @prop --bs-timepicker-width: Width of the card. 294px, exact match to Figma.
+ * @prop --bs-timepicker-bg: Card background. Aliased to --bs-surface-raised.
+ * @prop --bs-timepicker-radius: Card corner radius. Aliased to --bs-border-radius-100.
+ * @prop --bs-timepicker-padding-y: Vertical padding of the card. Aliased to --bs-spacing-200.
+ * @prop --bs-timepicker-padding-x: Horizontal padding of each section. Aliased to --bs-spacing-200.
+ * @prop --bs-timepicker-gap: Vertical gap between sections. Aliased to --bs-spacing-200.
+ * @prop --bs-timepicker-shadow: Card shadow. Aliased to --bs-shadow-md.
+ * @prop --bs-timepicker-title-size: Heading font size. Aliased to --bs-font-size-2xl.
+ * @prop --bs-timepicker-title-line-height: Heading line height. Aliased to --bs-line-height-heading-h6.
+ * @prop --bs-timepicker-color: Heading and value color. Aliased to --bs-text-default.
+ * @prop --bs-timepicker-color-secondary: Color of the 24h label and the step carets. Aliased to --bs-text-secondary.
+ * @prop --bs-timepicker-divider: Divider color. Aliased to --bs-border-neutral-container.
+ * @prop --bs-timepicker-cell-size: Width/height of a step button and a value. Aliased to --bs-spacing-550 (44px).
+ * @prop --bs-timepicker-cell-radius: Corner radius of a step button. Aliased to --bs-border-radius-100.
+ * @prop --bs-timepicker-value-radius: Corner radius of the focus ring on a value. Aliased to --bs-border-radius-50.
+ * @prop --bs-timepicker-hover: Background of a step button or value on hover. Aliased to --bs-surface-hover.
+ * @prop --bs-timepicker-pressed: Background of a step button or value when pressed. Aliased to --bs-surface-pressed.
+ * @prop --bs-timepicker-focus-ring-color: Focus ring color. Aliased to --bs-border-neutral-container-focused.
+ */
+:host {
+  display: inline-block;
+
+  --bs-timepicker-width: 294px;
+  --bs-timepicker-bg: var(--bs-surface-raised);
+  --bs-timepicker-radius: var(--bs-border-radius-100);
+  --bs-timepicker-padding-y: var(--bs-spacing-200);
+  --bs-timepicker-padding-x: var(--bs-spacing-200);
+  --bs-timepicker-gap: var(--bs-spacing-200);
+  --bs-timepicker-shadow: var(--bs-shadow-md);
+
+  --bs-timepicker-title-size: var(--bs-font-size-2xl);
+  --bs-timepicker-title-line-height: var(--bs-line-height-heading-h6);
+  --bs-timepicker-color: var(--bs-text-default);
+  --bs-timepicker-color-secondary: var(--bs-text-secondary);
+  --bs-timepicker-divider: var(--bs-border-neutral-container);
+
+  --bs-timepicker-cell-size: var(--bs-spacing-550);
+  --bs-timepicker-cell-radius: var(--bs-border-radius-100);
+  --bs-timepicker-value-radius: var(--bs-border-radius-50);
+  --bs-timepicker-hover: var(--bs-surface-hover);
+  --bs-timepicker-pressed: var(--bs-surface-pressed);
+  --bs-timepicker-focus-ring-color: var(--bs-border-neutral-container-focused);
+}
+
+.bs-timepicker {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-timepicker-gap);
+  width: var(--bs-timepicker-width);
+  max-width: 100%;
+  padding: var(--bs-timepicker-padding-y) 0;
+  border-radius: var(--bs-timepicker-radius);
+  background: var(--bs-timepicker-bg);
+  box-shadow: var(--bs-timepicker-shadow);
+  color: var(--bs-timepicker-color);
+  font-family: inherit;
+  font-size: var(--bs-font-size-md);
+}
+
+.bs-timepicker__header {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+  padding: 0 var(--bs-timepicker-padding-x);
+}
+
+.bs-timepicker__title {
+  flex: 1 1 0;
+  min-width: 0;
+  font-size: var(--bs-timepicker-title-size);
+  font-weight: var(--bs-font-weight-bold);
+  line-height: calc(var(--bs-timepicker-title-line-height) * 1px);
+}
+
+.bs-timepicker__format {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-50);
+  color: var(--bs-timepicker-color-secondary);
+  line-height: calc(var(--bs-line-height-body-md) * 1px);
+}
+
+/* Full-bleed: the divider ignores the section padding, like the Figma's. */
+.bs-timepicker__divider {
+  height: 1px;
+  background: var(--bs-timepicker-divider);
+}
+
+.bs-timepicker__selector {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--bs-spacing-200);
+  padding: 0 var(--bs-timepicker-padding-x);
+}
+
+.bs-timepicker__spinner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+  width: var(--bs-timepicker-cell-size);
+}
+
+.bs-timepicker__step,
+.bs-timepicker__value {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--bs-timepicker-cell-size);
+  height: var(--bs-timepicker-cell-size);
+  padding: 0;
+  border: none;
+  background: transparent;
+  font-family: inherit;
+}
+
+.bs-timepicker__step {
+  border-radius: var(--bs-timepicker-cell-radius);
+  color: var(--bs-timepicker-color-secondary);
+  cursor: pointer;
+}
+
+.bs-timepicker__step svg {
+  width: 24px;
+  height: 24px;
+}
+
+.bs-timepicker__value {
+  border-radius: var(--bs-timepicker-value-radius);
+  color: var(--bs-timepicker-color);
+  font-size: var(--bs-timepicker-title-size);
+  font-weight: var(--bs-font-weight-bold);
+  line-height: calc(var(--bs-timepicker-title-line-height) * 1px);
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  user-select: none;
+}
+
+.bs-timepicker__step:hover,
+.bs-timepicker__value:hover {
+  background: var(--bs-timepicker-hover);
+}
+
+.bs-timepicker__step:active,
+.bs-timepicker__value:active {
+  background: var(--bs-timepicker-pressed);
+}
+
+/* Figma focus state: a 2px ring flush against the block's edge. */
+.bs-timepicker__step:focus-visible,
+.bs-timepicker__value:focus-visible {
+  outline: 2px solid var(--bs-timepicker-focus-ring-color);
+  outline-offset: 0;
+}
+
+.bs-timepicker__separator {
+  display: flex;
+  align-items: center;
+  color: var(--bs-timepicker-color);
+}
+
+.bs-timepicker__separator svg {
+  width: 4px;
+  height: 32px;
+}
+
+/* The Figma has no visible label on the AM/PM field; bs-input only names its field through its
+   label, so keep the label for assistive tech and hide it visually. */
+.bs-timepicker__period::part(label) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.bs-timepicker__period {
+  width: 112px;
+}
+
+/* bs-input's dropdown trigger is a read-only text input: no text caret, and a pointer cursor. */
+.bs-timepicker__period::part(control) {
+  caret-color: transparent;
+  cursor: pointer;
+  text-overflow: clip;
+}
+
+.bs-timepicker__footer {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  gap: var(--bs-spacing-100);
+  padding: 0 var(--bs-timepicker-padding-x);
+}