@ds-autonomie/web-components 2.19.0 → 2.21.0

package/dist/chunks/chunk.7Z3P7ZIT.js

@@ -0,0 +1,100 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/banner/banner.styles.ts
+import { css } from "lit";
+var banner_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+  }
+
+  .banner {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--dsa-spacing-24);
+    width: 100%;
+    padding: var(--dsa-spacing-16) var(--dsa-spacing-32);
+    background-color: var(--dsa-color-surface-contrasted);
+    color: var(--dsa-color-text-on-contrasted-primary);
+  }
+
+  .banner--mobile {
+    gap: var(--dsa-spacing-8);
+    padding: var(--dsa-spacing-16);
+  }
+
+  .banner__content {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--dsa-spacing-24);
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .banner--mobile .banner__content {
+    gap: var(--dsa-spacing-12);
+  }
+
+  .banner__icon-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border: 2px solid var(--dsa-color-banner-icon-container-border);
+    border-radius: var(--dsa-radius-32);
+    background-color: var(--dsa-color-banner-icon-container-background);
+    color: var(--dsa-color-banner-icon-container-icon);
+    flex-shrink: 0;
+    font-size: 24px;
+  }
+
+  .banner__info {
+    align-self: center;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--dsa-spacing-16);
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .banner--mobile .banner__info {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: var(--dsa-spacing-12);
+  }
+
+  .banner__message {
+    flex: 1 1 auto;
+    margin: 0;
+    font: var(--dsa-font-body-l-normal);
+    color: var(--dsa-color-text-on-contrasted-primary);
+  }
+
+  .banner--mobile .banner__message {
+    font: var(--dsa-font-body-m-normal);
+  }
+
+  .banner__close-button {
+    --dsa-wc-internal-icon-button-padding: var(--dsa-spacing-8);
+    flex-shrink: 0;
+  }
+
+  .banner__close-button::part(base) {
+    background: transparent;
+    color: var(--dsa-color-text-on-contrasted-primary);
+    border-radius: var(--dsa-radius-4);
+  }
+
+  .banner__close-button::part(base):hover {
+    background-color: rgb(255 255 255 / 20%);
+  }
+`;
+
+export {
+  banner_styles_default
+};

package/dist/chunks/{chunk.PENDUUVT.js → chunk.A4X3GH4U.js}

@@ -1,6 +1,6 @@
 import {
   navbar_styles_default
-} from "./chunk.UC5S2IUH.js";
+} from "./chunk.JLAQUWWF.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";
@@ -20,29 +20,31 @@ var DSANavbar = class extends ShoelaceElement {
   constructor() {
     super(...arguments);
     this.currentOpenMenu = null;
+    this.allChildren = [];
+    this.allMenus = [];
     this.mobile = false;
   }
-  connectedCallback() {
-    super.connectedCallback();
-  }
   handleSlotChange() {
-    this.getAllChildren().forEach((el) => {
-      el.mobile = this.mobile;
+    const assignedElements = this.defaultSlot.assignedElements({ flatten: true }).filter((el) => {
+      const tagName = el.tagName.toLowerCase();
+      return tagName === MENU_TAG || tagName === LINK_TAG;
     });
+    this.allChildren = assignedElements;
+    this.allMenus = assignedElements.filter(
+      (el) => this.isNavbarMenu(el)
+    );
+    this.syncChildrenMobileState();
+    this.syncMobileVisibility();
   }
   handleMobileChange() {
-    this.getAllChildren().forEach((el) => {
-      if (this.mobile) {
-        el.setAttribute("mobile", "true");
-      } else {
-        el.removeAttribute("mobile");
-      }
-      this.currentOpenMenu = null;
-      el.classList.remove("hidden");
-      if (this.isNavbarMenu(el)) {
-        el.removeAttribute("open");
+    this.currentOpenMenu = null;
+    this.syncChildrenMobileState();
+    this.allChildren.forEach((el) => {
+      if (this.isNavbarMenu(el) && el.open) {
+        el.open = false;
       }
     });
+    this.syncMobileVisibility();
   }
   handleMenuShow(event) {
     if (!this.mobile) return;
@@ -50,39 +52,42 @@ var DSANavbar = class extends ShoelaceElement {
     const menu = target.closest(MENU_TAG);
     if (menu) {
       this.currentOpenMenu = menu;
+      this.syncMobileVisibility();
     }
   }
   handleMenuHide() {
     if (!this.mobile) return;
-    if (!this.getAllMenus().some((el) => el.open)) {
+    if (!this.allMenus.some((el) => el.open)) {
       this.currentOpenMenu = null;
+      this.syncMobileVisibility();
     }
   }
-  getAllChildren() {
-    return [
-      ...this.querySelectorAll(MENU_TAG),
-      ...this.querySelectorAll(LINK_TAG)
-    ];
+  syncChildrenMobileState() {
+    this.allChildren.forEach((el) => {
+      if (el.mobile !== this.mobile) {
+        el.mobile = this.mobile;
+      }
+    });
   }
-  getAllMenus() {
-    return [...this.querySelectorAll(MENU_TAG)];
+  syncMobileVisibility() {
+    if (!this.mobile) {
+      this.allChildren.forEach((el) => {
+        el.classList.remove("hidden");
+      });
+      return;
+    }
+    this.allChildren.forEach((el) => {
+      const shouldHide = this.currentOpenMenu !== null && el !== this.currentOpenMenu;
+      el.classList.toggle("hidden", shouldHide);
+      if (shouldHide && this.isNavbarMenu(el) && el.open) {
+        el.open = false;
+      }
+    });
   }
   isNavbarMenu(el) {
     return el.tagName.toLowerCase() === MENU_TAG;
   }
   render() {
-    if (this.mobile) {
-      this.getAllChildren().forEach((el) => {
-        if (this.currentOpenMenu === null || el === this.currentOpenMenu) {
-          el.classList.remove("hidden");
-        } else {
-          el.classList.add("hidden");
-          if (this.isNavbarMenu(el)) {
-            el.removeAttribute("open");
-          }
-        }
-      });
-    }
     return html`
       <div role="list" class="navbar__list">
         <slot
