@ds-autonomie/web-components 1.16.2 → 1.17.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @ds-autonomie/web-components
 
+## 1.17.0
+
+### Minor Changes
+
+- 4d2e82a: `alert` : possibilité d'ajouter un entête (balise <h>).
+- 7c07696: `callout` : ajout du composant
+- 46a1090: `card` : le nom accessible de la carte lien provient maintenant de son en-tête
+
+### Patch Changes
+
+- bda3c83: `calendar`, `select`, `combobox`, `option` : améliorations a11y
+- d4b8d6c: `tooltip` : possibilité de survoler jusqu'au tooltip sans qu'il se ferme + fermeture à l'appui sur echap
+- 90a4bfc: Amélioration du contraste du contour de focus (focus-ring)
+- f4f3623: `select`, `combobox` : restition des options multiples sélectionnées
+- 511c9fa: `filter-range` : prise en compte des changements de valeurs dynamiques
+- 19482e6: `checkbox-group` : correction du problème de mise à jour d'un checkbox-group suite à la mise à jour des propriétés des checkbox enfants
+- 33c8233: `calendar` : mise à jour de la dépendance wc-calendar
+- dc51df6: `radio-button`, `checkbox-group` : les libéllés trop longs passent maintenant à la ligne; `input-phone` : amélioration pour les petits écrans
+- af72cc8: `input-phone` : correction de la mise à jour de la valeur
+- 9e79832: `input-phone` : suppression du drapeau
+- 5c504f1: `option` : ajout d'une bordure à l'état hover/focus
+- b578686: `pagination` : correction des évènements de changement de page
+- Updated dependencies [9754673]
+  - @ds-autonomie/assets@1.4.2
+
 ## 1.16.2
 
 ### Patch Changes

package/dist/chunks/{chunk.VJRDVQTS.js → chunk.2AZX4GK4.js}

@@ -14,7 +14,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.BHQ3BNQA.js → chunk.2DYZ4544.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk.U7V5J6UX.js";
 import {
   calendar_styles_default
-} from "./chunk.2P44D5YL.js";
+} from "./chunk.MMD7BOR4.js";
 import {
   LocalizeController
-} from "./chunk.6L6CZSQX.js";
+} from "./chunk.DZLCCB5R.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";
@@ -49,7 +49,7 @@ var DSACalendar = class extends ShoelaceElement {
     this.calendar.value = dates.length > 1 ? dates : dates[0];
   }
   get parsedDateValue() {
-    if (this.value === void 0) {
+    if (this.value === "") {
       return [];
     }
     return this.value.split(",").map((dateString) => new Date(dateString));

package/dist/chunks/{chunk.RG342A22.js → chunk.2GIZK5OL.js}

@@ -243,10 +243,10 @@ __decorateClass([
   property()
 ], DSACheckbox.prototype, "title", 2);
 __decorateClass([
-  property()
+  property({ reflect: true })
 ], DSACheckbox.prototype, "name", 2);
 __decorateClass([
-  property()
+  property({ reflect: true })
 ], DSACheckbox.prototype, "value", 2);
 __decorateClass([
   property({ reflect: true })
@@ -267,10 +267,10 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DSACheckbox.prototype, "readonly", 2);
 __decorateClass([
-  property({ type: Boolean })
+  property({ type: Boolean, reflect: true })
 ], DSACheckbox.prototype, "error", 2);
 __decorateClass([
-  property({ attribute: "error-message" })
+  property({ attribute: "error-message", reflect: true })
 ], DSACheckbox.prototype, "errorMessage", 2);
 __decorateClass([
   property({ reflect: true })
@@ -279,7 +279,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DSACheckbox.prototype, "required", 2);
 __decorateClass([
-  property({ attribute: "aria-label" })
+  property({ attribute: "aria-label", reflect: true })
 ], DSACheckbox.prototype, "ariaLabel", 2);
 __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })

package/dist/chunks/{chunk.A2AK34DU.js → chunk.2MXY6CAL.js}

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

package/dist/chunks/{chunk.BROIFXIH.js → chunk.3355NB7L.js}

@@ -12,7 +12,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.MXDA7QXL.js → chunk.33YIN2OK.js}

@@ -1,6 +1,6 @@
 import {
   card_styles_default
-} from "./chunk.VXQMFXV5.js";
+} from "./chunk.M7QP6END.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
@@ -35,7 +35,7 @@ var DSACard = class extends ShoelaceElement {
     const isLink = this.isLink();
     const tag = isLink ? literal`a` : literal`div`;
     return html`
-      <${tag}
+      <div
         part="base"
         class=${classMap({
       card: true,
@@ -44,16 +44,19 @@ var DSACard = class extends ShoelaceElement {
       "card--has-image": this.hasSlotController.test("image"),
       "card--has-header": this.hasSlotController.test("header")
     })}
-        href=${ifDefined(isLink ? this.href : void 0)}
-        target=${ifDefined(isLink ? this.target : void 0)}
-        download=${ifDefined(isLink ? this.download : void 0)}
-        rel=${ifDefined(isLink ? this.rel : void 0)}
-      >
-        <slot name="header" part="header" class="card__header"></slot>
+        >
+        <${tag}
+          href=${ifDefined(isLink ? this.href : void 0)}
+          target=${ifDefined(isLink ? this.target : void 0)}
+          download=${ifDefined(isLink ? this.download : void 0)}
+          rel=${ifDefined(isLink ? this.rel : void 0)}
+        >
+          <slot name="header" part="header" class="card__header"></slot>
+        </${tag}>
         <slot name="image" part="image" class="card__image"></slot>
         <slot part="body" class="card__body"></slot>
         <slot name="footer" part="footer" class="card__footer"></slot>
-      </${tag}>
+      </div>
     `;
   }
 };

