@k2b/ui 0.43.0 → 0.45.0

package/dist/browser/actions/Tabs.js

@@ -19,6 +19,7 @@ var _tmpl$ = /*#__PURE__*/_$template(`<div class=k2b-tabs__trailing>`),
 import { children, createEffect, createMemo, createUniqueId, Show } from "solid-js";
 import { resolveMaybeAccessor } from "../inputs/field-contract";
 import { KeyedFor } from "../internal/keyed-for";
+import { revealInScroller } from "../internal/reveal-in-scroller";
 const tabName = label => typeof label === "string" ? label : undefined;
 import { useUiMessages } from "../intl/messages";
 import { createScrollFade } from "../layout/scroll-fade";
@@ -80,10 +81,8 @@ function TabsRoot(props) {
     const removed = closing !== undefined && !items().some(item => item.value === closing);
     if (removed) closing = undefined;
     queueMicrotask(() => {
-      buttons[index]?.scrollIntoView?.({
-        block: "nearest",
-        inline: "nearest"
-      });
+      // Only the list moves: `scrollIntoView` would also scroll every ancestor, so a page would open scrolled down.
+      revealInScroller(list, buttons[index]);
       if (removed) {
         const target = items().length ? buttons[index] : root?.querySelector(".k2b-tabs__trailing button");
         target?.focus();

package/dist/browser/actions/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["actions/Tabs.tsx"],"sourcesContent":["import { children, createEffect, createMemo, createUniqueId, type JSX, Show } from \"solid-js\";\nimport type { MaybeAccessor } from \"../inputs/field-contract\";\nimport { resolveMaybeAccessor } from \"../inputs/field-contract\";\nimport { KeyedFor } from \"../internal/keyed-for\";\n\nconst tabName = (label: JSX.Element) => (typeof label === \"string\" ? label : undefined);\n\nimport { useUiMessages } from \"../intl/messages\";\nimport { createScrollFade } from \"../layout/scroll-fade\";\n\nexport type TabOption<T extends string = string> = {\n  value: T;\n  label: JSX.Element;\n  icon?: string;\n  disabled?: boolean;\n  panel?: JSX.Element;\n  onClose?: () => void;\n  closeLabel?: string;\n};\n\nexport type TabsItemProps<T extends string = string> = Omit<TabOption<T>, \"panel\"> & {\n  children?: JSX.Element;\n};\n\ntype TabsItemSlot<T extends string = string> = {\n  readonly kind: typeof TABS_ITEM;\n  readonly props: TabsItemProps<T>;\n};\n\nexport type TabsProps<T extends string = string> = {\n  value: MaybeAccessor<T>;\n  onValueChange: (value: T) => void;\n  ariaLabel: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  class?: string;\n  variant?: \"line\" | \"pill\";\n  trailing?: JSX.Element;\n  /** Data-driven alternative to colocated `Tabs.Item` children. */\n  options?: readonly TabOption<T>[];\n  children?: JSX.Element;\n};\n\ntype TabsComponent = (<T extends string = string>(props: TabsProps<T>) => JSX.Element) & {\n  Item: <T extends string = string>(props: TabsItemProps<T>) => JSX.Element;\n};\n\nconst TABS_ITEM = Symbol(\"Tabs.Item\");\n\nconst isTabsItem = <T extends string>(value: unknown): value is TabsItemSlot<T> =>\n  !!value && typeof value === \"object\" && \"kind\" in value && value.kind === TABS_ITEM;\n\nconst collectTabsItems = <T extends string>(value: unknown): TabsItemSlot<T>[] => {\n  if (Array.isArray(value)) return value.flatMap(collectTabsItems<T>);\n  return isTabsItem<T>(value) ? [value] : [];\n};\n\nfunction TabsItem<T extends string = string>(props: TabsItemProps<T>): JSX.Element {\n  return { kind: TABS_ITEM, props } satisfies TabsItemSlot<T> as unknown as JSX.Element;\n}\n\n/** Controlled, keyboard-accessible tabs with compositional or data-driven items. */\nfunction TabsRoot<T extends string = string>(props: TabsProps<T>): JSX.Element {\n  const messages = useUiMessages();\n  let root: HTMLDivElement | undefined;\n  let list: HTMLDivElement | undefined;\n  createScrollFade(\n    () => list,\n    () => props.orientation !== \"vertical\",\n  );\n  const instanceId = `k2b-tabs-${createUniqueId()}`;\n  const resolvedChildren = children(() => props.children);\n  const trailing = children(() => props.trailing);\n  const items = createMemo<readonly TabOption<T>[]>(() => {\n    if (props.options) return props.options;\n    return collectTabsItems<T>(resolvedChildren.toArray()).map((item) => ({\n      value: item.props.value,\n      label: item.props.label,\n      icon: item.props.icon,\n      disabled: item.props.disabled,\n      panel: item.props.children,\n      onClose: item.props.onClose,\n      closeLabel: item.props.closeLabel,\n    }));\n  });\n  const buttons: HTMLButtonElement[] = [];\n  let closing: T | undefined;\n  const requestClose = (option: TabOption<T>) => {\n    closing = option.value;\n    option.onClose?.();\n  };\n  const current = () => resolveMaybeAccessor(props.value);\n  const active = createMemo(() => items().find((option) => option.value === current()));\n  const activeIndex = createMemo(() =>\n    Math.max(\n      0,\n      items().findIndex((option) => option.value === current()),\n    ),\n  );\n  const enabled = () =>\n    items()\n      .map((option, index) => ({ option, index }))\n      .filter(({ option }) => !option.disabled);\n  const tabStopIndex = createMemo(() => {\n    const selected = items().findIndex((option) => option.value === current() && !option.disabled);\n    return selected >= 0 ? selected : (enabled()[0]?.index ?? -1);\n  });\n  createEffect(() => {\n    const index = activeIndex();\n    const removed = closing !== undefined && !items().some((item) => item.value === closing);\n    if (removed) closing = undefined;\n    queueMicrotask(() => {\n      buttons[index]?.scrollIntoView?.({ block: \"nearest\", inline: \"nearest\" });\n      if (removed) {\n        const target = items().length ? buttons[index] : root?.querySelector<HTMLElement>(\".k2b-tabs__trailing button\");\n        target?.focus();\n      }\n    });\n  });\n  const select = (index: number) => {\n    const option = items()[index];\n    if (!option || option.disabled) return;\n    props.onValueChange(option.value);\n    queueMicrotask(() => buttons[index]?.focus());\n  };\n  const move = (index: number, delta: 1 | -1) => {\n    const available = enabled();\n    if (available.length === 0) return;\n    const currentIndex = available.findIndex((item) => item.index === index);\n    const next = available[(currentIndex + delta + available.length) % available.length] ?? available[0];\n    if (next) select(next.index);\n  };\n\n  return (\n    <div\n      ref={root}\n      class={`k2b-tabs ${props.class ?? \"\"}`}\n      data-orientation={props.orientation ?? \"horizontal\"}\n      data-variant={props.variant ?? \"line\"}\n    >\n      <div class=\"k2b-tabs__bar\">\n        <div\n          ref={list}\n          data-scroll-fade-mode={props.orientation !== \"vertical\" ? \"both\" : undefined}\n          data-scroll-fade-axis=\"horizontal\"\n          class=\"k2b-tabs__list\"\n          role=\"tablist\"\n          aria-label={props.ariaLabel}\n          aria-orientation={props.orientation ?? \"horizontal\"}\n        >\n          {/* Keyed by value: tab objects are rebuilt whenever a tab's props change, and a tab replaced between press and\n              release would swallow the click (#2140). */}\n          <KeyedFor each={items()} by={(option) => option.value}>\n            {(option, index) => {\n              const id = () => `${instanceId}-tab-${index()}`;\n              const panelId = () => `${instanceId}-panel-${index()}`;\n              return (\n                <div class=\"k2b-tabs__item\" role=\"presentation\">\n                  <button\n                    ref={(element) => {\n                      buttons[index()] = element;\n                    }}\n                    id={id()}\n                    type=\"button\"\n                    role=\"tab\"\n                    aria-selected={current() === option().value}\n                    aria-controls={option().panel !== undefined ? panelId() : undefined}\n                    tabIndex={tabStopIndex() === index() ? 0 : -1}\n                    disabled={option().disabled}\n                    onClick={() => props.onValueChange(option().value)}\n                    onKeyDown={(event) => {\n                      if ((event.key === \"Delete\" || event.key === \"Backspace\") && option().onClose) {\n                        event.preventDefault();\n                        requestClose(option());\n                        return;\n                      }\n                      const previous = props.orientation === \"vertical\" ? \"ArrowUp\" : \"ArrowLeft\";\n                      const next = props.orientation === \"vertical\" ? \"ArrowDown\" : \"ArrowRight\";\n                      if (event.key === previous || event.key === next) {\n                        event.preventDefault();\n                        move(index(), event.key === next ? 1 : -1);\n                      } else if (event.key === \"Home\" || event.key === \"End\") {\n                        event.preventDefault();\n                        const available = enabled();\n                        const target = event.key === \"End\" ? available.at(-1) : available[0];\n                        if (target) select(target.index);\n                      }\n                    }}\n                  >\n                    <Show when={option().icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>\n                    <span class={props.variant === \"pill\" ? \"k2b-truncate-fade\" : undefined}>{option().label}</span>\n                  </button>\n                  <Show when={option().onClose}>\n                    <button\n                      type=\"button\"\n                      class=\"k2b-tabs__close\"\n                      aria-label={option().closeLabel ?? messages().closeNamed({ name: tabName(option().label) ?? props.ariaLabel })}\n                      disabled={option().disabled}\n                      onClick={() => requestClose(option())}\n                    >\n                      <i class=\"ti ti-x\" aria-hidden=\"true\" />\n                    </button>\n                  </Show>\n                </div>\n              );\n            }}\n          </KeyedFor>\n        </div>\n        <Show when={trailing()}>\n          <div class=\"k2b-tabs__trailing\">{trailing()}</div>\n        </Show>\n      </div>\n      <Show when={active()?.panel !== undefined}>\n        <div\n          id={`${instanceId}-panel-${activeIndex()}`}\n          class=\"k2b-tabs__panel\"\n          role=\"tabpanel\"\n          aria-labelledby={`${instanceId}-tab-${activeIndex()}`}\n          tabIndex={0}\n        >\n          {active()?.panel}\n        </div>\n      </Show>\n    </div>\n  );\n}\n\nexport const Tabs = TabsRoot as TabsComponent;\nTabs.Item = TabsItem;\n\nexport default Tabs;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["actions/Tabs.tsx"],"sourcesContent":["import { children, createEffect, createMemo, createUniqueId, type JSX, Show } from \"solid-js\";\nimport type { MaybeAccessor } from \"../inputs/field-contract\";\nimport { resolveMaybeAccessor } from \"../inputs/field-contract\";\nimport { KeyedFor } from \"../internal/keyed-for\";\nimport { revealInScroller } from \"../internal/reveal-in-scroller\";\n\nconst tabName = (label: JSX.Element) => (typeof label === \"string\" ? label : undefined);\n\nimport { useUiMessages } from \"../intl/messages\";\nimport { createScrollFade } from \"../layout/scroll-fade\";\n\nexport type TabOption<T extends string = string> = {\n  value: T;\n  label: JSX.Element;\n  icon?: string;\n  disabled?: boolean;\n  panel?: JSX.Element;\n  onClose?: () => void;\n  closeLabel?: string;\n};\n\nexport type TabsItemProps<T extends string = string> = Omit<TabOption<T>, \"panel\"> & {\n  children?: JSX.Element;\n};\n\ntype TabsItemSlot<T extends string = string> = {\n  readonly kind: typeof TABS_ITEM;\n  readonly props: TabsItemProps<T>;\n};\n\nexport type TabsProps<T extends string = string> = {\n  value: MaybeAccessor<T>;\n  onValueChange: (value: T) => void;\n  ariaLabel: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  class?: string;\n  variant?: \"line\" | \"pill\";\n  trailing?: JSX.Element;\n  /** Data-driven alternative to colocated `Tabs.Item` children. */\n  options?: readonly TabOption<T>[];\n  children?: JSX.Element;\n};\n\ntype TabsComponent = (<T extends string = string>(props: TabsProps<T>) => JSX.Element) & {\n  Item: <T extends string = string>(props: TabsItemProps<T>) => JSX.Element;\n};\n\nconst TABS_ITEM = Symbol(\"Tabs.Item\");\n\nconst isTabsItem = <T extends string>(value: unknown): value is TabsItemSlot<T> =>\n  !!value && typeof value === \"object\" && \"kind\" in value && value.kind === TABS_ITEM;\n\nconst collectTabsItems = <T extends string>(value: unknown): TabsItemSlot<T>[] => {\n  if (Array.isArray(value)) return value.flatMap(collectTabsItems<T>);\n  return isTabsItem<T>(value) ? [value] : [];\n};\n\nfunction TabsItem<T extends string = string>(props: TabsItemProps<T>): JSX.Element {\n  return { kind: TABS_ITEM, props } satisfies TabsItemSlot<T> as unknown as JSX.Element;\n}\n\n/** Controlled, keyboard-accessible tabs with compositional or data-driven items. */\nfunction TabsRoot<T extends string = string>(props: TabsProps<T>): JSX.Element {\n  const messages = useUiMessages();\n  let root: HTMLDivElement | undefined;\n  let list: HTMLDivElement | undefined;\n  createScrollFade(\n    () => list,\n    () => props.orientation !== \"vertical\",\n  );\n  const instanceId = `k2b-tabs-${createUniqueId()}`;\n  const resolvedChildren = children(() => props.children);\n  const trailing = children(() => props.trailing);\n  const items = createMemo<readonly TabOption<T>[]>(() => {\n    if (props.options) return props.options;\n    return collectTabsItems<T>(resolvedChildren.toArray()).map((item) => ({\n      value: item.props.value,\n      label: item.props.label,\n      icon: item.props.icon,\n      disabled: item.props.disabled,\n      panel: item.props.children,\n      onClose: item.props.onClose,\n      closeLabel: item.props.closeLabel,\n    }));\n  });\n  const buttons: HTMLButtonElement[] = [];\n  let closing: T | undefined;\n  const requestClose = (option: TabOption<T>) => {\n    closing = option.value;\n    option.onClose?.();\n  };\n  const current = () => resolveMaybeAccessor(props.value);\n  const active = createMemo(() => items().find((option) => option.value === current()));\n  const activeIndex = createMemo(() =>\n    Math.max(\n      0,\n      items().findIndex((option) => option.value === current()),\n    ),\n  );\n  const enabled = () =>\n    items()\n      .map((option, index) => ({ option, index }))\n      .filter(({ option }) => !option.disabled);\n  const tabStopIndex = createMemo(() => {\n    const selected = items().findIndex((option) => option.value === current() && !option.disabled);\n    return selected >= 0 ? selected : (enabled()[0]?.index ?? -1);\n  });\n  createEffect(() => {\n    const index = activeIndex();\n    const removed = closing !== undefined && !items().some((item) => item.value === closing);\n    if (removed) closing = undefined;\n    queueMicrotask(() => {\n      // Only the list moves: `scrollIntoView` would also scroll every ancestor, so a page would open scrolled down.\n      revealInScroller(list, buttons[index]);\n      if (removed) {\n        const target = items().length ? buttons[index] : root?.querySelector<HTMLElement>(\".k2b-tabs__trailing button\");\n        target?.focus();\n      }\n    });\n  });\n  const select = (index: number) => {\n    const option = items()[index];\n    if (!option || option.disabled) return;\n    props.onValueChange(option.value);\n    queueMicrotask(() => buttons[index]?.focus());\n  };\n  const move = (index: number, delta: 1 | -1) => {\n    const available = enabled();\n    if (available.length === 0) return;\n    const currentIndex = available.findIndex((item) => item.index === index);\n    const next = available[(currentIndex + delta + available.length) % available.length] ?? available[0];\n    if (next) select(next.index);\n  };\n\n  return (\n    <div\n      ref={root}\n      class={`k2b-tabs ${props.class ?? \"\"}`}\n      data-orientation={props.orientation ?? \"horizontal\"}\n      data-variant={props.variant ?? \"line\"}\n    >\n      <div class=\"k2b-tabs__bar\">\n        <div\n          ref={list}\n          data-scroll-fade-mode={props.orientation !== \"vertical\" ? \"both\" : undefined}\n          data-scroll-fade-axis=\"horizontal\"\n          class=\"k2b-tabs__list\"\n          role=\"tablist\"\n          aria-label={props.ariaLabel}\n          aria-orientation={props.orientation ?? \"horizontal\"}\n        >\n          {/* Keyed by value: tab objects are rebuilt whenever a tab's props change, and a tab replaced between press and\n              release would swallow the click (#2140). */}\n          <KeyedFor each={items()} by={(option) => option.value}>\n            {(option, index) => {\n              const id = () => `${instanceId}-tab-${index()}`;\n              const panelId = () => `${instanceId}-panel-${index()}`;\n              return (\n                <div class=\"k2b-tabs__item\" role=\"presentation\">\n                  <button\n                    ref={(element) => {\n                      buttons[index()] = element;\n                    }}\n                    id={id()}\n                    type=\"button\"\n                    role=\"tab\"\n                    aria-selected={current() === option().value}\n                    aria-controls={option().panel !== undefined ? panelId() : undefined}\n                    tabIndex={tabStopIndex() === index() ? 0 : -1}\n                    disabled={option().disabled}\n                    onClick={() => props.onValueChange(option().value)}\n                    onKeyDown={(event) => {\n                      if ((event.key === \"Delete\" || event.key === \"Backspace\") && option().onClose) {\n                        event.preventDefault();\n                        requestClose(option());\n                        return;\n                      }\n                      const previous = props.orientation === \"vertical\" ? \"ArrowUp\" : \"ArrowLeft\";\n                      const next = props.orientation === \"vertical\" ? \"ArrowDown\" : \"ArrowRight\";\n                      if (event.key === previous || event.key === next) {\n                        event.preventDefault();\n                        move(index(), event.key === next ? 1 : -1);\n                      } else if (event.key === \"Home\" || event.key === \"End\") {\n                        event.preventDefault();\n                        const available = enabled();\n                        const target = event.key === \"End\" ? available.at(-1) : available[0];\n                        if (target) select(target.index);\n                      }\n                    }}\n                  >\n                    <Show when={option().icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>\n                    <span class={props.variant === \"pill\" ? \"k2b-truncate-fade\" : undefined}>{option().label}</span>\n                  </button>\n                  <Show when={option().onClose}>\n                    <button\n                      type=\"button\"\n                      class=\"k2b-tabs__close\"\n                      aria-label={option().closeLabel ?? messages().closeNamed({ name: tabName(option().label) ?? props.ariaLabel })}\n                      disabled={option().disabled}\n                      onClick={() => requestClose(option())}\n                    >\n                      <i class=\"ti ti-x\" aria-hidden=\"true\" />\n                    </button>\n                  </Show>\n                </div>\n              );\n            }}\n          </KeyedFor>\n        </div>\n        <Show when={trailing()}>\n          <div class=\"k2b-tabs__trailing\">{trailing()}</div>\n        </Show>\n      </div>\n      <Show when={active()?.panel !== undefined}>\n        <div\n          id={`${instanceId}-panel-${activeIndex()}`}\n          class=\"k2b-tabs__panel\"\n          role=\"tabpanel\"\n          aria-labelledby={`${instanceId}-tab-${activeIndex()}`}\n          tabIndex={0}\n        >\n          {active()?.panel}\n        </div>\n      </Show>\n    </div>\n  );\n}\n\nexport const Tabs = TabsRoot as TabsComponent;\nTabs.Item = TabsItem;\n\nexport default Tabs;\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/actions/menu-sheet.js

@@ -18,9 +18,8 @@ import BottomSheet, { bottomSheetOptions } from "../layout/BottomSheet";
 import { focusMenuRow, focusRowSegment } from "./menu-rows";
 import { filterDropdownItems, MenuSearch } from "./menu-search";
 
-/** Phones, where a menu opens as a bottom sheet instead of beside its trigger. */
-export const PHONE_SHEET_QUERY = "(max-width: 47.999rem)";
-export const prefersMenuSheet = () => typeof matchMedia === "function" && matchMedia(PHONE_SHEET_QUERY).matches;
+// Kept apart so a control can check for phones without loading the sheet and its dialog imports.
+export { PHONE_SHEET_QUERY, prefersMenuSheet } from "./phone-sheet";
 /**
  * Follows a link the way a click on it would, so a page's own link handling, such as progressive navigation, still
  * applies; it runs only after the sheet has left the history.

package/dist/browser/actions/menu-sheet.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["actions/menu-sheet.tsx"],"sourcesContent":["import { createSignal, type JSX, onCleanup, onMount, Show } from \"solid-js\";\nimport { dialogCore } from \"../feedback/dialog-core\";\nimport { LocaleProvider } from \"../intl/locale\";\nimport BottomSheet, { bottomSheetOptions } from \"../layout/BottomSheet\";\nimport type { DropdownAction, DropdownChoice, DropdownItem, DropdownSearch } from \"./Dropdown\";\nimport { focusMenuRow, focusRowSegment } from \"./menu-rows\";\nimport { filterDropdownItems, MenuSearch } from \"./menu-search\";\n\n/** Phones, where a menu opens as a bottom sheet instead of beside its trigger. */\nexport const PHONE_SHEET_QUERY = \"(max-width: 47.999rem)\";\n\nexport const prefersMenuSheet = (): boolean => typeof matchMedia === \"function\" && matchMedia(PHONE_SHEET_QUERY).matches;\n\ntype SheetEntry = DropdownAction | DropdownChoice;\ntype SheetItem = SheetEntry | { items: readonly SheetEntry[] };\n\n/**\n * Follows a link the way a click on it would, so a page's own link handling, such as progressive navigation, still\n * applies; it runs only after the sheet has left the history.\n */\nconst followLink = (href: string) => {\n  const link = document.createElement(\"a\");\n  link.href = href;\n  link.hidden = true;\n  document.body.append(link);\n  link.click();\n  link.remove();\n};\n\n/**\n * The sheet's items hand their action to `run` instead of running it while the sheet closes: `dialogCore` settles the\n * sheet after it left the history, and only then may an action navigate or open the next dialog.\n * A choice or action that keeps the menu open, or an `immediate` action, runs at once.\n */\nconst afterClose = <T extends DropdownItem>(items: readonly T[], run: (action: () => void) => void): T[] => {\n  const entry = (item: SheetEntry): SheetEntry => {\n    // A plain link would navigate while the sheet's history entry is still being removed, and that Back could\n    // undo the navigation; a plain click instead follows it once the sheet is gone. Modified clicks and external\n    // links keep the browser's own behavior.\n    if (!item.action && \"href\" in item && item.href && !(\"external\" in item && item.external)) {\n      const href = item.href;\n      return { ...item, action: () => run(() => followLink(href)) } as SheetEntry;\n    }\n    const action = item.action;\n    if (!action || (\"closeOnSelect\" in item && item.closeOnSelect === false) || (\"immediate\" in item && item.immediate)) return item;\n    return { ...item, action: () => run(action) } as SheetEntry;\n  };\n  return items.map((item) => {\n    const sheetItem = item as SheetItem;\n    return (\"items\" in sheetItem ? { ...sheetItem, items: sheetItem.items.map(entry) } : entry(sheetItem)) as T;\n  });\n};\n\nconst menuItems = (menu: HTMLElement): HTMLElement[] =>\n  Array.from(menu.querySelectorAll<HTMLElement>(\"[role^='menuitem']:not([aria-disabled='true'])\"));\n\n/**\n * The menu inside the sheet: the same items, at touch size, with arrow keys for a connected keyboard. Focus starts on\n * the sheet itself, which shows no ring on a phone; the first arrow key moves it into the menu.\n */\nfunction SheetMenu(props: {\n  Items: MenuSheetOptions[\"Items\"];\n  items: readonly DropdownItem[];\n  label: string;\n  close: () => void;\n  dialog: HTMLDialogElement;\n  icons?: \"plain\" | \"tile\";\n}): JSX.Element {\n  let menu!: HTMLDivElement;\n  const onKeyDown = (event: KeyboardEvent) => {\n    const items = menuItems(menu);\n    if (!focusMenuRow(items, event.key) && !focusRowSegment(items, event.key)) return;\n    event.preventDefault();\n  };\n  // Keys pressed on the sheet itself, while it is the top level of the shared dialog.\n  const onSheetKeyDown = (event: KeyboardEvent) => {\n    if (event.target === props.dialog && props.dialog.lastElementChild?.contains(menu)) onKeyDown(event);\n  };\n  onMount(() => {\n    props.dialog.addEventListener(\"keydown\", onSheetKeyDown);\n    onCleanup(() => props.dialog.removeEventListener(\"keydown\", onSheetKeyDown));\n  });\n  return (\n    <div\n      ref={menu}\n      class=\"k2b-gesture-menu__sheet-menu\"\n      role=\"menu\"\n      aria-label={props.label}\n      data-icons={props.icons === \"tile\" ? \"tile\" : undefined}\n      onKeyDown={onKeyDown}\n    >\n      <props.Items items={props.items} close={() => props.close()} />\n    </div>\n  );\n}\n\nexport type MenuSheetOptions = {\n  /** Renders the rows: the dropdown's own `DropdownItems`, passed in so this module does not import it back. */\n  Items: (props: { items: readonly DropdownItem[]; close: (restoreFocus?: boolean) => void }) => JSX.Element;\n  items: readonly DropdownItem[];\n  /** Names the sheet and its menu. */\n  label: string;\n  /** The render locale of the opener; the sheet renders outside its tree. */\n  locale: string;\n  /** Shown above the menu, for example a row of quick reactions. `close` closes the sheet. */\n  top?: (close: () => void) => JSX.Element;\n  search?: DropdownSearch;\n  icons?: \"plain\" | \"tile\";\n  /** A quiet sentence below the entries. */\n  note?: string;\n  signal?: AbortSignal;\n};\n\n/** A searchable menu in the sheet: the sheet's first field, so it takes the focus as the sheet opens, as in the menu. */\nfunction SheetSearch(props: {\n  Items: MenuSheetOptions[\"Items\"];\n  items: readonly DropdownItem[];\n  search: DropdownSearch;\n  wrap: <T extends DropdownItem>(items: readonly T[]) => T[];\n  label: string;\n  locale: string;\n  close: () => void;\n  icons?: \"plain\" | \"tile\";\n}): JSX.Element {\n  const [query, setQuery] = createSignal(\"\");\n  const filter = props.search.filter;\n  return (\n    <div\n      class=\"k2b-gesture-menu__sheet-menu\"\n      role=\"dialog\"\n      aria-label={props.label}\n      data-search=\"\"\n      data-icons={props.icons === \"tile\" ? \"tile\" : undefined}\n    >\n      <MenuSearch\n        Items={props.Items}\n        items={props.items}\n        search={{\n          ...props.search,\n          // The sheet's own items are wrapped already; a host's filter returns its unwrapped entries.\n          filter: (value) => (filter ? props.wrap(filter(value)) : filterDropdownItems(props.items, value, props.locale)),\n        }}\n        label={props.label}\n        query={query}\n        setQuery={setQuery}\n        close={() => props.close()}\n      />\n    </div>\n  );\n}\n\n/** Opens menu items as a bottom sheet; resolves after the sheet closed and the chosen action ran. */\nexport const openMenuSheet = (options: MenuSheetOptions): Promise<void> => {\n  let chosen: (() => void) | undefined;\n  const choose = (action: () => void) => {\n    chosen = action;\n  };\n  return dialogCore\n    .open<void>(\n      (close, context) => (\n        <LocaleProvider locale={options.locale}>\n          <BottomSheet onDismiss={context.requestDismiss}>\n            <BottomSheet.Body>\n              {options.top?.(() => close())}\n              <Show\n                when={options.search}\n                fallback={\n                  <SheetMenu\n                    Items={options.Items}\n                    items={afterClose(options.items, choose)}\n                    label={options.label}\n                    close={() => close()}\n                    dialog={context.dialog}\n                    icons={options.icons}\n                  />\n                }\n              >\n                {(search) => (\n                  <SheetSearch\n                    Items={options.Items}\n                    items={afterClose(options.items, choose)}\n                    search={search()}\n                    wrap={(items) => afterClose(items, choose)}\n                    label={options.label}\n                    locale={options.locale}\n                    close={() => close()}\n                    icons={options.icons}\n                  />\n                )}\n              </Show>\n              <Show when={options.note}>\n                <p class=\"k2b-dropdown__note\">{options.note}</p>\n              </Show>\n            </BottomSheet.Body>\n          </BottomSheet>\n        </LocaleProvider>\n      ),\n      { ...bottomSheetOptions, ariaLabel: options.label, history: true, signal: options.signal },\n    )\n    .then(() => chosen?.());\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["actions/menu-sheet.tsx"],"sourcesContent":["import { createSignal, type JSX, onCleanup, onMount, Show } from \"solid-js\";\nimport { dialogCore } from \"../feedback/dialog-core\";\nimport { LocaleProvider } from \"../intl/locale\";\nimport BottomSheet, { bottomSheetOptions } from \"../layout/BottomSheet\";\nimport type { DropdownAction, DropdownChoice, DropdownItem, DropdownSearch } from \"./Dropdown\";\nimport { focusMenuRow, focusRowSegment } from \"./menu-rows\";\nimport { filterDropdownItems, MenuSearch } from \"./menu-search\";\n\n// Kept apart so a control can check for phones without loading the sheet and its dialog imports.\nexport { PHONE_SHEET_QUERY, prefersMenuSheet } from \"./phone-sheet\";\n\ntype SheetEntry = DropdownAction | DropdownChoice;\ntype SheetItem = SheetEntry | { items: readonly SheetEntry[] };\n\n/**\n * Follows a link the way a click on it would, so a page's own link handling, such as progressive navigation, still\n * applies; it runs only after the sheet has left the history.\n */\nconst followLink = (href: string) => {\n  const link = document.createElement(\"a\");\n  link.href = href;\n  link.hidden = true;\n  document.body.append(link);\n  link.click();\n  link.remove();\n};\n\n/**\n * The sheet's items hand their action to `run` instead of running it while the sheet closes: `dialogCore` settles the\n * sheet after it left the history, and only then may an action navigate or open the next dialog.\n * A choice or action that keeps the menu open, or an `immediate` action, runs at once.\n */\nconst afterClose = <T extends DropdownItem>(items: readonly T[], run: (action: () => void) => void): T[] => {\n  const entry = (item: SheetEntry): SheetEntry => {\n    // A plain link would navigate while the sheet's history entry is still being removed, and that Back could\n    // undo the navigation; a plain click instead follows it once the sheet is gone. Modified clicks and external\n    // links keep the browser's own behavior.\n    if (!item.action && \"href\" in item && item.href && !(\"external\" in item && item.external)) {\n      const href = item.href;\n      return { ...item, action: () => run(() => followLink(href)) } as SheetEntry;\n    }\n    const action = item.action;\n    if (!action || (\"closeOnSelect\" in item && item.closeOnSelect === false) || (\"immediate\" in item && item.immediate)) return item;\n    return { ...item, action: () => run(action) } as SheetEntry;\n  };\n  return items.map((item) => {\n    const sheetItem = item as SheetItem;\n    return (\"items\" in sheetItem ? { ...sheetItem, items: sheetItem.items.map(entry) } : entry(sheetItem)) as T;\n  });\n};\n\nconst menuItems = (menu: HTMLElement): HTMLElement[] =>\n  Array.from(menu.querySelectorAll<HTMLElement>(\"[role^='menuitem']:not([aria-disabled='true'])\"));\n\n/**\n * The menu inside the sheet: the same items, at touch size, with arrow keys for a connected keyboard. Focus starts on\n * the sheet itself, which shows no ring on a phone; the first arrow key moves it into the menu.\n */\nfunction SheetMenu(props: {\n  Items: MenuSheetOptions[\"Items\"];\n  items: readonly DropdownItem[];\n  label: string;\n  close: () => void;\n  dialog: HTMLDialogElement;\n  icons?: \"plain\" | \"tile\";\n}): JSX.Element {\n  let menu!: HTMLDivElement;\n  const onKeyDown = (event: KeyboardEvent) => {\n    const items = menuItems(menu);\n    if (!focusMenuRow(items, event.key) && !focusRowSegment(items, event.key)) return;\n    event.preventDefault();\n  };\n  // Keys pressed on the sheet itself, while it is the top level of the shared dialog.\n  const onSheetKeyDown = (event: KeyboardEvent) => {\n    if (event.target === props.dialog && props.dialog.lastElementChild?.contains(menu)) onKeyDown(event);\n  };\n  onMount(() => {\n    props.dialog.addEventListener(\"keydown\", onSheetKeyDown);\n    onCleanup(() => props.dialog.removeEventListener(\"keydown\", onSheetKeyDown));\n  });\n  return (\n    <div\n      ref={menu}\n      class=\"k2b-gesture-menu__sheet-menu\"\n      role=\"menu\"\n      aria-label={props.label}\n      data-icons={props.icons === \"tile\" ? \"tile\" : undefined}\n      onKeyDown={onKeyDown}\n    >\n      <props.Items items={props.items} close={() => props.close()} />\n    </div>\n  );\n}\n\nexport type MenuSheetOptions = {\n  /** Renders the rows: the dropdown's own `DropdownItems`, passed in so this module does not import it back. */\n  Items: (props: { items: readonly DropdownItem[]; close: (restoreFocus?: boolean) => void }) => JSX.Element;\n  items: readonly DropdownItem[];\n  /** Names the sheet and its menu. */\n  label: string;\n  /** The render locale of the opener; the sheet renders outside its tree. */\n  locale: string;\n  /** Shown above the menu, for example a row of quick reactions. `close` closes the sheet. */\n  top?: (close: () => void) => JSX.Element;\n  search?: DropdownSearch;\n  icons?: \"plain\" | \"tile\";\n  /** A quiet sentence below the entries. */\n  note?: string;\n  signal?: AbortSignal;\n};\n\n/** A searchable menu in the sheet: the sheet's first field, so it takes the focus as the sheet opens, as in the menu. */\nfunction SheetSearch(props: {\n  Items: MenuSheetOptions[\"Items\"];\n  items: readonly DropdownItem[];\n  search: DropdownSearch;\n  wrap: <T extends DropdownItem>(items: readonly T[]) => T[];\n  label: string;\n  locale: string;\n  close: () => void;\n  icons?: \"plain\" | \"tile\";\n}): JSX.Element {\n  const [query, setQuery] = createSignal(\"\");\n  const filter = props.search.filter;\n  return (\n    <div\n      class=\"k2b-gesture-menu__sheet-menu\"\n      role=\"dialog\"\n      aria-label={props.label}\n      data-search=\"\"\n      data-icons={props.icons === \"tile\" ? \"tile\" : undefined}\n    >\n      <MenuSearch\n        Items={props.Items}\n        items={props.items}\n        search={{\n          ...props.search,\n          // The sheet's own items are wrapped already; a host's filter returns its unwrapped entries.\n          filter: (value) => (filter ? props.wrap(filter(value)) : filterDropdownItems(props.items, value, props.locale)),\n        }}\n        label={props.label}\n        query={query}\n        setQuery={setQuery}\n        close={() => props.close()}\n      />\n    </div>\n  );\n}\n\n/** Opens menu items as a bottom sheet; resolves after the sheet closed and the chosen action ran. */\nexport const openMenuSheet = (options: MenuSheetOptions): Promise<void> => {\n  let chosen: (() => void) | undefined;\n  const choose = (action: () => void) => {\n    chosen = action;\n  };\n  return dialogCore\n    .open<void>(\n      (close, context) => (\n        <LocaleProvider locale={options.locale}>\n          <BottomSheet onDismiss={context.requestDismiss}>\n            <BottomSheet.Body>\n              {options.top?.(() => close())}\n              <Show\n                when={options.search}\n                fallback={\n                  <SheetMenu\n                    Items={options.Items}\n                    items={afterClose(options.items, choose)}\n                    label={options.label}\n                    close={() => close()}\n                    dialog={context.dialog}\n                    icons={options.icons}\n                  />\n                }\n              >\n                {(search) => (\n                  <SheetSearch\n                    Items={options.Items}\n                    items={afterClose(options.items, choose)}\n                    search={search()}\n                    wrap={(items) => afterClose(items, choose)}\n                    label={options.label}\n                    locale={options.locale}\n                    close={() => close()}\n                    icons={options.icons}\n                  />\n                )}\n              </Show>\n              <Show when={options.note}>\n                <p class=\"k2b-dropdown__note\">{options.note}</p>\n              </Show>\n            </BottomSheet.Body>\n          </BottomSheet>\n        </LocaleProvider>\n      ),\n      { ...bottomSheetOptions, ariaLabel: options.label, history: true, signal: options.signal },\n    )\n    .then(() => chosen?.());\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/actions/phone-sheet.js

@@ -0,0 +1,4 @@
+/** Phones, where a menu or a date calendar opens as a bottom sheet instead of beside its trigger. */
+export const PHONE_SHEET_QUERY = "(max-width: 47.999rem)";
+export const prefersMenuSheet = () => typeof matchMedia === "function" && matchMedia(PHONE_SHEET_QUERY).matches;
+//# sourceMappingURL=phone-sheet.js.map

package/dist/browser/actions/phone-sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["actions/phone-sheet.ts"],"sourcesContent":["/** Phones, where a menu or a date calendar opens as a bottom sheet instead of beside its trigger. */\nexport const PHONE_SHEET_QUERY = \"(max-width: 47.999rem)\";\n\nexport const prefersMenuSheet = (): boolean => typeof matchMedia === \"function\" && matchMedia(PHONE_SHEET_QUERY).matches;\n"],"mappings":"AAAA;AACA,OAAO,MAAM,iBAAiB,GAAG,wBAAwB;AAEzD,OAAO,MAAM,gBAAgB,GAAG,MAAe,OAAO,UAAU,KAAK,UAAU,IAAI,UAAU,CAAC,iBAAiB,CAAC,CAAC,OAAO","ignoreList":[]}

package/dist/browser/content/DataTable.js

@@ -43,7 +43,6 @@ import { PanelHeader } from "../layout/PanelHeader";
 import { Paper } from "../surfaces/Paper";
 import Placeholder from "../surfaces/Placeholder";
 import { useDataTableMessages } from "./data-table-messages";
-const WIDE_TABLE_COLUMNS = 8;
 const DataTablePanelContext = createContext();
 const defaultRender = (value, locale, messages) => {
   if (value === null || value === undefined || value === "") return "—";
@@ -481,14 +480,14 @@ function DataTableRoot(props) {
                   }) : renderHeaderDefault(col);
                 })());
                 _$effect(_p$ => {
-                  var _v$15 = `${col.headerClass ?? ""} ${col.class ?? ""}`,
-                    _v$16 = alignAttr(col),
-                    _v$17 = columnHighlighted(index()),
-                    _v$18 = ariaSortFor(col);
-                  _v$15 !== _p$.e && _$className(_el$23, _p$.e = _v$15);
-                  _v$16 !== _p$.t && _$setAttribute(_el$23, "data-align", _p$.t = _v$16);
-                  _v$17 !== _p$.a && _$setAttribute(_el$23, "data-highlighted", _p$.a = _v$17);
-                  _v$18 !== _p$.o && _$setAttribute(_el$23, "aria-sort", _p$.o = _v$18);
+                  var _v$14 = `${col.headerClass ?? ""} ${col.class ?? ""}`,
+                    _v$15 = alignAttr(col),
+                    _v$16 = columnHighlighted(index()),
+                    _v$17 = ariaSortFor(col);
+                  _v$14 !== _p$.e && _$className(_el$23, _p$.e = _v$14);
+                  _v$15 !== _p$.t && _$setAttribute(_el$23, "data-align", _p$.t = _v$15);
+                  _v$16 !== _p$.a && _$setAttribute(_el$23, "data-highlighted", _p$.a = _v$16);
+                  _v$17 !== _p$.o && _$setAttribute(_el$23, "aria-sort", _p$.o = _v$17);
                   return _p$;
                 }, {
                   e: undefined,
@@ -601,18 +600,18 @@ function DataTableRoot(props) {
                               }) : renderValueDefault(value());
                             })());
                             _$effect(_p$ => {
-                              var _v$25 = `${col.cellClass ?? ""} ${col.class ?? ""}`,
-                                _v$26 = nowrapAttr(col),
-                                _v$27 = alignAttr(col),
-                                _v$28 = props.verticalAlign && props.verticalAlign !== "middle" ? props.verticalAlign : undefined,
-                                _v$29 = columnHighlighted(index()),
-                                _v$30 = cellContentClass();
-                              _v$25 !== _p$.e && _$className(_el$31, _p$.e = _v$25);
-                              _v$26 !== _p$.t && _$setAttribute(_el$31, "data-nowrap", _p$.t = _v$26);
-                              _v$27 !== _p$.a && _$setAttribute(_el$31, "data-align", _p$.a = _v$27);
-                              _v$28 !== _p$.o && _$setAttribute(_el$31, "data-valign", _p$.o = _v$28);
-                              _v$29 !== _p$.i && _$setAttribute(_el$31, "data-highlighted", _p$.i = _v$29);
-                              _v$30 !== _p$.n && _$className(_el$32, _p$.n = _v$30);
+                              var _v$24 = `${col.cellClass ?? ""} ${col.class ?? ""}`,
+                                _v$25 = nowrapAttr(col),
+                                _v$26 = alignAttr(col),
+                                _v$27 = props.verticalAlign && props.verticalAlign !== "middle" ? props.verticalAlign : undefined,
+                                _v$28 = columnHighlighted(index()),
+                                _v$29 = cellContentClass();
+                              _v$24 !== _p$.e && _$className(_el$31, _p$.e = _v$24);
+                              _v$25 !== _p$.t && _$setAttribute(_el$31, "data-nowrap", _p$.t = _v$25);
+                              _v$26 !== _p$.a && _$setAttribute(_el$31, "data-align", _p$.a = _v$26);
+                              _v$27 !== _p$.o && _$setAttribute(_el$31, "data-valign", _p$.o = _v$27);
+                              _v$28 !== _p$.i && _$setAttribute(_el$31, "data-highlighted", _p$.i = _v$28);
+                              _v$29 !== _p$.n && _$className(_el$32, _p$.n = _v$29);
                               return _p$;
                             }, {
                               e: undefined,
@@ -627,18 +626,18 @@ function DataTableRoot(props) {
                         }
                       }));
                       _$effect(_p$ => {
-                        var _v$19 = `k2b-data-table__row ${rowClass(row)}`,
-                          _v$20 = shouldHoverRows() ? "true" : undefined,
-                          _v$21 = shouldHoverRows() && isInteractive() ? "true" : undefined,
-                          _v$22 = isSelected() ? "true" : undefined,
-                          _v$23 = props.selection ? !!isSelected() : undefined,
-                          _v$24 = props.selection ? props.selection.focused() === id() ? 0 : -1 : isInteractive() ? 0 : undefined;
-                        _v$19 !== _p$.e && _$className(_el$30, _p$.e = _v$19);
-                        _v$20 !== _p$.t && _$setAttribute(_el$30, "data-hover", _p$.t = _v$20);
-                        _v$21 !== _p$.a && _$setAttribute(_el$30, "data-clickable", _p$.a = _v$21);
-                        _v$22 !== _p$.o && _$setAttribute(_el$30, "data-selected", _p$.o = _v$22);
-                        _v$23 !== _p$.i && _$setAttribute(_el$30, "aria-selected", _p$.i = _v$23);
-                        _v$24 !== _p$.n && _$setAttribute(_el$30, "tabindex", _p$.n = _v$24);
+                        var _v$18 = `k2b-data-table__row ${rowClass(row)}`,
+                          _v$19 = shouldHoverRows() ? "true" : undefined,
+                          _v$20 = shouldHoverRows() && isInteractive() ? "true" : undefined,
+                          _v$21 = isSelected() ? "true" : undefined,
+                          _v$22 = props.selection ? !!isSelected() : undefined,
+                          _v$23 = props.selection ? props.selection.focused() === id() ? 0 : -1 : isInteractive() ? 0 : undefined;
+                        _v$18 !== _p$.e && _$className(_el$30, _p$.e = _v$18);
+                        _v$19 !== _p$.t && _$setAttribute(_el$30, "data-hover", _p$.t = _v$19);
+                        _v$20 !== _p$.a && _$setAttribute(_el$30, "data-clickable", _p$.a = _v$20);
+                        _v$21 !== _p$.o && _$setAttribute(_el$30, "data-selected", _p$.o = _v$21);
+                        _v$22 !== _p$.i && _$setAttribute(_el$30, "aria-selected", _p$.i = _v$22);
+                        _v$23 !== _p$.n && _$setAttribute(_el$30, "tabindex", _p$.n = _v$23);
                         return _p$;
                       }, {
                         e: undefined,
@@ -690,12 +689,12 @@ function DataTableRoot(props) {
                         }) : renderValueDefault(value());
                       })());
                       _$effect(_p$ => {
-                        var _v$31 = nowrapAttr(col),
-                          _v$32 = alignAttr(col),
-                          _v$33 = columnHighlighted(index());
-                        _v$31 !== _p$.e && _$setAttribute(_el$35, "data-nowrap", _p$.e = _v$31);
-                        _v$32 !== _p$.t && _$setAttribute(_el$35, "data-align", _p$.t = _v$32);
-                        _v$33 !== _p$.a && _$setAttribute(_el$35, "data-highlighted", _p$.a = _v$33);
+                        var _v$30 = nowrapAttr(col),
+                          _v$31 = alignAttr(col),
+                          _v$32 = columnHighlighted(index());
+                        _v$30 !== _p$.e && _$setAttribute(_el$35, "data-nowrap", _p$.e = _v$30);
+                        _v$31 !== _p$.t && _$setAttribute(_el$35, "data-align", _p$.t = _v$31);
+                        _v$32 !== _p$.a && _$setAttribute(_el$35, "data-highlighted", _p$.a = _v$32);
                         return _p$;
                       }, {
                         e: undefined,
@@ -731,8 +730,7 @@ function DataTableRoot(props) {
                 _v$10 = props.scrollPreserveKey || undefined,
                 _v$11 = tableClass(),
                 _v$12 = props.fillHeight ? "true" : undefined,
-                _v$13 = props.columns.length > WIDE_TABLE_COLUMNS ? "true" : undefined,
-                _v$14 = props.stickyHeader === false ? undefined : "true";
+                _v$13 = props.stickyHeader === false ? undefined : "true";
               _v$5 !== _p$.e && _$setAttribute(_el$0, "aria-label", _p$.e = _v$5);
               _v$6 !== _p$.t && _$setAttribute(_el$0, "aria-labelledby", _p$.t = _v$6);
               _v$7 !== _p$.a && _$setAttribute(_el$0, "aria-busy", _p$.a = _v$7);
@@ -743,8 +741,7 @@ function DataTableRoot(props) {
               _v$10 !== _p$.h && _$setAttribute(_el$0, "data-scroll-preserve", _p$.h = _v$10);
               _v$11 !== _p$.r && _$className(_el$1, _p$.r = _v$11);
               _v$12 !== _p$.d && _$setAttribute(_el$1, "data-fill", _p$.d = _v$12);
-              _v$13 !== _p$.l && _$setAttribute(_el$1, "data-wide", _p$.l = _v$13);
-              _v$14 !== _p$.u && _$setAttribute(_el$11, "data-sticky", _p$.u = _v$14);
+              _v$13 !== _p$.l && _$setAttribute(_el$11, "data-sticky", _p$.l = _v$13);
               return _p$;
             }, {
               e: undefined,
@@ -757,8 +754,7 @@ function DataTableRoot(props) {
               h: undefined,
               r: undefined,
               d: undefined,
-              l: undefined,
-              u: undefined
+              l: undefined
             });
             return _el$0;
           })(), _$createComponent(For, {
@@ -774,12 +770,12 @@ function DataTableRoot(props) {
               _el$36.$$pointerdown = event => startScrollbarDrag(event, axis);
               _$setAttribute(_el$36, "data-axis", axis);
               _$effect(_p$ => {
-                var _v$34 = scrollbars()[axis].overflow ? "true" : undefined,
-                  _v$35 = `${scrollbars()[axis].offset}px`,
-                  _v$36 = `${scrollbars()[axis].size}px`;
-                _v$34 !== _p$.e && _$setAttribute(_el$36, "data-overflow", _p$.e = _v$34);
-                _v$35 !== _p$.t && _$setStyleProperty(_el$37, "--k2b-data-table-scroll-offset", _p$.t = _v$35);
-                _v$36 !== _p$.a && _$setStyleProperty(_el$37, "--k2b-data-table-scroll-size", _p$.a = _v$36);
+                var _v$33 = scrollbars()[axis].overflow ? "true" : undefined,
+                  _v$34 = `${scrollbars()[axis].offset}px`,
+                  _v$35 = `${scrollbars()[axis].size}px`;
+                _v$33 !== _p$.e && _$setAttribute(_el$36, "data-overflow", _p$.e = _v$33);
+                _v$34 !== _p$.t && _$setStyleProperty(_el$37, "--k2b-data-table-scroll-offset", _p$.t = _v$34);
+                _v$35 !== _p$.a && _$setStyleProperty(_el$37, "--k2b-data-table-scroll-size", _p$.a = _v$35);
                 return _p$;
               }, {
                 e: undefined,