@ds-autonomie/web-components 2.4.0 → 2.5.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @ds-autonomie/web-components
 
+## 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
+
+- 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

package/cdn/chunks/{chunk.OSJ5I4FK.js → chunk.2FF44G4Y.js}

@@ -86,6 +86,11 @@ var input_time_styles_default = i`
     outline: var(--dsa-wc-focus-ring);
     outline-offset: var(--dsa-wc-focus-ring-offset);
   }
+
+  /* Value description for screen readers */
+  .input--time-description {
+    display: none;
+  }
 `;
 
 export {

package/cdn/chunks/{chunk.ICBLN3KB.js → chunk.2N65UIM6.js}

@@ -1,20 +1,20 @@
-import {
-  getDateFromISO,
-  isValidDate,
-  monthLength
-} from "./chunk.YBWQADCH.js";
 import {
   l
 } from "./chunk.7PPSHHT2.js";
 import {
   defaultValue
 } from "./chunk.YY5FKN3H.js";
+import {
+  getDateFromISO,
+  isValidDate,
+  monthLength
+} from "./chunk.YBWQADCH.js";
 import {
   FormControlController
 } from "./chunk.3NWILHZZ.js";
 import {
   LocalizeController
-} from "./chunk.VARBZAJP.js";
+} from "./chunk.BMQ5WSY7.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

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.ZHJDF2I3.js → chunk.3KJHZGAI.js}

@@ -1,15 +1,15 @@
 import {
   DSAOption
-} from "./chunk.Y5RTMSTB.js";
-import {
-  DSAInput
-} from "./chunk.UPVAZQNH.js";
+} from "./chunk.2S3446TB.js";
 import {
   filter_select_styles_default
 } from "./chunk.57V66KCM.js";
+import {
+  DSAInput
+} from "./chunk.5F7AUS4F.js";
 import {
   FilterBase
-} from "./chunk.4ZEHBLJR.js";
+} from "./chunk.KNKNPTGU.js";
 import {
   normalizeStr
 } from "./chunk.O4MZVDWB.js";

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.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.XLDTCR3W.js → chunk.5B3X2KU4.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.O4MZVDWB.js";
 import {
   FormControlLayout
-} from "./chunk.JZOEQBF7.js";
+} from "./chunk.E73QKLNL.js";
 import {
   combobox_styles_default
 } from "./chunk.FLMM3C4U.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.UPVAZQNH.js → chunk.5F7AUS4F.js}

@@ -1,6 +1,6 @@
 import {
   DSAInputTime
-} from "./chunk.EVFY55H5.js";
+} from "./chunk.HG4TPK7J.js";
 import {
   big_default,
   getOverridenIconDetails,
@@ -12,13 +12,13 @@ import {
 } from "./chunk.EF2VOGBL.js";
 import {
   DSAInputDate
-} from "./chunk.FLPTQ76Z.js";
+} from "./chunk.TY7NQYTC.js";
 import {
   input_styles_default
 } from "./chunk.L3ZYNSI3.js";
 import {
   FormControlLayout
-} from "./chunk.JZOEQBF7.js";
+} from "./chunk.E73QKLNL.js";
 import {
   l
 } from "./chunk.7PPSHHT2.js";
