@unofficialbox/box-open-elements 0.18.0 → 0.19.0

package/dist/patterns/content-sidebar/content-sidebar.js

@@ -25,6 +25,12 @@ const elementStyles = `
           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="sidebar"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/content-uploader/content-uploader.js

@@ -63,6 +63,12 @@ const elementStyles = `
           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="panel"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/diff/compare-view.js

@@ -18,6 +18,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;
+        }
+
         /*
          * The height a host sets on the element has to reach the scrollers, or
          * the panes size to their content, never overflow, and the scroll lock

package/dist/patterns/diff/diff-viewer.js

@@ -20,6 +20,12 @@ const elementStyles = `
           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="panel"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/file-request/file-request-builder.js

@@ -15,6 +15,12 @@ const elementStyles = `
           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="builder"] {
           display: grid;
           gap: 0.6rem;

package/dist/patterns/form-wizard/form-wizard.js

@@ -25,6 +25,12 @@ const elementStyles = `
           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="wizard"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/form-wizard/wizard-summary.js

@@ -13,6 +13,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="card"] {
           border: ${boePanel.border};
           border-radius: ${boePanel.radius};

package/dist/patterns/governance/governance-panel.js

@@ -15,6 +15,12 @@ const elementStyles = `
           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="panel"] {
           display: grid;
           gap: 0.6rem;

package/dist/patterns/insights/bar-chart.js

@@ -14,6 +14,12 @@ const elementStyles = `
           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="panel"] {
           display: grid;
           gap: 0.6rem;

package/dist/patterns/insights/chart-panel.js

@@ -15,6 +15,12 @@ const elementStyles = `
           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="panel"] {
           display: grid;
           gap: 0.6rem;

package/dist/patterns/insights/donut-chart.js

@@ -16,6 +16,12 @@ const elementStyles = `
           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="panel"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/insights/line-chart.js

@@ -14,6 +14,12 @@ const elementStyles = `
           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="panel"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/insights/metric-card.js

@@ -15,6 +15,12 @@ const elementStyles = `
           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: ${boePanel.gap};

package/dist/patterns/item/bulk-action-bar.js

@@ -24,6 +24,12 @@ const elementStyles = `
           --_obp-brand-soft: color-mix(in srgb, var(--_obp-brand) 12%, var(--boe-token-surface-surface, #ffffff) 88%);
         }
 
+        /* 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="bar"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/item/item-details-panel.js

@@ -23,6 +23,12 @@ const elementStyles = `
           --_obp-brand-soft: color-mix(in srgb, var(--_obp-brand) 12%, var(--boe-token-surface-surface, #ffffff) 88%);
         }
 
+        /* 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="panel"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/item/item-form.js

@@ -16,6 +16,12 @@ const elementStyles = `
           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="form"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/item/preview-header.js

@@ -23,6 +23,12 @@ const elementStyles = `
           --_obp-brand-soft: color-mix(in srgb, var(--_obp-brand) 12%, var(--boe-token-surface-surface, #ffffff) 88%);
         }
 
+        /* 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="header"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/lineage/lineage-graph.js

@@ -39,6 +39,12 @@ const elementStyles = `
           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;
+        }
+
         section[part="panel"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/lineage/provenance-strip.js

@@ -21,6 +21,12 @@ const elementStyles = `
           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;
+        }
+
         /* Read as a flow diagram rather than a breadcrumb. The anatomy is
            React Flow's, taken from its stylesheet: nodes are bordered boxes
            with a small radius (not pills), ports are 6px circles sitting on

package/dist/patterns/metadata/metadata-filter-builder.js

@@ -20,6 +20,12 @@ const builderStyles = `
     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="builder"] {
     display: grid;
     gap: ${boePanel.gap};

package/dist/patterns/metadata/metadata-inspector.js

@@ -15,6 +15,12 @@ const elementStyles = `
           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="inspector"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/notifications/notification-bell.js

@@ -18,6 +18,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="trigger"] {
           position: relative;
           appearance: none;

package/dist/patterns/notifications/notification-inbox.js

@@ -21,6 +21,12 @@ const elementStyles = `
           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="panel"] {
           display: grid;
           grid-template-rows: auto auto 1fr;

package/dist/patterns/preview/annotation-inspector.js

@@ -22,6 +22,12 @@ const elementStyles = `
           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="panel"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/preview/annotation-toolbar.js

@@ -23,6 +23,12 @@ const elementStyles = `
           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: grid;
           gap: 0.5rem;

package/dist/patterns/preview/preview-element.js

@@ -23,6 +23,12 @@ const elementStyles = `
           --_obp-error: var(--boe-token-surface-status-surface-error, #ed3757);
         }
 
+        /* 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;
           gap: 0.6rem;

package/dist/patterns/run/run-trace.js

@@ -33,6 +33,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="panel"] {
           border: ${boePanel.border};
           border-radius: ${boePanel.radius};

package/dist/patterns/search/filter-bar.js

@@ -25,6 +25,12 @@ const elementStyles = `
           --_obp-brand-soft: color-mix(in srgb, var(--_obp-brand) 12%, var(--boe-token-surface-surface, #ffffff) 88%);
         }
 
+        /* 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="bar"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/search/saved-view-picker.js

@@ -23,6 +23,12 @@ const elementStyles = `
           --_obp-brand-soft: color-mix(in srgb, var(--_obp-brand) 12%, var(--boe-token-surface-surface, #ffffff) 88%);
         }
 
+        /* 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="picker"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/search/search-results-header.js

@@ -22,6 +22,12 @@ const elementStyles = `
           --_obp-brand-soft: color-mix(in srgb, var(--_obp-brand) 12%, var(--boe-token-surface-surface, #ffffff) 88%);
         }
 
+        /* 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="header"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/share/access-stats.js

@@ -64,6 +64,12 @@ const elementStyles = `
           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="stats"] {
           margin: 0;
           padding: ${boePanel.padding};

package/dist/patterns/share/collaborator-avatars.js

@@ -38,6 +38,12 @@ const elementStyles = `
           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: center;

package/dist/patterns/share/invite-collaborators-modal.js

@@ -7,6 +7,12 @@ const DEFAULT_TAG_NAME = "box-invite-collaborators-modal";
 const elementStyles = `
         :host { display: contents; color: inherit; 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="backdrop"] {
           position: fixed;
           inset: 0;

package/dist/patterns/share/permission-matrix.js

@@ -16,6 +16,12 @@ const matrixStyles = `
     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="matrix"] {
     display: grid;
     gap: ${boePanel.gap};

package/dist/patterns/share/presence.js

@@ -127,6 +127,12 @@ export class Presence extends BaseElement {
           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="presence"] {
           display: inline-flex;
           align-items: center;

package/dist/patterns/share/share-panel.js

@@ -16,6 +16,12 @@ const elementStyles = `
           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="panel"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/share/unified-share-modal.js

@@ -18,6 +18,12 @@ const accessLabel = (access) => ACCESS_OPTIONS.find(option => option.value === a
 const elementStyles = `
         :host { display: contents; color: inherit; 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="backdrop"] {
           position: fixed;
           inset: 0;

package/dist/patterns/signature/signature-ceremony.js

@@ -33,6 +33,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="card"] {
           border: ${boePanel.border};
           border-radius: ${boePanel.radius};

package/dist/patterns/task/review-queue-item.js

@@ -15,6 +15,12 @@ const elementStyles = `
           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: grid;
           gap: 0.6rem;

package/dist/patterns/task/task-assignment-panel.js

@@ -15,6 +15,12 @@ const elementStyles = `
           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="panel"] {
           display: grid;
           gap: 0.6rem;

package/dist/patterns/timeline/timeline.js

@@ -38,6 +38,12 @@ const elementStyles = `
           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="panel"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/versions/version-graph.js

@@ -28,6 +28,12 @@ const elementStyles = `
           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;
+        }
+
         section[part="panel"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/versions/version-list.js

@@ -17,6 +17,12 @@ const elementStyles = `
           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;
+        }
+
         section[part="panel"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/work-queue/work-queue.js

@@ -22,6 +22,12 @@ const elementStyles = `
           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;
+        }
+
         section[part="panel"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/work-queue/workload-board.js

@@ -28,6 +28,12 @@ const elementStyles = `
           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;
+        }
+
         section[part="panel"] {
           display: grid;
           gap: ${boePanel.gap};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unofficialbox/box-open-elements",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Box Open Elements: an open, framework-agnostic design system and web component library for Box-style experiences",
   "license": "MIT",
   "homepage": "https://unofficialbox.github.io/box-open-elements",