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

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

@@ -0,0 +1,129 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { DsTabs, expect, test } from "../../../../../../playwright/src/index";
+const PANELS = `
+  <ds-tab name="a">Tab A</ds-tab>
+  <ds-tab name="b">Tab B</ds-tab>
+  <ds-tab name="c">Tab C</ds-tab>
+  <ds-tab-panel for="a">Content A</ds-tab-panel>
+  <ds-tab-panel for="b">Content B</ds-tab-panel>
+  <ds-tab-panel for="c">Content C</ds-tab-panel>
+`;
+test.describe('panels variant — initial state', () => {
+    test('selects the first tab by default', async ({ page }) => {
+        await page.mount(`<ds-tabs>${PANELS}</ds-tabs>`);
+        const tabs = new DsTabs(page.locator('ds-tabs'));
+        await tabs.assertTabSelected('a');
+        await tabs.assertPanelVisible('a');
+        await tabs.assertPanelHidden('b');
+        await tabs.assertPanelHidden('c');
+    });
+    test('respects a preset value prop', async ({ page }) => {
+        await page.mount(`<ds-tabs value="b">${PANELS}</ds-tabs>`);
+        const tabs = new DsTabs(page.locator('ds-tabs'));
+        await tabs.assertTabSelected('b');
+        await tabs.assertPanelHidden('a');
+        await tabs.assertPanelVisible('b');
+    });
+});
+test.describe('panels variant — interaction', () => {
+    test('clicking a tab shows its panel and hides the others', async ({ page }) => {
+        await page.mount(`<ds-tabs>${PANELS}</ds-tabs>`);
+        const tabs = new DsTabs(page.locator('ds-tabs'));
+        await tabs.selectTab('b');
+        await tabs.assertTabSelected('b');
+        await tabs.assertTabNotSelected('a');
+        await tabs.assertPanelVisible('b');
+        await tabs.assertPanelHidden('a');
+        await tabs.assertPanelHidden('c');
+    });
+    test('clicking the already selected tab does not emit dsChange', async ({ page }) => {
+        await page.mount(`<ds-tabs>${PANELS}</ds-tabs>`);
+        const tabs = new DsTabs(page.locator('ds-tabs'));
+        const spy = await tabs.el.spyOnEvent('dsChange');
+        await tabs.selectTab('a');
+        expect(spy).toHaveReceivedEventTimes(0);
+    });
+});
+test.describe('panels variant — dsChange event', () => {
+    test('emits dsChange with the selected tab name', async ({ page }) => {
+        await page.mount(`<ds-tabs>${PANELS}</ds-tabs>`);
+        const tabs = new DsTabs(page.locator('ds-tabs'));
+        const spy = await tabs.el.spyOnEvent('dsChange');
+        await tabs.selectTab('b');
+        expect(spy).toHaveReceivedEventTimes(1);
+        expect(spy).toHaveReceivedEventDetail({ value: 'b' });
+    });
+    test('emits dsChange on each tab switch', async ({ page }) => {
+        await page.mount(`<ds-tabs>${PANELS}</ds-tabs>`);
+        const tabs = new DsTabs(page.locator('ds-tabs'));
+        const spy = await tabs.el.spyOnEvent('dsChange');
+        await tabs.selectTab('b');
+        await tabs.selectTab('c');
+        expect(spy).toHaveReceivedEventTimes(2);
+        expect(spy).toHaveReceivedEventDetail({ value: 'c' });
+    });
+});
+test.describe('panels variant — keyboard navigation', () => {
+    test('ArrowRight moves to the next tab', async ({ page }) => {
+        await page.mount(`<ds-tabs>${PANELS}</ds-tabs>`);
+        const tabs = new DsTabs(page.locator('ds-tabs'));
+        await tabs.selectTab('a');
+        await page.keyboard.press('ArrowRight');
+        await tabs.assertTabSelected('b');
+    });
+    test('ArrowLeft moves to the previous tab', async ({ page }) => {
+        await page.mount(`<ds-tabs value="b">${PANELS}</ds-tabs>`);
+        const tabs = new DsTabs(page.locator('ds-tabs'));
+        await tabs.selectTab('b');
+        await page.keyboard.press('ArrowLeft');
+        await tabs.assertTabSelected('a');
+    });
+    test('Home moves to the first tab', async ({ page }) => {
+        await page.mount(`<ds-tabs value="c">${PANELS}</ds-tabs>`);
+        const tabs = new DsTabs(page.locator('ds-tabs'));
+        await tabs.selectTab('c');
+        await page.keyboard.press('Home');
+        await tabs.assertTabSelected('a');
+    });
+    test('End moves to the last tab', async ({ page }) => {
+        await page.mount(`<ds-tabs>${PANELS}</ds-tabs>`);
+        const tabs = new DsTabs(page.locator('ds-tabs'));
+        await tabs.selectTab('a');
+        await page.keyboard.press('End');
+        await tabs.assertTabSelected('c');
+    });
+    test('ArrowRight wraps from last to first', async ({ page }) => {
+        await page.mount(`<ds-tabs value="c">${PANELS}</ds-tabs>`);
+        const tabs = new DsTabs(page.locator('ds-tabs'));
+        await tabs.selectTab('c');
+        await page.keyboard.press('ArrowRight');
+        await tabs.assertTabSelected('a');
+    });
+});
+test.describe('navigation variant', () => {
+    test('does not emit dsChange when links are clicked', async ({ page }) => {
+        await page.mount(`
+      <ds-tabs label="Sections">
+        <ds-tab name="first"><a href="/first" aria-current="page">First</a></ds-tab>
+        <ds-tab name="second"><a href="/second">Second</a></ds-tab>
+      </ds-tabs>
+    `);
+        const tabs = new DsTabs(page.locator('ds-tabs'));
+        const spy = await tabs.el.spyOnEvent('dsChange');
+        await tabs.tab('second').click();
+        expect(spy).toHaveReceivedEventTimes(0);
+    });
+    test('marks the tab with aria-current as selected', async ({ page }) => {
+        await page.mount(`
+      <ds-tabs label="Sections">
+        <ds-tab name="first"><a href="/first" aria-current="page">First</a></ds-tab>
+        <ds-tab name="second"><a href="/second">Second</a></ds-tab>
+      </ds-tabs>
+    `);
+        const tabs = new DsTabs(page.locator('ds-tabs'));
+        await tabs.assertTabSelected('first');
+        await tabs.assertTabNotSelected('second');
+    });
+});

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

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

