@ds-autonomie/web-components 2.16.0 → 2.17.0

package/dist/chunks/{chunk.HZPQGJ6B.js → chunk.ABJLUGLR.js}

@@ -1,6 +1,6 @@
 import {
   radio_group_styles_default
-} from "./chunk.6X467UIN.js";
+} from "./chunk.MFGYIAUT.js";
 import {
   wrapIndex
 } from "./chunk.HV63L5BF.js";
@@ -13,15 +13,15 @@ import {
 import {
   renderFormElementErrors
 } from "./chunk.6QDM5FUA.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
 import {
   FormControlController,
   customErrorValidityState,
   validValidityState,
   valueMissingValidityState
 } from "./chunk.DJLJEQST.js";
-import {
-  HasSlotController
-} from "./chunk.YIY5RM53.js";
 import {
   a11yWarning
 } from "./chunk.PWL7QCVG.js";
@@ -183,14 +183,7 @@ var DSARadioGroup = class extends ShoelaceElement {
     event.preventDefault();
   }
   handleLabelClick() {
-    const availableRadios = this.getAllRadios().filter(
-      (radio) => !radio.disabled
-    );
-    const checked = availableRadios.find((radio) => radio.checked);
-    const radioToFocus = checked || availableRadios[0];
-    if (radioToFocus) {
-      radioToFocus.focus();
-    }
+    this.focus();
   }
   handleSlotChange() {
     if (customElements.get("dsa-radio") || customElements.get("dsa-radio-button") || customElements.get("dsa-radio-card")) {
@@ -198,6 +191,11 @@ var DSARadioGroup = class extends ShoelaceElement {
       let hasAtLeastOneCheckedRadio = false;
       radios.forEach((radio) => {
         radio.error = this.error;
+        if (this.required) {
+          radio.setAttribute("aria-required", "true");
+        } else {
+          radio.removeAttribute("aria-required");
+        }
         if ((this.hasRadioButtons || this.hasRadioCards) && radio.readonly) {
           this.readonlyRadioButtonValue.set(radio.value, true);
         }
@@ -215,12 +213,20 @@ var DSARadioGroup = class extends ShoelaceElement {
   handleInvalid(event) {
     this.formControlController.setValidity(false);
     this.formControlController.emitInvalidEvent(event);
+    setTimeout(() => {
+      this.focus();
+    }, 0);
   }
   updateCheckedRadio() {
     const radios = this.getAllRadios();
     radios.forEach((radio) => {
       var _a;
       radio.checked = radio.value === this.value;
+      if (!this.value && this.required) {
+        radio.setAttribute("aria-invalid", "true");
+      } else {
+        radio.removeAttribute("aria-invalid");
+      }
       if (this.hasRadioButtons || this.hasRadioCards) {
         const radioButton = radio;
         radioButton.readonly = (_a = this.readonlyRadioButtonValue.get(this.value)) != null ? _a : radioButton.readonly;
@@ -301,7 +307,6 @@ var DSARadioGroup = class extends ShoelaceElement {
     this.validationInput.hidden = true;
     clearTimeout(this.validationTimeout);
     if (!isValid) {
-      this.error = true;
       this.validationInput.hidden = false;
       this.validationInput.reportValidity();
       this.validationTimeout = setTimeout(
@@ -317,6 +322,16 @@ var DSARadioGroup = class extends ShoelaceElement {
     this.validationInput.setCustomValidity(message);
     this.formControlController.updateValidity();
   }
+  /** Sets focus on the radio-group. */
+  focus(options) {
+    const radios = this.getAllRadios();
+    const checked = radios.find((radio) => radio.checked);
+    const firstEnabledRadio = radios.find((radio) => !radio.disabled);
+    const radioToFocus = checked || firstEnabledRadio;
+    if (radioToFocus) {
+      radioToFocus.focus(options);
+    }
+  }
   render() {
     const hasLabelSlot = this.hasSlotController.test("label");
     const hasHelpTextSlot = this.hasSlotController.test("help-text");

package/dist/chunks/{chunk.4Y4BDZCW.js → chunk.ACM36IFE.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.XATWRKAV.js";
+} from "./chunk.CKEB7DWU.js";
 import {
   component_styles_default
 } from "./chunk.TUVJKY7S.js";

package/dist/chunks/{chunk.UUZBFS35.js → chunk.AECIJYFZ.js}

@@ -1,12 +1,12 @@
 import {
   select_styles_default
-} from "./chunk.4Y4BDZCW.js";
+} from "./chunk.ACM36IFE.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";
 import {
   DSATag
-} from "./chunk.SIO6FXBK.js";
+} from "./chunk.A6WS4GML.js";
 import {
   FormControlLayout
 } from "./chunk.RVUUZ3KA.js";
@@ -35,7 +35,7 @@ import {
 } from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.TYAQGRNJ.js";
+} from "./chunk.WHHYA5VY.js";
 import {
   DSAIcon
 } from "./chunk.CKJJ4MSU.js";

package/dist/chunks/{chunk.QQTHVDGJ.js → chunk.AFSUKPIV.js}

@@ -1,9 +1,9 @@
 import {
   DSARadioGroup
-} from "./chunk.HZPQGJ6B.js";
+} from "./chunk.ABJLUGLR.js";
 import {
   FormToggleButton
-} from "./chunk.O67DEHIL.js";
+} from "./chunk.SLXERY4H.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";

package/dist/chunks/{chunk.NTHYV3TN.js → chunk.ANV74452.js}

@@ -9,16 +9,16 @@ import {
 } from "./chunk.VGW52PNG.js";
 import {
   DSAInput
-} from "./chunk.F57NYQVS.js";
+} from "./chunk.VBUVNNMA.js";
 import {
   FilterBase
-} from "./chunk.CNV2KEV4.js";
+} from "./chunk.X6SEIMM4.js";
 import {
   DSADivider
 } from "./chunk.QGI766JC.js";
 import {
   DSAButton
-} from "./chunk.PANCODOV.js";
+} from "./chunk.UNDVQ2N3.js";
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.ZQJVCRB2.js";

package/dist/chunks/{chunk.NHF2XMDG.js → chunk.APWZSSG6.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.TYAQGRNJ.js";
+} from "./chunk.WHHYA5VY.js";
 import {
   ShoelaceElement
 } from "./chunk.SVWU6JW4.js";

package/dist/chunks/{chunk.Q2XLWXN3.js → chunk.BO3GUSFS.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.WMFEJDPX.js";
 import {
   input_amount_styles_default
-} from "./chunk.YCAQ7W4B.js";
+} from "./chunk.6LLDVH7Y.js";
 import {
   DSAIconButton
 } from "./chunk.WNESPUKK.js";
@@ -18,7 +18,7 @@ import {
 } from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.TYAQGRNJ.js";
+} from "./chunk.WHHYA5VY.js";
 import {
   __decorateClass,
   __spreadProps,

package/dist/chunks/{chunk.RAUXZLKM.js → chunk.C6UENJ2Y.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.XSXVVUKP.js";
 import {
   LocalizeController
-} from "./chunk.TYAQGRNJ.js";
+} from "./chunk.WHHYA5VY.js";
 import {
   ShoelaceElement
 } from "./chunk.SVWU6JW4.js";

package/dist/chunks/{chunk.J7TEQIPK.js → chunk.CABJDFOO.js}

@@ -89,7 +89,7 @@ var search_styles_default = css`
   }
   .search-bar--small .search-bar__help-text,
   .search-bar--small .form-control__error-text {
-    font: var(--dsa-font-2x-small-normal);
+    font: var(--dsa-font-body-2-xs-normal);
   }
   /* Medium */
   .search-bar--medium .input {
@@ -100,7 +100,7 @@ var search_styles_default = css`
   }
   .search-bar--medium .search-bar__help-text,
   .search-bar--medium .form-control__error-text {
-    font: var(--dsa-font-x-small-normal);
+    font: var(--dsa-font-body-xs-normal);
   }
   /* Large */
   .search-bar--large .input {
@@ -111,7 +111,7 @@ var search_styles_default = css`
   }
   .search-bar--large .search-bar__help-text,
   .search-bar--large .form-control__error-text {
-    font: var(--dsa-font-small-normal);
+    font: var(--dsa-font-body-s-normal);
   }
 
   /* 

package/dist/chunks/{chunk.XATWRKAV.js → chunk.CKEB7DWU.js}

@@ -1,6 +1,10 @@
 // src/styles/form-control.styles.ts
 import { css } from "lit";
 var form_control_styles_default = css`
+  :host {
+    --input-field-width: 100%;
+  }
+
   .form-control {
     display: grid;
     align-content: start;

package/dist/chunks/{chunk.AUI3QHQQ.js → chunk.DC6KKJOX.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.TYAQGRNJ.js";
+} from "./chunk.WHHYA5VY.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";

package/dist/chunks/{chunk.2V4TQXY6.js → chunk.DMSUKPJE.js}

@@ -1,6 +1,6 @@
 import {
   input_mask_styles_default
-} from "./chunk.RE5LWX2D.js";
+} from "./chunk.SZDGGP2Y.js";
 import {
   maskedValueToRawValue,
   rawValueToMaskedValue,
@@ -17,7 +17,7 @@ import {
 } from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.TYAQGRNJ.js";
+} from "./chunk.WHHYA5VY.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";

package/dist/chunks/{chunk.SJFSACRO.js → chunk.DT6Y5ZUB.js}

@@ -1,6 +1,6 @@
 import {
   DSASelect
-} from "./chunk.UUZBFS35.js";
+} from "./chunk.AECIJYFZ.js";
 import {
   frenchNumberPrefix,
   phonePrefixOptions
@@ -10,7 +10,7 @@ import {
 } from "./chunk.YKKP7YAT.js";
 import {
   input_phone_styles_default
-} from "./chunk.T4Q6QP47.js";
+} from "./chunk.2DYEXJNV.js";
 import {
   maskedValueToRawValue,
   rawValueToMaskedValue,
@@ -21,7 +21,7 @@ import {
 } from "./chunk.WMFEJDPX.js";
 import {
   DSAOption
-} from "./chunk.55MXUVNS.js";
+} from "./chunk.H7L4YNKB.js";
 import {
   DSAIconButton
 } from "./chunk.WNESPUKK.js";

package/dist/chunks/{chunk.JDHNGWIH.js → chunk.EEO75M3R.js}

@@ -9,10 +9,6 @@ var profile_button_styles_default = css`
 
   :host {
     display: inline-block;
-    position: relative;
-    width: auto;
-    cursor: pointer;
-    max-width: 14rem;
   }
 
   .profile-button {
@@ -21,6 +17,7 @@ var profile_button_styles_default = css`
     justify-content: center;
     gap: var(--dsa-spacing-8);
     width: 100%;
+    max-width: 14rem;
     border: none;
     border-radius: var(--dsa-wc-profile-button-border-radius);
     user-select: none;
@@ -32,7 +29,7 @@ var profile_button_styles_default = css`
       var(--dsa-wc-transition-x-fast) color,
       var(--dsa-wc-transition-x-fast) border,
       var(--dsa-wc-transition-x-fast) box-shadow;
-    cursor: inherit;
+    cursor: pointer;
     background-color: var(--dsa-wc-profile-button-background);
     color: var(--dsa-wc-profile-button-color);
     font: var(--dsa-wc-profile-button-font);

package/dist/chunks/{chunk.JZCLQ75K.js → chunk.EGJGLON7.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.XATWRKAV.js";
+} from "./chunk.CKEB7DWU.js";
 import {
   component_styles_default
 } from "./chunk.TUVJKY7S.js";

package/dist/chunks/{chunk.CY7SF7KT.js → chunk.EMPEBDHH.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.XATWRKAV.js";
+} from "./chunk.CKEB7DWU.js";
 import {
   component_styles_default
 } from "./chunk.TUVJKY7S.js";

package/dist/chunks/{chunk.MFNBPWAR.js → chunk.EWMFHVNW.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.XATWRKAV.js";
+} from "./chunk.CKEB7DWU.js";
 import {
   component_styles_default
 } from "./chunk.TUVJKY7S.js";
@@ -13,6 +13,7 @@ var input_base_styles_default = css`
 
   :host {
     display: block;
+    --input-field-width: 100%;
   }
 
   .input {
@@ -21,7 +22,7 @@ var input_base_styles_default = css`
     flex-direction: row;
     align-items: center;
     vertical-align: middle;
-    width: 100%;
+    width: var(--input-field-width);
     font: var(--dsa-wc-input-text-field-font);
 
     transition:
@@ -316,6 +317,10 @@ var input_base_styles_default = css`
     fill: var(--dsa-wc-input-icon-color-hover);
   }
 
+  .input__action-button--hidden {
+    visibility: hidden;
+  }
+
   /*
   * Custom styling for Time type
   */

package/dist/chunks/{chunk.2UHD24QX.js → chunk.EXGB2DIR.js}

@@ -1,12 +1,12 @@
 import {
   DSATag
-} from "./chunk.SIO6FXBK.js";
+} from "./chunk.A6WS4GML.js";
 import {
   normalizeStr
 } from "./chunk.FLRB45SF.js";
 import {
   DSAOption
-} from "./chunk.55MXUVNS.js";
+} from "./chunk.H7L4YNKB.js";
 import {
   FormControlLayout
 } from "./chunk.RVUUZ3KA.js";
@@ -21,10 +21,10 @@ import {
 } from "./chunk.5NSAEDEE.js";
 import {
   combobox_styles_default
-} from "./chunk.BFTVJPB4.js";
+} from "./chunk.FB4KLQQL.js";
 import {
   DSASpinner
-} from "./chunk.RAUXZLKM.js";
+} from "./chunk.C6UENJ2Y.js";
 import {
   FormControlController
 } from "./chunk.DJLJEQST.js";
@@ -44,7 +44,7 @@ import {
 } from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.TYAQGRNJ.js";
+} from "./chunk.WHHYA5VY.js";
 import {
   DSAIcon
 } from "./chunk.CKJJ4MSU.js";

package/dist/chunks/{chunk.3BDFJNQD.js → chunk.EXHYWKQB.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.TYAQGRNJ.js";
+} from "./chunk.WHHYA5VY.js";
 import {
   DSAIcon
 } from "./chunk.CKJJ4MSU.js";

package/dist/chunks/{chunk.BFTVJPB4.js → chunk.FB4KLQQL.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.XATWRKAV.js";
+} from "./chunk.CKEB7DWU.js";
 import {
   component_styles_default
 } from "./chunk.TUVJKY7S.js";

package/dist/chunks/{chunk.VK44P4XQ.js → chunk.FQZVV2TO.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.PWL7QCVG.js";
 import {
   LocalizeController
-} from "./chunk.TYAQGRNJ.js";
+} from "./chunk.WHHYA5VY.js";
 import {
   DSAIcon
 } from "./chunk.CKJJ4MSU.js";

package/dist/chunks/{chunk.GSIIWPNB.js → chunk.H4WJ64X5.js}

@@ -1,6 +1,6 @@
 import {
   input_otp_styles_default
-} from "./chunk.CY7SF7KT.js";
+} from "./chunk.EMPEBDHH.js";
 import {
   InputBase
 } from "./chunk.WMFEJDPX.js";

