@ds-autonomie/web-components 1.16.1 → 1.16.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @ds-autonomie/web-components
 
+## 1.16.2
+
+### Patch Changes
+
+- 7172de3: `textarea` : application du style readonly
+- b1cd757: `select`, `combobox`, `filter-select` : améliorations a11y
+- c16da8c: `pagination` : possibilité de personnaliser le aria-label de l'élément `<nav>`
+- 97c7af4: `footer` : affichage du séparateur des mentions obligatoires seulement si les 2 slots ont du contenu
+- 7883203: `accordion`: changement de l'apparence au survol et focus
+- 16213d8: `alert` : restitution des alertes apparaissant suite à action utilisateur
+- 7b49078: `dialog` : prise en compte de l'attribut `no-header`
+
 ## 1.16.1
 
 ### Patch Changes

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

@@ -54,7 +54,7 @@ var combobox_styles_default = css`
       var(--dsa-wc-transition-fast) box-shadow,
       var(--dsa-wc-transition-fast) background-color;
     border-radius: var(--dsa-wc-input-border-radius);
-    padding: var(--dsa-wc-input-padding);
+    padding: var(--dsa-wc-select-padding);
   }
 
   .select__display-input {
@@ -71,6 +71,10 @@ var combobox_styles_default = css`
     -webkit-appearance: none;
   }
 
+  .select__display-input::placeholder {
+    color: var(--dsa-wc-input-on-base-text-field-placeholder-color);
+  }
+
   .select__display-input:focus {
     outline: none;
   }
@@ -107,8 +111,9 @@ var combobox_styles_default = css`
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    margin-inline-start: var(--dsa-wc-combobox-tag-margin-inline-start);
+    margin-inline-start: var(--dsa-wc-multiselect-tag-margin-inline-start);
     min-width: 0;
+    order: -1;
   }
 
   .select__tags dsa-tag {
@@ -117,21 +122,11 @@ var combobox_styles_default = css`
   }
 
   .select__tags dsa-tag::part(base) {
-    background: var(--dsa-wc-combobox-tag-background) !important;
-    color: var(--dsa-wc-combobox-tag-color) !important;
-    border: solid 1px var(--dsa-wc-combobox-tag-border-color);
-    border-radius: var(--dsa-wc-combobox-tag-border-radius);
-    padding: 0 var(--dsa-wc-combobox-tag-padding-inline);
-  }
-
-  .select--error .select__tags dsa-tag::part(base) {
-    background: var(--dsa-wc-combobox-tag-error-background) !important;
-    color: var(--dsa-wc-combobox-tag-error-color) !important;
-    border: solid 1px var(--dsa-wc-combobox-tag-error-border-color);
-  }
-
-  .select--error .select__tags dsa-tag::part(remove-button) {
-    color: var(--dsa-wc-combobox-tag-error-color) !important;
+    background: var(--dsa-wc-multiselect-tag-background) !important;
+    color: var(--dsa-wc-multiselect-tag-color) !important;
+    border: solid 1px var(--dsa-wc-multiselect-tag-border-color);
+    border-radius: var(--dsa-wc-multiselect-tag-border-radius);
+    padding: 0 var(--dsa-wc-multiselect-tag-padding-inline);
   }
 
   .select--disabled .select__tags,
@@ -260,6 +255,7 @@ var combobox_styles_default = css`
   /* Sizes */
   .select--small .select__combobox {
     font: var(--dsa-wc-combobox-input-font-small);
+    min-height: var(--dsa-wc-form-input-height-small);
   }
 
   .select--small.select--multiple:not(.select--placeholder-visible)
@@ -274,6 +270,7 @@ var combobox_styles_default = css`
 
   .select--medium .select__combobox {
     font: var(--dsa-wc-combobox-input-font);
+    min-height: var(--dsa-wc-form-input-height);
   }
 
   .select--medium.select--multiple:not(.select--placeholder-visible)
@@ -286,7 +283,9 @@ var combobox_styles_default = css`
     gap: 3px;
   }
   .select--large .select__combobox {
+    padding-block: 3px;
     font: var(--dsa-wc-combobox-input-font-large);
+    min-height: var(--dsa-wc-form-input-height-large);
   }
   .select--large.select--multiple:not(.select--placeholder-visible)
     .select__combobox {

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

@@ -37,9 +37,7 @@ var input_phone_styles_default = css`
     height: auto;
   }
 
