@threadlabs/looma 0.32.1 → 0.33.0

package/vue/UiCombobox.vue

@@ -2147,8 +2147,8 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     --_ui-combobox-popup-shadow: var(--ui-combobox-popup-shadow);
 
     --_row: var(--ui-control-size-md);
-    display: grid;
-    gap: var(--ui-space-1);
+    display: grid !important;
+    gap: var(--ui-space-1) !important;
     min-inline-size: 0;
     color: var(--ui-text-primary);
     font: inherit;
@@ -2159,17 +2159,17 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     font-weight: 500;
   }
   :global(.control:where([data-hn-ui-combobox])) {
-    display: flex;
-    align-items: center;
-    gap: var(--ui-space-2);
+    display: flex !important;
+    align-items: center !important;
+    gap: var(--ui-space-2) !important;
     min-inline-size: 0;
   }
 
   :global(.field:where([data-hn-ui-combobox])) {
-    box-sizing: border-box;
+    box-sizing: border-box !important;
     min-block-size: var(--_row);
     flex: 1 1 auto;
-    display: flex;
+    display: flex !important;
     min-inline-size: 0;
     border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-default));
     border-radius: var(--_ui-combobox-radius, var(--ui-field-radius, var(--ui-radius-md)));
@@ -2186,18 +2186,18 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
       var(--ui-control-focus-halo-shadow);
   }
   :global(.entry:where([data-hn-ui-combobox])) {
-    display: flex;
+    display: flex !important;
     flex: 1 1 auto;
     min-inline-size: 0;
   }
   :global(.help:where([data-hn-ui-combobox])) {
     flex: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
     inline-size: var(--ui-control-size-sm);
     block-size: var(--ui-control-size-sm);
-    padding: 0;
+    padding: 0 !important;
     border: 0;
     border-radius: var(--ui-radius-round);
     background: transparent;
@@ -2238,34 +2238,34 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     width: 100%;
     min-inline-size: 0;
     min-block-size: calc(var(--_row) - 2 * var(--ui-border-width));
-    box-sizing: border-box;
+    box-sizing: border-box !important;
     border: 0;
     border-radius: inherit;
     background: transparent;
     color: inherit;
     font: inherit;
     line-height: var(--ui-line-height-tight);
-    padding: var(--ui-space-2) var(--ui-space-3);
-    margin: 0;
+    padding: var(--ui-control-inset-block-md, var(--ui-space-2)) var(--ui-space-3) !important;
+    margin: 0 !important;
     outline: none;
   }
   :global(:scope[data-ui-combobox-state~="size=sm"]:where([data-hn-ui-combobox])) {
     --_row: var(--ui-control-size-sm);
   }
   :global(:scope[data-ui-combobox-state~="size=sm"] input:where([data-hn-ui-combobox])) {
-    padding: var(--ui-space-1) var(--ui-space-2);
+    padding: var(--ui-control-inset-block-sm, var(--ui-space-1)) var(--ui-space-2) !important;
     font-size: var(--ui-font-size-sm);
   }
   :global(:scope[data-ui-combobox-state~="size=lg"]:where([data-hn-ui-combobox])) {
     --_row: var(--ui-control-size-lg);
   }
   :global(:scope[data-ui-combobox-state~="size=lg"] input:where([data-hn-ui-combobox])) {
-    padding: var(--ui-space-3) var(--ui-space-4);
+    padding: var(--ui-control-inset-block-lg, var(--ui-space-3)) var(--ui-space-4) !important;
     font-size: var(--ui-font-size-md);
   }
   :global(button:where([data-hn-ui-combobox])) {
     appearance: none;
-    display: inline-grid;
+    display: inline-grid !important;
     place-items: center;
     align-self: stretch;
     border: 0;
@@ -2275,11 +2275,11 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     font: inherit;
     font-weight: 400;
     min-inline-size: 2rem;
-    padding: 0 var(--ui-space-1);
+    padding: 0 var(--ui-space-1) !important;
     cursor: pointer;
   }
   :global(.affordance-icon:where([data-hn-ui-combobox])) {
-    display: block;
+    display: block !important;
     inline-size: var(--ui-icon-size-sm);
     block-size: var(--ui-icon-size-sm);
   }
