@rotki/ui-library 2.16.1 → 2.16.2

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

@@ -1 +1 @@
-{"version":3,"file":"RuiTabItems.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/tabs/tab-items/RuiTabItems.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends string | number\">\nimport { Fragment, isVNode } from 'vue';\n\ndefineOptions({\n  name: 'RuiTabItems',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<T>();\n\nconst slots = useSlots();\n\nconst reverse = ref<boolean>(false);\nconst currIndex = ref<number>(-1);\nconst activeIndex = ref<number>(-1);\nconst inner = useTemplateRef<HTMLDivElement>('inner');\n\nconst { height: innerHeight } = useElementSize(inner);\n\nconst children = computed<VNode[]>(() => {\n  const slotContent = slots.default?.() ?? [];\n\n  const tabs = getChildrenTabs(slotContent);\n\n  let anyActive = false;\n  const children = tabs.map((tab, index) => {\n    const value = tab.props?.value ?? index;\n    const active = get(modelValue) === value;\n    if (active) {\n      anyActive = true;\n      if (index !== get(currIndex)) {\n        set(reverse, index < get(currIndex));\n        set(currIndex, index);\n      }\n    }\n\n    return {\n      ...tab,\n      props: {\n        value,\n        ...tab.props,\n      },\n    };\n  });\n\n  if (!anyActive)\n    set(currIndex, -1);\n\n  return children;\n});\n\n// When using dynamic content with v-for the slot content can contain fragment,\n// Go through the fragment and always return RuiTabItem only\nfunction getChildrenTabs(children: VNode[]): VNode[] {\n  return children\n    .flatMap((item) => {\n      if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)\n        return getChildrenTabs(item.children.filter(isVNode));\n\n      return [item];\n    })\n    .flat();\n}\n\nwatch(currIndex, (index) => {\n  nextTick(() => {\n    set(activeIndex, index);\n  });\n});\n</script>\n\n<template>\n  <div\n    class=\"grow transition-all overflow-hidden\"\n    :style=\"{ height: `${innerHeight}px` }\"\n    v-bind=\"$attrs\"\n  >\n    <div ref=\"inner\">\n      <Component\n        :is=\"child\"\n        v-for=\"(child, i) in children\"\n        :key=\"i\"\n        :reverse=\"reverse\"\n        :active=\"i === activeIndex\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAQA,MAAM,aAAa,SAAc,SAAA,aAAE;EAEnC,MAAM,QAAQ,UAAU;EAExB,MAAM,UAAU,IAAa,MAAM;EACnC,MAAM,YAAY,IAAY,GAAG;EACjC,MAAM,cAAc,IAAY,GAAG;EACnC,MAAM,QAAQ,eAA+B,QAAQ;EAErD,MAAM,EAAE,QAAQ,gBAAgB,eAAe,MAAM;EAErD,MAAM,WAAW,eAAwB;GAGvC,MAAM,OAAO,gBAFO,MAAM,WAAW,IAAI,EAAE,CAEF;GAEzC,IAAI,YAAY;GAChB,MAAM,WAAW,KAAK,KAAK,KAAK,UAAU;IACxC,MAAM,QAAQ,IAAI,OAAO,SAAS;AAElC,QADe,MAAI,WAAW,KAAK,OACvB;AACV,iBAAY;AACZ,SAAI,UAAU,MAAI,UAAU,EAAE;AAC5B,YAAI,SAAS,QAAQ,MAAI,UAAU,CAAC;AACpC,YAAI,WAAW,MAAM;;;AAIzB,WAAO;KACL,GAAG;KACH,OAAO;MACL;MACA,GAAG,IAAI;;KAEV;KACD;AAEF,OAAI,CAAC,UACH,OAAI,WAAW,GAAG;AAEpB,UAAO;IACP;EAIF,SAAS,gBAAgB,UAA4B;AACnD,UAAO,SACJ,SAAS,SAAS;AACjB,QAAI,KAAK,SAAS,YAAY,MAAM,QAAQ,KAAK,SAAS,IAAI,KAAK,SAAS,SAAS,EACnF,QAAO,gBAAgB,KAAK,SAAS,OAAO,QAAQ,CAAC;AAEvD,WAAO,CAAC,KAAK;KACd,CACA,MAAM;;AAGX,QAAM,YAAY,UAAU;AAC1B,kBAAe;AACb,UAAI,aAAa,MAAM;KACvB;IACF;;uBAIA,mBAcM,OAdN,WAcM;IAbJ,OAAM;IACL,OAAK,EAAA,QAAA,GAAe,MAAA,YAAW,CAAA,KAAA;MACxBA,KAAAA,OAAM,EAAA,CAEd,mBAQM,OAAA;aARG;IAAJ,KAAI;yBACP,mBAME,UAAA,MAAA,WAJqB,MAAA,SAAQ,GAArB,OAAO,MAAC;wBAFlB,YAME,wBALK,MAAK,EAAA;KAET,KAAK;KACL,SAAS,MAAA,QAAO;KAChB,QAAQ,MAAM,MAAA,YAAA"}
+{"version":3,"file":"RuiTabItems.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/tabs/tab-items/RuiTabItems.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends string | number\">\nimport { Fragment, isVNode } from 'vue';\n\ndefineOptions({\n  name: 'RuiTabItems',\n  inheritAttrs: false,\n});\n\n// Default matches RuiTabs' `defineModel<... >({ default: 0 })`. Without a\n// default, consumers that bind both components to the same ref (e.g.\n// `v-model=\"item.modelValue\"` on both RuiTabs and RuiTabItems, where the\n// ref starts as `undefined`) leave RuiTabItems with `modelValue === undefined`.\n// The `active = modelValue === value` check then fails for every tab — the\n// panel renders but stays height:0, so e2e `toHaveText` and `toBeVisible`\n// assertions pass the element but see no content.\nconst modelValue = defineModel<T>({ default: 0 as T });\n\nconst slots = useSlots();\n\nconst reverse = ref<boolean>(false);\nconst currIndex = ref<number>(-1);\nconst activeIndex = ref<number>(-1);\nconst inner = useTemplateRef<HTMLDivElement>('inner');\n\nconst { height: innerHeight } = useElementSize(inner);\n\nconst children = computed<VNode[]>(() => {\n  const slotContent = slots.default?.() ?? [];\n\n  const tabs = getChildrenTabs(slotContent);\n\n  let anyActive = false;\n  const children = tabs.map((tab, index) => {\n    const value = tab.props?.value ?? index;\n    const active = get(modelValue) === value;\n    if (active) {\n      anyActive = true;\n      if (index !== get(currIndex)) {\n        set(reverse, index < get(currIndex));\n        set(currIndex, index);\n      }\n    }\n\n    return {\n      ...tab,\n      props: {\n        value,\n        ...tab.props,\n      },\n    };\n  });\n\n  if (!anyActive)\n    set(currIndex, -1);\n\n  return children;\n});\n\n// When using dynamic content with v-for the slot content can contain fragment,\n// Go through the fragment and always return RuiTabItem only\nfunction getChildrenTabs(children: VNode[]): VNode[] {\n  return children\n    .flatMap((item) => {\n      if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)\n        return getChildrenTabs(item.children.filter(isVNode));\n\n      return [item];\n    })\n    .flat();\n}\n\nwatch(currIndex, (index) => {\n  nextTick(() => {\n    set(activeIndex, index);\n  });\n});\n</script>\n\n<template>\n  <div\n    class=\"grow transition-all overflow-hidden\"\n    :style=\"{ height: `${innerHeight}px` }\"\n    v-bind=\"$attrs\"\n  >\n    <div ref=\"inner\">\n      <Component\n        :is=\"child\"\n        v-for=\"(child, i) in children\"\n        :key=\"i\"\n        :reverse=\"reverse\"\n        :active=\"i === activeIndex\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAeA,MAAM,aAAa,SAAc,SAAA,aAAqB;EAEtD,MAAM,QAAQ,UAAU;EAExB,MAAM,UAAU,IAAa,MAAM;EACnC,MAAM,YAAY,IAAY,GAAG;EACjC,MAAM,cAAc,IAAY,GAAG;EACnC,MAAM,QAAQ,eAA+B,QAAQ;EAErD,MAAM,EAAE,QAAQ,gBAAgB,eAAe,MAAM;EAErD,MAAM,WAAW,eAAwB;GAGvC,MAAM,OAAO,gBAFO,MAAM,WAAW,IAAI,EAAE,CAEF;GAEzC,IAAI,YAAY;GAChB,MAAM,WAAW,KAAK,KAAK,KAAK,UAAU;IACxC,MAAM,QAAQ,IAAI,OAAO,SAAS;AAElC,QADe,MAAI,WAAW,KAAK,OACvB;AACV,iBAAY;AACZ,SAAI,UAAU,MAAI,UAAU,EAAE;AAC5B,YAAI,SAAS,QAAQ,MAAI,UAAU,CAAC;AACpC,YAAI,WAAW,MAAM;;;AAIzB,WAAO;KACL,GAAG;KACH,OAAO;MACL;MACA,GAAG,IAAI;;KAEV;KACD;AAEF,OAAI,CAAC,UACH,OAAI,WAAW,GAAG;AAEpB,UAAO;IACP;EAIF,SAAS,gBAAgB,UAA4B;AACnD,UAAO,SACJ,SAAS,SAAS;AACjB,QAAI,KAAK,SAAS,YAAY,MAAM,QAAQ,KAAK,SAAS,IAAI,KAAK,SAAS,SAAS,EACnF,QAAO,gBAAgB,KAAK,SAAS,OAAO,QAAQ,CAAC;AAEvD,WAAO,CAAC,KAAK;KACd,CACA,MAAM;;AAGX,QAAM,YAAY,UAAU;AAC1B,kBAAe;AACb,UAAI,aAAa,MAAM;KACvB;IACF;;uBAIA,mBAcM,OAdN,WAcM;IAbJ,OAAM;IACL,OAAK,EAAA,QAAA,GAAe,MAAA,YAAW,CAAA,KAAA;MACxBA,KAAAA,OAAM,EAAA,CAEd,mBAQM,OAAA;aARG;IAAJ,KAAI;yBACP,mBAME,UAAA,MAAA,WAJqB,MAAA,SAAQ,GAArB,OAAO,MAAC;wBAFlB,YAME,wBALK,MAAK,EAAA;KAET,KAAK;KACL,SAAS,MAAA,QAAO;KAChB,QAAQ,MAAM,MAAA,YAAA"}

