@kerfjs/ui 5.0.0-beta.103 → 5.0.0-beta.105

package/dist/chunk-LTBVP6VN.js

@@ -0,0 +1,59 @@
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+var SWITCH_PROTECTED = /* @__PURE__ */ new Set(["data-component", "data-size"]);
+function Switch({
+  label,
+  checked = false,
+  name,
+  value,
+  hint,
+  size = "default",
+  disabled = false,
+  action,
+  form,
+  id,
+  className = "",
+  rootAttributes = {},
+  slot
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...filterDataAttributes(rootAttributes, SWITCH_PROTECTED),
+      class: `kui-switch ${className}`.trim(),
+      "data-component": "switch",
+      "data-size": size,
+      slot,
+      children: [
+        /* @__PURE__ */ jsxs("label", { class: "kui-switch__row", children: [
+          /* @__PURE__ */ jsxs("span", { class: "kui-switch__control", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                class: "kui-switch__input",
+                type: "checkbox",
+                role: "switch",
+                id,
+                name,
+                value,
+                form,
+                checked,
+                disabled,
+                "data-action": action,
+                "aria-description": hint
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { class: "kui-switch__track", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { class: "kui-switch__thumb" }) })
+          ] }),
+          /* @__PURE__ */ jsx("span", { class: "kui-switch__label", children: label })
+        ] }),
+        hint === void 0 ? null : /* @__PURE__ */ jsx("span", { class: "kui-switch__hint", "aria-hidden": "true", children: hint })
+      ]
+    }
+  );
+}
+
+export { Switch };
+
+//# sourceMappingURL=chunk-LTBVP6VN.js.map

package/dist/chunk-LTBVP6VN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/switch/switch.tsx"],"names":[],"mappings":";;;AAKA,IAAM,mCAAmB,IAAI,GAAA,CAAI,CAAC,gBAAA,EAAkB,WAAW,CAAC,CAAA;AAqCzD,SAAS,MAAA,CAAO;AAAA,EACrB,KAAA;AAAA,EACA,OAAA,GAAU,KAAA;AAAA,EACV,IAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,QAAA,GAAW,KAAA;AAAA,EACX,MAAA;AAAA,EACA,IAAA;AAAA,EACA,EAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAgB;AACd,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,oBAAA,CAAqB,cAAA,EAAgB,gBAAgB,CAAA;AAAA,MACzD,KAAA,EAAO,CAAA,WAAA,EAAc,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACtC,gBAAA,EAAe,QAAA;AAAA,MACf,WAAA,EAAW,IAAA;AAAA,MACX,IAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,OAAA,EAAA,EAAM,OAAM,iBAAA,EACX,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,MAAA,EAAA,EAAK,OAAM,qBAAA,EACV,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,OAAA;AAAA,cAAA;AAAA,gBACC,KAAA,EAAM,mBAAA;AAAA,gBACN,IAAA,EAAK,UAAA;AAAA,gBACL,IAAA,EAAK,QAAA;AAAA,gBACL,EAAA;AAAA,gBACA,IAAA;AAAA,gBACA,KAAA;AAAA,gBACA,IAAA;AAAA,gBACA,OAAA;AAAA,gBACA,QAAA;AAAA,gBACA,aAAA,EAAa,MAAA;AAAA,gBACb,kBAAA,EAAkB;AAAA;AAAA,aACpB;AAAA,4BACA,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,mBAAA,EAAoB,aAAA,EAAY,QAC1C,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,mBAAA,EAAoB,CAAA,EAClC;AAAA,WAAA,EACF,CAAA;AAAA,0BACA,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,mBAAA,EAAqB,QAAA,EAAA,KAAA,EAAM;AAAA,SAAA,EACzC,CAAA;AAAA,QACC,IAAA,KAAS,SAAY,IAAA,mBACpB,GAAA,CAAC,UAAK,KAAA,EAAM,kBAAA,EAAmB,aAAA,EAAY,MAAA,EACxC,QAAA,EAAA,IAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ","file":"chunk-LTBVP6VN.js","sourcesContent":["import { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\n\n/** `default` is a 35×20 track beside 16px text; `compact` 31.5×18 and 14px. */\nexport type SwitchSize = 'default' | 'compact';\n\nconst SWITCH_PROTECTED = new Set(['data-component', 'data-size']);\n\n/** Application `data-*` metadata; the Switch's own markers stay protected. */\nexport type SwitchRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined>\n>;\n\nexport interface SwitchProps {\n  /** The visible label, which is also the switch's accessible name. */\n  label: string;\n  /** Whether the setting is on. */\n  checked?: boolean;\n  name?: string;\n  /** The value submitted while on (native default `on`). */\n  value?: string;\n  /** Supporting text below the label, also the switch's description. */\n  hint?: string;\n  size?: SwitchSize;\n  disabled?: boolean;\n  /** Delegated `data-action` on the input; listen for `change`. */\n  action?: string;\n  /** Associate the input with a form outside its ancestor chain. */\n  form?: string;\n  /** The input's id. */\n  id?: string;\n  className?: string;\n  /** Safe `data-*` metadata (a `data-key`). */\n  rootAttributes?: SwitchRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * An on/off setting that applies immediately: a native checkbox with\n * `role=\"switch\"`, drawn as a track and thumb beside its label, with an\n * optional hint aligned under the label.\n */\nexport function Switch({\n  label,\n  checked = false,\n  name,\n  value,\n  hint,\n  size = 'default',\n  disabled = false,\n  action,\n  form,\n  id,\n  className = '',\n  rootAttributes = {},\n  slot,\n}: SwitchProps) {\n  return (\n    <div\n      {...filterDataAttributes(rootAttributes, SWITCH_PROTECTED)}\n      class={`kui-switch ${className}`.trim()}\n      data-component=\"switch\"\n      data-size={size}\n      slot={slot}\n    >\n      <label class=\"kui-switch__row\">\n        <span class=\"kui-switch__control\">\n          <input\n            class=\"kui-switch__input\"\n            type=\"checkbox\"\n            role=\"switch\"\n            id={id}\n            name={name}\n            value={value}\n            form={form}\n            checked={checked}\n            disabled={disabled}\n            data-action={action}\n            aria-description={hint}\n          />\n          <span class=\"kui-switch__track\" aria-hidden=\"true\">\n            <span class=\"kui-switch__thumb\" />\n          </span>\n        </span>\n        <span class=\"kui-switch__label\">{label}</span>\n      </label>\n      {hint === undefined ? null : (\n        <span class=\"kui-switch__hint\" aria-hidden=\"true\">\n          {hint}\n        </span>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/chunk-OHPYT2BH.js

@@ -0,0 +1,82 @@
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+var RADIO_GROUP_PROTECTED = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-size",
+  "data-orientation",
+  "data-invalid"
+]);
+function RadioGroup({
+  label,
+  ariaLabel,
+  name,
+  choices,
+  value,
+  hint,
+  error,
+  size = "default",
+  orientation = "vertical",
+  required = false,
+  disabled = false,
+  action,
+  form,
+  id,
+  className = "",
+  rootAttributes = {},
+  slot
+}) {
+  const description = [hint, error].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      ...filterDataAttributes(rootAttributes, RADIO_GROUP_PROTECTED),
+      class: `kui-radio-group ${className}`.trim(),
+      "data-component": "radio-group",
+      "data-size": size,
+      "data-orientation": orientation,
+      "data-invalid": error ? "" : void 0,
+      id,
+      role: "radiogroup",
+      "aria-label": ariaLabel,
+      "aria-description": description,
+      "aria-invalid": error ? "true" : void 0,
+      "aria-required": required ? "true" : void 0,
+      disabled,
+      slot,
+      children: [
+        label === void 0 ? null : /* @__PURE__ */ jsx("legend", { class: "kui-radio-group__label", children: label }),
+        /* @__PURE__ */ jsx("span", { class: "kui-radio-group__choices", children: choices.map((choice) => /* @__PURE__ */ jsxs("span", { class: "kui-radio-group__choice", children: [
+          /* @__PURE__ */ jsxs("label", { class: "kui-radio-group__row", children: [
+            /* @__PURE__ */ jsxs("span", { class: "kui-radio-group__control", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  class: "kui-radio-group__input",
+                  type: "radio",
+                  name,
+                  value: choice.value,
+                  form,
+                  checked: choice.value === value,
+                  disabled: choice.disabled,
+                  required,
+                  "data-action": action,
+                  "aria-description": choice.hint
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { class: "kui-radio-group__circle", "aria-hidden": "true" })
+            ] }),
+            /* @__PURE__ */ jsx("span", { class: "kui-radio-group__choice-label", children: choice.label })
+          ] }),
+          choice.hint === void 0 ? null : /* @__PURE__ */ jsx("span", { class: "kui-radio-group__choice-hint", "aria-hidden": "true", children: choice.hint })
+        ] })) }),
+        hint === void 0 ? null : /* @__PURE__ */ jsx("span", { class: "kui-radio-group__hint", "aria-hidden": "true", children: hint }),
+        error === void 0 ? null : /* @__PURE__ */ jsx("span", { class: "kui-radio-group__error", "aria-hidden": "true", children: error })
+      ]
+    }
+  );
+}
+
+export { RadioGroup };
+
+//# sourceMappingURL=chunk-OHPYT2BH.js.map

