@threadlabs/looma 0.32.1 → 0.33.0

package/vue/UiRadio.vue

@@ -312,25 +312,35 @@ useComponentHost(() => import('../components/ui-radio/ui-radio.js'), {
 @scope (.ui-radio) to ([data-hn]) {
   :global(:scope:where([data-hn-ui-radio])) {
     /* Hooks do not inherit, so the parts below read them from the root. */
-    --_ui-radio-size: var(--ui-radio-size);
+    --_ui-radio-size: var(--ui-radio-size, var(--ui-choice-mark-size));
 
-    display: inline-flex;
-    align-items: flex-start;
-    gap: var(--ui-radio-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-radio-gap, var(--ui-space-2)) !important;
     max-inline-size: 100%;
     color: var(--ui-text-primary);
     cursor: pointer;
   }
   :global(.text:where([data-hn-ui-radio])) {
-    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-radio])) {
     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-radio-size, 1.125rem) - 1lh) / 2)) !important;
   }
 
   :global(.description:where([data-hn-ui-radio])) {
@@ -340,14 +350,17 @@ useComponentHost(() => import('../components/ui-radio/ui-radio.js'), {
   }
 
   :global(.description:empty:where([data-hn-ui-radio])) {
-    display: none;
+    display: none !important;
   }
 
   :global(input:where([data-hn-ui-radio])) {
+    font: inherit !important;
+    box-sizing: border-box !important;
+    align-self: auto !important;
     flex: 0 0 auto;
     inline-size: var(--_ui-radio-size, 1.125rem);
     block-size: var(--_ui-radio-size, 1.125rem);
-    margin: calc(0.125em + 1px) 0 0;
+    margin: max(0px, calc((1lh - var(--_ui-radio-size, 1.125rem)) / 2)) 0 0 !important;
     accent-color: var(--ui-accent-solid);
     cursor: pointer;
   }
@@ -381,12 +394,10 @@ useComponentHost(() => import('../components/ui-radio/ui-radio.js'), {
   :global(:scope[data-ui-radio-state~="size=lg"]:where([data-hn-ui-radio])) {
     --_line: calc(var(--_font) * var(--ui-line-height-md));
     font-size: var(--_font);
-    padding-block: calc((var(--_row) - var(--_line)) / 2);
-  }
-
-  :global(:scope[data-ui-radio-state~="size=sm"] input:where([data-hn-ui-radio])),
-  :global(:scope[data-ui-radio-state~="size=lg"] input:where([data-hn-ui-radio])) {
-    margin-top: calc((var(--_line) - var(--_ui-radio-size, 1.125rem)) / 2 + 1px);
+    padding-block: max(
+      0px,
+      calc((var(--_row) - max(var(--_line), var(--_ui-radio-size, 1.125rem))) / 2)
+    ) !important;
   }
 
   @media (pointer: coarse) {
@@ -395,7 +406,7 @@ useComponentHost(() => import('../components/ui-radio/ui-radio.js'), {
     }
   }
   :global(:scope[hidden]:where([data-hn-ui-radio])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiRadioGroup.vue

@@ -358,20 +358,20 @@ useComponentHost(() => import('../components/ui-radio-group/ui-radio-group.js'),
       --ui-radio-group-invalid-text,
       var(--ui-field-danger, var(--ui-danger-solid))
     );
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ui-space-2);
+    display: inline-flex !important;
+    align-items: center !important;
+    gap: var(--ui-space-2) !important;
     min-inline-size: 0;
-    margin: 0;
-    padding: 0;
+    margin: 0 !important;
+    padding: 0 !important;
     border: 0;
   }
 
   :global(legend:where([data-hn-ui-radio-group])) {
     float: inline-start;
     inline-size: 100%;
-    margin: 0 0 var(--ui-space-2);
-    padding: 0;
+    margin: 0 0 var(--ui-space-2) !important;
+    padding: 0 !important;
     color: var(--ui-text-primary);
     font-weight: var(--ui-font-medium);
   }
@@ -394,11 +394,11 @@ useComponentHost(() => import('../components/ui-radio-group/ui-radio-group.js'),
   }
 
   :global(:scope[data-ui-radio-group-state~="orientation=vertical"]:where([data-hn-ui-radio-group])) {
-    display: inline-grid;
-    justify-items: start;
+    display: inline-grid !important;
+    justify-items: start !important;
   }
   :global(:scope[hidden]:where([data-hn-ui-radio-group])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiReel.vue

@@ -153,15 +153,15 @@ const hostState = computed(() =>
     --_reel-item-width: max-content;
     /* Sizes its children from its own box: one row of columns, each the item width, that never
        shrinks to fit, so the reel scrolls once they overflow. */
-    display: grid;
+    display: grid !important;
     grid-auto-flow: column;
     grid-auto-columns: var(--ui-reel-item-width, var(--_reel-item-width));
-    justify-content: start;
+    justify-content: start !important;
     inline-size: 100%;
-    gap: var(--ui-reel-gap, var(--_reel-gap));
+    gap: var(--ui-reel-gap, var(--_reel-gap)) !important;
     min-inline-size: 0;
     max-inline-size: 100%;
-    margin: 0;
+    margin: 0 !important;
     overflow-x: auto;
     overflow-y: hidden;
     overscroll-behavior-inline: contain;
@@ -227,7 +227,7 @@ const hostState = computed(() =>
     scroll-snap-align: center;
   }
   :global(:scope[hidden]:where([data-hn-ui-reel])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiScrollArea.vue

@@ -234,8 +234,8 @@ useComponentHost(() => import('../components/ui-scroll-area/ui-scroll-area.js'),
   }
 
   :global(:scope:where([data-hn-ui-scroll-area])) {
-    display: block;
-    box-sizing: border-box;
+    display: block !important;
+    box-sizing: border-box !important;
     min-block-size: 0;
     min-inline-size: 0;
     overflow-x: hidden;
@@ -254,18 +254,18 @@ useComponentHost(() => import('../components/ui-scroll-area/ui-scroll-area.js'),
   }
 
   :global(.content:where([data-hn-ui-scroll-area])) {
-    display: flow-root;
+    display: flow-root !important;
   }
   :global(:scope[data-ui-scroll-area-state~="trim"]
     .content
     > :where(:not([data-hn-ui-scroll-area])):is(:first-child)) {
-    margin-block-start: 0;
+    margin-block-start: 0 !important;
   }
 
   :global(:scope[data-ui-scroll-area-state~="trim"]
     .content
     > :where(:not([data-hn-ui-scroll-area])):is(:last-child)) {
-    margin-block-end: 0;
+    margin-block-end: 0 !important;
   }
 
   :global(:scope[data-ui-scroll-area-state~="orientation=horizontal"]:where([data-hn-ui-scroll-area])) {
@@ -289,19 +289,19 @@ useComponentHost(() => import('../components/ui-scroll-area/ui-scroll-area.js'),
   }
 
   :global(:scope[data-ui-scroll-area-state~="padding=xs"]:where([data-hn-ui-scroll-area])) {
-    padding: var(--ui-space-2);
+    padding: var(--ui-space-2) !important;
   }
   :global(:scope[data-ui-scroll-area-state~="padding=sm"]:where([data-hn-ui-scroll-area])) {
-    padding: var(--ui-space-3);
+    padding: var(--ui-space-3) !important;
   }
   :global(:scope[data-ui-scroll-area-state~="padding=md"]:where([data-hn-ui-scroll-area])) {
-    padding: var(--ui-space-5);
+    padding: var(--ui-space-5) !important;
   }
   :global(:scope[data-ui-scroll-area-state~="padding=lg"]:where([data-hn-ui-scroll-area])) {
-    padding: var(--ui-space-6);
+    padding: var(--ui-space-6) !important;
   }
   :global(:scope[hidden]:where([data-hn-ui-scroll-area])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiSearchResultRow.vue

@@ -195,12 +195,12 @@ const hostState = computed(() =>
     appearance: none;
     inline-size: 100%;
     min-block-size: var(--ui-search-result-row-min-height, 56px);
-    margin: 0;
-    padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-3));
-    padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-4));
-    display: flex;
-    align-items: flex-start;
-    gap: var(--ui-search-result-row-gap, var(--ui-space-3));
+    margin: 0 !important;
+    padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-3)) !important;
+    padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-4)) !important;
+    display: flex !important;
+    align-items: flex-start !important;
+    gap: var(--ui-search-result-row-gap, var(--ui-space-3)) !important;
     background: var(--ui-search-result-row-surface, transparent);
     border: var(--ui-border-width) solid var(--ui-search-result-row-border, transparent);
     border-radius: var(--ui-selection-radius);
@@ -212,10 +212,10 @@ const hostState = computed(() =>
 
   :global(:scope[data-ui-search-result-row-state~="density=compact"]:where([data-hn-ui-search-result-row])) {
     min-block-size: var(--ui-search-result-row-min-height, 3.125rem);
-    padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-1));
-    padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-2));
-    gap: var(--ui-search-result-row-gap, var(--ui-space-2));
-    align-items: center;
+    padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-1)) !important;
+    padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-2)) !important;
+    gap: var(--ui-search-result-row-gap, var(--ui-space-2)) !important;
+    align-items: center !important;
     font-family: var(--ui-font-family-sans, sans-serif);
   }
   :global(:scope[data-ui-search-result-row-state~="density=compact"]
@@ -258,36 +258,36 @@ const hostState = computed(() =>
 
   :global(.leading:where([data-hn-ui-search-result-row])),
   :global(.trailing:where([data-hn-ui-search-result-row])) {
-    display: inline-flex;
-    align-items: flex-start;
+    display: inline-flex !important;
+    align-items: flex-start !important;
     flex-shrink: 0;
   }
 
   :global(.content:where([data-hn-ui-search-result-row])) {
     min-inline-size: 0;
     flex: 1;
-    display: flex;
-    flex-direction: column;
+    display: flex !important;
+    flex-direction: column !important;
   }
 
   :global(.title:where([data-hn-ui-search-result-row])),
   :global(.meta:where([data-hn-ui-search-result-row])),
   :global(.excerpt:where([data-hn-ui-search-result-row])) {
-    display: block;
+    display: block !important;
     min-inline-size: 0;
   }
   :global(.leading:empty:where([data-hn-ui-search-result-row])),
   :global(.meta:empty:where([data-hn-ui-search-result-row])),
   :global(.excerpt:empty:where([data-hn-ui-search-result-row])),
   :global(.trailing:empty:where([data-hn-ui-search-result-row])) {
-    display: none;
+    display: none !important;
   }
 
   :global(:where(:not([data-hn-ui-search-result-row])):is([slot="title"])),
   :global(:where(:not([data-hn-ui-search-result-row])):is([slot="meta"])),
   :global(:where(:not([data-hn-ui-search-result-row])):is([slot="excerpt"])) {
-    display: block;
-    margin: 0;
+    display: block !important;
+    margin: 0 !important;
   }
 
   @media (forced-colors: active) {
@@ -297,7 +297,7 @@ const hostState = computed(() =>
     }
   }
   :global(:scope[hidden]:where([data-hn-ui-search-result-row])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiSearchShell.vue

@@ -289,22 +289,22 @@ useComponentHost(() => import('../components/ui-search-shell/ui-search-shell.js'
     --_ui-search-shell-shadow: var(--ui-search-shell-shadow);
     --_ui-search-shell-focus-color: var(--ui-search-shell-focus-color);
 
-    display: contents;
+    display: contents !important;
   }
 
   :global(dialog:where([data-hn-ui-search-shell])) {
     position: fixed;
     inset: 0;
     z-index: var(--_ui-search-shell-z-index, 400);
-    box-sizing: border-box;
+    box-sizing: border-box !important;
     inline-size: 100%;
     max-inline-size: none;
     block-size: 100%;
     max-block-size: none;
-    margin: 0;
+    margin: 0 !important;
     padding: var(--_ui-search-shell-padding-top, 10vh)
       var(--_ui-search-shell-viewport-gap, var(--ui-space-4))
-      var(--_ui-search-shell-viewport-gap, var(--ui-space-4));
+      var(--_ui-search-shell-viewport-gap, var(--ui-space-4)) !important;
     overflow: auto;
     border: 0;
     background: var(--ui-overlay-backdrop);
@@ -325,11 +325,11 @@ useComponentHost(() => import('../components/ui-search-shell/ui-search-shell.js'
 
   :global(.panel:where([data-hn-ui-search-shell])) {
     position: relative;
-    display: flex;
-    flex-direction: column;
+    display: flex !important;
+    flex-direction: column !important;
     inline-size: min(100%, var(--_ui-search-shell-max-width, 40rem));
     max-block-size: var(--_ui-search-shell-max-height, 80vh);
-    margin-inline: auto;
+    margin-inline: auto !important;
     overflow: hidden;
     background: var(
       --_ui-search-shell-surface,
@@ -348,14 +348,14 @@ useComponentHost(() => import('../components/ui-search-shell/ui-search-shell.js'
   }
 
   :global(.search:where([data-hn-ui-search-shell])) {
-    padding: var(--ui-space-3);
+    padding: var(--ui-space-3) !important;
   }
 
   :global(:where(:not([data-hn-ui-search-shell])):is(input[slot="search"])) {
-    box-sizing: border-box;
+    box-sizing: border-box !important;
     inline-size: 100%;
     min-block-size: var(--ui-control-min-block-size);
-    padding: var(--ui-space-2) var(--ui-space-3);
+    padding: var(--ui-space-2) var(--ui-space-3) !important;
     border: var(--ui-border-width) solid var(--ui-control-border);
     border-radius: var(--ui-field-radius, var(--ui-radius-md));
     background: var(--ui-control-surface);
@@ -373,33 +373,33 @@ useComponentHost(() => import('../components/ui-search-shell/ui-search-shell.js'
   :global(.status:where([data-hn-ui-search-shell])),
   :global(.actions:where([data-hn-ui-search-shell])) {
     flex-shrink: 0;
-    padding: var(--ui-space-2) var(--ui-space-4);
+    padding: var(--ui-space-2) var(--ui-space-4) !important;
     color: var(--ui-text-secondary);
     font-size: var(--ui-font-size-sm);
   }
 
   :global(.status:where([data-hn-ui-search-shell])) {
-    padding-block-start: 0;
+    padding-block-start: 0 !important;
   }
   :global(.actions:where([data-hn-ui-search-shell])) {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: flex-end;
-    gap: var(--ui-space-2);
-    padding: var(--ui-space-3) var(--ui-space-4);
+    display: flex !important;
+    flex-wrap: wrap !important;
+    align-items: center !important;
+    justify-content: flex-end !important;
+    gap: var(--ui-space-2) !important;
+    padding: var(--ui-space-3) var(--ui-space-4) !important;
   }
 
   :global(.status:empty:where([data-hn-ui-search-shell])),
   :global(.actions:empty:where([data-hn-ui-search-shell])) {
-    display: none;
+    display: none !important;
   }
 
   :global(.body:where([data-hn-ui-search-shell])) {
     flex: 1;
     min-block-size: 0;
     overflow: auto;
-    padding: var(--ui-space-2);
+    padding: var(--ui-space-2) !important;
     /* Each edge that hides content fades: the scroll fade every Looma scroller uses (see ui-scroll-area). */
     --_ui-scroll-fade-direction: to bottom;
     --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
@@ -425,7 +425,7 @@ useComponentHost(() => import('../components/ui-search-shell/ui-search-shell.js'
 
   @media (max-width: 47.9375rem) {
     :global(dialog:where([data-hn-ui-search-shell])) {
-      padding: 0;
+      padding: 0 !important;
     }
 
     :global(.panel:where([data-hn-ui-search-shell])) {
@@ -437,7 +437,7 @@ useComponentHost(() => import('../components/ui-search-shell/ui-search-shell.js'
     }
   }
   :global(:scope[hidden]:where([data-hn-ui-search-shell])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiSection.vue

@@ -154,9 +154,9 @@ const hostState = computed(() =>
 
 @scope (.ui-section) to ([data-hn]) {
   :global(:scope:where([data-hn-ui-section])) {
-    display: flex;
-    flex-direction: column;
-    gap: var(--ui-space-4);
+    display: flex !important;
+    flex-direction: column !important;
+    gap: var(--ui-space-4) !important;
     min-inline-size: 0;
   }
 
@@ -164,14 +164,14 @@ const hostState = computed(() =>
     --_ui-selection-context-surface: initial;
     --_ui-selection-context-border: initial;
     --_ui-selection-context-text: initial;
-    padding: var(--ui-space-5);
+    padding: var(--ui-space-5) !important;
     border: var(--ui-border-width) solid var(--ui-border-strong);
     border-radius: var(--ui-radius-lg);
     background: var(--ui-surface-raised);
   }
 
   :global(:scope[data-ui-section-state~="variant=divided"]:where([data-hn-ui-section])) {
-    padding-block-start: var(--ui-space-6);
+    padding-block-start: var(--ui-space-6) !important;
     border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
   }
 
@@ -194,23 +194,24 @@ const hostState = computed(() =>
   }
 
   :global(.head:where([data-hn-ui-section])) {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: var(--ui-space-2) var(--ui-space-4);
+    display: flex !important;
+    flex-wrap: wrap !important;
+    align-items: flex-start !important;
+    justify-content: space-between !important;
+    gap: var(--ui-space-2) var(--ui-space-4) !important;
   }
 
   :global(.copy:where([data-hn-ui-section])) {
-    display: flex;
+    display: flex !important;
     flex: 1 1 16rem;
-    flex-direction: column;
-    gap: var(--ui-space-1);
+    flex-direction: column !important;
+    gap: var(--ui-space-1) !important;
     min-inline-size: 0;
   }
 
   :global(.heading:where([data-hn-ui-section])) {
-    margin: 0;
+    font-family: var(--ui-font-display, inherit);
+    margin: 0 !important;
     color: var(--ui-text-primary);
     font-size: var(--ui-font-size-lg);
     font-weight: var(--ui-font-semibold);
@@ -228,28 +229,28 @@ const hostState = computed(() =>
   }
 
   :global(.actions:where([data-hn-ui-section])) {
-    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(.body:where([data-hn-ui-section])) {
-    display: flex;
-    flex-direction: column;
-    gap: var(--ui-space-4);
+    display: flex !important;
+    flex-direction: column !important;
+    gap: var(--ui-space-4) !important;
     min-inline-size: 0;
   }
 
   :global(.description:empty:where([data-hn-ui-section])),
   :global(.actions:empty:where([data-hn-ui-section])) {
-    display: none;
+    display: none !important;
   }
 
   :global(.head:has(.heading[hidden]):has(.description:empty):has(.actions:empty):where([data-hn-ui-section])) {
-    display: none;
+    display: none !important;
   }
   :global(:scope[hidden]:where([data-hn-ui-section])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiSelect.vue

@@ -281,13 +281,13 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
 
 @scope (.ui-select) to ([data-hn]) {
   :global(:scope:where([data-hn-ui-select])) {
-    box-sizing: border-box;
-    display: inline-block;
+    box-sizing: border-box !important;
+    display: inline-block !important;
     inline-size: var(--ui-select-inline-size, 100%);
     min-inline-size: 0;
     min-block-size: var(--ui-control-size-md);
-    margin: 0;
-    padding: var(--ui-space-2) var(--ui-space-3);
+    margin: 0 !important;
+    padding: var(--ui-control-inset-block-md, var(--ui-space-2)) var(--ui-space-3) !important;
     border: var(--ui-border-width) solid
       var(--ui-select-border, var(--ui-control-border, var(--ui-border-strong)));
     border-radius: var(--ui-select-radius, var(--ui-field-radius, var(--ui-radius-md)));
@@ -307,7 +307,7 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
   }
   :global(:scope:where([data-hn-ui-select])) {
     appearance: none;
-    padding-inline-end: calc(var(--ui-space-3) + 1.5rem);
+    padding-inline-end: calc(var(--ui-space-3) + 1.5rem) !important;
     background-image: var(
       --ui-select-chevron,
       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5c58' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
@@ -359,8 +359,9 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
 
   :global(:scope[data-ui-select-state~="size=sm"]:where([data-hn-ui-select])) {
     min-block-size: var(--ui-control-size-sm);
-    padding: var(--ui-space-1) var(--ui-space-2);
-    padding-inline-end: calc(var(--ui-space-2) + var(--ui-icon-size-sm) + var(--ui-space-1));
+    padding: var(--ui-control-inset-block-sm, var(--ui-space-1)) var(--ui-space-2) !important;
+    padding-inline-end: calc(var(--ui-space-2) + var(--ui-icon-size-sm) + var(--ui-space-1))
+      !important;
     background-position: right var(--ui-space-2) center;
     background-size: var(--ui-icon-size-sm) var(--ui-icon-size-sm);
     font-size: var(--ui-font-size-sm);
@@ -368,8 +369,8 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
 
   :global(:scope[data-ui-select-state~="size=lg"]:where([data-hn-ui-select])) {
     min-block-size: var(--ui-control-size-lg);
-    padding: var(--ui-space-3) var(--ui-space-4);
-    padding-inline-end: calc(var(--ui-space-4) + 1.5rem);
+    padding: var(--ui-control-inset-block-lg, var(--ui-space-3)) var(--ui-space-4) !important;
+    padding-inline-end: calc(var(--ui-space-4) + 1.5rem) !important;
     background-position: right var(--ui-space-4) center;
     font-size: var(--ui-font-size-md);
   }
@@ -384,7 +385,7 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
     }
   }
   :global(:scope[hidden]:where([data-hn-ui-select])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiSeparator.vue

@@ -166,9 +166,9 @@ const hostState = computed(() =>
 
 @scope (.ui-separator) to ([data-hn]) {
   :global(:scope) {
-    box-sizing: border-box;
+    box-sizing: border-box !important;
     align-self: stretch;
-    margin: 0;
+    margin: 0 !important;
     border: 0;
     border-block-start: var(--ui-border-width) solid
       var(--ui-separator-color, var(--_separator-color, var(--ui-border-divider)));

package/vue/UiSidebar.vue

@@ -408,9 +408,9 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
     --_ui-sidebar-expanded-width: var(--_sidebar-width, var(--ui-sidebar-width, 280px));
 
     position: relative;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
+    box-sizing: border-box !important;
+    display: flex !important;
+    flex-direction: column !important;
     flex: none;
     inline-size: var(--_sidebar-width, var(--ui-sidebar-width, 280px));
     max-inline-size: 100%;
@@ -491,7 +491,7 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
   }
 
   :global(.resizer[hidden]:where([data-hn-ui-sidebar])) {
-    display: none;
+    display: none !important;
   }
 
   :global(:scope[data-ui-sidebar-state~="side=end"] .resizer:where([data-hn-ui-sidebar])) {
@@ -545,8 +545,8 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
     inset-block: 0;
     inset-inline-start: 0;
     inset-inline-end: auto;
-    margin: 0;
-    padding: 0;
+    margin: 0 !important;
+    padding: 0 !important;
     inline-size: min(var(--_sidebar-width, var(--ui-sidebar-width, 280px)), 85vw);
     max-block-size: none;
     block-size: 100dvh;
@@ -559,7 +559,7 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
       overlay var(--ui-motion-reveal) allow-discrete;
   }
   :global(:scope[popover]:not(:popover-open):where([data-hn-ui-sidebar])) {
-    display: none;
+    display: none !important;
     transform: translateX(-100%);
   }
 
@@ -596,7 +596,7 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
     }
   }
   :global(:scope[hidden]:where([data-hn-ui-sidebar])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>