@ds-autonomie/web-components 2.0.1 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @ds-autonomie/web-components
 
+## 2.2.0
+
+### Minor Changes
+
+- 647d6c9: `input-otp` : ajout de l'élément One Time Password
+
+### Patch Changes
+
+- 3ba5fee: `checkbox-group` : correction de la largeur maximale en mode horizontal
+- 1643cca: `checkbox-group': changement du timing de l'initialisation
+- 8503289: `input` : correction de la réinitialisation programmatique du type "date"
+- aad602d: `checkbox-group` : amélioration de la structure interne
+
+## 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.ZDLDKWEM.js → chunk.2APAO2OW.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.LCUVJAUT.js";
 import {
   FormControlLayout
-} from "./chunk.PMMQ5QVY.js";
+} from "./chunk.XQAKSW3W.js";
 import {
   getDateFromISO,
   getISOFormattedDate

package/cdn/chunks/{chunk.QPY2AEFG.js → chunk.2DJERWBI.js}

@@ -1,25 +1,24 @@
 import {
   DSASelect
-} from "./chunk.R6BGXKHX.js";
+} from "./chunk.LNBAAP45.js";
+import {
+  getPhoneConfig
+} from "./chunk.65HTBW2L.js";
 import {
   input_phone_styles_default
-} from "./chunk.KQ5BQRHA.js";
+} from "./chunk.77CWRZEL.js";
 import {
-  frenchFlagOption,
   frenchNumberPrefix,
   phonePrefixOptions
-} from "./chunk.CCL2RZON.js";
+} from "./chunk.RJXLIOW7.js";
 import {
   maskedValueToRawValue,
   rawValueToMaskedValue,
   stripSpecialChars
 } from "./chunk.7OLEA3GQ.js";
-import {
-  getPhoneConfig
-} from "./chunk.65HTBW2L.js";
 import {
   FormControlLayout
-} from "./chunk.PMMQ5QVY.js";
+} from "./chunk.XQAKSW3W.js";
 import {
   l
 } from "./chunk.7PPSHHT2.js";
@@ -323,10 +322,15 @@ var DSAInputPhone = class extends FormControlLayout {
           display-value
           no-sync-width
         >
-          ${phonePrefixOptions.map((option, index) => {
+          ${phonePrefixOptions.map((option) => {
       return x`
               <dsa-option value=${option.value} .size=${this.size}>
-                ${frenchFlagOption(`option_${index}`)}
+                <dsa-icon
+                  slot="prefix"
+                  name="french_flag"
+                  library="system"
+                  class="input-phone__flag"
+                ></dsa-icon>
                 ${this.localize.term(option.label)} (${option.value})
               </dsa-option>
             `;

package/cdn/chunks/{chunk.QCSRN6TI.js → chunk.3JMBGIZN.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.QVX3F6W3.js";
 import {
   FormControlLayout
-} from "./chunk.PMMQ5QVY.js";
+} from "./chunk.XQAKSW3W.js";
 import {
   l
 } from "./chunk.7PPSHHT2.js";

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.2SEDRBTZ.js → chunk.4NC4QO64.js}

@@ -89,7 +89,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"
@@ -118,6 +118,9 @@ __decorateClass([
 __decorateClass([
   n({ type: Boolean })
 ], DSATab.prototype, "closable", 2);
+__decorateClass([
+  n({ attribute: "close-button-label" })
+], DSATab.prototype, "closeButtonLabel", 2);
 __decorateClass([
   n({ type: Boolean, reflect: true })
 ], DSATab.prototype, "disabled", 2);

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.OZEY33RC.js → chunk.5LXQ3RKQ.js}

@@ -17,22 +17,6 @@ var checkbox_group_styles_default = i`
     display: block;
   }
 
