@kerfjs/ui 5.0.0-beta.6 → 5.0.0-beta.61

package/dist/chunk-5PESG2VP.js

@@ -0,0 +1,115 @@
+import { ToolbarText } from './chunk-3SXMEK3B.js';
+import { ToolbarControlGroup } from './chunk-7JUBXOIV.js';
+import { Toolbar } from './chunk-MERWRTBG.js';
+import { LucideIcon } from './chunk-4R777DUZ.js';
+import { ChevronLeft } from 'lucide';
+import { jsxs, jsx, Fragment } from 'kerfjs/jsx-runtime';
+
+var DEFAULT_SAFE_AREA_EDGES = [
+  "block-start",
+  "inline-start",
+  "inline-end"
+];
+function NavStack({
+  id,
+  label,
+  views,
+  backLabel = "Back",
+  backIcon,
+  backText,
+  toolbarConfig = {},
+  hideToolbar = false,
+  bottomToolbar,
+  chromeDividers = "scroll",
+  className = "",
+  slot
+}) {
+  const topIndex = views.length - 1;
+  const top = views[topIndex];
+  const canPop = views.length > 1;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      class: `kui-nav-stack ${className}`.trim(),
+      id,
+      "data-component": "nav-stack",
+      "data-nav-stack-id": id,
+      "data-depth": String(views.length),
+      "data-chrome-dividers": chromeDividers === "always" || chromeDividers === "none" ? chromeDividers : void 0,
+      "aria-label": label,
+      slot,
+      children: [
+        !hideToolbar && /* @__PURE__ */ jsx("div", { class: "kui-nav-stack__chrome", "data-nav-stack-chrome": true, children: /* @__PURE__ */ jsx(
+          Toolbar,
+          {
+            label: toolbarConfig.label,
+            dividerSides: toolbarConfig.dividerSides,
+            centerAlign: toolbarConfig.centerAlign,
+            responsive: toolbarConfig.responsive,
+            responsiveAt: toolbarConfig.responsiveAt,
+            safeAreaEdges: toolbarConfig.safeAreaEdges ?? DEFAULT_SAFE_AREA_EDGES,
+            leading: /* @__PURE__ */ jsxs(Fragment, { children: [
+              canPop && /* @__PURE__ */ jsx(
+                ToolbarControlGroup,
+                {
+                  appearance: "borderless",
+                  shape: "rounded",
+                  content: backText ? "mixed" : "icon",
+                  single: true,
+                  children: /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      class: "kui-nav-stack__back",
+                      "data-nav-back": true,
+                      "aria-label": backText ? void 0 : backLabel,
+                      children: [
+                        backIcon ?? /* @__PURE__ */ jsx(
+                          LucideIcon,
+                          {
+                            icon: ChevronLeft,
+                            name: "chevron-left",
+                            className: "kui-nav-stack__back-icon"
+                          }
+                        ),
+                        backText ? /* @__PURE__ */ jsx("span", { children: backText }) : null
+                      ]
+                    }
+                  )
+                }
+              ),
+              top?.leading,
+              /* @__PURE__ */ jsx(
+                ToolbarText,
+                {
+                  text: top?.title ?? "",
+                  size: toolbarConfig.titleSize ?? "large",
+                  headingLevel: toolbarConfig.headingLevel,
+                  fill: true
+                }
+              )
+            ] }),
+            center: top?.center,
+            trailing: top?.toolbar
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { class: "kui-nav-stack__viewport", "data-nav-stack-viewport": true, children: views.map((view, index) => /* @__PURE__ */ jsx(
+          "article",
+          {
+            class: "kui-nav-stack__view",
+            "data-key": view.key,
+            "data-nav-key": view.key,
+            "data-nav-active": String(index === topIndex),
+            "aria-hidden": String(index !== topIndex),
+            children: view.content
+          }
+        )) }),
+        (top?.bottomToolbar ?? bottomToolbar) && /* @__PURE__ */ jsx("footer", { class: "kui-nav-stack__bottom", "data-nav-stack-bottom": true, children: top?.bottomToolbar ?? bottomToolbar })
+      ]
+    }
+  );
+}
+
+export { NavStack };
+
+//# sourceMappingURL=chunk-5PESG2VP.js.map