package/dist/collection/components/tag/tag-group/tag-group.js

@@ -18,7 +18,7 @@ export class TagGroup {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: 'dbd845c8ab569cb18f10733ab6aff67a63cba1b3' }, h("slot", { key: 'a9c2c76d2a02049d820996a1ee2c19d48ef89cbe' })));
+        return (h(Host, { key: 'bfd564c13597394e0c6d534b0f47fd0df4d2d1cd' }, h("slot", { key: '06a2320d225785d7aafe5b4a3f79c698dfcc39ff' })));
     }
     static get is() { return "ds-tag-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tag/tag.js

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
-import { inheritAttributes, normalizeDeprecatedTShirtSize, Logger, ValidateOneOf, ValidateType, setupValidation, } from "../../utils/index";
+import { inheritAttributes, normalizeDeprecatedTShirtSize, Logger, hasValue, OneOf, Type, } from "../../utils/index";
 import { TAG_COLORS, TAG_SHAPES, TAG_SIZES, TAG_PLACEMENTS, } from "./tag.interfaces";
 /**
  * Tag renders a compact label element for categorizing, filtering, or marking content with optional close button.
@@ -50,17 +50,10 @@ export class Tag {
     createLogger(log) {
         this.log = log;
     }
-    sizeChanged(newValue) {
-        this.size = normalizeDeprecatedTShirtSize(newValue);
-    }
     /**
      * LIFECYCLE
      * ------------------------------------------------------
      */
-    connectedCallback() {
-        setupValidation(this);
-        this.size = normalizeDeprecatedTShirtSize(this.size);
-    }
     componentWillLoad() {
         this.inheritedAttributesClose = inheritAttributes(this.el, ['tabindex']);
     }
@@ -69,13 +62,15 @@ export class Tag {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: '3741b170ad658fde5052fded5b2555e52132ce6e', class: {
-                [`is-${this.color}`]: this.color == '',
-                [`is-shape-${this.shape}`]: this.shape == '',
+        const size = normalizeDeprecatedTShirtSize(this.size) || '';
+        return (h(Host, { key: 'f725d01419ff0d95f1539115a9c294bc0530891d', class: {
+                [`is-${this.color}`]: hasValue(this.color),
+                [`is-${size}`]: hasValue(this.size),
+                [`is-shape-${this.shape}`]: hasValue(this.shape),
                 'is-closable': this.closable,
                 'is-disabled': this.disabled,
                 'is-invalid': this.invalid,
-            } }, h("span", { key: 'abc4f7fb1bbc1b5736f2ec72c7972a6fc5174156', part: "label" }, h("slot", { key: '569a1dd2729db40686a981554b9cdc3cf5b3fa4a' })), this.closable && !this.disabled ? (h("ds-close", Object.assign({}, this.inheritedAttributesClose, { onClick: (ev) => this.dsCloseClick.emit(ev) }))) : ('')));
+            } }, h("span", { key: '27a70b6402bce1bed3ada2b36a378a444f6dde59', part: "label" }, h("slot", { key: '77021c9a9ab7e596d3cc0917165b916f5e3d8621' })), this.closable && !this.disabled ? (h("ds-close", Object.assign({}, this.inheritedAttributesClose, { onClick: (ev) => this.dsCloseClick.emit(ev) }))) : ('')));
     }
     static get is() { return "ds-tag"; }
     static get encapsulation() { return "shadow"; }