@@ -2310,13 +2310,13 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     );
   }
   :global(.popup:where([data-hn-ui-combobox])) {
-    box-sizing: border-box;
+    box-sizing: border-box !important;
     min-inline-size: 12rem;
     max-inline-size: calc(100vw - 1rem);
     max-block-size: var(--_ui-combobox-max-block-size, 18rem);
     overflow: auto;
-    margin: 0;
-    padding: var(--ui-space-1);
+    margin: 0 !important;
+    padding: var(--ui-space-1) !important;
     border: var(--ui-border-width) solid
       var(--_ui-combobox-popup-border, var(--ui-overlay-border, var(--ui-border-strong)));
     border-radius: var(--_ui-combobox-popup-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
@@ -2331,27 +2331,27 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     );
   }
   :global([hidden]:where([data-hn-ui-combobox])) {
-    display: none;
+    display: none !important;
   }
   :global(.option[aria-disabled="true"] .primary:where([data-hn-ui-combobox])),
   :global(.option[aria-disabled="true"] .secondary:where([data-hn-ui-combobox])) {
     color: var(--ui-disabled-text);
   }
   :global(.primary:where([data-hn-ui-combobox])) {
-    display: block;
+    display: block !important;
     color: var(--_ui-combobox-option-text, inherit);
     font-weight: 500;
   }
   :global(.detail:where([data-hn-ui-combobox])) {
-    display: grid;
-    gap: var(--ui-space-0-5);
+    display: grid !important;
+    gap: var(--ui-space-0-5) !important;
     min-inline-size: 0;
   }
   :global(.line:where([data-hn-ui-combobox])) {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--ui-space-2);
+    display: flex !important;
+    flex-wrap: wrap !important;
+    align-items: center !important;
+    gap: var(--ui-space-2) !important;
   }
   :global(.description:where([data-hn-ui-combobox])) {
     color: var(--ui-text-muted);
@@ -2367,7 +2367,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
   }
   :global(.group:where([data-hn-ui-combobox])),
   :global(.popup .message:where([data-hn-ui-combobox])) {
-    padding: var(--ui-space-2) var(--ui-space-3);
+    padding: var(--ui-space-2) var(--ui-space-3) !important;
   }
   :global(.sr-only:where([data-hn-ui-combobox])) {
     position: absolute;
@@ -2403,35 +2403,35 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     }
   }
   :global(:scope[data-ui-combobox-state~="multiple"] .field:where([data-hn-ui-combobox])) {
-    align-items: center;
+    align-items: center !important;
     min-block-size: var(--_ui-combobox-item-min-block-size, var(--_row));
-    padding: var(--ui-space-1);
+    padding: var(--ui-space-1) !important;
   }
   :global(:scope[data-ui-combobox-state~="multiple"] .entry:where([data-hn-ui-combobox])) {
-    align-items: center;
-    gap: var(--ui-space-1);
+    align-items: center !important;
+    gap: var(--ui-space-1) !important;
     overflow-x: auto;
     scrollbar-width: none;
   }
   :global(:scope[data-ui-combobox-state~="multiple"]
     .entry:where([data-hn-ui-combobox])::-webkit-scrollbar) {
-    display: none;
+    display: none !important;
   }
   :global(:scope[data-ui-combobox-state~="multiple"] input:where([data-hn-ui-combobox])) {
     flex: 1 0 var(--_ui-combobox-item-input-min-inline-size, 5rem);
     width: auto;
     min-block-size: 1.75rem;
-    padding: var(--ui-space-0-5) var(--ui-space-1);
+    padding: var(--ui-space-0-5) var(--ui-space-1) !important;
   }
   :global(:scope[data-ui-combobox-state~="multiple"]:scope[data-ui-combobox-state~="size=sm"]
     .field:where([data-hn-ui-combobox])) {
     min-block-size: 0;
-    padding: var(--ui-space-0-5);
+    padding: var(--ui-space-0-5) !important;
   }
   :global(:scope[data-ui-combobox-state~="multiple"]:scope[data-ui-combobox-state~="size=sm"]
     input:where([data-hn-ui-combobox])) {
     min-block-size: calc(var(--_row) - 2 * var(--ui-border-width) - 2 * var(--ui-space-0-5));
-    padding: 0 var(--ui-space-1);
+    padding: 0 var(--ui-space-1) !important;
   }
   :global(:scope[data-ui-combobox-state~="multiple"]:scope[data-ui-combobox-state~="size=lg"]
     .field:where([data-hn-ui-combobox])) {
@@ -2445,12 +2445,12 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
   }
   :global(.item:where([data-hn-ui-combobox])) {
     appearance: none;
-    display: inline-flex;
+    display: inline-flex !important;
     flex: none;
     min-inline-size: 0;
     max-inline-size: min(100%, var(--_ui-combobox-item-item-max-inline-size, 12rem));
     overflow: hidden;
-    padding: 0;
+    padding: 0 !important;
     border: 0;
     border-radius: var(--ui-radius-sm);
     background: transparent;
@@ -2466,7 +2466,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     color: var(--ui-disabled-text);
   }
   :global(:scope[hidden]:where([data-hn-ui-combobox])) {
-    display: none;
+    display: none !important;
   }
 }
 
