@ds-autonomie/web-components 2.3.1 → 2.4.1

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @ds-autonomie/web-components
 
+## 2.4.1
+
+### Patch Changes
+
+- 068758d: `checkbox-group', `radio-group`, `input`: correction d'un bug entrainant l'affichage de la description accessible
+- 104e6a0: `dsa-table-container`: rattachement automatique des titres et tableaux
+- Updated dependencies [8e62bf0]
+  - @ds-autonomie/assets@1.4.5
+
+## 2.4.0
+
+### Minor Changes
+
+- 51bb00e: `accordion` : ajout d'un slot "actions"
+- 8895185: `table-caption` : ajout d'un attribut total-items-label
+- 656c514: Ajout de classes permettant de donner un style DSA à un tableau personnalisé
+- 9f374ff: `page-header` : ajout du composant en-tête de page; `tab-group` : possibilité de modifier le padding et la largeur maximale
+
+### Patch Changes
+
+- b64cfa8: `input`: correction de l'état de validité du type amount quand le champ est vide
+- e18885b: `input-phone` : correction du format de numéro pour la Polynésie française
+- ec2b955: Affichage de messages d'avertissement dans la console en cas d'oubli d'attributs impactant l'accessibilité"
+- 36bbf91: `combobox`: ajout d'un attribut permettant de limiter le nombre d'options affichées
+- 0f3e02c: `combobox` : suppression de la flèche si aucune option n'est chargée
+- 1958bc6: `input`, `filter-date` : résolution d'un bug lorsque la date du 1er janvier est sélectionnée
+- 07bf0b5: `combobox` : changement du comportement pour faciliter la sélection des suggestions
+- 5e218f7: `table-container`: ajout d'une annonce personnalisable à l'affichage de la barre d'actions
+- 6f9796e: `icon-button`: transformation des valeurs de tailles en unités responsives
+  `download-card`, `download-link`, `breadcrumb`, `combobox`, `filter`, `select`, `accordion`, `drawer`, `tab`: ajustement des tailles d'icones
+  `tag`, `anchor-tag`, `badge`: ajustement du padding, valeurs responsives
+  `calendar`: ajustement de la taille du panneau en responsive
+  `error-text`: ajustement de la taille de l'icône
+- ee489ab: `table-header-cell` : modification du comportement au hover/focus des en-têtes de colonnes triables
+- 224882f: `input`, `input-mask`, `input-otp`, `input-phone`, `textarea`, `select`, `combobox`, `checkbox-group`, `radio-group`: ajout d'un attribut permettant d'ajouter une description pour l'accessibilité
+- db8d8f9: `dsa-link` : amélioration des classes CSS pour les liens
+- c06a211: `checkbox-group`, `radio-group` : changement des attributs `aria-describedby` des fieldsets par `aria-labelledby` car la description n'était pas lue par les lecteurs d'écran.
+
 ## 2.3.1
 
 ### Patch Changes

package/cdn/chunks/{chunk.ZEPLEFIQ.js → chunk.2FOGPUI3.js}

@@ -1,12 +1,12 @@
 import {
   breadcrumb_item_styles_default
-} from "./chunk.ASMJ2LI6.js";
+} from "./chunk.KWRUGVRF.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.LICWCBKN.js";
+} from "./chunk.VARBZAJP.js";
 import {
   o
 } from "./chunk.YQLIIKLI.js";

package/cdn/chunks/chunk.2URJBNTF.js

@@ -0,0 +1,148 @@
+import {
+  component_styles_default
+} from "./chunk.PSQJDSB2.js";
+import {
+  i
+} from "./chunk.4KHZQZ3M.js";
+
+// src/components/page-header/page-header.styles.ts
+var page_header_styles_default = i`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+    --internal-page-header-padding-inline: var(
+      --page-header-padding-inline,
+      var(--dsa-wc-page-header-padding-x-mobile)
+    );
+  }
+
+  ::slotted(*) {
+    margin: 0;
+    padding: 0;
+    font-size: 100%;
+    font: inherit;
+  }
+
+  .page-header {
+    background-color: var(--dsa-wc-page-header-background);
+    color: var(--dsa-wc-page-header-color);
+    display: flex;
+    justify-content: center;
+    padding: var(--dsa-spacing-16) var(--internal-page-header-padding-inline)
+      var(--dsa-spacing-24);
+  }
+
+  .page-header__container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dsa-spacing-24);
+    width: 100%;
+    max-width: var(--page-header-max-width);
+  }
+
+  .backlink {
+    display: block;
+  }
+
+  .title-and-actions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dsa-spacing-16);
+  }
+
+  .title-icon::slotted(*) {
+    flex-shrink: 0;
+    width: var(--dsa-wc-page-header-title-icon-size-mobile);
+    height: var(--dsa-wc-page-header-title-icon-size-mobile);
+  }
+
+  .text-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dsa-spacing-16);
+  }
+
+  .text-first-line {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dsa-spacing-16);
+  }
+
+  .page-header--mobile .title {
+    font: var(--dsa-wc-page-header-title-font-mobile);
+  }
+  .page-header--desktop .title {
+    font: var(--dsa-wc-page-header-title-font-desktop);
+  }
+
+  .tags {
+    display: flex;
+    gap: var(--dsa-spacing-12);
+  }
+
+  .text-second-line {
+    display: flex;
+    align-items: baseline;
+  }
+  .page-header--mobile .text-second-line {
+    flex-direction: column;
+    gap: var(--dsa-spacing-8);
+  }
+  .page-header--desktop .text-second-line {
+    flex-direction: row;
+    gap: var(--dsa-spacing-16);
+  }
+  .subtitle {
+    font: var(--dsa-wc-page-header-subtitle-font);
+  }
+  .secondary-text {
+    font: var(--dsa-wc-page-header-secondary-text-font);
+    color: var(--dsa-wc-page-header-secondary-text-color);
+  }
+
+  .actions {
+    display: flex;
+    gap: var(--dsa-spacing-16);
+  }
+
+  /* 
+  * Desktop-specific styles 
+  */
+
+  .page-header--desktop {
+    --internal-page-header-padding-inline: var(
+      --page-header-padding-inline,
+      var(--dsa-wc-page-header-padding-x-desktop)
+    );
+    padding: var(--dsa-spacing-32) var(--internal-page-header-padding-inline)
+      var(--dsa-spacing-24);
+  }
+
+  .page-header--desktop .title-and-actions {
+    flex-direction: row;
+    gap: var(--dsa-spacing-12);
+  }
+
+  .page-header--desktop .title-icon::slotted(*) {
+    width: var(--dsa-wc-page-header-title-icon-size-desktop);
+    height: var(--dsa-wc-page-header-title-icon-size-desktop);
+  }
+
+  .page-header--desktop .text-content {
+    gap: var(--dsa-spacing-8);
+  }
+
+  .page-header--desktop .text-first-line {
+    flex-direction: row;
+    gap: var(--dsa-spacing-24);
+  }
+
+  .page-header--desktop .actions {
+    margin-left: auto;
+  }
+`;
+
+export {
+  page_header_styles_default
+};

package/cdn/chunks/{chunk.W4FOPJHU.js → chunk.2YVHHVLG.js}

@@ -13,6 +13,8 @@ var table_header_cell_styles_default = i`
     display: table-cell;
     padding: var(--dsa-wc-table-header-cell-padding-y)
       var(--dsa-wc-table-header-cell-padding-x);