package/dist/chunk-5PESG2VP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/nav-stack.tsx"],"names":[],"mappings":"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","file":"chunk-5PESG2VP.js","sourcesContent":["import { ChevronLeft } from 'lucide';\n\nimport { LucideIcon } from './lucide-icon.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport { Toolbar, type ToolbarConfig } from './toolbar.js';\nimport { ToolbarControlGroup } from './toolbar-control-group.js';\nimport {\n  type HeadingLevel,\n  ToolbarText,\n  type ToolbarTextSize,\n} from './toolbar-text.js';\n\n/**\n * One entry in a {@link NavStack}. The app owns the stack as an array (usually a\n * signal); `NavStack` renders it and `wireNavStack` animates the transitions.\n */\nexport interface NavStackView {\n  /** Stable identity for keyed reconcile and transition direction. */\n  key: string;\n  content: KerfUiContent;\n  /** Title shown in the top toolbar for this view. */\n  title?: string;\n  /** Leading groups for this view's top toolbar, after the back control and before the title. */\n  leading?: KerfUiContent;\n  /** Center content for this view's top toolbar (placed per `toolbarConfig.centerAlign`). */\n  center?: KerfUiContent;\n  /** Trailing actions for this view's top toolbar. */\n  toolbar?: KerfUiContent;\n  /** Bottom toolbar for this view. Cross-fades with the top chrome on navigation. */\n  bottomToolbar?: KerfUiContent;\n}\n\n/**\n * The top toolbar's configuration. Its `ToolbarConfig` forwards to the real\n * `Toolbar` the stack renders; by default that toolbar draws no divider and\n * claims the top and side safe-area edges the stack still touches.\n */\nexport interface NavStackToolbarConfig extends ToolbarConfig {\n  /** Accessible name of the top toolbar (default: none). */\n  label?: string;\n  /** Size of the view title's `ToolbarText` (default `large`). */\n  titleSize?: ToolbarTextSize;\n  /** Expose the view title as a heading at this level (default: a plain span). */\n  headingLevel?: HeadingLevel;\n}\n\nexport interface NavStackProps {\n  id: string;\n  /** Accessible name for the stack region. */\n  label: string;\n  /** The stack, root first; the last entry is the active top view. */\n  views: NavStackView[];\n  /** Accessible label for the icon-only back control (default \"Back\"). */\n  backLabel?: string;\n  /** The back control's icon (default a chevron-left `LucideIcon`). */\n  backIcon?: KerfUiContent;\n  /**\n   * Visible text beside the back icon, such as the previous view's title\n   * (default: icon only). When set, the text names the control and\n   * `backLabel` is not used.\n   */\n  backText?: string;\n  /** The top toolbar's configuration, forwarded to its `Toolbar`. */\n  toolbarConfig?: NavStackToolbarConfig;\n  /** Hide the top toolbar entirely (rare — a fully custom-chrome view). */\n  hideToolbar?: boolean;\n  /** Optional persistent bottom toolbar used when the active view does not provide one. */\n  bottomToolbar?: KerfUiContent;\n  /**\n   * The line under the top chrome and over the bottom toolbar, where they\n   * meet the active view. `scroll` (default) shows the chrome's line only\n   * while the view's content is scrolled beneath it, and the bottom\n   * toolbar's only while more content lies below — never when the content\n   * fits — once `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is\n   * wired above the stack; unwired, neither shows. `always` shows both\n   * without the wiring; `none` neither, even when wired. The line is drawn\n   * inside the chrome, so no state moves the chrome or the content. A\n   * `toolbarConfig.dividerSides` edge is the Toolbar's own and is unaffected.\n   */\n  chromeDividers?: 'scroll' | 'always' | 'none';\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nconst DEFAULT_SAFE_AREA_EDGES = [\n  'block-start',\n  'inline-start',\n  'inline-end',\n] as const;\n\n/**\n * A navigation stack (iOS-style push/pop). Renders every entry stacked, the last\n * one active; `@kerfjs/ui/wire-nav-stack`'s `wireNavStack` slides the content and\n * cross-fades the chrome across a change. Its top chrome is a real `Toolbar`: the\n * back control and title lead, the active view's `leading` / `center` / `toolbar`\n * content fills the zones, and `toolbarConfig` configures it. A single-pane\n * layout is a `NavStack` with one entry. See `docs/23-app-layouts.md` §3.1.\n */\nexport function NavStack({\n  id,\n  label,\n  views,\n  backLabel = 'Back',\n  backIcon,\n  backText,\n  toolbarConfig = {},\n  hideToolbar = false,\n  bottomToolbar,\n  chromeDividers = 'scroll',\n  className = '',\n  slot,\n}: NavStackProps) {\n  const topIndex = views.length - 1;\n  const top = views[topIndex];\n  const canPop = views.length > 1;\n  return (\n    <section\n      class={`kui-nav-stack ${className}`.trim()}\n      id={id}\n      data-component=\"nav-stack\"\n      data-nav-stack-id={id}\n      data-depth={String(views.length)}\n      data-chrome-dividers={\n        chromeDividers === 'always' || chromeDividers === 'none'\n          ? chromeDividers\n          : undefined\n      }\n      aria-label={label}\n      slot={slot}\n    >\n      {!hideToolbar && (\n        <div class=\"kui-nav-stack__chrome\" data-nav-stack-chrome>\n          <Toolbar\n            label={toolbarConfig.label}\n            dividerSides={toolbarConfig.dividerSides}\n            centerAlign={toolbarConfig.centerAlign}\n            responsive={toolbarConfig.responsive}\n            responsiveAt={toolbarConfig.responsiveAt}\n            safeAreaEdges={\n              toolbarConfig.safeAreaEdges ?? DEFAULT_SAFE_AREA_EDGES\n            }\n            leading={\n              <>\n                {canPop && (\n                  <ToolbarControlGroup\n                    appearance=\"borderless\"\n                    shape=\"rounded\"\n                    content={backText ? 'mixed' : 'icon'}\n                    single\n                  >\n                    <button\n                      type=\"button\"\n                      class=\"kui-nav-stack__back\"\n                      data-nav-back\n                      aria-label={backText ? undefined : backLabel}\n                    >\n                      {backIcon ?? (\n                        <LucideIcon\n                          icon={ChevronLeft}\n                          name=\"chevron-left\"\n                          className=\"kui-nav-stack__back-icon\"\n                        />\n                      )}\n                      {backText ? <span>{backText}</span> : null}\n                    </button>\n                  </ToolbarControlGroup>\n                )}\n                {top?.leading}\n                <ToolbarText\n                  text={top?.title ?? ''}\n                  size={toolbarConfig.titleSize ?? 'large'}\n                  headingLevel={toolbarConfig.headingLevel}\n                  fill\n                />\n              </>\n            }\n            center={top?.center}\n            trailing={top?.toolbar}\n          />\n        </div>\n      )}\n      <div class=\"kui-nav-stack__viewport\" data-nav-stack-viewport>\n        {views.map((view, index) => (\n          <article\n            class=\"kui-nav-stack__view\"\n            data-key={view.key}\n            data-nav-key={view.key}\n            data-nav-active={String(index === topIndex)}\n            aria-hidden={String(index !== topIndex)}\n          >\n            {view.content}\n          </article>\n        ))}\n      </div>\n      {(top?.bottomToolbar ?? bottomToolbar) && (\n        <footer class=\"kui-nav-stack__bottom\" data-nav-stack-bottom>\n          {top?.bottomToolbar ?? bottomToolbar}\n        </footer>\n      )}\n    </section>\n  );\n}\n"]}

package/dist/chunk-5Q3N6EV7.js

@@ -0,0 +1,156 @@
+import { Text } from './chunk-AUKT3KMG.js';
+import { DisclosureArrow } from './chunk-KROD7KZK.js';
+import { Skeleton } from './chunk-AHEG27M7.js';
+import { Badge } from './chunk-MP2GDBQZ.js';
+import { filterDataAttributes, filterControlAttributes } from './chunk-SRSJO5QE.js';
+import { em } from './chunk-2G2ZJQYK.js';
+import { jsx, jsxs } from 'kerfjs/jsx-runtime';
+
+var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-action",
+  "data-has-badge",
+  "data-has-count",
+  "data-density",
+  "data-divider",
+  "data-inline",
+  "data-width",
+  "data-indicator-tone",
+  "data-toggle"
+]);
+var PROTECTED_TRIGGER_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "data-action",
+  "data-kui-disabled"
+]);
+function ListHeader({
+  label,
+  headingLevel = 2,
+  count,
+  countLabel,
+  badge,
+  status,
+  density = "standard",
+  divider = "none",
+  inline = false,
+  width = "fill",
+  indicatorTone = "neutral",
+  action,
+  actionLabel,
+  actionIcon,
+  actionDisabled = false,
+  disabledReason,
+  expanded,
+  toggle = false,
+  placeholder = false,
+  rootAttributes = {},
+  triggerAttributes = {},
+  slot
+}) {
+  const extensionRootAttributes = filterDataAttributes(
+    rootAttributes,
+    PROTECTED_ROOT_DATA_ATTRIBUTES
+  );
+  const extensionTriggerAttributes = filterControlAttributes(
+    triggerAttributes,
+    PROTECTED_TRIGGER_DATA_ATTRIBUTES
+  );
+  const normalizedCount = typeof count === "number" && Number.isSafeInteger(count) && count >= 0 ? count : void 0;
+  const normalizedCountLabel = normalizedCount === void 0 ? void 0 : typeof countLabel === "string" && countLabel.trim() ? countLabel : String(normalizedCount);
+  const renderedBadge = normalizedCount === void 0 ? status ?? badge : void 0;
+  const renderedActionIcon = actionIcon ?? (toggle ? /* @__PURE__ */ jsx(DisclosureArrow, { open: Boolean(expanded) }) : void 0);
+  const accessibleLabel = normalizedCount === void 0 ? void 0 : `${label}, ${normalizedCountLabel}`;
+  const badgeTone = indicatorTone === "accent" ? "brand" : indicatorTone;
+  const indicator = placeholder ? (normalizedCount !== void 0 || renderedBadge) && /* @__PURE__ */ jsx(Badge, { size: "compact", tone: badgeTone, children: /* @__PURE__ */ jsx(Skeleton, { width: em(1.75) }) }) : normalizedCount === void 0 ? renderedBadge && /* @__PURE__ */ jsx(Badge, { size: "compact", tone: badgeTone, children: renderedBadge }) : /* @__PURE__ */ jsx(Badge, { size: "compact", tone: badgeTone, ariaHidden: true, children: normalizedCount });
+  const busy = placeholder ? "true" : void 0;
+  if (toggle) {
+    return /* @__PURE__ */ jsx(
+      "header",
+      {
+        ...extensionRootAttributes,
+        class: "kui-list-header",
+        "data-component": "list-header",
+        "data-has-badge": String(Boolean(renderedBadge)),
+        "data-has-count": String(normalizedCount !== void 0),
+        "data-density": density,
+        "data-divider": divider,
+        "data-inline": String(inline),
+        "data-width": width,
+        "data-indicator-tone": indicatorTone,
+        "data-toggle": "true",
+        "data-placeholder": placeholder ? "true" : void 0,
+        "aria-busy": busy,
+        slot,
+        children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ...extensionTriggerAttributes,
+            type: "button",
+            class: "kui-list-header__title kui-list-header__toggle",
+            "data-action": placeholder ? void 0 : action,
+            title: actionDisabled ? disabledReason : void 0,
+            disabled: actionDisabled || placeholder || void 0,
+            "data-kui-disabled": actionDisabled ? "true" : void 0,
+            "aria-label": accessibleLabel,
+            "aria-expanded": String(Boolean(expanded)),
+            children: [
+              /* @__PURE__ */ jsx(Text, { variant: "span", children: label }),
+              indicator,
+              renderedActionIcon && /* @__PURE__ */ jsx("span", { class: "kui-list-header__action-layer", children: renderedActionIcon })
+            ]
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      ...extensionRootAttributes,
+      class: "kui-list-header",
+      "data-component": "list-header",
+      "data-has-badge": String(Boolean(renderedBadge)),
+      "data-has-count": String(normalizedCount !== void 0),
+      "data-density": density,
+      "data-divider": divider,
+      "data-inline": String(inline),
+      "data-width": width,
+      "data-indicator-tone": indicatorTone,
+      "data-toggle": "false",
+      "data-placeholder": placeholder ? "true" : void 0,
+      "aria-busy": busy,
+      slot,
+      children: [
+        /* @__PURE__ */ jsxs("div", { class: "kui-list-header__title", children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              variant: `h${headingLevel}`,
+              border: "none",
+              "aria-label": accessibleLabel,
+              children: label
+            }
+          ),
+          indicator
+        ] }),
+        action && /* @__PURE__ */ jsx(
+          "button",
+          {
+            ...extensionTriggerAttributes,
+            type: "button",
+            class: "kui-list-header__action",
+            "data-action": placeholder ? void 0 : action,
+            "aria-label": actionLabel,
+            title: actionDisabled ? disabledReason : actionLabel,
+            disabled: actionDisabled || placeholder || void 0,
+            "data-kui-disabled": actionDisabled ? "true" : void 0,
+            children: renderedActionIcon
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { ListHeader };
+
+//# sourceMappingURL=chunk-5Q3N6EV7.js.map

package/dist/chunk-5Q3N6EV7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/list-header.tsx"],"names":[],"mappings":";;;;;;;;AAaA,IAAM,8BAAA,uBAAqC,GAAA,CAAI;AAAA,EAC7C,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA,gBAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,qBAAA;AAAA,EACA;AACF,CAAC,CAAA;AACD,IAAM,iCAAA,uBAAwC,GAAA,CAAI;AAAA,EAChD,aAAA;AAAA,EACA;AACF,CAAC,CAAA;AAkGM,SAAS,UAAA,CAAW;AAAA,EACzB,KAAA;AAAA,EACA,YAAA,GAAe,CAAA;AAAA,EACf,KAAA;AAAA,EACA,UAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,GAAU,UAAA;AAAA,EACV,OAAA,GAAU,MAAA;AAAA,EACV,MAAA,GAAS,KAAA;AAAA,EACT,KAAA,GAAQ,MAAA;AAAA,EACR,aAAA,GAAgB,SAAA;AAAA,EAChB,MAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,cAAA,GAAiB,KAAA;AAAA,EACjB,cAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA,GAAS,KAAA;AAAA,EACT,WAAA,GAAc,KAAA;AAAA,EACd,iBAAiB,EAAC;AAAA,EAClB,oBAAoB,EAAC;AAAA,EACrB;AACF,CAAA,EAAoB;AAClB,EAAA,MAAM,uBAAA,GAA0B,oBAAA;AAAA,IAC9B,cAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,0BAAA,GAA6B,uBAAA;AAAA,IACjC,iBAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,eAAA,GACJ,OAAO,KAAA,KAAU,QAAA,IAAY,MAAA,CAAO,cAAc,KAAK,CAAA,IAAK,KAAA,IAAS,CAAA,GACjE,KAAA,GACA,MAAA;AACN,EAAA,MAAM,oBAAA,GACJ,eAAA,KAAoB,MAAA,GAChB,MAAA,GACA,OAAO,UAAA,KAAe,QAAA,IAAY,UAAA,CAAW,IAAA,EAAK,GAChD,UAAA,GACA,MAAA,CAAO,eAAe,CAAA;AAC9B,EAAA,MAAM,aAAA,GACJ,eAAA,KAAoB,MAAA,GAAa,MAAA,IAAU,KAAA,GAAS,MAAA;AACtD,EAAA,MAAM,kBAAA,GACJ,eACC,MAAA,mBAAS,GAAA,CAAC,mBAAgB,IAAA,EAAM,OAAA,CAAQ,QAAQ,CAAA,EAAG,CAAA,GAAK,MAAA,CAAA;AAC3D,EAAA,MAAM,kBACJ,eAAA,KAAoB,MAAA,GAChB,SACA,CAAA,EAAG,KAAK,KAAK,oBAAoB,CAAA,CAAA;AACvC,EAAA,MAAM,SAAA,GACJ,aAAA,KAAkB,QAAA,GAAW,OAAA,GAAU,aAAA;AACzC,EAAA,MAAM,YAAY,WAAA,GAAA,CACf,eAAA,KAAoB,MAAA,IAAa,aAAA,yBAC/B,KAAA,EAAA,EAAM,IAAA,EAAK,SAAA,EAAU,IAAA,EAAM,WAC1B,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,OAAO,EAAA,CAAG,IAAI,GAAG,CAAA,EAC7B,CAAA,GAEA,eAAA,KAAoB,MAAA,GACtB,iCACE,GAAA,CAAC,KAAA,EAAA,EAAM,IAAA,EAAK,SAAA,EAAU,MAAM,SAAA,EACzB,QAAA,EAAA,aAAA,EACH,CAAA,mBAGF,GAAA,CAAC,SAAM,IAAA,EAAK,SAAA,EAAU,MAAM,SAAA,EAAW,UAAA,EAAU,MAC9C,QAAA,EAAA,eAAA,EACH,CAAA;AAEF,EAAA,MAAM,IAAA,GAAO,cAAe,MAAA,GAAmB,MAAA;AAC/C,EAAA,IAAI,MAAA,EAAQ;AACV,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACE,GAAG,uBAAA;AAAA,QACJ,KAAA,EAAM,iBAAA;AAAA,QACN,gBAAA,EAAe,aAAA;AAAA,QACf,gBAAA,EAAgB,MAAA,CAAO,OAAA,CAAQ,aAAa,CAAC,CAAA;AAAA,QAC7C,gBAAA,EAAgB,MAAA,CAAO,eAAA,KAAoB,MAAS,CAAA;AAAA,QACpD,cAAA,EAAc,OAAA;AAAA,QACd,cAAA,EAAc,OAAA;AAAA,QACd,aAAA,EAAa,OAAO,MAAM,CAAA;AAAA,QAC1B,YAAA,EAAY,KAAA;AAAA,QACZ,qBAAA,EAAqB,aAAA;AAAA,QACrB,aAAA,EAAY,MAAA;AAAA,QACZ,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,QACzC,WAAA,EAAW,IAAA;AAAA,QACX,IAAA;AAAA,QAEA,QAAA,kBAAA,IAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACE,GAAG,0BAAA;AAAA,YACJ,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAM,gDAAA;AAAA,YACN,aAAA,EAAa,cAAc,MAAA,GAAY,MAAA;AAAA,YACvC,KAAA,EAAO,iBAAiB,cAAA,GAAiB,MAAA;AAAA,YACzC,QAAA,EAAU,kBAAkB,WAAA,IAAe,MAAA;AAAA,YAC3C,mBAAA,EAAmB,iBAAiB,MAAA,GAAS,MAAA;AAAA,YAC7C,YAAA,EAAY,eAAA;AAAA,YACZ,eAAA,EAAe,MAAA,CAAO,OAAA,CAAQ,QAAQ,CAAC,CAAA;AAAA,YAEvC,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,MAAA,EAAQ,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,cAC3B,SAAA;AAAA,cACA,kBAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,iCACT,QAAA,EAAA,kBAAA,EACH;AAAA;AAAA;AAAA;AAEJ;AAAA,KACF;AAAA,EAEJ;AACA,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,uBAAA;AAAA,MACJ,KAAA,EAAM,iBAAA;AAAA,MACN,gBAAA,EAAe,aAAA;AAAA,MACf,gBAAA,EAAgB,MAAA,CAAO,OAAA,CAAQ,aAAa,CAAC,CAAA;AAAA,MAC7C,gBAAA,EAAgB,MAAA,CAAO,eAAA,KAAoB,MAAS,CAAA;AAAA,MACpD,cAAA,EAAc,OAAA;AAAA,MACd,cAAA,EAAc,OAAA;AAAA,MACd,aAAA,EAAa,OAAO,MAAM,CAAA;AAAA,MAC1B,YAAA,EAAY,KAAA;AAAA,MACZ,qBAAA,EAAqB,aAAA;AAAA,MACrB,aAAA,EAAY,OAAA;AAAA,MACZ,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,WAAA,EAAW,IAAA;AAAA,MACX,IAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,OAAM,wBAAA,EACT,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,OAAA,EAAS,IAAI,YAAY,CAAA,CAAA;AAAA,cACzB,MAAA,EAAO,MAAA;AAAA,cACP,YAAA,EAAY,eAAA;AAAA,cAEX,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UACC;AAAA,SAAA,EACH,CAAA;AAAA,QACC,MAAA,oBACC,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACE,GAAG,0BAAA;AAAA,YACJ,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAM,yBAAA;AAAA,YACN,aAAA,EAAa,cAAc,MAAA,GAAY,MAAA;AAAA,YACvC,YAAA,EAAY,WAAA;AAAA,YACZ,KAAA,EAAO,iBAAiB,cAAA,GAAiB,WAAA;AAAA,YACzC,QAAA,EAAU,kBAAkB,WAAA,IAAe,MAAA;AAAA,YAC3C,mBAAA,EAAmB,iBAAiB,MAAA,GAAS,MAAA;AAAA,YAE5C,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,GAEJ;AAEJ","file":"chunk-5Q3N6EV7.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { Badge, type BadgeTone } from './badge.js';\nimport { em } from './css-values.js';\nimport { DisclosureArrow } from './disclosure-arrow.js';\nimport {\n  filterControlAttributes,\n  filterDataAttributes,\n} from './extension-attributes.js';\nimport { Skeleton } from './skeleton.js';\nimport { Text } from './text.js';\nimport type { HeadingLevel } from './toolbar-text.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-has-badge',\n  'data-has-count',\n  'data-density',\n  'data-divider',\n  'data-inline',\n  'data-width',\n  'data-indicator-tone',\n  'data-toggle',\n]);\nconst PROTECTED_TRIGGER_DATA_ATTRIBUTES = new Set([\n  'data-action',\n  'data-kui-disabled',\n]);\n\ntype ListHeaderRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-has-badge'?: never;\n    'data-has-count'?: never;\n    'data-density'?: never;\n    'data-divider'?: never;\n    'data-inline'?: never;\n    'data-width'?: never;\n    'data-indicator-tone'?: never;\n    'data-toggle'?: never;\n  }\n>;\n\ntype ListHeaderTriggerAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-action'?: never;\n    'data-kui-disabled'?: never;\n    popoverTarget?: string;\n    popoverTargetAction?: 'toggle' | 'show' | 'hide';\n    'aria-controls'?: string;\n    'aria-haspopup'?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | 'true';\n  }\n>;\n\ninterface ListHeaderBaseProps {\n  label: string;\n  density?: 'standard' | 'compact';\n  divider?: 'none' | 'before' | 'after' | 'both';\n  /** Shrink-wrap the header without its default outer margin, border, or padding. */\n  inline?: boolean;\n  /** Fill the available row or shrink-wrap while retaining normal header geometry. */\n  width?: 'fill' | 'content';\n  indicatorTone?: 'neutral' | 'accent' | 'pop' | 'danger';\n  /** Render as an unanimated loading skeleton: keep the label and action affordance, disable interaction. */\n  placeholder?: boolean;\n  rootAttributes?: ListHeaderRootAttributes;\n  triggerAttributes?: ListHeaderTriggerAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\ntype ListHeaderModeProps =\n  | {\n      /** Render the title as a controlled disclosure trigger. */\n      toggle: true;\n      /** A toggle's label is its button text, not a heading. */\n      headingLevel?: never;\n      action: string;\n      expanded: boolean;\n      actionIcon?: SafeHtml;\n      actionLabel?: never;\n      actionDisabled?: boolean;\n      disabledReason?: string;\n    }\n  | {\n      /** Render a separately named trailing action. */\n      toggle?: false;\n      /**\n       * Native heading level (`h1`–`h6`) of the label. Default `2`. Match the\n       * document outline; the visual treatment does not change.\n       */\n      headingLevel?: HeadingLevel;\n      action: string;\n      actionLabel: string;\n      actionIcon: SafeHtml;\n      expanded?: never;\n      actionDisabled?: boolean;\n      disabledReason?: string;\n    }\n  | {\n      /** Render a passive section heading. */\n      toggle?: false;\n      /**\n       * Native heading level (`h1`–`h6`) of the label. Default `2`. Match the\n       * document outline; the visual treatment does not change.\n       */\n      headingLevel?: HeadingLevel;\n      action?: never;\n      actionLabel?: never;\n      actionIcon?: never;\n      expanded?: never;\n      actionDisabled?: never;\n      disabledReason?: never;\n    };\n\ntype ListHeaderIndicatorProps =\n  | { count: number; countLabel: string; badge?: never; status?: never }\n  | { count?: never; countLabel?: never; badge: SafeHtml; status?: never }\n  | { count?: never; countLabel?: never; badge?: never; status?: SafeHtml };\n\nexport type ListHeaderProps = ListHeaderBaseProps &\n  ListHeaderIndicatorProps &\n  ListHeaderModeProps;\n\nexport function ListHeader({\n  label,\n  headingLevel = 2,\n  count,\n  countLabel,\n  badge,\n  status,\n  density = 'standard',\n  divider = 'none',\n  inline = false,\n  width = 'fill',\n  indicatorTone = 'neutral',\n  action,\n  actionLabel,\n  actionIcon,\n  actionDisabled = false,\n  disabledReason,\n  expanded,\n  toggle = false,\n  placeholder = false,\n  rootAttributes = {},\n  triggerAttributes = {},\n  slot,\n}: ListHeaderProps) {\n  const extensionRootAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  const extensionTriggerAttributes = filterControlAttributes(\n    triggerAttributes,\n    PROTECTED_TRIGGER_DATA_ATTRIBUTES,\n  );\n  const normalizedCount =\n    typeof count === 'number' && Number.isSafeInteger(count) && count >= 0\n      ? count\n      : undefined;\n  const normalizedCountLabel =\n    normalizedCount === undefined\n      ? undefined\n      : typeof countLabel === 'string' && countLabel.trim()\n        ? countLabel\n        : String(normalizedCount);\n  const renderedBadge =\n    normalizedCount === undefined ? (status ?? badge) : undefined;\n  const renderedActionIcon =\n    actionIcon ??\n    (toggle ? <DisclosureArrow open={Boolean(expanded)} /> : undefined);\n  const accessibleLabel =\n    normalizedCount === undefined\n      ? undefined\n      : `${label}, ${normalizedCountLabel}`;\n  const badgeTone: BadgeTone =\n    indicatorTone === 'accent' ? 'brand' : indicatorTone;\n  const indicator = placeholder ? (\n    (normalizedCount !== undefined || renderedBadge) && (\n      <Badge size=\"compact\" tone={badgeTone}>\n        <Skeleton width={em(1.75)} />\n      </Badge>\n    )\n  ) : normalizedCount === undefined ? (\n    renderedBadge && (\n      <Badge size=\"compact\" tone={badgeTone}>\n        {renderedBadge}\n      </Badge>\n    )\n  ) : (\n    <Badge size=\"compact\" tone={badgeTone} ariaHidden>\n      {normalizedCount}\n    </Badge>\n  );\n  const busy = placeholder ? ('true' as const) : undefined;\n  if (toggle) {\n    return (\n      <header\n        {...extensionRootAttributes}\n        class=\"kui-list-header\"\n        data-component=\"list-header\"\n        data-has-badge={String(Boolean(renderedBadge))}\n        data-has-count={String(normalizedCount !== undefined)}\n        data-density={density}\n        data-divider={divider}\n        data-inline={String(inline)}\n        data-width={width}\n        data-indicator-tone={indicatorTone}\n        data-toggle=\"true\"\n        data-placeholder={placeholder ? 'true' : undefined}\n        aria-busy={busy}\n        slot={slot}\n      >\n        <button\n          {...extensionTriggerAttributes}\n          type=\"button\"\n          class=\"kui-list-header__title kui-list-header__toggle\"\n          data-action={placeholder ? undefined : action}\n          title={actionDisabled ? disabledReason : undefined}\n          disabled={actionDisabled || placeholder || undefined}\n          data-kui-disabled={actionDisabled ? 'true' : undefined}\n          aria-label={accessibleLabel}\n          aria-expanded={String(Boolean(expanded))}\n        >\n          <Text variant=\"span\">{label}</Text>\n          {indicator}\n          {renderedActionIcon && (\n            <span class=\"kui-list-header__action-layer\">\n              {renderedActionIcon}\n            </span>\n          )}\n        </button>\n      </header>\n    );\n  }\n  return (\n    <header\n      {...extensionRootAttributes}\n      class=\"kui-list-header\"\n      data-component=\"list-header\"\n      data-has-badge={String(Boolean(renderedBadge))}\n      data-has-count={String(normalizedCount !== undefined)}\n      data-density={density}\n      data-divider={divider}\n      data-inline={String(inline)}\n      data-width={width}\n      data-indicator-tone={indicatorTone}\n      data-toggle=\"false\"\n      data-placeholder={placeholder ? 'true' : undefined}\n      aria-busy={busy}\n      slot={slot}\n    >\n      <div class=\"kui-list-header__title\">\n        <Text\n          variant={`h${headingLevel}`}\n          border=\"none\"\n          aria-label={accessibleLabel}\n        >\n          {label}\n        </Text>\n        {indicator}\n      </div>\n      {action && (\n        <button\n          {...extensionTriggerAttributes}\n          type=\"button\"\n          class=\"kui-list-header__action\"\n          data-action={placeholder ? undefined : action}\n          aria-label={actionLabel}\n          title={actionDisabled ? disabledReason : actionLabel}\n          disabled={actionDisabled || placeholder || undefined}\n          data-kui-disabled={actionDisabled ? 'true' : undefined}\n        >\n          {renderedActionIcon}\n        </button>\n      )}\n    </header>\n  );\n}\n"]}

package/dist/chunk-6ZXOQEAN.js

@@ -0,0 +1,27 @@
+import { jsx } from 'kerfjs/jsx-runtime';
+
+// src/sunken-panel.tsx
+function SunkenPanel({
+  children,
+  ariaLabel,
+  shape = "rounded",
+  className = "",
+  slot
+}) {
+  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,
+      slot,
+      children
+    }
+  );
+}
+
+export { SunkenPanel };
+
+//# sourceMappingURL=chunk-6ZXOQEAN.js.map

package/dist/chunk-6ZXOQEAN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/sunken-panel.tsx"],"names":[],"mappings":";;;AAoBO,SAAS,WAAA,CAAY;AAAA,EAC1B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,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,MACZ,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-6ZXOQEAN.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  /** Native named-slot assignment when composed inside a web component. */\n  slot?: 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  slot,\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      slot={slot}\n    >\n      {children}\n    </div>\n  );\n}\n"]}

