@threadlabs/looma 0.17.2 → 0.17.4

package/components/ui-button/ui-button.html

@@ -188,6 +188,11 @@
       margin: 0;
     }
 
+    /* An anchor keeps the boxed button look even when an app styles ordinary links. */
+    :host:is(a) {
+      text-decoration: none;
+    }
+
     .spinner-wrap {
       display: inline-flex;
       flex: none;

package/components/ui-checkbox/ui-checkbox.html

@@ -123,7 +123,7 @@
       box-shadow: var(--ui-control-inset);
     }
 
-    /* Centre the tick's box, then lift it: a rotated L's ink sits ~0.11rem below its box centre. */
+    /* Centre the tick's box and lift it slightly for the rotated check shape. */
     input:checked::after {
       inset: 0;
       margin: auto;
@@ -135,7 +135,7 @@
       border-color: var(--ui-text-on-accent);
       border-width: 0 0.125rem 0.125rem 0;
       opacity: 1;
-      transform: translate(0.07rem, -0.09rem) rotate(45deg);
+      transform: translateY(-0.09rem) rotate(45deg);
       animation: ui-checkbox-check 180ms var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
     }
 
@@ -151,15 +151,15 @@
     @keyframes ui-checkbox-check {
       from {
         opacity: 0;
-        transform: translate(0.07rem, -0.09rem) rotate(45deg) scale(0.55);
+        transform: translateY(-0.09rem) rotate(45deg) scale(0.55);
       }
       65% {
         opacity: 1;
-        transform: translate(0.07rem, -0.09rem) rotate(45deg) scale(1.12);
+        transform: translateY(-0.09rem) rotate(45deg) scale(1.12);
       }
       to {
         opacity: 1;
-        transform: translate(0.07rem, -0.09rem) rotate(45deg) scale(1);
+        transform: translateY(-0.09rem) rotate(45deg) scale(1);
       }
     }
 

package/components/ui-icon-button/ui-icon-button.html

