@ds-autonomie/web-components 1.18.0 → 1.20.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @ds-autonomie/web-components
 
+## 1.20.0
+
+### Minor Changes
+
+- 4ebc866: `input` : ajout du type "amount"
+
+### Patch Changes
+
+- f48934c: "`dialog`: mise en avant du header"
+- 53ded62: `table-container` : ajout d'une variable `--toolbar-container-top` pour contrôler la position verticale de la barre d'outils
+- c6e8ebe: `combobox`: possibilité de désactiver le filtre, équivalence de 'oe' et 'œ'
+- 7af4f1b: `input` : correction de l'affichage de l'icône pour le type="time"
+- 72d7d26: `input-date`, `filter-date` : correction de la gestion des chaines de caractères vides
+- 41ec30a: `footer-sitemap` : suppression du role region quand aucun label n'est ajouté ; `drawer` : remplacement du tabindex 0 du conteneur par -1 ; `avatar` : suppression du role image quand aucun label n'est ajouté
+- 92fff06: `button`, `icon-button` : ajout d'un attribut `description`
+
+## 1.19.0
+
+### Minor Changes
+
+- 33a8faf: `combobox` : ajout de l'état readonly
+
+### Patch Changes
+
+- 3246724: `breadcrumb` : correction de l'alignement avec des icones
+- 03478ae: `combobox` : reset de la valeur et amélioration du style
+- d955ede: `step`, `stepper` : les étapes sont centrées en mode horizontal
+- 34c6cf6: `input` : affichage du texte d'aide et d'erreur avec le type date
+- ab09aa8: `card` : suppression de la bordure de l'en-tête
+
 ## 1.18.0
 
 ### Minor Changes

package/dist/chunks/{chunk.EY6DBOBY.js → chunk.3D63HEF5.js}

@@ -1,6 +1,6 @@
 import {
   select_styles_default
-} from "./chunk.NDQ5XCHJ.js";
+} from "./chunk.UZBA5RSV.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";
@@ -13,6 +13,9 @@ import {
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.ZQJVCRB2.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
@@ -30,9 +33,6 @@ import {
 import {
   watch
 } from "./chunk.6IH66JBY.js";
-import {
-  ifDefinedAndNotEmpty
-} from "./chunk.ZQJVCRB2.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/{chunk.L2L37MWZ.js → chunk.3FPXYDA5.js}

@@ -1,6 +1,6 @@
 import {
   getISOFormattedDate
-} from "./chunk.U7V5J6UX.js";
+} from "./chunk.DY6WZQNG.js";
 import {
   calendar_styles_default
 } from "./chunk.L5DEEGJU.js";

package/dist/chunks/{chunk.WSP5BYQP.js → chunk.3IJMYCGV.js}

@@ -5,7 +5,7 @@ import {
 } from "./chunk.7OLEA3GQ.js";
 import {
   input_mask_styles_default
-} from "./chunk.BNPEW3RO.js";
+} from "./chunk.74PVOVK5.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";
@@ -15,15 +15,15 @@ import {
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
 } from "./chunk.G3MRVMJ4.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";
-import {
-  ifDefinedAndNotEmpty
-} from "./chunk.ZQJVCRB2.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";
@@ -159,6 +159,15 @@ var DSAInputMask = class extends ShoelaceElement {
       });
     }
   }
+  getDescriptionIds() {
+    const ids = [
+      "input__prefix",
+      "input__suffix",
+      ...this.error ? ["error-text"] : [],
+      "help-text"
+    ];
+    return ids.join(" ");
+  }
   handleDisabledChange() {
     this.formControlController.setValidity(this.disabled);
   }
@@ -264,7 +273,7 @@ var DSAInputMask = class extends ShoelaceElement {
       "input-mask--empty": !this.value
     })}
           >
