@kerfjs/ui 5.0.0-beta.4 → 5.0.0-beta.41

package/dist/chunk-OL4TC3U2.js

@@ -0,0 +1,156 @@
+// src/css-values.ts
+var uiColorNames = [
+  "accent",
+  "accent-text",
+  "border",
+  "border-quiet",
+  "brand-border-loud",
+  "brand-border-normal",
+  "brand-border-quiet",
+  "brand-fill-loud",
+  "brand-fill-normal",
+  "brand-fill-quiet",
+  "brand-on-fill",
+  "brand-on-loud",
+  "brand-on-normal",
+  "brand-on-quiet",
+  "danger",
+  "danger-border-loud",
+  "danger-border-normal",
+  "danger-border-quiet",
+  "danger-fill-loud",
+  "danger-fill-normal",
+  "danger-fill-quiet",
+  "danger-on-loud",
+  "danger-on-normal",
+  "danger-on-quiet",
+  "danger-text",
+  "neutral-border-loud",
+  "neutral-border-normal",
+  "neutral-border-quiet",
+  "neutral-fill-loud",
+  "neutral-fill-normal",
+  "neutral-fill-quiet",
+  "neutral-on-loud",
+  "neutral-on-normal",
+  "neutral-on-quiet",
+  "pop",
+  "pop-border-loud",
+  "pop-border-normal",
+  "pop-border-quiet",
+  "pop-fill-loud",
+  "pop-fill-normal",
+  "pop-fill-quiet",
+  "pop-on-fill",
+  "pop-on-loud",
+  "pop-on-normal",
+  "pop-on-quiet",
+  "pop-text",
+  "success",
+  "success-border-loud",
+  "success-border-normal",
+  "success-border-quiet",
+  "success-fill-loud",
+  "success-fill-normal",
+  "success-fill-quiet",
+  "success-on-fill",
+  "success-on-loud",
+  "success-on-normal",
+  "success-on-quiet",
+  "success-text",
+  "surface",
+  "surface-lowered",
+  "surface-raised",
+  "text",
+  "text-link",
+  "text-quiet",
+  "warning",
+  "warning-border-loud",
+  "warning-border-normal",
+  "warning-border-quiet",
+  "warning-fill-loud",
+  "warning-fill-normal",
+  "warning-fill-quiet",
+  "warning-on-fill",
+  "warning-on-loud",
+  "warning-on-normal",
+  "warning-on-quiet",
+  "warning-text"
+];
+var spaceVariables = {
+  none: "--kui-space-none",
+  "2xs": "--kui-space-2xs",
+  xs: "--kui-space-xs",
+  s: "--kui-space-s",
+  m: "--kui-space-m",
+  l: "--kui-space-l",
+  xl: "--kui-space-xl"
+};
+function serializeNumber(value, helper) {
+  if (!Number.isFinite(value))
+    throw new RangeError(`${helper}() requires a finite number.`);
+  return String(Object.is(value, -0) ? 0 : value);
+}
+function serializeNonnegativeNumber(value, helper) {
+  const serialized = serializeNumber(value, helper);
+  if (value < 0)
+    throw new RangeError(`${helper}() requires nonnegative flex factors.`);
+  return serialized;
+}
+function validateCustomPropertyName(name, helper, example) {
+  if (!/^--[A-Za-z_][A-Za-z0-9_-]*$/.test(name))
+    throw new TypeError(
+      `${helper}() requires an ASCII custom property name such as ${example}.`
+    );
+}
+function dimension(value, unit, helper) {
+  return `${serializeNumber(value, helper)}${unit}`;
+}
+function px(value) {
+  return dimension(value, "px", "px");
+}
+function rem(value) {
+  return dimension(value, "rem", "rem");
+}
+function em(value) {
+  return dimension(value, "em", "em");
+}
+function pct(value) {
+  return dimension(value, "%", "pct");
+}
+function space(name) {
+  const variable = spaceVariables[name];
+  if (variable === void 0)
+    throw new RangeError(
+      `space() received unknown spacing name ${String(name)}.`
+    );
+  return `var(${variable})`;
+}
+function lengthVar(name, fallback) {
+  validateCustomPropertyName(name, "lengthVar", "--app-gap");
+  return `var(${name}${fallback === void 0 ? "" : `, ${fallback}`})`;
+}
+function plus(first, second, ...rest) {
+  return [first, second, ...rest].join(" + ");
+}
+function calc(expression) {
+  return `calc(${expression})`;
+}
+function flex(grow, shrink = 1, basis = "auto") {
+  return `${serializeNonnegativeNumber(grow, "flex")} ${serializeNonnegativeNumber(shrink, "flex")} ${basis}`;
+}
+function uiColor(name) {
+  if (!uiColorNames.includes(name))
+    throw new RangeError(
+      `uiColor() received unknown color name ${String(name)}.`
+    );
+  return `var(--kui-color-${name})`;
+}
+function colorVar(name, fallback) {
+  validateCustomPropertyName(name, "colorVar", "--app-color");
+  return `var(${name}${fallback === void 0 ? "" : `, ${fallback}`})`;
+}
+
+export { calc, colorVar, em, flex, lengthVar, pct, plus, px, rem, space, uiColor };
+
+//# sourceMappingURL=chunk-OL4TC3U2.js.map

