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

package/dist/chunk-VGECEXM6.js

@@ -0,0 +1,213 @@
+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",
+  closeEmphasis = "normal",
+  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-emphasis": closeEmphasis === "quiet" ? "quiet" : void 0,
+                "data-dialog-close": "",
+                children: /* @__PURE__ */ jsx(
+                  LucideIcon,
+                  {
+                    icon: X,
+                    name: "x",
+                    size: closeEmphasis === "quiet" ? "m" : "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-VGECEXM6.js.map

package/dist/chunk-VGECEXM6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/surfaces/surface-scaffold/surface-scaffold.tsx"],"names":[],"mappings":"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","file":"chunk-VGECEXM6.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/** The built-in close control's visual weight; `normal` keeps the default. */\nexport type DialogSurfaceCloseEmphasis = 'normal' | 'quiet';\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  /** Soften the built-in close control without changing its 40px target. */\n  closeEmphasis?: DialogSurfaceCloseEmphasis;\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  closeEmphasis = 'normal',\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-emphasis={closeEmphasis === 'quiet' ? 'quiet' : undefined}\n              data-dialog-close=\"\"\n            >\n              <LucideIcon\n                icon={X}\n                name=\"x\"\n                size={closeEmphasis === 'quiet' ? 'm' : 'l'}\n              />\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-WD6KABEU.js

@@ -0,0 +1,200 @@
+import { BackdropImage } from './chunk-SOBRGH7T.js';
+import { surfaceTintAttributes } from './chunk-ITENVZ6Q.js';
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+function mediaParallax(value) {
+  if (value === "none") return 0;
+  if (value === "subtle") return 0.35;
+  if (!Number.isFinite(value) || value < 0 || value > 1)
+    throw new RangeError("ContentItem media.parallax must be from 0 to 1.");
+  return value;
+}
+var mediaPositions = /* @__PURE__ */ new Set([
+  "center",
+  "top",
+  "bottom",
+  "left",
+  "right",
+  "top left",
+  "top right",
+  "bottom left",
+  "bottom right"
+]);
+function roleForSelectionMode(mode) {
+  switch (mode) {
+    case "single":
+      return "option";
+    case "multiple":
+      return "row";
+    case "none":
+    case "toggle":
+      return "button";
+  }
+}
+var contentItemProtectedAttributes = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-appearance",
+  "data-outlined",
+  "data-bubble",
+  "data-grid-row",
+  "data-media-state",
+  "data-media-edge",
+  "data-media-fade",
+  "data-kui-tint",
+  "data-kui-tint-accent"
+]);
+var interactiveProtectedAttributes = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-appearance",
+  "data-outlined",
+  "data-bubble",
+  "data-grid-row",
+  "data-media-state",
+  "data-media-edge",
+  "data-media-fade",
+  "data-kui-tint",
+  "data-kui-tint-accent",
+  "data-action",
+  "data-item-id",
+  "data-interactive",
+  "data-selected",
+  "data-disabled",
+  "data-selection-mode",
+  "data-kui-pressed"
+]);
+function ContentItem({
+  appearance = "transparent",
+  media,
+  tint,
+  children,
+  frame = "none",
+  flush = false,
+  shape = "rounded",
+  bubble,
+  title,
+  ariaLabel,
+  focusTarget = false,
+  outlined = false,
+  tabIndex,
+  gridRow = false,
+  interactive = false,
+  action,
+  itemId,
+  selectionMode = "none",
+  selected = false,
+  disabled = false,
+  className = "",
+  rootAttributes = {},
+  slot
+}) {
+  const safeRootAttributes = filterDataAttributes(
+    rootAttributes,
+    interactive ? interactiveProtectedAttributes : contentItemProtectedAttributes
+  );
+  if (interactive && !action) {
+    throw new Error("Interactive ContentItem requires an action");
+  }
+  if (interactive && selected && selectionMode === "none") {
+    throw new Error("Selected ContentItem requires a selectionMode");
+  }
+  if (media?.aspectRatio !== void 0 && (!Number.isFinite(media.aspectRatio) || media.aspectRatio <= 0))
+    throw new RangeError("ContentItem media.aspectRatio must be positive.");
+  if (media?.position !== void 0 && !mediaPositions.has(media.position))
+    throw new TypeError(
+      "ContentItem media.position must be a supported position."
+    );
+  if (media?.blur !== void 0 && media.blurredSrc !== void 0)
+    throw new TypeError(
+      "ContentItem media.blur and blurredSrc cannot be combined."
+    );
+  if (media) mediaParallax(media.parallax ?? "subtle");
+  const tinted = surfaceTintAttributes(media ? tint : void 0);
+  const fadeStyle = media?.fadeTo === void 0 ? void 0 : `--_kui-content-item-media-fade-to:${media.fadeTo}`;
+  const cls = [
+    "kui-content-item",
+    shape === "pill" ? "kui-content-item--pill" : "",
+    frame === "framed" ? "kui-content-item--framed" : "",
+    flush ? "kui-content-item--flush" : "",
+    tinted.className,
+    className
+  ].filter(Boolean).join(" ");
+  const interactiveAttributes = interactive ? {
+    "data-interactive": "true",
+    "data-action": disabled ? void 0 : action,
+    "data-item-id": itemId,
+    "data-selection-mode": selectionMode,
+    "data-selected": selectionMode === "none" ? void 0 : String(selected),
+    "data-disabled": disabled ? "true" : void 0
+  } : {};
+  let role = ariaLabel ? "region" : void 0;
+  if (interactive) role = roleForSelectionMode(selectionMode);
+  else if (gridRow) role = "row";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...safeRootAttributes,
+      ...interactiveAttributes,
+      class: cls,
+      style: [tinted.style, fadeStyle].filter(Boolean).join(";") || void 0,
+      title,
+      "data-component": "content-item",
+      "data-appearance": appearance,
+      "data-outlined": outlined ? "true" : void 0,
+      "data-bubble": bubble,
+      "data-grid-row": !interactive && gridRow ? "true" : void 0,
+      "data-media-state": media ? "pending" : void 0,
+      "data-media-edge": media?.edgeToEdge ? "true" : void 0,
+      "data-media-fade": media?.fadeTo === void 0 ? void 0 : "true",
+      "data-kui-tint": tinted["data-kui-tint"],
+      "data-kui-tint-accent": tinted["data-kui-tint-accent"],
+      role,
+      "aria-label": ariaLabel,
+      "aria-selected": interactive && (selectionMode === "single" || selectionMode === "multiple") ? String(selected) : void 0,
+      "aria-pressed": interactive && selectionMode === "toggle" ? String(selected) : void 0,
+      "aria-disabled": interactive && disabled ? "true" : void 0,
+      tabindex: interactive ? disabled ? "-1" : "0" : tabIndex ?? (focusTarget ? "-1" : void 0),
+      slot,
+      children: [
+        media ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            class: "kui-content-item__media",
+            "data-tint-scheme": tinted["data-kui-tint"],
+            "data-tint-accent": tinted["data-kui-tint-accent"],
+            children: /* @__PURE__ */ jsx(
+              BackdropImage,
+              {
+                src: media.src,
+                srcset: media.srcset,
+                sizes: media.sizes,
+                alt: media.alt,
+                aspectRatio: media.aspectRatio ?? 16 / 9,
+                position: media.position,
+                parallax: media.parallax ?? "subtle",
+                blur: media.blur ?? (media.blurredSrc ? { blurredSrc: media.blurredSrc } : void 0),
+                fadeTo: media.fadeTo,
+                overlay: media.overlay,
+                scrim: media.scrim,
+                loading: "lazy",
+                bleedInline: false
+              }
+            )
+          }
+        ) : null,
+        media ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            class: "kui-content-item__body",
+            role: interactive && selectionMode === "multiple" || !interactive && gridRow ? "gridcell" : void 0,
+            children
+          }
+        ) : interactive && selectionMode === "multiple" || !interactive && gridRow ? /* @__PURE__ */ jsx("div", { role: "gridcell", children }) : children
+      ]
+    }
+  );
+}
+
+export { ContentItem };
+
+//# sourceMappingURL=chunk-WD6KABEU.js.map

