@sylwellsoftware/fray 0.1.0-alpha.1 → 0.3.0

package/dist/index.js

@@ -1,163 +1,207 @@
-var nt = Object.defineProperty;
-var st = (n, s, t) => s in n ? nt(n, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[s] = t;
-var a = (n, s, t) => st(n, typeof s != "symbol" ? s + "" : s, t);
-import { C as p, j as c, c as m, a as g, i as K } from "./jsx-dev-runtime-CarwHDyL.js";
-import { F as vt, b as yt, S as wt, d as Et, e as xt, f as It, h as Nt, g as St, l as Ht, s as Tt } from "./jsx-dev-runtime-CarwHDyL.js";
-import { a as T, i as H, c as b, b as x, C as Z, F as v, d as B } from "./button-BRDkmR1C.js";
-import { B as Rt } from "./button-BRDkmR1C.js";
-import { Emitter as ot } from "@sylwellsoftware/glue";
-class Q extends p {
+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-DukiDpV9.js";
+import { F as pr, b as mr, S as br, d as yr, e as gr, f as wr, h as Er, g as vr, l as Sr, s as kr } from "./jsx-dev-runtime-DukiDpV9.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 {
   render() {
     return this.props.children ?? [];
   }
 }
-class I extends p {
-  constructor(t = {}) {
-    var e;
-    super(t);
-    a(this, "valueEmitter");
-    a(this, "activeTabEmitter");
-    const r = t.tabs ?? [];
-    M(r);
-    const i = { ...t };
-    i.valueEmitter == null && t.activeTabEmitter != null && (i.valueEmitter = t.activeTabEmitter), i.defaultValue == null && t.initialActiveTabId != null && (i.defaultValue = t.initialActiveTabId), this.valueEmitter = T(
+const y = {
+  /** Deny mode: Excludes items that match the filter. */
+  Deny: "deny",
+  /** Require mode: Includes only items that match the filter. */
+  Require: "require",
+  /** Prefer mode: If there are any filter options that are set to Prefer, at least one of the preferred filter options must match. Otherwise, it is treated as Neutral. */
+  Prefer: "prefer",
+  /** Neutral mode: Does not affect the inclusion or exclusion of items. */
+  Neutral: "neutral"
+};
+function de(t) {
+  return Object.values(y).some((r) => r === t);
+}
+let et = 1;
+function j(t, r) {
+  return r != null && String(r).length > 0 ? String(r) : `fray-${t}-${et++}`;
+}
+function M(t, r, e, a) {
+  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);
+}
+function tt(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 E(t) {
+  return t.className ?? t.class ?? "";
+}
+function C(t, ...r) {
+  if (t != null) {
+    if (typeof t != "function") throw new TypeError("Control callback must be a function");
+    t(...r);
+  }
+}
+function fe(t, r = "options") {
+  if (!Array.isArray(t)) throw new TypeError(`${r} must be an array`);
+}
+function rt(t) {
+  return de(t) ? t : String(t);
+}
+class L extends g {
+  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(
       this,
       i,
-      ((e = r.find((l) => !l.disabled)) == null ? void 0 : e.id) ?? null,
+      ((n = a.find((o) => !o.disabled)) == null ? void 0 : n.id) ?? null,
       "active tab"
     ), this.activeTabEmitter = this.valueEmitter;
   }
   initialize() {
     this.watch(this.valueEmitter);
   }
-  selectTab(t, r = null) {
-    t == null || t.disabled || (this.valueEmitter.set(t.id, "tab selected"), H(this.props.onChange, t.id, r));
+  selectTab(e, a = null) {
+    e == null || e.disabled || (this.valueEmitter.set(e.id, "tab selected"), C(this.props.onChange, e.id, a));
   }
   render() {
-    const { tabs: t = [], label: r = "Sections", baseId: i = "fray-tabs" } = this.props;
-    M(t);
-    const e = this.valueEmitter.get(), l = this.Host;
-    return /* @__PURE__ */ c(
-      l,
+    const { tabs: e = [], label: a = "Sections", baseId: i = "fray-tabs" } = this.props;
+    Ie(e);
+    const n = this.valueEmitter.get(), o = this.Host;
+    return /* @__PURE__ */ u(
+      o,
       {
         role: "tablist",
-        className: b(this.props) || null,
-        "aria-label": r,
-        children: t.map((o, d) => /* @__PURE__ */ c(
+        className: E(this.props) || null,
+        "aria-label": a,
+        children: e.map((l, d) => /* @__PURE__ */ u(
           "button",
           {
-            id: _(i, o.id),
+            id: qe(i, l.id),
             type: "button",
             role: "tab",
-            disabled: !!o.disabled,
+            disabled: !!l.disabled,
             "data-part": "tab",
-            "aria-selected": Object.is(e, o.id) ? "true" : "false",
-            "aria-controls": tt(i, o.id),
-            tabIndex: Object.is(e, o.id) ? 0 : -1,
-            onClick: (u) => this.selectTab(o, u),
-            onKeyDown: (u) => this.handleKeyDown(u, d, t),
-            children: o.label ?? String(o.id)
+            "aria-selected": Object.is(n, l.id) ? "true" : "false",
+            "aria-controls": Le(i, l.id),
+            tabIndex: Object.is(n, l.id) ? 0 : -1,
+            onClick: (h) => this.selectTab(l, h),
+            onKeyDown: (h) => this.handleKeyDown(h, d, e),
+            children: l.label ?? String(l.id)
           },
-          String(o.id)
+          String(l.id)
         ))
       }
     );
   }
-  handleKeyDown(t, r, i) {
-    const e = i.map((d, u) => ({ tab: d, tabIndex: u })).filter(({ tab: d }) => !d.disabled);
-    if (e.length === 0) return;
-    const l = Math.max(
+  handleKeyDown(e, a, i) {
+    const n = i.map((d, h) => ({ tab: d, tabIndex: h })).filter(({ tab: d }) => !d.disabled);
+    if (n.length === 0) return;
+    const o = Math.max(
       0,
-      e.findIndex(({ tabIndex: d }) => d === r)
+      n.findIndex(({ tabIndex: d }) => d === a)
     );
-    let o;
-    if (t.key === "ArrowRight" || t.key === "ArrowDown")
-      o = e[(l + 1) % e.length];
-    else if (t.key === "ArrowLeft" || t.key === "ArrowUp")
-      o = e[(l - 1 + e.length) % e.length];
-    else if (t.key === "Home") o = e[0];
-    else if (t.key === "End") o = e.at(-1);
+    let l;
+    if (e.key === "ArrowRight" || e.key === "ArrowDown")
+      l = n[(o + 1) % n.length];
+    else if (e.key === "ArrowLeft" || e.key === "ArrowUp")
+      l = n[(o - 1 + n.length) % n.length];
+    else if (e.key === "Home") l = n[0];
+    else if (e.key === "End") l = n.at(-1);
     else return;
-    if (o != null && (t.preventDefault(), this.selectTab(o.tab, t), this.dom instanceof Element)) {
-      const d = this.dom.querySelectorAll('[role="tab"]')[o.tabIndex];
+    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();
     }
   }
 }
-a(I, "hostName", "tab-line"), a(I, "standaloneHostName", "tab-line"), a(I, "baseStyles", [
+s(L, "hostName", "tab-line"), s(L, "standaloneHostName", "tab-line"), s(L, "baseStyles", [
   ['& > [data-part="tab"]', ["uiline", "button"]]
-]), a(I, "css", m`
+]), s(L, "css", v`
         & {
             display: flex;
             flex-flow: row wrap;
             padding-top: 3px;
-            background: var(--tabline-bg, #f5f5f5);
+            background: var(--fray-tabline-background, var(--tabline-bg));
         }
 
         & > [data-part="tab"] {
-            border-radius: var(--ui-border-radius) var(--ui-border-radius) 0 0;
+            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(--tab-bg-active, var(--panel-bg, #fff));
+            background: var(
+                --fray-tab-button-background-active,
+                var(--fray-tab-active-background, var(--tab-bg-active))
+            );
         }
     `);
-function _(n, s) {
-  return `${n}-tab-${et(s)}`;
+function qe(t, r) {
+  return `${t}-tab-${Ve(r)}`;
 }
-function tt(n, s) {
-  return `${n}-panel-${et(s)}`;
+function Le(t, r) {
+  return `${t}-panel-${Ve(r)}`;
 }
-function et(n) {
-  return encodeURIComponent(String(n)).replaceAll("%", "-");
+function Ve(t) {
+  return encodeURIComponent(String(t)).replaceAll("%", "-");
 }
-function M(n) {
-  if (!Array.isArray(n)) throw new TypeError("TabLine tabs must be an array");
-  const s = /* @__PURE__ */ new Set();
-  for (const t of n) {
-    if (t == null || t.id == null) throw new TypeError("Each tab requires an id");
-    if (s.has(t.id)) throw new Error(`Duplicate tab id: ${String(t.id)}`);
-    s.add(t.id);
+function Ie(t) {
+  if (!Array.isArray(t)) throw new TypeError("TabLine tabs must be an array");
+  const r = /* @__PURE__ */ new Set();
+  for (const e of t) {
+    if (e == null || e.id == null) throw new TypeError("Each tab requires an id");
+    if (r.has(e.id)) throw new Error(`Duplicate tab id: ${String(e.id)}`);
+    r.add(e.id);
   }
 }
-class z extends p {
-  constructor(t = {}) {
-    var e;
-    super(t);
-    a(this, "valueEmitter");
-    a(this, "activeTabEmitter");
-    a(this, "baseId");
-    const r = O(t), i = { ...t };
-    i.valueEmitter == null && t.activeTabEmitter != null && (i.valueEmitter = t.activeTabEmitter), i.defaultValue == null && t.initialActiveTabId != null && (i.defaultValue = t.initialActiveTabId), this.valueEmitter = T(
+class J extends g {
+  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(
       this,
       i,
-      ((e = r.find((l) => !l.disabled)) == null ? void 0 : e.id) ?? null,
+      ((n = a.find((o) => !o.disabled)) == null ? void 0 : n.id) ?? null,
       "active tab"
-    ), this.activeTabEmitter = this.valueEmitter, this.baseId = x("tabs", t.id);
+    ), this.activeTabEmitter = this.valueEmitter, this.baseId = j("tabs", e.id);
   }
   initialize() {
-    var r;
-    const t = O(this.props);
-    t.some(({ id: i }) => Object.is(i, this.valueEmitter.get())) || this.valueEmitter.set(((r = t.find((i) => !i.disabled)) == null ? void 0 : r.id) ?? null), this.watch(this.valueEmitter);
+    var a;
+    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);
   }
-  setProps(t) {
+  setProps(e) {
     var i;
-    super.setProps(t);
-    const r = O(t);
-    return r.some(({ id: e }) => Object.is(e, this.valueEmitter.get())) || this.valueEmitter.set(((i = r.find((e) => !e.disabled)) == null ? void 0 : i.id) ?? null), this;
+    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;
   }
   render() {
-    const t = O(this.props), r = t.find(({ id: e }) => Object.is(e, this.valueEmitter.get())) ?? t.find((e) => !e.disabled) ?? null, i = this.Host;
-    return /* @__PURE__ */ g(
+    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;
+    return /* @__PURE__ */ w(
       i,
       {
         id: this.baseId,
-        className: b(this.props) || null,
+        className: E(this.props) || null,
         children: [
-          /* @__PURE__ */ c(
-            I,
+          /* @__PURE__ */ u(
+            L,
             {
-              tabs: t.map(({ id: e, label: l, disabled: o }) => ({ id: e, label: l, disabled: o })),
+              tabs: e.map(({ id: n, label: o, disabled: l }) => ({ id: n, label: o, disabled: l })),
               valueEmitter: this.valueEmitter,
               baseId: this.baseId,
               ...this.props.label == null ? {} : { label: this.props.label },
@@ -165,33 +209,33 @@ class z extends p {
             },
             "tab-list"
           ),
-          r == null ? null : /* @__PURE__ */ c(
+          a == null ? null : /* @__PURE__ */ u(
             "div",
             {
-              id: tt(this.baseId, r.id),
+              id: Le(this.baseId, a.id),
               role: "tabpanel",
               "data-part": "content",
-              "aria-labelledby": _(this.baseId, r.id),
+              "aria-labelledby": qe(this.baseId, a.id),
               tabIndex: 0,
-              children: r.content
+              children: a.content
             },
-            String(r.id)
+            String(a.id)
           )
         ]
       }
     );
   }
 }
-a(z, "dependencies", [I, Q]), a(z, "hostName", "tab-panel"), a(z, "standaloneHostName", "tab-panel"), a(z, "css", m`
+s(J, "dependencies", [L, ze]), s(J, "hostName", "tab-panel"), s(J, "standaloneHostName", "tab-panel"), s(J, "css", v`
         & {
             display: flex;
             flex-direction: column;
             width: 100%;
             min-height: 0;
             overflow: hidden;
-            background: var(--panel-bg, white);
-            border-radius: var(--panel-radius, var(--ui-border-radius));
-            box-shadow: var(--panel-shadow, none);
+            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"] {
@@ -199,75 +243,75 @@ a(z, "dependencies", [I, Q]), a(z, "hostName", "tab-panel"), a(z, "standaloneHos
             flex-direction: column;
             flex: 1;
             overflow: auto;
-            background: var(--panel-bg, white);
+            background: var(--fray-panel-background, var(--panel-bg, transparent));
         }
     `);
-function O(n) {
-  const s = n.tabs ?? [];
-  if (!Array.isArray(s)) throw new TypeError("TabPanel tabs must be an array");
-  const r = (Array.isArray(n.children) ? n.children : n.children == null ? [] : [n.children]).filter((l) => K(l) && l.type === Q).map((l, o) => {
-    if (!K(l)) throw new TypeError("TabPanel children must be Tab nodes");
-    const d = l.props;
+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;
     return {
-      id: d.id ?? `tab-${o + 1}`,
-      label: d.label ?? `Tab ${o + 1}`,
+      id: d.id ?? `tab-${l + 1}`,
+      label: d.label ?? `Tab ${l + 1}`,
       disabled: !!d.disabled,
       content: d.children ?? []
     };
-  }), i = s.length > 0 ? s.map((l) => ({
-    ...l,
-    label: l.label ?? String(l.id),
-    disabled: !!l.disabled,
-    content: l.content ?? l.component ?? []
-  })) : r, e = /* @__PURE__ */ new Set();
-  for (const l of i) {
-    if ((l == null ? void 0 : l.id) == null) throw new TypeError("Each tab requires an id");
-    if (e.has(l.id)) throw new Error(`Duplicate tab id: ${String(l.id)}`);
-    e.add(l.id);
+  }), 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 p {
-  constructor(t = {}) {
-    super(t);
-    a(this, "panelId");
-    a(this, "headerId");
-    this.panelId = x("panel", t.id), this.headerId = `${this.panelId}-title`;
+class _ extends g {
+  constructor(e = {}) {
+    super(e);
+    s(this, "panelId");
+    s(this, "headerId");
+    this.panelId = j("panel", e.id), this.headerId = `${this.panelId}-title`;
   }
   render() {
     const {
-      header: t = null,
-      toolbar: r = null,
+      header: e = null,
+      toolbar: a = null,
       children: i = [],
-      orientation: e = "vertical",
-      disabled: l = !1
+      orientation: n = "vertical",
+      disabled: o = !1
     } = this.props;
-    if (!["horizontal", "vertical"].includes(e))
+    if (!["horizontal", "vertical"].includes(n))
       throw new TypeError("Panel orientation must be horizontal or vertical");
-    const o = this.Host, d = t == null ? null : /* @__PURE__ */ c("header", { "data-part": "header", children: typeof t == "string" || typeof t == "number" ? /* @__PURE__ */ c("h2", { id: this.headerId, children: t }) : /* @__PURE__ */ c("div", { id: this.headerId, children: t }) });
-    return /* @__PURE__ */ g(
-      o,
+    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 }) });
+    return /* @__PURE__ */ w(
+      l,
       {
         id: this.panelId,
-        role: t == null ? null : "region",
-        className: b(this.props) || null,
-        "data-orientation": e,
-        "data-disabled": l ? "" : null,
-        "aria-disabled": l ? "true" : null,
-        "aria-labelledby": t == null ? null : this.headerId,
+        role: e == null ? null : "region",
+        className: E(this.props) || null,
+        "data-orientation": n,
+        "data-disabled": o ? "" : null,
+        "aria-disabled": o ? "true" : null,
+        "aria-labelledby": e == null ? null : this.headerId,
         children: [
           d,
-          r,
-          /* @__PURE__ */ c("div", { "data-part": "content", "data-orientation": e, children: i })
+          a,
+          /* @__PURE__ */ u("div", { "data-part": "content", "data-orientation": n, children: i })
         ]
       }
     );
   }
 }
-a($, "hostName", "panel"), a($, "standaloneHostName", "layout-panel"), a($, "baseStyles", [
+s(_, "hostName", "panel"), s(_, "standaloneHostName", "layout-panel"), s(_, "baseStyles", [
   ["&", ["panel"]],
   ['& > [data-part="header"]', ["sectionheader"]]
-]), a($, "css", m`
+]), s(_, "css", v`
         & {
             display: flex;
             flex-direction: column;
@@ -280,6 +324,19 @@ a($, "hostName", "panel"), a($, "standaloneHostName", "layout-panel"), a($, "bas
             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;
@@ -296,41 +353,41 @@ a($, "hostName", "panel"), a($, "standaloneHostName", "layout-panel"), a($, "bas
             flex-direction: column;
         }
     `);
-class P extends p {
-  constructor(t = {}) {
-    super(t);
-    a(this, "sidebarId");
-    a(this, "headerId");
-    this.sidebarId = x("sidebar", t.id), this.headerId = `${this.sidebarId}-title`;
+class xe extends g {
+  constructor(e = {}) {
+    super(e);
+    s(this, "sidebarId");
+    s(this, "headerId");
+    this.sidebarId = j("sidebar", e.id), this.headerId = `${this.sidebarId}-title`;
   }
   render() {
     const {
-      header: t = null,
-      toolbar: r = null,
+      header: e = null,
+      toolbar: a = null,
       ariaLabel: i,
-      children: e = []
-    } = this.props, l = t == null ? null : /* @__PURE__ */ c("header", { "data-part": "header", children: typeof t == "string" || typeof t == "number" ? /* @__PURE__ */ c("h2", { id: this.headerId, children: t }) : /* @__PURE__ */ c("div", { id: this.headerId, children: t }) });
-    return /* @__PURE__ */ g(
+      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 }) });
+    return /* @__PURE__ */ w(
       "aside",
       {
         id: this.sidebarId,
-        className: b(this.props) || void 0,
+        className: E(this.props) || void 0,
         "data-fray-component": "sidebar",
-        "aria-label": t == null ? i : null,
-        "aria-labelledby": t == null ? null : this.headerId,
+        "aria-label": e == null ? i : null,
+        "aria-labelledby": e == null ? null : this.headerId,
         children: [
-          l,
-          r == null ? null : /* @__PURE__ */ c("div", { "data-part": "toolbar", children: r }),
-          /* @__PURE__ */ c("div", { "data-part": "content", tabIndex: 0, children: e })
+          o,
+          a == null ? null : /* @__PURE__ */ u("div", { "data-part": "toolbar", children: a }),
+          /* @__PURE__ */ u("div", { "data-part": "content", tabIndex: 0, children: n })
         ]
       }
     );
   }
 }
-a(P, "baseStyles", [
+s(xe, "baseStyles", [
   ['aside[data-fray-component="sidebar"]', ["panel"]],
   ['aside[data-fray-component="sidebar"] > [data-part="header"]', ["sectionheader"]]
-]), a(P, "css", m`
+]), s(xe, "css", v`
         aside[data-fray-component="sidebar"] {
             display: flex;
             flex-direction: column;
@@ -357,44 +414,44 @@ a(P, "baseStyles", [
             overflow-y: auto;
         }
     `);
-class F extends p {
+class ce extends g {
   render() {
     const {
-      primary: s = null,
-      secondary: t = null,
-      direction: r = "horizontal",
+      primary: r = null,
+      secondary: e = null,
+      direction: a = "horizontal",
       primarySize: i,
-      primaryLabel: e,
-      secondaryLabel: l
+      primaryLabel: n,
+      secondaryLabel: o
     } = this.props;
-    if (r !== "horizontal" && r !== "vertical")
+    if (a !== "horizontal" && a !== "vertical")
       throw new TypeError("SplitView direction must be horizontal or vertical");
     if (i != null && (typeof i != "string" || i.length === 0))
       throw new TypeError("SplitView primarySize must be a non-empty CSS size");
-    const o = this.Host;
-    return /* @__PURE__ */ g(
-      o,
+    const l = this.Host;
+    return /* @__PURE__ */ w(
+      l,
       {
-        className: b(this.props) || null,
-        "data-direction": r,
+        className: E(this.props) || null,
+        "data-direction": a,
         style: i == null ? void 0 : { "--split-primary-size": i },
         children: [
-          /* @__PURE__ */ c(
+          /* @__PURE__ */ u(
             "div",
             {
               "data-part": "primary",
-              role: e == null ? null : "region",
-              "aria-label": e,
-              children: s
+              role: n == null ? null : "region",
+              "aria-label": n,
+              children: r
             }
           ),
-          /* @__PURE__ */ c(
+          /* @__PURE__ */ u(
             "div",
             {
               "data-part": "secondary",
-              role: l == null ? null : "region",
-              "aria-label": l,
-              children: t ?? this.props.children ?? []
+              role: o == null ? null : "region",
+              "aria-label": o,
+              children: e ?? this.props.children ?? []
             }
           )
         ]
@@ -402,7 +459,7 @@ class F extends p {
     );
   }
 }
-a(F, "hostName", "split-view"), a(F, "standaloneHostName", "split-view"), a(F, "css", m`
+s(ce, "hostName", "split-view"), s(ce, "standaloneHostName", "split-view"), s(ce, "css", v`
         & {
             display: grid;
             flex: 1 1 auto;
@@ -437,23 +494,23 @@ a(F, "hostName", "split-view"), a(F, "standaloneHostName", "split-view"), a(F, "
             border-block-end: 1px solid var(--ui-border-color);
         }
     `);
-class at extends p {
+class Ue extends g {
   render() {
-    const { term: s, value: t, children: r = [] } = this.props;
-    return /* @__PURE__ */ g(
+    const { term: r, value: e, children: a = [] } = this.props;
+    return /* @__PURE__ */ w(
       "div",
       {
-        className: b(this.props) || void 0,
+        className: E(this.props) || void 0,
         "data-fray-component": "description-item",
         children: [
-          /* @__PURE__ */ c("dt", { children: s }),
-          /* @__PURE__ */ c("dd", { children: t ?? r })
+          /* @__PURE__ */ u("dt", { children: r }),
+          /* @__PURE__ */ u("dd", { children: e ?? a })
         ]
       }
     );
   }
 }
-a(at, "css", m`
+s(Ue, "css", v`
         div[data-fray-component="description-item"] {
             display: grid;
             grid-template-columns: minmax(7rem, 0.7fr) minmax(0, 1.3fr);
@@ -480,12 +537,12 @@ a(at, "css", m`
             }
         }
     `);
-class U extends p {
+class Te extends g {
   render() {
-    return /* @__PURE__ */ c(
+    return /* @__PURE__ */ u(
       "dl",
       {
-        className: b(this.props) || void 0,
+        className: E(this.props) || void 0,
         "data-fray-component": "description-list",
         "aria-label": this.props.label,
         children: this.props.children ?? []
@@ -493,349 +550,2225 @@ class U extends p {
     );
   }
 }
-a(U, "dependencies", [at]), a(U, "css", m`
+s(Te, "dependencies", [Ue]), s(Te, "css", v`
         dl[data-fray-component="description-list"] {
             display: grid;
             margin: 0;
         }
     `);
-const w = class w extends Z {
-  constructor(s = {}) {
-    super({ ...s, symbols: w.symbols });
+class H extends g {
+  render() {
+    const r = at(this.props.width ?? 65), e = this.Host;
+    return /* @__PURE__ */ u(e, { style: { width: `${r}%` }, "aria-hidden": "true" });
   }
-};
-a(w, "hostName", "quad-checkbox"), a(w, "standaloneHostName", "quad-checkbox"), a(w, "symbols", [
-  ["✖", v.Deny],
-  ["☐", v.Neutral],
-  ["✓", v.Prefer],
-  ["+", v.Require]
-]), a(w, "defaultSemanticState", v.Neutral);
-let G = w;
-const E = class E extends Z {
-  constructor(s = {}) {
-    super({ ...s, symbols: E.symbols });
+}
+s(H, "hostName", "placeholder"), s(H, "standaloneHostName", "loading-placeholder"), s(H, "baseStyles", [
+  ["&::after", ["after", "working"]]
+]), s(H, "css", v`
+        & {
+            display: block;
+            min-width: 3rem;
+            height: 1em;
+            overflow: hidden;
+            background: currentColor;
+            border-radius: var(--ui-border-radius);
+            opacity: 0.18;
+            position: relative;
+        }
+
+        @keyframes fray-placeholder-progress {
+            from { background-position: 0 0; }
+            to { background-position: 2rem 0; }
+        }
+    `);
+function at(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 === y.Neutral ? [] : [{ option: d, mode: h }];
+    });
+    if (n.some(({ option: d, mode: h }) => h === y.Deny && d.matches(t)) || n.filter(({ mode: d }) => d === y.Require).some(({ option: d }) => !d.matches(t)))
+      return !1;
+    const l = n.filter(({ mode: d }) => d === y.Prefer);
+    if (l.length > 0 && !l.some(({ option: d }) => d.matches(t)))
+      return !1;
   }
-};
-a(E, "hostName", "tri-checkbox"), a(E, "standaloneHostName", "tri-checkbox"), a(E, "symbols", [
-  ["✖", v.Deny],
-  ["☐", v.Neutral],
-  ["✓", v.Prefer]
-]), a(E, "defaultSemanticState", v.Neutral);
-let J = E;
-class j extends p {
-  constructor(t = {}) {
+  return !0;
+}
+function it(t, r, e) {
+  if (!Array.isArray(t)) throw new TypeError("Filtered items must be an array");
+  return t.filter((a) => Pe(a, r, e));
+}
+function ar(t, r, e = null) {
+  return ye(r), new le(
+    [t],
+    ([a]) => (i) => Pe(i, a, r),
+    { owner: e, purpose: "filter predicate" }
+  );
+}
+function ir(t, r, e, a = null) {
+  return ye(e), new le(
+    [t, r],
+    ([i, n]) => it(i, n, e),
+    { owner: a, purpose: "filtered items" }
+  );
+}
+function nr(t) {
+  nt(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;
+  }
+  return { version: 1, dimensions: r };
+}
+function sr(t) {
+  if (!Q(t) || t.version !== 1 || !Q(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))
+      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))
+        throw new TypeError(
+          `Unknown filter mode for ${e}.${n}: ${String(o)}`
+        );
+      i[n] = o;
+    }
+    r[e] = i;
+  }
+  return r;
+}
+function nt(t) {
+  if (!Q(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))
+      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))
+        throw new TypeError(
+          `Unknown filter mode for ${r}.${a}: ${String(i)}`
+        );
+  }
+}
+function ye(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))
+      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`);
+    }
+  }
+}
+function U(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) {
+  return t != null && typeof t == "object" && !Array.isArray(t);
+}
+class Be {
+  constructor({
+    getItems: r,
+    getKey: e = we,
+    selectedItemsEmitter: a,
+    owner: i = 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");
+    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;
+  }
+  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());
+  }
+  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);
+    });
+  }
+  handleClick(r, e) {
+    var a;
+    if (e.preventDefault(), this.suppressNextClick) {
+      this.clearClickSuppression();
+      return;
+    }
+    this.activeIndex = r, this.selectIndex(r, e), (a = this.rows[r]) == null || a.focus();
+  }
+  handleMouseDown(r, e, a) {
+    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);
+  }
+  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()));
+  }
+  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;
+    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();
+  }
+  onKeyboardMove(r, e) {
+    this.selectIndex(r, e);
+  }
+  supportsDragSelection() {
+    return !1;
+  }
+  selectDragRange(r, e, a) {
+  }
+  selectIndex(r, e) {
+  }
+  setSelectedItems(r, e = "selection changed") {
+    this.selectedItemsEmitter.set(r, e), this.syncRows();
+  }
+  getSelectedItems() {
+    return this.selectedItemsEmitter.get() ?? [];
+  }
+  getSelectedItemsEmitter() {
+    return this.selectedItemsEmitter;
+  }
+  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");
+  }
+  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;
+    });
+  }
+  releaseRows() {
+    for (const r of this.rowCleanups.splice(0)) r();
+    this.rows = [];
+  }
+  finishDrag(r) {
+    var e;
+    (e = this.dragCleanup) == null || e.call(this), this.dragCleanup = null, this.dragStartIndex = null, this.dragOriginEvent = null, this.dragMoved = !1, r && (this.suppressNextClick = !0, this.suppressClickTimer != null && clearTimeout(this.suppressClickTimer), this.suppressClickTimer = setTimeout(() => this.clearClickSuppression(), 0));
+  }
+  clearClickSuppression() {
+    this.suppressNextClick = !1, this.suppressClickTimer != null && clearTimeout(this.suppressClickTimer), this.suppressClickTimer = null;
+  }
+  destroy() {
+    var r;
+    this.destroyed || (this.destroyed = !0, this.finishDrag(!1), this.clearClickSuppression(), this.releaseRows(), (r = this.ownedSelectedItemsEmitter) == null || r.dispose());
+  }
+}
+class ge extends Be {
+  constructor(e) {
+    const a = e.selectedItemEmitter == null ? new I(null, {
+      owner: e.owner,
+      purpose: "selected item"
+    }) : null, i = e.selectedItemEmitter ?? a;
+    super({
+      getItems: e.getItems,
+      ...e.getKey == null ? {} : { getKey: e.getKey },
+      ...e.owner === void 0 ? {} : { owner: e.owner },
+      selectedItemsEmitter: new ot(i)
+    });
+    s(this, "selectedItemEmitter");
+    s(this, "selectedItem$");
+    s(this, "ownedSelectedItemEmitter");
+    this.ownedSelectedItemEmitter = a, this.selectedItemEmitter = i, this.selectedItem$ = i;
+  }
+  selectIndex(e) {
+    const a = this.getItems()[e];
+    a !== void 0 && (this.anchorIndex = e, this.setSelectedItems([a], "single selection changed"));
+  }
+  getSelectedItem() {
+    return this.selectedItemEmitter.get();
+  }
+  destroy() {
     var e;
-    super(t);
-    a(this, "inputId");
-    a(this, "errorId");
-    a(this, "optionsEmitter");
-    a(this, "valueEmitter");
-    a(this, "ownsOptionsEmitter");
-    this.inputId = x("dropdown", t.id), this.errorId = `${this.inputId}-error`;
-    const r = t.options ?? [];
-    dt(r) ? (this.optionsEmitter = r, this.ownsOptionsEmitter = !1) : (B(r), this.optionsEmitter = new ot(r, {
+    super.destroy(), (e = this.ownedSelectedItemEmitter) == null || e.dispose();
+  }
+}
+class st extends Be {
+  selectIndex(r, e) {
+    const a = this.getItems(), i = a[r];
+    if (i !== 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");
+        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");
+        return;
+      }
+      this.anchorIndex = r, this.setSelectedItems([i], "multi selection changed");
+    }
+  }
+  onKeyboardMove(r, e) {
+    e.shiftKey && this.selectIndex(r, e);
+  }
+  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");
+  }
+}
+function ne(t) {
+  return t.multiSelect ? new st(t) : new ge(t);
+}
+class ot {
+  constructor(r) {
+    this.source = r;
+  }
+  get() {
+    const r = this.source.get();
+    return r == null ? [] : [r];
+  }
+  getError() {
+    return this.source.getError();
+  }
+  getFetchState() {
+    return this.source.getFetchState();
+  }
+  set(r, e) {
+    return this.source.set(r[0] ?? null, e);
+  }
+  subscribe(r, e) {
+    return this.source.subscribe((a) => r({
+      ...a,
+      value: a.value == null ? [] : [a.value]
+    }), e);
+  }
+}
+function we(t, r) {
+  if (t != null && typeof t == "object") {
+    const e = Reflect.get(t, "id");
+    if (e != null) return e;
+  }
+  if (typeof t == "string" || typeof t == "number") return t;
+  throw new TypeError(
+    `Selection item at index ${r} needs an id or an explicit itemKey/rowKey`
+  );
+}
+function ue(t) {
+  return !!(t.ctrlKey || t.metaKey);
+}
+function lt(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)));
+  for (const n of r) {
+    const o = e(n, a.length);
+    i.has(o) || (i.add(o), a.push(n));
+  }
+  return a;
+}
+class G extends g {
+  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 ?? [], {
       owner: this,
-      purpose: "dropdown options"
-    }), this.ownsOptionsEmitter = !0);
-    const i = ((e = this.optionsEmitter.get()[0]) == null ? void 0 : e.value) ?? "";
-    this.valueEmitter = T(this, t, i, "dropdown value");
+      purpose: "list items"
+    }), this.itemsEmitter = this.ownedItemsEmitter), this.items$ = this.itemsEmitter, this.getItemKey = dt(e.itemKey), this.selectionHandler = e.multiSelect === !0 ? ne({
+      owner: this,
+      multiSelect: !0,
+      ...e.selectedItemsEmitter == null ? {} : { selectedItemsEmitter: e.selectedItemsEmitter },
+      getItems: () => this.itemsEmitter.get(),
+      getKey: this.getItemKey
+    }) : ne({
+      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;
   }
   initialize() {
-    this.watch(this.valueEmitter, this.optionsEmitter);
+    this.watch(this.itemsEmitter, this.selectedItemsEmitter);
   }
   render() {
-    const {
-      label: t,
-      name: r,
-      disabled: i = !1,
-      required: e = !1,
-      error: l = null,
-      placeholder: o = "Select…",
-      ariaLabel: d,
-      onChange: u
-    } = this.props, y = this.optionsEmitter.get() ?? [];
-    B(y);
-    const f = this.valueEmitter.get(), k = this.Host;
-    return /* @__PURE__ */ g(
-      k,
+    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;
+    return /* @__PURE__ */ w(
+      l,
       {
-        className: b(this.props) || null,
-        "data-disabled": i ? "" : null,
-        "data-required": e ? "" : null,
-        "data-error": l == null ? null : "",
+        className: E(this.props) || null,
         children: [
-          t == null ? null : /* @__PURE__ */ c("label", { htmlFor: this.inputId, children: t }),
-          /* @__PURE__ */ g(
-            "select",
-            {
-              id: this.inputId,
-              name: r,
-              value: f == null ? "" : String(f),
-              disabled: i,
-              required: e,
-              "aria-label": t == null ? d : null,
-              "aria-invalid": l == null ? null : "true",
-              "aria-describedby": l == null ? null : this.errorId,
-              onChange: (h) => {
-                const A = ct(h, "dropdown change"), N = y.find(({ value: D }) => String(D) === A), R = (N == null ? void 0 : N.value) ?? A;
-                this.valueEmitter.set(R, "dropdown selection"), H(u, R, h);
-              },
-              children: [
-                f == null || f === "" ? /* @__PURE__ */ c("option", { value: "", disabled: e, selected: !0, children: o }) : null,
-                y.map((h) => {
-                  if (h == null || !Object.hasOwn(h, "value"))
-                    throw new TypeError("Dropdown options require value and label fields");
-                  return /* @__PURE__ */ c(
-                    "option",
-                    {
-                      value: String(h.value),
-                      disabled: !!h.disabled,
-                      selected: Object.is(f, h.value),
-                      children: h.label ?? String(h.value)
-                    },
-                    String(h.value)
-                  );
-                })
-              ]
-            }
-          ),
-          l == null ? null : /* @__PURE__ */ c(
-            "p",
+          a === k.Error ? /* @__PURE__ */ u("p", { role: "alert", "data-part": "error", children: ft(i, "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}`))
+          ] }) : null,
+          a === k.Ready && e.length === 0 ? /* @__PURE__ */ u("p", { role: "status", "data-part": "empty", children: "No items" }) : null,
+          e.length > 0 ? /* @__PURE__ */ u(
+            "div",
             {
-              id: this.errorId,
-              "data-part": "error",
-              role: "alert",
-              children: String(l)
+              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), p = o.has(f), m = this.props.renderItem ? this.props.renderItem(d, h) : ut(d);
+                return /* @__PURE__ */ u(
+                  "div",
+                  {
+                    role: "option",
+                    "data-part": "row",
+                    "data-fray-selectable-row": "",
+                    "data-index": h,
+                    "aria-selected": String(p),
+                    tabIndex: h === 0 ? 0 : -1,
+                    children: m
+                  },
+                  String(f)
+                );
+              })
             }
-          )
+          ) : null
         ]
       }
     );
   }
+  afterUpdate(e) {
+    const a = e instanceof Element ? e.querySelectorAll("[data-fray-selectable-row]") : [];
+    this.selectionHandler.rowsUpdated(a);
+  }
+  getSelectedItems() {
+    return this.selectionHandler.getSelectedItems();
+  }
+  getSelectedItemsEmitter() {
+    return this.selectedItemsEmitter;
+  }
+  getSelectedItem() {
+    var e;
+    return ((e = this.selectedItemEmitter) == null ? void 0 : e.get()) ?? null;
+  }
+  getSelectedItemEmitter() {
+    return this.selectedItemEmitter;
+  }
+  onDestroy() {
+    var e;
+    this.selectionHandler.destroy(), (e = this.ownedItemsEmitter) == null || e.dispose();
+  }
 }
-a(j, "hostName", "dropdown"), a(j, "standaloneHostName", "drop-down"), a(j, "baseStyles", [
-  ["&", ["labeledinput", "inputline"]],
-  ["& > label", ["label"]],
-  ["& > select", ["input", "inputline"]],
-  ["&[data-disabled]", ["disabled"]],
-  ["&[data-error]", ["error"]]
-]), a(j, "css", m`
+s(G, "dependencies", [H]), s(G, "hostName", "list-view"), s(G, "standaloneHostName", "list-view"), s(G, "baseStyles", [
+  ["&", "inputlike"],
+  ['& > [data-part="list"] > [data-part="row"]', "inputline"]
+]), s(G, "css", v`
         & {
-            position: relative;
+            display: flex;
+            flex-direction: column;
+            overflow-y: auto;
+            min-height: 0;
+        }
+
+        & > [data-part="list"],
+        & > [data-part="loading"] {
+            display: flex;
+            flex-direction: column;
+        }
+
+        & > [data-part="list"] > [data-part="row"] {
+            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"] {
+            margin: 0;
+            padding: var(--ui-padding);
+        }
+
+        & > [data-part="error"] {
+            color: var(--error-color);
         }
     `);
-function dt(n) {
-  return n != null && (typeof n == "object" || typeof n == "function") && typeof Reflect.get(n, "get") == "function" && typeof Reflect.get(n, "subscribe") == "function";
-}
-function ct(n, s) {
-  const t = n.currentTarget;
-  if (t == null || typeof Reflect.get(t, "value") != "string")
-    throw new TypeError(`${s} requires a value-bearing event target`);
-  return Reflect.get(t, "value");
-}
-class q extends p {
-  constructor(t = {}) {
-    super(t);
-    a(this, "inputId");
-    a(this, "errorId");
-    a(this, "valueEmitter");
-    this.inputId = x("textbox", t.id), this.errorId = `${this.inputId}-error`, this.valueEmitter = T(this, t, "", "textbox value");
+function dt(t) {
+  if (t == null) return we;
+  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)
+        throw new TypeError(`ListView item at index ${e} lacks ${t}`);
+      return a;
+    };
+  throw new TypeError("ListView itemKey must be a function or property name");
+}
+function ct(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) {
+  if (t != null && (typeof t == "object" || typeof t == "function")) {
+    const r = Reflect.get(t, "label");
+    if (ht(r)) return r;
+  }
+  return String(t);
+}
+function ht(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 {
+  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(
+      this,
+      n,
+      i,
+      "checkbox semantic state"
+    ), this.semanticStateEmitter = this.valueEmitter;
   }
   initialize() {
     this.watch(this.valueEmitter);
   }
+  cycleState(e = 1, a = 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);
+  }
   render() {
     const {
-      label: t,
-      placeholder: r,
-      type: i = "text",
-      name: e,
-      disabled: l = !1,
-      required: o = !1,
-      readOnly: d = !1,
-      error: u = null,
-      autoComplete: y,
-      inputMode: f,
-      minLength: k,
-      maxLength: h,
-      pattern: A,
-      ariaLabel: N,
-      inputRef: R,
-      onInput: D,
-      onChange: it
-    } = this.props, rt = this.valueEmitter.get() ?? "", lt = this.Host;
-    return /* @__PURE__ */ g(
-      lt,
+      label: e = this.props.value ?? "Option",
+      disabled: a = !1,
+      required: i = !1,
+      name: n,
+      value: o
+    } = this.props, l = this.valueEmitter.get(), [d] = this.symbols.find(([, m]) => Object.is(m, l)) ?? ["?", l], h = rt(l), f = l === y.Prefer || l === y.Require, p = this.Host;
+    return /* @__PURE__ */ u(
+      p,
       {
-        className: b(this.props) || null,
-        "data-disabled": l ? "" : null,
-        "data-required": o ? "" : null,
-        "data-error": u == null ? null : "",
-        children: [
-          t == null ? null : /* @__PURE__ */ c("label", { htmlFor: this.inputId, children: t }),
-          /* @__PURE__ */ c(
-            "input",
-            {
-              id: this.inputId,
-              name: e,
-              type: i,
-              value: rt,
-              placeholder: r,
-              disabled: l,
-              required: o,
-              readOnly: d,
-              autoComplete: y,
-              inputMode: f,
-              minLength: k,
-              maxLength: h,
-              pattern: A,
-              ref: R,
-              "aria-label": t == null ? N : null,
-              "aria-invalid": u == null ? null : "true",
-              "aria-describedby": u == null ? null : this.errorId,
-              onInput: (S) => {
-                const L = W(S, "textbox input");
-                this.valueEmitter.set(L, "textbox input"), H(D, L, S);
-              },
-              onChange: (S) => H(
-                it,
-                W(S, "textbox change"),
-                S
-              )
-            }
-          ),
-          u == null ? null : /* @__PURE__ */ c(
-            "p",
-            {
-              id: this.errorId,
-              "data-part": "error",
-              role: "alert",
-              children: String(u)
-            }
-          )
-        ]
+        className: E(this.props) || null,
+        "data-disabled": a ? "" : null,
+        "data-required": i ? "" : null,
+        "data-state": h,
+        children: /* @__PURE__ */ w(
+          "button",
+          {
+            type: "button",
+            role: "checkbox",
+            disabled: a,
+            name: n,
+            value: o == null ? void 0 : String(o),
+            "data-part": "control",
+            "aria-checked": f ? "true" : "false",
+            "aria-required": i ? "true" : null,
+            "aria-label": `${e}: ${h}`,
+            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: d }),
+              /* @__PURE__ */ u("span", { "data-part": "label", children: e })
+            ]
+          }
+        )
       }
     );
   }
 }
-a(q, "hostName", "textbox"), a(q, "standaloneHostName", "text-box"), a(q, "baseStyles", [
-  ["&", ["labeledinput", "inputline"]],
-  ["& > label", ["label"]],
-  ["& > input", ["input", "inputline"]],
-  ["&[data-disabled]", ["disabled"]],
-  ["&[data-error]", ["error"]]
-]), a(q, "css", m`
-        & input {
-            cursor: text;
+s(D, "symbols", [
+  ["☐", y.Neutral],
+  ["✓", y.Prefer]
+]), s(D, "defaultSemanticState", y.Neutral), s(D, "hostName", "checkbox"), s(D, "standaloneHostName", "check-box"), s(D, "baseStyles", [
+  ["&", ["inputline"]],
+  ['& > [data-part="control"]', ["input", "inputline"]],
+  ["&[data-disabled]", ["disabled"]]
+]), s(D, "css", v`
+        & > [data-part="control"] {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.35em;
+            width: auto;
+            font-family: inherit;
         }
 
-        & > [data-part="error"] {
-            margin: 0;
-            color: var(--error-color, #b00020);
+        & [data-part="symbol"] {
+            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 W(n, s) {
-  const t = n.currentTarget;
-  if (t == null || typeof Reflect.get(t, "value") != "string")
-    throw new TypeError(`${s} requires a value-bearing event target`);
-  return Reflect.get(t, "value");
-}
-class X extends p {
-  constructor(t = {}) {
-    var e;
-    super(t);
-    a(this, "valueEmitter");
-    a(this, "groupId");
-    a(this, "legendId");
-    const r = t.options ?? [];
-    Y(r);
-    const i = ((e = r[0]) == null ? void 0 : e[0]) ?? null;
-    this.valueEmitter = T(
-      this,
-      t,
-      i ?? null,
-      "toggle value"
-    ), this.groupId = x("toggle", t.id), this.legendId = `${this.groupId}-label`;
+function pt(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 {
+  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;
   }
   initialize() {
-    this.watch(this.valueEmitter);
-  }
-  selectOption(t, r = null) {
-    this.props.disabled || (this.valueEmitter.set(t, "toggle option selected"), H(this.props.onChange, t, r));
+    this.optionsEmitter && this.watch(this.optionsEmitter);
   }
   render() {
-    const {
-      options: t = [],
-      label: r,
-      disabled: i = !1,
-      required: e = !1
-    } = this.props;
-    Y(t);
-    const l = this.valueEmitter.get(), o = Math.max(
-      0,
-      t.findIndex(([d]) => Object.is(d, l))
+    var f, p, m;
+    const e = ((f = this.optionsEmitter) == null ? void 0 : f.get()) ?? (Array.isArray(this.props.options) ? this.props.options : []);
+    if (!Array.isArray(e))
+      throw new TypeError("FilterPanel options must be an array or emitter of arrays");
+    const a = ((p = this.optionsEmitter) == null ? void 0 : p.getFetchState()) ?? k.Ready, i = (m = this.optionsEmitter) == null ? void 0 : m.getError(), n = Ne(this.props.filters), o = this.props.filterModes ?? D.symbols, l = this.props.defaultSemanticState ?? y.Neutral, d = new Set(e.map(pe));
+    this.staleOptionValues = new Set(
+      [...this.optionStateEmitters.keys()].filter((b) => !d.has(b))
     );
-    return /* @__PURE__ */ g(
-      "fieldset",
+    const h = this.Host;
+    return a === k.Error ? /* @__PURE__ */ u(
+      h,
       {
-        id: this.groupId,
-        disabled: i,
-        className: b(this.props) || void 0,
-        "data-fray-component": "toggle",
-        "data-disabled": i ? "" : null,
-        "aria-required": e ? "true" : null,
-        children: [
-          r == null ? null : /* @__PURE__ */ c("legend", { id: this.legendId, children: r }),
-          /* @__PURE__ */ c(
-            "div",
+        className: E(this.props) || null,
+        role: "alert",
+        "data-state": "error",
+        children: Et(i, "Unable to load filter options")
+      }
+    ) : (a === k.Initial || a === k.Loading) && e.length === 0 ? /* @__PURE__ */ u(
+      h,
+      {
+        className: E(this.props) || null,
+        role: "status",
+        "data-state": "loading",
+        children: "Loading filter options…"
+      }
+    ) : /* @__PURE__ */ u(
+      h,
+      {
+        className: E(this.props) || null,
+        role: "group",
+        "aria-label": this.props.label ?? "Filter options",
+        children: e.length === 0 ? /* @__PURE__ */ u("span", { children: "No filter options" }) : e.map((b) => {
+          const S = pe(b), x = bt(b), O = n.get(S) ?? l, $ = this.optionEmitter(S, O);
+          return /* @__PURE__ */ u(
+            mt,
             {
-              "data-part": "options",
-              role: "radiogroup",
-              "aria-label": r == null ? this.props.ariaLabel : null,
-              "aria-labelledby": r == null ? null : this.legendId,
-              children: t.map(([d, u], y) => /* @__PURE__ */ c(
-                "button",
-                {
-                  type: "button",
-                  role: "radio",
-                  disabled: i,
-                  "data-part": "option",
-                  "aria-checked": Object.is(l, d) ? "true" : "false",
-                  "data-value": String(d),
-                  tabIndex: y === o ? 0 : -1,
-                  onClick: (f) => this.selectOption(d, f),
-                  onKeyDown: (f) => this.handleKeyDown(f, y, t),
-                  children: u
-                },
-                String(d)
-              ))
-            }
-          )
-        ]
+              label: x,
+              valueEmitter: $,
+              symbols: o,
+              onChange: (K, A) => {
+                var T, B;
+                A == null || A.stopPropagation();
+                const F = Ne(this.props.filters);
+                K === y.Neutral ? F.delete(S) : F.set(S, K), (B = (T = this.props).onChange) == null || B.call(T, F, A);
+              }
+            },
+            yt(S)
+          );
+        })
       }
     );
   }
-  handleKeyDown(t, r, i) {
-    const { key: e } = t;
-    let l;
-    if (e === "ArrowRight" || e === "ArrowDown") l = (r + 1) % i.length;
-    else if (e === "ArrowLeft" || e === "ArrowUp")
-      l = (r - 1 + i.length) % i.length;
-    else if (e === "Home") l = 0;
-    else if (e === "End") l = i.length - 1;
-    else return;
-    t.preventDefault();
-    const o = i[l];
-    if (o != null && (this.selectOption(o[0], t), this.dom instanceof Element)) {
-      const d = this.dom.querySelectorAll('[role="radio"]')[l];
+  afterUpdate(e) {
+    var a;
+    for (const i of this.staleOptionValues)
+      (a = this.optionStateEmitters.get(i)) == null || a.dispose(), this.optionStateEmitters.delete(i);
+    this.staleOptionValues.clear(), this.placementTimer != null && clearTimeout(this.placementTimer), this.placementTimer = setTimeout(() => {
+      this.placementTimer = null, this.placeInsideViewport(e);
+    }, 0);
+  }
+  onDestroy() {
+    this.placementTimer != null && clearTimeout(this.placementTimer), this.placementTimer = null;
+    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)}` });
+    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();
+    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;
+    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`
+        & {
+            position: fixed;
+            z-index: 1100;
+            inset-block-start: 0;
+            inset-inline-end: 0;
+            display: flex;
+            min-width: 12rem;
+            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) {
+  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) {
+  if (typeof t == "string" || typeof t == "number") return t;
+  if (t != null && typeof t == "object") {
+    const r = Reflect.get(t, "value");
+    if (typeof r == "string" || typeof r == "number") return r;
+  }
+  throw new TypeError("Filter options must be strings, numbers, or value/label objects");
+}
+function bt(t) {
+  if (t != null && typeof t == "object") {
+    const r = Reflect.get(t, "label");
+    if (r != null) return gt(r) ? r : String(r);
+  }
+  return String(pe(t));
+}
+function yt(t) {
+  return `${typeof t}:${String(t)}`;
+}
+function gt(t) {
+  return typeof t == "string" || typeof t == "number";
+}
+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 Et(t, r) {
+  return t instanceof Error ? t.message : t == null ? r : String(t);
+}
+class W extends g {
+  constructor() {
+    super(...arguments);
+    s(this, "filterVisible", !1);
+    s(this, "onGlobalClick", (e) => {
+      this.filterVisible && this.dom instanceof Node && e.target instanceof Node && !this.dom.contains(e.target) && (this.filterVisible = !1, this.update());
+    });
+  }
+  initialize() {
+    this.watch(this.props.sortEmitter, this.props.filtersEmitter), this.props.filterOptions != null && this.listen(document, "click", this.onGlobalClick);
+  }
+  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");
+  }
+  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);
+  }
+  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)}`;
+    let l = null;
+    return this.filterVisible && this.props.filterOptions != null && (l = /* @__PURE__ */ u(
+      V,
+      {
+        label: o,
+        options: this.props.filterOptions,
+        filters: i,
+        onChange: (d, h) => this.updateFilters(d, h),
+        ...this.props.filterModes == null ? {} : { filterModes: this.props.filterModes },
+        ...this.props.defaultSemanticState == null ? {} : { defaultSemanticState: this.props.defaultSemanticState }
+      },
+      "filter-panel"
+    )), /* @__PURE__ */ w(
+      "th",
+      {
+        scope: "col",
+        "data-fray-component": "table-header-cell",
+        "aria-sort": a === "asc" ? "ascending" : a === "desc" ? "descending" : "none",
+        style: { zIndex: this.filterVisible ? 1200 : null },
+        children: [
+          this.props.sortable ? /* @__PURE__ */ w(
+            "button",
+            {
+              type: "button",
+              "data-part": "sort",
+              onClick: () => this.toggleSort(),
+              children: [
+                n,
+                a === "asc" ? " ▲" : a === "desc" ? " ▼" : ""
+              ]
+            }
+          ) : /* @__PURE__ */ u("span", { "data-part": "label", children: n }),
+          this.props.filterOptions == null ? null : /* @__PURE__ */ u(
+            "button",
+            {
+              type: "button",
+              "data-part": "filter-toggle",
+              "aria-label": o,
+              "aria-expanded": String(this.filterVisible),
+              onClick: (d) => this.toggleFilterPanel(d),
+              children: "Filter"
+            }
+          ),
+          l
+        ]
+      }
+    );
+  }
+}
+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"] {
+            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"] {
+            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"] {
+            margin-inline-start: var(--ui-padding-h);
+            font-size: 0.75em;
+        }
+    `);
+function vt(t) {
+  return typeof t[0] == "string" || typeof t[0] == "number";
+}
+class me extends g {
+  render() {
+    return /* @__PURE__ */ u("thead", { "data-fray-component": "table-header", children: /* @__PURE__ */ u("tr", { children: this.props.columns.map((r) => /* @__PURE__ */ u(
+      W,
+      {
+        field: r.field,
+        sortEmitter: this.props.sortEmitter,
+        filtersEmitter: this.props.filtersEmitter,
+        ...r.label == null ? {} : { label: r.label },
+        ...r.sortable == null ? {} : { sortable: r.sortable },
+        ...r.filterOptions == null ? {} : { filterOptions: r.filterOptions },
+        ...this.props.filterModes == null ? {} : { filterModes: this.props.filterModes },
+        ...this.props.defaultSemanticState == null ? {} : { defaultSemanticState: this.props.defaultSemanticState },
+        ...this.props.onFilterChange == null ? {} : { onFilterChange: this.props.onFilterChange }
+      },
+      String(r.field)
+    )) }) });
+  }
+}
+s(me, "dependencies", [W]);
+const St = {
+  [y.Neutral]: "☐",
+  [y.Prefer]: "",
+  [y.Require]: "_",
+  [y.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)}`);
+      t.searchParams.append(
+        "filter",
+        `${a}:${St[o]}:${JSON.stringify(n)}`
+      );
+    }
+  return t;
+}
+function It(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 === y.Deny).some(([d]) => Object.is(d, i))) return !1;
+    const o = a.filter(([, d]) => d === y.Require);
+    if (o.length > 0 && !o.some(([d]) => Object.is(d, i))) return !1;
+    const l = a.filter(([, d]) => d === y.Prefer);
+    if (l.length > 0 && !l.some(([d]) => Object.is(d, i))) return !1;
+  }
+  return !0;
+}
+function Ge(t) {
+  if (t == null || typeof t != "object" || typeof Reflect.get(t, "field") != "string" || !Tt(Reflect.get(t, "direction")))
+    throw new TypeError("Table sort must contain a field and asc/desc direction");
+}
+function Tt(t) {
+  return t === "asc" || t === "desc";
+}
+function Rt(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) {
+  if (!(t == null || typeof t != "object" && typeof t != "function"))
+    return Reflect.get(t, r);
+}
+function Nt(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, {
+    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),
+    { owner: t.owner, purpose: "local table view" }
+  );
+  return new Ee(i, r, () => {
+    i.dispose(), e == null || e.dispose();
+  });
+}
+function or(t) {
+  Ct(t.query);
+  const r = ve(t);
+  return new Ee(t.query, r);
+}
+function Ot(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, {
+    owner: t.owner,
+    purpose: "table sort argument"
+  }), a = new ke("filters", r.filtersEmitter, {
+    owner: t.owner,
+    purpose: "table filters argument"
+  }), i = new Xe({
+    handler: t.handler,
+    args: { sort: e, filters: a },
+    owner: t.owner,
+    purpose: "table query",
+    keepPreviousValue: !0
+  });
+  return new Ee(i, r, () => {
+    i.dispose(), e.dispose(), a.dispose();
+  });
+}
+function $t(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
+  };
+  return t.baseUrl != null && (r.baseUrl = t.baseUrl), t.fetch != null && (r.fetch = t.fetch), Ot({
+    handler: new Ze(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) => {
+      var n;
+      return (n = r.retry) == null ? void 0 : n.call(r, i);
+    });
+  }
+  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());
+  }
+}
+function ve(t) {
+  const r = t.sortEmitter == null ? new I(null, {
+    owner: t.owner,
+    purpose: "table sort"
+  }) : null, e = t.filtersEmitter == null ? new I({}, {
+    owner: t.owner,
+    purpose: "table filters"
+  }) : null;
+  return {
+    sortEmitter: t.sortEmitter ?? r,
+    filtersEmitter: t.filtersEmitter ?? e,
+    ownedSortEmitter: r,
+    ownedFiltersEmitter: e
+  };
+}
+function Qe(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))
+    throw new TypeError("Table query must be an emitter");
+}
+class X extends g {
+  constructor(e) {
+    var a, i;
+    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({
+      owner: this,
+      multiSelect: !0,
+      ...e.selectedItemsEmitter == null ? {} : { selectedItemsEmitter: e.selectedItemsEmitter },
+      getItems: () => {
+        var n;
+        return ((n = this.query) == null ? void 0 : n.get()) ?? [];
+      },
+      getKey: this.rowKey
+    }) : ne({
+      owner: this,
+      ...e.selectedItemEmitter == null ? {} : { selectedItemEmitter: e.selectedItemEmitter },
+      getItems: () => {
+        var n;
+        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;
+  }
+  initialize() {
+    this.suppliedDataSource != null ? this.dataSource = this.suppliedDataSource : this.props.rest != null ? (this.ownedDataSource = $t({
+      ...this.props.rest,
+      sortEmitter: this.sortEmitter,
+      filtersEmitter: this.filtersEmitter,
+      owner: this
+    }), this.dataSource = this.ownedDataSource) : (this.ownedDataSource = Dt({
+      data: this.props.data ?? [],
+      sortEmitter: this.sortEmitter,
+      filtersEmitter: this.filtersEmitter,
+      owner: this
+    }), this.dataSource = this.ownedDataSource), this.query = this.dataSource.query, this.watch(this.query, this.selectedItemsEmitter);
+  }
+  render() {
+    var d, h, f, p;
+    const e = ((d = this.query) == null ? void 0 : d.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((m, b) => this.rowKey(m, b))
+    ), l = this.Host;
+    return /* @__PURE__ */ w(
+      l,
+      {
+        className: E(this.props) || null,
+        "data-loading": n ? "" : null,
+        "data-error": a === 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 ((p = this.dataSource) == null ? void 0 : p.retry) == "function" ? /* @__PURE__ */ u(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  var m, b;
+                  return (b = (m = this.dataSource) == null ? void 0 : m.retry) == null ? void 0 : b.call(m, "table retry");
+                },
+                children: "Retry"
+              }
+            ) : null
+          ] }) : null,
+          /* @__PURE__ */ w("table", { "data-part": "table", "aria-busy": n ? "true" : null, children: [
+            this.props.caption == null ? null : /* @__PURE__ */ u("caption", { children: this.props.caption }),
+            /* @__PURE__ */ u(
+              me,
+              {
+                columns: this.columns,
+                sortEmitter: this.sortEmitter,
+                filtersEmitter: this.filtersEmitter,
+                ...this.props.filterModes == null ? {} : { filterModes: this.props.filterModes },
+                ...this.props.defaultSemanticState == null ? {} : { defaultSemanticState: this.props.defaultSemanticState },
+                ...this.props.onFilterChange == null ? {} : { onFilterChange: this.props.onFilterChange }
+              },
+              "header"
+            ),
+            /* @__PURE__ */ u("tbody", { children: e.length > 0 ? e.map((m, b) => this.renderRow(m, b, 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") })
+          ] })
+        ]
+      }
+    );
+  }
+  renderRow(e, a, i) {
+    const n = this.rowKey(e, a), o = i.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)))
+      },
+      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,
+      {
+        width: 45 + (i + o) % 6 * 8
+      }
+    ) }, String(n.field))) }, `placeholder-${i}`));
+  }
+  afterUpdate(e) {
+    const a = e instanceof Element ? e.querySelectorAll("tbody [data-fray-selectable-row]") : [];
+    this.selectionHandler.rowsUpdated(a);
+  }
+  getSelectedRows() {
+    return this.selectionHandler.getSelectedItems();
+  }
+  getSelectedRowsEmitter() {
+    return this.selectedItemsEmitter;
+  }
+  getSelectedRow() {
+    var e;
+    return ((e = this.selectedItemEmitter) == null ? void 0 : e.get()) ?? null;
+  }
+  getSelectedRowEmitter() {
+    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();
+  }
+}
+s(X, "dependencies", [H, me]), s(X, "hostName", "data-table"), s(X, "standaloneHostName", "data-table"), s(X, "css", v`
+        & {
+            overflow: auto;
+            color: var(--ui-text-color);
+        }
+
+        & > table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+
+        & thead:has([data-fray-component="filter-panel"]) {
+            position: relative;
+            z-index: 1100;
+        }
+
+        & th,
+        & td {
+            padding: var(--ui-padding-v) var(--ui-padding-h);
+            text-align: start;
+        }
+
+        & tbody tr[data-fray-selectable-row] {
+            cursor: default;
+            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) {
+  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)
+      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`);
+    return e;
+  });
+}
+function At(t) {
+  var o, l;
+  const e = [
+    "mode",
+    "query",
+    "queryHandler",
+    "queryUrl",
+    "baseUrl",
+    "fetch",
+    "serializeQuery"
+  ].find((d) => Object.hasOwn(t, d));
+  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)
+    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")
+      throw new TypeError("DataTable dataSource must implement the table data-source contract");
+  }
+}
+function jt(t) {
+  if (t == null) return we;
+  if (typeof t == "function") return t;
+  if (typeof t == "string" && t.length > 0)
+    return (r, e) => {
+      const a = r[t];
+      if (a == null)
+        throw new TypeError(`DataTable row at index ${e} lacks ${t}`);
+      return a;
+    };
+  throw new TypeError("DataTable rowKey must be a function or property name");
+}
+function Ft(t) {
+  return t == null || typeof t == "string" || typeof t == "number" ? t : String(t);
+}
+function Ht(t, r) {
+  return t instanceof Error ? t.message : t == null ? r : String(t);
+}
+class We extends g {
+  render() {
+    return this.props.children ?? [];
+  }
+}
+function P(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)
+        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 ?? []);
+    }
+  };
+  e(t);
+}
+function lr(t, r) {
+  return P(t), Se(t, r);
+}
+function dr(t, r, e = null) {
+  return new le(
+    [t, r],
+    ([a, i]) => (P(a), i == null ? null : Se(a, i)),
+    { 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];
+      if (Object.is(l.id, r)) {
+        const f = e(l);
+        if (f == null || typeof f != "object")
+          throw new TypeError("Tree node update must return a tree node");
+        if (!Object.is(f.id, l.id))
+          throw new Error("Tree node update cannot change the stable id");
+        if (Object.is(f, l)) return n;
+        const p = [...n];
+        return p[o] = f, p;
+      }
+      const d = l.children ?? [], h = a(d);
+      if (!Object.is(h, d)) {
+        const f = [...n];
+        return f[o] = { ...l, children: h }, f;
+      }
+    }
+    return n;
+  }, i = a(t);
+  return Object.is(i, t) || P(i), i;
+}
+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 Se(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;
+  }
+  return null;
+}
+class Z extends g {
+  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))
+      this.nodesEmitter = e.nodes, this.ownedNodesEmitter = null;
+    else {
+      const a = e.nodes ?? Je(e.children);
+      this.ownedNodesEmitter = new I(a, {
+        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;
+  }
+  initialize() {
+    this.reconcile(this.nodesEmitter.get()), this.watch(this.nodesEmitter, this.selectedKeyEmitter, this.expandedKeysEmitter), this.onCleanup(this.nodesEmitter.subscribe(({ value: e }) => this.reconcile(e), {
+      emitCurrent: !1
+    }));
+  }
+  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;
+    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: p, position: m, setSize: b } = 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, p)) ?? f.label;
+      return /* @__PURE__ */ w(
+        "div",
+        {
+          role: "treeitem",
+          "data-part": "item",
+          "data-index": h,
+          "data-depth": p,
+          "aria-level": p + 1,
+          "aria-posinset": m,
+          "aria-setsize": b,
+          "aria-expanded": S ? String(x) : null,
+          "aria-selected": String(O),
+          tabIndex: Object.is(f.id, o == null ? void 0 : o.node.id) ? 0 : -1,
+          style: { "--tree-depth": p },
+          onClick: (T) => {
+            if (this.focusedKey = f.id, Ut(T.target) && S) {
+              this.toggleExpanded(f.id), this.focusRow(f.id);
+              return;
+            }
+            this.selectNode(f, T);
+          },
+          onFocus: () => this.focusedKey = f.id,
+          onKeyDown: (T) => this.handleKeyDown(T, h, i),
+          children: [
+            /* @__PURE__ */ u(
+              "span",
+              {
+                "data-part": "expander",
+                "data-expandable": S ? "" : null,
+                "aria-hidden": "true",
+                children: S ? x ? "▾" : "▸" : "•"
+              }
+            ),
+            /* @__PURE__ */ u("span", { "data-part": "label", children: $ })
+          ]
+        },
+        f.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();
+  }
+  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);
+  }
+  selectNode(e, a) {
+    this.selectedKeyEmitter.set(e.id, "tree item selected"), C(this.props.onSelect, e, a), this.focusRow(e.id);
+  }
+  toggleExpanded(e) {
+    const a = this.expandedKeysEmitter.get(), i = a.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"
+    );
+  }
+  handleKeyDown(e, a, i) {
+    var o, l, d, h;
+    const n = i[a];
+    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 === "ArrowRight") {
+        e.preventDefault();
+        const f = n.node.children ?? [];
+        if (f.length === 0) return;
+        this.expandedKeysEmitter.get().some((m) => Object.is(m, n.node.id)) ? this.focusRow(f[0].id) : this.toggleExpanded(n.node.id);
+        return;
+      }
+      if (e.key === "ArrowLeft") {
+        e.preventDefault(), this.expandedKeysEmitter.get().some((p) => Object.is(p, 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);
+    }
+  }
+  move(e, a) {
+    a !== void 0 && (e.preventDefault(), this.focusRow(a));
+  }
+  focusRow(e) {
+    var i;
+    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(
+        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();
+    }
+  }
+  handleTypeahead(e, a, i) {
+    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);
+  }
+}
+s(Z, "dependencies", [We]), s(Z, "hostName", "tree-view"), s(Z, "standaloneHostName", "tree-view"), s(Z, "css", v`
+        & {
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+            min-height: 0;
+            overflow: auto;
+        }
+
+        & > [data-part="tree"] {
+            display: grid;
+            align-content: start;
+        }
+
+        & [data-part="item"] {
+            display: flex;
+            align-items: flex-start;
+            gap: 0.35rem;
+            min-width: 0;
+            padding: 0.38rem 0.5rem;
+            padding-inline-start: calc(0.5rem + var(--tree-depth) * 1.1rem);
+            cursor: default;
+            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;
+        }
+
+        & [data-part="expander"][data-expandable] {
+            cursor: pointer;
+        }
+
+        & [data-part="label"] {
+            min-width: 0;
+            overflow-wrap: anywhere;
+        }
+
+        & > [data-part="empty"] {
+            margin: 0;
+            padding: var(--ui-padding, 0.75rem);
+        }
+
+        @media (forced-colors: active) {
+            & [data-part="item"][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) => {
+    if (!ie(e)) throw new TypeError("TreeView children must be TreeItem nodes");
+    const a = 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)
+    };
+  });
+}
+function De(t, r) {
+  const e = [], a = (i, n, o) => {
+    i.forEach((l, d) => {
+      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);
+    });
+  };
+  return a(t, 0, null), e;
+}
+function zt(t) {
+  const r = /* @__PURE__ */ new Set(), e = [], a = (i, n, o) => {
+    i.forEach((l, d) => {
+      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);
+    });
+  };
+  return a(t, 0, null), e;
+}
+function qt(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 Vt(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) {
+  return t instanceof Element && t.closest('[data-part="expander"]') != null;
+}
+class se extends g {
+  constructor(r = {}) {
+    if (super(r), r.onClick != null && typeof r.onClick != "function")
+      throw new TypeError("Button onClick must be a function");
+  }
+  render() {
+    const {
+      children: r = [],
+      label: e,
+      type: a = "button",
+      disabled: i = !1,
+      pressed: n,
+      busy: o = !1,
+      busyLabel: l,
+      id: d,
+      name: h,
+      value: f,
+      title: p,
+      ariaLabel: m,
+      onClick: b
+    } = this.props, x = (Array.isArray(r) ? r.length > 0 : r != null && typeof r != "boolean") ? r : e ?? "", O = o ? l ?? x : x, $ = i || o;
+    return /* @__PURE__ */ u(
+      "button",
+      {
+        id: d,
+        name: h,
+        value: f == null ? void 0 : String(f),
+        title: p,
+        type: a,
+        disabled: $,
+        className: E(this.props) || void 0,
+        "data-fray-component": "button",
+        "aria-label": m,
+        "aria-pressed": n == null ? null : String(!!n),
+        "aria-busy": o ? "true" : null,
+        onClick: (K) => {
+          $ || C(b, K);
+        },
+        children: O
+      }
+    );
+  }
+}
+s(se, "baseStyles", [
+  ['button[data-fray-component="button"]', ["uiline", "button"]]
+]), s(se, "css", v`
+        button[data-fray-component="button"] {
+            font-family: inherit;
+        }
+    `);
+class Oe extends g {
+  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`;
+  }
+  initialize() {
+    this.watch(this.openEmitter);
+  }
+  render() {
+    const {
+      title: e,
+      description: a,
+      actions: i,
+      closeLabel: n = "Close",
+      showCloseButton: o = !0,
+      children: l = []
+    } = this.props;
+    return /* @__PURE__ */ w(
+      "dialog",
+      {
+        id: this.dialogId,
+        className: E(this.props) || void 0,
+        "data-fray-component": "dialog",
+        "aria-labelledby": this.titleId,
+        "aria-describedby": a == null ? null : this.descriptionId,
+        "aria-modal": "true",
+        ref: (d) => this.dialogElement = d,
+        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("div", { "data-part": "content", children: l }),
+          i == null && !o ? null : /* @__PURE__ */ w("footer", { "data-part": "actions", children: [
+            i,
+            o ? /* @__PURE__ */ u(
+              se,
+              {
+                label: n,
+                onClick: () => this.requestClose()
+              }
+            ) : null
+          ] })
+        ]
+      }
+    );
+  }
+  afterMount() {
+    const e = this.dialogElement;
+    e != null && (this.listen(e, "cancel", (a) => {
+      a.preventDefault(), this.requestClose();
+    }), this.listen(e, "close", () => {
+      this.openEmitter.get() && this.openEmitter.set(!1, "native dialog closed"), this.finishClose();
+    }), this.syncOpenState());
+  }
+  afterUpdate() {
+    this.syncOpenState();
+  }
+  close() {
+    this.requestClose();
+  }
+  onDestroy() {
+    const e = this.dialogElement;
+    (e == null ? void 0 : e.open) === !0 && typeof e.close == "function" && e.close(), this.finishClose(), this.dialogElement = null;
+  }
+  requestClose() {
+    this.openEmitter.get() && this.openEmitter.set(!1, "dialog close requested");
+  }
+  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);
+      return;
+    }
+    !a && 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);
+  }
+}
+s(Oe, "dependencies", [se]), s(Oe, "css", v`
+        dialog[data-fray-component="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] {
+            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"] {
+            margin: 0;
+        }
+
+        dialog[data-fray-component="dialog"] > [data-part="content"] {
+            overflow: auto;
+        }
+
+        dialog[data-fray-component="dialog"] > [data-part="actions"] {
+            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"] {
+                border: 2px solid CanvasText;
+            }
+        }
+    `);
+function Pt(t) {
+  if (!t.open) {
+    if (typeof t.showModal == "function") {
+      t.showModal();
+      return;
+    }
+    t.setAttribute("open", "");
+  }
+}
+function Bt(t, r) {
+  const a = (r == null || typeof r == "function" ? null : r.current) ?? t.querySelector(
+    '[autofocus], button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
+  );
+  a == null || a.focus();
+}
+const z = class z extends D {
+  constructor(r = {}) {
+    super({ ...r, symbols: z.symbols });
+  }
+};
+s(z, "hostName", "quad-checkbox"), s(z, "standaloneHostName", "quad-checkbox"), s(z, "symbols", [
+  ["✖", y.Deny],
+  ["☐", y.Neutral],
+  ["✓", y.Prefer],
+  ["+", y.Require]
+]), s(z, "defaultSemanticState", y.Neutral);
+let $e = z;
+const q = class q extends D {
+  constructor(r = {}) {
+    super({ ...r, symbols: q.symbols });
+  }
+};
+s(q, "hostName", "tri-checkbox"), s(q, "standaloneHostName", "tri-checkbox"), s(q, "symbols", [
+  ["✖", y.Deny],
+  ["☐", y.Neutral],
+  ["✓", y.Prefer]
+]), s(q, "defaultSemanticState", y.Neutral);
+let Ce = q;
+class ee extends g {
+  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, {
+      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");
+  }
+  initialize() {
+    this.watch(this.valueEmitter, this.optionsEmitter);
+  }
+  render() {
+    const {
+      label: e,
+      name: a,
+      disabled: i = !1,
+      required: n = !1,
+      error: o = null,
+      placeholder: l = "Select…",
+      ariaLabel: d,
+      onChange: h
+    } = this.props, f = this.optionsEmitter.get() ?? [];
+    fe(f);
+    const p = this.valueEmitter.get(), m = this.Host;
+    return /* @__PURE__ */ w(
+      m,
+      {
+        className: E(this.props) || null,
+        "data-disabled": i ? "" : null,
+        "data-required": n ? "" : null,
+        "data-error": o == null ? null : "",
+        children: [
+          e == null ? null : /* @__PURE__ */ u("label", { htmlFor: this.inputId, children: e }),
+          /* @__PURE__ */ w(
+            "select",
+            {
+              id: this.inputId,
+              name: a,
+              value: p == null ? "" : String(p),
+              disabled: i,
+              required: n,
+              "aria-label": e == null ? d : null,
+              "aria-invalid": o == null ? null : "true",
+              "aria-describedby": o == null ? null : this.errorId,
+              onChange: (b) => {
+                const S = Qt(b, "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, b);
+              },
+              children: [
+                p == null || p === "" ? /* @__PURE__ */ u("option", { value: "", disabled: n, selected: !0, children: l }) : null,
+                f.map((b) => {
+                  if (b == null || !Object.hasOwn(b, "value"))
+                    throw new TypeError("Dropdown options require value and label fields");
+                  return /* @__PURE__ */ u(
+                    "option",
+                    {
+                      value: String(b.value),
+                      disabled: !!b.disabled,
+                      selected: Object.is(p, b.value),
+                      children: b.label ?? String(b.value)
+                    },
+                    String(b.value)
+                  );
+                })
+              ]
+            }
+          ),
+          o == null ? null : /* @__PURE__ */ u(
+            "p",
+            {
+              id: this.errorId,
+              "data-part": "error",
+              role: "alert",
+              children: String(o)
+            }
+          )
+        ]
+      }
+    );
+  }
+}
+s(ee, "hostName", "dropdown"), s(ee, "standaloneHostName", "drop-down"), s(ee, "baseStyles", [
+  ["&", ["labeledinput", "inputline"]],
+  ["& > label", ["label"]],
+  ["& > select", ["input", "inputline"]],
+  ["&[data-disabled]", ["disabled"]],
+  ["&[data-error]", ["error"]]
+]), s(ee, "css", v`
+        & {
+            position: relative;
+        }
+    `);
+function Gt(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) {
+  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 {
+  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");
+  }
+  initialize() {
+    this.watch(this.valueEmitter);
+  }
+  render() {
+    const {
+      label: e,
+      placeholder: a,
+      type: i = "text",
+      name: n,
+      disabled: o = !1,
+      required: l = !1,
+      readOnly: d = !1,
+      error: h = null,
+      autoComplete: f,
+      inputMode: p,
+      minLength: m,
+      maxLength: b,
+      pattern: S,
+      ariaLabel: x,
+      inputRef: O,
+      onInput: $,
+      onChange: K
+    } = this.props, A = this.valueEmitter.get() ?? "", F = this.Host;
+    return /* @__PURE__ */ w(
+      F,
+      {
+        className: E(this.props) || null,
+        "data-disabled": o ? "" : null,
+        "data-required": l ? "" : null,
+        "data-error": h == null ? null : "",
+        children: [
+          e == null ? null : /* @__PURE__ */ u("label", { htmlFor: this.inputId, children: e }),
+          /* @__PURE__ */ u(
+            "input",
+            {
+              id: this.inputId,
+              name: n,
+              type: i,
+              value: A,
+              placeholder: a,
+              disabled: o,
+              required: l,
+              readOnly: d,
+              autoComplete: f,
+              inputMode: p,
+              minLength: m,
+              maxLength: b,
+              pattern: S,
+              ref: O,
+              "aria-label": e == null ? x : 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);
+              },
+              onChange: (T) => C(
+                K,
+                Ke(T, "textbox change"),
+                T
+              )
+            }
+          ),
+          h == null ? null : /* @__PURE__ */ u(
+            "p",
+            {
+              id: this.errorId,
+              "data-part": "error",
+              role: "alert",
+              children: String(h)
+            }
+          )
+        ]
+      }
+    );
+  }
+}
+s(te, "hostName", "textbox"), s(te, "standaloneHostName", "text-box"), s(te, "baseStyles", [
+  ["&", ["labeledinput", "inputline"]],
+  ["& > label", ["label"]],
+  ["& > input", ["input", "inputline"]],
+  ["&[data-disabled]", ["disabled"]],
+  ["&[data-error]", ["error"]]
+]), s(te, "css", v`
+        & input {
+            cursor: text;
+        }
+
+        & > [data-part="error"] {
+            margin: 0;
+            color: var(--fray-color-error, var(--error-color));
+        }
+    `);
+function Ke(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 {
+  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(
+      this,
+      e,
+      i ?? null,
+      "toggle value"
+    ), this.groupId = j("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));
+  }
+  render() {
+    const {
+      options: e = [],
+      label: a,
+      disabled: i = !1,
+      required: n = !1
+    } = this.props;
+    je(e);
+    const o = this.valueEmitter.get(), l = Math.max(
+      0,
+      e.findIndex(([d]) => Object.is(d, o))
+    );
+    return /* @__PURE__ */ w(
+      "fieldset",
+      {
+        id: this.groupId,
+        disabled: i,
+        className: E(this.props) || void 0,
+        "data-fray-component": "toggle",
+        "data-disabled": i ? "" : null,
+        "aria-required": n ? "true" : null,
+        children: [
+          a == null ? null : /* @__PURE__ */ u("legend", { id: this.legendId, children: a }),
+          /* @__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(
+                "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: (p) => this.selectOption(d, p),
+                  onKeyDown: (p) => this.handleKeyDown(p, f, e),
+                  children: h
+                },
+                String(d)
+              ))
+            }
+          )
+        ]
+      }
+    );
+  }
+  handleKeyDown(e, a, i) {
+    const { key: n } = e;
+    let o;
+    if (n === "ArrowRight" || n === "ArrowDown") o = (a + 1) % i.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;
+    else return;
+    e.preventDefault();
+    const l = i[o];
+    if (l != null && (this.selectOption(l[0], e), this.dom instanceof Element)) {
+      const d = this.dom.querySelectorAll('[role="radio"]')[o];
       d == null || d.focus();
     }
   }
 }
-a(X, "baseStyles", [
+s(Ae, "baseStyles", [
   ['fieldset[data-fray-component="toggle"] > [data-part="options"]', ["uiline"]],
   ['fieldset[data-fray-component="toggle"] [data-part="option"]', ["uiline", "button"]]
-]), a(X, "css", m`
+]), s(Ae, "css", v`
         fieldset[data-fray-component="toggle"] {
             margin: 0;
             padding: 0;
@@ -848,6 +2781,7 @@ a(X, "baseStyles", [
         }
 
         fieldset[data-fray-component="toggle"] [data-part="option"] {
+            background: var(--fray-toggle-button-background, var(--fray-button-background));
             border-radius: 0;
         }
 
@@ -860,44 +2794,47 @@ a(X, "baseStyles", [
         }
 
         fieldset[data-fray-component="toggle"] [data-part="option"][aria-checked="true"] {
-            background: var(--toggle-selected-bg, var(--ui-accent-color));
-            color: var(--toggle-selected-text, white);
+            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 Y(n) {
-  B(n);
-  for (const s of n)
-    if (!Array.isArray(s) || s.length < 2)
+function je(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 V extends p {
+class re extends g {
   render() {
     const {
-      children: s = [],
-      id: t,
-      label: r = "Actions",
+      children: r = [],
+      id: e,
+      label: a = "Actions",
       orientation: i = "horizontal"
     } = this.props;
     if (!["horizontal", "vertical"].includes(i))
       throw new TypeError("Toolbar orientation must be horizontal or vertical");
-    const e = this.Host;
-    return /* @__PURE__ */ c(
-      e,
+    const n = this.Host;
+    return /* @__PURE__ */ u(
+      n,
       {
-        id: t,
+        id: e,
         role: "toolbar",
-        className: b(this.props) || null,
+        className: E(this.props) || null,
         "data-orientation": i,
-        "aria-label": r,
+        "aria-label": a,
         "aria-orientation": i,
-        children: s
+        children: r
       }
     );
   }
 }
-a(V, "hostName", "toolbar"), a(V, "standaloneHostName", "tool-bar"), a(V, "baseStyles", [
+s(re, "hostName", "toolbar"), s(re, "standaloneHostName", "tool-bar"), s(re, "baseStyles", [
   ["&", ["toolbar"]]
-]), a(V, "css", m`
+]), s(re, "css", v`
         & {
             display: flex;
             flex-wrap: wrap;
@@ -911,40 +2848,40 @@ a(V, "hostName", "toolbar"), a(V, "standaloneHostName", "tool-bar"), a(V, "baseS
             align-items: stretch;
         }
     `);
-class C extends p {
-  constructor(t) {
-    super(t);
-    a(this, "progressId");
-    if (this.progressId = x("progress", t.id), t.valueEmitter != null && !ut(t.valueEmitter))
+class he extends g {
+  constructor(e) {
+    super(e);
+    s(this, "progressId");
+    if (this.progressId = j("progress", e.id), e.valueEmitter != null && !Wt(e.valueEmitter))
       throw new TypeError("ProgressBar valueEmitter must be a readable emitter");
   }
   render() {
-    const t = this.props.max ?? 100;
-    if (!Number.isFinite(t) || t <= 0)
+    const e = this.props.max ?? 100;
+    if (!Number.isFinite(e) || e <= 0)
       throw new RangeError("ProgressBar max must be a positive finite number");
-    const r = this.props.valueEmitter == null ? this.props.value ?? null : this.read(this.props.valueEmitter);
-    if (r != null && (!Number.isFinite(r) || r < 0))
+    const a = this.props.valueEmitter == null ? this.props.value ?? null : this.read(this.props.valueEmitter);
+    if (a != null && (!Number.isFinite(a) || a < 0))
       throw new RangeError("ProgressBar value must be null or a non-negative finite number");
-    const i = r == null ? null : Math.min(r, t), e = this.props.valueText ?? (i == null ? "In progress" : `${Math.round(i / t * 100)}%`), l = this.Host;
-    return /* @__PURE__ */ g(l, { className: b(this.props) || null, children: [
-      /* @__PURE__ */ g("div", { "data-part": "label-line", children: [
-        /* @__PURE__ */ c("label", { htmlFor: this.progressId, children: this.props.label }),
-        /* @__PURE__ */ c("span", { "data-part": "value", children: e })
+    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: [
+      /* @__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__ */ c(
+      /* @__PURE__ */ u(
         "progress",
         {
           id: this.progressId,
           value: i ?? void 0,
-          max: t,
-          "aria-valuetext": e,
-          children: e
+          max: e,
+          "aria-valuetext": n,
+          children: n
         }
       )
     ] });
   }
 }
-a(C, "hostName", "progress-bar"), a(C, "standaloneHostName", "progress-bar"), a(C, "css", m`
+s(he, "hostName", "progress-bar"), s(he, "standaloneHostName", "progress-bar"), s(he, "css", v`
         & {
             display: grid;
             gap: var(--spacing-small, 0.5rem);
@@ -963,7 +2900,9 @@ a(C, "hostName", "progress-bar"), a(C, "standaloneHostName", "progress-bar"), a(
         & > progress {
             width: 100%;
             min-height: 0.8rem;
-            accent-color: var(--ui-accent-color);
+            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) {
@@ -972,43 +2911,352 @@ a(C, "hostName", "progress-bar"), a(C, "standaloneHostName", "progress-bar"), a(
             }
         }
     `);
-function ut(n) {
-  return n != null && (typeof n == "object" || typeof n == "function") && typeof Reflect.get(n, "get") == "function" && typeof Reflect.get(n, "subscribe") == "function";
+function Wt(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"))
+]), 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"))
+]);
+function _t(t, r, e = globalThis.document) {
+  if (Xt(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;
+}
+function ae(t, r) {
+  const e = t.find((a) => a.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 R(t, r, e) {
+  return Object.freeze({ value: t, label: r, href: e });
+}
+function N(t) {
+  const r = import.meta.url.includes("/src/styling/") ? `../../${t}` : `../${t}`;
+  return new URL(r, import.meta.url).href;
+}
+function Xt(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) {
+    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());
+  }
+  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;
+    return /* @__PURE__ */ w(
+      d,
+      {
+        className: E(this.props) || null,
+        "data-kind": this.kind,
+        "data-disabled": o ? "" : null,
+        children: [
+          i == null ? null : /* @__PURE__ */ u("label", { htmlFor: this.inputId, children: i }),
+          /* @__PURE__ */ u(
+            "select",
+            {
+              id: this.inputId,
+              "data-part": "control",
+              value: a.value,
+              disabled: o,
+              "aria-label": i == null ? n : null,
+              onChange: (h) => {
+                const f = Zt(h), p = ae(e, f);
+                this.valueEmitter.set(f, `${this.kind} selected`), C(l, f, p, h);
+              },
+              children: e.map((h) => /* @__PURE__ */ u(
+                "option",
+                {
+                  value: h.value,
+                  selected: h.value === a.value,
+                  children: h.label
+                },
+                h.value
+              ))
+            }
+          )
+        ]
+      }
+    );
+  }
+  afterMount() {
+    this.applySelection();
+  }
+  afterUpdate() {
+    this.applySelection();
+  }
+  get options() {
+    const e = this.props.options ?? this.defaults;
+    return Me(e), e;
+  }
+  applySelection() {
+    const e = this.props.targetDocument ?? (typeof document > "u" ? null : document);
+    e != null && _t(
+      this.kind,
+      ae(this.options, this.valueEmitter.get()),
+      e
+    );
+  }
+}
+s(oe, "baseStyles", [
+  ["&", ["labeledinput", "inputline"]],
+  ["& > label", ["label"]],
+  ["& > select", ["input", "inputline"]],
+  ["&[data-disabled]", ["disabled"]]
+]), s(oe, "css", v`
+        & {
+            position: relative;
+        }
+
+        & > select {
+            min-width: 8rem;
+        }
+    `);
+class Fe extends oe {
+  constructor(r = {}) {
+    super(r, "theme", Jt);
+  }
+}
+s(Fe, "hostName", "theme-picker"), s(Fe, "standaloneHostName", "theme-picker");
+class He extends oe {
+  constructor(r = {}) {
+    super(r, "colors", Yt);
+  }
+}
+s(He, "hostName", "color-picker"), s(He, "standaloneHostName", "color-picker");
+function Me(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`);
+    if (r.has(e.value))
+      throw new Error(`Duplicate stylesheet picker value: ${e.value}`);
+    r.add(e.value);
+  }
+}
+function Zt(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 {
-  Rt as Button,
-  Z as Checkbox,
-  p as Component,
-  at as DescriptionItem,
-  U as DescriptionList,
-  j as Dropdown,
-  v as FilterMode,
-  vt as Fragment,
-  yt as FrayRuntime,
-  $ as Panel,
-  C as ProgressBar,
-  G as QuadCheckbox,
-  P as Sidebar,
-  F as SplitView,
-  wt as StyleRegistry,
-  Q as Tab,
-  I as TabLine,
-  z as TabPanel,
-  q as Textbox,
-  X as Toggle,
-  V as Toolbar,
-  J as TriCheckbox,
-  Et as createFrayRuntime,
-  xt as createStyleRegistry,
-  m as css,
-  It as defaultFrayRuntime,
-  Nt as h,
-  c as jsx,
-  St as jsxDEV,
-  g as jsxs,
-  Ht as live,
-  Tt as styleRegistry,
-  _ as tabButtonId,
-  tt as tabPanelId
+  Be as BaseSelectionHandler,
+  se as Button,
+  D as Checkbox,
+  He as ColorPicker,
+  g as Component,
+  X as DataTable,
+  St as DefaultTableFilterEncoding,
+  Ue as DescriptionItem,
+  Te as DescriptionList,
+  Oe as Dialog,
+  ee as Dropdown,
+  y 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,
+  xe as Sidebar,
+  ge as SingleSelectionHandler,
+  ce as SplitView,
+  br as StyleRegistry,
+  ze as Tab,
+  L as TabLine,
+  J as TabPanel,
+  me as TableHeader,
+  W as TableHeaderCell,
+  te as Textbox,
+  Fe as ThemePicker,
+  Ae as Toggle,
+  re as Toolbar,
+  We as TreeItem,
+  Z as TreeView,
+  Ce as TriCheckbox,
+  It as applyLocalTableState,
+  Ge as assertSort,
+  P as assertTreeNodes,
+  yr as createFrayRuntime,
+  Ot as createHandlerTableDataSource,
+  Dt as createLocalTableDataSource,
+  or as createQueryTableDataSource,
+  $t as createRestTableDataSource,
+  ne as createSelectionHandler,
+  gr as createStyleRegistry,
+  v as css,
+  wr as defaultFrayRuntime,
+  we as defaultItemKey,
+  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,
+  Er as h,
+  de as isFilterMode,
+  u as jsx,
+  vr as jsxDEV,
+  w as jsxs,
+  Sr as live,
+  Pe as matchesFilterState,
+  sr as parseFilterState,
+  _t as replaceFrayStylesheet,
+  nr as serializeFilterState,
+  kt as serializeTableQuery,
+  kr as styleRegistry,
+  qe as tabButtonId,
+  Le as tabPanelId,
+  Mt as updateTreeNode,
+  cr as updateWritableTreeNode
 };
 //# sourceMappingURL=index.js.map