@rotki/ui-library 3.1.7 → 3.2.0

package/dist/components/tables/RuiTable.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
-import { tv } from "../../utils/tv.js";
 import RuiTableEmptyState_default from "./RuiTableEmptyState.js";
 import RuiTableErrorState_default from "./RuiTableErrorState.js";
 import RuiTableLoadingState_default from "./RuiTableLoadingState.js";
+import { tableStyles } from "./table-styles.js";
 import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot } from "vue";
 //#region src/components/tables/RuiTable.vue?vue&type=script&setup=true&lang.ts
 var RuiTable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -39,37 +39,6 @@ var RuiTable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			if (__props.empty) return "empty";
 		});
 		const emptyProps = computed(() => typeof __props.empty === "object" ? __props.empty : {});
-		/**
-		* Every rule that lands on a `th` or a `td` wraps the `&` in `:where()`, which
-		* compiles to `:where(.generated-class) th` and so carries the specificity of
-		* the element alone. A consumer writing `class="p-0"` on one cell is a single
-		* class, which outranks that, so a one-off override needs no `!important` the
-		* way a plain `[&_th]:` rule would.
-		*/
-		const tableStyles = tv({
-			slots: {
-				root: "w-full overflow-y-auto",
-				table: [
-					"w-full text-rui-text",
-					"[:where(&)_thead]:border-b [:where(&)_thead]:border-rui-divider",
-					"[:where(&)_thead_th]:font-medium [:where(&)_thead_th]:text-rui-text-secondary [:where(&)_thead_th]:text-start",
-					"[:where(&)_thead_th]:text-[0.8125rem] [:where(&)_thead_th]:leading-5",
-					"[:where(&)_th]:px-4 [:where(&)_td]:px-4 [:where(&)_td]:text-body-2",
-					"[:where(&)_tbody>tr+tr]:border-t [:where(&)_tbody>tr+tr]:border-rui-divider",
-					"[:where(&)_tbody_td]:border-b-0"
-				]
-			},
-			variants: {
-				variant: {
-					default: {},
-					outlined: { root: "border rounded-rui-panel border-rui-divider" }
-				},
-				dense: {
-					true: { table: "[:where(&)_th]:py-0.5 [:where(&)_th]:h-8 [:where(&)_td]:py-1 [:where(&)_td]:h-9" },
-					false: { table: "[:where(&)_th]:py-1 [:where(&)_th]:h-10 [:where(&)_td]:py-1 [:where(&)_td]:h-11" }
-				}
-			}
-		});
 		const ui = computed(() => tableStyles({
 			dense: __props.dense,
 			variant: __props.variant

package/dist/components/tables/RuiTable.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTable.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createElementBlock","_mergeProps","_createElementVNode","_normalizeClass","_renderSlot","_createVNode","RuiTableLoadingState","RuiTableErrorState","RuiTableEmptyState","_createCommentVNode"],"sources":["../../../src/components/tables/RuiTable.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport RuiTableEmptyState from '@/components/tables/RuiTableEmptyState.vue';\nimport RuiTableErrorState from '@/components/tables/RuiTableErrorState.vue';\nimport RuiTableLoadingState from '@/components/tables/RuiTableLoadingState.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface TableEmpty {\n  label?: string;\n  description?: string;\n}\n\nexport interface Props {\n  variant?: 'default' | 'outlined';\n  dense?: boolean;\n  /** Shows a spinner under the header while a read is in flight. */\n  loading?: boolean;\n  /** Why the last read failed, which takes precedence over `empty`. */\n  error?: string;\n  /** Heading for that failure. */\n  errorTitle?: string;\n  /** Label for the retry control; without one, no control is offered. */\n  retryText?: string;\n  /**\n   * Says the table is knowingly empty. A table whose rows simply have not\n   * arrived should stay `loading` instead, so the two never read alike.\n   */\n  empty?: TableEmpty | boolean;\n}\n\ndefineOptions({\n  name: 'RuiTable',\n  inheritAttrs: false,\n});\n\nconst {\n  variant = 'outlined',\n  dense = false,\n  loading = false,\n  error = '',\n  errorTitle = '',\n  retryText = '',\n  empty = false,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  retry: [];\n}>();\n\ndefineSlots<{\n  default: () => any;\n  loading?: () => any;\n  error?: () => any;\n  empty?: () => any;\n}>();\n\n/**\n * The three states are mutually exclusive, and a failed read outranks an empty\n * one: rows that did not arrive are not rows that are not there.\n */\nconst state = computed<'loading' | 'error' | 'empty' | undefined>(() => {\n  if (loading)\n    return 'loading';\n\n  if (error)\n    return 'error';\n\n  if (empty)\n    return 'empty';\n\n  return undefined;\n});\n\nconst emptyProps = computed<TableEmpty>(() => (typeof empty === 'object' ? empty : {}));\n\n/**\n * Every rule that lands on a `th` or a `td` wraps the `&` in `:where()`, which\n * compiles to `:where(.generated-class) th` and so carries the specificity of\n * the element alone. A consumer writing `class=\"p-0\"` on one cell is a single\n * class, which outranks that, so a one-off override needs no `!important` the\n * way a plain `[&_th]:` rule would.\n */\nconst tableStyles = tv({\n  slots: {\n    root: 'w-full overflow-y-auto',\n    // matches RuiDataTable: text color, 13px header labels, body text, cell padding and row dividers\n    table: [\n      'w-full text-rui-text',\n      '[:where(&)_thead]:border-b [:where(&)_thead]:border-rui-divider',\n      '[:where(&)_thead_th]:font-medium [:where(&)_thead_th]:text-rui-text-secondary [:where(&)_thead_th]:text-start',\n      '[:where(&)_thead_th]:text-[0.8125rem] [:where(&)_thead_th]:leading-5',\n      '[:where(&)_th]:px-4 [:where(&)_td]:px-4 [:where(&)_td]:text-body-2',\n      '[:where(&)_tbody>tr+tr]:border-t [:where(&)_tbody>tr+tr]:border-rui-divider',\n      '[:where(&)_tbody_td]:border-b-0',\n    ],\n  },\n  variants: {\n    variant: {\n      default: {},\n      outlined: {\n        root: 'border rounded-rui-panel border-rui-divider',\n      },\n    },\n    // the data table's heights: a 40px header over 44px rows, or 32px over 36px when dense\n    dense: {\n      true: {\n        table: '[:where(&)_th]:py-0.5 [:where(&)_th]:h-8 [:where(&)_td]:py-1 [:where(&)_td]:h-9',\n      },\n      false: {\n        table: '[:where(&)_th]:py-1 [:where(&)_th]:h-10 [:where(&)_td]:py-1 [:where(&)_td]:h-11',\n      },\n    },\n  },\n});\n\nconst ui = computed<ReturnType<typeof tableStyles>>(() => tableStyles({ dense, variant }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    v-bind=\"$attrs\"\n  >\n    <table :class=\"ui.table()\">\n      <slot />\n    </table>\n\n    <slot\n      v-if=\"state === 'loading'\"\n      name=\"loading\"\n    >\n      <RuiTableLoadingState compact />\n    </slot>\n\n    <slot\n      v-else-if=\"state === 'error'\"\n      name=\"error\"\n    >\n      <RuiTableErrorState\n        :action-text=\"retryText\"\n        :message=\"error\"\n        :title=\"errorTitle\"\n        @action=\"emit('retry')\"\n      />\n    </slot>\n\n    <slot\n      v-else-if=\"state === 'empty'\"\n      name=\"empty\"\n    >\n      <RuiTableEmptyState\n        compact\n        :description=\"emptyProps.description\"\n        :label=\"emptyProps.label\"\n      />\n    </slot>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6CA,MAAM,OAAO;;;;;EAeb,MAAM,QAAQ,eAA0D;GACtE,IAAI,QAAA,SACF,OAAO;GAET,IAAI,QAAA,OACF,OAAO;GAET,IAAI,QAAA,OACF,OAAO;EAGX,CAAC;EAED,MAAM,aAAa,eAA4B,OAAO,QAAA,UAAU,WAAW,QAAA,QAAQ,CAAC,CAAE;;;;;;;;EAStF,MAAM,cAAc,GAAG;GACrB,OAAO;IACL,MAAM;IAEN,OAAO;KACL;KACA;KACA;KACA;KACA;KACA;KACA;IACF;GACF;GACA,UAAU;IACR,SAAS;KACP,SAAS,CAAC;KACV,UAAU,EACR,MAAM,8CACR;IACF;IAEA,OAAO;KACL,MAAM,EACJ,OAAO,kFACT;KACA,OAAO,EACL,OAAO,kFACT;IACF;GACF;EACF,CAAC;EAED,MAAM,KAAK,eAA+C,YAAY;GAAE,OAAI,QAAA;GAAG,SAAM,QAAA;EAAE,CAAC,CAAC;;GAIvF,OAAAC,UAAA,GAAAC,mBAqCM,OArCNC,WAqCM,EApCH,OAAO,GAAA,MAAG,KAAI,EACPH,GAAAA,KAAAA,MAAM,GAAA,CAEdI,mBAEQ,SAAA,EAFA,OAAKC,eAAE,GAAA,MAAG,MAAK,CAAA,EAAA,GAAA,CACrBC,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,GAIF,MAAA,UAAK,YADbA,WAKO,KAAA,QAAA,WAAA,CAAA,SAAA,CADLC,YAAgCC,8BAAA,EAAV,SAAA,GAAO,CAAA,CAAA,GAAA,KAAA,GAAA,CAAA,IAIlB,MAAA,UAAK,UADlBF,WAUO,KAAA,QAAA,SAAA,CAAA,SAAA,CANLC,YAKEE,4BAAA;IAJC,eAAa,QAAA;IACb,SAAS,QAAA;IACT,OAAO,QAAA;IACP,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,OAAA;;;;;GAKJ,CAAA,CAAA,GAAA,KAAA,GAAA,CAAA,IAAA,MAAA,UAAK,UADlBH,WASO,KAAA,QAAA,SAAA,CAAA,SAAA,CALLC,YAIEG,4BAAA;IAHA,SAAA;IACC,aAAa,WAAA,MAAW;IACxB,OAAO,WAAA,MAAW"}
+{"version":3,"file":"RuiTable.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createElementBlock","_mergeProps","_createElementVNode","_normalizeClass","_renderSlot","_createVNode","RuiTableLoadingState","RuiTableErrorState","RuiTableEmptyState","_createCommentVNode"],"sources":["../../../src/components/tables/RuiTable.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport RuiTableEmptyState from '@/components/tables/RuiTableEmptyState.vue';\nimport RuiTableErrorState from '@/components/tables/RuiTableErrorState.vue';\nimport RuiTableLoadingState from '@/components/tables/RuiTableLoadingState.vue';\nimport { tableStyles } from './table-styles';\n\nexport interface TableEmpty {\n  label?: string;\n  description?: string;\n}\n\nexport interface Props {\n  variant?: 'default' | 'outlined';\n  dense?: boolean;\n  /** Shows a spinner under the header while a read is in flight. */\n  loading?: boolean;\n  /** Why the last read failed, which takes precedence over `empty`. */\n  error?: string;\n  /** Heading for that failure. */\n  errorTitle?: string;\n  /** Label for the retry control; without one, no control is offered. */\n  retryText?: string;\n  /**\n   * Says the table is knowingly empty. A table whose rows simply have not\n   * arrived should stay `loading` instead, so the two never read alike.\n   */\n  empty?: TableEmpty | boolean;\n}\n\ndefineOptions({\n  name: 'RuiTable',\n  inheritAttrs: false,\n});\n\nconst {\n  variant = 'outlined',\n  dense = false,\n  loading = false,\n  error = '',\n  errorTitle = '',\n  retryText = '',\n  empty = false,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  retry: [];\n}>();\n\ndefineSlots<{\n  default: () => any;\n  loading?: () => any;\n  error?: () => any;\n  empty?: () => any;\n}>();\n\n/**\n * The three states are mutually exclusive, and a failed read outranks an empty\n * one: rows that did not arrive are not rows that are not there.\n */\nconst state = computed<'loading' | 'error' | 'empty' | undefined>(() => {\n  if (loading)\n    return 'loading';\n\n  if (error)\n    return 'error';\n\n  if (empty)\n    return 'empty';\n\n  return undefined;\n});\n\nconst emptyProps = computed<TableEmpty>(() => (typeof empty === 'object' ? empty : {}));\n\nconst ui = computed<ReturnType<typeof tableStyles>>(() => tableStyles({ dense, variant }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    v-bind=\"$attrs\"\n  >\n    <table :class=\"ui.table()\">\n      <slot />\n    </table>\n\n    <slot\n      v-if=\"state === 'loading'\"\n      name=\"loading\"\n    >\n      <RuiTableLoadingState compact />\n    </slot>\n\n    <slot\n      v-else-if=\"state === 'error'\"\n      name=\"error\"\n    >\n      <RuiTableErrorState\n        :action-text=\"retryText\"\n        :message=\"error\"\n        :title=\"errorTitle\"\n        @action=\"emit('retry')\"\n      />\n    </slot>\n\n    <slot\n      v-else-if=\"state === 'empty'\"\n      name=\"empty\"\n    >\n      <RuiTableEmptyState\n        compact\n        :description=\"emptyProps.description\"\n        :label=\"emptyProps.label\"\n      />\n    </slot>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6CA,MAAM,OAAO;;;;;EAeb,MAAM,QAAQ,eAA0D;GACtE,IAAI,QAAA,SACF,OAAO;GAET,IAAI,QAAA,OACF,OAAO;GAET,IAAI,QAAA,OACF,OAAO;EAGX,CAAC;EAED,MAAM,aAAa,eAA4B,OAAO,QAAA,UAAU,WAAW,QAAA,QAAQ,CAAC,CAAE;EAEtF,MAAM,KAAK,eAA+C,YAAY;GAAE,OAAI,QAAA;GAAG,SAAM,QAAA;EAAE,CAAC,CAAC;;GAIvF,OAAAC,UAAA,GAAAC,mBAqCM,OArCNC,WAqCM,EApCH,OAAO,GAAA,MAAG,KAAI,EACPH,GAAAA,KAAAA,MAAM,GAAA,CAEdI,mBAEQ,SAAA,EAFA,OAAKC,eAAE,GAAA,MAAG,MAAK,CAAA,EAAA,GAAA,CACrBC,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,GAIF,MAAA,UAAK,YADbA,WAKO,KAAA,QAAA,WAAA,CAAA,SAAA,CADLC,YAAgCC,8BAAA,EAAV,SAAA,GAAO,CAAA,CAAA,GAAA,KAAA,GAAA,CAAA,IAIlB,MAAA,UAAK,UADlBF,WAUO,KAAA,QAAA,SAAA,CAAA,SAAA,CANLC,YAKEE,4BAAA;IAJC,eAAa,QAAA;IACb,SAAS,QAAA;IACT,OAAO,QAAA;IACP,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,OAAA;;;;;GAKJ,CAAA,CAAA,GAAA,KAAA,GAAA,CAAA,IAAA,MAAA,UAAK,UADlBH,WASO,KAAA,QAAA,SAAA,CAAA,SAAA,CALLC,YAIEG,4BAAA;IAHA,SAAA;IACC,aAAa,WAAA,MAAW;IACxB,OAAO,WAAA,MAAW"}

package/dist/components/tables/RuiTableEmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTableEmptyState.js","names":["_sfc_main"],"sources":["../../../src/components/tables/RuiTableEmptyState.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useRotkiTheme } from '@/composables/theme';\nimport { tv } from '@/utils/tv';\nimport noDataPlaceholder from './table_no_data_placeholder.svg';\nimport noDataPlaceholderDark from './table_no_data_placeholder_dark.svg';\n\nexport interface TableEmptyStateProps {\n  label?: string;\n  description?: string;\n  /**\n   * Drops the illustration and the reserved height, for a table that only has\n   * room to say the row count is zero.\n   */\n  compact?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTableEmptyState',\n});\n\nconst { label, description, compact = false } = defineProps<TableEmptyStateProps>();\n\ndefineSlots<{\n  description?: () => any;\n}>();\n\nconst { isDark } = useRotkiTheme();\n\nconst emptyStyles = tv({\n  slots: {\n    root: 'flex flex-col items-center justify-center flex-1',\n    title: 'text-body-1 font-semibold text-center text-current pb-0 mb-0',\n    subtitle: 'text-body-2 text-center text-rui-text-secondary pb-0 mb-0',\n  },\n  variants: {\n    compact: {\n      true: {\n        root: 'gap-1 py-6',\n        title: 'font-normal text-rui-text-secondary',\n      },\n      false: {\n        root: 'gap-3 min-h-56 my-4',\n      },\n    },\n  },\n});\n\nconst ui = computed<ReturnType<typeof emptyStyles>>(() => emptyStyles({ compact }));\n</script>\n\n<template>\n  <div :class=\"ui.root()\">\n    <img\n      v-if=\"!compact\"\n      :src=\"isDark ? noDataPlaceholderDark : noDataPlaceholder\"\n      :alt=\"label\"\n      class=\"h-32\"\n    />\n    <p\n      v-if=\"label\"\n      :class=\"ui.title()\"\n      data-id=\"empty-label\"\n    >\n      {{ label }}\n    </p>\n    <slot name=\"description\">\n      <p\n        v-if=\"description\"\n        :class=\"ui.subtitle()\"\n        data-id=\"empty-description\"\n      >\n        {{ description }}\n      </p>\n    </slot>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiTableEmptyState.js","names":["_sfc_main"],"sources":["../../../src/components/tables/RuiTableEmptyState.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useRotkiTheme } from '@/composables/theme';\nimport { emptyStyles } from './table-empty-state-styles';\nimport noDataPlaceholder from './table_no_data_placeholder.svg';\nimport noDataPlaceholderDark from './table_no_data_placeholder_dark.svg';\n\nexport interface TableEmptyStateProps {\n  label?: string;\n  description?: string;\n  /**\n   * Drops the illustration and the reserved height, for a table that only has\n   * room to say the row count is zero.\n   */\n  compact?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTableEmptyState',\n});\n\nconst { label, description, compact = false } = defineProps<TableEmptyStateProps>();\n\ndefineSlots<{\n  description?: () => any;\n}>();\n\nconst { isDark } = useRotkiTheme();\n\nconst ui = computed<ReturnType<typeof emptyStyles>>(() => emptyStyles({ compact }));\n</script>\n\n<template>\n  <div :class=\"ui.root()\">\n    <img\n      v-if=\"!compact\"\n      :src=\"isDark ? noDataPlaceholderDark : noDataPlaceholder\"\n      :alt=\"label\"\n      class=\"h-32\"\n    />\n    <p\n      v-if=\"label\"\n      :class=\"ui.title()\"\n      data-id=\"empty-label\"\n    >\n      {{ label }}\n    </p>\n    <slot name=\"description\">\n      <p\n        v-if=\"description\"\n        :class=\"ui.subtitle()\"\n        data-id=\"empty-description\"\n      >\n        {{ description }}\n      </p>\n    </slot>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/tables/RuiTableEmptyState.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,5 @@
 import { useRotkiTheme } from "../../composables/theme.js";
