@sylwellsoftware/fray 0.1.0-alpha.1

package/dist/index.js

@@ -0,0 +1,1014 @@
+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 {
+  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(
+      this,
+      i,
+      ((e = r.find((l) => !l.disabled)) == null ? void 0 : e.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));
+  }
+  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,
+      {
+        role: "tablist",
+        className: b(this.props) || null,
+        "aria-label": r,
+        children: t.map((o, d) => /* @__PURE__ */ c(
+          "button",
+          {
+            id: _(i, o.id),
+            type: "button",
+            role: "tab",
+            disabled: !!o.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)
+          },
+          String(o.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(
+      0,
+      e.findIndex(({ tabIndex: d }) => d === r)
+    );
+    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);
+    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();
+    }
+  }
+}
+a(I, "hostName", "tab-line"), a(I, "standaloneHostName", "tab-line"), a(I, "baseStyles", [
+  ['& > [data-part="tab"]', ["uiline", "button"]]
+]), a(I, "css", m`
+        & {
+            display: flex;
+            flex-flow: row wrap;
+            padding-top: 3px;
+            background: var(--tabline-bg, #f5f5f5);
+        }
+
+        & > [data-part="tab"] {
+            border-radius: var(--ui-border-radius) var(--ui-border-radius) 0 0;
+        }
+
+        & > [data-part="tab"][aria-selected="true"] {
+            background: var(--tab-bg-active, var(--panel-bg, #fff));
+        }
+    `);
+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(
+      this,
+      i,
+      ((e = r.find((l) => !l.disabled)) == null ? void 0 : e.id) ?? null,
+      "active tab"
+    ), this.activeTabEmitter = this.valueEmitter, this.baseId = x("tabs", t.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);
+  }
+  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;
+  }
+  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,
+      {
+        id: this.baseId,
+        className: b(this.props) || null,
+        children: [
+          /* @__PURE__ */ c(
+            I,
+            {
+              tabs: t.map(({ id: e, label: l, disabled: o }) => ({ id: e, label: l, disabled: o })),
+              valueEmitter: this.valueEmitter,
+              baseId: this.baseId,
+              ...this.props.label == null ? {} : { label: this.props.label },
+              ...this.props.onChange == null ? {} : { onChange: this.props.onChange }
+            },
+            "tab-list"
+          ),
+          r == null ? null : /* @__PURE__ */ c(
+            "div",
+            {
+              id: tt(this.baseId, r.id),
+              role: "tabpanel",
+              "data-part": "content",
+              "aria-labelledby": _(this.baseId, r.id),
+              tabIndex: 0,
+              children: r.content
+            },
+            String(r.id)
+          )
+        ]
+      }
+    );
+  }
+}
+a(z, "dependencies", [I, Q]), a(z, "hostName", "tab-panel"), a(z, "standaloneHostName", "tab-panel"), a(z, "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);
+        }
+
+        & > [data-part="content"] {
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+            overflow: auto;
+            background: var(--panel-bg, white);
+        }
+    `);
+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;
+    return {
+      id: d.id ?? `tab-${o + 1}`,
+      label: d.label ?? `Tab ${o + 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);
+  }
+  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`;
+  }
+  render() {
+    const {
+      header: t = null,
+      toolbar: r = null,
+      children: i = [],
+      orientation: e = "vertical",
+      disabled: l = !1
+    } = this.props;
+    if (!["horizontal", "vertical"].includes(e))
+      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,
+      {
+        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,
+        children: [
+          d,
+          r,
+          /* @__PURE__ */ c("div", { "data-part": "content", "data-orientation": e, children: i })
+        ]
+      }
+    );
+  }
+}
+a($, "hostName", "panel"), a($, "standaloneHostName", "layout-panel"), a($, "baseStyles", [
+  ["&", ["panel"]],
+  ['& > [data-part="header"]', ["sectionheader"]]
+]), a($, "css", m`
+        & {
+            display: flex;
+            flex-direction: column;
+            overflow: auto;
+            flex: 0 0 auto;
+        }
+
+        & > [data-part="header"] h2 {
+            margin: 0;
+            font: inherit;
+        }
+
+        & > [data-part="content"] {
+            display: flex;
+            flex: 1;
+            overflow: auto;
+            padding: var(--panel-padding, 0.75rem);
+            gap: var(--spacing-medium, 1rem);
+        }
+
+        & > [data-part="content"][data-orientation="horizontal"] {
+            flex-direction: row;
+        }
+
+        & > [data-part="content"][data-orientation="vertical"] {
+            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`;
+  }
+  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(
+      "aside",
+      {
+        id: this.sidebarId,
+        className: b(this.props) || void 0,
+        "data-fray-component": "sidebar",
+        "aria-label": t == null ? i : null,
+        "aria-labelledby": t == 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 })
+        ]
+      }
+    );
+  }
+}
+a(P, "baseStyles", [
+  ['aside[data-fray-component="sidebar"]', ["panel"]],
+  ['aside[data-fray-component="sidebar"] > [data-part="header"]', ["sectionheader"]]
+]), a(P, "css", m`
+        aside[data-fray-component="sidebar"] {
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+            min-height: 0;
+            overflow: hidden;
+        }
+
+        aside[data-fray-component="sidebar"] > [data-part="header"],
+        aside[data-fray-component="sidebar"] > [data-part="toolbar"] {
+            flex: 0 0 auto;
+        }
+
+        aside[data-fray-component="sidebar"] > [data-part="header"] h2 {
+            margin: 0;
+            font: inherit;
+        }
+
+        aside[data-fray-component="sidebar"] > [data-part="content"] {
+            flex: 1 1 auto;
+            min-width: 0;
+            min-height: 0;
+            overflow-x: hidden;
+            overflow-y: auto;
+        }
+    `);
+class F extends p {
+  render() {
+    const {
+      primary: s = null,
+      secondary: t = null,
+      direction: r = "horizontal",
+      primarySize: i,
+      primaryLabel: e,
+      secondaryLabel: l
+    } = this.props;
+    if (r !== "horizontal" && r !== "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,
+      {
+        className: b(this.props) || null,
+        "data-direction": r,
+        style: i == null ? void 0 : { "--split-primary-size": i },
+        children: [
+          /* @__PURE__ */ c(
+            "div",
+            {
+              "data-part": "primary",
+              role: e == null ? null : "region",
+              "aria-label": e,
+              children: s
+            }
+          ),
+          /* @__PURE__ */ c(
+            "div",
+            {
+              "data-part": "secondary",
+              role: l == null ? null : "region",
+              "aria-label": l,
+              children: t ?? this.props.children ?? []
+            }
+          )
+        ]
+      }
+    );
+  }
+}
+a(F, "hostName", "split-view"), a(F, "standaloneHostName", "split-view"), a(F, "css", m`
+        & {
+            display: grid;
+            flex: 1 1 auto;
+            min-width: 0;
+            min-height: 0;
+            overflow: hidden;
+        }
+
+        &[data-direction="horizontal"] {
+            grid-template-columns:
+                var(--split-primary-size, minmax(16rem, 0.8fr))
+                minmax(0, 1.2fr);
+        }
+
+        &[data-direction="vertical"] {
+            grid-template-rows:
+                var(--split-primary-size, minmax(12rem, 0.8fr))
+                minmax(0, 1.2fr);
+        }
+
+        & > [data-part] {
+            min-width: 0;
+            min-height: 0;
+            overflow: auto;
+        }
+
+        &[data-direction="horizontal"] > [data-part="primary"] {
+            border-inline-end: 1px solid var(--ui-border-color);
+        }
+
+        &[data-direction="vertical"] > [data-part="primary"] {
+            border-block-end: 1px solid var(--ui-border-color);
+        }
+    `);
+class at extends p {
+  render() {
+    const { term: s, value: t, children: r = [] } = this.props;
+    return /* @__PURE__ */ g(
+      "div",
+      {
+        className: b(this.props) || void 0,
+        "data-fray-component": "description-item",
+        children: [
+          /* @__PURE__ */ c("dt", { children: s }),
+          /* @__PURE__ */ c("dd", { children: t ?? r })
+        ]
+      }
+    );
+  }
+}
+a(at, "css", m`
+        div[data-fray-component="description-item"] {
+            display: grid;
+            grid-template-columns: minmax(7rem, 0.7fr) minmax(0, 1.3fr);
+            gap: var(--spacing-small, 0.5rem);
+            padding-block: var(--spacing-small, 0.5rem);
+            border-block-end: 1px solid var(--ui-border-color);
+        }
+
+        div[data-fray-component="description-item"] > dt {
+            color: var(--ui-muted-text-color, var(--ui-text-color));
+            font-weight: 600;
+        }
+
+        div[data-fray-component="description-item"] > dd {
+            min-width: 0;
+            margin: 0;
+            overflow-wrap: anywhere;
+        }
+
+        @media (max-width: 36rem) {
+            div[data-fray-component="description-item"] {
+                grid-template-columns: minmax(0, 1fr);
+                gap: 0.15rem;
+            }
+        }
+    `);
+class U extends p {
+  render() {
+    return /* @__PURE__ */ c(
+      "dl",
+      {
+        className: b(this.props) || void 0,
+        "data-fray-component": "description-list",
+        "aria-label": this.props.label,
+        children: this.props.children ?? []
+      }
+    );
+  }
+}
+a(U, "dependencies", [at]), a(U, "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 });
+  }
+};
+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 });
+  }
+};
+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, {
+      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");
+  }
+  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,
+      {
+        className: b(this.props) || null,
+        "data-disabled": i ? "" : null,
+        "data-required": e ? "" : null,
+        "data-error": l == null ? 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",
+            {
+              id: this.errorId,
+              "data-part": "error",
+              role: "alert",
+              children: String(l)
+            }
+          )
+        ]
+      }
+    );
+  }
+}
+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`
+        & {
+            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");
+  }
+  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,
+      inputRef: R,
+      onInput: D,
+      onChange: it
+    } = this.props, rt = this.valueEmitter.get() ?? "", lt = this.Host;
+    return /* @__PURE__ */ g(
+      lt,
+      {
+        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)
+            }
+          )
+        ]
+      }
+    );
+  }
+}
+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;
+        }
+
+        & > [data-part="error"] {
+            margin: 0;
+            color: var(--error-color, #b00020);
+        }
+    `);
+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`;
+  }
+  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));
+  }
+  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))
+    );
+    return /* @__PURE__ */ g(
+      "fieldset",
+      {
+        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",
+            {
+              "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)
+              ))
+            }
+          )
+        ]
+      }
+    );
+  }
+  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];
+      d == null || d.focus();
+    }
+  }
+}
+a(X, "baseStyles", [
+  ['fieldset[data-fray-component="toggle"] > [data-part="options"]', ["uiline"]],
+  ['fieldset[data-fray-component="toggle"] [data-part="option"]', ["uiline", "button"]]
+]), a(X, "css", m`
+        fieldset[data-fray-component="toggle"] {
+            margin: 0;
+            padding: 0;
+            border: 0;
+        }
+
+        fieldset[data-fray-component="toggle"] > [data-part="options"] {
+            display: flex;
+            padding: 0;
+        }
+
+        fieldset[data-fray-component="toggle"] [data-part="option"] {
+            border-radius: 0;
+        }
+
+        fieldset[data-fray-component="toggle"] [data-part="option"]:first-child {
+            border-radius: var(--ui-border-radius) 0 0 var(--ui-border-radius);
+        }
+
+        fieldset[data-fray-component="toggle"] [data-part="option"]:last-child {
+            border-radius: 0 var(--ui-border-radius) var(--ui-border-radius) 0;
+        }
+
+        fieldset[data-fray-component="toggle"] [data-part="option"][aria-checked="true"] {
+            background: var(--toggle-selected-bg, var(--ui-accent-color));
+            color: var(--toggle-selected-text, white);
+        }
+    `);
+function Y(n) {
+  B(n);
+  for (const s of n)
+    if (!Array.isArray(s) || s.length < 2)
+      throw new TypeError("Toggle options must be [value, label] tuples");
+}
+class V extends p {
+  render() {
+    const {
+      children: s = [],
+      id: t,
+      label: r = "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,
+      {
+        id: t,
+        role: "toolbar",
+        className: b(this.props) || null,
+        "data-orientation": i,
+        "aria-label": r,
+        "aria-orientation": i,
+        children: s
+      }
+    );
+  }
+}
+a(V, "hostName", "toolbar"), a(V, "standaloneHostName", "tool-bar"), a(V, "baseStyles", [
+  ["&", ["toolbar"]]
+]), a(V, "css", m`
+        & {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            gap: var(--spacing-small, 0.5rem);
+            padding: var(--ui-padding);
+        }
+
+        &[data-orientation="vertical"] {
+            flex-direction: column;
+            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))
+      throw new TypeError("ProgressBar valueEmitter must be a readable emitter");
+  }
+  render() {
+    const t = this.props.max ?? 100;
+    if (!Number.isFinite(t) || t <= 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))
+      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 })
+      ] }),
+      /* @__PURE__ */ c(
+        "progress",
+        {
+          id: this.progressId,
+          value: i ?? void 0,
+          max: t,
+          "aria-valuetext": e,
+          children: e
+        }
+      )
+    ] });
+  }
+}
+a(C, "hostName", "progress-bar"), a(C, "standaloneHostName", "progress-bar"), a(C, "css", m`
+        & {
+            display: grid;
+            gap: var(--spacing-small, 0.5rem);
+        }
+
+        & > [data-part="label-line"] {
+            display: flex;
+            justify-content: space-between;
+            gap: var(--spacing-medium, 1rem);
+        }
+
+        & > [data-part="label-line"] > label {
+            font-weight: 600;
+        }
+
+        & > progress {
+            width: 100%;
+            min-height: 0.8rem;
+            accent-color: var(--ui-accent-color);
+        }
+
+        @media (forced-colors: active) {
+            & > progress {
+                forced-color-adjust: auto;
+            }
+        }
+    `);
+function ut(n) {
+  return n != null && (typeof n == "object" || typeof n == "function") && typeof Reflect.get(n, "get") == "function" && typeof Reflect.get(n, "subscribe") == "function";
+}
+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
+};
+//# sourceMappingURL=index.js.map