@@ -234,7 +229,7 @@ export class Tag {
             },
             "size": {
                 "type": "string",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "TagSize",
                     "resolved": "\"\" | \"large\" | \"lg\" | \"md\" | \"medium\" | \"sm\" | \"small\"",
@@ -287,12 +282,6 @@ export class Tag {
             }];
     }
     static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "size",
-                "methodName": "sizeChanged"
-            }];
-    }
 }
 __decorate([
     Logger('tag'),
@@ -301,30 +290,30 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Tag.prototype, "createLogger", null);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Tag.prototype, "closable", void 0);
 __decorate([
-    ValidateOneOf(...TAG_COLORS),
+    OneOf(TAG_COLORS),
     __metadata("design:type", String)
 ], Tag.prototype, "color", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Tag.prototype, "disabled", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Tag.prototype, "invalid", void 0);
 __decorate([
-    ValidateOneOf(...TAG_PLACEMENTS),
+    OneOf(TAG_PLACEMENTS),
     __metadata("design:type", String)
 ], Tag.prototype, "position", void 0);
 __decorate([
-    ValidateOneOf(...TAG_SHAPES),
+    OneOf(TAG_SHAPES),
     __metadata("design:type", String)
 ], Tag.prototype, "shape", void 0);
 __decorate([
-    ValidateOneOf(...TAG_SIZES),
+    OneOf(TAG_SIZES),
     __metadata("design:type", String)
 ], Tag.prototype, "size", void 0);

