@threadlabs/looma 0.11.2 → 0.11.4

package/components/ui-callout/ui-callout.html

@@ -98,6 +98,14 @@
       --_callout-icon: var(--ui-danger-solid);
     }
 
+    /* A link in the callout's text is underlined, so it reads as a link by more than colour. */
+    .content :slotted(a) {
+      color: var(--ui-accent-active);
+      text-decoration: underline;
+      text-decoration-thickness: 0.06em;
+      text-underline-offset: 0.18em;
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
       display: none;

package/components/ui-form-field/ui-form-field.html

@@ -48,9 +48,10 @@
       min-block-size: var(--ui-form-field-help-min-block-size, 0);
     }
 
+    /* An error reads in the danger colour, the one the invalid control's border takes. */
     .error,
     :slotted([role="alert"]) {
-      color: var(--ui-accent-active);
+      color: var(--ui-danger);
       font-size: var(--ui-font-size-sm);
     }
 

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

@@ -56,13 +56,15 @@
     /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
     :host[aria-invalid="true"],
     :host:user-invalid {
-      border-color: var(--ui-danger-solid);
+      border-color: var(--ui-input-invalid-border, var(--ui-danger-solid));
     }
 
     :host:is([aria-invalid="true"], :user-invalid):focus-visible {
-      box-shadow:
+      box-shadow: var(
+        --ui-input-invalid-focus-shadow,
         var(--ui-control-inset),
-        0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
+        0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent)
+      );
     }
 
     :host:disabled {

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

@@ -18,6 +18,8 @@
       --ui-input-border: transparent;
       --ui-input-border-hover: transparent;
       --ui-input-focus-border: transparent;
+      --ui-input-invalid-border: transparent;
+      --ui-input-invalid-focus-shadow: none;
       --ui-input-shadow: none;
       --ui-input-focus-shadow: none;
       --ui-input-radius: 0;

package/components/ui-text/ui-text.html

@@ -78,6 +78,15 @@
       font-family: var(--ui-font-family-mono);
     }
 
+    /* A link in running text is underlined, so it stands apart from the words around it by more than
+       colour. */
+    :host :slotted(a) {
+      color: var(--ui-accent-active);
+      text-decoration: underline;
+      text-decoration-thickness: 0.06em;
+      text-underline-offset: 0.18em;
+    }
+
     :host-state([truncate]) {
       overflow: hidden;
       text-overflow: ellipsis;

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

@@ -298,7 +298,7 @@
     /* A hovered row reads its whole name: the label slides far enough to show the end, waits
        there, and comes back. Only when it actually overflows — the controller measures by how
        much — after the controls have taken their place over its end — and hands over the distance
-       and a duration from it, so a longer name travels no faster. */
+       and a duration from it, so every name moves at the same speed. */
     .row[data-ui-marquee] > .label > .label-text {
       /* Once, and it stays at the end while the pointer is there: a name that keeps sliding back
          and forth under the pointer is harder to read than one that arrives and holds. */

package/components/ui-tree-item/ui-tree-item.js

@@ -102,7 +102,7 @@ export default function controller(host) {
    * at its own width; it has to end where the fade before the controls begins, since the controls
    * overlay the label's end rather than taking width from it.
    */
-  const MARQUEE_SPEED = 36; // CSS pixels per second.
+  const MARQUEE_SPEED = 36; // CSS pixels per second, for every name: a clamped duration made short slides crawl.
   // The tree sets this for its items; an item's own prop overrides it either way.
   const marqueeWanted = () => host.state.marquee
     || getComputedStyle(element).getPropertyValue("--ui-tree-item-marquee").trim() === "1";
@@ -121,10 +121,7 @@ export default function controller(host) {
     const lead = icon?.width ? (rightToLeft ? icon.right - cell.right : cell.left - icon.left) : 0;
     row.style.setProperty("--_marquee-lead", `${Math.max(0, lead)}px`);
     row.style.setProperty("--_marquee-distance", `${rightToLeft ? distance : -distance}px`);
-    row.style.setProperty(
-      "--_marquee-duration",
-      `${Math.min(10, Math.max(1.4, distance / MARQUEE_SPEED)).toFixed(2)}s`
-    );
+    row.style.setProperty("--_marquee-duration", `${(distance / MARQUEE_SPEED).toFixed(2)}s`);
     row.dataset.uiMarquee = "";
   };
   const stopMarquee = () => {