@nuxt/ui 3.1.3 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (130) hide show
  1. package/.nuxt/ui/avatar.ts +1 -1
  2. package/.nuxt/ui/card.ts +1 -1
  3. package/.nuxt/ui/carousel.ts +1 -1
  4. package/.nuxt/ui/command-palette.ts +1 -0
  5. package/.nuxt/ui/drawer.ts +1 -1
  6. package/.nuxt/ui/index.ts +2 -0
  7. package/.nuxt/ui/input-menu.ts +24 -10
  8. package/.nuxt/ui/input-tags.ts +310 -0
  9. package/.nuxt/ui/modal.ts +1 -1
  10. package/.nuxt/ui/navigation-menu.ts +1 -1
  11. package/.nuxt/ui/select-menu.ts +11 -6
  12. package/.nuxt/ui/select.ts +11 -6
  13. package/.nuxt/ui/table.ts +3 -2
  14. package/.nuxt/ui/timeline.ts +321 -0
  15. package/.nuxt/ui/toaster.ts +1 -1
  16. package/cli/templates.mjs +7 -4
  17. package/dist/module.json +1 -1
  18. package/dist/module.mjs +2 -2
  19. package/dist/runtime/components/Alert.vue +0 -1
  20. package/dist/runtime/components/Avatar.vue +10 -2
  21. package/dist/runtime/components/Avatar.vue.d.ts +2 -0
  22. package/dist/runtime/components/Calendar.vue +4 -1
  23. package/dist/runtime/components/Carousel.vue +1 -2
  24. package/dist/runtime/components/Checkbox.vue +1 -1
  25. package/dist/runtime/components/CommandPalette.vue +80 -16
  26. package/dist/runtime/components/CommandPalette.vue.d.ts +32 -8
  27. package/dist/runtime/components/ContextMenuContent.vue.d.ts +4 -20
  28. package/dist/runtime/components/DropdownMenuContent.vue.d.ts +4 -20
  29. package/dist/runtime/components/Form.vue +6 -6
  30. package/dist/runtime/components/Form.vue.d.ts +12 -11
  31. package/dist/runtime/components/InputMenu.vue.d.ts +4 -4
  32. package/dist/runtime/components/InputNumber.vue +3 -2
  33. package/dist/runtime/components/InputNumber.vue.d.ts +1 -1
  34. package/dist/runtime/components/InputTags.vue +159 -0
  35. package/dist/runtime/components/InputTags.vue.d.ts +183 -0
  36. package/dist/runtime/components/Modal.vue +14 -13
  37. package/dist/runtime/components/Modal.vue.d.ts +14 -4
  38. package/dist/runtime/components/NavigationMenu.vue +16 -15
  39. package/dist/runtime/components/OverlayProvider.vue +2 -2
  40. package/dist/runtime/components/Pagination.vue +1 -1
  41. package/dist/runtime/components/Pagination.vue.d.ts +0 -1
  42. package/dist/runtime/components/PinInput.vue +4 -3
  43. package/dist/runtime/components/PinInput.vue.d.ts +22 -19
  44. package/dist/runtime/components/Progress.vue +2 -1
  45. package/dist/runtime/components/Progress.vue.d.ts +1 -1
  46. package/dist/runtime/components/RadioGroup.vue +2 -2
  47. package/dist/runtime/components/Select.vue +23 -4
  48. package/dist/runtime/components/Select.vue.d.ts +107 -1
  49. package/dist/runtime/components/SelectMenu.vue +24 -5
  50. package/dist/runtime/components/SelectMenu.vue.d.ts +105 -1
  51. package/dist/runtime/components/Slideover.vue +14 -13
  52. package/dist/runtime/components/Slideover.vue.d.ts +14 -4
  53. package/dist/runtime/components/Table.vue +7 -1
  54. package/dist/runtime/components/Table.vue.d.ts +10 -8
  55. package/dist/runtime/components/Tabs.vue +13 -2
  56. package/dist/runtime/components/Tabs.vue.d.ts +4 -1
  57. package/dist/runtime/components/Textarea.vue.d.ts +4 -3
  58. package/dist/runtime/components/Timeline.vue +92 -0
  59. package/dist/runtime/components/Timeline.vue.d.ts +70 -0
  60. package/dist/runtime/components/Toast.vue +4 -5
  61. package/dist/runtime/components/Tree.vue +3 -2
  62. package/dist/runtime/components/Tree.vue.d.ts +1 -1
  63. package/dist/runtime/composables/defineLocale.d.ts +2 -0
  64. package/dist/runtime/composables/defineLocale.js +4 -0
  65. package/dist/runtime/composables/defineShortcuts.js +2 -2
  66. package/dist/runtime/composables/useOverlay.d.ts +2 -1
  67. package/dist/runtime/composables/useOverlay.js +7 -6
  68. package/dist/runtime/locale/ar.js +2 -1
  69. package/dist/runtime/locale/az.js +2 -1
  70. package/dist/runtime/locale/bg.js +2 -1
  71. package/dist/runtime/locale/bn.js +2 -1
  72. package/dist/runtime/locale/ca.js +2 -1
  73. package/dist/runtime/locale/ckb.js +2 -1
  74. package/dist/runtime/locale/cs.js +2 -1
  75. package/dist/runtime/locale/da.js +2 -1
  76. package/dist/runtime/locale/de.js +2 -1
  77. package/dist/runtime/locale/el.js +2 -1
  78. package/dist/runtime/locale/en.js +2 -1
  79. package/dist/runtime/locale/es.js +2 -1
  80. package/dist/runtime/locale/et.js +2 -1
  81. package/dist/runtime/locale/fa_ir.js +2 -1
  82. package/dist/runtime/locale/fi.js +2 -1
  83. package/dist/runtime/locale/fr.js +2 -1
  84. package/dist/runtime/locale/he.js +2 -1
  85. package/dist/runtime/locale/hi.js +2 -1
  86. package/dist/runtime/locale/hu.js +2 -1
  87. package/dist/runtime/locale/hy.js +2 -1
  88. package/dist/runtime/locale/id.js +2 -1
  89. package/dist/runtime/locale/index.d.ts +1 -0
  90. package/dist/runtime/locale/index.js +1 -0
  91. package/dist/runtime/locale/it.js +2 -1
  92. package/dist/runtime/locale/ja.js +2 -1
  93. package/dist/runtime/locale/kk.js +2 -1
  94. package/dist/runtime/locale/km.js +2 -1
  95. package/dist/runtime/locale/ko.js +2 -1
  96. package/dist/runtime/locale/ky.js +2 -1
  97. package/dist/runtime/locale/lb.d.ts +3 -0
  98. package/dist/runtime/locale/lb.js +55 -0
  99. package/dist/runtime/locale/lt.js +2 -1
  100. package/dist/runtime/locale/mn.js +2 -1
  101. package/dist/runtime/locale/ms.js +2 -1
  102. package/dist/runtime/locale/nb_no.js +2 -1
  103. package/dist/runtime/locale/nl.js +2 -1
  104. package/dist/runtime/locale/pl.js +2 -1
  105. package/dist/runtime/locale/pt.js +2 -1
  106. package/dist/runtime/locale/pt_br.js +2 -1
  107. package/dist/runtime/locale/ro.js +2 -1
  108. package/dist/runtime/locale/ru.js +2 -1
  109. package/dist/runtime/locale/sk.js +2 -1
  110. package/dist/runtime/locale/sl.js +2 -1
  111. package/dist/runtime/locale/sv.js +2 -1
  112. package/dist/runtime/locale/th.js +2 -1
  113. package/dist/runtime/locale/tj.js +2 -1
  114. package/dist/runtime/locale/tr.js +2 -1
  115. package/dist/runtime/locale/ug_cn.js +2 -1
  116. package/dist/runtime/locale/uk.js +2 -1
  117. package/dist/runtime/locale/ur.js +2 -1
  118. package/dist/runtime/locale/uz.js +2 -1
  119. package/dist/runtime/locale/vi.js +2 -1
  120. package/dist/runtime/locale/zh_cn.js +2 -1
  121. package/dist/runtime/locale/zh_tw.js +2 -1
  122. package/dist/runtime/types/form.d.ts +11 -10
  123. package/dist/runtime/types/index.d.ts +2 -0
  124. package/dist/runtime/types/index.js +2 -0
  125. package/dist/runtime/types/locale.d.ts +1 -0
  126. package/dist/runtime/types/utils.d.ts +3 -0
  127. package/dist/shared/{ui.Bix4DSU4.mjs → ui.BPVxSPGY.mjs} +282 -26
  128. package/dist/unplugin.mjs +1 -1
  129. package/dist/vite.mjs +1 -1
  130. package/package.json +28 -29
