@threadlabs/looma 0.32.0 → 0.33.0

package/vue/UiToastRegion.vue

@@ -384,13 +384,13 @@ useComponentHost(() => import('../components/ui-toast-region/ui-toast-region.js'
     left: 50%;
     transform: translateX(-50%);
     z-index: 9999;
-    display: grid;
-    gap: var(--ui-space-2);
+    display: grid !important;
+    gap: var(--ui-space-2) !important;
     inline-size: min(24rem, calc(100vw - var(--ui-space-4) * 2));
     max-inline-size: 100%;
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
+    box-sizing: border-box !important;
+    margin: 0 !important;
+    padding: 0 !important;
     overflow: visible;
     border: 0;
     outline: 0;
@@ -400,7 +400,7 @@ useComponentHost(() => import('../components/ui-toast-region/ui-toast-region.js'
   }
 
   :global(:scope:not(:popover-open):where([data-hn-ui-toast-region])) {
-    display: none;
+    display: none !important;
   }
 
   :global(:scope[data-ui-toast-region-state~="placement=top-start"]:where([data-hn-ui-toast-region])),
@@ -434,16 +434,16 @@ useComponentHost(() => import('../components/ui-toast-region/ui-toast-region.js'
   :global(.toast:where([data-hn-ui-toast-region])) {
     --_ui-toast-region-accent: var(--ui-border-strong);
     --_ui-toast-region-tone-surface: var(--ui-surface-muted);
-    display: grid;
+    display: grid !important;
     grid-template-columns: 1fr auto;
-    gap: var(--ui-space-2);
-    align-items: start;
+    gap: var(--ui-space-2) !important;
+    align-items: start !important;
     border: var(--ui-border-width) solid
       var(--_ui-toast-region-border, var(--ui-overlay-border, var(--_ui-toast-region-accent)));
     border-radius: var(--_ui-toast-region-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
-    padding: var(--ui-space-3) var(--ui-space-4);
+    padding: var(--ui-space-3) var(--ui-space-4) !important;
     /* The close button's internal space supplies the rest of the trailing inset. */
-    padding-inline-end: var(--ui-space-2);
+    padding-inline-end: var(--ui-space-2) !important;
     background: var(
       --_ui-toast-region-surface,
       var(--ui-overlay-surface, var(--_ui-toast-region-tone-surface))
@@ -509,7 +509,7 @@ useComponentHost(() => import('../components/ui-toast-region/ui-toast-region.js'
     align-self: center;
   }
   :global(:scope[hidden]:where([data-hn-ui-toast-region])) {
-    display: none;
+    display: none !important;
   }
 }
 
@@ -530,13 +530,13 @@ useComponentHost(() => import('../components/ui-toast-region/ui-toast-region.js'
     left: 50%;
     transform: translateX(-50%);
     z-index: 9999;
-    display: grid;
-    gap: var(--ui-space-2);
+    display: grid !important;
+    gap: var(--ui-space-2) !important;
     inline-size: min(24rem, calc(100vw - var(--ui-space-4) * 2));
     max-inline-size: 100%;
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
+    box-sizing: border-box !important;
+    margin: 0 !important;
+    padding: 0 !important;
     overflow: visible;
     border: 0;
     outline: 0;
@@ -546,7 +546,7 @@ useComponentHost(() => import('../components/ui-toast-region/ui-toast-region.js'
   }
 
   :global(:where(.ui-toast-region):not(:popover-open):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast-region"]))):where([data-hn-ui-toast-region])) {
-    display: none;
+    display: none !important;
   }
 
   :global(:where(.ui-toast-region)[data-ui-toast-region-state~="placement=top-start"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast-region"]))):where([data-hn-ui-toast-region])),
@@ -575,16 +575,16 @@ useComponentHost(() => import('../components/ui-toast-region/ui-toast-region.js'
   :global(.toast:where(:scope, :scope *):where([data-hn-ui-toast-region])) {
     --_ui-toast-region-accent: var(--ui-border-strong);
     --_ui-toast-region-tone-surface: var(--ui-surface-muted);
-    display: grid;
+    display: grid !important;
     grid-template-columns: 1fr auto;
-    gap: var(--ui-space-2);
-    align-items: start;
+    gap: var(--ui-space-2) !important;
+    align-items: start !important;
     border: var(--ui-border-width) solid
       var(--_ui-toast-region-border, var(--ui-overlay-border, var(--_ui-toast-region-accent)));
     border-radius: var(--_ui-toast-region-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
-    padding: var(--ui-space-3) var(--ui-space-4);
+    padding: var(--ui-space-3) var(--ui-space-4) !important;
     /* The close button's internal space supplies the rest of the trailing inset. */
-    padding-inline-end: var(--ui-space-2);
+    padding-inline-end: var(--ui-space-2) !important;
     background: var(
       --_ui-toast-region-surface,
       var(--ui-overlay-surface, var(--_ui-toast-region-tone-surface))
@@ -650,7 +650,7 @@ useComponentHost(() => import('../components/ui-toast-region/ui-toast-region.js'
     align-self: center;
   }
   :global(:where(.ui-toast-region)[hidden]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast-region"]))):where([data-hn-ui-toast-region])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiTooltip.vue

@@ -412,10 +412,10 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
 
     position: fixed;
     inset: auto;
-    margin: 0;
-    display: inline-block;
-    box-sizing: border-box;
-    padding: 0;
+    margin: 0 !important;
+    display: inline-block !important;
+    box-sizing: border-box !important;
+    padding: 0 !important;
     border: 0;
     outline: 0;
     border-radius: 0;
@@ -433,16 +433,16 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
   :global(.surface:where([data-hn-ui-tooltip])) {
     --_tooltip-line: var(--_ui-tooltip-border, var(--ui-overlay-border, var(--ui-border-strong)));
     position: relative;
-    display: flex;
-    align-items: baseline;
-    gap: var(--ui-space-2);
-    box-sizing: border-box;
+    display: flex !important;
+    align-items: baseline !important;
+    gap: var(--ui-space-2) !important;
+    box-sizing: border-box !important;
     max-inline-size: var(--_ui-tooltip-max-inline-size, 18rem);
     border: var(--ui-border-width) solid var(--_tooltip-line);
     border-radius: var(--_ui-tooltip-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
     background: var(--_ui-tooltip-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
     color: var(--_ui-tooltip-text, var(--ui-text-primary));
-    padding: var(--ui-space-2) var(--ui-space-3);
+    padding: var(--ui-space-2) var(--ui-space-3) !important;
     font-family: var(--ui-font-family-sans);
     font-size: var(--ui-font-size-sm);
     line-height: var(--ui-line-height-tight);
@@ -452,9 +452,9 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
     );
   }
   :global(.shortcut:where([data-hn-ui-tooltip])) {
-    display: inline-flex;
-    align-items: center;
-    padding-inline-start: var(--ui-space-2);
+    display: inline-flex !important;
+    align-items: center !important;
+    padding-inline-start: var(--ui-space-2) !important;
     border-inline-start: 1px solid color-mix(in oklab, currentColor 28%, transparent);
     color: color-mix(in oklab, currentColor 72%, transparent);
     font-size: var(--ui-font-size-xs);
@@ -464,7 +464,7 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
   }
 
   :global(.shortcut:empty:where([data-hn-ui-tooltip])) {
-    display: none;
+    display: none !important;
   }
   :global(.shortcut :where(:not([data-hn-ui-tooltip])):is(kbd)) {
     font: inherit;
@@ -485,7 +485,7 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
     );
     inline-size: var(--_ui-tooltip-arrow-size, 0.625rem);
     block-size: var(--_ui-tooltip-arrow-size, 0.625rem);
-    box-sizing: border-box;
+    box-sizing: border-box !important;
     background: inherit;
     border: 0 solid var(--_tooltip-line);
     border-inline-end-width: var(--ui-border-width);
@@ -569,7 +569,7 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
   }
 
   :global(:scope[hidden]:where([data-hn-ui-tooltip])) {
-    display: none;
+    display: none !important;
   }
 
   @media (prefers-reduced-motion: reduce) {

package/vue/UiTopBar.vue

@@ -60,18 +60,18 @@ checkHydratedRoot('header', 'ui-top-bar')
     inset-block-start: 0;
     z-index: var(--ui-top-bar-z-index, 100);
     min-block-size: calc(var(--ui-top-bar-height, 56px) + env(safe-area-inset-top));
-    display: flex;
-    align-items: center;
-    gap: var(--ui-top-bar-gap, var(--ui-space-3));
-    padding-block-start: env(safe-area-inset-top);
+    display: flex !important;
+    align-items: center !important;
+    gap: var(--ui-top-bar-gap, var(--ui-space-3)) !important;
+    padding-block-start: env(safe-area-inset-top) !important;
     padding-inline-start: max(
       var(--ui-top-bar-padding-inline, var(--ui-space-4)),
       env(safe-area-inset-left)
-    );
+    ) !important;
     padding-inline-end: max(
       var(--ui-top-bar-padding-inline, var(--ui-space-4)),
       env(safe-area-inset-right)
-    );
+    ) !important;
     background: var(--ui-top-bar-surface, var(--ui-surface-elevated));
     border-block-end: var(--ui-border-width) solid
       var(--ui-top-bar-border, var(--ui-border-divider));
@@ -80,13 +80,13 @@ checkHydratedRoot('header', 'ui-top-bar')
   :global(.leading:where([data-hn-ui-top-bar])),
   :global(.search:where([data-hn-ui-top-bar])),
   :global(.actions:where([data-hn-ui-top-bar])) {
-    display: flex;
-    align-items: center;
+    display: flex !important;
+    align-items: center !important;
     flex-shrink: 0;
   }
 
   :global(.actions:where([data-hn-ui-top-bar])) {
-    gap: var(--_ui-top-bar-actions-gap, var(--ui-space-1));
+    gap: var(--_ui-top-bar-actions-gap, var(--ui-space-1)) !important;
   }
 
   :global(.title:where([data-hn-ui-top-bar])) {
@@ -96,10 +96,10 @@ checkHydratedRoot('header', 'ui-top-bar')
   :global(.leading:empty:where([data-hn-ui-top-bar])),
   :global(.search:empty:where([data-hn-ui-top-bar])),
   :global(.actions:empty:where([data-hn-ui-top-bar])) {
-    display: none;
+    display: none !important;
   }
   :global(:scope[hidden]:where([data-hn-ui-top-bar])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiTree.vue

@@ -415,20 +415,20 @@ useComponentHost(() => import('../components/ui-tree/ui-tree.js'), {
     --_ui-default-tree-item-min-block-size: initial;
     --_ui-default-tree-item-font-size: initial;
     --_ui-default-tree-item-label-padding-block: initial;
-    display: block;
+    display: block !important;
     min-inline-size: 0;
-    padding-inline-start: var(--ui-tree-gutter, 0px);
+    padding-inline-start: var(--ui-tree-gutter, 0px) !important;
   }
 
   :global(:scope[data-move-mode]:where([data-hn-ui-tree])::after) {
     content: "Choose a destination row, or use Up and Down; Right nests inside a branch. Enter places it, Escape cancels.";
-    display: block;
-    padding: var(--ui-space-2);
+    display: block !important;
+    padding: var(--ui-space-2) !important;
     color: var(--ui-text-secondary);
     font-size: var(--ui-font-size-sm);
   }
   :global(:scope[hidden]:where([data-hn-ui-tree])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>