@kerfjs/ui 5.0.0-beta.10 → 5.0.0-beta.101

package/dist/chunk-KCS6NJ3O.js

@@ -0,0 +1,82 @@
+import { gapLength } from './chunk-MHMWQ7RB.js';
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { jsx } from 'kerfjs/jsx-runtime';
+
+var gridProtectedAttributes = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-columns",
+  "data-min-column-width",
+  "data-auto-fill",
+  "data-flex",
+  "data-fill",
+  "data-text-insets",
+  "data-control-insets"
+]);
+function Grid({
+  children,
+  selectionMode,
+  ariaLabel,
+  columns,
+  minColumnWidth,
+  autoFill = false,
+  gap = "xs",
+  flex = false,
+  fill = false,
+  textInsets = "",
+  controlInsets = "",
+  className = "",
+  rootAttributes = {},
+  slot
+}) {
+  if (selectionMode === "multiple" && !ariaLabel) {
+    throw new Error("Multi-select Grid requires an ariaLabel");
+  }
+  if (minColumnWidth !== void 0 && columns !== void 0) {
+    throw new RangeError(
+      "Grid columns and minColumnWidth are mutually exclusive"
+    );
+  }
+  if (autoFill && minColumnWidth === void 0) {
+    throw new RangeError("Grid autoFill requires minColumnWidth");
+  }
+  if (minColumnWidth === void 0 && (columns === void 0 || !Number.isSafeInteger(columns) || columns < 1)) {
+    throw new RangeError("Grid columns must be a positive safe integer");
+  }
+  const safeRootAttributes = filterDataAttributes(
+    rootAttributes,
+    gridProtectedAttributes
+  );
+  const gapStyle = typeof gap === "string" ? `--_kui-grid-gap:${gapLength(gap)}` : `--_kui-grid-column-gap:${gapLength(gap.column)};--_kui-grid-row-gap:${gapLength(gap.row)}`;
+  const flexValue = flex === true ? "1 1 auto" : flex || void 0;
+  const style = [
+    columns === void 0 ? "" : `--_kui-grid-columns:${columns}`,
+    minColumnWidth === void 0 ? "" : `--_kui-grid-min-column-width:${minColumnWidth}`,
+    gapStyle,
+    flexValue ? `--_kui-grid-flex:${flexValue}` : ""
+  ].filter(Boolean).join(";");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...safeRootAttributes,
+      class: `kui-grid ${className}`.trim(),
+      "data-component": "grid",
+      role: selectionMode === "multiple" ? "grid" : void 0,
+      "aria-label": selectionMode === "multiple" ? ariaLabel : void 0,
+      "aria-multiselectable": selectionMode === "multiple" ? "true" : void 0,
+      "data-columns": columns === void 0 ? void 0 : String(columns),
+      "data-min-column-width": minColumnWidth === void 0 ? void 0 : "true",
+      "data-auto-fill": autoFill ? "true" : void 0,
+      "data-flex": String(Boolean(flex)),
+      "data-fill": fill ? "true" : void 0,
+      "data-text-insets": textInsets || void 0,
+      "data-control-insets": controlInsets || void 0,
+      style,
+      slot,
+      children
+    }
+  );
+}
+
+export { Grid };
+
+//# sourceMappingURL=chunk-KCS6NJ3O.js.map

