@rotki/ui-library 3.0.0-beta.5 → 3.1.0

package/dist/components/tables/data-table-styles.d.ts

@@ -60,6 +60,7 @@ export declare const dataTableStyles: import("tailwind-variants").TVReturnType<{
             tbody: string;
             tr: string;
             td: string;
+            tfoot: string;
         };
     };
 }, {
@@ -69,6 +70,7 @@ export declare const dataTableStyles: import("tailwind-variants").TVReturnType<{
     tbody: string;
     tr: string;
     td: string;
+    tfoot: string;
     checkbox: string;
     tbodyLoader: string;
     pagination: string;
@@ -128,6 +130,7 @@ export declare const dataTableStyles: import("tailwind-variants").TVReturnType<{
             tbody: string;
             tr: string;
             td: string;
+            tfoot: string;
         };
     };
 }, {
@@ -137,6 +140,7 @@ export declare const dataTableStyles: import("tailwind-variants").TVReturnType<{
     tbody: string;
     tr: string;
     td: string;
+    tfoot: string;
     checkbox: string;
     tbodyLoader: string;
     pagination: string;
@@ -196,6 +200,7 @@ export declare const dataTableStyles: import("tailwind-variants").TVReturnType<{
             tbody: string;
             tr: string;
             td: string;
+            tfoot: string;
         };
     };
 }, {
@@ -205,6 +210,7 @@ export declare const dataTableStyles: import("tailwind-variants").TVReturnType<{
     tbody: string;
     tr: string;
     td: string;
+    tfoot: string;
     checkbox: string;
     tbodyLoader: string;
     pagination: string;

package/dist/components/tables/data-table-styles.js

@@ -19,8 +19,9 @@ var dataTableStyles = tv({
 		scroller: "overflow-x-auto overflow-y-hidden [clip-path:inset(0_0_0_0)] outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2",
 		table: "min-w-full table-fixed between:border-t between:border-b-0 between:border-rui-divider whitespace-nowrap mx-auto my-0 max-w-fit relative border-rui-divider",
 		tbody: "between:border-t between:border-b-0 between:border-rui-divider",
-		tr: "hover:bg-rui-hover",
+		tr: "hover:bg-rui-neutral-950/[0.03] dark:hover:bg-white/[0.04]",
 		td: "[:where(&)]:px-4 text-rui-text text-body-2 tabular-nums [text-wrap:initial]",
+		tfoot: "[:where(&>tr>*)]:px-4 text-rui-text text-body-2 tabular-nums",
 		checkbox: "px-2 w-[3.625rem] max-w-[3.625rem] [&_label]:ml-0",
 		tbodyLoader: "text-center",
 		pagination: `bg-rui-surface-muted ${NESTED_BAR}`
@@ -37,13 +38,13 @@ var dataTableStyles = tv({
 			true: {},
 			false: {}
 		},
-		striped: { true: { tbody: "[:where(&>tr[data-stripe])]:bg-rui-neutral-950/[0.03] dark:[:where(&>tr[data-stripe])]:bg-white/[0.04]" } },
+		striped: { true: { tbody: "[:where(&>tr[data-stripe])]:bg-rui-neutral-950/[0.015] dark:[:where(&>tr[data-stripe])]:bg-white/[0.02]" } },
 		rowVariant: {
 			selected: { tr: "bg-rui-primary-soft" },
-			empty: { tr: "hover:bg-transparent" },
+			empty: { tr: "hover:bg-transparent dark:hover:bg-transparent" },
 			expandable: { tr: `bg-rui-neutral-950/[0.07] hover:bg-rui-neutral-950/[0.07] dark:bg-white/[0.09] dark:hover:bg-white/[0.09] ${NESTED_BAND} [[data-id=row-expanded]_&]:hover:bg-rui-neutral-950/[0.11] dark:[[data-id=row-expanded]_&]:hover:bg-white/[0.14] ${OPEN_ROW_RAIL} !border-t-0` },
 			expandedParent: { tr: `bg-rui-neutral-950/[0.07] dark:bg-white/[0.09] ${NESTED_BAND} ${OPEN_ROW_RAIL}` },
-			group: { tr: "bg-rui-neutral-100 dark:bg-white/[0.05]" }
+			group: { tr: "bg-rui-neutral-100 hover:bg-rui-neutral-100 dark:bg-white/[0.05] dark:hover:bg-white/[0.05]" }
 		},
 		mobile: { true: {
 			wrapper: "between:border-t-0 border-0 rounded-none overflow-visible",
@@ -51,7 +52,8 @@ var dataTableStyles = tv({
 			table: "block min-w-0 max-w-none w-full whitespace-normal between:border-t-0 border-0",
 			tbody: "block between:border-t-0",
 			tr: "block",
-			td: "block px-4 py-2"
+			td: "block px-4 py-2",
+			tfoot: "block [&>tr]:block [:where(&>tr>*)]:block [:where(&>tr>*)]:py-2"
 		} }
 	},
 	/**
@@ -63,11 +65,17 @@ var dataTableStyles = tv({
 	compoundVariants: [{
 		dense: false,
 		mobile: false,
-		class: { td: "[:where(&)]:py-1 [:where(&)]:h-11" }
+		class: {
+			td: "[:where(&)]:py-1 [:where(&)]:h-11",
+			tfoot: "[:where(&>tr>*)]:py-1 [:where(&>tr>*)]:h-11"
+		}
 	}, {
 		dense: true,
 		mobile: false,
-		class: { td: "[:where(&)]:py-1 [:where(&)]:h-9" }
+		class: {
+			td: "[:where(&)]:py-1 [:where(&)]:h-9",
+			tfoot: "[:where(&>tr>*)]:py-1 [:where(&>tr>*)]:h-9"
+		}
 	}],
 	defaultVariants: {
 		dense: false,

package/dist/components/tables/data-table-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-styles.js","names":[],"sources":["../../../src/components/tables/data-table-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/** A 2px primary rail down the left edge of an open row and its panel; out of flow, so the cell keeps its padding. */\nconst OPEN_ROW_RAIL = '[&>td:first-child]:relative [&>td:first-child]:before:absolute [&>td:first-child]:before:inset-y-0 [&>td:first-child]:before:left-0 [&>td:first-child]:before:w-0.5 [&>td:first-child]:before:bg-rui-primary';\n\n/**\n * The band of an open row inside another table's panel: a step darker than the outer band, so the two\n * levels never share a grey while the rows between them keep the plain surface.\n */\nconst NESTED_BAND = '[[data-id=row-expanded]_&]:bg-rui-neutral-950/[0.11] dark:[[data-id=row-expanded]_&]:bg-white/[0.14]';\n\n/**\n * Header and pagination of a nested table, stepped by depth to stand off the band around them (about\n * 1.12:1 or more) as well as their own rows: past the lighter band one panel deep, short of the darker\n * band two deep. Nested bars never stick, so the tint can be translucent over the table's own surface.\n */\nexport const NESTED_BAR = '[[data-id=row-expanded]_&]:bg-rui-neutral-950/[0.13] dark:[[data-id=row-expanded]_&]:bg-white/[0.16] [[data-id=row-expanded]_[data-id=row-expanded]_&]:bg-rui-neutral-950/[0.06] dark:[[data-id=row-expanded]_[data-id=row-expanded]_&]:bg-white/[0.07]';\n\nexport const dataTableStyles = tv({\n  slots: {\n    // `clip`, not `hidden`, which may shrink the item below its rows; its own surface reads the same anywhere\n    wrapper: 'relative between:border-t between:border-b-0 between:border-rui-divider overflow-clip bg-rui-surface',\n    // focusable only while it scrolls with nothing to tab to (useKeyboardScroll), ring drawn inside\n    scroller: 'overflow-x-auto overflow-y-hidden [clip-path:inset(0_0_0_0)] outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2',\n    table: 'min-w-full table-fixed between:border-t between:border-b-0 between:border-rui-divider whitespace-nowrap mx-auto my-0 max-w-fit relative border-rui-divider',\n    tbody: 'between:border-t between:border-b-0 between:border-rui-divider',\n    tr: 'hover:bg-rui-hover',\n    // numbers line up in columns; no slashed zero, which in Inter reads as a second, monospace font beside zero-free values\n    td: '[:where(&)]:px-4 text-rui-text text-body-2 tabular-nums [text-wrap:initial]',\n    checkbox: 'px-2 w-[3.625rem] max-w-[3.625rem] [&_label]:ml-0',\n    tbodyLoader: 'text-center',\n    // tinted like the column header, the pair framing the body; opaque, so rows scroll behind a stuck bar\n    pagination: `bg-rui-surface-muted ${NESTED_BAR}`,\n  },\n  variants: {\n    sticky: {\n      true: { pagination: 'sticky bottom-0 z-rui-raised' },\n    },\n    outlined: {\n      true: { wrapper: 'border border-rui-divider' },\n    },\n    rounded: {\n      sm: { wrapper: 'rounded-rui-sm' },\n      md: { wrapper: 'rounded-rui-card' },\n      lg: { wrapper: 'rounded-rui-lg' },\n    },\n    dense: {\n      true: {},\n      false: {},\n    },\n    // under every row state through `:where()`; set per item (`data-stripe`), so a follow-up row or open panel shifts none\n    striped: {\n      true: { tbody: '[:where(&>tr[data-stripe])]:bg-rui-neutral-950/[0.03] dark:[:where(&>tr[data-stripe])]:bg-white/[0.04]' },\n    },\n    rowVariant: {\n      selected: { tr: 'bg-rui-primary-soft' },\n      empty: { tr: 'hover:bg-transparent' },\n      // a grey band darker than the header so the two never match, a step darker again inside another panel\n      expandable: { tr: `bg-rui-neutral-950/[0.07] hover:bg-rui-neutral-950/[0.07] dark:bg-white/[0.09] dark:hover:bg-white/[0.09] ${NESTED_BAND} [[data-id=row-expanded]_&]:hover:bg-rui-neutral-950/[0.11] dark:[[data-id=row-expanded]_&]:hover:bg-white/[0.14] ${OPEN_ROW_RAIL} !border-t-0` },\n      expandedParent: { tr: `bg-rui-neutral-950/[0.07] dark:bg-white/[0.09] ${NESTED_BAND} ${OPEN_ROW_RAIL}` },\n      group: { tr: 'bg-rui-neutral-100 dark:bg-white/[0.05]' },\n    },\n    mobile: {\n      true: {\n        wrapper: 'between:border-t-0 border-0 rounded-none overflow-visible',\n        scroller: 'overflow-visible [clip-path:none]',\n        table: 'block min-w-0 max-w-none w-full whitespace-normal between:border-t-0 border-0',\n        tbody: 'block between:border-t-0',\n        tr: 'block',\n        td: 'block px-4 py-2',\n      },\n    },\n  },\n  /**\n   * A fixed row height keeps a row of plain text as tall as one holding an\n   * icon button. Padding and floor sit in `:where()` so a consumer's `cellClass`\n   * (`py-0` is common) still wins at any stylesheet order, and each density\n   * sets its own because the class merger cannot dedupe these.\n   */\n  compoundVariants: [\n    // a 4px inset under the height floor fits a 36px button in a 44px row (a 28px one in a dense 36px row)\n    { dense: false, mobile: false, class: { td: '[:where(&)]:py-1 [:where(&)]:h-11' } },\n    { dense: true, mobile: false, class: { td: '[:where(&)]:py-1 [:where(&)]:h-9' } },\n  ],\n  defaultVariants: {\n    dense: false,\n    mobile: false,\n  },\n});\n"],"mappings":";;;AAGA,IAAM,gBAAgB;;;;;AAMtB,IAAM,cAAc;;;;;;AAOpB,IAAa,aAAa;AAE1B,IAAa,kBAAkB,GAAG;CAChC,OAAO;EAEL,SAAS;EAET,UAAU;EACV,OAAO;EACP,OAAO;EACP,IAAI;EAEJ,IAAI;EACJ,UAAU;EACV,aAAa;EAEb,YAAY,wBAAwB;CACtC;CACA,UAAU;EACR,QAAQ,EACN,MAAM,EAAE,YAAY,+BAA+B,EACrD;EACA,UAAU,EACR,MAAM,EAAE,SAAS,4BAA4B,EAC/C;EACA,SAAS;GACP,IAAI,EAAE,SAAS,iBAAiB;GAChC,IAAI,EAAE,SAAS,mBAAmB;GAClC,IAAI,EAAE,SAAS,iBAAiB;EAClC;EACA,OAAO;GACL,MAAM,CAAC;GACP,OAAO,CAAC;EACV;EAEA,SAAS,EACP,MAAM,EAAE,OAAO,yGAAyG,EAC1H;EACA,YAAY;GACV,UAAU,EAAE,IAAI,sBAAsB;GACtC,OAAO,EAAE,IAAI,uBAAuB;GAEpC,YAAY,EAAE,IAAI,6GAA6G,YAAY,oHAAoH,cAAc,cAAc;GAC3R,gBAAgB,EAAE,IAAI,kDAAkD,YAAY,GAAG,gBAAgB;GACvG,OAAO,EAAE,IAAI,0CAA0C;EACzD;EACA,QAAQ,EACN,MAAM;GACJ,SAAS;GACT,UAAU;GACV,OAAO;GACP,OAAO;GACP,IAAI;GACJ,IAAI;EACN,EACF;CACF;;;;;;;CAOA,kBAAkB,CAEhB;EAAE,OAAO;EAAO,QAAQ;EAAO,OAAO,EAAE,IAAI,oCAAoC;CAAE,GAClF;EAAE,OAAO;EAAM,QAAQ;EAAO,OAAO,EAAE,IAAI,mCAAmC;CAAE,CAClF;CACA,iBAAiB;EACf,OAAO;EACP,QAAQ;CACV;AACF,CAAC"}
+{"version":3,"file":"data-table-styles.js","names":[],"sources":["../../../src/components/tables/data-table-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/** A 2px primary rail down the left edge of an open row and its panel; out of flow, so the cell keeps its padding. */\nconst OPEN_ROW_RAIL = '[&>td:first-child]:relative [&>td:first-child]:before:absolute [&>td:first-child]:before:inset-y-0 [&>td:first-child]:before:left-0 [&>td:first-child]:before:w-0.5 [&>td:first-child]:before:bg-rui-primary';\n\n/**\n * The band of an open row inside another table's panel: a step darker than the outer band, so the two\n * levels never share a grey while the rows between them keep the plain surface.\n */\nconst NESTED_BAND = '[[data-id=row-expanded]_&]:bg-rui-neutral-950/[0.11] dark:[[data-id=row-expanded]_&]:bg-white/[0.14]';\n\n/**\n * Header and pagination of a nested table, stepped by depth to stand off the band around them (about\n * 1.12:1 or more) as well as their own rows: past the lighter band one panel deep, short of the darker\n * band two deep. Nested bars never stick, so the tint can be translucent over the table's own surface.\n */\nexport const NESTED_BAR = '[[data-id=row-expanded]_&]:bg-rui-neutral-950/[0.13] dark:[[data-id=row-expanded]_&]:bg-white/[0.16] [[data-id=row-expanded]_[data-id=row-expanded]_&]:bg-rui-neutral-950/[0.06] dark:[[data-id=row-expanded]_[data-id=row-expanded]_&]:bg-white/[0.07]';\n\nexport const dataTableStyles = tv({\n  slots: {\n    // `clip`, not `hidden`, which may shrink the item below its rows; its own surface reads the same anywhere\n    wrapper: 'relative between:border-t between:border-b-0 between:border-rui-divider overflow-clip bg-rui-surface',\n    // focusable only while it scrolls with nothing to tab to (useKeyboardScroll), ring drawn inside\n    scroller: 'overflow-x-auto overflow-y-hidden [clip-path:inset(0_0_0_0)] outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2',\n    table: 'min-w-full table-fixed between:border-t between:border-b-0 between:border-rui-divider whitespace-nowrap mx-auto my-0 max-w-fit relative border-rui-divider',\n    tbody: 'between:border-t between:border-b-0 between:border-rui-divider',\n    // its own tint, lighter than `rui-hover`, which lands on the header and pagination grey\n    tr: 'hover:bg-rui-neutral-950/[0.03] dark:hover:bg-white/[0.04]',\n    // numbers line up in columns; no slashed zero, which in Inter reads as a second, monospace font beside zero-free values\n    td: '[:where(&)]:px-4 text-rui-text text-body-2 tabular-nums [text-wrap:initial]',\n    // the `tfoot` slot's cells (a total row) take the body cells' padding, height and text, so a footer row lines up without its own classes\n    tfoot: '[:where(&>tr>*)]:px-4 text-rui-text text-body-2 tabular-nums',\n    checkbox: 'px-2 w-[3.625rem] max-w-[3.625rem] [&_label]:ml-0',\n    tbodyLoader: 'text-center',\n    // tinted like the column header, the pair framing the body; opaque, so rows scroll behind a stuck bar\n    pagination: `bg-rui-surface-muted ${NESTED_BAR}`,\n  },\n  variants: {\n    sticky: {\n      true: { pagination: 'sticky bottom-0 z-rui-raised' },\n    },\n    outlined: {\n      true: { wrapper: 'border border-rui-divider' },\n    },\n    rounded: {\n      sm: { wrapper: 'rounded-rui-sm' },\n      md: { wrapper: 'rounded-rui-card' },\n      lg: { wrapper: 'rounded-rui-lg' },\n    },\n    dense: {\n      true: {},\n      false: {},\n    },\n    // under every row state through `:where()`, per item (`data-stripe`); half the row hover, so a striped row still darkens on hover\n    striped: {\n      true: { tbody: '[:where(&>tr[data-stripe])]:bg-rui-neutral-950/[0.015] dark:[:where(&>tr[data-stripe])]:bg-white/[0.02]' },\n    },\n    rowVariant: {\n      selected: { tr: 'bg-rui-primary-soft' },\n      empty: { tr: 'hover:bg-transparent dark:hover:bg-transparent' },\n      // a grey band darker than the header so the two never match, a step darker again inside another panel\n      expandable: { tr: `bg-rui-neutral-950/[0.07] hover:bg-rui-neutral-950/[0.07] dark:bg-white/[0.09] dark:hover:bg-white/[0.09] ${NESTED_BAND} [[data-id=row-expanded]_&]:hover:bg-rui-neutral-950/[0.11] dark:[[data-id=row-expanded]_&]:hover:bg-white/[0.14] ${OPEN_ROW_RAIL} !border-t-0` },\n      expandedParent: { tr: `bg-rui-neutral-950/[0.07] dark:bg-white/[0.09] ${NESTED_BAND} ${OPEN_ROW_RAIL}` },\n      group: { tr: 'bg-rui-neutral-100 hover:bg-rui-neutral-100 dark:bg-white/[0.05] dark:hover:bg-white/[0.05]' },\n    },\n    mobile: {\n      true: {\n        wrapper: 'between:border-t-0 border-0 rounded-none overflow-visible',\n        scroller: 'overflow-visible [clip-path:none]',\n        table: 'block min-w-0 max-w-none w-full whitespace-normal between:border-t-0 border-0',\n        tbody: 'block between:border-t-0',\n        tr: 'block',\n        td: 'block px-4 py-2',\n        tfoot: 'block [&>tr]:block [:where(&>tr>*)]:block [:where(&>tr>*)]:py-2',\n      },\n    },\n  },\n  /**\n   * A fixed row height keeps a row of plain text as tall as one holding an\n   * icon button. Padding and floor sit in `:where()` so a consumer's `cellClass`\n   * (`py-0` is common) still wins at any stylesheet order, and each density\n   * sets its own because the class merger cannot dedupe these.\n   */\n  compoundVariants: [\n    // a 4px inset under the height floor fits a 36px button in a 44px row (a 28px one in a dense 36px row)\n    { dense: false, mobile: false, class: { td: '[:where(&)]:py-1 [:where(&)]:h-11', tfoot: '[:where(&>tr>*)]:py-1 [:where(&>tr>*)]:h-11' } },\n    { dense: true, mobile: false, class: { td: '[:where(&)]:py-1 [:where(&)]:h-9', tfoot: '[:where(&>tr>*)]:py-1 [:where(&>tr>*)]:h-9' } },\n  ],\n  defaultVariants: {\n    dense: false,\n    mobile: false,\n  },\n});\n"],"mappings":";;;AAGA,IAAM,gBAAgB;;;;;AAMtB,IAAM,cAAc;;;;;;AAOpB,IAAa,aAAa;AAE1B,IAAa,kBAAkB,GAAG;CAChC,OAAO;EAEL,SAAS;EAET,UAAU;EACV,OAAO;EACP,OAAO;EAEP,IAAI;EAEJ,IAAI;EAEJ,OAAO;EACP,UAAU;EACV,aAAa;EAEb,YAAY,wBAAwB;CACtC;CACA,UAAU;EACR,QAAQ,EACN,MAAM,EAAE,YAAY,+BAA+B,EACrD;EACA,UAAU,EACR,MAAM,EAAE,SAAS,4BAA4B,EAC/C;EACA,SAAS;GACP,IAAI,EAAE,SAAS,iBAAiB;GAChC,IAAI,EAAE,SAAS,mBAAmB;GAClC,IAAI,EAAE,SAAS,iBAAiB;EAClC;EACA,OAAO;GACL,MAAM,CAAC;GACP,OAAO,CAAC;EACV;EAEA,SAAS,EACP,MAAM,EAAE,OAAO,0GAA0G,EAC3H;EACA,YAAY;GACV,UAAU,EAAE,IAAI,sBAAsB;GACtC,OAAO,EAAE,IAAI,iDAAiD;GAE9D,YAAY,EAAE,IAAI,6GAA6G,YAAY,oHAAoH,cAAc,cAAc;GAC3R,gBAAgB,EAAE,IAAI,kDAAkD,YAAY,GAAG,gBAAgB;GACvG,OAAO,EAAE,IAAI,8FAA8F;EAC7G;EACA,QAAQ,EACN,MAAM;GACJ,SAAS;GACT,UAAU;GACV,OAAO;GACP,OAAO;GACP,IAAI;GACJ,IAAI;GACJ,OAAO;EACT,EACF;CACF;;;;;;;CAOA,kBAAkB,CAEhB;EAAE,OAAO;EAAO,QAAQ;EAAO,OAAO;GAAE,IAAI;GAAqC,OAAO;EAA8C;CAAE,GACxI;EAAE,OAAO;EAAM,QAAQ;EAAO,OAAO;GAAE,IAAI;GAAoC,OAAO;EAA6C;CAAE,CACvI;CACA,iBAAiB;EACf,OAAO;EACP,QAAQ;CACV;AACF,CAAC"}

package/dist/components/tabs/tab-items/RuiTabItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTabItems.js","names":["_sfc_main"],"sources":["../../../../src/components/tabs/tab-items/RuiTabItems.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends string | number\">\nimport { Fragment, isVNode } from 'vue';\n\ndefineOptions({\n  name: 'RuiTabItems',\n  inheritAttrs: false,\n});\n\n/**\n * The tab whose panel is showing.\n *\n * The default matches RuiTabs. Without one, binding both components to the\n * same ref that starts as `undefined` leaves this component with\n * `modelValue === undefined`, so the `active = modelValue === value` check\n * fails for every tab: the panel renders but stays at height 0, which reads as\n * an element with no content.\n */\nconst modelValue = defineModel<T>({ default: () => 0 as T });\n\nconst slots = useSlots();\n\nconst currIndex = ref<number>(-1);\nconst activeIndex = ref<number>(-1);\nconst inner = useTemplateRef<HTMLDivElement>('inner');\n\nconst { height: innerHeight } = useElementSize(inner);\n\nconst children = computed<VNode[]>(() => {\n  const slotContent = slots.default?.() ?? [];\n\n  const tabs = getChildrenTabs(slotContent);\n\n  let anyActive = false;\n  const children = tabs.map((tab, index) => {\n    const value = tab.props?.value ?? index;\n    const active = get(modelValue) === value;\n    if (active) {\n      anyActive = true;\n      if (index !== get(currIndex))\n        set(currIndex, index);\n    }\n\n    return {\n      ...tab,\n      props: {\n        value,\n        ...tab.props,\n      },\n    };\n  });\n\n  if (!anyActive)\n    set(currIndex, -1);\n\n  return children;\n});\n\n/**\n * Unwraps the fragments a `v-for` in the slot produces, so only tab items come\n * back.\n *\n * @param children - the slot's vnodes\n * @returns the tab items among them\n */\nfunction getChildrenTabs(children: VNode[]): VNode[] {\n  return children\n    .flatMap((item) => {\n      if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)\n        return getChildrenTabs(item.children.filter(isVNode));\n\n      return [item];\n    })\n    .flat();\n}\n\nwatch(currIndex, (index) => {\n  nextTick(() => {\n    set(activeIndex, index);\n  });\n});\n</script>\n\n<template>\n  <div\n    class=\"grow transition-[height] duration-200 ease-out overflow-hidden motion-reduce:transition-none\"\n    :style=\"{ height: `${innerHeight}px` }\"\n    v-bind=\"$attrs\"\n  >\n    <div ref=\"inner\">\n      <Component\n        :is=\"child\"\n        v-for=\"(child, i) in children\"\n        :key=\"i\"\n        :active=\"i === activeIndex\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiTabItems.js","names":["_sfc_main"],"sources":["../../../../src/components/tabs/tab-items/RuiTabItems.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends string | number\">\nimport { Fragment, isVNode } from 'vue';\nimport { useClipWhileResizing } from '@/composables/clip-while-resizing';\n\ndefineOptions({\n  name: 'RuiTabItems',\n  inheritAttrs: false,\n});\n\n/**\n * The tab whose panel is showing.\n *\n * The default matches RuiTabs. Without one, binding both components to the\n * same ref that starts as `undefined` leaves this component with\n * `modelValue === undefined`, so the `active = modelValue === value` check\n * fails for every tab: the panel renders but stays at height 0, which reads as\n * an element with no content.\n */\nconst modelValue = defineModel<T>({ default: () => 0 as T });\n\nconst slots = useSlots();\n\nconst currIndex = ref<number>(-1);\nconst activeIndex = ref<number>(-1);\nconst inner = useTemplateRef<HTMLDivElement>('inner');\nconst root = useTemplateRef<HTMLDivElement>('root');\n\nconst { height: innerHeight } = useElementSize(inner);\n\n// clip only while the height follows a panel change, so sticky content inside a panel works\nconst clipped = useClipWhileResizing(root, () => get(innerHeight));\n\nconst children = computed<VNode[]>(() => {\n  const slotContent = slots.default?.() ?? [];\n\n  const tabs = getChildrenTabs(slotContent);\n\n  let anyActive = false;\n  const children = tabs.map((tab, index) => {\n    const value = tab.props?.value ?? index;\n    const active = get(modelValue) === value;\n    if (active) {\n      anyActive = true;\n      if (index !== get(currIndex))\n        set(currIndex, index);\n    }\n\n    return {\n      ...tab,\n      props: {\n        value,\n        ...tab.props,\n      },\n    };\n  });\n\n  if (!anyActive)\n    set(currIndex, -1);\n\n  return children;\n});\n\n/**\n * Unwraps the fragments a `v-for` in the slot produces, so only tab items come\n * back.\n *\n * @param children - the slot's vnodes\n * @returns the tab items among them\n */\nfunction getChildrenTabs(children: VNode[]): VNode[] {\n  return children\n    .flatMap((item) => {\n      if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)\n        return getChildrenTabs(item.children.filter(isVNode));\n\n      return [item];\n    })\n    .flat();\n}\n\nwatch(currIndex, (index) => {\n  nextTick(() => {\n    set(activeIndex, index);\n  });\n});\n</script>\n\n<template>\n  <div\n    ref=\"root\"\n    class=\"grow transition-[height] duration-200 ease-out motion-reduce:transition-none\"\n    :class=\"{ 'overflow-hidden': clipped }\"\n    :data-clipped=\"clipped || undefined\"\n    :style=\"{ height: `${innerHeight}px` }\"\n    v-bind=\"$attrs\"\n  >\n    <div ref=\"inner\">\n      <Component\n        :is=\"child\"\n        v-for=\"(child, i) in children\"\n        :key=\"i\"\n        :active=\"i === activeIndex\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/tabs/tab-items/RuiTabItems.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,9 @@
 import { get, set } from "../../../vendor/@vueuse/shared/dist/index.js";
 import { useElementSize } from "../../../vendor/@vueuse/core/dist/index.js";
+import { useClipWhileResizing } from "../../../composables/clip-while-resizing.js";
 import { Fragment, computed, createBlock, createElementBlock, createElementVNode, defineComponent, isVNode, mergeProps, nextTick, openBlock, ref, renderList, resolveDynamicComponent, unref, useModel, useSlots, useTemplateRef, watch } from "vue";
 //#region src/components/tabs/tab-items/RuiTabItems.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-clipped"];
 var RuiTabItems_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiTabItems",
 	inheritAttrs: false,
@@ -26,7 +28,9 @@ var RuiTabItems_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		const currIndex = ref(-1);
 		const activeIndex = ref(-1);
 		const inner = useTemplateRef("inner");
+		const root = useTemplateRef("root");
 		const { height: innerHeight } = useElementSize(inner);
+		const clipped = useClipWhileResizing(root, () => get(innerHeight));
 		const children = computed(() => {
 			const tabs = getChildrenTabs(slots.default?.() ?? []);
 			let anyActive = false;
@@ -67,7 +71,10 @@ var RuiTabItems_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({
-				class: "grow transition-[height] duration-200 ease-out overflow-hidden motion-reduce:transition-none",
+				ref_key: "root",
+				ref: root,
+				class: ["grow transition-[height] duration-200 ease-out motion-reduce:transition-none", { "overflow-hidden": unref(clipped) }],
+				"data-clipped": unref(clipped) || void 0,
 				style: { height: `${unref(innerHeight)}px` }
 			}, _ctx.$attrs), [createElementVNode("div", {
 				ref_key: "inner",
@@ -77,7 +84,7 @@ var RuiTabItems_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 					key: i,
 					active: i === unref(activeIndex)
 				}, null, 8, ["active"]);
-			}), 128))], 512)], 16);
+			}), 128))], 512)], 16, _hoisted_1);
 		};
 	}
 });

