@kerfjs/ui 5.0.0-beta.9 → 5.0.0-beta.91

package/dist/chunk-3PO7JEK7.js

@@ -0,0 +1,188 @@
+import { withWordBreaks } from './chunk-7QQ3HE47.js';
+import { Skeleton } from './chunk-Y43B6DS3.js';
+import { LoadingSpinner } from './chunk-YOKEL75M.js';
+import { remify, em } from './chunk-U657IHFB.js';
+import { filterDataAttributes } from './chunk-LAZLBC2Q.js';
+import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
+
+var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-action",
+  "data-item-id",
+  "data-has-icon",
+  "data-has-description",
+  "data-multiline",
+  "data-density",
+  "data-divider",
+  "data-busy",
+  "data-state",
+  "data-kui-disabled",
+  "data-icon-align"
+]);
+function listItemContent({
+  label,
+  description,
+  icon,
+  trailing,
+  status,
+  busy = false,
+  multiline = false,
+  placeholder = false
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon && /* @__PURE__ */ jsx("span", { class: "kui-list-item__icon", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { block: true, width: remify(18), height: remify(18) }) : icon }),
+    /* @__PURE__ */ jsxs("span", { class: "kui-list-item__label", children: [
+      /* @__PURE__ */ jsx("span", { class: "kui-list-item__primary-label", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: em(9) }) : multiline ? withWordBreaks(label) : label }),
+      description && /* @__PURE__ */ jsx("span", { class: "kui-list-item__description", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: em(11) }) : description })
+    ] }),
+    (busy || status || trailing) && /* @__PURE__ */ jsxs("span", { class: "kui-list-item__trailing", children: [
+      busy && /* @__PURE__ */ jsx(LoadingSpinner, {}),
+      status && /* @__PURE__ */ jsx("span", { class: "kui-list-item__status", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: em(3.5) }) : status }),
+      trailing && (placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: em(1.5) }) : trailing)
+    ] })
+  ] });
+}
+function ListItem({
+  label,
+  description,
+  icon,
+  trailing,
+  status,
+  busy = false,
+  density = "standard",
+  divider = "none",
+  selected = false,
+  action,
+  itemId,
+  className = "",
+  pressed,
+  accessibleLabel,
+  title,
+  multiline = false,
+  multilineIconAlign = "first-line",
+  state,
+  disabled = false,
+  tabIndex,
+  placeholder = false,
+  rootAttributes = {},
+  slot
+}) {
+  const extensionAttributes = filterDataAttributes(
+    rootAttributes,
+    PROTECTED_ROOT_DATA_ATTRIBUTES
+  );
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...extensionAttributes,
+      type: "button",
+      class: `kui-list-item ${className}`.trim(),
+      title: placeholder ? void 0 : title,
+      disabled: disabled || placeholder,
+      tabindex: placeholder ? -1 : tabIndex,
+      "data-component": "list-item",
+      "data-action": placeholder ? void 0 : action,
+      "data-item-id": itemId,
+      "data-has-icon": String(Boolean(icon)),
+      "data-has-description": String(Boolean(description)),
+      "data-multiline": multiline ? "true" : void 0,
+      "data-icon-align": multiline ? multilineIconAlign : void 0,
+      "data-density": density,
+      "data-divider": divider,
+      "data-busy": busy ? "true" : void 0,
+      "data-state": state,
+      "data-kui-disabled": disabled ? "true" : void 0,
+      "data-placeholder": placeholder ? "true" : void 0,
+      "aria-label": accessibleLabel,
+      "aria-current": selected ? "page" : void 0,
+      "aria-pressed": pressed === void 0 ? void 0 : String(pressed),
+      "aria-busy": placeholder || busy ? "true" : void 0,
+      slot,
+      children: listItemContent({
+        label,
+        description,
+        icon,
+        trailing,
+        status,
+        busy,
+        multiline,
+        placeholder
+      })
+    }
+  );
+}
+function ListItemLink({
+  href,
+  external = false,
+  label,
+  description,
+  icon,
+  trailing,
+  status,
+  busy = false,
+  density = "standard",
+  divider = "none",
+  selected = false,
+  itemId,
+  className = "",
+  accessibleLabel,
+  title,
+  multiline = false,
+  multilineIconAlign = "first-line",
+  state,
+  disabled = false,
+  tabIndex,
+  placeholder = false,
+  rootAttributes = {},
+  slot
+}) {
+  const extensionAttributes = filterDataAttributes(
+    rootAttributes,
+    PROTECTED_ROOT_DATA_ATTRIBUTES
+  );
+  const inactive = disabled || placeholder;
+  const linkLabel = accessibleLabel ?? (external && typeof label === "string" ? `${label} (opens in new tab)` : void 0);
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...extensionAttributes,
+      class: `kui-list-item ${className}`.trim(),
+      href: inactive ? void 0 : href,
+      target: inactive || !external ? void 0 : "_blank",
+      rel: inactive || !external ? void 0 : "noopener noreferrer",
+      title: placeholder ? void 0 : title,
+      tabindex: inactive ? -1 : tabIndex,
+      "data-component": "list-item-link",
+      "data-item-id": itemId,
+      "data-has-icon": String(Boolean(icon)),
+      "data-has-description": String(Boolean(description)),
+      "data-multiline": multiline ? "true" : void 0,
+      "data-icon-align": multiline ? multilineIconAlign : void 0,
+      "data-density": density,
+      "data-divider": divider,
+      "data-busy": busy ? "true" : void 0,
+      "data-state": state,
+      "data-kui-disabled": disabled ? "true" : void 0,
+      "data-placeholder": placeholder ? "true" : void 0,
+      "aria-label": linkLabel,
+      "aria-current": selected ? "page" : void 0,
+      "aria-disabled": inactive ? "true" : void 0,
+      "aria-busy": placeholder || busy ? "true" : void 0,
+      slot,
+      children: listItemContent({
+        label,
+        description,
+        icon,
+        trailing,
+        status,
+        busy,
+        multiline,
+        placeholder
+      })
+    }
+  );
+}
+
+export { ListItem, ListItemLink };
+
+//# sourceMappingURL=chunk-3PO7JEK7.js.map

