@threadlabs/looma 0.32.1 → 0.33.1

package/styles/ui-list-item.css

@@ -39,22 +39,22 @@
       --_ui-list-item-icon-size: var(--ui-list-item-icon-size);
 
       position: relative;
-      box-sizing: border-box;
-      display: flex;
-      align-items: center;
-      gap: var(--ui-list-item-gap, var(--ui-space-3));
+      box-sizing: border-box !important;
+      display: flex !important;
+      align-items: center !important;
+      gap: var(--ui-list-item-gap, var(--ui-space-3)) !important;
       min-inline-size: 0;
       min-block-size: var(--_ui-list-item-min-size, var(--ui-control-size, 2.5rem));
-      padding-block: var(--ui-list-item-padding-block, var(--_ui-list-item-padding-block, var(--ui-space-2)));
-      padding-inline: var(--ui-list-item-padding-inline, var(--_ui-list-item-padding-inline, var(--ui-space-3)));
+      padding-block: var(--ui-list-item-padding-block, var(--_ui-list-item-padding-block, var(--ui-space-2))) !important;
+      padding-inline: var(--ui-list-item-padding-inline, var(--_ui-list-item-padding-inline, var(--ui-space-3))) !important;
       border-radius: var(--ui-selection-radius);
       color: var(--ui-text-primary);
       transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), border-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
     :scope:where([data-component~="ui-list-item"])[data-ui-list-item-state~="variant=card"] {
-      padding-block: var(--ui-list-item-padding-block, var(--ui-space-3));
-      padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-4));
+      padding-block: var(--ui-list-item-padding-block, var(--ui-space-3)) !important;
+      padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-4)) !important;
       border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: var(--ui-radius-lg);
       background: var(--ui-surface-raised);