@@ -95,18 +100,18 @@ var DSANavbar = class extends ShoelaceElement {
   }
 };
 DSANavbar.styles = navbar_styles_default;
-__decorateClass([
-  query("nav")
-], DSANavbar.prototype, "navbar", 2);
 __decorateClass([
   query("slot")
 ], DSANavbar.prototype, "defaultSlot", 2);
 __decorateClass([
   state()
-], DSANavbar.prototype, "allMenus", 2);
+], DSANavbar.prototype, "currentOpenMenu", 2);
 __decorateClass([
   state()
-], DSANavbar.prototype, "currentOpenMenu", 2);
+], DSANavbar.prototype, "allChildren", 2);
+__decorateClass([
+  state()
+], DSANavbar.prototype, "allMenus", 2);
 __decorateClass([
   property({ type: Boolean })
 ], DSANavbar.prototype, "mobile", 2);

package/dist/chunks/{chunk.6BCJJGLC.js → chunk.ABXTXNT4.js}

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

package/dist/chunks/{chunk.767V7QP2.js → chunk.ADV67KWS.js}

@@ -13,7 +13,7 @@ var progress_bar_styles_default = css`
 
   .progress-bar {
     position: relative;
-    background-color: var(--dsa-wc-progress-bar-track-color);
+    background: var(--dsa-wc-progress-bar-track-color);
     height: var(--dsa-wc-progress-bar-height);
     border-radius: var(--dsa-wc-progress-bar-border-radius);
     box-shadow: inset var(--dsa-wc-shadow-small);
@@ -23,15 +23,13 @@ var progress_bar_styles_default = css`
   .progress-bar__indicator {
     height: 100%;
     font: var(--dsa-wc-progress-bar-font);
-    background-color: var(--dsa-wc-progress-bar-indicator-color);
+    background: var(--dsa-wc-progress-bar-indicator-color);
     color: var(--dsa-wc-progress-bar-indicator-label-color);
     text-align: center;
     line-height: var(--dsa-wc-progress-bar-height);
     white-space: nowrap;
     overflow: hidden;
-    transition:
-      400ms width,
-      400ms background-color;
+    transition: width 400ms;
     user-select: none;
   }
 
