@lyeve-labs/ui-kit 0.11.2 → 0.13.0

package/dist/internal/nav-expansion.svelte.js

@@ -0,0 +1,144 @@
+/**
+ * Which groups in a sidebar are open, and why.
+ *
+ * Expansion looks like one boolean per group and is really three sources
+ * disagreeing: the tree says a group ships open, the current page says its
+ * ancestors have to be open or the reader cannot see where they are, and the
+ * reader says they closed that group and meant it. A component that keeps a
+ * flat set of open ids loses the third one the moment the second changes,
+ * which is how a group reopens itself every time the reader navigates inside
+ * it.
+ *
+ * So the state here is not "open ids". It is the decisions the reader has
+ * made, which are the only part worth persisting, and a default computed from
+ * the tree and the path underneath them. A reader decision always wins, and
+ * until there is one the group follows the page.
+ *
+ * Not exported from the package entry point - this is an implementation detail.
+ */
+import { activeTrail, flattenNav } from './nav-tree.js';
+/**
+ * localStorage is absent on the server and throws on access in a private
+ * window and wherever the reader has blocked site data, so it is reached for
+ * behind both a typeof guard and a catch. Expansion is a convenience; nothing
+ * here may be the reason a sidebar fails to render.
+ */
+function storage() {
+    try {
+        return typeof localStorage === 'undefined' ? undefined : localStorage;
+    }
+    catch {
+        return undefined;
+    }
+}
+function readStored(key) {
+    if (!key)
+        return {};
+    const store = storage();
+    if (!store)
+        return {};
+    try {
+        const raw = store.getItem(key);
+        if (!raw)
+            return {};
+        const parsed = JSON.parse(raw);
+        if (parsed === null || typeof parsed !== 'object' || Array.isArray(parsed))
+            return {};
+        // Another version of the app, or a reader editing the value by hand, can
+        // leave anything at all under this key. Only booleans survive the read.
+        const out = {};
+        for (const [id, open] of Object.entries(parsed)) {
+            if (typeof open === 'boolean')
+                out[id] = open;
+        }
+        return out;
+    }
+    catch {
+        return {};
+    }
+}
+function writeStored(key, value) {
+    if (!key)
+        return;
+    const store = storage();
+    if (!store)
+        return;
+    try {
+        store.setItem(key, JSON.stringify(value));
+    }
+    catch {
+        // A private window answers a write with a quota error. The session keeps
+        // its expansion in memory instead.
+    }
+}
+function hasChildren(node) {
+    return Array.isArray(node.children) && node.children.length > 0;
+}
+export function createNavExpansion(options) {
+    // Read once, with the key the sidebar mounted with. A key that changes later
+    // names a different sidebar, which is a different component instance.
+    const key = options.storageKey();
+    /** The reader's own decisions. An id absent here has not been decided. */
+    let overrides = $state(readStored(key));
+    const trail = $derived(options.expandActive()
+        ? new Set(activeTrail(options.items(), options.activePath()))
+        : new Set());
+    const nodes = $derived(flattenNav(options.items()));
+    function commit(next) {
+        overrides = next;
+        writeStored(key, next);
+    }
+    function ancestorsOf(id) {
+        const walk = (branch, chain) => {
+            for (const node of branch) {
+                if (node.id === id)
+                    return chain;
+                if (node.children && node.children.length > 0) {
+                    const found = walk(node.children, [...chain, node.id]);
+                    if (found)
+                        return found;
+                }
+            }
+            return undefined;
+        };
+        return walk(options.items(), []) ?? [];
+    }
+    function isExpanded(id) {
+        if (Object.prototype.hasOwnProperty.call(overrides, id))
+            return overrides[id];
+        if (nodes.some((entry) => entry.node.id === id && entry.node.defaultExpanded))
+            return true;
+        return trail.has(id);
+    }
+    function expand(id) {
+        if (!options.exclusive()) {
+            commit({ ...overrides, [id]: true });
+            return;
+        }
+        // Exclusive closes every other group, except the ones the opened node sits
+        // inside: collapsing an ancestor would hide the group that was just asked
+        // for. Ids the tree no longer holds keep whatever they had, so a stored
+        // key survives a tree that has not finished loading.
+        const keep = new Set([id, ...ancestorsOf(id)]);
+        const next = { ...overrides };
+        for (const { node } of nodes) {
+            if (hasChildren(node))
+                next[node.id] = keep.has(node.id);
+        }
+        commit(next);
+    }
+    function collapse(id) {
+        // Descendants keep their own decisions. They are not on screen while this
+        // group is shut, and reopening it should restore what the reader left.
+        commit({ ...overrides, [id]: false });
+    }
+    function toggle(id) {
+        if (isExpanded(id)) {
+            collapse(id);
+        }
+        else {
+            expand(id);
+        }
+    }
+    return { isExpanded, toggle, expand, collapse };
+}

