@kerfjs/ui 5.0.0-beta.98 → 5.0.0-beta.99

package/dist/choice-chips.d.ts

@@ -4,7 +4,7 @@ import { CssColor } from './css-values.js';
 type ChoiceChipsSize = 'default' | 'compact';
 /**
  * A leading color dot: a {@link CssColor} from `uiColor()`, `colorVar()`, or
- * `foregroundColor()`, or `'transparent'` for the no-color swatch (an outlined
+ * `fillColor()`, or `'transparent'` for the no-color swatch (an outlined
  * dot struck through by a diagonal line).
  */
 type ChoiceChipsSwatch = CssColor | 'transparent';
@@ -21,38 +21,62 @@ interface ChoiceChipsChoice<Value extends string = string> {
     disabled?: boolean;
 }
 interface ChoiceChipsCommonProps<Value extends string> {
-    /** Native radio `name`: the form field the selected value submits under. */
+    /**
+     * Native input `name`: the form field the selected value (or, with
+     * `multiple`, every checked value) submits under.
+     */
     name: string;
-    /** The selected value. Omit (or pass `undefined`) for no selection. */
-    value?: NoInfer<Value>;
     choices: readonly ChoiceChipsChoice<Value>[];
-    /** Delegated `data-action` on every radio; listen for `change`. */
+    /** Delegated `data-action` on every input; listen for `change`. */
     action?: string;
     size?: ChoiceChipsSize;
     /** Disable the whole group. */
     disabled?: boolean;
-    /** Require a selection for native form validation. */
-    required?: boolean;
-    /** Associate the radios with a form outside their ancestor chain. */
+    /** Associate the inputs with a form outside their ancestor chain. */
     form?: string;
     id?: string;
     className?: string;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
-/** A radio group is named either by a string or by a visible heading's id. */
-type ChoiceChipsProps<Value extends string = string> = ChoiceChipsCommonProps<Value> & ({
+/** One exclusive value (the default), backed by native radios. */
+interface ChoiceChipsSingleProps<Value extends string = string> {
+    multiple?: false;
+    /** The selected value. Omit (or pass `undefined`) for no selection. */
+    value?: NoInfer<Value>;
+    /** Require a selection for native form validation. */
+    required?: boolean;
+}
+/**
+ * Any number of values, backed by native checkboxes: each pill is its own Tab
+ * stop, Space toggles it, and every checked value submits under `name`.
+ */
+interface ChoiceChipsMultipleProps<Value extends string = string> {
+    multiple: true;
+    /** The checked values. Omit (or pass `[]`) for none. */
+    value?: readonly NoInfer<Value>[];
+    /**
+     * Native `required` on a checkbox demands that one box, so a multiple group
+     * has no "at least one" requirement; validate the checked set in the app.
+     */
+    required?: never;
+}
+/** A group is named either by a string or by a visible heading's id. */
+type ChoiceChipsNaming = {
     label: string;
     labelledBy?: never;
 } | {
     labelledBy: string;
     label?: never;
-});
+};
+type ChoiceChipsProps<Value extends string = string> = ChoiceChipsCommonProps<Value> & (ChoiceChipsSingleProps<Value> | ChoiceChipsMultipleProps<Value>) & ChoiceChipsNaming;
 /**
- * An exclusive, wrapping set of pill chips backed by native radios: one Tab
- * stop, arrow-key selection, and a real form value. Each choice may lead with
- * a color swatch (including a struck-through transparent swatch) or an icon.
+ * A wrapping set of pill chips backed by native inputs. By default it is an
+ * exclusive radio group: one Tab stop, arrow-key selection, and a real form
+ * value. With `multiple` it is a checkbox group: each pill toggles on its own
+ * and every checked value submits. Each choice may lead with a color swatch
+ * (including a struck-through transparent swatch) or an icon.
  */
-declare function ChoiceChips<Value extends string>({ name, value, choices, action, size, disabled, required, form, id, className, slot, label, labelledBy, }: ChoiceChipsProps<Value>): SafeHtml;
+declare function ChoiceChips<Value extends string>(props: ChoiceChipsProps<Value>): SafeHtml;
 
-export { ChoiceChips, type ChoiceChipsChoice, type ChoiceChipsProps, type ChoiceChipsSize, type ChoiceChipsSwatch };
+export { ChoiceChips, type ChoiceChipsChoice, type ChoiceChipsMultipleProps, type ChoiceChipsNaming, type ChoiceChipsProps, type ChoiceChipsSingleProps, type ChoiceChipsSize, type ChoiceChipsSwatch };

package/dist/choice-chips.js

@@ -1,3 +1,3 @@
-export { ChoiceChips } from './chunk-PRG4CL3Q.js';
+export { ChoiceChips } from './chunk-FR76ZJQC.js';
 
 //# sourceMappingURL=choice-chips.js.map

package/dist/chunk-34U4ANDJ.js

@@ -0,0 +1,119 @@
+import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
+
+// src/components/feedback/chip/chip.tsx
+function removeButton(action, label, disabled) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      class: "kui-chip__remove",
+      type: "button",
+      "data-action": action,
+      "aria-label": label,
+      disabled,
+      children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "12", height: "12", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M3.5 3.5 12.5 12.5M12.5 3.5 3.5 12.5",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "1.75",
+          "stroke-linecap": "round"
+        }
+      ) })
+    }
+  );
+}
+function downloadValue(download) {
+  switch (download) {
+    case void 0:
+    case false:
+      return void 0;
+    case true:
+      return "";
+    default:
+      return download;
+  }
+}
+function Chip({
+  children,
+  icon,
+  truncate = false,
+  tone = "neutral",
+  appearance = "quiet",
+  shape = "pill",
+  size = "default",
+  disabled = false,
+  itemId,
+  className = "",
+  slot,
+  href,
+  download,
+  external = false,
+  removeAction,
+  removeLabel
+}) {
+  if (truncate && typeof children !== "string")
+    throw new TypeError("Chip truncate requires a plain text label");
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon === void 0 ? null : /* @__PURE__ */ jsx("span", { class: "kui-chip__icon", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        class: "kui-chip__label",
+        title: truncate ? String(children) : void 0,
+        children
+      }
+    )
+  ] });
+  const rootClass = `kui-chip ${className}`.trim();
+  if (href !== void 0) {
+    const textLabel = typeof children === "string" || typeof children === "number" ? String(children) : void 0;
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        class: rootClass,
+        href: disabled ? void 0 : href,
+        download: disabled ? void 0 : downloadValue(download),
+        target: disabled || !external ? void 0 : "_blank",
+        rel: disabled || !external ? void 0 : "noopener noreferrer",
+        tabindex: disabled ? -1 : void 0,
+        "aria-label": external && textLabel !== void 0 ? `${textLabel} (opens in new tab)` : void 0,
+        "aria-disabled": disabled ? "true" : void 0,
+        "data-component": "chip",
+        "data-link": "",
+        "data-tone": tone,
+        "data-appearance": appearance,
+        "data-shape": shape,
+        "data-size": size,
+        "data-disabled": disabled ? "" : void 0,
+        "data-truncate": truncate ? "" : void 0,
+        "data-item-id": itemId,
+        slot,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      class: rootClass,
+      "data-component": "chip",
+      "data-tone": tone,
+      "data-appearance": appearance,
+      "data-shape": shape,
+      "data-size": size,
+      "data-disabled": disabled ? "" : void 0,
+      "data-truncate": truncate ? "" : void 0,
+      "data-item-id": itemId,
+      slot,
+      children: [
+        content,
+        removeAction !== void 0 && removeLabel !== void 0 ? removeButton(removeAction, removeLabel, disabled) : null
+      ]
+    }
+  );
+}
+
+export { Chip };
+
+//# sourceMappingURL=chunk-34U4ANDJ.js.map