package/dist/chunk-KCS6NJ3O.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/grid/grid.tsx"],"names":[],"mappings":"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","file":"chunk-KCS6NJ3O.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.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 CssLength,\n  type UiGap,\n} from '../../../shared/styles/css-values.js';\n\nconst gridProtectedAttributes = new Set([\n  'data-component',\n  'data-columns',\n  'data-min-column-width',\n  'data-auto-fill',\n  'data-flex',\n  'data-fill',\n  'data-text-insets',\n  'data-control-insets',\n]);\n\ntype GridRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-columns'?: never;\n    'data-min-column-width'?: never;\n    'data-auto-fill'?: never;\n    'data-flex'?: never;\n    'data-fill'?: never;\n    'data-text-insets'?: never;\n    'data-control-insets'?: never;\n  }\n>;\n\ninterface GridCommonProps {\n  children?: KerfUiContent;\n  /** Make this a labeled multi-select grid for `ContentItem selectionMode=\"multiple\"` tiles. */\n  selectionMode?: 'multiple';\n  /** Accessible name for the multi-select grid. */\n  ariaLabel?: string;\n  /** One spacing value or separate column and row values. Defaults to xs. */\n  gap?: UiGap;\n  /** Allow this grid 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 grid is that parent's layout root. Inside a\n   * flex layout use `flex` instead. Defaults to false.\n   */\n  fill?: 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  /** Safe `data-*` metadata; Grid-owned structural attributes remain protected. */\n  rootAttributes?: GridRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport type GridProps = GridCommonProps &\n  (\n    | {\n        /** Number of equal-width columns. Must be a positive safe integer. */\n        columns: number;\n        minColumnWidth?: never;\n        autoFill?: never;\n      }\n    | {\n        columns?: never;\n        /** Fit equal columns of at least this width; collapse as the container narrows. */\n        minColumnWidth: CssLength;\n        /** Keep empty tracks instead of stretching a sparse row. Defaults to false. */\n        autoFill?: boolean;\n      }\n  );\n\n/** Render equal tracks with a fixed count or a responsive minimum width. */\nexport function Grid({\n  children,\n  selectionMode,\n  ariaLabel,\n  columns,\n  minColumnWidth,\n  autoFill = false,\n  gap = 'xs',\n  flex = false,\n  fill = false,\n  textInsets = '',\n  controlInsets = '',\n  className = '',\n  rootAttributes = {},\n  slot,\n}: GridProps) {\n  if (selectionMode === 'multiple' && !ariaLabel) {\n    throw new Error('Multi-select Grid requires an ariaLabel');\n  }\n  if (minColumnWidth !== undefined && columns !== undefined) {\n    throw new RangeError(\n      'Grid columns and minColumnWidth are mutually exclusive',\n    );\n  }\n  if (autoFill && minColumnWidth === undefined) {\n    throw new RangeError('Grid autoFill requires minColumnWidth');\n  }\n  if (\n    minColumnWidth === undefined &&\n    (columns === undefined || !Number.isSafeInteger(columns) || columns < 1)\n  ) {\n    throw new RangeError('Grid columns must be a positive safe integer');\n  }\n\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    gridProtectedAttributes,\n  );\n  const gapStyle =\n    typeof gap === 'string'\n      ? `--_kui-grid-gap:${gapLength(gap)}`\n      : `--_kui-grid-column-gap:${gapLength(gap.column)};--_kui-grid-row-gap:${gapLength(gap.row)}`;\n  const flexValue = flex === true ? '1 1 auto' : flex || undefined;\n  const style = [\n    columns === undefined ? '' : `--_kui-grid-columns:${columns}`,\n    minColumnWidth === undefined\n      ? ''\n      : `--_kui-grid-min-column-width:${minColumnWidth}`,\n    gapStyle,\n    flexValue ? `--_kui-grid-flex:${flexValue}` : '',\n  ]\n    .filter(Boolean)\n    .join(';');\n\n  return (\n    <div\n      {...safeRootAttributes}\n      class={`kui-grid ${className}`.trim()}\n      data-component=\"grid\"\n      role={selectionMode === 'multiple' ? 'grid' : undefined}\n      aria-label={selectionMode === 'multiple' ? ariaLabel : undefined}\n      aria-multiselectable={selectionMode === 'multiple' ? 'true' : undefined}\n      data-columns={columns === undefined ? undefined : String(columns)}\n      data-min-column-width={minColumnWidth === undefined ? undefined : 'true'}\n      data-auto-fill={autoFill ? 'true' : undefined}\n      data-flex={String(Boolean(flex))}\n      data-fill={fill ? 'true' : undefined}\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 { 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"]}

package/dist/chunk-KH4KEMSP.js