package/dist/chunk-OL4TC3U2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/css-values.ts"],"names":[],"mappings":"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","file":"chunk-OL4TC3U2.js","sourcesContent":["declare const cssValueBrand: unique symbol;\ndeclare const cssLengthBrand: unique symbol;\ndeclare const cssLengthExpressionBrand: unique symbol;\ndeclare const cssFlexBrand: unique symbol;\ndeclare const cssColorBrand: unique symbol;\n\n/**\n * A complete typed CSS value minted by a property-specific Kerf UI builder.\n *\n * This brand is an authoring correctness aid, not a sanitizer or security\n * boundary. Prefer the narrower property grammar, such as {@link CssLength},\n * whenever one is available.\n */\nexport type CssValue = string & {\n  readonly [cssValueBrand]: 'CssValue';\n};\n\n/**\n * A complete CSS length-percentage value suitable for dimension-valued UI\n * props. Despite the concise name, percentages are intentionally included.\n */\nexport type CssLength = CssValue & {\n  readonly [cssLengthBrand]: 'CssLength';\n};\n\n/**\n * An incomplete arithmetic expression. Wrap it with {@link calc} before\n * passing it to a prop that accepts {@link CssLength}.\n */\nexport type CssLengthExpression = string & {\n  readonly [cssLengthExpressionBrand]: 'CssLengthExpression';\n};\n\n/** A complete CSS `flex` shorthand. It is not interchangeable with a length. */\nexport type CssFlex = CssValue & {\n  readonly [cssFlexBrand]: 'CssFlex';\n};\n\n/** A complete CSS color value. It is not interchangeable with a length. */\nexport type CssColor = CssValue & {\n  readonly [cssColorBrand]: 'CssColor';\n};\n\nexport type CssFlexKeyword = 'none' | 'auto' | 'initial';\nexport type CssFlexBasis =\n  | CssLength\n  | 'auto'\n  | 'content'\n  | 'min-content'\n  | 'max-content'\n  | 'fit-content';\nexport type CssSizeKeyword =\n  'auto' | 'min-content' | 'max-content' | 'fit-content';\n/** A complete width/height value accepted by dimension-valued UI props. */\nexport type CssSize = CssLength | CssSizeKeyword;\n\nconst uiColorNames = [\n  'accent',\n  'accent-text',\n  'border',\n  'border-quiet',\n  'brand-border-loud',\n  'brand-border-normal',\n  'brand-border-quiet',\n  'brand-fill-loud',\n  'brand-fill-normal',\n  'brand-fill-quiet',\n  'brand-on-fill',\n  'brand-on-loud',\n  'brand-on-normal',\n  'brand-on-quiet',\n  'danger',\n  'danger-border-loud',\n  'danger-border-normal',\n  'danger-border-quiet',\n  'danger-fill-loud',\n  'danger-fill-normal',\n  'danger-fill-quiet',\n  'danger-on-loud',\n  'danger-on-normal',\n  'danger-on-quiet',\n  'danger-text',\n  'neutral-border-loud',\n  'neutral-border-normal',\n  'neutral-border-quiet',\n  'neutral-fill-loud',\n  'neutral-fill-normal',\n  'neutral-fill-quiet',\n  'neutral-on-loud',\n  'neutral-on-normal',\n  'neutral-on-quiet',\n  'pop',\n  'pop-border-loud',\n  'pop-border-normal',\n  'pop-border-quiet',\n  'pop-fill-loud',\n  'pop-fill-normal',\n  'pop-fill-quiet',\n  'pop-on-fill',\n  'pop-on-loud',\n  'pop-on-normal',\n  'pop-on-quiet',\n  'pop-text',\n  'success',\n  'success-border-loud',\n  'success-border-normal',\n  'success-border-quiet',\n  'success-fill-loud',\n  'success-fill-normal',\n  'success-fill-quiet',\n  'success-on-fill',\n  'success-on-loud',\n  'success-on-normal',\n  'success-on-quiet',\n  'success-text',\n  'surface',\n  'surface-lowered',\n  'surface-raised',\n  'text',\n  'text-link',\n  'text-quiet',\n  'warning',\n  'warning-border-loud',\n  'warning-border-normal',\n  'warning-border-quiet',\n  'warning-fill-loud',\n  'warning-fill-normal',\n  'warning-fill-quiet',\n  'warning-on-fill',\n  'warning-on-loud',\n  'warning-on-normal',\n  'warning-on-quiet',\n  'warning-text',\n] as const;\n\n/** Names of the public `--kui-color-*` semantic tokens. */\nexport type UiColorName = (typeof uiColorNames)[number];\n\n/** Kerf UI's complete spacing-token vocabulary. `s` and `xl` are exceptions. */\nexport type UiSpaceName = 'none' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl';\n\nconst spaceVariables = {\n  none: '--kui-space-none',\n  '2xs': '--kui-space-2xs',\n  xs: '--kui-space-xs',\n  s: '--kui-space-s',\n  m: '--kui-space-m',\n  l: '--kui-space-l',\n  xl: '--kui-space-xl',\n} as const satisfies Record<UiSpaceName, string>;\n\nfunction serializeNumber(value: number, helper: string): string {\n  if (!Number.isFinite(value))\n    throw new RangeError(`${helper}() requires a finite number.`);\n  return String(Object.is(value, -0) ? 0 : value);\n}\n\nfunction serializeNonnegativeNumber(value: number, helper: string): string {\n  const serialized = serializeNumber(value, helper);\n  if (value < 0)\n    throw new RangeError(`${helper}() requires nonnegative flex factors.`);\n  return serialized;\n}\n\nfunction validateCustomPropertyName(\n  name: string,\n  helper: string,\n  example: string,\n): void {\n  if (!/^--[A-Za-z_][A-Za-z0-9_-]*$/.test(name))\n    throw new TypeError(\n      `${helper}() requires an ASCII custom property name such as ${example}.`,\n    );\n}\n\nfunction dimension(value: number, unit: string, helper: string): CssLength {\n  return `${serializeNumber(value, helper)}${unit}` as CssLength;\n}\n\n/** Create a complete pixel length. */\nexport function px(value: number): CssLength {\n  return dimension(value, 'px', 'px');\n}\n\n/** Create a complete root-font-relative length. */\nexport function rem(value: number): CssLength {\n  return dimension(value, 'rem', 'rem');\n}\n\n/** Create a complete current-font-relative length. */\nexport function em(value: number): CssLength {\n  return dimension(value, 'em', 'em');\n}\n\n/** Create a complete percentage length. */\nexport function pct(value: number): CssLength {\n  return dimension(value, '%', 'pct');\n}\n\n/** Resolve a Kerf UI spacing step to its public custom property. */\nexport function space(name: UiSpaceName): CssLength {\n  const variable = spaceVariables[name];\n  if (variable === undefined)\n    throw new RangeError(\n      `space() received unknown spacing name ${String(name)}.`,\n    );\n  return `var(${variable})` as CssLength;\n}\n\n/**\n * Reference an application-owned custom property whose contract is a CSS\n * length-percentage. The deliberately narrow name grammar keeps this helper\n * from becoming an arbitrary CSS-string constructor.\n */\nexport function lengthVar(\n  name: `--${string}`,\n  fallback?: CssLength,\n): CssLength {\n  validateCustomPropertyName(name, 'lengthVar', '--app-gap');\n  return `var(${name}${fallback === undefined ? '' : `, ${fallback}`})` as CssLength;\n}\n\n/** Combine two or more complete lengths into a non-standalone sum. */\nexport function plus(\n  first: CssLength,\n  second: CssLength,\n  ...rest: readonly CssLength[]\n): CssLengthExpression {\n  return [first, second, ...rest].join(' + ') as CssLengthExpression;\n}\n\n/** Turn a typed length expression into a complete CSS `calc()` value. */\nexport function calc(expression: CssLengthExpression): CssLength {\n  return `calc(${expression})` as CssLength;\n}\n\n/** Build a complete, structured CSS flex shorthand. */\nexport function flex(\n  grow: number,\n  shrink = 1,\n  basis: CssFlexBasis = 'auto',\n): CssFlex {\n  return `${serializeNonnegativeNumber(grow, 'flex')} ${serializeNonnegativeNumber(shrink, 'flex')} ${basis}` as CssFlex;\n}\n\n/** Resolve a public Kerf UI semantic color token. */\nexport function uiColor(name: UiColorName): CssColor {\n  if (!(uiColorNames as readonly string[]).includes(name))\n    throw new RangeError(\n      `uiColor() received unknown color name ${String(name)}.`,\n    );\n  return `var(--kui-color-${name})` as CssColor;\n}\n\n/** Reference an application-owned custom property whose contract is a color. */\nexport function colorVar(name: `--${string}`, fallback?: CssColor): CssColor {\n  validateCustomPropertyName(name, 'colorVar', '--app-color');\n  return `var(${name}${fallback === undefined ? '' : `, ${fallback}`})` as CssColor;\n}\n"]}