package/dist/chunks/{chunk.55MXUVNS.js → chunk.H7L4YNKB.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.JIN6PGAK.js";
 import {
   LocalizeController
-} from "./chunk.TYAQGRNJ.js";
+} from "./chunk.WHHYA5VY.js";
 import {
   DSAIcon
 } from "./chunk.CKJJ4MSU.js";

package/dist/chunks/{chunk.CEW6LABS.js → chunk.HBYJN6RA.js}

@@ -1,9 +1,9 @@
 import {
   profile_button_styles_default
-} from "./chunk.JDHNGWIH.js";
+} from "./chunk.EEO75M3R.js";
 import {
   DSATooltip
-} from "./chunk.5C436DB4.js";
+} from "./chunk.TP5XEQ2O.js";
 import {
   DSAAvatar
 } from "./chunk.QKT5LLDM.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.TYAQGRNJ.js";
+} from "./chunk.WHHYA5VY.js";
 import {
   DSAIcon
 } from "./chunk.CKJJ4MSU.js";

package/dist/chunks/{chunk.PFNWEDHI.js → chunk.HFTU6LUQ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.TGEREFOF.js";
 import {
   LocalizeController
-} from "./chunk.TYAQGRNJ.js";
+} from "./chunk.WHHYA5VY.js";
 import {
   ShoelaceElement
 } from "./chunk.SVWU6JW4.js";