package/dist/chunk-34U4ANDJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/chip/chip.tsx"],"names":[],"mappings":"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","file":"chunk-34U4ANDJ.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { SemanticTone } from '../../../shared/styles/semantic-tone.js';\nimport type { BadgeAppearance, BadgeShape, BadgeSize } from '../badge/badge.js';\n\n/**\n * A chip color role: a shared semantic tone, or `inherit`, which follows the\n * surrounding foreground (a chip inside a `brand-loud` ContentItem bubble)\n * and derives its fill, border, and focus ring from `currentColor`.\n */\nexport type ChipTone = SemanticTone | 'inherit';\n\ninterface ChipCommonProps {\n  /** Decorative leading icon, normally an unsized LucideIcon. */\n  icon?: SafeHtml;\n  tone?: ChipTone;\n  appearance?: BadgeAppearance;\n  shape?: BadgeShape;\n  size?: BadgeSize;\n  disabled?: boolean;\n  /** Record identifier available to an application delegated action handler. */\n  itemId?: string;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\ntype ChipLabelProps =\n  | { children: SafeHtml | string | number; truncate?: false }\n  | { children: string; truncate: true };\n\ninterface ChipNoLinkProps {\n  href?: never;\n  download?: never;\n  external?: never;\n}\n\n/**\n * A link chip renders a native `<a>` with Chip geometry. It cannot also carry\n * a remove button, because a button inside a link is invalid.\n */\ninterface ChipLinkProps {\n  /** Native destination; the chip renders as an `<a>`. */\n  href: string;\n  /** Download the destination: `true`, or the suggested file name. */\n  download?: string | boolean;\n  /** Open in a new tab with a safe rel and announce that behavior. */\n  external?: boolean;\n  removeAction?: never;\n  removeLabel?: never;\n}\n\n/**\n * A plain chip, a removable chip (a delegated action plus a specific\n * accessible name), or a link chip (`href`, optional `download`/`external`).\n */\nexport type ChipProps = ChipCommonProps &\n  ChipLabelProps &\n  (\n    | ({ removeAction: string; removeLabel: string } & ChipNoLinkProps)\n    | ({ removeAction?: never; removeLabel?: never } & ChipNoLinkProps)\n    | ChipLinkProps\n  );\n\nfunction removeButton(action: string, label: string, disabled: boolean) {\n  return (\n    <button\n      class=\"kui-chip__remove\"\n      type=\"button\"\n      data-action={action}\n      aria-label={label}\n      disabled={disabled}\n    >\n      <svg viewBox=\"0 0 16 16\" width=\"12\" height=\"12\" aria-hidden=\"true\">\n        <path\n          d=\"M3.5 3.5 12.5 12.5M12.5 3.5 3.5 12.5\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.75\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </button>\n  );\n}\n\nfunction downloadValue(download: string | boolean | undefined) {\n  switch (download) {\n    case undefined:\n    case false:\n      return undefined;\n    case true:\n      return '';\n    default:\n      return download;\n  }\n}\n\n/**\n * A short label with an optional native remove button, or a native link when\n * `href` is set. The application owns removal and the link destination.\n */\nexport function Chip({\n  children,\n  icon,\n  truncate = false,\n  tone = 'neutral',\n  appearance = 'quiet',\n  shape = 'pill',\n  size = 'default',\n  disabled = false,\n  itemId,\n  className = '',\n  slot,\n  href,\n  download,\n  external = false,\n  removeAction,\n  removeLabel,\n}: ChipProps) {\n  if (truncate && typeof children !== 'string')\n    throw new TypeError('Chip truncate requires a plain text label');\n  const content = (\n    <>\n      {icon === undefined ? null : (\n        <span class=\"kui-chip__icon\" aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      <span\n        class=\"kui-chip__label\"\n        title={truncate ? String(children) : undefined}\n      >\n        {children}\n      </span>\n    </>\n  );\n  const rootClass = `kui-chip ${className}`.trim();\n  if (href !== undefined) {\n    const textLabel =\n      typeof children === 'string' || typeof children === 'number'\n        ? String(children)\n        : undefined;\n    return (\n      <a\n        class={rootClass}\n        href={disabled ? undefined : href}\n        download={disabled ? undefined : downloadValue(download)}\n        target={disabled || !external ? undefined : '_blank'}\n        rel={disabled || !external ? undefined : 'noopener noreferrer'}\n        tabindex={disabled ? -1 : undefined}\n        aria-label={\n          external && textLabel !== undefined\n            ? `${textLabel} (opens in new tab)`\n            : undefined\n        }\n        aria-disabled={disabled ? 'true' : undefined}\n        data-component=\"chip\"\n        data-link=\"\"\n        data-tone={tone}\n        data-appearance={appearance}\n        data-shape={shape}\n        data-size={size}\n        data-disabled={disabled ? '' : undefined}\n        data-truncate={truncate ? '' : undefined}\n        data-item-id={itemId}\n        slot={slot}\n      >\n        {content}\n      </a>\n    );\n  }\n  return (\n    <span\n      class={rootClass}\n      data-component=\"chip\"\n      data-tone={tone}\n      data-appearance={appearance}\n      data-shape={shape}\n      data-size={size}\n      data-disabled={disabled ? '' : undefined}\n      data-truncate={truncate ? '' : undefined}\n      data-item-id={itemId}\n      slot={slot}\n    >\n      {content}\n      {removeAction !== undefined && removeLabel !== undefined\n        ? removeButton(removeAction, removeLabel, disabled)\n        : null}\n    </span>\n  );\n}\n"]}

package/dist/{chunk-36TL6BCR.js → chunk-3GLYIIFR.js}

@@ -1,7 +1,7 @@
-import { nativeDraggable, withWordBreaks } from './chunk-4LOK4634.js';
-import { Skeleton } from './chunk-Y43B6DS3.js';
-import { LoadingSpinner } from './chunk-YOKEL75M.js';
-import { remify, em } from './chunk-U657IHFB.js';
+import { listIconTilePresentation, nativeDraggable, withWordBreaks } from './chunk-ZNROKDSZ.js';
+import { Skeleton } from './chunk-CVD5IZGB.js';
+import { LoadingSpinner } from './chunk-WVS6CUCT.js';
+import { remify, em } from './chunk-IQSRHXZR.js';
 import { filterDataAttributes } from './chunk-KH4KEMSP.js';
 import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
 
@@ -18,6 +18,8 @@ var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
   "data-state",
   "data-kui-disabled",
   "data-icon-align",
+  "data-icon-tile",
+  "data-icon-tile-tone",
   "data-dragging",
   "data-drop-position"
 ]);
