@threadlabs/looma 0.39.0 → 0.39.2

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

@@ -96,7 +96,7 @@
       from:tabindex="{ true: '0', false: null }[concat(($loading or $pending) and not $disabled)]"
     >
       <span $if="$loading or $pending" class="spinner-wrap"><ui-spinner size="sm"></ui-spinner></span>
-      <slot></slot>
+      <span class="label"><slot></slot></span>
       <span class="badge"><slot name="badge"></slot></span>
     </a>
     <button
@@ -109,7 +109,7 @@
       from:aria-busy="$loading or $pending"
     >
       <span $if="$loading or $pending" class="spinner-wrap"><ui-spinner size="sm"></ui-spinner></span>
-      <slot></slot>
+      <span class="label"><slot></slot></span>
       <span class="badge"><slot name="badge"></slot></span>
     </button>
   </template>
@@ -237,6 +237,7 @@
 
     :host {
       --_button-square-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
+      box-sizing: border-box !important;
       appearance: none;
       min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
       border-style: solid;
@@ -283,6 +284,21 @@
       padding-block: var(--ui-space-0-5) !important;
     }
 
+    /* Trim the text line itself: an anonymous flex item retains font-metric space in some fonts. */
+    .label {
+      display: block !important;
+      align-content: center !important;
+      min-inline-size: 0 !important;
+      min-block-size: 1lh !important;
+    }
+
+    .label:has(svg) {
+      display: inline-flex !important;
+      align-items: center !important;
+      gap: var(--ui-space-2) !important;
+      text-box-trim: none;
+    }
+
     .badge {
       display: inline-flex !important;
       align-items: center !important;
@@ -294,7 +310,7 @@
     }
 
     @supports (text-box-trim: trim-both) {
-      :host {
+      .label:not(:has(svg)) {
         text-box-trim: trim-both;
         text-box-edge: cap alphabetic;
       }
@@ -622,6 +638,11 @@
       transition: color var(--ui-motion-fast) var(--ui-motion-ease), text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
+    :host[data-appearance="link"] .label {
+      display: inline !important;
+      text-box-trim: none;
+    }
+
     :host[data-appearance="link"]:hover:not(:disabled, [aria-disabled="true"]) {
       color: var(--ui-button-link-hover-text, var(--ui-text-primary));
       text-decoration-color: currentColor;

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

@@ -142,7 +142,8 @@
 
     input::after {
       content: "";
-      position: absolute;
+      position: absolute !important;
+      transform: none !important;
       opacity: 0;
       transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
     }
@@ -155,43 +156,44 @@
       box-shadow: var(--ui-control-inset);
     }
 
-    /* Centre the tick's box and lift it slightly for the rotated check shape. */
+    /* The SVG's painted bounds are centred in its viewBox, including its round stroke.
+       Centre that box directly; rotated border boxes do not centre the visible check. */
     input:checked::after {
-      inset: 0;
-      margin: auto !important;
-      inline-size: calc(var(--_ui-checkbox-size) * 0.28 / 1.125);
-      block-size: calc(var(--_ui-checkbox-size) * 0.5 / 1.125);
-      /* Longhands, not `border: solid var(...)`: lowering drops a shorthand that omits a
-         component, which left the tick with no style and no colour. */
-      border-style: solid;
-      border-color: var(--ui-text-on-accent);
-      border-width: 0 calc(var(--_ui-checkbox-size) * 0.125 / 1.125) calc(var(--_ui-checkbox-size) * 0.125 / 1.125) 0;
+      inset: 50% auto auto 50% !important;
+      inline-size: calc(var(--_ui-checkbox-size) * 0.7) !important;
+      block-size: calc(var(--_ui-checkbox-size) * 0.7) !important;
+      background: var(--ui-text-on-accent);
+      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 11.5 5 5 9-9'/%3E%3C/svg%3E")
+        center / contain no-repeat;
       opacity: 1;
-      transform: translateY(calc(var(--_ui-checkbox-size) * -0.09 / 1.125)) rotate(45deg);
+      translate: -50% -50% !important;
       animation: ui-checkbox-check var(--ui-motion-base) var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
     }
 
     input:indeterminate::after {
-      inset: 50% calc(var(--_ui-checkbox-size) * 0.23 / 1.125) auto;
-      block-size: calc(var(--_ui-checkbox-size) * 0.125 / 1.125);
+      mask: none;
+      animation: none;
+      inset: 50% calc(var(--_ui-checkbox-size) * 0.23 / 1.125) auto !important;
+      inline-size: auto !important;
+      block-size: calc(var(--_ui-checkbox-size) * 0.125 / 1.125) !important;
       border-radius: var(--ui-radius-round);
       background: var(--ui-text-on-accent);
       opacity: 1;
-      transform: translateY(-50%);
+      translate: 0 -50% !important;
     }
 
     @keyframes ui-checkbox-check {
       from {
         opacity: 0;
-        transform: translateY(calc(var(--_ui-checkbox-size) * -0.09 / 1.125)) rotate(45deg) scale(0.55);
+        scale: 0.55;
       }
       65% {
         opacity: 1;
-        transform: translateY(calc(var(--_ui-checkbox-size) * -0.09 / 1.125)) rotate(45deg) scale(1.12);
+        scale: 1.12;
       }
       to {
         opacity: 1;
-        transform: translateY(calc(var(--_ui-checkbox-size) * -0.09 / 1.125)) rotate(45deg) scale(1);
+        scale: 1;
       }
     }
 
@@ -202,6 +204,20 @@
       }
     }
 
