@ds-autonomie/web-components 2.0.1 → 2.2.0

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

@@ -1,29 +1,8 @@
 // src/components/download-link/download-link.styles.ts
 import { css } from "lit";
 var download_link_styles_default = css`
-  .document-link {
-    font: var(--dsa-wc-link-font);
-    --icon-size: var(--dsa-spacing-24);
-  }
-  .document-link--x-large {
-    font: var(--dsa-wc-link-font-x-large);
-    --icon-size: var(--dsa-spacing-32);
-  }
-  .document-link--large {
-    font: var(--dsa-wc-link-font-large);
-    --icon-size: 28px;
-  }
-  .document-link--small {
-    font: var(--dsa-wc-link-font-small);
-    --icon-size: 20px;
-  }
-  .document-link--x-small {
-    font: var(--dsa-wc-link-font-x-small);
-    --icon-size: var(--dsa-spacing-16);
-  }
-  .document-link--2x-small {
-    font: var(--dsa-wc-link-font-2x-small);
-    --icon-size: 14px;
+  :host {
+    display: inline-block;
   }
 
   .link {
@@ -93,6 +72,38 @@ var download_link_styles_default = css`
     border-radius: var(--dsa-wc-focus-ring-radius);
   }
 
+  .document-link {
+    font: var(--dsa-wc-link-font);
+    --icon-size: var(--dsa-spacing-24);
+  }
+  .document-link--x-large {
+    font: var(--dsa-wc-link-font-x-large);
+    --icon-size: var(--dsa-spacing-32);
+  }
+  .document-link--large {
+    font: var(--dsa-wc-link-font-large);
+    --icon-size: 28px;
+  }
+  .document-link--small {
+    font: var(--dsa-wc-link-font-small);
+    --icon-size: 20px;
+  }
+  .document-link--x-small {
+    font: var(--dsa-wc-link-font-x-small);
+    --icon-size: var(--dsa-spacing-16);
+  }
+  .document-link--2x-small {
+    font: var(--dsa-wc-link-font-2x-small);
+    --icon-size: 14px;
+  }
+
+  dsa-icon {
+    width: var(--icon-size);
+    height: var(--icon-size);
+    margin-inline-start: var(--dsa-spacing-8);
+    vertical-align: bottom;
+  }
+
   .document-info {
     color: var(--dsa-wc-link-document-info-on-base-color);
     margin-top: var(--dsa-spacing-8);
@@ -108,13 +119,6 @@ var download_link_styles_default = css`
   .document-info--floating-menu {
     color: var(--dsa-wc-link-document-info-floating-menu-color);
   }
-
-  dsa-icon {
-    width: var(--icon-size);
-    height: var(--icon-size);
-    margin-inline-start: var(--dsa-spacing-8);
-    vertical-align: bottom;
-  }
 `;
 
 export {

package/dist/chunks/{chunk.R426GAXO.js → chunk.MJKJSMQX.js}

@@ -67,12 +67,14 @@ var dialog_styles_default = css`
     display: flex;
     background-color: var(--dsa-wc-dialog-panel-color);
     z-index: 10;
+    justify-content: end;
+    align-items: center;
+    padding: var(--header-spacing);
   }
 
   .dialog__title {
     flex: 1 1 auto;
     font: var(--dsa-wc-dialog-header-title-font);
-    padding: var(--header-spacing);
     margin: 0;
   }
 
@@ -83,7 +85,6 @@ var dialog_styles_default = css`
     justify-content: end;
     font: var(--dsa-wc-dialog-header-title-font);
     gap: var(--dsa-wc-dialog-header-actions-gap);
-    padding: 0 var(--header-spacing);
   }
 
   .dialog__header-actions dsa-icon-button,

package/dist/chunks/{chunk.IAL72I44.js → chunk.MYSJOWY5.js}

@@ -20,7 +20,7 @@ var errorArgTypes = {
 };
 var errorMessageArgTypes = {
   name: "error-message",
-  description: 'An error message that is shown when `error` is set to true. If there are several messages, must be a string of messages separated by a pipe, e.g. "Error 1|Error 2|Error 3"',
+  description: 'The error message or messages that are shown when \u201Cerror\u201D is set to \u201Ctrue\u201D. To display several messages, they must be separated by a pipe character, e.g. "Error 1|Error 2|Error 3\u201D',
   table: {
     defaultValue: { summary: "''" },
     type: {
@@ -126,6 +126,9 @@ var filtersDrawerDecorator = (story) => {
     </dsa-drawer>
   `;
 };
+var fullScreenDecorator = (story) => {
+  return html` <div style="height: 100vh">${story()}</div>`;
+};
 
 export {
   updateCompleteArgTypes,
@@ -136,5 +139,6 @@ export {
   withOnLayerOnBaseDecorator,
   withOnFloatingMenuOnBaseDecorator,
   withBackgroundDecorator,
-  filtersDrawerDecorator
+  filtersDrawerDecorator,
+  fullScreenDecorator
 };

package/dist/chunks/{chunk.3E6XVTWL.js → chunk.P45DWAWT.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.C2W7WMBY.js";
 import {
   library_system_default
-} from "./chunk.QTUCYPM5.js";
+} from "./chunk.3TUFAITJ.js";
 
 // src/components/icon/library.ts
 var registry = [library_default_default, library_system_default];

package/dist/chunks/chunk.PWL7QCVG.js

@@ -0,0 +1,9 @@
+// src/internal/a11y-warning.ts
+var A11Y_WARNING_START = "(DSA a11y) ";
+function a11yWarning(message) {
+  console.warn(`${A11Y_WARNING_START}${message}`);
+}
+
+export {
+  a11yWarning
+};

package/dist/chunks/{chunk.7NPJ25LI.js → chunk.PZXD4VTO.js}

@@ -1,6 +1,6 @@
 import {
   download_link_styles_default
-} from "./chunk.ARYKCY32.js";
+} from "./chunk.MBRRLF6D.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";
@@ -26,32 +26,26 @@ var DSADownloadLink = class extends ShoelaceElement {
   }
   render() {
     return html`
-      <div
-        part="base"
+      <a
+        part="link"
         class=${classMap({
+      link: true,
+      "link--on-layer": this.variant === "layer",
+      "link--on-contrasted": this.variant === "contrasted",
+      "link--floating-menu": this.variant === "floating",
       "document-link--x-large": this.size === "xlarge",
       "document-link--large": this.size === "large",
       "document-link--small": this.size === "small",
       "document-link--x-small": this.size === "xsmall",
       "document-link--2x-small": this.size === "2xsmall"
     })}
+        download=${this.filename}
+        href=${this.href}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
       >
-        <a
-          part="link"
-          class=${classMap({
-      link: true,
-      "link--on-layer": this.variant === "layer",
-      "link--on-contrasted": this.variant === "contrasted",
-      "link--floating-menu": this.variant === "floating"
-    })}
-          download=${this.filename}
-          href=${this.href}
-          @focus=${this.handleFocus}
-          @blur=${this.handleBlur}
-        >
-          <slot></slot>
-          <dsa-icon name="download" library="system"></dsa-icon>
-        </a>
+        <slot></slot>
+        <dsa-icon name="download" library="system"></dsa-icon>
         <p
           id="document-info"
           class=${classMap({
@@ -63,7 +57,7 @@ var DSADownloadLink = class extends ShoelaceElement {
         >
           ${this.format}${this.format && this.documentSize ? " - " : ""}${this.documentSize}
         </p>
-      </div>
+      </a>
     `;
   }
 };

package/dist/chunks/chunk.RJXLIOW7.js

@@ -0,0 +1,28 @@
+// src/components/input-phone/input-phone.utils.ts
+var frenchNumberPrefix = [
+  "+33",
+  "+262",
+  "+508",
+  "+590",
+  "+594",
+  "+596",
+  "+681",
+  "+687",
+  "+689"
+];
+var phonePrefixOptions = [
+  { value: "+33", label: "fr_FR" },
+  { value: "+590", label: "fr_GP" },
+  { value: "+594", label: "fr_GF" },
+  { value: "+596", label: "fr_MQ" },
+  { value: "+687", label: "fr_NC" },
+  { value: "+689", label: "fr_PF" },
+  { value: "+508", label: "fr_PM" },
+  { value: "+262", label: "fr_RE" },
+  { value: "+681", label: "fr_WF" }
+];
+
+export {
+  frenchNumberPrefix,
+  phonePrefixOptions
+};

package/dist/chunks/{chunk.35URRZJ2.js → chunk.SYVX56PU.js}

@@ -64,8 +64,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=${(e) => e.stopPropagation()}

package/dist/chunks/chunk.UDJJFUZ3.js

@@ -0,0 +1,335 @@
+import {
+  input_otp_styles_default
+} from "./chunk.5P2EEOC5.js";
+import {
+  FormControlLayout
+} from "./chunk.I5HR7JYK.js";
+import {
+  defaultValue
+} from "./chunk.CMJ2SRTL.js";
+import {
+  FormControlController
+} from "./chunk.JA7YFGLI.js";
+import {
+  watch
+} from "./chunk.NOMN6DGD.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.ZQJVCRB2.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/input-otp/input-otp.ts
+import { html } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { live } from "lit/directives/live.js";
+var DSAInputOTP = class extends FormControlLayout {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this, {
+      assumeInteractionOn: ["dsa-blur", "dsa-input"]
+    });
+    this.hasFocus = false;
+    this.currentIndex = 0;
+    this.value = "";
+    this.defaultValue = "";
+    this.length = 6;
+  }
+  /** Gets the validity state object */
+  get validity() {
+    return this.input.validity;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    return this.input.validationMessage;
+  }
+  async firstUpdated() {
+    await this.updateComplete;
+    this.formControlController.updateValidity();
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("dsa-blur");
+  }
+  handleChange() {
+    this.value = this.input.value;
+    this.emit("dsa-change");
+  }
+  handleFocus() {
+    this.currentIndex = this.value ? -1 : 0;
+    this.hasFocus = true;
+    this.emit("dsa-focus");
+  }
+  handleInput(event) {
+    var _a;
+    if (this.patternRegexp && !this.patternRegexp.test(this.input.value)) {
+      this.input.value = this.value;
+      this.handleCurrentIndexChange();
+      return;
+    }
+    if (this.input.value.length > this.length) {
+      this.input.value = this.input.value.slice(0, this.length);
+    } else {
+      this.value = this.input.value;
+      if (!event.data) {
+        if (this.currentIndex === 0) {
+          this.handleCurrentIndexChange();
+        } else if (this.currentIndex === -1) {
+          this.currentIndex = 0;
+        } else {
+          this.currentIndex -= 1;
+        }
+      } else {
+        if (((_a = event.data) == null ? void 0 : _a.length) === 1) {
+          this.currentIndex = this.currentIndex < this.length ? this.currentIndex + 1 : this.length - 1;
+        } else {
+          this.currentIndex = this.getLastIndex();
+        }
+      }
+      this.formControlController.updateValidity();
+      this.emit("dsa-input");
+    }
+  }
+  handleSelect() {
+    if (this.input.value.length > 1 && this.input.selectionStart === 0 && this.input.selectionEnd === this.input.value.length) {
+      this.currentIndex = -1;
+    }
+  }
+  handleInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+  handleKeyDown(event) {
+    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+    if (event.key === "Enter" && !hasModifier) {
+      setTimeout(() => {
+        if (!event.defaultPrevented && !event.isComposing) {
+          this.formControlController.submit();
+        }
+      });
+    }
+    if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key)) {
+      event.preventDefault();
+      switch (event.key) {
+        case "ArrowLeft":
+          this.currentIndex = this.currentIndex > 0 ? this.currentIndex - 1 : 0;
+          break;
+        case "ArrowRight":
+          if (this.currentIndex === -1) {
+            this.currentIndex = this.getLastIndex();
+          } else if (this.currentIndex < this.value.length && this.currentIndex < this.length - 1) {
+            this.currentIndex += 1;
+          }
+          break;
+        case "ArrowUp":
+          this.currentIndex = 0;
+          break;
+        case "ArrowDown":
+          this.currentIndex = this.getLastIndex();
+          break;
+      }
+    }
+  }
+  handleSingleFieldClick(event) {
+    this.focus();
+    if (event.currentTarget instanceof HTMLElement) {
+      const clickedIndex = Number(event.currentTarget.dataset.fieldIndex);
+      this.currentIndex = clickedIndex < this.value.length ? clickedIndex : this.getLastIndex();
+    }
+  }
+  getLastIndex() {
+    return this.value.length > 0 ? Math.min(this.value.length, this.length - 1) : 0;
+  }
+  getDescriptionIds() {
+    const ids = [...this.error ? ["error-text"] : [], "help-text"];
+    return ids.join(" ");
+  }
+  handleCurrentIndexChange() {
+    if (this.currentIndex === -1) {
+      this.input.setSelectionRange(0, this.input.value.length);
+    } else {
+      this.input.setSelectionRange(this.currentIndex, this.currentIndex + 1);
+    }
+  }
+  handleDisabledChange() {
+    this.formControlController.setValidity(this.disabled);
+  }
+  async handleValueChange() {
+    await this.updateComplete;
+    this.formControlController.updateValidity();
+  }
+  handlePatterChange() {
+    this.patternRegexp = new RegExp(this.pattern);
+  }
+  /** Removes focus from the input. */
+  blur() {
+    this.input.blur();
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    return this.input.checkValidity();
+  }
+  /** Sets focus on the input. */
+  focus(options) {
+    this.input.focus(options);
+  }
+  /** Gets the associated form, if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    return this.input.reportValidity();
+  }
+  /** Selects all the text in the input. */
+  select() {
+    if (this.input instanceof HTMLInputElement) {
+      this.input.select();
+    }
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message) {
+    this.input.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+  async getUpdateComplete() {
+    const result = await super.getUpdateComplete();
+    return result;
+  }
+  renderSingleField(index) {
+    const charValue = this.value.split("")[index];
+    const isCurrentField = this.currentIndex === index || this.currentIndex === -1 && charValue;
+    const inputClasses = classMap({
+      "single-field": true,
+      "single-field--active": this.hasFocus && isCurrentField
+    });
+    return html`
+      <div
+        class=${inputClasses}
+        data-field-index=${index}
+        aria-hidden="true"
+        @click=${this.handleSingleFieldClick}
+      >
+        ${charValue || this.hasFocus && isCurrentField ? html`<span class="single-field__value">${charValue}</span>` : html`
+              <span class="single-field__placeholder"
+                >${this.placeholder.charAt(0)}</span
+              >
+            `}
+        ${this.hasFocus && isCurrentField && !charValue ? html` <div class="fake-caret"></div> ` : ""}
+      </div>
+    `;
+  }
+  renderInput() {
+    const hasLabelSlot = this.hasSlotController.test("label");
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    return html`
+      <div part="base" class="input__wrapper">
+        <div
+          class=${classMap({
+      "visible-input": true,
+      "input--focused": this.hasFocus,
+      // Sizes
+      "input--small": this.size === "small",
+      "input--medium": this.size === "medium",
+      "input--large": this.size === "large",
+      // States
+      "input--error": this.error,
+      "input--on-layer": this.variant === "layer",
+      "input--on-base": this.variant === "base",
+      "input--disabled": this.disabled
+    })}
+        >
+          ${Array.from(Array(this.length)).map(
+      (_, index) => this.renderSingleField(index)
+    )}
+        </div>
+        <input
+          part="input"
+          id="input"
+          class="hidden-input"
+          type="text"
+          name=${ifDefinedAndNotEmpty(this.name)}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          minlength=${this.length}
+          maxlength=${this.length}
+          .value=${live(this.value)}
+          autocomplete="one-time-code"
+          ?autofocus=${this.autofocus}
+          pattern=${ifDefined(this.pattern)}
+          enterkeyhint=${ifDefined(this.enterkeyhint)}
+          inputmode=${ifDefined(this.inputmode)}
+          aria-label=${ifDefinedAndNotEmpty(hasLabel ? void 0 : this.title)}
+          aria-describedby=${this.getDescriptionIds()}
+          aria-invalid=${ifDefined(this.error ? "true" : void 0)}
+          @change=${this.handleChange}
+          @input=${this.handleInput}
+          @invalid=${this.handleInvalid}
+          @keydown=${this.handleKeyDown}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+          @select=${this.handleSelect}
+        />
+      </div>
+    `;
+  }
+};
+DSAInputOTP.styles = input_otp_styles_default;
+__decorateClass([
+  query("input")
+], DSAInputOTP.prototype, "input", 2);
+__decorateClass([
+  state()
+], DSAInputOTP.prototype, "hasFocus", 2);
+__decorateClass([
+  state()
+], DSAInputOTP.prototype, "currentIndex", 2);
+__decorateClass([
+  state()
+], DSAInputOTP.prototype, "patternRegexp", 2);
+__decorateClass([
+  property()
+], DSAInputOTP.prototype, "value", 2);
+__decorateClass([
+  defaultValue()
+], DSAInputOTP.prototype, "defaultValue", 2);
+__decorateClass([
+  property()
+], DSAInputOTP.prototype, "pattern", 2);
+__decorateClass([
+  property({ type: Number })
+], DSAInputOTP.prototype, "length", 2);
+__decorateClass([
+  property()
+], DSAInputOTP.prototype, "autocapitalize", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSAInputOTP.prototype, "autofocus", 2);
+__decorateClass([
+  property()
+], DSAInputOTP.prototype, "enterkeyhint", 2);
+__decorateClass([
+  property()
+], DSAInputOTP.prototype, "inputmode", 2);
+__decorateClass([
+  watch("currentIndex", { waitUntilFirstUpdate: true })
+], DSAInputOTP.prototype, "handleCurrentIndexChange", 1);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], DSAInputOTP.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("value", { waitUntilFirstUpdate: true })
+], DSAInputOTP.prototype, "handleValueChange", 1);
+__decorateClass([
+  watch("pattern")
+], DSAInputOTP.prototype, "handlePatterChange", 1);
+DSAInputOTP = __decorateClass([
+  customElement("dsa-input-otp")
+], DSAInputOTP);
+
+export {
+  DSAInputOTP
+};

package/dist/chunks/{chunk.YXXLXJPE.js → chunk.UEWG3G4R.js}

@@ -15,6 +15,12 @@ var DSACheckboxButton = class extends FormToggleButton {
     super(...arguments);
     this.type = "checkbox";
   }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "listitem");
+    }
+  }
   handleClick() {
     this.checked = !this.checked;
   }

package/dist/chunks/{chunk.K6FDIYMY.js → chunk.UVN7RIEO.js}

@@ -24,7 +24,6 @@ var DSARangeSlider = class extends ShoelaceElement {
     super(...arguments);
     this.hasFromSliderFocus = false;
     this.hasToSliderFocus = false;
-    this.title = "";
     this.labelFrom = "";
     this.labelTo = "";
     this.fromValue = "";
@@ -183,9 +182,6 @@ __decorateClass([
 __decorateClass([
   state()
 ], DSARangeSlider.prototype, "hasToSliderFocus", 2);
-__decorateClass([
-  property()
-], DSARangeSlider.prototype, "title", 2);
 __decorateClass([
   property({ attribute: "label-from" })
 ], DSARangeSlider.prototype, "labelFrom", 2);

package/dist/chunks/{chunk.WWANVBI5.js → chunk.UWGAOHHQ.js}

@@ -8,7 +8,7 @@ import {
 } from "./chunk.7OLEA3GQ.js";
 import {
   FormControlLayout
-} from "./chunk.T4BUHP4L.js";
+} from "./chunk.I5HR7JYK.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";

package/dist/chunks/{chunk.6RJLT24F.js → chunk.VBW5RZBM.js}

@@ -81,7 +81,7 @@ var DSATab = class extends ShoelaceElement {
                 part="close-button"
                 exportparts="base:close-button__base"
                 name="close"
-                label=${this.localize.term("close")}
+                label=${this.closeButtonLabel && this.closeButtonLabel !== "" ? this.closeButtonLabel : this.localize.term("close")}
                 class="tab__close-button"
                 @click=${this.handleCloseClick}
                 library="system"
@@ -110,6 +110,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], DSATab.prototype, "closable", 2);
+__decorateClass([
+  property({ attribute: "close-button-label" })
+], DSATab.prototype, "closeButtonLabel", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DSATab.prototype, "disabled", 2);

package/dist/chunks/{chunk.LWFWCZIX.js → chunk.WQYBYKZ2.js}

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