@rotki/ui-library 2.26.1 → 3.0.0-beta.1

package/dist/composables/sticky-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"sticky-header.js","names":[],"sources":["../../src/composables/sticky-header.ts"],"sourcesContent":["import type { MaybeRefOrGetter, Ref, ShallowRef } from 'vue';\n\nexport interface UseStickyTableHeaderRefs {\n  table: Readonly<ShallowRef<HTMLTableElement | null>>;\n}\n\ninterface StickyElements {\n  head: HTMLElement;\n  theadClone: HTMLElement;\n  root: HTMLTableElement;\n}\n\ninterface UseStickyTableHeaderReturn {\n  stick: Readonly<Ref<boolean>>;\n}\n\nconst SELECTORS = {\n  head: ':scope > thead[data-id=head-main]',\n  headClone: ':scope > thead[data-id=head-clone]',\n  row: ':scope > tbody > tr:not([hidden])',\n  th: ':scope > th',\n} as const;\n\nconst BORDER_PRECISION = -0.5;\n\nfunction queryHeadRow(root: HTMLTableElement, selector: string): HTMLTableRowElement | null {\n  return root.querySelector(`${selector} > tr`);\n}\n\nfunction queryColumns(row: HTMLTableRowElement | null): HTMLElement[] {\n  if (!row)\n    return [];\n  return Array.from(row.querySelectorAll<HTMLElement>(SELECTORS.th));\n}\n\nfunction readColumnWidths(columns: HTMLElement[]): number[] {\n  return columns.map(col => col.getBoundingClientRect().width);\n}\n\nfunction applyColumnWidths(columns: HTMLElement[], widths: number[]): void {\n  for (const [i, column] of columns.entries()) {\n    const width = widths[i];\n    if (width !== undefined)\n      column.style.width = `${width}px`;\n  }\n}\n\nfunction positionHeadAtRest(head: HTMLElement): void {\n  head.style.left = `${BORDER_PRECISION}px`;\n  head.style.top = '0';\n}\n\ninterface StuckPosition {\n  clonedRect: DOMRect;\n  tableRect: DOMRect;\n  lastRowHeight: number;\n  top: number;\n  origin: Point;\n}\n\nfunction positionHeadStuck(head: HTMLElement, { clonedRect, lastRowHeight, origin, tableRect, top }: StuckPosition): void {\n  head.style.left = `${clonedRect.left - origin.left + BORDER_PRECISION}px`;\n\n  const isNearBottom = tableRect.bottom <= lastRowHeight + clonedRect.height + top;\n  const viewportTop = isNearBottom ? tableRect.bottom - lastRowHeight - clonedRect.height : top;\n  head.style.top = `${viewportTop - origin.top}px`;\n}\n\nfunction isInStickyRange(tableRect: DOMRect, top: number): boolean {\n  return tableRect.top <= top && tableRect.bottom > top;\n}\n\ninterface Point {\n  left: number;\n  top: number;\n}\n\n/**\n * The nearest ancestor that currently scrolls vertically, e.g. a dialog or drawer body, or\n * `undefined` when only the page does. One that could scroll but has nothing to (a card body on a\n * page) is skipped, as is the table's own scroller, which only scrolls sideways.\n */\nfunction findScrollParent(element: HTMLElement): HTMLElement | undefined {\n  let parent = element.parentElement;\n  while (parent && parent !== document.body && parent !== document.documentElement) {\n    const { overflowY } = getComputedStyle(parent);\n    if ((overflowY === 'auto' || overflowY === 'scroll') && parent.scrollHeight > parent.clientHeight)\n      return parent;\n    parent = parent.parentElement;\n  }\n  return undefined;\n}\n\nfunction createsFixedContainingBlock(style: CSSStyleDeclaration): boolean {\n  return style.transform !== 'none'\n    || style.perspective !== 'none'\n    || style.filter !== 'none'\n    || (style.backdropFilter !== undefined && style.backdropFilter !== 'none')\n    || /transform|perspective|filter/.test(style.willChange)\n    || /paint|layout|strict|content/.test(style.contain);\n}\n\n/**\n * Where a `position: fixed` descendant's `top: 0; left: 0` lands in the viewport. That is the\n * viewport origin, unless an ancestor (a centred dialog is translated) becomes its containing block.\n */\nfunction getFixedOrigin(element: HTMLElement): Point {\n  let parent = element.parentElement;\n  while (parent) {\n    if (createsFixedContainingBlock(getComputedStyle(parent))) {\n      const rect = parent.getBoundingClientRect();\n      return { left: rect.left + parent.clientLeft, top: rect.top + parent.clientTop };\n    }\n    parent = parent.parentElement;\n  }\n  return { left: 0, top: 0 };\n}\n\nfunction getLastRowHeight(root: HTMLTableElement): number | undefined {\n  const rows = root.querySelectorAll(SELECTORS.row);\n  if (rows.length <= 1)\n    return undefined;\n  return rows.item(rows.length - 1)?.getBoundingClientRect().height ?? 0;\n}\n\n/**\n * Setup sticky table header\n */\nexport function useStickyTableHeader(\n  sticky: MaybeRefOrGetter<boolean> = shallowRef(false),\n  offsetTop: MaybeRefOrGetter<number | undefined>,\n  tableRefs: UseStickyTableHeaderRefs,\n): UseStickyTableHeaderReturn {\n  const { table } = tableRefs;\n  const stick = shallowRef<boolean>(false);\n\n  let resizeCleanups: (() => void)[] = [];\n  let syncRafId: number | null = null;\n  let rafId: number | null = null;\n\n  function cleanupResizeObservers(): void {\n    for (const cleanup of resizeCleanups)\n      cleanup();\n    resizeCleanups = [];\n  }\n\n  function cancelPendingSync(): void {\n    if (syncRafId !== null)\n      cancelAnimationFrame(syncRafId);\n    syncRafId = null;\n  }\n\n  function scheduleSyncWidths(cloneColumns: HTMLElement[], mainColumns: HTMLElement[]): void {\n    cancelPendingSync();\n\n    // One frame is enough: the main thead is positioned, so its widths never feed back into the clone's\n    syncRafId = requestAnimationFrame(() => {\n      syncRafId = null;\n      applyColumnWidths(mainColumns, readColumnWidths(cloneColumns));\n    });\n  }\n\n  function observeColumnResizes(cloneColumns: HTMLElement[], mainColumns: HTMLElement[]): void {\n    cleanupResizeObservers();\n\n    for (const th of cloneColumns) {\n      const { stop } = useResizeObserver(th, () => {\n        scheduleSyncWidths(cloneColumns, mainColumns);\n      });\n      resizeCleanups.push(stop);\n    }\n  }\n\n  function watchCellWidth(): void {\n    const root = get(table);\n    if (!toValue(sticky) || !root)\n      return;\n\n    const cloneRow = queryHeadRow(root, SELECTORS.headClone);\n    const mainRow = queryHeadRow(root, SELECTORS.head);\n    const cloneColumns = queryColumns(cloneRow);\n    const mainColumns = queryColumns(mainRow);\n\n    useMutationObserver(cloneRow, (mutations) => {\n      const hasRelevantMutation = mutations.some(\n        m => m.type === 'childList' || m.type === 'attributes',\n      );\n      if (hasRelevantMutation)\n        observeColumnResizes(queryColumns(cloneRow), queryColumns(mainRow));\n    }, { attributes: true, childList: true, subtree: true });\n\n    observeColumnResizes(cloneColumns, mainColumns);\n  }\n\n  function queryStickyElements(): StickyElements | undefined {\n    const root = get(table);\n    if (!toValue(sticky) || !root)\n      return undefined;\n\n    const theadClone = root.querySelector<HTMLElement>(SELECTORS.headClone);\n    const head = root.querySelector<HTMLElement>(SELECTORS.head);\n    if (!theadClone || !head)\n      return undefined;\n\n    return { head, root, theadClone };\n  }\n\n  function toggleStickyClass(): void {\n    const elements = queryStickyElements();\n    if (!elements)\n      return;\n\n    const { head, root, theadClone } = elements;\n    const clonedRect = theadClone.getBoundingClientRect();\n    const tableRect = root.getBoundingClientRect();\n    const pageTop = toValue(offsetTop) ?? 0;\n    const scrollParent = findScrollParent(root);\n    const top = scrollParent\n      ? Math.max(scrollParent.getBoundingClientRect().top + scrollParent.clientTop, pageTop)\n      : pageTop;\n\n    head.style.width = `${clonedRect.width}px`;\n\n    const lastRowHeight = getLastRowHeight(root);\n    if (lastRowHeight === undefined) {\n      set(stick, false);\n      positionHeadAtRest(head);\n      return;\n    }\n\n    if (isInStickyRange(tableRect, top)) {\n      set(stick, true);\n      positionHeadStuck(head, { clonedRect, lastRowHeight, origin: getFixedOrigin(head), tableRect, top });\n    }\n    else {\n      set(stick, false);\n      positionHeadAtRest(head);\n    }\n  }\n\n  function throttledToggleStickyClass(): void {\n    if (rafId !== null)\n      return;\n    rafId = requestAnimationFrame(() => {\n      toggleStickyClass();\n      rafId = null;\n    });\n  }\n\n  function onScroll(event: Event): void {\n    const root = get(table);\n    const target = event.target;\n    // scroll does not bubble, so this runs in capture for every scroll: only an ancestor's matters\n    if (!root || !(target instanceof Node) || !target.contains(root))\n      return;\n    throttledToggleStickyClass();\n  }\n\n  onMounted(() => {\n    toggleStickyClass();\n    useEventListener(document, 'scroll', onScroll, { capture: true, passive: true });\n    useEventListener(window, 'resize', throttledToggleStickyClass);\n    watchCellWidth();\n  });\n\n  return {\n    stick: readonly(stick),\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"sticky-header.js","names":[],"sources":["../../src/composables/sticky-header.ts"],"sourcesContent":["import type { MaybeRefOrGetter, Ref, ShallowRef } from 'vue';\n\nexport interface UseStickyTableHeaderRefs {\n  table: Readonly<ShallowRef<HTMLTableElement | null>>;\n}\n\ninterface StickyElements {\n  head: HTMLElement;\n  theadClone: HTMLElement;\n  root: HTMLTableElement;\n}\n\ninterface UseStickyTableHeaderReturn {\n  stick: Readonly<Ref<boolean>>;\n}\n\nconst SELECTORS = {\n  head: ':scope > thead[data-id=head-main]',\n  headClone: ':scope > thead[data-id=head-clone]',\n  row: ':scope > tbody > tr:not([hidden])',\n  th: ':scope > th',\n} as const;\n\nconst BORDER_PRECISION = -0.5;\n\nfunction queryHeadRow(root: HTMLTableElement, selector: string): HTMLTableRowElement | null {\n  return root.querySelector(`${selector} > tr`);\n}\n\nfunction queryColumns(row: HTMLTableRowElement | null): HTMLElement[] {\n  if (!row)\n    return [];\n  return Array.from(row.querySelectorAll<HTMLElement>(SELECTORS.th));\n}\n\nfunction readColumnWidths(columns: HTMLElement[]): number[] {\n  return columns.map(col => col.getBoundingClientRect().width);\n}\n\nfunction applyColumnWidths(columns: HTMLElement[], widths: number[]): void {\n  for (const [i, column] of columns.entries()) {\n    const width = widths[i];\n    if (width !== undefined)\n      column.style.width = `${width}px`;\n  }\n}\n\nfunction positionHeadAtRest(head: HTMLElement): void {\n  head.style.left = `${BORDER_PRECISION}px`;\n  head.style.top = '0';\n}\n\ninterface StuckPosition {\n  clonedRect: DOMRect;\n  tableRect: DOMRect;\n  lastRowHeight: number;\n  top: number;\n  origin: Point;\n}\n\nfunction positionHeadStuck(head: HTMLElement, { clonedRect, lastRowHeight, origin, tableRect, top }: StuckPosition): void {\n  head.style.left = `${clonedRect.left - origin.left + BORDER_PRECISION}px`;\n\n  const isNearBottom = tableRect.bottom <= lastRowHeight + clonedRect.height + top;\n  const viewportTop = isNearBottom ? tableRect.bottom - lastRowHeight - clonedRect.height : top;\n  head.style.top = `${viewportTop - origin.top}px`;\n}\n\nfunction isInStickyRange(tableRect: DOMRect, top: number): boolean {\n  return tableRect.top <= top && tableRect.bottom > top;\n}\n\ninterface Point {\n  left: number;\n  top: number;\n}\n\n/**\n * The nearest ancestor that currently scrolls vertically, e.g. a dialog or drawer body, or\n * `undefined` when only the page does. One that could scroll but has nothing to (a card body on a\n * page) is skipped, as is the table's own scroller, which only scrolls sideways.\n */\nfunction findScrollParent(element: HTMLElement): HTMLElement | undefined {\n  let parent = element.parentElement;\n  while (parent && parent !== document.body && parent !== document.documentElement) {\n    const { overflowY } = getComputedStyle(parent);\n    if ((overflowY === 'auto' || overflowY === 'scroll') && parent.scrollHeight > parent.clientHeight)\n      return parent;\n    parent = parent.parentElement;\n  }\n  return undefined;\n}\n\nfunction isSet(value: string | undefined): boolean {\n  return value !== undefined && value !== '' && value !== 'none';\n}\n\n/**\n * Whether an element becomes the containing block of its `position: fixed`\n * descendants. The individual `translate`, `rotate` and `scale` properties\n * count like `transform`: Tailwind 4 writes its translate utilities to\n * `translate`, so a dialog centred with `-translate-x-1/2` leaves `transform`\n * at `none`.\n */\nexport function createsFixedContainingBlock(style: CSSStyleDeclaration): boolean {\n  return isSet(style.transform)\n    || isSet(style.translate)\n    || isSet(style.rotate)\n    || isSet(style.scale)\n    || isSet(style.perspective)\n    || isSet(style.filter)\n    || isSet(style.backdropFilter)\n    || /transform|translate|rotate|scale|perspective|filter/.test(style.willChange)\n    || /paint|layout|strict|content/.test(style.contain);\n}\n\n/**\n * Where a `position: fixed` descendant's `top: 0; left: 0` lands in the viewport. That is the\n * viewport origin, unless an ancestor (a centred dialog is translated) becomes its containing block.\n */\nfunction getFixedOrigin(element: HTMLElement): Point {\n  let parent = element.parentElement;\n  while (parent) {\n    if (createsFixedContainingBlock(getComputedStyle(parent))) {\n      const rect = parent.getBoundingClientRect();\n      return { left: rect.left + parent.clientLeft, top: rect.top + parent.clientTop };\n    }\n    parent = parent.parentElement;\n  }\n  return { left: 0, top: 0 };\n}\n\nfunction getLastRowHeight(root: HTMLTableElement): number | undefined {\n  const rows = root.querySelectorAll(SELECTORS.row);\n  if (rows.length <= 1)\n    return undefined;\n  return rows.item(rows.length - 1)?.getBoundingClientRect().height ?? 0;\n}\n\n/**\n * Setup sticky table header\n */\nexport function useStickyTableHeader(\n  sticky: MaybeRefOrGetter<boolean> = shallowRef(false),\n  offsetTop: MaybeRefOrGetter<number | undefined>,\n  tableRefs: UseStickyTableHeaderRefs,\n): UseStickyTableHeaderReturn {\n  const { table } = tableRefs;\n  const stick = shallowRef<boolean>(false);\n\n  let resizeCleanups: (() => void)[] = [];\n  let syncRafId: number | null = null;\n  let rafId: number | null = null;\n\n  function cleanupResizeObservers(): void {\n    for (const cleanup of resizeCleanups)\n      cleanup();\n    resizeCleanups = [];\n  }\n\n  function cancelPendingSync(): void {\n    if (syncRafId !== null)\n      cancelAnimationFrame(syncRafId);\n    syncRafId = null;\n  }\n\n  function scheduleSyncWidths(cloneColumns: HTMLElement[], mainColumns: HTMLElement[]): void {\n    cancelPendingSync();\n\n    // One frame is enough: the main thead is positioned, so its widths never feed back into the clone's\n    syncRafId = requestAnimationFrame(() => {\n      syncRafId = null;\n      applyColumnWidths(mainColumns, readColumnWidths(cloneColumns));\n      // the head's own width too: left stale, it squeezes the columns and leaves an untinted strip at the end\n      toggleStickyClass();\n    });\n  }\n\n  function observeColumnResizes(cloneColumns: HTMLElement[], mainColumns: HTMLElement[]): void {\n    cleanupResizeObservers();\n\n    for (const th of cloneColumns) {\n      const { stop } = useResizeObserver(th, () => {\n        scheduleSyncWidths(cloneColumns, mainColumns);\n      });\n      resizeCleanups.push(stop);\n    }\n  }\n\n  function watchCellWidth(): void {\n    const root = get(table);\n    if (!toValue(sticky) || !root)\n      return;\n\n    const cloneRow = queryHeadRow(root, SELECTORS.headClone);\n    const mainRow = queryHeadRow(root, SELECTORS.head);\n    const cloneColumns = queryColumns(cloneRow);\n    const mainColumns = queryColumns(mainRow);\n\n    useMutationObserver(cloneRow, (mutations) => {\n      const hasRelevantMutation = mutations.some(\n        m => m.type === 'childList' || m.type === 'attributes',\n      );\n      if (hasRelevantMutation)\n        observeColumnResizes(queryColumns(cloneRow), queryColumns(mainRow));\n    }, { attributes: true, childList: true, subtree: true });\n\n    observeColumnResizes(cloneColumns, mainColumns);\n  }\n\n  function queryStickyElements(): StickyElements | undefined {\n    const root = get(table);\n    if (!toValue(sticky) || !root)\n      return undefined;\n\n    const theadClone = root.querySelector<HTMLElement>(SELECTORS.headClone);\n    const head = root.querySelector<HTMLElement>(SELECTORS.head);\n    if (!theadClone || !head)\n      return undefined;\n\n    return { head, root, theadClone };\n  }\n\n  function toggleStickyClass(): void {\n    const elements = queryStickyElements();\n    if (!elements)\n      return;\n\n    const { head, root, theadClone } = elements;\n    const clonedRect = theadClone.getBoundingClientRect();\n    const tableRect = root.getBoundingClientRect();\n    const pageTop = toValue(offsetTop) ?? 0;\n    const scrollParent = findScrollParent(root);\n    const top = scrollParent\n      ? Math.max(scrollParent.getBoundingClientRect().top + scrollParent.clientTop, pageTop)\n      : pageTop;\n\n    head.style.width = `${clonedRect.width}px`;\n\n    const lastRowHeight = getLastRowHeight(root);\n    if (lastRowHeight === undefined) {\n      set(stick, false);\n      positionHeadAtRest(head);\n      return;\n    }\n\n    if (isInStickyRange(tableRect, top)) {\n      set(stick, true);\n      positionHeadStuck(head, { clonedRect, lastRowHeight, origin: getFixedOrigin(head), tableRect, top });\n    }\n    else {\n      set(stick, false);\n      positionHeadAtRest(head);\n    }\n  }\n\n  function throttledToggleStickyClass(): void {\n    if (rafId !== null)\n      return;\n    rafId = requestAnimationFrame(() => {\n      toggleStickyClass();\n      rafId = null;\n    });\n  }\n\n  function onScroll(event: Event): void {\n    const root = get(table);\n    const target = event.target;\n    // scroll does not bubble, so this runs in capture for every scroll: only an ancestor's matters\n    if (!root || !(target instanceof Node) || !target.contains(root))\n      return;\n    throttledToggleStickyClass();\n  }\n\n  onMounted(() => {\n    toggleStickyClass();\n    useEventListener(document, 'scroll', onScroll, { capture: true, passive: true });\n    useEventListener(window, 'resize', throttledToggleStickyClass);\n    watchCellWidth();\n  });\n\n  return {\n    stick: readonly(stick),\n  };\n}\n"],"mappings":"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"}

package/dist/composables/tables/data-table/page-scroll.d.ts

@@ -0,0 +1,30 @@
+import type { MaybeComputedElementRef } from '@vueuse/core';
+import type { MaybeRefOrGetter, Ref } from 'vue';
+export interface UsePageScrollReturn {
+    /** Scroll the table's top into view, if it has scrolled above the visible area. */
+    revealTableTop: () => Promise<void>;
+}
+/**
+ * After a page change, brings the table's first row back into view so the new page reads from the
+ * top. It scrolls only when the table's top sits above the visible area, as it does after paging
+ * from the bottom bar of a long page; a table that already shows its top stays put, so paging never
+ * makes the view jump.
+ */
+export declare function usePageScroll(wrapper: Readonly<Ref<HTMLElement | null | undefined>>, stickyOffset: MaybeRefOrGetter<number | undefined>): UsePageScrollReturn;
+/**
+ * Whether the pagination bar may stick: true once the top {@link STICK_AFTER}px of the table are
+ * inside its scrolling area. It starts true, so a page without IntersectionObserver keeps the bar
+ * sticky.
+ */
+export declare function useStickyPaginationBar(wrapper: Readonly<Ref<HTMLElement | null | undefined>>, enabled: MaybeRefOrGetter<boolean>): Readonly<Ref<boolean>>;
+/**
+ * Publishes how much of the view's bottom a stuck pagination bar covers, as `--rui-sticky-bottom` on
+ * the document root, so the page's own floating parts (a dock, a FAB) can rise above the bar instead of
+ * covering its page buttons. Only a bar stuck to the page counts: one stuck inside a scrolling area
+ * sits under nothing the page floats.
+ *
+ * @param sentinel - an empty element at the bar's own place after the rows; while it is below the view, the bar is stuck
+ * @param bar - the bar, measured for its height
+ * @param canStick - whether the bar may stick at all
+ */
+export declare function useStickyBottomInset(sentinel: Readonly<Ref<HTMLElement | null | undefined>>, bar: MaybeComputedElementRef, canStick: MaybeRefOrGetter<boolean>): void;

package/dist/composables/tables/data-table/page-scroll.js

@@ -0,0 +1,113 @@
+import { nextTick, onMounted, onScopeDispose, shallowRef, toValue, watchEffect } from "vue";
+import { useElementSize, useIntersectionObserver } from "@vueuse/core";
+import { get as get$1, set as set$1 } from "@vueuse/shared";
+//#region src/composables/tables/data-table/page-scroll.ts
+/**
+* How much of a table, from its top, must be on screen before its pagination bar sticks: the
+* column header and the first rows. A table just scrolling in from below keeps its bar under the
+* rows, rather than showing the bar on top of the header.
+*/
+var STICK_AFTER = 128;
+/**
+* The nearest ancestor that scrolls vertically. `undefined` means the page itself does, through
+* the window or a scrolling `<body>`, which is where a sticky offset such as an app bar applies.
+*/
+function findScroller(element) {
+	let node = element.parentElement;
+	while (node && node !== document.body && node !== document.documentElement) {
+		const { overflowY } = getComputedStyle(node);
+		if ((overflowY === "auto" || overflowY === "scroll") && node.scrollHeight > node.clientHeight) return node;
+		node = node.parentElement;
+	}
+}
+function scrollPageBy(top) {
+	const body = document.body;
+	if (body.scrollHeight > body.clientHeight && ["auto", "scroll"].includes(getComputedStyle(body).overflowY)) body.scrollBy({ top });
+	else window.scrollBy({ top });
+}
+/**
+* After a page change, brings the table's first row back into view so the new page reads from the
+* top. It scrolls only when the table's top sits above the visible area, as it does after paging
+* from the bottom bar of a long page; a table that already shows its top stays put, so paging never
+* makes the view jump.
+*/
+function usePageScroll(wrapper, stickyOffset) {
+	async function revealTableTop() {
+		await nextTick();
+		const element = get$1(wrapper);
+		if (!element) return;
+		const scroller = findScroller(element);
+		const viewTop = scroller ? scroller.getBoundingClientRect().top : toValue(stickyOffset) ?? 0;
+		const distance = element.getBoundingClientRect().top - viewTop;
+		if (distance >= 0) return;
+		if (scroller) scroller.scrollBy({ top: distance });
+		else scrollPageBy(distance);
+	}
+	return { revealTableTop };
+}
+/**
+* Whether the pagination bar may stick: true once the top {@link STICK_AFTER}px of the table are
+* inside its scrolling area. It starts true, so a page without IntersectionObserver keeps the bar
+* sticky.
+*/
+function useStickyPaginationBar(wrapper, enabled) {
+	const canStick = shallowRef(true);
+	const root = shallowRef();
+	onMounted(() => {
+		const element = get$1(wrapper);
+		if (element) set$1(root, findScroller(element));
+	});
+	useIntersectionObserver(() => toValue(enabled) ? get$1(wrapper) : void 0, ([entry]) => {
+		if (!entry) return;
+		set$1(canStick, entry.isIntersecting || entry.boundingClientRect.bottom <= (entry.rootBounds?.top ?? 0));
+	}, {
+		root,
+		rootMargin: `0px 0px -${STICK_AFTER}px 0px`
+	});
+	return canStick;
+}
+/** The height of each pagination bar stuck to the page, by table; the page's floating parts clear the tallest. */
+var stuckBarHeights = /* @__PURE__ */ new Map();
+function publishStickyBottom() {
+	if (typeof document === "undefined") return;
+	const style = document.documentElement.style;
+	if (stuckBarHeights.size === 0) style.removeProperty("--rui-sticky-bottom");
+	else style.setProperty("--rui-sticky-bottom", `${Math.max(...stuckBarHeights.values())}px`);
+}
+/**
+* Publishes how much of the view's bottom a stuck pagination bar covers, as `--rui-sticky-bottom` on
+* the document root, so the page's own floating parts (a dock, a FAB) can rise above the bar instead of
+* covering its page buttons. Only a bar stuck to the page counts: one stuck inside a scrolling area
+* sits under nothing the page floats.
+*
+* @param sentinel - an empty element at the bar's own place after the rows; while it is below the view, the bar is stuck
+* @param bar - the bar, measured for its height
+* @param canStick - whether the bar may stick at all
+*/
+function useStickyBottomInset(sentinel, bar, canStick) {
+	const id = Symbol("sticky-pagination-bar");
+	const belowView = shallowRef(false);
+	const pageLevel = shallowRef(false);
+	const { height } = useElementSize(bar, void 0, { box: "border-box" });
+	onMounted(() => {
+		const element = get$1(sentinel);
+		set$1(pageLevel, !!element && !findScroller(element));
+	});
+	useIntersectionObserver(sentinel, ([entry]) => {
+		if (!entry) return;
+		set$1(belowView, !entry.isIntersecting && entry.boundingClientRect.top >= (entry.rootBounds?.bottom ?? Number.POSITIVE_INFINITY));
+	});
+	watchEffect(() => {
+		if (get$1(pageLevel) && toValue(canStick) && get$1(belowView) && get$1(height) > 0) stuckBarHeights.set(id, get$1(height));
+		else stuckBarHeights.delete(id);
+		publishStickyBottom();
+	});
+	onScopeDispose(() => {
+		stuckBarHeights.delete(id);
+		publishStickyBottom();
+	});
+}
+//#endregion
+export { usePageScroll, useStickyBottomInset, useStickyPaginationBar };
+
+//# sourceMappingURL=page-scroll.js.map

package/dist/composables/tables/data-table/page-scroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-scroll.js","names":[],"sources":["../../../../src/composables/tables/data-table/page-scroll.ts"],"sourcesContent":["import type { MaybeComputedElementRef } from '@vueuse/core';\nimport type { MaybeRefOrGetter, Ref } from 'vue';\n\nexport interface UsePageScrollReturn {\n  /** Scroll the table's top into view, if it has scrolled above the visible area. */\n  revealTableTop: () => Promise<void>;\n}\n\n/**\n * How much of a table, from its top, must be on screen before its pagination bar sticks: the\n * column header and the first rows. A table just scrolling in from below keeps its bar under the\n * rows, rather than showing the bar on top of the header.\n */\nconst STICK_AFTER = 128;\n\n/**\n * The nearest ancestor that scrolls vertically. `undefined` means the page itself does, through\n * the window or a scrolling `<body>`, which is where a sticky offset such as an app bar applies.\n */\nfunction findScroller(element: HTMLElement): HTMLElement | undefined {\n  let node = element.parentElement;\n  while (node && node !== document.body && node !== document.documentElement) {\n    const { overflowY } = getComputedStyle(node);\n    if ((overflowY === 'auto' || overflowY === 'scroll') && node.scrollHeight > node.clientHeight)\n      return node;\n    node = node.parentElement;\n  }\n  return undefined;\n}\n\nfunction scrollPageBy(top: number): void {\n  const body = document.body;\n  if (body.scrollHeight > body.clientHeight && ['auto', 'scroll'].includes(getComputedStyle(body).overflowY))\n    body.scrollBy({ top });\n  else\n    window.scrollBy({ top });\n}\n\n/**\n * After a page change, brings the table's first row back into view so the new page reads from the\n * top. It scrolls only when the table's top sits above the visible area, as it does after paging\n * from the bottom bar of a long page; a table that already shows its top stays put, so paging never\n * makes the view jump.\n */\nexport function usePageScroll(\n  wrapper: Readonly<Ref<HTMLElement | null | undefined>>,\n  stickyOffset: MaybeRefOrGetter<number | undefined>,\n): UsePageScrollReturn {\n  async function revealTableTop(): Promise<void> {\n    await nextTick();\n    const element = get(wrapper);\n    if (!element)\n      return;\n\n    const scroller = findScroller(element);\n    const viewTop = scroller ? scroller.getBoundingClientRect().top : (toValue(stickyOffset) ?? 0);\n    const distance = element.getBoundingClientRect().top - viewTop;\n    if (distance >= 0)\n      return;\n\n    if (scroller)\n      scroller.scrollBy({ top: distance });\n    else\n      scrollPageBy(distance);\n  }\n\n  return { revealTableTop };\n}\n\n/**\n * Whether the pagination bar may stick: true once the top {@link STICK_AFTER}px of the table are\n * inside its scrolling area. It starts true, so a page without IntersectionObserver keeps the bar\n * sticky.\n */\nexport function useStickyPaginationBar(\n  wrapper: Readonly<Ref<HTMLElement | null | undefined>>,\n  enabled: MaybeRefOrGetter<boolean>,\n): Readonly<Ref<boolean>> {\n  const canStick = shallowRef<boolean>(true);\n  const root = shallowRef<HTMLElement>();\n\n  onMounted(() => {\n    const element = get(wrapper);\n    if (element)\n      set(root, findScroller(element));\n  });\n\n  useIntersectionObserver(\n    () => (toValue(enabled) ? get(wrapper) : undefined),\n    ([entry]) => {\n      if (!entry)\n        return;\n      // also true once the table has scrolled past the top, when the bar is out of view anyway\n      set(canStick, entry.isIntersecting || entry.boundingClientRect.bottom <= (entry.rootBounds?.top ?? 0));\n    },\n    { root, rootMargin: `0px 0px -${STICK_AFTER}px 0px` },\n  );\n\n  return canStick;\n}\n\n/** The height of each pagination bar stuck to the page, by table; the page's floating parts clear the tallest. */\nconst stuckBarHeights = new Map<symbol, number>();\n\nfunction publishStickyBottom(): void {\n  if (typeof document === 'undefined')\n    return;\n  const style = document.documentElement.style;\n  if (stuckBarHeights.size === 0)\n    style.removeProperty('--rui-sticky-bottom');\n  else\n    style.setProperty('--rui-sticky-bottom', `${Math.max(...stuckBarHeights.values())}px`);\n}\n\n/**\n * Publishes how much of the view's bottom a stuck pagination bar covers, as `--rui-sticky-bottom` on\n * the document root, so the page's own floating parts (a dock, a FAB) can rise above the bar instead of\n * covering its page buttons. Only a bar stuck to the page counts: one stuck inside a scrolling area\n * sits under nothing the page floats.\n *\n * @param sentinel - an empty element at the bar's own place after the rows; while it is below the view, the bar is stuck\n * @param bar - the bar, measured for its height\n * @param canStick - whether the bar may stick at all\n */\nexport function useStickyBottomInset(\n  sentinel: Readonly<Ref<HTMLElement | null | undefined>>,\n  bar: MaybeComputedElementRef,\n  canStick: MaybeRefOrGetter<boolean>,\n): void {\n  const id = Symbol('sticky-pagination-bar');\n  const belowView = shallowRef<boolean>(false);\n  const pageLevel = shallowRef<boolean>(false);\n  const { height } = useElementSize(bar, undefined, { box: 'border-box' });\n\n  onMounted(() => {\n    const element = get(sentinel);\n    set(pageLevel, !!element && !findScroller(element));\n  });\n\n  useIntersectionObserver(sentinel, ([entry]) => {\n    if (!entry)\n      return;\n    // no root bounds (a cross-origin frame) reads as not stuck, which leaves the floating parts where they are\n    set(belowView, !entry.isIntersecting && entry.boundingClientRect.top >= (entry.rootBounds?.bottom ?? Number.POSITIVE_INFINITY));\n  });\n\n  watchEffect(() => {\n    if (get(pageLevel) && toValue(canStick) && get(belowView) && get(height) > 0)\n      stuckBarHeights.set(id, get(height));\n    else\n      stuckBarHeights.delete(id);\n    publishStickyBottom();\n  });\n\n  onScopeDispose(() => {\n    stuckBarHeights.delete(id);\n    publishStickyBottom();\n  });\n}\n"],"mappings":"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"}

package/dist/consts/colors.d.ts

@@ -1,3 +1,7 @@
+/**
+ * The Material palette the library kept from 2.x. Only `grey` is left, because consumers still use
+ * it widely; new code takes the zinc `neutral` ramp, and the other Material hues were dropped in 3.0.
+ */
 export declare const baseColors: string[];
 export declare const baseColorsIntensities: string[];
 /**

package/dist/consts/colors.js

@@ -1,40 +1,4 @@
 //#region src/consts/colors.ts
-var baseColors = [
-	"grey",
-	"indigo",
-	"deep-purple",
-	"amber",
-	"orange",
-	"pink",
-	"deep-orange",
-	"green",
-	"red",
-	"light-green",
-	"purple",
-	"lime",
-	"light-blue",
-	"yellow",
-	"cyan",
-	"teal",
-	"blue",
-	"blue-gray"
-];
-var baseColorsIntensities = [
-	"50",
-	"100",
-	"200",
-	"300",
-	"400",
-	"500",
-	"600",
-	"700",
-	"800",
-	"900",
-	"a100",
-	"a200",
-	"a400",
-	"a700"
-];
 /**
 * The available context colors.
 * Keep in sync with build-web-types.mjs
@@ -48,6 +12,6 @@ var contextColors = [
 	"success"
 ];
 //#endregion
-export { baseColors, baseColorsIntensities, contextColors };
+export { contextColors };
 
 //# sourceMappingURL=colors.js.map

package/dist/consts/colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.js","names":[],"sources":["../../src/consts/colors.ts"],"sourcesContent":["export const baseColors = [\n  'grey',\n  'indigo',\n  'deep-purple',\n  'amber',\n  'orange',\n  'pink',\n  'deep-orange',\n  'green',\n  'red',\n  'light-green',\n  'purple',\n  'lime',\n  'light-blue',\n  'yellow',\n  'cyan',\n  'teal',\n  'blue',\n  'blue-gray',\n];\n\nexport const baseColorsIntensities = [\n  '50',\n  '100',\n  '200',\n  '300',\n  '400',\n  '500',\n  '600',\n  '700',\n  '800',\n  '900',\n  'a100',\n  'a200',\n  'a400',\n  'a700',\n];\n\n/**\n * The available context colors.\n * Keep in sync with build-web-types.mjs\n */\nexport const contextColors = [\n  'primary',\n  'secondary',\n  'error',\n  'warning',\n  'info',\n  'success',\n] as const;\n\nexport type ContextColorsType = (typeof contextColors)[number];\n\nexport const contextColorsIntensities = [\n  { name: 'Regular', prefix: '' },\n  { name: 'Darker', prefix: '-darker' },\n  { name: 'Lighter', prefix: '-lighter' },\n];\n"],"mappings":";AAAA,IAAa,aAAa;CACxB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,IAAa,wBAAwB;CACnC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;;;;;AAMA,IAAa,gBAAgB;CAC3B;CACA;CACA;CACA;CACA;CACA;AACF"}
+{"version":3,"file":"colors.js","names":[],"sources":["../../src/consts/colors.ts"],"sourcesContent":["/**\n * The Material palette the library kept from 2.x. Only `grey` is left, because consumers still use\n * it widely; new code takes the zinc `neutral` ramp, and the other Material hues were dropped in 3.0.\n */\nexport const baseColors = [\n  'grey',\n];\n\nexport const baseColorsIntensities = [\n  '50',\n  '100',\n  '200',\n  '300',\n  '400',\n  '500',\n  '600',\n  '700',\n  '800',\n  '900',\n  'a100',\n  'a200',\n  'a400',\n  'a700',\n];\n\n/**\n * The available context colors.\n * Keep in sync with build-web-types.mjs\n */\nexport const contextColors = [\n  'primary',\n  'secondary',\n  'error',\n  'warning',\n  'info',\n  'success',\n] as const;\n\nexport type ContextColorsType = (typeof contextColors)[number];\n\nexport const contextColorsIntensities = [\n  { name: 'Regular', prefix: '' },\n  { name: 'Darker', prefix: '-darker' },\n  { name: 'Lighter', prefix: '-lighter' },\n];\n"],"mappings":";;;;;AA6BA,IAAa,gBAAgB;CAC3B;CACA;CACA;CACA;CACA;CACA;AACF"}

package/dist/consts/tokens.d.ts

@@ -0,0 +1,56 @@
+/**
+ * The theme's role tokens, named here so the generated theme and the class
+ * merger agree on them: `rounded-rui-control` and `shadow-rui-menu` only
+ * dedupe against `rounded-full` or `shadow-lg` when the merger knows the names.
+ */
+export declare const radiusRoles: readonly ["control", "panel", "card", "sm", "lg"];
+export type RadiusRole = (typeof radiusRoles)[number];
+export declare const shadowRoles: readonly ["menu", "drawer", "tooltip", "control"];
+export type ShadowRole = (typeof shadowRoles)[number];
+/**
+ * Surfaces by height: the page, a card, a menu, a drawer or notification. Held
+ * as bare channels in `--rui-*`, like the palette.
+ */
+export declare const surfaceColors: readonly ["background", "surface", "menu", "overlay"];
+/** Lines: dividers between rows, and the edge of an outlined control. Held as full colors. */
+export declare const lineColors: readonly ["divider", "outline"];
+/**
+ * State layers: translucent fills for a hovered or pressed row, item or chip. Held as full
+ * colors. The `state-layer` utility lays one over a fill as a background image, which tints
+ * the fill without touching the text, as a `brightness` filter would.
+ */
+export declare const stateColors: readonly ["hover", "pressed"];
+/**
+ * Surfaces between the others: `surface-muted` for tracks, wells and quiet chips (a step darker
+ * than the card), `surface-sunken` for an inset panel inside a card. Bare channels, per theme.
+ */
+export declare const insetSurfaceColors: readonly ["surface-muted", "surface-sunken"];
+/**
+ * The tints of each context color: `subtle` (5%) for a large area like a banner, `soft` (10%) for
+ * a selected row or a badge, `border` (30%) for its edge.
+ */
+export declare const contextTints: {
+    readonly subtle: 5;
+    readonly soft: 10;
+    readonly border: 30;
+};
+/**
+ * A categorical palette for charts and legends, eight hues that stay apart from each other and
+ * from the status colors, plus a neutral `chart-other` for the rest.
+ */
+export declare const chartColors: readonly ["chart-1", "chart-2", "chart-3", "chart-4", "chart-5", "chart-6", "chart-7", "chart-8", "chart-other"];
+/**
+ * The stacking layers, lowest first, as `--rui-z-*` and `z-rui-*`. Everything the library floats
+ * sits on one of them, so an app's own fixed parts can slot between instead of guessing a number.
+ */
+export declare const zLayers: readonly ["raised", "floating", "app-bar", "drawer", "dialog", "menu", "tooltip", "toast", "blocking"];
+export type ZLayer = (typeof zLayers)[number];
+/** RuiDialog's width presets, as `--rui-dialog-*` and `max-w-rui-dialog-*`. */
+export declare const dialogSizes: readonly ["sm", "md", "lg", "xl", "2xl"];
+export type DialogSize = (typeof dialogSizes)[number];
+/**
+ * The neutral ramp, `rui-neutral-50` to `rui-neutral-950`, for the greys that
+ * are not Material's `rui-grey`. Its hue is the one place the restyle picks
+ * between zinc and slate.
+ */
+export declare const neutralShades: readonly ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"];

package/dist/consts/tokens.js

@@ -0,0 +1,46 @@
+//#region src/consts/tokens.ts
+/**
+* The theme's role tokens, named here so the generated theme and the class
+* merger agree on them: `rounded-rui-control` and `shadow-rui-menu` only
+* dedupe against `rounded-full` or `shadow-lg` when the merger knows the names.
+*/
+var radiusRoles = [
+	"control",
+	"panel",
+	"card",
+	"sm",
+	"lg"
+];
+var shadowRoles = [
+	"menu",
+	"drawer",
+	"tooltip",
+	"control"
+];
+/**
+* The stacking layers, lowest first, as `--rui-z-*` and `z-rui-*`. Everything the library floats
+* sits on one of them, so an app's own fixed parts can slot between instead of guessing a number.
+*/
+var zLayers = [
+	"raised",
+	"floating",
+	"app-bar",
+	"drawer",
+	"dialog",
+	"menu",
+	"tooltip",
+	"toast",
+	"blocking"
+];
+/** RuiDialog's width presets, as `--rui-dialog-*` and `max-w-rui-dialog-*`. */
+var dialogSizes = [
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"2xl"
+];
+//#endregion
+export { dialogSizes, radiusRoles, shadowRoles, zLayers };
+
+//# sourceMappingURL=tokens.js.map

package/dist/consts/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/consts/tokens.ts"],"sourcesContent":["/**\n * The theme's role tokens, named here so the generated theme and the class\n * merger agree on them: `rounded-rui-control` and `shadow-rui-menu` only\n * dedupe against `rounded-full` or `shadow-lg` when the merger knows the names.\n */\nexport const radiusRoles = ['control', 'panel', 'card', 'sm', 'lg'] as const;\n\nexport type RadiusRole = (typeof radiusRoles)[number];\n\nexport const shadowRoles = ['menu', 'drawer', 'tooltip', 'control'] as const;\n\nexport type ShadowRole = (typeof shadowRoles)[number];\n\n/**\n * Surfaces by height: the page, a card, a menu, a drawer or notification. Held\n * as bare channels in `--rui-*`, like the palette.\n */\nexport const surfaceColors = ['background', 'surface', 'menu', 'overlay'] as const;\n\n/** Lines: dividers between rows, and the edge of an outlined control. Held as full colors. */\nexport const lineColors = ['divider', 'outline'] as const;\n\n/**\n * State layers: translucent fills for a hovered or pressed row, item or chip. Held as full\n * colors. The `state-layer` utility lays one over a fill as a background image, which tints\n * the fill without touching the text, as a `brightness` filter would.\n */\nexport const stateColors = ['hover', 'pressed'] as const;\n\n/**\n * Surfaces between the others: `surface-muted` for tracks, wells and quiet chips (a step darker\n * than the card), `surface-sunken` for an inset panel inside a card. Bare channels, per theme.\n */\nexport const insetSurfaceColors = ['surface-muted', 'surface-sunken'] as const;\n\n/**\n * The tints of each context color: `subtle` (5%) for a large area like a banner, `soft` (10%) for\n * a selected row or a badge, `border` (30%) for its edge.\n */\nexport const contextTints = { subtle: 5, soft: 10, border: 30 } as const;\n\n/**\n * A categorical palette for charts and legends, eight hues that stay apart from each other and\n * from the status colors, plus a neutral `chart-other` for the rest.\n */\nexport const chartColors = ['chart-1', 'chart-2', 'chart-3', 'chart-4', 'chart-5', 'chart-6', 'chart-7', 'chart-8', 'chart-other'] as const;\n\n/**\n * The stacking layers, lowest first, as `--rui-z-*` and `z-rui-*`. Everything the library floats\n * sits on one of them, so an app's own fixed parts can slot between instead of guessing a number.\n */\nexport const zLayers = ['raised', 'floating', 'app-bar', 'drawer', 'dialog', 'menu', 'tooltip', 'toast', 'blocking'] as const;\n\nexport type ZLayer = (typeof zLayers)[number];\n\n/** RuiDialog's width presets, as `--rui-dialog-*` and `max-w-rui-dialog-*`. */\nexport const dialogSizes = ['sm', 'md', 'lg', 'xl', '2xl'] as const;\n\nexport type DialogSize = (typeof dialogSizes)[number];\n\n/**\n * The neutral ramp, `rui-neutral-50` to `rui-neutral-950`, for the greys that\n * are not Material's `rui-grey`. Its hue is the one place the restyle picks\n * between zinc and slate.\n */\nexport const neutralShades = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'] as const;\n"],"mappings":";;;;;;AAKA,IAAa,cAAc;CAAC;CAAW;CAAS;CAAQ;CAAM;AAAI;AAIlE,IAAa,cAAc;CAAC;CAAQ;CAAU;CAAW;AAAS;;;;;AA0ClE,IAAa,UAAU;CAAC;CAAU;CAAY;CAAW;CAAU;CAAU;CAAQ;CAAW;CAAS;AAAU;;AAKnH,IAAa,cAAc;CAAC;CAAM;CAAM;CAAM;CAAM;AAAK"}

package/dist/consts/typography.d.ts

@@ -1,38 +1,71 @@
+/**
+ * The type scale, largest first, as the typography docs page lists it: each utility with its size,
+ * line height and weight in pixels, and what it is for.
+ */
 export declare const typographyClasses: readonly [{
-    readonly className: "text-body-1";
-    readonly name: "Body 1";
-}, {
-    readonly className: "text-body-2";
-    readonly name: "Body 2";
-}, {
-    readonly className: "text-subtitle-1";
-    readonly name: "Subtitle 1";
-}, {
-    readonly className: "text-subtitle-2";
-    readonly name: "Subtitle 2";
-}, {
-    readonly className: "text-caption";
-    readonly name: "Caption";
-}, {
-    readonly className: "text-overline";
-    readonly name: "Overline";
-}, {
     readonly className: "text-h1";
     readonly name: "H1";
+    readonly spec: "60 / 72 semibold";
+    readonly use: "Marketing heroes";
 }, {
     readonly className: "text-h2";
     readonly name: "H2";
+    readonly spec: "48 / 56 semibold";
+    readonly use: "Landing page sections";
 }, {
     readonly className: "text-h3";
     readonly name: "H3";
+    readonly spec: "36 / 44 semibold";
+    readonly use: "Large numbers, empty states";
 }, {
     readonly className: "text-h4";
     readonly name: "H4";
+    readonly spec: "30 / 38 semibold";
+    readonly use: "Page titles on wide screens";
 }, {
     readonly className: "text-h5";
     readonly name: "H5";
+    readonly spec: "24 / 32 semibold";
+    readonly use: "Page titles";
 }, {
     readonly className: "text-h6";
     readonly name: "H6";
+    readonly spec: "20 / 32 semibold";
+    readonly use: "Card and dialog titles";
+}, {
+    readonly className: "text-subtitle-1";
+    readonly name: "Subtitle 1";
+    readonly spec: "16 / 28 medium";
+    readonly use: "Section headings";
+}, {
+    readonly className: "text-subtitle-2";
+    readonly name: "Subtitle 2";
+    readonly spec: "14 / 20 medium";
+    readonly use: "Labels, table headers";
+}, {
+    readonly className: "text-body-1";
+    readonly name: "Body 1";
+    readonly spec: "16 / 24 regular";
+    readonly use: "Running text";
+}, {
+    readonly className: "text-body-2";
+    readonly name: "Body 2";
+    readonly spec: "14 / 20 regular";
+    readonly use: "Controls, tables, dense text";
+}, {
+    readonly className: "text-caption";
+    readonly name: "Caption";
+    readonly spec: "12 / 20 regular";
+    readonly use: "Hints, timestamps, help text";
+}, {
+    readonly className: "text-caption-2";
+    readonly name: "Caption 2";
+    readonly spec: "10 / 16 regular";
+    readonly use: "Dense tags, axis labels";
+}, {
+    readonly className: "text-overline";
+    readonly name: "Overline";
+    readonly spec: "12 / 32 medium, tracked";
+    readonly use: "Eyebrows above a heading";
 }];
 export type TypographyClass = (typeof typographyClasses)[number];

package/dist/index.d.ts

@@ -1,10 +1,15 @@
 import type { App } from 'vue';
 import type { InitThemeOptions } from './types/theme.js';
+import { type FieldOptions } from './composables/defaults/field.js';
+import { type LogoOptions } from './composables/defaults/logo.js';
 import { type TableOptions } from './composables/defaults/table.js';
 import { StepperState } from './types/stepper.js';
 import './style.css';
 export * from './components/index.js';
+export { activatorHandlers, type ActivatorHandlers } from './components/overlays/menu/activator-handlers.js';
 export * from './composables/index.js';
+export { type FieldOptions, type LabelPlacement, provideFieldDefaults } from './composables/defaults/field.js';
+export type { LogoOptions, LogoResolver } from './composables/defaults/logo.js';
 export { contextColors, type ContextColorsType } from './consts/colors.js';
 export { translationKeys } from './i18n/keys.js';
 export * from './icons/index.js';
@@ -18,12 +23,20 @@ export interface RuiOptions {
     theme?: InitThemeOptions;
     defaults?: {
         table?: Partial<TableOptions>;
+        /** `labelPlacement` for every text field, text area, select and picker; `top` when unset. */
+        field?: Partial<FieldOptions>;
     };
+    /**
+     * Where `RuiLogo` gets the image for its `logo` prop. Without it every
+     * `RuiLogo` shows the bundled logo, and the library makes no network request.
+     */
+    logo?: LogoOptions;
 }
 export declare function createRui(options?: RuiOptions): {
     defaults: Readonly<{
         icons: import("./composables/icons.js").UseIconsReturn;
         table: TableOptions;
+        field: FieldOptions;
     }>;
     install: (app: App) => void;
 };