package/dist/chunk-OMSRSL3B.js

@@ -0,0 +1,120 @@
+import { filterDataAttributes } from './chunk-SRSJO5QE.js';
+import { Skeleton } from './chunk-T7DOWS6T.js';
+import { em } from './chunk-OL4TC3U2.js';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-action",
+  "data-tab-id",
+  "data-selected",
+  "data-tab-dragging",
+  "data-tab-drop-position"
+]);
+function CloseIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2.25",
+      "stroke-linecap": "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "m7 7 10 10" }),
+        /* @__PURE__ */ jsx("path", { d: "M17 7 7 17" })
+      ]
+    }
+  );
+}
+function AppTab({
+  id,
+  name,
+  selected = false,
+  closable = true,
+  draggable = false,
+  leading,
+  trailing,
+  presentation = "pill",
+  size = "default",
+  labelMaxWidth,
+  closeIcon,
+  selectAction = "select-tab",
+  closeAction = "close-tab",
+  className = "",
+  placeholder = false,
+  rootAttributes = {}
+}) {
+  const keyshortcuts = [
+    closable ? "Delete Backspace" : "",
+    draggable ? "Alt+Shift+ArrowLeft Alt+Shift+ArrowRight" : ""
+  ].filter(Boolean).join(" ");
+  const extensionAttributes = filterDataAttributes(
+    rootAttributes,
+    PROTECTED_ROOT_DATA_ATTRIBUTES
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...extensionAttributes,
+      class: `kui-app-tab ${className}`.trim(),
+      "data-component": "app-tab",
+      "data-tab-id": id,
+      "data-selected": String(selected),
+      "data-presentation": presentation,
+      "data-size": size,
+      "data-placeholder": placeholder ? "true" : void 0,
+      draggable: placeholder ? "false" : draggable ? "true" : "false",
+      "aria-busy": placeholder ? "true" : void 0,
+      style: labelMaxWidth === void 0 ? void 0 : `--kui-app-tab-label-max-width:${labelMaxWidth}px`,
+      children: [
+        closable && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabindex: "-1",
+            class: "kui-app-tab__close",
+            "data-action": placeholder ? void 0 : closeAction,
+            "data-tab-id": id,
+            disabled: placeholder || void 0,
+            "aria-label": `Close ${name}`,
+            title: `Close ${name}`,
+            children: /* @__PURE__ */ jsx("span", { class: "kui-app-tab__close-icon", "aria-hidden": "true", children: closeIcon ?? /* @__PURE__ */ jsx(CloseIcon, {}) })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            class: "kui-app-tab__select",
+            role: "tab",
+            "aria-selected": String(selected),
+            "aria-label": presentation === "icon-only" ? name : void 0,
+            "aria-keyshortcuts": placeholder ? void 0 : keyshortcuts || void 0,
+            "data-action": placeholder ? void 0 : selectAction,
+            "data-tab-id": id,
+            disabled: placeholder || void 0,
+            tabindex: placeholder ? "-1" : selected ? "0" : "-1",
+            children: [
+              leading,
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  class: "kui-app-tab__name",
+                  "aria-hidden": presentation === "icon-only" ? "true" : void 0,
+                  children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: em(7) }) : name
+                }
+              ),
+              closable || trailing ? /* @__PURE__ */ jsx("span", { class: "kui-app-tab__trailing", children: trailing }) : void 0
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { AppTab };
+
+//# sourceMappingURL=chunk-OMSRSL3B.js.map

