@ds-autonomie/web-components 2.3.1 → 2.4.0

package/cdn/chunks/{chunk.LLHSRCWY.js → chunk.BEKIGEWZ.js}

@@ -7,6 +7,9 @@ import {
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
+import {
+  LocalizeController
+} from "./chunk.VARBZAJP.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";
@@ -29,6 +32,7 @@ var DSATableContainer = class extends LoadingStateElement {
   constructor() {
     super(...arguments);
     this.hasSlotController = new HasSlotController(this, "toolbar");
+    this.localize = new LocalizeController(this);
     this.showTableActions = false;
   }
   connectedCallback() {
@@ -119,6 +123,7 @@ var DSATableContainer = class extends LoadingStateElement {
     }
   }
   render() {
+    var _a;
     const hasToolbar = this.hasSlotController.test("toolbar");
     const hasAction = this.hasSlotController.test("action");
     return x`
@@ -136,6 +141,11 @@ var DSATableContainer = class extends LoadingStateElement {
       </div>
       <slot part="table" name="table"></slot>
       <slot part="pagination" name="pagination"></slot>
+      <dsa-visually-hidden aria-live="polite" aria-atomic="true">
+        ${this.showTableActions ? x`<span
+              >${(_a = this.actionsAnnouncement) != null ? _a : this.localize.term("showTableActionsAnnouncement")}</span
+            >` : ""}
+      </dsa-visually-hidden>
     `;
   }
 };
@@ -143,6 +153,9 @@ DSATableContainer.styles = table_container_styles_default;
 __decorateClass([
   n({ attribute: "show-table-actions", reflect: true, type: Boolean })
 ], DSATableContainer.prototype, "showTableActions", 2);
+__decorateClass([
+  n({ attribute: "actions-announcement", type: String })
+], DSATableContainer.prototype, "actionsAnnouncement", 2);
 __decorateClass([
   watch("showTableActions")
 ], DSATableContainer.prototype, "handleShowTableActions", 1);

package/cdn/chunks/{chunk.V2UYRTUC.js → chunk.BNLQUWBO.js}

@@ -1,6 +1,6 @@
 import {
   DSATable
-} from "./chunk.KXKV4FIS.js";
+} from "./chunk.A5QRPK4Q.js";
 import {
   table_body_styles_default
 } from "./chunk.P54A3JER.js";

package/cdn/chunks/{chunk.6NFWRZM6.js → chunk.C6VRBK7T.js}

@@ -6,10 +6,10 @@ import {
 } from "./chunk.YY5FKN3H.js";
 import {
   checkbox_styles_default
-} from "./chunk.O3K7DNLG.js";
+} from "./chunk.II42H5RK.js";
 import {
   DSACheckboxGroup
-} from "./chunk.TO65OMN5.js";
+} from "./chunk.TZ4FLP4S.js";
 import {
   renderFormElementErrors
 } from "./chunk.EY4WUNAJ.js";
@@ -25,6 +25,9 @@ import {
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.B6GVVW66.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
 import {
   o
 } from "./chunk.YQLIIKLI.js";
@@ -172,6 +175,16 @@ var DSACheckbox = class extends ShoelaceElement {
     const isDisabled = this.disabled || this.parentDisabled;
     const isReadonly = this.readonly || this.parentReadonly;
     const isDeactivated = isDisabled || isReadonly;
+    if (!this.hasSlotController.test("[default]") && !this.accessibleName && !(this.tabIndex === -1)) {
+      a11yWarning(
+        "<dsa-checkbox> requires an accessible name in the default slot for accessibility"
+      );
+    }
+    if (this.error && !this.errorMessage) {
+      a11yWarning(
+        "<dsa-checkbox> requires an error-message attribute for accessibility when the error attribute is set"
+      );
+    }
     return x`
       <div
         part="base"

package/cdn/chunks/{chunk.DDRUVCZW.js → chunk.CMRQV2SO.js}

@@ -1,6 +1,6 @@
 import {
   input_styles_default
-} from "./chunk.T56ZOKTF.js";
+} from "./chunk.L3ZYNSI3.js";
 import {
   i
 } from "./chunk.4KHZQZ3M.js";

package/cdn/chunks/{chunk.YGAW4V4H.js → chunk.CTMJ2DNZ.js}

@@ -1,6 +1,6 @@
 import {
   DSARadioGroup
-} from "./chunk.P5KRELMB.js";
+} from "./chunk.HE5SI4A5.js";
 import {
   FormSelectableCard
 } from "./chunk.6BPVPY42.js";

package/cdn/chunks/{chunk.GN3AVMBZ.js → chunk.CUFMKSEN.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.2WRFDMKN.js";
 import {
   LocalizeController
-} from "./chunk.LICWCBKN.js";
+} from "./chunk.VARBZAJP.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.7S74KUA4.js → chunk.CUZCVMCE.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.W2B6WXUI.js";
+} from "./chunk.IWMEHK72.js";
 import {
   component_styles_default
 } from "./chunk.PSQJDSB2.js";

package/cdn/chunks/{chunk.5UPL2TW3.js → chunk.D3U3NPDM.js}

@@ -29,18 +29,8 @@ var error_text_styles_default = i`
     flex: 0 0 auto;
     display: flex;
     color: var(--dsa-wc-error-text-icon-color);
-    padding-top: 0.1em;
+    font-size: var(--dsa-wc-error-text-icon-size);
   }
-
-  .error-text__icon dsa-icon {
-    width: 1.666em;
-    height: 1.666em;
-  }
-
-  // .error-text__icon dsa-icon::part(svg) {
-  //   width: auto;
-  //   height: auto;
-  // }
 `;
 
 export {

package/cdn/chunks/{chunk.LFCUNNYV.js → chunk.DROLKHEJ.js}

@@ -74,30 +74,29 @@ var download_link_styles_default = i`
     outline-offset: var(--dsa-wc-focus-ring-offset);
     border-radius: var(--dsa-wc-focus-ring-radius);
   }
