@ds-autonomie/web-components 2.19.0 → 2.21.0

package/dist/chunks/{chunk.5TBGCNJD.js → chunk.PCTIMH5D.js}

@@ -1,30 +1,27 @@
 import {
   DSATag
-} from "./chunk.KPVDLRVV.js";
+} from "./chunk.QLJNW3TZ.js";
 import {
   DSAOption
-} from "./chunk.SAQFLKP7.js";
+} from "./chunk.WEWJQ2AA.js";
 import {
   FormControlLayout
-} from "./chunk.RVUUZ3KA.js";
+} from "./chunk.RLLACUYR.js";
 import {
   DSAPopup
 } from "./chunk.GYWU4AAB.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";
-import {
-  normalizeStr
-} from "./chunk.PSYTLBRK.js";
 import {
   DSAErrorText
-} from "./chunk.5NSAEDEE.js";
+} from "./chunk.5NGXTSAJ.js";
 import {
   combobox_styles_default
-} from "./chunk.YYKAI7FO.js";
+} from "./chunk.WZBEL7FC.js";
 import {
   DSASpinner
-} from "./chunk.2WW7OJZT.js";
+} from "./chunk.IDMG3YLC.js";
 import {
   FormControlController
 } from "./chunk.DJLJEQST.js";
@@ -44,10 +41,13 @@ import {
 } from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.34HS7ICN.js";
+} from "./chunk.DVIHNMQQ.js";
 import {
   DSAIcon
-} from "./chunk.CKJJ4MSU.js";
+} from "./chunk.YPBLUIU7.js";
+import {
+  normalizeStr
+} from "./chunk.PSYTLBRK.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";
@@ -89,6 +89,7 @@ var DSACombobox = class extends FormControlLayout {
     this.debounceTimeout = 300;
     this.fetchingState = "idle";
     this.overrideDefaultFiltering = false;
+    this.keepSearchAfterSelection = false;
   }
   /** Gets the validity state object */
   get validity() {
@@ -204,6 +205,14 @@ var DSACombobox = class extends FormControlLayout {
       this.displayedOptionsCount = displayedOptionsCount;
     }
   }
+  resetSearchAfterSelection() {
+    if (!this.multiple || this.keepSearchAfterSelection) {
+      return;
+    }
+    if (this.displayLabel !== "") {
+      this.displayLabel = "";
+    }
+  }
   // Toggles an option's selected state
   toggleOptionSelection(option, force) {
     const shouldBeSelected = force === void 0 ? !option.selected : force;
@@ -224,6 +233,7 @@ var DSACombobox = class extends FormControlLayout {
       const oldValue = this.value;
       if (this.multiple) {
         this.toggleOptionSelection(option);
+        this.resetSearchAfterSelection();
       } else {
         this.setSelectedOptions(option);
         this.syncOnSelection();
@@ -448,6 +458,7 @@ var DSACombobox = class extends FormControlLayout {
     if (this.open && this.currentOption !== void 0 && !this.currentOption.disabled) {
       if (this.multiple) {
         this.toggleOptionSelection(this.currentOption);
+        this.resetSearchAfterSelection();
       } else {
         this.setSelectedOptions(this.currentOption);
         this.syncOnSelection();
@@ -467,6 +478,7 @@ var DSACombobox = class extends FormControlLayout {
       event.stopImmediatePropagation();
       if (this.multiple) {
         this.toggleOptionSelection(this.currentOption);
+        this.resetSearchAfterSelection();
       } else {
         this.setSelectedOptions(this.currentOption);
         this.syncOnSelection();
@@ -1003,6 +1015,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, attribute: "override-default-filtering" })
 ], DSACombobox.prototype, "overrideDefaultFiltering", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "keep-search-after-selection" })
+], DSACombobox.prototype, "keepSearchAfterSelection", 2);
 __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], DSACombobox.prototype, "handleDisabledChange", 1);

package/dist/chunks/{chunk.JBKNTRA7.js → chunk.PFPVUCRD.js}

@@ -1,6 +1,6 @@
 import {
   progress_ring_styles_default
-} from "./chunk.KIN7BJ2S.js";
+} from "./chunk.TILFUJJ2.js";
 import {
   a11yWarning
 } from "./chunk.PWL7QCVG.js";