package/dist/components/tabs/tab-items/RuiTabItems.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTabItems.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createElementBlock","_mergeProps","_unref","_createElementVNode","_Fragment","_renderList","_createBlock","_resolveDynamicComponent"],"sources":["../../../../src/components/tabs/tab-items/RuiTabItems.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends string | number\">\nimport { Fragment, isVNode } from 'vue';\n\ndefineOptions({\n  name: 'RuiTabItems',\n  inheritAttrs: false,\n});\n\n/**\n * The tab whose panel is showing.\n *\n * The default matches RuiTabs. Without one, binding both components to the\n * same ref that starts as `undefined` leaves this component with\n * `modelValue === undefined`, so the `active = modelValue === value` check\n * fails for every tab: the panel renders but stays at height 0, which reads as\n * an element with no content.\n */\nconst modelValue = defineModel<T>({ default: () => 0 as T });\n\nconst slots = useSlots();\n\nconst currIndex = ref<number>(-1);\nconst activeIndex = ref<number>(-1);\nconst inner = useTemplateRef<HTMLDivElement>('inner');\n\nconst { height: innerHeight } = useElementSize(inner);\n\nconst children = computed<VNode[]>(() => {\n  const slotContent = slots.default?.() ?? [];\n\n  const tabs = getChildrenTabs(slotContent);\n\n  let anyActive = false;\n  const children = tabs.map((tab, index) => {\n    const value = tab.props?.value ?? index;\n    const active = get(modelValue) === value;\n    if (active) {\n      anyActive = true;\n      if (index !== get(currIndex))\n        set(currIndex, index);\n    }\n\n    return {\n      ...tab,\n      props: {\n        value,\n        ...tab.props,\n      },\n    };\n  });\n\n  if (!anyActive)\n    set(currIndex, -1);\n\n  return children;\n});\n\n/**\n * Unwraps the fragments a `v-for` in the slot produces, so only tab items come\n * back.\n *\n * @param children - the slot's vnodes\n * @returns the tab items among them\n */\nfunction getChildrenTabs(children: VNode[]): VNode[] {\n  return children\n    .flatMap((item) => {\n      if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)\n        return getChildrenTabs(item.children.filter(isVNode));\n\n      return [item];\n    })\n    .flat();\n}\n\nwatch(currIndex, (index) => {\n  nextTick(() => {\n    set(activeIndex, index);\n  });\n});\n</script>\n\n<template>\n  <div\n    class=\"grow transition-[height] duration-200 ease-out overflow-hidden motion-reduce:transition-none\"\n    :style=\"{ height: `${innerHeight}px` }\"\n    v-bind=\"$attrs\"\n  >\n    <div ref=\"inner\">\n      <Component\n        :is=\"child\"\n        v-for=\"(child, i) in children\"\n        :key=\"i\"\n        :active=\"i === activeIndex\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,aAAaC,SAAc,SAAA,YAA0B;EAE3D,MAAM,QAAQ,SAAS;EAEvB,MAAM,YAAY,IAAY,EAAE;EAChC,MAAM,cAAc,IAAY,EAAE;EAClC,MAAM,QAAQ,eAA+B,OAAO;EAEpD,MAAM,EAAE,QAAQ,gBAAgB,eAAe,KAAK;EAEpD,MAAM,WAAW,eAAwB;GAGvC,MAAM,OAAO,gBAFO,MAAM,UAAU,KAAK,CAAC,CAEF;GAExC,IAAI,YAAY;GAChB,MAAM,WAAW,KAAK,KAAK,KAAK,UAAU;IACxC,MAAM,QAAQ,IAAI,OAAO,SAAS;IAElC,IADe,IAAI,UAAU,MAAM,OACvB;KACV,YAAY;KACZ,IAAI,UAAU,IAAI,SAAS,GACzB,IAAI,WAAW,KAAK;IACxB;IAEA,OAAO;KACL,GAAG;KACH,OAAO;MACL;MACA,GAAG,IAAI;KACT;IACF;GACF,CAAC;GAED,IAAI,CAAC,WACH,IAAI,WAAW,EAAE;GAEnB,OAAO;EACT,CAAC;;;;;;;;EASD,SAAS,gBAAgB,UAA4B;GACnD,OAAO,SACJ,SAAS,SAAS;IACjB,IAAI,KAAK,SAAS,YAAY,MAAM,QAAQ,KAAK,QAAQ,KAAK,KAAK,SAAS,SAAS,GACnF,OAAO,gBAAgB,KAAK,SAAS,OAAO,OAAO,CAAC;IAEtD,OAAO,CAAC,IAAI;GACd,CAAC,CAAA,CACA,KAAK;EACV;EAEA,MAAM,YAAY,UAAU;GAC1B,eAAe;IACb,IAAI,aAAa,KAAK;GACxB,CAAC;EACH,CAAC;;GAIC,OAAAC,UAAA,GAAAC,mBAaM,OAbNC,WAaM;IAZJ,OAAM;IACL,OAAK,EAAA,QAAA,GAAeC,MAAA,WAAA,EAAW,IAAA;GACxBL,GAAAA,KAAAA,MAAM,GAAA,CAEdM,mBAOM,OAAA;IAPG,SAAA;IAAJ,KAAI;GACPJ,GAAAA,EAAAA,UAAA,IAAA,GAAAC,mBAKEI,UAAA,MAAAC,WAHqBH,MAAA,QAAA,IAAb,OAAO,MAAC;IAFlB,OAAAH,UAAA,GAAAO,YAKEC,wBAJK,KAAK,GAAA;KAET,KAAK;KACL,QAAQ,MAAML,MAAA,WAAA"}
+{"version":3,"file":"RuiTabItems.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createElementBlock","_mergeProps","_unref","_createElementVNode","_Fragment","_renderList","_createBlock","_resolveDynamicComponent"],"sources":["../../../../src/components/tabs/tab-items/RuiTabItems.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends string | number\">\nimport { Fragment, isVNode } from 'vue';\nimport { useClipWhileResizing } from '@/composables/clip-while-resizing';\n\ndefineOptions({\n  name: 'RuiTabItems',\n  inheritAttrs: false,\n});\n\n/**\n * The tab whose panel is showing.\n *\n * The default matches RuiTabs. Without one, binding both components to the\n * same ref that starts as `undefined` leaves this component with\n * `modelValue === undefined`, so the `active = modelValue === value` check\n * fails for every tab: the panel renders but stays at height 0, which reads as\n * an element with no content.\n */\nconst modelValue = defineModel<T>({ default: () => 0 as T });\n\nconst slots = useSlots();\n\nconst currIndex = ref<number>(-1);\nconst activeIndex = ref<number>(-1);\nconst inner = useTemplateRef<HTMLDivElement>('inner');\nconst root = useTemplateRef<HTMLDivElement>('root');\n\nconst { height: innerHeight } = useElementSize(inner);\n\n// clip only while the height follows a panel change, so sticky content inside a panel works\nconst clipped = useClipWhileResizing(root, () => get(innerHeight));\n\nconst children = computed<VNode[]>(() => {\n  const slotContent = slots.default?.() ?? [];\n\n  const tabs = getChildrenTabs(slotContent);\n\n  let anyActive = false;\n  const children = tabs.map((tab, index) => {\n    const value = tab.props?.value ?? index;\n    const active = get(modelValue) === value;\n    if (active) {\n      anyActive = true;\n      if (index !== get(currIndex))\n        set(currIndex, index);\n    }\n\n    return {\n      ...tab,\n      props: {\n        value,\n        ...tab.props,\n      },\n    };\n  });\n\n  if (!anyActive)\n    set(currIndex, -1);\n\n  return children;\n});\n\n/**\n * Unwraps the fragments a `v-for` in the slot produces, so only tab items come\n * back.\n *\n * @param children - the slot's vnodes\n * @returns the tab items among them\n */\nfunction getChildrenTabs(children: VNode[]): VNode[] {\n  return children\n    .flatMap((item) => {\n      if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)\n        return getChildrenTabs(item.children.filter(isVNode));\n\n      return [item];\n    })\n    .flat();\n}\n\nwatch(currIndex, (index) => {\n  nextTick(() => {\n    set(activeIndex, index);\n  });\n});\n</script>\n\n<template>\n  <div\n    ref=\"root\"\n    class=\"grow transition-[height] duration-200 ease-out motion-reduce:transition-none\"\n    :class=\"{ 'overflow-hidden': clipped }\"\n    :data-clipped=\"clipped || undefined\"\n    :style=\"{ height: `${innerHeight}px` }\"\n    v-bind=\"$attrs\"\n  >\n    <div ref=\"inner\">\n      <Component\n        :is=\"child\"\n        v-for=\"(child, i) in children\"\n        :key=\"i\"\n        :active=\"i === activeIndex\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EAkBA,MAAM,aAAaC,SAAc,SAAA,YAA0B;EAE3D,MAAM,QAAQ,SAAS;EAEvB,MAAM,YAAY,IAAY,EAAE;EAChC,MAAM,cAAc,IAAY,EAAE;EAClC,MAAM,QAAQ,eAA+B,OAAO;EACpD,MAAM,OAAO,eAA+B,MAAM;EAElD,MAAM,EAAE,QAAQ,gBAAgB,eAAe,KAAK;EAGpD,MAAM,UAAU,qBAAqB,YAAY,IAAI,WAAW,CAAC;EAEjE,MAAM,WAAW,eAAwB;GAGvC,MAAM,OAAO,gBAFO,MAAM,UAAU,KAAK,CAAC,CAEF;GAExC,IAAI,YAAY;GAChB,MAAM,WAAW,KAAK,KAAK,KAAK,UAAU;IACxC,MAAM,QAAQ,IAAI,OAAO,SAAS;IAElC,IADe,IAAI,UAAU,MAAM,OACvB;KACV,YAAY;KACZ,IAAI,UAAU,IAAI,SAAS,GACzB,IAAI,WAAW,KAAK;IACxB;IAEA,OAAO;KACL,GAAG;KACH,OAAO;MACL;MACA,GAAG,IAAI;KACT;IACF;GACF,CAAC;GAED,IAAI,CAAC,WACH,IAAI,WAAW,EAAE;GAEnB,OAAO;EACT,CAAC;;;;;;;;EASD,SAAS,gBAAgB,UAA4B;GACnD,OAAO,SACJ,SAAS,SAAS;IACjB,IAAI,KAAK,SAAS,YAAY,MAAM,QAAQ,KAAK,QAAQ,KAAK,KAAK,SAAS,SAAS,GACnF,OAAO,gBAAgB,KAAK,SAAS,OAAO,OAAO,CAAC;IAEtD,OAAO,CAAC,IAAI;GACd,CAAC,CAAA,CACA,KAAK;EACV;EAEA,MAAM,YAAY,UAAU;GAC1B,eAAe;IACb,IAAI,aAAa,KAAK;GACxB,CAAC;EACH,CAAC;;GAIC,OAAAC,UAAA,GAAAC,mBAgBM,OAhBNC,WAgBM;IAfA,SAAA;IAAJ,KAAI;IACJ,OAAK,CAAC,gFAA8E,EAAA,mBACvDC,MAAA,OAAA,EAAO,CAAA;IACnC,gBAAcA,MAAA,OAAA,KAAW,KAAA;IACzB,OAAK,EAAA,QAAA,GAAeA,MAAA,WAAA,EAAW,IAAA;GACxBL,GAAAA,KAAAA,MAAM,GAAA,CAEdM,mBAOM,OAAA;IAPG,SAAA;IAAJ,KAAI;GACPJ,GAAAA,EAAAA,UAAA,IAAA,GAAAC,mBAKEI,UAAA,MAAAC,WAHqBH,MAAA,QAAA,IAAb,OAAO,MAAC;IAFlB,OAAAH,UAAA,GAAAO,YAKEC,wBAJK,KAAK,GAAA;KAET,KAAK;KACL,QAAQ,MAAML,MAAA,WAAA"}