-
-  .document-link {
-    font: var(--dsa-wc-link-font);
-    --icon-size: var(--dsa-spacing-24);
-  }
   .document-link--x-large {
     font: var(--dsa-wc-link-font-x-large);
-    --icon-size: var(--dsa-spacing-32);
+    --icon-size: var(--dsa-wc-download-link-icon-size--xlarge);
   }
   .document-link--large {
     font: var(--dsa-wc-link-font-large);
-    --icon-size: 28px;
+    --icon-size: var(--dsa-wc-download-link-icon-size--large);
+  }
+  .document-link--medium {
+    font: var(--dsa-wc-link-font);
+    --icon-size: var(--dsa-wc-download-link-icon-size--medium);
   }
   .document-link--small {
     font: var(--dsa-wc-link-font-small);
-    --icon-size: 20px;
+    --icon-size: var(--dsa-wc-download-link-icon-size--small);
   }
   .document-link--x-small {
     font: var(--dsa-wc-link-font-x-small);
-    --icon-size: var(--dsa-spacing-16);
+    --icon-size: var(--dsa-wc-download-link-icon-size--xsmall);
   }
   .document-link--2x-small {
     font: var(--dsa-wc-link-font-2x-small);
-    --icon-size: 14px;
+    --icon-size: var(--dsa-wc-download-link-icon-size--2xsmall);
   }
 
   dsa-icon {

package/cdn/chunks/{chunk.BLLAYNRQ.js → chunk.E36IR3BP.js}

@@ -1,6 +1,6 @@
 import {
   LocalizeController
-} from "./chunk.LICWCBKN.js";
+} from "./chunk.VARBZAJP.js";
 import {
   ShoelaceElement,
   n,

package/cdn/chunks/{chunk.3CRRJ74Q.js → chunk.E7IRWRZH.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.LICWCBKN.js";
+} from "./chunk.VARBZAJP.js";
 import {
   e
 } from "./chunk.IKHG7XGO.js";

package/cdn/chunks/{chunk.W6N2ZQTH.js → chunk.EVFY55H5.js}

@@ -5,10 +5,10 @@ import {
 } from "./chunk.IONY2GZF.js";
 import {
   input_time_styles_default
-} from "./chunk.TGMW5D2F.js";
+} from "./chunk.OSJ5I4FK.js";
 import {
   FormControlLayout
-} from "./chunk.TOWWOPMH.js";
+} from "./chunk.JZOEQBF7.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";
@@ -34,7 +34,7 @@ import {
 } from "./chunk.2WRFDMKN.js";
 import {
   LocalizeController
-} from "./chunk.LICWCBKN.js";
+} from "./chunk.VARBZAJP.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";
@@ -183,13 +183,9 @@ var DSAInputTime = class extends FormControlLayout {
     }
   }
   getDescriptionIds() {
-    const ids = [
-      "input__prefix",
-      "input__suffix",
-      ...this.error ? ["error-text"] : [],
-      "selected-value",
-      "help-text"
-    ];
+    let ids = ["input__prefix", "input__suffix"];
+    if (this.error) ids = [...ids, "error-text"];
+    ids = [...ids, "selected-value", "help-text", "description"];
     return ids.join(" ");
   }
   handleDisabledChange() {

package/cdn/chunks/{chunk.VGXDHXD4.js → chunk.FAPQZI57.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.LBT6FNPI.js";
 import {
   LocalizeController
-} from "./chunk.LICWCBKN.js";
+} from "./chunk.VARBZAJP.js";
 import {
   ShoelaceElement,
   t

package/cdn/chunks/{chunk.7FRA5H32.js → chunk.FLMM3C4U.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.W2B6WXUI.js";
+} from "./chunk.IWMEHK72.js";
 import {
   component_styles_default
 } from "./chunk.PSQJDSB2.js";
@@ -348,6 +348,7 @@ var combobox_styles_default = i`
     rotate: 0;
     color: var(--dsa-wc-input-icon-color);
     margin-left: var(--dsa-spacing-4);
+    font-size: var(--dsa-wc-combobox-expand-icon-size);
   }
 
   .select--error .select__expand-icon {
@@ -358,9 +359,10 @@ var combobox_styles_default = i`
     rotate: -180deg;
   }
 
-  /* Listbox */
-  .select__listbox {
-    display: block;
+  /* Panel */
+  .select__panel {
+    display: flex;
+    flex-direction: column;
     position: relative;
     font: var(--dsa-wc-input-text-field-font);
     box-shadow: var(--dsa-wc-shadow-small);
@@ -369,6 +371,7 @@ var combobox_styles_default = i`
       var(--dsa-wc-combobox-listbox-border-color);
     border-radius: var(--dsa-wc-combobox-listbox-border-radius);
     padding-inline: 0;
+    padding-block: var(--dsa-spacing-2);
     margin-top: var(--dsa-wc-combobox-listbox-margin-top);
     overflow: auto;
     overscroll-behavior: none;
@@ -380,6 +383,21 @@ var combobox_styles_default = i`
     max-height: var(--auto-size-available-height);
   }
 
+  .see-more-option-text {
+    font: var(--dsa-wc-button-font-small);
+    color: var(--dsa-wc-button-tertiary-on-base-font-color);
+    text-align: center;
+    display: inline-block;
+    width: 100%;
+    pointer-events: none;
+  }
+
+  /* Listbox */
+  .select__listbox {
+    padding: 0;
+    margin: 0;
+  }
+
   .select__listbox::slotted(dsa-divider) {
     --spacing-start: var(--dsa-wc-combobox-listbox-divider-spacing);
     --spacing-end: var(--dsa-wc-combobox-listbox-divider-spacing);

package/cdn/chunks/{chunk.WYBADVDH.js → chunk.FLPTQ76Z.js}

@@ -1,13 +1,13 @@
 import {
   input_date_styles_default
-} from "./chunk.DDRUVCZW.js";
+} from "./chunk.CMRQV2SO.js";
 import {
   FormControlLayout
-} from "./chunk.TOWWOPMH.js";
+} from "./chunk.JZOEQBF7.js";
 import {
   getDateFromISO,
   getISOFormattedDate
-} from "./chunk.6YEPFMKU.js";
+} from "./chunk.YBWQADCH.js";
 import {
   defaultValue
 } from "./chunk.YY5FKN3H.js";
