@sylwellsoftware/fray 0.1.0-alpha.1 → 0.2.0

package/dist/index.js

@@ -1,163 +1,167 @@
-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 pe = Object.defineProperty;
+var fe = (o, l, e) => l in o ? pe(o, l, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[l] = e;
+var n = (o, l, e) => fe(o, typeof l != "symbol" ? l + "" : l, e);
+import { C as b, j as u, c as m, a as v, i as J } from "./jsx-dev-runtime-DukiDpV9.js";
+import { F as Re, b as $e, S as je, d as qe, e as Ce, f as Fe, h as Pe, g as Ve, l as De, s as Ue } from "./jsx-dev-runtime-DukiDpV9.js";
+import { a as O, i as N, c as y, b as E, C as ne, F as x, d as G } from "./button-CqDGmkBt.js";
+import { B as Le } from "./button-CqDGmkBt.js";
+import { Emitter as me } from "@sylwellsoftware/glue";
+class ie extends b {
   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(
+class T extends b {
+  constructor(e = {}) {
+    var i;
+    super(e);
+    n(this, "valueEmitter");
+    n(this, "activeTabEmitter");
+    const a = e.tabs ?? [];
+    Y(a);
+    const r = { ...e };
+    r.valueEmitter == null && e.activeTabEmitter != null && (r.valueEmitter = e.activeTabEmitter), r.defaultValue == null && e.initialActiveTabId != null && (r.defaultValue = e.initialActiveTabId), this.valueEmitter = O(
       this,
-      i,
-      ((e = r.find((l) => !l.disabled)) == null ? void 0 : e.id) ?? null,
+      r,
+      ((i = a.find((s) => !s.disabled)) == null ? void 0 : i.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"), N(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: r = "fray-tabs" } = this.props;
+    Y(e);
+    const i = this.valueEmitter.get(), s = this.Host;
+    return /* @__PURE__ */ u(
+      s,
       {
         role: "tablist",
-        className: b(this.props) || null,
-        "aria-label": r,
-        children: t.map((o, d) => /* @__PURE__ */ c(
+        className: y(this.props) || null,
+        "aria-label": a,
+        children: e.map((d, c) => /* @__PURE__ */ u(
           "button",
           {
-            id: _(i, o.id),
+            id: le(r, d.id),
             type: "button",
             role: "tab",
-            disabled: !!o.disabled,
+            disabled: !!d.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(i, d.id) ? "true" : "false",
+            "aria-controls": se(r, d.id),
+            tabIndex: Object.is(i, d.id) ? 0 : -1,
+            onClick: (h) => this.selectTab(d, h),
+            onKeyDown: (h) => this.handleKeyDown(h, c, e),
+            children: d.label ?? String(d.id)
           },
-          String(o.id)
+          String(d.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, r) {
+    const i = r.map((c, h) => ({ tab: c, tabIndex: h })).filter(({ tab: c }) => !c.disabled);
+    if (i.length === 0) return;
+    const s = Math.max(
       0,
-      e.findIndex(({ tabIndex: d }) => d === r)
+      i.findIndex(({ tabIndex: c }) => c === 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 d;
+    if (e.key === "ArrowRight" || e.key === "ArrowDown")
+      d = i[(s + 1) % i.length];
+    else if (e.key === "ArrowLeft" || e.key === "ArrowUp")
+      d = i[(s - 1 + i.length) % i.length];
+    else if (e.key === "Home") d = i[0];
+    else if (e.key === "End") d = i.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];
-      d == null || d.focus();
+    if (d != null && (e.preventDefault(), this.selectTab(d.tab, e), this.dom instanceof Element)) {
+      const c = this.dom.querySelectorAll('[role="tab"]')[d.tabIndex];
+      c == null || c.focus();
     }
   }
 }
-a(I, "hostName", "tab-line"), a(I, "standaloneHostName", "tab-line"), a(I, "baseStyles", [
+n(T, "hostName", "tab-line"), n(T, "standaloneHostName", "tab-line"), n(T, "baseStyles", [
   ['& > [data-part="tab"]', ["uiline", "button"]]
-]), a(I, "css", m`
+]), n(T, "css", m`
         & {
             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 tt(n, s) {
-  return `${n}-panel-${et(s)}`;
-}
-function et(n) {
-  return encodeURIComponent(String(n)).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);
-  }
-}
-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(
+function le(o, l) {
+  return `${o}-tab-${de(l)}`;
+}
+function se(o, l) {
+  return `${o}-panel-${de(l)}`;
+}
+function de(o) {
+  return encodeURIComponent(String(o)).replaceAll("%", "-");
+}
+function Y(o) {
+  if (!Array.isArray(o)) throw new TypeError("TabLine tabs must be an array");
+  const l = /* @__PURE__ */ new Set();
+  for (const e of o) {
+    if (e == null || e.id == null) throw new TypeError("Each tab requires an id");
+    if (l.has(e.id)) throw new Error(`Duplicate tab id: ${String(e.id)}`);
+    l.add(e.id);
+  }
+}
+class $ extends b {
+  constructor(e = {}) {
+    var i;
+    super(e);
+    n(this, "valueEmitter");
+    n(this, "activeTabEmitter");
+    n(this, "baseId");
+    const a = j(e), r = { ...e };
+    r.valueEmitter == null && e.activeTabEmitter != null && (r.valueEmitter = e.activeTabEmitter), r.defaultValue == null && e.initialActiveTabId != null && (r.defaultValue = e.initialActiveTabId), this.valueEmitter = O(
       this,
-      i,
-      ((e = r.find((l) => !l.disabled)) == null ? void 0 : e.id) ?? null,
+      r,
+      ((i = a.find((s) => !s.disabled)) == null ? void 0 : i.id) ?? null,
       "active tab"
-    ), this.activeTabEmitter = this.valueEmitter, this.baseId = x("tabs", t.id);
+    ), this.activeTabEmitter = this.valueEmitter, this.baseId = E("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 = j(this.props);
+    e.some(({ id: r }) => Object.is(r, this.valueEmitter.get())) || this.valueEmitter.set(((a = e.find((r) => !r.disabled)) == null ? void 0 : a.id) ?? null), this.watch(this.valueEmitter);
   }
-  setProps(t) {
-    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;
+  setProps(e) {
+    var r;
+    super.setProps(e);
+    const a = j(e);
+    return a.some(({ id: i }) => Object.is(i, this.valueEmitter.get())) || this.valueEmitter.set(((r = a.find((i) => !i.disabled)) == null ? void 0 : r.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(
-      i,
+    const e = j(this.props), a = e.find(({ id: i }) => Object.is(i, this.valueEmitter.get())) ?? e.find((i) => !i.disabled) ?? null, r = this.Host;
+    return /* @__PURE__ */ v(
+      r,
       {
         id: this.baseId,
-        className: b(this.props) || null,
+        className: y(this.props) || null,
         children: [
-          /* @__PURE__ */ c(
-            I,
+          /* @__PURE__ */ u(
+            T,
             {
-              tabs: t.map(({ id: e, label: l, disabled: o }) => ({ id: e, label: l, disabled: o })),
+              tabs: e.map(({ id: i, label: s, disabled: d }) => ({ id: i, label: s, disabled: d })),
               valueEmitter: this.valueEmitter,
               baseId: this.baseId,
               ...this.props.label == null ? {} : { label: this.props.label },
@@ -165,33 +169,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: se(this.baseId, a.id),
               role: "tabpanel",
               "data-part": "content",
-              "aria-labelledby": _(this.baseId, r.id),
+              "aria-labelledby": le(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`
+n($, "dependencies", [T, ie]), n($, "hostName", "tab-panel"), n($, "standaloneHostName", "tab-panel"), n($, "css", m`
         & {
             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 +203,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 j(o) {
+  const l = o.tabs ?? [];
+  if (!Array.isArray(l)) throw new TypeError("TabPanel tabs must be an array");
+  const a = (Array.isArray(o.children) ? o.children : o.children == null ? [] : [o.children]).filter((s) => J(s) && s.type === ie).map((s, d) => {
+    if (!J(s)) throw new TypeError("TabPanel children must be Tab nodes");
+    const c = s.props;
     return {
-      id: d.id ?? `tab-${o + 1}`,
-      label: d.label ?? `Tab ${o + 1}`,
-      disabled: !!d.disabled,
-      content: d.children ?? []
+      id: c.id ?? `tab-${d + 1}`,
+      label: c.label ?? `Tab ${d + 1}`,
+      disabled: !!c.disabled,
+      content: c.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);
-  }
-  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`;
+  }), r = l.length > 0 ? l.map((s) => ({
+    ...s,
+    label: s.label ?? String(s.id),
+    disabled: !!s.disabled,
+    content: s.content ?? s.component ?? []
+  })) : a, i = /* @__PURE__ */ new Set();
+  for (const s of r) {
+    if ((s == null ? void 0 : s.id) == null) throw new TypeError("Each tab requires an id");
+    if (i.has(s.id)) throw new Error(`Duplicate tab id: ${String(s.id)}`);
+    i.add(s.id);
+  }
+  return r;
+}
+class q extends b {
+  constructor(e = {}) {
+    super(e);
+    n(this, "panelId");
+    n(this, "headerId");
+    this.panelId = E("panel", e.id), this.headerId = `${this.panelId}-title`;
   }
   render() {
     const {
-      header: t = null,
-      toolbar: r = null,
-      children: i = [],
-      orientation: e = "vertical",
-      disabled: l = !1
+      header: e = null,
+      toolbar: a = null,
+      children: r = [],
+      orientation: i = "vertical",
+      disabled: s = !1
     } = this.props;
-    if (!["horizontal", "vertical"].includes(e))
+    if (!["horizontal", "vertical"].includes(i))
       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 d = this.Host, c = 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__ */ v(
+      d,
       {
         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: y(this.props) || null,
+        "data-orientation": i,
+        "data-disabled": s ? "" : null,
+        "aria-disabled": s ? "true" : null,
+        "aria-labelledby": e == null ? null : this.headerId,
         children: [
-          d,
-          r,
-          /* @__PURE__ */ c("div", { "data-part": "content", "data-orientation": e, children: i })
+          c,
+          a,
+          /* @__PURE__ */ u("div", { "data-part": "content", "data-orientation": i, children: r })
         ]
       }
     );
   }
 }
-a($, "hostName", "panel"), a($, "standaloneHostName", "layout-panel"), a($, "baseStyles", [
+n(q, "hostName", "panel"), n(q, "standaloneHostName", "layout-panel"), n(q, "baseStyles", [
   ["&", ["panel"]],
   ['& > [data-part="header"]', ["sectionheader"]]
-]), a($, "css", m`
+]), n(q, "css", m`
         & {
             display: flex;
             flex-direction: column;
@@ -280,6 +284,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 +313,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 W extends b {
+  constructor(e = {}) {
+    super(e);
+    n(this, "sidebarId");
+    n(this, "headerId");
+    this.sidebarId = E("sidebar", e.id), this.headerId = `${this.sidebarId}-title`;
   }
   render() {
     const {
-      header: t = null,
-      toolbar: r = 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(
+      header: e = null,
+      toolbar: a = null,
+      ariaLabel: r,
+      children: i = []
+    } = this.props, s = 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__ */ v(
       "aside",
       {
         id: this.sidebarId,
-        className: b(this.props) || void 0,
+        className: y(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 ? r : 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 })
+          s,
+          a == null ? null : /* @__PURE__ */ u("div", { "data-part": "toolbar", children: a }),
+          /* @__PURE__ */ u("div", { "data-part": "content", tabIndex: 0, children: i })
         ]
       }
     );
   }
 }
-a(P, "baseStyles", [
+n(W, "baseStyles", [
   ['aside[data-fray-component="sidebar"]', ["panel"]],
   ['aside[data-fray-component="sidebar"] > [data-part="header"]', ["sectionheader"]]
-]), a(P, "css", m`
+]), n(W, "css", m`
         aside[data-fray-component="sidebar"] {
             display: flex;
             flex-direction: column;
@@ -357,44 +374,44 @@ a(P, "baseStyles", [
             overflow-y: auto;
         }
     `);
-class F extends p {
+class L extends b {
   render() {
     const {
-      primary: s = null,
-      secondary: t = null,
-      direction: r = "horizontal",
-      primarySize: i,
-      primaryLabel: e,
-      secondaryLabel: l
+      primary: l = null,
+      secondary: e = null,
+      direction: a = "horizontal",
+      primarySize: r,
+      primaryLabel: i,
+      secondaryLabel: s
     } = 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))
+    if (r != null && (typeof r != "string" || r.length === 0))
       throw new TypeError("SplitView primarySize must be a non-empty CSS size");
-    const o = this.Host;
-    return /* @__PURE__ */ g(
-      o,
+    const d = this.Host;
+    return /* @__PURE__ */ v(
+      d,
       {
-        className: b(this.props) || null,
-        "data-direction": r,
-        style: i == null ? void 0 : { "--split-primary-size": i },
+        className: y(this.props) || null,
+        "data-direction": a,
+        style: r == null ? void 0 : { "--split-primary-size": r },
         children: [
-          /* @__PURE__ */ c(
+          /* @__PURE__ */ u(
             "div",
             {
               "data-part": "primary",
-              role: e == null ? null : "region",
-              "aria-label": e,
-              children: s
+              role: i == null ? null : "region",
+              "aria-label": i,
+              children: l
             }
           ),
-          /* @__PURE__ */ c(
+          /* @__PURE__ */ u(
             "div",
             {
               "data-part": "secondary",
-              role: l == null ? null : "region",
-              "aria-label": l,
-              children: t ?? this.props.children ?? []
+              role: s == null ? null : "region",
+              "aria-label": s,
+              children: e ?? this.props.children ?? []
             }
           )
         ]
@@ -402,7 +419,7 @@ class F extends p {
     );
   }
 }
-a(F, "hostName", "split-view"), a(F, "standaloneHostName", "split-view"), a(F, "css", m`
+n(L, "hostName", "split-view"), n(L, "standaloneHostName", "split-view"), n(L, "css", m`
         & {
             display: grid;
             flex: 1 1 auto;
@@ -437,23 +454,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 ce extends b {
   render() {
-    const { term: s, value: t, children: r = [] } = this.props;
-    return /* @__PURE__ */ g(
+    const { term: l, value: e, children: a = [] } = this.props;
+    return /* @__PURE__ */ v(
       "div",
       {
-        className: b(this.props) || void 0,
+        className: y(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: l }),
+          /* @__PURE__ */ u("dd", { children: e ?? a })
         ]
       }
     );
   }
 }
-a(at, "css", m`
+n(ce, "css", m`
         div[data-fray-component="description-item"] {
             display: grid;
             grid-template-columns: minmax(7rem, 0.7fr) minmax(0, 1.3fr);
@@ -480,12 +497,12 @@ a(at, "css", m`
             }
         }
     `);
-class U extends p {
+class X extends b {
   render() {
-    return /* @__PURE__ */ c(
+    return /* @__PURE__ */ u(
       "dl",
       {
-        className: b(this.props) || void 0,
+        className: y(this.props) || void 0,
         "data-fray-component": "description-list",
         "aria-label": this.props.label,
         children: this.props.children ?? []
@@ -493,119 +510,119 @@ class U extends p {
     );
   }
 }
-a(U, "dependencies", [at]), a(U, "css", m`
+n(X, "dependencies", [ce]), n(X, "css", m`
         dl[data-fray-component="description-list"] {
             display: grid;
             margin: 0;
         }
     `);
-const w = class w extends Z {
-  constructor(s = {}) {
-    super({ ...s, symbols: w.symbols });
+const I = class I extends ne {
+  constructor(l = {}) {
+    super({ ...l, symbols: I.symbols });
   }
 };
-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 });
+n(I, "hostName", "quad-checkbox"), n(I, "standaloneHostName", "quad-checkbox"), n(I, "symbols", [
+  ["✖", x.Deny],
+  ["☐", x.Neutral],
+  ["✓", x.Prefer],
+  ["+", x.Require]
+]), n(I, "defaultSemanticState", x.Neutral);
+let Z = I;
+const S = class S extends ne {
+  constructor(l = {}) {
+    super({ ...l, symbols: S.symbols });
   }
 };
-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 = {}) {
-    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, {
+n(S, "hostName", "tri-checkbox"), n(S, "standaloneHostName", "tri-checkbox"), n(S, "symbols", [
+  ["✖", x.Deny],
+  ["☐", x.Neutral],
+  ["✓", x.Prefer]
+]), n(S, "defaultSemanticState", x.Neutral);
+let Q = S;
+class C extends b {
+  constructor(e = {}) {
+    var i;
+    super(e);
+    n(this, "inputId");
+    n(this, "errorId");
+    n(this, "optionsEmitter");
+    n(this, "valueEmitter");
+    n(this, "ownsOptionsEmitter");
+    this.inputId = E("dropdown", e.id), this.errorId = `${this.inputId}-error`;
+    const a = e.options ?? [];
+    ye(a) ? (this.optionsEmitter = a, this.ownsOptionsEmitter = !1) : (G(a), this.optionsEmitter = new me(a, {
       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");
+    const r = ((i = this.optionsEmitter.get()[0]) == null ? void 0 : i.value) ?? "";
+    this.valueEmitter = O(this, e, r, "dropdown value");
   }
   initialize() {
     this.watch(this.valueEmitter, this.optionsEmitter);
   }
   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,
+      label: e,
+      name: a,
+      disabled: r = !1,
+      required: i = !1,
+      error: s = null,
+      placeholder: d = "Select…",
+      ariaLabel: c,
+      onChange: h
+    } = this.props, g = this.optionsEmitter.get() ?? [];
+    G(g);
+    const p = this.valueEmitter.get(), U = this.Host;
+    return /* @__PURE__ */ v(
+      U,
       {
-        className: b(this.props) || null,
-        "data-disabled": i ? "" : null,
-        "data-required": e ? "" : null,
-        "data-error": l == null ? null : "",
+        className: y(this.props) || null,
+        "data-disabled": r ? "" : null,
+        "data-required": i ? "" : null,
+        "data-error": s == null ? null : "",
         children: [
-          t == null ? null : /* @__PURE__ */ c("label", { htmlFor: this.inputId, children: t }),
-          /* @__PURE__ */ g(
+          e == null ? null : /* @__PURE__ */ u("label", { htmlFor: this.inputId, children: e }),
+          /* @__PURE__ */ v(
             "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);
+              name: a,
+              value: p == null ? "" : String(p),
+              disabled: r,
+              required: i,
+              "aria-label": e == null ? c : null,
+              "aria-invalid": s == null ? null : "true",
+              "aria-describedby": s == null ? null : this.errorId,
+              onChange: (f) => {
+                const z = ge(f, "dropdown change"), H = g.find(({ value: M }) => String(M) === z), R = (H == null ? void 0 : H.value) ?? z;
+                this.valueEmitter.set(R, "dropdown selection"), N(h, R, f);
               },
               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"))
+                p == null || p === "" ? /* @__PURE__ */ u("option", { value: "", disabled: i, selected: !0, children: d }) : null,
+                g.map((f) => {
+                  if (f == null || !Object.hasOwn(f, "value"))
                     throw new TypeError("Dropdown options require value and label fields");
-                  return /* @__PURE__ */ c(
+                  return /* @__PURE__ */ u(
                     "option",
                     {
-                      value: String(h.value),
-                      disabled: !!h.disabled,
-                      selected: Object.is(f, h.value),
-                      children: h.label ?? String(h.value)
+                      value: String(f.value),
+                      disabled: !!f.disabled,
+                      selected: Object.is(p, f.value),
+                      children: f.label ?? String(f.value)
                     },
-                    String(h.value)
+                    String(f.value)
                   );
                 })
               ]
             }
           ),
-          l == null ? null : /* @__PURE__ */ c(
+          s == null ? null : /* @__PURE__ */ u(
             "p",
             {
               id: this.errorId,
               "data-part": "error",
               role: "alert",
-              children: String(l)
+              children: String(s)
             }
           )
         ]
@@ -613,104 +630,104 @@ class j extends p {
     );
   }
 }
-a(j, "hostName", "dropdown"), a(j, "standaloneHostName", "drop-down"), a(j, "baseStyles", [
+n(C, "hostName", "dropdown"), n(C, "standaloneHostName", "drop-down"), n(C, "baseStyles", [
   ["&", ["labeledinput", "inputline"]],
   ["& > label", ["label"]],
   ["& > select", ["input", "inputline"]],
   ["&[data-disabled]", ["disabled"]],
   ["&[data-error]", ["error"]]
-]), a(j, "css", m`
+]), n(C, "css", m`
         & {
             position: relative;
         }
     `);
-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 ye(o) {
+  return o != null && (typeof o == "object" || typeof o == "function") && typeof Reflect.get(o, "get") == "function" && typeof Reflect.get(o, "subscribe") == "function";
+}
+function ge(o, l) {
+  const e = o.currentTarget;
+  if (e == null || typeof Reflect.get(e, "value") != "string")
+    throw new TypeError(`${l} requires a value-bearing event target`);
+  return Reflect.get(e, "value");
+}
+class F extends b {
+  constructor(e = {}) {
+    super(e);
+    n(this, "inputId");
+    n(this, "errorId");
+    n(this, "valueEmitter");
+    this.inputId = E("textbox", e.id), this.errorId = `${this.inputId}-error`, this.valueEmitter = O(this, e, "", "textbox value");
   }
   initialize() {
     this.watch(this.valueEmitter);
   }
   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,
+      label: e,
+      placeholder: a,
+      type: r = "text",
+      name: i,
+      disabled: s = !1,
+      required: d = !1,
+      readOnly: c = !1,
+      error: h = null,
+      autoComplete: g,
+      inputMode: p,
+      minLength: U,
+      maxLength: f,
+      pattern: z,
+      ariaLabel: H,
       inputRef: R,
-      onInput: D,
-      onChange: it
-    } = this.props, rt = this.valueEmitter.get() ?? "", lt = this.Host;
-    return /* @__PURE__ */ g(
-      lt,
+      onInput: M,
+      onChange: ue
+    } = this.props, he = this.valueEmitter.get() ?? "", be = this.Host;
+    return /* @__PURE__ */ v(
+      be,
       {
-        className: b(this.props) || null,
-        "data-disabled": l ? "" : null,
-        "data-required": o ? "" : null,
-        "data-error": u == null ? null : "",
+        className: y(this.props) || null,
+        "data-disabled": s ? "" : null,
+        "data-required": d ? "" : null,
+        "data-error": h == null ? null : "",
         children: [
-          t == null ? null : /* @__PURE__ */ c("label", { htmlFor: this.inputId, children: t }),
-          /* @__PURE__ */ c(
+          e == null ? null : /* @__PURE__ */ u("label", { htmlFor: this.inputId, children: e }),
+          /* @__PURE__ */ u(
             "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,
+              name: i,
+              type: r,
+              value: he,
+              placeholder: a,
+              disabled: s,
+              required: d,
+              readOnly: c,
+              autoComplete: g,
+              inputMode: p,
+              minLength: U,
+              maxLength: f,
+              pattern: z,
               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);
+              "aria-label": e == null ? H : null,
+              "aria-invalid": h == null ? null : "true",
+              "aria-describedby": h == null ? null : this.errorId,
+              onInput: (A) => {
+                const K = _(A, "textbox input");
+                this.valueEmitter.set(K, "textbox input"), N(M, K, A);
               },
-              onChange: (S) => H(
-                it,
-                W(S, "textbox change"),
-                S
+              onChange: (A) => N(
+                ue,
+                _(A, "textbox change"),
+                A
               )
             }
           ),
-          u == null ? null : /* @__PURE__ */ c(
+          h == null ? null : /* @__PURE__ */ u(
             "p",
             {
               id: this.errorId,
               "data-part": "error",
               role: "alert",
-              children: String(u)
+              children: String(h)
             }
           )
         ]
@@ -718,96 +735,96 @@ class q extends p {
     );
   }
 }
-a(q, "hostName", "textbox"), a(q, "standaloneHostName", "text-box"), a(q, "baseStyles", [
+n(F, "hostName", "textbox"), n(F, "standaloneHostName", "text-box"), n(F, "baseStyles", [
   ["&", ["labeledinput", "inputline"]],
   ["& > label", ["label"]],
   ["& > input", ["input", "inputline"]],
   ["&[data-disabled]", ["disabled"]],
   ["&[data-error]", ["error"]]
-]), a(q, "css", m`
+]), n(F, "css", m`
         & input {
             cursor: text;
         }
 
         & > [data-part="error"] {
             margin: 0;
-            color: var(--error-color, #b00020);
+            color: var(--fray-color-error, var(--error-color));
         }
     `);
-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(
+function _(o, l) {
+  const e = o.currentTarget;
+  if (e == null || typeof Reflect.get(e, "value") != "string")
+    throw new TypeError(`${l} requires a value-bearing event target`);
+  return Reflect.get(e, "value");
+}
+class ee extends b {
+  constructor(e = {}) {
+    var i;
+    super(e);
+    n(this, "valueEmitter");
+    n(this, "groupId");
+    n(this, "legendId");
+    const a = e.options ?? [];
+    te(a);
+    const r = ((i = a[0]) == null ? void 0 : i[0]) ?? null;
+    this.valueEmitter = O(
       this,
-      t,
-      i ?? null,
+      e,
+      r ?? null,
       "toggle value"
-    ), this.groupId = x("toggle", t.id), this.legendId = `${this.groupId}-label`;
+    ), this.groupId = E("toggle", e.id), this.legendId = `${this.groupId}-label`;
   }
   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));
+  selectOption(e, a = null) {
+    this.props.disabled || (this.valueEmitter.set(e, "toggle option selected"), N(this.props.onChange, e, a));
   }
   render() {
     const {
-      options: t = [],
-      label: r,
-      disabled: i = !1,
-      required: e = !1
+      options: e = [],
+      label: a,
+      disabled: r = !1,
+      required: i = !1
     } = this.props;
-    Y(t);
-    const l = this.valueEmitter.get(), o = Math.max(
+    te(e);
+    const s = this.valueEmitter.get(), d = Math.max(
       0,
-      t.findIndex(([d]) => Object.is(d, l))
+      e.findIndex(([c]) => Object.is(c, s))
     );
-    return /* @__PURE__ */ g(
+    return /* @__PURE__ */ v(
       "fieldset",
       {
         id: this.groupId,
-        disabled: i,
-        className: b(this.props) || void 0,
+        disabled: r,
+        className: y(this.props) || void 0,
         "data-fray-component": "toggle",
-        "data-disabled": i ? "" : null,
-        "aria-required": e ? "true" : null,
+        "data-disabled": r ? "" : null,
+        "aria-required": i ? "true" : null,
         children: [
-          r == null ? null : /* @__PURE__ */ c("legend", { id: this.legendId, children: r }),
-          /* @__PURE__ */ c(
+          a == null ? null : /* @__PURE__ */ u("legend", { id: this.legendId, children: a }),
+          /* @__PURE__ */ u(
             "div",
             {
               "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(
+              "aria-label": a == null ? this.props.ariaLabel : null,
+              "aria-labelledby": a == null ? null : this.legendId,
+              children: e.map(([c, h], g) => /* @__PURE__ */ u(
                 "button",
                 {
                   type: "button",
                   role: "radio",
-                  disabled: i,
+                  disabled: r,
                   "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
+                  "aria-checked": Object.is(s, c) ? "true" : "false",
+                  "data-value": String(c),
+                  tabIndex: g === d ? 0 : -1,
+                  onClick: (p) => this.selectOption(c, p),
+                  onKeyDown: (p) => this.handleKeyDown(p, g, e),
+                  children: h
                 },
-                String(d)
+                String(c)
               ))
             }
           )
@@ -815,27 +832,27 @@ class X extends p {
       }
     );
   }
-  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;
+  handleKeyDown(e, a, r) {
+    const { key: i } = e;
+    let s;
+    if (i === "ArrowRight" || i === "ArrowDown") s = (a + 1) % r.length;
+    else if (i === "ArrowLeft" || i === "ArrowUp")
+      s = (a - 1 + r.length) % r.length;
+    else if (i === "Home") s = 0;
+    else if (i === "End") s = r.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];
-      d == null || d.focus();
+    e.preventDefault();
+    const d = r[s];
+    if (d != null && (this.selectOption(d[0], e), this.dom instanceof Element)) {
+      const c = this.dom.querySelectorAll('[role="radio"]')[s];
+      c == null || c.focus();
     }
   }
 }
-a(X, "baseStyles", [
+n(ee, "baseStyles", [
   ['fieldset[data-fray-component="toggle"] > [data-part="options"]', ["uiline"]],
   ['fieldset[data-fray-component="toggle"] [data-part="option"]', ["uiline", "button"]]
-]), a(X, "css", m`
+]), n(ee, "css", m`
         fieldset[data-fray-component="toggle"] {
             margin: 0;
             padding: 0;
@@ -848,6 +865,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 +878,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 te(o) {
+  G(o);
+  for (const l of o)
+    if (!Array.isArray(l) || l.length < 2)
       throw new TypeError("Toggle options must be [value, label] tuples");
 }
-class V extends p {
+class P extends b {
   render() {
     const {
-      children: s = [],
-      id: t,
-      label: r = "Actions",
-      orientation: i = "horizontal"
+      children: l = [],
+      id: e,
+      label: a = "Actions",
+      orientation: r = "horizontal"
     } = this.props;
-    if (!["horizontal", "vertical"].includes(i))
+    if (!["horizontal", "vertical"].includes(r))
       throw new TypeError("Toolbar orientation must be horizontal or vertical");
-    const e = this.Host;
-    return /* @__PURE__ */ c(
-      e,
+    const i = this.Host;
+    return /* @__PURE__ */ u(
+      i,
       {
-        id: t,
+        id: e,
         role: "toolbar",
-        className: b(this.props) || null,
-        "data-orientation": i,
-        "aria-label": r,
-        "aria-orientation": i,
-        children: s
+        className: y(this.props) || null,
+        "data-orientation": r,
+        "aria-label": a,
+        "aria-orientation": r,
+        children: l
       }
     );
   }
 }
-a(V, "hostName", "toolbar"), a(V, "standaloneHostName", "tool-bar"), a(V, "baseStyles", [
+n(P, "hostName", "toolbar"), n(P, "standaloneHostName", "tool-bar"), n(P, "baseStyles", [
   ["&", ["toolbar"]]
-]), a(V, "css", m`
+]), n(P, "css", m`
         & {
             display: flex;
             flex-wrap: wrap;
@@ -911,40 +932,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 B extends b {
+  constructor(e) {
+    super(e);
+    n(this, "progressId");
+    if (this.progressId = E("progress", e.id), e.valueEmitter != null && !ve(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 r = a == null ? null : Math.min(a, e), i = this.props.valueText ?? (r == null ? "In progress" : `${Math.round(r / e * 100)}%`), s = this.Host;
+    return /* @__PURE__ */ v(s, { className: y(this.props) || null, children: [
+      /* @__PURE__ */ v("div", { "data-part": "label-line", children: [
+        /* @__PURE__ */ u("label", { htmlFor: this.progressId, children: this.props.label }),
+        /* @__PURE__ */ u("span", { "data-part": "value", children: i })
       ] }),
-      /* @__PURE__ */ c(
+      /* @__PURE__ */ u(
         "progress",
         {
           id: this.progressId,
-          value: i ?? void 0,
-          max: t,
-          "aria-valuetext": e,
-          children: e
+          value: r ?? void 0,
+          max: e,
+          "aria-valuetext": i,
+          children: i
         }
       )
     ] });
   }
 }
-a(C, "hostName", "progress-bar"), a(C, "standaloneHostName", "progress-bar"), a(C, "css", m`
+n(B, "hostName", "progress-bar"), n(B, "standaloneHostName", "progress-bar"), n(B, "css", m`
         & {
             display: grid;
             gap: var(--spacing-small, 0.5rem);
@@ -963,7 +984,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 +995,318 @@ 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 ve(o) {
+  return o != null && (typeof o == "object" || typeof o == "function") && typeof Reflect.get(o, "get") == "function" && typeof Reflect.get(o, "subscribe") == "function";
+}
+const He = Object.freeze([
+  t("--fray-color-canvas", "color", "palette", "color", "Application canvas"),
+  t("--fray-color-surface", "color", "palette", "color", "Primary surface"),
+  t("--fray-color-surface-muted", "color", "palette", "color", "Subdued surface"),
+  t("--fray-color-surface-raised", "color", "palette", "color", "Raised surface"),
+  t("--fray-color-surface-inset", "color", "palette", "color", "Inset surface"),
+  t("--fray-color-text", "color", "palette", "color", "Primary text"),
+  t("--fray-color-text-muted", "color", "palette", "color", "Secondary text"),
+  t("--fray-color-border", "color", "palette", "color", "Ordinary border"),
+  t("--fray-color-border-strong", "color", "palette", "color", "Emphasized border"),
+  t("--fray-color-primary", "color", "palette", "color", "Primary accent"),
+  t("--fray-color-primary-hover", "color", "palette", "color", "Hovered accent"),
+  t("--fray-color-primary-active", "color", "palette", "color", "Active accent"),
+  t("--fray-color-primary-soft", "color", "palette", "color", "Subtle accent surface"),
+  t("--fray-color-on-primary", "color", "palette", "color", "Content on primary accent"),
+  t("--fray-color-focus", "color", "palette", "color", "Keyboard focus indication"),
+  t("--fray-color-selection", "color", "palette", "color", "Selected item surface"),
+  t("--fray-color-on-selection", "color", "palette", "color", "Content on selection"),
+  t("--fray-color-disabled", "color", "palette", "color", "Disabled surface"),
+  t("--fray-color-on-disabled", "color", "palette", "color", "Disabled content"),
+  t("--fray-color-error", "color", "status", "color", "Error state"),
+  t("--fray-color-on-error", "color", "status", "color", "Content on error"),
+  t("--fray-color-success", "color", "status", "color", "Success state"),
+  t("--fray-color-on-success", "color", "status", "color", "Content on success"),
+  t("--fray-color-highlight", "color", "palette", "color", "Light reflection/highlight"),
+  t("--fray-color-shadow", "color", "palette", "color", "Shadow tint"),
+  t("--fray-font-family", "theme", "typography", "font", "UI font stack"),
+  t("--fray-font-size", "theme", "typography", "dimension", "Base UI font size"),
+  t("--fray-line-height", "theme", "typography", "dimension", "Base UI line height"),
+  t("--fray-control-min-height", "theme", "control", "dimension", "Minimum control height"),
+  t("--fray-space-xs", "theme", "spacing", "dimension", "Extra-small spacing"),
+  t("--fray-space-sm", "theme", "spacing", "dimension", "Small spacing"),
+  t("--fray-space-md", "theme", "spacing", "dimension", "Medium spacing"),
+  t("--fray-space-lg", "theme", "spacing", "dimension", "Large spacing"),
+  t("--fray-radius-sm", "theme", "shape", "radius", "Small corner radius"),
+  t("--fray-radius-md", "theme", "shape", "radius", "Ordinary corner radius"),
+  t("--fray-radius-lg", "theme", "shape", "radius", "Large corner radius"),
+  t("--fray-motion-fast", "theme", "motion", "duration", "Fast interaction transition"),
+  t("--fray-ui-background", "theme", "surface", "background", "Default UI background"),
+  t("--fray-ui-color", "theme", "surface", "color", "Default UI text"),
+  t("--fray-ui-border", "theme", "surface", "border", "Default UI border"),
+  t("--fray-ui-shadow", "theme", "surface", "shadow", "Default raised shadow"),
+  t("--fray-focus-ring", "theme", "focus", "shadow", "Keyboard focus ring"),
+  t("--fray-panel-background", "theme", "panel", "background", "Panel surface", "--fray-ui-background"),
+  t("--fray-panel-color", "theme", "panel", "color", "Panel content", "--fray-ui-color"),
+  t("--fray-panel-border", "theme", "panel", "border", "Panel border", "--fray-ui-border"),
+  t("--fray-panel-shadow", "theme", "panel", "shadow", "Panel shadow", "--fray-ui-shadow"),
+  t("--fray-panel-radius", "theme", "panel", "radius", "Panel radius", "--fray-radius-md"),
+  t("--fray-dialog-shadow", "theme", "dialog", "shadow", "Modal dialog shadow", "--fray-panel-shadow"),
+  t("--fray-dialog-backdrop-background", "theme", "dialog", "background", "Modal backdrop"),
+  t("--fray-header-background", "theme", "header", "background", "Generic header surface"),
+  t("--fray-header-color", "theme", "header", "color", "Generic header content"),
+  t("--fray-header-border", "theme", "header", "border", "Generic header border"),
+  t("--fray-header-shadow", "theme", "header", "shadow", "Generic header shadow"),
+  t("--fray-section-header-background", "theme", "header", "background", "Section header surface", "--fray-header-background"),
+  t("--fray-section-header-color", "theme", "header", "color", "Section header content", "--fray-header-color"),
+  t("--fray-section-header-border", "theme", "header", "border", "Section header border", "--fray-header-border"),
+  t("--fray-section-header-shadow", "theme", "header", "shadow", "Section header shadow", "--fray-header-shadow"),
+  t("--fray-panel-header-background", "theme", "header", "background", "Panel header surface", "--fray-section-header-background"),
+  t("--fray-panel-header-color", "theme", "header", "color", "Panel header content", "--fray-section-header-color"),
+  t("--fray-table-header-background", "theme", "header", "background", "Table header surface", "--fray-section-header-background"),
+  t("--fray-table-header-color", "theme", "header", "color", "Table header content", "--fray-section-header-color"),
+  t("--fray-dialog-header-background", "theme", "header", "background", "Dialog header surface", "--fray-section-header-background"),
+  t("--fray-dialog-header-color", "theme", "header", "color", "Dialog header content", "--fray-section-header-color"),
+  t("--fray-button-background", "theme", "button", "background", "Generic button surface"),
+  t("--fray-button-background-hover", "theme", "button", "background", "Hovered button surface"),
+  t("--fray-button-background-active", "theme", "button", "background", "Pressed button surface"),
+  t("--fray-button-background-disabled", "theme", "button", "background", "Disabled button surface"),
+  t("--fray-button-color", "theme", "button", "color", "Generic button content"),
+  t("--fray-button-border", "theme", "button", "border", "Generic button border"),
+  t("--fray-button-shadow", "theme", "button", "shadow", "Generic button shadow"),
+  t("--fray-button-shadow-active", "theme", "button", "shadow", "Pressed button shadow"),
+  t("--fray-toggle-button-background", "theme", "button", "background", "Toggle option surface", "--fray-button-background"),
+  t("--fray-toggle-button-background-checked", "theme", "button", "background", "Selected toggle option", "--fray-selection-background"),
+  t("--fray-tab-button-background", "theme", "button", "background", "Tab surface", "--fray-button-background"),
+  t("--fray-tab-button-background-active", "theme", "button", "background", "Active tab surface", "--fray-tab-active-background"),
+  t("--fray-menu-button-background", "theme", "button", "background", "Menu action surface", "--fray-button-background"),
+  t("--fray-dropdown-trigger-background", "theme", "button", "background", "Dropdown arrow/trigger surface", "--fray-button-background"),
+  t("--fray-table-header-button-background", "theme", "button", "background", "Table-header action surface", "--fray-button-background"),
+  t("--fray-input-background", "theme", "input", "background", "Input surface"),
+  t("--fray-input-color", "theme", "input", "color", "Input content"),
+  t("--fray-input-border", "theme", "input", "border", "Input border"),
+  t("--fray-input-shadow", "theme", "input", "shadow", "Input shadow"),
+  t("--fray-input-background-disabled", "theme", "input", "background", "Disabled input surface"),
+  t("--fray-input-color-disabled", "theme", "input", "color", "Disabled input content"),
+  t("--fray-selection-background", "theme", "selection", "background", "Selected item surface"),
+  t("--fray-selection-color", "theme", "selection", "color", "Selected item content"),
+  t("--fray-row-hover-background", "theme", "row", "background", "Hovered list/table/tree row"),
+  t("--fray-table-row-background", "theme", "table", "background", "Odd table row surface"),
+  t("--fray-table-row-alt-background", "theme", "table", "background", "Even table row surface"),
+  t("--fray-checkbox-box-background", "theme", "checkbox", "background", "Unchecked checkbox box", "--fray-input-background"),
+  t("--fray-checkbox-box-background-checked", "theme", "checkbox", "background", "Checked checkbox box", "--fray-selection-background"),
+  t("--fray-checkbox-box-border", "theme", "checkbox", "border", "Checkbox box border", "--fray-input-border"),
+  t("--fray-checkbox-symbol-color", "theme", "checkbox", "color", "Checkbox symbol", "--fray-selection-color"),
+  t("--fray-radio-background", "theme", "radio", "background", "Radio/toggle option surface", "--fray-toggle-button-background"),
+  t("--fray-radio-background-checked", "theme", "radio", "background", "Selected radio/toggle option", "--fray-selection-background"),
+  t("--fray-toolbar-background", "theme", "toolbar", "background", "Toolbar surface", "--fray-panel-background"),
+  t("--fray-toolbar-color", "theme", "toolbar", "color", "Toolbar content", "--fray-panel-color"),
+  t("--fray-toolbar-border", "theme", "toolbar", "border", "Toolbar border", "--fray-panel-border"),
+  t("--fray-toolbar-shadow", "theme", "toolbar", "shadow", "Toolbar shadow", "--fray-panel-shadow"),
+  t("--fray-tabline-background", "theme", "tabs", "background", "Tab strip surface", "--fray-panel-background"),
+  t("--fray-tab-active-background", "theme", "tabs", "background", "Active tab surface", "--fray-panel-background"),
+  t("--fray-progress-track-background", "theme", "progress", "background", "Progress track"),
+  t("--fray-progress-value-background", "theme", "progress", "background", "Progress value"),
+  t("--fray-working-background-image", "theme", "status", "background", "Indeterminate/loading texture")
+]), we = Object.freeze([
+  w("shiny", "Shiny", k("themes/shiny/theme.css")),
+  w("java", "Java", k("themes/java/theme.css")),
+  w("minimal", "Minimal", k("themes/minimal/theme.css"))
+]), ke = Object.freeze([
+  w("iceblue", "Ice blue", k("colors/iceblue/colors.css")),
+  w("ocean", "Ocean", k("colors/ocean/colors.css")),
+  w("green", "Green", k("colors/green/colors.css")),
+  w("gray", "Gray", k("colors/gray/colors.css")),
+  w("orange", "Orange", k("colors/orange/colors.css")),
+  w("purple", "Purple", k("colors/purple/colors.css")),
+  w("red", "Red", k("colors/red/colors.css")),
+  w("yellow", "Yellow", k("colors/yellow/colors.css"))
+]);
+function xe(o, l, e = globalThis.document) {
+  if (Ee(l), (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="${o}"]`;
+  let r = e.head.querySelector(a);
+  return r == null && (r = e.createElement("link"), r.rel = "stylesheet", r.dataset.frayStylesheet = o, e.head.append(r)), r.dataset.fraySelection = l.value, r.getAttribute("href") !== l.href && r.setAttribute("href", l.href), o === "theme" ? e.documentElement.dataset.frayTheme = l.value : e.documentElement.dataset.frayColor = l.value, r;
+}
+function V(o, l) {
+  const e = o.find((a) => a.value === l);
+  if (e == null) throw new RangeError(`Unknown Fray stylesheet selection: ${l}`);
+  return e;
+}
+function t(o, l, e, a, r, i) {
+  return i == null ? Object.freeze({ name: o, layer: l, family: e, value: a, description: r }) : Object.freeze({ name: o, layer: l, family: e, value: a, description: r, fallback: i });
+}
+function w(o, l, e) {
+  return Object.freeze({ value: o, label: l, href: e });
+}
+function k(o) {
+  const l = import.meta.url.includes("/src/styling/") ? `../../${o}` : `../${o}`;
+  return new URL(l, import.meta.url).href;
+}
+function Ee(o) {
+  if (o == null || typeof o != "object")
+    throw new TypeError("Fray stylesheet selection must be an option");
+  for (const l of ["value", "label", "href"])
+    if (typeof Reflect.get(o, l) != "string" || String(Reflect.get(o, l)).length === 0)
+      throw new TypeError(`Fray stylesheet option ${l} must be a non-empty string`);
+}
+class D extends b {
+  constructor(e, a, r) {
+    var d;
+    super(e);
+    n(this, "valueEmitter");
+    n(this, "inputId");
+    n(this, "kind");
+    n(this, "defaults");
+    const i = e.options ?? r;
+    oe(i);
+    const s = (d = i[0]) == null ? void 0 : d.value;
+    if (s == null) throw new TypeError(`${a} picker requires at least one option`);
+    this.kind = a, this.defaults = r, this.inputId = E(`${a}-picker`, e.id), this.valueEmitter = O(this, e, s, `${a} selection`), V(i, this.valueEmitter.get());
+  }
+  initialize() {
+    this.watch(this.valueEmitter);
+  }
+  render() {
+    const e = this.options, a = V(e, this.valueEmitter.get()), { label: r, ariaLabel: i, disabled: s = !1, onChange: d } = this.props, c = this.Host;
+    return /* @__PURE__ */ v(
+      c,
+      {
+        className: y(this.props) || null,
+        "data-kind": this.kind,
+        "data-disabled": s ? "" : null,
+        children: [
+          r == null ? null : /* @__PURE__ */ u("label", { htmlFor: this.inputId, children: r }),
+          /* @__PURE__ */ u(
+            "select",
+            {
+              id: this.inputId,
+              "data-part": "control",
+              value: a.value,
+              disabled: s,
+              "aria-label": r == null ? i : null,
+              onChange: (h) => {
+                const g = Ie(h), p = V(e, g);
+                this.valueEmitter.set(g, `${this.kind} selected`), N(d, g, 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 oe(e), e;
+  }
+  applySelection() {
+    const e = this.props.targetDocument ?? (typeof document > "u" ? null : document);
+    e != null && xe(
+      this.kind,
+      V(this.options, this.valueEmitter.get()),
+      e
+    );
+  }
+}
+n(D, "baseStyles", [
+  ["&", ["labeledinput", "inputline"]],
+  ["& > label", ["label"]],
+  ["& > select", ["input", "inputline"]],
+  ["&[data-disabled]", ["disabled"]]
+]), n(D, "css", m`
+        & {
+            position: relative;
+        }
+
+        & > select {
+            min-width: 8rem;
+        }
+    `);
+class re extends D {
+  constructor(l = {}) {
+    super(l, "theme", we);
+  }
+}
+n(re, "hostName", "theme-picker"), n(re, "standaloneHostName", "theme-picker");
+class ae extends D {
+  constructor(l = {}) {
+    super(l, "colors", ke);
+  }
+}
+n(ae, "hostName", "color-picker"), n(ae, "standaloneHostName", "color-picker");
+function oe(o) {
+  if (!Array.isArray(o) || o.length === 0)
+    throw new TypeError("Stylesheet picker options must be a non-empty array");
+  const l = /* @__PURE__ */ new Set();
+  for (const e of o) {
+    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 (l.has(e.value))
+      throw new Error(`Duplicate stylesheet picker value: ${e.value}`);
+    l.add(e.value);
+  }
+}
+function Ie(o) {
+  const l = o.currentTarget == null ? null : Reflect.get(o.currentTarget, "value");
+  if (typeof l != "string")
+    throw new TypeError("Stylesheet picker change requires a select element");
+  return l;
 }
 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,
+  Le as Button,
+  ne as Checkbox,
+  ae as ColorPicker,
+  b as Component,
+  ce as DescriptionItem,
+  X as DescriptionList,
+  C as Dropdown,
+  x as FilterMode,
+  Re as Fragment,
+  $e as FrayRuntime,
+  q as Panel,
+  B as ProgressBar,
+  Z as QuadCheckbox,
+  W as Sidebar,
+  L as SplitView,
+  je as StyleRegistry,
+  ie as Tab,
+  T as TabLine,
+  $ as TabPanel,
+  F as Textbox,
+  re as ThemePicker,
+  ee as Toggle,
+  P as Toolbar,
+  Q as TriCheckbox,
+  qe as createFrayRuntime,
+  Ce 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
+  Fe as defaultFrayRuntime,
+  V as findFrayStylesheetOption,
+  ke as frayColorOptions,
+  we as frayThemeOptions,
+  He as frayThemeVariableCatalog,
+  Pe as h,
+  u as jsx,
+  Ve as jsxDEV,
+  v as jsxs,
+  De as live,
+  xe as replaceFrayStylesheet,
+  Ue as styleRegistry,
+  le as tabButtonId,
+  se as tabPanelId
 };
 //# sourceMappingURL=index.js.map