package/dist/components/tabs/tabs/RuiTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTabs.js","names":[],"sources":["../../../../src/components/tabs/tabs/RuiTabs.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { Fragment, isVNode, type VNode } from 'vue';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type TabAlignment, type TabIndicatorPosition, TabLayout } from '@/components/tabs/tab-props';\nimport { useTabRouting } from '@/components/tabs/tabs/use-tab-routing';\nimport { useTabScroll } from '@/components/tabs/tabs/use-tab-scroll';\nimport { tv } from '@/utils/tv';\n\ntype ChildNode = VNode & { props: Record<string, any> };\n\ninterface ResolvedTabProps {\n  value?: string | number;\n  to?: unknown;\n  link?: boolean;\n  exact?: boolean;\n  exactPath?: boolean;\n}\n\nexport interface Props {\n  color?: ContextColorsType;\n  vertical?: boolean;\n  disabled?: boolean;\n  grow?: boolean;\n  align?: TabAlignment;\n  indicatorPosition?: TabIndicatorPosition;\n}\n\ndefineOptions({\n  name: 'RuiTabs',\n});\n\nconst modelValue = defineModel<number | string>();\n\nconst {\n  color,\n  vertical = false,\n  disabled = false,\n  grow = false,\n  align = 'center',\n  indicatorPosition = 'end',\n} = defineProps<Props>();\n\nconst internalModelValue = ref<string | number>();\nconst bar = useTemplateRef<HTMLDivElement>('bar');\nconst wrapper = useTemplateRef<HTMLDivElement>('wrapper');\n\nconst tabs = tv({\n  slots: {\n    root: '',\n    arrow: '',\n    bar: 'no-scrollbar max-h-full overflow-auto',\n    wrapper: 'h-full inline-flex max-w-none',\n  },\n  variants: {\n    layout: {\n      [TabLayout.horizontal]: {\n        root: 'flex h-fit',\n        arrow: 'h-[3rem] w-10',\n        bar: 'h-[3rem]',\n        wrapper: '',\n      },\n      [TabLayout.vertical]: {\n        root: 'inline-flex flex-col',\n        arrow: 'min-h-[3rem] w-full',\n        bar: '',\n        wrapper: 'flex-col h-auto',\n      },\n    },\n    wide: {\n      true: {\n        bar: 'w-full',\n        wrapper: 'min-w-full',\n      },\n    },\n  },\n  defaultVariants: { layout: TabLayout.horizontal },\n});\n\nconst slots = useSlots();\n\nconst {\n  showArrows,\n  prevArrowDisabled,\n  nextArrowDisabled,\n  onPrevSliderClick,\n  onNextSliderClick,\n  keepActiveTabVisible,\n} = useTabScroll({ bar, wrapper, vertical: () => vertical });\n\nconst { resolveRoute, isPathMatch } = useTabRouting({\n  onRouteChange: () => applyNewValue(true),\n});\n\nconst layout = computed<TabLayout>(() => vertical ? TabLayout.vertical : TabLayout.horizontal);\nconst ui = computed<ReturnType<typeof tabs>>(() => tabs({ layout: get(layout), wide: vertical || grow }));\n\nconst children = computed<ChildNode[]>(() => {\n  const slotContent = slots.default?.() ?? [];\n\n  const tabs = getChildrenTabs(slotContent);\n\n  const currentModelValue = get(internalModelValue);\n  const inheritedProps = {\n    color,\n    grow,\n    disabled,\n    vertical,\n    align,\n    indicatorPosition,\n  };\n\n  return tabs.map((tab, index) => {\n    let tabValue = tab.props?.value ?? index;\n    if (tab.props?.link !== false && tab.props?.to)\n      tabValue = tab.props.to;\n\n    const active = currentModelValue === tabValue;\n    return {\n      ...tab,\n      props: {\n        value: tabValue,\n        active,\n        ...inheritedProps,\n        ...tab.props,\n      },\n    };\n  });\n});\n\n// When using dynamic content with v-for the slot content can contain fragment,\n// Go through the fragment and always return RuiTab only\nfunction getChildrenTabs(children: VNode[]): VNode[] {\n  return children.flatMap((item) => {\n    if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)\n      return getChildrenTabs(item.children.filter(isVNode));\n\n    return [item];\n  }).flat();\n}\n\nfunction updateModelValue(newModelValue: string | number): void {\n  set(modelValue, newModelValue);\n  set(internalModelValue, newModelValue);\n}\n\nfunction getTabRouteProps(props: Record<string, unknown>): ResolvedTabProps {\n  return {\n    value: typeof props.value === 'string' || typeof props.value === 'number' ? props.value : undefined,\n    to: props.to ?? undefined,\n    link: typeof props.link === 'boolean' ? props.link : undefined,\n    exact: typeof props.exact === 'boolean' ? props.exact : undefined,\n    exactPath: typeof props.exactPath === 'boolean' ? props.exactPath : undefined,\n  };\n}\n\nfunction resolveActiveValue(onlyLink: boolean): string | number | undefined {\n  const enabledChildren = get(children).filter(child => !child.props?.disabled);\n  if (enabledChildren.length === 0)\n    return undefined;\n\n  let result: string | number = get(modelValue) || 0;\n  enabledChildren.forEach((child, index) => {\n    const tabProps = getTabRouteProps(child.props);\n    if (!onlyLink && index === 0 && tabProps.value)\n      result = tabProps.value;\n\n    const fullPath = resolveRoute(tabProps.to);\n\n    if (tabProps.link !== false && fullPath && isPathMatch(fullPath, tabProps))\n      result = fullPath;\n  });\n  return result;\n}\n\nfunction applyNewValue(onlyLink = false): void {\n  const value = resolveActiveValue(onlyLink);\n  if (value !== undefined)\n    updateModelValue(value);\n\n  keepActiveTabVisible();\n}\n\nwatchImmediate(() => get(modelValue), (modelValue) => {\n  set(internalModelValue, modelValue);\n});\n\nwatch(internalModelValue, () => {\n  keepActiveTabVisible();\n});\n\nonMounted(() => {\n  if (get(modelValue) !== undefined)\n    return;\n\n  applyNewValue();\n});\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    :data-vertical=\"vertical || undefined\"\n  >\n    <div\n      v-if=\"showArrows\"\n      :class=\"ui.arrow()\"\n    >\n      <RuiButton\n        class=\"w-full h-full !rounded-none\"\n        variant=\"text\"\n        :color=\"color\"\n        :disabled=\"prevArrowDisabled\"\n        @click=\"onPrevSliderClick()\"\n      >\n        <RuiIcon :name=\"vertical ? 'lu-chevron-up' : 'lu-chevron-left'\" />\n      </RuiButton>\n    </div>\n    <div\n      ref=\"bar\"\n      :class=\"ui.bar()\"\n    >\n      <div\n        ref=\"wrapper\"\n        role=\"tablist\"\n        data-id=\"tabs-wrapper\"\n        :class=\"ui.wrapper()\"\n      >\n        <Component\n          :is=\"child\"\n          v-for=\"(child, i) in children\"\n          :key=\"i\"\n          @click=\"updateModelValue($event)\"\n        />\n      </div>\n    </div>\n    <div\n      v-if=\"showArrows\"\n      :class=\"ui.arrow()\"\n    >\n      <RuiButton\n        class=\"w-full h-full !rounded-none\"\n        variant=\"text\"\n        :color=\"color\"\n        :disabled=\"nextArrowDisabled\"\n        @click=\"onNextSliderClick()\"\n      >\n        <RuiIcon :name=\"vertical ? 'lu-chevron-down' : 'lu-chevron-right'\" />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiTabs.js","names":[],"sources":["../../../../src/components/tabs/tabs/RuiTabs.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { Fragment, isVNode, type VNode } from 'vue';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type TabAlignment, type TabIndicatorPosition, TabLayout } from '@/components/tabs/tab-props';\nimport { useTabRouting } from '@/components/tabs/tabs/use-tab-routing';\nimport { useTabScroll } from '@/components/tabs/tabs/use-tab-scroll';\nimport { tv } from '@/utils/tv';\n\ntype ChildNode = VNode & { props: Record<string, any> };\n\ninterface ResolvedTabProps {\n  value?: string | number;\n  to?: unknown;\n  link?: boolean;\n  exact?: boolean;\n  exactPath?: boolean;\n}\n\nexport interface Props {\n  color?: ContextColorsType;\n  vertical?: boolean;\n  disabled?: boolean;\n  grow?: boolean;\n  align?: TabAlignment;\n  indicatorPosition?: TabIndicatorPosition;\n}\n\ndefineOptions({\n  name: 'RuiTabs',\n});\n\n// Default 0 (first tab) matches the existing internal fallback on line 163.\n// Providing a default narrows the `update:modelValue` emit payload from\n// `value?: number | string` to `value: number | string`, so consumers can\n// type their handler signatures without undefined unions.\nconst modelValue = defineModel<number | string>({ default: 0 });\n\nconst {\n  color,\n  vertical = false,\n  disabled = false,\n  grow = false,\n  align = 'center',\n  indicatorPosition = 'end',\n} = defineProps<Props>();\n\nconst internalModelValue = ref<string | number>();\nconst bar = useTemplateRef<HTMLDivElement>('bar');\nconst wrapper = useTemplateRef<HTMLDivElement>('wrapper');\n\nconst tabs = tv({\n  slots: {\n    root: '',\n    arrow: '',\n    bar: 'no-scrollbar max-h-full overflow-auto',\n    wrapper: 'h-full inline-flex max-w-none',\n  },\n  variants: {\n    layout: {\n      [TabLayout.horizontal]: {\n        root: 'flex h-fit',\n        arrow: 'h-[3rem] w-10',\n        bar: 'h-[3rem]',\n        wrapper: '',\n      },\n      [TabLayout.vertical]: {\n        root: 'inline-flex flex-col',\n        arrow: 'min-h-[3rem] w-full',\n        bar: '',\n        wrapper: 'flex-col h-auto',\n      },\n    },\n    wide: {\n      true: {\n        bar: 'w-full',\n        wrapper: 'min-w-full',\n      },\n    },\n  },\n  defaultVariants: { layout: TabLayout.horizontal },\n});\n\nconst slots = useSlots();\n\nconst {\n  showArrows,\n  prevArrowDisabled,\n  nextArrowDisabled,\n  onPrevSliderClick,\n  onNextSliderClick,\n  keepActiveTabVisible,\n} = useTabScroll({ bar, wrapper, vertical: () => vertical });\n\nconst { resolveRoute, isPathMatch } = useTabRouting({\n  onRouteChange: () => applyNewValue(true),\n});\n\nconst layout = computed<TabLayout>(() => vertical ? TabLayout.vertical : TabLayout.horizontal);\nconst ui = computed<ReturnType<typeof tabs>>(() => tabs({ layout: get(layout), wide: vertical || grow }));\n\nconst children = computed<ChildNode[]>(() => {\n  const slotContent = slots.default?.() ?? [];\n\n  const tabs = getChildrenTabs(slotContent);\n\n  const currentModelValue = get(internalModelValue);\n  const inheritedProps = {\n    color,\n    grow,\n    disabled,\n    vertical,\n    align,\n    indicatorPosition,\n  };\n\n  return tabs.map((tab, index) => {\n    let tabValue = tab.props?.value ?? index;\n    if (tab.props?.link !== false && tab.props?.to)\n      tabValue = tab.props.to;\n\n    const active = currentModelValue === tabValue;\n    return {\n      ...tab,\n      props: {\n        value: tabValue,\n        active,\n        ...inheritedProps,\n        ...tab.props,\n      },\n    };\n  });\n});\n\n// When using dynamic content with v-for the slot content can contain fragment,\n// Go through the fragment and always return RuiTab only\nfunction getChildrenTabs(children: VNode[]): VNode[] {\n  return children.flatMap((item) => {\n    if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)\n      return getChildrenTabs(item.children.filter(isVNode));\n\n    return [item];\n  }).flat();\n}\n\nfunction updateModelValue(newModelValue: string | number): void {\n  set(modelValue, newModelValue);\n  set(internalModelValue, newModelValue);\n}\n\nfunction getTabRouteProps(props: Record<string, unknown>): ResolvedTabProps {\n  return {\n    value: typeof props.value === 'string' || typeof props.value === 'number' ? props.value : undefined,\n    to: props.to ?? undefined,\n    link: typeof props.link === 'boolean' ? props.link : undefined,\n    exact: typeof props.exact === 'boolean' ? props.exact : undefined,\n    exactPath: typeof props.exactPath === 'boolean' ? props.exactPath : undefined,\n  };\n}\n\nfunction resolveActiveValue(onlyLink: boolean): string | number | undefined {\n  const enabledChildren = get(children).filter(child => !child.props?.disabled);\n  if (enabledChildren.length === 0)\n    return undefined;\n\n  let result: string | number = get(modelValue) || 0;\n  enabledChildren.forEach((child, index) => {\n    const tabProps = getTabRouteProps(child.props);\n    if (!onlyLink && index === 0 && tabProps.value)\n      result = tabProps.value;\n\n    const fullPath = resolveRoute(tabProps.to);\n\n    if (tabProps.link !== false && fullPath && isPathMatch(fullPath, tabProps))\n      result = fullPath;\n  });\n  return result;\n}\n\nfunction applyNewValue(onlyLink = false): void {\n  const value = resolveActiveValue(onlyLink);\n  if (value !== undefined)\n    updateModelValue(value);\n\n  keepActiveTabVisible();\n}\n\nwatchImmediate(() => get(modelValue), (modelValue) => {\n  set(internalModelValue, modelValue);\n});\n\nwatch(internalModelValue, () => {\n  keepActiveTabVisible();\n});\n\nonMounted(() => {\n  if (get(modelValue) !== undefined)\n    return;\n\n  applyNewValue();\n});\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    :data-vertical=\"vertical || undefined\"\n  >\n    <div\n      v-if=\"showArrows\"\n      :class=\"ui.arrow()\"\n    >\n      <RuiButton\n        class=\"w-full h-full !rounded-none\"\n        variant=\"text\"\n        :color=\"color\"\n        :disabled=\"prevArrowDisabled\"\n        @click=\"onPrevSliderClick()\"\n      >\n        <RuiIcon :name=\"vertical ? 'lu-chevron-up' : 'lu-chevron-left'\" />\n      </RuiButton>\n    </div>\n    <div\n      ref=\"bar\"\n      :class=\"ui.bar()\"\n    >\n      <div\n        ref=\"wrapper\"\n        role=\"tablist\"\n        data-id=\"tabs-wrapper\"\n        :class=\"ui.wrapper()\"\n      >\n        <Component\n          :is=\"child\"\n          v-for=\"(child, i) in children\"\n          :key=\"i\"\n          @click=\"updateModelValue($event)\"\n        />\n      </div>\n    </div>\n    <div\n      v-if=\"showArrows\"\n      :class=\"ui.arrow()\"\n    >\n      <RuiButton\n        class=\"w-full h-full !rounded-none\"\n        variant=\"text\"\n        :color=\"color\"\n        :disabled=\"nextArrowDisabled\"\n        @click=\"onNextSliderClick()\"\n      >\n        <RuiIcon :name=\"vertical ? 'lu-chevron-down' : 'lu-chevron-right'\" />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/tabs/tabs/RuiTabs.vue.d.ts