@@ -27,7 +27,7 @@ import {
 } from "./chunk.2WRFDMKN.js";
 import {
   LocalizeController
-} from "./chunk.LICWCBKN.js";
+} from "./chunk.VARBZAJP.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";
@@ -180,6 +180,7 @@ var DSAInputDate = class extends FormControlLayout {
     this.formControlController.emitInvalidEvent(event);
   }
   getDateFieldDescription() {
+    const ids = [];
     const errorMessage = typeof this.errorMessage === "string" ? this.errorMessage : this.errorMessage.join(", ");
     const selectedDateLabel = `${this.localize.term(
       "selectedDate"
@@ -191,12 +192,11 @@ var DSAInputDate = class extends FormControlLayout {
         day: "numeric"
       }
     )}`;
-    const descriptions = [
-      ...this.error ? [errorMessage] : [],
-      ...this.value ? [selectedDateLabel] : [],
-      ...this.helpText ? [this.helpText] : []
-    ];
-    return descriptions.join(", ");
+    if (this.error) ids.push(errorMessage);
+    if (this.value) ids.push(selectedDateLabel);
+    if (this.helpText) ids.push(this.helpText);
+    if (this.description) ids.push(this.description);
+    return ids.join(" ");
   }
   shouldDisableDate(date) {
     const isLessThanMin = typeof this.min === "string" && date < getDateFromISO(this.min);

package/cdn/chunks/{chunk.JXHXRRPX.js → chunk.FN6Y2EK6.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.W2B6WXUI.js";
+} from "./chunk.IWMEHK72.js";
 import {
   component_styles_default
 } from "./chunk.PSQJDSB2.js";
@@ -321,6 +321,7 @@ var select_styles_default = i`
     transition: var(--dsa-wc-transition-fast) color;
     cursor: pointer;
     margin-inline-start: var(--dsa-wc-input-margin-inline);
+    font-size: var(--dsa-wc-select-icon-size);
   }
 
   :not(.select--disabled) .select__clear:hover,
@@ -342,6 +343,7 @@ var select_styles_default = i`
     rotate: 0;
     color: var(--dsa-wc-input-icon-color);
     margin-left: var(--dsa-spacing-4);
+    font-size: var(--dsa-wc-select-icon-size);
   }
 
   .select--open .select__expand-icon {

package/cdn/chunks/{chunk.P7D7IUHT.js → chunk.FTI4C7U6.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.7PPSHHT2.js";
 import {
   LocalizeController
-} from "./chunk.LICWCBKN.js";
+} from "./chunk.VARBZAJP.js";
 import {
   e as e2
 } from "./chunk.IKHG7XGO.js";

package/cdn/chunks/{chunk.GS6TNOKD.js → chunk.FULHOODX.js}

@@ -1,6 +1,6 @@
 import {
   input_mask_styles_default
-} from "./chunk.THMGZ3JS.js";
+} from "./chunk.A27ADPHB.js";
 import {
   maskedValueToRawValue,
   rawValueToMaskedValue,
@@ -8,7 +8,7 @@ import {
 } from "./chunk.7OLEA3GQ.js";
 import {
   FormControlLayout
-} from "./chunk.TOWWOPMH.js";
+} from "./chunk.JZOEQBF7.js";
 import {
   l
 } from "./chunk.7PPSHHT2.js";