-  .visually-hidden {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
-
-  .checkbox-group__default-slot {
-    display: none;
-  }
-
   .checkbox-group__list-container {
     display: inline-block;
   }
@@ -40,18 +24,14 @@ var checkbox_group_styles_default = i`
     gap: var(--dsa-spacing-8);
   }
 
-  :not(.form-control--options-horizontal)
+  .form-control:not(.form-control--options-horizontal)
     .checkbox-group__list--checkbox-buttons {
     flex-wrap: wrap;
     min-width: 120px;
     max-width: 400px;
   }
 
-  .checkbox-group__listitem {
-    display: contents;
-  }
-
-  :not(form-control--options-horizontal) dsa-checkbox-button {
+  .form-control:not(.form-control--options-horizontal) dsa-checkbox-button {
     max-width: 400px;
   }
 `;

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.SRCH73UW.js → chunk.6QTMZJGH.js}

@@ -1,12 +1,12 @@
 import {
   DSAOption
-} from "./chunk.ZC2YWJX5.js";
+} from "./chunk.5BF76EO7.js";
 import {
   filter_select_styles_default
 } from "./chunk.57V66KCM.js";
 import {
   DSAInput
-} from "./chunk.QCSRN6TI.js";
+} from "./chunk.3JMBGIZN.js";
 import {
   FilterBase
 } from "./chunk.SW4US4PJ.js";
@@ -82,6 +82,23 @@ var DSAFilterSelect = class extends FilterBase {
         this.filterTrigger.focus({ preventScroll: true });
       }
     }
+    if (!this.multiple && isOption && ["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
+      const currentIndex = this.displayedOptions.indexOf(this.currentOption);
+      let newIndex = Math.max(0, currentIndex);
+      if (!(currentIndex === 0 && event.key === "ArrowUp") && !(currentIndex === this.displayedOptions.length - 1 && event.key === "ArrowDown")) {
+        event.preventDefault();
+      }
+      if (event.key === "ArrowDown" && currentIndex < this.displayedOptions.length - 1) {
+        newIndex = currentIndex + 1;
+      } else if (event.key === "ArrowUp" && currentIndex > 0) {
+        newIndex = currentIndex - 1;
+      } else if (event.key === "Home") {
+        newIndex = 0;
+      } else if (event.key === "End") {
+        newIndex = this.displayedOptions.length - 1;
+      }
+      this.setCurrentOption(this.displayedOptions[newIndex]);
+    }
     if (isSearchInput) {
       event.stopPropagation();
     }
@@ -300,6 +317,9 @@ var DSAFilterSelect = class extends FilterBase {
       );
     }
   }
