@boostdev/design-system-components 2.8.0 → 2.12.0

package/dist/web-components/{chunk-65JXQOBA.js → chunk-Z7XTADXX.js}

@@ -1,4 +1,5 @@
 import {
+  A,
   T,
   i,
   i2
@@ -8,6 +9,16 @@ import {
 var FOCUSABLE = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 var BdsDialog = class extends i2 {
   static styles = i`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: contents;
     }
@@ -15,20 +26,31 @@ var BdsDialog = class extends i2 {
     .dialog {
       font-size: var(--bds-font_size--body--s);
       border: var(--dialog_border, none);
-      --bdc_color: var(--dialog_border-color, currentcolor);
+      --bdc_color: currentcolor;
       --bdc-outline_radius: var(--bds-border_radius--m);
 
+      display: flex;
+      flex-direction: column;
       border-radius: var(--dialog_radius, var(--bdc-outline_radius));
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--dialog_shadow, var(--bdc-outline_shadow));
-      background-color: var(--dialog_color, var(--bds-color_grey--subtle));
+      background-color: var(--dialog_color, var(--bds-color_bg--strong, var(--bds-color_grey--subtle)));
       color: var(--dialog_on-color, var(--bds-color_on-grey--subtle));
       padding: var(--bds-space_l);
       max-inline-size: 90svw;
       max-block-size: 90svh;
+
+      /* visible (not hidden) so the close button, offset outside the box via
+         inset-*: -1em, is never clipped; .dialog-content scrolls internally. */
       overflow: visible;
       position: relative;
     }
 
+    /* A native <dialog> is display:none until opened; the flex layout above
+       would otherwise override the UA rule and render the dialog permanently. */
+    .dialog:not([open]) {
+      display: none;
+    }
+
     .dialog-content {
       display: grid;
       gap: var(--bds-grid_gap);
@@ -51,12 +73,26 @@ var BdsDialog = class extends i2 {
       background-color: var(--bds-color_bg);
       color: currentcolor;
       border: var(--dialog_close-border, none);
-      --bdc_color: var(--dialog_close-border-color, currentcolor);
+      --bdc_color: currentcolor;
 
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
       cursor: pointer;
     }
 
+    /* Extend the hit area to the 44x44px minimum touch target (WCAG 2.5.5)
+       without growing the visual 2em disc. */
+    .close-button::after {
+      content: '';
+      position: absolute;
+      inset-block: -0.5rem;
+      inset-inline: -0.5rem;
+    }
+
+    .close-button:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+
     .close-button svg {
       inline-size: 1.25em;
       block-size: 1.25em;
@@ -68,12 +104,14 @@ var BdsDialog = class extends i2 {
     }
   `;
   static properties = {
-    open: { type: Boolean, reflect: true }
+    open: { type: Boolean, reflect: true },
+    ariaLabel: { type: String, attribute: "aria-label" }
   };
   _triggerEl = null;
   constructor() {
     super();
     this.open = false;
+    this.ariaLabel = null;
   }
   connectedCallback() {
     super.connectedCallback();
@@ -82,6 +120,10 @@ var BdsDialog = class extends i2 {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener("command", this._onCommand);
+    if (this.open) {
+      document.body.style.overflow = "";
+      this._triggerEl = null;
+    }
   }
   updated(changed) {
     super.updated(changed);
@@ -105,8 +147,8 @@ var BdsDialog = class extends i2 {
   }
   _onCommand = (e) => {
     const command = e.command;
-    if (command === "show-modal") this._openDialog();
-    else if (command === "close") this._closeDialog();
+    if (command === "--show-modal" || command === "show-modal") this._openDialog();
+    else if (command === "--close" || command === "close") this._closeDialog();
   };
   _openDialog() {
     if (this.open) return;
@@ -140,13 +182,14 @@ var BdsDialog = class extends i2 {
     if (all.length === 0) return;
     const first = all[0];
     const last = all[all.length - 1];
+    const active = this.shadowRoot?.activeElement ?? document.activeElement;
     if (e.shiftKey) {
-      if (document.activeElement === first) {
+      if (active === first) {
         e.preventDefault();
         last.focus();
       }
     } else {
-      if (document.activeElement === last) {
+      if (active === last) {
         e.preventDefault();
         first.focus();
       }
@@ -157,6 +200,7 @@ var BdsDialog = class extends i2 {
       <dialog
         class="dialog"
         aria-modal="true"
+        aria-label=${this.ariaLabel ?? A}
         @click=${this._handleBackdropClick}
         @cancel=${this._handleCancel}
         @keydown=${this._handleKeydown}

package/dist/web-components/globals.js

@@ -1 +1 @@
-import "./chunk-3S42DZ7W.js";
+import "./chunk-P24JYC5V.js";