@threadlabs/looma 0.32.1 → 0.33.0

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);

package/styles/ui-section.css

@@ -10,9 +10,9 @@
 /* A part of a view: a heading, an optional line under it, actions for the whole section at its
        end, and the content. Sections space themselves out through the Stack around them. */
     :scope:where([data-component~="ui-section"]) {
-      display: flex;
-      flex-direction: column;
-      gap: var(--ui-space-4);
+      display: flex !important;
+      flex-direction: column !important;
+      gap: var(--ui-space-4) !important;
       min-inline-size: 0;
     }
 
@@ -20,14 +20,14 @@
       --_ui-selection-context-surface: initial;
       --_ui-selection-context-border: initial;
       --_ui-selection-context-text: initial;
-      padding: var(--ui-space-5);
+      padding: var(--ui-space-5) !important;
       border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: var(--ui-radius-lg);
       background: var(--ui-surface-raised);
     }
 
     :scope:where([data-component~="ui-section"])[data-ui-section-state~="variant=divided"] {
-      padding-block-start: var(--ui-space-6);
+      padding-block-start: var(--ui-space-6) !important;
       border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
     }
 
@@ -50,23 +50,24 @@
     }
 
     .head {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: flex-start;
-      justify-content: space-between;
-      gap: var(--ui-space-2) var(--ui-space-4);
+      display: flex !important;
+      flex-wrap: wrap !important;
+      align-items: flex-start !important;
+      justify-content: space-between !important;
+      gap: var(--ui-space-2) var(--ui-space-4) !important;
     }
 
     .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;
     }
 
     .heading {
-      margin: 0;
+      font-family: var(--ui-font-display, inherit);
+      margin: 0 !important;
       color: var(--ui-text-primary);
       font-size: var(--ui-font-size-lg);
       font-weight: var(--ui-font-semibold);
@@ -84,30 +85,30 @@
     }
 
     .actions {
-      display: inline-flex;
-      flex-wrap: wrap;
-      gap: var(--ui-space-2);
+      display: inline-flex !important;
+      flex-wrap: wrap !important;
+      gap: var(--ui-space-2) !important;
     }
 
     .body {
-      display: flex;
-      flex-direction: column;
-      gap: var(--ui-space-4);
+      display: flex !important;
+      flex-direction: column !important;
+      gap: var(--ui-space-4) !important;
       min-inline-size: 0;
     }
 
     .description:empty,
     .actions:empty {
-      display: none;
+      display: none !important;
     }
 
     .head:has(.heading[hidden]):has(.description:empty):has(.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-section"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-section"]) to ([data-component]) {

package/styles/ui-select.css

@@ -50,13 +50,13 @@
     }
 
     :scope:where([data-component~="ui-select"]) {
-      box-sizing: border-box;
-      display: inline-block;
+      box-sizing: border-box !important;
+      display: inline-block !important;
       inline-size: var(--ui-select-inline-size, 100%);
       min-inline-size: 0;
       min-block-size: var(--ui-control-size-md);
-      margin: 0;
-      padding: var(--ui-space-2) var(--ui-space-3);
+      margin: 0 !important;
+      padding: var(--ui-control-inset-block-md, var(--ui-space-2)) var(--ui-space-3) !important;
       border: var(--ui-border-width) solid var(--ui-select-border, var(--ui-control-border, var(--ui-border-strong)));
       border-radius: var(--ui-select-radius, var(--ui-field-radius, var(--ui-radius-md)));
       background-color: var(--ui-select-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
@@ -75,7 +75,7 @@
      * The root stays a native <s-lect>, so the icon is a background image rather than an element. */
     :scope:where([data-component~="ui-select"]) {
       appearance: none;
-      padding-inline-end: calc(var(--ui-space-3) + 1.5rem);
+      padding-inline-end: calc(var(--ui-space-3) + 1.5rem) !important;
       background-image: var(
         --ui-select-chevron,
         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5c58' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
@@ -122,8 +122,8 @@
 
     :scope:where([data-component~="ui-select"])[data-ui-select-state~="size=sm"] {
       min-block-size: var(--ui-control-size-sm);
-      padding: var(--ui-space-1) var(--ui-space-2);
-      padding-inline-end: calc(var(--ui-space-2) + var(--ui-icon-size-sm) + var(--ui-space-1));
+      padding: var(--ui-control-inset-block-sm, var(--ui-space-1)) var(--ui-space-2) !important;
+      padding-inline-end: calc(var(--ui-space-2) + var(--ui-icon-size-sm) + var(--ui-space-1)) !important;
       background-position: right var(--ui-space-2) center;
       background-size: var(--ui-icon-size-sm) var(--ui-icon-size-sm);
       font-size: var(--ui-font-size-sm);
@@ -131,8 +131,8 @@
 
     :scope:where([data-component~="ui-select"])[data-ui-select-state~="size=lg"] {
       min-block-size: var(--ui-control-size-lg);
-      padding: var(--ui-space-3) var(--ui-space-4);
-      padding-inline-end: calc(var(--ui-space-4) + 1.5rem);
+      padding: var(--ui-control-inset-block-lg, var(--ui-space-3)) var(--ui-space-4) !important;
+      padding-inline-end: calc(var(--ui-space-4) + 1.5rem) !important;
       background-position: right var(--ui-space-4) center;
       font-size: var(--ui-font-size-md);
     }
@@ -152,7 +152,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-select"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-select"]) to ([data-component]) {

package/styles/ui-separator.css

@@ -15,9 +15,9 @@
 
     /* The root is the hr, so the rules name :host; a bare hr matches only a descendant. */
     :scope:where([data-component~="ui-separator"]) {
-      box-sizing: border-box;
+      box-sizing: border-box !important;
       align-self: stretch;
-      margin: 0;
+      margin: 0 !important;
       border: 0;
       border-block-start: var(--ui-border-width) solid var(--ui-separator-color, var(--_separator-color, var(--ui-border-divider)));
     }

package/styles/ui-sidebar.css

@@ -35,9 +35,9 @@
       --_ui-sidebar-expanded-width: var(--_sidebar-width, var(--ui-sidebar-width, 280px));
 
       position: relative;
-      box-sizing: border-box;
-      display: flex;
-      flex-direction: column;
+      box-sizing: border-box !important;
+      display: flex !important;
+      flex-direction: column !important;
       flex: none;
       inline-size: var(--_sidebar-width, var(--ui-sidebar-width, 280px));
       max-inline-size: 100%;
@@ -113,7 +113,7 @@
     }
 
     .resizer[hidden] {
-      display: none;
+      display: none !important;
     }
 
     :scope:where([data-component~="ui-sidebar"])[data-ui-sidebar-state~="side=end"] .resizer {
@@ -165,8 +165,8 @@
       inset-block: 0;
       inset-inline-start: 0;
       inset-inline-end: auto;
-      margin: 0;
-      padding: 0;
+      margin: 0 !important;
+      padding: 0 !important;
       inline-size: min(var(--_sidebar-width, var(--ui-sidebar-width, 280px)), 85vw);
       max-block-size: none;
       block-size: 100dvh;
@@ -181,7 +181,7 @@
 
     /* The author display above would otherwise override the UA rule that hides a closed popover. */
     :scope:where([data-component~="ui-sidebar"])[popover]:not(:popover-open) {
-      display: none;
+      display: none !important;
       transform: translateX(-100%);
     }
 
@@ -220,7 +220,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-sidebar"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-sidebar"]) to ([data-component]) {

package/styles/ui-spinner.css

@@ -9,11 +9,11 @@
 @scope ([data-component~="ui-spinner"]) to ([data-component], [data-slotted]) {
 /* A rounded SVG arc grows and recedes over a quiet full-circle track. */
     :scope:where([data-component~="ui-spinner"]) {
-      display: inline-flex;
+      display: inline-flex !important;
       flex: none;
-      align-items: center;
-      justify-content: center;
-      box-sizing: border-box;
+      align-items: center !important;
+      justify-content: center !important;
+      box-sizing: border-box !important;
       inline-size: 1em;
       block-size: 1em;
       color: currentColor;
@@ -26,7 +26,7 @@
     }
 
     svg {
-      display: block;
+      display: block !important;
       inline-size: 100%;
       block-size: 100%;
       animation: ui-spinner-rotate 2s linear infinite;
@@ -78,7 +78,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-spinner"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-spinner"]) to ([data-component]) {