@@ -41,7 +39,6 @@ var progress_bar_styles_default = css`
     animation: indeterminate 2.5s var(--dsa-wc-no-animations-duration, infinite)
       cubic-bezier(0.37, 0, 0.63, 1);
   }
-
   .progress-bar--indeterminate.progress-bar--rtl .progress-bar__indicator {
     animation-name: indeterminate-rtl;
   }
@@ -49,12 +46,11 @@ var progress_bar_styles_default = css`
   @media (forced-colors: active) {
     .progress-bar {
       outline: solid 1px SelectedItem;
-      background-color: var(--dsa-wc-progress-bar-indicator-label-color);
+      background: var(--dsa-wc-progress-bar-indicator-label-color);
     }
-
     .progress-bar__indicator {
       outline: solid 1px SelectedItem;
-      background-color: SelectedItem;
+      background: SelectedItem;
     }
   }
 
@@ -69,7 +65,6 @@ var progress_bar_styles_default = css`
       width: 50%;
     }
   }
-
   @keyframes indeterminate-rtl {
     0% {
       right: -50%;

package/dist/chunks/{chunk.EMPEBDHH.js → chunk.ADVAWXPE.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.CKEB7DWU.js";
+} from "./chunk.T43D4ETK.js";
 import {
   component_styles_default
 } from "./chunk.TUVJKY7S.js";
@@ -75,6 +75,7 @@ var input_otp_styles_default = css`
       var(--dsa-wc-transition-fast) border,
       var(--dsa-wc-transition-fast) box-shadow,
       var(--dsa-wc-transition-fast) background-color;
+    border: solid var(--dsa-wc-input-border-width) transparent;
     border-radius: var(--dsa-wc-input-border-radius);
     cursor: text;
   }
@@ -107,8 +108,7 @@ var input_otp_styles_default = css`
   /* On Layer inputs */
   .input--on-layer .single-field {
     background-color: var(--dsa-wc-input-on-layer-background-color);
-    border: solid var(--dsa-wc-input-border-width)
-      var(--dsa-wc-input-on-layer-border-color);
+    border-color: var(--dsa-wc-input-on-layer-border-color);
     color: var(--dsa-wc-input-on-layer-text-field-input-color);
   }
 
@@ -138,16 +138,10 @@ var input_otp_styles_default = css`
     border-color: var(--dsa-wc-input-on-layer-border-color-error-hover);
   }
 
-  .input--success.input--on-layer .single-field {
-    background-color: var(--dsa-wc-input-success-background-color);
-    border-color: var(--dsa-wc-input-success-border-color);
-  }
-
   /* On Base inputs */
 
   .input--on-base .single-field {
-    border: solid var(--dsa-wc-input-border-width)
-      var(--dsa-wc-input-on-base-border-color);
+    border-color: var(--dsa-wc-input-on-base-border-color);
     background-color: var(--dsa-wc-input-on-base-background-color);
     color: var(--dsa-wc-input-on-base-text-field-input-color);
   }