package/dist/composables/clip-while-resizing.d.ts

@@ -0,0 +1,15 @@
+import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';
+/**
+ * Whether a box that animates its height should clip its content right now.
+ *
+ * A permanent `overflow: hidden` makes the box the scroll container of everything inside it, so a
+ * `position: sticky` child sticks to the box and never to the page. This clips only while the
+ * height changes: from the moment the height value changes until the box's `height` transition
+ * ends. The timer covers a change that runs no transition (reduced motion, a hidden box, an equal
+ * computed height), which fires no `transitionend`.
+ *
+ * @param element - the box whose `height` transitions
+ * @param height - the height the box is given; any change starts a clip
+ * @returns true while the height is changing
+ */
+export declare function useClipWhileResizing(element: Readonly<Ref<HTMLElement | null>>, height: MaybeRefOrGetter<string | number>): ComputedRef<boolean>;

package/dist/composables/clip-while-resizing.js

@@ -0,0 +1,46 @@
+import { get, set, useTimeoutFn } from "../vendor/@vueuse/shared/dist/index.js";
+import { useEventListener } from "../vendor/@vueuse/core/dist/index.js";
+import { computed, shallowRef, toValue, watch } from "vue";
+//#region src/composables/clip-while-resizing.ts
+/** A little past the 200ms height transition, for when no `transitionend` arrives. */
+var SETTLE_FALLBACK_MS = 300;
+/**
+* Whether a box that animates its height should clip its content right now.
+*
+* A permanent `overflow: hidden` makes the box the scroll container of everything inside it, so a
+* `position: sticky` child sticks to the box and never to the page. This clips only while the
+* height changes: from the moment the height value changes until the box's `height` transition
+* ends. The timer covers a change that runs no transition (reduced motion, a hidden box, an equal
+* computed height), which fires no `transitionend`.
+*
+* @param element - the box whose `height` transitions
+* @param height - the height the box is given; any change starts a clip
+* @returns true while the height is changing
+*/
+function useClipWhileResizing(element, height) {
+	const resizing = shallowRef(false);
+	const { start, stop } = useTimeoutFn(() => {
+		set(resizing, false);
+	}, SETTLE_FALLBACK_MS, { immediate: false });
+	watch(() => toValue(height), () => {
+		set(resizing, true);
+		start();
+	});
+	/**
+	* Ends the clip when the box's own height transition ends; a child's transition bubbles up too.
+	*
+	* @param event - the transition event that reached the box
+	*/
+	function settle(event) {
+		if (event.target !== get(element) || event.propertyName !== "height") return;
+		stop();
+		set(resizing, false);
+	}
+	useEventListener(element, "transitionend", settle);
+	useEventListener(element, "transitioncancel", settle);
+	return computed(() => get(resizing));
+}
+//#endregion
+export { useClipWhileResizing };
+
+//# sourceMappingURL=clip-while-resizing.js.map

