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

package/dist/chunk-RMWNO6BA.js

@@ -0,0 +1,89 @@
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { jsx, jsxs } from 'kerfjs/jsx-runtime';
+
+var badgeProtectedAttributes = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-tone",
+  "data-appearance",
+  "data-shape",
+  "data-size",
+  "data-has-icon",
+  "data-truncate",
+  "data-placement"
+]);
+function Badge(props) {
+  const {
+    tone = "neutral",
+    placement = "inline",
+    title,
+    rootAttributes = {},
+    className = "",
+    slot
+  } = props;
+  const identity = filterDataAttributes(
+    rootAttributes,
+    badgeProtectedAttributes
+  );
+  if (props.size === "dot") {
+    const label2 = props.ariaHidden ? void 0 : props.label?.trim();
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ...identity,
+        class: `kui-badge ${className}`.trim(),
+        "data-component": "badge",
+        "data-tone": tone,
+        "data-appearance": "solid",
+        "data-size": "dot",
+        "data-placement": placement === "corner" ? "corner" : void 0,
+        role: label2 ? "img" : void 0,
+        "aria-label": label2 || void 0,
+        "aria-hidden": label2 ? void 0 : "true",
+        title,
+        slot
+      }
+    );
+  }
+  const {
+    children,
+    icon,
+    appearance = "quiet",
+    shape = "pill",
+    size = "default",
+    maxWidth,
+    label,
+    ariaHidden = false
+  } = props;
+  const named = !ariaHidden && Boolean(label?.trim());
+  const truncates = maxWidth !== void 0;
+  const tooltip = title ?? (truncates && (typeof children === "string" || typeof children === "number") ? String(children) : void 0);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...identity,
+      class: `kui-badge ${className}`.trim(),
+      "data-component": "badge",
+      "data-tone": tone,
+      "data-appearance": appearance,
+      "data-shape": shape,
+      "data-size": size,
+      "data-has-icon": icon === void 0 ? void 0 : "true",
+      "data-truncate": truncates ? "true" : void 0,
+      "data-placement": placement === "corner" ? "corner" : void 0,
+      style: truncates ? `--_kui-badge-max-width:${maxWidth}` : void 0,
+      role: named ? "img" : void 0,
+      "aria-label": named ? label : void 0,
+      "aria-hidden": ariaHidden ? "true" : void 0,
+      title: tooltip,
+      slot,
+      children: [
+        icon === void 0 ? null : /* @__PURE__ */ jsx("span", { class: "kui-badge__icon", "aria-hidden": "true", children: icon }),
+        truncates ? /* @__PURE__ */ jsx("span", { class: "kui-badge__label", children }) : children
+      ]
+    }
+  );
+}
+
+export { Badge };
+
+//# sourceMappingURL=chunk-RMWNO6BA.js.map

