@threadlabs/looma 0.32.1 → 0.33.1

package/styles/ui-tabs.css

@@ -40,16 +40,16 @@
     }
 
     :scope:where([data-component~="ui-tabs"]) {
-      display: grid;
+      display: grid !important;
       inline-size: 100%;
       min-inline-size: 0;
     }
 
     .list {
-      display: grid;
+      display: grid !important;
       grid-auto-flow: column;
       grid-auto-columns: max-content;
-      justify-content: start;
+      justify-content: start !important;
       inline-size: 100%;
       max-inline-size: 100%;
       /* Tabs that do not fit scroll sideways rather than wrapping or squeezing. */
@@ -78,7 +78,7 @@
 
     :scope:where([data-component~="ui-tabs"])[data-ui-tabs-state~="orientation=vertical"] {
       grid-template-columns: max-content minmax(0, 1fr);
-      align-items: start;
+      align-items: start !important;
     }
 
     :scope:where([data-component~="ui-tabs"])[data-ui-tabs-state~="orientation=vertical"] .list {
@@ -93,7 +93,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-tabs"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-tabs"]) to ([data-component]) {
@@ -104,8 +104,8 @@
     .list button,
     .list > :where([data-slotted], [data-slotted] *):is(button[slot="tab"]) {
       min-block-size: var(--_ui-tabs-tab-min-block-size, var(--_tab-min-block-size));
-      margin: 0 0 calc(-1 * var(--ui-border-width));
-      padding: var(--_ui-tabs-tab-padding-block, var(--_tab-padding-block)) var(--_ui-tabs-tab-padding-inline, var(--_tab-padding-inline));
+      margin: 0 0 calc(-1 * var(--ui-border-width)) !important;
+      padding: var(--_ui-tabs-tab-padding-block, var(--_tab-padding-block)) var(--_ui-tabs-tab-padding-inline, var(--_tab-padding-inline)) !important;
       border: 0;
       border-block-end: var(--ui-accent-line-width) solid transparent;
       background: transparent;
@@ -126,9 +126,9 @@
     @supports (text-box-trim: trim-both) {
       .list button,
       .list > :where([data-slotted], [data-slotted] *):is(button[slot="tab"]) {
-        display: block;
+        display: block !important;
         text-align: center;
-        align-content: center;
+        align-content: center !important;
         text-box-trim: trim-both;
         text-box-edge: cap alphabetic;
       }
@@ -157,12 +157,12 @@
       border-radius: var(--ui-radius-sm);
     }
     .panels > :where([data-slotted], [data-slotted] *):is(*) {
-      padding: var(--ui-space-4);
+      padding: var(--ui-space-4) !important;
     }
 
     :scope:where([data-component~="ui-tabs"])[data-ui-tabs-state~="orientation=vertical"] .list button,
     :scope:where([data-component~="ui-tabs"])[data-ui-tabs-state~="orientation=vertical"] .list > :where([data-slotted], [data-slotted] *):is(button[slot="tab"]) {
-      margin: 0 calc(-1 * var(--ui-border-width)) 0 0;
+      margin: 0 calc(-1 * var(--ui-border-width)) 0 0 !important;
       border-block-end: 0;
       border-inline-end: var(--ui-accent-line-width) solid transparent;
       text-align: start;

package/styles/ui-text.css

@@ -15,7 +15,7 @@
     }
 
     :scope:where([data-component~="ui-text"]) {
-      margin: 0;
+      margin: 0 !important;
       min-inline-size: 0;
       color: var(--ui-text-primary);
       text-align: start;
@@ -24,6 +24,7 @@
     /* A heading drops the browser's heading size and weight, so size and weight set it as they set
        any text, and inherit keeps the text around it. */
     :scope:where([data-component~="ui-text"]):is(h2, h3, h4, h5, h6) {
+      font-family: var(--ui-font-display, inherit);
       font-size: inherit;
       font-weight: inherit;
     }
@@ -124,7 +125,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-text"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-text"]) to ([data-component]) {

package/styles/ui-textarea.css

@@ -58,15 +58,15 @@
     }
 
     :scope:where([data-component~="ui-textarea"]) {
-      box-sizing: border-box;
-      display: inline-block;
+      box-sizing: border-box !important;
+      display: inline-block !important;
       inline-size: 100%;
       min-inline-size: 0;
       min-block-size: calc(3rem * 2);
-      margin: 0;
+      margin: 0 !important;
       --_padding-block: var(--ui-space-2);
-      padding: var(--ui-space-2) var(--ui-space-3);
-      padding-inline-end: var(--ui-textarea-padding-inline-end, var(--_ui-default-textarea-padding-inline-end, var(--ui-space-3)));
+      padding: var(--ui-space-2) var(--ui-space-3) !important;
+      padding-inline-end: var(--ui-textarea-padding-inline-end, var(--_ui-default-textarea-padding-inline-end, var(--ui-space-3))) !important;
       appearance: none;
       resize: vertical;
       border: var(--ui-textarea-border-width, var(--_ui-default-textarea-border-width, var(--ui-border-width))) solid
@@ -134,15 +134,15 @@
 
     :scope:where([data-component~="ui-textarea"])[data-ui-textarea-state~="size=sm"] {
       --_padding-block: var(--ui-space-1);
-      padding: var(--ui-space-1) var(--ui-space-2);
-      padding-inline-end: var(--ui-textarea-padding-inline-end, var(--_ui-default-textarea-padding-inline-end, var(--ui-space-2)));
+      padding: var(--ui-space-1) var(--ui-space-2) !important;
+      padding-inline-end: var(--ui-textarea-padding-inline-end, var(--_ui-default-textarea-padding-inline-end, var(--ui-space-2))) !important;
       font-size: var(--ui-font-size-sm);
     }
 
     :scope:where([data-component~="ui-textarea"])[data-ui-textarea-state~="size=lg"] {
       --_padding-block: var(--ui-space-3);
-      padding: var(--ui-space-3) var(--ui-space-4);
-      padding-inline-end: var(--ui-textarea-padding-inline-end, var(--_ui-default-textarea-padding-inline-end, var(--ui-space-4)));
+      padding: var(--ui-space-3) var(--ui-space-4) !important;
+      padding-inline-end: var(--ui-textarea-padding-inline-end, var(--_ui-default-textarea-padding-inline-end, var(--ui-space-4))) !important;
       font-size: var(--ui-font-size-md);
     }
 
@@ -166,7 +166,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-textarea"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-textarea"]) to ([data-component]) {

package/styles/ui-toast-region.css

@@ -49,13 +49,13 @@
       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;
@@ -65,7 +65,7 @@
     }
 
     :scope:where([data-component~="ui-toast-region"]):not(:popover-open) {
-      display: none;
+      display: none !important;
     }
 
     :scope:where([data-component~="ui-toast-region"])[data-ui-toast-region-state~="placement=top-start"],