package/dist/chunk-OMSRSL3B.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/app-tab.tsx"],"names":[],"mappings":"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","file":"chunk-OMSRSL3B.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { em } from './css-values.js';\nimport { filterDataAttributes } from './extension-attributes.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport { Skeleton } from './skeleton.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-tab-id',\n  'data-selected',\n  'data-tab-dragging',\n  'data-tab-drop-position',\n]);\n\ntype AppTabRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-tab-id'?: never;\n    'data-selected'?: never;\n    'data-tab-dragging'?: never;\n    'data-tab-drop-position'?: never;\n  }\n>;\n\nexport type AppTabPresentation = 'pill' | 'segmented' | 'icon-only';\nexport type AppTabSize = 'default' | 'compact';\n\nexport interface AppTabProps {\n  id: string;\n  name: string;\n  selected?: boolean;\n  closable?: boolean;\n  draggable?: boolean;\n  leading?: KerfUiContent;\n  trailing?: KerfUiContent;\n  /** Visual treatment within a TabBar. Icon-only tabs retain `name` as their accessible name. */\n  presentation?: AppTabPresentation;\n  /** Compact tabs use the 32px application-rail height. */\n  size?: AppTabSize;\n  /** Maximum visible label width in CSS pixels before ellipsis. */\n  labelMaxWidth?: number;\n  /** Decorative dormant content for the close button. Must not contain interactive descendants. */\n  closeIcon?: SafeHtml;\n  selectAction?: string;\n  closeAction?: string;\n  className?: string;\n  /** Render as an unanimated loading skeleton, disabling select/close and dragging. */\n  placeholder?: boolean;\n  rootAttributes?: AppTabRootAttributes;\n}\n\nfunction CloseIcon() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2.25\"\n      stroke-linecap=\"round\"\n    >\n      <path d=\"m7 7 10 10\"></path>\n      <path d=\"M17 7 7 17\"></path>\n    </svg>\n  );\n}\n\nexport function AppTab({\n  id,\n  name,\n  selected = false,\n  closable = true,\n  draggable = false,\n  leading,\n  trailing,\n  presentation = 'pill',\n  size = 'default',\n  labelMaxWidth,\n  closeIcon,\n  selectAction = 'select-tab',\n  closeAction = 'close-tab',\n  className = '',\n  placeholder = false,\n  rootAttributes = {},\n}: AppTabProps) {\n  const keyshortcuts = [\n    closable ? 'Delete Backspace' : '',\n    draggable ? 'Alt+Shift+ArrowLeft Alt+Shift+ArrowRight' : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n  const extensionAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  return (\n    <div\n      {...extensionAttributes}\n      class={`kui-app-tab ${className}`.trim()}\n      data-component=\"app-tab\"\n      data-tab-id={id}\n      data-selected={String(selected)}\n      data-presentation={presentation}\n      data-size={size}\n      data-placeholder={placeholder ? 'true' : undefined}\n      draggable={placeholder ? 'false' : draggable ? 'true' : 'false'}\n      aria-busy={placeholder ? 'true' : undefined}\n      style={\n        labelMaxWidth === undefined\n          ? undefined\n          : `--kui-app-tab-label-max-width:${labelMaxWidth}px`\n      }\n    >\n      {closable && (\n        <button\n          type=\"button\"\n          tabindex=\"-1\"\n          class=\"kui-app-tab__close\"\n          data-action={placeholder ? undefined : closeAction}\n          data-tab-id={id}\n          disabled={placeholder || undefined}\n          aria-label={`Close ${name}`}\n          title={`Close ${name}`}\n        >\n          <span class=\"kui-app-tab__close-icon\" aria-hidden=\"true\">\n            {closeIcon ?? <CloseIcon />}\n          </span>\n        </button>\n      )}\n      <button\n        type=\"button\"\n        class=\"kui-app-tab__select\"\n        role=\"tab\"\n        aria-selected={String(selected)}\n        aria-label={presentation === 'icon-only' ? name : undefined}\n        aria-keyshortcuts={placeholder ? undefined : keyshortcuts || undefined}\n        data-action={placeholder ? undefined : selectAction}\n        data-tab-id={id}\n        disabled={placeholder || undefined}\n        tabindex={placeholder ? '-1' : selected ? '0' : '-1'}\n      >\n        {leading}\n        <span\n          class=\"kui-app-tab__name\"\n          aria-hidden={presentation === 'icon-only' ? 'true' : undefined}\n        >\n          {placeholder ? <Skeleton width={em(7)} /> : name}\n        </span>\n        {closable || trailing ? (\n          <span class=\"kui-app-tab__trailing\">{trailing}</span>\n        ) : undefined}\n      </button>\n    </div>\n  );\n}\n"]}

