@threadlabs/looma 0.17.0 → 0.17.2

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

@@ -101,15 +101,15 @@
     }
 
     .surface {
-      --_tooltip-line: var(--_ui-tooltip-border, var(--ui-overlay-border, var(--ui-border-default)));
+      --_tooltip-line: var(--_ui-tooltip-border, var(--ui-overlay-border, var(--ui-border-strong)));
       position: relative;
       box-sizing: border-box;
       max-inline-size: var(--_ui-tooltip-max-inline-size, 18rem);
       border: 1px solid var(--_tooltip-line);
-      border-radius: var(--_ui-tooltip-radius, var(--ui-overlay-radius, var(--ui-radius-sm)));
+      border-radius: var(--_ui-tooltip-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
       background: var(--_ui-tooltip-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
       color: var(--_ui-tooltip-text, var(--ui-text-primary));
-      padding: var(--ui-space-1) var(--ui-space-2);
+      padding: var(--ui-space-2) var(--ui-space-3);
       font-family: var(--ui-font-family-sans);
       font-size: var(--ui-font-size-sm);
       line-height: var(--ui-line-height-tight);
@@ -129,20 +129,20 @@
       position: absolute;
       z-index: 1;
       inset-inline-start: var(--ui-space-3);
-      inset-block-end: calc(var(--_ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
-      inline-size: var(--_ui-tooltip-arrow-size, 0.5rem);
-      block-size: var(--_ui-tooltip-arrow-size, 0.5rem);
+      inset-block-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
+      inline-size: var(--_ui-tooltip-arrow-size, 0.625rem);
+      block-size: var(--_ui-tooltip-arrow-size, 0.625rem);
       box-sizing: border-box;
       background: inherit;
       border: 0 solid var(--_tooltip-line);
       border-inline-end-width: 1px;
       border-block-end-width: 1px;
       border-end-end-radius: 1px;
-      transform: rotate(45deg);
+      transform: rotate(45deg) scaleX(1.25) scaleY(0.85);
     }
 
     :host[data-ui-actual-placement="bottom"] .surface::after {
-      inset-block-start: calc(var(--_ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
+      inset-block-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
       inset-block-end: auto;
       border-inline-end-width: 0;
       border-block-end-width: 0;
@@ -153,7 +153,7 @@
     }
 
     :host[data-ui-actual-align="center"] .surface::after {
-      inset-inline-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.5rem) / 2);
+      inset-inline-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.625rem) / 2);
     }
 
     :host[data-ui-actual-align="end"] .surface::after {
@@ -163,20 +163,20 @@
 
     :host[data-ui-actual-placement="left"] .surface::after,
     :host[data-ui-actual-placement="right"] .surface::after {
-      inset-block-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.5rem) / 2);
+      inset-block-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.625rem) / 2);
       inset-block-end: auto;
       border: 0 solid var(--_tooltip-line);
     }
 
     :host[data-ui-actual-placement="left"] .surface::after {
       inset-inline-start: auto;
-      inset-inline-end: calc(var(--_ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
+      inset-inline-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
       border-inline-end-width: 1px;
       border-block-end-width: 1px;
     }
 
     :host[data-ui-actual-placement="right"] .surface::after {
-      inset-inline-start: calc(var(--_ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
+      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;

package/components/ui-tooltip/ui-tooltip.js

@@ -20,7 +20,7 @@ export default function controller(host) {
   const offset = () => {
     const value = getComputedStyle(element).getPropertyValue("--ui-tooltip-offset").trim();
     const amount = Number.parseFloat(value);
-    if (!Number.isFinite(amount)) return 4;
+    if (!Number.isFinite(amount)) return 10;
     if (value.endsWith("rem")) return amount * Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
     if (value.endsWith("em")) return amount * Number.parseFloat(getComputedStyle(element).fontSize);
     return amount;

package/components/ui-top-bar/ui-top-bar.html

@@ -51,7 +51,7 @@
       padding-inline-start: max(var(--ui-top-bar-padding-inline, var(--ui-space-4)), env(safe-area-inset-left));
       padding-inline-end: max(var(--ui-top-bar-padding-inline, var(--ui-space-4)), env(safe-area-inset-right));
       background: var(--ui-top-bar-surface, var(--ui-surface-elevated));
-      border-block-end: 1px solid var(--ui-top-bar-border, var(--ui-border-default));
+      border-block-end: 1px solid var(--ui-top-bar-border, var(--ui-border-divider));
     }
 
     .leading,

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

@@ -202,6 +202,7 @@ export default function controller(host) {
       event.stopPropagation();
       selectItem(item, "pointer");
       focusItem(item);
+      if (checkbox) requestAnimationFrame(syncSelection);
       return;
     }
     const item = itemFromEvent(event);
@@ -326,6 +327,7 @@ export default function controller(host) {
       else item.removeAttribute("data-selection-mode");
       const checkbox = rowFor(item)?.querySelector(".selection-checkbox");
       if (checkbox) {
+        checkbox.checked = item.getAttribute("aria-selected") === "true";
         const descendants = Array.from(item.querySelectorAll(itemSelector));
         checkbox.indeterminate = mode === "multiple" && descendants.some((child) => child.getAttribute("aria-selected") === "true")
           && (item.getAttribute("aria-selected") !== "true" || descendants.some((child) => child.getAttribute("aria-selected") !== "true"));
@@ -342,7 +344,8 @@ export default function controller(host) {
     }
     const items = allItems();
     const selected = new Set(items.filter((candidate) => candidate.getAttribute("aria-selected") === "true").map(itemId).filter(Boolean));
-    const subtree = [item, ...item.querySelectorAll(itemSelector)].filter((candidate) => candidate.getAttribute("aria-disabled") !== "true");
+    const subtree = [item, ...Array.from(item.querySelectorAll(itemSelector))]
+      .filter((candidate) => candidate.getAttribute("aria-disabled") !== "true");
     const adding = !selected.has(id);
     for (const candidate of subtree) {
       const candidateId = itemId(candidate);

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

@@ -171,7 +171,8 @@
     }
 
     :host-state([disabled]) .row {
-      opacity: 0.55;
+      color: var(--ui-disabled-text);
+      background: var(--ui-disabled-surface);
     }
 
     :host[data-dragging] .row {