@ds-autonomie/web-components 2.3.1 → 2.4.0

package/dist/chunks/{chunk.2W6FOXSH.js → chunk.HQJDKIMG.js}

@@ -1,9 +1,6 @@
 import {
   checkbox_group_styles_default
-} from "./chunk.ODXKNTKC.js";
-import {
-  a11yWarning
-} from "./chunk.PWL7QCVG.js";
+} from "./chunk.ZG2D4OQ4.js";
 import {
   renderFormElementErrors
 } from "./chunk.IZBHR7GP.js";
@@ -19,6 +16,9 @@ import {
 import {
   watch
 } from "./chunk.NOMN6DGD.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";
@@ -45,6 +45,7 @@ var DSACheckboxGroup = class extends ShoelaceElement {
     this.defaultValue = [];
     this.label = "";
     this.helpText = "";
+    this.description = "";
     this.name = "option";
     this.value = [];
     this.form = "";
@@ -163,6 +164,12 @@ var DSACheckboxGroup = class extends ShoelaceElement {
     this.formControlController.setValidity(false);
     this.formControlController.emitInvalidEvent(event);
   }
+  getDescriptionIds() {
+    let ids = [];
+    if (this.error) ids = ["error-text"];
+    ids = [...ids, "help-text", "description"];
+    return ids.join(" ");
+  }
   handleValueChange() {
     this.getAllCheckboxes().forEach(
       (checkbox) => checkbox.checked = this.value.includes(checkbox.value)
@@ -179,13 +186,6 @@ var DSACheckboxGroup = class extends ShoelaceElement {
       (checkbox) => checkbox.parentReadonly = this.readonly
     );
   }
-  handleErrorChange() {
-    if (this.error) {
-      this.setAttribute("aria-invalid", "true");
-    } else {
-      this.removeAttribute("aria-invalid");
-    }
-  }
   /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
   checkValidity() {
     const isRequiredAndEmpty = this.required && this.value.length === 0;
@@ -232,6 +232,11 @@ var DSACheckboxGroup = class extends ShoelaceElement {
         "<dsa-checkbox-group> requires a label attribute or a label slot for accessibility"
       );
     }
+    if (this.error && !this.errorMessage) {
+      a11yWarning(
+        "<dsa-checkbox-group> requires an error-message attribute for accessibility when the error attribute is set"
+      );
+    }
     return html`
       <fieldset
         part="form-control"
@@ -247,8 +252,7 @@ var DSACheckboxGroup = class extends ShoelaceElement {
       "form-control--options-horizontal": !!this.horizontal
     })}
         role="group"
-        aria-labelledby="label"
-        aria-describedby=${this.error ? "error-text help-text" : "help-text"}
+        aria-labelledby="label ${this.getDescriptionIds()}"
       >
         ${this.hideLabel ? html`<dsa-visually-hidden id="label"
               ><slot name="label">${this.label}</slot></dsa-visually-hidden
@@ -304,6 +308,11 @@ var DSACheckboxGroup = class extends ShoelaceElement {
         </slot>
 
         ${this.error ? renderFormElementErrors(this.errorMessage) : ""}
+        ${this.description ? html`
+              <p id="description" classname="form-control__description">
+                ${this.description}
+              </p>
+            ` : ""}
       </fieldset>
     `;
   }
@@ -330,6 +339,9 @@ __decorateClass([
 __decorateClass([
   property({ attribute: "help-text" })
 ], DSACheckboxGroup.prototype, "helpText", 2);
+__decorateClass([
+  property({ attribute: "description" })
+], DSACheckboxGroup.prototype, "description", 2);
 __decorateClass([
   property()
 ], DSACheckboxGroup.prototype, "name", 2);
@@ -392,9 +404,6 @@ __decorateClass([
 __decorateClass([
   watch("readonly")
 ], DSACheckboxGroup.prototype, "handleReadonlyChange", 1);
-__decorateClass([
-  watch("error")
-], DSACheckboxGroup.prototype, "handleErrorChange", 1);
 DSACheckboxGroup = __decorateClass([
   customElement("dsa-checkbox-group")
 ], DSACheckboxGroup);

package/dist/chunks/{chunk.DIM7WDHO.js → chunk.IFDJNZPC.js}

@@ -1,6 +1,9 @@
 import {
   menu_accordion_styles_default
 } from "./chunk.DJEMOASF.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
@@ -15,10 +18,13 @@ import {
 } from "./chunk.HGR7A5FK.js";
 import {
   LocalizeController
-} from "./chunk.U7ZMMMJ3.js";
+} from "./chunk.YWHYMKYI.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";
@@ -34,6 +40,7 @@ var DSAMenuAccordion = class extends ShoelaceElement {
   constructor() {
     super(...arguments);
     this.localize = new LocalizeController(this);
+    this.hasSlotController = new HasSlotController(this, "summary");
     this.open = false;
     this.level = 1;
   }
@@ -146,6 +153,11 @@ var DSAMenuAccordion = class extends ShoelaceElement {
     return await waitForEvent(this, "dsa-after-hide");
   }
   render() {
+    if (!this.summary && !this.hasSlotController.test("summary")) {
+      a11yWarning(
+        "<dsa-menu-accordion> requires a summary attribute or a summary slot for accessibility"
+      );
+    }
     return html`
       <div
         part="base"

package/dist/chunks/{chunk.E45DVVIM.js → chunk.INFNQBQD.js}

@@ -6,13 +6,13 @@ import {
 } from "./chunk.CMJ2SRTL.js";
 import {
   form_control_styles_default
-} from "./chunk.EIZK62ST.js";
+} from "./chunk.D7NKST7Z.js";
 import {
   FormControlController
 } from "./chunk.JA7YFGLI.js";
 import {
   LocalizeController
-} from "./chunk.U7ZMMMJ3.js";
+} from "./chunk.YWHYMKYI.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/{chunk.EI563TWV.js → chunk.ISWFROYZ.js}

@@ -102,6 +102,7 @@ var filter_button_styles_default = css`
     transition: var(--dsa-wc-transition-medium) rotate ease;
     rotate: 0;
     color: var(--dsa-wc-input-icon-color);
+    font-size: var(--dsa-wc-filter-button-icon-size);
   }
 
   :host([aria-expanded='true']) .expand-icon {

package/dist/chunks/{chunk.6K4LF64W.js → chunk.IUPSCAN6.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.U7ZMMMJ3.js";
+} from "./chunk.YWHYMKYI.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/{chunk.K3HEMTRQ.js → chunk.IW4EYF6Z.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.2LWUWDHO.js";
 import {
   LocalizeController
-} from "./chunk.U7ZMMMJ3.js";
+} from "./chunk.YWHYMKYI.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/{chunk.2GRTPJX3.js → chunk.IXAKBOI4.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.CFUNT7FK.js";
 import {
   LocalizeController
-} from "./chunk.U7ZMMMJ3.js";
+} from "./chunk.YWHYMKYI.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/{chunk.UVN7RIEO.js → chunk.JG4PBHLV.js}

@@ -7,6 +7,9 @@ import {
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.ZQJVCRB2.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";
@@ -130,6 +133,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 html`
       <input
         class=${classMap({

package/dist/chunks/{chunk.4C3EA7WT.js → chunk.JMJY2JIN.js}

@@ -1,9 +1,9 @@
 import {
   input_otp_styles_default
-} from "./chunk.3NNE7XGI.js";
+} from "./chunk.OCK5L55T.js";
 import {
   FormControlLayout
-} from "./chunk.LGDM46D4.js";
+} from "./chunk.RVCSQIWF.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";
@@ -144,7 +144,9 @@ var DSAInputOTP = class extends FormControlLayout {
     return this.value.length > 0 ? Math.min(this.value.length, this.length - 1) : 0;
   }
   getDescriptionIds() {
-    const ids = [...this.error ? ["error-text"] : [], "help-text"];
+    let ids = [];
+    if (this.error) ids = ["error-text"];
+    ids = [...ids, "help-text", "description"];
     return ids.join(" ");
   }
   handleCurrentIndexChange() {

package/dist/chunks/{chunk.WIVRYVXD.js → chunk.JRJB2DFE.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.DX25IW4S.js";
 import {
   LocalizeController
-} from "./chunk.U7ZMMMJ3.js";
+} from "./chunk.YWHYMKYI.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";

package/dist/chunks/{chunk.2YE5HPSL.js → chunk.JZYJ2V4F.js}

@@ -1,13 +1,13 @@
 import {
   getDateFromISO,
   getISOFormattedDate
-} from "./chunk.6YEPFMKU.js";
+} from "./chunk.YBWQADCH.js";
 import {
   calendar_styles_default
 } from "./chunk.L5DEEGJU.js";
 import {
   LocalizeController
-} from "./chunk.U7ZMMMJ3.js";
+} from "./chunk.YWHYMKYI.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/{chunk.PTFOYYGJ.js → chunk.KDEA34PP.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.3SMOVUNI.js";
 import {
   FilterBase
-} from "./chunk.3SX7AERB.js";
+} from "./chunk.MWWI3AU2.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/{chunk.EYZGEU3G.js → chunk.KEJKTQP6.js}

@@ -26,18 +26,8 @@ var error_text_styles_default = css`
     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/dist/chunks/{chunk.5NUQTJJR.js → chunk.KENYJWWA.js}

@@ -1,12 +1,15 @@
 import {
   filter_button_styles_default
-} from "./chunk.EI563TWV.js";
+} from "./chunk.ISWFROYZ.js";
 import {
   LocalizeController
-} from "./chunk.U7ZMMMJ3.js";
+} from "./chunk.YWHYMKYI.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";
@@ -53,6 +56,11 @@ var DSAFilterButton = class extends ShoelaceElement {
     );
   }
   render() {
+    if (!this.label) {
+      a11yWarning(
+        "<dsa-filter-button> require a label attribute for accessibility"
+      );
+    }
     return html`
       <span class="label"
         >${`${this.label}${this.selectionCount > 0 && !this.drawer ? " : " : ""}`}</span

package/dist/chunks/{chunk.JNZTWND7.js → chunk.KNPGT6SV.js}

@@ -4,6 +4,12 @@ import {
 import {
   renderFormElementErrors
 } from "./chunk.IZBHR7GP.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.ZQJVCRB2.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";
@@ -15,7 +21,6 @@ import {
 import { html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
-import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { LocalizeController } from "@shoelace-style/localize";
 var DSAFileUploadItem = class extends ShoelaceElement {
@@ -42,6 +47,11 @@ var DSAFileUploadItem = class extends ShoelaceElement {
   render() {
     var _a;
     const isUploadCompleted = (this.uploadProgress === void 0 || this.uploadProgress === 100) && !this.error;
+    if (this.error && !this.errorMessage) {
+      a11yWarning(
+        "<dsa-file-upload-item> requires an error-message attribute for accessibility when the error attribute is set"
+      );
+    }
     return html`
       <div
         part="base"
@@ -53,11 +63,7 @@ var DSAFileUploadItem = class extends ShoelaceElement {
       "file-item-container--large": this.size === "large"
     })}
       >
-        <article
-          part="file-item"
-          aria-describedby="error-text"
-          aria-invalid=${ifDefined(this.error ? "true" : void 0)}
-        >
+        <article part="file-item">
           <slot part="label" @slotchange=${this.handleDefaultSlotChange}></slot>
           <slot
             part="upload-indicator"
@@ -73,6 +79,9 @@ var DSAFileUploadItem = class extends ShoelaceElement {
             type="button"
             @click=${this.handleRemoveClick}
             aria-label=${this.localize.term("clearFile", this.labelText)}
+            aria-describedby=${ifDefinedAndNotEmpty(
+      this.error ? "error-text" : void 0
+    )}
           >
             ${isUploadCompleted ? html`<dsa-icon name="delete" library="system"></dsa-icon>` : html`<dsa-icon name="close" library="system"></dsa-icon>`}
           </button>

package/dist/chunks/{chunk.IIYPN5OC.js → chunk.LC7CCWN3.js}

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

package/dist/chunks/{chunk.INLQD4SQ.js → chunk.LQG6R72U.js}

@@ -99,9 +99,6 @@ var alert_styles_default = css`
 
   .alert__icon {
     font-size: var(--dsa-wc-alert-icon-size);
-  }
-
-  .alert__icon {
     margin-inline-end: var(--dsa-wc-alert-icon-margin-inline);
   }
 

package/dist/chunks/{chunk.F6RRFM4P.js → chunk.M362UNDB.js}

@@ -11,6 +11,7 @@ var breadcrumb_styles_default = css`
     display: flex;
     align-items: center;
     flex-wrap: wrap;
+    row-gap: var(--dsa-spacing-8);
   }
 `;
 

package/dist/chunks/{chunk.KGZLC7FO.js → chunk.M4H37WUH.js}

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

package/dist/chunks/{chunk.J4GT5AWF.js → chunk.M5MCRNUJ.js}

@@ -29,12 +29,29 @@ var tab_group_styles_default = css`
 
   .tab-group--has-scroll-controls .tab-group__nav-container {
     position: relative;
-    padding: 0 1.75rem;
+    padding: 0 2.5rem;
+  }
+
+  .tab-group--below-page-header .tab-group__nav-section {
+    background: var(--dsa-wc-page-header-background);
+  }
+  .tab-group__nav-section,
+  .tab-group__body-section {
+    display: flex;
+    justify-content: center;
+    padding-inline: var(--tab-group-padding-inline);
+  }
+
+  .tab-group__nav-container,
+  .tab-group__body {
+    width: 100%;
+    max-width: var(--tab-group-max-width);
   }
 
   .tab-group__body {
     display: block;
     overflow: auto;
+    max-width: var(--tab-group-max-width);
   }
 
   .tab-group__scroll-button {
@@ -44,7 +61,7 @@ var tab_group_styles_default = css`
     position: absolute;
     top: 0;
     bottom: 0;
-    width: 1.75rem;
+    width: 2.5rem;
   }
 
   .tab-group__scroll-button--start {
@@ -91,12 +108,14 @@ var tab_group_styles_default = css`
     height: 0;
   }
 
+  .tab-group--top .tab-group__nav-section {
+    border-bottom: solid var(--dsa-wc-tab-group-track-width)
+      var(--dsa-wc-tab-group-track-color);
+  }
   .tab-group--top .tab-group__tabs {
     flex: 1 1 auto;
     position: relative;
     flex-direction: row;
-    border-bottom: solid var(--dsa-wc-tab-group-track-width)
-      var(--dsa-wc-tab-group-track-color);
   }
 
   .tab-group--top .tab-group__indicator {
@@ -135,12 +154,14 @@ var tab_group_styles_default = css`
     height: 0;
   }
 
+  .tab-group--bottom .tab-group__nav-section {
+    border-top: solid var(--dsa-wc-tab-group-track-width)
+      var(--dsa-wc-tab-group-track-color);
+  }
   .tab-group--bottom .tab-group__tabs {
     flex: 1 1 auto;
     position: relative;
     flex-direction: row;
-    border-top: solid var(--dsa-wc-tab-group-track-width)
-      var(--dsa-wc-tab-group-track-color);
   }
 
   .tab-group--bottom .tab-group__indicator {
@@ -169,11 +190,13 @@ var tab_group_styles_default = css`
     order: 1;
   }
 
+  .tab-group--start .tab-group__nav-section {
+    border-inline-end: solid var(--dsa-wc-tab-group-track-width)
+      var(--dsa-wc-tab-group-track-color);
+  }
   .tab-group--start .tab-group__tabs {
     flex: 0 0 auto;
     flex-direction: column;
-    border-inline-end: solid var(--dsa-wc-tab-group-track-width)
-      var(--dsa-wc-tab-group-track-color);
   }
 
   .tab-group--start .tab-group__indicator {
@@ -208,11 +231,13 @@ var tab_group_styles_default = css`
     order: 2;
   }
 
+  .tab-group--end .tab-group__nav-section {
+    border-left: solid var(--dsa-wc-tab-group-track-width)
+      var(--dsa-wc-tab-group-track-color);
+  }
   .tab-group--end .tab-group__tabs {
     flex: 0 0 auto;
     flex-direction: column;
-    border-left: solid var(--dsa-wc-tab-group-track-width)
-      var(--dsa-wc-tab-group-track-color);
   }
 
   .tab-group--end .tab-group__indicator {

package/dist/chunks/{chunk.GNJ2HZ3Y.js → chunk.MIOQ72YC.js}

@@ -1,9 +1,9 @@
+import {
+  badge_styles_default
+} from "./chunk.5R6YK6UH.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
-import {
-  badge_styles_default
-} from "./chunk.BVRGK5ZO.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";

package/dist/chunks/{chunk.WOJO2VFN.js → chunk.MTOENDDR.js}

@@ -3,10 +3,13 @@ import {
 } from "./chunk.SGIGGO5M.js";
 import {
   LocalizeController
-} from "./chunk.U7ZMMMJ3.js";
+} from "./chunk.YWHYMKYI.js";
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.ZQJVCRB2.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";
@@ -28,6 +31,11 @@ var DSAProgressBar = class extends ShoelaceElement {
     this.label = "";
   }
   render() {
+    if (!this.label) {
+      a11yWarning(
+        "<dsa-progress-bar> requires a label attribute for accessibility"
+      );
+    }
     return html`
       <div
         part="base"

package/dist/chunks/{chunk.3SX7AERB.js → chunk.MWWI3AU2.js}

@@ -15,10 +15,13 @@ import {
 } from "./chunk.HGR7A5FK.js";
 import {
   LocalizeController
-} from "./chunk.U7ZMMMJ3.js";
+} from "./chunk.YWHYMKYI.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";
@@ -208,6 +211,9 @@ var FilterBase = class extends ShoelaceElement {
   }
   // Common render methods
   renderTrigger() {
+    if (!this.label) {
+      a11yWarning("Filters require a label attribute for accessibility");
+    }
     return html` <dsa-filter-button
       slot="anchor"
       class="filter__trigger"