package/dist/chunk-R3EBGEAW.js

@@ -0,0 +1,46 @@
+// src/flex-alignment.ts
+function horizontalAlignment(value) {
+  switch (value) {
+    case "left":
+    case "l":
+    case "flex-start":
+      return "left";
+    case "center":
+    case "c":
+    case "space-around":
+      return "center";
+    case "right":
+    case "r":
+    case "flex-end":
+      return "right";
+    case "full":
+    case "f":
+    case "space-between":
+      return "full";
+  }
+}
+function verticalAlignment(value) {
+  switch (value) {
+    case "top":
+    case "t":
+    case "flex-start":
+      return "top";
+    case "middle":
+    case "m":
+    case "c":
+    case "space-around":
+      return "middle";
+    case "bottom":
+    case "b":
+    case "flex-end":
+      return "bottom";
+    case "full":
+    case "f":
+    case "space-between":
+      return "full";
+  }
+}
+
+export { horizontalAlignment, verticalAlignment };
+
+//# sourceMappingURL=chunk-R3EBGEAW.js.map

package/dist/chunk-R3EBGEAW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/flex-alignment.ts"],"names":[],"mappings":";AAgCO,SAAS,oBACd,KAAA,EAC8B;AAC9B,EAAA,QAAQ,KAAA;AAAO,IACb,KAAK,MAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,YAAA;AACH,MAAA,OAAO,MAAA;AAAA,IACT,KAAK,QAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,cAAA;AACH,MAAA,OAAO,QAAA;AAAA,IACT,KAAK,OAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,UAAA;AACH,MAAA,OAAO,OAAA;AAAA,IACT,KAAK,MAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,eAAA;AACH,MAAA,OAAO,MAAA;AAAA;AAEb;AAEO,SAAS,kBACd,KAAA,EAC4B;AAC5B,EAAA,QAAQ,KAAA;AAAO,IACb,KAAK,KAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,YAAA;AACH,MAAA,OAAO,KAAA;AAAA,IACT,KAAK,QAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,cAAA;AACH,MAAA,OAAO,QAAA;AAAA,IACT,KAAK,QAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,UAAA;AACH,MAAA,OAAO,QAAA;AAAA,IACT,KAAK,MAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,eAAA;AACH,MAAA,OAAO,MAAA;AAAA;AAEb","file":"chunk-R3EBGEAW.js","sourcesContent":["export type HorizontalAlignment =\n  | 'left'\n  | 'l'\n  | 'flex-start'\n  | 'center'\n  | 'c'\n  | 'space-around'\n  | 'right'\n  | 'r'\n  | 'flex-end'\n  | 'full'\n  | 'f'\n  | 'space-between';\n\nexport type VerticalAlignment =\n  | 'top'\n  | 't'\n  | 'flex-start'\n  | 'middle'\n  | 'm'\n  | 'c'\n  | 'space-around'\n  | 'bottom'\n  | 'b'\n  | 'flex-end'\n  | 'full'\n  | 'f'\n  | 'space-between';\n\nexport type CanonicalHorizontalAlignment = 'left' | 'center' | 'right' | 'full';\nexport type CanonicalVerticalAlignment = 'top' | 'middle' | 'bottom' | 'full';\n\nexport function horizontalAlignment(\n  value: HorizontalAlignment,\n): CanonicalHorizontalAlignment {\n  switch (value) {\n    case 'left':\n    case 'l':\n    case 'flex-start':\n      return 'left';\n    case 'center':\n    case 'c':\n    case 'space-around':\n      return 'center';\n    case 'right':\n    case 'r':\n    case 'flex-end':\n      return 'right';\n    case 'full':\n    case 'f':\n    case 'space-between':\n      return 'full';\n  }\n}\n\nexport function verticalAlignment(\n  value: VerticalAlignment,\n): CanonicalVerticalAlignment {\n  switch (value) {\n    case 'top':\n    case 't':\n    case 'flex-start':\n      return 'top';\n    case 'middle':\n    case 'm':\n    case 'c':\n    case 'space-around':\n      return 'middle';\n    case 'bottom':\n    case 'b':\n    case 'flex-end':\n      return 'bottom';\n    case 'full':\n    case 'f':\n    case 'space-between':\n      return 'full';\n  }\n}\n"]}

