@ds-autonomie/web-components 2.5.0 → 2.6.0

package/dist/chunks/{chunk.OMUELARQ.js → chunk.RBFGDR3F.js}

@@ -1,36 +1,30 @@
 import {
   DSASelect
-} from "./chunk.QGPBBIGJ.js";
+} from "./chunk.Z3INQBDQ.js";
+import {
+  frenchNumberPrefix,
+  phonePrefixOptions
+} from "./chunk.RJXLIOW7.js";
 import {
   getPhoneConfig
 } from "./chunk.YKKP7YAT.js";
 import {
   input_phone_styles_default
 } from "./chunk.46A3MGDV.js";
-import {
-  frenchNumberPrefix,
-  phonePrefixOptions
-} from "./chunk.RJXLIOW7.js";
 import {
   maskedValueToRawValue,
   rawValueToMaskedValue,
   stripSpecialChars
 } from "./chunk.7OLEA3GQ.js";
 import {
-  FormControlLayout
-} from "./chunk.MKTUAWNS.js";
+  InputBase
+} from "./chunk.QFO2VDJ3.js";
 import {
-  defaultValue
-} from "./chunk.CMJ2SRTL.js";
-import {
-  FormControlController
-} from "./chunk.JA7YFGLI.js";
+  ifDefinedAndNotEmpty
+} from "./chunk.ZQJVCRB2.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";
-import {
-  ifDefinedAndNotEmpty
-} from "./chunk.ZQJVCRB2.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -42,14 +36,10 @@ import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { live } from "lit/directives/live.js";
 import { LocalizeController } from "@shoelace-style/localize";