package/dist/chunk-7JUBXOIV.js

@@ -0,0 +1,103 @@
+import { isSafeHtml } from 'kerfjs';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+// src/panel-toolbar-group.ts
+var RELOCATE_ON_COLLAPSE = /* @__PURE__ */ Symbol.for(
+  "@kerfjs/ui.ToolbarControlGroup.relocateOnCollapse"
+);
+function markRelocatableGroup(group) {
+  Object.defineProperty(group, RELOCATE_ON_COLLAPSE, { value: true });
+  return group;
+}
+function isRelocatableGroup(value) {
+  return isSafeHtml(value) && value[RELOCATE_ON_COLLAPSE] === true;
+}
+function ToolbarActionLink({
+  href,
+  label,
+  icon,
+  detail,
+  ariaLabel,
+  external = false,
+  className = "",
+  slot
+}) {
+  const accessibleLabel = ariaLabel ?? `${label}${detail ? `, ${detail}` : ""}${external ? " (opens in new tab)" : ""}`;
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      class: `kui-toolbar-action-link ${className}`.trim(),
+      "data-component": "toolbar-action-link",
+      href,
+      target: external ? "_blank" : void 0,
+      rel: external ? "noopener noreferrer" : void 0,
+      "aria-label": accessibleLabel,
+      slot,
+      children: [
+        icon,
+        /* @__PURE__ */ jsx("span", { children: label }),
+        detail ? /* @__PURE__ */ jsx("code", { "aria-hidden": "true", children: detail }) : null
+      ]
+    }
+  );
+}
+function ToolbarControlGroup({
+  children,
+  label,
+  className = "",
+  expanded = false,
+  single = false,
+  appearance = "contained",
+  tone = "default",
+  buttonAppearance = "plain",
+  shape = "pill",
+  size = "default",
+  density = "comfortable",
+  content = "icon",
+  focusRing = "control",
+  selectedChrome = "raised",
+  selectedTone = "brand",
+  nestedDropdown = false,
+  menuInset = "standard",
+  overflow = "visible",
+  visibility = "always",
+  relocateOnCollapse = false,
+  scrim = false,
+  avatarImage,
+  slot
+}) {
+  const group = /* @__PURE__ */ jsx(
+    "div",
+    {
+      class: `kui-toolbar-control-group ${className}`.trim(),
+      "data-component": "toolbar-control-group",
+      role: label ? "group" : void 0,
+      "aria-label": label,
+      "data-appearance": appearance,
+      "data-tone": tone,
+      "data-button-appearance": buttonAppearance,
+      "data-expanded": String(expanded),
+      "data-single": String(single),
+      "data-shape": shape,
+      "data-size": size,
+      "data-density": density,
+      "data-content": content,
+      "data-focus-ring": focusRing,
+      "data-selected-chrome": selectedChrome,
+      "data-selected-tone": selectedTone,
+      "data-nested-dropdown": String(nestedDropdown),
+      "data-menu-inset": menuInset,
+      "data-overflow": overflow,
+      "data-visibility": visibility,
+      "data-scrim": String(scrim),
+      style: avatarImage ? `--kui-toolbar-avatar-image:url(${JSON.stringify(avatarImage)})` : void 0,
+      slot,
+      children
+    }
+  );
+  return relocateOnCollapse ? markRelocatableGroup(group) : group;
+}
+
+export { ToolbarActionLink, ToolbarControlGroup, isRelocatableGroup };
+
+//# sourceMappingURL=chunk-7JUBXOIV.js.map

