@ds-autonomie/web-components 2.4.1 → 2.5.1

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @ds-autonomie/web-components
 
+## 2.5.1
+
+### Patch Changes
+
+- 20ad518: `input`, `input-phone`, `input-otp` : communalisation du code
+- 5e7de2a: `checkbox`: correction d'un bug empechant l'utilisation de liens dans le label
+- 0258fb3: `tab-group`: retrait du focus sur les flèches de scroll et le groupe
+- b163af1: `checkbox-group`: attente du chargement des composants enfants
+  `tab-group`: attente du chargement des composants enfants
+  `tree`: attente du chargement des composants enfants
+- 7387de1: `table-header-cell`: restriction de l'effet de survol aux tableaux triables, élargissement du bouton de tri
+
+## 2.5.0
+
+### Minor Changes
+
+- a4cec6a: `card-nav`, `card-nav-item`, `card-nav-accordion` : ajout des composants
+- 8f0db29: `card-content`: ajout du composant
+- 6f31568: `fieldset` : ajout du composant
+- 56b6786: `visually-hidden`, `resize-observer`, `mutation-observer`, `relative-time` : ajout d'éléments utilitaires
+- a7e4dcb: `tag-button` : ajout du composant
+
+### Patch Changes
+
+- 32a1695: `dropdown`: retrait de l'attribut obsolète stay-open-on-select
+- 3e0d4e3: `combobox` : restitution de l'option "Voir plus" au lecteur d'écran ; `tag` : suppression d'un attribut title inutile
+- 687c17e: `header` : résolution d'un problème d'affichage du logo sur Safari
+- 34774d5: `header` : augmentation de la taille "large" du logo
+- e3e6300: `input`: amélioration de la gestion des méthodes stepUp et stepDown
+  `input` type "time": implémentation des méthodes stepUp et stepDown, ajout d'une transcription de la valeur
+- f486d2f: `tab-group` : prise en compte des changements dynamiques des attributs `active` des dsa-tab enfants
+- 618a76a: `combobox` : résolution d'une erreur de mise à jour des la liste d'option en cas de slotchange
+- 5eac37f: `tooltip`: ajout automatique d'une description accessible à l'élément cible
+- 925c802: `input` : correction du retour de valueAsNumber pour le type amount
+- 2a1679f: `menu-item`: élargissement de l'attribut "current" au type "button"
+
 ## 2.4.1
 
 ### Patch Changes

package/cdn/chunks/{chunk.SXO3JE2C.js → chunk.2BQQJKFU.js}

@@ -1,6 +1,6 @@
 import {
   DSASelect
-} from "./chunk.NMGNR4EL.js";
+} from "./chunk.SS3GSU3M.js";
 import {
   getPhoneConfig
 } from "./chunk.YKKP7YAT.js";
@@ -17,17 +17,11 @@ import {
   stripSpecialChars
 } from "./chunk.7OLEA3GQ.js";
 import {
-  FormControlLayout
-} from "./chunk.E73QKLNL.js";
+  InputBase
+} from "./chunk.YGJ3KERC.js";
 import {
   l
 } from "./chunk.7PPSHHT2.js";
-import {
-  defaultValue
-} from "./chunk.YY5FKN3H.js";
-import {
-  FormControlController
-} from "./chunk.3NWILHZZ.js";
 import {
   LocalizeController
 } from "./chunk.CAMVBH5H.js";
@@ -57,14 +51,10 @@ import {
 } from "./chunk.4ZGVANML.js";
 
 // src/components/input-phone/input-phone.ts