@@ -176,6 +170,10 @@ var input_otp_styles_default = css`
     border-color: var(--dsa-wc-input-on-base-border-color-error-hover);
   }
 
+  /*
+  * Success
+  */
+  .input--success.input--on-layer .single-field,
   .input--success.input--on-base .single-field {
     background-color: var(--dsa-wc-input-success-background-color);
     border-color: var(--dsa-wc-input-success-border-color);

package/dist/chunks/{chunk.VNGKMC5T.js → chunk.AEU5B6YK.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.TGEREFOF.js";
 import {
   LocalizeController
-} from "./chunk.34HS7ICN.js";
+} from "./chunk.DVIHNMQQ.js";
 import {
   ShoelaceElement
 } from "./chunk.SVWU6JW4.js";

package/dist/chunks/{chunk.RG7MUNLM.js → chunk.AL6PYL6U.js}

@@ -1,20 +1,20 @@
-import {
-  cnsaLogoSvg,
-  spaLogoSvg
-} from "./chunk.7TLERCGA.js";
 import {
   header_styles_default
 } from "./chunk.QAYPY3FQ.js";
 import {
-  removeAttributeIfPresent,
-  setAttributeIfDifferent
-} from "./chunk.PSYTLBRK.js";
+  cnsaLogoSvg,
+  spaLogoSvg
+} from "./chunk.7TLERCGA.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.34HS7ICN.js";
+} from "./chunk.DVIHNMQQ.js";
+import {
+  removeAttributeIfPresent,
+  setAttributeIfDifferent
+} from "./chunk.PSYTLBRK.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";
@@ -38,7 +38,8 @@ var DSAHeader = class extends ShoelaceElement {
       "second-logo",
       "site-name",
       "baseline",
-      "search"
+      "search",
+      "navbar"
     );
     this.localize = new LocalizeController(this);
     this.firstLogo = "public";

package/dist/chunks/{chunk.FLI47BNN.js → chunk.BAWCVSXY.js}

@@ -1,6 +1,6 @@
 import {
   LocalizeController
-} from "./chunk.34HS7ICN.js";
+} from "./chunk.DVIHNMQQ.js";
 import {
   ShoelaceElement
 } from "./chunk.SVWU6JW4.js";
@@ -10,6 +10,8 @@ import {
 
 // src/components/format-bytes/format-bytes.ts
 import { customElement, property } from "lit/decorators.js";
+var BIT_PREFIXES = ["", "kilo", "mega", "giga", "tera"];
+var BYTE_PREFIXES = ["", "kilo", "mega", "giga", "tera", "peta"];
 var DSAFormatBytes = class extends ShoelaceElement {
   constructor() {
     super(...arguments);
@@ -22,9 +24,7 @@ var DSAFormatBytes = class extends ShoelaceElement {
     if (isNaN(this.value)) {
       return "";
     }
-    const bitPrefixes = ["", "kilo", "mega", "giga", "tera"];
-    const bytePrefixes = ["", "kilo", "mega", "giga", "tera", "peta"];
-    const prefix = this.unit === "bit" ? bitPrefixes : bytePrefixes;
+    const prefix = this.unit === "bit" ? BIT_PREFIXES : BYTE_PREFIXES;
     const index = Math.max(
       0,
       Math.min(Math.floor(Math.log10(this.value) / 3), prefix.length - 1)

package/dist/chunks/{chunk.ZS3JNRJE.js → chunk.BIB7IJGE.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk.EEO75M3R.js";
 import {
   DSATooltip
-} from "./chunk.ELOLGOFM.js";
+} from "./chunk.UBA2H662.js";
 import {
   DSAAvatar
-} from "./chunk.QKT5LLDM.js";
+} from "./chunk.7YNHLXVZ.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
@@ -15,10 +15,10 @@ 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 {
   watch
 } from "./chunk.QB2NJE2Y.js";

package/dist/chunks/{chunk.BJ76CXBF.js → chunk.BWP55AAX.js}

@@ -1,6 +1,6 @@
 import {
   page_header_styles_default
-} from "./chunk.YMBSK45L.js";
+} from "./chunk.NBEDK6M4.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";

package/dist/chunks/{chunk.O65OOIT6.js → chunk.BZFZTT6Z.js}

@@ -45,7 +45,9 @@ var DSAPaginationButton = class extends ShoelaceElement {
     }
   }
   render() {
+    const hasDefaultSlot = this.hasSlotController.test("[default]");
     const isInactive = this.selected || this.value === -1;
+    const ariaCurrent = this.getAriaCurrent();
     return html`
       <button
         role=${ifDefined(this.navigationType === "link" ? "link" : void 0)}
