@threadlabs/looma 0.32.1 → 0.33.1

package/components/ui-search-result-row/ui-search-result-row.html

@@ -56,12 +56,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);
@@ -73,10 +73,10 @@
 
     :host([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);
     }
 
@@ -116,22 +116,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;
     }
 
@@ -140,14 +140,14 @@
     .meta:empty,
     .excerpt:empty,
     .trailing:empty {
-      display: none;
+      display: none !important;
     }
 
     :slotted([slot="title"]),
     :slotted([slot="meta"]),
     :slotted([slot="excerpt"]) {
-      display: block;
-      margin: 0;
+      display: block !important;
+      margin: 0 !important;
     }
 
     @media (forced-colors: active) {
@@ -159,7 +159,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-search-shell/ui-search-shell.html

@@ -80,21 +80,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);
@@ -115,11 +115,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)));
@@ -128,14 +128,14 @@
     }
 
     .search {
-      padding: var(--ui-space-3);
+      padding: var(--ui-space-3) !important;
     }
 
     :slotted(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);
@@ -153,35 +153,35 @@
     .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);
@@ -203,7 +203,7 @@
 
     @media (max-width: 47.9375rem) {
       dialog {
-        padding: 0;
+        padding: 0 !important;
       }
 
       .panel {
@@ -217,7 +217,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-section/ui-section.html

@@ -22,9 +22,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. */
     :host {
-      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;
     }
 
@@ -32,14 +32,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);
     }
 
     :host([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);
     }
 
@@ -62,23 +62,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);
@@ -96,30 +97,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. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-select/ui-select.html

@@ -57,13 +57,13 @@
     }
 
     :host {
-      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)));
@@ -82,7 +82,7 @@
      * The root stays a native <select>, so the icon is a background image rather than an element. */
     :host {
       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")
@@ -129,8 +129,8 @@
 
     :host([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);
@@ -138,8 +138,8 @@
 
     :host([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);
     }
@@ -159,7 +159,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-separator/ui-separator.html

@@ -17,9 +17,9 @@
 
     /* The root is the hr, so the rules name :host; a bare hr matches only a descendant. */
     :host {
-      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/components/ui-sidebar/ui-sidebar.html

@@ -67,9 +67,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%;
@@ -145,7 +145,7 @@
     }
 
     .resizer[hidden] {
-      display: none;
+      display: none !important;
     }
 
     :host([side="end"]) .resizer {
@@ -197,8 +197,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;
@@ -213,7 +213,7 @@
 
     /* The author display above would otherwise override the UA rule that hides a closed popover. */
     :host[popover]:not(:popover-open) {
-      display: none;
+      display: none !important;
       transform: translateX(-100%);
     }
 
@@ -252,7 +252,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-spinner/ui-spinner.html

@@ -20,11 +20,11 @@
   <style>
     /* A rounded SVG arc grows and recedes over a quiet full-circle track. */
     :host {
-      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;
@@ -37,7 +37,7 @@
     }
 
     svg {
-      display: block;
+      display: block !important;
       inline-size: 100%;
       block-size: 100%;
       animation: ui-spinner-rotate 2s linear infinite;
@@ -89,7 +89,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-stack/ui-stack.html

@@ -27,13 +27,13 @@
 
     :host {
       --_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;
     }
 
     :host([fill]) {
@@ -64,27 +64,27 @@
       --_layout-gap: var(--ui-space-6);
     }
     :host([align="start"]) {
-      align-items: flex-start;
+      align-items: flex-start !important;
     }
     :host([align="center"]) {
-      align-items: center;
+      align-items: center !important;
     }
     :host([align="end"]) {
-      align-items: flex-end;
+      align-items: flex-end !important;
     }
     :host([justify="center"]) {
-      justify-content: center;
+      justify-content: center !important;
     }
     :host([justify="end"]) {
-      justify-content: flex-end;
+      justify-content: flex-end !important;
     }
     :host([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. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-status-message/ui-status-message.html

@@ -20,11 +20,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. */
     :host {
-      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);
@@ -35,30 +35,30 @@
     }
 
     :host([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);
     }
 
     :host([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;
     }
 
     :host([layout="fill"]) .copy {
       flex: none;
-      align-items: center;
+      align-items: center !important;
     }
 
     .heading {
@@ -67,18 +67,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. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-swatch/ui-swatch.html

@@ -18,11 +18,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);