@@ -0,0 +1,71 @@
+// src/shared/dom/extension-attributes.ts
+var DATA_ATTRIBUTE_NAME = /^data-[a-z0-9_.:-]+$/;
+var POPOVER_TARGET_ACTIONS = /* @__PURE__ */ new Set(["toggle", "show", "hide"]);
+var ARIA_HASPOPUP_VALUES = /* @__PURE__ */ new Set([
+  "dialog",
+  "menu",
+  "listbox",
+  "tree",
+  "grid",
+  "true"
+]);
+function filterDataAttributes(attributes, protectedNames) {
+  const filtered = {};
+  for (const [name, value] of Object.entries(attributes)) {
+    const normalizedName = name.toLowerCase();
+    if (typeof value === "string" && DATA_ATTRIBUTE_NAME.test(normalizedName) && !protectedNames.has(normalizedName)) {
+      filtered[normalizedName] = value;
+    }
+  }
+  return filtered;
+}
+var ARIA_ATTRIBUTE_NAME = /^aria-[a-z]+$/;
+var STRUCTURAL_ROOT_ROLES = [
+  "region",
+  "group",
+  "list",
+  "feed",
+  "log",
+  "status",
+  "note",
+  "article",
+  "navigation",
+  "complementary",
+  "search",
+  "form",
+  "presentation",
+  "none"
+];
+var STRUCTURAL_ROLES = new Set(STRUCTURAL_ROOT_ROLES);
+function filterRootAttributes(attributes, protectedNames) {
+  const filtered = filterDataAttributes(attributes, protectedNames);
+  for (const [name, value] of Object.entries(attributes)) {
+    const normalizedName = name.toLowerCase();
+    if (typeof value !== "string" || protectedNames.has(normalizedName))
+      continue;
+    if (ARIA_ATTRIBUTE_NAME.test(normalizedName))
+      filtered[normalizedName] = value;
+    else if (normalizedName === "role" && STRUCTURAL_ROLES.has(value))
+      filtered.role = value;
+  }
+  return filtered;
+}
+function filterControlAttributes(attributes, protectedDataNames) {
+  const source = attributes;
+  const filtered = filterDataAttributes(attributes, protectedDataNames);
+  if (typeof source.popoverTarget === "string")
+    filtered.popoverTarget = source.popoverTarget;
+  if (POPOVER_TARGET_ACTIONS.has(source.popoverTargetAction)) {
+    filtered.popoverTargetAction = source.popoverTargetAction;
+  }
+  if (typeof source["aria-controls"] === "string")
+    filtered["aria-controls"] = source["aria-controls"];
+  if (ARIA_HASPOPUP_VALUES.has(source["aria-haspopup"])) {
+    filtered["aria-haspopup"] = source["aria-haspopup"];
+  }
+  return filtered;
+}
+
+export { filterControlAttributes, filterDataAttributes, filterRootAttributes };
+
+//# sourceMappingURL=chunk-KH4KEMSP.js.map

