@threadlabs/looma 0.32.1 → 0.33.1

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

package/styles/ui-stack.css

@@ -20,13 +20,13 @@
 
     :scope:where([data-component~="ui-stack"]) {
       --_layout-gap: var(--ui-space-4);
-      display: flex;
-      flex-direction: column;
-      align-items: stretch;
-      gap: var(--ui-stack-gap, var(--_layout-gap));
+      display: flex !important;
+      flex-direction: column !important;
+      align-items: stretch !important;
+      gap: var(--ui-stack-gap, var(--_layout-gap)) !important;
       min-inline-size: 0;
       max-inline-size: 100%;
-      margin: 0;
+      margin: 0 !important;
     }
 
     :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="fill"] {
@@ -57,27 +57,27 @@
       --_layout-gap: var(--ui-space-6);
     }
     :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="align=start"] {
-      align-items: flex-start;
+      align-items: flex-start !important;
     }
     :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="align=center"] {
-      align-items: center;
+      align-items: center !important;
     }
     :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="align=end"] {
-      align-items: flex-end;
+      align-items: flex-end !important;
     }
     :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="justify=center"] {
-      justify-content: center;
+      justify-content: center !important;
     }
     :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="justify=end"] {
-      justify-content: flex-end;
+      justify-content: flex-end !important;
     }
     :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="justify=between"] {
-      justify-content: space-between;
+      justify-content: space-between !important;
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-stack"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-stack"]) to ([data-component]) {

package/styles/ui-status-message.css

@@ -10,11 +10,11 @@
 /* The one way a view says it is loading, has nothing yet, or failed, with an optional next step.
        Every view says it the same way, in the same place, at the same size. */
     :scope:where([data-component~="ui-status-message"]) {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: var(--ui-space-2) var(--ui-space-4);
-      padding-block: var(--ui-space-4);
+      display: flex !important;
+      flex-wrap: wrap !important;
+      align-items: center !important;
+      gap: var(--ui-space-2) var(--ui-space-4) !important;
+      padding-block: var(--ui-space-4) !important;
       color: var(--ui-text-muted);
       font-size: var(--ui-font-size-md);
       line-height: var(--ui-line-height);
@@ -25,30 +25,30 @@
     }
 
     :scope:where([data-component~="ui-status-message"])[data-ui-status-message-state~="layout=panel"] {
-      padding: var(--ui-space-6);
+      padding: var(--ui-space-6) !important;
       border: var(--ui-border-width) dashed var(--ui-border-strong);
       border-radius: var(--ui-radius-lg);
     }
 
     :scope:where([data-component~="ui-status-message"])[data-ui-status-message-state~="layout=fill"] {
       flex: 1;
-      flex-direction: column;
-      justify-content: center;
+      flex-direction: column !important;
+      justify-content: center !important;
       min-block-size: 50vh;
       text-align: center;
     }
 
     .copy {
-      display: flex;
+      display: flex !important;
       flex: 1 1 12rem;
-      flex-direction: column;
-      gap: var(--ui-space-1);
+      flex-direction: column !important;
+      gap: var(--ui-space-1) !important;
       min-inline-size: 0;
     }
 
     :scope:where([data-component~="ui-status-message"])[data-ui-status-message-state~="layout=fill"] .copy {
       flex: none;
-      align-items: center;
+      align-items: center !important;
     }
 
     .heading {
@@ -57,18 +57,18 @@
     }
 
     .action {
-      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;
     }
 
     .action: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-status-message"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-status-message"]) to ([data-component]) {

package/styles/ui-swatch.css

@@ -19,11 +19,11 @@
       --_text: var(--ui-text-secondary);
 
       appearance: none;
-      box-sizing: border-box;
+      box-sizing: border-box !important;
       flex: 0 0 auto;
       inline-size: var(--ui-swatch-size, 1.65rem);
       block-size: var(--ui-swatch-size, 1.65rem);
-      margin: 0;
+      margin: 0 !important;
       border: var(--ui-border-width) solid color-mix(in srgb, var(--_surface) 75%, var(--_text) 25%);
       border-radius: 50%;
       background: var(--_surface);

package/styles/ui-switch.css

@@ -23,12 +23,19 @@
 
     :scope:where([data-component~="ui-switch"]) {
       /* Hooks do not inherit, so the parts below read them from the root. */
-      --_ui-switch-track-width: var(--ui-switch-track-width);
-      --_ui-switch-track-height: var(--ui-switch-track-height);
-
-      display: inline-flex;
-      align-items: flex-start;
-      gap: var(--ui-switch-gap, var(--ui-space-2));
+      --_ui-switch-track-width: var(--ui-switch-track-width, var(--ui-choice-track-width));
+      --_ui-switch-track-height: var(--ui-switch-track-height, var(--ui-choice-track-height));
+
+      --_thumb: calc(var(--_ui-switch-track-height) * 2 / 3);
+      --_inset: calc((var(--_ui-switch-track-height) - var(--_thumb)) / 2 - var(--ui-border-width));
+
+      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-switch-gap, var(--ui-space-2)) !important;
       max-inline-size: 100%;
       color: var(--ui-text-primary);
       cursor: pointer;
@@ -36,15 +43,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-switch-track-height, 1.5rem) - 1lh) / 2)) !important;
     }
 
     .description {
@@ -54,33 +67,36 @@
     }
 
     .description:empty {
-      display: none;
+      display: none !important;
     }
 
     input {
+      font: inherit !important;
+      box-sizing: border-box !important;
+      align-self: auto !important;
       appearance: none;
       -webkit-appearance: none;
       position: relative;
       flex: 0 0 auto;
       width: var(--_ui-switch-track-width, 2.5rem);
       height: var(--_ui-switch-track-height, 1.5rem);
-      padding: 0;
+      padding: 0 !important;
       border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
       border-radius: var(--ui-radius-round);
       background-color: var(--ui-control-surface, var(--ui-surface-default));
       box-shadow: var(--ui-control-inset);
       cursor: pointer;
       transition: background-color var(--ui-motion-base) var(--ui-motion-ease), border-color var(--ui-motion-base) var(--ui-motion-ease);
-      margin: 0;
+      margin: max(0px, calc((1lh - var(--_ui-switch-track-height, 1.5rem)) / 2)) 0 0 !important;
     }
 
     input:where(:not([data-component], [data-slotted]))::after {
       content: "";
       position: absolute;
-      top: 3px;
-      left: 3px;
-      width: 1rem;
-      height: 1rem;
+      top: var(--_inset);
+      left: var(--_inset);
+      width: var(--_thumb);
+      height: var(--_thumb);
       border-radius: var(--ui-radius-round);
       background: var(--ui-text-secondary);
       box-shadow: var(--ui-shadow-xs);
@@ -93,7 +109,7 @@
     }
 
     input:checked:where(:not([data-component], [data-slotted]))::after {
-      transform: translateX(1rem);
+      transform: translateX(calc(var(--_ui-switch-track-width) - var(--_ui-switch-track-height)));
       background: var(--ui-text-on-accent);
     }
 