package/dist/composables/clip-while-resizing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clip-while-resizing.js","names":[],"sources":["../../src/composables/clip-while-resizing.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';\nimport { useEventListener, useTimeoutFn } from '@vueuse/core';\n\n/** A little past the 200ms height transition, for when no `transitionend` arrives. */\nconst SETTLE_FALLBACK_MS = 300;\n\n/**\n * Whether a box that animates its height should clip its content right now.\n *\n * A permanent `overflow: hidden` makes the box the scroll container of everything inside it, so a\n * `position: sticky` child sticks to the box and never to the page. This clips only while the\n * height changes: from the moment the height value changes until the box's `height` transition\n * ends. The timer covers a change that runs no transition (reduced motion, a hidden box, an equal\n * computed height), which fires no `transitionend`.\n *\n * @param element - the box whose `height` transitions\n * @param height - the height the box is given; any change starts a clip\n * @returns true while the height is changing\n */\nexport function useClipWhileResizing(\n  element: Readonly<Ref<HTMLElement | null>>,\n  height: MaybeRefOrGetter<string | number>,\n): ComputedRef<boolean> {\n  const resizing = shallowRef<boolean>(false);\n\n  const { start, stop } = useTimeoutFn(() => {\n    set(resizing, false);\n  }, SETTLE_FALLBACK_MS, { immediate: false });\n\n  watch(() => toValue(height), () => {\n    set(resizing, true);\n    start();\n  });\n\n  /**\n   * Ends the clip when the box's own height transition ends; a child's transition bubbles up too.\n   *\n   * @param event - the transition event that reached the box\n   */\n  function settle(event: TransitionEvent): void {\n    if (event.target !== get(element) || event.propertyName !== 'height')\n      return;\n    stop();\n    set(resizing, false);\n  }\n\n  useEventListener(element, 'transitionend', settle);\n  useEventListener(element, 'transitioncancel', settle);\n\n  return computed<boolean>(() => get(resizing));\n}\n"],"mappings":";;;;;AAIA,IAAM,qBAAqB;;;;;;;;;;;;;;AAe3B,SAAgB,qBACd,SACA,QACsB;CACtB,MAAM,WAAW,WAAoB,KAAK;CAE1C,MAAM,EAAE,OAAO,SAAS,mBAAmB;EACzC,IAAI,UAAU,KAAK;CACrB,GAAG,oBAAoB,EAAE,WAAW,MAAM,CAAC;CAE3C,YAAY,QAAQ,MAAM,SAAS;EACjC,IAAI,UAAU,IAAI;EAClB,MAAM;CACR,CAAC;;;;;;CAOD,SAAS,OAAO,OAA8B;EAC5C,IAAI,MAAM,WAAW,IAAI,OAAO,KAAK,MAAM,iBAAiB,UAC1D;EACF,KAAK;EACL,IAAI,UAAU,KAAK;CACrB;CAEA,iBAAiB,SAAS,iBAAiB,MAAM;CACjD,iBAAiB,SAAS,oBAAoB,MAAM;CAEpD,OAAO,eAAwB,IAAI,QAAQ,CAAC;AAC9C"}

