@ds-autonomie/web-components 2.13.0 → 2.14.0

package/cdn/chunks/{chunk.KOCETN2L.js → chunk.G2SVIJQS.js}

@@ -3,18 +3,19 @@ import {
 } from "./chunk.WFSNJLGP.js";
 import {
   tag_styles_default
-} from "./chunk.FSMUXFAQ.js";
+} from "./chunk.PSBVXVMH.js";
 import {
   LocalizeController
-} from "./chunk.IUTJLFMA.js";
+} from "./chunk.AXLGDJN5.js";
 import {
-  e2 as e
+  e2
 } from "./chunk.JY4LUWQC.js";
 import {
   watch
 } from "./chunk.TKTCYZRK.js";
 import {
   ShoelaceElement,
+  e,
   n,
   t
 } from "./chunk.TEKUWOCD.js";
@@ -36,6 +37,8 @@ var DSATag = class extends ShoelaceElement {
     this.size = "medium";
     this.removable = false;
     this.label = "";
+    this.accessibleName = "";
+    this.tooltip = false;
   }
   handleRemoveClick() {
     this.emit("dsa-remove");
@@ -54,6 +57,7 @@ var DSATag = class extends ShoelaceElement {
     }
   }
   render() {
+    var _a;
     if (DEPRECATED_TAG_VARIANTS.includes(
       this.variant
     )) {
@@ -61,10 +65,14 @@ var DSATag = class extends ShoelaceElement {
         `The ${this.variant} variant of <dsa-tag> is deprecated, and will be removed in the next major release. Please consider using a variant from 100 to 500 instead.`
       );
     }
+    const enhancedLabel = this.accessibleName ? x`
+          <span aria-hidden="true">${this.label}</span
+          ><dsa-visually-hidden>${this.accessibleName}</dsa-visually-hidden>
+        ` : this.label;
     return x`
       <span
         part="base"
-        class=${e({
+        class=${e2({
       tag: true,
       // Variant
       [`tag--${this.variant}`]: true,
@@ -78,7 +86,14 @@ var DSATag = class extends ShoelaceElement {
       >
         <slot part="prefix" name="prefix" class="tag__prefix"></slot>
 
-        <span class="tag__content"> ${this.label} </span>
+        ${this.tooltip ? x`
+              <dsa-tooltip distance="16">
+                <span slot="content" aria-hidden="true">${enhancedLabel}</span>
+                <span class="tag__content tag__trigger" tabindex="0">
+                  ${enhancedLabel}
+                </span>
+              </dsa-tooltip>
+            ` : x`<span class="tag__content">${enhancedLabel}</span>`}
 
         <slot part="suffix" name="suffix" class="tag__suffix"></slot>
 
@@ -87,7 +102,7 @@ var DSATag = class extends ShoelaceElement {
                 part="remove-button"
                 exportparts="base:remove-button__base"
                 name="close"
-                label=${`${this.localize.term("remove")} ${this.label}`}
+                label=${`${this.localize.term("remove")} ${(_a = this.accessibleName) != null ? _a : this.label}`}
                 class="tag__remove"
                 size=${this.iconButtonSize}
                 @click=${this.handleRemoveClick}
@@ -100,6 +115,12 @@ var DSATag = class extends ShoelaceElement {
   }
 };
 DSATag.styles = tag_styles_default;
+__decorateClass([
+  e(".tag__content")
+], DSATag.prototype, "content", 2);
+__decorateClass([
+  e("dsa-icon-button")
+], DSATag.prototype, "removeButton", 2);
 __decorateClass([
   n({ type: Boolean, attribute: "disable-removable-focus" })
 ], DSATag.prototype, "disableRemovableFocus", 2);
@@ -115,6 +136,12 @@ __decorateClass([
 __decorateClass([
   n()
 ], DSATag.prototype, "label", 2);
+__decorateClass([
+  n({ attribute: "accessible-name" })
+], DSATag.prototype, "accessibleName", 2);
+__decorateClass([
+  n({ type: Boolean })
+], DSATag.prototype, "tooltip", 2);
 __decorateClass([
   watch("size")
 ], DSATag.prototype, "updateIconButtonSize", 1);

package/cdn/chunks/{chunk.IJML6NHK.js → chunk.GSJB73YG.js}

@@ -29,7 +29,7 @@ import {
 } from "./chunk.SUUV7E4I.js";
 import {
   LocalizeController
-} from "./chunk.IUTJLFMA.js";
+} from "./chunk.AXLGDJN5.js";
 import {
   o
 } from "./chunk.XED65RH5.js";
@@ -154,7 +154,7 @@ var DSASelect = class extends FormControlLayout {
     }
     if (["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
       const allOptions = this.getAllOptions();
-      const currentIndex = allOptions.indexOf(this.currentOption);
+      const currentIndex = this.currentOption ? allOptions.indexOf(this.currentOption) : -1;
       let newIndex = Math.max(0, currentIndex);
       event.preventDefault();
       if (!this.open) {
@@ -305,10 +305,6 @@ var DSASelect = class extends FormControlLayout {
   getAllOptions() {
     return [...this.querySelectorAll("dsa-option")];
   }
-  // Gets the first <dsa-option> element
-  getFirstOption() {
-    return this.querySelector("dsa-option");
-  }
   // Sets the current option, which is the option the user is currently interacting with (e.g. via keyboard). Only one
   // option may be "current" at a time.
   setCurrentOption(option) {
@@ -322,6 +318,8 @@ var DSASelect = class extends FormControlLayout {
       option.current = true;
       option.tabIndex = 0;
       option.focus();
+    } else {
+      this.currentOption = void 0;
     }
   }
   // Sets the selected option(s)
@@ -384,7 +382,6 @@ var DSASelect = class extends FormControlLayout {
   }
   async handleOpenChange() {
     if (this.open && !this.disabled && !this.readonly) {
-      this.setCurrentOption(this.selectedOptions[0] || this.getFirstOption());
       this.emit("dsa-show");
       this.addOpenListeners();
       await stopAnimations(this);
@@ -411,6 +408,7 @@ var DSASelect = class extends FormControlLayout {
       await animateTo(this.popup.popup, keyframes, options);
       this.listbox.hidden = true;
       this.popup.active = false;
+      this.setCurrentOption(void 0);
       this.emit("dsa-after-hide");
     }
   }

package/cdn/chunks/{chunk.QRMD4CZI.js → chunk.HBQ2CUEK.js}

@@ -1,6 +1,9 @@
 import {
   DSASelect
-} from "./chunk.IJML6NHK.js";
+} from "./chunk.GSJB73YG.js";
+import {
+  getPhoneConfig
+} from "./chunk.YKKP7YAT.js";
 import {
   input_phone_styles_default
 } from "./chunk.6PLXHBET.js";
@@ -8,9 +11,6 @@ import {
   frenchNumberPrefix,
   phonePrefixOptions
 } from "./chunk.RJXLIOW7.js";
-import {
-  getPhoneConfig
-} from "./chunk.YKKP7YAT.js";
 import {
   maskedValueToRawValue,
   rawValueToMaskedValue,
@@ -21,7 +21,7 @@ import {
 } from "./chunk.AYVXBNFN.js";
 import {
   l
-} from "./chunk.E6U524GP.js";
+} from "./chunk.5YWOUFLR.js";
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.SUUV7E4I.js";
@@ -258,7 +258,7 @@ var DSAInputPhone = class extends InputBase {
           .value=${this.phonePrefix}
           ?disabled=${this.disabled}
           ?readonly=${this.readonly}
-          title=${this.localize.term("countryCallingCode")}
+          accessible-name=${this.localize.term("countryCallingCode")}
           .placement=${this.placement}
           hoist
           .size=${this.size}

package/cdn/chunks/{chunk.HD52LE6J.js → chunk.I6BMKPEG.js}

@@ -1,9 +1,9 @@
 import {
   DSAInputTime
-} from "./chunk.KNXOB4UE.js";
+} from "./chunk.JRRGTRHM.js";
 import {
   DSAInputDate
-} from "./chunk.IWCZNIF5.js";
+} from "./chunk.SFB5GQLQ.js";
 import {
   InputBase
 } from "./chunk.AYVXBNFN.js";

package/cdn/chunks/chunk.I6O5BUMW.js

@@ -0,0 +1,193 @@
+import {
+  cnsaLogoNoSubtextSvg,
+  spaLogoSvg
+} from "./chunk.YUKVCPXW.js";
+import {
+  header_modern_styles_default
+} from "./chunk.NXQMWO3B.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  LocalizeController
+} from "./chunk.AXLGDJN5.js";
+import {
+  e2
+} from "./chunk.JY4LUWQC.js";
+import {
+  watch
+} from "./chunk.TKTCYZRK.js";
+import {
+  ShoelaceElement,
+  e,
+  n,
+  t
+} from "./chunk.TEKUWOCD.js";
+import {
+  x
+} from "./chunk.JXF4O366.js";
+import {
+  __decorateClass
+} from "./chunk.7WRNLPGX.js";
+
+// src/components/header-modern/header-modern.ts
+var DSAHeaderModern = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "external-links",
+      "second-logo",
+      "site-name",
+      "search",
+      "navbar"
+    );
+    this.localize = new LocalizeController(this);
+    this.firstLogo = "public";
+    this.searchExpanded = false;
+    this.mobile = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleSearchExpandEvent = this.handleSearchExpandEvent.bind(this);
+    this.handleSearchCollapseEvent = this.handleSearchCollapseEvent.bind(this);
+    this.addEventListener("dsa-expand", this.handleSearchExpandEvent);
+    this.addEventListener("dsa-collapse", this.handleSearchCollapseEvent);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("dsa-expand", this.handleSearchExpandEvent);
+    this.removeEventListener("dsa-collapse", this.handleSearchCollapseEvent);
+  }
+  handleSearchExpandEvent() {
+    this.searchExpanded = true;
+  }
+  handleSearchCollapseEvent() {
+    this.searchExpanded = false;
+  }
+  getFirtLogo() {
+    if (this.firstLogo === "pro") {
+      return spaLogoSvg(this.localize.term("spa"));
+    }
+    return cnsaLogoNoSubtextSvg(this.localize.term("cnsa"));
+  }
+  handleSearchExpanded() {
+    if (this.hasSlotController.test("search")) {
+      const search = this.querySelector("dsa-header-search");
+      if (search !== null) {
+        search.expanded = this.searchExpanded;
+      }
+    }
+  }
+  handleMobile() {
+    if (this.hasSlotController.test("search")) {
+      const search = this.querySelector("dsa-header-search");
+      if (search !== null && this.mobile !== void 0) {
+        search.mobile = this.mobile;
+      }
+    }
+  }
+  render() {
+    if (!this.hasSlotController.test("site-name")) {
+      console.warn(
+        "(DSA) The <site-name> slot is required. Please use a link to your homepage in the <site-name> slot."
+      );
+    }
+    return x`
+      <header
+        part="base"
+        role="banner"
+        class=${e2({
+      header: true,
+      "header--mobile": this.mobile === true,
+      "header--desktop": this.mobile === false,
+      "header--spa": this.firstLogo === "pro",
+      "header--cnsa": this.firstLogo === "public",
+      "header--with-external-links": this.hasSlotController.test("external-links"),
+      "header--with-second-logo": this.hasSlotController.test("second-logo"),
+      "header--with-navbar": this.hasSlotController.test("navbar")
+    })}
+      >
+        <ul class="external-links__container">
+          <slot name="external-links" part="external-links"></slot>
+        </ul>
+
+        <div class="header__main-container">
+          <section
+            part="main"
+            class=${e2({
+      header__main: true,
+      "header--search-expanded": this.hasSlotController.test("search") && this.searchExpanded
+    })}
+          >
+            <div class="header__brand-top">
+              <slot
+                name="first-logo"
+                part="first-logo"
+                class=${e2({
+      logo: true
+    })}
+              >
+                ${this.getFirtLogo()}
+              </slot>
+              ${!this.mobile ? x`
+                    <div class="header__brand">
+                      <slot
+                        id="second-logo"
+                        name="second-logo"
+                        class="logo"
+                      ></slot>
+                      <slot name="site-name" part="site-name"></slot>
+                    </div>
+                  ` : ""}
+            </div>
+            <div class="header__actions">
+              <slot name="search" part="search"></slot>
+              <slot part="navigation"></slot>
+            </div>
+            ${this.mobile ? x`
+                  <div class="header__brand">
+                    <slot
+                      id="second-logo"
+                      name="second-logo"
+                      class="logo"
+                    ></slot>
+                    <slot name="site-name" part="site-name"></slot>
+                  </div>
+                ` : ""}
+          </section>
+        </div>
+
+        <div class="header__navbar-container">
+          <slot name="navbar" part="navbar"></slot>
+        </div>
+      </header>
+    `;
+  }
+};
+DSAHeaderModern.styles = header_modern_styles_default;
+__decorateClass([
+  e('[part="external-links"]')
+], DSAHeaderModern.prototype, "externalLinks", 2);
+__decorateClass([
+  n({ reflect: true, attribute: "first-logo" })
+], DSAHeaderModern.prototype, "firstLogo", 2);
+__decorateClass([
+  n({ reflect: true, type: Boolean, attribute: "search-expanded" })
+], DSAHeaderModern.prototype, "searchExpanded", 2);
+__decorateClass([
+  n({ type: Boolean })
+], DSAHeaderModern.prototype, "mobile", 2);
+__decorateClass([
+  watch("searchExpanded")
+], DSAHeaderModern.prototype, "handleSearchExpanded", 1);
+__decorateClass([
+  watch("mobile")
+], DSAHeaderModern.prototype, "handleMobile", 1);
+DSAHeaderModern = __decorateClass([
+  t("dsa-header-modern")
+], DSAHeaderModern);
+
+export {
+  DSAHeaderModern
+};

package/cdn/chunks/{chunk.CCG62HSL.js → chunk.IIYHRPGQ.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.IUTJLFMA.js";
+} from "./chunk.AXLGDJN5.js";
 import {
   o
 } from "./chunk.XED65RH5.js";

package/cdn/chunks/{chunk.JJZU37TO.js → chunk.IJCMZSUR.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.KPERDNOW.js";
 import {
   LocalizeController
-} from "./chunk.IUTJLFMA.js";
+} from "./chunk.AXLGDJN5.js";
 import {
   e2 as e
 } from "./chunk.JY4LUWQC.js";

package/cdn/chunks/{chunk.3YZ3B66O.js → chunk.IXYMG74O.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.IUTJLFMA.js";
+} from "./chunk.AXLGDJN5.js";
 import {
   e2 as e
 } from "./chunk.JY4LUWQC.js";

package/cdn/chunks/{chunk.ZSS3MAEC.js → chunk.J2572HZK.js}

@@ -18,7 +18,7 @@ import {
 } from "./chunk.CCDITBCR.js";
 import {
   LocalizeController
-} from "./chunk.IUTJLFMA.js";
+} from "./chunk.AXLGDJN5.js";
 import {
   o
 } from "./chunk.XED65RH5.js";

package/cdn/chunks/{chunk.KNXOB4UE.js → chunk.JRRGTRHM.js}

@@ -14,7 +14,7 @@ import {
 } from "./chunk.EMIT7S33.js";
 import {
   l
-} from "./chunk.E6U524GP.js";
+} from "./chunk.5YWOUFLR.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
@@ -31,7 +31,7 @@ import {
 } from "./chunk.SUUV7E4I.js";
 import {
   LocalizeController
-} from "./chunk.IUTJLFMA.js";
+} from "./chunk.AXLGDJN5.js";
 import {
   o
 } from "./chunk.XED65RH5.js";

package/cdn/chunks/{chunk.SY3EVBNT.js → chunk.JTLVEFWT.js}

@@ -33,6 +33,9 @@ var skip_link_item_styles_default = i`
     outline: var(--dsa-wc-focus-ring);
     outline-offset: var(--dsa-wc-focus-ring-offset);
   }