-import { tv } from "../../utils/tv.js";
+import { emptyStyles } from "./table-empty-state-styles.js";
 import table_no_data_placeholder_default from "./table_no_data_placeholder.js";
 import table_no_data_placeholder_dark_default from "./table_no_data_placeholder_dark.js";
 import { computed, createCommentVNode, createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref } from "vue";
@@ -18,20 +18,6 @@ var RuiTableEmptyState_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 	},
 	setup(__props) {
 		const { isDark } = useRotkiTheme();
-		const emptyStyles = tv({
-			slots: {
-				root: "flex flex-col items-center justify-center flex-1",
-				title: "text-body-1 font-semibold text-center text-current pb-0 mb-0",
-				subtitle: "text-body-2 text-center text-rui-text-secondary pb-0 mb-0"
-			},
-			variants: { compact: {
-				true: {
-					root: "gap-1 py-6",
-					title: "font-normal text-rui-text-secondary"
-				},
-				false: { root: "gap-3 min-h-56 my-4" }
-			} }
-		});
 		const ui = computed(() => emptyStyles({ compact: __props.compact }));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(ui).root()) }, [

package/dist/components/tables/RuiTableEmptyState.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTableEmptyState.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","noDataPlaceholderDark","noDataPlaceholder","_createCommentVNode","_toDisplayString","_renderSlot"],"sources":["../../../src/components/tables/RuiTableEmptyState.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useRotkiTheme } from '@/composables/theme';\nimport { tv } from '@/utils/tv';\nimport noDataPlaceholder from './table_no_data_placeholder.svg';\nimport noDataPlaceholderDark from './table_no_data_placeholder_dark.svg';\n\nexport interface TableEmptyStateProps {\n  label?: string;\n  description?: string;\n  /**\n   * Drops the illustration and the reserved height, for a table that only has\n   * room to say the row count is zero.\n   */\n  compact?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTableEmptyState',\n});\n\nconst { label, description, compact = false } = defineProps<TableEmptyStateProps>();\n\ndefineSlots<{\n  description?: () => any;\n}>();\n\nconst { isDark } = useRotkiTheme();\n\nconst emptyStyles = tv({\n  slots: {\n    root: 'flex flex-col items-center justify-center flex-1',\n    title: 'text-body-1 font-semibold text-center text-current pb-0 mb-0',\n    subtitle: 'text-body-2 text-center text-rui-text-secondary pb-0 mb-0',\n  },\n  variants: {\n    compact: {\n      true: {\n        root: 'gap-1 py-6',\n        title: 'font-normal text-rui-text-secondary',\n      },\n      false: {\n        root: 'gap-3 min-h-56 my-4',\n      },\n    },\n  },\n});\n\nconst ui = computed<ReturnType<typeof emptyStyles>>(() => emptyStyles({ compact }));\n</script>\n\n<template>\n  <div :class=\"ui.root()\">\n    <img\n      v-if=\"!compact\"\n      :src=\"isDark ? noDataPlaceholderDark : noDataPlaceholder\"\n      :alt=\"label\"\n      class=\"h-32\"\n    />\n    <p\n      v-if=\"label\"\n      :class=\"ui.title()\"\n      data-id=\"empty-label\"\n    >\n      {{ label }}\n    </p>\n    <slot name=\"description\">\n      <p\n        v-if=\"description\"\n        :class=\"ui.subtitle()\"\n        data-id=\"empty-description\"\n      >\n        {{ description }}\n      </p>\n    </slot>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EA0BA,MAAM,EAAE,WAAW,cAAc;EAEjC,MAAM,cAAc,GAAG;GACrB,OAAO;IACL,MAAM;IACN,OAAO;IACP,UAAU;GACZ;GACA,UAAU,EACR,SAAS;IACP,MAAM;KACJ,MAAM;KACN,OAAO;IACT;IACA,OAAO,EACL,MAAM,sBACR;GACF,EACF;EACF,CAAC;EAED,MAAM,KAAK,eAA+C,YAAY,EAAE,SAAM,QAAA,QAAE,CAAC,CAAC;;GAIhF,OAAAA,UAAA,GAAAC,mBAuBM,OAAA,EAvBA,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,KAAI,CAAA,EAAA,GAAA;IAET,CAAA,QAAA,WADTH,UAAA,GAAAC,mBAKE,OAAA;;KAHC,KAAKE,MAAA,MAAA,IAASA,MAAAC,sCAAA,IAAwBD,MAAAE,iCAAA;KACtC,KAAK,QAAA;KACN,OAAM;;IAGA,QAAA,SADRL,UAAA,GAAAC,mBAMI,KAAA;;KAJD,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;KAChB,WAAQ;IAEL,GAAAI,gBAAA,QAAA,KAAK,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAEVC,WAQO,KAAA,QAAA,eAAA,CAAA,SAAA,CANG,QAAA,eADRR,UAAA,GAAAC,mBAMI,KAAA;;KAJD,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,SAAQ,CAAA;KACnB,WAAQ;IAEL,GAAAI,gBAAA,QAAA,WAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}
+{"version":3,"file":"RuiTableEmptyState.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","noDataPlaceholderDark","noDataPlaceholder","_createCommentVNode","_toDisplayString","_renderSlot"],"sources":["../../../src/components/tables/RuiTableEmptyState.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useRotkiTheme } from '@/composables/theme';\nimport { emptyStyles } from './table-empty-state-styles';\nimport noDataPlaceholder from './table_no_data_placeholder.svg';\nimport noDataPlaceholderDark from './table_no_data_placeholder_dark.svg';\n\nexport interface TableEmptyStateProps {\n  label?: string;\n  description?: string;\n  /**\n   * Drops the illustration and the reserved height, for a table that only has\n   * room to say the row count is zero.\n   */\n  compact?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTableEmptyState',\n});\n\nconst { label, description, compact = false } = defineProps<TableEmptyStateProps>();\n\ndefineSlots<{\n  description?: () => any;\n}>();\n\nconst { isDark } = useRotkiTheme();\n\nconst ui = computed<ReturnType<typeof emptyStyles>>(() => emptyStyles({ compact }));\n</script>\n\n<template>\n  <div :class=\"ui.root()\">\n    <img\n      v-if=\"!compact\"\n      :src=\"isDark ? noDataPlaceholderDark : noDataPlaceholder\"\n      :alt=\"label\"\n      class=\"h-32\"\n    />\n    <p\n      v-if=\"label\"\n      :class=\"ui.title()\"\n      data-id=\"empty-label\"\n    >\n      {{ label }}\n    </p>\n    <slot name=\"description\">\n      <p\n        v-if=\"description\"\n        :class=\"ui.subtitle()\"\n        data-id=\"empty-description\"\n      >\n        {{ description }}\n      </p>\n    </slot>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EA0BA,MAAM,EAAE,WAAW,cAAc;EAEjC,MAAM,KAAK,eAA+C,YAAY,EAAE,SAAM,QAAA,QAAE,CAAC,CAAC;;GAIhF,OAAAA,UAAA,GAAAC,mBAuBM,OAAA,EAvBA,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,KAAI,CAAA,EAAA,GAAA;IAET,CAAA,QAAA,WADTH,UAAA,GAAAC,mBAKE,OAAA;;KAHC,KAAKE,MAAA,MAAA,IAASA,MAAAC,sCAAA,IAAwBD,MAAAE,iCAAA;KACtC,KAAK,QAAA;KACN,OAAM;;IAGA,QAAA,SADRL,UAAA,GAAAC,mBAMI,KAAA;;KAJD,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;KAChB,WAAQ;IAEL,GAAAI,gBAAA,QAAA,KAAK,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAEVC,WAQO,KAAA,QAAA,eAAA,CAAA,SAAA,CANG,QAAA,eADRR,UAAA,GAAAC,mBAMI,KAAA;;KAJD,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,SAAQ,CAAA;KACnB,WAAQ;IAEL,GAAAI,gBAAA,QAAA,WAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}

package/dist/components/tables/RuiTableErrorState.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTableErrorState.js","names":["_sfc_main"],"sources":["../../../src/components/tables/RuiTableErrorState.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiAlert from '@/components/alerts/RuiAlert.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface TableErrorStateProps {\n  /** Heading for the failure, such as which read it was. */\n  title?: string;\n  /** What went wrong, in the words the caller got back. */\n  message?: string;\n  /**\n   * Label for the retry control. The library ships no translations, so a\n   * caller that wants the control has to name it; leaving this empty renders\n   * the reason on its own.\n   */\n  actionText?: string;\n}\n\ndefineOptions({\n  name: 'RuiTableErrorState',\n});\n\nconst { title = '', message = '', actionText = '' } = defineProps<TableErrorStateProps>();\n\nconst emit = defineEmits<{\n  action: [];\n}>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\n/**\n * Centred and capped, like the loading and empty states beside it. Left to\n * span the table, a wide one puts the reason hard left and the retry hard\n * right, with the whole width between them.\n */\nconst errorStyles = tv({\n  slots: {\n    root: 'flex justify-center p-4',\n    alert: 'w-full max-w-2xl',\n  },\n});\n\nconst ui = errorStyles();\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    data-id=\"table-error\"\n  >\n    <RuiAlert\n      :action-text=\"actionText\"\n      :class=\"ui.alert()\"\n      :title=\"title\"\n      type=\"error\"\n      @action=\"emit('action')\"\n    >\n      <slot>\n        {{ message }}\n      </slot>\n    </RuiAlert>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiTableErrorState.js","names":["_sfc_main"],"sources":["../../../src/components/tables/RuiTableErrorState.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiAlert from '@/components/alerts/RuiAlert.vue';\nimport { errorStyles } from './table-error-state-styles';\n\nexport interface TableErrorStateProps {\n  /** Heading for the failure, such as which read it was. */\n  title?: string;\n  /** What went wrong, in the words the caller got back. */\n  message?: string;\n  /**\n   * Label for the retry control. The library ships no translations, so a\n   * caller that wants the control has to name it; leaving this empty renders\n   * the reason on its own.\n   */\n  actionText?: string;\n}\n\ndefineOptions({\n  name: 'RuiTableErrorState',\n});\n\nconst { title = '', message = '', actionText = '' } = defineProps<TableErrorStateProps>();\n\nconst emit = defineEmits<{\n  action: [];\n}>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst ui = errorStyles();\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    data-id=\"table-error\"\n  >\n    <RuiAlert\n      :action-text=\"actionText\"\n      :class=\"ui.alert()\"\n      :title=\"title\"\n      type=\"error\"\n      @action=\"emit('action')\"\n    >\n      <slot>\n        {{ message }}\n      </slot>\n    </RuiAlert>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/tables/RuiTableErrorState.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,5 @@
-import { tv } from "../../utils/tv.js";
 import RuiAlert_default from "../alerts/RuiAlert.js";
+import { errorStyles } from "./table-error-state-styles.js";
 import { createElementBlock, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
 //#region src/components/tables/RuiTableErrorState.vue?vue&type=script&setup=true&lang.ts
 var RuiTableErrorState_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -13,10 +13,7 @@ var RuiTableErrorState_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 	emits: ["action"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
-		const ui = tv({ slots: {
-			root: "flex justify-center p-4",
-			alert: "w-full max-w-2xl"
-		} })();
+		const ui = errorStyles();
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
 				class: normalizeClass(unref(ui).root()),

package/dist/components/tables/RuiTableErrorState.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTableErrorState.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_createVNode","RuiAlert","_withCtx","_renderSlot","_createTextVNode","_toDisplayString"],"sources":["../../../src/components/tables/RuiTableErrorState.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiAlert from '@/components/alerts/RuiAlert.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface TableErrorStateProps {\n  /** Heading for the failure, such as which read it was. */\n  title?: string;\n  /** What went wrong, in the words the caller got back. */\n  message?: string;\n  /**\n   * Label for the retry control. The library ships no translations, so a\n   * caller that wants the control has to name it; leaving this empty renders\n   * the reason on its own.\n   */\n  actionText?: string;\n}\n\ndefineOptions({\n  name: 'RuiTableErrorState',\n});\n\nconst { title = '', message = '', actionText = '' } = defineProps<TableErrorStateProps>();\n\nconst emit = defineEmits<{\n  action: [];\n}>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\n/**\n * Centred and capped, like the loading and empty states beside it. Left to\n * span the table, a wide one puts the reason hard left and the retry hard\n * right, with the whole width between them.\n */\nconst errorStyles = tv({\n  slots: {\n    root: 'flex justify-center p-4',\n    alert: 'w-full max-w-2xl',\n  },\n});\n\nconst ui = errorStyles();\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    data-id=\"table-error\"\n  >\n    <RuiAlert\n      :action-text=\"actionText\"\n      :class=\"ui.alert()\"\n      :title=\"title\"\n      type=\"error\"\n      @action=\"emit('action')\"\n    >\n      <slot>\n        {{ message }}\n      </slot>\n    </RuiAlert>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAuBA,MAAM,OAAO;EAoBb,MAAM,KAPc,GAAG,EACrB,OAAO;GACL,MAAM;GACN,OAAO;EACT,EACF,CAEW,CAAA,CAAY;;GAIrB,OAAAA,UAAA,GAAAC,mBAeM,OAAA;IAdH,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,KAAI,CAAA;IACf,WAAQ;GAERC,GAAAA,CAAAA,YAUWC,kBAAA;IATR,eAAa,QAAA;IACb,OAAKH,eAAEC,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;IACf,OAAO,QAAA;IACR,MAAK;IACJ,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,QAAA;;IAEb,SAAAG,cAEO,CAFPC,WAEO,KAAA,QAAA,WAAA,CAAA,SAAA,CADFC,gBAAAC,gBAAA,QAAA,OAAO,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"RuiTableErrorState.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_createVNode","RuiAlert","_withCtx","_renderSlot","_createTextVNode","_toDisplayString"],"sources":["../../../src/components/tables/RuiTableErrorState.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiAlert from '@/components/alerts/RuiAlert.vue';\nimport { errorStyles } from './table-error-state-styles';\n\nexport interface TableErrorStateProps {\n  /** Heading for the failure, such as which read it was. */\n  title?: string;\n  /** What went wrong, in the words the caller got back. */\n  message?: string;\n  /**\n   * Label for the retry control. The library ships no translations, so a\n   * caller that wants the control has to name it; leaving this empty renders\n   * the reason on its own.\n   */\n  actionText?: string;\n}\n\ndefineOptions({\n  name: 'RuiTableErrorState',\n});\n\nconst { title = '', message = '', actionText = '' } = defineProps<TableErrorStateProps>();\n\nconst emit = defineEmits<{\n  action: [];\n}>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst ui = errorStyles();\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    data-id=\"table-error\"\n  >\n    <RuiAlert\n      :action-text=\"actionText\"\n      :class=\"ui.alert()\"\n      :title=\"title\"\n      type=\"error\"\n      @action=\"emit('action')\"\n    >\n      <slot>\n        {{ message }}\n      </slot>\n    </RuiAlert>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAuBA,MAAM,OAAO;EAQb,MAAM,KAAK,YAAY;;GAIrB,OAAAA,UAAA,GAAAC,mBAeM,OAAA;IAdH,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,KAAI,CAAA;IACf,WAAQ;GAERC,GAAAA,CAAAA,YAUWC,kBAAA;IATR,eAAa,QAAA;IACb,OAAKH,eAAEC,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;IACf,OAAO,QAAA;IACR,MAAK;IACJ,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,QAAA;;IAEb,SAAAG,cAEO,CAFPC,WAEO,KAAA,QAAA,WAAA,CAAA,SAAA,CADFC,gBAAAC,gBAAA,QAAA,OAAO,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/tables/RuiTableHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTableHead.js","names":["_sfc_main"],"sources":["../../../src/components/tables/RuiTableHead.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object, K extends keyof T = keyof T\">\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiCheckbox from '@/components/forms/checkbox/RuiCheckbox.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { NESTED_BAR } from '@/components/tables/data-table-styles';\nimport { getAlignClass, getSortButtonAlignClass, SortDirection, TableAlign } from '@/components/tables/table-props';\nimport { tv } from '@/utils/tv';\n\n/**\n * A sortable column name for `T`, the type of the data in the column: the name\n * must be a key of that object type.\n */\nexport type TableRowKey<T> = keyof T extends string ? keyof T : never;\n\nexport interface BaseTableColumn<T> {\n  key: TableRowKey<T> | string;\n  sortable?: boolean;\n  direction?: SortDirection;\n  align?: TableAlign;\n  class?: string;\n  cellClass?: string;\n  tdClass?: string;\n  colspan?: string | number;\n  rowspan?: string | number;\n  /**\n   * hide this column when the table is rendered in its stacked mobile layout\n   */\n  mobileHidden?: boolean;\n  /**\n   * pin this column to the card header (top row) in the stacked mobile layout\n   * instead of rendering it as a label/value pair. Intended for action columns\n   * such as an overflow menu. Ignored on non-mobile layouts.\n   */\n  mobileHeader?: boolean;\n\n  [key: string]: any;\n}\n\n/**\n * A sortable table column, which ties `sortable: true` to a key that is a real\n * property of `T`, the type of data in the table.\n */\nexport interface SortableTableColumn<T> extends BaseTableColumn<T> {\n  sortable: true;\n}\n\n/**\n * An interface representing a column in a table that cannot be sorted.\n * This can be mapped to an actual property of the object or to a virtual column.\n *\n * @typeparam T - The type of data in the table.\n */\nexport interface NoneSortableTableColumn<T> extends BaseTableColumn<T> {\n  sortable?: false;\n}\n\nexport type TableColumn<T> = SortableTableColumn<T> | NoneSortableTableColumn<T>;\n\nexport interface SortColumn<T> {\n  column?: TableRowKey<T>;\n  direction: SortDirection;\n}\n\nexport type TableSortData<T> = SortColumn<T> | SortColumn<T>[] | undefined;\n\nexport type TableRowKeyData<T> = TableRowKey<T> | TableRowKey<T>[] | undefined;\n\nexport interface GroupData<T> {\n  key: string;\n  value?: Partial<T>;\n}\n\nexport type GroupKey<T> = TableColumn<T>['key'];\n\nexport type GroupKeys<T> = GroupKey<T> | GroupKey<T>[] | undefined;\n\nexport interface Props<T> {\n  loading?: boolean;\n  stickyHeader?: boolean;\n  stick?: boolean;\n  selectable?: boolean;\n  disableCheckAll?: boolean;\n  colspan?: number;\n  columns?: TableColumn<T>[];\n  capitalizeHeaders?: boolean;\n  isAllSelected?: boolean;\n  indeterminate?: boolean;\n  dense?: boolean;\n  sortedMap?: Partial<Record<TableRowKey<T>, SortColumn<T>>>;\n  sortData?: TableSortData<T>;\n  columnAttr?: keyof TableColumn<T>;\n  dataId?: string;\n}\n\nconst {\n  loading = false,\n  stickyHeader = false,\n  stick = false,\n  selectable = false,\n  disableCheckAll = false,\n  colspan = 0,\n  columns,\n  capitalizeHeaders = false,\n  isAllSelected = false,\n  indeterminate = false,\n  dense = false,\n  sortedMap = {} as Partial<Record<TableRowKey<T>, SortColumn<T>>>,\n  columnAttr = 'label',\n  sortData,\n  dataId = 'head-main',\n} = defineProps<Props<T>>();\n\nconst emit = defineEmits<{\n  'select:all': [value: boolean];\n  'sort': [value: { key: TableRowKey<T>; direction?: SortDirection }];\n}>();\n\nconst tableHeadStyles = tv({\n  slots: {\n    thead: 'between:border-t between:border-b-0 between:border-rui-divider',\n    checkbox: `px-2 w-14.5 max-w-14.5 [&_label]:ml-0 bg-rui-surface-muted ${NESTED_BAR}`,\n    // tinted like the pagination bar, framing the body; opaque, so rows scroll behind a stuck header\n    th: `[:where(&)]:px-4 bg-rui-surface-muted ${NESTED_BAR}`,\n    // labels read as secondary to the data; the sorted column's label steps up to primary\n    columnText: 'text-rui-text-secondary font-medium text-[0.8125rem] leading-5',\n    // the negative margin cancels the button's own padding so the label lines up with the cells below\n    sortButton: 'inline-flex group/sort -mx-1.5',\n    // a resting icon marks sortable columns for keyboard and touch users, at 3:1 on a nested table's darker header\n    sortIcon: 'transition opacity-75 group-hover/sort:opacity-100 group-focus-visible/sort:opacity-100',\n    // tucked against the arrow, closer than the button's gap\n    sortPosition: 'text-[0.6875rem] leading-none font-semibold tabular-nums text-rui-text-secondary',\n    /*\n     * The row is always there and only its bar comes and goes: a collapsed-border table gives even a\n     * zero-height row half a pixel, so adding the row on load pushed the body down.\n     */\n    loaderRow: 'border-none',\n    progress: 'p-0 h-0',\n    progressWrapper: 'h-0 -mt-1',\n  },\n  variants: {\n    position: {\n      default: {},\n      sticky: { thead: 'top-0 z-rui-raised absolute' },\n      fixed: {\n        thead: 'top-0 z-rui-raised fixed',\n        th: 'border-b border-b-rui-divider',\n      },\n    },\n    // a fixed height evens out rows with and without sort buttons; `:where()` lets a column's `class` win\n    dense: {\n      true: { th: '[:where(&)]:py-0.5 [:where(&)]:h-8' },\n      false: { th: '[:where(&)]:py-1 [:where(&)]:h-10' },\n    },\n  },\n  defaultVariants: {\n    position: 'default',\n    dense: false,\n  },\n});\n\nconst headerPosition = computed<'default' | 'sticky' | 'fixed'>(() => {\n  if (stickyHeader && stick)\n    return 'fixed';\n  if (stickyHeader)\n    return 'sticky';\n  return 'default';\n});\n\nconst ui = computed<ReturnType<typeof tableHeadStyles>>(() => tableHeadStyles({\n  position: get(headerPosition),\n  dense,\n}));\n\nfunction getSortIconClass(key: TableColumn<T>['key']): string | undefined {\n  if (!isSortedBy(key))\n    return undefined;\n  const direction = getSortDirection(key);\n  return `opacity-100! ${direction === SortDirection.asc ? 'rotate-180' : 'rotate-0'}`;\n}\n\n/**\n * An unsorted column shows a neutral up-down icon, so nothing reads as sorted\n * until it is; the sorted column shows its direction.\n */\nfunction getSortIconName(key: TableColumn<T>['key']): RuiIcons {\n  return isSortedBy(key) ? 'lu-arrow-down' : 'lu-arrow-up-down';\n}\n\nfunction getColumnTextClass(key: TableColumn<T>['key']): string {\n  return get(ui).columnText({ class: isSortedBy(key) ? 'text-rui-text' : undefined });\n}\n\nfunction onSort({ key, direction }: TableColumn<T>): void {\n  return emit('sort', {\n    key: key as TableRowKey<T>,\n    direction: direction ?? SortDirection.asc,\n  });\n}\n\nfunction onToggleAll(checked: boolean) {\n  return emit('select:all', checked);\n}\n\nfunction isSortedBy(key: TableColumn<T>['key']): boolean {\n  return key in sortedMap;\n}\n\nfunction getSortIndex(key: TableColumn<T>['key']): number {\n  if (!sortData || !Array.isArray(sortData) || !isSortedBy(key))\n    return -1;\n\n  return sortData.findIndex(sort => sort.column === key);\n}\n\n/**\n * A column's place in a multi-column sort, shown beside its arrow. A lone sorted column shows none,\n * since its arrow already says everything.\n */\nfunction getSortPosition(key: TableColumn<T>['key']): number | undefined {\n  if (!Array.isArray(sortData) || sortData.length < 2)\n    return undefined;\n  const index = getSortIndex(key);\n  return index >= 0 ? index + 1 : undefined;\n}\n\nfunction getSortDirection(key: TableColumn<T>['key']): SortDirection | undefined {\n  return sortedMap[key]?.direction;\n}\n\nfunction getAriaSort(column: TableColumn<T>): 'ascending' | 'descending' | 'none' | undefined {\n  if (!column.sortable)\n    return undefined;\n  const direction = getSortDirection(column.key);\n  if (direction === SortDirection.asc)\n    return 'ascending';\n  if (direction === SortDirection.desc)\n    return 'descending';\n  return 'none';\n}\n\n/**\n * The name a screen reader hears for a column drawn without a label, since an empty header cell\n * leaves the column unnamed: the built-in expand column is \"Details\", any other its key.\n *\n * @param column - the column whose label is empty\n * @returns Details or the column key\n */\nfunction getHiddenHeaderText(column: TableColumn<T>): string {\n  return column.key === 'expand' ? 'Details' : column.key.toString();\n}\n</script>\n\n<template>\n  <thead\n    :data-id=\"dataId\"\n    :class=\"ui.thead()\"\n  >\n    <tr>\n      <th\n        v-if=\"selectable\"\n        :class=\"ui.checkbox()\"\n        scope=\"col\"\n        colspan=\"1\"\n        rowspan=\"1\"\n      >\n        <RuiCheckbox\n          :disabled=\"disableCheckAll\"\n          :indeterminate=\"indeterminate\"\n          :model-value=\"isAllSelected\"\n          :size=\"dense ? 'sm' : undefined\"\n          color=\"primary\"\n          data-id=\"table-toggle-check-all\"\n          aria-label=\"Select all rows\"\n          details=\"hidden\"\n          @update:model-value=\"onToggleAll($event)\"\n        />\n      </th>\n\n      <th\n        v-for=\"column in columns\"\n        :key=\"column.key\"\n        :class=\"[\n          ui.th({ class: getAlignClass(column.align) }),\n          column.class,\n          // only labels the table made up from row keys; a label the consumer wrote is shown as written\n          { capitalize: capitalizeHeaders },\n        ]\"\n        scope=\"col\"\n        :colspan=\"column.colspan ?? 1\"\n        :rowspan=\"column.rowspan ?? 1\"\n        :aria-sort=\"getAriaSort(column)\"\n        :data-id=\"column.sortable ? 'column-sortable' : undefined\"\n      >\n        <slot\n          :column=\"column\"\n          :name=\"`header.${column.key.toString()}`\"\n        >\n          <RuiButton\n            v-if=\"column.sortable\"\n            :class=\"ui.sortButton({ class: getSortButtonAlignClass(column.align) })\"\n            :data-sorted=\"isSortedBy(column.key) || undefined\"\n            :data-direction=\"getSortDirection(column.key)\"\n            size=\"sm\"\n            variant=\"text\"\n            @click=\"onSort(column)\"\n          >\n            <span\n              :class=\"getColumnTextClass(column.key)\"\n              data-id=\"column-text\"\n            >\n              <slot\n                :name=\"`header.text.${column.key.toString()}`\"\n                :column=\"column\"\n              >\n                {{ column[columnAttr] }}\n              </slot>\n            </span>\n\n            <template\n              v-if=\"column.align === TableAlign.end\"\n              #prepend\n            >\n              <span\n                v-if=\"getSortPosition(column.key)\"\n                :class=\"ui.sortPosition({ class: '-mr-1.5' })\"\n                data-id=\"sort-position\"\n              >\n                {{ getSortPosition(column.key) }}\n              </span>\n              <RuiIcon\n                :class=\"ui.sortIcon({ class: getSortIconClass(column.key) })\"\n                :name=\"getSortIconName(column.key)\"\n                size=\"18\"\n              />\n            </template>\n\n            <template #append>\n              <template v-if=\"column.align !== TableAlign.end\">\n                <RuiIcon\n                  :class=\"ui.sortIcon({ class: getSortIconClass(column.key) })\"\n                  :name=\"getSortIconName(column.key)\"\n                  size=\"18\"\n                />\n                <span\n                  v-if=\"getSortPosition(column.key)\"\n                  :class=\"ui.sortPosition({ class: '-ml-1.5' })\"\n                  data-id=\"sort-position\"\n                >\n                  {{ getSortPosition(column.key) }}\n                </span>\n              </template>\n            </template>\n          </RuiButton>\n          <span\n            v-else\n            :class=\"ui.columnText()\"\n            data-id=\"column-text\"\n          >\n            <slot\n              :name=\"`header.text.${column.key.toString()}`\"\n              :column=\"column\"\n            >\n              <template v-if=\"column[columnAttr]\">{{ column[columnAttr] }}</template>\n              <span\n                v-else\n                class=\"sr-only\"\n              >\n                {{ getHiddenHeaderText(column) }}\n              </span>\n            </slot>\n          </span>\n        </slot>\n      </th>\n    </tr>\n    <tr\n      :class=\"ui.loaderRow()\"\n      :data-id=\"loading ? 'thead-loader' : undefined\"\n      :aria-hidden=\"loading ? undefined : 'true'\"\n    >\n      <!-- a `td`, not a header cell, so it never counts as a column heading -->\n      <td\n        :class=\"ui.progress()\"\n        :colspan=\"colspan\"\n      >\n        <div\n          v-if=\"loading\"\n          :class=\"ui.progressWrapper()\"\n        >\n          <RuiProgress\n            color=\"primary\"\n            variant=\"indeterminate\"\n          />\n        </div>\n      </td>\n    </tr>\n  </thead>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiTableHead.js","names":["_sfc_main"],"sources":["../../../src/components/tables/RuiTableHead.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object, K extends keyof T = keyof T\">\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiCheckbox from '@/components/forms/checkbox/RuiCheckbox.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { getAlignClass, getSortButtonAlignClass, SortDirection, TableAlign } from '@/components/tables/table-props';\nimport { tableHeadStyles } from './table-head-styles';\n\n/**\n * A sortable column name for `T`, the type of the data in the column: the name\n * must be a key of that object type.\n */\nexport type TableRowKey<T> = keyof T extends string ? keyof T : never;\n\nexport interface BaseTableColumn<T> {\n  key: TableRowKey<T> | string;\n  sortable?: boolean;\n  direction?: SortDirection;\n  align?: TableAlign;\n  class?: string;\n  cellClass?: string;\n  tdClass?: string;\n  colspan?: string | number;\n  rowspan?: string | number;\n  /**\n   * hide this column when the table is rendered in its stacked mobile layout\n   */\n  mobileHidden?: boolean;\n  /**\n   * pin this column to the card header (top row) in the stacked mobile layout\n   * instead of rendering it as a label/value pair. Intended for action columns\n   * such as an overflow menu. Ignored on non-mobile layouts.\n   */\n  mobileHeader?: boolean;\n\n  [key: string]: any;\n}\n\n/**\n * A sortable table column, which ties `sortable: true` to a key that is a real\n * property of `T`, the type of data in the table.\n */\nexport interface SortableTableColumn<T> extends BaseTableColumn<T> {\n  sortable: true;\n}\n\n/**\n * An interface representing a column in a table that cannot be sorted.\n * This can be mapped to an actual property of the object or to a virtual column.\n *\n * @typeparam T - The type of data in the table.\n */\nexport interface NoneSortableTableColumn<T> extends BaseTableColumn<T> {\n  sortable?: false;\n}\n\nexport type TableColumn<T> = SortableTableColumn<T> | NoneSortableTableColumn<T>;\n\nexport interface SortColumn<T> {\n  column?: TableRowKey<T>;\n  direction: SortDirection;\n}\n\nexport type TableSortData<T> = SortColumn<T> | SortColumn<T>[] | undefined;\n\nexport type TableRowKeyData<T> = TableRowKey<T> | TableRowKey<T>[] | undefined;\n\nexport interface GroupData<T> {\n  key: string;\n  value?: Partial<T>;\n}\n\nexport type GroupKey<T> = TableColumn<T>['key'];\n\nexport type GroupKeys<T> = GroupKey<T> | GroupKey<T>[] | undefined;\n\nexport interface Props<T> {\n  loading?: boolean;\n  stickyHeader?: boolean;\n  stick?: boolean;\n  selectable?: boolean;\n  disableCheckAll?: boolean;\n  colspan?: number;\n  columns?: TableColumn<T>[];\n  capitalizeHeaders?: boolean;\n  isAllSelected?: boolean;\n  indeterminate?: boolean;\n  dense?: boolean;\n  sortedMap?: Partial<Record<TableRowKey<T>, SortColumn<T>>>;\n  sortData?: TableSortData<T>;\n  columnAttr?: keyof TableColumn<T>;\n  dataId?: string;\n}\n\nconst {\n  loading = false,\n  stickyHeader = false,\n  stick = false,\n  selectable = false,\n  disableCheckAll = false,\n  colspan = 0,\n  columns,\n  capitalizeHeaders = false,\n  isAllSelected = false,\n  indeterminate = false,\n  dense = false,\n  sortedMap = {} as Partial<Record<TableRowKey<T>, SortColumn<T>>>,\n  columnAttr = 'label',\n  sortData,\n  dataId = 'head-main',\n} = defineProps<Props<T>>();\n\nconst emit = defineEmits<{\n  'select:all': [value: boolean];\n  'sort': [value: { key: TableRowKey<T>; direction?: SortDirection }];\n}>();\n\nconst headerPosition = computed<'default' | 'sticky' | 'fixed'>(() => {\n  if (stickyHeader && stick)\n    return 'fixed';\n  if (stickyHeader)\n    return 'sticky';\n  return 'default';\n});\n\nconst ui = computed<ReturnType<typeof tableHeadStyles>>(() => tableHeadStyles({\n  position: get(headerPosition),\n  dense,\n}));\n\nfunction getSortIconClass(key: TableColumn<T>['key']): string | undefined {\n  if (!isSortedBy(key))\n    return undefined;\n  const direction = getSortDirection(key);\n  return `opacity-100! ${direction === SortDirection.asc ? 'rotate-180' : 'rotate-0'}`;\n}\n\n/**\n * An unsorted column shows a neutral up-down icon, so nothing reads as sorted\n * until it is; the sorted column shows its direction.\n */\nfunction getSortIconName(key: TableColumn<T>['key']): RuiIcons {\n  return isSortedBy(key) ? 'lu-arrow-down' : 'lu-arrow-up-down';\n}\n\nfunction getColumnTextClass(key: TableColumn<T>['key']): string {\n  return get(ui).columnText({ class: isSortedBy(key) ? 'text-rui-text' : undefined });\n}\n\nfunction onSort({ key, direction }: TableColumn<T>): void {\n  return emit('sort', {\n    key: key as TableRowKey<T>,\n    direction: direction ?? SortDirection.asc,\n  });\n}\n\nfunction onToggleAll(checked: boolean) {\n  return emit('select:all', checked);\n}\n\nfunction isSortedBy(key: TableColumn<T>['key']): boolean {\n  return key in sortedMap;\n}\n\nfunction getSortIndex(key: TableColumn<T>['key']): number {\n  if (!sortData || !Array.isArray(sortData) || !isSortedBy(key))\n    return -1;\n\n  return sortData.findIndex(sort => sort.column === key);\n}\n\n/**\n * A column's place in a multi-column sort, shown beside its arrow. A lone sorted column shows none,\n * since its arrow already says everything.\n */\nfunction getSortPosition(key: TableColumn<T>['key']): number | undefined {\n  if (!Array.isArray(sortData) || sortData.length < 2)\n    return undefined;\n  const index = getSortIndex(key);\n  return index >= 0 ? index + 1 : undefined;\n}\n\nfunction getSortDirection(key: TableColumn<T>['key']): SortDirection | undefined {\n  return sortedMap[key]?.direction;\n}\n\nfunction getAriaSort(column: TableColumn<T>): 'ascending' | 'descending' | 'none' | undefined {\n  if (!column.sortable)\n    return undefined;\n  const direction = getSortDirection(column.key);\n  if (direction === SortDirection.asc)\n    return 'ascending';\n  if (direction === SortDirection.desc)\n    return 'descending';\n  return 'none';\n}\n\n/**\n * The name a screen reader hears for a column drawn without a label, since an empty header cell\n * leaves the column unnamed: the built-in expand column is \"Details\", any other its key.\n *\n * @param column - the column whose label is empty\n * @returns Details or the column key\n */\nfunction getHiddenHeaderText(column: TableColumn<T>): string {\n  return column.key === 'expand' ? 'Details' : column.key.toString();\n}\n</script>\n\n<template>\n  <thead\n    :data-id=\"dataId\"\n    :class=\"ui.thead()\"\n  >\n    <tr>\n      <th\n        v-if=\"selectable\"\n        :class=\"ui.checkbox()\"\n        scope=\"col\"\n        colspan=\"1\"\n        rowspan=\"1\"\n      >\n        <RuiCheckbox\n          :disabled=\"disableCheckAll\"\n          :indeterminate=\"indeterminate\"\n          :model-value=\"isAllSelected\"\n          :size=\"dense ? 'sm' : undefined\"\n          color=\"primary\"\n          data-id=\"table-toggle-check-all\"\n          aria-label=\"Select all rows\"\n          details=\"hidden\"\n          @update:model-value=\"onToggleAll($event)\"\n        />\n      </th>\n\n      <th\n        v-for=\"column in columns\"\n        :key=\"column.key\"\n        :class=\"[\n          ui.th({ class: getAlignClass(column.align) }),\n          column.class,\n          // only labels the table made up from row keys; a label the consumer wrote is shown as written\n          { capitalize: capitalizeHeaders },\n        ]\"\n        scope=\"col\"\n        :colspan=\"column.colspan ?? 1\"\n        :rowspan=\"column.rowspan ?? 1\"\n        :aria-sort=\"getAriaSort(column)\"\n        :data-id=\"column.sortable ? 'column-sortable' : undefined\"\n      >\n        <slot\n          :column=\"column\"\n          :name=\"`header.${column.key.toString()}`\"\n        >\n          <RuiButton\n            v-if=\"column.sortable\"\n            :class=\"ui.sortButton({ class: getSortButtonAlignClass(column.align) })\"\n            :data-sorted=\"isSortedBy(column.key) || undefined\"\n            :data-direction=\"getSortDirection(column.key)\"\n            size=\"sm\"\n            variant=\"text\"\n            @click=\"onSort(column)\"\n          >\n            <span\n              :class=\"getColumnTextClass(column.key)\"\n              data-id=\"column-text\"\n            >\n              <slot\n                :name=\"`header.text.${column.key.toString()}`\"\n                :column=\"column\"\n              >\n                {{ column[columnAttr] }}\n              </slot>\n            </span>\n\n            <template\n              v-if=\"column.align === TableAlign.end\"\n              #prepend\n            >\n              <span\n                v-if=\"getSortPosition(column.key)\"\n                :class=\"ui.sortPosition({ class: '-mr-1.5' })\"\n                data-id=\"sort-position\"\n              >\n                {{ getSortPosition(column.key) }}\n              </span>\n              <RuiIcon\n                :class=\"ui.sortIcon({ class: getSortIconClass(column.key) })\"\n                :name=\"getSortIconName(column.key)\"\n                size=\"18\"\n              />\n            </template>\n\n            <template #append>\n              <template v-if=\"column.align !== TableAlign.end\">\n                <RuiIcon\n                  :class=\"ui.sortIcon({ class: getSortIconClass(column.key) })\"\n                  :name=\"getSortIconName(column.key)\"\n                  size=\"18\"\n                />\n                <span\n                  v-if=\"getSortPosition(column.key)\"\n                  :class=\"ui.sortPosition({ class: '-ml-1.5' })\"\n                  data-id=\"sort-position\"\n                >\n                  {{ getSortPosition(column.key) }}\n                </span>\n              </template>\n            </template>\n          </RuiButton>\n          <span\n            v-else\n            :class=\"ui.columnText()\"\n            data-id=\"column-text\"\n          >\n            <slot\n              :name=\"`header.text.${column.key.toString()}`\"\n              :column=\"column\"\n            >\n              <template v-if=\"column[columnAttr]\">{{ column[columnAttr] }}</template>\n              <span\n                v-else\n                class=\"sr-only\"\n              >\n                {{ getHiddenHeaderText(column) }}\n              </span>\n            </slot>\n          </span>\n        </slot>\n      </th>\n    </tr>\n    <tr\n      :class=\"ui.loaderRow()\"\n      :data-id=\"loading ? 'thead-loader' : undefined\"\n      :aria-hidden=\"loading ? undefined : 'true'\"\n    >\n      <!-- a `td`, not a header cell, so it never counts as a column heading -->\n      <td\n        :class=\"ui.progress()\"\n        :colspan=\"colspan\"\n      >\n        <div\n          v-if=\"loading\"\n          :class=\"ui.progressWrapper()\"\n        >\n          <RuiProgress\n            color=\"primary\"\n            variant=\"indeterminate\"\n          />\n        </div>\n      </td>\n    </tr>\n  </thead>\n</template>\n"],"mappings":""}

package/dist/components/tables/RuiTableHead.vue_vue_type_script_setup_true_lang.js

@@ -1,11 +1,10 @@
 import { get } from "../../vendor/@vueuse/shared/dist/index.js";
-import { tv } from "../../utils/tv.js";
 import RuiIcon_default from "../icons/RuiIcon.js";
 import RuiProgress_default from "../progress/RuiProgress.js";
 import RuiButton_default from "../buttons/button/RuiButton.js";
 import RuiCheckbox_default from "../forms/checkbox/RuiCheckbox.js";
-import { NESTED_BAR } from "./data-table-styles.js";
 import { SortDirection, TableAlign, getAlignClass, getSortButtonAlignClass } from "./table-props.js";
+import { tableHeadStyles } from "./table-head-styles.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, renderSlot, toDisplayString, unref, withCtx } from "vue";
 //#region src/components/tables/RuiTableHead.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-id"];
@@ -70,38 +69,6 @@ var RuiTableHead_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 	emits: ["select:all", "sort"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
-		const tableHeadStyles = tv({
-			slots: {
-				thead: "between:border-t between:border-b-0 between:border-rui-divider",
-				checkbox: `px-2 w-14.5 max-w-14.5 [&_label]:ml-0 bg-rui-surface-muted ${NESTED_BAR}`,
-				th: `[:where(&)]:px-4 bg-rui-surface-muted ${NESTED_BAR}`,
-				columnText: "text-rui-text-secondary font-medium text-[0.8125rem] leading-5",
-				sortButton: "inline-flex group/sort -mx-1.5",
-				sortIcon: "transition opacity-75 group-hover/sort:opacity-100 group-focus-visible/sort:opacity-100",
-				sortPosition: "text-[0.6875rem] leading-none font-semibold tabular-nums text-rui-text-secondary",
-				loaderRow: "border-none",
-				progress: "p-0 h-0",
-				progressWrapper: "h-0 -mt-1"
-			},
-			variants: {
-				position: {
-					default: {},
-					sticky: { thead: "top-0 z-rui-raised absolute" },
-					fixed: {
-						thead: "top-0 z-rui-raised fixed",
-						th: "border-b border-b-rui-divider"
-					}
-				},
-				dense: {
-					true: { th: "[:where(&)]:py-0.5 [:where(&)]:h-8" },
-					false: { th: "[:where(&)]:py-1 [:where(&)]:h-10" }
-				}
-			},
-			defaultVariants: {
-				position: "default",
-				dense: false
-			}
-		});
 		const headerPosition = computed(() => {
 			if (__props.stickyHeader && __props.stick) return "fixed";
 			if (__props.stickyHeader) return "sticky";

package/dist/components/tables/RuiTableHead.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTableHead.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_createVNode","RuiCheckbox","_createCommentVNode","_Fragment","_renderList","_renderSlot","_createBlock","RuiButton","_createSlots","_withCtx","RuiIcon","_toDisplayString","_createTextVNode","RuiProgress"],"sources":["../../../src/components/tables/RuiTableHead.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object, K extends keyof T = keyof T\">\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiCheckbox from '@/components/forms/checkbox/RuiCheckbox.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { NESTED_BAR } from '@/components/tables/data-table-styles';\nimport { getAlignClass, getSortButtonAlignClass, SortDirection, TableAlign } from '@/components/tables/table-props';\nimport { tv } from '@/utils/tv';\n\n/**\n * A sortable column name for `T`, the type of the data in the column: the name\n * must be a key of that object type.\n */\nexport type TableRowKey<T> = keyof T extends string ? keyof T : never;\n\nexport interface BaseTableColumn<T> {\n  key: TableRowKey<T> | string;\n  sortable?: boolean;\n  direction?: SortDirection;\n  align?: TableAlign;\n  class?: string;\n  cellClass?: string;\n  tdClass?: string;\n  colspan?: string | number;\n  rowspan?: string | number;\n  /**\n   * hide this column when the table is rendered in its stacked mobile layout\n   */\n  mobileHidden?: boolean;\n  /**\n   * pin this column to the card header (top row) in the stacked mobile layout\n   * instead of rendering it as a label/value pair. Intended for action columns\n   * such as an overflow menu. Ignored on non-mobile layouts.\n   */\n  mobileHeader?: boolean;\n\n  [key: string]: any;\n}\n\n/**\n * A sortable table column, which ties `sortable: true` to a key that is a real\n * property of `T`, the type of data in the table.\n */\nexport interface SortableTableColumn<T> extends BaseTableColumn<T> {\n  sortable: true;\n}\n\n/**\n * An interface representing a column in a table that cannot be sorted.\n * This can be mapped to an actual property of the object or to a virtual column.\n *\n * @typeparam T - The type of data in the table.\n */\nexport interface NoneSortableTableColumn<T> extends BaseTableColumn<T> {\n  sortable?: false;\n}\n\nexport type TableColumn<T> = SortableTableColumn<T> | NoneSortableTableColumn<T>;\n\nexport interface SortColumn<T> {\n  column?: TableRowKey<T>;\n  direction: SortDirection;\n}\n\nexport type TableSortData<T> = SortColumn<T> | SortColumn<T>[] | undefined;\n\nexport type TableRowKeyData<T> = TableRowKey<T> | TableRowKey<T>[] | undefined;\n\nexport interface GroupData<T> {\n  key: string;\n  value?: Partial<T>;\n}\n\nexport type GroupKey<T> = TableColumn<T>['key'];\n\nexport type GroupKeys<T> = GroupKey<T> | GroupKey<T>[] | undefined;\n\nexport interface Props<T> {\n  loading?: boolean;\n  stickyHeader?: boolean;\n  stick?: boolean;\n  selectable?: boolean;\n  disableCheckAll?: boolean;\n  colspan?: number;\n  columns?: TableColumn<T>[];\n  capitalizeHeaders?: boolean;\n  isAllSelected?: boolean;\n  indeterminate?: boolean;\n  dense?: boolean;\n  sortedMap?: Partial<Record<TableRowKey<T>, SortColumn<T>>>;\n  sortData?: TableSortData<T>;\n  columnAttr?: keyof TableColumn<T>;\n  dataId?: string;\n}\n\nconst {\n  loading = false,\n  stickyHeader = false,\n  stick = false,\n  selectable = false,\n  disableCheckAll = false,\n  colspan = 0,\n  columns,\n  capitalizeHeaders = false,\n  isAllSelected = false,\n  indeterminate = false,\n  dense = false,\n  sortedMap = {} as Partial<Record<TableRowKey<T>, SortColumn<T>>>,\n  columnAttr = 'label',\n  sortData,\n  dataId = 'head-main',\n} = defineProps<Props<T>>();\n\nconst emit = defineEmits<{\n  'select:all': [value: boolean];\n  'sort': [value: { key: TableRowKey<T>; direction?: SortDirection }];\n}>();\n\nconst tableHeadStyles = tv({\n  slots: {\n    thead: 'between:border-t between:border-b-0 between:border-rui-divider',\n    checkbox: `px-2 w-14.5 max-w-14.5 [&_label]:ml-0 bg-rui-surface-muted ${NESTED_BAR}`,\n    // tinted like the pagination bar, framing the body; opaque, so rows scroll behind a stuck header\n    th: `[:where(&)]:px-4 bg-rui-surface-muted ${NESTED_BAR}`,\n    // labels read as secondary to the data; the sorted column's label steps up to primary\n    columnText: 'text-rui-text-secondary font-medium text-[0.8125rem] leading-5',\n    // the negative margin cancels the button's own padding so the label lines up with the cells below\n    sortButton: 'inline-flex group/sort -mx-1.5',\n    // a resting icon marks sortable columns for keyboard and touch users, at 3:1 on a nested table's darker header\n    sortIcon: 'transition opacity-75 group-hover/sort:opacity-100 group-focus-visible/sort:opacity-100',\n    // tucked against the arrow, closer than the button's gap\n    sortPosition: 'text-[0.6875rem] leading-none font-semibold tabular-nums text-rui-text-secondary',\n    /*\n     * The row is always there and only its bar comes and goes: a collapsed-border table gives even a\n     * zero-height row half a pixel, so adding the row on load pushed the body down.\n     */\n    loaderRow: 'border-none',\n    progress: 'p-0 h-0',\n    progressWrapper: 'h-0 -mt-1',\n  },\n  variants: {\n    position: {\n      default: {},\n      sticky: { thead: 'top-0 z-rui-raised absolute' },\n      fixed: {\n        thead: 'top-0 z-rui-raised fixed',\n        th: 'border-b border-b-rui-divider',\n      },\n    },\n    // a fixed height evens out rows with and without sort buttons; `:where()` lets a column's `class` win\n    dense: {\n      true: { th: '[:where(&)]:py-0.5 [:where(&)]:h-8' },\n      false: { th: '[:where(&)]:py-1 [:where(&)]:h-10' },\n    },\n  },\n  defaultVariants: {\n    position: 'default',\n    dense: false,\n  },\n});\n\nconst headerPosition = computed<'default' | 'sticky' | 'fixed'>(() => {\n  if (stickyHeader && stick)\n    return 'fixed';\n  if (stickyHeader)\n    return 'sticky';\n  return 'default';\n});\n\nconst ui = computed<ReturnType<typeof tableHeadStyles>>(() => tableHeadStyles({\n  position: get(headerPosition),\n  dense,\n}));\n\nfunction getSortIconClass(key: TableColumn<T>['key']): string | undefined {\n  if (!isSortedBy(key))\n    return undefined;\n  const direction = getSortDirection(key);\n  return `opacity-100! ${direction === SortDirection.asc ? 'rotate-180' : 'rotate-0'}`;\n}\n\n/**\n * An unsorted column shows a neutral up-down icon, so nothing reads as sorted\n * until it is; the sorted column shows its direction.\n */\nfunction getSortIconName(key: TableColumn<T>['key']): RuiIcons {\n  return isSortedBy(key) ? 'lu-arrow-down' : 'lu-arrow-up-down';\n}\n\nfunction getColumnTextClass(key: TableColumn<T>['key']): string {\n  return get(ui).columnText({ class: isSortedBy(key) ? 'text-rui-text' : undefined });\n}\n\nfunction onSort({ key, direction }: TableColumn<T>): void {\n  return emit('sort', {\n    key: key as TableRowKey<T>,\n    direction: direction ?? SortDirection.asc,\n  });\n}\n\nfunction onToggleAll(checked: boolean) {\n  return emit('select:all', checked);\n}\n\nfunction isSortedBy(key: TableColumn<T>['key']): boolean {\n  return key in sortedMap;\n}\n\nfunction getSortIndex(key: TableColumn<T>['key']): number {\n  if (!sortData || !Array.isArray(sortData) || !isSortedBy(key))\n    return -1;\n\n  return sortData.findIndex(sort => sort.column === key);\n}\n\n/**\n * A column's place in a multi-column sort, shown beside its arrow. A lone sorted column shows none,\n * since its arrow already says everything.\n */\nfunction getSortPosition(key: TableColumn<T>['key']): number | undefined {\n  if (!Array.isArray(sortData) || sortData.length < 2)\n    return undefined;\n  const index = getSortIndex(key);\n  return index >= 0 ? index + 1 : undefined;\n}\n\nfunction getSortDirection(key: TableColumn<T>['key']): SortDirection | undefined {\n  return sortedMap[key]?.direction;\n}\n\nfunction getAriaSort(column: TableColumn<T>): 'ascending' | 'descending' | 'none' | undefined {\n  if (!column.sortable)\n    return undefined;\n  const direction = getSortDirection(column.key);\n  if (direction === SortDirection.asc)\n    return 'ascending';\n  if (direction === SortDirection.desc)\n    return 'descending';\n  return 'none';\n}\n\n/**\n * The name a screen reader hears for a column drawn without a label, since an empty header cell\n * leaves the column unnamed: the built-in expand column is \"Details\", any other its key.\n *\n * @param column - the column whose label is empty\n * @returns Details or the column key\n */\nfunction getHiddenHeaderText(column: TableColumn<T>): string {\n  return column.key === 'expand' ? 'Details' : column.key.toString();\n}\n</script>\n\n<template>\n  <thead\n    :data-id=\"dataId\"\n    :class=\"ui.thead()\"\n  >\n    <tr>\n      <th\n        v-if=\"selectable\"\n        :class=\"ui.checkbox()\"\n        scope=\"col\"\n        colspan=\"1\"\n        rowspan=\"1\"\n      >\n        <RuiCheckbox\n          :disabled=\"disableCheckAll\"\n          :indeterminate=\"indeterminate\"\n          :model-value=\"isAllSelected\"\n          :size=\"dense ? 'sm' : undefined\"\n          color=\"primary\"\n          data-id=\"table-toggle-check-all\"\n          aria-label=\"Select all rows\"\n          details=\"hidden\"\n          @update:model-value=\"onToggleAll($event)\"\n        />\n      </th>\n\n      <th\n        v-for=\"column in columns\"\n        :key=\"column.key\"\n        :class=\"[\n          ui.th({ class: getAlignClass(column.align) }),\n          column.class,\n          // only labels the table made up from row keys; a label the consumer wrote is shown as written\n          { capitalize: capitalizeHeaders },\n        ]\"\n        scope=\"col\"\n        :colspan=\"column.colspan ?? 1\"\n        :rowspan=\"column.rowspan ?? 1\"\n        :aria-sort=\"getAriaSort(column)\"\n        :data-id=\"column.sortable ? 'column-sortable' : undefined\"\n      >\n        <slot\n          :column=\"column\"\n          :name=\"`header.${column.key.toString()}`\"\n        >\n          <RuiButton\n            v-if=\"column.sortable\"\n            :class=\"ui.sortButton({ class: getSortButtonAlignClass(column.align) })\"\n            :data-sorted=\"isSortedBy(column.key) || undefined\"\n            :data-direction=\"getSortDirection(column.key)\"\n            size=\"sm\"\n            variant=\"text\"\n            @click=\"onSort(column)\"\n          >\n            <span\n              :class=\"getColumnTextClass(column.key)\"\n              data-id=\"column-text\"\n            >\n              <slot\n                :name=\"`header.text.${column.key.toString()}`\"\n                :column=\"column\"\n              >\n                {{ column[columnAttr] }}\n              </slot>\n            </span>\n\n            <template\n              v-if=\"column.align === TableAlign.end\"\n              #prepend\n            >\n              <span\n                v-if=\"getSortPosition(column.key)\"\n                :class=\"ui.sortPosition({ class: '-mr-1.5' })\"\n                data-id=\"sort-position\"\n              >\n                {{ getSortPosition(column.key) }}\n              </span>\n              <RuiIcon\n                :class=\"ui.sortIcon({ class: getSortIconClass(column.key) })\"\n                :name=\"getSortIconName(column.key)\"\n                size=\"18\"\n              />\n            </template>\n\n            <template #append>\n              <template v-if=\"column.align !== TableAlign.end\">\n                <RuiIcon\n                  :class=\"ui.sortIcon({ class: getSortIconClass(column.key) })\"\n                  :name=\"getSortIconName(column.key)\"\n                  size=\"18\"\n                />\n                <span\n                  v-if=\"getSortPosition(column.key)\"\n                  :class=\"ui.sortPosition({ class: '-ml-1.5' })\"\n                  data-id=\"sort-position\"\n                >\n                  {{ getSortPosition(column.key) }}\n                </span>\n              </template>\n            </template>\n          </RuiButton>\n          <span\n            v-else\n            :class=\"ui.columnText()\"\n            data-id=\"column-text\"\n          >\n            <slot\n              :name=\"`header.text.${column.key.toString()}`\"\n              :column=\"column\"\n            >\n              <template v-if=\"column[columnAttr]\">{{ column[columnAttr] }}</template>\n              <span\n                v-else\n                class=\"sr-only\"\n              >\n                {{ getHiddenHeaderText(column) }}\n              </span>\n            </slot>\n          </span>\n        </slot>\n      </th>\n    </tr>\n    <tr\n      :class=\"ui.loaderRow()\"\n      :data-id=\"loading ? 'thead-loader' : undefined\"\n      :aria-hidden=\"loading ? undefined : 'true'\"\n    >\n      <!-- a `td`, not a header cell, so it never counts as a column heading -->\n      <td\n        :class=\"ui.progress()\"\n        :colspan=\"colspan\"\n      >\n        <div\n          v-if=\"loading\"\n          :class=\"ui.progressWrapper()\"\n        >\n          <RuiProgress\n            color=\"primary\"\n            variant=\"indeterminate\"\n          />\n        </div>\n      </td>\n    </tr>\n  </thead>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiTableHead.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_createVNode","RuiCheckbox","_createCommentVNode","_Fragment","_renderList","_renderSlot","_createBlock","RuiButton","_createSlots","_withCtx","RuiIcon","_toDisplayString","_createTextVNode","RuiProgress"],"sources":["../../../src/components/tables/RuiTableHead.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object, K extends keyof T = keyof T\">\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiCheckbox from '@/components/forms/checkbox/RuiCheckbox.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { getAlignClass, getSortButtonAlignClass, SortDirection, TableAlign } from '@/components/tables/table-props';\nimport { tableHeadStyles } from './table-head-styles';\n\n/**\n * A sortable column name for `T`, the type of the data in the column: the name\n * must be a key of that object type.\n */\nexport type TableRowKey<T> = keyof T extends string ? keyof T : never;\n\nexport interface BaseTableColumn<T> {\n  key: TableRowKey<T> | string;\n  sortable?: boolean;\n  direction?: SortDirection;\n  align?: TableAlign;\n  class?: string;\n  cellClass?: string;\n  tdClass?: string;\n  colspan?: string | number;\n  rowspan?: string | number;\n  /**\n   * hide this column when the table is rendered in its stacked mobile layout\n   */\n  mobileHidden?: boolean;\n  /**\n   * pin this column to the card header (top row) in the stacked mobile layout\n   * instead of rendering it as a label/value pair. Intended for action columns\n   * such as an overflow menu. Ignored on non-mobile layouts.\n   */\n  mobileHeader?: boolean;\n\n  [key: string]: any;\n}\n\n/**\n * A sortable table column, which ties `sortable: true` to a key that is a real\n * property of `T`, the type of data in the table.\n */\nexport interface SortableTableColumn<T> extends BaseTableColumn<T> {\n  sortable: true;\n}\n\n/**\n * An interface representing a column in a table that cannot be sorted.\n * This can be mapped to an actual property of the object or to a virtual column.\n *\n * @typeparam T - The type of data in the table.\n */\nexport interface NoneSortableTableColumn<T> extends BaseTableColumn<T> {\n  sortable?: false;\n}\n\nexport type TableColumn<T> = SortableTableColumn<T> | NoneSortableTableColumn<T>;\n\nexport interface SortColumn<T> {\n  column?: TableRowKey<T>;\n  direction: SortDirection;\n}\n\nexport type TableSortData<T> = SortColumn<T> | SortColumn<T>[] | undefined;\n\nexport type TableRowKeyData<T> = TableRowKey<T> | TableRowKey<T>[] | undefined;\n\nexport interface GroupData<T> {\n  key: string;\n  value?: Partial<T>;\n}\n\nexport type GroupKey<T> = TableColumn<T>['key'];\n\nexport type GroupKeys<T> = GroupKey<T> | GroupKey<T>[] | undefined;\n\nexport interface Props<T> {\n  loading?: boolean;\n  stickyHeader?: boolean;\n  stick?: boolean;\n  selectable?: boolean;\n  disableCheckAll?: boolean;\n  colspan?: number;\n  columns?: TableColumn<T>[];\n  capitalizeHeaders?: boolean;\n  isAllSelected?: boolean;\n  indeterminate?: boolean;\n  dense?: boolean;\n  sortedMap?: Partial<Record<TableRowKey<T>, SortColumn<T>>>;\n  sortData?: TableSortData<T>;\n  columnAttr?: keyof TableColumn<T>;\n  dataId?: string;\n}\n\nconst {\n  loading = false,\n  stickyHeader = false,\n  stick = false,\n  selectable = false,\n  disableCheckAll = false,\n  colspan = 0,\n  columns,\n  capitalizeHeaders = false,\n  isAllSelected = false,\n  indeterminate = false,\n  dense = false,\n  sortedMap = {} as Partial<Record<TableRowKey<T>, SortColumn<T>>>,\n  columnAttr = 'label',\n  sortData,\n  dataId = 'head-main',\n} = defineProps<Props<T>>();\n\nconst emit = defineEmits<{\n  'select:all': [value: boolean];\n  'sort': [value: { key: TableRowKey<T>; direction?: SortDirection }];\n}>();\n\nconst headerPosition = computed<'default' | 'sticky' | 'fixed'>(() => {\n  if (stickyHeader && stick)\n    return 'fixed';\n  if (stickyHeader)\n    return 'sticky';\n  return 'default';\n});\n\nconst ui = computed<ReturnType<typeof tableHeadStyles>>(() => tableHeadStyles({\n  position: get(headerPosition),\n  dense,\n}));\n\nfunction getSortIconClass(key: TableColumn<T>['key']): string | undefined {\n  if (!isSortedBy(key))\n    return undefined;\n  const direction = getSortDirection(key);\n  return `opacity-100! ${direction === SortDirection.asc ? 'rotate-180' : 'rotate-0'}`;\n}\n\n/**\n * An unsorted column shows a neutral up-down icon, so nothing reads as sorted\n * until it is; the sorted column shows its direction.\n */\nfunction getSortIconName(key: TableColumn<T>['key']): RuiIcons {\n  return isSortedBy(key) ? 'lu-arrow-down' : 'lu-arrow-up-down';\n}\n\nfunction getColumnTextClass(key: TableColumn<T>['key']): string {\n  return get(ui).columnText({ class: isSortedBy(key) ? 'text-rui-text' : undefined });\n}\n\nfunction onSort({ key, direction }: TableColumn<T>): void {\n  return emit('sort', {\n    key: key as TableRowKey<T>,\n    direction: direction ?? SortDirection.asc,\n  });\n}\n\nfunction onToggleAll(checked: boolean) {\n  return emit('select:all', checked);\n}\n\nfunction isSortedBy(key: TableColumn<T>['key']): boolean {\n  return key in sortedMap;\n}\n\nfunction getSortIndex(key: TableColumn<T>['key']): number {\n  if (!sortData || !Array.isArray(sortData) || !isSortedBy(key))\n    return -1;\n\n  return sortData.findIndex(sort => sort.column === key);\n}\n\n/**\n * A column's place in a multi-column sort, shown beside its arrow. A lone sorted column shows none,\n * since its arrow already says everything.\n */\nfunction getSortPosition(key: TableColumn<T>['key']): number | undefined {\n  if (!Array.isArray(sortData) || sortData.length < 2)\n    return undefined;\n  const index = getSortIndex(key);\n  return index >= 0 ? index + 1 : undefined;\n}\n\nfunction getSortDirection(key: TableColumn<T>['key']): SortDirection | undefined {\n  return sortedMap[key]?.direction;\n}\n\nfunction getAriaSort(column: TableColumn<T>): 'ascending' | 'descending' | 'none' | undefined {\n  if (!column.sortable)\n    return undefined;\n  const direction = getSortDirection(column.key);\n  if (direction === SortDirection.asc)\n    return 'ascending';\n  if (direction === SortDirection.desc)\n    return 'descending';\n  return 'none';\n}\n\n/**\n * The name a screen reader hears for a column drawn without a label, since an empty header cell\n * leaves the column unnamed: the built-in expand column is \"Details\", any other its key.\n *\n * @param column - the column whose label is empty\n * @returns Details or the column key\n */\nfunction getHiddenHeaderText(column: TableColumn<T>): string {\n  return column.key === 'expand' ? 'Details' : column.key.toString();\n}\n</script>\n\n<template>\n  <thead\n    :data-id=\"dataId\"\n    :class=\"ui.thead()\"\n  >\n    <tr>\n      <th\n        v-if=\"selectable\"\n        :class=\"ui.checkbox()\"\n        scope=\"col\"\n        colspan=\"1\"\n        rowspan=\"1\"\n      >\n        <RuiCheckbox\n          :disabled=\"disableCheckAll\"\n          :indeterminate=\"indeterminate\"\n          :model-value=\"isAllSelected\"\n          :size=\"dense ? 'sm' : undefined\"\n          color=\"primary\"\n          data-id=\"table-toggle-check-all\"\n          aria-label=\"Select all rows\"\n          details=\"hidden\"\n          @update:model-value=\"onToggleAll($event)\"\n        />\n      </th>\n\n      <th\n        v-for=\"column in columns\"\n        :key=\"column.key\"\n        :class=\"[\n          ui.th({ class: getAlignClass(column.align) }),\n          column.class,\n          // only labels the table made up from row keys; a label the consumer wrote is shown as written\n          { capitalize: capitalizeHeaders },\n        ]\"\n        scope=\"col\"\n        :colspan=\"column.colspan ?? 1\"\n        :rowspan=\"column.rowspan ?? 1\"\n        :aria-sort=\"getAriaSort(column)\"\n        :data-id=\"column.sortable ? 'column-sortable' : undefined\"\n      >\n        <slot\n          :column=\"column\"\n          :name=\"`header.${column.key.toString()}`\"\n        >\n          <RuiButton\n            v-if=\"column.sortable\"\n            :class=\"ui.sortButton({ class: getSortButtonAlignClass(column.align) })\"\n            :data-sorted=\"isSortedBy(column.key) || undefined\"\n            :data-direction=\"getSortDirection(column.key)\"\n            size=\"sm\"\n            variant=\"text\"\n            @click=\"onSort(column)\"\n          >\n            <span\n              :class=\"getColumnTextClass(column.key)\"\n              data-id=\"column-text\"\n            >\n              <slot\n                :name=\"`header.text.${column.key.toString()}`\"\n                :column=\"column\"\n              >\n                {{ column[columnAttr] }}\n              </slot>\n            </span>\n\n            <template\n              v-if=\"column.align === TableAlign.end\"\n              #prepend\n            >\n              <span\n                v-if=\"getSortPosition(column.key)\"\n                :class=\"ui.sortPosition({ class: '-mr-1.5' })\"\n                data-id=\"sort-position\"\n              >\n                {{ getSortPosition(column.key) }}\n              </span>\n              <RuiIcon\n                :class=\"ui.sortIcon({ class: getSortIconClass(column.key) })\"\n                :name=\"getSortIconName(column.key)\"\n                size=\"18\"\n              />\n            </template>\n\n            <template #append>\n              <template v-if=\"column.align !== TableAlign.end\">\n                <RuiIcon\n                  :class=\"ui.sortIcon({ class: getSortIconClass(column.key) })\"\n                  :name=\"getSortIconName(column.key)\"\n                  size=\"18\"\n                />\n                <span\n                  v-if=\"getSortPosition(column.key)\"\n                  :class=\"ui.sortPosition({ class: '-ml-1.5' })\"\n                  data-id=\"sort-position\"\n                >\n                  {{ getSortPosition(column.key) }}\n                </span>\n              </template>\n            </template>\n          </RuiButton>\n          <span\n            v-else\n            :class=\"ui.columnText()\"\n            data-id=\"column-text\"\n          >\n            <slot\n              :name=\"`header.text.${column.key.toString()}`\"\n              :column=\"column\"\n            >\n              <template v-if=\"column[columnAttr]\">{{ column[columnAttr] }}</template>\n              <span\n                v-else\n                class=\"sr-only\"\n              >\n                {{ getHiddenHeaderText(column) }}\n              </span>\n            </slot>\n          </span>\n        </slot>\n      </th>\n    </tr>\n    <tr\n      :class=\"ui.loaderRow()\"\n      :data-id=\"loading ? 'thead-loader' : undefined\"\n      :aria-hidden=\"loading ? undefined : 'true'\"\n    >\n      <!-- a `td`, not a header cell, so it never counts as a column heading -->\n      <td\n        :class=\"ui.progress()\"\n        :colspan=\"colspan\"\n      >\n        <div\n          v-if=\"loading\"\n          :class=\"ui.progressWrapper()\"\n        >\n          <RuiProgress\n            color=\"primary\"\n            variant=\"indeterminate\"\n          />\n        </div>\n      </td>\n    </tr>\n  </thead>\n</template>\n"],"mappings":"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"}

package/dist/components/tables/RuiTableLoadingState.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTableLoadingState.js","names":["_sfc_main"],"sources":["../../../src/components/tables/RuiTableLoadingState.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface TableLoadingStateProps {\n  /** Diameter of the spinner, in pixels. */\n  size?: number | string;\n  /**\n   * Drops the reserved height, for a table that only has room to say a read is\n   * in flight. Matches the same flag on RuiTableEmptyState, so the two states\n   * do not resize the table as they swap.\n   */\n  compact?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTableLoadingState',\n});\n\nconst { size = 40, compact = false } = defineProps<TableLoadingStateProps>();\n\nconst loadingStyles = tv({\n  slots: {\n    root: 'flex items-center justify-center',\n  },\n  variants: {\n    compact: {\n      true: { root: 'py-6' },\n      false: { root: 'min-h-56 py-8' },\n    },\n  },\n});\n\nconst ui = computed<ReturnType<typeof loadingStyles>>(() => loadingStyles({ compact }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    data-id=\"table-loading\"\n  >\n    <RuiProgress\n      circular\n      color=\"primary\"\n      :size=\"size\"\n      variant=\"indeterminate\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiTableLoadingState.js","names":["_sfc_main"],"sources":["../../../src/components/tables/RuiTableLoadingState.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { loadingStyles } from './table-loading-state-styles';\n\nexport interface TableLoadingStateProps {\n  /** Diameter of the spinner, in pixels. */\n  size?: number | string;\n  /**\n   * Drops the reserved height, for a table that only has room to say a read is\n   * in flight. Matches the same flag on RuiTableEmptyState, so the two states\n   * do not resize the table as they swap.\n   */\n  compact?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTableLoadingState',\n});\n\nconst { size = 40, compact = false } = defineProps<TableLoadingStateProps>();\n\nconst ui = computed<ReturnType<typeof loadingStyles>>(() => loadingStyles({ compact }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    data-id=\"table-loading\"\n  >\n    <RuiProgress\n      circular\n      color=\"primary\"\n      :size=\"size\"\n      variant=\"indeterminate\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/tables/RuiTableLoadingState.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,5 @@
-import { tv } from "../../utils/tv.js";
 import RuiProgress_default from "../progress/RuiProgress.js";
+import { loadingStyles } from "./table-loading-state-styles.js";
 import { computed, createElementBlock, createVNode, defineComponent, normalizeClass, openBlock } from "vue";
 //#region src/components/tables/RuiTableLoadingState.vue?vue&type=script&setup=true&lang.ts
 var RuiTableLoadingState_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -13,13 +13,6 @@ var RuiTableLoadingState_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 		}
 	},
 	setup(__props) {
-		const loadingStyles = tv({
-			slots: { root: "flex items-center justify-center" },
-			variants: { compact: {
-				true: { root: "py-6" },
-				false: { root: "min-h-56 py-8" }
-			} }
-		});
 		const ui = computed(() => loadingStyles({ compact: __props.compact }));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {

package/dist/components/tables/RuiTableLoadingState.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTableLoadingState.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createVNode","RuiProgress"],"sources":["../../../src/components/tables/RuiTableLoadingState.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface TableLoadingStateProps {\n  /** Diameter of the spinner, in pixels. */\n  size?: number | string;\n  /**\n   * Drops the reserved height, for a table that only has room to say a read is\n   * in flight. Matches the same flag on RuiTableEmptyState, so the two states\n   * do not resize the table as they swap.\n   */\n  compact?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTableLoadingState',\n});\n\nconst { size = 40, compact = false } = defineProps<TableLoadingStateProps>();\n\nconst loadingStyles = tv({\n  slots: {\n    root: 'flex items-center justify-center',\n  },\n  variants: {\n    compact: {\n      true: { root: 'py-6' },\n      false: { root: 'min-h-56 py-8' },\n    },\n  },\n});\n\nconst ui = computed<ReturnType<typeof loadingStyles>>(() => loadingStyles({ compact }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    data-id=\"table-loading\"\n  >\n    <RuiProgress\n      circular\n      color=\"primary\"\n      :size=\"size\"\n      variant=\"indeterminate\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAsBA,MAAM,gBAAgB,GAAG;GACvB,OAAO,EACL,MAAM,mCACR;GACA,UAAU,EACR,SAAS;IACP,MAAM,EAAE,MAAM,OAAO;IACrB,OAAO,EAAE,MAAM,gBAAgB;GACjC,EACF;EACF,CAAC;EAED,MAAM,KAAK,eAAiD,cAAc,EAAE,SAAM,QAAA,QAAE,CAAC,CAAC;;GAIpF,OAAAA,UAAA,GAAAC,mBAUM,OAAA;IATH,OAAKC,eAAE,GAAA,MAAG,KAAI,CAAA;IACf,WAAQ;GAERC,GAAAA,CAAAA,YAKEC,qBAAA;IAJA,UAAA;IACA,OAAM;IACL,MAAM,QAAA;IACP,SAAQ"}
+{"version":3,"file":"RuiTableLoadingState.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createVNode","RuiProgress"],"sources":["../../../src/components/tables/RuiTableLoadingState.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { loadingStyles } from './table-loading-state-styles';\n\nexport interface TableLoadingStateProps {\n  /** Diameter of the spinner, in pixels. */\n  size?: number | string;\n  /**\n   * Drops the reserved height, for a table that only has room to say a read is\n   * in flight. Matches the same flag on RuiTableEmptyState, so the two states\n   * do not resize the table as they swap.\n   */\n  compact?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTableLoadingState',\n});\n\nconst { size = 40, compact = false } = defineProps<TableLoadingStateProps>();\n\nconst ui = computed<ReturnType<typeof loadingStyles>>(() => loadingStyles({ compact }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    data-id=\"table-loading\"\n  >\n    <RuiProgress\n      circular\n      color=\"primary\"\n      :size=\"size\"\n      variant=\"indeterminate\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAsBA,MAAM,KAAK,eAAiD,cAAc,EAAE,SAAM,QAAA,QAAE,CAAC,CAAC;;GAIpF,OAAAA,UAAA,GAAAC,mBAUM,OAAA;IATH,OAAKC,eAAE,GAAA,MAAG,KAAI,CAAA;IACf,WAAQ;GAERC,GAAAA,CAAAA,YAKEC,qBAAA;IAJA,UAAA;IACA,OAAM;IACL,MAAM,QAAA;IACP,SAAQ"}

package/dist/components/tables/RuiTablePagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTablePagination.js","names":["_sfc_main"],"sources":["../../../src/components/tables/RuiTablePagination.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiMenuSelect from '@/components/forms/select/RuiMenuSelect.vue';\nimport RuiTextField from '@/components/forms/text-field/RuiTextField.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type TablePaginationData, usePaginationNavigation } from '@/components/tables/use-pagination-navigation';\nimport { useTable } from '@/composables/defaults/table';\nimport { tv } from '@/utils/tv';\n\nexport type { TablePaginationData };\n\nexport interface Props {\n  dense?: boolean;\n  disablePerPage?: boolean;\n  loading?: boolean;\n  /**\n   * Render a compact, touch-friendly layout: the sections spread across the\n   * full width and the first/last jump buttons are dropped to save space.\n   */\n  mobile?: boolean;\n  /**\n   * Maximum number of pages before the jump-to-page dropdown is replaced\n   * with a numeric input. Set to `1` to use the input whenever there is more\n   * than one page, or `0` to always use the dropdown. Defaults to `500`, since\n   * past that materialising the full range list stalls the main thread.\n   */\n  rangesThreshold?: number;\n}\n\nconst modelValue = defineModel<TablePaginationData>({ required: true });\n\nconst {\n  dense = false,\n  loading = false,\n  disablePerPage = false,\n  rangesThreshold = 500,\n  mobile = false,\n} = defineProps<Props>();\n\nconst paginationStyles = tv({\n  slots: {\n    wrapper: 'relative flex flex-wrap items-center justify-end gap-x-4 gap-y-0',\n    limit: 'flex items-center between:ml-2 between:mr-0 text-caption',\n    ranges: 'flex items-center between:ml-2 between:mr-0 text-caption pr-2',\n    pageInput: 'w-14 [&_input]:text-center [&_input]:px-1! [&_input]:text-xs! [&_input]:leading-5!',\n    sectionLabel: 'text-rui-text-secondary whitespace-nowrap py-3',\n    select: 'text-xs! pl-3!',\n    indicator: 'text-rui-text text-caption whitespace-nowrap',\n    navigation: 'flex items-center',\n  },\n  variants: {\n    // the selects match the icon buttons, 28px with `size=\"sm\"` and 32px without\n    dense: {\n      true: {\n        select: 'min-h-7!',\n        pageInput: '[&_input]:py-1!',\n      },\n      false: {\n        select: 'min-h-8!',\n        pageInput: '[&_input]:py-1.5!',\n      },\n    },\n    mobile: {\n      true: {\n        wrapper: 'flex-nowrap justify-between gap-x-2 gap-y-0',\n        ranges: 'pr-0',\n        // sr-only rather than hidden: a display:none label names nothing\n        sectionLabel: 'sr-only',\n      },\n    },\n  },\n});\n\nconst ui = computed<ReturnType<typeof paginationStyles>>(() => paginationStyles({ dense, mobile }));\n\nconst tableDefaults = useTable();\n\nconst {\n  limits,\n  currentLimit,\n  pages,\n  ranges,\n  indicatorText,\n  currentRange,\n  useInputJump,\n  hasPrev,\n  hasNext,\n  onPrev,\n  onNext,\n  onFirst,\n  onLast,\n} = usePaginationNavigation(modelValue, tableDefaults, () => rangesThreshold);\n\n/**\n * With every row on one page the bar stays in place, as a summary, but the\n * page jump has nowhere to go, so it disables like the arrows beside it.\n */\nconst singlePage = computed<boolean>(() => get(pages) <= 1);\n\n/**\n * The rows-per-page select disables only once every option would fit all the\n * rows. Until then it stays live even on a single page: it is how a user\n * lowers a limit they raised past the row count.\n */\nconst everyLimitFits = computed<boolean>(() => {\n  const { total } = get(modelValue);\n  return get(singlePage) && get(limits).every(({ limit }) => limit >= total);\n});\n\nconst pageDraft = ref<string>(String(get(currentRange)));\n\nwatch(currentRange, (value) => {\n  set(pageDraft, String(value));\n});\n\nfunction commitPageInput(): void {\n  const parsed = Number.parseInt(get(pageDraft), 10);\n  const maxPage = get(pages);\n  if (!Number.isFinite(parsed) || maxPage === 0) {\n    set(pageDraft, String(get(currentRange)));\n    return;\n  }\n  const clamped = Math.min(Math.max(parsed, 1), maxPage);\n  if (clamped !== get(currentRange))\n    set(currentRange, clamped);\n  set(pageDraft, String(clamped));\n}\n\nconst limitId = useId();\nconst rangesId = useId();\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <div\n      :class=\"ui.limit()\"\n      data-id=\"table-pagination-limit-section\"\n    >\n      <label\n        :for=\"limitId\"\n        :class=\"ui.sectionLabel()\"\n      >\n        Rows per page:\n      </label>\n      <RuiMenuSelect\n        :id=\"limitId\"\n        v-model=\"currentLimit\"\n        :options=\"limits\"\n        :disabled=\"loading || disablePerPage || everyLimitFits\"\n        :class-names=\"{ label: ui.select() }\"\n        label=\"\"\n        name=\"limit\"\n        key-attr=\"limit\"\n        text-attr=\"limit\"\n        details=\"hidden\"\n        dense\n        data-id=\"table-pagination-limit\"\n      />\n    </div>\n    <div\n      :class=\"ui.ranges()\"\n      data-id=\"table-pagination-ranges-section\"\n    >\n      <label\n        :for=\"rangesId\"\n        :class=\"ui.sectionLabel({ class: useInputJump ? undefined : 'sr-only' })\"\n      >\n        Page\n      </label>\n      <RuiTextField\n        v-if=\"useInputJump\"\n        :id=\"rangesId\"\n        v-model=\"pageDraft\"\n        :disabled=\"loading || singlePage\"\n        :class=\"[ui.pageInput()]\"\n        type=\"number\"\n        min=\"1\"\n        :max=\"pages\"\n        inputmode=\"numeric\"\n        details=\"hidden\"\n        dense\n        data-id=\"table-pagination-ranges-input\"\n        @blur=\"commitPageInput()\"\n        @keydown.enter=\"commitPageInput()\"\n      />\n      <RuiMenuSelect\n        v-else-if=\"ranges.length > 0\"\n        :id=\"rangesId\"\n        v-model=\"currentRange\"\n        :options=\"ranges\"\n        :disabled=\"loading || singlePage\"\n        :class-names=\"{ label: ui.select() }\"\n        label=\"\"\n        name=\"ranges\"\n        key-attr=\"page\"\n        text-attr=\"text\"\n        details=\"hidden\"\n        dense\n        data-id=\"table-pagination-ranges\"\n      />\n      <span :class=\"ui.indicator()\">\n        {{ indicatorText }}\n      </span>\n    </div>\n    <div\n      :class=\"ui.navigation()\"\n      data-id=\"table-pagination-navigation\"\n    >\n      <RuiButton\n        v-if=\"!mobile\"\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasPrev || loading\"\n        variant=\"text\"\n        icon\n        aria-label=\"First page\"\n        data-id=\"table-pagination-first\"\n        @click=\"onFirst()\"\n      >\n        <RuiIcon name=\"lu-chevrons-left\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasPrev || loading\"\n        variant=\"text\"\n        icon\n        aria-label=\"Previous page\"\n        data-id=\"table-pagination-prev\"\n        @click=\"onPrev()\"\n      >\n        <RuiIcon name=\"lu-chevron-left\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasNext || loading\"\n        variant=\"text\"\n        icon\n        aria-label=\"Next page\"\n        data-id=\"table-pagination-next\"\n        @click=\"onNext()\"\n      >\n        <RuiIcon name=\"lu-chevron-right\" />\n      </RuiButton>\n      <RuiButton\n        v-if=\"!mobile\"\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasNext || loading\"\n        variant=\"text\"\n        icon\n        aria-label=\"Last page\"\n        data-id=\"table-pagination-last\"\n        @click=\"onLast()\"\n      >\n        <RuiIcon name=\"lu-chevrons-right\" />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiTablePagination.js","names":["_sfc_main"],"sources":["../../../src/components/tables/RuiTablePagination.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiMenuSelect from '@/components/forms/select/RuiMenuSelect.vue';\nimport RuiTextField from '@/components/forms/text-field/RuiTextField.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type TablePaginationData, usePaginationNavigation } from '@/components/tables/use-pagination-navigation';\nimport { useTable } from '@/composables/defaults/table';\nimport { paginationStyles } from './table-pagination-styles';\n\nexport type { TablePaginationData };\n\nexport interface Props {\n  dense?: boolean;\n  disablePerPage?: boolean;\n  loading?: boolean;\n  /**\n   * Render a compact, touch-friendly layout: the sections spread across the\n   * full width and the first/last jump buttons are dropped to save space.\n   */\n  mobile?: boolean;\n  /**\n   * Maximum number of pages before the jump-to-page dropdown is replaced\n   * with a numeric input. Set to `1` to use the input whenever there is more\n   * than one page, or `0` to always use the dropdown. Defaults to `500`, since\n   * past that materialising the full range list stalls the main thread.\n   */\n  rangesThreshold?: number;\n}\n\nconst modelValue = defineModel<TablePaginationData>({ required: true });\n\nconst {\n  dense = false,\n  loading = false,\n  disablePerPage = false,\n  rangesThreshold = 500,\n  mobile = false,\n} = defineProps<Props>();\n\nconst ui = computed<ReturnType<typeof paginationStyles>>(() => paginationStyles({ dense, mobile }));\n\nconst tableDefaults = useTable();\n\nconst {\n  limits,\n  currentLimit,\n  pages,\n  ranges,\n  indicatorText,\n  currentRange,\n  useInputJump,\n  hasPrev,\n  hasNext,\n  onPrev,\n  onNext,\n  onFirst,\n  onLast,\n} = usePaginationNavigation(modelValue, tableDefaults, () => rangesThreshold);\n\n/**\n * With every row on one page the bar stays in place, as a summary, but the\n * page jump has nowhere to go, so it disables like the arrows beside it.\n */\nconst singlePage = computed<boolean>(() => get(pages) <= 1);\n\n/**\n * The rows-per-page select disables only once every option would fit all the\n * rows. Until then it stays live even on a single page: it is how a user\n * lowers a limit they raised past the row count.\n */\nconst everyLimitFits = computed<boolean>(() => {\n  const { total } = get(modelValue);\n  return get(singlePage) && get(limits).every(({ limit }) => limit >= total);\n});\n\nconst pageDraft = ref<string>(String(get(currentRange)));\n\nwatch(currentRange, (value) => {\n  set(pageDraft, String(value));\n});\n\nfunction commitPageInput(): void {\n  const parsed = Number.parseInt(get(pageDraft), 10);\n  const maxPage = get(pages);\n  if (!Number.isFinite(parsed) || maxPage === 0) {\n    set(pageDraft, String(get(currentRange)));\n    return;\n  }\n  const clamped = Math.min(Math.max(parsed, 1), maxPage);\n  if (clamped !== get(currentRange))\n    set(currentRange, clamped);\n  set(pageDraft, String(clamped));\n}\n\nconst limitId = useId();\nconst rangesId = useId();\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <div\n      :class=\"ui.limit()\"\n      data-id=\"table-pagination-limit-section\"\n    >\n      <label\n        :for=\"limitId\"\n        :class=\"ui.sectionLabel()\"\n      >\n        Rows per page:\n      </label>\n      <RuiMenuSelect\n        :id=\"limitId\"\n        v-model=\"currentLimit\"\n        :options=\"limits\"\n        :disabled=\"loading || disablePerPage || everyLimitFits\"\n        :class-names=\"{ label: ui.select() }\"\n        label=\"\"\n        name=\"limit\"\n        key-attr=\"limit\"\n        text-attr=\"limit\"\n        details=\"hidden\"\n        dense\n        data-id=\"table-pagination-limit\"\n      />\n    </div>\n    <div\n      :class=\"ui.ranges()\"\n      data-id=\"table-pagination-ranges-section\"\n    >\n      <label\n        :for=\"rangesId\"\n        :class=\"ui.sectionLabel({ class: useInputJump ? undefined : 'sr-only' })\"\n      >\n        Page\n      </label>\n      <RuiTextField\n        v-if=\"useInputJump\"\n        :id=\"rangesId\"\n        v-model=\"pageDraft\"\n        :disabled=\"loading || singlePage\"\n        :class=\"[ui.pageInput()]\"\n        type=\"number\"\n        min=\"1\"\n        :max=\"pages\"\n        inputmode=\"numeric\"\n        details=\"hidden\"\n        dense\n        data-id=\"table-pagination-ranges-input\"\n        @blur=\"commitPageInput()\"\n        @keydown.enter=\"commitPageInput()\"\n      />\n      <RuiMenuSelect\n        v-else-if=\"ranges.length > 0\"\n        :id=\"rangesId\"\n        v-model=\"currentRange\"\n        :options=\"ranges\"\n        :disabled=\"loading || singlePage\"\n        :class-names=\"{ label: ui.select() }\"\n        label=\"\"\n        name=\"ranges\"\n        key-attr=\"page\"\n        text-attr=\"text\"\n        details=\"hidden\"\n        dense\n        data-id=\"table-pagination-ranges\"\n      />\n      <span :class=\"ui.indicator()\">\n        {{ indicatorText }}\n      </span>\n    </div>\n    <div\n      :class=\"ui.navigation()\"\n      data-id=\"table-pagination-navigation\"\n    >\n      <RuiButton\n        v-if=\"!mobile\"\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasPrev || loading\"\n        variant=\"text\"\n        icon\n        aria-label=\"First page\"\n        data-id=\"table-pagination-first\"\n        @click=\"onFirst()\"\n      >\n        <RuiIcon name=\"lu-chevrons-left\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasPrev || loading\"\n        variant=\"text\"\n        icon\n        aria-label=\"Previous page\"\n        data-id=\"table-pagination-prev\"\n        @click=\"onPrev()\"\n      >\n        <RuiIcon name=\"lu-chevron-left\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasNext || loading\"\n        variant=\"text\"\n        icon\n        aria-label=\"Next page\"\n        data-id=\"table-pagination-next\"\n        @click=\"onNext()\"\n      >\n        <RuiIcon name=\"lu-chevron-right\" />\n      </RuiButton>\n      <RuiButton\n        v-if=\"!mobile\"\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasNext || loading\"\n        variant=\"text\"\n        icon\n        aria-label=\"Last page\"\n        data-id=\"table-pagination-last\"\n        @click=\"onLast()\"\n      >\n        <RuiIcon name=\"lu-chevrons-right\" />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/tables/RuiTablePagination.vue_vue_type_script_setup_true_lang.js

@@ -1,11 +1,11 @@
 import { useTable } from "../../composables/defaults/table.js";
 import { get, set } from "../../vendor/@vueuse/shared/dist/index.js";
-import { tv } from "../../utils/tv.js";
 import RuiIcon_default from "../icons/RuiIcon.js";
 import RuiButton_default from "../buttons/button/RuiButton.js";
 import RuiTextField_default from "../forms/text-field/RuiTextField.js";
 import RuiMenuSelect_default from "../forms/select/RuiMenuSelect.js";
 import { usePaginationNavigation } from "./use-pagination-navigation.js";
+import { paginationStyles } from "./table-pagination-styles.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, isRef, mergeModels, normalizeClass, openBlock, ref, toDisplayString, unref, useId, useModel, watch, withCtx, withKeys } from "vue";
 //#region src/components/tables/RuiTablePagination.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["for"];
@@ -37,35 +37,6 @@ var RuiTablePagination_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 	emits: ["update:modelValue"],
 	setup(__props) {
 		const modelValue = useModel(__props, "modelValue");
-		const paginationStyles = tv({
-			slots: {
-				wrapper: "relative flex flex-wrap items-center justify-end gap-x-4 gap-y-0",
-				limit: "flex items-center between:ml-2 between:mr-0 text-caption",
-				ranges: "flex items-center between:ml-2 between:mr-0 text-caption pr-2",
-				pageInput: "w-14 [&_input]:text-center [&_input]:px-1! [&_input]:text-xs! [&_input]:leading-5!",
-				sectionLabel: "text-rui-text-secondary whitespace-nowrap py-3",
-				select: "text-xs! pl-3!",
-				indicator: "text-rui-text text-caption whitespace-nowrap",
-				navigation: "flex items-center"
-			},
-			variants: {
-				dense: {
-					true: {
-						select: "min-h-7!",
-						pageInput: "[&_input]:py-1!"
-					},
-					false: {
-						select: "min-h-8!",
-						pageInput: "[&_input]:py-1.5!"
-					}
-				},
-				mobile: { true: {
-					wrapper: "flex-nowrap justify-between gap-x-2 gap-y-0",
-					ranges: "pr-0",
-					sectionLabel: "sr-only"
-				} }
-			}
-		});
 		const ui = computed(() => paginationStyles({
 			dense: __props.dense,
 			mobile: __props.mobile