@@ -14,9 +14,9 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | number | undefined) => any;
+    "update:modelValue": (value: string | number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/tabs/tabs/RuiTabs.vue_vue_type_script_setup_true_lang.js

@@ -29,7 +29,7 @@ var RuiTabs_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		align: { default: "center" },
 		indicatorPosition: { default: "end" }
 	}, {
-		"modelValue": {},
+		"modelValue": { default: 0 },
 		"modelModifiers": {}
 	}),
 	emits: ["update:modelValue"],

package/dist/components/tabs/tabs/RuiTabs.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTabs.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/tabs/tabs/RuiTabs.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { Fragment, isVNode, type VNode } from 'vue';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type TabAlignment, type TabIndicatorPosition, TabLayout } from '@/components/tabs/tab-props';\nimport { useTabRouting } from '@/components/tabs/tabs/use-tab-routing';\nimport { useTabScroll } from '@/components/tabs/tabs/use-tab-scroll';\nimport { tv } from '@/utils/tv';\n\ntype ChildNode = VNode & { props: Record<string, any> };\n\ninterface ResolvedTabProps {\n  value?: string | number;\n  to?: unknown;\n  link?: boolean;\n  exact?: boolean;\n  exactPath?: boolean;\n}\n\nexport interface Props {\n  color?: ContextColorsType;\n  vertical?: boolean;\n  disabled?: boolean;\n  grow?: boolean;\n  align?: TabAlignment;\n  indicatorPosition?: TabIndicatorPosition;\n}\n\ndefineOptions({\n  name: 'RuiTabs',\n});\n\nconst modelValue = defineModel<number | string>();\n\nconst {\n  color,\n  vertical = false,\n  disabled = false,\n  grow = false,\n  align = 'center',\n  indicatorPosition = 'end',\n} = defineProps<Props>();\n\nconst internalModelValue = ref<string | number>();\nconst bar = useTemplateRef<HTMLDivElement>('bar');\nconst wrapper = useTemplateRef<HTMLDivElement>('wrapper');\n\nconst tabs = tv({\n  slots: {\n    root: '',\n    arrow: '',\n    bar: 'no-scrollbar max-h-full overflow-auto',\n    wrapper: 'h-full inline-flex max-w-none',\n  },\n  variants: {\n    layout: {\n      [TabLayout.horizontal]: {\n        root: 'flex h-fit',\n        arrow: 'h-[3rem] w-10',\n        bar: 'h-[3rem]',\n        wrapper: '',\n      },\n      [TabLayout.vertical]: {\n        root: 'inline-flex flex-col',\n        arrow: 'min-h-[3rem] w-full',\n        bar: '',\n        wrapper: 'flex-col h-auto',\n      },\n    },\n    wide: {\n      true: {\n        bar: 'w-full',\n        wrapper: 'min-w-full',\n      },\n    },\n  },\n  defaultVariants: { layout: TabLayout.horizontal },\n});\n\nconst slots = useSlots();\n\nconst {\n  showArrows,\n  prevArrowDisabled,\n  nextArrowDisabled,\n  onPrevSliderClick,\n  onNextSliderClick,\n  keepActiveTabVisible,\n} = useTabScroll({ bar, wrapper, vertical: () => vertical });\n\nconst { resolveRoute, isPathMatch } = useTabRouting({\n  onRouteChange: () => applyNewValue(true),\n});\n\nconst layout = computed<TabLayout>(() => vertical ? TabLayout.vertical : TabLayout.horizontal);\nconst ui = computed<ReturnType<typeof tabs>>(() => tabs({ layout: get(layout), wide: vertical || grow }));\n\nconst children = computed<ChildNode[]>(() => {\n  const slotContent = slots.default?.() ?? [];\n\n  const tabs = getChildrenTabs(slotContent);\n\n  const currentModelValue = get(internalModelValue);\n  const inheritedProps = {\n    color,\n    grow,\n    disabled,\n    vertical,\n    align,\n    indicatorPosition,\n  };\n\n  return tabs.map((tab, index) => {\n    let tabValue = tab.props?.value ?? index;\n    if (tab.props?.link !== false && tab.props?.to)\n      tabValue = tab.props.to;\n\n    const active = currentModelValue === tabValue;\n    return {\n      ...tab,\n      props: {\n        value: tabValue,\n        active,\n        ...inheritedProps,\n        ...tab.props,\n      },\n    };\n  });\n});\n\n// When using dynamic content with v-for the slot content can contain fragment,\n// Go through the fragment and always return RuiTab only\nfunction getChildrenTabs(children: VNode[]): VNode[] {\n  return children.flatMap((item) => {\n    if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)\n      return getChildrenTabs(item.children.filter(isVNode));\n\n    return [item];\n  }).flat();\n}\n\nfunction updateModelValue(newModelValue: string | number): void {\n  set(modelValue, newModelValue);\n  set(internalModelValue, newModelValue);\n}\n\nfunction getTabRouteProps(props: Record<string, unknown>): ResolvedTabProps {\n  return {\n    value: typeof props.value === 'string' || typeof props.value === 'number' ? props.value : undefined,\n    to: props.to ?? undefined,\n    link: typeof props.link === 'boolean' ? props.link : undefined,\n    exact: typeof props.exact === 'boolean' ? props.exact : undefined,\n    exactPath: typeof props.exactPath === 'boolean' ? props.exactPath : undefined,\n  };\n}\n\nfunction resolveActiveValue(onlyLink: boolean): string | number | undefined {\n  const enabledChildren = get(children).filter(child => !child.props?.disabled);\n  if (enabledChildren.length === 0)\n    return undefined;\n\n  let result: string | number = get(modelValue) || 0;\n  enabledChildren.forEach((child, index) => {\n    const tabProps = getTabRouteProps(child.props);\n    if (!onlyLink && index === 0 && tabProps.value)\n      result = tabProps.value;\n\n    const fullPath = resolveRoute(tabProps.to);\n\n    if (tabProps.link !== false && fullPath && isPathMatch(fullPath, tabProps))\n      result = fullPath;\n  });\n  return result;\n}\n\nfunction applyNewValue(onlyLink = false): void {\n  const value = resolveActiveValue(onlyLink);\n  if (value !== undefined)\n    updateModelValue(value);\n\n  keepActiveTabVisible();\n}\n\nwatchImmediate(() => get(modelValue), (modelValue) => {\n  set(internalModelValue, modelValue);\n});\n\nwatch(internalModelValue, () => {\n  keepActiveTabVisible();\n});\n\nonMounted(() => {\n  if (get(modelValue) !== undefined)\n    return;\n\n  applyNewValue();\n});\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    :data-vertical=\"vertical || undefined\"\n  >\n    <div\n      v-if=\"showArrows\"\n      :class=\"ui.arrow()\"\n    >\n      <RuiButton\n        class=\"w-full h-full !rounded-none\"\n        variant=\"text\"\n        :color=\"color\"\n        :disabled=\"prevArrowDisabled\"\n        @click=\"onPrevSliderClick()\"\n      >\n        <RuiIcon :name=\"vertical ? 'lu-chevron-up' : 'lu-chevron-left'\" />\n      </RuiButton>\n    </div>\n    <div\n      ref=\"bar\"\n      :class=\"ui.bar()\"\n    >\n      <div\n        ref=\"wrapper\"\n        role=\"tablist\"\n        data-id=\"tabs-wrapper\"\n        :class=\"ui.wrapper()\"\n      >\n        <Component\n          :is=\"child\"\n          v-for=\"(child, i) in children\"\n          :key=\"i\"\n          @click=\"updateModelValue($event)\"\n        />\n      </div>\n    </div>\n    <div\n      v-if=\"showArrows\"\n      :class=\"ui.arrow()\"\n    >\n      <RuiButton\n        class=\"w-full h-full !rounded-none\"\n        variant=\"text\"\n        :color=\"color\"\n        :disabled=\"nextArrowDisabled\"\n        @click=\"onNextSliderClick()\"\n      >\n        <RuiIcon :name=\"vertical ? 'lu-chevron-down' : 'lu-chevron-right'\" />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiTabs.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/tabs/tabs/RuiTabs.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { Fragment, isVNode, type VNode } from 'vue';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type TabAlignment, type TabIndicatorPosition, TabLayout } from '@/components/tabs/tab-props';\nimport { useTabRouting } from '@/components/tabs/tabs/use-tab-routing';\nimport { useTabScroll } from '@/components/tabs/tabs/use-tab-scroll';\nimport { tv } from '@/utils/tv';\n\ntype ChildNode = VNode & { props: Record<string, any> };\n\ninterface ResolvedTabProps {\n  value?: string | number;\n  to?: unknown;\n  link?: boolean;\n  exact?: boolean;\n  exactPath?: boolean;\n}\n\nexport interface Props {\n  color?: ContextColorsType;\n  vertical?: boolean;\n  disabled?: boolean;\n  grow?: boolean;\n  align?: TabAlignment;\n  indicatorPosition?: TabIndicatorPosition;\n}\n\ndefineOptions({\n  name: 'RuiTabs',\n});\n\n// Default 0 (first tab) matches the existing internal fallback on line 163.\n// Providing a default narrows the `update:modelValue` emit payload from\n// `value?: number | string` to `value: number | string`, so consumers can\n// type their handler signatures without undefined unions.\nconst modelValue = defineModel<number | string>({ default: 0 });\n\nconst {\n  color,\n  vertical = false,\n  disabled = false,\n  grow = false,\n  align = 'center',\n  indicatorPosition = 'end',\n} = defineProps<Props>();\n\nconst internalModelValue = ref<string | number>();\nconst bar = useTemplateRef<HTMLDivElement>('bar');\nconst wrapper = useTemplateRef<HTMLDivElement>('wrapper');\n\nconst tabs = tv({\n  slots: {\n    root: '',\n    arrow: '',\n    bar: 'no-scrollbar max-h-full overflow-auto',\n    wrapper: 'h-full inline-flex max-w-none',\n  },\n  variants: {\n    layout: {\n      [TabLayout.horizontal]: {\n        root: 'flex h-fit',\n        arrow: 'h-[3rem] w-10',\n        bar: 'h-[3rem]',\n        wrapper: '',\n      },\n      [TabLayout.vertical]: {\n        root: 'inline-flex flex-col',\n        arrow: 'min-h-[3rem] w-full',\n        bar: '',\n        wrapper: 'flex-col h-auto',\n      },\n    },\n    wide: {\n      true: {\n        bar: 'w-full',\n        wrapper: 'min-w-full',\n      },\n    },\n  },\n  defaultVariants: { layout: TabLayout.horizontal },\n});\n\nconst slots = useSlots();\n\nconst {\n  showArrows,\n  prevArrowDisabled,\n  nextArrowDisabled,\n  onPrevSliderClick,\n  onNextSliderClick,\n  keepActiveTabVisible,\n} = useTabScroll({ bar, wrapper, vertical: () => vertical });\n\nconst { resolveRoute, isPathMatch } = useTabRouting({\n  onRouteChange: () => applyNewValue(true),\n});\n\nconst layout = computed<TabLayout>(() => vertical ? TabLayout.vertical : TabLayout.horizontal);\nconst ui = computed<ReturnType<typeof tabs>>(() => tabs({ layout: get(layout), wide: vertical || grow }));\n\nconst children = computed<ChildNode[]>(() => {\n  const slotContent = slots.default?.() ?? [];\n\n  const tabs = getChildrenTabs(slotContent);\n\n  const currentModelValue = get(internalModelValue);\n  const inheritedProps = {\n    color,\n    grow,\n    disabled,\n    vertical,\n    align,\n    indicatorPosition,\n  };\n\n  return tabs.map((tab, index) => {\n    let tabValue = tab.props?.value ?? index;\n    if (tab.props?.link !== false && tab.props?.to)\n      tabValue = tab.props.to;\n\n    const active = currentModelValue === tabValue;\n    return {\n      ...tab,\n      props: {\n        value: tabValue,\n        active,\n        ...inheritedProps,\n        ...tab.props,\n      },\n    };\n  });\n});\n\n// When using dynamic content with v-for the slot content can contain fragment,\n// Go through the fragment and always return RuiTab only\nfunction getChildrenTabs(children: VNode[]): VNode[] {\n  return children.flatMap((item) => {\n    if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)\n      return getChildrenTabs(item.children.filter(isVNode));\n\n    return [item];\n  }).flat();\n}\n\nfunction updateModelValue(newModelValue: string | number): void {\n  set(modelValue, newModelValue);\n  set(internalModelValue, newModelValue);\n}\n\nfunction getTabRouteProps(props: Record<string, unknown>): ResolvedTabProps {\n  return {\n    value: typeof props.value === 'string' || typeof props.value === 'number' ? props.value : undefined,\n    to: props.to ?? undefined,\n    link: typeof props.link === 'boolean' ? props.link : undefined,\n    exact: typeof props.exact === 'boolean' ? props.exact : undefined,\n    exactPath: typeof props.exactPath === 'boolean' ? props.exactPath : undefined,\n  };\n}\n\nfunction resolveActiveValue(onlyLink: boolean): string | number | undefined {\n  const enabledChildren = get(children).filter(child => !child.props?.disabled);\n  if (enabledChildren.length === 0)\n    return undefined;\n\n  let result: string | number = get(modelValue) || 0;\n  enabledChildren.forEach((child, index) => {\n    const tabProps = getTabRouteProps(child.props);\n    if (!onlyLink && index === 0 && tabProps.value)\n      result = tabProps.value;\n\n    const fullPath = resolveRoute(tabProps.to);\n\n    if (tabProps.link !== false && fullPath && isPathMatch(fullPath, tabProps))\n      result = fullPath;\n  });\n  return result;\n}\n\nfunction applyNewValue(onlyLink = false): void {\n  const value = resolveActiveValue(onlyLink);\n  if (value !== undefined)\n    updateModelValue(value);\n\n  keepActiveTabVisible();\n}\n\nwatchImmediate(() => get(modelValue), (modelValue) => {\n  set(internalModelValue, modelValue);\n});\n\nwatch(internalModelValue, () => {\n  keepActiveTabVisible();\n});\n\nonMounted(() => {\n  if (get(modelValue) !== undefined)\n    return;\n\n  applyNewValue();\n});\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    :data-vertical=\"vertical || undefined\"\n  >\n    <div\n      v-if=\"showArrows\"\n      :class=\"ui.arrow()\"\n    >\n      <RuiButton\n        class=\"w-full h-full !rounded-none\"\n        variant=\"text\"\n        :color=\"color\"\n        :disabled=\"prevArrowDisabled\"\n        @click=\"onPrevSliderClick()\"\n      >\n        <RuiIcon :name=\"vertical ? 'lu-chevron-up' : 'lu-chevron-left'\" />\n      </RuiButton>\n    </div>\n    <div\n      ref=\"bar\"\n      :class=\"ui.bar()\"\n    >\n      <div\n        ref=\"wrapper\"\n        role=\"tablist\"\n        data-id=\"tabs-wrapper\"\n        :class=\"ui.wrapper()\"\n      >\n        <Component\n          :is=\"child\"\n          v-for=\"(child, i) in children\"\n          :key=\"i\"\n          @click=\"updateModelValue($event)\"\n        />\n      </div>\n    </div>\n    <div\n      v-if=\"showArrows\"\n      :class=\"ui.arrow()\"\n    >\n      <RuiButton\n        class=\"w-full h-full !rounded-none\"\n        variant=\"text\"\n        :color=\"color\"\n        :disabled=\"nextArrowDisabled\"\n        @click=\"onNextSliderClick()\"\n      >\n        <RuiIcon :name=\"vertical ? 'lu-chevron-down' : 'lu-chevron-right'\" />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/composables/forms/auto-complete/keyboard-navigation.d.ts