+  handleMultipleChange() {
+    this.handleDefaultSlotChange();
+  }
   /** Hides the listbox. */
   async hide() {
     await super.hide();
@@ -526,6 +546,9 @@ __decorateClass([
 __decorateClass([
   watch("seeAll")
 ], DSAFilterSelect.prototype, "handleSeeAllChange", 1);
+__decorateClass([
+  watch("multiple")
+], DSAFilterSelect.prototype, "handleMultipleChange", 1);
 DSAFilterSelect = __decorateClass([
   t("dsa-filter-select")
 ], DSAFilterSelect);

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.6E6G25TQ.js → chunk.A33BZOMA.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.3CJGMKTJ.js";
 import {
   FormControlLayout
-} from "./chunk.PMMQ5QVY.js";
+} from "./chunk.XQAKSW3W.js";
 import {
   l
 } from "./chunk.7PPSHHT2.js";

package/cdn/chunks/{chunk.GLQFV66F.js → chunk.ATHAYO6A.js}

@@ -1,9 +1,12 @@
+import {
+  radio_group_styles_default
+} from "./chunk.27YR5DC6.js";
 import {
   wrapIndex
 } from "./chunk.HV63L5BF.js";
 import {
-  radio_group_styles_default
-} from "./chunk.27YR5DC6.js";
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
 import {
   renderFormElementErrors
 } from "./chunk.EY4WUNAJ.js";
@@ -19,6 +22,9 @@ import {
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.B6GVVW66.js";
 import {
   e as e2
 } from "./chunk.IKHG7XGO.js";
@@ -29,6 +35,12 @@ import {
   r,
   t
 } from "./chunk.DZB6XUZ7.js";
+import {
+  component_styles_default
+} from "./chunk.PSQJDSB2.js";
+import {
+  i
+} from "./chunk.4KHZQZ3M.js";
 import {
   x
 } from "./chunk.7HUC6BF3.js";
@@ -36,6 +48,145 @@ import {
   __decorateClass
 } from "./chunk.4ZGVANML.js";
 
+// src/internal/components/button-group/button-group.styles.ts
+var button_group_styles_default = i`
+  ${component_styles_default}
+
+  :host {
+    display: inline-block;
+  }
+
+  .button-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--dsa-spacing-8);
+  }
+
+  .button-group--squeezed {
+    gap: 0;
+  }
+
+  .button-group--vertical {
+    flex-direction: column;
+    min-width: 120px;
+    max-width: 400px;
+  }
+
+  .button-group--horizontal {
+    flex-direction: row;
+  }
+`;
+
+// src/internal/components/button-group/button-group.ts
+var DSAInternalButtonGroup = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.disableRole = false;
+    this.label = "";
+    this.squeezed = false;
+    this.horizontal = false;
+  }
+  handleFocus(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.classList.add("dsa-button-group__button--focus");
+  }
+  handleBlur(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.classList.remove("dsa-button-group__button--focus");
+  }
+  handleMouseOver(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.classList.add("dsa-button-group__button--hover");
+  }
+  handleMouseOut(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.classList.remove("dsa-button-group__button--hover");
+  }
+  handleSlotChange() {
+    const slottedElements = [
+      ...this.defaultSlot.assignedElements({ flatten: true })
+    ];
+    slottedElements.forEach((el) => {
+      const index = slottedElements.indexOf(el);
+      const button = findButton(el);
+      if (button !== null) {
+        button.classList.add("dsa-button-group__button");
+        if (this.squeezed) {
+          button.classList.toggle(
+            "dsa-button-group__button--first",
+            index === 0
+          );
+          button.classList.toggle(
+            "dsa-button-group__button--inner",
+            index > 0 && index < slottedElements.length - 1
+          );
+          button.classList.toggle(
+            "dsa-button-group__button--last",
+            index === slottedElements.length - 1
+          );
+        }
+        button.classList.toggle(
+          "dsa-button-group__button--radio",
+          button.tagName.toLowerCase() === "dsa-radio-button"
+        );
+        button.classList.toggle(
+          "dsa-button-group__button--checkbox",
+          button.tagName.toLowerCase() === "dsa-checkbox-button"
+        );
+        button.classList.toggle(
+          "dsa-button-group__button--vertical",
+          !this.horizontal
+        );
+      }
+    });
+  }
+  render() {
+    return x`
+      <div
+        part="base"
+        class=${e2({
+      "button-group": true,
+      "button-group--squeezed": this.squeezed,
+      "button-group--vertical": !this.horizontal,
+      "button-group--horizontal": this.horizontal
+    })}
+        role="${this.disableRole ? "presentation" : "group"}"
+        aria-label=${ifDefinedAndNotEmpty(this.label)}
+        @focusout=${this.handleBlur}
+        @focusin=${this.handleFocus}
+        @mouseover=${this.handleMouseOver}
+        @mouseout=${this.handleMouseOut}
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+};
+DSAInternalButtonGroup.styles = button_group_styles_default;
+__decorateClass([
+  e("slot")
+], DSAInternalButtonGroup.prototype, "defaultSlot", 2);
+__decorateClass([
+  r()
+], DSAInternalButtonGroup.prototype, "disableRole", 2);
+__decorateClass([
+  n()
+], DSAInternalButtonGroup.prototype, "label", 2);
+__decorateClass([
+  n({ type: Boolean })
+], DSAInternalButtonGroup.prototype, "squeezed", 2);
+__decorateClass([
+  n({ type: Boolean })
+], DSAInternalButtonGroup.prototype, "horizontal", 2);
+DSAInternalButtonGroup = __decorateClass([
+  t("dsa-internal-button-group")
+], DSAInternalButtonGroup);
+function findButton(el) {
+  var _a;
+  const selector = "dsa-button, dsa-radio-button, dsa-checkbox-button, dsa-pagination-button";
+  return (_a = el.closest(selector)) != null ? _a : el.querySelector(selector);
+}
+
 // src/components/radio-group/radio-group.ts
 var DSARadioGroup = class extends ShoelaceElement {
   constructor() {
@@ -63,6 +214,7 @@ var DSARadioGroup = class extends ShoelaceElement {
     this.horizontal = false;
     this.error = false;
     this.errorMessage = "";
+    this.hideLabel = false;
   }
   /** Gets the validity state object */
   get validity() {
@@ -312,6 +464,11 @@ var DSARadioGroup = class extends ShoelaceElement {
     const hasHelpTextSlot = this.hasSlotController.test("help-text");
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+    if (!hasLabel) {
+      a11yWarning(
+        "<dsa-radio-group> requires a label attribute or a label slot for accessibility"
+      );
+    }
     return x`
       <fieldset
         part="form-control"
@@ -330,16 +487,21 @@ var DSARadioGroup = class extends ShoelaceElement {
         aria-describedby=${this.error ? "error-text help-text" : "help-text"}
         aria-invalid=${this.error}
       >
-        <span
-          part="form-control-label"
-          id="label"
-          class="form-control__label"
-          aria-hidden=${hasLabel ? "false" : "true"}
-          @click=${this.handleLabelClick}
-        >
-          ${this.required ? x`<span class="form-control__label-required">*</span>` : ""}
-          <slot name="label">${this.label}</slot>
-        </span>
+        ${this.hideLabel ? x`<dsa-visually-hidden id="label"
+              ><slot name="label">${this.label}</slot></dsa-visually-hidden
+            >` : x`
+              <span
+                part="form-control-label"
+                id="label"
+                class="form-control__label"
+                aria-hidden=${hasLabel ? "false" : "true"}
+                @click=${this.handleLabelClick}
+              >
+                ${this.required ? x`<span class="form-control__label-required">*</span>` : ""}
+                <slot name="label">${this.label}</slot>
+              </span>
+            `}
+
         <slot name="tooltip" class="form-control__tooltip"></slot>
 
         <div
@@ -462,6 +624,9 @@ __decorateClass([
     }
   })
 ], DSARadioGroup.prototype, "errorMessage", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "hide-label" })