@@ -94,15 +94,15 @@
     .toast {
       --_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)));
       color: var(--ui-text-primary);
       font-family: var(--ui-font-family-sans);
@@ -205,7 +205,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-toast-region"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-toast-region"]) to ([data-component]) {
@@ -266,13 +266,13 @@
       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;
@@ -282,7 +282,7 @@
     }
 
     :where([data-component~="ui-toast-region"]):not(:popover-open):where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-toast-region"]))) {
-      display: none;
+      display: none !important;
     }
 
     :where([data-component~="ui-toast-region"])[data-ui-toast-region-state~="placement=top-start"]:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-toast-region"]))), :where([data-component~="ui-toast-region"])[data-ui-toast-region-state~="placement=bottom-start"]:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-toast-region"]))) {
@@ -307,15 +307,15 @@
     .toast:where(:scope, :scope *) {
       --_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)));
       color: var(--ui-text-primary);
       font-family: var(--ui-font-family-sans);
@@ -418,6 +418,6 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :where([data-component~="ui-toast-region"])[hidden]:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-toast-region"]))) {
-      display: none;
+      display: none !important;
     }
 }

package/styles/ui-toast.css

@@ -33,15 +33,15 @@
       --_ui-toast-accent: var(--ui-border-strong);
       --_ui-toast-surface: var(--ui-surface-muted);
 