package/dist/chunk-SOK5EUF7.js

@@ -0,0 +1,25 @@
+import { jsx } from 'kerfjs/jsx-runtime';
+
+// src/sunken-panel.tsx
+function SunkenPanel({
+  children,
+  ariaLabel,
+  shape = "rounded",
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      class: `kui-sunken-panel ${className}`.trim(),
+      "data-component": "sunken-panel",
+      "data-shape": shape,
+      role: ariaLabel ? "region" : void 0,
+      "aria-label": ariaLabel,
+      children
+    }
+  );
+}
+
+export { SunkenPanel };
+
+//# sourceMappingURL=chunk-SOK5EUF7.js.map

package/dist/chunk-SOK5EUF7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/sunken-panel.tsx"],"names":[],"mappings":";;;AAkBO,SAAS,WAAA,CAAY;AAAA,EAC1B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA,GAAY;AACd,CAAA,EAAqB;AACnB,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC5C,gBAAA,EAAe,cAAA;AAAA,MACf,YAAA,EAAY,KAAA;AAAA,MACZ,IAAA,EAAM,YAAY,QAAA,GAAW,MAAA;AAAA,MAC7B,YAAA,EAAY,SAAA;AAAA,MAEX;AAAA;AAAA,GACH;AAEJ","file":"chunk-SOK5EUF7.js","sourcesContent":["import type { KerfUiContent } from './semantic-content.js';\n\nexport type SunkenPanelShape = 'rounded' | 'square';\n\nexport interface SunkenPanelProps {\n  children?: KerfUiContent;\n  /** Optional accessible landmark name for a distinct application region. */\n  ariaLabel?: string;\n  /** Corner shape: a rounded rectangle (default) or square corners. */\n  shape?: SunkenPanelShape;\n  className?: string;\n}\n\n/**\n * A lowered application surface with one compact inset and a vertical content\n * stack. The panel owns its background and padding; children own their own\n * borders and internal geometry.\n */\nexport function SunkenPanel({\n  children,\n  ariaLabel,\n  shape = 'rounded',\n  className = '',\n}: SunkenPanelProps) {\n  return (\n    <div\n      class={`kui-sunken-panel ${className}`.trim()}\n      data-component=\"sunken-panel\"\n      data-shape={shape}\n      role={ariaLabel ? 'region' : undefined}\n      aria-label={ariaLabel}\n    >\n      {children}\n    </div>\n  );\n}\n"]}

package/dist/{chunk-7BR3DO2A.js → chunk-SRSJO5QE.js}

@@ -1,7 +1,14 @@
 // src/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"]);