package/dist/collection/components/text/text.js

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
-import { Logger, ValidateOneOf, ValidateType, setupValidation, } from "../../utils/index";
+import { Logger, hasValue, OneOf, Type } from "../../utils/index";
 import { TEXT_ALIGNS, TEXT_COLORS, TEXT_SIZES, TEXT_SPACES, } from "./text.interfaces";
 /**
  * Text renders paragraph and article content with flexible sizing, styling, and semantic emphasis options.
@@ -79,13 +79,6 @@ export class Text {
     createLogger(log) {
         this.log = log;
     }
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    connectedCallback() {
-        setupValidation(this);
-    }
     /**
      * PRIVATE METHODS
      * ------------------------------------------------------
@@ -119,19 +112,19 @@ export class Text {
     render() {
         const Text = this.inline ? 'span' : 'p';
         const color = this.parseColor();
-        return (h(Host, { key: '9999aa5b3cdcea488d9f8677dbc619e3feefaac4', class: {
-                [`is-${color}`]: !!color,
+        return (h(Host, { key: '101acafa36573cc60a9fd5a325f0c2385dd97e16', class: {
+                [`is-${color}`]: hasValue(color),
                 'is-bold': this.bold,
                 'has-shadow': this.shadow,
                 'is-inline': this.inline,
                 'is-heading': this.heading,
                 'is-subtitle': this.subtitle,
                 'has-no-wrap': this.noWrap,
-                [`has-space-${this.space}`]: !!this.space,
-                [`is-${this.size}`]: !!this.size,
-            } }, h(Text, { key: '5e55b5842bf00b3b9ee1ed2d050b122b06cd0b07', id: "text", part: "text", class: {
-                [`is-${this.align}`]: !!this.align,
-            } }, h("slot", { key: '5c60c4098c62e5b3fa41e35ae27ccbe335a5defe' }))));
+                [`has-space-${this.space}`]: hasValue(this.space),
+                [`is-${this.size}`]: hasValue(this.size),
+            } }, h(Text, { key: 'deccf1ef96652a71578d30e31b3f638c75cabda8', id: "text", part: "text", class: {
+                [`is-${this.align}`]: hasValue(this.align),
+            } }, h("slot", { key: '1779627b8463bf67bf4b99e1050c9e3bad6567b9' }))));
     }
     static get is() { return "ds-text"; }
     static get encapsulation() { return "shadow"; }
@@ -491,62 +484,62 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Text.prototype, "createLogger", null);
 __decorate([
-    ValidateOneOf(...TEXT_ALIGNS),
+    OneOf(TEXT_ALIGNS),
     __metadata("design:type", String)
 ], Text.prototype, "align", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Text.prototype, "bold", void 0);
 __decorate([
-    ValidateOneOf(...TEXT_COLORS),
+    OneOf(TEXT_COLORS),
     __metadata("design:type", String)
 ], Text.prototype, "color", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Text.prototype, "disabled", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Text.prototype, "heading", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Text.prototype, "hovered", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Text.prototype, "inline", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Text.prototype, "invalid", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Text.prototype, "inverted", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Text.prototype, "noWrap", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Text.prototype, "pressed", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Text.prototype, "shadow", void 0);
 __decorate([
-    ValidateOneOf(...TEXT_SIZES),
+    OneOf(TEXT_SIZES),
     __metadata("design:type", String)
 ], Text.prototype, "size", void 0);
 __decorate([
-    ValidateOneOf(...TEXT_SPACES),
+    OneOf(TEXT_SPACES),
     __metadata("design:type", String)
 ], Text.prototype, "space", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Text.prototype, "subtitle", void 0);

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

@@ -1 +1 @@
-:host{--_input-family: var(--input-family, var(--mod-input-family, var(--ds-input-control-family)));--_input-weight: var(--input-weight, var(--mod-input-weight, var(--ds-input-control-weight)));--_input-line-height: var(--input-line-height, var(--mod-input-line-height, var(--ds-input-control-line-height)));--_input-size: var(--input-size, var(--mod-input-size, var(--ds-input-control-size-device)));--_input-color: var(--input-color, var(--mod-input-color, var(--ds-input-control-color-value-base)));--_input-placeholder: var(--input-placeholder, var(--mod-input-placeholder, var(--ds-input-control-color-placeholder-base)));--_input-container-background: var(--input-container-background, var(--mod-input-container-background, var(--ds-input-container-color-base-background)));--_input-container-border-color: var(--input-container-border-color, var(--mod-input-container-border-color, var(--ds-input-container-color-base-border)));--_input-container-border-width: var(--input-container-border-width, var(--mod-input-container-border-width, var(--ds-input-container-border-width)));--_input-container-radius: var(--input-container-radius, var(--mod-input-container-radius, var(--ds-input-container-radius)));--_input-container-hover-background: var(--input-container-hover-background, var(--mod-input-container-hover-background, var(--ds-input-container-color-hover-background)));--_input-container-active-background: var(--input-container-active-background, var(--mod-input-container-active-background, var(--ds-input-container-color-active-background)));--_input-container-focus-background: var(--input-container-focus-background, var(--mod-input-container-focus-background, var(--ds-input-container-color-focus-background)));--_input-container-hover-border: var(--input-container-hover-border, var(--mod-input-container-hover-border, var(--ds-input-container-color-hover-border)));--_input-container-active-border: var(--input-container-active-border, var(--mod-input-container-active-border, var(--ds-input-container-color-active-border)));--_input-container-focus-border: var(--input-container-focus-border, var(--mod-input-container-focus-border, var(--ds-input-container-color-focus-border)));--_input-label-color: var(--input-label-color, var(--mod-input-label-color, var(--ds-input-label-color-base)));--_input-label-family: var(--input-label-family, var(--mod-input-label-family, var(--ds-input-label-family)));--_input-label-weight: var(--input-label-weight, var(--mod-input-label-weight, var(--ds-input-label-weight)));--_input-label-line-height: var(--input-label-line-height, var(--mod-input-label-line-height, var(--ds-input-label-line-height)));--_input-label-size: var(--input-label-size, var(--mod-input-label-size, var(--ds-input-label-size-device)));--_input-description-color: var(--input-description-color, var(--mod-input-description-color, var(--ds-input-description-color-base)));--_input-description-family: var(--input-description-family, var(--mod-input-description-family, var(--ds-input-description-family)));--_input-description-weight: var(--input-description-weight, var(--mod-input-description-weight, var(--ds-input-description-weight)));--_input-description-line-height: var(--input-description-line-height, var(--mod-input-description-line-height, var(--ds-input-description-line-height)));--_input-description-size: var(--input-description-size, var(--mod-input-description-size, var(--ds-input-description-size-device)))}:host{position:relative;display:grid;gap:.25rem}:host #textarea{border:none;outline:none;box-shadow:none;position:relative;background:inherit;flex:1;color:var(--_input-color);font-family:var(--_input-family);font-weight:var(--_input-weight);font-size:var(--_input-size);line-height:var(--_input-line-height);border-radius:var(--_input-container-radius)}:host #textarea::placeholder{color:var(--_input-placeholder)}:host #textarea::-moz-placeholder{color:var(--_input-placeholder)}:host #textarea::-webkit-input-placeholder{color:var(--_input-placeholder)}:host #textarea:-moz-placeholder{color:var(--_input-placeholder)}:host #textarea:-ms-input-placeholder{color:var(--_input-placeholder)}:host #container{box-sizing:border-box;display:flex;width:100%;align-items:flex-start;padding-block:.5rem;padding-inline:.5rem;gap:.25rem;background:var(--_input-container-background);border:var(--_input-container-border-width) solid var(--_input-container-border-color);border-radius:var(--_input-container-radius)}@media(hover: hover)and (pointer: fine){:host #container:hover,:host #container.is-hovered{background:var(--_input-container-hover-background);border-color:var(--_input-container-hover-border)}}:host #container:active,:host #container.is-pressed{background:var(--_input-container-active-background);border-color:var(--_input-container-active-border)}:host #container:focus-within:not(:active),:host #container.is-focused:not(:active){background:var(--_input-container-focus-background);border-color:var(--_input-container-focus-border)}:host #container textarea{resize:vertical}:host :where(fieldset){margin:0;padding:0;border:none}:host :where(legend){padding:0;float:left;width:100%}: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(--_input-label-color);font-family:var(--_input-label-family);font-weight:var(--_input-label-weight);font-size:var(--_input-label-size);line-height:var(--_input-label-line-height)}:host #description{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;box-sizing:content-box;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;gap:.25rem;min-height:1.125rem;color:var(--_input-description-color);font-family:var(--_input-description-family);font-weight:var(--_input-description-weight);font-size:var(--_input-description-size);line-height:var(--_input-description-line-height)}:host #description ds-icon{--icon-color: var(--_input-description-color)}:host(.is-danger){--mod-input-container-border-color: var(--ds-input-container-color-danger-border);--mod-input-description-color: var(--ds-input-description-color-danger);--mod-input-container-hover-border: var(--ds-input-container-color-danger-border);--mod-input-container-active-border: var(--ds-input-container-color-danger-border)}:host(.is-success){--mod-input-container-border-color: var(--ds-input-container-color-success-border);--mod-input-description-color: var(--ds-input-description-color-success);--mod-input-container-hover-border: var(--ds-input-container-color-success-border);--mod-input-container-active-border: var(--ds-input-container-color-success-border)}:host(.is-warning){--mod-input-container-border-color: var(--ds-input-container-color-warning-border);--mod-input-description-color: var(--ds-input-description-color-warning);--mod-input-container-hover-border: var(--ds-input-container-color-warning-border);--mod-input-container-active-border: var(--ds-input-container-color-warning-border)}:host(.is-disabled),:host(.is-disabled) #label,:host(.is-disabled) #description,:host(.is-disabled) #textarea{pointer-events:none;cursor:default}:host(.is-disabled){--mod-input-container-background: var(--ds-input-container-color-disabled-background);--mod-input-container-border-color: var(--ds-input-container-color-disabled-border);--mod-input-label-color: var(--ds-input-label-color-disabled);--mod-input-description-color: var(--ds-input-description-color-disabled);--mod-input-color: var(--ds-input-control-color-value-disabled);--mod-input-placeholder: var(--ds-input-control-color-placeholder-disabled)}
+:host{--_form-field-gap: var(--form-field-gap, var(--mod-form-field-gap, 0.25rem));--_form-container-background: var(--form-container-background, var(--mod-form-container-background, var(--ds-form-container-color-base-background)));--_form-container-border-color: var(--form-container-border-color, var(--mod-form-container-border-color, var(--ds-form-container-color-base-border)));--_form-container-border-width: var(--form-container-border-width, var(--mod-form-container-border-width, var(--ds-form-container-border-width)));--_form-container-radius: var(--form-container-radius, var(--mod-form-container-radius, var(--ds-form-container-radius)));--_form-container-hover-background: var(--form-container-hover-background, var(--mod-form-container-hover-background, var(--ds-form-container-color-hover-background)));--_form-container-active-background: var(--form-container-active-background, var(--mod-form-container-active-background, var(--ds-form-container-color-active-background)));--_form-container-focus-background: var(--form-container-focus-background, var(--mod-form-container-focus-background, var(--ds-form-container-color-focus-background)));--_form-container-hover-border: var(--form-container-hover-border, var(--mod-form-container-hover-border, var(--ds-form-container-color-hover-border)));--_form-container-active-border: var(--form-container-active-border, var(--mod-form-container-active-border, var(--ds-form-container-color-active-border)));--_form-container-focus-border: var(--form-container-focus-border, var(--mod-form-container-focus-border, var(--ds-form-container-color-focus-border)));--_form-label-color: var(--form-label-color, var(--mod-form-label-color, var(--ds-form-label-color-base)));--_form-label-family: var(--form-label-family, var(--mod-form-label-family, var(--ds-form-label-family)));--_form-label-weight: var(--form-label-weight, var(--mod-form-label-weight, var(--ds-form-label-weight)));--_form-label-line-height: var(--form-label-line-height, var(--mod-form-label-line-height, var(--ds-form-label-line-height)));--_form-label-size: var(--form-label-size, var(--mod-form-label-size, var(--ds-form-label-size-device)));--_form-description-color: var(--form-description-color, var(--mod-form-description-color, var(--ds-form-description-color-base)));--_form-description-family: var(--form-description-family, var(--mod-form-description-family, var(--ds-form-description-family)));--_form-description-weight: var(--form-description-weight, var(--mod-form-description-weight, var(--ds-form-description-weight)));--_form-description-line-height: var(--form-description-line-height, var(--mod-form-description-line-height, var(--ds-form-description-line-height)));--_form-description-size: var(--form-description-size, var(--mod-form-description-size, var(--ds-form-description-size-device)));--_textarea-family: var(--textarea-family, var(--mod-textarea-family, var(--ds-form-control-family)));--_textarea-weight: var(--textarea-weight, var(--mod-textarea-weight, var(--ds-form-control-weight)));--_textarea-line-height: var(--textarea-line-height, var(--mod-textarea-line-height, var(--ds-form-control-line-height)));--_textarea-size: var(--textarea-size, var(--mod-textarea-size, var(--ds-form-control-size-device)));--_textarea-color: var(--textarea-color, var(--mod-textarea-color, var(--ds-form-control-color-value-base)));--_textarea-placeholder: var(--textarea-placeholder, var(--mod-textarea-placeholder, var(--ds-form-control-color-placeholder-base)))}:host{position:relative;display:grid;gap:var(--_form-field-gap)}:host #container{box-sizing:border-box;clear:both;display:flex;width:100%;align-items:center;min-height:3rem;gap:.25rem;padding-inline:.5rem;background:var(--_form-container-background);border:var(--_form-container-border-width) solid var(--_form-container-border-color);border-radius:var(--_form-container-radius)}@media(hover: hover)and (pointer: fine){:host #container:hover,:host #container.is-hovered{background:var(--_form-container-hover-background);border-color:var(--_form-container-hover-border)}}:host #container:active,:host #container.is-pressed{background:var(--_form-container-active-background);border-color:var(--_form-container-active-border)}:host #container:focus-within:not(:active),:host #container.is-focused:not(:active){background:var(--_form-container-focus-background);border-color:var(--_form-container-focus-border)}:host :where(fieldset){margin:0;padding:0;border:none}:host :where(legend){padding:0;float:left;width:100%}: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(--_form-label-color);font-family:var(--_form-label-family);font-weight:var(--_form-label-weight);font-size:var(--_form-label-size);line-height:var(--_form-label-line-height)}:host #description{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;box-sizing:content-box;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;gap:.25rem;min-height:1.125rem;color:var(--_form-description-color);font-family:var(--_form-description-family);font-weight:var(--_form-description-weight);font-size:var(--_form-description-size);line-height:var(--_form-description-line-height)}:host #description ds-icon{--icon-color: var(--_form-description-color)}:host #textarea{border:none;outline:none;box-shadow:none;position:relative;background:inherit;flex:1;color:var(--_textarea-color);font-family:var(--_textarea-family);font-weight:var(--_textarea-weight);font-size:var(--_textarea-size);line-height:var(--_textarea-line-height);border-radius:var(--_textarea-container-radius)}:host #textarea::placeholder{color:var(--_textarea-placeholder)}:host #textarea::-moz-placeholder{color:var(--_textarea-placeholder)}:host #textarea::-webkit-input-placeholder{color:var(--_textarea-placeholder)}:host #textarea:-moz-placeholder{color:var(--_textarea-placeholder)}:host #textarea:-ms-input-placeholder{color:var(--_textarea-placeholder)}:host #inner{position:relative;display:grid;gap:var(--_form-field-gap)}:host #container textarea{resize:vertical}:host(.is-danger){--mod-form-container-border-color: var(--ds-form-container-color-danger-border);--mod-form-description-color: var(--ds-form-description-color-danger);--mod-form-container-hover-border: var(--ds-form-container-color-danger-border);--mod-form-container-active-border: var(--ds-form-container-color-danger-border)}:host(.is-success){--mod-form-container-border-color: var(--ds-form-container-color-success-border);--mod-form-description-color: var(--ds-form-description-color-success);--mod-form-container-hover-border: var(--ds-form-container-color-success-border);--mod-form-container-active-border: var(--ds-form-container-color-success-border)}:host(.is-warning){--mod-form-container-border-color: var(--ds-form-container-color-warning-border);--mod-form-description-color: var(--ds-form-description-color-warning);--mod-form-container-hover-border: var(--ds-form-container-color-warning-border);--mod-form-container-active-border: var(--ds-form-container-color-warning-border)}:host(.is-disabled),:host(.is-disabled) #label,:host(.is-disabled) #description,:host(.is-disabled) #textarea{pointer-events:none;cursor:default}:host(.is-disabled){--mod-form-container-background: var(--ds-form-container-color-disabled-background);--mod-form-container-border-color: var(--ds-form-container-color-disabled-border);--mod-form-label-color: var(--ds-form-label-color-disabled);--mod-form-description-color: var(--ds-form-description-color-disabled);--mod-textarea-color: var(--ds-form-control-color-value-disabled);--mod-textarea-placeholder: var(--ds-form-control-color-placeholder-disabled)}

package/dist/collection/components/textarea/textarea.js

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h, } from "@stencil/core";
-import { inheritAttributes, FormControl, debounceEvent, Logger, ValidateOneOf, ValidateType, setupValidation, } from "../../utils/index";
+import { inheritAttributes, FormControl, debounceEvent, Logger, OneOf, Type, } from "../../utils/index";
 import { defaultConfig, ListenToConfig } from "../../global/index";
 import { Field } from "../input/field.util";
 import { INPUT_COLORS, INPUT_INPUT_MODES } from "../input/input.interfaces";
@@ -128,7 +128,6 @@ export class Textarea {
      * ------------------------------------------------------
      */
     connectedCallback() {
-        setupValidation(this);
         this.debounceChanged();
         this.control.connectedCallback();
     }