package/dist/chunk-KH4KEMSP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/dom/extension-attributes.ts"],"names":[],"mappings":"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","file":"chunk-KH4KEMSP.js","sourcesContent":["type AttributeBag = Readonly<Record<string, unknown>>;\n\nconst DATA_ATTRIBUTE_NAME = /^data-[a-z0-9_.:-]+$/;\nconst POPOVER_TARGET_ACTIONS = new Set(['toggle', 'show', 'hide']);\nconst ARIA_HASPOPUP_VALUES = new Set([\n  'dialog',\n  'menu',\n  'listbox',\n  'tree',\n  'grid',\n  'true',\n]);\n\nexport function filterDataAttributes(\n  attributes: object,\n  protectedNames: ReadonlySet<string>,\n): Record<string, string> {\n  const filtered: Record<string, string> = {};\n\n  for (const [name, value] of Object.entries(attributes as AttributeBag)) {\n    const normalizedName = name.toLowerCase();\n    if (\n      typeof value === 'string' &&\n      DATA_ATTRIBUTE_NAME.test(normalizedName) &&\n      !protectedNames.has(normalizedName)\n    ) {\n      filtered[normalizedName] = value;\n    }\n  }\n\n  return filtered;\n}\n\nconst ARIA_ATTRIBUTE_NAME = /^aria-[a-z]+$/;\n\n/**\n * Non-widget roles an application may give a layout root: landmarks, named\n * regions, groups, and live regions. Widget roles (button, grid, listbox, …)\n * promise keyboard behavior a layout primitive does not provide.\n */\nexport const STRUCTURAL_ROOT_ROLES = [\n  'region',\n  'group',\n  'list',\n  'feed',\n  'log',\n  'status',\n  'note',\n  'article',\n  'navigation',\n  'complementary',\n  'search',\n  'form',\n  'presentation',\n  'none',\n] as const;\nexport type StructuralRootRole = (typeof STRUCTURAL_ROOT_ROLES)[number];\nconst STRUCTURAL_ROLES = new Set<string>(STRUCTURAL_ROOT_ROLES);\n\n/** Safe `data-*`, `aria-*`, and structural `role` metadata on a layout root. */\nexport type StructuralRootAttributes = Readonly<\n  Record<`data-${string}` | `aria-${string}`, string | undefined> & {\n    role?: StructuralRootRole;\n  }\n>;\n\n/**\n * `filterDataAttributes` plus `aria-*` string attributes and a structural\n * `role`, for layout roots an application names or marks as a region.\n */\nexport function filterRootAttributes(\n  attributes: object,\n  protectedNames: ReadonlySet<string>,\n): Record<string, string> {\n  const filtered = filterDataAttributes(attributes, protectedNames);\n  for (const [name, value] of Object.entries(attributes as AttributeBag)) {\n    const normalizedName = name.toLowerCase();\n    if (typeof value !== 'string' || protectedNames.has(normalizedName))\n      continue;\n    if (ARIA_ATTRIBUTE_NAME.test(normalizedName))\n      filtered[normalizedName] = value;\n    else if (normalizedName === 'role' && STRUCTURAL_ROLES.has(value))\n      filtered.role = value;\n  }\n  return filtered;\n}\n\nexport function filterControlAttributes(\n  attributes: object,\n  protectedDataNames: ReadonlySet<string>,\n): Record<string, string> {\n  const source = attributes as AttributeBag;\n  const filtered = filterDataAttributes(attributes, protectedDataNames);\n\n  if (typeof source.popoverTarget === 'string')\n    filtered.popoverTarget = source.popoverTarget;\n  if (POPOVER_TARGET_ACTIONS.has(source.popoverTargetAction as string)) {\n    filtered.popoverTargetAction = source.popoverTargetAction as string;\n  }\n  if (typeof source['aria-controls'] === 'string')\n    filtered['aria-controls'] = source['aria-controls'];\n  if (ARIA_HASPOPUP_VALUES.has(source['aria-haspopup'] as string)) {\n    filtered['aria-haspopup'] = source['aria-haspopup'] as string;\n  }\n\n  return filtered;\n}\n"]}

package/dist/chunk-LL45C7BB.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-LL45C7BB.js.map

package/dist/chunk-LL45C7BB.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-LL45C7BB.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';\nexport type TextSize = 'compact' | 'default' | '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-LOSRXZAH.js

@@ -0,0 +1,100 @@
+import { remify } from './chunk-IQSRHXZR.js';
+import { jsx, Fragment } from 'kerfjs/jsx-runtime';
+
+var lucideIconSizePixels = {
+  xs: 12,
+  s: 16,
+  m: 20,
+  l: 24,
+  xl: 32
+};
+var childMarkup = /* @__PURE__ */ new WeakMap();
+function renderChildren(icon) {
+  const cached = childMarkup.get(icon);
+  if (cached) return cached;
+  let cacheable = true;
+  const markup = jsx(Fragment, {
+    children: icon.map(([tag, attrs]) => {
+      for (const value of Object.values(attrs))
+        if (typeof value !== "string" && typeof value !== "number")
+          cacheable = false;
+      return jsx(tag, attrs);
+    })
+  });
+  if (cacheable) childMarkup.set(icon, markup);
+  return markup;
+}
+var iconMarkup = /* @__PURE__ */ new WeakMap();
+var LUCIDE_ICON_VARIANT_LIMIT = 64;
+function variantKey(parts) {
+  return parts.map((part) => part === void 0 ? "
" : String(part)).join("\0");
+}
+function LucideIcon({
+  icon,
+  name,
+  appearance = "outline",
+  className,
+  color,
+  inline = false,
+  label,
+  size,
+  slot
+}) {
+  if (typeof size === "number" && (!Number.isFinite(size) || size <= 0))
+    throw new RangeError(
+      "LucideIcon size must be a positive finite pixel value"
+    );
+  if (typeof size === "string" && !Object.hasOwn(lucideIconSizePixels, size))
+    throw new RangeError("LucideIcon size must use a named icon step");
+  const key = variantKey([
+    name,
+    appearance,
+    className,
+    color,
+    inline,
+    label,
+    size,
+    slot
+  ]);
+  const variants = iconMarkup.get(icon);
+  const cached = variants?.get(key);
+  if (cached) return cached;
+  const pixels = typeof size === "number" ? size : size && lucideIconSizePixels[size];
+  const slotAttribute = { slot };
+  const markup = /* @__PURE__ */ jsx(
+    "svg",
+    {
+      ...slotAttribute,
+      class: className,
+      "data-lucide": name,
+      "data-inline": inline ? "true" : void 0,
+      "data-size": size === void 0 ? void 0 : String(size),
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : "true",
+      viewBox: "0 0 24 24",
+      fill: appearance === "solid" ? "currentColor" : "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      style: [
+        pixels === void 0 ? void 0 : `--_kui-lucide-size:${remify(pixels)}`,
+        color === void 0 ? void 0 : `color:${color}`
+      ].filter(Boolean).join(";") || void 0,
+      children: renderChildren(icon)
+    }
+  );
+  if (childMarkup.has(icon)) {
+    const known = variants ?? /* @__PURE__ */ new Map();
+    if (!variants) iconMarkup.set(icon, known);
+    if (known.size >= LUCIDE_ICON_VARIANT_LIMIT)
+      known.delete(known.keys().next().value);
+    known.set(key, markup);
+  }
+  return markup;
+}
+
+export { LucideIcon };
+
+//# sourceMappingURL=chunk-LOSRXZAH.js.map

