@sylwellsoftware/fray 0.2.0 → 0.3.0

package/dist/util/filterMode.d.ts

@@ -1,13 +1,15 @@
 /** Represents the filter mode for a query. */
 export declare const FilterMode: {
     /** Deny mode: Excludes items that match the filter. */
-    readonly Deny: "!";
+    readonly Deny: "deny";
     /** Require mode: Includes only items that match the filter. */
-    readonly Require: "_";
+    readonly Require: "require";
     /** Prefer mode: If there are any filter options that are set to Prefer, at least one of the preferred filter options must match. Otherwise, it is treated as Neutral. */
-    readonly Prefer: "";
+    readonly Prefer: "prefer";
     /** Neutral mode: Does not affect the inclusion or exclusion of items. */
-    readonly Neutral: "☐";
+    readonly Neutral: "neutral";
 };
 export type FilterModeValue = typeof FilterMode[keyof typeof FilterMode];
+/** Return whether a value is one of Fray's semantic filter modes. */
+export declare function isFilterMode(value: unknown): value is FilterModeValue;
 //# sourceMappingURL=filterMode.d.ts.map

package/dist/util/filterMode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filterMode.d.ts","sourceRoot":"","sources":["../../src/util/filterMode.ts"],"names":[],"mappings":"AAAA,8CAA8C;AAC9C,eAAO,MAAM,UAAU;IACnB,uDAAuD;;IAEvD,+DAA+D;;IAE/D,yKAAyK;;IAEzK,yEAAyE;;CAEnE,CAAA;AAEV,MAAM,MAAM,eAAe,GAAG,OAAO,UAAU,CAAC,MAAM,OAAO,UAAU,CAAC,CAAA"}
+{"version":3,"file":"filterMode.d.ts","sourceRoot":"","sources":["../../src/util/filterMode.ts"],"names":[],"mappings":"AAAA,8CAA8C;AAC9C,eAAO,MAAM,UAAU;IACnB,uDAAuD;;IAEvD,+DAA+D;;IAE/D,yKAAyK;;IAEzK,yEAAyE;;CAEnE,CAAA;AAEV,MAAM,MAAM,eAAe,GAAG,OAAO,UAAU,CAAC,MAAM,OAAO,UAAU,CAAC,CAAA;AAExE,qEAAqE;AACrE,wBAAgB,YAAY,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,eAAe,CAErE"}

package/package.json

@@ -2,8 +2,8 @@
   "type": "module",
   "name": "@sylwellsoftware/fray",
   "private": false,
-  "version": "0.2.0",
-  "description": "Experimental browser-only TypeScript component runtime, JSX controls, and semantic themes.",
+  "version": "0.3.0",
+  "description": "Browser-only TypeScript component runtime, JSX controls, and semantic themes.",
   "license": "Apache-2.0",
   "author": {
     "name": "Sylwell Software",
@@ -36,10 +36,6 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./experimental": {
-      "types": "./dist/experimental.d.ts",
-      "import": "./dist/experimental.js"
-    },
     "./jsx-runtime": {
       "types": "./dist/jsx-runtime.d.ts",
       "import": "./dist/jsx-runtime.js"
@@ -59,7 +55,6 @@
     "styles",
     "themes",
     "colors",
-    "EXPERIMENTAL.md",
     "LICENSE",
     "NOTICE"
   ],
