@kerfjs/ui 5.0.0-beta.11 → 5.0.0-beta.110

package/dist/chunk-6CDILXF4.js

@@ -0,0 +1,204 @@
+import { LucideIcon } from './chunk-HJXVVFBT.js';
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { X } from 'lucide';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+var DIALOG_SURFACE_PROTECTED = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-size",
+  "data-presentation",
+  "data-preferred-width",
+  "data-body-inset",
+  "data-footer-inset",
+  "data-viewport-gutter",
+  "data-max-height",
+  "data-height",
+  "data-body-layout",
+  "data-footer-presentation",
+  "data-header-presentation",
+  "data-min-height",
+  "data-resizable",
+  "data-enter-motion",
+  "data-exit-motion",
+  "data-light-dismiss"
+]);
+function DialogSurface({
+  id,
+  label,
+  labelledBy,
+  describedBy,
+  alert = false,
+  heading,
+  headerActions,
+  footer,
+  withoutHeader = false,
+  lightDismiss = false,
+  closeLabel = "Close",
+  children,
+  size = "medium",
+  presentation = "modal",
+  preferredWidth,
+  bodyInset = "compact",
+  footerInset = "comfortable",
+  viewportGutter,
+  maxHeight,
+  height,
+  minHeight,
+  resizable = false,
+  enterMotion = "slide",
+  exitMotion = "slide",
+  bodyLayout = "flow",
+  headerPresentation = "docked",
+  footerPresentation = "docked",
+  footerOffset,
+  rootAttributes = {},
+  className = "",
+  slot
+}) {
+  const style = [
+    preferredWidth === void 0 ? "" : `--_kui-dialog-surface-preferred-width:${preferredWidth}`,
+    viewportGutter === void 0 ? "" : `--_kui-dialog-surface-gutter:${viewportGutter}`,
+    maxHeight === void 0 || maxHeight === "viewport" ? "" : `--_kui-dialog-surface-max-height:${maxHeight}`,
+    height === void 0 || height === "viewport" ? "" : `--_kui-dialog-surface-height:${height}`,
+    footerOffset === void 0 ? "" : `--_kui-dialog-surface-footer-offset:${footerOffset}`,
+    minHeight === void 0 ? "" : `--_kui-dialog-surface-min-height:${minHeight}`
+  ].filter(Boolean).join(";");
+  return /* @__PURE__ */ jsxs(
+    "dialog",
+    {
+      ...filterDataAttributes(rootAttributes, DIALOG_SURFACE_PROTECTED),
+      id,
+      class: `kui-dialog-surface ${className}`.trim(),
+      role: alert ? "alertdialog" : void 0,
+      "aria-label": label,
+      "aria-labelledby": labelledBy,
+      "aria-describedby": describedBy,
+      tabindex: -1,
+      "data-light-dismiss": lightDismiss ? "" : void 0,
+      "data-component": "dialog-surface",
+      "data-size": size,
+      "data-presentation": presentation,
+      "data-preferred-width": preferredWidth === void 0 ? void 0 : "",
+      "data-body-inset": bodyInset,
+      "data-footer-inset": footerInset,
+      "data-viewport-gutter": viewportGutter === void 0 ? void 0 : "",
+      "data-max-height": maxHeight === void 0 ? void 0 : "",
+      "data-height": height === void 0 ? void 0 : "",
+      "data-body-layout": bodyLayout === "flow" ? void 0 : bodyLayout,
+      "data-header-presentation": headerPresentation === "floating" ? "floating" : void 0,
+      "data-footer-presentation": footerPresentation === "floating" ? "floating" : void 0,
+      "data-min-height": minHeight === void 0 ? void 0 : "",
+      "data-resizable": resizable ? "" : void 0,
+      "data-enter-motion": enterMotion === "slide" ? void 0 : enterMotion,
+      "data-exit-motion": exitMotion === "slide" ? void 0 : exitMotion,
+      style: style || void 0,
+      slot,
+      children: [
+        withoutHeader ? null : /* @__PURE__ */ jsxs("header", { class: "kui-dialog-surface__header", children: [
+          heading === void 0 ? /* @__PURE__ */ jsx("h2", { class: "kui-dialog-surface__title", children: label }) : /* @__PURE__ */ jsx("div", { class: "kui-dialog-surface__title", children: heading }),
+          /* @__PURE__ */ jsxs("div", { class: "kui-dialog-surface__header-actions", children: [
+            headerActions,
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                class: "kui-dialog-surface__close",
+                "aria-label": closeLabel,
+                "data-dialog-close": "",
+                children: /* @__PURE__ */ jsx(LucideIcon, { icon: X, name: "x", size: "l" })
+              }
+            )
+          ] })
+        ] }),
+        presentation === "bottom-sheet" && resizable ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            class: "kui-dialog-surface__sheet-handle",
+            role: "separator",
+            "aria-orientation": "horizontal",
+            "aria-label": "Resize sheet",
+            tabindex: 0
+          }
+        ) : null,
+        /* @__PURE__ */ jsx("div", { class: "kui-dialog-surface__body", children }),
+        footer === void 0 ? null : /* @__PURE__ */ jsx("footer", { class: "kui-dialog-surface__footer", children: footer }),
+        /* @__PURE__ */ jsx("div", { "data-kerf-overlay-host": true, "data-morph-skip": true, style: "display:contents" })
+      ]
+    }
+  );
+}
+var POPOVER_DIALOG_PROTECTED = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-presentation",
+  "data-size",
+  "data-height",
+  "data-max-height",
+  "data-body-layout"
+]);
+function PopoverDialogSurface({
+  id,
+  children,
+  label,
+  labelledBy,
+  describedBy,
+  presentation = "overlay",
+  size = "medium",
+  preferredWidth,
+  height,
+  maxHeight,
+  viewportGutter,
+  bodyLayout = "flow",
+  rootAttributes = {},
+  className = "",
+  slot
+}) {
+  const style = [
+    preferredWidth === void 0 ? "" : `--_kui-popover-dialog-surface-preferred-width:${preferredWidth}`,
+    viewportGutter === void 0 ? "" : `--_kui-popover-dialog-surface-gutter:${viewportGutter}`,
+    height === void 0 || height === "viewport" ? "" : `--_kui-popover-dialog-surface-height:${height}`,
+    maxHeight === void 0 || maxHeight === "viewport" ? "" : `--_kui-popover-dialog-surface-max-height:${maxHeight}`
+  ].filter(Boolean).join(";");
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      ...filterDataAttributes(rootAttributes, POPOVER_DIALOG_PROTECTED),
+      id,
+      class: `kui-popover-dialog-surface ${className}`.trim(),
+      "data-component": "popover-dialog-surface",
+      "data-presentation": presentation,
+      "data-size": size,
+      "data-height": height === void 0 ? void 0 : "",
+      "data-max-height": maxHeight === void 0 ? void 0 : "",
+      "data-body-layout": bodyLayout === "flow" ? void 0 : bodyLayout,
+      popover: presentation === "overlay" ? "auto" : void 0,
+      role: "dialog",
+      "aria-label": label,
+      "aria-labelledby": labelledBy,
+      "aria-describedby": describedBy,
+      style: style || void 0,
+      slot,
+      children
+    }
+  );
+}
+function PopupSurface({
+  children,
+  inset = "standard",
+  className = "",
+  slot
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      class: `kui-popup-surface ${className}`.trim(),
+      "data-component": "popup-surface",
+      "data-inset": inset,
+      slot,
+      children
+    }
+  );
+}
+
+export { DialogSurface, PopoverDialogSurface, PopupSurface };
+
+//# sourceMappingURL=chunk-6CDILXF4.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/surfaces/surface-scaffold/surface-scaffold.tsx"],"names":[],"mappings":"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","file":"chunk-6CDILXF4.js","sourcesContent":["import { X } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\n\nexport {\n  closeDialog,\n  type DialogCloseSource,\n  type DialogRequestCloseDetail,\n  openDialog,\n} from './internal/dialog-surface-controller.js';\n\nexport type DialogSurfaceSize = 'small' | 'medium' | 'large';\n/**\n * How the dialog is presented: `modal` (default) centered on the screen,\n * `side-sheet` against the inline end, `fullscreen`, or `bottom-sheet`\n * attached to the bottom edge (square bottom corners, safe-area and\n * virtual-keyboard clearance, optionally user-resizable).\n */\nexport type DialogSurfacePresentation =\n  'modal' | 'side-sheet' | 'fullscreen' | 'bottom-sheet';\n/**\n * How a bottom sheet appears or leaves: `slide` (default) moves the panel in\n * from, or out to, the bottom edge; `standard` keeps the dialog's\n * scale-and-fade. Both honor `prefers-reduced-motion`.\n */\nexport type DialogSurfaceSheetMotion = 'slide' | 'standard';\nexport type SurfaceInset = 'none' | 'compact' | 'comfortable';\nexport type DialogSurfaceMaxHeight = CssLength | 'viewport';\n/** A definite modal height: a length or the full viewport, minus both gutters. */\nexport type DialogSurfaceHeight = CssLength | 'viewport';\n/**\n * How the dialog body lays out its children: `flow` (default) scrolls ordinary\n * content in the body; `fill` gives one child the body's whole height and\n * lets it own scrolling (a SplitView, a Pane, an editor); `fill-last` stacks\n * the leading children at their natural height and gives the last child the\n * remaining height to own its scrolling (a heading and notices above a\n * scrolling transcript).\n */\nexport type DialogSurfaceBodyLayout = 'flow' | 'fill' | 'fill-last';\n/**\n * Where the dialog footer sits: `docked` (default) below the body, or\n * `floating` over the body's block end, inset from the panel's inline and\n * block-end edges on a transparent background (a chat composer).\n */\nexport type DialogSurfaceFooterPresentation = 'docked' | 'floating';\n/**\n * Where the dialog header sits: `docked` (default) above the body, or\n * `floating` over the body's block-start edge on the translucent chrome\n * material, so content scrolls visibly beneath the title bar.\n */\nexport type DialogSurfaceHeaderPresentation = 'docked' | 'floating';\n\n/**\n * Application `data-*` identity on the DialogSurface root, such as\n * `data-key`; the surface's own configuration attributes stay protected.\n */\nexport type DialogSurfaceRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined>\n>;\n\nconst DIALOG_SURFACE_PROTECTED = new Set([\n  'data-component',\n  'data-size',\n  'data-presentation',\n  'data-preferred-width',\n  'data-body-inset',\n  'data-footer-inset',\n  'data-viewport-gutter',\n  'data-max-height',\n  'data-height',\n  'data-body-layout',\n  'data-footer-presentation',\n  'data-header-presentation',\n  'data-min-height',\n  'data-resizable',\n  'data-enter-motion',\n  'data-exit-motion',\n  'data-light-dismiss',\n]);\n\n/**\n * The dialog's accessible name: its `label` text (also the default title), or\n * the id of an element that names it, such as a `heading` ToolbarText.\n */\nexport type DialogSurfaceName =\n  { label: string; labelledBy?: never } | { label?: never; labelledBy: string };\n\nexport type DialogSurfaceProps = DialogSurfaceName & DialogSurfaceOptions;\n\nexport interface DialogSurfaceOptions {\n  /** The dialog's id, for `openDialog(document.getElementById(id))`. */\n  id?: string;\n  /**\n   * Id of the element whose text is the dialog's accessible description,\n   * such as the `heading` ToolbarText's `descriptionId` or app-owned summary\n   * copy in the body; rendered as `aria-describedby` on the `<dialog>`.\n   */\n  describedBy?: string;\n  /**\n   * An alert dialog: a confirmation that interrupts the person to report\n   * something urgent or ask before a destructive action (\"Delete this\n   * topic?\"). Renders `role=\"alertdialog\"` on the `<dialog>`; set\n   * `describedBy` to the element holding the message, and leave\n   * `lightDismiss` off so the person answers it.\n   */\n  alert?: boolean;\n  /** The body content. */\n  children: KerfUiContent;\n  /**\n   * Header title content in place of the `label` text, such as an xl\n   * `ToolbarText` with a description. The dialog keeps its `label` (or\n   * `labelledBy`) name.\n   */\n  heading?: KerfUiContent;\n  /** Controls before the close button in the header. */\n  headerActions?: KerfUiContent;\n  /** The footer, below the body (or floating over it); usually its buttons. */\n  footer?: KerfUiContent;\n  /**\n   * Render no header: no title and no close button. The content then owns its\n   * heading and a way to close (an element with `data-dialog-close`).\n   */\n  withoutHeader?: boolean;\n  /** Close on a press on the backdrop; otherwise the panel pulses. */\n  lightDismiss?: boolean;\n  /** The close button's accessible name (default `Close`). */\n  closeLabel?: string;\n  size?: DialogSurfaceSize;\n  presentation?: DialogSurfacePresentation;\n  /** Modal preferred width. Takes precedence over size, within the viewport cap. */\n  preferredWidth?: CssLength;\n  bodyInset?: SurfaceInset;\n  footerInset?: SurfaceInset;\n  /** Modal edge clearance. Omit to retain Web Awesome's default viewport cap. */\n  viewportGutter?: CssLength;\n  /**\n   * Modal height cap, bounded by the dynamic viewport minus both gutters. On a\n   * bottom sheet, the cap (and the resize ceiling), bounded by the dynamic\n   * viewport minus the top safe area and one gutter.\n   */\n  maxHeight?: DialogSurfaceMaxHeight;\n  /**\n   * Modal definite height, bounded the same way, so a filling child has a\n   * height to fill. Takes precedence over `maxHeight`. On a bottom sheet, the\n   * height it opens at (the visible height above the safe area or keyboard).\n   */\n  height?: DialogSurfaceHeight;\n  /**\n   * A resizable bottom sheet's resize floor (default 160px), the visible\n   * height above the safe area or keyboard.\n   */\n  minHeight?: CssLength;\n  /**\n   * Let the person resize a bottom sheet by its top grabber (drag, or the\n   * arrow, Page Up/Down, Home and End keys) between `minHeight` and the\n   * sheet's cap. Needs the `/register` entry; each opening starts at `height`\n   * (or the content height). Ignored by other presentations.\n   */\n  resizable?: boolean;\n  /** How a bottom sheet appears (default `slide` up from the bottom edge). */\n  enterMotion?: DialogSurfaceSheetMotion;\n  /** How a bottom sheet is dismissed (default `slide` down off the bottom edge). */\n  exitMotion?: DialogSurfaceSheetMotion;\n  /**\n   * Body layout (default `flow`); `fill` lets one child own the body and\n   * `fill-last` stacks fixed rows above one filling last child.\n   */\n  bodyLayout?: DialogSurfaceBodyLayout;\n  /**\n   * Header placement (default `docked`); `floating` lays the dialog's header\n   * (its title and close control) over the body's block-start edge on the\n   * translucent chrome material (`--kui-chrome-material-raised`, opaque under\n   * `prefers-reduced-transparency`, increased contrast, forced colors, or\n   * without `backdrop-filter`). The `/register` entry measures the header;\n   * the body reserves that height before its own inset, so its first content\n   * rests below the title bar. A `fill`/`fill-last` child that is the body's\n   * only child and opts into block-start `scrollClearance` (a `List` or\n   * `Pane`) takes the clearance inside its own scroll area instead, published\n   * as `--kui-scroll-clearance-block-start`, so its content scrolls visibly\n   * beneath the header. Unmeasured (without the register), the header stays\n   * docked. Keep header text in the normal text color: quiet text can fall\n   * below AA over the content passing beneath it.\n   */\n  headerPresentation?: DialogSurfaceHeaderPresentation;\n  /**\n   * Footer placement (default `docked`); `floating` lays the footer over the\n   * body's block end. The body reserves the footer's measured height so its\n   * last content is never hidden beneath it. A `fill`/`fill-last` child that\n   * opts into block-end `scrollClearance` (a `List` or `Pane`) takes that\n   * clearance inside its own scroll area instead, published as\n   * `--kui-scroll-clearance-block-end`, so its content scrolls visibly beneath\n   * the transparent footer.\n   */\n  footerPresentation?: DialogSurfaceFooterPresentation;\n  /**\n   * A floating footer's clearance from the panel's inline and block-end edges\n   * (default the 16px container inset). Choose a phone value such as\n   * `remify(8)` from `deviceClass()`; the scaffold adds no breakpoint.\n   */\n  footerOffset?: CssLength;\n  /**\n   * Safe `data-*` identity on the root. Give sibling dialogs distinct\n   * `data-key`s so a re-render morphs each surface into itself instead of\n   * reusing one dialog's element for another (structurally identical roots\n   * are otherwise matched by position).\n   */\n  rootAttributes?: DialogSurfaceRootAttributes;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A modal dialog: a native `<dialog>` with Kerf's header, body, and footer\n * chrome, sized and presented by its props. Render it closed, then open it\n * with `openDialog()` and close it with `closeDialog()`, the close button, an\n * element with `data-dialog-close`, Escape, or (with `lightDismiss`) a press\n * on the backdrop. Import `@kerfjs/ui/surface-scaffold/register` for the\n * floating header and footer measurement, the bottom sheet's keyboard\n * clearance and grabber, and re-render resilience while open.\n */\nexport function DialogSurface({\n  id,\n  label,\n  labelledBy,\n  describedBy,\n  alert = false,\n  heading,\n  headerActions,\n  footer,\n  withoutHeader = false,\n  lightDismiss = false,\n  closeLabel = 'Close',\n  children,\n  size = 'medium',\n  presentation = 'modal',\n  preferredWidth,\n  bodyInset = 'compact',\n  footerInset = 'comfortable',\n  viewportGutter,\n  maxHeight,\n  height,\n  minHeight,\n  resizable = false,\n  enterMotion = 'slide',\n  exitMotion = 'slide',\n  bodyLayout = 'flow',\n  headerPresentation = 'docked',\n  footerPresentation = 'docked',\n  footerOffset,\n  rootAttributes = {},\n  className = '',\n  slot,\n}: DialogSurfaceProps) {\n  const style = [\n    preferredWidth === undefined\n      ? ''\n      : `--_kui-dialog-surface-preferred-width:${preferredWidth}`,\n    viewportGutter === undefined\n      ? ''\n      : `--_kui-dialog-surface-gutter:${viewportGutter}`,\n    maxHeight === undefined || maxHeight === 'viewport'\n      ? ''\n      : `--_kui-dialog-surface-max-height:${maxHeight}`,\n    height === undefined || height === 'viewport'\n      ? ''\n      : `--_kui-dialog-surface-height:${height}`,\n    footerOffset === undefined\n      ? ''\n      : `--_kui-dialog-surface-footer-offset:${footerOffset}`,\n    minHeight === undefined\n      ? ''\n      : `--_kui-dialog-surface-min-height:${minHeight}`,\n  ]\n    .filter(Boolean)\n    .join(';');\n  return (\n    <dialog\n      {...filterDataAttributes(rootAttributes, DIALOG_SURFACE_PROTECTED)}\n      id={id}\n      class={`kui-dialog-surface ${className}`.trim()}\n      role={alert ? 'alertdialog' : undefined}\n      aria-label={label}\n      aria-labelledby={labelledBy}\n      aria-describedby={describedBy}\n      tabindex={-1}\n      data-light-dismiss={lightDismiss ? '' : undefined}\n      data-component=\"dialog-surface\"\n      data-size={size}\n      data-presentation={presentation}\n      data-preferred-width={preferredWidth === undefined ? undefined : ''}\n      data-body-inset={bodyInset}\n      data-footer-inset={footerInset}\n      data-viewport-gutter={viewportGutter === undefined ? undefined : ''}\n      data-max-height={maxHeight === undefined ? undefined : ''}\n      data-height={height === undefined ? undefined : ''}\n      data-body-layout={bodyLayout === 'flow' ? undefined : bodyLayout}\n      data-header-presentation={\n        headerPresentation === 'floating' ? 'floating' : undefined\n      }\n      data-footer-presentation={\n        footerPresentation === 'floating' ? 'floating' : undefined\n      }\n      data-min-height={minHeight === undefined ? undefined : ''}\n      data-resizable={resizable ? '' : undefined}\n      data-enter-motion={enterMotion === 'slide' ? undefined : enterMotion}\n      data-exit-motion={exitMotion === 'slide' ? undefined : exitMotion}\n      style={style || undefined}\n      slot={slot}\n    >\n      {withoutHeader ? null : (\n        <header class=\"kui-dialog-surface__header\">\n          {heading === undefined ? (\n            <h2 class=\"kui-dialog-surface__title\">{label}</h2>\n          ) : (\n            <div class=\"kui-dialog-surface__title\">{heading}</div>\n          )}\n          <div class=\"kui-dialog-surface__header-actions\">\n            {headerActions}\n            <button\n              type=\"button\"\n              class=\"kui-dialog-surface__close\"\n              aria-label={closeLabel}\n              data-dialog-close=\"\"\n            >\n              <LucideIcon icon={X} name=\"x\" size=\"l\" />\n            </button>\n          </div>\n        </header>\n      )}\n      {presentation === 'bottom-sheet' && resizable ? (\n        <div\n          class=\"kui-dialog-surface__sheet-handle\"\n          role=\"separator\"\n          aria-orientation=\"horizontal\"\n          aria-label=\"Resize sheet\"\n          tabindex={0}\n        />\n      ) : null}\n      <div class=\"kui-dialog-surface__body\">{children}</div>\n      {footer === undefined ? null : (\n        <footer class=\"kui-dialog-surface__footer\">{footer}</footer>\n      )}\n      {/* Where kerfjs/overlay hosts a popover or tooltip opened inside the\n          modal dialog, so it stays interactive above the inert page. */}\n      <div data-kerf-overlay-host data-morph-skip style=\"display:contents\" />\n    </dialog>\n  );\n}\n\n/** Where a PopoverDialogSurface appears: the top layer, or in flow. */\nexport type PopoverDialogSurfacePresentation = 'overlay' | 'embedded';\n\n/** Application `data-*` metadata on the surface root. */\nexport type PopoverDialogSurfaceDataAttributes = Readonly<\n  Record<`data-${string}`, string>\n>;\n\ntype PopoverDialogSurfaceName =\n  { label: string; labelledBy?: never } | { label?: never; labelledBy: string };\n\nexport type PopoverDialogSurfaceProps = PopoverDialogSurfaceName & {\n  /** The root id: what an opening control's `popovertarget` names. */\n  id?: string;\n  /**\n   * Id of the element whose text is the dialog's accessible description,\n   * such as a title `ToolbarText`'s `descriptionId`; rendered as\n   * `aria-describedby` on the `role=\"dialog\"` root.\n   */\n  describedBy?: string;\n  children: KerfUiContent;\n  /**\n   * `overlay` (default) is a native `popover=\"auto\"` in the top layer:\n   * non-modal, light dismiss (Escape or a press outside), nothing inert.\n   * `embedded` renders the same surface in flow for a catalog or inline use.\n   */\n  presentation?: PopoverDialogSurfacePresentation;\n  /** Preferred width preset: 400px, 560px (default), or 800px. */\n  size?: DialogSurfaceSize;\n  /** Preferred width; takes precedence over `size`, within the viewport cap. */\n  preferredWidth?: CssLength;\n  /** Definite height, bounded by the dynamic viewport minus both gutters. */\n  height?: DialogSurfaceHeight;\n  /** Height cap, bounded the same way, for a surface that sizes to content. */\n  maxHeight?: DialogSurfaceMaxHeight;\n  /** Edge clearance on each side of the viewport (default 16px). */\n  viewportGutter?: CssLength;\n  /**\n   * Body layout (default `flow`); `fill` lets one child own the surface and\n   * `fill-last` stacks fixed rows above one filling last child.\n   */\n  bodyLayout?: DialogSurfaceBodyLayout;\n  rootAttributes?: PopoverDialogSurfaceDataAttributes;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n};\n\nconst POPOVER_DIALOG_PROTECTED = new Set([\n  'data-component',\n  'data-presentation',\n  'data-size',\n  'data-height',\n  'data-max-height',\n  'data-body-layout',\n]);\n\n/**\n * A non-modal dialog surface on the native Popover API: Kerf's dialog chrome,\n * viewport-bounded size, and single-child fill without application CSS.\n * Open it with a `popovertarget` control or `showPopover()`; it light\n * dismisses and leaves the page interactive. Use `DialogSurface` when the\n * task must block the page.\n */\nexport function PopoverDialogSurface({\n  id,\n  children,\n  label,\n  labelledBy,\n  describedBy,\n  presentation = 'overlay',\n  size = 'medium',\n  preferredWidth,\n  height,\n  maxHeight,\n  viewportGutter,\n  bodyLayout = 'flow',\n  rootAttributes = {},\n  className = '',\n  slot,\n}: PopoverDialogSurfaceProps) {\n  const style = [\n    preferredWidth === undefined\n      ? ''\n      : `--_kui-popover-dialog-surface-preferred-width:${preferredWidth}`,\n    viewportGutter === undefined\n      ? ''\n      : `--_kui-popover-dialog-surface-gutter:${viewportGutter}`,\n    height === undefined || height === 'viewport'\n      ? ''\n      : `--_kui-popover-dialog-surface-height:${height}`,\n    maxHeight === undefined || maxHeight === 'viewport'\n      ? ''\n      : `--_kui-popover-dialog-surface-max-height:${maxHeight}`,\n  ]\n    .filter(Boolean)\n    .join(';');\n  return (\n    <section\n      {...filterDataAttributes(rootAttributes, POPOVER_DIALOG_PROTECTED)}\n      id={id}\n      class={`kui-popover-dialog-surface ${className}`.trim()}\n      data-component=\"popover-dialog-surface\"\n      data-presentation={presentation}\n      data-size={size}\n      data-height={height === undefined ? undefined : ''}\n      data-max-height={maxHeight === undefined ? undefined : ''}\n      data-body-layout={bodyLayout === 'flow' ? undefined : bodyLayout}\n      popover={presentation === 'overlay' ? 'auto' : undefined}\n      role=\"dialog\"\n      aria-label={label}\n      aria-labelledby={labelledBy}\n      aria-describedby={describedBy}\n      style={style || undefined}\n      slot={slot}\n    >\n      {children}\n    </section>\n  );\n}\n\nexport type PopupSurfaceInset = 'standard' | 'compact' | 'list-zero';\n\nexport interface PopupSurfaceProps {\n  children: KerfUiContent;\n  inset?: PopupSurfaceInset;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** Configure recurring Web Awesome dropdown-menu geometry without consumer ::part() CSS. */\nexport function PopupSurface({\n  children,\n  inset = 'standard',\n  className = '',\n  slot,\n}: PopupSurfaceProps) {\n  return (\n    <span\n      class={`kui-popup-surface ${className}`.trim()}\n      data-component=\"popup-surface\"\n      data-inset={inset}\n      slot={slot}\n    >\n      {children}\n    </span>\n  );\n}\n"]}

