@unofficialbox/box-open-elements 0.18.0 → 0.20.0

package/dist/components/feedback/progress-bar.js

@@ -9,6 +9,12 @@ const progressBarStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="progress"] {
     display: grid;
     gap: 0.45rem;
@@ -29,6 +35,14 @@ const progressBarStyles = `
     color: var(--boe-token-text-text-secondary, #6f6f6f);
   }
 
+  /* Fully hidden rather than the sr-only clip the form fields use. There the
+     label element *is* the control's accessible name, so it has to stay
+     readable; here the name lives on [part="track"]'s aria-label, and leaving
+     a clipped copy behind would just make a screen reader read it twice. */
+  :host([hide-label]) [part="label"] {
+    display: none;
+  }
+
   [part="value"] {
     font-size: 0.86rem;
     font-weight: 700;
@@ -55,7 +69,7 @@ const progressBarStyles = `
 export class ProgressBar extends BaseElement {
     static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
-        return ["label", "max", "value"];
+        return ["hide-label", "label", "max", "value"];
     }
     progressEl;
     labelEl;
@@ -68,6 +82,19 @@ export class ProgressBar extends BaseElement {
     set label(value) {
         this.setAttribute("label", value);
     }
+    /**
+     * Keep the label as the bar's accessible name but drop it from the layout.
+     *
+     * For a bar sitting under something that already names it — an upload row
+     * showing the filename above it — the visible label is a second copy of text
+     * the reader can already see.
+     */
+    get hideLabel() {
+        return this.hasAttribute("hide-label");
+    }
+    set hideLabel(value) {
+        this.toggleAttribute("hide-label", Boolean(value));
+    }
     get max() {
         return Number(this.getAttribute("max") ?? "100");
     }
@@ -86,7 +113,7 @@ export class ProgressBar extends BaseElement {
         }
         this.shadowRoot.innerHTML = `
       <style>${progressBarStyles}</style>
-      <div part="progress" role="group">
+      <div part="progress">
         <div part="meta">
           <span part="label"></span>
           <span part="value"></span>
@@ -109,7 +136,12 @@ export class ProgressBar extends BaseElement {
         const max = Math.max(1, this.max);
         const value = clamp(this.value, 0, max);
         const percentage = Math.round((value / max) * 100);
-        this.progressEl.setAttribute("aria-label", `${this.label} progress`);
+        // The name belongs to [part="track"] — the element carrying the
+        // progressbar role — and to nothing else. The wrapper used to be a
+        // role="group" named `${label} progress`, which both duplicated that name
+        // and stuttered: the default label is "Progress", so it announced
+        // "Progress progress", and the uploader's "<file> upload progress" became
+        // "<file> upload progress progress".
         this.labelEl.textContent = this.label;
         this.valueEl.textContent = `${percentage}%`;
         this.trackEl.setAttribute("aria-label", this.label);

package/dist/components/feedback/progress-ring.js

@@ -9,6 +9,12 @@ const progressRingStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="ring"] {
     display: inline-grid;
     place-items: center;

package/dist/components/feedback/progress-steps.js

@@ -59,6 +59,12 @@ const progressStepsStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="steps"] {
     display: grid;
     gap: 0.55rem;

package/dist/components/feedback/skeleton.js

@@ -36,6 +36,12 @@ const skeletonStyles = `
 
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
 ${boeGridGutterStyles(":host")}
 
   /* The multi-part variants are layout, so they take the full width they are

package/dist/components/feedback/spinner.js

@@ -8,6 +8,12 @@ const spinnerStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="spinner"] {
     display: inline-flex;
     align-items: center;

package/dist/components/feedback/status-icon.d.ts

@@ -0,0 +1,10 @@
+import { BaseElement } from "../../core/element.js";
+import { type StatusKind } from "../../foundations/status/index.js";
+export declare class StatusIcon extends BaseElement {
+    static readonly tagName = "box-status-icon";
+    static get observedAttributes(): string[];
+    get kind(): StatusKind;
+    set kind(value: StatusKind);
+    protected renderTemplate(): void;
+    protected update(): void;
+}

package/dist/components/feedback/status-icon.js

@@ -0,0 +1,26 @@
+import { BaseElement } from "../../core/element.js";
+import { boeStatusGlyph, boeStatusStyles, statusLabel, toStatusKind } from "../../foundations/status/index.js";
+import { boeEntranceKeyframes, boeReducedMotionPolicy } from "../../foundations/motion/index.js";
+const DEFAULT_TAG_NAME = "box-status-icon";
+export class StatusIcon extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
+    static get observedAttributes() { return ["kind"]; }
+    get kind() { return toStatusKind(this.getAttribute("kind") ?? "pending"); }
+    set kind(value) { this.setAttribute("kind", value); }
+    renderTemplate() {
+        this.shadowRoot.innerHTML = `<style>:host{display:inline-flex} :host([hidden]){display:none !important}
+    .label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
+    ${boeEntranceKeyframes}${boeStatusStyles}${boeReducedMotionPolicy}</style><span part="glyph"></span><span class="label" part="label"></span>`;
+    }
+    update() {
+        if (!this.isRendered)
+            return;
+        const glyph = this.shadowRoot.querySelector('[part="glyph"]');
+        if (glyph.getAttribute("data-kind") !== this.kind) {
+            glyph.setAttribute("data-kind", this.kind);
+            glyph.innerHTML = boeStatusGlyph(this.kind);
+        }
+        this.shadowRoot.querySelector('[part="label"]').textContent = statusLabel(this.kind);
+    }
+}
+StatusIcon.register();

package/dist/components/feedback/toast.js

@@ -18,7 +18,7 @@ const toastStyles = `
   }
 
   :host([hidden]) {
-    display: none;
+    display: none !important;
   }
 
   /* Fill, text colour and shadow track box-ui-elements' .notification and are

package/dist/components/files/drop-zone.js

@@ -14,7 +14,7 @@ const dropZoneStyles = `
   /* Without this, the host's own display:block beats the UA rule for [hidden]
      and the element stays visible when a host hides it. */
   :host([hidden]) {
-    display: none;
+    display: none !important;
   }
 
   [part="zone"] {

package/dist/components/forms/calendar.js

@@ -54,6 +54,12 @@ const calendarStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="calendar"] {
     display: grid;
     gap: 0.55rem;

package/dist/components/forms/category-selector.js

@@ -17,6 +17,12 @@ const categorySelectorStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="group"] {
     display: flex;
     flex-wrap: wrap;

package/dist/components/forms/checkbox-group.js

@@ -16,6 +16,12 @@ const checkboxGroupStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="group"] {
     margin: 0;
     padding: 0;

package/dist/components/forms/checkbox.js

@@ -12,6 +12,12 @@ const checkboxStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="field"] {
     display: inline-flex;
     align-items: center;

package/dist/components/forms/color-picker.js

@@ -22,6 +22,12 @@ const colorPickerStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="field"] {
     display: grid;
     gap: 0.5rem;

package/dist/components/forms/combobox.js

@@ -17,6 +17,12 @@ const comboboxStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="field"] {
     display: grid;
     gap: 0.45rem;

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

@@ -10,6 +10,12 @@ const dateFieldStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="field"] {
     display: grid;
     gap: 0.45rem;

package/dist/components/forms/dropdown.js

@@ -18,6 +18,12 @@ const dropdownStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="dropdown"] {
     position: relative;
     display: inline-block;

package/dist/components/forms/dual-listbox.js

@@ -20,6 +20,12 @@ const dualListboxStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="field"] {
     margin: 0;
     padding: 0;

package/dist/components/forms/fieldset.js

@@ -8,6 +8,12 @@ const fieldsetStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="fieldset"] {
     margin: 0;
     padding: 0;

package/dist/components/forms/multi-select.js

@@ -16,6 +16,12 @@ const multiSelectStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="field"] {
     margin: 0;
     padding: 0;

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

@@ -17,6 +17,12 @@ const numberInputStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="field"] {
     display: grid;
     gap: 0.45rem;

package/dist/components/forms/pill-cloud.js

@@ -14,6 +14,12 @@ const pillCloudStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="cloud"] {
     display: flex;
     flex-wrap: wrap;

package/dist/components/forms/pill-selector-dropdown.js

@@ -14,6 +14,12 @@ const pillSelectorStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="field"] {
     display: flex;
     flex-wrap: wrap;

package/dist/components/forms/radio-group.js

@@ -16,6 +16,12 @@ const radioGroupStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="group"] {
     margin: 0;
     padding: 0;

package/dist/components/forms/range-slider.js

@@ -15,6 +15,12 @@ const rangeSliderStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="field"] {
     display: grid;
     gap: 0.45rem;

package/dist/components/forms/rating.js

@@ -9,6 +9,12 @@ const ratingStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="field"] {
     display: grid;
     gap: 0.5rem;

package/dist/components/forms/rich-text-input.js

@@ -92,6 +92,12 @@ const richTextStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="field"] {
     margin: 0;
     padding: 0;

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

@@ -10,6 +10,12 @@ const searchFieldStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="field"] {
     display: grid;
     gap: 0.45rem;

package/dist/components/forms/select.js

@@ -24,6 +24,12 @@ const selectStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="field"] {
     display: grid;
     gap: ${boeSpace[2]};

package/dist/components/forms/slider.js

@@ -15,6 +15,12 @@ const sliderStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="field"] {
     display: grid;
     gap: 0.45rem;

package/dist/components/forms/spin-button.js

@@ -16,6 +16,12 @@ const spinButtonStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="field"] {
     display: grid;
     gap: 0.45rem;

package/dist/components/forms/switch.js

@@ -17,6 +17,12 @@ const switchStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="switch"] {
     appearance: none;
     border: none;

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

@@ -19,6 +19,12 @@ const tagInputStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="field"] {
     display: grid;
     gap: 0.45rem;

package/dist/components/forms/text-area.js

@@ -9,6 +9,12 @@ const textAreaStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="field"] {
     display: grid;
     gap: 0.45rem;

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

@@ -13,6 +13,12 @@ const textFieldStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="field"] {
     display: grid;
     gap: ${boeSpace[2]};

package/dist/components/forms/tile-group.js

@@ -24,7 +24,7 @@ const tileStyles = `
   }
 
   :host([hidden]) {
-    display: none;
+    display: none !important;
   }
 
   [part="group"] {

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

@@ -9,6 +9,12 @@ const timeFieldStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="field"] {
     display: grid;
     gap: 0.45rem;

package/dist/components/identity/avatar.js

@@ -39,6 +39,12 @@ const avatarStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="avatar"] {
     position: relative;
     display: inline-grid;

package/dist/components/identity/contact-datalist-item.js

@@ -16,6 +16,12 @@ const contactStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="item"] {
     display: flex;
     align-items: center;

package/dist/components/identity/persona.js

@@ -20,6 +20,12 @@ const personaStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="persona"] {
     display: grid;
     grid-template-columns: auto minmax(0, 1fr) auto;

package/dist/components/layout/app-shell.js

@@ -8,6 +8,12 @@ const appShellStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="shell"] {
     display: grid;
     grid-template-rows: auto 1fr auto;

package/dist/components/layout/divider.js

@@ -15,6 +15,12 @@ const dividerStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   :host([orientation="vertical"]) {
     display: inline-block;
     inline-size: auto;

package/dist/components/layout/grid.js

@@ -41,7 +41,7 @@ const elementStyles = `
   }
 
   :host([hidden]) {
-    display: none;
+    display: none !important;
   }
 
 ${boeGridGutterStyles(":host")}