package/dist/internal/nav-tree.d.ts

@@ -0,0 +1,68 @@
+/**
+ * How a sidebar decides which of its links is the current page.
+ *
+ * The rule every app shell reaches for is
+ *
+ *     pathname === href || pathname.startsWith(href + '/')
+ *
+ * applied to every entry in the list. It is wrong in two ways that only show
+ * up once the list has more than one level. A parent link keeps claiming the
+ * page while the reader is on one of its children, so a settings sub-page
+ * lights two rows at once and neither of them is where the reader is. And two
+ * leaves where one href is a prefix of the other, /settings beside
+ * /settings/team, mark themselves together for the same reason, even though
+ * they are siblings and only one of them can be open.
+ *
+ * The fix is that prefix matching is a property of a node that owns a section,
+ * not of every node. A leaf answers for its own path and nothing below it; a
+ * node with children answers for its whole subtree, because that is what makes
+ * an ancestor able to say "you are somewhere in here" while its child says
+ * "you are here". Either default is overridable per node, and 'none' opts a
+ * node out of path matching entirely.
+ *
+ * Not exported from the package entry point - this is an implementation detail.
+ */
+import type { Component } from 'svelte';
+import type { AccentTone } from './tone.js';
+export interface NavNode {
+    /** Stable across renders. aria-controls is built from it and an each is keyed by it. */
+    id: string;
+    label: string;
+    href?: string;
+    icon?: Component<{
+        size?: number;
+        class?: string;
+    }>;
+    children?: NavNode[];
+    /** A count or status beside the label. */
+    badge?: string | number;
+    badgeTone?: AccentTone;
+    /** Open on first render. */
+    defaultExpanded?: boolean;
+    /** How activePath matches. Defaults to 'exact' for a leaf and 'prefix' for a node with children. */
+    match?: 'exact' | 'prefix' | 'none';
+    disabled?: boolean;
+}
+export type NavTree = NavNode[];
+/**
+ * True when this node is the current page.
+ *
+ * Path only. A disabled node still reports the truth about its href; whether
+ * it is rendered as a link is a separate decision the component makes.
+ */
+export declare function isActive(node: NavNode, activePath: string): boolean;
+/**
+ * The ids from the root down to the matched leaf, so its ancestors can open
+ * and mark themselves.
+ *
+ * Children are searched before the node itself, so a group never shadows the
+ * child that holds the more specific answer. The first match in document order
+ * wins: two nodes claiming one path is a tree the author has to fix, and
+ * silently picking one of them by length would hide it.
+ */
+export declare function activeTrail(items: NavTree, activePath: string): string[];
+/** Depth-first flatten, for tests and for keyboard order. */
+export declare function flattenNav(items: NavTree): {
+    node: NavNode;
+    depth: number;
+}[];

package/dist/internal/nav-tree.js