@@ -53,14 +55,14 @@ var DSAPaginationButton = class extends ShoelaceElement {
         class=${classMap({
       button: true,
       "button-pagination": true,
-      "button-number": !this.hasSlotController.test("[default]"),
+      "button-number": !hasDefaultSlot,
       "button--selected": this.selected,
       "button--inactive": isInactive,
       "button--disabled": this.disabled
     })}
         value="${this.value}"
         ?disabled=${this.disabled || isInactive}
-        aria-current=${ifDefined(this.getAriaCurrent())}
+        aria-current=${ifDefined(ariaCurrent)}
       >
         <slot name="prefix"></slot>
         ${this.compact && this.value === 0 ? html`

package/dist/chunks/{chunk.EWMFHVNW.js → chunk.C4SE3ULG.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.CKEB7DWU.js";
+} from "./chunk.T43D4ETK.js";
 import {
   component_styles_default
 } from "./chunk.TUVJKY7S.js";
@@ -73,11 +73,11 @@ var input_base_styles_default = css`
     color: var(--dsa-wc-input-on-layer-text-field-input-color-disabled);
   }
 
-  .input--error.input--on-layer:not(.input--disabled):not(.input--readonly) {
+  .input--on-layer.input--error:not(.input--disabled):not(.input--readonly) {
     background-color: var(--dsa-wc-input-on-layer-background-color-error);
     border-color: var(--dsa-wc-input-on-layer-border-color-error);
   }
-  .input--error.input--on-layer:hover:not(.input--disabled):not(
+  .input--on-layer.input--error:hover:not(.input--disabled):not(
       .input--readonly
     ) {
     border-color: var(--dsa-wc-input-on-layer-border-color-error-hover);
@@ -116,11 +116,11 @@ var input_base_styles_default = css`
     border-color: var(--dsa-wc-input-on-base-read-only-border-color);
   }
 
-  .input--error.input--on-base:not(.input--disabled):not(.input--readonly) {
+  .input--on-base.input--error:not(.input--disabled):not(.input--readonly) {
     background-color: var(--dsa-wc-input-on-base-background-color-error);
     border-color: var(--dsa-wc-input-on-base-border-color-error);
   }
-  .input--error.input--on-base:hover:not(.input--disabled):not(
+  .input--on-base.input--error:hover:not(.input--disabled):not(
       .input--readonly
     ) {
     border-color: var(--dsa-wc-input-on-base-border-color-error-hover);
@@ -160,13 +160,13 @@ var input_base_styles_default = css`
     border-color: var(--dsa-wc-input-on-floating-read-only-border-color);
   }
 
-  .input--error.input--on-floating-menu:not(.input--disabled):not(
+  .input--on-floating-menu.input--error:not(.input--disabled):not(
       .input--readonly
     ) {
     background-color: var(--dsa-wc-input-on-floating-background-color-error);
     border-color: var(--dsa-wc-input-on-floating-border-color-error);
   }
-  .input--error.input--on-floating-menu:hover:not(.input--disabled):not(
+  .input--on-floating-menu.input--error:hover:not(.input--disabled):not(
       .input--readonly
     ) {
     border-color: var(--dsa-wc-input-on-floating-border-color-error-hover);

package/dist/chunks/{chunk.QUEYKUIS.js → chunk.C6BC46KV.js}

@@ -1,18 +1,18 @@
 import {
   DSAInputTime
-} from "./chunk.M47KXEXM.js";
+} from "./chunk.GSRQID3H.js";
 import {
   DSAInputNative
-} from "./chunk.V4SDZV6L.js";
-import {
-  DSAInputDate
-} from "./chunk.YI6BUIUL.js";
+} from "./chunk.4IDR4RJI.js";
 import {
   DSAInputAmount
-} from "./chunk.TCW77JY3.js";
+} from "./chunk.RJAOB66Y.js";
+import {
+  DSAInputDate
+} from "./chunk.7WMOPNN5.js";
 import {
   InputBase
-} from "./chunk.WMFEJDPX.js";
+} from "./chunk.7HMEK2ND.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";

package/dist/chunks/{chunk.KD27MP6C.js → chunk.D7HT35YE.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.CKEB7DWU.js";
+} from "./chunk.T43D4ETK.js";
 import {
   component_styles_default
 } from "./chunk.TUVJKY7S.js";