@@ -23,7 +23,7 @@ export interface UseAutoCompleteKeyboardNavigationDeps<TItem> {
     activator: Ref<HTMLElement | undefined> | TemplateRef<HTMLElement>;
 }
 export interface UseAutoCompleteKeyboardNavigationReturn {
-    focusedValueIndex: Readonly<Ref<number>>;
+    focusedValueIndex: Ref<number>;
     moveSelectedValueHighlight: (event: KeyboardEvent, next: boolean) => void;
     onEnter: (event: KeyboardEvent) => void;
     onTab: (event: KeyboardEvent) => void;

package/dist/composables/forms/auto-complete/keyboard-navigation.js

@@ -1,4 +1,4 @@
-import { nextTick, readonly, ref, toValue, watch } from "vue";
+import { nextTick, ref, toValue, watch } from "vue";
 import { get, set } from "@vueuse/shared";
 //#region src/composables/forms/auto-complete/keyboard-navigation.ts
 function useAutoCompleteKeyboardNavigation(options, deps) {
@@ -105,7 +105,7 @@ function useAutoCompleteKeyboardNavigation(options, deps) {
 		});
 	});
 	return {
-		focusedValueIndex: readonly(focusedValueIndex),
+		focusedValueIndex,
 		moveSelectedValueHighlight,
 		onEnter,
 		onInputDeletePressed,

package/dist/composables/forms/auto-complete/keyboard-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-navigation.js","names":[],"sources":["../../../../src/composables/forms/auto-complete/keyboard-navigation.ts"],"sourcesContent":["import type { MaybeRefOrGetter, Ref, TemplateRef } from 'vue';\nimport { get, set } from '@vueuse/shared';\n\nexport interface UseAutoCompleteKeyboardNavigationOptions {\n  /** Whether multiple items can be selected. */\n  multiple: MaybeRefOrGetter<boolean>;\n  /** Whether custom (free-text) values are allowed. */\n  customValue: MaybeRefOrGetter<boolean>;\n  /** Whether selected values are displayed as chips. */\n  chips: MaybeRefOrGetter<boolean>;\n}\n\nexport interface UseAutoCompleteKeyboardNavigationDeps<TItem> {\n  internalSearch: Ref<string>;\n  value: Ref<TItem[]>;\n  filteredOptions: Ref<TItem[]>;\n  isOpen: Ref<boolean>;\n  highlightedIndex: Ref<number>;\n  userNavigated: Ref<boolean>;\n  searchInputFocused: Ref<boolean>;\n  applyHighlighted: () => void;\n  clear: () => void;\n  removeValue: (item: TItem) => void;\n  setSearchAsValue: () => void;\n  getText: (item: TItem) => string | undefined;\n  activator: Ref<HTMLElement | undefined> | TemplateRef<HTMLElement>;\n}\n\nexport interface UseAutoCompleteKeyboardNavigationReturn {\n  focusedValueIndex: Readonly<Ref<number>>;\n  moveSelectedValueHighlight: (event: KeyboardEvent, next: boolean) => void;\n  onEnter: (event: KeyboardEvent) => void;\n  onTab: (event: KeyboardEvent) => void;\n  onInputDeletePressed: () => void;\n  setValueFocus: (index: number) => void;\n}\n\nexport function useAutoCompleteKeyboardNavigation<TItem>(\n  options: UseAutoCompleteKeyboardNavigationOptions,\n  deps: UseAutoCompleteKeyboardNavigationDeps<TItem>,\n): UseAutoCompleteKeyboardNavigationReturn {\n  const focusedValueIndex = ref<number>(-1);\n\n  function setValueFocus(index: number): void {\n    set(focusedValueIndex, index);\n  }\n\n  function moveSelectedValueHighlight(event: KeyboardEvent, next: boolean): void {\n    const multiple = toValue(options.multiple);\n    const internalSearchValue = get(deps.internalSearch);\n\n    if (!multiple || internalSearchValue.length > 0)\n      return;\n\n    event.preventDefault();\n    const total = get(deps.value).length;\n\n    let current = get(focusedValueIndex);\n\n    if (current === -1) {\n      set(focusedValueIndex, next ? 0 : total - 1);\n      return;\n    }\n\n    const move = next ? 1 : -1;\n    current += move;\n\n    if (current < 0 || current >= total) {\n      set(focusedValueIndex, -1);\n      set(deps.searchInputFocused, true);\n    }\n    else {\n      set(focusedValueIndex, current);\n    }\n  }\n\n  function highlightedMatchesSearch(filteredOptions: TItem[], highlightedIndex: number, search: string): boolean {\n    if (highlightedIndex < 0 || highlightedIndex >= filteredOptions.length)\n      return false;\n\n    const option = filteredOptions[highlightedIndex];\n    if (typeof option === 'string')\n      return option === search;\n\n    if (option && typeof option === 'object')\n      return (deps.getText(option) ?? '') === search;\n\n    return false;\n  }\n\n  function applyCustomValue(event: KeyboardEvent, multiple: boolean): void {\n    deps.setSearchAsValue();\n    if (!multiple)\n      set(deps.isOpen, false);\n    event.preventDefault();\n  }\n\n  function submitClosestForm(): void {\n    const activator = get(deps.activator);\n    const form = activator?.closest('form');\n    form?.dispatchEvent(new Event('submit'));\n  }\n\n  function handleOpenMenuEnter(event: KeyboardEvent): boolean {\n    const filteredOptions = get(deps.filteredOptions);\n    const highlightedIndex = get(deps.highlightedIndex);\n    const customValue = toValue(options.customValue);\n    const multiple = toValue(options.multiple);\n    const internalSearch = get(deps.internalSearch);\n\n    const userNavigated = get(deps.userNavigated);\n\n    if (userNavigated && highlightedIndex > -1 && filteredOptions.length > 0) {\n      deps.applyHighlighted();\n      event.preventDefault();\n      return true;\n    }\n\n    if (customValue && internalSearch && !highlightedMatchesSearch(filteredOptions, highlightedIndex, internalSearch)) {\n      applyCustomValue(event, multiple);\n      return true;\n    }\n\n    if (highlightedIndex > -1 && filteredOptions.length > 0) {\n      deps.applyHighlighted();\n      event.preventDefault();\n      return true;\n    }\n\n    if (filteredOptions.length === 0 && customValue && internalSearch) {\n      applyCustomValue(event, multiple);\n      return true;\n    }\n\n    return false;\n  }\n\n  function onEnter(event: KeyboardEvent): void {\n    if (get(deps.isOpen) && handleOpenMenuEnter(event))\n      return;\n\n    // Nothing selected, menu closed: open menu\n    if (!get(deps.isOpen) && get(deps.value).length === 0) {\n      set(deps.isOpen, true);\n      return event.preventDefault();\n    }\n\n    // Fallback: submit parent form\n    submitClosestForm();\n  }\n\n  function onTab(event: KeyboardEvent): void {\n    const isOpen = get(deps.isOpen);\n    const filteredOptions = get(deps.filteredOptions);\n    const highlightedIndex = get(deps.highlightedIndex);\n    const multiple = toValue(options.multiple);\n\n    if (isOpen && filteredOptions.length > 0 && highlightedIndex > -1 && !multiple) {\n      deps.applyHighlighted();\n      event.preventDefault();\n    }\n  }\n\n  function onInputDeletePressed(): void {\n    const internalSearch = get(deps.internalSearch);\n    const value = get(deps.value);\n    const total = value.length;\n    const multiple = toValue(options.multiple);\n\n    if (!internalSearch && total > 0) {\n      if (multiple) {\n        if (toValue(options.chips)) {\n          set(focusedValueIndex, total - 1);\n        }\n        else {\n          const lastItem = value[total - 1];\n          if (lastItem !== undefined)\n            deps.removeValue(lastItem);\n        }\n      }\n      else {\n        deps.clear();\n      }\n    }\n  }\n\n  // Watch value changes to reset focused index\n  watch(deps.value, () => {\n    setValueFocus(-1);\n  });\n\n  // Watch focused value index to handle chip focus\n  watch(focusedValueIndex, async (index) => {\n    const multiple = toValue(options.multiple);\n    if (index === -1 || !multiple)\n      return;\n\n    await nextTick(() => {\n      const activator = get(deps.activator);\n      const element = activator?.querySelector<HTMLElement>(`[data-index=\"${index}\"]`);\n      element?.focus();\n    });\n  });\n\n  return {\n    focusedValueIndex: readonly(focusedValueIndex),\n    moveSelectedValueHighlight,\n    onEnter,\n    onInputDeletePressed,\n    onTab,\n    setValueFocus,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"keyboard-navigation.js","names":[],"sources":["../../../../src/composables/forms/auto-complete/keyboard-navigation.ts"],"sourcesContent":["import type { MaybeRefOrGetter, Ref, TemplateRef } from 'vue';\nimport { get, set } from '@vueuse/shared';\n\nexport interface UseAutoCompleteKeyboardNavigationOptions {\n  /** Whether multiple items can be selected. */\n  multiple: MaybeRefOrGetter<boolean>;\n  /** Whether custom (free-text) values are allowed. */\n  customValue: MaybeRefOrGetter<boolean>;\n  /** Whether selected values are displayed as chips. */\n  chips: MaybeRefOrGetter<boolean>;\n}\n\nexport interface UseAutoCompleteKeyboardNavigationDeps<TItem> {\n  internalSearch: Ref<string>;\n  value: Ref<TItem[]>;\n  filteredOptions: Ref<TItem[]>;\n  isOpen: Ref<boolean>;\n  highlightedIndex: Ref<number>;\n  userNavigated: Ref<boolean>;\n  searchInputFocused: Ref<boolean>;\n  applyHighlighted: () => void;\n  clear: () => void;\n  removeValue: (item: TItem) => void;\n  setSearchAsValue: () => void;\n  getText: (item: TItem) => string | undefined;\n  activator: Ref<HTMLElement | undefined> | TemplateRef<HTMLElement>;\n}\n\nexport interface UseAutoCompleteKeyboardNavigationReturn {\n  focusedValueIndex: Ref<number>;\n  moveSelectedValueHighlight: (event: KeyboardEvent, next: boolean) => void;\n  onEnter: (event: KeyboardEvent) => void;\n  onTab: (event: KeyboardEvent) => void;\n  onInputDeletePressed: () => void;\n  setValueFocus: (index: number) => void;\n}\n\nexport function useAutoCompleteKeyboardNavigation<TItem>(\n  options: UseAutoCompleteKeyboardNavigationOptions,\n  deps: UseAutoCompleteKeyboardNavigationDeps<TItem>,\n): UseAutoCompleteKeyboardNavigationReturn {\n  const focusedValueIndex = ref<number>(-1);\n\n  function setValueFocus(index: number): void {\n    set(focusedValueIndex, index);\n  }\n\n  function moveSelectedValueHighlight(event: KeyboardEvent, next: boolean): void {\n    const multiple = toValue(options.multiple);\n    const internalSearchValue = get(deps.internalSearch);\n\n    if (!multiple || internalSearchValue.length > 0)\n      return;\n\n    event.preventDefault();\n    const total = get(deps.value).length;\n\n    let current = get(focusedValueIndex);\n\n    if (current === -1) {\n      set(focusedValueIndex, next ? 0 : total - 1);\n      return;\n    }\n\n    const move = next ? 1 : -1;\n    current += move;\n\n    if (current < 0 || current >= total) {\n      set(focusedValueIndex, -1);\n      set(deps.searchInputFocused, true);\n    }\n    else {\n      set(focusedValueIndex, current);\n    }\n  }\n\n  function highlightedMatchesSearch(filteredOptions: TItem[], highlightedIndex: number, search: string): boolean {\n    if (highlightedIndex < 0 || highlightedIndex >= filteredOptions.length)\n      return false;\n\n    const option = filteredOptions[highlightedIndex];\n    if (typeof option === 'string')\n      return option === search;\n\n    if (option && typeof option === 'object')\n      return (deps.getText(option) ?? '') === search;\n\n    return false;\n  }\n\n  function applyCustomValue(event: KeyboardEvent, multiple: boolean): void {\n    deps.setSearchAsValue();\n    if (!multiple)\n      set(deps.isOpen, false);\n    event.preventDefault();\n  }\n\n  function submitClosestForm(): void {\n    const activator = get(deps.activator);\n    const form = activator?.closest('form');\n    form?.dispatchEvent(new Event('submit'));\n  }\n\n  function handleOpenMenuEnter(event: KeyboardEvent): boolean {\n    const filteredOptions = get(deps.filteredOptions);\n    const highlightedIndex = get(deps.highlightedIndex);\n    const customValue = toValue(options.customValue);\n    const multiple = toValue(options.multiple);\n    const internalSearch = get(deps.internalSearch);\n\n    const userNavigated = get(deps.userNavigated);\n\n    if (userNavigated && highlightedIndex > -1 && filteredOptions.length > 0) {\n      deps.applyHighlighted();\n      event.preventDefault();\n      return true;\n    }\n\n    if (customValue && internalSearch && !highlightedMatchesSearch(filteredOptions, highlightedIndex, internalSearch)) {\n      applyCustomValue(event, multiple);\n      return true;\n    }\n\n    if (highlightedIndex > -1 && filteredOptions.length > 0) {\n      deps.applyHighlighted();\n      event.preventDefault();\n      return true;\n    }\n\n    if (filteredOptions.length === 0 && customValue && internalSearch) {\n      applyCustomValue(event, multiple);\n      return true;\n    }\n\n    return false;\n  }\n\n  function onEnter(event: KeyboardEvent): void {\n    if (get(deps.isOpen) && handleOpenMenuEnter(event))\n      return;\n\n    // Nothing selected, menu closed: open menu\n    if (!get(deps.isOpen) && get(deps.value).length === 0) {\n      set(deps.isOpen, true);\n      return event.preventDefault();\n    }\n\n    // Fallback: submit parent form\n    submitClosestForm();\n  }\n\n  function onTab(event: KeyboardEvent): void {\n    const isOpen = get(deps.isOpen);\n    const filteredOptions = get(deps.filteredOptions);\n    const highlightedIndex = get(deps.highlightedIndex);\n    const multiple = toValue(options.multiple);\n\n    if (isOpen && filteredOptions.length > 0 && highlightedIndex > -1 && !multiple) {\n      deps.applyHighlighted();\n      event.preventDefault();\n    }\n  }\n\n  function onInputDeletePressed(): void {\n    const internalSearch = get(deps.internalSearch);\n    const value = get(deps.value);\n    const total = value.length;\n    const multiple = toValue(options.multiple);\n\n    if (!internalSearch && total > 0) {\n      if (multiple) {\n        if (toValue(options.chips)) {\n          set(focusedValueIndex, total - 1);\n        }\n        else {\n          const lastItem = value[total - 1];\n          if (lastItem !== undefined)\n            deps.removeValue(lastItem);\n        }\n      }\n      else {\n        deps.clear();\n      }\n    }\n  }\n\n  // Watch value changes to reset focused index\n  watch(deps.value, () => {\n    setValueFocus(-1);\n  });\n\n  // Watch focused value index to handle chip focus\n  watch(focusedValueIndex, async (index) => {\n    const multiple = toValue(options.multiple);\n    if (index === -1 || !multiple)\n      return;\n\n    await nextTick(() => {\n      const activator = get(deps.activator);\n      const element = activator?.querySelector<HTMLElement>(`[data-index=\"${index}\"]`);\n      element?.focus();\n    });\n  });\n\n  return {\n    // eslint-disable-next-line @rotki/composable-return-readonly -- written by focus.ts onInputFocused\n    focusedValueIndex,\n    moveSelectedValueHighlight,\n    onEnter,\n    onInputDeletePressed,\n    onTab,\n    setValueFocus,\n  };\n}\n"],"mappings":"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"}

package/dist/composables/tables/data-table/expansion.d.ts

@@ -7,7 +7,6 @@ export interface UseTableExpansionOptions<T extends object, IdType extends keyof
 }
 export interface UseTableExpansionDeps<T extends object> {
     expanded: Ref<T[] | undefined>;
-    hasExpandedItemSlot: Ref<boolean>;
 }
 export interface UseTableExpansionReturn<T extends object, IdType extends keyof T> {
     expandable: ComputedRef<boolean>;

package/dist/composables/tables/data-table/expansion.js

@@ -3,8 +3,8 @@ import { get, set } from "@vueuse/shared";
 //#region src/composables/tables/data-table/expansion.ts
 function useTableExpansion(options, deps) {
 	const { rowAttr, singleExpand } = options;
-	const { expanded, hasExpandedItemSlot } = deps;
-	const expandable = computed(() => !!get(expanded) && get(hasExpandedItemSlot));
+	const { expanded } = deps;
+	const expandable = computed(() => !!get(expanded));
 	const expandedSet = computed(() => {
 		const expandedVal = get(expanded);
 		if (!expandedVal?.length) return /* @__PURE__ */ new Set();

package/dist/composables/tables/data-table/expansion.js.map

@@ -1 +1 @@
-{"version":3,"file":"expansion.js","names":[],"sources":["../../../../src/composables/tables/data-table/expansion.ts"],"sourcesContent":["import type { ComputedRef, Ref } from 'vue';\n\nexport interface UseTableExpansionOptions<T extends object, IdType extends keyof T> {\n  /** The property on each row used as the unique row identifier. */\n  rowAttr: IdType;\n  /** Whether only one row can be expanded at a time. */\n  singleExpand: boolean;\n}\n\nexport interface UseTableExpansionDeps<T extends object> {\n  expanded: Ref<T[] | undefined>;\n  hasExpandedItemSlot: Ref<boolean>;\n}\n\nexport interface UseTableExpansionReturn<T extends object, IdType extends keyof T> {\n  expandable: ComputedRef<boolean>;\n  isExpanded: (identifier: T[IdType]) => boolean;\n  onToggleExpand: (row: T) => void;\n}\n\nexport function useTableExpansion<T extends object, IdType extends keyof T>(\n  options: UseTableExpansionOptions<T, IdType>,\n  deps: UseTableExpansionDeps<T>,\n): UseTableExpansionReturn<T, IdType> {\n  const { rowAttr, singleExpand } = options;\n  const { expanded, hasExpandedItemSlot } = deps;\n\n  const expandable = computed<boolean>(() => !!get(expanded) && get(hasExpandedItemSlot));\n\n  const expandedSet = computed<Set<T[IdType]>>(() => {\n    const expandedVal = get(expanded);\n    if (!expandedVal?.length)\n      return new Set<T[IdType]>();\n    return new Set<T[IdType]>(expandedVal.map(row => row[rowAttr]));\n  });\n\n  function isExpanded(identifier: T[IdType]): boolean {\n    return get(expandedSet).has(identifier);\n  }\n\n  function onToggleExpand(row: T): void {\n    const expandedVal = get(expanded);\n    if (!expandedVal)\n      return;\n\n    const key = rowAttr;\n    const rowExpanded = isExpanded(row[key]);\n\n    if (singleExpand)\n      return set(expanded, rowExpanded ? [] : [row]);\n\n    return set(\n      expanded,\n      rowExpanded ? expandedVal.filter(item => item[key] !== row[key]) : [...expandedVal, row],\n    );\n  }\n\n  return {\n    expandable,\n    isExpanded,\n    onToggleExpand,\n  };\n}\n"],"mappings":";;;AAoBA,SAAgB,kBACd,SACA,MACoC;CACpC,MAAM,EAAE,SAAS,iBAAiB;CAClC,MAAM,EAAE,UAAU,wBAAwB;CAE1C,MAAM,aAAa,eAAwB,CAAC,CAAC,IAAI,SAAS,IAAI,IAAI,oBAAoB,CAAC;CAEvF,MAAM,cAAc,eAA+B;EACjD,MAAM,cAAc,IAAI,SAAS;AACjC,MAAI,CAAC,aAAa,OAChB,wBAAO,IAAI,KAAgB;AAC7B,SAAO,IAAI,IAAe,YAAY,KAAI,QAAO,IAAI,SAAS,CAAC;GAC/D;CAEF,SAAS,WAAW,YAAgC;AAClD,SAAO,IAAI,YAAY,CAAC,IAAI,WAAW;;CAGzC,SAAS,eAAe,KAAc;EACpC,MAAM,cAAc,IAAI,SAAS;AACjC,MAAI,CAAC,YACH;EAEF,MAAM,MAAM;EACZ,MAAM,cAAc,WAAW,IAAI,KAAK;AAExC,MAAI,aACF,QAAO,IAAI,UAAU,cAAc,EAAE,GAAG,CAAC,IAAI,CAAC;AAEhD,SAAO,IACL,UACA,cAAc,YAAY,QAAO,SAAQ,KAAK,SAAS,IAAI,KAAK,GAAG,CAAC,GAAG,aAAa,IAAI,CACzF;;AAGH,QAAO;EACL;EACA;EACA;EACD"}
+{"version":3,"file":"expansion.js","names":[],"sources":["../../../../src/composables/tables/data-table/expansion.ts"],"sourcesContent":["import type { ComputedRef, Ref } from 'vue';\n\nexport interface UseTableExpansionOptions<T extends object, IdType extends keyof T> {\n  /** The property on each row used as the unique row identifier. */\n  rowAttr: IdType;\n  /** Whether only one row can be expanded at a time. */\n  singleExpand: boolean;\n}\n\nexport interface UseTableExpansionDeps<T extends object> {\n  expanded: Ref<T[] | undefined>;\n}\n\nexport interface UseTableExpansionReturn<T extends object, IdType extends keyof T> {\n  expandable: ComputedRef<boolean>;\n  isExpanded: (identifier: T[IdType]) => boolean;\n  onToggleExpand: (row: T) => void;\n}\n\nexport function useTableExpansion<T extends object, IdType extends keyof T>(\n  options: UseTableExpansionOptions<T, IdType>,\n  deps: UseTableExpansionDeps<T>,\n): UseTableExpansionReturn<T, IdType> {\n  const { rowAttr, singleExpand } = options;\n  const { expanded } = deps;\n\n  // `expandable` only tracks whether the consumer has wired a two-way\n  // `expanded` model. Whether an `#expanded-item` slot is present is\n  // checked fresh in the template (`!!$slots['expanded-item']`) so that\n  // consumers which gate the slot with `v-if` (e.g. only after data\n  // loads) don't get stuck on the first-render slot snapshot — Vue's\n  // `slots` object is not reactive to property access inside a computed.\n  const expandable = computed<boolean>(() => !!get(expanded));\n\n  const expandedSet = computed<Set<T[IdType]>>(() => {\n    const expandedVal = get(expanded);\n    if (!expandedVal?.length)\n      return new Set<T[IdType]>();\n    return new Set<T[IdType]>(expandedVal.map(row => row[rowAttr]));\n  });\n\n  function isExpanded(identifier: T[IdType]): boolean {\n    return get(expandedSet).has(identifier);\n  }\n\n  function onToggleExpand(row: T): void {\n    const expandedVal = get(expanded);\n    if (!expandedVal)\n      return;\n\n    const key = rowAttr;\n    const rowExpanded = isExpanded(row[key]);\n\n    if (singleExpand)\n      return set(expanded, rowExpanded ? [] : [row]);\n\n    return set(\n      expanded,\n      rowExpanded ? expandedVal.filter(item => item[key] !== row[key]) : [...expandedVal, row],\n    );\n  }\n\n  return {\n    expandable,\n    isExpanded,\n    onToggleExpand,\n  };\n}\n"],"mappings":";;;AAmBA,SAAgB,kBACd,SACA,MACoC;CACpC,MAAM,EAAE,SAAS,iBAAiB;CAClC,MAAM,EAAE,aAAa;CAQrB,MAAM,aAAa,eAAwB,CAAC,CAAC,IAAI,SAAS,CAAC;CAE3D,MAAM,cAAc,eAA+B;EACjD,MAAM,cAAc,IAAI,SAAS;AACjC,MAAI,CAAC,aAAa,OAChB,wBAAO,IAAI,KAAgB;AAC7B,SAAO,IAAI,IAAe,YAAY,KAAI,QAAO,IAAI,SAAS,CAAC;GAC/D;CAEF,SAAS,WAAW,YAAgC;AAClD,SAAO,IAAI,YAAY,CAAC,IAAI,WAAW;;CAGzC,SAAS,eAAe,KAAc;EACpC,MAAM,cAAc,IAAI,SAAS;AACjC,MAAI,CAAC,YACH;EAEF,MAAM,MAAM;EACZ,MAAM,cAAc,WAAW,IAAI,KAAK;AAExC,MAAI,aACF,QAAO,IAAI,UAAU,cAAc,EAAE,GAAG,CAAC,IAAI,CAAC;AAEhD,SAAO,IACL,UACA,cAAc,YAAY,QAAO,SAAQ,KAAK,SAAS,IAAI,KAAK,GAAG,CAAC,GAAG,aAAa,IAAI,CACzF;;AAGH,QAAO;EACL;EACA;EACA;EACD"}

package/dist/style.css

@@ -1278,10 +1278,6 @@ html[data-theme="dark"], html.dark {
   height: 0px !important;
 }
 
-.\!h-\[3rem\] {
-  height: 3rem !important;
-}
-
 .\!h-auto {
   height: auto !important;
 }
@@ -1427,6 +1423,10 @@ html[data-theme="dark"], html.dark {
   min-height: 2rem !important;
 }
 
+.\!min-h-\[3rem\] {
+  min-height: 3rem !important;
+}
+
 .min-h-1\.5 {
   min-height: 0.375rem;
 }
@@ -1559,6 +1559,10 @@ html[data-theme="dark"], html.dark {
   width: 200%;
 }
 
+.w-\[20rem\] {
+  width: 20rem;
+}
+
 .w-\[3\.625rem\] {
   width: 3.625rem;
 }
@@ -1941,6 +1945,10 @@ html[data-theme="dark"], html.dark {
   animation: slide-rail 1.6s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
 }
 
+.\!cursor-progress {
+  cursor: progress !important;
+}
+
 .cursor-default {
   cursor: default;
 }
@@ -2973,6 +2981,11 @@ html[data-theme="dark"], html.dark {
   padding-right: 0.5rem;
 }
 
+.px-2\.5 {
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+}
+
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -2988,11 +3001,6 @@ html[data-theme="dark"], html.dark {
   padding-right: 1.5rem;
 }
 
-.px-8 {
-  padding-left: 2rem;
-  padding-right: 2rem;
-}
-
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -3190,6 +3198,10 @@ html[data-theme="dark"], html.dark {
   font-size: 0.6rem;
 }
 
+.text-\[0\.75rem\] {
+  font-size: 0.75rem;
+}
+
 .text-\[0\.7rem\] {
   font-size: 0.7rem;
 }
@@ -3198,10 +3210,18 @@ html[data-theme="dark"], html.dark {
   font-size: 0.8125rem;
 }
 
+.text-\[0\.875rem\] {
+  font-size: 0.875rem;
+}
+
 .text-\[1\.25rem\] {
   font-size: 1.25rem;
 }
 
+.text-\[1rem\] {
+  font-size: 1rem;
+}
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -3259,6 +3279,10 @@ html[data-theme="dark"], html.dark {
   line-height: .75rem;
 }
 
+.leading-4 {
+  line-height: 1rem;
+}
+
 .leading-5 {
   line-height: 1.25rem;
 }
@@ -4635,6 +4659,18 @@ body {
   background-color: rgba(var(--rui-primary-main), 0.1);
 }
 
+.focus-visible\:\!ring-0:focus-visible {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
+}
+
+.focus-visible\:\!ring-2:focus-visible {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
+}
+
 .active\:bg-black\/10:active {
   background-color: rgb(0 0 0 / 0.1);
 }
@@ -4719,14 +4755,30 @@ body {
   cursor: default;
 }
 
+.disabled\:cursor-not-allowed:disabled {
+  cursor: not-allowed;
+}
+
 .disabled\:border-transparent:disabled {
   border-color: transparent;
 }
 
+.disabled\:\!bg-black\/\[\.12\]:disabled {
+  background-color: rgb(0 0 0 / .12) !important;
+}
+
+.disabled\:\!bg-transparent:disabled {
+  background-color: transparent !important;
+}
+
 .disabled\:bg-black\/\[\.12\]:disabled {
   background-color: rgb(0 0 0 / .12);
 }
 
+.disabled\:\!text-rui-text-disabled:disabled {
+  color: var(--rui-text-disabled) !important;
+}
+
 .disabled\:text-rui-text-disabled:disabled {
   color: var(--rui-text-disabled);
 }
@@ -4735,6 +4787,14 @@ body {
   outline-color: var(--rui-text-disabled);
 }
 
+.disabled\:active\:\!bg-transparent:active:disabled {
+  background-color: transparent !important;
+}
+
+.disabled\:active\:\!text-rui-text-disabled:active:disabled {
+  color: var(--rui-text-disabled) !important;
+}
+
 .disabled\:active\:text-rui-text-disabled:active:disabled {
   color: var(--rui-text-disabled);
 }
@@ -4759,14 +4819,12 @@ body {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.peer:-webkit-autofill ~ .peer-autofill\:text-xs {
+.peer:-webkit-autofill ~ .peer-autofill\:text-\[0\.75rem\] {
   font-size: 0.75rem;
-  line-height: 1rem;
 }
 
-.peer:autofill ~ .peer-autofill\:text-xs {
+.peer:autofill ~ .peer-autofill\:text-\[0\.75rem\] {
   font-size: 0.75rem;
-  line-height: 1rem;
 }
 
 .peer:-webkit-autofill ~ .peer-autofill\:leading-tight {
@@ -5329,6 +5387,14 @@ body {
   background-color: rgb(255 255 255 / 0.1);
 }
 
+.dark\:disabled\:\!bg-transparent:disabled:is([data-theme="dark"] *) {
+  background-color: transparent !important;
+}
+
+.dark\:disabled\:\!bg-white\/\[\.12\]:disabled:is([data-theme="dark"] *) {
+  background-color: rgb(255 255 255 / .12) !important;
+}
+
 .dark\:disabled\:bg-white\/10:disabled:is([data-theme="dark"] *) {
   background-color: rgb(255 255 255 / 0.1);
 }

package/dist/utils/tv.d.ts

@@ -8,9 +8,12 @@
  * @see https://www.tailwind-variants.org/docs/introduction
  */
 import type { VueClassValue } from '../types/class-value';
+import { type ClassValue } from 'vue';
 export declare const tv: import("tailwind-variants").TV;
 /**
- * Normalizes a VueClassValue (string | object | array) to a plain string
- * compatible with tailwind-variants' class parameter.
+ * Normalizes any Vue `:class` binding value (string, object, array, nullish
+ * or `false`) to a plain string compatible with tailwind-variants' `class`
+ * parameter. Accepts Vue's runtime `ClassValue` so call sites can pass
+ * `$attrs.class` directly without casting.
  */
-export declare function cn(value: VueClassValue | undefined): string | undefined;
+export declare function cn(value: ClassValue | VueClassValue | undefined): string | undefined;

package/dist/utils/tv.js

@@ -6,14 +6,24 @@ var tv = /* @__PURE__ */ createTV({ twMergeConfig: { classGroups: {
 	"bg-tint": [{ "bg-tint": [isAny] }],
 	"bg-shade": [{ "bg-shade": [isAny] }],
 	"text-tint": [{ "text-tint": [isAny] }],
-	"text-shade": [{ "text-shade": [isAny] }]
+	"text-shade": [{ "text-shade": [isAny] }],
+	"text-color": [{ "text-rui": [isAny] }],
+	"font-size": [
+		{ "text-body": [isAny] },
+		"text-caption",
+		"text-overline",
+		{ "text-h": [isAny] },
+		{ "text-subtitle": [isAny] }
+	]
 } } });
 /**
-* Normalizes a VueClassValue (string | object | array) to a plain string
-* compatible with tailwind-variants' class parameter.
+* Normalizes any Vue `:class` binding value (string, object, array, nullish
+* or `false`) to a plain string compatible with tailwind-variants' `class`
+* parameter. Accepts Vue's runtime `ClassValue` so call sites can pass
+* `$attrs.class` directly without casting.
 */
 function cn(value) {
-	if (value == null) return void 0;
+	if (value == null || value === false) return void 0;
 	if (typeof value === "string") return value || void 0;
 	return normalizeClass(value) || void 0;
 }

package/dist/utils/tv.js.map

@@ -1 +1 @@
-{"version":3,"file":"tv.js","names":[],"sources":["../../src/utils/tv.ts"],"sourcesContent":["/**\n * Tailwind Variants wrapper.\n *\n * Re-exports `tv` from `tailwind-variants` with project-level configuration.\n * Uses `createTV()` so we can extend twMerge config for custom theme classes\n * (e.g., `text-rui-primary`) in the future.\n *\n * @see https://www.tailwind-variants.org/docs/introduction\n */\n\nimport type { VueClassValue } from '@/types/class-value';\nimport { createTV } from 'tailwind-variants';\nimport { normalizeClass } from 'vue';\n\nconst isAny: (v: string) => boolean = () => true;\n\nexport const tv = /* @__PURE__ */ createTV({\n  twMergeConfig: {\n    classGroups: {\n      'bg-tint': [{ 'bg-tint': [isAny] }],\n      'bg-shade': [{ 'bg-shade': [isAny] }],\n      'text-tint': [{ 'text-tint': [isAny] }],\n      'text-shade': [{ 'text-shade': [isAny] }],\n    },\n  },\n});\n\n/**\n * Normalizes a VueClassValue (string | object | array) to a plain string\n * compatible with tailwind-variants' class parameter.\n */\nexport function cn(value: VueClassValue | undefined): string | undefined {\n  if (value == null)\n    return undefined;\n  if (typeof value === 'string')\n    return value || undefined;\n  const result = normalizeClass(value);\n  return result || undefined;\n}\n"],"mappings":";;;AAcA,IAAM,cAAsC;AAE5C,IAAa,KAAqB,yBAAS,EACzC,eAAe,EACb,aAAa;CACX,WAAW,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC;CACnC,YAAY,CAAC,EAAE,YAAY,CAAC,MAAM,EAAE,CAAC;CACrC,aAAa,CAAC,EAAE,aAAa,CAAC,MAAM,EAAE,CAAC;CACvC,cAAc,CAAC,EAAE,cAAc,CAAC,MAAM,EAAE,CAAC;CAC1C,EACF,EACF,CAAC;;;;;AAMF,SAAgB,GAAG,OAAsD;AACvE,KAAI,SAAS,KACX,QAAO,KAAA;AACT,KAAI,OAAO,UAAU,SACnB,QAAO,SAAS,KAAA;AAElB,QADe,eAAe,MAAM,IACnB,KAAA"}
+{"version":3,"file":"tv.js","names":[],"sources":["../../src/utils/tv.ts"],"sourcesContent":["/**\n * Tailwind Variants wrapper.\n *\n * Re-exports `tv` from `tailwind-variants` with project-level configuration.\n * Uses `createTV()` so we can extend twMerge config for custom theme classes\n * (e.g., `text-rui-primary`) in the future.\n *\n * @see https://www.tailwind-variants.org/docs/introduction\n */\n\nimport type { VueClassValue } from '@/types/class-value';\nimport { createTV } from 'tailwind-variants';\nimport { type ClassValue, normalizeClass } from 'vue';\n\nconst isAny: (v: string) => boolean = () => true;\n\nexport const tv = /* @__PURE__ */ createTV({\n  twMergeConfig: {\n    classGroups: {\n      'bg-tint': [{ 'bg-tint': [isAny] }],\n      'bg-shade': [{ 'bg-shade': [isAny] }],\n      'text-tint': [{ 'text-tint': [isAny] }],\n      'text-shade': [{ 'text-shade': [isAny] }],\n      // Custom theme colors (text-rui-*) belong to the text-color group so\n      // they don't conflict with the custom typography utilities below, which\n      // tw-merge would otherwise both classify as font-size.\n      'text-color': [{ 'text-rui': [isAny] }],\n      'font-size': [\n        { 'text-body': [isAny] },\n        'text-caption',\n        'text-overline',\n        { 'text-h': [isAny] },\n        { 'text-subtitle': [isAny] },\n      ],\n    },\n  },\n});\n\n/**\n * Normalizes any Vue `:class` binding value (string, object, array, nullish\n * or `false`) to a plain string compatible with tailwind-variants' `class`\n * parameter. Accepts Vue's runtime `ClassValue` so call sites can pass\n * `$attrs.class` directly without casting.\n */\nexport function cn(value: ClassValue | VueClassValue | undefined): string | undefined {\n  if (value == null || value === false)\n    return undefined;\n  if (typeof value === 'string')\n    return value || undefined;\n  const result = normalizeClass(value);\n  return result || undefined;\n}\n"],"mappings":";;;AAcA,IAAM,cAAsC;AAE5C,IAAa,KAAqB,yBAAS,EACzC,eAAe,EACb,aAAa;CACX,WAAW,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC;CACnC,YAAY,CAAC,EAAE,YAAY,CAAC,MAAM,EAAE,CAAC;CACrC,aAAa,CAAC,EAAE,aAAa,CAAC,MAAM,EAAE,CAAC;CACvC,cAAc,CAAC,EAAE,cAAc,CAAC,MAAM,EAAE,CAAC;CAIzC,cAAc,CAAC,EAAE,YAAY,CAAC,MAAM,EAAE,CAAC;CACvC,aAAa;EACX,EAAE,aAAa,CAAC,MAAM,EAAE;EACxB;EACA;EACA,EAAE,UAAU,CAAC,MAAM,EAAE;EACrB,EAAE,iBAAiB,CAAC,MAAM,EAAE;EAC7B;CACF,EACF,EACF,CAAC;;;;;;;AAQF,SAAgB,GAAG,OAAmE;AACpF,KAAI,SAAS,QAAQ,UAAU,MAC7B,QAAO,KAAA;AACT,KAAI,OAAO,UAAU,SACnB,QAAO,SAAS,KAAA;AAElB,QADe,eAAe,MAAM,IACnB,KAAA"}

package/dist/vite-plugin/index.js

@@ -23,7 +23,7 @@ function loadValidIcons() {
 	try {
 		const distPath = resolve(__dirname, "../icons/index.js");
 		if (existsSync(distPath)) {
-			const match = readFileSync(distPath, "utf-8").match(/const RuiIcons = \[(.*?)];/s);
+			const match = readFileSync(distPath, "utf-8").match(/(?:const|var|let) RuiIcons = \[(.*?)];?/s);
 			if (match?.[1]) {
 				const icons = match[1].match(/"([^"]+)"/g)?.map((s) => s.slice(1, -1)) || [];
 				return new Set(icons);

package/dist/vite-plugin/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/vite-plugin/index.ts"],"sourcesContent":["import type { Plugin, ViteDevServer } from 'vite';\nimport type { RuiIconsPluginOptions, ScanResult } from './types';\nimport { existsSync, readFileSync } from 'node:fs';\nimport { dirname, resolve } from 'node:path';\nimport { fileURLToPath } from 'node:url';\nimport {\n  extractIconsFromSource,\n  generateVirtualModule,\n  validateIcons,\n} from './scanner';\n\nconst VIRTUAL_MODULE_ID = 'virtual:rotki-icons';\nconst RESOLVED_VIRTUAL_MODULE_ID = `\\0${VIRTUAL_MODULE_ID}`;\n\nconst DEFAULT_SCAN_PATTERNS = ['**/*.vue', '**/*.ts', '**/*.tsx'];\nconst EXCLUDED_PATTERNS = ['**/node_modules/**', '**/dist/**', '**/.git/**'];\n\n// Get __dirname equivalent in ES modules\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = dirname(__filename);\n\n/**\n * Loads the valid RuiIcons array from the library\n */\nfunction loadValidIcons(): Set<string> {\n  // Import the RuiIcons array from the icons module\n  // This will be resolved at build time\n  try {\n    // Try to load from the built dist first (for consumers)\n    const distPath = resolve(__dirname, '../icons/index.js');\n    if (existsSync(distPath)) {\n      // Read and parse the file to extract the RuiIcons array\n      const content = readFileSync(distPath, 'utf-8');\n      // eslint-disable-next-line regexp/strict\n      const match = content.match(/const RuiIcons = \\[(.*?)];/s);\n      if (match?.[1]) {\n        const iconsStr = match[1];\n        const icons = iconsStr.match(/\"([^\"]+)\"/g)?.map(s => s.slice(1, -1)) || [];\n        return new Set(icons);\n      }\n    }\n  }\n  catch {\n    // Fallback: parse the icons source file directly\n  }\n\n  // Fallback: read and parse the source file\n  const sourcePath = resolve(__dirname, '../icons/index.ts');\n  if (existsSync(sourcePath)) {\n    const content = readFileSync(sourcePath, 'utf-8');\n    // eslint-disable-next-line regexp/strict\n    const match = content.match(/export const RuiIcons = \\[(.*?)] as const/s);\n    if (match?.[1]) {\n      const iconsStr = match[1];\n      const icons = iconsStr.match(/\"([^\"]+)\"/g)?.map(s => s.slice(1, -1)) || [];\n      return new Set(icons);\n    }\n  }\n\n  console.warn('[@rotki/ui-library] Could not load RuiIcons list, validation disabled');\n  return new Set();\n}\n\n/**\n * Vite plugin for automatic icon detection and registration\n */\nexport function ruiIconsPlugin(options: RuiIconsPluginOptions = {}): Plugin {\n  const {\n    include = [],\n    scanPatterns = DEFAULT_SCAN_PATTERNS,\n    strict = false,\n    debug = false,\n  } = options;\n\n  let validIcons: Set<string>;\n  let scanResult: ScanResult;\n  let server: ViteDevServer | null = null;\n  let root: string;\n\n  const log = (message: string): void => {\n    if (debug) {\n      // eslint-disable-next-line no-console\n      console.log(`[@rotki/ui-library/icons] ${message}`);\n    }\n  };\n\n  const warn = (message: string): void => {\n    console.warn(`[@rotki/ui-library/icons] ${message}`);\n  };\n\n  /**\n   * Scans all matching files for icon usage\n   */\n  async function scanFiles(): Promise<void> {\n    const fg = await import('fast-glob');\n    const glob = fg.default || fg;\n\n    scanResult = {\n      icons: new Set(include),\n      invalidIcons: new Map(),\n    };\n\n    const files = glob.sync(scanPatterns, {\n      cwd: root,\n      ignore: EXCLUDED_PATTERNS,\n      absolute: true,\n    });\n\n    log(`Scanning ${files.length} files for icon usage...`);\n\n    for (const filePath of files) {\n      try {\n        const content = readFileSync(filePath, 'utf-8');\n        const detectedIcons = extractIconsFromSource(content);\n\n        if (detectedIcons.size > 0) {\n          log(`Found ${detectedIcons.size} potential icons in ${filePath}`);\n          validateIcons(detectedIcons, validIcons, filePath, scanResult);\n        }\n      }\n      catch {\n        warn(`Failed to read file: ${filePath}`);\n      }\n    }\n\n    // Add manually included icons\n    for (const icon of include) {\n      if (validIcons.has(icon)) {\n        scanResult.icons.add(icon);\n      }\n      else {\n        warn(`Included icon \"${icon}\" is not a valid RuiIcon`);\n      }\n    }\n\n    log(`Detected ${scanResult.icons.size} valid icons`);\n\n    // Report invalid icons\n    if (scanResult.invalidIcons.size > 0) {\n      const invalidList = [...scanResult.invalidIcons.entries()]\n        .map(([icon, files]) => `  - \"${icon}\" in: ${files.join(', ')}`)\n        .join('\\n');\n\n      const message = `Found ${scanResult.invalidIcons.size} invalid icon name(s):\\n${invalidList}`;\n\n      if (strict) {\n        throw new Error(message);\n      }\n      else {\n        warn(message);\n      }\n    }\n  }\n\n  /**\n   * Handles file changes in dev mode\n   */\n  function handleFileChange(filePath: string): void {\n    // Check if the changed file matches our scan patterns\n    const isRelevantFile = scanPatterns.some((pattern) => {\n      const ext = filePath.split('.').pop();\n      return pattern.includes(`*.${ext}`);\n    });\n\n    if (!isRelevantFile)\n      return;\n\n    try {\n      const content = readFileSync(filePath, 'utf-8');\n      const detectedIcons = extractIconsFromSource(content);\n      const previousSize = scanResult.icons.size;\n\n      validateIcons(detectedIcons, validIcons, filePath, scanResult);\n\n      // If new icons were detected, invalidate the virtual module\n      if (scanResult.icons.size > previousSize) {\n        log(`New icons detected in ${filePath}, invalidating virtual module...`);\n\n        // Invalidate the virtual module to trigger re-import\n        const mod = server?.moduleGraph.getModuleById(RESOLVED_VIRTUAL_MODULE_ID);\n        if (mod) {\n          server?.moduleGraph.invalidateModule(mod);\n          // Trigger HMR update\n          server?.ws.send({\n            type: 'full-reload',\n            path: '*',\n          });\n        }\n      }\n    }\n    catch {\n      // Ignore read errors\n    }\n  }\n\n  return {\n    name: 'rotki-ui-library-icons',\n    enforce: 'pre',\n\n    configResolved(config) {\n      root = config.root;\n      validIcons = loadValidIcons();\n      log(`Loaded ${validIcons.size} valid icon names`);\n    },\n\n    configureServer(_server) {\n      server = _server;\n\n      // Watch for file changes\n      server.watcher.on('change', handleFileChange);\n      server.watcher.on('add', handleFileChange);\n    },\n\n    async buildStart() {\n      await scanFiles();\n    },\n\n    resolveId(id) {\n      if (id === VIRTUAL_MODULE_ID) {\n        return RESOLVED_VIRTUAL_MODULE_ID;\n      }\n    },\n\n    load(id) {\n      if (id === RESOLVED_VIRTUAL_MODULE_ID) {\n        const moduleContent = generateVirtualModule(scanResult.icons);\n        log(`Generated virtual module with ${scanResult.icons.size} icons`);\n        return moduleContent;\n      }\n    },\n  };\n}\n\nexport type { RuiIconsPluginOptions } from './types';\n\n// eslint-disable-next-line import/no-default-export\nexport default ruiIconsPlugin;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/vite-plugin/index.ts"],"sourcesContent":["import type { Plugin, ViteDevServer } from 'vite';\nimport type { RuiIconsPluginOptions, ScanResult } from './types';\nimport { existsSync, readFileSync } from 'node:fs';\nimport { dirname, resolve } from 'node:path';\nimport { fileURLToPath } from 'node:url';\nimport {\n  extractIconsFromSource,\n  generateVirtualModule,\n  validateIcons,\n} from './scanner';\n\nconst VIRTUAL_MODULE_ID = 'virtual:rotki-icons';\nconst RESOLVED_VIRTUAL_MODULE_ID = `\\0${VIRTUAL_MODULE_ID}`;\n\nconst DEFAULT_SCAN_PATTERNS = ['**/*.vue', '**/*.ts', '**/*.tsx'];\nconst EXCLUDED_PATTERNS = ['**/node_modules/**', '**/dist/**', '**/.git/**'];\n\n// Get __dirname equivalent in ES modules\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = dirname(__filename);\n\n/**\n * Loads the valid RuiIcons array from the library\n */\nfunction loadValidIcons(): Set<string> {\n  // Import the RuiIcons array from the icons module\n  // This will be resolved at build time\n  try {\n    // Try to load from the built dist first (for consumers)\n    const distPath = resolve(__dirname, '../icons/index.js');\n    if (existsSync(distPath)) {\n      // Read and parse the file to extract the RuiIcons array\n      const content = readFileSync(distPath, 'utf-8');\n      // eslint-disable-next-line regexp/strict\n      const match = content.match(/(?:const|var|let) RuiIcons = \\[(.*?)];?/s);\n      if (match?.[1]) {\n        const iconsStr = match[1];\n        const icons = iconsStr.match(/\"([^\"]+)\"/g)?.map(s => s.slice(1, -1)) || [];\n        return new Set(icons);\n      }\n    }\n  }\n  catch {\n    // Fallback: parse the icons source file directly\n  }\n\n  // Fallback: read and parse the source file\n  const sourcePath = resolve(__dirname, '../icons/index.ts');\n  if (existsSync(sourcePath)) {\n    const content = readFileSync(sourcePath, 'utf-8');\n    // eslint-disable-next-line regexp/strict\n    const match = content.match(/export const RuiIcons = \\[(.*?)] as const/s);\n    if (match?.[1]) {\n      const iconsStr = match[1];\n      const icons = iconsStr.match(/\"([^\"]+)\"/g)?.map(s => s.slice(1, -1)) || [];\n      return new Set(icons);\n    }\n  }\n\n  console.warn('[@rotki/ui-library] Could not load RuiIcons list, validation disabled');\n  return new Set();\n}\n\n/**\n * Vite plugin for automatic icon detection and registration\n */\nexport function ruiIconsPlugin(options: RuiIconsPluginOptions = {}): Plugin {\n  const {\n    include = [],\n    scanPatterns = DEFAULT_SCAN_PATTERNS,\n    strict = false,\n    debug = false,\n  } = options;\n\n  let validIcons: Set<string>;\n  let scanResult: ScanResult;\n  let server: ViteDevServer | null = null;\n  let root: string;\n\n  const log = (message: string): void => {\n    if (debug) {\n      // eslint-disable-next-line no-console\n      console.log(`[@rotki/ui-library/icons] ${message}`);\n    }\n  };\n\n  const warn = (message: string): void => {\n    console.warn(`[@rotki/ui-library/icons] ${message}`);\n  };\n\n  /**\n   * Scans all matching files for icon usage\n   */\n  async function scanFiles(): Promise<void> {\n    const fg = await import('fast-glob');\n    const glob = fg.default || fg;\n\n    scanResult = {\n      icons: new Set(include),\n      invalidIcons: new Map(),\n    };\n\n    const files = glob.sync(scanPatterns, {\n      cwd: root,\n      ignore: EXCLUDED_PATTERNS,\n      absolute: true,\n    });\n\n    log(`Scanning ${files.length} files for icon usage...`);\n\n    for (const filePath of files) {\n      try {\n        const content = readFileSync(filePath, 'utf-8');\n        const detectedIcons = extractIconsFromSource(content);\n\n        if (detectedIcons.size > 0) {\n          log(`Found ${detectedIcons.size} potential icons in ${filePath}`);\n          validateIcons(detectedIcons, validIcons, filePath, scanResult);\n        }\n      }\n      catch {\n        warn(`Failed to read file: ${filePath}`);\n      }\n    }\n\n    // Add manually included icons\n    for (const icon of include) {\n      if (validIcons.has(icon)) {\n        scanResult.icons.add(icon);\n      }\n      else {\n        warn(`Included icon \"${icon}\" is not a valid RuiIcon`);\n      }\n    }\n\n    log(`Detected ${scanResult.icons.size} valid icons`);\n\n    // Report invalid icons\n    if (scanResult.invalidIcons.size > 0) {\n      const invalidList = [...scanResult.invalidIcons.entries()]\n        .map(([icon, files]) => `  - \"${icon}\" in: ${files.join(', ')}`)\n        .join('\\n');\n\n      const message = `Found ${scanResult.invalidIcons.size} invalid icon name(s):\\n${invalidList}`;\n\n      if (strict) {\n        throw new Error(message);\n      }\n      else {\n        warn(message);\n      }\n    }\n  }\n\n  /**\n   * Handles file changes in dev mode\n   */\n  function handleFileChange(filePath: string): void {\n    // Check if the changed file matches our scan patterns\n    const isRelevantFile = scanPatterns.some((pattern) => {\n      const ext = filePath.split('.').pop();\n      return pattern.includes(`*.${ext}`);\n    });\n\n    if (!isRelevantFile)\n      return;\n\n    try {\n      const content = readFileSync(filePath, 'utf-8');\n      const detectedIcons = extractIconsFromSource(content);\n      const previousSize = scanResult.icons.size;\n\n      validateIcons(detectedIcons, validIcons, filePath, scanResult);\n\n      // If new icons were detected, invalidate the virtual module\n      if (scanResult.icons.size > previousSize) {\n        log(`New icons detected in ${filePath}, invalidating virtual module...`);\n\n        // Invalidate the virtual module to trigger re-import\n        const mod = server?.moduleGraph.getModuleById(RESOLVED_VIRTUAL_MODULE_ID);\n        if (mod) {\n          server?.moduleGraph.invalidateModule(mod);\n          // Trigger HMR update\n          server?.ws.send({\n            type: 'full-reload',\n            path: '*',\n          });\n        }\n      }\n    }\n    catch {\n      // Ignore read errors\n    }\n  }\n\n  return {\n    name: 'rotki-ui-library-icons',\n    enforce: 'pre',\n\n    configResolved(config) {\n      root = config.root;\n      validIcons = loadValidIcons();\n      log(`Loaded ${validIcons.size} valid icon names`);\n    },\n\n    configureServer(_server) {\n      server = _server;\n\n      // Watch for file changes\n      server.watcher.on('change', handleFileChange);\n      server.watcher.on('add', handleFileChange);\n    },\n\n    async buildStart() {\n      await scanFiles();\n    },\n\n    resolveId(id) {\n      if (id === VIRTUAL_MODULE_ID) {\n        return RESOLVED_VIRTUAL_MODULE_ID;\n      }\n    },\n\n    load(id) {\n      if (id === RESOLVED_VIRTUAL_MODULE_ID) {\n        const moduleContent = generateVirtualModule(scanResult.icons);\n        log(`Generated virtual module with ${scanResult.icons.size} icons`);\n        return moduleContent;\n      }\n    },\n  };\n}\n\nexport type { RuiIconsPluginOptions } from './types';\n\n// eslint-disable-next-line import/no-default-export\nexport default ruiIconsPlugin;\n"],"mappings":"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"}

package/dist/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "http://json.schemastore.org/web-types",
   "framework": "vue",
   "name": "@rotki/ui-library",
-  "version": "2.16.1",
+  "version": "2.16.2",
   "js-types-syntax": "typescript",
   "description-markup": "markdown",
   "contributions": {
@@ -3746,7 +3746,7 @@
                 },
                 {
                   "name": "chipAttrs",
-                  "type": "Record<string, unknown> | undefined"
+                  "type": "Record<string, unknown>"
                 }
               ]
             },
@@ -6752,6 +6752,7 @@
               "name": "model-value",
               "description": "",
               "required": false,
+              "default": "0 as T",
               "value": {
                 "kind": "expression",
                 "type": "T | undefined"
@@ -6766,7 +6767,7 @@
                 "arguments": [
                   {
                     "name": "argument",
-                    "type": "[value: T | undefined]"
+                    "type": "[value: T]"
                   }
                 ]
               }
@@ -6847,6 +6848,7 @@
               "name": "model-value",
               "description": "",
               "required": false,
+              "default": "0",
               "value": {
                 "kind": "expression",
                 "type": "string | number | undefined"
@@ -6861,7 +6863,7 @@
                 "arguments": [
                   {
                     "name": "argument",
-                    "type": "[value: string | number | undefined]"
+                    "type": "[value: string | number]"
                   }
                 ]
               }