@ds-autonomie/web-components 2.3.1 → 2.4.1

package/dist/chunks/{chunk.GZO5TQGU.js → chunk.GZEVQN6J.js}

@@ -1,12 +1,12 @@
 import {
   DSASelect
-} from "./chunk.THO67JP2.js";
+} from "./chunk.TTZ6Y7GB.js";
 import {
   getPhoneConfig
-} from "./chunk.65HTBW2L.js";
+} from "./chunk.YKKP7YAT.js";
 import {
   input_phone_styles_default
-} from "./chunk.WPIYFGT2.js";
+} from "./chunk.46A3MGDV.js";
 import {
   frenchNumberPrefix,
   phonePrefixOptions
@@ -18,7 +18,7 @@ import {
 } from "./chunk.7OLEA3GQ.js";
 import {
   FormControlLayout
-} from "./chunk.LGDM46D4.js";
+} from "./chunk.MKTUAWNS.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";
@@ -194,6 +194,12 @@ var DSAInputPhone = class extends FormControlLayout {
     this.inputEl.focus();
     event.stopPropagation();
   }
+  getDescriptionIds() {
+    let ids = ["input-phone"];
+    if (this.error) ids = [...ids, "error-text"];
+    ids = [...ids, "help-text", "description"];
+    return ids.join(" ");
+  }
   handleDisabledChange() {
     if (this.disabled) {
       this.phonePrefixEl.setAttribute("disabled", "");
@@ -376,7 +382,7 @@ var DSAInputPhone = class extends FormControlLayout {
               aria-label=${ifDefinedAndNotEmpty(
       hasLabel ? void 0 : this.title
     )}
-              aria-describedby=${this.error ? "input-phone error-text help-text" : "input-phone help-text"}
+              aria-describedby=${this.getDescriptionIds()}
               aria-invalid=${ifDefined(this.error ? "true" : void 0)}
               @change=${this.handleChange}
               @keyup=${this.handleDocumentKeyUp}

package/dist/chunks/{chunk.KFUZ6JMQ.js → chunk.H3X3D747.js}

@@ -1,9 +1,9 @@
 import {
   tag_styles_default
-} from "./chunk.WFHOSUOX.js";
+} from "./chunk.4LRLYTU2.js";
 import {
   LocalizeController
-} from "./chunk.U7ZMMMJ3.js";
+} from "./chunk.YWHYMKYI.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/{chunk.3EAWXV27.js → chunk.H7ZLX7SO.js}

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

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.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.JOW4YVGA.js → chunk.KGZXCKP2.js}

@@ -7,6 +7,9 @@ import {
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
+import {
+  LocalizeController
+} from "./chunk.YWHYMKYI.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";
@@ -22,6 +25,7 @@ var DSATableContainer = class extends LoadingStateElement {
   constructor() {
     super(...arguments);
     this.hasSlotController = new HasSlotController(this, "toolbar");
+    this.localize = new LocalizeController(this);
     this.showTableActions = false;
   }
   connectedCallback() {
@@ -61,6 +65,21 @@ var DSATableContainer = class extends LoadingStateElement {
       this.showTableActions = true;
     }
   }
+  handleCaptionSlotChange() {
+    this.linkCaptionAndTable();
+  }
+  handleTableSlotChange() {
+    this.linkCaptionAndTable();
+  }
+  linkCaptionAndTable() {
+    const tableCaption = this.querySelector("dsa-table-caption");
+    const tableElement = this.querySelector("dsa-table");
+    if (!tableCaption || !tableElement || tableCaption.id || tableElement.getAttribute("aria-labelledby"))
+      return;
+    const randomId = Math.floor(Math.random() * 999999999).toString();
+    tableCaption.id = randomId;
+    tableElement.setAttribute("aria-labelledby", randomId);
+  }
   handleShowTableActions() {
     const actionBar = this.querySelector("dsa-table-action");
     const toolbar = this.querySelector("dsa-table-toolbar");
@@ -112,10 +131,15 @@ var DSATableContainer = class extends LoadingStateElement {
     }
   }
   render() {
+    var _a;
     const hasToolbar = this.hasSlotController.test("toolbar");
     const hasAction = this.hasSlotController.test("action");
     return html`
-      <slot part="caption" name="caption"></slot>
+      <slot
+        part="caption"
+        name="caption"
+        @slotchange=${this.handleCaptionSlotChange}
+      ></slot>
       <slot part="export" name="export"></slot>
       <div
         part="bar-container"
@@ -127,8 +151,17 @@ var DSATableContainer = class extends LoadingStateElement {
         <slot part="toolbar" name="toolbar"></slot>
         <slot part="action" name="action"></slot>
       </div>
-      <slot part="table" name="table"></slot>
+      <slot
+        part="table"
+        name="table"
+        @slotchange=${this.handleTableSlotChange}
+      ></slot>
       <slot part="pagination" name="pagination"></slot>
+      <dsa-visually-hidden aria-live="polite" aria-atomic="true">
+        ${this.showTableActions ? html`<span
+              >${(_a = this.actionsAnnouncement) != null ? _a : this.localize.term("showTableActionsAnnouncement")}</span
+            >` : ""}
+      </dsa-visually-hidden>
     `;
   }
 };
@@ -136,6 +169,9 @@ DSATableContainer.styles = table_container_styles_default;
 __decorateClass([
   property({ attribute: "show-table-actions", reflect: true, type: Boolean })
 ], DSATableContainer.prototype, "showTableActions", 2);
+__decorateClass([
+  property({ attribute: "actions-announcement", type: String })
+], DSATableContainer.prototype, "actionsAnnouncement", 2);
 __decorateClass([
   watch("showTableActions")
 ], DSATableContainer.prototype, "handleShowTableActions", 1);

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.LGDM46D4.js → chunk.MKTUAWNS.js}

@@ -1,12 +1,12 @@
-import {
-  a11yWarning
-} from "./chunk.PWL7QCVG.js";
 import {
   renderFormElementErrors
 } from "./chunk.IZBHR7GP.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";
@@ -43,6 +43,7 @@ var FormControlLayout = class extends ShoelaceElement {
     this.errorMessage = "";
     this.form = "";
     this.required = false;
+    this.description = "";
   }
   renderInput() {
     return html``;
@@ -57,11 +58,16 @@ var FormControlLayout = class extends ShoelaceElement {
     const hasHelpTextSlot = this.hasSlotController.test("help-text");
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
-    if (!hasLabel) {
+    if (!hasLabel && !this.title) {
       a11yWarning(
         "Form controls require a label attribute or a label slot for accessibility"
       );
     }
+    if (this.error && !this.errorMessage) {
+      a11yWarning(
+        "Form controls requires an error-message attribute for accessibility when the error attribute is set"
+      );
+    }
     return html`
         <div
           part="form-control"
@@ -103,6 +109,12 @@ var FormControlLayout = class extends ShoelaceElement {
           </slot>
   
           ${this.renderCounter()}
+
+          ${this.description !== "" ? html`
+                  <p id="description" class="form-control__description">
+                    ${this.description}
+                  </p>
+                ` : ""}
   
           ${this.error && !this.disabled && this.errorMessage !== "" ? renderFormElementErrors(this.errorMessage) : ""}
           </div>
@@ -161,6 +173,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], FormControlLayout.prototype, "required", 2);
+__decorateClass([
+  property({ attribute: "description" })
+], FormControlLayout.prototype, "description", 2);
 
 export {
   FormControlLayout

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"