@baloise/ds-core 20.0.0-next.4 → 20.0.0-next.6

package/dist/collection/components/select/select.picker.js

@@ -0,0 +1,276 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import SlimSelect from "slim-select";
+import { i18nDsSelect } from "./select.i18n";
+export function buildSlimData(options, optionGroups, placeholder, value) {
+    const selected = Array.isArray(value) ? value : value ? [value] : [];
+    const data = [];
+    data.push({ text: placeholder || '', placeholder: true });
+    if (optionGroups.length > 0) {
+        data.push(...optionGroups.map(group => ({
+            label: group.label,
+            options: group.options.map(opt => ({
+                text: opt.label,
+                value: opt.value,
+                disabled: !!opt.disabled,
+                selected: selected.includes(opt.value),
+            })),
+        })));
+    }
+    else {
+        data.push(...options.map(opt => ({
+            text: opt.label,
+            value: opt.value,
+            disabled: !!opt.disabled,
+            selected: selected.includes(opt.value),
+        })));
+    }
+    return data;
+}
+const TYPEAHEAD_TIMEOUT_MS = 500;
+export class SelectPickerController {
+    constructor(config) {
+        this.typeAheadBuffer = '';
+        this.typeAheadLastTime = 0;
+        this.config = config;
+        this.init();
+    }
+    /**
+     * PUBLIC API
+     * ------------------------------------------------------
+     */
+    open() {
+        var _a;
+        (_a = this.slimSelect) === null || _a === void 0 ? void 0 : _a.open();
+    }
+    close() {
+        var _a;
+        (_a = this.slimSelect) === null || _a === void 0 ? void 0 : _a.close();
+    }
+    focus() {
+        var _a;
+        (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    blur() {
+        var _a;
+        (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    setData(data) {
+        var _a;
+        (_a = this.slimSelect) === null || _a === void 0 ? void 0 : _a.setData(data);
+    }
+    setSelected(value) {
+        var _a;
+        (_a = this.slimSelect) === null || _a === void 0 ? void 0 : _a.setSelected(value);
+    }
+    setDisabled(disabled) {
+        var _a, _b;
+        if (disabled) {
+            (_a = this.slimSelect) === null || _a === void 0 ? void 0 : _a.disable();
+        }
+        else {
+            (_b = this.slimSelect) === null || _b === void 0 ? void 0 : _b.enable();
+        }
+    }
+    updateSearchPlaceholder(language) {
+        const searchInput = this.config.shadowRoot.querySelector('.ss-search input');
+        if (searchInput)
+            searchInput.placeholder = i18nDsSelect[language].searchPlaceholder;
+    }
+    destroy() {
+        var _a;
+        (_a = this.slimSelect) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.slimSelect = undefined;
+    }
+    /**
+     * PRIVATE
+     * ------------------------------------------------------
+     */
+    get trigger() {
+        return this.config.shadowRoot.querySelector('.ss-main');
+    }
+    init() {
+        const { selectEl, popupEl, language, searchable, placeholder, disabled, readonly, multiple, clearable, data } = this.config;
+        this.slimSelect = new SlimSelect({
+            select: selectEl,
+            settings: {
+                contentLocation: popupEl,
+                contentPosition: 'relative',
+                searchHighlight: true,
+                showSearch: searchable,
+                focusSearch: searchable,
+                searchPlaceholder: i18nDsSelect[language].searchPlaceholder,
+                searchText: i18nDsSelect[language].noResults,
+                placeholderText: placeholder || ' ',
+                disabled: disabled || readonly,
+                closeOnSelect: !multiple,
+                allowDeselect: clearable,
+                modal: 'off',
+            },
+            data,
+            events: {
+                afterChange: (newVal) => this.config.onChange(newVal),
+                afterOpen: () => {
+                    this.highlightFirstOption();
+                    this.config.onOpen();
+                },
+                afterClose: () => this.config.onClose(),
+            },
+        });
+        this.connectLabelToTrigger();
+        this.fixSearchListener();
+        this.fixKeyboardOpen();
+        this.fixOptionFocus();
+        this.fixTypeAhead();
+        this.highlightFirstOption();
+    }
+    // slim-select never auto-highlights an option: arrow keys are the only built-in trigger.
+    // We want the first matching option highlighted whenever the list opens or a search
+    // narrows the results, so keyboard users can immediately Enter/Space it. Skip it if
+    // something is already highlighted (e.g. from a previous arrow-key navigation).
+    highlightFirstOption() {
+        var _a;
+        if (this.config.popupEl.querySelector('.ss-highlighted'))
+            return;
+        (_a = this.slimSelect) === null || _a === void 0 ? void 0 : _a.render.highlight('down');
+    }
+    // Shadow DOM event retargeting makes e.target null inside slim-select's keyup handler.
+    // Intercept during capture phase (before slim-select's bubble listener), stop propagation,
+    // and drive the search programmatically from the element reference instead.
+    fixSearchListener() {
+        if (!this.config.searchable)
+            return;
+        const searchInput = this.config.shadowRoot.querySelector('.ss-search input');
+        if (!searchInput)
+            return;
+        searchInput.addEventListener('input', ev => {
+            var _a, _b;
+            ev.stopImmediatePropagation();
+            (_a = this.slimSelect) === null || _a === void 0 ? void 0 : _a.search((_b = searchInput.value) !== null && _b !== void 0 ? _b : '');
+            this.highlightFirstOption();
+        }, { capture: true });
+    }
+    // SlimSelect's Space/Enter listener uses document.activeElement to find its trigger,
+    // but Shadow DOM retargeting returns the host element instead of .ss-main after a
+    // programmatic focus() call — so Space stops working after the first selection.
+    // We intercept keydown on the trigger directly to reopen the dropdown ourselves.
+    fixKeyboardOpen() {
+        const trigger = this.trigger;
+        if (!trigger)
+            return;
+        trigger.addEventListener('keydown', ev => {
+            var _a;
+            const target = ev.target;
+            if ((ev.key === ' ' || ev.key === 'Enter') &&
+                target === trigger &&
+                !target.classList.contains('ss-value-delete') &&
+                !trigger.classList.contains('ss-open')) {
+                ev.preventDefault();
+                (_a = this.slimSelect) === null || _a === void 0 ? void 0 : _a.open();
+            }
+        });
+    }
+    // Options are plain non-focusable divs, so a mouse click's mousedown phase makes the
+    // browser blur .ss-main by default (before slim-select's own click handler ever runs).
+    // Arrow-key navigation is wired to .ss-main's keydown, so once it loses focus keyboard
+    // navigation silently breaks — and for multiple selects (closeOnSelect: false) slim-select
+    // never re-focuses .ss-main afterwards, since it only does so on close. Prevent the browser's
+    // default focus-shift at the source so .ss-main simply never loses focus during option clicks.
+    fixOptionFocus() {
+        this.config.popupEl.addEventListener('mousedown', ev => {
+            const target = ev.target;
+            if (target.closest('.ss-option'))
+                ev.preventDefault();
+        }, { capture: true });
+    }
+    // Non-searchable selects have no way to jump to an option by typing, unlike a native
+    // <select> which supports "hidden" keyboard search: typing a letter jumps to the first
+    // option starting with it, and repeating the same letter cycles through matches. We
+    // replicate that here — highlighting the match while open, or selecting it directly
+    // when closed — since slim-select itself doesn't offer this for non-searchable mode.
+    fixTypeAhead() {
+        if (this.config.searchable)
+            return;
+        const trigger = this.trigger;
+        if (!trigger)
+            return;
+        trigger.addEventListener('keydown', ev => this.handleTypeAhead(ev));
+    }
+    handleTypeAhead(ev) {
+        var _a;
+        const key = ev.key;
+        if (key.length !== 1 || key === ' ' || ev.ctrlKey || ev.metaKey || ev.altKey)
+            return;
+        const render = (_a = this.slimSelect) === null || _a === void 0 ? void 0 : _a.render;
+        if (!render)
+            return;
+        const now = Date.now();
+        const withinTimeout = now - this.typeAheadLastTime <= TYPEAHEAD_TIMEOUT_MS;
+        this.typeAheadLastTime = now;
+        const isRepeat = withinTimeout && this.typeAheadBuffer.length > 0 && [...this.typeAheadBuffer].every(c => c === key);
+        this.typeAheadBuffer = withinTimeout ? this.typeAheadBuffer + key : key;
+        const options = render.getOptions(true, true, true);
+        if (options.length === 0)
+            return;
+        const highlightedClass = render.classes.getFirst('highlighted');
+        const highlighted = this.config.popupEl.querySelector(`.${highlightedClass}`);
+        const startIndex = highlighted ? options.indexOf(highlighted) : -1;
+        const match = isRepeat
+            ? this.findNextTypeAheadMatch(options, key, startIndex)
+            : options.find(o => this.optionText(o).startsWith(this.typeAheadBuffer.toLowerCase()));
+        if (!match)
+            return;
+        ev.preventDefault();
+        const isOpen = render.content.main.classList.contains(render.classes.getFirst('contentOpen'));
+        if (isOpen) {
+            this.setHighlightedOption(match);
+        }
+        else {
+            match.click();
+        }
+    }
+    findNextTypeAheadMatch(options, char, startIndex) {
+        var _a;
+        const lower = char.toLowerCase();
+        const matches = options.filter(o => this.optionText(o).startsWith(lower));
+        if (matches.length === 0)
+            return undefined;
+        return (_a = matches.find(o => options.indexOf(o) > startIndex)) !== null && _a !== void 0 ? _a : matches[0];
+    }
+    optionText(option) {
+        var _a;
+        return ((_a = option.textContent) !== null && _a !== void 0 ? _a : '').trim().toLowerCase();
+    }
+    setHighlightedOption(target) {
+        var _a;
+        const render = (_a = this.slimSelect) === null || _a === void 0 ? void 0 : _a.render;
+        if (!render)
+            return;
+        const highlightedClass = render.classes.highlighted;
+        const current = this.config.popupEl.querySelector(`.${render.classes.getFirst('highlighted')}`);
+        if (current && current !== target)
+            render.removeClasses(current, highlightedClass);
+        render.addClasses(target, highlightedClass);
+        render.ensureElementInView(render.content.list, target);
+        if (target.id)
+            render.main.main.setAttribute('aria-activedescendant', target.id);
+    }
+    connectLabelToTrigger() {
+        const ssMain = this.trigger;
+        if (ssMain) {
+            ssMain.id = this.config.triggerId;
+            ssMain.setAttribute('aria-labelledby', 'label');
+            ssMain.removeAttribute('aria-label');
+        }
+        // <label for="..."> only focuses native labelable elements; .ss-main is a div,
+        // so the browser ignores the for/id link. Wire it manually.
+        const label = this.config.shadowRoot.querySelector('label');
+        if (label && ssMain) {
+            label.addEventListener('click', ev => {
+                ev.preventDefault();
+                ssMain.focus();
+            });
+        }
+    }
+}

package/dist/collection/components/select/test/select.a11y.play.js

@@ -0,0 +1,81 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { DsSelect, test } from "../../../../../../playwright/src/index";
+const COUNTRY_OPTIONS = [
+    { label: 'Switzerland', value: 'ch' },
+    { label: 'Germany', value: 'de' },
+    { label: 'Austria', value: 'at' },
+];
+const CITY_GROUPS = [
+    {
+        label: 'Switzerland',
+        options: [
+            { label: 'Zurich', value: 'ch-zh' },
+            { label: 'Basel', value: 'ch-bs' },
+        ],
+    },
+    {
+        label: 'Germany',
+        options: [{ label: 'Berlin', value: 'de-be' }],
+    },
+];
+const mountSelect = async (page, html) => {
+    await page.mount(html);
+    const select = new DsSelect(page.locator('ds-select'));
+    await select.el.evaluate((node, opts) => (node.options = opts), COUNTRY_OPTIONS);
+    await page.waitForChanges();
+    return select;
+};
+test('basic', async ({ page, a11y }) => {
+    await mountSelect(page, `<ds-select label="Country" description="Select your country of residence"></ds-select>`);
+    await a11y('ds-select');
+});
+test('with value', async ({ page, a11y }) => {
+    await mountSelect(page, `<ds-select label="Country" value="ch"></ds-select>`);
+    await a11y('ds-select');
+});
+test('disabled', async ({ page, a11y }) => {
+    await mountSelect(page, `<ds-select label="Country" disabled></ds-select>`);
+    await a11y('ds-select');
+});
+test('readonly', async ({ page, a11y }) => {
+    await mountSelect(page, `<ds-select label="Country" value="ch" readonly></ds-select>`);
+    await a11y('ds-select');
+});
+test('invalid', async ({ page, a11y }) => {
+    await mountSelect(page, `<ds-select label="Country" invalid invalid-text="Please select a country"></ds-select>`);
+    await a11y('ds-select');
+});
+test('required', async ({ page, a11y }) => {
+    await mountSelect(page, `<ds-select label="Country" required></ds-select>`);
+    await a11y('ds-select');
+});
+test('searchable', async ({ page, a11y }) => {
+    await mountSelect(page, `<ds-select label="Country" searchable></ds-select>`);
+    await a11y('ds-select');
+});
+test('clearable', async ({ page, a11y }) => {
+    await mountSelect(page, `<ds-select label="Country" clearable value="ch"></ds-select>`);
+    await a11y('ds-select');
+});
+test('multiple', async ({ page, a11y }) => {
+    await page.mount(`<ds-select label="Languages" multiple></ds-select>`);
+    const select = new DsSelect(page.locator('ds-select'));
+    await select.el.evaluate((node, opts) => (node.options = opts), COUNTRY_OPTIONS);
+    await page.waitForChanges();
+    await a11y('ds-select');
+});
+test('grouped', async ({ page, a11y }) => {
+    await page.mount(`<ds-select label="Location"></ds-select>`);
+    const select = new DsSelect(page.locator('ds-select'));
+    await select.el.evaluate((node, groups) => (node.optionGroups = groups), CITY_GROUPS);
+    await page.waitForChanges();
+    await a11y('ds-select');
+});
+test('with dropdown open', async ({ page, a11y }) => {
+    const select = await mountSelect(page, `<ds-select label="Country"></ds-select>`);
+    await select.open();
+    await select.option('Germany').waitFor({ state: 'visible' });
+    await a11y('ds-select');
+});

package/dist/collection/components/select/test/select.component.play.js

@@ -0,0 +1,184 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { DsSelect, expect, test } from "../../../../../../playwright/src/index";
+const COUNTRY_OPTIONS = [
+    { label: 'Switzerland', value: 'ch' },
+    { label: 'Germany', value: 'de' },
+    { label: 'Austria', value: 'at' },
+    { label: 'France', value: 'fr' },
+    { label: 'Italy', value: 'it' },
+];
+const LANGUAGE_OPTIONS = [
+    { label: 'German', value: 'de' },
+    { label: 'French', value: 'fr' },
+    { label: 'Italian', value: 'it' },
+];
+const CITY_GROUPS = [
+    {
+        label: 'Switzerland',
+        options: [
+            { label: 'Zurich', value: 'ch-zh' },
+            { label: 'Basel', value: 'ch-bs' },
+            { label: 'Bern', value: 'ch-be' },
+        ],
+    },
+    {
+        label: 'Germany',
+        options: [
+            { label: 'Berlin', value: 'de-be' },
+            { label: 'Munich', value: 'de-mu' },
+        ],
+    },
+];
+const setOptions = async (page, el, options) => {
+    await el.evaluate((node, opts) => (node.options = opts), options);
+    await page.waitForChanges();
+};
+const setOptionGroups = async (page, el, groups) => {
+    await el.evaluate((node, g) => (node.optionGroups = g), groups);
+    await page.waitForChanges();
+};
+test.describe('dsChange', () => {
+    test('should fire dsChange with the option value when selected by label', async ({ page }) => {
+        await page.mount(`<ds-select label="Country"></ds-select>`);
+        const select = new DsSelect(page.locator('ds-select'));
+        await setOptions(page, select.el, COUNTRY_OPTIONS);
+        const changeSpy = await select.el.spyOnEvent('dsChange');
+        await select.select('Italy');
+        expect(changeSpy).toHaveReceivedEventTimes(1);
+        expect(changeSpy).toHaveReceivedEventDetail('it');
+        await select.assertValue('Italy');
+    });
+    test('should fire dsChange with an array of values in multiple mode', async ({ page }) => {
+        await page.mount(`<ds-select label="Languages" multiple></ds-select>`);
+        const select = new DsSelect(page.locator('ds-select'));
+        await setOptions(page, select.el, LANGUAGE_OPTIONS);
+        const changeSpy = await select.el.spyOnEvent('dsChange');
+        await select.selectMultiple(['German', 'Italian']);
+        expect(changeSpy).toHaveReceivedEventTimes(2);
+        expect(changeSpy).toHaveReceivedEventDetail(['de', 'it']);
+        await select.assertValue(['German', 'Italian']);
+    });
+});
+test.describe('closeOnSelect', () => {
+    test('should close the dropdown after selecting an option in single mode', async ({ page }) => {
+        await page.mount(`<ds-select label="Country"></ds-select>`);
+        const select = new DsSelect(page.locator('ds-select'));
+        await setOptions(page, select.el, COUNTRY_OPTIONS);
+        await select.open();
+        await select.assertOpen();
+        await select.option('Italy').click();
+        await select.assertClosed();
+    });
+    test('should keep the dropdown open after selecting an option in multiple mode', async ({ page }) => {
+        await page.mount(`<ds-select label="Languages" multiple></ds-select>`);
+        const select = new DsSelect(page.locator('ds-select'));
+        await setOptions(page, select.el, LANGUAGE_OPTIONS);
+        await select.open();
+        await select.assertOpen();
+        await select.option('German').click();
+        await select.assertOpen();
+    });
+    test('should close the dropdown after selecting an option via keyboard in single mode', async ({ page }) => {
+        await page.mount(`<ds-select label="Country"></ds-select>`);
+        const select = new DsSelect(page.locator('ds-select'));
+        await setOptions(page, select.el, COUNTRY_OPTIONS);
+        await select.trigger.focus();
+        await select.trigger.press('Enter');
+        await select.assertOpen();
+        await select.trigger.press('ArrowDown');
+        await select.trigger.press('Enter');
+        await select.assertClosed();
+    });
+});
+test.describe('keyboard navigation after mouse click', () => {
+    test('should keep keyboard navigation working after clicking an option in multiple mode', async ({ page }) => {
+        await page.mount(`<ds-select label="Languages" multiple></ds-select>`);
+        const select = new DsSelect(page.locator('ds-select'));
+        await setOptions(page, select.el, LANGUAGE_OPTIONS);
+        await select.open();
+        await select.option('German').click();
+        await select.assertOpen();
+        await select.trigger.press('ArrowDown');
+        await select.assertHighlighted('French');
+    });
+    test('should keep the trigger focused after clicking an option in single mode', async ({ page }) => {
+        await page.mount(`<ds-select label="Country"></ds-select>`);
+        const select = new DsSelect(page.locator('ds-select'));
+        await setOptions(page, select.el, COUNTRY_OPTIONS);
+        await select.open();
+        await select.option('Italy').click();
+        await expect(select.trigger).toBeFocused();
+    });
+});
+test.describe('grouped options', () => {
+    test('should select an option nested in a group by its label', async ({ page }) => {
+        await page.mount(`<ds-select label="Location"></ds-select>`);
+        const select = new DsSelect(page.locator('ds-select'));
+        await setOptionGroups(page, select.el, CITY_GROUPS);
+        const changeSpy = await select.el.spyOnEvent('dsChange');
+        await select.select('Basel');
+        expect(changeSpy).toHaveReceivedEventTimes(1);
+        expect(changeSpy).toHaveReceivedEventDetail('ch-bs');
+        await select.assertValue('Basel');
+    });
+});
+test.describe('searchable', () => {
+    test('should filter options by the typed text', async ({ page }) => {
+        await page.mount(`<ds-select label="Country" searchable></ds-select>`);
+        const select = new DsSelect(page.locator('ds-select'));
+        await setOptions(page, select.el, COUNTRY_OPTIONS);
+        await select.search('Ger');
+        await expect(select.option('Germany')).toBeVisible();
+        await expect(select.option('France')).toBeHidden();
+    });
+    test('should still select the filtered option by label', async ({ page }) => {
+        await page.mount(`<ds-select label="Country" searchable></ds-select>`);
+        const select = new DsSelect(page.locator('ds-select'));
+        await setOptions(page, select.el, COUNTRY_OPTIONS);
+        const changeSpy = await select.el.spyOnEvent('dsChange');
+        await select.search('Ger');
+        await select.option('Germany').click();
+        expect(changeSpy).toHaveReceivedEventTimes(1);
+        expect(changeSpy).toHaveReceivedEventDetail('de');
+    });
+});
+test.describe('clearable', () => {
+    test('should clear the selected value and fire dsChange with null', async ({ page }) => {
+        await page.mount(`<ds-select label="Country" clearable value="it"></ds-select>`);
+        const select = new DsSelect(page.locator('ds-select'));
+        await setOptions(page, select.el, COUNTRY_OPTIONS);
+        const changeSpy = await select.el.spyOnEvent('dsChange');
+        await select.clear();
+        expect(changeSpy).toHaveReceivedEventTimes(1);
+        expect(changeSpy).toHaveReceivedEventDetail(null);
+    });
+});
+test.describe('disabled', () => {
+    test('should not open the dropdown or fire dsChange when disabled', async ({ page }) => {
+        await page.mount(`<ds-select label="Country" disabled></ds-select>`);
+        const select = new DsSelect(page.locator('ds-select'));
+        await setOptions(page, select.el, COUNTRY_OPTIONS);
+        const changeSpy = await select.el.spyOnEvent('dsChange');
+        await select.assertToBeDisabled();
+        expect(changeSpy).toHaveReceivedEventTimes(0);
+    });
+});
+test.describe('form reset', () => {
+    test('should reset to the initial value', async ({ page }) => {
+        await page.mount(`
+      <form>
+        <ds-select name="country" label="Country" value="it"></ds-select>
+        <button type="reset" data-testid="reset">Reset</button>
+      </form>
+    `);
+        const select = new DsSelect(page.locator('ds-select'));
+        await setOptions(page, select.el, COUNTRY_OPTIONS);
+        await select.select('Germany');
+        await select.assertValue('Germany');
+        await page.getByTestId('reset').click();
+        await page.waitForChanges();
+        await select.assertValue('Italy');
+    });
+});

package/dist/collection/components/select/test/select.visual.play.js

@@ -0,0 +1,70 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { DsSelect, expectScreenshot, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'select';
+const VARIANTS = ['basic', 'disabled', 'invalid', 'valid', 'warning'];
+const HOST_VARIANTS = [
+    { testId: 'basic', selectId: 'basic', options: ['Italy'] },
+    { testId: 'searchable', selectId: 'searchable', options: ['Germany'] },
+    { testId: 'clearable', selectId: 'clearable', options: ['France'] },
+    { testId: 'multiple', selectId: 'multi', options: ['German', 'Italian'], multiple: true },
+    { testId: 'grouped', selectId: 'grouped', options: ['Basel'] },
+];
+const HTML_OPTIONS_VARIANTS = [
+    { testId: 'flat', selectId: 'flat', options: ['Italy'] },
+    { testId: 'grouped', selectId: 'grouped', options: ['Basel'] },
+    { testId: 'disabled-option', selectId: 'disabled-option', options: ['Basic'] },
+];
+const image = screenshot(TAG);
+test.describe('style', () => {
+    test.beforeEach('Setup', async ({ page }) => {
+        await page.setupVisualTest(`/components/${TAG}/test/${TAG}.style.html`);
+    });
+    VARIANTS.filter(v => !['slotted-options'].includes(v)).forEach(variant => {
+        test(variant, async ({ page }) => {
+            const el = page.getByTestId(variant);
+            await expectScreenshot(el, image(`style-${variant}`));
+        });
+    });
+});
+test.describe('host', () => {
+    test.beforeEach('Setup', async ({ page }) => {
+        await page.setupVisualTest(`/components/${TAG}/test/${TAG}.visual.html`);
+    });
+    HOST_VARIANTS.forEach(({ testId, selectId, options }) => {
+        test(testId, async ({ page }) => {
+            const section = page.getByTestId(testId);
+            await expectScreenshot(section, image(testId));
+            // The dropdown is absolutely positioned and overflows the section's box,
+            // so it must be captured against the full page rather than the section itself.
+            const select = new DsSelect(page.locator(`ds-select#${selectId}`));
+            await select.open();
+            await expectScreenshot(page.locator('body'), image(`${testId}-open`));
+            for (const option of options) {
+                await select.option(option).click();
+            }
+            await expectScreenshot(page.locator('body'), image(`${testId}-selected`));
+        });
+    });
+});
+test.describe('html options', () => {
+    test.beforeEach('Setup', async ({ page }) => {
+        await page.setupVisualTest(`/components/${TAG}/test/${TAG}.visual-html-options.html`);
+    });
+    HTML_OPTIONS_VARIANTS.forEach(({ testId, selectId, options }) => {
+        test(testId, async ({ page }) => {
+            const section = page.getByTestId(testId);
+            await expectScreenshot(section, image(`html-options-${testId}`));
+            // The dropdown is absolutely positioned and overflows the section's box,
+            // so it must be captured against the full page rather than the section itself.
+            const select = new DsSelect(page.locator(`ds-select#${selectId}`));
+            await select.open();
+            await expectScreenshot(page.locator('body'), image(`html-options-${testId}-open`));
+            for (const option of options) {
+                await select.option(option).click();
+            }
+            await expectScreenshot(page.locator('body'), image(`html-options-${testId}-selected`));
+        });
+    });
+});

package/dist/collection/components/shape/shape.js

@@ -4,7 +4,7 @@
 import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
 import { shapes } from "./shape.data";
-import { Logger, ValidateOneOf, setupValidation } from "../../utils/index";
+import { Logger, OneOf } from "../../utils/index";
 import { SHAPE_COLORS, SHAPE_ROTATIONS, SHAPE_VARIATIONS, } from "./shape.interfaces";
 /**
  * Shape renders decorative geometric shapes with customizable color, size, rotation, and variation.
@@ -16,7 +16,7 @@ export class Shape {
     constructor() {
         /**
          * PUBLIC PROPERTY API
-         * ------------------------------------------------------
+         * ─────────────────────────────────────────────────────
          */
         /**
          * The shape color
@@ -34,19 +34,12 @@ export class Shape {
     createLogger(log) {
         this.log = log;
     }
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    connectedCallback() {
-        setupValidation(this);
-    }
     /**
      * RENDER
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     render() {
-        return (h(Host, { key: 'a4997790624c0ff88a0cb47049adc3a7663b0078', "aria-hidden": "true" }, h("svg", { key: '8b3f862c7d9976fb0fe1560b890ca29eb7730054', version: "1.1", x: "0px", y: "0px", viewBox: "0 0 198 198", focusable: "false", "aria-hidden": "true" }, shapes[parseInt(this.variation) - 1])));
+        return (h(Host, { key: 'e38fc0e4417b0c820f4f48b3bd6276e3ca745f74', "aria-hidden": "true" }, h("svg", { key: '64feadb80b8a95f7b7d230e9a601a9ad4aabd83f', version: "1.1", x: "0px", y: "0px", viewBox: "0 0 198 198", focusable: "false", "aria-hidden": "true" }, shapes[parseInt(this.variation) - 1])));
     }
     static get is() { return "ds-shape"; }
     static get encapsulation() { return "shadow"; }
@@ -154,14 +147,14 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Shape.prototype, "createLogger", null);
 __decorate([
-    ValidateOneOf(...SHAPE_COLORS),
+    OneOf(SHAPE_COLORS),
     __metadata("design:type", String)
 ], Shape.prototype, "color", void 0);
 __decorate([
-    ValidateOneOf(...SHAPE_ROTATIONS),
+    OneOf(SHAPE_ROTATIONS),
     __metadata("design:type", String)
 ], Shape.prototype, "rotation", void 0);
 __decorate([
-    ValidateOneOf(...SHAPE_VARIATIONS),
+    OneOf(SHAPE_VARIATIONS),
     __metadata("design:type", String)
 ], Shape.prototype, "variation", void 0);