+    border-block-end: var(--dsa-wc-table-cell-border-size) solid
+      var(--dsa-wc-table-cell-border-color);
     vertical-align: middle;
     text-align: start;
   }

package/cdn/chunks/{chunk.JEWSMUZM.js → chunk.3AD4AURN.js}

@@ -17,8 +17,17 @@ var table_header_row_styles_default = i`
     color: var(--dsa-wc-table-header-row-color);
   }
 
-  ::slotted(dsa-table-header-cell) {
-    block-size: var(--dsa-wc-table-header-row-height);
+  /* Sizes */
+  :host([size='small']) {
+    block-size: var(--dsa-wc-table-row-small-height);
+  }
+
+  :host([size='medium']) {
+    block-size: var(--dsa-wc-table-row-medium-height);
+  }
+
+  :host([size='large']) {
+    block-size: var(--dsa-wc-table-row-large-height);
   }
 
   [part~='column-checkbox'] {

package/cdn/chunks/{chunk.ISEH6AO6.js → chunk.3XJMTCX6.js}

@@ -1,5 +1,5 @@
 import {
-  o as o2
+  o
 } from "./chunk.6OFBSNBH.js";
 import {
   file_upload_item_styles_default
@@ -11,8 +11,11 @@ import {
   LocalizeController
 } from "./chunk.CAMVBH5H.js";
 import {
-  o
-} from "./chunk.YQLIIKLI.js";
+  ifDefinedAndNotEmpty
+} from "./chunk.B6GVVW66.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
 import {
   e
 } from "./chunk.IKHG7XGO.js";
@@ -54,6 +57,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 x`
       <div
         part="base"
@@ -65,11 +73,7 @@ var DSAFileUploadItem = class extends ShoelaceElement {
       "file-item-container--large": this.size === "large"
     })}
       >
