@threadlabs/looma 0.2.19 → 0.3.0

package/layout/index.js

@@ -7,7 +7,7 @@ var __export = (target, all) => {
 // src/declarative-index.ts
 import { registerLoomaPackage } from "@threadlabs/looma/core/declarative";
 
-// ../../tools/migrate-html-next/generated/layout/components/controllers/ui-reel.js
+// src/declarative/components/controllers/ui-reel.js
 var ui_reel_exports = {};
 __export(ui_reel_exports, {
   default: () => controller
@@ -18,7 +18,7 @@ function controller(host) {
   if (!element.hasAttribute("tabindex")) element.setAttribute("tabindex", "0");
 }
 
-// ../../tools/migrate-html-next/generated/layout/components/controllers/ui-separator.js
+// src/declarative/components/controllers/ui-separator.js
 var ui_separator_exports = {};
 __export(ui_separator_exports, {
   default: () => controller2
@@ -43,63 +43,41 @@ function controller2(host) {
   };
 }
 
-// ../../tools/migrate-html-next/generated/layout/components/controllers/ui-sidebar.js
+// src/declarative/components/controllers/ui-sidebar.js
 var ui_sidebar_exports = {};
 __export(ui_sidebar_exports, {
   default: () => controller3
 });
+var BREAKPOINTS = { sm: "40rem", md: "48rem", lg: "64rem" };
 function positive(value, fallback) {
   const number = Number(value);
   return Number.isFinite(number) && number > 0 ? number : fallback;
 }
 function controller3(host) {
   const element = host.element;
+  const document = element.ownerDocument;
+  const view = document.defaultView;
   let resizeHandle;
   let pointerAbort;
+  let media;
+  let lastCollapsed = Boolean(host.state.collapsed);
+  let lastWidth = Number(host.state.width) || 0;
+  host.state.internalCollapsed = lastCollapsed;
+  host.state.drawer = false;
   const bounds = () => {
-    const min = positive(host.state.minWidth, 176);
+    const min = positive(host.state.minWidth, 200);
     return { min, max: Math.max(min, positive(host.state.maxWidth, 480)), step: positive(host.state.resizeStep, 16) };
   };
-  const defaultWidth = () => host.state.width === "narrow" ? 224 : host.state.width === "wide" ? 384 : 288;
-  const storageId = () => {
-    const key = String(host.state.storageKey ?? "").trim();
-    return key ? `looma:sidebar-width:${key}` : null;
-  };
-  const readStoredWidth = () => {
-    const key = storageId();
-    if (!key || typeof localStorage === "undefined") return null;
-    try {
-      const value = Number(localStorage.getItem(key));
-      return Number.isFinite(value) && value > 0 ? value : null;
-    } catch {
-      return null;
-    }
-  };
-  const persistWidth = (width) => {
-    const key = storageId();
-    if (!key || typeof localStorage === "undefined") return;
-    try {
-      localStorage.setItem(key, String(width));
-    } catch {
-    }
-  };
-  const currentWidth = () => {
-    const inline = Number.parseFloat(element.style.getPropertyValue("--ui-sidebar-width"));
-    if (Number.isFinite(inline)) return inline;
-    const children = [...element.children].filter((child) => !child.hasAttribute("data-ui-sidebar-resizer"));
-    const region = host.state.side === "end" ? children.at(-1) : children[0];
-    return region?.getBoundingClientRect().width || defaultWidth();
-  };
-  const setWidth = (value, persist = false, trigger = "programmatic") => {
+  const currentWidth = () => element.getBoundingClientRect().width || 280;
+  const setWidth = (value, trigger = "programmatic") => {
     const { min, max } = bounds();
     const width = Math.round(Math.max(min, Math.min(max, value)));
-    const previous = Number.parseFloat(element.style.getPropertyValue("--ui-sidebar-width"));
-    element.style.setProperty("--ui-sidebar-width", `${width}px`);
+    const previous = Number.parseFloat(element.style.getPropertyValue("--_sidebar-width"));
+    element.style.setProperty("--_sidebar-width", `${width}px`);
     resizeHandle?.setAttribute("aria-valuemin", String(min));
     resizeHandle?.setAttribute("aria-valuemax", String(max));
     resizeHandle?.setAttribute("aria-valuenow", String(width));
-    if (persist && previous !== width) persistWidth(width);
-    if (!Number.isFinite(previous) || previous !== width) host.dispatch("resize", { width, trigger });
+    if (previous !== width) host.dispatch("resize", { width, trigger });
   };
   const onKeydown = (event) => {
     const { min, max, step } = bounds();
@@ -112,7 +90,7 @@ function controller3(host) {
     }
     if (next === null) return;
     event.preventDefault();
-    setWidth(next, true, "keyboard");
+    setWidth(next, "keyboard");
   };
   const onPointerdown = (event) => {
     if (event.button !== 0 || pointerAbort) return;
@@ -123,15 +101,14 @@ function controller3(host) {
     pointerAbort = new AbortController();
     const signal = pointerAbort.signal;
     const finish = () => {
-      persistWidth(currentWidth());
       pointerAbort?.abort();
       pointerAbort = void 0;
     };
-    window.addEventListener("pointermove", (move) => {
-      setWidth(startWidth + (move.clientX - startX) * multiplier, false, "pointer");
+    view.addEventListener("pointermove", (move) => {
+      setWidth(startWidth + (move.clientX - startX) * multiplier, "pointer");
     }, { signal });
-    window.addEventListener("pointerup", finish, { once: true, signal });
-    window.addEventListener("pointercancel", finish, { once: true, signal });
+    view.addEventListener("pointerup", finish, { once: true, signal });
+    view.addEventListener("pointercancel", finish, { once: true, signal });
   };
   const removeHandle = () => {
     pointerAbort?.abort();
@@ -139,8 +116,8 @@ function controller3(host) {
     resizeHandle?.remove();
     resizeHandle = void 0;
   };
-  const sync = () => {
-    if (!host.state.resizable) {
+  const syncHandle = () => {
+    if (!host.state.resizable || host.state.drawer || host.state.internalCollapsed) {
       removeHandle();
       return;
     }
@@ -157,328 +134,208 @@ function controller3(host) {
       resizeHandle.append(guide);
       resizeHandle.addEventListener("keydown", onKeydown);
       resizeHandle.addEventListener("pointerdown", onPointerdown);
-      resizeHandle.addEventListener("dblclick", () => setWidth(defaultWidth(), true, "pointer"));
+      resizeHandle.addEventListener("dblclick", () => {
+        element.style.removeProperty("--_sidebar-width");
+        setWidth(currentWidth(), "pointer");
+      });
       element.append(resizeHandle);
-      setWidth(readStoredWidth() ?? currentWidth());
     }
     resizeHandle.setAttribute("aria-label", String(host.state.resizeLabel || "Resize sidebar"));
-    setWidth(currentWidth());
+    const { min, max } = bounds();
+    resizeHandle.setAttribute("aria-valuemin", String(min));
+    resizeHandle.setAttribute("aria-valuemax", String(max));
+    resizeHandle.setAttribute("aria-valuenow", String(Math.round(currentWidth())));
   };
-  const stop = host.effect(sync);
-  sync();
+  const applyMode = () => {
+    const drawer = media?.matches ?? false;
+    if (drawer === host.state.drawer) return;
+    host.state.drawer = drawer;
+    if (drawer) {
+      element.setAttribute("popover", "auto");
+    } else {
+      if (element.matches(":popover-open")) element.hidePopover();
+      element.removeAttribute("popover");
+    }
+    syncHandle();
+  };
+  const watchBreakpoint = () => {
+    media?.removeEventListener("change", applyMode);
+    if (typeof view.matchMedia !== "function") return;
+    const width = BREAKPOINTS[host.state.breakpoint] ?? BREAKPOINTS.md;
+    media = view.matchMedia(`(width < ${width})`);
+    media.addEventListener("change", applyMode);
+    applyMode();
+  };
+  const toggle = (trigger) => {
+    if (host.state.drawer) {
+      element.togglePopover();
+      return;
+    }
+    host.state.internalCollapsed = !host.state.internalCollapsed;
+    syncHandle();
+    host.dispatch("toggle", { open: !host.state.internalCollapsed, mode: "docked", trigger });
+  };
+  const triggerOf = (source) => source?.matches?.(":focus-visible") ? "keyboard" : "pointer";
+  const onCommand = (event) => {
+    if (event.command !== "--toggle") return;
+    toggle(triggerOf(event.source));
+  };
+  const invokerCommands = typeof view.HTMLButtonElement?.prototype === "object" && "commandForElement" in view.HTMLButtonElement.prototype;
+  const onDocumentClick = (event) => {
+    const invoker = event.target.closest?.("[commandfor][command='--toggle']");
+    if (!invoker || !element.id || invoker.getAttribute("commandfor") !== element.id) return;
+    toggle(triggerOf(invoker));
+  };
+  const onPopoverToggle = (event) => {
+    if (!host.state.drawer) return;
+    host.dispatch("toggle", { open: event.newState === "open", mode: "drawer", trigger: "programmatic" });
+  };
+  const apply = () => {
+    const collapsed = Boolean(host.state.collapsed);
+    if (collapsed !== lastCollapsed) {
+      lastCollapsed = collapsed;
+      host.state.internalCollapsed = collapsed;
+    }
+    const width = Number(host.state.width) || 0;
+    if (width !== lastWidth) {
+      lastWidth = width;
+      if (width > 0) setWidth(width);
+      else element.style.removeProperty("--_sidebar-width");
+    }
+    syncHandle();
+  };
+  element.addEventListener("command", onCommand);
+  element.addEventListener("toggle", onPopoverToggle);
+  if (!invokerCommands) document.addEventListener("click", onDocumentClick);
+  if (lastWidth > 0) setWidth(lastWidth);
+  watchBreakpoint();
+  let lastBreakpoint = host.state.breakpoint;
+  const stop = host.effect(() => {
+    if (host.state.breakpoint !== lastBreakpoint) {
+      lastBreakpoint = host.state.breakpoint;
+      watchBreakpoint();
+    }
+    apply();
+  });
+  apply();
   return () => {
     stop();
     removeHandle();
+    media?.removeEventListener("change", applyMode);
+    element.removeEventListener("command", onCommand);
+    element.removeEventListener("toggle", onPopoverToggle);
+    document.removeEventListener("click", onDocumentClick);
   };
 }
 
-// ../../tools/migrate-html-next/generated/adoption/layout/registry.js
+// src/declarative/registry.js
 var records = [
-  { tag: "ui-center", source: '<template component="ui-center" status="early" summary="Looma ui-center layout primitive.">\n  <defs>\n    <prop name="measure" type="narrow | wide">measure token.</prop>\n    <prop name="gutters" type="s | m | l">gutters token.</prop>\n  </defs>\n  <div><slot></slot></div>\n</template>\n', controller: void 0 },
-  { tag: "ui-cluster", source: '<template component="ui-cluster" status="early" summary="Looma ui-cluster layout primitive.">\n  <defs>\n    <prop name="gap" type="xs | s | m | l | xl">gap token.</prop>\n    <prop name="align" type="start | center | end | stretch">align token.</prop>\n    <prop name="justify" type="start | center | end | between">justify token.</prop>\n  </defs>\n  <div><slot></slot></div>\n</template>\n', controller: void 0 },
+  { tag: "ui-cluster", source: '<template component="ui-cluster" status="early" summary="Wrapping row of items with consistent gaps, for tags, buttons, and other content that flows onto new lines.">\n  <defs>\n    <prop name="gap" type="xs | s | m | l | xl">gap token.</prop>\n    <prop name="align" type="start | center | end | stretch">align token.</prop>\n  </defs>\n  <div><slot></slot></div>\n</template>\n', controller: void 0 },
+  { tag: "ui-container", source: '<template component="ui-container" status="early" summary="Looma ui-container layout primitive.">\n  <defs>\n    <prop name="measure" type="narrow | wide">measure token.</prop>\n    <prop name="gutters" type="s | m | l">gutters token.</prop>\n  </defs>\n  <div><slot></slot></div>\n</template>\n', controller: void 0 },
   { tag: "ui-grid", source: '<template component="ui-grid" status="early" summary="Looma ui-grid layout primitive.">\n  <defs>\n    <prop name="gap" type="xs | s | m | l | xl">gap token.</prop>\n    <prop name="min" type="sm | md | lg">min token.</prop>\n  </defs>\n  <div><slot></slot></div>\n</template>\n', controller: void 0 },
-  { tag: "ui-inline", source: '<template component="ui-inline" status="early" summary="Looma ui-inline layout primitive.">\n  <defs>\n    <prop name="gap" type="xs | s | m | l | xl">gap token.</prop>\n    <prop name="align" type="start | center | end | stretch">align token.</prop>\n    <prop name="justify" type="start | center | end | between">justify token.</prop>\n    <prop name="wrap" type="wrap | nowrap">wrap token.</prop>\n  </defs>\n  <div><slot></slot></div>\n</template>\n', controller: void 0 },
   { tag: "ui-reel", source: '<template component="ui-reel" status="early" summary="Looma ui-reel layout primitive." controller="./controllers/ui-reel.js">\n  <defs>\n    <prop name="gap" type="xs | s | m | l | xl">gap token.</prop>\n    <prop name="itemWidth" type="sm | md | lg">itemWidth token.</prop>\n    <prop name="snap" type="start | center">snap token.</prop>\n  </defs>\n  <div><slot></slot></div>\n</template>\n', controller: ui_reel_exports },
   { tag: "ui-separator", source: '<template component="ui-separator" status="early" summary="Looma ui-separator layout primitive." controller="./controllers/ui-separator.js">\n  <defs>\n    <prop name="orientation" type="horizontal | vertical" default="horizontal">orientation token.</prop>\n  </defs>\n  <div><slot></slot></div>\n</template>\n', controller: ui_separator_exports },
-  { tag: "ui-sidebar", source: '<template component="ui-sidebar" status="early" summary="Looma ui-sidebar layout primitive." controller="./controllers/ui-sidebar.js">\n  <defs>\n    <prop name="gap" type="xs | s | m | l | xl">gap token.</prop>\n    <prop name="side" type="start | end" default="start">side token.</prop>\n    <prop name="width" type="narrow | default | wide" default="default">width token.</prop>\n    <prop name="align" type="start | center | end | stretch">align token.</prop>\n    <prop name="resizable" type="boolean" default="false">resizable token.</prop>\n    <prop name="storageKey" type="string">storageKey token.</prop>\n    <prop name="minWidth" type="number" default="176">minWidth token.</prop>\n    <prop name="maxWidth" type="number" default="480">maxWidth token.</prop>\n    <prop name="resizeStep" type="number" default="16">resizeStep token.</prop>\n    <prop name="resizeLabel" type="string" default="Resize sidebar">resizeLabel token.</prop>\n    <event name="resize" type="object({ width: number, trigger: keyboard | pointer | programmatic })"></event>\n  </defs>\n  <div><slot></slot></div>\n</template>\n', controller: ui_sidebar_exports },
-  { tag: "ui-stack", source: '<template component="ui-stack" status="early" summary="Looma ui-stack layout primitive.">\n  <defs>\n    <prop name="gap" type="xs | s | m | l | xl">gap token.</prop>\n    <prop name="align" type="start | center | end | stretch">align token.</prop>\n    <prop name="justify" type="start | center | end | between">justify token.</prop>\n  </defs>\n  <div><slot></slot></div>\n</template>\n', controller: void 0 },
-  { tag: "ui-switcher", source: '<template component="ui-switcher" status="early" summary="Looma ui-switcher layout primitive.">\n  <defs>\n    <prop name="gap" type="xs | s | m | l | xl">gap token.</prop>\n    <prop name="threshold" type="xs | sm | md | lg">threshold token.</prop>\n    <prop name="align" type="start | center | end | stretch">align token.</prop>\n  </defs>\n  <div><slot></slot></div>\n</template>\n', controller: void 0 }
-];
-var styles = `/* Unlayered: box-model guarantees that remain safe for host composition. */
-:where([data-component-root~="ui-stack"], [data-component-root~="ui-inline"], [data-component-root~="ui-cluster"], [data-component-root~="ui-grid"], [data-component-root~="ui-center"], [data-component-root~="ui-switcher"], [data-component-root~="ui-sidebar"], [data-component-root~="ui-reel"], [data-component-root~="ui-separator"]),
-:where([data-component-root~="ui-stack"], [data-component-root~="ui-inline"], [data-component-root~="ui-cluster"], [data-component-root~="ui-grid"], [data-component-root~="ui-center"], [data-component-root~="ui-switcher"], [data-component-root~="ui-sidebar"], [data-component-root~="ui-reel"], [data-component-root~="ui-separator"]) *,
-:where([data-component-root~="ui-stack"], [data-component-root~="ui-inline"], [data-component-root~="ui-cluster"], [data-component-root~="ui-grid"], [data-component-root~="ui-center"], [data-component-root~="ui-switcher"], [data-component-root~="ui-sidebar"], [data-component-root~="ui-reel"], [data-component-root~="ui-separator"]) *::before,
-:where([data-component-root~="ui-stack"], [data-component-root~="ui-inline"], [data-component-root~="ui-cluster"], [data-component-root~="ui-grid"], [data-component-root~="ui-center"], [data-component-root~="ui-switcher"], [data-component-root~="ui-sidebar"], [data-component-root~="ui-reel"], [data-component-root~="ui-separator"]) *::after {
+  { tag: "ui-sidebar", source: `<template component="ui-sidebar" status="early" summary="An application sidebar panel: resizable and collapsible when docked, an off-canvas drawer on narrow screens." controller="./controllers/ui-sidebar.js">
+  <defs>
+    <prop name="side" type="start | end" default="start">The edge the sidebar sits on. The page places it beside its main content.</prop>
+    <prop name="width" type="number" default="0">Docked width in pixels. 0 uses --ui-sidebar-width (280px by default); dragging the handle updates it.</prop>
+    <prop name="minWidth" type="number" default="200">The narrowest width the resize handle allows, in pixels.</prop>
+    <prop name="maxWidth" type="number" default="480">The widest width the resize handle allows, in pixels.</prop>
+    <prop name="resizable" type="boolean" default="false">Adds a resize handle on the inner edge (drag, or arrow keys, Home, and End).</prop>
+    <prop name="resizeStep" type="number" default="16">Arrow-key resize step in pixels.</prop>
+    <prop name="resizeLabel" type="string" default="Resize sidebar">Accessible name of the resize handle.</prop>
+    <prop name="collapsed" type="boolean" default="false">Whether the docked sidebar is collapsed.</prop>
+    <prop name="breakpoint" type="sm | md | lg" default="md">Below this viewport width (40rem, 48rem, 64rem) the sidebar becomes an off-canvas drawer, closed until toggled.</prop>
+    <state name="internalCollapsed" :value="false"></state>
+    <state name="drawer" :value="false"></state>
+    <event name="resize" type="object({ width: number, trigger: keyboard | pointer | programmatic })"></event>
+    <event name="toggle" type="object({ open: boolean, mode: docked | drawer, trigger: keyboard | pointer | programmatic })"></event>
+  </defs>
+  <aside :data-state-collapsed="internalCollapsed" :data-state-drawer="drawer"><div class="sidebar__content"><slot></slot></div></aside>
+  <style>:scope {
+  --_sidebar-default-width: 280px;
+  position: relative;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  flex: none;
+  inline-size: var(--_sidebar-width, var(--ui-sidebar-width, var(--_sidebar-default-width)));
+  max-inline-size: 100%;
+  min-block-size: 0;
+  background: var(--ui-sidebar-surface, var(--ui-surface-default));
+  border-inline-end: 1px solid var(--ui-sidebar-border, var(--ui-border-default));
 }
 
-:where([data-component-root~="ui-stack"], [data-component-root~="ui-inline"], [data-component-root~="ui-cluster"], [data-component-root~="ui-grid"], [data-component-root~="ui-center"], [data-component-root~="ui-switcher"], [data-component-root~="ui-sidebar"], [data-component-root~="ui-reel"], [data-component-root~="ui-separator"]) {
-  /* Reveal Looma's component layer instead of reverting past it. */
-  all: revert-layer;
-  box-sizing: border-box;
-  font-family: var(--ui-font-family-sans);
-  font-size: var(--ui-font-size-md);
-  line-height: var(--ui-line-height-md);
-  color: var(--ui-text-primary);
+:scope[data-side='end'] {
+  border-inline-end: 0;
+  border-inline-start: 1px solid var(--ui-sidebar-border, var(--ui-border-default));
 }
 
-:where([data-component-root~="ui-stack"], [data-component-root~="ui-inline"], [data-component-root~="ui-cluster"], [data-component-root~="ui-grid"], [data-component-root~="ui-center"], [data-component-root~="ui-switcher"], [data-component-root~="ui-sidebar"], [data-component-root~="ui-reel"], [data-component-root~="ui-separator"])[data-ui-inherit-typography] {
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  font-weight: inherit;
-  color: inherit;
-  direction: inherit;
-  writing-mode: inherit;
-  text-orientation: inherit;
-  text-rendering: inherit;
-  font-feature-settings: inherit;
-  font-variation-settings: inherit;
+.sidebar__content {
+  flex: 1;
+  min-block-size: 0;
+  overflow: auto;
 }
 
-@layer components {
-  :where([data-component-root~="ui-stack"], [data-component-root~="ui-inline"], [data-component-root~="ui-cluster"], [data-component-root~="ui-grid"], [data-component-root~="ui-center"], [data-component-root~="ui-switcher"], [data-component-root~="ui-sidebar"], [data-component-root~="ui-reel"], [data-component-root~="ui-separator"]) {
-    min-inline-size: 0;
-    max-inline-size: 100%;
-    margin: 0;
-  }
-
-  [data-component-root~="ui-stack"] {
-    --ui-layout-gap: var(--ui-space-4, 1rem);
-    --ui-layout-align: stretch;
-    --ui-layout-justify: flex-start;
-    display: flex;
-    flex-direction: column;
-    gap: var(--ui-layout-gap);
-    align-items: var(--ui-layout-align);
-    justify-content: var(--ui-layout-justify);
-  }
-
-  [data-component-root~="ui-stack"][data-gap="xs"] { --ui-layout-gap: var(--ui-space-2, 0.5rem); }
-  [data-component-root~="ui-stack"][data-gap="s"] { --ui-layout-gap: var(--ui-space-3, 0.75rem); }
-  [data-component-root~="ui-stack"][data-gap="m"] { --ui-layout-gap: var(--ui-space-4, 1rem); }
-  [data-component-root~="ui-stack"][data-gap="l"] { --ui-layout-gap: var(--ui-space-5, 1.5rem); }
-  [data-component-root~="ui-stack"][data-gap="xl"] { --ui-layout-gap: var(--ui-space-6, 2rem); }
-  [data-component-root~="ui-stack"][data-align="start"] { --ui-layout-align: flex-start; }
-  [data-component-root~="ui-stack"][data-align="center"] { --ui-layout-align: center; }
-  [data-component-root~="ui-stack"][data-align="end"] { --ui-layout-align: flex-end; }
-  [data-component-root~="ui-stack"][data-justify="center"] { --ui-layout-justify: center; }
-  [data-component-root~="ui-stack"][data-justify="end"] { --ui-layout-justify: flex-end; }
-  [data-component-root~="ui-stack"][data-justify="between"] { --ui-layout-justify: space-between; }
-
-  [data-component-root~="ui-inline"],
-  [data-component-root~="ui-cluster"] {
-    --ui-layout-gap: var(--ui-space-3, 0.75rem);
-    --ui-layout-align: center;
-    --ui-layout-justify: flex-start;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: var(--ui-layout-align);
-    justify-content: var(--ui-layout-justify);
-    gap: var(--ui-layout-gap);
-  }
-
-  [data-component-root~="ui-inline"][data-wrap="nowrap"] { flex-wrap: nowrap; }
-  [data-component-root~="ui-inline"][data-gap="xs"],
-  [data-component-root~="ui-cluster"][data-gap="xs"] { --ui-layout-gap: var(--ui-space-2, 0.5rem); }
-  [data-component-root~="ui-inline"][data-gap="s"],
-  [data-component-root~="ui-cluster"][data-gap="s"] { --ui-layout-gap: var(--ui-space-3, 0.75rem); }
-  [data-component-root~="ui-inline"][data-gap="m"],
-  [data-component-root~="ui-cluster"][data-gap="m"] { --ui-layout-gap: var(--ui-space-4, 1rem); }
-
-  [data-component-root~="ui-grid"] {
-    --ui-grid-gap: var(--ui-space-4, 1rem);
-    --ui-grid-min: 16rem;
-    display: grid;
-    gap: var(--ui-grid-gap);
-    grid-template-columns: repeat(auto-fit, minmax(min(var(--ui-grid-min), 100%), 1fr));
-  }
-
-  [data-component-root~="ui-grid"][data-gap="xs"] { --ui-grid-gap: var(--ui-space-2, 0.5rem); }
-  [data-component-root~="ui-grid"][data-gap="s"] { --ui-grid-gap: var(--ui-space-3, 0.75rem); }
-  [data-component-root~="ui-grid"][data-gap="m"] { --ui-grid-gap: var(--ui-space-4, 1rem); }
-  [data-component-root~="ui-grid"][data-gap="l"] { --ui-grid-gap: var(--ui-space-5, 1.5rem); }
-  [data-component-root~="ui-grid"][data-min="sm"] { --ui-grid-min: 12rem; }
-  [data-component-root~="ui-grid"][data-min="md"] { --ui-grid-min: 16rem; }
-  [data-component-root~="ui-grid"][data-min="lg"] { --ui-grid-min: 20rem; }
-
-  [data-component-root~="ui-center"] {
-    --ui-center-measure: 65ch;
-    --ui-center-gutters: var(--ui-space-4, 1rem);
-    display: block;
-    inline-size: 100%;
-    max-inline-size: var(--ui-center-measure);
-    margin-inline: auto;
-    padding-inline: var(--ui-center-gutters);
-  }
-
-  [data-component-root~="ui-center"][data-measure="narrow"] { --ui-center-measure: 45ch; }
-  [data-component-root~="ui-center"][data-measure="wide"] { --ui-center-measure: 80ch; }
-  [data-component-root~="ui-center"][data-gutters="s"] { --ui-center-gutters: var(--ui-space-3, 0.75rem); }
-  [data-component-root~="ui-center"][data-gutters="m"] { --ui-center-gutters: var(--ui-space-4, 1rem); }
-  [data-component-root~="ui-center"][data-gutters="l"] { --ui-center-gutters: var(--ui-space-5, 1.5rem); }
-
-  [data-component-root~="ui-switcher"] {
-    --ui-switcher-gap: var(--ui-space-4, 1rem);
-    --ui-switcher-threshold: 30rem;
-    --ui-switcher-align: stretch;
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--ui-switcher-gap);
-    align-items: var(--ui-switcher-align);
-  }
-
-  [data-component-root~="ui-switcher"] > * {
-    min-inline-size: 0;
-    flex-grow: 1;
-    flex-basis: calc((var(--ui-switcher-threshold) - 100%) * 999);
-  }
+/* Collapsed while docked. */
+:scope:is([data-state-collapsed=''], [data-state-collapsed='true']):not([popover]) {
+  display: none;
+}
 
-  [data-component-root~="ui-switcher"][data-gap="xs"] { --ui-switcher-gap: var(--ui-space-2, 0.5rem); }
-  [data-component-root~="ui-switcher"][data-gap="s"] { --ui-switcher-gap: var(--ui-space-3, 0.75rem); }
-  [data-component-root~="ui-switcher"][data-gap="m"] { --ui-switcher-gap: var(--ui-space-4, 1rem); }
-  [data-component-root~="ui-switcher"][data-gap="l"] { --ui-switcher-gap: var(--ui-space-5, 1.5rem); }
-  [data-component-root~="ui-switcher"][data-threshold="xs"] { --ui-switcher-threshold: 20rem; }
-  [data-component-root~="ui-switcher"][data-threshold="sm"] { --ui-switcher-threshold: 30rem; }
-  [data-component-root~="ui-switcher"][data-threshold="md"] { --ui-switcher-threshold: 45rem; }
-  [data-component-root~="ui-switcher"][data-threshold="lg"] { --ui-switcher-threshold: 60rem; }
-  [data-component-root~="ui-switcher"][data-align="start"] { --ui-switcher-align: flex-start; }
-  [data-component-root~="ui-switcher"][data-align="center"] { --ui-switcher-align: center; }
-  [data-component-root~="ui-switcher"][data-align="end"] { --ui-switcher-align: flex-end; }
+/* Drawer: a popover in the top layer, sliding in from its edge. Closed popovers are hidden by the UA. */
+:scope[popover] {
+  position: fixed;
+  inset-block: 0;
+  inset-inline-start: 0;
+  inset-inline-end: auto;
+  margin: 0;
+  padding: 0;
+  inline-size: min(var(--_sidebar-width, var(--ui-sidebar-width, var(--_sidebar-default-width))), 85vw);
+  max-block-size: none;
+  block-size: 100dvh;
+  border-block: 0;
+  box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
+  transform: translateX(0);
+  transition:
+    transform var(--ui-motion-base, 0.2s) var(--ui-motion-ease-out, ease-out),
+    display var(--ui-motion-base, 0.2s) allow-discrete,
+    overlay var(--ui-motion-base, 0.2s) allow-discrete;
+}
 
-  [data-component-root~="ui-sidebar"] {
-    --ui-sidebar-gap: var(--ui-space-4, 1rem);
-    --ui-sidebar-width: 18rem;
-    --ui-sidebar-content-min: 50%;
-    --ui-sidebar-align: stretch;
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--ui-sidebar-gap);
-    align-items: var(--ui-sidebar-align);
-  }
+/* The author display above would otherwise override the UA rule that hides a closed popover. */
+:scope[popover]:not(:popover-open) {
+  display: none;
+  transform: translateX(-100%);
+}
 
-  [data-component-root~="ui-sidebar"] > :not([data-ui-sidebar-resizer]) { min-inline-size: 0; }
-  [data-component-root~="ui-sidebar"] > :first-child {
-    flex-basis: var(--ui-sidebar-width);
-    flex-grow: 1;
-  }
-  [data-component-root~="ui-sidebar"] > :last-child:not([data-ui-sidebar-resizer]),
-  [data-component-root~="ui-sidebar"][data-resizable='true'] > :nth-last-child(2):not([data-ui-sidebar-resizer]) {
-    flex-basis: 0;
-    flex-grow: 999;
-    min-inline-size: min(var(--ui-sidebar-content-min), 100%);
-  }
-  [data-component-root~="ui-sidebar"][data-side="end"] > :first-child {
-    flex-basis: 0;
-    flex-grow: 999;
-    min-inline-size: min(var(--ui-sidebar-content-min), 100%);
-  }
-  [data-component-root~="ui-sidebar"][data-side="end"] > :last-child:not([data-ui-sidebar-resizer]),
-  [data-component-root~="ui-sidebar"][data-side="end"][data-resizable='true'] > :nth-last-child(2):not([data-ui-sidebar-resizer]) {
-    flex-basis: var(--ui-sidebar-width);
-    flex-grow: 1;
-    min-inline-size: 0;
-  }
-  [data-component-root~="ui-sidebar"][data-gap="xs"] { --ui-sidebar-gap: var(--ui-space-2, 0.5rem); }
-  [data-component-root~="ui-sidebar"][data-gap="s"] { --ui-sidebar-gap: var(--ui-space-3, 0.75rem); }
-  [data-component-root~="ui-sidebar"][data-gap="m"] { --ui-sidebar-gap: var(--ui-space-4, 1rem); }
-  [data-component-root~="ui-sidebar"][data-gap="l"] { --ui-sidebar-gap: var(--ui-space-5, 1.5rem); }
-  [data-component-root~="ui-sidebar"][data-width="narrow"] { --ui-sidebar-width: 14rem; }
-  [data-component-root~="ui-sidebar"][data-width="wide"] { --ui-sidebar-width: 24rem; }
-  [data-component-root~="ui-sidebar"][data-align="start"] { --ui-sidebar-align: flex-start; }
-  [data-component-root~="ui-sidebar"][data-align="center"] { --ui-sidebar-align: center; }
-  [data-component-root~="ui-sidebar"][data-align="end"] { --ui-sidebar-align: flex-end; }
-  [data-component-root~="ui-sidebar"][data-resizable='true'] {
-    position: relative;
-    flex-wrap: nowrap;
-  }
-  [data-component-root~="ui-sidebar"][data-resizable='true'] > :first-child:not([data-ui-sidebar-resizer]) {
-    flex: 0 0 var(--ui-sidebar-width);
-  }
-  [data-component-root~="ui-sidebar"][data-side="end"][data-resizable='true'] > :first-child:not([data-ui-sidebar-resizer]) {
-    flex: 1 1 0;
-  }
-  [data-component-root~="ui-sidebar"][data-side="end"][data-resizable='true'] > :nth-last-child(2):not([data-ui-sidebar-resizer]) {
-    flex: 0 0 var(--ui-sidebar-width);
-  }
-  [data-component-root~="ui-sidebar"] > [data-ui-sidebar-resizer] {
-    position: absolute;
-    z-index: 1;
-    inset-block: 0;
-    inset-inline-start: var(--ui-sidebar-width);
-    inline-size: 8px;
-    min-inline-size: 8px;
-    transform: translateX(-50%);
-    cursor: col-resize;
-    touch-action: none;
-    outline: none;
-  }
-  [data-component-root~="ui-sidebar"][data-side="end"] > [data-ui-sidebar-resizer] {
-    inset-inline-start: auto;
-    inset-inline-end: var(--ui-sidebar-width);
-    transform: translateX(50%);
-  }
-  [data-component-root~="ui-sidebar"] > [data-ui-sidebar-resizer]::after {
-    content: "";
-    position: absolute;
-    inset-block: 0;
-    inset-inline-start: 3px;
-    inline-size: 2px;
-    background: color-mix(in srgb, var(--ui-affordance-guide-color, var(--ui-border-strong)) 45%, transparent);
-    opacity: var(--ui-affordance-guide-opacity, 0.42);
-    transition:
-      background-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
-      opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
-  }
-  [data-component-root~="ui-sidebar"] > [data-ui-sidebar-resizer] > [data-ui-guide] {
-    position: absolute;
-    inset-block-start: 50%;
-    inset-inline-start: 50%;
-    inline-size: 6px;
-    block-size: 22px;
-    border: 1px solid var(--ui-border-strong, #c8c8c4);
-    border-radius: var(--ui-radius-round, 999px);
-    background: var(--ui-surface-elevated, #fff);
-    opacity: 0;
-    transform: translate(-50%, -50%);
-    transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
-    pointer-events: none;
-  }
-  [data-component-root~="ui-sidebar"] > [data-ui-sidebar-resizer]:hover::after,
-  [data-component-root~="ui-sidebar"] > [data-ui-sidebar-resizer]:focus-visible::after {
-    background: var(--ui-affordance-direct-color, var(--ui-accent-solid, var(--ui-color-focus, Highlight)));
-    opacity: 1;
-  }
-  [data-component-root~="ui-sidebar"] > [data-ui-sidebar-resizer]:is(:hover, :focus-visible) > [data-ui-guide] {
-    opacity: 1;
-  }
+:scope[popover][data-side='end'] {
+  inset-inline-start: auto;
+  inset-inline-end: 0;
+}
 
-  [data-component-root~="ui-reel"] {
-    --ui-reel-gap: var(--ui-space-4, 1rem);
-    --ui-reel-item-width: auto;
-    display: flex;
-    inline-size: 100%;
-    gap: var(--ui-reel-gap);
-    overflow-x: auto;
-    overflow-y: hidden;
-    overscroll-behavior-inline: contain;
-    -webkit-overflow-scrolling: touch;
-  }
+:scope[popover][data-side='end']:not(:popover-open) {
+  transform: translateX(100%);
+}
 
-  [data-component-root~="ui-reel"] > * {
-    min-inline-size: 0;
-    flex: 0 0 var(--ui-reel-item-width);
-  }
-  [data-component-root~="ui-reel"][data-gap="xs"] { --ui-reel-gap: var(--ui-space-2, 0.5rem); }
-  [data-component-root~="ui-reel"][data-gap="s"] { --ui-reel-gap: var(--ui-space-3, 0.75rem); }
-  [data-component-root~="ui-reel"][data-gap="m"] { --ui-reel-gap: var(--ui-space-4, 1rem); }
-  [data-component-root~="ui-reel"][data-gap="l"] { --ui-reel-gap: var(--ui-space-5, 1.5rem); }
-  [data-component-root~="ui-reel"][data-item-width="sm"] { --ui-reel-item-width: 12rem; }
-  [data-component-root~="ui-reel"][data-item-width="md"] { --ui-reel-item-width: 16rem; }
-  [data-component-root~="ui-reel"][data-item-width="lg"] { --ui-reel-item-width: 20rem; }
-  [data-component-root~="ui-reel"][data-snap="start"],
-  [data-component-root~="ui-reel"][data-snap="center"] { scroll-snap-type: inline mandatory; }
-  [data-component-root~="ui-reel"][data-snap="start"] > * { scroll-snap-align: start; }
-  [data-component-root~="ui-reel"][data-snap="center"] > * { scroll-snap-align: center; }
+@starting-style {
+  :scope[popover]:popover-open { transform: translateX(-100%); }
+  :scope[popover][data-side='end']:popover-open { transform: translateX(100%); }
+}
 
-  [data-component-root~="ui-separator"] {
-    --ui-separator-color: var(--ui-border-default, #d0d5dd);
-    --ui-separator-space: var(--ui-space-4, 1rem);
-    display: block;
-    margin: 0;
-    border: 0;
-    border-block-start: 1px solid var(--ui-separator-color);
-    padding: 0;
-  }
+:scope[popover]::backdrop {
+  background: var(--ui-sidebar-backdrop, rgb(0 0 0 / 0.32));
+}
 
-  [data-component-root~="ui-separator"][data-orientation="vertical"] {
-    inline-size: 1px;
-    block-size: 100%;
-    border-block-start: 0;
-    border-inline-start: 1px solid var(--ui-separator-color);
-  }
+@media (prefers-reduced-motion: reduce) {
+  :scope[popover] { transition: none; }
 }
-`;
+</style>
+</template>
+`, controller: ui_sidebar_exports },
+  { tag: "ui-stack", source: '<template component="ui-stack" status="early" summary="Looma ui-stack layout primitive.">\n  <defs>\n    <prop name="gap" type="xs | s | m | l | xl">gap token.</prop>\n    <prop name="align" type="start | center | end | stretch">align token.</prop>\n    <prop name="justify" type="start | center | end | between">justify token.</prop>\n  </defs>\n  <div><slot></slot></div>\n</template>\n', controller: void 0 },
+  { tag: "ui-switcher", source: '<template component="ui-switcher" status="early" summary="Looma ui-switcher layout primitive.">\n  <defs>\n    <prop name="gap" type="xs | s | m | l | xl">gap token.</prop>\n    <prop name="threshold" type="xs | sm | md | lg">threshold token.</prop>\n    <prop name="align" type="start | center | end | stretch">align token.</prop>\n  </defs>\n  <div><slot></slot></div>\n</template>\n', controller: void 0 }
+];
+var styles = '/*\n * Keep the box model outside `@layer components`: these are composition\n * guarantees for authored light-DOM children, not themeable component styles.\n */\n:where([data-component-root~="ui-stack"], [data-component-root~="ui-cluster"], [data-component-root~="ui-grid"], [data-component-root~="ui-container"], [data-component-root~="ui-switcher"], [data-component-root~="ui-sidebar"], [data-component-root~="ui-reel"], [data-component-root~="ui-separator"]),\n:where([data-component-root~="ui-stack"], [data-component-root~="ui-cluster"], [data-component-root~="ui-grid"], [data-component-root~="ui-container"], [data-component-root~="ui-switcher"], [data-component-root~="ui-sidebar"], [data-component-root~="ui-reel"], [data-component-root~="ui-separator"]) *,\n:where([data-component-root~="ui-stack"], [data-component-root~="ui-cluster"], [data-component-root~="ui-grid"], [data-component-root~="ui-container"], [data-component-root~="ui-switcher"], [data-component-root~="ui-sidebar"], [data-component-root~="ui-reel"], [data-component-root~="ui-separator"]) *::before,\n:where([data-component-root~="ui-stack"], [data-component-root~="ui-cluster"], [data-component-root~="ui-grid"], [data-component-root~="ui-container"], [data-component-root~="ui-switcher"], [data-component-root~="ui-sidebar"], [data-component-root~="ui-reel"], [data-component-root~="ui-separator"]) *::after {\n  box-sizing: border-box;\n}\n\n:where([data-component-root~="ui-stack"], [data-component-root~="ui-cluster"], [data-component-root~="ui-grid"], [data-component-root~="ui-container"], [data-component-root~="ui-switcher"], [data-component-root~="ui-sidebar"], [data-component-root~="ui-reel"], [data-component-root~="ui-separator"]) {\n  /* `revert-layer` exposes `@layer components`; `revert` would skip the author layer entirely. */\n  all: revert-layer;\n  box-sizing: border-box;\n  font-family: var(--ui-font-family-sans);\n  font-size: var(--ui-font-size-md);\n  line-height: var(--ui-line-height-md);\n  color: var(--ui-text-primary);\n}\n\n:where([data-component-root~="ui-stack"], [data-component-root~="ui-cluster"], [data-component-root~="ui-grid"], [data-component-root~="ui-container"], [data-component-root~="ui-switcher"], [data-component-root~="ui-sidebar"], [data-component-root~="ui-reel"], [data-component-root~="ui-separator"])[data-ui-inherit-typography] {\n  /* Consumers opt into surrounding prose styles; isolated component defaults remain the safe default. */\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  font-weight: inherit;\n  color: inherit;\n  direction: inherit;\n  writing-mode: inherit;\n  text-orientation: inherit;\n  text-rendering: inherit;\n  font-feature-settings: inherit;\n  font-variation-settings: inherit;\n}\n\n@layer components {\n  :where([data-component-root~="ui-stack"], [data-component-root~="ui-cluster"], [data-component-root~="ui-grid"], [data-component-root~="ui-container"], [data-component-root~="ui-switcher"], [data-component-root~="ui-sidebar"], [data-component-root~="ui-reel"], [data-component-root~="ui-separator"]) {\n    min-inline-size: 0;\n    max-inline-size: 100%;\n    margin: 0;\n  }\n\n  [data-component-root~="ui-stack"] {\n    --ui-layout-gap: var(--ui-space-4, 1rem);\n    --ui-layout-align: stretch;\n    --ui-layout-justify: flex-start;\n    display: flex;\n    flex-direction: column;\n    gap: var(--ui-layout-gap);\n    align-items: var(--ui-layout-align);\n    justify-content: var(--ui-layout-justify);\n  }\n\n  [data-component-root~="ui-stack"][data-gap="xs"] { --ui-layout-gap: var(--ui-space-2, 0.5rem); }\n  [data-component-root~="ui-stack"][data-gap="s"] { --ui-layout-gap: var(--ui-space-3, 0.75rem); }\n  [data-component-root~="ui-stack"][data-gap="m"] { --ui-layout-gap: var(--ui-space-4, 1rem); }\n  [data-component-root~="ui-stack"][data-gap="l"] { --ui-layout-gap: var(--ui-space-5, 1.5rem); }\n  [data-component-root~="ui-stack"][data-gap="xl"] { --ui-layout-gap: var(--ui-space-6, 2rem); }\n  [data-component-root~="ui-stack"][data-align="start"] { --ui-layout-align: flex-start; }\n  [data-component-root~="ui-stack"][data-align="center"] { --ui-layout-align: center; }\n  [data-component-root~="ui-stack"][data-align="end"] { --ui-layout-align: flex-end; }\n  [data-component-root~="ui-stack"][data-justify="center"] { --ui-layout-justify: center; }\n  [data-component-root~="ui-stack"][data-justify="end"] { --ui-layout-justify: flex-end; }\n  [data-component-root~="ui-stack"][data-justify="between"] { --ui-layout-justify: space-between; }\n\n  [data-component-root~="ui-cluster"] {\n    --ui-layout-gap: var(--ui-space-3, 0.75rem);\n    --ui-layout-align: center;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: var(--ui-layout-align);\n    gap: var(--ui-layout-gap);\n  }\n\n  [data-component-root~="ui-cluster"][data-gap="xs"] { --ui-layout-gap: var(--ui-space-2, 0.5rem); }\n  [data-component-root~="ui-cluster"][data-gap="s"] { --ui-layout-gap: var(--ui-space-3, 0.75rem); }\n  [data-component-root~="ui-cluster"][data-gap="m"] { --ui-layout-gap: var(--ui-space-4, 1rem); }\n  [data-component-root~="ui-cluster"][data-gap="l"] { --ui-layout-gap: var(--ui-space-5, 1.5rem); }\n  [data-component-root~="ui-cluster"][data-gap="xl"] { --ui-layout-gap: var(--ui-space-6, 2rem); }\n  [data-component-root~="ui-cluster"][data-align="start"] { --ui-layout-align: flex-start; }\n  [data-component-root~="ui-cluster"][data-align="center"] { --ui-layout-align: center; }\n  [data-component-root~="ui-cluster"][data-align="end"] { --ui-layout-align: flex-end; }\n  [data-component-root~="ui-cluster"][data-align="stretch"] { --ui-layout-align: stretch; }\n\n  [data-component-root~="ui-grid"] {\n    --ui-grid-gap: var(--ui-space-4, 1rem);\n    --ui-grid-min: 12rem;\n    display: grid;\n    gap: var(--ui-grid-gap);\n    grid-template-columns: repeat(auto-fit, minmax(min(var(--ui-grid-min), 100%), 1fr));\n  }\n\n  [data-component-root~="ui-grid"][data-gap="xs"] { --ui-grid-gap: var(--ui-space-2, 0.5rem); }\n  [data-component-root~="ui-grid"][data-gap="s"] { --ui-grid-gap: var(--ui-space-3, 0.75rem); }\n  [data-component-root~="ui-grid"][data-gap="m"] { --ui-grid-gap: var(--ui-space-4, 1rem); }\n  [data-component-root~="ui-grid"][data-gap="l"] { --ui-grid-gap: var(--ui-space-5, 1.5rem); }\n  [data-component-root~="ui-grid"][data-min="sm"] { --ui-grid-min: 12rem; }\n  [data-component-root~="ui-grid"][data-min="md"] { --ui-grid-min: 16rem; }\n  [data-component-root~="ui-grid"][data-min="lg"] { --ui-grid-min: 20rem; }\n\n  [data-component-root~="ui-container"] {\n    --ui-container-measure: 65ch;\n    --ui-container-gutters: var(--ui-space-4, 1rem);\n    display: block;\n    inline-size: 100%;\n    max-inline-size: var(--ui-container-measure);\n    margin-inline: auto;\n    padding-inline: var(--ui-container-gutters);\n  }\n\n  [data-component-root~="ui-container"][data-measure="narrow"] { --ui-container-measure: 45ch; }\n  [data-component-root~="ui-container"][data-measure="wide"] { --ui-container-measure: 80ch; }\n  [data-component-root~="ui-container"][data-gutters="s"] { --ui-container-gutters: var(--ui-space-3, 0.75rem); }\n  [data-component-root~="ui-container"][data-gutters="m"] { --ui-container-gutters: var(--ui-space-4, 1rem); }\n  [data-component-root~="ui-container"][data-gutters="l"] { --ui-container-gutters: var(--ui-space-5, 1.5rem); }\n\n  [data-component-root~="ui-switcher"] {\n    --ui-switcher-gap: var(--ui-space-4, 1rem);\n    --ui-switcher-threshold: 30rem;\n    --ui-switcher-align: stretch;\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--ui-switcher-gap);\n    align-items: var(--ui-switcher-align);\n  }\n\n  [data-component-root~="ui-switcher"] > * {\n    min-inline-size: 0;\n    flex-grow: 1;\n    /* The large multiplier makes the basis flip as a group at the intrinsic threshold. */\n    flex-basis: calc((var(--ui-switcher-threshold) - 100%) * 999);\n  }\n\n  [data-component-root~="ui-switcher"][data-gap="xs"] { --ui-switcher-gap: var(--ui-space-2, 0.5rem); }\n  [data-component-root~="ui-switcher"][data-gap="s"] { --ui-switcher-gap: var(--ui-space-3, 0.75rem); }\n  [data-component-root~="ui-switcher"][data-gap="m"] { --ui-switcher-gap: var(--ui-space-4, 1rem); }\n  [data-component-root~="ui-switcher"][data-gap="l"] { --ui-switcher-gap: var(--ui-space-5, 1.5rem); }\n  [data-component-root~="ui-switcher"][data-threshold="xs"] { --ui-switcher-threshold: 20rem; }\n  [data-component-root~="ui-switcher"][data-threshold="sm"] { --ui-switcher-threshold: 30rem; }\n  [data-component-root~="ui-switcher"][data-threshold="md"] { --ui-switcher-threshold: 45rem; }\n  [data-component-root~="ui-switcher"][data-threshold="lg"] { --ui-switcher-threshold: 60rem; }\n  [data-component-root~="ui-switcher"][data-align="start"] { --ui-switcher-align: flex-start; }\n  [data-component-root~="ui-switcher"][data-align="center"] { --ui-switcher-align: center; }\n  [data-component-root~="ui-switcher"][data-align="end"] { --ui-switcher-align: flex-end; }\n  [data-component-root~="ui-sidebar"] > [data-ui-sidebar-resizer] {\n    position: absolute;\n    z-index: 1;\n    inset-block: 0;\n    /* On the panel\'s inner edge: the end edge of a start sidebar. */\n    inset-inline-end: 0;\n    inline-size: 8px;\n    min-inline-size: 8px;\n    transform: translateX(50%);\n    cursor: col-resize;\n    touch-action: none;\n    outline: none;\n  }\n  [data-component-root~="ui-sidebar"][data-side="end"] > [data-ui-sidebar-resizer] {\n    inset-inline-end: auto;\n    inset-inline-start: 0;\n    transform: translateX(-50%);\n  }\n  [data-component-root~="ui-sidebar"] > [data-ui-sidebar-resizer]::after {\n    content: "";\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 3px;\n    inline-size: 2px;\n    background: color-mix(in srgb, var(--ui-affordance-guide-color, var(--ui-border-strong)) 45%, transparent);\n    opacity: var(--ui-affordance-guide-opacity, 0.42);\n    transition:\n      background-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),\n      opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);\n  }\n  [data-component-root~="ui-sidebar"] > [data-ui-sidebar-resizer] > [data-ui-guide] {\n    position: absolute;\n    inset-block-start: 50%;\n    inset-inline-start: 50%;\n    inline-size: 6px;\n    block-size: 22px;\n    border: 1px solid var(--ui-border-strong, #c8c8c4);\n    border-radius: var(--ui-radius-round, 999px);\n    background: var(--ui-surface-elevated, #fff);\n    opacity: 0;\n    transform: translate(-50%, -50%);\n    transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);\n    pointer-events: none;\n  }\n  [data-component-root~="ui-sidebar"] > [data-ui-sidebar-resizer]:hover::after,\n  [data-component-root~="ui-sidebar"] > [data-ui-sidebar-resizer]:focus-visible::after {\n    background: var(--ui-affordance-direct-color, var(--ui-accent-solid, var(--ui-color-focus, Highlight)));\n    opacity: 1;\n  }\n  [data-component-root~="ui-sidebar"] > [data-ui-sidebar-resizer]:is(:hover, :focus-visible) > [data-ui-guide] {\n    opacity: 1;\n  }\n\n  [data-component-root~="ui-reel"] {\n    --ui-reel-gap: var(--ui-space-4, 1rem);\n    --ui-reel-item-width: auto;\n    display: flex;\n    inline-size: 100%;\n    gap: var(--ui-reel-gap);\n    overflow-x: auto;\n    overflow-y: hidden;\n    overscroll-behavior-inline: contain;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  [data-component-root~="ui-reel"] > * {\n    min-inline-size: 0;\n    flex: 0 0 var(--ui-reel-item-width);\n  }\n  [data-component-root~="ui-reel"][data-gap="xs"] { --ui-reel-gap: var(--ui-space-2, 0.5rem); }\n  [data-component-root~="ui-reel"][data-gap="s"] { --ui-reel-gap: var(--ui-space-3, 0.75rem); }\n  [data-component-root~="ui-reel"][data-gap="m"] { --ui-reel-gap: var(--ui-space-4, 1rem); }\n  [data-component-root~="ui-reel"][data-gap="l"] { --ui-reel-gap: var(--ui-space-5, 1.5rem); }\n  [data-component-root~="ui-reel"][data-item-width="sm"] { --ui-reel-item-width: 12rem; }\n  [data-component-root~="ui-reel"][data-item-width="md"] { --ui-reel-item-width: 16rem; }\n  [data-component-root~="ui-reel"][data-item-width="lg"] { --ui-reel-item-width: 20rem; }\n  [data-component-root~="ui-reel"][data-snap="start"],\n  [data-component-root~="ui-reel"][data-snap="center"] { scroll-snap-type: inline mandatory; }\n  [data-component-root~="ui-reel"][data-snap="start"] > * { scroll-snap-align: start; }\n  [data-component-root~="ui-reel"][data-snap="center"] > * { scroll-snap-align: center; }\n\n  [data-component-root~="ui-separator"] {\n    --ui-separator-color: var(--ui-border-default, #d0d5dd);\n    --ui-separator-space: var(--ui-space-4, 1rem);\n    display: block;\n    margin: 0;\n    border: 0;\n    border-block-start: 1px solid var(--ui-separator-color);\n    padding: 0;\n  }\n\n  [data-component-root~="ui-separator"][data-orientation="vertical"] {\n    inline-size: 1px;\n    block-size: 100%;\n    border-block-start: 0;\n    border-inline-start: 1px solid var(--ui-separator-color);\n  }\n}\n';
 
 // src/declarative-index.ts
 registerLoomaPackage("layout", records, styles);