-var DSAInputPhone = class extends FormControlLayout {
+var DSAInputPhone = class extends InputBase {
   constructor() {
     super(...arguments);
-    this.formControlController = new FormControlController(this, {
-      assumeInteractionOn: ["dsa-blur", "dsa-input"]
-    });
     this.localize = new LocalizeController(this);
-    this.hasFocus = false;
     this.maskedNumber = "";
     this.phoneConfig = getPhoneConfig("+33");
     this.placeholder = this.phoneConfig.placeholder;
@@ -72,8 +62,6 @@ var DSAInputPhone = class extends FormControlLayout {
     this.value = "";
     this.phonePrefix = "+33";
     this.phoneNumber = "";
-    this.defaultValue = "";
-    this.clearable = false;
     this.inputPrefix = "";
     this.placement = "bottom-start";
   }
@@ -85,27 +73,20 @@ var DSAInputPhone = class extends FormControlLayout {
       patternMatch = matches !== null;
     }
     const validityState = {
-      badInput: this.inputEl.validity.badInput,
-      customError: this.inputEl.validity.customError,
+      badInput: this.input.validity.badInput,
+      customError: this.input.validity.customError,
       patternMismatch: !patternMatch,
-      rangeOverflow: this.inputEl.validity.rangeOverflow,
-      rangeUnderflow: this.inputEl.validity.rangeUnderflow,
-      stepMismatch: this.inputEl.validity.stepMismatch,
-      tooLong: this.inputEl.validity.tooLong,
-      tooShort: this.inputEl.validity.tooShort,
-      typeMismatch: this.inputEl.validity.typeMismatch,
-      valid: patternMatch !== void 0 ? patternMatch : this.inputEl.validity.valid,
-      valueMissing: this.inputEl.validity.valueMissing
+      rangeOverflow: this.input.validity.rangeOverflow,
+      rangeUnderflow: this.input.validity.rangeUnderflow,
+      stepMismatch: this.input.validity.stepMismatch,
+      tooLong: this.input.validity.tooLong,
+      tooShort: this.input.validity.tooShort,
+      typeMismatch: this.input.validity.typeMismatch,
+      valid: patternMatch !== void 0 ? patternMatch : this.input.validity.valid,
+      valueMissing: this.input.validity.valueMissing
     };
     return validityState;
   }
-  /** Gets the validation message */
-  get validationMessage() {
-    return this.inputEl.validationMessage;
-  }
-  firstUpdated() {
-    this.formControlController.updateValidity();
-  }
   connectedCallback() {
     super.connectedCallback();
     this.defaultValue = this.value;
@@ -116,7 +97,7 @@ var DSAInputPhone = class extends FormControlLayout {
     );
   }
   handleDocumentKeyUp() {
-    const strippedValue = stripSpecialChars(this.inputEl.value);
+    const strippedValue = stripSpecialChars(this.input.value);
     const newValue = maskedValueToRawValue(
       strippedValue,
       this.phoneConfig.mask
@@ -124,7 +105,7 @@ var DSAInputPhone = class extends FormControlLayout {
     const maskedValue = rawValueToMaskedValue(newValue, this.placeholder);
     this.phoneNumber = newValue;
     this.maskedNumber = maskedValue;
-    this.inputEl.value = maskedValue;
+    this.input.value = maskedValue;
     this.updateValue();
     this.formControlController.updateValidity();
     this.emit("dsa-input");
@@ -177,28 +158,6 @@ var DSAInputPhone = class extends FormControlLayout {
       this.emit("dsa-change");
     }
   }
-  handleKeyDown(event) {
-    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
-    if (event.key === "Enter" && !hasModifier) {
-      setTimeout(() => {
-        if (!event.defaultPrevented && !event.isComposing) {
-          this.formControlController.submit();
-        }
-      });
-    }
-  }
-  handleFocus() {
-    this.hasFocus = true;
-    this.emit("dsa-focus");
-  }
-  handleBlur() {
-    this.hasFocus = false;
-    this.emit("dsa-blur");
-  }
-  handleInvalid(event) {
-    this.formControlController.setValidity(false);
-    this.formControlController.emitInvalidEvent(event);
-  }
   // Clear Icon handlers
   handleClearIconClick(event) {
     this.phonePrefix = "+33";
@@ -206,7 +165,7 @@ var DSAInputPhone = class extends FormControlLayout {
     this.emit("dsa-clear");
     this.emit("dsa-input");
     this.emit("dsa-change");
-    this.inputEl.focus();
+    this.input.focus();
     event.stopPropagation();
   }
   getDescriptionIds() {
@@ -240,37 +199,10 @@ var DSAInputPhone = class extends FormControlLayout {
   handlePhoneChange() {
     this.updateValue();
   }
-  /** Sets focus on the input. */
-  focus(options) {
-    this.inputEl.focus(options);
-  }
-  /** Removes focus from the input. */
-  blur() {
-    this.inputEl.blur();
-  }
-  /** Selects all the text in the input. */
-  select() {
-    this.inputEl.select();
-  }
-  /** Sets the start and end positions of the text selection (0-based). */
-  setSelectionRange(selectionStart, selectionEnd, selectionDirection = "none") {
-    this.inputEl.setSelectionRange(
-      selectionStart,
-      selectionEnd,
-      selectionDirection
-    );
-  }
-  /** Replaces a range of text with a new string. */
-  setRangeText(replacement, start, end, selectMode) {
-    this.inputEl.setRangeText(replacement, start, end, selectMode);
-    if (this.phoneNumber !== this.inputEl.value) {
-      this.phoneNumber = this.inputEl.value;
-    }
-  }
   /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
   checkValidity() {
     var _a;
-    const isValidInput = (_a = this.inputEl) == null ? void 0 : _a.checkValidity();
+    const isValidInput = (_a = this.input) == null ? void 0 : _a.checkValidity();
     if (this.phoneNumber.length === 0) {
       return isValidInput != null ? isValidInput : false;
     }
@@ -278,14 +210,10 @@ var DSAInputPhone = class extends FormControlLayout {
     const patternMatch = matches !== null;
     return patternMatch;
   }
-  /** Gets the associated form, if one exists. */
-  getForm() {
-    return this.formControlController.getForm();
-  }
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
   reportValidity() {
     var _a;
-    const isValidInput = (_a = this.inputEl) == null ? void 0 : _a.reportValidity();
+    const isValidInput = (_a = this.input) == null ? void 0 : _a.reportValidity();
     if (this.phoneNumber.length === 0) {
       return isValidInput != null ? isValidInput : false;
     }
@@ -293,11 +221,6 @@ var DSAInputPhone = class extends FormControlLayout {
     const patternMatch = matches !== null;
     return patternMatch;
   }
-  /** Sets a custom validation message. Pass an empty string to restore validity. */
-  setCustomValidity(message) {
-    this.inputEl.setCustomValidity(message);
-    this.formControlController.updateValidity();
-  }
   renderInput() {
     var _a;
     const hasLabelSlot = this.hasSlotController.test("label");
@@ -426,13 +349,10 @@ var DSAInputPhone = class extends FormControlLayout {
 DSAInputPhone.styles = input_phone_styles_default;
 __decorateClass([
   e(".input-phone__control")
-], DSAInputPhone.prototype, "inputEl", 2);
+], DSAInputPhone.prototype, "input", 2);
 __decorateClass([
   e(".input-phone__select")
 ], DSAInputPhone.prototype, "phonePrefixEl", 2);
-__decorateClass([
-  r()
-], DSAInputPhone.prototype, "hasFocus", 2);
 __decorateClass([
   r()
 ], DSAInputPhone.prototype, "maskedNumber", 2);
@@ -454,21 +374,9 @@ __decorateClass([
 __decorateClass([
   n({ attribute: false })
 ], DSAInputPhone.prototype, "phoneNumber", 2);
-__decorateClass([
-  defaultValue()
-], DSAInputPhone.prototype, "defaultValue", 2);
-__decorateClass([
-  n({ type: Boolean })
-], DSAInputPhone.prototype, "clearable", 2);
 __decorateClass([
   n({ attribute: "input-prefix" })
 ], DSAInputPhone.prototype, "inputPrefix", 2);
-__decorateClass([
-  n({ type: Boolean })
-], DSAInputPhone.prototype, "autofocus", 2);
-__decorateClass([
-  n()
-], DSAInputPhone.prototype, "enterkeyhint", 2);
 __decorateClass([
   n({ reflect: true })
 ], DSAInputPhone.prototype, "placement", 2);

package/cdn/chunks/{chunk.Y5RTMSTB.js → chunk.2S3446TB.js}

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

package/cdn/chunks/{chunk.EZ2CTTR3.js → chunk.3E3HJ2GB.js}

@@ -100,9 +100,9 @@ __decorateClass([
 ], DSAMutationObserver.prototype, "handleDisabledChange", 1);
 __decorateClass([
   watch("attr", { waitUntilFirstUpdate: true }),
-  watch("attr-old-value", { waitUntilFirstUpdate: true }),
-  watch("char-data", { waitUntilFirstUpdate: true }),
-  watch("char-data-old-value", { waitUntilFirstUpdate: true }),
+  watch("attrOldValue", { waitUntilFirstUpdate: true }),
+  watch("charData", { waitUntilFirstUpdate: true }),
+  watch("charDataOldValue", { waitUntilFirstUpdate: true }),
   watch("childList", { waitUntilFirstUpdate: true })
 ], DSAMutationObserver.prototype, "handleChange", 1);
 DSAMutationObserver = __decorateClass([

package/cdn/chunks/{chunk.ZCBARTO2.js → chunk.3PDDINNE.js}

@@ -37,6 +37,12 @@ var DSAAnchorTag = class extends ShoelaceElement {
     this.target = "_self";
     this.size = "medium";
   }
+  connectedCallback() {
+    console.warn(
+      "The <dsa-anchor-tag> element is deprecated, and will be removed in the next major release. Please consider using the <dsa-tag-button> element instead."
+    );
+    super.connectedCallback();
+  }
   render() {
     if (!this.label) {
       a11yWarning(

package/cdn/chunks/{chunk.A5QRPK4Q.js → chunk.3XJTVFZ2.js}

@@ -1,6 +1,6 @@
 import {
   table_styles_default
-} from "./chunk.5BQ2BGS6.js";
+} from "./chunk.6KSC4CRL.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

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

@@ -14,7 +14,7 @@ import {
 } from "./chunk.2WRFDMKN.js";
 import {
   LocalizeController
-} from "./chunk.VARBZAJP.js";
+} from "./chunk.BMQ5WSY7.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";
@@ -42,7 +42,6 @@ var DSADropdown = class extends ShoelaceElement {
     this.open = false;
     this.placement = "bottom-start";
     this.disabled = false;
-    this.stayOpenOnSelect = false;
     this.skidding = 0;
     this.hoist = false;
   }
@@ -292,9 +291,6 @@ __decorateClass([
 __decorateClass([
   n({ type: Boolean, reflect: true })
 ], DSADropdown.prototype, "disabled", 2);
-__decorateClass([
-  n({ attribute: "stay-open-on-select", type: Boolean, reflect: true })
-], DSADropdown.prototype, "stayOpenOnSelect", 2);
 __decorateClass([
   n({ attribute: false })
 ], DSADropdown.prototype, "containingElement", 2);

package/cdn/chunks/{chunk.N7TSHDJG.js → chunk.3YELONZ5.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.VARBZAJP.js";
+} from "./chunk.BMQ5WSY7.js";
 import {
   e
 } from "./chunk.IKHG7XGO.js";

package/cdn/chunks/chunk.4OAG5UWA.js

@@ -0,0 +1,72 @@
+import {
+  component_styles_default
+} from "./chunk.PSQJDSB2.js";
+import {
+  i
+} from "./chunk.4KHZQZ3M.js";
+
+// src/components/card-nav/card-nav.styles.ts
+var card_nav_styles_default = i`
+  ${component_styles_default}
+
+  :host {
+    display: inline-block;
+  }
+
+  .card-nav {
+    border-radius: var(--dsa-radius-8);
+    border: 1px solid var(--dsa-wc-card-nav-border-color);
+    background-color: var(--dsa-wc-card-nav-background-color);
+    overflow: hidden;
+    color: var(--dsa-wc-card-nav-color);
+  }
+
+  .card-nav__media::slotted(img) {
+    display: block;
+    width: 100%;
+  }
+
+  /* Title block */
+  .card-nav__title-block {
+    display: flex;
+    align-items: center;
+    gap: var(--dsa-spacing-12);
+    padding: 1.25rem 1rem;
+  }
+  .title-block-text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dsa-spacing-8);
+  }
+  .title-block-text .title {
+    font: var(--dsa-font-large-bold);
+  }
+  .title-block-text .subtitle {
+    font: var(--dsa-font-medium-bold);
+    color: var(--dsa-wc-card-nav-subtitle-color);
+  }
+  .card-nav__title_icon::slotted(*) {
+    color: var(--dsa-wc-card-nav-icon-color);
+    flex-shrink: 0;
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .card-content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  ::slotted(*:last-child) {
+    --card-nav-item-border-width: 0px;
+    --card-nav-accordion-border-color: transparent;
+    --card-nav-accordion-border-color-hover: transparent;
+    --card-nav-accordion-border-color-transition-delay: var(
+      --dsa-wc-transition-medium
+    );
+  }
+`;
+
+export {
+  card_nav_styles_default
+};

package/cdn/chunks/{chunk.HBIJX2WM.js → chunk.4Q4LBN6D.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.Z3VIP662.js";
 import {
   FilterBase
-} from "./chunk.4ZEHBLJR.js";
+} from "./chunk.KNKNPTGU.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.YJBMFRB4.js → chunk.4UMO5YHQ.js}

@@ -24,7 +24,7 @@ import {
 } from "./chunk.2WRFDMKN.js";
 import {
   LocalizeController
-} from "./chunk.VARBZAJP.js";
+} from "./chunk.BMQ5WSY7.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.3OSWL542.js → chunk.53DHJKYL.js}

@@ -22,12 +22,6 @@ var radio_icon_styles_default = i`
     display: contents;
   }
 
-  :host::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-  }
-
   .radio__control--small {
     --toggle-size: var(--dsa-wc-radio-size-small);
     --toggle-inner-size: var(--dsa-wc-radio-inner-size-small);

package/cdn/chunks/{chunk.EB3VB5VL.js → chunk.5B3X2KU4.js}

@@ -29,7 +29,7 @@ import {
 } from "./chunk.2WRFDMKN.js";
 import {
   LocalizeController
-} from "./chunk.VARBZAJP.js";
+} from "./chunk.BMQ5WSY7.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";
@@ -229,7 +229,6 @@ var DSACombobox = class extends FormControlLayout {
     }
   }
   handleDefaultSlotChange() {
-    this.resetDisplayedOptionsCount();
     if (customElements.get(OPTION_TAG)) {
       this.allOptions = this.getAllOptions();
       this.filterOptions(this.displayLabel);
@@ -243,6 +242,7 @@ var DSACombobox = class extends FormControlLayout {
     } else {
       customElements.whenDefined(OPTION_TAG).then(() => this.handleDefaultSlotChange());
     }
+    this.resetDisplayedOptionsCount();
   }
   handleTagRemove(event, option) {
     event.stopPropagation();
@@ -445,8 +445,11 @@ var DSACombobox = class extends FormControlLayout {
         else if (currentOptionIndex < this.displayedOptionsCount - 1) {
           this.setCurrentOption(this.filteredOptions[currentOptionIndex + 1]);
         } else if (this.filteredOptions.length > this.displayedOptionsCount) {
-          this.setCurrentOption(void 0);
-          if (this.seeMoreOption) this.seeMoreOption.current = true;
+          if (this.seeMoreOption) {
+            this.setCurrentOption(this.seeMoreOption);
+          } else {
+            this.setCurrentOption(void 0);
+          }
         }
         break;
       case "ArrowUp":

package/cdn/chunks/chunk.5QJ7KDER.js

@@ -0,0 +1,124 @@
+import {
+  fieldset_styles_default
+} from "./chunk.QCPGBCQ3.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  watch
+} from "./chunk.4FQJ3QJK.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
+import {
+  e as e2
+} from "./chunk.IKHG7XGO.js";
+import {
+  ShoelaceElement,
+  e,
+  n,
+  t
+} from "./chunk.DZB6XUZ7.js";
+import {
+  x
+} from "./chunk.7HUC6BF3.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/fieldset/fieldset.ts
+var DSAFieldset = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "legend-title"
+    );
+    this.legendTitle = "";
+    this.variant = "base";
+    this.disabled = false;
+    this.horizontal = false;
+  }
+  updateChildrenDisabledState() {
+    var _a;
+    const children = (_a = this.defaultSlot) == null ? void 0 : _a.assignedElements();
+    children == null ? void 0 : children.forEach((child) => {
+      if ("disabled" in child) {
+        child.disabled = this.disabled;
+      }
+    });
+  }
+  handleSlotChange() {
+    this.updateChildrenDisabledState();
+  }
+  handleDisabledChange() {
+    this.updateChildrenDisabledState();
+  }
+  render() {
+    const hasLegendTitleSlot = this.hasSlotController.test("label");
+    const hasLegendTitle = this.legendTitle ? true : !!hasLegendTitleSlot;
+    if (!hasLegendTitle) {
+      a11yWarning(
+        "<dsa-fieldset> requires a legend-title attribute or a legend-title slot for accessibility"
+      );
+    }
+    return x`
+      <fieldset
+        role="group"
+        class=${e2({
+      fieldset: true,
+      "fieldset--on-base": this.variant === "base",
+      "fieldset--on-layer": this.variant === "layer",
+      "fieldset--horizontal": this.horizontal,
+      "fieldset--vertical": !this.horizontal
+    })}
+        aria-labelledby="legend"
+      >
+        <div id="legend" class="fieldset__legend">
+          <div class="fieldset__first-line">
+            <slot name="legend-title" class="fieldset__legend-title"
+              >${this.legendTitle}</slot
+            >
+            <slot name="tooltip" class="fieldset__tooltip"></slot>
+          </div>
+          <slot name="legend-subtitle" class="fieldset__legend-subtitle">
+            ${this.legendSubtitle}
+          </slot>
+        </div>
+
+        <div class="fieldset__content">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+      </fieldset>
+    `;
+  }
+};
+DSAFieldset.styles = fieldset_styles_default;
+__decorateClass([
+  e("slot:not([name])")
+], DSAFieldset.prototype, "defaultSlot", 2);
+__decorateClass([
+  n({ attribute: "legend-title" })
+], DSAFieldset.prototype, "legendTitle", 2);
+__decorateClass([
+  n({ attribute: "legend-subtitle" })
+], DSAFieldset.prototype, "legendSubtitle", 2);
+__decorateClass([
+  n({ reflect: true })
+], DSAFieldset.prototype, "variant", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], DSAFieldset.prototype, "disabled", 2);
+__decorateClass([
+  n({ type: Boolean })
+], DSAFieldset.prototype, "horizontal", 2);
+__decorateClass([
+  watch("disabled")
+], DSAFieldset.prototype, "handleDisabledChange", 1);
+DSAFieldset = __decorateClass([
+  t("dsa-fieldset")
+], DSAFieldset);
+
+export {
+  DSAFieldset
+};