package/dist/chunk-6VVIW7VB.js

@@ -0,0 +1,69 @@
+import { SearchField } from './chunk-VEME3D7K.js';
+import { LucideIcon } from './chunk-HJXVVFBT.js';
+import { Tag } from 'lucide';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+var tagFieldActions = {
+  edit: "edit-tag-field-tag",
+  remove: "remove-tag-field-tag",
+  clear: "clear-tag-field"
+};
+function TagField({
+  id,
+  label,
+  tags,
+  name,
+  form,
+  placeholder = "Add tag\u2026",
+  morePlaceholder = "Add another\u2026",
+  hint,
+  error,
+  max,
+  required = false,
+  disabled = false,
+  icon,
+  clearLabel = "Clear Tags",
+  className = "",
+  slot
+}) {
+  if (max !== void 0 && (!Number.isInteger(max) || max < 1))
+    throw new RangeError("TagField max must be a positive integer.");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      class: `kui-tag-field ${className}`.trim(),
+      "data-component": "tag-field",
+      "data-tag-field-id": id,
+      "data-max": max === void 0 ? void 0 : String(max),
+      "data-invalid": error ? "" : void 0,
+      slot,
+      children: [
+        /* @__PURE__ */ jsx(
+          SearchField,
+          {
+            id,
+            label,
+            presentation: "form-field",
+            hint: error ?? hint,
+            required,
+            tokens: tags.map((tag) => ({ value: tag, label: tag })),
+            placeholder,
+            tokenPlaceholder: morePlaceholder,
+            disabled,
+            leading: icon ?? /* @__PURE__ */ jsx(LucideIcon, { icon: Tag, name: "tag" }),
+            editAction: tagFieldActions.edit,
+            removeAction: tagFieldActions.remove,
+            clearAction: tagFieldActions.clear,
+            clearLabel,
+            editorAttributes: { "data-tag-field-editor": id }
+          }
+        ),
+        name === void 0 || disabled ? null : tags.map((tag) => /* @__PURE__ */ jsx("input", { type: "hidden", name, value: tag, form }))
+      ]
+    }
+  );
+}
+
+export { TagField, tagFieldActions };
+
+//# sourceMappingURL=chunk-6VVIW7VB.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/tag-field/tag-field.tsx"],"names":[],"mappings":";;;;;AAOO,IAAM,eAAA,GAAkB;AAAA,EAC7B,IAAA,EAAM,oBAAA;AAAA,EACN,MAAA,EAAQ,sBAAA;AAAA,EACR,KAAA,EAAO;AACT;AA2CO,SAAS,QAAA,CAAS;AAAA,EACvB,EAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,WAAA,GAAc,eAAA;AAAA,EACd,eAAA,GAAkB,mBAAA;AAAA,EAClB,IAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,QAAA,GAAW,KAAA;AAAA,EACX,IAAA;AAAA,EACA,UAAA,GAAa,YAAA;AAAA,EACb,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAkB;AAChB,EAAA,IAAI,QAAQ,MAAA,KAAc,CAAC,OAAO,SAAA,CAAU,GAAG,KAAK,GAAA,GAAM,CAAA,CAAA;AACxD,IAAA,MAAM,IAAI,WAAW,0CAA0C,CAAA;AACjE,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,cAAA,EAAiB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACzC,gBAAA,EAAe,WAAA;AAAA,MACf,mBAAA,EAAmB,EAAA;AAAA,MACnB,UAAA,EAAU,GAAA,KAAQ,MAAA,GAAY,MAAA,GAAY,OAAO,GAAG,CAAA;AAAA,MACpD,cAAA,EAAc,QAAQ,EAAA,GAAK,MAAA;AAAA,MAC3B,IAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,EAAA;AAAA,YACA,KAAA;AAAA,YACA,YAAA,EAAa,YAAA;AAAA,YACb,MAAM,KAAA,IAAS,IAAA;AAAA,YACf,QAAA;AAAA,YACA,MAAA,EAAQ,IAAA,CAAK,GAAA,CAAI,CAAC,GAAA,MAAS,EAAE,KAAA,EAAO,GAAA,EAAK,KAAA,EAAO,GAAA,EAAI,CAAE,CAAA;AAAA,YACtD,WAAA;AAAA,YACA,gBAAA,EAAkB,eAAA;AAAA,YAClB,QAAA;AAAA,YACA,SAAS,IAAA,oBAAQ,GAAA,CAAC,cAAW,IAAA,EAAM,GAAA,EAAK,MAAK,KAAA,EAAM,CAAA;AAAA,YACnD,YAAY,eAAA,CAAgB,IAAA;AAAA,YAC5B,cAAc,eAAA,CAAgB,MAAA;AAAA,YAC9B,aAAa,eAAA,CAAgB,KAAA;AAAA,YAC7B,UAAA;AAAA,YACA,gBAAA,EAAkB,EAAE,uBAAA,EAAyB,EAAA;AAAG;AAAA,SAClD;AAAA,QACC,SAAS,MAAA,IAAa,QAAA,GACnB,IAAA,GACA,IAAA,CAAK,IAAI,CAAC,GAAA,qBACR,GAAA,CAAC,OAAA,EAAA,EAAM,MAAK,QAAA,EAAS,IAAA,EAAY,KAAA,EAAO,GAAA,EAAK,MAAY,CAC1D;AAAA;AAAA;AAAA,GACP;AAEJ","file":"chunk-6VVIW7VB.js","sourcesContent":["import { Tag } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\nimport { SearchField } from '../search-field/search-field.js';\n\n/** The delegated actions a TagField's controls carry; `wireTagFields` handles them. */\nexport const tagFieldActions = {\n  edit: 'edit-tag-field-tag',\n  remove: 'remove-tag-field-tag',\n  clear: 'clear-tag-field',\n} as const;\n\nexport interface TagFieldProps {\n  /** The field's id: the editor's identity and the prefix of its label and hint ids. */\n  id: string;\n  /** The visible label, which also names the field. */\n  label: string;\n  /** The tags, in order. Each is submitted as its own `name` value. */\n  tags: readonly string[];\n  /** The form field name each tag submits under. */\n  name?: string;\n  /** Associate the hidden inputs with a form outside their ancestor chain. */\n  form?: string;\n  /** Placeholder while the field is empty (default `Add tag…`). */\n  placeholder?: string;\n  /** Placeholder after the last tag (default `Add another…`). */\n  morePlaceholder?: string;\n  /** Supporting text below the field, also its description. */\n  hint?: string;\n  /** An error that replaces the hint and marks the field invalid. */\n  error?: string;\n  /** The most tags it accepts; `wireTagFields` refuses more. */\n  max?: number;\n  required?: boolean;\n  disabled?: boolean;\n  /** The leading glyph (default a Lucide `tag`). */\n  icon?: KerfUiContent;\n  /** The clear button's accessible name (default `Clear Tags`). */\n  clearLabel?: string;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A form field that collects short values as removable tags: SearchField's\n * token editor in its `form-field` presentation, with each tag a chip and a\n * hidden input that submits it under `name`. Typing then Enter (or a\n * delimiter such as a comma) adds a tag; Backspace at the start removes the\n * last one; each chip's label edits it and its × removes it. The app owns\n * the tag list: wire `wireTagFields` from `@kerfjs/ui/wire-tag-fields` and\n * re-render with the list its `onChange` reports.\n */\nexport function TagField({\n  id,\n  label,\n  tags,\n  name,\n  form,\n  placeholder = 'Add tag…',\n  morePlaceholder = 'Add another…',\n  hint,\n  error,\n  max,\n  required = false,\n  disabled = false,\n  icon,\n  clearLabel = 'Clear Tags',\n  className = '',\n  slot,\n}: TagFieldProps) {\n  if (max !== undefined && (!Number.isInteger(max) || max < 1))\n    throw new RangeError('TagField max must be a positive integer.');\n  return (\n    <div\n      class={`kui-tag-field ${className}`.trim()}\n      data-component=\"tag-field\"\n      data-tag-field-id={id}\n      data-max={max === undefined ? undefined : String(max)}\n      data-invalid={error ? '' : undefined}\n      slot={slot}\n    >\n      <SearchField\n        id={id}\n        label={label}\n        presentation=\"form-field\"\n        hint={error ?? hint}\n        required={required}\n        tokens={tags.map((tag) => ({ value: tag, label: tag }))}\n        placeholder={placeholder}\n        tokenPlaceholder={morePlaceholder}\n        disabled={disabled}\n        leading={icon ?? <LucideIcon icon={Tag} name=\"tag\" />}\n        editAction={tagFieldActions.edit}\n        removeAction={tagFieldActions.remove}\n        clearAction={tagFieldActions.clear}\n        clearLabel={clearLabel}\n        editorAttributes={{ 'data-tag-field-editor': id }}\n      />\n      {name === undefined || disabled\n        ? null\n        : tags.map((tag) => (\n            <input type=\"hidden\" name={name} value={tag} form={form} />\n          ))}\n    </div>\n  );\n}\n"]}