+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)) {
@@ -15,11 +22,13 @@ function filterDataAttributes(attributes, protectedNames) {
 function filterControlAttributes(attributes, protectedDataNames) {
   const source = attributes;
   const filtered = filterDataAttributes(attributes, protectedDataNames);
-  if (typeof source.popoverTarget === "string") filtered.popoverTarget = source.popoverTarget;
+  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 (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"];
   }
@@ -28,4 +37,4 @@ function filterControlAttributes(attributes, protectedDataNames) {
 
 export { filterControlAttributes, filterDataAttributes };
 
-//# sourceMappingURL=chunk-7BR3DO2A.js.map
+//# sourceMappingURL=chunk-SRSJO5QE.js.map

package/dist/chunk-SRSJO5QE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/extension-attributes.ts"],"names":[],"mappings":";AAEA,IAAM,mBAAA,GAAsB,sBAAA;AAC5B,IAAM,yCAAyB,IAAI,GAAA,CAAI,CAAC,QAAA,EAAU,MAAA,EAAQ,MAAM,CAAC,CAAA;AACjE,IAAM,oBAAA,uBAA2B,GAAA,CAAI;AAAA,EACnC,QAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAC,CAAA;AAEM,SAAS,oBAAA,CACd,YACA,cAAA,EACwB;AACxB,EAAA,MAAM,WAAmC,EAAC;AAE1C,EAAA,KAAA,MAAW,CAAC,IAAA,EAAM,KAAK,KAAK,MAAA,CAAO,OAAA,CAAQ,UAA0B,CAAA,EAAG;AACtE,IAAA,MAAM,cAAA,GAAiB,KAAK,WAAA,EAAY;AACxC,IAAA,IACE,OAAO,KAAA,KAAU,QAAA,IACjB,mBAAA,CAAoB,IAAA,CAAK,cAAc,CAAA,IACvC,CAAC,cAAA,CAAe,GAAA,CAAI,cAAc,CAAA,EAClC;AACA,MAAA,QAAA,CAAS,cAAc,CAAA,GAAI,KAAA;AAAA,IAC7B;AAAA,EACF;AAEA,EAAA,OAAO,QAAA;AACT;AAEO,SAAS,uBAAA,CACd,YACA,kBAAA,EACwB;AACxB,EAAA,MAAM,MAAA,GAAS,UAAA;AACf,EAAA,MAAM,QAAA,GAAW,oBAAA,CAAqB,UAAA,EAAY,kBAAkB,CAAA;AAEpE,EAAA,IAAI,OAAO,OAAO,aAAA,KAAkB,QAAA;AAClC,IAAA,QAAA,CAAS,gBAAgB,MAAA,CAAO,aAAA;AAClC,EAAA,IAAI,sBAAA,CAAuB,GAAA,CAAI,MAAA,CAAO,mBAA6B,CAAA,EAAG;AACpE,IAAA,QAAA,CAAS,sBAAsB,MAAA,CAAO,mBAAA;AAAA,EACxC;AACA,EAAA,IAAI,OAAO,MAAA,CAAO,eAAe,CAAA,KAAM,QAAA;AACrC,IAAA,QAAA,CAAS,eAAe,CAAA,GAAI,MAAA,CAAO,eAAe,CAAA;AACpD,EAAA,IAAI,oBAAA,CAAqB,GAAA,CAAI,MAAA,CAAO,eAAe,CAAW,CAAA,EAAG;AAC/D,IAAA,QAAA,CAAS,eAAe,CAAA,GAAI,MAAA,CAAO,eAAe,CAAA;AAAA,EACpD;AAEA,EAAA,OAAO,QAAA;AACT","file":"chunk-SRSJO5QE.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\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-T7DOWS6T.js

@@ -0,0 +1,61 @@
+import { pct } from './chunk-OL4TC3U2.js';
+import { jsx } from 'kerfjs/jsx-runtime';
+
+function blockStyle(width, height, radius) {
+  const parts = [
+    width && `width:${width}`,
+    height && `height:${height}`,
+    radius && `--kui-skeleton-radius:${radius}`
+  ].filter(Boolean);
+  return parts.length ? parts.join(";") : void 0;
+}
+function Skeleton({
+  width,
+  height,
+  radius,
+  lines,
+  label,
+  className = ""
+}) {
+  const a11y = {
+    role: label ? "img" : void 0,
+    "aria-label": label,
+    "aria-hidden": label ? void 0 : "true"
+  };
+  if (lines && lines > 1) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        class: `kui-skeleton-lines ${className}`.trim(),
+        "data-component": "skeleton",
+        style: width ? `width:${width}` : void 0,
+        ...a11y,
+        children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            class: "kui-skeleton",
+            "aria-hidden": "true",
+            style: blockStyle(
+              index === lines - 1 ? pct(60) : void 0,
+              height,
+              radius
+            )
+          }
+        ))
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      class: `kui-skeleton ${className}`.trim(),
+      "data-component": "skeleton",
+      style: blockStyle(width, height, radius),
+      ...a11y
+    }
+  );
+}
+
+export { Skeleton };
+
+//# sourceMappingURL=chunk-T7DOWS6T.js.map

