@kerfjs/ui 4.5.0-beta.1 → 5.0.0-beta.100

package/dist/chunk-QDSZTQXL.js

@@ -0,0 +1,28 @@
+// src/components/collections/list/wiring/wire-list-focus-scroll.ts
+var SCROLLABLE_LIST = '[data-component="list"][data-scrollable="true"]';
+var TOLERANCE = 0.5;
+function ringCrossesClip(element, list) {
+  const style = globalThis.getComputedStyle(element);
+  const reach = style.outlineStyle === "none" ? 0 : (Number.parseFloat(style.outlineWidth) || 0) + (Number.parseFloat(style.outlineOffset) || 0);
+  const box = element.getBoundingClientRect();
+  const clipTop = list.getBoundingClientRect().top + (Number.parseFloat(globalThis.getComputedStyle(list).borderTopWidth) || 0);
+  const clipBottom = clipTop + list.clientHeight;
+  return box.top - reach < clipTop - TOLERANCE || box.bottom + reach > clipBottom + TOLERANCE;
+}
+function wireListFocusScroll(root) {
+  const onFocusIn = (event) => {
+    const target = event.target;
+    if (!(target instanceof HTMLElement) || !target.matches(":focus-visible"))
+      return;
+    const list = target.closest(SCROLLABLE_LIST);
+    if (list === null || list === target || !ringCrossesClip(target, list))
+      return;
+    target.scrollIntoView({ block: "nearest", inline: "nearest" });
+  };
+  root.addEventListener("focusin", onFocusIn);
+  return () => root.removeEventListener("focusin", onFocusIn);
+}
+
+export { wireListFocusScroll };
+
+//# sourceMappingURL=chunk-QDSZTQXL.js.map