@@ -0,0 +1,102 @@
+/**
+ * How a sidebar decides which of its links is the current page.
+ *
+ * The rule every app shell reaches for is
+ *
+ *     pathname === href || pathname.startsWith(href + '/')
+ *
+ * applied to every entry in the list. It is wrong in two ways that only show
+ * up once the list has more than one level. A parent link keeps claiming the
+ * page while the reader is on one of its children, so a settings sub-page
+ * lights two rows at once and neither of them is where the reader is. And two
+ * leaves where one href is a prefix of the other, /settings beside
+ * /settings/team, mark themselves together for the same reason, even though
+ * they are siblings and only one of them can be open.
+ *
+ * The fix is that prefix matching is a property of a node that owns a section,
+ * not of every node. A leaf answers for its own path and nothing below it; a
+ * node with children answers for its whole subtree, because that is what makes
+ * an ancestor able to say "you are somewhere in here" while its child says
+ * "you are here". Either default is overridable per node, and 'none' opts a
+ * node out of path matching entirely.
+ *
+ * Not exported from the package entry point - this is an implementation detail.
+ */
+/**
+ * Trailing slashes are noise: a router hands over /settings on one route and
+ * /settings/ on another, and the two name the same page. Everything else is
+ * left alone, because activePath is documented as a pathname and a query or a
+ * hash that reached here is a caller bug worth seeing rather than absorbing.
+ */
+function normalize(path) {
+    if (path === '')
+        return '';
+    const trimmed = path.replace(/\/+$/, '');
+    return trimmed === '' ? '/' : trimmed;
+}
+/**
+ * A node with children owns a section, so it answers for everything under it.
+ * A leaf answers for its own path alone.
+ */
+function matchMode(node) {
+    if (node.match)
+        return node.match;
+    return node.children && node.children.length > 0 ? 'prefix' : 'exact';
+}
+/**
+ * True when this node is the current page.
+ *
+ * Path only. A disabled node still reports the truth about its href; whether
+ * it is rendered as a link is a separate decision the component makes.
+ */
+export function isActive(node, activePath) {
+    if (!node.href)
+        return false;
+    const mode = matchMode(node);
+    if (mode === 'none')
+        return false;
+    const href = normalize(node.href);
+    const path = normalize(activePath);
+    if (href === '' || path === '')
+        return false;
+    if (path === href)
+        return true;
+    // A root href normalizes to "/", so the prefix it tests for is "//" and it
+    // claims nothing but itself. A dashboard mounted at / would otherwise own
+    // every page in the app.
+    return mode === 'prefix' && path.startsWith(`${href}/`);
+}
+/**
+ * The ids from the root down to the matched leaf, so its ancestors can open
+ * and mark themselves.
+ *
+ * Children are searched before the node itself, so a group never shadows the
+ * child that holds the more specific answer. The first match in document order
+ * wins: two nodes claiming one path is a tree the author has to fix, and
+ * silently picking one of them by length would hide it.
+ */
+export function activeTrail(items, activePath) {
+    for (const node of items) {
+        if (node.children && node.children.length > 0) {
+            const below = activeTrail(node.children, activePath);
+            if (below.length > 0)
+                return [node.id, ...below];
+        }
+        if (isActive(node, activePath))
+            return [node.id];
+    }
+    return [];
+}
+/** Depth-first flatten, for tests and for keyboard order. */
+export function flattenNav(items) {
+    const out = [];
+    const walk = (nodes, depth) => {
+        for (const node of nodes) {
+            out.push({ node, depth });
+            if (node.children && node.children.length > 0)
+                walk(node.children, depth + 1);
+        }
+    };
+    walk(items, 0);
+    return out;
+}

package/dist/internal/overlay.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The behaviour every modal surface owes a keyboard and screen reader user.
+ *
+ * Dialog carried a correct implementation and Modal and Drawer carried none:
+ * both declared `aria-modal="true"` while leaving focus behind them in the
+ * page, so a screen reader user was told a modal had opened and then went on
+ * reading the document underneath it, and a keyboard user tabbed straight out
+ * of the panel with no way back. The behaviour lives here now so a fourth
+ * overlay cannot ship without it.
+ *
+ * Not exported from the package entry point - this is an implementation detail.
+ */
+export declare function lockBodyScroll(): void;
+export declare function unlockBodyScroll(): void;
+/**
+ * Svelte action for the panel element of a modal overlay.
+ *
+ *     <div use:overlay role="dialog" aria-modal="true">
+ *
+ * Moves focus in on mount, keeps Tab inside the panel, locks the page behind
+ * it, and returns focus to whatever opened it on unmount.
+ */
+export declare function overlay(node: HTMLElement): {
+    destroy(): void;
+};

package/dist/internal/overlay.js

