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

package/dist/collection/components/steps/steps/steps.js

@@ -0,0 +1,356 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { h, Host } from "@stencil/core";
+import { Logger, stopEventBubbling, OneOf, Type } from "../../../utils/index";
+import { STEPS_COLORS } from "../steps.interfaces";
+/**
+ * Steps coordinates ds-step and ds-step-panel children into an accessible stepped interface, supporting panels and navigation variants.
+ *
+ * @slot - ds-step-panel children (panels variant).
+ * @slot step - ds-step children; managed automatically by ds-steps.
+ * @part steplist - The steplist container.
+ */
+export class Steps {
+    constructor() {
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * Accent color applied to inactive circles and connector lines.
+         */
+        this.color = '';
+        /**
+         * Accessible label for the navigation landmark (navigation variant only).
+         */
+        this.label = '';
+        /**
+         * If `true`, the steplist is displayed vertically.
+         */
+        this.vertical = false;
+        /**
+         * EVENT HANDLERS
+         * ------------------------------------------------------
+         */
+        this.handleKeyDown = (ev) => {
+            var _a, _b, _c, _d;
+            if (this.isNavigation())
+                return;
+            const focusable = this.getSteps().filter(s => !s.disabled && !s.hidden);
+            const currentIndex = focusable.findIndex(s => s.name === this.value);
+            const isForward = this.vertical ? ev.key === 'ArrowDown' : ev.key === 'ArrowRight';
+            const isBackward = this.vertical ? ev.key === 'ArrowUp' : ev.key === 'ArrowLeft';
+            if (ev.key === 'Home') {
+                ev.preventDefault();
+                this.activateStep((_a = focusable[0]) === null || _a === void 0 ? void 0 : _a.name);
+            }
+            else if (ev.key === 'End') {
+                ev.preventDefault();
+                this.activateStep((_b = focusable[focusable.length - 1]) === null || _b === void 0 ? void 0 : _b.name);
+            }
+            else if (isForward) {
+                ev.preventDefault();
+                this.activateStep((_c = focusable[(currentIndex + 1) % focusable.length]) === null || _c === void 0 ? void 0 : _c.name);
+            }
+            else if (isBackward) {
+                ev.preventDefault();
+                this.activateStep((_d = focusable[(currentIndex - 1 + focusable.length) % focusable.length]) === null || _d === void 0 ? void 0 : _d.name);
+            }
+        };
+        this.handleSlotChange = () => {
+            this.setup();
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    componentDidLoad() {
+        this.setup();
+    }
+    componentDidUpdate() {
+        this.updateChildren();
+    }
+    /**
+     * PROPERTY VALIDATION
+     * ------------------------------------------------------
+     */
+    /**
+     * PUBLIC LISTENERS
+     * ------------------------------------------------------
+     */
+    listenToDsStepSelect(ev) {
+        stopEventBubbling(ev);
+        this.activateStep(ev.detail.name);
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    getSteps() {
+        return Array.from(this.el.querySelectorAll(':scope > ds-step'));
+    }
+    getPanels() {
+        return Array.from(this.el.querySelectorAll(':scope > ds-step-panel'));
+    }
+    isNavigation() {
+        return this.getPanels().length === 0;
+    }
+    setup() {
+        const steps = this.getSteps();
+        const panels = this.getPanels();
+        const isNav = this.isNavigation();
+        let visibleIndex = 0;
+        steps.forEach(step => {
+            step.slot = 'step';
+            step.navigation = isNav;
+            step.vertical = this.vertical;
+            if (!step.hidden) {
+                visibleIndex++;
+                step.index = visibleIndex;
+            }
+            else {
+                step.index = 0;
+            }
+            if (!isNav && step.name) {
+                if (!step.id)
+                    step.id = `ds-step-${stepIds++}`;
+                const panel = panels.find(p => p.for === step.name);
+                if (panel) {
+                    if (!panel.id)
+                        panel.id = `ds-step-panel-${stepIds++}`;
+                    step.setAttribute('aria-controls', panel.id);
+                    panel.setAttribute('aria-labelledby', step.id);
+                }
+            }
+        });
+        if (!isNav && !this.value) {
+            const first = steps.find((s) => !s.hidden && !s.disabled);
+            if (first)
+                this.value = first.name;
+        }
+        this.updateChildren();
+    }
+    updateChildren() {
+        const isNav = this.isNavigation();
+        const steps = this.getSteps();
+        const panels = this.getPanels();
+        let effectiveValue = this.value;
+        // If the selected value is disabled, don't select any step
+        if (!isNav && effectiveValue) {
+            const selectedStep = steps.find((s) => s.name === effectiveValue);
+            if (selectedStep && (selectedStep.disabled || selectedStep.hasAttribute('disabled'))) {
+                effectiveValue = undefined;
+            }
+        }
+        const activeStep = steps.find(s => s.name === effectiveValue);
+        const activeIndex = activeStep ? activeStep.index : 0;
+        steps.forEach(step => {
+            step.navigation = isNav;
+            step.vertical = this.vertical;
+            step.selected = isNav ? !!step.querySelector('[aria-current]') : step.name === effectiveValue;
+            step.activeIndex = activeIndex;
+        });
+        panels.forEach(panel => {
+            panel.selected = panel.for === effectiveValue;
+        });
+    }
+    activateStep(name) {
+        if (name === this.value)
+            return;
+        const step = this.getSteps().find(s => s.name === name);
+        if (step === null || step === void 0 ? void 0 : step.disabled)
+            return;
+        this.value = name;
+        this.dsChange.emit({ value: name });
+        this.focusSelectedStep();
+    }
+    focusSelectedStep() {
+        const selected = this.getSteps().find(s => s.name === this.value);
+        selected === null || selected === void 0 ? void 0 : selected.focus();
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const isNav = this.isNavigation();
+        const hostClass = {
+            'is-vertical': this.vertical,
+            'is-navigation': isNav,
+            'is-purple': this.color === 'purple',
+            'is-green': this.color === 'green',
+            'is-red': this.color === 'red',
+            'is-yellow': this.color === 'yellow',
+        };
+        const slotRef = (el) => {
+            if (el)
+                this.steplistEl = el;
+        };
+        if (isNav) {
+            return (h(Host, { class: hostClass }, h("nav", { "aria-label": this.label || undefined }, h("ol", { id: "steplist", part: "steplist", ref: slotRef }, h("slot", { name: "step", onSlotchange: this.handleSlotChange }))), h("slot", { onSlotchange: this.handleSlotChange })));
+        }
+        return (h(Host, { class: hostClass }, h("div", { id: "steplist", part: "steplist", role: "tablist", "aria-orientation": this.vertical ? 'vertical' : undefined, onKeyDown: this.handleKeyDown, ref: slotRef }, h("slot", { name: "step", onSlotchange: this.handleSlotChange })), h("slot", { onSlotchange: this.handleSlotChange })));
+    }
+    static get is() { return "ds-steps"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["steps.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["steps.host.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StepsColor",
+                    "resolved": "\"\" | \"green\" | \"purple\" | \"red\" | \"yellow\"",
+                    "references": {
+                        "StepsColor": {
+                            "location": "import",
+                            "path": "../steps.interfaces",
+                            "id": "src/components/steps/steps.interfaces.ts::StepsColor",
+                            "referenceLocation": "StepsColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accent color applied to inactive circles and connector lines."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the navigation landmark (navigation variant only)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `name` of the currently selected ds-step (panels variant)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "vertical": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the steplist is displayed vertically."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "vertical",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsChange",
+                "name": "dsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the selected step changes (panels variant only)."
+                },
+                "complexType": {
+                    "original": "StepsChangeDetail",
+                    "resolved": "{ value: string; }",
+                    "references": {
+                        "StepsChangeDetail": {
+                            "location": "import",
+                            "path": "../steps.interfaces",
+                            "id": "src/components/steps/steps.interfaces.ts::StepsChangeDetail",
+                            "referenceLocation": "StepsChangeDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "dsStepSelect",
+                "method": "listenToDsStepSelect",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+__decorate([
+    Logger('steps'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Steps.prototype, "createLogger", null);
+__decorate([
+    OneOf(STEPS_COLORS),
+    __metadata("design:type", String)
+], Steps.prototype, "color", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], Steps.prototype, "label", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", Object)
+], Steps.prototype, "value", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Steps.prototype, "vertical", void 0);
+let stepIds = 0;

package/dist/collection/components/steps/steps.interfaces.js

@@ -0,0 +1,4 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+export const STEPS_COLORS = ['', 'purple', 'green', 'red', 'yellow'];

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

@@ -0,0 +1,73 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { test } from "../../../../../../playwright/src/index";
+const PANELS = `
+  <ds-step name="a" label="Cart"></ds-step>
+  <ds-step name="b" label="Shipping"></ds-step>
+  <ds-step name="c" label="Payment"></ds-step>
+  <ds-step-panel for="a">Content A</ds-step-panel>
+  <ds-step-panel for="b">Content B</ds-step-panel>
+  <ds-step-panel for="c">Content C</ds-step-panel>
+`;
+test.describe('a11y — panels variant', () => {
+    test('basic', async ({ page, a11y }) => {
+        await page.mount(`<ds-steps>${PANELS}</ds-steps>`);
+        await a11y('ds-steps');
+    });
+    test('preset value', async ({ page, a11y }) => {
+        await page.mount(`<ds-steps value="b">${PANELS}</ds-steps>`);
+        await a11y('ds-steps');
+    });
+    test('vertical', async ({ page, a11y }) => {
+        await page.mount(`<ds-steps vertical>${PANELS}</ds-steps>`);
+        await a11y('ds-steps');
+    });
+    test('with done and invalid steps', async ({ page, a11y }) => {
+        await page.mount(`
+      <ds-steps value="c">
+        <ds-step name="a" label="Cart" done></ds-step>
+        <ds-step name="b" label="Shipping" invalid></ds-step>
+        <ds-step name="c" label="Payment"></ds-step>
+        <ds-step-panel for="a">Content A</ds-step-panel>
+        <ds-step-panel for="b">Content B</ds-step-panel>
+        <ds-step-panel for="c">Content C</ds-step-panel>
+      </ds-steps>
+    `);
+        await a11y('ds-steps');
+    });
+    test('with disabled step', async ({ page, a11y }) => {
+        await page.mount(`
+      <ds-steps>
+        <ds-step name="a" label="Cart"></ds-step>
+        <ds-step name="b" label="Shipping" disabled></ds-step>
+        <ds-step name="c" label="Payment"></ds-step>
+        <ds-step-panel for="a">Content A</ds-step-panel>
+        <ds-step-panel for="b">Content B</ds-step-panel>
+        <ds-step-panel for="c">Content C</ds-step-panel>
+      </ds-steps>
+    `);
+        await a11y('ds-steps');
+    });
+});
+test.describe('a11y — navigation variant', () => {
+    test('basic', async ({ page, a11y }) => {
+        await page.mount(`
+      <ds-steps label="Checkout steps">
+        <ds-step name="first" label="Cart"><a href="/first" aria-current="step">Cart</a></ds-step>
+        <ds-step name="second" label="Shipping"><a href="/second">Shipping</a></ds-step>
+        <ds-step name="third" label="Payment"><a href="/third">Payment</a></ds-step>
+      </ds-steps>
+    `);
+        await a11y('ds-steps');
+    });
+    test('vertical', async ({ page, a11y }) => {
+        await page.mount(`
+      <ds-steps label="Checkout steps" vertical>
+        <ds-step name="first" label="Cart"><a href="/first" aria-current="step">Cart</a></ds-step>
+        <ds-step name="second" label="Shipping"><a href="/second">Shipping</a></ds-step>
+      </ds-steps>
+    `);
+        await a11y('ds-steps');
+    });
+});

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

@@ -0,0 +1,182 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { DsSteps, expect, test } from "../../../../../../playwright/src/index";
+const PANELS = `
+  <ds-step name="a" label="Cart"></ds-step>
+  <ds-step name="b" label="Shipping"></ds-step>
+  <ds-step name="c" label="Payment"></ds-step>
+  <ds-step-panel for="a">Content A</ds-step-panel>
+  <ds-step-panel for="b">Content B</ds-step-panel>
+  <ds-step-panel for="c">Content C</ds-step-panel>
+`;
+test.describe('panels variant — initial state', () => {
+    test('selects the first step by default', async ({ page }) => {
+        await page.mount(`<ds-steps>${PANELS}</ds-steps>`);
+        const steps = new DsSteps(page.locator('ds-steps'));
+        await steps.assertStepSelected('a');
+        await steps.assertPanelVisible('a');
+        await steps.assertPanelHidden('b');
+        await steps.assertPanelHidden('c');
+    });
+    test('respects a preset value prop', async ({ page }) => {
+        await page.mount(`<ds-steps value="b">${PANELS}</ds-steps>`);
+        const steps = new DsSteps(page.locator('ds-steps'));
+        await steps.assertStepSelected('b');
+        await steps.assertPanelHidden('a');
+        await steps.assertPanelVisible('b');
+    });
+    test('skips disabled step when auto-selecting', async ({ page }) => {
+        await page.mount(`
+      <ds-steps>
+        <ds-step name="a" label="Cart" disabled></ds-step>
+        <ds-step name="b" label="Shipping"></ds-step>
+        <ds-step name="c" label="Payment"></ds-step>
+        <ds-step-panel for="a">Content A</ds-step-panel>
+        <ds-step-panel for="b">Content B</ds-step-panel>
+        <ds-step-panel for="c">Content C</ds-step-panel>
+      </ds-steps>
+    `);
+        const steps = new DsSteps(page.locator('ds-steps'));
+        await steps.assertStepSelected('b');
+    });
+});
+test.describe('panels variant — interaction', () => {
+    test('clicking a step shows its panel and hides the others', async ({ page }) => {
+        await page.mount(`<ds-steps>${PANELS}</ds-steps>`);
+        const steps = new DsSteps(page.locator('ds-steps'));
+        await steps.selectStep('b');
+        await steps.assertStepSelected('b');
+        await steps.assertStepNotSelected('a');
+        await steps.assertPanelVisible('b');
+        await steps.assertPanelHidden('a');
+        await steps.assertPanelHidden('c');
+    });
+    test('clicking the already selected step does not emit dsChange', async ({ page }) => {
+        await page.mount(`<ds-steps>${PANELS}</ds-steps>`);
+        const steps = new DsSteps(page.locator('ds-steps'));
+        const spy = await steps.el.spyOnEvent('dsChange');
+        await steps.selectStep('a');
+        expect(spy).toHaveReceivedEventTimes(0);
+    });
+    test('clicking a disabled step does nothing', async ({ page }) => {
+        await page.mount(`
+      <ds-steps>
+        <ds-step name="a" label="Cart"></ds-step>
+        <ds-step name="b" label="Shipping" disabled></ds-step>
+        <ds-step-panel for="a">Content A</ds-step-panel>
+        <ds-step-panel for="b">Content B</ds-step-panel>
+      </ds-steps>
+    `);
+        const steps = new DsSteps(page.locator('ds-steps'));
+        const spy = await steps.el.spyOnEvent('dsChange');
+        await steps.selectStep('b');
+        expect(spy).toHaveReceivedEventTimes(0);
+        await steps.assertStepSelected('a');
+    });
+    test('disabled selected step is skipped in tab order', async ({ page }) => {
+        await page.mount(`
+      <button id="before">Before</button>
+      <ds-steps value="b">
+        <ds-step name="a" label="Cart"></ds-step>
+        <ds-step name="b" label="Shipping" disabled></ds-step>
+        <ds-step-panel for="a">Content A</ds-step-panel>
+        <ds-step-panel for="b">Content B</ds-step-panel>
+      </ds-steps>
+      <button id="after">After</button>
+    `);
+        await page.keyboard.press('Tab');
+        await expect(page.locator('#before')).toBeFocused();
+        await page.keyboard.press('Tab');
+        await expect(page.locator('#after')).toBeFocused();
+        await expect(page.locator('ds-step[name="b"]')).not.toBeFocused();
+    });
+});
+test.describe('panels variant — dsChange event', () => {
+    test('emits dsChange with the selected step name', async ({ page }) => {
+        await page.mount(`<ds-steps>${PANELS}</ds-steps>`);
+        const steps = new DsSteps(page.locator('ds-steps'));
+        const spy = await steps.el.spyOnEvent('dsChange');
+        await steps.selectStep('b');
+        expect(spy).toHaveReceivedEventTimes(1);
+        expect(spy).toHaveReceivedEventDetail({ value: 'b' });
+    });
+    test('emits dsChange on each step switch', async ({ page }) => {
+        await page.mount(`<ds-steps>${PANELS}</ds-steps>`);
+        const steps = new DsSteps(page.locator('ds-steps'));
+        const spy = await steps.el.spyOnEvent('dsChange');
+        await steps.selectStep('b');
+        await steps.selectStep('c');
+        expect(spy).toHaveReceivedEventTimes(2);
+        expect(spy).toHaveReceivedEventDetail({ value: 'c' });
+    });
+});
+test.describe('panels variant — keyboard navigation', () => {
+    test('ArrowRight moves to the next step', async ({ page }) => {
+        await page.mount(`<ds-steps>${PANELS}</ds-steps>`);
+        const steps = new DsSteps(page.locator('ds-steps'));
+        await steps.selectStep('a');
+        await page.keyboard.press('ArrowRight');
+        await steps.assertStepSelected('b');
+    });
+    test('ArrowLeft moves to the previous step', async ({ page }) => {
+        await page.mount(`<ds-steps value="b">${PANELS}</ds-steps>`);
+        const steps = new DsSteps(page.locator('ds-steps'));
+        await steps.selectStep('b');
+        await page.keyboard.press('ArrowLeft');
+        await steps.assertStepSelected('a');
+    });
+    test('Home moves to the first step', async ({ page }) => {
+        await page.mount(`<ds-steps value="c">${PANELS}</ds-steps>`);
+        const steps = new DsSteps(page.locator('ds-steps'));
+        await steps.selectStep('c');
+        await page.keyboard.press('Home');
+        await steps.assertStepSelected('a');
+    });
+    test('End moves to the last step', async ({ page }) => {
+        await page.mount(`<ds-steps>${PANELS}</ds-steps>`);
+        const steps = new DsSteps(page.locator('ds-steps'));
+        await steps.selectStep('a');
+        await page.keyboard.press('End');
+        await steps.assertStepSelected('c');
+    });
+    test('ArrowRight wraps from last to first', async ({ page }) => {
+        await page.mount(`<ds-steps value="c">${PANELS}</ds-steps>`);
+        const steps = new DsSteps(page.locator('ds-steps'));
+        await steps.selectStep('c');
+        await page.keyboard.press('ArrowRight');
+        await steps.assertStepSelected('a');
+    });
+    test('ArrowDown moves to next step in vertical mode', async ({ page }) => {
+        await page.mount(`<ds-steps vertical>${PANELS}</ds-steps>`);
+        const steps = new DsSteps(page.locator('ds-steps'));
+        await steps.selectStep('a');
+        await page.keyboard.press('ArrowDown');
+        await steps.assertStepSelected('b');
+    });
+});
+test.describe('navigation variant', () => {
+    test('does not emit dsChange when links are clicked', async ({ page }) => {
+        await page.mount(`
+      <ds-steps label="Checkout">
+        <ds-step name="first" label="Cart"><a href="/first" aria-current="step">Cart</a></ds-step>
+        <ds-step name="second" label="Shipping"><a href="/second">Shipping</a></ds-step>
+      </ds-steps>
+    `);
+        const steps = new DsSteps(page.locator('ds-steps'));
+        const spy = await steps.el.spyOnEvent('dsChange');
+        await steps.step('second').click();
+        expect(spy).toHaveReceivedEventTimes(0);
+    });
+    test('marks the step with aria-current as selected', async ({ page }) => {
+        await page.mount(`
+      <ds-steps label="Checkout">
+        <ds-step name="first" label="Cart"><a href="/first" aria-current="step">Cart</a></ds-step>
+        <ds-step name="second" label="Shipping"><a href="/second">Shipping</a></ds-step>
+      </ds-steps>
+    `);
+        const steps = new DsSteps(page.locator('ds-steps'));
+        await steps.assertStepSelected('first');
+        await steps.assertStepNotSelected('second');
+    });
+});

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

@@ -0,0 +1,18 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { expectScreenshot, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'steps';
+const VARIANTS = ['basic', 'states', 'hidden', 'vertical', 'navigation', 'navigation-vertical', 'colors'];
+const image = screenshot(TAG);
+test.describe('host', () => {
+    test.beforeEach('Setup', async ({ page }) => {
+        await page.setupVisualTest(`/components/${TAG}/test/${TAG}.visual.html`);
+    });
+    VARIANTS.forEach(variant => {
+        test(variant, async ({ page }) => {
+            const el = page.getByTestId(variant);
+            await expectScreenshot(el, image(variant));
+        });
+    });
+});

package/dist/collection/components/tabs/tab/tab.host.css

@@ -0,0 +1 @@
+:host{display:flex;flex-direction:column;outline:none}span,a{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;flex:1;position:relative;display:inline-flex;align-items:center;min-height:2.5rem;gap:.5rem;padding:var(--_tabs-tab-padding);background:none;border:none;cursor:pointer;text-decoration:none;color:var(--_tabs-tab-color);font-family:var(--_tabs-tab-font-family);font-size:var(--_tabs-tab-font-size);font-weight:var(--_tabs-tab-font-weight);outline:none;white-space:nowrap;transition:color 120ms ease}span::after,a::after{content:"";position:absolute;bottom:calc(-1*var(--_tabs-indicator-height));left:0;right:0;height:2px;border-radius:9999px;background-color:rgba(0,0,0,0);transition:background-color 120ms ease}@media(hover: hover)and (pointer: fine){span:hover,a:hover{color:var(--_tabs-tab-color-hover)}span:hover::after,a:hover::after{background-color:var(--_tabs-tab-indicator-color-idle)}}span:active,a:active{color:var(--_tabs-tab-color-active)}span:active::after,a:active::after{background-color:var(--_tabs-tab-indicator-color-idle)}:host(:focus-visible:not(:active)){border-radius:var(--_tabs-tab-radius)}@media(hover: hover)and (pointer: fine){:host(:focus-visible:not(:active)){box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_tabs-tab-color-focus) 0 0 0 5px !important}}span.is-selected,a.is-selected{color:var(--_tabs-tab-color-selected);font-weight:var(--_tabs-tab-font-weight-selected)}span ::slotted(ds-badge.is-sm),a ::slotted(ds-badge.is-sm){position:absolute;top:calc(var(--_tabs-tab-badge-size));right:0;transform:translateY(-50%)}span ::slotted(ds-icon.is-filled:not(.is-auto)),a ::slotted(ds-icon.is-filled:not(.is-auto)){--mod-icon-color: currentColor}:host(.is-fullwidth) span{width:100%;justify-content:center}:host(.is-vertical) span,:host(.is-vertical) a{white-space:normal;justify-content:flex-start;text-align:left}:host(.is-vertical) span::after,:host(.is-vertical) a::after{top:0;bottom:0;left:calc(-1*var(--_tabs-indicator-height));right:auto;width:var(--_tabs-indicator-height);height:auto}:host(.is-inverted) span.is-selected,:host(.is-inverted) a.is-selected{font-family:var(--ds-alias-text-family-heading);font-weight:var(--_tabs-tab-font-weight-selected)}:host(.is-navigation){position:relative;display:inline-flex}:host(.is-navigation)::after{content:"";position:absolute;bottom:calc(-1*var(--_tabs-indicator-height));left:0;right:0;height:2px;border-radius:9999px;background-color:rgba(0,0,0,0);transition:background-color 120ms ease}:host(.is-navigation.is-selected)::after{background-color:var(--_tabs-tab-border-color-selected)}:host(.is-navigation) ::slotted(a){display:inline-flex;align-items:center;min-height:2.5rem;gap:.5rem;padding:var(--_tabs-tab-padding);color:var(--_tabs-tab-color);font-family:var(--_tabs-tab-font-family);font-size:var(--_tabs-tab-font-size);font-weight:var(--_tabs-tab-font-weight);text-decoration:none;white-space:nowrap;transition:color 120ms ease;--mod-icon-color: currentColor}:host(.is-navigation) ::slotted(a:focus-visible:not(:active)){border-radius:var(--_tabs-tab-radius)}@media(hover: hover)and (pointer: fine){:host(.is-navigation) ::slotted(a:focus-visible:not(:active)){box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_tabs-tab-color-focus) 0 0 0 5px !important}}:host(.is-navigation.is-selected) ::slotted(a),:host(.is-navigation) ::slotted([aria-current]){color:var(--_tabs-tab-color-selected);font-weight:var(--_tabs-tab-font-weight-selected)}:host(.is-navigation.is-inverted.is-selected) ::slotted(a),:host(.is-navigation.is-inverted) ::slotted([aria-current]){font-family:var(--ds-alias-text-family-heading);font-weight:var(--_tabs-tab-font-weight-selected)}:host(.is-navigation.is-vertical)::after{top:0;bottom:0;left:calc(-1*var(--_tabs-indicator-height));right:auto;width:2px;height:auto}