-  .input-phone--focused:not(.input-phone--disabled):not(
-      .input-phone--readonly
-    ) {
+  .input-phone--focused:not(.input-phone--disabled) {
     outline: var(--dsa-wc-focus-ring);
     outline-offset: var(--dsa-wc-focus-ring-offset);
   }

package/dist/chunks/{chunk.IJAP6FX7.js → chunk.4DRKFRDB.js}

@@ -43,7 +43,7 @@ var input_mask_styles_default = css`
     color: transparent;
   }
 
-  .input-mask--focused:not(.input-mask--disabled):not(.input-mask--readonly) {
+  .input-mask--focused:not(.input-mask--disabled) {
     outline: var(--dsa-wc-focus-ring);
     outline-offset: var(--dsa-wc-focus-ring-offset);
   }

package/dist/chunks/{chunk.QE5KX6GC.js → chunk.6TASDLIO.js}

@@ -35,10 +35,11 @@ var textarea_styles_default = css`
       var(--dsa-wc-input-on-layer-border-color);
   }
 
-  .textarea--on-layer:hover:not(.textarea--disabled) {
+  .textarea--on-layer:hover:not(.textarea--disabled):not(.textarea--readonly) {
     border-color: var(--dsa-wc-input-on-layer-border-color-hover);
   }
-  .textarea--on-layer:not(.textarea--disabled) .textarea__control {
+  .textarea--on-layer:not(.textarea--disabled):not(.textarea--readonly)
+    .textarea__control {
     color: var(--dsa-wc-input-on-layer-text-field-input-color);
   }
   .textarea--on-layer .textarea__control::placeholder {
@@ -67,7 +68,9 @@ var textarea_styles_default = css`
     background-color: var(--dsa-wc-input-on-layer-background-color-error);
   }
 
-  .textarea--on-layer.textarea--error:hover:not(.textarea--disabled) {
+  .textarea--on-layer.textarea--error:hover:not(.textarea--disabled):not(
+      .textarea--readonly
+    ) {
     border-color: var(--dsa-wc-input-on-layer-border-color-error-hover);
   }
   /* On Base textareas */
@@ -78,7 +81,7 @@ var textarea_styles_default = css`
     color: var(--dsa-wc-input-on-base-text-field-input-color);
   }
 
-  .textarea--on-base:hover:not(.textarea--disabled) {
+  .textarea--on-base:hover:not(.textarea--disabled):not(.textarea--readonly) {
     border-color: var(--dsa-wc-input-on-base-border-color-hover);
   }
 
@@ -88,7 +91,13 @@ var textarea_styles_default = css`
     cursor: not-allowed;
   }
 
-  .textarea--on-base:not(.textarea--disabled) .textarea__control {
+  .textarea--on-base.textarea--readonly {
+    background-color: var(--dsa-wc-input-on-base-read-only-background-color);
+    border-color: var(--dsa-wc-input-on-base-read-only-border-color);
+  }
+
+  .textarea--on-base:not(.textarea--disabled):not(.textarea--readonly)
+    .textarea__control {
     color: var(--dsa-wc-input-on-base-text-field-input-color);
   }
   .textarea--on-base .textarea__control::placeholder {
@@ -101,7 +110,9 @@ var textarea_styles_default = css`
     background-color: var(--dsa-wc-input-on-base-background-color-error);
   }
 
-  .textarea--on-base.textarea--error:hover:not(.textarea--disabled) {
+  .textarea--on-base.textarea--error:hover:not(.textarea--disabled):not(
+      .textarea--readonly
+    ) {
     border-color: var(--dsa-wc-input-on-base-border-color-error-hover);
   }
 

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

@@ -1,6 +1,6 @@
 import {
   accordion_styles_default
-} from "./chunk.FYTGBKGY.js";
+} from "./chunk.VDOVUA55.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";

package/dist/chunks/{chunk.TJHLVV2Q.js → chunk.AMIXGL74.js}

@@ -1,6 +1,6 @@
 import {
   combobox_styles_default
-} from "./chunk.AWHBPZCA.js";
+} from "./chunk.2UZSRWJ7.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";
@@ -388,6 +388,11 @@ var DSACombobox = class extends ShoelaceElement {
     }
   }
   handleEnterKey(event) {
+    const target = event.target;
+    const isTag = target.closest("dsa-tag") !== null;
+    if (isTag) {
+      return;
+    }
     event.preventDefault();
     event.stopImmediatePropagation();
     if (this.open && this.currentOption !== void 0 && !this.currentOption.disabled) {
@@ -641,6 +646,41 @@ var DSACombobox = class extends ShoelaceElement {
       "input-container": true
     })}
               >