package/dist/chunks/{chunk.CZFGLE3Y.js → chunk.4FP4K3F5.js}

@@ -30,6 +30,12 @@ var option_styles_default = css`
     font: var(--dsa-wc-option-small-font);
     padding: var(--dsa-wc-option-small-padding);
   }
+  .option--small.option--hover:not(.option--selected):not(.option--disabled),
+  .option--small.option--current {
+    padding-block: calc(var(--dsa-wc-option-small-padding-y) - 1px);
+    padding-left: calc(var(--dsa-wc-option-padding-left) - 1px);
+    padding-right: calc(var(--dsa-wc-option-padding-right) - 1px);
+  }
 
   .option--small dsa-icon,
   .option--small ::slotted(dsa-icon) {
@@ -41,6 +47,12 @@ var option_styles_default = css`
     font: var(--dsa-wc-option-font);
     padding: var(--dsa-wc-option-padding);
   }
+  .option--medium.option--hover:not(.option--selected):not(.option--disabled),
+  .option--medium.option--current {
+    padding-block: calc(var(--dsa-wc-option-medium-padding-y) - 1px);
+    padding-left: calc(var(--dsa-wc-option-padding-left) - 1px);
+    padding-right: calc(var(--dsa-wc-option-padding-right) - 1px);
+  }
 
   .option--medium dsa-icon,
   .option--medium ::slotted(dsa-icon) {
@@ -52,6 +64,12 @@ var option_styles_default = css`
     font: var(--dsa-wc-option-large-font);
     padding: var(--dsa-wc-option-large-padding);
   }
+  .option--large.option--hover:not(.option--selected):not(.option--disabled),
+  .option--large.option--current {
+    padding-block: calc(var(--dsa-wc-option-large-padding-y) - 1px);
+    padding-left: calc(var(--dsa-wc-option-padding-left) - 1px);
+    padding-right: calc(var(--dsa-wc-option-padding-right) - 1px);
+  }
 
   .option--large dsa-icon,
   .option--large ::slotted(dsa-icon) {
@@ -60,6 +78,7 @@ var option_styles_default = css`
 
   .option--hover:not(.option--selected):not(.option--disabled) {
     background-color: var(--dsa-wc-option-hover-color);
+    border: 1px solid var(--dsa-wc-option-hover-border-color);
   }
 
   .option--error {
@@ -68,6 +87,7 @@ var option_styles_default = css`
   .option--current,
   .option--current.option--disabled {
     background-color: var(--dsa-wc-option-hover-color);
+    border: 1px solid var(--dsa-wc-option-hover-border-color);
   }
 
   .option--selected.option--current:not(.option--multiple),

package/dist/chunks/{chunk.V7MYOBN4.js → chunk.4L7EJLR4.js}

@@ -1,14 +1,14 @@
+import {
+  getIconLibrary,
+  unwatchIcon,
+  watchIcon
+} from "./chunk.D34QDO4H.js";
 import {
   requestIcon
 } from "./chunk.23TOS4ZE.js";
 import {
   icon_styles_default
 } from "./chunk.LMJPQPQT.js";
-import {
-  getIconLibrary,
-  unwatchIcon,
-  watchIcon
-} from "./chunk.O2PIWM25.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.2UZSRWJ7.js → chunk.4QUJBAX3.js}

@@ -73,6 +73,7 @@ var combobox_styles_default = css`
 
   .select__display-input::placeholder {
     color: var(--dsa-wc-input-on-base-text-field-placeholder-color);
+    opacity: 1;
   }
 
   .select__display-input:focus {
@@ -409,6 +410,10 @@ var combobox_styles_default = css`
   .select__loading_text > p {
     padding-left: var(--dsa-spacing-8);
   }
+
+  .hidden-tag-label {
+    display: none;
+  }
 `;
 
 export {

package/dist/chunks/{chunk.5MXBL3PY.js → chunk.4WWQYBFA.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.NHRDZGLI.js";
 import {
   DSAIcon
-} from "./chunk.V7MYOBN4.js";
+} from "./chunk.4L7EJLR4.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.JHPIOVRD.js → chunk.5ATFMWVP.js}

@@ -1,15 +1,15 @@
-import {
-  getStepIcon
-} from "./chunk.CCTWXABH.js";
 import {
   step_styles_default
 } from "./chunk.MNCPUPHX.js";
+import {
+  getStepIcon
+} from "./chunk.CCTWXABH.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.Z5LJXDHJ.js → chunk.5IKJNP4W.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";
@@ -36,9 +36,11 @@ var DSAPagination = class extends LoadingStateElement {
     this.mobile = false;
   }
   handlePageButtonClick(event) {
-    if (event.target.value !== -1 && !event.target.selected) {
+    if (event.currentTarget.value !== -1 && !event.currentTarget.selected) {
       this.emit("dsa-page-change", {
-        detail: { page: `${event.target.value}` }
+        detail: {
+          page: `${event.currentTarget.value}`
+        }
       });
     }
   }
@@ -69,6 +71,7 @@ var DSAPagination = class extends LoadingStateElement {
           ?compact=${this.compact}
           value=${pageNumber}
           ?selected=${this.currentPage === pageNumber}
+          @click=${this.handlePageButtonClick}
         ></dsa-pagination-button>
       `;
     });
@@ -110,7 +113,10 @@ var DSAPagination = class extends LoadingStateElement {
   renderItemsDisplayedItemsPerPage() {
     var _a;
     const fromItem = 1 + (this.currentPage - 1) * this.itemsPerPage;
-    const toItem = this.currentPage * this.itemsPerPage;
+    const toItem = Math.min(
+      this.currentPage * this.itemsPerPage,
+      this.totalItems
+    );
     return html`
       <div class="pagination__items">
         <p
@@ -186,10 +192,11 @@ var DSAPagination = class extends LoadingStateElement {
                   navigation-type=${this.navigationType}
                   value="${this.currentPage - 1}"
                   ?disabled=${this.currentPage < 2}
-                  class="pagination__navigation__button--mobile"
+                  class="pagination__navigation__button--mobile previous-button"
+                  @click=${this.handlePageButtonClick}
                 >
-                  <dsa-icon name="chevron_left" slot="prefix"></dsa-icon
-                  >${this.localize.term("previousPage")}
+                  <dsa-icon name="chevron_left" slot="prefix"></dsa-icon>
+                  ${this.localize.term("previousPage")}
                 </dsa-pagination-button>
                 <div class="pagination__navigation__page-input">
                   <dsa-input
@@ -211,19 +218,22 @@ var DSAPagination = class extends LoadingStateElement {
                   navigation-type=${this.navigationType}
                   value="${this.currentPage + 1}"
                   ?disabled=${this.currentPage > this.totalPages - 1}
-                  class="pagination__navigation__button--mobile"
-                  >${this.localize.term("nextPage")}
+                  class="pagination__navigation__button--mobile next-button"
+                  @click=${this.handlePageButtonClick}
+                >
+                  ${this.localize.term("nextPage")}
                   <dsa-icon name="chevron_right" slot="suffix"></dsa-icon>
                 </dsa-pagination-button>
               ` : html`
-                <ul class="button-list" @click=${this.handlePageButtonClick}>
+                <ul class="button-list">
                   <dsa-pagination-button
                     role="listitem"
                     navigation-type=${this.navigationType}
                     ?compact=${this.compact}
                     value="${this.currentPage - 1}"
                     ?disabled=${this.currentPage < 2}
-                    class="first-button"
+                    class="first-button previous-button"
+                    @click=${this.handlePageButtonClick}
                   >
                     <dsa-icon name="chevron_left" slot="prefix"></dsa-icon>
                     ${this.compact ? html`
@@ -241,7 +251,8 @@ var DSAPagination = class extends LoadingStateElement {
                     ?compact=${this.compact}
                     value="${this.currentPage + 1}"
                     ?disabled=${this.currentPage > this.totalPages - 1}
-                    class="last-button"
+                    class="last-button next-button"
+                    @click=${this.handlePageButtonClick}
                   >
                     ${this.compact ? html`<dsa-visually-hidden
                           >${this.localize.term(

package/dist/chunks/{chunk.PNTPO2DN.js → chunk.6QGIFSKH.js}

@@ -1,6 +1,6 @@
 import {
   select_styles_default
-} from "./chunk.ZWVWEQGL.js";
+} from "./chunk.NDQ5XCHJ.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";
@@ -26,7 +26,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.6L6CZSQX.js";
+} from "./chunk.DZLCCB5R.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";
@@ -296,6 +296,7 @@ var DSASelect = class extends ShoelaceElement {
   handleTagRemove(event, option) {
     event.stopPropagation();
     if (!this.disabled) {
+      this.focusNextTagOrInput(option);
       this.toggleOptionSelection(option, false);
       this.updateComplete.then(() => {
         this.emit("dsa-input");
@@ -303,6 +304,15 @@ var DSASelect = class extends ShoelaceElement {
       });
     }
   }
+  focusNextTagOrInput(option) {
+    const optionIndex = this.selectedOptions.findIndex((el) => el === option);
+    const nextOption = this.selectedOptions[optionIndex + 1];
+    if (nextOption) {
+      nextOption.focus();
+    } else {
+      this.displayInput.focus({ preventScroll: true });
+    }
+  }
   // Gets an array of all <dsa-option> elements
   getAllOptions() {
     return [...this.querySelectorAll("dsa-option")];
@@ -352,14 +362,7 @@ var DSASelect = class extends ShoelaceElement {
     this.selectedOptions = this.getAllOptions().filter((el) => el.selected);
     if (this.multiple) {
       this.value = this.selectedOptions.map((el) => el.value);
-      if (this.placeholder && this.value.length === 0) {
-        this.displayLabel = "";
-      } else {
-        this.displayLabel = this.localize.term(
-          "numOptionsSelected",
-          this.selectedOptions.length
-        );
-      }
+      this.displayLabel = "";
     } else {
       this.value = (_b = (_a = this.selectedOptions[0]) == null ? void 0 : _a.value) != null ? _b : "";
       this.displayLabel = (_d = (_c = this.selectedOptions[0]) == null ? void 0 : _c.getTextLabel()) != null ? _d : "";
@@ -476,6 +479,7 @@ var DSASelect = class extends ShoelaceElement {
     const isPlaceholderVisible = this.placeholder && this.value.length === 0;
     const selectInputWidth = this.displayValue ? isValueDefined ? this.value.length : 1 : void 0;
     const isDisabledOrReadonly = this.disabled || this.readonly;
+    const ariaDescribedBy = `${this.multiple && this.maxOptionsVisible > 0 ? this.selectedOptions.slice(0, this.maxOptionsVisible).map((option) => `tag-${option.value}`).join(" ") : ""} ${this.multiple && this.selectedOptions.length > this.maxOptionsVisible ? "tag-remaining" : ""} ${this.error ? "error-text" : ""} help-text`;
     return html`
       <div
         part="form-control"
@@ -572,7 +576,7 @@ var DSASelect = class extends ShoelaceElement {
       hasLabel ? void 0 : this.title
     )}
                 aria-disabled=${isDisabledOrReadonly ? "true" : "false"}
-                aria-describedby=${this.error ? "error-text help-text" : "help-text"}
+                aria-describedby=${ariaDescribedBy}
                 role="combobox"
                 tabindex="0"
                 @focus=${this.handleFocus}
@@ -598,10 +602,16 @@ var DSASelect = class extends ShoelaceElement {
                               label=${option.getTextLabel()}
                             >
                             </dsa-tag>
+                            <span
+                              id=${`tag-${option.value}`}
+                              class="hidden-tag-label"
+                              >${option.getTextLabel()},</span
+                            >
                           `;
       } else if (index === this.maxOptionsVisible) {
         return html`
                             <dsa-tag
+                              id="tag-remaining"
                               size=${this.size}
                               label="+${this.selectedOptions.length - index}"
                             >

package/dist/chunks/{chunk.JXWCUSV3.js → chunk.6SIIMZ3D.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.AMIXGL74.js → chunk.A4O4JY6G.js}

@@ -1,6 +1,6 @@
 import {
   combobox_styles_default
-} from "./chunk.2UZSRWJ7.js";
+} from "./chunk.4QUJBAX3.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";
@@ -29,7 +29,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.6L6CZSQX.js";
+} from "./chunk.DZLCCB5R.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";
@@ -244,6 +244,7 @@ var DSACombobox = class extends ShoelaceElement {
   handleTagRemove(event, option) {
     event.stopPropagation();
     if (!this.disabled) {
+      this.focusNextTagOrInput(option);
       this.toggleOptionSelection(option, false);
       this.updateComplete.then(() => {
         this.emit("dsa-input");
@@ -251,6 +252,15 @@ var DSACombobox = class extends ShoelaceElement {
       });
     }
   }
+  focusNextTagOrInput(option) {
+    const optionIndex = this.selectedOptions.findIndex((el) => el === option);
+    const nextOption = this.selectedOptions[optionIndex + 1];
+    if (nextOption) {
+      nextOption.focus();
+    } else {
+      this.displayInput.focus({ preventScroll: true });
+    }
+  }
   // Gets an array of all <dsa-option> elements
   getAllOptions() {
     if (this.items !== void 0) {
@@ -571,6 +581,7 @@ var DSACombobox = class extends ShoelaceElement {
     const hasClearIcon = this.clearable && !this.disabled && isValueDefined;
     const isPlaceholderVisible = this.placeholder && this.value.length === 0;
     const selectInputWidth = this.value ? isValueDefined ? this.value.length : 1 : void 0;
+    const ariaDescribedBy = `${this.multiple && this.maxOptionsVisible > 0 ? this.selectedOptions.slice(0, this.maxOptionsVisible).map((option) => `tag-${option.value}`).join(" ") : ""} ${this.multiple && this.selectedOptions.length > this.maxOptionsVisible ? "tag-remaining" : ""} ${this.error ? "error-text" : ""} help-text`;
     return html`
       <div
         part="form-control"
@@ -670,7 +681,7 @@ var DSACombobox = class extends ShoelaceElement {
       hasLabel ? void 0 : this.title
     )}
                   aria-disabled=${this.disabled ? "true" : "false"}
-                  aria-describedby=${this.error ? "error-text help-text" : "help-text"}
+                  aria-describedby=${ariaDescribedBy}
                   aria-activedescendant=${(_b = (_a = this.currentOption) == null ? void 0 : _a.id) != null ? _b : ""}
                   role="combobox"
                   tabindex="0"
@@ -700,10 +711,16 @@ var DSACombobox = class extends ShoelaceElement {
                                 label=${option.getTextLabel()}
                               >
                               </dsa-tag>
+                              <span
+                                id=${`tag-${option.value}`}
+                                class="hidden-tag-label"
+                                >${option.getTextLabel()},</span
+                              >
                             `;
       } else if (index === this.maxOptionsVisible) {
         return html`
                               <dsa-tag
+                                id="tag-remaining"
                                 size=${this.size}
                                 label="+${this.selectedOptions.length - index}"
                               >

package/dist/chunks/{chunk.RBXTMFL6.js → chunk.A5S4PSDJ.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.R6572W75.js → chunk.AFGTS4PG.js}

@@ -1,6 +1,6 @@
 import {
   tooltip_styles_default
-} from "./chunk.EMJZLQCL.js";
+} from "./chunk.UVGAHM33.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";
@@ -48,14 +48,13 @@ var DSATooltip = class extends ShoelaceElement {
     this.handleBlur = this.handleBlur.bind(this);
     this.handleClick = this.handleClick.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
     this.handleMouseOver = this.handleMouseOver.bind(this);
     this.handleMouseOut = this.handleMouseOut.bind(this);
     this.updateComplete.then(() => {
       this.addEventListener("blur", this.handleBlur, true);
       this.addEventListener("focus", this.handleFocus, true);
       this.addEventListener("click", this.handleClick);
-      this.addEventListener("keydown", this.handleKeyDown);
       this.addEventListener("mouseover", this.handleMouseOver);
       this.addEventListener("mouseout", this.handleMouseOut);
     });
@@ -72,7 +71,7 @@ var DSATooltip = class extends ShoelaceElement {
     this.removeEventListener("blur", this.handleBlur, true);
     this.removeEventListener("focus", this.handleFocus, true);
     this.removeEventListener("click", this.handleClick);
-    this.removeEventListener("keydown", this.handleKeyDown);
+    this.removeEventListener("keydown", this.handleDocumentKeyDown);
     this.removeEventListener("mouseover", this.handleMouseOver);
     this.removeEventListener("mouseout", this.handleMouseOut);
   }
@@ -95,8 +94,8 @@ var DSATooltip = class extends ShoelaceElement {
       this.show();
     }
   }
-  handleKeyDown(event) {
-    if (this.open && event.key === "Escape") {
+  handleDocumentKeyDown(event) {
+    if (event.key === "Escape") {
       event.stopPropagation();
       this.hide();
     }
@@ -129,6 +128,7 @@ var DSATooltip = class extends ShoelaceElement {
         return;
       }
       this.emit("dsa-show");
+      document.addEventListener("keydown", this.handleDocumentKeyDown);
       await stopAnimations(this.body);
       this.body.hidden = false;
       this.popup.active = true;
@@ -136,9 +136,11 @@ var DSATooltip = class extends ShoelaceElement {
         dir: this.localize.dir()
       });
       await animateTo(this.popup.popup, keyframes, options);
+      this.popup.reposition();
       this.emit("dsa-after-show");
     } else {
       this.emit("dsa-hide");
+      document.removeEventListener("keydown", this.handleDocumentKeyDown);
       await stopAnimations(this.body);
       const { keyframes, options } = getAnimation(this, "tooltip.hide", {
         dir: this.localize.dir()
@@ -195,6 +197,7 @@ var DSATooltip = class extends ShoelaceElement {
         flip
         shift
         arrow
+        hover-bridge
       >
         <slot slot="anchor" aria-describedby="tooltip"></slot>