@@ -86,10 +86,10 @@
 
     .leading,
     .trailing {
-      display: inline-flex;
+      display: inline-flex !important;
       flex: none;
-      align-items: center;
-      gap: var(--ui-space-2);
+      align-items: center !important;
+      gap: var(--ui-space-2) !important;
     }
 
     .leading {
@@ -116,16 +116,16 @@
     }
 
     .content {
-      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;
     }
 
     .title,
     .description {
-      display: block;
+      display: block !important;
       min-inline-size: 0;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -146,7 +146,7 @@
 
     /* Keep identity and disclosure marks beside the first line, even with a long description. */
     :scope:where([data-component~="ui-list-item"])[data-ui-list-item-state~="align=title"] {
-      align-items: flex-start;
+      align-items: flex-start !important;
     }
 
     :scope:where([data-component~="ui-list-item"])[data-ui-list-item-state~="align=title"] .leading,
@@ -164,7 +164,7 @@
     .leading:empty,
     .description:empty,
     .trailing:empty {
-      display: none;
+      display: none !important;
     }
 
     @media (forced-colors: active) {
@@ -180,7 +180,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-list-item"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-list-item"]) to ([data-component]) {

package/styles/ui-list.css

@@ -23,19 +23,19 @@
     :scope:where([data-component~="ui-list"]) {
       --_list-gap: var(--ui-list-gap, var(--ui-space-1));
       --_list-min-item-width: var(--ui-list-min-item-width, 14rem);
-      display: flex;
-      flex-direction: column;
+      display: flex !important;
+      flex-direction: column !important;
       inline-size: 100%;
-      gap: var(--_list-gap);
+      gap: var(--_list-gap) !important;
       min-inline-size: 0;
-      margin: 0;
-      padding: 0;
+      margin: 0 !important;
+      padding: 0 !important;
       list-style: none;
     }
 
     :scope:where([data-component~="ui-list"])[data-ui-list-state~="as=ol"],
     :scope:where([data-component~="ui-list"])[data-ui-list-state~="markers=disc"] {
-      padding-inline-start: var(--ui-space-5);
+      padding-inline-start: var(--ui-space-5) !important;
     }
 
     :scope:where([data-component~="ui-list"])[data-ui-list-state~="as=ol"] {
@@ -59,13 +59,13 @@
 
     :scope:where([data-component~="ui-list"])[data-ui-list-state~="layout=grid"] {
       --_list-gap: var(--ui-list-gap, var(--ui-space-3));
-      display: grid;
+      display: grid !important;
       grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_list-min-item-width)), 1fr));
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-list"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-list"]) to ([data-component]) {
@@ -76,16 +76,16 @@
        markers. */
 
     :scope:where([data-component~="ui-list"]) > :where([data-slotted], [data-slotted] *):is(li) {
-      box-sizing: border-box;
+      box-sizing: border-box !important;
       min-inline-size: 0;
-      padding: var(--_ui-list-native-padding-block, var(--ui-space-2)) var(--_ui-list-native-padding-inline, var(--ui-space-3));
+      padding: var(--_ui-list-native-padding-block, var(--ui-space-2)) var(--_ui-list-native-padding-inline, var(--ui-space-3)) !important;
       border-radius: var(--ui-radius-md);
       color: var(--ui-text-primary);
       list-style: inherit;
     }
 
     :scope:where([data-component~="ui-list"]) > :where([data-slotted], [data-slotted] *):is(li.card) {
-      padding: var(--_ui-list-native-padding-block, var(--ui-space-3)) var(--_ui-list-native-padding-inline, var(--ui-space-4));
+      padding: var(--_ui-list-native-padding-block, var(--ui-space-3)) var(--_ui-list-native-padding-inline, var(--ui-space-4)) !important;
       border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: var(--ui-radius-lg);
       background: var(--ui-surface-raised);

package/styles/ui-listbox.css

@@ -30,12 +30,12 @@
 
     :scope:where([data-component~="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));
@@ -48,13 +48,13 @@
 
     /* Its own box around the nested Scroll Area, which it shrinks into so the choices scroll. */
     .choices {
-      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));
     }
 
     :scope:where([data-component~="ui-listbox"]):not([data-enhanced]) {
-      padding: 0;
+      padding: 0 !important;
       border: 0;
       background: transparent;
       box-shadow: none;
@@ -62,11 +62,11 @@
 
     :scope:where([data-component~="ui-listbox"]):not([data-enhanced]) .choices,
     :scope:where([data-component~="ui-listbox"])[data-enhanced] .fallback {
-      display: none;
+      display: none !important;
     }
 
     .fallback {
-      box-sizing: border-box;
+      box-sizing: border-box !important;
       inline-size: 100%;
       font: inherit;
     }
@@ -100,7 +100,7 @@
     }
 
     :scope:where([data-component~="ui-listbox"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-listbox"]) to ([data-component]) {
@@ -130,12 +130,12 @@
 
     :where([data-component~="ui-listbox"]):where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="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));
@@ -148,24 +148,24 @@
 
     /* Its own box around the nested Scroll Area, which it shrinks into so the choices scroll. */
     .choices:where(:scope, :scope *) {
-      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));
     }
 
     :where([data-component~="ui-listbox"]):not([data-enhanced]):where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-listbox"]))) {
-      padding: 0;
+      padding: 0 !important;
       border: 0;
       background: transparent;
       box-shadow: none;
     }
 
     :where([data-component~="ui-listbox"]):not([data-enhanced]) .choices:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-listbox"]))), :where([data-component~="ui-listbox"])[data-enhanced] .fallback:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-listbox"]))) {
-      display: none;
+      display: none !important;
     }
 
     .fallback:where(:scope, :scope *) {
-      box-sizing: border-box;
+      box-sizing: border-box !important;
       inline-size: 100%;
       font: inherit;
     }
@@ -199,6 +199,6 @@
     }
 
     :where([data-component~="ui-listbox"])[hidden]:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-listbox"]))) {
-      display: none;
+      display: none !important;
     }
 }

package/styles/ui-menu-group.css