@@ -27,14 +27,27 @@ var DSAProgressRing = class extends ShoelaceElement {
   }
   requestUpdate(name, oldValue, options) {
     super.requestUpdate(name, oldValue, options);
-    if (name === "value" && this.indicator) {
-      const radius = parseFloat(
-        getComputedStyle(this.indicator).getPropertyValue("r")
-      );
-      const circumference = 2 * Math.PI * radius;
+    if (name === "size") {
+      this.indicatorCircumference = void 0;
+    }
+    if ((name === "value" || name === "size") && this.indicator) {
+      const circumference = this.getIndicatorCircumference();
       const offset = circumference - this.value / 100 * circumference;
-      this.indicatorOffset = `${offset}px`;
+      const nextOffset = `${offset}px`;
+      if (this.indicatorOffset !== nextOffset) {
+        this.indicatorOffset = nextOffset;
+      }
+    }
+  }
+  getIndicatorCircumference() {
+    if (this.indicatorCircumference !== void 0) {
+      return this.indicatorCircumference;
     }
+    const radius = parseFloat(
+      getComputedStyle(this.indicator).getPropertyValue("r")
+    );
+    this.indicatorCircumference = 2 * Math.PI * radius;
+    return this.indicatorCircumference;
   }
   render() {
     if (!this.label) {

package/dist/chunks/{chunk.ZYGCOBUE.js → chunk.PT2BKEDG.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.34HS7ICN.js";
+} from "./chunk.DVIHNMQQ.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";

package/dist/chunks/{chunk.Q7YCE4UA.js → chunk.Q45EA7A6.js}

@@ -1,6 +1,6 @@
 import {
   LocalizeController
-} from "./chunk.34HS7ICN.js";
+} from "./chunk.DVIHNMQQ.js";
 import {
   ShoelaceElement
 } from "./chunk.SVWU6JW4.js";
@@ -117,9 +117,14 @@ __decorateClass([
 DSARelativeTime = __decorateClass([
   customElement("dsa-relative-time")
 ], DSARelativeTime);
+var TIME_UNITS = {
+  second: 1e3,
+  minute: 6e4,
+  hour: 36e5,
+  day: 864e5
+};
 function getTimeUntilNextUnit(unit) {
-  const units = { second: 1e3, minute: 6e4, hour: 36e5, day: 864e5 };
-  const value = units[unit];
+  const value = TIME_UNITS[unit];
   return value - Date.now() % value;
 }
 

package/dist/chunks/{chunk.QKUUHXNR.js → chunk.Q6GPBRDV.js}

@@ -1,19 +1,15 @@
 import {
   radio_group_styles_default
-} from "./chunk.MFGYIAUT.js";
+} from "./chunk.3TAGND37.js";
 import {
   wrapIndex
 } from "./chunk.HV63L5BF.js";
-import {
-  removeAttributeIfPresent,
-  setAttributeIfDifferent
-} from "./chunk.PSYTLBRK.js";
 import {
   DSAVisuallyHidden
 } from "./chunk.JIN6PGAK.js";
 import {
   DSAErrorText
-} from "./chunk.5NSAEDEE.js";
+} from "./chunk.5NGXTSAJ.js";
 import {
   renderFormElementErrors
 } from "./chunk.6QDM5FUA.js";
@@ -29,6 +25,10 @@ import {
 import {
   a11yWarning
 } from "./chunk.PWL7QCVG.js";
+import {
+  removeAttributeIfPresent,
+  setAttributeIfDifferent
+} from "./chunk.PSYTLBRK.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";

package/dist/chunks/{chunk.MDQDWJCR.js → chunk.QCVOP7JL.js}

@@ -95,6 +95,7 @@ var table_of_contents_styles_default = css`
   /* Item */
   a {
     display: flex;
+    flex-direction: column;
     color: var(--dsa-wc-table-of-contents-link-color);
     transition: var(--dsa-wc-transition-fast) fill;
     user-select: none;
@@ -115,6 +116,18 @@ var table_of_contents_styles_default = css`
     color: var(--dsa-wc-table-of-contents-link-color-active);
     font: var(--dsa-wc-menu-item-font-current);
   }
+  /* Reserve the bold width so the layout doesn't shift when a link becomes active.
+     The ::after pseudo-element mirrors the link text in bold but stays invisible. */
+  a::after {
+    content: attr(data-text);
+    display: block;
+    font: var(--dsa-wc-menu-item-font-current);
+    visibility: hidden;
+    height: 0;
+    overflow: hidden;
+    user-select: none;
+    pointer-events: none;
+  }
   @media (forced-colors: active) {
     a:hover,
     a:focus-visible {

package/dist/chunks/{chunk.ODOHKR6J.js → chunk.QHEMM3XC.js}

@@ -1,24 +1,26 @@
 // src/components/input-amount/input-amount.utils.ts
 import Big from "big.js";
+var VALID_CHAR_PATTERN = /^[0-9,-]$/;
+var NAVIGATION_KEYS = /* @__PURE__ */ new Set([
+  "Escape",
+  "Backspace",
+  "Tab",
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowUp",
+  "ArrowDown",
+  "Delete",
+  "Enter",
+  "PageDown",
+  "PageUp",
+  "Home",
+  "End"
+]);
 function isInvalidAmountKey(event) {
   const hasModifier = event.metaKey || event.ctrlKey;
-  const isValidCharacter = /^[0-9,-]$/.test(event.key);
+  const isValidCharacter = VALID_CHAR_PATTERN.test(event.key);
   const isInvalidInput = !hasModifier && !isValidCharacter;
-  const isNavigationKey = [
-    "Escape",
-    "Backspace",
-    "Tab",
-    "ArrowLeft",
-    "ArrowRight",
-    "ArrowUp",
-    "ArrowDown",
-    "Delete",
-    "Enter",
-    "PageDown",
-    "PageUp",
-    "Home",
-    "End"
-  ].includes(event.key);
+  const isNavigationKey = NAVIGATION_KEYS.has(event.key);
   if (!isNavigationKey && isInvalidInput) {
     return true;
   }

package/dist/chunks/{chunk.KPVDLRVV.js → chunk.QLJNW3TZ.js}

@@ -6,16 +6,16 @@ import {
 } from "./chunk.UYPZGXIY.js";
 import {
   DSATooltip
-} from "./chunk.ELOLGOFM.js";
+} from "./chunk.UBA2H662.js";
 import {
   DSAVisuallyHidden
 } from "./chunk.JIN6PGAK.js";
 import {
   DSAIconButton
-} from "./chunk.WNESPUKK.js";
+} from "./chunk.2GTXVMMC.js";
 import {
   LocalizeController
-} from "./chunk.34HS7ICN.js";
+} from "./chunk.DVIHNMQQ.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";

package/dist/chunks/{chunk.64EGGLHL.js → chunk.QWPEXQZX.js}

@@ -35,9 +35,8 @@ var menu_item_styles_default = css`
   .menu-item--highlight::after {
     content: '';
     position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
+    inset-block: 0;
+    inset-inline-start: 0;
     width: 4px;
     background-color: var(--dsa-wc-menu-navigation-item-current-color);
   }
@@ -82,31 +81,26 @@ var menu_item_styles_default = css`
     cursor: not-allowed;
   }
 
-  .menu-item .menu-item__label {
+  .menu-item__label {
     flex: 1 1 auto;
     display: inline-flex;
   }
 
-  .menu-item .menu-item__prefix {
+  .menu-item__prefix,
+  .menu-item__suffix {
     flex: 0 0 auto;
     display: flex;
     align-items: center;
   }
 
-  .menu-item .menu-item__prefix::slotted(*) {
+  .menu-item__prefix::slotted(*) {
     margin-inline-end: var(--dsa-wc-menu-item-margin-inline-end);
     display: inherit;
     height: 1.25em;
     width: 1.25em;
   }
 
-  .menu-item .menu-item__suffix {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-  }
-
-  .menu-item .menu-item__suffix::slotted(*) {
+  .menu-item__suffix::slotted(*) {
     margin-inline-start: var(--dsa-wc-menu-item-margin-inline-start);
     display: inherit;
   }

package/dist/chunks/{chunk.TCW77JY3.js → chunk.RJAOB66Y.js}

@@ -1,24 +1,24 @@
+import {
+  input_amount_styles_default
+} from "./chunk.SJNFRQKU.js";
 import {
   isInvalidAmountKey,
   numberToFrAmount,
   parseFrAmount,
   roundToStep
-} from "./chunk.ODOHKR6J.js";
+} from "./chunk.QHEMM3XC.js";
 import {
   InputBase
-} from "./chunk.WMFEJDPX.js";
-import {
-  input_amount_styles_default
-} from "./chunk.6LLDVH7Y.js";
+} from "./chunk.7HMEK2ND.js";
 import {
   DSAIconButton
-} from "./chunk.WNESPUKK.js";
+} from "./chunk.2GTXVMMC.js";
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.34HS7ICN.js";
+} from "./chunk.DVIHNMQQ.js";
 import {
   __decorateClass,
   __spreadProps,
@@ -45,23 +45,24 @@ var DSAInputAmount = class extends InputBase {
     super.valueAsNumber = newValue;
   }
   handleChange() {
-    if (this.input.value === "" || this.input.value === "-") {
+    const inputValue = this.input.value;
+    if (inputValue === "" || inputValue === "-") {
       this.input.value = "";
       return;
     }
-    const parsedValue = parseFrAmount(this.input.value);
+    const safeStep = this.getSafeStep();
+    const parsedValue = parseFrAmount(inputValue);
     const parsedMin = parseFloat(`${this.min}`);
     const parsedMax = parseFloat(`${this.max}`);
-    this.input.value = numberToFrAmount(
-      roundToStep(parsedValue, this.getSafeStep())
-    );
-    if (!isNaN(parsedMin) && parsedValue < parsedMin) {
-      this.input.value = numberToFrAmount(this.min);
-    }
-    if (!isNaN(parsedMax) && parsedValue > parsedMax) {
-      this.input.value = numberToFrAmount(this.max);
+    let newValue = roundToStep(parsedValue, safeStep);
+    if (!isNaN(parsedMin) && newValue < parsedMin) {
+      newValue = parsedMin;
+    } else if (!isNaN(parsedMax) && newValue > parsedMax) {
+      newValue = parsedMax;
     }
-    this.value = this.input.value.replace(",", ".");
+    const formattedValue = numberToFrAmount(newValue);
+    this.input.value = formattedValue;
+    this.value = formattedValue.replace(",", ".");
     this.emit("dsa-change");
   }
   handleInput() {
@@ -70,25 +71,26 @@ var DSAInputAmount = class extends InputBase {
     this.emit("dsa-input");
   }
   handleKeyDown(event) {
-    if (event.key === "Dead") {
+    const eventKey = event.key;
+    if (eventKey === "Dead") {
       this.input.blur();
       setTimeout(() => this.input.focus());
     }
-    if (isInvalidAmountKey(event) || event.key === "-" && this.input.selectionStart !== null && this.input.selectionStart > 0 || event.key === "," && this.input.value.includes(",")) {
+    const selectionStart = this.input.selectionStart;
+    if (isInvalidAmountKey(event) || eventKey === "-" && selectionStart !== null && selectionStart > 0 || eventKey === "," && this.input.value.includes(",")) {
       event.preventDefault();
       return;
     }
-    if (event.key === "ArrowDown") {
+    const isArrowDown = eventKey === "ArrowDown";
+    const isArrowUp = eventKey === "ArrowUp";
+    if (isArrowDown) {
       this.stepDown();
-    }
-    if (event.key === "ArrowUp") {
+    } else if (isArrowUp) {
       this.stepUp();
     }
-    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-      const inputEvent = new Event("input", { bubbles: true });
-      const changeEvent = new Event("change", { bubbles: true });
-      this.input.dispatchEvent(inputEvent);
-      this.input.dispatchEvent(changeEvent);
+    if (isArrowDown || isArrowUp) {
+      this.input.dispatchEvent(new Event("input", { bubbles: true }));
+      this.input.dispatchEvent(new Event("change", { bubbles: true }));
     }
     super.handleKeyDown(event);
   }
@@ -97,19 +99,16 @@ var DSAInputAmount = class extends InputBase {
       return this.step;
     }
     const parsedStep = parseFloat(`${this.step}`);
-    if (isNaN(parsedStep) || parsedStep === 0) {
-      return 1;
-    } else {
-      return parsedStep;
-    }
+    return isNaN(parsedStep) || parsedStep === 0 ? 1 : parsedStep;
   }
   adjustAmountValue(direction) {
     const safeStep = this.getSafeStep();
-    const numberStep = new Big(safeStep === "any" ? 1 : safeStep);
-    const parsedValue = new Big(parseFrAmount(this.input.value));
-    const newValue = direction === "up" ? parsedValue.plus(numberStep).toNumber() : parsedValue.minus(numberStep).toNumber();
-    this.input.value = numberToFrAmount(newValue);
-    this.value = this.input.value.replace(",", ".");
+    const stepValue = new Big(safeStep === "any" ? 1 : safeStep);
+    const currentValue = new Big(parseFrAmount(this.input.value));
+    const newValue = (direction === "up" ? currentValue.plus(stepValue) : currentValue.minus(stepValue)).toNumber();
+    const formattedValue = numberToFrAmount(newValue);
+    this.input.value = formattedValue;
+    this.value = formattedValue.replace(",", ".");
   }
   /** Increments the value of a numeric or time input type by the value of the step attribute, multiplied by an optional number parameter. */
   stepUp() {
@@ -128,14 +127,24 @@ var DSAInputAmount = class extends InputBase {
     return this.input.reportValidity() && this.checkAmountValidity();
   }
   checkAmountValidity() {
-    if (this.value === "") {
+    const value = this.value;
+    if (value === "") {
       return true;
     }
-    const parsedValue = parseFloat(this.value);
+    const parsedValue = parseFloat(value);
+    if (isNaN(parsedValue)) {
+      return false;
+    }
     const parsedMin = parseFloat(`${this.min}`);
+    if (!isNaN(parsedMin) && parsedValue < parsedMin) {
+      return false;
+    }
     const parsedMax = parseFloat(`${this.max}`);
+    if (!isNaN(parsedMax) && parsedValue > parsedMax) {
+      return false;
+    }
     const safeStep = this.getSafeStep();
-    return !isNaN(parsedValue) && (isNaN(parsedMin) || parsedValue >= parsedMin) && (isNaN(parsedMax) || parsedValue <= parsedMax) && (safeStep === "any" || roundToStep(parsedValue, safeStep) === parsedValue);
+    return safeStep === "any" || roundToStep(parsedValue, safeStep) === parsedValue;
   }
   renderInput() {
     var _a, _b;

package/dist/chunks/{chunk.RVUUZ3KA.js → chunk.RLLACUYR.js}

@@ -1,6 +1,6 @@
 import {
   DSAErrorText
-} from "./chunk.5NSAEDEE.js";
+} from "./chunk.5NGXTSAJ.js";
 import {
   renderFormElementErrors
 } from "./chunk.6QDM5FUA.js";
@@ -66,6 +66,18 @@ var FormControlLayout = class extends ShoelaceElement {
     const hasHelpTextSlot = this.hasSlotController.test("help-text");
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+    const {
+      error,
+      disabled,
+      success,
+      size,
+      variant,
+      required,
+      description,
+      errorMessage,
+      helpText,
+      label
+    } = this;
     if (this.title) {
       console.warn(
         "The `title` attribute is deprecated since it can cause redundant enunciation by screen readers, and will be removed in the next major release. Please use the accessible-name attribute instead."
@@ -76,7 +88,7 @@ var FormControlLayout = class extends ShoelaceElement {
         "Form controls require a label attribute or a label slot for accessibility"
       );
     }
-    if (this.error && !this.errorMessage) {
+    if (error && !errorMessage) {
       a11yWarning(
         "Form controls requires an error-message attribute for accessibility when the error attribute is set"
       );
@@ -86,14 +98,14 @@ var FormControlLayout = class extends ShoelaceElement {
           part="form-control"
           class=${classMap({
       "form-control": true,
-      "form-control--error": this.error,
-      "form-control--success": this.success && !this.error,
-      "form-control--small": this.size === "small",
-      "form-control--medium": this.size === "medium",
-      "form-control--large": this.size === "large",
+      "form-control--error": error,
+      "form-control--success": success && !error,
+      "form-control--small": size === "small",
+      "form-control--medium": size === "medium",
+      "form-control--large": size === "large",
       "form-control--has-label": hasLabel,
       "form-control--has-help-text": hasHelpText,
-      "form-control--on-floating-menu": this.variant === "floating"
+      "form-control--on-floating-menu": variant === "floating"
     })}
         >
           <label
@@ -104,8 +116,8 @@ var FormControlLayout = class extends ShoelaceElement {
             aria-hidden=${ifDefined(hasLabel ? void 0 : "true")}
             @click=${this.handleLabelClick}
           >
-            ${this.required ? html`<span class="form-control__label-required">*</span>` : ""}
-            <slot name="label">${this.label}</slot>
+            ${required ? html`<span class="form-control__label-required">*</span>` : ""}
+            <slot name="label">${label}</slot>
           </label>
           <slot name="tooltip" class="form-control__tooltip"></slot>
   
@@ -121,20 +133,20 @@ var FormControlLayout = class extends ShoelaceElement {
               name="help-text"
               part="form-control-help-text"
             >
-              ${this.helpText}
+              ${helpText}
             </slot>
           </div>
   
           ${this.renderCounter()}
 
-          ${this.description !== "" ? html`
+          ${description !== "" ? html`
                   <p id="description" class="form-control__description">
-                    ${this.description}
+                    ${description}
                   </p>
                 ` : ""}
   
-          ${this.error && !this.disabled && this.errorMessage !== "" ? renderFormElementErrors(this.errorMessage, this.variant) : ""}
-          ${this.success ? this.renderSuccessMessage() : ""}
+          ${error && !disabled && errorMessage !== "" ? renderFormElementErrors(errorMessage, variant) : ""}
+          ${success ? this.renderSuccessMessage() : ""}
           </div>
         </div>
       `;

package/dist/chunks/{chunk.LH65ZIEN.js → chunk.RMOUFLCI.js}

@@ -6,17 +6,17 @@ import {
 } from "./chunk.4UFNEXOD.js";
 import {
   DSACheckbox
-} from "./chunk.SGRSRDWP.js";
-import {
-  removeAttributeIfPresent,
-  setAttributeIfDifferent
-} from "./chunk.PSYTLBRK.js";
+} from "./chunk.F4DMZGND.js";
 import {
   DSAIconButton
-} from "./chunk.WNESPUKK.js";
+} from "./chunk.2GTXVMMC.js";
 import {
   LocalizeController
-} from "./chunk.34HS7ICN.js";
+} from "./chunk.DVIHNMQQ.js";
+import {
+  removeAttributeIfPresent,
+  setAttributeIfDifferent
+} from "./chunk.PSYTLBRK.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";

package/dist/chunks/{chunk.S5FAXONJ.js → chunk.RVOALTE4.js}

@@ -22,10 +22,10 @@ var fieldset_styles_default = css`
     border-width: 1px;
     border-style: solid;
   }
-  .fieldset--on-base {
+  :host([variant='base']) .fieldset {
     border-color: var(--dsa-wc-fieldset-border-color);
   }
-  .fieldset--on-layer {
+  :host([variant='layer']) .fieldset {
     border-color: transparent;
   }
 
@@ -57,15 +57,15 @@ var fieldset_styles_default = css`
     gap: var(--dsa-spacing-16);
     flex-wrap: wrap;
   }
-  .fieldset--vertical .fieldset__content {
+  :host(:not([horizontal])) .fieldset__content {
     flex-direction: column;
   }
-  .fieldset--horizontal .fieldset__content {
+  :host([horizontal]) .fieldset__content {
     flex-direction: row;
   }
 
   /** Contrasted **/
-  .fieldset--contrasted-borders {
+  :host([contrasted-borders]) .fieldset {
     border-color: var(--dsa-wc-fieldset-border-color-contrasted);
   }
 `;