-          <slot name="prefix" part="prefix" class="input-mask__prefix"></slot>
+          <slot name="prefix" part="prefix" id="input__prefix" class="input-mask__prefix"></slot>
 
 
           <div class=${classMap({
@@ -301,7 +310,7 @@ var DSAInputMask = class extends ShoelaceElement {
               aria-label=${ifDefinedAndNotEmpty(
       hasLabel ? void 0 : this.title
     )}
-              aria-describedby=${this.error ? "input-mask error-text help-text" : "input-mask help-text"}
+              aria-describedby=${this.getDescriptionIds()}
               aria-invalid=${ifDefined(this.error ? "true" : void 0)}
               @change=${this.handleChange}
               @invalid=${this.handleInvalid}
@@ -311,7 +320,11 @@ var DSAInputMask = class extends ShoelaceElement {
               @blur=${this.handleBlur}
             />
 
-            ${hasSuffixIcon ? html`<slot name="suffix" class="input-mask__suffix"></slot>` : ""}
+            ${hasSuffixIcon ? html`<slot
+                    name="suffix"
+                    id="input__suffix"
+                    class="input-mask__suffix"
+                  ></slot>` : ""}
 
             ${hasClearIcon ? html`
                     <button

package/dist/chunks/{chunk.4Z3LVWYW.js → chunk.5H3FRLYG.js}

@@ -75,6 +75,10 @@ var icon_button_styles_default = css`
     height: 36px;
   }
 
+  .icon-button__description {
+    display: none;
+  }
+
   /*
   * Primary
   */

package/dist/chunks/{chunk.IEBTPGUT.js → chunk.6PNOLDUN.js}

@@ -1,6 +1,6 @@
 import {
   icon_button_styles_default
-} from "./chunk.4Z3LVWYW.js";
+} from "./chunk.5H3FRLYG.js";
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.ZQJVCRB2.js";
@@ -22,6 +22,7 @@ var DSAIconButton = class extends ShoelaceElement {
     this.hasFocus = false;
     this.disableTabIndex = false;
     this.label = "";
+    this.description = "";
     this.disabled = false;
     this.variant = "default";
     this.size = "medium";
@@ -101,6 +102,12 @@ var DSAIconButton = class extends ShoelaceElement {
         ></dsa-icon>
         <slot></slot>
       </${tag}>
+            ${this.description !== "" ? html`
+                    <p id="description" class="icon-button__description">
+                      ${this.description}
+                    </p>
+                  ` : ""}
+
     `;
   }
 };
@@ -135,6 +142,9 @@ __decorateClass([
 __decorateClass([
   property()
 ], DSAIconButton.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "description" })
+], DSAIconButton.prototype, "description", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DSAIconButton.prototype, "disabled", 2);

package/dist/chunks/{chunk.BNPEW3RO.js → chunk.74PVOVK5.js}

@@ -289,7 +289,7 @@ var input_mask_styles_default = css`
   .input-mask__prefix,
   .input-mask__suffix {
     color: var(--dsa-wc-input-icon-color);
-    cursor: pointer;
+    pointer-events: none;
   }
 
   .input-mask--empty .input-mask__clear {

package/dist/chunks/{chunk.SH26MYV3.js → chunk.7AAMT4XK.js}

@@ -1,6 +1,6 @@
 import {
   breadcrumb_item_styles_default
-} from "./chunk.PULHNCDM.js";
+} from "./chunk.MILDW5D6.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";

package/dist/chunks/{chunk.MNCPUPHX.js → chunk.7FYXPV3G.js}

@@ -7,7 +7,7 @@ import { css } from "lit";
 var step_styles_default = css`
   ${component_styles_default}
 
-  :host(:last-of-type) .step:after {
+  :host(:last-of-type) .step:after, :host(:first-of-type) .step:before {
     content: unset;
   }
 
@@ -15,7 +15,6 @@ var step_styles_default = css`
     display: grid;
     position: relative;
     align-content: start;
-    padding-right: var(--dsa-spacing-24);
   }
 
   .step-container__vertical {
@@ -37,9 +36,11 @@ var step_styles_default = css`
   .step-container .step {
     grid-column: 1;
     grid-row: 1;
+    justify-self: center;
   }
 
-  .step:after {
+  .step:after,
+  .step-container__horizontal .step:before {
     content: '';
     position: absolute;
     background-color: var(--dsa-wc-stepper-color-progress-default);
@@ -48,8 +49,17 @@ var step_styles_default = css`
 
   .step-container__horizontal .step:after {
     height: 1.4px;
-    right: var(--dsa-spacing-4);
-    width: calc(100% - calc(var(--dsa-spacing-4) + var(--dsa-spacing-32)));
+    left: calc(
+      50% + var(--dsa-wc-stepper-icon-size) / 2 + var(--dsa-spacing-4)
+    );
+    right: 0;
+  }
+  .step-container__horizontal .step:before {
+    height: 1.4px;
+    left: 0;
+    right: calc(
+      50% + var(--dsa-wc-stepper-icon-size) / 2 + var(--dsa-spacing-4)
+    );
   }
 
   .step-container__vertical .step:after {
@@ -59,7 +69,15 @@ var step_styles_default = css`
   }
 
   .step-container__horizontal .step-title-container {
-    display: none;
+    text-align: center;
+  }
+
+  .step-container__horizontal .step-content-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding-inline: var(--dsa-spacing-8);
   }
 
   .step-container__vertical .step-content-container {
@@ -70,7 +88,11 @@ var step_styles_default = css`
     max-width: 300px;
   }
 
-  .step-container--has-title .step-title-container {
+  .step-container--has-title.step-container__horizontal .step-title-container {
+    display: flex;
+    align-items: center;
+  }
+  .step-container--has-title.step-container__vertical .step-title-container {
     display: flex;
   }
 
@@ -83,12 +105,18 @@ var step_styles_default = css`
     --dsa-wc-internal-icon-button-padding: var(--dsa-spacing-2);
 
     display: inline-block;
-    margin-left: auto;
     position: relative;
-    top: 2px;
+    top: 1px;
+  }
+  .step-container__horizontal .step-tooltip {
+    margin-left: var(--dsa-spacing-8);
+  }
+  .step-container__vertical .step-tooltip {
+    margin-left: auto;
   }
 
-  .step--complete:after {
+  .step--complete:after,
+  .step--complete:before {
     background-color: var(--dsa-wc-stepper-color-progress-complete);
   }
 

package/dist/chunks/{chunk.4IXJVHZ5.js → chunk.AV26MFR7.js}

@@ -1,6 +1,6 @@
 import {
   breadcrumb_styles_default
-} from "./chunk.IGYXUK7A.js";
+} from "./chunk.F6RRFM4P.js";
 import {
   LocalizeController
 } from "./chunk.G3MRVMJ4.js";
@@ -37,11 +37,10 @@ var DSABreadcrumb = class extends ShoelaceElement {
     return html`
       <nav
         part="base"
-        class="breadcrumb"
         aria-label=${this.localize.term("youAreHere")}
         role="navigation"
       >
-        <div role="list">
+        <div role="list" class="breadcrumb__list">
           <slot @slotchange=${this.handleSlotChange}></slot>
         </div>
       </nav>

package/dist/chunks/{chunk.KZ65ORAL.js → chunk.BPEI35FP.js}

@@ -91,6 +91,10 @@ var button_styles_default = css`
     border: solid 1px;
   }
 
+  .button__description {
+    display: none;
+  }
+
   /*
    * Primary
    */

package/dist/chunks/{chunk.HF2BKQ7K.js → chunk.CXQ4OD4X.js}

@@ -7,10 +7,13 @@ import {
 } from "./chunk.EMIT7S33.js";
 import {
   dialog_styles_default
-} from "./chunk.JH5GMUO7.js";
+} from "./chunk.R426GAXO.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.ZQJVCRB2.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
@@ -28,9 +31,6 @@ import {
 import {
   watch
 } from "./chunk.6IH66JBY.js";
-import {
-  ifDefinedAndNotEmpty
-} from "./chunk.ZQJVCRB2.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/{chunk.U7V5J6UX.js → chunk.DY6WZQNG.js}

@@ -1,6 +1,6 @@
 // src/utilities/helpers.ts
 function normalizeStr(str) {
-  const withoutAccents = str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+  const withoutAccents = str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/œ/g, "oe");
   const lowerCaseString = withoutAccents.toLowerCase();
   const trimmedString = lowerCaseString.replace(/\s+/g, " ").trim();
   return trimmedString;

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

@@ -7,7 +7,7 @@ import { css } from "lit";
 var breadcrumb_styles_default = css`
   ${component_styles_default}
 
-  .breadcrumb {
+  .breadcrumb__list {
     display: flex;
     align-items: center;
     flex-wrap: wrap;

package/dist/chunks/{chunk.4QUJBAX3.js → chunk.FOGBKOQM.js}

@@ -148,7 +148,7 @@ var combobox_styles_default = css`
       );
   }
 
-  .select--on-base:hover:not(.select--disabled) .select__combobox {
+  .select--on-base:hover:not(.select--disabled):not(.select--readonly) .select__combobox {
     border-color: var(
       --dsa-wc-internal-combobox-on-base-hover-border-color,
       var(--dsa-wc-input-on-base-border-color-hover)
@@ -168,28 +168,29 @@ var combobox_styles_default = css`
     outline: none;
   }
 
+  .select--on-base.select--readonly .select__combobox {
+    background-color: var(--dsa-wc-input-on-base-read-only-background-color);
+    border-color: var(--dsa-wc-input-on-base-read-only-border-color);
+    cursor: default;
+  }
+
   .select--on-base:not(.select--disabled).select--open .select__combobox,
   .select--on-base:not(.select--disabled).select--focused .select__combobox {
     outline: var(--dsa-wc-focus-ring);
     outline-offset: var(--dsa-wc-focus-ring-offset);
     z-index: 2;
-
-    background-color: var(
-      --dsa-wc-internal-combobox-on-base-active-background-color,
-      inherit
-    );
   }
 
   .select--on-base select__prefix {
     color: var(--dsa-wc-input-on-base-text-field-input-color);
   }
 
-  .select--error.select--on-base:not(.select--disabled) .select__combobox {
+  .select--error.select--on-base:not(.select--disabled):not(.select--readonly) .select__combobox {
     background-color: var(--dsa-wc-input-on-base-background-color-error);
     border-color: var(--dsa-wc-input-on-base-border-color-error);
   }
 
-  .select--error.select--on-base:hover:not(.select--disabled)
+  .select--error.select--on-base:hover:not(.select--disabled):not(.select--readonly)
     .select__combobox {
     border-color: var(--dsa-wc-input-on-base-border-color-error-hover);
   }
@@ -228,15 +229,16 @@ var combobox_styles_default = css`
     outline: none;
   }
 
+  .select--on-layer.select--readonly .select__combobox {
+    background-color: var(--dsa-wc-input-on-layer-read-only-background-color);
+    border-color: var(--dsa-wc-input-on-layer-read-only-border-color);
+    cursor: default;
+  }
+
   .select--on-layer:not(.select--disabled).select--open .select__combobox,
   .select--on-layer:not(.select--disabled).select--focused .select__combobox {
     outline: var(--dsa-wc-focus-ring);
     outline-offset: var(--dsa-wc-focus-ring-offset);
-
-    background-color: var(
-      --dsa-wc-internal-combobox-on-layer-active-background-color,
-      inherit
-    );
   }
 
   .select--on-layer select__prefix {
@@ -331,6 +333,8 @@ var combobox_styles_default = css`
 
   .select__clear:focus {
     outline: var(--dsa-wc-combobox-clear-button-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+    border-radius: 1px;
   }
 
   /* Expand icon */
@@ -341,6 +345,7 @@ var combobox_styles_default = css`
     transition: var(--dsa-wc-transition-medium) rotate ease;
     rotate: 0;
     color: var(--dsa-wc-input-icon-color);
+    margin-left: var(--dsa-spacing-4);
   }
 
   .select--error .select__expand-icon {