+], DSARadioGroup.prototype, "hideLabel", 2);
 __decorateClass([
   watch("value")
 ], DSARadioGroup.prototype, "handleValueChange", 1);

package/cdn/chunks/{chunk.VIT6ZMSL.js → chunk.BCLU5KXE.js}

@@ -1,9 +1,9 @@
+import {
+  DSATableRow
+} from "./chunk.6CF6SXDF.js";
 import {
   table_header_row_styles_default
 } from "./chunk.JEWSMUZM.js";
-import {
-  DSATableRow
-} from "./chunk.GDKBZ2H6.js";
 import {
   t
 } from "./chunk.DZB6XUZ7.js";
@@ -31,8 +31,7 @@ var DSATableHeaderRow = class extends DSATableRow {
             class="checkbox"
             size="small"
             name=${this.selectionName}
-            title=${this.selectionLabel !== "" ? this.selectionLabel : this.localize.term("selectAllTableRows")}
-            aria-label=${this.selectionLabel !== "" ? this.selectionLabel : this.localize.term("selectAllTableRows")}
+            accessible-name=${this.selectionLabel !== "" ? this.selectionLabel : this.localize.term("selectAllTableRows")}
             value=${this.selectionValue}
             ?checked=${this.selected}
             @click=${(e) => e.stopPropagation()}