package/dist/chunk-LOSRXZAH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/media/lucide-icon/lucide-icon.tsx"],"names":["jsx"],"mappings":"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","file":"chunk-LOSRXZAH.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport { Fragment, jsx } from 'kerfjs/jsx-runtime';\nimport type { IconNode } from 'lucide';\n\nimport type { CssForegroundColor } from '../../../shared/styles/css-values.js';\nimport { remify } from '../../../shared/styles/css-values.js';\n\nexport type LucideNode = IconNode;\nexport type LucideIconSize = 'xs' | 's' | 'm' | 'l' | 'xl' | number;\n\nconst lucideIconSizePixels = {\n  xs: 12,\n  s: 16,\n  m: 20,\n  l: 24,\n  xl: 32,\n} as const satisfies Record<Exclude<LucideIconSize, number>, number>;\n\nexport interface LucideIconProps {\n  icon: LucideNode;\n  name: string;\n  /** Outline by default; solid fills compatible glyphs with the current text color. */\n  appearance?: 'outline' | 'solid';\n  className?: string;\n  /** Foreground color; omit to inherit the surrounding text color. */\n  color?: CssForegroundColor;\n  /** Flow with surrounding text instead of occupying a block. */\n  inline?: boolean;\n  label?: string;\n  /** Named icon scale or positive pixel size, converted to rem. Omit for 1em. */\n  size?: LucideIconSize;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * Each icon node's rendered child markup. Lucide icon nodes are module-level\n * constants, so a list that re-renders the same glyph in every row serializes\n * (validates, screens, and escapes) its path data once instead of per render.\n * Keyed by node identity and held weakly, so an app-built node is collected\n * with it; treat a node as immutable once rendered. A node carrying anything\n * but string or number attribute values (outside the `IconNode` type) is\n * rendered fresh every time.\n */\nconst childMarkup = new WeakMap<LucideNode, SafeHtml>();\n\nfunction renderChildren(icon: LucideNode): SafeHtml {\n  const cached = childMarkup.get(icon);\n  if (cached) return cached;\n  let cacheable = true;\n  const markup = jsx(Fragment, {\n    children: icon.map(([tag, attrs]) => {\n      for (const value of Object.values(attrs))\n        if (typeof value !== 'string' && typeof value !== 'number')\n          cacheable = false;\n      return jsx(tag, attrs);\n    }),\n  });\n  if (cacheable) childMarkup.set(icon, markup);\n  return markup;\n}\n\n/**\n * Each icon node's rendered icons, by their props. Rows that re-render the\n * same glyph with the same props get the identical `SafeHtml` back instead of\n * rebuilding the `<svg>` wrapper, and consumers that hash or compare icon\n * markup (PopupMenu's content key) see one string object. Bounded per node,\n * because a per-row `label` would otherwise grow it with the list; past the\n * bound the oldest variant is evicted. Only nodes whose child markup is\n * cacheable are cached.\n */\nconst iconMarkup = new WeakMap<LucideNode, Map<string, SafeHtml>>();\n\n/** Most rendered variants remembered per icon node. */\nconst LUCIDE_ICON_VARIANT_LIMIT = 64;\n\nfunction variantKey(parts: readonly (string | number | boolean | undefined)[]) {\n  // U+0001 marks an omitted prop so it never equals an empty string.\n  return parts\n    .map((part) => (part === undefined ? '\\u0001' : String(part)))\n    .join('\\u0000');\n}\n\n/** Render a Lucide-compatible icon node without copying icon SVG strings. */\nexport function LucideIcon({\n  icon,\n  name,\n  appearance = 'outline',\n  className,\n  color,\n  inline = false,\n  label,\n  size,\n  slot,\n}: LucideIconProps) {\n  if (typeof size === 'number' && (!Number.isFinite(size) || size <= 0))\n    throw new RangeError(\n      'LucideIcon size must be a positive finite pixel value',\n    );\n  if (typeof size === 'string' && !Object.hasOwn(lucideIconSizePixels, size))\n    throw new RangeError('LucideIcon size must use a named icon step');\n  const key = variantKey([\n    name,\n    appearance,\n    className,\n    color,\n    inline,\n    label,\n    size,\n    slot,\n  ]);\n  const variants = iconMarkup.get(icon);\n  const cached = variants?.get(key);\n  if (cached) return cached;\n  const pixels =\n    typeof size === 'number' ? size : size && lucideIconSizePixels[size];\n  const slotAttribute = { slot };\n  const markup = (\n    <svg\n      {...slotAttribute}\n      class={className}\n      data-lucide={name}\n      data-inline={inline ? 'true' : undefined}\n      data-size={size === undefined ? undefined : String(size)}\n      role={label ? 'img' : undefined}\n      aria-label={label}\n      aria-hidden={label ? undefined : 'true'}\n      viewBox=\"0 0 24 24\"\n      fill={appearance === 'solid' ? 'currentColor' : 'none'}\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      style={\n        [\n          pixels === undefined\n            ? undefined\n            : `--_kui-lucide-size:${remify(pixels)}`,\n          color === undefined ? undefined : `color:${color}`,\n        ]\n          .filter(Boolean)\n          .join(';') || undefined\n      }\n    >\n      {renderChildren(icon)}\n    </svg>\n  );\n  if (childMarkup.has(icon)) {\n    const known = variants ?? new Map<string, SafeHtml>();\n    if (!variants) iconMarkup.set(icon, known);\n    if (known.size >= LUCIDE_ICON_VARIANT_LIMIT)\n      known.delete(known.keys().next().value!);\n    known.set(key, markup);\n  }\n  return markup;\n}\n"]}

package/dist/chunk-LPHU44S3.js

@@ -0,0 +1,24 @@
+// src/components/layout/pane/internal/pane-config-props.ts
+function paneConfigProps(config) {
+  return {
+    contentElement: config?.contentElement,
+    contentLabel: config?.contentLabel,
+    separators: config?.separators,
+    safeAreaEdges: config?.safeAreaEdges,
+    chromeDividers: config?.chromeDividers,
+    headerPresentation: config?.headerPresentation,
+    scrollEdge: config?.scrollEdge,
+    scrollEdgeDistance: config?.scrollEdgeDistance,
+    appearance: config?.appearance,
+    background: config?.background,
+    tint: config?.tint,
+    deepInset: config?.deepInset,
+    scrollClearance: config?.scrollClearance,
+    tabIndex: config?.tabIndex,
+    outlined: config?.outlined
+  };
+}
+
+export { paneConfigProps };
+
+//# sourceMappingURL=chunk-LPHU44S3.js.map

package/dist/chunk-LPHU44S3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/pane/internal/pane-config-props.ts"],"names":[],"mappings":";AAgBO,SAAS,gBACd,MAAA,EACqB;AACrB,EAAA,OAAO;AAAA,IACL,gBAAgB,MAAA,EAAQ,cAAA;AAAA,IACxB,cAAc,MAAA,EAAQ,YAAA;AAAA,IACtB,YAAY,MAAA,EAAQ,UAAA;AAAA,IACpB,eAAe,MAAA,EAAQ,aAAA;AAAA,IACvB,gBAAgB,MAAA,EAAQ,cAAA;AAAA,IACxB,oBAAoB,MAAA,EAAQ,kBAAA;AAAA,IAC5B,YAAY,MAAA,EAAQ,UAAA;AAAA,IACpB,oBAAoB,MAAA,EAAQ,kBAAA;AAAA,IAC5B,YAAY,MAAA,EAAQ,UAAA;AAAA,IACpB,YAAY,MAAA,EAAQ,UAAA;AAAA,IACpB,MAAM,MAAA,EAAQ,IAAA;AAAA,IACd,WAAW,MAAA,EAAQ,SAAA;AAAA,IACnB,iBAAiB,MAAA,EAAQ,eAAA;AAAA,IACzB,UAAU,MAAA,EAAQ,QAAA;AAAA,IAClB,UAAU,MAAA,EAAQ;AAAA,GACpB;AACF","file":"chunk-LPHU44S3.js","sourcesContent":["import type { PaneConfig } from '../pane.js';\n\n/**\n * Every {@link PaneConfig} field, each present (possibly `undefined`). The\n * mapped type makes a new `PaneConfig` field a type error here until it is\n * forwarded, so a composite can never silently drop pane configuration.\n */\ntype ForwardedPaneConfig = {\n  [K in keyof Required<PaneConfig>]: PaneConfig[K];\n};\n\n/**\n * The `Pane` props a composite (a Workbench panel or work area, a\n * CollapsiblePanel, a NavStack view) forwards from the app's `PaneConfig`. An\n * omitted or `undefined` field stays `undefined`, so the Pane keeps its default.\n */\nexport function paneConfigProps(\n  config: PaneConfig | undefined,\n): ForwardedPaneConfig {\n  return {\n    contentElement: config?.contentElement,\n    contentLabel: config?.contentLabel,\n    separators: config?.separators,\n    safeAreaEdges: config?.safeAreaEdges,\n    chromeDividers: config?.chromeDividers,\n    headerPresentation: config?.headerPresentation,\n    scrollEdge: config?.scrollEdge,\n    scrollEdgeDistance: config?.scrollEdgeDistance,\n    appearance: config?.appearance,\n    background: config?.background,\n    tint: config?.tint,\n    deepInset: config?.deepInset,\n    scrollClearance: config?.scrollClearance,\n    tabIndex: config?.tabIndex,\n    outlined: config?.outlined,\n  };\n}\n"]}

package/dist/chunk-M5KZ26VV.js

@@ -0,0 +1,148 @@
+import { surfaceTintAttributes, scrollEdgeAttributes, joinStyles } from './chunk-SQ5DH66U.js';
+import { ensureSunkenTexture } from './chunk-IKS72C6P.js';
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
+
+var paneProtectedAttributes = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-chrome-placement",
+  "data-chrome-dividers",
+  "data-appearance",
+  "data-background",
+  "data-kui-tint",
+  "data-kui-tint-accent",
+  "data-deep-inset",
+  "data-outlined",
+  "data-scroll-clearance",
+  "data-header-presentation",
+  "data-header-material",
+  "data-scroll-edge",
+  "data-scroll-edge-distance",
+  "data-header-overlay",
+  "data-separator-block-start",
+  "data-separator-block-end",
+  "data-separator-inline-start",
+  "data-separator-inline-end",
+  "data-safe-area-block-start",
+  "data-safe-area-block-end",
+  "data-safe-area-inline-start",
+  "data-safe-area-inline-end"
+]);
+var allPaneSides = [
+  "block-start",
+  "block-end",
+  "inline-start",
+  "inline-end"
+];
+function paneContent(element, children, className, label) {
+  const attributes = {
+    class: `kui-pane__content kui-content ${className}`.trim(),
+    "aria-label": label
+  };
+  if (element === "main") return /* @__PURE__ */ jsx("main", { ...attributes, children });
+  if (element === "nav") return /* @__PURE__ */ jsx("nav", { ...attributes, children });
+  if (element === "section")
+    return /* @__PURE__ */ jsx("section", { ...attributes, children });
+  return /* @__PURE__ */ jsx("div", { ...attributes, children });
+}
+function Pane({
+  header,
+  children,
+  footer,
+  chromePlacement = "fixed",
+  chromeDividers,
+  headerPresentation = "docked",
+  scrollEdge = "none",
+  scrollEdgeDistance,
+  appearance = "default",
+  background,
+  tint,
+  deepInset = false,
+  scrollClearance,
+  tabIndex,
+  outlined = false,
+  element = "div",
+  contentElement = "div",
+  separators = [],
+  safeAreaEdges = allPaneSides,
+  id,
+  label,
+  contentLabel,
+  className = "",
+  headerClassName = "",
+  contentClassName = "",
+  footerClassName = "",
+  rootAttributes = {},
+  slot
+}) {
+  const safeRootAttributes = filterDataAttributes(
+    rootAttributes,
+    paneProtectedAttributes
+  );
+  const content = paneContent(
+    contentElement,
+    children,
+    contentClassName,
+    contentLabel
+  );
+  const resolvedChromeDividers = chromeDividers ?? (appearance === "sunken" ? "always" : "scroll");
+  if (appearance === "sunken" && background === void 0)
+    ensureSunkenTexture();
+  const tinted = surfaceTintAttributes(tint);
+  const clearHeader = headerPresentation === "clear" && header !== void 0;
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    header === void 0 ? null : /* @__PURE__ */ jsx(
+      "header",
+      {
+        class: `kui-pane__header kui-pane__toolbar ${headerClassName}`.trim(),
+        children: header
+      }
+    ),
+    content,
+    footer === void 0 ? null : /* @__PURE__ */ jsx("footer", { class: `kui-pane__footer ${footerClassName}`.trim(), children: footer })
+  ] });
+  const attributes = {
+    ...safeRootAttributes,
+    class: `kui-pane ${tinted.className} ${className}`.replace(/\s+/g, " ").trim(),
+    id,
+    "data-component": "pane",
+    "data-appearance": appearance === "sunken" ? "sunken" : void 0,
+    "data-background": background === void 0 ? void 0 : "",
+    "data-kui-tint": tinted["data-kui-tint"],
+    "data-kui-tint-accent": tinted["data-kui-tint-accent"],
+    style: joinStyles(
+      background === void 0 ? void 0 : `--_kui-pane-background:${background}`,
+      tinted.style
+    ),
+    "data-deep-inset": deepInset ? "true" : void 0,
+    "data-outlined": outlined ? "true" : void 0,
+    "data-scroll-clearance": scrollClearance,
+    "data-header-presentation": headerPresentation !== "docked" && header !== void 0 ? "overlay" : void 0,
+    "data-header-material": clearHeader ? "clear" : void 0,
+    ...scrollEdgeAttributes(scrollEdge, scrollEdgeDistance, clearHeader),
+    "data-chrome-placement": chromePlacement === "auto" ? "auto" : void 0,
+    "data-chrome-dividers": resolvedChromeDividers === "always" || resolvedChromeDividers === "none" ? resolvedChromeDividers : void 0,
+    "data-separator-block-start": String(separators.includes("block-start")),
+    "data-separator-block-end": String(separators.includes("block-end")),
+    "data-separator-inline-start": String(separators.includes("inline-start")),
+    "data-separator-inline-end": String(separators.includes("inline-end")),
+    "data-safe-area-block-start": String(safeAreaEdges.includes("block-start")),
+    "data-safe-area-block-end": String(safeAreaEdges.includes("block-end")),
+    "data-safe-area-inline-start": String(
+      safeAreaEdges.includes("inline-start")
+    ),
+    "data-safe-area-inline-end": String(safeAreaEdges.includes("inline-end")),
+    "aria-label": label,
+    tabindex: tabIndex,
+    slot
+  };
+  if (element === "article") return /* @__PURE__ */ jsx("article", { ...attributes, children: body });
+  if (element === "aside") return /* @__PURE__ */ jsx("aside", { ...attributes, children: body });
+  if (element === "main") return /* @__PURE__ */ jsx("main", { ...attributes, children: body });
+  if (element === "section") return /* @__PURE__ */ jsx("section", { ...attributes, children: body });
+  return /* @__PURE__ */ jsx("div", { ...attributes, children: body });
+}
+
+export { Pane };
+
+//# sourceMappingURL=chunk-M5KZ26VV.js.map