@unofficialbox/box-open-elements 0.19.0 → 0.21.0

package/dist/components/feedback/toast.js

@@ -1,4 +1,5 @@
 import { BaseElement } from "../../core/index.js";
+import { FeedbackAnnouncement } from "../../foundations/a11y/announcer.js";
 import { toneAccessibleLabel, toneIcon } from "./tone.js";
 import { boeRadius, boeSpace } from "../../foundations/geometry/index.js";
 import { boeFocusVisibleStyles } from "../../foundations/tokens/index.js";
@@ -21,18 +22,8 @@ const toastStyles = `
     display: none !important;
   }
 
-  /* Fill, text colour and shadow track box-ui-elements' .notification and are
-     pinned by the colour conformance manifest — they are deliberately not
-     derived from the tone accent. The --toast-accent property exists only to
-     colour the status glyph, which upstream has no equivalent for, so adding it
-     costs no conformance.
-
-     There is no border. Upstream .notification has one, and box-open-elements
-     matched it until the outline was judged too heavy; the claim that pinned it
-     was retired rather than left describing something no longer painted. Tone
-     survives that in three places — the tinted fill, the full-strength glyph,
-     and the visually-hidden tone label — so it was never carried by the border
-     alone. */
+  /* Preserve upstream light tints while deriving dark fills from the active
+     surface. Status ink, tinted fill and a text label communicate the tone. */
   [part="toast"] {
     --toast-accent: var(--boe-token-text-text, #222222);
 
@@ -57,19 +48,19 @@ const toastStyles = `
   }
 
   [part="toast"][data-tone="success"] {
-    --toast-accent: var(--boe-token-surface-status-surface-success, #26c281);
-    background: color-mix(in srgb, var(--boe-token-surface-status-surface-success, #26c281) 20%, #fff);
+    --toast-accent: var(--boe-token-text-status-text-success, #187657);
+    background: color-mix(in srgb, var(--boe-token-surface-status-surface-success, #26c281) 20%, var(--boe-token-surface-surface, #ffffff));
   }
 
   [part="toast"][data-tone="error"] {
-    --toast-accent: var(--boe-token-surface-status-surface-error, #ed3757);
-    background: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 20%, #fff);
+    --toast-accent: var(--boe-token-text-status-text-error, #b92340);
+    background: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 20%, var(--boe-token-surface-surface, #ffffff));
   }
 
   [part="toast"][data-tone="warning"],
   [part="toast"][data-tone="inprogress"] {
-    --toast-accent: var(--boe-token-surface-status-surface-inprogress, #f5b31b);
-    background: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 20%, #fff);
+    --toast-accent: var(--boe-token-text-status-text-warning, #805600);
+    background: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 20%, var(--boe-token-surface-surface, #ffffff));
   }
 
   .sr-only {
@@ -88,8 +79,7 @@ const toastStyles = `
     flex: 0 0 auto;
     inline-size: 20px;
     block-size: 20px;
-    /* The accent at full strength: the glyph is the one element that should
-       read as the status colour rather than a darkened version of it. */
+    /* Readable status ink is separate from the decorative fill colour. */
     color: var(--toast-accent);
   }
 
@@ -205,6 +195,10 @@ export class Toast extends BaseElement {
     }
     openValue = false;
     timeoutId = null;
+    remaining = 0;
+    deadline = 0;
+    holds = new Set();
+    announcement = new FeedbackAnnouncement();
     toastEl;
     iconEl;
     headingEl;
@@ -255,11 +249,36 @@ export class Toast extends BaseElement {
             clearTimeout(this.timeoutId);
             this.timeoutId = null;
         }
-        // Sticky wins over any duration, including one passed to show().
-        if (duration > 0 && this.mode !== "sticky") {
-            this.timeoutId = setTimeout(() => this.hide(), duration);
+        this.remaining = Number.isFinite(duration) ? Math.max(0, duration) : 0;
+        this.resumeTimer();
+    }
+    resumeTimer() {
+        if (!this.isConnected || !this.open || this.holds.size || this.remaining <= 0 || this.mode === "sticky" || this.tone === "error")
+            return;
+        this.deadline = Date.now() + this.remaining;
+        this.timeoutId = setTimeout(() => {
+            this.timeoutId = null;
+            this.remaining = 0;
+            this.dismiss("timeout");
+        }, this.remaining);
+    }
+    hold(reason, active) {
+        if (active) {
+            this.holds.add(reason);
+            if (this.timeoutId !== null) {
+                this.remaining = Math.max(0, this.deadline - Date.now());
+                clearTimeout(this.timeoutId);
+                this.timeoutId = null;
+            }
+        }
+        else if (this.holds.delete(reason) && !this.holds.size) {
+            this.resumeTimer();
         }
     }
+    dismiss(source) {
+        this.hide();
+        this.dispatchEvent(new CustomEvent("dismiss", { bubbles: true, composed: true, detail: { source } }));
+    }
     get message() {
         return this.getAttribute("message") ?? "";
     }
@@ -308,16 +327,26 @@ export class Toast extends BaseElement {
         this.setAttribute("tone", value);
     }
     disconnectedCallback() {
+        this.announcement.reset();
+        this.holds.clear();
         if (this.timeoutId) {
+            this.remaining = Math.max(0, this.deadline - Date.now());
             clearTimeout(this.timeoutId);
             this.timeoutId = null;
         }
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.resumeTimer();
+    }
     attributeChangedCallback(name, oldValue, newValue) {
         if (name === "open") {
             this.openValue = this.hasAttribute("open");
         }
         super.attributeChangedCallback(name, oldValue, newValue);
+        if (oldValue !== newValue && ["open", "duration", "mode", "tone"].includes(name)) {
+            this.scheduleAutoDismiss(this.open ? this.duration : 0);
+        }
     }
     show(message, options) {
         if (typeof message === "string") {
@@ -328,8 +357,12 @@ export class Toast extends BaseElement {
         }
         this.open = true;
         // options.duration wins; else a declarative `duration` attribute; else 2500.
-        const duration = options?.duration ?? (this.duration || 2500);
+        const duration = options?.duration ?? (this.hasAttribute("duration") ? this.duration : 2500);
         this.scheduleAutoDismiss(duration);
+        // Re-showing the same text is a new feedback event, even when already open.
+        this.announcement.reset();
+        if (this.isRendered)
+            this.update();
     }
     hide() {
         this.open = false;
@@ -340,7 +373,7 @@ export class Toast extends BaseElement {
         }
         this.shadowRoot.innerHTML = `
       <style>${toastStyles}</style>
-      <div part="toast" role="status" aria-live="polite">
+      <div part="toast" role="group" aria-label="Notification">
         <span part="icon" aria-hidden="true"></span>
         <div part="content">
           <span part="tone-label" class="sr-only"></span>
@@ -360,9 +393,17 @@ export class Toast extends BaseElement {
         this.dismissEl = this.shadowRoot.querySelector('[part="dismiss"]');
     }
     setupListeners() {
+        this.addEventListener("pointerenter", () => this.hold("pointer", true));
+        this.addEventListener("pointerleave", () => this.hold("pointer", false));
+        this.addEventListener("focusin", () => this.hold("focus", true));
+        this.addEventListener("focusout", event => {
+            const target = event.relatedTarget;
+            if (target instanceof Node && (this.contains(target) || this.shadowRoot?.contains(target)))
+                return;
+            this.hold("focus", false);
+        });
         this.dismissEl.addEventListener("click", () => {
-            this.dispatchEvent(new CustomEvent("dismiss", { bubbles: true, composed: true }));
-            this.hide();
+            this.dismiss("close-button");
         });
         this.actionSlot.addEventListener("slotchange", () => {
             const hasContent = this.actionSlot.assignedNodes({ flatten: true }).length > 0;
@@ -375,6 +416,7 @@ export class Toast extends BaseElement {
         }
         const visible = this.openValue && Boolean(this.message);
         this.hidden = !visible;
+        this.announcement.update(this, visible ? [toneAccessibleLabel(this.tone), this.heading, this.message].filter(Boolean).join(": ") : "", this.tone === "error" ? "assertive" : "polite");
         if (!visible) {
             return;
         }

package/dist/components/forms/number-input.d.ts

@@ -7,6 +7,7 @@ export declare class NumberInput extends FormAssociatedElement {
     private inputEl;
     private labelEl;
     private errorEl;
+    private descriptionEl;
     get disabled(): boolean;
     set disabled(value: boolean);
     get label(): string;

package/dist/components/forms/number-input.js

@@ -1,7 +1,7 @@
-import { FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } from "../../core/index.js";
+import { FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formDescriptionMarkup, formErrorMessageMarkup, } from "../../core/index.js";
 import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
-import { boeRadius } from "../../foundations/geometry/index.js";
+import { boeControl, boeRadius } from "../../foundations/geometry/index.js";
 const DEFAULT_TAG_NAME = "box-number-input";
 const parseNumber = (value, fallback) => {
     if (value == null || value === "") {
@@ -29,11 +29,9 @@ const numberInputStyles = `
   }
 
   [part="label"] {
-    font-size: 0.8rem;
+    font-size: ${boeControl.fontSize};
     font-weight: 700;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    color: var(--boe-token-text-text, #222222);
   }
 
   [part="input"] {
@@ -60,6 +58,7 @@ const numberInputStyles = `
   }
 
   ${boeFormFieldErrorStyles}
+  ${boeFormFieldSupportStyles}
 `;
 export class NumberInput extends FormAssociatedElement {
     static tagName = DEFAULT_TAG_NAME;
@@ -79,6 +78,7 @@ export class NumberInput extends FormAssociatedElement {
     inputEl;
     labelEl;
     errorEl;
+    descriptionEl;
     get disabled() {
         return this.hasAttribute("disabled");
     }
@@ -194,6 +194,7 @@ export class NumberInput extends FormAssociatedElement {
       <style>${numberInputStyles}</style>
       <label part="field">
         <span part="label"></span>
+        ${formDescriptionMarkup()}
         <input type="number" part="input" />
         ${formErrorMessageMarkup()}
       </label>
@@ -201,6 +202,7 @@ export class NumberInput extends FormAssociatedElement {
         this.labelEl = this.shadowRoot.querySelector('[part="label"]');
         this.inputEl = this.shadowRoot.querySelector('[part="input"]');
         this.errorEl = this.shadowRoot.querySelector('[part="error-message"]');
+        this.descriptionEl = this.shadowRoot.querySelector('[part="description"]');
     }
     setupListeners() {
         this.inputEl.addEventListener("input", event => {
@@ -239,6 +241,7 @@ export class NumberInput extends FormAssociatedElement {
         else {
             this.inputEl.removeAttribute("disabled");
         }
+        this.applyFieldSupport(this.labelEl, this.inputEl, this.descriptionEl);
         this.applyInvalidState(this.inputEl, this.errorEl);
     }
 }

package/dist/components/forms/search-field.js

@@ -6,6 +6,11 @@ const searchSpinnerMarkup = '<span part="spinner" aria-hidden="true"></span>';
 const searchFieldStyles = `
   :host {
     display: block;
+    min-inline-size: 0;
+    container: boe-search-field / inline-size;
+    /* Inline-size containment otherwise contributes zero intrinsic width in
+       content-sized flex/grid rows. Explicit parent widths still take priority. */
+    contain-intrinsic-inline-size: 20rem;
     color: inherit;
     font: inherit;
   }
@@ -18,6 +23,7 @@ const searchFieldStyles = `
 
   [part="field"] {
     display: grid;
+    grid-template-columns: minmax(0, 1fr);
     gap: 0.45rem;
   }
 
@@ -116,6 +122,16 @@ const searchFieldStyles = `
     background: var(--boe-token-surface-surface-hover, #f4f4f4);
   }
 
+  @container boe-search-field (max-width: 22rem) {
+    [part="input-shell"] {
+      flex-wrap: wrap;
+      border-radius: ${boeRadius.control};
+    }
+    [part="input"] {
+      flex-basis: 100%;
+    }
+  }
+
   [part="submit"]:focus-visible,
   [part="clear"]:focus-visible {
     outline: none;

package/dist/components/overlays/context-menu.d.ts

@@ -27,6 +27,8 @@ export declare class ContextMenu extends BaseElement {
     get disabled(): boolean;
     set disabled(value: boolean);
     get open(): boolean;
+    /** Open from an explicit keyboard/touch trigger without a synthetic event. */
+    show(): void;
     disconnectedCallback(): void;
     protected renderTemplate(): void;
     protected setupListeners(): void;

package/dist/components/overlays/context-menu.js

@@ -139,6 +139,13 @@ export class ContextMenu extends BaseElement {
     get open() {
         return this.openValue;
     }
+    /** Open from an explicit keyboard/touch trigger without a synthetic event. */
+    show() {
+        if (!this.isConnected || !this.surfaceEl || this.disabled || !this.items.length || this.open)
+            return;
+        const rect = this.getBoundingClientRect();
+        this.openAt(rect.left, rect.bottom);
+    }
     disconnectedCallback() {
         this.unbindDocument();
     }

package/dist/components/overlays/dialog.js

@@ -17,11 +17,13 @@ const dialogStyles = `
      max-* are reset because this element is the full-viewport scrim rather
      than a centred card. */
   [part="backdrop"] {
+    box-sizing: border-box;
     position: fixed;
     inset: 0;
     z-index: 1200;
     background: ${boeOverlay.modalBackdrop};
     display: grid;
+    grid-template-columns: minmax(0, 1fr);
     place-items: center;
     padding: ${boeOverlay.modalPadding};
     border: 0;
@@ -45,13 +47,18 @@ const dialogStyles = `
   }
 
   [part="dialog"] {
+    box-sizing: border-box;
+    min-width: 0;
+    max-width: 100%;
+    max-height: calc(100dvh - ${boeOverlay.modalPadding} - ${boeOverlay.modalPadding});
     width: min(${boeOverlay.modalWidth}, calc(100vw - 3rem));
     background: var(--boe-token-surface-surface, #ffffff);
     border: 0;
     border-radius: ${boeOverlay.modalRadius};
     box-shadow: ${boeOverlay.modalShadow};
     padding: ${boeOverlay.modalPadding};
-    display: grid;
+    display: flex;
+    flex-direction: column;
     gap: ${boeSpace[5]};
     color: var(--boe-token-text-text, #222222);
   }
@@ -62,7 +69,7 @@ const dialogStyles = `
   [part="dialog"][data-size="fullscreen"] {
     width: calc(100vw - 2rem);
     height: calc(100vh - 2rem);
-    max-width: none;
+    max-width: 100%;
     border-radius: ${boeRadius.large};
   }
 
@@ -86,6 +93,9 @@ const dialogStyles = `
   }
 
   [part="body"] {
+    min-height: 0;
+    overflow: auto;
+    overflow-wrap: anywhere;
     color: var(--boe-token-text-text, #222222);
     font-size: 14px;
     line-height: 20px;
@@ -93,6 +103,8 @@ const dialogStyles = `
 
   [part="footer"] {
     display: flex;
+    flex-shrink: 0;
+    flex-wrap: wrap;
     justify-content: end;
     gap: ${boeSpace[2]};
     margin-top: ${boeSpace[2]};
@@ -246,7 +258,11 @@ export class Dialog extends BaseElement {
         });
         this.hostEl.addEventListener("keydown", event => {
             const keyboardEvent = event;
-            const dialog = keyboardEvent.target?.closest('[part="dialog"]');
+            if (keyboardEvent.defaultPrevented)
+                return;
+            // Slotted controls are not DOM descendants of the surface; their event
+            // path still crosses it. closest() misses keyboard events from slots.
+            const dialog = keyboardEvent.composedPath().find(node => node instanceof HTMLElement && node.getAttribute("part") === "dialog");
             if (!dialog || !this.hostEl.contains(dialog)) {
                 return;
             }

package/dist/components/overlays/popover.js

@@ -64,13 +64,18 @@ const popoverStyles = `
      unavailable or fails, the surface still renders exactly as before and only
      the top-layer promotion is lost — see foundations/overlay/top-layer.ts. */
   [part="surface"] {
+    box-sizing: border-box;
+    margin: 0;
+    inset: auto;
     display: block;
     position: fixed;
     z-index: 30;
     inset-block-start: 0;
     inset-inline-start: 0;
     width: min(360px, calc(100vw - 5rem));
-    min-width: 200px;
+    min-width: min(200px, calc(100vw - 1rem));
+    max-height: calc(100dvh - 1rem);
+    overflow: auto;
     padding: ${boeOverlay.padding};
     border: ${boeOverlay.border};
     border-radius: ${boeOverlay.radius};