+    @media (forced-colors: active) {
+      input:checked,
+      input:indeterminate {
+        forced-color-adjust: none;
+        background: Highlight;
+        border-color: Highlight;
+      }
+      input:checked::after,
+      input:indeterminate::after {
+        forced-color-adjust: none;
+        background: HighlightText;
+      }
+    }
+
     input:hover:enabled {
       border-color: var(--ui-accent-solid);
     }

package/components/ui-light-editor/ui-light-editor.html

@@ -1,5 +1,6 @@
 <link rel="component" href="../ui-icon/ui-icon.html">
 <link rel="component" href="../ui-number-input/ui-number-input.html">
+<link rel="component" href="../ui-disclosure/ui-disclosure.html">
 <template component="ui-light-editor" module="./ui-light-editor.js">
   <defs>
     <state name="horizontal" type="string" value="50"></state>
@@ -29,31 +30,31 @@
         </button>
       </span>
     </span>
-    <span class="coordinates">
-      <ui-number-input
-        data-coordinate="x"
-        from:value="$horizontal"
-        min="0"
-        max="100"
-        step="1"
-        unit="%"
-        label="Light horizontal position"
-        from:size="$size"
-        from:disabled="$disabled"
-      ></ui-number-input>
-      <ui-number-input
-        data-coordinate="y"
-        from:value="$vertical"
-        min="0"
-        max="100"
-        step="1"
-        unit="%"
-        label="Light vertical position"
-        from:size="$size"
-        from:disabled="$disabled"
-      ></ui-number-input>
-    </span>
-    <span class="hint">Drag the light, tap the background, use arrow keys, or enter its position. Escape cancels a drag. Top centre is 50%, 0%.</span>
+    <span class="hint">Drag or tap to move the light. Arrow keys adjust; Escape cancels.</span>
+    <ui-disclosure summary="Exact position"><span class="coordinates">
+        <ui-number-input
+          data-coordinate="x"
+          from:value="$horizontal"
+          min="0"
+          max="100"
+          step="1"
+          unit="%"
+          label="Light horizontal position"
+          from:size="$size"
+          from:disabled="$disabled"
+        ></ui-number-input>
+        <ui-number-input
+          data-coordinate="y"
+          from:value="$vertical"
+          min="0"
+          max="100"
+          step="1"
+          unit="%"
+          label="Light vertical position"
+          from:size="$size"
+          from:disabled="$disabled"
+        ></ui-number-input>
+      </span></ui-disclosure>
   </span>
   <style>
     :host {

package/components/ui-skeleton/ui-skeleton.html

@@ -1,4 +1,4 @@
-<template component="ui-skeleton">
+<template component="ui-skeleton" module="./ui-skeleton.js">
   <defs>
     <prop name="shape" type="keyword" values="text, circle, rectangle" default="text"
     >The content's silhouette. text reserves one inherited line box with a shorter bar inside it; circle matches a medium Avatar; rectangle reserves a media
@@ -8,8 +8,12 @@
       Avatar's outer size for circles.</prop>
     <prop name="height" type="string" default=""
     >Block size as a CSS length. Empty reserves one line for text, a square for circles, or 8rem for rectangles. Set only width to keep a circle square.</prop>
-    <prop name="animated" type="boolean" default="false"
-    >Gently pulses the placeholder. Off by default, and always still when the reader requests reduced motion.</prop>
+    <prop
+      name="animated"
+      type="boolean"
+      default="true"
+      default-true-reason="A travelling highlight identifies pending content by default; reduced-motion preferences always keep it static."
+    >Moves a subtle highlight from left to right. On by default; pass false to keep it static. Reduced-motion preferences always disable the shimmer.</prop>
   </defs>
   <span aria-hidden="true" style:--ui-skeleton-width="$width" style:--ui-skeleton-height="$height"></span>
   <style>
@@ -22,8 +26,20 @@
       syntax: "*";
       inherits: false;
     }
