@brandsync/wc 1.19.0 → 1.20.0

package/dist/collection/components/bs-icon/icon-registry.js

@@ -0,0 +1,58 @@
+/**
+ * Named icon registry for `bs-icon`.
+ *
+ * Each entry is the *inner* SVG markup (paths, circles, ...) of a 24x24 icon drawn with
+ * `stroke="currentColor"` -- `bs-icon` supplies the `<svg>` wrapper (viewBox, stroke width, caps).
+ * The registry lives on `globalThis` so the lazy-loaded build, the custom-elements build and any
+ * consumer that imports `registerIcons` all share one copy.
+ */
+const KEY = '__bsIconRegistry';
+/*
+ * Phosphor Icons (https://phosphoricons.com), MIT License, (c) 2020-present Phosphor Icons.
+ * Inner SVG markup copied from @phosphor-icons/core (regular weight; `star-fill` is the fill weight).
+ * Entries of the `{ viewBox, body }` form are rendered filled with `currentColor`.
+ */
+const PHOSPHOR = {
+    'user': { viewBox: '0 0 256 256', body: '<path d="M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z"/>' },
+    'star': { viewBox: '0 0 256 256', body: '<path d="M239.18,97.26A16.38,16.38,0,0,0,224.92,86l-59-4.76L143.14,26.15a16.36,16.36,0,0,0-30.27,0L90.11,81.23,31.08,86a16.46,16.46,0,0,0-9.37,28.86l45,38.83L53,211.75a16.38,16.38,0,0,0,24.5,17.82L128,198.49l50.53,31.08A16.4,16.4,0,0,0,203,211.75l-13.76-58.07,45-38.83A16.43,16.43,0,0,0,239.18,97.26Zm-15.34,5.47-48.7,42a8,8,0,0,0-2.56,7.91l14.88,62.8a.37.37,0,0,1-.17.48c-.18.14-.23.11-.38,0l-54.72-33.65a8,8,0,0,0-8.38,0L69.09,215.94c-.15.09-.19.12-.38,0a.37.37,0,0,1-.17-.48l14.88-62.8a8,8,0,0,0-2.56-7.91l-48.7-42c-.12-.1-.23-.19-.13-.5s.18-.27.33-.29l63.92-5.16A8,8,0,0,0,103,91.86l24.62-59.61c.08-.17.11-.25.35-.25s.27.08.35.25L153,91.86a8,8,0,0,0,6.75,4.92l63.92,5.16c.15,0,.24,0,.33.29S224,102.63,223.84,102.73Z"/>' },
+    'star-fill': { viewBox: '0 0 256 256', body: '<path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z"/>' },
+    'x': { viewBox: '0 0 256 256', body: '<path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/>' },
+    'paper-plane-right': { viewBox: '0 0 256 256', body: '<path d="M231.87,114l-168-95.89A16,16,0,0,0,40.92,37.34L71.55,128,40.92,218.67A16,16,0,0,0,56,240a16.15,16.15,0,0,0,7.93-2.1l167.92-96.05a16,16,0,0,0,.05-27.89ZM56,224a.56.56,0,0,0,0-.12L85.74,136H144a8,8,0,0,0,0-16H85.74L56.06,32.16A.46.46,0,0,0,56,32l168,95.83Z"/>' },
+    'note-pencil': { viewBox: '0 0 256 256', body: '<path d="M229.66,58.34l-32-32a8,8,0,0,0-11.32,0l-96,96A8,8,0,0,0,88,128v32a8,8,0,0,0,8,8h32a8,8,0,0,0,5.66-2.34l96-96A8,8,0,0,0,229.66,58.34ZM124.69,152H104V131.31l64-64L188.69,88ZM200,76.69,179.31,56,192,43.31,212.69,64ZM224,128v80a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32h80a8,8,0,0,1,0,16H48V208H208V128a8,8,0,0,1,16,0Z"/>' },
+    'clock-counter-clockwise': { viewBox: '0 0 256 256', body: '<path d="M136,80v43.47l36.12,21.67a8,8,0,0,1-8.24,13.72l-40-24A8,8,0,0,1,120,128V80a8,8,0,0,1,16,0Zm-8-48A95.44,95.44,0,0,0,60.08,60.15C52.81,67.51,46.35,74.59,40,82V64a8,8,0,0,0-16,0v40a8,8,0,0,0,8,8H72a8,8,0,0,0,0-16H49c7.15-8.42,14.27-16.35,22.39-24.57a80,80,0,1,1,1.66,114.75,8,8,0,1,0-11,11.64A96,96,0,1,0,128,32Z"/>' },
+    'arrows-out-simple': { viewBox: '0 0 256 256', body: '<path d="M216,48V96a8,8,0,0,1-16,0V67.31l-50.34,50.35a8,8,0,0,1-11.32-11.32L188.69,56H160a8,8,0,0,1,0-16h48A8,8,0,0,1,216,48ZM106.34,138.34,56,188.69V160a8,8,0,0,0-16,0v48a8,8,0,0,0,8,8H96a8,8,0,0,0,0-16H67.31l50.35-50.34a8,8,0,0,0-11.32-11.32Z"/>' },
+};
+const BUILT_IN = {
+    ...PHOSPHOR,
+    menu: '<path d="M4 6H20"/><path d="M4 12H20"/><path d="M4 18H20"/>',
+    'arrow-right': '<path d="M5 12H19"/><path d="M13 6L19 12L13 18"/>',
+    'arrow-left': '<path d="M19 12H5"/><path d="M11 6L5 12L11 18"/>',
+    check: '<path d="M5 12.5L10 17.5L19 7.5"/>',
+    close: '<path d="M6 6L18 18"/><path d="M18 6L6 18"/>',
+    'chevron-down': '<path d="M6 9L12 15L18 9"/>',
+    'external-link': '<path d="M14 4H20V10"/><path d="M20 4L11 13"/><path d="M18 14V19H5V6H10"/>',
+    copy: '<rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V6C5 5.4 5.4 5 6 5H15"/>',
+    search: '<circle cx="11" cy="11" r="6.5"/><path d="M16 16L20 20"/>',
+};
+function registry() {
+    const g = globalThis;
+    if (!g[KEY])
+        g[KEY] = { ...BUILT_IN };
+    return g[KEY];
+}
+/**
+ * Register (or replace) named icons. Values are inner SVG markup for a 24x24 viewBox using
+ * `currentColor` strokes, or `{ viewBox, body }` for filled glyphs on another grid (rendered with `fill="currentColor"`). Only register markup you trust: it is inserted as-is.
+ * Already-rendered `bs-icon`s pick up new names on their next render.
+ */
+export function registerIcons(icons) {
+    Object.assign(registry(), icons);
+}
+/** The entry (inner SVG markup string, or `{ viewBox, body }`) registered under `name`, or undefined. */
+export function getIcon(name) {
+    return name ? registry()[name] : undefined;
+}
+/** All registered icon names. */
+export function iconNames() {
+    return Object.keys(registry());
+}

