@ds-autonomie/web-components 2.3.0 → 2.4.0

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"

package/dist/chunks/{chunk.T2OLM5TG.js → chunk.NASETPCZ.js}

@@ -1,6 +1,9 @@
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
 import {
   accordion_styles_default
-} from "./chunk.KOTPR264.js";
+} from "./chunk.YXCCM5NC.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";
@@ -35,6 +41,7 @@ var DSAAccordion = class extends ShoelaceElement {
   constructor() {
     super(...arguments);
     this.localize = new LocalizeController(this);
+    this.hasSlotController = new HasSlotController(this, "summary");
     this.open = false;
     this.disabled = false;
     this.icon = "chevron";
@@ -127,6 +134,11 @@ var DSAAccordion = class extends ShoelaceElement {
     return await waitForEvent(this, "dsa-after-hide");
   }
   render() {
+    if (!this.summary && !this.hasSlotController.test("summary")) {
+      a11yWarning(
+        "<dsa-accordion> requires a summary attribute or a summary slot for accessibility"
+      );
+    }
     const isRtl = this.localize.dir() === "rtl";
     const expandIconName = this.icon === "box" ? "add_box" : isRtl ? "chevron_left" : "chevron_right";
     const collapseIconName = this.icon === "box" ? "indeterminate_check_box" : isRtl ? "chevron_left" : "chevron_right";
@@ -141,41 +153,43 @@ var DSAAccordion = class extends ShoelaceElement {
       "accordion--chevron": this.icon === "chevron"
     })}
       >
-        <div
-          part="header"
-          id="header"
-          aria-level=${ifDefined(this.headerLevel)}
-          role=${ifDefined(this.headerLevel ? "heading" : void 0)}
-          class="accordion__header"
-        >
-          <span
-            role="button"
-            aria-expanded=${this.open ? "true" : "false"}
-            aria-controls="content"
-            aria-disabled=${this.disabled ? "true" : "false"}
-            tabindex=${this.disabled ? "-1" : "0"}
-            @click=${this.handleSummaryClick}
-            @keydown=${this.handleSummaryKeyDown}
-            class="accordion__header-button"
+        <div part="header" id="header" class="accordion__header">
+          <div
+            class="accordion__summary-container"
+            aria-level=${ifDefined(this.headerLevel)}
+            role=${ifDefined(this.headerLevel ? "heading" : void 0)}
           >
-            <slot name="summary" part="summary" class="accordion__summary"
-              >${this.summary}</slot
+            <span
+              role="button"
+              aria-expanded=${this.open ? "true" : "false"}
+              aria-controls="content"
+              aria-disabled=${this.disabled ? "true" : "false"}
+              tabindex=${this.disabled ? "-1" : "0"}
+              @click=${this.handleSummaryClick}
+              @keydown=${this.handleSummaryKeyDown}
+              class="accordion__header-button"
             >
-
-            <span part="summary-icon" class="accordion__summary-icon">
-              <dsa-icon
-                class="accordion__expand-icon"
-                name=${expandIconName}
-                library="system"
-              ></dsa-icon>
-
-              <dsa-icon
-                class="accordion__collapse-icon"
-                name=${collapseIconName}
-                library="system"
-              ></dsa-icon>
+              <slot name="summary" part="summary" class="accordion__summary"
+                >${this.summary}</slot
+              >
             </span>
-          </span>
+          </div>
+          <div class="accordion__actions">
+            <slot name="actions"></slot>
+          </div>
+          <div part="summary-icon" class="accordion__summary-icon">
+            <dsa-icon
+              class="accordion__expand-icon"
+              name=${expandIconName}
+              library="system"
+            ></dsa-icon>
+
+            <dsa-icon
+              class="accordion__collapse-icon"
+              name=${collapseIconName}
+              library="system"
+            ></dsa-icon>
+          </div>
         </div>
 
         <div class="accordion__body">

package/dist/chunks/{chunk.B4SMUSVU.js → chunk.O4HVYU6G.js}

@@ -1,7 +1,8 @@
 import {
+  getDateFromISO,
   isValidDate,
   monthLength
-} from "./chunk.6BXZEG5L.js";
+} from "./chunk.YBWQADCH.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";
@@ -10,7 +11,7 @@ import {
 } from "./chunk.JA7YFGLI.js";
 import {
   LocalizeController
-} from "./chunk.U7ZMMMJ3.js";
+} from "./chunk.YWHYMKYI.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";
@@ -217,14 +218,14 @@ var DSAInternalDateField = class extends ShoelaceElement {
   }
   handleChange() {
     const previousValue = this.value;
-    const selectedDay = this.dayInput.value;
-    const selectedMonth = this.monthInput.value;
-    const selectedYear = this.yearInput.value;
-    const tentativeDate = `${selectedYear}-${selectedMonth}-${selectedDay}`;
-    if (this.selectedDay > this.dayInput.max) {
-      this.selectedDay = this.dayInput.max;
+    let tempSelectedDay = this.dayInput.value;
+    const tempSelectedMonth = this.monthInput.value;
+    const tempSelectedYear = this.yearInput.value;
+    if (tempSelectedDay > this.dayInput.max) {
+      tempSelectedDay = this.dayInput.max;
     }
-    if (selectedDay === "" && selectedMonth === "" && selectedYear === "") {
+    const tentativeDate = `${tempSelectedYear}-${tempSelectedMonth}-${tempSelectedDay}`;
+    if (tempSelectedDay === "" && tempSelectedMonth === "" && tempSelectedYear === "") {
       this.setCustomValidity("");
       this.value = "";
     } else if (!isValidDate(tentativeDate)) {
@@ -351,15 +352,14 @@ var DSAInternalDateField = class extends ShoelaceElement {
       this.selectedMonth = "";
       this.selectedYear = "";
     } else {
-      this.selectedDay = `${new Date(this.value).getDate()}`.padStart(2, "0");
-      this.selectedMonth = `${new Date(this.value).getMonth() + 1}`.padStart(
+      this.selectedDay = `${getDateFromISO(this.value).getDate()}`.padStart(
         2,
         "0"
       );
-      this.selectedYear = `${new Date(this.value).getFullYear()}`.padStart(
-        4,
-        "0"
-      );
+      this.selectedMonth = `${getDateFromISO(this.value).getMonth() + 1}`.padStart(2, "0");
+      this.selectedYear = `${getDateFromISO(
+        this.value
+      ).getFullYear()}`.padStart(4, "0");
     }
     await this.updateComplete;
     this.setCustomValidity("");
@@ -411,14 +411,15 @@ var DSAInternalDateField = class extends ShoelaceElement {
     this.formControlController.updateValidity();
   }
   renderSpinbutton(part) {
+    var _a, _b;
     let className = "";
     let ariaLabel = "";
     let min = 1;
     let max;
     let placeholder;
     let value;
-    const minDate = new Date(this.min);
-    const maxDate = new Date(this.max);
+    const minDate = getDateFromISO((_a = this.min) != null ? _a : "");
+    const maxDate = getDateFromISO((_b = this.max) != null ? _b : "");
     const minYear = this.min ? minDate.getFullYear() : 1900;
     const maxYear = this.max ? maxDate.getFullYear() : 2500;
     const minMonth = minYear === maxYear ? minDate.getMonth() + 1 : 1;

package/dist/chunks/{chunk.2O3M7HBZ.js → chunk.O4ZSTSXZ.js}

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

package/dist/chunks/{chunk.3NNE7XGI.js → chunk.OCK5L55T.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.CWDSCTUA.js → chunk.OHDR6G6J.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.FK5HR2F4.js → chunk.OVOTWPG3.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.OJ5RKDE5.js → chunk.OWV6XZFR.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.GXQRCYQE.js";
 import {
   table_header_cell_styles_default
-} from "./chunk.M4ZPYQVZ.js";
+} from "./chunk.ZRW5L2NC.js";
 import {
   DSATableCell
 } from "./chunk.YQAIHWUH.js";
@@ -98,7 +98,7 @@ var DSATableHeaderCell = class extends DSATableCell {
       return html`<dsa-skeleton effect=${this.skeletonEffect}></dsa-skeleton>`;
     }
     if (this.sortable) {
-      const visualSortDirection = this.isHovered || this.isFocused ? this.nextSortDirection : this.sortDirection;
+      const visualSortDirection = (this.isHovered || this.isFocused) && this.sortDirection === "none" ? this.nextSortDirection : this.sortDirection;
       return html`
         <button
           type="button"

package/dist/chunks/{chunk.7KMMSAQN.js → chunk.P7SN3TMY.js}

@@ -1,9 +1,9 @@
 import {
   DSATableRow
-} from "./chunk.ITUK4PON.js";
+} from "./chunk.2JCMUNW4.js";
 import {
   table_header_row_styles_default
-} from "./chunk.OWG5FD2H.js";
+} from "./chunk.GI3JNOHH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.77ECBNUM.js → chunk.PD6ETZGV.js}

@@ -4,15 +4,15 @@ import {
 import {
   getStepIcon
 } from "./chunk.CCTWXABH.js";
-import {
-  a11yWarning
-} from "./chunk.PWL7QCVG.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.U7ZMMMJ3.js";
+} from "./chunk.YWHYMKYI.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";
@@ -92,7 +92,7 @@ var DSAStep = class extends ShoelaceElement {
     const tag = this.getTag();
     if (this.clickable && !hasTitle) {
       a11yWarning(
-        "When clickable, the `dsa-step` element must have either a `step-title` attribute or an elemennt in its `title` slot"
+        "<dsa-step> requires a `step-title` attribute or an element in its `title` slot for accessibility when clickable, "
       );
     }
     return html`

package/dist/chunks/{chunk.NPCMEZGE.js → chunk.QEZ5FSIU.js}

@@ -1,6 +1,6 @@
 import {
   LocalizeController
-} from "./chunk.U7ZMMMJ3.js";
+} from "./chunk.YWHYMKYI.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";

package/dist/chunks/{chunk.DANAZGRI.js → chunk.QG62LWYX.js}

@@ -4,6 +4,9 @@ import {
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";
@@ -34,6 +37,11 @@ var DSACard = class extends ShoelaceElement {
   render() {
     const isLink = this.isLink();
     const tag = isLink ? literal`a` : literal`div`;
+    if (isLink && !this.hasSlotController.test("header")) {
+      a11yWarning(
+        "<dsa-card> requires a header slot for accessibility when used as a link"
+      );
+    }
     return html`
       <div
         part="base"

package/dist/chunks/{chunk.5EBCNG2J.js → chunk.RVCSQIWF.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" classname="form-control__description">
+                    ${this.description}
+                  </p>
+                ` : ""}
   
           ${this.error && !this.disabled && this.errorMessage !== "" ? renderFormElementErrors(this.errorMessage) : ""}
           </div>
@@ -131,9 +143,6 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], FormControlLayout.prototype, "disabled", 2);
-__decorateClass([
-  property()
-], FormControlLayout.prototype, "lang", 2);
 __decorateClass([
   property()
 ], FormControlLayout.prototype, "placeholder", 2);
@@ -164,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.EAYW5L6J.js → chunk.S6XG7G6X.js}

@@ -10,7 +10,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.CEGU6OTH.js → chunk.SA7GMM2I.js}

@@ -1,6 +1,6 @@
 import {
   FilterBase
-} from "./chunk.3SX7AERB.js";
+} from "./chunk.MWWI3AU2.js";
 import {
   filter_counter_styles_default
 } from "./chunk.WODSQYKQ.js";
@@ -91,7 +91,6 @@ var DSAFilterCounter = class extends FilterBase {
           max=${this.max}
           variant=${this.drawer ? "layer" : "base"}
           title=${this.label}
-          aria-label=${this.label}
         ></dsa-input>
         <dsa-icon-button
           name="add"

package/dist/chunks/{chunk.54KX7M52.js → chunk.SRP6V7OW.js}

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

package/dist/chunks/{chunk.B2KV6DSI.js → chunk.TK77JBEH.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.BCLTC7W4.js → chunk.TKV7I7MM.js}

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

package/dist/chunks/{chunk.LE5LHO5Y.js → chunk.TQJLTADP.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";
@@ -319,6 +319,7 @@ var select_styles_default = css`
     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,
@@ -340,6 +341,7 @@ var select_styles_default = css`
     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 {