@ds-autonomie/web-components 1.16.2 → 1.17.0

package/dist/chunks/{chunk.EAP74BQL.js → chunk.AISSZCX4.js}

@@ -1,9 +1,11 @@
 import {
   DSASelect
-} from "./chunk.PNTPO2DN.js";
+} from "./chunk.6QGIFSKH.js";
+import {
+  input_phone_styles_default
+} from "./chunk.HSLR5GY4.js";
 import {
   frenchFlagOption,
-  frenchFlagSelect,
   frenchNumberPrefix,
   phonePrefixOptions
 } from "./chunk.ESYJVRG3.js";
@@ -15,9 +17,6 @@ import {
 import {
   getPhoneConfig
 } from "./chunk.65HTBW2L.js";
-import {
-  input_phone_styles_default
-} from "./chunk.43EIYNTL.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";
@@ -136,22 +135,8 @@ var DSAInputPhone = class extends ShoelaceElement {
     this.emit("dsa-input");
   }
   willUpdate(changedProperties) {
-    if (changedProperties.has("phonePrefix") || changedProperties.has("phoneNumber")) {
-      if (!frenchNumberPrefix.includes(this.phonePrefix)) {
-        this.phonePrefix = changedProperties.get("phonePrefix");
-      }
-      if (this.phoneNumber.length === 0) {
-        this.value = "";
-      } else {
-        const placeholderLength = stripSpecialChars(this.placeholder).length;
-        this.value = `${this.phonePrefix}${this.phoneNumber.substring(
-          0,
-          placeholderLength
-        )}`;
-      }
-    }
-    if (changedProperties.has("value")) {
-      this.setPhoneFromValue(this.value);
+    if (changedProperties.has("phonePrefix") && !frenchNumberPrefix.includes(this.phonePrefix)) {
+      this.phonePrefix = changedProperties.get("phonePrefix");
     }
   }
   setPhoneFromValue(value) {
@@ -164,22 +149,28 @@ var DSAInputPhone = class extends ShoelaceElement {
       const number = value.replace(prefix, "").substring(0, placeholderLength);
       this.phonePrefix = prefix;
       this.phoneNumber = number;
-      this.value = `${prefix}${number}`;
+    }
+  }
+  updateValue() {
+    if (this.phoneNumber.length === 0) {
+      this.value = "";
+    } else {
+      const placeholderLength = stripSpecialChars(this.placeholder).length;
+      this.value = `${this.phonePrefix}${this.phoneNumber.substring(
+        0,
+        placeholderLength
+      )}`;
     }
   }
   // Select handlers
   handlePhonePrefixChange(event) {
+    event.stopPropagation();
     const { target } = event;
     if (target instanceof DSASelect) {
       this.phonePrefix = target.value;
+      this.updateValue();
+      this.emit("dsa-change");
     }
-    this.emit("dsa-change");
-  }
-  handlePhonePrefixKeydown(event) {
-    if (event.key === "Tab") {
-      this.phonePrefixEl.hide();
-    }
-    this.emit("dsa-change");
   }
   // Input Mask handlers
   handleChange(event) {
@@ -187,8 +178,9 @@ var DSAInputPhone = class extends ShoelaceElement {
     if (target instanceof HTMLInputElement) {
       const strippedValue = stripSpecialChars(target.value);
       this.phoneNumber = strippedValue;
+      this.updateValue();
+      this.emit("dsa-change");
     }
-    this.emit("dsa-change");
   }
   handleKeyDown(event) {
     const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
@@ -244,6 +236,9 @@ var DSAInputPhone = class extends ShoelaceElement {
     await this.updateComplete;
     this.formControlController.updateValidity();
   }
+  handlePhoneChange() {
+    this.updateValue();
+  }
   /** Sets focus on the input. */
   focus(options) {
     this.inputEl.focus(options);
@@ -355,12 +350,10 @@ var DSAInputPhone = class extends ShoelaceElement {
         hoist
         .size=${this.size}
         @dsa-change=${this.handlePhonePrefixChange}
-        @keydown=${this.handlePhonePrefixKeydown}
         enterkeyhint="enter"
         display-value
         no-sync-width
       >
-        ${frenchFlagSelect}
         ${phonePrefixOptions.map((option, index) => {
       return html`
             <dsa-option value=${option.value} .size=${this.size}>
@@ -558,6 +551,10 @@ __decorateClass([
 __decorateClass([
   watch("value", { waitUntilFirstUpdate: true })
 ], DSAInputPhone.prototype, "handleValueChange", 1);
+__decorateClass([
+  watch("phonePrefix"),
+  watch("phoneNumber")
+], DSAInputPhone.prototype, "handlePhoneChange", 1);
 DSAInputPhone = __decorateClass([
   customElement("dsa-input-phone")
 ], DSAInputPhone);

package/dist/chunks/{chunk.ORNTGXRO.js → chunk.ARYKCY32.js}

@@ -89,6 +89,7 @@ var download_link_styles_default = css`
 
   .link:focus-visible {
     outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
     border-radius: var(--dsa-wc-focus-ring-radius);
   }
 

package/dist/chunks/{chunk.KKAOTWJY.js → chunk.ATFH7NZ3.js}

@@ -22,8 +22,30 @@ var radio_button_styles_default = css`
     border-color: var(--dsa-wc-toggle-button-border-color);
     color: var(--dsa-wc-toggle-button-color);
     border-width: 1px;
-    boder-style: solid;
+    border-style: solid;
     font-weight: 400;
+    height: auto;
+    white-space: normal;
+    text-align: left;
+    line-height: 130%;
+  }
+  .button--toggle.button--small {
+    min-height: var(--dsa-wc-form-input-height-small);
+  }
+  .button--toggle.button--medium {
+    min-height: var(--dsa-wc-form-input-height);
+  }
+  .button--toggle.button--large {
+    min-height: var(--dsa-wc-form-input-height-large);
+  }
+  .button--toggle.button--small .button__label {
+    padding-block: 4px;
+  }
+  .button--toggle.button--medium .button__label {
+    padding-block: 8px;
+  }
+  .button--toggle.button--large .button__label {
+    padding-block: 10px;
   }
 
   .button--toggle:hover {

package/dist/chunks/{chunk.N43R5DJN.js → chunk.B64MRSFM.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.EMIT7S33.js";
 import {
   LocalizeController
-} from "./chunk.6L6CZSQX.js";
+} from "./chunk.DZLCCB5R.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.7KF6Z37I.js → chunk.BBGXYE4Z.js}

@@ -1,6 +1,6 @@
 import {
   LocalizeController
-} from "./chunk.6L6CZSQX.js";
+} from "./chunk.DZLCCB5R.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/{chunk.ZYY6O4PU.js → chunk.BGU7HA72.js}

@@ -1,12 +1,12 @@
-import {
-  DSATreeItem
-} from "./chunk.BROIFXIH.js";
 import {
   tree_styles_default
 } from "./chunk.73T7TU6S.js";
+import {
+  DSATreeItem
+} from "./chunk.3355NB7L.js";
 import {
   LocalizeController
-} from "./chunk.6L6CZSQX.js";
+} from "./chunk.DZLCCB5R.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.ZLGBX4RI.js → chunk.BUFBFNGF.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.XSXVVUKP.js";
 import {
   LocalizeController
-} from "./chunk.6L6CZSQX.js";
+} from "./chunk.DZLCCB5R.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/{chunk.7DHGAM7P.js → chunk.CBBSK53B.js}

@@ -1,6 +1,6 @@
 import {
   accordion_styles_default
-} from "./chunk.VDOVUA55.js";
+} from "./chunk.KOTPR264.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.6L6CZSQX.js";
+} from "./chunk.DZLCCB5R.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.V5J2RAQ5.js → chunk.CFISAFUN.js}

@@ -1,6 +1,6 @@
 import {
   popup_styles_default
-} from "./chunk.XD5JM6WF.js";
+} from "./chunk.WYUQG5BJ.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";
@@ -43,6 +43,83 @@ var DSAPopup = class extends ShoelaceElement {
     this.shift = false;
     this.shiftPadding = 0;
     this.autoSizePadding = 0;
+    this.hoverBridge = false;
+    this.updateHoverBridge = () => {
+      if (this.hoverBridge && this.anchorEl) {
+        const anchorRect = this.anchorEl.getBoundingClientRect();
+        const popupRect = this.popup.getBoundingClientRect();
+        const isVertical = this.placement.includes("top") || this.placement.includes("bottom");
+        let topLeftX = 0;
+        let topLeftY = 0;
+        let topRightX = 0;
+        let topRightY = 0;
+        let bottomLeftX = 0;
+        let bottomLeftY = 0;
+        let bottomRightX = 0;
+        let bottomRightY = 0;
+        if (isVertical) {
+          if (anchorRect.top < popupRect.top) {
+            topLeftX = anchorRect.left;
+            topLeftY = anchorRect.bottom;
+            topRightX = anchorRect.right;
+            topRightY = anchorRect.bottom;
+            bottomLeftX = popupRect.left;
+            bottomLeftY = popupRect.top;
+            bottomRightX = popupRect.right;
+            bottomRightY = popupRect.top;
+          } else {
+            topLeftX = popupRect.left;
+            topLeftY = popupRect.bottom;
+            topRightX = popupRect.right;
+            topRightY = popupRect.bottom;
+            bottomLeftX = anchorRect.left;
+            bottomLeftY = anchorRect.top;
+            bottomRightX = anchorRect.right;
+            bottomRightY = anchorRect.top;
+          }
+        } else {
+          if (anchorRect.left < popupRect.left) {
+            topLeftX = anchorRect.right;
+            topLeftY = anchorRect.top;
+            topRightX = popupRect.left;
+            topRightY = popupRect.top;
+            bottomLeftX = anchorRect.right;
+            bottomLeftY = anchorRect.bottom;
+            bottomRightX = popupRect.left;
+            bottomRightY = popupRect.bottom;
+          } else {
+            topLeftX = popupRect.right;
+            topLeftY = popupRect.top;
+            topRightX = anchorRect.left;
+            topRightY = anchorRect.top;
+            bottomLeftX = popupRect.right;
+            bottomLeftY = popupRect.bottom;
+            bottomRightX = anchorRect.left;
+            bottomRightY = anchorRect.bottom;
+          }
+        }
+        this.style.setProperty("--hover-bridge-top-left-x", `${topLeftX}px`);
+        this.style.setProperty("--hover-bridge-top-left-y", `${topLeftY}px`);
+        this.style.setProperty("--hover-bridge-top-right-x", `${topRightX}px`);
+        this.style.setProperty("--hover-bridge-top-right-y", `${topRightY}px`);
+        this.style.setProperty(
+          "--hover-bridge-bottom-left-x",
+          `${bottomLeftX}px`
+        );
+        this.style.setProperty(
+          "--hover-bridge-bottom-left-y",
+          `${bottomLeftY}px`
+        );
+        this.style.setProperty(
+          "--hover-bridge-bottom-right-x",
+          `${bottomRightX}px`
+        );
+        this.style.setProperty(
+          "--hover-bridge-bottom-right-y",
+          `${bottomRightY}px`
+        );
+      }
+    };
   }
   async connectedCallback() {
     super.connectedCallback();
@@ -247,12 +324,21 @@ var DSAPopup = class extends ShoelaceElement {
         });
       }
     });
+    requestAnimationFrame(() => this.updateHoverBridge());
     this.emit("dsa-reposition");
   }
   render() {
     return html`
       <slot name="anchor" @slotchange=${this.handleAnchorChange}></slot>
 
+      <span
+        part="hover-bridge"
+        class=${classMap({
+      "popup-hover-bridge": true,
+      "popup-hover-bridge--visible": this.hoverBridge && this.active
+    })}
+      ></span>
+
       <div
         part="popup"
         class=${classMap({
@@ -352,6 +438,9 @@ __decorateClass([
 __decorateClass([
   property({ attribute: "auto-size-padding", type: Number })
 ], DSAPopup.prototype, "autoSizePadding", 2);
+__decorateClass([
+  property({ attribute: "hover-bridge", type: Boolean })
+], DSAPopup.prototype, "hoverBridge", 2);
 DSAPopup = __decorateClass([
   customElement("dsa-popup")
 ], DSAPopup);

package/dist/chunks/{chunk.YG7TOAY3.js → chunk.CJ35H7EE.js}

@@ -1,15 +1,15 @@
-import {
-  footer_styles_default
-} from "./chunk.QDZIXDQB.js";
 import {
   footerLogoSvg
 } from "./chunk.6EHBM4N7.js";
+import {
+  footer_styles_default
+} from "./chunk.QDZIXDQB.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.6L6CZSQX.js";
+} from "./chunk.DZLCCB5R.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/{chunk.NXQ42SSB.js → chunk.CLHGGIBQ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.YOLAIUYX.js";
 import {
   DSAOption
-} from "./chunk.BAU3732X.js";
+} from "./chunk.V3EGD3LC.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";
@@ -23,7 +23,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.6L6CZSQX.js";
+} from "./chunk.DZLCCB5R.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.WHTNMZZS.js → chunk.DLMZ2MN2.js}

@@ -1,6 +1,6 @@
 import {
   checkbox_button_styles_default
-} from "./chunk.BQ7R6MC6.js";
+} from "./chunk.RSX6EFCX.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
@@ -135,7 +135,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DSACheckboxButton.prototype, "checked", 2);
 __decorateClass([
-  property()
+  property({ reflect: true })
 ], DSACheckboxButton.prototype, "value", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
@@ -144,10 +144,10 @@ __decorateClass([
   property({ reflect: true })
 ], DSACheckboxButton.prototype, "size", 2);
 __decorateClass([
-  property({ type: Boolean })
+  property({ type: Boolean, reflect: true })
 ], DSACheckboxButton.prototype, "readonly", 2);
 __decorateClass([
-  property({ type: Boolean })
+  property({ type: Boolean, reflect: true })
 ], DSACheckboxButton.prototype, "error", 2);
 __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })

package/dist/chunks/{chunk.6L6CZSQX.js → chunk.DZLCCB5R.js}

@@ -17,13 +17,6 @@ var translation = {
   hidePassword: "Masquer le mot de passe",
   loading: "Chargement",
   nextSlide: "Diapositive suivante",
-  numOptionsSelected: (num) => {
-    if (num === 0)
-      return "Aucune option s\xE9lectionn\xE9e";
-    if (num === 1)
-      return "1 option s\xE9lectionn\xE9e";
-    return `${num} options s\xE9lectionn\xE9es`;
-  },
   previousSlide: "Diapositive pr\xE9c\xE9dente",
   progress: "Progr\xE8s",
   remove: "Retirer",
@@ -137,13 +130,6 @@ var translation2 = {
   hidePassword: "Hide password",
   loading: "Loading",
   nextSlide: "Next slide",
-  numOptionsSelected: (num) => {
-    if (num === 0)
-      return "No options selected";
-    if (num === 1)
-      return "1 option selected";
-    return `${num} options selected`;
-  },
   previousSlide: "Previous slide",
   progress: "Progress",
   remove: "Remove",

package/dist/chunks/chunk.FWFLQD5T.js

@@ -0,0 +1,49 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/callout/callout.styles.ts
+import { css } from "lit";
+var callout_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: contents;
+
+    /* For better DX, we'll reset the margin here so the base part can inherit it */
+    margin: 0;
+  }
+
+  .callout {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    border-left: var(--dsa-wc-callout-border-left);
+    border-radius: var(--dsa-wc-callout-border-radius);
+    font: var(--dsa-wc-callout-message-font);
+    color: var(--dsa-wc-callout-message-color);
+    padding: var(--dsa-wc-callout-padding);
+    margin: inherit;
+    background-color: var(--dsa-wc-callout-default-background-color);
+  }
+
+  .callout__title {
+    font: var(--dsa-wc-callout-title-font);
+    word-wrap: break-word;
+    color: var(--dsa-wc-callout-title-color);
+  }
+
+  .callout__message {
+    word-wrap: break-word;
+  }
+
+  .callout__text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dsa-wc-callout-text-gap);
+  }
+`;
+
+export {
+  callout_styles_default
+};

package/dist/chunks/{chunk.SIPW72IF.js → chunk.FZBZ5HAZ.js}

@@ -1,9 +1,9 @@
-import {
-  radio_button_styles_default
-} from "./chunk.KKAOTWJY.js";
 import {
   DSARadioGroup
 } from "./chunk.CW4ML3IS.js";
+import {
+  radio_button_styles_default
+} from "./chunk.ATFH7NZ3.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";

package/dist/chunks/{chunk.GE2PTQVM.js → chunk.GJM5KJMB.js}

@@ -24,7 +24,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.6L6CZSQX.js";
+} from "./chunk.DZLCCB5R.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.43EIYNTL.js → chunk.HSLR5GY4.js}

@@ -213,6 +213,7 @@ var input_phone_styles_default = css`
 
   /* Select  */
   .input-phone__select {
+    flex-shrink: 0;
     min-width: var(--input-phone__select__min-width);
   }
 
@@ -221,12 +222,17 @@ var input_phone_styles_default = css`
     border-right: none;
     height: auto;
     font-size: inherit;
+    padding: 4px 4px 4px 8px;
   }
 
   .input-phone__select::part(popup) {
     display: unset;
   }
 
+  .input-phone__select::part(display-input) {
+    text-align: center;
+  }
+
   :not(.form-control--readonly):not(form-control--disabled)
     > dsa-select:not(.input-phone__select-error) {
     --dsa-wc-internal-select-on-base-active-background-color: var(
@@ -304,7 +310,7 @@ var input_phone_styles_default = css`
    * Size modifiers
    */
   .form-control--small {
-    --input-phone__select__min-width: 100px;
+    --input-phone__select__min-width: 54px;
   }
   .form-control--small .input-phone__input,
   .form-control--small dsa-select::part(combobox) {
@@ -319,7 +325,7 @@ var input_phone_styles_default = css`
   }
 
   .form-control--medium {
-    --input-phone__select__min-width: 115px;
+    --input-phone__select__min-width: 68px;
   }
   .form-control--medium dsa-select::part(combobox) {
     height: var(--dsa-wc-input-phone-height);
@@ -331,7 +337,7 @@ var input_phone_styles_default = css`
   }
 
   .form-control--large {
-    --input-phone__select__min-width: 118px;
+    --input-phone__select__min-width: 68px;
   }
   .form-control--large
     .input-phone___input.form-control--large

package/dist/chunks/{chunk.N2H4K44W.js → chunk.I3SEN2LI.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.6L6CZSQX.js";
+} from "./chunk.DZLCCB5R.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.5MB36CJO.js → chunk.IMRGO6QP.js}

@@ -1,6 +1,6 @@
 import {
   footer_sitemap_item_styles_default
-} from "./chunk.2PA4QKLT.js";
+} from "./chunk.KKJF6BYU.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/{chunk.E475BLMD.js → chunk.JDR7WF3R.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.SGIGGO5M.js";
 import {
   LocalizeController
-} from "./chunk.6L6CZSQX.js";
+} from "./chunk.DZLCCB5R.js";
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.ZQJVCRB2.js";

package/dist/chunks/{chunk.2PA4QKLT.js → chunk.KKJF6BYU.js}

@@ -34,6 +34,7 @@ var footer_sitemap_item_styles_default = css`
   
   ::slotted(*:focus-visible) {
     outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
     border-radius: var(--dsa-wc-focus-ring-radius);
   })
 `;

package/dist/chunks/{chunk.VDOVUA55.js → chunk.KOTPR264.js}

@@ -47,6 +47,7 @@ var accordion_styles_default = css`
 
   .accordion__header-button:focus-visible {
     outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
     background-color: var(--dsa-wc-accordion-header-hover-background-color);
   }
 

package/dist/chunks/{chunk.D433F3FV.js → chunk.LDRVRUQG.js}

@@ -45,6 +45,7 @@ var header_styles_default = css`
   }
   [part~='first-logo']:focus-visible {
     outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
     border-radius: var(--dsa-wc-focus-ring-radius);
   }
 

package/dist/chunks/{chunk.3UNYRJRK.js → chunk.LRHTRZGS.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.IGYXUK7A.js";
 import {
   LocalizeController
-} from "./chunk.6L6CZSQX.js";
+} from "./chunk.DZLCCB5R.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";