@@ -0,0 +1,92 @@
+/**
+ * The behaviour every modal surface owes a keyboard and screen reader user.
+ *
+ * Dialog carried a correct implementation and Modal and Drawer carried none:
+ * both declared `aria-modal="true"` while leaving focus behind them in the
+ * page, so a screen reader user was told a modal had opened and then went on
+ * reading the document underneath it, and a keyboard user tabbed straight out
+ * of the panel with no way back. The behaviour lives here now so a fourth
+ * overlay cannot ship without it.
+ *
+ * Not exported from the package entry point - this is an implementation detail.
+ */
+/**
+ * Elements that can hold focus. `[tabindex="-1"]` is excluded because it is
+ * programmatically focusable but not part of the tab sequence, which is what
+ * the trap is wrapping.
+ */
+const FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+/**
+ * Counted rather than boolean: a dialog opened from inside a drawer must not
+ * restore scrolling when only the inner one closes.
+ */
+let bodyLockCount = 0;
+export function lockBodyScroll() {
+    bodyLockCount++;
+    if (typeof document !== 'undefined') {
+        document.body.style.overflow = 'hidden';
+    }
+}
+export function unlockBodyScroll() {
+    bodyLockCount--;
+    if (bodyLockCount <= 0) {
+        bodyLockCount = 0;
+        if (typeof document !== 'undefined') {
+            document.body.style.overflow = '';
+        }
+    }
+}
+function focusable(node) {
+    return [...node.querySelectorAll(FOCUSABLE)].filter((el) => el.offsetWidth > 0 || el.offsetHeight > 0 || el === document.activeElement);
+}
+/**
+ * Svelte action for the panel element of a modal overlay.
+ *
+ *     <div use:overlay role="dialog" aria-modal="true">
+ *
+ * Moves focus in on mount, keeps Tab inside the panel, locks the page behind
+ * it, and returns focus to whatever opened it on unmount.
+ */
+export function overlay(node) {
+    const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    lockBodyScroll();
+    // A panel with nothing focusable still has to receive focus, or the screen
+    // reader stays on the element behind the overlay and reads the wrong thing.
+    const first = focusable(node)[0];
+    if (first) {
+        first.focus();
+    }
+    else {
+        node.tabIndex = -1;
+        node.focus();
+    }
+    function onkeydown(e) {
+        if (e.key !== 'Tab')
+            return;
+        const items = focusable(node);
+        if (items.length === 0) {
+            e.preventDefault();
+            return;
+        }
+        const head = items[0];
+        const tail = items[items.length - 1];
+        if (e.shiftKey && document.activeElement === head) {
+            e.preventDefault();
+            tail.focus();
+        }
+        else if (!e.shiftKey && document.activeElement === tail) {
+            e.preventDefault();
+            head.focus();
+        }
+    }
+    node.addEventListener('keydown', onkeydown);
+    return {
+        destroy() {
+            node.removeEventListener('keydown', onkeydown);
+            unlockBodyScroll();
+            // The opener can be gone by now, for instance a row action whose row the
+            // dialog just deleted, so this is deliberately best effort.
+            previous?.focus?.();
+        },
+    };
+}

package/dist/internal/panel.d.ts

