@threadlabs/looma 0.17.4 → 0.18.1

package/components/ui-menu/ui-menu.js

@@ -17,6 +17,7 @@ export default function controller(host) {
   const overlayId = `ui-menu-${Math.random().toString(36).slice(2, 11)}`;
   const items = () => menuItems(element);
   let anchor = null;
+  let anchorAria = null;
   let surface = null;
   let lastFor;
   let lastPlacement;
@@ -39,6 +40,16 @@ export default function controller(host) {
     if (reason === "escape") anchor?.focus();
   };
   const ids = createIdResolver(document, () => apply());
+  const releaseAnchor = () => {
+    if (!anchor) return;
+    anchor.removeEventListener("click", onAnchorClick);
+    for (const [name, value] of Object.entries(anchorAria ?? {})) {
+      if (value === null) anchor.removeAttribute(name);
+      else anchor.setAttribute(name, value);
+    }
+    anchor = null;
+    anchorAria = null;
+  };
   const setup = () => {
     const nextFor = host.state.inline ? "" : String(host.state.for ?? "");
     const nextPlacement = String(host.state.placement ?? "bottom-start");
@@ -46,8 +57,9 @@ export default function controller(host) {
     lastFor = nextFor;
     lastPlacement = nextPlacement;
     surface?.destroy();
-    anchor?.removeEventListener("click", onAnchorClick);
+    releaseAnchor();
     anchor = ids.get(nextFor);
+    if (anchor) anchorAria = { "aria-haspopup": anchor.getAttribute("aria-haspopup"), "aria-expanded": anchor.getAttribute("aria-expanded") };
     anchor?.addEventListener("click", onAnchorClick);
     surface = anchor ? createAnchoredSurface(element, { anchor, placement: nextPlacement }) : null;
   };
@@ -119,8 +131,8 @@ export default function controller(host) {
     ids.stop();
     element.removeEventListener("click", onClick);
     element.removeEventListener("keydown", onKeydown);
-    anchor?.removeEventListener("click", onAnchorClick);
     surface?.destroy();
     closeOverlay(document, overlayId);
+    releaseAnchor();
   };
 }

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

@@ -87,6 +87,9 @@
     }
 
     .label {
+      display: flex;
+      align-items: center;
+      gap: var(--ui-space-2);
       flex: 1;
       min-inline-size: 0;
     }

package/components/ui-popover/ui-popover.js

@@ -13,6 +13,7 @@ export default function controller(host) {
   };
   const overlayId = `ui-popover-${Math.random().toString(36).slice(2, 11)}`;
   let anchor = null;
+  let anchorExpanded = null;
   let surface = null;
   let lastFor;
   let lastPlacement;
@@ -37,6 +38,14 @@ export default function controller(host) {
     host.dispatch("open", { open: true, reason: "action", trigger });
   };
   const ids = createIdResolver(document, () => apply());
+  const releaseAnchor = () => {
+    if (!anchor) return;
+    anchor.removeEventListener("click", onAnchorClick);
+    if (anchorExpanded === null) anchor.removeAttribute("aria-expanded");
+    else anchor.setAttribute("aria-expanded", anchorExpanded);
+    anchor = null;
+    anchorExpanded = null;
+  };
   const setup = () => {
     const nextFor = String(host.state.for ?? "");
     const nextPlacement = String(host.state.placement ?? "bottom-start");
@@ -44,8 +53,9 @@ export default function controller(host) {
     lastFor = nextFor;
     lastPlacement = nextPlacement;
     surface?.destroy();
-    anchor?.removeEventListener("click", onAnchorClick);
+    releaseAnchor();
     anchor = ids.get(nextFor);
+    if (anchor) anchorExpanded = anchor.getAttribute("aria-expanded");
     anchor?.addEventListener("click", onAnchorClick);
     surface = anchor ? createAnchoredSurface(element, { anchor, placement: nextPlacement, gap: offset }) : null;
   };
@@ -57,6 +67,7 @@ export default function controller(host) {
     }
     setup();
     const open = Boolean(host.state.internalOpen);
+    if (anchor) anchor.setAttribute("aria-expanded", String(open));
     if (open) {
       surface?.show();
       openOverlay({ id: overlayId, modal: false, element, relatedElements: anchor ? [anchor] : [], dismissible: true, requestClose: close });
@@ -79,8 +90,8 @@ export default function controller(host) {
     stop();
     ids.stop();
     element.removeEventListener("keydown", onKeydown);
-    anchor?.removeEventListener("click", onAnchorClick);
     surface?.destroy();
     closeOverlay(document, overlayId);
+    releaseAnchor();
   };
 }

package/components/ui-select/ui-select.html

@@ -92,7 +92,7 @@
       background-size: 1.125rem 1.125rem;
     }
 
