@ds-autonomie/web-components 2.18.0 → 2.20.0

package/dist/chunks/{chunk.TNZEC73D.js → chunk.KNXPRETW.js}

@@ -23,10 +23,10 @@ import {
 } from "./chunk.PWL7QCVG.js";
 import {
   LocalizeController
-} from "./chunk.WHHYA5VY.js";
+} from "./chunk.34HS7ICN.js";
 import {
   DSAIcon
-} from "./chunk.CKJJ4MSU.js";
+} from "./chunk.NJQ6BFQQ.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";
@@ -39,13 +39,14 @@ import {
 
 // src/components/navbar-menu/navbar-menu.ts
 import { html } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
+import { customElement, property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 var DSANavbarMenu = class extends ShoelaceElement {
   constructor() {
     super(...arguments);
     this.hasSlotController = new HasSlotController(this, "label");
     this.localize = new LocalizeController(this);
+    this.slotLabelText = "";
     this.open = false;
     this.mobile = false;
   }
@@ -120,6 +121,22 @@ var DSANavbarMenu = class extends ShoelaceElement {
   handleMenuButtonKeyDown(event) {
     this.handleDocumentKeyDown(event);
   }
+  handleLabelSlotChange(event) {
+    const slot = event.target;
+    const label = slot.assignedNodes({ flatten: true }).map((node) => {
+      var _a;
+      return (_a = node.textContent) != null ? _a : "";
+    }).join("").trim();
+    if (this.slotLabelText !== label) {
+      this.slotLabelText = label;
+    }
+  }
+  getDesktopLabel(hasSlotLabel) {
+    if (hasSlotLabel) {
+      return this.slotLabelText || this.label;
+    }
+    return this.label;
+  }
   async handleOpenChange() {
     if (this.open) {
       this.emit("dsa-show");
@@ -195,7 +212,10 @@ var DSANavbarMenu = class extends ShoelaceElement {
                 ` : ""}
 
             <span class="navbar-menu__button__label">
-              <slot name="label" class="navbar-menu__button__label"
+              <slot
+                name="label"
+                class="navbar-menu__button__label"
+                @slotchange=${this.handleLabelSlotChange}
                 >${this.label}</slot
               >
             </span>
@@ -240,9 +260,11 @@ var DSANavbarMenu = class extends ShoelaceElement {
         >
           <span
             class="navbar-menu__button__label"
-            data-content="${hasSlotLabel ? this.querySelector('[slot="label"]').innerText : this.label}"
+            data-content="${this.getDesktopLabel(hasSlotLabel)}"
           >
-            <slot name="label">${this.label}</slot>
+            <slot name="label" @slotchange=${this.handleLabelSlotChange}
+              >${this.label}</slot
+            >
           </span>
 
           <dsa-icon
@@ -270,6 +292,9 @@ __decorateClass([
 __decorateClass([
   query(".navbar-menu__body")
 ], DSANavbarMenu.prototype, "body", 2);
+__decorateClass([
+  state()
+], DSANavbarMenu.prototype, "slotLabelText", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DSANavbarMenu.prototype, "open", 2);

package/dist/chunks/{chunk.6Q5DARJM.js → chunk.L5HLKFQW.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.JOKI53P2.js";
 import {
   DSAIcon
-} from "./chunk.CKJJ4MSU.js";
+} from "./chunk.NJQ6BFQQ.js";
 import {
   ShoelaceElement
 } from "./chunk.SVWU6JW4.js";

package/dist/chunks/{chunk.TRVKPMDO.js → chunk.LKSUU7CF.js}

@@ -21,10 +21,10 @@ import {
 } from "./chunk.PWL7QCVG.js";
 import {
   LocalizeController
-} from "./chunk.WHHYA5VY.js";
+} from "./chunk.34HS7ICN.js";
 import {
   DSAIcon
-} from "./chunk.CKJJ4MSU.js";
+} from "./chunk.NJQ6BFQQ.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";

package/dist/chunks/{chunk.7NJP4D2X.js → chunk.LLOSO7FC.js}

@@ -90,13 +90,13 @@ var option_styles_default = css`
     border: 1px solid var(--dsa-wc-option-hover-border-color);
   }
 
-  .option--selected.option--current:not(.option--multiple),
-  .option--selected.option--hover:not(.option--multiple) {
+  .option--selected:not(.option--multiple).option--current,
+  .option--selected:not(.option--multiple).option--hover {
     background-color: var(--dsa-wc-option-active-hover-background-color);
     opacity: 1;
   }
-  .option--selected.option--current.option--multiple,
-  .option--selected.option--hover.option--multiple {
+  .option--selected.option--multiple.option--current,
+  .option--selected.option--multiple.option--hover {
     background-color: var(
       --dsa-wc-option-active-multiple-hover-background-color
     );
@@ -206,7 +206,7 @@ var option_styles_default = css`
     background-color: var(--dsa-wc-checkbox-color-active);
   }
 
-  .option.option--selected:not(.option--disabled) .checkbox__control:hover {
+  .option--selected:not(.option--disabled) .checkbox__control:hover {
     border-color: var(--dsa-wc-checkbox-color-active);
     background-color: var(--dsa-wc-checkbox-color-active);
   }

package/dist/chunks/{chunk.NMU6DWUH.js → chunk.LN7NDCQU.js}

@@ -1,6 +1,6 @@
 import {
   switch_styles_default
-} from "./chunk.5NUD3TZO.js";
+} from "./chunk.KD5YM72X.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";
@@ -12,10 +12,10 @@ import {
 } from "./chunk.DJLJEQST.js";
 import {
   LocalizeController
-} from "./chunk.WHHYA5VY.js";
+} from "./chunk.34HS7ICN.js";
 import {
   DSAIcon
-} from "./chunk.CKJJ4MSU.js";
+} from "./chunk.NJQ6BFQQ.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";
@@ -99,19 +99,25 @@ var DSASwitch = class extends ShoelaceElement {
     }
     if (event.key === "ArrowLeft") {
       event.preventDefault();
-      this.checked = false;
+      if (this.checked) {
+        this.checked = false;
+      }
       this.emit("dsa-change");
       this.emit("dsa-input");
     }
     if (event.key === "ArrowRight") {
       event.preventDefault();
-      this.checked = true;
+      if (!this.checked) {
+        this.checked = true;
+      }
       this.emit("dsa-change");
       this.emit("dsa-input");
     }
   }
   handleCheckedChange() {
-    this.input.checked = this.checked;
+    if (this.input.checked !== this.checked) {
+      this.input.checked = this.checked;
+    }
     this.formControlController.updateValidity();
   }
   handleDisabledChange() {
@@ -148,6 +154,8 @@ var DSASwitch = class extends ShoelaceElement {
   }
   render() {
     var _a, _b, _c, _d;
+    const switchOnLabel = (_b = (_a = this.labelOn) != null ? _a : this.onLabel) != null ? _b : this.localize.term("switchOn");
+    const switchOffLabel = (_d = (_c = this.labelOff) != null ? _c : this.offLabel) != null ? _d : this.localize.term("switchOff");
     return html`
       <div
         class=${classMap({
@@ -206,7 +214,20 @@ var DSASwitch = class extends ShoelaceElement {
             </span>
 
             <div class="switch__state" aria-hidden="true">
-              ${this.checked ? (_b = (_a = this.labelOn) != null ? _a : this.onLabel) != null ? _b : this.localize.term("switchOn") : (_d = (_c = this.labelOff) != null ? _c : this.offLabel) != null ? _d : this.localize.term("switchOff")}
+              <span
+                class=${classMap({
+      "switch__state-label": true,
+      "switch__state-label--visible": this.checked
+    })}
+                >${switchOnLabel}</span
+              >
+              <span
+                class=${classMap({
+      "switch__state-label": true,
+      "switch__state-label--visible": !this.checked
+    })}
+                >${switchOffLabel}</span
+              >
             </div>
           </div>
         </label>

package/dist/chunks/{chunk.4NZ25HB6.js → chunk.LWTEEWEF.js}

@@ -10,7 +10,11 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.WHHYA5VY.js";
+} from "./chunk.34HS7ICN.js";
+import {
+  removeAttributeIfPresent,
+  setAttributeIfDifferent
+} from "./chunk.PSYTLBRK.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";
@@ -65,26 +69,32 @@ var DSAHeaderModern = class extends ShoelaceElement {
     }
     return cnsaLogoNoSubtextSvg(this.localize.term("cnsa"));
   }
+  getHeaderSearch() {
+    if (!this.hasSlotController.test("search")) {
+      return null;
+    }
+    return this.querySelector("dsa-header-search");
+  }
   handleSearchExpanded() {
-    if (this.hasSlotController.test("search")) {
-      const search = this.querySelector("dsa-header-search");
-      if (!search) return;
-      if (this.searchExpanded) {
-        search.setAttribute("expanded", "true");
-      } else {
-        search.removeAttribute("expanded");
-      }
+    const search = this.getHeaderSearch();
+    if (!search) {
+      return;
+    }
+    if (this.searchExpanded) {
+      setAttributeIfDifferent(search, "expanded", "true");
+    } else {
+      removeAttributeIfPresent(search, "expanded");
     }
   }
   handleMobile() {
-    if (this.hasSlotController.test("search")) {
-      const search = this.querySelector("dsa-header-search");
-      if (!search) return;
-      if (this.mobile) {
-        search.setAttribute("mobile", "true");
-      } else {
-        search.removeAttribute("mobile");
-      }
+    const search = this.getHeaderSearch();
+    if (!search) {
+      return;
+    }
+    if (this.mobile) {
+      setAttributeIfDifferent(search, "mobile", "true");
+    } else {
+      removeAttributeIfPresent(search, "mobile");
     }
   }
   render() {

package/dist/chunks/{chunk.5NSAEDEE.js → chunk.M2QIFDAP.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.FX2CWZWY.js";
 import {
   DSAIcon
-} from "./chunk.CKJJ4MSU.js";
+} from "./chunk.NJQ6BFQQ.js";
 import {
   ShoelaceElement
 } from "./chunk.SVWU6JW4.js";

package/dist/chunks/{chunk.UHF3BDIM.js → chunk.M2RDCDKZ.js}

@@ -1,6 +1,6 @@
 import {
   input_base_styles_default
-} from "./chunk.EWMFHVNW.js";
+} from "./chunk.UOJ4QKLP.js";
 
 // src/components/input-date/input-date.styles.ts
 import { css } from "lit";
@@ -60,7 +60,6 @@ var input_date_styles_default = css`
 
   .date-anchor {
     display: flex;
-    flex-direction: row;
     align-items: center;
     justify-content: space-between;
   }

package/dist/chunks/{chunk.ZBTNV3E7.js → chunk.M5L3DDVW.js}

@@ -1,12 +1,15 @@
 import {
   tab_styles_default
-} from "./chunk.2LWUWDHO.js";
+} from "./chunk.Q3SL7AWD.js";
 import {
   DSAIconButton
-} from "./chunk.WNESPUKK.js";
+} from "./chunk.MWPOWC6N.js";
 import {
   LocalizeController
-} from "./chunk.WHHYA5VY.js";
+} from "./chunk.34HS7ICN.js";
+import {
+  setAttributeIfDifferent
+} from "./chunk.PSYTLBRK.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";
@@ -19,7 +22,7 @@ import {
 
 // src/components/tab/tab.ts
 import { html } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
+import { customElement, property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 var id = 0;
@@ -29,6 +32,7 @@ var DSATab = class extends ShoelaceElement {
     this.localize = new LocalizeController(this);
     this.attrId = ++id;
     this.componentId = `dsa-tab-${this.attrId}`;
+    this.widthPlaceholderNodes = [];
     this.panel = "";
     this.active = false;
     this.closable = false;
@@ -36,32 +40,53 @@ var DSATab = class extends ShoelaceElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.setAttribute("role", "tab");
+    if (!this.id) {
+      this.id = this.componentId;
+    }
+    setAttributeIfDifferent(this, "role", "tab");
   }
   firstUpdated() {
+    this.updateWidthPlaceholderNodes();
     const closeButton = this.closeButton;
     if (closeButton !== null) {
       closeButton.updateComplete.then(() => {
-        closeButton.button.setAttribute("tabindex", this.active ? "0" : "-1");
+        const tabIndexValue = this.active ? "0" : "-1";
+        setAttributeIfDifferent(closeButton.button, "tabindex", tabIndexValue);
       });
     }
   }
+  handleDefaultSlotChange() {
+    this.updateWidthPlaceholderNodes();
+  }
+  updateWidthPlaceholderNodes() {
+    this.widthPlaceholderNodes = this.defaultSlot ? this.defaultSlot.assignedNodes().map((node) => node.cloneNode(true)) : [];
+  }
   handleCloseClick(event) {
     event.stopPropagation();
     this.emit("dsa-close");
   }
   handleActiveChange() {
     var _a;
-    this.setAttribute("aria-selected", this.active ? "true" : "false");
-    (_a = this.closeButton) == null ? void 0 : _a.button.setAttribute("tabindex", this.active ? "0" : "-1");
+    const ariaSelected = this.active ? "true" : "false";
+    setAttributeIfDifferent(this, "aria-selected", ariaSelected);
+    const closeButtonTabIndex = this.active ? "0" : "-1";
+    if ((_a = this.closeButton) == null ? void 0 : _a.button) {
+      setAttributeIfDifferent(
+        this.closeButton.button,
+        "tabindex",
+        closeButtonTabIndex
+      );
+    }
   }
   handleDisabledChange() {
-    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
-    this.tabIndex = this.disabled ? -1 : 0;
+    const ariaDisabled = this.disabled ? "true" : "false";
+    setAttributeIfDifferent(this, "aria-disabled", ariaDisabled);
+    const tabIndexValue = this.disabled ? -1 : 0;
+    if (this.tabIndex !== tabIndexValue) {
+      this.tabIndex = tabIndexValue;
+    }
   }
   render() {
-    var _a;
-    this.id = this.id.length > 0 ? this.id : this.componentId;
     return html`
       <div
         part="base"
@@ -74,9 +99,9 @@ var DSATab = class extends ShoelaceElement {
         tabindex=${ifDefined(this.disabled ? "-1" : null)}
       >
         <div class="tab__content">
-          <slot part="label"></slot>
+          <slot part="label" @slotchange=${this.handleDefaultSlotChange}></slot>
           <div class="tab__width-placeholder">
-            ${(_a = this.defaultSlot) == null ? void 0 : _a.assignedNodes().map((node) => node.cloneNode(true))}
+            ${this.widthPlaceholderNodes}
           </div>
         </div>
         ${this.closable ? html`
@@ -96,11 +121,14 @@ var DSATab = class extends ShoelaceElement {
 };
 DSATab.styles = tab_styles_default;
 DSATab.dependencies = { "dsa-icon-button": DSAIconButton };
+__decorateClass([
+  state()
+], DSATab.prototype, "widthPlaceholderNodes", 2);
 __decorateClass([
   query(".tab")
 ], DSATab.prototype, "tab", 2);
 __decorateClass([
-  query("[part~=close-button]")
+  query(".tab__close-button")
 ], DSATab.prototype, "closeButton", 2);
 __decorateClass([
   query("slot:not([name])")

package/dist/chunks/{chunk.GUKOZGE3.js → chunk.MJ6DIYWF.js}

@@ -1,6 +1,6 @@
 import {
   DSAIcon
-} from "./chunk.CKJJ4MSU.js";
+} from "./chunk.NJQ6BFQQ.js";
 import {
   ShoelaceElement
 } from "./chunk.SVWU6JW4.js";

package/dist/chunks/{chunk.WNESPUKK.js → chunk.MWPOWC6N.js}

@@ -1,6 +1,6 @@
 import {
   icon_button_styles_default
-} from "./chunk.QEXDSP5Y.js";
+} from "./chunk.47CX6JJX.js";
 import {
   a11yWarning
 } from "./chunk.PWL7QCVG.js";
@@ -9,7 +9,7 @@ import {
 } from "./chunk.ZQJVCRB2.js";
 import {
   DSAIcon
-} from "./chunk.CKJJ4MSU.js";
+} from "./chunk.NJQ6BFQQ.js";
 import {
   ShoelaceElement
 } from "./chunk.SVWU6JW4.js";
@@ -102,7 +102,7 @@ var DSAIconButton = class extends ShoelaceElement {
         aria-disabled=${ifDefined(this.disabled && isLink ? "true" : void 0)}
         aria-pressed=${ifDefined(this.toggle ? this.pressed : void 0)}
         aria-label=${ifDefinedAndNotEmpty(this.label)}
-        aria-describedby="description"
+        aria-describedby=${ifDefined(this.description ? "description" : void 0)}
         tabindex=${this.disableTabIndex || this.disabled ? "-1" : "0"}
         @blur=${this.handleBlur}
         @focus=${this.handleFocus}

package/dist/chunks/{chunk.YKL22V4E.js → chunk.N2V4KI76.js}

@@ -1,6 +1,6 @@
 import {
   footer_sitemap_styles_default
-} from "./chunk.JVIWPP43.js";
+} from "./chunk.IEYQPZRM.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";

package/dist/chunks/{chunk.YMBSK45L.js → chunk.NBEDK6M4.js}

@@ -81,6 +81,7 @@ var page_header_styles_default = css`
   .tags {
     display: flex;
     gap: var(--dsa-spacing-12);
+    flex-wrap: wrap;
   }
 
   .text-second-line {
@@ -106,6 +107,7 @@ var page_header_styles_default = css`
   .actions {
     display: flex;
     gap: var(--dsa-spacing-16);
+    flex-wrap: wrap;
   }
 
   /* 

package/dist/chunks/{chunk.WJFVQRWU.js → chunk.NC6NNDYD.js}

@@ -1,6 +1,6 @@
 import {
   DSAIcon
-} from "./chunk.CKJJ4MSU.js";
+} from "./chunk.NJQ6BFQQ.js";
 import {
   ShoelaceElement
 } from "./chunk.SVWU6JW4.js";

package/dist/chunks/{chunk.SOF3BQCV.js → chunk.NGEL5LW3.js}

@@ -1,15 +1,19 @@
 import {
   DSAInternalRadioIcon
-} from "./chunk.GUKOZGE3.js";
+} from "./chunk.MJ6DIYWF.js";
 import {
   DSAInternalCheckboxBox
-} from "./chunk.WJFVQRWU.js";
+} from "./chunk.NC6NNDYD.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
 import {
   DSAIcon
-} from "./chunk.CKJJ4MSU.js";
+} from "./chunk.NJQ6BFQQ.js";
+import {
+  removeAttributeIfPresent,
+  setAttributeIfDifferent
+} from "./chunk.PSYTLBRK.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";
@@ -142,17 +146,17 @@ var form_selectable_card_styles_default = css`
     pointer-events: none;
   }
 
-  .selectable-card.selectable-card--readonly {
+  .selectable-card--readonly {
     background-color: var(--dsa-wc-selectable-card-read-only-background-color);
     border-color: var(--dsa-wc-selectable-card-read-only-border-color);
   }
 
-  .selectable-card.selectable-card--disabled {
+  .selectable-card--disabled {
     background-color: var(--dsa-wc-selectable-card-disabled-background-color);
     border-color: var(--dsa-wc-selectable-card-disabled-border-color);
   }
-  .selectable-card.selectable-card--disabled .selectable-card__label,
-  .selectable-card.selectable-card--disabled .selectable-card__description {
+  .selectable-card--disabled .selectable-card__label,
+  .selectable-card--disabled .selectable-card__description {
     color: var(--dsa-wc-selectable-card-disabled-color);
   }
 
@@ -199,9 +203,9 @@ var FormSelectableCard = class extends ShoelaceElement {
   }
   handleDisabledChange() {
     if (this.readonly || this.parentReadonly) {
-      this.button.setAttribute("aria-disabled", "true");
+      setAttributeIfDifferent(this.button, "aria-disabled", "true");
     } else {
-      this.button.removeAttribute("aria-disabled");
+      removeAttributeIfPresent(this.button, "aria-disabled");
     }
   }
   /** Sets focus on the radio button. */