@@ -0,0 +1,100 @@
+/**
+ * The single source of truth for how a floating panel looks.
+ *
+ * field.ts states the resting control and nothing stated the surface that
+ * opens above it, so each of the four popovers grew its own:
+ *
+ *     MultiSelect  absolute z-50 mt-1 w-full rounded-xl border border-line
+ *                  bg-surface shadow-2xl overflow-hidden
+ *                  and, on an inner region, max-h-60 overflow-y-auto py-1
+ *     Autocomplete absolute z-50 mt-1 w-full max-h-60 overflow-y-auto
+ *                  rounded-xl border border-line bg-surface shadow-2xl py-1
+ *     DatePicker   absolute z-50 mt-1 w-[17rem] rounded-xl border border-line
+ *                  bg-surface shadow-2xl p-3
+ *     Dropdown     absolute z-50 mt-1 py-1 min-w-36 rounded-xl border
+ *                  border-line bg-surface shadow-2xl
+ *
+ * Three of those set a width the consumer cannot influence, and DatePicker
+ * sets it as w-[17rem], a length no token governs. The scroll lives on an
+ * inner region in one, on the surface itself in another and nowhere in the
+ * other two, so a Dropdown of eighty items runs past the bottom of the window
+ * and the last item cannot be reached. Two panels cap their height at max-h-60
+ * and two never cap it. All four draw the boundary with border-line, which
+ * reads 1.25:1 and is the only thing separating the panel from whatever it
+ * happens to float over. The shadow is the one thing they agreed on.
+ *
+ * Width stays at the call site: a menu sized to its trigger and a calendar
+ * sized to seven columns are different requirements. Everything else is here.
+ *
+ * One rule holds these together. No row carries two utilities for the same
+ * property. Colour and background sit on the surface, and a row states only
+ * the override its state earns, because two utilities for one property resolve
+ * in the order Tailwind emits them and not in the order they were written.
+ *
+ * Not exported from the package entry point - this is an implementation detail.
+ */
+/**
+ * The floating surface every popover paints.
+ *
+ * border-line-strong, not border-line: a panel floating over arbitrary content
+ * needs a boundary that clears 3:1, which line does not. It carries the
+ * resting text colour so a row can override it with a single utility.
+ */
+export declare const PANEL_SURFACE = "absolute z-50 mt-1 rounded-xl border border-line-strong bg-surface text-fg shadow-2xl";
+/**
+ * The scrolling region inside it.
+ *
+ * The cap is a token, not max-h-60, so a fifth panel cannot pick a different
+ * one. overscroll-contain stops a wheel that has reached the end of the list
+ * from carrying on into the page behind the open panel.
+ */
+export declare const PANEL_LIST = "max-h-panel-max overflow-y-auto overscroll-contain py-1";
+/**
+ * One row at rest.
+ *
+ * No background and no text colour of its own: it inherits both from the
+ * surface, which leaves each state below a single utility to override.
+ */
+export declare const PANEL_OPTION: string;
+/**
+ * The active descendant.
+ *
+ * A tint alone reads 1.09:1 against the panel, which is not a visible state,
+ * so the active row also carries an inset brand ring. Inset because the row
+ * spans the full width of the panel and an outset ring is clipped by it.
+ */
+export declare const PANEL_OPTION_ACTIVE = "bg-surface-2 ring-1 ring-inset ring-brand";
+/**
+ * A row whose value is selected, which is orthogonal to being active.
+ *
+ * The keyboard sits on one row while any number of rows are chosen, so this
+ * changes the text and never the background the active row is using.
+ */
+export declare const PANEL_OPTION_SELECTED = "font-medium text-brand";
+/**
+ * A row that cannot be chosen.
+ *
+ * pointer-events-none rather than a hover override: :hover still matches a
+ * disabled button, and a second hover background on the same row would resolve
+ * by emitted order, so the row could take the tint and read as choosable.
+ */
+export declare const PANEL_OPTION_DISABLED = "pointer-events-none opacity-40";
+/** The line shown when a filter matched nothing. */
+export declare const PANEL_EMPTY = "px-3 py-2 text-sm text-faint";
+/** A group heading inside the list. Not focusable, so it takes no row classes. */
+export declare const PANEL_GROUP_LABEL = "px-3 pb-1 pt-3 text-xs font-medium uppercase text-faint";
+/**
+ * Composes the option classes for a row's state.
+ *
+ * Exists as a function because three booleans spelled inline at each call site
+ * is how the four panels drifted. A disabled row takes the disabled treatment
+ * and never the active one, even while the keyboard is resting on it: painting
+ * it as the active descendant says Enter will choose it, and Enter will not.
+ * Selection survives both, because a chosen row that has since been disabled
+ * is still chosen.
+ */
+export declare function panelOption(state: {
+    active: boolean;
+    selected: boolean;
+    disabled: boolean;
+}): string;

package/dist/internal/panel.js