package/dist/chunk-7AK5I7U7.js

@@ -0,0 +1,55 @@
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+// src/components/navigation/tab-bar/tab-bar.tsx
+function TabBar({
+  id,
+  label,
+  children,
+  leading,
+  trailing,
+  end,
+  className = "",
+  activation,
+  allocation = "intrinsic",
+  presentation = "rail",
+  iconOnlyAt,
+  trailingPlacement = "separate",
+  snapTabs = false,
+  slot
+}) {
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      class: `kui-tab-bar ${className}`.trim(),
+      "data-component": "tab-bar",
+      "data-tab-bar-id": id,
+      "data-tab-activation": activation,
+      "data-allocation": allocation,
+      "data-presentation": presentation,
+      "data-icon-only-at": iconOnlyAt,
+      "data-trailing-placement": trailingPlacement,
+      "aria-label": label,
+      slot,
+      children: [
+        leading && /* @__PURE__ */ jsx("div", { class: "kui-tab-bar__leading", children: leading }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            class: "kui-tab-bar__tabs",
+            role: "tablist",
+            "aria-label": label,
+            "data-kui-tab-list": true,
+            "data-snap-tabs": snapTabs ? "true" : void 0,
+            children
+          }
+        ),
+        trailing && /* @__PURE__ */ jsx("div", { class: "kui-tab-bar__trailing", children: trailing }),
+        end && /* @__PURE__ */ jsx("div", { class: "kui-tab-bar__end", children: end })
+      ]
+    }
+  );
+}
+
+export { TabBar };
+
+//# sourceMappingURL=chunk-7AK5I7U7.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/tab-bar/tab-bar.tsx"],"names":[],"mappings":";;;AA6CO,SAAS,MAAA,CAAO;AAAA,EACrB,EAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,UAAA;AAAA,EACA,UAAA,GAAa,WAAA;AAAA,EACb,YAAA,GAAe,MAAA;AAAA,EACf,UAAA;AAAA,EACA,iBAAA,GAAoB,UAAA;AAAA,EACpB,QAAA,GAAW,KAAA;AAAA,EACX;AACF,CAAA,EAAgB;AACd,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,YAAA,EAAe,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACvC,gBAAA,EAAe,SAAA;AAAA,MACf,iBAAA,EAAiB,EAAA;AAAA,MACjB,qBAAA,EAAqB,UAAA;AAAA,MACrB,iBAAA,EAAiB,UAAA;AAAA,MACjB,mBAAA,EAAmB,YAAA;AAAA,MACnB,mBAAA,EAAmB,UAAA;AAAA,MACnB,yBAAA,EAAyB,iBAAA;AAAA,MACzB,YAAA,EAAY,KAAA;AAAA,MACZ,IAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,OAAA,oBAAW,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,sBAAA,EAAwB,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,wBACvD,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,mBAAA;AAAA,YACN,IAAA,EAAK,SAAA;AAAA,YACL,YAAA,EAAY,KAAA;AAAA,YACZ,mBAAA,EAAiB,IAAA;AAAA,YACjB,gBAAA,EAAgB,WAAW,MAAA,GAAS,MAAA;AAAA,YAEnC;AAAA;AAAA,SACH;AAAA,QACC,QAAA,oBAAY,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,yBAAyB,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,QACzD,GAAA,oBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,oBAAoB,QAAA,EAAA,GAAA,EAAI;AAAA;AAAA;AAAA,GAC7C;AAEJ","file":"chunk-7AK5I7U7.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\n\nexport type TabActivation = 'automatic' | 'manual';\nexport type TabBarAllocation = 'intrinsic' | 'fill';\nexport type TabBarPresentation = 'rail' | 'segmented' | 'inspector';\nexport type TabBarTrailingPlacement = 'separate' | 'adjacent';\n/** Tablist width where segmented TabBarItems switch to icon-only. */\nexport type TabBarIconOnlyAt = 'wide' | 'narrow' | 'compact';\n\nexport interface TabBarProps {\n  id: string;\n  label: string;\n  children: KerfUiContent;\n  leading?: KerfUiContent;\n  /** Tab-local action: one ToolbarControlGroup, Kerf Button, or Web Awesome button. */\n  trailing?: KerfUiContent;\n  /**\n   * Action pinned to the far edge of the bar. Combine with an adjacent `trailing`\n   * action when the tab-local and workspace-level actions must remain distinct.\n   * Accepts one ToolbarControlGroup, Kerf Button, or Web Awesome button.\n   */\n  end?: KerfUiContent;\n  className?: string;\n  /**\n   * Keyboard activation mode for this strip, emitted as `data-tab-activation` for\n   * `wireTabBars` to read (overrides its `activation` option). `'automatic'` (default)\n   * selects on arrow / Home / End; `'manual'` moves roving focus only and the user\n   * selects with Enter / Space / click — use it when selecting a tab is a heavy action.\n   */\n  activation?: TabActivation;\n  /** How available strip width is allocated across child TabBarItems. */\n  allocation?: TabBarAllocation;\n  /** Named strip chrome for application rails, segmented tabs, or inspectors. */\n  presentation?: TabBarPresentation;\n  /** Switch segmented TabBarItems to icon-only at tablist widths of 832, 704, or 448px. Each tab needs a leading icon. */\n  iconOnlyAt?: TabBarIconOnlyAt;\n  /** Keep a trailing action beside the final tab or at the far edge of the bar. */\n  trailingPlacement?: TabBarTrailingPlacement;\n  /** Settle scrolling peers at whole-tab starts; wireTabBars measures a pinned leading tab's inset. */\n  snapTabs?: boolean;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** Render a controlled tab strip. The application owns selection, order, and persistence. */\nexport function TabBar({\n  id,\n  label,\n  children,\n  leading,\n  trailing,\n  end,\n  className = '',\n  activation,\n  allocation = 'intrinsic',\n  presentation = 'rail',\n  iconOnlyAt,\n  trailingPlacement = 'separate',\n  snapTabs = false,\n  slot,\n}: TabBarProps) {\n  return (\n    <nav\n      class={`kui-tab-bar ${className}`.trim()}\n      data-component=\"tab-bar\"\n      data-tab-bar-id={id}\n      data-tab-activation={activation}\n      data-allocation={allocation}\n      data-presentation={presentation}\n      data-icon-only-at={iconOnlyAt}\n      data-trailing-placement={trailingPlacement}\n      aria-label={label}\n      slot={slot}\n    >\n      {leading && <div class=\"kui-tab-bar__leading\">{leading}</div>}\n      <div\n        class=\"kui-tab-bar__tabs\"\n        role=\"tablist\"\n        aria-label={label}\n        data-kui-tab-list\n        data-snap-tabs={snapTabs ? 'true' : undefined}\n      >\n        {children}\n      </div>\n      {trailing && <div class=\"kui-tab-bar__trailing\">{trailing}</div>}\n      {end && <div class=\"kui-tab-bar__end\">{end}</div>}\n    </nav>\n  );\n}\n"]}