package/dist/chunk-OHPYT2BH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/radio-group/radio-group.tsx"],"names":[],"mappings":"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","file":"chunk-OHPYT2BH.js","sourcesContent":["import { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\n\n/** `default` is a 20px circle beside 16px text; `compact` 18px and 14px. */\nexport type RadioGroupSize = 'default' | 'compact';\n\n/** `vertical` stacks the choices; `horizontal` lines them up and wraps. */\nexport type RadioGroupOrientation = 'vertical' | 'horizontal';\n\nconst RADIO_GROUP_PROTECTED = new Set([\n  'data-component',\n  'data-size',\n  'data-orientation',\n  'data-invalid',\n]);\n\n/** Application `data-*` metadata; the RadioGroup's own markers stay protected. */\nexport type RadioGroupRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined>\n>;\n\nexport interface RadioGroupChoice<Value extends string = string> {\n  value: Value;\n  /** Visible label; it is also the radio's accessible name. */\n  label: string;\n  /** Supporting text under this choice's label, also its description. */\n  hint?: string;\n  disabled?: boolean;\n}\n\n/** A group is named by a visible `label` (its legend) or by `ariaLabel`. */\nexport type RadioGroupName =\n  { label: string; ariaLabel?: never } | { label?: never; ariaLabel: string };\n\nexport interface RadioGroupOptions<Value extends string = string> {\n  /** Native input `name`: the form field the selected value submits under. */\n  name: string;\n  choices: readonly RadioGroupChoice<Value>[];\n  /** The selected value. Omit for no selection. */\n  value?: NoInfer<Value>;\n  /** Supporting text below the choices, also the group's description. */\n  hint?: string;\n  /** A validation message: shown in the danger color and marking it invalid. */\n  error?: string;\n  size?: RadioGroupSize;\n  orientation?: RadioGroupOrientation;\n  /** Require a selection for native form validation. */\n  required?: boolean;\n  /** Disable the whole group. */\n  disabled?: boolean;\n  /** Delegated `data-action` on every radio; listen for `change`. */\n  action?: string;\n  /** Associate the radios with a form outside their ancestor chain. */\n  form?: string;\n  /** The fieldset's id. */\n  id?: string;\n  className?: string;\n  /** Safe `data-*` metadata (a `data-key`). */\n  rootAttributes?: RadioGroupRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport type RadioGroupProps<Value extends string = string> = RadioGroupName &\n  RadioGroupOptions<Value>;\n\n/**\n * One exclusive choice among a few visible options: a native fieldset of\n * radios, each drawn as a Kerf circle beside its label, with the group label\n * above and hint and error text below. The browser owns the interaction: one\n * Tab stop, arrow keys move and select, and the checked value submits.\n */\nexport function RadioGroup<Value extends string>({\n  label,\n  ariaLabel,\n  name,\n  choices,\n  value,\n  hint,\n  error,\n  size = 'default',\n  orientation = 'vertical',\n  required = false,\n  disabled = false,\n  action,\n  form,\n  id,\n  className = '',\n  rootAttributes = {},\n  slot,\n}: RadioGroupProps<Value>) {\n  const description = [hint, error].filter(Boolean).join(' ') || undefined;\n  return (\n    <fieldset\n      {...filterDataAttributes(rootAttributes, RADIO_GROUP_PROTECTED)}\n      class={`kui-radio-group ${className}`.trim()}\n      data-component=\"radio-group\"\n      data-size={size}\n      data-orientation={orientation}\n      data-invalid={error ? '' : undefined}\n      id={id}\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      aria-description={description}\n      aria-invalid={error ? 'true' : undefined}\n      aria-required={required ? 'true' : undefined}\n      disabled={disabled}\n      slot={slot}\n    >\n      {label === undefined ? null : (\n        <legend class=\"kui-radio-group__label\">{label}</legend>\n      )}\n      <span class=\"kui-radio-group__choices\">\n        {choices.map((choice) => (\n          <span class=\"kui-radio-group__choice\">\n            <label class=\"kui-radio-group__row\">\n              <span class=\"kui-radio-group__control\">\n                <input\n                  class=\"kui-radio-group__input\"\n                  type=\"radio\"\n                  name={name}\n                  value={choice.value}\n                  form={form}\n                  checked={choice.value === value}\n                  disabled={choice.disabled}\n                  required={required}\n                  data-action={action}\n                  aria-description={choice.hint}\n                />\n                <span class=\"kui-radio-group__circle\" aria-hidden=\"true\" />\n              </span>\n              <span class=\"kui-radio-group__choice-label\">{choice.label}</span>\n            </label>\n            {choice.hint === undefined ? null : (\n              <span class=\"kui-radio-group__choice-hint\" aria-hidden=\"true\">\n                {choice.hint}\n              </span>\n            )}\n          </span>\n        ))}\n      </span>\n      {hint === undefined ? null : (\n        <span class=\"kui-radio-group__hint\" aria-hidden=\"true\">\n          {hint}\n        </span>\n      )}\n      {error === undefined ? null : (\n        <span class=\"kui-radio-group__error\" aria-hidden=\"true\">\n          {error}\n        </span>\n      )}\n    </fieldset>\n  );\n}\n"]}

package/dist/{chunk-HZPHCSCS.js → chunk-OY2MXIBB.js}

@@ -1,4 +1,4 @@
-import { verticalAlignment, horizontalAlignment } from './chunk-MXNIVEVL.js';
+import { verticalAlignment, horizontalAlignment } from './chunk-D4MXSAMI.js';
 import { gapLength } from './chunk-MHMWQ7RB.js';
 import { filterRootAttributes } from './chunk-KH4KEMSP.js';
 import { jsx } from 'kerfjs/jsx-runtime';
@@ -16,6 +16,8 @@ var listProtectedAttributes = /* @__PURE__ */ new Set([
   "data-frame",
   "data-surface",
   "data-inset",
+  "data-content-width",
+  "data-content-align",
   "data-text-insets",
   "data-control-insets"
 ]);
@@ -35,6 +37,8 @@ function List({
   minHeight,
   surface,
   inset,
+  contentWidth,
+  contentAlign = "center",
   dividerSides = "",
   textInsets = "",
   controlInsets = "",
@@ -80,6 +84,8 @@ function List({
       "data-frame": frame ? "true" : void 0,
       "data-surface": surface,
       "data-inset": inset,
+      "data-content-width": contentWidth,
+      "data-content-align": contentWidth === void 0 ? void 0 : contentAlign,
       "divider-sides": dividerSides || void 0,
       "data-text-insets": textInsets || void 0,
       "data-control-insets": controlInsets || void 0,
@@ -92,4 +98,4 @@ function List({
 
 export { List };
 
-//# sourceMappingURL=chunk-HZPHCSCS.js.map
+//# sourceMappingURL=chunk-OY2MXIBB.js.map

package/dist/chunk-OY2MXIBB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/collections/list/list.tsx"],"names":[],"mappings":"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","file":"chunk-OY2MXIBB.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport {\n  filterRootAttributes,\n  type StructuralRootAttributes,\n} from '../../../shared/dom/extension-attributes.js';\nimport {\n  type HorizontalAlignment,\n  horizontalAlignment,\n  type ListVerticalAlignment,\n  verticalAlignment,\n} from '../../../shared/layout/flex-alignment.js';\nimport { gapLength } from '../../../shared/layout/gap.js';\nimport type { ScrollClearance } from '../../../shared/layout/scroll-clearance.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\n/** Attributes a multi-select List owns as an ARIA grid. */\nconst listGridAttributes = ['role', 'aria-label', 'aria-multiselectable'];\n\nconst listProtectedAttributes = new Set([\n  'data-component',\n  'data-gap',\n  'data-flex',\n  'data-fill',\n  'data-h-align',\n  'data-v-align',\n  'data-scrollable',\n  'data-scroll-clearance',\n  'data-frame',\n  'data-surface',\n  'data-inset',\n  'data-content-width',\n  'data-content-align',\n  'data-text-insets',\n  'data-control-insets',\n]);\n\ntype ListRootAttributes = StructuralRootAttributes &\n  Readonly<{\n    'data-component'?: never;\n    'data-gap'?: never;\n    'data-flex'?: never;\n    'data-fill'?: never;\n    'data-h-align'?: never;\n    'data-v-align'?: never;\n    'data-scrollable'?: never;\n    'data-scroll-clearance'?: never;\n    'data-frame'?: never;\n    'data-surface'?: never;\n    'data-inset'?: never;\n    'data-content-width'?: never;\n    'data-content-align'?: never;\n    'data-text-insets'?: never;\n    'data-control-insets'?: never;\n  }>;\n\n/**\n * A solid surface painted behind a List: `base` is the page surface\n * (`--kui-color-surface`), `raised` the raised surface\n * (`--kui-color-surface-raised`). A lowered region is a `SunkenPanel`.\n */\nexport type ListSurface = 'base' | 'raised';\n\n/**\n * A preset inset on all four sides. `document` is the reading inset for long\n * content such as a reader view: 24px block and 32px inline, narrowing to\n * 16px inline below 576px. It replaces any `textInsets`/`controlInsets`.\n */\nexport type ListInset = 'document';\n\n/**\n * A readable measure for a page's content column: `compact` 440px, `medium`\n * 640px, or `wide` 864px of content, the same steps as a catalog example's\n * `contentWidth`.\n */\nexport type ListContentWidth = 'compact' | 'medium' | 'wide';\n\nexport interface ListProps {\n  children?: KerfUiContent;\n  /** Make this list a labeled multi-select grid for `ContentItem selectionMode=\"multiple\"` rows. */\n  selectionMode?: 'multiple';\n  /** Accessible name for the multi-select grid. */\n  ariaLabel?: string;\n  /** Standard gap (`true`), one spacing value, or separate column and row values. Defaults to no gap. */\n  gap?: boolean | UiGap;\n  /** Allow this list 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 list is that parent's layout root. Inside a\n   * flex layout use `flex` instead. Defaults to false.\n   */\n  fill?: boolean;\n  /** Horizontal alignment. Defaults to full to preserve stretch-aligned list children. */\n  hAlign?: HorizontalAlignment;\n  /** Vertical distribution. Defaults to top. */\n  vAlign?: ListVerticalAlignment;\n  /**\n   * Own vertical scrolling and overscroll containment. Children keep their\n   * natural height and scroll instead of shrinking. To bound the list by a\n   * `max-height` ancestor (no definite height), give that ancestor a flex\n   * column and use `flex`; `fill` needs a definite-height parent.\n   */\n  scrollable?: boolean;\n  /**\n   * Clear chrome that lies over this scrollable List's block-start and/or\n   * block-end edge, such as a `DialogSurface` floating footer. The List adds\n   * the inherited `--kui-scroll-clearance-block-*` context that chrome\n   * publishes to its own block padding and `scroll-padding`, so its rows\n   * scroll visibly beneath the chrome while the first and last rows (and any\n   * row focused or scrolled into view) can still rest clear of it. Opt in only\n   * the one scroller that reaches the covered edge. Defaults to none.\n   */\n  scrollClearance?: ScrollClearance;\n  /**\n   * Draw a bordered, rounded frame around the stack: a 1px neutral border,\n   * the standard control radius, and a 4px inset on every side that keeps the\n   * first and last rows' focus rings inside a scrolling frame's clip. It\n   * replaces any `inset`/`textInsets`/`controlInsets`. With `scrollable` and\n   * `maxHeight` it is a bounded result picker of `ListItem` rows.\n   */\n  frame?: boolean;\n  /**\n   * The List's maximum block size, a typed `CssLength` from\n   * `@kerfjs/ui/css-values` (such as `rem(14)`). Pair it with `scrollable` so\n   * rows beyond it scroll; it bounds the List without a flex-column ancestor.\n   */\n  maxHeight?: CssLength;\n  /**\n   * The List's minimum block size, a typed `CssLength` (such as `rem(4.25)`),\n   * so a short or empty result set keeps a stable box. Defaults to no minimum.\n   */\n  minHeight?: CssLength;\n  /**\n   * Paint a solid surface behind the stack, including its insets: for a strip\n   * of chrome (a banner above a sunken work area) that must not show the\n   * lowered tint around its content. Omitted, the List is transparent.\n   */\n  surface?: ListSurface;\n  /** Physical divider edges in canonical top/right/bottom/left order. */\n  dividerSides?: Sides;\n  /** A preset four-sided inset; see `ListInset`. */\n  /**\n   * Cap the list's content at a readable measure, plus its insets, so a page\n   * column needs no application CSS. Composes with `inset=\"document\"`.\n   */\n  contentWidth?: ListContentWidth;\n  /** Where a `contentWidth` column sits: `center` (default) or `start`. */\n  contentAlign?: 'start' | 'center';\n  inset?: ListInset;\n  /** Physical sides that receive the standard 17px text inset. */\n  textInsets?: Sides;\n  /** Physical sides that receive the standard 8px control inset. Text insets win on overlap. */\n  controlInsets?: Sides;\n  className?: string;\n  /**\n   * Safe `data-*`, `aria-*`, and structural `role` metadata (a named drop\n   * `region`, `aria-busy`); List-owned structural attributes remain\n   * protected, and a multi-select List owns its grid role and name.\n   */\n  rootAttributes?: ListRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A list's configuration, apart from its content and styling hooks: the props a\n * composite that renders a `List` for the app (the Workbench's `mainHeader` /\n * `mainFooter` chrome) forwards, so the app configures that list instead of\n * styling it. An omitted or `undefined` field keeps the composite's default.\n */\nexport type ListConfig = Pick<\n  ListProps,\n  'gap' | 'hAlign' | 'vAlign' | 'dividerSides' | 'textInsets' | 'controlInsets'\n>;\n\n/** A stretch-aligned vertical stack with optional gap, flex, fill, scroll, and dividers. */\nexport function List({\n  children,\n  selectionMode,\n  ariaLabel,\n  gap = false,\n  flex = false,\n  fill = false,\n  hAlign = 'full',\n  vAlign = 'top',\n  scrollable = false,\n  scrollClearance,\n  frame = false,\n  maxHeight,\n  minHeight,\n  surface,\n  inset,\n  contentWidth,\n  contentAlign = 'center',\n  dividerSides = '',\n  textInsets = '',\n  controlInsets = '',\n  className = '',\n  rootAttributes = {},\n  slot,\n}: ListProps) {\n  if (selectionMode === 'multiple' && !ariaLabel) {\n    throw new Error('Multi-select List requires an ariaLabel');\n  }\n  const multiple = selectionMode === 'multiple';\n  const safeRootAttributes = filterRootAttributes(\n    rootAttributes,\n    multiple\n      ? new Set([...listProtectedAttributes, ...listGridAttributes])\n      : listProtectedAttributes,\n  );\n  const gridAttributes = multiple\n    ? {\n        role: 'grid',\n        'aria-label': ariaLabel,\n        'aria-multiselectable': 'true',\n      }\n    : {};\n  const gapStyle =\n    gap === true\n      ? '--_kui-list-gap:var(--kui-list-gap)'\n      : gap === false\n        ? ''\n        : typeof gap === 'string'\n          ? `--_kui-list-gap:${gapLength(gap)}`\n          : `--_kui-list-column-gap:${gapLength(gap.column)};--_kui-list-row-gap:${gapLength(gap.row)}`;\n  const flexValue = flex === true ? '1 1 auto' : flex || undefined;\n  const style = [\n    gapStyle,\n    flexValue ? `--_kui-list-flex:${flexValue}` : '',\n    maxHeight === undefined ? '' : `--_kui-list-max-height:${maxHeight}`,\n    minHeight === undefined ? '' : `--_kui-list-min-height:${minHeight}`,\n  ]\n    .filter(Boolean)\n    .join(';');\n\n  return (\n    <div\n      {...safeRootAttributes}\n      {...gridAttributes}\n      class={`kui-list ${className}`.trim()}\n      data-component=\"list\"\n      data-gap={String(Boolean(gap))}\n      data-flex={String(Boolean(flex))}\n      data-fill={fill ? 'true' : undefined}\n      data-h-align={horizontalAlignment(hAlign)}\n      data-v-align={verticalAlignment(vAlign)}\n      data-scrollable={String(scrollable)}\n      data-scroll-clearance={scrollClearance}\n      data-frame={frame ? 'true' : undefined}\n      data-surface={surface}\n      data-inset={inset}\n      data-content-width={contentWidth}\n      data-content-align={contentWidth === undefined ? undefined : contentAlign}\n      divider-sides={dividerSides || undefined}\n      data-text-insets={textInsets || undefined}\n      data-control-insets={controlInsets || undefined}\n      style={style || undefined}\n      slot={slot}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type {\n  HorizontalAlignment,\n  ListVerticalAlignment,\n  VerticalAlignment,\n} from '../../../shared/layout/flex-alignment.js';\nexport type { ScrollClearance } from '../../../shared/layout/scroll-clearance.js';\nexport type { Sides } from '../../../shared/layout/sides.js';\nexport type {\n  CssFlex,\n  CssFlexKeyword,\n  CssLength,\n  UiGap,\n  UiGapValue,\n  UiSpaceName,\n} from '../../../shared/styles/css-values.js';\n"]}

package/dist/chunk-PE2KPZDW.js

@@ -0,0 +1,85 @@
+import { computePosition, flip, shift, size, autoUpdate } from '@floating-ui/dom';
+
+// src/shared/popup/position-popup.ts
+var POPUP_AVAILABLE_WIDTH = "--_kui-popup-available-width";
+var POPUP_VIEWPORT_PADDING = 10;
+function pointAnchor(x, y) {
+  return { getBoundingClientRect: () => new DOMRect(x, y, 0, 0) };
+}
+async function positionPopup(anchor, popup, {
+  placement,
+  gap = 0,
+  crossOffset = 0,
+  padding = POPUP_VIEWPORT_PADDING
+}) {
+  const boundary = popup.ownerDocument.documentElement;
+  popup.style.removeProperty("max-height");
+  popup.style.removeProperty(POPUP_AVAILABLE_WIDTH);
+  const {
+    x,
+    y,
+    placement: used
+  } = await computePosition(anchor, popup, {
+    strategy: "fixed",
+    placement,
+    middleware: [
+      {
+        name: "offset",
+        fn: ({ x: ox, y: oy, placement: current }) => {
+          const vertical = current.startsWith("top") || current.startsWith("bottom");
+          const sign = current.startsWith("top") || current.startsWith("left") ? -1 : 1;
+          const cross = current.endsWith("-end") ? -crossOffset : crossOffset;
+          return vertical ? { x: ox + cross, y: oy + sign * gap } : { x: ox + sign * gap, y: oy + cross };
+        }
+      },
+      flip({ fallbackStrategy: "bestFit", padding, boundary }),
+      shift({ padding, crossAxis: true, boundary }),
+      size({
+        padding,
+        boundary,
+        apply({ availableHeight, availableWidth }) {
+          popup.style.maxHeight = `${Math.max(0, availableHeight)}px`;
+          popup.style.setProperty(
+            POPUP_AVAILABLE_WIDTH,
+            `${Math.max(0, availableWidth)}px`
+          );
+        }
+      })
+    ]
+  });
+  popup.style.left = `${x}px`;
+  popup.style.top = `${y}px`;
+  popup.setAttribute("data-placement", used);
+}
+function followAnchor(anchor, popup, place) {
+  return autoUpdate(anchor, popup, place);
+}
+var PHONE_SUBMENU_QUERY = "(max-width: 480px)";
+var PHONE_INSET = 8;
+var PHONE_GAP = 4;
+function phoneSubmenuPosition(parent, submenu, viewport, rtl) {
+  const width = Math.min(submenu.width, viewport.width - 2 * PHONE_INSET);
+  const height = submenu.height;
+  const below = Math.max(
+    0,
+    viewport.height - parent.bottom - PHONE_GAP - PHONE_INSET
+  );
+  const above = Math.max(0, parent.top - PHONE_GAP - PHONE_INSET);
+  const useBelow = height <= below || height > above && below >= above;
+  const availableHeight = useBelow ? below : above;
+  const left = rtl ? parent.right - width : parent.left;
+  return {
+    left: Math.max(
+      PHONE_INSET,
+      Math.min(left, viewport.width - PHONE_INSET - width)
+    ),
+    top: useBelow ? parent.bottom + PHONE_GAP : parent.top - PHONE_GAP - Math.min(height, availableHeight),
+    maxHeight: availableHeight,
+    maxWidth: viewport.width - 2 * PHONE_INSET,
+    placement: useBelow ? "bottom-start" : "top-start"
+  };
+}
+
+export { PHONE_SUBMENU_QUERY, followAnchor, phoneSubmenuPosition, pointAnchor, positionPopup };
+
+//# sourceMappingURL=chunk-PE2KPZDW.js.map

package/dist/chunk-PE2KPZDW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/popup/position-popup.ts"],"names":[],"mappings":"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","file":"chunk-PE2KPZDW.js","sourcesContent":["import {\n  autoUpdate,\n  computePosition,\n  flip,\n  type Placement,\n  shift,\n  size,\n  type VirtualElement,\n} from '@floating-ui/dom';\n\n/**\n * Placement for Kerf-owned popups (a PopupMenu's menu and submenus, a\n * Select's listbox): a top-layer element positioned `fixed` against an\n * anchor, flipped to the other side when its preferred side is short,\n * shifted to stay clear of the viewport edge, and capped to the block size\n * its side has room for. The geometry matches the Web Awesome popup these\n * surfaces replaced: no gap, best-fit flip, 10px shift and size padding.\n */\n\n/** Where a popup opens: below or above its anchor, at the start, center, or end. */\nexport type PopupPlacement =\n  'bottom-start' | 'bottom' | 'bottom-end' | 'top-start' | 'top' | 'top-end';\n\n/**\n * The custom property a placed popup's CSS reads to cap its width at the room\n * its side has; the popup also keeps any width limit of its own.\n */\nexport const POPUP_AVAILABLE_WIDTH = '--_kui-popup-available-width';\n\n/** A popup stays this far from the viewport edge when shifted or capped. */\nexport const POPUP_VIEWPORT_PADDING = 10;\n\n/** An element, or a viewport rectangle such as a context menu's pointer point. */\nexport type PopupAnchor = Element | VirtualElement;\n\n/** A zero-size anchor at a viewport point. */\nexport function pointAnchor(x: number, y: number): VirtualElement {\n  return { getBoundingClientRect: () => new DOMRect(x, y, 0, 0) };\n}\n\nexport interface PositionPopupOptions {\n  placement: Placement;\n  /** Main-axis distance from the anchor. */\n  gap?: number;\n  /** Cross-axis offset (a submenu lifts so its first row meets its item). */\n  crossOffset?: number;\n  /** Viewport padding the flip, shift, and height cap keep. */\n  padding?: number;\n}\n\n/**\n * Position `popup` against `anchor` once. Records the placement used as\n * `data-placement`, so the popup's motion grows from its anchor side.\n */\nexport async function positionPopup(\n  anchor: PopupAnchor,\n  popup: HTMLElement,\n  {\n    placement,\n    gap = 0,\n    crossOffset = 0,\n    padding = POPUP_VIEWPORT_PADDING,\n  }: PositionPopupOptions,\n): Promise<void> {\n  // The popup is in the top layer, which no ancestor clips: only the\n  // viewport bounds it, not the scroll containers it is rendered inside.\n  const boundary = popup.ownerDocument.documentElement;\n  // Measure the natural size: a cap from an earlier, shorter side would\n  // otherwise steer the flip.\n  popup.style.removeProperty('max-height');\n  popup.style.removeProperty(POPUP_AVAILABLE_WIDTH);\n  const {\n    x,\n    y,\n    placement: used,\n  } = await computePosition(anchor, popup, {\n    strategy: 'fixed',\n    placement,\n    middleware: [\n      {\n        name: 'offset',\n        fn: ({ x: ox, y: oy, placement: current }) => {\n          const vertical =\n            current.startsWith('top') || current.startsWith('bottom');\n          const sign =\n            current.startsWith('top') || current.startsWith('left') ? -1 : 1;\n          // An end alignment (after a flip) shifts the other way, so the\n          // popup's last row meets the anchor as its first row would.\n          const cross = current.endsWith('-end') ? -crossOffset : crossOffset;\n          return vertical\n            ? { x: ox + cross, y: oy + sign * gap }\n            : { x: ox + sign * gap, y: oy + cross };\n        },\n      },\n      flip({ fallbackStrategy: 'bestFit', padding, boundary }),\n      shift({ padding, crossAxis: true, boundary }),\n      size({\n        padding,\n        boundary,\n        apply({ availableHeight, availableWidth }) {\n          popup.style.maxHeight = `${Math.max(0, availableHeight)}px`;\n          // The popup's own CSS caps its width by this and its own limit.\n          popup.style.setProperty(\n            POPUP_AVAILABLE_WIDTH,\n            `${Math.max(0, availableWidth)}px`,\n          );\n        },\n      }),\n    ],\n  });\n  popup.style.left = `${x}px`;\n  popup.style.top = `${y}px`;\n  popup.setAttribute('data-placement', used);\n}\n\n/**\n * Keep a shown popup positioned while its anchor or any scroll ancestor\n * moves, the viewport resizes, or either element changes size. Returns the\n * function that stops following.\n */\nexport function followAnchor(\n  anchor: PopupAnchor,\n  popup: HTMLElement,\n  place: () => void,\n): () => void {\n  return autoUpdate(anchor, popup, place);\n}\n\n/** Phone-width viewports place a submenu above or below its parent menu. */\nexport const PHONE_SUBMENU_QUERY = '(max-width: 480px)';\n\nconst PHONE_INSET = 8;\nconst PHONE_GAP = 4;\n\nexport interface Box {\n  readonly left: number;\n  readonly top: number;\n  readonly right: number;\n  readonly bottom: number;\n}\n\n/**\n * Place a phone-width submenu beside its parent menu in the block axis, so\n * its rows never cover the parent's: below the parent menu when it fits (or\n * when below has more room), otherwise above.\n */\nexport function phoneSubmenuPosition(\n  parent: Box,\n  submenu: { width: number; height: number },\n  viewport: { width: number; height: number },\n  rtl: boolean,\n) {\n  const width = Math.min(submenu.width, viewport.width - 2 * PHONE_INSET);\n  const height = submenu.height;\n  const below = Math.max(\n    0,\n    viewport.height - parent.bottom - PHONE_GAP - PHONE_INSET,\n  );\n  const above = Math.max(0, parent.top - PHONE_GAP - PHONE_INSET);\n  const useBelow = height <= below || (height > above && below >= above);\n  const availableHeight = useBelow ? below : above;\n  const left = rtl ? parent.right - width : parent.left;\n  return {\n    left: Math.max(\n      PHONE_INSET,\n      Math.min(left, viewport.width - PHONE_INSET - width),\n    ),\n    top: useBelow\n      ? parent.bottom + PHONE_GAP\n      : parent.top - PHONE_GAP - Math.min(height, availableHeight),\n    maxHeight: availableHeight,\n    maxWidth: viewport.width - 2 * PHONE_INSET,\n    placement: useBelow ? ('bottom-start' as const) : ('top-start' as const),\n  };\n}\n"]}

package/dist/{chunk-QTSMHH5J.js → chunk-QPTJ5DOO.js}

@@ -66,10 +66,12 @@ function bounds(panel) {
   };
 }
 function resizeTo(handle, target, height) {
-  const { panel, host, property } = target;
+  const { panel, host, property, publish } = target;
   const { min, max, clearance } = bounds(panel);
   const clamped = Math.min(max, Math.max(min, Math.round(height)));
-  host.style.setProperty(property, `${Math.max(0, clamped - clearance)}px`);
+  const value = `${Math.max(0, clamped - clearance)}px`;
+  if (publish) publish(value);
+  else host.style.setProperty(property, value);
   syncSheetHandleValues(handle, panel, clamped);
 }
 function syncSheetHandleValues(handle, panel, height = panel.getBoundingClientRect().height) {
@@ -82,4 +84,4 @@ function syncSheetHandleValues(handle, panel, height = panel.getBoundingClientRe
 
 export { createSheetHandle, syncSheetHandleValues, wireSheetHandle };
 
-//# sourceMappingURL=chunk-QTSMHH5J.js.map
+//# sourceMappingURL=chunk-QPTJ5DOO.js.map

package/dist/chunk-QPTJ5DOO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/surfaces/surface-scaffold/internal/sheet-handle.ts"],"names":[],"mappings":"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","file":"chunk-QPTJ5DOO.js","sourcesContent":["/**\n * The bottom-sheet resize grabber shared by `DialogSurface` and the core\n * `kerfjs/overlay` sheets `wireOverlaySheets` wires: a `role=\"separator\"`\n * that resizes a sheet's visible height by drag or keyboard, between the\n * sheet's computed `min-height` and `max-height`, and reports that height in\n * its ARIA values. The sheet's height rule reads the published property and\n * adds back its block-end clearance.\n */\n\n/** Arrow-key step, and the Page Up/Down step, in px. */\nconst STEP = 16;\nconst PAGE_STEP = 64;\n\n/** Where a grabber reads its bounds and publishes the resized height. */\nexport interface SheetHandleTarget {\n  /** The sheet whose border box is measured and bounded, read at each event. */\n  panel: HTMLElement;\n  /** The element the visible height is published on (the panel or an ancestor). */\n  host: HTMLElement;\n  /** The custom property holding the visible height. */\n  property: string;\n  /** False while the sheet is not resizable: input is ignored. */\n  enabled: () => boolean;\n  /**\n   * Publish the visible height in place of setting `property` on `host`\n   * directly (a DialogSurface keeps it across re-renders).\n   */\n  publish?: (value: string) => void;\n}\n\n/** Create an unattached grabber element with its separator semantics. */\nexport function createSheetHandle(\n  attributes: Record<string, string>,\n): HTMLElement {\n  const handle = document.createElement('div');\n  for (const [name, value] of Object.entries(attributes))\n    handle.setAttribute(name, value);\n  handle.setAttribute('role', 'separator');\n  handle.setAttribute('aria-orientation', 'horizontal');\n  handle.setAttribute('aria-label', 'Resize sheet');\n  handle.tabIndex = 0;\n  return handle;\n}\n\n/** Wire a grabber's focus, keyboard, and pointer resizing. Returns a disposer. */\nexport function wireSheetHandle(\n  handle: HTMLElement,\n  target: SheetHandleTarget,\n): () => void {\n  const onFocus = (): void => syncSheetHandleValues(handle, target.panel);\n  const onKeydown = (event: KeyboardEvent): void => {\n    if (!target.enabled()) return;\n    const { min, max } = bounds(target.panel);\n    const current = target.panel.getBoundingClientRect().height;\n    const next = {\n      ArrowUp: current + STEP,\n      ArrowDown: current - STEP,\n      PageUp: current + PAGE_STEP,\n      PageDown: current - PAGE_STEP,\n      Home: min,\n      End: max,\n    }[event.key];\n    if (next === undefined) return;\n    event.preventDefault();\n    resizeTo(handle, target, next);\n  };\n  const onPointerdown = (event: PointerEvent): void => {\n    if (!target.enabled() || event.button !== 0) return;\n    event.preventDefault();\n    const startY = event.clientY;\n    const start = target.panel.getBoundingClientRect().height;\n    handle.setPointerCapture?.(event.pointerId);\n    const move = (moveEvent: PointerEvent): void =>\n      resizeTo(handle, target, start - (moveEvent.clientY - startY));\n    const end = (): void => {\n      handle.removeEventListener('pointermove', move);\n      handle.removeEventListener('pointerup', end);\n      handle.removeEventListener('pointercancel', end);\n    };\n    handle.addEventListener('pointermove', move);\n    handle.addEventListener('pointerup', end);\n    handle.addEventListener('pointercancel', end);\n  };\n  handle.addEventListener('focus', onFocus);\n  handle.addEventListener('keydown', onKeydown);\n  handle.addEventListener('pointerdown', onPointerdown);\n  return () => {\n    handle.removeEventListener('focus', onFocus);\n    handle.removeEventListener('keydown', onKeydown);\n    handle.removeEventListener('pointerdown', onPointerdown);\n  };\n}\n\n/** The panel's resolved border-box bounds and block-end clearance, in px. */\nfunction bounds(panel: HTMLElement): {\n  min: number;\n  max: number;\n  clearance: number;\n} {\n  const style = globalThis.getComputedStyle(panel);\n  const clearance = parseFloat(style.paddingBlockEnd) || 0;\n  const min = parseFloat(style.minHeight) || 0;\n  const max = parseFloat(style.maxHeight);\n  return {\n    min,\n    max: Number.isFinite(max) ? max : globalThis.innerHeight,\n    clearance,\n  };\n}\n\n/** Resize to a border-box height, published as the visible height above the clearance. */\nfunction resizeTo(\n  handle: Element,\n  target: SheetHandleTarget,\n  height: number,\n): void {\n  const { panel, host, property, publish } = target;\n  const { min, max, clearance } = bounds(panel);\n  const clamped = Math.min(max, Math.max(min, Math.round(height)));\n  const value = `${Math.max(0, clamped - clearance)}px`;\n  if (publish) publish(value);\n  else host.style.setProperty(property, value);\n  syncSheetHandleValues(handle, panel, clamped);\n}\n\n/** Separator values in visible (content) px, as a ResizableRegion reports them. */\nexport function syncSheetHandleValues(\n  handle: Element,\n  panel: HTMLElement,\n  height = panel.getBoundingClientRect().height,\n): void {\n  const { min, max, clearance } = bounds(panel);\n  const visible = (value: number) =>\n    String(Math.max(0, Math.round(value - clearance)));\n  handle.setAttribute('aria-valuemin', visible(min));\n  handle.setAttribute('aria-valuemax', visible(max));\n  handle.setAttribute('aria-valuenow', visible(height));\n}\n"]}

package/dist/{chunk-JOR5LGYE.js → chunk-RFLW4FPL.js}

@@ -52,4 +52,4 @@ function TabBar({
 
 export { TabBar };
 
-//# sourceMappingURL=chunk-JOR5LGYE.js.map
+//# sourceMappingURL=chunk-RFLW4FPL.js.map

package/dist/chunk-RFLW4FPL.js.map

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

package/dist/{chunk-U6QYTMDB.js → chunk-RMWNO6BA.js}

@@ -8,11 +8,13 @@ var badgeProtectedAttributes = /* @__PURE__ */ new Set([
   "data-shape",
   "data-size",
   "data-has-icon",
-  "data-truncate"
+  "data-truncate",
+  "data-placement"
 ]);
 function Badge(props) {
   const {
     tone = "neutral",
+    placement = "inline",
     title,
     rootAttributes = {},
     className = "",
@@ -33,6 +35,7 @@ function Badge(props) {
         "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",
@@ -66,6 +69,7 @@ function Badge(props) {
       "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,
@@ -82,4 +86,4 @@ function Badge(props) {
 
 export { Badge };
 
-//# sourceMappingURL=chunk-U6QYTMDB.js.map
+//# 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"]}