@@ -147,7 +147,7 @@
     @media (hover: hover) and (pointer: fine) {
       :host-state([anticipatory]):not(:host-state([variant="solid"]), :host-state([loading]), :host-state([pending]), :disabled, [data-ui-proximity="near"], :hover, :focus-visible) {
         border-color: transparent;
-        background: transparent;
+        background-color: transparent;
         box-shadow: none;
       }
 
@@ -175,7 +175,7 @@
       margin: 0;
       border: 1px solid transparent;
       border-radius: var(--ui-icon-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
-      background: var(--ui-icon-button-surface, transparent);
+      background-color: var(--ui-icon-button-surface, transparent);
       color: inherit;
       display: inline-flex;
       align-items: center;
@@ -247,14 +247,14 @@
 
     :host-state([variant="outline"]) {
       border-color: var(--ui-icon-button-border, var(--ui-control-border, var(--ui-border-strong)));
-      background: var(--ui-icon-button-outline-surface, var(--ui-surface-default));
+      background-color: var(--ui-icon-button-outline-surface, var(--ui-surface-default));
       background-image: var(--ui-raised-highlight);
       color: var(--ui-icon-button-outline-text, var(--ui-text-primary));
       box-shadow: var(--ui-raised);
     }
 
     :host-state([variant="solid"]) {
-      background: var(--ui-icon-button-solid-surface, var(--ui-accent-solid));
+      background-color: var(--ui-icon-button-solid-surface, var(--ui-accent-solid));
       background-image: var(--ui-raised-highlight);
       color: var(--ui-icon-button-solid-text, var(--ui-text-on-accent));
       box-shadow: var(
@@ -265,7 +265,7 @@
 
     :host:hover:enabled:not([aria-disabled="true"]) {
       /* Derived from the text colour so the ghost hover shows on any background. */
-      background: var(--ui-icon-button-hover-surface, color-mix(in srgb, currentColor 8%, transparent));
+      background-color: var(--ui-icon-button-hover-surface, color-mix(in srgb, currentColor 8%, transparent));
       color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
     }
 
@@ -274,7 +274,7 @@
     }
 
     :host-state([variant="solid"]):hover:enabled:not([aria-disabled="true"]) {
-      background: var(--ui-icon-button-solid-hover-surface, var(--ui-accent-hover));
+      background-color: var(--ui-icon-button-solid-hover-surface, var(--ui-accent-hover));
     }
 
     :host:active:enabled:not([aria-disabled="true"]) {
@@ -309,7 +309,7 @@
     /* Disabled is a flat neutral control, independent of the active variant's tone. */
     :host:disabled {
       border-color: var(--ui-disabled-border);
-      background: var(--ui-disabled-surface);
+      background-color: var(--ui-disabled-surface);
       color: var(--ui-disabled-text);
       filter: var(--ui-icon-button-disabled-filter, var(--ui-disabled-filter));
       opacity: var(--ui-icon-button-disabled-opacity, 1);

package/components/ui-input-group/ui-input-group.html

@@ -128,7 +128,7 @@
       flex: none;
       align-items: center;
       padding-inline: var(--ui-space-2);
-      color: var(--ui-text-secondary);
+      color: var(--ui-text-muted);
       font-family: var(--ui-font-family-mono);
       font-size: var(--ui-font-size-sm);
       white-space: nowrap;

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

@@ -61,18 +61,14 @@
       align-items: flex-start;
       gap: var(--ui-search-result-row-gap, var(--ui-space-3));
       background: var(--ui-search-result-row-surface, transparent);
-      border: none;
-      border-block-end: 1px solid var(--ui-search-result-row-border, var(--ui-border-divider));
+      border: 1px solid var(--ui-search-result-row-border, transparent);
+      border-radius: var(--ui-radius-md);
       color: inherit;
       cursor: pointer;
       text-align: left;
       transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
-    :host:last-child {
-      border-block-end: none;
-    }
-
     :host:hover:enabled {
       background: var(--ui-search-result-row-hover-surface, color-mix(in srgb, var(--ui-surface) 85%, black 3%));
     }

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

@@ -117,14 +117,6 @@
 
     .search {
       padding: var(--ui-space-3);
-      border-block-end: 1px solid var(--ui-border-divider);
-      transition: border-color var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
-    }
-
-    /* The search region shows where typing goes, whatever the author put in it. */
-    .search:focus-within {
-      border-block-end-color: var(--_ui-search-shell-focus-color, var(--ui-control-focus));
-      box-shadow: inset 0 -1px 0 var(--_ui-search-shell-focus-color, var(--ui-control-focus));
     }
 
     :slotted(input[slot="search"]) {
@@ -141,7 +133,7 @@
     }
 
     :slotted(input[slot="search"]:focus-visible) {
-      border-color: var(--ui-control-focus);
+      border-color: var(--_ui-search-shell-focus-color, var(--ui-control-focus));
       outline: 2px solid var(--ui-focus-ring);
       outline-offset: 2px;
     }
@@ -155,7 +147,7 @@
     }
 
     .status {
-      border-block-end: 1px solid var(--ui-border-divider);
+      padding-block-start: 0;
     }
 
     /* Laid out like the dialog's action row: actions right-aligned, spaced as buttons, no fill. */
@@ -166,7 +158,6 @@
       justify-content: flex-end;
       gap: var(--ui-space-2);
       padding: var(--ui-space-3) var(--ui-space-4);
-      border-block-start: 1px solid var(--ui-border-divider);
     }
 
     .status:empty,

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

@@ -19,22 +19,16 @@
       flex: none;
       align-items: center;
       justify-content: center;
+      box-sizing: border-box;
       inline-size: 1em;
       block-size: 1em;
-      color: currentColor;
-      font-size: var(--ui-font-size-lg);
-      line-height: 1;
-    }
-
-    .ring {
-      display: block;
-      box-sizing: border-box;
-      inline-size: 100%;
-      block-size: 100%;
       border: 2px solid transparent;
       border-block-start-color: currentColor;
       border-inline-end-color: color-mix(in srgb, currentColor 52%, transparent);
       border-radius: 50%;
+      color: currentColor;
+      font-size: var(--ui-font-size-lg);
+      line-height: 1;
       animation: ui-spinner-chase 1s linear infinite;
     }
 
@@ -55,7 +49,7 @@
     }
 
     @media (prefers-reduced-motion: reduce) {
-      .ring {
+      :host {
         animation: none;
       }
     }

package/components/ui-tooltip/ui-tooltip.html

@@ -172,14 +172,14 @@
       inset-inline-start: auto;
       inset-inline-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
       border-inline-end-width: 1px;
-      border-block-end-width: 1px;
+      border-block-start-width: 1px;
     }
 
     :host[data-ui-actual-placement="right"] .surface::after {
       inset-inline-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
       inset-inline-end: auto;
       border-inline-start-width: 1px;
-      border-block-start-width: 1px;
+      border-block-end-width: 1px;
     }
 
     :host[data-ui-actual-placement="left"][data-ui-actual-align="start"] .surface::after,