@threadlabs/looma 0.32.0 → 0.33.0

package/vue/UiSpinner.vue

@@ -279,11 +279,11 @@ const hostState = computed(() =>
 
 @scope (.ui-spinner) to ([data-hn]) {
   :global(:scope) {
-    display: inline-flex;
+    display: inline-flex !important;
     flex: none;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
+    align-items: center !important;
+    justify-content: center !important;
+    box-sizing: border-box !important;
     inline-size: 1em;
     block-size: 1em;
     color: currentColor;
@@ -296,7 +296,7 @@ const hostState = computed(() =>
   }
 
   :global(svg) {
-    display: block;
+    display: block !important;
     inline-size: 100%;
     block-size: 100%;
     animation: ui-spinner-rotate 2s linear infinite;
@@ -324,7 +324,7 @@ const hostState = computed(() =>
     }
   }
   :global(:scope[hidden]) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiStack.vue

@@ -191,13 +191,13 @@ const hostState = computed(() =>
 @scope (.ui-stack) to ([data-hn]) {
   :global(:scope:where([data-hn-ui-stack])) {
     --_layout-gap: var(--ui-space-4);
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    gap: var(--ui-stack-gap, var(--_layout-gap));
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: stretch !important;
+    gap: var(--ui-stack-gap, var(--_layout-gap)) !important;
     min-inline-size: 0;
     max-inline-size: 100%;
-    margin: 0;
+    margin: 0 !important;
   }
 
   :global(:scope[data-ui-stack-state~="fill"]:where([data-hn-ui-stack])) {
@@ -228,25 +228,25 @@ const hostState = computed(() =>
     --_layout-gap: var(--ui-space-6);
   }
   :global(:scope[data-ui-stack-state~="align=start"]:where([data-hn-ui-stack])) {
-    align-items: flex-start;
+    align-items: flex-start !important;
   }
   :global(:scope[data-ui-stack-state~="align=center"]:where([data-hn-ui-stack])) {
-    align-items: center;
+    align-items: center !important;
   }
   :global(:scope[data-ui-stack-state~="align=end"]:where([data-hn-ui-stack])) {
-    align-items: flex-end;
+    align-items: flex-end !important;
   }
   :global(:scope[data-ui-stack-state~="justify=center"]:where([data-hn-ui-stack])) {
-    justify-content: center;
+    justify-content: center !important;
   }
   :global(:scope[data-ui-stack-state~="justify=end"]:where([data-hn-ui-stack])) {
-    justify-content: flex-end;
+    justify-content: flex-end !important;
   }
   :global(:scope[data-ui-stack-state~="justify=between"]:where([data-hn-ui-stack])) {
-    justify-content: space-between;
+    justify-content: space-between !important;
   }
   :global(:scope[hidden]:where([data-hn-ui-stack])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiStatusMessage.vue

@@ -176,11 +176,11 @@ const hostState = computed(() =>
 
 @scope (.ui-status-message) to ([data-hn]) {
   :global(:scope:where([data-hn-ui-status-message])) {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--ui-space-2) var(--ui-space-4);
-    padding-block: var(--ui-space-4);
+    display: flex !important;
+    flex-wrap: wrap !important;
+    align-items: center !important;
+    gap: var(--ui-space-2) var(--ui-space-4) !important;
+    padding-block: var(--ui-space-4) !important;
     color: var(--ui-text-muted);
     font-size: var(--ui-font-size-md);
     line-height: var(--ui-line-height);
@@ -191,31 +191,31 @@ const hostState = computed(() =>
   }
 
   :global(:scope[data-ui-status-message-state~="layout=panel"]:where([data-hn-ui-status-message])) {
-    padding: var(--ui-space-6);
+    padding: var(--ui-space-6) !important;
     border: var(--ui-border-width) dashed var(--ui-border-strong);
     border-radius: var(--ui-radius-lg);
   }
 
   :global(:scope[data-ui-status-message-state~="layout=fill"]:where([data-hn-ui-status-message])) {
     flex: 1;
-    flex-direction: column;
-    justify-content: center;
+    flex-direction: column !important;
+    justify-content: center !important;
     min-block-size: 50vh;
     text-align: center;
   }
 
   :global(.copy:where([data-hn-ui-status-message])) {
-    display: flex;
+    display: flex !important;
     flex: 1 1 12rem;
-    flex-direction: column;
-    gap: var(--ui-space-1);
+    flex-direction: column !important;
+    gap: var(--ui-space-1) !important;
     min-inline-size: 0;
   }
 
   :global(:scope[data-ui-status-message-state~="layout=fill"]
     .copy:where([data-hn-ui-status-message])) {
     flex: none;
-    align-items: center;
+    align-items: center !important;
   }
 
   :global(.heading:where([data-hn-ui-status-message])) {
@@ -224,16 +224,16 @@ const hostState = computed(() =>
   }
 
   :global(.action:where([data-hn-ui-status-message])) {
-    display: inline-flex;
-    flex-wrap: wrap;
-    gap: var(--ui-space-2);
+    display: inline-flex !important;
+    flex-wrap: wrap !important;
+    gap: var(--ui-space-2) !important;
   }
 
   :global(.action:empty:where([data-hn-ui-status-message])) {
-    display: none;
+    display: none !important;
   }
   :global(:scope[hidden]:where([data-hn-ui-status-message])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiSwatch.vue

@@ -145,11 +145,11 @@ const hostState = computed(() =>
     --_text: var(--ui-text-secondary);
 
     appearance: none;
-    box-sizing: border-box;
+    box-sizing: border-box !important;
     flex: 0 0 auto;
     inline-size: var(--ui-swatch-size, 1.65rem);
     block-size: var(--ui-swatch-size, 1.65rem);
-    margin: 0;
+    margin: 0 !important;
     border: var(--ui-border-width) solid color-mix(in srgb, var(--_surface) 75%, var(--_text) 25%);
     border-radius: 50%;
     background: var(--_surface);

package/vue/UiSwitch.vue

@@ -311,33 +311,44 @@ useComponentHost(() => import('../components/ui-switch/ui-switch.js'), {
    and the first line centres in that control height, so the label shares a row's baseline.
    Multi-line labels and descriptions still grow downward from that first line. */
 
-/* The label centres on the track. */
-
 /* A component that sets its display still honours the hidden attribute on its root. */
 
 @scope (.ui-switch) to ([data-hn]) {
   :global(:scope:where([data-hn-ui-switch])) {
     /* 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);
+    --_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;
-    align-items: flex-start;
-    gap: var(--ui-switch-gap, var(--ui-space-2));
+    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;
   }
   :global(.text:where([data-hn-ui-switch])) {
-    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;
   }
 
   :global(.label:where([data-hn-ui-switch])) {
     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;
   }
 
   :global(.description:where([data-hn-ui-switch])) {
@@ -347,17 +358,20 @@ useComponentHost(() => import('../components/ui-switch/ui-switch.js'), {
   }
 
   :global(.description:empty:where([data-hn-ui-switch])) {
-    display: none;
+    display: none !important;
   }
 
   :global(input:where([data-hn-ui-switch])) {
+    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));
@@ -366,16 +380,16 @@ useComponentHost(() => import('../components/ui-switch/ui-switch.js'), {
     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;
   }
 
   :global(input:where([data-hn-ui-switch])::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);
@@ -390,7 +404,7 @@ useComponentHost(() => import('../components/ui-switch/ui-switch.js'), {
   }
 
   :global(input:checked:where([data-hn-ui-switch])::after) {
-    transform: translateX(1rem);
+    transform: translateX(calc(var(--_ui-switch-track-width) - var(--_ui-switch-track-height)));
     background: var(--ui-text-on-accent);
   }
 
@@ -437,11 +451,10 @@ useComponentHost(() => import('../components/ui-switch/ui-switch.js'), {
   :global(:scope[data-ui-switch-state~="size=lg"]:where([data-hn-ui-switch])) {
     --_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);
-  }
-  :global(:scope[data-ui-switch-state~="size=sm"] .text:where([data-hn-ui-switch])),
-  :global(:scope[data-ui-switch-state~="size=lg"] .text:where([data-hn-ui-switch])) {
-    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) {
@@ -450,7 +463,7 @@ useComponentHost(() => import('../components/ui-switch/ui-switch.js'), {
     }
   }
   :global(:scope[hidden]:where([data-hn-ui-switch])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiSwitcher.vue

@@ -219,12 +219,12 @@ useComponentHost(() => import('../components/ui-switcher/ui-switcher.js'), {
     /* 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;
   }
 
   :global(:scope[data-ui-switcher-state~="overLimit"]:where([data-hn-ui-switcher])) {
@@ -256,16 +256,16 @@ useComponentHost(() => import('../components/ui-switcher/ui-switcher.js'), {
     --_switcher-threshold: 60rem;
   }
   :global(:scope[data-ui-switcher-state~="align=start"]:where([data-hn-ui-switcher])) {
-    align-items: start;
+    align-items: start !important;
   }
   :global(:scope[data-ui-switcher-state~="align=center"]:where([data-hn-ui-switcher])) {
-    align-items: center;
+    align-items: center !important;
   }
   :global(:scope[data-ui-switcher-state~="align=end"]:where([data-hn-ui-switcher])) {
-    align-items: end;
+    align-items: end !important;
   }
   :global(:scope[hidden]:where([data-hn-ui-switcher])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiTable.vue

@@ -170,8 +170,8 @@ useComponentHost(() => import('../components/ui-table/ui-table.js'), {
     --_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;
@@ -226,7 +226,7 @@ useComponentHost(() => import('../components/ui-table/ui-table.js'), {
   }
 
   :global(:where(:not([data-hn-ui-table])):is(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;
@@ -234,7 +234,7 @@ useComponentHost(() => import('../components/ui-table/ui-table.js'), {
   :global(:where(:not([data-hn-ui-table])):is(th)),
   :global(:where(:not([data-hn-ui-table])):is(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;
@@ -242,7 +242,7 @@ useComponentHost(() => import('../components/ui-table/ui-table.js'), {
 
   :global(:where(:not([data-hn-ui-table])):is(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);
@@ -274,7 +274,7 @@ useComponentHost(() => import('../components/ui-table/ui-table.js'), {
     z-index: 1;
   }
   :global(:scope[hidden]:where([data-hn-ui-table])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiTabs.vue

@@ -52,7 +52,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'group' },
       description:
-        '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\n      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.',
+        '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\n      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\n      package manager or language.',
       default: '',
     },
     label: {
@@ -85,7 +85,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'value' },
       description:
-        '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\n      event. A panel without an id is given a generated one.',
+        '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\n      and reports a select event. A panel without an id is given a generated one.',
       default: '',
     },
   },
@@ -376,16 +376,16 @@ useComponentHost(() => import('../components/ui-tabs/ui-tabs.js'), {
   }
 
   :global(:scope:where([data-hn-ui-tabs])) {
-    display: grid;
+    display: grid !important;
     inline-size: 100%;
     min-inline-size: 0;
   }
 
   :global(.list:where([data-hn-ui-tabs])) {
-    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. */
@@ -401,9 +401,9 @@ useComponentHost(() => import('../components/ui-tabs/ui-tabs.js'), {
   :global(.list button:where([data-hn-ui-tabs])),
   :global(.list > :where(:not([data-hn-ui-tabs])):is(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));
+    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));
+      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;
@@ -420,9 +420,9 @@ useComponentHost(() => import('../components/ui-tabs/ui-tabs.js'), {
   @supports (text-box-trim: trim-both) {
     :global(.list button:where([data-hn-ui-tabs])),
     :global(.list > :where(:not([data-hn-ui-tabs])):is(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;
     }
@@ -460,12 +460,12 @@ useComponentHost(() => import('../components/ui-tabs/ui-tabs.js'), {
     min-inline-size: 0;
   }
   :global(.panels > :where(:not([data-hn-ui-tabs])):is(*)) {
-    padding: var(--ui-space-4);
+    padding: var(--ui-space-4) !important;
   }
 
   :global(:scope[data-ui-tabs-state~="orientation=vertical"]:where([data-hn-ui-tabs])) {
     grid-template-columns: max-content minmax(0, 1fr);
-    align-items: start;
+    align-items: start !important;
   }
 
   :global(:scope[data-ui-tabs-state~="orientation=vertical"] .list:where([data-hn-ui-tabs])) {
@@ -479,7 +479,7 @@ useComponentHost(() => import('../components/ui-tabs/ui-tabs.js'), {
   :global(:scope[data-ui-tabs-state~="orientation=vertical"]
     .list
     > :where(:not([data-hn-ui-tabs])):is(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;
@@ -501,7 +501,7 @@ useComponentHost(() => import('../components/ui-tabs/ui-tabs.js'), {
     }
   }
   :global(:scope[hidden]:where([data-hn-ui-tabs])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiText.vue

@@ -621,12 +621,13 @@ const hostState = computed(() =>
   }
 
   :global(:scope:where([data-hn-ui-text])) {
-    margin: 0;
+    margin: 0 !important;
     min-inline-size: 0;
     color: var(--ui-text-primary);
     text-align: start;
   }
   :global(:scope:is(h2, h3, h4, h5, h6):where([data-hn-ui-text])) {
+    font-family: var(--ui-font-display, inherit);
     font-size: inherit;
     font-weight: inherit;
   }
@@ -722,7 +723,7 @@ const hostState = computed(() =>
     overflow-wrap: anywhere;
   }
   :global(:scope[hidden]:where([data-hn-ui-text])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiTextarea.vue

@@ -367,18 +367,18 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
 
 @scope (.ui-textarea) to ([data-hn]) {
   :global(:scope) {
-    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: 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(
@@ -481,21 +481,21 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
 
   :global(:scope[data-ui-textarea-state~="size=sm"]) {
     --_padding-block: var(--ui-space-1);
-    padding: var(--ui-space-1) 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);
   }
 
   :global(:scope[data-ui-textarea-state~="size=lg"]) {
     --_padding-block: var(--ui-space-3);
-    padding: var(--ui-space-3) 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);
   }
 
@@ -520,7 +520,7 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
     }
   }
   :global(:scope[hidden]) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiToast.vue

@@ -225,15 +225,15 @@ useComponentHost(() => import('../components/ui-toast/ui-toast.js'), {
     --_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,
@@ -275,10 +275,10 @@ useComponentHost(() => import('../components/ui-toast/ui-toast.js'), {
     flex: 1;
   }
   :global(.action:not(:has(> *)):where([data-hn-ui-toast])) {
-    display: none;
+    display: none !important;
   }
   :global(:scope[hidden]:where([data-hn-ui-toast])) {
-    display: none;
+    display: none !important;
   }
 }
 @scope ([data-slotted~="ui-toast"]:not([data-hn])) to ([data-hn], [data-slotted]) {
@@ -286,15 +286,15 @@ useComponentHost(() => import('../components/ui-toast/ui-toast.js'), {
     --_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,
@@ -336,10 +336,10 @@ useComponentHost(() => import('../components/ui-toast/ui-toast.js'), {
     flex: 1;
   }
   :global(.action:not(:has(> *)):where(:scope, :scope *):where([data-hn-ui-toast])) {
-    display: none;
+    display: none !important;
   }
   :global(:where(.ui-toast)[hidden]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast"]))):where([data-hn-ui-toast])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>