package/dist/chunk-RMWNO6BA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/badge/badge.tsx"],"names":["label"],"mappings":"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","file":"chunk-RMWNO6BA.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\nimport type { SemanticTone } from '../../../shared/styles/semantic-tone.js';\n\nexport type { SemanticTone } from '../../../shared/styles/semantic-tone.js';\n/** @deprecated Use SemanticTone. */\nexport type BadgeTone = SemanticTone;\nexport type BadgeAppearance = 'quiet' | 'solid' | 'outline';\nexport type BadgeShape = 'pill' | 'rounded';\n/** Size of a text badge. A text-free dot is the separate `size: 'dot'` form. */\nexport type BadgeSize = 'compact' | 'default';\n\nconst badgeProtectedAttributes = new Set([\n  'data-component',\n  'data-tone',\n  'data-appearance',\n  'data-shape',\n  'data-size',\n  'data-has-icon',\n  'data-truncate',\n  'data-placement',\n]);\n\n/** Application `data-*` identity on the badge root; Badge-owned markers stay protected. */\nexport type BadgeRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-tone'?: never;\n    'data-appearance'?: never;\n    'data-shape'?: never;\n    'data-size'?: never;\n    'data-has-icon'?: never;\n    'data-truncate'?: never;\n    'data-placement'?: never;\n  }\n>;\n\n/**\n * `inline` (default) flows with its content; `corner` pins the badge to the\n * top-trailing corner of the control it sits in (an icon-only `Button`, or a\n * button in a `ToolbarControlGroup`), out of the pointer's way.\n */\nexport type BadgePlacement = 'inline' | 'corner';\n\ninterface BadgeCommonProps {\n  tone?: SemanticTone;\n  placement?: BadgePlacement;\n  /** Native tooltip text that explains the badge on hover. */\n  title?: string;\n  /** Safe `data-*` identity, such as a status band, on the badge root. */\n  rootAttributes?: BadgeRootAttributes;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** A badge that shows a short status, count, or category as visible text. */\nexport interface BadgeTextProps extends BadgeCommonProps {\n  children: SafeHtml | string | number;\n  /** Decorative leading icon, normally an unsized LucideIcon, 4px before the text. */\n  icon?: SafeHtml;\n  appearance?: BadgeAppearance;\n  shape?: BadgeShape;\n  size?: BadgeSize;\n  /**\n   * Cap the badge's width and truncate longer text with an ellipsis, for\n   * app-supplied text such as a tag or category name. String and number\n   * content becomes the native `title` tooltip unless `title` is supplied, so\n   * the full text stays available on hover; SafeHtml content needs `title`.\n   */\n  maxWidth?: CssLength;\n  /**\n   * Accessible name that replaces the visible content when it is abbreviated\n   * or symbolic (`\"82% confidence\"` for `82`); the badge is then exposed as a\n   * labeled image.\n   */\n  label?: string;\n  /** Hide a repeated visual badge from assistive technology. */\n  ariaHidden?: boolean;\n}\n\n/** A labeled dot, announced as an image with its own accessible name. */\ninterface BadgeDotLabeled {\n  /** Accessible name for the dot, for example `\"New activity\"`. */\n  label: string;\n  ariaHidden?: false;\n}\n\n/** A decorative dot whose meaning the owning component already announces. */\ninterface BadgeDotDecorative {\n  label?: never;\n  ariaHidden: true;\n}\n\n/**\n * A text-free status dot (the iOS \"new content\" dot): a small solid circle in\n * the badge's tone. It has no visible text, so it must either carry its own\n * accessible `label` (exposed as an image) or be `ariaHidden` because the\n * surrounding component already folds its meaning into an accessible name.\n */\nexport type BadgeDotProps = BadgeCommonProps & {\n  size: 'dot';\n  children?: never;\n  appearance?: never;\n  shape?: never;\n  maxWidth?: never;\n} & (BadgeDotLabeled | BadgeDotDecorative);\n\nexport type BadgeProps = BadgeTextProps | BadgeDotProps;\n\n/** Compact, non-interactive metadata whose tone, emphasis, and shape are configured by props. */\nexport function Badge(props: BadgeProps) {\n  const {\n    tone = 'neutral',\n    placement = 'inline',\n    title,\n    rootAttributes = {},\n    className = '',\n    slot,\n  } = props;\n  const identity = filterDataAttributes(\n    rootAttributes,\n    badgeProtectedAttributes,\n  );\n  if (props.size === 'dot') {\n    // A dot without a usable label has no text fallback, so it is decorative.\n    const label = props.ariaHidden ? undefined : props.label?.trim();\n    return (\n      <span\n        {...identity}\n        class={`kui-badge ${className}`.trim()}\n        data-component=\"badge\"\n        data-tone={tone}\n        data-appearance=\"solid\"\n        data-size=\"dot\"\n        data-placement={placement === 'corner' ? 'corner' : undefined}\n        role={label ? 'img' : undefined}\n        aria-label={label || undefined}\n        aria-hidden={label ? undefined : 'true'}\n        title={title}\n        slot={slot}\n      />\n    );\n  }\n  const {\n    children,\n    icon,\n    appearance = 'quiet',\n    shape = 'pill',\n    size = 'default',\n    maxWidth,\n    label,\n    ariaHidden = false,\n  } = props;\n  const named = !ariaHidden && Boolean(label?.trim());\n  const truncates = maxWidth !== undefined;\n  // A truncated label keeps its full text as the hover tooltip.\n  const tooltip =\n    title ??\n    (truncates && (typeof children === 'string' || typeof children === 'number')\n      ? String(children)\n      : undefined);\n  return (\n    <span\n      {...identity}\n      class={`kui-badge ${className}`.trim()}\n      data-component=\"badge\"\n      data-tone={tone}\n      data-appearance={appearance}\n      data-shape={shape}\n      data-size={size}\n      data-has-icon={icon === undefined ? undefined : 'true'}\n      data-truncate={truncates ? 'true' : undefined}\n      data-placement={placement === 'corner' ? 'corner' : undefined}\n      style={truncates ? `--_kui-badge-max-width:${maxWidth}` : undefined}\n      role={named ? 'img' : undefined}\n      aria-label={named ? label : undefined}\n      aria-hidden={ariaHidden ? 'true' : undefined}\n      title={tooltip}\n      slot={slot}\n    >\n      {icon === undefined ? null : (\n        <span class=\"kui-badge__icon\" aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      {truncates ? <span class=\"kui-badge__label\">{children}</span> : children}\n    </span>\n  );\n}\n"]}

package/dist/chunk-S2XULQEK.js

@@ -0,0 +1,52 @@
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { jsx } from 'kerfjs/jsx-runtime';
+
+var framedListProtected = /* @__PURE__ */ new Set(["data-component", "data-surface"]);
+var framedListRowProtected = /* @__PURE__ */ new Set(["data-component", "data-highlighted"]);
+function FramedList({
+  children,
+  label,
+  surface = "lowered",
+  id,
+  className = "",
+  rootAttributes = {},
+  slot
+}) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ...filterDataAttributes(rootAttributes, framedListProtected),
+      id,
+      class: `kui-framed-list ${className}`.trim(),
+      "data-component": "framed-list",
+      "data-surface": surface,
+      role: "list",
+      "aria-label": label,
+      slot,
+      children
+    }
+  );
+}
+function FramedListRow({
+  children,
+  highlighted = false,
+  id,
+  className = "",
+  rootAttributes = {}
+}) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      ...filterDataAttributes(rootAttributes, framedListRowProtected),
+      id,
+      class: `kui-framed-list__row ${className}`.trim(),
+      "data-component": "framed-list-row",
+      "data-highlighted": highlighted ? "true" : void 0,
+      children
+    }
+  );
+}
+
+export { FramedList, FramedListRow };
+
+//# sourceMappingURL=chunk-S2XULQEK.js.map