package/dist/chunk-QDSZTQXL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/collections/list/wiring/wire-list-focus-scroll.ts"],"names":[],"mappings":";AAEA,IAAM,eAAA,GAAkB,iDAAA;AAMxB,IAAM,SAAA,GAAY,GAAA;AAOlB,SAAS,eAAA,CAAgB,SAAsB,IAAA,EAA4B;AACzE,EAAA,MAAM,KAAA,GAAQ,UAAA,CAAW,gBAAA,CAAiB,OAAO,CAAA;AACjD,EAAA,MAAM,KAAA,GACJ,KAAA,CAAM,YAAA,KAAiB,MAAA,GACnB,KACC,MAAA,CAAO,UAAA,CAAW,KAAA,CAAM,YAAY,KAAK,CAAA,KACzC,MAAA,CAAO,UAAA,CAAW,KAAA,CAAM,aAAa,CAAA,IAAK,CAAA,CAAA;AACjD,EAAA,MAAM,GAAA,GAAM,QAAQ,qBAAA,EAAsB;AAC1C,EAAA,MAAM,OAAA,GACJ,IAAA,CAAK,qBAAA,EAAsB,CAAE,GAAA,IAC5B,MAAA,CAAO,UAAA,CAAW,UAAA,CAAW,gBAAA,CAAiB,IAAI,CAAA,CAAE,cAAc,CAAA,IAAK,CAAA,CAAA;AAC1E,EAAA,MAAM,UAAA,GAAa,UAAU,IAAA,CAAK,YAAA;AAClC,EAAA,OACE,GAAA,CAAI,MAAM,KAAA,GAAQ,OAAA,GAAU,aAC5B,GAAA,CAAI,MAAA,GAAS,QAAQ,UAAA,GAAa,SAAA;AAEtC;AAcO,SAAS,oBAAoB,IAAA,EAAwB;AAC1D,EAAA,MAAM,SAAA,GAAY,CAAC,KAAA,KAAsB;AACvC,IAAA,MAAM,SAAS,KAAA,CAAM,MAAA;AACrB,IAAA,IAAI,EAAE,MAAA,YAAkB,WAAA,CAAA,IAAgB,CAAC,MAAA,CAAO,QAAQ,gBAAgB,CAAA;AACtE,MAAA;AACF,IAAA,MAAM,IAAA,GAAO,MAAA,CAAO,OAAA,CAAqB,eAAe,CAAA;AACxD,IAAA,IAAI,SAAS,IAAA,IAAQ,IAAA,KAAS,UAAU,CAAC,eAAA,CAAgB,QAAQ,IAAI,CAAA;AACnE,MAAA;AACF,IAAA,MAAA,CAAO,eAAe,EAAE,KAAA,EAAO,SAAA,EAAW,MAAA,EAAQ,WAAW,CAAA;AAAA,EAC/D,CAAA;AACA,EAAA,IAAA,CAAK,gBAAA,CAAiB,WAAW,SAA0B,CAAA;AAC3D,EAAA,OAAO,MAAM,IAAA,CAAK,mBAAA,CAAoB,SAAA,EAAW,SAA0B,CAAA;AAC7E","file":"chunk-QDSZTQXL.js","sourcesContent":["type Root = HTMLElement | Document;\n\nconst SCROLLABLE_LIST = '[data-component=\"list\"][data-scrollable=\"true\"]';\n\n/**\n * Sub-pixel slack, in px: a row resting exactly on the clip (a fractional\n * layout position) is not worth a scroll.\n */\nconst TOLERANCE = 0.5;\n\n/**\n * Whether `element`'s focus ring (its border box grown by the outline's width\n * and offset) crosses the block edges of `list`'s scroll clip (its padding\n * box).\n */\nfunction ringCrossesClip(element: HTMLElement, list: HTMLElement): boolean {\n  const style = globalThis.getComputedStyle(element);\n  const reach =\n    style.outlineStyle === 'none'\n      ? 0\n      : (Number.parseFloat(style.outlineWidth) || 0) +\n        (Number.parseFloat(style.outlineOffset) || 0);\n  const box = element.getBoundingClientRect();\n  const clipTop =\n    list.getBoundingClientRect().top +\n    (Number.parseFloat(globalThis.getComputedStyle(list).borderTopWidth) || 0);\n  const clipBottom = clipTop + list.clientHeight;\n  return (\n    box.top - reach < clipTop - TOLERANCE ||\n    box.bottom + reach > clipBottom + TOLERANCE\n  );\n}\n\n/**\n * Bring a keyboard-focused row of a `scrollable` List below `root` fully into\n * view, focus ring included. Engines differ on how `focus()` scrolls a partly\n * hidden row: Chromium scrolls it to the nearest edge plus scroll padding,\n * Firefox waits until about half of it is hidden and then centers it, and\n * WebKit leaves it where it is. On `focusin`, when the newly focused element\n * matches `:focus-visible` and its ring crosses the nearest scrollable List's\n * clip, this calls `scrollIntoView({ block: 'nearest', inline: 'nearest' })`,\n * which honors the List's ring-room scroll padding in every engine. Pointer\n * focus is left alone, so a click never scrolls the row out from under the\n * pointer. Returns a disposer.\n */\nexport function wireListFocusScroll(root: Root): () => void {\n  const onFocusIn = (event: FocusEvent) => {\n    const target = event.target;\n    if (!(target instanceof HTMLElement) || !target.matches(':focus-visible'))\n      return;\n    const list = target.closest<HTMLElement>(SCROLLABLE_LIST);\n    if (list === null || list === target || !ringCrossesClip(target, list))\n      return;\n    target.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n  };\n  root.addEventListener('focusin', onFocusIn as EventListener);\n  return () => root.removeEventListener('focusin', onFocusIn as EventListener);\n}\n"]}

package/dist/chunk-QH5KOFNS.js

