@ds-autonomie/web-components 2.12.0 → 2.14.0

package/cdn/chunks/chunk.NXQMWO3B.js

@@ -0,0 +1,266 @@
+import {
+  component_styles_default
+} from "./chunk.MQAAYEM3.js";
+import {
+  i
+} from "./chunk.UKK3NS3L.js";
+
+// src/components/header-modern/header-modern.styles.ts
+var header_modern_styles_default = i`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+    --internal-header-padding-inline: var(
+      --header-padding-inline,
+      var(--dsa-wc-header-padding-x)
+    );
+  }
+  @media only screen and (min-width: 1440px) {
+    :host {
+      --internal-header-padding-inline: var(
+        --header-padding-inline,
+        var(--dsa-wc-header-x-large-padding-x)
+      );
+    }
+  }
+
+  .header {
+    background: var(--dsa-wc-header-background);
+    box-shadow: var(--dsa-wc-header-box-shadow);
+  }
+
+  .header--desktop {
+    --internal-header-padding-inline: var(
+      --header-padding-inline,
+      var(--dsa-wc-header-medium-padding-x)
+    );
+  }
+
+  [part~='external-links'],
+  [part~='main'],
+  [part~='navbar'] {
+    width: 100%;
+    /* stylelint-disable-next-line */
+    max-width: var(--header-max-width);
+  }
+
+  /*
+  * External links
+  */
+  .external-links__container {
+    margin: 0;
+    display: none;
+    justify-content: center;
+    padding: 0 var(--internal-header-padding-inline);
+  }
+
+  .header--desktop.header--with-external-links .external-links__container {
+    display: flex;
+    justify-content: center;
+    padding: 0 var(--internal-header-padding-inline);
+    margin: 0;
+    border-bottom: 1px solid var(--dsa-color-divider-background);
+  }
+
+  .header--desktop.header--with-external-links [part~='external-links'] {
+    display: flex;
+    justify-content: end;
+    padding-block: var(--dsa-wc-header-external-links-padding-y);
+  }
+
+  /*
+   * Main 
+  */
+  .header__main-container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    padding-inline: var(--internal-header-padding-inline);
+    overflow: auto;
+  }
+
+  .header__main {
+    width: 100%;
+    display: grid;
+    grid-template:
+      'firstLogo actions'
+      'brand brand'
+      / var(--dsa-wc-header-logo-width-mobile) auto;
+    grid-column-gap: var(--dsa-spacing-16);
+  }
+
+  .header--mobile
+    .header__main-container:has([part~='site-name']:focus-within) {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: -1px;
+  }
+  .header--desktop [part~='main'] {
+    padding-block: var(--dsa-wc-header-main-medium-padding-y);
+    display: flex;
+    align-items: center;
+  }
+
+  /* Brand */
+  .header__brand-top {
+    position: relative;
+    grid-area: firstLogo;
+    display: flex;
+    gap: 16px;
+    padding-block: 8px;
+    border-radius: var(--dsa-radius-4);
+  }
+  .header--desktop .header__brand-top:hover {
+    background: var(--dsa-color-background-hover);
+  }
+  .header--desktop .header__brand-top:focus-within {
+    outline: var(--dsa-wc-focus-ring);
+  }
+  .header--desktop .header__brand-top {
+    margin: -4px -8px;
+    padding: 4px 8px;
+  }
+
+  #second-logo {
+    display: none;
+  }
+  .header--with-second-logo #second-logo {
+    display: flex;
+    margin-right: var(--dsa-spacing-16);
+  }
+  .header--desktop.header--with-second-logo #second-logo {
+    margin-right: var(--dsa-spacing-32);
+  }
+
+  .header__brand {
+    display: none;
+  }
+  .header__brand {
+    display: flex;
+    align-items: center;
+    padding-block: var(--dsa-spacing-8);
+    border-top: 1px solid var(--dsa-color-divider-background);
+    grid-area: brand;
+    flex-shrink: 0;
+  }
+  .header--mobile .header__brand:after {
+    content: '';
+    flex: 1 1 0%;
+    margin-block: -8px;
+    align-self: stretch;
+    z-index: 1;
+  }
+
+  .logo {
+    display: flex;
+    justify-content: center;
+    width: var(--dsa-wc-header-logo-width-mobile);
+    height: var(--dsa-wc-header-logo-height-mobile);
+  }
+
+  .header--desktop .header__brand {
+    padding: 0;
+    border: none;
+  }
+
+  .header--desktop .logo {
+    width: var(--dsa-wc-header-logo-width-desktop);
+    height: var(--dsa-wc-header-logo-height-desktop);
+  }
+
+  .header--mobile.header--cnsa [part~='first-logo'] {
+    width: var(--dsa-wc-header-modern-cnsa-logo-width-mobile);
+    align-self: center;
+  }
+  .header--desktop.header--cnsa [part~='first-logo'] {
+    width: var(--dsa-wc-header-modern-cnsa-logo-width-desktop);
+    height: var(--dsa-wc-header-modern-cnsa-logo-height-desktop);
+    padding-bottom: var(
+      --dsa-wc-header-modern-cnsa-logo-padding-bottom-desktop
+    );
+  }
+
+  [part~='site-name']::slotted(*) {
+    color: var(--dsa-wc-header-modern-site-name-color);
+    font-family: var(--dsa-wc-header-modern-site-name-font-family);
+    font-weight: var(--dsa-wc-header-modern-site-name-font-weight);
+    text-decoration: none;
+    outline: none;
+  }
+  [part~='site-name']::slotted(*)::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+  }
+
+  .header--mobile [part~='site-name']::slotted(*) {
+    font-size: var(--dsa-wc-header-modern-site-name-font-size-mobile);
+  }
+  .header--desktop [part~='site-name']::slotted(*) {
+    font-size: var(--dsa-wc-header-modern-site-name-font-size-desktop);
+  }
+  .header--desktop.header--cnsa [part~='site-name']::slotted(*) {
+    padding-left: var(
+      --dsa-wc-header-modern-cnsa-site-name-padding-left-desktop
+    );
+    border-left: var(--dsa-wc-header-modern-cnsa-site-name-border-desktop);
+    line-height: var(--dsa-wc-header-modern-site-name-line-height-desktop);
+  }
+
+  /* Actions */
+  .header__actions {
+    z-index: 5;
+    grid-area: actions;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--dsa-spacing-16);
+    min-height: var(--dsa-wc-header-logo-height-mobile);
+    padding-block: var(--dsa-spacing-8);
+  }
+
+  [part~='search'] {
+    flex: 1;
+  }
+
+  .header--search-expanded [part~='navigation'] {
+    display: none;
+  }
+
+  .header--mobile .header--search-expanded {
+    display: block;
+  }
+  .header--mobile .header--search-expanded .header__actions {
+    padding-block: var(--dsa-spacing-10);
+  }
+  .header--mobile .header--search-expanded .header__brand-top,
+  .header--mobile .header--search-expanded .header__brand {
+    display: none;
+  }
+
+  .header--desktop .header__actions {
+    gap: var(--dsa-spacing-32);
+    padding: 0;
+  }
+
+  /* 
+  * Navbar
+  */
+  .header__navbar-container {
+    display: none;
+  }
+  .header--desktop.header--with-navbar .header__navbar-container {
+    display: flex;
+    justify-content: center;
+    border-top: 1px solid var(--dsa-color-divider-background);
+    padding-inline: var(--internal-header-padding-inline);
+  }
+  .header--desktop.header--with-navbar [part~='navbar'] {
+    display: block;
+  }
+`;
+
+export {
+  header_modern_styles_default
+};

