@unofficialbox/box-open-elements 0.17.0 → 0.19.0

package/dist/components/actions/button-group.js

@@ -15,6 +15,12 @@ const buttonGroupStyles = `
     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: inline-flex;
     align-items: stretch;

package/dist/components/actions/button.js

@@ -15,6 +15,12 @@ const buttonStyles = `
     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;
+  }
+
   button {
     appearance: none;
     box-sizing: border-box;

package/dist/components/actions/icon-button.js

@@ -16,6 +16,12 @@ const iconButtonStyles = `
     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="button"] {
     appearance: none;
     width: 2rem;

package/dist/components/actions/link-button.js

@@ -30,6 +30,12 @@ const linkButtonStyles = `
     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="link"] {
     display: inline-flex;
     align-items: center;

package/dist/components/actions/menu-item.js

@@ -10,6 +10,12 @@ const menuItemStyles = `
     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"] {
     width: 100%;
     appearance: none;

package/dist/components/actions/menu.js

@@ -17,6 +17,12 @@ const menuStyles = `
     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="menu"] {
     min-width: 11rem;
     margin: 0;

package/dist/components/actions/segmented-control.js

@@ -15,6 +15,12 @@ const segmentedControlStyles = `
     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="control"] {
     display: inline-flex;
     align-items: stretch;

package/dist/components/actions/toolbar.js

@@ -18,6 +18,12 @@ const toolbarStyles = `
     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="toolbar"] {
     display: flex;
     flex-wrap: wrap;

package/dist/components/collections/card.js

@@ -8,6 +8,12 @@ const cardStyles = `
     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="card"] {
     display: grid;
     gap: 0.55rem;

package/dist/components/collections/carousel.js

@@ -16,6 +16,12 @@ const carouselStyles = `
     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="carousel"] {
     display: grid;
     gap: 0.55rem;

package/dist/components/collections/datalist-item.js

@@ -9,6 +9,12 @@ const datalistItemStyles = `
     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/collections/draggable-list.js

@@ -15,6 +15,12 @@ const draggableListStyles = `
     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="list"] {
     list-style: none;
     margin: 0;

package/dist/components/collections/grid-view.js

@@ -34,6 +34,12 @@ const gridViewStyles = `
     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="grid"] {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));

package/dist/components/collections/pagination.js

@@ -10,6 +10,12 @@ const paginationStyles = `
     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="pagination"] {
     display: inline-flex;
     align-items: center;

package/dist/components/collections/table.js

@@ -22,6 +22,12 @@ const tableStyles = `
     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"] {
     border: ${boePanel.border};
     border-radius: ${boeRadius.large};

package/dist/components/collections/thumbnail-card.js

@@ -10,6 +10,12 @@ const thumbnailCardStyles = `
     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="card"] {
     display: grid;
     grid-template-rows: auto auto;

package/dist/components/collections/tree-grid.js

@@ -25,6 +25,12 @@ const treeGridStyles = `
     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="controls"] {
     display: flex;
     justify-content: flex-end;

package/dist/components/collections/tree.js

@@ -25,6 +25,12 @@ const treeStyles = `
     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 minmax(0, 1fr);

package/dist/components/feedback/alert.js

@@ -12,7 +12,7 @@ const alertStyles = `
   }
 
   :host([hidden]) {
-    display: none;
+    display: none !important;
   }
 
   /* The accent colours the glyph only. The tinted backgrounds below are pinned

package/dist/components/feedback/badge.js

@@ -55,7 +55,7 @@ const badgeStyles = `
 
   /* Hidden when used as a count that is zero/empty with hide-when-zero. */
   :host([hidden]) {
-    display: none;
+    display: none !important;
   }
 
   /* Count "pop" when the value changes (opt-in via the animate attribute). */

package/dist/components/feedback/badgeable.js

@@ -9,6 +9,12 @@ const badgeableStyles = `
     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="container"] {
     position: relative;
     display: inline-flex;

package/dist/components/feedback/chip.js

@@ -9,6 +9,12 @@ const chipStyles = `
     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="chip"] {
     display: inline-flex;
     align-items: center;

package/dist/components/feedback/due-badge.js

@@ -12,6 +12,12 @@ const elementStyles = `
           display: inline-block;
         }
 
+        /* 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="badge"] {
           display: inline-flex;
           align-items: center;

package/dist/components/feedback/empty-state.js

@@ -10,6 +10,12 @@ const emptyStateStyles = `
     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="empty-state"] {
     display: grid;
     justify-items: center;

package/dist/components/feedback/error-mask.js

@@ -9,6 +9,12 @@ const errorMaskStyles = `
     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="error-mask"] {
     display: flex;
     flex-direction: column;

package/dist/components/feedback/help-text.js

@@ -8,6 +8,12 @@ const helpTextStyles = `
     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="help-text"] {
     display: flex;
     align-items: start;

package/dist/components/feedback/indicator.js

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

package/dist/components/feedback/nudge.js

@@ -9,6 +9,12 @@ const nudgeStyles = `
     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="nudge"] {
     display: flex;
     align-items: flex-start;

package/dist/components/feedback/path.js

@@ -67,6 +67,12 @@ const elementStyles = `
           display: block;
         }
 
+        /* 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="path"] {
           display: flex;
           flex-wrap: wrap;

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;

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/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.d.ts

@@ -5,8 +5,13 @@ export declare class DropZone extends BaseElement {
     private dragging;
     private zoneEl;
     private inputEl;
+    private folderInputEl;
     private labelEl;
     private messageEl;
+    private browseEl;
+    private folderBrowseEl;
+    private separatorEl;
+    private illustrationEl;
     get label(): string;
     set label(value: string);
     get message(): string;
@@ -14,15 +19,31 @@ export declare class DropZone extends BaseElement {
     get description(): string;
     set description(value: string);
     /**
-     * Make the browse dialog pick a folder rather than files.
+     * Offer folder selection from the browse controls as well as files.
      *
-     * 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.
+     * 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 whatever this is set to.
      */
     get directories(): boolean;
     set directories(value: boolean);
+    /** Text of the file-browse control. */
+    get browseLabel(): string;
+    set browseLabel(value: string);
+    /** Text of the folder-browse control, shown only when `directories` is set. */
+    get folderLabel(): string;
+    set folderLabel(value: string);
+    /**
+     * `"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(): string;
+    set variant(value: string);
     /**
      * What the browse dialog offers, in the `<input accept>` syntax —
      * `".pdf,.docx"` or `"image/*"`.