package/dist/chunk-S2XULQEK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/collections/framed-list/framed-list.tsx"],"names":[],"mappings":";;;AAMA,IAAM,sCAAsB,IAAI,GAAA,CAAI,CAAC,gBAAA,EAAkB,cAAc,CAAC,CAAA;AACtE,IAAM,yCAAyB,IAAI,GAAA,CAAI,CAAC,gBAAA,EAAkB,kBAAkB,CAAC,CAAA;AA+CtE,SAAS,UAAA,CAAW;AAAA,EACzB,QAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,EAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAoB;AAClB,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACE,GAAG,oBAAA,CAAqB,cAAA,EAAgB,mBAAmB,CAAA;AAAA,MAC5D,EAAA;AAAA,MACA,KAAA,EAAO,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC3C,gBAAA,EAAe,aAAA;AAAA,MACf,cAAA,EAAc,OAAA;AAAA,MACd,IAAA,EAAK,MAAA;AAAA,MACL,YAAA,EAAY,KAAA;AAAA,MACZ,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAGO,SAAS,aAAA,CAAc;AAAA,EAC5B,QAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,EAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB;AACnB,CAAA,EAAuB;AACrB,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACE,GAAG,oBAAA,CAAqB,cAAA,EAAgB,sBAAsB,CAAA;AAAA,MAC/D,EAAA;AAAA,MACA,KAAA,EAAO,CAAA,qBAAA,EAAwB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAChD,gBAAA,EAAe,iBAAA;AAAA,MACf,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MAExC;AAAA;AAAA,GACH;AAEJ","file":"chunk-S2XULQEK.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\n\n/** The frame's fill: the lowered surface (as `ValueTable`), or the page surface. */\nexport type FramedListSurface = 'lowered' | 'base';\n\nconst framedListProtected = new Set(['data-component', 'data-surface']);\nconst framedListRowProtected = new Set(['data-component', 'data-highlighted']);\n\ntype FramedListRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-surface'?: never;\n  }\n>;\n\ntype FramedListRowRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-highlighted'?: never;\n  }\n>;\n\nexport interface FramedListProps {\n  /** `FramedListRow` children. */\n  children: KerfUiContent;\n  /** Accessible name for the list, when no heading names it. */\n  label?: string;\n  /** Frame fill; defaults to `lowered`, matching `ValueTable`. */\n  surface?: FramedListSurface;\n  id?: string;\n  className?: string;\n  /** Safe `data-*` metadata; FramedList-owned markers stay protected. */\n  rootAttributes?: FramedListRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport interface FramedListRowProps {\n  /** Arbitrary row content: a `Row` of copy and controls, a keycap, … */\n  children: KerfUiContent;\n  /** Tint the row (the row being edited or the current item). */\n  highlighted?: boolean;\n  id?: string;\n  className?: string;\n  /** Safe `data-*` metadata; FramedListRow-owned markers stay protected. */\n  rootAttributes?: FramedListRowRootAttributes;\n}\n\n/**\n * An inset-grouped list (the settings-list pattern): one rounded, bordered\n * frame with 1px dividers between rows of arbitrary content. `ValueTable` is\n * the same frame for label/value facts; this one takes any row content.\n */\nexport function FramedList({\n  children,\n  label,\n  surface = 'lowered',\n  id,\n  className = '',\n  rootAttributes = {},\n  slot,\n}: FramedListProps) {\n  return (\n    <ul\n      {...filterDataAttributes(rootAttributes, framedListProtected)}\n      id={id}\n      class={`kui-framed-list ${className}`.trim()}\n      data-component=\"framed-list\"\n      data-surface={surface}\n      role=\"list\"\n      aria-label={label}\n      slot={slot}\n    >\n      {children}\n    </ul>\n  );\n}\n\n/** One row of a `FramedList`; it owns the row inset and the divider above it. */\nexport function FramedListRow({\n  children,\n  highlighted = false,\n  id,\n  className = '',\n  rootAttributes = {},\n}: FramedListRowProps) {\n  return (\n    <li\n      {...filterDataAttributes(rootAttributes, framedListRowProtected)}\n      id={id}\n      class={`kui-framed-list__row ${className}`.trim()}\n      data-component=\"framed-list-row\"\n      data-highlighted={highlighted ? 'true' : undefined}\n    >\n      {children}\n    </li>\n  );\n}\n"]}

package/dist/chunk-S3ECMF23.js

@@ -0,0 +1,33 @@
+import { jsx } from 'kerfjs/jsx-runtime';
+
+// src/components/actions/floating-toolbar/floating-toolbar.tsx
+function FloatingToolbar({
+  children,
+  label,
+  position = "bottom-end",
+  placement = "floating",
+  inset,
+  safeAreaInsets = false,
+  className = "",
+  slot
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      class: `kui-floating-toolbar ${className}`.trim(),
+      "data-component": "floating-toolbar",
+      "data-position": position,
+      "data-placement": placement,
+      "data-safe-area-insets": safeAreaInsets ? "true" : void 0,
+      role: "toolbar",
+      "aria-label": label,
+      style: inset ? `--kui-floating-toolbar-inset:${inset}` : void 0,
+      slot,
+      children
+    }
+  );
+}
+
+export { FloatingToolbar };
+
+//# sourceMappingURL=chunk-S3ECMF23.js.map