package/dist/composables/defaults/field.d.ts

@@ -1,4 +1,5 @@
-import type { ComputedRef, InjectionKey, MaybeRef, MaybeRefOrGetter } from 'vue';
+import type { FormDetails } from '../../utils/form-text-detail.js';
+import { type ComputedRef, type InjectionKey, type MaybeRef, type MaybeRefOrGetter } from 'vue';
 /**
  * Where a field shows its label.
  *
@@ -9,14 +10,29 @@ import type { ComputedRef, InjectionKey, MaybeRef, MaybeRefOrGetter } from 'vue'
 export type LabelPlacement = 'top' | 'hidden';
 export interface FieldOptions {
     labelPlacement: MaybeRef<LabelPlacement>;
+    details: MaybeRef<FormDetails>;
+}
+/** What a `provideFieldDefaults` or `RuiFieldDefaults` scope sets; an unset key falls through to the scope above. */
+export interface FieldScopeOptions {
+    labelPlacement?: MaybeRefOrGetter<LabelPlacement | undefined>;
+    details?: MaybeRefOrGetter<FormDetails | undefined>;
 }
 /** The app-wide default, set through `createRui({ defaults: { field } })`. */
 export declare const FieldSymbol: InjectionKey<FieldOptions>;
 export declare function createFieldDefaults(options?: Partial<FieldOptions>): FieldOptions;
-/** Sets the label placement for every field rendered below the calling component. */
-export declare function provideFieldDefaults(labelPlacement: MaybeRefOrGetter<LabelPlacement | undefined>): void;
+/**
+ * Sets defaults for every field rendered below the calling component. A key left unset
+ * keeps what an enclosing scope set. Passing a placement alone is the 3.0 form.
+ */
+export declare function provideFieldDefaults(options: FieldScopeOptions | MaybeRefOrGetter<LabelPlacement | undefined>): void;
 /**
  * The placement a field uses: its own prop, then the nearest scope, then the
  * app default, then `top`.
  */
 export declare function useLabelPlacement(placement: MaybeRefOrGetter<LabelPlacement | undefined>): ComputedRef<LabelPlacement>;
