@sylwellsoftware/fray 1.0.0 → 1.1.0

package/dist/index.js

@@ -1,15 +1,15 @@
-var Nt = Object.defineProperty;
-var Lt = (t, r, e) => r in t ? Nt(t, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[r] = e;
-var a = (t, r, e) => Lt(t, typeof r != "symbol" ? r + "" : r, e);
-import { C as g, j as p, c as E, h as w, F as xe, a as v, i as be } from "./jsx-dev-runtime-CRDpvXOH.js";
-import { b as Gi, S as Yi, d as Ji, e as Zi, f as Xi, g as eo, k as to, l as ro, m as io, n as oo, p as so, s as no } from "./jsx-dev-runtime-CRDpvXOH.js";
-import { Emitter as I, DerivedEmitter as ke, FetchState as S, QueryArg as dt, LiveQuery as Ft, RestQueryHandler as Dt } from "@sylwellsoftware/glue";
-class Be extends g {
+var Mt = Object.defineProperty;
+var Ht = (t, r, e) => r in t ? Mt(t, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[r] = e;
+var a = (t, r, e) => Ht(t, typeof r != "symbol" ? r + "" : r, e);
+import { C as g, j as p, c as E, h as w, F as Ie, a as v, i as we } from "./jsx-dev-runtime-8s_xIag_.js";
+import { b as to, S as ro, d as io, e as oo, f as so, g as no, k as ao, l as lo, m as co, n as uo, p as ho, s as po } from "./jsx-dev-runtime-8s_xIag_.js";
+import { Emitter as I, DerivedEmitter as Te, FetchState as S, QueryArg as bt, LiveQuery as Vt, RestQueryHandler as Ut } from "@sylwellsoftware/glue";
+class Ye extends g {
   render() {
     return this.props.children ?? [];
   }
 }
-a(Be, "liveProps", []);
+a(Ye, "liveProps", []);
 const y = {
   /** Deny mode: Excludes items that match the filter. */
   Deny: "deny",
@@ -20,24 +20,24 @@ const y = {
   /** Neutral mode: Does not affect the inclusion or exclusion of items. */
   Neutral: "neutral"
 };
-function Se(t) {
+function Re(t) {
   return Object.values(y).some((r) => r === t);
 }
-let Pt = 1;
-function C(t, r) {
-  return r != null && String(r).length > 0 ? String(r) : `fray-${t}-${Pt++}`;
+let _t = 1;
+function R(t, r) {
+  return r != null && String(r).length > 0 ? String(r) : `fray-${t}-${_t++}`;
 }
-function L(t, r, e, i) {
+function F(t, r, e, i) {
   if (r.valueEmitter != null)
-    return Kt(r.valueEmitter, "valueEmitter"), r.valueEmitter;
+    return Qt(r.valueEmitter, "valueEmitter"), r.valueEmitter;
   const o = r.defaultValue ?? r.value ?? r.initialValue ?? e, s = { owner: t, purpose: i };
   return new I(o, s);
 }
-function Kt(t, r = "emitter") {
+function Qt(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`);
 }
-function Mt(...t) {
+function Bt(...t) {
   return t.flatMap((r) => typeof r == "string" ? r.split(/\s+/) : []).filter(Boolean).join(" ");
 }
 function x(t) {
@@ -49,22 +49,22 @@ function $(t, ...r) {
     t(...r);
   }
 }
-function ge(t, r = "options") {
+function ve(t, r = "options") {
   if (!Array.isArray(t)) throw new TypeError(`${r} must be an array`);
 }
-function Ht(t) {
-  return Se(t) ? t : String(t);
+function Wt(t) {
+  return Re(t) ? t : String(t);
 }
-class Z extends g {
+class X extends g {
   constructor(e = {}) {
     var s;
     super(e);
     a(this, "valueEmitter");
     a(this, "activeTabEmitter");
     const i = e.tabs ?? [];
-    ut(i);
+    gt(i);
     const o = { ...e };
-    o.valueEmitter == null && e.activeTabEmitter != null && (o.valueEmitter = e.activeTabEmitter), o.defaultValue == null && e.initialActiveTabId != null && (o.defaultValue = e.initialActiveTabId), this.valueEmitter = L(
+    o.valueEmitter == null && e.activeTabEmitter != null && (o.valueEmitter = e.activeTabEmitter), o.defaultValue == null && e.initialActiveTabId != null && (o.defaultValue = e.initialActiveTabId), this.valueEmitter = F(
       this,
       o,
       ((s = i.find((n) => !n.disabled)) == null ? void 0 : s.id) ?? null,
@@ -79,7 +79,7 @@ class Z extends g {
   }
   render() {
     const { tabs: e = [], label: i = "Sections", baseId: o = "fray-tabs" } = this.props;
-    ut(e);
+    gt(e);
     const s = this.valueEmitter.get(), n = this.Host;
     return /* @__PURE__ */ p(
       n,
@@ -90,12 +90,12 @@ class Z extends g {
         children: e.map((l, c) => /* @__PURE__ */ p(
           "button",
           {
-            id: It(o, l.id),
+            id: Ot(o, l.id),
             type: "button",
             role: "tab",
             disabled: !!l.disabled,
             "aria-selected": Object.is(s, l.id) ? "true" : "false",
-            "aria-controls": Tt(o, l.id),
+            "aria-controls": At(o, l.id),
             tabIndex: Object.is(s, l.id) ? 0 : -1,
             onClick: (u) => this.selectTab(l, u),
             onKeyDown: (u) => this.handleKeyDown(u, c, e),
@@ -127,7 +127,7 @@ class Z extends g {
     }
   }
 }
-a(Z, "liveProps", []), a(Z, "hostName", "tab-line"), a(Z, "css", E`
+a(X, "liveProps", []), a(X, "hostName", "tab-line"), a(X, "css", E`
         & {
             display: flex;
             background: var(--tabline-background);
@@ -191,16 +191,16 @@ a(Z, "liveProps", []), a(Z, "hostName", "tab-line"), a(Z, "css", E`
         }
 
     `);
-function It(t, r) {
-  return `${t}-tab-${Rt(r)}`;
+function Ot(t, r) {
+  return `${t}-tab-${jt(r)}`;
 }
-function Tt(t, r) {
-  return `${t}-panel-${Rt(r)}`;
+function At(t, r) {
+  return `${t}-panel-${jt(r)}`;
 }
-function Rt(t) {
+function jt(t) {
   return encodeURIComponent(String(t)).replaceAll("%", "-");
 }
-function ut(t) {
+function gt(t) {
   if (!Array.isArray(t)) throw new TypeError("TabLine tabs must be an array");
   const r = /* @__PURE__ */ new Set();
   for (const e of t) {
@@ -209,7 +209,7 @@ function ut(t) {
     r.add(e.id);
   }
 }
-class ye extends g {
+class Ee extends g {
   constructor() {
     super(...arguments);
     a(this, "closeScope", null);
@@ -220,7 +220,7 @@ class ye extends g {
     this.closeScope = e.openScope(this.props.context, this);
   }
   render() {
-    return w(xe, null, this.props.children ?? []);
+    return w(Ie, null, this.props.children ?? []);
   }
   afterMount() {
     var e;
@@ -234,8 +234,8 @@ class ye extends g {
     (e = this.closeScope) == null || e.call(this), this.closeScope = null;
   }
 }
-a(ye, "liveProps", []);
-class oe extends g {
+a(Ee, "liveProps", []);
+class ne extends g {
   constructor(e = {}) {
     var s;
     super(e);
@@ -243,28 +243,28 @@ class oe extends g {
     a(this, "activeTabEmitter");
     a(this, "baseId");
     a(this, "routeContexts", /* @__PURE__ */ new Map());
-    const i = J(e), o = { ...e };
-    o.valueEmitter == null && e.activeTabEmitter != null && (o.valueEmitter = e.activeTabEmitter), o.defaultValue == null && e.initialActiveTabId != null && (o.defaultValue = e.initialActiveTabId), this.valueEmitter = L(
+    const i = Z(e), o = { ...e };
+    o.valueEmitter == null && e.activeTabEmitter != null && (o.valueEmitter = e.activeTabEmitter), o.defaultValue == null && e.initialActiveTabId != null && (o.defaultValue = e.initialActiveTabId), this.valueEmitter = F(
       this,
       o,
       ((s = i.find((n) => !n.disabled)) == null ? void 0 : s.id) ?? null,
       "active tab"
-    ), this.activeTabEmitter = this.valueEmitter, this.baseId = C("tabs", e.id);
+    ), this.activeTabEmitter = this.valueEmitter, this.baseId = R("tabs", e.id);
   }
   initialize() {
     var i;
-    const e = J(this.props);
+    const e = Z(this.props);
     e.some(({ id: o }) => Object.is(o, this.valueEmitter.get())) || this.valueEmitter.set(((i = e.find((o) => !o.disabled)) == null ? void 0 : i.id) ?? null), this.registerRoutes(e), this.watch(this.valueEmitter);
   }
   setProps(e) {
     var o;
     super.setProps(e);
-    const i = J(e);
+    const i = Z(e);
     return i.some(({ id: s }) => Object.is(s, this.valueEmitter.get())) || this.valueEmitter.set(((o = i.find((s) => !s.disabled)) == null ? void 0 : o.id) ?? null), this.registerRoutes(i), this;
   }
   render() {
     var s;
-    const e = J(this.props), i = (s = e.find(({ id: n }) => Object.is(n, this.valueEmitter.get())) ?? e.find((n) => !n.disabled) ?? null) == null ? void 0 : s.id, o = this.Host;
+    const e = Z(this.props), i = (s = e.find(({ id: n }) => Object.is(n, this.valueEmitter.get())) ?? e.find((n) => !n.disabled) ?? null) == null ? void 0 : s.id, o = this.Host;
     return /* @__PURE__ */ v(
       o,
       {
@@ -272,7 +272,7 @@ class oe extends g {
         className: x(this.props) || null,
         children: [
           /* @__PURE__ */ p(
-            Z,
+            X,
             {
               tabs: e.map(({ id: n, label: l, disabled: c }) => ({ id: n, label: l, disabled: c })),
               valueEmitter: this.valueEmitter,
@@ -288,9 +288,9 @@ class oe extends g {
             return /* @__PURE__ */ p(
               "section",
               {
-                id: Tt(this.baseId, n.id),
+                id: At(this.baseId, n.id),
                 role: "tabpanel",
-                "aria-labelledby": It(this.baseId, n.id),
+                "aria-labelledby": Ot(this.baseId, n.id),
                 tabIndex: l ? 0 : -1,
                 hidden: !l,
                 children: this.routedContent(n)
@@ -328,15 +328,15 @@ class oe extends g {
   }
   selectTab(e, i) {
     var n;
-    const o = J(this.props).find(({ id: l }) => Object.is(l, e.id)), s = (o == null ? void 0 : o.route) == null ? null : this.routeContexts.get(o.route);
+    const o = Z(this.props).find(({ id: l }) => Object.is(l, e.id)), s = (o == null ? void 0 : o.route) == null ? null : this.routeContexts.get(o.route);
     s == null ? this.valueEmitter.set(e.id, "tab selected") : (n = this._runtime.router) == null || n.navigate(s);
   }
   routedContent(e) {
     const i = e.route == null ? null : this.routeContexts.get(e.route);
-    return i == null ? e.content : /* @__PURE__ */ p(ye, { context: i, children: e.content }, i.pathname);
+    return i == null ? e.content : /* @__PURE__ */ p(Ee, { context: i, children: e.content }, i.pathname);
   }
 }
-a(oe, "liveProps", []), a(oe, "dependencies", [ye, Z, Be]), a(oe, "hostName", "tab-panel"), a(oe, "css", E`
+a(ne, "liveProps", []), a(ne, "dependencies", [Ee, X, Ye]), a(ne, "hostName", "tab-panel"), a(ne, "css", E`
         & {
             background: var(--panel-background);
             border-radius: var(--panel-radius);
@@ -367,11 +367,11 @@ a(oe, "liveProps", []), a(oe, "dependencies", [ye, Z, Be]), a(oe, "hostName", "t
             margin-inline-start: -3px;
         }
     `);
-function J(t) {
+function Z(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((n) => be(n) && n.type === Be).map((n, l) => {
-    if (!be(n)) throw new TypeError("TabPanel children must be Tab nodes");
+  const i = (Array.isArray(t.children) ? t.children : t.children == null ? [] : [t.children]).filter((n) => we(n) && n.type === Ye).map((n, l) => {
+    if (!we(n)) throw new TypeError("TabPanel children must be Tab nodes");
     const c = n.props;
     return {
       id: c.id ?? `tab-${l + 1}`,
@@ -394,12 +394,12 @@ function J(t) {
   }
   return o;
 }
-class H extends g {
+class L extends g {
   constructor(e = {}) {
     super(e);
     a(this, "headerId");
     a(this, "headingId");
-    this.headerId = C("header", e.id), this.headingId = C("header-title", e.headingId ?? `${this.headerId}-title`);
+    this.headerId = R("header", e.id), this.headingId = R("header-title", e.headingId ?? `${this.headerId}-title`);
   }
   render() {
     const { level: e = 2, children: i = [] } = this.props;
@@ -416,7 +416,7 @@ class H extends g {
     );
   }
 }
-a(H, "liveProps", []), a(H, "hostName", "header"), a(H, "css", E`
+a(L, "liveProps", []), a(L, "hostName", "header"), a(L, "css", E`
         & {
             display: block;
             color: var(--section-header-color);
@@ -437,13 +437,93 @@ a(H, "liveProps", []), a(H, "hostName", "header"), a(H, "css", E`
             font: inherit;
         }
     `);
-const Vt = ["disabled"];
-class se extends g {
+class ae extends g {
+  constructor(e) {
+    super(e);
+    a(this, "panelId");
+    a(this, "headerId");
+    this.panelId = R("group-panel", e.id), this.headerId = `${this.panelId}-title`;
+  }
+  render() {
+    const { header: e, children: i = [] } = this.props;
+    return this.renderGroupPanel(e, i);
+  }
+  renderGroupPanel(e, i) {
+    const o = this.Host;
+    return /* @__PURE__ */ v(
+      o,
+      {
+        id: this.panelId,
+        role: "group",
+        className: x(this.props) || null,
+        "aria-labelledby": this.headerId,
+        children: [
+          /* @__PURE__ */ p(
+            L,
+            {
+              id: `${this.panelId}-header`,
+              headingId: this.headerId,
+              children: e
+            }
+          ),
+          w("fray-content", null, i)
+        ]
+      }
+    );
+  }
+}
+a(ae, "liveProps", []), a(ae, "hostName", "group-panel"), a(ae, "dependencies", [L]), a(ae, "css", E`
+        & {
+            display: grid;
+            grid-template-columns: 1.5rem minmax(0, 1fr);
+            align-items: stretch;
+            box-sizing: border-box;
+            min-width: 0;
+            min-height: 0;
+            column-gap: 0.35rem;
+            row-gap: 0;
+            padding-block: 0.125rem;
+            padding-inline: 0.125rem 0.35rem;
+            border: 1px solid var(--ui-border-color);
+            border-radius: var(--ui-border-radius);
+        }
+
+        & > fray-header {
+            display: grid;
+            place-items: center;
+            box-sizing: border-box;
+            width: 100%;
+            min-width: 0;
+            min-height: 0;
+            padding: 0.125em;
+            border-radius: var(--ui-border-radius);
+        }
+
+        & > fray-header > h1,
+        & > fray-header > h2,
+        & > fray-header > h3,
+        & > fray-header > h4,
+        & > fray-header > h5,
+        & > fray-header > h6 {
+            font-weight: 650;
+            white-space: nowrap;
+            writing-mode: vertical-rl;
+            transform: rotate(180deg);
+        }
+
+        & > fray-content {
+            display: block;
+            min-width: 0;
+            min-height: 0;
+        }
+    `);
+const Gt = ["disabled"];
+class le extends g {
   constructor(e = {}) {
     super(e);
     a(this, "panelId");
     a(this, "headerId");
-    this.panelId = C("panel", e.id), this.headerId = `${this.panelId}-title`;
+    this.panelId = R("panel", e.id), this.headerId = `${this.panelId}-title`;
   }
   render() {
     const {
@@ -456,7 +536,7 @@ class se extends g {
     if (!["horizontal", "vertical"].includes(s))
       throw new TypeError("Panel orientation must be horizontal or vertical");
     const l = this.Host, c = e == null ? null : /* @__PURE__ */ p(
-      H,
+      L,
       {
         id: `${this.panelId}-header`,
         headingId: this.headerId,
@@ -480,7 +560,7 @@ class se extends g {
     );
   }
 }
-a(se, "liveProps", Vt), a(se, "hostName", "panel"), a(se, "dependencies", [H]), a(se, "css", E`
+a(le, "liveProps", Gt), a(le, "hostName", "panel"), a(le, "dependencies", [L]), a(le, "css", E`
         & {
             background: var(--panel-background);
             border: var(--panel-border);
@@ -513,12 +593,12 @@ a(se, "liveProps", Vt), a(se, "hostName", "panel"), a(se, "dependencies", [H]),
             opacity: .65;
         }
     `);
-class ne extends g {
+class ce extends g {
   constructor(e = {}) {
     super(e);
     a(this, "sidebarId");
     a(this, "headerId");
-    this.sidebarId = C("sidebar", e.id), this.headerId = `${this.sidebarId}-title`;
+    this.sidebarId = R("sidebar", e.id), this.headerId = `${this.sidebarId}-title`;
   }
   render() {
     const {
@@ -527,7 +607,7 @@ class ne extends g {
       ariaLabel: o,
       children: s = []
     } = this.props, n = this.Host, l = e == null ? null : /* @__PURE__ */ p(
-      H,
+      L,
       {
         id: `${this.sidebarId}-header`,
         headingId: this.headerId,
@@ -549,7 +629,7 @@ class ne extends g {
     ) });
   }
 }
-a(ne, "liveProps", []), a(ne, "hostName", "sidebar"), a(ne, "dependencies", [H]), a(ne, "css", E`
+a(ce, "liveProps", []), a(ce, "hostName", "sidebar"), a(ce, "dependencies", [L]), a(ce, "css", E`
         & {
             display: flex;
             min-width: 0;
@@ -576,7 +656,7 @@ a(ne, "liveProps", []), a(ne, "hostName", "sidebar"), a(ne, "dependencies", [H])
             overflow: auto;
         }
     `);
-class Te extends g {
+class ze extends g {
   render() {
     const {
       primary: r = null,
@@ -594,7 +674,7 @@ class Te extends g {
     return /* @__PURE__ */ v(
       l,
       {
-        className: Mt(x(this.props), i),
+        className: Bt(x(this.props), i),
         style: o == null ? void 0 : { "--split-primary-size": o },
         children: [
           w("fray-primary", {
@@ -612,7 +692,7 @@ class Te extends g {
     );
   }
 }
-a(Te, "liveProps", []), a(Te, "hostName", "split-view"), a(Te, "css", E`
+a(ze, "liveProps", []), a(ze, "hostName", "split-view"), a(ze, "css", E`
         & {
             display: flex;
             flex: 1 1 auto;
@@ -652,7 +732,7 @@ a(Te, "liveProps", []), a(Te, "hostName", "split-view"), a(Te, "css", E`
             border-block-end: 1px solid var(--ui-border-color);
         }
     `);
-class Ct extends g {
+class qt extends g {
   render() {
     const { term: r, value: e, children: i = [] } = this.props;
     return [
@@ -661,14 +741,14 @@ class Ct extends g {
     ];
   }
 }
-a(Ct, "liveProps", []);
-class ae extends g {
+a(qt, "liveProps", []);
+class de extends g {
   render() {
     const r = this.Host;
     return /* @__PURE__ */ p(r, { className: x(this.props) || null, children: /* @__PURE__ */ p("dl", { "aria-label": this.props.label, children: this.props.children ?? [] }) });
   }
 }
-a(ae, "liveProps", []), a(ae, "hostName", "descriptionlist"), a(ae, "dependencies", [Ct]), a(ae, "css", E`
+a(de, "liveProps", []), a(de, "hostName", "descriptionlist"), a(de, "dependencies", [qt]), a(de, "css", E`
         & {
             display: block;
         }
@@ -678,13 +758,13 @@ a(ae, "liveProps", []), a(ae, "hostName", "descriptionlist"), a(ae, "dependencie
             margin: 0;
         }
     `);
-class V extends g {
+class H extends g {
   render() {
-    const r = Ut(this.props.width ?? 65), e = this.Host;
+    const r = Yt(this.props.width ?? 65), e = this.Host;
     return /* @__PURE__ */ p(e, { style: { width: `${r}%` }, "aria-hidden": "true" });
   }
 }
-a(V, "liveProps", []), a(V, "hostName", "placeholder"), a(V, "css", E`
+a(H, "liveProps", []), a(H, "hostName", "placeholder"), a(H, "css", E`
         & {
             display: block;
             width: 5em;
@@ -722,13 +802,13 @@ a(V, "liveProps", []), a(V, "hostName", "placeholder"), a(V, "css", E`
             }
         }
     `);
-function Ut(t) {
+function Yt(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 zt(t, r, e) {
-  We(e);
+function Nt(t, r, e) {
+  Je(e);
   for (const i of e) {
     const o = r[i.key];
     if (o == null) continue;
@@ -744,26 +824,26 @@ function zt(t, r, e) {
   }
   return !0;
 }
-function _t(t, r, e) {
+function Jt(t, r, e) {
   if (!Array.isArray(t)) throw new TypeError("Filtered items must be an array");
-  return t.filter((i) => zt(i, r, e));
+  return t.filter((i) => Nt(i, r, e));
 }
-function xi(t, r, e = null) {
-  return We(r), new ke(
+function Ci(t, r, e = null) {
+  return Je(r), new Te(
     [t],
-    ([i]) => (o) => zt(o, i, r),
+    ([i]) => (o) => Nt(o, i, r),
     { owner: e, purpose: "filter predicate" }
   );
 }
-function ki(t, r, e, i = null) {
-  return We(e), new ke(
+function zi(t, r, e, i = null) {
+  return Je(e), new Te(
     [t, r],
-    ([o, s]) => _t(o, s, e),
+    ([o, s]) => Jt(o, s, e),
     { owner: i, purpose: "filtered items" }
   );
 }
-function Si(t) {
-  Qt(t);
+function $i(t) {
+  Zt(t);
   const r = {};
   for (const e of Object.keys(t).sort()) {
     const i = {}, o = t[e];
@@ -773,16 +853,16 @@ function Si(t) {
   }
   return { version: 1, dimensions: r };
 }
-function Ii(t) {
-  if (!X(t) || t.version !== 1 || !X(t.dimensions))
+function Oi(t) {
+  if (!ee(t) || t.version !== 1 || !ee(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 (G(e, "Filter dimension"), !X(i))
+    if (W(e, "Filter dimension"), !ee(i))
       throw new TypeError(`Filter dimension ${e} must be an object`);
     const o = {};
     for (const [s, n] of Object.entries(i)) {
-      if (G(s, `Filter option in ${e}`), !Se(n))
+      if (W(s, `Filter option in ${e}`), !Re(n))
         throw new TypeError(
           `Unknown filter mode for ${e}.${s}: ${String(n)}`
         );
@@ -792,46 +872,46 @@ function Ii(t) {
   }
   return r;
 }
-function Qt(t) {
-  if (!X(t)) throw new TypeError("Filter state must be an object");
+function Zt(t) {
+  if (!ee(t)) throw new TypeError("Filter state must be an object");
   for (const [r, e] of Object.entries(t)) {
-    if (G(r, "Filter dimension"), !X(e))
+    if (W(r, "Filter dimension"), !ee(e))
       throw new TypeError(`Filter dimension ${r} must be an object`);
     for (const [i, o] of Object.entries(e))
-      if (G(i, `Filter option in ${r}`), !Se(o))
+      if (W(i, `Filter option in ${r}`), !Re(o))
         throw new TypeError(
           `Unknown filter mode for ${r}.${i}: ${String(o)}`
         );
   }
 }
-function We(t) {
+function Je(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 (G(e.key, "Filter dimension"), r.has(e.key))
+    if (W(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 o of e.options) {
-      if (G(o.key, `Filter option in ${e.key}`), i.has(o.key))
+      if (W(o.key, `Filter option in ${e.key}`), i.has(o.key))
         throw new Error(`Duplicate filter option: ${e.key}.${o.key}`);
       if (i.add(o.key), typeof o.matches != "function")
         throw new TypeError(`Filter matcher ${e.key}.${o.key} must be a function`);
     }
   }
 }
-function G(t, r) {
+function W(t, r) {
   if (t.length === 0 || t === "__proto__" || t === "prototype" || t === "constructor")
     throw new TypeError(`${r} key is not safe for persisted state`);
 }
-function X(t) {
+function ee(t) {
   return t != null && typeof t == "object" && !Array.isArray(t);
 }
-class $t {
+class Lt {
   constructor({
     getItems: r,
-    getKey: e = Ye,
+    getKey: e = Xe,
     selectedItemsEmitter: i,
     owner: o = null
   }) {
@@ -859,7 +939,7 @@ class $t {
     this.getItems = r, this.getKey = e, this.ownedSelectedItemsEmitter = i == null ? new I([], { owner: o, 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 = Gt(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 = tr(this.activeIndex, this.rows.length), this.reconcileSelectedItems(), this.syncRows());
   }
   wireRow(r, e) {
     const i = (l) => this.handleClick(e, l), o = (l) => this.handleKeyDown(e, l), s = (l) => this.handleMouseDown(e, l, r), n = (l) => this.handleMouseEnter(e, l);
@@ -947,7 +1027,7 @@ class $t {
     this.destroyed || (this.destroyed = !0, this.finishDrag(!1), this.clearClickSuppression(), this.releaseRows(), (r = this.ownedSelectedItemsEmitter) == null || r.dispose());
   }
 }
-class Ge extends $t {
+class Ze extends Lt {
   constructor(e) {
     const i = e.selectedItemEmitter == null ? new I(null, {
       owner: e.owner,
@@ -957,7 +1037,7 @@ class Ge extends $t {
       getItems: e.getItems,
       ...e.getKey == null ? {} : { getKey: e.getKey },
       ...e.owner === void 0 ? {} : { owner: e.owner },
-      selectedItemsEmitter: new Wt(o)
+      selectedItemsEmitter: new er(o)
     });
     a(this, "selectedItemEmitter");
     a(this, "selectedItem$");
@@ -976,16 +1056,16 @@ class Ge extends $t {
     super.destroy(), (e = this.ownedSelectedItemEmitter) == null || e.dispose();
   }
 }
-class Bt extends $t {
+class Xt extends Lt {
   selectIndex(r, e) {
     const i = this.getItems(), o = i[r];
     if (o !== void 0) {
       if (e.shiftKey && this.anchorIndex != null) {
-        const s = Math.min(this.anchorIndex, r), n = Math.max(this.anchorIndex, r), l = i.slice(s, n + 1), c = Re(e) ? ht(this.getSelectedItems(), l, this.getKey) : [...l];
+        const s = Math.min(this.anchorIndex, r), n = Math.max(this.anchorIndex, r), l = i.slice(s, n + 1), c = $e(e) ? yt(this.getSelectedItems(), l, this.getKey) : [...l];
         this.setSelectedItems(c, "range selection changed");
         return;
       }
-      if (Re(e) || "key" in e && e.key === " ") {
+      if ($e(e) || "key" in e && e.key === " ") {
         const s = this.getSelectedItems(), n = this.getKey(o, r), c = s.some((u, h) => Object.is(this.getKey(u, h), n)) ? s.filter((u, h) => !Object.is(this.getKey(u, h), n)) : [...s, o];
         this.anchorIndex = r, this.setSelectedItems(c, "multi selection toggled");
         return;
@@ -1000,14 +1080,14 @@ class Bt extends $t {
     return !0;
   }
   selectDragRange(r, e, i) {
-    const o = this.getItems(), s = Math.min(r, e), n = Math.max(r, e), l = o.slice(s, n + 1), c = Re(i) ? ht(this.getSelectedItems(), l, this.getKey) : [...l];
+    const o = this.getItems(), s = Math.min(r, e), n = Math.max(r, e), l = o.slice(s, n + 1), c = $e(i) ? yt(this.getSelectedItems(), l, this.getKey) : [...l];
     this.anchorIndex = r, this.setSelectedItems(c, "drag selection changed");
   }
 }
-function we(t) {
-  return t.multiSelect ? new Bt(t) : new Ge(t);
+function xe(t) {
+  return t.multiSelect ? new Xt(t) : new Ze(t);
 }
-class Wt {
+class er {
   constructor(r) {
     this.source = r;
   }
@@ -1031,7 +1111,7 @@ class Wt {
     }), e);
   }
 }
-function Ye(t, r) {
+function Xe(t, r) {
   if (t != null && typeof t == "object") {
     const e = Reflect.get(t, "id");
     if (e != null) return e;
@@ -1041,13 +1121,13 @@ function Ye(t, r) {
     `Selection item at index ${r} needs an id or an explicit itemKey/rowKey`
   );
 }
-function Re(t) {
+function $e(t) {
   return !!(t.ctrlKey || t.metaKey);
 }
-function Gt(t, r) {
+function tr(t, r) {
   return r <= 0 ? 0 : Math.min(Math.max(t, 0), r - 1);
 }
-function ht(t, r, e) {
+function yt(t, r, e) {
   const i = [...t], o = new Set(t.map((s, n) => e(s, n)));
   for (const s of r) {
     const n = e(s, i.length);
@@ -1055,7 +1135,7 @@ function ht(t, r, e) {
   }
   return i;
 }
-class le extends g {
+class ue extends g {
   constructor(e = {}) {
     super(e);
     a(this, "itemsEmitter");
@@ -1067,21 +1147,21 @@ class le extends g {
     a(this, "getItemKey");
     a(this, "selectionHandler");
     a(this, "ownedItemsEmitter");
-    Jt(e.items) ? (this.itemsEmitter = e.items, this.ownedItemsEmitter = null) : (this.ownedItemsEmitter = new I(e.items ?? [], {
+    ir(e.items) ? (this.itemsEmitter = e.items, this.ownedItemsEmitter = null) : (this.ownedItemsEmitter = new I(e.items ?? [], {
       owner: this,
       purpose: "list items"
-    }), this.itemsEmitter = this.ownedItemsEmitter), this.items$ = this.itemsEmitter, this.getItemKey = Yt(e.itemKey), this.selectionHandler = e.multiSelect === !0 ? we({
+    }), this.itemsEmitter = this.ownedItemsEmitter), this.items$ = this.itemsEmitter, this.getItemKey = rr(e.itemKey), this.selectionHandler = e.multiSelect === !0 ? xe({
       owner: this,
       multiSelect: !0,
       ...e.selectedItemsEmitter == null ? {} : { selectedItemsEmitter: e.selectedItemsEmitter },
       getItems: () => this.itemsEmitter.get(),
       getKey: this.getItemKey
-    }) : we({
+    }) : xe({
       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 Ge ? this.selectionHandler.selectedItemEmitter : null, this.selectedItem$ = this.selectedItemEmitter;
+    }), this.selectedItemsEmitter = this.selectionHandler.selectedItemsEmitter, this.selectedItems$ = this.selectedItemsEmitter, this.selectedItemEmitter = this.selectionHandler instanceof Ze ? this.selectionHandler.selectedItemEmitter : null, this.selectedItem$ = this.selectedItemEmitter;
   }
   initialize() {
     this.watch(this.itemsEmitter, this.selectedItemsEmitter);
@@ -1095,10 +1175,10 @@ class le extends g {
       {
         className: x(this.props) || null,
         children: [
-          i === S.Error ? /* @__PURE__ */ p("p", { role: "alert", children: er(o, "Unable to load items") }) : null,
-          s && e.length === 0 ? /* @__PURE__ */ v(xe, { children: [
+          i === S.Error ? /* @__PURE__ */ p("p", { role: "alert", children: nr(o, "Unable to load items") }) : null,
+          s && e.length === 0 ? /* @__PURE__ */ v(Ie, { children: [
             /* @__PURE__ */ p("p", { role: "status", children: "Loading items…" }),
-            /* @__PURE__ */ p("ul", { "aria-hidden": "true", children: Array.from({ length: this.props.placeholderCount ?? 5 }, (c, u) => /* @__PURE__ */ p("li", { children: /* @__PURE__ */ p(V, { width: 45 + u * 7 }) }, `placeholder-${u}`)) })
+            /* @__PURE__ */ p("ul", { "aria-hidden": "true", children: Array.from({ length: this.props.placeholderCount ?? 5 }, (c, u) => /* @__PURE__ */ p("li", { children: /* @__PURE__ */ p(H, { width: 45 + u * 7 }) }, `placeholder-${u}`)) })
           ] }) : null,
           i === S.Ready && e.length === 0 ? /* @__PURE__ */ p("p", { role: "status", children: "No items" }) : null,
           e.length > 0 ? /* @__PURE__ */ p(
@@ -1109,7 +1189,7 @@ class le extends g {
               "aria-busy": s ? "true" : null,
               "aria-multiselectable": this.props.multiSelect ? "true" : null,
               children: e.map((c, u) => {
-                const h = this.getItemKey(c, u), b = n.has(h), f = this.props.renderItem ? this.props.renderItem(c, u) : Zt(c);
+                const h = this.getItemKey(c, u), b = n.has(h), f = this.props.renderItem ? this.props.renderItem(c, u) : or(c);
                 return /* @__PURE__ */ p(
                   "li",
                   {
@@ -1150,7 +1230,7 @@ class le extends g {
     this.selectionHandler.destroy(), (e = this.ownedItemsEmitter) == null || e.dispose();
   }
 }
-a(le, "liveProps", []), a(le, "dependencies", [V]), a(le, "hostName", "listview"), a(le, "css", E`
+a(ue, "liveProps", []), a(ue, "dependencies", [H]), a(ue, "hostName", "listview"), a(ue, "css", E`
         & {
             display: flex;
             flex-direction: column;
@@ -1204,8 +1284,8 @@ a(le, "liveProps", []), a(le, "dependencies", [V]), a(le, "hostName", "listview"
             padding: var(--ui-padding);
         }
     `);
-function Yt(t) {
-  if (t == null) return Ye;
+function rr(t) {
+  if (t == null) return Xe;
   if (typeof t == "function") return t;
   if (typeof t == "string" && t.length > 0)
     return (r, e) => {
@@ -1218,25 +1298,25 @@ function Yt(t) {
     };
   throw new TypeError("ListView itemKey must be a function or property name");
 }
-function Jt(t) {
+function ir(t) {
   return t != null && (typeof t == "object" || typeof t == "function") && typeof Reflect.get(t, "get") == "function" && typeof Reflect.get(t, "subscribe") == "function";
 }
-function Zt(t) {
+function or(t) {
   if (t != null && (typeof t == "object" || typeof t == "function")) {
     const r = Reflect.get(t, "label");
-    if (Xt(r)) return r;
+    if (sr(r)) return r;
   }
   return String(t);
 }
-function Xt(t) {
+function sr(t) {
   return t == null || typeof t == "string" || typeof t == "number";
 }
-function er(t, r) {
+function nr(t, r) {
   return t instanceof Error ? t.message : t == null ? r : String(t);
 }
-class Je extends g {
+class et extends g {
 }
-a(Je, "css", E`
+a(et, "css", E`
         & {
             display: inline-flex;
             line-height: 1;
@@ -1317,8 +1397,8 @@ a(Je, "css", E`
             filter: saturate(0.6);
         }
     `);
-const tr = ["disabled", "required", "error"];
-class j extends Je {
+const ar = ["disabled", "required", "error"];
+class j extends et {
   constructor(e = {}) {
     super(e);
     a(this, "symbols");
@@ -1326,11 +1406,11 @@ class j extends Je {
     a(this, "semanticStateEmitter");
     a(this, "inputId");
     a(this, "errorId");
-    this.inputId = C("checkbox", e.id), this.errorId = `${this.inputId}-error`;
+    this.inputId = R("checkbox", e.id), this.errorId = `${this.inputId}-error`;
     const i = this.constructor;
-    this.symbols = e.symbols ?? i.symbols, rr(this.symbols);
+    this.symbols = e.symbols ?? i.symbols, lr(this.symbols);
     const o = e.initialSemanticState ?? i.defaultSemanticState ?? this.symbols[0][1], s = { ...e };
-    s.defaultValue == null && e.initialSemanticState != null && (s.defaultValue = e.initialSemanticState), this.valueEmitter = L(
+    s.defaultValue == null && e.initialSemanticState != null && (s.defaultValue = e.initialSemanticState), this.valueEmitter = F(
       this,
       s,
       o,
@@ -1351,7 +1431,7 @@ class j extends Je {
       disabled: i = !1,
       required: o = !1,
       error: s = null
-    } = this.props, n = this.valueEmitter.get(), l = this.symbols.findIndex(([, m]) => Object.is(m, n)), [c] = this.symbols[l] ?? ["?", n], u = c === "☐" ? null : c, h = Ht(n), b = pt(this.symbols, n), f = this.Host;
+    } = this.props, n = this.valueEmitter.get(), l = this.symbols.findIndex(([, m]) => Object.is(m, n)), [c] = this.symbols[l] ?? ["?", n], u = c === "☐" ? null : c, h = Wt(n), b = wt(this.symbols, n), f = this.Host;
     return /* @__PURE__ */ v(
       f,
       {
@@ -1373,7 +1453,7 @@ class j extends Je {
                 "aria-invalid": s == null ? null : "true",
                 "aria-describedby": s == null ? null : this.errorId,
                 onChange: (m) => {
-                  this.cycleState(1, m), m.currentTarget.checked = pt(
+                  this.cycleState(1, m), m.currentTarget.checked = wt(
                     this.symbols,
                     this.valueEmitter.get()
                   );
@@ -1392,7 +1472,7 @@ class j extends Je {
     );
   }
 }
-a(j, "liveProps", tr), a(j, "symbols", [
+a(j, "liveProps", ar), a(j, "symbols", [
   ["☐", y.Neutral],
   ["✓", y.Prefer]
 ]), a(j, "defaultSemanticState", y.Neutral), a(j, "hostName", "check-box"), a(j, "css", E`
@@ -1408,39 +1488,39 @@ a(j, "liveProps", tr), a(j, "symbols", [
             box-shadow: var(--checkbox-box-shadow-checked);
         }
     `);
-function rr(t) {
+function lr(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");
 }
-function pt(t, r) {
+function wt(t, r) {
   const e = t.findIndex(([, i]) => Object.is(i, r));
   return r === y.Prefer || r === y.Require || t.length === 2 && e === 1;
 }
-class _ extends g {
+class U extends g {
   constructor(e = {}) {
     super(e);
     a(this, "optionsEmitter");
     a(this, "optionStateEmitters", /* @__PURE__ */ new Map());
     a(this, "staleOptionValues", /* @__PURE__ */ new Set());
-    this.optionsEmitter = ar(e.options) ? e.options : null;
+    this.optionsEmitter = pr(e.options) ? e.options : null;
   }
   initialize() {
     this.optionsEmitter && this.watch(this.optionsEmitter);
   }
   render() {
-    var f, m, R;
+    var f, m, C;
     const e = ((f = this.optionsEmitter) == null ? void 0 : f.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 = ((m = this.optionsEmitter) == null ? void 0 : m.getFetchState()) ?? S.Ready, o = (R = this.optionsEmitter) == null ? void 0 : R.getError(), s = ft(this.props.filters), n = this.props.filterModes ?? j.symbols, l = this.props.defaultSemanticState ?? y.Neutral, c = new Set(e.map(He));
+    const i = ((m = this.optionsEmitter) == null ? void 0 : m.getFetchState()) ?? S.Ready, o = (C = this.optionsEmitter) == null ? void 0 : C.getError(), s = vt(this.props.filters), n = this.props.filterModes ?? j.symbols, l = this.props.defaultSemanticState ?? y.Neutral, c = new Set(e.map(_e));
     this.staleOptionValues = new Set(
       [...this.optionStateEmitters.keys()].filter((T) => !c.has(T))
     );
     const u = this.Host, h = i === S.Initial || i === S.Loading, b = x(this.props) || null;
-    return i === S.Error && e.length === 0 ? /* @__PURE__ */ p(u, { className: b, children: /* @__PURE__ */ p("p", { role: "alert", children: mt(o, "Unable to load filter options") }) }) : h && e.length === 0 ? /* @__PURE__ */ p(u, { className: b, children: /* @__PURE__ */ p("p", { role: "status", children: "Loading filter options…" }) }) : /* @__PURE__ */ v(
+    return i === S.Error && e.length === 0 ? /* @__PURE__ */ p(u, { className: b, children: /* @__PURE__ */ p("p", { role: "alert", children: Et(o, "Unable to load filter options") }) }) : h && e.length === 0 ? /* @__PURE__ */ p(u, { className: b, children: /* @__PURE__ */ p("p", { role: "status", children: "Loading filter options…" }) }) : /* @__PURE__ */ v(
       u,
       {
         className: b,
@@ -1448,24 +1528,24 @@ class _ extends g {
         "aria-label": this.props.label ?? "Filter options",
         "aria-busy": h ? "true" : null,
         children: [
-          i === S.Error ? /* @__PURE__ */ p("p", { role: "alert", children: mt(o, "Unable to load filter options") }) : null,
+          i === S.Error ? /* @__PURE__ */ p("p", { role: "alert", children: Et(o, "Unable to load filter options") }) : null,
           h ? /* @__PURE__ */ p("p", { role: "status", children: "Loading filter options…" }) : null,
           e.length === 0 ? /* @__PURE__ */ p("p", { children: "No filter options" }) : e.map((T) => {
-            const k = He(T), O = or(T), D = s.get(k) ?? l, P = this.optionEmitter(k, D);
+            const k = _e(T), O = dr(T), P = s.get(k) ?? l, K = this.optionEmitter(k, P);
             return /* @__PURE__ */ p(
-              ir,
+              cr,
               {
                 label: O,
-                valueEmitter: P,
+                valueEmitter: K,
                 symbols: n,
-                onChange: (K, z) => {
-                  var M, ct;
+                onChange: (M, z) => {
+                  var Y, J;
                   z == null || z.stopPropagation();
-                  const N = ft(this.props.filters);
-                  K === y.Neutral ? N.delete(k) : N.set(k, K), (ct = (M = this.props).onChange) == null || ct.call(M, N, z);
+                  const N = vt(this.props.filters);
+                  M === y.Neutral ? N.delete(k) : N.set(k, M), (J = (Y = this.props).onChange) == null || J.call(Y, N, z);
                 }
               },
-              sr(k)
+              ur(k)
             );
           })
         ]
@@ -1490,7 +1570,7 @@ class _ extends g {
     return this.optionStateEmitters.set(e, s), s;
   }
 }
-a(_, "liveProps", []), a(_, "dependencies", [j]), a(_, "hostName", "filter-panel"), a(_, "css", E`
+a(U, "liveProps", []), a(U, "dependencies", [j]), a(U, "hostName", "filter-panel"), a(U, "css", E`
         & {
             position: absolute;
             background: white;
@@ -1510,14 +1590,14 @@ a(_, "liveProps", []), a(_, "dependencies", [j]), a(_, "hostName", "filter-panel
             margin: 0;
         }
     `);
-const ir = j;
-function ft(t) {
+const cr = j;
+function vt(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 He(t) {
+function _e(t) {
   if (typeof t == "string" || typeof t == "number") return t;
   if (t != null && typeof t == "object") {
     const r = Reflect.get(t, "value");
@@ -1525,26 +1605,26 @@ function He(t) {
   }
   throw new TypeError("Filter options must be strings, numbers, or value/label objects");
 }
-function or(t) {
+function dr(t) {
   if (t != null && typeof t == "object") {
     const r = Reflect.get(t, "label");
-    if (r != null) return nr(r) ? r : String(r);
+    if (r != null) return hr(r) ? r : String(r);
   }
-  return String(He(t));
+  return String(_e(t));
 }
-function sr(t) {
+function ur(t) {
   return `${typeof t}:${String(t)}`;
 }
-function nr(t) {
+function hr(t) {
   return typeof t == "string" || typeof t == "number";
 }
-function ar(t) {
+function pr(t) {
   return t != null && (typeof t == "object" || typeof t == "function") && typeof Reflect.get(t, "get") == "function" && typeof Reflect.get(t, "subscribe") == "function";
 }
-function mt(t, r) {
+function Et(t, r) {
   return t instanceof Error ? t.message : t == null ? r : String(t);
 }
-class ee extends g {
+class te extends g {
   constructor() {
     super(...arguments);
     a(this, "filterVisible", !1);
@@ -1571,11 +1651,11 @@ class ee extends g {
   }
   render() {
     const e = this.props.sortEmitter.get(), i = (e == null ? void 0 : e.field) === this.props.field ? e.direction : null, o = new Map(
-      (this.props.filtersEmitter.get()[this.props.field] ?? []).filter(lr)
+      (this.props.filtersEmitter.get()[this.props.field] ?? []).filter(fr)
     ), s = this.props.label ?? String(this.props.field), n = `Filter ${String(s)}`;
     let l = null;
     return this.filterVisible && this.props.filterOptions != null && (l = /* @__PURE__ */ p(
-      _,
+      U,
       {
         label: n,
         options: this.props.filterOptions,
@@ -1622,7 +1702,7 @@ class ee extends g {
     );
   }
 }
-a(ee, "liveProps", []), a(ee, "dependencies", [_]), a(ee, "css", E`
+a(te, "liveProps", []), a(te, "dependencies", [U]), a(te, "css", E`
         fray-datatable > table > thead > tr > th[aria-sort] {
             position: relative;
             padding-right: 24px;
@@ -1678,13 +1758,13 @@ a(ee, "liveProps", []), a(ee, "dependencies", [_]), a(ee, "css", E`
             opacity: 1;
         }
     `);
-function lr(t) {
+function fr(t) {
   return typeof t[0] == "string" || typeof t[0] == "number";
 }
-class te extends g {
+class re extends g {
   render() {
     return /* @__PURE__ */ p("thead", { children: /* @__PURE__ */ p("tr", { children: this.props.columns.map((r) => /* @__PURE__ */ p(
-      ee,
+      te,
       {
         field: r.field,
         sortEmitter: this.props.sortEmitter,
@@ -1700,7 +1780,7 @@ class te extends g {
     )) }) });
   }
 }
-a(te, "liveProps", []), a(te, "dependencies", [ee]), a(te, "css", E`
+a(re, "liveProps", []), a(re, "dependencies", [te]), a(re, "css", E`
         fray-datatable > table > thead {
             color: var(--table-header-color);
             background: var(--ui-gradient);
@@ -1715,36 +1795,36 @@ a(te, "liveProps", []), a(te, "dependencies", [ee]), a(te, "css", E`
             border-right: none;
         }
     `);
-const cr = {
+const mr = {
   [y.Neutral]: "☐",
   [y.Prefer]: "",
   [y.Require]: "_",
   [y.Deny]: "!"
 };
-function dr(t, { sort: r = null, filters: e = {} } = {}) {
-  mr(t), r != null && (Ot(r), t.searchParams.set("sort", `${r.field}:${r.direction}`));
+function br(t, { sort: r = null, filters: e = {} } = {}) {
+  Er(t), r != null && (Ft(r), t.searchParams.set("sort", `${r.field}:${r.direction}`));
   for (const [i, o] of Object.entries(e))
     for (const [s, n] of o) {
-      if (!Se(n))
+      if (!Re(n))
         throw new TypeError(`Unknown filter mode for ${i}: ${String(n)}`);
       t.searchParams.append(
         "filter",
-        `${i}:${cr[n]}:${JSON.stringify(s)}`
+        `${i}:${mr[n]}:${JSON.stringify(s)}`
       );
     }
   return t;
 }
-function ur(t, r, e) {
+function gr(t, r, e) {
   if (!Array.isArray(t)) throw new TypeError("Local table data must be an array");
-  const i = t.filter((s) => hr(s, e));
+  const i = t.filter((s) => yr(s, e));
   if (r == null) return i;
-  Ot(r);
+  Ft(r);
   const o = r.direction === "asc" ? 1 : -1;
-  return [...i].sort((s, n) => fr(Ve(s, r.field), Ve(n, r.field)) * o);
+  return [...i].sort((s, n) => vr(Qe(s, r.field), Qe(n, r.field)) * o);
 }
-function hr(t, r) {
+function yr(t, r) {
   for (const [e, i] of Object.entries(r)) {
-    const o = Ve(t, e);
+    const o = Qe(t, e);
     if (i.filter(([, c]) => c === y.Deny).some(([c]) => Object.is(c, o))) return !1;
     const n = i.filter(([, c]) => c === y.Require);
     if (n.length > 0 && !n.some(([c]) => Object.is(c, o))) return !1;
@@ -1753,80 +1833,80 @@ function hr(t, r) {
   }
   return !0;
 }
-function Ot(t) {
-  if (t == null || typeof t != "object" || typeof Reflect.get(t, "field") != "string" || !pr(Reflect.get(t, "direction")))
+function Ft(t) {
+  if (t == null || typeof t != "object" || typeof Reflect.get(t, "field") != "string" || !wr(Reflect.get(t, "direction")))
     throw new TypeError("Table sort must contain a field and asc/desc direction");
 }
-function pr(t) {
+function wr(t) {
   return t === "asc" || t === "desc";
 }
-function fr(t, r) {
+function vr(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 Ve(t, r) {
+function Qe(t, r) {
   if (!(t == null || typeof t != "object" && typeof t != "function"))
     return Reflect.get(t, r);
 }
-function mr(t) {
+function Er(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 br(t) {
-  const r = Xe(t), e = At(t.data) ? null : new I(t.data, {
+function xr(t) {
+  const r = rt(t), e = Dt(t.data) ? null : new I(t.data, {
     owner: t.owner,
     purpose: "local table data"
-  }), i = e ?? t.data, o = new ke(
+  }), i = e ?? t.data, o = new Te(
     [i, r.sortEmitter, r.filtersEmitter],
-    ([s, n, l]) => ur(s, n, l),
+    ([s, n, l]) => gr(s, n, l),
     { owner: t.owner, purpose: "local table view" }
   );
-  return new Ze(o, r, () => {
+  return new tt(o, r, () => {
     o.dispose(), e == null || e.dispose();
   });
 }
-function Ti(t) {
-  wr(t.query);
-  const r = Xe(t);
-  return new Ze(t.query, r);
+function Ai(t) {
+  Ir(t.query);
+  const r = rt(t);
+  return new tt(t.query, r);
 }
-function gr(t) {
+function kr(t) {
   if (t.handler == null || typeof t.handler.fetch != "function")
     throw new TypeError("Table data-source handler must implement fetch");
-  const r = Xe(t), e = new dt("sort", r.sortEmitter, {
+  const r = rt(t), e = new bt("sort", r.sortEmitter, {
     owner: t.owner,
     purpose: "table sort argument"
-  }), i = new dt("filters", r.filtersEmitter, {
+  }), i = new bt("filters", r.filtersEmitter, {
     owner: t.owner,
     purpose: "table filters argument"
-  }), o = new Ft({
+  }), o = new Vt({
     handler: t.handler,
     args: { sort: e, filters: i },
     owner: t.owner,
     purpose: "table query",
     keepPreviousValue: !0
   });
-  return new Ze(o, r, () => {
+  return new tt(o, r, () => {
     o.dispose(), e.dispose(), i.dispose();
   });
 }
-function yr(t) {
+function Sr(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 ?? dr
+    serialize: t.serializeQuery ?? br
   };
-  return t.baseUrl != null && (r.baseUrl = t.baseUrl), t.fetch != null && (r.fetch = t.fetch), gr({
-    handler: new Dt(r),
+  return t.baseUrl != null && (r.baseUrl = t.baseUrl), t.fetch != null && (r.fetch = t.fetch), kr({
+    handler: new Ut(r),
     ...t.sortEmitter == null ? {} : { sortEmitter: t.sortEmitter },
     ...t.filtersEmitter == null ? {} : { filtersEmitter: t.filtersEmitter },
     ...t.owner === void 0 ? {} : { owner: t.owner }
   });
 }
-class Ze {
+class tt {
   constructor(r, e, i = null) {
     a(this, "sortEmitter");
     a(this, "filtersEmitter");
@@ -1842,7 +1922,7 @@ class Ze {
     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 Xe(t) {
+function rt(t) {
   const r = t.sortEmitter == null ? new I(null, {
     owner: t.owner,
     purpose: "table sort"
@@ -1857,14 +1937,14 @@ function Xe(t) {
     ownedFiltersEmitter: e
   };
 }
-function At(t) {
+function Dt(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 wr(t) {
-  if (!At(t))
+function Ir(t) {
+  if (!Dt(t))
     throw new TypeError("Table query must be an emitter");
 }
-class ce extends g {
+class he extends g {
   constructor(e) {
     var i, o;
     super(e);
@@ -1881,7 +1961,7 @@ class ce extends g {
     a(this, "ownedSortEmitter");
     a(this, "ownedFiltersEmitter");
     a(this, "ownedDataSource", null);
-    Er(e), this.columns = vr(e.columns), this.rowKey = xr(e.rowKey), this.suppliedDataSource = e.dataSource ?? null, this.ownedSortEmitter = this.suppliedDataSource == null ? new I(null, { owner: this, purpose: "table sort" }) : null, this.ownedFiltersEmitter = this.suppliedDataSource == null ? new I({}, { owner: this, purpose: "table filters" }) : null, this.sortEmitter = ((i = this.suppliedDataSource) == null ? void 0 : i.sortEmitter) ?? this.ownedSortEmitter, this.filtersEmitter = ((o = this.suppliedDataSource) == null ? void 0 : o.filtersEmitter) ?? this.ownedFiltersEmitter, this.selectionHandler = e.multiSelect === !0 ? we({
+    Rr(e), this.columns = Tr(e.columns), this.rowKey = Cr(e.rowKey), this.suppliedDataSource = e.dataSource ?? null, this.ownedSortEmitter = this.suppliedDataSource == null ? new I(null, { owner: this, purpose: "table sort" }) : null, this.ownedFiltersEmitter = this.suppliedDataSource == null ? new I({}, { owner: this, purpose: "table filters" }) : null, this.sortEmitter = ((i = this.suppliedDataSource) == null ? void 0 : i.sortEmitter) ?? this.ownedSortEmitter, this.filtersEmitter = ((o = this.suppliedDataSource) == null ? void 0 : o.filtersEmitter) ?? this.ownedFiltersEmitter, this.selectionHandler = e.multiSelect === !0 ? xe({
       owner: this,
       multiSelect: !0,
       ...e.selectedItemsEmitter == null ? {} : { selectedItemsEmitter: e.selectedItemsEmitter },
@@ -1890,7 +1970,7 @@ class ce extends g {
         return ((s = this.query) == null ? void 0 : s.get()) ?? [];
       },
       getKey: this.rowKey
-    }) : we({
+    }) : xe({
       owner: this,
       ...e.selectedItemEmitter == null ? {} : { selectedItemEmitter: e.selectedItemEmitter },
       getItems: () => {
@@ -1898,15 +1978,15 @@ class ce extends g {
         return ((s = this.query) == null ? void 0 : s.get()) ?? [];
       },
       getKey: this.rowKey
-    }), this.selectedItemsEmitter = this.selectionHandler.selectedItemsEmitter, this.selectedItemEmitter = this.selectionHandler instanceof Ge ? this.selectionHandler.selectedItemEmitter : null;
+    }), this.selectedItemsEmitter = this.selectionHandler.selectedItemsEmitter, this.selectedItemEmitter = this.selectionHandler instanceof Ze ? this.selectionHandler.selectedItemEmitter : null;
   }
   initialize() {
-    this.suppliedDataSource != null ? this.dataSource = this.suppliedDataSource : this.props.rest != null ? (this.ownedDataSource = yr({
+    this.suppliedDataSource != null ? this.dataSource = this.suppliedDataSource : this.props.rest != null ? (this.ownedDataSource = Sr({
       ...this.props.rest,
       sortEmitter: this.sortEmitter,
       filtersEmitter: this.filtersEmitter,
       owner: this
-    }), this.dataSource = this.ownedDataSource) : (this.ownedDataSource = br({
+    }), this.dataSource = this.ownedDataSource) : (this.ownedDataSource = xr({
       data: this.props.data ?? [],
       sortEmitter: this.sortEmitter,
       filtersEmitter: this.filtersEmitter,
@@ -1926,7 +2006,7 @@ class ce extends g {
         className: x(this.props) || null,
         children: [
           s ? /* @__PURE__ */ p("p", { role: "status", children: "Loading rows…" }) : null,
-          i === S.Error ? /* @__PURE__ */ p("p", { role: "alert", children: Sr(o, "Unable to load rows") }) : null,
+          i === S.Error ? /* @__PURE__ */ p("p", { role: "alert", children: $r(o, "Unable to load rows") }) : null,
           i === S.Error && typeof ((b = this.dataSource) == null ? void 0 : b.retry) == "function" ? /* @__PURE__ */ p(
             "button",
             {
@@ -1941,7 +2021,7 @@ class ce extends g {
           /* @__PURE__ */ v("table", { "aria-busy": s ? "true" : null, children: [
             this.props.caption == null ? null : /* @__PURE__ */ p("caption", { children: this.props.caption }),
             /* @__PURE__ */ p(
-              te,
+              re,
               {
                 columns: this.columns,
                 sortEmitter: this.sortEmitter,
@@ -1966,7 +2046,7 @@ class ce extends g {
         "data-fray-selectable-row": "",
         "aria-selected": String(n),
         tabIndex: i === 0 ? 0 : -1,
-        children: this.columns.map((l) => /* @__PURE__ */ p("td", { children: l.render ? l.render(e, i) : kr(e[l.field]) }, String(l.field)))
+        children: this.columns.map((l) => /* @__PURE__ */ p("td", { children: l.render ? l.render(e, i) : zr(e[l.field]) }, String(l.field)))
       },
       String(s)
     );
@@ -1974,7 +2054,7 @@ class ce extends g {
   renderPlaceholders() {
     const e = this.props.placeholderCount ?? 5;
     return Array.from({ length: e }, (i, o) => /* @__PURE__ */ p("tr", { children: this.columns.map((s, n) => /* @__PURE__ */ p("td", { children: /* @__PURE__ */ p(
-      V,
+      H,
       {
         width: 45 + (o + n) % 6 * 8
       }
@@ -2002,7 +2082,7 @@ class ce extends g {
     this.selectionHandler.destroy(), (e = this.ownedDataSource) == null || e.dispose(), (i = this.ownedSortEmitter) == null || i.dispose(), (o = this.ownedFiltersEmitter) == null || o.dispose();
   }
 }
-a(ce, "liveProps", []), a(ce, "dependencies", [V, te]), a(ce, "hostName", "data-table"), a(ce, "css", E`
+a(he, "liveProps", []), a(he, "dependencies", [H, re]), a(he, "hostName", "data-table"), a(he, "css", E`
         & {
             display: block;
             overflow: auto;
@@ -2063,7 +2143,7 @@ a(ce, "liveProps", []), a(ce, "dependencies", [V, te]), a(ce, "hostName", "data-
         }
 
     `);
-function vr(t) {
+function Tr(t) {
   if (!Array.isArray(t) || t.length === 0)
     throw new TypeError("DataTable columns must be a non-empty array");
   const r = /* @__PURE__ */ new Set();
@@ -2081,7 +2161,7 @@ function vr(t) {
     return e;
   });
 }
-function Er(t) {
+function Rr(t) {
   var n, l;
   const e = [
     "mode",
@@ -2105,8 +2185,8 @@ function Er(t) {
       throw new TypeError("DataTable dataSource must implement the table data-source contract");
   }
 }
-function xr(t) {
-  if (t == null) return Ye;
+function Cr(t) {
+  if (t == null) return Xe;
   if (typeof t == "function") return t;
   if (typeof t == "string" && t.length > 0)
     return (r, e) => {
@@ -2117,19 +2197,19 @@ function xr(t) {
     };
   throw new TypeError("DataTable rowKey must be a function or property name");
 }
-function kr(t) {
+function zr(t) {
   return t == null || typeof t == "string" || typeof t == "number" ? t : String(t);
 }
-function Sr(t, r) {
+function $r(t, r) {
   return t instanceof Error ? t.message : t == null ? r : String(t);
 }
-class et extends g {
+class it extends g {
   render() {
     return this.props.children ?? [];
   }
 }
-a(et, "liveProps", []);
-function Y(t) {
+a(it, "liveProps", []);
+function G(t) {
   if (!Array.isArray(t)) throw new TypeError("Tree nodes must be an array");
   const r = /* @__PURE__ */ new Set(), e = (i) => {
     for (const o of i) {
@@ -2143,18 +2223,18 @@ function Y(t) {
   };
   e(t);
 }
-function Ri(t, r) {
-  return Y(t), tt(t, r);
+function ji(t, r) {
+  return G(t), ot(t, r);
 }
-function Ci(t, r, e = null) {
-  return new ke(
+function qi(t, r, e = null) {
+  return new Te(
     [t, r],
-    ([i, o]) => (Y(i), o == null ? null : tt(i, o)),
+    ([i, o]) => (G(i), o == null ? null : ot(i, o)),
     { owner: e, purpose: "tree node projection" }
   );
 }
-function Ir(t, r, e) {
-  if (Y(t), typeof e != "function") throw new TypeError("Tree node update must be a function");
+function Or(t, r, e) {
+  if (G(t), typeof e != "function") throw new TypeError("Tree node update must be a function");
   const i = (s) => {
     for (let n = 0; n < s.length; n += 1) {
       const l = s[n];
@@ -2176,21 +2256,21 @@ function Ir(t, r, e) {
     }
     return s;
   }, o = i(t);
-  return Object.is(o, t) || Y(o), o;
+  return Object.is(o, t) || G(o), o;
 }
-function zi(t, r, e, i = "tree node updated") {
-  const o = t.get(), s = Ir(o, r, e);
+function Ni(t, r, e, i = "tree node updated") {
+  const o = t.get(), s = Or(o, r, e);
   return Object.is(s, o) ? !1 : t.set(s, i);
 }
-function tt(t, r) {
+function ot(t, r) {
   for (const e of t) {
     if (Object.is(e.id, r)) return e;
-    const i = tt(e.children ?? [], r);
+    const i = ot(e.children ?? [], r);
     if (i != null) return i;
   }
   return null;
 }
-class de extends g {
+class pe extends g {
   constructor(e) {
     super(e);
     a(this, "nodesEmitter");
@@ -2202,10 +2282,10 @@ class de extends g {
     a(this, "focusedKey", null);
     a(this, "typeahead", "");
     a(this, "typeaheadTimer", null);
-    if (gt(e.nodes))
+    if (kt(e.nodes))
       this.nodesEmitter = e.nodes, this.ownedNodesEmitter = null;
     else {
-      const i = e.nodes ?? Ue(e.children);
+      const i = e.nodes ?? Be(e.children);
       this.ownedNodesEmitter = new I(i, {
         owner: this,
         purpose: "tree nodes"
@@ -2220,12 +2300,12 @@ class de extends g {
   }
   setProps(e) {
     if (this.ownedNodesEmitter != null) {
-      if (gt(e.nodes))
+      if (kt(e.nodes))
         throw new TypeError(
           "TreeView cannot replace static or declarative nodes with an emitter"
         );
       this.ownedNodesEmitter.set(
-        e.nodes ?? Ue(e.children),
+        e.nodes ?? Be(e.children),
         "tree structure changed"
       );
     }
@@ -2233,43 +2313,46 @@ class de extends g {
   }
   render() {
     const e = this.nodesEmitter.get();
-    Y(e);
-    const i = this.nodesEmitter.getFetchState(), o = this.nodesEmitter.getError(), s = new Set(this.expandedKeysEmitter.get()), n = bt(e, s), l = this.selectedKeyEmitter.get(), c = n.find(({ node: h }) => Object.is(h.id, this.focusedKey)) ?? n.find(({ node: h }) => Object.is(h.id, l)) ?? n[0] ?? null;
+    G(e);
+    const i = this.nodesEmitter.getFetchState(), o = this.nodesEmitter.getError(), s = new Set(this.expandedKeysEmitter.get()), n = xt(e, s), l = this.selectedKeyEmitter.get(), c = n.find(({ node: h }) => Object.is(h.id, this.focusedKey)) ?? n.find(({ node: h }) => Object.is(h.id, l)) ?? n[0] ?? null;
     this.focusedKey = (c == null ? void 0 : c.node.id) ?? null;
     const u = this.Host;
     return /* @__PURE__ */ v(u, { className: x(this.props) || null, children: [
-      i === S.Error ? /* @__PURE__ */ p("p", { role: "alert", children: Tr(o, "Unable to load tree items") }) : null,
+      i === S.Error ? /* @__PURE__ */ p("p", { role: "alert", children: Ar(o, "Unable to load tree items") }) : null,
       i !== S.Error && n.length === 0 ? /* @__PURE__ */ p("p", { role: "status", children: "No tree items" }) : /* @__PURE__ */ p("ul", { role: "tree", "aria-label": this.props.label, children: n.map((h, b) => {
-        var K, z, N;
-        const { node: f, depth: m, position: R, setSize: T } = h, k = (((K = f.children) == null ? void 0 : K.length) ?? 0) > 0, O = k && s.has(f.id), D = Object.is(f.id, l), P = ((N = (z = this.props).renderItem) == null ? void 0 : N.call(z, f, m)) ?? f.label;
+        var N, Y, J, ht, pt, ft, mt;
+        const { node: f, depth: m, position: C, setSize: T } = h, k = (((N = f.children) == null ? void 0 : N.length) ?? 0) > 0, O = k && s.has(f.id), P = Object.is(f.id, l), K = ((J = (Y = this.props).renderItem) == null ? void 0 : J.call(Y, f, m)) ?? f.label, M = (pt = (ht = this.props).itemLabelClassName) == null ? void 0 : pt.call(ht, f, m), z = (mt = (ft = this.props).itemLabelStyle) == null ? void 0 : mt.call(ft, f, m);
         return /* @__PURE__ */ v(
           "li",
           {
             role: "treeitem",
             "data-index": b,
             "aria-level": m + 1,
-            "aria-posinset": R,
+            "aria-posinset": C,
             "aria-setsize": T,
             "aria-expanded": k ? String(O) : null,
-            "aria-selected": String(D),
+            "aria-selected": String(P),
             tabIndex: Object.is(f.id, c == null ? void 0 : c.node.id) ? 0 : -1,
             style: { "--tree-depth": m },
-            onClick: (M) => {
-              if (this.focusedKey = f.id, $r(M.target) && k) {
+            onClick: (se) => {
+              if (this.focusedKey = f.id, Lr(se.target) && k) {
                 this.toggleExpanded(f.id), this.focusRow(f.id);
                 return;
               }
-              this.selectNode(f, M);
+              this.selectNode(f, se);
             },
             onFocus: () => this.focusedKey = f.id,
-            onKeyDown: (M) => this.handleKeyDown(M, b, n),
+            onKeyDown: (se) => this.handleKeyDown(se, b, n),
             children: [
               w(
                 "fray-expander",
                 { "aria-hidden": "true" },
                 k ? O ? "▾" : "▸" : "•"
               ),
-              w("fray-label", null, P)
+              w("fray-label", {
+                ...M == null ? {} : { className: M },
+                ...z == null ? {} : { style: z }
+              }, K)
             ]
           },
           f.id
@@ -2282,11 +2365,11 @@ class de extends g {
     this.typeaheadTimer != null && clearTimeout(this.typeaheadTimer), (e = this.ownedNodesEmitter) == null || e.dispose(), (i = this.ownedSelectedEmitter) == null || i.dispose(), (o = this.ownedExpandedEmitter) == null || o.dispose();
   }
   reconcile(e) {
-    Y(e);
-    const i = new Set(Rr(e).map(({ node: l }) => l.id)), o = this.selectedKeyEmitter.get();
+    G(e);
+    const i = new Set(jr(e).map(({ node: l }) => l.id)), o = this.selectedKeyEmitter.get();
     this.ownedSelectedEmitter != null && o != null && !i.has(o) && this.selectedKeyEmitter.set(null, "selected tree item removed");
     const s = this.expandedKeysEmitter.get(), n = s.filter((l) => i.has(l));
-    this.ownedExpandedEmitter != null && !zr(s, n) && this.expandedKeysEmitter.set(n, "removed tree expansions reconciled"), this.focusedKey != null && !i.has(this.focusedKey) && (this.focusedKey = null);
+    this.ownedExpandedEmitter != null && !Nr(s, n) && this.expandedKeysEmitter.set(n, "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"), $(this.props.onSelect, e, i), this.focusRow(e.id);
@@ -2332,7 +2415,7 @@ class de extends g {
     this.focusedKey = e;
     const i = this.dom instanceof Element ? [...this.dom.querySelectorAll('[role="treeitem"]')] : [];
     for (const s of i) {
-      const n = Number(s.dataset.index), l = bt(
+      const n = Number(s.dataset.index), l = xt(
         this.nodesEmitter.get(),
         new Set(this.expandedKeysEmitter.get())
       ), c = Object.is((o = l[n]) == null ? void 0 : o.node.id, e);
@@ -2343,11 +2426,11 @@ class de extends g {
     e.preventDefault(), this.typeaheadTimer != null && clearTimeout(this.typeaheadTimer), this.typeahead += e.key.toLocaleLowerCase(), this.typeaheadTimer = setTimeout(() => {
       this.typeahead = "", this.typeaheadTimer = null;
     }, 650);
-    const n = [...i.slice(o + 1), ...i.slice(0, o + 1)].find(({ node: l }) => Cr(l).toLocaleLowerCase().startsWith(this.typeahead));
+    const n = [...i.slice(o + 1), ...i.slice(0, o + 1)].find(({ node: l }) => qr(l).toLocaleLowerCase().startsWith(this.typeahead));
     n != null && this.focusRow(n.node.id);
   }
 }
-a(de, "liveProps", []), a(de, "dependencies", [et]), a(de, "hostName", "tree-view"), a(de, "css", E`
+a(pe, "liveProps", []), a(pe, "dependencies", [it]), a(pe, "hostName", "tree-view"), a(pe, "css", E`
         & {
             display: flex;
             flex-direction: column;
@@ -2400,6 +2483,8 @@ a(de, "liveProps", []), a(de, "dependencies", [et]), a(de, "hostName", "tree-vie
         }
 
         & fray-label {
+            display: block;
+            flex: 1 1 auto;
             min-width: 0;
             overflow-wrap: anywhere;
         }
@@ -2417,23 +2502,23 @@ a(de, "liveProps", []), a(de, "dependencies", [et]), a(de, "hostName", "tree-vie
             }
         }
     `);
-function Tr(t, r) {
+function Ar(t, r) {
   return t instanceof Error ? t.message : t == null ? r : String(t);
 }
-function Ue(t) {
-  return (Array.isArray(t) ? t : t == null ? [] : [t]).filter((e) => be(e) && e.type === et).map((e) => {
-    if (!be(e)) throw new TypeError("TreeView children must be TreeItem nodes");
+function Be(t) {
+  return (Array.isArray(t) ? t : t == null ? [] : [t]).filter((e) => we(e) && e.type === it).map((e) => {
+    if (!we(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: Ue(i.children)
+      children: Be(i.children)
     };
   });
 }
-function bt(t, r) {
+function xt(t, r) {
   const e = [], i = (o, s, n) => {
     o.forEach((l, c) => {
       var u;
@@ -2442,7 +2527,7 @@ function bt(t, r) {
   };
   return i(t, 0, null), e;
 }
-function Rr(t) {
+function jr(t) {
   const r = /* @__PURE__ */ new Set(), e = [], i = (o, s, n) => {
     o.forEach((l, c) => {
       if (r.has(l.id)) throw new Error(`Duplicate tree item id: ${String(l.id)}`);
@@ -2451,20 +2536,20 @@ function Rr(t) {
   };
   return i(t, 0, null), e;
 }
-function Cr(t) {
+function qr(t) {
   return t.textValue != null ? t.textValue : typeof t.label == "string" || typeof t.label == "number" ? String(t.label) : String(t.id);
 }
-function zr(t, r) {
+function Nr(t, r) {
   return t.length === r.length && t.every((e, i) => Object.is(e, r[i]));
 }
-function gt(t) {
+function kt(t) {
   return t != null && (typeof t == "object" || typeof t == "function") && typeof Reflect.get(t, "get") == "function" && typeof Reflect.get(t, "subscribe") == "function";
 }
-function $r(t) {
+function Lr(t) {
   return t instanceof Element && t.closest("fray-expander") != null;
 }
-const Or = ["disabled", "pressed", "busy"];
-class re extends g {
+const Fr = ["disabled", "pressed", "busy"];
+class ie extends g {
   constructor(r = {}) {
     if (super(r), r.onClick != null && typeof r.onClick != "function")
       throw new TypeError("Button onClick must be a function");
@@ -2484,8 +2569,8 @@ class re extends g {
       title: b,
       ariaLabel: f,
       onClick: m
-    } = this.props, T = (Array.isArray(r) ? r.length > 0 : r != null && typeof r != "boolean") ? r : e ?? "", k = n ? l ?? T : T, O = o || n, D = this.Host;
-    return /* @__PURE__ */ p(D, { className: x(this.props) || null, children: /* @__PURE__ */ p(
+    } = this.props, T = (Array.isArray(r) ? r.length > 0 : r != null && typeof r != "boolean") ? r : e ?? "", k = n ? l ?? T : T, O = o || n, P = this.Host;
+    return /* @__PURE__ */ p(P, { className: x(this.props) || null, children: /* @__PURE__ */ p(
       "button",
       {
         id: c,
@@ -2497,15 +2582,15 @@ class re extends g {
         "aria-label": f,
         "aria-pressed": s == null ? null : String(!!s),
         "aria-busy": n ? "true" : null,
-        onClick: (P) => {
-          O || $(m, P);
+        onClick: (K) => {
+          O || $(m, K);
         },
         children: k
       }
     ) });
   }
 }
-a(re, "liveProps", Or), a(re, "hostName", "button"), a(re, "css", E`
+a(ie, "liveProps", Fr), a(ie, "hostName", "button"), a(ie, "css", E`
         & > button {
             min-height: var(--control-min-height, 2rem);
             padding: var(--space-xs) var(--space-sm);
@@ -2548,8 +2633,8 @@ a(re, "liveProps", Or), a(re, "hostName", "button"), a(re, "css", E`
             pointer-events: none;
         }
     `);
-const Ar = ["showCloseButton"];
-class ue extends g {
+const Dr = ["showCloseButton"];
+class fe extends g {
   constructor(e) {
     super(e);
     a(this, "openEmitter");
@@ -2559,7 +2644,7 @@ class ue extends g {
     a(this, "dialogElement", null);
     a(this, "restoreFocusTo", null);
     a(this, "synchronizedOpen", !1);
-    this.openEmitter = L(this, e, !1, "dialog open state"), this.dialogId = C("dialog", e.id), this.titleId = `${this.dialogId}-title`, this.descriptionId = `${this.dialogId}-description`;
+    this.openEmitter = F(this, e, !1, "dialog open state"), this.dialogId = R("dialog", e.id), this.titleId = `${this.dialogId}-title`, this.descriptionId = `${this.dialogId}-description`;
   }
   initialize() {
     this.watch(this.openEmitter);
@@ -2588,7 +2673,7 @@ class ue extends g {
           o == null && !n ? null : /* @__PURE__ */ v("footer", { children: [
             o,
             n ? /* @__PURE__ */ p(
-              re,
+              ie,
               {
                 label: s,
                 onClick: () => this.requestClose()
@@ -2626,7 +2711,7 @@ class ue extends g {
     const i = this.openEmitter.get();
     if (i && !e.open) {
       const o = document.activeElement;
-      this.restoreFocusTo = o instanceof HTMLElement ? o : null, jr(e), this.synchronizedOpen = !0, qr(e, this.props.initialFocusRef);
+      this.restoreFocusTo = o instanceof HTMLElement ? o : null, Pr(e), this.synchronizedOpen = !0, Kr(e, this.props.initialFocusRef);
       return;
     }
     if (!i && e.open) {
@@ -2642,7 +2727,7 @@ class ue extends g {
     this.restoreFocusTo = null, (e == null ? void 0 : e.isConnected) === !0 && e.focus(), $(this.props.onClose);
   }
 }
-a(ue, "liveProps", Ar), a(ue, "hostName", "dialog"), a(ue, "dependencies", [re]), a(ue, "css", E`
+a(fe, "liveProps", Dr), a(fe, "hostName", "dialog"), a(fe, "dependencies", [ie]), a(fe, "css", E`
         & > dialog {
             z-index: 2;
             width: min(38rem, calc(100vw - 2rem));
@@ -2716,7 +2801,7 @@ a(ue, "liveProps", Ar), a(ue, "hostName", "dialog"), a(ue, "dependencies", [re])
             }
         }
     `);
-function jr(t) {
+function Pr(t) {
   if (!t.open) {
     if (typeof t.showModal == "function") {
       t.showModal();
@@ -2725,38 +2810,38 @@ function jr(t) {
     t.setAttribute("open", "");
   }
 }
-function qr(t, r) {
+function Kr(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 j {
+const _ = class _ extends j {
   constructor(r = {}) {
-    super({ ...r, symbols: Q.symbols });
+    super({ ...r, symbols: _.symbols });
   }
 };
-a(Q, "hostName", "quadcheckbox"), a(Q, "symbols", [
+a(_, "hostName", "quadcheckbox"), a(_, "symbols", [
   ["×", y.Deny],
   ["☐", y.Neutral],
   ["✓", y.Prefer],
   ["+", y.Require]
-]), a(Q, "defaultSemanticState", y.Neutral);
-let yt = Q;
-const B = class B extends j {
+]), a(_, "defaultSemanticState", y.Neutral);
+let St = _;
+const Q = class Q extends j {
   constructor(r = {}) {
-    super({ ...r, symbols: B.symbols });
+    super({ ...r, symbols: Q.symbols });
   }
 };
-a(B, "hostName", "tricheckbox"), a(B, "symbols", [
+a(Q, "hostName", "tricheckbox"), a(Q, "symbols", [
   ["×", y.Deny],
   ["☐", y.Neutral],
   ["✓", y.Prefer]
-]), a(B, "defaultSemanticState", y.Neutral);
-let wt = B;
-class rt extends g {
+]), a(Q, "defaultSemanticState", y.Neutral);
+let It = Q;
+class st extends g {
 }
-a(rt, "css", E`
+a(st, "css", E`
         & {
             display: flex;
             flex-flow: row nowrap;
@@ -2777,9 +2862,9 @@ a(rt, "css", E`
         }
 
     `);
-class it extends rt {
+class nt extends st {
 }
-a(it, "css", E`
+a(nt, "css", E`
         & > fray-selectshell {
             display: flex;
             flex-flow: row nowrap;
@@ -2877,8 +2962,8 @@ a(it, "css", E`
             }
         }
     `);
-const Nr = ["disabled", "required", "error"];
-class Ce extends it {
+const Mr = ["disabled", "required", "error"];
+class Oe extends nt {
   constructor(e = {}) {
     var s;
     super(e);
@@ -2887,14 +2972,14 @@ class Ce extends it {
     a(this, "optionsEmitter");
     a(this, "valueEmitter");
     a(this, "ownsOptionsEmitter");
-    this.inputId = C("dropdown", e.id), this.errorId = `${this.inputId}-error`;
+    this.inputId = R("dropdown", e.id), this.errorId = `${this.inputId}-error`;
     const i = e.options ?? [];
-    Lr(i) ? (this.optionsEmitter = i, this.ownsOptionsEmitter = !1) : (ge(i), this.optionsEmitter = new I(i, {
+    Hr(i) ? (this.optionsEmitter = i, this.ownsOptionsEmitter = !1) : (ve(i), this.optionsEmitter = new I(i, {
       owner: this,
       purpose: "dropdown options"
     }), this.ownsOptionsEmitter = !0);
     const o = ((s = this.optionsEmitter.get()[0]) == null ? void 0 : s.value) ?? "";
-    this.valueEmitter = L(this, e, o, "dropdown value");
+    this.valueEmitter = F(this, e, o, "dropdown value");
   }
   initialize() {
     this.watch(this.valueEmitter, this.optionsEmitter);
@@ -2910,7 +2995,7 @@ class Ce extends it {
       ariaLabel: c,
       onChange: u
     } = this.props, h = this.optionsEmitter.get() ?? [];
-    ge(h);
+    ve(h);
     const b = this.valueEmitter.get(), f = this.Host;
     return /* @__PURE__ */ v(
       f,
@@ -2933,7 +3018,7 @@ class Ce extends it {
                 "aria-invalid": n == null ? null : "true",
                 "aria-describedby": n == null ? null : this.errorId,
                 onChange: (m) => {
-                  const R = Fr(m, "dropdown change"), T = h.find(({ value: O }) => String(O) === R), k = (T == null ? void 0 : T.value) ?? R;
+                  const C = Vr(m, "dropdown change"), T = h.find(({ value: O }) => String(O) === C), k = (T == null ? void 0 : T.value) ?? C;
                   this.valueEmitter.set(k, "dropdown selection"), $(u, k, m);
                 },
                 children: [
@@ -2969,18 +3054,18 @@ class Ce extends it {
     );
   }
 }
-a(Ce, "liveProps", Nr), a(Ce, "hostName", "dropdown"), a(Ce, "css", "");
-function Lr(t) {
+a(Oe, "liveProps", Mr), a(Oe, "hostName", "dropdown"), a(Oe, "css", "");
+function Hr(t) {
   return t != null && (typeof t == "object" || typeof t == "function") && typeof Reflect.get(t, "get") == "function" && typeof Reflect.get(t, "subscribe") == "function";
 }
-function Fr(t, r) {
+function Vr(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");
 }
-const Dr = ["text"];
-class Pr extends g {
+const Ur = ["text"];
+class _r extends g {
   render() {
     const { text: r, htmlFor: e, children: i } = this.props;
     return /* @__PURE__ */ p(
@@ -2994,14 +3079,14 @@ class Pr extends g {
     );
   }
 }
-a(Pr, "liveProps", Dr);
-const Kr = ["checked", "disabled", "required", "error"], Mr = ["disabled", "required", "error"];
-class ie extends Je {
+a(_r, "liveProps", Ur);
+const Qr = ["checked", "disabled", "required", "error"], Br = ["disabled", "required", "error"];
+class oe extends et {
   constructor(e = {}) {
     super(e);
     a(this, "inputId");
     a(this, "errorId");
-    this.inputId = C("radio", e.id), this.errorId = `${this.inputId}-error`;
+    this.inputId = R("radio", e.id), this.errorId = `${this.inputId}-error`;
   }
   render() {
     const {
@@ -3039,7 +3124,7 @@ class ie extends Je {
     ] });
   }
 }
-a(ie, "liveProps", Kr), a(ie, "hostName", "radio-button"), a(ie, "css", E`
+a(oe, "liveProps", Qr), a(oe, "hostName", "radio-button"), a(oe, "css", E`
         & > label > input[type="radio"] + fray-checkshell {
             border-radius: 50%;
         }
@@ -3052,7 +3137,7 @@ a(ie, "liveProps", Kr), a(ie, "hostName", "radio-button"), a(ie, "css", E`
             background: var(--checkbox-symbol-color);
         }
     `);
-class he extends g {
+class me extends g {
   constructor(e = {}) {
     var s;
     super(e);
@@ -3060,23 +3145,23 @@ class he extends g {
     a(this, "groupId");
     a(this, "errorId");
     const i = e.options ?? [];
-    ze(i);
+    Ae(i);
     const o = ((s = i[0]) == null ? void 0 : s[0]) ?? null;
-    this.valueEmitter = L(this, e, o, "radio group value"), this.groupId = C("radio-group", e.id), this.errorId = `${this.groupId}-error`;
+    this.valueEmitter = F(this, e, o, "radio group value"), this.groupId = R("radio-group", e.id), this.errorId = `${this.groupId}-error`;
   }
   initialize() {
     this.watch(this.valueEmitter);
   }
   setProps(e) {
     const i = e.options ?? [];
-    return ze(i), super.setProps(e), this.selectFirstAvailableOption(i), this;
+    return Ae(i), super.setProps(e), this.selectFirstAvailableOption(i), this;
   }
   selectOption(e, i = null) {
     this.props.disabled || (this.valueEmitter.set(e, "radio option selected"), $(this.props.onChange, e, i));
   }
   render() {
     const { options: e = [], label: i, disabled: o = !1, required: s = !1, error: n = null } = this.props;
-    ze(e);
+    Ae(e);
     const l = this.valueEmitter.get(), c = this.Host;
     return /* @__PURE__ */ v(
       c,
@@ -3095,7 +3180,7 @@ class he extends g {
               children: [
                 i == null ? null : /* @__PURE__ */ p("legend", { children: i }),
                 e.map(([u, h], b) => /* @__PURE__ */ p(
-                  ie,
+                  oe,
                   {
                     id: `${this.groupId}-${b}`,
                     name: this.props.name ?? this.groupId,
@@ -3126,7 +3211,7 @@ class he extends g {
     );
   }
 }
-a(he, "dependencies", [ie]), a(he, "liveProps", Mr), a(he, "hostName", "radio-group"), a(he, "css", E`
+a(me, "dependencies", [oe]), a(me, "liveProps", Br), a(me, "hostName", "radio-group"), a(me, "css", E`
         & > fieldset {
             display: flex;
             flex-flow: row wrap;
@@ -3143,20 +3228,20 @@ a(he, "dependencies", [ie]), a(he, "liveProps", Mr), a(he, "hostName", "radio-gr
             padding: 0;
         }
     `);
-function ze(t) {
-  ge(t, "Radio group options");
+function Ae(t) {
+  ve(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");
 }
-const Hr = ["disabled", "required", "readOnly", "error"];
-class $e extends rt {
+const Wr = ["disabled", "required", "readOnly", "error"];
+class je extends st {
   constructor(e = {}) {
     super(e);
     a(this, "inputId");
     a(this, "errorId");
     a(this, "valueEmitter");
-    this.inputId = C("textbox", e.id), this.errorId = `${this.inputId}-error`, this.valueEmitter = L(this, e, "", "textbox value");
+    this.inputId = R("textbox", e.id), this.errorId = `${this.inputId}-error`, this.valueEmitter = F(this, e, "", "textbox value");
   }
   initialize() {
     this.watch(this.valueEmitter);
@@ -3175,13 +3260,13 @@ class $e extends rt {
       inputMode: b,
       minLength: f,
       maxLength: m,
-      pattern: R,
+      pattern: C,
       ariaLabel: T,
       inputRef: k,
       onInput: O,
-      onChange: D
-    } = this.props, P = this.valueEmitter.get() ?? "", K = this.Host;
-    return /* @__PURE__ */ v(K, { className: x(this.props) || null, children: [
+      onChange: P
+    } = this.props, K = this.valueEmitter.get() ?? "", M = this.Host;
+    return /* @__PURE__ */ v(M, { className: x(this.props) || null, children: [
       e == null ? null : /* @__PURE__ */ p("label", { htmlFor: this.inputId, children: e }),
       /* @__PURE__ */ p(
         "input",
@@ -3189,7 +3274,7 @@ class $e extends rt {
           id: this.inputId,
           name: s,
           type: o,
-          value: P,
+          value: K,
           placeholder: i,
           disabled: n,
           required: l,
@@ -3198,18 +3283,18 @@ class $e extends rt {
           inputMode: b,
           minLength: f,
           maxLength: m,
-          pattern: R,
+          pattern: C,
           ref: k,
           "aria-label": e == null ? T : null,
           "aria-invalid": u == null ? null : "true",
           "aria-describedby": u == null ? null : this.errorId,
           onInput: (z) => {
-            const N = vt(z, "textbox input");
+            const N = Tt(z, "textbox input");
             this.valueEmitter.set(N, "textbox input"), $(O, N, z);
           },
           onChange: (z) => $(
-            D,
-            vt(z, "textbox change"),
+            P,
+            Tt(z, "textbox change"),
             z
           )
         }
@@ -3225,7 +3310,7 @@ class $e extends rt {
     ] });
   }
 }
-a($e, "liveProps", Hr), a($e, "hostName", "textbox"), a($e, "css", E`
+a(je, "liveProps", Wr), a(je, "hostName", "textbox"), a(je, "css", E`
         & > input {
             min-height: var(--control-min-height, 2rem);
             width: var(--input-width, 15rem);
@@ -3260,14 +3345,14 @@ a($e, "liveProps", Hr), a($e, "hostName", "textbox"), a($e, "css", E`
             margin: 0;
         }
     `);
-function vt(t, r) {
+function Tt(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");
 }
-const Vr = ["disabled", "required", "error"];
-class Oe extends g {
+const Gr = ["disabled", "required", "error"];
+class qe extends g {
   constructor(e = {}) {
     var s;
     super(e);
@@ -3276,21 +3361,21 @@ class Oe extends g {
     a(this, "legendId");
     a(this, "errorId");
     const i = e.options ?? [];
-    Ae(i);
+    Ne(i);
     const o = ((s = i[0]) == null ? void 0 : s[0]) ?? null;
-    this.valueEmitter = L(
+    this.valueEmitter = F(
       this,
       e,
       o ?? null,
       "toggle value"
-    ), this.groupId = C("toggle", e.id), this.legendId = `${this.groupId}-label`, this.errorId = `${this.groupId}-error`;
+    ), this.groupId = R("toggle", e.id), this.legendId = `${this.groupId}-label`, this.errorId = `${this.groupId}-error`;
   }
   initialize() {
     this.selectFirstAvailableOption(this.props.options ?? []), this.watch(this.valueEmitter);
   }
   setProps(e) {
     const i = e.options ?? [];
-    return Ae(i), super.setProps(e), this.selectFirstAvailableOption(i), this;
+    return Ne(i), super.setProps(e), this.selectFirstAvailableOption(i), this;
   }
   selectOption(e, i = null) {
     this.props.disabled || (this.valueEmitter.set(e, "toggle option selected"), $(this.props.onChange, e, i));
@@ -3303,7 +3388,7 @@ class Oe extends g {
       required: s = !1,
       error: n = null
     } = this.props;
-    Ae(e);
+    Ne(e);
     const l = this.valueEmitter.get(), c = Math.max(
       0,
       e.findIndex(([h]) => Object.is(h, l))
@@ -3361,7 +3446,7 @@ class Oe extends g {
     );
   }
 }
-a(Oe, "liveProps", Vr), a(Oe, "hostName", "toggle"), a(Oe, "css", E`
+a(qe, "liveProps", Gr), a(qe, "hostName", "toggle"), a(qe, "css", E`
         & {
             display: inline-block;
             inline-size: fit-content;
@@ -3455,13 +3540,13 @@ a(Oe, "liveProps", Vr), a(Oe, "hostName", "toggle"), a(Oe, "css", E`
             background: var(--toggle-inactive-separator-background);
         }
     `);
-function Ae(t) {
-  ge(t);
+function Ne(t) {
+  ve(t);
   for (const r of t)
     if (!Array.isArray(r) || r.length < 2)
       throw new TypeError("Toggle options must be [value, label] tuples");
 }
-class je extends g {
+class Le extends g {
   render() {
     const {
       children: r = [],
@@ -3485,7 +3570,7 @@ class je extends g {
     );
   }
 }
-a(je, "liveProps", []), a(je, "hostName", "toolbar"), a(je, "css", E`
+a(Le, "liveProps", []), a(Le, "hostName", "toolbar"), a(Le, "css", E`
         & {
             display: flex;
             flex-wrap: wrap;
@@ -3507,11 +3592,11 @@ a(je, "liveProps", []), a(je, "hostName", "toolbar"), a(je, "css", E`
             align-items: stretch;
         }
     `);
-class qe extends g {
+class Fe extends g {
   constructor(e) {
     super(e);
     a(this, "progressId");
-    if (this.progressId = C("progress", e.id), e.valueEmitter != null && !Ur(e.valueEmitter))
+    if (this.progressId = R("progress", e.id), e.valueEmitter != null && !Yr(e.valueEmitter))
       throw new TypeError("ProgressBar valueEmitter must be a readable emitter");
   }
   render() {
@@ -3548,7 +3633,7 @@ class qe extends g {
     ] });
   }
 }
-a(qe, "liveProps", []), a(qe, "hostName", "progress-bar"), a(qe, "css", E`
+a(Fe, "liveProps", []), a(Fe, "hostName", "progress-bar"), a(Fe, "css", E`
         & {
             display: block;
         }
@@ -3659,13 +3744,13 @@ a(qe, "liveProps", []), a(qe, "hostName", "progress-bar"), a(qe, "css", E`
             }
         }
     `);
-function Ur(t) {
+function Yr(t) {
   return t != null && (typeof t == "object" || typeof t == "function") && typeof Reflect.get(t, "get") == "function" && typeof Reflect.get(t, "subscribe") == "function";
 }
-const $i = Object.freeze([
-  ...Ne("primary"),
-  ...Ne("secondary"),
-  ...Ne("neutral"),
+const Li = Object.freeze([
+  ...De("primary"),
+  ...De("secondary"),
+  ...De("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"),
@@ -3677,6 +3762,8 @@ const $i = Object.freeze([
   d("--palette-neutral-dark", "palette", "neutral", "color", "Dark neutral color", "--palette-neutral-800"),
   d("--palette-light", "palette", "contrast", "color", "Light endpoint"),
   d("--palette-dark", "palette", "contrast", "color", "Dark endpoint"),
+  d("--palette-light-clear", "palette", "contrast", "color", "Transparent light endpoint"),
+  d("--palette-light-faint", "palette", "contrast", "color", "Faint translucent light endpoint"),
   d("--palette-primary-light-mix", "palette", "primary", "color", "Light-side primary ramp mix endpoint", "--palette-light"),
   d("--palette-primary-dark-mix", "palette", "primary", "color", "Dark-side primary ramp mix endpoint", "--palette-dark"),
   d("--palette-secondary-light-mix", "palette", "secondary", "color", "Light-side secondary ramp mix endpoint", "--palette-light"),
@@ -3782,45 +3869,45 @@ const $i = 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"),
+  d("--colored-shadow", "theme", "colored", "shadow", "Colored-trait depth"),
   d("--block-graph-block-border", "theme", "block graph", "border", "Block graph category border", "--ui-border"),
   d("--block-graph-block-radius", "theme", "block graph", "radius", "Block graph category radius", "--radius-sm"),
-  d("--block-graph-block-shadow", "theme", "block graph", "shadow", "Block graph category depth"),
-  d("--block-graph-block-gloss-opacity", "theme", "block graph", "opacity", "Block graph glossy overlay opacity")
-]), _r = Object.freeze([
-  Le("shiny", "Shiny", A("themes/shiny/theme.css"), "light"),
-  Le("java", "Java", A("themes/java/theme.css"), "light"),
-  Le("minimal", "Minimal", A("themes/minimal/theme.css"), "adaptive")
-]), Qr = Object.freeze([
-  F("iceblue", "Ice blue", A("colors/iceblue/colors.css")),
-  F("ocean", "Ocean", A("colors/ocean/colors.css")),
-  F("green", "Green", A("colors/green/colors.css")),
-  F("gray", "Gray", A("colors/gray/colors.css")),
-  F("orange", "Orange", A("colors/orange/colors.css")),
-  F("purple", "Purple", A("colors/purple/colors.css")),
-  F("red", "Red", A("colors/red/colors.css")),
-  F("yellow", "Yellow", A("colors/yellow/colors.css"))
+  d("--block-graph-block-shadow", "theme", "block graph", "shadow", "Block graph category depth")
+]), Jr = Object.freeze([
+  Pe("shiny", "Shiny", A("themes/shiny/theme.css"), "light"),
+  Pe("java", "Java", A("themes/java/theme.css"), "light"),
+  Pe("minimal", "Minimal", A("themes/minimal/theme.css"), "adaptive")
+]), Zr = Object.freeze([
+  D("iceblue", "Ice blue", A("colors/iceblue/colors.css")),
+  D("ocean", "Ocean", A("colors/ocean/colors.css")),
+  D("green", "Green", A("colors/green/colors.css")),
+  D("gray", "Gray", A("colors/gray/colors.css")),
+  D("orange", "Orange", A("colors/orange/colors.css")),
+  D("purple", "Purple", A("colors/purple/colors.css")),
+  D("red", "Red", A("colors/red/colors.css")),
+  D("yellow", "Yellow", A("colors/yellow/colors.css"))
 ]);
-function Br(t, r, e = globalThis.document) {
-  if (Wr(r), (e == null ? void 0 : e.head) == null || e.documentElement == null)
+function Xr(t, r, e = globalThis.document) {
+  if (ei(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 o = e.head.querySelector(i);
   return o == null && (o = e.createElement("link"), o.rel = "stylesheet", o.dataset.frayStylesheet = t, e.head.append(o)), o.dataset.fraySelection = r.value, o.getAttribute("href") !== r.href && o.setAttribute("href", r.href), t === "theme" ? e.documentElement.dataset.theme = r.value : e.documentElement.dataset.color = r.value, o;
 }
-function Oi(t, r = globalThis.document) {
+function Fi(t, r = globalThis.document) {
   if ((r == null ? void 0 : r.documentElement) == null)
     throw new TypeError("setFrayAppearance requires a document with a root");
   if (t !== "light" && t !== "dark" && t !== "system")
     throw new TypeError("Fray appearance must be light, dark, or system");
   t === "system" ? r.documentElement.removeAttribute("data-appearance") : r.documentElement.dataset.appearance = t;
 }
-function Ai(t = globalThis.document) {
+function Di(t = globalThis.document) {
   if ((t == null ? void 0 : t.documentElement) == null)
     throw new TypeError("getFrayAppearance requires a document with a root");
   const r = t.documentElement.dataset.appearance;
   return r === "light" || r === "dark" ? r : "system";
 }
-function pe(t, r) {
+function be(t, r) {
   const e = t.find((i) => i.value === r);
   if (e == null) throw new RangeError(`Unknown Fray stylesheet selection: ${r}`);
   return e;
@@ -3828,7 +3915,7 @@ function pe(t, r) {
 function d(t, r, e, i, o, s) {
   return s == null ? Object.freeze({ name: t, layer: r, family: e, value: i, description: o }) : Object.freeze({ name: t, layer: r, family: e, value: i, description: o, fallback: s });
 }
-function Ne(t) {
+function De(t) {
   return [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map((r) => {
     var e;
     return d(
@@ -3840,25 +3927,25 @@ function Ne(t) {
     );
   });
 }
-function F(t, r, e) {
+function D(t, r, e) {
   return Object.freeze({ value: t, label: r, href: e });
 }
-function Le(t, r, e, i) {
+function Pe(t, r, e, i) {
   return Object.freeze({ value: t, label: r, href: e, appearance: i });
 }
 function A(t) {
   const r = import.meta.url.includes("/src/styling/") ? `../../${t}` : `../${t}`;
   return new URL(r, import.meta.url).href;
 }
-function Wr(t) {
+function ei(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`);
 }
-const Gr = ["disabled"];
-class ve extends it {
+const ti = ["disabled"];
+class ke extends nt {
   constructor(e, i, o) {
     var l;
     super(e);
@@ -3867,16 +3954,16 @@ class ve extends it {
     a(this, "kind");
     a(this, "defaults");
     const s = e.options ?? o;
-    Et(s);
+    Rt(s);
     const n = (l = s[0]) == null ? void 0 : l.value;
     if (n == null) throw new TypeError(`${i} picker requires at least one option`);
-    this.kind = i, this.defaults = o, this.inputId = C(`${i}-picker`, e.id), this.valueEmitter = L(this, e, n, `${i} selection`), pe(s, this.valueEmitter.get());
+    this.kind = i, this.defaults = o, this.inputId = R(`${i}-picker`, e.id), this.valueEmitter = F(this, e, n, `${i} selection`), be(s, this.valueEmitter.get());
   }
   initialize() {
     this.watch(this.valueEmitter);
   }
   render() {
-    const e = this.options, i = pe(e, this.valueEmitter.get()), { label: o, ariaLabel: s, disabled: n = !1, onChange: l } = this.props, c = this.Host;
+    const e = this.options, i = be(e, this.valueEmitter.get()), { label: o, ariaLabel: s, disabled: n = !1, onChange: l } = this.props, c = this.Host;
     return /* @__PURE__ */ v(
       c,
       {
@@ -3894,7 +3981,7 @@ class ve extends it {
                 disabled: n,
                 "aria-label": o == null ? s : null,
                 onChange: (u) => {
-                  const h = Zr(u), b = pe(e, h);
+                  const h = oi(u), b = be(e, h);
                   this.valueEmitter.set(h, `${this.kind} selected`), $(l, h, b, u);
                 },
                 children: e.map((u) => /* @__PURE__ */ p(
@@ -3921,35 +4008,35 @@ class ve extends it {
   }
   get options() {
     const e = this.props.options ?? this.defaults;
-    return Et(e), e;
+    return Rt(e), e;
   }
   applySelection() {
     const e = this.props.targetDocument ?? (typeof document > "u" ? null : document);
-    e != null && Br(
+    e != null && Xr(
       this.kind,
-      pe(this.options, this.valueEmitter.get()),
+      be(this.options, this.valueEmitter.get()),
       e
     );
   }
 }
-a(ve, "liveProps", Gr), a(ve, "css", E`
+a(ke, "liveProps", ti), a(ke, "css", E`
         & > fray-selectshell > select {
             min-width: 8rem;
         }
     `);
-class Yr extends ve {
+class ri extends ke {
   constructor(r = {}) {
-    super(r, "theme", _r);
+    super(r, "theme", Jr);
   }
 }
-a(Yr, "hostName", "theme-picker");
-class Jr extends ve {
+a(ri, "hostName", "theme-picker");
+class ii extends ke {
   constructor(r = {}) {
-    super(r, "colors", Qr);
+    super(r, "colors", Zr);
   }
 }
-a(Jr, "hostName", "color-picker");
-function Et(t) {
+a(ii, "hostName", "color-picker");
+function Rt(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();
@@ -3964,13 +4051,13 @@ function Et(t) {
     r.add(e.value);
   }
 }
-function Zr(t) {
+function oi(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 ji {
+class Pi {
   constructor(r = "/") {
     a(this, "listeners", /* @__PURE__ */ new Set());
     a(this, "entries");
@@ -4011,9 +4098,9 @@ class ji {
     for (const r of [...this.listeners]) r();
   }
 }
-function qi(t = globalThis.window, r = {}) {
-  jt(t);
-  const e = Xr(r.basePath ?? "/");
+function Ki(t = globalThis.window, r = {}) {
+  Pt(t);
+  const e = si(r.basePath ?? "/");
   return {
     read() {
       const i = t.location.pathname, o = i === e.slice(0, -1) ? "/" : i.startsWith(e) ? `/${i.slice(e.length)}` : i;
@@ -4034,8 +4121,8 @@ function qi(t = globalThis.window, r = {}) {
     }
   };
 }
-function Ni(t = globalThis.window) {
-  return jt(t), {
+function Mi(t = globalThis.window) {
+  return Pt(t), {
     read() {
       return q(t.location.hash.slice(1) || "/");
     },
@@ -4065,36 +4152,36 @@ function q(t) {
   const r = t.indexOf("#"), e = r < 0 ? t : t.slice(0, r), i = e.indexOf("?"), o = i < 0 ? e : e.slice(0, i), s = i < 0 ? "" : e.slice(i);
   return `${(o.startsWith("/") ? o : `/${o}`).replace(/\/{2,}/g, "/").replace(/\/$/, "") || "/"}${s}`;
 }
-function Xr(t) {
+function si(t) {
   const r = q(t).split("?")[0] ?? "/";
   return r === "/" ? "/" : `${r}/`;
 }
-function jt(t) {
+function Pt(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 ot = /* @__PURE__ */ new WeakSet(), st = /* @__PURE__ */ new WeakSet();
-class _e {
+const at = /* @__PURE__ */ new WeakSet(), lt = /* @__PURE__ */ new WeakSet();
+class We {
   constructor(r) {
-    this.target = r, Ie(r), Object.freeze(this);
+    this.target = r, Ce(r), Object.freeze(this);
   }
 }
-class nt extends Error {
+class ct extends Error {
   constructor(e = "The requested route is unavailable") {
     super(e);
     a(this, "name", "RouteUnavailableError");
   }
 }
-const Li = Object.freeze({
+const Hi = Object.freeze({
   parse: (t) => t,
   format: (t) => t
-}), Fi = Object.freeze({
+}), Vi = Object.freeze({
   parse(t) {
     if (t.length !== 1) throw new TypeError("Expected one query value");
     return t[0] ?? "";
   },
   format: (t) => [t]
-}), Di = Object.freeze({
+}), Ui = Object.freeze({
   parse(t) {
     if (t.length !== 1 || t[0] !== "true" && t[0] !== "false")
       throw new TypeError("Expected one boolean query value");
@@ -4102,77 +4189,77 @@ const Li = Object.freeze({
   },
   format: (t) => [String(t)]
 });
-function Pi(t, r = t) {
-  const e = Qe(t, "Route id"), i = ii(r, "Route path"), o = Object.freeze({
+function _i(t, r = t) {
+  const e = Ge(t, "Route id"), i = ci(r, "Route path"), o = Object.freeze({
     id: e,
     kind: "literal",
     path: i
   });
-  return ot.add(o), o;
+  return at.add(o), o;
 }
-function Ki(t, r, e = t) {
-  const i = Qe(t, "Route id"), o = Qe(e, "Route parameter name");
-  ti(r);
+function Qi(t, r, e = t) {
+  const i = Ge(t, "Route id"), o = Ge(e, "Route parameter name");
+  ai(r);
   const s = Object.freeze({
     id: i,
     kind: "parameter",
     name: o,
     codec: r
   });
-  return ot.add(s), s;
+  return at.add(s), s;
 }
-function Mi(t, r) {
-  if (W(t), t.kind !== "parameter")
+function Bi(t, r) {
+  if (B(t), t.kind !== "parameter")
     throw new TypeError("routeParameter requires a parameter route");
   const e = t.codec.format(r);
-  return lt(e, t.name), Object.freeze({ route: t, value: r });
+  return ut(e, t.name), Object.freeze({ route: t, value: r });
 }
-function Hi(...t) {
+function Wi(...t) {
   if (t.length === 0) throw new TypeError("routeTarget requires at least one route");
   for (const e of t)
-    if (qt(e))
-      W(e.route);
-    else if (W(e), e.kind !== "literal")
+    if (Kt(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 st.add(r), r;
+  return lt.add(r), r;
 }
-function Vi(t, r) {
-  if (Ie(t), r == null || typeof r != "object" || Array.isArray(r))
+function Gi(t, r) {
+  if (Ce(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 st.add(e), e;
+  return lt.add(e), e;
 }
-function Ui(t) {
-  return new _e(t);
+function Yi(t) {
+  return new We(t);
 }
-function at(t) {
-  return t != null && typeof t == "object" && ot.has(t);
+function dt(t) {
+  return t != null && typeof t == "object" && at.has(t);
 }
-function W(t) {
-  if (!at(t))
+function B(t) {
+  if (!dt(t))
     throw new TypeError("Expected a route created by defineRoute() or defineRouteParameter()");
 }
-function ei(t) {
-  return t != null && typeof t == "object" && st.has(t);
+function ni(t) {
+  return t != null && typeof t == "object" && lt.has(t);
 }
-function Ie(t) {
-  if (!ei(t)) throw new TypeError("Expected a target created by routeTarget()");
+function Ce(t) {
+  if (!ni(t)) throw new TypeError("Expected a target created by routeTarget()");
 }
-function ti(t) {
+function ai(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 ri(t) {
+function li(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 Fe(t) {
-  Ie(t);
+function Ke(t) {
+  Ce(t);
   const r = t.routes.map((o) => {
-    if (qt(o)) {
+    if (Kt(o)) {
       const s = o.route.codec.format(o.value);
-      return lt(s, o.route.name), encodeURIComponent(s);
+      return ut(s, o.route.name), encodeURIComponent(s);
     }
     return encodeURIComponent(o.path);
   }), e = new URLSearchParams();
@@ -4184,30 +4271,30 @@ function Fe(t) {
   const i = e.toString();
   return `/${r.join("/")}${i === "" ? "" : `?${i}`}`;
 }
-function qt(t) {
-  return t != null && typeof t == "object" && "route" in t && "value" in t && at(t.route) && t.route.kind === "parameter";
+function Kt(t) {
+  return t != null && typeof t == "object" && "route" in t && "value" in t && dt(t.route) && t.route.kind === "parameter";
 }
-function Qe(t, r) {
+function Ge(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 ii(t, r) {
+function ci(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 {
-    lt(decodeURIComponent(t), r);
+    ut(decodeURIComponent(t), r);
   } catch {
     throw new TypeError(`${r} must use valid percent encoding`);
   }
   return t;
 }
-function lt(t, r) {
+function ut(t, r) {
   if (typeof t != "string" || t === "" || t.includes("/"))
     throw new TypeError(`${r} codec must format one non-empty path segment`);
 }
-const oi = 16;
-class si {
+const di = 16;
+class ui {
   constructor(r) {
     a(this, "root");
     a(this, "transition");
@@ -4225,13 +4312,13 @@ class si {
     a(this, "applying", 0);
     a(this, "syncQueued", !1);
     a(this, "disposed", !1);
-    this.adapter = r, fi(r), this.root = Object.freeze({
+    this.adapter = r, vi(r), this.root = Object.freeze({
       route: null,
       parent: null,
       segment: null,
       value: null,
       pathname: "/"
-    }), Ee.set(this.root, this), this.activeContext = this.root, this.requested = De(r.read());
+    }), Se.set(this.root, this), this.activeContext = this.root, this.requested = Me(r.read());
     const e = Object.freeze({
       state: "pending",
       requestedLocation: this.requested.location,
@@ -4248,7 +4335,7 @@ class si {
     }), this.startTransition(this.requested.location, 0, !1);
   }
   openScope(r, e) {
-    this.assertActive(), U(r, this), fe(e);
+    this.assertActive(), V(r, this), ge(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();
@@ -4258,18 +4345,18 @@ class si {
     };
   }
   completeScope(r, e) {
-    this.assertActive(), U(r, this);
+    this.assertActive(), V(r, this);
     const i = this.scope(r).owners.get(e);
     if (i == null) throw new Error("Cannot complete an unopened route scope");
-    ni(this.scope(r)), i.complete = !0, this.wakeRegistry();
+    hi(this.scope(r)), i.complete = !0, this.wakeRegistry();
   }
   registerSelectionRoutes(r, e, i, o) {
-    if (this.assertActive(), U(r, this), fe(e), !Array.isArray(i)) throw new TypeError("Route bindings must be an array");
+    if (this.assertActive(), V(r, this), ge(e), !Array.isArray(i)) throw new TypeError("Route bindings must be an array");
     if (typeof o != "function")
       throw new TypeError("Selection route registration requires a subscriber");
     const s = this.scope(r), n = /* @__PURE__ */ new Map(), l = /* @__PURE__ */ new Set();
     for (const u of i) {
-      if (W(u.route), u.route.kind !== "literal")
+      if (B(u.route), u.route.kind !== "literal")
         throw new TypeError("Tab routes must use literal route descriptors");
       if (l.has(u.route) || s.entries.has(u.route))
         throw new Error(`Duplicate route in one scope: ${u.route.id}`);
@@ -4278,15 +4365,15 @@ class si {
         owner: e,
         descriptor: u.route,
         parent: r,
-        match: (f) => Pe(f) === u.route.path ? { value: null } : null,
+        match: (f) => He(f) === u.route.path ? { value: null } : null,
         currentValue: () => u.active() ? null : void 0,
-        activate: async (f, m, R) => {
+        activate: async (f, m, C) => {
           if (u.disabled)
-            throw new nt(
+            throw new ct(
               `Route "${u.route.id}" is currently disabled`
             );
-          if (R.aborted) throw R.reason;
-          return await u.activate(R), f;
+          if (C.aborted) throw C.reason;
+          return await u.activate(C), f;
         },
         context: () => h,
         disposeSubscription: () => {
@@ -4306,9 +4393,9 @@ class si {
     i != null && (this.removeOwnerEntries(i, e), this.wakeRegistry());
   }
   registerValueRoute(r, e, i) {
-    if (this.assertActive(), U(r, this), fe(e), W(i.route), i.route.kind !== "parameter")
+    if (this.assertActive(), V(r, this), ge(e), B(i.route), i.route.kind !== "parameter")
       throw new TypeError("Value routes require a parameter route descriptor");
-    if (St(i.valueEmitter, "Value route emitter"), i.resolve != null && typeof i.resolve != "function")
+    if ($t(i.valueEmitter, "Value route emitter"), i.resolve != null && typeof i.resolve != "function")
       throw new TypeError("Value route resolver must be a function");
     const o = this.scope(r);
     if (o.entries.has(i.route))
@@ -4320,7 +4407,7 @@ class si {
       descriptor: i.route,
       parent: r,
       match: (u) => {
-        const h = Pe(u), b = i.route.codec.parse(h);
+        const h = He(u), b = i.route.codec.parse(h);
         if (i.route.codec.format(b) !== h)
           throw new TypeError(
             `Route parameter "${i.route.name}" does not round-trip`
@@ -4330,7 +4417,7 @@ class si {
       currentValue: () => i.valueEmitter.get(),
       activate: async (u, h, b) => {
         const f = u.value, m = i.resolve == null ? f : await i.resolve(f, h, b);
-        if (m instanceof _e) return m;
+        if (m instanceof We) return m;
         if (b.aborted) throw b.reason;
         return this.withApplication(() => i.valueEmitter.set(
           m,
@@ -4343,7 +4430,7 @@ class si {
     o.entries.set(i.route, l), this.wakeRegistry();
     let c = !0;
     return {
-      context: pi(i.valueEmitter, s, r),
+      context: wi(i.valueEmitter, s, r),
       contextFor: s,
       dispose: () => {
         if (!c) return;
@@ -4352,9 +4439,9 @@ class si {
     };
   }
   registerQuery(r, e, i) {
-    this.assertActive(), U(r, this), fe(e);
-    const o = hi(i.name);
-    St(i.valueEmitter, "Route query emitter"), ri(i.codec);
+    this.assertActive(), V(r, this), ge(e);
+    const o = yi(i.name);
+    $t(i.valueEmitter, "Route query emitter"), li(i.codec);
     const s = i.equals ?? Object.is;
     if (typeof s != "function") throw new TypeError("Route query equals must be a function");
     const n = this.scope(r);
@@ -4380,7 +4467,7 @@ class si {
   }
   navigate(r, e = {}) {
     this.assertActive();
-    const i = me(r) ? this.formatContext(r) : Fe(Me(r));
+    const i = ye(r) ? this.formatContext(r) : Ke(Ue(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) {
@@ -4388,12 +4475,12 @@ class si {
   }
   href(r) {
     this.assertActive();
-    const e = me(r) ? this.formatContext(r) : Fe(Me(r));
+    const e = ye(r) ? this.formatContext(r) : Ke(Ue(r));
     return this.adapter.href(e);
   }
   resolve(r, e) {
     var o;
-    W(r), U(e, this);
+    B(r), V(e, this);
     let i = e;
     for (; i != null; ) {
       const s = (o = this.scopes.get(i)) == null ? void 0 : o.entries.get(r);
@@ -4413,8 +4500,8 @@ class si {
     return this.formatStateLocation();
   }
   isActive(r, e = !1) {
-    const i = me(r) ? r : this.resolveTargetContext(Me(r));
-    return e ? i === this.activeContext : kt(i, this.activeContext);
+    const i = ye(r) ? r : this.resolveTargetContext(Ue(r));
+    return e ? i === this.activeContext : zt(i, this.activeContext);
   }
   dispose() {
     var r;
@@ -4433,7 +4520,7 @@ class si {
     var s;
     this.assertActive(), (s = this.controller) == null || s.abort(new DOMException("Navigation superseded", "AbortError"));
     const o = new AbortController();
-    return this.controller = o, this.requested = De(r), i && this.issueEmitter.set(null, "route transition started"), this.transitionEmitter.set(Object.freeze({
+    return this.controller = o, this.requested = Me(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)
@@ -4449,13 +4536,13 @@ class si {
       const u = await this.waitForCompleteScope(s, o);
       let h;
       try {
-        h = ai(u, c);
+        h = pi(u, c);
       } catch (f) {
-        this.fallback(r, s, null, Ke(f));
+        this.fallback(r, s, null, Ve(f));
         return;
       }
       if (h == null) {
-        this.fallback(r, s, null, `Unknown route segment "${Pe(c)}"`);
+        this.fallback(r, s, null, `Unknown route segment "${He(c)}"`);
         return;
       }
       const b = Object.freeze({
@@ -4464,12 +4551,12 @@ class si {
       });
       try {
         const f = await h.entry.activate(h.match, b, o);
-        if (f instanceof _e) {
-          if (i >= oi) {
+        if (f instanceof We) {
+          if (i >= di) {
             this.fallback(r, s, h.entry.descriptor, "Too many route redirects");
             return;
           }
-          const m = Fe(f.target);
+          const m = Ke(f.target);
           this.adapter.replace(m), await this.startTransition(m, i + 1, !1);
           return;
         }
@@ -4480,7 +4567,7 @@ class si {
           r,
           s,
           h.entry.descriptor,
-          Ke(f)
+          Ve(f)
         );
         return;
       }
@@ -4499,7 +4586,7 @@ class si {
     for (; ; ) {
       if (e.aborted) throw e.reason;
       const i = this.scopes.get(r);
-      if (i != null && li(i)) return i;
+      if (i != null && fi(i)) return i;
       await this.waitForRegistryChange(e);
     }
   }
@@ -4548,10 +4635,10 @@ class si {
     return this.cachedContext(r, e, o, i);
   }
   cachedContext(r, e, i, o) {
-    const s = di(r.pathname, i), n = `${ui(r)}\0${e.id}\0${i}`, l = this.contextCache.get(n);
+    const s = bi(r.pathname, i), n = `${gi(r)}\0${e.id}\0${i}`, l = this.contextCache.get(n);
     if (l != null) return l;
     const c = Object.freeze({ route: e, parent: r, segment: i, value: o, pathname: s });
-    return Ee.set(c, this), this.contextCache.set(n, c), c;
+    return Se.set(c, this), this.contextCache.set(n, c), c;
   }
   scope(r) {
     let e = this.scopes.get(r);
@@ -4571,7 +4658,7 @@ class si {
     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 = De(r), this.activeContext = this.findActiveContext(), this.transitionEmitter.set(Object.freeze({
+      r !== this.adapter.read() && this.adapter.replace(r), this.requested = Me(r), this.activeContext = this.findActiveContext(), this.transitionEmitter.set(Object.freeze({
         ...this.transitionEmitter.get(),
         state: "idle",
         settledLocation: r
@@ -4598,7 +4685,7 @@ class si {
   formatContext(r) {
     const e = new URLSearchParams(this.requested.search);
     for (const o of this.knownQueryNames) e.delete(o);
-    for (const o of xt(r)) {
+    for (const o of Ct(r)) {
       const s = this.scopes.get(o);
       if (s != null)
         for (const n of [...s.queries.values()].sort((l, c) => l.name.localeCompare(c.name))) {
@@ -4614,7 +4701,7 @@ class si {
     return `${r.pathname}${i === "" ? "" : `?${i}`}`;
   }
   applyQueriesInLineage(r, e) {
-    for (const i of xt(r)) {
+    for (const i of Ct(r)) {
       const o = this.scopes.get(i);
       if (o != null)
         for (const s of o.queries.values()) this.applyQueryEntry(s, e);
@@ -4622,7 +4709,7 @@ class si {
   }
   applyQueryEntry(r, e) {
     var o;
-    if (!kt(r.context, this.activeContext) && !ci(r.context.pathname, e.pathname)) return;
+    if (!zt(r.context, this.activeContext) && !mi(r.context.pathname, e.pathname)) return;
     const i = e.search.getAll(r.name);
     try {
       const s = i.length === 0 ? r.defaultValue : r.codec.parse(i);
@@ -4638,7 +4725,7 @@ class si {
       this.adapter.replace(l), this.issueEmitter.set(Object.freeze({
         requestedLocation: e.location,
         failedRouteId: ((o = r.context.route) == null ? void 0 : o.id) ?? null,
-        reason: Ke(s),
+        reason: Ve(s),
         fallbackLocation: l
       }), "invalid route query");
     }
@@ -4655,13 +4742,13 @@ class si {
     if (this.disposed) throw new Error("BrowserRouter has been disposed");
   }
 }
-const Ee = /* @__PURE__ */ new WeakMap();
-function _i(t) {
+const Se = /* @__PURE__ */ new WeakMap();
+function Ji(t) {
   if (t == null || typeof t != "object" || Array.isArray(t))
     throw new TypeError("Browser router options must be an object");
-  return new si(t.adapter);
+  return new ui(t.adapter);
 }
-function Qi(t, r, e) {
+function Zi(t, r, e) {
   if (t == null || typeof t.subscribe != "function")
     throw new TypeError("waitForRouteValue requires a readable emitter");
   if (typeof r != "function")
@@ -4675,7 +4762,7 @@ function Qi(t, r, e) {
       l(() => o(e.reason));
     }, u = (h, b, f) => {
       b === "error" ? l(() => o(
-        f ?? new nt("Route prerequisite failed")
+        f ?? new ct("Route prerequisite failed")
       )) : r(h) && l(() => i(h));
     };
     if (e.aborted) {
@@ -4687,7 +4774,7 @@ function Qi(t, r, e) {
     }, { emitCurrent: !1 }), s ? n() : e.addEventListener("abort", c, { once: !0 }));
   });
 }
-function De(t) {
+function Me(t) {
   const r = q(t), e = r.indexOf("?"), i = e < 0 ? r : r.slice(0, e), o = e < 0 ? "" : r.slice(e + 1), s = i.split("/").filter(Boolean);
   return Object.freeze({
     location: r,
@@ -4696,7 +4783,7 @@ function De(t) {
     search: new URLSearchParams(o)
   });
 }
-function ni(t) {
+function hi(t) {
   const r = /* @__PURE__ */ new Set(), e = /* @__PURE__ */ new Set();
   let i = null;
   for (const o of t.entries.values()) {
@@ -4715,7 +4802,7 @@ function ni(t) {
     }
   }
 }
-function ai(t, r) {
+function pi(t, r) {
   const e = [...t.entries.values()].sort((i, o) => i.descriptor.kind === o.descriptor.kind ? 0 : i.descriptor.kind === "literal" ? -1 : 1);
   for (const i of e) {
     const o = i.match(r);
@@ -4723,17 +4810,17 @@ function ai(t, r) {
   }
   return null;
 }
-function li(t) {
+function fi(t) {
   return t.owners.size > 0 && [...t.owners.values()].every(({ complete: r }) => r);
 }
-function xt(t) {
+function Ct(t) {
   const r = [];
   let e = t;
   for (; e != null; )
     r.unshift(e), e = e.parent;
   return r;
 }
-function kt(t, r) {
+function zt(t, r) {
   let e = r;
   for (; e != null; ) {
     if (e === t) return !0;
@@ -4741,57 +4828,57 @@ function kt(t, r) {
   }
   return !1;
 }
-function ci(t, r) {
+function mi(t, r) {
   return t === "/" || r === t || r.startsWith(`${t}/`);
 }
-function di(t, r) {
+function bi(t, r) {
   return `${t === "/" ? "" : t}/${encodeURIComponent(r)}`;
 }
-function ui(t) {
+function gi(t) {
   return t.pathname;
 }
-function Pe(t) {
+function He(t) {
   try {
     return decodeURIComponent(t);
   } catch {
-    throw new nt("Route contains malformed percent encoding");
+    throw new ct("Route contains malformed percent encoding");
   }
 }
-function hi(t) {
+function yi(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 Ke(t) {
+function Ve(t) {
   return t instanceof Error && t.message !== "" ? t.message : "The requested route could not be resolved";
 }
-function pi(t, r, e) {
+function wi(t, r, e) {
   const i = t.get();
   return i == null ? e : r(i);
 }
-function Me(t) {
-  return Ie(t), t;
+function Ue(t) {
+  return Ce(t), t;
 }
-function me(t) {
-  return t != null && typeof t == "object" && Ee.has(t);
+function ye(t) {
+  return t != null && typeof t == "object" && Se.has(t);
 }
-function U(t, r) {
-  if (t !== r.root && (!me(t) || Ee.get(t) !== r))
+function V(t, r) {
+  if (t !== r.root && (!ye(t) || Se.get(t) !== r))
     throw new TypeError("Resolved route does not belong to this router");
 }
-function fi(t) {
+function vi(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 fe(t) {
+function ge(t) {
   if (t == null || typeof t != "object" && typeof t != "function")
     throw new TypeError("Route registration owner must be an object");
 }
-function St(t, r) {
+function $t(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 mi extends g {
+class Ei extends g {
   initialize() {
     const r = this._runtime.router;
     if (r == null) throw new Error("RouteLink requires a router in FrayRuntime");
@@ -4800,7 +4887,7 @@ class mi extends g {
   render() {
     const r = this._runtime.router;
     if (r == null) throw new Error("RouteLink requires a router in FrayRuntime");
-    const e = at(this.props.to) ? r.resolve(this.props.to, this._routeContext ?? r.root) : this.props.to, {
+    const e = dt(this.props.to) ? r.resolve(this.props.to, this._routeContext ?? r.root) : this.props.to, {
       to: i,
       exact: o = !1,
       children: s = [],
@@ -4812,16 +4899,16 @@ class mi extends g {
       href: r.href(e),
       "aria-current": r.isActive(e, o) ? "page" : null,
       onClick: (c) => {
-        n == null || n(c), bi(c, l.target, l.download) && (c.preventDefault(), r.navigate(e));
+        n == null || n(c), xi(c, l.target, l.download) && (c.preventDefault(), r.navigate(e));
       }
     }, s);
   }
 }
-a(mi, "liveProps", []);
-function bi(t, r, e) {
+a(Ei, "liveProps", []);
+function xi(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 gi extends g {
+class ki extends g {
   constructor() {
     super(...arguments);
     a(this, "unregister", null);
@@ -4839,15 +4926,15 @@ class gi extends g {
     });
   }
   render() {
-    return w(xe, null, this.props.children ?? []);
+    return w(Ie, null, this.props.children ?? []);
   }
   onDestroy() {
     var e;
     (e = this.unregister) == null || e.call(this), this.unregister = null;
   }
 }
-a(gi, "liveProps", []);
-class yi extends g {
+a(ki, "liveProps", []);
+class Si extends g {
   constructor() {
     super(...arguments);
     a(this, "registration", null);
@@ -4864,7 +4951,7 @@ class yi extends g {
   }
   render() {
     const e = this.props.valueEmitter.get(), i = this.props.children ?? [];
-    return !this.props.scopeChildren || e == null || this.registration == null ? w(xe, null, i) : w(ye, {
+    return !this.props.scopeChildren || e == null || this.registration == null ? w(Ie, null, i) : w(Ee, {
       key: this.registration.contextFor(e).pathname,
       context: this.registration.contextFor(e),
       children: i
@@ -4875,121 +4962,122 @@ class yi extends g {
     (e = this.registration) == null || e.dispose(), this.registration = null;
   }
 }
-a(yi, "liveProps", []);
+a(Si, "liveProps", []);
 export {
-  $t as BaseSelectionHandler,
-  si as BrowserRouter,
-  re as Button,
+  Lt as BaseSelectionHandler,
+  ui as BrowserRouter,
+  ie as Button,
   j as Checkbox,
-  Jr as ColorPicker,
+  ii as ColorPicker,
   g as Component,
-  ce as DataTable,
-  cr as DefaultTableFilterEncoding,
-  Ct as DescriptionItem,
-  ae as DescriptionList,
-  ue as Dialog,
-  Ce as Dropdown,
+  he as DataTable,
+  mr as DefaultTableFilterEncoding,
+  qt as DescriptionItem,
+  de as DescriptionList,
+  fe as Dialog,
+  Oe as Dropdown,
   y as FilterMode,
-  _ as FilterPanel,
-  xe as Fragment,
-  Gi as FrayRuntime,
-  H as Header,
-  Pr as Label,
-  le as ListView,
-  ji as MemoryNavigationAdapter,
-  Bt as MultiSelectionHandler,
-  se as Panel,
-  V as Placeholder,
-  qe as ProgressBar,
-  yt as QuadCheckbox,
-  ie as RadioButton,
-  he as RadioGroup,
-  mi as RouteLink,
-  gi as RouteQuery,
-  _e as RouteRedirect,
-  ye as RouteScope,
-  nt as RouteUnavailableError,
-  yi as RouteValue,
-  Yi as ServiceScope,
-  ne as Sidebar,
-  Ge as SingleSelectionHandler,
-  Te as SplitView,
-  Ji as StyleRegistry,
-  Be as Tab,
-  Z as TabLine,
-  oe as TabPanel,
-  te as TableHeader,
-  ee as TableHeaderCell,
-  $e as Textbox,
-  Yr as ThemePicker,
-  Oe as Toggle,
-  je as Toolbar,
-  et as TreeItem,
-  de as TreeView,
-  wt as TriCheckbox,
-  ur as applyLocalTableState,
-  ti as assertRouteCodec,
-  W as assertRouteDescriptor,
-  ri as assertRouteQueryCodec,
-  Ie as assertRouteTarget,
-  Ot as assertSort,
-  Y as assertTreeNodes,
-  Di as booleanRouteQueryCodec,
-  _i as createBrowserRouter,
-  Zi as createFrayRuntime,
-  gr as createHandlerTableDataSource,
-  Ni as createHashNavigation,
-  qi as createHistoryNavigation,
-  br as createLocalTableDataSource,
-  Ti as createQueryTableDataSource,
-  yr as createRestTableDataSource,
-  we as createSelectionHandler,
-  Xi as createServiceScope,
-  eo as createStyleRegistry,
+  U as FilterPanel,
+  Ie as Fragment,
+  to as FrayRuntime,
+  ae as GroupPanel,
+  L as Header,
+  _r as Label,
+  ue as ListView,
+  Pi as MemoryNavigationAdapter,
+  Xt as MultiSelectionHandler,
+  le as Panel,
+  H as Placeholder,
+  Fe as ProgressBar,
+  St as QuadCheckbox,
+  oe as RadioButton,
+  me as RadioGroup,
+  Ei as RouteLink,
+  ki as RouteQuery,
+  We as RouteRedirect,
+  Ee as RouteScope,
+  ct as RouteUnavailableError,
+  Si as RouteValue,
+  ro as ServiceScope,
+  ce as Sidebar,
+  Ze as SingleSelectionHandler,
+  ze as SplitView,
+  io as StyleRegistry,
+  Ye as Tab,
+  X as TabLine,
+  ne as TabPanel,
+  re as TableHeader,
+  te as TableHeaderCell,
+  je as Textbox,
+  ri as ThemePicker,
+  qe as Toggle,
+  Le as Toolbar,
+  it as TreeItem,
+  pe as TreeView,
+  It as TriCheckbox,
+  gr as applyLocalTableState,
+  ai as assertRouteCodec,
+  B as assertRouteDescriptor,
+  li as assertRouteQueryCodec,
+  Ce as assertRouteTarget,
+  Ft as assertSort,
+  G as assertTreeNodes,
+  Ui as booleanRouteQueryCodec,
+  Ji as createBrowserRouter,
+  oo as createFrayRuntime,
+  kr as createHandlerTableDataSource,
+  Mi as createHashNavigation,
+  Ki as createHistoryNavigation,
+  xr as createLocalTableDataSource,
+  Ai as createQueryTableDataSource,
+  Sr as createRestTableDataSource,
+  xe as createSelectionHandler,
+  so as createServiceScope,
+  no as createStyleRegistry,
   E as css,
-  to as defaultFrayRuntime,
-  Ye as defaultItemKey,
-  Pi as defineRoute,
-  Ki as defineRouteParameter,
-  ro as defineService,
-  xi as deriveFilterPredicate,
-  ki as deriveFilteredItems,
-  Ci as deriveTreeNode,
-  _t as filterByState,
-  pe as findFrayStylesheetOption,
-  Ri as findTreeNode,
-  Fe as formatRouteTarget,
-  Qr as frayColorOptions,
-  _r as frayThemeOptions,
-  $i as frayThemeVariableCatalog,
-  Ai as getFrayAppearance,
+  ao as defaultFrayRuntime,
+  Xe as defaultItemKey,
+  _i as defineRoute,
+  Qi as defineRouteParameter,
+  lo as defineService,
+  Ci as deriveFilterPredicate,
+  zi as deriveFilteredItems,
+  qi as deriveTreeNode,
+  Jt as filterByState,
+  be as findFrayStylesheetOption,
+  ji as findTreeNode,
+  Ke as formatRouteTarget,
+  Zr as frayColorOptions,
+  Jr as frayThemeOptions,
+  Li as frayThemeVariableCatalog,
+  Di as getFrayAppearance,
   w as h,
-  Se as isFilterMode,
-  at as isRouteDescriptor,
-  ei as isRouteTarget,
+  Re as isFilterMode,
+  dt as isRouteDescriptor,
+  ni as isRouteTarget,
   p as jsx,
-  io as jsxDEV,
+  co as jsxDEV,
   v as jsxs,
-  oo as live,
-  zt as matchesFilterState,
+  uo as live,
+  Nt as matchesFilterState,
   q as normalizeRouteLocation,
-  Ii as parseFilterState,
-  so as provideService,
-  Ui as redirectTo,
-  Br as replaceFrayStylesheet,
-  Mi as routeParameter,
-  Hi as routeTarget,
-  Si as serializeFilterState,
-  dr as serializeTableQuery,
-  Oi as setFrayAppearance,
-  Li as stringRouteCodec,
-  Fi as stringRouteQueryCodec,
-  no as styleRegistry,
-  It as tabButtonId,
-  Tt as tabPanelId,
-  Ir as updateTreeNode,
-  zi as updateWritableTreeNode,
-  Qi as waitForRouteValue,
-  Vi as withRouteQuery
+  Oi as parseFilterState,
+  ho as provideService,
+  Yi as redirectTo,
+  Xr as replaceFrayStylesheet,
+  Bi as routeParameter,
+  Wi as routeTarget,
+  $i as serializeFilterState,
+  br as serializeTableQuery,
+  Fi as setFrayAppearance,
+  Hi as stringRouteCodec,
+  Vi as stringRouteQueryCodec,
+  po as styleRegistry,
+  Ot as tabButtonId,
+  At as tabPanelId,
+  Or as updateTreeNode,
+  Ni as updateWritableTreeNode,
+  Zi as waitForRouteValue,
+  Gi as withRouteQuery
 };
 //# sourceMappingURL=index.js.map