package/dist/chunk-S3ECMF23.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/actions/floating-toolbar/floating-toolbar.tsx"],"names":[],"mappings":";;;AAkDO,SAAS,eAAA,CAAgB;AAAA,EAC9B,QAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA,GAAW,YAAA;AAAA,EACX,SAAA,GAAY,UAAA;AAAA,EACZ,KAAA;AAAA,EACA,cAAA,GAAiB,KAAA;AAAA,EACjB,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAyB;AACvB,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,qBAAA,EAAwB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAChD,gBAAA,EAAe,kBAAA;AAAA,MACf,eAAA,EAAe,QAAA;AAAA,MACf,gBAAA,EAAgB,SAAA;AAAA,MAChB,uBAAA,EAAuB,iBAAiB,MAAA,GAAS,MAAA;AAAA,MACjD,IAAA,EAAK,SAAA;AAAA,MACL,YAAA,EAAY,KAAA;AAAA,MACZ,KAAA,EAAO,KAAA,GAAQ,CAAA,6BAAA,EAAgC,KAAK,CAAA,CAAA,GAAK,MAAA;AAAA,MACzD,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-S3ECMF23.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\n\n/** Where a {@link FloatingToolbar} floats within its positioned container. */\nexport type FloatingToolbarPosition =\n  'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';\n\nexport interface FloatingToolbarProps {\n  /** Toolbar contents — normally one or more `ToolbarControlGroup`s. */\n  children: KerfUiContent;\n  /** Accessible name for the toolbar (required — it exposes `role=\"toolbar\"`). */\n  label: string;\n  /**\n   * Corner or edge it floats to inside its nearest positioned ancestor.\n   * Default: `'bottom-end'`.\n   */\n  position?: FloatingToolbarPosition;\n  /** Keep the toolbar in normal document flow instead of floating over content. */\n  placement?: 'floating' | 'inline';\n  /**\n   * Distance from the container edges named by `position`. Default:\n   * `space('m')` (16px, 8px past a top toolbar's own inset). Omit it inside a\n   * `Workbench`, `CollapsiblePanel`, or `ResizableRegion` restore corner: the\n   * corner owns the inset there and sets it to zero.\n   */\n  inset?: CssLength;\n  /** Add device or layout-routed safe-area insets to the positioned edges. */\n  safeAreaInsets?: boolean;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A toolbar that floats above the main content of its nearest positioned\n * ancestor — a transparent, forced-dark cluster of controls (e.g. a drawer\n * restore button) that sits over the content but NOT over dialogs or overlays\n * (it is not in the top layer). It is inset from the container edges by\n * `inset` (default `--kui-space-m`, i.e. 8px more than a top toolbar's own\n * inset); pass a typed length to move it. Inside a `Workbench`, `CollapsiblePanel`, or\n * `ResizableRegion` restore corner the corner owns the inset, so the toolbar\n * floats from the corner's own position. While one of those layouts has a\n * side overlay open over the toolbar's region (a Workbench rail overlay, a\n * `wireSidebar` compact overlay, an overlay `CollapsiblePanel` or horizontal\n * `ResizableRegion`), the toolbar is hidden — unfocusable and out of the\n * accessibility tree — until the overlay closes. The app owns the controls\n * and their behavior — wire them with `delegate()` as usual. Set\n * `placement=\"inline\"` for normal flow when an owner already positions the\n * control; floating placement can add safe-area insets to its per-edge tokens.\n */\nexport function FloatingToolbar({\n  children,\n  label,\n  position = 'bottom-end',\n  placement = 'floating',\n  inset,\n  safeAreaInsets = false,\n  className = '',\n  slot,\n}: FloatingToolbarProps) {\n  return (\n    <div\n      class={`kui-floating-toolbar ${className}`.trim()}\n      data-component=\"floating-toolbar\"\n      data-position={position}\n      data-placement={placement}\n      data-safe-area-insets={safeAreaInsets ? 'true' : undefined}\n      role=\"toolbar\"\n      aria-label={label}\n      style={inset ? `--kui-floating-toolbar-inset:${inset}` : undefined}\n      slot={slot}\n    >\n      {children}\n    </div>\n  );\n}\n"]}

package/dist/chunk-S4Y3YTAI.js

@@ -0,0 +1,35 @@
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { jsx } from 'kerfjs/jsx-runtime';
+
+var listInsetTextProtectedAttributes = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-sides"
+]);
+function ListInsetText({
+  children,
+  sides = "trbl",
+  className = "",
+  rootAttributes = {},
+  slot
+}) {
+  const safeRootAttributes = filterDataAttributes(
+    rootAttributes,
+    listInsetTextProtectedAttributes
+  );
+  const cls = `kui-list-inset-text ${className}`.trim();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...safeRootAttributes,
+      class: cls,
+      "data-component": "list-inset-text",
+      "data-sides": sides,
+      slot,
+      children
+    }
+  );
+}
+
+export { ListInsetText };
+
+//# sourceMappingURL=chunk-S4Y3YTAI.js.map

package/dist/chunk-S4Y3YTAI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/collections/list-inset-text/list-inset-text.tsx"],"names":[],"mappings":";;;AAIA,IAAM,gCAAA,uBAAuC,GAAA,CAAI;AAAA,EAC/C,gBAAA;AAAA,EACA;AACF,CAAC,CAAA;AA6BM,SAAS,aAAA,CAAc;AAAA,EAC5B,QAAA;AAAA,EACA,KAAA,GAAQ,MAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAuB;AACrB,EAAA,MAAM,kBAAA,GAAqB,oBAAA;AAAA,IACzB,cAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,GAAA,GAAM,CAAA,oBAAA,EAAuB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AACpD,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,kBAAA;AAAA,MACJ,KAAA,EAAO,GAAA;AAAA,MACP,gBAAA,EAAe,iBAAA;AAAA,MACf,YAAA,EAAY,KAAA;AAAA,MACZ,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-S4Y3YTAI.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport type { Sides } from '../../../shared/layout/sides.js';\n\nconst listInsetTextProtectedAttributes = new Set([\n  'data-component',\n  'data-sides',\n]);\n\ntype ListInsetTextRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-sides'?: never;\n  }\n>;\n\nexport interface ListInsetTextProps {\n  /** Text (or inline content) that carries no margin, border, or padding of its own. */\n  children: KerfUiContent | string;\n  /** Physical inset sides in canonical top/right/bottom/left order. Defaults to all sides. */\n  sides?: Sides;\n  className?: string;\n  /** Safe `data-*` metadata; component-owned structural attributes stay protected. */\n  rootAttributes?: ListInsetTextRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * Gives bare text the content-item geometry — an 8px inline margin, a 1px\n * transparent border, and 8px padding — so a plain string lines up with\n * bordered `.kui-content` items (its text edge lands at the same 17px inset).\n * Use it for text elements that have no margin, border, or padding of their own.\n * Pass `sides=\"rl\"` to keep the horizontal inset but drop the vertical box\n * space for tight text layout.\n */\nexport function ListInsetText({\n  children,\n  sides = 'trbl',\n  className = '',\n  rootAttributes = {},\n  slot,\n}: ListInsetTextProps) {\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    listInsetTextProtectedAttributes,\n  );\n  const cls = `kui-list-inset-text ${className}`.trim();\n  return (\n    <div\n      {...safeRootAttributes}\n      class={cls}\n      data-component=\"list-inset-text\"\n      data-sides={sides}\n      slot={slot}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type { Sides } from '../../../shared/layout/sides.js';\n"]}

