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

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

@@ -3,23 +3,25 @@
  */
 'use strict';
 
-var index = require('./index-sC3JnTlJ.js');
-var tslib_es6 = require('./tslib.es6-CxyosZMg.js');
+var index = require('./index-DD7qcaNz.js');
+var tslib_es6 = require('./tslib.es6-DMgN1vwG.js');
 var _commonjsHelpers = require('./_commonjsHelpers-DVhpm0hL.js');
-var _getTag = require('./_getTag-B468r9bu.js');
-var isObjectLike = require('./isObjectLike-h-ta_ikf.js');
+var _getTag = require('./_getTag-DxZgmSPS.js');
+var isArray = require('./isArray-DvQst6zQ.js');
+var isNaN = require('./isNaN-DOSPWDkt.js');
 var isNil = require('./isNil-DuJ_OV5R.js');
 var attributes = require('./attributes-D57TMQsY.js');
-var formControl = require('./form-control-CtMcJUuC.js');
-var hasValue = require('./has-value-DK0oRqXI.js');
-var config_utils = require('./config.utils-MhZvq4Qm.js');
+var formControl = require('./form-control-CmRONWa7.js');
+var hasValue = require('./has-value-3s9rhB3K.js');
+var field_util = require('./field.util-C7hgA41e.js');
+var config_utils = require('./config.utils-BhJig3l5.js');
 var keys_constant = require('./keys.constant-BYIApas2.js');
-var field_util = require('./field.util-L-DkeMVk.js');
 var input_interfaces = require('./input.interfaces-YapUUaRx.js');
-var oneOf = require('./one-of-BZGRIMtQ.js');
-var type = require('./type-hmc4CJcO.js');
-var config_decorator = require('./config.decorator-ThGLtT-3.js');
-require('./create-validator-decorator-BIgFqrMJ.js');
+var oneOf = require('./one-of-xdIxH9e7.js');
+var type = require('./type-BcP2cAG-.js');
+var config_decorator = require('./config.decorator-bU7c6ybP.js');
+require('./isObjectLike-BNz6hnAu.js');
+require('./create-validator-decorator-CiRieHJL.js');
 require('./aria-C3Tx6AHY.js');
 require('./label.i18n-C00ZY0P9.js');
 