@@ -20,7 +20,7 @@ import {
 } from "./chunk.3NWILHZZ.js";
 import {
   LocalizeController
-} from "./chunk.LICWCBKN.js";
+} from "./chunk.VARBZAJP.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";
@@ -151,12 +151,9 @@ var DSAInputMask = class extends FormControlLayout {
     }
   }
   getDescriptionIds() {
-    const ids = [
-      "input__prefix",
-      "input__suffix",
-      ...this.error ? ["error-text"] : [],
-      "help-text"
-    ];
+    let ids = ["input__prefix", "input__suffix"];
+    if (this.error) ids = [...ids, "error-text"];
+    ids = [...ids, "help-text", "description"];
     return ids.join(" ");
   }
   handleDisabledChange() {

package/cdn/chunks/{chunk.U5Q3HCRP.js → chunk.GBGDDTEL.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.4HCR3FZE.js";
 import {
   LocalizeController
-} from "./chunk.LICWCBKN.js";
+} from "./chunk.VARBZAJP.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.JHLEDXWG.js → chunk.GXQMOXKI.js}

@@ -8,6 +8,9 @@ import {
   i,
   u
 } from "./chunk.VIVOXZF6.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
 import {
   o
 } from "./chunk.YQLIIKLI.js";
@@ -43,6 +46,11 @@ var DSACard = class extends ShoelaceElement {
   render() {
     const isLink = this.isLink();
     const tag = isLink ? i`a` : i`div`;
+    if (isLink && !this.hasSlotController.test("header")) {
+      a11yWarning(
+        "<dsa-card> requires a header slot for accessibility when used as a link"
+      );
+    }
     return u`
       <div
         part="base"

package/cdn/chunks/{chunk.SE7W7XMK.js → chunk.HBIJX2WM.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.Z3VIP662.js";
 import {
   FilterBase
-} from "./chunk.4AMHKT45.js";
+} from "./chunk.4ZEHBLJR.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.P5KRELMB.js → chunk.HE5SI4A5.js}

@@ -1,12 +1,9 @@
-import {
-  wrapIndex
-} from "./chunk.HV63L5BF.js";
 import {
   radio_group_styles_default
-} from "./chunk.7S74KUA4.js";
+} from "./chunk.CUZCVMCE.js";
 import {
-  a11yWarning
-} from "./chunk.PWL7QCVG.js";
+  wrapIndex
+} from "./chunk.HV63L5BF.js";
 import {
   renderFormElementErrors
 } from "./chunk.EY4WUNAJ.js";
@@ -22,6 +19,9 @@ import {
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
 import {
   e as e2
 } from "./chunk.IKHG7XGO.js";
@@ -57,6 +57,7 @@ var DSARadioGroup = class extends ShoelaceElement {
     this.defaultValue = "";
     this.label = "";
     this.helpText = "";
+    this.description = "";
     this.name = "option";
     this.value = "";
     this.deselectable = false;
@@ -229,6 +230,12 @@ var DSARadioGroup = class extends ShoelaceElement {
     this.updateTabIndexes();
     this.formControlController.setValidity(this.validity.valid);
   }
+  getDescriptionIds() {
+    let ids = [];
+    if (this.error) ids = ["error-text"];
+    ids = [...ids, "help-text", "description"];
+    return ids.join(" ");
+  }
   updateTabIndexes() {
     const radios = this.getAllRadios();
     const firstFocusableRadioIndex = radios.findIndex(
@@ -259,11 +266,6 @@ var DSARadioGroup = class extends ShoelaceElement {
     }
   }
   handleErrorChange() {
-    if (this.error) {
-      this.setAttribute("aria-invalid", "true");
-    } else {
-      this.removeAttribute("aria-invalid");
-    }
     this.getAllRadios().forEach((radio) => radio.error = this.error);
   }
   handleDisabledChange() {
@@ -326,6 +328,11 @@ var DSARadioGroup = class extends ShoelaceElement {
         "<dsa-radio-group> requires a label attribute or a label slot for accessibility"
       );
     }
+    if (this.error && !this.errorMessage) {
+      a11yWarning(
+        "<dsa-radio-group> requires an error-message attribute for accessibility when the error attribute is set"
+      );
+    }
     return x`
       <fieldset
         part="form-control"
@@ -341,8 +348,7 @@ var DSARadioGroup = class extends ShoelaceElement {
       "form-control--options-horizontal": !!this.horizontal
     })}
         role="radiogroup"
-        aria-labelledby="label"
-        aria-describedby=${this.error ? "error-text help-text" : "help-text"}
+        aria-labelledby="label ${this.getDescriptionIds()}"
         aria-invalid=${this.error}
       >
         ${this.hideLabel ? x`<dsa-visually-hidden id="label"
@@ -400,6 +406,11 @@ var DSARadioGroup = class extends ShoelaceElement {
         ${this.error ? renderFormElementErrors(
       this.customValidityError !== "" ? this.customValidityError : this.errorMessage
     ) : ""}
+        ${this.description !== "" ? x`
+              <p id="description" classname="form-control__description">
+                ${this.description}
+              </p>
+            ` : ""}
       </fieldset>
     `;
   }
@@ -429,6 +440,9 @@ __decorateClass([
 __decorateClass([
   n({ attribute: "help-text" })
 ], DSARadioGroup.prototype, "helpText", 2);
+__decorateClass([
+  n({ attribute: "description" })
+], DSARadioGroup.prototype, "description", 2);
 __decorateClass([
   n()
 ], DSARadioGroup.prototype, "name", 2);

package/cdn/chunks/{chunk.ZKPOAPR2.js → chunk.HNGA66FR.js}

@@ -7,6 +7,9 @@ import {
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.B6GVVW66.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
 import {
   o
 } from "./chunk.YQLIIKLI.js";
@@ -139,6 +142,11 @@ var DSARangeSlider = class extends ShoelaceElement {
     this.toSlider.blur();
   }
   render() {
+    if (!this.labelFrom || !this.labelTo) {
+      a11yWarning(
+        "<dsa-range-slider> requires label-from and label-to attributes for accessibility"
+      );
+    }
     return x`
       <input
         class=${e2({

package/cdn/chunks/{chunk.AVH4JYLK.js → chunk.ICBLN3KB.js}

@@ -2,7 +2,7 @@ import {
   getDateFromISO,
   isValidDate,
   monthLength
-} from "./chunk.6YEPFMKU.js";
+} from "./chunk.YBWQADCH.js";
 import {
   l
 } from "./chunk.7PPSHHT2.js";
@@ -14,7 +14,7 @@ import {
 } from "./chunk.3NWILHZZ.js";
 import {
   LocalizeController
-} from "./chunk.LICWCBKN.js";
+} from "./chunk.VARBZAJP.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.O3K7DNLG.js → chunk.II42H5RK.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.W2B6WXUI.js";
+} from "./chunk.IWMEHK72.js";
 import {
   component_styles_default
 } from "./chunk.PSQJDSB2.js";

package/cdn/chunks/{chunk.W2B6WXUI.js → chunk.IWMEHK72.js}

@@ -181,6 +181,11 @@ var form_control_styles_default = i`
     animation-duration: 1s;
   }
 
+  /* Description text for screen readers */
+  .form-control__description {
+    display: none;
+  }
+
   @keyframes tada {
     from {
       transform: scale3d(1, 1, 1);