+    @property --_ui-skeleton-viewport-x {
+      syntax: "<length>";
+      inherits: false;
+      initial-value: 0px;
+    }
+    @property --_ui-skeleton-viewport-scale {
+      syntax: "<number>";
+      inherits: false;
+      initial-value: 1;
+    }
 
     :host {
+      --_ui-skeleton-paint-x: var(--_ui-skeleton-viewport-x);
+      --_ui-skeleton-paint-scale: var(--_ui-skeleton-viewport-scale);
       display: block !important;
       position: relative;
       box-sizing: border-box !important;
@@ -65,23 +81,36 @@
     }
 
     :host([animated])::before {
-      animation: ui-skeleton-pulse 1.6s ease-in-out infinite;
+      background-image: linear-gradient(
+        90deg,
+        transparent,
+        light-dark(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.14)) 50%,
+        transparent
+      );
+      background-size: calc(100vw / var(--_ui-skeleton-paint-scale)) 100%;
+      background-position: calc(0vw - var(--_ui-skeleton-paint-x)) 0;
+      background-repeat: repeat-x;
+      animation: ui-skeleton-shimmer 3s linear infinite;
     }
-    @keyframes ui-skeleton-pulse {
-      50% {
-        opacity: 0.45;
+    @keyframes ui-skeleton-shimmer {
+      to {
+        background-position: calc(100vw / var(--_ui-skeleton-paint-scale) - var(--_ui-skeleton-paint-x)) 0;
       }
     }
     @media (prefers-reduced-motion: reduce) {
       :host([animated])::before {
         animation: none;
+        background-image: none;
       }
     }
     @media (forced-colors: active) {
       :host::before {
         background: CanvasText;
         opacity: 0.2;
+      }
+      :host([animated])::before {
         animation: none;
+        background-image: none;
       }
     }
     :host[hidden] {

package/components/ui-skeleton/ui-skeleton.js

@@ -0,0 +1,46 @@
+/**
+ * Keep one viewport gradient aligned through mounting, scrolling and transformed surfaces.
+ * @lifecycle CSS owns motion preferences; geometry tracking stops with the animation or disconnect.
+ */
+export function connect(host) {
+  const element = host.element;
+  const view = element.ownerDocument.defaultView;
+  let motion;
+  let frame = 0;
+  let previousPosition = "";
+  let previousScale = "";
+  const trackPosition = () => {
+    frame = 0;
+    if (motion?.playState !== "running") return;
+    const bounds = element.getBoundingClientRect();
+    const width = parseFloat(view.getComputedStyle(element).width);
+    const scale = bounds.width > 0 && width > 0 ? bounds.width / width : 1;
+    const position = `${bounds.left / scale}px`;
+    const scaleValue = String(scale);
+    if (position !== previousPosition) {
+      element.style.setProperty("--_ui-skeleton-viewport-x", position);
+      previousPosition = position;
+    }
+    if (scaleValue !== previousScale) {
+      element.style.setProperty("--_ui-skeleton-viewport-scale", scaleValue);
+      previousScale = scaleValue;
+    }
+    frame = view.requestAnimationFrame(trackPosition);
+  };
+  const synchronize = () => {
+    const names = view.getComputedStyle(element, "::before").animationName.split(",").map(name => name.trim());
+    for (const animation of element.getAnimations({ subtree: true })) {
+      if (names.includes(animation.animationName)) {
+        motion = animation;
+        motion.startTime = 0;
+      }
+    }
+    if (!frame) trackPosition();
+  };
+  element.addEventListener("animationstart", synchronize);
+  synchronize();
+  return () => {
+    element.removeEventListener("animationstart", synchronize);
+    view.cancelAnimationFrame(frame);
+  };
+}