@ds-autonomie/web-components 2.0.1 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @ds-autonomie/web-components
 
+## 2.1.0
+
+### Minor Changes
+
+- 8dbb5e8: `download-card`: déplacement des attributs annexes dans le lien pour les lecteurs d'écran
+  `download-link`: déplacement des attributs annexes dans le lien pour les lecteurs d'écran
+- 2a6ce52: `callout` : remplacement de l'attribut `title` (déprécié) par `callout-title`; `button`, `checkbox` : remplacement des attributs `title` et `aria-label` (dépréciés) par `accessible-name`
+- 11314ee: `header`: ajout d'un attribut permettant de choisir la taille du logo
+  `header-search`: ajout d'un attribut permettant de rendre le composant dans un état ouvert permanent
+- 5f6d3f2: `header-search` : ajout d'un attribut `mobile`
+- ffea5ba: `tab` : ajout de l'attribut close-button-label
+- 2bc49cb: `header` : ajout d'un slot pour le premier logo
+- 151414f: `dialog`: ajout d'un attribut permettant de cacher le titre du header
+
+### Patch Changes
+
+- 5045b7d: `alert`: changement de l'attribut aria-live vers "polite"
+- ba1513b: `input-phone`: ajustement espaces
+- f2e90b5: Adaptation des stories pour améliorer les tests Chromatic
+- ba7b276: `menu-navigation`, `filter-select` : retouches a11y
+- c2407d7: `filter-select` : possibilité de changer d'option avec les flèches du clavier
+- 44be976: `radio-group`, `checkbox-group` : permettre de cacher le label (si redondant)
+
 ## 2.0.1
 
 ### Patch Changes

package/cdn/chunks/{chunk.QTUCYPM5.js → chunk.3TUFAITJ.js}

@@ -4,6 +4,7 @@ var icons = {
   add_box: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-8-2h2v-4h4v-2h-4V7h-2v4H7v2h4z"/></svg>`,
   arrow_upward: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>`,
   calendar_today: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V10h16v11zm0-13H4V5h16v3z"/></svg>`,
+  cancel: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg>`,
   check: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>`,
   chevron_left: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z"/></svg>`,
   chevron_right: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"/></svg>`,
@@ -24,6 +25,23 @@ var icons = {
   error_outline: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>`,
   expand_more: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"/></svg>`,
   filter_list: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/></svg>`,
+  french_flag: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <g clip-path="url(#clip0_24022_31892)">
+    <rect x="0.25" y="0.25" width="23.5" height="23.5" rx="1.75" fill="white" stroke="#F5F5F5" stroke-width="0.5"/>
+    <mask id="mask0_24022_31892" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+      <rect x="0.25" y="0.25" width="23.5" height="23.5" rx="1.75" fill="white" stroke="white" stroke-width="0.5"/>
+    </mask>
+    <g mask="url(#mask0_24022_31892)">
+      <rect x="16" width="8" height="24" fill="#F44653"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M0 24H8V0H0V24Z" fill="#1035BB"/>
+    </g>
+  </g>
+  <defs>
+    <clipPath id="clip0_24022_31892">
+      <rect width="24" height="24" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>`,
   horizontal_rule: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M4 11h16v2H4z"/></svg>`,
   indeterminate_check_box: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM7 11h10v2H7z"/></svg>`,
   info: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>`,

package/cdn/chunks/{chunk.ZC2YWJX5.js → chunk.5BF76EO7.js}

@@ -1,6 +1,6 @@
 import {
   option_styles_default
-} from "./chunk.VR6U4JFG.js";
+} from "./chunk.CUCCBQJX.js";
 import {
   LocalizeController
 } from "./chunk.ZLWLHLBC.js";

package/cdn/chunks/{chunk.HRSNXHEG.js → chunk.5BL6KECM.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk.3BJMFOLF.js";
 import {
   header_styles_default
-} from "./chunk.CSDIRQFE.js";
+} from "./chunk.XLX7QTXT.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
@@ -45,6 +45,7 @@ var DSAHeader = class extends ShoelaceElement {
     this.localize = new LocalizeController(this);
     this.firstLogo = "public";
     this.logoHref = "/";
+    this.logoSize = "default";
     this.searchExpanded = false;
     this.mobile = false;
   }
@@ -74,6 +75,14 @@ var DSAHeader = class extends ShoelaceElement {
       }
     }
   }
+  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() {
     const hasBrand = this.hasSlotController.test("second-logo") || this.hasSlotController.test("site-name");
     return x`
@@ -98,11 +107,22 @@ var DSAHeader = class extends ShoelaceElement {
       "header--search-expanded": this.hasSlotController.test("search") && this.searchExpanded
     })}
           >