@@ -69,11 +64,11 @@
     "./themes/**/*.css"
   ],
   "peerDependencies": {
-    "@sylwellsoftware/glue": "^0.2.0"
+    "@sylwellsoftware/glue": "^0.3.0"
   },
   "devDependencies": {
     "vite": "^6.3.5",
-    "@sylwellsoftware/glue": "^0.2.0"
+    "@sylwellsoftware/glue": "^0.3.0"
   },
   "engines": {
     "node": ">=22",

package/styles/structural.css

@@ -323,6 +323,11 @@ fray-data-table {
             border-collapse: collapse;
         }
 
+        fray-data-table thead:has([data-fray-component="filter-panel"]) {
+            position: relative;
+            z-index: 1100;
+        }
+
         fray-data-table th,
         fray-data-table td {
             padding: var(--ui-padding-v) var(--ui-padding-h);
@@ -408,9 +413,9 @@ th[data-fray-component="table-header-cell"] {
         }
 
 fray-filter-panel {
-            position: absolute;
-            z-index: 1000;
-            inset-block-start: 100%;
+            position: fixed;
+            z-index: 1100;
+            inset-block-start: 0;
             inset-inline-end: 0;
             display: flex;
             min-width: 12rem;
@@ -422,6 +427,7 @@ fray-filter-panel {
             border: var(--panel-border);
             border-radius: var(--panel-radius);
             box-shadow: var(--panel-shadow);
+            overflow-y: auto;
         }
 
 div[data-fray-component="description-item"] {

package/EXPERIMENTAL.md

@@ -1,75 +0,0 @@
-# Fray experimental data APIs
-
-Everything imported from `@sylwellsoftware/fray/experimental` is outside Fray's stable
-alpha compatibility surface. It may change in any `0.x` release without a
-deprecation window. The stable package root does not export these symbols.
-
-`TreeView` is a controlled, single-select ARIA tree. Stable node keys reconcile
-selection and expansion across data replacement. Arrow keys navigate and
-expand/collapse, Home/End jump, Enter/Space select, and printable keys perform
-type-ahead. `TreeItem` supplies an optional declarative node form. The initial
-contract does not include virtualization, multi-selection, editing, or drag
-reordering.
-
-`Dialog` wraps the native modal element with a controlled boolean emitter,
-label/description relationships, cancel handling, initial focus, focus
-restoration, and deterministic cleanup. Applications provide actions and own
-all async work; the dialog does not infer promise or confirmation policy.
-
-## Current behavior
-
-`ListView` and `DataTable` use stable item/row keys and expose their selected
-items through writable emitters. Single selection replaces the prior item.
-Multi-selection supports Control/Command toggles, Shift ranges, primary-button
-drag ranges, arrow/Home/End focus movement, and Space/Enter selection. A data
-refresh reconciles selected keys to the new row objects.
-
-`DataTable` requires an explicit `mode`:
-
-- `local` accepts an array or emitter, and performs sorting/filtering in the
-  browser;
-- `remote` accepts a query emitter/handler or REST configuration, and sends
-  sort/filter arguments through the documented table serializer.
-
-Filter state lives in the table's `filtersEmitter`, so opening a panel,
-changing a filter, rerendering, and refreshing data do not reset it. Remote
-tables distinguish these states:
-
-- initial/loading with no rows: status plus placeholder rows;
-- loading with retained rows: busy status plus the partial/previous rows;
-- ready with no rows: the configured empty message;
-- error with retained rows: an alert plus those rows;
-- error with no rows: an alert without a misleading empty message;
-- retryable query: a native Retry button that calls `query.retry()`.
-
-Pagination is not built in. A remote query may implement pagination arguments,
-but Fray does not currently supply pagination controls or a page model.
-
-## Measured alpha boundary
-
-The alpha regression boundary is **1,000 rows with four to six simple columns
-on a modern desktop browser**. Larger datasets, expensive custom cell
-renderers, and mobile devices are not covered; paginate or filter them before
-rendering.
-
-The browser fixture measures a 1,000-row/four-column local table using stable
-keys. It times initial DOM creation, a full data refresh, numeric sorting, a
-filter that retains 500 rows, and one selection update. On the 2026-09-01 local
-arm64 macOS verification host with Playwright 1.62.1, the results were:
-
-| Engine | Initial | Rerender | Sort | Filter | Selection |
-| --- | ---: | ---: | ---: | ---: | ---: |
-| Chromium | 19.0 ms | 9.3 ms | 9.2 ms | 6.0 ms | 20.9 ms |
-| Firefox | 62.0 ms | 16.0 ms | 14.0 ms | 11.0 ms | 32.0 ms |
-| WebKit | 18.0 ms | 12.0 ms | 22.0 ms | 6.0 ms | 4.0 ms |
-
-These are synchronous headless-browser regression measurements, not a promise
-of end-to-end frame or device performance. The automated budget allows two
-seconds for initial creation and one second for each subsequent operation to
-remain robust on slower verification hosts while still catching a material
-regression.
-
-Virtualization is deliberately deferred: the measured boundary does not
-justify its lifecycle, focus, and accessibility complexity. Revisit it only
-with a demonstrated consumer above 1,000 rows and browser measurements showing
-that server-side pagination/filtering is insufficient.

package/dist/button-CqDGmkBt.js

@@ -1,212 +0,0 @@
-var N = Object.defineProperty;
-var I = (e, t, a) => t in e ? N(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a;
-var n = (e, t, a) => I(e, typeof t != "symbol" ? t + "" : t, a);
-import { C as k, j as y, c as x, a as T } from "./jsx-dev-runtime-DukiDpV9.js";
-import { Emitter as V } from "@sylwellsoftware/glue";
-let j = 1;
-function B(e, t) {
-  return t != null && String(t).length > 0 ? String(t) : `fray-${e}-${j++}`;
-}
-function q(e, t, a, i) {
-  if (t.valueEmitter != null)
-    return R(t.valueEmitter, "valueEmitter"), t.valueEmitter;
-  const s = t.defaultValue ?? t.value ?? t.initialValue ?? a, o = { owner: e, purpose: i };
-  return new V(s, o);
-}
-function R(e, t = "emitter") {
-  if (e == null || typeof e != "object" && typeof e != "function" || typeof Reflect.get(e, "get") != "function" || typeof Reflect.get(e, "set") != "function" || typeof Reflect.get(e, "subscribe") != "function")
-    throw new TypeError(`${t} must be an emitter`);
-}
-function w(e) {
-  return e.className ?? e.class ?? "";
-}
-function E(e, ...t) {
-  if (e != null) {
-    if (typeof e != "function") throw new TypeError("Control callback must be a function");
-    e(...t);
-  }
-}
-function F(e, t = "options") {
-  if (!Array.isArray(e)) throw new TypeError(`${t} must be an array`);
-}
-function $(e) {
-  return e === "" ? "prefer" : e === "!" ? "deny" : e === "_" ? "require" : e === "☐" ? "neutral" : String(e);
-}
-const b = {
-  /** Deny mode: Excludes items that match the filter. */
-  Deny: "!",
-  /** Require mode: Includes only items that match the filter. */
-  Require: "_",
-  /** Prefer mode: If there are any filter options that are set to Prefer, at least one of the preferred filter options must match. Otherwise, it is treated as Neutral. */
-  Prefer: "",
-  /** Neutral mode: Does not affect the inclusion or exclusion of items. */
-  Neutral: "☐"
-};
-class u extends k {
-  constructor(a = {}) {
-    super(a);
-    n(this, "symbols");
-    n(this, "valueEmitter");
-    n(this, "semanticStateEmitter");
-    const i = this.constructor;
-    this.symbols = a.symbols ?? i.symbols, D(this.symbols);
-    const s = a.initialSemanticState ?? i.defaultSemanticState ?? this.symbols[0][1], o = { ...a };
-    o.defaultValue == null && a.initialSemanticState != null && (o.defaultValue = a.initialSemanticState), this.valueEmitter = q(
-      this,
-      o,
-      s,
-      "checkbox semantic state"
-    ), this.semanticStateEmitter = this.valueEmitter;
-  }
-  initialize() {
-    this.watch(this.valueEmitter);
-  }
-  cycleState(a = 1, i = null) {
-    if (this.props.disabled) return;
-    const s = this.symbols.findIndex(([, d]) => Object.is(d, this.valueEmitter.get())), c = ((s < 0 ? 0 : s) + a + this.symbols.length) % this.symbols.length, l = this.symbols[c][1];
-    this.valueEmitter.set(l, "checkbox state changed"), E(this.props.onChange, l, i);
-  }
-  render() {
-    const {
-      label: a = this.props.value ?? "Option",
-      disabled: i = !1,
-      required: s = !1,
-      name: o,
-      value: c
-    } = this.props, l = this.valueEmitter.get(), [d] = this.symbols.find(([, r]) => Object.is(r, l)) ?? ["?", l], f = $(l), m = l === b.Prefer || l === b.Require, h = this.Host;
-    return /* @__PURE__ */ y(
-      h,
-      {
-        className: w(this.props) || null,
-        "data-disabled": i ? "" : null,
-        "data-required": s ? "" : null,
-        "data-state": f,
-        children: /* @__PURE__ */ T(
-          "button",
-          {
-            type: "button",
-            role: "checkbox",
-            disabled: i,
-            name: o,
-            value: c == null ? void 0 : String(c),
-            "data-part": "control",
-            "aria-checked": m ? "true" : "false",
-            "aria-required": s ? "true" : null,
-            "aria-label": `${a}: ${f}`,
-            onClick: (r) => this.cycleState(1, r),
-            onKeyDown: (r) => {
-              r.key === "ArrowRight" || r.key === "ArrowDown" ? (r.preventDefault(), this.cycleState(1, r)) : (r.key === "ArrowLeft" || r.key === "ArrowUp") && (r.preventDefault(), this.cycleState(-1, r));
-            },
-            children: [
-              /* @__PURE__ */ y("span", { "data-part": "symbol", "aria-hidden": "true", children: d }),
-              /* @__PURE__ */ y("span", { "data-part": "label", children: a })
-            ]
-          }
-        )
-      }
-    );
-  }
-}
-n(u, "symbols", [
-  ["☐", b.Neutral],
-  ["✓", b.Prefer]
-]), n(u, "defaultSemanticState", b.Neutral), n(u, "hostName", "checkbox"), n(u, "standaloneHostName", "check-box"), n(u, "baseStyles", [
-  ["&", ["inputline"]],
-  ['& > [data-part="control"]', ["input", "inputline"]],
-  ["&[data-disabled]", ["disabled"]]
-]), n(u, "css", x`
-        & > [data-part="control"] {
-            display: inline-flex;
-            align-items: center;
-            gap: 0.35em;
-            width: auto;
-            font-family: inherit;
-        }
-
-        & [data-part="symbol"] {
-            display: inline-grid;
-            width: 1em;
-            height: 1em;
-            line-height: 1;
-            place-items: center;
-            color: var(--fray-checkbox-symbol-color, currentColor);
-            background: var(--fray-checkbox-box-background, transparent);
-            border: var(--fray-checkbox-box-border, var(--cbx-o-border));
-            border-radius: var(--cbx-border-radius, var(--fray-radius-sm));
-        }
-
-        & [data-part="control"][aria-checked="true"] [data-part="symbol"] {
-            background: var(
-                --fray-checkbox-box-background-checked,
-                var(--fray-selection-background)
-            );
-        }
-    `);
-function D(e) {
-  if (!Array.isArray(e) || e.length === 0)
-    throw new TypeError("Checkbox symbols must be a non-empty tuple array");
-  for (const t of e)
-    if (!Array.isArray(t) || t.length < 2)
-      throw new TypeError("Checkbox symbols must be [symbol, state] tuples");
-}
-class S extends k {
-  constructor(t = {}) {
-    if (super(t), t.onClick != null && typeof t.onClick != "function")
-      throw new TypeError("Button onClick must be a function");
-  }
-  render() {
-    const {
-      children: t = [],
-      label: a,
-      type: i = "button",
-      disabled: s = !1,
-      pressed: o,
-      busy: c = !1,
-      busyLabel: l,
-      id: d,
-      name: f,
-      value: m,
-      title: h,
-      ariaLabel: r,
-      onClick: v
-    } = this.props, p = (Array.isArray(t) ? t.length > 0 : t != null && typeof t != "boolean") ? t : a ?? "", C = c ? l ?? p : p, g = s || c;
-    return /* @__PURE__ */ y(
-      "button",
-      {
-        id: d,
-        name: f,
-        value: m == null ? void 0 : String(m),
-        title: h,
-        type: i,
-        disabled: g,
-        className: w(this.props) || void 0,
-        "data-fray-component": "button",
-        "aria-label": r,
-        "aria-pressed": o == null ? null : String(!!o),
-        "aria-busy": c ? "true" : null,
-        onClick: (A) => {
-          g || E(v, A);
-        },
-        children: C
-      }
-    );
-  }
-}
-n(S, "baseStyles", [
-  ['button[data-fray-component="button"]', ["uiline", "button"]]
-]), n(S, "css", x`
-        button[data-fray-component="button"] {
-            font-family: inherit;
-        }
-    `);
-export {
-  S as B,
-  u as C,
-  b as F,
-  q as a,
-  B as b,
-  w as c,
-  F as d,
-  E as i
-};
-//# sourceMappingURL=button-CqDGmkBt.js.map

package/dist/button-CqDGmkBt.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-CqDGmkBt.js","sources":["../src/Components/controlUtils.ts","../src/util/filterMode.ts","../src/Components/lineinputs/checkbox/Checkbox.tsx","../src/Components/menu/button.tsx"],"sourcesContent":["import {Emitter} from '@sylwellsoftware/glue'\nimport type {EmitterOptions, ReadableEmitter} from '@sylwellsoftware/glue'\n\nimport type {Component, ComponentProps} from './component.js'\n\nexport interface ValueEmitter<TValue> extends ReadableEmitter<TValue, unknown> {\n    set(value: TValue, eventOrCause?: unknown): boolean\n}\n\nexport interface ValueControlProps<TValue> extends ComponentProps {\n    valueEmitter?: ValueEmitter<TValue>\n    value?: TValue\n    defaultValue?: TValue\n    initialValue?: TValue\n}\n\nlet nextControlId = 1\n\nexport function controlId(prefix: string, provided?: string | number | null): string {\n    if (provided != null && String(provided).length > 0) return String(provided)\n    return `fray-${prefix}-${nextControlId++}`\n}\n\nexport function createValueEmitter<TValue>(\n    component: Component,\n    props: ValueControlProps<TValue>,\n    fallback: TValue,\n    purpose: string,\n): ValueEmitter<TValue> {\n    if (props.valueEmitter != null) {\n        assertEmitter<TValue>(props.valueEmitter, 'valueEmitter')\n        return props.valueEmitter\n    }\n    const initialValue = props.defaultValue\n        ?? props.value\n        ?? props.initialValue\n        ?? fallback\n    const options: EmitterOptions<TValue> = {owner: component, purpose}\n    return new Emitter(initialValue, options)\n}\n\nexport function assertEmitter<TValue = unknown>(\n    value: unknown,\n    name = 'emitter',\n): asserts value is ValueEmitter<TValue> {\n    if (value == null\n        || (typeof value !== 'object' && typeof value !== 'function')\n        || typeof Reflect.get(value, 'get') !== 'function'\n        || typeof Reflect.get(value, 'set') !== 'function'\n        || typeof Reflect.get(value, 'subscribe') !== 'function') {\n        throw new TypeError(`${name} must be an emitter`)\n    }\n}\n\nexport function classNames(...values: unknown[]): string {\n    return values\n        .flatMap((value) => typeof value === 'string' ? value.split(/\\s+/) : [])\n        .filter(Boolean)\n        .join(' ')\n}\n\nexport function componentClass(props: Pick<ComponentProps, 'class' | 'className'>): string {\n    return props.className ?? props.class ?? ''\n}\n\nexport function invoke<TArguments extends unknown[]>(\n    callback: ((...args: TArguments) => void) | null | undefined,\n    ...args: TArguments\n): void {\n    if (callback == null) return\n    if (typeof callback !== 'function') throw new TypeError('Control callback must be a function')\n    callback(...args)\n}\n\nexport function assertOptions<TOption>(\n    options: unknown,\n    name = 'options',\n): asserts options is TOption[] {\n    if (!Array.isArray(options)) throw new TypeError(`${name} must be an array`)\n}\n\nexport function describeState(value: unknown): string {\n    if (value === '') return 'prefer'\n    if (value === '!') return 'deny'\n    if (value === '_') return 'require'\n    if (value === '☐') return 'neutral'\n    return String(value)\n}\n","/** Represents the filter mode for a query. */\nexport const FilterMode = {\n    /** Deny mode: Excludes items that match the filter. */\n    Deny: '!',\n    /** Require mode: Includes only items that match the filter. */\n    Require: '_',\n    /** Prefer mode: If there are any filter options that are set to Prefer, at least one of the preferred filter options must match. Otherwise, it is treated as Neutral. */\n    Prefer: '',\n    /** Neutral mode: Does not affect the inclusion or exclusion of items. */\n    Neutral: '☐',\n} as const\n\nexport type FilterModeValue = typeof FilterMode[keyof typeof FilterMode]\n","import {Component, css} from '../../component.js'\nimport type {ComponentProps, FrayChild} from '../../component.js'\nimport {\n    componentClass,\n    createValueEmitter,\n    describeState,\n    invoke,\n} from '../../controlUtils.js'\nimport type {ValueControlProps, ValueEmitter} from '../../controlUtils.js'\nimport {FilterMode} from '../../../util/filterMode.js'\nimport type {FilterModeValue} from '../../../util/filterMode.js'\n\nexport type CheckboxValue = string | number\nexport type CheckboxSymbol<TValue extends CheckboxValue = FilterModeValue> = readonly [\n    symbol: FrayChild,\n    value: TValue,\n]\n\nexport interface CheckboxProps<TValue extends CheckboxValue = FilterModeValue>\n    extends ValueControlProps<TValue> {\n    symbols?: readonly CheckboxSymbol<TValue>[]\n    initialSemanticState?: TValue\n    label?: FrayChild\n    disabled?: boolean\n    required?: boolean\n    name?: string\n    onChange?: (value: TValue, event: Event | null) => void\n}\n\n/** Keyboard-operable semantic state cycler. */\nexport class Checkbox<TValue extends CheckboxValue = FilterModeValue>\n    extends Component<CheckboxProps<TValue>> {\n    static symbols: readonly CheckboxSymbol<FilterModeValue>[] = [\n        ['☐', FilterMode.Neutral],\n        ['✓', FilterMode.Prefer],\n    ]\n    static defaultSemanticState = FilterMode.Neutral\n\n    readonly symbols: readonly CheckboxSymbol<TValue>[]\n    readonly valueEmitter: ValueEmitter<TValue>\n    readonly semanticStateEmitter: ValueEmitter<TValue>\n\n    constructor(props: CheckboxProps<TValue> = {}) {\n        super(props)\n        const componentType = this.constructor as typeof Checkbox\n        // Static members cannot carry the instance's generic state parameter;\n        // subclasses validate the tuple values before this boundary is used.\n        this.symbols = props.symbols\n            ?? componentType.symbols as unknown as readonly CheckboxSymbol<TValue>[]\n        validateSymbols(this.symbols)\n        const fallback = props.initialSemanticState\n            ?? componentType.defaultSemanticState as TValue\n            ?? this.symbols[0]![1]\n        const emitterProps: CheckboxProps<TValue> = {...props}\n        if (emitterProps.defaultValue == null && props.initialSemanticState != null) {\n            emitterProps.defaultValue = props.initialSemanticState\n        }\n        this.valueEmitter = createValueEmitter<TValue>(this, emitterProps, fallback,\n            'checkbox semantic state')\n        // Compatibility alias used only by the experimental filter implementation.\n        this.semanticStateEmitter = this.valueEmitter\n    }\n\n    initialize(): void {\n        this.watch(this.valueEmitter)\n    }\n\n    cycleState(direction = 1, event: Event | null = null): void {\n        if (this.props.disabled) return\n        const currentIndex = this.symbols.findIndex(([, state]) =>\n            Object.is(state, this.valueEmitter.get()))\n        const baseIndex = currentIndex < 0 ? 0 : currentIndex\n        const nextIndex = (baseIndex + direction + this.symbols.length) % this.symbols.length\n        const nextValue = this.symbols[nextIndex]![1]\n        this.valueEmitter.set(nextValue, 'checkbox state changed')\n        invoke(this.props.onChange, nextValue, event)\n    }\n\n    render(): FrayChild {\n        const {\n            label = this.props.value ?? 'Option',\n            disabled = false,\n            required = false,\n            name,\n            value,\n        } = this.props\n        const semanticState = this.valueEmitter.get()\n        const [symbol] = this.symbols.find(([, state]) => Object.is(state, semanticState))\n            ?? ['?', semanticState]\n        const stateName = describeState(semanticState)\n        const checked = semanticState === FilterMode.Prefer\n            || semanticState === FilterMode.Require\n\n        const Host = this.Host\n        return <Host\n            className={componentClass(this.props) || null}\n            data-disabled={disabled ? '' : null}\n            data-required={required ? '' : null}\n            data-state={stateName}\n        >\n            <button\n                type=\"button\"\n                role=\"checkbox\"\n                disabled={disabled}\n                name={name}\n                value={value == null ? undefined : String(value)}\n                data-part=\"control\"\n                aria-checked={checked ? 'true' : 'false'}\n                aria-required={required ? 'true' : null}\n                aria-label={`${label}: ${stateName}`}\n                onClick={(event: MouseEvent) => this.cycleState(1, event)}\n                onKeyDown={(event: KeyboardEvent) => {\n                    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n                        event.preventDefault()\n                        this.cycleState(1, event)\n                    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n                        event.preventDefault()\n                        this.cycleState(-1, event)\n                    }\n                }}\n            >\n                <span data-part=\"symbol\" aria-hidden=\"true\">{symbol}</span>\n                <span data-part=\"label\">{label}</span>\n            </button>\n        </Host>\n    }\n\n    static override hostName = 'checkbox'\n    static override standaloneHostName = 'check-box'\n\n    static baseStyles = [\n        ['&', ['inputline']],\n        ['& > [data-part=\"control\"]', ['input', 'inputline']],\n        ['&[data-disabled]', ['disabled']],\n    ]\n\n    static css = css`\n        & > [data-part=\"control\"] {\n            display: inline-flex;\n            align-items: center;\n            gap: 0.35em;\n            width: auto;\n            font-family: inherit;\n        }\n\n        & [data-part=\"symbol\"] {\n            display: inline-grid;\n            width: 1em;\n            height: 1em;\n            line-height: 1;\n            place-items: center;\n            color: var(--fray-checkbox-symbol-color, currentColor);\n            background: var(--fray-checkbox-box-background, transparent);\n            border: var(--fray-checkbox-box-border, var(--cbx-o-border));\n            border-radius: var(--cbx-border-radius, var(--fray-radius-sm));\n        }\n\n        & [data-part=\"control\"][aria-checked=\"true\"] [data-part=\"symbol\"] {\n            background: var(\n                --fray-checkbox-box-background-checked,\n                var(--fray-selection-background)\n            );\n        }\n    `\n}\n\nfunction validateSymbols<TValue extends CheckboxValue>(\n    symbols: unknown,\n): asserts symbols is readonly CheckboxSymbol<TValue>[] {\n    if (!Array.isArray(symbols) || symbols.length === 0) {\n        throw new TypeError('Checkbox symbols must be a non-empty tuple array')\n    }\n    for (const tuple of symbols) {\n        if (!Array.isArray(tuple) || tuple.length < 2) {\n            throw new TypeError('Checkbox symbols must be [symbol, state] tuples')\n        }\n    }\n}\n","import {Component, css} from '../component.js'\nimport type {ComponentProps, FrayChild} from '../component.js'\nimport {componentClass, invoke} from '../controlUtils.js'\n\nexport interface ButtonProps extends ComponentProps {\n    label?: FrayChild\n    type?: 'button' | 'reset' | 'submit'\n    disabled?: boolean\n    pressed?: boolean\n    busy?: boolean\n    busyLabel?: FrayChild\n    id?: string\n    name?: string\n    value?: string | number\n    title?: string\n    ariaLabel?: string\n    onClick?: (event: MouseEvent) => void\n}\n\n/** Native actionable button primitive. */\nexport class Button extends Component<ButtonProps> {\n    constructor(props: ButtonProps = {}) {\n        super(props)\n        if (props.onClick != null && typeof props.onClick !== 'function') {\n            throw new TypeError('Button onClick must be a function')\n        }\n    }\n\n    render(): FrayChild {\n        const {\n            children = [],\n            label,\n            type = 'button',\n            disabled = false,\n            pressed,\n            busy = false,\n            busyLabel,\n            id,\n            name,\n            value,\n            title,\n            ariaLabel,\n            onClick,\n        } = this.props\n        const hasChildren = Array.isArray(children)\n            ? children.length > 0\n            : children != null && typeof children !== 'boolean'\n        const normalContent = hasChildren ? children : (label ?? '')\n        const content = busy ? (busyLabel ?? normalContent) : normalContent\n        const unavailable = disabled || busy\n\n        return <button\n            id={id}\n            name={name}\n            value={value == null ? undefined : String(value)}\n            title={title}\n            type={type}\n            disabled={unavailable}\n            className={componentClass(this.props) || undefined}\n            data-fray-component=\"button\"\n            aria-label={ariaLabel}\n            aria-pressed={pressed == null ? null : String(Boolean(pressed))}\n            aria-busy={busy ? 'true' : null}\n            onClick={(event: MouseEvent) => {\n                if (!unavailable) invoke(onClick, event)\n            }}\n        >{content}</button>\n    }\n\n    static baseStyles = [\n        ['button[data-fray-component=\"button\"]', ['uiline', 'button']],\n    ]\n\n    static css = css`\n        button[data-fray-component=\"button\"] {\n            font-family: inherit;\n        }\n    `\n}\n"],"names":["nextControlId","controlId","prefix","provided","createValueEmitter","component","props","fallback","purpose","assertEmitter","initialValue","options","Emitter","value","name","componentClass","invoke","callback","args","assertOptions","describeState","FilterMode","Checkbox","Component","__publicField","componentType","validateSymbols","emitterProps","direction","event","currentIndex","state","nextIndex","nextValue","label","disabled","required","semanticState","symbol","stateName","checked","Host","jsx","jsxs","css","symbols","tuple","Button","children","type","pressed","busy","busyLabel","id","title","ariaLabel","onClick","normalContent","content","unavailable"],"mappings":"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"}

package/dist/experimental.d.ts

@@ -1,16 +0,0 @@
-/**
- * Experimental data APIs. These exports may change in any prerelease and are
- * intentionally excluded from the stable package barrel.
- */
-export * from './Components/Placeholder.js';
-export * from './Components/data/listview/listview.js';
-export * from './Components/data/selectionhandler.js';
-export * from './Components/data/table/DataTable.js';
-export * from './Components/data/table/FilterPanel.js';
-export * from './Components/data/table/TableHeader.js';
-export * from './Components/data/table/TableHeaderCell.js';
-export * from './Components/data/table/tableQuery.js';
-export * from './Components/data/treeview/treeitem.js';
-export * from './Components/data/treeview/treeview.js';
-export * from './Components/dialog/dialog.js';
-//# sourceMappingURL=experimental.d.ts.map

package/dist/experimental.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"experimental.d.ts","sourceRoot":"","sources":["../src/experimental.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,cAAc,6BAA6B,CAAA;AAC3C,cAAc,wCAAwC,CAAA;AACtD,cAAc,uCAAuC,CAAA;AACrD,cAAc,sCAAsC,CAAA;AACpD,cAAc,wCAAwC,CAAA;AACtD,cAAc,wCAAwC,CAAA;AACtD,cAAc,4CAA4C,CAAA;AAC1D,cAAc,uCAAuC,CAAA;AACrD,cAAc,wCAAwC,CAAA;AACtD,cAAc,wCAAwC,CAAA;AACtD,cAAc,+BAA+B,CAAA"}