@sylwellsoftware/fray 0.5.0 → 0.6.0

package/dist/index.js

@@ -1,10 +1,10 @@
 var Ye = Object.defineProperty;
-var _e = (t, r, e) => r in t ? Ye(t, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[r] = e;
-var s = (t, r, e) => _e(t, typeof r != "symbol" ? r + "" : r, e);
-import { C as g, j as u, c as v, a as w, i as ie } from "./jsx-dev-runtime-pzseD2Sz.js";
-import { F as pr, b as mr, S as br, d as yr, e as gr, f as wr, g as Er, h as vr, k as Sr, l as kr, m as Ir, n as xr, p as Tr, s as Rr } from "./jsx-dev-runtime-pzseD2Sz.js";
-import { Emitter as I, DerivedEmitter as le, FetchState as k, QueryArg as ke, LiveQuery as Xe, RestQueryHandler as Ze } from "@sylwellsoftware/glue";
-class ze extends g {
+var Xe = (t, r, e) => r in t ? Ye(t, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[r] = e;
+var o = (t, r, e) => Xe(t, typeof r != "symbol" ? r + "" : r, e);
+import { C as y, j as u, c as S, a as w, i as ie } from "./jsx-dev-runtime-CqunwZ8j.js";
+import { F as br, b as gr, S as yr, d as wr, e as Er, f as Sr, g as Ir, h as kr, k as xr, l as vr, m as Tr, n as Rr, p as Nr, s as $r } from "./jsx-dev-runtime-CqunwZ8j.js";
+import { Emitter as x, DerivedEmitter as ae, FetchState as k, QueryArg as ve, LiveQuery as Ze, RestQueryHandler as et } from "@sylwellsoftware/glue";
+class qe extends y {
   render() {
     return this.props.children ?? [];
   }
@@ -19,27 +19,30 @@ const b = {
   /** Neutral mode: Does not affect the inclusion or exclusion of items. */
   Neutral: "neutral"
 };
-function de(t) {
+function le(t) {
   return Object.values(b).some((r) => r === t);
 }
-let et = 1;
-function j(t, r) {
-  return r != null && String(r).length > 0 ? String(r) : `fray-${t}-${et++}`;
+let tt = 1;
+function F(t, r) {
+  return r != null && String(r).length > 0 ? String(r) : `fray-${t}-${tt++}`;
 }
-function M(t, r, e, a) {
+function z(t, r, e, i) {
   if (r.valueEmitter != null)
-    return tt(r.valueEmitter, "valueEmitter"), r.valueEmitter;
-  const i = r.defaultValue ?? r.value ?? r.initialValue ?? e, n = { owner: t, purpose: a };
-  return new I(i, n);
+    return rt(r.valueEmitter, "valueEmitter"), r.valueEmitter;
+  const s = r.defaultValue ?? r.value ?? r.initialValue ?? e, n = { owner: t, purpose: i };
+  return new x(s, n);
 }
-function tt(t, r = "emitter") {
+function rt(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 R(...t) {
+  return t.flatMap((r) => typeof r == "string" ? r.split(/\s+/) : []).filter(Boolean).join(" ");
+}
 function E(t) {
   return t.className ?? t.class ?? "";
 }
-function C(t, ...r) {
+function K(t, ...r) {
   if (t != null) {
     if (typeof t != "function") throw new TypeError("Control callback must be a function");
     t(...r);
@@ -48,54 +51,53 @@ function C(t, ...r) {
 function fe(t, r = "options") {
   if (!Array.isArray(t)) throw new TypeError(`${r} must be an array`);
 }
-function rt(t) {
-  return de(t) ? t : String(t);
+function it(t) {
+  return le(t) ? t : String(t);
 }
-class L extends g {
+class V extends y {
   constructor(e = {}) {
     var n;
     super(e);
-    s(this, "valueEmitter");
-    s(this, "activeTabEmitter");
-    const a = e.tabs ?? [];
-    Ie(a);
-    const i = { ...e };
-    i.valueEmitter == null && e.activeTabEmitter != null && (i.valueEmitter = e.activeTabEmitter), i.defaultValue == null && e.initialActiveTabId != null && (i.defaultValue = e.initialActiveTabId), this.valueEmitter = M(
+    o(this, "valueEmitter");
+    o(this, "activeTabEmitter");
+    const i = e.tabs ?? [];
+    Te(i);
+    const s = { ...e };
+    s.valueEmitter == null && e.activeTabEmitter != null && (s.valueEmitter = e.activeTabEmitter), s.defaultValue == null && e.initialActiveTabId != null && (s.defaultValue = e.initialActiveTabId), this.valueEmitter = z(
       this,
-      i,
-      ((n = a.find((o) => !o.disabled)) == null ? void 0 : n.id) ?? null,
+      s,
+      ((n = i.find((a) => !a.disabled)) == null ? void 0 : n.id) ?? null,
       "active tab"
     ), this.activeTabEmitter = this.valueEmitter;
   }
   initialize() {
     this.watch(this.valueEmitter);
   }
-  selectTab(e, a = null) {
-    e == null || e.disabled || (this.valueEmitter.set(e.id, "tab selected"), C(this.props.onChange, e.id, a));
+  selectTab(e, i = null) {
+    e == null || e.disabled || (this.valueEmitter.set(e.id, "tab selected"), K(this.props.onChange, e.id, i));
   }
   render() {
-    const { tabs: e = [], label: a = "Sections", baseId: i = "fray-tabs" } = this.props;
-    Ie(e);
-    const n = this.valueEmitter.get(), o = this.Host;
+    const { tabs: e = [], label: i = "Sections", baseId: s = "fray-tabs" } = this.props;
+    Te(e);
+    const n = this.valueEmitter.get(), a = this.Host;
     return /* @__PURE__ */ u(
-      o,
+      a,
       {
         role: "tablist",
         className: E(this.props) || null,
-        "aria-label": a,
-        children: e.map((l, d) => /* @__PURE__ */ u(
+        "aria-label": i,
+        children: e.map((l, c) => /* @__PURE__ */ u(
           "button",
           {
-            id: qe(i, l.id),
+            id: Le(s, l.id),
             type: "button",
             role: "tab",
             disabled: !!l.disabled,
-            "data-part": "tab",
             "aria-selected": Object.is(n, l.id) ? "true" : "false",
-            "aria-controls": Le(i, l.id),
+            "aria-controls": Ve(s, l.id),
             tabIndex: Object.is(n, l.id) ? 0 : -1,
             onClick: (h) => this.selectTab(l, h),
-            onKeyDown: (h) => this.handleKeyDown(h, d, e),
+            onKeyDown: (h) => this.handleKeyDown(h, c, e),
             children: l.label ?? String(l.id)
           },
           String(l.id)
@@ -103,59 +105,46 @@ class L extends g {
       }
     );
   }
-  handleKeyDown(e, a, i) {
-    const n = i.map((d, h) => ({ tab: d, tabIndex: h })).filter(({ tab: d }) => !d.disabled);
+  handleKeyDown(e, i, s) {
+    const n = s.map((c, h) => ({ tab: c, tabIndex: h })).filter(({ tab: c }) => !c.disabled);
     if (n.length === 0) return;
-    const o = Math.max(
+    const a = Math.max(
       0,
-      n.findIndex(({ tabIndex: d }) => d === a)
+      n.findIndex(({ tabIndex: c }) => c === i)
     );
     let l;
     if (e.key === "ArrowRight" || e.key === "ArrowDown")
-      l = n[(o + 1) % n.length];
+      l = n[(a + 1) % n.length];
     else if (e.key === "ArrowLeft" || e.key === "ArrowUp")
-      l = n[(o - 1 + n.length) % n.length];
+      l = n[(a - 1 + n.length) % n.length];
     else if (e.key === "Home") l = n[0];
     else if (e.key === "End") l = n.at(-1);
     else return;
     if (l != null && (e.preventDefault(), this.selectTab(l.tab, e), this.dom instanceof Element)) {
-      const d = this.dom.querySelectorAll('[role="tab"]')[l.tabIndex];
-      d == null || d.focus();
+      const c = this.dom.querySelectorAll('[role="tab"]')[l.tabIndex];
+      c == null || c.focus();
     }
   }
 }
-s(L, "hostName", "tab-line"), s(L, "standaloneHostName", "tab-line"), s(L, "baseStyles", [
-  ['& > [data-part="tab"]', ["uiline", "button"]]
-]), s(L, "css", v`
+o(V, "hostName", "tab-line"), o(V, "standaloneHostName", "tab-line"), o(V, "baseStyles", [
+  ['& > button[role="tab"]', ["uiline", "button"]]
+]), o(V, "css", S`
         & {
             display: flex;
             flex-flow: row wrap;
             padding-top: 3px;
-            background: var(--fray-tabline-background, var(--tabline-bg));
-        }
-
-        & > [data-part="tab"] {
-            background: var(--fray-tab-button-background, var(--fray-button-background));
-            border-radius: var(--fray-radius-md, var(--ui-border-radius)) var(--fray-radius-md, var(--ui-border-radius)) 0 0;
-        }
-
-        & > [data-part="tab"][aria-selected="true"] {
-            background: var(
-                --fray-tab-button-background-active,
-                var(--fray-tab-active-background, var(--tab-bg-active))
-            );
         }
     `);
-function qe(t, r) {
-  return `${t}-tab-${Ve(r)}`;
-}
 function Le(t, r) {
-  return `${t}-panel-${Ve(r)}`;
+  return `${t}-tab-${Ue(r)}`;
 }
-function Ve(t) {
+function Ve(t, r) {
+  return `${t}-panel-${Ue(r)}`;
+}
+function Ue(t) {
   return encodeURIComponent(String(t)).replaceAll("%", "-");
 }
-function Ie(t) {
+function Te(t) {
   if (!Array.isArray(t)) throw new TypeError("TabLine tabs must be an array");
   const r = /* @__PURE__ */ new Set();
   for (const e of t) {
@@ -164,44 +153,44 @@ function Ie(t) {
     r.add(e.id);
   }
 }
-class J extends g {
+class _ extends y {
   constructor(e = {}) {
     var n;
     super(e);
-    s(this, "valueEmitter");
-    s(this, "activeTabEmitter");
-    s(this, "baseId");
-    const a = Y(e), i = { ...e };
-    i.valueEmitter == null && e.activeTabEmitter != null && (i.valueEmitter = e.activeTabEmitter), i.defaultValue == null && e.initialActiveTabId != null && (i.defaultValue = e.initialActiveTabId), this.valueEmitter = M(
+    o(this, "valueEmitter");
+    o(this, "activeTabEmitter");
+    o(this, "baseId");
+    const i = Y(e), s = { ...e };
+    s.valueEmitter == null && e.activeTabEmitter != null && (s.valueEmitter = e.activeTabEmitter), s.defaultValue == null && e.initialActiveTabId != null && (s.defaultValue = e.initialActiveTabId), this.valueEmitter = z(
       this,
-      i,
-      ((n = a.find((o) => !o.disabled)) == null ? void 0 : n.id) ?? null,
+      s,
+      ((n = i.find((a) => !a.disabled)) == null ? void 0 : n.id) ?? null,
       "active tab"
-    ), this.activeTabEmitter = this.valueEmitter, this.baseId = j("tabs", e.id);
+    ), this.activeTabEmitter = this.valueEmitter, this.baseId = F("tabs", e.id);
   }
   initialize() {
-    var a;
+    var i;
     const e = Y(this.props);
-    e.some(({ id: i }) => Object.is(i, this.valueEmitter.get())) || this.valueEmitter.set(((a = e.find((i) => !i.disabled)) == null ? void 0 : a.id) ?? null), this.watch(this.valueEmitter);
+    e.some(({ id: s }) => Object.is(s, this.valueEmitter.get())) || this.valueEmitter.set(((i = e.find((s) => !s.disabled)) == null ? void 0 : i.id) ?? null), this.watch(this.valueEmitter);
   }
   setProps(e) {
-    var i;
+    var s;
     super.setProps(e);
-    const a = Y(e);
-    return a.some(({ id: n }) => Object.is(n, this.valueEmitter.get())) || this.valueEmitter.set(((i = a.find((n) => !n.disabled)) == null ? void 0 : i.id) ?? null), this;
+    const i = Y(e);
+    return i.some(({ id: n }) => Object.is(n, this.valueEmitter.get())) || this.valueEmitter.set(((s = i.find((n) => !n.disabled)) == null ? void 0 : s.id) ?? null), this;
   }
   render() {
-    const e = Y(this.props), a = e.find(({ id: n }) => Object.is(n, this.valueEmitter.get())) ?? e.find((n) => !n.disabled) ?? null, i = this.Host;
+    const e = Y(this.props), i = e.find(({ id: n }) => Object.is(n, this.valueEmitter.get())) ?? e.find((n) => !n.disabled) ?? null, s = this.Host;
     return /* @__PURE__ */ w(
-      i,
+      s,
       {
         id: this.baseId,
-        className: E(this.props) || null,
+        className: R("panellike", E(this.props)),
         children: [
           /* @__PURE__ */ u(
-            L,
+            V,
             {
-              tabs: e.map(({ id: n, label: o, disabled: l }) => ({ id: n, label: o, disabled: l })),
+              tabs: e.map(({ id: n, label: a, disabled: l }) => ({ id: n, label: a, disabled: l })),
               valueEmitter: this.valueEmitter,
               baseId: this.baseId,
               ...this.props.label == null ? {} : { label: this.props.label },
@@ -209,33 +198,30 @@ class J extends g {
             },
             "tab-list"
           ),
-          a == null ? null : /* @__PURE__ */ u(
+          i == null ? null : /* @__PURE__ */ u(
             "div",
             {
-              id: Le(this.baseId, a.id),
+              id: Ve(this.baseId, i.id),
               role: "tabpanel",
               "data-part": "content",
-              "aria-labelledby": qe(this.baseId, a.id),
+              "aria-labelledby": Le(this.baseId, i.id),
               tabIndex: 0,
-              children: a.content
+              children: i.content
             },
-            String(a.id)
+            String(i.id)
           )
         ]
       }
     );
   }
 }
-s(J, "dependencies", [L, ze]), s(J, "hostName", "tab-panel"), s(J, "standaloneHostName", "tab-panel"), s(J, "css", v`
+o(_, "dependencies", [V, qe]), o(_, "hostName", "tab-panel"), o(_, "standaloneHostName", "tab-panel"), o(_, "css", S`
         & {
             display: flex;
             flex-direction: column;
             width: 100%;
             min-height: 0;
             overflow: hidden;
-            background: var(--fray-panel-background, var(--panel-bg, transparent));
-            border-radius: var(--fray-panel-radius, var(--panel-radius));
-            box-shadow: var(--fray-panel-shadow, var(--panel-shadow, none));
         }
 
         & > [data-part="content"] {
@@ -243,75 +229,71 @@ s(J, "dependencies", [L, ze]), s(J, "hostName", "tab-panel"), s(J, "standaloneHo
             flex-direction: column;
             flex: 1;
             overflow: auto;
-            background: var(--fray-panel-background, var(--panel-bg, transparent));
         }
     `);
 function Y(t) {
   const r = t.tabs ?? [];
   if (!Array.isArray(r)) throw new TypeError("TabPanel tabs must be an array");
-  const a = (Array.isArray(t.children) ? t.children : t.children == null ? [] : [t.children]).filter((o) => ie(o) && o.type === ze).map((o, l) => {
-    if (!ie(o)) throw new TypeError("TabPanel children must be Tab nodes");
-    const d = o.props;
+  const i = (Array.isArray(t.children) ? t.children : t.children == null ? [] : [t.children]).filter((a) => ie(a) && a.type === qe).map((a, l) => {
+    if (!ie(a)) throw new TypeError("TabPanel children must be Tab nodes");
+    const c = a.props;
     return {
-      id: d.id ?? `tab-${l + 1}`,
-      label: d.label ?? `Tab ${l + 1}`,
-      disabled: !!d.disabled,
-      content: d.children ?? []
+      id: c.id ?? `tab-${l + 1}`,
+      label: c.label ?? `Tab ${l + 1}`,
+      disabled: !!c.disabled,
+      content: c.children ?? []
     };
-  }), i = r.length > 0 ? r.map((o) => ({
-    ...o,
-    label: o.label ?? String(o.id),
-    disabled: !!o.disabled,
-    content: o.content ?? o.component ?? []
-  })) : a, n = /* @__PURE__ */ new Set();
-  for (const o of i) {
-    if ((o == null ? void 0 : o.id) == null) throw new TypeError("Each tab requires an id");
-    if (n.has(o.id)) throw new Error(`Duplicate tab id: ${String(o.id)}`);
-    n.add(o.id);
-  }
-  return i;
-}
-class _ extends g {
+  }), s = r.length > 0 ? r.map((a) => ({
+    ...a,
+    label: a.label ?? String(a.id),
+    disabled: !!a.disabled,
+    content: a.content ?? a.component ?? []
+  })) : i, n = /* @__PURE__ */ new Set();
+  for (const a of s) {
+    if ((a == null ? void 0 : a.id) == null) throw new TypeError("Each tab requires an id");
+    if (n.has(a.id)) throw new Error(`Duplicate tab id: ${String(a.id)}`);
+    n.add(a.id);
+  }
+  return s;
+}
+class ce extends y {
   constructor(e = {}) {
     super(e);
-    s(this, "panelId");
-    s(this, "headerId");
-    this.panelId = j("panel", e.id), this.headerId = `${this.panelId}-title`;
+    o(this, "panelId");
+    o(this, "headerId");
+    this.panelId = F("panel", e.id), this.headerId = `${this.panelId}-title`;
   }
   render() {
     const {
       header: e = null,
-      toolbar: a = null,
-      children: i = [],
+      toolbar: i = null,
+      children: s = [],
       orientation: n = "vertical",
-      disabled: o = !1
+      disabled: a = !1
     } = this.props;
     if (!["horizontal", "vertical"].includes(n))
       throw new TypeError("Panel orientation must be horizontal or vertical");
-    const l = this.Host, d = e == null ? null : /* @__PURE__ */ u("header", { "data-part": "header", children: typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ u("h2", { id: this.headerId, children: e }) : /* @__PURE__ */ u("div", { id: this.headerId, children: e }) });
+    const l = this.Host, c = e == null ? null : /* @__PURE__ */ u("header", { children: typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ u("h2", { id: this.headerId, children: e }) : /* @__PURE__ */ u("div", { id: this.headerId, children: e }) });
     return /* @__PURE__ */ w(
       l,
       {
         id: this.panelId,
         role: e == null ? null : "region",
-        className: E(this.props) || null,
+        className: R("panellike", E(this.props)),
         "data-orientation": n,
-        "data-disabled": o ? "" : null,
-        "aria-disabled": o ? "true" : null,
+        "data-disabled": a ? "" : null,
+        "aria-disabled": a ? "true" : null,
         "aria-labelledby": e == null ? null : this.headerId,
         children: [
-          d,
-          a,
-          /* @__PURE__ */ u("div", { "data-part": "content", "data-orientation": n, children: i })
+          c,
+          i,
+          /* @__PURE__ */ u("div", { "data-part": "content", "data-orientation": n, children: s })
         ]
       }
     );
   }
 }
-s(_, "hostName", "panel"), s(_, "standaloneHostName", "layout-panel"), s(_, "baseStyles", [
-  ["&", ["panel"]],
-  ['& > [data-part="header"]', ["sectionheader"]]
-]), s(_, "css", v`
+o(ce, "hostName", "panel"), o(ce, "standaloneHostName", "layout-panel"), o(ce, "css", S`
         & {
             display: flex;
             flex-direction: column;
@@ -319,24 +301,11 @@ s(_, "hostName", "panel"), s(_, "standaloneHostName", "layout-panel"), s(_, "bas
             flex: 0 0 auto;
         }
 
-        & > [data-part="header"] h2 {
+        & > header h2 {
             margin: 0;
             font: inherit;
         }
 
-        & > [data-part="header"] {
-            background: var(
-                --fray-panel-header-background,
-                var(--fray-section-header-background, var(--fray-header-background))
-            );
-            color: var(
-                --fray-panel-header-color,
-                var(--fray-section-header-color, var(--fray-header-color))
-            );
-            border: var(--fray-section-header-border, var(--fray-header-border));
-            box-shadow: var(--fray-section-header-shadow, var(--fray-header-shadow));
-        }
-
         & > [data-part="content"] {
             display: flex;
             flex: 1;
@@ -353,42 +322,39 @@ s(_, "hostName", "panel"), s(_, "standaloneHostName", "layout-panel"), s(_, "bas
             flex-direction: column;
         }
     `);
-class xe extends g {
+class st extends y {
   constructor(e = {}) {
     super(e);
-    s(this, "sidebarId");
-    s(this, "headerId");
-    this.sidebarId = j("sidebar", e.id), this.headerId = `${this.sidebarId}-title`;
+    o(this, "sidebarId");
+    o(this, "headerId");
+    this.sidebarId = F("sidebar", e.id), this.headerId = `${this.sidebarId}-title`;
   }
   render() {
     const {
       header: e = null,
-      toolbar: a = null,
-      ariaLabel: i,
+      toolbar: i = null,
+      ariaLabel: s,
       children: n = []
-    } = this.props, o = e == null ? null : /* @__PURE__ */ u("header", { "data-part": "header", children: typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ u("h2", { id: this.headerId, children: e }) : /* @__PURE__ */ u("div", { id: this.headerId, children: e }) });
+    } = this.props, a = e == null ? null : /* @__PURE__ */ u("header", { children: typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ u("h2", { id: this.headerId, children: e }) : /* @__PURE__ */ u("div", { id: this.headerId, children: e }) });
     return /* @__PURE__ */ w(
       "aside",
       {
         id: this.sidebarId,
         className: E(this.props) || void 0,
         "data-fray-component": "sidebar",
-        "aria-label": e == null ? i : null,
+        "aria-label": e == null ? s : null,
         "aria-labelledby": e == null ? null : this.headerId,
         children: [
-          o,
-          a == null ? null : /* @__PURE__ */ u("div", { "data-part": "toolbar", children: a }),
+          a,
+          i == null ? null : /* @__PURE__ */ u("div", { "data-part": "toolbar", children: i }),
           /* @__PURE__ */ u("div", { "data-part": "content", tabIndex: 0, children: n })
         ]
       }
     );
   }
 }
-s(xe, "baseStyles", [
-  ['aside[data-fray-component="sidebar"]', ["panel"]],
-  ['aside[data-fray-component="sidebar"] > [data-part="header"]', ["sectionheader"]]
-]), s(xe, "css", v`
-        aside[data-fray-component="sidebar"] {
+o(st, "css", S`
+        aside {
             display: flex;
             flex-direction: column;
             min-width: 0;
@@ -396,17 +362,17 @@ s(xe, "baseStyles", [
             overflow: hidden;
         }
 
-        aside[data-fray-component="sidebar"] > [data-part="header"],
-        aside[data-fray-component="sidebar"] > [data-part="toolbar"] {
+        aside > header,
+        aside > [data-part="toolbar"] {
             flex: 0 0 auto;
         }
 
-        aside[data-fray-component="sidebar"] > [data-part="header"] h2 {
+        aside > header h2 {
             margin: 0;
             font: inherit;
         }
 
-        aside[data-fray-component="sidebar"] > [data-part="content"] {
+        aside > [data-part="content"] {
             flex: 1 1 auto;
             min-width: 0;
             min-height: 0;
@@ -414,27 +380,27 @@ s(xe, "baseStyles", [
             overflow-y: auto;
         }
     `);
-class ce extends g {
+class de extends y {
   render() {
     const {
       primary: r = null,
       secondary: e = null,
-      direction: a = "horizontal",
-      primarySize: i,
+      direction: i = "horizontal",
+      primarySize: s,
       primaryLabel: n,
-      secondaryLabel: o
+      secondaryLabel: a
     } = this.props;
-    if (a !== "horizontal" && a !== "vertical")
+    if (i !== "horizontal" && i !== "vertical")
       throw new TypeError("SplitView direction must be horizontal or vertical");
-    if (i != null && (typeof i != "string" || i.length === 0))
+    if (s != null && (typeof s != "string" || s.length === 0))
       throw new TypeError("SplitView primarySize must be a non-empty CSS size");
     const l = this.Host;
     return /* @__PURE__ */ w(
       l,
       {
         className: E(this.props) || null,
-        "data-direction": a,
-        style: i == null ? void 0 : { "--split-primary-size": i },
+        "data-direction": i,
+        style: s == null ? void 0 : { "--split-primary-size": s },
         children: [
           /* @__PURE__ */ u(
             "div",
@@ -449,8 +415,8 @@ class ce extends g {
             "div",
             {
               "data-part": "secondary",
-              role: o == null ? null : "region",
-              "aria-label": o,
+              role: a == null ? null : "region",
+              "aria-label": a,
               children: e ?? this.props.children ?? []
             }
           )
@@ -459,7 +425,7 @@ class ce extends g {
     );
   }
 }
-s(ce, "hostName", "split-view"), s(ce, "standaloneHostName", "split-view"), s(ce, "css", v`
+o(de, "hostName", "split-view"), o(de, "standaloneHostName", "split-view"), o(de, "css", S`
         & {
             display: grid;
             flex: 1 1 auto;
@@ -494,9 +460,9 @@ s(ce, "hostName", "split-view"), s(ce, "standaloneHostName", "split-view"), s(ce
             border-block-end: 1px solid var(--ui-border-color);
         }
     `);
-class Ue extends g {
+class Pe extends y {
   render() {
-    const { term: r, value: e, children: a = [] } = this.props;
+    const { term: r, value: e, children: i = [] } = this.props;
     return /* @__PURE__ */ w(
       "div",
       {
@@ -504,45 +470,39 @@ class Ue extends g {
         "data-fray-component": "description-item",
         children: [
           /* @__PURE__ */ u("dt", { children: r }),
-          /* @__PURE__ */ u("dd", { children: e ?? a })
+          /* @__PURE__ */ u("dd", { children: e ?? i })
         ]
       }
     );
   }
 }
-s(Ue, "css", v`
-        div[data-fray-component="description-item"] {
+o(Pe, "css", S`
+        div:has(> dt + dd) {
             display: grid;
             grid-template-columns: minmax(7rem, 0.7fr) minmax(0, 1.3fr);
             gap: var(--spacing-small, 0.5rem);
             padding-block: var(--spacing-small, 0.5rem);
-            border-block-end: 1px solid var(--ui-border-color);
         }
 
-        div[data-fray-component="description-item"] > dt {
-            color: var(--ui-muted-text-color, var(--ui-text-color));
-            font-weight: 600;
-        }
-
-        div[data-fray-component="description-item"] > dd {
+        div:has(> dt + dd) > dd {
             min-width: 0;
             margin: 0;
             overflow-wrap: anywhere;
         }
 
         @media (max-width: 36rem) {
-            div[data-fray-component="description-item"] {
+            div:has(> dt + dd) {
                 grid-template-columns: minmax(0, 1fr);
                 gap: 0.15rem;
             }
         }
     `);
-class Te extends g {
+class Re extends y {
   render() {
     return /* @__PURE__ */ u(
       "dl",
       {
-        className: E(this.props) || void 0,
+        className: R("datacomponentlike", E(this.props)),
         "data-fray-component": "description-list",
         "aria-label": this.props.label,
         children: this.props.children ?? []
@@ -550,21 +510,21 @@ class Te extends g {
     );
   }
 }
-s(Te, "dependencies", [Ue]), s(Te, "css", v`
-        dl[data-fray-component="description-list"] {
+o(Re, "dependencies", [Pe]), o(Re, "css", S`
+        dl:has(> div > dt + dd) {
             display: grid;
             margin: 0;
         }
     `);
-class H extends g {
+class M extends y {
   render() {
-    const r = at(this.props.width ?? 65), e = this.Host;
+    const r = nt(this.props.width ?? 65), e = this.Host;
     return /* @__PURE__ */ u(e, { style: { width: `${r}%` }, "aria-hidden": "true" });
   }
 }
-s(H, "hostName", "placeholder"), s(H, "standaloneHostName", "loading-placeholder"), s(H, "baseStyles", [
+o(M, "hostName", "placeholder"), o(M, "standaloneHostName", "loading-placeholder"), o(M, "baseStyles", [
   ["&::after", ["after", "working"]]
-]), s(H, "css", v`
+]), o(M, "css", S`
         & {
             display: block;
             min-width: 3rem;
@@ -581,182 +541,182 @@ s(H, "hostName", "placeholder"), s(H, "standaloneHostName", "loading-placeholder
             to { background-position: 2rem 0; }
         }
     `);
-function at(t) {
+function nt(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 Pe(t, r, e) {
-  ye(e);
-  for (const a of e) {
-    const i = r[a.key];
-    if (i == null) continue;
-    const n = a.options.flatMap((d) => {
-      const h = i[d.key];
-      return h == null || h === b.Neutral ? [] : [{ option: d, mode: h }];
+function Be(t, r, e) {
+  we(e);
+  for (const i of e) {
+    const s = r[i.key];
+    if (s == null) continue;
+    const n = i.options.flatMap((c) => {
+      const h = s[c.key];
+      return h == null || h === b.Neutral ? [] : [{ option: c, mode: h }];
     });
-    if (n.some(({ option: d, mode: h }) => h === b.Deny && d.matches(t)) || n.filter(({ mode: d }) => d === b.Require).some(({ option: d }) => !d.matches(t)))
+    if (n.some(({ option: c, mode: h }) => h === b.Deny && c.matches(t)) || n.filter(({ mode: c }) => c === b.Require).some(({ option: c }) => !c.matches(t)))
       return !1;
-    const l = n.filter(({ mode: d }) => d === b.Prefer);
-    if (l.length > 0 && !l.some(({ option: d }) => d.matches(t)))
+    const l = n.filter(({ mode: c }) => c === b.Prefer);
+    if (l.length > 0 && !l.some(({ option: c }) => c.matches(t)))
       return !1;
   }
   return !0;
 }
-function it(t, r, e) {
+function ot(t, r, e) {
   if (!Array.isArray(t)) throw new TypeError("Filtered items must be an array");
-  return t.filter((a) => Pe(a, r, e));
+  return t.filter((i) => Be(i, r, e));
 }
-function ar(t, r, e = null) {
-  return ye(r), new le(
+function nr(t, r, e = null) {
+  return we(r), new ae(
     [t],
-    ([a]) => (i) => Pe(i, a, r),
+    ([i]) => (s) => Be(s, i, r),
     { owner: e, purpose: "filter predicate" }
   );
 }
-function ir(t, r, e, a = null) {
-  return ye(e), new le(
+function or(t, r, e, i = null) {
+  return we(e), new ae(
     [t, r],
-    ([i, n]) => it(i, n, e),
-    { owner: a, purpose: "filtered items" }
+    ([s, n]) => ot(s, n, e),
+    { owner: i, purpose: "filtered items" }
   );
 }
-function nr(t) {
-  nt(t);
+function ar(t) {
+  at(t);
   const r = {};
   for (const e of Object.keys(t).sort()) {
-    const a = {}, i = t[e];
-    for (const n of Object.keys(i).sort())
-      a[n] = i[n];
-    r[e] = a;
+    const i = {}, s = t[e];
+    for (const n of Object.keys(s).sort())
+      i[n] = s[n];
+    r[e] = i;
   }
   return { version: 1, dimensions: r };
 }
-function sr(t) {
-  if (!Q(t) || t.version !== 1 || !Q(t.dimensions))
+function lr(t) {
+  if (!W(t) || t.version !== 1 || !W(t.dimensions))
     throw new TypeError("Filter state must use version 1 with a dimensions object");
   const r = {};
-  for (const [e, a] of Object.entries(t.dimensions)) {
-    if (U(e, "Filter dimension"), !Q(a))
+  for (const [e, i] of Object.entries(t.dimensions)) {
+    if (P(e, "Filter dimension"), !W(i))
       throw new TypeError(`Filter dimension ${e} must be an object`);
-    const i = {};
-    for (const [n, o] of Object.entries(a)) {
-      if (U(n, `Filter option in ${e}`), !de(o))
+    const s = {};
+    for (const [n, a] of Object.entries(i)) {
+      if (P(n, `Filter option in ${e}`), !le(a))
         throw new TypeError(
-          `Unknown filter mode for ${e}.${n}: ${String(o)}`
+          `Unknown filter mode for ${e}.${n}: ${String(a)}`
         );
-      i[n] = o;
+      s[n] = a;
     }
-    r[e] = i;
+    r[e] = s;
   }
   return r;
 }
-function nt(t) {
-  if (!Q(t)) throw new TypeError("Filter state must be an object");
+function at(t) {
+  if (!W(t)) throw new TypeError("Filter state must be an object");
   for (const [r, e] of Object.entries(t)) {
-    if (U(r, "Filter dimension"), !Q(e))
+    if (P(r, "Filter dimension"), !W(e))
       throw new TypeError(`Filter dimension ${r} must be an object`);
-    for (const [a, i] of Object.entries(e))
-      if (U(a, `Filter option in ${r}`), !de(i))
+    for (const [i, s] of Object.entries(e))
+      if (P(i, `Filter option in ${r}`), !le(s))
         throw new TypeError(
-          `Unknown filter mode for ${r}.${a}: ${String(i)}`
+          `Unknown filter mode for ${r}.${i}: ${String(s)}`
         );
   }
 }
-function ye(t) {
+function we(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 (U(e.key, "Filter dimension"), r.has(e.key))
+    if (P(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 a = /* @__PURE__ */ new Set();
-    for (const i of e.options) {
-      if (U(i.key, `Filter option in ${e.key}`), a.has(i.key))
-        throw new Error(`Duplicate filter option: ${e.key}.${i.key}`);
-      if (a.add(i.key), typeof i.matches != "function")
-        throw new TypeError(`Filter matcher ${e.key}.${i.key} must be a function`);
+    const i = /* @__PURE__ */ new Set();
+    for (const s of e.options) {
+      if (P(s.key, `Filter option in ${e.key}`), i.has(s.key))
+        throw new Error(`Duplicate filter option: ${e.key}.${s.key}`);
+      if (i.add(s.key), typeof s.matches != "function")
+        throw new TypeError(`Filter matcher ${e.key}.${s.key} must be a function`);
     }
   }
 }
-function U(t, r) {
+function P(t, r) {
   if (t.length === 0 || t === "__proto__" || t === "prototype" || t === "constructor")
     throw new TypeError(`${r} key is not safe for persisted state`);
 }
-function Q(t) {
+function W(t) {
   return t != null && typeof t == "object" && !Array.isArray(t);
 }
-class Be {
+class Ge {
   constructor({
     getItems: r,
-    getKey: e = we,
-    selectedItemsEmitter: a,
-    owner: i = null
+    getKey: e = Se,
+    selectedItemsEmitter: i,
+    owner: s = null
   }) {
-    s(this, "getItems");
-    s(this, "getKey");
-    s(this, "selectedItemsEmitter");
-    s(this, "selectedItems$");
-    s(this, "ownsSelectedItemsEmitter");
-    s(this, "rows", []);
-    s(this, "rowCleanups", []);
-    s(this, "activeIndex", 0);
-    s(this, "anchorIndex", null);
-    s(this, "dragStartIndex", null);
-    s(this, "dragOriginEvent", null);
-    s(this, "dragMoved", !1);
-    s(this, "dragCleanup", null);
-    s(this, "suppressNextClick", !1);
-    s(this, "suppressClickTimer", null);
-    s(this, "destroyed", !1);
-    s(this, "ownedSelectedItemsEmitter");
+    o(this, "getItems");
+    o(this, "getKey");
+    o(this, "selectedItemsEmitter");
+    o(this, "selectedItems$");
+    o(this, "ownsSelectedItemsEmitter");
+    o(this, "rows", []);
+    o(this, "rowCleanups", []);
+    o(this, "activeIndex", 0);
+    o(this, "anchorIndex", null);
+    o(this, "dragStartIndex", null);
+    o(this, "dragOriginEvent", null);
+    o(this, "dragMoved", !1);
+    o(this, "dragCleanup", null);
+    o(this, "suppressNextClick", !1);
+    o(this, "suppressClickTimer", null);
+    o(this, "destroyed", !1);
+    o(this, "ownedSelectedItemsEmitter");
     if (typeof r != "function")
       throw new TypeError("Selection handler getItems must be a function");
     if (typeof e != "function")
       throw new TypeError("Selection handler getKey must be a function");
-    this.getItems = r, this.getKey = e, this.ownedSelectedItemsEmitter = a == null ? new I([], { owner: i, purpose: "selected items" }) : null, this.selectedItemsEmitter = a ?? this.ownedSelectedItemsEmitter, this.selectedItems$ = this.selectedItemsEmitter, this.ownsSelectedItemsEmitter = this.ownedSelectedItemsEmitter != null;
+    this.getItems = r, this.getKey = e, this.ownedSelectedItemsEmitter = i == null ? new x([], { owner: s, purpose: "selected items" }) : null, this.selectedItemsEmitter = i ?? this.ownedSelectedItemsEmitter, this.selectedItems$ = this.selectedItemsEmitter, this.ownsSelectedItemsEmitter = this.ownedSelectedItemsEmitter != null;
   }
   rowsUpdated(r) {
-    this.destroyed || (this.releaseRows(), this.rows = Array.from(r ?? []), this.rows.forEach((e, a) => this.wireRow(e, a)), this.activeIndex = lt(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 = dt(this.activeIndex, this.rows.length), this.reconcileSelectedItems(), this.syncRows());
   }
   wireRow(r, e) {
-    const a = (l) => this.handleClick(e, l), i = (l) => this.handleKeyDown(e, l), n = (l) => this.handleMouseDown(e, l, r), o = (l) => this.handleMouseEnter(e, l);
-    r.addEventListener("click", a), r.addEventListener("keydown", i), r.addEventListener("mousedown", n), r.addEventListener("mouseenter", o), this.rowCleanups.push(() => {
-      r.removeEventListener("click", a), r.removeEventListener("keydown", i), r.removeEventListener("mousedown", n), r.removeEventListener("mouseenter", o);
+    const i = (l) => this.handleClick(e, l), s = (l) => this.handleKeyDown(e, l), n = (l) => this.handleMouseDown(e, l, r), a = (l) => this.handleMouseEnter(e, l);
+    r.addEventListener("click", i), r.addEventListener("keydown", s), r.addEventListener("mousedown", n), r.addEventListener("mouseenter", a), this.rowCleanups.push(() => {
+      r.removeEventListener("click", i), r.removeEventListener("keydown", s), r.removeEventListener("mousedown", n), r.removeEventListener("mouseenter", a);
     });
   }
   handleClick(r, e) {
-    var a;
+    var i;
     if (e.preventDefault(), this.suppressNextClick) {
       this.clearClickSuppression();
       return;
     }
-    this.activeIndex = r, this.selectIndex(r, e), (a = this.rows[r]) == null || a.focus();
+    this.activeIndex = r, this.selectIndex(r, e), (i = this.rows[r]) == null || i.focus();
   }
-  handleMouseDown(r, e, a) {
+  handleMouseDown(r, e, i) {
     if (e.button !== 0 || !this.supportsDragSelection()) return;
     this.finishDrag(!1), this.clearClickSuppression(), this.dragStartIndex = r, this.dragOriginEvent = e, this.dragMoved = !1;
-    const i = a.ownerDocument, n = () => this.finishDrag(this.dragMoved);
-    i.addEventListener("mouseup", n), this.dragCleanup = () => i.removeEventListener("mouseup", n);
+    const s = i.ownerDocument, n = () => this.finishDrag(this.dragMoved);
+    s.addEventListener("mouseup", n), this.dragCleanup = () => s.removeEventListener("mouseup", n);
   }
   handleMouseEnter(r, e) {
-    var a;
-    this.dragStartIndex != null && (r === this.dragStartIndex && !this.dragMoved || r === this.activeIndex && this.dragMoved || (e.preventDefault(), this.dragMoved = !0, this.activeIndex = r, this.selectDragRange(this.dragStartIndex, r, this.dragOriginEvent ?? e), (a = this.rows[r]) == null || a.focus()));
+    var i;
+    this.dragStartIndex != null && (r === this.dragStartIndex && !this.dragMoved || r === this.activeIndex && this.dragMoved || (e.preventDefault(), this.dragMoved = !0, this.activeIndex = r, this.selectDragRange(this.dragStartIndex, r, this.dragOriginEvent ?? e), (i = this.rows[r]) == null || i.focus()));
   }
   handleKeyDown(r, e) {
     var n;
-    const a = this.rows.length - 1;
-    let i;
-    if (e.key === "ArrowDown") i = Math.min(r + 1, a);
-    else if (e.key === "ArrowUp") i = Math.max(r - 1, 0);
-    else if (e.key === "Home") i = 0;
-    else if (e.key === "End") i = a;
+    const i = this.rows.length - 1;
+    let s;
+    if (e.key === "ArrowDown") s = Math.min(r + 1, i);
+    else if (e.key === "ArrowUp") s = Math.max(r - 1, 0);
+    else if (e.key === "Home") s = 0;
+    else if (e.key === "End") s = i;
     else if (e.key === " " || e.key === "Enter") {
       e.preventDefault(), this.activeIndex = r, this.selectIndex(r, e);
       return;
     } else return;
-    e.preventDefault(), this.activeIndex = i, this.onKeyboardMove(i, e), this.syncRows(), (n = this.rows[i]) == null || n.focus();
+    e.preventDefault(), this.activeIndex = s, this.onKeyboardMove(s, e), this.syncRows(), (n = this.rows[s]) == null || n.focus();
   }
   onKeyboardMove(r, e) {
     this.selectIndex(r, e);
@@ -764,7 +724,7 @@ class Be {
   supportsDragSelection() {
     return !1;
   }
-  selectDragRange(r, e, a) {
+  selectDragRange(r, e, i) {
   }
   selectIndex(r, e) {
   }
@@ -780,14 +740,14 @@ class Be {
   reconcileSelectedItems() {
     const r = this.getSelectedItems();
     if (r.length === 0) return;
-    const e = new Set(r.map((i, n) => this.getKey(i, n))), a = this.getItems().filter((i, n) => e.has(this.getKey(i, n)));
-    (a.length !== r.length || a.some((i, n) => !Object.is(i, r[n]))) && this.selectedItemsEmitter.set([...a], "selection reconciled with rows");
+    const e = new Set(r.map((s, n) => this.getKey(s, n))), i = this.getItems().filter((s, n) => e.has(this.getKey(s, n)));
+    (i.length !== r.length || i.some((s, n) => !Object.is(s, r[n]))) && this.selectedItemsEmitter.set([...i], "selection reconciled with rows");
   }
   syncRows() {
-    const r = new Set(this.getSelectedItems().map((a, i) => this.getKey(a, i))), e = this.getItems();
-    this.rows.forEach((a, i) => {
-      const n = e[i], o = n !== void 0 && r.has(this.getKey(n, i));
-      a.classList.toggle("selected", o), a.setAttribute("aria-selected", String(o)), a.tabIndex = i === this.activeIndex ? 0 : -1;
+    const r = new Set(this.getSelectedItems().map((i, s) => this.getKey(i, s))), e = this.getItems();
+    this.rows.forEach((i, s) => {
+      const n = e[s], a = n !== void 0 && r.has(this.getKey(n, s));
+      i.classList.toggle("selected", a), i.setAttribute("aria-selected", String(a)), i.tabIndex = s === this.activeIndex ? 0 : -1;
     });
   }
   releaseRows() {
@@ -806,26 +766,26 @@ class Be {
     this.destroyed || (this.destroyed = !0, this.finishDrag(!1), this.clearClickSuppression(), this.releaseRows(), (r = this.ownedSelectedItemsEmitter) == null || r.dispose());
   }
 }
-class ge extends Be {
+class Ee extends Ge {
   constructor(e) {
-    const a = e.selectedItemEmitter == null ? new I(null, {
+    const i = e.selectedItemEmitter == null ? new x(null, {
       owner: e.owner,
       purpose: "selected item"
-    }) : null, i = e.selectedItemEmitter ?? a;
+    }) : null, s = e.selectedItemEmitter ?? i;
     super({
       getItems: e.getItems,
       ...e.getKey == null ? {} : { getKey: e.getKey },
       ...e.owner === void 0 ? {} : { owner: e.owner },
-      selectedItemsEmitter: new ot(i)
+      selectedItemsEmitter: new ct(s)
     });
-    s(this, "selectedItemEmitter");
-    s(this, "selectedItem$");
-    s(this, "ownedSelectedItemEmitter");
-    this.ownedSelectedItemEmitter = a, this.selectedItemEmitter = i, this.selectedItem$ = i;
+    o(this, "selectedItemEmitter");
+    o(this, "selectedItem$");
+    o(this, "ownedSelectedItemEmitter");
+    this.ownedSelectedItemEmitter = i, this.selectedItemEmitter = s, this.selectedItem$ = s;
   }
   selectIndex(e) {
-    const a = this.getItems()[e];
-    a !== void 0 && (this.anchorIndex = e, this.setSelectedItems([a], "single selection changed"));
+    const i = this.getItems()[e];
+    i !== void 0 && (this.anchorIndex = e, this.setSelectedItems([i], "single selection changed"));
   }
   getSelectedItem() {
     return this.selectedItemEmitter.get();
@@ -835,21 +795,21 @@ class ge extends Be {
     super.destroy(), (e = this.ownedSelectedItemEmitter) == null || e.dispose();
   }
 }
-class st extends Be {
+class lt extends Ge {
   selectIndex(r, e) {
-    const a = this.getItems(), i = a[r];
-    if (i !== void 0) {
+    const i = this.getItems(), s = i[r];
+    if (s !== void 0) {
       if (e.shiftKey && this.anchorIndex != null) {
-        const n = Math.min(this.anchorIndex, r), o = Math.max(this.anchorIndex, r), l = a.slice(n, o + 1), d = ue(e) ? Re(this.getSelectedItems(), l, this.getKey) : [...l];
-        this.setSelectedItems(d, "range selection changed");
+        const n = Math.min(this.anchorIndex, r), a = Math.max(this.anchorIndex, r), l = i.slice(n, a + 1), c = ue(e) ? Ne(this.getSelectedItems(), l, this.getKey) : [...l];
+        this.setSelectedItems(c, "range selection changed");
         return;
       }
       if (ue(e) || "key" in e && e.key === " ") {
-        const n = this.getSelectedItems(), o = this.getKey(i, r), d = n.some((h, f) => Object.is(this.getKey(h, f), o)) ? n.filter((h, f) => !Object.is(this.getKey(h, f), o)) : [...n, i];
-        this.anchorIndex = r, this.setSelectedItems(d, "multi selection toggled");
+        const n = this.getSelectedItems(), a = this.getKey(s, r), c = n.some((h, p) => Object.is(this.getKey(h, p), a)) ? n.filter((h, p) => !Object.is(this.getKey(h, p), a)) : [...n, s];
+        this.anchorIndex = r, this.setSelectedItems(c, "multi selection toggled");
         return;
       }
-      this.anchorIndex = r, this.setSelectedItems([i], "multi selection changed");
+      this.anchorIndex = r, this.setSelectedItems([s], "multi selection changed");
     }
   }
   onKeyboardMove(r, e) {
@@ -858,15 +818,15 @@ class st extends Be {
   supportsDragSelection() {
     return !0;
   }
-  selectDragRange(r, e, a) {
-    const i = this.getItems(), n = Math.min(r, e), o = Math.max(r, e), l = i.slice(n, o + 1), d = ue(a) ? Re(this.getSelectedItems(), l, this.getKey) : [...l];
-    this.anchorIndex = r, this.setSelectedItems(d, "drag selection changed");
+  selectDragRange(r, e, i) {
+    const s = this.getItems(), n = Math.min(r, e), a = Math.max(r, e), l = s.slice(n, a + 1), c = ue(i) ? Ne(this.getSelectedItems(), l, this.getKey) : [...l];
+    this.anchorIndex = r, this.setSelectedItems(c, "drag selection changed");
   }
 }
-function ne(t) {
-  return t.multiSelect ? new st(t) : new ge(t);
+function se(t) {
+  return t.multiSelect ? new lt(t) : new Ee(t);
 }
-class ot {
+class ct {
   constructor(r) {
     this.source = r;
   }
@@ -884,13 +844,13 @@ class ot {
     return this.source.set(r[0] ?? null, e);
   }
   subscribe(r, e) {
-    return this.source.subscribe((a) => r({
-      ...a,
-      value: a.value == null ? [] : [a.value]
+    return this.source.subscribe((i) => r({
+      ...i,
+      value: i.value == null ? [] : [i.value]
     }), e);
   }
 }
-function we(t, r) {
+function Se(t, r) {
   if (t != null && typeof t == "object") {
     const e = Reflect.get(t, "id");
     if (e != null) return e;
@@ -903,44 +863,44 @@ function we(t, r) {
 function ue(t) {
   return !!(t.ctrlKey || t.metaKey);
 }
-function lt(t, r) {
+function dt(t, r) {
   return r <= 0 ? 0 : Math.min(Math.max(t, 0), r - 1);
 }
-function Re(t, r, e) {
-  const a = [...t], i = new Set(t.map((n, o) => e(n, o)));
+function Ne(t, r, e) {
+  const i = [...t], s = new Set(t.map((n, a) => e(n, a)));
   for (const n of r) {
-    const o = e(n, a.length);
-    i.has(o) || (i.add(o), a.push(n));
+    const a = e(n, i.length);
+    s.has(a) || (s.add(a), i.push(n));
   }
-  return a;
+  return i;
 }
-class G extends g {
+class Q extends y {
   constructor(e = {}) {
     super(e);
-    s(this, "itemsEmitter");
-    s(this, "items$");
-    s(this, "selectedItemsEmitter");
-    s(this, "selectedItems$");
-    s(this, "selectedItemEmitter");
-    s(this, "selectedItem$");
-    s(this, "getItemKey");
-    s(this, "selectionHandler");
-    s(this, "ownedItemsEmitter");
-    ct(e.items) ? (this.itemsEmitter = e.items, this.ownedItemsEmitter = null) : (this.ownedItemsEmitter = new I(e.items ?? [], {
+    o(this, "itemsEmitter");
+    o(this, "items$");
+    o(this, "selectedItemsEmitter");
+    o(this, "selectedItems$");
+    o(this, "selectedItemEmitter");
+    o(this, "selectedItem$");
+    o(this, "getItemKey");
+    o(this, "selectionHandler");
+    o(this, "ownedItemsEmitter");
+    ht(e.items) ? (this.itemsEmitter = e.items, this.ownedItemsEmitter = null) : (this.ownedItemsEmitter = new x(e.items ?? [], {
       owner: this,
       purpose: "list items"
-    }), this.itemsEmitter = this.ownedItemsEmitter), this.items$ = this.itemsEmitter, this.getItemKey = dt(e.itemKey), this.selectionHandler = e.multiSelect === !0 ? ne({
+    }), this.itemsEmitter = this.ownedItemsEmitter), this.items$ = this.itemsEmitter, this.getItemKey = ut(e.itemKey), this.selectionHandler = e.multiSelect === !0 ? se({
       owner: this,
       multiSelect: !0,
       ...e.selectedItemsEmitter == null ? {} : { selectedItemsEmitter: e.selectedItemsEmitter },
       getItems: () => this.itemsEmitter.get(),
       getKey: this.getItemKey
-    }) : ne({
+    }) : se({
       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 Ee ? this.selectionHandler.selectedItemEmitter : null, this.selectedItem$ = this.selectedItemEmitter;
   }
   initialize() {
     this.watch(this.itemsEmitter, this.selectedItemsEmitter);
@@ -948,40 +908,38 @@ class G extends g {
   render() {
     const e = this.itemsEmitter.get();
     if (!Array.isArray(e)) throw new TypeError("ListView items must be an array");
-    const a = this.itemsEmitter.getFetchState(), i = this.itemsEmitter.getError(), n = a === k.Initial || a === k.Loading, o = new Set(this.selectedItemsEmitter.get().map((d, h) => this.getItemKey(d, h))), l = this.Host;
+    const i = this.itemsEmitter.getFetchState(), s = this.itemsEmitter.getError(), n = i === k.Initial || i === k.Loading, a = new Set(this.selectedItemsEmitter.get().map((c, h) => this.getItemKey(c, h))), l = this.Host;
     return /* @__PURE__ */ w(
       l,
       {
-        className: E(this.props) || null,
+        className: R("datacomponentlike", E(this.props)),
         children: [
-          a === k.Error ? /* @__PURE__ */ u("p", { role: "alert", "data-part": "error", children: ft(i, "Unable to load items") }) : null,
+          i === k.Error ? /* @__PURE__ */ u("p", { role: "alert", children: ft(s, "Unable to load items") }) : null,
           n && e.length === 0 ? /* @__PURE__ */ w("div", { role: "status", "data-part": "loading", children: [
             /* @__PURE__ */ u("span", { children: "Loading items…" }),
-            Array.from({ length: this.props.placeholderCount ?? 5 }, (d, h) => /* @__PURE__ */ u("div", { "data-part": "placeholder-row", children: /* @__PURE__ */ u(H, { width: 45 + h * 7 }) }, `placeholder-${h}`))
+            Array.from({ length: this.props.placeholderCount ?? 5 }, (c, h) => /* @__PURE__ */ u("div", { "data-part": "placeholder-row", children: /* @__PURE__ */ u(M, { width: 45 + h * 7 }) }, `placeholder-${h}`))
           ] }) : null,
-          a === k.Ready && e.length === 0 ? /* @__PURE__ */ u("p", { role: "status", "data-part": "empty", children: "No items" }) : null,
+          i === k.Ready && e.length === 0 ? /* @__PURE__ */ u("p", { role: "status", children: "No items" }) : null,
           e.length > 0 ? /* @__PURE__ */ u(
             "div",
             {
               role: "listbox",
-              "data-part": "list",
               "aria-label": this.props.label ?? "Items",
               "aria-busy": n ? "true" : null,
               "aria-multiselectable": this.props.multiSelect ? "true" : null,
-              children: e.map((d, h) => {
-                const f = this.getItemKey(d, h), m = o.has(f), y = this.props.renderItem ? this.props.renderItem(d, h) : ut(d);
+              children: e.map((c, h) => {
+                const p = this.getItemKey(c, h), f = a.has(p), g = this.props.renderItem ? this.props.renderItem(c, h) : pt(c);
                 return /* @__PURE__ */ u(
                   "div",
                   {
                     role: "option",
-                    "data-part": "row",
                     "data-fray-selectable-row": "",
                     "data-index": h,
-                    "aria-selected": String(m),
+                    "aria-selected": String(f),
                     tabIndex: h === 0 ? 0 : -1,
-                    children: y
+                    children: g
                   },
-                  String(f)
+                  String(p)
                 );
               })
             }
@@ -991,8 +949,8 @@ class G extends g {
     );
   }
   afterUpdate(e) {
-    const a = e instanceof Element ? e.querySelectorAll("[data-fray-selectable-row]") : [];
-    this.selectionHandler.rowsUpdated(a);
+    const i = e instanceof Element ? e.querySelectorAll("[data-fray-selectable-row]") : [];
+    this.selectionHandler.rowsUpdated(i);
   }
   getSelectedItems() {
     return this.selectionHandler.getSelectedItems();
@@ -1012,10 +970,10 @@ class G extends g {
     this.selectionHandler.destroy(), (e = this.ownedItemsEmitter) == null || e.dispose();
   }
 }
-s(G, "dependencies", [H]), s(G, "hostName", "list-view"), s(G, "standaloneHostName", "list-view"), s(G, "baseStyles", [
+o(Q, "dependencies", [M]), o(Q, "hostName", "list-view"), o(Q, "standaloneHostName", "list-view"), o(Q, "baseStyles", [
   ["&", "inputlike"],
-  ['& > [data-part="list"] > [data-part="row"]', "inputline"]
-]), s(G, "css", v`
+  ['& > [role="listbox"] > [role="option"]', "inputline"]
+]), o(Q, "css", S`
         & {
             display: flex;
             flex-direction: column;
@@ -1023,127 +981,110 @@ s(G, "dependencies", [H]), s(G, "hostName", "list-view"), s(G, "standaloneHostNa
             min-height: 0;
         }
 
-        & > [data-part="list"],
+        & > [role="listbox"],
         & > [data-part="loading"] {
             display: flex;
             flex-direction: column;
         }
 
-        & > [data-part="list"] > [data-part="row"] {
+        & > [role="listbox"] > [role="option"] {
             cursor: default;
             user-select: none;
         }
 
-        & > [data-part="list"] > [data-part="row"]:hover,
-        & > [data-part="list"] > [data-part="row"]:focus-visible {
-            background: var(--button-background-hover);
-            outline: 2px solid var(--ui-accent-color);
-            outline-offset: -2px;
-        }
-
-        & > [data-part="list"] > [data-part="row"][aria-selected="true"] {
-            color: var(--toggle-selected-text);
-            background: var(--toggle-selected-bg);
-        }
-
-        & > [data-part="empty"],
-        & > [data-part="error"] {
+        & > [role="status"],
+        & > [role="alert"] {
             margin: 0;
             padding: var(--ui-padding);
         }
-
-        & > [data-part="error"] {
-            color: var(--error-color);
-        }
     `);
-function dt(t) {
-  if (t == null) return we;
+function ut(t) {
+  if (t == null) return Se;
   if (typeof t == "function") return t;
   if (typeof t == "string" && t.length > 0)
     return (r, e) => {
       if (r == null || typeof r != "object" && typeof r != "function")
         throw new TypeError(`ListView item at index ${e} lacks ${t}`);
-      const a = Reflect.get(r, t);
-      if (a == null)
+      const i = Reflect.get(r, t);
+      if (i == null)
         throw new TypeError(`ListView item at index ${e} lacks ${t}`);
-      return a;
+      return i;
     };
   throw new TypeError("ListView itemKey must be a function or property name");
 }
-function ct(t) {
+function ht(t) {
   return t != null && (typeof t == "object" || typeof t == "function") && typeof Reflect.get(t, "get") == "function" && typeof Reflect.get(t, "subscribe") == "function";
 }
-function ut(t) {
+function pt(t) {
   if (t != null && (typeof t == "object" || typeof t == "function")) {
     const r = Reflect.get(t, "label");
-    if (ht(r)) return r;
+    if (mt(r)) return r;
   }
   return String(t);
 }
-function ht(t) {
+function mt(t) {
   return t == null || typeof t == "string" || typeof t == "number";
 }
 function ft(t, r) {
   return t instanceof Error ? t.message : t == null ? r : String(t);
 }
-class D extends g {
+class D extends y {
   constructor(e = {}) {
     super(e);
-    s(this, "symbols");
-    s(this, "valueEmitter");
-    s(this, "semanticStateEmitter");
-    const a = this.constructor;
-    this.symbols = e.symbols ?? a.symbols, pt(this.symbols);
-    const i = e.initialSemanticState ?? a.defaultSemanticState ?? this.symbols[0][1], n = { ...e };
-    n.defaultValue == null && e.initialSemanticState != null && (n.defaultValue = e.initialSemanticState), this.valueEmitter = M(
+    o(this, "symbols");
+    o(this, "valueEmitter");
+    o(this, "semanticStateEmitter");
+    const i = this.constructor;
+    this.symbols = e.symbols ?? i.symbols, bt(this.symbols);
+    const s = e.initialSemanticState ?? i.defaultSemanticState ?? this.symbols[0][1], n = { ...e };
+    n.defaultValue == null && e.initialSemanticState != null && (n.defaultValue = e.initialSemanticState), this.valueEmitter = z(
       this,
       n,
-      i,
+      s,
       "checkbox semantic state"
     ), this.semanticStateEmitter = this.valueEmitter;
   }
   initialize() {
     this.watch(this.valueEmitter);
   }
-  cycleState(e = 1, a = null) {
+  cycleState(e = 1, i = null) {
     if (this.props.disabled) return;
-    const i = this.symbols.findIndex(([, d]) => Object.is(d, this.valueEmitter.get())), o = ((i < 0 ? 0 : i) + e + this.symbols.length) % this.symbols.length, l = this.symbols[o][1];
-    this.valueEmitter.set(l, "checkbox state changed"), C(this.props.onChange, l, a);
+    const s = this.symbols.findIndex(([, c]) => Object.is(c, this.valueEmitter.get())), a = ((s < 0 ? 0 : s) + e + this.symbols.length) % this.symbols.length, l = this.symbols[a][1];
+    this.valueEmitter.set(l, "checkbox state changed"), K(this.props.onChange, l, i);
   }
   render() {
     const {
       label: e = this.props.value ?? "Option",
-      disabled: a = !1,
-      required: i = !1,
+      disabled: i = !1,
+      required: s = !1,
       name: n,
-      value: o
-    } = this.props, l = this.valueEmitter.get(), d = this.symbols.findIndex(([, p]) => Object.is(p, l)), [h] = this.symbols[d] ?? ["?", l], f = rt(l), m = l === b.Prefer || l === b.Require || this.symbols.length === 2 && d === 1, y = this.Host;
+      value: a
+    } = this.props, l = this.valueEmitter.get(), c = this.symbols.findIndex(([, m]) => Object.is(m, l)), [h] = this.symbols[c] ?? ["?", l], p = it(l), f = l === b.Prefer || l === b.Require || this.symbols.length === 2 && c === 1, g = this.Host;
     return /* @__PURE__ */ u(
-      y,
+      g,
       {
         className: E(this.props) || null,
-        "data-disabled": a ? "" : null,
-        "data-required": i ? "" : null,
-        "data-state": f,
+        "data-disabled": i ? "" : null,
+        "data-required": s ? "" : null,
+        "data-state": p,
         children: /* @__PURE__ */ w(
           "button",
           {
             type: "button",
             role: "checkbox",
-            disabled: a,
+            disabled: i,
             name: n,
-            value: o == null ? void 0 : String(o),
-            "data-part": "control",
-            "aria-checked": m ? "true" : "false",
-            "aria-required": i ? "true" : null,
-            "aria-label": `${e}: ${f}`,
-            onClick: (p) => this.cycleState(1, p),
-            onKeyDown: (p) => {
-              p.key === "ArrowRight" || p.key === "ArrowDown" ? (p.preventDefault(), this.cycleState(1, p)) : (p.key === "ArrowLeft" || p.key === "ArrowUp") && (p.preventDefault(), this.cycleState(-1, p));
+            value: a == null ? void 0 : String(a),
+            "aria-checked": f ? "true" : "false",
+            "aria-required": s ? "true" : null,
+            "aria-label": `${e}: ${p}`,
+            onClick: (m) => this.cycleState(1, m),
+            onKeyDown: (m) => {
+              m.key === "ArrowRight" || m.key === "ArrowDown" ? (m.preventDefault(), this.cycleState(1, m)) : (m.key === "ArrowLeft" || m.key === "ArrowUp") && (m.preventDefault(), this.cycleState(-1, m));
             },
             children: [
-              /* @__PURE__ */ u("span", { "data-part": "symbol", "aria-hidden": "true", children: h }),
-              /* @__PURE__ */ u("span", { "data-part": "label", children: e })
+              /* @__PURE__ */ u("span", { className: "inputshell", "aria-hidden": "true", children: h }),
+              /* @__PURE__ */ u("span", { children: e })
             ]
           }
         )
@@ -1151,15 +1092,14 @@ class D extends g {
     );
   }
 }
-s(D, "symbols", [
+o(D, "symbols", [
   ["☐", b.Neutral],
   ["✓", b.Prefer]
-]), s(D, "defaultSemanticState", b.Neutral), s(D, "hostName", "checkbox"), s(D, "standaloneHostName", "check-box"), s(D, "baseStyles", [
+]), o(D, "defaultSemanticState", b.Neutral), o(D, "hostName", "checkbox"), o(D, "standaloneHostName", "check-box"), o(D, "baseStyles", [
   ["&", ["inputline"]],
-  ['& > [data-part="control"]', ["input", "inputline"]],
-  ["&[data-disabled]", ["disabled"]]
-]), s(D, "css", v`
-        & > [data-part="control"] {
+  ['& > [role="checkbox"]', ["input", "inputline"]]
+]), o(D, "css", S`
+        & > [role="checkbox"] {
             display: inline-flex;
             align-items: center;
             gap: 0.35em;
@@ -1167,66 +1107,55 @@ s(D, "symbols", [
             font-family: inherit;
         }
 
-        & [data-part="symbol"] {
+        & .inputshell {
             display: inline-grid;
             width: 1em;
             height: 1em;
             line-height: 1;
             place-items: center;
-            color: var(--fray-checkbox-symbol-color, currentColor);
-            background: var(--fray-checkbox-box-background, transparent);
-            border: var(--fray-checkbox-box-border, var(--cbx-o-border));
-            border-radius: var(--cbx-border-radius, var(--fray-radius-sm));
-        }
-
-        & [data-part="control"][aria-checked="true"] [data-part="symbol"] {
-            background: var(
-                --fray-checkbox-box-background-checked,
-                var(--fray-selection-background)
-            );
         }
     `);
-function pt(t) {
+function bt(t) {
   if (!Array.isArray(t) || t.length === 0)
     throw new TypeError("Checkbox symbols must be a non-empty tuple array");
   for (const r of t)
     if (!Array.isArray(r) || r.length < 2)
       throw new TypeError("Checkbox symbols must be [symbol, state] tuples");
 }
-class V extends g {
+class U extends y {
   constructor(e = {}) {
     super(e);
-    s(this, "optionsEmitter");
-    s(this, "optionStateEmitters", /* @__PURE__ */ new Map());
-    s(this, "staleOptionValues", /* @__PURE__ */ new Set());
-    s(this, "placementTimer", null);
-    this.optionsEmitter = wt(e.options) ? e.options : null;
+    o(this, "optionsEmitter");
+    o(this, "optionStateEmitters", /* @__PURE__ */ new Map());
+    o(this, "staleOptionValues", /* @__PURE__ */ new Set());
+    o(this, "placementTimer", null);
+    this.optionsEmitter = St(e.options) ? e.options : null;
   }
   initialize() {
     this.optionsEmitter && this.watch(this.optionsEmitter);
   }
   render() {
-    var f, m, y;
-    const e = ((f = this.optionsEmitter) == null ? void 0 : f.get()) ?? (Array.isArray(this.props.options) ? this.props.options : []);
+    var p, f, g;
+    const e = ((p = this.optionsEmitter) == null ? void 0 : p.get()) ?? (Array.isArray(this.props.options) ? this.props.options : []);
     if (!Array.isArray(e))
       throw new TypeError("FilterPanel options must be an array or emitter of arrays");
-    const a = ((m = this.optionsEmitter) == null ? void 0 : m.getFetchState()) ?? k.Ready, i = (y = this.optionsEmitter) == null ? void 0 : y.getError(), n = Ne(this.props.filters), o = this.props.filterModes ?? D.symbols, l = this.props.defaultSemanticState ?? b.Neutral, d = new Set(e.map(pe));
+    const i = ((f = this.optionsEmitter) == null ? void 0 : f.getFetchState()) ?? k.Ready, s = (g = this.optionsEmitter) == null ? void 0 : g.getError(), n = $e(this.props.filters), a = this.props.filterModes ?? D.symbols, l = this.props.defaultSemanticState ?? b.Neutral, c = new Set(e.map(be));
     this.staleOptionValues = new Set(
-      [...this.optionStateEmitters.keys()].filter((p) => !d.has(p))
+      [...this.optionStateEmitters.keys()].filter((m) => !c.has(m))
     );
     const h = this.Host;
-    return a === k.Error ? /* @__PURE__ */ u(
+    return i === k.Error ? /* @__PURE__ */ u(
       h,
       {
-        className: E(this.props) || null,
+        className: R("panellike", E(this.props)),
         role: "alert",
         "data-state": "error",
-        children: Et(i, "Unable to load filter options")
+        children: It(s, "Unable to load filter options")
       }
-    ) : (a === k.Initial || a === k.Loading) && e.length === 0 ? /* @__PURE__ */ u(
+    ) : (i === k.Initial || i === k.Loading) && e.length === 0 ? /* @__PURE__ */ u(
       h,
       {
-        className: E(this.props) || null,
+        className: R("panellike", E(this.props)),
         role: "status",
         "data-state": "loading",
         children: "Loading filter options…"
@@ -1234,34 +1163,34 @@ class V extends g {
     ) : /* @__PURE__ */ u(
       h,
       {
-        className: E(this.props) || null,
+        className: R("panellike", E(this.props)),
         role: "group",
         "aria-label": this.props.label ?? "Filter options",
-        children: e.length === 0 ? /* @__PURE__ */ u("span", { children: "No filter options" }) : e.map((p) => {
-          const S = pe(p), x = bt(p), O = n.get(S) ?? l, $ = this.optionEmitter(S, O);
+        children: e.length === 0 ? /* @__PURE__ */ u("span", { children: "No filter options" }) : e.map((m) => {
+          const I = be(m), v = yt(m), O = n.get(I) ?? l, C = this.optionEmitter(I, O);
           return /* @__PURE__ */ u(
-            mt,
+            gt,
             {
-              label: x,
-              valueEmitter: $,
-              symbols: o,
-              onChange: (K, A) => {
-                var T, B;
+              label: v,
+              valueEmitter: C,
+              symbols: a,
+              onChange: (j, A) => {
+                var T, G;
                 A == null || A.stopPropagation();
-                const F = Ne(this.props.filters);
-                K === b.Neutral ? F.delete(S) : F.set(S, K), (B = (T = this.props).onChange) == null || B.call(T, F, A);
+                const H = $e(this.props.filters);
+                j === b.Neutral ? H.delete(I) : H.set(I, j), (G = (T = this.props).onChange) == null || G.call(T, H, A);
               }
             },
-            yt(S)
+            wt(I)
           );
         })
       }
     );
   }
   afterUpdate(e) {
-    var a;
-    for (const i of this.staleOptionValues)
-      (a = this.optionStateEmitters.get(i)) == null || a.dispose(), this.optionStateEmitters.delete(i);
+    var i;
+    for (const s of this.staleOptionValues)
+      (i = this.optionStateEmitters.get(s)) == null || i.dispose(), this.optionStateEmitters.delete(s);
     this.staleOptionValues.clear(), this.placementTimer != null && clearTimeout(this.placementTimer), this.placementTimer = setTimeout(() => {
       this.placementTimer = null, this.placeInsideViewport(e);
     }, 0);
@@ -1271,26 +1200,26 @@ class V extends g {
     for (const e of this.optionStateEmitters.values()) e.dispose();
     this.optionStateEmitters.clear();
   }
-  optionEmitter(e, a) {
-    const i = this.optionStateEmitters.get(e);
-    if (i != null)
-      return i.get() !== a && i.set(a, "filter option synchronized"), i;
-    const n = new I(a, { owner: this, purpose: `filter option ${String(e)}` });
+  optionEmitter(e, i) {
+    const s = this.optionStateEmitters.get(e);
+    if (s != null)
+      return s.get() !== i && s.set(i, "filter option synchronized"), s;
+    const n = new x(i, { owner: this, purpose: `filter option ${String(e)}` });
     return this.optionStateEmitters.set(e, n), n;
   }
   placeInsideViewport(e) {
     if (!(e instanceof HTMLElement) || e.parentElement == null) return;
-    const a = e.ownerDocument.defaultView;
-    if (a == null || a.innerHeight <= 0) return;
-    const i = e.parentElement.getBoundingClientRect();
+    const i = e.ownerDocument.defaultView;
+    if (i == null || i.innerHeight <= 0) return;
+    const s = e.parentElement.getBoundingClientRect();
     e.style.removeProperty("max-height");
-    const n = e.getBoundingClientRect(), o = i.top, l = Math.max(0, a.innerHeight - i.bottom), d = n.height > l && o > l;
-    d ? (e.dataset.placement = "above", e.style.insetBlockStart = `${Math.max(8, i.top - n.height)}px`) : (delete e.dataset.placement, e.style.insetBlockStart = `${i.bottom}px`), e.style.insetInlineEnd = `${Math.max(8, a.innerWidth - i.right)}px`;
-    const h = d ? o : l;
+    const n = e.getBoundingClientRect(), a = s.top, l = Math.max(0, i.innerHeight - s.bottom), c = n.height > l && a > l;
+    c ? (e.dataset.placement = "above", e.style.insetBlockStart = `${Math.max(8, s.top - n.height)}px`) : (delete e.dataset.placement, e.style.insetBlockStart = `${s.bottom}px`), e.style.insetInlineEnd = `${Math.max(8, i.innerWidth - s.right)}px`;
+    const h = c ? a : l;
     e.style.maxHeight = `${Math.max(48, h - 8)}px`;
   }
 }
-s(V, "dependencies", [D]), s(V, "hostName", "filter-panel"), s(V, "standaloneHostName", "filter-panel"), s(V, "css", v`
+o(U, "dependencies", [D]), o(U, "hostName", "filter-panel"), o(U, "standaloneHostName", "filter-panel"), o(U, "css", S`
         & {
             position: fixed;
             z-index: 1100;
@@ -1301,23 +1230,18 @@ s(V, "dependencies", [D]), s(V, "hostName", "filter-panel"), s(V, "standaloneHos
             padding: var(--ui-padding);
             flex-flow: column nowrap;
             align-items: stretch;
-            color: var(--panel-color);
-            background: var(--panel-bg);
-            border: var(--panel-border);
-            border-radius: var(--panel-radius);
-            box-shadow: var(--panel-shadow);
             overflow-y: auto;
         }
 
     `);
-const mt = D;
-function Ne(t) {
+const gt = D;
+function $e(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 pe(t) {
+function be(t) {
   if (typeof t == "string" || typeof t == "number") return t;
   if (t != null && typeof t == "object") {
     const r = Reflect.get(t, "value");
@@ -1325,30 +1249,30 @@ function pe(t) {
   }
   throw new TypeError("Filter options must be strings, numbers, or value/label objects");
 }
-function bt(t) {
+function yt(t) {
   if (t != null && typeof t == "object") {
     const r = Reflect.get(t, "label");
-    if (r != null) return gt(r) ? r : String(r);
+    if (r != null) return Et(r) ? r : String(r);
   }
-  return String(pe(t));
+  return String(be(t));
 }
-function yt(t) {
+function wt(t) {
   return `${typeof t}:${String(t)}`;
 }
-function gt(t) {
+function Et(t) {
   return typeof t == "string" || typeof t == "number";
 }
-function wt(t) {
+function St(t) {
   return t != null && (typeof t == "object" || typeof t == "function") && typeof Reflect.get(t, "get") == "function" && typeof Reflect.get(t, "subscribe") == "function";
 }
-function Et(t, r) {
+function It(t, r) {
   return t instanceof Error ? t.message : t == null ? r : String(t);
 }
-class W extends g {
+class J extends y {
   constructor() {
     super(...arguments);
-    s(this, "filterVisible", !1);
-    s(this, "onGlobalClick", (e) => {
+    o(this, "filterVisible", !1);
+    o(this, "onGlobalClick", (e) => {
       this.filterVisible && this.dom instanceof Node && e.target instanceof Node && !this.dom.contains(e.target) && (this.filterVisible = !1, this.update());
     });
   }
@@ -1358,29 +1282,29 @@ class W extends g {
   toggleSort() {
     if (!this.props.sortable) return;
     const e = this.props.sortEmitter.get();
-    let a;
-    (e == null ? void 0 : e.field) !== this.props.field ? a = { field: this.props.field, direction: "asc" } : e.direction === "asc" ? a = { field: this.props.field, direction: "desc" } : a = null, this.props.sortEmitter.set(a, "table sort changed");
+    let i;
+    (e == null ? void 0 : e.field) !== this.props.field ? i = { field: this.props.field, direction: "asc" } : e.direction === "asc" ? i = { field: this.props.field, direction: "desc" } : i = null, this.props.sortEmitter.set(i, "table sort changed");
   }
   toggleFilterPanel(e) {
     e.stopPropagation(), this.filterVisible = !this.filterVisible, this.update();
   }
-  updateFilters(e, a) {
-    var n, o;
-    const i = { ...this.props.filtersEmitter.get() };
-    e.size === 0 ? delete i[this.props.field] : i[this.props.field] = [...e.entries()], this.props.filtersEmitter.set(i, "table filters changed"), (o = (n = this.props).onFilterChange) == null || o.call(n, i, a);
+  updateFilters(e, i) {
+    var n, a;
+    const s = { ...this.props.filtersEmitter.get() };
+    e.size === 0 ? delete s[this.props.field] : s[this.props.field] = [...e.entries()], this.props.filtersEmitter.set(s, "table filters changed"), (a = (n = this.props).onFilterChange) == null || a.call(n, s, i);
   }
   render() {
-    const e = this.props.sortEmitter.get(), a = (e == null ? void 0 : e.field) === this.props.field ? e.direction : null, i = new Map(
-      (this.props.filtersEmitter.get()[this.props.field] ?? []).filter(vt)
-    ), n = this.props.label ?? String(this.props.field), o = `Filter ${String(n)}`;
+    const e = this.props.sortEmitter.get(), i = (e == null ? void 0 : e.field) === this.props.field ? e.direction : null, s = new Map(
+      (this.props.filtersEmitter.get()[this.props.field] ?? []).filter(kt)
+    ), n = this.props.label ?? String(this.props.field), a = `Filter ${String(n)}`;
     let l = null;
     return this.filterVisible && this.props.filterOptions != null && (l = /* @__PURE__ */ u(
-      V,
+      U,
       {
-        label: o,
+        label: a,
         options: this.props.filterOptions,
-        filters: i,
-        onChange: (d, h) => this.updateFilters(d, h),
+        filters: s,
+        onChange: (c, h) => this.updateFilters(c, h),
         ...this.props.filterModes == null ? {} : { filterModes: this.props.filterModes },
         ...this.props.defaultSemanticState == null ? {} : { defaultSemanticState: this.props.defaultSemanticState }
       },
@@ -1390,7 +1314,7 @@ class W extends g {
       {
         scope: "col",
         "data-fray-component": "table-header-cell",
-        "aria-sort": a === "asc" ? "ascending" : a === "desc" ? "descending" : "none",
+        "aria-sort": i === "asc" ? "ascending" : i === "desc" ? "descending" : "none",
         style: { zIndex: this.filterVisible ? 1200 : null },
         children: [
           this.props.sortable ? /* @__PURE__ */ w(
@@ -1401,18 +1325,18 @@ class W extends g {
               onClick: () => this.toggleSort(),
               children: [
                 n,
-                a === "asc" ? " ▲" : a === "desc" ? " ▼" : ""
+                i === "asc" ? " ▲" : i === "desc" ? " ▼" : ""
               ]
             }
-          ) : /* @__PURE__ */ u("span", { "data-part": "label", children: n }),
+          ) : /* @__PURE__ */ u("span", { children: n }),
           this.props.filterOptions == null ? null : /* @__PURE__ */ u(
             "button",
             {
               type: "button",
               "data-part": "filter-toggle",
-              "aria-label": o,
+              "aria-label": a,
               "aria-expanded": String(this.filterVisible),
-              onClick: (d) => this.toggleFilterPanel(d),
+              onClick: (c) => this.toggleFilterPanel(c),
               children: "Filter"
             }
           ),
@@ -1422,49 +1346,34 @@ class W extends g {
     );
   }
 }
-s(W, "dependencies", [V]), s(W, "baseStyles", [
-  ['th[data-fray-component="table-header-cell"]', "noselect"],
-  ['th[data-fray-component="table-header-cell"] > [data-part="sort"]', ["uiline", "button"]],
-  ['th[data-fray-component="table-header-cell"] > [data-part="filter-toggle"]', ["uiline", "button"]]
-]), s(W, "css", v`
-        th[data-fray-component="table-header-cell"] {
+o(J, "dependencies", [U]), o(J, "baseStyles", [
+  ["th[aria-sort]", "noselect"],
+  ['th[aria-sort] > [data-part="sort"]', ["uiline", "button"]],
+  ['th[aria-sort] > [data-part="filter-toggle"]', ["uiline", "button"]]
+]), o(J, "css", S`
+        th[aria-sort] {
             position: relative;
             text-align: start;
-            color: var(
-                --fray-table-header-color,
-                var(--fray-section-header-color, var(--fray-header-color))
-            );
-            background: var(
-                --fray-table-header-background,
-                var(--fray-section-header-background, var(--fray-header-background))
-            );
-            border-block-end: var(--fray-section-header-border, var(--fray-header-border));
-            box-shadow: var(--fray-section-header-shadow, var(--fray-header-shadow));
         }
 
-        th[data-fray-component="table-header-cell"] > [data-part="sort"],
-        th[data-fray-component="table-header-cell"] > [data-part="filter-toggle"] {
+        th[aria-sort] > [data-part="sort"],
+        th[aria-sort] > [data-part="filter-toggle"] {
             width: auto;
             font-family: inherit;
-            color: inherit;
-            background: var(
-                --fray-table-header-button-background,
-                var(--fray-button-background)
-            );
         }
 
-        th[data-fray-component="table-header-cell"] > [data-part="filter-toggle"] {
+        th[aria-sort] > [data-part="filter-toggle"] {
             margin-inline-start: var(--ui-padding-h);
             font-size: 0.75em;
         }
     `);
-function vt(t) {
+function kt(t) {
   return typeof t[0] == "string" || typeof t[0] == "number";
 }
-class me extends g {
+class ge extends y {
   render() {
     return /* @__PURE__ */ u("thead", { "data-fray-component": "table-header", children: /* @__PURE__ */ u("tr", { children: this.props.columns.map((r) => /* @__PURE__ */ u(
-      W,
+      J,
       {
         field: r.field,
         sortEmitter: this.props.sortEmitter,
@@ -1480,139 +1389,139 @@ class me extends g {
     )) }) });
   }
 }
-s(me, "dependencies", [W]);
-const St = {
+o(ge, "dependencies", [J]);
+const xt = {
   [b.Neutral]: "☐",
   [b.Prefer]: "",
   [b.Require]: "_",
   [b.Deny]: "!"
 };
-function kt(t, { sort: r = null, filters: e = {} } = {}) {
-  Nt(t), r != null && (Ge(r), t.searchParams.set("sort", `${r.field}:${r.direction}`));
-  for (const [a, i] of Object.entries(e))
-    for (const [n, o] of i) {
-      if (!de(o))
-        throw new TypeError(`Unknown filter mode for ${a}: ${String(o)}`);
+function vt(t, { sort: r = null, filters: e = {} } = {}) {
+  Dt(t), r != null && (Qe(r), t.searchParams.set("sort", `${r.field}:${r.direction}`));
+  for (const [i, s] of Object.entries(e))
+    for (const [n, a] of s) {
+      if (!le(a))
+        throw new TypeError(`Unknown filter mode for ${i}: ${String(a)}`);
       t.searchParams.append(
         "filter",
-        `${a}:${St[o]}:${JSON.stringify(n)}`
+        `${i}:${xt[a]}:${JSON.stringify(n)}`
       );
     }
   return t;
 }
-function It(t, r, e) {
+function Tt(t, r, e) {
   if (!Array.isArray(t)) throw new TypeError("Local table data must be an array");
-  const a = t.filter((n) => xt(n, e));
-  if (r == null) return a;
-  Ge(r);
-  const i = r.direction === "asc" ? 1 : -1;
-  return [...a].sort((n, o) => Rt(be(n, r.field), be(o, r.field)) * i);
-}
-function xt(t, r) {
-  for (const [e, a] of Object.entries(r)) {
-    const i = be(t, e);
-    if (a.filter(([, d]) => d === b.Deny).some(([d]) => Object.is(d, i))) return !1;
-    const o = a.filter(([, d]) => d === b.Require);
-    if (o.length > 0 && !o.some(([d]) => Object.is(d, i))) return !1;
-    const l = a.filter(([, d]) => d === b.Prefer);
-    if (l.length > 0 && !l.some(([d]) => Object.is(d, i))) return !1;
+  const i = t.filter((n) => Rt(n, e));
+  if (r == null) return i;
+  Qe(r);
+  const s = r.direction === "asc" ? 1 : -1;
+  return [...i].sort((n, a) => $t(ye(n, r.field), ye(a, r.field)) * s);
+}
+function Rt(t, r) {
+  for (const [e, i] of Object.entries(r)) {
+    const s = ye(t, e);
+    if (i.filter(([, c]) => c === b.Deny).some(([c]) => Object.is(c, s))) return !1;
+    const a = i.filter(([, c]) => c === b.Require);
+    if (a.length > 0 && !a.some(([c]) => Object.is(c, s))) return !1;
+    const l = i.filter(([, c]) => c === b.Prefer);
+    if (l.length > 0 && !l.some(([c]) => Object.is(c, s))) return !1;
   }
   return !0;
 }
-function Ge(t) {
-  if (t == null || typeof t != "object" || typeof Reflect.get(t, "field") != "string" || !Tt(Reflect.get(t, "direction")))
+function Qe(t) {
+  if (t == null || typeof t != "object" || typeof Reflect.get(t, "field") != "string" || !Nt(Reflect.get(t, "direction")))
     throw new TypeError("Table sort must contain a field and asc/desc direction");
 }
-function Tt(t) {
+function Nt(t) {
   return t === "asc" || t === "desc";
 }
-function Rt(t, r) {
+function $t(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 be(t, r) {
+function ye(t, r) {
   if (!(t == null || typeof t != "object" && typeof t != "function"))
     return Reflect.get(t, r);
 }
-function Nt(t) {
+function Dt(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 Dt(t) {
-  const r = ve(t), e = Qe(t.data) ? null : new I(t.data, {
+function Ot(t) {
+  const r = ke(t), e = We(t.data) ? null : new x(t.data, {
     owner: t.owner,
     purpose: "local table data"
-  }), a = e ?? t.data, i = new le(
-    [a, r.sortEmitter, r.filtersEmitter],
-    ([n, o, l]) => It(n, o, l),
+  }), i = e ?? t.data, s = new ae(
+    [i, r.sortEmitter, r.filtersEmitter],
+    ([n, a, l]) => Tt(n, a, l),
     { owner: t.owner, purpose: "local table view" }
   );
-  return new Ee(i, r, () => {
-    i.dispose(), e == null || e.dispose();
+  return new Ie(s, r, () => {
+    s.dispose(), e == null || e.dispose();
   });
 }
-function or(t) {
-  Ct(t.query);
-  const r = ve(t);
-  return new Ee(t.query, r);
+function cr(t) {
+  jt(t.query);
+  const r = ke(t);
+  return new Ie(t.query, r);
 }
-function Ot(t) {
+function Ct(t) {
   if (t.handler == null || typeof t.handler.fetch != "function")
     throw new TypeError("Table data-source handler must implement fetch");
-  const r = ve(t), e = new ke("sort", r.sortEmitter, {
+  const r = ke(t), e = new ve("sort", r.sortEmitter, {
     owner: t.owner,
     purpose: "table sort argument"
-  }), a = new ke("filters", r.filtersEmitter, {
+  }), i = new ve("filters", r.filtersEmitter, {
     owner: t.owner,
     purpose: "table filters argument"
-  }), i = new Xe({
+  }), s = new Ze({
     handler: t.handler,
-    args: { sort: e, filters: a },
+    args: { sort: e, filters: i },
     owner: t.owner,
     purpose: "table query",
     keepPreviousValue: !0
   });
-  return new Ee(i, r, () => {
-    i.dispose(), e.dispose(), a.dispose();
+  return new Ie(s, r, () => {
+    s.dispose(), e.dispose(), i.dispose();
   });
 }
-function $t(t) {
+function Kt(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 ?? kt
+    serialize: t.serializeQuery ?? vt
   };
-  return t.baseUrl != null && (r.baseUrl = t.baseUrl), t.fetch != null && (r.fetch = t.fetch), Ot({
-    handler: new Ze(r),
+  return t.baseUrl != null && (r.baseUrl = t.baseUrl), t.fetch != null && (r.fetch = t.fetch), Ct({
+    handler: new et(r),
     ...t.sortEmitter == null ? {} : { sortEmitter: t.sortEmitter },
     ...t.filtersEmitter == null ? {} : { filtersEmitter: t.filtersEmitter },
     ...t.owner === void 0 ? {} : { owner: t.owner }
   });
 }
-class Ee {
-  constructor(r, e, a = null) {
-    s(this, "sortEmitter");
-    s(this, "filtersEmitter");
-    s(this, "retry");
-    s(this, "disposed", !1);
-    this.query = r, this.state = e, this.disposeQuery = a, this.sortEmitter = e.sortEmitter, this.filtersEmitter = e.filtersEmitter, r.retry != null && (this.retry = (i) => {
+class Ie {
+  constructor(r, e, i = null) {
+    o(this, "sortEmitter");
+    o(this, "filtersEmitter");
+    o(this, "retry");
+    o(this, "disposed", !1);
+    this.query = r, this.state = e, this.disposeQuery = i, this.sortEmitter = e.sortEmitter, this.filtersEmitter = e.filtersEmitter, r.retry != null && (this.retry = (s) => {
       var n;
-      return (n = r.retry) == null ? void 0 : n.call(r, i);
+      return (n = r.retry) == null ? void 0 : n.call(r, s);
     });
   }
   dispose() {
-    var r, e, a;
-    this.disposed || (this.disposed = !0, (r = this.disposeQuery) == null || r.call(this), (e = this.state.ownedSortEmitter) == null || e.dispose(), (a = this.state.ownedFiltersEmitter) == null || a.dispose());
+    var r, e, i;
+    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 ve(t) {
-  const r = t.sortEmitter == null ? new I(null, {
+function ke(t) {
+  const r = t.sortEmitter == null ? new x(null, {
     owner: t.owner,
     purpose: "table sort"
-  }) : null, e = t.filtersEmitter == null ? new I({}, {
+  }) : null, e = t.filtersEmitter == null ? new x({}, {
     owner: t.owner,
     purpose: "table filters"
   }) : null;
@@ -1623,31 +1532,31 @@ function ve(t) {
     ownedFiltersEmitter: e
   };
 }
-function Qe(t) {
+function We(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 Ct(t) {
-  if (!Qe(t))
+function jt(t) {
+  if (!We(t))
     throw new TypeError("Table query must be an emitter");
 }
-class X extends g {
+class X extends y {
   constructor(e) {
-    var a, i;
+    var i, s;
     super(e);
-    s(this, "columns");
-    s(this, "rowKey");
-    s(this, "sortEmitter");
-    s(this, "filtersEmitter");
-    s(this, "selectedItemsEmitter");
-    s(this, "selectedItemEmitter");
-    s(this, "selectionHandler");
-    s(this, "query", null);
-    s(this, "dataSource", null);
-    s(this, "suppliedDataSource");
-    s(this, "ownedSortEmitter");
-    s(this, "ownedFiltersEmitter");
-    s(this, "ownedDataSource", null);
-    At(e), this.columns = Kt(e.columns), this.rowKey = jt(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 = ((a = this.suppliedDataSource) == null ? void 0 : a.sortEmitter) ?? this.ownedSortEmitter, this.filtersEmitter = ((i = this.suppliedDataSource) == null ? void 0 : i.filtersEmitter) ?? this.ownedFiltersEmitter, this.selectionHandler = e.multiSelect === !0 ? ne({
+    o(this, "columns");
+    o(this, "rowKey");
+    o(this, "sortEmitter");
+    o(this, "filtersEmitter");
+    o(this, "selectedItemsEmitter");
+    o(this, "selectedItemEmitter");
+    o(this, "selectionHandler");
+    o(this, "query", null);
+    o(this, "dataSource", null);
+    o(this, "suppliedDataSource");
+    o(this, "ownedSortEmitter");
+    o(this, "ownedFiltersEmitter");
+    o(this, "ownedDataSource", null);
+    Ft(e), this.columns = At(e.columns), this.rowKey = Ht(e.rowKey), this.suppliedDataSource = e.dataSource ?? null, this.ownedSortEmitter = this.suppliedDataSource == null ? new x(null, { owner: this, purpose: "table sort" }) : null, this.ownedFiltersEmitter = this.suppliedDataSource == null ? new x({}, { owner: this, purpose: "table filters" }) : null, this.sortEmitter = ((i = this.suppliedDataSource) == null ? void 0 : i.sortEmitter) ?? this.ownedSortEmitter, this.filtersEmitter = ((s = this.suppliedDataSource) == null ? void 0 : s.filtersEmitter) ?? this.ownedFiltersEmitter, this.selectionHandler = e.multiSelect === !0 ? se({
       owner: this,
       multiSelect: !0,
       ...e.selectedItemsEmitter == null ? {} : { selectedItemsEmitter: e.selectedItemsEmitter },
@@ -1656,7 +1565,7 @@ class X extends g {
         return ((n = this.query) == null ? void 0 : n.get()) ?? [];
       },
       getKey: this.rowKey
-    }) : ne({
+    }) : se({
       owner: this,
       ...e.selectedItemEmitter == null ? {} : { selectedItemEmitter: e.selectedItemEmitter },
       getItems: () => {
@@ -1664,15 +1573,15 @@ class X extends g {
         return ((n = this.query) == null ? void 0 : n.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 Ee ? this.selectionHandler.selectedItemEmitter : null;
   }
   initialize() {
-    this.suppliedDataSource != null ? this.dataSource = this.suppliedDataSource : this.props.rest != null ? (this.ownedDataSource = $t({
+    this.suppliedDataSource != null ? this.dataSource = this.suppliedDataSource : this.props.rest != null ? (this.ownedDataSource = Kt({
       ...this.props.rest,
       sortEmitter: this.sortEmitter,
       filtersEmitter: this.filtersEmitter,
       owner: this
-    }), this.dataSource = this.ownedDataSource) : (this.ownedDataSource = Dt({
+    }), this.dataSource = this.ownedDataSource) : (this.ownedDataSource = Ot({
       data: this.props.data ?? [],
       sortEmitter: this.sortEmitter,
       filtersEmitter: this.filtersEmitter,
@@ -1680,38 +1589,38 @@ class X extends g {
     }), this.dataSource = this.ownedDataSource), this.query = this.dataSource.query, this.watch(this.query, this.selectedItemsEmitter);
   }
   render() {
-    var d, h, f, m;
-    const e = ((d = this.query) == null ? void 0 : d.get()) ?? [];
+    var c, h, p, f;
+    const e = ((c = this.query) == null ? void 0 : c.get()) ?? [];
     if (!Array.isArray(e)) throw new TypeError("DataTable query value must be an array");
-    const a = ((h = this.query) == null ? void 0 : h.getFetchState()) ?? k.Initial, i = (f = this.query) == null ? void 0 : f.getError(), n = a === k.Initial || a === k.Loading, o = new Set(
-      this.selectedItemsEmitter.get().map((y, p) => this.rowKey(y, p))
+    const i = ((h = this.query) == null ? void 0 : h.getFetchState()) ?? k.Initial, s = (p = this.query) == null ? void 0 : p.getError(), n = i === k.Initial || i === k.Loading, a = new Set(
+      this.selectedItemsEmitter.get().map((g, m) => this.rowKey(g, m))
     ), l = this.Host;
     return /* @__PURE__ */ w(
       l,
       {
-        className: E(this.props) || null,
+        className: R("datacomponentlike", E(this.props)),
         "data-loading": n ? "" : null,
-        "data-error": a === k.Error ? "" : null,
+        "data-error": i === k.Error ? "" : null,
         children: [
-          n ? /* @__PURE__ */ u("p", { role: "status", "data-part": "status", children: "Loading rows…" }) : null,
-          a === k.Error ? /* @__PURE__ */ w("div", { "data-part": "error", role: "alert", children: [
-            /* @__PURE__ */ u("span", { children: Ht(i, "Unable to load rows") }),
-            typeof ((m = this.dataSource) == null ? void 0 : m.retry) == "function" ? /* @__PURE__ */ u(
+          n ? /* @__PURE__ */ u("p", { role: "status", children: "Loading rows…" }) : null,
+          i === k.Error ? /* @__PURE__ */ w("div", { role: "alert", children: [
+            /* @__PURE__ */ u("span", { children: zt(s, "Unable to load rows") }),
+            typeof ((f = this.dataSource) == null ? void 0 : f.retry) == "function" ? /* @__PURE__ */ u(
               "button",
               {
                 type: "button",
                 onClick: () => {
-                  var y, p;
-                  return (p = (y = this.dataSource) == null ? void 0 : y.retry) == null ? void 0 : p.call(y, "table retry");
+                  var g, m;
+                  return (m = (g = this.dataSource) == null ? void 0 : g.retry) == null ? void 0 : m.call(g, "table retry");
                 },
                 children: "Retry"
               }
             ) : null
           ] }) : null,
-          /* @__PURE__ */ w("table", { "data-part": "table", "aria-busy": n ? "true" : null, children: [
+          /* @__PURE__ */ w("table", { "aria-busy": n ? "true" : null, children: [
             this.props.caption == null ? null : /* @__PURE__ */ u("caption", { children: this.props.caption }),
             /* @__PURE__ */ u(
-              me,
+              ge,
               {
                 columns: this.columns,
                 sortEmitter: this.sortEmitter,
@@ -1722,38 +1631,38 @@ class X extends g {
               },
               "header"
             ),
-            /* @__PURE__ */ u("tbody", { children: e.length > 0 ? e.map((y, p) => this.renderRow(y, p, o)) : n ? this.renderPlaceholders() : a === k.Error ? null : /* @__PURE__ */ u("tr", { children: /* @__PURE__ */ u("td", { colSpan: this.columns.length, children: this.props.emptyMessage ?? "No rows" }) }, "empty") })
+            /* @__PURE__ */ u("tbody", { children: e.length > 0 ? e.map((g, m) => this.renderRow(g, m, a)) : n ? this.renderPlaceholders() : i === k.Error ? null : /* @__PURE__ */ u("tr", { children: /* @__PURE__ */ u("td", { colSpan: this.columns.length, children: this.props.emptyMessage ?? "No rows" }) }, "empty") })
           ] })
         ]
       }
     );
   }
-  renderRow(e, a, i) {
-    const n = this.rowKey(e, a), o = i.has(n);
+  renderRow(e, i, s) {
+    const n = this.rowKey(e, i), a = s.has(n);
     return /* @__PURE__ */ u(
       "tr",
       {
         "data-fray-selectable-row": "",
-        "data-index": a,
-        "aria-selected": String(o),
-        tabIndex: a === 0 ? 0 : -1,
-        children: this.columns.map((l) => /* @__PURE__ */ u("td", { children: l.render ? l.render(e, a) : Ft(e[l.field]) }, String(l.field)))
+        "data-index": i,
+        "aria-selected": String(a),
+        tabIndex: i === 0 ? 0 : -1,
+        children: this.columns.map((l) => /* @__PURE__ */ u("td", { children: l.render ? l.render(e, i) : Mt(e[l.field]) }, String(l.field)))
       },
       String(n)
     );
   }
   renderPlaceholders() {
     const e = this.props.placeholderCount ?? 5;
-    return Array.from({ length: e }, (a, i) => /* @__PURE__ */ u("tr", { children: this.columns.map((n, o) => /* @__PURE__ */ u("td", { children: /* @__PURE__ */ u(
-      H,
+    return Array.from({ length: e }, (i, s) => /* @__PURE__ */ u("tr", { children: this.columns.map((n, a) => /* @__PURE__ */ u("td", { children: /* @__PURE__ */ u(
+      M,
       {
-        width: 45 + (i + o) % 6 * 8
+        width: 45 + (s + a) % 6 * 8
       }
-    ) }, String(n.field))) }, `placeholder-${i}`));
+    ) }, String(n.field))) }, `placeholder-${s}`));
   }
   afterUpdate(e) {
-    const a = e instanceof Element ? e.querySelectorAll("tbody [data-fray-selectable-row]") : [];
-    this.selectionHandler.rowsUpdated(a);
+    const i = e instanceof Element ? e.querySelectorAll("tbody [data-fray-selectable-row]") : [];
+    this.selectionHandler.rowsUpdated(i);
   }
   getSelectedRows() {
     return this.selectionHandler.getSelectedItems();
@@ -1769,14 +1678,13 @@ class X extends g {
     return this.selectedItemEmitter;
   }
   onDestroy() {
-    var e, a, i;
-    this.selectionHandler.destroy(), (e = this.ownedDataSource) == null || e.dispose(), (a = this.ownedSortEmitter) == null || a.dispose(), (i = this.ownedFiltersEmitter) == null || i.dispose();
+    var e, i, s;
+    this.selectionHandler.destroy(), (e = this.ownedDataSource) == null || e.dispose(), (i = this.ownedSortEmitter) == null || i.dispose(), (s = this.ownedFiltersEmitter) == null || s.dispose();
   }
 }
-s(X, "dependencies", [H, me]), s(X, "hostName", "data-table"), s(X, "standaloneHostName", "data-table"), s(X, "css", v`
+o(X, "dependencies", [M, ge]), o(X, "hostName", "data-table"), o(X, "standaloneHostName", "data-table"), o(X, "css", S`
         & {
             overflow: auto;
-            color: var(--ui-text-color);
         }
 
         & > table {
@@ -1784,7 +1692,7 @@ s(X, "dependencies", [H, me]), s(X, "hostName", "data-table"), s(X, "standaloneH
             border-collapse: collapse;
         }
 
-        & thead:has([data-fray-component="filter-panel"]) {
+        & thead:has([aria-expanded="true"]) {
             position: relative;
             z-index: 1100;
         }
@@ -1800,52 +1708,27 @@ s(X, "dependencies", [H, me]), s(X, "hostName", "data-table"), s(X, "standaloneH
             user-select: none;
         }
 
-        & tbody tr:nth-child(odd) {
-            background: var(--fray-table-row-background, transparent);
-        }
-
-        & tbody tr:nth-child(even) {
-            background: var(--fray-table-row-alt-background, transparent);
-        }
-
-        & tbody tr[data-fray-selectable-row]:hover {
-            background: var(--fray-row-hover-background, var(--button-background-hover));
-        }
-
-        & tbody tr[data-fray-selectable-row]:focus-visible {
-            outline: 2px solid var(--fray-color-focus, var(--ui-accent-color));
-            outline-offset: -2px;
-        }
-
-        & tbody tr[data-fray-selectable-row][aria-selected="true"] {
-            color: var(--fray-selection-color, var(--toggle-selected-text));
-            background: var(--fray-selection-background, var(--toggle-selected-bg));
-        }
-
-        & > [data-part="error"] {
-            color: var(--error-color);
-        }
     `);
-function Kt(t) {
+function At(t) {
   if (!Array.isArray(t) || t.length === 0)
     throw new TypeError("DataTable columns must be a non-empty array");
   const r = /* @__PURE__ */ new Set();
   return t.map((e) => {
     if (e == null || typeof e != "object")
       throw new TypeError("Every DataTable column requires a field");
-    const a = Reflect.get(e, "field");
-    if (typeof a != "string" || a.length === 0)
+    const i = Reflect.get(e, "field");
+    if (typeof i != "string" || i.length === 0)
       throw new TypeError("Every DataTable column requires a field");
-    if (r.has(a)) throw new Error(`Duplicate DataTable column: ${a}`);
-    r.add(a);
-    const i = Reflect.get(e, "render");
-    if (i != null && typeof i != "function")
-      throw new TypeError(`DataTable column ${a} render must be a function`);
+    if (r.has(i)) throw new Error(`Duplicate DataTable column: ${i}`);
+    r.add(i);
+    const s = Reflect.get(e, "render");
+    if (s != null && typeof s != "function")
+      throw new TypeError(`DataTable column ${i} render must be a function`);
     return e;
   });
 }
-function At(t) {
-  var o, l;
+function Ft(t) {
+  var a, l;
   const e = [
     "mode",
     "query",
@@ -1854,126 +1737,126 @@ function At(t) {
     "baseUrl",
     "fetch",
     "serializeQuery"
-  ].find((d) => Object.hasOwn(t, d));
+  ].find((c) => Object.hasOwn(t, c));
   if (e != null)
     throw new TypeError(
       `DataTable ${e} moved to dataSource/rest; see the 0.3 migration guide`
     );
-  const a = t.data !== void 0, i = t.dataSource !== void 0, n = t.rest !== void 0;
-  if (Number(a) + Number(i) + Number(n) > 1)
+  const i = t.data !== void 0, s = t.dataSource !== void 0, n = t.rest !== void 0;
+  if (Number(i) + Number(s) + Number(n) > 1)
     throw new TypeError("DataTable accepts exactly one of data, dataSource, or rest");
-  if (i) {
-    const d = t.dataSource;
-    if (d == null || typeof d != "object" || d.query == null || typeof ((o = d.sortEmitter) == null ? void 0 : o.set) != "function" || typeof ((l = d.filtersEmitter) == null ? void 0 : l.set) != "function" || typeof d.dispose != "function")
+  if (s) {
+    const c = t.dataSource;
+    if (c == null || typeof c != "object" || c.query == null || typeof ((a = c.sortEmitter) == null ? void 0 : a.set) != "function" || typeof ((l = c.filtersEmitter) == null ? void 0 : l.set) != "function" || typeof c.dispose != "function")
       throw new TypeError("DataTable dataSource must implement the table data-source contract");
   }
 }
-function jt(t) {
-  if (t == null) return we;
+function Ht(t) {
+  if (t == null) return Se;
   if (typeof t == "function") return t;
   if (typeof t == "string" && t.length > 0)
     return (r, e) => {
-      const a = r[t];
-      if (a == null)
+      const i = r[t];
+      if (i == null)
         throw new TypeError(`DataTable row at index ${e} lacks ${t}`);
-      return a;
+      return i;
     };
   throw new TypeError("DataTable rowKey must be a function or property name");
 }
-function Ft(t) {
+function Mt(t) {
   return t == null || typeof t == "string" || typeof t == "number" ? t : String(t);
 }
-function Ht(t, r) {
+function zt(t, r) {
   return t instanceof Error ? t.message : t == null ? r : String(t);
 }
-class We extends g {
+class Je extends y {
   render() {
     return this.props.children ?? [];
   }
 }
-function P(t) {
+function B(t) {
   if (!Array.isArray(t)) throw new TypeError("Tree nodes must be an array");
-  const r = /* @__PURE__ */ new Set(), e = (a) => {
-    for (const i of a) {
-      if (i == null || typeof i != "object" || i.id == null)
+  const r = /* @__PURE__ */ new Set(), e = (i) => {
+    for (const s of i) {
+      if (s == null || typeof s != "object" || s.id == null)
         throw new TypeError("Each tree node requires an id");
-      if (r.has(i.id)) throw new Error(`Duplicate tree item id: ${String(i.id)}`);
-      if (r.add(i.id), !Array.isArray(i.children ?? []))
-        throw new TypeError(`Tree node ${String(i.id)} children must be an array`);
-      e(i.children ?? []);
+      if (r.has(s.id)) throw new Error(`Duplicate tree item id: ${String(s.id)}`);
+      if (r.add(s.id), !Array.isArray(s.children ?? []))
+        throw new TypeError(`Tree node ${String(s.id)} children must be an array`);
+      e(s.children ?? []);
     }
   };
   e(t);
 }
-function lr(t, r) {
-  return P(t), Se(t, r);
+function dr(t, r) {
+  return B(t), xe(t, r);
 }
-function dr(t, r, e = null) {
-  return new le(
+function ur(t, r, e = null) {
+  return new ae(
     [t, r],
-    ([a, i]) => (P(a), i == null ? null : Se(a, i)),
+    ([i, s]) => (B(i), s == null ? null : xe(i, s)),
     { owner: e, purpose: "tree node projection" }
   );
 }
-function Mt(t, r, e) {
-  if (P(t), typeof e != "function") throw new TypeError("Tree node update must be a function");
-  const a = (n) => {
-    for (let o = 0; o < n.length; o += 1) {
-      const l = n[o];
+function qt(t, r, e) {
+  if (B(t), typeof e != "function") throw new TypeError("Tree node update must be a function");
+  const i = (n) => {
+    for (let a = 0; a < n.length; a += 1) {
+      const l = n[a];
       if (Object.is(l.id, r)) {
-        const f = e(l);
-        if (f == null || typeof f != "object")
+        const p = e(l);
+        if (p == null || typeof p != "object")
           throw new TypeError("Tree node update must return a tree node");
-        if (!Object.is(f.id, l.id))
+        if (!Object.is(p.id, l.id))
           throw new Error("Tree node update cannot change the stable id");
-        if (Object.is(f, l)) return n;
-        const m = [...n];
-        return m[o] = f, m;
-      }
-      const d = l.children ?? [], h = a(d);
-      if (!Object.is(h, d)) {
+        if (Object.is(p, l)) return n;
         const f = [...n];
-        return f[o] = { ...l, children: h }, f;
+        return f[a] = p, f;
+      }
+      const c = l.children ?? [], h = i(c);
+      if (!Object.is(h, c)) {
+        const p = [...n];
+        return p[a] = { ...l, children: h }, p;
       }
     }
     return n;
-  }, i = a(t);
-  return Object.is(i, t) || P(i), i;
+  }, s = i(t);
+  return Object.is(s, t) || B(s), s;
 }
-function cr(t, r, e, a = "tree node updated") {
-  const i = t.get(), n = Mt(i, r, e);
-  return Object.is(n, i) ? !1 : t.set(n, a);
+function hr(t, r, e, i = "tree node updated") {
+  const s = t.get(), n = qt(s, r, e);
+  return Object.is(n, s) ? !1 : t.set(n, i);
 }
-function Se(t, r) {
+function xe(t, r) {
   for (const e of t) {
     if (Object.is(e.id, r)) return e;
-    const a = Se(e.children ?? [], r);
-    if (a != null) return a;
+    const i = xe(e.children ?? [], r);
+    if (i != null) return i;
   }
   return null;
 }
-class Z extends g {
+class Z extends y {
   constructor(e) {
     super(e);
-    s(this, "nodesEmitter");
-    s(this, "selectedKeyEmitter");
-    s(this, "expandedKeysEmitter");
-    s(this, "ownedNodesEmitter");
-    s(this, "ownedSelectedEmitter");
-    s(this, "ownedExpandedEmitter");
-    s(this, "focusedKey", null);
-    s(this, "typeahead", "");
-    s(this, "typeaheadTimer", null);
-    if (Vt(e.nodes))
+    o(this, "nodesEmitter");
+    o(this, "selectedKeyEmitter");
+    o(this, "expandedKeysEmitter");
+    o(this, "ownedNodesEmitter");
+    o(this, "ownedSelectedEmitter");
+    o(this, "ownedExpandedEmitter");
+    o(this, "focusedKey", null);
+    o(this, "typeahead", "");
+    o(this, "typeaheadTimer", null);
+    if (Pt(e.nodes))
       this.nodesEmitter = e.nodes, this.ownedNodesEmitter = null;
     else {
-      const a = e.nodes ?? Je(e.children);
-      this.ownedNodesEmitter = new I(a, {
+      const i = e.nodes ?? _e(e.children);
+      this.ownedNodesEmitter = new x(i, {
         owner: this,
         purpose: "tree nodes"
       }), this.nodesEmitter = this.ownedNodesEmitter;
     }
-    this.ownedSelectedEmitter = e.selectedKeyEmitter == null ? new I(null, { owner: this, purpose: "selected tree key" }) : null, this.selectedKeyEmitter = e.selectedKeyEmitter ?? this.ownedSelectedEmitter, this.ownedExpandedEmitter = e.expandedKeysEmitter == null ? new I([], { owner: this, purpose: "expanded tree keys" }) : null, this.expandedKeysEmitter = e.expandedKeysEmitter ?? this.ownedExpandedEmitter;
+    this.ownedSelectedEmitter = e.selectedKeyEmitter == null ? new x(null, { owner: this, purpose: "selected tree key" }) : null, this.selectedKeyEmitter = e.selectedKeyEmitter ?? this.ownedSelectedEmitter, this.ownedExpandedEmitter = e.expandedKeysEmitter == null ? new x([], { owner: this, purpose: "expanded tree keys" }) : null, this.expandedKeysEmitter = e.expandedKeysEmitter ?? this.ownedExpandedEmitter;
   }
   initialize() {
     this.reconcile(this.nodesEmitter.get()), this.watch(this.nodesEmitter, this.selectedKeyEmitter, this.expandedKeysEmitter), this.onCleanup(this.nodesEmitter.subscribe(({ value: e }) => this.reconcile(e), {
@@ -1982,124 +1865,123 @@ class Z extends g {
   }
   render() {
     const e = this.nodesEmitter.get();
-    P(e);
-    const a = new Set(this.expandedKeysEmitter.get()), i = De(e, a), n = this.selectedKeyEmitter.get(), o = i.find(({ node: d }) => Object.is(d.id, this.focusedKey)) ?? i.find(({ node: d }) => Object.is(d.id, n)) ?? i[0] ?? null;
-    this.focusedKey = (o == null ? void 0 : o.node.id) ?? null;
+    B(e);
+    const i = new Set(this.expandedKeysEmitter.get()), s = De(e, i), n = this.selectedKeyEmitter.get(), a = s.find(({ node: c }) => Object.is(c.id, this.focusedKey)) ?? s.find(({ node: c }) => Object.is(c.id, n)) ?? s[0] ?? null;
+    this.focusedKey = (a == null ? void 0 : a.node.id) ?? null;
     const l = this.Host;
-    return /* @__PURE__ */ u(l, { className: E(this.props) || null, children: i.length === 0 ? /* @__PURE__ */ u("p", { role: "status", "data-part": "empty", children: "No tree items" }) : /* @__PURE__ */ u("div", { role: "tree", "aria-label": this.props.label, "data-part": "tree", children: i.map((d, h) => {
-      var K, A, F;
-      const { node: f, depth: m, position: y, setSize: p } = d, S = (((K = f.children) == null ? void 0 : K.length) ?? 0) > 0, x = S && a.has(f.id), O = Object.is(f.id, n), $ = ((F = (A = this.props).renderItem) == null ? void 0 : F.call(A, f, m)) ?? f.label;
+    return /* @__PURE__ */ u(l, { className: R("datacomponentlike", E(this.props)), children: s.length === 0 ? /* @__PURE__ */ u("p", { role: "status", children: "No tree items" }) : /* @__PURE__ */ u("div", { role: "tree", "aria-label": this.props.label, children: s.map((c, h) => {
+      var j, A, H;
+      const { node: p, depth: f, position: g, setSize: m } = c, I = (((j = p.children) == null ? void 0 : j.length) ?? 0) > 0, v = I && i.has(p.id), O = Object.is(p.id, n), C = ((H = (A = this.props).renderItem) == null ? void 0 : H.call(A, p, f)) ?? p.label;
       return /* @__PURE__ */ w(
         "div",
         {
           role: "treeitem",
-          "data-part": "item",
           "data-index": h,
-          "data-depth": m,
-          "aria-level": m + 1,
-          "aria-posinset": y,
-          "aria-setsize": p,
-          "aria-expanded": S ? String(x) : null,
+          "data-depth": f,
+          "aria-level": f + 1,
+          "aria-posinset": g,
+          "aria-setsize": m,
+          "aria-expanded": I ? String(v) : null,
           "aria-selected": String(O),
-          tabIndex: Object.is(f.id, o == null ? void 0 : o.node.id) ? 0 : -1,
-          style: { "--tree-depth": m },
+          tabIndex: Object.is(p.id, a == null ? void 0 : a.node.id) ? 0 : -1,
+          style: { "--tree-depth": f },
           onClick: (T) => {
-            if (this.focusedKey = f.id, Ut(T.target) && S) {
-              this.toggleExpanded(f.id), this.focusRow(f.id);
+            if (this.focusedKey = p.id, Bt(T.target) && I) {
+              this.toggleExpanded(p.id), this.focusRow(p.id);
               return;
             }
-            this.selectNode(f, T);
+            this.selectNode(p, T);
           },
-          onFocus: () => this.focusedKey = f.id,
-          onKeyDown: (T) => this.handleKeyDown(T, h, i),
+          onFocus: () => this.focusedKey = p.id,
+          onKeyDown: (T) => this.handleKeyDown(T, h, s),
           children: [
             /* @__PURE__ */ u(
               "span",
               {
                 "data-part": "expander",
-                "data-expandable": S ? "" : null,
+                "data-expandable": I ? "" : null,
                 "aria-hidden": "true",
-                children: S ? x ? "▾" : "▸" : "•"
+                children: I ? v ? "▾" : "▸" : "•"
               }
             ),
-            /* @__PURE__ */ u("span", { "data-part": "label", children: $ })
+            /* @__PURE__ */ u("span", { "data-part": "label", children: C })
           ]
         },
-        f.id
+        p.id
       );
     }) }) });
   }
   onDestroy() {
-    var e, a, i;
-    this.typeaheadTimer != null && clearTimeout(this.typeaheadTimer), (e = this.ownedNodesEmitter) == null || e.dispose(), (a = this.ownedSelectedEmitter) == null || a.dispose(), (i = this.ownedExpandedEmitter) == null || i.dispose();
+    var e, i, s;
+    this.typeaheadTimer != null && clearTimeout(this.typeaheadTimer), (e = this.ownedNodesEmitter) == null || e.dispose(), (i = this.ownedSelectedEmitter) == null || i.dispose(), (s = this.ownedExpandedEmitter) == null || s.dispose();
   }
   reconcile(e) {
-    P(e);
-    const a = new Set(zt(e).map(({ node: l }) => l.id)), i = this.selectedKeyEmitter.get();
-    this.ownedSelectedEmitter != null && i != null && !a.has(i) && this.selectedKeyEmitter.set(null, "selected tree item removed");
-    const n = this.expandedKeysEmitter.get(), o = n.filter((l) => a.has(l));
-    this.ownedExpandedEmitter != null && !Lt(n, o) && this.expandedKeysEmitter.set(o, "removed tree expansions reconciled"), this.focusedKey != null && !a.has(this.focusedKey) && (this.focusedKey = null);
+    B(e);
+    const i = new Set(Lt(e).map(({ node: l }) => l.id)), s = this.selectedKeyEmitter.get();
+    this.ownedSelectedEmitter != null && s != null && !i.has(s) && this.selectedKeyEmitter.set(null, "selected tree item removed");
+    const n = this.expandedKeysEmitter.get(), a = n.filter((l) => i.has(l));
+    this.ownedExpandedEmitter != null && !Ut(n, a) && this.expandedKeysEmitter.set(a, "removed tree expansions reconciled"), this.focusedKey != null && !i.has(this.focusedKey) && (this.focusedKey = null);
   }
-  selectNode(e, a) {
-    this.selectedKeyEmitter.set(e.id, "tree item selected"), C(this.props.onSelect, e, a), this.focusRow(e.id);
+  selectNode(e, i) {
+    this.selectedKeyEmitter.set(e.id, "tree item selected"), K(this.props.onSelect, e, i), this.focusRow(e.id);
   }
   toggleExpanded(e) {
-    const a = this.expandedKeysEmitter.get(), i = a.some((n) => Object.is(n, e));
+    const i = this.expandedKeysEmitter.get(), s = i.some((n) => Object.is(n, e));
     this.expandedKeysEmitter.set(
-      i ? a.filter((n) => !Object.is(n, e)) : [...a, e],
-      i ? "tree item collapsed" : "tree item expanded"
+      s ? i.filter((n) => !Object.is(n, e)) : [...i, e],
+      s ? "tree item collapsed" : "tree item expanded"
     );
   }
-  handleKeyDown(e, a, i) {
-    var o, l, d, h;
-    const n = i[a];
+  handleKeyDown(e, i, s) {
+    var a, l, c, h;
+    const n = s[i];
     if (n != null) {
-      if (e.key === "ArrowDown") return this.move(e, (o = i[a + 1]) == null ? void 0 : o.node.id);
-      if (e.key === "ArrowUp") return this.move(e, (l = i[a - 1]) == null ? void 0 : l.node.id);
-      if (e.key === "Home") return this.move(e, (d = i[0]) == null ? void 0 : d.node.id);
-      if (e.key === "End") return this.move(e, (h = i.at(-1)) == null ? void 0 : h.node.id);
+      if (e.key === "ArrowDown") return this.move(e, (a = s[i + 1]) == null ? void 0 : a.node.id);
+      if (e.key === "ArrowUp") return this.move(e, (l = s[i - 1]) == null ? void 0 : l.node.id);
+      if (e.key === "Home") return this.move(e, (c = s[0]) == null ? void 0 : c.node.id);
+      if (e.key === "End") return this.move(e, (h = s.at(-1)) == null ? void 0 : h.node.id);
       if (e.key === "ArrowRight") {
         e.preventDefault();
-        const f = n.node.children ?? [];
-        if (f.length === 0) return;
-        this.expandedKeysEmitter.get().some((y) => Object.is(y, n.node.id)) ? this.focusRow(f[0].id) : this.toggleExpanded(n.node.id);
+        const p = n.node.children ?? [];
+        if (p.length === 0) return;
+        this.expandedKeysEmitter.get().some((g) => Object.is(g, n.node.id)) ? this.focusRow(p[0].id) : this.toggleExpanded(n.node.id);
         return;
       }
       if (e.key === "ArrowLeft") {
-        e.preventDefault(), this.expandedKeysEmitter.get().some((m) => Object.is(m, n.node.id)) ? this.toggleExpanded(n.node.id) : n.parentId != null && this.focusRow(n.parentId);
+        e.preventDefault(), this.expandedKeysEmitter.get().some((f) => Object.is(f, n.node.id)) ? this.toggleExpanded(n.node.id) : n.parentId != null && this.focusRow(n.parentId);
         return;
       }
       if (e.key === "Enter" || e.key === " ") {
         e.preventDefault(), this.selectNode(n.node, e);
         return;
       }
-      e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey && this.handleTypeahead(e, i, a);
+      e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey && this.handleTypeahead(e, s, i);
     }
   }
-  move(e, a) {
-    a !== void 0 && (e.preventDefault(), this.focusRow(a));
+  move(e, i) {
+    i !== void 0 && (e.preventDefault(), this.focusRow(i));
   }
   focusRow(e) {
-    var i;
+    var s;
     this.focusedKey = e;
-    const a = this.dom instanceof Element ? [...this.dom.querySelectorAll('[role="treeitem"]')] : [];
-    for (const n of a) {
-      const o = Number(n.dataset.index), l = De(
+    const i = this.dom instanceof Element ? [...this.dom.querySelectorAll('[role="treeitem"]')] : [];
+    for (const n of i) {
+      const a = Number(n.dataset.index), l = De(
         this.nodesEmitter.get(),
         new Set(this.expandedKeysEmitter.get())
-      ), d = Object.is((i = l[o]) == null ? void 0 : i.node.id, e);
-      n.tabIndex = d ? 0 : -1, d && n.focus();
+      ), c = Object.is((s = l[a]) == null ? void 0 : s.node.id, e);
+      n.tabIndex = c ? 0 : -1, c && n.focus();
     }
   }
-  handleTypeahead(e, a, i) {
+  handleTypeahead(e, i, s) {
     e.preventDefault(), this.typeaheadTimer != null && clearTimeout(this.typeaheadTimer), this.typeahead += e.key.toLocaleLowerCase(), this.typeaheadTimer = setTimeout(() => {
       this.typeahead = "", this.typeaheadTimer = null;
     }, 650);
-    const o = [...a.slice(i + 1), ...a.slice(0, i + 1)].find(({ node: l }) => qt(l).toLocaleLowerCase().startsWith(this.typeahead));
-    o != null && this.focusRow(o.node.id);
+    const a = [...i.slice(s + 1), ...i.slice(0, s + 1)].find(({ node: l }) => Vt(l).toLocaleLowerCase().startsWith(this.typeahead));
+    a != null && this.focusRow(a.node.id);
   }
 }
-s(Z, "dependencies", [We]), s(Z, "hostName", "tree-view"), s(Z, "standaloneHostName", "tree-view"), s(Z, "css", v`
+o(Z, "dependencies", [Je]), o(Z, "hostName", "tree-view"), o(Z, "standaloneHostName", "tree-view"), o(Z, "css", S`
         & {
             display: flex;
             flex-direction: column;
@@ -2108,12 +1990,12 @@ s(Z, "dependencies", [We]), s(Z, "hostName", "tree-view"), s(Z, "standaloneHostN
             overflow: auto;
         }
 
-        & > [data-part="tree"] {
+        & > [role="tree"] {
             display: grid;
             align-content: start;
         }
 
-        & [data-part="item"] {
+        & [role="treeitem"] {
             display: flex;
             align-items: flex-start;
             gap: 0.35rem;
@@ -2124,20 +2006,6 @@ s(Z, "dependencies", [We]), s(Z, "hostName", "tree-view"), s(Z, "standaloneHostN
             user-select: none;
         }
 
-        & [data-part="item"]:hover {
-            background: var(--button-background-hover);
-        }
-
-        & [data-part="item"]:focus-visible {
-            outline: 2px solid var(--ui-accent-color);
-            outline-offset: -2px;
-        }
-
-        & [data-part="item"][aria-selected="true"] {
-            color: var(--toggle-selected-text);
-            background: var(--toggle-selected-bg);
-        }
-
         & [data-part="expander"] {
             flex: 0 0 1rem;
             text-align: center;
@@ -2152,62 +2020,62 @@ s(Z, "dependencies", [We]), s(Z, "hostName", "tree-view"), s(Z, "standaloneHostN
             overflow-wrap: anywhere;
         }
 
-        & > [data-part="empty"] {
+        & > [role="status"] {
             margin: 0;
             padding: var(--ui-padding, 0.75rem);
         }
 
         @media (forced-colors: active) {
-            & [data-part="item"][aria-selected="true"] {
+            & [role="treeitem"][aria-selected="true"] {
                 outline: 2px solid Highlight;
                 forced-color-adjust: auto;
             }
         }
     `);
-function Je(t) {
-  return (Array.isArray(t) ? t : t == null ? [] : [t]).filter((e) => ie(e) && e.type === We).map((e) => {
+function _e(t) {
+  return (Array.isArray(t) ? t : t == null ? [] : [t]).filter((e) => ie(e) && e.type === Je).map((e) => {
     if (!ie(e)) throw new TypeError("TreeView children must be TreeItem nodes");
-    const a = e.props;
+    const i = e.props;
     return {
-      id: a.id,
-      label: a.label,
-      ...a.textValue == null ? {} : { textValue: a.textValue },
-      ...a.value === void 0 ? {} : { value: a.value },
-      children: Je(a.children)
+      id: i.id,
+      label: i.label,
+      ...i.textValue == null ? {} : { textValue: i.textValue },
+      ...i.value === void 0 ? {} : { value: i.value },
+      children: _e(i.children)
     };
   });
 }
 function De(t, r) {
-  const e = [], a = (i, n, o) => {
-    i.forEach((l, d) => {
+  const e = [], i = (s, n, a) => {
+    s.forEach((l, c) => {
       var h;
-      e.push({ node: l, depth: n, parentId: o, position: d + 1, setSize: i.length }), (((h = l.children) == null ? void 0 : h.length) ?? 0) > 0 && r.has(l.id) && a(l.children ?? [], n + 1, l.id);
+      e.push({ node: l, depth: n, parentId: a, position: c + 1, setSize: s.length }), (((h = l.children) == null ? void 0 : h.length) ?? 0) > 0 && r.has(l.id) && i(l.children ?? [], n + 1, l.id);
     });
   };
-  return a(t, 0, null), e;
+  return i(t, 0, null), e;
 }
-function zt(t) {
-  const r = /* @__PURE__ */ new Set(), e = [], a = (i, n, o) => {
-    i.forEach((l, d) => {
+function Lt(t) {
+  const r = /* @__PURE__ */ new Set(), e = [], i = (s, n, a) => {
+    s.forEach((l, c) => {
       if (r.has(l.id)) throw new Error(`Duplicate tree item id: ${String(l.id)}`);
-      r.add(l.id), e.push({ node: l, depth: n, parentId: o, position: d + 1, setSize: i.length }), a(l.children ?? [], n + 1, l.id);
+      r.add(l.id), e.push({ node: l, depth: n, parentId: a, position: c + 1, setSize: s.length }), i(l.children ?? [], n + 1, l.id);
     });
   };
-  return a(t, 0, null), e;
+  return i(t, 0, null), e;
 }
-function qt(t) {
+function Vt(t) {
   return t.textValue != null ? t.textValue : typeof t.label == "string" || typeof t.label == "number" ? String(t.label) : String(t.id);
 }
-function Lt(t, r) {
-  return t.length === r.length && t.every((e, a) => Object.is(e, r[a]));
+function Ut(t, r) {
+  return t.length === r.length && t.every((e, i) => Object.is(e, r[i]));
 }
-function Vt(t) {
+function Pt(t) {
   return t != null && (typeof t == "object" || typeof t == "function") && typeof Reflect.get(t, "get") == "function" && typeof Reflect.get(t, "subscribe") == "function";
 }
-function Ut(t) {
+function Bt(t) {
   return t instanceof Element && t.closest('[data-part="expander"]') != null;
 }
-class se extends g {
+class ne extends y {
   constructor(r = {}) {
     if (super(r), r.onClick != null && typeof r.onClick != "function")
       throw new TypeError("Button onClick must be a function");
@@ -2216,58 +2084,58 @@ class se extends g {
     const {
       children: r = [],
       label: e,
-      type: a = "button",
-      disabled: i = !1,
+      type: i = "button",
+      disabled: s = !1,
       pressed: n,
-      busy: o = !1,
+      busy: a = !1,
       busyLabel: l,
-      id: d,
+      id: c,
       name: h,
-      value: f,
-      title: m,
-      ariaLabel: y,
-      onClick: p
-    } = this.props, x = (Array.isArray(r) ? r.length > 0 : r != null && typeof r != "boolean") ? r : e ?? "", O = o ? l ?? x : x, $ = i || o;
+      value: p,
+      title: f,
+      ariaLabel: g,
+      onClick: m
+    } = this.props, v = (Array.isArray(r) ? r.length > 0 : r != null && typeof r != "boolean") ? r : e ?? "", O = a ? l ?? v : v, C = s || a;
     return /* @__PURE__ */ u(
       "button",
       {
-        id: d,
+        id: c,
         name: h,
-        value: f == null ? void 0 : String(f),
-        title: m,
-        type: a,
-        disabled: $,
+        value: p == null ? void 0 : String(p),
+        title: f,
+        type: i,
+        disabled: C,
         className: E(this.props) || void 0,
         "data-fray-component": "button",
-        "aria-label": y,
+        "aria-label": g,
         "aria-pressed": n == null ? null : String(!!n),
-        "aria-busy": o ? "true" : null,
-        onClick: (K) => {
-          $ || C(p, K);
+        "aria-busy": a ? "true" : null,
+        onClick: (j) => {
+          C || K(m, j);
         },
         children: O
       }
     );
   }
 }
-s(se, "baseStyles", [
-  ['button[data-fray-component="button"]', ["uiline", "button"]]
-]), s(se, "css", v`
-        button[data-fray-component="button"] {
+o(ne, "baseStyles", [
+  ["button", ["uiline", "button"]]
+]), o(ne, "css", S`
+        button {
             font-family: inherit;
         }
     `);
-class Oe extends g {
+class Oe extends y {
   constructor(e) {
     super(e);
-    s(this, "openEmitter");
-    s(this, "dialogId");
-    s(this, "titleId");
-    s(this, "descriptionId");
-    s(this, "dialogElement", null);
-    s(this, "restoreFocusTo", null);
-    s(this, "synchronizedOpen", !1);
-    this.openEmitter = M(this, e, !1, "dialog open state"), this.dialogId = j("dialog", e.id), this.titleId = `${this.dialogId}-title`, this.descriptionId = `${this.dialogId}-description`;
+    o(this, "openEmitter");
+    o(this, "dialogId");
+    o(this, "titleId");
+    o(this, "descriptionId");
+    o(this, "dialogElement", null);
+    o(this, "restoreFocusTo", null);
+    o(this, "synchronizedOpen", !1);
+    this.openEmitter = z(this, e, !1, "dialog open state"), this.dialogId = F("dialog", e.id), this.titleId = `${this.dialogId}-title`, this.descriptionId = `${this.dialogId}-description`;
   }
   initialize() {
     this.watch(this.openEmitter);
@@ -2275,10 +2143,10 @@ class Oe extends g {
   render() {
     const {
       title: e,
-      description: a,
-      actions: i,
+      description: i,
+      actions: s,
       closeLabel: n = "Close",
-      showCloseButton: o = !0,
+      showCloseButton: a = !0,
       children: l = []
     } = this.props;
     return /* @__PURE__ */ w(
@@ -2288,17 +2156,17 @@ class Oe extends g {
         className: E(this.props) || void 0,
         "data-fray-component": "dialog",
         "aria-labelledby": this.titleId,
-        "aria-describedby": a == null ? null : this.descriptionId,
+        "aria-describedby": i == null ? null : this.descriptionId,
         "aria-modal": "true",
-        ref: (d) => this.dialogElement = d,
+        ref: (c) => this.dialogElement = c,
         children: [
-          /* @__PURE__ */ u("header", { "data-part": "header", children: /* @__PURE__ */ u("h2", { id: this.titleId, children: e }) }),
-          a == null ? null : /* @__PURE__ */ u("p", { id: this.descriptionId, "data-part": "description", children: a }),
+          /* @__PURE__ */ u("header", { children: /* @__PURE__ */ u("h2", { id: this.titleId, children: e }) }),
+          i == null ? null : /* @__PURE__ */ u("p", { id: this.descriptionId, children: i }),
           /* @__PURE__ */ u("div", { "data-part": "content", children: l }),
-          i == null && !o ? null : /* @__PURE__ */ w("footer", { "data-part": "actions", children: [
-            i,
-            o ? /* @__PURE__ */ u(
-              se,
+          s == null && !a ? null : /* @__PURE__ */ w("footer", { children: [
+            s,
+            a ? /* @__PURE__ */ u(
+              ne,
               {
                 label: n,
                 onClick: () => this.requestClose()
@@ -2311,8 +2179,8 @@ class Oe extends g {
   }
   afterMount() {
     const e = this.dialogElement;
-    e != null && (this.listen(e, "cancel", (a) => {
-      a.preventDefault(), this.requestClose();
+    e != null && (this.listen(e, "cancel", (i) => {
+      i.preventDefault(), this.requestClose();
     }), this.listen(e, "close", () => {
       this.openEmitter.get() && this.openEmitter.set(!1, "native dialog closed"), this.finishClose();
     }), this.syncOpenState());
@@ -2333,91 +2201,57 @@ class Oe extends g {
   syncOpenState() {
     const e = this.dialogElement;
     if (e == null) return;
-    const a = this.openEmitter.get();
-    if (a && !this.synchronizedOpen) {
-      const i = document.activeElement;
-      this.restoreFocusTo = i instanceof HTMLElement ? i : null, Pt(e), this.synchronizedOpen = !0, Bt(e, this.props.initialFocusRef);
+    const i = this.openEmitter.get();
+    if (i && !this.synchronizedOpen) {
+      const s = document.activeElement;
+      this.restoreFocusTo = s instanceof HTMLElement ? s : null, Gt(e), this.synchronizedOpen = !0, Qt(e, this.props.initialFocusRef);
       return;
     }
-    !a && this.synchronizedOpen && (e.open && typeof e.close == "function" ? e.close() : e.removeAttribute("open"), this.finishClose());
+    !i && this.synchronizedOpen && (e.open && typeof e.close == "function" ? e.close() : e.removeAttribute("open"), this.finishClose());
   }
   finishClose() {
     if (!this.synchronizedOpen && this.restoreFocusTo == null) return;
     this.synchronizedOpen = !1;
     const e = this.restoreFocusTo;
-    this.restoreFocusTo = null, (e == null ? void 0 : e.isConnected) === !0 && e.focus(), C(this.props.onClose);
+    this.restoreFocusTo = null, (e == null ? void 0 : e.isConnected) === !0 && e.focus(), K(this.props.onClose);
   }
 }
-s(Oe, "dependencies", [se]), s(Oe, "css", v`
-        dialog[data-fray-component="dialog"] {
+o(Oe, "dependencies", [ne]), o(Oe, "css", S`
+        dialog {
             width: min(38rem, calc(100vw - 2rem));
             max-height: min(42rem, calc(100dvh - 2rem));
             padding: 0;
-            color: var(--fray-panel-color, var(--ui-text-color));
-            background: var(--fray-panel-background, var(--panel-bg));
-            border: var(--fray-panel-border, var(--panel-border));
-            border-radius: var(--fray-panel-radius, var(--panel-radius));
-            box-shadow: var(--fray-dialog-shadow, var(--fray-panel-shadow));
         }
 
-        dialog[data-fray-component="dialog"]::backdrop {
-            background: var(--fray-dialog-backdrop-background);
-        }
-
-        dialog[data-fray-component="dialog"] > [data-part] {
+        dialog > header,
+        dialog > p,
+        dialog > [data-part="content"],
+        dialog > footer {
             padding: var(--panel-padding, 0.75rem);
         }
 
-        dialog[data-fray-component="dialog"] > [data-part="header"] {
-            color: var(
-                --fray-dialog-header-color,
-                var(--fray-section-header-color, var(--fray-header-color))
-            );
-            background: var(
-                --fray-dialog-header-background,
-                var(--fray-section-header-background, var(--fray-header-background))
-            );
-            border-block-end: var(
-                --fray-section-header-border,
-                var(--fray-header-border)
-            );
-        }
-
-        dialog[data-fray-component="dialog"] > [data-part="header"] h2,
-        dialog[data-fray-component="dialog"] > [data-part="description"] {
+        dialog > header h2,
+        dialog > p {
             margin: 0;
         }
 
-        dialog[data-fray-component="dialog"] > [data-part="content"] {
+        dialog > [data-part="content"] {
             overflow: auto;
         }
 
-        dialog[data-fray-component="dialog"] > [data-part="actions"] {
+        dialog > footer {
             display: flex;
             justify-content: flex-end;
             gap: var(--spacing-small, 0.5rem);
-            border-block-start: 1px solid var(--ui-border-color);
-        }
-
-        @media (prefers-reduced-motion: no-preference) {
-            dialog[data-fray-component="dialog"][open] {
-                animation: fray-dialog-enter 120ms ease-out;
-            }
-        }
-
-        @keyframes fray-dialog-enter {
-            from {
-                transform: translateY(0.4rem);
-            }
         }
 
         @media (forced-colors: active) {
-            dialog[data-fray-component="dialog"] {
+            dialog {
                 border: 2px solid CanvasText;
             }
         }
     `);
-function Pt(t) {
+function Gt(t) {
   if (!t.open) {
     if (typeof t.showModal == "function") {
       t.showModal();
@@ -2426,52 +2260,52 @@ function Pt(t) {
     t.setAttribute("open", "");
   }
 }
-function Bt(t, r) {
-  const a = (r == null || typeof r == "function" ? null : r.current) ?? t.querySelector(
+function Qt(t, r) {
+  const i = (r == null || typeof r == "function" ? null : r.current) ?? t.querySelector(
     '[autofocus], button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
   );
-  a == null || a.focus();
+  i == null || i.focus();
 }
-const z = class z extends D {
+const q = class q extends D {
   constructor(r = {}) {
-    super({ ...r, symbols: z.symbols });
+    super({ ...r, symbols: q.symbols });
   }
 };
-s(z, "hostName", "quad-checkbox"), s(z, "standaloneHostName", "quad-checkbox"), s(z, "symbols", [
+o(q, "hostName", "quad-checkbox"), o(q, "standaloneHostName", "quad-checkbox"), o(q, "symbols", [
   ["✖", b.Deny],
   ["☐", b.Neutral],
   ["✓", b.Prefer],
   ["+", b.Require]
-]), s(z, "defaultSemanticState", b.Neutral);
-let $e = z;
-const q = class q extends D {
+]), o(q, "defaultSemanticState", b.Neutral);
+let Ce = q;
+const L = class L extends D {
   constructor(r = {}) {
-    super({ ...r, symbols: q.symbols });
+    super({ ...r, symbols: L.symbols });
   }
 };
-s(q, "hostName", "tri-checkbox"), s(q, "standaloneHostName", "tri-checkbox"), s(q, "symbols", [
+o(L, "hostName", "tri-checkbox"), o(L, "standaloneHostName", "tri-checkbox"), o(L, "symbols", [
   ["✖", b.Deny],
   ["☐", b.Neutral],
   ["✓", b.Prefer]
-]), s(q, "defaultSemanticState", b.Neutral);
-let Ce = q;
-class ee extends g {
+]), o(L, "defaultSemanticState", b.Neutral);
+let Ke = L;
+class ee extends y {
   constructor(e = {}) {
     var n;
     super(e);
-    s(this, "inputId");
-    s(this, "errorId");
-    s(this, "optionsEmitter");
-    s(this, "valueEmitter");
-    s(this, "ownsOptionsEmitter");
-    this.inputId = j("dropdown", e.id), this.errorId = `${this.inputId}-error`;
-    const a = e.options ?? [];
-    Gt(a) ? (this.optionsEmitter = a, this.ownsOptionsEmitter = !1) : (fe(a), this.optionsEmitter = new I(a, {
+    o(this, "inputId");
+    o(this, "errorId");
+    o(this, "optionsEmitter");
+    o(this, "valueEmitter");
+    o(this, "ownsOptionsEmitter");
+    this.inputId = F("dropdown", e.id), this.errorId = `${this.inputId}-error`;
+    const i = e.options ?? [];
+    Wt(i) ? (this.optionsEmitter = i, this.ownsOptionsEmitter = !1) : (fe(i), this.optionsEmitter = new x(i, {
       owner: this,
       purpose: "dropdown options"
     }), this.ownsOptionsEmitter = !0);
-    const i = ((n = this.optionsEmitter.get()[0]) == null ? void 0 : n.value) ?? "";
-    this.valueEmitter = M(this, e, i, "dropdown value");
+    const s = ((n = this.optionsEmitter.get()[0]) == null ? void 0 : n.value) ?? "";
+    this.valueEmitter = z(this, e, s, "dropdown value");
   }
   initialize() {
     this.watch(this.valueEmitter, this.optionsEmitter);
@@ -2479,66 +2313,65 @@ class ee extends g {
   render() {
     const {
       label: e,
-      name: a,
-      disabled: i = !1,
+      name: i,
+      disabled: s = !1,
       required: n = !1,
-      error: o = null,
+      error: a = null,
       placeholder: l = "Select…",
-      ariaLabel: d,
+      ariaLabel: c,
       onChange: h
-    } = this.props, f = this.optionsEmitter.get() ?? [];
-    fe(f);
-    const m = this.valueEmitter.get(), y = this.Host;
+    } = this.props, p = this.optionsEmitter.get() ?? [];
+    fe(p);
+    const f = this.valueEmitter.get(), g = this.Host;
     return /* @__PURE__ */ w(
-      y,
+      g,
       {
-        className: E(this.props) || null,
-        "data-disabled": i ? "" : null,
+        className: R("selectshell", E(this.props)),
+        "data-disabled": s ? "" : null,
         "data-required": n ? "" : null,
-        "data-error": o == null ? null : "",
+        "data-error": a == null ? null : "",
         children: [
           e == null ? null : /* @__PURE__ */ u("label", { htmlFor: this.inputId, children: e }),
           /* @__PURE__ */ w(
             "select",
             {
               id: this.inputId,
-              name: a,
-              value: m == null ? "" : String(m),
-              disabled: i,
+              name: i,
+              value: f == null ? "" : String(f),
+              disabled: s,
               required: n,
-              "aria-label": e == null ? d : null,
-              "aria-invalid": o == null ? null : "true",
-              "aria-describedby": o == null ? null : this.errorId,
-              onChange: (p) => {
-                const S = Qt(p, "dropdown change"), x = f.find(({ value: $ }) => String($) === S), O = (x == null ? void 0 : x.value) ?? S;
-                this.valueEmitter.set(O, "dropdown selection"), C(h, O, p);
+              "aria-label": e == null ? c : null,
+              "aria-invalid": a == null ? null : "true",
+              "aria-describedby": a == null ? null : this.errorId,
+              onChange: (m) => {
+                const I = Jt(m, "dropdown change"), v = p.find(({ value: C }) => String(C) === I), O = (v == null ? void 0 : v.value) ?? I;
+                this.valueEmitter.set(O, "dropdown selection"), K(h, O, m);
               },
               children: [
-                m == null || m === "" ? /* @__PURE__ */ u("option", { value: "", disabled: n, selected: !0, children: l }) : null,
-                f.map((p) => {
-                  if (p == null || !Object.hasOwn(p, "value"))
+                f == null || f === "" ? /* @__PURE__ */ u("option", { value: "", disabled: n, selected: !0, children: l }) : null,
+                p.map((m) => {
+                  if (m == null || !Object.hasOwn(m, "value"))
                     throw new TypeError("Dropdown options require value and label fields");
                   return /* @__PURE__ */ u(
                     "option",
                     {
-                      value: String(p.value),
-                      disabled: !!p.disabled,
-                      selected: Object.is(m, p.value),
-                      children: p.label ?? String(p.value)
+                      value: String(m.value),
+                      disabled: !!m.disabled,
+                      selected: Object.is(f, m.value),
+                      children: m.label ?? String(m.value)
                     },
-                    String(p.value)
+                    String(m.value)
                   );
                 })
               ]
             }
           ),
-          o == null ? null : /* @__PURE__ */ u(
+          a == null ? null : /* @__PURE__ */ u(
             "p",
             {
               id: this.errorId,
-              "data-part": "error",
               role: "alert",
-              children: String(o)
+              children: String(a)
             }
           )
         ]
@@ -2546,33 +2379,30 @@ class ee extends g {
     );
   }
 }
-s(ee, "hostName", "dropdown"), s(ee, "standaloneHostName", "drop-down"), s(ee, "baseStyles", [
+o(ee, "hostName", "dropdown"), o(ee, "standaloneHostName", "drop-down"), o(ee, "baseStyles", [
   ["&", ["labeledinput", "inputline"]],
-  ["& > label", ["label"]],
-  ["& > select", ["input", "inputline"]],
-  ["&[data-disabled]", ["disabled"]],
-  ["&[data-error]", ["error"]]
-]), s(ee, "css", v`
+  ["& > select", ["input", "inputline"]]
+]), o(ee, "css", S`
         & {
             position: relative;
         }
     `);
-function Gt(t) {
+function Wt(t) {
   return t != null && (typeof t == "object" || typeof t == "function") && typeof Reflect.get(t, "get") == "function" && typeof Reflect.get(t, "subscribe") == "function";
 }
-function Qt(t, r) {
+function Jt(t, r) {
   const e = t.currentTarget;
   if (e == null || typeof Reflect.get(e, "value") != "string")
     throw new TypeError(`${r} requires a value-bearing event target`);
   return Reflect.get(e, "value");
 }
-class te extends g {
+class te extends y {
   constructor(e = {}) {
     super(e);
-    s(this, "inputId");
-    s(this, "errorId");
-    s(this, "valueEmitter");
-    this.inputId = j("textbox", e.id), this.errorId = `${this.inputId}-error`, this.valueEmitter = M(this, e, "", "textbox value");
+    o(this, "inputId");
+    o(this, "errorId");
+    o(this, "valueEmitter");
+    this.inputId = F("textbox", e.id), this.errorId = `${this.inputId}-error`, this.valueEmitter = z(this, e, "", "textbox value");
   }
   initialize() {
     this.watch(this.valueEmitter);
@@ -2580,28 +2410,28 @@ class te extends g {
   render() {
     const {
       label: e,
-      placeholder: a,
-      type: i = "text",
+      placeholder: i,
+      type: s = "text",
       name: n,
-      disabled: o = !1,
+      disabled: a = !1,
       required: l = !1,
-      readOnly: d = !1,
+      readOnly: c = !1,
       error: h = null,
-      autoComplete: f,
-      inputMode: m,
-      minLength: y,
-      maxLength: p,
-      pattern: S,
-      ariaLabel: x,
+      autoComplete: p,
+      inputMode: f,
+      minLength: g,
+      maxLength: m,
+      pattern: I,
+      ariaLabel: v,
       inputRef: O,
-      onInput: $,
-      onChange: K
-    } = this.props, A = this.valueEmitter.get() ?? "", F = this.Host;
+      onInput: C,
+      onChange: j
+    } = this.props, A = this.valueEmitter.get() ?? "", H = this.Host;
     return /* @__PURE__ */ w(
-      F,
+      H,
       {
         className: E(this.props) || null,
-        "data-disabled": o ? "" : null,
+        "data-disabled": a ? "" : null,
         "data-required": l ? "" : null,
         "data-error": h == null ? null : "",
         children: [
@@ -2611,28 +2441,28 @@ class te extends g {
             {
               id: this.inputId,
               name: n,
-              type: i,
+              type: s,
               value: A,
-              placeholder: a,
-              disabled: o,
+              placeholder: i,
+              disabled: a,
               required: l,
-              readOnly: d,
-              autoComplete: f,
-              inputMode: m,
-              minLength: y,
-              maxLength: p,
-              pattern: S,
+              readOnly: c,
+              autoComplete: p,
+              inputMode: f,
+              minLength: g,
+              maxLength: m,
+              pattern: I,
               ref: O,
-              "aria-label": e == null ? x : null,
+              "aria-label": e == null ? v : null,
               "aria-invalid": h == null ? null : "true",
               "aria-describedby": h == null ? null : this.errorId,
               onInput: (T) => {
-                const B = Ke(T, "textbox input");
-                this.valueEmitter.set(B, "textbox input"), C($, B, T);
+                const G = je(T, "textbox input");
+                this.valueEmitter.set(G, "textbox input"), K(C, G, T);
               },
-              onChange: (T) => C(
-                K,
-                Ke(T, "textbox change"),
+              onChange: (T) => K(
+                j,
+                je(T, "textbox change"),
                 T
               )
             }
@@ -2641,7 +2471,6 @@ class te extends g {
             "p",
             {
               id: this.errorId,
-              "data-part": "error",
               role: "alert",
               children: String(h)
             }
@@ -2651,96 +2480,91 @@ class te extends g {
     );
   }
 }
-s(te, "hostName", "textbox"), s(te, "standaloneHostName", "text-box"), s(te, "baseStyles", [
+o(te, "hostName", "textbox"), o(te, "standaloneHostName", "text-box"), o(te, "baseStyles", [
   ["&", ["labeledinput", "inputline"]],
-  ["& > label", ["label"]],
-  ["& > input", ["input", "inputline"]],
-  ["&[data-disabled]", ["disabled"]],
-  ["&[data-error]", ["error"]]
-]), s(te, "css", v`
+  ["& > input", ["input", "inputline"]]
+]), o(te, "css", S`
         & input {
             cursor: text;
         }
 
-        & > [data-part="error"] {
+        & > [role="alert"] {
             margin: 0;
-            color: var(--fray-color-error, var(--error-color));
         }
     `);
-function Ke(t, r) {
+function je(t, r) {
   const e = t.currentTarget;
   if (e == null || typeof Reflect.get(e, "value") != "string")
     throw new TypeError(`${r} requires a value-bearing event target`);
   return Reflect.get(e, "value");
 }
-class Ae extends g {
+class Ae extends y {
   constructor(e = {}) {
     var n;
     super(e);
-    s(this, "valueEmitter");
-    s(this, "groupId");
-    s(this, "legendId");
-    const a = e.options ?? [];
-    je(a);
-    const i = ((n = a[0]) == null ? void 0 : n[0]) ?? null;
-    this.valueEmitter = M(
+    o(this, "valueEmitter");
+    o(this, "groupId");
+    o(this, "legendId");
+    const i = e.options ?? [];
+    Fe(i);
+    const s = ((n = i[0]) == null ? void 0 : n[0]) ?? null;
+    this.valueEmitter = z(
       this,
       e,
-      i ?? null,
+      s ?? null,
       "toggle value"
-    ), this.groupId = j("toggle", e.id), this.legendId = `${this.groupId}-label`;
+    ), this.groupId = F("toggle", e.id), this.legendId = `${this.groupId}-label`;
   }
   initialize() {
     this.watch(this.valueEmitter);
   }
-  selectOption(e, a = null) {
-    this.props.disabled || (this.valueEmitter.set(e, "toggle option selected"), C(this.props.onChange, e, a));
+  selectOption(e, i = null) {
+    this.props.disabled || (this.valueEmitter.set(e, "toggle option selected"), K(this.props.onChange, e, i));
   }
   render() {
     const {
       options: e = [],
-      label: a,
-      disabled: i = !1,
+      label: i,
+      disabled: s = !1,
       required: n = !1
     } = this.props;
-    je(e);
-    const o = this.valueEmitter.get(), l = Math.max(
+    Fe(e);
+    const a = this.valueEmitter.get(), l = Math.max(
       0,
-      e.findIndex(([d]) => Object.is(d, o))
+      e.findIndex(([c]) => Object.is(c, a))
     );
     return /* @__PURE__ */ w(
       "fieldset",
       {
         id: this.groupId,
-        disabled: i,
+        disabled: s,
         className: E(this.props) || void 0,
         "data-fray-component": "toggle",
-        "data-disabled": i ? "" : null,
+        "data-disabled": s ? "" : null,
         "aria-required": n ? "true" : null,
         children: [
-          a == null ? null : /* @__PURE__ */ u("legend", { id: this.legendId, children: a }),
+          i == null ? null : /* @__PURE__ */ u("legend", { id: this.legendId, children: i }),
           /* @__PURE__ */ u(
             "div",
             {
               "data-part": "options",
               role: "radiogroup",
-              "aria-label": a == null ? this.props.ariaLabel : null,
-              "aria-labelledby": a == null ? null : this.legendId,
-              children: e.map(([d, h], f) => /* @__PURE__ */ u(
+              "aria-label": i == null ? this.props.ariaLabel : null,
+              "aria-labelledby": i == null ? null : this.legendId,
+              children: e.map(([c, h], p) => /* @__PURE__ */ u(
                 "button",
                 {
                   type: "button",
                   role: "radio",
-                  disabled: i,
-                  "data-part": "option",
-                  "aria-checked": Object.is(o, d) ? "true" : "false",
-                  "data-value": String(d),
-                  tabIndex: f === l ? 0 : -1,
-                  onClick: (m) => this.selectOption(d, m),
-                  onKeyDown: (m) => this.handleKeyDown(m, f, e),
+                  disabled: s,
+                  "aria-checked": Object.is(a, c) ? "true" : "false",
+                  "data-value": String(c),
+                  tabIndex: p === l ? 0 : -1,
+                  onClick: (f) => this.selectOption(c, f),
+                  onKeyDown: (f) => this.handleKeyDown(f, p, e),
                   children: h
                 },
-                String(d)
+                String(c)
               ))
             }
           )
@@ -2748,74 +2572,54 @@ class Ae extends g {
       }
     );
   }
-  handleKeyDown(e, a, i) {
+  handleKeyDown(e, i, s) {
     const { key: n } = e;
-    let o;
-    if (n === "ArrowRight" || n === "ArrowDown") o = (a + 1) % i.length;
+    let a;
+    if (n === "ArrowRight" || n === "ArrowDown") a = (i + 1) % s.length;
     else if (n === "ArrowLeft" || n === "ArrowUp")
-      o = (a - 1 + i.length) % i.length;
-    else if (n === "Home") o = 0;
-    else if (n === "End") o = i.length - 1;
+      a = (i - 1 + s.length) % s.length;
+    else if (n === "Home") a = 0;
+    else if (n === "End") a = s.length - 1;
     else return;
     e.preventDefault();
-    const l = i[o];
+    const l = s[a];
     if (l != null && (this.selectOption(l[0], e), this.dom instanceof Element)) {
-      const d = this.dom.querySelectorAll('[role="radio"]')[o];
-      d == null || d.focus();
+      const c = this.dom.querySelectorAll('[role="radio"]')[a];
+      c == null || c.focus();
     }
   }
 }
-s(Ae, "baseStyles", [
-  ['fieldset[data-fray-component="toggle"] > [data-part="options"]', ["uiline"]],
-  ['fieldset[data-fray-component="toggle"] [data-part="option"]', ["uiline", "button"]]
-]), s(Ae, "css", v`
-        fieldset[data-fray-component="toggle"] {
+o(Ae, "baseStyles", [
+  ['fieldset:has(> [data-part="options"]) > [data-part="options"]', ["uiline"]],
+  ['fieldset:has(> [data-part="options"]) [role="radio"]', ["uiline", "button"]]
+]), o(Ae, "css", S`
+        fieldset:has(> [data-part="options"]) {
             margin: 0;
             padding: 0;
             border: 0;
         }
 
-        fieldset[data-fray-component="toggle"] > [data-part="options"] {
+        fieldset:has(> [data-part="options"]) > [data-part="options"] {
             display: flex;
             padding: 0;
         }
 
-        fieldset[data-fray-component="toggle"] [data-part="option"] {
-            background: var(--fray-toggle-button-background, var(--fray-button-background));
-            border-radius: 0;
-        }
-
-        fieldset[data-fray-component="toggle"] [data-part="option"]:first-child {
-            border-radius: var(--ui-border-radius) 0 0 var(--ui-border-radius);
-        }
-
-        fieldset[data-fray-component="toggle"] [data-part="option"]:last-child {
-            border-radius: 0 var(--ui-border-radius) var(--ui-border-radius) 0;
-        }
-
-        fieldset[data-fray-component="toggle"] [data-part="option"][aria-checked="true"] {
-            background: var(
-                --fray-toggle-button-background-checked,
-                var(--fray-selection-background, var(--toggle-selected-bg))
-            );
-            color: var(--fray-selection-color, var(--toggle-selected-text));
-        }
     `);
-function je(t) {
+function Fe(t) {
   fe(t);
   for (const r of t)
     if (!Array.isArray(r) || r.length < 2)
       throw new TypeError("Toggle options must be [value, label] tuples");
 }
-class re extends g {
+class he extends y {
   render() {
     const {
       children: r = [],
       id: e,
-      label: a = "Actions",
-      orientation: i = "horizontal"
+      label: i = "Actions",
+      orientation: s = "horizontal"
     } = this.props;
-    if (!["horizontal", "vertical"].includes(i))
+    if (!["horizontal", "vertical"].includes(s))
       throw new TypeError("Toolbar orientation must be horizontal or vertical");
     const n = this.Host;
     return /* @__PURE__ */ u(
@@ -2823,18 +2627,16 @@ class re extends g {
       {
         id: e,
         role: "toolbar",
-        className: E(this.props) || null,
-        "data-orientation": i,
-        "aria-label": a,
-        "aria-orientation": i,
+        className: R("toolbarlike", E(this.props)),
+        "data-orientation": s,
+        "aria-label": i,
+        "aria-orientation": s,
         children: r
       }
     );
   }
 }
-s(re, "hostName", "toolbar"), s(re, "standaloneHostName", "tool-bar"), s(re, "baseStyles", [
-  ["&", ["toolbar"]]
-]), s(re, "css", v`
+o(he, "hostName", "toolbar"), o(he, "standaloneHostName", "tool-bar"), o(he, "css", S`
         & {
             display: flex;
             flex-wrap: wrap;
@@ -2848,31 +2650,31 @@ s(re, "hostName", "toolbar"), s(re, "standaloneHostName", "tool-bar"), s(re, "ba
             align-items: stretch;
         }
     `);
-class he extends g {
+class pe extends y {
   constructor(e) {
     super(e);
-    s(this, "progressId");
-    if (this.progressId = j("progress", e.id), e.valueEmitter != null && !Wt(e.valueEmitter))
+    o(this, "progressId");
+    if (this.progressId = F("progress", e.id), e.valueEmitter != null && !_t(e.valueEmitter))
       throw new TypeError("ProgressBar valueEmitter must be a readable emitter");
   }
   render() {
     const e = this.props.max ?? 100;
     if (!Number.isFinite(e) || e <= 0)
       throw new RangeError("ProgressBar max must be a positive finite number");
-    const a = this.props.valueEmitter == null ? this.props.value ?? null : this.read(this.props.valueEmitter);
-    if (a != null && (!Number.isFinite(a) || a < 0))
+    const i = this.props.valueEmitter == null ? this.props.value ?? null : this.read(this.props.valueEmitter);
+    if (i != null && (!Number.isFinite(i) || i < 0))
       throw new RangeError("ProgressBar value must be null or a non-negative finite number");
-    const i = a == null ? null : Math.min(a, e), n = this.props.valueText ?? (i == null ? "In progress" : `${Math.round(i / e * 100)}%`), o = this.Host;
-    return /* @__PURE__ */ w(o, { className: E(this.props) || null, children: [
+    const s = i == null ? null : Math.min(i, e), n = this.props.valueText ?? (s == null ? "In progress" : `${Math.round(s / e * 100)}%`), a = this.Host;
+    return /* @__PURE__ */ w(a, { className: E(this.props) || null, children: [
       /* @__PURE__ */ w("div", { "data-part": "label-line", children: [
         /* @__PURE__ */ u("label", { htmlFor: this.progressId, children: this.props.label }),
-        /* @__PURE__ */ u("span", { "data-part": "value", children: n })
+        /* @__PURE__ */ u("output", { children: n })
       ] }),
       /* @__PURE__ */ u(
         "progress",
         {
           id: this.progressId,
-          value: i ?? void 0,
+          value: s ?? void 0,
           max: e,
           "aria-valuetext": n,
           children: n
@@ -2881,7 +2683,7 @@ class he extends g {
     ] });
   }
 }
-s(he, "hostName", "progress-bar"), s(he, "standaloneHostName", "progress-bar"), s(he, "css", v`
+o(pe, "hostName", "progress-bar"), o(pe, "standaloneHostName", "progress-bar"), o(pe, "css", S`
         & {
             display: grid;
             gap: var(--spacing-small, 0.5rem);
@@ -2893,16 +2695,9 @@ s(he, "hostName", "progress-bar"), s(he, "standaloneHostName", "progress-bar"),
             gap: var(--spacing-medium, 1rem);
         }
 
-        & > [data-part="label-line"] > label {
-            font-weight: 600;
-        }
-
         & > progress {
             width: 100%;
             min-height: 0.8rem;
-            color: var(--fray-progress-value-background, var(--ui-accent-color));
-            background: var(--fray-progress-track-background, transparent);
-            accent-color: var(--fray-color-primary, var(--ui-accent-color));
         }
 
         @media (forced-colors: active) {
@@ -2911,201 +2706,213 @@ s(he, "hostName", "progress-bar"), s(he, "standaloneHostName", "progress-bar"),
             }
         }
     `);
-function Wt(t) {
+function _t(t) {
   return t != null && (typeof t == "object" || typeof t == "function") && typeof Reflect.get(t, "get") == "function" && typeof Reflect.get(t, "subscribe") == "function";
 }
-const ur = Object.freeze([
-  c("--fray-color-canvas", "color", "palette", "color", "Application canvas"),
-  c("--fray-color-surface", "color", "palette", "color", "Primary surface"),
-  c("--fray-color-surface-muted", "color", "palette", "color", "Subdued surface"),
-  c("--fray-color-surface-raised", "color", "palette", "color", "Raised surface"),
-  c("--fray-color-surface-inset", "color", "palette", "color", "Inset surface"),
-  c("--fray-color-text", "color", "palette", "color", "Primary text"),
-  c("--fray-color-text-muted", "color", "palette", "color", "Secondary text"),
-  c("--fray-color-border", "color", "palette", "color", "Ordinary border"),
-  c("--fray-color-border-strong", "color", "palette", "color", "Emphasized border"),
-  c("--fray-color-primary", "color", "palette", "color", "Primary accent"),
-  c("--fray-color-primary-hover", "color", "palette", "color", "Hovered accent"),
-  c("--fray-color-primary-active", "color", "palette", "color", "Active accent"),
-  c("--fray-color-primary-soft", "color", "palette", "color", "Subtle accent surface"),
-  c("--fray-color-on-primary", "color", "palette", "color", "Content on primary accent"),
-  c("--fray-color-focus", "color", "palette", "color", "Keyboard focus indication"),
-  c("--fray-color-selection", "color", "palette", "color", "Selected item surface"),
-  c("--fray-color-on-selection", "color", "palette", "color", "Content on selection"),
-  c("--fray-color-disabled", "color", "palette", "color", "Disabled surface"),
-  c("--fray-color-on-disabled", "color", "palette", "color", "Disabled content"),
-  c("--fray-color-error", "color", "status", "color", "Error state"),
-  c("--fray-color-on-error", "color", "status", "color", "Content on error"),
-  c("--fray-color-success", "color", "status", "color", "Success state"),
-  c("--fray-color-on-success", "color", "status", "color", "Content on success"),
-  c("--fray-color-highlight", "color", "palette", "color", "Light reflection/highlight"),
-  c("--fray-color-shadow", "color", "palette", "color", "Shadow tint"),
-  c("--fray-font-family", "theme", "typography", "font", "UI font stack"),
-  c("--fray-font-size", "theme", "typography", "dimension", "Base UI font size"),
-  c("--fray-line-height", "theme", "typography", "dimension", "Base UI line height"),
-  c("--fray-control-min-height", "theme", "control", "dimension", "Minimum control height"),
-  c("--fray-space-xs", "theme", "spacing", "dimension", "Extra-small spacing"),
-  c("--fray-space-sm", "theme", "spacing", "dimension", "Small spacing"),
-  c("--fray-space-md", "theme", "spacing", "dimension", "Medium spacing"),
-  c("--fray-space-lg", "theme", "spacing", "dimension", "Large spacing"),
-  c("--fray-radius-sm", "theme", "shape", "radius", "Small corner radius"),
-  c("--fray-radius-md", "theme", "shape", "radius", "Ordinary corner radius"),
-  c("--fray-radius-lg", "theme", "shape", "radius", "Large corner radius"),
-  c("--fray-motion-fast", "theme", "motion", "duration", "Fast interaction transition"),
-  c("--fray-ui-background", "theme", "surface", "background", "Default UI background"),
-  c("--fray-ui-color", "theme", "surface", "color", "Default UI text"),
-  c("--fray-ui-border", "theme", "surface", "border", "Default UI border"),
-  c("--fray-ui-shadow", "theme", "surface", "shadow", "Default raised shadow"),
-  c("--fray-focus-ring", "theme", "focus", "shadow", "Keyboard focus ring"),
-  c("--fray-panel-background", "theme", "panel", "background", "Panel surface", "--fray-ui-background"),
-  c("--fray-panel-color", "theme", "panel", "color", "Panel content", "--fray-ui-color"),
-  c("--fray-panel-border", "theme", "panel", "border", "Panel border", "--fray-ui-border"),
-  c("--fray-panel-shadow", "theme", "panel", "shadow", "Panel shadow", "--fray-ui-shadow"),
-  c("--fray-panel-radius", "theme", "panel", "radius", "Panel radius", "--fray-radius-md"),
-  c("--fray-dialog-shadow", "theme", "dialog", "shadow", "Modal dialog shadow", "--fray-panel-shadow"),
-  c("--fray-dialog-backdrop-background", "theme", "dialog", "background", "Modal backdrop"),
-  c("--fray-header-background", "theme", "header", "background", "Generic header surface"),
-  c("--fray-header-color", "theme", "header", "color", "Generic header content"),
-  c("--fray-header-border", "theme", "header", "border", "Generic header border"),
-  c("--fray-header-shadow", "theme", "header", "shadow", "Generic header shadow"),
-  c("--fray-section-header-background", "theme", "header", "background", "Section header surface", "--fray-header-background"),
-  c("--fray-section-header-color", "theme", "header", "color", "Section header content", "--fray-header-color"),
-  c("--fray-section-header-border", "theme", "header", "border", "Section header border", "--fray-header-border"),
-  c("--fray-section-header-shadow", "theme", "header", "shadow", "Section header shadow", "--fray-header-shadow"),
-  c("--fray-panel-header-background", "theme", "header", "background", "Panel header surface", "--fray-section-header-background"),
-  c("--fray-panel-header-color", "theme", "header", "color", "Panel header content", "--fray-section-header-color"),
-  c("--fray-table-header-background", "theme", "header", "background", "Table header surface", "--fray-section-header-background"),
-  c("--fray-table-header-color", "theme", "header", "color", "Table header content", "--fray-section-header-color"),
-  c("--fray-dialog-header-background", "theme", "header", "background", "Dialog header surface", "--fray-section-header-background"),
-  c("--fray-dialog-header-color", "theme", "header", "color", "Dialog header content", "--fray-section-header-color"),
-  c("--fray-button-background", "theme", "button", "background", "Generic button surface"),
-  c("--fray-button-background-hover", "theme", "button", "background", "Hovered button surface"),
-  c("--fray-button-background-active", "theme", "button", "background", "Pressed button surface"),
-  c("--fray-button-background-disabled", "theme", "button", "background", "Disabled button surface"),
-  c("--fray-button-color", "theme", "button", "color", "Generic button content"),
-  c("--fray-button-border", "theme", "button", "border", "Generic button border"),
-  c("--fray-button-shadow", "theme", "button", "shadow", "Generic button shadow"),
-  c("--fray-button-shadow-active", "theme", "button", "shadow", "Pressed button shadow"),
-  c("--fray-toggle-button-background", "theme", "button", "background", "Toggle option surface", "--fray-button-background"),
-  c("--fray-toggle-button-background-checked", "theme", "button", "background", "Selected toggle option", "--fray-selection-background"),
-  c("--fray-tab-button-background", "theme", "button", "background", "Tab surface", "--fray-button-background"),
-  c("--fray-tab-button-background-active", "theme", "button", "background", "Active tab surface", "--fray-tab-active-background"),
-  c("--fray-menu-button-background", "theme", "button", "background", "Menu action surface", "--fray-button-background"),
-  c("--fray-dropdown-trigger-background", "theme", "button", "background", "Dropdown arrow/trigger surface", "--fray-button-background"),
-  c("--fray-table-header-button-background", "theme", "button", "background", "Table-header action surface", "--fray-button-background"),
-  c("--fray-input-background", "theme", "input", "background", "Input surface"),
-  c("--fray-input-color", "theme", "input", "color", "Input content"),
-  c("--fray-input-border", "theme", "input", "border", "Input border"),
-  c("--fray-input-shadow", "theme", "input", "shadow", "Input shadow"),
-  c("--fray-input-background-disabled", "theme", "input", "background", "Disabled input surface"),
-  c("--fray-input-color-disabled", "theme", "input", "color", "Disabled input content"),
-  c("--fray-selection-background", "theme", "selection", "background", "Selected item surface"),
-  c("--fray-selection-color", "theme", "selection", "color", "Selected item content"),
-  c("--fray-row-hover-background", "theme", "row", "background", "Hovered list/table/tree row"),
-  c("--fray-table-row-background", "theme", "table", "background", "Odd table row surface"),
-  c("--fray-table-row-alt-background", "theme", "table", "background", "Even table row surface"),
-  c("--fray-checkbox-box-background", "theme", "checkbox", "background", "Unchecked checkbox box", "--fray-input-background"),
-  c("--fray-checkbox-box-background-checked", "theme", "checkbox", "background", "Checked checkbox box", "--fray-selection-background"),
-  c("--fray-checkbox-box-border", "theme", "checkbox", "border", "Checkbox box border", "--fray-input-border"),
-  c("--fray-checkbox-symbol-color", "theme", "checkbox", "color", "Checkbox symbol", "--fray-selection-color"),
-  c("--fray-radio-background", "theme", "radio", "background", "Radio/toggle option surface", "--fray-toggle-button-background"),
-  c("--fray-radio-background-checked", "theme", "radio", "background", "Selected radio/toggle option", "--fray-selection-background"),
-  c("--fray-toolbar-background", "theme", "toolbar", "background", "Toolbar surface", "--fray-panel-background"),
-  c("--fray-toolbar-color", "theme", "toolbar", "color", "Toolbar content", "--fray-panel-color"),
-  c("--fray-toolbar-border", "theme", "toolbar", "border", "Toolbar border", "--fray-panel-border"),
-  c("--fray-toolbar-shadow", "theme", "toolbar", "shadow", "Toolbar shadow", "--fray-panel-shadow"),
-  c("--fray-tabline-background", "theme", "tabs", "background", "Tab strip surface", "--fray-panel-background"),
-  c("--fray-tab-active-background", "theme", "tabs", "background", "Active tab surface", "--fray-panel-background"),
-  c("--fray-progress-track-background", "theme", "progress", "background", "Progress track"),
-  c("--fray-progress-value-background", "theme", "progress", "background", "Progress value"),
-  c("--fray-working-background-image", "theme", "status", "background", "Indeterminate/loading texture")
-]), Jt = Object.freeze([
-  R("shiny", "Shiny", N("themes/shiny/theme.css")),
-  R("java", "Java", N("themes/java/theme.css")),
-  R("minimal", "Minimal", N("themes/minimal/theme.css"))
+const pr = Object.freeze([
+  ...me("primary"),
+  ...me("secondary"),
+  ...me("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"),
+  d("--palette-secondary", "palette", "secondary", "color", "Secondary anchor color", "--palette-secondary-500"),
+  d("--palette-secondary-light", "palette", "secondary", "color", "Light secondary color", "--palette-secondary-200"),
+  d("--palette-secondary-dark", "palette", "secondary", "color", "Dark secondary color", "--palette-secondary-800"),
+  d("--palette-neutral", "palette", "neutral", "color", "Neutral anchor color", "--palette-neutral-500"),
+  d("--palette-neutral-light", "palette", "neutral", "color", "Light neutral color", "--palette-neutral-200"),
+  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-contrast-light", "palette", "contrast", "color", "Light contrasting foreground", "--palette-light"),
+  d("--palette-contrast-dark", "palette", "contrast", "color", "Dark contrasting foreground", "--palette-dark"),
+  d("--palette-red", "palette", "hue", "color", "Red palette color"),
+  d("--palette-green", "palette", "hue", "color", "Green palette color"),
+  d("--font-family", "theme", "typography", "font", "UI font stack"),
+  d("--font-size", "theme", "typography", "dimension", "Base UI font size"),
+  d("--line-height", "theme", "typography", "dimension", "Base UI line height"),
+  d("--control-min-height", "theme", "control", "dimension", "Minimum control height"),
+  d("--space-xs", "theme", "spacing", "dimension", "Extra-small spacing"),
+  d("--space-sm", "theme", "spacing", "dimension", "Small spacing"),
+  d("--space-md", "theme", "spacing", "dimension", "Medium spacing"),
+  d("--space-lg", "theme", "spacing", "dimension", "Large spacing"),
+  d("--radius-sm", "theme", "shape", "radius", "Small corner radius"),
+  d("--radius-md", "theme", "shape", "radius", "Ordinary corner radius"),
+  d("--radius-lg", "theme", "shape", "radius", "Large corner radius"),
+  d("--motion-fast", "theme", "motion", "duration", "Fast interaction transition"),
+  d("--ui-background", "theme", "surface", "background", "Default UI background"),
+  d("--ui-color", "theme", "surface", "color", "Default UI text"),
+  d("--ui-border", "theme", "surface", "border", "Default UI border"),
+  d("--ui-shadow", "theme", "surface", "shadow", "Default raised shadow"),
+  d("--focus-ring", "theme", "focus", "shadow", "Keyboard focus ring"),
+  d("--focus-color", "theme", "focus", "color", "Keyboard focus color"),
+  d("--error-color", "theme", "status", "color", "Error state color"),
+  d("--error-contrast", "theme", "status", "color", "Content on an error surface"),
+  d("--success-color", "theme", "status", "color", "Success state color"),
+  d("--panel-background", "theme", "panel", "background", "Panel surface", "--ui-background"),
+  d("--panel-color", "theme", "panel", "color", "Panel content", "--ui-color"),
+  d("--panel-border", "theme", "panel", "border", "Panel border", "--ui-border"),
+  d("--panel-shadow", "theme", "panel", "shadow", "Panel shadow", "--ui-shadow"),
+  d("--panel-radius", "theme", "panel", "radius", "Panel radius", "--radius-md"),
+  d("--dialog-shadow", "theme", "dialog", "shadow", "Modal dialog shadow", "--panel-shadow"),
+  d("--dialog-backdrop-background", "theme", "dialog", "background", "Modal backdrop"),
+  d("--header-background", "theme", "header", "background", "Generic header surface"),
+  d("--header-color", "theme", "header", "color", "Generic header content"),
+  d("--header-border", "theme", "header", "border", "Generic header border"),
+  d("--header-shadow", "theme", "header", "shadow", "Generic header shadow"),
+  d("--section-header-background", "theme", "header", "background", "Section header surface", "--header-background"),
+  d("--section-header-color", "theme", "header", "color", "Section header content", "--header-color"),
+  d("--section-header-border", "theme", "header", "border", "Section header border", "--header-border"),
+  d("--section-header-shadow", "theme", "header", "shadow", "Section header shadow", "--header-shadow"),
+  d("--panel-header-background", "theme", "header", "background", "Panel header surface", "--section-header-background"),
+  d("--panel-header-color", "theme", "header", "color", "Panel header content", "--section-header-color"),
+  d("--table-header-background", "theme", "header", "background", "Table header surface", "--section-header-background"),
+  d("--table-header-color", "theme", "header", "color", "Table header content", "--section-header-color"),
+  d("--dialog-header-background", "theme", "header", "background", "Dialog header surface", "--section-header-background"),
+  d("--dialog-header-color", "theme", "header", "color", "Dialog header content", "--section-header-color"),
+  d("--button-background", "theme", "button", "background", "Generic button surface"),
+  d("--button-background-hover", "theme", "button", "background", "Hovered button surface"),
+  d("--button-background-active", "theme", "button", "background", "Pressed button surface"),
+  d("--button-background-disabled", "theme", "button", "background", "Disabled button surface"),
+  d("--button-color", "theme", "button", "color", "Generic button content"),
+  d("--button-border", "theme", "button", "border", "Generic button border"),
+  d("--button-shadow", "theme", "button", "shadow", "Generic button shadow"),
+  d("--button-shadow-active", "theme", "button", "shadow", "Pressed button shadow"),
+  d("--toggle-button-background", "theme", "button", "background", "Toggle option surface", "--button-background"),
+  d("--toggle-button-background-checked", "theme", "button", "background", "Selected toggle option", "--selection-background"),
+  d("--tab-button-background", "theme", "button", "background", "Tab surface", "--button-background"),
+  d("--tab-button-background-active", "theme", "button", "background", "Active tab surface", "--tab-active-background"),
+  d("--menu-button-background", "theme", "button", "background", "Menu action surface", "--button-background"),
+  d("--dropdown-trigger-background", "theme", "button", "background", "Dropdown arrow/trigger surface", "--button-background"),
+  d("--table-header-button-background", "theme", "button", "background", "Table-header action surface", "--button-background"),
+  d("--input-background", "theme", "input", "background", "Input surface"),
+  d("--input-color", "theme", "input", "color", "Input content"),
+  d("--input-border", "theme", "input", "border", "Input border"),
+  d("--input-shadow", "theme", "input", "shadow", "Input shadow"),
+  d("--input-background-disabled", "theme", "input", "background", "Disabled input surface"),
+  d("--input-color-disabled", "theme", "input", "color", "Disabled input content"),
+  d("--selection-background", "theme", "selection", "background", "Selected item surface"),
+  d("--selection-color", "theme", "selection", "color", "Selected item content"),
+  d("--row-hover-background", "theme", "row", "background", "Hovered list/table/tree row"),
+  d("--table-row-background", "theme", "table", "background", "Odd table row surface"),
+  d("--table-row-alt-background", "theme", "table", "background", "Even table row surface"),
+  d("--checkbox-box-background", "theme", "checkbox", "background", "Unchecked checkbox box", "--input-background"),
+  d("--checkbox-box-background-checked", "theme", "checkbox", "background", "Checked checkbox box", "--selection-background"),
+  d("--checkbox-box-border", "theme", "checkbox", "border", "Checkbox box border", "--input-border"),
+  d("--checkbox-symbol-color", "theme", "checkbox", "color", "Checkbox symbol", "--selection-color"),
+  d("--radio-background", "theme", "radio", "background", "Radio/toggle option surface", "--toggle-button-background"),
+  d("--radio-background-checked", "theme", "radio", "background", "Selected radio/toggle option", "--selection-background"),
+  d("--toolbar-background", "theme", "toolbar", "background", "Toolbar surface", "--panel-background"),
+  d("--toolbar-color", "theme", "toolbar", "color", "Toolbar content", "--panel-color"),
+  d("--toolbar-border", "theme", "toolbar", "border", "Toolbar border", "--panel-border"),
+  d("--toolbar-shadow", "theme", "toolbar", "shadow", "Toolbar shadow", "--panel-shadow"),
+  d("--tabline-background", "theme", "tabs", "background", "Tab strip surface", "--panel-background"),
+  d("--tab-active-background", "theme", "tabs", "background", "Active tab surface", "--panel-background"),
+  d("--progress-track-background", "theme", "progress", "background", "Progress track"),
+  d("--progress-value-background", "theme", "progress", "background", "Progress value"),
+  d("--working-background-image", "theme", "status", "background", "Indeterminate/loading texture"),
+  d("--colored-base", "theme", "colored", "color", "Colored-trait base color", "--palette-primary"),
+  d("--colored-light", "theme", "colored", "color", "Colored-trait light color", "--palette-primary-light"),
+  d("--colored-dark", "theme", "colored", "color", "Colored-trait dark color", "--palette-primary-dark"),
+  d("--colored-contrast", "theme", "colored", "color", "Colored-trait foreground", "--palette-contrast-light")
 ]), Yt = Object.freeze([
-  R("iceblue", "Ice blue", N("colors/iceblue/colors.css")),
-  R("ocean", "Ocean", N("colors/ocean/colors.css")),
-  R("green", "Green", N("colors/green/colors.css")),
-  R("gray", "Gray", N("colors/gray/colors.css")),
-  R("orange", "Orange", N("colors/orange/colors.css")),
-  R("purple", "Purple", N("colors/purple/colors.css")),
-  R("red", "Red", N("colors/red/colors.css")),
-  R("yellow", "Yellow", N("colors/yellow/colors.css"))
+  N("shiny", "Shiny", $("themes/shiny/theme.css")),
+  N("java", "Java", $("themes/java/theme.css")),
+  N("minimal", "Minimal", $("themes/minimal/theme.css"))
+]), Xt = Object.freeze([
+  N("iceblue", "Ice blue", $("colors/iceblue/colors.css")),
+  N("ocean", "Ocean", $("colors/ocean/colors.css")),
+  N("green", "Green", $("colors/green/colors.css")),
+  N("gray", "Gray", $("colors/gray/colors.css")),
+  N("orange", "Orange", $("colors/orange/colors.css")),
+  N("purple", "Purple", $("colors/purple/colors.css")),
+  N("red", "Red", $("colors/red/colors.css")),
+  N("yellow", "Yellow", $("colors/yellow/colors.css"))
 ]);
-function _t(t, r, e = globalThis.document) {
-  if (Xt(r), (e == null ? void 0 : e.head) == null || e.documentElement == null)
+function Zt(t, r, e = globalThis.document) {
+  if (er(r), (e == null ? void 0 : e.head) == null || e.documentElement == null)
     throw new TypeError("replaceFrayStylesheet requires a document with a head and root");
-  const a = `link[data-fray-stylesheet="${t}"]`;
-  let i = e.head.querySelector(a);
-  return i == null && (i = e.createElement("link"), i.rel = "stylesheet", i.dataset.frayStylesheet = t, e.head.append(i)), i.dataset.fraySelection = r.value, i.getAttribute("href") !== r.href && i.setAttribute("href", r.href), t === "theme" ? e.documentElement.dataset.frayTheme = r.value : e.documentElement.dataset.frayColor = r.value, i;
+  const i = `link[data-fray-stylesheet="${t}"]`;
+  let s = e.head.querySelector(i);
+  return s == null && (s = e.createElement("link"), s.rel = "stylesheet", s.dataset.frayStylesheet = t, e.head.append(s)), s.dataset.fraySelection = r.value, s.getAttribute("href") !== r.href && s.setAttribute("href", r.href), t === "theme" ? e.documentElement.dataset.theme = r.value : e.documentElement.dataset.color = r.value, s;
 }
-function ae(t, r) {
-  const e = t.find((a) => a.value === r);
+function re(t, r) {
+  const e = t.find((i) => i.value === r);
   if (e == null) throw new RangeError(`Unknown Fray stylesheet selection: ${r}`);
   return e;
 }
-function c(t, r, e, a, i, n) {
-  return n == null ? Object.freeze({ name: t, layer: r, family: e, value: a, description: i }) : Object.freeze({ name: t, layer: r, family: e, value: a, description: i, fallback: n });
+function d(t, r, e, i, s, n) {
+  return n == null ? Object.freeze({ name: t, layer: r, family: e, value: i, description: s }) : Object.freeze({ name: t, layer: r, family: e, value: i, description: s, fallback: n });
+}
+function me(t) {
+  return [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map((r) => {
+    var e;
+    return d(
+      `--palette-${t}-${r}`,
+      "palette",
+      t,
+      "color",
+      `${(e = t[0]) == null ? void 0 : e.toUpperCase()}${t.slice(1)} palette stop ${r}`
+    );
+  });
 }
-function R(t, r, e) {
+function N(t, r, e) {
   return Object.freeze({ value: t, label: r, href: e });
 }
-function N(t) {
+function $(t) {
   const r = import.meta.url.includes("/src/styling/") ? `../../${t}` : `../${t}`;
   return new URL(r, import.meta.url).href;
 }
-function Xt(t) {
+function er(t) {
   if (t == null || typeof t != "object")
     throw new TypeError("Fray stylesheet selection must be an option");
   for (const r of ["value", "label", "href"])
     if (typeof Reflect.get(t, r) != "string" || String(Reflect.get(t, r)).length === 0)
       throw new TypeError(`Fray stylesheet option ${r} must be a non-empty string`);
 }
-class oe extends g {
-  constructor(e, a, i) {
+class oe extends y {
+  constructor(e, i, s) {
     var l;
     super(e);
-    s(this, "valueEmitter");
-    s(this, "inputId");
-    s(this, "kind");
-    s(this, "defaults");
-    const n = e.options ?? i;
-    Me(n);
-    const o = (l = n[0]) == null ? void 0 : l.value;
-    if (o == null) throw new TypeError(`${a} picker requires at least one option`);
-    this.kind = a, this.defaults = i, this.inputId = j(`${a}-picker`, e.id), this.valueEmitter = M(this, e, o, `${a} selection`), ae(n, this.valueEmitter.get());
+    o(this, "valueEmitter");
+    o(this, "inputId");
+    o(this, "kind");
+    o(this, "defaults");
+    const n = e.options ?? s;
+    ze(n);
+    const a = (l = n[0]) == null ? void 0 : l.value;
+    if (a == null) throw new TypeError(`${i} picker requires at least one option`);
+    this.kind = i, this.defaults = s, this.inputId = F(`${i}-picker`, e.id), this.valueEmitter = z(this, e, a, `${i} selection`), re(n, this.valueEmitter.get());
   }
   initialize() {
     this.watch(this.valueEmitter);
   }
   render() {
-    const e = this.options, a = ae(e, this.valueEmitter.get()), { label: i, ariaLabel: n, disabled: o = !1, onChange: l } = this.props, d = this.Host;
+    const e = this.options, i = re(e, this.valueEmitter.get()), { label: s, ariaLabel: n, disabled: a = !1, onChange: l } = this.props, c = this.Host;
     return /* @__PURE__ */ w(
-      d,
+      c,
       {
-        className: E(this.props) || null,
+        className: R("selectshell", E(this.props)),
         "data-kind": this.kind,
-        "data-disabled": o ? "" : null,
+        "data-disabled": a ? "" : null,
         children: [
-          i == null ? null : /* @__PURE__ */ u("label", { htmlFor: this.inputId, children: i }),
+          s == null ? null : /* @__PURE__ */ u("label", { htmlFor: this.inputId, children: s }),
           /* @__PURE__ */ u(
             "select",
             {
               id: this.inputId,
-              "data-part": "control",
-              value: a.value,
-              disabled: o,
-              "aria-label": i == null ? n : null,
+              value: i.value,
+              disabled: a,
+              "aria-label": s == null ? n : null,
               onChange: (h) => {
-                const f = Zt(h), m = ae(e, f);
-                this.valueEmitter.set(f, `${this.kind} selected`), C(l, f, m, h);
+                const p = tr(h), f = re(e, p);
+                this.valueEmitter.set(p, `${this.kind} selected`), K(l, p, f, h);
               },
               children: e.map((h) => /* @__PURE__ */ u(
                 "option",
                 {
                   value: h.value,
-                  selected: h.value === a.value,
+                  selected: h.value === i.value,
                   children: h.label
                 },
                 h.value
@@ -3124,23 +2931,21 @@ class oe extends g {
   }
   get options() {
     const e = this.props.options ?? this.defaults;
-    return Me(e), e;
+    return ze(e), e;
   }
   applySelection() {
     const e = this.props.targetDocument ?? (typeof document > "u" ? null : document);
-    e != null && _t(
+    e != null && Zt(
       this.kind,
-      ae(this.options, this.valueEmitter.get()),
+      re(this.options, this.valueEmitter.get()),
       e
     );
   }
 }
-s(oe, "baseStyles", [
+o(oe, "baseStyles", [
   ["&", ["labeledinput", "inputline"]],
-  ["& > label", ["label"]],
-  ["& > select", ["input", "inputline"]],
-  ["&[data-disabled]", ["disabled"]]
-]), s(oe, "css", v`
+  ["& > select", ["input", "inputline"]]
+]), o(oe, "css", S`
         & {
             position: relative;
         }
@@ -3149,118 +2954,118 @@ s(oe, "baseStyles", [
             min-width: 8rem;
         }
     `);
-class Fe extends oe {
+class He extends oe {
   constructor(r = {}) {
-    super(r, "theme", Jt);
+    super(r, "theme", Yt);
   }
 }
-s(Fe, "hostName", "theme-picker"), s(Fe, "standaloneHostName", "theme-picker");
-class He extends oe {
+o(He, "hostName", "theme-picker"), o(He, "standaloneHostName", "theme-picker");
+class Me extends oe {
   constructor(r = {}) {
-    super(r, "colors", Yt);
+    super(r, "colors", Xt);
   }
 }
-s(He, "hostName", "color-picker"), s(He, "standaloneHostName", "color-picker");
-function Me(t) {
+o(Me, "hostName", "color-picker"), o(Me, "standaloneHostName", "color-picker");
+function ze(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();
   for (const e of t) {
     if (e == null || typeof e != "object")
       throw new TypeError("Stylesheet picker options must be objects");
-    for (const a of ["value", "label", "href"])
-      if (typeof e[a] != "string" || e[a].length === 0)
-        throw new TypeError(`Stylesheet picker option ${a} must be a string`);
+    for (const i of ["value", "label", "href"])
+      if (typeof e[i] != "string" || e[i].length === 0)
+        throw new TypeError(`Stylesheet picker option ${i} must be a string`);
     if (r.has(e.value))
       throw new Error(`Duplicate stylesheet picker value: ${e.value}`);
     r.add(e.value);
   }
 }
-function Zt(t) {
+function tr(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;
 }
 export {
-  Be as BaseSelectionHandler,
-  se as Button,
+  Ge as BaseSelectionHandler,
+  ne as Button,
   D as Checkbox,
-  He as ColorPicker,
-  g as Component,
+  Me as ColorPicker,
+  y as Component,
   X as DataTable,
-  St as DefaultTableFilterEncoding,
-  Ue as DescriptionItem,
-  Te as DescriptionList,
+  xt as DefaultTableFilterEncoding,
+  Pe as DescriptionItem,
+  Re as DescriptionList,
   Oe as Dialog,
   ee as Dropdown,
   b as FilterMode,
-  V as FilterPanel,
-  pr as Fragment,
-  mr as FrayRuntime,
-  G as ListView,
-  st as MultiSelectionHandler,
-  _ as Panel,
-  H as Placeholder,
-  he as ProgressBar,
-  $e as QuadCheckbox,
-  br as ServiceScope,
-  xe as Sidebar,
-  ge as SingleSelectionHandler,
-  ce as SplitView,
-  yr as StyleRegistry,
-  ze as Tab,
-  L as TabLine,
-  J as TabPanel,
-  me as TableHeader,
-  W as TableHeaderCell,
+  U as FilterPanel,
+  br as Fragment,
+  gr as FrayRuntime,
+  Q as ListView,
+  lt as MultiSelectionHandler,
+  ce as Panel,
+  M as Placeholder,
+  pe as ProgressBar,
+  Ce as QuadCheckbox,
+  yr as ServiceScope,
+  st as Sidebar,
+  Ee as SingleSelectionHandler,
+  de as SplitView,
+  wr as StyleRegistry,
+  qe as Tab,
+  V as TabLine,
+  _ as TabPanel,
+  ge as TableHeader,
+  J as TableHeaderCell,
   te as Textbox,
-  Fe as ThemePicker,
+  He as ThemePicker,
   Ae as Toggle,
-  re as Toolbar,
-  We as TreeItem,
+  he as Toolbar,
+  Je as TreeItem,
   Z as TreeView,
-  Ce as TriCheckbox,
-  It as applyLocalTableState,
-  Ge as assertSort,
-  P as assertTreeNodes,
-  gr as createFrayRuntime,
-  Ot as createHandlerTableDataSource,
-  Dt as createLocalTableDataSource,
-  or as createQueryTableDataSource,
-  $t as createRestTableDataSource,
-  ne as createSelectionHandler,
-  wr as createServiceScope,
-  Er as createStyleRegistry,
-  v as css,
-  vr as defaultFrayRuntime,
-  we as defaultItemKey,
-  Sr as defineService,
-  ar as deriveFilterPredicate,
-  ir as deriveFilteredItems,
-  dr as deriveTreeNode,
-  it as filterByState,
-  ae as findFrayStylesheetOption,
-  lr as findTreeNode,
-  Yt as frayColorOptions,
-  Jt as frayThemeOptions,
-  ur as frayThemeVariableCatalog,
-  kr as h,
-  de as isFilterMode,
+  Ke as TriCheckbox,
+  Tt as applyLocalTableState,
+  Qe as assertSort,
+  B as assertTreeNodes,
+  Er as createFrayRuntime,
+  Ct as createHandlerTableDataSource,
+  Ot as createLocalTableDataSource,
+  cr as createQueryTableDataSource,
+  Kt as createRestTableDataSource,
+  se as createSelectionHandler,
+  Sr as createServiceScope,
+  Ir as createStyleRegistry,
+  S as css,
+  kr as defaultFrayRuntime,
+  Se as defaultItemKey,
+  xr as defineService,
+  nr as deriveFilterPredicate,
+  or as deriveFilteredItems,
+  ur as deriveTreeNode,
+  ot as filterByState,
+  re as findFrayStylesheetOption,
+  dr as findTreeNode,
+  Xt as frayColorOptions,
+  Yt as frayThemeOptions,
+  pr as frayThemeVariableCatalog,
+  vr as h,
+  le as isFilterMode,
   u as jsx,
-  Ir as jsxDEV,
+  Tr as jsxDEV,
   w as jsxs,
-  xr as live,
-  Pe as matchesFilterState,
-  sr as parseFilterState,
-  Tr as provideService,
-  _t as replaceFrayStylesheet,
-  nr as serializeFilterState,
-  kt as serializeTableQuery,
-  Rr as styleRegistry,
-  qe as tabButtonId,
-  Le as tabPanelId,
-  Mt as updateTreeNode,
-  cr as updateWritableTreeNode
+  Rr as live,
+  Be as matchesFilterState,
+  lr as parseFilterState,
+  Nr as provideService,
+  Zt as replaceFrayStylesheet,
+  ar as serializeFilterState,
+  vt as serializeTableQuery,
+  $r as styleRegistry,
+  Le as tabButtonId,
+  Ve as tabPanelId,
+  qt as updateTreeNode,
+  hr as updateWritableTreeNode
 };
 //# sourceMappingURL=index.js.map