-            <a href=${this.logoHref} part="first-logo" class="logo dsa-link">
-              ${this.firstLogo === "public" ? dsaLogoSvg(this.localize.term("dsaGoToHomepage")) : cnsaLogoSvg(this.localize.term("cnsaGoToHomepage"))}
-            </a>
+            <slot
+              name="first-logo"
+              part="first-logo"
+              class="logo ${this.logoSize === "large" && "logo-large"}"
+            >
+              <a href=${this.logoHref} class="logo-link">
+                ${this.firstLogo === "public" ? dsaLogoSvg(this.localize.term("dsaGoToHomepage")) : cnsaLogoSvg(this.localize.term("cnsaGoToHomepage"))}
+              </a>
+            </slot>
             <div part="brand">
-              ${this.hasSlotController.test("second-logo") ? x` <slot name="second-logo" class="logo"></slot> ` : ""}
+              ${this.hasSlotController.test("second-logo") ? x`
+                    <slot
+                      name="second-logo"
+                      class="logo ${this.logoSize === "large" && "logo-large"}"
+                    ></slot>
+                  ` : ""}
               ${this.hasSlotController.test("site-name") || this.hasSlotController.test("baseline") ? x`
                     <div class="site-info">
                       <slot name="site-name" part="site-name"></slot>
@@ -130,6 +150,9 @@ __decorateClass([
 __decorateClass([
   n({ reflect: true, attribute: "logo-href" })
 ], DSAHeader.prototype, "logoHref", 2);
+__decorateClass([
+  n({ attribute: "logo-size" })
+], DSAHeader.prototype, "logoSize", 2);
 __decorateClass([
   n({ reflect: true, type: Boolean, attribute: "search-expanded" })
 ], DSAHeader.prototype, "searchExpanded", 2);
@@ -139,6 +162,9 @@ __decorateClass([
 __decorateClass([
   watch("searchExpanded")
 ], DSAHeader.prototype, "handleSearchExpanded", 1);
+__decorateClass([
+  watch("mobile")
+], DSAHeader.prototype, "handleMobile", 1);
 DSAHeader = __decorateClass([
   t("dsa-header")
 ], DSAHeader);

package/cdn/chunks/{chunk.GDKBZ2H6.js → chunk.6CF6SXDF.js}

@@ -71,8 +71,7 @@ var DSATableRow = class extends ShoelaceElement {
             class="checkbox"
             size="small"
             name=${this.selectionName}
-            title=${this.selectionLabel !== "" ? this.selectionLabel : this.localize.term("selectRow")}
-            aria-label=${this.selectionLabel !== "" ? this.selectionLabel : this.localize.term("selectRow")}
+            accessible-name=${this.selectionLabel !== "" ? this.selectionLabel : this.localize.term("selectRow")}
             value=${this.selectionValue}
             ?checked=${this.selected}
             @click=${(e3) => e3.stopPropagation()}

package/cdn/chunks/{chunk.Z326Q4YW.js → chunk.6V2FRFCB.js}

@@ -37,7 +37,7 @@ var DSAMenuNavigation = class extends ShoelaceElement {
   }
   // A change of attributes on the slotted elements does not trigger the "slotchange" event, so we add an observer
   render() {
-    return x`<slot role="list" @keydown=${this.handleKeyDown}></slot>`;
+    return x`<slot @keydown=${this.handleKeyDown}></slot>`;
   }
 };
 DSAMenuNavigation.styles = menu_navigation_styles_default;

package/cdn/chunks/{chunk.KQ5BQRHA.js → chunk.77CWRZEL.js}

@@ -300,6 +300,9 @@ var input_phone_styles_default = i`
       var(--dsa-wc-input-phone-height) - var(--dsa-wc-input-border-width) * 2
     );
   }