+/**
+ * The details mode the scope and app give a control that sets none itself: the nearest
+ * scope, then the app default. `undefined` when neither sets one. Outside a component
+ * setup there is nothing to inject, so it is always `undefined` there.
+ */
+export declare function useInheritedDetails(): () => FormDetails | undefined;

package/dist/composables/defaults/field.js

@@ -1,4 +1,4 @@
-import { computed, inject, provide, toValue } from "vue";
+import { computed, hasInjectionContext, inject, isRef, provide, toValue } from "vue";
 //#region src/composables/defaults/field.ts
 /** The app-wide default, set through `createRui({ defaults: { field } })`. */
 var FieldSymbol = Symbol.for("rui:field");
@@ -7,12 +7,27 @@ var FieldScopeSymbol = Symbol.for("rui:field-scope");
 function createFieldDefaults(options) {
 	return {
 		labelPlacement: "top",
+		details: "reserve",
 		...options
 	};
 }
-/** Sets the label placement for every field rendered below the calling component. */
-function provideFieldDefaults(labelPlacement) {
-	provide(FieldScopeSymbol, labelPlacement);
+function isScopeOptions(options) {
+	return typeof options === "object" && !isRef(options);
+}
+/**
+* Sets defaults for every field rendered below the calling component. A key left unset
+* keeps what an enclosing scope set. Passing a placement alone is the 3.0 form.
+*/
+function provideFieldDefaults(options) {
+	const { labelPlacement, details } = isScopeOptions(options) ? options : {
+		labelPlacement: options,
+		details: void 0
+	};
+	const parent = inject(FieldScopeSymbol, void 0);
+	provide(FieldScopeSymbol, {
+		labelPlacement: () => toValue(labelPlacement) ?? parent?.labelPlacement(),
+		details: () => toValue(details) ?? parent?.details()
+	});
 }
 /**
 * The placement a field uses: its own prop, then the nearest scope, then the
@@ -21,9 +36,20 @@ function provideFieldDefaults(labelPlacement) {
 function useLabelPlacement(placement) {
 	const scope = inject(FieldScopeSymbol, void 0);
 	const app = inject(FieldSymbol, void 0);
-	return computed(() => toValue(placement) ?? toValue(scope) ?? (app ? toValue(app.labelPlacement) : void 0) ?? "top");
+	return computed(() => toValue(placement) ?? scope?.labelPlacement() ?? (app ? toValue(app.labelPlacement) : void 0) ?? "top");
+}
+/**
+* The details mode the scope and app give a control that sets none itself: the nearest
+* scope, then the app default. `undefined` when neither sets one. Outside a component
+* setup there is nothing to inject, so it is always `undefined` there.
+*/
+function useInheritedDetails() {
+	if (!hasInjectionContext()) return () => void 0;
+	const scope = inject(FieldScopeSymbol, void 0);
+	const app = inject(FieldSymbol, void 0);
+	return () => scope?.details() ?? (app ? toValue(app.details) : void 0);
 }
 //#endregion
-export { FieldSymbol, createFieldDefaults, provideFieldDefaults, useLabelPlacement };
+export { FieldSymbol, createFieldDefaults, provideFieldDefaults, useInheritedDetails, useLabelPlacement };
 
 //# sourceMappingURL=field.js.map

package/dist/composables/defaults/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","names":[],"sources":["../../../src/composables/defaults/field.ts"],"sourcesContent":["import type { ComputedRef, InjectionKey, MaybeRef, MaybeRefOrGetter } from 'vue';\n\n/**\n * Where a field shows its label.\n *\n * - `top`: a label above a bordered field (the default).\n * - `hidden`: no visible label; the label is still announced to screen readers.\n *   For search and filter fields whose placeholder and icon say what they are.\n */\nexport type LabelPlacement = 'top' | 'hidden';\n\nexport interface FieldOptions {\n  labelPlacement: MaybeRef<LabelPlacement>;\n}\n\n/** The app-wide default, set through `createRui({ defaults: { field } })`. */\nexport const FieldSymbol: InjectionKey<FieldOptions> = Symbol.for('rui:field');\n\n/** A default for every field below a component, set with `provideFieldDefaults` or `RuiFieldDefaults`. */\nconst FieldScopeSymbol: InjectionKey<MaybeRefOrGetter<LabelPlacement | undefined>> = Symbol.for('rui:field-scope');\n\nexport function createFieldDefaults(options?: Partial<FieldOptions>): FieldOptions {\n  return {\n    labelPlacement: 'top',\n    ...options,\n  };\n}\n\n/** Sets the label placement for every field rendered below the calling component. */\nexport function provideFieldDefaults(labelPlacement: MaybeRefOrGetter<LabelPlacement | undefined>): void {\n  provide(FieldScopeSymbol, labelPlacement);\n}\n\n/**\n * The placement a field uses: its own prop, then the nearest scope, then the\n * app default, then `top`.\n */\nexport function useLabelPlacement(placement: MaybeRefOrGetter<LabelPlacement | undefined>): ComputedRef<LabelPlacement> {\n  const scope = inject(FieldScopeSymbol, undefined);\n  const app = inject(FieldSymbol, undefined);\n\n  return computed<LabelPlacement>(() =>\n    toValue(placement)\n    ?? toValue(scope)\n    ?? (app ? toValue(app.labelPlacement) : undefined)\n    ?? 'top',\n  );\n}\n"],"mappings":";;;AAgBA,IAAa,cAA0C,OAAO,IAAI,WAAW;;AAG7E,IAAM,mBAA+E,OAAO,IAAI,iBAAiB;AAEjH,SAAgB,oBAAoB,SAA+C;CACjF,OAAO;EACL,gBAAgB;EAChB,GAAG;CACL;AACF;;AAGA,SAAgB,qBAAqB,gBAAoE;CACvG,QAAQ,kBAAkB,cAAc;AAC1C;;;;;AAMA,SAAgB,kBAAkB,WAAsF;CACtH,MAAM,QAAQ,OAAO,kBAAkB,KAAA,CAAS;CAChD,MAAM,MAAM,OAAO,aAAa,KAAA,CAAS;CAEzC,OAAO,eACL,QAAQ,SAAS,KACd,QAAQ,KAAK,MACZ,MAAM,QAAQ,IAAI,cAAc,IAAI,KAAA,MACrC,KACL;AACF"}
+{"version":3,"file":"field.js","names":[],"sources":["../../../src/composables/defaults/field.ts"],"sourcesContent":["import type { FormDetails } from '@/utils/form-text-detail';\nimport { type ComputedRef, hasInjectionContext, type InjectionKey, type MaybeRef, type MaybeRefOrGetter } from 'vue';\n\n/**\n * Where a field shows its label.\n *\n * - `top`: a label above a bordered field (the default).\n * - `hidden`: no visible label; the label is still announced to screen readers.\n *   For search and filter fields whose placeholder and icon say what they are.\n */\nexport type LabelPlacement = 'top' | 'hidden';\n\nexport interface FieldOptions {\n  labelPlacement: MaybeRef<LabelPlacement>;\n  details: MaybeRef<FormDetails>;\n}\n\n/** What a `provideFieldDefaults` or `RuiFieldDefaults` scope sets; an unset key falls through to the scope above. */\nexport interface FieldScopeOptions {\n  labelPlacement?: MaybeRefOrGetter<LabelPlacement | undefined>;\n  details?: MaybeRefOrGetter<FormDetails | undefined>;\n}\n\ninterface FieldScope {\n  labelPlacement: () => LabelPlacement | undefined;\n  details: () => FormDetails | undefined;\n}\n\n/** The app-wide default, set through `createRui({ defaults: { field } })`. */\nexport const FieldSymbol: InjectionKey<FieldOptions> = Symbol.for('rui:field');\n\n/** A default for every field below a component, set with `provideFieldDefaults` or `RuiFieldDefaults`. */\nconst FieldScopeSymbol: InjectionKey<FieldScope> = Symbol.for('rui:field-scope');\n\nexport function createFieldDefaults(options?: Partial<FieldOptions>): FieldOptions {\n  return {\n    labelPlacement: 'top',\n    details: 'reserve',\n    ...options,\n  };\n}\n\nfunction isScopeOptions(\n  options: FieldScopeOptions | MaybeRefOrGetter<LabelPlacement | undefined>,\n): options is FieldScopeOptions {\n  return typeof options === 'object' && !isRef(options);\n}\n\n/**\n * Sets defaults for every field rendered below the calling component. A key left unset\n * keeps what an enclosing scope set. Passing a placement alone is the 3.0 form.\n */\nexport function provideFieldDefaults(options: FieldScopeOptions | MaybeRefOrGetter<LabelPlacement | undefined>): void {\n  const { labelPlacement, details } = isScopeOptions(options) ? options : { labelPlacement: options, details: undefined };\n  const parent = inject(FieldScopeSymbol, undefined);\n\n  provide(FieldScopeSymbol, {\n    labelPlacement: () => toValue(labelPlacement) ?? parent?.labelPlacement(),\n    details: () => toValue(details) ?? parent?.details(),\n  });\n}\n\n/**\n * The placement a field uses: its own prop, then the nearest scope, then the\n * app default, then `top`.\n */\nexport function useLabelPlacement(placement: MaybeRefOrGetter<LabelPlacement | undefined>): ComputedRef<LabelPlacement> {\n  const scope = inject(FieldScopeSymbol, undefined);\n  const app = inject(FieldSymbol, undefined);\n\n  return computed<LabelPlacement>(() =>\n    toValue(placement)\n    ?? scope?.labelPlacement()\n    ?? (app ? toValue(app.labelPlacement) : undefined)\n    ?? 'top',\n  );\n}\n\n/**\n * The details mode the scope and app give a control that sets none itself: the nearest\n * scope, then the app default. `undefined` when neither sets one. Outside a component\n * setup there is nothing to inject, so it is always `undefined` there.\n */\nexport function useInheritedDetails(): () => FormDetails | undefined {\n  if (!hasInjectionContext())\n    return () => undefined;\n\n  const scope = inject(FieldScopeSymbol, undefined);\n  const app = inject(FieldSymbol, undefined);\n\n  return () => scope?.details() ?? (app ? toValue(app.details) : undefined);\n}\n"],"mappings":";;;AA6BA,IAAa,cAA0C,OAAO,IAAI,WAAW;;AAG7E,IAAM,mBAA6C,OAAO,IAAI,iBAAiB;AAE/E,SAAgB,oBAAoB,SAA+C;CACjF,OAAO;EACL,gBAAgB;EAChB,SAAS;EACT,GAAG;CACL;AACF;AAEA,SAAS,eACP,SAC8B;CAC9B,OAAO,OAAO,YAAY,YAAY,CAAC,MAAM,OAAO;AACtD;;;;;AAMA,SAAgB,qBAAqB,SAAiF;CACpH,MAAM,EAAE,gBAAgB,YAAY,eAAe,OAAO,IAAI,UAAU;EAAE,gBAAgB;EAAS,SAAS,KAAA;CAAU;CACtH,MAAM,SAAS,OAAO,kBAAkB,KAAA,CAAS;CAEjD,QAAQ,kBAAkB;EACxB,sBAAsB,QAAQ,cAAc,KAAK,QAAQ,eAAe;EACxE,eAAe,QAAQ,OAAO,KAAK,QAAQ,QAAQ;CACrD,CAAC;AACH;;;;;AAMA,SAAgB,kBAAkB,WAAsF;CACtH,MAAM,QAAQ,OAAO,kBAAkB,KAAA,CAAS;CAChD,MAAM,MAAM,OAAO,aAAa,KAAA,CAAS;CAEzC,OAAO,eACL,QAAQ,SAAS,KACd,OAAO,eAAe,MACrB,MAAM,QAAQ,IAAI,cAAc,IAAI,KAAA,MACrC,KACL;AACF;;;;;;AAOA,SAAgB,sBAAqD;CACnE,IAAI,CAAC,oBAAoB,GACvB,aAAa,KAAA;CAEf,MAAM,QAAQ,OAAO,kBAAkB,KAAA,CAAS;CAChD,MAAM,MAAM,OAAO,aAAa,KAAA,CAAS;CAEzC,aAAa,OAAO,QAAQ,MAAM,MAAM,QAAQ,IAAI,OAAO,IAAI,KAAA;AACjE"}

package/dist/composables/sticky-blocker.d.ts

@@ -0,0 +1,20 @@
+import type { MaybeRefOrGetter, Ref } from 'vue';
+/**
+ * The nearest ancestor with `overflow: hidden` on either axis, which a `position: sticky` element
+ * sticks to instead of the page. `hidden` never scrolls, so the element can never stick. `auto` and
+ * `scroll` are left out: those can be real scrolling areas, like a dialog body. `clip` makes no
+ * scroll container, so it never blocks. A box marked `data-clipped` clips only while it animates.
+ *
+ * @param element - where the walk up the tree starts; its own overflow does not count
+ * @returns the blocking ancestor, or undefined when nothing blocks the element
+ */
+export declare function findStickyBlocker(element: HTMLElement): HTMLElement | undefined;
+/**
+ * In a development build, warns once when an ancestor keeps a sticky element from sticking to the
+ * page. Silent in production, where the check does not run.
+ *
+ * @param element - the `position: sticky` box, checked once it is mounted
+ * @param enabled - whether the element is meant to stick
+ * @param name - what the element is, for the message
+ */
+export declare function useStickyBlockerWarning(element: Readonly<Ref<HTMLElement | null | undefined>>, enabled: MaybeRefOrGetter<boolean>, name: string): void;

package/dist/composables/sticky-blocker.js

@@ -0,0 +1,62 @@
+import { get, useTimeoutFn } from "../vendor/@vueuse/shared/dist/index.js";
+import { isDevelopment } from "../utils/development.js";
+import { toValue, watch } from "vue";
+//#region src/composables/sticky-blocker.ts
+/** Long enough for an opening accordion or tab panel to settle before the check reads its overflow. */
+var CHECK_DELAY_MS = 1e3;
+/**
+* The nearest ancestor with `overflow: hidden` on either axis, which a `position: sticky` element
+* sticks to instead of the page. `hidden` never scrolls, so the element can never stick. `auto` and
+* `scroll` are left out: those can be real scrolling areas, like a dialog body. `clip` makes no
+* scroll container, so it never blocks. A box marked `data-clipped` clips only while it animates.
+*
+* @param element - where the walk up the tree starts; its own overflow does not count
+* @returns the blocking ancestor, or undefined when nothing blocks the element
+*/
+function findStickyBlocker(element) {
+	let parent = element.parentElement;
+	while (parent && parent !== document.body && parent !== document.documentElement) {
+		const { overflowX, overflowY } = getComputedStyle(parent);
+		if ((overflowX === "hidden" || overflowY === "hidden") && !parent.hasAttribute("data-clipped")) return parent;
+		parent = parent.parentElement;
+	}
+}
+/**
+* A short, recognizable name for an element in a console message.
+*
+* @param element - the element to name
+* @returns its tag, `data-id` and first classes
+*/
+function describe(element) {
+	const id = element.dataset.id ? `[data-id="${element.dataset.id}"]` : "";
+	const classes = [...element.classList].slice(0, 3).map((name) => `.${name}`).join("");
+	return `<${element.tagName.toLowerCase()}${id}${classes}>`;
+}
+/**
+* In a development build, warns once when an ancestor keeps a sticky element from sticking to the
+* page. Silent in production, where the check does not run.
+*
+* @param element - the `position: sticky` box, checked once it is mounted
+* @param enabled - whether the element is meant to stick
+* @param name - what the element is, for the message
+*/
+function useStickyBlockerWarning(element, enabled, name) {
+	if (!isDevelopment()) return;
+	let warned = false;
+	function check() {
+		const target = get(element);
+		if (warned || !toValue(enabled) || !target) return;
+		const blocker = findStickyBlocker(target);
+		if (!blocker) return;
+		warned = true;
+		console.warn(`[@rotki/ui-library] ${name} cannot stick to the page: the ancestor ${describe(blocker)} has overflow: hidden, so the bar sticks to it instead. Use overflow: clip there (it clips the same without creating a scroll container), or move the element out of it.`, blocker);
+	}
+	const { start } = useTimeoutFn(check, CHECK_DELAY_MS, { immediate: false });
+	watch([element, () => toValue(enabled)], ([target, on]) => {
+		if (target && on) start();
+	}, { immediate: true });
+}
+//#endregion
+export { findStickyBlocker, useStickyBlockerWarning };
+
+//# sourceMappingURL=sticky-blocker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sticky-blocker.js","names":[],"sources":["../../src/composables/sticky-blocker.ts"],"sourcesContent":["import type { MaybeRefOrGetter, Ref } from 'vue';\nimport { useTimeoutFn } from '@vueuse/core';\nimport { isDevelopment } from '@/utils/development';\n\n/** Long enough for an opening accordion or tab panel to settle before the check reads its overflow. */\nconst CHECK_DELAY_MS = 1000;\n\n/**\n * The nearest ancestor with `overflow: hidden` on either axis, which a `position: sticky` element\n * sticks to instead of the page. `hidden` never scrolls, so the element can never stick. `auto` and\n * `scroll` are left out: those can be real scrolling areas, like a dialog body. `clip` makes no\n * scroll container, so it never blocks. A box marked `data-clipped` clips only while it animates.\n *\n * @param element - where the walk up the tree starts; its own overflow does not count\n * @returns the blocking ancestor, or undefined when nothing blocks the element\n */\nexport function findStickyBlocker(element: HTMLElement): HTMLElement | undefined {\n  let parent = element.parentElement;\n  while (parent && parent !== document.body && parent !== document.documentElement) {\n    const { overflowX, overflowY } = getComputedStyle(parent);\n    if ((overflowX === 'hidden' || overflowY === 'hidden') && !parent.hasAttribute('data-clipped'))\n      return parent;\n    parent = parent.parentElement;\n  }\n  return undefined;\n}\n\n/**\n * A short, recognizable name for an element in a console message.\n *\n * @param element - the element to name\n * @returns its tag, `data-id` and first classes\n */\nfunction describe(element: HTMLElement): string {\n  const id = element.dataset.id ? `[data-id=\"${element.dataset.id}\"]` : '';\n  const classes = [...element.classList].slice(0, 3).map(name => `.${name}`).join('');\n  return `<${element.tagName.toLowerCase()}${id}${classes}>`;\n}\n\n/**\n * In a development build, warns once when an ancestor keeps a sticky element from sticking to the\n * page. Silent in production, where the check does not run.\n *\n * @param element - the `position: sticky` box, checked once it is mounted\n * @param enabled - whether the element is meant to stick\n * @param name - what the element is, for the message\n */\nexport function useStickyBlockerWarning(\n  element: Readonly<Ref<HTMLElement | null | undefined>>,\n  enabled: MaybeRefOrGetter<boolean>,\n  name: string,\n): void {\n  if (!isDevelopment())\n    return;\n\n  let warned = false;\n\n  function check(): void {\n    const target = get(element);\n    if (warned || !toValue(enabled) || !target)\n      return;\n    const blocker = findStickyBlocker(target);\n    if (!blocker)\n      return;\n    warned = true;\n    console.warn(\n      `[@rotki/ui-library] ${name} cannot stick to the page: the ancestor ${describe(blocker)} has overflow: hidden, `\n      + 'so the bar sticks to it instead. Use overflow: clip there (it clips the same without creating a scroll container), '\n      + 'or move the element out of it.',\n      blocker,\n    );\n  }\n\n  const { start } = useTimeoutFn(check, CHECK_DELAY_MS, { immediate: false });\n\n  watch([element, () => toValue(enabled)], ([target, on]) => {\n    if (target && on)\n      start();\n  }, { immediate: true });\n}\n"],"mappings":";;;;;AAKA,IAAM,iBAAiB;;;;;;;;;;AAWvB,SAAgB,kBAAkB,SAA+C;CAC/E,IAAI,SAAS,QAAQ;CACrB,OAAO,UAAU,WAAW,SAAS,QAAQ,WAAW,SAAS,iBAAiB;EAChF,MAAM,EAAE,WAAW,cAAc,iBAAiB,MAAM;EACxD,KAAK,cAAc,YAAY,cAAc,aAAa,CAAC,OAAO,aAAa,cAAc,GAC3F,OAAO;EACT,SAAS,OAAO;CAClB;AAEF;;;;;;;AAQA,SAAS,SAAS,SAA8B;CAC9C,MAAM,KAAK,QAAQ,QAAQ,KAAK,aAAa,QAAQ,QAAQ,GAAG,MAAM;CACtE,MAAM,UAAU,CAAC,GAAG,QAAQ,SAAS,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,KAAI,SAAQ,IAAI,MAAM,CAAC,CAAC,KAAK,EAAE;CAClF,OAAO,IAAI,QAAQ,QAAQ,YAAY,IAAI,KAAK,QAAQ;AAC1D;;;;;;;;;AAUA,SAAgB,wBACd,SACA,SACA,MACM;CACN,IAAI,CAAC,cAAc,GACjB;CAEF,IAAI,SAAS;CAEb,SAAS,QAAc;EACrB,MAAM,SAAS,IAAI,OAAO;EAC1B,IAAI,UAAU,CAAC,QAAQ,OAAO,KAAK,CAAC,QAClC;EACF,MAAM,UAAU,kBAAkB,MAAM;EACxC,IAAI,CAAC,SACH;EACF,SAAS;EACT,QAAQ,KACN,uBAAuB,KAAK,0CAA0C,SAAS,OAAO,EAAE,2KAGxF,OACF;CACF;CAEA,MAAM,EAAE,UAAU,aAAa,OAAO,gBAAgB,EAAE,WAAW,MAAM,CAAC;CAE1E,MAAM,CAAC,eAAe,QAAQ,OAAO,CAAC,IAAI,CAAC,QAAQ,QAAQ;EACzD,IAAI,UAAU,IACZ,MAAM;CACV,GAAG,EAAE,WAAW,KAAK,CAAC;AACxB"}

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

@@ -99,11 +99,21 @@ function useStickyBottomInset(sentinel, bar, canStick) {
 	const { height } = useElementSize(bar, void 0, { box: "border-box" });
 	const { height: viewHeight } = useWindowSize();
 	let frame = 0;
-	/** From the bar's top to the view's bottom; a stuck bar sits on that bottom, so this is its height. */
+	/**
+	* From the bar's top to the view's bottom; a stuck bar sits on that bottom, so this is its height.
+	* It first checks the sentinel is still below the band: one jump can carry it from below the band to
+	* above the view without the observer ever seeing it intersect, which would leave the bar counted
+	* while it sits far above the view.
+	*/
 	function measureCovered() {
 		frame = 0;
 		const element = unrefElement(bar);
 		if (!element) return;
+		const place = get(sentinel)?.getBoundingClientRect().top;
+		if (place !== void 0 && place < get(viewHeight) - Math.ceil(get(height)) - RESTING_CLEARANCE) {
+			set(belowView, false);
+			return;
+		}
 		set(covered, Math.max(get(height), Math.ceil(get(viewHeight) - element.getBoundingClientRect().top)));
 	}
 	/** A resting bar moves with the page, so while it is in the band, follow it once per frame. */

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

@@ -1 +1 @@
-{"version":3,"file":"page-scroll.js","names":[],"sources":["../../../../src/composables/tables/data-table/page-scroll.ts"],"sourcesContent":["import type { MaybeRefOrGetter, Ref } from 'vue';\nimport type { MaybeElementRef } from '@/types/dom';\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/**\n * How far above the bar a bar resting at its own place still counts as covered: a part docked in the\n * bottom corner (rotki's task dock is 82px with its offset) reaches over the bar's top by about this much.\n */\nconst RESTING_CLEARANCE = 48;\n\n/** How much of the view's bottom each pagination bar covers, by table; the page's floating parts clear the most. */\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. A bar resting at its own place in the bottom band of the view counts too,\n * since it sits in the same corner; it covers from its top down, which is more than its height when it\n * rests above the view's bottom, so the parts keep the same gap above it as above a stuck bar. Only a\n * bar at page level counts: one inside a scrolling area 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's bottom band, the bar covers that corner\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: MaybeElementRef,\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 covered = shallowRef<number>(0);\n  const { height } = useElementSize(bar, undefined, { box: 'border-box' });\n  const { height: viewHeight } = useWindowSize();\n  let frame = 0;\n\n  /** From the bar's top to the view's bottom; a stuck bar sits on that bottom, so this is its height. */\n  function measureCovered(): void {\n    frame = 0;\n    const element = unrefElement(bar);\n    if (!element)\n      return;\n    set(covered, Math.max(get(height), Math.ceil(get(viewHeight) - element.getBoundingClientRect().top)));\n  }\n\n  /** A resting bar moves with the page, so while it is in the band, follow it once per frame. */\n  function scheduleMeasure(): void {\n    if (get(belowView) && !frame)\n      frame = requestAnimationFrame(measureCovered);\n  }\n\n  useEventListener('scroll', scheduleMeasure, { capture: true, passive: true });\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    // the view's bottom edge, raised by the band a resting bar covers\n    rootMargin: () => `0px 0px -${Math.ceil(get(height)) + RESTING_CLEARANCE}px 0px`,\n  });\n\n  watch([belowView, height, viewHeight], () => measureCovered());\n\n  watchEffect(() => {\n    if (get(pageLevel) && toValue(canStick) && get(belowView) && get(height) > 0)\n      stuckBarHeights.set(id, Math.max(get(height), get(covered)));\n    else\n      stuckBarHeights.delete(id);\n    publishStickyBottom();\n  });\n\n  onScopeDispose(() => {\n    if (frame)\n      cancelAnimationFrame(frame);\n    stuckBarHeights.delete(id);\n    publishStickyBottom();\n  });\n}\n"],"mappings":"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"}
+{"version":3,"file":"page-scroll.js","names":[],"sources":["../../../../src/composables/tables/data-table/page-scroll.ts"],"sourcesContent":["import type { MaybeRefOrGetter, Ref } from 'vue';\nimport type { MaybeElementRef } from '@/types/dom';\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/**\n * How far above the bar a bar resting at its own place still counts as covered: a part docked in the\n * bottom corner (rotki's task dock is 82px with its offset) reaches over the bar's top by about this much.\n */\nconst RESTING_CLEARANCE = 48;\n\n/** How much of the view's bottom each pagination bar covers, by table; the page's floating parts clear the most. */\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. A bar resting at its own place in the bottom band of the view counts too,\n * since it sits in the same corner; it covers from its top down, which is more than its height when it\n * rests above the view's bottom, so the parts keep the same gap above it as above a stuck bar. Only a\n * bar at page level counts: one inside a scrolling area 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's bottom band, the bar covers that corner\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: MaybeElementRef,\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 covered = shallowRef<number>(0);\n  const { height } = useElementSize(bar, undefined, { box: 'border-box' });\n  const { height: viewHeight } = useWindowSize();\n  let frame = 0;\n\n  /**\n   * From the bar's top to the view's bottom; a stuck bar sits on that bottom, so this is its height.\n   * It first checks the sentinel is still below the band: one jump can carry it from below the band to\n   * above the view without the observer ever seeing it intersect, which would leave the bar counted\n   * while it sits far above the view.\n   */\n  function measureCovered(): void {\n    frame = 0;\n    const element = unrefElement(bar);\n    if (!element)\n      return;\n    const place = get(sentinel)?.getBoundingClientRect().top;\n    if (place !== undefined && place < get(viewHeight) - Math.ceil(get(height)) - RESTING_CLEARANCE) {\n      set(belowView, false);\n      return;\n    }\n    set(covered, Math.max(get(height), Math.ceil(get(viewHeight) - element.getBoundingClientRect().top)));\n  }\n\n  /** A resting bar moves with the page, so while it is in the band, follow it once per frame. */\n  function scheduleMeasure(): void {\n    if (get(belowView) && !frame)\n      frame = requestAnimationFrame(measureCovered);\n  }\n\n  useEventListener('scroll', scheduleMeasure, { capture: true, passive: true });\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    // the view's bottom edge, raised by the band a resting bar covers\n    rootMargin: () => `0px 0px -${Math.ceil(get(height)) + RESTING_CLEARANCE}px 0px`,\n  });\n\n  watch([belowView, height, viewHeight], () => measureCovered());\n\n  watchEffect(() => {\n    if (get(pageLevel) && toValue(canStick) && get(belowView) && get(height) > 0)\n      stuckBarHeights.set(id, Math.max(get(height), get(covered)));\n    else\n      stuckBarHeights.delete(id);\n    publishStickyBottom();\n  });\n\n  onScopeDispose(() => {\n    if (frame)\n      cancelAnimationFrame(frame);\n    stuckBarHeights.delete(id);\n    publishStickyBottom();\n  });\n}\n"],"mappings":"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"}

package/dist/index.d.ts

@@ -8,7 +8,7 @@ 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 FieldOptions, type FieldScopeOptions, 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';
@@ -17,13 +17,17 @@ export { StepperOrientation, StepperState, type StepperStep };
 export type { VueClassValue } from './types/class-value.js';
 export { type InitThemeOptions, type ThemeConfig, type ThemeContent, type ThemeData, ThemeMode, } from './types/theme.js';
 export { createBlockie } from './utils/blockie.js';
+export type { FormDetails } from './utils/form-text-detail.js';
 export { cn, tv } from './utils/tv.js';
 export type { VariantProps } from 'tailwind-variants';
 export interface RuiOptions {
     theme?: InitThemeOptions;
     defaults?: {
         table?: Partial<TableOptions>;
-        /** `labelPlacement` for every text field, text area, select and picker; `top` when unset. */
+        /**
+         * `labelPlacement` for every text field, text area, select and picker (`top` when unset),
+         * and `details` for every form control (`reserve` when unset).
+         */
         field?: Partial<FieldOptions>;
     };
     /**