@threadlabs/looma 0.32.1 → 0.33.1

package/vue/UiListbox.vue

@@ -426,12 +426,12 @@ useComponentHost(() => import('../components/ui-listbox/ui-listbox.js'), {
 @scope (.ui-listbox) to ([data-hn]) {
   :global(:scope:where([data-hn-ui-listbox])) {
     position: relative;
-    box-sizing: border-box;
-    display: block;
+    box-sizing: border-box !important;
+    display: block !important;
     inline-size: 100%;
     min-inline-size: 0;
-    margin: 0;
-    padding: var(--ui-space-1);
+    margin: 0 !important;
+    padding: var(--ui-space-1) !important;
     border: var(--ui-border-width) solid var(--ui-listbox-border, var(--ui-control-border));
     border-radius: var(--ui-listbox-radius, var(--ui-field-radius, var(--ui-radius-md)));
     background: var(--ui-listbox-surface, var(--ui-control-surface));
@@ -442,13 +442,13 @@ useComponentHost(() => import('../components/ui-listbox/ui-listbox.js'), {
     outline: none;
   }
   :global(.choices:where([data-hn-ui-listbox])) {
-    display: flex;
-    flex-direction: column;
+    display: flex !important;
+    flex-direction: column !important;
     max-block-size: calc(max(2, var(--_rows, 5)) * var(--ui-control-size-md));
   }
 
   :global(:scope:not([data-enhanced]):where([data-hn-ui-listbox])) {
-    padding: 0;
+    padding: 0 !important;
     border: 0;
     background: transparent;
     box-shadow: none;
@@ -456,11 +456,11 @@ useComponentHost(() => import('../components/ui-listbox/ui-listbox.js'), {
 
   :global(:scope:not([data-enhanced]) .choices:where([data-hn-ui-listbox])),
   :global(:scope[data-enhanced] .fallback:where([data-hn-ui-listbox])) {
-    display: none;
+    display: none !important;
   }
 
   :global(.fallback:where([data-hn-ui-listbox])) {
-    box-sizing: border-box;
+    box-sizing: border-box !important;
     inline-size: 100%;
     font: inherit;
   }
@@ -494,19 +494,19 @@ useComponentHost(() => import('../components/ui-listbox/ui-listbox.js'), {
   }
 
   :global(:scope[hidden]:where([data-hn-ui-listbox])) {
-    display: none;
+    display: none !important;
   }
 }
 
 @scope ([data-slotted~="ui-listbox"]:not([data-hn])) to ([data-hn], [data-slotted]) {
   :global(:where(.ui-listbox):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-listbox"]))):where([data-hn-ui-listbox])) {
     position: relative;
-    box-sizing: border-box;
-    display: block;
+    box-sizing: border-box !important;
+    display: block !important;
     inline-size: 100%;
     min-inline-size: 0;
-    margin: 0;
-    padding: var(--ui-space-1);
+    margin: 0 !important;
+    padding: var(--ui-space-1) !important;
     border: var(--ui-border-width) solid var(--ui-listbox-border, var(--ui-control-border));
     border-radius: var(--ui-listbox-radius, var(--ui-field-radius, var(--ui-radius-md)));
     background: var(--ui-listbox-surface, var(--ui-control-surface));
@@ -517,13 +517,13 @@ useComponentHost(() => import('../components/ui-listbox/ui-listbox.js'), {
     outline: none;
   }
   :global(.choices:where(:scope, :scope *):where([data-hn-ui-listbox])) {
-    display: flex;
-    flex-direction: column;
+    display: flex !important;
+    flex-direction: column !important;
     max-block-size: calc(max(2, var(--_rows, 5)) * var(--ui-control-size-md));
   }
 
   :global(:where(.ui-listbox):not([data-enhanced]):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-listbox"]))):where([data-hn-ui-listbox])) {
-    padding: 0;
+    padding: 0 !important;
     border: 0;
     background: transparent;
     box-shadow: none;
@@ -533,11 +533,11 @@ useComponentHost(() => import('../components/ui-listbox/ui-listbox.js'), {
     .choices:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-listbox"]))):where([data-hn-ui-listbox])),
   :global(:where(.ui-listbox)[data-enhanced]
     .fallback:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-listbox"]))):where([data-hn-ui-listbox])) {
-    display: none;
+    display: none !important;
   }
 
   :global(.fallback:where(:scope, :scope *):where([data-hn-ui-listbox])) {
-    box-sizing: border-box;
+    box-sizing: border-box !important;
     inline-size: 100%;
     font: inherit;
   }
@@ -571,7 +571,7 @@ useComponentHost(() => import('../components/ui-listbox/ui-listbox.js'), {
   }
 
   :global(:where(.ui-listbox)[hidden]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-listbox"]))):where([data-hn-ui-listbox])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiMenu.vue

@@ -358,8 +358,8 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
     --_ui-default-menu-item-padding-inline: var(--ui-space-2);
     --_ui-default-menu-item-font-size: var(--ui-font-size-sm);
     --_ui-default-menu-item-radius: var(--ui-radius-sm);
-    padding: var(--ui-space-1);
-    gap: 0;
+    padding: var(--ui-space-1) !important;
+    gap: 0 !important;
   }
   :global(:scope[data-ui-menu-state~="size=sm"]:where([data-hn-ui-menu])) {
     --_ui-default-menu-item-padding-block: var(--ui-space-0-5);
@@ -369,8 +369,8 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
     --_ui-default-menu-item-min-block-size: 1.5rem;
     --_ui-default-menu-indicator-size: 0.75rem;
     min-inline-size: min(8rem, calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2));
-    padding: var(--ui-space-1);
-    gap: 0;
+    padding: var(--ui-space-1) !important;
+    gap: 0 !important;
   }
 
   :global(:scope[data-ui-menu-state~="icons"]:where([data-hn-ui-menu])) {
@@ -390,13 +390,13 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
     --_ui-default-menu-item-min-block-size: initial;
     --_ui-default-menu-indicator-size: initial;
     --_ui-default-menu-icon-display: none;
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
+    display: flex !important;
+    flex-direction: column !important;
+    box-sizing: border-box !important;
     inline-size: max-content;
     min-inline-size: min(12rem, calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2));
     max-inline-size: calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2);
-    padding: 0;
+    padding: 0 !important;
     border: 0;
     outline: 0;
     border-radius: 0;
@@ -406,11 +406,11 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
   }
 
   :global(.surface:where([data-hn-ui-menu])) {
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
+    display: flex !important;
+    flex-direction: column !important;
+    box-sizing: border-box !important;
     max-inline-size: inherit;
-    padding: var(--ui-space-1);
+    padding: var(--ui-space-1) !important;
     background: var(--_ui-menu-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
     border: var(--ui-border-width) solid
       var(--_ui-menu-border, var(--ui-overlay-border, var(--ui-border-strong)));
@@ -426,19 +426,19 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
   :global(.surface hr:where([data-hn-ui-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);
   }
 
   :global(:scope:not([data-ui-menu-state~="internalOpen"]):not(:scope[data-ui-menu-state~="inline"]):where([data-hn-ui-menu])) {
-    display: none;
+    display: none !important;
   }
 
   :global(:scope[popover]:where([data-hn-ui-menu])) {
     position: fixed;
     inset: auto;
-    margin: 0;
+    margin: 0 !important;
     overflow: visible;
     max-block-size: calc(100dvh - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2);
     opacity: 0;
@@ -463,7 +463,7 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
   }
 
   :global(:scope[hidden]:where([data-hn-ui-menu])) {
-    display: none;
+    display: none !important;
   }
 
   @media (prefers-reduced-motion: reduce) {

package/vue/UiMenuGroup.vue

@@ -88,18 +88,18 @@ checkHydratedRoot('div', 'ui-menu-group')
 <style scoped>
 @scope (.ui-menu-group) to ([data-hn]) {
   :global(:scope:where([data-hn-ui-menu-group])) {
-    display: flex;
-    flex-direction: column;
+    display: flex !important;
+    flex-direction: column !important;
     min-inline-size: 0;
   }
   :global(.heading:where([data-hn-ui-menu-group])) {
-    padding: var(--ui-space-2) var(--ui-space-3) var(--ui-space-1);
+    padding: var(--ui-space-2) var(--ui-space-3) var(--ui-space-1) !important;
     color: var(--ui-text-muted);
     font-size: var(--ui-font-size-sm);
     font-weight: var(--ui-font-semibold);
   }
   :global(:scope[hidden]:where([data-hn-ui-menu-group])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiMenuItem.vue

@@ -403,10 +403,10 @@ useComponentHost(() => import('../components/ui-menu-item/ui-menu-item.js'), {
 
 @scope (.ui-menu-item) to ([data-hn]) {
   :global(:scope:where([data-hn-ui-menu-item])) {
-    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;
     width: 100%;
     padding: var(
       --ui-menu-item-padding-block,
@@ -415,7 +415,7 @@ useComponentHost(() => import('../components/ui-menu-item/ui-menu-item.js'), {
       var(
         --ui-menu-item-padding-inline,
         var(--_ui-default-menu-item-padding-inline, var(--ui-space-3))
-      );
+      ) !important;
     text-align: left;
     border-radius: var(
       --ui-menu-item-radius,
@@ -435,16 +435,16 @@ useComponentHost(() => import('../components/ui-menu-item/ui-menu-item.js'), {
       color var(--ui-motion-fast) var(--ui-motion-ease);
   }
   :global(.icon:where([data-hn-ui-menu-item])) {
-    display: var(--_ui-default-menu-icon-display, none);
-    align-items: center;
-    justify-content: center;
+    display: var(--_ui-default-menu-icon-display, none) !important;
+    align-items: center !important;
+    justify-content: center !important;
     flex: none;
     inline-size: var(--ui-icon-size-sm);
     block-size: var(--ui-icon-size-sm);
   }
 
   :global(.icon:not(:empty):where([data-hn-ui-menu-item])) {
-    display: inline-flex;
+    display: inline-flex !important;
   }
 
   :global(.icon :where(:not([data-hn-ui-menu-item])):is(svg)) {
@@ -457,19 +457,19 @@ useComponentHost(() => import('../components/ui-menu-item/ui-menu-item.js'), {
   }
 
   :global(.label:where([data-hn-ui-menu-item])) {
-    display: flex;
-    align-items: center;
-    gap: var(--ui-space-2);
+    display: flex !important;
+    align-items: center !important;
+    gap: var(--ui-space-2) !important;
     flex: 1;
     min-inline-size: 0;
   }
 
   :global(.indicator:where([data-hn-ui-menu-item])) {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
     flex: none;
-    box-sizing: border-box;
+    box-sizing: border-box !important;
     inline-size: var(--_ui-default-menu-indicator-size, var(--ui-icon-size-sm));
     block-size: var(--_ui-default-menu-indicator-size, var(--ui-icon-size-sm));
     border: var(--ui-border-width) solid var(--ui-control-border);
@@ -479,7 +479,7 @@ useComponentHost(() => import('../components/ui-menu-item/ui-menu-item.js'), {
   }
 
   :global(:scope[data-ui-menu-item-state~="type=action"] .indicator:where([data-hn-ui-menu-item])) {
-    display: none;
+    display: none !important;
   }
 
   :global(:scope[data-ui-menu-item-state~="type=checkbox"][aria-checked="true"]
@@ -493,14 +493,14 @@ useComponentHost(() => import('../components/ui-menu-item/ui-menu-item.js'), {
   }
 
   :global(.shortcut:where([data-hn-ui-menu-item])) {
-    margin-inline-start: auto;
+    margin-inline-start: auto !important;
     color: var(--ui-text-secondary);
     font-size: var(--ui-font-size-sm);
     font-weight: var(--ui-font-normal);
   }
 
   :global(.shortcut:empty:where([data-hn-ui-menu-item])) {
-    display: none;
+    display: none !important;
   }
   :global(.shortcut :where(:not([data-hn-ui-menu-item])):is(kbd)) {
     font: inherit;
@@ -547,7 +547,7 @@ useComponentHost(() => import('../components/ui-menu-item/ui-menu-item.js'), {
     }
   }
   :global(:scope[hidden]:where([data-hn-ui-menu-item])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiMeter.vue

@@ -920,7 +920,7 @@ const hostState = computed(() =>
   :global(:scope) {
     --_meter-fill: var(--ui-text-muted);
 
-    display: inline-block;
+    display: inline-block !important;
     flex: none;
     vertical-align: middle;
     inline-size: var(--ui-meter-inline-size, 8rem);
@@ -940,7 +940,7 @@ const hostState = computed(() =>
   }
 
   :global(.fill) {
-    display: block;
+    display: block !important;
     block-size: 100%;
     background-color: var(--_meter-fill);
     background-image: linear-gradient(to bottom, rgb(255 255 255 / 0.26), transparent 70%);
@@ -1026,10 +1026,10 @@ const hostState = computed(() =>
     --_meter-gap: var(--ui-space-0-5);
   }
   :global(:scope[data-ui-meter-state~="variant=distribution"]) {
-    display: flex;
+    display: flex !important;
     inline-size: 100%;
     block-size: var(--ui-space-4);
-    gap: var(--ui-space-0-5);
+    gap: var(--ui-space-0-5) !important;
   }
 
   :global(:scope[data-ui-meter-state~="variant=distribution"][size="sm"]) {
@@ -1071,7 +1071,7 @@ const hostState = computed(() =>
     }
   }
   :global(:scope[hidden]) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiNavItem.vue

@@ -373,16 +373,16 @@ const hostState = computed(() =>
     --_indicator-width: var(--ui-nav-item-indicator-width, var(--ui-accent-line-width));
     --_indicator-color: var(--ui-nav-item-indicator-color, var(--ui-accent));
     position: relative;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    gap: var(--ui-nav-gap);
+    box-sizing: border-box !important;
+    display: flex !important;
+    align-items: center !important;
+    gap: var(--ui-nav-gap) !important;
     inline-size: var(--ui-nav-item-inline-size, 100%);
     min-inline-size: 0;
     min-block-size: var(--ui-nav-min-block-size);
-    margin: 0;
-    padding-block: var(--ui-nav-padding-block);
-    padding-inline: var(--ui-nav-padding-inline);
+    margin: 0 !important;
+    padding-block: var(--ui-nav-padding-block) !important;
+    padding-inline: var(--ui-nav-padding-inline) !important;
     border: 0;
     border-radius: var(--ui-selection-radius);
     background: transparent;
@@ -426,13 +426,13 @@ const hostState = computed(() =>
     position: absolute;
     inset-block: 0;
     inset-inline-start: 0;
-    display: none;
+    display: none !important;
     border-inline-start: var(--_indicator-width) solid var(--_indicator-color);
   }
 
   :global(:scope[data-ui-nav-item-state~="variant=line"][aria-current]
     .indicator:where([data-hn-ui-nav-item])) {
-    display: block;
+    display: block !important;
   }
 
   @media (forced-colors: active) {
@@ -448,25 +448,25 @@ const hostState = computed(() =>
   }
 
   :global(.leading:where([data-hn-ui-nav-item])), :global(.trailing:where([data-hn-ui-nav-item])) {
-    display: inline-flex;
+    display: inline-flex !important;
     flex: none;
-    align-items: center;
-    justify-content: center;
+    align-items: center !important;
+    justify-content: center !important;
     inline-size: var(--ui-nav-icon-size);
     color: inherit;
     font-size: var(--ui-nav-icon-size);
   }
 
   :global(.content:where([data-hn-ui-nav-item])) {
-    display: flex;
+    display: flex !important;
     flex: 1;
-    flex-direction: column;
-    gap: var(--ui-space-0-5, 2px);
+    flex-direction: column !important;
+    gap: var(--ui-space-0-5, 2px) !important;
     min-inline-size: 0;
   }
 
   :global(.label:where([data-hn-ui-nav-item])), :global(.description:where([data-hn-ui-nav-item])) {
-    display: block;
+    display: block !important;
     min-inline-size: 0;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -487,8 +487,8 @@ const hostState = computed(() =>
 
   :global(:scope[data-ui-nav-item-state~="density=compact"]:where([data-hn-ui-nav-item])) {
     min-block-size: var(--ui-nav-compact-min-block-size);
-    padding-block: var(--ui-nav-compact-padding-block);
-    padding-inline: var(--ui-nav-compact-padding-inline);
+    padding-block: var(--ui-nav-compact-padding-block) !important;
+    padding-inline: var(--ui-nav-compact-padding-inline) !important;
   }
   :global(:scope[data-ui-nav-item-state~="density=compact"] .label:where([data-hn-ui-nav-item])) {
     font-size: var(--ui-font-size-sm);
@@ -502,10 +502,10 @@ const hostState = computed(() =>
   :global(.leading:empty:where([data-hn-ui-nav-item])),
   :global(.trailing:empty:where([data-hn-ui-nav-item])),
   :global(.description:empty:where([data-hn-ui-nav-item])) {
-    display: none;
+    display: none !important;
   }
   :global(:scope[hidden]:where([data-hn-ui-nav-item])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiPageHeader.vue

@@ -113,16 +113,16 @@ const hostState = computed(() =>
 
 @scope (.ui-page-header) to ([data-hn]) {
   :global(:scope:where([data-hn-ui-page-header])) {
-    display: flex;
-    flex-wrap: wrap;
+    display: flex !important;
+    flex-wrap: wrap !important;
     inline-size: 100%;
-    align-items: center;
-    gap: var(--ui-space-3) var(--ui-space-4);
+    align-items: center !important;
+    gap: var(--ui-space-3) var(--ui-space-4) !important;
     min-inline-size: 0;
   }
 
   :global(.leading:where([data-hn-ui-page-header])) {
-    display: inline-flex;
+    display: inline-flex !important;
     flex: none;
     align-self: center;
     color: var(--ui-text-muted);
@@ -130,10 +130,10 @@ const hostState = computed(() =>
   }
 
   :global(.copy:where([data-hn-ui-page-header])) {
-    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;
   }
 
@@ -146,7 +146,8 @@ const hostState = computed(() =>
   }
 
   :global(.title:where([data-hn-ui-page-header])) {
-    margin: 0;
+    font-family: var(--ui-font-display, inherit);
+    margin: 0 !important;
     color: var(--ui-text-primary);
     font-size: var(--ui-font-size-2xl);
     font-weight: var(--ui-font-bold, 700);
@@ -161,20 +162,20 @@ const hostState = computed(() =>
   }
 
   :global(.actions:where([data-hn-ui-page-header])) {
-    display: inline-flex;
+    display: inline-flex !important;
     flex: none;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--ui-space-2);
+    flex-wrap: wrap !important;
+    align-items: center !important;
+    gap: var(--ui-space-2) !important;
   }
 
   :global(:scope[data-ui-page-header-state~="align=center"]:where([data-hn-ui-page-header])) {
-    flex-direction: column;
+    flex-direction: column !important;
     text-align: center;
   }
 
   :global(:scope[data-ui-page-header-state~="align=center"] .copy:where([data-hn-ui-page-header])) {
-    align-items: center;
+    align-items: center !important;
     flex-basis: auto;
   }
 
@@ -182,10 +183,10 @@ const hostState = computed(() =>
   :global(.eyebrow:empty:where([data-hn-ui-page-header])),
   :global(.description:empty:where([data-hn-ui-page-header])),
   :global(.actions:empty:where([data-hn-ui-page-header])) {
-    display: none;
+    display: none !important;
   }
   :global(:scope[hidden]:where([data-hn-ui-page-header])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiPopover.vue

@@ -343,14 +343,14 @@ useComponentHost(() => import('../components/ui-popover/ui-popover.js'), {
     --_ui-popover-radius: var(--ui-popover-radius);
     --_ui-popover-shadow: var(--ui-popover-shadow);
     --_ui-popover-padding: var(--ui-popover-padding);
-    box-sizing: border-box;
+    box-sizing: border-box !important;
     max-inline-size: min(
       20rem,
       calc(100vw - var(--ui-popover-viewport-gap, var(--ui-space-2)) * 2)
     );
     max-block-size: calc(100dvh - var(--ui-popover-viewport-gap, var(--ui-space-2)) * 2);
     overflow: visible;
-    padding: 0;
+    padding: 0 !important;
     border: 0;
     outline: 0;
     border-radius: 0;
@@ -359,11 +359,11 @@ useComponentHost(() => import('../components/ui-popover/ui-popover.js'), {
   }
 
   :global(.surface:where([data-hn-ui-popover])) {
-    box-sizing: border-box;
+    box-sizing: border-box !important;
     max-inline-size: inherit;
     max-block-size: inherit;
     overflow: auto;
-    padding: var(--_ui-popover-padding, var(--ui-space-3));
+    padding: var(--_ui-popover-padding, var(--ui-space-3)) !important;
     background: var(--_ui-popover-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
     border: var(--ui-border-width) solid
       var(--_ui-popover-border, var(--ui-overlay-border, var(--ui-border-strong)));
@@ -375,20 +375,20 @@ useComponentHost(() => import('../components/ui-popover/ui-popover.js'), {
   }
   :global(:scope[data-ui-popover-state~="bare"] .surface:where([data-hn-ui-popover])) {
     overflow: visible;
-    padding: 0;
+    padding: 0 !important;
     border: 0;
     background: transparent;
     box-shadow: none;
   }
 
   :global(:scope:not([data-ui-popover-state~="internalOpen"]):where([data-hn-ui-popover])) {
-    display: none;
+    display: none !important;
   }
 
   :global(:scope[popover]:where([data-hn-ui-popover])) {
     position: fixed;
     inset: auto;
-    margin: 0;
+    margin: 0 !important;
     opacity: 0;
     transform: translateY(-4px) scale(0.99);
     transition:
@@ -424,7 +424,7 @@ useComponentHost(() => import('../components/ui-popover/ui-popover.js'), {
   }
 
   :global(:scope[hidden]:where([data-hn-ui-popover])) {
-    display: none;
+    display: none !important;
   }
 
   @media (prefers-reduced-motion: reduce) {