@threadlabs/looma 0.32.1 → 0.33.1

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

package/styles/ui-radio.css

@@ -19,11 +19,15 @@
 
     :scope:where([data-component~="ui-radio"]) {
       /* Hooks do not inherit, so the parts below read them from the root. */
-      --_ui-radio-size: var(--ui-radio-size);
-
-      display: inline-flex;
-      align-items: flex-start;
-      gap: var(--ui-radio-gap, var(--ui-space-2));
+      --_ui-radio-size: var(--ui-radio-size, var(--ui-choice-mark-size));
+
+      display: inline-flex !important;
+      align-items: flex-start !important;
+      flex-direction: row !important;
+      flex-wrap: nowrap !important;
+      padding: 0 !important;
+      line-height: var(--ui-line-height-md) !important;
+      gap: var(--ui-radio-gap, var(--ui-space-2)) !important;
       max-inline-size: 100%;
       color: var(--ui-text-primary);
       cursor: pointer;
@@ -31,15 +35,21 @@
 
     /* The label, and under it an optional line saying what the choice means. */
     .text {
-      display: flex;
-      flex-direction: column;
-      gap: var(--ui-space-1);
+      font: inherit !important;
+      align-self: auto !important;
+      margin: 0 !important;
+      padding: 0 !important;
+      display: flex !important;
+      flex-direction: column !important;
+      gap: var(--ui-space-1) !important;
       min-inline-size: 0;
     }
 
     .label {
       min-inline-size: 0;
-      line-height: var(--ui-line-height-md);
+      font: inherit !important;
+      line-height: var(--ui-line-height-md) !important;
+      padding-block: max(0px, calc((var(--_ui-radio-size, 1.125rem) - 1lh) / 2)) !important;
     }
 
     .description {
@@ -49,14 +59,17 @@
     }
 
     .description:empty {
-      display: none;
+      display: none !important;
     }
 
     input {
+      font: inherit !important;
+      box-sizing: border-box !important;
+      align-self: auto !important;
       flex: 0 0 auto;
       inline-size: var(--_ui-radio-size, 1.125rem);
       block-size: var(--_ui-radio-size, 1.125rem);
-      margin: calc(0.125em + 1px) 0 0;
+      margin: max(0px, calc((1lh - var(--_ui-radio-size, 1.125rem)) / 2)) 0 0 !important;
       accent-color: var(--ui-accent-solid);
       cursor: pointer;
     }
@@ -94,12 +107,7 @@
     :scope:where([data-component~="ui-radio"])[data-ui-radio-state~="size=lg"] {
       --_line: calc(var(--_font) * var(--ui-line-height-md));
       font-size: var(--_font);
-      padding-block: calc((var(--_row) - var(--_line)) / 2);
-    }
-
-    :scope:where([data-component~="ui-radio"])[data-ui-radio-state~="size=sm"] input,
-    :scope:where([data-component~="ui-radio"])[data-ui-radio-state~="size=lg"] input {
-      margin-top: calc((var(--_line) - var(--_ui-radio-size, 1.125rem)) / 2 + 1px);
+      padding-block: max(0px, calc((var(--_row) - max(var(--_line), var(--_ui-radio-size, 1.125rem))) / 2)) !important;
     }
 
     @media (pointer: coarse) {
@@ -110,7 +118,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-radio"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-radio"]) to ([data-component]) {

package/styles/ui-reel.css

@@ -22,15 +22,15 @@
       --_reel-item-width: max-content;
       /* Sizes its children from its own box: one row of columns, each the item width, that never
          shrinks to fit, so the reel scrolls once they overflow. */
-      display: grid;
+      display: grid !important;
       grid-auto-flow: column;
       grid-auto-columns: var(--ui-reel-item-width, var(--_reel-item-width));
-      justify-content: start;
+      justify-content: start !important;
       inline-size: 100%;
-      gap: var(--ui-reel-gap, var(--_reel-gap));
+      gap: var(--ui-reel-gap, var(--_reel-gap)) !important;
       min-inline-size: 0;
       max-inline-size: 100%;
-      margin: 0;
+      margin: 0 !important;
       overflow-x: auto;
       overflow-y: hidden;
       overscroll-behavior-inline: contain;
@@ -90,7 +90,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-reel"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-reel"]) to ([data-component]) {

package/styles/ui-scroll-area.css

@@ -15,8 +15,8 @@
     }
 
     :scope:where([data-component~="ui-scroll-area"]) {
-      display: block;
-      box-sizing: border-box;
+      display: block !important;
+      box-sizing: border-box !important;
       min-block-size: 0;
       min-inline-size: 0;
       overflow-x: hidden;
@@ -35,7 +35,7 @@
     }
 
     .content {
-      display: flow-root;
+      display: flow-root !important;
     }
 
     /* Trim projected edges without changing spacing inside an item. */