package/dist/chunk-7K6U6FCN.js

@@ -0,0 +1,122 @@
+import { jsx, jsxs } from 'kerfjs/jsx-runtime';
+
+// src/components/forms/field-label/field-label.tsx
+function FieldLabel({
+  children,
+  class: classValue = "",
+  className = "",
+  ...attributes
+}) {
+  const classes = ["kui-text__field-label", classValue, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { ...attributes, class: classes, "data-component": "field-label", children });
+}
+var MIDDLE_FALLBACK_KEEP = 10;
+function splitMiddle(text, keep) {
+  let tailLength;
+  if (keep === "segment") {
+    const searchEnd = /[/\\]$/.test(text) ? text.length - 1 : text.length;
+    const separator = Math.max(
+      text.lastIndexOf("/", searchEnd - 1),
+      text.lastIndexOf("\\", searchEnd - 1)
+    );
+    tailLength = separator > 0 ? text.length - separator : MIDDLE_FALLBACK_KEEP;
+  } else tailLength = keep;
+  if (tailLength >= text.length) return [text, ""];
+  return [text.slice(0, -tailLength), text.slice(-tailLength)];
+}
+function Text({
+  variant: Variant = "p",
+  tone = "default",
+  color,
+  size = "default",
+  font = "default",
+  border = "transparent",
+  flush = false,
+  controlMargins = "",
+  lineHeight = "default",
+  align = "start",
+  wrap = "normal",
+  maxLines,
+  truncate,
+  truncateKeep,
+  children,
+  class: classValue = "",
+  className = "",
+  style,
+  ...attributes
+}) {
+  if (maxLines !== void 0 && (!Number.isSafeInteger(maxLines) || maxLines < 1 || wrap === "nowrap" || wrap === "truncate"))
+    throw new RangeError(
+      "Text maxLines requires a positive integer and wrapping"
+    );
+  const position = truncate ?? "end";
+  if (truncate !== void 0 && wrap !== "truncate" || !["end", "middle", "start"].includes(position))
+    throw new RangeError(
+      'Text truncate requires wrap="truncate" and one of end, middle, or start'
+    );
+  if (truncateKeep !== void 0 && (position !== "middle" || truncateKeep !== "segment" && (!Number.isSafeInteger(truncateKeep) || truncateKeep < 1)))
+    throw new RangeError(
+      'Text truncateKeep requires truncate="middle" and a positive integer or "segment"'
+    );
+  const textValue = typeof children === "string" || typeof children === "number" ? String(children) : void 0;
+  if (position === "middle" && textValue === void 0)
+    throw new TypeError(
+      'Text truncate="middle" requires string or number children'
+    );
+  const title = attributes.title === void 0 && position !== "end" ? textValue : attributes.title;
+  const classes = ["kui-text", classValue, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    Variant,
+    {
+      ...attributes,
+      class: classes,
+      "data-component": "text",
+      "data-tone": tone,
+      "data-size": size,
+      "data-font": font,
+      "data-border": border,
+      "data-control-margins": controlMargins || void 0,
+      "data-flush": flush ? "true" : void 0,
+      "data-line-height": lineHeight === "tight" ? "tight" : void 0,
+      "data-align": align === "start" ? void 0 : align,
+      "data-wrap": wrap === "normal" ? void 0 : wrap,
+      "data-max-lines": maxLines === void 0 ? void 0 : String(maxLines),
+      "data-truncate": position === "end" ? void 0 : position,
+      title,
+      style: color === void 0 ? style : `${style === void 0 || style === null ? "" : `${style};`}color:${color}`,
+      children: textBody(position, children, textValue, truncateKeep, maxLines)
+    }
+  );
+}
+function textBody(position, children, textValue, truncateKeep, maxLines) {
+  switch (position) {
+    case "start":
+      return /* @__PURE__ */ jsx("span", { class: "kui-text__truncate-start", children: /* @__PURE__ */ jsx("span", { dir: "ltr", children }) });
+    case "middle":
+      return /* @__PURE__ */ jsx(
+        TruncateMiddle,
+        {
+          parts: splitMiddle(textValue, truncateKeep ?? "segment")
+        }
+      );
+    case "end":
+      return maxLines === void 0 ? children : /* @__PURE__ */ jsx(
+        "span",
+        {
+          class: "kui-text__clamp",
+          style: `--_kui-text-max-lines:${maxLines}`,
+          children
+        }
+      );
+  }
+}
+function TruncateMiddle({ parts: [head, tail] }) {
+  return /* @__PURE__ */ jsxs("span", { class: "kui-text__truncate-middle", children: [
+    /* @__PURE__ */ jsx("span", { class: "kui-text__truncate-head", children: head }),
+    tail ? /* @__PURE__ */ jsx("span", { class: "kui-text__truncate-tail", children: tail }) : ""
+  ] });
+}
+
+export { FieldLabel, Text };
+
+//# sourceMappingURL=chunk-7K6U6FCN.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/field-label/field-label.tsx","../src/components/typography/text/text.tsx"],"names":["jsx"],"mappings":"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","file":"chunk-7K6U6FCN.js","sourcesContent":["import type { KerfBaseAttrs } from 'kerfjs/jsx-runtime';\n\nexport type FieldLabelProps = Omit<\n  KerfBaseAttrs,\n  'children' | 'class' | 'className'\n> & {\n  children: string;\n  class?: string;\n  className?: string;\n};\n\n/** Visible field heading for a read-only preview; use its id with aria-labelledby on the preview group. */\nexport function FieldLabel({\n  children,\n  class: classValue = '',\n  className = '',\n  ...attributes\n}: FieldLabelProps) {\n  const classes = ['kui-text__field-label', classValue, className]\n    .filter(Boolean)\n    .join(' ');\n  return (\n    <div {...attributes} class={classes} data-component=\"field-label\">\n      {children}\n    </div>\n  );\n}\n","import type { KerfBaseAttrs } from 'kerfjs/jsx-runtime';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { Sides } from '../../../shared/layout/sides.js';\nimport type { CssForegroundColor } from '../../../shared/styles/css-values.js';\n\nexport {\n  FieldLabel,\n  type FieldLabelProps,\n} from '../../forms/field-label/field-label.js';\n\nexport type TextVariant =\n  'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';\nexport type TextTone = 'default' | 'quiet' | 'danger';\n/**\n * `compact` (xs), `default` (the element's own size), `medium` (the 16px\n * body size, for a heading such as an in-list group title), `large`, or\n * `xlarge`.\n */\nexport type TextSize = 'compact' | 'default' | 'medium' | 'large' | 'xlarge';\nexport type TextFont = 'default' | 'monospace';\nexport type TextBorder = 'transparent' | 'none';\nexport type TextLineHeight = 'default' | 'tight';\nexport type TextWrap = 'normal' | 'anywhere' | 'nowrap' | 'truncate';\n/** Inline alignment of the text's lines, in logical (writing-direction) terms. */\nexport type TextAlign = 'start' | 'center' | 'end';\n/**\n * Where `wrap=\"truncate\"` places its ellipsis: `end` (default) keeps the\n * start, `start` keeps the tail (branch names, the end of an identifier), and\n * `middle` keeps both the start and a suffix (file paths).\n */\nexport type TextTruncate = 'end' | 'middle' | 'start';\n/**\n * The suffix `truncate=\"middle\"` always keeps: a number of trailing\n * characters, or `segment` for the last path segment with its separator.\n */\nexport type TextTruncateKeep = number | 'segment';\n\nexport type TextContent =\n  KerfUiContent | string | number | readonly TextContent[];\n\ntype TextCommonProps = Omit<\n  KerfBaseAttrs,\n  'children' | 'class' | 'className'\n> & {\n  /** Native heading, paragraph, or inline span element to render. Defaults to `p`. */\n  variant?: TextVariant;\n  /** Semantic foreground treatment. Defaults to the inherited foreground. */\n  tone?: TextTone;\n  /** Foreground color; overrides tone when supplied, or inherits when omitted. */\n  color?: CssForegroundColor;\n  /** Text sizing independent of the native semantic element. */\n  size?: TextSize;\n  /** Font family independent of the native semantic element. */\n  font?: TextFont;\n  /** Transparent alignment border or no border when embedded in owner chrome. */\n  border?: TextBorder;\n  /** Add the shared control gutter outside selected physical edges. */\n  controlMargins?: Sides;\n  /** Remove the block variant's item padding and border in compact content. */\n  flush?: boolean;\n  /** Use compact leading for short dialog or metadata copy. */\n  lineHeight?: TextLineHeight;\n  /** Inline alignment of the lines (default `start`), for centered status copy. */\n  align?: TextAlign;\n  children: TextContent;\n  class?: string;\n  className?: string;\n};\n\nexport type TextProps = TextCommonProps &\n  (\n    | {\n        /** Wrap normally or break long unbroken strings. Defaults to normal. */\n        wrap?: 'normal' | 'anywhere';\n        /** Cap wrapped text to this positive number of lines. */\n        maxLines?: number;\n        truncate?: never;\n        truncateKeep?: never;\n      }\n    | {\n        /** Keep one line without an ellipsis. */\n        wrap: 'nowrap';\n        maxLines?: never;\n        truncate?: never;\n        truncateKeep?: never;\n      }\n    | {\n        /** Keep one line with an ellipsis. */\n        wrap: 'truncate';\n        maxLines?: never;\n        /**\n         * Where the ellipsis goes (default `end`). `start` and `middle` are\n         * for left-to-right identifiers and paths, and `middle` requires\n         * string or number children so it can split them.\n         */\n        truncate?: TextTruncate;\n        /**\n         * The suffix `truncate=\"middle\"` keeps (default `segment`: the last\n         * path segment, or the last 10 characters when there is no `/` or\n         * `\\\\` separator).\n         */\n        truncateKeep?: TextTruncateKeep;\n      }\n  );\n\n/** Characters a middle truncation keeps when the text has no path separator. */\nconst MIDDLE_FALLBACK_KEEP = 10;\n\n/** Split text into the shrinkable head and the always-kept tail. */\nfunction splitMiddle(text: string, keep: TextTruncateKeep): [string, string] {\n  let tailLength: number;\n  if (keep === 'segment') {\n    // Ignore one trailing separator so `src/lib/` keeps `/lib/`.\n    const searchEnd = /[/\\\\]$/.test(text) ? text.length - 1 : text.length;\n    const separator = Math.max(\n      text.lastIndexOf('/', searchEnd - 1),\n      text.lastIndexOf('\\\\', searchEnd - 1),\n    );\n    tailLength = separator > 0 ? text.length - separator : MIDDLE_FALLBACK_KEEP;\n  } else tailLength = keep;\n  if (tailLength >= text.length) return [text, ''];\n  return [text.slice(0, -tailLength), text.slice(-tailLength)];\n}\n\n/**\n * Semantic heading, paragraph, or inline text. Block variants use the standard\n * content-item padding; `span` adds no box geometry.\n * All ordinary native heading/paragraph attributes pass through to the element.\n */\nexport function Text({\n  variant: Variant = 'p',\n  tone = 'default',\n  color,\n  size = 'default',\n  font = 'default',\n  border = 'transparent',\n  flush = false,\n  controlMargins = '',\n  lineHeight = 'default',\n  align = 'start',\n  wrap = 'normal',\n  maxLines,\n  truncate,\n  truncateKeep,\n  children,\n  class: classValue = '',\n  className = '',\n  style,\n  ...attributes\n}: TextProps) {\n  if (\n    maxLines !== undefined &&\n    (!Number.isSafeInteger(maxLines) ||\n      maxLines < 1 ||\n      wrap === 'nowrap' ||\n      wrap === 'truncate')\n  )\n    throw new RangeError(\n      'Text maxLines requires a positive integer and wrapping',\n    );\n  const position = truncate ?? 'end';\n  if (\n    (truncate !== undefined && wrap !== 'truncate') ||\n    !['end', 'middle', 'start'].includes(position)\n  )\n    throw new RangeError(\n      'Text truncate requires wrap=\"truncate\" and one of end, middle, or start',\n    );\n  if (\n    truncateKeep !== undefined &&\n    (position !== 'middle' ||\n      (truncateKeep !== 'segment' &&\n        (!Number.isSafeInteger(truncateKeep) || truncateKeep < 1)))\n  )\n    throw new RangeError(\n      'Text truncateKeep requires truncate=\"middle\" and a positive integer or \"segment\"',\n    );\n  const textValue =\n    typeof children === 'string' || typeof children === 'number'\n      ? String(children)\n      : undefined;\n  if (position === 'middle' && textValue === undefined)\n    throw new TypeError(\n      'Text truncate=\"middle\" requires string or number children',\n    );\n  // Visually clipped start/middle text keeps its full value in the DOM; the\n  // title shows it to pointer users unless the app supplied its own.\n  const title =\n    attributes.title === undefined && position !== 'end'\n      ? textValue\n      : attributes.title;\n  const classes = ['kui-text', classValue, className].filter(Boolean).join(' ');\n  return (\n    <Variant\n      {...attributes}\n      class={classes}\n      data-component=\"text\"\n      data-tone={tone}\n      data-size={size}\n      data-font={font}\n      data-border={border}\n      data-control-margins={controlMargins || undefined}\n      data-flush={flush ? 'true' : undefined}\n      data-line-height={lineHeight === 'tight' ? 'tight' : undefined}\n      data-align={align === 'start' ? undefined : align}\n      data-wrap={wrap === 'normal' ? undefined : wrap}\n      data-max-lines={maxLines === undefined ? undefined : String(maxLines)}\n      data-truncate={position === 'end' ? undefined : position}\n      title={title}\n      style={\n        color === undefined\n          ? style\n          : `${style === undefined || style === null ? '' : `${style};`}color:${color}`\n      }\n    >\n      {textBody(position, children, textValue, truncateKeep, maxLines)}\n    </Variant>\n  );\n}\n\n/** The element's content for its truncation position or line cap. */\nfunction textBody(\n  position: TextTruncate,\n  children: TextContent,\n  textValue: string | undefined,\n  truncateKeep: TextTruncateKeep | undefined,\n  maxLines: number | undefined,\n): TextContent {\n  switch (position) {\n    case 'start':\n      return (\n        <span class=\"kui-text__truncate-start\">\n          <span dir=\"ltr\">{children}</span>\n        </span>\n      );\n    case 'middle':\n      return (\n        <TruncateMiddle\n          parts={splitMiddle(textValue!, truncateKeep ?? 'segment')}\n        />\n      );\n    case 'end':\n      return maxLines === undefined ? (\n        children\n      ) : (\n        <span\n          class=\"kui-text__clamp\"\n          style={`--_kui-text-max-lines:${maxLines}`}\n        >\n          {children}\n        </span>\n      );\n  }\n}\n\nfunction TruncateMiddle({ parts: [head, tail] }: { parts: [string, string] }) {\n  return (\n    <span class=\"kui-text__truncate-middle\">\n      <span class=\"kui-text__truncate-head\">{head}</span>\n      {tail ? <span class=\"kui-text__truncate-tail\">{tail}</span> : ''}\n    </span>\n  );\n}\n\nexport type { Sides } from '../../../shared/layout/sides.js';\n"]}