package/dist/collection/components/bs-icon-tile/bs-icon-tile.js

@@ -46,8 +46,8 @@ export class BsIconTile {
     render() {
         const labelled = !!this.label;
         return [
-            h("div", { key: '72226f2004fa4334e1b270d790e182b0c5b9dd05', part: "container", class: "bs-icon-tile", role: labelled ? 'img' : undefined, "aria-label": labelled ? this.label : undefined, "aria-hidden": labelled ? undefined : 'true' }, h("span", { key: '126fdd0362b424918cff1e84d95a40b529693a57', part: "icon", class: "bs-icon-tile__icon" }, h("slot", { key: '7d5ea3f933dd8fada375e98110ceddc55176c792', onSlotchange: (ev) => (this.hasCustomIcon = hasContent(ev.target)) }), !this.hasCustomIcon && (GLYPHS[this.intent] ?? GLYPHS.default))),
-            h("span", { key: '7902e66e2e74303c43dae40fae7993b71dff7ace', part: "text", class: { 'bs-icon-tile__text': true, 'bs-icon-tile__text--visible': this.hasText } }, h("slot", { key: '4a97955f0d4aa46206d85209fa1c8cde20c664aa', name: "text", onSlotchange: (ev) => (this.hasText = ev.target.assignedNodes().length > 0) })),
+            h("div", { key: '312539518cebf4f02edfd480fc56899b5561203d', part: "container", class: "bs-icon-tile", role: labelled ? 'img' : undefined, "aria-label": labelled ? this.label : undefined, "aria-hidden": labelled ? undefined : 'true' }, h("span", { key: '451991c16cba6afd20f4029fe39c607c09564119', part: "icon", class: "bs-icon-tile__icon" }, h("slot", { key: 'db458731df94f9abb079d1c432105baa482b5ae4', onSlotchange: (ev) => (this.hasCustomIcon = hasContent(ev.target)) }), !this.hasCustomIcon && (GLYPHS[this.intent] ?? GLYPHS.default))),
+            h("span", { key: 'cb8186734c1378b0f4d0ae16e1113bd9a82e5930', part: "text", class: { 'bs-icon-tile__text': true, 'bs-icon-tile__text--visible': this.hasText } }, h("slot", { key: 'ad2416e6a042634eca44acb5d8768754343900b5', name: "text", onSlotchange: (ev) => (this.hasText = ev.target.assignedNodes().length > 0) })),
         ];
     }
     static get is() { return "bs-icon-tile"; }

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

@@ -1,4 +1,5 @@
 import { render, h, describe, it, expect } from "@stencil/vitest";
+import { vi } from "vitest";
 describe('bs-input', () => {
     it('renders a native text input with an empty value by default', async () => {
         const { root } = await render(h("bs-input", null));
@@ -276,27 +277,141 @@ describe('bs-input', () => {
             expect(root).not.toHaveAttribute('open');
         });
     });
+    // Shared helpers for the select / initials-title / country pickers (trigger button + in-shadow listbox).
+    const pickerKey = (root, k, sel = '[role="combobox"]') => root.shadowRoot.querySelector(sel).dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true, composed: true, cancelable: true }));
+    const selectOpts = [
+        { label: 'One', value: '1' },
+        { label: 'Two', value: '2' },
+        { label: 'Three', value: '3' },
+    ];
+    const countries = [
+        { code: 'DK', label: 'Denmark', flagIcon: '\u{1F1E9}\u{1F1F0}' },
+        { code: 'US', label: 'United States', flagIcon: '\u{1F1FA}\u{1F1F8}' },
+        { code: 'GB', label: 'United Kingdom', flagIcon: '\u{1F1EC}\u{1F1E7}' },
+    ];
     describe('type="select"', () => {
-        it('renders a native select with an option per entry', async () => {
-            const { root } = await render(h("bs-input", { type: "select", options: [
-                    { label: 'One', value: '1' },
-                    { label: 'Two', value: '2' },
-                ] }));
-            const select = root.shadowRoot.querySelector('select');
-            const options = select.querySelectorAll('option');
-            expect(options.length).toBe(2);
-            expect(options[1]).toHaveTextContent('Two');
-        });
-        it('emits bsChange with the selected value on change', async () => {
-            const { root, spyOnEvent } = await render(h("bs-input", { type: "select", options: [
-                    { label: 'One', value: '1' },
-                    { label: 'Two', value: '2' },
-                ] }));
-            const bsChangeSpy = spyOnEvent('bsChange');
-            const select = root.shadowRoot.querySelector('select');
-            select.value = '2';
-            select.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-            expect(bsChangeSpy).toHaveReceivedEventDetail('2');
+        it('renders a themed combobox trigger, not a native select, and no listbox while closed', async () => {
+            const { root } = await render(h("bs-input", { type: "select", label: "Role", options: selectOpts }));
+            expect(root.shadowRoot.querySelector('select')).toBeNull();
+            const trigger = root.shadowRoot.querySelector('button[role="combobox"]');
+            expect(trigger).toEqualAttribute('aria-haspopup', 'listbox');
+            expect(trigger).toEqualAttribute('aria-expanded', 'false');
+            expect(trigger).toEqualAttribute('id', 'control');
+            expect(root.shadowRoot.querySelector('[role="listbox"]')).toBeNull();
+        });
+        it('opens a role=listbox with one role=option per entry on click, with aria-controls resolving in the shadow root', async () => {
+            const { root, waitForChanges } = await render(h("bs-input", { type: "select", value: "2", options: selectOpts }));
+            root.shadowRoot.querySelector('[part="field"]').click();
+            await waitForChanges();
+            const trigger = root.shadowRoot.querySelector('[role="combobox"]');
+            const options = root.shadowRoot.querySelectorAll('[role="option"]');
+            expect(trigger).toEqualAttribute('aria-expanded', 'true');
+            expect(root.shadowRoot.getElementById(trigger.getAttribute('aria-controls'))).toEqualAttribute('role', 'listbox');
+            expect(options.length).toBe(3);
+            expect(options[1]).toEqualAttribute('aria-selected', 'true');
+            expect(options[0]).toEqualAttribute('aria-selected', 'false');
+            // active option starts on the selected one and is exposed via aria-activedescendant
+            expect(trigger).toEqualAttribute('aria-activedescendant', 'option-1');
+            expect(options[1].querySelector('.bs-input__option-check')).not.toBeNull();
+        });
+        it('clicking an option sets value, closes, and emits bsInput + bsChange', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-input", { type: "select", options: selectOpts }));
+            const changeSpy = spyOnEvent('bsChange');
+            const inputSpy = spyOnEvent('bsInput');
+            root.shadowRoot.querySelector('[part="field"]').click();
+            await waitForChanges();
+            root.shadowRoot.querySelectorAll('[role="option"]')[1].click();
+            await waitForChanges();
+            expect(changeSpy).toHaveReceivedEventDetail('2');
+            expect(inputSpy).toHaveReceivedEventDetail('2');
+            expect(root.value).toBe('2');
+            expect(root.shadowRoot.querySelector('[role="listbox"]')).toBeNull();
+            expect(root.shadowRoot.querySelector('.bs-input__picker-text')).toHaveTextContent('Two');
+        });
+        it('supports keyboard: ArrowDown opens, arrows move, Enter selects, Escape closes', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-input", { type: "select", options: selectOpts }));
+            const changeSpy = spyOnEvent('bsChange');
+            pickerKey(root, 'ArrowDown');
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[role="listbox"]')).not.toBeNull();
+            pickerKey(root, 'ArrowDown');
+            pickerKey(root, 'ArrowDown');
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[role="combobox"]')).toEqualAttribute('aria-activedescendant', 'option-2');
+            pickerKey(root, 'Home');
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[role="combobox"]')).toEqualAttribute('aria-activedescendant', 'option-0');
+            pickerKey(root, 'End');
+            pickerKey(root, 'Enter');
+            await waitForChanges();
+            expect(changeSpy).toHaveReceivedEventDetail('3');
+            expect(root.shadowRoot.querySelector('[role="listbox"]')).toBeNull();
+            pickerKey(root, 'Enter');
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[role="listbox"]')).not.toBeNull();
+            root.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, composed: true }));
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[role="listbox"]')).toBeNull();
+            expect(root.value).toBe('3');
+        });
+        it('type-ahead moves the active option while open and commits directly while closed', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-input", { type: "select", options: selectOpts }));
+            const changeSpy = spyOnEvent('bsChange');
+            pickerKey(root, 't');
+            await waitForChanges();
+            expect(changeSpy).toHaveReceivedEventDetail('2');
+            pickerKey(root, 'ArrowDown');
+            await waitForChanges();
+            await new Promise(r => setTimeout(r, 600));
+            pickerKey(root, 'o');
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[role="combobox"]')).toEqualAttribute('aria-activedescendant', 'option-0');
+        });
+        it('does not open when disabled', async () => {
+            const { root, waitForChanges } = await render(h("bs-input", { type: "select", disabled: true, options: selectOpts }));
+            root.shadowRoot.querySelector('[part="field"]').click();
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[role="listbox"]')).toBeNull();
+            expect(root.shadowRoot.querySelector('button[role="combobox"]')).toHaveAttribute('disabled');
+        });
+        it('participates in a form with the selected value', async () => {
+            const form = document.createElement('form');
+            document.body.appendChild(form);
+            const el = document.createElement('bs-input');
+            el.type = 'select';
+            el.name = 'role';
+            el.options = selectOpts;
+            el.value = '2';
+            form.appendChild(el);
+            await new Promise(r => setTimeout(r, 50));
+            expect(new FormData(form).get('role')).toBe('2');
+            form.remove();
+        });
+        it('styles the popup with BrandSync tokens (raised surface, shadow), in light and dark', async () => {
+            const popup = async (dark) => {
+                if (dark)
+                    document.documentElement.setAttribute('data-theme', 'dark');
+                try {
+                    const { root, waitForChanges } = await render(h("bs-input", { type: "select", options: selectOpts }));
+                    root.shadowRoot.querySelector('[part="field"]').click();
+                    await waitForChanges();
+                    const el = root.shadowRoot.querySelector('[part="menu"]');
+                    const cs = getComputedStyle(el);
+                    const probe = document.createElement('div');
+                    probe.style.background = 'var(--bs-surface-raised)';
+                    document.body.appendChild(probe);
+                    const expected = getComputedStyle(probe).backgroundColor;
+                    probe.remove();
+                    expect(cs.backgroundColor).toBe(expected);
+                    expect(cs.boxShadow).not.toBe('none');
+                    expect(cs.borderRadius).not.toBe('0px');
+                }
+                finally {
+                    document.documentElement.removeAttribute('data-theme');
+                }
+            };
+            await popup(false);
+            await popup(true);
         });
     });
     describe('type="textarea"', () => {
@@ -332,31 +447,56 @@ describe('bs-input', () => {
         });
     });
     describe('type="initials"', () => {
-        it('renders a title select followed by a text input, sharing one label', async () => {
-            const { root } = await render(h("bs-input", { type: "initials", label: "Name", titleOptions: ['Mrs.', 'Mr.', 'Dr.'] }));
-            const select = root.shadowRoot.querySelector('.bs-input__title-select');
+        const titles = ['Mrs.', 'Mr.', 'Dr.'];
+        it('renders a title combobox followed by a text input, sharing one label', async () => {
+            const { root } = await render(h("bs-input", { type: "initials", label: "Name", titleOptions: titles, initialsTitle: "Mr." }));
+            const trigger = root.shadowRoot.querySelector('button[role="combobox"]');
             const input = root.shadowRoot.querySelector('input');
             const label = root.shadowRoot.querySelector('label');
-            expect(select.querySelectorAll('option').length).toBe(3);
+            expect(root.shadowRoot.querySelector('select')).toBeNull();
+            expect(trigger).toHaveTextContent('Mr.');
+            expect(trigger).toEqualAttribute('aria-label', 'Title');
             expect(label).toEqualAttribute('for', 'control');
             expect(input).toEqualAttribute('id', 'control');
         });
-        it('emits bsTitleChange when the title select changes', async () => {
-            const { root, spyOnEvent } = await render(h("bs-input", { type: "initials", titleOptions: ['Mrs.', 'Mr.'] }));
-            const bsTitleChangeSpy = spyOnEvent('bsTitleChange');
-            const select = root.shadowRoot.querySelector('.bs-input__title-select');
-            select.value = 'Mr.';
-            select.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-            expect(bsTitleChangeSpy).toHaveReceivedEventDetail('Mr.');
+        it('opens a listbox, selecting a title emits bsTitleChange and updates initialsTitle', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-input", { type: "initials", titleOptions: titles }));
+            const spy = spyOnEvent('bsTitleChange');
+            root.shadowRoot.querySelector('[part="field"]').click();
+            await waitForChanges();
+            const options = root.shadowRoot.querySelectorAll('[role="option"]');
+            expect(options.length).toBe(3);
+            options[1].click();
+            await waitForChanges();
+            expect(spy).toHaveReceivedEventDetail('Mr.');
+            expect(root.initialsTitle).toBe('Mr.');
+            expect(root.shadowRoot.querySelector('[role="listbox"]')).toBeNull();
+        });
+        it('selects a title with the keyboard', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-input", { type: "initials", titleOptions: titles }));
+            const spy = spyOnEvent('bsTitleChange');
+            pickerKey(root, 'ArrowDown');
+            pickerKey(root, 'ArrowDown');
+            pickerKey(root, 'Enter');
+            await waitForChanges();
+            expect(spy).toHaveReceivedEventDetail('Mr.');
         });
-        it('renders the title select and the text input in two separate [part="field"] boxes, not one shared field', async () => {
+        it('renders the title picker and the text input in two separate bordered [part="field"] boxes with a gap', async () => {
             const { root } = await render(h("bs-input", { type: "initials", titleOptions: ['Mrs.', 'Mr.'] }));
             const fields = root.shadowRoot.querySelectorAll('[part="field"]');
             expect(fields).toHaveLength(2);
             expect(fields[0]).toHaveClass('bs-input__field--initials-title');
-            expect(fields[0].querySelector('select')).not.toBeNull();
+            expect(fields[0].querySelector('button[role="combobox"]')).not.toBeNull();
             expect(fields[1]).toHaveClass('bs-input__field--initials-value');
             expect(fields[1].querySelector('input')).not.toBeNull();
+            const [a, b] = Array.from(fields);
+            for (const f of [a, b]) {
+                const cs = getComputedStyle(f);
+                expect(cs.borderTopWidth).toBe('1px');
+                expect(cs.borderTopStyle).toBe('solid');
+                expect(parseFloat(cs.borderTopLeftRadius)).toBeGreaterThan(0);
+            }
+            expect(b.getBoundingClientRect().left - a.getBoundingClientRect().right).toBeGreaterThan(0);
         });
         it('applies the error class to both the title box and the value box', async () => {
             const { root } = await render(h("bs-input", { type: "initials", titleOptions: ['Mrs.'], error: "Required" }));
@@ -366,18 +506,76 @@ describe('bs-input', () => {
         });
     });
     describe('type="country"', () => {
-        it('renders a country select followed by a text input', async () => {
-            const { root } = await render(h("bs-input", { type: "country", countryOptions: [{ code: 'DK', label: 'Denmark' }, { code: 'US', label: 'United States' }] }));
-            const select = root.shadowRoot.querySelector('.bs-input__country-select');
-            expect(select.querySelectorAll('option').length).toBe(2);
-        });
-        it('emits bsCountryChange when the country select changes', async () => {
-            const { root, spyOnEvent } = await render(h("bs-input", { type: "country", countryOptions: [{ code: 'DK', label: 'Denmark' }, { code: 'US', label: 'United States' }] }));
-            const bsCountryChangeSpy = spyOnEvent('bsCountryChange');
-            const select = root.shadowRoot.querySelector('.bs-input__country-select');
-            select.value = 'US';
-            select.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-            expect(bsCountryChangeSpy).toHaveReceivedEventDetail('US');
+        it('renders two separate bordered fields: a flag picker and the phone input', async () => {
+            const { root } = await render(h("bs-input", { type: "country", country: "US", countryOptions: countries }));
+            const fields = Array.from(root.shadowRoot.querySelectorAll('[part="field"]'));
+            expect(fields).toHaveLength(2);
+            expect(root.shadowRoot.querySelector('select')).toBeNull();
+            expect(fields[0].querySelector('button[role="combobox"]')).not.toBeNull();
+            expect(fields[1].querySelector('input')).not.toBeNull();
+            for (const f of fields)
+                expect(getComputedStyle(f).borderTopWidth).toBe('1px');
+            expect(fields[1].getBoundingClientRect().left - fields[0].getBoundingClientRect().right).toBeGreaterThan(0);
+        });
+        it('shows the selected country flag in the trigger, with an accessible name', async () => {
+            const { root } = await render(h("bs-input", { type: "country", country: "US", countryOptions: countries }));
+            const trigger = root.shadowRoot.querySelector('button[role="combobox"]');
+            expect(trigger.querySelector('[part="flag"]')).toHaveTextContent('\u{1F1FA}\u{1F1F8}');
+            expect(trigger).toEqualAttribute('aria-label', 'Country: United States');
+        });
+        it('falls back to the country code when there is no flag', async () => {
+            const { root } = await render(h("bs-input", { type: "country", country: "DK", countryOptions: [{ code: 'DK', label: 'Denmark' }] }));
+            const trigger = root.shadowRoot.querySelector('button[role="combobox"]');
+            expect(trigger.querySelector('[part="flag"]')).toBeNull();
+            expect(trigger).toHaveTextContent('DK');
+        });
+        it('shows flag, code and name in each option and marks the selected one', async () => {
+            const { root, waitForChanges } = await render(h("bs-input", { type: "country", country: "US", countryOptions: countries }));
+            root.shadowRoot.querySelector('[part="field"]').click();
+            await waitForChanges();
+            const options = root.shadowRoot.querySelectorAll('[role="option"]');
+            expect(options.length).toBe(3);
+            expect(options[0].querySelector('[part="flag"]')).not.toBeNull();
+            expect(options[0]).toHaveTextContent('DK Denmark');
+            expect(options[1]).toEqualAttribute('aria-selected', 'true');
+        });
+        it('emits bsCountryChange and updates country when an option is chosen', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-input", { type: "country", countryOptions: countries }));
+            const spy = spyOnEvent('bsCountryChange');
+            root.shadowRoot.querySelector('[part="field"]').click();
+            await waitForChanges();
+            root.shadowRoot.querySelectorAll('[role="option"]')[2].click();
+            await waitForChanges();
+            expect(spy).toHaveReceivedEventDetail('GB');
+            expect(root.country).toBe('GB');
+        });
+        it('keeps the phone number as the form value', async () => {
+            const form = document.createElement('form');
+            document.body.appendChild(form);
+            const el = document.createElement('bs-input');
+            el.type = 'country';
+            el.name = 'phone';
+            el.countryOptions = countries;
+            el.value = '12345678';
+            form.appendChild(el);
+            await new Promise(r => setTimeout(r, 50));
+            expect(new FormData(form).get('phone')).toBe('12345678');
+            form.remove();
+        });
+        it('supports keyboard selection and Escape', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-input", { type: "country", countryOptions: countries }));
+            const spy = spyOnEvent('bsCountryChange');
+            pickerKey(root, 'ArrowDown');
+            await waitForChanges();
+            root.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, composed: true }));
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[role="listbox"]')).toBeNull();
+            expect(spy).not.toHaveReceivedEvent();
+            pickerKey(root, 'ArrowDown');
+            pickerKey(root, 'ArrowDown');
+            pickerKey(root, 'Enter');
+            await waitForChanges();
+            expect(spy).toHaveReceivedEventDetail('US');
         });
     });
     describe('type="pin"', () => {
@@ -428,4 +626,192 @@ describe('bs-input', () => {
             expect(label.fontWeight).toBe('600');
         });
     });
+    describe('type="combobox"', () => {
+        const opts = [
+            { label: 'Denmark', value: 'dk' },
+            { label: 'Sweden', value: 'se' },
+            { label: 'Norway', value: 'no' },
+        ];
+        const key = (root, k) => root.shadowRoot.querySelector('input').dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true, composed: true, cancelable: true }));
+        const typeText = async (root, text, waitForChanges) => {
+            const input = root.shadowRoot.querySelector('input');
+            input.value = text;
+            input.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+            await waitForChanges();
+        };
+        it('exposes combobox ARIA on the input, with aria-controls resolving inside the shadow root', async () => {
+            const { root, waitForChanges } = await render(h("bs-input", { type: "combobox", label: "Country", options: opts }));
+            const input = root.shadowRoot.querySelector('input');
+            expect(input).toEqualAttribute('role', 'combobox');
+            expect(input).toEqualAttribute('aria-expanded', 'false');
+            expect(input).toEqualAttribute('aria-autocomplete', 'list');
+            expect(input).toEqualAttribute('aria-controls', 'listbox');
+            expect(input).not.toHaveAttribute('aria-activedescendant');
+            key(root, 'ArrowDown');
+            await waitForChanges();
+            expect(input).toEqualAttribute('aria-expanded', 'true');
+            const listbox = root.shadowRoot.getElementById('listbox');
+            expect(listbox).not.toBeNull();
+            expect(listbox).toEqualAttribute('role', 'listbox');
+            expect(root.shadowRoot.querySelectorAll('[role="option"]').length).toBe(3);
+            expect(input).toEqualAttribute('aria-activedescendant', 'option-0');
+            expect(root.shadowRoot.getElementById('option-0')).toEqualAttribute('aria-selected', 'true');
+        });
+        it('ArrowDown/ArrowUp move the active option (wrapping), Home/End jump', async () => {
+            const { root, waitForChanges } = await render(h("bs-input", { type: "combobox", label: "Country", options: opts }));
+            const input = root.shadowRoot.querySelector('input');
+            key(root, 'ArrowDown');
+            key(root, 'ArrowDown');
+            await waitForChanges();
+            expect(input).toEqualAttribute('aria-activedescendant', 'option-1');
+            key(root, 'End');
+            await waitForChanges();
+            expect(input).toEqualAttribute('aria-activedescendant', 'option-2');
+            key(root, 'ArrowDown');
+            await waitForChanges();
+            expect(input).toEqualAttribute('aria-activedescendant', 'option-0');
+            key(root, 'ArrowUp');
+            await waitForChanges();
+            expect(input).toEqualAttribute('aria-activedescendant', 'option-2');
+            key(root, 'Home');
+            await waitForChanges();
+            expect(input).toEqualAttribute('aria-activedescendant', 'option-0');
+        });
+        it('opens and filters while typing and emits bsInput with the text', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-input", { type: "combobox", label: "Country", options: opts }));
+            const spy = spyOnEvent('bsInput');
+            await typeText(root, 'sw', waitForChanges);
+            expect(spy).toHaveReceivedEventDetail('sw');
+            expect(root).toHaveAttribute('open');
+            const options = root.shadowRoot.querySelectorAll('[role="option"]');
+            expect(options.length).toBe(1);
+            expect(options[0]).toHaveTextContent('Sweden');
+        });
+        it('does not filter when filterOptions is false', async () => {
+            const { root, waitForChanges } = await render(h("bs-input", { type: "combobox", label: "Country", options: opts, filterOptions: false }));
+            await typeText(root, 'zzz', waitForChanges);
+            expect(root.shadowRoot.querySelectorAll('[role="option"]').length).toBe(3);
+        });
+        it('Enter selects the active option: sets value, closes, emits bsOptionSelect and bsChange', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-input", { type: "combobox", label: "Country", options: opts }));
+            const selectSpy = spyOnEvent('bsOptionSelect');
+            const changeSpy = spyOnEvent('bsChange');
+            key(root, 'ArrowDown');
+            key(root, 'ArrowDown');
+            await waitForChanges();
+            key(root, 'Enter');
+            await waitForChanges();
+            expect(selectSpy).toHaveReceivedEventDetail({ label: 'Sweden', value: 'se' });
+            expect(changeSpy).toHaveReceivedEventDetail('Sweden');
+            expect(root).not.toHaveAttribute('open');
+            expect(root.shadowRoot.querySelector('input').value).toBe('Sweden');
+            expect(root.shadowRoot.getElementById('listbox')).toBeNull();
+        });
+        it('Enter without an active option does not select', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-input", { type: "combobox", label: "Country", options: opts }));
+            const selectSpy = spyOnEvent('bsOptionSelect');
+            await typeText(root, 'den', waitForChanges);
+            key(root, 'Enter');
+            await waitForChanges();
+            expect(selectSpy).not.toHaveReceivedEvent();
+        });
+        it('clicking an option selects it', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-input", { type: "combobox", label: "Country", options: opts, open: true }));
+            const selectSpy = spyOnEvent('bsOptionSelect');
+            root.shadowRoot.getElementById('option-2').click();
+            await waitForChanges();
+            expect(selectSpy).toHaveReceivedEventDetail({ label: 'Norway', value: 'no' });
+        });
+        it('Escape closes the popup', async () => {
+            const { root, waitForChanges } = await render(h("bs-input", { type: "combobox", label: "Country", options: opts, open: true }));
+            key(root, 'Escape');
+            await waitForChanges();
+            expect(root).not.toHaveAttribute('open');
+        });
+        it('shows a "No results" status when nothing matches', async () => {
+            const { root, waitForChanges } = await render(h("bs-input", { type: "combobox", label: "Country", options: opts }));
+            await typeText(root, 'xyz', waitForChanges);
+            expect(root.shadowRoot.querySelectorAll('[role="option"]').length).toBe(0);
+            expect(root.shadowRoot.querySelector('[role="status"]')).toHaveTextContent('No results');
+        });
+        it('shows a loading indicator and message while loading with no results', async () => {
+            const { root, waitForChanges } = await render(h("bs-input", { type: "combobox", label: "Country", options: [], loading: true, open: true }));
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('bs-spinner')).not.toBeNull();
+            expect(root.shadowRoot.querySelector('[role="status"]')).toHaveTextContent('Loading...');
+        });
+        it('renders a clear button only with a value; clicking it empties the value and emits events', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-input", { type: "combobox", label: "Country", options: opts }));
+            expect(root.shadowRoot.querySelector('[part="clear"]')).toBeNull();
+            await typeText(root, 'den', waitForChanges);
+            const clear = root.shadowRoot.querySelector('[part="clear"]');
+            expect(clear).not.toBeNull();
+            const inputSpy = spyOnEvent('bsInput');
+            clear.click();
+            await waitForChanges();
+            expect(inputSpy).toHaveReceivedEventDetail('');
+            expect(root.shadowRoot.querySelector('input').value).toBe('');
+            expect(root.shadowRoot.querySelector('[part="clear"]')).toBeNull();
+        });
+        it('does not render a clear button when disabled', async () => {
+            const { root } = await render(h("bs-input", { type: "combobox", label: "Country", value: "Denmark", disabled: true }));
+            expect(root.shadowRoot.querySelector('[part="clear"]')).toBeNull();
+        });
+    });
+    describe('aria-label pass-through', () => {
+        it('sets aria-label on the control when there is no visible label', async () => {
+            const { root } = await render(h("bs-input", { ariaLabel: "Search products" }));
+            expect(root.shadowRoot.querySelector('input')).toEqualAttribute('aria-label', 'Search products');
+        });
+        it('does not set aria-label when a visible label exists', async () => {
+            const { root } = await render(h("bs-input", { label: "Name", ariaLabel: "Ignored" }));
+            expect(root.shadowRoot.querySelector('input')).not.toHaveAttribute('aria-label');
+        });
+    });
+    describe('type="date" picker icon', () => {
+        it('renders a single custom calendar button and opens the picker via showPicker()', async () => {
+            const { root } = await render(h("bs-input", { type: "date", label: "Date" }));
+            const input = root.shadowRoot.querySelector('input');
+            const showPicker = vi.fn();
+            input.showPicker = showPicker;
+            const btn = root.shadowRoot.querySelector('.bs-input__calendar-btn');
+            expect(btn).not.toBeNull();
+            btn.click();
+            expect(showPicker).toHaveBeenCalledTimes(1);
+        });
+        it('falls back to focusing the input when showPicker is unavailable', async () => {
+            const { root } = await render(h("bs-input", { type: "date", label: "Date" }));
+            const input = root.shadowRoot.querySelector('input');
+            input.showPicker = undefined;
+            root.shadowRoot.querySelector('.bs-input__calendar-btn').click();
+            expect(root.shadowRoot.activeElement).toBe(input);
+        });
+    });
+    describe('sizing', () => {
+        it('number stepper buttons are at least 24px', async () => {
+            const { root } = await render(h("bs-input", { type: "number", label: "Qty" }));
+            const btn = getComputedStyle(root.shadowRoot.querySelector('.bs-input__stepper-btn'));
+            expect(parseFloat(btn.width)).toBeGreaterThanOrEqual(24);
+            expect(parseFloat(btn.height)).toBeGreaterThanOrEqual(24);
+        });
+        it('description text is 14px and the stack gap is 8px', async () => {
+            const { root } = await render(h("bs-input", { label: "Name", description: "Helper" }));
+            expect(getComputedStyle(root.shadowRoot.querySelector('.bs-input__description')).fontSize).toBe('14px');
+            expect(getComputedStyle(root.shadowRoot.querySelector('.bs-input')).rowGap).toBe('8px');
+        });
+        it('pin uses a 6px cell gap and 44px cells', async () => {
+            const { root } = await render(h("bs-input", { type: "pin", length: 4 }));
+            const field = getComputedStyle(root.shadowRoot.querySelector('.bs-input__field--pin'));
+            expect(field.columnGap).toBe('6px');
+            const cell = getComputedStyle(root.shadowRoot.querySelector('.bs-input__pin-cell'));
+            expect(cell.width).toBe('44px');
+            expect(cell.height).toBe('44px');
+        });
+        it('chip pills use size="md" (24px)', async () => {
+            const { root } = await render(h("bs-input", { type: "chip", chips: ['a'] }));
+            const chip = root.shadowRoot.querySelector('bs-chip-informative');
+            expect(chip.size).toBe('md');
+            expect(chip.getBoundingClientRect().height).toBe(24);
+        });
+    });
 });