@threadlabs/looma 0.23.6 → 0.23.8

package/components/ui-badge/ui-badge.html

@@ -7,10 +7,12 @@
     >Which colour the badge speaks in. neutral is a quiet grey for plain labels; accent draws the eye in the accent colour; info, success, warning, and danger
       mark a status, so match the tone to what the badge says. For a category rather than a status, set the --ui-badge-color hook on the badge instead: any CSS
       colour, which overrides the tone.</prop>
-    <prop name="shape" type="keyword" values="pill, tag, dot" default="pill"
+    <prop name="shape" type="keyword" values="pill, tag, dot, square" default="pill"
     >Silhouette. pill is rounded at both ends; tag is a pointed label. dot is a compact circular signal with visually hidden text: include a state label, or set
-      aria-hidden when the surrounding control already names that state.</prop>
-    <prop name="size" type="keyword" values="xs, md" default="md">Scale. xs is a compact count beside small controls; md is the usual text badge.</prop>
+      aria-hidden when the surrounding control already names that state. square is a fixed rounded square for an icon or single glyph beside a heading; hide a
+      decorative icon when adjacent words name it.</prop>
+    <prop name="size" type="keyword" values="xs, md" default="md"
+    >Scale. xs is a compact count beside small controls; md is the usual text badge. A square is 24px at xs and 32px at md with default spacing.</prop>
   </defs>
   <span><span class="label"><slot></slot></span></span>
   <style>
@@ -19,6 +21,10 @@
       syntax: "*";
       inherits: false;
     }
+    @property --ui-badge-square-size {
+      syntax: "*";
+      inherits: false;
+    }
     @property --ui-badge-dot-size {
       syntax: "*";
       inherits: false;
@@ -221,6 +227,31 @@
       --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
     }
 
