@threadlabs/looma 0.11.1 → 0.11.3

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

@@ -19,9 +19,9 @@
       margin: 0;
       padding: var(--ui-space-2) var(--ui-space-3);
       appearance: none;
-      border: 1px solid var(--ui-control-border, var(--ui-border-strong));
+      border: 1px solid var(--ui-input-border, var(--ui-control-border, var(--ui-border-strong)));
       border-radius: var(--ui-input-radius, var(--ui-radius-md));
-      background: var(--ui-control-surface, var(--ui-surface-elevated));
+      background: var(--ui-input-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
       color: var(--ui-text-primary);
       font: inherit;
       line-height: var(--ui-line-height-md);
@@ -44,11 +44,11 @@
     }
 
     :host:hover:not(:focus):not(:disabled) {
-      border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
+      border-color: var(--ui-input-border-hover, var(--ui-control-border-hover, var(--ui-text-secondary)));
     }
 
     :host:focus-visible {
-      border-color: var(--ui-control-focus, var(--ui-accent-solid));
+      border-color: var(--ui-input-focus-border, var(--ui-control-focus, var(--ui-accent-solid)));
       outline: none;
       box-shadow: var(--ui-input-focus-shadow, var(--ui-control-inset), var(--ui-control-focus-halo-shadow));
     }

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

@@ -0,0 +1,86 @@
+<template component="ui-input-group">
+  <defs>
+    <prop name="disabled" type="boolean" default="false">Fades the group's framing to match a disabled input inside it. Disable the input itself too.</prop>
+  </defs>
+  <div>
+    <span class="affix"><slot name="prefix"></slot></span>
+    <span class="field"><slot></slot></span>
+    <span class="affix"><slot name="suffix"></slot></span>
+  </div>
+  <style>
+    /* An input with fixed text before or after it, such as a domain after a site's name
+       ("acme" + ".example.com") or slashes around a path. The group draws the field's border and
+       focus ring around the input and its affixes together; the input inside drops its own through
+       its custom properties, so it is still the one ui-input, with its form behaviour intact. The
+       affixes are plain text beside the input, so name the input with a label that says what the
+       whole value is. */
+    :host {
+      --ui-input-border: transparent;
+      --ui-input-border-hover: transparent;
+      --ui-input-focus-border: transparent;
+      --ui-input-shadow: none;
+      --ui-input-focus-shadow: none;
+      --ui-input-radius: 0;
+      --ui-input-surface: transparent;
+
+      display: flex;
+      align-items: stretch;
+      box-sizing: border-box;
+      inline-size: 100%;
+      min-inline-size: 0;
+      min-block-size: var(--ui-control-size-md);
+      border: 1px solid var(--ui-border-strong);
+      border-radius: var(--ui-radius-md);
+      background: var(--ui-surface-elevated);
+      box-shadow: var(--ui-control-inset);
+      overflow: hidden;
+      transition: border-color var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    :host:hover:not(:focus-within) {
+      border-color: var(--ui-text-secondary);
+    }
+
+    :host:focus-within {
+      border-color: var(--ui-accent-solid);
+      box-shadow:
+        var(--ui-control-inset),
+        var(--ui-control-focus-halo-shadow);
+    }
+
+    :host:has([aria-invalid="true"], :user-invalid) {
+      border-color: var(--ui-danger-solid);
+    }
+
+    :host-state([disabled]) {
+      background: var(--ui-surface-muted);
+      box-shadow: none;
+    }
+
+    .field {
+      display: flex;
+      flex: 1;
+      min-inline-size: 0;
+    }
+
+    .affix {
+      display: inline-flex;
+      flex: none;
+      align-items: center;
+      padding-inline: var(--ui-space-2);
+      color: var(--ui-text-secondary);
+      font-family: var(--ui-font-family-mono);
+      font-size: var(--ui-font-size-sm);
+      white-space: nowrap;
+    }
+
+    .affix:empty {
+      display: none;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-list/ui-list.html

@@ -3,6 +3,9 @@
     <prop name="layout" type="rows | grid" default="rows"
     >How the items are laid out. Rows stack the items one per line, for a list read top to bottom. Grid sets them in as many columns as fit, each at least
       --ui-list-min-item-width (14rem) wide, for card items such as pinned or featured entries.</prop>
+    <prop name="density" type="comfortable | compact" default="comfortable"
+    >How much room each item takes. comfortable is a full row, easy to point at, for lists of things to open; compact sets items close together with no row
+      padding, for a short list of facts inside other content, such as the features a plan includes.</prop>
   </defs>
   <ul role="list"><slot></slot></ul>
   <style>
@@ -19,6 +22,15 @@
       list-style: none;
     }
 
+    /* Compact passes its size to the items through private properties, which cross into each item. */
+    :host-state([density="compact"]) {
+      --_ui-list-item-min-size: 0;
+      --_ui-list-item-padding-block: 0;
+      --_ui-list-item-padding-inline: 0;
+      --_ui-list-item-title-weight: var(--ui-font-normal);
+      gap: var(--ui-list-gap, var(--ui-space-2));
+    }
+
     :host-state([layout="grid"]) {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ui-list-min-item-width, 14rem)), 1fr));

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

@@ -32,9 +32,9 @@
       align-items: center;
       gap: var(--ui-list-item-gap, var(--ui-space-3));
       min-inline-size: 0;
-      min-block-size: var(--ui-control-size, 2.5rem);
-      padding-block: var(--ui-list-item-padding-block, var(--ui-space-2));
-      padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-3));
+      min-block-size: var(--_ui-list-item-min-size, var(--ui-control-size, 2.5rem));
+      padding-block: var(--ui-list-item-padding-block, var(--_ui-list-item-padding-block, var(--ui-space-2)));
+      padding-inline: var(--ui-list-item-padding-inline, var(--_ui-list-item-padding-inline, var(--ui-space-3)));
       border-radius: var(--ui-radius-md);
       color: var(--ui-text-primary);
       transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), border-color var(--ui-motion-fast) var(--ui-motion-ease);
@@ -104,7 +104,7 @@
 
     .title {
       font-size: var(--ui-font-size-md);
-      font-weight: var(--ui-font-medium);
+      font-weight: var(--_ui-list-item-title-weight, var(--ui-font-medium));
       line-height: var(--ui-line-height-tight);
     }
 

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 = () => {