package/dist/chunk-AMIHGFLP.js

@@ -0,0 +1,59 @@
+import { verticalAlignment, horizontalAlignment } from './chunk-D4MXSAMI.js';
+import { gapLength } from './chunk-MHMWQ7RB.js';
+import { filterRootAttributes } from './chunk-KH4KEMSP.js';
+import { jsx } from 'kerfjs/jsx-runtime';
+
+var rowProtectedAttributes = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-h-align",
+  "data-v-align",
+  "data-flex",
+  "data-fill",
+  "data-wrap",
+  "data-text-insets",
+  "data-control-insets"
+]);
+function Row({
+  children,
+  hAlign = "left",
+  vAlign = "full",
+  gap = "xs",
+  flex = false,
+  fill = false,
+  wrap = false,
+  textInsets = "",
+  controlInsets = "",
+  className = "",
+  rootAttributes = {},
+  slot
+}) {
+  const safeRootAttributes = filterRootAttributes(
+    rootAttributes,
+    rowProtectedAttributes
+  );
+  const gapStyle = typeof gap === "string" ? `--_kui-row-gap:${gapLength(gap)}` : `--_kui-row-column-gap:${gapLength(gap.column)};--_kui-row-row-gap:${gapLength(gap.row)}`;
+  const flexValue = flex === true ? "1 1 auto" : flex || void 0;
+  const style = [gapStyle, flexValue ? `--_kui-row-flex:${flexValue}` : ""].filter(Boolean).join(";");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...safeRootAttributes,
+      class: `kui-row ${className}`.trim(),
+      "data-component": "row",
+      "data-h-align": horizontalAlignment(hAlign),
+      "data-v-align": verticalAlignment(vAlign),
+      "data-flex": String(Boolean(flex)),
+      "data-fill": fill ? "true" : void 0,
+      "data-wrap": String(wrap),
+      "data-text-insets": textInsets || void 0,
+      "data-control-insets": controlInsets || void 0,
+      style,
+      slot,
+      children
+    }
+  );
+}
+
+export { Row };
+
+//# sourceMappingURL=chunk-AMIHGFLP.js.map

