@ds-autonomie/web-components 2.3.0 → 2.4.0

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @ds-autonomie/web-components
 
+## 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
+
+- a10fedd: `tree-item`, `progress-circle`, `table-of-contents` : amélioration du cycle de vie
+- 1810325: `input` : résolution du bug du type="date" avec les fuseaux horaires
+- 4678044: `radio` : amélioration de l'affichage en mode contraste élevé
+- 98a161a: Mise à jour des dépendances
+- de9d030: `input-time`: retrait de la scrollbar verticale sur la page
+
 ## 2.3.0
 
 ### Minor 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.D2LMY47K.js → chunk.3OSWL542.js}

@@ -101,6 +101,15 @@ var radio_icon_styles_default = i`
     border-color: var(--dsa-wc-radio-border-color-readonly);
     background-color: var(--dsa-wc-radio-color-readonly);
   }
+
+  @media (forced-colors: active) {
+    .radio__control--checked {
+      border-color: Highlight;
+    }
+    .radio__control--checked .radio__inner {
+      background-color: Highlight;
+    }
+  }
 `;
 
 // src/internal/components/radio-icon/radio-icon.ts

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

@@ -10,6 +10,12 @@ import {
 import {
   LocalizeController
 } from "./chunk.CAMVBH5H.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.B6GVVW66.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
 import {
   e
 } from "./chunk.IKHG7XGO.js";
@@ -51,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"
@@ -62,7 +73,7 @@ var DSAFileUploadItem = class extends ShoelaceElement {
       "file-item-container--large": this.size === "large"
     })}
       >
-        <article part="file-item" aria-describedby="error-text">
+        <article part="file-item">
           <slot part="label" @slotchange=${this.handleDefaultSlotChange}></slot>
           <slot
             part="upload-indicator"
@@ -78,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>

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.ZVQQ7DON.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";
@@ -64,8 +64,6 @@ var DSATableOfContents = class extends ShoelaceElement {
     document.removeEventListener("mousedown", this.handleDocumentMouseDown);
   }
   async firstUpdated() {
-    this.allLinks = this.cloneSlottedLinks();
-    this.updateCurrentSection();
     this.observeAttributeChanges();
     if (this.mobile) {
       this.content.hidden = !this.open;

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";

package/cdn/chunks/{chunk.ERQYJQKU.js → chunk.75VU5MNL.js}

@@ -1,12 +1,12 @@
 import {
   DSASelect
-} from "./chunk.WE7BT7PI.js";
+} from "./chunk.WD2ZD2TZ.js";
 import {
   getPhoneConfig
-} from "./chunk.65HTBW2L.js";
+} from "./chunk.YKKP7YAT.js";
 import {
   input_phone_styles_default
-} from "./chunk.WY2HI4TL.js";
+} from "./chunk.M3TRPPPZ.js";
 import {
   frenchNumberPrefix,
   phonePrefixOptions
@@ -18,7 +18,7 @@ import {
 } from "./chunk.7OLEA3GQ.js";
 import {
   FormControlLayout
-} from "./chunk.SF3YU6PZ.js";
+} from "./chunk.JZOEQBF7.js";
 import {
   l
 } from "./chunk.7PPSHHT2.js";
@@ -209,6 +209,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", "");
@@ -377,6 +383,7 @@ var DSAInputPhone = class extends FormControlLayout {
               name=${ifDefinedAndNotEmpty(this.name)}
               ?disabled=${this.disabled}
               ?readonly=${this.readonly}
+              aria-disabled=${o(this.readonly ? "true" : void 0)}
               ?required=${this.required}
               minlength=${o(this.placeholder.length)}
               maxlength=${o(this.placeholder.length)}
@@ -390,7 +397,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=${o(this.error ? "true" : void 0)}
               @change=${this.handleChange}
               @keyup=${this.handleDocumentKeyUp}

package/cdn/chunks/{chunk.HZJEKORW.js → chunk.7YE2BWH2.js}

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

package/cdn/chunks/{chunk.THMGZ3JS.js → chunk.A27ADPHB.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.KXKV4FIS.js → chunk.A5QRPK4Q.js}

@@ -130,7 +130,10 @@ var DSATable = class extends ShoelaceElement {
     }
   }
   handleSizeChange() {
-    const allRows = this.querySelectorAll(this.selectorAllRows);
+    const allRows = [
+      ...this.querySelectorAll(this.selectorAllRows),
+      ...this.querySelectorAll(this.selectorHeaderRow)
+    ];
     allRows.forEach((row) => {
       row.size = this.size;
     });

package/cdn/chunks/{chunk.Y3KT5GTU.js → chunk.AJFNFADL.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.ER6BIHKN.js";
 import {
   DSATable
-} from "./chunk.KXKV4FIS.js";
+} from "./chunk.A5QRPK4Q.js";
 import {
   LoadingStateElement
 } from "./chunk.A4FPLOFR.js";