+    /* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
+    :host-state([shape="square"]) {
+      --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-4) * 2));
+      display: inline-flex;
+      box-sizing: border-box;
+      flex: none;
+      inline-size: var(--_badge-square-size);
+      block-size: var(--_badge-square-size);
+      min-inline-size: var(--_badge-square-size);
+      min-block-size: var(--_badge-square-size);
+      padding: 0;
+      border-radius: var(--ui-radius-md);
+      text-box-trim: none;
+    }
+
+    :host-state([shape="square"][size="xs"]) {
+      --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-3) * 2));
+    }
+
+    :host-state([shape="square"]) .label {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
     /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
     :host-state([shape="dot"]) {
       position: relative;

package/components/ui-disclosure/ui-disclosure.html

@@ -2,6 +2,11 @@
   <defs>
     <prop name="density" type="keyword" values="comfortable, compact" default="comfortable"
     >Compact trades padding and type size for rows that fit more on screen.</prop>
+    <prop name="variant" type="keyword" values="plain, navigation" default="plain"
+    >Navigation shares icon columns, spacing, type, hover, and corners with Nav Item. Plain retains the standard disclosure treatment.</prop>
+    <prop name="requiredOpen" type="boolean" default="false"
+    >In a named exclusive group, keeps at least one member open. Clicking the last open trigger does not close it; opening another member transfers the open
+      state.</prop>
     <prop name="fill" type="boolean" default="false"
     >In a column with a bounded height, an open disclosure fills the remaining space and keeps its trigger visible. The content slot can contain a Scroll Area.
       Closed items keep only their trigger height.</prop>
@@ -38,10 +43,11 @@
     </event>
   </defs>
   <div>
-    <div class="heading" from:role="headingRole" from:aria-level="headingAriaLevel">
+    <div class="heading" $ref="heading" from:role="headingRole" from:aria-level="headingAriaLevel">
       <button class="trigger" type="button" $ref="trigger" from:aria-controls="contentId" from:aria-expanded="internalOpen" from:disabled="disabled">
+        <span class="leading"><slot name="leading"></slot></span>
         <span class="summary"><slot name="summary"><template $value="summary"></template></slot></span>
-        <slot name="indicator"><span class="chevron" aria-hidden="true"></span></slot>
+        <span class="indicator" aria-hidden="true"><slot name="indicator"><span class="chevron"></span></slot></span>
       </button>
     </div>
     <div class="panel" $ref="panel" from:id="contentId"><div class="panel-inner"><slot></slot></div></div>
@@ -90,8 +96,7 @@
     }
 
     .trigger {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr) auto;
+      display: flex;
       gap: var(--ui-space-3);
       align-items: center;
       inline-size: 100%;
@@ -121,19 +126,40 @@
       cursor: not-allowed;
     }
 
+    .summary {
+      flex: 1;
+      min-inline-size: 0;
+    }
+
+    .leading,
+    .indicator {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex: none;
+    }
+    .leading:empty {
+      display: none;
+    }
+    .indicator {
+      transition: transform var(--ui-motion-feedback) var(--ui-motion-feedback-ease);
+    }
+    :host-state([internalOpen]) .indicator {
+      transform: rotate(180deg);
+    }
+
     .chevron {
       inline-size: 0.5rem;
       block-size: 0.5rem;
       border-inline-end: 2px solid currentColor;
       border-block-end: 2px solid currentColor;
       transform: rotate(45deg) translate(-1px, -1px);
-      transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
     .panel {
       display: grid;
       grid-template-rows: 0fr;
-      transition: grid-template-rows var(--ui-motion-fast) var(--ui-motion-ease-out, var(--ui-motion-ease));
+      transition: grid-template-rows var(--ui-motion-reveal) var(--ui-motion-reveal-ease), content-visibility var(--ui-motion-reveal) allow-discrete;
     }
 
     .panel-inner {
@@ -148,22 +174,20 @@
     :host-state([internalOpen]) .panel-inner {
       padding-block: 0 var(--ui-space-3);
     }
-    :host-state([internalOpen]) .chevron {
-      transform: rotate(225deg) translate(-1px, -1px);
-    }
 
     /* A bounded accordion owns one flexible body, so its trigger never scrolls away. The
      * normal content-sized layout and its animation remain unchanged when fill is omitted. */
     :host-state([fill]) {
       display: flex;
       flex-direction: column;
-      flex: none;
-      min-block-size: 0;
+      flex: 0 0 var(--_ui-disclosure-heading-size, var(--_trigger-min-block-size));
+      min-block-size: calc(var(--_ui-disclosure-heading-size, var(--_trigger-min-block-size)) + var(--ui-border-width));
+      transition: flex-grow var(--ui-motion-layout) var(--ui-motion-layout-ease);
       border-block-end: 0;
       border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
     }
     :host-state([fill][internalOpen]) {
-      flex: 1;
+      flex-grow: 1;
     }
     :host-state([fill]) .heading {
       flex: none;
@@ -172,14 +196,8 @@
       border-radius: 0;
     }
     :host-state([fill]) .panel {
-      display: flex;
       flex: 1;
       min-block-size: 0;
-      transition: none;
-    }
-    :host-state([fill]) .panel[hidden] {
-      flex: none;
-      block-size: 0;
     }
     :host-state([fill]) .panel-inner {
       display: flex;
@@ -189,9 +207,43 @@
       padding: 0;
     }
 
