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

package/dist/esm/ds-number-input.entry.js

@@ -1,23 +1,25 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { x as defaultLocale, B as registerInstance, I as createEvent, v as defaultConfig, N as debounceEvent, E as h, G as getElement } from './index-C6MVahkC.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C9GKXw-5.js';
+import { x as defaultLocale, B as registerInstance, I as createEvent, v as defaultConfig, N as debounceEvent, E as h, G as getElement } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-Duhf3ymL.js';
-import { e as require_baseKeys, g as require_getTag, b as requireIsArguments, f as requireIsArrayLike, c as requireIsBuffer, d as requireIsTypedArray, h as require_isPrototype } from './_getTag-DFxL3s3h.js';
-import { b as requireIsArray, d as require_baseGetTag, c as requireIsObjectLike } from './isObjectLike-BAYao9w7.js';
+import { e as require_baseKeys, g as require_getTag, b as requireIsArguments, f as requireIsArrayLike, c as requireIsBuffer, d as requireIsTypedArray, h as require_isPrototype } from './_getTag-BkweuRJc.js';
+import { r as requireIsArray } from './isArray-B8PCdo6e.js';
+import { i as isNaN } from './isNaN-BrbqGXXw.js';
 import { i as isNil } from './isNil--HeEBNs3.js';
 import { i as inheritAttributes } from './attributes-B62ocg4Q.js';
-import { F as FormControl, s as stopEventBubbling } from './form-control-DvJo0GKN.js';
-import { h as hasValue } from './has-value-DU9L2JaI.js';
-import { u as useDsConfig } from './config.utils-D9o7rffC.js';
+import { F as FormControl, s as stopEventBubbling } from './form-control-BAP86QSm.js';
+import { h as hasValue } from './has-value-CADjf9QZ.js';
+import { w as watchInvalidTextSlot, F as Field } from './field.util-Dl02gvlr.js';
+import { u as useDsConfig } from './config.utils-Db2OSTX3.js';
 import { N as NUMBER_KEYS, A as ACTION_KEYS } from './keys.constant-D86WpWIE.js';
-import { F as Field } from './field.util-BjZzAi09.js';
 import { I as INPUT_COLORS } from './input.interfaces-BMM6Nxeh.js';
-import { O as OneOf } from './one-of-CKPv0Nqm.js';
-import { T as Type } from './type-DzkhLOG_.js';
-import { L as ListenToConfig } from './config.decorator-ZQ0_Zx5y.js';
-import './create-validator-decorator-DovxquEu.js';
+import { O as OneOf } from './one-of-rLykP5eX.js';
+import { T as Type } from './type-Bqge296W.js';
+import { L as ListenToConfig } from './config.decorator-CyvsD1EY.js';
+import './isObjectLike-BnBXjF_n.js';
+import './create-validator-decorator-g9TfAa1g.js';
 import './aria-DYfTMCkl.js';
 import './label.i18n-C7I7OlaM.js';
 
