@threadlabs/looma 0.18.0 → 0.18.2

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

@@ -307,7 +307,7 @@
       border-color: transparent;
     }
 
-    :host-state([variant="ghost"]):active:not(:disabled, [aria-disabled="true"]) {
+    :host-state([variant="ghost"]):is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
       background-color: var(--ui-button-ghost-active-surface, oklch(from var(--_tone) l c h / 16%));
       border-color: transparent;
       box-shadow: var(--ui-pressed);

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

@@ -35,6 +35,10 @@
       syntax: "*";
       inherits: false;
     }
+    @property --ui-icon-button-active-surface {
+      syntax: "*";
+      inherits: false;
+    }
     @property --ui-icon-button-border {
       syntax: "*";
       inherits: false;
@@ -277,6 +281,12 @@
       background-color: var(--ui-icon-button-solid-hover-surface, var(--ui-accent-hover));
     }
 
+    :host-state([variant="ghost"])[aria-expanded="true"]:enabled:not([aria-disabled="true"]) {
+      background-color: var(--ui-icon-button-active-surface, color-mix(in srgb, currentColor 16%, transparent));
+      color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
+      box-shadow: var(--ui-pressed);
+    }
+
     :host:active:enabled:not([aria-disabled="true"]) {
       transform: scale(var(--ui-icon-button-active-scale, 0.96));
     }

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();
   };
 }