@@ -62,7 +64,7 @@ function requireIsEmpty () {
 	var baseKeys = _getTag.require_baseKeys(),
 	    getTag = _getTag.require_getTag(),
 	    isArguments = _getTag.requireIsArguments(),
-	    isArray = isObjectLike.requireIsArray(),
+	    isArray$1 = isArray.requireIsArray(),
 	    isArrayLike = _getTag.requireIsArrayLike(),
 	    isBuffer = _getTag.requireIsBuffer(),
 	    isPrototype = _getTag.require_isPrototype(),
@@ -116,7 +118,7 @@ function requireIsEmpty () {
 	    return true;
 	  }
 	  if (isArrayLike(value) &&
-	      (isArray(value) || typeof value == 'string' || typeof value.splice == 'function' ||
+	      (isArray$1(value) || typeof value == 'string' || typeof value.splice == 'function' ||
 	        isBuffer(value) || isTypedArray(value) || isArguments(value))) {
 	    return !value.length;
 	  }
@@ -142,109 +144,12 @@ function requireIsEmpty () {
 var isEmptyExports = requireIsEmpty();
 var isEmpty = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(isEmptyExports);
 
-var isNumber_1;
-var hasRequiredIsNumber;
-
-function requireIsNumber () {
-	if (hasRequiredIsNumber) return isNumber_1;
-	hasRequiredIsNumber = 1;
-	var baseGetTag = isObjectLike.require_baseGetTag(),
-	    isObjectLike$1 = 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$1(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__*/_commonjsHelpers.getDefaultExportFromCjs(_isNaNExports);
-
 function checkIfValueIsStringAndDoesNotHaveGermanFormat(val) {
     return typeof val === 'string' && getThousandSeparator() !== '.';
 }
 function isNumber(value) {
     const num = parseFloat(value);
-    return typeof num === 'number' && !isNaN(num);
+    return typeof num === 'number' && !isNaN.isNaN(num);
 }
 function isNotNumber(value) {
     return !isNumber(value) && value !== '' && value !== getNegativeSymbol() && value !== getDecimalSeparator();
@@ -254,7 +159,7 @@ function toNumber(value, decimalPoints = 0) {
     if (val === '' ||
         val === undefined ||
         val === null ||
-        isNaN(val) ||
+        isNaN.isNaN(val) ||
         val === getNegativeSymbol() ||
         val === getDecimalSeparator() ||
         !isNumber(val)) {
@@ -280,7 +185,7 @@ function toFixedNumber(value, decimalPoints = 0) {
         val = `0${val}`;
     }
     const num = decimalPoints === 0 ? parseInt(val, 10) : parseFloat(val.replace(getDecimalSeparator(), '.'));
-    return isNaN(num) ? '' : num.toFixed(decimalPoints);
+    return isNaN.isNaN(num) ? '' : num.toFixed(decimalPoints);
 }
 function mapDecimalSeparator(value) {
     return value.replace('.', getDecimalSeparator());
@@ -294,7 +199,7 @@ function toUserFormattedNumber(value, decimalPoints = 0, suffix = '') {
     }
     const num = decimalPoints === 0 ? parseInt(value, 10) : parseFloat(value);
     const formattedSuffix = suffix !== '' ? ` ${suffix.trim()}` : '';
-    return isNaN(num) ? '' : formatLocaleNumber(num, decimalPoints) + formattedSuffix;
+    return isNaN.isNaN(num) ? '' : formatLocaleNumber(num, decimalPoints) + formattedSuffix;
 }
 const countDecimalSeparators = (value) => (value.split(getDecimalSeparator()) || []).length - 1 || 0;
 function validateKeyDown({ key, ctrlKey, metaKey, selectionStart, selectionEnd, newValue, decimal, onlyPositive, }) {
@@ -365,6 +270,7 @@ const NumberInput = class {
         this.control = new formControl.FormControl(this);
         this.lastValue = '';
         this.focused = false;
+        this.hasInvalidTextSlotContent = false;
         this.language = index.defaultConfig.language;
         this.region = index.defaultConfig.region;
         this.nativeInputValue = '';
@@ -515,7 +421,7 @@ const NumberInput = class {
         this.dsChange = index.debounceEvent(this.dsChange, this.debounce);
     }
     valueChanged(newValue) {
-        const isValueNotDefined = newValue === null || isNaN(newValue);
+        const isValueNotDefined = newValue === null || isNaN.isNaN(newValue);
         const emptyValue = this.exactNumber ? '0' : '';
         const rawStr = isValueNotDefined ? emptyValue : newValue.toFixed(this.decimal);
         this.lastValue = rawStr;
@@ -533,6 +439,13 @@ const NumberInput = class {
     connectedCallback() {
         this.debounceChanged();
         this.control.connectedCallback();
+        this.disconnectInvalidTextSlotWatcher = field_util.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 = attributes.inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
@@ -628,7 +541,8 @@ const NumberInput = class {
      * ------------------------------------------------------
      */
     render() {
-        return (index.h(field_util.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 }, index.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 (index.h(field_util.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 }, index.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 index.getElement(this); }

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

@@ -3,19 +3,19 @@
  */
 'use strict';
 
-var index = require('./index-sC3JnTlJ.js');
-var tslib_es6 = require('./tslib.es6-CxyosZMg.js');
-var hasValue = require('./has-value-DK0oRqXI.js');
+var index = require('./index-DD7qcaNz.js');
+var tslib_es6 = require('./tslib.es6-DMgN1vwG.js');
+var hasValue = require('./has-value-3s9rhB3K.js');
 var pagination_i18n = require('./pagination.i18n-D2ElLaZ_.js');
-var breakpoints_subject = require('./breakpoints.subject-XNcGwhzh.js');
-var oneOf = require('./one-of-BZGRIMtQ.js');
-var type = require('./type-hmc4CJcO.js');
-var breakpoints_decorator = require('./breakpoints.decorator-C-Qm21UK.js');
-var config_decorator = require('./config.decorator-ThGLtT-3.js');
-require('./create-validator-decorator-BIgFqrMJ.js');
-require('./listener-BwB_xent.js');
-require('./device-BnjBOLnP.js');
-require('./config.utils-MhZvq4Qm.js');
+var breakpoints_subject = require('./breakpoints.subject-CNyiZaBe.js');
+var oneOf = require('./one-of-xdIxH9e7.js');
+var type = require('./type-BcP2cAG-.js');
+var breakpoints_decorator = require('./breakpoints.decorator-DbttiLa9.js');
+var config_decorator = require('./config.decorator-bU7c6ybP.js');
+require('./create-validator-decorator-CiRieHJL.js');
+require('./listener-CAzIWSXQ.js');
+require('./device-DM1GXL99.js');
+require('./config.utils-BhJig3l5.js');
 
 function generatePaginationControl(value, totalPages, pageRange) {
     const paginationArray = [];
@@ -261,28 +261,28 @@ const Pagination = class {
         const leftControlTitle = this.textPrevious || pagination_i18n.i18nControlLabel[this.language].left;
         const rightControlTitle = this.textNext || pagination_i18n.i18nControlLabel[this.language].right;
         const hasBasicNavigationButtons = !hasValue.hasValue(this.variant) || (isVariantDots && this.totalPages <= 5);
-        const DotsWithText = () => (index.h("span", { key: 'ad305888a9a44b97ab2c5c17ecb746bedfc29ea0', class: "dots" }, index.h("strong", { key: '54248aa0c8f37ccd2015218a3d89730d947daa75' }, this.value), index.h("span", { key: 'c072e770c971fdd6265ecdb1f2c12e371d01b7fc' }, "/"), index.h("span", { key: 'fe2868321d3b21582e808846e98127166145a2aa' }, this.totalPages)));
-        return (index.h(index.Host, { key: 'ee53970824a2ed4ebb1fc4785d16ea161c7e405a', class: {
+        const DotsWithText = () => (index.h("span", { key: 'e5df59a6b0f2955c7ffe0a1b8ae05828d089a03a', class: "dots" }, index.h("strong", { key: '8aec14c8f62c54ad23696b7baa6c5214ccc3d625' }, this.value), index.h("span", { key: 'a3ed5e5e68ea3706cc490f7a859a4d6ecbb38ff5' }, "/"), index.h("span", { key: 'a621e7f072a7214b7fef82b1672742df94d45ba9' }, this.totalPages)));
+        return (index.h(index.Host, { key: 'e4fde2b2b21cdd1dd28df93f2e7a137c284760ef', class: {
                 'is-sticky': this.sticky,
                 'is-disabled': this.disabled,
                 [`is-variant-${this.variant}`]: hasValue.hasValue(this.variant),
                 [`is-size-${this.size}`]: hasValue.hasValue(this.size),
                 [`is-align-${this.align}`]: hasValue.hasValue(this.align),
-            } }, index.h("nav", { key: 'd327a7c0c1c0b1a24cbf599aaa5734815886be0e', class: {}, id: "nav", part: "navigation", role: "navigation", "aria-label": labelControlTitle }, !this.disabled && (index.h("button", { key: '71611638672eeb763968c788b70d0d56a0ddd124', id: "previous", part: "previous", "aria-label": leftControlTitle, title: leftControlTitle, class: {
+            } }, index.h("nav", { key: '15343917a6da89b56809ba627398044f25a8a055', class: {}, id: "nav", part: "navigation", role: "navigation", "aria-label": labelControlTitle }, !this.disabled && (index.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() }, index.h("ds-icon", { key: 'e839a0b2bf96bad5c7e63d3b4c46df1acaab5e73', name: "nav-go-left", size: "sm", disabled: this.value < 2 }))), !this.disabled && (index.h("button", { key: 'c4e9ecb77143d63456f9d0b9989b6268b04c363e', id: "next", part: "next", "aria-label": rightControlTitle, title: rightControlTitle, class: {
+            }, disabled: this.value < 2, onClick: () => this.previous() }, index.h("ds-icon", { key: '297a1a9a9cd53f79a41fcac21d5a1e2abe4621c8', name: "nav-go-left", size: "sm", disabled: this.value < 2 }))), !this.disabled && (index.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() }, index.h("ds-icon", { key: '6e3e65dcc2337fe6bc1adf434871eb204e1806d4', name: "nav-go-right", size: "sm", disabled: this.value === this.totalPages }))), hasBasicNavigationButtons ? (index.h("ul", { class: { dots: hasValue.hasValue(this.variant) }, part: "list" }, items)) : (index.h(DotsWithText, null)))));
+            }, disabled: this.value === this.totalPages, onClick: () => this.next() }, index.h("ds-icon", { key: '6764ae6b035917963f07f20ae172e23894c1bd32', name: "nav-go-right", size: "sm", disabled: this.value === this.totalPages }))), hasBasicNavigationButtons ? (index.h("ul", { class: { dots: hasValue.hasValue(this.variant) }, part: "list" }, items)) : (index.h(DotsWithText, null)))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -3,18 +3,18 @@
  */
 'use strict';
 
-var index = require('./index-sC3JnTlJ.js');
-var tslib_es6 = require('./tslib.es6-CxyosZMg.js');
-var hasValue = require('./has-value-DK0oRqXI.js');
-var breakpoints_subject = require('./breakpoints.subject-XNcGwhzh.js');
-var listener = require('./listener-BwB_xent.js');
-var oneOf = require('./one-of-BZGRIMtQ.js');
-var type = require('./type-hmc4CJcO.js');
-var breakpoints_decorator = require('./breakpoints.decorator-C-Qm21UK.js');
-var config_decorator = require('./config.decorator-ThGLtT-3.js');
-require('./create-validator-decorator-BIgFqrMJ.js');
-require('./device-BnjBOLnP.js');
-require('./config.utils-MhZvq4Qm.js');
+var index = require('./index-DD7qcaNz.js');
+var tslib_es6 = require('./tslib.es6-DMgN1vwG.js');
+var hasValue = require('./has-value-3s9rhB3K.js');
+var breakpoints_subject = require('./breakpoints.subject-CNyiZaBe.js');
+var listener = require('./listener-CAzIWSXQ.js');
+var oneOf = require('./one-of-xdIxH9e7.js');
+var type = require('./type-BcP2cAG-.js');
+var breakpoints_decorator = require('./breakpoints.decorator-DbttiLa9.js');
+var config_decorator = require('./config.decorator-bU7c6ybP.js');
+require('./create-validator-decorator-CiRieHJL.js');
+require('./device-DM1GXL99.js');
+require('./config.utils-BhJig3l5.js');
 
 class WindowResizeSubject extends listener.SingleSubject {
     constructor() {
@@ -169,7 +169,7 @@ const ProgressBar = class {
      * ------------------------------------------------------
      */
     render() {
-        return (index.h(index.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 (index.h(index.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.hasValue(this.background) && this.background === 'light',
                 'is-dark': !hasValue.hasValue(this.background) || this.background === 'dark',
                 'is-primary': !hasValue.hasValue(this.color) || this.color === 'primary',
@@ -177,7 +177,7 @@ const ProgressBar = class {
                 'is-yellow': hasValue.hasValue(this.color) && this.color === 'yellow',
                 'is-red': hasValue.hasValue(this.color) && this.color === 'red',
                 'is-green': hasValue.hasValue(this.color) && this.color === 'green',
-            } }, index.h("div", { key: '7bfac5f71dd4ff19597606a588477658d0cff944', id: "line", part: "line", class: {
+            } }, index.h("div", { key: '512721ca39c4c559b40bdd0a4d7d51da7d5ef6f2', id: "line", part: "line", class: {
                 'is-animated': this.animated,
             }, ref: lineEl => (this.lineEl = lineEl) })));
     }

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

@@ -3,19 +3,19 @@
  */
 'use strict';
 
-var index = require('./index-sC3JnTlJ.js');
-var tslib_es6 = require('./tslib.es6-CxyosZMg.js');
-var formControl = require('./form-control-CtMcJUuC.js');
-var field_util = require('./field.util-L-DkeMVk.js');
+var index = require('./index-DD7qcaNz.js');
+var tslib_es6 = require('./tslib.es6-DMgN1vwG.js');
+var formControl = require('./form-control-CmRONWa7.js');
+var field_util = require('./field.util-C7hgA41e.js');
 var input_interfaces = require('./input.interfaces-YapUUaRx.js');
 var radio_interfaces = require('./radio.interfaces-BdYDfzHd.js');
-var type = require('./type-hmc4CJcO.js');
-var oneOf = require('./one-of-BZGRIMtQ.js');
-var config_decorator = require('./config.decorator-ThGLtT-3.js');
+var type = require('./type-BcP2cAG-.js');
+var oneOf = require('./one-of-xdIxH9e7.js');
+var config_decorator = require('./config.decorator-bU7c6ybP.js');
 require('./aria-C3Tx6AHY.js');
 require('./label.i18n-C00ZY0P9.js');
-require('./create-validator-decorator-BIgFqrMJ.js');
-require('./config.utils-MhZvq4Qm.js');
+require('./create-validator-decorator-CiRieHJL.js');
+require('./config.utils-BhJig3l5.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}`;
 
@@ -34,6 +34,7 @@ const RadioGroup = class {
         }
         this.language = index.defaultConfig.language;
         this.region = index.defaultConfig.region;
+        this.hasInvalidTextSlotContent = false;
         this.inputId = `ds-rg-${radioGroupIds++}`;
         /**
          * PUBLIC PROPERTY API
@@ -103,6 +104,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.
          */
@@ -119,6 +124,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) {
@@ -153,14 +162,24 @@ const RadioGroup = class {
     connectedCallback() {
         this.initialValue = this.value;
         this.internals.setFormValue(this.value);
+        this.disconnectInvalidTextSlotWatcher = field_util.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
      * ------------------------------------------------------
@@ -248,19 +267,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;
@@ -297,10 +317,10 @@ const RadioGroup = class {
      * ------------------------------------------------------
      */
     render() {
-        return (index.h(field_util.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 (index.h(field_util.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 }, index.h("slot", { key: '6c090a936fab5b14946544e52cf30890f719c2ff' })));
+            }, onClick: this.handleClick }, index.h("slot", { key: '468b13eff479f2654ce14a5b513e10f513fbf0ee', onSlotchange: this.handleSlotChange })));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }
@@ -380,6 +400,10 @@ tslib_es6.__decorate([
     type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], RadioGroup.prototype, "tile", void 0);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], RadioGroup.prototype, "hideTrigger", void 0);
 tslib_es6.__decorate([
     oneOf.OneOf(radio_interfaces.RADIO_TILE_COLORS),
     tslib_es6.__metadata("design:type", String)

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

@@ -3,19 +3,19 @@
  */
 'use strict';
 
-var index = require('./index-sC3JnTlJ.js');
-var tslib_es6 = require('./tslib.es6-CxyosZMg.js');
+var index = require('./index-DD7qcaNz.js');
+var tslib_es6 = require('./tslib.es6-DMgN1vwG.js');
 var attributes = require('./attributes-D57TMQsY.js');
-var formControl = require('./form-control-CtMcJUuC.js');
-var hasValue = require('./has-value-DK0oRqXI.js');
+var formControl = require('./form-control-CmRONWa7.js');
+var hasValue = require('./has-value-3s9rhB3K.js');
 var keyboard = require('./keyboard-C7y0jXYb.js');
 var app_focus_util = require('./app.focus.util-DOa3ViTR.js');
 var radio_interfaces = require('./radio.interfaces-BdYDfzHd.js');
-var type = require('./type-hmc4CJcO.js');
-var oneOf = require('./one-of-BZGRIMtQ.js');
-require('./create-validator-decorator-BIgFqrMJ.js');
+var type = require('./type-BcP2cAG-.js');
+var oneOf = require('./one-of-xdIxH9e7.js');
+require('./create-validator-decorator-CiRieHJL.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) {
@@ -92,6 +92,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.
          */
@@ -247,18 +251,19 @@ const Radio = class {
         if (this.buttonTabindex !== undefined) {
             inputAttributes['tabIndex'] = this.buttonTabindex;
         }
-        return (index.h(index.Host, { key: '9b383a941268929daf06b1b489a999eea2155609', "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}`, "aria-invalid": this.invalid ? 'true' : null, class: {
+        return (index.h(index.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.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 }, index.h("label", { key: '7d482ce4dc292979056c742e570fb5c896dbf03a', id: "label", part: "label" }, index.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)), index.h("div", { key: '3fb5e32fe8b94aee3e88723e85a735e42b3d4238', id: "slot", part: "slot" }, index.h("slot", { key: '9dbee7d427ddda925a7e0846cbb6d01eb7a4f9ed' })))));
+            }, onClick: this.handleClick }, index.h("label", { key: 'd2663ed469a577718444a0d9292733ee7a8623e3', id: "label", part: "label" }, index.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)), index.h("div", { key: '80fd2934e4cd19a31e039ed4085f8aaea2bc28d5', id: "slot", part: "slot" }, index.h("slot", { key: '688909562bc975627fd39ed70d6f74249815f95c' })))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }
@@ -321,6 +326,10 @@ tslib_es6.__decorate([
     type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], Radio.prototype, "tile", void 0);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], Radio.prototype, "hideTrigger", void 0);
 tslib_es6.__decorate([
     oneOf.OneOf(radio_interfaces.RADIO_TILE_COLORS),
     tslib_es6.__metadata("design:type", String)