@@ -140,103 +142,6 @@ function requireIsEmpty () {
 var isEmptyExports = requireIsEmpty();
 var isEmpty = /*@__PURE__*/getDefaultExportFromCjs(isEmptyExports);
 
-var isNumber_1;
-var hasRequiredIsNumber;
-
-function requireIsNumber () {
-	if (hasRequiredIsNumber) return isNumber_1;
-	hasRequiredIsNumber = 1;
-	var baseGetTag = require_baseGetTag(),
-	    isObjectLike = requireIsObjectLike();
-
-	/** `Object#toString` result references. */
-	var numberTag = '[object Number]';
-
-	/**
-	 * Checks if `value` is classified as a `Number` primitive or object.
-	 *
-	 * **Note:** To exclude `Infinity`, `-Infinity`, and `NaN`, which are
-	 * classified as numbers, use the `_.isFinite` method.
-	 *
-	 * @static
-	 * @memberOf _
-	 * @since 0.1.0
-	 * @category Lang
-	 * @param {*} value The value to check.
-	 * @returns {boolean} Returns `true` if `value` is a number, else `false`.
-	 * @example
-	 *
-	 * _.isNumber(3);
-	 * // => true
-	 *
-	 * _.isNumber(Number.MIN_VALUE);
-	 * // => true
-	 *
-	 * _.isNumber(Infinity);
-	 * // => true
-	 *
-	 * _.isNumber('3');
-	 * // => false
-	 */
-	function isNumber(value) {
-	  return typeof value == 'number' ||
-	    (isObjectLike(value) && baseGetTag(value) == numberTag);
-	}
-
-	isNumber_1 = isNumber;
-	return isNumber_1;
-}
-
-var _isNaN;
-var hasRequired_isNaN;
-
-function require_isNaN () {
-	if (hasRequired_isNaN) return _isNaN;
-	hasRequired_isNaN = 1;
-	var isNumber = requireIsNumber();
-
-	/**
-	 * Checks if `value` is `NaN`.
-	 *
-	 * **Note:** This method is based on
-	 * [`Number.isNaN`](https://mdn.io/Number/isNaN) and is not the same as
-	 * global [`isNaN`](https://mdn.io/isNaN) which returns `true` for
-	 * `undefined` and other non-number values.
-	 *
-	 * @static
-	 * @memberOf _
-	 * @since 0.1.0
-	 * @category Lang
-	 * @param {*} value The value to check.
-	 * @returns {boolean} Returns `true` if `value` is `NaN`, else `false`.
-	 * @example
-	 *
-	 * _.isNaN(NaN);
-	 * // => true
-	 *
-	 * _.isNaN(new Number(NaN));
-	 * // => true
-	 *
-	 * isNaN(undefined);
-	 * // => true
-	 *
-	 * _.isNaN(undefined);
-	 * // => false
-	 */
-	function isNaN(value) {
-	  // An `NaN` primitive is the only value that is not equal to itself.
-	  // Perform the `toStringTag` check first to avoid errors with some
-	  // ActiveX objects in IE.
-	  return isNumber(value) && value != +value;
-	}
-
-	_isNaN = isNaN;
-	return _isNaN;
-}
-
-var _isNaNExports = require_isNaN();
-var isNaN = /*@__PURE__*/getDefaultExportFromCjs(_isNaNExports);
-
 function checkIfValueIsStringAndDoesNotHaveGermanFormat(val) {
     return typeof val === 'string' && getThousandSeparator() !== '.';
 }
@@ -363,6 +268,7 @@ const NumberInput = class {
         this.control = new FormControl(this);
         this.lastValue = '';
         this.focused = false;
+        this.hasInvalidTextSlotContent = false;
         this.language = defaultConfig.language;
         this.region = defaultConfig.region;
         this.nativeInputValue = '';
@@ -531,6 +437,13 @@ const NumberInput = class {
     connectedCallback() {
         this.debounceChanged();
         this.control.connectedCallback();
+        this.disconnectInvalidTextSlotWatcher = watchInvalidTextSlot(this.el, hasContent => {
+            this.hasInvalidTextSlotContent = hasContent;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.disconnectInvalidTextSlotWatcher) === null || _a === void 0 ? void 0 : _a.call(this);
     }
     componentWillLoad() {
         this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
@@ -626,7 +539,8 @@ const NumberInput = class {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Field, { key: 'a8af3f272c3522c566a98904ebbc2dcfcd85352d', disabled: this.disabled, color: this.color, invalid: this.invalid, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language }, h("input", Object.assign({ key: '29f61a574130cef9184b4252b60fe8a69c8eadf5', id: "input", part: "input", type: "text", inputMode: "decimal", pattern: this.inputPattern, ref: el => (this.control.nativeEl = el), "aria-describedby": "description", "aria-invalid": this.invalid === true ? 'true' : 'false', name: this.name, disabled: this.disabled, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, min: this.min, max: this.max, value: this.nativeInputValue, onInput: ev => this.handleInput(ev), onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev), onClick: ev => this.control.onClick(ev), onKeyDown: ev => this.handleKeydown(ev), onKeyPress: ev => this.dsKeyPress.emit(ev) }, this.inheritedAttributes))));
+        const isInvalid = this.invalid || this.hasInvalidTextSlotContent;
+        return (h(Field, { key: 'a185df149be41135c6b939ad1c3ad5ba57a38e94', disabled: this.disabled, color: this.color, invalid: isInvalid, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language }, h("input", Object.assign({ key: 'a7461115068e7a365ba4b0e25501d96be6de099d', id: "input", part: "input", type: "text", inputMode: "decimal", pattern: this.inputPattern, ref: el => (this.control.nativeEl = el), "aria-describedby": "description", "aria-invalid": isInvalid ? 'true' : 'false', name: this.name, disabled: this.disabled, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, min: this.min, max: this.max, value: this.nativeInputValue, onInput: ev => this.handleInput(ev), onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev), onClick: ev => this.control.onClick(ev), onKeyDown: ev => this.handleKeydown(ev), onKeyPress: ev => this.dsKeyPress.emit(ev) }, this.inheritedAttributes))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

package/dist/esm/ds-pagination.entry.js

@@ -1,19 +1,19 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, I as createEvent, v as defaultConfig, E as h, F as Host, G as getElement } from './index-C6MVahkC.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C9GKXw-5.js';
-import { h as hasValue } from './has-value-DU9L2JaI.js';
+import { B as registerInstance, I as createEvent, v as defaultConfig, E as h, F as Host, G as getElement } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
+import { h as hasValue } from './has-value-CADjf9QZ.js';
 import { i as i18nControlLabel } from './pagination.i18n-BR1SYpQO.js';
-import { d as dsBreakpoints } from './breakpoints.subject-BNnXcKMw.js';
-import { O as OneOf } from './one-of-CKPv0Nqm.js';
-import { T as Type } from './type-DzkhLOG_.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-DZ0xN4Np.js';
-import { L as ListenToConfig } from './config.decorator-ZQ0_Zx5y.js';
-import './create-validator-decorator-DovxquEu.js';
-import './listener-DHP2OPMZ.js';
-import './device-CRuIJzXR.js';
-import './config.utils-D9o7rffC.js';
+import { d as dsBreakpoints } from './breakpoints.subject-CUVOWezN.js';
+import { O as OneOf } from './one-of-rLykP5eX.js';
+import { T as Type } from './type-Bqge296W.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-CIweMjJQ.js';
+import { L as ListenToConfig } from './config.decorator-CyvsD1EY.js';
+import './create-validator-decorator-g9TfAa1g.js';
+import './listener-DiVrGAqj.js';
+import './device-CtidwsPr.js';
+import './config.utils-Db2OSTX3.js';
 
 function generatePaginationControl(value, totalPages, pageRange) {
     const paginationArray = [];
@@ -259,28 +259,28 @@ const Pagination = class {
         const leftControlTitle = this.textPrevious || i18nControlLabel[this.language].left;
         const rightControlTitle = this.textNext || i18nControlLabel[this.language].right;
         const hasBasicNavigationButtons = !hasValue(this.variant) || (isVariantDots && this.totalPages <= 5);
-        const DotsWithText = () => (h("span", { key: 'ad305888a9a44b97ab2c5c17ecb746bedfc29ea0', class: "dots" }, h("strong", { key: '54248aa0c8f37ccd2015218a3d89730d947daa75' }, this.value), h("span", { key: 'c072e770c971fdd6265ecdb1f2c12e371d01b7fc' }, "/"), h("span", { key: 'fe2868321d3b21582e808846e98127166145a2aa' }, this.totalPages)));
-        return (h(Host, { key: 'ee53970824a2ed4ebb1fc4785d16ea161c7e405a', class: {
+        const DotsWithText = () => (h("span", { key: 'e5df59a6b0f2955c7ffe0a1b8ae05828d089a03a', class: "dots" }, h("strong", { key: '8aec14c8f62c54ad23696b7baa6c5214ccc3d625' }, this.value), h("span", { key: 'a3ed5e5e68ea3706cc490f7a859a4d6ecbb38ff5' }, "/"), h("span", { key: 'a621e7f072a7214b7fef82b1672742df94d45ba9' }, this.totalPages)));
+        return (h(Host, { key: 'e4fde2b2b21cdd1dd28df93f2e7a137c284760ef', class: {
                 'is-sticky': this.sticky,
                 'is-disabled': this.disabled,
                 [`is-variant-${this.variant}`]: hasValue(this.variant),
                 [`is-size-${this.size}`]: hasValue(this.size),
                 [`is-align-${this.align}`]: hasValue(this.align),
-            } }, h("nav", { key: 'd327a7c0c1c0b1a24cbf599aaa5734815886be0e', class: {}, id: "nav", part: "navigation", role: "navigation", "aria-label": labelControlTitle }, !this.disabled && (h("button", { key: '71611638672eeb763968c788b70d0d56a0ddd124', id: "previous", part: "previous", "aria-label": leftControlTitle, title: leftControlTitle, class: {
+            } }, h("nav", { key: '15343917a6da89b56809ba627398044f25a8a055', class: {}, id: "nav", part: "navigation", role: "navigation", "aria-label": labelControlTitle }, !this.disabled && (h("button", { key: '0b779674998a104b80a81cc9729c53800472815f', id: "previous", part: "previous", "aria-label": leftControlTitle, title: leftControlTitle, class: {
                 'button': true,
                 'is-square': true,
                 'is-disabled': this.value < 2,
                 'is-flat': flat,
                 [buttonColor]: true,
                 [buttonSize]: true,
-            }, disabled: this.value < 2, onClick: () => this.previous() }, h("ds-icon", { key: 'e839a0b2bf96bad5c7e63d3b4c46df1acaab5e73', name: "nav-go-left", size: "sm", disabled: this.value < 2 }))), !this.disabled && (h("button", { key: 'c4e9ecb77143d63456f9d0b9989b6268b04c363e', id: "next", part: "next", "aria-label": rightControlTitle, title: rightControlTitle, class: {
+            }, disabled: this.value < 2, onClick: () => this.previous() }, h("ds-icon", { key: '297a1a9a9cd53f79a41fcac21d5a1e2abe4621c8', name: "nav-go-left", size: "sm", disabled: this.value < 2 }))), !this.disabled && (h("button", { key: 'b6fc6ce84a9fa1ebc08a1ea1ad10566c369bba71', id: "next", part: "next", "aria-label": rightControlTitle, title: rightControlTitle, class: {
                 'button': true,
                 'is-square': true,
                 'is-disabled': this.value === this.totalPages,
                 'is-flat': flat,
                 [buttonColor]: true,
                 [buttonSize]: true,
-            }, disabled: this.value === this.totalPages, onClick: () => this.next() }, h("ds-icon", { key: '6e3e65dcc2337fe6bc1adf434871eb204e1806d4', name: "nav-go-right", size: "sm", disabled: this.value === this.totalPages }))), hasBasicNavigationButtons ? (h("ul", { class: { dots: hasValue(this.variant) }, part: "list" }, items)) : (h(DotsWithText, null)))));
+            }, disabled: this.value === this.totalPages, onClick: () => this.next() }, h("ds-icon", { key: '6764ae6b035917963f07f20ae172e23894c1bd32', name: "nav-go-right", size: "sm", disabled: this.value === this.totalPages }))), hasBasicNavigationButtons ? (h("ul", { class: { dots: hasValue(this.variant) }, part: "list" }, items)) : (h(DotsWithText, null)))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ds-progress-bar.entry.js

@@ -1,18 +1,18 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { d as dsBrowser, B as registerInstance, v as defaultConfig, D as raf, E as h, F as Host, G as getElement } from './index-C6MVahkC.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C9GKXw-5.js';
-import { h as hasValue } from './has-value-DU9L2JaI.js';
-import { W as WindowResizeListener, i as initialBreakpoints } from './breakpoints.subject-BNnXcKMw.js';
-import { a as SingleSubject } from './listener-DHP2OPMZ.js';
-import { O as OneOf } from './one-of-CKPv0Nqm.js';
-import { T as Type } from './type-DzkhLOG_.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-DZ0xN4Np.js';
-import { L as ListenToConfig } from './config.decorator-ZQ0_Zx5y.js';
-import './create-validator-decorator-DovxquEu.js';
-import './device-CRuIJzXR.js';
-import './config.utils-D9o7rffC.js';
+import { d as dsBrowser, B as registerInstance, v as defaultConfig, D as raf, E as h, F as Host, G as getElement } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
+import { h as hasValue } from './has-value-CADjf9QZ.js';
+import { W as WindowResizeListener, i as initialBreakpoints } from './breakpoints.subject-CUVOWezN.js';
+import { a as SingleSubject } from './listener-DiVrGAqj.js';
+import { O as OneOf } from './one-of-rLykP5eX.js';
+import { T as Type } from './type-Bqge296W.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-CIweMjJQ.js';
+import { L as ListenToConfig } from './config.decorator-CyvsD1EY.js';
+import './create-validator-decorator-g9TfAa1g.js';
+import './device-CtidwsPr.js';
+import './config.utils-Db2OSTX3.js';
 
 class WindowResizeSubject extends SingleSubject {
     constructor() {
@@ -167,7 +167,7 @@ const ProgressBar = class {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: 'a62c9348298ce8a4d17ada8d666433060930c5dd', role: "progressbar", "aria-label": `${i18nDsProgressBar[this.language].progress}: ${this.value}%`, "aria-valuenow": this.value, "aria-valuemin": "0", "aria-valuemax": "100", class: {
+        return (h(Host, { key: 'f58b0f36bace8a5e6afa02993dd51b9f22c02ec8', role: "progressbar", "aria-label": `${i18nDsProgressBar[this.language].progress}: ${this.value}%`, "aria-valuenow": this.value, "aria-valuemin": "0", "aria-valuemax": "100", class: {
                 'is-light': hasValue(this.background) && this.background === 'light',
                 'is-dark': !hasValue(this.background) || this.background === 'dark',
                 'is-primary': !hasValue(this.color) || this.color === 'primary',
@@ -175,7 +175,7 @@ const ProgressBar = class {
                 'is-yellow': hasValue(this.color) && this.color === 'yellow',
                 'is-red': hasValue(this.color) && this.color === 'red',
                 'is-green': hasValue(this.color) && this.color === 'green',
-            } }, h("div", { key: '7bfac5f71dd4ff19597606a588477658d0cff944', id: "line", part: "line", class: {
+            } }, h("div", { key: '512721ca39c4c559b40bdd0a4d7d51da7d5ef6f2', id: "line", part: "line", class: {
                 'is-animated': this.animated,
             }, ref: lineEl => (this.lineEl = lineEl) })));
     }

package/dist/esm/ds-radio-group.entry.js

@@ -1,19 +1,19 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, I as createEvent, v as defaultConfig, f as isDescendant, M as hasTagName, E as h, G as getElement } from './index-C6MVahkC.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C9GKXw-5.js';
-import { s as stopEventBubbling } from './form-control-DvJo0GKN.js';
-import { F as Field } from './field.util-BjZzAi09.js';
+import { B as registerInstance, I as createEvent, v as defaultConfig, f as isDescendant, M as hasTagName, E as h, G as getElement } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
+import { s as stopEventBubbling } from './form-control-BAP86QSm.js';
+import { w as watchInvalidTextSlot, F as Field } from './field.util-Dl02gvlr.js';
 import { I as INPUT_COLORS } from './input.interfaces-BMM6Nxeh.js';
 import { R as RADIO_GROUP_COLUMNS, a as RADIO_LABEL_POSITIONS, b as RADIO_TILE_COLORS } from './radio.interfaces-BFeO6Gq4.js';
-import { T as Type } from './type-DzkhLOG_.js';
-import { O as OneOf } from './one-of-CKPv0Nqm.js';
-import { L as ListenToConfig } from './config.decorator-ZQ0_Zx5y.js';
+import { T as Type } from './type-Bqge296W.js';
+import { O as OneOf } from './one-of-rLykP5eX.js';
+import { L as ListenToConfig } from './config.decorator-CyvsD1EY.js';
 import './aria-DYfTMCkl.js';
 import './label.i18n-C7I7OlaM.js';
-import './create-validator-decorator-DovxquEu.js';
-import './config.utils-D9o7rffC.js';
+import './create-validator-decorator-g9TfAa1g.js';
+import './config.utils-Db2OSTX3.js';
 
 const radioGroupHostCss = () => `: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{position:relative;display:grid;gap:.25rem}: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;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-hyphens:auto;-ms-hyphens:auto;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:-ms-flexbox;display:flex;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-hyphens:auto;-ms-hyphens:auto;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 #container{display:grid;gap:.25rem}@media screen and (min-width: 769px){:host #container{display:-ms-flexbox;display:flex;gap:1rem}}:host(.is-vertical) #container{display:grid;gap:.25rem}:host(.is-danger){--mod-radio-group-description-color:var(--ds-form-description-color-danger)}:host(.is-disabled),:host(.is-disabled) #label,:host(.is-disabled) #description,:host(.is-disabled) #input{pointer-events:none;cursor:default}:host(.is-disabled){--mod-radio-group-label-color:var(--ds-form-label-color-disabled);--mod-radio-group-description-color:var(--ds-form-description-color-disabled)}:host(.is-tile) #container{-ms-flex-wrap:wrap;flex-wrap:wrap}`;
 
@@ -32,6 +32,7 @@ const RadioGroup = class {
         }
         this.language = defaultConfig.language;
         this.region = defaultConfig.region;
+        this.hasInvalidTextSlotContent = false;
         this.inputId = `ds-rg-${radioGroupIds++}`;
         /**
          * PUBLIC PROPERTY API
@@ -101,6 +102,10 @@ const RadioGroup = class {
          * Defines the layout of the input
          */
         this.tile = false;
+        /**
+         * If `true` and `tile` is set, the radio circle is visually hidden on every radio in the group.
+         */
+        this.hideTrigger = false;
         /**
          * Defines the color of the tile checkbox.
          */
@@ -117,6 +122,10 @@ const RadioGroup = class {
             this.setRadioTabindex(this.value);
             this.setRadioChecked();
         };
+        this.handleSlotChange = () => {
+            this.passDownAttributes();
+            this.handleValueChange();
+        };
         this.handleClick = (ev) => {
             const element = ev.target;
             if (element.href) {
@@ -151,14 +160,24 @@ const RadioGroup = class {
     connectedCallback() {
         this.initialValue = this.value;
         this.internals.setFormValue(this.value);
+        this.disconnectInvalidTextSlotWatcher = watchInvalidTextSlot(this.el, hasContent => {
+            this.hasInvalidTextSlotContent = hasContent;
+        });
         this.passDownAttributes();
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.disconnectInvalidTextSlotWatcher) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
     componentWillLoad() {
         this.handleValueChange();
     }
     componentWillUpdate() {
         this.passDownAttributes();
     }
+    componentDidLoad() {
+        this.handleSlotChange();
+    }
     /**
      * PUBLIC LISTENERS
      * ------------------------------------------------------
@@ -246,19 +265,20 @@ const RadioGroup = class {
      * ------------------------------------------------------
      */
     passDownAttributes() {
+        const isInvalid = this.invalid || this.hasInvalidTextSlotContent;
         this.getRadios().forEach(radio => {
+            var _a;
             if (this.disabled !== undefined) {
                 radio.disabled = this.disabled;
             }
             if (this.readonly !== undefined) {
                 radio.readonly = this.readonly;
             }
-            if (this.invalid !== undefined) {
-                radio.invalid = this.invalid;
-            }
+            radio.invalid = isInvalid;
             radio.labelPosition = this.labelPosition;
             radio.tile = this.tile;
-            radio.tileColor = this.tileColor;
+            radio.hideTrigger = this.hideTrigger;
+            radio.tileColor = (_a = radio.getAttribute('tile-color')) !== null && _a !== void 0 ? _a : this.tileColor;
             radio.cols = this.cols;
             radio.colsTablet = this.colsTablet;
             radio.colsMobile = this.colsMobile;
@@ -295,10 +315,10 @@ const RadioGroup = class {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Field, { key: '6b73d9b9050aea5ad17c934f5c57667aa36b65e4', role: "fieldset", disabled: this.disabled, color: this.color, 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: 'c7cc878d4b12a536d805dbdf3e44419cc2c31c3f', role: "fieldset", disabled: this.disabled, color: this.color, invalid: this.invalid || this.hasInvalidTextSlotContent, loading: this.loading, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, cssClasses: {
                 'is-vertical': this.vertical,
                 'is-tile': this.tile,
-            }, onClick: this.handleClick }, h("slot", { key: '6c090a936fab5b14946544e52cf30890f719c2ff' })));
+            }, onClick: this.handleClick }, h("slot", { key: '468b13eff479f2654ce14a5b513e10f513fbf0ee', onSlotchange: this.handleSlotChange })));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -378,6 +398,10 @@ __decorate([
     Type('boolean'),
     __metadata("design:type", Boolean)
 ], RadioGroup.prototype, "tile", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], RadioGroup.prototype, "hideTrigger", void 0);
 __decorate([
     OneOf(RADIO_TILE_COLORS),
     __metadata("design:type", String)

package/dist/esm/ds-radio.entry.js

@@ -1,19 +1,19 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, I as createEvent, f as isDescendant, k as waitAfterIdleCallback, E as h, F as Host, G as getElement } from './index-C6MVahkC.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C9GKXw-5.js';
+import { B as registerInstance, I as createEvent, f as isDescendant, k as waitAfterIdleCallback, E as h, F as Host, G as getElement } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
 import { i as inheritAttributes } from './attributes-B62ocg4Q.js';
-import { s as stopEventBubbling } from './form-control-DvJo0GKN.js';
-import { h as hasValue } from './has-value-DU9L2JaI.js';
+import { s as stopEventBubbling } from './form-control-BAP86QSm.js';
+import { h as hasValue } from './has-value-CADjf9QZ.js';
 import { a as isSpaceKey } from './keyboard-Uy_dVz21.js';
 import { F as FOCUS_KEYS } from './app.focus.util-BTyFgjT3.js';
 import { R as RADIO_GROUP_COLUMNS, a as RADIO_LABEL_POSITIONS, b as RADIO_TILE_COLORS } from './radio.interfaces-BFeO6Gq4.js';
-import { T as Type } from './type-DzkhLOG_.js';
-import { O as OneOf } from './one-of-CKPv0Nqm.js';
-import './create-validator-decorator-DovxquEu.js';
+import { T as Type } from './type-Bqge296W.js';
+import { O as OneOf } from './one-of-rLykP5eX.js';
+import './create-validator-decorator-g9TfAa1g.js';
 
-const radioHostCss = () => `:host{--_radio-gap:var(--radio-gap, var(--mod-radio-gap, 0.5rem));--_radio-label-base-color:var(--radio-label-base-color, var(--mod-radio-label-base-color, inherit));--_radio-label-hover-color:var(--radio-label-hover-color, var(--mod-radio-label-hover-color, var(--ds-global-color-sky-5)));--_radio-label-active-color:var(--radio-label-active-color, var(--mod-radio-label-active-color, var(--ds-global-color-primary-6)));--_radio-size:var(--radio-size, var(--mod-radio-size, 1.5rem));--_radio-border-width:var(--radio-border-width, var(--mod-radio-border-width, var(--ds-alias-border-width-base)));--_radio-radius:var(--radio-radius, var(--mod-radio-radius, var(--ds-alias-radius-rounded)));--_radio-tile-radius:var(--radio-tile-radius, var(--mod-radio-tile-radius, var(--ds-alias-radius-base)));--_radio-tile-padding:var(--radio-tile-padding, var(--mod-radio-tile-padding, 1rem));--_radio-tile-border-width:var(--radio-tile-border-width, var(--mod-radio-tile-border-width, var(--ds-alias-border-width-base)));--_radio-tile-base-background-color:var(--radio-tile-base-background-color, var(--mod-radio-tile-base-background-color, inherit));--_radio-tile-base-border-color:var(--radio-tile-base-border-color, var(--mod-radio-tile-base-border-color, var(--ds-global-color-grey-3)));--_radio-tile-hover-background-color:var(--radio-tile-hover-background-color, var(--mod-radio-tile-hover-background-color, var(--ds-global-color-grey-2)));--_radio-tile-hover-border-color:var(--radio-tile-hover-border-color, var(--mod-radio-tile-hover-border-color, var(--ds-global-color-sky-5)));--_radio-tile-active-background-color:var(--radio-tile-active-background-color, var(--mod-radio-tile-active-background-color, var(--ds-global-color-grey-2)));--_radio-tile-active-border-color:var(--radio-tile-active-border-color, var(--mod-radio-tile-active-border-color, var(--ds-global-color-primary-6)));--_radio-unchecked-base-color-background:var(--radio-unchecked-base-color-background, var(--mod-radio-unchecked-base-color-background, transparent));--_radio-unchecked-base-color-border:var(--radio-unchecked-base-color-border, var(--mod-radio-unchecked-base-color-border, var(--ds-global-color-primary-5)));--_radio-unchecked-hover-color-background:var(--radio-unchecked-hover-color-background, var(--mod-radio-unchecked-hover-color-background, var(--ds-global-color-grey-2)));--_radio-unchecked-hover-color-border:var(--radio-unchecked-hover-color-border, var(--mod-radio-unchecked-hover-color-border, var(--ds-global-color-sky-5)));--_radio-unchecked-active-color-background:var(--radio-unchecked-active-color-background, var(--mod-radio-unchecked-active-color-background, var(--ds-global-color-grey-2)));--_radio-unchecked-active-color-border:var(--radio-unchecked-active-color-border, var(--mod-radio-unchecked-active-color-border, var(--ds-global-color-primary-6)));--_radio-checked-base-color-background:var(--radio-checked-base-color-background, var(--mod-radio-checked-base-color-background, var(--ds-global-color-primary-5)));--_radio-checked-base-color-border:var(--radio-checked-base-color-border, var(--mod-radio-checked-base-color-border, var(--ds-global-color-primary-5)));--_radio-checked-base-color-icon:var(--radio-checked-base-color-icon, var(--mod-radio-checked-base-color-icon, var(--ds-global-color-white)));--_radio-checked-hover-color-background:var(--radio-checked-hover-color-background, var(--mod-radio-checked-hover-color-background, var(--ds-global-color-sky-5)));--_radio-checked-hover-color-border:var(--radio-checked-hover-color-border, var(--mod-radio-checked-hover-color-border, var(--ds-global-color-sky-5)));--_radio-checked-active-color-background:var(--radio-checked-active-color-background, var(--mod-radio-checked-active-color-background, var(--ds-global-color-primary-6)));--_radio-checked-active-color-border:var(--radio-checked-active-color-border, var(--mod-radio-checked-active-color-border, var(--ds-global-color-primary-6)))}:host{display:inline-block;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;outline:none}label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-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;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:var(--_radio-gap);cursor:pointer;user-select:none;color:var(--_radio-label-base-color);font-family:var(--ds-global-font-family-text);line-height:var(--ds-typography-line-height-base);padding-top:.25rem;padding-bottom:.25rem;min-height:3rem}@media (hover: hover)and (pointer: fine){label:hover{color:var(--_radio-label-hover-color)}}label:active{color:var(--_radio-label-active-color)}label #slot{-ms-flex:1;flex:1}:host input[type=radio]{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;-ms-flex:none;flex:none;display:-ms-inline-flexbox;display:inline-flex;width:var(--_radio-size);height:var(--_radio-size);background:var(--_radio-unchecked-base-color-background);border:var(--_radio-border-width) solid var(--_radio-unchecked-base-color-border);border-radius:var(--_radio-radius);vertical-align:top;cursor:pointer;-webkit-transition:background .3s ease-in-out,border-color .3s ease-in-out;transition:background .3s ease-in-out,border-color .3s ease-in-out}:host input[type=radio]:disabled{cursor:default}:host input[type=radio]:focus-visible{outline:var(--ds-alias-interaction-focus-width, 2px) solid var(--ds-alias-interaction-focus-color-base);outline-offset:2px;border-radius:var(--_radio-radius)}:host input[type=radio]:not(:disabled):hover,:host:hover input[type=radio]:not(:disabled):not(:checked){background:var(--_radio-unchecked-hover-color-background);border-color:var(--_radio-unchecked-hover-color-border)}:host input[type=radio]:not(:disabled):active,:host:active input[type=radio]:not(:disabled):not(:checked){background:var(--_radio-unchecked-active-color-background);border-color:var(--_radio-unchecked-active-color-border)}:host input[type=radio]:checked{background:var(--_radio-checked-base-color-background);border-color:var(--_radio-checked-base-color-border)}:host input[type=radio]:checked:not(:disabled):hover,:host:hover input[type=radio]:checked:not(:disabled){background:var(--_radio-checked-hover-color-background);border-color:var(--_radio-checked-hover-color-border)}:host input[type=radio]:checked:not(:disabled):active,:host:active input[type=radio]:checked:not(:disabled){background:var(--_radio-checked-active-color-background);border-color:var(--_radio-checked-active-color-border)}:host input[type=radio]::after{content:"";display:block;border-radius:var(--_radio-radius);height:0;width:0;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);opacity:0;background:rgba(0,0,0,0);-webkit-transition:opacity .3s ease-in-out,width .3s ease-in-out,height .3s ease-in-out;transition:opacity .3s ease-in-out,width .3s ease-in-out,height .3s ease-in-out}:host input[type=radio]:checked::after{background-color:var(--_radio-checked-base-color-icon);height:.5rem;width:.5rem;opacity:1}:host(.is-invalid:not(.is-disabled)){--mod-radio-label-base-color:var(--ds-global-color-danger-4);--mod-radio-label-hover-color:var(--ds-global-color-danger-5);--mod-radio-label-active-color:var(--ds-global-color-danger-6);--mod-radio-unchecked-base-color-background:transparent;--mod-radio-unchecked-base-color-border:var(--ds-divider-color-danger);--mod-radio-unchecked-hover-color-background:var(--ds-global-color-danger-1);--mod-radio-unchecked-hover-color-border:var(--ds-divider-color-danger-dark);--mod-radio-unchecked-active-color-background:var(--ds-global-color-danger-1);--mod-radio-unchecked-active-color-border:var(--ds-divider-color-danger-darker);--mod-radio-checked-base-color-background:var(--ds-divider-color-danger);--mod-radio-checked-base-color-border:var(--ds-divider-color-danger);--mod-radio-checked-hover-color-background:var(--ds-divider-color-danger-dark);--mod-radio-checked-hover-color-border:var(--ds-divider-color-danger-dark);--mod-radio-checked-active-color-background:var(--ds-divider-color-danger-darker);--mod-radio-checked-active-color-border:var(--ds-divider-color-danger-darker)}:host(.is-disabled){cursor:default;pointer-events:none;--mod-radio-label-base-color:var(--ds-global-color-grey-5);--mod-radio-label-hover-color:var(--ds-global-color-grey-5);--mod-radio-label-active-color:var(--ds-global-color-grey-5);--mod-radio-unchecked-base-color-background:var(--ds-global-color-grey-2);--mod-radio-unchecked-base-color-border:var(--ds-alias-border-color-disabled);--mod-radio-checked-base-color-background:var(--ds-alias-border-color-disabled);--mod-radio-checked-base-color-border:var(--ds-alias-border-color-disabled)}:host(.has-label-left) label{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.has-label-top) label{-ms-flex-direction:column-reverse;flex-direction:column-reverse}:host(.is-tile){display:block;-ms-flex:0 0 100%;flex:0 0 100%}:host(.is-tile) label{width:100%;height:100%;padding:var(--_radio-tile-padding);border-style:solid;border-width:var(--_radio-tile-border-width);border-radius:var(--_radio-tile-radius);border-color:var(--_radio-tile-base-border-color);background:var(--_radio-tile-base-background-color)}@media (hover: hover)and (pointer: fine){:host(.is-tile) label:hover{border-color:var(--_radio-tile-hover-border-color);background:var(--_radio-tile-hover-background-color)}}:host(.is-tile) label:active{border-color:var(--_radio-tile-active-border-color);background:var(--_radio-tile-active-background-color)}:host(.is-tile.is-checked){--mod-radio-tile-base-border-color:var(--_radio-checked-base-color-background)}:host(.is-tile.has-tile-green.is-checked){--mod-radio-tile-base-background-color:var(--ds-global-color-green-1)}:host(.is-tile.has-tile-red.is-checked){--mod-radio-tile-base-background-color:var(--ds-global-color-red-1)}:host(.is-tile.has-tile-yellow.is-checked){--mod-radio-tile-base-background-color:var(--ds-global-color-yellow-1)}:host(.is-tile.has-tile-purple.is-checked){--mod-radio-tile-base-background-color:var(--ds-global-color-purple-1)}:host(.is-tile.is-disabled){--icon-brand-color:var(--ds-global-color-grey-5)}:host(.is-tile.is-invalid){--mod-radio-tile-hover-background-color:var(--ds-global-color-danger-1);--mod-radio-tile-active-background-color:var(--ds-global-color-danger-1);--mod-radio-tile-hover-border-color:var(--ds-global-color-danger-5);--mod-radio-tile-active-border-color:var(--ds-global-color-danger-6)}:host(.is-tile.is-invalid) label{--icon-brand-color:var(--ds-global-color-danger-4)}@media (hover: hover)and (pointer: fine){:host(.is-tile.is-invalid) label:hover{--icon-brand-color:var(--ds-global-color-danger-5)}}:host(.is-tile.is-invalid) label:active{--icon-brand-color:var(--ds-global-color-danger-6)}@media screen and (min-width: 769px){:host(.is-tile.has-cols-2){-ms-flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2);flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3){-ms-flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3);flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4){-ms-flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4);flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}@media screen and (max-width: 768px){:host(.is-tile.has-cols-2-mobile){-ms-flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2);flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3-mobile){-ms-flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3);flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4-mobile){-ms-flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4);flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}@media screen and (min-width: 769px){:host(.is-tile.has-cols-2-tablet){-ms-flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2);flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3-tablet){-ms-flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3);flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4-tablet){-ms-flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4);flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}@media screen and (min-width: 1024px){:host(.is-tile.has-cols-2-desktop){-ms-flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2);flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3-desktop){-ms-flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3);flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4-desktop){-ms-flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4);flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}`;
+const radioHostCss = () => `:host{--_radio-gap:var(--radio-gap, var(--mod-radio-gap, 0.5rem));--_radio-label-base-color:var(--radio-label-base-color, var(--mod-radio-label-base-color, inherit));--_radio-label-hover-color:var(--radio-label-hover-color, var(--mod-radio-label-hover-color, var(--ds-global-color-sky-5)));--_radio-label-active-color:var(--radio-label-active-color, var(--mod-radio-label-active-color, var(--ds-global-color-primary-6)));--_radio-size:var(--radio-size, var(--mod-radio-size, 1.5rem));--_radio-border-width:var(--radio-border-width, var(--mod-radio-border-width, var(--ds-alias-border-width-base)));--_radio-radius:var(--radio-radius, var(--mod-radio-radius, var(--ds-alias-radius-rounded)));--_radio-tile-radius:var(--radio-tile-radius, var(--mod-radio-tile-radius, var(--ds-alias-radius-base)));--_radio-tile-padding:var(--radio-tile-padding, var(--mod-radio-tile-padding, 1rem));--_radio-tile-border-width:var(--radio-tile-border-width, var(--mod-radio-tile-border-width, var(--ds-alias-border-width-base)));--_radio-tile-base-background-color:var(--radio-tile-base-background-color, var(--mod-radio-tile-base-background-color, inherit));--_radio-tile-base-border-color:var(--radio-tile-base-border-color, var(--mod-radio-tile-base-border-color, var(--ds-global-color-grey-3)));--_radio-tile-hover-background-color:var(--radio-tile-hover-background-color, var(--mod-radio-tile-hover-background-color, var(--ds-global-color-grey-0)));--_radio-tile-hover-border-color:var(--radio-tile-hover-border-color, var(--mod-radio-tile-hover-border-color, var(--ds-global-color-sky-5)));--_radio-tile-active-background-color:var(--radio-tile-active-background-color, var(--mod-radio-tile-active-background-color, var(--ds-global-color-grey-0)));--_radio-tile-active-border-color:var(--radio-tile-active-border-color, var(--mod-radio-tile-active-border-color, var(--ds-global-color-primary-6)));--_radio-unchecked-base-color-background:var(--radio-unchecked-base-color-background, var(--mod-radio-unchecked-base-color-background, transparent));--_radio-unchecked-base-color-border:var(--radio-unchecked-base-color-border, var(--mod-radio-unchecked-base-color-border, var(--ds-global-color-primary-5)));--_radio-unchecked-hover-color-background:var(--radio-unchecked-hover-color-background, var(--mod-radio-unchecked-hover-color-background, var(--ds-global-color-grey-1)));--_radio-unchecked-hover-color-border:var(--radio-unchecked-hover-color-border, var(--mod-radio-unchecked-hover-color-border, var(--ds-global-color-sky-5)));--_radio-unchecked-active-color-background:var(--radio-unchecked-active-color-background, var(--mod-radio-unchecked-active-color-background, var(--ds-global-color-grey-2)));--_radio-unchecked-active-color-border:var(--radio-unchecked-active-color-border, var(--mod-radio-unchecked-active-color-border, var(--ds-global-color-primary-6)));--_radio-checked-base-color-background:var(--radio-checked-base-color-background, var(--mod-radio-checked-base-color-background, var(--ds-global-color-primary-5)));--_radio-checked-base-color-border:var(--radio-checked-base-color-border, var(--mod-radio-checked-base-color-border, var(--ds-global-color-primary-5)));--_radio-checked-base-color-icon:var(--radio-checked-base-color-icon, var(--mod-radio-checked-base-color-icon, var(--ds-global-color-white)));--_radio-checked-hover-color-background:var(--radio-checked-hover-color-background, var(--mod-radio-checked-hover-color-background, var(--ds-global-color-sky-5)));--_radio-checked-hover-color-border:var(--radio-checked-hover-color-border, var(--mod-radio-checked-hover-color-border, var(--ds-global-color-sky-5)));--_radio-checked-active-color-background:var(--radio-checked-active-color-background, var(--mod-radio-checked-active-color-background, var(--ds-global-color-primary-6)));--_radio-checked-active-color-border:var(--radio-checked-active-color-border, var(--mod-radio-checked-active-color-border, var(--ds-global-color-primary-6)))}:host{display:inline-block;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;outline:none}label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-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;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:var(--_radio-gap);cursor:pointer;user-select:none;color:var(--_radio-label-base-color);font-family:var(--ds-global-font-family-text);line-height:var(--ds-typography-line-height-base);padding-top:.25rem;padding-bottom:.25rem;min-height:3rem}@media (hover: hover)and (pointer: fine){label:hover{color:var(--_radio-label-hover-color)}}label:active{color:var(--_radio-label-active-color)}label #slot{-ms-flex:1;flex:1}:host input[type=radio]{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;-ms-flex:none;flex:none;display:-ms-inline-flexbox;display:inline-flex;width:var(--_radio-size);height:var(--_radio-size);background:var(--_radio-unchecked-base-color-background);border:var(--_radio-border-width) solid var(--_radio-unchecked-base-color-border);border-radius:var(--_radio-radius);vertical-align:top;cursor:pointer;-webkit-transition:background .3s ease-in-out,border-color .3s ease-in-out;transition:background .3s ease-in-out,border-color .3s ease-in-out}:host input[type=radio]:disabled{cursor:default}:host input[type=radio]:focus-visible{outline:var(--ds-alias-interaction-focus-width, 2px) solid var(--ds-alias-interaction-focus-color-base);outline-offset:2px;border-radius:var(--_radio-radius)}:host input[type=radio]:not(:disabled):hover,:host:hover input[type=radio]:not(:disabled):not(:checked){background:var(--_radio-unchecked-hover-color-background);border-color:var(--_radio-unchecked-hover-color-border)}:host input[type=radio]:not(:disabled):active,:host:active input[type=radio]:not(:disabled):not(:checked){background:var(--_radio-unchecked-active-color-background);border-color:var(--_radio-unchecked-active-color-border)}:host input[type=radio]:checked{background:var(--_radio-checked-base-color-background);border-color:var(--_radio-checked-base-color-border)}:host input[type=radio]:checked:not(:disabled):hover,:host:hover input[type=radio]:checked:not(:disabled){background:var(--_radio-checked-hover-color-background);border-color:var(--_radio-checked-hover-color-border)}:host input[type=radio]:checked:not(:disabled):active,:host:active input[type=radio]:checked:not(:disabled){background:var(--_radio-checked-active-color-background);border-color:var(--_radio-checked-active-color-border)}:host input[type=radio]::after{content:"";display:block;border-radius:var(--_radio-radius);height:0;width:0;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);opacity:0;background:rgba(0,0,0,0);-webkit-transition:opacity .3s ease-in-out,width .3s ease-in-out,height .3s ease-in-out;transition:opacity .3s ease-in-out,width .3s ease-in-out,height .3s ease-in-out}:host input[type=radio]:checked::after{background-color:var(--_radio-checked-base-color-icon);height:.5rem;width:.5rem;opacity:1}:host(.is-invalid:not(.is-disabled)){--mod-radio-label-base-color:var(--ds-global-color-danger-4);--mod-radio-label-hover-color:var(--ds-global-color-danger-5);--mod-radio-label-active-color:var(--ds-global-color-danger-6);--mod-radio-unchecked-base-color-background:transparent;--mod-radio-unchecked-base-color-border:var(--ds-divider-color-danger);--mod-radio-unchecked-hover-color-background:var(--ds-global-color-danger-1);--mod-radio-unchecked-hover-color-border:var(--ds-divider-color-danger-dark);--mod-radio-unchecked-active-color-background:var(--ds-global-color-danger-1);--mod-radio-unchecked-active-color-border:var(--ds-divider-color-danger-darker);--mod-radio-checked-base-color-background:var(--ds-divider-color-danger);--mod-radio-checked-base-color-border:var(--ds-divider-color-danger);--mod-radio-checked-hover-color-background:var(--ds-divider-color-danger-dark);--mod-radio-checked-hover-color-border:var(--ds-divider-color-danger-dark);--mod-radio-checked-active-color-background:var(--ds-divider-color-danger-darker);--mod-radio-checked-active-color-border:var(--ds-divider-color-danger-darker)}:host(.is-disabled){cursor:default;pointer-events:none;--mod-radio-label-base-color:var(--ds-global-color-grey-5);--mod-radio-label-hover-color:var(--ds-global-color-grey-5);--mod-radio-label-active-color:var(--ds-global-color-grey-5);--mod-radio-unchecked-base-color-background:var(--ds-global-color-grey-2);--mod-radio-unchecked-base-color-border:var(--ds-alias-border-color-disabled);--mod-radio-checked-base-color-background:var(--ds-alias-border-color-disabled);--mod-radio-checked-base-color-border:var(--ds-alias-border-color-disabled)}:host(.has-label-left) label{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.has-label-top) label{-ms-flex-direction:column-reverse;flex-direction:column-reverse}:host(.is-tile){display:block;-ms-flex:0 0 100%;flex:0 0 100%}:host(.is-tile) label{width:100%;height:100%;padding:var(--_radio-tile-padding);border-style:solid;border-width:var(--_radio-tile-border-width);border-radius:var(--_radio-tile-radius);border-color:var(--_radio-tile-base-border-color);background:var(--_radio-tile-base-background-color)}@media (hover: hover)and (pointer: fine){:host(.is-tile) label:hover{border-color:var(--_radio-tile-hover-border-color);background:var(--_radio-tile-hover-background-color)}}:host(.is-tile) label:active{border-color:var(--_radio-tile-active-border-color);background:var(--_radio-tile-active-background-color)}:host(.is-tile.is-checked){--mod-radio-tile-base-border-color:var(--_radio-checked-base-color-background)}:host(.is-tile.hide-trigger) label{position:relative}:host(.is-tile.hide-trigger) input[type=radio]{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}:host(.is-tile.hide-trigger.is-checked){--mod-radio-tile-base-background-color:var(--ds-global-color-primary-1);--mod-radio-tile-hover-background-color:var(--ds-global-color-primary-1);--mod-radio-tile-active-background-color:var(--ds-global-color-primary-1)}:host(.is-tile.has-tile-green.is-checked){--mod-radio-tile-base-background-color:var(--ds-global-color-green-1);--mod-radio-tile-hover-background-color:var(--ds-global-color-green-1);--mod-radio-tile-active-background-color:var(--ds-global-color-green-1)}:host(.is-tile.has-tile-red.is-checked){--mod-radio-tile-base-background-color:var(--ds-global-color-red-1);--mod-radio-tile-hover-background-color:var(--ds-global-color-red-1);--mod-radio-tile-active-background-color:var(--ds-global-color-red-1)}:host(.is-tile.has-tile-yellow.is-checked){--mod-radio-tile-base-background-color:var(--ds-global-color-yellow-1);--mod-radio-tile-hover-background-color:var(--ds-global-color-yellow-1);--mod-radio-tile-active-background-color:var(--ds-global-color-yellow-1)}:host(.is-tile.has-tile-purple.is-checked){--mod-radio-tile-base-background-color:var(--ds-global-color-purple-1);--mod-radio-tile-hover-background-color:var(--ds-global-color-purple-1);--mod-radio-tile-active-background-color:var(--ds-global-color-purple-1)}:host(.is-tile.is-disabled){--icon-brand-color:var(--ds-global-color-grey-5)}:host(.is-tile.is-invalid){--mod-radio-tile-hover-background-color:var(--ds-global-color-danger-1);--mod-radio-tile-active-background-color:var(--ds-global-color-danger-1);--mod-radio-tile-hover-border-color:var(--ds-global-color-danger-5);--mod-radio-tile-active-border-color:var(--ds-global-color-danger-6)}:host(.is-tile.is-invalid) label{--icon-brand-color:var(--ds-global-color-danger-4)}@media (hover: hover)and (pointer: fine){:host(.is-tile.is-invalid) label:hover{--icon-brand-color:var(--ds-global-color-danger-5)}}:host(.is-tile.is-invalid) label:active{--icon-brand-color:var(--ds-global-color-danger-6)}@media screen and (min-width: 769px){:host(.is-tile.has-cols-2){-ms-flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2);flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3){-ms-flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3);flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4){-ms-flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4);flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}@media screen and (max-width: 768px){:host(.is-tile.has-cols-2-mobile){-ms-flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2);flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3-mobile){-ms-flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3);flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4-mobile){-ms-flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4);flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}@media screen and (min-width: 769px){:host(.is-tile.has-cols-2-tablet){-ms-flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2);flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3-tablet){-ms-flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3);flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4-tablet){-ms-flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4);flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}@media screen and (min-width: 1024px){:host(.is-tile.has-cols-2-desktop){-ms-flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2);flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3-desktop){-ms-flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3);flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4-desktop){-ms-flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4);flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}`;
 
 const Radio = class {
     constructor(hostRef) {
@@ -90,6 +90,10 @@ const Radio = class {
          * 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.
          */
@@ -245,18 +249,19 @@ const Radio = class {
         if (this.buttonTabindex !== undefined) {
             inputAttributes['tabIndex'] = this.buttonTabindex;
         }
-        return (h(Host, { key: '9b383a941268929daf06b1b489a999eea2155609', "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 && 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: '7d482ce4dc292979056c742e570fb5c896dbf03a', id: "label", part: "label" }, h("input", Object.assign({ key: '69cce42bde7dff626f0ee9114b6843638c184555', 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: '3fb5e32fe8b94aee3e88723e85a735e42b3d4238', id: "slot", part: "slot" }, h("slot", { key: '9dbee7d427ddda925a7e0846cbb6d01eb7a4f9ed' })))));
+            }, 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 formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -319,6 +324,10 @@ __decorate([
     Type('boolean'),
     __metadata("design:type", Boolean)
 ], Radio.prototype, "tile", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Radio.prototype, "hideTrigger", void 0);
 __decorate([
     OneOf(RADIO_TILE_COLORS),
     __metadata("design:type", String)

package/dist/esm/ds-segment-item.entry.js

@@ -1,10 +1,10 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, I as createEvent, J as debounce, E as h, F as Host, G as getElement } from './index-C6MVahkC.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C9GKXw-5.js';
-import { T as Type } from './type-DzkhLOG_.js';
-import './create-validator-decorator-DovxquEu.js';
+import { B as registerInstance, I as createEvent, J as debounce, E as h, F as Host, G as getElement } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
+import { T as Type } from './type-Bqge296W.js';
+import './create-validator-decorator-g9TfAa1g.js';
 
 const segmentItemHostCss = () => `: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}`;
 
@@ -52,7 +52,7 @@ const SegmentItem = class {
      * ------------------------------------------------------
      */
     render() {
-        return h(Host, { key: '87db62287d1b2a329ed1175ef71a3528bb7b1ce8', "aria-hidden": "true" });
+        return h(Host, { key: 'c703db008c250d8801d76bfdaddfb32e5985935e', "aria-hidden": "true" });
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }