@kerfjs/ui 5.0.0-beta.17 → 5.0.0-beta.18

package/dist/chunk-43FUQH35.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/nav-stack.tsx"],"names":[],"mappings":"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","file":"chunk-43FUQH35.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { ToolbarText } from './toolbar-text.js';\n\n/**\n * One entry in a {@link NavStack}. The app owns the stack as an array (usually a\n * signal); `NavStack` renders it and `wireNavStack` animates the transitions.\n */\nexport interface NavStackView {\n  /** Stable identity for keyed reconcile and transition direction. */\n  key: string;\n  content: SafeHtml;\n  /** Title shown in the top toolbar for this view. */\n  title?: string;\n  /** Trailing actions for this view's top toolbar. */\n  toolbar?: SafeHtml;\n}\n\nexport interface NavStackProps {\n  id: string;\n  /** Accessible name for the stack region. */\n  label: string;\n  /** The stack, root first; the last entry is the active top view. */\n  views: NavStackView[];\n  /** Accessible label for the back control (default \"Back\"). */\n  backLabel?: string;\n  /** Hide the top toolbar entirely (rare — a fully custom-chrome view). */\n  hideToolbar?: boolean;\n  /** Optional persistent bottom toolbar. */\n  bottomToolbar?: SafeHtml;\n  className?: string;\n}\n\n/**\n * A navigation stack (iOS-style push/pop). Renders every entry stacked, the last\n * one active; `@kerfjs/ui/wire-nav-stack`'s `wireNavStack` slides the content and\n * cross-fades the chrome across a change. A single-pane layout is a `NavStack`\n * with one entry. See `docs/23-app-layouts.md` §3.1.\n */\nexport function NavStack({\n  id,\n  label,\n  views,\n  backLabel = 'Back',\n  hideToolbar = false,\n  bottomToolbar,\n  className = '',\n}: NavStackProps) {\n  const topIndex = views.length - 1;\n  const top = views[topIndex];\n  const canPop = views.length > 1;\n  return (\n    <section\n      class={`kui-nav-stack ${className}`.trim()}\n      id={id}\n      data-component=\"nav-stack\"\n      data-nav-stack-id={id}\n      data-depth={String(views.length)}\n      aria-label={label}\n    >\n      {!hideToolbar && (\n        <header class=\"kui-nav-stack__chrome\" data-nav-stack-chrome>\n          <div class=\"kui-nav-stack__lead\">\n            {canPop && (\n              <button\n                type=\"button\"\n                class=\"kui-nav-stack__back\"\n                data-nav-back\n                aria-label={backLabel}\n              >\n                <svg\n                  class=\"kui-nav-stack__back-icon\"\n                  viewBox=\"0 0 24 24\"\n                  width=\"18\"\n                  height=\"18\"\n                  aria-hidden=\"true\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                >\n                  <path d=\"m15 18-6-6 6-6\" />\n                </svg>\n              </button>\n            )}\n            <ToolbarText\n              text={top?.title ?? ''}\n              size=\"large\"\n              className=\"kui-nav-stack__title\"\n            />\n          </div>\n          {top?.toolbar && (\n            <div class=\"kui-nav-stack__actions\">{top.toolbar}</div>\n          )}\n        </header>\n      )}\n      <div class=\"kui-nav-stack__viewport\" data-nav-stack-viewport>\n        {views.map((view, index) => (\n          <article\n            class=\"kui-nav-stack__view\"\n            data-key={view.key}\n            data-nav-key={view.key}\n            data-nav-active={String(index === topIndex)}\n            aria-hidden={String(index !== topIndex)}\n          >\n            {view.content}\n          </article>\n        ))}\n      </div>\n      {bottomToolbar && (\n        <footer class=\"kui-nav-stack__bottom\" data-nav-stack-bottom>\n          {bottomToolbar}\n        </footer>\n      )}\n    </section>\n  );\n}\n"]}

package/dist/{chunk-YGN7OMLT.js → chunk-4TRDV6RL.js}

@@ -1,4 +1,4 @@
-import { Skeleton } from './chunk-B24C4A6T.js';
+import { Skeleton } from './chunk-PZQVSDLH.js';
 import { jsx } from 'kerfjs/jsx-runtime';
 
 function SegmentedControl({
@@ -54,4 +54,4 @@ function SegmentedControl({
 
 export { SegmentedControl };
 
-//# sourceMappingURL=chunk-YGN7OMLT.js.map
+//# sourceMappingURL=chunk-4TRDV6RL.js.map

package/dist/chunk-4TRDV6RL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/segmented-control.tsx"],"names":[],"mappings":";;;AAgCO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,EAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA,GAAS,gBAAA;AAAA,EACT,UAAA,GAAa,QAAA;AAAA,EACb,KAAA,GAAQ,SAAA;AAAA,EACR,IAAA,GAAO,SAAA;AAAA,EACP,MAAA,GAAS,SAAA;AAAA,EACT,SAAA,GAAY,EAAA;AAAA,EACZ,WAAA,GAAc;AAChB,CAAA,EAA0B;AACxB,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,sBAAA,EAAyB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACjD,gBAAA,EAAe,mBAAA;AAAA,MACf,2BAAA,EAA2B,EAAA;AAAA,MAC3B,YAAA,EAAY,KAAA;AAAA,MACZ,iBAAA,EAAiB,UAAA;AAAA,MACjB,YAAA,EAAY,KAAA;AAAA,MACZ,WAAA,EAAW,IAAA;AAAA,MACX,aAAA,EAAa,MAAA;AAAA,MACb,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,IAAA,EAAK,OAAA;AAAA,MACL,YAAA,EAAY,KAAA;AAAA,MACZ,WAAA,EAAW,cAAc,MAAA,GAAS,MAAA;AAAA,MAEjC,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,MAAA,KAAW;AACvB,QAAA,MAAM,QAAA,GAAW,OAAO,KAAA,KAAU,KAAA;AAClC,QAAA,uBACE,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAM,6BAAA;AAAA,YACN,aAAA,EAAa,cAAc,MAAA,GAAY,MAAA;AAAA,YACvC,sBAAoB,MAAA,CAAO,KAAA;AAAA,YAC3B,eAAA,EAAe,OAAO,QAAQ,CAAA;AAAA,YAC9B,cAAY,MAAA,CAAO,KAAA;AAAA,YACnB,cAAA,EAAc,OAAO,QAAQ,CAAA;AAAA,YAC7B,KAAA,EAAO,WAAA,GAAc,MAAA,GAAY,MAAA,CAAO,KAAA;AAAA,YACxC,QAAA,EAAU,OAAO,QAAA,IAAY,WAAA;AAAA,YAC7B,QAAA,EAAU,cAAc,IAAA,GAAO,GAAA;AAAA,YAE9B,QAAA,EAAA,WAAA,mBACC,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAM,KAAA,EAAM,CAAA,GAErB,MAAA,CAAO,OAAA,oBAAW,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,MAAA,CAAO,KAAA,EAAM;AAAA;AAAA,SAE3C;AAAA,MAEJ,CAAC;AAAA;AAAA,GACH;AAEJ","file":"chunk-4TRDV6RL.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { Skeleton } from './skeleton.js';\n\nexport type SegmentedControlAppearance = 'filled' | 'outlined' | 'toolbar';\nexport type SegmentedControlShape = 'rounded' | 'pill';\nexport type SegmentedControlSize = 'small' | 'default';\nexport type SegmentedControlLayout = 'content' | 'equal';\n\nexport interface SegmentedControlChoice {\n  value: string;\n  label: string;\n  content?: SafeHtml;\n  title?: string;\n  disabled?: boolean;\n}\n\nexport interface SegmentedControlProps {\n  id: string;\n  label: string;\n  value: string;\n  choices: readonly SegmentedControlChoice[];\n  action?: string;\n  appearance?: SegmentedControlAppearance;\n  shape?: SegmentedControlShape;\n  size?: SegmentedControlSize;\n  layout?: SegmentedControlLayout;\n  className?: string;\n  /** Render as an unanimated loading skeleton, disabling every segment. */\n  placeholder?: boolean;\n}\n\nexport function SegmentedControl({\n  id,\n  label,\n  value,\n  choices,\n  action = 'select-segment',\n  appearance = 'filled',\n  shape = 'rounded',\n  size = 'default',\n  layout = 'content',\n  className = '',\n  placeholder = false,\n}: SegmentedControlProps) {\n  return (\n    <div\n      class={`kui-segmented-control ${className}`.trim()}\n      data-component=\"segmented-control\"\n      data-segmented-control-id={id}\n      data-value={value}\n      data-appearance={appearance}\n      data-shape={shape}\n      data-size={size}\n      data-layout={layout}\n      data-placeholder={placeholder ? 'true' : undefined}\n      role=\"group\"\n      aria-label={label}\n      aria-busy={placeholder ? 'true' : undefined}\n    >\n      {choices.map((choice) => {\n        const selected = choice.value === value;\n        return (\n          <button\n            type=\"button\"\n            class=\"kui-segmented-control__item\"\n            data-action={placeholder ? undefined : action}\n            data-segment-value={choice.value}\n            data-selected={String(selected)}\n            aria-label={choice.label}\n            aria-pressed={String(selected)}\n            title={placeholder ? undefined : choice.title}\n            disabled={choice.disabled || placeholder}\n            tabindex={placeholder ? '-1' : '0'}\n          >\n            {placeholder ? (\n              <Skeleton width=\"4em\" />\n            ) : (\n              (choice.content ?? <span>{choice.label}</span>)\n            )}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"]}

package/dist/chunk-6ETZKKAE.js

@@ -0,0 +1,38 @@
+import { Skeleton } from './chunk-PZQVSDLH.js';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+function StateBanner({
+  title,
+  detail,
+  icon,
+  action,
+  tone = "info",
+  urgency = "status",
+  className = "",
+  placeholder = false
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      class: `kui-state-banner ${className}`.trim(),
+      "data-component": "state-banner",
+      "data-tone": tone,
+      "data-placeholder": placeholder ? "true" : void 0,
+      role: urgency,
+      "aria-live": urgency === "alert" ? "assertive" : "polite",
+      "aria-busy": placeholder ? "true" : void 0,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { class: "kui-state-banner__icon", children: icon }),
+        /* @__PURE__ */ jsxs("div", { class: "kui-state-banner__copy", children: [
+          /* @__PURE__ */ jsx("strong", { children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "10em" }) : title }),
+          (placeholder || detail) && /* @__PURE__ */ jsx("span", { children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "16em" }) : detail })
+        ] }),
+        action && /* @__PURE__ */ jsx("div", { class: "kui-state-banner__action", children: action })
+      ]
+    }
+  );
+}
+
+export { StateBanner };
+
+//# sourceMappingURL=chunk-6ETZKKAE.js.map

package/dist/chunk-6ETZKKAE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/state-banner.tsx"],"names":[],"mappings":";;;AAmBO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA,GAAO,MAAA;AAAA,EACP,OAAA,GAAU,QAAA;AAAA,EACV,SAAA,GAAY,EAAA;AAAA,EACZ,WAAA,GAAc;AAChB,CAAA,EAAqB;AACnB,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC5C,gBAAA,EAAe,cAAA;AAAA,MACf,WAAA,EAAW,IAAA;AAAA,MACX,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,IAAA,EAAM,OAAA;AAAA,MACN,WAAA,EAAW,OAAA,KAAY,OAAA,GAAU,WAAA,GAAc,QAAA;AAAA,MAC/C,WAAA,EAAW,cAAc,MAAA,GAAS,MAAA;AAAA,MAEjC,QAAA,EAAA;AAAA,QAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,wBACpD,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,wBAAA,EACT,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,YAAQ,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,YAAS,KAAA,EAAM,MAAA,EAAO,IAAK,KAAA,EAAM,CAAA;AAAA,UAAA,CACvD,WAAA,IAAe,MAAA,qBACf,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,WAAA,uBAAe,QAAA,EAAA,EAAS,KAAA,EAAM,MAAA,EAAO,CAAA,GAAK,MAAA,EAAO;AAAA,SAAA,EAE5D,CAAA;AAAA,QACC,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,4BAA4B,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,GAC3D;AAEJ","file":"chunk-6ETZKKAE.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { Skeleton } from './skeleton.js';\n\nexport type StateBannerTone =\n  'neutral' | 'info' | 'success' | 'warning' | 'danger';\n\nexport interface StateBannerProps {\n  title: string;\n  detail?: string;\n  icon?: SafeHtml;\n  action?: SafeHtml;\n  tone?: StateBannerTone;\n  urgency?: 'status' | 'alert';\n  className?: string;\n  /** Render the title and detail as unanimated loading skeletons, keeping the icon and tone. */\n  placeholder?: boolean;\n}\n\nexport function StateBanner({\n  title,\n  detail,\n  icon,\n  action,\n  tone = 'info',\n  urgency = 'status',\n  className = '',\n  placeholder = false,\n}: StateBannerProps) {\n  return (\n    <section\n      class={`kui-state-banner ${className}`.trim()}\n      data-component=\"state-banner\"\n      data-tone={tone}\n      data-placeholder={placeholder ? 'true' : undefined}\n      role={urgency}\n      aria-live={urgency === 'alert' ? 'assertive' : 'polite'}\n      aria-busy={placeholder ? 'true' : undefined}\n    >\n      {icon && <span class=\"kui-state-banner__icon\">{icon}</span>}\n      <div class=\"kui-state-banner__copy\">\n        <strong>{placeholder ? <Skeleton width=\"10em\" /> : title}</strong>\n        {(placeholder || detail) && (\n          <span>{placeholder ? <Skeleton width=\"16em\" /> : detail}</span>\n        )}\n      </div>\n      {action && <div class=\"kui-state-banner__action\">{action}</div>}\n    </section>\n  );\n}\n"]}

package/dist/chunk-6WTETUZ6.js

@@ -0,0 +1,21 @@
+import { jsx } from 'kerfjs/jsx-runtime';
+
+// src/loading-spinner.tsx
+function LoadingSpinner({ className = "", label }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      class: `kui-loading-spinner ${className}`.trim(),
+      "data-component": "loading-spinner",
+      viewBox: "0 0 24 24",
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z" })
+    }
+  );
+}
+
+export { LoadingSpinner };
+
+//# sourceMappingURL=chunk-6WTETUZ6.js.map

package/dist/chunk-6WTETUZ6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/loading-spinner.tsx"],"names":[],"mappings":";;;AAMO,SAAS,cAAA,CAAe,EAAE,SAAA,GAAY,EAAA,EAAI,OAAM,EAAwB;AAC7E,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,oBAAA,EAAuB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC/C,gBAAA,EAAe,iBAAA;AAAA,MACf,OAAA,EAAQ,WAAA;AAAA,MACR,IAAA,EAAM,QAAQ,KAAA,GAAQ,MAAA;AAAA,MACtB,YAAA,EAAY,KAAA;AAAA,MACZ,aAAA,EAAa,QAAQ,MAAA,GAAY,MAAA;AAAA,MAEjC,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,kKAAA,EAAmK;AAAA;AAAA,GAC7K;AAEJ","file":"chunk-6WTETUZ6.js","sourcesContent":["export interface LoadingSpinnerProps {\n  className?: string;\n  label?: string;\n}\n\n/** Stable viewBox-centered progress ring based on svg-spinners' MIT-licensed 180-ring. */\nexport function LoadingSpinner({ className = '', label }: LoadingSpinnerProps) {\n  return (\n    <svg\n      class={`kui-loading-spinner ${className}`.trim()}\n      data-component=\"loading-spinner\"\n      viewBox=\"0 0 24 24\"\n      role={label ? 'img' : undefined}\n      aria-label={label}\n      aria-hidden={label ? undefined : 'true'}\n    >\n      <path d=\"M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z\"></path>\n    </svg>\n  );\n}\n"]}

package/dist/chunk-7L6EHUMV.js

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+// src/toolbar.tsx
+function Toolbar({
+  leading,
+  center,
+  trailing,
+  label,
+  divider = true,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      class: `kui-toolbar ${className}`.trim(),
+      "data-component": "toolbar",
+      "data-divider": String(divider),
+      "data-has-center": String(Boolean(center)),
+      "aria-label": label,
+      children: [
+        /* @__PURE__ */ jsx("div", { class: "kui-toolbar__leading", children: leading }),
+        /* @__PURE__ */ jsx("div", { class: "kui-toolbar__center", children: center }),
+        /* @__PURE__ */ jsx("div", { class: "kui-toolbar__trailing", children: trailing })
+      ]
+    }
+  );
+}
+
+export { Toolbar };
+
+//# sourceMappingURL=chunk-7L6EHUMV.js.map

package/dist/chunk-7L6EHUMV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/toolbar.tsx"],"names":[],"mappings":";;;AAWO,SAAS,OAAA,CAAQ;AAAA,EACtB,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA,GAAU,IAAA;AAAA,EACV,SAAA,GAAY;AACd,CAAA,EAAiB;AACf,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,YAAA,EAAe,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACvC,gBAAA,EAAe,SAAA;AAAA,MACf,cAAA,EAAc,OAAO,OAAO,CAAA;AAAA,MAC5B,iBAAA,EAAiB,MAAA,CAAO,OAAA,CAAQ,MAAM,CAAC,CAAA;AAAA,MACvC,YAAA,EAAY,KAAA;AAAA,MAEZ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,sBAAA,EAAwB,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,wBAC3C,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,qBAAA,EAAuB,QAAA,EAAA,MAAA,EAAO,CAAA;AAAA,wBACzC,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,uBAAA,EAAyB,QAAA,EAAA,QAAA,EAAS;AAAA;AAAA;AAAA,GAC/C;AAEJ","file":"chunk-7L6EHUMV.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport interface ToolbarProps {\n  leading?: SafeHtml;\n  center?: SafeHtml;\n  trailing?: SafeHtml;\n  label?: string;\n  divider?: boolean;\n  className?: string;\n}\n\nexport function Toolbar({\n  leading,\n  center,\n  trailing,\n  label,\n  divider = true,\n  className = '',\n}: ToolbarProps) {\n  return (\n    <header\n      class={`kui-toolbar ${className}`.trim()}\n      data-component=\"toolbar\"\n      data-divider={String(divider)}\n      data-has-center={String(Boolean(center))}\n      aria-label={label}\n    >\n      <div class=\"kui-toolbar__leading\">{leading}</div>\n      <div class=\"kui-toolbar__center\">{center}</div>\n      <div class=\"kui-toolbar__trailing\">{trailing}</div>\n    </header>\n  );\n}\n"]}

package/dist/chunk-BBRXX6PF.js

@@ -0,0 +1,108 @@
+import { filterDataAttributes, filterControlAttributes } from './chunk-SRSJO5QE.js';
+import { Skeleton } from './chunk-PZQVSDLH.js';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-action",
+  "data-item-id",
+  "data-has-icon",
+  "data-multiline",
+  "data-state",
+  "data-selected",
+  "data-pressed"
+]);
+var PROTECTED_TRAILING_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-action",
+  "data-item-id"
+]);
+function ListActionRow({
+  label,
+  icon,
+  action,
+  itemId,
+  selected = false,
+  pressed,
+  accessibleLabel,
+  title,
+  multiline = false,
+  state,
+  disabled = false,
+  tabIndex,
+  placeholder = false,
+  trailingAction,
+  trailingActionLabel,
+  trailingActionIcon,
+  trailingActionDisabled = false,
+  trailingActionTitle,
+  className = "",
+  style,
+  rootAttributes = {},
+  trailingActionAttributes = {}
+}) {
+  const extensionRootAttributes = filterDataAttributes(
+    rootAttributes,
+    PROTECTED_ROOT_DATA_ATTRIBUTES
+  );
+  const extensionTrailingAttributes = filterControlAttributes(
+    trailingActionAttributes,
+    PROTECTED_TRAILING_DATA_ATTRIBUTES
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...extensionRootAttributes,
+      class: `kui-list-action-row ${className}`.trim(),
+      style,
+      "data-component": "list-action-row",
+      "data-item-id": itemId,
+      "data-has-icon": String(Boolean(icon)),
+      "data-multiline": multiline ? "true" : void 0,
+      "data-state": state,
+      "data-selected": String(selected),
+      "data-pressed": pressed === void 0 ? void 0 : String(pressed),
+      "data-placeholder": placeholder ? "true" : void 0,
+      "aria-busy": placeholder ? "true" : void 0,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            class: "kui-list-action-row__primary",
+            title: placeholder ? void 0 : title,
+            disabled: disabled || placeholder,
+            tabindex: placeholder ? -1 : tabIndex,
+            "data-action": placeholder ? void 0 : action,
+            "data-item-id": itemId,
+            "aria-label": accessibleLabel,
+            "aria-current": selected ? "page" : void 0,
+            "aria-pressed": pressed === void 0 ? void 0 : String(pressed),
+            children: [
+              icon && /* @__PURE__ */ jsx("span", { class: "kui-list-action-row__icon", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "1em", height: "1em" }) : icon }),
+              /* @__PURE__ */ jsx("span", { class: "kui-list-action-row__label", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "9em" }) : label })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            ...extensionTrailingAttributes,
+            type: "button",
+            class: "kui-list-action-row__trailing-action",
+            "data-action": placeholder ? void 0 : trailingAction,
+            "data-item-id": itemId,
+            "aria-label": trailingActionLabel,
+            title: trailingActionTitle ?? trailingActionLabel,
+            disabled: trailingActionDisabled || placeholder || void 0,
+            children: trailingActionIcon
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { ListActionRow };
+
+//# sourceMappingURL=chunk-BBRXX6PF.js.map

package/dist/chunk-BBRXX6PF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/list-action-row.tsx"],"names":[],"mappings":"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","file":"chunk-BBRXX6PF.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport {\n  filterControlAttributes,\n  filterDataAttributes,\n} from './extension-attributes.js';\nimport { Skeleton } from './skeleton.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-multiline',\n  'data-state',\n  'data-selected',\n  'data-pressed',\n]);\nconst PROTECTED_TRAILING_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-item-id',\n]);\n\ntype ListActionRowRootAttributes = 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-multiline'?: never;\n    'data-state'?: never;\n    'data-selected'?: never;\n    'data-pressed'?: never;\n  }\n>;\n\ntype ListActionRowTrailingAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-item-id'?: never;\n    popoverTarget?: string;\n    popoverTargetAction?: 'toggle' | 'show' | 'hide';\n    'aria-controls'?: string;\n    'aria-haspopup'?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | 'true';\n  }\n>;\n\nexport interface ListActionRowProps {\n  /** Visible dormant content for the primary button. Must not contain interactive descendants. */\n  label: string | SafeHtml;\n  /** Decorative dormant content for the primary button. Must not contain interactive descendants. */\n  icon?: SafeHtml;\n  action: string;\n  itemId?: string;\n  selected?: boolean;\n  pressed?: boolean;\n  accessibleLabel?: string;\n  title?: string;\n  multiline?: boolean;\n  state?: string;\n  disabled?: boolean;\n  tabIndex?: number;\n  /** Render as an unanimated loading skeleton, disabling both actions. */\n  placeholder?: boolean;\n  trailingAction: string;\n  trailingActionLabel: string;\n  /** Decorative dormant content for the trailing button. Must not contain interactive descendants. */\n  trailingActionIcon: SafeHtml;\n  trailingActionDisabled?: boolean;\n  trailingActionTitle?: string;\n  className?: string;\n  style?: string;\n  rootAttributes?: ListActionRowRootAttributes;\n  trailingActionAttributes?: ListActionRowTrailingAttributes;\n}\n\nexport function ListActionRow({\n  label,\n  icon,\n  action,\n  itemId,\n  selected = false,\n  pressed,\n  accessibleLabel,\n  title,\n  multiline = false,\n  state,\n  disabled = false,\n  tabIndex,\n  placeholder = false,\n  trailingAction,\n  trailingActionLabel,\n  trailingActionIcon,\n  trailingActionDisabled = false,\n  trailingActionTitle,\n  className = '',\n  style,\n  rootAttributes = {},\n  trailingActionAttributes = {},\n}: ListActionRowProps) {\n  const extensionRootAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  const extensionTrailingAttributes = filterControlAttributes(\n    trailingActionAttributes,\n    PROTECTED_TRAILING_DATA_ATTRIBUTES,\n  );\n\n  return (\n    <div\n      {...extensionRootAttributes}\n      class={`kui-list-action-row ${className}`.trim()}\n      style={style}\n      data-component=\"list-action-row\"\n      data-item-id={itemId}\n      data-has-icon={String(Boolean(icon))}\n      data-multiline={multiline ? 'true' : undefined}\n      data-state={state}\n      data-selected={String(selected)}\n      data-pressed={pressed === undefined ? undefined : String(pressed)}\n      data-placeholder={placeholder ? 'true' : undefined}\n      aria-busy={placeholder ? 'true' : undefined}\n    >\n      <button\n        type=\"button\"\n        class=\"kui-list-action-row__primary\"\n        title={placeholder ? undefined : title}\n        disabled={disabled || placeholder}\n        tabindex={placeholder ? -1 : tabIndex}\n        data-action={placeholder ? undefined : action}\n        data-item-id={itemId}\n        aria-label={accessibleLabel}\n        aria-current={selected ? 'page' : undefined}\n        aria-pressed={pressed === undefined ? undefined : String(pressed)}\n      >\n        {icon && (\n          <span class=\"kui-list-action-row__icon\">\n            {placeholder ? <Skeleton width=\"1em\" height=\"1em\" /> : icon}\n          </span>\n        )}\n        <span class=\"kui-list-action-row__label\">\n          {placeholder ? <Skeleton width=\"9em\" /> : label}\n        </span>\n      </button>\n      <button\n        {...extensionTrailingAttributes}\n        type=\"button\"\n        class=\"kui-list-action-row__trailing-action\"\n        data-action={placeholder ? undefined : trailingAction}\n        data-item-id={itemId}\n        aria-label={trailingActionLabel}\n        title={trailingActionTitle ?? trailingActionLabel}\n        disabled={trailingActionDisabled || placeholder || undefined}\n      >\n        {trailingActionIcon}\n      </button>\n    </div>\n  );\n}\n"]}

package/dist/chunk-DPDBVKNA.js

@@ -0,0 +1,113 @@
+import { resizeRegionFromPointer, clampRegionSize } from './chunk-NENBUYX5.js';
+import { delegate } from 'kerfjs';
+
+function regionState(handle) {
+  const region = handle.closest(
+    '[data-component="resizable-region"]'
+  );
+  if (!(region instanceof HTMLElement) || !(handle instanceof HTMLElement))
+    return void 0;
+  const id = region.dataset.regionId;
+  const axis = region.dataset.axis;
+  const edge = region.dataset.edge;
+  const min = Number(handle.getAttribute("aria-valuemin"));
+  const max = Number(handle.getAttribute("aria-valuemax"));
+  const size = Number(handle.getAttribute("aria-valuenow"));
+  if (!id || axis !== "horizontal" && axis !== "vertical" || edge !== "start" && edge !== "end" || !Number.isFinite(min) || !Number.isFinite(max) || !Number.isFinite(size))
+    return void 0;
+  return { region, handle, id, axis, edge, min, max, size };
+}
+function preview(state, size, onPreview) {
+  const next = clampRegionSize(size, state.min, state.max);
+  state.region.style.setProperty("--kui-resizable-region-size", `${next}px`);
+  state.handle.setAttribute("aria-valuenow", String(next));
+  onPreview?.({ id: state.id, size: next, source: "pointer" });
+  return next;
+}
+function wireResizableRegions(root, {
+  step = 16,
+  largeStep = 64,
+  onPreview,
+  onCommit
+}) {
+  let stopPointer;
+  const stopKeydown = delegate(
+    root,
+    "keydown",
+    "[data-kui-resize-handle]",
+    (event, handle) => {
+      const keyboardEvent = event;
+      const state = regionState(handle);
+      if (!state) return;
+      let next;
+      if (keyboardEvent.key === "Home") next = state.min;
+      if (keyboardEvent.key === "End") next = state.max;
+      const increment = keyboardEvent.shiftKey ? largeStep : step;
+      if (state.axis === "horizontal" && keyboardEvent.key === "ArrowLeft")
+        next = resizeRegionFromPointer(state.size, -increment, state.edge);
+      if (state.axis === "horizontal" && keyboardEvent.key === "ArrowRight")
+        next = resizeRegionFromPointer(state.size, increment, state.edge);
+      if (state.axis === "vertical" && keyboardEvent.key === "ArrowUp")
+        next = resizeRegionFromPointer(state.size, -increment, state.edge);
+      if (state.axis === "vertical" && keyboardEvent.key === "ArrowDown")
+        next = resizeRegionFromPointer(state.size, increment, state.edge);
+      if (next === void 0) return;
+      keyboardEvent.preventDefault();
+      const size = clampRegionSize(next, state.min, state.max);
+      state.region.style.setProperty(
+        "--kui-resizable-region-size",
+        `${size}px`
+      );
+      state.handle.setAttribute("aria-valuenow", String(size));
+      onCommit({ id: state.id, size, source: "keyboard" });
+    }
+  );
+  const stopPointerDown = delegate(
+    root,
+    "pointerdown",
+    "[data-kui-resize-handle]",
+    (event, handle) => {
+      const pointerEvent = event;
+      if (pointerEvent.button !== 0) return;
+      const state = regionState(handle);
+      if (!state) return;
+      pointerEvent.preventDefault();
+      state.handle.setPointerCapture?.(pointerEvent.pointerId);
+      const startCoordinate = state.axis === "horizontal" ? pointerEvent.clientX : pointerEvent.clientY;
+      let next = state.size;
+      const move = (moveEvent) => {
+        const coordinate = state.axis === "horizontal" ? moveEvent.clientX : moveEvent.clientY;
+        next = preview(
+          state,
+          resizeRegionFromPointer(
+            state.size,
+            coordinate - startCoordinate,
+            state.edge
+          ),
+          onPreview
+        );
+      };
+      const finish = () => {
+        root.removeEventListener("pointermove", move);
+        root.removeEventListener("pointerup", finish);
+        root.removeEventListener("pointercancel", finish);
+        stopPointer = void 0;
+        onCommit({ id: state.id, size: next, source: "pointer" });
+      };
+      stopPointer?.();
+      stopPointer = finish;
+      root.addEventListener("pointermove", move);
+      root.addEventListener("pointerup", finish, { once: true });
+      root.addEventListener("pointercancel", finish, { once: true });
+    }
+  );
+  return () => {
+    stopPointer?.();
+    stopKeydown();
+    stopPointerDown();
+  };
+}
+
+export { wireResizableRegions };
+
+//# sourceMappingURL=chunk-DPDBVKNA.js.map

package/dist/chunk-DPDBVKNA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/wire-resizable-regions.ts"],"names":[],"mappings":"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","file":"chunk-DPDBVKNA.js","sourcesContent":["import { delegate } from 'kerfjs';\n\nimport {\n  clampRegionSize,\n  type ResizableRegionAxis,\n  type ResizableRegionEdge,\n  resizeRegionFromPointer,\n} from './resizable-region.js';\n\nexport interface ResizeCommit {\n  id: string;\n  size: number;\n  source: 'keyboard' | 'pointer';\n}\n\nexport interface WireResizableRegionsOptions {\n  step?: number;\n  largeStep?: number;\n  onPreview?: (change: ResizeCommit) => void;\n  onCommit: (change: ResizeCommit) => void;\n}\n\ninterface RegionState {\n  region: HTMLElement;\n  handle: HTMLElement;\n  id: string;\n  axis: ResizableRegionAxis;\n  edge: ResizableRegionEdge;\n  min: number;\n  max: number;\n  size: number;\n}\n\nfunction regionState(handle: Element): RegionState | undefined {\n  const region = handle.closest<HTMLElement>(\n    '[data-component=\"resizable-region\"]',\n  );\n  if (!(region instanceof HTMLElement) || !(handle instanceof HTMLElement))\n    return undefined;\n  const id = region.dataset.regionId;\n  const axis = region.dataset.axis;\n  const edge = region.dataset.edge;\n  const min = Number(handle.getAttribute('aria-valuemin'));\n  const max = Number(handle.getAttribute('aria-valuemax'));\n  const size = Number(handle.getAttribute('aria-valuenow'));\n  if (\n    !id ||\n    (axis !== 'horizontal' && axis !== 'vertical') ||\n    (edge !== 'start' && edge !== 'end') ||\n    !Number.isFinite(min) ||\n    !Number.isFinite(max) ||\n    !Number.isFinite(size)\n  )\n    return undefined;\n  return { region, handle, id, axis, edge, min, max, size };\n}\n\nfunction preview(\n  state: RegionState,\n  size: number,\n  onPreview?: (change: ResizeCommit) => void,\n) {\n  const next = clampRegionSize(size, state.min, state.max);\n  state.region.style.setProperty('--kui-resizable-region-size', `${next}px`);\n  state.handle.setAttribute('aria-valuenow', String(next));\n  onPreview?.({ id: state.id, size: next, source: 'pointer' });\n  return next;\n}\n\n/** Wire pointer and separator-keyboard behavior for every ResizableRegion below root. */\nexport function wireResizableRegions(\n  root: HTMLElement,\n  {\n    step = 16,\n    largeStep = 64,\n    onPreview,\n    onCommit,\n  }: WireResizableRegionsOptions,\n) {\n  let stopPointer: (() => void) | undefined;\n\n  const stopKeydown = delegate(\n    root,\n    'keydown',\n    '[data-kui-resize-handle]',\n    (event, handle) => {\n      const keyboardEvent = event as KeyboardEvent;\n      const state = regionState(handle);\n      if (!state) return;\n      let next: number | undefined;\n      if (keyboardEvent.key === 'Home') next = state.min;\n      if (keyboardEvent.key === 'End') next = state.max;\n      const increment = keyboardEvent.shiftKey ? largeStep : step;\n      if (state.axis === 'horizontal' && keyboardEvent.key === 'ArrowLeft')\n        next = resizeRegionFromPointer(state.size, -increment, state.edge);\n      if (state.axis === 'horizontal' && keyboardEvent.key === 'ArrowRight')\n        next = resizeRegionFromPointer(state.size, increment, state.edge);\n      if (state.axis === 'vertical' && keyboardEvent.key === 'ArrowUp')\n        next = resizeRegionFromPointer(state.size, -increment, state.edge);\n      if (state.axis === 'vertical' && keyboardEvent.key === 'ArrowDown')\n        next = resizeRegionFromPointer(state.size, increment, state.edge);\n      if (next === undefined) return;\n      keyboardEvent.preventDefault();\n      const size = clampRegionSize(next, state.min, state.max);\n      state.region.style.setProperty(\n        '--kui-resizable-region-size',\n        `${size}px`,\n      );\n      state.handle.setAttribute('aria-valuenow', String(size));\n      onCommit({ id: state.id, size, source: 'keyboard' });\n    },\n  );\n\n  const stopPointerDown = delegate(\n    root,\n    'pointerdown',\n    '[data-kui-resize-handle]',\n    (event, handle) => {\n      const pointerEvent = event as PointerEvent;\n      if (pointerEvent.button !== 0) return;\n      const state = regionState(handle);\n      if (!state) return;\n      pointerEvent.preventDefault();\n      state.handle.setPointerCapture?.(pointerEvent.pointerId);\n      const startCoordinate =\n        state.axis === 'horizontal'\n          ? pointerEvent.clientX\n          : pointerEvent.clientY;\n      let next = state.size;\n      const move = (moveEvent: PointerEvent) => {\n        const coordinate =\n          state.axis === 'horizontal' ? moveEvent.clientX : moveEvent.clientY;\n        next = preview(\n          state,\n          resizeRegionFromPointer(\n            state.size,\n            coordinate - startCoordinate,\n            state.edge,\n          ),\n          onPreview,\n        );\n      };\n      const finish = () => {\n        root.removeEventListener('pointermove', move);\n        root.removeEventListener('pointerup', finish);\n        root.removeEventListener('pointercancel', finish);\n        stopPointer = undefined;\n        onCommit({ id: state.id, size: next, source: 'pointer' });\n      };\n      stopPointer?.();\n      stopPointer = finish;\n      root.addEventListener('pointermove', move);\n      root.addEventListener('pointerup', finish, { once: true });\n      root.addEventListener('pointercancel', finish, { once: true });\n    },\n  );\n\n  return () => {\n    stopPointer?.();\n    stopKeydown();\n    stopPointerDown();\n  };\n}\n"]}

package/dist/chunk-ELSJX4W7.js

@@ -0,0 +1,68 @@
+import { filterDataAttributes } from './chunk-SRSJO5QE.js';
+import { Skeleton } from './chunk-PZQVSDLH.js';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-action",
+  "data-item-id",
+  "data-has-icon",
+  "data-multiline",
+  "data-state"
+]);
+function ListItem({
+  label,
+  icon,
+  trailing,
+  selected = false,
+  action,
+  itemId,
+  className = "",
+  style,
+  pressed,
+  accessibleLabel,
+  title,
+  multiline = false,
+  state,
+  disabled = false,
+  tabIndex,
+  placeholder = false,
+  rootAttributes = {}
+}) {
+  const extensionAttributes = filterDataAttributes(
+    rootAttributes,
+    PROTECTED_ROOT_DATA_ATTRIBUTES
+  );
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...extensionAttributes,
+      type: "button",
+      class: `kui-list-item ${className}`.trim(),
+      style,
+      title: placeholder ? void 0 : title,
+      disabled: disabled || placeholder,
+      tabindex: placeholder ? -1 : tabIndex,
+      "data-component": "list-item",
+      "data-action": placeholder ? void 0 : action,
+      "data-item-id": itemId,
+      "data-has-icon": String(Boolean(icon)),
+      "data-multiline": multiline ? "true" : void 0,
+      "data-state": state,
+      "data-placeholder": placeholder ? "true" : void 0,
+      "aria-label": accessibleLabel,
+      "aria-current": selected ? "page" : void 0,
+      "aria-pressed": pressed === void 0 ? void 0 : String(pressed),
+      "aria-busy": placeholder ? "true" : void 0,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { class: "kui-list-item__icon", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "1em", height: "1em" }) : icon }),
+        /* @__PURE__ */ jsx("span", { class: "kui-list-item__label", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "9em" }) : label }),
+        trailing && /* @__PURE__ */ jsx("span", { class: "kui-list-item__trailing", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "2.5em" }) : trailing })
+      ]
+    }
+  );
+}
+
+export { ListItem };
+
+//# sourceMappingURL=chunk-ELSJX4W7.js.map