@@ -183,7 +182,7 @@ export class Textarea {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Field, { key: '657c7d07c5f2e3e0ac17281f33775f033d7fa3a5', inputId: 'textarea', 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("textarea", Object.assign({ key: 'ee21851ff6ceae240caddcd877b5d8dcbc13164b', id: "textarea", part: "textarea", name: this.name, ref: el => (this.control.nativeEl = el), "aria-describedby": "description", "aria-invalid": this.invalid === true ? 'true' : 'false', disabled: this.disabled, autoCapitalize: this.autocapitalize, autocomplete: this.autocomplete, autofocus: this.autofocus, minLength: this.minLength, maxLength: this.maxLength, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, inputMode: this.inputmode, cols: this.cols, rows: this.rows, wrap: this.wrap || undefined, onClick: ev => this.handleClick(ev), onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev), onInput: ev => this.handleInput(ev), onKeyPress: ev => this.dsKeyPress.emit(ev) }, this.inheritedAttributes))));
+        return (h(Field, { key: 'eed94ad65298572829562a0d13d3decd677c2fbb', inputId: 'textarea', 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("textarea", Object.assign({ key: 'e8030aee2620ae0384945396cc794981a017287a', id: "textarea", part: "textarea", name: this.name, ref: el => (this.control.nativeEl = el), "aria-describedby": "description", "aria-invalid": this.invalid === true ? 'true' : 'false', disabled: this.disabled, autoCapitalize: this.autocapitalize, autocomplete: this.autocomplete, autofocus: this.autofocus, minLength: this.minLength, maxLength: this.maxLength, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, inputMode: this.inputmode, cols: this.cols, rows: this.rows, wrap: this.wrap ? this.wrap : undefined, onClick: ev => this.handleClick(ev), onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev), onInput: ev => this.handleInput(ev), onKeyPress: ev => this.dsKeyPress.emit(ev) }, this.inheritedAttributes))));
     }
     static get is() { return "ds-textarea"; }
     static get encapsulation() { return "shadow"; }