@@ -61,21 +61,21 @@
     }
 
     :scope:where([data-component~="ui-scroll-area"])[data-ui-scroll-area-state~="padding=xs"] {
-      padding: var(--ui-space-2);
+      padding: var(--ui-space-2) !important;
     }
     :scope:where([data-component~="ui-scroll-area"])[data-ui-scroll-area-state~="padding=sm"] {
-      padding: var(--ui-space-3);
+      padding: var(--ui-space-3) !important;
     }
     :scope:where([data-component~="ui-scroll-area"])[data-ui-scroll-area-state~="padding=md"] {
-      padding: var(--ui-space-5);
+      padding: var(--ui-space-5) !important;
     }
     :scope:where([data-component~="ui-scroll-area"])[data-ui-scroll-area-state~="padding=lg"] {
-      padding: var(--ui-space-6);
+      padding: var(--ui-space-6) !important;
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-scroll-area"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-scroll-area"]) to ([data-component]) {
@@ -85,11 +85,11 @@
 
     /* Trim projected edges without changing spacing inside an item. */
     :scope:where([data-component~="ui-scroll-area"])[data-ui-scroll-area-state~="trim"] .content > :where([data-slotted], [data-slotted] *):is(:first-child) {
-      margin-block-start: 0;
+      margin-block-start: 0 !important;
     }
 
     :scope:where([data-component~="ui-scroll-area"])[data-ui-scroll-area-state~="trim"] .content > :where([data-slotted], [data-slotted] *):is(:last-child) {
-      margin-block-end: 0;
+      margin-block-end: 0 !important;
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */

package/styles/ui-search-result-row.css

@@ -45,12 +45,12 @@
       appearance: none;
       inline-size: 100%;
       min-block-size: var(--ui-search-result-row-min-height, 56px);
-      margin: 0;
-      padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-3));
-      padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-4));
-      display: flex;
-      align-items: flex-start;
-      gap: var(--ui-search-result-row-gap, var(--ui-space-3));
+      margin: 0 !important;
+      padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-3)) !important;
+      padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-4)) !important;
+      display: flex !important;
+      align-items: flex-start !important;
+      gap: var(--ui-search-result-row-gap, var(--ui-space-3)) !important;
       background: var(--ui-search-result-row-surface, transparent);
       border: var(--ui-border-width) solid var(--ui-search-result-row-border, transparent);
       border-radius: var(--ui-selection-radius);
@@ -62,10 +62,10 @@
 
     :scope:where([data-component~="ui-search-result-row"])[data-ui-search-result-row-state~="density=compact"] {
       min-block-size: var(--ui-search-result-row-min-height, 3.125rem);
-      padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-1));
-      padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-2));
-      gap: var(--ui-search-result-row-gap, var(--ui-space-2));
-      align-items: center;
+      padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-1)) !important;
+      padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-2)) !important;
+      gap: var(--ui-search-result-row-gap, var(--ui-space-2)) !important;
+      align-items: center !important;
       font-family: var(--ui-font-family-sans, sans-serif);
     }
 
@@ -105,22 +105,22 @@
 
     .leading,
     .trailing {
-      display: inline-flex;
-      align-items: flex-start;
+      display: inline-flex !important;
+      align-items: flex-start !important;
       flex-shrink: 0;
     }
 
     .content {
       min-inline-size: 0;
       flex: 1;
-      display: flex;
-      flex-direction: column;
+      display: flex !important;
+      flex-direction: column !important;
     }
 
     .title,
     .meta,
     .excerpt {
-      display: block;
+      display: block !important;
       min-inline-size: 0;
     }
 