package/dist/chunk-S4ZGTDSG.js

@@ -0,0 +1,18 @@
+// src/components/layout/workbench/internal/workbench-resize.ts
+var SLUGS = {
+  leftRail: "left-rail",
+  rightRail: "right-rail",
+  bottomDrawer: "bottom-drawer"
+};
+var workbenchRegionId = (id, panel) => `${id}-${SLUGS[panel]}`;
+var WORKBENCH_RESIZE_DEFAULTS = {
+  leftRail: { size: 280, min: 180, max: 480 },
+  rightRail: { size: 280, min: 180, max: 480 },
+  bottomDrawer: { size: 220, min: 120, max: 480 }
+};
+var WORKBENCH_MAIN_MIN_SIZE = 320;
+var WORKBENCH_MAIN_MIN_HEIGHT = 120;
+
+export { WORKBENCH_MAIN_MIN_HEIGHT, WORKBENCH_MAIN_MIN_SIZE, WORKBENCH_RESIZE_DEFAULTS, workbenchRegionId };
+
+//# sourceMappingURL=chunk-S4ZGTDSG.js.map

package/dist/chunk-S4ZGTDSG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/workbench/internal/workbench-resize.ts"],"names":[],"mappings":";AAMA,IAAM,KAAA,GAA2C;AAAA,EAC/C,QAAA,EAAU,WAAA;AAAA,EACV,SAAA,EAAW,YAAA;AAAA,EACX,YAAA,EAAc;AAChB,CAAA;AAGO,IAAM,iBAAA,GAAoB,CAAC,EAAA,EAAY,KAAA,KAC5C,GAAG,EAAE,CAAA,CAAA,EAAI,KAAA,CAAM,KAAK,CAAC,CAAA;AAGhB,IAAM,yBAAA,GAGT;AAAA,EACF,UAAU,EAAE,IAAA,EAAM,KAAK,GAAA,EAAK,GAAA,EAAK,KAAK,GAAA,EAAI;AAAA,EAC1C,WAAW,EAAE,IAAA,EAAM,KAAK,GAAA,EAAK,GAAA,EAAK,KAAK,GAAA,EAAI;AAAA,EAC3C,cAAc,EAAE,IAAA,EAAM,KAAK,GAAA,EAAK,GAAA,EAAK,KAAK,GAAA;AAC5C;AAOO,IAAM,uBAAA,GAA0B;AAOhC,IAAM,yBAAA,GAA4B","file":"chunk-S4ZGTDSG.js","sourcesContent":["// The resizable-panel contract shared by `Workbench` (which renders it) and\n// `wireWorkbench` (which drives it). Internal.\n\n/** A Workbench panel slot, named after its `WorkbenchProps` prop. */\nexport type WorkbenchPanelKey = 'leftRail' | 'rightRail' | 'bottomDrawer';\n\nconst SLUGS: Record<WorkbenchPanelKey, string> = {\n  leftRail: 'left-rail',\n  rightRail: 'right-rail',\n  bottomDrawer: 'bottom-drawer',\n};\n\n/** The `data-region-id` a resizable panel carries, e.g. `studio-left-rail`. */\nexport const workbenchRegionId = (id: string, panel: WorkbenchPanelKey) =>\n  `${id}-${SLUGS[panel]}`;\n\n/** Default size and limits (px) for a panel whose `resizable` omits them. */\nexport const WORKBENCH_RESIZE_DEFAULTS: Record<\n  WorkbenchPanelKey,\n  { size: number; min: number; max: number }\n> = {\n  leftRail: { size: 280, min: 180, max: 480 },\n  rightRail: { size: 280, min: 180, max: 480 },\n  bottomDrawer: { size: 220, min: 120, max: 480 },\n};\n\n/**\n * Default minimum width (px) a Workbench keeps for its work area beside its\n * inline rails, fixed or resizable: resizable rails stop growing there, and\n * every inline rail shrinks proportionally when the container narrows.\n */\nexport const WORKBENCH_MAIN_MIN_SIZE = 320;\n\n/**\n * Default minimum height (px) a Workbench keeps for its work area above an\n * inline bottom drawer: a resizable drawer stops growing there, and the drawer\n * shrinks when the Workbench gets shorter.\n */\nexport const WORKBENCH_MAIN_MIN_HEIGHT = 120;\n"]}

package/dist/chunk-SCDWURBO.js