@@ -534,7 +533,7 @@ export class Textarea {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "name",
                 "defaultValue": "this.inputId"
             },
@@ -931,87 +930,87 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Textarea.prototype, "createLogger", null);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Textarea.prototype, "autocapitalize", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Textarea.prototype, "autocomplete", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Textarea.prototype, "autofocus", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Textarea.prototype, "autoInvalidOff", void 0);
 __decorate([
-    ValidateOneOf(...INPUT_COLORS),
+    OneOf(INPUT_COLORS),
     __metadata("design:type", String)
 ], Textarea.prototype, "color", void 0);
 __decorate([
-    ValidateType('number'),
+    Type('number'),
     __metadata("design:type", Number)
 ], Textarea.prototype, "cols", void 0);
 __decorate([
-    ValidateType('number'),
+    Type('number'),
     __metadata("design:type", Number)
 ], Textarea.prototype, "debounce", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Textarea.prototype, "description", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Textarea.prototype, "disabled", void 0);
 __decorate([
-    ValidateOneOf(...INPUT_INPUT_MODES),
+    OneOf(INPUT_INPUT_MODES),
     __metadata("design:type", String)
 ], Textarea.prototype, "inputmode", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Textarea.prototype, "invalid", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Textarea.prototype, "invalidText", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Textarea.prototype, "label", void 0);
 __decorate([
-    ValidateType('number'),
+    Type('number'),
     __metadata("design:type", Number)
 ], Textarea.prototype, "maxLength", void 0);
 __decorate([
-    ValidateType('number'),
+    Type('number'),
     __metadata("design:type", Number)
 ], Textarea.prototype, "minLength", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Textarea.prototype, "name", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Textarea.prototype, "placeholder", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Textarea.prototype, "readonly", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Textarea.prototype, "required", void 0);
 __decorate([
-    ValidateType('number'),
+    Type('number'),
     __metadata("design:type", Number)
 ], Textarea.prototype, "rows", void 0);
 __decorate([
-    ValidateOneOf(...TEXTAREA_WRAPS),
+    OneOf(TEXTAREA_WRAPS),
     __metadata("design:type", String)
 ], Textarea.prototype, "wrap", void 0);
 __decorate([

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

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