-    :host:hover:not(:focus):not(:disabled) {
+    :host:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(:user-invalid) {
       border-color: var(--ui-select-border-hover, var(--ui-control-border-hover, var(--ui-text-secondary)));
     }
 

package/components/ui-spinner/ui-spinner.html

@@ -9,11 +9,16 @@
     class="ring"
     :role="{ true: 'status', false: null }[format('%s', label != '')]"
     :aria-label="{ true: label, false: null }[format('%s', label != '')]"
+    :aria-live="{ true: 'polite', false: null }[format('%s', label != '')]"
     :aria-hidden="{ true: null, false: 'true' }[format('%s', label != '')]"
-  ></span>
+  >
+    <svg viewBox="0 0 50 50" fill="none" aria-hidden="true" focusable="false">
+      <circle class="track" cx="25" cy="25" r="20"></circle>
+      <circle class="arc" cx="25" cy="25" r="20"></circle>
+    </svg>
+  </span>
   <style>
-    /* Something is on its way. The ring chases in the current text colour; with reduced motion it holds still,
-       and the label (or the text beside it) still says what is happening. */
+    /* A rounded SVG arc grows and recedes over a quiet full-circle track. */
     :host {
       display: inline-flex;
       flex: none;
@@ -22,34 +27,62 @@
       box-sizing: border-box;
       inline-size: 1em;
       block-size: 1em;
-      border: 2px solid transparent;
-      border-block-start-color: currentColor;
-      border-inline-end-color: color-mix(in srgb, currentColor 52%, transparent);
-      border-radius: 50%;
       color: currentColor;
       font-size: var(--ui-font-size-lg);
       line-height: 1;
-      animation: ui-spinner-chase 1s linear infinite;
     }
 
     :host-state([size="sm"]) {
       font-size: var(--ui-font-size-md);
     }
 
-    @keyframes ui-spinner-chase {
+    svg {
+      display: block;
+      inline-size: 100%;
+      block-size: 100%;
+      animation: ui-spinner-rotate 2s linear infinite;
+    }
+
+    circle {
+      stroke-width: 3;
+      stroke-linecap: round;
+    }
+
+    .track {
+      stroke: color-mix(in srgb, currentColor 16%, transparent);
+    }
+
+    .arc {
+      stroke: currentColor;
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: 0;
+      animation: ui-spinner-dash 1.5s ease-in-out infinite;
+    }
+
+    @keyframes ui-spinner-rotate {
+      100% {
+        transform: rotate(1turn);
+      }
+    }
+
+    @keyframes ui-spinner-dash {
       0% {
-        transform: rotate(0);
+        stroke-dasharray: 1, 150;
+        stroke-dashoffset: 0;
       }
-      70% {
-        transform: rotate(160deg);
+      50% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -35;
       }
       100% {
-        transform: rotate(1turn);
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -124;
       }
     }
 
     @media (prefers-reduced-motion: reduce) {
-      :host {
+      svg,
+      .arc {
         animation: none;
       }
     }

package/components/ui-textarea/ui-textarea.html

@@ -74,7 +74,7 @@
       opacity: 1;
     }
 
-    :host:hover:not(:focus):not(:disabled) {
+    :host:hover:not(:focus):not(:disabled):not(:read-only):not([aria-invalid="true"]):not(:user-invalid) {
       border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
     }