package/dist/chunk-WD6KABEU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/surfaces/content-item/content-item.tsx"],"names":[],"mappings":"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","file":"chunk-WD6KABEU.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport type { CssColor } from '../../../shared/styles/css-values.js';\nimport type { SemanticTone } from '../../../shared/styles/semantic-tone.js';\nimport {\n  type SurfaceTint,\n  surfaceTintAttributes,\n} from '../../../shared/styles/surface-tint.js';\nimport {\n  BackdropImage,\n  type BackdropImageBlur,\n  type BackdropImageParallax,\n  type BackdropImagePosition,\n  type BackdropImageScrim,\n} from '../backdrop-image/backdrop-image.js';\n\nexport type { SemanticTone } from '../../../shared/styles/semantic-tone.js';\n\n/**\n * Base surface treatment, semantic status colors, or `brand-loud`: the solid\n * brand fill with its on-loud foreground (a transcript's own messages).\n */\nexport type ContentItemAppearance =\n  'transparent' | 'surface' | 'brand-loud' | SemanticTone;\n\n/**\n * A chat-bubble layout for transcripts: the item fits its content up to 80%\n * of the row and sits at the `start` (other participants) or `end` (the\n * person's own messages) of the line.\n */\nexport type ContentItemBubble = 'start' | 'end';\n\n/** Whether the item's always-reserved 1px border is transparent or visible. */\nexport type ContentItemFrame = 'none' | 'framed';\n\n/** Corner shape: the 12px rounded rectangle or the 22px pill. */\nexport type ContentItemShape = 'rounded' | 'pill';\n/** `single` uses an option; `multiple` uses a grid row; `toggle` uses a pressed button. */\nexport type ContentItemSelectionMode =\n  'none' | 'single' | 'multiple' | 'toggle';\n\n/** One card-owned lead image in the containing feed's shared scrollport. */\nexport interface ContentItemMedia {\n  src: string;\n  alt: string;\n  srcset?: string;\n  sizes?: string;\n  /** Width divided by height; reserves the image block before it loads. Default 16/9. */\n  aspectRatio?: number;\n  position?: BackdropImagePosition;\n  /** Default subtle (35% lag); set none for a static lead image. */\n  parallax?: BackdropImageParallax;\n  /** App-supplied soft copy; its opacity changes, never its blur filter. */\n  blurredSrc?: string;\n  /** Shared BackdropImage blur behavior; use instead of `blurredSrc`. */\n  blur?: BackdropImageBlur;\n  /** Color the image dissolves into and the card body continues on. */\n  fadeTo?: CssColor;\n  /** Content layered over the image, including native controls. */\n  overlay?: KerfUiContent;\n  /** Dim the image behind overlay content. */\n  scrim?: BackdropImageScrim;\n  /** Extend the image to the card's top, left, and right inner edges. */\n  edgeToEdge?: boolean;\n}\n\nfunction mediaParallax(value: BackdropImageParallax): number {\n  if (value === 'none') return 0;\n  if (value === 'subtle') return 0.35;\n  if (!Number.isFinite(value) || value < 0 || value > 1)\n    throw new RangeError('ContentItem media.parallax must be from 0 to 1.');\n  return value;\n}\n\nconst mediaPositions = new Set<BackdropImagePosition>([\n  'center',\n  'top',\n  'bottom',\n  'left',\n  'right',\n  'top left',\n  'top right',\n  'bottom left',\n  'bottom right',\n]);\n\nfunction roleForSelectionMode(\n  mode: ContentItemSelectionMode,\n): 'option' | 'row' | 'button' {\n  switch (mode) {\n    case 'single':\n      return 'option';\n    case 'multiple':\n      return 'row';\n    case 'none':\n    case 'toggle':\n      return 'button';\n  }\n}\n\nconst contentItemProtectedAttributes = new Set([\n  'data-component',\n  'data-appearance',\n  'data-outlined',\n  'data-bubble',\n  'data-grid-row',\n  'data-media-state',\n  'data-media-edge',\n  'data-media-fade',\n  'data-kui-tint',\n  'data-kui-tint-accent',\n]);\nconst interactiveProtectedAttributes = new Set([\n  'data-component',\n  'data-appearance',\n  'data-outlined',\n  'data-bubble',\n  'data-grid-row',\n  'data-media-state',\n  'data-media-edge',\n  'data-media-fade',\n  'data-kui-tint',\n  'data-kui-tint-accent',\n  'data-action',\n  'data-item-id',\n  'data-interactive',\n  'data-selected',\n  'data-disabled',\n  'data-selection-mode',\n  'data-kui-pressed',\n]);\n\ntype ContentItemRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-appearance'?: never;\n    'data-outlined'?: never;\n    'data-bubble'?: never;\n    'data-grid-row'?: never;\n    'data-media-state'?: never;\n    'data-media-edge'?: never;\n    'data-media-fade'?: never;\n    'data-kui-tint'?: never;\n    'data-kui-tint-accent'?: never;\n  }\n>;\n\ntype ContentItemInteractiveRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-appearance'?: never;\n    'data-outlined'?: never;\n    'data-bubble'?: never;\n    'data-grid-row'?: never;\n    'data-media-state'?: never;\n    'data-media-edge'?: never;\n    'data-media-fade'?: never;\n    'data-kui-tint'?: never;\n    'data-kui-tint-accent'?: never;\n    'data-action'?: never;\n    'data-item-id'?: never;\n    'data-interactive'?: never;\n    'data-selected'?: never;\n    'data-disabled'?: never;\n    'data-selection-mode'?: never;\n    'data-kui-pressed'?: never;\n  }\n>;\n\ninterface ContentItemBaseProps {\n  /**\n   * Coordinated background, border, and foreground colors. `transparent`\n   * preserves the surrounding surface; `surface` paints the base surface;\n   * semantic values match StateBanner. Defaults to `transparent`.\n   */\n  appearance?: ContentItemAppearance;\n  /** Reserved lead image with a per-image scroll timeline. Wire the containing root with `wireContentItems`. */\n  media?: ContentItemMedia;\n  /** App-sampled image color, scoped to this card once its image loads. */\n  tint?: SurfaceTint;\n  /** Item content; a plain string is allowed for bare copy. */\n  children?: KerfUiContent | string;\n  /**\n   * `framed` paints the standard neutral border in the 1px the item always\n   * reserves, so framing never changes geometry. Frame only an item that\n   * marks a real distinction. Defaults to `none` (transparent border).\n   */\n  frame?: ContentItemFrame;\n  /** Remove block padding and block borders while retaining inline geometry. */\n  flush?: boolean;\n  /** Corner shape. Defaults to `rounded`. */\n  shape?: ContentItemShape;\n  /**\n   * Lay the item out as a chat bubble: content width up to 80% of the row,\n   * at the `start` or `end` of the line. Pair `end` with `brand-loud` for the\n   * person's own messages. Omit for an ordinary full-width item.\n   */\n  bubble?: ContentItemBubble;\n  /** Native hover tooltip. */\n  title?: string;\n  /**\n   * Names the item as a distinct region (`role=\"region\"`). Omit it for an\n   * ordinary item, which stays a non-landmark grouping.\n   */\n  ariaLabel?: string;\n  /**\n   * Makes the item a programmatic focus target (`tabindex=\"-1\"`, never a tab\n   * stop), for example the preferred initial focus of a NavStack view when\n   * combined with `data-nav-focus` in `rootAttributes`.\n   */\n  focusTarget?: boolean;\n  /** Keep the standard focus outline visible, such as for a drop target. */\n  outlined?: boolean;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport type ContentItemProps = ContentItemBaseProps &\n  (\n    | {\n        interactive?: false;\n        action?: never;\n        itemId?: never;\n        selectionMode?: never;\n        selected?: never;\n        disabled?: never;\n        /** Opt into keyboard (`0`) or programmatic (`-1`) focus. */\n        tabIndex?: 0 | -1;\n        /**\n         * A non-selectable row of a multi-select `List` or `Grid`: renders\n         * `role=\"row\"` around a `gridcell`, with no `aria-selected` and no\n         * Tab stop of its own, for content between selectable rows (an\n         * activity group, a \"messages skipped\" divider). Its controls stay\n         * reachable by Tab; arrow keys skip it.\n         */\n        gridRow?: boolean;\n        /** Existing static `data-*` metadata remains available. */\n        rootAttributes?: ContentItemRootAttributes;\n      }\n    | {\n        /** Enable a keyboard reachable card; wire `wireContentItems` once on its containing root. */\n        interactive: true;\n        /** Delegated action dispatched by pointer, Enter, or Space. */\n        action: string;\n        itemId?: string;\n        selectionMode?: ContentItemSelectionMode;\n        selected?: boolean;\n        disabled?: boolean;\n        tabIndex?: never;\n        /** An interactive item is already a row in a multi-select grid. */\n        gridRow?: never;\n        /** Safe app metadata; interaction attributes are component-owned. */\n        rootAttributes?: ContentItemInteractiveRootAttributes;\n      }\n  );\n\n/**\n * One self-contained `.kui-content` child: an 8px inline margin, a real 1px\n * border (transparent unless `framed`), 8px padding, and a rounded or pill\n * radius. It owns that whole geometry, so wrappers must not add more.\n */\nexport function ContentItem({\n  appearance = 'transparent',\n  media,\n  tint,\n  children,\n  frame = 'none',\n  flush = false,\n  shape = 'rounded',\n  bubble,\n  title,\n  ariaLabel,\n  focusTarget = false,\n  outlined = false,\n  tabIndex,\n  gridRow = false,\n  interactive = false,\n  action,\n  itemId,\n  selectionMode = 'none',\n  selected = false,\n  disabled = false,\n  className = '',\n  rootAttributes = {},\n  slot,\n}: ContentItemProps) {\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    interactive\n      ? interactiveProtectedAttributes\n      : contentItemProtectedAttributes,\n  );\n  if (interactive && !action) {\n    throw new Error('Interactive ContentItem requires an action');\n  }\n  if (interactive && selected && selectionMode === 'none') {\n    throw new Error('Selected ContentItem requires a selectionMode');\n  }\n  if (\n    media?.aspectRatio !== undefined &&\n    (!Number.isFinite(media.aspectRatio) || media.aspectRatio <= 0)\n  )\n    throw new RangeError('ContentItem media.aspectRatio must be positive.');\n  if (media?.position !== undefined && !mediaPositions.has(media.position))\n    throw new TypeError(\n      'ContentItem media.position must be a supported position.',\n    );\n  if (media?.blur !== undefined && media.blurredSrc !== undefined)\n    throw new TypeError(\n      'ContentItem media.blur and blurredSrc cannot be combined.',\n    );\n  if (media) mediaParallax(media.parallax ?? 'subtle');\n  const tinted = surfaceTintAttributes(media ? tint : undefined);\n  const fadeStyle =\n    media?.fadeTo === undefined\n      ? undefined\n      : `--_kui-content-item-media-fade-to:${media.fadeTo}`;\n  const cls = [\n    'kui-content-item',\n    shape === 'pill' ? 'kui-content-item--pill' : '',\n    frame === 'framed' ? 'kui-content-item--framed' : '',\n    flush ? 'kui-content-item--flush' : '',\n    tinted.className,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n  const interactiveAttributes = interactive\n    ? {\n        'data-interactive': 'true',\n        'data-action': disabled ? undefined : action,\n        'data-item-id': itemId,\n        'data-selection-mode': selectionMode,\n        'data-selected':\n          selectionMode === 'none' ? undefined : String(selected),\n        'data-disabled': disabled ? 'true' : undefined,\n      }\n    : {};\n  let role: 'option' | 'row' | 'button' | 'region' | undefined = ariaLabel\n    ? 'region'\n    : undefined;\n  if (interactive) role = roleForSelectionMode(selectionMode);\n  else if (gridRow) role = 'row';\n  return (\n    <div\n      {...safeRootAttributes}\n      {...interactiveAttributes}\n      class={cls}\n      style={[tinted.style, fadeStyle].filter(Boolean).join(';') || undefined}\n      title={title}\n      data-component=\"content-item\"\n      data-appearance={appearance}\n      data-outlined={outlined ? 'true' : undefined}\n      data-bubble={bubble}\n      data-grid-row={!interactive && gridRow ? 'true' : undefined}\n      data-media-state={media ? 'pending' : undefined}\n      data-media-edge={media?.edgeToEdge ? 'true' : undefined}\n      data-media-fade={media?.fadeTo === undefined ? undefined : 'true'}\n      data-kui-tint={tinted['data-kui-tint']}\n      data-kui-tint-accent={tinted['data-kui-tint-accent']}\n      role={role}\n      aria-label={ariaLabel}\n      aria-selected={\n        interactive &&\n        (selectionMode === 'single' || selectionMode === 'multiple')\n          ? String(selected)\n          : undefined\n      }\n      aria-pressed={\n        interactive && selectionMode === 'toggle' ? String(selected) : undefined\n      }\n      aria-disabled={interactive && disabled ? 'true' : undefined}\n      tabindex={\n        interactive\n          ? disabled\n            ? '-1'\n            : '0'\n          : (tabIndex ?? (focusTarget ? '-1' : undefined))\n      }\n      slot={slot}\n    >\n      {media ? (\n        <div\n          class=\"kui-content-item__media\"\n          data-tint-scheme={tinted['data-kui-tint']}\n          data-tint-accent={tinted['data-kui-tint-accent']}\n        >\n          <BackdropImage\n            src={media.src}\n            srcset={media.srcset}\n            sizes={media.sizes}\n            alt={media.alt}\n            aspectRatio={media.aspectRatio ?? 16 / 9}\n            position={media.position}\n            parallax={media.parallax ?? 'subtle'}\n            blur={\n              media.blur ??\n              (media.blurredSrc ? { blurredSrc: media.blurredSrc } : undefined)\n            }\n            fadeTo={media.fadeTo}\n            overlay={media.overlay}\n            scrim={media.scrim}\n            loading=\"lazy\"\n            bleedInline={false}\n          />\n        </div>\n      ) : null}\n      {media ? (\n        <div\n          class=\"kui-content-item__body\"\n          role={\n            (interactive && selectionMode === 'multiple') ||\n            (!interactive && gridRow)\n              ? 'gridcell'\n              : undefined\n          }\n        >\n          {children}\n        </div>\n      ) : (interactive && selectionMode === 'multiple') ||\n        (!interactive && gridRow) ? (\n        <div role=\"gridcell\">{children}</div>\n      ) : (\n        children\n      )}\n    </div>\n  );\n}\n"]}