@@ -129,7 +129,7 @@
     .meta:empty,
     .excerpt:empty,
     .trailing:empty {
-      display: none;
+      display: none !important;
     }
 
     @media (forced-colors: active) {
@@ -141,7 +141,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-search-result-row"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-search-result-row"]) to ([data-component]) {
@@ -154,8 +154,8 @@
     :where([data-slotted], [data-slotted] *):is([slot="title"]),
     :where([data-slotted], [data-slotted] *):is([slot="meta"]),
     :where([data-slotted], [data-slotted] *):is([slot="excerpt"]) {
-      display: block;
-      margin: 0;
+      display: block !important;
+      margin: 0 !important;
     }
 
     @media (forced-colors: active) {

package/styles/ui-search-shell.css

@@ -62,21 +62,21 @@
       --_ui-search-shell-shadow: var(--ui-search-shell-shadow);
       --_ui-search-shell-focus-color: var(--ui-search-shell-focus-color);
 
-      display: contents;
+      display: contents !important;
     }
 
     dialog {
       position: fixed;
       inset: 0;
       z-index: var(--_ui-search-shell-z-index, 400);
-      box-sizing: border-box;
+      box-sizing: border-box !important;
       inline-size: 100%;
       max-inline-size: none;
       block-size: 100%;
       max-block-size: none;
-      margin: 0;
+      margin: 0 !important;
       padding: var(--_ui-search-shell-padding-top, 10vh) var(--_ui-search-shell-viewport-gap, var(--ui-space-4))
-        var(--_ui-search-shell-viewport-gap, var(--ui-space-4));
+        var(--_ui-search-shell-viewport-gap, var(--ui-space-4)) !important;
       overflow: auto;
       border: 0;
       background: var(--ui-overlay-backdrop);
@@ -97,11 +97,11 @@
 
     .panel {
       position: relative;
-      display: flex;
-      flex-direction: column;
+      display: flex !important;
+      flex-direction: column !important;
       inline-size: min(100%, var(--_ui-search-shell-max-width, 40rem));
       max-block-size: var(--_ui-search-shell-max-height, 80vh);
-      margin-inline: auto;
+      margin-inline: auto !important;
       overflow: hidden;
       background: var(--_ui-search-shell-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
       border: var(--ui-border-width) solid var(--_ui-search-shell-border, var(--ui-overlay-border, var(--ui-border-strong)));
@@ -110,41 +110,41 @@
     }
 
     .search {
-      padding: var(--ui-space-3);
+      padding: var(--ui-space-3) !important;
     }
 
     .status,
     .actions {
       flex-shrink: 0;
-      padding: var(--ui-space-2) var(--ui-space-4);
+      padding: var(--ui-space-2) var(--ui-space-4) !important;
       color: var(--ui-text-secondary);
       font-size: var(--ui-font-size-sm);
     }
 
     .status {
-      padding-block-start: 0;
+      padding-block-start: 0 !important;
     }
 
     /* Laid out like the dialog's action row: actions right-aligned, spaced as buttons, no fill. */
     .actions {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      justify-content: flex-end;
-      gap: var(--ui-space-2);
-      padding: var(--ui-space-3) var(--ui-space-4);
+      display: flex !important;
+      flex-wrap: wrap !important;
+      align-items: center !important;
+      justify-content: flex-end !important;
+      gap: var(--ui-space-2) !important;
+      padding: var(--ui-space-3) var(--ui-space-4) !important;
     }
 
     .status:empty,
     .actions:empty {
-      display: none;
+      display: none !important;
     }
 
     .body {
       flex: 1;
       min-block-size: 0;
       overflow: auto;
-      padding: var(--ui-space-2);
+      padding: var(--ui-space-2) !important;
       /* Each edge that hides content fades: the scroll fade every Looma scroller uses (see ui-scroll-area). */
       --_ui-scroll-fade-direction: to bottom;
       --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
@@ -166,7 +166,7 @@
 
     @media (max-width: 47.9375rem) {
       dialog {
-        padding: 0;
+        padding: 0 !important;
       }
 
       .panel {
@@ -180,17 +180,17 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-search-shell"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-search-shell"]) to ([data-component]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
     :where([data-slotted], [data-slotted] *):is(input[slot="search"]) {
-      box-sizing: border-box;
+      box-sizing: border-box !important;
       inline-size: 100%;
       min-block-size: var(--ui-control-min-block-size);
-      padding: var(--ui-space-2) var(--ui-space-3);
+      padding: var(--ui-space-2) var(--ui-space-3) !important;
       border: var(--ui-border-width) solid var(--ui-control-border);
       border-radius: var(--ui-field-radius, var(--ui-radius-md));
       background: var(--ui-control-surface);