@@ -25,14 +27,30 @@ function listItemContent({
   label,
   description,
   icon,
+  tile,
   trailing,
   status,
   busy = false,
   multiline = false,
   placeholder = false
 }) {
+  const tileSize = tile?.tile ? 32 : 18;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    icon && /* @__PURE__ */ jsx("span", { class: "kui-list-item__icon", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { block: true, width: remify(18), height: remify(18) }) : icon }),
+    icon && /* @__PURE__ */ jsx(
+      "span",
+      {
+        class: "kui-list-item__icon",
+        style: placeholder ? void 0 : tile?.style,
+        children: placeholder ? /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            block: true,
+            width: remify(tileSize),
+            height: remify(tileSize)
+          }
+        ) : icon
+      }
+    ),
     /* @__PURE__ */ jsxs("span", { class: "kui-list-item__label", children: [
       /* @__PURE__ */ jsx("span", { class: "kui-list-item__primary-label", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: em(9) }) : multiline ? withWordBreaks(label) : label }),
       description && /* @__PURE__ */ jsx("span", { class: "kui-list-item__description", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: em(11) }) : description })
@@ -48,6 +66,7 @@ function ListItem({
   label,
   description,
   icon,
+  iconTile,
   trailing,
   status,
   busy = false,
@@ -76,6 +95,7 @@ function ListItem({
     rootAttributes,
     PROTECTED_ROOT_DATA_ATTRIBUTES
   );
+  const tile = icon ? listIconTilePresentation(iconTile, "list-item") : null;
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -92,6 +112,8 @@ function ListItem({
       "data-has-description": String(Boolean(description)),
       "data-multiline": multiline ? "true" : void 0,
       "data-icon-align": multiline ? multilineIconAlign : void 0,
+      "data-icon-tile": tile?.tile,
+      "data-icon-tile-tone": tile?.tone,
       "data-density": density,
       "data-divider": divider,
       "data-busy": busy ? "true" : void 0,
@@ -110,6 +132,7 @@ function ListItem({
         label,
         description,
         icon,
+        tile,
         trailing,
         status,
         busy,
@@ -125,6 +148,7 @@ function ListItemLink({
   label,
   description,
   icon,
+  iconTile,
   trailing,
   status,
   busy = false,
@@ -151,6 +175,7 @@ function ListItemLink({
     rootAttributes,
     PROTECTED_ROOT_DATA_ATTRIBUTES
   );
+  const tile = icon ? listIconTilePresentation(iconTile, "list-item") : null;
   const inactive = disabled || placeholder;
   const linkLabel = accessibleLabel ?? (external && typeof label === "string" ? `${label} (opens in new tab)` : void 0);
   return /* @__PURE__ */ jsx(
@@ -169,6 +194,8 @@ function ListItemLink({
       "data-has-description": String(Boolean(description)),
       "data-multiline": multiline ? "true" : void 0,
       "data-icon-align": multiline ? multilineIconAlign : void 0,
+      "data-icon-tile": tile?.tile,
+      "data-icon-tile-tone": tile?.tone,
       "data-density": density,
       "data-divider": divider,
       "data-busy": busy ? "true" : void 0,
@@ -187,6 +214,7 @@ function ListItemLink({
         label,
         description,
         icon,
+        tile,
         trailing,
         status,
         busy,
@@ -199,4 +227,4 @@ function ListItemLink({
 
 export { ListItem, ListItemLink };
 
-//# sourceMappingURL=chunk-36TL6BCR.js.map
+//# sourceMappingURL=chunk-3GLYIIFR.js.map

package/dist/chunk-3GLYIIFR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/collections/list-item/list-item.tsx"],"names":[],"mappings":"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","file":"chunk-3GLYIIFR.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport {\n  type ListIconTile,\n  type ListIconTilePresentation,\n  listIconTilePresentation,\n} from '../../../shared/content/list-icon-tile.js';\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { nativeDraggable } from '../../../shared/dom/draggable.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport { em, remify } from '../../../shared/styles/css-values.js';\nimport { withWordBreaks } from '../../../shared/text/word-breaks.js';\nimport { LoadingSpinner } from '../../feedback/loading-spinner/loading-spinner.js';\nimport { Skeleton } from '../../feedback/skeleton/skeleton.js';\n\nexport type {\n  ListIconTile,\n  ListIconTileColor,\n  ListIconTileTone,\n} from '../../../shared/content/list-icon-tile.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-item-id',\n  'data-has-icon',\n  'data-has-description',\n  'data-multiline',\n  'data-density',\n  'data-divider',\n  'data-busy',\n  'data-state',\n  'data-kui-disabled',\n  'data-icon-align',\n  'data-icon-tile',\n  'data-icon-tile-tone',\n  'data-dragging',\n  'data-drop-position',\n]);\n\ntype ListItemRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-item-id'?: never;\n    'data-has-icon'?: never;\n    'data-has-description'?: never;\n    'data-multiline'?: never;\n    'data-density'?: never;\n    'data-divider'?: never;\n    'data-busy'?: never;\n    'data-state'?: never;\n    'data-kui-disabled'?: never;\n    'data-icon-align'?: never;\n    'data-icon-tile'?: never;\n    'data-icon-tile-tone'?: never;\n    'data-dragging'?: never;\n    'data-drop-position'?: never;\n  }\n>;\n\nexport interface ListItemProps {\n  label: string | SafeHtml;\n  /** App-owned supporting text rendered in the component's stable label stack. */\n  description?: string | SafeHtml;\n  icon?: SafeHtml;\n  /** Present `icon` in a filled 32px rounded tile with an 18px glyph: a quiet tone preset, or `{ color, foreground? }` for an application color. */\n  iconTile?: ListIconTile;\n  /** Dormant author content at the row's end; a placeholder renders it as a skeleton. */\n  trailing?: KerfUiContent;\n  /** Dormant status metadata rendered before trailing content; a placeholder renders it as a skeleton. */\n  status?: string | SafeHtml;\n  /** Show a progress indicator and expose the row as busy without replacing its content; a placeholder keeps the indicator. */\n  busy?: boolean;\n  density?: 'standard' | 'compact' | 'spacious';\n  divider?: 'none' | 'before' | 'after' | 'both';\n  selected?: boolean;\n  action: string;\n  itemId?: string;\n  className?: string;\n  pressed?: boolean;\n  accessibleLabel?: string;\n  title?: string;\n  multiline?: boolean;\n  /** Alignment of an icon beside a wrapped label. Defaults to its first line. */\n  multilineIconAlign?: 'first-line' | 'center';\n  state?: string;\n  disabled?: boolean;\n  tabIndex?: number;\n  /** Render the row as an unanimated loading skeleton, disabling its action: label, description, icon, status, and trailing content become skeletons; the `busy` indicator stays live. */\n  placeholder?: boolean;\n  /** Native HTML drag source (`draggable=\"true\"`); a placeholder is never draggable. Pair with `wireListReorder` for pointer and keyboard reordering. */\n  draggable?: boolean;\n  /** Dim this row as one of the rows being dragged. */\n  dragging?: boolean;\n  /** Draw the insertion line at this row's leading (`before`) or trailing (`after`) block edge. */\n  dropPosition?: 'before' | 'after';\n  rootAttributes?: ListItemRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport interface ListItemLinkProps extends Omit<\n  ListItemProps,\n  'action' | 'pressed'\n> {\n  /** Native destination for this navigation row. */\n  href: string;\n  /** Open in a new tab with a safe rel and announce that behavior. */\n  external?: boolean;\n  action?: never;\n  pressed?: never;\n}\n\nfunction listItemContent({\n  label,\n  description,\n  icon,\n  tile,\n  trailing,\n  status,\n  busy = false,\n  multiline = false,\n  placeholder = false,\n}: Pick<\n  ListItemProps,\n  | 'label'\n  | 'description'\n  | 'icon'\n  | 'trailing'\n  | 'status'\n  | 'busy'\n  | 'multiline'\n  | 'placeholder'\n> & { tile: ListIconTilePresentation | null }) {\n  const tileSize = tile?.tile ? 32 : 18;\n  return (\n    <>\n      {icon && (\n        <span\n          class=\"kui-list-item__icon\"\n          style={placeholder ? undefined : tile?.style}\n        >\n          {placeholder ? (\n            <Skeleton\n              block\n              width={remify(tileSize)}\n              height={remify(tileSize)}\n            />\n          ) : (\n            icon\n          )}\n        </span>\n      )}\n      <span class=\"kui-list-item__label\">\n        <span class=\"kui-list-item__primary-label\">\n          {placeholder ? (\n            <Skeleton width={em(9)} />\n          ) : multiline ? (\n            withWordBreaks(label)\n          ) : (\n            label\n          )}\n        </span>\n        {description && (\n          <span class=\"kui-list-item__description\">\n            {placeholder ? <Skeleton width={em(11)} /> : description}\n          </span>\n        )}\n      </span>\n      {(busy || status || trailing) && (\n        <span class=\"kui-list-item__trailing\">\n          {/* The busy spinner is component-owned chrome drawn from a known\n              prop, so a placeholder keeps it live. Status text and\n              author-supplied trailing content are values: skeletons. */}\n          {busy && <LoadingSpinner />}\n          {status && (\n            <span class=\"kui-list-item__status\">\n              {placeholder ? <Skeleton width={em(3.5)} /> : status}\n            </span>\n          )}\n          {trailing && (placeholder ? <Skeleton width={em(1.5)} /> : trailing)}\n        </span>\n      )}\n    </>\n  );\n}\n\nexport function ListItem({\n  label,\n  description,\n  icon,\n  iconTile,\n  trailing,\n  status,\n  busy = false,\n  density = 'standard',\n  divider = 'none',\n  selected = false,\n  action,\n  itemId,\n  className = '',\n  pressed,\n  accessibleLabel,\n  title,\n  multiline = false,\n  multilineIconAlign = 'first-line',\n  state,\n  disabled = false,\n  tabIndex,\n  placeholder = false,\n  draggable,\n  dragging = false,\n  dropPosition,\n  rootAttributes = {},\n  slot,\n}: ListItemProps) {\n  const extensionAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  const tile = icon ? listIconTilePresentation(iconTile, 'list-item') : null;\n  return (\n    <button\n      {...extensionAttributes}\n      type=\"button\"\n      class={`kui-list-item ${className}`.trim()}\n      title={placeholder ? undefined : title}\n      disabled={disabled || placeholder}\n      tabindex={placeholder ? -1 : tabIndex}\n      data-component=\"list-item\"\n      data-action={placeholder ? undefined : action}\n      data-item-id={itemId}\n      data-has-icon={String(Boolean(icon))}\n      data-has-description={String(Boolean(description))}\n      data-multiline={multiline ? 'true' : undefined}\n      data-icon-align={multiline ? multilineIconAlign : undefined}\n      data-icon-tile={tile?.tile}\n      data-icon-tile-tone={tile?.tone}\n      data-density={density}\n      data-divider={divider}\n      data-busy={busy ? 'true' : undefined}\n      data-state={state}\n      data-kui-disabled={disabled ? 'true' : undefined}\n      data-placeholder={placeholder ? 'true' : undefined}\n      draggable={nativeDraggable(draggable, placeholder)}\n      data-dragging={dragging ? 'true' : undefined}\n      data-drop-position={dropPosition}\n      aria-label={accessibleLabel}\n      aria-current={selected ? 'page' : undefined}\n      aria-pressed={pressed === undefined ? undefined : String(pressed)}\n      aria-busy={placeholder || busy ? 'true' : undefined}\n      slot={slot}\n    >\n      {listItemContent({\n        label,\n        description,\n        icon,\n        tile,\n        trailing,\n        status,\n        busy,\n        multiline,\n        placeholder,\n      })}\n    </button>\n  );\n}\n\n/** A navigation row with native link activation and ListItem geometry. */\nexport function ListItemLink({\n  href,\n  external = false,\n  label,\n  description,\n  icon,\n  iconTile,\n  trailing,\n  status,\n  busy = false,\n  density = 'standard',\n  divider = 'none',\n  selected = false,\n  itemId,\n  className = '',\n  accessibleLabel,\n  title,\n  multiline = false,\n  multilineIconAlign = 'first-line',\n  state,\n  disabled = false,\n  tabIndex,\n  placeholder = false,\n  draggable,\n  dragging = false,\n  dropPosition,\n  rootAttributes = {},\n  slot,\n}: ListItemLinkProps) {\n  const extensionAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  const tile = icon ? listIconTilePresentation(iconTile, 'list-item') : null;\n  const inactive = disabled || placeholder;\n  const linkLabel =\n    accessibleLabel ??\n    (external && typeof label === 'string'\n      ? `${label} (opens in new tab)`\n      : undefined);\n  return (\n    <a\n      {...extensionAttributes}\n      class={`kui-list-item ${className}`.trim()}\n      href={inactive ? undefined : href}\n      target={inactive || !external ? undefined : '_blank'}\n      rel={inactive || !external ? undefined : 'noopener noreferrer'}\n      title={placeholder ? undefined : title}\n      tabindex={inactive ? -1 : tabIndex}\n      data-component=\"list-item-link\"\n      data-item-id={itemId}\n      data-has-icon={String(Boolean(icon))}\n      data-has-description={String(Boolean(description))}\n      data-multiline={multiline ? 'true' : undefined}\n      data-icon-align={multiline ? multilineIconAlign : undefined}\n      data-icon-tile={tile?.tile}\n      data-icon-tile-tone={tile?.tone}\n      data-density={density}\n      data-divider={divider}\n      data-busy={busy ? 'true' : undefined}\n      data-state={state}\n      data-kui-disabled={disabled ? 'true' : undefined}\n      data-placeholder={placeholder ? 'true' : undefined}\n      draggable={nativeDraggable(draggable, placeholder)}\n      data-dragging={dragging ? 'true' : undefined}\n      data-drop-position={dropPosition}\n      aria-label={linkLabel}\n      aria-current={selected ? 'page' : undefined}\n      aria-disabled={inactive ? 'true' : undefined}\n      aria-busy={placeholder || busy ? 'true' : undefined}\n      slot={slot}\n    >\n      {listItemContent({\n        label,\n        description,\n        icon,\n        tile,\n        trailing,\n        status,\n        busy,\n        multiline,\n        placeholder,\n      })}\n    </a>\n  );\n}\n"]}

package/dist/{chunk-HWY4BSLS.js → chunk-3VXDSIBJ.js}

@@ -1,4 +1,4 @@
-import { LucideIcon } from './chunk-UKKRPP56.js';
+import { LucideIcon } from './chunk-LOSRXZAH.js';
 import { ChevronRight } from 'lucide';
 import { jsx } from 'kerfjs/jsx-runtime';
 
@@ -43,4 +43,4 @@ function DisclosureArrow({
 
 export { DisclosureArrow };
 
-//# sourceMappingURL=chunk-HWY4BSLS.js.map
+//# sourceMappingURL=chunk-3VXDSIBJ.js.map

package/dist/{chunk-HWY4BSLS.js.map → chunk-3VXDSIBJ.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/navigation/disclosure-arrow/disclosure-arrow.tsx"],"names":[],"mappings":";;;;AAqBA,IAAM,kBAAA,GAA0D;AAAA,EAC9D,KAAA,EAAO,CAAA;AAAA,EACP,IAAA,EAAM,EAAA;AAAA,EACN,IAAA,EAAM,GAAA;AAAA,EACN,EAAA,EAAI;AACN,CAAA;AAEA,SAAS,gBAAA,CACP,IAAA,EACA,aAAA,EACA,eAAA,EACA;AACA,EAAA,MAAM,cAAA,GAAiB,mBAAmB,eAAe,CAAA;AACzD,EAAA,IAAI,CAAC,MAAM,OAAO,cAAA;AAElB,EAAA,MAAM,YAAA,GAAe,mBAAmB,aAAa,CAAA;AACrD,EAAA,MAAM,aAAA,GAAA,CAAkB,YAAA,GAAe,cAAA,GAAiB,GAAA,IAAO,GAAA,GAAO,GAAA;AACtE,EAAA,OAAO,cAAA,GAAiB,aAAA;AAC1B;AAEO,SAAS,eAAA,CAAgB;AAAA,EAC9B,IAAA;AAAA,EACA,aAAA,GAAgB,MAAA;AAAA,EAChB,eAAA,GAAkB,OAAA;AAAA,EAClB,IAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAyB;AACvB,EAAA,MAAM,SAAA,GAAY,OAAO,aAAA,GAAgB,eAAA;AACzC,EAAA,MAAM,QAAA,GAAW,gBAAA,CAAiB,IAAA,EAAM,aAAA,EAAe,eAAe,CAAA;AACtE,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,qBAAA,EAAwB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAChD,KAAA,EAAO,oCAAoC,QAAQ,CAAA,GAAA,EAAM,OAAO,CAAA,6BAAA,EAAgC,IAAI,KAAK,EAAE,CAAA,CAAA;AAAA,MAC3G,gBAAA,EAAe,kBAAA;AAAA,MACf,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,gBAAA,EAAgB,SAAA;AAAA,MAChB,aAAA,EAAY,MAAA;AAAA,MACZ,IAAA;AAAA,MAEC,kCAAQ,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAM,YAAA,EAAc,MAAK,eAAA,EAAgB;AAAA;AAAA,GAChE;AAEJ","file":"chunk-HWY4BSLS.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport { ChevronRight } from 'lucide';\n\nimport type { CssLength } from '../../../shared/styles/css-values.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\n\nexport type DisclosureDirection = 'up' | 'down' | 'left' | 'right';\n\nexport interface DisclosureArrowProps {\n  open: boolean;\n  openDirection?: DisclosureDirection;\n  closedDirection?: DisclosureDirection;\n  /** Replacement icons should use right as their unrotated orientation. */\n  icon?: SafeHtml;\n  /** Typed box size for the square visual. Default: `remify(18px)`. */\n  size?: CssLength;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nconst directionRotations: Record<DisclosureDirection, number> = {\n  right: 0,\n  down: 90,\n  left: 180,\n  up: 270,\n};\n\nfunction rotationForState(\n  open: boolean,\n  openDirection: DisclosureDirection,\n  closedDirection: DisclosureDirection,\n) {\n  const closedRotation = directionRotations[closedDirection];\n  if (!open) return closedRotation;\n\n  const openRotation = directionRotations[openDirection];\n  const shortestDelta = ((openRotation - closedRotation + 540) % 360) - 180;\n  return closedRotation + shortestDelta;\n}\n\nexport function DisclosureArrow({\n  open,\n  openDirection = 'down',\n  closedDirection = 'right',\n  icon,\n  size,\n  className = '',\n  slot,\n}: DisclosureArrowProps) {\n  const direction = open ? openDirection : closedDirection;\n  const rotation = rotationForState(open, openDirection, closedDirection);\n  return (\n    <span\n      class={`kui-disclosure-arrow ${className}`.trim()}\n      style={`--_kui-disclosure-arrow-rotation:${rotation}deg${size ? `;--kui-disclosure-arrow-size:${size}` : ''}`}\n      data-component=\"disclosure-arrow\"\n      data-open={String(open)}\n      data-direction={direction}\n      aria-hidden=\"true\"\n      slot={slot}\n    >\n      {icon ?? <LucideIcon icon={ChevronRight} name=\"chevron-right\" />}\n    </span>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/navigation/disclosure-arrow/disclosure-arrow.tsx"],"names":[],"mappings":";;;;AAqBA,IAAM,kBAAA,GAA0D;AAAA,EAC9D,KAAA,EAAO,CAAA;AAAA,EACP,IAAA,EAAM,EAAA;AAAA,EACN,IAAA,EAAM,GAAA;AAAA,EACN,EAAA,EAAI;AACN,CAAA;AAEA,SAAS,gBAAA,CACP,IAAA,EACA,aAAA,EACA,eAAA,EACA;AACA,EAAA,MAAM,cAAA,GAAiB,mBAAmB,eAAe,CAAA;AACzD,EAAA,IAAI,CAAC,MAAM,OAAO,cAAA;AAElB,EAAA,MAAM,YAAA,GAAe,mBAAmB,aAAa,CAAA;AACrD,EAAA,MAAM,aAAA,GAAA,CAAkB,YAAA,GAAe,cAAA,GAAiB,GAAA,IAAO,GAAA,GAAO,GAAA;AACtE,EAAA,OAAO,cAAA,GAAiB,aAAA;AAC1B;AAEO,SAAS,eAAA,CAAgB;AAAA,EAC9B,IAAA;AAAA,EACA,aAAA,GAAgB,MAAA;AAAA,EAChB,eAAA,GAAkB,OAAA;AAAA,EAClB,IAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAyB;AACvB,EAAA,MAAM,SAAA,GAAY,OAAO,aAAA,GAAgB,eAAA;AACzC,EAAA,MAAM,QAAA,GAAW,gBAAA,CAAiB,IAAA,EAAM,aAAA,EAAe,eAAe,CAAA;AACtE,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,qBAAA,EAAwB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAChD,KAAA,EAAO,oCAAoC,QAAQ,CAAA,GAAA,EAAM,OAAO,CAAA,6BAAA,EAAgC,IAAI,KAAK,EAAE,CAAA,CAAA;AAAA,MAC3G,gBAAA,EAAe,kBAAA;AAAA,MACf,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,gBAAA,EAAgB,SAAA;AAAA,MAChB,aAAA,EAAY,MAAA;AAAA,MACZ,IAAA;AAAA,MAEC,kCAAQ,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAM,YAAA,EAAc,MAAK,eAAA,EAAgB;AAAA;AAAA,GAChE;AAEJ","file":"chunk-3VXDSIBJ.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport { ChevronRight } from 'lucide';\n\nimport type { CssLength } from '../../../shared/styles/css-values.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\n\nexport type DisclosureDirection = 'up' | 'down' | 'left' | 'right';\n\nexport interface DisclosureArrowProps {\n  open: boolean;\n  openDirection?: DisclosureDirection;\n  closedDirection?: DisclosureDirection;\n  /** Replacement icons should use right as their unrotated orientation. */\n  icon?: SafeHtml;\n  /** Typed box size for the square visual. Default: `remify(18px)`. */\n  size?: CssLength;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nconst directionRotations: Record<DisclosureDirection, number> = {\n  right: 0,\n  down: 90,\n  left: 180,\n  up: 270,\n};\n\nfunction rotationForState(\n  open: boolean,\n  openDirection: DisclosureDirection,\n  closedDirection: DisclosureDirection,\n) {\n  const closedRotation = directionRotations[closedDirection];\n  if (!open) return closedRotation;\n\n  const openRotation = directionRotations[openDirection];\n  const shortestDelta = ((openRotation - closedRotation + 540) % 360) - 180;\n  return closedRotation + shortestDelta;\n}\n\nexport function DisclosureArrow({\n  open,\n  openDirection = 'down',\n  closedDirection = 'right',\n  icon,\n  size,\n  className = '',\n  slot,\n}: DisclosureArrowProps) {\n  const direction = open ? openDirection : closedDirection;\n  const rotation = rotationForState(open, openDirection, closedDirection);\n  return (\n    <span\n      class={`kui-disclosure-arrow ${className}`.trim()}\n      style={`--_kui-disclosure-arrow-rotation:${rotation}deg${size ? `;--kui-disclosure-arrow-size:${size}` : ''}`}\n      data-component=\"disclosure-arrow\"\n      data-open={String(open)}\n      data-direction={direction}\n      aria-hidden=\"true\"\n      slot={slot}\n    >\n      {icon ?? <LucideIcon icon={ChevronRight} name=\"chevron-right\" />}\n    </span>\n  );\n}\n"]}

package/dist/chunk-3WYREXW4.js

@@ -0,0 +1,120 @@
+import { popover } from 'kerfjs/overlay';
+
+// src/components/feedback/anchored-surface/anchored-surface.tsx
+function usedColorScheme(element) {
+  const keywords = window.getComputedStyle(element).colorScheme.split(/\s+/);
+  const light = keywords.includes("light");
+  const dark = keywords.includes("dark");
+  if (light && dark)
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  return dark ? "dark" : "light";
+}
+function inverseScheme(element) {
+  return usedColorScheme(element) === "dark" ? "light" : "dark";
+}
+function composedParent(node) {
+  const root = node.getRootNode();
+  return node.parentElement ?? (root instanceof ShadowRoot ? root.host : null);
+}
+function followScheme(surface, source, initial, closed) {
+  let current = initial;
+  const sync = () => {
+    if (!source.isConnected) return;
+    const next = inverseScheme(source);
+    if (next === current) return;
+    surface.classList.replace(
+      `kui-anchored-surface--scheme-${current}`,
+      `kui-anchored-surface--scheme-${next}`
+    );
+    current = next;
+  };
+  const media = window.matchMedia("(prefers-color-scheme: dark)");
+  media.addEventListener?.("change", sync);
+  const observer = new MutationObserver(sync);
+  for (let node = source; node; node = composedParent(node))
+    observer.observe(node, { attributes: true });
+  void closed.then(() => {
+    media.removeEventListener?.("change", sync);
+    observer.disconnect();
+  });
+}
+function modalScope(context) {
+  let child;
+  for (let node = context ?? null; node !== null; ) {
+    if (node.localName === "dialog") return node;
+    if (child?.assignedSlot?.closest("dialog")) return node;
+    child = node;
+    const root = node.getRootNode();
+    node = node.parentElement ?? (root instanceof ShadowRoot ? root.host : null);
+  }
+  return document.body;
+}
+function openAnchoredSurface(anchor, content, options) {
+  return openWithSchemeSource(anchor, content, options, anchor);
+}
+function openWithSchemeSource(anchor, content, options, schemeSource) {
+  const {
+    label,
+    initialFocus = true,
+    dismiss = ["escape", "outside"],
+    viewportMargin = 8,
+    tone = "default",
+    ...rest
+  } = options;
+  if (!label.trim())
+    throw new TypeError("openAnchoredSurface() requires a nonempty label");
+  if (anchor instanceof HTMLElement && anchor.tabIndex >= 0) anchor.focus();
+  const scheme = tone === "dark" ? inverseScheme(schemeSource) : void 0;
+  const handle = popover(anchor, content, {
+    ...rest,
+    className: `kui-anchored-surface${scheme ? ` kui-anchored-surface--scheme-${scheme}` : ""}`,
+    native: true,
+    initialFocus,
+    dismiss,
+    viewportMargin,
+    // The surface scrolls: fit it to the room beside the anchor, on the
+    // roomier side when neither fits, refreshed on every reposition.
+    fitHeight: true
+  });
+  handle.el.setAttribute("role", "dialog");
+  handle.el.setAttribute("aria-label", label);
+  handle.el.dataset.component = "anchored-surface";
+  if (scheme) {
+    handle.el.dataset.tone = "dark";
+    followScheme(handle.el, schemeSource, scheme, handle.result);
+  }
+  const dialog = anchor.closest("dialog");
+  if (dialog?.open) {
+    const onClose = () => handle.close();
+    dialog.addEventListener("close", onClose);
+    void handle.result.then(() => dialog.removeEventListener("close", onClose));
+  }
+  return handle;
+}
+function openAnchoredSurfaceAt(point, content, options) {
+  const { x, y, context } = point;
+  if (!Number.isFinite(x) || !Number.isFinite(y))
+    throw new TypeError("openAnchoredSurfaceAt() requires finite coordinates");
+  const anchor = document.createElement("span");
+  anchor.setAttribute("aria-hidden", "true");
+  anchor.style.cssText = "position:fixed;width:0;height:0;pointer-events:none;visibility:hidden";
+  anchor.getBoundingClientRect = () => new DOMRect(x, y, 0, 0);
+  modalScope(context).append(anchor);
+  try {
+    const handle = openWithSchemeSource(
+      anchor,
+      content,
+      options,
+      context?.isConnected ? context : anchor
+    );
+    void handle.result.then(() => anchor.remove());
+    return handle;
+  } catch (error) {
+    anchor.remove();
+    throw error;
+  }
+}
+
+export { openAnchoredSurface, openAnchoredSurfaceAt };
+
+//# sourceMappingURL=chunk-3WYREXW4.js.map

package/dist/chunk-3WYREXW4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/anchored-surface/anchored-surface.tsx"],"names":[],"mappings":"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","file":"chunk-3WYREXW4.js","sourcesContent":["import type { OverlayContent, OverlayHandle } from 'kerfjs/overlay';\nimport { popover, type PopoverOptions } from 'kerfjs/overlay';\n\n/** App-facing options for a non-modal, arbitrary-content help surface. */\nexport interface AnchoredSurfaceOptions extends Pick<\n  PopoverOptions,\n  | 'placement'\n  | 'align'\n  | 'gap'\n  | 'dismiss'\n  | 'initialFocus'\n  | 'onDismiss'\n  | 'outsideIgnore'\n  | 'container'\n> {\n  /** Accessible name for the non-modal dialog. */\n  label: string;\n  /**\n   * Gutter in px kept between the surface and the viewport edges when it is\n   * clamped horizontally and fitted vertically. Default `8`, the same gutter as\n   * the surface's maximum size.\n   */\n  viewportMargin?: number;\n  /**\n   * Where to append the surface. Default: inside the anchor's open modal\n   * dialog — a native `<dialog>`'s host slot, or a slot kerf creates in a\n   * `wa-dialog` / `wa-drawer` — so the surface stays interactive there;\n   * otherwise `document.body`. Pass an element only for a modal context kerf\n   * cannot resolve; an element inside an open modal closes the surface with it.\n   */\n  container?: Element;\n  /**\n   * Surface tone. `'default'` follows the anchor's color scheme. `'dark'` is\n   * the loud, inverse tone of a `ToolbarControlGroup` / `ToolbarText`\n   * `tone=\"dark\"`, for a popup anchored to dark media chrome (a volume popup\n   * over a video preview): dark beside a light page and light beside a dark\n   * one, so the popup matches the control group that opened it. The surface\n   * takes the opposite of the anchor's color scheme, so it and every Kerf UI\n   * or Web Awesome component inside it resolve the same semantic\n   * `light-dark()` tokens to the other side: no new colors, no child\n   * overrides. While open it follows a live switch of that scheme (the OS\n   * preference, or an app theme class or attribute on an ancestor). Default\n   * `'default'`.\n   */\n  tone?: AnchoredSurfaceTone;\n}\n\n/** {@link AnchoredSurfaceOptions.tone}: follow the anchor's scheme, or invert it. */\nexport type AnchoredSurfaceTone = 'default' | 'dark';\n\n// The color scheme `light-dark()` resolves to at `element`: an explicit single\n// scheme wins; `light dark` follows the user's preference, like the browser.\nfunction usedColorScheme(element: Element): 'light' | 'dark' {\n  const keywords = window.getComputedStyle(element).colorScheme.split(/\\s+/);\n  const light = keywords.includes('light');\n  const dark = keywords.includes('dark');\n  if (light && dark)\n    return window.matchMedia('(prefers-color-scheme: dark)').matches\n      ? 'dark'\n      : 'light';\n  return dark ? 'dark' : 'light';\n}\n\n/** The dark tone's surface scheme: the opposite of `element`'s used scheme. */\nfunction inverseScheme(element: Element): 'light' | 'dark' {\n  return usedColorScheme(element) === 'dark' ? 'light' : 'dark';\n}\n\n/** The flat-tree parent: the parent element, or a shadow root's host. */\nfunction composedParent(node: Element): Element | null {\n  const root = node.getRootNode();\n  return node.parentElement ?? (root instanceof ShadowRoot ? root.host : null);\n}\n\n/**\n * Keep an open dark-tone surface's scheme class the inverse of `source`'s\n * used scheme while the scheme switches live: the OS preference changes, or\n * an app theme class, attribute, or inline `color-scheme` changes on\n * `source` or one of its ancestors (the only places an inherited\n * `color-scheme` comes from). Stops when `closed` settles.\n */\nfunction followScheme(\n  surface: HTMLElement,\n  source: Element,\n  initial: 'light' | 'dark',\n  closed: Promise<unknown>,\n): void {\n  let current = initial;\n  const sync = () => {\n    if (!source.isConnected) return;\n    const next = inverseScheme(source);\n    if (next === current) return;\n    surface.classList.replace(\n      `kui-anchored-surface--scheme-${current}`,\n      `kui-anchored-surface--scheme-${next}`,\n    );\n    current = next;\n  };\n  const media = window.matchMedia('(prefers-color-scheme: dark)');\n  media.addEventListener?.('change', sync);\n  const observer = new MutationObserver(sync);\n  for (let node: Element | null = source; node; node = composedParent(node))\n    observer.observe(node, { attributes: true });\n  void closed.then(() => {\n    media.removeEventListener?.('change', sync);\n    observer.disconnect();\n  });\n}\n\n/** A viewport pointer location; `context` is the element under the pointer. */\nexport interface AnchoredSurfacePoint {\n  x: number;\n  y: number;\n  /**\n   * Pass the event target when opening from inside a modal dialog, native or\n   * Web Awesome (`wa-dialog`, `wa-drawer`). The dark tone also reads its\n   * color scheme from `context`, so a region with its own `color-scheme` is\n   * honored; without it the scheme is the modal scope's (or the page's).\n   */\n  context?: Element;\n}\n\n// The element a temporary pointer anchor joins so the overlay core resolves\n// the same modal context as `context`: the nearest `<dialog>`, or a shadow host\n// (`wa-dialog`, `wa-drawer`) whose slot renders `context` inside a `<dialog>`\n// in its shadow root. Light-DOM children of that host are slotted inside it.\nfunction modalScope(context: Element | undefined): Element {\n  let child: Element | undefined;\n  for (let node = context ?? null; node !== null;) {\n    if (node.localName === 'dialog') return node;\n    if (child?.assignedSlot?.closest('dialog')) return node;\n    child = node;\n    const root = node.getRootNode();\n    node =\n      node.parentElement ?? (root instanceof ShadowRoot ? root.host : null);\n  }\n  return document.body;\n}\n\n/**\n * Open app-owned content beside an element. The surface owns its Kerf UI chrome;\n * kerfjs/overlay owns positioning, top-layer/modal hosting, focus, and dismissal.\n * The surface stays `viewportMargin` inside the viewport edges and fits its\n * height to the room beside the anchor (the roomier side when neither holds it),\n * scrolling its content; `--kui-anchored-surface-available-height` exposes that\n * room to the content, updated as the page scrolls or resizes.\n * The caller owns content, action policy, and calling `close()` when an action\n * completes. `initialFocus` defaults to the first focusable descendant; set it\n * to `false` for read-only help that should leave focus on its trigger.\n */\nexport function openAnchoredSurface(\n  anchor: Element,\n  content: OverlayContent,\n  options: AnchoredSurfaceOptions,\n): OverlayHandle {\n  return openWithSchemeSource(anchor, content, options, anchor);\n}\n\n/** `openAnchoredSurface`, with the element the dark tone reads its scheme from. */\nfunction openWithSchemeSource(\n  anchor: Element,\n  content: OverlayContent,\n  options: AnchoredSurfaceOptions,\n  schemeSource: Element,\n): OverlayHandle {\n  const {\n    label,\n    initialFocus = true,\n    dismiss = ['escape', 'outside'],\n    viewportMargin = 8,\n    tone = 'default',\n    ...rest\n  } = options;\n  if (!label.trim())\n    throw new TypeError('openAnchoredSurface() requires a nonempty label');\n  // Safari does not focus buttons on pointer press. Make a focusable trigger\n  // the overlay's restore target consistently, including that engine.\n  if (anchor instanceof HTMLElement && anchor.tabIndex >= 0) anchor.focus();\n  // The dark tone's scheme is a class from creation, so the surface's first\n  // style resolution already has it: flipping it after the content mounts\n  // would run the content's own color transitions on open.\n  const scheme = tone === 'dark' ? inverseScheme(schemeSource) : undefined;\n  const handle = popover(anchor, content, {\n    ...rest,\n    className: `kui-anchored-surface${scheme ? ` kui-anchored-surface--scheme-${scheme}` : ''}`,\n    native: true,\n    initialFocus,\n    dismiss,\n    viewportMargin,\n    // The surface scrolls: fit it to the room beside the anchor, on the\n    // roomier side when neither fits, refreshed on every reposition.\n    fitHeight: true,\n  });\n  handle.el.setAttribute('role', 'dialog');\n  handle.el.setAttribute('aria-label', label);\n  handle.el.dataset.component = 'anchored-surface';\n  if (scheme) {\n    handle.el.dataset.tone = 'dark';\n    followScheme(handle.el, schemeSource, scheme, handle.result);\n  }\n  const dialog = anchor.closest('dialog');\n  if (dialog?.open) {\n    const onClose = () => handle.close();\n    dialog.addEventListener('close', onClose);\n    void handle.result.then(() => dialog.removeEventListener('close', onClose));\n  }\n  return handle;\n}\n\n/**\n * Open the same surface at pointer coordinates. The temporary anchor has no\n * layout or hit target. `context` keeps a surface opened inside a modal dialog\n * in that dialog's interactive host slot; it is removed on close or failure.\n */\nexport function openAnchoredSurfaceAt(\n  point: AnchoredSurfacePoint,\n  content: OverlayContent,\n  options: AnchoredSurfaceOptions,\n): OverlayHandle {\n  const { x, y, context } = point;\n  if (!Number.isFinite(x) || !Number.isFinite(y))\n    throw new TypeError('openAnchoredSurfaceAt() requires finite coordinates');\n  const anchor = document.createElement('span');\n  anchor.setAttribute('aria-hidden', 'true');\n  anchor.style.cssText =\n    'position:fixed;width:0;height:0;pointer-events:none;visibility:hidden';\n  // The positioning core reads the anchor's viewport rect. A virtual rect\n  // avoids coordinate conversion when `context` sits in a transformed dialog.\n  anchor.getBoundingClientRect = () => new DOMRect(x, y, 0, 0);\n  // Only modal membership matters for host selection. Keep the temporary node\n  // out of the event target itself (which may be an input or a custom element).\n  modalScope(context).append(anchor);\n  try {\n    const handle = openWithSchemeSource(\n      anchor,\n      content,\n      options,\n      context?.isConnected ? context : anchor,\n    );\n    void handle.result.then(() => anchor.remove());\n    return handle;\n  } catch (error) {\n    anchor.remove();\n    throw error;\n  }\n}\n"]}