-        <article
-          part="file-item"
-          aria-describedby="error-text"
-          aria-invalid=${o(this.error ? "true" : void 0)}
-        >
+        <article part="file-item">
           <slot part="label" @slotchange=${this.handleDefaultSlotChange}></slot>
           <slot
             part="upload-indicator"
@@ -85,6 +89,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 ? x`<dsa-icon name="delete" library="system"></dsa-icon>` : x`<dsa-icon name="close" library="system"></dsa-icon>`}
           </button>
@@ -102,7 +109,7 @@ var DSAFileUploadItem = class extends ShoelaceElement {
           >
             <div
               part="progress-bar-indicator"
-              style=${o2({ width: `${(_a = this.uploadProgress) != null ? _a : 0}%` })}
+              style=${o({ width: `${(_a = this.uploadProgress) != null ? _a : 0}%` })}
             ></div>
           </div>
         </article>

package/cdn/chunks/{chunk.GCLAPOSZ.js → chunk.45DY5Z6P.js}

@@ -14,7 +14,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.56W7VK2Z.js → chunk.4GWNV3R4.js}

@@ -28,26 +28,35 @@ var accordion_styles_default = i`
 
   .accordion__header {
     border-radius: inherit;
+    position: relative;
+    display: flex;
+    align-items: center;
   }
 
   .accordion__header-button {
-    display: flex;
-    align-items: center;
     border-radius: inherit;
+    margin-right: auto;
     padding: var(--dsa-wc-accordion-padding);
     user-select: none;
     cursor: pointer;
+    z-index: 5;
+  }
+  .accordion__header-button::after {
+    content: '';
+    position: absolute;
+    inset: 0;
   }
 
-  .accordion:not(.accordion--disabled):has(.accordion__header:hover) {
+  .accordion:not(.accordion--disabled):has(.accordion__header-button:hover) {
     border-color: var(--dsa-wc-accordion-hover-border-color);
   }
 
-  .accordion:not(.accordion--disabled) .accordion__header-button:hover {
+  .accordion:not(.accordion--disabled)
+    .accordion__header:has(.accordion__header-button:hover) {
     background-color: var(--dsa-wc-accordion-header-hover-background-color);
   }
 
-  .accordion__header-button:focus-visible {
+  .accordion__header:has(.accordion__header-button:focus-visible) {
     outline: var(--dsa-wc-focus-ring);
     outline-offset: var(--dsa-wc-focus-ring-offset);
     background-color: var(--dsa-wc-accordion-header-hover-background-color);
@@ -57,11 +66,15 @@ var accordion_styles_default = i`
     cursor: not-allowed;
   }
 
-  .accordion--disabled .accordion__header-button:focus-visible {
+  .accordion__header-button:focus-visible {
     outline: none;
     box-shadow: none;
   }
 
+  .accordion__summary-container {
+    display: contents;
+  }
+
   .accordion__summary {
     flex: 1 1 auto;
     display: flex;
@@ -70,10 +83,13 @@ var accordion_styles_default = i`
 
   .accordion__summary-icon {
     flex: 0 0 auto;
+
     display: flex;
     align-items: center;
     color: var(--dsa-wc-accordion-icon-color);
     transition: var(--dsa-wc-transition-medium) rotate ease;
+    font-size: var(--dsa-wc-accordion-icon-size);
+    padding: var(--dsa-wc-accordion-padding);
   }
 
   .accordion--open.accordion--chevron .accordion__summary-icon {
@@ -84,6 +100,13 @@ var accordion_styles_default = i`
     rotate: -90deg;
   }
 
+  .accordion__actions {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--dsa-spacing-12);
+    z-index: 10;
+  }
+
   .accordion--open .accordion__expand-icon,
   .accordion:not(.accordion--open) .accordion__collapse-icon {
     display: none;

package/cdn/chunks/{chunk.YDBMOXIS.js → chunk.4XTAL3PC.js}

@@ -1,6 +1,6 @@
 import {
   FilterBase
-} from "./chunk.4AMHKT45.js";
+} from "./chunk.4ZEHBLJR.js";
 import {
   filter_counter_styles_default
 } from "./chunk.BLJRNU3Y.js";
@@ -98,7 +98,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/cdn/chunks/{chunk.4AMHKT45.js → chunk.4ZEHBLJR.js}

