@threadlabs/looma 0.32.1 → 0.33.0

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]) {

package/styles/ui-page-header.css

@@ -11,16 +11,16 @@
        short eyebrow above it, a line or two of description under it, and the view's own actions at
        the end. Every view titles itself the same way, at the same size. */
     :scope:where([data-component~="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;
     }
 
     .leading {
-      display: inline-flex;
+      display: inline-flex !important;
       flex: none;
       align-self: center;
       color: var(--ui-text-muted);
@@ -28,10 +28,10 @@
     }
 
     .copy {
-      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;
     }
 
@@ -44,7 +44,8 @@
     }
 
     .title {
-      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);
@@ -59,20 +60,20 @@
     }
 
     .actions {
-      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;
     }
 
     :scope:where([data-component~="ui-page-header"])[data-ui-page-header-state~="align=center"] {
-      flex-direction: column;
+      flex-direction: column !important;
       text-align: center;
     }
 
     :scope:where([data-component~="ui-page-header"])[data-ui-page-header-state~="align=center"] .copy {
-      align-items: center;
+      align-items: center !important;
       flex-basis: auto;
     }
 
@@ -80,12 +81,12 @@
     .eyebrow:empty,
     .description:empty,
     .actions: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-page-header"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-page-header"]) to ([data-component]) {

package/styles/ui-popover.css

@@ -43,14 +43,14 @@
       --_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;
@@ -59,11 +59,11 @@
     }
 
     .surface {
-      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)));
       border-radius: var(--_ui-popover-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
@@ -73,20 +73,20 @@
     /* A toolbar or card can supply its own surface, including an unclipped shadow. */
     :scope:where([data-component~="ui-popover"])[data-ui-popover-state~="bare"] .surface {
       overflow: visible;
-      padding: 0;
+      padding: 0 !important;
       border: 0;
       background: transparent;
       box-shadow: none;
     }
 
     :scope:where([data-component~="ui-popover"]):not([data-ui-popover-state~="internalOpen"]) {
-      display: none;
+      display: none !important;
     }
 
     :scope:where([data-component~="ui-popover"])[popover] {
       position: fixed;
       inset: auto;
-      margin: 0;
+      margin: 0 !important;
       opacity: 0;
       transform: translateY(-4px) scale(0.99);
       transition:
@@ -122,7 +122,7 @@
     }
 
     :scope:where([data-component~="ui-popover"])[hidden] {
-      display: none;
+      display: none !important;
     }
 
     @media (prefers-reduced-motion: reduce) {

package/styles/ui-radio-group.css

@@ -14,20 +14,20 @@
 
     :scope:where([data-component~="ui-radio-group"]) {
       --_ui-radio-group-invalid-text: var(--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;
     }
 
     legend {
       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);
     }
@@ -50,13 +50,13 @@
     }
 
     :scope:where([data-component~="ui-radio-group"])[data-ui-radio-group-state~="orientation=vertical"] {
-      display: inline-grid;
-      justify-items: start;
+      display: inline-grid !important;
+      justify-items: start !important;
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-radio-group"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-radio-group"]) to ([data-component]) {