@@ -2491,8 +2491,8 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     --_ui-combobox-popup-shadow: var(--ui-combobox-popup-shadow);
 
     --_row: var(--ui-control-size-md);
-    display: grid;
-    gap: var(--ui-space-1);
+    display: grid !important;
+    gap: var(--ui-space-1) !important;
     min-inline-size: 0;
     color: var(--ui-text-primary);
     font: inherit;
@@ -2503,17 +2503,17 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     font-weight: 500;
   }
   :global(.control:where(:scope, :scope *):where([data-hn-ui-combobox])) {
-    display: flex;
-    align-items: center;
-    gap: var(--ui-space-2);
+    display: flex !important;
+    align-items: center !important;
+    gap: var(--ui-space-2) !important;
     min-inline-size: 0;
   }
 
   :global(.field:where(:scope, :scope *):where([data-hn-ui-combobox])) {
-    box-sizing: border-box;
+    box-sizing: border-box !important;
     min-block-size: var(--_row);
     flex: 1 1 auto;
-    display: flex;
+    display: flex !important;
     min-inline-size: 0;
     border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-default));
     border-radius: var(--_ui-combobox-radius, var(--ui-field-radius, var(--ui-radius-md)));
@@ -2530,18 +2530,18 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
       var(--ui-control-focus-halo-shadow);
   }
   :global(.entry:where(:scope, :scope *):where([data-hn-ui-combobox])) {
-    display: flex;
+    display: flex !important;
     flex: 1 1 auto;
     min-inline-size: 0;
   }
   :global(.help:where(:scope, :scope *):where([data-hn-ui-combobox])) {
     flex: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
     inline-size: var(--ui-control-size-sm);
     block-size: var(--ui-control-size-sm);
-    padding: 0;
+    padding: 0 !important;
     border: 0;
     border-radius: var(--ui-radius-round);
     background: transparent;
@@ -2583,15 +2583,15 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     width: 100%;
     min-inline-size: 0;
     min-block-size: calc(var(--_row) - 2 * var(--ui-border-width));
-    box-sizing: border-box;
+    box-sizing: border-box !important;
     border: 0;
     border-radius: inherit;
     background: transparent;
     color: inherit;
     font: inherit;
     line-height: var(--ui-line-height-tight);
-    padding: var(--ui-space-2) var(--ui-space-3);
-    margin: 0;
+    padding: var(--ui-control-inset-block-md, var(--ui-space-2)) var(--ui-space-3) !important;
+    margin: 0 !important;
     outline: none;
   }
   :global(:where(.ui-combobox)[data-ui-combobox-state~="size=sm"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
@@ -2599,7 +2599,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
   }
   :global(:where(.ui-combobox)[data-ui-combobox-state~="size=sm"]
     input:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
-    padding: var(--ui-space-1) var(--ui-space-2);
+    padding: var(--ui-control-inset-block-sm, var(--ui-space-1)) var(--ui-space-2) !important;
     font-size: var(--ui-font-size-sm);
   }
   :global(:where(.ui-combobox)[data-ui-combobox-state~="size=lg"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
@@ -2607,12 +2607,12 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
   }
   :global(:where(.ui-combobox)[data-ui-combobox-state~="size=lg"]
     input:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
-    padding: var(--ui-space-3) var(--ui-space-4);
+    padding: var(--ui-control-inset-block-lg, var(--ui-space-3)) var(--ui-space-4) !important;
     font-size: var(--ui-font-size-md);
   }
   :global(button:where(:scope, :scope *):where([data-hn-ui-combobox])) {
     appearance: none;
-    display: inline-grid;
+    display: inline-grid !important;
     place-items: center;
     align-self: stretch;
     border: 0;
@@ -2622,11 +2622,11 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     font: inherit;
     font-weight: 400;
     min-inline-size: 2rem;
-    padding: 0 var(--ui-space-1);
+    padding: 0 var(--ui-space-1) !important;
     cursor: pointer;
   }
   :global(.affordance-icon:where(:scope, :scope *):where([data-hn-ui-combobox])) {
-    display: block;
+    display: block !important;
     inline-size: var(--ui-icon-size-sm);
     block-size: var(--ui-icon-size-sm);
   }
@@ -2658,13 +2658,13 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     );
   }
   :global(.popup:where(:scope, :scope *):where([data-hn-ui-combobox])) {
-    box-sizing: border-box;
+    box-sizing: border-box !important;
     min-inline-size: 12rem;
     max-inline-size: calc(100vw - 1rem);
     max-block-size: var(--_ui-combobox-max-block-size, 18rem);
     overflow: auto;
-    margin: 0;
-    padding: var(--ui-space-1);
+    margin: 0 !important;
+    padding: var(--ui-space-1) !important;
     border: var(--ui-border-width) solid
       var(--_ui-combobox-popup-border, var(--ui-overlay-border, var(--ui-border-strong)));
     border-radius: var(--_ui-combobox-popup-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
@@ -2679,7 +2679,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     );
   }
   :global([hidden]:where(:scope, :scope *):where([data-hn-ui-combobox])) {
-    display: none;
+    display: none !important;
   }
   :global(.option[aria-disabled="true"]:where(:scope, :scope *)
     .primary:where([data-hn-ui-combobox])),