package/cdn/chunks/{chunk.VN25W2LD.js → chunk.O4UP6LFM.js}

@@ -17,35 +17,37 @@ var header_styles_default = i`
     );
   }
 
-  [part~='base'] {
+  .header {
     background: var(--dsa-wc-header-background);
     box-shadow: var(--dsa-wc-header-box-shadow);
   }
-  ul {
-    margin: 0;
-    padding: 0;
-  }
 
   .external-links__container {
+    margin: 0;
     display: none;
     justify-content: center;
-    padding-inline: var(--internal-header-padding-inline);
+    padding: 0 var(--internal-header-padding-inline);
   }
-  .header-main__container {
+  .header__main-container {
     display: flex;
     justify-content: center;
     padding-inline: var(--internal-header-padding-inline);
     overflow: auto;
   }
 
+  .header__navbar-container {
+    display: none;
+  }
+
   [part~='external-links'],
-  [part~='main'] {
+  [part~='main'],
+  [part~='navbar'] {
     width: 100%;
     /* stylelint-disable-next-line */
     max-width: var(--header-max-width);
   }
 
-  [part~='main'] {
+  .header__main {
     width: 100%;
     display: grid;
     grid-template:
@@ -55,7 +57,7 @@ var header_styles_default = i`
     grid-column-gap: var(--dsa-spacing-16);
     padding-block: var(--dsa-wc-header-main-padding-y);
   }