package/dist/chunk-3PO7JEK7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/collections/list-item/list-item.tsx"],"names":[],"mappings":"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","file":"chunk-3PO7JEK7.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport { em, remify } from '../../../shared/styles/css-values.js';\nimport { withWordBreaks } from '../../../shared/text/word-breaks.js';\nimport { LoadingSpinner } from '../../feedback/loading-spinner/loading-spinner.js';\nimport { Skeleton } from '../../feedback/skeleton/skeleton.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-item-id',\n  'data-has-icon',\n  'data-has-description',\n  'data-multiline',\n  'data-density',\n  'data-divider',\n  'data-busy',\n  'data-state',\n  'data-kui-disabled',\n  'data-icon-align',\n]);\n\ntype ListItemRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-item-id'?: never;\n    'data-has-icon'?: never;\n    'data-has-description'?: never;\n    'data-multiline'?: never;\n    'data-density'?: never;\n    'data-divider'?: never;\n    'data-busy'?: never;\n    'data-state'?: never;\n    'data-kui-disabled'?: never;\n    'data-icon-align'?: never;\n  }\n>;\n\nexport interface ListItemProps {\n  label: string | SafeHtml;\n  /** App-owned supporting text rendered in the component's stable label stack. */\n  description?: string | SafeHtml;\n  icon?: SafeHtml;\n  /** Dormant author content at the row's end; a placeholder renders it as a skeleton. */\n  trailing?: KerfUiContent;\n  /** Dormant status metadata rendered before trailing content; a placeholder renders it as a skeleton. */\n  status?: string | SafeHtml;\n  /** Show a progress indicator and expose the row as busy without replacing its content; a placeholder keeps the indicator. */\n  busy?: boolean;\n  density?: 'standard' | 'compact' | 'spacious';\n  divider?: 'none' | 'before' | 'after' | 'both';\n  selected?: boolean;\n  action: string;\n  itemId?: string;\n  className?: string;\n  pressed?: boolean;\n  accessibleLabel?: string;\n  title?: string;\n  multiline?: boolean;\n  /** Alignment of an icon beside a wrapped label. Defaults to its first line. */\n  multilineIconAlign?: 'first-line' | 'center';\n  state?: string;\n  disabled?: boolean;\n  tabIndex?: number;\n  /** Render the row as an unanimated loading skeleton, disabling its action: label, description, icon, status, and trailing content become skeletons; the `busy` indicator stays live. */\n  placeholder?: boolean;\n  rootAttributes?: ListItemRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport interface ListItemLinkProps extends Omit<\n  ListItemProps,\n  'action' | 'pressed'\n> {\n  /** Native destination for this navigation row. */\n  href: string;\n  /** Open in a new tab with a safe rel and announce that behavior. */\n  external?: boolean;\n  action?: never;\n  pressed?: never;\n}\n\nfunction listItemContent({\n  label,\n  description,\n  icon,\n  trailing,\n  status,\n  busy = false,\n  multiline = false,\n  placeholder = false,\n}: Pick<\n  ListItemProps,\n  | 'label'\n  | 'description'\n  | 'icon'\n  | 'trailing'\n  | 'status'\n  | 'busy'\n  | 'multiline'\n  | 'placeholder'\n>) {\n  return (\n    <>\n      {icon && (\n        <span class=\"kui-list-item__icon\">\n          {placeholder ? (\n            <Skeleton block width={remify(18)} height={remify(18)} />\n          ) : (\n            icon\n          )}\n        </span>\n      )}\n      <span class=\"kui-list-item__label\">\n        <span class=\"kui-list-item__primary-label\">\n          {placeholder ? (\n            <Skeleton width={em(9)} />\n          ) : multiline ? (\n            withWordBreaks(label)\n          ) : (\n            label\n          )}\n        </span>\n        {description && (\n          <span class=\"kui-list-item__description\">\n            {placeholder ? <Skeleton width={em(11)} /> : description}\n          </span>\n        )}\n      </span>\n      {(busy || status || trailing) && (\n        <span class=\"kui-list-item__trailing\">\n          {/* The busy spinner is component-owned chrome drawn from a known\n              prop, so a placeholder keeps it live. Status text and\n              author-supplied trailing content are values: skeletons. */}\n          {busy && <LoadingSpinner />}\n          {status && (\n            <span class=\"kui-list-item__status\">\n              {placeholder ? <Skeleton width={em(3.5)} /> : status}\n            </span>\n          )}\n          {trailing && (placeholder ? <Skeleton width={em(1.5)} /> : trailing)}\n        </span>\n      )}\n    </>\n  );\n}\n\nexport function ListItem({\n  label,\n  description,\n  icon,\n  trailing,\n  status,\n  busy = false,\n  density = 'standard',\n  divider = 'none',\n  selected = false,\n  action,\n  itemId,\n  className = '',\n  pressed,\n  accessibleLabel,\n  title,\n  multiline = false,\n  multilineIconAlign = 'first-line',\n  state,\n  disabled = false,\n  tabIndex,\n  placeholder = false,\n  rootAttributes = {},\n  slot,\n}: ListItemProps) {\n  const extensionAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  return (\n    <button\n      {...extensionAttributes}\n      type=\"button\"\n      class={`kui-list-item ${className}`.trim()}\n      title={placeholder ? undefined : title}\n      disabled={disabled || placeholder}\n      tabindex={placeholder ? -1 : tabIndex}\n      data-component=\"list-item\"\n      data-action={placeholder ? undefined : action}\n      data-item-id={itemId}\n      data-has-icon={String(Boolean(icon))}\n      data-has-description={String(Boolean(description))}\n      data-multiline={multiline ? 'true' : undefined}\n      data-icon-align={multiline ? multilineIconAlign : undefined}\n      data-density={density}\n      data-divider={divider}\n      data-busy={busy ? 'true' : undefined}\n      data-state={state}\n      data-kui-disabled={disabled ? 'true' : undefined}\n      data-placeholder={placeholder ? 'true' : undefined}\n      aria-label={accessibleLabel}\n      aria-current={selected ? 'page' : undefined}\n      aria-pressed={pressed === undefined ? undefined : String(pressed)}\n      aria-busy={placeholder || busy ? 'true' : undefined}\n      slot={slot}\n    >\n      {listItemContent({\n        label,\n        description,\n        icon,\n        trailing,\n        status,\n        busy,\n        multiline,\n        placeholder,\n      })}\n    </button>\n  );\n}\n\n/** A navigation row with native link activation and ListItem geometry. */\nexport function ListItemLink({\n  href,\n  external = false,\n  label,\n  description,\n  icon,\n  trailing,\n  status,\n  busy = false,\n  density = 'standard',\n  divider = 'none',\n  selected = false,\n  itemId,\n  className = '',\n  accessibleLabel,\n  title,\n  multiline = false,\n  multilineIconAlign = 'first-line',\n  state,\n  disabled = false,\n  tabIndex,\n  placeholder = false,\n  rootAttributes = {},\n  slot,\n}: ListItemLinkProps) {\n  const extensionAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  const inactive = disabled || placeholder;\n  const linkLabel =\n    accessibleLabel ??\n    (external && typeof label === 'string'\n      ? `${label} (opens in new tab)`\n      : undefined);\n  return (\n    <a\n      {...extensionAttributes}\n      class={`kui-list-item ${className}`.trim()}\n      href={inactive ? undefined : href}\n      target={inactive || !external ? undefined : '_blank'}\n      rel={inactive || !external ? undefined : 'noopener noreferrer'}\n      title={placeholder ? undefined : title}\n      tabindex={inactive ? -1 : tabIndex}\n      data-component=\"list-item-link\"\n      data-item-id={itemId}\n      data-has-icon={String(Boolean(icon))}\n      data-has-description={String(Boolean(description))}\n      data-multiline={multiline ? 'true' : undefined}\n      data-icon-align={multiline ? multilineIconAlign : undefined}\n      data-density={density}\n      data-divider={divider}\n      data-busy={busy ? 'true' : undefined}\n      data-state={state}\n      data-kui-disabled={disabled ? 'true' : undefined}\n      data-placeholder={placeholder ? 'true' : undefined}\n      aria-label={linkLabel}\n      aria-current={selected ? 'page' : undefined}\n      aria-disabled={inactive ? 'true' : undefined}\n      aria-busy={placeholder || busy ? 'true' : undefined}\n      slot={slot}\n    >\n      {listItemContent({\n        label,\n        description,\n        icon,\n        trailing,\n        status,\n        busy,\n        multiline,\n        placeholder,\n      })}\n    </a>\n  );\n}\n"]}

package/dist/chunk-3VWOVICT.js

@@ -0,0 +1,375 @@
+// 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 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();
+  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 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 Set();
+  const resizeObserver = view?.ResizeObserver ? new view.ResizeObserver((entries) => {
+    if (disposed) return;
+    const scrollers = new Set(pairings.map(({ scroller }) => scroller));
+    for (const { target } of entries) {
+      const scroller = scrollers.has(target) ? target : target.parentElement;
+      if (scroller && scrollers.has(scroller))
+        overflow.set(scroller, measure(scroller));
+    }
+    apply();
+  }) : void 0;
+  const observeSizes = () => {
+    if (!resizeObserver) return;
+    const wanted = /* @__PURE__ */ new Set();
+    for (const { scroller } of pairings) {
+      wanted.add(scroller);
+      for (const child of scroller.children) wanted.add(child);
+    }
+    for (const element of observed)
+      if (!wanted.has(element)) {
+        resizeObserver.unobserve(element);
+        observed.delete(element);
+      }
+    for (const element of wanted)
+      if (!observed.has(element)) {
+        resizeObserver.observe(element);
+        observed.add(element);
+      }
+  };
+  const refresh = () => {
+    pairings = collect();
+    overflow.clear();
+    for (const { scroller } of pairings)
+      overflow.set(scroller, measure(scroller));
+    observeSizes();
+    apply();
+  };
+  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();
+  };
+  let remeasureFrame;
+  const scheduleRemeasure = () => {
+    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();
+    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.
+        attributeFilter: [
+          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();
+        for (const [element, values] of written)
+          for (const name of values.keys()) write(element, name, "");
+        written.clear();
+        overflow.clear();
+        observed.clear();
+        pairings = [];
+        CONTROLLERS.delete(ownerDocument);
+      }
+    };
+  };
+}
+
+export { wireScrollDividers };
+
+//# sourceMappingURL=chunk-3VWOVICT.js.map