+                <input
+                  id="input"
+                  part="display-input"
+                  class="select__display-input"
+                  type="text"
+                  .value=${this.displayLabel}
+                  placeholder=${ifDefinedAndNotEmpty(this.placeholder)}
+                  .disabled=${this.disabled}
+                  size=${selectInputWidth}
+                  autocomplete="off"
+                  spellcheck="false"
+                  autocapitalize="off"
+                  title=${ifDefinedAndNotEmpty(this.title)}
+                  aria-controls="listbox"
+                  aria-autocomplete="list"
+                  aria-expanded=${this.open ? "true" : "false"}
+                  aria-haspopup="listbox"
+                  aria-labelledby=${ifDefinedAndNotEmpty(
+      hasLabel ? "label" : void 0
+    )}
+                  aria-label=${ifDefinedAndNotEmpty(
+      hasLabel ? void 0 : this.title
+    )}
+                  aria-disabled=${this.disabled ? "true" : "false"}
+                  aria-describedby=${this.error ? "error-text help-text" : "help-text"}
+                  aria-activedescendant=${(_b = (_a = this.currentOption) == null ? void 0 : _a.id) != null ? _b : ""}
+                  role="combobox"
+                  tabindex="0"
+                  @change=${this.handleChange}
+                  @input=${this.handleInput}
+                  @focus=${this.handleFocus}
+                  @blur=${this.handleBlur}
+                  @invalid=${this.handleInvalid}
+                />
+
                 ${this.multiple && this.value.length > 0 ? html`
                       <div part="tags" class="select__tags">
                         ${this.selectedOptions.map((option, index) => {
@@ -656,7 +696,6 @@ var DSACombobox = class extends ShoelaceElement {
                               "
                                 size=${this.size}
                                 removable
-                                disable-removable-focus
                                 @dsa-remove=${(event) => this.handleTagRemove(event, option)}
                                 label=${option.getTextLabel()}
                               >
@@ -665,7 +704,6 @@ var DSACombobox = class extends ShoelaceElement {
       } else if (index === this.maxOptionsVisible) {
         return html`
                               <dsa-tag
-                                disable-removable-focus
                                 size=${this.size}
                                 label="+${this.selectedOptions.length - index}"
                               >
@@ -677,41 +715,6 @@ var DSACombobox = class extends ShoelaceElement {
     })}
                       </div>
                     ` : ""}
-
-                <input
-                  id="input"
-                  part="display-input"
-                  class="select__display-input"
-                  type="text"
-                  .value=${this.displayLabel}
-                  placeholder=${ifDefinedAndNotEmpty(this.placeholder)}
-                  .disabled=${this.disabled}
-                  size=${selectInputWidth}
-                  autocomplete="off"
-                  spellcheck="false"
-                  autocapitalize="off"
-                  title=${ifDefinedAndNotEmpty(this.title)}
-                  aria-controls="listbox"
-                  aria-autocomplete="list"
-                  aria-expanded=${this.open ? "true" : "false"}
-                  aria-haspopup="listbox"
-                  aria-labelledby=${ifDefinedAndNotEmpty(
-      hasLabel ? "label" : void 0
-    )}
-                  aria-label=${ifDefinedAndNotEmpty(
-      hasLabel ? void 0 : this.title
-    )}
-                  aria-disabled=${this.disabled ? "true" : "false"}
-                  aria-describedby="help-text"
-                  aria-activedescendant=${(_b = (_a = this.currentOption) == null ? void 0 : _a.id) != null ? _b : ""}
-                  role="combobox"
-                  tabindex="0"
-                  @change=${this.handleChange}
-                  @input=${this.handleInput}
-                  @focus=${this.handleFocus}
-                  @blur=${this.handleBlur}
-                  @invalid=${this.handleInvalid}
-                />
               </div>
 
               <input
@@ -796,6 +799,7 @@ var DSACombobox = class extends ShoelaceElement {
         </slot>
 
         ${this.error && !this.disabled ? html`<dsa-error-text