@@ -8,19 +8,19 @@
 }
 @scope ([data-component~="ui-menu-group"]) to ([data-component], [data-slotted]) {
 :scope:where([data-component~="ui-menu-group"]) {
-      display: flex;
-      flex-direction: column;
+      display: flex !important;
+      flex-direction: column !important;
       min-inline-size: 0;
     }
 
     .heading {
-      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);
     }
 
     :scope:where([data-component~="ui-menu-group"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }

package/styles/ui-menu-item.css

@@ -34,13 +34,13 @@
     }
 
     :scope:where([data-component~="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, var(--_ui-default-menu-item-padding-block, var(--ui-space-2)))
-        var(--ui-menu-item-padding-inline, var(--_ui-default-menu-item-padding-inline, var(--ui-space-3)));
+        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, var(--_ui-default-menu-item-radius, var(--ui-selection-radius)));
       color: var(--ui-text-primary);
@@ -54,16 +54,16 @@
 
     /* A named icon has a fixed column; an icon-enabled menu reserves it on every row. */
     .icon {
-      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);
     }
 
     .icon:not(:empty) {
-      display: inline-flex;
+      display: inline-flex !important;
     }
 
     :scope:where([data-component~="ui-menu-item"])[data-ui-menu-item-state~="tone=danger"] {
@@ -71,19 +71,19 @@
     }
 
     .label {
-      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;
     }
 
     .indicator {
-      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);
@@ -93,7 +93,7 @@
     }
 
     :scope:where([data-component~="ui-menu-item"])[data-ui-menu-item-state~="type=action"] .indicator {
-      display: none;
+      display: none !important;
     }
 
     :scope:where([data-component~="ui-menu-item"])[data-ui-menu-item-state~="type=checkbox"][aria-checked="true"] .indicator {
@@ -109,14 +109,14 @@
     }
 
     .shortcut {
-      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);
     }
 
     .shortcut:empty {
-      display: none;
+      display: none !important;
     }
 
     /* A <kbd> takes the browser's monospace; the hint reads in the item's own type. */
@@ -163,7 +163,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-menu-item"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-menu-item"]) to ([data-component]) {

package/styles/ui-menu.css

@@ -36,8 +36,8 @@
       --_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;
     }
 
     /* Small follows its trigger down: an item's own hooks still win. */
@@ -49,8 +49,8 @@
       --_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;
     }
 
     :scope:where([data-component~="ui-menu"])[data-ui-menu-state~="icons"] {
@@ -70,13 +70,13 @@
       --_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;
@@ -86,11 +86,11 @@
     }
 
     .surface {
-      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)));
       border-radius: var(--_ui-menu-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
@@ -102,19 +102,19 @@
     .surface hr {
       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);
     }
 
     :scope:where([data-component~="ui-menu"]):not([data-ui-menu-state~="internalOpen"]):not(:scope:where([data-component~="ui-menu"])[data-ui-menu-state~="inline"]) {
-      display: none;
+      display: none !important;
     }
 
     :scope:where([data-component~="ui-menu"])[popover] {
       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;
@@ -139,7 +139,7 @@
     }
 
     :scope:where([data-component~="ui-menu"])[hidden] {
-      display: none;
+      display: none !important;
     }
 
     @media (prefers-reduced-motion: reduce) {

package/styles/ui-meter.css

@@ -18,7 +18,7 @@
     :scope:where([data-component~="ui-meter"]) {
       --_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);
@@ -38,7 +38,7 @@
     }
 
     .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%);
@@ -132,10 +132,10 @@
     /* A categorical distribution uses flex ratios, avoiding rounded percentages and retaining
        identical geometry before hydration. It has no progress mask or growing-value animation. */
     :scope:where([data-component~="ui-meter"])[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;
     }
 
     :scope:where([data-component~="ui-meter"])[data-ui-meter-state~="variant=distribution"][size="sm"] {
@@ -181,7 +181,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-meter"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-meter"]) to ([data-component]) {

package/styles/ui-nav-item.css

@@ -33,16 +33,16 @@
       --_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;
@@ -91,12 +91,12 @@
       position: absolute;
       inset-block: 0;
       inset-inline-start: 0;
-      display: none;
+      display: none !important;
       border-inline-start: var(--_indicator-width) solid var(--_indicator-color);
     }
 
     :scope:where([data-component~="ui-nav-item"])[data-ui-nav-item-state~="variant=line"][aria-current] .indicator {
-      display: block;
+      display: block !important;
     }
 
     @media (forced-colors: active) {
@@ -113,26 +113,26 @@
 
     .leading,
     .trailing {
-      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);
     }
 
     .content {
-      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;
     }
 
     .label,
     .description {
-      display: block;
+      display: block !important;
       min-inline-size: 0;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -153,8 +153,8 @@
 
     :scope:where([data-component~="ui-nav-item"])[data-ui-nav-item-state~="density=compact"] {
       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;
     }
     :scope:where([data-component~="ui-nav-item"])[data-ui-nav-item-state~="density=compact"] .label {
       font-size: var(--ui-font-size-sm);
@@ -170,12 +170,12 @@
     .leading:empty,
     .trailing:empty,
     .description:empty {
-      display: none;
+      display: none !important;
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-nav-item"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-nav-item"]) to ([data-component]) {