+  .form-control--medium .input-phone__flag {
+    width: 1.25rem;
+  }
 
   .form-control--large {
     --input-phone__select__min-width: 68px;
@@ -316,6 +319,9 @@ var input_phone_styles_default = i`
         2
     );
   }
+  .form-control--large .input-phone__flag {
+    width: 1.5rem;
+  }
 
   /*
    *  Clearable

package/cdn/chunks/{chunk.5UR3I4O7.js → chunk.BE7PKTJW.js}

@@ -8,7 +8,7 @@ import {
   getIconLibrary,
   unwatchIcon,
   watchIcon
-} from "./chunk.3E6XVTWL.js";
+} from "./chunk.P45DWAWT.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/chunk.BNPGOQZ2.js

@@ -0,0 +1,223 @@
+import {
+  header_search_styles_default
+} from "./chunk.XIX7XP2G.js";
+import {
+  l
+} from "./chunk.7PPSHHT2.js";
+import {
+  LocalizeController
+} from "./chunk.ZLWLHLBC.js";
+import {
+  e as e2
+} from "./chunk.IKHG7XGO.js";
+import {
+  ShoelaceElement,
+  e,
+  n,
+  r,
+  t
+} from "./chunk.DZB6XUZ7.js";
+import {
+  x
+} from "./chunk.7HUC6BF3.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/header-search/header-search.ts
+var DSAHeaderSearch = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.hasFocus = false;
+    this.value = "";
+    this.expanded = false;
+    this.alwaysOpen = false;
+    this.mobile = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "search");
+  }
+  async handleExpandClick() {
+    this.emit("dsa-expand");
+    this.expanded = true;
+    await this.updateComplete;
+    this.input.focus();
+  }
+  handleChange() {
+    this.value = this.input.value;
+    this.emit("dsa-change");
+  }
+  handleInput() {
+    this.value = this.input.value;
+    this.emit("dsa-input");
+  }
+  handleInputFocus() {
+    this.hasFocus = true;
+    this.emit("dsa-focus");
+  }
+  handleInputBlur() {
+    this.hasFocus = false;
+    this.emit("dsa-blur");
+  }
+  handleClearClick(event) {
+    this.value = "";
+    this.emit("dsa-clear");
+    this.emit("dsa-input");
+    this.emit("dsa-change");
+    this.input.focus();
+    event.stopPropagation();
+  }
+  handleKeyDown(event) {
+    event.stopPropagation();
+    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+    if (event.key === "Enter" && !hasModifier) {
+      setTimeout(() => {
+        if (!event.defaultPrevented && !event.isComposing) {
+          this.handleSubmitClick();
+        }
+      });
+    }
+  }
+  handleSubmitClick() {
+    this.emit("dsa-submit");
+  }
+  async handleCancelClick() {
+    this.emit("dsa-collapse");
+    this.expanded = false;
+    await this.updateComplete;
+    this.expandButton.focus();
+  }
+  render() {
+    if (!this.expanded && !this.alwaysOpen) {
+      if (this.mobile) {
+        return x`
+          <dsa-icon-button
+            id="expand-button"
+            part="button button--navigation"
+            name="search"
+            library="system"
+            size="large"
+            label=${this.localize.term("search")}
+            @click=${this.handleExpandClick}
+          ></dsa-icon-button>
+        `;
+      } else {
+        return x`
+          <dsa-button
+            id="expand-button"
+            variant="navigation"
+            part="button button--navigation"
+            }
+            @click=${this.handleExpandClick}
+          >
+            <dsa-icon name="search" library="system"></dsa-icon>
+            <span>${this.localize.term("search")}</span>
+          </dsa-button>
+        `;
+      }
+    }
+    return x`
+      <div
+        class=${e2({
+      "search-bar": true,
+      "search-bar--mobile": this.mobile,
+      "search-bar--desktop": !this.mobile
+    })}
+      >
+        <div
+          class=${e2({ input: true, "input--focused": this.hasFocus })}
+        >
+          <input
+            class=${e2({
+      input__control: true,
+      "input__control--mobile": this.mobile,
+      "input__control--desktop": !this.mobile
+    })}
+            type="search"
+            placeholder=${this.localize.term("search")}
+            aria-label=${this.localize.term("search")}
+            title=${this.localize.term("search")}
+            .value=${l(this.value)}
+            @change=${this.handleChange}
+            @input=${this.handleInput}
+            @focus=${this.handleInputFocus}
+            @blur=${this.handleInputBlur}
+            @keydown=${this.handleKeyDown}
+          />
+          ${this.value.length > 0 ? x`
+                <dsa-icon-button
+                  id="clear-button"
+                  part="clear-button"
+                  name="cancel"
+                  label=${this.localize.term("clearEntry")}
+                  @click=${this.handleClearClick}
+                  library="system"
+                ></dsa-icon-button>
+              ` : ""}
+        </div>
+
+        <dsa-icon-button
+          id="submit-button"
+          name="search"
+          library="system"
+          label=${this.localize.term("search")}
+          variant="primary"
+          size=${this.mobile ? "large" : "xlarge"}
+          @click=${this.handleSubmitClick}
+        >
+        </dsa-icon-button>
+
+        ${!this.alwaysOpen ? x`
+              <dsa-button
+                id="cancel-button"
+                variant="tertiary"
+                size=${this.mobile ? "small" : "medium"}
+                @click=${this.handleCancelClick}
+              >
+                ${this.localize.term("cancel")}
+              </dsa-button>
+            ` : ""}
+      </div>
+    `;
+  }
+};
+DSAHeaderSearch.styles = header_search_styles_default;
+__decorateClass([
+  e(".input__control")
+], DSAHeaderSearch.prototype, "input", 2);
+__decorateClass([
+  e("#expand-button")
+], DSAHeaderSearch.prototype, "expandButton", 2);
+__decorateClass([
+  e("#submit-button")
+], DSAHeaderSearch.prototype, "submitButton", 2);
+__decorateClass([
+  e("#cancel-button")
+], DSAHeaderSearch.prototype, "cancelButton", 2);
+__decorateClass([
+  e("#clear-button")
+], DSAHeaderSearch.prototype, "clearButton", 2);
+__decorateClass([
+  r()
+], DSAHeaderSearch.prototype, "hasFocus", 2);
+__decorateClass([
+  n()
+], DSAHeaderSearch.prototype, "value", 2);
+__decorateClass([
+  n({ reflect: true, type: Boolean })
+], DSAHeaderSearch.prototype, "expanded", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "always-open" })
+], DSAHeaderSearch.prototype, "alwaysOpen", 2);
+__decorateClass([
+  n({ type: Boolean })
+], DSAHeaderSearch.prototype, "mobile", 2);
+DSAHeaderSearch = __decorateClass([
+  t("dsa-header-search")
+], DSAHeaderSearch);
+
+export {
+  DSAHeaderSearch
+};

package/cdn/chunks/{chunk.VR6U4JFG.js → chunk.CUCCBQJX.js}

@@ -145,11 +145,20 @@ var option_styles_default = i`
 
   .option__prefix::slotted(*),
   .option--error .option__error-icon {
-    margin-inline-end: var(--dsa-wc-option-check-icon-horizontal-padding);
+    margin-inline-end: var(--dsa-wc-option-prefix-suffix-inline-padding);
+  }
+  .option--large .option__prefix::slotted(*),
+  .option--large .option--error .option__error-icon {
+    margin-inline-end: var(--dsa-wc-option-large-prefix-suffix-inline-padding);
   }
 
   .option__suffix::slotted(*) {
-    margin-inline-start: var(--dsa-wc-option-check-icon-horizontal-padding);
+    margin-inline-start: var(--dsa-wc-option-prefix-suffix-inline-padding);
+  }
+  .option--large .option__suffix::slotted(*) {
+    margin-inline-start: var(
+      --dsa-wc-option-large-prefix-suffix-inline-padding
+    );
   }
 
   @media (forced-colors: active) {

package/cdn/chunks/{chunk.Q2IGBG6C.js → chunk.CVV4WLBC.js}

@@ -7,7 +7,7 @@ import {
 } from "./chunk.EMIT7S33.js";
 import {
   dialog_styles_default
-} from "./chunk.BTTFPDXL.js";
+} from "./chunk.XPL6N3OJ.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
@@ -59,6 +59,7 @@ var DSADialog = class extends ShoelaceElement {
     this.modal = new Modal(this);
     this.open = false;
     this.label = "";
+    this.hideTitle = false;
     this.noHeader = false;
     this.size = "medium";
   }
