@threadlabs/looma 0.32.0 → 0.33.0

package/components/ui-switch/ui-switch.html

@@ -53,12 +53,19 @@
 
     :host {
       /* Hooks do not inherit, so the parts below read them from the root. */
-      --_ui-switch-track-width: var(--ui-switch-track-width);
-      --_ui-switch-track-height: var(--ui-switch-track-height);
-
-      display: inline-flex;
-      align-items: flex-start;
-      gap: var(--ui-switch-gap, var(--ui-space-2));
+      --_ui-switch-track-width: var(--ui-switch-track-width, var(--ui-choice-track-width));
+      --_ui-switch-track-height: var(--ui-switch-track-height, var(--ui-choice-track-height));
+
+      --_thumb: calc(var(--_ui-switch-track-height) * 2 / 3);
+      --_inset: calc((var(--_ui-switch-track-height) - var(--_thumb)) / 2 - var(--ui-border-width));
+
+      display: inline-flex !important;
+      align-items: flex-start !important;
+      flex-direction: row !important;
+      flex-wrap: nowrap !important;
+      padding: 0 !important;
+      line-height: var(--ui-line-height-md) !important;
+      gap: var(--ui-switch-gap, var(--ui-space-2)) !important;
       max-inline-size: 100%;
       color: var(--ui-text-primary);
       cursor: pointer;
@@ -66,15 +73,21 @@
 
     /* The label, and under it an optional line saying what the choice means. */
     .text {
-      display: flex;
-      flex-direction: column;
-      gap: var(--ui-space-1);
+      font: inherit !important;
+      align-self: auto !important;
+      margin: 0 !important;
+      padding: 0 !important;
+      display: flex !important;
+      flex-direction: column !important;
+      gap: var(--ui-space-1) !important;
       min-inline-size: 0;
     }
 
     .label {
       min-inline-size: 0;
-      line-height: var(--ui-line-height-md);
+      font: inherit !important;
+      line-height: var(--ui-line-height-md) !important;
+      padding-block: max(0px, calc((var(--_ui-switch-track-height, 1.5rem) - 1lh) / 2)) !important;
     }
 
     .description {
@@ -84,33 +97,36 @@
     }
 
     .description:empty {
-      display: none;
+      display: none !important;
     }
 
     input {
+      font: inherit !important;
+      box-sizing: border-box !important;
+      align-self: auto !important;
       appearance: none;
       -webkit-appearance: none;
       position: relative;
       flex: 0 0 auto;
       width: var(--_ui-switch-track-width, 2.5rem);
       height: var(--_ui-switch-track-height, 1.5rem);
-      padding: 0;
+      padding: 0 !important;
       border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
       border-radius: var(--ui-radius-round);
       background-color: var(--ui-control-surface, var(--ui-surface-default));
       box-shadow: var(--ui-control-inset);
       cursor: pointer;
       transition: background-color var(--ui-motion-base) var(--ui-motion-ease), border-color var(--ui-motion-base) var(--ui-motion-ease);
-      margin: 0;
+      margin: max(0px, calc((1lh - var(--_ui-switch-track-height, 1.5rem)) / 2)) 0 0 !important;
     }
 
     input::after {
       content: "";
       position: absolute;
-      top: 3px;
-      left: 3px;
-      width: 1rem;
-      height: 1rem;
+      top: var(--_inset);
+      left: var(--_inset);
+      width: var(--_thumb);
+      height: var(--_thumb);
       border-radius: var(--ui-radius-round);
       background: var(--ui-text-secondary);
       box-shadow: var(--ui-shadow-xs);
@@ -123,7 +139,7 @@
     }
 
     input:checked::after {
-      transform: translateX(1rem);
+      transform: translateX(calc(var(--_ui-switch-track-width) - var(--_ui-switch-track-height)));
       background: var(--ui-text-on-accent);
     }
 
@@ -174,13 +190,7 @@
     :host([size="lg"]) {
       --_line: calc(var(--_font) * var(--ui-line-height-md));
       font-size: var(--_font);
-      padding-block: calc((var(--_row) - var(--ui-switch-track-height, 1.5rem)) / 2);
-    }
-
-    /* The label centres on the track. */
-    :host([size="sm"]) .text,
-    :host([size="lg"]) .text {
-      margin-top: calc((var(--_ui-switch-track-height, 1.5rem) - var(--_line)) / 2);
+      padding-block: max(0px, calc((var(--_row) - max(var(--_line), var(--_ui-switch-track-height, 1.5rem))) / 2)) !important;
     }
 
     @media (pointer: coarse) {
@@ -191,7 +201,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-switcher/ui-switcher.html

@@ -32,12 +32,12 @@
       /* Lays its children out from its own box: below the threshold each track takes the full width;
          at or above it, tracks shrink to 1px so every child fits one row and empty tracks collapse.
          The large multiplier makes the whole row flip at once. */
-      display: grid;
+      display: grid !important;
       grid-template-columns: repeat(auto-fit, minmax(var(--_switcher-track), 1fr));
-      gap: var(--ui-switcher-gap, var(--_switcher-gap));
+      gap: var(--ui-switcher-gap, var(--_switcher-gap)) !important;
       min-inline-size: 0;
       max-inline-size: 100%;
-      margin: 0;
+      margin: 0 !important;
     }
 
     :host(:state(overLimit)) {
@@ -69,18 +69,18 @@
       --_switcher-threshold: 60rem;
     }
     :host([align="start"]) {
-      align-items: start;
+      align-items: start !important;
     }
     :host([align="center"]) {
-      align-items: center;
+      align-items: center !important;
     }
     :host([align="end"]) {
-      align-items: end;
+      align-items: end !important;
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-table/ui-table.html

@@ -19,8 +19,8 @@
       --_pad-block: var(--ui-space-1);
       --_pad-inline: var(--ui-space-3);
       --_row-size: var(--ui-control-size);
-      display: block;
-      box-sizing: border-box;
+      display: block !important;
+      box-sizing: border-box !important;
       max-inline-size: 100%;
       min-inline-size: 0;
       min-block-size: 0;
@@ -73,7 +73,7 @@
     }
 
     :slotted(caption) {
-      padding-block-end: var(--ui-space-2);
+      padding-block-end: var(--ui-space-2) !important;
       color: var(--ui-text-secondary);
       font-weight: var(--ui-font-medium);
       text-align: start;
@@ -84,7 +84,7 @@
     :slotted(th),
     :slotted(td) {
       block-size: var(--_row-size);
-      padding: var(--_pad-block) var(--_pad-inline);
+      padding: var(--_pad-block) var(--_pad-inline) !important;
       border-block-end: var(--ui-border-width) solid var(--ui-border-subtle);
       text-align: start;
       vertical-align: middle;
@@ -92,7 +92,7 @@
 
     :slotted(thead th) {
       block-size: auto;
-      padding-block: var(--ui-space-2);
+      padding-block: var(--ui-space-2) !important;
       border-block-end-color: var(--ui-border-divider);
       background: var(--ui-surface);
       color: var(--ui-text-muted);
@@ -125,7 +125,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-tabs/ui-tabs.html

@@ -5,8 +5,8 @@
     <prop name="label" type="string" default="Tabs"
     >The tab list's accessible name, announced when focus enters the list. Name what the tabs switch between.</prop>
     <prop name="value" type="string" default=""
-    >The id or authored data-value of the selected panel, initially or when set externally; empty selects the first panel. Choosing a tab updates it from there and reports a select
-      event. A panel without an id is given a generated one.</prop>
+    >The id or authored data-value of the selected panel, initially or when set externally; empty selects the first panel. Choosing a tab updates it from there
+      and reports a select event. A panel without an id is given a generated one.</prop>
     <prop name="orientation" type="keyword" values="horizontal, vertical" default="horizontal"
     >horizontal puts the tabs in a row above the panels, moved between with the Left and Right arrow keys; vertical puts them in a column beside the panels,
       moved between with Up and Down.</prop>
@@ -15,8 +15,9 @@
       displaying a panel takes time.</prop>
     <prop name="stretch" type="boolean" default="false">Share the full width of the tab list equally between tabs instead of sizing each to its label.</prop>
     <prop name="group" type="string" default=""
-    >Tabs with the same nonempty group share one selection: choosing a tab selects the tab with the same data-value (or label when no value is authored) in every other Tabs of that group in the
-      document, and the choice is remembered for the next visit. Use it for alternatives a reader picks once, such as a package manager or language.</prop>
+    >Tabs with the same nonempty group share one selection: choosing a tab selects the tab with the same data-value (or label when no value is authored) in
+      every other Tabs of that group in the document, and the choice is remembered for the next visit. Use it for alternatives a reader picks once, such as a
+      package manager or language.</prop>
     <state type="string" name="internalValue" value=""></state>
     <state name="tabs" type="list(object({ id: string, label: string }))" value="[]"></state>
     <event name="select" type="object">
@@ -78,16 +79,16 @@
     }
 
     :host {
-      display: grid;
+      display: grid !important;
       inline-size: 100%;
       min-inline-size: 0;
     }
 
     .list {
-      display: grid;
+      display: grid !important;
       grid-auto-flow: column;
       grid-auto-columns: max-content;
-      justify-content: start;
+      justify-content: start !important;
       inline-size: 100%;
       max-inline-size: 100%;
       /* Tabs that do not fit scroll sideways rather than wrapping or squeezing. */
@@ -103,8 +104,8 @@
     .list button,
     .list > :slotted(button[slot="tab"]) {
       min-block-size: var(--_ui-tabs-tab-min-block-size, var(--_tab-min-block-size));
-      margin: 0 0 calc(-1 * var(--ui-border-width));
-      padding: var(--_ui-tabs-tab-padding-block, var(--_tab-padding-block)) var(--_ui-tabs-tab-padding-inline, var(--_tab-padding-inline));
+      margin: 0 0 calc(-1 * var(--ui-border-width)) !important;
+      padding: var(--_ui-tabs-tab-padding-block, var(--_tab-padding-block)) var(--_ui-tabs-tab-padding-inline, var(--_tab-padding-inline)) !important;
       border: 0;
       border-block-end: var(--ui-accent-line-width) solid transparent;
       background: transparent;
@@ -125,9 +126,9 @@
     @supports (text-box-trim: trim-both) {
       .list button,
       .list > :slotted(button[slot="tab"]) {
-        display: block;
+        display: block !important;
         text-align: center;
-        align-content: center;
+        align-content: center !important;
         text-box-trim: trim-both;
         text-box-edge: cap alphabetic;
       }
@@ -164,12 +165,12 @@
       min-inline-size: 0;
     }
     .panels > :slotted(*) {
-      padding: var(--ui-space-4);
+      padding: var(--ui-space-4) !important;
     }
 
     :host([orientation="vertical"]) {
       grid-template-columns: max-content minmax(0, 1fr);
-      align-items: start;
+      align-items: start !important;
     }
 
     :host([orientation="vertical"]) .list {
@@ -181,7 +182,7 @@
 
     :host([orientation="vertical"]) .list button,
     :host([orientation="vertical"]) .list > :slotted(button[slot="tab"]) {
-      margin: 0 calc(-1 * var(--ui-border-width)) 0 0;
+      margin: 0 calc(-1 * var(--ui-border-width)) 0 0 !important;
       border-block-end: 0;
       border-inline-end: var(--ui-accent-line-width) solid transparent;
       text-align: start;
@@ -201,7 +202,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-text/ui-text.html

@@ -48,7 +48,7 @@
     }
 
     :host {
-      margin: 0;
+      margin: 0 !important;
       min-inline-size: 0;
       color: var(--ui-text-primary);
       text-align: start;
@@ -57,6 +57,7 @@
     /* A heading drops the browser's heading size and weight, so size and weight set it as they set
        any text, and inherit keeps the text around it. */
     :host:is(h2, h3, h4, h5, h6) {
+      font-family: var(--ui-font-display, inherit);
       font-size: inherit;
       font-weight: inherit;
     }
@@ -163,7 +164,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-textarea/ui-textarea.html

@@ -79,15 +79,15 @@
     }
 
     :host {
-      box-sizing: border-box;
-      display: inline-block;
+      box-sizing: border-box !important;
+      display: inline-block !important;
       inline-size: 100%;
       min-inline-size: 0;
       min-block-size: calc(3rem * 2);
-      margin: 0;
+      margin: 0 !important;
       --_padding-block: var(--ui-space-2);
-      padding: var(--ui-space-2) var(--ui-space-3);
-      padding-inline-end: var(--ui-textarea-padding-inline-end, var(--_ui-default-textarea-padding-inline-end, var(--ui-space-3)));
+      padding: var(--ui-space-2) var(--ui-space-3) !important;
+      padding-inline-end: var(--ui-textarea-padding-inline-end, var(--_ui-default-textarea-padding-inline-end, var(--ui-space-3))) !important;
       appearance: none;
       resize: vertical;
       border: var(--ui-textarea-border-width, var(--_ui-default-textarea-border-width, var(--ui-border-width))) solid
@@ -155,15 +155,15 @@
 
     :host([size="sm"]) {
       --_padding-block: var(--ui-space-1);
-      padding: var(--ui-space-1) var(--ui-space-2);
-      padding-inline-end: var(--ui-textarea-padding-inline-end, var(--_ui-default-textarea-padding-inline-end, var(--ui-space-2)));
+      padding: var(--ui-space-1) var(--ui-space-2) !important;
+      padding-inline-end: var(--ui-textarea-padding-inline-end, var(--_ui-default-textarea-padding-inline-end, var(--ui-space-2))) !important;
       font-size: var(--ui-font-size-sm);
     }
 
     :host([size="lg"]) {
       --_padding-block: var(--ui-space-3);
-      padding: var(--ui-space-3) var(--ui-space-4);
-      padding-inline-end: var(--ui-textarea-padding-inline-end, var(--_ui-default-textarea-padding-inline-end, var(--ui-space-4)));
+      padding: var(--ui-space-3) var(--ui-space-4) !important;
+      padding-inline-end: var(--ui-textarea-padding-inline-end, var(--_ui-default-textarea-padding-inline-end, var(--ui-space-4))) !important;
       font-size: var(--ui-font-size-md);
     }
 
@@ -187,7 +187,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-toast/ui-toast.html

@@ -47,15 +47,15 @@
       --_ui-toast-accent: var(--ui-border-strong);
       --_ui-toast-surface: var(--ui-surface-muted);
 
-      display: flex;
-      align-items: center;
-      gap: var(--ui-space-2);
-      box-sizing: border-box;
+      display: flex !important;
+      align-items: center !important;
+      gap: var(--ui-space-2) !important;
+      box-sizing: border-box !important;
       inline-size: 100%;
-      margin: 0;
-      padding: var(--ui-space-3) var(--ui-space-4);
+      margin: 0 !important;
+      padding: var(--ui-space-3) var(--ui-space-4) !important;
       /* The close button's internal space supplies the rest of the trailing inset. */
-      padding-inline-end: var(--ui-space-2);
+      padding-inline-end: var(--ui-space-2) !important;
       border: var(--ui-border-width) solid var(--ui-toast-border, var(--ui-overlay-border, var(--ui-toast-accent, var(--_ui-toast-accent))));
       border-radius: var(--ui-toast-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
       background: var(--ui-toast-surface, var(--ui-overlay-surface, var(--_ui-toast-surface)));
@@ -90,10 +90,10 @@
       flex: 1;
     }
     .action:not(:has(> *)) {
-      display: none;
+      display: none !important;
     }
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-toast-region/ui-toast-region.html

@@ -93,13 +93,13 @@
       left: 50%;
       transform: translateX(-50%);
       z-index: 9999;
-      display: grid;
-      gap: var(--ui-space-2);
+      display: grid !important;
+      gap: var(--ui-space-2) !important;
       inline-size: min(24rem, calc(100vw - var(--ui-space-4) * 2));
       max-inline-size: 100%;
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
+      box-sizing: border-box !important;
+      margin: 0 !important;
+      padding: 0 !important;
       overflow: visible;
       border: 0;
       outline: 0;
@@ -109,7 +109,7 @@
     }
 
     :host:not(:popover-open) {
-      display: none;
+      display: none !important;
     }
 
     :host([placement="top-start"]),
@@ -143,15 +143,15 @@
     .toast {
       --_ui-toast-region-accent: var(--ui-border-strong);
       --_ui-toast-region-tone-surface: var(--ui-surface-muted);
-      display: grid;
+      display: grid !important;
       grid-template-columns: 1fr auto;
-      gap: var(--ui-space-2);
-      align-items: start;
+      gap: var(--ui-space-2) !important;
+      align-items: start !important;
       border: var(--ui-border-width) solid var(--_ui-toast-region-border, var(--ui-overlay-border, var(--_ui-toast-region-accent)));
       border-radius: var(--_ui-toast-region-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
-      padding: var(--ui-space-3) var(--ui-space-4);
+      padding: var(--ui-space-3) var(--ui-space-4) !important;
       /* The close button's internal space supplies the rest of the trailing inset. */
-      padding-inline-end: var(--ui-space-2);
+      padding-inline-end: var(--ui-space-2) !important;
       background: var(--_ui-toast-region-surface, var(--ui-overlay-surface, var(--_ui-toast-region-tone-surface)));
       color: var(--ui-text-primary);
       font-family: var(--ui-font-family-sans);
@@ -254,7 +254,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-tooltip/ui-tooltip.html

@@ -94,10 +94,10 @@
 
       position: fixed;
       inset: auto;
-      margin: 0;
-      display: inline-block;
-      box-sizing: border-box;
-      padding: 0;
+      margin: 0 !important;
+      display: inline-block !important;
+      box-sizing: border-box !important;
+      padding: 0 !important;
       border: 0;
       outline: 0;
       border-radius: 0;
@@ -117,16 +117,16 @@
     .surface {
       --_tooltip-line: var(--_ui-tooltip-border, var(--ui-overlay-border, var(--ui-border-strong)));
       position: relative;
-      display: flex;
-      align-items: baseline;
-      gap: var(--ui-space-2);
-      box-sizing: border-box;
+      display: flex !important;
+      align-items: baseline !important;
+      gap: var(--ui-space-2) !important;
+      box-sizing: border-box !important;
       max-inline-size: var(--_ui-tooltip-max-inline-size, 18rem);
       border: var(--ui-border-width) solid var(--_tooltip-line);
       border-radius: var(--_ui-tooltip-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
       background: var(--_ui-tooltip-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
       color: var(--_ui-tooltip-text, var(--ui-text-primary));
-      padding: var(--ui-space-2) var(--ui-space-3);
+      padding: var(--ui-space-2) var(--ui-space-3) !important;
       font-family: var(--ui-font-family-sans);
       font-size: var(--ui-font-size-sm);
       line-height: var(--ui-line-height-tight);
@@ -136,9 +136,9 @@
     /* A keyboard shortcut follows the label after a thin divider, smaller and quieter, as menus show
        it. The label stays first in the description, so a screen reader hears the name, then the keys. */
     .shortcut {
-      display: inline-flex;
-      align-items: center;
-      padding-inline-start: var(--ui-space-2);
+      display: inline-flex !important;
+      align-items: center !important;
+      padding-inline-start: var(--ui-space-2) !important;
       border-inline-start: 1px solid color-mix(in oklab, currentColor 28%, transparent);
       color: color-mix(in oklab, currentColor 72%, transparent);
       font-size: var(--ui-font-size-xs);
@@ -148,7 +148,7 @@
     }
 
     .shortcut:empty {
-      display: none;
+      display: none !important;
     }
 
     /* A <kbd> takes the browser's monospace; the hint reads in the tooltip's own type. */
@@ -172,7 +172,7 @@
       inset-block-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2);
       inline-size: var(--_ui-tooltip-arrow-size, 0.625rem);
       block-size: var(--_ui-tooltip-arrow-size, 0.625rem);
-      box-sizing: border-box;
+      box-sizing: border-box !important;
       background: inherit;
       border: 0 solid var(--_tooltip-line);
       border-inline-end-width: var(--ui-border-width);
@@ -246,7 +246,7 @@
     }
 
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
 
     @media (prefers-reduced-motion: reduce) {

package/components/ui-top-bar/ui-top-bar.html

@@ -44,12 +44,12 @@
       inset-block-start: 0;
       z-index: var(--ui-top-bar-z-index, 100);
       min-block-size: calc(var(--ui-top-bar-height, 56px) + env(safe-area-inset-top));
-      display: flex;
-      align-items: center;
-      gap: var(--ui-top-bar-gap, var(--ui-space-3));
-      padding-block-start: env(safe-area-inset-top);
-      padding-inline-start: max(var(--ui-top-bar-padding-inline, var(--ui-space-4)), env(safe-area-inset-left));
-      padding-inline-end: max(var(--ui-top-bar-padding-inline, var(--ui-space-4)), env(safe-area-inset-right));
+      display: flex !important;
+      align-items: center !important;
+      gap: var(--ui-top-bar-gap, var(--ui-space-3)) !important;
+      padding-block-start: env(safe-area-inset-top) !important;
+      padding-inline-start: max(var(--ui-top-bar-padding-inline, var(--ui-space-4)), env(safe-area-inset-left)) !important;
+      padding-inline-end: max(var(--ui-top-bar-padding-inline, var(--ui-space-4)), env(safe-area-inset-right)) !important;
       background: var(--ui-top-bar-surface, var(--ui-surface-elevated));
       border-block-end: var(--ui-border-width) solid var(--ui-top-bar-border, var(--ui-border-divider));
     }
@@ -57,13 +57,13 @@
     .leading,
     .search,
     .actions {
-      display: flex;
-      align-items: center;
+      display: flex !important;
+      align-items: center !important;
       flex-shrink: 0;
     }
 
     .actions {
-      gap: var(--_ui-top-bar-actions-gap, var(--ui-space-1));
+      gap: var(--_ui-top-bar-actions-gap, var(--ui-space-1)) !important;
     }
 
     .title {
@@ -75,12 +75,12 @@
     .leading:empty,
     .search:empty,
     .actions:empty {
-      display: none;
+      display: none !important;
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-tree/ui-tree.html

@@ -95,22 +95,22 @@
       --_ui-default-tree-item-min-block-size: initial;
       --_ui-default-tree-item-font-size: initial;
       --_ui-default-tree-item-label-padding-block: initial;
-      display: block;
+      display: block !important;
       min-inline-size: 0;
-      padding-inline-start: var(--ui-tree-gutter, 0px);
+      padding-inline-start: var(--ui-tree-gutter, 0px) !important;
     }
 
     :host[data-move-mode]::after {
       content: "Choose a destination row, or use Up and Down; Right nests inside a branch. Enter places it, Escape cancels.";
-      display: block;
-      padding: var(--ui-space-2);
+      display: block !important;
+      padding: var(--ui-space-2) !important;
       color: var(--ui-text-secondary);
       font-size: var(--ui-font-size-sm);
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>