@threadlabs/looma 0.32.1 → 0.33.1

package/components/ui-menu-item/ui-menu-item.html

@@ -76,13 +76,13 @@
     }
 
     :host {
-      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;
       width: 100%;
       padding: var(--ui-menu-item-padding-block, var(--_ui-default-menu-item-padding-block, var(--ui-space-2)))
-        var(--ui-menu-item-padding-inline, var(--_ui-default-menu-item-padding-inline, var(--ui-space-3)));
+        var(--ui-menu-item-padding-inline, var(--_ui-default-menu-item-padding-inline, var(--ui-space-3))) !important;
       text-align: left;
       border-radius: var(--ui-menu-item-radius, var(--_ui-default-menu-item-radius, var(--ui-selection-radius)));
       color: var(--ui-text-primary);
@@ -96,16 +96,16 @@
 
     /* A named icon has a fixed column; an icon-enabled menu reserves it on every row. */
     .icon {
-      display: var(--_ui-default-menu-icon-display, none);
-      align-items: center;
-      justify-content: center;
+      display: var(--_ui-default-menu-icon-display, none) !important;
+      align-items: center !important;
+      justify-content: center !important;
       flex: none;
       inline-size: var(--ui-icon-size-sm);
       block-size: var(--ui-icon-size-sm);
     }
 
     .icon:not(:empty) {
-      display: inline-flex;
+      display: inline-flex !important;
     }
 
     .icon :slotted(svg) {
@@ -118,19 +118,19 @@
     }
 
     .label {
-      display: flex;
-      align-items: center;
-      gap: var(--ui-space-2);
+      display: flex !important;
+      align-items: center !important;
+      gap: var(--ui-space-2) !important;
       flex: 1;
       min-inline-size: 0;
     }
 
     .indicator {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
       flex: none;
-      box-sizing: border-box;
+      box-sizing: border-box !important;
       inline-size: var(--_ui-default-menu-indicator-size, var(--ui-icon-size-sm));
       block-size: var(--_ui-default-menu-indicator-size, var(--ui-icon-size-sm));
       border: var(--ui-border-width) solid var(--ui-control-border);
@@ -140,7 +140,7 @@
     }
 
     :host([type="action"]) .indicator {
-      display: none;
+      display: none !important;
     }
 
     :host([type="checkbox"])[aria-checked="true"] .indicator {
@@ -156,14 +156,14 @@
     }
 
     .shortcut {
-      margin-inline-start: auto;
+      margin-inline-start: auto !important;
       color: var(--ui-text-secondary);
       font-size: var(--ui-font-size-sm);
       font-weight: var(--ui-font-normal);
     }
 
     .shortcut:empty {
-      display: none;
+      display: none !important;
     }
 
     /* A <kbd> takes the browser's monospace; the hint reads in the item's own type. */
@@ -213,7 +213,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-meter/ui-meter.html

@@ -70,7 +70,7 @@
     :host {
       --_meter-fill: var(--ui-text-muted);
 
-      display: inline-block;
+      display: inline-block !important;
       flex: none;
       vertical-align: middle;
       inline-size: var(--ui-meter-inline-size, 8rem);
@@ -90,7 +90,7 @@
     }
 
     .fill {
-      display: block;
+      display: block !important;
       block-size: 100%;
       background-color: var(--_meter-fill);
       background-image: linear-gradient(to bottom, rgb(255 255 255 / 0.26), transparent 70%);
@@ -184,10 +184,10 @@
     /* A categorical distribution uses flex ratios, avoiding rounded percentages and retaining
        identical geometry before hydration. It has no progress mask or growing-value animation. */
     :host([variant="distribution"]) {
-      display: flex;
+      display: flex !important;
       inline-size: 100%;
       block-size: var(--ui-space-4);
-      gap: var(--ui-space-0-5);
+      gap: var(--ui-space-0-5) !important;
     }
 
     :host([variant="distribution"])[size="sm"] {
@@ -233,7 +233,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-nav-item/ui-nav-item.html

@@ -73,16 +73,16 @@
       --_indicator-width: var(--ui-nav-item-indicator-width, var(--ui-accent-line-width));
       --_indicator-color: var(--ui-nav-item-indicator-color, var(--ui-accent));
       position: relative;
-      box-sizing: border-box;
-      display: flex;
-      align-items: center;
-      gap: var(--ui-nav-gap);
+      box-sizing: border-box !important;
+      display: flex !important;
+      align-items: center !important;
+      gap: var(--ui-nav-gap) !important;
       inline-size: var(--ui-nav-item-inline-size, 100%);
       min-inline-size: 0;
       min-block-size: var(--ui-nav-min-block-size);
-      margin: 0;
-      padding-block: var(--ui-nav-padding-block);
-      padding-inline: var(--ui-nav-padding-inline);
+      margin: 0 !important;
+      padding-block: var(--ui-nav-padding-block) !important;
+      padding-inline: var(--ui-nav-padding-inline) !important;
       border: 0;
       border-radius: var(--ui-selection-radius);
       background: transparent;
@@ -131,12 +131,12 @@
       position: absolute;
       inset-block: 0;
       inset-inline-start: 0;
-      display: none;
+      display: none !important;
       border-inline-start: var(--_indicator-width) solid var(--_indicator-color);
     }
 
     :host([variant="line"])[aria-current] .indicator {
-      display: block;
+      display: block !important;
     }
 
     @media (forced-colors: active) {
@@ -153,26 +153,26 @@
 
     .leading,
     .trailing {
-      display: inline-flex;
+      display: inline-flex !important;
       flex: none;
-      align-items: center;
-      justify-content: center;
+      align-items: center !important;
+      justify-content: center !important;
       inline-size: var(--ui-nav-icon-size);
       color: inherit;
       font-size: var(--ui-nav-icon-size);
     }
 
     .content {
-      display: flex;
+      display: flex !important;
       flex: 1;
-      flex-direction: column;
-      gap: var(--ui-space-0-5, 2px);
+      flex-direction: column !important;
+      gap: var(--ui-space-0-5, 2px) !important;
       min-inline-size: 0;
     }
 
     .label,
     .description {
-      display: block;
+      display: block !important;
       min-inline-size: 0;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -193,8 +193,8 @@
 
     :host([density="compact"]) {
       min-block-size: var(--ui-nav-compact-min-block-size);
-      padding-block: var(--ui-nav-compact-padding-block);
-      padding-inline: var(--ui-nav-compact-padding-inline);
+      padding-block: var(--ui-nav-compact-padding-block) !important;
+      padding-inline: var(--ui-nav-compact-padding-inline) !important;
     }
     :host([density="compact"]) .label {
       font-size: var(--ui-font-size-sm);
@@ -210,12 +210,12 @@
     .leading:empty,
     .trailing:empty,
     .description: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-page-header/ui-page-header.html

@@ -18,16 +18,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. */
     :host {
-      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);
@@ -35,10 +35,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;
     }
 
@@ -51,7 +51,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);
@@ -66,20 +67,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;
     }
 
     :host([align="center"]) {
-      flex-direction: column;
+      flex-direction: column !important;
       text-align: center;
     }
 
     :host([align="center"]) .copy {
-      align-items: center;
+      align-items: center !important;
       flex-basis: auto;
     }
 
@@ -87,12 +88,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. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-popover/ui-popover.html

@@ -68,14 +68,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;
@@ -84,11 +84,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)));
@@ -98,20 +98,20 @@
     /* A toolbar or card can supply its own surface, including an unclipped shadow. */
     :host([bare]) .surface {
       overflow: visible;
-      padding: 0;
+      padding: 0 !important;
       border: 0;
       background: transparent;
       box-shadow: none;
     }
 
     :host(:not(:state(internalOpen))) {
-      display: none;
+      display: none !important;
     }
 
     :host[popover] {
       position: fixed;
       inset: auto;
-      margin: 0;
+      margin: 0 !important;
       opacity: 0;
       transform: translateY(-4px) scale(0.99);
       transition:
@@ -147,7 +147,7 @@
     }
 
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
 
     @media (prefers-reduced-motion: reduce) {

package/components/ui-radio/ui-radio.html

@@ -43,11 +43,15 @@
 
     :host {
       /* Hooks do not inherit, so the parts below read them from the root. */
-      --_ui-radio-size: var(--ui-radio-size);
+      --_ui-radio-size: var(--ui-radio-size, var(--ui-choice-mark-size));
 
-      display: inline-flex;
-      align-items: flex-start;
-      gap: var(--ui-radio-gap, var(--ui-space-2));
+      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;
@@ -55,15 +59,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 {
@@ -73,14 +83,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;
     }
@@ -118,12 +131,7 @@
     :host([size="lg"]) {
       --_line: calc(var(--_font) * var(--ui-line-height-md));
       font-size: var(--_font);
-      padding-block: calc((var(--_row) - var(--_line)) / 2);
-    }
-
-    :host([size="sm"]) input,
-    :host([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) {
@@ -134,7 +142,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-radio-group/ui-radio-group.html

@@ -45,20 +45,20 @@
 
     :host {
       --_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);
     }
@@ -81,13 +81,13 @@
     }
 
     :host([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. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-reel/ui-reel.html

@@ -27,15 +27,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;
@@ -101,7 +101,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-scroll-area/ui-scroll-area.html

@@ -24,8 +24,8 @@
     }
 
     :host {
-      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;
@@ -44,16 +44,16 @@
     }
 
     .content {
-      display: flow-root;
+      display: flow-root !important;
     }
 
     /* Trim projected edges without changing spacing inside an item. */
     :host([trim]) .content > :slotted(:first-child) {
-      margin-block-start: 0;
+      margin-block-start: 0 !important;
     }
 
     :host([trim]) .content > :slotted(:last-child) {
-      margin-block-end: 0;
+      margin-block-end: 0 !important;
     }
 
     :host([orientation="horizontal"]) {
@@ -77,21 +77,21 @@
     }
 
     :host([padding="xs"]) {
-      padding: var(--ui-space-2);
+      padding: var(--ui-space-2) !important;
     }
     :host([padding="sm"]) {
-      padding: var(--ui-space-3);
+      padding: var(--ui-space-3) !important;
     }
     :host([padding="md"]) {
-      padding: var(--ui-space-5);
+      padding: var(--ui-space-5) !important;
     }
     :host([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. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>