+              id="error-text"
               part="form-control-error-text"
               class="form-control__error-text"
               >${this.errorMessage}</dsa-error-text

package/dist/chunks/{chunk.YCOCNU2O.js → chunk.BAU3732X.js}

@@ -136,8 +136,10 @@ var DSAOption = class extends ShoelaceElement {
           class="option__label"
           @slotchange=${this.handleDefaultSlotChange}
         ></slot>
-        <dsa-visually-hidden>:</dsa-visually-hidden>
-        <span class="option__amount">${this.amount}</span>
+        ${this.amount ? html`
+              <dsa-visually-hidden>:</dsa-visually-hidden>
+              <span class="option__amount">${this.amount}</span>
+            ` : ""}
         <slot part="suffix" name="suffix" class="option__suffix"></slot>
       </div>
     `;

package/dist/chunks/{chunk.M6LJDR7Y.js → chunk.CKBRIIGV.js}

@@ -233,24 +233,26 @@ var DSADialog = class extends ShoelaceElement {
           aria-labelledby=${ifDefined(!this.noHeader ? "title" : void 0)}
           tabindex="0"
         >
-          <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>
-            <div part="header-actions" class="dialog__header-actions">
-              <slot name="header-actions"></slot>
-              <dsa-icon-button
-                part="close-button"
-                exportparts="base:close-button__base"
-                class="dialog__close"
-                name="close"
-                label=${this.localize.term("close")}
-                @click="${() => this.requestClose("close-button")}"
-              ></dsa-icon-button>
-            </div>
-          </header>
+          ${!this.noHeader ? html`
+                <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>
+                  <div part="header-actions" class="dialog__header-actions">
+                    <slot name="header-actions"></slot>
+                    <dsa-icon-button
+                      part="close-button"
+                      exportparts="base:close-button__base"
+                      class="dialog__close"
+                      name="close"
+                      label=${this.localize.term("close")}
+                      @click="${() => this.requestClose("close-button")}"
+                    ></dsa-icon-button>
+                  </div>
+                </header>
+              ` : ""}
           <div class="dialog__body-container" tabindex="0">
             <slot part="body" class="dialog__body"></slot>
           </div>

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

@@ -1,6 +1,6 @@
 import {
   DSASelect
-} from "./chunk.U5EXTR5D.js";
+} from "./chunk.PNTPO2DN.js";
 import {
   frenchFlagOption,
   frenchFlagSelect,
@@ -17,7 +17,7 @@ import {
 } from "./chunk.65HTBW2L.js";
 import {
   input_phone_styles_default
-} from "./chunk.MYXTAE6O.js";
+} from "./chunk.43EIYNTL.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";

package/dist/chunks/{chunk.VFWCJMJG.js → chunk.IDAQJSVV.js}

@@ -36,6 +36,7 @@ var DSAAlert = class extends ShoelaceElement {
   constructor() {
     super(...arguments);
     this.localize = new LocalizeController(this);
+    this.title = "";
     this.open = false;
     this.closable = false;
     this.variant = "primary";
@@ -147,9 +148,10 @@ var DSAAlert = class extends ShoelaceElement {
   }
   render() {
     return html`
-      <div
-        part="base"
-        class=${classMap({
+      <div role="alert">
+        <div
+          part="base"
+          class=${classMap({
       alert: true,
       "alert--open": this.open,
       "alert--closable": this.closable,
@@ -159,31 +161,31 @@ var DSAAlert = class extends ShoelaceElement {
       "alert--warning": this.variant === "warning",
       "alert--danger": this.variant === "danger"
     })}
-        role="alert"
-        aria-hidden=${this.open ? "false" : "true"}
-        @mousemove=${this.handleMouseMove}
-      >
-        <dsa-icon
-          class="alert__icon"
-          name=${this.getPrefixIconName()}
-        ></dsa-icon>
-        <div class="alert__text">
-          <div class="alert__title">${this.title}</div>
-          <slot part="message" class="alert__message" aria-live="polite"></slot>
-        </div>
+          aria-hidden=${this.open ? "false" : "true"}
+          @mousemove=${this.handleMouseMove}
+        >
+          <dsa-icon
+            class="alert__icon"
+            name=${this.getPrefixIconName()}
+          ></dsa-icon>
+          <div class="alert__text">
+            <div class="alert__title">${this.title}</div>
+            <slot part="message" class="alert__message"></slot>
+          </div>
 
-        <slot part="actions" class="alert__action" name="action"></slot>
+          <slot part="actions" class="alert__action" name="action"></slot>
 
-        ${this.closable ? html`
-              <dsa-icon-button
-                part="close-button"
-                class="alert__close-button"
-                size="xlarge"
-                name="close"
-                label=${this.localize.term("close")}
-                @click=${this.handleCloseClick}
-              ></dsa-icon-button>
-            ` : ""}
+          ${this.closable ? html`
+                <dsa-icon-button
+                  part="close-button"
+                  class="alert__close-button"
+                  size="xlarge"
+                  name="close"
+                  label=${this.localize.term("close")}
+                  @click=${this.handleCloseClick}
+                ></dsa-icon-button>
+              ` : ""}
+        </div>
       </div>
     `;
   }
@@ -192,6 +194,9 @@ DSAAlert.styles = alert_styles_default;
 __decorateClass([
   query('[part~="base"]')
 ], DSAAlert.prototype, "base", 2);
+__decorateClass([
+  property()
+], DSAAlert.prototype, "title", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DSAAlert.prototype, "open", 2);

package/dist/chunks/{chunk.ZVIBE4XH.js → chunk.MJ3ZLDHO.js}

@@ -1,6 +1,9 @@
 import {
   footer_mandatory_mentions_styles_default
 } from "./chunk.G4ODEI4O.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";
@@ -12,11 +15,19 @@ import {
 import { html } from "lit";
 import { customElement } from "lit/decorators.js";
 var DSAFooterMandatoryMentions = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "text-left",
+      "text-right"
+    );
+  }
   render() {
     return html`
       <div part="base">
         <slot part="text-left" name="text-left"></slot>
-        <dsa-divider part="divider" vertical></dsa-divider>
+        ${this.hasSlotController.test("text-left") && this.hasSlotController.test("text-right") ? html`<dsa-divider part="divider" vertical></dsa-divider>` : ""}
         <slot part="text-right" name="text-right"></slot>
       </div>
     `;

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

@@ -3,7 +3,7 @@ import {
 } from "./chunk.YOLAIUYX.js";
 import {
   DSAOption
-} from "./chunk.YCOCNU2O.js";
+} from "./chunk.BAU3732X.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";

package/dist/chunks/{chunk.U5EXTR5D.js → chunk.PNTPO2DN.js}

@@ -1,6 +1,6 @@
 import {
   select_styles_default
-} from "./chunk.ULHEP5Y6.js";
+} from "./chunk.ZWVWEQGL.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";
@@ -125,8 +125,8 @@ var DSASelect = class extends ShoelaceElement {
   handleKeyDown(event) {
     const target = event.target;
     const isClearButton = target.closest(".select__clear") !== null;
-    const isIconButton = target.closest("dsa-icon-button") !== null;
-    if (isClearButton || isIconButton) {
+    const isTag = target.closest("dsa-tag") !== null;
+    if (isClearButton || isTag) {
       return;
     }
     if (this.open && (event.key === "Tab" || event.key === "Escape")) {
@@ -554,7 +554,7 @@ var DSASelect = class extends ShoelaceElement {
                 class="select__display-input"
                 type="text"
                 placeholder=${this.placeholder}
-                .disabled=${isDisabledOrReadonly}
+                .disabled=${this.disabled}
                 .value=${this.displayValue ? this.value : this.displayLabel}
                 size=${ifDefined(selectInputWidth)}
                 autocomplete="off"
@@ -572,7 +572,7 @@ var DSASelect = class extends ShoelaceElement {
       hasLabel ? void 0 : this.title
     )}
                 aria-disabled=${isDisabledOrReadonly ? "true" : "false"}
-                aria-describedby="help-text"
+                aria-describedby=${this.error ? "error-text help-text" : "help-text"}
                 role="combobox"
                 tabindex="0"
                 @focus=${this.handleFocus}
@@ -594,7 +594,6 @@ var DSASelect = class extends ShoelaceElement {
                               "
                               size=${this.size}
                               removable
-                              disable-removable-focus
                               @dsa-remove=${(event) => this.handleTagRemove(event, option)}
                               label=${option.getTextLabel()}
                             >
@@ -603,7 +602,6 @@ var DSASelect = class extends ShoelaceElement {
       } else if (index === this.maxOptionsVisible) {
         return html`
                             <dsa-tag
-                              disable-removable-focus
                               size=${this.size}
                               label="+${this.selectedOptions.length - index}"
                             >
@@ -672,6 +670,7 @@ var DSASelect = class extends ShoelaceElement {
         </slot>
 
         ${this.error && !isDisabledOrReadonly ? html`<dsa-error-text
+              id="error-text"
               part="form-control-error-text"
               class="form-control__error-text"
               >${this.errorMessage}</dsa-error-text

package/dist/chunks/{chunk.6GBDSLDV.js → chunk.QDXCYEAZ.js}

@@ -1,6 +1,6 @@
 import {
   input_mask_styles_default
-} from "./chunk.IJAP6FX7.js";
+} from "./chunk.4DRKFRDB.js";
 import {
   maskedValueToRawValue,
   rawValueToMaskedValue,

package/dist/chunks/{chunk.JUG6IFUT.js → chunk.TRKYAEYS.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk.KBT2EKLF.js";
 import {
   input_styles_default
-} from "./chunk.APYW2WVZ.js";
+} from "./chunk.VC3XT47N.js";
 import {
   getDateFromISO,
   getISOFormattedDate

package/dist/chunks/{chunk.APYW2WVZ.js → chunk.VC3XT47N.js}

@@ -46,7 +46,7 @@ var input_styles_default = css`
     visibility: hidden !important;
   }
 
-  .input--focused:not(.input--disabled):not(.input--readonly) {
+  .input--focused:not(.input--disabled) {
     outline: var(--dsa-wc-focus-ring);
     outline-offset: var(--dsa-wc-focus-ring-offset);
   }

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

@@ -37,19 +37,17 @@ var accordion_styles_default = css`
     cursor: pointer;
   }
 
-  .accordion:focus-within {
-    outline: var(--dsa-wc-focus-ring);
-  }
-  .accordion:hover:not(.accordion--disabled) {
+  .accordion:not(.accordion--disabled):has(.accordion__header:hover) {
     border-color: var(--dsa-wc-accordion-hover-border-color);
   }
 
-  .accordion:hover:not(.accordion--disabled) .accordion__header-button {
+  .accordion:not(.accordion--disabled) .accordion__header-button:hover {
     background-color: var(--dsa-wc-accordion-header-hover-background-color);
   }
 
-  .accordion__header-button:not(accordion--open):focus-visible {
-    outline: none;
+  .accordion__header-button:focus-visible {
+    outline: var(--dsa-wc-focus-ring);
+    background-color: var(--dsa-wc-accordion-header-hover-background-color);
   }
 
   .accordion--disabled .accordion__header-button {

package/dist/chunks/{chunk.UAC34KI2.js → chunk.VLSSVYAB.js}

@@ -1,6 +1,6 @@
 import {
   textarea_styles_default
-} from "./chunk.QE5KX6GC.js";
+} from "./chunk.6TASDLIO.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";
@@ -243,6 +243,7 @@ var DSATextarea = class extends ShoelaceElement {
       "textarea--on-layer": this.variant === "layer",
       "textarea--error": this.error,
       "textarea--disabled": this.disabled,
+      "textarea--readonly": this.readonly,
       "textarea--focused": this.hasFocus,
       "textarea--empty": !this.value,
       "textarea--resize-none": this.resize === "none",