@@ -0,0 +1,39 @@
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+// src/components/feedback/edge-activity-indicator/edge-activity-indicator.tsx
+function EdgeActivityIndicator({
+  busy,
+  message,
+  tone = "info",
+  inset = "safe-area",
+  className = ""
+}) {
+  const showMessage = busy && Boolean(message?.trim());
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      class: `kui-edge-activity-indicator ${className}`.trim(),
+      "data-component": "edge-activity-indicator",
+      "data-tone": tone,
+      "data-busy": busy ? "true" : "false",
+      "data-inset": inset,
+      children: [
+        /* @__PURE__ */ jsx("div", { class: "kui-edge-activity-indicator__strip", "aria-hidden": "true" }),
+        message !== void 0 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            class: "kui-edge-activity-indicator__message",
+            role: "status",
+            "aria-live": "polite",
+            "data-visible": showMessage ? "true" : "false",
+            children: showMessage ? message : ""
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { EdgeActivityIndicator };
+
+//# sourceMappingURL=chunk-QH5KOFNS.js.map

package/dist/chunk-QH5KOFNS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/edge-activity-indicator/edge-activity-indicator.tsx"],"names":[],"mappings":";;;AAyBO,SAAS,qBAAA,CAAsB;AAAA,EACpC,IAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA,GAAO,MAAA;AAAA,EACP,KAAA,GAAQ,WAAA;AAAA,EACR,SAAA,GAAY;AACd,CAAA,EAA+B;AAC7B,EAAA,MAAM,WAAA,GAAc,IAAA,IAAQ,OAAA,CAAQ,OAAA,EAAS,MAAM,CAAA;AACnD,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,4BAAA,EAA+B,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACvD,gBAAA,EAAe,yBAAA;AAAA,MACf,WAAA,EAAW,IAAA;AAAA,MACX,WAAA,EAAW,OAAO,MAAA,GAAS,OAAA;AAAA,MAC3B,YAAA,EAAY,KAAA;AAAA,MAEZ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,oCAAA,EAAqC,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,QAClE,YAAY,MAAA,oBACX,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,sCAAA;AAAA,YACN,IAAA,EAAK,QAAA;AAAA,YACL,WAAA,EAAU,QAAA;AAAA,YACV,cAAA,EAAc,cAAc,MAAA,GAAS,OAAA;AAAA,YAEpC,wBAAc,OAAA,GAAU;AAAA;AAAA;AAC3B;AAAA;AAAA,GAEJ;AAEJ","file":"chunk-QH5KOFNS.js","sourcesContent":["import type { SemanticTone } from '../../../shared/styles/semantic-tone.js';\n\nexport interface EdgeActivityIndicatorProps {\n  /** Whether work is in progress; shows the strip and runs its wave. */\n  busy: boolean;\n  /**\n   * Optional status shown in a small pill hanging from the edge while busy.\n   * The pill is a polite live region; omit it for a purely decorative strip.\n   */\n  message?: string;\n  /** Strip and pill color; defaults to `info`. */\n  tone?: SemanticTone;\n  /** Clear the device's top safe area (default) or sit at the very edge. */\n  inset?: 'safe-area' | 'none';\n  className?: string;\n}\n\n/**\n * A layout-free activity strip pinned to the top edge of the viewport: a row\n * of thin bars that ripple in a traveling wave while `busy`, plus an optional\n * hanging status pill. It allocates no layout, ignores the pointer, and its\n * bars are hidden from assistive technology; only the pill announces.\n * Kerf owns the motion: it scales in from the edge and, under reduced motion,\n * only fades.\n */\nexport function EdgeActivityIndicator({\n  busy,\n  message,\n  tone = 'info',\n  inset = 'safe-area',\n  className = '',\n}: EdgeActivityIndicatorProps) {\n  const showMessage = busy && Boolean(message?.trim());\n  return (\n    <div\n      class={`kui-edge-activity-indicator ${className}`.trim()}\n      data-component=\"edge-activity-indicator\"\n      data-tone={tone}\n      data-busy={busy ? 'true' : 'false'}\n      data-inset={inset}\n    >\n      <div class=\"kui-edge-activity-indicator__strip\" aria-hidden=\"true\" />\n      {message !== undefined && (\n        <div\n          class=\"kui-edge-activity-indicator__message\"\n          role=\"status\"\n          aria-live=\"polite\"\n          data-visible={showMessage ? 'true' : 'false'}\n        >\n          {showMessage ? message : ''}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/chunk-QIG4IGUP.js

@@ -0,0 +1,139 @@
+import { LoadingSpinner } from './chunk-WVS6CUCT.js';
+import { isSafeHtml } from 'kerfjs';
+import { jsxs, jsx, Fragment } from 'kerfjs/jsx-runtime';
+
+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",
+  tileTone,
+  buttonAppearance = "plain",
+  shape = "pill",
+  size = "default",
+  density = "comfortable",
+  content = "icon",
+  focusRing = "control",
+  selectedChrome = "raised",
+  selectedTone = "brand",
+  nestedDropdown = false,
+  menuInset = "standard",
+  overflow = "visible",
+  expandedOverflow = "clip",
+  visibility = "always",
+  hideBelow,
+  showBelow,
+  sizing = "content",
+  placement = "start",
+  growBasis,
+  relocateOnCollapse = false,
+  scrim = false,
+  busy = false,
+  busyLabel = "Working",
+  avatarImage,
+  slot
+}) {
+  const inlineStyles = [
+    avatarImage ? `--kui-toolbar-avatar-image:url(${JSON.stringify(avatarImage)})` : "",
+    growBasis ? `--kui-toolbar-group-grow-basis:${growBasis}` : ""
+  ].filter(Boolean);
+  const group = /* @__PURE__ */ jsxs(
+    "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-tile-tone": tileTone,
+      "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-expanded-overflow": expandedOverflow === "visible" ? "visible" : void 0,
+      "data-visibility": visibility,
+      "data-hide-below": hideBelow,
+      "data-show-below": showBelow,
+      "data-sizing": sizing,
+      "data-placement": placement,
+      "data-scrim": String(scrim),
+      "data-busy": String(busy),
+      "aria-busy": busy ? "true" : void 0,
+      inert: busy,
+      style: inlineStyles.length ? inlineStyles.join(";") : void 0,
+      slot,
+      children: [
+        children,
+        busy ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            class: "kui-toolbar-control-group__busy-spinner",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx(LoadingSpinner, {})
+          }
+        ) : null
+      ]
+    }
+  );
+  const renderedGroup = busy ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    group,
+    /* @__PURE__ */ jsx("span", { class: "kui-toolbar-control-group__busy-status", role: "status", children: busyLabel })
+  ] }) : group;
+  return relocateOnCollapse ? markRelocatableGroup(renderedGroup) : renderedGroup;
+}
+
+export { ToolbarActionLink, ToolbarControlGroup, isRelocatableGroup };
+
+//# sourceMappingURL=chunk-QIG4IGUP.js.map