@@ -15,10 +15,13 @@ import {
 } from "./chunk.2WRFDMKN.js";
 import {
   LocalizeController
-} from "./chunk.LICWCBKN.js";
+} from "./chunk.VARBZAJP.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
 import {
   ShoelaceElement,
   e,
@@ -212,6 +215,9 @@ var FilterBase = class extends ShoelaceElement {
   }
   // Common render methods
   renderTrigger() {
+    if (!this.label) {
+      a11yWarning("Filters require a label attribute for accessibility");
+    }
     return x` <dsa-filter-button
       slot="anchor"
       class="filter__trigger"

package/cdn/chunks/{chunk.BILEGEVX.js → chunk.5AF25B3X.js}

@@ -68,19 +68,19 @@ var anchor_tag_styles_default = i`
   .anchor-tag--small {
     font: var(--dsa-wc-tag-small-font-size);
     height: var(--dsa-wc-tag-small-height);
-    padding: 0 var(--dsa-wc-tag-small-padding-y);
+    padding: var(--dsa-wc-tag-small-padding);
   }
 
   .anchor-tag--medium {
     font: var(--dsa-wc-tag-medium-font-size);
     height: var(--dsa-wc-tag-medium-height);
-    padding: 0 var(--dsa-wc-tag-medium-padding-y);
+    padding: var(--dsa-wc-tag-medium-padding);
   }
 
   .anchor-tag--large {
     font: var(--dsa-wc-tag-large-font-size);
     height: var(--dsa-wc-tag-large-height);
-    padding: 0 var(--dsa-wc-tag-large-padding-y);
+    padding: var(--dsa-wc-tag-large-padding);
   }
 `;
 

package/cdn/chunks/{chunk.27YOIDOY.js → chunk.5LBMOJJI.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.TO65OMN5.js → chunk.5UVKMYSG.js}

@@ -1,9 +1,6 @@
 import {
   checkbox_group_styles_default
-} from "./chunk.O577BA4U.js";
-import {
-  a11yWarning
-} from "./chunk.PWL7QCVG.js";
+} from "./chunk.VZF3ZTED.js";
 import {
   renderFormElementErrors
 } from "./chunk.EY4WUNAJ.js";
@@ -19,6 +16,9 @@ import {
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
 import {
   e as e2
 } from "./chunk.IKHG7XGO.js";
@@ -52,6 +52,7 @@ var DSACheckboxGroup = class extends ShoelaceElement {
     this.defaultValue = [];
     this.label = "";
     this.helpText = "";
+    this.description = "";
     this.name = "option";
     this.value = [];
     this.form = "";
@@ -170,6 +171,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)
@@ -186,13 +193,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;
@@ -239,6 +239,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 x`
       <fieldset
         part="form-control"
@@ -254,8 +259,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 ? x`<dsa-visually-hidden id="label"
               ><slot name="label">${this.label}</slot></dsa-visually-hidden
@@ -311,6 +315,11 @@ var DSACheckboxGroup = class extends ShoelaceElement {
         </slot>
 
         ${this.error ? renderFormElementErrors(this.errorMessage) : ""}
+        ${this.description ? x`
+              <p id="description" class="form-control__description">
+                ${this.description}
+              </p>
+            ` : ""}
       </fieldset>
     `;
   }
@@ -337,6 +346,9 @@ __decorateClass([
 __decorateClass([
   n({ attribute: "help-text" })
 ], DSACheckboxGroup.prototype, "helpText", 2);
+__decorateClass([
+  n({ attribute: "description" })
+], DSACheckboxGroup.prototype, "description", 2);
 __decorateClass([
   n()
 ], DSACheckboxGroup.prototype, "name", 2);
@@ -399,9 +411,6 @@ __decorateClass([
 __decorateClass([
   watch("readonly")
 ], DSACheckboxGroup.prototype, "handleReadonlyChange", 1);
-__decorateClass([
-  watch("error")
-], DSACheckboxGroup.prototype, "handleErrorChange", 1);
 DSACheckboxGroup = __decorateClass([
   t("dsa-checkbox-group")
 ], DSACheckboxGroup);

package/cdn/chunks/{chunk.EEKS3ZN7.js → chunk.5VZE6TSA.js}

@@ -18,7 +18,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.TAKMMVMG.js → chunk.67KNPORK.js}

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

package/cdn/chunks/{chunk.5EYEXU6M.js → chunk.6FWACI3G.js}

@@ -1,6 +1,9 @@
 import {
   menu_accordion_styles_default
 } from "./chunk.HDRDFHGQ.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
@@ -15,10 +18,13 @@ import {
 } from "./chunk.2WRFDMKN.js";
 import {
   LocalizeController
-} from "./chunk.LICWCBKN.js";
+} from "./chunk.VARBZAJP.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
 import {
   e as e2
 } from "./chunk.IKHG7XGO.js";
@@ -40,6 +46,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;
   }
@@ -152,6 +159,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 x`
       <div
         part="base"

package/cdn/chunks/{chunk.US6UTTN5.js → chunk.6HLUBEKO.js}

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

package/cdn/chunks/{chunk.ZUJJYUHF.js → chunk.6XVWAOAW.js}

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