+  .skip-link-item__label {
+    display: inline-block;
+  }
 `;
 
 export {

package/cdn/chunks/{chunk.S4IPKDIZ.js → chunk.KGCF4GE3.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.I5IKEQES.js";
 import {
   FilterBase
-} from "./chunk.4Q2WUHBV.js";
+} from "./chunk.6T4NTP5P.js";
 import {
   filter_range_styles_default
 } from "./chunk.DNBIVA4J.js";

package/cdn/chunks/{chunk.KA5KPMKE.js → chunk.KJEDKAAU.js}

@@ -30,7 +30,7 @@ import {
 } from "./chunk.SUUV7E4I.js";
 import {
   LocalizeController
-} from "./chunk.IUTJLFMA.js";
+} from "./chunk.AXLGDJN5.js";
 import {
   o
 } from "./chunk.XED65RH5.js";

package/cdn/chunks/{chunk.J7IAZRFK.js → chunk.L2BUQDZM.js}

@@ -1,6 +1,6 @@
 import {
   DSARadioGroup
-} from "./chunk.ZRTVJE3I.js";
+} from "./chunk.RNIIRHX6.js";
 import {
   FormToggleButton
 } from "./chunk.OHT2CDR3.js";

package/cdn/chunks/{chunk.ALIVM5IK.js → chunk.M4JIV4Y5.js}

@@ -18,7 +18,7 @@ import {
 } from "./chunk.PWL7QCVG.js";
 import {
   LocalizeController
-} from "./chunk.IUTJLFMA.js";
+} from "./chunk.AXLGDJN5.js";
 import {
   e2
 } from "./chunk.JY4LUWQC.js";
@@ -190,7 +190,7 @@ var DSATooltip = class extends ShoelaceElement {
   /** Automatically adds an accessible description to the trigger element */
   handleDefaultSlotChange() {
     const target = this.querySelector(
-      "dsa-button, dsa-icon-button"
+      "dsa-button, dsa-icon-button, .tag__trigger"
     );
     target == null ? void 0 : target.setAttribute("description", this.content);
     if (!target) {

package/cdn/chunks/{chunk.BR3HXIYO.js → chunk.MF7YPS4H.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.SUUV7E4I.js";
 import {
   LocalizeController
-} from "./chunk.IUTJLFMA.js";
+} from "./chunk.AXLGDJN5.js";
 import {
   e2
 } from "./chunk.JY4LUWQC.js";

package/cdn/chunks/{chunk.LAHTYN7O.js → chunk.MY7IDU47.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.AYVXBNFN.js";
 import {
   l
-} from "./chunk.E6U524GP.js";
+} from "./chunk.5YWOUFLR.js";
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.SUUV7E4I.js";

package/cdn/chunks/{chunk.TRBARQEX.js → chunk.NP4PGPAG.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.6K7NEU66.js";
 import {
   LocalizeController
-} from "./chunk.IUTJLFMA.js";
+} from "./chunk.AXLGDJN5.js";
 import {
   ShoelaceElement,
   t

package/cdn/chunks/{chunk.CPYSCXYB.js → chunk.NR7XWVN5.js}

@@ -1,6 +1,6 @@
 import {
   LocalizeController
-} from "./chunk.IUTJLFMA.js";
+} from "./chunk.AXLGDJN5.js";
 import {
   ShoelaceElement,
   n,

package/cdn/chunks/{chunk.7IKGNEUS.js → chunk.NRSRHNP4.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.IUTJLFMA.js";
+} from "./chunk.AXLGDJN5.js";
 import {
   e2
 } from "./chunk.JY4LUWQC.js";