@@ -2688,20 +2688,20 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     color: var(--ui-disabled-text);
   }
   :global(.primary:where(:scope, :scope *):where([data-hn-ui-combobox])) {
-    display: block;
+    display: block !important;
     color: var(--_ui-combobox-option-text, inherit);
     font-weight: 500;
   }
   :global(.detail:where(:scope, :scope *):where([data-hn-ui-combobox])) {
-    display: grid;
-    gap: var(--ui-space-0-5);
+    display: grid !important;
+    gap: var(--ui-space-0-5) !important;
     min-inline-size: 0;
   }
   :global(.line:where(:scope, :scope *):where([data-hn-ui-combobox])) {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--ui-space-2);
+    display: flex !important;
+    flex-wrap: wrap !important;
+    align-items: center !important;
+    gap: var(--ui-space-2) !important;
   }
   :global(.description:where(:scope, :scope *):where([data-hn-ui-combobox])) {
     color: var(--ui-text-muted);
@@ -2718,7 +2718,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
   }
   :global(.group:where(:scope, :scope *):where([data-hn-ui-combobox])),
   :global(.popup:where(:scope, :scope *) .message:where([data-hn-ui-combobox])) {
-    padding: var(--ui-space-2) var(--ui-space-3);
+    padding: var(--ui-space-2) var(--ui-space-3) !important;
   }
   :global(.sr-only:where(:scope, :scope *):where([data-hn-ui-combobox])) {
     position: absolute;
@@ -2757,37 +2757,37 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
   }
   :global(:where(.ui-combobox)[data-ui-combobox-state~="multiple"]
     .field:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
-    align-items: center;
+    align-items: center !important;
     min-block-size: var(--_ui-combobox-item-min-block-size, var(--_row));
-    padding: var(--ui-space-1);
+    padding: var(--ui-space-1) !important;
   }
   :global(:where(.ui-combobox)[data-ui-combobox-state~="multiple"]
     .entry:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
-    align-items: center;
-    gap: var(--ui-space-1);
+    align-items: center !important;
+    gap: var(--ui-space-1) !important;
     overflow-x: auto;
     scrollbar-width: none;
   }
   :global(:where(.ui-combobox)[data-ui-combobox-state~="multiple"]
     .entry:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])::-webkit-scrollbar) {
-    display: none;
+    display: none !important;
   }
   :global(:where(.ui-combobox)[data-ui-combobox-state~="multiple"]
     input:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
     flex: 1 0 var(--_ui-combobox-item-input-min-inline-size, 5rem);
     width: auto;
     min-block-size: 1.75rem;
-    padding: var(--ui-space-0-5) var(--ui-space-1);
+    padding: var(--ui-space-0-5) var(--ui-space-1) !important;
   }
   :global(:where(.ui-combobox)[data-ui-combobox-state~="multiple"]:where(.ui-combobox)[data-ui-combobox-state~="size=sm"]
     .field:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
     min-block-size: 0;
-    padding: var(--ui-space-0-5);
+    padding: var(--ui-space-0-5) !important;
   }
   :global(:where(.ui-combobox)[data-ui-combobox-state~="multiple"]:where(.ui-combobox)[data-ui-combobox-state~="size=sm"]
     input:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
     min-block-size: calc(var(--_row) - 2 * var(--ui-border-width) - 2 * var(--ui-space-0-5));
-    padding: 0 var(--ui-space-1);
+    padding: 0 var(--ui-space-1) !important;
   }
   :global(:where(.ui-combobox)[data-ui-combobox-state~="multiple"]:where(.ui-combobox)[data-ui-combobox-state~="size=lg"]
     .field:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
@@ -2801,12 +2801,12 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
   }
   :global(.item:where(:scope, :scope *):where([data-hn-ui-combobox])) {
     appearance: none;
-    display: inline-flex;
+    display: inline-flex !important;
     flex: none;
     min-inline-size: 0;
     max-inline-size: min(100%, var(--_ui-combobox-item-item-max-inline-size, 12rem));
     overflow: hidden;
-    padding: 0;
+    padding: 0 !important;
     border: 0;
     border-radius: var(--ui-radius-sm);
     background: transparent;
@@ -2822,7 +2822,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     color: var(--ui-disabled-text);
   }
   :global(:where(.ui-combobox)[hidden]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiContainer.vue

@@ -152,20 +152,20 @@ const hostState = computed(() =>
   :global(:scope:where([data-hn-ui-container])) {
     --_container-measure: 65ch;
     --_container-gutters: var(--ui-space-4);
-    display: block;
+    display: block !important;
     inline-size: 100%;
     max-inline-size: var(--ui-container-measure, var(--_container-measure));
-    margin-inline: auto;
-    padding-inline: var(--ui-container-gutters, var(--_container-gutters));
+    margin-inline: auto !important;
+    padding-inline: var(--ui-container-gutters, var(--_container-gutters)) !important;
   }
 
   :global(:scope[data-ui-container-state~="measure=narrow"]:where([data-hn-ui-container])) {
     --_container-measure: 45ch;
   }
   :global(:scope[data-ui-container-state~="fill"]:where([data-hn-ui-container])) {
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
+    box-sizing: border-box !important;
+    display: flex !important;
+    flex-direction: column !important;
     flex: 1;
     min-inline-size: 0;
     min-block-size: 0;
@@ -183,7 +183,7 @@ const hostState = computed(() =>
     --_container-gutters: var(--ui-space-5);
   }
   :global(:scope[hidden]:where([data-hn-ui-container])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiContextMenu.vue

@@ -246,17 +246,17 @@ useComponentHost(() => import('../components/ui-context-menu/ui-context-menu.js'
     --_ui-context-menu-shadow: var(--ui-context-menu-shadow);
     --_ui-context-menu-z-index: var(--ui-context-menu-z-index);
 
-    display: contents;
+    display: contents !important;
   }
 
   :global(.menu:where([data-hn-ui-context-menu])) {
     position: fixed;
     inset: auto;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    padding: var(--ui-space-1);
+    margin: 0 !important;
+    display: flex !important;
+    flex-direction: column !important;
+    box-sizing: border-box !important;
+    padding: var(--ui-space-1) !important;
     background: var(
       --_ui-context-menu-surface,
       var(--ui-overlay-surface, var(--ui-surface-elevated))
@@ -284,7 +284,7 @@ useComponentHost(() => import('../components/ui-context-menu/ui-context-menu.js'
   :global(.menu hr:where([data-hn-ui-context-menu])) {
     align-self: stretch;
     block-size: 0;
-    margin: var(--ui-space-1) 0;
+    margin: var(--ui-space-1) 0 !important;
     border: 0;
     border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
   }
@@ -303,7 +303,7 @@ useComponentHost(() => import('../components/ui-context-menu/ui-context-menu.js'
 
   :global(.menu[hidden]:where([data-hn-ui-context-menu])),
   :global(.menu[popover]:not(:popover-open):where([data-hn-ui-context-menu])) {
-    display: none;
+    display: none !important;
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -312,7 +312,7 @@ useComponentHost(() => import('../components/ui-context-menu/ui-context-menu.js'
     }
   }
   :global(:scope[hidden]:where([data-hn-ui-context-menu])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiCover.vue

@@ -105,15 +105,15 @@ const hostState = computed(() =>
 
 @scope (.ui-cover) to ([data-hn]) {
   :global(:scope:where([data-hn-ui-cover])) {
-    display: flex;
-    flex-direction: column;
+    display: flex !important;
+    flex-direction: column !important;
     /* Safe: a child wider than the cover keeps its start edge in view instead of overflowing both ways. */
-    align-items: safe center;
-    justify-content: center;
-    gap: var(--ui-space-6);
-    box-sizing: border-box;
+    align-items: safe center !important;
+    justify-content: center !important;
+    gap: var(--ui-space-6) !important;
+    box-sizing: border-box !important;
     min-block-size: 100dvh;
-    padding: var(--ui-space-6) var(--ui-space-4);
+    padding: var(--ui-space-6) var(--ui-space-4) !important;
   }
 
   :global(:scope[data-ui-cover-state~="size=fill"]:where([data-hn-ui-cover])) {
@@ -121,7 +121,7 @@ const hostState = computed(() =>
     min-block-size: 100%;
   }
   :global(:scope[hidden]:where([data-hn-ui-cover])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiDescriptionItem.vue

@@ -89,14 +89,14 @@ checkHydratedRoot('div', 'ui-description-item')
 
 @scope (.ui-description-item) to ([data-hn]) {
   :global(:scope:where([data-hn-ui-description-item])) {
-    display: var(--_ui-description-display, grid);
+    display: var(--_ui-description-display, grid) !important;
     grid-column: var(--_ui-description-column, 1 / -1);
     grid-template-columns: subgrid;
-    flex-direction: column;
-    align-items: var(--_ui-description-align, baseline);
-    gap: var(--ui-space-1) var(--ui-space-6);
+    flex-direction: column !important;
+    align-items: var(--_ui-description-align, baseline) !important;
+    gap: var(--ui-space-1) var(--ui-space-6) !important;
     min-inline-size: 0;
-    padding: var(--_ui-description-padding, 0);
+    padding: var(--_ui-description-padding, 0) !important;
     border-width: var(--_ui-description-border-width, 0);
     border-style: solid;
     border-color: var(--_ui-description-border-color, var(--ui-border-default));
@@ -109,7 +109,7 @@ checkHydratedRoot('div', 'ui-description-item')
   }
 
   :global(dd:where([data-hn-ui-description-item])) {
-    margin: 0;
+    margin: 0 !important;
     min-inline-size: 0;
     color: var(--ui-text-primary);
     font-weight: var(--ui-font-medium);
@@ -118,7 +118,7 @@ checkHydratedRoot('div', 'ui-description-item')
     overflow-wrap: anywhere;
   }
   :global(:scope[hidden]:where([data-hn-ui-description-item])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiDescriptionList.vue

@@ -164,11 +164,11 @@ const hostState = computed(() =>
     --_min: 10rem;
     --_track: var(--_min);
     --_tile-padding: var(--ui-space-3);
-    display: grid;
+    display: grid !important;
     grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
-    gap: var(--_gap) var(--_column-gap);
+    gap: var(--_gap) var(--_column-gap) !important;
     min-inline-size: 0;
-    margin: 0;
+    margin: 0 !important;
   }
   :global(:scope[data-ui-description-list-state~="layout=stacked"]:where([data-hn-ui-description-list])),
   :global(:scope[data-ui-description-list-state~="layout=grid"]:where([data-hn-ui-description-list])),
@@ -211,7 +211,7 @@ const hostState = computed(() =>
     --_tile-padding: var(--ui-space-2);
   }
   :global(:scope[hidden]:where([data-hn-ui-description-list])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>