-      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;
       inline-size: 100%;
-      margin: 0;
-      padding: var(--ui-space-3) var(--ui-space-4);
+      margin: 0 !important;
+      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;
       border: var(--ui-border-width) solid var(--ui-toast-border, var(--ui-overlay-border, var(--ui-toast-accent, var(--_ui-toast-accent))));
       border-radius: var(--ui-toast-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
       background: var(--ui-toast-surface, var(--ui-overlay-surface, var(--_ui-toast-surface)));
@@ -76,10 +76,10 @@
       flex: 1;
     }
     .action:not(:has(> *)) {
-      display: none;
+      display: none !important;
     }
     :scope:where([data-component~="ui-toast"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-toast"]) to ([data-component]) {
@@ -112,15 +112,15 @@
       --_ui-toast-accent: var(--ui-border-strong);
       --_ui-toast-surface: var(--ui-surface-muted);
 
-      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;
       inline-size: 100%;
-      margin: 0;
-      padding: var(--ui-space-3) var(--ui-space-4);
+      margin: 0 !important;
+      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;
       border: var(--ui-border-width) solid var(--ui-toast-border, var(--ui-overlay-border, var(--ui-toast-accent, var(--_ui-toast-accent))));
       border-radius: var(--ui-toast-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
       background: var(--ui-toast-surface, var(--ui-overlay-surface, var(--_ui-toast-surface)));
@@ -155,9 +155,9 @@
       flex: 1;
     }
     .action:not(:has(> *)):where(:scope, :scope *) {
-      display: none;
+      display: none !important;
     }
     :where([data-component~="ui-toast"])[hidden]:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-toast"]))) {
-      display: none;
+      display: none !important;
     }
 }

package/styles/ui-tooltip.css

@@ -63,10 +63,10 @@
 
       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;
@@ -86,16 +86,16 @@
     .surface {
       --_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);
@@ -105,9 +105,9 @@
     /* A keyboard shortcut follows the label after a thin divider, smaller and quieter, as menus show
        it. The label stays first in the description, so a screen reader hears the name, then the keys. */
     .shortcut {
-      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);
@@ -117,7 +117,7 @@
     }
 
     .shortcut:empty {
-      display: none;
+      display: none !important;
     }
 
     /* A <kbd> takes the browser's monospace; the hint reads in the tooltip's own type. */
@@ -138,7 +138,7 @@
       inset-block-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2);
       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);
@@ -212,7 +212,7 @@
     }
 
     :scope:where([data-component~="ui-tooltip"])[hidden] {
-      display: none;
+      display: none !important;
     }
 
     @media (prefers-reduced-motion: reduce) {

package/styles/ui-top-bar.css

@@ -45,12 +45,12 @@
       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);
-      padding-inline-start: max(var(--ui-top-bar-padding-inline, var(--ui-space-4)), env(safe-area-inset-left));
-      padding-inline-end: max(var(--ui-top-bar-padding-inline, var(--ui-space-4)), env(safe-area-inset-right));
+      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));
     }
@@ -58,13 +58,13 @@
     .leading,
     .search,
     .actions {
-      display: flex;
-      align-items: center;
+      display: flex !important;
+      align-items: center !important;
       flex-shrink: 0;
     }
 
     .actions {
-      gap: var(--_ui-top-bar-actions-gap, var(--ui-space-1));
+      gap: var(--_ui-top-bar-actions-gap, var(--ui-space-1)) !important;
     }
 
     .title {
@@ -76,12 +76,12 @@
     .leading:empty,
     .search: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-top-bar"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-top-bar"]) to ([data-component]) {