@@ -212,6 +213,7 @@ var DSADialog = class extends ShoelaceElement {
     return await waitForEvent(this, "dsa-after-hide");
   }
   render() {
+    const hasVisibleTitle = !this.noHeader && !this.hideTitle;
     return x`
       <div
         part="base"
@@ -238,18 +240,20 @@ var DSADialog = class extends ShoelaceElement {
           aria-modal="true"
           aria-hidden=${this.open ? "false" : "true"}
           aria-label=${ifDefinedAndNotEmpty(
-      this.noHeader ? this.label : void 0
+      !hasVisibleTitle ? this.label : void 0
     )}
-          aria-labelledby=${o(!this.noHeader ? "title" : void 0)}
+          aria-labelledby=${o(hasVisibleTitle ? "title" : void 0)}
           tabindex="-1"
         >
           ${!this.noHeader ? x`
                 <header part="header" class="dialog__header">
-                  <h1 part="title" class="dialog__title" id="title">
-                    <slot name="label">
-                      ${this.label.length > 0 ? this.label : String.fromCharCode(65279)}
-                    </slot>
-                  </h1>
+                  ${!this.hideTitle ? x`
+                        <h1 part="title" class="dialog__title" id="title">
+                          <slot name="label">
+                            ${this.label.length > 0 ? this.label : String.fromCharCode(65279)}
+                          </slot>
+                        </h1>
+                      ` : ""}
                   <div part="header-actions" class="dialog__header-actions">
                     <slot name="header-actions"></slot>
                     <dsa-icon-button
@@ -260,6 +264,7 @@ var DSADialog = class extends ShoelaceElement {
                       label=${this.localize.term("close")}
                       @click="${() => this.requestClose("close-button")}"
                       library="system"
+                      size="x-large"
                     ></dsa-icon-button>
                   </div>
                 </header>
@@ -291,6 +296,9 @@ __decorateClass([
 __decorateClass([
   n({ reflect: true })
 ], DSADialog.prototype, "label", 2);
+__decorateClass([
+  n({ attribute: "hide-title", type: Boolean, reflect: true })
+], DSADialog.prototype, "hideTitle", 2);
 __decorateClass([
   n({ attribute: "no-header", type: Boolean, reflect: true })
 ], DSADialog.prototype, "noHeader", 2);

package/cdn/chunks/{chunk.2GCON4UO.js → chunk.DSKRAAOI.js}

@@ -157,9 +157,8 @@ var DSAAlert = class extends ShoelaceElement {
     });
   }
   render() {
-    var _a;
     return x`
-      <div aria-live="assertive" aria-atomic="true">
+      <div aria-live="polite" aria-atomic="true">
         <div
           part="base"
           class=${e2({
@@ -181,7 +180,7 @@ var DSAAlert = class extends ShoelaceElement {
             library="system"
           ></dsa-icon>
           <div class="alert__text">
-            ${this.title !== "" || this.alertTitle !== "" ? x`
+            ${this.title || this.alertTitle ? x`
                   <div
                     part="header"
                     id="header"
@@ -189,7 +188,7 @@ var DSAAlert = class extends ShoelaceElement {
                     role=${o(this.headerLevel ? "heading" : void 0)}
                     class="alert__title"
                   >
-                    ${(_a = this.alertTitle) != null ? _a : this.title}
+                    ${this.alertTitle || this.title}
                   </div>
                 ` : ""}
             <slot part="message" class="alert__message"></slot>

package/cdn/chunks/{chunk.454LK2SB.js → chunk.E6VF2I6I.js}

@@ -78,6 +78,7 @@ var DSAButton = class extends ShoelaceElement {
     this.href = "";
     this.rel = "noreferrer noopener";
     this.ariaLabel = "";
+    this.accessibleName = "";
     this.description = "";
   }
   /** Gets the validity state object */
@@ -235,14 +236,15 @@ var DSAButton = class extends ShoelaceElement {
         target=${o(isLink ? this.target : void 0)}
         download=${o(isLink ? this.download : void 0)}
         rel=${o(isLink ? this.rel : void 0)}
-        role=${o(isLink ? void 0 : "button")}
-        aria-label=${ifDefinedAndNotEmpty(this.ariaLabel)}
+        aria-label=${ifDefinedAndNotEmpty(
+      this.accessibleName || this.ariaLabel
+    )}
         aria-describedby=${o(
       this.description !== "" ? "description" : void 0
     )}
-        aria-disabled=${this.disabled ? "true" : "false"}
+        aria-disabled=${o(this.disabled ? "true" : void 0)}
         aria-pressed=${o(this.toggle ? this.pressed : void 0)}
-        tabindex=${this.disabled ? "-1" : "0"}
+        tabindex=${o(this.disabled ? "-1" : void 0)}
         @blur=${this.handleBlur}
         @focus=${this.handleFocus}
         @invalid=${this.isButton() ? this.handleInvalid : null}
@@ -359,6 +361,9 @@ __decorateClass([
 __decorateClass([
   n({ attribute: "aria-label" })
 ], DSAButton.prototype, "ariaLabel", 2);
+__decorateClass([
+  n({ attribute: "accessible-name" })
+], DSAButton.prototype, "accessibleName", 2);
 __decorateClass([
   n({ attribute: "description" })
 ], DSAButton.prototype, "description", 2);

package/cdn/chunks/{chunk.JYYFSSR2.js → chunk.EARU4CHS.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.7M6TBOTT.js";
 import {
   DSAIcon
-} from "./chunk.5UR3I4O7.js";
+} from "./chunk.BE7PKTJW.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";