@@ -0,0 +1,109 @@
+/**
+ * The single source of truth for how a floating panel looks.
+ *
+ * field.ts states the resting control and nothing stated the surface that
+ * opens above it, so each of the four popovers grew its own:
+ *
+ *     MultiSelect  absolute z-50 mt-1 w-full rounded-xl border border-line
+ *                  bg-surface shadow-2xl overflow-hidden
+ *                  and, on an inner region, max-h-60 overflow-y-auto py-1
+ *     Autocomplete absolute z-50 mt-1 w-full max-h-60 overflow-y-auto
+ *                  rounded-xl border border-line bg-surface shadow-2xl py-1
+ *     DatePicker   absolute z-50 mt-1 w-[17rem] rounded-xl border border-line
+ *                  bg-surface shadow-2xl p-3
+ *     Dropdown     absolute z-50 mt-1 py-1 min-w-36 rounded-xl border
+ *                  border-line bg-surface shadow-2xl
+ *
+ * Three of those set a width the consumer cannot influence, and DatePicker
+ * sets it as w-[17rem], a length no token governs. The scroll lives on an
+ * inner region in one, on the surface itself in another and nowhere in the
+ * other two, so a Dropdown of eighty items runs past the bottom of the window
+ * and the last item cannot be reached. Two panels cap their height at max-h-60
+ * and two never cap it. All four draw the boundary with border-line, which
+ * reads 1.25:1 and is the only thing separating the panel from whatever it
+ * happens to float over. The shadow is the one thing they agreed on.
+ *
+ * Width stays at the call site: a menu sized to its trigger and a calendar
+ * sized to seven columns are different requirements. Everything else is here.
+ *
+ * One rule holds these together. No row carries two utilities for the same
+ * property. Colour and background sit on the surface, and a row states only
+ * the override its state earns, because two utilities for one property resolve
+ * in the order Tailwind emits them and not in the order they were written.
+ *
+ * Not exported from the package entry point - this is an implementation detail.
+ */
+/**
+ * The floating surface every popover paints.
+ *
+ * border-line-strong, not border-line: a panel floating over arbitrary content
+ * needs a boundary that clears 3:1, which line does not. It carries the
+ * resting text colour so a row can override it with a single utility.
+ */
+export const PANEL_SURFACE = 'absolute z-50 mt-1 rounded-xl border border-line-strong bg-surface text-fg shadow-2xl';
+/**
+ * The scrolling region inside it.
+ *
+ * The cap is a token, not max-h-60, so a fifth panel cannot pick a different
+ * one. overscroll-contain stops a wheel that has reached the end of the list
+ * from carrying on into the page behind the open panel.
+ */
+export const PANEL_LIST = 'max-h-panel-max overflow-y-auto overscroll-contain py-1';
+/**
+ * One row at rest.
+ *
+ * No background and no text colour of its own: it inherits both from the
+ * surface, which leaves each state below a single utility to override.
+ */
+export const PANEL_OPTION = 'flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm ' +
+    'transition-colors duration-150 outline-none hover:bg-surface-2 ' +
+    'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand';
+/**
+ * The active descendant.
+ *
+ * A tint alone reads 1.09:1 against the panel, which is not a visible state,
+ * so the active row also carries an inset brand ring. Inset because the row
+ * spans the full width of the panel and an outset ring is clipped by it.
+ */
+export const PANEL_OPTION_ACTIVE = 'bg-surface-2 ring-1 ring-inset ring-brand';
+/**
+ * A row whose value is selected, which is orthogonal to being active.
+ *
+ * The keyboard sits on one row while any number of rows are chosen, so this
+ * changes the text and never the background the active row is using.
+ */
+export const PANEL_OPTION_SELECTED = 'font-medium text-brand';
+/**
+ * A row that cannot be chosen.
+ *
+ * pointer-events-none rather than a hover override: :hover still matches a
+ * disabled button, and a second hover background on the same row would resolve
+ * by emitted order, so the row could take the tint and read as choosable.
+ */
+export const PANEL_OPTION_DISABLED = 'pointer-events-none opacity-40';
+/** The line shown when a filter matched nothing. */
+export const PANEL_EMPTY = 'px-3 py-2 text-sm text-faint';
+/** A group heading inside the list. Not focusable, so it takes no row classes. */
+export const PANEL_GROUP_LABEL = 'px-3 pb-1 pt-3 text-xs font-medium uppercase text-faint';
+/**
+ * Composes the option classes for a row's state.
+ *
+ * Exists as a function because three booleans spelled inline at each call site
+ * is how the four panels drifted. A disabled row takes the disabled treatment
+ * and never the active one, even while the keyboard is resting on it: painting
+ * it as the active descendant says Enter will choose it, and Enter will not.
+ * Selection survives both, because a chosen row that has since been disabled
+ * is still chosen.
+ */
+export function panelOption(state) {
+    const parts = [PANEL_OPTION];
+    if (state.selected)
+        parts.push(PANEL_OPTION_SELECTED);
+    if (state.disabled) {
+        parts.push(PANEL_OPTION_DISABLED);
+    }
+    else if (state.active) {
+        parts.push(PANEL_OPTION_ACTIVE);
+    }
+    return parts.join(' ');
+}