@@ -0,0 +1,136 @@
+import { remify } from './chunk-IQSRHXZR.js';
+import { filterRootAttributes } from './chunk-KH4KEMSP.js';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+var backdropImageProtected = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-blur",
+  "data-parallax",
+  "data-scrim",
+  "data-fade",
+  "data-repeat",
+  "data-under-chrome"
+]);
+var SUBTLE_PARALLAX = 0.35;
+function parallaxFactor(parallax) {
+  if (parallax === "none") return 0;
+  if (parallax === "subtle") return SUBTLE_PARALLAX;
+  if (!Number.isFinite(parallax) || parallax < 0 || parallax > 1)
+    throw new RangeError(
+      "BackdropImage parallax must be none, subtle, or a number from 0 to 1."
+    );
+  return parallax;
+}
+function blurDim(dim) {
+  if (dim === void 0) return 0;
+  if (!Number.isFinite(dim) || dim < 0 || dim > 1)
+    throw new RangeError("BackdropImage blur.dim must be from 0 to 1.");
+  return dim;
+}
+var unsafeStyleValue = /[;{}<>"'\\]|\p{Cc}/u;
+function styleValue(value, prop) {
+  const trimmed = value.trim();
+  if (!trimmed || unsafeStyleValue.test(trimmed))
+    throw new TypeError(`BackdropImage ${prop} requires one CSS value.`);
+  return trimmed;
+}
+function cssUrl(src) {
+  if (/\p{Cc}/u.test(src))
+    throw new TypeError(
+      "BackdropImage src must not contain control characters."
+    );
+  return `url("${src.replace(/["\\]/g, (char) => `\\${char}`)}")`;
+}
+function BackdropImage(props) {
+  const {
+    src,
+    alt,
+    position = "center",
+    height,
+    parallax = "none",
+    blur,
+    fadeTo,
+    scrim = "none",
+    underChrome = false,
+    overlay,
+    children,
+    id,
+    className = "",
+    rootAttributes = {},
+    slot
+  } = props;
+  const factor = parallaxFactor(parallax);
+  const dim = blurDim(blur?.dim);
+  const blurRadius = blur === void 0 ? void 0 : blur.radius ?? (blur.blurredSrc === void 0 ? remify(24) : void 0);
+  const style = [
+    height === void 0 ? "" : `--_kui-backdrop-image-height:${styleValue(height, "height")}`,
+    fadeTo === void 0 ? "" : `--_kui-backdrop-image-fade-to:${styleValue(fadeTo, "fadeTo")}`,
+    factor === 0 ? "" : `--_kui-backdrop-image-parallax:${String(factor)}`,
+    position === "center" ? "" : `--_kui-backdrop-image-position:${position}`,
+    props.fit === void 0 || props.fit === "cover" ? "" : `--_kui-backdrop-image-fit:${props.fit}`,
+    blurRadius === void 0 ? "" : `--_kui-backdrop-image-blur:${styleValue(blurRadius, "blur.radius")}`,
+    dim === 0 ? "" : `--_kui-backdrop-image-dim:${String(dim)}`
+  ].filter(Boolean).join(";");
+  const image = (className2, source, copy) => props.repeat === void 0 ? /* @__PURE__ */ jsx(
+    "img",
+    {
+      class: className2,
+      src: source,
+      srcSet: source === src ? props.srcset : void 0,
+      sizes: source === src ? props.sizes : void 0,
+      alt: copy ? "" : alt,
+      "aria-hidden": copy ? "true" : void 0,
+      decoding: "async"
+    }
+  ) : /* @__PURE__ */ jsx(
+    "div",
+    {
+      class: className2,
+      role: !copy && alt ? "img" : void 0,
+      "aria-label": !copy && alt ? alt : void 0,
+      "aria-hidden": copy ? "true" : void 0,
+      style: `background-image:${cssUrl(source)};background-repeat:${props.repeat}`
+    }
+  );
+  const hasOverlay = overlay !== void 0 && overlay !== null && overlay !== false;
+  const hasChildren = children !== void 0 && children !== null && children !== false;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...filterRootAttributes(rootAttributes, backdropImageProtected),
+      id,
+      class: `kui-backdrop-image ${className}`.trim(),
+      "data-component": "backdrop-image",
+      "data-parallax": factor === 0 ? "none" : "scroll",
+      "data-blur": blur === void 0 ? void 0 : blurRadius === void 0 ? "asset" : "filter",
+      "data-fade": fadeTo === void 0 ? void 0 : "true",
+      "data-scrim": scrim === "none" ? void 0 : scrim,
+      "data-repeat": props.repeat,
+      "data-under-chrome": underChrome ? "true" : void 0,
+      style: style || void 0,
+      slot,
+      children: [
+        /* @__PURE__ */ jsxs("div", { class: "kui-backdrop-image__hero", children: [
+          /* @__PURE__ */ jsxs("div", { class: "kui-backdrop-image__backdrop", children: [
+            /* @__PURE__ */ jsxs("div", { class: "kui-backdrop-image__layers", children: [
+              image("kui-backdrop-image__media", src, false),
+              blur === void 0 ? null : image(
+                "kui-backdrop-image__blurred",
+                blur.blurredSrc ?? src,
+                true
+              )
+            ] }),
+            dim === 0 ? null : /* @__PURE__ */ jsx("div", { class: "kui-backdrop-image__dim" }),
+            scrim === "none" ? null : /* @__PURE__ */ jsx("div", { class: "kui-backdrop-image__scrim" })
+          ] }),
+          hasOverlay ? /* @__PURE__ */ jsx("div", { class: "kui-backdrop-image__overlay", children: overlay }) : null
+        ] }),
+        hasChildren ? /* @__PURE__ */ jsx("div", { class: "kui-backdrop-image__content", children }) : null
+      ]
+    }
+  );
+}
+
+export { BackdropImage };
+
+//# sourceMappingURL=chunk-SCDWURBO.js.map

