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

package/dist/chunk-CMLPFIC5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/actions/toolbar/toolbar.tsx"],"names":[],"mappings":";;;AAoFA,IAAM,KAAA,GAAQ,CACZ,KAAA,EACA,IAAA,KACI,OAAO,QAAA,CAAS,IAAI,IAAI,MAAA,GAAS,MAAA;AAEhC,SAAS,OAAA,CAAQ;AAAA,EACtB,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA,GAAW,QAAA;AAAA,EACX,OAAA,GAAU,SAAA;AAAA,EACV,YAAA,GAAe,EAAA;AAAA,EACf,WAAA,GAAc,QAAA;AAAA,EACd,UAAA,GAAa,MAAA;AAAA,EACb,YAAA,GAAe,QAAA;AAAA,EACf,aAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAiB;AACf,EAAA,MAAM,UAAA,GAAa;AAAA,IACjB,KAAA,EAAO,CAAA,YAAA,EAAe,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,IACvC,gBAAA,EAAkB,SAAA;AAAA,IAClB,cAAA,EAAgB,OAAA,KAAY,SAAA,GAAY,SAAA,GAAY,MAAA;AAAA,IACpD,iBAAiB,YAAA,IAAgB,MAAA;AAAA,IACjC,iBAAA,EAAmB,MAAA,CAAO,OAAA,CAAQ,MAAM,CAAC,CAAA;AAAA,IACzC,mBAAA,EAAqB,WAAA;AAAA,IACrB,iBAAA,EAAmB,UAAA;AAAA,IACnB,oBAAA,EAAsB,YAAA;AAAA,IACtB,4BAAA,EAA8B,KAAA,CAAM,aAAA,EAAe,aAAa,CAAA;AAAA,IAChE,0BAAA,EAA4B,KAAA,CAAM,aAAA,EAAe,WAAW,CAAA;AAAA,IAC5D,6BAAA,EAA+B,KAAA,CAAM,aAAA,EAAe,cAAc,CAAA;AAAA,IAClE,2BAAA,EAA6B,KAAA,CAAM,aAAA,EAAe,YAAY,CAAA;AAAA,IAC9D,YAAA,EAAc,KAAA;AAAA,IACd;AAAA,GACF;AACA,EAAA,MAAM,wBACJ,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,sBAAA,EAAwB,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,oBAC3C,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,qBAAA,EAAuB,QAAA,EAAA,MAAA,EAAO,CAAA;AAAA,oBACzC,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,uBAAA,EAAyB,QAAA,EAAA,QAAA,EAAS;AAAA,GAAA,EAC/C,CAAA;AAEF,EAAA,OAAO,QAAA,KAAa,QAAA,mBAClB,GAAA,CAAC,QAAA,EAAA,EAAQ,GAAG,UAAA,EAAa,QAAA,EAAA,KAAA,EAAM,CAAA,mBAE/B,GAAA,CAAC,QAAA,EAAA,EAAQ,GAAG,UAAA,EAAa,QAAA,EAAA,KAAA,EAAM,CAAA;AAEnC","file":"chunk-CMLPFIC5.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { Sides } from '../../../shared/layout/sides.js';\nimport type { PaneSeparatorSide } from '../../layout/pane/pane.js';\n\nexport type ToolbarPosition = 'header' | 'footer';\n/** Control-band density: `default` (60px with 44px groups) or `compact`. */\nexport type ToolbarDensity = 'default' | 'compact';\n\nexport interface ToolbarProps {\n  leading?: KerfUiContent;\n  center?: KerfUiContent;\n  trailing?: KerfUiContent;\n  label?: string;\n  /** Use footer semantics for a bottom toolbar; defaults to header. */\n  position?: ToolbarPosition;\n  /**\n   * `compact` sizes the toolbar to a 34px control band with 3px block\n   * insets — 40px tall — for a header embedded in a panel or card. Fill it\n   * with `ToolbarControlGroup size=\"compact\"` groups; inline insets and the\n   * gap between zones are unchanged. Composites that render a Toolbar from a\n   * `ToolbarConfig` (Workbench, CollapsiblePanel, NavStack, SplitView) forward\n   * it and size the groups they compose to match. Defaults to `default`.\n   */\n  density?: ToolbarDensity;\n  /**\n   * Physical divider edges in canonical top/right/bottom/left order, drawn\n   * always. Defaults to none: a toolbar pinned over or under scrolling content\n   * gets its divider from the scroll state instead — a `Pane` draws the line\n   * between its chrome and content while content is scrolled away beneath it,\n   * and `wireScrollDividers` `targets` can name a toolbar as chrome, which\n   * then draws its facing side the same way.\n   */\n  dividerSides?: Sides;\n  /** `balanced` gives both side zones equal tracks, centering the middle zone on the toolbar even if only one side has controls. */\n  centerAlign?: 'center' | 'stretch' | 'balanced';\n  /**\n   * Component-owned responsive layout; applications choose the policy rather\n   * than restyling toolbar internals. Under every policy the trailing zone\n   * wraps its groups instead of clipping an action, and the center zone keeps\n   * its whole content width: when the zones do not fit one row, the leading\n   * title truncates with an ellipsis rather than the center overlapping it.\n   * - `none` keeps one row; the leading identity truncates first.\n   * - `stack` stacks the zones at `responsiveAt`, wrapping stacked control\n   *   groups onto further rows.\n   * - `wrap` keeps one row while every zone fits at its natural width, and\n   *   otherwise moves the trailing zone below a whole leading identity.\n   * - `center-priority` gives an expanded center control the full row.\n   * - `trailing-priority` moves an expanded trailing control to a full row\n   *   below the leading identity at `responsiveAt`.\n   */\n  responsive?:\n    'none' | 'stack' | 'wrap' | 'center-priority' | 'trailing-priority';\n  /** Container width at which `stack` or `trailing-priority` activates. */\n  responsiveAt?: 'compact' | 'narrow';\n  /**\n   * Screen edges this toolbar claims for device safe-area compensation, for an\n   * app bar or bottom bar that sits directly at a screen edge rather than in a\n   * Pane header or footer. Each listed side pads by the inset its surrounding\n   * layout reports through `--kui-edge-inset-*`, or the full device inset when\n   * nothing routes that edge, while the toolbar's box and dividers paint\n   * through. Omitted, the toolbar pads only the inline edges an owner such as\n   * a Pane header hands it, and never a block edge.\n   */\n  safeAreaEdges?: readonly PaneSeparatorSide[];\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A toolbar's configuration, apart from its content: the props a composite\n * that renders a `Toolbar` for the app (a Workbench or CollapsiblePanel\n * toolbar) forwards, so the app configures that toolbar instead of styling it.\n */\nexport type ToolbarConfig = Pick<\n  ToolbarProps,\n  | 'density'\n  | 'dividerSides'\n  | 'centerAlign'\n  | 'responsive'\n  | 'responsiveAt'\n  | 'safeAreaEdges'\n>;\n\nconst claim = (\n  edges: readonly PaneSeparatorSide[] | undefined,\n  side: PaneSeparatorSide,\n) => (edges?.includes(side) ? 'true' : undefined);\n\nexport function Toolbar({\n  leading,\n  center,\n  trailing,\n  label,\n  position = 'header',\n  density = 'default',\n  dividerSides = '',\n  centerAlign = 'center',\n  responsive = 'none',\n  responsiveAt = 'narrow',\n  safeAreaEdges,\n  className = '',\n  slot,\n}: ToolbarProps) {\n  const attributes = {\n    class: `kui-toolbar ${className}`.trim(),\n    'data-component': 'toolbar',\n    'data-density': density === 'compact' ? 'compact' : undefined,\n    'divider-sides': dividerSides || undefined,\n    'data-has-center': String(Boolean(center)),\n    'data-center-align': centerAlign,\n    'data-responsive': responsive,\n    'data-responsive-at': responsiveAt,\n    'data-safe-area-block-start': claim(safeAreaEdges, 'block-start'),\n    'data-safe-area-block-end': claim(safeAreaEdges, 'block-end'),\n    'data-safe-area-inline-start': claim(safeAreaEdges, 'inline-start'),\n    'data-safe-area-inline-end': claim(safeAreaEdges, 'inline-end'),\n    'aria-label': label,\n    slot,\n  };\n  const zones = (\n    <>\n      <div class=\"kui-toolbar__leading\">{leading}</div>\n      <div class=\"kui-toolbar__center\">{center}</div>\n      <div class=\"kui-toolbar__trailing\">{trailing}</div>\n    </>\n  );\n  return position === 'footer' ? (\n    <footer {...attributes}>{zones}</footer>\n  ) : (\n    <header {...attributes}>{zones}</header>\n  );\n}\n\nexport type { Sides } from '../../../shared/layout/sides.js';\n"]}

package/dist/{chunk-RKVQEH4J.js → chunk-CVD5IZGB.js}

@@ -1,6 +1,6 @@
+import { pct } from './chunk-IQSRHXZR.js';
 import { jsx } from 'kerfjs/jsx-runtime';
 
-// src/skeleton.tsx
 function blockStyle(width, height, radius) {
   const parts = [
     width && `width:${width}`,
@@ -14,8 +14,10 @@ function Skeleton({
   height,
   radius,
   lines,
+  block = false,
   label,
-  className = ""
+  className = "",
+  slot
 }) {
   const a11y = {
     role: label ? "img" : void 0,
@@ -30,13 +32,14 @@ function Skeleton({
         "data-component": "skeleton",
         style: width ? `width:${width}` : void 0,
         ...a11y,
+        slot,
         children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx(
           "span",
           {
             class: "kui-skeleton",
             "aria-hidden": "true",
             style: blockStyle(
-              index === lines - 1 ? "60%" : void 0,
+              index === lines - 1 ? pct(60) : void 0,
               height,
               radius
             )
@@ -50,12 +53,14 @@ function Skeleton({
     {
       class: `kui-skeleton ${className}`.trim(),
       "data-component": "skeleton",
+      "data-block": block ? "true" : void 0,
       style: blockStyle(width, height, radius),
-      ...a11y
+      ...a11y,
+      slot
     }
   );
 }
 
 export { Skeleton };
 
-//# sourceMappingURL=chunk-RKVQEH4J.js.map
+//# sourceMappingURL=chunk-CVD5IZGB.js.map

package/dist/chunk-CVD5IZGB.js.map

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

package/dist/chunk-CXZXHZTR.js

@@ -0,0 +1,514 @@
+// src/wiring/wire-scroll-dividers.ts
+var EDGES = ["t", "r", "b", "l"];
+var FACING = { t: "b", r: "l", b: "t", l: "r" };
+var TARGET_EDGES = {
+  t: "top",
+  r: "right",
+  b: "bottom",
+  l: "left"
+};
+var SCROLL_OVERFLOW = "data-scroll-overflow";
+var SCROLL_DIVIDER = "data-scroll-divider";
+var HEADER_OVERLAY = "data-header-overlay";
+var CLEARANCE_BLOCK_START = "--kui-scroll-clearance-block-start";
+var SCROLLBAR_INLINE_SIZE = "--kui-pane-scrollbar-inline-size";
+var OVERLAY_PANE = '.kui-pane[data-header-presentation="overlay"]:not([data-chrome-placement="auto"])';
+var THRESHOLD = 1;
+var quoted = (value) => `"${value.replaceAll("\\", "\\\\").replaceAll('"', '\\"')}"`;
+function within(root, selector) {
+  const found = [...root.querySelectorAll(selector)];
+  if (root.nodeType === 1 && root.matches(selector))
+    found.unshift(root);
+  return found;
+}
+var directChild = (parent, selector) => [...parent.children].find(
+  (child) => child.matches(selector)
+);
+var PANE_CHROME = {
+  t: ".kui-pane__header, .kui-pane__toolbar",
+  b: ".kui-pane__footer"
+};
+var NAV_STACK_CHROME = {
+  t: ".kui-nav-stack__chrome:not([data-nav-chrome-copy])",
+  b: ".kui-nav-stack__bottom:not([data-nav-chrome-copy])"
+};
+function activeView(stack) {
+  const viewport = directChild(stack, ".kui-nav-stack__viewport");
+  if (!viewport) return void 0;
+  return [...viewport.children].filter(
+    (child) => child.matches(
+      '.kui-nav-stack__view[data-nav-active="true"]:not([data-nav-exiting="true"])'
+    )
+  ).at(-1);
+}
+function activeScene(scaffold) {
+  const scenes = directChild(scaffold, ".kui-tab-scaffold__scenes");
+  return scenes ? directChild(scenes, '.kui-tab-scaffold__scene[data-active="true"]') : void 0;
+}
+function regionScrollers(region, edge) {
+  const found = [];
+  let current = region;
+  while (current) {
+    found.push(current);
+    if (current.children.length !== 1) break;
+    const child = current.children[0];
+    if (child.matches(".kui-pane")) {
+      current = directChild(child, PANE_CHROME[edge]) ? void 0 : directChild(child, ".kui-pane__content");
+      if (current) found.push(current);
+      break;
+    }
+    if (child.matches(".kui-nav-stack"))
+      current = directChild(child, NAV_STACK_CHROME[edge]) ? void 0 : activeView(child);
+    else if (child.matches(".kui-tab-scaffold") && edge === "t")
+      current = activeScene(child);
+    else current = void 0;
+  }
+  return found;
+}
+var sides = (edges) => EDGES.filter((edge) => edges.has(edge)).join("");
+function measure(scroller) {
+  const edges = /* @__PURE__ */ new Set();
+  const maxY = scroller.scrollHeight - scroller.clientHeight;
+  if (maxY > THRESHOLD) {
+    if (scroller.scrollTop > THRESHOLD) edges.add("t");
+    if (maxY - scroller.scrollTop > THRESHOLD) edges.add("b");
+  }
+  const maxX = scroller.scrollWidth - scroller.clientWidth;
+  if (maxX > THRESHOLD) {
+    const view = scroller.ownerDocument.defaultView;
+    const rtl = view?.getComputedStyle(scroller).direction === "rtl";
+    const left = rtl ? maxX + scroller.scrollLeft : scroller.scrollLeft;
+    if (left > THRESHOLD) edges.add("l");
+    if (maxX - left > THRESHOLD) edges.add("r");
+  }
+  return sides(edges);
+}
+var CONTROLLERS = /* @__PURE__ */ new WeakMap();
+function write(element, name, value) {
+  if (element.getAttribute(name) === (value || null)) return;
+  if (name === SCROLL_OVERFLOW) {
+    if (value) element.setAttribute(SCROLL_OVERFLOW, value);
+    else element.removeAttribute(SCROLL_OVERFLOW);
+  } else if (value) element.setAttribute(SCROLL_DIVIDER, value);
+  else element.removeAttribute(SCROLL_DIVIDER);
+}
+function wireScrollDividers(root, { targets = [] } = {}) {
+  const ownerDocument = root.nodeType === 9 ? root : root.ownerDocument;
+  let register = CONTROLLERS.get(ownerDocument);
+  if (!register) {
+    register = createController(ownerDocument);
+    CONTROLLERS.set(ownerDocument, register);
+  }
+  return register({ root, targets });
+}
+var STRUCTURAL_CLASSES = [
+  "kui-pane",
+  "kui-pane__content",
+  "kui-pane__header",
+  "kui-pane__toolbar",
+  "kui-pane__footer",
+  "kui-nav-stack",
+  "kui-nav-stack__viewport",
+  "kui-nav-stack__view",
+  "kui-nav-stack__chrome",
+  "kui-nav-stack__bottom",
+  "kui-tab-scaffold",
+  "kui-tab-scaffold__scenes",
+  "kui-tab-scaffold__scene",
+  "kui-tab-scaffold__bar"
+];
+var STRUCTURAL_SELECTOR = [
+  ...STRUCTURAL_CLASSES.map((name) => `.${name}`),
+  "[data-kui-tab-list]"
+].join(", ");
+var hasStructuralClass = (value) => !!value && value.split(/\s+/).some((token) => STRUCTURAL_CLASSES.includes(token));
+function createController(ownerDocument) {
+  const view = ownerDocument.defaultView;
+  let disposed = false;
+  const registrations = /* @__PURE__ */ new Set();
+  const listenedRoots = /* @__PURE__ */ new Set();
+  let pairings = [];
+  const overflow = /* @__PURE__ */ new Map();
+  const written = /* @__PURE__ */ new Map();
+  let overlays = /* @__PURE__ */ new Map();
+  const headerSizes = /* @__PURE__ */ new Map();
+  const scrollbarSizes = /* @__PURE__ */ new Map();
+  const published = /* @__PURE__ */ new Set();
+  const byId = (root, id) => {
+    if (!id) return void 0;
+    const [match] = within(root, `[id=${quoted(id)}]`);
+    return match;
+  };
+  const collect = () => {
+    const found = [];
+    for (const { root, targets } of registrations) {
+      for (const pane of within(root, ".kui-pane")) {
+        const scroller = directChild(pane, ".kui-pane__content");
+        const header = directChild(pane, PANE_CHROME.t);
+        const footer = directChild(pane, PANE_CHROME.b);
+        if (scroller && (header || footer))
+          found.push({ scroller, chrome: { t: header, b: footer } });
+      }
+      const pairRegion = (region, edge, chrome) => {
+        if (!region || !chrome) return;
+        for (const scroller of regionScrollers(region, edge))
+          found.push({ scroller, chrome: { [edge]: chrome } });
+      };
+      for (const stack of within(root, ".kui-nav-stack")) {
+        const view2 = activeView(stack);
+        for (const edge of ["t", "b"])
+          pairRegion(view2, edge, directChild(stack, NAV_STACK_CHROME[edge]));
+      }
+      for (const scaffold of within(root, ".kui-tab-scaffold"))
+        pairRegion(
+          activeScene(scaffold),
+          "b",
+          directChild(scaffold, ".kui-tab-scaffold__bar")
+        );
+      for (const strip of within(root, "[data-kui-tab-list]"))
+        found.push({ scroller: strip, chrome: {} });
+      for (const target of targets) {
+        const scroller = byId(root, target.scroller);
+        if (!scroller) continue;
+        const chrome = {};
+        for (const edge of EDGES)
+          chrome[edge] = byId(root, target[TARGET_EDGES[edge]]);
+        found.push({ scroller, chrome });
+      }
+    }
+    return found;
+  };
+  const collectOverlays = () => {
+    const found = /* @__PURE__ */ new Map();
+    for (const { root } of registrations)
+      for (const pane of within(root, OVERLAY_PANE)) {
+        const header = directChild(pane, PANE_CHROME.t);
+        if (header) found.set(header, pane);
+      }
+    return found;
+  };
+  const measureScrollbars = () => {
+    let changed = false;
+    for (const [header, pane] of overlays) {
+      const scroller = directChild(pane, ".kui-pane__content");
+      let size = 0;
+      if (scroller) {
+        const style = scroller.ownerDocument.defaultView.getComputedStyle(scroller);
+        size = Math.max(
+          0,
+          scroller.offsetWidth - scroller.clientWidth - (Number.parseFloat(style.borderLeftWidth) || 0) - (Number.parseFloat(style.borderRightWidth) || 0)
+        );
+      }
+      if (scrollbarSizes.get(header) === size) continue;
+      scrollbarSizes.set(header, size);
+      changed = true;
+    }
+    return changed;
+  };
+  const overlayObserver = view?.MutationObserver ? new view.MutationObserver(() => {
+    if (!disposed) publish();
+  }) : void 0;
+  const publish = () => {
+    const current = /* @__PURE__ */ new Map();
+    for (const [header, pane] of overlays) {
+      const size = headerSizes.get(header);
+      const scrollbar = scrollbarSizes.get(header);
+      if (size !== void 0)
+        current.set(pane, [`${size}px`, scrollbar ? `${scrollbar}px` : ""]);
+    }
+    overlayObserver?.disconnect();
+    for (const pane of published)
+      if (!current.has(pane)) {
+        pane.style.removeProperty(CLEARANCE_BLOCK_START);
+        pane.style.removeProperty(SCROLLBAR_INLINE_SIZE);
+        if (!pane.getAttribute("style")) pane.removeAttribute("style");
+        pane.removeAttribute(HEADER_OVERLAY);
+      }
+    published.clear();
+    for (const [pane, [value, scrollbar]] of current) {
+      if (pane.style.getPropertyValue(CLEARANCE_BLOCK_START) !== value)
+        pane.style.setProperty(CLEARANCE_BLOCK_START, value);
+      if (pane.style.getPropertyValue(SCROLLBAR_INLINE_SIZE) !== scrollbar) {
+        if (scrollbar) pane.style.setProperty(SCROLLBAR_INLINE_SIZE, scrollbar);
+        else pane.style.removeProperty(SCROLLBAR_INLINE_SIZE);
+      }
+      if (pane.getAttribute(HEADER_OVERLAY) !== "measured")
+        pane.setAttribute(HEADER_OVERLAY, "measured");
+      published.add(pane);
+      overlayObserver?.observe(pane, {
+        attributes: true,
+        attributeFilter: ["style", HEADER_OVERLAY]
+      });
+    }
+  };
+  const apply = () => {
+    const current = /* @__PURE__ */ new Map();
+    const dividers = /* @__PURE__ */ new Map();
+    for (const { scroller, chrome } of pairings) {
+      const edges = overflow.get(scroller);
+      (current.get(scroller) ?? current.set(scroller, /* @__PURE__ */ new Map()).get(scroller)).set(SCROLL_OVERFLOW, edges);
+      for (const edge of EDGES) {
+        const element = chrome[edge];
+        if (!element) continue;
+        const shown = dividers.get(element) ?? /* @__PURE__ */ new Set();
+        dividers.set(element, shown);
+        if (edges.includes(edge)) shown.add(FACING[edge]);
+      }
+    }
+    for (const [element, shown] of dividers)
+      (current.get(element) ?? current.set(element, /* @__PURE__ */ new Map()).get(element)).set(SCROLL_DIVIDER, sides(shown));
+    for (const [element, values] of written)
+      for (const name of values.keys())
+        if (!current.get(element)?.has(name)) write(element, name, "");
+    written.clear();
+    for (const [element, values] of current) {
+      written.set(element, values);
+      for (const [name, value] of values) write(element, name, value);
+    }
+  };
+  const observed = /* @__PURE__ */ new Map();
+  let probe;
+  let probePending = false;
+  const resizeObserver = view?.ResizeObserver ? new view.ResizeObserver((entries) => {
+    if (disposed) return;
+    const scrollers = new Set(pairings.map(({ scroller }) => scroller));
+    let headerResized = false;
+    let scrollersResized = false;
+    for (const entry of entries) {
+      const { target } = entry;
+      if (overlays.has(target)) {
+        headerSizes.set(
+          target,
+          entry.borderBoxSize?.[0]?.blockSize ?? target.getBoundingClientRect().height
+        );
+        headerResized = true;
+        continue;
+      }
+      scrollersResized = true;
+      if (target === probe) {
+        probePending = false;
+        for (const scroller2 of overflow.keys())
+          overflow.set(scroller2, measure(scroller2));
+        continue;
+      }
+      const scroller = scrollers.has(target) ? target : target.parentElement;
+      if (scroller && scrollers.has(scroller))
+        overflow.set(scroller, measure(scroller));
+    }
+    if (scrollersResized && measureScrollbars()) headerResized = true;
+    apply();
+    if (headerResized) publish();
+  }) : void 0;
+  const observeSizes = () => {
+    if (!resizeObserver) return;
+    const wanted = /* @__PURE__ */ new Map();
+    for (const { scroller } of pairings) {
+      wanted.set(scroller, false);
+      for (const child of scroller.children) wanted.set(child, false);
+    }
+    for (const header of overlays.keys()) wanted.set(header, true);
+    for (const element of observed.keys())
+      if (!wanted.has(element)) {
+        resizeObserver.unobserve(element);
+        observed.delete(element);
+      }
+    for (const [element, borderBox] of wanted)
+      if (observed.get(element) !== borderBox) {
+        resizeObserver.observe(
+          element,
+          borderBox ? { box: "border-box" } : void 0
+        );
+        observed.set(element, borderBox);
+      }
+  };
+  const refresh = (afterLayout = false) => {
+    const deferred = afterLayout && resizeObserver !== void 0;
+    const previous = deferred ? new Map(overflow) : void 0;
+    pairings = collect();
+    overflow.clear();
+    for (const { scroller } of pairings)
+      overflow.set(
+        scroller,
+        previous ? previous.get(scroller) ?? "" : measure(scroller)
+      );
+    overlays = collectOverlays();
+    for (const sizes of [headerSizes, scrollbarSizes])
+      for (const header of sizes.keys())
+        if (!overlays.has(header)) sizes.delete(header);
+    if (!deferred) {
+      for (const header of overlays.keys())
+        if (!headerSizes.has(header))
+          headerSizes.set(header, header.getBoundingClientRect().height);
+    }
+    if (!deferred) measureScrollbars();
+    observeSizes();
+    apply();
+    publish();
+    if (deferred) scheduleRemeasure();
+  };
+  const remeasure = () => {
+    let changed = false;
+    for (const scroller of overflow.keys()) {
+      const edges = measure(scroller);
+      if (edges === overflow.get(scroller)) continue;
+      overflow.set(scroller, edges);
+      changed = true;
+    }
+    if (changed) apply();
+    if (measureScrollbars()) publish();
+  };
+  let remeasureFrame;
+  const scheduleRemeasure = () => {
+    if (resizeObserver) {
+      if (probePending) return;
+      probePending = true;
+      if (!probe) {
+        probe = ownerDocument.createElement("div");
+        probe.setAttribute("aria-hidden", "true");
+        probe.style.cssText = "position:fixed;top:0;left:0;width:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none;contain:strict";
+        resizeObserver.observe(probe);
+      }
+      if (!probe.isConnected) ownerDocument.documentElement.append(probe);
+      probe.style.width = probe.style.width === "1px" ? "0px" : "1px";
+      return;
+    }
+    if (remeasureFrame !== void 0 || !view?.requestAnimationFrame) return;
+    remeasureFrame = view.requestAnimationFrame(() => {
+      remeasureFrame = void 0;
+      remeasure();
+    });
+  };
+  const onScroll = (event) => {
+    const scroller = event.target;
+    if (!overflow.has(scroller)) return;
+    const edges = measure(scroller);
+    if (edges === overflow.get(scroller)) return;
+    overflow.set(scroller, edges);
+    apply();
+  };
+  const mutationObserver = view?.MutationObserver ? new view.MutationObserver((records) => {
+    if (disposed) return;
+    const ids = targetIds();
+    const selector = [
+      STRUCTURAL_SELECTOR,
+      ...[...ids].map((id) => `[id=${quoted(id)}]`)
+    ].join(", ");
+    if (records.some((record) => changesPairings(record, ids, selector)))
+      refresh(true);
+    else {
+      if (records.some(
+        ({ attributeName }) => attributeName === SCROLL_OVERFLOW || attributeName === SCROLL_DIVIDER
+      ))
+        apply();
+      if (records.some(
+        ({ attributeName }) => attributeName !== SCROLL_OVERFLOW && attributeName !== SCROLL_DIVIDER
+      ))
+        scheduleRemeasure();
+    }
+  }) : void 0;
+  const targetIds = () => {
+    const ids = /* @__PURE__ */ new Set();
+    for (const { targets } of registrations)
+      for (const target of targets) {
+        ids.add(target.scroller);
+        for (const edge of EDGES) {
+          const id = target[TARGET_EDGES[edge]];
+          if (id) ids.add(id);
+        }
+      }
+    return ids;
+  };
+  const holds = (node, selector) => node.nodeType === 1 && (node.matches(selector) || !!node.querySelector(selector));
+  const changesPairings = ({
+    type,
+    target,
+    attributeName,
+    oldValue,
+    addedNodes,
+    removedNodes
+  }, ids, selector) => {
+    if (type === "attributes" && (attributeName === SCROLL_OVERFLOW || attributeName === SCROLL_DIVIDER))
+      return false;
+    if (target.nodeType === 1 && target.matches(selector))
+      return true;
+    if (type === "attributes")
+      return attributeName === "class" ? hasStructuralClass(oldValue) : attributeName === "id" && oldValue !== null && ids.has(oldValue);
+    for (const node of [...addedNodes, ...removedNodes])
+      if (holds(node, selector)) return true;
+    return false;
+  };
+  const syncRoots = () => {
+    const roots = new Set([...registrations].map(({ root }) => root));
+    for (const root of listenedRoots)
+      if (!roots.has(root)) {
+        root.removeEventListener("scroll", onScroll, { capture: true });
+        listenedRoots.delete(root);
+      }
+    for (const root of roots)
+      if (!listenedRoots.has(root)) {
+        root.addEventListener("scroll", onScroll, {
+          capture: true,
+          passive: true
+        });
+        listenedRoots.add(root);
+      }
+    mutationObserver?.disconnect();
+    for (const root of roots)
+      mutationObserver?.observe(root, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        // Old values tell a class or id that stopped being structural.
+        attributeOldValue: true,
+        // The shown NavStack view and TabNavigator scene change by attribute,
+        // and a Pane's header presentation by its attributes.
+        attributeFilter: [
+          "data-header-presentation",
+          "data-chrome-placement",
+          SCROLL_OVERFLOW,
+          SCROLL_DIVIDER,
+          "id",
+          "class",
+          "data-nav-active",
+          "data-nav-exiting",
+          "data-active"
+        ]
+      });
+  };
+  return (registration) => {
+    registrations.add(registration);
+    syncRoots();
+    refresh();
+    return () => {
+      if (!registrations.delete(registration)) return;
+      syncRoots();
+      if (registrations.size) refresh();
+      else {
+        disposed = true;
+        if (remeasureFrame !== void 0)
+          view?.cancelAnimationFrame(remeasureFrame);
+        remeasureFrame = void 0;
+        resizeObserver?.disconnect();
+        probe?.remove();
+        probe = void 0;
+        probePending = false;
+        for (const [element, values] of written)
+          for (const name of values.keys()) write(element, name, "");
+        written.clear();
+        overlays.clear();
+        headerSizes.clear();
+        scrollbarSizes.clear();
+        publish();
+        overlayObserver?.disconnect();
+        overflow.clear();
+        observed.clear();
+        pairings = [];
+        CONTROLLERS.delete(ownerDocument);
+      }
+    };
+  };
+}
+
+export { wireScrollDividers };
+
+//# sourceMappingURL=chunk-CXZXHZTR.js.map