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

package/dist/chip.d.ts

@@ -3,10 +3,16 @@ import { S as SemanticTone } from './semantic-tone-CdW013KF.js';
 import { BadgeAppearance, BadgeShape, BadgeSize } from './badge.js';
 import './css-values.js';
 
+/**
+ * A chip color role: a shared semantic tone, or `inherit`, which follows the
+ * surrounding foreground (a chip inside a `brand-loud` ContentItem bubble)
+ * and derives its fill, border, and focus ring from `currentColor`.
+ */
+type ChipTone = SemanticTone | 'inherit';
 interface ChipCommonProps {
     /** Decorative leading icon, normally an unsized LucideIcon. */
     icon?: SafeHtml;
-    tone?: SemanticTone;
+    tone?: ChipTone;
     appearance?: BadgeAppearance;
     shape?: BadgeShape;
     size?: BadgeSize;
@@ -17,21 +23,47 @@ interface ChipCommonProps {
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
-/** A removable chip needs both a delegated action and a specific accessible name. */
-type ChipProps = ChipCommonProps & ({
+type ChipLabelProps = {
     children: SafeHtml | string | number;
     truncate?: false;
 } | {
     children: string;
     truncate: true;
-}) & ({
+};
+interface ChipNoLinkProps {
+    href?: never;
+    download?: never;
+    external?: never;
+}
+/**
+ * A link chip renders a native `<a>` with Chip geometry. It cannot also carry
+ * a remove button, because a button inside a link is invalid.
+ */
+interface ChipLinkProps {
+    /** Native destination; the chip renders as an `<a>`. */
+    href: string;
+    /** Download the destination: `true`, or the suggested file name. */
+    download?: string | boolean;
+    /** Open in a new tab with a safe rel and announce that behavior. */
+    external?: boolean;
+    removeAction?: never;
+    removeLabel?: never;
+}
+/**
+ * A plain chip, a removable chip (a delegated action plus a specific
+ * accessible name), or a link chip (`href`, optional `download`/`external`).
+ */
+type ChipProps = ChipCommonProps & ChipLabelProps & (({
     removeAction: string;
     removeLabel: string;
-} | {
+} & ChipNoLinkProps) | ({
     removeAction?: never;
     removeLabel?: never;
-});
-/** A short label with an optional native remove button. The application owns removal. */
-declare function Chip({ children, icon, truncate, tone, appearance, shape, size, disabled, itemId, className, slot, ...remove }: ChipProps): SafeHtml;
+} & ChipNoLinkProps) | ChipLinkProps);
+/**
+ * A short label with an optional native remove button, or a native link when
+ * `href` is set. The application owns removal and the link destination.
+ */
+declare function Chip({ children, icon, truncate, tone, appearance, shape, size, disabled, itemId, className, slot, href, download, external, removeAction, removeLabel, }: ChipProps): SafeHtml;
 
-export { Chip, type ChipProps };
+export { Chip, type ChipProps, type ChipTone };

package/dist/chip.js

@@ -1,3 +1,3 @@
-export { Chip } from './chunk-DQDTZE4W.js';
+export { Chip } from './chunk-34U4ANDJ.js';
 
 //# sourceMappingURL=chip.js.map

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":";;;AAgEA,SAAS,YAAA,CAAa,MAAA,EAAgB,KAAA,EAAe,QAAA,EAAmB;AACtE,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,kBAAA;AAAA,MACN,IAAA,EAAK,QAAA;AAAA,MACL,aAAA,EAAa,MAAA;AAAA,MACb,YAAA,EAAY,KAAA;AAAA,MACZ,QAAA;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,SAAI,OAAA,EAAQ,WAAA,EAAY,OAAM,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,aAAA,EAAY,MAAA,EAC1D,QAAA,kBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,CAAA,EAAE,sCAAA;AAAA,UACF,IAAA,EAAK,MAAA;AAAA,UACL,MAAA,EAAO,cAAA;AAAA,UACP,cAAA,EAAa,MAAA;AAAA,UACb,gBAAA,EAAe;AAAA;AAAA,OACjB,EACF;AAAA;AAAA,GACF;AAEJ;AAEA,SAAS,cAAc,QAAA,EAAwC;AAC7D,EAAA,QAAQ,QAAA;AAAU,IAChB,KAAK,MAAA;AAAA,IACL,KAAK,KAAA;AACH,MAAA,OAAO,MAAA;AAAA,IACT,KAAK,IAAA;AACH,MAAA,OAAO,EAAA;AAAA,IACT;AACE,MAAA,OAAO,QAAA;AAAA;AAEb;AAMO,SAAS,IAAA,CAAK;AAAA,EACnB,QAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,IAAA,GAAO,SAAA;AAAA,EACP,UAAA,GAAa,OAAA;AAAA,EACb,KAAA,GAAQ,MAAA;AAAA,EACR,IAAA,GAAO,SAAA;AAAA,EACP,QAAA,GAAW,KAAA;AAAA,EACX,MAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,IAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,YAAA;AAAA,EACA;AACF,CAAA,EAAc;AACZ,EAAA,IAAI,QAAA,IAAY,OAAO,QAAA,KAAa,QAAA;AAClC,IAAA,MAAM,IAAI,UAAU,2CAA2C,CAAA;AACjE,EAAA,MAAM,0BACJ,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,IAAA,KAAS,MAAA,GAAY,uBACpB,GAAA,CAAC,MAAA,EAAA,EAAK,OAAM,gBAAA,EAAiB,aAAA,EAAY,QACtC,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,oBAEF,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAM,iBAAA;AAAA,QACN,KAAA,EAAO,QAAA,GAAW,MAAA,CAAO,QAAQ,CAAA,GAAI,MAAA;AAAA,QAEpC;AAAA;AAAA;AACH,GAAA,EACF,CAAA;AAEF,EAAA,MAAM,SAAA,GAAY,CAAA,SAAA,EAAY,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAC/C,EAAA,IAAI,SAAS,MAAA,EAAW;AACtB,IAAA,MAAM,SAAA,GACJ,OAAO,QAAA,KAAa,QAAA,IAAY,OAAO,QAAA,KAAa,QAAA,GAChD,MAAA,CAAO,QAAQ,CAAA,GACf,MAAA;AACN,IAAA,uBACE,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,SAAA;AAAA,QACP,IAAA,EAAM,WAAW,MAAA,GAAY,IAAA;AAAA,QAC7B,QAAA,EAAU,QAAA,GAAW,MAAA,GAAY,aAAA,CAAc,QAAQ,CAAA;AAAA,QACvD,MAAA,EAAQ,QAAA,IAAY,CAAC,QAAA,GAAW,MAAA,GAAY,QAAA;AAAA,QAC5C,GAAA,EAAK,QAAA,IAAY,CAAC,QAAA,GAAW,MAAA,GAAY,qBAAA;AAAA,QACzC,QAAA,EAAU,WAAW,EAAA,GAAK,MAAA;AAAA,QAC1B,cACE,QAAA,IAAY,SAAA,KAAc,MAAA,GACtB,CAAA,EAAG,SAAS,CAAA,mBAAA,CAAA,GACZ,MAAA;AAAA,QAEN,eAAA,EAAe,WAAW,MAAA,GAAS,MAAA;AAAA,QACnC,gBAAA,EAAe,MAAA;AAAA,QACf,WAAA,EAAU,EAAA;AAAA,QACV,WAAA,EAAW,IAAA;AAAA,QACX,iBAAA,EAAiB,UAAA;AAAA,QACjB,YAAA,EAAY,KAAA;AAAA,QACZ,WAAA,EAAW,IAAA;AAAA,QACX,eAAA,EAAe,WAAW,EAAA,GAAK,MAAA;AAAA,QAC/B,eAAA,EAAe,WAAW,EAAA,GAAK,MAAA;AAAA,QAC/B,cAAA,EAAc,MAAA;AAAA,QACd,IAAA;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACA,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,SAAA;AAAA,MACP,gBAAA,EAAe,MAAA;AAAA,MACf,WAAA,EAAW,IAAA;AAAA,MACX,iBAAA,EAAiB,UAAA;AAAA,MACjB,YAAA,EAAY,KAAA;AAAA,MACZ,WAAA,EAAW,IAAA;AAAA,MACX,eAAA,EAAe,WAAW,EAAA,GAAK,MAAA;AAAA,MAC/B,eAAA,EAAe,WAAW,EAAA,GAAK,MAAA;AAAA,MAC/B,cAAA,EAAc,MAAA;AAAA,MACd,IAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,OAAA;AAAA,QACA,YAAA,KAAiB,UAAa,WAAA,KAAgB,MAAA,GAC3C,aAAa,YAAA,EAAc,WAAA,EAAa,QAAQ,CAAA,GAChD;AAAA;AAAA;AAAA,GACN;AAEJ","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