npm - @unofficialbox/box-open-elements - Versions diffs - 0.18.0 → 0.19.0 - Mend

@unofficialbox/box-open-elements 0.18.0 → 0.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (143) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/dist/components/feedback/nudge.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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;