package/dist/chunk-QIG4IGUP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/panels/panel-toolbar-group.ts","../src/components/actions/toolbar-control-group/toolbar-control-group.tsx"],"names":[],"mappings":"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","file":"chunk-QIG4IGUP.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 type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { markRelocatableGroup } from '../../../shared/panels/panel-toolbar-group.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\nimport { LoadingSpinner } from '../../feedback/loading-spinner/loading-spinner.js';\n\nexport type ToolbarControlGroupAppearance = 'contained' | 'borderless';\nexport type ToolbarControlGroupTone = 'default' | 'dark';\n/** Quiet palette for a contained, single decorative icon tile. */\nexport type ToolbarControlGroupTileTone =\n  'neutral' | 'brand' | 'success' | 'warning' | 'danger';\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 =\n  'raised' | 'filled' | 'outline' | 'none';\nexport type ToolbarControlGroupSelectedTone = 'brand' | 'neutral' | 'pop';\nexport type ToolbarControlGroupOverflow = 'visible' | 'scroll' | 'wrap';\nexport type ToolbarControlGroupExpandedOverflow = 'clip' | 'visible';\nexport type ToolbarControlGroupMenuInset = 'standard' | 'compact' | 'list-zero';\nexport type ToolbarControlGroupVisibility =\n  | 'always'\n  | 'compact-only'\n  | 'hide-collapsed-tiny'\n  | 'yield-to-expanded-sibling';\nexport type ToolbarControlGroupSizing = 'content' | 'grow' | 'fill';\nexport type ToolbarControlGroupPlacement = 'start' | 'end';\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  /** Quiet fill, matching border and foreground for a contained single group whose only child is a decorative SVG. Ignored for interactive or mixed content. */\n  tileTone?: ToolbarControlGroupTileTone;\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  /**\n   * Chrome a pressed (`aria-pressed=\"true\"`) control paints. `none` keeps a\n   * pressed control looking like its neighbors, for an icon-state toggle whose\n   * glyph already shows the state (an empty or filled star); hover and the\n   * focus ring are unchanged. One control can opt out alone with\n   * `data-selected-chrome=\"none\"` on its own button.\n   */\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 inside the available width by scrolling or wrapping. */\n  overflow?: ToolbarControlGroupOverflow;\n  /** Let app-owned anchored surfaces extend outside an expanded search group. Collapsed searches retain their clipping. */\n  expandedOverflow?: ToolbarControlGroupExpandedOverflow;\n  /** Responsive visibility owned by the enclosing Toolbar container. */\n  visibility?: ToolbarControlGroupVisibility;\n  /** Hide below this Toolbar content width; requires wireToolbarVisibility. */\n  hideBelow?: CssLength;\n  /** Show only below this Toolbar content width; requires wireToolbarVisibility. */\n  showBelow?: CssLength;\n  /** Intrinsic (default), grow from a basis, or occupy a full wrapping row. */\n  sizing?: ToolbarControlGroupSizing;\n  /** Place this group at the end of its flex row in a wrapping Toolbar zone. */\n  placement?: ToolbarControlGroupPlacement;\n  /** CSS length used as the minimum width and flex basis for `sizing=\"grow\"`; defaults to 19rem. */\n  growBasis?: string;\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  /** Block the group's controls and show a spinner without changing its dimensions. */\n  busy?: boolean;\n  /** Announced status while busy; defaults to “Working”. */\n  busyLabel?: string;\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  tileTone,\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  expandedOverflow = 'clip',\n  visibility = 'always',\n  hideBelow,\n  showBelow,\n  sizing = 'content',\n  placement = 'start',\n  growBasis,\n  relocateOnCollapse = false,\n  scrim = false,\n  busy = false,\n  busyLabel = 'Working',\n  avatarImage,\n  slot,\n}: ToolbarControlGroupProps) {\n  const inlineStyles = [\n    avatarImage\n      ? `--kui-toolbar-avatar-image:url(${JSON.stringify(avatarImage)})`\n      : '',\n    growBasis ? `--kui-toolbar-group-grow-basis:${growBasis}` : '',\n  ].filter(Boolean);\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-tile-tone={tileTone}\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-expanded-overflow={\n        expandedOverflow === 'visible' ? 'visible' : undefined\n      }\n      data-visibility={visibility}\n      data-hide-below={hideBelow}\n      data-show-below={showBelow}\n      data-sizing={sizing}\n      data-placement={placement}\n      data-scrim={String(scrim)}\n      data-busy={String(busy)}\n      aria-busy={busy ? 'true' : undefined}\n      inert={busy}\n      style={inlineStyles.length ? inlineStyles.join(';') : undefined}\n      slot={slot}\n    >\n      {children}\n      {busy ? (\n        <span\n          class=\"kui-toolbar-control-group__busy-spinner\"\n          aria-hidden=\"true\"\n        >\n          <LoadingSpinner />\n        </span>\n      ) : null}\n    </div>\n  );\n  const renderedGroup = busy ? (\n    <>\n      {group}\n      <span class=\"kui-toolbar-control-group__busy-status\" role=\"status\">\n        {busyLabel}\n      </span>\n    </>\n  ) : (\n    group\n  );\n  return relocateOnCollapse\n    ? markRelocatableGroup(renderedGroup)\n    : renderedGroup;\n}\n"]}