package/dist/chunks/{chunk.2GKYCE3E.js → chunk.HHVXZJUU.js}

@@ -1,18 +1,18 @@
 import {
   input_date_styles_default
-} from "./chunk.GNJTQL5Q.js";
+} from "./chunk.UHF3BDIM.js";
 import {
   InputBase
 } from "./chunk.WMFEJDPX.js";
 import {
   DSAInternalDateField
-} from "./chunk.Y52HRJXK.js";
+} from "./chunk.ORFYYGB2.js";
 import {
   DSAPopup
 } from "./chunk.GYWU4AAB.js";
 import {
   DSACalendar
-} from "./chunk.V3LDWXHK.js";
+} from "./chunk.5A6XLOZY.js";
 import {
   formatDateRange,
   getDateFromISO,
@@ -35,7 +35,7 @@ import {
 } from "./chunk.HPDCOGLH.js";
 import {
   LocalizeController
-} from "./chunk.TYAQGRNJ.js";
+} from "./chunk.WHHYA5VY.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";
@@ -363,7 +363,8 @@ var DSAInputDate = class extends InputBase {
   renderInput() {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     const hasPrefixIcon = this.hasSlotController.test("prefix");
-    const hasClearIcon = this.clearable && !this.disabled && !this.readonly && (typeof this.value === "number" || this.value.length > 0);
+    const hasClearIcon = this.clearable && !this.disabled && !this.readonly;
+    const showClearIcon = hasClearIcon && (typeof this.value === "number" || this.value.length > 0);
     return html`
       <div
         part="base"
@@ -453,6 +454,19 @@ var DSAInputDate = class extends InputBase {
           ></dsa-internal-date-field>
         </div>
 
+        ${hasClearIcon ? html`
+              <dsa-icon-button
+                part="clear-button"
+                class=${classMap({
+      "input__action-button": true,
+      "input__action-button--hidden": !showClearIcon
+    })}
+                name="clear"
+                label=${this.localize.term("clearEntry")}
+                @click=${this.handleClearClick}
+                library="system"
+              ></dsa-icon-button>
+            ` : ""}
         ${!this.hideCalendarButton ? html`
               <dsa-popup
                 class="date-popup"
@@ -490,16 +504,6 @@ var DSAInputDate = class extends InputBase {
                 </div>
               </dsa-popup>
             ` : ""}
-        ${hasClearIcon ? html`
-              <dsa-icon-button
-                part="clear-button"
-                class="input__action-button"
-                name="clear"
-                label=${this.localize.term("clearEntry")}
-                @click=${this.handleClearClick}
-                library="system"
-              ></dsa-icon-button>
-            ` : ""}
       </div>
     `;
   }

package/dist/chunks/{chunk.XS7X5VMK.js → chunk.HPAWBSR5.js}

@@ -1,6 +1,6 @@
 import {
   LocalizeController
-} from "./chunk.TYAQGRNJ.js";
+} from "./chunk.WHHYA5VY.js";
 import {
   ShoelaceElement
 } from "./chunk.SVWU6JW4.js";

package/dist/chunks/{chunk.3WSB3BNE.js → chunk.I522XZAV.js}

@@ -1,6 +1,6 @@
 import {
   input_base_styles_default
-} from "./chunk.MFNBPWAR.js";
+} from "./chunk.EWMFHVNW.js";
 
 // src/components/input-time/input-time.styles.ts
 import { css } from "lit";

package/dist/chunks/{chunk.5KTLM3MD.js → chunk.JIMAJLDU.js}

@@ -18,7 +18,7 @@ var card_nav_accordion_styles_default = css`
   }
 
   .card-nav-accordion {
-    font: var(--dsa-font-medium-bold);
+    font: var(--dsa-font-body-m-bold);
     color: var(--dsa-wc-card-nav-color);
     overflow-anchor: none;
   }
@@ -97,7 +97,7 @@ var card_nav_accordion_styles_default = css`
   }
   ::slotted(dsa-card-nav-item) {
     --card-nav-item-padding: 0.75rem 1.25rem 0.75rem 1.75rem;
-    --card-nav-item-font: var(--dsa-font-medium-normal);
+    --card-nav-item-font: var(--dsa-font-body-m-normal);
   }
 `;
 

package/dist/chunks/{chunk.D72FHMFI.js → chunk.JUOYMIGK.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.XATWRKAV.js";
+} from "./chunk.CKEB7DWU.js";
 import {
   component_styles_default
 } from "./chunk.TUVJKY7S.js";