-var DSAInputPhone = class extends FormControlLayout {
+var DSAInputPhone = class extends InputBase {
   constructor() {
     super(...arguments);
-    this.formControlController = new FormControlController(this, {
-      assumeInteractionOn: ["dsa-blur", "dsa-input"]
-    });
     this.localize = new LocalizeController(this);
-    this.hasFocus = false;
     this.maskedNumber = "";
     this.phoneConfig = getPhoneConfig("+33");
     this.placeholder = this.phoneConfig.placeholder;
@@ -57,8 +47,6 @@ var DSAInputPhone = class extends FormControlLayout {
     this.value = "";
     this.phonePrefix = "+33";
     this.phoneNumber = "";
-    this.defaultValue = "";
-    this.clearable = false;
     this.inputPrefix = "";
     this.placement = "bottom-start";
   }
@@ -70,27 +58,20 @@ var DSAInputPhone = class extends FormControlLayout {
       patternMatch = matches !== null;
     }
     const validityState = {
-      badInput: this.inputEl.validity.badInput,
-      customError: this.inputEl.validity.customError,
+      badInput: this.input.validity.badInput,
+      customError: this.input.validity.customError,
       patternMismatch: !patternMatch,
-      rangeOverflow: this.inputEl.validity.rangeOverflow,
-      rangeUnderflow: this.inputEl.validity.rangeUnderflow,
-      stepMismatch: this.inputEl.validity.stepMismatch,
-      tooLong: this.inputEl.validity.tooLong,
-      tooShort: this.inputEl.validity.tooShort,
-      typeMismatch: this.inputEl.validity.typeMismatch,
-      valid: patternMatch !== void 0 ? patternMatch : this.inputEl.validity.valid,
-      valueMissing: this.inputEl.validity.valueMissing
+      rangeOverflow: this.input.validity.rangeOverflow,
+      rangeUnderflow: this.input.validity.rangeUnderflow,
+      stepMismatch: this.input.validity.stepMismatch,
+      tooLong: this.input.validity.tooLong,
+      tooShort: this.input.validity.tooShort,
+      typeMismatch: this.input.validity.typeMismatch,
+      valid: patternMatch !== void 0 ? patternMatch : this.input.validity.valid,
+      valueMissing: this.input.validity.valueMissing
     };
     return validityState;
   }
-  /** Gets the validation message */
-  get validationMessage() {
-    return this.inputEl.validationMessage;
-  }
-  firstUpdated() {
-    this.formControlController.updateValidity();
-  }
   connectedCallback() {
     super.connectedCallback();
     this.defaultValue = this.value;
@@ -101,7 +82,7 @@ var DSAInputPhone = class extends FormControlLayout {
     );
   }
   handleDocumentKeyUp() {
-    const strippedValue = stripSpecialChars(this.inputEl.value);
+    const strippedValue = stripSpecialChars(this.input.value);
     const newValue = maskedValueToRawValue(
       strippedValue,
       this.phoneConfig.mask
@@ -109,7 +90,7 @@ var DSAInputPhone = class extends FormControlLayout {
     const maskedValue = rawValueToMaskedValue(newValue, this.placeholder);
     this.phoneNumber = newValue;
     this.maskedNumber = maskedValue;
-    this.inputEl.value = maskedValue;
+    this.input.value = maskedValue;
     this.updateValue();
     this.formControlController.updateValidity();
     this.emit("dsa-input");
@@ -162,28 +143,6 @@ var DSAInputPhone = class extends FormControlLayout {
       this.emit("dsa-change");
     }
   }
-  handleKeyDown(event) {
-    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
-    if (event.key === "Enter" && !hasModifier) {
-      setTimeout(() => {
-        if (!event.defaultPrevented && !event.isComposing) {
-          this.formControlController.submit();
-        }
-      });
-    }
-  }
-  handleFocus() {
-    this.hasFocus = true;
-    this.emit("dsa-focus");
-  }
-  handleBlur() {
-    this.hasFocus = false;
-    this.emit("dsa-blur");
-  }
-  handleInvalid(event) {
-    this.formControlController.setValidity(false);
-    this.formControlController.emitInvalidEvent(event);
-  }
   // Clear Icon handlers
   handleClearIconClick(event) {
     this.phonePrefix = "+33";
@@ -191,7 +150,7 @@ var DSAInputPhone = class extends FormControlLayout {
     this.emit("dsa-clear");
     this.emit("dsa-input");
     this.emit("dsa-change");
-    this.inputEl.focus();
+    this.input.focus();
     event.stopPropagation();
   }
   getDescriptionIds() {
@@ -225,37 +184,10 @@ var DSAInputPhone = class extends FormControlLayout {
   handlePhoneChange() {
     this.updateValue();
   }
-  /** Sets focus on the input. */
-  focus(options) {
-    this.inputEl.focus(options);
-  }
-  /** Removes focus from the input. */
-  blur() {
-    this.inputEl.blur();
-  }
-  /** Selects all the text in the input. */
-  select() {
-    this.inputEl.select();
-  }
-  /** Sets the start and end positions of the text selection (0-based). */
-  setSelectionRange(selectionStart, selectionEnd, selectionDirection = "none") {
-    this.inputEl.setSelectionRange(
-      selectionStart,
-      selectionEnd,
-      selectionDirection
-    );
-  }
-  /** Replaces a range of text with a new string. */
-  setRangeText(replacement, start, end, selectMode) {
-    this.inputEl.setRangeText(replacement, start, end, selectMode);
-    if (this.phoneNumber !== this.inputEl.value) {
-      this.phoneNumber = this.inputEl.value;
-    }
-  }
   /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
   checkValidity() {
     var _a;
-    const isValidInput = (_a = this.inputEl) == null ? void 0 : _a.checkValidity();
+    const isValidInput = (_a = this.input) == null ? void 0 : _a.checkValidity();
     if (this.phoneNumber.length === 0) {
       return isValidInput != null ? isValidInput : false;
     }
@@ -263,14 +195,10 @@ var DSAInputPhone = class extends FormControlLayout {
     const patternMatch = matches !== null;
     return patternMatch;
   }
-  /** Gets the associated form, if one exists. */
-  getForm() {
-    return this.formControlController.getForm();
-  }
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
   reportValidity() {
     var _a;
-    const isValidInput = (_a = this.inputEl) == null ? void 0 : _a.reportValidity();
+    const isValidInput = (_a = this.input) == null ? void 0 : _a.reportValidity();
     if (this.phoneNumber.length === 0) {
       return isValidInput != null ? isValidInput : false;
     }
@@ -278,11 +206,6 @@ var DSAInputPhone = class extends FormControlLayout {
     const patternMatch = matches !== null;
     return patternMatch;
   }
-  /** Sets a custom validation message. Pass an empty string to restore validity. */
-  setCustomValidity(message) {
-    this.inputEl.setCustomValidity(message);
-    this.formControlController.updateValidity();
-  }
   renderInput() {
     var _a;
     const hasLabelSlot = this.hasSlotController.test("label");
@@ -411,13 +334,10 @@ var DSAInputPhone = class extends FormControlLayout {
 DSAInputPhone.styles = input_phone_styles_default;
 __decorateClass([
   query(".input-phone__control")
-], DSAInputPhone.prototype, "inputEl", 2);
+], DSAInputPhone.prototype, "input", 2);
 __decorateClass([
   query(".input-phone__select")
 ], DSAInputPhone.prototype, "phonePrefixEl", 2);
-__decorateClass([
-  state()
-], DSAInputPhone.prototype, "hasFocus", 2);
 __decorateClass([
   state()
 ], DSAInputPhone.prototype, "maskedNumber", 2);
@@ -439,21 +359,9 @@ __decorateClass([
 __decorateClass([
   property({ attribute: false })
 ], DSAInputPhone.prototype, "phoneNumber", 2);
-__decorateClass([
-  defaultValue()
-], DSAInputPhone.prototype, "defaultValue", 2);
-__decorateClass([
-  property({ type: Boolean })
-], DSAInputPhone.prototype, "clearable", 2);
 __decorateClass([
   property({ attribute: "input-prefix" })
 ], DSAInputPhone.prototype, "inputPrefix", 2);
-__decorateClass([
-  property({ type: Boolean })
-], DSAInputPhone.prototype, "autofocus", 2);
-__decorateClass([
-  property()
-], DSAInputPhone.prototype, "enterkeyhint", 2);
 __decorateClass([
   property({ reflect: true })
 ], DSAInputPhone.prototype, "placement", 2);

package/dist/chunks/{chunk.3RMSYRZA.js → chunk.RRF5FP5T.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.QADAWCTI.js";
+} from "./chunk.SK3KWU2I.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";

package/dist/chunks/{chunk.YXCCM5NC.js → chunk.RSGMJZGX.js}

@@ -21,18 +21,29 @@ var accordion_styles_default = css`
   }
 
   .accordion--disabled {
-    opacity: 0.5;
+    color: var(--dsa-wc-accordion-disabled-color);
+    border-color: var(--dsa-color-accordion-disabled-border);
   }
 
+  .accordion--filled {
+    background-color: var(--dsa-wc-accordion-filled-background-color);
+    border-color: transparent;
+  }
+
+  .accordion--disabled.accordion--filled {
+    color: var(--dsa-wc-accordion-filled-disabled-color);
+    background-color: var(--dsa-wc-accordion-filled-disabled-background-color);
+  }
+
+  /* Header */
   .accordion__header {
-    border-radius: inherit;
     position: relative;
     display: flex;
     align-items: center;
+    border-radius: var(--dsa-wc-accordion-header-border-radius);
   }
 
   .accordion__header-button {
-    border-radius: inherit;
     margin-right: auto;
     padding: var(--dsa-wc-accordion-padding);
     user-select: none;
@@ -45,23 +56,34 @@ var accordion_styles_default = css`
     inset: 0;
   }
 
-  .accordion:not(.accordion--disabled):has(.accordion__header-button:hover) {
+  .accordion--disabled .accordion__header-button {
+    cursor: not-allowed;
+  }
+
+  /* Hover and focus states */
+  .accordion:not(.accordion--disabled, .accordion--filled):has(
+      .accordion__header-button:hover
+    ) {
     border-color: var(--dsa-wc-accordion-hover-border-color);
   }
 
+  .accordion:not(.accordion--open):not(.accordion--disabled)
+    .accordion__header:has(.accordion__header-button:hover),
+  .accordion:not(.accordion--open)
+    .accordion__header:has(.accordion__header-button:focus-visible) {
+    border-radius: var(--dsa-wc-accordion-closed-header-hover-border-radius);
+  }
+
   .accordion:not(.accordion--disabled)
-    .accordion__header:has(.accordion__header-button:hover) {
+    .accordion__header:has(.accordion__header-button:hover),
+  .accordion__header:has(.accordion__header-button:focus-visible) {
+    border-radius: var(--dsa-wc-accordion-header-hover-border-radius);
     background-color: var(--dsa-wc-accordion-header-hover-background-color);
   }
 
   .accordion__header:has(.accordion__header-button:focus-visible) {
     outline: var(--dsa-wc-focus-ring);
     outline-offset: var(--dsa-wc-focus-ring-offset);
-    background-color: var(--dsa-wc-accordion-header-hover-background-color);
-  }
-
-  .accordion--disabled .accordion__header-button {
-    cursor: not-allowed;
   }
 
   .accordion__header-button:focus-visible {
@@ -69,6 +91,7 @@ var accordion_styles_default = css`
     box-shadow: none;
   }
 
+  /* Summary */
   .accordion__summary-container {
     display: contents;
   }
@@ -77,32 +100,56 @@ var accordion_styles_default = css`
     flex: 1 1 auto;
     display: flex;
     align-items: center;
+    font: var(--dsa-wc-accordion-summary-font);
+    padding: var(--dsa-wc-accordion-summary-padding);
+  }
+
+  .accordion--small .accordion__summary {
+    font: var(--dsa-wc-accordion-small-summary-font);
+    padding: 0;
+  }
+
+  .accordion__actions {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--dsa-spacing-12);
+    z-index: 10;
   }
 
+  /* Summary icon */
   .accordion__summary-icon {
     flex: 0 0 auto;
-
     display: flex;
     align-items: center;
     color: var(--dsa-wc-accordion-icon-color);
     transition: var(--dsa-wc-transition-medium) rotate ease;
     font-size: var(--dsa-wc-accordion-icon-size);
     padding: var(--dsa-wc-accordion-padding);
+    color: inherit;
   }
 
-  .accordion--open.accordion--chevron .accordion__summary-icon {
+  .accordion--small .accordion__summary-icon {
+    font-size: var(--dsa-wc-accordion-small-icon-size);
+  }
+
+  .accordion--disabled .accordion__summary-icon {
+    color: var(--dsa-wc-accordion-disabled-icon-color);
+  }
+
+  .accordion--chevron .accordion__summary-icon {
     rotate: 90deg;
   }
 
-  .accordion--open.accordion--rtl.accordion--chevron .accordion__summary-icon {
+  .accordion--rtl.accordion--chevron .accordion__summary-icon {
     rotate: -90deg;
   }
 
-  .accordion__actions {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--dsa-spacing-12);
-    z-index: 10;
+  .accordion--open.accordion--chevron .accordion__summary-icon {
+    rotate: -90deg;
+  }
+
+  .accordion--open.accordion--rtl.accordion--chevron .accordion__summary-icon {
+    rotate: 90deg;
   }
 
   .accordion--open .accordion__expand-icon,
@@ -110,8 +157,23 @@ var accordion_styles_default = css`
     display: none;
   }
 
+  /* Body */
+  .accordion:not(.accordion--disabled):has(.accordion__header-button:hover)
+    .accordion__body {
+    border-color: transparent;
+  }
+
   .accordion__body {
     overflow: hidden;
+    border-top: solid 1px var(--dsa-wc-accordion-border-color);
+  }
+
+  .accordion--disabled .accordion__body {
+    border-color: var(--dsa-color-accordion-disabled-border);
+  }
+
+  .accordion--filled .accordion__body {
+    border-color: transparent;
   }
 
   .accordion__content {

package/dist/chunks/{chunk.LRBVQHKX.js → chunk.S3JXNHCY.js}

@@ -36,7 +36,7 @@ var filter_base_styles_default = css`
       var(--dsa-wc-select-listbox-border-color);
     border-radius: var(--dsa-wc-select-listbox-border-radius);
     padding-inline: 0;
-    overflow: hidden;
+    overflow: auto;
     overscroll-behavior: none;
 
     /* Make sure it adheres to the popup's auto size */

package/dist/chunks/{chunk.ZRW5L2NC.js → chunk.SGKW2DOH.js}

@@ -22,8 +22,8 @@ var table_header_cell_styles_default = css`
     );
   }
 
-  :host(:hover:not([loading])),
-  :host(:focus-within) {
+  :host([sortable]:hover:not([loading])),
+  :host([sortable]:focus-within) {
     background: var(--dsa-wc-table-header-cell-background-hover);
   }
 
@@ -52,6 +52,7 @@ var table_header_cell_styles_default = css`
     gap: var(--dsa-spacing-8);
     min-block-size: 100%;
     width: 100%;
+    height: 100%;
   }
 
   [part~='sort-button']:active {

package/dist/chunks/{chunk.QADAWCTI.js → chunk.SK3KWU2I.js}

@@ -65,6 +65,8 @@ var translation = {
   showExpandedTableRow: "Afficher d\xE9tails",
   hideExpandedTableRow: "Masquer d\xE9tails",
   cnsaFooterLogoLabel: "Service public de l'autonomie",
+  openAll: "Tout ouvrir",
+  closeAll: "Tout fermer",
   numberSelected: (num, gender) => `${num} s\xE9lectionn\xE9${gender === "feminine" ? "e" : ""}${num > 1 ? "s" : ""}`,
   deselectAll: "Tout d\xE9s\xE9lectionner",
   selectAll: "Tout s\xE9lectionner",
@@ -229,6 +231,8 @@ var translation2 = {
   showExpandedTableRow: "Show details",
   hideExpandedTableRow: "Hide details",
   cnsaFooterLogoLabel: "Service public de l'autonomie",
+  openAll: "Open all",
+  closeAll: "Close all",
   numberSelected: (num) => `${num} selected`,
   deselectAll: "Deselect all",
   selectAll: "Select all",

package/dist/chunks/{chunk.SDT5BB26.js → chunk.SQKLY4C5.js}

@@ -24,13 +24,14 @@ var menu_item_styles_default = css`
     user-select: none;
     cursor: pointer;
   }
+
   .menu-item[aria-current] {
     color: var(--dsa-wc-menu-navigation-item-current-color);
     background-color: var(
       --dsa-wc-menu-navigation-item-current-background-color
     );
-    font-weight: 700 !important;
   }
+
   .menu-item--button {
     background: none;
     border: none;
@@ -44,14 +45,23 @@ var menu_item_styles_default = css`
     font: var(--dsa-wc-menu-item-small-font);
     padding: var(--dsa-wc-menu-item-small-padding);
   }
+  .menu-item.menu-item--small[aria-current] {
+    font: var(--dsa-wc-menu-item-small-font-current);
+  }
   .menu-item.menu-item--medium {
     font: var(--dsa-wc-menu-item-font);
     padding: var(--dsa-wc-menu-item-padding);
   }
+  .menu-item.menu-item--medium[aria-current] {
+    font: var(--dsa-wc-menu-item-font-current);
+  }
   .menu-item.menu-item--large {
     font: var(--dsa-wc-menu-item-large-font);
     padding: var(--dsa-wc-menu-item-large-padding);
   }
+  .menu-item.menu-item--large[aria-current] {
+    font: var(--dsa-wc-menu-item-large-font-current);
+  }
 
   .menu-item.menu-item--disabled {
     color: var(--dsa-wc-menu-item-disabled-color);

package/dist/chunks/{chunk.QLT366CP.js → chunk.SQN6J7NO.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.4LRLYTU2.js";
 import {
   LocalizeController
-} from "./chunk.QADAWCTI.js";
+} from "./chunk.SK3KWU2I.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/{chunk.3SMOVUNI.js → chunk.TFIXTW2V.js}

@@ -1,6 +1,6 @@
 import {
   filter_base_styles_default
-} from "./chunk.LRBVQHKX.js";
+} from "./chunk.S3JXNHCY.js";
 
 // src/components/filter-range/filter-range.styles.ts
 import { css } from "lit";

package/dist/chunks/{chunk.6KMLQCBG.js → chunk.TMEVQJFZ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.XSXVVUKP.js";
 import {
   LocalizeController
-} from "./chunk.QADAWCTI.js";
+} from "./chunk.SK3KWU2I.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";

package/dist/chunks/{chunk.4JZFGBJP.js → chunk.TSGEM2N5.js}

@@ -1,15 +1,18 @@
+import {
+  debounce
+} from "./chunk.I5IKEQES.js";
 import {
   filter_range_styles_default
-} from "./chunk.3SMOVUNI.js";
+} from "./chunk.TFIXTW2V.js";
 import {
   FilterBase
-} from "./chunk.4VHQEXSY.js";
-import {
-  watch
-} from "./chunk.NOMN6DGD.js";
+} from "./chunk.ZPKQZGFW.js";
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.ZQJVCRB2.js";
+import {
+  watch
+} from "./chunk.NOMN6DGD.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -18,22 +21,6 @@ import {
 import { html } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-
-// src/internal/debounce.ts
-var TIMER_ID_KEY = Symbol();
-function debounce(delay) {
-  return (_target, _propertyKey, descriptor) => {
-    const fn = descriptor.value;
-    descriptor.value = function valueFn(...args) {
-      clearTimeout(this[TIMER_ID_KEY]);
-      this[TIMER_ID_KEY] = window.setTimeout(() => {
-        fn.apply(this, args);
-      }, delay);
-    };
-  };
-}
-
-// src/components/filter-range/filter-range.ts
 var RANGE_SLIDER_DEBOUNCE_DELAY = 100;
 var DSAFilterRange = class extends FilterBase {
   constructor() {

package/dist/chunks/{chunk.AB7T3PSN.js → chunk.TZTE7NZH.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.HRIAHWFV.js";
 import {
   LocalizeController
-} from "./chunk.QADAWCTI.js";
+} from "./chunk.SK3KWU2I.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";

package/dist/chunks/{chunk.Q3II5ELV.js → chunk.UCONR7YO.js}

@@ -1,18 +1,18 @@
-import {
-  step_styles_default
-} from "./chunk.76RCUC6S.js";
 import {
   getStepIcon
 } from "./chunk.CCTWXABH.js";
+import {
+  step_styles_default
+} from "./chunk.76RCUC6S.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
-import {
-  LocalizeController
-} from "./chunk.QADAWCTI.js";
 import {
   a11yWarning
 } from "./chunk.PWL7QCVG.js";
+import {
+  LocalizeController
+} from "./chunk.SK3KWU2I.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";

package/dist/chunks/chunk.ULPMZDTP.js

@@ -0,0 +1,13 @@
+import {
+  input_base_styles_default
+} from "./chunk.DMIXIORN.js";
+
+// src/components/input-native/input-native.styles.ts
+import { css } from "lit";
+var input_native_styles_default = css`
+  ${input_base_styles_default}
+`;
+
+export {
+  input_native_styles_default
+};

package/dist/chunks/{chunk.2BZBH3CX.js → chunk.URDP5HQR.js}

@@ -17,12 +17,6 @@ var radio_icon_styles_default = css`
     display: contents;
   }
 
-  :host::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-  }
-
   .radio__control--small {
     --toggle-size: var(--dsa-wc-radio-size-small);
     --toggle-inner-size: var(--dsa-wc-radio-inner-size-small);