@@ -30,7 +30,7 @@ import {
 } from "./chunk.3NWILHZZ.js";
 import {
   LocalizeController
-} from "./chunk.VARBZAJP.js";
+} from "./chunk.BMQ5WSY7.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";
@@ -90,7 +90,11 @@ var DSAInput = class extends FormControlLayout {
   /** Gets or sets the current value as a number. Returns `NaN` if the value can't be converted. */
   get valueAsNumber() {
     var _a, _b;
-    return (_b = (_a = this.standardInput) == null ? void 0 : _a.valueAsNumber) != null ? _b : parseFloat(this.value);
+    if (this.type === "amount") {
+      return parseFloat(this.value.replace(",", "."));
+    } else {
+      return (_b = (_a = this.standardInput) == null ? void 0 : _a.valueAsNumber) != null ? _b : parseFloat(this.value);
+    }
   }
   set valueAsNumber(newValue) {
     const input = document.createElement("input");
@@ -100,7 +104,8 @@ var DSAInput = class extends FormControlLayout {
   }
   /** Gets the validity state object */
   get validity() {
-    return this.input.validity;
+    var _a, _b;
+    return (_b = (_a = this.input) == null ? void 0 : _a.validity) != null ? _b : true;
   }
   /** Gets the validation message */
   get validationMessage() {
@@ -246,7 +251,9 @@ var DSAInput = class extends FormControlLayout {
     this.formControlController.setValidity(this.disabled);
   }
   handleStepChange() {
-    this.standardInput.step = String(this.step);
+    if (this.input instanceof DSAInputTime) {
+      this.input.step = typeof this.step === "number" ? this.step : 60;
+    } else this.standardInput.step = String(this.step);
     this.formControlController.updateValidity();
   }
   async handleValueChange() {
@@ -312,32 +319,44 @@ var DSAInput = class extends FormControlLayout {
     this.input.value = numberToFrAmount(newValue);
     this.value = this.input.value.replace(",", ".");
   }
-  /** Increments the value of a numeric input type by the value of the step attribute. */
-  stepUp() {
-    if (this.input instanceof DSAInputDate || this.input instanceof DSAInputTime) {
-      return;
-    }
-    if (this.type === "amount") {
-      this.adjustAmountValue("up");
-    } else {
-      this.standardInput.stepUp();
-      if (this.value !== this.standardInput.value) {
-        this.value = this.standardInput.value;
-      }
+  /** Increments the value of a numeric or time input type by the value of the step attribute, multiplied by an optional number parameter. */
+  stepUp(stepNumber) {
+    switch (this.type) {
+      case "date":
+        return;
+      case "time":
+        if (!(this.input instanceof DSAInputTime)) return;
+        this.input.stepUp(stepNumber);
+        this.value = this.input.value;
+        return;
+      case "amount":
+        this.adjustAmountValue("up");
+        return;
+      default:
+        this.standardInput.stepUp(stepNumber);
+        if (this.value !== this.standardInput.value) {
+          this.value = this.standardInput.value;
+        }
     }
   }
-  /** Decrements the value of a numeric input type by the value of the step attribute. */
-  stepDown() {
-    if (this.input instanceof DSAInputDate || this.input instanceof DSAInputTime) {
-      return;
-    }
-    if (this.type === "amount") {
-      this.adjustAmountValue("down");
-    } else {
-      this.standardInput.stepDown();
-      if (this.value !== this.standardInput.value) {
-        this.value = this.standardInput.value;
-      }
+  /** Decrements the value of a numeric or time input type by the value of the step attribute, multiplied by an optional number parameter.  */
+  stepDown(stepNumber) {
+    switch (this.type) {
+      case "date":
+        return;
+      case "time":
+        if (!(this.input instanceof DSAInputTime)) return;
+        this.input.stepDown(stepNumber);
+        this.value = this.input.value;
+        return;
+      case "amount":
+        this.adjustAmountValue("down");
+        return;
+      default:
+        this.standardInput.stepDown(stepNumber);
+        if (this.value !== this.standardInput.value) {
+          this.value = this.standardInput.value;
+        }
     }
   }
   /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
@@ -593,9 +612,6 @@ __decorateClass([
 __decorateClass([
   e("dsa-input-time")
 ], DSAInput.prototype, "timeInput", 2);
-__decorateClass([
-  r()
-], DSAInput.prototype, "input", 2);
 __decorateClass([
   r()
 ], DSAInput.prototype, "hasFocus", 2);

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
+};

package/cdn/chunks/{chunk.TZ4FLP4S.js → chunk.5UVKMYSG.js}

@@ -316,7 +316,7 @@ var DSACheckboxGroup = class extends ShoelaceElement {
 
         ${this.error ? renderFormElementErrors(this.errorMessage) : ""}
         ${this.description ? x`
-              <p id="description" classname="form-control__description">
+              <p id="description" class="form-control__description">
                 ${this.description}
               </p>
             ` : ""}