@unofficialbox/box-open-elements 0.17.0 → 0.19.0

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

@@ -11,12 +11,19 @@ const dropZoneStyles = `
     font: inherit;
   }
 
+  /* 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 !important;
+  }
+
   [part="zone"] {
     position: relative;
     display: grid;
     gap: 0.55rem;
     justify-items: start;
     padding: 0.75rem;
+    text-align: start;
     border: 1.5px dashed color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 16%, var(--boe-token-stroke-stroke, #e8e8e8) 84%);
     border-radius: ${boeRadius.large};
     background: var(--boe-token-surface-surface-secondary, #fbfbfb);
@@ -49,7 +56,9 @@ const dropZoneStyles = `
       0 14px 28px rgba(15, 23, 42, 0.05);
   }
 
-  [part="input"] {
+  /* The inputs are never the focusable control — the browse buttons are — so
+     they are taken out of the tab order rather than merely hidden. */
+  [part~="file-input"] {
     position: absolute;
     inline-size: 1px;
     block-size: 1px;
@@ -57,8 +66,6 @@ const dropZoneStyles = `
     pointer-events: none;
   }
 
-  ${boeFocusVisibleStyles('[part="input"]')}
-
   [part="label"] {
     font-size: 1rem;
     font-weight: 700;
@@ -70,17 +77,99 @@ const dropZoneStyles = `
     line-height: 1.5;
     max-width: 34ch;
   }
+
+  [part="actions"] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0.25rem 0.5rem;
+  }
+
+  [part~="browse"] {
+    appearance: none;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    font: inherit;
+    font-weight: 600;
+    color: var(--boe-token-surface-surface-brand, #0061d5);
+    text-decoration: none;
+    cursor: pointer;
+    border-radius: ${boeRadius.control};
+  }
+
+  [part~="browse"]:hover {
+    text-decoration: underline;
+  }
+
+  ${boeFocusVisibleStyles('[part~="browse"]')}
+
+  [part="separator"] {
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  /* Hero: the full-height empty state, centred, with room for an illustration.
+     Matches the shape box-ui-elements gives its uploader. */
+  :host([variant="hero"]) [part="zone"] {
+    justify-items: center;
+    align-content: center;
+    gap: 0.35rem;
+    min-block-size: 18rem;
+    padding: 2rem 1.5rem;
+    text-align: center;
+  }
+
+  :host([variant="hero"]) [part="label"] {
+    font-size: 1.0625rem;
+  }
+
+  :host([variant="hero"]) [part~="description"] {
+    max-width: 42ch;
+  }
+
+  [part="illustration"] {
+    display: none;
+  }
+
+  :host([variant="hero"]) [part="illustration"] {
+    display: block;
+    /* The art carries its own padding inside the viewBox, so the box is set a
+       little larger than the 130px box-ui-elements uses for the drawn area. */
+    inline-size: min(10.5rem, 70%);
+    margin-block-end: 0.15rem;
+  }
+
+  ::slotted([slot="illustration"]) {
+    display: block;
+    inline-size: 100%;
+    block-size: auto;
+  }
 `;
 export class DropZone extends BaseElement {
     static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
-        return ["accept", "description", "directories", "label", "message"];
+        return [
+            "accept",
+            "browse-label",
+            "description",
+            "directories",
+            "folder-label",
+            "label",
+            "message",
+            "variant",
+        ];
     }
     dragging = false;
     zoneEl;
     inputEl;
+    folderInputEl;
     labelEl;
     messageEl;
+    browseEl;
+    folderBrowseEl;
+    separatorEl;
+    illustrationEl;
     get label() {
         return this.getAttribute("label") ?? "Upload files";
     }
@@ -100,12 +189,15 @@ export class DropZone extends BaseElement {
         this.setAttribute("description", value);
     }
     /**
-     * Make the browse dialog pick a folder rather than files.
+     * Offer folder selection from the browse controls as well as files.
+     *
+     * A single `<input>` is either a file picker or a folder picker, never both —
+     * so this adds a *second* control backed by its own `webkitdirectory` input
+     * rather than converting the first, which is how box-ui-elements does it and
+     * means a person is never made to choose between the two.
      *
-     * Drag-and-drop reads folders regardless — a dropped directory is always
-     * traversed. This only governs the click-to-browse path, where the platform
-     * makes it either/or: an input is a file picker or a folder picker, never
-     * both.
+     * Drag-and-drop reads folders regardless; a dropped directory is always
+     * traversed whatever this is set to.
      */
     get directories() {
         return this.hasAttribute("directories");
@@ -113,6 +205,31 @@ export class DropZone extends BaseElement {
     set directories(value) {
         this.toggleAttribute("directories", value);
     }
+    /** Text of the file-browse control. */
+    get browseLabel() {
+        return this.getAttribute("browse-label") ?? "Browse your device";
+    }
+    set browseLabel(value) {
+        this.setAttribute("browse-label", value);
+    }
+    /** Text of the folder-browse control, shown only when `directories` is set. */
+    get folderLabel() {
+        return this.getAttribute("folder-label") ?? "Select folders";
+    }
+    set folderLabel(value) {
+        this.setAttribute("folder-label", value);
+    }
+    /**
+     * `"compact"` (default) keeps the small inline target; `"hero"` is the tall
+     * centred empty state, with room for an illustration in the `illustration`
+     * slot.
+     */
+    get variant() {
+        return this.getAttribute("variant") === "hero" ? "hero" : "compact";
+    }
+    set variant(value) {
+        this.setAttribute("variant", value);
+    }
     /**
      * What the browse dialog offers, in the `<input accept>` syntax —
      * `".pdf,.docx"` or `"image/*"`.
@@ -135,16 +252,31 @@ export class DropZone extends BaseElement {
         if (!this.shadowRoot) {
             return;
         }
+        // A div rather than a label wrapping the input: the browse controls are
+        // real buttons, and a button inside a label is both ambiguous to assistive
+        // technology and prone to firing the picker twice.
         this.shadowRoot.innerHTML = `
       <style>${dropZoneStyles}</style>
-      <label part="zone">
-        <input type="file" part="input" multiple />
+      <div part="zone">
+        <input type="file" part="input file-input" multiple tabindex="-1" aria-hidden="true" />
+        <input type="file" part="folder-input file-input" multiple tabindex="-1" aria-hidden="true" webkitdirectory />
+        <span part="illustration"><slot name="illustration"></slot></span>
         <strong part="label"></strong>
         <span part="description message"></span>
-      </label>
+        <span part="actions">
+          <button type="button" part="browse browse-files"></button>
+          <span part="separator" hidden>or</span>
+          <button type="button" part="browse browse-folders" hidden></button>
+        </span>
+      </div>
     `;
         this.zoneEl = this.shadowRoot.querySelector('[part="zone"]');
-        this.inputEl = this.shadowRoot.querySelector('[part="input"]');
+        this.inputEl = this.shadowRoot.querySelector('[part~="input"]');
+        this.folderInputEl = this.shadowRoot.querySelector('[part~="folder-input"]');
+        this.browseEl = this.shadowRoot.querySelector('[part~="browse-files"]');
+        this.folderBrowseEl = this.shadowRoot.querySelector('[part~="browse-folders"]');
+        this.separatorEl = this.shadowRoot.querySelector('[part="separator"]');
+        this.illustrationEl = this.shadowRoot.querySelector('[part="illustration"]');
         this.labelEl = this.shadowRoot.querySelector('[part="label"]');
         this.messageEl = this.shadowRoot.querySelector('[part~="description"]');
     }
@@ -177,11 +309,30 @@ export class DropZone extends BaseElement {
                 this.emitSelection(entries, skipped);
             });
         });
-        this.inputEl.addEventListener("change", () => {
-            // `webkitdirectory` reports the tree through each file's
-            // webkitRelativePath rather than through entries.
-            this.emitSelection(entriesFromFileList(Array.from(this.inputEl.files ?? [])));
+        // Clicking the body of the zone still opens the file picker, as it did when
+        // the zone was a label. Clicks that land on a button are left alone, or the
+        // picker would be asked to open twice.
+        this.zoneEl.addEventListener("click", event => {
+            if (event.target.closest('[part~="browse"]')) {
+                return;
+            }
+            this.inputEl.click();
+        });
+        this.browseEl.addEventListener("click", () => {
+            this.inputEl.click();
+        });
+        this.folderBrowseEl.addEventListener("click", () => {
+            this.folderInputEl.click();
         });
+        for (const input of [this.inputEl, this.folderInputEl]) {
+            input.addEventListener("change", () => {
+                // A folder picked through `webkitdirectory` reports its tree through
+                // each file's webkitRelativePath rather than through entries.
+                this.emitSelection(entriesFromFileList(Array.from(input.files ?? [])));
+                // Cleared so choosing the same folder twice in a row still fires.
+                input.value = "";
+            });
+        }
     }
     /**
      * Report a selection.
@@ -213,13 +364,21 @@ export class DropZone extends BaseElement {
         this.zoneEl.dataset.dragging = String(this.dragging);
         this.labelEl.textContent = this.label;
         this.messageEl.textContent = this.message;
-        // webkitdirectory turns the browse dialog into a folder picker. It is a
-        // property as well as an attribute, and only the property is honoured
-        // reliably once the input exists.
+        // Hidden rather than left empty, so it does not open a gap in the stack.
+        this.messageEl.hidden = this.message.trim() === "";
+        this.browseEl.textContent = this.browseLabel;
+        this.folderBrowseEl.textContent = this.folderLabel;
+        // The folder control is a second input rather than a mode on the first, so
+        // files and folders are both reachable instead of mutually exclusive.
         const directories = this.directories;
-        this.inputEl.toggleAttribute("webkitdirectory", directories);
-        this.inputEl.webkitdirectory = directories;
+        this.folderBrowseEl.hidden = !directories;
+        this.separatorEl.hidden = !directories;
+        // webkitdirectory is a property as well as an attribute, and only the
+        // property is honoured reliably once the input exists.
+        this.folderInputEl.webkitdirectory = true;
+        // A folder picker offers folders, so an extension filter would only mislead.
         this.inputEl.accept = this.accept;
+        this.illustrationEl.hidden = this.variant !== "hero";
     }
 }
 DropZone.register();

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;