package/dist/chunk-T7DOWS6T.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/skeleton.tsx"],"names":[],"mappings":";;;AAgBA,SAAS,UAAA,CACP,KAAA,EACA,MAAA,EACA,MAAA,EACoB;AACpB,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,KAAA,IAAS,SAAS,KAAK,CAAA,CAAA;AAAA,IACvB,MAAA,IAAU,UAAU,MAAM,CAAA,CAAA;AAAA,IAC1B,MAAA,IAAU,yBAAyB,MAAM,CAAA;AAAA,GAC3C,CAAE,OAAO,OAAO,CAAA;AAChB,EAAA,OAAO,KAAA,CAAM,MAAA,GAAS,KAAA,CAAM,IAAA,CAAK,GAAG,CAAA,GAAI,MAAA;AAC1C;AAQO,SAAS,QAAA,CAAS;AAAA,EACvB,KAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,EAAkB;AAChB,EAAA,MAAM,IAAA,GAAO;AAAA,IACX,IAAA,EAAM,QAAQ,KAAA,GAAQ,MAAA;AAAA,IACtB,YAAA,EAAc,KAAA;AAAA,IACd,aAAA,EAAe,QAAQ,MAAA,GAAa;AAAA,GACtC;AACA,EAAA,IAAI,KAAA,IAAS,QAAQ,CAAA,EAAG;AACtB,IAAA,uBACE,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,CAAA,mBAAA,EAAsB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,QAC9C,gBAAA,EAAe,UAAA;AAAA,QACf,KAAA,EAAO,KAAA,GAAQ,CAAA,MAAA,EAAS,KAAK,CAAA,CAAA,GAAK,MAAA;AAAA,QACjC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA,KAAA,CAAM,KAAK,EAAE,MAAA,EAAQ,OAAM,EAAG,CAAC,GAAG,KAAA,qBACjC,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,cAAA;AAAA,YACN,aAAA,EAAY,MAAA;AAAA,YACZ,KAAA,EAAO,UAAA;AAAA,cACL,KAAA,KAAU,KAAA,GAAQ,CAAA,GAAI,GAAA,CAAI,EAAE,CAAA,GAAI,MAAA;AAAA,cAChC,MAAA;AAAA,cACA;AAAA;AACF;AAAA,SAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACA,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,aAAA,EAAgB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACxC,gBAAA,EAAe,UAAA;AAAA,MACf,KAAA,EAAO,UAAA,CAAW,KAAA,EAAO,MAAA,EAAQ,MAAM,CAAA;AAAA,MACtC,GAAG;AAAA;AAAA,GACL;AAEL","file":"chunk-T7DOWS6T.js","sourcesContent":["import { type CssLength, type CssSize, pct } from './css-values.js';\n\nexport interface SkeletonProps {\n  /** Typed width or intrinsic sizing keyword. Defaults to filling its slot. */\n  width?: CssSize;\n  /** Typed height or intrinsic sizing keyword. Defaults to a single text line. */\n  height?: CssSize;\n  /** Typed corner-radius override. Defaults to the small radius token. */\n  radius?: CssLength;\n  /** Render this many stacked lines (the last one shorter), for multi-line text. */\n  lines?: number;\n  /** Accessible label. Omit to keep the block decorative (`aria-hidden`). */\n  label?: string;\n  className?: string;\n}\n\nfunction blockStyle(\n  width?: CssSize,\n  height?: CssSize,\n  radius?: CssLength,\n): string | undefined {\n  const parts = [\n    width && `width:${width}`,\n    height && `height:${height}`,\n    radius && `--kui-skeleton-radius:${radius}`,\n  ].filter(Boolean);\n  return parts.length ? parts.join(';') : undefined;\n}\n\n/**\n * A subtle, deliberately **unanimated** loading placeholder block. Use it for a\n * value slot whose content is not yet known, on its own or via a component's\n * `placeholder` prop. Decorative by default (`aria-hidden`); pass `label` to\n * announce it. Sizes to its slot unless `width`/`height` are given.\n */\nexport function Skeleton({\n  width,\n  height,\n  radius,\n  lines,\n  label,\n  className = '',\n}: SkeletonProps) {\n  const a11y = {\n    role: label ? 'img' : undefined,\n    'aria-label': label,\n    'aria-hidden': label ? undefined : ('true' as const),\n  };\n  if (lines && lines > 1) {\n    return (\n      <span\n        class={`kui-skeleton-lines ${className}`.trim()}\n        data-component=\"skeleton\"\n        style={width ? `width:${width}` : undefined}\n        {...a11y}\n      >\n        {Array.from({ length: lines }, (_, index) => (\n          <span\n            class=\"kui-skeleton\"\n            aria-hidden=\"true\"\n            style={blockStyle(\n              index === lines - 1 ? pct(60) : undefined,\n              height,\n              radius,\n            )}\n          ></span>\n        ))}\n      </span>\n    );\n  }\n  return (\n    <span\n      class={`kui-skeleton ${className}`.trim()}\n      data-component=\"skeleton\"\n      style={blockStyle(width, height, radius)}\n      {...a11y}\n    ></span>\n  );\n}\n"]}