-  .has-brand {
+  .header--has-brand {
     grid-template:
       'firstLogo actions'
       'brand brand'
@@ -76,10 +78,17 @@ var header_styles_default = i`
     border-radius: var(--dsa-wc-focus-ring-radius);
   }
 
-  [part~='brand'] {
+  #second-logo {
     display: none;
   }
-  .has-brand [part~='brand'] {
+  .header--with-second-logo #second-logo {
+    display: flex;
+  }
+
+  .header__brand {
+    display: none;
+  }
+  .header--has-brand .header__brand {
     display: flex;
     align-items: center;
     gap: var(--dsa-spacing-16);
@@ -97,6 +106,10 @@ var header_styles_default = i`
   }
 
   .site-info {
+    display: none;
+  }
+
+  .header--with-site-info .site-info {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -115,7 +128,7 @@ var header_styles_default = i`
     margin: 0;
   }
 
-  [part~='actions'] {
+  .header__actions {
     grid-area: actions;
     flex: 1;
     display: flex;
@@ -140,12 +153,13 @@ var header_styles_default = i`
   }
 
   .header--mobile .header--search-expanded [part~='first-logo'],
-  .header--mobile .header--search-expanded [part~='brand'] {
+  .header--mobile .header--search-expanded .header__brand {
     display: none;
   }
 
-  /* Desktop-specific styles */
-
+  /* 
+  * Desktop-specific styles 
+  */
   .header--desktop {
     --internal-header-padding-inline: var(
       --header-padding-inline,
@@ -153,12 +167,15 @@ var header_styles_default = i`
     );
   }
 
-  .header--desktop .external-links__container {
+  .header--desktop.header--with-external-links .external-links__container {
     display: flex;
+    justify-content: center;
+    padding: 0 var(--internal-header-padding-inline);
+    margin: 0;
     border-bottom: 1px solid var(--dsa-color-divider-background);
   }
 
-  .header--desktop [part~='external-links'] {
+  .header--desktop.header--with-external-links [part~='external-links'] {
     display: flex;
     justify-content: end;
     padding-block: var(--dsa-wc-header-external-links-padding-y);
@@ -170,7 +187,7 @@ var header_styles_default = i`
     align-items: center;
   }
 
-  .header--desktop .has-brand [part~='brand'] {
+  .header--desktop .header--has-brand .header__brand {
     gap: var(--dsa-spacing-32);
     padding-top: 0;
     border: none;
@@ -198,10 +215,20 @@ var header_styles_default = i`
     font: var(--dsa-wc-header-baseline-font-desktop);
   }
 
-  .header--desktop [part~='actions'] {
+  .header--desktop .header__actions {
     gap: var(--dsa-spacing-32);
   }
 
+  .header--desktop.header--with-navbar .header__navbar-container {
+    display: flex;
+    justify-content: center;
+    border-top: 1px solid var(--dsa-color-divider-background);
+    padding-inline: var(--internal-header-padding-inline);
+  }
+  .header--desktop.header--with-navbar [part~='navbar'] {
+    display: block;
+  }
+
   @media only screen and (min-width: 1440px) {
     :host {
       --internal-header-padding-inline: var(

package/cdn/chunks/{chunk.ZF3LJFGB.js → chunk.OBQI5SCI.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.3VGPRUUT.js";
 import {
   l
-} from "./chunk.E6U524GP.js";
+} from "./chunk.5YWOUFLR.js";
 import {
   animateTo,
   shimKeyframesHeightAuto,
@@ -15,7 +15,7 @@ import {
 } from "./chunk.CCDITBCR.js";
 import {
   LocalizeController
-} from "./chunk.IUTJLFMA.js";
+} from "./chunk.AXLGDJN5.js";
 import {
   e2
 } from "./chunk.JY4LUWQC.js";

package/cdn/chunks/{chunk.CE4QX5GY.js → chunk.OOJHJQ3U.js}

@@ -14,7 +14,7 @@ import {
 } from "./chunk.PWL7QCVG.js";
 import {
   LocalizeController
-} from "./chunk.IUTJLFMA.js";
+} from "./chunk.AXLGDJN5.js";
 import {
   o
 } from "./chunk.XED65RH5.js";
@@ -87,6 +87,20 @@ var DSAAlert = class extends ShoelaceElement {
         return "info";
     }
   }
+  getIconLabel() {
+    switch (this.variant) {
+      case "danger":
+        return this.localize.term("error");
+      case "neutral":
+        return void 0;
+      case "success":
+        return this.localize.term("success");
+      case "warning":
+        return this.localize.term("warning");
+      default:
+        return this.localize.term("info");
+    }
+  }
   async handleOpenChange() {
     if (this.open) {
       this.emit("dsa-show");
@@ -191,6 +205,7 @@ var DSAAlert = class extends ShoelaceElement {
             class="alert__icon"
             name=${this.getPrefixIconName()}
             library="system"
+            label=${o(this.getIconLabel())}
           ></dsa-icon>
           <div class="alert__text">
             ${this.title || this.alertTitle ? x`

package/cdn/chunks/{chunk.VJJMI4E3.js → chunk.OTTJPZLF.js}

@@ -1,6 +1,6 @@
 import {
   profile_button_styles_default
-} from "./chunk.3RLCSIOS.js";
+} from "./chunk.VRHOQBOT.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
@@ -9,7 +9,7 @@ import {
 } from "./chunk.SUUV7E4I.js";
 import {
   LocalizeController
-} from "./chunk.IUTJLFMA.js";
+} from "./chunk.AXLGDJN5.js";
 import {
   watch
 } from "./chunk.TKTCYZRK.js";

package/cdn/chunks/{chunk.H55UBRU5.js → chunk.PA54RLEK.js}

@@ -1,15 +1,15 @@
+import {
+  DSATreeItem
+} from "./chunk.OBQI5SCI.js";
 import {
   tree_styles_default
 } from "./chunk.SGFL2TCK.js";
-import {
-  DSATreeItem
-} from "./chunk.ZF3LJFGB.js";
 import {
   clamp
 } from "./chunk.HF7GESMZ.js";
 import {
   LocalizeController
-} from "./chunk.IUTJLFMA.js";
+} from "./chunk.AXLGDJN5.js";
 import {
   watch
 } from "./chunk.TKTCYZRK.js";
@@ -64,7 +64,7 @@ var DSATree = class extends ShoelaceElement {
     this.selection = "single";
     this.localize = new LocalizeController(this);
     this.clickTarget = null;
-    // Initializes new items by setting the `selectable` property and the expanded/collapsed icons if any
+    // Initializes new items by setting the `selectable` property, the expanded/collapsed icons if any, and adding aria-disabled to leaves if the selection mode is 'parent'
     this.initTreeItem = (item) => {
       item.selectable = this.selection === "multiple";
       ["expand", "collapse"].filter((status) => !!this.querySelector(`[slot="${status}-icon"]`)).forEach((status) => {
@@ -80,6 +80,9 @@ var DSATree = class extends ShoelaceElement {
         } else {
         }
       });
+      if (this.selection === "parent" && item.isLeaf) {
+        item.setAttribute("aria-disabled", "true");
+      }
     };
   }
   async connectedCallback() {
@@ -133,6 +136,7 @@ var DSATree = class extends ShoelaceElement {
     }
   }
   selectItem(selectedItem) {
+    var _a;
     const previousSelection = [...this.selectedItems];
     if (this.selection === "multiple") {
       selectedItem.selected = !selectedItem.selected;
@@ -140,13 +144,21 @@ var DSATree = class extends ShoelaceElement {
         selectedItem.expanded = true;
       }
       syncCheckboxes(selectedItem);
-    } else if (this.selection === "single" || selectedItem.isLeaf) {
+    } else if (this.selection === "single" || this.selection === "leaf" && selectedItem.isLeaf || this.selection === "parent" && !selectedItem.isLeaf) {
       const items = this.getAllTreeItems();
       for (const item of items) {
         item.selected = item === selectedItem;
       }
-    } else if (this.selection === "leaf") {
+    } else if (this.selection === "leaf" && !selectedItem.isLeaf) {
       selectedItem.expanded = !selectedItem.expanded;
+    } else if (this.selection === "parent" && selectedItem.isLeaf) {
+      const parentItem = (_a = selectedItem.parentElement) == null ? void 0 : _a.closest("[role=treeitem]");
+      if (parentItem) {
+        const items = this.getAllTreeItems();
+        for (const item of items) {
+          item.selected = item === parentItem;
+        }
+      }
     }
     const nextSelection = this.selectedItems;
     if (previousSelection.length !== nextSelection.length || nextSelection.some((item) => !previousSelection.includes(item))) {
@@ -275,6 +287,10 @@ var DSATree = class extends ShoelaceElement {
     );
     for (const item of items) {
       item.selectable = isSelectionMultiple;
+      item.setAttribute(
+        "aria-disabled",
+        item.disabled || (item.isLeaf && this.selection) === "parent" ? "true" : "false"
+      );
     }
     if (isSelectionMultiple) {
       await this.updateComplete;

package/cdn/chunks/{chunk.XI4SZBXQ.js → chunk.PJMLZBRQ.js}

@@ -17,7 +17,7 @@ import {
 } from "./chunk.SUUV7E4I.js";
 import {
   LocalizeController
-} from "./chunk.IUTJLFMA.js";
+} from "./chunk.AXLGDJN5.js";
 import {
   o
 } from "./chunk.XED65RH5.js";
@@ -195,7 +195,7 @@ var DSAButton = class extends ShoelaceElement {
     }
   }
   render() {
-    var _a;
+    var _a, _b;
     const isLink = this.isLink();
     const spinnerVariant = this.getSpinnerVariant();
     const tag = isLink ? i`a` : i`button`;
@@ -230,7 +230,7 @@ var DSAButton = class extends ShoelaceElement {
     })}
         ?disabled=${o(isLink ? void 0 : this.disabled)}
         type=${o(isLink ? void 0 : this.type)}
-        title=${ifDefinedAndNotEmpty(this.title)}
+        title=${ifDefinedAndNotEmpty((_a = this.accessibleName) != null ? _a : this.title)}
         name=${ifDefinedAndNotEmpty(isLink ? void 0 : this.name)}
         value=${ifDefinedAndNotEmpty(isLink ? void 0 : this.value)}
         href=${o(isLink ? this.href : void 0)}
@@ -238,7 +238,7 @@ var DSAButton = class extends ShoelaceElement {
         download=${o(isLink ? this.download : void 0)}
         rel=${o(isLink ? this.rel : void 0)}
         aria-label=${ifDefinedAndNotEmpty(
-      (_a = this.accessibleName) != null ? _a : this.ariaLabel
+      (_b = this.accessibleName) != null ? _b : this.ariaLabel
     )}
         aria-describedby="description"
         aria-disabled=${o(this.disabled && isLink ? "true" : void 0)}

package/cdn/chunks/{chunk.FSMUXFAQ.js → chunk.PSBVXVMH.js}

@@ -11,9 +11,11 @@ var tag_styles_default = i`
 
   :host {
     display: inline-block;
+    max-width: 100%;
   }
 
   .tag {
+    position: relative;
     display: flex;
     align-items: center;
     white-space: nowrap;
@@ -278,6 +280,25 @@ var tag_styles_default = i`
     color: inherit;
     margin-inline-start: var(--dsa-wc-tag-icon-spacing);
   }
+
+  /*
+   * Tooltip Trigger
+  */
+  .tag__trigger::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+  .tag__trigger:focus {
+    outline: none;
+  }
+  .tag:has(.tag__trigger:focus) {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-breadcrumb-item-outline-offset);
+  }
 `;
 
 export {

package/cdn/chunks/{chunk.ANY4UVWZ.js → chunk.PWRGRVWK.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.UIDRD6XW.js";
 import {
   l
-} from "./chunk.E6U524GP.js";
+} from "./chunk.5YWOUFLR.js";
 import {
   defaultValue
 } from "./chunk.APSWEF5D.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.LLQW6MLS.js";
 import {
   LocalizeController
-} from "./chunk.IUTJLFMA.js";
+} from "./chunk.AXLGDJN5.js";
 import {
   o
 } from "./chunk.XED65RH5.js";

package/cdn/chunks/{chunk.4ZYC455I.js → chunk.Q32YUSGV.js}

@@ -1,6 +1,6 @@
 import {
   skip_link_item_styles_default
-} from "./chunk.SY3EVBNT.js";
+} from "./chunk.JTLVEFWT.js";
 import {
   ShoelaceElement,
   e,
@@ -49,7 +49,7 @@ var DSASkipLinkItem = class extends ShoelaceElement {
         @focus=${this.handleFocus}
         @blur=${this.handleBlur}
       >
-        <slot part="label"></slot>
+        <slot part="label" class="skip-link-item__label"></slot>
       </a>
     `;
   }

package/cdn/chunks/{chunk.SKCM6IIU.js → chunk.Q7GSCDIH.js}

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