package/dist/chunk-7JUBXOIV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/panel-toolbar-group.ts","../src/toolbar-control-group.tsx"],"names":[],"mappings":"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","file":"chunk-7JUBXOIV.js","sourcesContent":["import { isSafeHtml, type SafeHtml } from 'kerfjs';\n\n// A render-time annotation, shared across separately bundled UI subpaths.\n// It never appears in the DOM or changes the group's visual treatment.\nconst RELOCATE_ON_COLLAPSE = Symbol.for(\n  '@kerfjs/ui.ToolbarControlGroup.relocateOnCollapse',\n);\n\nexport function markRelocatableGroup(group: SafeHtml): SafeHtml {\n  Object.defineProperty(group, RELOCATE_ON_COLLAPSE, { value: true });\n  return group;\n}\n\nexport function isRelocatableGroup(value: unknown): value is SafeHtml {\n  return (\n    isSafeHtml(value) &&\n    (value as SafeHtml & { [RELOCATE_ON_COLLAPSE]?: boolean })[\n      RELOCATE_ON_COLLAPSE\n    ] === true\n  );\n}\n","import { markRelocatableGroup } from './panel-toolbar-group.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\nexport type ToolbarControlGroupAppearance = 'contained' | 'borderless';\nexport type ToolbarControlGroupTone = 'default' | 'dark';\nexport type ToolbarControlGroupButtonAppearance = 'plain' | 'push';\nexport type ToolbarControlGroupShape = 'pill' | 'rounded';\nexport type ToolbarControlGroupSize = 'default' | 'compact';\nexport type ToolbarControlGroupDensity = 'comfortable' | 'tight';\nexport type ToolbarControlGroupContent =\n  'icon' | 'text' | 'mixed' | 'avatar' | 'search';\nexport type ToolbarControlGroupFocusRing = 'control' | 'outline' | 'halo';\nexport type ToolbarControlGroupSelectedChrome = 'raised' | 'filled' | 'outline';\nexport type ToolbarControlGroupSelectedTone = 'brand' | 'neutral' | 'pop';\nexport type ToolbarControlGroupOverflow = 'visible' | 'scroll';\nexport type ToolbarControlGroupMenuInset = 'standard' | 'compact' | 'list-zero';\nexport type ToolbarControlGroupVisibility = 'always' | 'compact-only';\n\nexport interface ToolbarActionLinkProps {\n  href: string;\n  label: string;\n  icon?: KerfUiContent;\n  /** Optional machine-readable detail hidden visually but included in the default accessible name. */\n  detail?: string;\n  /** Override the accessible name when surrounding context is needed. */\n  ariaLabel?: string;\n  /** Open in a new tab with a safe rel and announce that behavior. */\n  external?: boolean;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** A semantic anchor with ToolbarControlGroup-owned action geometry. */\nexport function ToolbarActionLink({\n  href,\n  label,\n  icon,\n  detail,\n  ariaLabel,\n  external = false,\n  className = '',\n  slot,\n}: ToolbarActionLinkProps) {\n  const accessibleLabel =\n    ariaLabel ??\n    `${label}${detail ? `, ${detail}` : ''}${external ? ' (opens in new tab)' : ''}`;\n  return (\n    <a\n      class={`kui-toolbar-action-link ${className}`.trim()}\n      data-component=\"toolbar-action-link\"\n      href={href}\n      target={external ? '_blank' : undefined}\n      rel={external ? 'noopener noreferrer' : undefined}\n      aria-label={accessibleLabel}\n      slot={slot}\n    >\n      {icon}\n      <span>{label}</span>\n      {detail ? <code aria-hidden=\"true\">{detail}</code> : null}\n    </a>\n  );\n}\n\nexport interface ToolbarControlGroupProps {\n  children: KerfUiContent;\n  label?: string;\n  className?: string;\n  expanded?: boolean;\n  single?: boolean;\n  appearance?: ToolbarControlGroupAppearance;\n  tone?: ToolbarControlGroupTone;\n  buttonAppearance?: ToolbarControlGroupButtonAppearance;\n  /** Corner shape: fully round `pill` (default) or a softer `rounded` rectangle. */\n  shape?: ToolbarControlGroupShape;\n  size?: ToolbarControlGroupSize;\n  density?: ToolbarControlGroupDensity;\n  content?: ToolbarControlGroupContent;\n  /** Whether controls paint focus individually or the group paints an outline/halo on focus-within. */\n  focusRing?: ToolbarControlGroupFocusRing;\n  selectedChrome?: ToolbarControlGroupSelectedChrome;\n  selectedTone?: ToolbarControlGroupSelectedTone;\n  /** Size a nested Web Awesome dropdown trigger as part of this group. */\n  nestedDropdown?: boolean;\n  /** Configure the nested dropdown menu inset without consumer ::part() CSS. */\n  menuInset?: ToolbarControlGroupMenuInset;\n  /** Keep an overlong row of actions inside the available width with horizontal scrolling. */\n  overflow?: ToolbarControlGroupOverflow;\n  /** Responsive visibility owned by the enclosing Toolbar container. */\n  visibility?: ToolbarControlGroupVisibility;\n  /** Move this group into the work-area toolbar when its panel collapses. */\n  relocateOnCollapse?: boolean;\n  /** Add contrast behind photo-backed avatar content. */\n  scrim?: boolean;\n  /**\n   * Avatar image URL. A single-control group paints it on the group; a\n   * multi-control group paints it only on the pressed selection highlight.\n   */\n  avatarImage?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport function ToolbarControlGroup({\n  children,\n  label,\n  className = '',\n  expanded = false,\n  single = false,\n  appearance = 'contained',\n  tone = 'default',\n  buttonAppearance = 'plain',\n  shape = 'pill',\n  size = 'default',\n  density = 'comfortable',\n  content = 'icon',\n  focusRing = 'control',\n  selectedChrome = 'raised',\n  selectedTone = 'brand',\n  nestedDropdown = false,\n  menuInset = 'standard',\n  overflow = 'visible',\n  visibility = 'always',\n  relocateOnCollapse = false,\n  scrim = false,\n  avatarImage,\n  slot,\n}: ToolbarControlGroupProps) {\n  const group = (\n    <div\n      class={`kui-toolbar-control-group ${className}`.trim()}\n      data-component=\"toolbar-control-group\"\n      role={label ? 'group' : undefined}\n      aria-label={label}\n      data-appearance={appearance}\n      data-tone={tone}\n      data-button-appearance={buttonAppearance}\n      data-expanded={String(expanded)}\n      data-single={String(single)}\n      data-shape={shape}\n      data-size={size}\n      data-density={density}\n      data-content={content}\n      data-focus-ring={focusRing}\n      data-selected-chrome={selectedChrome}\n      data-selected-tone={selectedTone}\n      data-nested-dropdown={String(nestedDropdown)}\n      data-menu-inset={menuInset}\n      data-overflow={overflow}\n      data-visibility={visibility}\n      data-scrim={String(scrim)}\n      style={\n        avatarImage\n          ? `--kui-toolbar-avatar-image:url(${JSON.stringify(avatarImage)})`\n          : undefined\n      }\n      slot={slot}\n    >\n      {children}\n    </div>\n  );\n  return relocateOnCollapse ? markRelocatableGroup(group) : group;\n}\n"]}