package/dist/chunk-SCDWURBO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/surfaces/backdrop-image/backdrop-image.tsx"],"names":["className"],"mappings":"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","file":"chunk-SCDWURBO.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 CssColor,\n  type CssLength,\n  remify,\n} from '../../../shared/styles/css-values.js';\n\n/** How a single image fills the backdrop (`object-fit`). */\nexport type BackdropImageFit = 'cover' | 'contain' | 'fill';\n\n/** Which part of the image stays in view when it is cropped. */\nexport type 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/** Tile the image as a background instead of fitting one copy. */\nexport type BackdropImageRepeat = 'repeat' | 'repeat-x' | 'repeat-y';\n\n/**\n * How far the image lags the scroll: `none` scrolls with the content,\n * `subtle` lags by 35%, and a number from 0 to 1 is the lag factor (0.5\n * moves the image at half the scroll speed).\n */\nexport type BackdropImageParallax = 'none' | 'subtle' | number;\n\n/**\n * A dimming layer under `overlay` content: `bottom` darkens toward the\n * block end where a title sits, `full` dims the whole image evenly.\n */\nexport type BackdropImageScrim = 'none' | 'bottom' | 'full';\n\n/**\n * A scroll-linked progressive blur: a statically blurred copy of the image\n * fades in as the image block scrolls away. Only the copy's opacity (and the\n * optional dim layer's) animates; the blur itself is set once.\n */\nexport interface BackdropImageBlur {\n  /**\n   * CSS blur radius applied once to the copy. Default 24px; with\n   * `blurredSrc` the default is no filter, since that asset is already soft.\n   */\n  radius?: CssLength;\n  /**\n   * An app-supplied pre-blurred or low-resolution copy of the image, used\n   * instead of filtering `src`.\n   */\n  blurredSrc?: string;\n  /**\n   * Peak opacity, from 0 to 1, of a black dim layer that ramps in with the\n   * blur. Default 0 (no dim layer).\n   */\n  dim?: number;\n}\n\nconst backdropImageProtected = new Set([\n  'data-component',\n  'data-blur',\n  'data-parallax',\n  'data-scrim',\n  'data-fade',\n  'data-repeat',\n  'data-under-chrome',\n]);\n\ntype BackdropImageRootAttributes = StructuralRootAttributes &\n  Readonly<{\n    'data-component'?: never;\n    'data-blur'?: never;\n    'data-parallax'?: never;\n    'data-scrim'?: never;\n    'data-fade'?: never;\n    'data-repeat'?: never;\n    'data-under-chrome'?: never;\n  }>;\n\ninterface BackdropImageCommonProps {\n  /** Image URL. */\n  src: string;\n  /**\n   * Accessible description of the image. Pass `''` for a decorative image\n   * that only sets a mood; assistive technology then skips it.\n   */\n  alt: string;\n  /** Which part of a cropped image stays in view. Default `center`. */\n  position?: BackdropImagePosition;\n  /** Height of the image block. Default 320px (`remify(320)`). */\n  height?: CssLength;\n  /** How far the image lags the scroll. Default `none`. */\n  parallax?: BackdropImageParallax;\n  /**\n   * The color the image fades into at its block end. It also paints the\n   * whole surface, so `children` below the image sit on the same color and\n   * the page reads as one surface. Omit for a hard edge with no surface.\n   */\n  fadeTo?: CssColor;\n  /**\n   * Blur the image progressively as it scrolls away, by cross-fading a\n   * statically blurred copy. Static (unblurred) wherever parallax is.\n   */\n  blur?: BackdropImageBlur;\n  /**\n   * Run the image up beneath the scroller's block-start inset: an overlay or\n   * clear Pane header, NavStack chrome handed to a view's Pane, and the top\n   * safe area, the way a media page's artwork fills the screen behind\n   * transparent chrome. The visible image keeps `height` below that inset,\n   * and `overlay` content stays clear of the chrome. Place the image first in\n   * the Pane's content; it reads the Pane's\n   * `--kui-pane-content-inset-block-start`. Default `false`.\n   */\n  underChrome?: boolean;\n  /** Dim the image under `overlay` content. Default `none`. */\n  scrim?: BackdropImageScrim;\n  /** Content laid over the image's block end, such as a title and actions. */\n  overlay?: KerfUiContent;\n  /** Content that continues below the image on the `fadeTo` surface. */\n  children?: KerfUiContent;\n  id?: string;\n  className?: string;\n  /** Safe `data-*`, `aria-*`, and structural `role` metadata on the root. */\n  rootAttributes?: BackdropImageRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** One fitted image, with optional responsive candidates. */\nexport interface BackdropImageSingleProps extends BackdropImageCommonProps {\n  repeat?: undefined;\n  /** Responsive image candidates (`srcset`). */\n  srcset?: string;\n  /** Rendered-size hints for `srcset` (`sizes`). */\n  sizes?: string;\n  /** How the image fills the block. Default `cover`. */\n  fit?: BackdropImageFit;\n}\n\n/** A tiled background image at its natural size. */\nexport interface BackdropImageTiledProps extends BackdropImageCommonProps {\n  repeat: BackdropImageRepeat;\n  srcset?: never;\n  sizes?: never;\n  fit?: never;\n}\n\nexport type BackdropImageProps =\n  BackdropImageSingleProps | BackdropImageTiledProps;\n\nconst SUBTLE_PARALLAX = 0.35;\n\nfunction parallaxFactor(parallax: BackdropImageParallax): number {\n  if (parallax === 'none') return 0;\n  if (parallax === 'subtle') return SUBTLE_PARALLAX;\n  if (!Number.isFinite(parallax) || parallax < 0 || parallax > 1)\n    throw new RangeError(\n      'BackdropImage parallax must be none, subtle, or a number from 0 to 1.',\n    );\n  return parallax;\n}\n\nfunction blurDim(dim: number | undefined): number {\n  if (dim === undefined) return 0;\n  if (!Number.isFinite(dim) || dim < 0 || dim > 1)\n    throw new RangeError('BackdropImage blur.dim must be from 0 to 1.');\n  return dim;\n}\n\nconst unsafeStyleValue = /[;{}<>\"'\\\\]|\\p{Cc}/u;\n\nfunction styleValue(value: string, prop: string): string {\n  const trimmed = value.trim();\n  if (!trimmed || unsafeStyleValue.test(trimmed))\n    throw new TypeError(`BackdropImage ${prop} requires one CSS value.`);\n  return trimmed;\n}\n\n/** A CSS `url(\"…\")` for the tiled form; quotes and backslashes are escaped. */\nfunction cssUrl(src: string): string {\n  if (/\\p{Cc}/u.test(src))\n    throw new TypeError(\n      'BackdropImage src must not contain control characters.',\n    );\n  return `url(\"${src.replace(/[\"\\\\]/g, (char) => `\\\\${char}`)}\")`;\n}\n\n/**\n * An image backdrop at the top of a scrolling Pane or NavStack view: the\n * image can lag the scroll (parallax on a scroll-driven, compositor-only\n * transform), fade through a mask into `fadeTo`, and that color keeps\n * painting under `children` so the page reads as one surface. Kerf owns the\n * static fallbacks: no parallax without scroll-driven animation support,\n * under reduced motion, under `data-kui-effects=\"static\"`, or on a\n * slow-update display, and a hard edge onto solid `fadeTo` under reduced\n * transparency.\n */\nexport function BackdropImage(props: BackdropImageProps) {\n  const {\n    src,\n    alt,\n    position = 'center',\n    height,\n    parallax = 'none',\n    blur,\n    fadeTo,\n    scrim = 'none',\n    underChrome = false,\n    overlay,\n    children,\n    id,\n    className = '',\n    rootAttributes = {},\n    slot,\n  } = props;\n  const factor = parallaxFactor(parallax);\n  const dim = blurDim(blur?.dim);\n  const blurRadius =\n    blur === undefined\n      ? undefined\n      : (blur.radius ??\n        (blur.blurredSrc === undefined ? remify(24) : undefined));\n  const style = [\n    height === undefined\n      ? ''\n      : `--_kui-backdrop-image-height:${styleValue(height, 'height')}`,\n    fadeTo === undefined\n      ? ''\n      : `--_kui-backdrop-image-fade-to:${styleValue(fadeTo, 'fadeTo')}`,\n    factor === 0 ? '' : `--_kui-backdrop-image-parallax:${String(factor)}`,\n    position === 'center' ? '' : `--_kui-backdrop-image-position:${position}`,\n    props.fit === undefined || props.fit === 'cover'\n      ? ''\n      : `--_kui-backdrop-image-fit:${props.fit}`,\n    blurRadius === undefined\n      ? ''\n      : `--_kui-backdrop-image-blur:${styleValue(blurRadius, 'blur.radius')}`,\n    dim === 0 ? '' : `--_kui-backdrop-image-dim:${String(dim)}`,\n  ]\n    .filter(Boolean)\n    .join(';');\n  const image = (className: string, source: string, copy: boolean) =>\n    props.repeat === undefined ? (\n      <img\n        class={className}\n        src={source}\n        srcSet={source === src ? props.srcset : undefined}\n        sizes={source === src ? props.sizes : undefined}\n        alt={copy ? '' : alt}\n        aria-hidden={copy ? 'true' : undefined}\n        decoding=\"async\"\n      />\n    ) : (\n      <div\n        class={className}\n        role={!copy && alt ? 'img' : undefined}\n        aria-label={!copy && alt ? alt : undefined}\n        aria-hidden={copy ? 'true' : undefined}\n        style={`background-image:${cssUrl(source)};background-repeat:${props.repeat}`}\n      />\n    );\n  const hasOverlay =\n    overlay !== undefined && overlay !== null && overlay !== false;\n  const hasChildren =\n    children !== undefined && children !== null && children !== false;\n  return (\n    <div\n      {...filterRootAttributes(rootAttributes, backdropImageProtected)}\n      id={id}\n      class={`kui-backdrop-image ${className}`.trim()}\n      data-component=\"backdrop-image\"\n      data-parallax={factor === 0 ? 'none' : 'scroll'}\n      data-blur={\n        blur === undefined\n          ? undefined\n          : blurRadius === undefined\n            ? 'asset'\n            : 'filter'\n      }\n      data-fade={fadeTo === undefined ? undefined : 'true'}\n      data-scrim={scrim === 'none' ? undefined : scrim}\n      data-repeat={props.repeat}\n      data-under-chrome={underChrome ? 'true' : undefined}\n      style={style || undefined}\n      slot={slot}\n    >\n      <div class=\"kui-backdrop-image__hero\">\n        <div class=\"kui-backdrop-image__backdrop\">\n          <div class=\"kui-backdrop-image__layers\">\n            {image('kui-backdrop-image__media', src, false)}\n            {blur === undefined\n              ? null\n              : image(\n                  'kui-backdrop-image__blurred',\n                  blur.blurredSrc ?? src,\n                  true,\n                )}\n          </div>\n          {dim === 0 ? null : <div class=\"kui-backdrop-image__dim\" />}\n          {scrim === 'none' ? null : <div class=\"kui-backdrop-image__scrim\" />}\n        </div>\n        {hasOverlay ? (\n          <div class=\"kui-backdrop-image__overlay\">{overlay}</div>\n        ) : null}\n      </div>\n      {hasChildren ? (\n        <div class=\"kui-backdrop-image__content\">{children}</div>\n      ) : null}\n    </div>\n  );\n}\n"]}