@sylwellsoftware/fray 0.1.0-alpha.1 → 0.2.0

package/dist/experimental.js

@@ -1,10 +1,10 @@
 var ie = Object.defineProperty;
 var ne = (t, r, e) => r in t ? ie(t, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[r] = e;
 var o = (t, r, e) => ne(t, typeof r != "symbol" ? r + "" : r, e);
-import { C as b, j as c, c as x, a as w, i as U } from "./jsx-dev-runtime-CarwHDyL.js";
-import { Emitter as y, FetchState as m, DerivedEmitter as oe, QueryArg as V, LiveQuery as ae, RestQueryHandler as le } from "@sylwellsoftware/glue";
-import { c as I, C as F, F as K, i as W, a as de, b as ce, B as Q } from "./button-BRDkmR1C.js";
-class E extends b {
+import { C as w, j as c, c as x, a as b, i as U } from "./jsx-dev-runtime-DukiDpV9.js";
+import { Emitter as g, FetchState as m, DerivedEmitter as oe, QueryArg as V, LiveQuery as ae, RestQueryHandler as le } from "@sylwellsoftware/glue";
+import { c as I, C as F, F as K, i as W, a as de, b as ce, B as Q } from "./button-CqDGmkBt.js";
+class E extends w {
   render() {
     const r = he(this.props.width ?? 65), e = this.Host;
     return /* @__PURE__ */ c(e, { style: { width: `${r}%` }, "aria-hidden": "true" });
@@ -62,7 +62,7 @@ class J {
       throw new TypeError("Selection handler getItems must be a function");
     if (typeof e != "function")
       throw new TypeError("Selection handler getKey must be a function");
-    this.getItems = r, this.getKey = e, this.ownedSelectedItemsEmitter = s == null ? new y([], { owner: i, purpose: "selected items" }) : null, this.selectedItemsEmitter = s ?? this.ownedSelectedItemsEmitter, this.selectedItems$ = this.selectedItemsEmitter, this.ownsSelectedItemsEmitter = this.ownedSelectedItemsEmitter != null;
+    this.getItems = r, this.getKey = e, this.ownedSelectedItemsEmitter = s == null ? new g([], { owner: i, purpose: "selected items" }) : null, this.selectedItemsEmitter = s ?? this.ownedSelectedItemsEmitter, this.selectedItems$ = this.selectedItemsEmitter, this.ownsSelectedItemsEmitter = this.ownedSelectedItemsEmitter != null;
   }
   rowsUpdated(r) {
     this.destroyed || (this.releaseRows(), this.rows = Array.from(r ?? []), this.rows.forEach((e, s) => this.wireRow(e, s)), this.activeIndex = fe(this.activeIndex, this.rows.length), this.reconcileSelectedItems(), this.syncRows());
@@ -214,7 +214,7 @@ function P(t, r, e) {
   }
   return s;
 }
-class D extends b {
+class D extends w {
   constructor(e = {}) {
     super(e);
     o(this, "itemsEmitter");
@@ -225,10 +225,10 @@ class D extends b {
     o(this, "selectionHandler");
     o(this, "ownedItemsEmitter");
     o(this, "ownedSelectedItemsEmitter");
-    ge(e.items) ? (this.itemsEmitter = e.items, this.ownedItemsEmitter = null) : (this.ownedItemsEmitter = new y(e.items ?? [], {
+    ye(e.items) ? (this.itemsEmitter = e.items, this.ownedItemsEmitter = null) : (this.ownedItemsEmitter = new g(e.items ?? [], {
       owner: this,
       purpose: "list items"
-    }), this.itemsEmitter = this.ownedItemsEmitter), this.items$ = this.itemsEmitter, this.ownedSelectedItemsEmitter = e.selectedItemsEmitter == null ? new y([], { owner: this, purpose: "selected list items" }) : null, this.selectedItemsEmitter = e.selectedItemsEmitter ?? this.ownedSelectedItemsEmitter, this.selectedItems$ = this.selectedItemsEmitter, this.getItemKey = me(e.itemKey), this.selectionHandler = Y({
+    }), this.itemsEmitter = this.ownedItemsEmitter), this.items$ = this.itemsEmitter, this.ownedSelectedItemsEmitter = e.selectedItemsEmitter == null ? new g([], { owner: this, purpose: "selected list items" }) : null, this.selectedItemsEmitter = e.selectedItemsEmitter ?? this.ownedSelectedItemsEmitter, this.selectedItems$ = this.selectedItemsEmitter, this.getItemKey = me(e.itemKey), this.selectionHandler = Y({
       owner: this,
       multiSelect: e.multiSelect ?? !1,
       selectedItemsEmitter: this.selectedItemsEmitter,
@@ -243,13 +243,13 @@ class D extends b {
     const e = this.itemsEmitter.get();
     if (!Array.isArray(e)) throw new TypeError("ListView items must be an array");
     const s = this.itemsEmitter.getFetchState(), i = this.itemsEmitter.getError(), n = s === m.Initial || s === m.Loading, a = new Set(this.selectedItemsEmitter.get().map((d, h) => this.getItemKey(d, h))), l = this.Host;
-    return /* @__PURE__ */ w(
+    return /* @__PURE__ */ b(
       l,
       {
         className: I(this.props) || null,
         children: [
-          s === m.Error ? /* @__PURE__ */ c("p", { role: "alert", "data-part": "error", children: be(i, "Unable to load items") }) : null,
-          n && e.length === 0 ? /* @__PURE__ */ w("div", { role: "status", "data-part": "loading", children: [
+          s === m.Error ? /* @__PURE__ */ c("p", { role: "alert", "data-part": "error", children: we(i, "Unable to load items") }) : null,
+          n && e.length === 0 ? /* @__PURE__ */ b("div", { role: "status", "data-part": "loading", children: [
             /* @__PURE__ */ c("span", { children: "Loading items…" }),
             Array.from({ length: this.props.placeholderCount ?? 5 }, (d, h) => /* @__PURE__ */ c("div", { "data-part": "placeholder-row", children: /* @__PURE__ */ c(E, { width: 45 + h * 7 }) }, `placeholder-${h}`))
           ] }) : null,
@@ -263,7 +263,7 @@ class D extends b {
               "aria-busy": n ? "true" : null,
               "aria-multiselectable": this.props.multiSelect ? "true" : null,
               children: e.map((d, h) => {
-                const u = this.getItemKey(d, h), f = a.has(u), p = this.props.renderItem ? this.props.renderItem(d, h) : ye(d);
+                const u = this.getItemKey(d, h), f = a.has(u), p = this.props.renderItem ? this.props.renderItem(d, h) : ge(d);
                 return /* @__PURE__ */ c(
                   "div",
                   {
@@ -357,27 +357,27 @@ function me(t) {
     };
   throw new TypeError("ListView itemKey must be a function or property name");
 }
-function ge(t) {
+function ye(t) {
   return t != null && (typeof t == "object" || typeof t == "function") && typeof Reflect.get(t, "get") == "function" && typeof Reflect.get(t, "subscribe") == "function";
 }
-function ye(t) {
+function ge(t) {
   if (t != null && (typeof t == "object" || typeof t == "function")) {
     const r = Reflect.get(t, "label");
-    if (we(r)) return r;
+    if (be(r)) return r;
   }
   return String(t);
 }
-function we(t) {
+function be(t) {
   return t == null || typeof t == "string" || typeof t == "number";
 }
-function be(t, r) {
+function we(t, r) {
   return t instanceof Error ? t.message : t == null ? r : String(t);
 }
-class T extends b {
+class T extends w {
   constructor(e = {}) {
     super(e);
     o(this, "optionsEmitter");
-    this.optionsEmitter = ke(e.options) ? e.options : null;
+    this.optionsEmitter = ve(e.options) ? e.options : null;
   }
   initialize() {
     this.optionsEmitter && this.watch(this.optionsEmitter);
@@ -394,7 +394,7 @@ class T extends b {
         className: I(this.props) || null,
         role: "alert",
         "data-state": "error",
-        children: ve(i, "Unable to load filter options")
+        children: ke(i, "Unable to load filter options")
       }
     ) : (s === m.Initial || s === m.Loading) && e.length === 0 ? /* @__PURE__ */ c(
       d,
@@ -411,21 +411,21 @@ class T extends b {
         role: "group",
         "aria-label": this.props.label ?? "Filter options",
         children: e.length === 0 ? /* @__PURE__ */ c("span", { children: "No filter options" }) : e.map((p) => {
-          const g = X(p), S = Ie(p), C = n.get(g) ?? l;
+          const y = X(p), S = Ie(p), C = n.get(y) ?? l;
           return /* @__PURE__ */ c(
             Ee,
             {
               label: S,
               defaultValue: C,
               symbols: a,
-              onChange: (q, k) => {
+              onChange: (q, v) => {
                 var R, M;
-                k == null || k.stopPropagation();
-                const v = new Map(n);
-                q === K.Neutral ? v.delete(g) : v.set(g, q), (M = (R = this.props).onChange) == null || M.call(R, v, k);
+                v == null || v.stopPropagation();
+                const k = new Map(n);
+                q === K.Neutral ? k.delete(y) : k.set(y, q), (M = (R = this.props).onChange) == null || M.call(R, k, v);
               }
             },
-            `${String(g)}:${String(C)}`
+            `${String(y)}:${String(C)}`
           );
         })
       }
@@ -475,13 +475,13 @@ function Ie(t) {
 function xe(t) {
   return typeof t == "string" || typeof t == "number";
 }
-function ke(t) {
+function ve(t) {
   return t != null && (typeof t == "object" || typeof t == "function") && typeof Reflect.get(t, "get") == "function" && typeof Reflect.get(t, "subscribe") == "function";
 }
-function ve(t, r) {
+function ke(t, r) {
   return t instanceof Error ? t.message : t == null ? r : String(t);
 }
-class N extends b {
+class N extends w {
   constructor() {
     super(...arguments);
     o(this, "filterVisible", !1);
@@ -522,14 +522,14 @@ class N extends b {
         ...this.props.defaultSemanticState == null ? {} : { defaultSemanticState: this.props.defaultSemanticState }
       },
       "filter-panel"
-    )), /* @__PURE__ */ w(
+    )), /* @__PURE__ */ b(
       "th",
       {
         scope: "col",
         "data-fray-component": "table-header-cell",
         "aria-sort": s === "asc" ? "ascending" : s === "desc" ? "descending" : "none",
         children: [
-          this.props.sortable ? /* @__PURE__ */ w(
+          this.props.sortable ? /* @__PURE__ */ b(
             "button",
             {
               type: "button",
@@ -566,12 +566,27 @@ o(N, "dependencies", [T]), o(N, "baseStyles", [
         th[data-fray-component="table-header-cell"] {
             position: relative;
             text-align: start;
+            color: var(
+                --fray-table-header-color,
+                var(--fray-section-header-color, var(--fray-header-color))
+            );
+            background: var(
+                --fray-table-header-background,
+                var(--fray-section-header-background, var(--fray-header-background))
+            );
+            border-block-end: var(--fray-section-header-border, var(--fray-header-border));
+            box-shadow: var(--fray-section-header-shadow, var(--fray-header-shadow));
         }
 
         th[data-fray-component="table-header-cell"] > [data-part="sort"],
         th[data-fray-component="table-header-cell"] > [data-part="filter-toggle"] {
             width: auto;
             font-family: inherit;
+            color: inherit;
+            background: var(
+                --fray-table-header-button-background,
+                var(--fray-button-background)
+            );
         }
 
         th[data-fray-component="table-header-cell"] > [data-part="filter-toggle"] {
@@ -582,7 +597,7 @@ o(N, "dependencies", [T]), o(N, "baseStyles", [
 function Te(t) {
   return typeof t[0] == "string" || typeof t[0] == "number";
 }
-class H extends b {
+class H extends w {
   render() {
     return /* @__PURE__ */ c("thead", { "data-fray-component": "table-header", children: /* @__PURE__ */ c("tr", { children: this.props.columns.map((r) => /* @__PURE__ */ c(
       N,
@@ -658,7 +673,7 @@ function qe(t) {
   if (r == null || typeof Reflect.get(r, "set") != "function" || typeof Reflect.get(r, "append") != "function")
     throw new TypeError("Table serializer requires URL search parameters");
 }
-class j extends b {
+class j extends w {
   constructor(e) {
     super(e);
     o(this, "columns");
@@ -675,13 +690,13 @@ class j extends b {
     o(this, "queryArgs", []);
     if (e.mode !== "local" && e.mode !== "remote")
       throw new TypeError("DataTable mode must be local or remote");
-    this.columns = Oe(e.columns), this.rowKey = je(e.rowKey), this.sortEmitter = new y(null, {
+    this.columns = Oe(e.columns), this.rowKey = je(e.rowKey), this.sortEmitter = new g(null, {
       owner: this,
       purpose: "table sort"
-    }), this.filtersEmitter = new y({}, {
+    }), this.filtersEmitter = new g({}, {
       owner: this,
       purpose: "table filters"
-    }), this.ownedSelectedItemsEmitter = e.selectedItemsEmitter == null ? new y([], { owner: this, purpose: "selected table rows" }) : null, this.selectedItemsEmitter = e.selectedItemsEmitter ?? this.ownedSelectedItemsEmitter, this.selectionHandler = Y({
+    }), this.ownedSelectedItemsEmitter = e.selectedItemsEmitter == null ? new g([], { owner: this, purpose: "selected table rows" }) : null, this.selectedItemsEmitter = e.selectedItemsEmitter ?? this.ownedSelectedItemsEmitter, this.selectionHandler = Y({
       owner: this,
       multiSelect: e.multiSelect ?? !1,
       selectedItemsEmitter: this.selectedItemsEmitter,
@@ -698,7 +713,7 @@ class j extends b {
   createLocalQuery() {
     const e = this.props.data ?? [];
     let s;
-    return ee(e) ? s = e : (this.ownedDataSource = new y(e, {
+    return ee(e) ? s = e : (this.ownedDataSource = new g(e, {
       owner: this,
       purpose: "local table data"
     }), s = this.ownedDataSource), this.dataSource = s, this.ownsQuery = !0, new oe(
@@ -743,9 +758,9 @@ class j extends b {
     const e = ((d = this.query) == null ? void 0 : d.get()) ?? [];
     if (!Array.isArray(e)) throw new TypeError("DataTable query value must be an array");
     const s = ((h = this.query) == null ? void 0 : h.getFetchState()) ?? m.Initial, i = (u = this.query) == null ? void 0 : u.getError(), n = s === m.Initial || s === m.Loading, a = new Set(
-      this.selectedItemsEmitter.get().map((p, g) => this.rowKey(p, g))
+      this.selectedItemsEmitter.get().map((p, y) => this.rowKey(p, y))
     ), l = this.Host;
-    return /* @__PURE__ */ w(
+    return /* @__PURE__ */ b(
       l,
       {
         className: I(this.props) || null,
@@ -753,21 +768,21 @@ class j extends b {
         "data-error": s === m.Error ? "" : null,
         children: [
           n ? /* @__PURE__ */ c("p", { role: "status", "data-part": "status", children: "Loading rows…" }) : null,
-          s === m.Error ? /* @__PURE__ */ w("div", { "data-part": "error", role: "alert", children: [
+          s === m.Error ? /* @__PURE__ */ b("div", { "data-part": "error", role: "alert", children: [
             /* @__PURE__ */ c("span", { children: Fe(i, "Unable to load rows") }),
             typeof ((f = this.query) == null ? void 0 : f.retry) == "function" ? /* @__PURE__ */ c(
               "button",
               {
                 type: "button",
                 onClick: () => {
-                  var p, g;
-                  return (g = (p = this.query) == null ? void 0 : p.retry) == null ? void 0 : g.call(p, "table retry");
+                  var p, y;
+                  return (y = (p = this.query) == null ? void 0 : p.retry) == null ? void 0 : y.call(p, "table retry");
                 },
                 children: "Retry"
               }
             ) : null
           ] }) : null,
-          /* @__PURE__ */ w("table", { "data-part": "table", "aria-busy": n ? "true" : null, children: [
+          /* @__PURE__ */ b("table", { "data-part": "table", "aria-busy": n ? "true" : null, children: [
             this.props.caption == null ? null : /* @__PURE__ */ c("caption", { children: this.props.caption }),
             /* @__PURE__ */ c(
               H,
@@ -781,7 +796,7 @@ class j extends b {
               },
               "header"
             ),
-            /* @__PURE__ */ c("tbody", { children: e.length > 0 ? e.map((p, g) => this.renderRow(p, g, a)) : n ? this.renderPlaceholders() : s === m.Error ? null : /* @__PURE__ */ c("tr", { children: /* @__PURE__ */ c("td", { colSpan: this.columns.length, children: this.props.emptyMessage ?? "No rows" }) }, "empty") })
+            /* @__PURE__ */ c("tbody", { children: e.length > 0 ? e.map((p, y) => this.renderRow(p, y, a)) : n ? this.renderPlaceholders() : s === m.Error ? null : /* @__PURE__ */ c("tr", { children: /* @__PURE__ */ c("td", { colSpan: this.columns.length, children: this.props.emptyMessage ?? "No rows" }) }, "empty") })
           ] })
         ]
       }
@@ -849,14 +864,26 @@ o(j, "dependencies", [E, H]), o(j, "hostName", "data-table"), o(j, "standaloneHo
             user-select: none;
         }
 
+        & tbody tr:nth-child(odd) {
+            background: var(--fray-table-row-background, transparent);
+        }
+
+        & tbody tr:nth-child(even) {
+            background: var(--fray-table-row-alt-background, transparent);
+        }
+
+        & tbody tr[data-fray-selectable-row]:hover {
+            background: var(--fray-row-hover-background, var(--button-background-hover));
+        }
+
         & tbody tr[data-fray-selectable-row]:focus-visible {
-            outline: 2px solid var(--ui-accent-color);
+            outline: 2px solid var(--fray-color-focus, var(--ui-accent-color));
             outline-offset: -2px;
         }
 
         & tbody tr[data-fray-selectable-row][aria-selected="true"] {
-            color: var(--toggle-selected-text);
-            background: var(--toggle-selected-bg);
+            color: var(--fray-selection-color, var(--toggle-selected-text));
+            background: var(--fray-selection-background, var(--toggle-selected-bg));
         }
 
         & > [data-part="error"] {
@@ -906,12 +933,12 @@ function Le(t) {
 function Fe(t, r) {
   return t instanceof Error ? t.message : t == null ? r : String(t);
 }
-class te extends b {
+class te extends w {
   render() {
     return this.props.children ?? [];
   }
 }
-class A extends b {
+class A extends w {
   constructor(e) {
     super(e);
     o(this, "nodesEmitter");
@@ -927,12 +954,12 @@ class A extends b {
       this.nodesEmitter = e.nodes, this.ownedNodesEmitter = null;
     else {
       const s = e.nodes ?? re(e.children);
-      this.ownedNodesEmitter = new y(s, {
+      this.ownedNodesEmitter = new g(s, {
         owner: this,
         purpose: "tree nodes"
       }), this.nodesEmitter = this.ownedNodesEmitter;
     }
-    this.ownedSelectedEmitter = e.selectedKeyEmitter == null ? new y(null, { owner: this, purpose: "selected tree key" }) : null, this.selectedKeyEmitter = e.selectedKeyEmitter ?? this.ownedSelectedEmitter, this.ownedExpandedEmitter = e.expandedKeysEmitter == null ? new y([], { owner: this, purpose: "expanded tree keys" }) : null, this.expandedKeysEmitter = e.expandedKeysEmitter ?? this.ownedExpandedEmitter;
+    this.ownedSelectedEmitter = e.selectedKeyEmitter == null ? new g(null, { owner: this, purpose: "selected tree key" }) : null, this.selectedKeyEmitter = e.selectedKeyEmitter ?? this.ownedSelectedEmitter, this.ownedExpandedEmitter = e.expandedKeysEmitter == null ? new g([], { owner: this, purpose: "expanded tree keys" }) : null, this.expandedKeysEmitter = e.expandedKeysEmitter ?? this.ownedExpandedEmitter;
   }
   initialize() {
     this.reconcile(this.nodesEmitter.get()), this.watch(this.nodesEmitter, this.selectedKeyEmitter, this.expandedKeysEmitter), this.onCleanup(this.nodesEmitter.subscribe(({ value: e }) => this.reconcile(e), {
@@ -946,9 +973,9 @@ class A extends b {
     this.focusedKey = (a == null ? void 0 : a.node.id) ?? null;
     const l = this.Host;
     return /* @__PURE__ */ c(l, { className: I(this.props) || null, children: i.length === 0 ? /* @__PURE__ */ c("p", { role: "status", "data-part": "empty", children: "No tree items" }) : /* @__PURE__ */ c("div", { role: "tree", "aria-label": this.props.label, "data-part": "tree", children: i.map((d, h) => {
-      var v, R, M;
-      const { node: u, depth: f, position: p, setSize: g } = d, S = (((v = u.children) == null ? void 0 : v.length) ?? 0) > 0, C = S && s.has(u.id), q = Object.is(u.id, n), k = ((M = (R = this.props).renderItem) == null ? void 0 : M.call(R, u, f)) ?? u.label;
-      return /* @__PURE__ */ w(
+      var k, R, M;
+      const { node: u, depth: f, position: p, setSize: y } = d, S = (((k = u.children) == null ? void 0 : k.length) ?? 0) > 0, C = S && s.has(u.id), q = Object.is(u.id, n), v = ((M = (R = this.props).renderItem) == null ? void 0 : M.call(R, u, f)) ?? u.label;
+      return /* @__PURE__ */ b(
         "div",
         {
           role: "treeitem",
@@ -957,7 +984,7 @@ class A extends b {
           "data-depth": f,
           "aria-level": f + 1,
           "aria-posinset": p,
-          "aria-setsize": g,
+          "aria-setsize": y,
           "aria-expanded": S ? String(C) : null,
           "aria-selected": String(q),
           tabIndex: Object.is(u.id, a == null ? void 0 : a.node.id) ? 0 : -1,
@@ -981,7 +1008,7 @@ class A extends b {
                 children: S ? C ? "▾" : "▸" : "•"
               }
             ),
-            /* @__PURE__ */ c("span", { "data-part": "label", children: k })
+            /* @__PURE__ */ c("span", { "data-part": "label", children: v })
           ]
         },
         u.id
@@ -1175,7 +1202,7 @@ function ze(t) {
 function Ue(t) {
   return t instanceof Element && t.closest('[data-part="expander"]') != null;
 }
-class G extends b {
+class G extends w {
   constructor(e) {
     super(e);
     o(this, "openEmitter");
@@ -1199,7 +1226,7 @@ class G extends b {
       showCloseButton: a = !0,
       children: l = []
     } = this.props;
-    return /* @__PURE__ */ w(
+    return /* @__PURE__ */ b(
       "dialog",
       {
         id: this.dialogId,
@@ -1213,7 +1240,7 @@ class G extends b {
           /* @__PURE__ */ c("header", { "data-part": "header", children: /* @__PURE__ */ c("h2", { id: this.titleId, children: e }) }),
           s == null ? null : /* @__PURE__ */ c("p", { id: this.descriptionId, "data-part": "description", children: s }),
           /* @__PURE__ */ c("div", { "data-part": "content", children: l }),
-          i == null && !a ? null : /* @__PURE__ */ w("footer", { "data-part": "actions", children: [
+          i == null && !a ? null : /* @__PURE__ */ b("footer", { "data-part": "actions", children: [
             i,
             a ? /* @__PURE__ */ c(
               Q,
@@ -1271,15 +1298,15 @@ o(G, "dependencies", [Q]), o(G, "css", x`
             width: min(38rem, calc(100vw - 2rem));
             max-height: min(42rem, calc(100dvh - 2rem));
             padding: 0;
-            color: var(--ui-text-color);
-            background: var(--panel-bg);
-            border: 1px solid var(--ui-border-color);
-            border-radius: var(--panel-radius, var(--ui-border-radius));
-            box-shadow: 0 1.25rem 4rem rgb(0 0 0 / 35%);
+            color: var(--fray-panel-color, var(--ui-text-color));
+            background: var(--fray-panel-background, var(--panel-bg));
+            border: var(--fray-panel-border, var(--panel-border));
+            border-radius: var(--fray-panel-radius, var(--panel-radius));
+            box-shadow: var(--fray-dialog-shadow, var(--fray-panel-shadow));
         }
 
         dialog[data-fray-component="dialog"]::backdrop {
-            background: rgb(0 0 0 / 55%);
+            background: var(--fray-dialog-backdrop-background);
         }
 
         dialog[data-fray-component="dialog"] > [data-part] {
@@ -1287,7 +1314,18 @@ o(G, "dependencies", [Q]), o(G, "css", x`
         }
 
         dialog[data-fray-component="dialog"] > [data-part="header"] {
-            border-block-end: 1px solid var(--ui-border-color);
+            color: var(
+                --fray-dialog-header-color,
+                var(--fray-section-header-color, var(--fray-header-color))
+            );
+            background: var(
+                --fray-dialog-header-background,
+                var(--fray-section-header-background, var(--fray-header-background))
+            );
+            border-block-end: var(
+                --fray-section-header-border,
+                var(--fray-header-border)
+            );
         }
 
         dialog[data-fray-component="dialog"] > [data-part="header"] h2,