@@ -169,7 +169,7 @@ const alert = (options) => ({
169
169
 
170
170
  const avatar = {
171
171
  slots: {
172
- root: "inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-elevated",
172
+ root: "inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated",
173
173
  image: "h-full w-full rounded-[inherit] object-cover",
174
174
  fallback: "font-medium leading-none text-muted truncate",
175
175
  icon: "text-muted shrink-0"
@@ -680,7 +680,7 @@ const calendar = (options) => ({
680
680
 
681
681
  const card = {
682
682
  slots: {
683
- root: "rounded-lg",
683
+ root: "rounded-lg overflow-hidden",
684
684
  header: "p-4 sm:px-6",
685
685
  body: "p-4 sm:p-6",
686
686
  footer: "p-4 sm:px-6"
@@ -736,7 +736,7 @@ const carousel = (options) => ({
736
736
  },
737
737
  active: {
738
738
  true: {
739
- dot: "bg-inverted"
739
+ dot: "data-[state=active]:bg-inverted"
740
740
  }
741
741
  }
742
742
  }
@@ -1081,6 +1081,7 @@ const commandPalette = (options) => ({
1081
1081
  root: "flex flex-col min-h-0 min-w-0 divide-y divide-default",
1082
1082
  input: "[&>input]:h-12",
1083
1083
  close: "",
1084
+ back: "p-0",
1084
1085
  content: "relative overflow-hidden flex flex-col",
1085
1086
  viewport: "relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1 focus:outline-none",
1086
1087
  group: "p-1 isolate",
@@ -1264,7 +1265,7 @@ const drawer = (options) => ({
1264
1265
  },
1265
1266
  inset: {
1266
1267
  true: {
1267
- content: "rounded-lg after:hidden"
1268
+ content: "rounded-lg after:hidden overflow-hidden"
1268
1269
  }
1269
1270
  }
1270
1271
  },
@@ -1641,7 +1642,7 @@ const inputMenu = (options) => {
1641
1642
  content: "max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col",
1642
1643
  viewport: "relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1",
1643
1644
  group: "p-1 isolate",
1644
- empty: "py-2 text-center text-sm text-muted",
1645
+ empty: "text-center text-muted",
1645
1646
  label: "font-semibold text-highlighted",
1646
1647
  separator: "-mx-1 my-1 h-px bg-border",
1647
1648
  item: ["group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50", options.theme.transitions && "transition-colors before:transition-colors"],
@@ -1656,14 +1657,13 @@ const inputMenu = (options) => {
1656
1657
  tagsItem: "px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75",
1657
1658
  tagsItemText: "truncate",
1658
1659
  tagsItemDelete: ["inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none", options.theme.transitions && "transition-colors"],
1659
- tagsItemDeleteIcon: "",
1660
- tagsInput: ""
1660
+ tagsItemDeleteIcon: "shrink-0",
1661
+ tagsInput: "flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
1661
1662
  },
1662
1663
  variants: {
1663
1664
  multiple: {
1664
1665
  true: {
1665
- root: "flex-wrap",
1666
- tagsInput: "border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
1666
+ root: "flex-wrap"
1667
1667
  },
1668
1668
  false: {
1669
1669
  base: "w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
@@ -1679,7 +1679,8 @@ const inputMenu = (options) => {
1679
1679
  itemLeadingChipSize: "sm",
1680
1680
  itemTrailingIcon: "size-4",
1681
1681
  tagsItem: "text-[10px]/3",
1682
- tagsItemDeleteIcon: "size-3"
1682
+ tagsItemDeleteIcon: "size-3",
1683
+ empty: "p-1 text-xs"
1683
1684
  },
1684
1685
  sm: {
1685
1686
  label: "p-1.5 text-[10px]/3 gap-1.5",
@@ -1690,7 +1691,8 @@ const inputMenu = (options) => {
1690
1691
  itemLeadingChipSize: "sm",
1691
1692
  itemTrailingIcon: "size-4",
1692
1693
  tagsItem: "text-[10px]/3",
1693
- tagsItemDeleteIcon: "size-3"
1694
+ tagsItemDeleteIcon: "size-3",
1695
+ empty: "p-1.5 text-xs"
1694
1696
  },
1695
1697
  md: {
1696
1698
  label: "p-1.5 text-xs gap-1.5",
@@ -1701,7 +1703,8 @@ const inputMenu = (options) => {
1701
1703
  itemLeadingChipSize: "md",
1702
1704
  itemTrailingIcon: "size-5",
1703
1705
  tagsItem: "text-xs",
1704
- tagsItemDeleteIcon: "size-3.5"
1706
+ tagsItemDeleteIcon: "size-3.5",
1707
+ empty: "p-1.5 text-sm"
1705
1708
  },
1706
1709
  lg: {
1707
1710
  label: "p-2 text-xs gap-2",
@@ -1712,7 +1715,8 @@ const inputMenu = (options) => {
1712
1715
  itemLeadingChipSize: "md",
1713
1716
  itemTrailingIcon: "size-5",
1714
1717
  tagsItem: "text-xs",
1715
- tagsItemDeleteIcon: "size-3.5"
1718
+ tagsItemDeleteIcon: "size-3.5",
1719
+ empty: "p-2 text-sm"
1716
1720
  },
1717
1721
  xl: {
1718
1722
  label: "p-2 text-sm gap-2",
@@ -1723,11 +1727,20 @@ const inputMenu = (options) => {
1723
1727
  itemLeadingChipSize: "lg",
1724
1728
  itemTrailingIcon: "size-6",
1725
1729
  tagsItem: "text-sm",
1726
- tagsItemDeleteIcon: "size-4"
1730
+ tagsItemDeleteIcon: "size-4",
1731
+ empty: "p-2 text-base"
1727
1732
  }
1728
1733
  }
1729
1734
  },
1730
- compoundVariants: [...(options.theme.colors || []).map((color) => ({
1735
+ compoundVariants: [{
1736
+ variant: "soft",
1737
+ multiple: true,
1738
+ class: "has-focus:bg-elevated"
1739
+ }, {
1740
+ variant: "ghost",
1741
+ multiple: true,
1742
+ class: "has-focus:bg-elevated"
1743
+ }, ...(options.theme.colors || []).map((color) => ({
1731
1744
  color,
1732
1745
  multiple: true,
1733
1746
  variant: ["outline", "subtle"],
@@ -1852,6 +1865,54 @@ const inputNumber = (options) => {
1852
1865
  };
1853
1866
  };
1854
1867
 
1868
+ const inputTags = (options) => {
1869
+ return defuFn({
1870
+ slots: {
1871
+ root: (prev) => [prev, "flex-wrap"],
1872
+ base: () => ["rounded-md", options.theme.transitions && "transition-colors"],
1873
+ item: 'px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 wrap-anywhere data-[state="active"]:bg-accented',
1874
+ itemText: "",
1875
+ itemDelete: ["inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none", options.theme.transitions && "transition-colors"],
1876
+ itemDeleteIcon: "shrink-0",
1877
+ input: "flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
1878
+ },
1879
+ variants: {
1880
+ size: {
1881
+ xs: {
1882
+ item: "text-[10px]/3",
1883
+ itemDeleteIcon: "size-3"
1884
+ },
1885
+ sm: {
1886
+ item: "text-[10px]/3",
1887
+ itemDeleteIcon: "size-3"
1888
+ },
1889
+ md: {
1890
+ item: "text-xs",
1891
+ itemDeleteIcon: "size-3.5"
1892
+ },
1893
+ lg: {
1894
+ item: "text-xs",
1895
+ itemDeleteIcon: "size-3.5"
1896
+ },
1897
+ xl: {
1898
+ item: "text-sm",
1899
+ itemDeleteIcon: "size-4"
1900
+ }
1901
+ },
1902
+ variant: (prev) => Object.fromEntries(
1903
+ Object.entries(prev).map(([key, value]) => [key, replaceFocus(value)])
1904
+ )
1905
+ },
1906
+ compoundVariants: (prev) => prev.map((item) => ({
1907
+ ...item,
1908
+ class: typeof item.class === "string" ? replaceFocus(item.class) : item.class
1909
+ }))
1910
+ }, input(options));
1911
+ };
1912
+ function replaceFocus(str) {
1913
+ return str.replace(/focus:/g, "has-focus:").replace(/focus-visible:/g, "has-focus-visible:");
1914
+ }
1915
+
1855
1916
  const kbd = {
1856
1917
  base: "inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans",
1857
1918
  variants: {
@@ -1914,7 +1975,7 @@ const modal = {
1914
1975
  content: "inset-0"
1915
1976
  },
1916
1977
  false: {
1917
- content: "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default"
1978
+ content: "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden"
1918
1979
  }
1919
1980
  }
1920
1981
  }
@@ -1980,7 +2041,7 @@ const navigationMenu = (options) => ({
1980
2041
  childList: "grid p-2",
1981
2042
  childLink: "px-3 py-2 gap-2 before:inset-x-px before:inset-y-0",
1982
2043
  childLinkLabel: "font-medium",
1983
- content: "absolute top-0 left-0 w-full"
2044
+ content: "absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto"
1984
2045
  },
1985
2046
  vertical: {
1986
2047
  root: "flex-col",
@@ -2674,7 +2735,7 @@ const select = (options) => {
2674
2735
  content: "max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col",
2675
2736
  viewport: "relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1",
2676
2737
  group: "p-1 isolate",
2677
- empty: "py-2 text-center text-sm text-muted",
2738
+ empty: "text-center text-muted",
2678
2739
  label: "font-semibold text-highlighted",
2679
2740
  separator: "-mx-1 my-1 h-px bg-border",
2680
2741
  item: ["group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50", options.theme.transitions && "transition-colors before:transition-colors"],
@@ -2697,7 +2758,8 @@ const select = (options) => {
2697
2758
  itemLeadingAvatarSize: "3xs",
2698
2759
  itemLeadingChip: "size-4",
2699
2760
  itemLeadingChipSize: "sm",
2700
- itemTrailingIcon: "size-4"
2761
+ itemTrailingIcon: "size-4",
2762
+ empty: "p-1 text-xs"
2701
2763
  },
2702
2764
  sm: {
2703
2765
  label: "p-1.5 text-[10px]/3 gap-1.5",
@@ -2706,7 +2768,8 @@ const select = (options) => {
2706
2768
  itemLeadingAvatarSize: "3xs",
2707
2769
  itemLeadingChip: "size-4",
2708
2770
  itemLeadingChipSize: "sm",
2709
- itemTrailingIcon: "size-4"
2771
+ itemTrailingIcon: "size-4",
2772
+ empty: "p-1.5 text-xs"
2710
2773
  },
2711
2774
  md: {
2712
2775
  label: "p-1.5 text-xs gap-1.5",
@@ -2715,7 +2778,8 @@ const select = (options) => {
2715
2778
  itemLeadingAvatarSize: "2xs",
2716
2779
  itemLeadingChip: "size-5",
2717
2780
  itemLeadingChipSize: "md",
2718
- itemTrailingIcon: "size-5"
2781
+ itemTrailingIcon: "size-5",
2782
+ empty: "p-1.5 text-sm"
2719
2783
  },
2720
2784
  lg: {
2721
2785
  label: "p-2 text-xs gap-2",
@@ -2724,7 +2788,8 @@ const select = (options) => {
2724
2788
  itemLeadingAvatarSize: "2xs",
2725
2789
  itemLeadingChip: "size-5",
2726
2790
  itemLeadingChipSize: "md",
2727
- itemTrailingIcon: "size-5"
2791
+ itemTrailingIcon: "size-5",
2792
+ empty: "p-2 text-sm"
2728
2793
  },
2729
2794
  xl: {
2730
2795
  label: "p-2 text-sm gap-2",
@@ -2733,7 +2798,8 @@ const select = (options) => {
2733
2798
  itemLeadingAvatarSize: "xs",
2734
2799
  itemLeadingChip: "size-6",
2735
2800
  itemLeadingChipSize: "lg",
2736
- itemTrailingIcon: "size-6"
2801
+ itemTrailingIcon: "size-6",
2802
+ empty: "p-2 text-base"
2737
2803
  }
2738
2804
  }
2739
2805
  }
@@ -3243,11 +3309,12 @@ const table = (options) => ({
3243
3309
  root: "relative overflow-auto",
3244
3310
  base: "min-w-full overflow-clip",
3245
3311
  caption: "sr-only",
3246
- thead: "relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-(--ui-border-accented)",
3312
+ thead: "relative",
3247
3313
  tbody: "divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary",
3248
3314
  tr: "data-[selected=true]:bg-elevated/50",
3249
3315
  th: "px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0",
3250
3316
  td: "p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0",
3317
+ separator: "absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)",
3251
3318
  empty: "py-6 text-center text-sm text-muted",
3252
3319
  loading: "py-6 text-center"
3253
3320
  },
@@ -3265,7 +3332,7 @@ const table = (options) => ({
3265
3332
  },
3266
3333
  loading: {
3267
3334
  true: {
3268
- thead: "after:absolute after:bottom-0 after:inset-x-0 after:h-px"
3335
+ thead: "after:absolute after:z-[1] after:h-px"
3269
3336
  }
3270
3337
  },
3271
3338
  loadingAnimation: {
@@ -3492,6 +3559,193 @@ const textarea = (options) => {
3492
3559
  }, input(options));
3493
3560
  };
3494
3561
 
3562
+ const timeline = (options) => ({
3563
+ slots: {
3564
+ root: "flex gap-1.5",
3565
+ item: "group relative flex flex-1 gap-3",
3566
+ container: "relative flex items-center gap-1.5",
3567
+ indicator: "group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted",
3568
+ separator: "flex-1 rounded-full bg-elevated",
3569
+ wrapper: "w-full",
3570
+ date: "text-dimmed text-xs/5",
3571
+ title: "font-medium text-highlighted text-sm",
3572
+ description: "text-muted text-wrap text-sm"
3573
+ },
3574
+ variants: {
3575
+ orientation: {
3576
+ horizontal: {
3577
+ root: "flex-row w-full",
3578
+ item: "flex-col",
3579
+ separator: "h-0.5"
3580
+ },
3581
+ vertical: {
3582
+ root: "flex-col",
3583
+ container: "flex-col",
3584
+ separator: "w-0.5"
3585
+ }
3586
+ },
3587
+ color: {
3588
+ ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
3589
+ indicator: `group-data-[state=completed]:bg-${color} group-data-[state=active]:bg-${color}`
3590
+ }])),
3591
+ neutral: {
3592
+ indicator: "group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted"
3593
+ }
3594
+ },
3595
+ size: {
3596
+ "3xs": "",
3597
+ "2xs": "",
3598
+ "xs": "",
3599
+ "sm": "",
3600
+ "md": "",
3601
+ "lg": "",
3602
+ "xl": "",
3603
+ "2xl": "",
3604
+ "3xl": ""
3605
+ },
3606
+ reverse: {
3607
+ true: ""
3608
+ }
3609
+ },
3610
+ compoundVariants: [...(options.theme.colors || []).map((color) => ({
3611
+ color,
3612
+ reverse: false,
3613
+ class: {
3614
+ separator: `group-data-[state=completed]:bg-${color}`
3615
+ }
3616
+ })), ...(options.theme.colors || []).map((color) => ({
3617
+ color,
3618
+ reverse: true,
3619
+ class: {
3620
+ separator: `group-data-[state=active]:bg-${color} group-data-[state=completed]:bg-${color}`
3621
+ }
3622
+ })), {
3623
+ color: "neutral",
3624
+ reverse: false,
3625
+ class: {
3626
+ separator: "group-data-[state=completed]:bg-inverted"
3627
+ }
3628
+ }, {
3629
+ color: "neutral",
3630
+ reverse: true,
3631
+ class: {
3632
+ separator: "group-data-[state=active]:bg-inverted group-data-[state=completed]:bg-inverted"
3633
+ }
3634
+ }, {
3635
+ orientation: "horizontal",
3636
+ size: "3xs",
3637
+ class: {
3638
+ wrapper: "pe-4.5"
3639
+ }
3640
+ }, {
3641
+ orientation: "horizontal",
3642
+ size: "2xs",
3643
+ class: {
3644
+ wrapper: "pe-5"
3645
+ }
3646
+ }, {
3647
+ orientation: "horizontal",
3648
+ size: "xs",
3649
+ class: {
3650
+ wrapper: "pe-5.5"
3651
+ }
3652
+ }, {
3653
+ orientation: "horizontal",
3654
+ size: "sm",
3655
+ class: {
3656
+ wrapper: "pe-6"
3657
+ }
3658
+ }, {
3659
+ orientation: "horizontal",
3660
+ size: "md",
3661
+ class: {
3662
+ wrapper: "pe-6.5"
3663
+ }
3664
+ }, {
3665
+ orientation: "horizontal",
3666
+ size: "lg",
3667
+ class: {
3668
+ wrapper: "pe-7"
3669
+ }
3670
+ }, {
3671
+ orientation: "horizontal",
3672
+ size: "xl",
3673
+ class: {
3674
+ wrapper: "pe-7.5"
3675
+ }
3676
+ }, {
3677
+ orientation: "horizontal",
3678
+ size: "2xl",
3679
+ class: {
3680
+ wrapper: "pe-8"
3681
+ }
3682
+ }, {
3683
+ orientation: "horizontal",
3684
+ size: "3xl",
3685
+ class: {
3686
+ wrapper: "pe-8.5"
3687
+ }
3688
+ }, {
3689
+ orientation: "vertical",
3690
+ size: "3xs",
3691
+ class: {
3692
+ wrapper: "-mt-0.5 pb-4.5"
3693
+ }
3694
+ }, {
3695
+ orientation: "vertical",
3696
+ size: "2xs",
3697
+ class: {
3698
+ wrapper: "pb-5"
3699
+ }
3700
+ }, {
3701
+ orientation: "vertical",
3702
+ size: "xs",
3703
+ class: {
3704
+ wrapper: "mt-0.5 pb-5.5"
3705
+ }
3706
+ }, {
3707
+ orientation: "vertical",
3708
+ size: "sm",
3709
+ class: {
3710
+ wrapper: "mt-1 pb-6"
3711
+ }
3712
+ }, {
3713
+ orientation: "vertical",
3714
+ size: "md",
3715
+ class: {
3716
+ wrapper: "mt-1.5 pb-6.5"
3717
+ }
3718
+ }, {
3719
+ orientation: "vertical",
3720
+ size: "lg",
3721
+ class: {
3722
+ wrapper: "mt-2 pb-7"
3723
+ }
3724
+ }, {
3725
+ orientation: "vertical",
3726
+ size: "xl",
3727
+ class: {
3728
+ wrapper: "mt-2.5 pb-7.5"
3729
+ }
3730
+ }, {
3731
+ orientation: "vertical",
3732
+ size: "2xl",
3733
+ class: {
3734
+ wrapper: "mt-3 pb-8"
3735
+ }
3736
+ }, {
3737
+ orientation: "vertical",
3738
+ size: "3xl",
3739
+ class: {
3740
+ wrapper: "mt-3.5 pb-8.5"
3741
+ }
3742
+ }],
3743
+ defaultVariants: {
3744
+ size: "md",
3745
+ color: "primary"
3746
+ }
3747
+ });
3748
+
3495
3749
  const toast = (options) => ({
3496
3750
  slots: {
3497
3751
  root: "relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none",
@@ -3542,7 +3796,7 @@ const toast = (options) => ({
3542
3796
  const toaster = {
3543
3797
  slots: {
3544
3798
  viewport: "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none",
3545
- base: "pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:*:invisible data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out"
3799
+ base: "pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:*:opacity-0 data-[front=false]:*:transition-opacity data-[front=false]:*:duration-100 data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out"
3546
3800
  },
3547
3801
  variants: {
3548
3802
  position: {
@@ -3715,6 +3969,7 @@ const theme = {
3715
3969
  input: input,
3716
3970
  inputMenu: inputMenu,
3717
3971
  inputNumber: inputNumber,
3972
+ inputTags: inputTags,
3718
3973
  kbd: kbd,
3719
3974
  link: link,
3720
3975
  modal: modal,
@@ -3735,6 +3990,7 @@ const theme = {
3735
3990
  table: table,
3736
3991
  tabs: tabs,
3737
3992
  textarea: textarea,
3993
+ timeline: timeline,
3738
3994
  toast: toast,
3739
3995
  toaster: toaster,
3740
3996
  tooltip: tooltip,
package/dist/unplugin.mjs CHANGED
@@ -3,7 +3,7 @@ import { join, normalize } from 'pathe';
3
3
  import { createUnplugin } from 'unplugin';
4
4
  import { defu } from 'defu';
5
5
  import tailwind from '@tailwindcss/vite';
6
- import { g as getTemplates, d as defaultOptions, r as resolveColors, a as getDefaultUiConfig } from './shared/ui.Bix4DSU4.mjs';
6
+ import { g as getTemplates, d as defaultOptions, r as resolveColors, a as getDefaultUiConfig } from './shared/ui.BPVxSPGY.mjs';
7
7
  import { globSync } from 'tinyglobby';
8
8
  import { genSafeVariableName } from 'knitwork';
9
9
  import MagicString from 'magic-string';
package/dist/vite.mjs CHANGED
@@ -4,7 +4,7 @@ import 'pathe';
4
4
  import 'unplugin';
5
5
  import 'defu';
6
6
  import '@tailwindcss/vite';
7
- import './shared/ui.Bix4DSU4.mjs';
7
+ import './shared/ui.BPVxSPGY.mjs';
8
8
  import '../dist/runtime/utils/index.js';
9
9
  import 'scule';
10
10
  import '@nuxt/kit';
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@nuxt/ui",
3
3
  "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
4
- "version": "3.1.3",
5
- "packageManager": "pnpm@10.11.0",
4
+ "version": "3.2.0",
5
+ "packageManager": "pnpm@10.12.2",
6
6
  "repository": {
7
7
  "type": "git",
8
8
  "url": "git+https://github.com/nuxt/ui.git"
@@ -96,38 +96,37 @@
96
96
  "scripts": {
97
97
  "build": "nuxt-module-build build",
98
98
  "prepack": "pnpm build",
99
- "dev": "nuxi dev playground --uiDev",
100
- "dev:build": "nuxi build playground",
99
+ "dev": "nuxt dev playground --uiDev",
100
+ "dev:build": "nuxt build playground",
101
101
  "dev:vue": "vite playground-vue -- --uiDev",
102
102
  "dev:vue:build": "vite build playground-vue",
103
- "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground && nuxi prepare docs && vite build playground-vue",
104
- "docs": "nuxi dev docs --uiDev",
105
- "docs:build": "nuxi build docs",
106
- "docs:prepare": "nuxt-component-meta docs",
103
+ "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare playground && nuxt prepare docs && vite build playground-vue",
104
+ "docs": "nuxt dev docs --uiDev",
105
+ "docs:build": "nuxt build docs",
107
106
  "lint": "eslint .",
108
107
  "lint:fix": "eslint . --fix",
109
- "typecheck": "vue-tsc --noEmit && nuxi typecheck playground && nuxi typecheck docs && cd playground-vue && vue-tsc --noEmit",
108
+ "typecheck": "vue-tsc --noEmit && nuxt typecheck playground && nuxt typecheck docs && cd playground-vue && vue-tsc --noEmit",
110
109
  "test": "vitest",
111
110
  "test:vue": "vitest -c vitest.vue.config.ts",
112
111
  "release": "release-it"
113
112
  },
114
113
  "dependencies": {
115
114
  "@iconify/vue": "^5.0.0",
116
- "@internationalized/date": "^3.8.1",
117
- "@internationalized/number": "^3.6.2",
115
+ "@internationalized/date": "^3.8.2",
116
+ "@internationalized/number": "^3.6.3",
118
117
  "@nuxt/fonts": "^0.11.4",
119
- "@nuxt/icon": "^1.13.0",
120
- "@nuxt/kit": "^3.17.4",
121
- "@nuxt/schema": "^3.17.4",
118
+ "@nuxt/icon": "^1.14.0",
119
+ "@nuxt/kit": "^3.17.5",
120
+ "@nuxt/schema": "^3.17.5",
122
121
  "@nuxtjs/color-mode": "^3.5.2",
123
122
  "@standard-schema/spec": "^1.0.0",
124
- "@tailwindcss/postcss": "^4.1.7",
125
- "@tailwindcss/vite": "^4.1.7",
123
+ "@tailwindcss/postcss": "^4.1.10",
124
+ "@tailwindcss/vite": "^4.1.10",
126
125
  "@tanstack/vue-table": "^8.21.3",
127
126
  "@unhead/vue": "^2.0.10",
128
- "@vueuse/core": "^13.2.0",
129
- "@vueuse/integrations": "^13.2.0",
130
- "colortranslator": "^4.1.0",
127
+ "@vueuse/core": "^13.4.0",
128
+ "@vueuse/integrations": "^13.4.0",
129
+ "colortranslator": "^5.0.0",
131
130
  "consola": "^3.4.2",
132
131
  "defu": "^6.1.4",
133
132
  "embla-carousel-auto-height": "^8.6.0",
@@ -144,15 +143,15 @@
144
143
  "mlly": "^1.7.4",
145
144
  "ohash": "^2.0.11",
146
145
  "pathe": "^2.0.3",
147
- "reka-ui": "^2.2.1",
146
+ "reka-ui": "2.3.1",
148
147
  "scule": "^1.3.0",
149
148
  "tailwind-variants": "^1.0.0",
150
- "tailwindcss": "^4.1.7",
149
+ "tailwindcss": "^4.1.10",
151
150
  "tinyglobby": "^0.2.14",
152
- "unplugin": "^2.3.4",
151
+ "unplugin": "^2.3.5",
153
152
  "unplugin-auto-import": "^19.3.0",
154
153
  "unplugin-vue-components": "^28.7.0",
155
- "vaul-vue": "^0.4.1",
154
+ "vaul-vue": "0.4.1",
156
155
  "vue-component-type-helpers": "^2.2.10"
157
156
  },
158
157
  "devDependencies": {
@@ -162,11 +161,11 @@
162
161
  "@release-it/conventional-changelog": "^10.0.1",
163
162
  "@vue/test-utils": "^2.4.6",
164
163
  "embla-carousel": "^8.6.0",
165
- "eslint": "^9.27.0",
166
- "happy-dom": "^17.4.7",
167
- "nuxt": "^3.17.4",
168
- "release-it": "^19.0.2",
169
- "vitest": "^3.1.4",
164
+ "eslint": "^9.29.0",
165
+ "happy-dom": "^18.0.1",
166
+ "nuxt": "^3.17.5",
167
+ "release-it": "^19.0.3",
168
+ "vitest": "^3.2.4",
170
169
  "vitest-environment-nuxt": "^1.0.1",
171
170
  "vue-tsc": "^2.2.10"
172
171
  },
@@ -209,7 +208,7 @@
209
208
  "debug": "4.3.7",
210
209
  "rollup": "4.34.9",
211
210
  "unimport": "4.1.1",
212
- "unplugin": "^2.3.4"
211
+ "unplugin": "^2.3.5"
213
212
  },
214
213
  "pnpm": {
215
214
  "onlyBuiltDependencies": [