@threadlabs/looma 0.39.1 → 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 {