+    :host-state([variant="navigation"]) .trigger {
+      gap: var(--ui-nav-gap);
+      padding-inline: var(--ui-nav-padding-inline);
+      min-block-size: var(--ui-nav-min-block-size);
+      padding-block: var(--ui-nav-padding-block);
+      border-radius: var(--ui-selection-radius);
+      font-size: var(--ui-font-size-md);
+      font-weight: var(--ui-font-normal);
+      color: var(--ui-text-secondary);
+    }
+    :host-state([variant="navigation"][density="compact"]) .trigger {
+      padding-inline: var(--ui-nav-compact-padding-inline);
+      padding-block: var(--ui-nav-compact-padding-block);
+      min-block-size: var(--ui-nav-compact-min-block-size);
+      font-size: var(--ui-font-size-sm);
+    }
+    :host-state([variant="navigation"]) .trigger:hover:not(:disabled) {
+      background: var(--ui-nav-hover-surface);
+      color: var(--ui-text-primary);
+    }
+    :host-state([variant="navigation"][internalOpen]) .trigger {
+      color: var(--ui-selection-text);
+    }
+    :host-state([variant="navigation"]) :is(.leading, .indicator) {
+      inline-size: var(--ui-nav-icon-size);
+      font-size: var(--ui-nav-icon-size);
+    }
+    @media (pointer: coarse) {
+      :host-state([variant="navigation"][density="compact"]) .trigger {
+        min-block-size: var(--ui-control-min-block-size);
+      }
+    }
+
     @media (prefers-reduced-motion: reduce) {
+      :host-state([fill]),
       .panel,
-      .chevron {
+      .indicator {
         transition: none;
       }
     }

package/components/ui-disclosure/ui-disclosure.js

@@ -2,6 +2,7 @@ import { trackTrigger } from "../shared/trigger.js";
 
 let disclosures = 0;
 const groups = new WeakMap();
+const pendingGroups = new WeakSet();
 
 function groupFor(document, name) {
   let byName = groups.get(document);
@@ -11,6 +12,27 @@ function groupFor(document, name) {
   return members;
 }
 
+function ensureOpen(members) {
+  if (pendingGroups.has(members)) return;
+  pendingGroups.add(members);
+  queueMicrotask(() => {
+    pendingGroups.delete(members);
+    const current = [...members];
+    if (!current.some(member => member.required()) || current.some(member => member.isOpen())) return;
+    const candidate = current.find(member => !member.disabled()) || current[0];
+    candidate?.open();
+  });
+}
+
+function leaveGroup(document, name, member) {
+  const byName = groups.get(document);
+  const members = byName?.get(name);
+  if (!members) return;
+  members.delete(member);
+  if (!members.size) byName.delete(name);
+  else ensureOpen(members);
+}
+
 // `open` sets the disclosure initially and whenever it changes; the trigger toggles the state.
 export default function controller(host) {
   const document = host.element.ownerDocument;
@@ -19,7 +41,17 @@ export default function controller(host) {
   let external = host.props.open.value;
   host.state.internalOpen = Boolean(external);
   let groupName = "";
+  let disposed = false;
   const member = {
+    isOpen: () => Boolean(host.state.internalOpen),
+    required: () => Boolean(host.props.requiredOpen.value),
+    disabled: () => Boolean(host.props.disabled.value),
+    open() {
+      if (disposed || host.state.internalOpen) return;
+      host.state.internalOpen = true;
+      syncGroup("programmatic", "programmatic");
+      host.dispatch("open", { open: true, reason: "programmatic", trigger: "programmatic" });
+    },
     close(reason, how) {
       if (!host.state.internalOpen) return;
       host.state.internalOpen = false;
@@ -29,18 +61,24 @@ export default function controller(host) {
   const syncGroup = (reason, how) => {
     const name = String(host.props.name.value || "");
     if (name !== groupName) {
-      if (groupName) groupFor(document, groupName).delete(member);
+      if (groupName) leaveGroup(document, groupName, member);
       groupName = name;
       if (groupName) groupFor(document, groupName).add(member);
     }
     if (name && host.state.internalOpen) {
       for (const peer of groupFor(document, name)) if (peer !== member) peer.close(reason, how);
     }
+    if (name) ensureOpen(groupFor(document, name));
+  };
+  const mayClose = () => {
+    if (!groupName) return true;
+    const members = [...groupFor(document, groupName)];
+    return !members.some(peer => peer.required()) || members.some(peer => peer !== member && peer.isOpen());
   };
   const stop = host.effect(() => {
     if (host.props.open.value !== external) {
       external = host.props.open.value;
-      host.state.internalOpen = Boolean(external);
+      if (external || mayClose()) host.state.internalOpen = Boolean(external);
     }
     const level = Number(host.props.headingLevel.value);
     host.state.headingRole = Number.isInteger(level) && level >= 2 && level <= 6 ? "heading" : null;
@@ -52,23 +90,31 @@ export default function controller(host) {
   const onClick = () => {
     if (host.props.disabled.value) return;
     const open = !host.state.internalOpen;
+    if (!open && !mayClose()) return;
     const how = trigger();
     host.state.internalOpen = open;
     if (open) syncGroup("action", how);
     host.dispatch(open ? "open" : "close", { open, reason: "action", trigger: how });
   };
   const onBeforematch = () => queueMicrotask(() => {
-    if (host.state.internalOpen) return;
+    if (disposed || host.state.internalOpen) return;
     host.state.internalOpen = true;
     syncGroup("programmatic", "programmatic");
     host.dispatch("open", { open: true, reason: "programmatic", trigger: "programmatic" });
   });
   host.refs.trigger.addEventListener("click", onClick);
   host.refs.panel.addEventListener("beforematch", onBeforematch);
+  const measureHeading = () => host.element.style.setProperty("--_ui-disclosure-heading-size", `${host.refs.heading.getBoundingClientRect().height}px`);
+  const ResizeObserver = document.defaultView?.ResizeObserver;
+  const headingObserver = ResizeObserver ? new ResizeObserver(measureHeading) : null;
+  headingObserver?.observe(host.refs.heading);
+  measureHeading();
   return () => {
+    disposed = true;
+    headingObserver?.disconnect();
     stop();
     stopTracking();
-    if (groupName) groupFor(document, groupName).delete(member);
+    if (groupName) leaveGroup(document, groupName, member);
     host.refs.trigger.removeEventListener("click", onClick);
     host.refs.panel.removeEventListener("beforematch", onBeforematch);
   };

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

@@ -34,6 +34,7 @@
         <span class="label"><slot></slot></span>
         <span class="description"><slot name="description"></slot></span>
       </span>
+      <span class="trailing"><slot name="trailing"></slot></span>
     </a>
     <button $else type="button" from:aria-current="{ true: 'page', false: null, page: 'page', step: 'step', location: 'location' }[format('%s', current)]">
       <span class="indicator" aria-hidden="true"></span>
@@ -42,6 +43,7 @@
         <span class="label"><slot></slot></span>
         <span class="description"><slot name="description"></slot></span>
       </span>
+      <span class="trailing"><slot name="trailing"></slot></span>
     </button>
   </template>
   <style>
@@ -74,13 +76,13 @@
       box-sizing: border-box;
       display: flex;
       align-items: center;
-      gap: var(--ui-space-3);
+      gap: var(--ui-nav-gap);
       inline-size: var(--ui-nav-item-inline-size, 100%);
       min-inline-size: 0;
-      min-block-size: var(--ui-control-size, 2.5rem);
+      min-block-size: var(--ui-nav-min-block-size);
       margin: 0;
-      padding-block: var(--ui-space-2);
-      padding-inline: var(--ui-space-3);
+      padding-block: var(--ui-nav-padding-block);
+      padding-inline: var(--ui-nav-padding-inline);
       border: 0;
       border-radius: var(--ui-selection-radius);
       background: transparent;
@@ -95,7 +97,7 @@
     }
 
     :host:hover:not([aria-current]) {
-      background: var(--ui-surface-hover);
+      background: var(--ui-nav-hover-surface);
       color: var(--ui-text-primary);
     }
 
@@ -144,12 +146,15 @@
       }
     }
 
-    .leading {
+    .leading,
+    .trailing {
       display: inline-flex;
       flex: none;
       align-items: center;
+      justify-content: center;
+      inline-size: var(--ui-nav-icon-size);
       color: inherit;
-      font-size: var(--ui-font-size-lg);
+      font-size: var(--ui-nav-icon-size);
     }
 
     .content {
@@ -182,11 +187,10 @@
     }
 
     :host-state([density="compact"]) {
-      min-block-size: var(--ui-control-size-sm);
-      padding-block: var(--ui-space-1);
-      padding-inline: var(--ui-space-2);
+      min-block-size: var(--ui-nav-compact-min-block-size);
+      padding-block: var(--ui-nav-compact-padding-block);
+      padding-inline: var(--ui-nav-compact-padding-inline);
     }
-    :host-state([density="compact"]) .leading,
     :host-state([density="compact"]) .label {
       font-size: var(--ui-font-size-sm);
     }
@@ -199,6 +203,7 @@
 
     /* An unused region takes no space. */
     .leading:empty,
+    .trailing:empty,
     .description:empty {
       display: none;
     }

package/components/ui-sidebar/ui-sidebar.html

@@ -12,6 +12,7 @@
     >Below this viewport width (40rem, 48rem, 64rem) the sidebar becomes an off-canvas drawer, closed until toggled.</prop>
     <state type="boolean" name="internalCollapsed" value="false"></state>
     <state type="boolean" name="drawer" value="false"></state>
+    <state type="boolean" name="resizing" value="false"></state>
     <event name="resize" type="object">
       <prop name="width" required type="number"></prop>
       <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
@@ -23,7 +24,7 @@
     </event>
   </defs>
   <aside>
-    <div class="content"><slot></slot></div>
+    <div class="viewport"><div class="content"><slot></slot></div></div>
     <div
       class="resizer"
       $ref="resizer"
@@ -55,10 +56,15 @@
       syntax: "*";
       inherits: false;
     }
+    @property --ui-sidebar-collapsed-width {
+      syntax: "*";
+      inherits: false;
+    }
 
     :host {
       /* Hooks do not inherit, so the parts below read them from the root. */
       --_ui-sidebar-backdrop: var(--ui-sidebar-backdrop);
+      --_ui-sidebar-expanded-width: var(--_sidebar-width, var(--ui-sidebar-width, 280px));
 
       position: relative;
       box-sizing: border-box;
@@ -70,6 +76,7 @@
       min-block-size: 0;
       background: var(--ui-sidebar-surface, var(--ui-surface-default));
       border-inline-end: var(--ui-border-width) solid var(--ui-sidebar-border, var(--ui-border-divider));
+      transition: inline-size var(--ui-motion-layout) var(--ui-motion-layout-ease), visibility var(--ui-motion-layout);
     }
 
     :host-state([side="end"]) {
@@ -79,10 +86,17 @@
 
     /* The panel's content scrolls, and each edge that hides content fades: the scroll fade every
        Looma scroller uses (see ui-scroll-area). */
-    .content {
+    .viewport {
       flex: 1;
       min-block-size: 0;
+      overflow: clip;
+    }
+    .content {
+      block-size: 100%;
+      inline-size: calc(var(--_ui-sidebar-expanded-width) - var(--ui-border-width));
+      min-block-size: 0;
       overflow: auto;
+      transition: transform var(--ui-motion-layout) var(--ui-motion-layout-ease);
       --_ui-scroll-fade-direction: to bottom;
       --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
       mask-image: linear-gradient(
@@ -103,7 +117,17 @@
 
     /* Collapsed while docked. */
     :host-state([internalCollapsed]):not([popover]) {
-      display: none;
+      inline-size: var(--ui-sidebar-collapsed-width, 0px);
+      visibility: hidden;
+    }
+    :host-state([resizing]) {
+      transition: none;
+    }
+    :host-state([internalCollapsed]):not([popover]) .content {
+      transform: translateX(-100%);
+    }
+    :host-state([side="end"][internalCollapsed]):not([popover]) .content {
+      transform: translateX(100%);
     }
 
     .resizer {
@@ -182,9 +206,9 @@
       box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
       transform: translateX(0);
       transition:
-        transform var(--ui-motion-base) var(--ui-motion-ease-out),
-        display var(--ui-motion-base) allow-discrete,
-        overlay var(--ui-motion-base) allow-discrete;
+        transform var(--ui-motion-reveal) var(--ui-motion-reveal-ease),
+        display var(--ui-motion-reveal) allow-discrete,
+        overlay var(--ui-motion-reveal) allow-discrete;
     }
 
     /* The author display above would otherwise override the UA rule that hides a closed popover. */
@@ -214,9 +238,14 @@
     :host[popover]::backdrop {
       background: var(--_ui-sidebar-backdrop, rgb(0 0 0 / 0.32));
     }
+    :host[popover] .content {
+      inline-size: 100%;
+    }
 
     @media (prefers-reduced-motion: reduce) {
-      :host[popover] {
+      :host,
+      :host[popover],
+      .content {
         transition: none;
       }
     }

package/components/ui-sidebar/ui-sidebar.js

@@ -58,11 +58,13 @@ export default function controller(host) {
     const startX = event.clientX;
     const startWidth = currentWidth();
     const multiplier = host.props.side.value === "end" ? -1 : 1;
+    host.state.resizing = true;
     pointerAbort = new AbortController();
     const signal = pointerAbort.signal;
     const finish = () => {
       pointerAbort?.abort();
       pointerAbort = undefined;
+      host.state.resizing = false;
     };
     view.addEventListener("pointermove", (move) => {
       setWidth(startWidth + ((move.clientX - startX) * multiplier), "pointer");
@@ -75,8 +77,12 @@ export default function controller(host) {
   const endPointer = () => {
     pointerAbort?.abort();
     pointerAbort = undefined;
+    host.state.resizing = false;
   };
   const syncHandle = () => {
+    element.toggleAttribute("inert", host.state.internalCollapsed && !host.state.drawer);
+    if (host.state.internalCollapsed && !host.state.drawer) element.setAttribute("aria-hidden", "true");
+    else element.removeAttribute("aria-hidden");
     if (!host.props.resizable.value || host.state.drawer || host.state.internalCollapsed) { endPointer(); return; }
     const { min, max } = bounds();
     handle.setAttribute("aria-valuemin", String(min));