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

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,27 @@
+/*!
+ * (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',
+    '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

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
-import { normalizeDeprecatedTShirtSize, Logger, ValidateOneOf, ValidateType, setupValidation, } from "../../utils/index";
+import { normalizeDeprecatedTShirtSize, Logger, OneOf, Type, hasValue } from "../../utils/index";
 import { defaultConfig, ListenToConfig, } from "../../global/index";
 import { I18nDsLabel } from "./label.i18n";
 import { LABEL_SIZES } from "./label.interfaces";
@@ -66,17 +66,10 @@ export class Label {
     createLogger(log) {
         this.log = log;
     }
-    sizeChanged(newValue) {
-        this.size = normalizeDeprecatedTShirtSize(newValue);
-    }
     /**
      * LIFECYCLE
      * ------------------------------------------------------
      */
-    connectedCallback() {
-        setupValidation(this);
-        this.size = normalizeDeprecatedTShirtSize(this.size);
-    }
     /**
      * PUBLIC LISTENERS
      * ------------------------------------------------------
@@ -96,15 +89,16 @@ export class Label {
         const suffix = this.required === false ? I18nDsLabel[this.language].optional || '' : '';
         const id = this.htmlId;
         const htmlFor = this.htmlFor;
-        return (h(Host, { key: '937c19a2183d9c56279e88e37395b4da1fbb7206', class: {
+        const size = normalizeDeprecatedTShirtSize(this.size) || '';
+        return (h(Host, { key: 'fc8da311fddaf6d546b260a8bf2ae9cec5f39321', class: {
                 'is-hovered': this.hovered,
                 'is-pressed': this.pressed,
                 'is-disabled': this.disabled,
                 'is-valid': this.valid,
                 'is-invalid': this.invalid,
                 'has-no-wrap': this.noWrap,
-                [`is-${this.size}`]: !!this.size,
-            } }, h("label", { key: 'b059b0022e370ce5b202b6c0cd432a3950e0e798', id: id, part: "label", htmlFor: htmlFor }, h("slot", { key: 'c5a1f6741d468abf8d48549aad8f2d43160684cb' }), suffix)));
+                [`is-${size}`]: hasValue(this.size),
+            } }, 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"; }
@@ -288,7 +282,7 @@ export class Label {
             },
             "size": {
                 "type": "string",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "LabelSize",
                     "resolved": "\"\" | \"2xl\" | \"3xl\" | \"large\" | \"lg\" | \"sm\" | \"small\" | \"x-large\" | \"xl\" | \"xx-large\" | \"xxx-large\" | undefined",
@@ -375,12 +369,6 @@ export class Label {
         };
     }
     static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "size",
-                "methodName": "sizeChanged"
-            }];
-    }
 }
 __decorate([
     Logger('label'),
@@ -389,43 +377,43 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Label.prototype, "createLogger", null);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Label.prototype, "disabled", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Label.prototype, "htmlFor", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Label.prototype, "htmlId", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Label.prototype, "hovered", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Label.prototype, "invalid", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Label.prototype, "noWrap", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Label.prototype, "pressed", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Label.prototype, "required", void 0);
 __decorate([
-    ValidateOneOf(...LABEL_SIZES),
+    OneOf(LABEL_SIZES),
     __metadata("design:type", String)
 ], Label.prototype, "size", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Label.prototype, "valid", void 0);
 __decorate([

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: var(--list-item-border-color, var(--mod-list-item-border-color, var(--ds-list-item-border-color)));--_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-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-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-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) 0;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)}: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}: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:after,:host(.is-link) #item.is-hovered:after,:host(.is-button) #item:hover:after,:host(.is-button) #item.is-hovered:after{background:var(--ds-link-color-base-hover)}:host(.is-link) #item:hover,:host(.is-link) #item.is-hovered,:host(.is-button) #item:hover,:host(.is-button) #item.is-hovered{color:var(--ds-link-color-base-hover)}:host(.is-link) #item:hover #content,:host(.is-link) #item.is-hovered #content,:host(.is-button) #item:hover #content,:host(.is-button) #item.is-hovered #content{color:var(--ds-link-color-base-hover)}:host(.is-link) #item:hover ds-icon,:host(.is-link) #item:hover ::slotted(ds-icon),:host(.is-link) #item:hover ::slotted(ds-badge),:host(.is-link) #item.is-hovered ds-icon,:host(.is-link) #item.is-hovered ::slotted(ds-icon),:host(.is-link) #item.is-hovered ::slotted(ds-badge),:host(.is-button) #item:hover ds-icon,:host(.is-button) #item:hover ::slotted(ds-icon),:host(.is-button) #item:hover ::slotted(ds-badge),:host(.is-button) #item.is-hovered ds-icon,:host(.is-button) #item.is-hovered ::slotted(ds-icon),:host(.is-button) #item.is-hovered ::slotted(ds-badge){--icon-color: var(--ds-link-color-base-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{background:var(--ds-link-color-base-active)}:host(.is-link) #item:active,:host(.is-link) #item.is-pressed,:host(.is-button) #item:active,:host(.is-button) #item.is-pressed{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: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;content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;border-radius:var(--ds-alias-radius-base)}:host(.is-accordion) ::slotted(p){padding-block:var(--_list-item-accordion-py)}: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)}: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-color-grey-background);--badge-color-text: var(--ds-badge-color-grey-text)}

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

@@ -2,6 +2,6 @@
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
 export const ITEM_VARIANTS = ['default', 'link', 'button', 'accordion'];
-export const ITEM_ACTION_ICONS = ['default', 'link', 'link-external', 'download'];
+export const ITEM_ACTION_ICONS = ['', 'default', 'link', 'link-external', 'download'];
 export const ITEM_LABEL_LEVELS = ['', 'h1', 'h2', 'h3', 'h4', 'h5'];
 export const ITEM_LABEL_SIZES = ['', 'h1', 'h2', 'h3', 'h4', 'h5', '3xl', '2xl', 'xl', 'lg', 'base'];