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

package/dist/collection/components/radio/radio.js

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h, Host, } from "@stencil/core";
-import { Logger, isSpaceKey, inheritAttributes, isDescendant, waitAfterIdleCallback, stopEventBubbling, ValidateOneOf, ValidateType, setupValidation, } from "../../utils/index";
+import { Logger, isSpaceKey, inheritAttributes, isDescendant, waitAfterIdleCallback, stopEventBubbling, hasValue, OneOf, Type, } from "../../utils/index";
 import { FOCUS_KEYS } from "../app/app.focus.util";
 import { RADIO_GROUP_COLUMNS, RADIO_TILE_COLORS, RADIO_LABEL_POSITIONS, } from "./radio.interfaces";
 /**
@@ -79,6 +79,10 @@ export class Radio {
          * Defines the layout of the input
          */
         this.tile = false;
+        /**
+         * If `true` and `tile` is set, the radio circle is visually hidden. The tile remains fully clickable and keyboard-accessible.
+         */
+        this.hideTrigger = false;
         /**
          * Defines the color of the tile radio.
          */
@@ -146,7 +150,6 @@ export class Radio {
      * ------------------------------------------------------
      */
     connectedCallback() {
-        setupValidation(this);
         if (this.value === undefined) {
             this.value = this.inputId;
         }
@@ -235,18 +238,19 @@ export class Radio {
         if (this.buttonTabindex !== undefined) {
             inputAttributes['tabIndex'] = this.buttonTabindex;
         }
-        return (h(Host, { key: 'f5348673582c3f0fb64464e0cdf3274e18bc6bb8', "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}`, "aria-invalid": this.invalid ? 'true' : null, class: {
+        return (h(Host, { key: 'ade39da842204a93c8631bd36abc9ac3db2bccd0', "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}`, "aria-invalid": this.invalid ? 'true' : null, class: {
                 'is-disabled': this.disabled || this.readonly,
                 'is-invalid': this.invalid,
                 'is-checked': this.checked,
                 'is-tile': this.tile,
-                [`has-tile-${this.tileColor}`]: this.tile && !!this.tileColor,
+                [`has-tile-${this.tileColor}`]: this.tile && hasValue(this.tileColor),
+                'hide-trigger': this.tile && this.hideTrigger,
                 'has-label-left': this.labelPosition === 'left',
                 'has-label-top': this.labelPosition === 'top',
                 [`has-cols-${this.cols}`]: this.tile && this.cols > 1,
                 [`has-cols-${this.colsTablet}-tablet`]: this.tile && this.colsTablet > 1,
                 [`has-cols-${this.colsMobile}-mobile`]: this.tile && this.colsMobile > 1,
-            }, onClick: this.handleClick }, h("label", { key: '54d4bfcfec491025e485b3209e89ced7edbb8b31', id: "label", part: "label" }, h("input", Object.assign({ key: 'b7a5c0c381a5a649c3f95e0a998468c3115aa42b', type: "radio", part: "input", id: this.inputId, name: this.name, value: value, tabindex: this.buttonTabindex, checked: this.checked, disabled: this.disabled || this.readonly, required: this.required, "aria-invalid": this.invalid ? 'true' : null, onChange: ev => this.handleChange(ev), onFocus: this.handleFocus, onBlur: this.handleBlur, ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes)), h("div", { key: '4615f6096e5c77bb76c1f50e5d90def61b0295e2', id: "slot", part: "slot" }, h("slot", { key: 'dffad20376dc7cd26b3bee13c4884eae3ab0a49c' })))));
+            }, onClick: this.handleClick }, h("label", { key: 'd2663ed469a577718444a0d9292733ee7a8623e3', id: "label", part: "label" }, h("input", Object.assign({ key: '10f6dff613d46d36d8bbd70392bd93c20e5065cd', type: "radio", part: "input", id: this.inputId, name: this.name, value: value, tabindex: this.buttonTabindex, checked: this.checked, disabled: this.disabled || this.readonly, required: this.required, "aria-invalid": this.invalid ? 'true' : null, onChange: ev => this.handleChange(ev), onFocus: this.handleFocus, onBlur: this.handleBlur, ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes)), h("div", { key: '80fd2934e4cd19a31e039ed4085f8aaea2bc28d5', id: "slot", part: "slot" }, h("slot", { key: '688909562bc975627fd39ed70d6f74249815f95c' })))));
     }
     static get is() { return "ds-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -496,7 +500,7 @@ export class Radio {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "name",
                 "defaultValue": "this.inputId"
             },
@@ -560,6 +564,26 @@ export class Radio {
                 "attribute": "tile",
                 "defaultValue": "false"
             },
+            "hideTrigger": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` and `tile` is set, the radio circle is visually hidden. The tile remains fully clickable and keyboard-accessible."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-trigger",
+                "defaultValue": "false"
+            },
             "tileColor": {
                 "type": "string",
                 "mutable": false,
@@ -788,59 +812,63 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Radio.prototype, "createLogger", null);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Radio.prototype, "autoInvalidOff", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Radio.prototype, "checked", void 0);
 __decorate([
-    ValidateOneOf(...RADIO_GROUP_COLUMNS),
+    OneOf(RADIO_GROUP_COLUMNS),
     __metadata("design:type", Number)
 ], Radio.prototype, "cols", void 0);
 __decorate([
-    ValidateOneOf(...RADIO_GROUP_COLUMNS),
+    OneOf(RADIO_GROUP_COLUMNS),
     __metadata("design:type", Number)
 ], Radio.prototype, "colsMobile", void 0);
 __decorate([
-    ValidateOneOf(...RADIO_GROUP_COLUMNS),
+    OneOf(RADIO_GROUP_COLUMNS),
     __metadata("design:type", Number)
 ], Radio.prototype, "colsTablet", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Radio.prototype, "disabled", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Radio.prototype, "invalid", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Radio.prototype, "label", void 0);
 __decorate([
-    ValidateOneOf(...RADIO_LABEL_POSITIONS),
+    OneOf(RADIO_LABEL_POSITIONS),
     __metadata("design:type", String)
 ], Radio.prototype, "labelPosition", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Radio.prototype, "name", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Radio.prototype, "readonly", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Radio.prototype, "required", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Radio.prototype, "tile", void 0);
 __decorate([
-    ValidateOneOf(...RADIO_TILE_COLORS),
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Radio.prototype, "hideTrigger", void 0);
+__decorate([
+    OneOf(RADIO_TILE_COLORS),
     __metadata("design:type", String)
 ], Radio.prototype, "tileColor", void 0);
 let radioIds = 0;

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

@@ -32,6 +32,9 @@ const HOST_VARIANTS = [
     'tile-disabled',
     'tile-stack',
     'tile-stack-centered',
+    'tile-stack-multicolor-selected',
+    'tile-stack-multicolor-selected-hide-trigger',
+    'tile-stack-multicolor-unselected',
 ];
 const image = screenshot(TAG);
 test.describe('style', () => {

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

@@ -1 +1 @@
-:host{--_segment-radius: var(--segment-radius, var(--mod-segment-radius, var(--ds-segment-radius)));--_segment-background: var(--segment-background, var(--mod-segment-background, var(--ds-segment-background)));--_segment-gap: var(--segment-gap, var(--mod-segment-gap, var(--ds-segment-gap)));--_segment-padding: var(--segment-padding, var(--mod-segment-padding, var(--ds-segment-padding)));--_segment-item-height: var(--segment-item-height, var(--mod-segment-item-height, var(--ds-segment-item-height)));--_segment-item-padding-inline: var(--segment-item-padding-inline, var(--mod-segment-item-padding-inline, var(--ds-segment-item-padding-inline)));--_segment-item-padding-block: var(--segment-item-padding-block, var(--mod-segment-item-padding-block, var(--ds-segment-item-padding-block)));--_segment-item-icon-size: var(--segment-item-icon-size, var(--mod-segment-item-icon-size, var(--ds-segment-item-icon-size)));--_segment-item-icon-gap: var(--segment-item-icon-gap, var(--mod-segment-item-icon-gap, var(--ds-segment-item-icon-gap)));--_segment-item-font-weight: var(--segment-item-font-weight, var(--mod-segment-item-font-weight, var(--ds-segment-item-font-weight)));--_segment-description-font-size: var(--segment-description-font-size, var(--mod-segment-description-font-size, var(--ds-segment-description-font-size)));--_segment-description-font-weight: var(--segment-description-font-weight, var(--mod-segment-description-font-weight, var(--ds-segment-description-font-weight)));--_segment-focus-color: var(--segment-focus-color, var(--mod-segment-focus-color, var(--ds-segment-focus-color)));--_segment-item-unselected-color-base: var(--segment-item-unselected-color-base, var(--mod-segment-item-unselected-color-base, var(--ds-segment-item-unselected-color-base)));--_segment-item-unselected-color-hover: var(--segment-item-unselected-color-hover, var(--mod-segment-item-unselected-color-hover, var(--ds-segment-item-unselected-color-hover)));--_segment-item-unselected-color-active: var(--segment-item-unselected-color-active, var(--mod-segment-item-unselected-color-active, var(--ds-segment-item-unselected-color-active)));--_segment-item-selected-color-base: var(--segment-item-selected-color-base, var(--mod-segment-item-selected-color-base, var(--ds-segment-item-selected-color-base)));--_segment-item-selected-color-hover: var(--segment-item-selected-color-hover, var(--mod-segment-item-selected-color-hover, var(--ds-segment-item-selected-color-hover)));--_segment-item-selected-color-active: var(--segment-item-selected-color-active, var(--mod-segment-item-selected-color-active, var(--ds-segment-item-selected-color-active)));--_segment-item-selected-background: var(--segment-item-selected-background, var(--mod-segment-item-selected-background, var(--ds-segment-item-selected-background)));--_segment-divider-color: var(--segment-divider-color, var(--mod-segment-divider-color, var(--ds-segment-divider-color)))}:host{--_segment-label-color: var(--segment-label-color, var(--mod-segment-label-color, var(--ds-input-label-color-base)));--_segment-label-family: var(--segment-label-family, var(--mod-segment-label-family, var(--ds-input-label-family)));--_segment-label-weight: var(--segment-label-weight, var(--mod-segment-label-weight, var(--ds-input-label-weight)));--_segment-label-line-height: var(--segment-label-line-height, var(--mod-segment-label-line-height, var(--ds-input-label-line-height)));--_segment-label-size: var(--segment-label-size, var(--mod-segment-label-size, var(--ds-input-label-size-device)));--_segment-description-color: var(--segment-description-color, var(--mod-segment-description-color, var(--ds-input-description-color-base)));--_segment-description-family: var(--segment-description-family, var(--mod-segment-description-family, var(--ds-input-description-family)));--_segment-description-weight: var(--segment-description-weight, var(--mod-segment-description-weight, var(--ds-input-description-weight)));--_segment-description-line-height: var(--segment-description-line-height, var(--mod-segment-description-line-height, var(--ds-input-description-line-height)));--_segment-description-size: var(--segment-description-size, var(--mod-segment-description-size, var(--ds-input-description-size-device)))}:host{display:block}:host #inner{display:grid;gap:.25rem;position:relative}:host :where(fieldset){margin:0;padding:0;border:none}:host :where(legend){padding:0;float:left;width:100%}:host legend{-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(--_segment-label-color);font-family:var(--_segment-label-family);font-weight:var(--_segment-label-weight);font-size:var(--_segment-label-size);line-height:var(--_segment-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(--_segment-description-color);font-family:var(--_segment-description-family);font-weight:var(--_segment-description-weight);font-size:var(--_segment-description-size);line-height:var(--_segment-description-line-height)}:host #description ds-icon{--icon-color: var(--_segment-description-color)}#group{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;width:max-content;gap:var(--_segment-gap);padding:var(--_segment-padding);border-radius:var(--_segment-radius);background:var(--_segment-background)}#group label{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:relative;z-index:2;padding-inline:calc(var(--_segment-item-padding-inline) + var(--_segment-item-icon-size) + var(--_segment-item-icon-gap));padding-block:calc(var(--_segment-item-padding-block));min-height:var(--_segment-item-height);border-radius:inherit;cursor:pointer;user-select:none;font-weight:var(--_segment-item-font-weight);color:var(--_segment-item-unselected-color-base);--icon-color: var(--_segment-item-unselected-color-base)}#group label .description{font-size:var(--_segment-description-font-size);font-weight:var(--_segment-description-font-weight);text-align:center}#group label ds-icon{--icon-mt: 0.25rem;--icon-mb: 0.25rem}#group label #content{display:grid}#group label::before{content:"";position:absolute;left:var(--_segment-item-padding-inline);top:50%;transform:translateY(-50%);width:var(--_segment-item-icon-size);height:var(--_segment-item-icon-size);background-color:var(--_segment-item-selected-color-base);mask-image:url("data:image/svg+xml,<svg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M13.637 1.19792C14.0627 1.54974 14.1227 2.18006 13.7708 2.60579L5.73084 12.335L5.72842 12.3379C5.54554 12.5575 5.31602 12.7336 5.05655 12.8534C4.79707 12.9731 4.51417 13.0336 4.22842 13.0302L4.22752 13.0302C3.93709 13.0266 3.65125 12.9573 3.39146 12.8274C3.13254 12.6979 2.9062 12.5117 2.72931 12.2826C2.72871 12.2818 2.72812 12.281 2.72752 12.2802L0.210633 9.04426C-0.128437 8.60831 -0.0499029 7.98003 0.386044 7.64096C0.821992 7.30189 1.45027 7.38043 1.78934 7.81638L4.25291 10.9838L12.2291 1.33176C12.5809 0.906034 13.2113 0.846112 13.637 1.19792Z'/></svg>");mask-size:75%;mask-repeat:no-repeat;mask-position:center;opacity:0;transition:opacity 160ms ease-in-out}@media(hover: hover)and (pointer: fine){#group label:not(:has(input:checked)):hover{color:var(--_segment-item-unselected-color-hover);--icon-color: var(--_segment-item-unselected-color-hover)}}#group label:not(:has(input:checked)):active{color:var(--_segment-item-unselected-color-active);--icon-color: var(--_segment-item-unselected-color-active)}@media(hover: hover)and (pointer: fine){#group label:has(input:checked):hover{color:var(--_segment-item-selected-color-hover);--icon-color: var(--_segment-item-selected-color-hover)}#group label:has(input:checked):hover::before{background-color:var(--_segment-item-selected-color-hover)}}#group label:has(input:checked):active{color:var(--_segment-item-selected-color-active);--icon-color: var(--_segment-item-selected-color-active)}#group label:has(input:checked):active::before{background-color:var(--_segment-item-selected-color-active)}#group label:has(input:checked){color:var(--_segment-item-selected-color-base);--icon-color: var(--_segment-item-selected-color-base)}#group label input[type=radio]{appearance:none;position:absolute;inset:0;margin:0;padding:0;border-radius:inherit;cursor:pointer}#group label input[type=radio]:focus-visible{outline:var(--ds-alias-interaction-focus-width, 2px) solid var(--_segment-focus-color);outline-offset:2px;border-radius:inherit}#group label:not(:last-of-type)::after{content:"";position:absolute;right:calc(var(--_segment-gap)*-0.5 - 1px);top:0;bottom:0;width:2px;border-radius:2px;background-color:var(--_segment-divider-color);opacity:1;transition:opacity 160ms ease;z-index:-1}:host(.is-vertical) #group,:host(.is-auto-vertical) #group{grid-auto-flow:row;grid-auto-columns:1fr;width:auto}:host(.is-vertical) #group label,:host(.is-auto-vertical) #group label{flex-direction:row;align-items:center;justify-content:flex-start;gap:.75rem;text-align:left;padding-inline-start:var(--_segment-item-padding-inline);padding-inline-end:calc(var(--_segment-item-padding-inline) + var(--_segment-item-icon-size) + var(--_segment-item-icon-gap))}:host(.is-vertical) #group label:has(input:checked)::before,:host(.is-auto-vertical) #group label:has(input:checked)::before{opacity:1}:host(.is-vertical) #group label .description,:host(.is-auto-vertical) #group label .description{text-align:left}:host(.is-vertical) #group label::before,:host(.is-auto-vertical) #group label::before{left:auto;right:var(--_segment-item-padding-inline)}:host(.is-vertical) #group label span+span,:host(.is-auto-vertical) #group label span+span{font-size:var(--_segment-description-font-size)}:host(.is-vertical) #group label:not(:last-of-type)::after,:host(.is-auto-vertical) #group label:not(:last-of-type)::after{right:0;top:auto;bottom:calc(var(--_segment-gap)*-0.5 - 1px);width:auto;left:0;height:2px}@media screen and (max-width: 768px){:host(.is-vertical-on-mobile) #group{grid-auto-flow:row;grid-auto-columns:1fr;width:auto}:host(.is-vertical-on-mobile) #group label{flex-direction:row;align-items:center;justify-content:flex-start;gap:.75rem;text-align:left;padding-inline-start:var(--_segment-item-padding-inline);padding-inline-end:calc(var(--_segment-item-padding-inline) + var(--_segment-item-icon-size) + var(--_segment-item-icon-gap))}:host(.is-vertical-on-mobile) #group label:has(input:checked)::before{opacity:1}:host(.is-vertical-on-mobile) #group label .description{text-align:left}:host(.is-vertical-on-mobile) #group label::before{left:auto;right:var(--_segment-item-padding-inline)}:host(.is-vertical-on-mobile) #group label span+span{font-size:var(--_segment-description-font-size)}:host(.is-vertical-on-mobile) #group label:not(:last-of-type)::after{right:0;top:auto;bottom:calc(var(--_segment-gap)*-0.5 - 1px);width:auto;left:0;height:2px}}:host(.is-wide) #group{grid-auto-columns:1fr;width:auto}:host(.is-danger:not(.is-disabled)){--mod-segment-description-color: var(--ds-global-color-danger-4);--mod-segment-item-unselected-color-base: var(--ds-global-color-danger-4);--mod-segment-item-unselected-color-hover: var(--ds-global-color-danger-5);--mod-segment-item-unselected-color-active: var(--ds-global-color-danger-6);--mod-segment-item-selected-color-base: var(--ds-global-color-white);--mod-segment-item-selected-color-hover: var(--ds-global-color-white);--mod-segment-item-selected-color-active: var(--ds-global-color-white);--mod-segment-background: var(--ds-global-color-danger-1);--mod-segment-item-selected-background: var(--ds-global-color-danger-4)}:host(.is-disabled){cursor:default;pointer-events:none;--mod-segment-label-color: var(--ds-global-color-grey-5);--mod-segment-description-color: var(--ds-global-color-grey-5);--mod-segment-item-unselected-color-base: var(--ds-global-color-grey-5);--mod-segment-item-unselected-color-hover: var(--ds-global-color-grey-5);--mod-segment-item-unselected-color-active: var(--ds-global-color-grey-5);--mod-segment-item-selected-color-base: var(--ds-global-color-grey-6);--mod-segment-item-selected-color-hover: var(--ds-global-color-grey-6);--mod-segment-item-selected-color-active: var(--ds-global-color-grey-6);--mod-segment-item-selected-background: var(--ds-global-color-grey-3)}#group{position:relative;isolation:isolate}#pill{position:absolute;top:0;left:0;display:none;background-color:var(--_segment-item-selected-background);border-radius:inherit;z-index:0;pointer-events:none;clip-path:inset(0 round var(--_segment-radius));transition:left 160ms cubic-bezier(0.4, 0, 0.2, 1),top 160ms cubic-bezier(0.4, 0, 0.2, 1),width 160ms cubic-bezier(0.4, 0, 0.2, 1),height 160ms cubic-bezier(0.4, 0, 0.2, 1),clip-path 80ms ease}#group:has(label:has(input:checked):active) #pill{clip-path:inset(2px round var(--_segment-radius))}
+:host{--_segment-radius: var(--segment-radius, var(--mod-segment-radius, var(--ds-segment-radius)));--_segment-background: var(--segment-background, var(--mod-segment-background, var(--ds-segment-background)));--_segment-gap: var(--segment-gap, var(--mod-segment-gap, var(--ds-segment-gap)));--_segment-padding: var(--segment-padding, var(--mod-segment-padding, var(--ds-segment-padding)));--_segment-item-height: var(--segment-item-height, var(--mod-segment-item-height, var(--ds-segment-item-height)));--_segment-item-padding-inline: var(--segment-item-padding-inline, var(--mod-segment-item-padding-inline, var(--ds-segment-item-padding-inline)));--_segment-item-padding-block: var(--segment-item-padding-block, var(--mod-segment-item-padding-block, var(--ds-segment-item-padding-block)));--_segment-item-icon-size: var(--segment-item-icon-size, var(--mod-segment-item-icon-size, var(--ds-segment-item-icon-size)));--_segment-item-icon-gap: var(--segment-item-icon-gap, var(--mod-segment-item-icon-gap, var(--ds-segment-item-icon-gap)));--_segment-item-font-weight: var(--segment-item-font-weight, var(--mod-segment-item-font-weight, var(--ds-segment-item-font-weight)));--_segment-description-font-size: var(--segment-description-font-size, var(--mod-segment-description-font-size, var(--ds-segment-description-font-size)));--_segment-description-font-weight: var(--segment-description-font-weight, var(--mod-segment-description-font-weight, var(--ds-segment-description-font-weight)));--_segment-focus-color: var(--segment-focus-color, var(--mod-segment-focus-color, var(--ds-segment-focus-color)));--_segment-item-unselected-color-base: var(--segment-item-unselected-color-base, var(--mod-segment-item-unselected-color-base, var(--ds-segment-item-unselected-color-base)));--_segment-item-unselected-color-hover: var(--segment-item-unselected-color-hover, var(--mod-segment-item-unselected-color-hover, var(--ds-segment-item-unselected-color-hover)));--_segment-item-unselected-color-active: var(--segment-item-unselected-color-active, var(--mod-segment-item-unselected-color-active, var(--ds-segment-item-unselected-color-active)));--_segment-item-selected-color-base: var(--segment-item-selected-color-base, var(--mod-segment-item-selected-color-base, var(--ds-segment-item-selected-color-base)));--_segment-item-selected-color-hover: var(--segment-item-selected-color-hover, var(--mod-segment-item-selected-color-hover, var(--ds-segment-item-selected-color-hover)));--_segment-item-selected-color-active: var(--segment-item-selected-color-active, var(--mod-segment-item-selected-color-active, var(--ds-segment-item-selected-color-active)));--_segment-item-selected-background: var(--segment-item-selected-background, var(--mod-segment-item-selected-background, var(--ds-segment-item-selected-background)));--_segment-divider-color: var(--segment-divider-color, var(--mod-segment-divider-color, var(--ds-segment-divider-color)))}:host{--_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)))}:host{display:block}:host #inner{display:grid;gap:.25rem;position:relative}:host :where(fieldset){margin:0;padding:0;border:none}:host :where(legend){padding:0;float:left;width:100%}:host legend{-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)}#group{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;width:max-content;gap:var(--_segment-gap);padding:var(--_segment-padding);border-radius:var(--_segment-radius);background:var(--_segment-background)}#group label{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:relative;z-index:2;padding-inline:calc(var(--_segment-item-padding-inline) + var(--_segment-item-icon-size) + var(--_segment-item-icon-gap));padding-block:calc(var(--_segment-item-padding-block));min-height:var(--_segment-item-height);border-radius:inherit;cursor:pointer;user-select:none;font-weight:var(--_segment-item-font-weight);color:var(--_segment-item-unselected-color-base);--icon-color: var(--_segment-item-unselected-color-base)}#group label .description{font-size:var(--_segment-description-font-size);font-weight:var(--_segment-description-font-weight);text-align:center}#group label ds-icon{--icon-mt: 0.25rem;--icon-mb: 0.25rem}#group label #content{display:grid}#group label::before{content:"";position:absolute;left:var(--_segment-item-padding-inline);top:50%;transform:translateY(-50%);width:var(--_segment-item-icon-size);height:var(--_segment-item-icon-size);background-color:var(--_segment-item-selected-color-base);mask-image:url("data:image/svg+xml,<svg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M13.637 1.19792C14.0627 1.54974 14.1227 2.18006 13.7708 2.60579L5.73084 12.335L5.72842 12.3379C5.54554 12.5575 5.31602 12.7336 5.05655 12.8534C4.79707 12.9731 4.51417 13.0336 4.22842 13.0302L4.22752 13.0302C3.93709 13.0266 3.65125 12.9573 3.39146 12.8274C3.13254 12.6979 2.9062 12.5117 2.72931 12.2826C2.72871 12.2818 2.72812 12.281 2.72752 12.2802L0.210633 9.04426C-0.128437 8.60831 -0.0499029 7.98003 0.386044 7.64096C0.821992 7.30189 1.45027 7.38043 1.78934 7.81638L4.25291 10.9838L12.2291 1.33176C12.5809 0.906034 13.2113 0.846112 13.637 1.19792Z'/></svg>");mask-size:75%;mask-repeat:no-repeat;mask-position:center;opacity:0;transition:opacity 160ms ease-in-out}@media(hover: hover)and (pointer: fine){#group label:not(:has(input:checked)):hover{color:var(--_segment-item-unselected-color-hover);--icon-color: var(--_segment-item-unselected-color-hover)}}#group label:not(:has(input:checked)):active{color:var(--_segment-item-unselected-color-active);--icon-color: var(--_segment-item-unselected-color-active)}@media(hover: hover)and (pointer: fine){#group label:has(input:checked):hover{color:var(--_segment-item-selected-color-hover);--icon-color: var(--_segment-item-selected-color-hover)}#group label:has(input:checked):hover::before{background-color:var(--_segment-item-selected-color-hover)}}#group label:has(input:checked):active{color:var(--_segment-item-selected-color-active);--icon-color: var(--_segment-item-selected-color-active)}#group label:has(input:checked):active::before{background-color:var(--_segment-item-selected-color-active)}#group label:has(input:checked){color:var(--_segment-item-selected-color-base);--icon-color: var(--_segment-item-selected-color-base)}#group label input[type=radio]{appearance:none;position:absolute;inset:0;margin:0;padding:0;border-radius:inherit;cursor:pointer}#group label input[type=radio]:focus-visible{outline:var(--ds-alias-interaction-focus-width, 2px) solid var(--_segment-focus-color);outline-offset:2px;border-radius:inherit}#group label:not(:last-of-type)::after{content:"";position:absolute;right:calc(var(--_segment-gap)*-0.5 - 1px);top:0;bottom:0;width:2px;border-radius:2px;background-color:var(--_segment-divider-color);opacity:1;transition:opacity 160ms ease;z-index:-1}:host(.is-vertical) #group,:host(.is-auto-vertical) #group{grid-auto-flow:row;grid-auto-columns:1fr;width:auto}:host(.is-vertical) #group label,:host(.is-auto-vertical) #group label{flex-direction:row;align-items:center;justify-content:flex-start;gap:.75rem;text-align:left;padding-inline-start:var(--_segment-item-padding-inline);padding-inline-end:calc(var(--_segment-item-padding-inline) + var(--_segment-item-icon-size) + var(--_segment-item-icon-gap))}:host(.is-vertical) #group label:has(input:checked)::before,:host(.is-auto-vertical) #group label:has(input:checked)::before{opacity:1}:host(.is-vertical) #group label .description,:host(.is-auto-vertical) #group label .description{text-align:left}:host(.is-vertical) #group label::before,:host(.is-auto-vertical) #group label::before{left:auto;right:var(--_segment-item-padding-inline)}:host(.is-vertical) #group label span+span,:host(.is-auto-vertical) #group label span+span{font-size:var(--_segment-description-font-size)}:host(.is-vertical) #group label:not(:last-of-type)::after,:host(.is-auto-vertical) #group label:not(:last-of-type)::after{right:0;top:auto;bottom:calc(var(--_segment-gap)*-0.5 - 1px);width:auto;left:0;height:2px}@media screen and (max-width: 768px){:host(.is-vertical-on-mobile) #group{grid-auto-flow:row;grid-auto-columns:1fr;width:auto}:host(.is-vertical-on-mobile) #group label{flex-direction:row;align-items:center;justify-content:flex-start;gap:.75rem;text-align:left;padding-inline-start:var(--_segment-item-padding-inline);padding-inline-end:calc(var(--_segment-item-padding-inline) + var(--_segment-item-icon-size) + var(--_segment-item-icon-gap))}:host(.is-vertical-on-mobile) #group label:has(input:checked)::before{opacity:1}:host(.is-vertical-on-mobile) #group label .description{text-align:left}:host(.is-vertical-on-mobile) #group label::before{left:auto;right:var(--_segment-item-padding-inline)}:host(.is-vertical-on-mobile) #group label span+span{font-size:var(--_segment-description-font-size)}:host(.is-vertical-on-mobile) #group label:not(:last-of-type)::after{right:0;top:auto;bottom:calc(var(--_segment-gap)*-0.5 - 1px);width:auto;left:0;height:2px}}:host(.is-wide) #group{grid-auto-columns:1fr;width:auto}:host(.is-danger:not(.is-disabled)){--mod-segment-description-color: var(--ds-global-color-danger-4);--mod-segment-item-unselected-color-base: var(--ds-global-color-danger-4);--mod-segment-item-unselected-color-hover: var(--ds-global-color-danger-5);--mod-segment-item-unselected-color-active: var(--ds-global-color-danger-6);--mod-segment-item-selected-color-base: var(--ds-global-color-white);--mod-segment-item-selected-color-hover: var(--ds-global-color-white);--mod-segment-item-selected-color-active: var(--ds-global-color-white);--mod-segment-background: var(--ds-global-color-danger-1);--mod-segment-item-selected-background: var(--ds-global-color-danger-4)}:host(.is-disabled){cursor:default;pointer-events:none;--mod-segment-label-color: var(--ds-global-color-grey-5);--mod-segment-description-color: var(--ds-global-color-grey-5);--mod-segment-item-unselected-color-base: var(--ds-global-color-grey-5);--mod-segment-item-unselected-color-hover: var(--ds-global-color-grey-5);--mod-segment-item-unselected-color-active: var(--ds-global-color-grey-5);--mod-segment-item-selected-color-base: var(--ds-global-color-grey-6);--mod-segment-item-selected-color-hover: var(--ds-global-color-grey-6);--mod-segment-item-selected-color-active: var(--ds-global-color-grey-6);--mod-segment-item-selected-background: var(--ds-global-color-grey-3)}#group{position:relative;isolation:isolate}#pill{position:absolute;top:0;left:0;display:none;background-color:var(--_segment-item-selected-background);border-radius:inherit;z-index:0;pointer-events:none;clip-path:inset(0 round var(--_segment-radius));transition:left 160ms cubic-bezier(0.4, 0, 0.2, 1),top 160ms cubic-bezier(0.4, 0, 0.2, 1),width 160ms cubic-bezier(0.4, 0, 0.2, 1),height 160ms cubic-bezier(0.4, 0, 0.2, 1),clip-path 80ms ease}#group:has(label:has(input:checked):active) #pill{clip-path:inset(2px round var(--_segment-radius))}

package/dist/collection/components/segment/segment/segment.js

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h } from "@stencil/core";
-import { Logger, stopEventBubbling, isDescendant, ListenToResize, ValidateType, setupValidation, } from "../../../utils/index";
+import { Logger, stopEventBubbling, isDescendant, ListenToResize, Type } from "../../../utils/index";
 import { Field } from "../../input/field.util";
 import { defaultConfig, ListenToConfig } from "../../../global/index";
 /**
@@ -162,7 +162,6 @@ export class Segment {
      * ------------------------------------------------------
      */
     connectedCallback() {
-        setupValidation(this);
         this.initialValue = this.value;
         this.internals.setFormValue(this.value);
         this.resizeObserver = new ResizeObserver(() => {
@@ -246,19 +245,19 @@ export class Segment {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Field, { key: 'd0113590623adfa8b32c1e285b234ae8aa56c0bc', role: "fieldset", disabled: this.disabled, color: 'primary', invalid: this.invalid, loading: this.loading, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, cssClasses: {
+        return (h(Field, { key: '3623376042c1133c3c27368913914b7e3626761c', role: "fieldset", disabled: this.disabled, color: 'primary', invalid: this.invalid, loading: this.loading, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, cssClasses: {
                 'is-wide': this.wide,
                 'is-vertical': this.vertical,
                 'is-vertical-on-mobile': this.verticalOnMobile,
                 'is-auto-vertical': this.autoVertical,
-            }, onSlotChange: this.handleSlotChange }, h("div", { key: 'ee84e754aae796c8183a11b770b1fc2ee3e53aea', id: "group" }, h("div", { key: '6025f5aa2f55e158a29ad1a638b24f89ffa58d8d', id: "pill" }), this.items.map(item => (h("label", Object.assign({ key: item.value, class: {
+            }, onSlotChange: this.handleSlotChange }, h("div", { key: 'b175ee856735bd12278ab68610792d8f35db0d50', id: "group" }, h("div", { key: '37ecfcd8b782e67b612fa9d0a799fafe98bf54ae', id: "pill" }), this.items.map(item => (h("label", Object.assign({ key: item.value, class: {
                 'is-selected': item.value === this.value,
             }, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null }, (this.iconOnly
             ? {
                 'aria-label': `${item.label}${item.description ? `- ${item.description}` : ''}`,
                 'title': `${item.label}${item.description ? `- ${item.description}` : ''}`,
             }
-            : {})), h("input", { type: "radio", name: this.name, disabled: this.disabled, readOnly: this.readonly, value: item.value, checked: item.value === this.value, onClick: ev => this.handleInputClick(ev, item.value), onChange: () => this.handleInputChange(item.value), "aria-invalid": this.invalid ? 'true' : null }), item.icon && h("ds-icon", { name: item.icon }), item.svg && h("ds-icon", { svg: item.svg }), !this.iconOnly && (h("span", { id: "content" }, h("span", { class: "label" }, item.label), item.description && h("span", { class: "description" }, item.description))))))), h("div", { key: '5267fa323b929cf760a0485c8c716eee5cacaaf9' }, h("slot", { key: 'b4d7511d571d8de3b20198d6661b0a552a85b0ff', onSlotchange: () => this.handleSlotChange() }))));
+            : {})), h("input", { type: "radio", name: this.name, disabled: this.disabled, readOnly: this.readonly, value: item.value, checked: item.value === this.value, onClick: ev => this.handleInputClick(ev, item.value), onChange: () => this.handleInputChange(item.value), "aria-invalid": this.invalid ? 'true' : null }), item.icon && h("ds-icon", { name: item.icon }), item.svg && h("ds-icon", { svg: item.svg }), !this.iconOnly && (h("span", { id: "content" }, h("span", { class: "label" }, item.label), item.description && h("span", { class: "description" }, item.description))))))), h("div", { key: 'f0815ad652c00b772f97d335c9c03d6518116bbc' }, h("slot", { key: '1bab00d80378d7ab2c5d3a8e50df85195287fb34', onSlotchange: () => this.handleSlotChange() }))));
     }
     static get is() { return "ds-segment"; }
     static get encapsulation() { return "shadow"; }
@@ -451,7 +450,7 @@ export class Segment {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "name",
                 "defaultValue": "this.inputId"
             },
@@ -756,59 +755,59 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Segment.prototype, "createLogger", null);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Segment.prototype, "allowEmptySelection", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Segment.prototype, "description", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Segment.prototype, "disabled", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Segment.prototype, "iconOnly", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Segment.prototype, "invalid", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Segment.prototype, "invalidText", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Segment.prototype, "label", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Segment.prototype, "loading", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Segment.prototype, "name", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Segment.prototype, "readonly", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Segment.prototype, "required", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Segment.prototype, "vertical", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Segment.prototype, "verticalOnMobile", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Segment.prototype, "wide", void 0);
 __decorate([

package/dist/collection/components/segment/segment-item.js

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
-import { Logger, debounce, ValidateType, setupValidation } from "../../utils/index";
+import { Logger, debounce, Type } from "../../utils/index";
 /**
  * Segment item represents an individual selectable option within a segment group control with radio-like toggle behavior.
  *
@@ -43,7 +43,6 @@ export class SegmentItem {
      * ------------------------------------------------------
      */
     connectedCallback() {
-        setupValidation(this);
         this.debouncedWillUpdate = debounce(() => this.dsWillUpdate.emit(), 20);
     }
     componentWillUpdate() {
@@ -55,7 +54,7 @@ export class SegmentItem {
      * ------------------------------------------------------
      */
     render() {
-        return h(Host, { key: 'e962948a552dfca1086033d2e228abf0f896f5c4', "aria-hidden": "true" });
+        return h(Host, { key: 'c703db008c250d8801d76bfdaddfb32e5985935e', "aria-hidden": "true" });
     }
     static get is() { return "ds-segment-item"; }
     static get encapsulation() { return "shadow"; }
@@ -200,18 +199,18 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], SegmentItem.prototype, "createLogger", null);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], SegmentItem.prototype, "description", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], SegmentItem.prototype, "icon", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], SegmentItem.prototype, "label", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], SegmentItem.prototype, "svg", void 0);

package/dist/collection/components/select/select-optgroup.host.css

@@ -0,0 +1 @@
+:host{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}

package/dist/collection/components/select/select-optgroup.js

@@ -0,0 +1,82 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { h, Host } from "@stencil/core";
+import { Logger, Type } from "../../utils/index";
+/**
+ * Select optgroup groups `ds-select-option` elements under a label, as HTML markup — the
+ * grouped counterpart to `ds-select-option`. The element itself renders nothing visible;
+ * `ds-select` reads its `label` and its `ds-select-option` children.
+ *
+ * @slot - One or more ds-select-option elements.
+ */
+export class DsSelectOptgroup {
+    constructor() {
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * The label displayed above this group of options.
+         */
+        this.label = '';
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        return (h(Host, { key: '4df6aaf4a621c79257e59d642d2a07c2a79cfa1c', "aria-hidden": "true" }, h("slot", { key: '7f9206b4c33676e1f431f2cd3cf9644441a473f8' })));
+    }
+    static get is() { return "ds-select-optgroup"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["select-optgroup.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["select-optgroup.host.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label displayed above this group of options."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+__decorate([
+    Logger('select-optgroup'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], DsSelectOptgroup.prototype, "createLogger", null);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], DsSelectOptgroup.prototype, "label", void 0);

package/dist/collection/components/select/select-option.host.css

@@ -0,0 +1 @@
+:host{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}

package/dist/collection/components/select/select-option.js

@@ -0,0 +1,112 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { h, Host } from "@stencil/core";
+import { Logger, Type } from "../../utils/index";
+/**
+ * Select option declares a single selectable option as HTML markup, as an alternative to the
+ * `options` / `optionGroups` props on `ds-select` — useful for backend-only apps and easier
+ * migration, where the consumer would rather render option markup than write JavaScript.
+ * The element itself renders nothing visible; `ds-select` reads its `value`, `disabled`, and
+ * text content and renders the actual dropdown option itself.
+ *
+ * @slot - The option's label text.
+ */
+export class DsSelectOption {
+    constructor() {
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * The value submitted when this option is selected.
+         */
+        this.value = '';
+        /**
+         * If `true`, the option cannot be selected.
+         */
+        this.disabled = false;
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        return (h(Host, { key: 'ce770b34b31796d648f076575f4c1cf57b65c5af', "aria-hidden": "true" }, h("slot", { key: '4648de055b31a22a216b21f518b868a4e7791b0d' })));
+    }
+    static get is() { return "ds-select-option"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["select-option.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["select-option.host.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value submitted when this option is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the option cannot be selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+__decorate([
+    Logger('select-option'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], DsSelectOption.prototype, "createLogger", null);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], DsSelectOption.prototype, "value", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsSelectOption.prototype, "disabled", void 0);