package/dist/chunk-ELSJX4W7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/list-item.tsx"],"names":[],"mappings":";;;;AAKA,IAAM,8BAAA,uBAAqC,GAAA,CAAI;AAAA,EAC7C,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAC,CAAA;AAkCM,SAAS,QAAA,CAAS;AAAA,EACvB,KAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,MAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,KAAA;AAAA,EACA,OAAA;AAAA,EACA,eAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,KAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,iBAAiB;AACnB,CAAA,EAAkB;AAChB,EAAA,MAAM,mBAAA,GAAsB,oBAAA;AAAA,IAC1B,cAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,mBAAA;AAAA,MACJ,IAAA,EAAK,QAAA;AAAA,MACL,KAAA,EAAO,CAAA,cAAA,EAAiB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACzC,KAAA;AAAA,MACA,KAAA,EAAO,cAAc,MAAA,GAAY,KAAA;AAAA,MACjC,UAAU,QAAA,IAAY,WAAA;AAAA,MACtB,QAAA,EAAU,cAAc,EAAA,GAAK,QAAA;AAAA,MAC7B,gBAAA,EAAe,WAAA;AAAA,MACf,aAAA,EAAa,cAAc,MAAA,GAAY,MAAA;AAAA,MACvC,cAAA,EAAc,MAAA;AAAA,MACd,eAAA,EAAe,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MACnC,gBAAA,EAAgB,YAAY,MAAA,GAAS,MAAA;AAAA,MACrC,YAAA,EAAY,KAAA;AAAA,MACZ,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,YAAA,EAAY,eAAA;AAAA,MACZ,cAAA,EAAc,WAAW,MAAA,GAAS,MAAA;AAAA,MAClC,cAAA,EAAc,OAAA,KAAY,MAAA,GAAY,MAAA,GAAY,OAAO,OAAO,CAAA;AAAA,MAChE,WAAA,EAAW,cAAc,MAAA,GAAS,MAAA;AAAA,MAEjC,QAAA,EAAA;AAAA,QAAA,IAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,qBAAA,EACT,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAM,KAAA,EAAM,MAAA,EAAO,KAAA,EAAM,CAAA,GAAK,IAAA,EACzD,CAAA;AAAA,wBAEF,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,sBAAA,EACT,QAAA,EAAA,WAAA,uBAAe,QAAA,EAAA,EAAS,KAAA,EAAM,KAAA,EAAM,CAAA,GAAK,KAAA,EAC5C,CAAA;AAAA,QACC,QAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,yBAAA,EACT,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAM,OAAA,EAAQ,CAAA,GAAK,QAAA,EAC9C;AAAA;AAAA;AAAA,GAEJ;AAEJ","file":"chunk-ELSJX4W7.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { filterDataAttributes } from './extension-attributes.js';\nimport { Skeleton } from './skeleton.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-multiline',\n  'data-state',\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-multiline'?: never;\n    'data-state'?: never;\n  }\n>;\n\nexport interface ListItemProps {\n  label: string | SafeHtml;\n  icon?: SafeHtml;\n  trailing?: SafeHtml;\n  selected?: boolean;\n  action: string;\n  itemId?: string;\n  className?: string;\n  style?: string;\n  pressed?: boolean;\n  accessibleLabel?: string;\n  title?: string;\n  multiline?: boolean;\n  state?: string;\n  disabled?: boolean;\n  tabIndex?: number;\n  /** Render the row as an unanimated loading skeleton, disabling its action. */\n  placeholder?: boolean;\n  rootAttributes?: ListItemRootAttributes;\n}\n\nexport function ListItem({\n  label,\n  icon,\n  trailing,\n  selected = false,\n  action,\n  itemId,\n  className = '',\n  style,\n  pressed,\n  accessibleLabel,\n  title,\n  multiline = false,\n  state,\n  disabled = false,\n  tabIndex,\n  placeholder = false,\n  rootAttributes = {},\n}: ListItemProps) {\n  const extensionAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  return (\n    <button\n      {...extensionAttributes}\n      type=\"button\"\n      class={`kui-list-item ${className}`.trim()}\n      style={style}\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-multiline={multiline ? 'true' : undefined}\n      data-state={state}\n      data-placeholder={placeholder ? 'true' : undefined}\n      aria-label={accessibleLabel}\n      aria-current={selected ? 'page' : undefined}\n      aria-pressed={pressed === undefined ? undefined : String(pressed)}\n      aria-busy={placeholder ? 'true' : undefined}\n    >\n      {icon && (\n        <span class=\"kui-list-item__icon\">\n          {placeholder ? <Skeleton width=\"1em\" height=\"1em\" /> : icon}\n        </span>\n      )}\n      <span class=\"kui-list-item__label\">\n        {placeholder ? <Skeleton width=\"9em\" /> : label}\n      </span>\n      {trailing && (\n        <span class=\"kui-list-item__trailing\">\n          {placeholder ? <Skeleton width=\"2.5em\" /> : trailing}\n        </span>\n      )}\n    </button>\n  );\n}\n"]}