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

package/dist/collection/components/input-slider/input-slider.picker.js

@@ -0,0 +1,124 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import noUiSlider from "nouislider";
+import { decimalsFromStep } from "./input-slider.utils";
+export class InputSliderPickerController {
+    constructor(config) {
+        // Set while a programmatic setValue() is in flight, so the 'update'/'set' listeners it
+        // triggers don't echo back out as dsInput/dsChange. Only real user interaction — or a test
+        // harness driving the underlying noUiSlider instance directly — should emit those events;
+        // an external `el.value = x` assignment (e.g. an Angular CVA writeValue()) must not.
+        this.suppressEvents = false;
+        this.config = config;
+        this.init();
+    }
+    /**
+     * PUBLIC API
+     * ------------------------------------------------------
+     */
+    setValue(value) {
+        var _a, _b;
+        if (((_a = this.slider) === null || _a === void 0 ? void 0 : _a.get()) === value)
+            return;
+        this.suppressEvents = true;
+        (_b = this.slider) === null || _b === void 0 ? void 0 : _b.set(value);
+        this.suppressEvents = false;
+    }
+    setDisabled(disabled) {
+        var _a, _b;
+        if (disabled) {
+            (_a = this.slider) === null || _a === void 0 ? void 0 : _a.disable();
+        }
+        else {
+            (_b = this.slider) === null || _b === void 0 ? void 0 : _b.enable();
+        }
+    }
+    setInvalid(invalid) {
+        var _a;
+        (_a = this.handleEl) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-invalid', invalid ? 'true' : 'false');
+    }
+    updateRange(min, max, step) {
+        var _a;
+        (_a = this.slider) === null || _a === void 0 ? void 0 : _a.updateOptions({
+            range: { min: Math.min(min, max), max: Math.max(min, max) },
+            step: numericStep(step),
+            format: buildFormat(step),
+        }, false);
+    }
+    focus() {
+        var _a;
+        (_a = this.handleEl) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    blur() {
+        var _a;
+        (_a = this.handleEl) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    get handleEl() {
+        var _a;
+        return (_a = this.config.targetEl.querySelector('.noUi-handle')) !== null && _a !== void 0 ? _a : undefined;
+    }
+    destroy() {
+        var _a;
+        (_a = this.slider) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.slider = undefined;
+    }
+    /**
+     * PRIVATE
+     * ------------------------------------------------------
+     */
+    init() {
+        const { targetEl, min, max, step, value, disabled, invalid } = this.config;
+        this.slider = noUiSlider.create(targetEl, {
+            range: { min: Math.min(min, max), max: Math.max(min, max) },
+            start: value,
+            step: numericStep(step),
+            format: buildFormat(step),
+            // 'lower' fills the track from the start to the handle (single-handle "progress" look);
+            // the remainder shows the plain track background — see input-slider.host.scss.
+            connect: 'lower',
+            tooltips: true,
+            keyboardSupport: true,
+        });
+        if (disabled)
+            this.slider.disable();
+        // 'set' (not 'change') is used for the commit event: noUiSlider's own .set() API call —
+        // used by the picker's setValue() and by test helpers driving the widget programmatically —
+        // only fires 'update' + 'set', never 'change'. Real user interactions fire both together,
+        // so 'set' covers both cases while 'change' alone would miss programmatic commits.
+        this.slider.on('update', values => {
+            if (this.suppressEvents)
+                return;
+            this.config.onInput(Number(values[0]));
+        });
+        this.slider.on('set', values => {
+            if (this.suppressEvents)
+                return;
+            this.config.onChange(Number(values[0]));
+        });
+        this.connectLabelToHandle();
+        this.setInvalid(invalid);
+    }
+    // A generic noUiSlider handle has no accessible name of its own; connect it to the
+    // Field's label/description, same as SelectPickerController.connectLabelToTrigger().
+    connectLabelToHandle() {
+        const handle = this.handleEl;
+        if (!handle)
+            return;
+        handle.setAttribute('aria-labelledby', this.config.labelId);
+        handle.setAttribute('aria-describedby', 'description');
+    }
+}
+function numericStep(step) {
+    if (step === 'any')
+        return undefined;
+    const parsed = Number(step);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : undefined;
+}
+function buildFormat(step) {
+    const decimals = decimalsFromStep(step);
+    return {
+        to: (value) => Number(value.toFixed(decimals)),
+        from: (value) => Number(value),
+    };
+}

package/dist/collection/components/input-slider/input-slider.utils.js

@@ -0,0 +1,32 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+/**
+ * Clamps `value` into `[min, max]`. Degrades sanely when `min > max` by
+ * treating the effective range as `[min(min, max), max(min, max)]`.
+ */
+export function clampValue(value, min, max) {
+    const lower = Math.min(min, max);
+    const upper = Math.max(min, max);
+    return Math.min(Math.max(value, lower), upper);
+}
+/**
+ * Resolves the initial value: a range input can never be empty, so an unset
+ * (`NaN`, this codebase's "empty number" sentinel — see `isValueEmpty`) value
+ * defaults to `min`.
+ */
+export function resolveInitialValue(value, min) {
+    return isNaN(value) ? min : value;
+}
+/**
+ * Derives the decimal precision implied by a `step` value, so noUiSlider's
+ * `format.to` can round away the floating-point noise its internal
+ * percentage-based math otherwise produces. `"any"` (continuous mode) falls
+ * back to a small fixed precision rather than pretending to be exact.
+ */
+export function decimalsFromStep(step) {
+    if (step === 'any')
+        return 2;
+    const [, fraction = ''] = step.split('.');
+    return fraction.length;
+}

package/dist/collection/components/input-slider/test/input-slider.a11y.play.js

@@ -0,0 +1,36 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { test } from "../../../../../../playwright/src/index";
+test('default', async ({ page, a11y }) => {
+    await page.mount(`<ds-input-slider label="Label" description="Description"></ds-input-slider>`);
+    await a11y('ds-input-slider');
+});
+test('with value', async ({ page, a11y }) => {
+    await page.mount(`<ds-input-slider label="Label" value="42"></ds-input-slider>`);
+    await a11y('ds-input-slider');
+});
+test('disabled', async ({ page, a11y }) => {
+    await page.mount(`<ds-input-slider label="Label" value="42" disabled></ds-input-slider>`);
+    await a11y('ds-input-slider');
+});
+test('readonly', async ({ page, a11y }) => {
+    await page.mount(`<ds-input-slider label="Label" value="42" readonly></ds-input-slider>`);
+    await a11y('ds-input-slider');
+});
+test('invalid', async ({ page, a11y }) => {
+    await page.mount(`<ds-input-slider label="Label" value="42" invalid invalid-text="Validation Error"></ds-input-slider>`);
+    await a11y('ds-input-slider');
+});
+test('success', async ({ page, a11y }) => {
+    await page.mount(`<ds-input-slider label="Label" value="42" color="success"></ds-input-slider>`);
+    await a11y('ds-input-slider');
+});
+test('warning', async ({ page, a11y }) => {
+    await page.mount(`<ds-input-slider label="Label" value="42" color="warning"></ds-input-slider>`);
+    await a11y('ds-input-slider');
+});
+test('with min/max/step', async ({ page, a11y }) => {
+    await page.mount(`<ds-input-slider label="Label" min="0" max="10" step="1" value="5"></ds-input-slider>`);
+    await a11y('ds-input-slider');
+});

package/dist/collection/components/input-slider/test/input-slider.component.play.js

@@ -0,0 +1,87 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { DsInputSlider, expect, test } from "../../../../../../playwright/src/index";
+test.describe('component', () => {
+    test('should fire dsInput with numeric value on fill', async ({ page }) => {
+        await page.mount(`<ds-input-slider label="Label"></ds-input-slider>`);
+        const slider = new DsInputSlider(page.locator('ds-input-slider'));
+        const inputSpy = await slider.el.spyOnEvent('dsInput');
+        await slider.fill('42');
+        expect(inputSpy).toHaveReceivedEventTimes(1);
+        expect(inputSpy).toHaveReceivedEventDetail(42);
+    });
+    test('should fire dsChange with numeric value on fill', async ({ page }) => {
+        await page.mount(`<ds-input-slider label="Label"></ds-input-slider>`);
+        const slider = new DsInputSlider(page.locator('ds-input-slider'));
+        const changeSpy = await slider.el.spyOnEvent('dsChange');
+        await slider.fill('75');
+        expect(changeSpy).toHaveReceivedEventTimes(1);
+        expect(changeSpy).toHaveReceivedEventDetail(75);
+    });
+    test('should fire dsFocus on focus and dsBlur on blur', async ({ page }) => {
+        await page.mount(`<ds-input-slider label="Label"></ds-input-slider>`);
+        const slider = new DsInputSlider(page.locator('ds-input-slider'));
+        const focusSpy = await slider.el.spyOnEvent('dsFocus');
+        const blurSpy = await slider.el.spyOnEvent('dsBlur');
+        await slider.handle.focus();
+        expect(focusSpy).toHaveReceivedEventTimes(1);
+        await slider.blur();
+        expect(blurSpy).toHaveReceivedEventTimes(1);
+    });
+    test('should fire dsClick on click', async ({ page }) => {
+        await page.mount(`<ds-input-slider label="Label"></ds-input-slider>`);
+        const slider = new DsInputSlider(page.locator('ds-input-slider'));
+        const clickSpy = await slider.el.spyOnEvent('dsClick');
+        await slider.handle.click();
+        expect(clickSpy).toHaveReceivedEventTimes(1);
+    });
+});
+test.describe('min/max/step', () => {
+    test('defaults to min when value is unset', async ({ page }) => {
+        await page.mount(`<ds-input-slider label="Label" min="10" max="50"></ds-input-slider>`);
+        const slider = new DsInputSlider(page.locator('ds-input-slider'));
+        await slider.assertValue('10');
+    });
+    test('clamps an out-of-range value to max', async ({ page }) => {
+        await page.mount(`<ds-input-slider label="Label" min="0" max="10" value="42"></ds-input-slider>`);
+        const slider = new DsInputSlider(page.locator('ds-input-slider'));
+        await slider.assertValue('10');
+    });
+});
+test.describe('disabled', () => {
+    test('slider should be disabled', async ({ page }) => {
+        await page.mount(`<ds-input-slider label="Label" value="42" disabled></ds-input-slider>`);
+        const slider = new DsInputSlider(page.locator('ds-input-slider'));
+        const inputSpy = await slider.el.spyOnEvent('dsInput');
+        await slider.assertToBeDisabled();
+        expect(inputSpy).toHaveReceivedEventTimes(0);
+    });
+});
+test.describe('readonly', () => {
+    test('slider should be disabled', async ({ page }) => {
+        await page.mount(`<ds-input-slider label="Label" value="42" readonly></ds-input-slider>`);
+        const slider = new DsInputSlider(page.locator('ds-input-slider'));
+        const inputSpy = await slider.el.spyOnEvent('dsInput');
+        await slider.assertToBeDisabled();
+        expect(inputSpy).toHaveReceivedEventTimes(0);
+    });
+});
+test.describe('form reset', () => {
+    test('should reset to initial value', async ({ page }) => {
+        await page.mount(`
+      <form>
+        <ds-input-slider name="volume" label="Volume" value="30"></ds-input-slider>
+        <button type="reset" data-testid="reset">Reset</button>
+      </form>
+    `);
+        const slider = new DsInputSlider(page.locator('ds-input-slider'));
+        const changeSpy = await slider.el.spyOnEvent('dsChange');
+        await slider.fill('90');
+        expect(changeSpy).toHaveReceivedEventTimes(1);
+        expect(changeSpy).toHaveReceivedEventDetail(90);
+        await page.getByTestId('reset').click();
+        await page.waitForChanges();
+        await slider.assertValue('30');
+    });
+});

package/dist/collection/components/input-slider/test/input-slider.visual.play.js

@@ -0,0 +1,28 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { expectScreenshot, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'input-slider';
+const VARIANTS = [
+    'basic',
+    'disabled',
+    'readonly',
+    'invalid',
+    'invalid-slot',
+    'valid',
+    'warning',
+    'brand-color',
+    'step',
+    'min-max',
+    'form-reset',
+];
+const image = screenshot(TAG);
+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/label/label.host.css

@@ -1 +1 @@
-:host{--_label-position: var(--label-position, var(--mod-label-position, static));--_label-top: var(--label-top, var(--mod-label-top));--_label-right: var(--label-right, var(--mod-label-right));--_label-bottom: var(--label-bottom, var(--mod-label-bottom));--_label-left: var(--label-left, var(--mod-label-left));position:var(--_label-position);top:var(--_label-top);right:var(--_label-right);bottom:var(--_label-bottom);left:var(--_label-left);--_label-m: var(--label-m, var(--mod-label-m, 0));--_label-my: var(--label-my, var(--mod-label-my));--_label-mx: var(--label-mx, var(--mod-label-mx));--_label-ml: var(--label-ml, var(--mod-label-ml));--_label-mr: var(--label-mr, var(--mod-label-mr));--_label-mt: var(--label-mt, var(--mod-label-mt));--_label-mb: var(--label-mb, var(--mod-label-mb));margin:var(--_label-m);margin-inline:var(--_label-mx);margin-block:var(--_label-my);margin-left:var(--_label-ml);margin-right:var(--_label-mr);margin-top:var(--_label-mt);margin-bottom:var(--_label-mb);--_label-color: var(--label-color, var(--mod-label-color, inherit));--_label-family: var(--label-family, var(--mod-label-family, var(--ds-label-family)));--_label-weight: var(--label-weight, var(--mod-label-weight, var(--ds-label-weight)));--_label-line-height: var(--label-line-height, var(--mod-label-line-height, var(--ds-label-line-height)));--_label-size: var(--label-size, var(--mod-label-size, var(--ds-label-size-base-device)))}:host label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;box-sizing:content-box;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;color:var(--_label-color);font-family:var(--_label-family);font-weight:var(--_label-weight);font-size:var(--_label-size);line-height:var(--_label-line-height)}:host(.has-no-wrap) label{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host(.is-lg){--mod-label-family: var(--ds-text-family-heading)}:host(.is-xl){--mod-label-family: var(--ds-text-family-heading)}:host(.is-2xl){--mod-label-family: var(--ds-text-family-heading)}:host(.is-3xl){--mod-label-family: var(--ds-text-family-heading)}:host(.is-sm){--mod-label-size: var(--ds-label-size-sm-device)}:host(.is-base){--mod-label-size: var(--ds-label-size-base-device)}:host(.is-lg){--mod-label-size: var(--ds-label-size-lg-device)}:host(.is-xl){--mod-label-size: var(--ds-label-size-xl-device)}:host(.is-2xl){--mod-label-size: var(--ds-label-size-2xl-device)}:host(.is-3xl){--mod-label-size: var(--ds-label-size-3xl-device)}:host(.is-hovered){--mod-label-color: var(--ds-label-color-base-hover)}:host(.is-pressed){--mod-label-color: var(--ds-label-color-base-active)}:host(.is-valid){--mod-label-color: var(--ds-label-color-success)}:host(.is-invalid){--mod-label-color: var(--ds-label-color-danger)}:host(.is-disabled){--mod-label-color: var(--ds-label-color-disabled) !important}:host{display:block}
+:host{--_label-position: var(--label-position, var(--mod-label-position, static));--_label-top: var(--label-top, var(--mod-label-top));--_label-right: var(--label-right, var(--mod-label-right));--_label-bottom: var(--label-bottom, var(--mod-label-bottom));--_label-left: var(--label-left, var(--mod-label-left));position:var(--_label-position);top:var(--_label-top);right:var(--_label-right);bottom:var(--_label-bottom);left:var(--_label-left);--_label-m: var(--label-m, var(--mod-label-m, 0));--_label-my: var(--label-my, var(--mod-label-my));--_label-mx: var(--label-mx, var(--mod-label-mx));--_label-ml: var(--label-ml, var(--mod-label-ml));--_label-mr: var(--label-mr, var(--mod-label-mr));--_label-mt: var(--label-mt, var(--mod-label-mt));--_label-mb: var(--label-mb, var(--mod-label-mb));margin:var(--_label-m);margin-inline:var(--_label-mx);margin-block:var(--_label-my);margin-left:var(--_label-ml);margin-right:var(--_label-mr);margin-top:var(--_label-mt);margin-bottom:var(--_label-mb);--_label-color: var(--label-color, var(--mod-label-color, inherit));--_label-family: var(--label-family, var(--mod-label-family, var(--ds-label-family)));--_label-weight: var(--label-weight, var(--mod-label-weight, var(--ds-label-weight)));--_label-line-height: var(--label-line-height, var(--mod-label-line-height, var(--ds-label-line-height)));--_label-size: var(--label-size, var(--mod-label-size, var(--ds-label-size-base-device)))}:host label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;box-sizing:content-box;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;color:var(--_label-color);font-family:var(--_label-family);font-weight:var(--_label-weight);font-size:var(--_label-size);line-height:var(--_label-line-height)}:host(.has-no-wrap) label{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host(.is-lg){--mod-label-family: var(--ds-alias-text-family-heading)}:host(.is-xl){--mod-label-family: var(--ds-alias-text-family-heading)}:host(.is-2xl){--mod-label-family: var(--ds-alias-text-family-heading)}:host(.is-3xl){--mod-label-family: var(--ds-alias-text-family-heading)}:host(.is-sm){--mod-label-size: var(--ds-label-size-sm-device)}:host(.is-base){--mod-label-size: var(--ds-label-size-base-device)}:host(.is-lg){--mod-label-size: var(--ds-label-size-lg-device)}:host(.is-xl){--mod-label-size: var(--ds-label-size-xl-device)}:host(.is-2xl){--mod-label-size: var(--ds-label-size-2xl-device)}:host(.is-3xl){--mod-label-size: var(--ds-label-size-3xl-device)}:host(.is-hovered){--mod-label-color: var(--ds-label-color-base-hover)}:host(.is-pressed){--mod-label-color: var(--ds-label-color-base-active)}:host(.is-valid){--mod-label-color: var(--ds-label-color-success)}:host(.is-invalid){--mod-label-color: var(--ds-label-color-danger)}:host(.is-disabled){--mod-label-color: var(--ds-label-color-disabled) !important}:host{display:block}

package/dist/collection/components/label/label.js

@@ -90,7 +90,7 @@ export class Label {
         const id = this.htmlId;
         const htmlFor = this.htmlFor;
         const size = normalizeDeprecatedTShirtSize(this.size) || '';
-        return (h(Host, { key: '9929eb29b4b0da3675aaa7e5506242fbd7627baf', class: {
+        return (h(Host, { key: 'fc8da311fddaf6d546b260a8bf2ae9cec5f39321', class: {
                 'is-hovered': this.hovered,
                 'is-pressed': this.pressed,
                 'is-disabled': this.disabled,
@@ -98,7 +98,7 @@ export class Label {
                 'is-invalid': this.invalid,
                 'has-no-wrap': this.noWrap,
                 [`is-${size}`]: hasValue(this.size),
-            } }, h("label", { key: '638694c2e0dfd40260adba2be2fd812e60a89b1f', id: id, part: "label", htmlFor: htmlFor }, h("slot", { key: 'e3acc2817068c655b9d9874591545c49b904e993' }), suffix)));
+            } }, h("label", { key: '56e31495cbe7d6fd512a0fb5a6b708774116ae25', id: id, part: "label", htmlFor: htmlFor }, h("slot", { key: '062163754a076d54d253c895d5d3d54de0be0127' }), suffix)));
     }
     static get is() { return "ds-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/list/item/item.host.css

@@ -1 +1 @@
-:host{--_list-item-focus: var(--list-item-focus, var(--mod-list-item-focus, var(--ds-alias-interaction-focus-color-base)));--_list-item-grid-template-columns: var(--list-item-grid-template-columns, var(--mod-list-item-grid-template-columns, 1fr));--_list-item-min-height: var(--list-item-min-height, var(--mod-list-item-min-height, 3.5rem));--_list-item-gap: var(--list-item-gap, var(--mod-list-item-gap, 1rem));--_list-item-space: var(--list-item-space, var(--mod-list-item-space, 0.5rem));--_list-item-content-gap: var(--list-item-content-gap, var(--mod-list-item-content-gap, 1px));--_list-item-color: var(--list-item-color, var(--mod-list-item-color, inherit));--_list-item-border-color-base: var(--list-item-border-color-base, var(--mod-list-item-border-color-base, var(--ds-list-item-border-color)));--_list-item-border-color-hover: var(--list-item-border-color-hover, var(--mod-list-item-border-color-hover, var(--ds-link-color-base)));--_list-item-border-color-active: var(--list-item-border-color-active, var(--mod-list-item-border-color-active, var(--ds-link-color-base-active)));--_list-item-border-width: var(--list-item-border-width, var(--mod-list-item-border-width, var(--ds-list-item-border-width, 2px)));--_list-item-border-radius: var(--list-item-border-radius, var(--mod-list-item-border-radius, 12px));--_list-item-background-base: var(--list-item-background-base, var(--mod-list-item-background-base, transparent));--_list-item-background-hover: var(--list-item-background-hover, var(--mod-list-item-background-hover, var(--ds-alias-background-color-primary-lighter)));--_list-item-background-active: var(--list-item-background-active, var(--mod-list-item-background-active, var(--ds-alias-background-color-primary-lighter)));--_list-item-accordion-py: var(--list-item-accordion-py, var(--mod-list-item-accordion-py, var(--ds-alias-space-base-device)));--_list-item-action-icon-size: var(--list-item-action-icon-size, var(--mod-list-item-action-icon-size, var(--ds-icon-size-xs)));--_list-item-title-size: var(--list-item-title-size, var(--mod-list-item-title-size, var(--ds-heading-5-size-device)));--_list-item-title-weight: var(--list-item-title-weight, var(--mod-list-item-title-weight, var(--ds-alias-text-weight-bold)));--_list-item-title-family: var(--list-item-title-family, var(--mod-list-item-title-family, var(--ds-global-font-family-heading)));--_list-item-text-family: var(--list-item-text-family, var(--mod-list-item-text-family, var(--ds-global-font-family-body)));--_list-item-text-weight: var(--list-item-text-weight, var(--mod-list-item-text-weight, var(--ds-alias-text-weight-regular)));--_list-item-text-size: var(--list-item-text-size, var(--mod-list-item-text-size, var(--ds-text-size-sm-device)))}:host{position:relative;display:grid;box-sizing:border-box;grid-template-columns:var(--_list-item-grid-template-columns)}:host ::slotted([slot=content]){min-height:46px}:host #item{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:var(--_list-item-gap);width:100%;color:var(--_list-item-color);background:inherit;border:none;align-self:stretch;text-align:left;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--_list-item-title-family);padding:var(--_list-item-space) .25rem;padding-bottom:calc(var(--_list-item-space) + 2px);min-height:var(--_list-item-min-height)}:host #item ds-icon{flex-shrink:0}:host #item #content+ds-icon{--icon-size: var(--_list-item-action-icon-size);--icon-inner-size: var(--_list-item-action-icon-size)}:host #item #content{flex:1;display:flex;flex-direction:column;gap:var(--_list-item-content-gap);font-family:var(--_list-item-text-family);font-weight:var(--_list-item-text-weight)}:host #item #label{font-family:var(--_list-item-title-family);font-weight:var(--_list-item-title-weight);font-size:var(--_list-item-title-size);margin:0}:host #item #description{font-family:var(--_list-item-text-family);font-weight:var(--_list-item-text-weight);font-size:var(--_list-item-text-size);margin:0}:host #item:after{content:"";border-radius:var(--_list-item-border-radius);width:100%;position:absolute;bottom:0;left:0;right:0;height:var(--_list-item-border-width);background:var(--_list-item-border-color-base)}:host(.has-label-h1){--mod-list-item-title-size: var(--ds-heading-1-size-device)}:host(.has-label-3xl){--mod-list-item-title-size: var(--ds-heading-1-size-device)}:host(.has-label-h2){--mod-list-item-title-size: var(--ds-heading-2-size-device)}:host(.has-label-2xl){--mod-list-item-title-size: var(--ds-heading-2-size-device)}:host(.has-label-h3){--mod-list-item-title-size: var(--ds-heading-3-size-device)}:host(.has-label-xl){--mod-list-item-title-size: var(--ds-heading-3-size-device)}:host(.has-label-h4){--mod-list-item-title-size: var(--ds-heading-4-size-device)}:host(.has-label-lg){--mod-list-item-title-size: var(--ds-heading-4-size-device)}:host(.has-label-h5){--mod-list-item-title-size: var(--ds-heading-5-size-device)}:host(.has-label-base){--mod-list-item-title-size: var(--ds-heading-5-size-device)}:host(.is-link) #item,:host(.is-button) #item{-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;text-decoration:none;outline:none;cursor:pointer;background:var(--_list-item-background-base)}:host(.is-link) #item::-moz-focus-inner,:host(.is-button) #item::-moz-focus-inner{border:0}:host(.is-link) #item #content,:host(.is-button) #item #content{hyphens:auto;overflow-wrap:break-word;font-family:var(--_list-item-title-family);font-weight:var(--_list-item-title-weight);font-size:var(--_list-item-title-size);color:var(--ds-link-color-base)}@media(hover: hover)and (pointer: fine){:host(.is-link) #item:hover,:host(.is-link) #item.is-hovered,:host(.is-button) #item:hover,:host(.is-button) #item.is-hovered{background:var(--_list-item-background-hover)}}:host(.is-link) #item:active,:host(.is-link) #item.is-pressed,:host(.is-button) #item:active,:host(.is-button) #item.is-pressed{background:var(--_list-item-background-active);color:var(--ds-link-color-base-active)}:host(.is-link) #item:active #content,:host(.is-link) #item.is-pressed #content,:host(.is-button) #item:active #content,:host(.is-button) #item.is-pressed #content{color:var(--ds-link-color-base-active)}:host(.is-link) #item:active ds-icon,:host(.is-link) #item:active ::slotted(ds-icon),:host(.is-link) #item:active ::slotted(ds-badge),:host(.is-link) #item.is-pressed ds-icon,:host(.is-link) #item.is-pressed ::slotted(ds-icon),:host(.is-link) #item.is-pressed ::slotted(ds-badge),:host(.is-button) #item:active ds-icon,:host(.is-button) #item:active ::slotted(ds-icon),:host(.is-button) #item:active ::slotted(ds-badge),:host(.is-button) #item.is-pressed ds-icon,:host(.is-button) #item.is-pressed ::slotted(ds-icon),:host(.is-button) #item.is-pressed ::slotted(ds-badge){--icon-color: var(--ds-link-color-base-active)}:host(.is-link) #item:before,:host(.is-button) #item:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;border-radius:var(--ds-alias-radius-base);touch-action:manipulation;transition-property:box-shadow;transition-duration:.2s;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}:host(.is-link) #item:focus-visible:not(:active):before,:host(.is-link) #item.is-focused:not(:active):before,:host(.is-button) #item:focus-visible:not(:active):before,:host(.is-button) #item.is-focused:not(:active):before{box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_list-item-focus) 0 0 0 5px !important}@media(hover: hover)and (pointer: fine){:host(.is-link) #item:hover:after,:host(.is-link) #item.is-hovered:after,:host(.is-button) #item:hover:after,:host(.is-button) #item.is-hovered:after,:host(.is-accordion) #item:hover:after,:host(.is-accordion) #item.is-hovered:after{background:var(--_list-item-border-color-hover)}}:host(.is-link) #item:active:after,:host(.is-link) #item.is-pressed:after,:host(.is-button) #item:active:after,:host(.is-button) #item.is-pressed:after,:host(.is-accordion) #item:active:after,:host(.is-accordion) #item.is-pressed:after{background:var(--_list-item-border-color-active)}:host(.is-accordion) ::slotted(p){padding-block:var(--_list-item-accordion-py)}:host(.is-accordion) ds-accordion{--accordion-summary-color-hover: var(--ds-link-color-base)}:host(.is-accordion) ds-accordion::part(header){background:var(--_list-item-background-base)}:host(.is-accordion) ds-accordion::part(summary){padding-right:.25rem}:host(.is-accordion) ds-accordion::part(summary):hover{background:var(--_list-item-background-hover)}:host(.is-accordion) ds-accordion::part(summary):active{background:var(--_list-item-background-active)}:host(.is-accordion) #accordion-content:after{content:"";border-radius:var(--_list-item-border-radius);width:100%;position:absolute;bottom:0;left:0;right:0;height:var(--_list-item-border-width);background:var(--_list-item-border-color-base)}:host(.is-disabled) #item{pointer-events:none !important;cursor:default !important;color:var(--ds-list-item-disabled)}:host(.is-disabled) #item #content{color:var(--ds-list-item-disabled)}:host(.is-disabled) #item ds-icon,:host(.is-disabled) #item ds-badge,:host(.is-disabled) #item ::slotted(ds-icon),:host(.is-disabled) #item ::slotted(ds-badge){--icon-color: var(--ds-list-item-disabled)}:host(.is-disabled) #item ds-badge,:host(.is-disabled) #item ::slotted(ds-badge){--badge-color-background: var(--ds-badge-color-grey-background);--badge-color-text: var(--ds-badge-color-grey-text)}
+:host{--_list-item-focus: var(--list-item-focus, var(--mod-list-item-focus, var(--ds-alias-interaction-focus-color-base)));--_list-item-grid-template-columns: var(--list-item-grid-template-columns, var(--mod-list-item-grid-template-columns, 1fr));--_list-item-min-height: var(--list-item-min-height, var(--mod-list-item-min-height, 3.5rem));--_list-item-gap: var(--list-item-gap, var(--mod-list-item-gap, 1rem));--_list-item-space: var(--list-item-space, var(--mod-list-item-space, 0.5rem));--_list-item-content-gap: var(--list-item-content-gap, var(--mod-list-item-content-gap, 1px));--_list-item-color: var(--list-item-color, var(--mod-list-item-color, inherit));--_list-item-border-color-base: var(--list-item-border-color-base, var(--mod-list-item-border-color-base, var(--ds-list-item-border-color)));--_list-item-border-color-hover: var(--list-item-border-color-hover, var(--mod-list-item-border-color-hover, var(--ds-link-color-base)));--_list-item-border-color-active: var(--list-item-border-color-active, var(--mod-list-item-border-color-active, var(--ds-link-color-base-active)));--_list-item-border-width: var(--list-item-border-width, var(--mod-list-item-border-width, var(--ds-list-item-border-width, 2px)));--_list-item-border-radius: var(--list-item-border-radius, var(--mod-list-item-border-radius, 12px));--_list-item-background-base: var(--list-item-background-base, var(--mod-list-item-background-base, transparent));--_list-item-background-hover: var(--list-item-background-hover, var(--mod-list-item-background-hover, var(--ds-alias-background-color-primary-lighter)));--_list-item-background-active: var(--list-item-background-active, var(--mod-list-item-background-active, var(--ds-alias-background-color-primary-lighter)));--_list-item-accordion-py: var(--list-item-accordion-py, var(--mod-list-item-accordion-py, var(--ds-alias-space-base-device)));--_list-item-action-icon-size: var(--list-item-action-icon-size, var(--mod-list-item-action-icon-size, var(--ds-icon-size-xs)));--_list-item-title-size: var(--list-item-title-size, var(--mod-list-item-title-size, var(--ds-heading-5-size-device)));--_list-item-title-weight: var(--list-item-title-weight, var(--mod-list-item-title-weight, var(--ds-alias-text-weight-bold)));--_list-item-title-family: var(--list-item-title-family, var(--mod-list-item-title-family, var(--ds-global-font-family-heading)));--_list-item-text-family: var(--list-item-text-family, var(--mod-list-item-text-family, var(--ds-global-font-family-body)));--_list-item-text-weight: var(--list-item-text-weight, var(--mod-list-item-text-weight, var(--ds-alias-text-weight-regular)));--_list-item-text-size: var(--list-item-text-size, var(--mod-list-item-text-size, var(--ds-alias-text-size-sm-device)))}:host{position:relative;display:grid;box-sizing:border-box;grid-template-columns:var(--_list-item-grid-template-columns)}:host ::slotted([slot=content]){min-height:46px}:host #item{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:var(--_list-item-gap);width:100%;color:var(--_list-item-color);background:inherit;border:none;align-self:stretch;text-align:left;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--_list-item-title-family);padding:var(--_list-item-space) .25rem;padding-bottom:calc(var(--_list-item-space) + 2px);min-height:var(--_list-item-min-height)}:host #item ds-icon{flex-shrink:0}:host #item #content+ds-icon{--icon-size: var(--_list-item-action-icon-size);--icon-inner-size: var(--_list-item-action-icon-size)}:host #item #content{flex:1;display:flex;flex-direction:column;gap:var(--_list-item-content-gap);font-family:var(--_list-item-text-family);font-weight:var(--_list-item-text-weight)}:host #item #label{font-family:var(--_list-item-title-family);font-weight:var(--_list-item-title-weight);font-size:var(--_list-item-title-size);margin:0}:host #item #description{font-family:var(--_list-item-text-family);font-weight:var(--_list-item-text-weight);font-size:var(--_list-item-text-size);margin:0}:host #item:after{content:"";border-radius:var(--_list-item-border-radius);width:100%;position:absolute;bottom:0;left:0;right:0;height:var(--_list-item-border-width);background:var(--_list-item-border-color-base)}:host(.has-label-h1){--mod-list-item-title-size: var(--ds-heading-1-size-device)}:host(.has-label-3xl){--mod-list-item-title-size: var(--ds-heading-1-size-device)}:host(.has-label-h2){--mod-list-item-title-size: var(--ds-heading-2-size-device)}:host(.has-label-2xl){--mod-list-item-title-size: var(--ds-heading-2-size-device)}:host(.has-label-h3){--mod-list-item-title-size: var(--ds-heading-3-size-device)}:host(.has-label-xl){--mod-list-item-title-size: var(--ds-heading-3-size-device)}:host(.has-label-h4){--mod-list-item-title-size: var(--ds-heading-4-size-device)}:host(.has-label-lg){--mod-list-item-title-size: var(--ds-heading-4-size-device)}:host(.has-label-h5){--mod-list-item-title-size: var(--ds-heading-5-size-device)}:host(.has-label-base){--mod-list-item-title-size: var(--ds-heading-5-size-device)}:host(.is-link) #item,:host(.is-button) #item{-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;text-decoration:none;outline:none;cursor:pointer;background:var(--_list-item-background-base)}:host(.is-link) #item::-moz-focus-inner,:host(.is-button) #item::-moz-focus-inner{border:0}:host(.is-link) #item #content,:host(.is-button) #item #content{hyphens:auto;overflow-wrap:break-word;font-family:var(--_list-item-title-family);font-weight:var(--_list-item-title-weight);font-size:var(--_list-item-title-size);color:var(--ds-link-color-base)}@media(hover: hover)and (pointer: fine){:host(.is-link) #item:hover,:host(.is-link) #item.is-hovered,:host(.is-button) #item:hover,:host(.is-button) #item.is-hovered{background:var(--_list-item-background-hover)}}:host(.is-link) #item:active,:host(.is-link) #item.is-pressed,:host(.is-button) #item:active,:host(.is-button) #item.is-pressed{background:var(--_list-item-background-active);color:var(--ds-link-color-base-active)}:host(.is-link) #item:active #content,:host(.is-link) #item.is-pressed #content,:host(.is-button) #item:active #content,:host(.is-button) #item.is-pressed #content{color:var(--ds-link-color-base-active)}:host(.is-link) #item:active ds-icon,:host(.is-link) #item:active ::slotted(ds-icon),:host(.is-link) #item:active ::slotted(ds-badge),:host(.is-link) #item.is-pressed ds-icon,:host(.is-link) #item.is-pressed ::slotted(ds-icon),:host(.is-link) #item.is-pressed ::slotted(ds-badge),:host(.is-button) #item:active ds-icon,:host(.is-button) #item:active ::slotted(ds-icon),:host(.is-button) #item:active ::slotted(ds-badge),:host(.is-button) #item.is-pressed ds-icon,:host(.is-button) #item.is-pressed ::slotted(ds-icon),:host(.is-button) #item.is-pressed ::slotted(ds-badge){--icon-color: var(--ds-link-color-base-active)}:host(.is-link) #item:before,:host(.is-button) #item:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;border-radius:var(--ds-alias-radius-base);touch-action:manipulation;transition-property:box-shadow;transition-duration:.2s;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}:host(.is-link) #item:focus-visible:not(:active):before,:host(.is-link) #item.is-focused:not(:active):before,:host(.is-button) #item:focus-visible:not(:active):before,:host(.is-button) #item.is-focused:not(:active):before{box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_list-item-focus) 0 0 0 5px !important}@media(hover: hover)and (pointer: fine){:host(.is-link) #item:hover:after,:host(.is-link) #item.is-hovered:after,:host(.is-button) #item:hover:after,:host(.is-button) #item.is-hovered:after,:host(.is-accordion) #item:hover:after,:host(.is-accordion) #item.is-hovered:after{background:var(--_list-item-border-color-hover)}}:host(.is-link) #item:active:after,:host(.is-link) #item.is-pressed:after,:host(.is-button) #item:active:after,:host(.is-button) #item.is-pressed:after,:host(.is-accordion) #item:active:after,:host(.is-accordion) #item.is-pressed:after{background:var(--_list-item-border-color-active)}:host(.is-accordion) ::slotted(p){padding-block:var(--_list-item-accordion-py)}:host(.is-accordion) ds-accordion{--accordion-summary-color-hover: var(--ds-link-color-base)}:host(.is-accordion) ds-accordion::part(header){background:var(--_list-item-background-base)}:host(.is-accordion) ds-accordion::part(summary){padding-right:.25rem}:host(.is-accordion) ds-accordion::part(summary):hover{background:var(--_list-item-background-hover)}:host(.is-accordion) ds-accordion::part(summary):active{background:var(--_list-item-background-active)}:host(.is-accordion) #accordion-content:after{content:"";border-radius:var(--_list-item-border-radius);width:100%;position:absolute;bottom:0;left:0;right:0;height:var(--_list-item-border-width);background:var(--_list-item-border-color-base)}:host(.is-disabled) #item{pointer-events:none !important;cursor:default !important;color:var(--ds-list-item-disabled)}:host(.is-disabled) #item #content{color:var(--ds-list-item-disabled)}:host(.is-disabled) #item ds-icon,:host(.is-disabled) #item ds-badge,:host(.is-disabled) #item ::slotted(ds-icon),:host(.is-disabled) #item ::slotted(ds-badge){--icon-color: var(--ds-list-item-disabled)}:host(.is-disabled) #item ds-badge,:host(.is-disabled) #item ::slotted(ds-badge){--badge-color-background: var(--ds-badge-grey-color-background);--badge-color-text: var(--ds-badge-grey-color-text)}

package/dist/collection/components/list/list.js

@@ -30,7 +30,7 @@ export class List {
      */
     render() {
         const ListTag = this.ordered ? 'ol' : 'ul';
-        return (h(Host, { key: '915a10d31287e37f5c441d3717d724f654030415' }, h(ListTag, { key: '8d9813dde9199fc414bdc05878a4f6ba54553eb8', id: "list", part: "list" }, h("slot", { key: '523bc1c0172e9ed3af963610e417bc522672ded5' }))));
+        return (h(Host, { key: '18a1ec534ee775626dd769eab44db3fc34e8081a' }, h(ListTag, { key: '5e79d69a0164b8061841ccaf3900b19eb1260f66', id: "list", part: "list" }, h("slot", { key: '0274b66daeadd3c1675cce77ac75f2e26c69b9c0' }))));
     }
     static get is() { return "ds-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/logo/logo.js

@@ -140,12 +140,12 @@ export class Logo {
     render() {
         const size = normalizeDeprecatedTShirtSize(this.size) || '';
         const LogoElement = this.brand === 'helvetia' || (this.brand === '' && this.configBrand === 'helvetia') ? (h(LogoHelvetia, { onlyText: this.animated, height: this.getHeight() })) : (h(LogoBaloise, { onlyText: this.animated, height: this.getHeight() }));
-        return (h(Host, { key: '549891bcf54e833cc226fecd178f6aabbfd8bcfa', class: {
+        return (h(Host, { key: '49c188a3abc26836396e1b81abcc1afde8f27b80', class: {
                 'is-animated': this.isAnimated,
                 'is-white': this.color === 'white',
                 'is-sm': size === 'sm',
                 'is-lg': size === 'lg',
-            } }, h("div", { key: '91dd1d3eb07ee2b0da7396558137dde63bcde0da', id: "animated", part: "animated", ref: el => (this.animatedLogoElement = el), "aria-hidden": "true", style: {
+            } }, h("div", { key: 'b7658409d4580d88a45744c608790b76fa21983e', id: "animated", part: "animated", ref: el => (this.animatedLogoElement = el), "aria-hidden": "true", style: {
                 display: this.isAnimated ? 'block' : 'none',
                 width: this.getHeight() + 'px',
                 height: this.getHeight() + 'px',

package/dist/collection/components/modal/modal-body/modal-body.js

@@ -17,7 +17,7 @@ export class ModalBody {
         this.el.slot = 'body';
     }
     render() {
-        return (h(Host, { key: '2e1c21ff62b36dc89b1589174b3ede2979eeb384' }, h("slot", { key: 'd1bb0237d1ac252c645da88b7375500b01c14ae1' })));
+        return (h(Host, { key: '17c373c9b96242ab98ec193642582c5418c5a24b' }, h("slot", { key: '459e1ac594f03d23e9c9854501485f91aa148d0a' })));
     }
     static get is() { return "ds-modal-body"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/modal-header/modal-header.js

@@ -19,7 +19,7 @@ export class ModalHeader {
         this.el.slot = 'header';
     }
     render() {
-        return (h(Host, { key: '05b088ad50f8c43b72b855cb240d0c2ca2b9466c', style: { display: 'contents' } }, h("slot", { key: '729c1b5a1891548bb0fe4436ae3d04c7cc7f1c10' })));
+        return (h(Host, { key: 'b164ba40c3979cc9639c0c3adaca67e14effa85e', style: { display: 'contents' } }, h("slot", { key: '20c51614ea66de41b838e7d411542011288c1985' })));
     }
     static get is() { return "ds-modal-header"; }
     static get elementRef() { return "el"; }

package/dist/collection/components/modal/modal.js

@@ -156,11 +156,11 @@ export class Modal {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: '62b900eb4c6d645d6ed18838b6e5f5230f34d2ba', class: {
+        return (h(Host, { key: '9bbdd2e3675ebcdf8c9307124efd5a6dbf6ed3d2', class: {
                 'is-open': this.isOpen,
                 'is-animated': this.animated,
                 'is-fullscreen': this.fullscreen,
-            }, style: { '--_modal-width': `${this.modalWidth}px` } }, h("dialog", { key: '744edb0cc3a0af3bdc01fbaf2acd9108f1ea6ecf', part: "dialog", ref: el => (this.dialogEl = el), "aria-labelledby": "modal-title", "aria-describedby": "modal-body", onClick: this.handleBackdropClick }, this.closable && h("ds-close", { key: 'e0328f19021f81ba7f1a4ccb4b9a7c444f623509', part: "close", onClick: () => (this.open = false) }), h("h2", { key: 'c9e8363bf136aa21fbaae2120a32847ef6189dee', id: "modal-title", part: "title" }, h("slot", { key: '3b061b840fd0b98c07ad22210c78a1d5390ec055', name: "header" })), h("div", { key: '9ca6ff7d5216ef7ee8f179ba73ed10531e6e3ccc', id: "modal-body", part: "body" }, h("slot", { key: 'dece7c125221ad7465f70ddd29bc47741b444b0a', name: "body" })), h("div", { key: 'dc1980a3c0b1da4d8a37d50e2a4ab3e2e45516c3', id: "modal-actions", part: "actions" }, h("slot", { key: 'a79074f106e57cb89d39354b46a82842493c0a0c', name: "actions" })))));
+            }, style: { '--_modal-width': `${this.modalWidth}px` } }, h("dialog", { key: 'dc18ceb8343d55b7a85d8a322d8f47fd2d8533a7', part: "dialog", ref: el => (this.dialogEl = el), "aria-labelledby": "modal-title", "aria-describedby": "modal-body", onClick: this.handleBackdropClick }, this.closable && h("ds-close", { key: '4fcca7c147ab406deb3471c3d4a8c10b8a503c81', part: "close", onClick: () => (this.open = false) }), h("h2", { key: '5ee65427e9c4eeaea3e165bbd822df406b2229dd', id: "modal-title", part: "title" }, h("slot", { key: '618d0ec490196852e4e55e2f6ed984e292c6f944', name: "header" })), h("div", { key: '6ac9a5ab80df8ae47e41867dbeceb8682cd61c0c', id: "modal-body", part: "body" }, h("slot", { key: '65b86fa28a2c5bfb3c95d5a12f185dab36fd7c25', name: "body" })), h("div", { key: '49d632c6b1791c90e1acd89fc3004e0fc6bb3458', id: "modal-actions", part: "actions" }, h("slot", { key: '4b6fb255556a20c37bb79fcab95b0619bdace7a8', name: "actions" })))));
     }
     static get is() { return "ds-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/navbar/navbar.js

@@ -229,14 +229,14 @@ export class Navbar {
         const isMenuOpen = this.isSidebarOpen;
         const isSidebarMode = isTouch || this.isOverflowing;
         const i18n = i18nDsNavbar[this.language];
-        return (h(Host, { key: 'd1d6fe2b8427f6685b71ac943c6c25a77cc7d29a', class: {
+        return (h(Host, { key: '4751141c9276638d58183322206828c49f38d67a', class: {
                 'is-open': isMenuOpen,
                 'is-sidebar-mode': isSidebarMode,
                 'is-light': this.light,
-            } }, h("nav", { key: 'ad444ede1a0403f07f444ea0690a462278c8cd2b', ref: el => (this.navEl = el), id: "nav", role: "navigation", "aria-label": i18n.mainNavigation }, h("div", { key: '1283a81c4aea12968c29ce7acea013e0f5bd9517', id: "container", class: {
+            } }, h("nav", { key: 'b142ac6bf25cdd48aff78158ebc49cd79889db0f', ref: el => (this.navEl = el), id: "nav", role: "navigation", "aria-label": i18n.mainNavigation }, h("div", { key: '056bda2d8ba50d01e34f4c000be406cc6ed546fe', id: "container", class: {
                 'is-fluid': this.container === 'fluid',
                 'is-compact': this.container === 'compact',
-            }, ref: el => (this.containerEl = el) }, h("slot", { key: '5ee4b6dfb635e7da66d997e32c888f9938f534ed', name: "brand" }), h("slot", { key: '1842957278e926ebbad94af2be4ed9e307514f15', name: "title" }), h("div", { key: '9a0d72133cfacf2ee5c2fc7b667eb5c3f8b4ff4c', id: "content" }, !isSidebarMode && (h("div", { key: '888c531c11e5c6608037c3f2ed65fa70e092b3e1', id: "menu" }, h("div", { key: '6c67c0a018968a4b876fb0649cf771a4bc3be8f3', id: "menu-start" }, h("slot", { key: '36645b41db88550fba4d98d79f83f036136f2de1', name: "menu-start" })), h("div", { key: '01d1b694734f14b12893b6f9725d77bbd87494ea', id: "menu-end" }, h("slot", { key: '98be249966e4f0139944631052e2fd0c8c1209b1', name: "menu-end" })))), h("div", { key: '78e6833390750a161561412abb2db338034a14a9', id: "actions" }, h("slot", { key: 'e8bf50d3790e69523952060fff33aaf61e1a80ad', name: "actions" }), isSidebarMode && (h("button", { key: 'd7ed939c79ee98919a158e2b713386b031404550', ref: el => (this.burgerButton = el), id: "hamburger", type: "button", title: isMenuOpen ? i18n.closeMenu : i18n.openMenu, "aria-label": isMenuOpen ? i18n.closeMenu : i18n.openMenu, "aria-expanded": isMenuOpen, "aria-controls": "sidebar", onClick: () => this.handleHamburgerClick() }, h("ds-icon", { key: '0c8a7c53544d7c2c0b7aac5e91f7ab32bfa857a6', name: isMenuOpen ? 'close' : 'menu-bars', size: "", color: "white" })))))), isSidebarMode && (h("aside", { key: '40ac910cfa7c5610311883bd92cb743601570f04', id: "sidebar", role: "dialog", "aria-modal": "true", "aria-label": i18n.navigationMenu, class: { 'is-open': isMenuOpen }, ref: el => (this.sidebarEl = el) }, h("div", { key: '59262ffc7c7d40659584fe4ffcd41d32606e7501', id: "sidebar-backdrop", onClick: this.handleBackdropClick }), h("div", { key: '1debe69728a1868e0680066a6efd7ba9fa0a0a22', id: "sidebar-panel", tabindex: "-1" }, h("div", { key: 'f1d380906397ec3e959013284fb3feaa489800d7', id: "sidebar-content" }, h("div", { key: 'bbe972dc6f5e96d66473e4301706838dadb6e85e', id: "sidebar-start" }, h("slot", { key: '7177345c52b8bc829417db81fb3d107de920ce15', name: "menu-start" })), h("div", { key: 'a416d3e2a3b5fb87555e7b7bbe1020a4b1998bae', id: "sidebar-end" }, h("slot", { key: '953903c4a9ae1007ae5cd3a294e3c091b534945b', name: "menu-end" })))))))));
+            }, ref: el => (this.containerEl = el) }, h("slot", { key: '837d06a2d3205deb6f155322cc5f1a9484835cbb', name: "brand" }), h("slot", { key: 'c50410f1c714b5f6d9aa9603312d3642aae3f342', name: "title" }), h("div", { key: '047cf2da3762320ab02e1ab305b58f3c074c6c0d', id: "content" }, !isSidebarMode && (h("div", { key: '2e0010d0470373050d84d0f099fc73156e3f3099', id: "menu" }, h("div", { key: 'f7b8c0e885f747ae2ee03f1ff223484be8699cf5', id: "menu-start" }, h("slot", { key: 'a7a172470428bfc5668f25d6387c33b281303aa1', name: "menu-start" })), h("div", { key: 'a31d2061cc68cfba618b1f7efd9200bcb88a237a', id: "menu-end" }, h("slot", { key: '2a7aa495db2db5313f84d4f98ab6f52151caaf95', name: "menu-end" })))), h("div", { key: 'c596c26adaa4fdef8063fc36f1470e4b0afc8b9c', id: "actions" }, h("slot", { key: 'a7b4f6c2522715aeb5c536c8f022b74913839969', name: "actions" }), isSidebarMode && (h("button", { key: '844afe3c1617c51f913b2b7b155fadf7dd788caa', ref: el => (this.burgerButton = el), id: "hamburger", type: "button", title: isMenuOpen ? i18n.closeMenu : i18n.openMenu, "aria-label": isMenuOpen ? i18n.closeMenu : i18n.openMenu, "aria-expanded": isMenuOpen, "aria-controls": "sidebar", onClick: () => this.handleHamburgerClick() }, h("ds-icon", { key: 'fea68d648cddd553deaea422f78738ffd33ae329', name: isMenuOpen ? 'close' : 'menu-bars', size: "", color: "white" })))))), isSidebarMode && (h("aside", { key: 'd7cca3a0a9c98262baf322ad17c8480142c4856f', id: "sidebar", role: "dialog", "aria-modal": "true", "aria-label": i18n.navigationMenu, class: { 'is-open': isMenuOpen }, ref: el => (this.sidebarEl = el) }, h("div", { key: 'e59e4562f388c3e17b757be5532292271bf97312', id: "sidebar-backdrop", onClick: this.handleBackdropClick }), h("div", { key: '7e1813c533e5ae1edb40b4a5f3cb89eff9198e2d', id: "sidebar-panel", tabindex: "-1" }, h("div", { key: '20989ff5635db54ec7e6a6e6c4fb8d9f0f95ee01', id: "sidebar-content" }, h("div", { key: '91b497cd27858444399806749434126d508551d7', id: "sidebar-start" }, h("slot", { key: '3666487b26799818741b7e5022a0c90e7485adb3', name: "menu-start" })), h("div", { key: 'f30d9b73f3b706acc184eb39b2e555d58259d813', id: "sidebar-end" }, h("slot", { key: '36d1d16c15f23413a5fcd8af087b4c5a8bf4f2fc', name: "menu-end" })))))))));
     }
     static get is() { return "ds-navbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/notification/notification.host.css

@@ -1 +1 @@
-:host{--_notification-position: var(--notification-position, var(--mod-notification-position, static));--_notification-top: var(--notification-top, var(--mod-notification-top));--_notification-right: var(--notification-right, var(--mod-notification-right));--_notification-bottom: var(--notification-bottom, var(--mod-notification-bottom));--_notification-left: var(--notification-left, var(--mod-notification-left));position:var(--_notification-position);top:var(--_notification-top);right:var(--_notification-right);bottom:var(--_notification-bottom);left:var(--_notification-left);--_notification-m: var(--notification-m, var(--mod-notification-m, 0));--_notification-my: var(--notification-my, var(--mod-notification-my));--_notification-mx: var(--notification-mx, var(--mod-notification-mx));--_notification-ml: var(--notification-ml, var(--mod-notification-ml));--_notification-mr: var(--notification-mr, var(--mod-notification-mr));--_notification-mt: var(--notification-mt, var(--mod-notification-mt));--_notification-mb: var(--notification-mb, var(--mod-notification-mb));margin:var(--_notification-m);margin-inline:var(--_notification-mx);margin-block:var(--_notification-my);margin-left:var(--_notification-ml);margin-right:var(--_notification-mr);margin-top:var(--_notification-mt);margin-bottom:var(--_notification-mb);--_notification-radius: var(--notification-radius, var(--mod-notification-radius, var(--ds-notification-radius)));--_notification-color-background: var(--notification-color-background, var(--mod-notification-color-background, var(--ds-notification-color-base-background)));--_notification-color-border: var(--notification-color-border, var(--mod-notification-color-border, var(--ds-notification-color-base-border)));--_notification-color-text: var(--notification-color-text, var(--mod-notification-color-text, var(--ds-notification-color-base-text)));--_notification-heading-family: var(--notification-heading-family, var(--mod-notification-heading-family, var(--ds-text-family-heading)));--_notification-heading-weight: var(--notification-heading-weight, var(--mod-notification-heading-weight, var(--ds-text-weight-bold)));--_notification-heading-size: var(--notification-heading-size, var(--mod-notification-heading-size, var(--ds-text-size-lg-device)));--_notification-heading-line-height: var(--notification-heading-line-height, var(--mod-notification-heading-line-height, var(--ds-text-line-height-heading)));--_notification-content-family: var(--notification-content-family, var(--mod-notification-content-family, var(--ds-text-family-body)));--_notification-content-weight: var(--notification-content-weight, var(--mod-notification-content-weight, inherit));--_notification-content-size: var(--notification-content-size, var(--mod-notification-content-size, var(--ds-text-size-base-device)));--_notification-content-line-height: var(--notification-content-line-height, var(--mod-notification-content-line-height, var(--ds-text-line-height-body)));--_notification-icon: var(--notification-icon, var(--mod-notification-icon, var(--ds-notification-color-base-icon)));--_notification-icon-display: var(--notification-icon-display, var(--mod-notification-icon-display, block));--_notification-space: var(--notification-space, var(--mod-notification-space, var(--ds-card-space-base-device, 1.5rem)));--_notification-icon-space: var(--notification-icon-space, var(--mod-notification-icon-space, 1.5rem));--_notification-close-offset: var(--notification-close-offset, var(--mod-notification-close-offset, 2rem));--_notification-gap: var(--notification-gap, var(--mod-notification-gap, 0.125rem));--_notification-close-position: var(--notification-close-position, var(--mod-notification-close-position, absolute));--_notification-close-right: var(--notification-close-right, var(--mod-notification-close-right, var(--_notification-space)));--_notification-close-top: var(--notification-close-top, var(--mod-notification-close-top, var(--_notification-space)));--_notification-animation-start-opacity: var(--notification-animation-start-opacity, var(--mod-notification-animation-start-opacity, 1));--_notification-animation-start-transform: var(--notification-animation-start-transform, var(--mod-notification-animation-start-transform, none));--_notification-animation-transition: var(--notification-animation-transition, var(--mod-notification-animation-transition, none));--_notification-animation-end-opacity: var(--notification-animation-end-opacity, var(--mod-notification-animation-end-opacity, 1));--_notification-animation-end-transform: var(--notification-animation-end-transform, var(--mod-notification-animation-end-transform, none))}#notification{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;flex:1;position:relative;hyphens:auto;border:var(--ds-alias-border-width-base) solid var(--_notification-color-border);border-radius:var(--_notification-radius);background:var(--_notification-color-background);color:var(--_notification-color-text);padding-top:var(--_notification-space);padding-right:var(--_notification-space);padding-bottom:var(--_notification-space);padding-left:calc(var(--_notification-space) + var(--_notification-icon-space));display:flex;flex-direction:column;gap:var(--_notification-gap)}#notification ds-close,#notification .close{position:var(--_notification-close-position);top:var(--_notification-close-top);right:var(--_notification-close-right)}#notification>h2{font-family:var(--_notification-heading-family);font-weight:var(--_notification-heading-weight);line-height:var(--_notification-heading-line-height);font-size:var(--_notification-heading-size);margin:0 !important}#notification:has(.close)>h2::before,#notification:has(ds-close)>h2::before{content:"";float:right;width:24px;height:calc(var(--_notification-heading-line-height)*16px)}#notification>span,#notification>p{font-family:var(--_notification-content-family);font-size:var(--_notification-content-size);font-weight:var(--_notification-content-weight);line-height:var(--_notification-content-line-height);margin:0 !important}#notification::before{display:var(--_notification-icon-display);background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;position:absolute;height:1.5rem;width:1.5rem;left:-0.25rem;top:calc((var(--_notification-space)));transform:translateX(var(--_notification-space));content:"";-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;mask-image:var(--_notification-icon);-webkit-mask-image:var(--_notification-icon)}:host(.has-no-icon){--mod-notification-icon-display: none;--mod-notification-icon-space: 0rem}:host(.is-info){--mod-notification-color-text: var(--ds-notification-color-info-text);--mod-notification-color-border: var(--ds-notification-color-info-border);--mod-notification-color-background: var(--ds-notification-color-info-background);--mod-notification-icon: var(--ds-notification-color-info-icon)}:host(.is-success){--mod-notification-color-text: var(--ds-notification-color-success-text);--mod-notification-color-border: var(--ds-notification-color-success-border);--mod-notification-color-background: var(--ds-notification-color-success-background);--mod-notification-icon: var(--ds-notification-color-success-icon)}:host(.is-warning){--mod-notification-color-text: var(--ds-notification-color-warning-text);--mod-notification-color-border: var(--ds-notification-color-warning-border);--mod-notification-color-background: var(--ds-notification-color-warning-background);--mod-notification-icon: var(--ds-notification-color-warning-icon)}:host(.is-danger){--mod-notification-color-text: var(--ds-notification-color-danger-text);--mod-notification-color-border: var(--ds-notification-color-danger-border);--mod-notification-color-background: var(--ds-notification-color-danger-background);--mod-notification-icon: var(--ds-notification-color-danger-icon)}:host(.is-outline-base){--mod-notification-color-text: var(--ds-notification-color-outline-base-text);--mod-notification-color-border: var(--ds-notification-color-outline-base-border);--mod-notification-color-background: var(--ds-notification-color-outline-base-background);--mod-notification-icon: var(--ds-notification-color-outline-base-icon)}:host(.is-outline-purple){--mod-notification-color-text: var(--ds-notification-color-outline-purple-text);--mod-notification-color-border: var(--ds-notification-color-outline-purple-border);--mod-notification-color-background: var(--ds-notification-color-outline-purple-background);--mod-notification-icon: var(--ds-notification-color-outline-purple-icon)}:host(.is-outline-green){--mod-notification-color-text: var(--ds-notification-color-outline-green-text);--mod-notification-color-border: var(--ds-notification-color-outline-green-border);--mod-notification-color-background: var(--ds-notification-color-outline-green-background);--mod-notification-icon: var(--ds-notification-color-outline-green-icon)}:host(.is-outline-yellow){--mod-notification-color-text: var(--ds-notification-color-outline-yellow-text);--mod-notification-color-border: var(--ds-notification-color-outline-yellow-border);--mod-notification-color-background: var(--ds-notification-color-outline-yellow-background);--mod-notification-icon: var(--ds-notification-color-outline-yellow-icon)}:host(.is-outline-red){--mod-notification-color-text: var(--ds-notification-color-outline-red-text);--mod-notification-color-border: var(--ds-notification-color-outline-red-border);--mod-notification-color-background: var(--ds-notification-color-outline-red-background);--mod-notification-icon: var(--ds-notification-color-outline-red-icon)}:host(.is-sm){--mod-notification-space: var(--ds-card-space-sm-device)}:host(.is-md){--mod-notification-space: var(--ds-card-space-md-device)}:host(.is-lg){--mod-notification-space: var(--ds-card-space-lg-device)}:host{display:block}
+:host{--_notification-position: var(--notification-position, var(--mod-notification-position, static));--_notification-top: var(--notification-top, var(--mod-notification-top));--_notification-right: var(--notification-right, var(--mod-notification-right));--_notification-bottom: var(--notification-bottom, var(--mod-notification-bottom));--_notification-left: var(--notification-left, var(--mod-notification-left));position:var(--_notification-position);top:var(--_notification-top);right:var(--_notification-right);bottom:var(--_notification-bottom);left:var(--_notification-left);--_notification-m: var(--notification-m, var(--mod-notification-m, 0));--_notification-my: var(--notification-my, var(--mod-notification-my));--_notification-mx: var(--notification-mx, var(--mod-notification-mx));--_notification-ml: var(--notification-ml, var(--mod-notification-ml));--_notification-mr: var(--notification-mr, var(--mod-notification-mr));--_notification-mt: var(--notification-mt, var(--mod-notification-mt));--_notification-mb: var(--notification-mb, var(--mod-notification-mb));margin:var(--_notification-m);margin-inline:var(--_notification-mx);margin-block:var(--_notification-my);margin-left:var(--_notification-ml);margin-right:var(--_notification-mr);margin-top:var(--_notification-mt);margin-bottom:var(--_notification-mb);--_notification-radius: var(--notification-radius, var(--mod-notification-radius, var(--ds-notification-radius)));--_notification-color-background: var(--notification-color-background, var(--mod-notification-color-background, var(--ds-notification-color-base-background)));--_notification-color-border: var(--notification-color-border, var(--mod-notification-color-border, var(--ds-notification-color-base-border)));--_notification-color-text: var(--notification-color-text, var(--mod-notification-color-text, var(--ds-notification-color-base-text)));--_notification-heading-family: var(--notification-heading-family, var(--mod-notification-heading-family, var(--ds-alias-text-family-heading)));--_notification-heading-weight: var(--notification-heading-weight, var(--mod-notification-heading-weight, var(--ds-alias-text-weight-bold)));--_notification-heading-size: var(--notification-heading-size, var(--mod-notification-heading-size, var(--ds-alias-text-size-lg-device)));--_notification-heading-line-height: var(--notification-heading-line-height, var(--mod-notification-heading-line-height, var(--ds-alias-text-line-height-heading)));--_notification-content-family: var(--notification-content-family, var(--mod-notification-content-family, var(--ds-alias-text-family-body)));--_notification-content-weight: var(--notification-content-weight, var(--mod-notification-content-weight, inherit));--_notification-content-size: var(--notification-content-size, var(--mod-notification-content-size, var(--ds-alias-text-size-base-device)));--_notification-content-line-height: var(--notification-content-line-height, var(--mod-notification-content-line-height, var(--ds-alias-text-line-height-body)));--_notification-icon: var(--notification-icon, var(--mod-notification-icon, var(--ds-notification-color-base-icon)));--_notification-icon-display: var(--notification-icon-display, var(--mod-notification-icon-display, block));--_notification-space: var(--notification-space, var(--mod-notification-space, var(--ds-card-space-base-device, 1.5rem)));--_notification-icon-space: var(--notification-icon-space, var(--mod-notification-icon-space, 1.5rem));--_notification-close-offset: var(--notification-close-offset, var(--mod-notification-close-offset, 2rem));--_notification-gap: var(--notification-gap, var(--mod-notification-gap, 0.125rem));--_notification-close-position: var(--notification-close-position, var(--mod-notification-close-position, absolute));--_notification-close-right: var(--notification-close-right, var(--mod-notification-close-right, var(--_notification-space)));--_notification-close-top: var(--notification-close-top, var(--mod-notification-close-top, var(--_notification-space)));--_notification-animation-start-opacity: var(--notification-animation-start-opacity, var(--mod-notification-animation-start-opacity, 1));--_notification-animation-start-transform: var(--notification-animation-start-transform, var(--mod-notification-animation-start-transform, none));--_notification-animation-transition: var(--notification-animation-transition, var(--mod-notification-animation-transition, none));--_notification-animation-end-opacity: var(--notification-animation-end-opacity, var(--mod-notification-animation-end-opacity, 1));--_notification-animation-end-transform: var(--notification-animation-end-transform, var(--mod-notification-animation-end-transform, none))}#notification{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;flex:1;position:relative;hyphens:auto;border:var(--ds-alias-border-width-base) solid var(--_notification-color-border);border-radius:var(--_notification-radius);background:var(--_notification-color-background);color:var(--_notification-color-text);padding-top:var(--_notification-space);padding-right:var(--_notification-space);padding-bottom:var(--_notification-space);padding-left:calc(var(--_notification-space) + var(--_notification-icon-space));display:flex;flex-direction:column;gap:var(--_notification-gap)}#notification ds-close,#notification .close{position:var(--_notification-close-position);top:var(--_notification-close-top);right:var(--_notification-close-right)}#notification>h2{font-family:var(--_notification-heading-family);font-weight:var(--_notification-heading-weight);line-height:var(--_notification-heading-line-height);font-size:var(--_notification-heading-size);margin:0 !important}#notification:has(.close)>h2::before,#notification:has(ds-close)>h2::before{content:"";float:right;width:24px;height:calc(var(--_notification-heading-line-height)*16px)}#notification>span,#notification>p{font-family:var(--_notification-content-family);font-size:var(--_notification-content-size);font-weight:var(--_notification-content-weight);line-height:var(--_notification-content-line-height);margin:0 !important}#notification::before{display:var(--_notification-icon-display);background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;position:absolute;height:1.5rem;width:1.5rem;left:-0.25rem;top:calc((var(--_notification-space)));transform:translateX(var(--_notification-space));content:"";-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;mask-image:var(--_notification-icon);-webkit-mask-image:var(--_notification-icon)}:host(.has-no-icon){--mod-notification-icon-display: none;--mod-notification-icon-space: 0rem}:host(.is-info){--mod-notification-color-text: var(--ds-notification-color-info-text);--mod-notification-color-border: var(--ds-notification-color-info-border);--mod-notification-color-background: var(--ds-notification-color-info-background);--mod-notification-icon: var(--ds-notification-color-info-icon)}:host(.is-success){--mod-notification-color-text: var(--ds-notification-color-success-text);--mod-notification-color-border: var(--ds-notification-color-success-border);--mod-notification-color-background: var(--ds-notification-color-success-background);--mod-notification-icon: var(--ds-notification-color-success-icon)}:host(.is-warning){--mod-notification-color-text: var(--ds-notification-color-warning-text);--mod-notification-color-border: var(--ds-notification-color-warning-border);--mod-notification-color-background: var(--ds-notification-color-warning-background);--mod-notification-icon: var(--ds-notification-color-warning-icon)}:host(.is-danger){--mod-notification-color-text: var(--ds-notification-color-danger-text);--mod-notification-color-border: var(--ds-notification-color-danger-border);--mod-notification-color-background: var(--ds-notification-color-danger-background);--mod-notification-icon: var(--ds-notification-color-danger-icon)}:host(.is-outline-base){--mod-notification-color-text: var(--ds-notification-color-outline-base-text);--mod-notification-color-border: var(--ds-notification-color-outline-base-border);--mod-notification-color-background: var(--ds-notification-color-outline-base-background);--mod-notification-icon: var(--ds-notification-color-outline-base-icon)}:host(.is-outline-purple){--mod-notification-color-text: var(--ds-notification-color-outline-purple-text);--mod-notification-color-border: var(--ds-notification-color-outline-purple-border);--mod-notification-color-background: var(--ds-notification-color-outline-purple-background);--mod-notification-icon: var(--ds-notification-color-outline-purple-icon)}:host(.is-outline-green){--mod-notification-color-text: var(--ds-notification-color-outline-green-text);--mod-notification-color-border: var(--ds-notification-color-outline-green-border);--mod-notification-color-background: var(--ds-notification-color-outline-green-background);--mod-notification-icon: var(--ds-notification-color-outline-green-icon)}:host(.is-outline-yellow){--mod-notification-color-text: var(--ds-notification-color-outline-yellow-text);--mod-notification-color-border: var(--ds-notification-color-outline-yellow-border);--mod-notification-color-background: var(--ds-notification-color-outline-yellow-background);--mod-notification-icon: var(--ds-notification-color-outline-yellow-icon)}:host(.is-outline-red){--mod-notification-color-text: var(--ds-notification-color-outline-red-text);--mod-notification-color-border: var(--ds-notification-color-outline-red-border);--mod-notification-color-background: var(--ds-notification-color-outline-red-background);--mod-notification-icon: var(--ds-notification-color-outline-red-icon)}:host(.is-sm){--mod-notification-space: var(--ds-card-space-sm-device)}:host(.is-md){--mod-notification-space: var(--ds-card-space-md-device)}:host(.is-lg){--mod-notification-space: var(--ds-card-space-lg-device)}:host{display:block}

package/dist/collection/components/notification/notification.js

@@ -77,14 +77,14 @@ export class Notification {
         const a11yAttributes = this.alert
             ? { 'role': 'alert', 'aria-live': 'assertive', 'aria-atomic': 'true' }
             : { 'role': 'status', 'aria-live': 'polite', 'aria-atomic': 'true' };
-        return (h(Host, Object.assign({ key: '1edcd6336e71620b77dcdcd17ad0cd35b42b3b30' }, a11yAttributes, { class: {
+        return (h(Host, Object.assign({ key: 'f3e829a86b22c64fe93b06b2664b398a7248d49f' }, a11yAttributes, { class: {
                 'has-no-icon': this.noIcon,
                 [`is-${this.color}`]: hasValue(this.color),
                 [`is-${size}`]: hasValue(this.size),
-            } }), h("section", { key: '52d3b15486dc26950c64f4d20a6664abd2b98d79', id: "notification", part: "section" }, this.closable && (h("ds-close", { key: '5102d95443bd14776df77ebc80f274cfe9af5e43', part: "close", onClick: ev => {
+            } }), h("section", { key: 'f8ff4cdc8379ec73ac00a6654478a0039dd746f1', id: "notification", part: "section" }, this.closable && (h("ds-close", { key: 'f72f440db26de1ef40ca24ec9c9f06015ce31126', part: "close", onClick: ev => {
                 stopEventBubbling(ev);
                 this.close();
-            } })), hasValue(this.heading) && h("h2", { key: '0805c258051a652a721a43e931a5592b59135dbc', part: "heading" }, this.heading), h("span", { key: '611f25893c7c7654df1ea374bb075752bcd07b86' }, h("slot", { key: '55724fb85349db975b4a089d7b433517572aad4f' })))));
+            } })), hasValue(this.heading) && h("h2", { key: 'adae5186e4009153c2d93645bdf8ab49e4da9df7', part: "heading" }, this.heading), h("span", { key: '979fc05e46a6c9220826efeac704f87f23f9ce49' }, h("slot", { key: '88929c8c561498c89755da6bd6d36819a7e6d390' })))));
     }
     static get is() { return "ds-notification"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/number-input/number-input.js

@@ -6,7 +6,7 @@ import { h, } from "@stencil/core";
 import isEmpty from "lodash/isEmpty";
 import isNaN from "lodash/isNaN";
 import isNil from "lodash/isNil";
-import { inheritAttributes, FormControl, stopEventBubbling, debounceEvent, Logger, getDecimalSeparator, getThousandSeparator, hasValue, OneOf, Type, } from "../../utils/index";
+import { inheritAttributes, FormControl, stopEventBubbling, debounceEvent, Logger, getDecimalSeparator, getThousandSeparator, hasValue, OneOf, Type, watchInvalidTextSlot, } from "../../utils/index";
 import { defaultConfig, ListenToConfig } from "../../global/index";
 import { isNotNumber, mapDecimalSeparator, toFixedNumber, toNumber, toUserFormattedNumber, validateKeyDown, } from "./number-input.utils";
 import { Field } from "../input/field.util";
@@ -15,6 +15,7 @@ import { INPUT_COLORS } from "../input/input.interfaces";
  * Number input renders a specialized text input for numeric values with increment/decrement buttons, formatting, and validation.
  *
  * @slot - The number input field content and surrounding elements.
+ * @slot invalid-text - Overrides the `invalidText` prop with custom markup, shown instead of the description when `invalid` is `true`.
  * @part input - The native HTML input element.
  * @part prefix - The prefix wrapper (if used).
  * @part suffix - The suffix wrapper (if used).
@@ -28,6 +29,7 @@ export class NumberInput {
         this.control = new FormControl(this);
         this.lastValue = '';
         this.focused = false;
+        this.hasInvalidTextSlotContent = false;
         this.language = defaultConfig.language;
         this.region = defaultConfig.region;
         this.nativeInputValue = '';
@@ -197,6 +199,13 @@ export class NumberInput {
     connectedCallback() {
         this.debounceChanged();
         this.control.connectedCallback();
+        this.disconnectInvalidTextSlotWatcher = watchInvalidTextSlot(this.el, hasContent => {
+            this.hasInvalidTextSlotContent = hasContent;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.disconnectInvalidTextSlotWatcher) === null || _a === void 0 ? void 0 : _a.call(this);
     }
     componentWillLoad() {
         this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
@@ -292,7 +301,8 @@ export class NumberInput {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Field, { key: 'a8af3f272c3522c566a98904ebbc2dcfcd85352d', disabled: this.disabled, color: this.color, invalid: this.invalid, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language }, h("input", Object.assign({ key: '29f61a574130cef9184b4252b60fe8a69c8eadf5', id: "input", part: "input", type: "text", inputMode: "decimal", pattern: this.inputPattern, ref: el => (this.control.nativeEl = el), "aria-describedby": "description", "aria-invalid": this.invalid === true ? 'true' : 'false', name: this.name, disabled: this.disabled, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, min: this.min, max: this.max, value: this.nativeInputValue, onInput: ev => this.handleInput(ev), onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev), onClick: ev => this.control.onClick(ev), onKeyDown: ev => this.handleKeydown(ev), onKeyPress: ev => this.dsKeyPress.emit(ev) }, this.inheritedAttributes))));
+        const isInvalid = this.invalid || this.hasInvalidTextSlotContent;
+        return (h(Field, { key: 'a185df149be41135c6b939ad1c3ad5ba57a38e94', disabled: this.disabled, color: this.color, invalid: isInvalid, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language }, h("input", Object.assign({ key: 'a7461115068e7a365ba4b0e25501d96be6de099d', id: "input", part: "input", type: "text", inputMode: "decimal", pattern: this.inputPattern, ref: el => (this.control.nativeEl = el), "aria-describedby": "description", "aria-invalid": isInvalid ? 'true' : 'false', name: this.name, disabled: this.disabled, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, min: this.min, max: this.max, value: this.nativeInputValue, onInput: ev => this.handleInput(ev), onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev), onClick: ev => this.control.onClick(ev), onKeyDown: ev => this.handleKeydown(ev), onKeyPress: ev => this.dsKeyPress.emit(ev) }, this.inheritedAttributes))));
     }
     static get is() { return "ds-number-input"; }
     static get encapsulation() { return "shadow"; }
@@ -701,6 +711,7 @@ export class NumberInput {
     static get states() {
         return {
             "focused": {},
+            "hasInvalidTextSlotContent": {},
             "language": {},
             "region": {},
             "nativeInputValue": {},