dap-design-system 0.56.7 → 0.57.0

package/dist/components/file-input/file-input.component.d.ts

@@ -155,7 +155,10 @@ export default class DapDSFileInput extends GenericFormElement {
     /**
      * When false, the dropzone is not tab-focusable (tabindex -1), uses role="group"
      * instead of role="button", and Enter/Space no longer opens the file dialog from
-     * the dropzone. Click and drag-and-drop still work.
+     * the dropzone. Click and drag-and-drop still work. When the browse button is
+     * also hidden, slot a focusable control into dropzone-content to keep a keyboard
+     * path to the file dialog — the hidden native input is out of the tab order
+     * whenever a dropzone is rendered.
      */
     dropzoneFocusable: string;
     /** Size of the thumbnail preview in the built-in file list */

package/dist/components/navigation-menu/navigation-menu-item.component.d.ts

@@ -187,8 +187,13 @@ export default class DapDSNavigationMenuItem extends DapDSNavigationMenuItem_bas
      * All others are removed (tabindex="-1") so Tab exits the whole nav in one step.
      */
     setRovingTabIndex(active: boolean): void;
-    /** Apply tabindex to a trigger element and its shadow-root inner focusable element. */
+    /** Apply tabindex to a trigger element and its inner focusable element. */
     private _applyTriggerTabIndex;
+    /**
+     * Returns the inner light-DOM focusable element of a non-focusable wrapper
+     * trigger, or null when the trigger itself should be the tab stop.
+     */
+    private _getInnerLightDomFocusable;
     /** Focus the first focusable element in the dropdown (supports both nested nav items and mega menu content). */
     focusFirstDropdownChild(): void;
     /** Focus the last focusable element in the dropdown (supports both nested nav items and mega menu content). */

package/dist/{components-D_2wgf__.js → components-B1eoYWYt.js}

@@ -12807,7 +12807,8 @@ let Y = class extends pe {
         this.handleFileList(e != null ? e : null), this.setValidity(), this.emit("dds-files-accepted", { files: this._files });
   }
   render() {
-    var t, e;
+    var i, o;
+    const t = this.showBrowseButton === "true" && !this.autoupload, e = t || !this.showDropzone;
     return $`
       <div class="label-container">
         ${this.label && $`<dap-ds-form-label
@@ -12907,14 +12908,16 @@ let Y = class extends pe {
             ?disabled=${this.disabled}
             ?multiple=${this.multiple}
             ?required=${this.required}
+            tabindex=${e ? "0" : "-1"}
             aria-labelledby="label"
+            aria-hidden=${e ? "false" : "true"}
             aria-describedby="description ${this.feedback ? "feedback" : z}"
             @change=${this.onChange}
             @cancel=${this.onCancel}
             @invalid=${this.handleInvalid}
             @blur=${this.onBlur}
             @focus=${this.onFocus} />
-          ${this.showBrowseButton === "true" && !this.autoupload ? $` <dap-ds-button
+          ${t ? $` <dap-ds-button
                 class="input__button"
                 part="browse-button"
                 tabindex="-1"
@@ -12947,17 +12950,17 @@ let Y = class extends pe {
       </span>
       ${!this.fileList && this._uploadingFiles.size > 0 ? $`
             <div class="upload-progress" part="upload-progress">
-              ${Array.from(this._uploadingFiles).map((i) => {
-      const o = this._uploadProgress[i] || 0;
+              ${Array.from(this._uploadingFiles).map((r) => {
+      const a = this._uploadProgress[r] || 0;
       return $`
                   <div class="upload-progress__item">
                     <dap-ds-typography variant="caption">
-                      ${i} - ${Math.round(o)}%
+                      ${r} - ${Math.round(a)}%
                     </dap-ds-typography>
                     <div class="upload-progress__bar">
                       <div
                         class="upload-progress__fill"
-                        style="width: ${o}%"></div>
+                        style="width: ${a}%"></div>
                     </div>
                   </div>
                 `;
@@ -12976,7 +12979,7 @@ let Y = class extends pe {
         <div>
           <dap-ds-typography variant="body">
             ${ot("fileInput.removeDialog.message", {
-      fileName: (e = (t = this._fileToRemove) == null ? void 0 : t.name) != null ? e : ""
+      fileName: (o = (i = this._fileToRemove) == null ? void 0 : i.name) != null ? o : ""
     })}
           </dap-ds-typography>
         </div>
@@ -15833,8 +15836,18 @@ let at = class t extends mt(M) {
     ).some((o) => o.contains(e) || o.shadowRoot && o.shadowRoot.contains(e));
   }
   focus() {
-    const e = this._trigger;
-    e && e.length > 0 && e[0].focus();
+    var i;
+    const e = (i = this._trigger) == null ? void 0 : i[0];
+    if (e) {
+      if (!e.shadowRoot) {
+        const o = this._getInnerLightDomFocusable(e);
+        if (o) {
+          o.focus();
+          return;
+        }
+      }
+      e.focus();
+    }
   }
   /**
    * Sets this item as the active (or inactive) roving tabindex target.
@@ -15851,7 +15864,7 @@ let at = class t extends mt(M) {
       r && this._applyTriggerTabIndex(r, e);
     });
   }
-  /** Apply tabindex to a trigger element and its shadow-root inner focusable element. */
+  /** Apply tabindex to a trigger element and its inner focusable element. */
   _applyTriggerTabIndex(e, i) {
     if (e.shadowRoot) {
       const o = e.shadowRoot.querySelector(
@@ -15861,9 +15874,22 @@ let at = class t extends mt(M) {
         e.removeAttribute("tabindex"), o.setAttribute("tabindex", i ? "0" : "-1");
         return;
       }
+    } else {
+      const o = this._getInnerLightDomFocusable(e);
+      if (o) {
+        e.removeAttribute("tabindex"), o.setAttribute("tabindex", i ? "0" : "-1");
+        return;
+      }
     }
     e.setAttribute("tabindex", i ? "0" : "-1");
   }
+  /**
+   * Returns the inner light-DOM focusable element of a non-focusable wrapper
+   * trigger, or null when the trigger itself should be the tab stop.
+   */
+  _getInnerLightDomFocusable(e) {
+    return ["A", "BUTTON", "INPUT", "SELECT", "TEXTAREA"].includes(e.tagName) ? null : e.querySelector("a[href], button:not([disabled])");
+  }
   /** Focus the first focusable element in the dropdown (supports both nested nav items and mega menu content). */
   focusFirstDropdownChild() {
     const e = this.querySelector(
@@ -21529,17 +21555,17 @@ export {
   Na as Y,
   Ro as Z,
   ie as _,
-  Eo as a,
+  to as a,
   Ar as a0,
   zt as a1,
   Lr as a2,
-  Le as a3,
-  Ea as a4,
+  Ea as a3,
+  Le as a4,
   Pt as a5,
-  ri as a6,
-  Er as a7,
+  Er as a6,
+  ri as a7,
   no as a8,
-  Rt as a9,
+  cn as a9,
   si as aA,
   ao as aB,
   Or as aC,
@@ -21549,11 +21575,11 @@ export {
   kr as aG,
   nr as aH,
   Zi as aI,
-  cn as aa,
-  ai as ab,
-  ki as ac,
-  Ri as ad,
-  lo as ae,
+  Rt as aa,
+  ki as ab,
+  Ri as ac,
+  lo as ad,
+  ai as ae,
   Vi as af,
   Ue as ag,
   Ee as ah,
@@ -21575,24 +21601,24 @@ export {
   po as ax,
   me as ay,
   Pr as az,
-  Ut as b,
-  Be as c,
-  He as d,
-  to as e,
-  eo as f,
+  Eo as b,
+  Ut as c,
+  Be as d,
+  eo as e,
+  He as f,
   vi as g,
   ii as h,
   Ot as i,
   qt as j,
   Mt as k,
   Xt as l,
-  jt as m,
-  Ia as n,
-  $r as o,
-  Li as p,
-  Sr as q,
-  Po as r,
-  ve as s,
+  Ia as m,
+  $r as n,
+  Li as o,
+  Sr as p,
+  Po as q,
+  ve as r,
+  jt as s,
   Ce as t,
   Ei as u,
   De as v,
@@ -21601,4 +21627,4 @@ export {
   Qt as y,
   wi as z
 };
-//# sourceMappingURL=components-D_2wgf__.js.map
+//# sourceMappingURL=components-B1eoYWYt.js.map