package/dist/chunk-AMIHGFLP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/row/row.tsx"],"names":[],"mappings":";;;;;AAmBA,IAAM,sBAAA,uBAA6B,GAAA,CAAI;AAAA,EACrC,gBAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,kBAAA;AAAA,EACA;AACF,CAAC,CAAA;AA+CM,SAAS,GAAA,CAAI;AAAA,EAClB,QAAA;AAAA,EACA,MAAA,GAAS,MAAA;AAAA,EACT,MAAA,GAAS,MAAA;AAAA,EACT,GAAA,GAAM,IAAA;AAAA,EACN,IAAA,GAAO,KAAA;AAAA,EACP,IAAA,GAAO,KAAA;AAAA,EACP,IAAA,GAAO,KAAA;AAAA,EACP,UAAA,GAAa,EAAA;AAAA,EACb,aAAA,GAAgB,EAAA;AAAA,EAChB,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAa;AACX,EAAA,MAAM,kBAAA,GAAqB,oBAAA;AAAA,IACzB,cAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,WACJ,OAAO,GAAA,KAAQ,WACX,CAAA,eAAA,EAAkB,SAAA,CAAU,GAAG,CAAC,CAAA,CAAA,GAChC,CAAA,sBAAA,EAAyB,SAAA,CAAU,IAAI,MAAM,CAAC,uBAAuB,SAAA,CAAU,GAAA,CAAI,GAAG,CAAC,CAAA,CAAA;AAC7F,EAAA,MAAM,SAAA,GAAY,IAAA,KAAS,IAAA,GAAO,UAAA,GAAa,IAAA,IAAQ,MAAA;AACvD,EAAA,MAAM,KAAA,GAAQ,CAAC,QAAA,EAAU,SAAA,GAAY,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,GAAK,EAAE,CAAA,CACrE,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,kBAAA;AAAA,MACJ,KAAA,EAAO,CAAA,QAAA,EAAW,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACnC,gBAAA,EAAe,KAAA;AAAA,MACf,cAAA,EAAc,oBAAoB,MAAM,CAAA;AAAA,MACxC,cAAA,EAAc,kBAAkB,MAAM,CAAA;AAAA,MACtC,WAAA,EAAW,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MAC/B,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,MAC3B,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,oBAAkB,UAAA,IAAc,MAAA;AAAA,MAChC,uBAAqB,aAAA,IAAiB,MAAA;AAAA,MACtC,KAAA;AAAA,MACA,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-AMIHGFLP.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport {\n  filterRootAttributes,\n  type StructuralRootAttributes,\n} from '../../../shared/dom/extension-attributes.js';\nimport {\n  type HorizontalAlignment,\n  horizontalAlignment,\n  type VerticalAlignment,\n  verticalAlignment,\n} from '../../../shared/layout/flex-alignment.js';\nimport { gapLength } from '../../../shared/layout/gap.js';\nimport type { Sides } from '../../../shared/layout/sides.js';\nimport {\n  type CssFlex,\n  type CssFlexKeyword,\n  type UiGap,\n} from '../../../shared/styles/css-values.js';\n\nconst rowProtectedAttributes = new Set([\n  'data-component',\n  'data-h-align',\n  'data-v-align',\n  'data-flex',\n  'data-fill',\n  'data-wrap',\n  'data-text-insets',\n  'data-control-insets',\n]);\n\ntype RowRootAttributes = StructuralRootAttributes &\n  Readonly<{\n    'data-component'?: never;\n    'data-h-align'?: never;\n    'data-v-align'?: never;\n    'data-flex'?: never;\n    'data-fill'?: never;\n    'data-wrap'?: never;\n    'data-text-insets'?: never;\n    'data-control-insets'?: never;\n  }>;\n\nexport interface RowProps {\n  children?: KerfUiContent;\n  /** Horizontal distribution. Defaults to left. */\n  hAlign?: HorizontalAlignment;\n  /** Vertical alignment and wrapped-line distribution. Defaults to full. */\n  vAlign?: VerticalAlignment;\n  /** One spacing value or separate column and row values. Defaults to xs. */\n  gap?: UiGap;\n  /** Allow this row to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */\n  flex?: boolean | CssFlexKeyword | CssFlex;\n  /**\n   * Fill the height of a parent with a definite height, such as an app root or\n   * a fixed-height frame, when this row is that parent's layout root. Inside a\n   * flex layout use `flex` instead. Defaults to false.\n   */\n  fill?: boolean;\n  /** Allow children to wrap onto additional lines. */\n  wrap?: boolean;\n  /** Physical sides that receive the standard 17px text inset. */\n  textInsets?: Sides;\n  /** Physical sides that receive the standard 8px control inset. Text insets win on overlap. */\n  controlInsets?: Sides;\n  className?: string;\n  /**\n   * Safe `data-*`, `aria-*`, and structural `role` metadata (a named\n   * `region`, a `group`); Row-owned structural attributes remain protected.\n   */\n  rootAttributes?: RowRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** A horizontal flex row with explicit physical-axis alignment and spacing. */\nexport function Row({\n  children,\n  hAlign = 'left',\n  vAlign = 'full',\n  gap = 'xs',\n  flex = false,\n  fill = false,\n  wrap = false,\n  textInsets = '',\n  controlInsets = '',\n  className = '',\n  rootAttributes = {},\n  slot,\n}: RowProps) {\n  const safeRootAttributes = filterRootAttributes(\n    rootAttributes,\n    rowProtectedAttributes,\n  );\n  const gapStyle =\n    typeof gap === 'string'\n      ? `--_kui-row-gap:${gapLength(gap)}`\n      : `--_kui-row-column-gap:${gapLength(gap.column)};--_kui-row-row-gap:${gapLength(gap.row)}`;\n  const flexValue = flex === true ? '1 1 auto' : flex || undefined;\n  const style = [gapStyle, flexValue ? `--_kui-row-flex:${flexValue}` : '']\n    .filter(Boolean)\n    .join(';');\n\n  return (\n    <div\n      {...safeRootAttributes}\n      class={`kui-row ${className}`.trim()}\n      data-component=\"row\"\n      data-h-align={horizontalAlignment(hAlign)}\n      data-v-align={verticalAlignment(vAlign)}\n      data-flex={String(Boolean(flex))}\n      data-fill={fill ? 'true' : undefined}\n      data-wrap={String(wrap)}\n      data-text-insets={textInsets || undefined}\n      data-control-insets={controlInsets || undefined}\n      style={style}\n      slot={slot}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type {\n  HorizontalAlignment,\n  VerticalAlignment,\n} from '../../../shared/layout/flex-alignment.js';\nexport type { Sides } from '../../../shared/layout/sides.js';\nexport type {\n  CssFlex,\n  CssFlexKeyword,\n  CssLength,\n  UiGap,\n  UiGapValue,\n  UiSpaceName,\n} from '../../../shared/styles/css-values.js';\n"]}