@@ -144,13 +160,7 @@
     :scope:where([data-component~="ui-switch"])[data-ui-switch-state~="size=lg"] {
       --_line: calc(var(--_font) * var(--ui-line-height-md));
       font-size: var(--_font);
-      padding-block: calc((var(--_row) - var(--ui-switch-track-height, 1.5rem)) / 2);
-    }
-
-    /* The label centres on the track. */
-    :scope:where([data-component~="ui-switch"])[data-ui-switch-state~="size=sm"] .text,
-    :scope:where([data-component~="ui-switch"])[data-ui-switch-state~="size=lg"] .text {
-      margin-top: calc((var(--_ui-switch-track-height, 1.5rem) - var(--_line)) / 2);
+      padding-block: max(0px, calc((var(--_row) - max(var(--_line), var(--_ui-switch-track-height, 1.5rem))) / 2)) !important;
     }
 
     @media (pointer: coarse) {
@@ -161,7 +171,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-switch"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-switch"]) to ([data-component]) {
@@ -176,8 +186,6 @@
        and the first line centres in that control height, so the label shares a row's baseline.
        Multi-line labels and descriptions still grow downward from that first line. */
 
-    /* The label centres on the track. */
-
     @media (pointer: coarse) {
     }
 

package/styles/ui-switcher.css

@@ -24,12 +24,12 @@
       /* Lays its children out from its own box: below the threshold each track takes the full width;
          at or above it, tracks shrink to 1px so every child fits one row and empty tracks collapse.
          The large multiplier makes the whole row flip at once. */
-      display: grid;
+      display: grid !important;
       grid-template-columns: repeat(auto-fit, minmax(var(--_switcher-track), 1fr));
-      gap: var(--ui-switcher-gap, var(--_switcher-gap));
+      gap: var(--ui-switcher-gap, var(--_switcher-gap)) !important;
       min-inline-size: 0;
       max-inline-size: 100%;
-      margin: 0;
+      margin: 0 !important;
     }
 
     :scope:where([data-component~="ui-switcher"])[data-ui-switcher-state~="overLimit"] {
@@ -61,18 +61,18 @@
       --_switcher-threshold: 60rem;
     }
     :scope:where([data-component~="ui-switcher"])[data-ui-switcher-state~="align=start"] {
-      align-items: start;
+      align-items: start !important;
     }
     :scope:where([data-component~="ui-switcher"])[data-ui-switcher-state~="align=center"] {
-      align-items: center;
+      align-items: center !important;
     }
     :scope:where([data-component~="ui-switcher"])[data-ui-switcher-state~="align=end"] {
-      align-items: end;
+      align-items: end !important;
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-switcher"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-switcher"]) to ([data-component]) {

package/styles/ui-table.css

@@ -16,8 +16,8 @@
       --_pad-block: var(--ui-space-1);
       --_pad-inline: var(--ui-space-3);
       --_row-size: var(--ui-control-size);
-      display: block;
-      box-sizing: border-box;
+      display: block !important;
+      box-sizing: border-box !important;
       max-inline-size: 100%;
       min-inline-size: 0;
       min-block-size: 0;
@@ -65,7 +65,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-table"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-table"]) to ([data-component]) {
@@ -87,7 +87,7 @@
     }
 
     :where([data-slotted], [data-slotted] *):is(caption) {
-      padding-block-end: var(--ui-space-2);
+      padding-block-end: var(--ui-space-2) !important;
       color: var(--ui-text-secondary);
       font-weight: var(--ui-font-medium);
       text-align: start;
@@ -98,7 +98,7 @@
     :where([data-slotted], [data-slotted] *):is(th),
     :where([data-slotted], [data-slotted] *):is(td) {
       block-size: var(--_row-size);
-      padding: var(--_pad-block) var(--_pad-inline);
+      padding: var(--_pad-block) var(--_pad-inline) !important;
       border-block-end: var(--ui-border-width) solid var(--ui-border-subtle);
       text-align: start;
       vertical-align: middle;
@@ -106,7 +106,7 @@
 
     :where([data-slotted], [data-slotted] *):is(thead th) {
       block-size: auto;
-      padding-block: var(--ui-space-2);
+      padding-block: var(--ui-space-2) !important;
       border-block-end-color: var(--ui-border-divider);
       background: var(--ui-surface);
       color: var(--ui-text-muted);