@sylwellsoftware/fray 0.6.0 → 0.7.0

package/dist/index.js

@@ -1,15 +1,15 @@
-var Ye = Object.defineProperty;
-var Xe = (t, r, e) => r in t ? Ye(t, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[r] = e;
-var o = (t, r, e) => Xe(t, typeof r != "symbol" ? r + "" : r, e);
-import { C as y, j as u, c as S, a as w, i as ie } from "./jsx-dev-runtime-CqunwZ8j.js";
-import { F as br, b as gr, S as yr, d as wr, e as Er, f as Sr, g as Ir, h as kr, k as xr, l as vr, m as Tr, n as Rr, p as Nr, s as $r } from "./jsx-dev-runtime-CqunwZ8j.js";
-import { Emitter as x, DerivedEmitter as ae, FetchState as k, QueryArg as ve, LiveQuery as Ze, RestQueryHandler as et } from "@sylwellsoftware/glue";
-class qe extends y {
+var Rt = Object.defineProperty;
+var Ct = (t, r, e) => r in t ? Rt(t, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[r] = e;
+var a = (t, r, e) => Ct(t, typeof r != "symbol" ? r + "" : r, e);
+import { C as g, j as h, c as x, h as te, F as Le, a as w, i as de } from "./jsx-dev-runtime-Kf1Dhu-y.js";
+import { b as Ti, S as Ri, d as Ci, e as $i, f as Oi, g as ji, k as Ai, l as Ni, m as qi, n as Di, p as zi, s as Li } from "./jsx-dev-runtime-Kf1Dhu-y.js";
+import { Emitter as S, DerivedEmitter as ge, FetchState as k, QueryArg as Ge, LiveQuery as $t, RestQueryHandler as Ot } from "@sylwellsoftware/glue";
+class ft extends g {
   render() {
     return this.props.children ?? [];
   }
 }
-const b = {
+const y = {
   /** Deny mode: Excludes items that match the filter. */
   Deny: "deny",
   /** Require mode: Includes only items that match the filter. */
@@ -19,20 +19,20 @@ const b = {
   /** Neutral mode: Does not affect the inclusion or exclusion of items. */
   Neutral: "neutral"
 };
-function le(t) {
-  return Object.values(b).some((r) => r === t);
+function ye(t) {
+  return Object.values(y).some((r) => r === t);
 }
-let tt = 1;
-function F(t, r) {
-  return r != null && String(r).length > 0 ? String(r) : `fray-${t}-${tt++}`;
+let jt = 1;
+function j(t, r) {
+  return r != null && String(r).length > 0 ? String(r) : `fray-${t}-${jt++}`;
 }
-function z(t, r, e, i) {
+function K(t, r, e, i) {
   if (r.valueEmitter != null)
-    return rt(r.valueEmitter, "valueEmitter"), r.valueEmitter;
+    return At(r.valueEmitter, "valueEmitter"), r.valueEmitter;
   const s = r.defaultValue ?? r.value ?? r.initialValue ?? e, n = { owner: t, purpose: i };
-  return new x(s, n);
+  return new S(s, n);
 }
-function rt(t, r = "emitter") {
+function At(t, r = "emitter") {
   if (t == null || typeof t != "object" && typeof t != "function" || typeof Reflect.get(t, "get") != "function" || typeof Reflect.get(t, "set") != "function" || typeof Reflect.get(t, "subscribe") != "function")
     throw new TypeError(`${r} must be an emitter`);
 }
@@ -42,31 +42,31 @@ function R(...t) {
 function E(t) {
   return t.className ?? t.class ?? "";
 }
-function K(t, ...r) {
+function C(t, ...r) {
   if (t != null) {
     if (typeof t != "function") throw new TypeError("Control callback must be a function");
     t(...r);
   }
 }
-function fe(t, r = "options") {
+function he(t, r = "options") {
   if (!Array.isArray(t)) throw new TypeError(`${r} must be an array`);
 }
-function it(t) {
-  return le(t) ? t : String(t);
+function Nt(t) {
+  return ye(t) ? t : String(t);
 }
-class V extends y {
+class U extends g {
   constructor(e = {}) {
     var n;
     super(e);
-    o(this, "valueEmitter");
-    o(this, "activeTabEmitter");
+    a(this, "valueEmitter");
+    a(this, "activeTabEmitter");
     const i = e.tabs ?? [];
-    Te(i);
+    Je(i);
     const s = { ...e };
-    s.valueEmitter == null && e.activeTabEmitter != null && (s.valueEmitter = e.activeTabEmitter), s.defaultValue == null && e.initialActiveTabId != null && (s.defaultValue = e.initialActiveTabId), this.valueEmitter = z(
+    s.valueEmitter == null && e.activeTabEmitter != null && (s.valueEmitter = e.activeTabEmitter), s.defaultValue == null && e.initialActiveTabId != null && (s.defaultValue = e.initialActiveTabId), this.valueEmitter = K(
       this,
       s,
-      ((n = i.find((a) => !a.disabled)) == null ? void 0 : n.id) ?? null,
+      ((n = i.find((o) => !o.disabled)) == null ? void 0 : n.id) ?? null,
       "active tab"
     ), this.activeTabEmitter = this.valueEmitter;
   }
@@ -74,30 +74,30 @@ class V extends y {
     this.watch(this.valueEmitter);
   }
   selectTab(e, i = null) {
-    e == null || e.disabled || (this.valueEmitter.set(e.id, "tab selected"), K(this.props.onChange, e.id, i));
+    e == null || e.disabled || (this.props.onSelectTab == null ? this.valueEmitter.set(e.id, "tab selected") : this.props.onSelectTab(e, i), C(this.props.onChange, e.id, i));
   }
   render() {
     const { tabs: e = [], label: i = "Sections", baseId: s = "fray-tabs" } = this.props;
-    Te(e);
-    const n = this.valueEmitter.get(), a = this.Host;
-    return /* @__PURE__ */ u(
-      a,
+    Je(e);
+    const n = this.valueEmitter.get(), o = this.Host;
+    return /* @__PURE__ */ h(
+      o,
       {
         role: "tablist",
         className: E(this.props) || null,
         "aria-label": i,
-        children: e.map((l, c) => /* @__PURE__ */ u(
+        children: e.map((l, c) => /* @__PURE__ */ h(
           "button",
           {
-            id: Le(s, l.id),
+            id: mt(s, l.id),
             type: "button",
             role: "tab",
             disabled: !!l.disabled,
             "aria-selected": Object.is(n, l.id) ? "true" : "false",
-            "aria-controls": Ve(s, l.id),
+            "aria-controls": bt(s, l.id),
             tabIndex: Object.is(n, l.id) ? 0 : -1,
-            onClick: (h) => this.selectTab(l, h),
-            onKeyDown: (h) => this.handleKeyDown(h, c, e),
+            onClick: (u) => this.selectTab(l, u),
+            onKeyDown: (u) => this.handleKeyDown(u, c, e),
             children: l.label ?? String(l.id)
           },
           String(l.id)
@@ -106,17 +106,17 @@ class V extends y {
     );
   }
   handleKeyDown(e, i, s) {
-    const n = s.map((c, h) => ({ tab: c, tabIndex: h })).filter(({ tab: c }) => !c.disabled);
+    const n = s.map((c, u) => ({ tab: c, tabIndex: u })).filter(({ tab: c }) => !c.disabled);
     if (n.length === 0) return;
-    const a = Math.max(
+    const o = Math.max(
       0,
       n.findIndex(({ tabIndex: c }) => c === i)
     );
     let l;
     if (e.key === "ArrowRight" || e.key === "ArrowDown")
-      l = n[(a + 1) % n.length];
+      l = n[(o + 1) % n.length];
     else if (e.key === "ArrowLeft" || e.key === "ArrowUp")
-      l = n[(a - 1 + n.length) % n.length];
+      l = n[(o - 1 + n.length) % n.length];
     else if (e.key === "Home") l = n[0];
     else if (e.key === "End") l = n.at(-1);
     else return;
@@ -126,25 +126,25 @@ class V extends y {
     }
   }
 }
-o(V, "hostName", "tab-line"), o(V, "standaloneHostName", "tab-line"), o(V, "baseStyles", [
+a(U, "hostName", "tab-line"), a(U, "standaloneHostName", "tab-line"), a(U, "baseStyles", [
   ['& > button[role="tab"]', ["uiline", "button"]]
-]), o(V, "css", S`
+]), a(U, "css", x`
         & {
             display: flex;
             flex-flow: row wrap;
             padding-top: 3px;
         }
     `);
-function Le(t, r) {
-  return `${t}-tab-${Ue(r)}`;
+function mt(t, r) {
+  return `${t}-tab-${gt(r)}`;
 }
-function Ve(t, r) {
-  return `${t}-panel-${Ue(r)}`;
+function bt(t, r) {
+  return `${t}-panel-${gt(r)}`;
 }
-function Ue(t) {
+function gt(t) {
   return encodeURIComponent(String(t)).replaceAll("%", "-");
 }
-function Te(t) {
+function Je(t) {
   if (!Array.isArray(t)) throw new TypeError("TabLine tabs must be an array");
   const r = /* @__PURE__ */ new Set();
   for (const e of t) {
@@ -153,60 +153,87 @@ function Te(t) {
     r.add(e.id);
   }
 }
-class _ extends y {
+class je extends g {
+  constructor() {
+    super(...arguments);
+    a(this, "closeScope", null);
+  }
+  initialize() {
+    const e = this._runtime.router;
+    if (e == null) throw new Error("RouteScope requires a router in FrayRuntime");
+    this.closeScope = e.openScope(this.props.context, this);
+  }
+  render() {
+    return te(Le, null, this.props.children ?? []);
+  }
+  afterMount() {
+    var e;
+    (e = this._runtime.router) == null || e.completeScope(this.props.context, this);
+  }
+  _routeContextForChildren() {
+    return this.props.context;
+  }
+  onDestroy() {
+    var e;
+    (e = this.closeScope) == null || e.call(this), this.closeScope = null;
+  }
+}
+class re extends g {
   constructor(e = {}) {
     var n;
     super(e);
-    o(this, "valueEmitter");
-    o(this, "activeTabEmitter");
-    o(this, "baseId");
-    const i = Y(e), s = { ...e };
-    s.valueEmitter == null && e.activeTabEmitter != null && (s.valueEmitter = e.activeTabEmitter), s.defaultValue == null && e.initialActiveTabId != null && (s.defaultValue = e.initialActiveTabId), this.valueEmitter = z(
+    a(this, "valueEmitter");
+    a(this, "activeTabEmitter");
+    a(this, "baseId");
+    a(this, "routeContexts", /* @__PURE__ */ new Map());
+    const i = J(e), s = { ...e };
+    s.valueEmitter == null && e.activeTabEmitter != null && (s.valueEmitter = e.activeTabEmitter), s.defaultValue == null && e.initialActiveTabId != null && (s.defaultValue = e.initialActiveTabId), this.valueEmitter = K(
       this,
       s,
-      ((n = i.find((a) => !a.disabled)) == null ? void 0 : n.id) ?? null,
+      ((n = i.find((o) => !o.disabled)) == null ? void 0 : n.id) ?? null,
       "active tab"
-    ), this.activeTabEmitter = this.valueEmitter, this.baseId = F("tabs", e.id);
+    ), this.activeTabEmitter = this.valueEmitter, this.baseId = j("tabs", e.id);
   }
   initialize() {
     var i;
-    const e = Y(this.props);
-    e.some(({ id: s }) => Object.is(s, this.valueEmitter.get())) || this.valueEmitter.set(((i = e.find((s) => !s.disabled)) == null ? void 0 : i.id) ?? null), this.watch(this.valueEmitter);
+    const e = J(this.props);
+    e.some(({ id: s }) => Object.is(s, this.valueEmitter.get())) || this.valueEmitter.set(((i = e.find((s) => !s.disabled)) == null ? void 0 : i.id) ?? null), this.registerRoutes(e), this.watch(this.valueEmitter);
   }
   setProps(e) {
     var s;
     super.setProps(e);
-    const i = Y(e);
-    return i.some(({ id: n }) => Object.is(n, this.valueEmitter.get())) || this.valueEmitter.set(((s = i.find((n) => !n.disabled)) == null ? void 0 : s.id) ?? null), this;
+    const i = J(e);
+    return i.some(({ id: n }) => Object.is(n, this.valueEmitter.get())) || this.valueEmitter.set(((s = i.find((n) => !n.disabled)) == null ? void 0 : s.id) ?? null), this.registerRoutes(i), this;
   }
   render() {
-    const e = Y(this.props), i = e.find(({ id: n }) => Object.is(n, this.valueEmitter.get())) ?? e.find((n) => !n.disabled) ?? null, s = this.Host;
+    const e = J(this.props), i = e.find(({ id: n }) => Object.is(n, this.valueEmitter.get())) ?? e.find((n) => !n.disabled) ?? null, s = this.Host;
     return /* @__PURE__ */ w(
       s,
       {
         id: this.baseId,
         className: R("panellike", E(this.props)),
         children: [
-          /* @__PURE__ */ u(
-            V,
+          /* @__PURE__ */ h(
+            U,
             {
-              tabs: e.map(({ id: n, label: a, disabled: l }) => ({ id: n, label: a, disabled: l })),
+              tabs: e.map(({ id: n, label: o, disabled: l }) => ({ id: n, label: o, disabled: l })),
               valueEmitter: this.valueEmitter,
               baseId: this.baseId,
               ...this.props.label == null ? {} : { label: this.props.label },
-              ...this.props.onChange == null ? {} : { onChange: this.props.onChange }
+              ...this.props.onChange == null ? {} : { onChange: this.props.onChange },
+              onSelectTab: (n, o) => this.selectTab(n, o)
             },
             "tab-list"
           ),
-          i == null ? null : /* @__PURE__ */ u(
+          i == null ? null : /* @__PURE__ */ h(
             "div",
             {
-              id: Ve(this.baseId, i.id),
+              id: bt(this.baseId, i.id),
               role: "tabpanel",
               "data-part": "content",
-              "aria-labelledby": Le(this.baseId, i.id),
+              "aria-labelledby": mt(this.baseId, i.id),
               tabIndex: 0,
-              children: i.content
+              children: this.routedContent(i)
             },
             String(i.id)
           )
@@ -214,8 +241,41 @@ class _ extends y {
       }
     );
   }
+  onDestroy() {
+    var e;
+    (e = this._runtime.router) == null || e.unregisterRoutes(this._routeContext ?? this._runtime.router.root, this), this.routeContexts.clear();
+  }
+  registerRoutes(e) {
+    const i = e.filter((o) => o.route != null), s = this._runtime.router, n = this._routeContext;
+    if (s != null && n != null && s.unregisterRoutes(n, this), this.routeContexts.clear(), i.length !== 0) {
+      if (s == null || n == null)
+        throw new Error("Routed tabs require a router and contextual route scope");
+      this.routeContexts = new Map(s.registerSelectionRoutes(
+        n,
+        this,
+        i.map((o) => ({
+          route: o.route,
+          disabled: o.disabled,
+          active: () => Object.is(this.valueEmitter.get(), o.id),
+          activate: () => {
+            this.valueEmitter.set(o.id, "route tab restored");
+          }
+        })),
+        (o) => this.valueEmitter.subscribe(o, { emitCurrent: !1 })
+      ));
+    }
+  }
+  selectTab(e, i) {
+    var o;
+    const s = J(this.props).find(({ id: l }) => Object.is(l, e.id)), n = (s == null ? void 0 : s.route) == null ? null : this.routeContexts.get(s.route);
+    n == null ? this.valueEmitter.set(e.id, "tab selected") : (o = this._runtime.router) == null || o.navigate(n);
+  }
+  routedContent(e) {
+    const i = e.route == null ? null : this.routeContexts.get(e.route);
+    return i == null ? e.content : /* @__PURE__ */ h(je, { context: i, children: e.content }, i.pathname);
+  }
 }
-o(_, "dependencies", [V, qe]), o(_, "hostName", "tab-panel"), o(_, "standaloneHostName", "tab-panel"), o(_, "css", S`
+a(re, "dependencies", [je, U, ft]), a(re, "hostName", "tab-panel"), a(re, "standaloneHostName", "tab-panel"), a(re, "css", x`
         & {
             display: flex;
             flex-direction: column;
@@ -231,37 +291,39 @@ o(_, "dependencies", [V, qe]), o(_, "hostName", "tab-panel"), o(_, "standaloneHo
             overflow: auto;
         }
     `);
-function Y(t) {
+function J(t) {
   const r = t.tabs ?? [];
   if (!Array.isArray(r)) throw new TypeError("TabPanel tabs must be an array");
-  const i = (Array.isArray(t.children) ? t.children : t.children == null ? [] : [t.children]).filter((a) => ie(a) && a.type === qe).map((a, l) => {
-    if (!ie(a)) throw new TypeError("TabPanel children must be Tab nodes");
-    const c = a.props;
+  const i = (Array.isArray(t.children) ? t.children : t.children == null ? [] : [t.children]).filter((o) => de(o) && o.type === ft).map((o, l) => {
+    if (!de(o)) throw new TypeError("TabPanel children must be Tab nodes");
+    const c = o.props;
     return {
       id: c.id ?? `tab-${l + 1}`,
       label: c.label ?? `Tab ${l + 1}`,
       disabled: !!c.disabled,
-      content: c.children ?? []
+      content: c.children ?? [],
+      ...c.route == null ? {} : { route: c.route }
     };
-  }), s = r.length > 0 ? r.map((a) => ({
-    ...a,
-    label: a.label ?? String(a.id),
-    disabled: !!a.disabled,
-    content: a.content ?? a.component ?? []
+  }), s = r.length > 0 ? r.map((o) => ({
+    ...o,
+    label: o.label ?? String(o.id),
+    disabled: !!o.disabled,
+    content: o.content ?? o.component ?? [],
+    ...o.route == null ? {} : { route: o.route }
   })) : i, n = /* @__PURE__ */ new Set();
-  for (const a of s) {
-    if ((a == null ? void 0 : a.id) == null) throw new TypeError("Each tab requires an id");
-    if (n.has(a.id)) throw new Error(`Duplicate tab id: ${String(a.id)}`);
-    n.add(a.id);
+  for (const o of s) {
+    if ((o == null ? void 0 : o.id) == null) throw new TypeError("Each tab requires an id");
+    if (n.has(o.id)) throw new Error(`Duplicate tab id: ${String(o.id)}`);
+    n.add(o.id);
   }
   return s;
 }
-class ce extends y {
+class Ee extends g {
   constructor(e = {}) {
     super(e);
-    o(this, "panelId");
-    o(this, "headerId");
-    this.panelId = F("panel", e.id), this.headerId = `${this.panelId}-title`;
+    a(this, "panelId");
+    a(this, "headerId");
+    this.panelId = j("panel", e.id), this.headerId = `${this.panelId}-title`;
   }
   render() {
     const {
@@ -269,11 +331,11 @@ class ce extends y {
       toolbar: i = null,
       children: s = [],
       orientation: n = "vertical",
-      disabled: a = !1
+      disabled: o = !1
     } = this.props;
     if (!["horizontal", "vertical"].includes(n))
       throw new TypeError("Panel orientation must be horizontal or vertical");
-    const l = this.Host, c = e == null ? null : /* @__PURE__ */ u("header", { children: typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ u("h2", { id: this.headerId, children: e }) : /* @__PURE__ */ u("div", { id: this.headerId, children: e }) });
+    const l = this.Host, c = e == null ? null : /* @__PURE__ */ h("header", { children: typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ h("h2", { id: this.headerId, children: e }) : /* @__PURE__ */ h("div", { id: this.headerId, children: e }) });
     return /* @__PURE__ */ w(
       l,
       {
@@ -281,19 +343,19 @@ class ce extends y {
         role: e == null ? null : "region",
         className: R("panellike", E(this.props)),
         "data-orientation": n,
-        "data-disabled": a ? "" : null,
-        "aria-disabled": a ? "true" : null,
+        "data-disabled": o ? "" : null,
+        "aria-disabled": o ? "true" : null,
         "aria-labelledby": e == null ? null : this.headerId,
         children: [
           c,
           i,
-          /* @__PURE__ */ u("div", { "data-part": "content", "data-orientation": n, children: s })
+          /* @__PURE__ */ h("div", { "data-part": "content", "data-orientation": n, children: s })
         ]
       }
     );
   }
 }
-o(ce, "hostName", "panel"), o(ce, "standaloneHostName", "layout-panel"), o(ce, "css", S`
+a(Ee, "hostName", "panel"), a(Ee, "standaloneHostName", "layout-panel"), a(Ee, "css", x`
         & {
             display: flex;
             flex-direction: column;
@@ -322,12 +384,12 @@ o(ce, "hostName", "panel"), o(ce, "standaloneHostName", "layout-panel"), o(ce, "
             flex-direction: column;
         }
     `);
-class st extends y {
+class qt extends g {
   constructor(e = {}) {
     super(e);
-    o(this, "sidebarId");
-    o(this, "headerId");
-    this.sidebarId = F("sidebar", e.id), this.headerId = `${this.sidebarId}-title`;
+    a(this, "sidebarId");
+    a(this, "headerId");
+    this.sidebarId = j("sidebar", e.id), this.headerId = `${this.sidebarId}-title`;
   }
   render() {
     const {
@@ -335,7 +397,7 @@ class st extends y {
       toolbar: i = null,
       ariaLabel: s,
       children: n = []
-    } = this.props, a = e == null ? null : /* @__PURE__ */ u("header", { children: typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ u("h2", { id: this.headerId, children: e }) : /* @__PURE__ */ u("div", { id: this.headerId, children: e }) });
+    } = this.props, o = e == null ? null : /* @__PURE__ */ h("header", { children: typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ h("h2", { id: this.headerId, children: e }) : /* @__PURE__ */ h("div", { id: this.headerId, children: e }) });
     return /* @__PURE__ */ w(
       "aside",
       {
@@ -345,15 +407,15 @@ class st extends y {
         "aria-label": e == null ? s : null,
         "aria-labelledby": e == null ? null : this.headerId,
         children: [
-          a,
-          i == null ? null : /* @__PURE__ */ u("div", { "data-part": "toolbar", children: i }),
-          /* @__PURE__ */ u("div", { "data-part": "content", tabIndex: 0, children: n })
+          o,
+          i == null ? null : /* @__PURE__ */ h("div", { "data-part": "toolbar", children: i }),
+          /* @__PURE__ */ h("div", { "data-part": "content", tabIndex: 0, children: n })
         ]
       }
     );
   }
 }
-o(st, "css", S`
+a(qt, "css", x`
         aside {
             display: flex;
             flex-direction: column;
@@ -380,7 +442,7 @@ o(st, "css", S`
             overflow-y: auto;
         }
     `);
-class de extends y {
+class xe extends g {
   render() {
     const {
       primary: r = null,
@@ -388,7 +450,7 @@ class de extends y {
       direction: i = "horizontal",
       primarySize: s,
       primaryLabel: n,
-      secondaryLabel: a
+      secondaryLabel: o
     } = this.props;
     if (i !== "horizontal" && i !== "vertical")
       throw new TypeError("SplitView direction must be horizontal or vertical");
@@ -402,7 +464,7 @@ class de extends y {
         "data-direction": i,
         style: s == null ? void 0 : { "--split-primary-size": s },
         children: [
-          /* @__PURE__ */ u(
+          /* @__PURE__ */ h(
             "div",
             {
               "data-part": "primary",
@@ -411,12 +473,12 @@ class de extends y {
               children: r
             }
           ),
-          /* @__PURE__ */ u(
+          /* @__PURE__ */ h(
             "div",
             {
               "data-part": "secondary",
-              role: a == null ? null : "region",
-              "aria-label": a,
+              role: o == null ? null : "region",
+              "aria-label": o,
               children: e ?? this.props.children ?? []
             }
           )
@@ -425,7 +487,7 @@ class de extends y {
     );
   }
 }
-o(de, "hostName", "split-view"), o(de, "standaloneHostName", "split-view"), o(de, "css", S`
+a(xe, "hostName", "split-view"), a(xe, "standaloneHostName", "split-view"), a(xe, "css", x`
         & {
             display: grid;
             flex: 1 1 auto;
@@ -460,7 +522,7 @@ o(de, "hostName", "split-view"), o(de, "standaloneHostName", "split-view"), o(de
             border-block-end: 1px solid var(--ui-border-color);
         }
     `);
-class Pe extends y {
+class yt extends g {
   render() {
     const { term: r, value: e, children: i = [] } = this.props;
     return /* @__PURE__ */ w(
@@ -469,14 +531,14 @@ class Pe extends y {
         className: E(this.props) || void 0,
         "data-fray-component": "description-item",
         children: [
-          /* @__PURE__ */ u("dt", { children: r }),
-          /* @__PURE__ */ u("dd", { children: e ?? i })
+          /* @__PURE__ */ h("dt", { children: r }),
+          /* @__PURE__ */ h("dd", { children: e ?? i })
         ]
       }
     );
   }
 }
-o(Pe, "css", S`
+a(yt, "css", x`
         div:has(> dt + dd) {
             display: grid;
             grid-template-columns: minmax(7rem, 0.7fr) minmax(0, 1.3fr);
@@ -497,9 +559,9 @@ o(Pe, "css", S`
             }
         }
     `);
-class Re extends y {
+class Ze extends g {
   render() {
-    return /* @__PURE__ */ u(
+    return /* @__PURE__ */ h(
       "dl",
       {
         className: R("datacomponentlike", E(this.props)),
@@ -510,21 +572,21 @@ class Re extends y {
     );
   }
 }
-o(Re, "dependencies", [Pe]), o(Re, "css", S`
+a(Ze, "dependencies", [yt]), a(Ze, "css", x`
         dl:has(> div > dt + dd) {
             display: grid;
             margin: 0;
         }
     `);
-class M extends y {
+class H extends g {
   render() {
-    const r = nt(this.props.width ?? 65), e = this.Host;
-    return /* @__PURE__ */ u(e, { style: { width: `${r}%` }, "aria-hidden": "true" });
+    const r = Dt(this.props.width ?? 65), e = this.Host;
+    return /* @__PURE__ */ h(e, { style: { width: `${r}%` }, "aria-hidden": "true" });
   }
 }
-o(M, "hostName", "placeholder"), o(M, "standaloneHostName", "loading-placeholder"), o(M, "baseStyles", [
+a(H, "hostName", "placeholder"), a(H, "standaloneHostName", "loading-placeholder"), a(H, "baseStyles", [
   ["&::after", ["after", "working"]]
-]), o(M, "css", S`
+]), a(H, "css", x`
         & {
             display: block;
             min-width: 3rem;
@@ -541,48 +603,48 @@ o(M, "hostName", "placeholder"), o(M, "standaloneHostName", "loading-placeholder
             to { background-position: 2rem 0; }
         }
     `);
-function nt(t) {
+function Dt(t) {
   const r = Number(t);
   if (!Number.isFinite(r)) throw new TypeError("Placeholder width must be numeric");
   return Math.min(100, Math.max(10, r));
 }
-function Be(t, r, e) {
-  we(e);
+function wt(t, r, e) {
+  Ke(e);
   for (const i of e) {
     const s = r[i.key];
     if (s == null) continue;
     const n = i.options.flatMap((c) => {
-      const h = s[c.key];
-      return h == null || h === b.Neutral ? [] : [{ option: c, mode: h }];
+      const u = s[c.key];
+      return u == null || u === y.Neutral ? [] : [{ option: c, mode: u }];
     });
-    if (n.some(({ option: c, mode: h }) => h === b.Deny && c.matches(t)) || n.filter(({ mode: c }) => c === b.Require).some(({ option: c }) => !c.matches(t)))
+    if (n.some(({ option: c, mode: u }) => u === y.Deny && c.matches(t)) || n.filter(({ mode: c }) => c === y.Require).some(({ option: c }) => !c.matches(t)))
       return !1;
-    const l = n.filter(({ mode: c }) => c === b.Prefer);
+    const l = n.filter(({ mode: c }) => c === y.Prefer);
     if (l.length > 0 && !l.some(({ option: c }) => c.matches(t)))
       return !1;
   }
   return !0;
 }
-function ot(t, r, e) {
+function zt(t, r, e) {
   if (!Array.isArray(t)) throw new TypeError("Filtered items must be an array");
-  return t.filter((i) => Be(i, r, e));
+  return t.filter((i) => wt(i, r, e));
 }
-function nr(t, r, e = null) {
-  return we(r), new ae(
+function Xr(t, r, e = null) {
+  return Ke(r), new ge(
     [t],
-    ([i]) => (s) => Be(s, i, r),
+    ([i]) => (s) => wt(s, i, r),
     { owner: e, purpose: "filter predicate" }
   );
 }
-function or(t, r, e, i = null) {
-  return we(e), new ae(
+function Yr(t, r, e, i = null) {
+  return Ke(e), new ge(
     [t, r],
-    ([s, n]) => ot(s, n, e),
+    ([s, n]) => zt(s, n, e),
     { owner: i, purpose: "filtered items" }
   );
 }
-function ar(t) {
-  at(t);
+function ei(t) {
+  Lt(t);
   const r = {};
   for (const e of Object.keys(t).sort()) {
     const i = {}, s = t[e];
@@ -592,98 +654,98 @@ function ar(t) {
   }
   return { version: 1, dimensions: r };
 }
-function lr(t) {
-  if (!W(t) || t.version !== 1 || !W(t.dimensions))
+function ti(t) {
+  if (!X(t) || t.version !== 1 || !X(t.dimensions))
     throw new TypeError("Filter state must use version 1 with a dimensions object");
   const r = {};
   for (const [e, i] of Object.entries(t.dimensions)) {
-    if (P(e, "Filter dimension"), !W(i))
+    if (_(e, "Filter dimension"), !X(i))
       throw new TypeError(`Filter dimension ${e} must be an object`);
     const s = {};
-    for (const [n, a] of Object.entries(i)) {
-      if (P(n, `Filter option in ${e}`), !le(a))
+    for (const [n, o] of Object.entries(i)) {
+      if (_(n, `Filter option in ${e}`), !ye(o))
         throw new TypeError(
-          `Unknown filter mode for ${e}.${n}: ${String(a)}`
+          `Unknown filter mode for ${e}.${n}: ${String(o)}`
         );
-      s[n] = a;
+      s[n] = o;
     }
     r[e] = s;
   }
   return r;
 }
-function at(t) {
-  if (!W(t)) throw new TypeError("Filter state must be an object");
+function Lt(t) {
+  if (!X(t)) throw new TypeError("Filter state must be an object");
   for (const [r, e] of Object.entries(t)) {
-    if (P(r, "Filter dimension"), !W(e))
+    if (_(r, "Filter dimension"), !X(e))
       throw new TypeError(`Filter dimension ${r} must be an object`);
     for (const [i, s] of Object.entries(e))
-      if (P(i, `Filter option in ${r}`), !le(s))
+      if (_(i, `Filter option in ${r}`), !ye(s))
         throw new TypeError(
           `Unknown filter mode for ${r}.${i}: ${String(s)}`
         );
   }
 }
-function we(t) {
+function Ke(t) {
   if (!Array.isArray(t)) throw new TypeError("Filter dimensions must be an array");
   const r = /* @__PURE__ */ new Set();
   for (const e of t) {
-    if (P(e.key, "Filter dimension"), r.has(e.key))
+    if (_(e.key, "Filter dimension"), r.has(e.key))
       throw new Error(`Duplicate filter dimension: ${e.key}`);
     if (r.add(e.key), !Array.isArray(e.options))
       throw new TypeError(`Filter dimension ${e.key} options must be an array`);
     const i = /* @__PURE__ */ new Set();
     for (const s of e.options) {
-      if (P(s.key, `Filter option in ${e.key}`), i.has(s.key))
+      if (_(s.key, `Filter option in ${e.key}`), i.has(s.key))
         throw new Error(`Duplicate filter option: ${e.key}.${s.key}`);
       if (i.add(s.key), typeof s.matches != "function")
         throw new TypeError(`Filter matcher ${e.key}.${s.key} must be a function`);
     }
   }
 }
-function P(t, r) {
+function _(t, r) {
   if (t.length === 0 || t === "__proto__" || t === "prototype" || t === "constructor")
     throw new TypeError(`${r} key is not safe for persisted state`);
 }
-function W(t) {
+function X(t) {
   return t != null && typeof t == "object" && !Array.isArray(t);
 }
-class Ge {
+class Et {
   constructor({
     getItems: r,
-    getKey: e = Se,
+    getKey: e = He,
     selectedItemsEmitter: i,
     owner: s = null
   }) {
-    o(this, "getItems");
-    o(this, "getKey");
-    o(this, "selectedItemsEmitter");
-    o(this, "selectedItems$");
-    o(this, "ownsSelectedItemsEmitter");
-    o(this, "rows", []);
-    o(this, "rowCleanups", []);
-    o(this, "activeIndex", 0);
-    o(this, "anchorIndex", null);
-    o(this, "dragStartIndex", null);
-    o(this, "dragOriginEvent", null);
-    o(this, "dragMoved", !1);
-    o(this, "dragCleanup", null);
-    o(this, "suppressNextClick", !1);
-    o(this, "suppressClickTimer", null);
-    o(this, "destroyed", !1);
-    o(this, "ownedSelectedItemsEmitter");
+    a(this, "getItems");
+    a(this, "getKey");
+    a(this, "selectedItemsEmitter");
+    a(this, "selectedItems$");
+    a(this, "ownsSelectedItemsEmitter");
+    a(this, "rows", []);
+    a(this, "rowCleanups", []);
+    a(this, "activeIndex", 0);
+    a(this, "anchorIndex", null);
+    a(this, "dragStartIndex", null);
+    a(this, "dragOriginEvent", null);
+    a(this, "dragMoved", !1);
+    a(this, "dragCleanup", null);
+    a(this, "suppressNextClick", !1);
+    a(this, "suppressClickTimer", null);
+    a(this, "destroyed", !1);
+    a(this, "ownedSelectedItemsEmitter");
     if (typeof r != "function")
       throw new TypeError("Selection handler getItems must be a function");
     if (typeof e != "function")
       throw new TypeError("Selection handler getKey must be a function");
-    this.getItems = r, this.getKey = e, this.ownedSelectedItemsEmitter = i == null ? new x([], { owner: s, purpose: "selected items" }) : null, this.selectedItemsEmitter = i ?? this.ownedSelectedItemsEmitter, this.selectedItems$ = this.selectedItemsEmitter, this.ownsSelectedItemsEmitter = this.ownedSelectedItemsEmitter != null;
+    this.getItems = r, this.getKey = e, this.ownedSelectedItemsEmitter = i == null ? new S([], { owner: s, purpose: "selected items" }) : null, this.selectedItemsEmitter = i ?? this.ownedSelectedItemsEmitter, this.selectedItems$ = this.selectedItemsEmitter, this.ownsSelectedItemsEmitter = this.ownedSelectedItemsEmitter != null;
   }
   rowsUpdated(r) {
-    this.destroyed || (this.releaseRows(), this.rows = Array.from(r ?? []), this.rows.forEach((e, i) => this.wireRow(e, i)), this.activeIndex = dt(this.activeIndex, this.rows.length), this.reconcileSelectedItems(), this.syncRows());
+    this.destroyed || (this.releaseRows(), this.rows = Array.from(r ?? []), this.rows.forEach((e, i) => this.wireRow(e, i)), this.activeIndex = Ht(this.activeIndex, this.rows.length), this.reconcileSelectedItems(), this.syncRows());
   }
   wireRow(r, e) {
-    const i = (l) => this.handleClick(e, l), s = (l) => this.handleKeyDown(e, l), n = (l) => this.handleMouseDown(e, l, r), a = (l) => this.handleMouseEnter(e, l);
-    r.addEventListener("click", i), r.addEventListener("keydown", s), r.addEventListener("mousedown", n), r.addEventListener("mouseenter", a), this.rowCleanups.push(() => {
-      r.removeEventListener("click", i), r.removeEventListener("keydown", s), r.removeEventListener("mousedown", n), r.removeEventListener("mouseenter", a);
+    const i = (l) => this.handleClick(e, l), s = (l) => this.handleKeyDown(e, l), n = (l) => this.handleMouseDown(e, l, r), o = (l) => this.handleMouseEnter(e, l);
+    r.addEventListener("click", i), r.addEventListener("keydown", s), r.addEventListener("mousedown", n), r.addEventListener("mouseenter", o), this.rowCleanups.push(() => {
+      r.removeEventListener("click", i), r.removeEventListener("keydown", s), r.removeEventListener("mousedown", n), r.removeEventListener("mouseenter", o);
     });
   }
   handleClick(r, e) {
@@ -746,8 +808,8 @@ class Ge {
   syncRows() {
     const r = new Set(this.getSelectedItems().map((i, s) => this.getKey(i, s))), e = this.getItems();
     this.rows.forEach((i, s) => {
-      const n = e[s], a = n !== void 0 && r.has(this.getKey(n, s));
-      i.classList.toggle("selected", a), i.setAttribute("aria-selected", String(a)), i.tabIndex = s === this.activeIndex ? 0 : -1;
+      const n = e[s], o = n !== void 0 && r.has(this.getKey(n, s));
+      i.classList.toggle("selected", o), i.setAttribute("aria-selected", String(o)), i.tabIndex = s === this.activeIndex ? 0 : -1;
     });
   }
   releaseRows() {
@@ -766,9 +828,9 @@ class Ge {
     this.destroyed || (this.destroyed = !0, this.finishDrag(!1), this.clearClickSuppression(), this.releaseRows(), (r = this.ownedSelectedItemsEmitter) == null || r.dispose());
   }
 }
-class Ee extends Ge {
+class Fe extends Et {
   constructor(e) {
-    const i = e.selectedItemEmitter == null ? new x(null, {
+    const i = e.selectedItemEmitter == null ? new S(null, {
       owner: e.owner,
       purpose: "selected item"
     }) : null, s = e.selectedItemEmitter ?? i;
@@ -776,11 +838,11 @@ class Ee extends Ge {
       getItems: e.getItems,
       ...e.getKey == null ? {} : { getKey: e.getKey },
       ...e.owner === void 0 ? {} : { owner: e.owner },
-      selectedItemsEmitter: new ct(s)
+      selectedItemsEmitter: new Ft(s)
     });
-    o(this, "selectedItemEmitter");
-    o(this, "selectedItem$");
-    o(this, "ownedSelectedItemEmitter");
+    a(this, "selectedItemEmitter");
+    a(this, "selectedItem$");
+    a(this, "ownedSelectedItemEmitter");
     this.ownedSelectedItemEmitter = i, this.selectedItemEmitter = s, this.selectedItem$ = s;
   }
   selectIndex(e) {
@@ -795,17 +857,17 @@ class Ee extends Ge {
     super.destroy(), (e = this.ownedSelectedItemEmitter) == null || e.dispose();
   }
 }
-class lt extends Ge {
+class Kt extends Et {
   selectIndex(r, e) {
     const i = this.getItems(), s = i[r];
     if (s !== void 0) {
       if (e.shiftKey && this.anchorIndex != null) {
-        const n = Math.min(this.anchorIndex, r), a = Math.max(this.anchorIndex, r), l = i.slice(n, a + 1), c = ue(e) ? Ne(this.getSelectedItems(), l, this.getKey) : [...l];
+        const n = Math.min(this.anchorIndex, r), o = Math.max(this.anchorIndex, r), l = i.slice(n, o + 1), c = ve(e) ? Xe(this.getSelectedItems(), l, this.getKey) : [...l];
         this.setSelectedItems(c, "range selection changed");
         return;
       }
-      if (ue(e) || "key" in e && e.key === " ") {
-        const n = this.getSelectedItems(), a = this.getKey(s, r), c = n.some((h, p) => Object.is(this.getKey(h, p), a)) ? n.filter((h, p) => !Object.is(this.getKey(h, p), a)) : [...n, s];
+      if (ve(e) || "key" in e && e.key === " ") {
+        const n = this.getSelectedItems(), o = this.getKey(s, r), c = n.some((u, p) => Object.is(this.getKey(u, p), o)) ? n.filter((u, p) => !Object.is(this.getKey(u, p), o)) : [...n, s];
         this.anchorIndex = r, this.setSelectedItems(c, "multi selection toggled");
         return;
       }
@@ -819,14 +881,14 @@ class lt extends Ge {
     return !0;
   }
   selectDragRange(r, e, i) {
-    const s = this.getItems(), n = Math.min(r, e), a = Math.max(r, e), l = s.slice(n, a + 1), c = ue(i) ? Ne(this.getSelectedItems(), l, this.getKey) : [...l];
+    const s = this.getItems(), n = Math.min(r, e), o = Math.max(r, e), l = s.slice(n, o + 1), c = ve(i) ? Xe(this.getSelectedItems(), l, this.getKey) : [...l];
     this.anchorIndex = r, this.setSelectedItems(c, "drag selection changed");
   }
 }
-function se(t) {
-  return t.multiSelect ? new lt(t) : new Ee(t);
+function pe(t) {
+  return t.multiSelect ? new Kt(t) : new Fe(t);
 }
-class ct {
+class Ft {
   constructor(r) {
     this.source = r;
   }
@@ -850,7 +912,7 @@ class ct {
     }), e);
   }
 }
-function Se(t, r) {
+function He(t, r) {
   if (t != null && typeof t == "object") {
     const e = Reflect.get(t, "id");
     if (e != null) return e;
@@ -860,47 +922,47 @@ function Se(t, r) {
     `Selection item at index ${r} needs an id or an explicit itemKey/rowKey`
   );
 }
-function ue(t) {
+function ve(t) {
   return !!(t.ctrlKey || t.metaKey);
 }
-function dt(t, r) {
+function Ht(t, r) {
   return r <= 0 ? 0 : Math.min(Math.max(t, 0), r - 1);
 }
-function Ne(t, r, e) {
-  const i = [...t], s = new Set(t.map((n, a) => e(n, a)));
+function Xe(t, r, e) {
+  const i = [...t], s = new Set(t.map((n, o) => e(n, o)));
   for (const n of r) {
-    const a = e(n, i.length);
-    s.has(a) || (s.add(a), i.push(n));
+    const o = e(n, i.length);
+    s.has(o) || (s.add(o), i.push(n));
   }
   return i;
 }
-class Q extends y {
+class Z extends g {
   constructor(e = {}) {
     super(e);
-    o(this, "itemsEmitter");
-    o(this, "items$");
-    o(this, "selectedItemsEmitter");
-    o(this, "selectedItems$");
-    o(this, "selectedItemEmitter");
-    o(this, "selectedItem$");
-    o(this, "getItemKey");
-    o(this, "selectionHandler");
-    o(this, "ownedItemsEmitter");
-    ht(e.items) ? (this.itemsEmitter = e.items, this.ownedItemsEmitter = null) : (this.ownedItemsEmitter = new x(e.items ?? [], {
+    a(this, "itemsEmitter");
+    a(this, "items$");
+    a(this, "selectedItemsEmitter");
+    a(this, "selectedItems$");
+    a(this, "selectedItemEmitter");
+    a(this, "selectedItem$");
+    a(this, "getItemKey");
+    a(this, "selectionHandler");
+    a(this, "ownedItemsEmitter");
+    Vt(e.items) ? (this.itemsEmitter = e.items, this.ownedItemsEmitter = null) : (this.ownedItemsEmitter = new S(e.items ?? [], {
       owner: this,
       purpose: "list items"
-    }), this.itemsEmitter = this.ownedItemsEmitter), this.items$ = this.itemsEmitter, this.getItemKey = ut(e.itemKey), this.selectionHandler = e.multiSelect === !0 ? se({
+    }), this.itemsEmitter = this.ownedItemsEmitter), this.items$ = this.itemsEmitter, this.getItemKey = Mt(e.itemKey), this.selectionHandler = e.multiSelect === !0 ? pe({
       owner: this,
       multiSelect: !0,
       ...e.selectedItemsEmitter == null ? {} : { selectedItemsEmitter: e.selectedItemsEmitter },
       getItems: () => this.itemsEmitter.get(),
       getKey: this.getItemKey
-    }) : se({
+    }) : pe({
       owner: this,
       ...e.selectedItemEmitter == null ? {} : { selectedItemEmitter: e.selectedItemEmitter },
       getItems: () => this.itemsEmitter.get(),
       getKey: this.getItemKey
-    }), this.selectedItemsEmitter = this.selectionHandler.selectedItemsEmitter, this.selectedItems$ = this.selectedItemsEmitter, this.selectedItemEmitter = this.selectionHandler instanceof Ee ? this.selectionHandler.selectedItemEmitter : null, this.selectedItem$ = this.selectedItemEmitter;
+    }), this.selectedItemsEmitter = this.selectionHandler.selectedItemsEmitter, this.selectedItems$ = this.selectedItemsEmitter, this.selectedItemEmitter = this.selectionHandler instanceof Fe ? this.selectionHandler.selectedItemEmitter : null, this.selectedItem$ = this.selectedItemEmitter;
   }
   initialize() {
     this.watch(this.itemsEmitter, this.selectedItemsEmitter);
@@ -908,36 +970,36 @@ class Q extends y {
   render() {
     const e = this.itemsEmitter.get();
     if (!Array.isArray(e)) throw new TypeError("ListView items must be an array");
-    const i = this.itemsEmitter.getFetchState(), s = this.itemsEmitter.getError(), n = i === k.Initial || i === k.Loading, a = new Set(this.selectedItemsEmitter.get().map((c, h) => this.getItemKey(c, h))), l = this.Host;
+    const i = this.itemsEmitter.getFetchState(), s = this.itemsEmitter.getError(), n = i === k.Initial || i === k.Loading, o = new Set(this.selectedItemsEmitter.get().map((c, u) => this.getItemKey(c, u))), l = this.Host;
     return /* @__PURE__ */ w(
       l,
       {
         className: R("datacomponentlike", E(this.props)),
         children: [
-          i === k.Error ? /* @__PURE__ */ u("p", { role: "alert", children: ft(s, "Unable to load items") }) : null,
+          i === k.Error ? /* @__PURE__ */ h("p", { role: "alert", children: Qt(s, "Unable to load items") }) : null,
           n && e.length === 0 ? /* @__PURE__ */ w("div", { role: "status", "data-part": "loading", children: [
-            /* @__PURE__ */ u("span", { children: "Loading items…" }),
-            Array.from({ length: this.props.placeholderCount ?? 5 }, (c, h) => /* @__PURE__ */ u("div", { "data-part": "placeholder-row", children: /* @__PURE__ */ u(M, { width: 45 + h * 7 }) }, `placeholder-${h}`))
+            /* @__PURE__ */ h("span", { children: "Loading items…" }),
+            Array.from({ length: this.props.placeholderCount ?? 5 }, (c, u) => /* @__PURE__ */ h("div", { "data-part": "placeholder-row", children: /* @__PURE__ */ h(H, { width: 45 + u * 7 }) }, `placeholder-${u}`))
           ] }) : null,
-          i === k.Ready && e.length === 0 ? /* @__PURE__ */ u("p", { role: "status", children: "No items" }) : null,
-          e.length > 0 ? /* @__PURE__ */ u(
+          i === k.Ready && e.length === 0 ? /* @__PURE__ */ h("p", { role: "status", children: "No items" }) : null,
+          e.length > 0 ? /* @__PURE__ */ h(
             "div",
             {
               role: "listbox",
               "aria-label": this.props.label ?? "Items",
               "aria-busy": n ? "true" : null,
               "aria-multiselectable": this.props.multiSelect ? "true" : null,
-              children: e.map((c, h) => {
-                const p = this.getItemKey(c, h), f = a.has(p), g = this.props.renderItem ? this.props.renderItem(c, h) : pt(c);
-                return /* @__PURE__ */ u(
+              children: e.map((c, u) => {
+                const p = this.getItemKey(c, u), f = o.has(p), m = this.props.renderItem ? this.props.renderItem(c, u) : Pt(c);
+                return /* @__PURE__ */ h(
                   "div",
                   {
                     role: "option",
                     "data-fray-selectable-row": "",
-                    "data-index": h,
+                    "data-index": u,
                     "aria-selected": String(f),
-                    tabIndex: h === 0 ? 0 : -1,
-                    children: g
+                    tabIndex: u === 0 ? 0 : -1,
+                    children: m
                   },
                   String(p)
                 );
@@ -970,10 +1032,10 @@ class Q extends y {
     this.selectionHandler.destroy(), (e = this.ownedItemsEmitter) == null || e.dispose();
   }
 }
-o(Q, "dependencies", [M]), o(Q, "hostName", "list-view"), o(Q, "standaloneHostName", "list-view"), o(Q, "baseStyles", [
+a(Z, "dependencies", [H]), a(Z, "hostName", "list-view"), a(Z, "standaloneHostName", "list-view"), a(Z, "baseStyles", [
   ["&", "inputlike"],
   ['& > [role="listbox"] > [role="option"]', "inputline"]
-]), o(Q, "css", S`
+]), a(Z, "css", x`
         & {
             display: flex;
             flex-direction: column;
@@ -998,8 +1060,8 @@ o(Q, "dependencies", [M]), o(Q, "hostName", "list-view"), o(Q, "standaloneHostNa
             padding: var(--ui-padding);
         }
     `);
-function ut(t) {
-  if (t == null) return Se;
+function Mt(t) {
+  if (t == null) return He;
   if (typeof t == "function") return t;
   if (typeof t == "string" && t.length > 0)
     return (r, e) => {
@@ -1012,32 +1074,32 @@ function ut(t) {
     };
   throw new TypeError("ListView itemKey must be a function or property name");
 }
-function ht(t) {
+function Vt(t) {
   return t != null && (typeof t == "object" || typeof t == "function") && typeof Reflect.get(t, "get") == "function" && typeof Reflect.get(t, "subscribe") == "function";
 }
-function pt(t) {
+function Pt(t) {
   if (t != null && (typeof t == "object" || typeof t == "function")) {
     const r = Reflect.get(t, "label");
-    if (mt(r)) return r;
+    if (Ut(r)) return r;
   }
   return String(t);
 }
-function mt(t) {
+function Ut(t) {
   return t == null || typeof t == "string" || typeof t == "number";
 }
-function ft(t, r) {
+function Qt(t, r) {
   return t instanceof Error ? t.message : t == null ? r : String(t);
 }
-class D extends y {
+class q extends g {
   constructor(e = {}) {
     super(e);
-    o(this, "symbols");
-    o(this, "valueEmitter");
-    o(this, "semanticStateEmitter");
+    a(this, "symbols");
+    a(this, "valueEmitter");
+    a(this, "semanticStateEmitter");
     const i = this.constructor;
-    this.symbols = e.symbols ?? i.symbols, bt(this.symbols);
+    this.symbols = e.symbols ?? i.symbols, Bt(this.symbols);
     const s = e.initialSemanticState ?? i.defaultSemanticState ?? this.symbols[0][1], n = { ...e };
-    n.defaultValue == null && e.initialSemanticState != null && (n.defaultValue = e.initialSemanticState), this.valueEmitter = z(
+    n.defaultValue == null && e.initialSemanticState != null && (n.defaultValue = e.initialSemanticState), this.valueEmitter = K(
       this,
       n,
       s,
@@ -1049,139 +1111,181 @@ class D extends y {
   }
   cycleState(e = 1, i = null) {
     if (this.props.disabled) return;
-    const s = this.symbols.findIndex(([, c]) => Object.is(c, this.valueEmitter.get())), a = ((s < 0 ? 0 : s) + e + this.symbols.length) % this.symbols.length, l = this.symbols[a][1];
-    this.valueEmitter.set(l, "checkbox state changed"), K(this.props.onChange, l, i);
+    const s = this.symbols.findIndex(([, c]) => Object.is(c, this.valueEmitter.get())), o = ((s < 0 ? 0 : s) + e + this.symbols.length) % this.symbols.length, l = this.symbols[o][1];
+    this.valueEmitter.set(l, "checkbox state changed"), C(this.props.onChange, l, i);
   }
   render() {
     const {
       label: e = this.props.value ?? "Option",
       disabled: i = !1,
-      required: s = !1,
-      name: n,
-      value: a
-    } = this.props, l = this.valueEmitter.get(), c = this.symbols.findIndex(([, m]) => Object.is(m, l)), [h] = this.symbols[c] ?? ["?", l], p = it(l), f = l === b.Prefer || l === b.Require || this.symbols.length === 2 && c === 1, g = this.Host;
-    return /* @__PURE__ */ u(
-      g,
+      required: s = !1
+    } = this.props, n = this.valueEmitter.get(), o = this.symbols.findIndex(([, f]) => Object.is(f, n)), [l] = this.symbols[o] ?? ["?", n], c = Nt(n), u = n === y.Prefer || n === y.Require || this.symbols.length === 2 && o === 1, p = this.Host;
+    return /* @__PURE__ */ h(
+      p,
       {
         className: E(this.props) || null,
         "data-disabled": i ? "" : null,
         "data-required": s ? "" : null,
-        "data-state": p,
-        children: /* @__PURE__ */ w(
-          "button",
-          {
-            type: "button",
-            role: "checkbox",
-            disabled: i,
-            name: n,
-            value: a == null ? void 0 : String(a),
-            "aria-checked": f ? "true" : "false",
-            "aria-required": s ? "true" : null,
-            "aria-label": `${e}: ${p}`,
-            onClick: (m) => this.cycleState(1, m),
-            onKeyDown: (m) => {
-              m.key === "ArrowRight" || m.key === "ArrowDown" ? (m.preventDefault(), this.cycleState(1, m)) : (m.key === "ArrowLeft" || m.key === "ArrowUp") && (m.preventDefault(), this.cycleState(-1, m));
-            },
-            children: [
-              /* @__PURE__ */ u("span", { className: "inputshell", "aria-hidden": "true", children: h }),
-              /* @__PURE__ */ u("span", { children: e })
-            ]
-          }
-        )
+        "data-state": c,
+        children: /* @__PURE__ */ w("label", { children: [
+          /* @__PURE__ */ h(
+            "input",
+            {
+              type: "checkbox",
+              checked: u,
+              disabled: i,
+              required: s,
+              name: this.props.name,
+              value: this.props.value == null ? void 0 : String(this.props.value),
+              "data-state": c,
+              "aria-label": `${e}: ${c}`,
+              onChange: (f) => this.cycleState(1, f),
+              onKeyDown: (f) => {
+                f.key === "ArrowRight" || f.key === "ArrowDown" ? (f.preventDefault(), this.cycleState(1, f)) : (f.key === "ArrowLeft" || f.key === "ArrowUp") && (f.preventDefault(), this.cycleState(-1, f));
+              }
+            }
+          ),
+          /* @__PURE__ */ h("span", { className: "checkboxshell", "aria-hidden": "true", children: l }),
+          /* @__PURE__ */ h("span", { children: e })
+        ] })
       }
     );
   }
 }
-o(D, "symbols", [
-  ["☐", b.Neutral],
-  ["✓", b.Prefer]
-]), o(D, "defaultSemanticState", b.Neutral), o(D, "hostName", "checkbox"), o(D, "standaloneHostName", "check-box"), o(D, "baseStyles", [
-  ["&", ["inputline"]],
-  ['& > [role="checkbox"]', ["input", "inputline"]]
-]), o(D, "css", S`
-        & > [role="checkbox"] {
+a(q, "symbols", [
+  ["☐", y.Neutral],
+  ["✓", y.Prefer]
+]), a(q, "defaultSemanticState", y.Neutral), a(q, "hostName", "check-box"), a(q, "standaloneHostName", "check-box"), a(q, "css", x`
+        & {
+            display: inline-block;
+        }
+
+        & > label {
             display: inline-flex;
             align-items: center;
             gap: 0.35em;
-            width: auto;
-            font-family: inherit;
+            cursor: pointer;
         }
 
-        & .inputshell {
+        &[data-disabled] > label {
+            cursor: not-allowed;
+        }
+
+        & input[type="checkbox"] {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0 0 0 0);
+            white-space: nowrap;
+            border: 0;
+            font: inherit;
+            font-size: var(--ui-font-size, inherit);
+        }
+
+        & input[type="checkbox"] + .checkboxshell {
+            position: relative;
             display: inline-grid;
             width: 1em;
             height: 1em;
+            flex: 0 0 1em;
+            overflow: hidden;
+            box-sizing: border-box;
             line-height: 1;
             place-items: center;
+            color: var(--input-color, var(--ui-text-color, currentColor));
+            background: var(--checkbox-box-background, var(--ui-input-bg, transparent));
+            border: var(--checkbox-box-border, var(--cbx-o-border, 1px solid currentColor));
+            border-radius: var(--cbx-border-radius, var(--radius-sm, 0.2rem));
+            font-family: inherit;
+            font-size: 1em;
+            user-select: none;
+        }
+
+        & input[type="checkbox"]:checked + .checkboxshell {
+            color: var(--checkbox-symbol-color, var(--selection-color, currentColor));
+            background: var(--checkbox-box-background-checked,
+                var(--selection-background, var(--ui-accent-color, Highlight)));
+        }
+
+        & input[type="checkbox"]:focus-visible + .checkboxshell {
+            outline: 2px solid var(--focus-color, var(--ui-accent-color, Highlight));
+            outline-offset: 1px;
+        }
+
+        & input[type="checkbox"]:disabled + .checkboxshell {
+            opacity: 0.6;
         }
     `);
-function bt(t) {
+function Bt(t) {
   if (!Array.isArray(t) || t.length === 0)
     throw new TypeError("Checkbox symbols must be a non-empty tuple array");
   for (const r of t)
     if (!Array.isArray(r) || r.length < 2)
       throw new TypeError("Checkbox symbols must be [symbol, state] tuples");
 }
-class U extends y {
+class Q extends g {
   constructor(e = {}) {
     super(e);
-    o(this, "optionsEmitter");
-    o(this, "optionStateEmitters", /* @__PURE__ */ new Map());
-    o(this, "staleOptionValues", /* @__PURE__ */ new Set());
-    o(this, "placementTimer", null);
-    this.optionsEmitter = St(e.options) ? e.options : null;
+    a(this, "optionsEmitter");
+    a(this, "optionStateEmitters", /* @__PURE__ */ new Map());
+    a(this, "staleOptionValues", /* @__PURE__ */ new Set());
+    a(this, "placementTimer", null);
+    this.optionsEmitter = Zt(e.options) ? e.options : null;
   }
   initialize() {
     this.optionsEmitter && this.watch(this.optionsEmitter);
   }
   render() {
-    var p, f, g;
+    var p, f, m;
     const e = ((p = this.optionsEmitter) == null ? void 0 : p.get()) ?? (Array.isArray(this.props.options) ? this.props.options : []);
     if (!Array.isArray(e))
       throw new TypeError("FilterPanel options must be an array or emitter of arrays");
-    const i = ((f = this.optionsEmitter) == null ? void 0 : f.getFetchState()) ?? k.Ready, s = (g = this.optionsEmitter) == null ? void 0 : g.getError(), n = $e(this.props.filters), a = this.props.filterModes ?? D.symbols, l = this.props.defaultSemanticState ?? b.Neutral, c = new Set(e.map(be));
+    const i = ((f = this.optionsEmitter) == null ? void 0 : f.getFetchState()) ?? k.Ready, s = (m = this.optionsEmitter) == null ? void 0 : m.getError(), n = Ye(this.props.filters), o = this.props.filterModes ?? q.symbols, l = this.props.defaultSemanticState ?? y.Neutral, c = new Set(e.map(Ae));
     this.staleOptionValues = new Set(
-      [...this.optionStateEmitters.keys()].filter((m) => !c.has(m))
+      [...this.optionStateEmitters.keys()].filter((b) => !c.has(b))
     );
-    const h = this.Host;
-    return i === k.Error ? /* @__PURE__ */ u(
-      h,
+    const u = this.Host;
+    return i === k.Error ? /* @__PURE__ */ h(
+      u,
       {
         className: R("panellike", E(this.props)),
         role: "alert",
         "data-state": "error",
-        children: It(s, "Unable to load filter options")
+        children: Xt(s, "Unable to load filter options")
       }
-    ) : (i === k.Initial || i === k.Loading) && e.length === 0 ? /* @__PURE__ */ u(
-      h,
+    ) : (i === k.Initial || i === k.Loading) && e.length === 0 ? /* @__PURE__ */ h(
+      u,
       {
         className: R("panellike", E(this.props)),
         role: "status",
         "data-state": "loading",
         children: "Loading filter options…"
       }
-    ) : /* @__PURE__ */ u(
-      h,
+    ) : /* @__PURE__ */ h(
+      u,
       {
         className: R("panellike", E(this.props)),
         role: "group",
         "aria-label": this.props.label ?? "Filter options",
-        children: e.length === 0 ? /* @__PURE__ */ u("span", { children: "No filter options" }) : e.map((m) => {
-          const I = be(m), v = yt(m), O = n.get(I) ?? l, C = this.optionEmitter(I, O);
-          return /* @__PURE__ */ u(
-            gt,
+        children: e.length === 0 ? /* @__PURE__ */ h("span", { children: "No filter options" }) : e.map((b) => {
+          const v = Ae(b), I = Wt(b), A = n.get(v) ?? l, N = this.optionEmitter(v, A);
+          return /* @__PURE__ */ h(
+            _t,
             {
-              label: v,
-              valueEmitter: C,
-              symbols: a,
-              onChange: (j, A) => {
+              label: I,
+              valueEmitter: N,
+              symbols: o,
+              onChange: (z, L) => {
                 var T, G;
-                A == null || A.stopPropagation();
-                const H = $e(this.props.filters);
-                j === b.Neutral ? H.delete(I) : H.set(I, j), (G = (T = this.props).onChange) == null || G.call(T, H, A);
+                L == null || L.stopPropagation();
+                const F = Ye(this.props.filters);
+                z === y.Neutral ? F.delete(v) : F.set(v, z), (G = (T = this.props).onChange) == null || G.call(T, F, L);
               }
             },
-            wt(I)
+            Gt(v)
           );
         })
       }
@@ -1204,7 +1308,7 @@ class U extends y {
     const s = this.optionStateEmitters.get(e);
     if (s != null)
       return s.get() !== i && s.set(i, "filter option synchronized"), s;
-    const n = new x(i, { owner: this, purpose: `filter option ${String(e)}` });
+    const n = new S(i, { owner: this, purpose: `filter option ${String(e)}` });
     return this.optionStateEmitters.set(e, n), n;
   }
   placeInsideViewport(e) {
@@ -1213,13 +1317,13 @@ class U extends y {
     if (i == null || i.innerHeight <= 0) return;
     const s = e.parentElement.getBoundingClientRect();
     e.style.removeProperty("max-height");
-    const n = e.getBoundingClientRect(), a = s.top, l = Math.max(0, i.innerHeight - s.bottom), c = n.height > l && a > l;
+    const n = e.getBoundingClientRect(), o = s.top, l = Math.max(0, i.innerHeight - s.bottom), c = n.height > l && o > l;
     c ? (e.dataset.placement = "above", e.style.insetBlockStart = `${Math.max(8, s.top - n.height)}px`) : (delete e.dataset.placement, e.style.insetBlockStart = `${s.bottom}px`), e.style.insetInlineEnd = `${Math.max(8, i.innerWidth - s.right)}px`;
-    const h = c ? a : l;
-    e.style.maxHeight = `${Math.max(48, h - 8)}px`;
+    const u = c ? o : l;
+    e.style.maxHeight = `${Math.max(48, u - 8)}px`;
   }
 }
-o(U, "dependencies", [D]), o(U, "hostName", "filter-panel"), o(U, "standaloneHostName", "filter-panel"), o(U, "css", S`
+a(Q, "dependencies", [q]), a(Q, "hostName", "filter-panel"), a(Q, "standaloneHostName", "filter-panel"), a(Q, "css", x`
         & {
             position: fixed;
             z-index: 1100;
@@ -1234,14 +1338,14 @@ o(U, "dependencies", [D]), o(U, "hostName", "filter-panel"), o(U, "standaloneHos
         }
 
     `);
-const gt = D;
-function $e(t) {
+const _t = q;
+function Ye(t) {
   if (t == null) return /* @__PURE__ */ new Map();
   if (t instanceof Map) return new Map(t);
   if (Array.isArray(t)) return new Map(t);
   throw new TypeError("FilterPanel filters must be a Map or tuple array");
 }
-function be(t) {
+function Ae(t) {
   if (typeof t == "string" || typeof t == "number") return t;
   if (t != null && typeof t == "object") {
     const r = Reflect.get(t, "value");
@@ -1249,30 +1353,30 @@ function be(t) {
   }
   throw new TypeError("Filter options must be strings, numbers, or value/label objects");
 }
-function yt(t) {
+function Wt(t) {
   if (t != null && typeof t == "object") {
     const r = Reflect.get(t, "label");
-    if (r != null) return Et(r) ? r : String(r);
+    if (r != null) return Jt(r) ? r : String(r);
   }
-  return String(be(t));
+  return String(Ae(t));
 }
-function wt(t) {
+function Gt(t) {
   return `${typeof t}:${String(t)}`;
 }
-function Et(t) {
+function Jt(t) {
   return typeof t == "string" || typeof t == "number";
 }
-function St(t) {
+function Zt(t) {
   return t != null && (typeof t == "object" || typeof t == "function") && typeof Reflect.get(t, "get") == "function" && typeof Reflect.get(t, "subscribe") == "function";
 }
-function It(t, r) {
+function Xt(t, r) {
   return t instanceof Error ? t.message : t == null ? r : String(t);
 }
-class J extends y {
+class Y extends g {
   constructor() {
     super(...arguments);
-    o(this, "filterVisible", !1);
-    o(this, "onGlobalClick", (e) => {
+    a(this, "filterVisible", !1);
+    a(this, "onGlobalClick", (e) => {
       this.filterVisible && this.dom instanceof Node && e.target instanceof Node && !this.dom.contains(e.target) && (this.filterVisible = !1, this.update());
     });
   }
@@ -1289,22 +1393,22 @@ class J extends y {
     e.stopPropagation(), this.filterVisible = !this.filterVisible, this.update();
   }
   updateFilters(e, i) {
-    var n, a;
+    var n, o;
     const s = { ...this.props.filtersEmitter.get() };
-    e.size === 0 ? delete s[this.props.field] : s[this.props.field] = [...e.entries()], this.props.filtersEmitter.set(s, "table filters changed"), (a = (n = this.props).onFilterChange) == null || a.call(n, s, i);
+    e.size === 0 ? delete s[this.props.field] : s[this.props.field] = [...e.entries()], this.props.filtersEmitter.set(s, "table filters changed"), (o = (n = this.props).onFilterChange) == null || o.call(n, s, i);
   }
   render() {
     const e = this.props.sortEmitter.get(), i = (e == null ? void 0 : e.field) === this.props.field ? e.direction : null, s = new Map(
-      (this.props.filtersEmitter.get()[this.props.field] ?? []).filter(kt)
-    ), n = this.props.label ?? String(this.props.field), a = `Filter ${String(n)}`;
+      (this.props.filtersEmitter.get()[this.props.field] ?? []).filter(Yt)
+    ), n = this.props.label ?? String(this.props.field), o = `Filter ${String(n)}`;
     let l = null;
-    return this.filterVisible && this.props.filterOptions != null && (l = /* @__PURE__ */ u(
-      U,
+    return this.filterVisible && this.props.filterOptions != null && (l = /* @__PURE__ */ h(
+      Q,
       {
-        label: a,
+        label: o,
         options: this.props.filterOptions,
         filters: s,
-        onChange: (c, h) => this.updateFilters(c, h),
+        onChange: (c, u) => this.updateFilters(c, u),
         ...this.props.filterModes == null ? {} : { filterModes: this.props.filterModes },
         ...this.props.defaultSemanticState == null ? {} : { defaultSemanticState: this.props.defaultSemanticState }
       },
@@ -1328,13 +1432,13 @@ class J extends y {
                 i === "asc" ? " ▲" : i === "desc" ? " ▼" : ""
               ]
             }
-          ) : /* @__PURE__ */ u("span", { children: n }),
-          this.props.filterOptions == null ? null : /* @__PURE__ */ u(
+          ) : /* @__PURE__ */ h("span", { children: n }),
+          this.props.filterOptions == null ? null : /* @__PURE__ */ h(
             "button",
             {
               type: "button",
               "data-part": "filter-toggle",
-              "aria-label": a,
+              "aria-label": o,
               "aria-expanded": String(this.filterVisible),
               onClick: (c) => this.toggleFilterPanel(c),
               children: "Filter"
@@ -1346,11 +1450,11 @@ class J extends y {
     );
   }
 }
-o(J, "dependencies", [U]), o(J, "baseStyles", [
+a(Y, "dependencies", [Q]), a(Y, "baseStyles", [
   ["th[aria-sort]", "noselect"],
   ['th[aria-sort] > [data-part="sort"]', ["uiline", "button"]],
   ['th[aria-sort] > [data-part="filter-toggle"]', ["uiline", "button"]]
-]), o(J, "css", S`
+]), a(Y, "css", x`
         th[aria-sort] {
             position: relative;
             text-align: start;
@@ -1367,13 +1471,13 @@ o(J, "dependencies", [U]), o(J, "baseStyles", [
             font-size: 0.75em;
         }
     `);
-function kt(t) {
+function Yt(t) {
   return typeof t[0] == "string" || typeof t[0] == "number";
 }
-class ge extends y {
+class Ne extends g {
   render() {
-    return /* @__PURE__ */ u("thead", { "data-fray-component": "table-header", children: /* @__PURE__ */ u("tr", { children: this.props.columns.map((r) => /* @__PURE__ */ u(
-      J,
+    return /* @__PURE__ */ h("thead", { "data-fray-component": "table-header", children: /* @__PURE__ */ h("tr", { children: this.props.columns.map((r) => /* @__PURE__ */ h(
+      Y,
       {
         field: r.field,
         sortEmitter: this.props.sortEmitter,
@@ -1389,124 +1493,124 @@ class ge extends y {
     )) }) });
   }
 }
-o(ge, "dependencies", [J]);
-const xt = {
-  [b.Neutral]: "☐",
-  [b.Prefer]: "",
-  [b.Require]: "_",
-  [b.Deny]: "!"
+a(Ne, "dependencies", [Y]);
+const er = {
+  [y.Neutral]: "☐",
+  [y.Prefer]: "",
+  [y.Require]: "_",
+  [y.Deny]: "!"
 };
-function vt(t, { sort: r = null, filters: e = {} } = {}) {
-  Dt(t), r != null && (Qe(r), t.searchParams.set("sort", `${r.field}:${r.direction}`));
+function tr(t, { sort: r = null, filters: e = {} } = {}) {
+  or(t), r != null && (xt(r), t.searchParams.set("sort", `${r.field}:${r.direction}`));
   for (const [i, s] of Object.entries(e))
-    for (const [n, a] of s) {
-      if (!le(a))
-        throw new TypeError(`Unknown filter mode for ${i}: ${String(a)}`);
+    for (const [n, o] of s) {
+      if (!ye(o))
+        throw new TypeError(`Unknown filter mode for ${i}: ${String(o)}`);
       t.searchParams.append(
         "filter",
-        `${i}:${xt[a]}:${JSON.stringify(n)}`
+        `${i}:${er[o]}:${JSON.stringify(n)}`
       );
     }
   return t;
 }
-function Tt(t, r, e) {
+function rr(t, r, e) {
   if (!Array.isArray(t)) throw new TypeError("Local table data must be an array");
-  const i = t.filter((n) => Rt(n, e));
+  const i = t.filter((n) => ir(n, e));
   if (r == null) return i;
-  Qe(r);
+  xt(r);
   const s = r.direction === "asc" ? 1 : -1;
-  return [...i].sort((n, a) => $t(ye(n, r.field), ye(a, r.field)) * s);
+  return [...i].sort((n, o) => nr(qe(n, r.field), qe(o, r.field)) * s);
 }
-function Rt(t, r) {
+function ir(t, r) {
   for (const [e, i] of Object.entries(r)) {
-    const s = ye(t, e);
-    if (i.filter(([, c]) => c === b.Deny).some(([c]) => Object.is(c, s))) return !1;
-    const a = i.filter(([, c]) => c === b.Require);
-    if (a.length > 0 && !a.some(([c]) => Object.is(c, s))) return !1;
-    const l = i.filter(([, c]) => c === b.Prefer);
+    const s = qe(t, e);
+    if (i.filter(([, c]) => c === y.Deny).some(([c]) => Object.is(c, s))) return !1;
+    const o = i.filter(([, c]) => c === y.Require);
+    if (o.length > 0 && !o.some(([c]) => Object.is(c, s))) return !1;
+    const l = i.filter(([, c]) => c === y.Prefer);
     if (l.length > 0 && !l.some(([c]) => Object.is(c, s))) return !1;
   }
   return !0;
 }
-function Qe(t) {
-  if (t == null || typeof t != "object" || typeof Reflect.get(t, "field") != "string" || !Nt(Reflect.get(t, "direction")))
+function xt(t) {
+  if (t == null || typeof t != "object" || typeof Reflect.get(t, "field") != "string" || !sr(Reflect.get(t, "direction")))
     throw new TypeError("Table sort must contain a field and asc/desc direction");
 }
-function Nt(t) {
+function sr(t) {
   return t === "asc" || t === "desc";
 }
-function $t(t, r) {
+function nr(t, r) {
   return Object.is(t, r) ? 0 : t == null ? -1 : r == null ? 1 : typeof t == "number" && typeof r == "number" ? t - r : String(t).localeCompare(String(r));
 }
-function ye(t, r) {
+function qe(t, r) {
   if (!(t == null || typeof t != "object" && typeof t != "function"))
     return Reflect.get(t, r);
 }
-function Dt(t) {
+function or(t) {
   if (t == null || typeof t != "object" && typeof t != "function" || typeof Reflect.get(t, "toString") != "function")
     throw new TypeError("Table serializer requires a URL");
   const r = Reflect.get(t, "searchParams");
   if (r == null || typeof Reflect.get(r, "set") != "function" || typeof Reflect.get(r, "append") != "function")
     throw new TypeError("Table serializer requires URL search parameters");
 }
-function Ot(t) {
-  const r = ke(t), e = We(t.data) ? null : new x(t.data, {
+function ar(t) {
+  const r = Ve(t), e = vt(t.data) ? null : new S(t.data, {
     owner: t.owner,
     purpose: "local table data"
-  }), i = e ?? t.data, s = new ae(
+  }), i = e ?? t.data, s = new ge(
     [i, r.sortEmitter, r.filtersEmitter],
-    ([n, a, l]) => Tt(n, a, l),
+    ([n, o, l]) => rr(n, o, l),
     { owner: t.owner, purpose: "local table view" }
   );
-  return new Ie(s, r, () => {
+  return new Me(s, r, () => {
     s.dispose(), e == null || e.dispose();
   });
 }
-function cr(t) {
-  jt(t.query);
-  const r = ke(t);
-  return new Ie(t.query, r);
+function ri(t) {
+  ur(t.query);
+  const r = Ve(t);
+  return new Me(t.query, r);
 }
-function Ct(t) {
+function lr(t) {
   if (t.handler == null || typeof t.handler.fetch != "function")
     throw new TypeError("Table data-source handler must implement fetch");
-  const r = ke(t), e = new ve("sort", r.sortEmitter, {
+  const r = Ve(t), e = new Ge("sort", r.sortEmitter, {
     owner: t.owner,
     purpose: "table sort argument"
-  }), i = new ve("filters", r.filtersEmitter, {
+  }), i = new Ge("filters", r.filtersEmitter, {
     owner: t.owner,
     purpose: "table filters argument"
-  }), s = new Ze({
+  }), s = new $t({
     handler: t.handler,
     args: { sort: e, filters: i },
     owner: t.owner,
     purpose: "table query",
     keepPreviousValue: !0
   });
-  return new Ie(s, r, () => {
+  return new Me(s, r, () => {
     s.dispose(), e.dispose(), i.dispose();
   });
 }
-function Kt(t) {
+function cr(t) {
   if (typeof t.url != "string" || t.url.length === 0)
     throw new TypeError("REST table data source requires a URL");
   const r = {
     url: t.url,
-    serialize: t.serializeQuery ?? vt
+    serialize: t.serializeQuery ?? tr
   };
-  return t.baseUrl != null && (r.baseUrl = t.baseUrl), t.fetch != null && (r.fetch = t.fetch), Ct({
-    handler: new et(r),
+  return t.baseUrl != null && (r.baseUrl = t.baseUrl), t.fetch != null && (r.fetch = t.fetch), lr({
+    handler: new Ot(r),
     ...t.sortEmitter == null ? {} : { sortEmitter: t.sortEmitter },
     ...t.filtersEmitter == null ? {} : { filtersEmitter: t.filtersEmitter },
     ...t.owner === void 0 ? {} : { owner: t.owner }
   });
 }
-class Ie {
+class Me {
   constructor(r, e, i = null) {
-    o(this, "sortEmitter");
-    o(this, "filtersEmitter");
-    o(this, "retry");
-    o(this, "disposed", !1);
+    a(this, "sortEmitter");
+    a(this, "filtersEmitter");
+    a(this, "retry");
+    a(this, "disposed", !1);
     this.query = r, this.state = e, this.disposeQuery = i, this.sortEmitter = e.sortEmitter, this.filtersEmitter = e.filtersEmitter, r.retry != null && (this.retry = (s) => {
       var n;
       return (n = r.retry) == null ? void 0 : n.call(r, s);
@@ -1517,11 +1621,11 @@ class Ie {
     this.disposed || (this.disposed = !0, (r = this.disposeQuery) == null || r.call(this), (e = this.state.ownedSortEmitter) == null || e.dispose(), (i = this.state.ownedFiltersEmitter) == null || i.dispose());
   }
 }
-function ke(t) {
-  const r = t.sortEmitter == null ? new x(null, {
+function Ve(t) {
+  const r = t.sortEmitter == null ? new S(null, {
     owner: t.owner,
     purpose: "table sort"
-  }) : null, e = t.filtersEmitter == null ? new x({}, {
+  }) : null, e = t.filtersEmitter == null ? new S({}, {
     owner: t.owner,
     purpose: "table filters"
   }) : null;
@@ -1532,31 +1636,31 @@ function ke(t) {
     ownedFiltersEmitter: e
   };
 }
-function We(t) {
+function vt(t) {
   return t != null && (typeof t == "object" || typeof t == "function") && typeof Reflect.get(t, "get") == "function" && typeof Reflect.get(t, "subscribe") == "function" && typeof Reflect.get(t, "getFetchState") == "function" && typeof Reflect.get(t, "getError") == "function";
 }
-function jt(t) {
-  if (!We(t))
+function ur(t) {
+  if (!vt(t))
     throw new TypeError("Table query must be an emitter");
 }
-class X extends y {
+class ie extends g {
   constructor(e) {
     var i, s;
     super(e);
-    o(this, "columns");
-    o(this, "rowKey");
-    o(this, "sortEmitter");
-    o(this, "filtersEmitter");
-    o(this, "selectedItemsEmitter");
-    o(this, "selectedItemEmitter");
-    o(this, "selectionHandler");
-    o(this, "query", null);
-    o(this, "dataSource", null);
-    o(this, "suppliedDataSource");
-    o(this, "ownedSortEmitter");
-    o(this, "ownedFiltersEmitter");
-    o(this, "ownedDataSource", null);
-    Ft(e), this.columns = At(e.columns), this.rowKey = Ht(e.rowKey), this.suppliedDataSource = e.dataSource ?? null, this.ownedSortEmitter = this.suppliedDataSource == null ? new x(null, { owner: this, purpose: "table sort" }) : null, this.ownedFiltersEmitter = this.suppliedDataSource == null ? new x({}, { owner: this, purpose: "table filters" }) : null, this.sortEmitter = ((i = this.suppliedDataSource) == null ? void 0 : i.sortEmitter) ?? this.ownedSortEmitter, this.filtersEmitter = ((s = this.suppliedDataSource) == null ? void 0 : s.filtersEmitter) ?? this.ownedFiltersEmitter, this.selectionHandler = e.multiSelect === !0 ? se({
+    a(this, "columns");
+    a(this, "rowKey");
+    a(this, "sortEmitter");
+    a(this, "filtersEmitter");
+    a(this, "selectedItemsEmitter");
+    a(this, "selectedItemEmitter");
+    a(this, "selectionHandler");
+    a(this, "query", null);
+    a(this, "dataSource", null);
+    a(this, "suppliedDataSource");
+    a(this, "ownedSortEmitter");
+    a(this, "ownedFiltersEmitter");
+    a(this, "ownedDataSource", null);
+    hr(e), this.columns = dr(e.columns), this.rowKey = pr(e.rowKey), this.suppliedDataSource = e.dataSource ?? null, this.ownedSortEmitter = this.suppliedDataSource == null ? new S(null, { owner: this, purpose: "table sort" }) : null, this.ownedFiltersEmitter = this.suppliedDataSource == null ? new S({}, { owner: this, purpose: "table filters" }) : null, this.sortEmitter = ((i = this.suppliedDataSource) == null ? void 0 : i.sortEmitter) ?? this.ownedSortEmitter, this.filtersEmitter = ((s = this.suppliedDataSource) == null ? void 0 : s.filtersEmitter) ?? this.ownedFiltersEmitter, this.selectionHandler = e.multiSelect === !0 ? pe({
       owner: this,
       multiSelect: !0,
       ...e.selectedItemsEmitter == null ? {} : { selectedItemsEmitter: e.selectedItemsEmitter },
@@ -1565,7 +1669,7 @@ class X extends y {
         return ((n = this.query) == null ? void 0 : n.get()) ?? [];
       },
       getKey: this.rowKey
-    }) : se({
+    }) : pe({
       owner: this,
       ...e.selectedItemEmitter == null ? {} : { selectedItemEmitter: e.selectedItemEmitter },
       getItems: () => {
@@ -1573,15 +1677,15 @@ class X extends y {
         return ((n = this.query) == null ? void 0 : n.get()) ?? [];
       },
       getKey: this.rowKey
-    }), this.selectedItemsEmitter = this.selectionHandler.selectedItemsEmitter, this.selectedItemEmitter = this.selectionHandler instanceof Ee ? this.selectionHandler.selectedItemEmitter : null;
+    }), this.selectedItemsEmitter = this.selectionHandler.selectedItemsEmitter, this.selectedItemEmitter = this.selectionHandler instanceof Fe ? this.selectionHandler.selectedItemEmitter : null;
   }
   initialize() {
-    this.suppliedDataSource != null ? this.dataSource = this.suppliedDataSource : this.props.rest != null ? (this.ownedDataSource = Kt({
+    this.suppliedDataSource != null ? this.dataSource = this.suppliedDataSource : this.props.rest != null ? (this.ownedDataSource = cr({
       ...this.props.rest,
       sortEmitter: this.sortEmitter,
       filtersEmitter: this.filtersEmitter,
       owner: this
-    }), this.dataSource = this.ownedDataSource) : (this.ownedDataSource = Ot({
+    }), this.dataSource = this.ownedDataSource) : (this.ownedDataSource = ar({
       data: this.props.data ?? [],
       sortEmitter: this.sortEmitter,
       filtersEmitter: this.filtersEmitter,
@@ -1589,11 +1693,11 @@ class X extends y {
     }), this.dataSource = this.ownedDataSource), this.query = this.dataSource.query, this.watch(this.query, this.selectedItemsEmitter);
   }
   render() {
-    var c, h, p, f;
+    var c, u, p, f;
     const e = ((c = this.query) == null ? void 0 : c.get()) ?? [];
     if (!Array.isArray(e)) throw new TypeError("DataTable query value must be an array");
-    const i = ((h = this.query) == null ? void 0 : h.getFetchState()) ?? k.Initial, s = (p = this.query) == null ? void 0 : p.getError(), n = i === k.Initial || i === k.Loading, a = new Set(
-      this.selectedItemsEmitter.get().map((g, m) => this.rowKey(g, m))
+    const i = ((u = this.query) == null ? void 0 : u.getFetchState()) ?? k.Initial, s = (p = this.query) == null ? void 0 : p.getError(), n = i === k.Initial || i === k.Loading, o = new Set(
+      this.selectedItemsEmitter.get().map((m, b) => this.rowKey(m, b))
     ), l = this.Host;
     return /* @__PURE__ */ w(
       l,
@@ -1602,25 +1706,25 @@ class X extends y {
         "data-loading": n ? "" : null,
         "data-error": i === k.Error ? "" : null,
         children: [
-          n ? /* @__PURE__ */ u("p", { role: "status", children: "Loading rows…" }) : null,
+          n ? /* @__PURE__ */ h("p", { role: "status", children: "Loading rows…" }) : null,
           i === k.Error ? /* @__PURE__ */ w("div", { role: "alert", children: [
-            /* @__PURE__ */ u("span", { children: zt(s, "Unable to load rows") }),
-            typeof ((f = this.dataSource) == null ? void 0 : f.retry) == "function" ? /* @__PURE__ */ u(
+            /* @__PURE__ */ h("span", { children: mr(s, "Unable to load rows") }),
+            typeof ((f = this.dataSource) == null ? void 0 : f.retry) == "function" ? /* @__PURE__ */ h(
               "button",
               {
                 type: "button",
                 onClick: () => {
-                  var g, m;
-                  return (m = (g = this.dataSource) == null ? void 0 : g.retry) == null ? void 0 : m.call(g, "table retry");
+                  var m, b;
+                  return (b = (m = this.dataSource) == null ? void 0 : m.retry) == null ? void 0 : b.call(m, "table retry");
                 },
                 children: "Retry"
               }
             ) : null
           ] }) : null,
           /* @__PURE__ */ w("table", { "aria-busy": n ? "true" : null, children: [
-            this.props.caption == null ? null : /* @__PURE__ */ u("caption", { children: this.props.caption }),
-            /* @__PURE__ */ u(
-              ge,
+            this.props.caption == null ? null : /* @__PURE__ */ h("caption", { children: this.props.caption }),
+            /* @__PURE__ */ h(
+              Ne,
               {
                 columns: this.columns,
                 sortEmitter: this.sortEmitter,
@@ -1631,32 +1735,32 @@ class X extends y {
               },
               "header"
             ),
-            /* @__PURE__ */ u("tbody", { children: e.length > 0 ? e.map((g, m) => this.renderRow(g, m, a)) : n ? this.renderPlaceholders() : i === k.Error ? null : /* @__PURE__ */ u("tr", { children: /* @__PURE__ */ u("td", { colSpan: this.columns.length, children: this.props.emptyMessage ?? "No rows" }) }, "empty") })
+            /* @__PURE__ */ h("tbody", { children: e.length > 0 ? e.map((m, b) => this.renderRow(m, b, o)) : n ? this.renderPlaceholders() : i === k.Error ? null : /* @__PURE__ */ h("tr", { children: /* @__PURE__ */ h("td", { colSpan: this.columns.length, children: this.props.emptyMessage ?? "No rows" }) }, "empty") })
           ] })
         ]
       }
     );
   }
   renderRow(e, i, s) {
-    const n = this.rowKey(e, i), a = s.has(n);
-    return /* @__PURE__ */ u(
+    const n = this.rowKey(e, i), o = s.has(n);
+    return /* @__PURE__ */ h(
       "tr",
       {
         "data-fray-selectable-row": "",
         "data-index": i,
-        "aria-selected": String(a),
+        "aria-selected": String(o),
         tabIndex: i === 0 ? 0 : -1,
-        children: this.columns.map((l) => /* @__PURE__ */ u("td", { children: l.render ? l.render(e, i) : Mt(e[l.field]) }, String(l.field)))
+        children: this.columns.map((l) => /* @__PURE__ */ h("td", { children: l.render ? l.render(e, i) : fr(e[l.field]) }, String(l.field)))
       },
       String(n)
     );
   }
   renderPlaceholders() {
     const e = this.props.placeholderCount ?? 5;
-    return Array.from({ length: e }, (i, s) => /* @__PURE__ */ u("tr", { children: this.columns.map((n, a) => /* @__PURE__ */ u("td", { children: /* @__PURE__ */ u(
-      M,
+    return Array.from({ length: e }, (i, s) => /* @__PURE__ */ h("tr", { children: this.columns.map((n, o) => /* @__PURE__ */ h("td", { children: /* @__PURE__ */ h(
+      H,
       {
-        width: 45 + (s + a) % 6 * 8
+        width: 45 + (s + o) % 6 * 8
       }
     ) }, String(n.field))) }, `placeholder-${s}`));
   }
@@ -1682,7 +1786,7 @@ class X extends y {
     this.selectionHandler.destroy(), (e = this.ownedDataSource) == null || e.dispose(), (i = this.ownedSortEmitter) == null || i.dispose(), (s = this.ownedFiltersEmitter) == null || s.dispose();
   }
 }
-o(X, "dependencies", [M, ge]), o(X, "hostName", "data-table"), o(X, "standaloneHostName", "data-table"), o(X, "css", S`
+a(ie, "dependencies", [H, Ne]), a(ie, "hostName", "data-table"), a(ie, "standaloneHostName", "data-table"), a(ie, "css", x`
         & {
             overflow: auto;
         }
@@ -1709,7 +1813,7 @@ o(X, "dependencies", [M, ge]), o(X, "hostName", "data-table"), o(X, "standaloneH
         }
 
     `);
-function At(t) {
+function dr(t) {
   if (!Array.isArray(t) || t.length === 0)
     throw new TypeError("DataTable columns must be a non-empty array");
   const r = /* @__PURE__ */ new Set();
@@ -1727,8 +1831,8 @@ function At(t) {
     return e;
   });
 }
-function Ft(t) {
-  var a, l;
+function hr(t) {
+  var o, l;
   const e = [
     "mode",
     "query",
@@ -1747,12 +1851,12 @@ function Ft(t) {
     throw new TypeError("DataTable accepts exactly one of data, dataSource, or rest");
   if (s) {
     const c = t.dataSource;
-    if (c == null || typeof c != "object" || c.query == null || typeof ((a = c.sortEmitter) == null ? void 0 : a.set) != "function" || typeof ((l = c.filtersEmitter) == null ? void 0 : l.set) != "function" || typeof c.dispose != "function")
+    if (c == null || typeof c != "object" || c.query == null || typeof ((o = c.sortEmitter) == null ? void 0 : o.set) != "function" || typeof ((l = c.filtersEmitter) == null ? void 0 : l.set) != "function" || typeof c.dispose != "function")
       throw new TypeError("DataTable dataSource must implement the table data-source contract");
   }
 }
-function Ht(t) {
-  if (t == null) return Se;
+function pr(t) {
+  if (t == null) return He;
   if (typeof t == "function") return t;
   if (typeof t == "string" && t.length > 0)
     return (r, e) => {
@@ -1763,18 +1867,18 @@ function Ht(t) {
     };
   throw new TypeError("DataTable rowKey must be a function or property name");
 }
-function Mt(t) {
+function fr(t) {
   return t == null || typeof t == "string" || typeof t == "number" ? t : String(t);
 }
-function zt(t, r) {
+function mr(t, r) {
   return t instanceof Error ? t.message : t == null ? r : String(t);
 }
-class Je extends y {
+class St extends g {
   render() {
     return this.props.children ?? [];
   }
 }
-function B(t) {
+function W(t) {
   if (!Array.isArray(t)) throw new TypeError("Tree nodes must be an array");
   const r = /* @__PURE__ */ new Set(), e = (i) => {
     for (const s of i) {
@@ -1788,21 +1892,21 @@ function B(t) {
   };
   e(t);
 }
-function dr(t, r) {
-  return B(t), xe(t, r);
+function ii(t, r) {
+  return W(t), Pe(t, r);
 }
-function ur(t, r, e = null) {
-  return new ae(
+function si(t, r, e = null) {
+  return new ge(
     [t, r],
-    ([i, s]) => (B(i), s == null ? null : xe(i, s)),
+    ([i, s]) => (W(i), s == null ? null : Pe(i, s)),
     { owner: e, purpose: "tree node projection" }
   );
 }
-function qt(t, r, e) {
-  if (B(t), typeof e != "function") throw new TypeError("Tree node update must be a function");
+function br(t, r, e) {
+  if (W(t), typeof e != "function") throw new TypeError("Tree node update must be a function");
   const i = (n) => {
-    for (let a = 0; a < n.length; a += 1) {
-      const l = n[a];
+    for (let o = 0; o < n.length; o += 1) {
+      const l = n[o];
       if (Object.is(l.id, r)) {
         const p = e(l);
         if (p == null || typeof p != "object")
@@ -1811,52 +1915,52 @@ function qt(t, r, e) {
           throw new Error("Tree node update cannot change the stable id");
         if (Object.is(p, l)) return n;
         const f = [...n];
-        return f[a] = p, f;
+        return f[o] = p, f;
       }
-      const c = l.children ?? [], h = i(c);
-      if (!Object.is(h, c)) {
+      const c = l.children ?? [], u = i(c);
+      if (!Object.is(u, c)) {
         const p = [...n];
-        return p[a] = { ...l, children: h }, p;
+        return p[o] = { ...l, children: u }, p;
       }
     }
     return n;
   }, s = i(t);
-  return Object.is(s, t) || B(s), s;
+  return Object.is(s, t) || W(s), s;
 }
-function hr(t, r, e, i = "tree node updated") {
-  const s = t.get(), n = qt(s, r, e);
+function ni(t, r, e, i = "tree node updated") {
+  const s = t.get(), n = br(s, r, e);
   return Object.is(n, s) ? !1 : t.set(n, i);
 }
-function xe(t, r) {
+function Pe(t, r) {
   for (const e of t) {
     if (Object.is(e.id, r)) return e;
-    const i = xe(e.children ?? [], r);
+    const i = Pe(e.children ?? [], r);
     if (i != null) return i;
   }
   return null;
 }
-class Z extends y {
+class se extends g {
   constructor(e) {
     super(e);
-    o(this, "nodesEmitter");
-    o(this, "selectedKeyEmitter");
-    o(this, "expandedKeysEmitter");
-    o(this, "ownedNodesEmitter");
-    o(this, "ownedSelectedEmitter");
-    o(this, "ownedExpandedEmitter");
-    o(this, "focusedKey", null);
-    o(this, "typeahead", "");
-    o(this, "typeaheadTimer", null);
-    if (Pt(e.nodes))
+    a(this, "nodesEmitter");
+    a(this, "selectedKeyEmitter");
+    a(this, "expandedKeysEmitter");
+    a(this, "ownedNodesEmitter");
+    a(this, "ownedSelectedEmitter");
+    a(this, "ownedExpandedEmitter");
+    a(this, "focusedKey", null);
+    a(this, "typeahead", "");
+    a(this, "typeaheadTimer", null);
+    if (Er(e.nodes))
       this.nodesEmitter = e.nodes, this.ownedNodesEmitter = null;
     else {
-      const i = e.nodes ?? _e(e.children);
-      this.ownedNodesEmitter = new x(i, {
+      const i = e.nodes ?? kt(e.children);
+      this.ownedNodesEmitter = new S(i, {
         owner: this,
         purpose: "tree nodes"
       }), this.nodesEmitter = this.ownedNodesEmitter;
     }
-    this.ownedSelectedEmitter = e.selectedKeyEmitter == null ? new x(null, { owner: this, purpose: "selected tree key" }) : null, this.selectedKeyEmitter = e.selectedKeyEmitter ?? this.ownedSelectedEmitter, this.ownedExpandedEmitter = e.expandedKeysEmitter == null ? new x([], { owner: this, purpose: "expanded tree keys" }) : null, this.expandedKeysEmitter = e.expandedKeysEmitter ?? this.ownedExpandedEmitter;
+    this.ownedSelectedEmitter = e.selectedKeyEmitter == null ? new S(null, { owner: this, purpose: "selected tree key" }) : null, this.selectedKeyEmitter = e.selectedKeyEmitter ?? this.ownedSelectedEmitter, this.ownedExpandedEmitter = e.expandedKeysEmitter == null ? new S([], { owner: this, purpose: "expanded tree keys" }) : null, this.expandedKeysEmitter = e.expandedKeysEmitter ?? this.ownedExpandedEmitter;
   }
   initialize() {
     this.reconcile(this.nodesEmitter.get()), this.watch(this.nodesEmitter, this.selectedKeyEmitter, this.expandedKeysEmitter), this.onCleanup(this.nodesEmitter.subscribe(({ value: e }) => this.reconcile(e), {
@@ -1865,46 +1969,46 @@ class Z extends y {
   }
   render() {
     const e = this.nodesEmitter.get();
-    B(e);
-    const i = new Set(this.expandedKeysEmitter.get()), s = De(e, i), n = this.selectedKeyEmitter.get(), a = s.find(({ node: c }) => Object.is(c.id, this.focusedKey)) ?? s.find(({ node: c }) => Object.is(c.id, n)) ?? s[0] ?? null;
-    this.focusedKey = (a == null ? void 0 : a.node.id) ?? null;
+    W(e);
+    const i = new Set(this.expandedKeysEmitter.get()), s = et(e, i), n = this.selectedKeyEmitter.get(), o = s.find(({ node: c }) => Object.is(c.id, this.focusedKey)) ?? s.find(({ node: c }) => Object.is(c.id, n)) ?? s[0] ?? null;
+    this.focusedKey = (o == null ? void 0 : o.node.id) ?? null;
     const l = this.Host;
-    return /* @__PURE__ */ u(l, { className: R("datacomponentlike", E(this.props)), children: s.length === 0 ? /* @__PURE__ */ u("p", { role: "status", children: "No tree items" }) : /* @__PURE__ */ u("div", { role: "tree", "aria-label": this.props.label, children: s.map((c, h) => {
-      var j, A, H;
-      const { node: p, depth: f, position: g, setSize: m } = c, I = (((j = p.children) == null ? void 0 : j.length) ?? 0) > 0, v = I && i.has(p.id), O = Object.is(p.id, n), C = ((H = (A = this.props).renderItem) == null ? void 0 : H.call(A, p, f)) ?? p.label;
+    return /* @__PURE__ */ h(l, { className: R("datacomponentlike", E(this.props)), children: s.length === 0 ? /* @__PURE__ */ h("p", { role: "status", children: "No tree items" }) : /* @__PURE__ */ h("div", { role: "tree", "aria-label": this.props.label, children: s.map((c, u) => {
+      var z, L, F;
+      const { node: p, depth: f, position: m, setSize: b } = c, v = (((z = p.children) == null ? void 0 : z.length) ?? 0) > 0, I = v && i.has(p.id), A = Object.is(p.id, n), N = ((F = (L = this.props).renderItem) == null ? void 0 : F.call(L, p, f)) ?? p.label;
       return /* @__PURE__ */ w(
         "div",
         {
           role: "treeitem",
-          "data-index": h,
+          "data-index": u,
           "data-depth": f,
           "aria-level": f + 1,
-          "aria-posinset": g,
-          "aria-setsize": m,
-          "aria-expanded": I ? String(v) : null,
-          "aria-selected": String(O),
-          tabIndex: Object.is(p.id, a == null ? void 0 : a.node.id) ? 0 : -1,
+          "aria-posinset": m,
+          "aria-setsize": b,
+          "aria-expanded": v ? String(I) : null,
+          "aria-selected": String(A),
+          tabIndex: Object.is(p.id, o == null ? void 0 : o.node.id) ? 0 : -1,
           style: { "--tree-depth": f },
           onClick: (T) => {
-            if (this.focusedKey = p.id, Bt(T.target) && I) {
+            if (this.focusedKey = p.id, xr(T.target) && v) {
               this.toggleExpanded(p.id), this.focusRow(p.id);
               return;
             }
             this.selectNode(p, T);
           },
           onFocus: () => this.focusedKey = p.id,
-          onKeyDown: (T) => this.handleKeyDown(T, h, s),
+          onKeyDown: (T) => this.handleKeyDown(T, u, s),
           children: [
-            /* @__PURE__ */ u(
+            /* @__PURE__ */ h(
               "span",
               {
                 "data-part": "expander",
-                "data-expandable": I ? "" : null,
+                "data-expandable": v ? "" : null,
                 "aria-hidden": "true",
-                children: I ? v ? "▾" : "▸" : "•"
+                children: v ? I ? "▾" : "▸" : "•"
               }
             ),
-            /* @__PURE__ */ u("span", { "data-part": "label", children: C })
+            /* @__PURE__ */ h("span", { "data-part": "label", children: N })
           ]
         },
         p.id
@@ -1916,14 +2020,14 @@ class Z extends y {
     this.typeaheadTimer != null && clearTimeout(this.typeaheadTimer), (e = this.ownedNodesEmitter) == null || e.dispose(), (i = this.ownedSelectedEmitter) == null || i.dispose(), (s = this.ownedExpandedEmitter) == null || s.dispose();
   }
   reconcile(e) {
-    B(e);
-    const i = new Set(Lt(e).map(({ node: l }) => l.id)), s = this.selectedKeyEmitter.get();
+    W(e);
+    const i = new Set(gr(e).map(({ node: l }) => l.id)), s = this.selectedKeyEmitter.get();
     this.ownedSelectedEmitter != null && s != null && !i.has(s) && this.selectedKeyEmitter.set(null, "selected tree item removed");
-    const n = this.expandedKeysEmitter.get(), a = n.filter((l) => i.has(l));
-    this.ownedExpandedEmitter != null && !Ut(n, a) && this.expandedKeysEmitter.set(a, "removed tree expansions reconciled"), this.focusedKey != null && !i.has(this.focusedKey) && (this.focusedKey = null);
+    const n = this.expandedKeysEmitter.get(), o = n.filter((l) => i.has(l));
+    this.ownedExpandedEmitter != null && !wr(n, o) && this.expandedKeysEmitter.set(o, "removed tree expansions reconciled"), this.focusedKey != null && !i.has(this.focusedKey) && (this.focusedKey = null);
   }
   selectNode(e, i) {
-    this.selectedKeyEmitter.set(e.id, "tree item selected"), K(this.props.onSelect, e, i), this.focusRow(e.id);
+    this.selectedKeyEmitter.set(e.id, "tree item selected"), C(this.props.onSelect, e, i), this.focusRow(e.id);
   }
   toggleExpanded(e) {
     const i = this.expandedKeysEmitter.get(), s = i.some((n) => Object.is(n, e));
@@ -1933,18 +2037,18 @@ class Z extends y {
     );
   }
   handleKeyDown(e, i, s) {
-    var a, l, c, h;
+    var o, l, c, u;
     const n = s[i];
     if (n != null) {
-      if (e.key === "ArrowDown") return this.move(e, (a = s[i + 1]) == null ? void 0 : a.node.id);
+      if (e.key === "ArrowDown") return this.move(e, (o = s[i + 1]) == null ? void 0 : o.node.id);
       if (e.key === "ArrowUp") return this.move(e, (l = s[i - 1]) == null ? void 0 : l.node.id);
       if (e.key === "Home") return this.move(e, (c = s[0]) == null ? void 0 : c.node.id);
-      if (e.key === "End") return this.move(e, (h = s.at(-1)) == null ? void 0 : h.node.id);
+      if (e.key === "End") return this.move(e, (u = s.at(-1)) == null ? void 0 : u.node.id);
       if (e.key === "ArrowRight") {
         e.preventDefault();
         const p = n.node.children ?? [];
         if (p.length === 0) return;
-        this.expandedKeysEmitter.get().some((g) => Object.is(g, n.node.id)) ? this.focusRow(p[0].id) : this.toggleExpanded(n.node.id);
+        this.expandedKeysEmitter.get().some((m) => Object.is(m, n.node.id)) ? this.focusRow(p[0].id) : this.toggleExpanded(n.node.id);
         return;
       }
       if (e.key === "ArrowLeft") {
@@ -1966,10 +2070,10 @@ class Z extends y {
     this.focusedKey = e;
     const i = this.dom instanceof Element ? [...this.dom.querySelectorAll('[role="treeitem"]')] : [];
     for (const n of i) {
-      const a = Number(n.dataset.index), l = De(
+      const o = Number(n.dataset.index), l = et(
         this.nodesEmitter.get(),
         new Set(this.expandedKeysEmitter.get())
-      ), c = Object.is((s = l[a]) == null ? void 0 : s.node.id, e);
+      ), c = Object.is((s = l[o]) == null ? void 0 : s.node.id, e);
       n.tabIndex = c ? 0 : -1, c && n.focus();
     }
   }
@@ -1977,11 +2081,11 @@ class Z extends y {
     e.preventDefault(), this.typeaheadTimer != null && clearTimeout(this.typeaheadTimer), this.typeahead += e.key.toLocaleLowerCase(), this.typeaheadTimer = setTimeout(() => {
       this.typeahead = "", this.typeaheadTimer = null;
     }, 650);
-    const a = [...i.slice(s + 1), ...i.slice(0, s + 1)].find(({ node: l }) => Vt(l).toLocaleLowerCase().startsWith(this.typeahead));
-    a != null && this.focusRow(a.node.id);
+    const o = [...i.slice(s + 1), ...i.slice(0, s + 1)].find(({ node: l }) => yr(l).toLocaleLowerCase().startsWith(this.typeahead));
+    o != null && this.focusRow(o.node.id);
   }
 }
-o(Z, "dependencies", [Je]), o(Z, "hostName", "tree-view"), o(Z, "standaloneHostName", "tree-view"), o(Z, "css", S`
+a(se, "dependencies", [St]), a(se, "hostName", "tree-view"), a(se, "standaloneHostName", "tree-view"), a(se, "css", x`
         & {
             display: flex;
             flex-direction: column;
@@ -2032,50 +2136,50 @@ o(Z, "dependencies", [Je]), o(Z, "hostName", "tree-view"), o(Z, "standaloneHostN
             }
         }
     `);
-function _e(t) {
-  return (Array.isArray(t) ? t : t == null ? [] : [t]).filter((e) => ie(e) && e.type === Je).map((e) => {
-    if (!ie(e)) throw new TypeError("TreeView children must be TreeItem nodes");
+function kt(t) {
+  return (Array.isArray(t) ? t : t == null ? [] : [t]).filter((e) => de(e) && e.type === St).map((e) => {
+    if (!de(e)) throw new TypeError("TreeView children must be TreeItem nodes");
     const i = e.props;
     return {
       id: i.id,
       label: i.label,
       ...i.textValue == null ? {} : { textValue: i.textValue },
       ...i.value === void 0 ? {} : { value: i.value },
-      children: _e(i.children)
+      children: kt(i.children)
     };
   });
 }
-function De(t, r) {
-  const e = [], i = (s, n, a) => {
+function et(t, r) {
+  const e = [], i = (s, n, o) => {
     s.forEach((l, c) => {
-      var h;
-      e.push({ node: l, depth: n, parentId: a, position: c + 1, setSize: s.length }), (((h = l.children) == null ? void 0 : h.length) ?? 0) > 0 && r.has(l.id) && i(l.children ?? [], n + 1, l.id);
+      var u;
+      e.push({ node: l, depth: n, parentId: o, position: c + 1, setSize: s.length }), (((u = l.children) == null ? void 0 : u.length) ?? 0) > 0 && r.has(l.id) && i(l.children ?? [], n + 1, l.id);
     });
   };
   return i(t, 0, null), e;
 }
-function Lt(t) {
-  const r = /* @__PURE__ */ new Set(), e = [], i = (s, n, a) => {
+function gr(t) {
+  const r = /* @__PURE__ */ new Set(), e = [], i = (s, n, o) => {
     s.forEach((l, c) => {
       if (r.has(l.id)) throw new Error(`Duplicate tree item id: ${String(l.id)}`);
-      r.add(l.id), e.push({ node: l, depth: n, parentId: a, position: c + 1, setSize: s.length }), i(l.children ?? [], n + 1, l.id);
+      r.add(l.id), e.push({ node: l, depth: n, parentId: o, position: c + 1, setSize: s.length }), i(l.children ?? [], n + 1, l.id);
     });
   };
   return i(t, 0, null), e;
 }
-function Vt(t) {
+function yr(t) {
   return t.textValue != null ? t.textValue : typeof t.label == "string" || typeof t.label == "number" ? String(t.label) : String(t.id);
 }
-function Ut(t, r) {
+function wr(t, r) {
   return t.length === r.length && t.every((e, i) => Object.is(e, r[i]));
 }
-function Pt(t) {
+function Er(t) {
   return t != null && (typeof t == "object" || typeof t == "function") && typeof Reflect.get(t, "get") == "function" && typeof Reflect.get(t, "subscribe") == "function";
 }
-function Bt(t) {
+function xr(t) {
   return t instanceof Element && t.closest('[data-part="expander"]') != null;
 }
-class ne extends y {
+class fe extends g {
   constructor(r = {}) {
     if (super(r), r.onClick != null && typeof r.onClick != "function")
       throw new TypeError("Button onClick must be a function");
@@ -2087,55 +2191,55 @@ class ne extends y {
       type: i = "button",
       disabled: s = !1,
       pressed: n,
-      busy: a = !1,
+      busy: o = !1,
       busyLabel: l,
       id: c,
-      name: h,
+      name: u,
       value: p,
       title: f,
-      ariaLabel: g,
-      onClick: m
-    } = this.props, v = (Array.isArray(r) ? r.length > 0 : r != null && typeof r != "boolean") ? r : e ?? "", O = a ? l ?? v : v, C = s || a;
-    return /* @__PURE__ */ u(
+      ariaLabel: m,
+      onClick: b
+    } = this.props, I = (Array.isArray(r) ? r.length > 0 : r != null && typeof r != "boolean") ? r : e ?? "", A = o ? l ?? I : I, N = s || o;
+    return /* @__PURE__ */ h(
       "button",
       {
         id: c,
-        name: h,
+        name: u,
         value: p == null ? void 0 : String(p),
         title: f,
         type: i,
-        disabled: C,
+        disabled: N,
         className: E(this.props) || void 0,
         "data-fray-component": "button",
-        "aria-label": g,
+        "aria-label": m,
         "aria-pressed": n == null ? null : String(!!n),
-        "aria-busy": a ? "true" : null,
-        onClick: (j) => {
-          C || K(m, j);
+        "aria-busy": o ? "true" : null,
+        onClick: (z) => {
+          N || C(b, z);
         },
-        children: O
+        children: A
       }
     );
   }
 }
-o(ne, "baseStyles", [
+a(fe, "baseStyles", [
   ["button", ["uiline", "button"]]
-]), o(ne, "css", S`
+]), a(fe, "css", x`
         button {
             font-family: inherit;
         }
     `);
-class Oe extends y {
+class tt extends g {
   constructor(e) {
     super(e);
-    o(this, "openEmitter");
-    o(this, "dialogId");
-    o(this, "titleId");
-    o(this, "descriptionId");
-    o(this, "dialogElement", null);
-    o(this, "restoreFocusTo", null);
-    o(this, "synchronizedOpen", !1);
-    this.openEmitter = z(this, e, !1, "dialog open state"), this.dialogId = F("dialog", e.id), this.titleId = `${this.dialogId}-title`, this.descriptionId = `${this.dialogId}-description`;
+    a(this, "openEmitter");
+    a(this, "dialogId");
+    a(this, "titleId");
+    a(this, "descriptionId");
+    a(this, "dialogElement", null);
+    a(this, "restoreFocusTo", null);
+    a(this, "synchronizedOpen", !1);
+    this.openEmitter = K(this, e, !1, "dialog open state"), this.dialogId = j("dialog", e.id), this.titleId = `${this.dialogId}-title`, this.descriptionId = `${this.dialogId}-description`;
   }
   initialize() {
     this.watch(this.openEmitter);
@@ -2146,7 +2250,7 @@ class Oe extends y {
       description: i,
       actions: s,
       closeLabel: n = "Close",
-      showCloseButton: a = !0,
+      showCloseButton: o = !0,
       children: l = []
     } = this.props;
     return /* @__PURE__ */ w(
@@ -2160,13 +2264,13 @@ class Oe extends y {
         "aria-modal": "true",
         ref: (c) => this.dialogElement = c,
         children: [
-          /* @__PURE__ */ u("header", { children: /* @__PURE__ */ u("h2", { id: this.titleId, children: e }) }),
-          i == null ? null : /* @__PURE__ */ u("p", { id: this.descriptionId, children: i }),
-          /* @__PURE__ */ u("div", { "data-part": "content", children: l }),
-          s == null && !a ? null : /* @__PURE__ */ w("footer", { children: [
+          /* @__PURE__ */ h("header", { children: /* @__PURE__ */ h("h2", { id: this.titleId, children: e }) }),
+          i == null ? null : /* @__PURE__ */ h("p", { id: this.descriptionId, children: i }),
+          /* @__PURE__ */ h("div", { "data-part": "content", children: l }),
+          s == null && !o ? null : /* @__PURE__ */ w("footer", { children: [
             s,
-            a ? /* @__PURE__ */ u(
-              ne,
+            o ? /* @__PURE__ */ h(
+              fe,
               {
                 label: n,
                 onClick: () => this.requestClose()
@@ -2204,7 +2308,7 @@ class Oe extends y {
     const i = this.openEmitter.get();
     if (i && !this.synchronizedOpen) {
       const s = document.activeElement;
-      this.restoreFocusTo = s instanceof HTMLElement ? s : null, Gt(e), this.synchronizedOpen = !0, Qt(e, this.props.initialFocusRef);
+      this.restoreFocusTo = s instanceof HTMLElement ? s : null, vr(e), this.synchronizedOpen = !0, Sr(e, this.props.initialFocusRef);
       return;
     }
     !i && this.synchronizedOpen && (e.open && typeof e.close == "function" ? e.close() : e.removeAttribute("open"), this.finishClose());
@@ -2213,10 +2317,10 @@ class Oe extends y {
     if (!this.synchronizedOpen && this.restoreFocusTo == null) return;
     this.synchronizedOpen = !1;
     const e = this.restoreFocusTo;
-    this.restoreFocusTo = null, (e == null ? void 0 : e.isConnected) === !0 && e.focus(), K(this.props.onClose);
+    this.restoreFocusTo = null, (e == null ? void 0 : e.isConnected) === !0 && e.focus(), C(this.props.onClose);
   }
 }
-o(Oe, "dependencies", [ne]), o(Oe, "css", S`
+a(tt, "dependencies", [fe]), a(tt, "css", x`
         dialog {
             width: min(38rem, calc(100vw - 2rem));
             max-height: min(42rem, calc(100dvh - 2rem));
@@ -2251,7 +2355,7 @@ o(Oe, "dependencies", [ne]), o(Oe, "css", S`
             }
         }
     `);
-function Gt(t) {
+function vr(t) {
   if (!t.open) {
     if (typeof t.showModal == "function") {
       t.showModal();
@@ -2260,52 +2364,52 @@ function Gt(t) {
     t.setAttribute("open", "");
   }
 }
-function Qt(t, r) {
+function Sr(t, r) {
   const i = (r == null || typeof r == "function" ? null : r.current) ?? t.querySelector(
     '[autofocus], button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
   );
   i == null || i.focus();
 }
-const q = class q extends D {
+const M = class M extends q {
   constructor(r = {}) {
-    super({ ...r, symbols: q.symbols });
+    super({ ...r, symbols: M.symbols });
   }
 };
-o(q, "hostName", "quad-checkbox"), o(q, "standaloneHostName", "quad-checkbox"), o(q, "symbols", [
-  ["✖", b.Deny],
-  ["☐", b.Neutral],
-  ["✓", b.Prefer],
-  ["+", b.Require]
-]), o(q, "defaultSemanticState", b.Neutral);
-let Ce = q;
-const L = class L extends D {
+a(M, "hostName", "quad-checkbox"), a(M, "standaloneHostName", "quad-checkbox"), a(M, "symbols", [
+  ["✖", y.Deny],
+  ["☐", y.Neutral],
+  ["✓", y.Prefer],
+  ["+", y.Require]
+]), a(M, "defaultSemanticState", y.Neutral);
+let rt = M;
+const V = class V extends q {
   constructor(r = {}) {
-    super({ ...r, symbols: L.symbols });
+    super({ ...r, symbols: V.symbols });
   }
 };
-o(L, "hostName", "tri-checkbox"), o(L, "standaloneHostName", "tri-checkbox"), o(L, "symbols", [
-  ["✖", b.Deny],
-  ["☐", b.Neutral],
-  ["✓", b.Prefer]
-]), o(L, "defaultSemanticState", b.Neutral);
-let Ke = L;
-class ee extends y {
+a(V, "hostName", "tri-checkbox"), a(V, "standaloneHostName", "tri-checkbox"), a(V, "symbols", [
+  ["✖", y.Deny],
+  ["☐", y.Neutral],
+  ["✓", y.Prefer]
+]), a(V, "defaultSemanticState", y.Neutral);
+let it = V;
+class ne extends g {
   constructor(e = {}) {
     var n;
     super(e);
-    o(this, "inputId");
-    o(this, "errorId");
-    o(this, "optionsEmitter");
-    o(this, "valueEmitter");
-    o(this, "ownsOptionsEmitter");
-    this.inputId = F("dropdown", e.id), this.errorId = `${this.inputId}-error`;
+    a(this, "inputId");
+    a(this, "errorId");
+    a(this, "optionsEmitter");
+    a(this, "valueEmitter");
+    a(this, "ownsOptionsEmitter");
+    this.inputId = j("dropdown", e.id), this.errorId = `${this.inputId}-error`;
     const i = e.options ?? [];
-    Wt(i) ? (this.optionsEmitter = i, this.ownsOptionsEmitter = !1) : (fe(i), this.optionsEmitter = new x(i, {
+    kr(i) ? (this.optionsEmitter = i, this.ownsOptionsEmitter = !1) : (he(i), this.optionsEmitter = new S(i, {
       owner: this,
       purpose: "dropdown options"
     }), this.ownsOptionsEmitter = !0);
     const s = ((n = this.optionsEmitter.get()[0]) == null ? void 0 : n.value) ?? "";
-    this.valueEmitter = z(this, e, s, "dropdown value");
+    this.valueEmitter = K(this, e, s, "dropdown value");
   }
   initialize() {
     this.watch(this.valueEmitter, this.optionsEmitter);
@@ -2316,22 +2420,22 @@ class ee extends y {
       name: i,
       disabled: s = !1,
       required: n = !1,
-      error: a = null,
+      error: o = null,
       placeholder: l = "Select…",
       ariaLabel: c,
-      onChange: h
+      onChange: u
     } = this.props, p = this.optionsEmitter.get() ?? [];
-    fe(p);
-    const f = this.valueEmitter.get(), g = this.Host;
+    he(p);
+    const f = this.valueEmitter.get(), m = this.Host;
     return /* @__PURE__ */ w(
-      g,
+      m,
       {
         className: R("selectshell", E(this.props)),
         "data-disabled": s ? "" : null,
         "data-required": n ? "" : null,
-        "data-error": a == null ? null : "",
+        "data-error": o == null ? null : "",
         children: [
-          e == null ? null : /* @__PURE__ */ u("label", { htmlFor: this.inputId, children: e }),
+          e == null ? null : /* @__PURE__ */ h("label", { htmlFor: this.inputId, children: e }),
           /* @__PURE__ */ w(
             "select",
             {
@@ -2341,37 +2445,37 @@ class ee extends y {
               disabled: s,
               required: n,
               "aria-label": e == null ? c : null,
-              "aria-invalid": a == null ? null : "true",
-              "aria-describedby": a == null ? null : this.errorId,
-              onChange: (m) => {
-                const I = Jt(m, "dropdown change"), v = p.find(({ value: C }) => String(C) === I), O = (v == null ? void 0 : v.value) ?? I;
-                this.valueEmitter.set(O, "dropdown selection"), K(h, O, m);
+              "aria-invalid": o == null ? null : "true",
+              "aria-describedby": o == null ? null : this.errorId,
+              onChange: (b) => {
+                const v = Ir(b, "dropdown change"), I = p.find(({ value: N }) => String(N) === v), A = (I == null ? void 0 : I.value) ?? v;
+                this.valueEmitter.set(A, "dropdown selection"), C(u, A, b);
               },
               children: [
-                f == null || f === "" ? /* @__PURE__ */ u("option", { value: "", disabled: n, selected: !0, children: l }) : null,
-                p.map((m) => {
-                  if (m == null || !Object.hasOwn(m, "value"))
+                f == null || f === "" ? /* @__PURE__ */ h("option", { value: "", disabled: n, selected: !0, children: l }) : null,
+                p.map((b) => {
+                  if (b == null || !Object.hasOwn(b, "value"))
                     throw new TypeError("Dropdown options require value and label fields");
-                  return /* @__PURE__ */ u(
+                  return /* @__PURE__ */ h(
                     "option",
                     {
-                      value: String(m.value),
-                      disabled: !!m.disabled,
-                      selected: Object.is(f, m.value),
-                      children: m.label ?? String(m.value)
+                      value: String(b.value),
+                      disabled: !!b.disabled,
+                      selected: Object.is(f, b.value),
+                      children: b.label ?? String(b.value)
                     },
-                    String(m.value)
+                    String(b.value)
                   );
                 })
               ]
             }
           ),
-          a == null ? null : /* @__PURE__ */ u(
+          o == null ? null : /* @__PURE__ */ h(
             "p",
             {
               id: this.errorId,
               role: "alert",
-              children: String(a)
+              children: String(o)
             }
           )
         ]
@@ -2379,30 +2483,216 @@ class ee extends y {
     );
   }
 }
-o(ee, "hostName", "dropdown"), o(ee, "standaloneHostName", "drop-down"), o(ee, "baseStyles", [
+a(ne, "hostName", "dropdown"), a(ne, "standaloneHostName", "drop-down"), a(ne, "baseStyles", [
   ["&", ["labeledinput", "inputline"]],
   ["& > select", ["input", "inputline"]]
-]), o(ee, "css", S`
+]), a(ne, "css", x`
         & {
             position: relative;
         }
     `);
-function Wt(t) {
+function kr(t) {
   return t != null && (typeof t == "object" || typeof t == "function") && typeof Reflect.get(t, "get") == "function" && typeof Reflect.get(t, "subscribe") == "function";
 }
-function Jt(t, r) {
+function Ir(t, r) {
   const e = t.currentTarget;
   if (e == null || typeof Reflect.get(e, "value") != "string")
     throw new TypeError(`${r} requires a value-bearing event target`);
   return Reflect.get(e, "value");
 }
-class te extends y {
+class ee extends g {
+  constructor(e = {}) {
+    super(e);
+    a(this, "inputId");
+    this.inputId = j("radio", e.id);
+  }
+  render() {
+    const {
+      label: e = this.props.value ?? "Option",
+      checked: i = !1,
+      disabled: s = !1,
+      required: n = !1
+    } = this.props, o = this.Host;
+    return /* @__PURE__ */ h(
+      o,
+      {
+        className: E(this.props) || null,
+        "data-disabled": s ? "" : null,
+        "data-required": n ? "" : null,
+        children: /* @__PURE__ */ w("label", { htmlFor: this.inputId, children: [
+          /* @__PURE__ */ h(
+            "input",
+            {
+              id: this.inputId,
+              type: "radio",
+              name: this.props.name,
+              value: this.props.value == null ? void 0 : String(this.props.value),
+              checked: i,
+              disabled: s,
+              required: n,
+              onChange: (l) => C(
+                this.props.onChange,
+                l.currentTarget.checked,
+                l
+              )
+            }
+          ),
+          /* @__PURE__ */ h("span", { className: "radioshell", "aria-hidden": "true" }),
+          /* @__PURE__ */ h("span", { children: e })
+        ] })
+      }
+    );
+  }
+}
+a(ee, "hostName", "radio-button"), a(ee, "standaloneHostName", "radio-button"), a(ee, "css", x`
+        & {
+            display: inline-block;
+        }
+
+        & > label {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.35em;
+            cursor: pointer;
+        }
+
+        &[data-disabled] > label {
+            cursor: not-allowed;
+        }
+
+        & input[type="radio"] {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0 0 0 0);
+            white-space: nowrap;
+            border: 0;
+        }
+
+        & input[type="radio"] + .radioshell {
+            position: relative;
+            display: inline-grid;
+            width: 1em;
+            height: 1em;
+            flex: 0 0 1em;
+            box-sizing: border-box;
+            border: var(--radio-box-border, var(--input-border, 1px solid currentColor));
+            border-radius: 50%;
+            background: var(--radio-background, var(--ui-input-bg, transparent));
+            place-items: center;
+        }
+
+        & input[type="radio"]:checked + .radioshell {
+            background: var(--radio-background-checked,
+                var(--selection-background, var(--ui-accent-color, Highlight)));
+        }
+
+        & input[type="radio"]:checked + .radioshell::after {
+            width: 0.4em;
+            height: 0.4em;
+            content: "";
+            border-radius: 50%;
+            background: var(--radio-dot-color, var(--selection-color, Canvas));
+        }
+
+        & input[type="radio"]:focus-visible + .radioshell {
+            outline: 2px solid var(--focus-color, var(--ui-accent-color, Highlight));
+            outline-offset: 1px;
+        }
+
+        & input[type="radio"]:disabled + .radioshell {
+            opacity: 0.6;
+        }
+    `);
+class oe extends g {
+  constructor(e = {}) {
+    var n;
+    super(e);
+    a(this, "valueEmitter");
+    a(this, "groupId");
+    a(this, "legendId");
+    const i = e.options ?? [];
+    st(i);
+    const s = ((n = i[0]) == null ? void 0 : n[0]) ?? null;
+    this.valueEmitter = K(this, e, s, "radio group value"), this.groupId = j("radio-group", e.id), this.legendId = `${this.groupId}-label`;
+  }
+  initialize() {
+    this.watch(this.valueEmitter);
+  }
+  selectOption(e, i = null) {
+    this.props.disabled || (this.valueEmitter.set(e, "radio option selected"), C(this.props.onChange, e, i));
+  }
+  render() {
+    const { options: e = [], label: i, disabled: s = !1, required: n = !1 } = this.props;
+    st(e);
+    const o = this.valueEmitter.get(), l = this.Host;
+    return /* @__PURE__ */ h(
+      l,
+      {
+        className: E(this.props) || null,
+        "data-disabled": s ? "" : null,
+        "data-required": n ? "" : null,
+        children: /* @__PURE__ */ w("fieldset", { disabled: s, "aria-required": n ? "true" : null, children: [
+          i == null ? null : /* @__PURE__ */ h("legend", { id: this.legendId, children: i }),
+          /* @__PURE__ */ h(
+            "div",
+            {
+              "data-part": "options",
+              role: "radiogroup",
+              "aria-label": i == null ? this.props.ariaLabel : null,
+              "aria-labelledby": i == null ? null : this.legendId,
+              children: e.map(([c, u], p) => /* @__PURE__ */ h(
+                ee,
+                {
+                  id: `${this.groupId}-${p}`,
+                  name: this.props.name ?? this.groupId,
+                  value: c,
+                  label: u,
+                  checked: Object.is(o, c),
+                  disabled: s,
+                  required: n,
+                  onChange: (f, m) => {
+                    f && this.selectOption(c, m);
+                  }
+                },
+                String(c)
+              ))
+            }
+          )
+        ] })
+      }
+    );
+  }
+}
+a(oe, "dependencies", [ee]), a(oe, "hostName", "radio-group"), a(oe, "standaloneHostName", "radio-group"), a(oe, "css", x`
+        & > fieldset {
+            margin: 0;
+            padding: 0;
+            border: 0;
+        }
+
+        & [data-part="options"] {
+            display: flex;
+            flex-flow: row wrap;
+            gap: var(--space-sm, 0.5rem);
+        }
+    `);
+function st(t) {
+  he(t, "Radio group options");
+  for (const r of t)
+    if (!Array.isArray(r) || r.length < 2)
+      throw new TypeError("Radio group options must be [value, label] tuples");
+}
+class ae extends g {
   constructor(e = {}) {
     super(e);
-    o(this, "inputId");
-    o(this, "errorId");
-    o(this, "valueEmitter");
-    this.inputId = F("textbox", e.id), this.errorId = `${this.inputId}-error`, this.valueEmitter = z(this, e, "", "textbox value");
+    a(this, "inputId");
+    a(this, "errorId");
+    a(this, "valueEmitter");
+    this.inputId = j("textbox", e.id), this.errorId = `${this.inputId}-error`, this.valueEmitter = K(this, e, "", "textbox value");
   }
   initialize() {
     this.watch(this.valueEmitter);
@@ -2413,66 +2703,66 @@ class te extends y {
       placeholder: i,
       type: s = "text",
       name: n,
-      disabled: a = !1,
+      disabled: o = !1,
       required: l = !1,
       readOnly: c = !1,
-      error: h = null,
+      error: u = null,
       autoComplete: p,
       inputMode: f,
-      minLength: g,
-      maxLength: m,
-      pattern: I,
-      ariaLabel: v,
-      inputRef: O,
-      onInput: C,
-      onChange: j
-    } = this.props, A = this.valueEmitter.get() ?? "", H = this.Host;
+      minLength: m,
+      maxLength: b,
+      pattern: v,
+      ariaLabel: I,
+      inputRef: A,
+      onInput: N,
+      onChange: z
+    } = this.props, L = this.valueEmitter.get() ?? "", F = this.Host;
     return /* @__PURE__ */ w(
-      H,
+      F,
       {
         className: E(this.props) || null,
-        "data-disabled": a ? "" : null,
+        "data-disabled": o ? "" : null,
         "data-required": l ? "" : null,
-        "data-error": h == null ? null : "",
+        "data-error": u == null ? null : "",
         children: [
-          e == null ? null : /* @__PURE__ */ u("label", { htmlFor: this.inputId, children: e }),
-          /* @__PURE__ */ u(
+          e == null ? null : /* @__PURE__ */ h("label", { htmlFor: this.inputId, children: e }),
+          /* @__PURE__ */ h(
             "input",
             {
               id: this.inputId,
               name: n,
               type: s,
-              value: A,
+              value: L,
               placeholder: i,
-              disabled: a,
+              disabled: o,
               required: l,
               readOnly: c,
               autoComplete: p,
               inputMode: f,
-              minLength: g,
-              maxLength: m,
-              pattern: I,
-              ref: O,
-              "aria-label": e == null ? v : null,
-              "aria-invalid": h == null ? null : "true",
-              "aria-describedby": h == null ? null : this.errorId,
+              minLength: m,
+              maxLength: b,
+              pattern: v,
+              ref: A,
+              "aria-label": e == null ? I : null,
+              "aria-invalid": u == null ? null : "true",
+              "aria-describedby": u == null ? null : this.errorId,
               onInput: (T) => {
-                const G = je(T, "textbox input");
-                this.valueEmitter.set(G, "textbox input"), K(C, G, T);
+                const G = nt(T, "textbox input");
+                this.valueEmitter.set(G, "textbox input"), C(N, G, T);
               },
-              onChange: (T) => K(
-                j,
-                je(T, "textbox change"),
+              onChange: (T) => C(
+                z,
+                nt(T, "textbox change"),
                 T
               )
             }
           ),
-          h == null ? null : /* @__PURE__ */ u(
+          u == null ? null : /* @__PURE__ */ h(
             "p",
             {
               id: this.errorId,
               role: "alert",
-              children: String(h)
+              children: String(u)
             }
           )
         ]
@@ -2480,10 +2770,10 @@ class te extends y {
     );
   }
 }
-o(te, "hostName", "textbox"), o(te, "standaloneHostName", "text-box"), o(te, "baseStyles", [
+a(ae, "hostName", "textbox"), a(ae, "standaloneHostName", "text-box"), a(ae, "baseStyles", [
   ["&", ["labeledinput", "inputline"]],
   ["& > input", ["input", "inputline"]]
-]), o(te, "css", S`
+]), a(ae, "css", x`
         & input {
             cursor: text;
         }
@@ -2492,34 +2782,34 @@ o(te, "hostName", "textbox"), o(te, "standaloneHostName", "text-box"), o(te, "ba
             margin: 0;
         }
     `);
-function je(t, r) {
+function nt(t, r) {
   const e = t.currentTarget;
   if (e == null || typeof Reflect.get(e, "value") != "string")
     throw new TypeError(`${r} requires a value-bearing event target`);
   return Reflect.get(e, "value");
 }
-class Ae extends y {
+class ot extends g {
   constructor(e = {}) {
     var n;
     super(e);
-    o(this, "valueEmitter");
-    o(this, "groupId");
-    o(this, "legendId");
+    a(this, "valueEmitter");
+    a(this, "groupId");
+    a(this, "legendId");
     const i = e.options ?? [];
-    Fe(i);
+    at(i);
     const s = ((n = i[0]) == null ? void 0 : n[0]) ?? null;
-    this.valueEmitter = z(
+    this.valueEmitter = K(
       this,
       e,
       s ?? null,
       "toggle value"
-    ), this.groupId = F("toggle", e.id), this.legendId = `${this.groupId}-label`;
+    ), this.groupId = j("toggle", e.id), this.legendId = `${this.groupId}-label`;
   }
   initialize() {
     this.watch(this.valueEmitter);
   }
   selectOption(e, i = null) {
-    this.props.disabled || (this.valueEmitter.set(e, "toggle option selected"), K(this.props.onChange, e, i));
+    this.props.disabled || (this.valueEmitter.set(e, "toggle option selected"), C(this.props.onChange, e, i));
   }
   render() {
     const {
@@ -2528,10 +2818,10 @@ class Ae extends y {
       disabled: s = !1,
       required: n = !1
     } = this.props;
-    Fe(e);
-    const a = this.valueEmitter.get(), l = Math.max(
+    at(e);
+    const o = this.valueEmitter.get(), l = Math.max(
       0,
-      e.findIndex(([c]) => Object.is(c, a))
+      e.findIndex(([c]) => Object.is(c, o))
     );
     return /* @__PURE__ */ w(
       "fieldset",
@@ -2543,26 +2833,26 @@ class Ae extends y {
         "data-disabled": s ? "" : null,
         "aria-required": n ? "true" : null,
         children: [
-          i == null ? null : /* @__PURE__ */ u("legend", { id: this.legendId, children: i }),
-          /* @__PURE__ */ u(
+          i == null ? null : /* @__PURE__ */ h("legend", { id: this.legendId, children: i }),
+          /* @__PURE__ */ h(
             "div",
             {
               "data-part": "options",
               role: "radiogroup",
               "aria-label": i == null ? this.props.ariaLabel : null,
               "aria-labelledby": i == null ? null : this.legendId,
-              children: e.map(([c, h], p) => /* @__PURE__ */ u(
+              children: e.map(([c, u], p) => /* @__PURE__ */ h(
                 "button",
                 {
                   type: "button",
                   role: "radio",
                   disabled: s,
-                  "aria-checked": Object.is(a, c) ? "true" : "false",
+                  "aria-checked": Object.is(o, c) ? "true" : "false",
                   "data-value": String(c),
                   tabIndex: p === l ? 0 : -1,
                   onClick: (f) => this.selectOption(c, f),
                   onKeyDown: (f) => this.handleKeyDown(f, p, e),
-                  children: h
+                  children: u
                 },
                 String(c)
               ))
@@ -2574,25 +2864,25 @@ class Ae extends y {
   }
   handleKeyDown(e, i, s) {
     const { key: n } = e;
-    let a;
-    if (n === "ArrowRight" || n === "ArrowDown") a = (i + 1) % s.length;
+    let o;
+    if (n === "ArrowRight" || n === "ArrowDown") o = (i + 1) % s.length;
     else if (n === "ArrowLeft" || n === "ArrowUp")
-      a = (i - 1 + s.length) % s.length;
-    else if (n === "Home") a = 0;
-    else if (n === "End") a = s.length - 1;
+      o = (i - 1 + s.length) % s.length;
+    else if (n === "Home") o = 0;
+    else if (n === "End") o = s.length - 1;
     else return;
     e.preventDefault();
-    const l = s[a];
+    const l = s[o];
     if (l != null && (this.selectOption(l[0], e), this.dom instanceof Element)) {
-      const c = this.dom.querySelectorAll('[role="radio"]')[a];
+      const c = this.dom.querySelectorAll('[role="radio"]')[o];
       c == null || c.focus();
     }
   }
 }
-o(Ae, "baseStyles", [
+a(ot, "baseStyles", [
   ['fieldset:has(> [data-part="options"]) > [data-part="options"]', ["uiline"]],
   ['fieldset:has(> [data-part="options"]) [role="radio"]', ["uiline", "button"]]
-]), o(Ae, "css", S`
+]), a(ot, "css", x`
         fieldset:has(> [data-part="options"]) {
             margin: 0;
             padding: 0;
@@ -2605,13 +2895,13 @@ o(Ae, "baseStyles", [
         }
 
     `);
-function Fe(t) {
-  fe(t);
+function at(t) {
+  he(t);
   for (const r of t)
     if (!Array.isArray(r) || r.length < 2)
       throw new TypeError("Toggle options must be [value, label] tuples");
 }
-class he extends y {
+class Se extends g {
   render() {
     const {
       children: r = [],
@@ -2622,7 +2912,7 @@ class he extends y {
     if (!["horizontal", "vertical"].includes(s))
       throw new TypeError("Toolbar orientation must be horizontal or vertical");
     const n = this.Host;
-    return /* @__PURE__ */ u(
+    return /* @__PURE__ */ h(
       n,
       {
         id: e,
@@ -2636,7 +2926,7 @@ class he extends y {
     );
   }
 }
-o(he, "hostName", "toolbar"), o(he, "standaloneHostName", "tool-bar"), o(he, "css", S`
+a(Se, "hostName", "toolbar"), a(Se, "standaloneHostName", "tool-bar"), a(Se, "css", x`
         & {
             display: flex;
             flex-wrap: wrap;
@@ -2650,11 +2940,11 @@ o(he, "hostName", "toolbar"), o(he, "standaloneHostName", "tool-bar"), o(he, "cs
             align-items: stretch;
         }
     `);
-class pe extends y {
+class ke extends g {
   constructor(e) {
     super(e);
-    o(this, "progressId");
-    if (this.progressId = F("progress", e.id), e.valueEmitter != null && !_t(e.valueEmitter))
+    a(this, "progressId");
+    if (this.progressId = j("progress", e.id), e.valueEmitter != null && !Tr(e.valueEmitter))
       throw new TypeError("ProgressBar valueEmitter must be a readable emitter");
   }
   render() {
@@ -2664,13 +2954,13 @@ class pe extends y {
     const i = this.props.valueEmitter == null ? this.props.value ?? null : this.read(this.props.valueEmitter);
     if (i != null && (!Number.isFinite(i) || i < 0))
       throw new RangeError("ProgressBar value must be null or a non-negative finite number");
-    const s = i == null ? null : Math.min(i, e), n = this.props.valueText ?? (s == null ? "In progress" : `${Math.round(s / e * 100)}%`), a = this.Host;
-    return /* @__PURE__ */ w(a, { className: E(this.props) || null, children: [
+    const s = i == null ? null : Math.min(i, e), n = this.props.valueText ?? (s == null ? "In progress" : `${Math.round(s / e * 100)}%`), o = this.Host;
+    return /* @__PURE__ */ w(o, { className: E(this.props) || null, children: [
       /* @__PURE__ */ w("div", { "data-part": "label-line", children: [
-        /* @__PURE__ */ u("label", { htmlFor: this.progressId, children: this.props.label }),
-        /* @__PURE__ */ u("output", { children: n })
+        /* @__PURE__ */ h("label", { htmlFor: this.progressId, children: this.props.label }),
+        /* @__PURE__ */ h("output", { children: n })
       ] }),
-      /* @__PURE__ */ u(
+      /* @__PURE__ */ h(
         "progress",
         {
           id: this.progressId,
@@ -2683,7 +2973,7 @@ class pe extends y {
     ] });
   }
 }
-o(pe, "hostName", "progress-bar"), o(pe, "standaloneHostName", "progress-bar"), o(pe, "css", S`
+a(ke, "hostName", "progress-bar"), a(ke, "standaloneHostName", "progress-bar"), a(ke, "css", x`
         & {
             display: grid;
             gap: var(--spacing-small, 0.5rem);
@@ -2706,13 +2996,13 @@ o(pe, "hostName", "progress-bar"), o(pe, "standaloneHostName", "progress-bar"),
             }
         }
     `);
-function _t(t) {
+function Tr(t) {
   return t != null && (typeof t == "object" || typeof t == "function") && typeof Reflect.get(t, "get") == "function" && typeof Reflect.get(t, "subscribe") == "function";
 }
-const pr = Object.freeze([
-  ...me("primary"),
-  ...me("secondary"),
-  ...me("neutral"),
+const oi = Object.freeze([
+  ...Ie("primary"),
+  ...Ie("secondary"),
+  ...Ie("neutral"),
   d("--palette-primary", "palette", "primary", "color", "Primary anchor color", "--palette-primary-500"),
   d("--palette-primary-light", "palette", "primary", "color", "Light primary color", "--palette-primary-200"),
   d("--palette-primary-dark", "palette", "primary", "color", "Dark primary color", "--palette-primary-800"),
@@ -2815,28 +3105,28 @@ const pr = Object.freeze([
   d("--colored-light", "theme", "colored", "color", "Colored-trait light color", "--palette-primary-light"),
   d("--colored-dark", "theme", "colored", "color", "Colored-trait dark color", "--palette-primary-dark"),
   d("--colored-contrast", "theme", "colored", "color", "Colored-trait foreground", "--palette-contrast-light")
-]), Yt = Object.freeze([
-  N("shiny", "Shiny", $("themes/shiny/theme.css")),
-  N("java", "Java", $("themes/java/theme.css")),
-  N("minimal", "Minimal", $("themes/minimal/theme.css"))
-]), Xt = Object.freeze([
-  N("iceblue", "Ice blue", $("colors/iceblue/colors.css")),
-  N("ocean", "Ocean", $("colors/ocean/colors.css")),
-  N("green", "Green", $("colors/green/colors.css")),
-  N("gray", "Gray", $("colors/gray/colors.css")),
-  N("orange", "Orange", $("colors/orange/colors.css")),
-  N("purple", "Purple", $("colors/purple/colors.css")),
-  N("red", "Red", $("colors/red/colors.css")),
-  N("yellow", "Yellow", $("colors/yellow/colors.css"))
+]), Rr = Object.freeze([
+  $("shiny", "Shiny", O("themes/shiny/theme.css")),
+  $("java", "Java", O("themes/java/theme.css")),
+  $("minimal", "Minimal", O("themes/minimal/theme.css"))
+]), Cr = Object.freeze([
+  $("iceblue", "Ice blue", O("colors/iceblue/colors.css")),
+  $("ocean", "Ocean", O("colors/ocean/colors.css")),
+  $("green", "Green", O("colors/green/colors.css")),
+  $("gray", "Gray", O("colors/gray/colors.css")),
+  $("orange", "Orange", O("colors/orange/colors.css")),
+  $("purple", "Purple", O("colors/purple/colors.css")),
+  $("red", "Red", O("colors/red/colors.css")),
+  $("yellow", "Yellow", O("colors/yellow/colors.css"))
 ]);
-function Zt(t, r, e = globalThis.document) {
-  if (er(r), (e == null ? void 0 : e.head) == null || e.documentElement == null)
+function $r(t, r, e = globalThis.document) {
+  if (Or(r), (e == null ? void 0 : e.head) == null || e.documentElement == null)
     throw new TypeError("replaceFrayStylesheet requires a document with a head and root");
   const i = `link[data-fray-stylesheet="${t}"]`;
   let s = e.head.querySelector(i);
   return s == null && (s = e.createElement("link"), s.rel = "stylesheet", s.dataset.frayStylesheet = t, e.head.append(s)), s.dataset.fraySelection = r.value, s.getAttribute("href") !== r.href && s.setAttribute("href", r.href), t === "theme" ? e.documentElement.dataset.theme = r.value : e.documentElement.dataset.color = r.value, s;
 }
-function re(t, r) {
+function le(t, r) {
   const e = t.find((i) => i.value === r);
   if (e == null) throw new RangeError(`Unknown Fray stylesheet selection: ${r}`);
   return e;
@@ -2844,7 +3134,7 @@ function re(t, r) {
 function d(t, r, e, i, s, n) {
   return n == null ? Object.freeze({ name: t, layer: r, family: e, value: i, description: s }) : Object.freeze({ name: t, layer: r, family: e, value: i, description: s, fallback: n });
 }
-function me(t) {
+function Ie(t) {
   return [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map((r) => {
     var e;
     return d(
@@ -2856,66 +3146,66 @@ function me(t) {
     );
   });
 }
-function N(t, r, e) {
+function $(t, r, e) {
   return Object.freeze({ value: t, label: r, href: e });
 }
-function $(t) {
+function O(t) {
   const r = import.meta.url.includes("/src/styling/") ? `../../${t}` : `../${t}`;
   return new URL(r, import.meta.url).href;
 }
-function er(t) {
+function Or(t) {
   if (t == null || typeof t != "object")
     throw new TypeError("Fray stylesheet selection must be an option");
   for (const r of ["value", "label", "href"])
     if (typeof Reflect.get(t, r) != "string" || String(Reflect.get(t, r)).length === 0)
       throw new TypeError(`Fray stylesheet option ${r} must be a non-empty string`);
 }
-class oe extends y {
+class me extends g {
   constructor(e, i, s) {
     var l;
     super(e);
-    o(this, "valueEmitter");
-    o(this, "inputId");
-    o(this, "kind");
-    o(this, "defaults");
+    a(this, "valueEmitter");
+    a(this, "inputId");
+    a(this, "kind");
+    a(this, "defaults");
     const n = e.options ?? s;
-    ze(n);
-    const a = (l = n[0]) == null ? void 0 : l.value;
-    if (a == null) throw new TypeError(`${i} picker requires at least one option`);
-    this.kind = i, this.defaults = s, this.inputId = F(`${i}-picker`, e.id), this.valueEmitter = z(this, e, a, `${i} selection`), re(n, this.valueEmitter.get());
+    ut(n);
+    const o = (l = n[0]) == null ? void 0 : l.value;
+    if (o == null) throw new TypeError(`${i} picker requires at least one option`);
+    this.kind = i, this.defaults = s, this.inputId = j(`${i}-picker`, e.id), this.valueEmitter = K(this, e, o, `${i} selection`), le(n, this.valueEmitter.get());
   }
   initialize() {
     this.watch(this.valueEmitter);
   }
   render() {
-    const e = this.options, i = re(e, this.valueEmitter.get()), { label: s, ariaLabel: n, disabled: a = !1, onChange: l } = this.props, c = this.Host;
+    const e = this.options, i = le(e, this.valueEmitter.get()), { label: s, ariaLabel: n, disabled: o = !1, onChange: l } = this.props, c = this.Host;
     return /* @__PURE__ */ w(
       c,
       {
         className: R("selectshell", E(this.props)),
         "data-kind": this.kind,
-        "data-disabled": a ? "" : null,
+        "data-disabled": o ? "" : null,
         children: [
-          s == null ? null : /* @__PURE__ */ u("label", { htmlFor: this.inputId, children: s }),
-          /* @__PURE__ */ u(
+          s == null ? null : /* @__PURE__ */ h("label", { htmlFor: this.inputId, children: s }),
+          /* @__PURE__ */ h(
             "select",
             {
               id: this.inputId,
               value: i.value,
-              disabled: a,
+              disabled: o,
               "aria-label": s == null ? n : null,
-              onChange: (h) => {
-                const p = tr(h), f = re(e, p);
-                this.valueEmitter.set(p, `${this.kind} selected`), K(l, p, f, h);
+              onChange: (u) => {
+                const p = jr(u), f = le(e, p);
+                this.valueEmitter.set(p, `${this.kind} selected`), C(l, p, f, u);
               },
-              children: e.map((h) => /* @__PURE__ */ u(
+              children: e.map((u) => /* @__PURE__ */ h(
                 "option",
                 {
-                  value: h.value,
-                  selected: h.value === i.value,
-                  children: h.label
+                  value: u.value,
+                  selected: u.value === i.value,
+                  children: u.label
                 },
-                h.value
+                u.value
               ))
             }
           )
@@ -2931,21 +3221,21 @@ class oe extends y {
   }
   get options() {
     const e = this.props.options ?? this.defaults;
-    return ze(e), e;
+    return ut(e), e;
   }
   applySelection() {
     const e = this.props.targetDocument ?? (typeof document > "u" ? null : document);
-    e != null && Zt(
+    e != null && $r(
       this.kind,
-      re(this.options, this.valueEmitter.get()),
+      le(this.options, this.valueEmitter.get()),
       e
     );
   }
 }
-o(oe, "baseStyles", [
+a(me, "baseStyles", [
   ["&", ["labeledinput", "inputline"]],
   ["& > select", ["input", "inputline"]]
-]), o(oe, "css", S`
+]), a(me, "css", x`
         & {
             position: relative;
         }
@@ -2954,19 +3244,19 @@ o(oe, "baseStyles", [
             min-width: 8rem;
         }
     `);
-class He extends oe {
+class lt extends me {
   constructor(r = {}) {
-    super(r, "theme", Yt);
+    super(r, "theme", Rr);
   }
 }
-o(He, "hostName", "theme-picker"), o(He, "standaloneHostName", "theme-picker");
-class Me extends oe {
+a(lt, "hostName", "theme-picker"), a(lt, "standaloneHostName", "theme-picker");
+class ct extends me {
   constructor(r = {}) {
-    super(r, "colors", Xt);
+    super(r, "colors", Cr);
   }
 }
-o(Me, "hostName", "color-picker"), o(Me, "standaloneHostName", "color-picker");
-function ze(t) {
+a(ct, "hostName", "color-picker"), a(ct, "standaloneHostName", "color-picker");
+function ut(t) {
   if (!Array.isArray(t) || t.length === 0)
     throw new TypeError("Stylesheet picker options must be a non-empty array");
   const r = /* @__PURE__ */ new Set();
@@ -2981,91 +3271,1025 @@ function ze(t) {
     r.add(e.value);
   }
 }
-function tr(t) {
+function jr(t) {
   const r = t.currentTarget == null ? null : Reflect.get(t.currentTarget, "value");
   if (typeof r != "string")
     throw new TypeError("Stylesheet picker change requires a select element");
   return r;
 }
+class ai {
+  constructor(r = "/") {
+    a(this, "listeners", /* @__PURE__ */ new Set());
+    a(this, "entries");
+    a(this, "index", 0);
+    this.entries = [D(r)];
+  }
+  read() {
+    return this.entries[this.index] ?? "/";
+  }
+  href(r) {
+    return D(r);
+  }
+  push(r) {
+    this.entries = this.entries.slice(0, this.index + 1), this.entries.push(D(r)), this.index += 1;
+  }
+  replace(r) {
+    this.entries[this.index] = D(r);
+  }
+  subscribe(r) {
+    if (typeof r != "function")
+      throw new TypeError("Navigation adapter subscriber must be a function");
+    this.listeners.add(r);
+    let e = !0;
+    return () => {
+      e && (e = !1, this.listeners.delete(r));
+    };
+  }
+  back() {
+    this.index !== 0 && (this.index -= 1, this.notify());
+  }
+  forward() {
+    this.index >= this.entries.length - 1 || (this.index += 1, this.notify());
+  }
+  get length() {
+    return this.entries.length;
+  }
+  notify() {
+    for (const r of [...this.listeners]) r();
+  }
+}
+function li(t = globalThis.window, r = {}) {
+  It(t);
+  const e = Ar(r.basePath ?? "/");
+  return {
+    read() {
+      const i = t.location.pathname, s = i === e.slice(0, -1) ? "/" : i.startsWith(e) ? `/${i.slice(e.length)}` : i;
+      return D(`${s}${t.location.search}`);
+    },
+    href(i) {
+      const s = D(i);
+      return `${e}${s.slice(1)}`;
+    },
+    push(i) {
+      t.history.pushState(null, "", this.href(i));
+    },
+    replace(i) {
+      t.history.replaceState(null, "", this.href(i));
+    },
+    subscribe(i) {
+      return t.addEventListener("popstate", i), () => t.removeEventListener("popstate", i);
+    }
+  };
+}
+function ci(t = globalThis.window) {
+  return It(t), {
+    read() {
+      return D(t.location.hash.slice(1) || "/");
+    },
+    href(r) {
+      return `#${D(r)}`;
+    },
+    push(r) {
+      t.history.pushState(null, "", this.href(r));
+    },
+    replace(r) {
+      t.history.replaceState(null, "", this.href(r));
+    },
+    subscribe(r) {
+      let e = this.read();
+      const i = () => {
+        const s = this.read();
+        s !== e && (e = s, r());
+      };
+      return t.addEventListener("popstate", i), t.addEventListener("hashchange", i), () => {
+        t.removeEventListener("popstate", i), t.removeEventListener("hashchange", i);
+      };
+    }
+  };
+}
+function D(t) {
+  if (typeof t != "string") throw new TypeError("Route location must be a string");
+  const r = t.indexOf("#"), e = r < 0 ? t : t.slice(0, r), i = e.indexOf("?"), s = i < 0 ? e : e.slice(0, i), n = i < 0 ? "" : e.slice(i);
+  return `${(s.startsWith("/") ? s : `/${s}`).replace(/\/{2,}/g, "/").replace(/\/$/, "") || "/"}${n}`;
+}
+function Ar(t) {
+  const r = D(t).split("?")[0] ?? "/";
+  return r === "/" ? "/" : `${r}/`;
+}
+function It(t) {
+  if (t == null || typeof t != "object" || !("location" in t) || !("history" in t) || !("addEventListener" in t))
+    throw new TypeError("Browser navigation requires a window-like target");
+}
+const Ue = /* @__PURE__ */ new WeakSet(), Qe = /* @__PURE__ */ new WeakSet();
+class De {
+  constructor(r) {
+    this.target = r, we(r), Object.freeze(this);
+  }
+}
+class Be extends Error {
+  constructor(e = "The requested route is unavailable") {
+    super(e);
+    a(this, "name", "RouteUnavailableError");
+  }
+}
+const ui = Object.freeze({
+  parse: (t) => t,
+  format: (t) => t
+}), di = Object.freeze({
+  parse(t) {
+    if (t.length !== 1) throw new TypeError("Expected one query value");
+    return t[0] ?? "";
+  },
+  format: (t) => [t]
+}), hi = Object.freeze({
+  parse(t) {
+    if (t.length !== 1 || t[0] !== "true" && t[0] !== "false")
+      throw new TypeError("Expected one boolean query value");
+    return t[0] === "true";
+  },
+  format: (t) => [String(t)]
+});
+function pi(t, r = t) {
+  const e = ze(t, "Route id"), i = zr(r, "Route path"), s = Object.freeze({
+    id: e,
+    kind: "literal",
+    path: i
+  });
+  return Ue.add(s), s;
+}
+function fi(t, r, e = t) {
+  const i = ze(t, "Route id"), s = ze(e, "Route parameter name");
+  qr(r);
+  const n = Object.freeze({
+    id: i,
+    kind: "parameter",
+    name: s,
+    codec: r
+  });
+  return Ue.add(n), n;
+}
+function mi(t, r) {
+  if (B(t), t.kind !== "parameter")
+    throw new TypeError("routeParameter requires a parameter route");
+  const e = t.codec.format(r);
+  return We(e, t.name), Object.freeze({ route: t, value: r });
+}
+function bi(...t) {
+  if (t.length === 0) throw new TypeError("routeTarget requires at least one route");
+  for (const e of t)
+    if (Tt(e))
+      B(e.route);
+    else if (B(e), e.kind !== "literal")
+      throw new TypeError("Parameter routes require routeParameter(route, value)");
+  const r = Object.freeze({ routes: Object.freeze([...t]) });
+  return Qe.add(r), r;
+}
+function gi(t, r) {
+  if (we(t), r == null || typeof r != "object" || Array.isArray(r))
+    throw new TypeError("Route target query must be an object");
+  const e = Object.freeze({ routes: t.routes, query: Object.freeze({ ...r }) });
+  return Qe.add(e), e;
+}
+function yi(t) {
+  return new De(t);
+}
+function _e(t) {
+  return t != null && typeof t == "object" && Ue.has(t);
+}
+function B(t) {
+  if (!_e(t))
+    throw new TypeError("Expected a route created by defineRoute() or defineRouteParameter()");
+}
+function Nr(t) {
+  return t != null && typeof t == "object" && Qe.has(t);
+}
+function we(t) {
+  if (!Nr(t)) throw new TypeError("Expected a target created by routeTarget()");
+}
+function qr(t) {
+  if (t == null || typeof t != "object" || typeof t.parse != "function" || typeof t.format != "function")
+    throw new TypeError("Route codec requires parse and format functions");
+}
+function Dr(t) {
+  if (t == null || typeof t != "object" || typeof t.parse != "function" || typeof t.format != "function")
+    throw new TypeError("Route query codec requires parse and format functions");
+}
+function Te(t) {
+  we(t);
+  const r = t.routes.map((s) => {
+    if (Tt(s)) {
+      const n = s.route.codec.format(s.value);
+      return We(n, s.route.name), encodeURIComponent(n);
+    }
+    return encodeURIComponent(s.path);
+  }), e = new URLSearchParams();
+  for (const [s, n] of Object.entries(t.query ?? {}).sort(([o], [l]) => o.localeCompare(l))) {
+    if (n == null) continue;
+    const o = Array.isArray(n) ? n : [n];
+    for (const l of o) e.append(s, l);
+  }
+  const i = e.toString();
+  return `/${r.join("/")}${i === "" ? "" : `?${i}`}`;
+}
+function Tt(t) {
+  return t != null && typeof t == "object" && "route" in t && "value" in t && _e(t.route) && t.route.kind === "parameter";
+}
+function ze(t, r) {
+  if (typeof t != "string" || !/^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/.test(t))
+    throw new TypeError(`${r} must be a lowercase kebab-case name`);
+  return t;
+}
+function zr(t, r) {
+  if (typeof t != "string" || t === "" || t === "." || t === ".." || t.includes("/") || t.includes("?") || t.includes("#"))
+    throw new TypeError(`${r} must be one non-empty path segment`);
+  try {
+    We(decodeURIComponent(t), r);
+  } catch {
+    throw new TypeError(`${r} must use valid percent encoding`);
+  }
+  return t;
+}
+function We(t, r) {
+  if (typeof t != "string" || t === "" || t.includes("/"))
+    throw new TypeError(`${r} codec must format one non-empty path segment`);
+}
+const Lr = 16;
+class Kr {
+  constructor(r) {
+    a(this, "root");
+    a(this, "transition");
+    a(this, "issue");
+    a(this, "transitionEmitter");
+    a(this, "issueEmitter");
+    a(this, "scopes", /* @__PURE__ */ new Map());
+    a(this, "contextCache", /* @__PURE__ */ new Map());
+    a(this, "knownQueryNames", /* @__PURE__ */ new Set());
+    a(this, "registryWaiters", /* @__PURE__ */ new Set());
+    a(this, "adapterUnsubscribe");
+    a(this, "controller", null);
+    a(this, "activeContext");
+    a(this, "requested");
+    a(this, "applying", 0);
+    a(this, "syncQueued", !1);
+    a(this, "disposed", !1);
+    this.adapter = r, _r(r), this.root = Object.freeze({
+      route: null,
+      parent: null,
+      segment: null,
+      value: null,
+      pathname: "/"
+    }), be.set(this.root, this), this.activeContext = this.root, this.requested = Re(r.read());
+    const e = Object.freeze({
+      state: "pending",
+      requestedLocation: this.requested.location,
+      settledLocation: "/"
+    });
+    this.transitionEmitter = new S(e, {
+      owner: this,
+      purpose: "browser route transition"
+    }), this.issueEmitter = new S(null, {
+      owner: this,
+      purpose: "browser route issue"
+    }), this.transition = this.transitionEmitter, this.issue = this.issueEmitter, this.adapterUnsubscribe = r.subscribe(() => {
+      this.startTransition(r.read(), 0, !1);
+    }), this.startTransition(this.requested.location, 0, !1);
+  }
+  openScope(r, e) {
+    this.assertActive(), P(r, this), ce(e);
+    const i = this.scope(r);
+    if (i.owners.has(e)) throw new Error("Route scope owner is already registered");
+    i.owners.set(e, { complete: !1 }), this.wakeRegistry();
+    let s = !0;
+    return () => {
+      s && (s = !1, i.owners.delete(e), this.removeOwnerEntries(i, e), this.removeOwnerQueries(i, e), i.owners.size === 0 && i.entries.size === 0 && i.queries.size === 0 && this.scopes.delete(r), this.wakeRegistry());
+    };
+  }
+  completeScope(r, e) {
+    this.assertActive(), P(r, this);
+    const i = this.scope(r).owners.get(e);
+    if (i == null) throw new Error("Cannot complete an unopened route scope");
+    Fr(this.scope(r)), i.complete = !0, this.wakeRegistry();
+  }
+  registerSelectionRoutes(r, e, i, s) {
+    if (this.assertActive(), P(r, this), ce(e), !Array.isArray(i)) throw new TypeError("Route bindings must be an array");
+    if (typeof s != "function")
+      throw new TypeError("Selection route registration requires a subscriber");
+    const n = this.scope(r), o = /* @__PURE__ */ new Map(), l = /* @__PURE__ */ new Set();
+    for (const u of i) {
+      if (B(u.route), u.route.kind !== "literal")
+        throw new TypeError("Tab routes must use literal route descriptors");
+      if (l.has(u.route) || n.entries.has(u.route))
+        throw new Error(`Duplicate route in one scope: ${u.route.id}`);
+      l.add(u.route);
+      const p = this.literalContext(r, u.route), f = {
+        owner: e,
+        descriptor: u.route,
+        parent: r,
+        match: (m) => Ce(m) === u.route.path ? { value: null } : null,
+        currentValue: () => u.active() ? null : void 0,
+        activate: async (m, b, v) => {
+          if (u.disabled)
+            throw new Be(
+              `Route "${u.route.id}" is currently disabled`
+            );
+          if (v.aborted) throw v.reason;
+          return await u.activate(v), m;
+        },
+        context: () => p,
+        disposeSubscription: () => {
+        }
+      };
+      n.entries.set(u.route, f), o.set(u.route, p);
+    }
+    const c = s(() => this.scheduleStateSync());
+    for (const u of l) {
+      const p = n.entries.get(u);
+      p != null && (p.disposeSubscription = c);
+    }
+    return this.wakeRegistry(), o;
+  }
+  unregisterRoutes(r, e) {
+    const i = this.scopes.get(r);
+    i != null && (this.removeOwnerEntries(i, e), this.wakeRegistry());
+  }
+  registerValueRoute(r, e, i) {
+    if (this.assertActive(), P(r, this), ce(e), B(i.route), i.route.kind !== "parameter")
+      throw new TypeError("Value routes require a parameter route descriptor");
+    if (pt(i.valueEmitter, "Value route emitter"), i.resolve != null && typeof i.resolve != "function")
+      throw new TypeError("Value route resolver must be a function");
+    const s = this.scope(r);
+    if (s.entries.has(i.route))
+      throw new Error(`Duplicate route in one scope: ${i.route.id}`);
+    const n = (u) => this.parameterContext(r, i.route, u), o = i.valueEmitter.subscribe(() => this.scheduleStateSync(), {
+      emitCurrent: !1
+    }), l = {
+      owner: e,
+      descriptor: i.route,
+      parent: r,
+      match: (u) => {
+        const p = Ce(u), f = i.route.codec.parse(p);
+        if (i.route.codec.format(f) !== p)
+          throw new TypeError(
+            `Route parameter "${i.route.name}" does not round-trip`
+          );
+        return { value: f };
+      },
+      currentValue: () => i.valueEmitter.get(),
+      activate: async (u, p, f) => {
+        const m = u.value, b = i.resolve == null ? m : await i.resolve(m, p, f);
+        if (b instanceof De) return b;
+        if (f.aborted) throw f.reason;
+        return this.withApplication(() => i.valueEmitter.set(
+          b,
+          "route value restored"
+        )), { value: b };
+      },
+      context: (u) => n(u),
+      disposeSubscription: o
+    };
+    s.entries.set(i.route, l), this.wakeRegistry();
+    let c = !0;
+    return {
+      context: Br(i.valueEmitter, n, r),
+      contextFor: n,
+      dispose: () => {
+        if (!c) return;
+        c = !1, s.entries.get(i.route) === l && s.entries.delete(i.route), o(), this.wakeRegistry();
+      }
+    };
+  }
+  registerQuery(r, e, i) {
+    this.assertActive(), P(r, this), ce(e);
+    const s = Qr(i.name);
+    pt(i.valueEmitter, "Route query emitter"), Dr(i.codec);
+    const n = i.equals ?? Object.is;
+    if (typeof n != "function") throw new TypeError("Route query equals must be a function");
+    const o = this.scope(r);
+    if (o.queries.has(s)) throw new Error(`Duplicate route query name: ${s}`);
+    this.knownQueryNames.add(s);
+    const l = i.valueEmitter.subscribe(() => this.scheduleStateSync(), {
+      emitCurrent: !1
+    }), c = {
+      owner: e,
+      context: r,
+      name: s,
+      emitter: i.valueEmitter,
+      codec: i.codec,
+      defaultValue: i.defaultValue,
+      equals: n,
+      disposeSubscription: l
+    };
+    o.queries.set(s, c), this.applyQueryEntry(c, this.requested), this.wakeRegistry();
+    let u = !0;
+    return () => {
+      u && (u = !1, o.queries.get(s) === c && o.queries.delete(s), l(), this.scheduleStateSync());
+    };
+  }
+  navigate(r, e = {}) {
+    this.assertActive();
+    const i = ue(r) ? this.formatContext(r) : Te(Oe(r));
+    return this.issueEmitter.set(null, "explicit route navigation"), (e.history ?? "push") === "replace" ? this.adapter.replace(i) : this.adapter.push(i), this.startTransition(i, 0, !0);
+  }
+  redirect(r) {
+    return this.navigate(r, { history: "replace" });
+  }
+  href(r) {
+    this.assertActive();
+    const e = ue(r) ? this.formatContext(r) : Te(Oe(r));
+    return this.adapter.href(e);
+  }
+  resolve(r, e) {
+    var s;
+    B(r), P(e, this);
+    let i = e;
+    for (; i != null; ) {
+      const n = (s = this.scopes.get(i)) == null ? void 0 : s.entries.get(r);
+      if (n != null) {
+        const o = n.currentValue();
+        if (n.descriptor.kind === "parameter" && o == null)
+          throw new Error(
+            `Dynamic route "${r.id}" requires an explicit parameter value`
+          );
+        return n.context(o);
+      }
+      i = i.parent;
+    }
+    throw new Error(`Route "${r.id}" is not registered in the current route lineage`);
+  }
+  formatActiveLocation() {
+    return this.formatStateLocation();
+  }
+  isActive(r, e = !1) {
+    const i = ue(r) ? r : this.resolveTargetContext(Oe(r));
+    return e ? i === this.activeContext : ht(i, this.activeContext);
+  }
+  dispose() {
+    var r;
+    if (!this.disposed) {
+      this.disposed = !0, (r = this.controller) == null || r.abort(new DOMException("Router disposed", "AbortError")), this.controller = null, this.adapterUnsubscribe();
+      for (const e of this.scopes.values()) {
+        const i = /* @__PURE__ */ new Set();
+        for (const s of e.entries.values()) i.add(s.disposeSubscription);
+        for (const s of e.queries.values()) i.add(s.disposeSubscription);
+        for (const s of i) s();
+      }
+      this.scopes.clear(), this.knownQueryNames.clear(), this.wakeRegistry(), this.transitionEmitter.dispose(), this.issueEmitter.dispose();
+    }
+  }
+  startTransition(r, e, i) {
+    var n;
+    this.assertActive(), (n = this.controller) == null || n.abort(new DOMException("Navigation superseded", "AbortError"));
+    const s = new AbortController();
+    return this.controller = s, this.requested = Re(r), i && this.issueEmitter.set(null, "route transition started"), this.transitionEmitter.set(Object.freeze({
+      state: "pending",
+      requestedLocation: this.requested.location,
+      settledLocation: this.formatContext(this.activeContext)
+    }), "route transition started"), this.runTransition(this.requested, s, e).catch((o) => {
+      if (!s.signal.aborted) throw o;
+    });
+  }
+  async runTransition(r, e, i) {
+    const s = e.signal;
+    let n = this.root;
+    const o = /* @__PURE__ */ new Map();
+    for (const c of r.segments) {
+      const u = await this.waitForCompleteScope(n, s);
+      let p;
+      try {
+        p = Hr(u, c);
+      } catch (m) {
+        this.fallback(r, n, null, $e(m));
+        return;
+      }
+      if (p == null) {
+        this.fallback(r, n, null, `Unknown route segment "${Ce(c)}"`);
+        return;
+      }
+      const f = Object.freeze({
+        requestedLocation: r.location,
+        resolvedValues: o
+      });
+      try {
+        const m = await p.entry.activate(p.match, f, s);
+        if (m instanceof De) {
+          if (i >= Lr) {
+            this.fallback(r, n, p.entry.descriptor, "Too many route redirects");
+            return;
+          }
+          const b = Te(m.target);
+          this.adapter.replace(b), await this.startTransition(b, i + 1, !1);
+          return;
+        }
+        p = { entry: p.entry, match: m };
+      } catch (m) {
+        if (s.aborted) return;
+        this.fallback(
+          r,
+          n,
+          p.entry.descriptor,
+          $e(m)
+        );
+        return;
+      }
+      o.set(p.entry.descriptor, p.match.value), n = p.entry.context(p.match.value);
+    }
+    if (s.aborted || (n === this.root && (await this.waitForCompleteScope(this.root, s), n = this.findActiveContext()), s.aborted)) return;
+    this.activeContext = n, this.applyQueriesInLineage(n, r);
+    const l = this.formatContext(n);
+    l !== r.location && this.adapter.replace(l), this.transitionEmitter.set(Object.freeze({
+      state: "idle",
+      requestedLocation: r.location,
+      settledLocation: l
+    }), "route transition settled"), this.scheduleStateSync();
+  }
+  async waitForCompleteScope(r, e) {
+    for (; ; ) {
+      if (e.aborted) throw e.reason;
+      const i = this.scopes.get(r);
+      if (i != null && Mr(i)) return i;
+      await this.waitForRegistryChange(e);
+    }
+  }
+  waitForRegistryChange(r) {
+    return new Promise((e, i) => {
+      const s = () => {
+        r.removeEventListener("abort", n), this.registryWaiters.delete(s), e();
+      }, n = () => {
+        this.registryWaiters.delete(s), i(r.reason);
+      };
+      this.registryWaiters.add(s), r.addEventListener("abort", n, { once: !0 });
+    });
+  }
+  wakeRegistry() {
+    const r = [...this.registryWaiters];
+    this.registryWaiters.clear();
+    for (const e of r) e();
+  }
+  fallback(r, e, i, s) {
+    this.activeContext = e;
+    const n = e === this.root ? this.formatStateLocation() : this.formatContext(e);
+    this.adapter.replace(n), this.issueEmitter.set(Object.freeze({
+      requestedLocation: r.location,
+      failedRouteId: (i == null ? void 0 : i.id) ?? null,
+      reason: s,
+      fallbackLocation: n
+    }), "route fallback selected"), this.transitionEmitter.set(Object.freeze({
+      state: "idle",
+      requestedLocation: r.location,
+      settledLocation: n
+    }), "route transition fell back");
+  }
+  literalContext(r, e) {
+    return this.cachedContext(r, e, e.path, null);
+  }
+  resolveTargetContext(r) {
+    let e = this.root;
+    for (const i of r.routes)
+      "route" in i ? e = this.parameterContext(e, i.route, i.value) : e = this.literalContext(e, i);
+    return e;
+  }
+  parameterContext(r, e, i) {
+    const s = e.codec.format(i);
+    if (typeof s != "string" || s === "" || s.includes("/"))
+      throw new TypeError(`Route parameter "${e.name}" must format one path segment`);
+    return this.cachedContext(r, e, s, i);
+  }
+  cachedContext(r, e, i, s) {
+    const n = Pr(r.pathname, i), o = `${Ur(r)}\0${e.id}\0${i}`, l = this.contextCache.get(o);
+    if (l != null) return l;
+    const c = Object.freeze({ route: e, parent: r, segment: i, value: s, pathname: n });
+    return be.set(c, this), this.contextCache.set(o, c), c;
+  }
+  scope(r) {
+    let e = this.scopes.get(r);
+    return e == null && (e = { owners: /* @__PURE__ */ new Map(), entries: /* @__PURE__ */ new Map(), queries: /* @__PURE__ */ new Map() }, this.scopes.set(r, e)), e;
+  }
+  removeOwnerEntries(r, e) {
+    const i = /* @__PURE__ */ new Set();
+    for (const [s, n] of r.entries)
+      n.owner === e && (i.add(n.disposeSubscription), r.entries.delete(s));
+    for (const s of i) s();
+  }
+  removeOwnerQueries(r, e) {
+    for (const [i, s] of r.queries)
+      s.owner === e && (s.disposeSubscription(), r.queries.delete(i));
+  }
+  scheduleStateSync() {
+    this.applying > 0 || this.disposed || this.syncQueued || (this.syncQueued = !0, queueMicrotask(() => {
+      if (this.syncQueued = !1, this.applying > 0 || this.disposed || this.transitionEmitter.get().state === "pending") return;
+      const r = this.formatStateLocation();
+      r !== this.adapter.read() && this.adapter.replace(r), this.requested = Re(r), this.activeContext = this.findActiveContext(), this.transitionEmitter.set(Object.freeze({
+        ...this.transitionEmitter.get(),
+        state: "idle",
+        settledLocation: r
+      }), "route state synchronized");
+    }));
+  }
+  formatStateLocation() {
+    return this.formatContext(this.findActiveContext());
+  }
+  findActiveContext() {
+    let r = this.root;
+    const e = /* @__PURE__ */ new Set();
+    for (; !e.has(r); ) {
+      e.add(r);
+      const i = this.scopes.get(r);
+      if (i == null) break;
+      const s = [...i.entries.values()].filter((c) => c.currentValue() !== void 0 && c.currentValue() !== null), n = [...i.entries.values()].find((c) => c.descriptor.kind === "literal" && c.currentValue() === null), o = s[0] ?? n;
+      if (o == null) break;
+      const l = o.currentValue();
+      r = o.context(l);
+    }
+    return r;
+  }
+  formatContext(r) {
+    const e = new URLSearchParams(this.requested.search);
+    for (const s of this.knownQueryNames) e.delete(s);
+    for (const s of dt(r)) {
+      const n = this.scopes.get(s);
+      if (n != null)
+        for (const o of [...n.queries.values()].sort((l, c) => l.name.localeCompare(c.name))) {
+          if (o.equals(o.emitter.get(), o.defaultValue)) continue;
+          const l = o.codec.format(o.emitter.get());
+          if (!Array.isArray(l))
+            throw new TypeError(`Route query "${o.name}" codec must format an array`);
+          for (const c of l) e.append(o.name, c);
+        }
+    }
+    e.sort();
+    const i = e.toString();
+    return `${r.pathname}${i === "" ? "" : `?${i}`}`;
+  }
+  applyQueriesInLineage(r, e) {
+    for (const i of dt(r)) {
+      const s = this.scopes.get(i);
+      if (s != null)
+        for (const n of s.queries.values()) this.applyQueryEntry(n, e);
+    }
+  }
+  applyQueryEntry(r, e) {
+    var s;
+    if (!ht(r.context, this.activeContext) && !Vr(r.context.pathname, e.pathname)) return;
+    const i = e.search.getAll(r.name);
+    try {
+      const n = i.length === 0 ? r.defaultValue : r.codec.parse(i);
+      r.equals(r.emitter.get(), n) || this.withApplication(() => r.emitter.set(n, "route query restored"));
+    } catch (n) {
+      r.equals(r.emitter.get(), r.defaultValue) || this.withApplication(() => r.emitter.set(
+        r.defaultValue,
+        "invalid route query defaulted"
+      ));
+      const o = new URLSearchParams(e.search);
+      o.delete(r.name), o.sort();
+      const l = `${e.pathname}${o.size === 0 ? "" : `?${o.toString()}`}`;
+      this.adapter.replace(l), this.issueEmitter.set(Object.freeze({
+        requestedLocation: e.location,
+        failedRouteId: ((s = r.context.route) == null ? void 0 : s.id) ?? null,
+        reason: $e(n),
+        fallbackLocation: l
+      }), "invalid route query");
+    }
+  }
+  withApplication(r) {
+    this.applying += 1;
+    try {
+      r();
+    } finally {
+      this.applying -= 1;
+    }
+  }
+  assertActive() {
+    if (this.disposed) throw new Error("BrowserRouter has been disposed");
+  }
+}
+const be = /* @__PURE__ */ new WeakMap();
+function wi(t) {
+  if (t == null || typeof t != "object" || Array.isArray(t))
+    throw new TypeError("Browser router options must be an object");
+  return new Kr(t.adapter);
+}
+function Ei(t, r, e) {
+  if (t == null || typeof t.subscribe != "function")
+    throw new TypeError("waitForRouteValue requires a readable emitter");
+  if (typeof r != "function")
+    throw new TypeError("waitForRouteValue requires an acceptance predicate");
+  return new Promise((i, s) => {
+    let n = !1, o = () => {
+    };
+    const l = (p) => {
+      n || (n = !0, o(), e.removeEventListener("abort", c), p());
+    }, c = () => {
+      l(() => s(e.reason));
+    }, u = (p, f, m) => {
+      f === "error" ? l(() => s(
+        m ?? new Be("Route prerequisite failed")
+      )) : r(p) && l(() => i(p));
+    };
+    if (e.aborted) {
+      c();
+      return;
+    }
+    u(t.get(), t.getFetchState(), t.getError()), !n && (o = t.subscribe(({ value: p, fetchState: f, error: m }) => {
+      u(p, f, m);
+    }, { emitCurrent: !1 }), n ? o() : e.addEventListener("abort", c, { once: !0 }));
+  });
+}
+function Re(t) {
+  const r = D(t), e = r.indexOf("?"), i = e < 0 ? r : r.slice(0, e), s = e < 0 ? "" : r.slice(e + 1), n = i.split("/").filter(Boolean);
+  return Object.freeze({
+    location: r,
+    pathname: i,
+    segments: Object.freeze(n),
+    search: new URLSearchParams(s)
+  });
+}
+function Fr(t) {
+  const r = /* @__PURE__ */ new Set(), e = /* @__PURE__ */ new Set();
+  let i = null;
+  for (const s of t.entries.values()) {
+    if (r.has(s.descriptor.id))
+      throw new Error(`Duplicate route id in one scope: ${s.descriptor.id}`);
+    if (r.add(s.descriptor.id), s.descriptor.kind === "literal") {
+      if (e.has(s.descriptor.path))
+        throw new Error(`Duplicate route path in one scope: ${s.descriptor.path}`);
+      e.add(s.descriptor.path);
+    } else {
+      if (i != null)
+        throw new Error(
+          `Ambiguous parameter routes in one scope: ${i.id}, ${s.descriptor.id}`
+        );
+      i = s.descriptor;
+    }
+  }
+}
+function Hr(t, r) {
+  const e = [...t.entries.values()].sort((i, s) => i.descriptor.kind === s.descriptor.kind ? 0 : i.descriptor.kind === "literal" ? -1 : 1);
+  for (const i of e) {
+    const s = i.match(r);
+    if (s != null) return { entry: i, match: s };
+  }
+  return null;
+}
+function Mr(t) {
+  return t.owners.size > 0 && [...t.owners.values()].every(({ complete: r }) => r);
+}
+function dt(t) {
+  const r = [];
+  let e = t;
+  for (; e != null; )
+    r.unshift(e), e = e.parent;
+  return r;
+}
+function ht(t, r) {
+  let e = r;
+  for (; e != null; ) {
+    if (e === t) return !0;
+    e = e.parent;
+  }
+  return !1;
+}
+function Vr(t, r) {
+  return t === "/" || r === t || r.startsWith(`${t}/`);
+}
+function Pr(t, r) {
+  return `${t === "/" ? "" : t}/${encodeURIComponent(r)}`;
+}
+function Ur(t) {
+  return t.pathname;
+}
+function Ce(t) {
+  try {
+    return decodeURIComponent(t);
+  } catch {
+    throw new Be("Route contains malformed percent encoding");
+  }
+}
+function Qr(t) {
+  if (typeof t != "string" || !/^[A-Za-z][A-Za-z0-9_.-]*$/.test(t))
+    throw new TypeError("Route query name must start with a letter and use URL-safe characters");
+  return t;
+}
+function $e(t) {
+  return t instanceof Error && t.message !== "" ? t.message : "The requested route could not be resolved";
+}
+function Br(t, r, e) {
+  const i = t.get();
+  return i == null ? e : r(i);
+}
+function Oe(t) {
+  return we(t), t;
+}
+function ue(t) {
+  return t != null && typeof t == "object" && be.has(t);
+}
+function P(t, r) {
+  if (t !== r.root && (!ue(t) || be.get(t) !== r))
+    throw new TypeError("Resolved route does not belong to this router");
+}
+function _r(t) {
+  if (t == null || typeof t != "object" || typeof Reflect.get(t, "read") != "function" || typeof Reflect.get(t, "href") != "function" || typeof Reflect.get(t, "push") != "function" || typeof Reflect.get(t, "replace") != "function" || typeof Reflect.get(t, "subscribe") != "function")
+    throw new TypeError("BrowserRouter requires a navigation adapter");
+}
+function ce(t) {
+  if (t == null || typeof t != "object" && typeof t != "function")
+    throw new TypeError("Route registration owner must be an object");
+}
+function pt(t, r) {
+  if (t == null || typeof t != "object" || typeof Reflect.get(t, "get") != "function" || typeof Reflect.get(t, "set") != "function" || typeof Reflect.get(t, "subscribe") != "function")
+    throw new TypeError(`${r} must be a writable emitter`);
+}
+class xi extends g {
+  initialize() {
+    const r = this._runtime.router;
+    if (r == null) throw new Error("RouteLink requires a router in FrayRuntime");
+    this.watch(r.transition);
+  }
+  render() {
+    const r = this._runtime.router;
+    if (r == null) throw new Error("RouteLink requires a router in FrayRuntime");
+    const e = _e(this.props.to) ? r.resolve(this.props.to, this._routeContext ?? r.root) : this.props.to, {
+      to: i,
+      exact: s = !1,
+      children: n = [],
+      onClick: o,
+      ...l
+    } = this.props;
+    return te("a", {
+      ...l,
+      href: r.href(e),
+      "aria-current": r.isActive(e, s) ? "page" : null,
+      onClick: (c) => {
+        o == null || o(c), Wr(c, l.target, l.download) && (c.preventDefault(), r.navigate(e));
+      }
+    }, n);
+  }
+}
+function Wr(t, r, e) {
+  return !(t.defaultPrevented || t.button !== 0 || t.metaKey || t.ctrlKey || t.shiftKey || t.altKey || e != null && e !== !1 || r != null && r !== "" && r !== "_self");
+}
+class vi extends g {
+  constructor() {
+    super(...arguments);
+    a(this, "unregister", null);
+  }
+  initialize() {
+    const e = this._runtime.router;
+    if (e == null || this._routeContext == null)
+      throw new Error("RouteQuery requires a router and contextual route scope");
+    this.unregister = e.registerQuery(this._routeContext, this, {
+      name: this.props.name,
+      valueEmitter: this.props.valueEmitter,
+      codec: this.props.codec,
+      defaultValue: this.props.defaultValue,
+      ...this.props.equals == null ? {} : { equals: this.props.equals }
+    });
+  }
+  render() {
+    return te(Le, null, this.props.children ?? []);
+  }
+  onDestroy() {
+    var e;
+    (e = this.unregister) == null || e.call(this), this.unregister = null;
+  }
+}
+class Si extends g {
+  constructor() {
+    super(...arguments);
+    a(this, "registration", null);
+  }
+  initialize() {
+    const e = this._runtime.router;
+    if (e == null || this._routeContext == null)
+      throw new Error("RouteValue requires a router and contextual route scope");
+    this.registration = e.registerValueRoute(this._routeContext, this, {
+      route: this.props.route,
+      valueEmitter: this.props.valueEmitter,
+      ...this.props.resolve == null ? {} : { resolve: this.props.resolve }
+    }), this.watch(this.props.valueEmitter);
+  }
+  render() {
+    const e = this.props.valueEmitter.get(), i = this.props.children ?? [];
+    return !this.props.scopeChildren || e == null || this.registration == null ? te(Le, null, i) : te(je, {
+      key: this.registration.contextFor(e).pathname,
+      context: this.registration.contextFor(e),
+      children: i
+    });
+  }
+  onDestroy() {
+    var e;
+    (e = this.registration) == null || e.dispose(), this.registration = null;
+  }
+}
 export {
-  Ge as BaseSelectionHandler,
-  ne as Button,
-  D as Checkbox,
-  Me as ColorPicker,
-  y as Component,
-  X as DataTable,
-  xt as DefaultTableFilterEncoding,
-  Pe as DescriptionItem,
-  Re as DescriptionList,
-  Oe as Dialog,
-  ee as Dropdown,
-  b as FilterMode,
-  U as FilterPanel,
-  br as Fragment,
-  gr as FrayRuntime,
-  Q as ListView,
-  lt as MultiSelectionHandler,
-  ce as Panel,
-  M as Placeholder,
-  pe as ProgressBar,
-  Ce as QuadCheckbox,
-  yr as ServiceScope,
-  st as Sidebar,
-  Ee as SingleSelectionHandler,
-  de as SplitView,
-  wr as StyleRegistry,
-  qe as Tab,
-  V as TabLine,
-  _ as TabPanel,
-  ge as TableHeader,
-  J as TableHeaderCell,
-  te as Textbox,
-  He as ThemePicker,
-  Ae as Toggle,
-  he as Toolbar,
-  Je as TreeItem,
-  Z as TreeView,
-  Ke as TriCheckbox,
-  Tt as applyLocalTableState,
-  Qe as assertSort,
-  B as assertTreeNodes,
-  Er as createFrayRuntime,
-  Ct as createHandlerTableDataSource,
-  Ot as createLocalTableDataSource,
-  cr as createQueryTableDataSource,
-  Kt as createRestTableDataSource,
-  se as createSelectionHandler,
-  Sr as createServiceScope,
-  Ir as createStyleRegistry,
-  S as css,
-  kr as defaultFrayRuntime,
-  Se as defaultItemKey,
-  xr as defineService,
-  nr as deriveFilterPredicate,
-  or as deriveFilteredItems,
-  ur as deriveTreeNode,
-  ot as filterByState,
-  re as findFrayStylesheetOption,
-  dr as findTreeNode,
-  Xt as frayColorOptions,
-  Yt as frayThemeOptions,
-  pr as frayThemeVariableCatalog,
-  vr as h,
-  le as isFilterMode,
-  u as jsx,
-  Tr as jsxDEV,
+  Et as BaseSelectionHandler,
+  Kr as BrowserRouter,
+  fe as Button,
+  q as Checkbox,
+  ct as ColorPicker,
+  g as Component,
+  ie as DataTable,
+  er as DefaultTableFilterEncoding,
+  yt as DescriptionItem,
+  Ze as DescriptionList,
+  tt as Dialog,
+  ne as Dropdown,
+  y as FilterMode,
+  Q as FilterPanel,
+  Le as Fragment,
+  Ti as FrayRuntime,
+  Z as ListView,
+  ai as MemoryNavigationAdapter,
+  Kt as MultiSelectionHandler,
+  Ee as Panel,
+  H as Placeholder,
+  ke as ProgressBar,
+  rt as QuadCheckbox,
+  ee as RadioButton,
+  oe as RadioGroup,
+  xi as RouteLink,
+  vi as RouteQuery,
+  De as RouteRedirect,
+  je as RouteScope,
+  Be as RouteUnavailableError,
+  Si as RouteValue,
+  Ri as ServiceScope,
+  qt as Sidebar,
+  Fe as SingleSelectionHandler,
+  xe as SplitView,
+  Ci as StyleRegistry,
+  ft as Tab,
+  U as TabLine,
+  re as TabPanel,
+  Ne as TableHeader,
+  Y as TableHeaderCell,
+  ae as Textbox,
+  lt as ThemePicker,
+  ot as Toggle,
+  Se as Toolbar,
+  St as TreeItem,
+  se as TreeView,
+  it as TriCheckbox,
+  rr as applyLocalTableState,
+  qr as assertRouteCodec,
+  B as assertRouteDescriptor,
+  Dr as assertRouteQueryCodec,
+  we as assertRouteTarget,
+  xt as assertSort,
+  W as assertTreeNodes,
+  hi as booleanRouteQueryCodec,
+  wi as createBrowserRouter,
+  $i as createFrayRuntime,
+  lr as createHandlerTableDataSource,
+  ci as createHashNavigation,
+  li as createHistoryNavigation,
+  ar as createLocalTableDataSource,
+  ri as createQueryTableDataSource,
+  cr as createRestTableDataSource,
+  pe as createSelectionHandler,
+  Oi as createServiceScope,
+  ji as createStyleRegistry,
+  x as css,
+  Ai as defaultFrayRuntime,
+  He as defaultItemKey,
+  pi as defineRoute,
+  fi as defineRouteParameter,
+  Ni as defineService,
+  Xr as deriveFilterPredicate,
+  Yr as deriveFilteredItems,
+  si as deriveTreeNode,
+  zt as filterByState,
+  le as findFrayStylesheetOption,
+  ii as findTreeNode,
+  Te as formatRouteTarget,
+  Cr as frayColorOptions,
+  Rr as frayThemeOptions,
+  oi as frayThemeVariableCatalog,
+  te as h,
+  ye as isFilterMode,
+  _e as isRouteDescriptor,
+  Nr as isRouteTarget,
+  h as jsx,
+  qi as jsxDEV,
   w as jsxs,
-  Rr as live,
-  Be as matchesFilterState,
-  lr as parseFilterState,
-  Nr as provideService,
-  Zt as replaceFrayStylesheet,
-  ar as serializeFilterState,
-  vt as serializeTableQuery,
-  $r as styleRegistry,
-  Le as tabButtonId,
-  Ve as tabPanelId,
-  qt as updateTreeNode,
-  hr as updateWritableTreeNode
+  Di as live,
+  wt as matchesFilterState,
+  D as normalizeRouteLocation,
+  ti as parseFilterState,
+  zi as provideService,
+  yi as redirectTo,
+  $r as replaceFrayStylesheet,
+  mi as routeParameter,
+  bi as routeTarget,
+  ei as serializeFilterState,
+  tr as serializeTableQuery,
+  ui as stringRouteCodec,
+  di as stringRouteQueryCodec,
+  Li as styleRegistry,
+  mt as tabButtonId,
+  bt as tabPanelId,
+  br as updateTreeNode,
+  ni as updateWritableTreeNode,
+  Ei as waitForRouteValue,
+  gi as withRouteQuery
 };
 //# sourceMappingURL=index.js.map