chore(release): 2.14.1

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>

.github/PULL_REQUEST_TEMPLATE.md

@@ -4,7 +4,7 @@
 
 ### 🔗 Linked issue
 
-<!-- Please ensure there is an open issue and mention its number as #123 -->
+<!-- If it resolves an open issue, please link the issue here. For example "Resolves #123" -->
 
 ### ❓ Type of change
 
@@ -21,7 +21,6 @@
 
 <!-- Describe your changes in detail -->
 <!-- Why is this change required? What problem does it solve? -->
-<!-- If it resolves an open issue, please link to the issue here. For example "Resolves #1337" -->
 
 ### 📝 Checklist
 

.github/workflows/ci-dev.yml

@@ -45,7 +45,7 @@ jobs:
         run: |
           echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         name: Setup pnpm cache
         with:
           path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
@@ -53,7 +53,7 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
 
-      - uses: dorny/paths-filter@v2
+      - uses: dorny/paths-filter@v3
         id: changes
         with:
           filters: |

.github/workflows/ci.yml

@@ -38,7 +38,7 @@ jobs:
         run: |
           echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         name: Setup pnpm cache
         with:
           path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}

.npmrc

@@ -1,2 +1,3 @@
 shamefully-hoist=true
 auto-install-peers=true
+ignore-workspace-root-check=true

.nuxtrc

@@ -1,3 +1,2 @@
 imports.autoImport=false
 typescript.includeWorkspace=true
-typescript.strict=false

.release-it.json

@@ -1,6 +1,7 @@
 {
   "git": {
-    "commitMessage": "chore(release): ${version}"
+    "commitMessage": "chore(release): ${version}",
+    "tagName": "v${version}"
   },
   "npm": {
     "publish": false
@@ -11,7 +12,7 @@
     "web": true
   },
   "hooks": {
-    "before:init": ["pnpm lint"]
+    "before:init": ["pnpm lint", "pnpm typecheck"]
   },
   "plugins": {
     "@release-it/conventional-changelog": {

CHANGELOG.md

@@ -1,5 +1,178 @@
 # Changelog
 
+## [2.14.1](https://github.com/nuxt/ui/compare/v2.14.0...v2.14.1) (2024-02-23)
+
+
+### Bug Fixes
+
+* **module:** revert tailwind config from [#1272](https://github.com/nuxt/ui/issues/1272) ([#1404](https://github.com/nuxt/ui/issues/1404)) ([ba15add](https://github.com/nuxt/ui/commit/ba15add4db5d2f84e987819628cbbf88edcbad57))
+
+## [2.14.0](https://github.com/nuxt/ui/compare/v2.13.0...v2.14.0) (2024-02-22)
+
+
+### Features
+
+* **Carousel:** expose methods to allow autoplay ([41ecd2a](https://github.com/nuxt/ui/commit/41ecd2a3d553886db3e32d9f48a477268d93f3c6)), closes [#1300](https://github.com/nuxt/ui/issues/1300)
+* **Divider:** handle `size` prop ([#1307](https://github.com/nuxt/ui/issues/1307)) ([cbeede6](https://github.com/nuxt/ui/commit/cbeede66bb3bd7778e03c19ebbf55bf7bd753cb8))
+* **Form:** use nuxt `useId` to bind input labels ([#1211](https://github.com/nuxt/ui/issues/1211)) ([27c71fa](https://github.com/nuxt/ui/commit/27c71fa40ecb9f8524fee7f3d17a384bc8812d25))
+* **Input:** handle type `file` ([946a39c](https://github.com/nuxt/ui/commit/946a39c73990dc352cf7b9a77bfaec339cdcab34)), closes [#563](https://github.com/nuxt/ui/issues/563)
+* **Modal:** open programmatically ([#1319](https://github.com/nuxt/ui/issues/1319)) ([6f29c62](https://github.com/nuxt/ui/commit/6f29c620ab758e27be63f8af53674828b59fb6ed))
+* **Table:** display progress bar when `loading` ([#1362](https://github.com/nuxt/ui/issues/1362)) ([3fe3521](https://github.com/nuxt/ui/commit/3fe35217cbc0cef7f41550c175e4e7ea2cc939a8))
+* **Tabs:** add `unmount` prop as `false` by default ([843a978](https://github.com/nuxt/ui/commit/843a9786445f6170c1380e3b404151da52b5a154)), closes [#663](https://github.com/nuxt/ui/issues/663)
+* **Textarea:** add `maxrows` prop to restrict autoresize ([#1302](https://github.com/nuxt/ui/issues/1302)) ([f643e7b](https://github.com/nuxt/ui/commit/f643e7b316639a79cf03da25250ab0fa85f466d5))
+
+
+### Bug Fixes
+
+* **Accordion:** style disclosure `div` after [#1199](https://github.com/nuxt/ui/issues/1199) ([882247e](https://github.com/nuxt/ui/commit/882247e5f40bf41fdfdffea501de5c898a7fb0b2))
+* **Alert:** remove `required` title to prevent warning when using slot ([e545b6f](https://github.com/nuxt/ui/commit/e545b6f0a128475166dcea3c1028798b106805f3))
+* **Card:** prevent `body` padding without default slot ([f682905](https://github.com/nuxt/ui/commit/f682905b26a22546634e9adc4b838a7741dbd7c9))
+* **components:** hydration attribute mismatch with vue `3.4` ([#1199](https://github.com/nuxt/ui/issues/1199)) ([10db144](https://github.com/nuxt/ui/commit/10db14475f7a527180be3fcf33cc5d3af52452c9))
+* **Form:** improve `validate` path type ([#1370](https://github.com/nuxt/ui/issues/1370)) ([5266591](https://github.com/nuxt/ui/commit/5266591c886422d5265e46e08e1276913d12bed1))
+* **Form:** return false when silent validation fails ([#1371](https://github.com/nuxt/ui/issues/1371)) ([d4b6147](https://github.com/nuxt/ui/commit/d4b6147fcceb7ff9cebe1586bb3094b10f50acb5))
+* **Link:** check `disabled` prop before navigating ([#1321](https://github.com/nuxt/ui/issues/1321)) ([ac42ec1](https://github.com/nuxt/ui/commit/ac42ec106ff259e1d44515e5fb3b5236559ac713))
+* **Meter:** missing import of `Icon` component ([f8b296f](https://github.com/nuxt/ui/commit/f8b296fc60b93c4656fd397f8eb6b06b4a1dcd93)), closes [#1328](https://github.com/nuxt/ui/issues/1328)
+* **module:** prevent tailwind warn with `bun` ([bb40c31](https://github.com/nuxt/ui/commit/bb40c3103174a039f65b31c65fcc5d40cb29ce6b)), closes [#809](https://github.com/nuxt/ui/issues/809)
+* **module:** put back `all` option in icons plugin ([412cd75](https://github.com/nuxt/ui/commit/412cd75eddb6140d7d9b3358b04df1e61f22b481)), closes [#1237](https://github.com/nuxt/ui/issues/1237)
+* **Notification:** remove `required` title to prevent warning when using slot ([aa2b1ca](https://github.com/nuxt/ui/commit/aa2b1cae8881dece9a629dc95a8f9df88f9bbd27))
+* **Progress:** prevent `NaN` percent display when indeterminate ([a55a08a](https://github.com/nuxt/ui/commit/a55a08a91eca6f4c7ff3ad40ee566b6445d2dfd0))
+* **RadioGroup:** pass `help` prop to radio children ([5a5b284](https://github.com/nuxt/ui/commit/5a5b284e967ca9cdb6c7df9809ed4f4569a65cfa)), closes [#1313](https://github.com/nuxt/ui/issues/1313)
+* **SelectMenu:** revert component `is` after [#1199](https://github.com/nuxt/ui/issues/1199) ([d0f4530](https://github.com/nuxt/ui/commit/d0f4530e8572a08d544041dec1f24a51bbc3b1e8))
+* **utils:** prevent merge of `popper` key ([9f35297](https://github.com/nuxt/ui/commit/9f352976ced5845a5fad00a6630d0166941a8a13)), closes [#1393](https://github.com/nuxt/ui/issues/1393)
+
+
+### Reverts
+
+* Revert "docs: add missing `overflow-hidden` on components" ([b893607](https://github.com/nuxt/ui/commit/b8936070f9e1f866a21d39f6c45140f86efebec4))
+
+## [2.13.0](https://github.com/nuxt/ui/compare/v2.12.3...v2.13.0) (2024-01-30)
+
+
+### ⚠ BREAKING CHANGES
+
+* **VerticalNavigation:** use `Badge` component for consistency
+
+### Features
+
+* **Carousel:** new component ([#927](https://github.com/nuxt/ui/issues/927)) ([f37b043](https://github.com/nuxt/ui/commit/f37b0431382867c24a0eff511ae151115cdfa2a2))
+* **Dropdown:** default delay from config ([c4a1c04](https://github.com/nuxt/ui/commit/c4a1c04174d612e8c4cdd430067a3bdf3d69f4bf))
+* **Form:** handle multiple paths in `validate` ([#1273](https://github.com/nuxt/ui/issues/1273)) ([20ac4b3](https://github.com/nuxt/ui/commit/20ac4b3332267491067f3a5a393ca97e3ec6bab5))
+* **HorizontalNavigation:** new component ([#1279](https://github.com/nuxt/ui/issues/1279)) ([b8007ba](https://github.com/nuxt/ui/commit/b8007bab5efde70a375d6e3b9be91a0b698485b1))
+* **InputMenu:** handle `nullable` prop when clearing input ([5e49fb8](https://github.com/nuxt/ui/commit/5e49fb8736e01889b8f7a60cf0edc420e49fe52c))
+* **Modal/Slideover:** emit `close-prevented` event ([#1207](https://github.com/nuxt/ui/issues/1207)) ([6faf15b](https://github.com/nuxt/ui/commit/6faf15bc7460d7473ec47de48e407d45cf7d2e26))
+* **module:** add option to disable global css styles ([#1266](https://github.com/nuxt/ui/issues/1266)) ([f96eb5e](https://github.com/nuxt/ui/commit/f96eb5e8b794af75303a98fa38e5285bcf928614))
+* **Popover:** default delay from config ([7f5711b](https://github.com/nuxt/ui/commit/7f5711bc76cc509079934fd15ebbccb82bced064))
+* **Tooltip:** default delay from config ([3400b56](https://github.com/nuxt/ui/commit/3400b56d82c1713e67838ba246bba687f3056fe6))
+* **VerticalNavigation:** use `Badge` component for consistency ([3e81eee](https://github.com/nuxt/ui/commit/3e81eee6e6dc066dda9e2270e183a76bc8695996))
+
+
+### Bug Fixes
+
+* **Breadrumb:** handle truncate ([5d3a962](https://github.com/nuxt/ui/commit/5d3a962782781e4204d24a2f240974612912f7ee))
+* **Link:** propagate `active` prop to slot as `isActive` ([b76e761](https://github.com/nuxt/ui/commit/b76e761bbb98fe7bbd19fba16220e26fd96e9731))
+* **Select:** consistent placeholder with input and textarea ([2cb41db](https://github.com/nuxt/ui/commit/2cb41db111da79f4f3f8ccd825071820050ba885)), closes [#1276](https://github.com/nuxt/ui/issues/1276)
+* **Slideover:** handle translate in RTL mode ([#1259](https://github.com/nuxt/ui/issues/1259)) ([ea58c88](https://github.com/nuxt/ui/commit/ea58c88baab3a0684e5b0140895ee630087ea044))
+
+## [2.12.3](https://github.com/nuxt/ui/compare/v2.12.2...v2.12.3) (2024-01-18)
+
+
+### Bug Fixes
+
+* **link:** import type from `[#vue](https://github.com/nuxt/ui/issues/vue)-router` ([79ec3fd](https://github.com/nuxt/ui/commit/79ec3fd031e28d15854e2f0d4fb978df337e43d5)), closes [#1253](https://github.com/nuxt/ui/issues/1253)
+
+## [2.12.2](https://github.com/nuxt/ui/compare/v2.12.1...v2.12.2) (2024-01-18)
+
+
+### Bug Fixes
+
+* **link:** improve nuxt link `rel` type ([05e90aa](https://github.com/nuxt/ui/commit/05e90aa1d13ab1772189d33278f482405ff88975))
+
+## [2.12.1](https://github.com/nuxt/ui/compare/v2.12.0...v2.12.1) (2024-01-18)
+
+
+### Bug Fixes
+
+* **Button:** inherit nuxt link props without breaking `nuxt-component-meta` ([d3e19dc](https://github.com/nuxt/ui/commit/d3e19dc65a530201c3adc7738e95e5a09b0a9274)), closes [#578](https://github.com/nuxt/ui/issues/578)
+* **Button:** pass-through nuxt link props to `ULink` ([a44bfc8](https://github.com/nuxt/ui/commit/a44bfc85114bed15ed25bb8c79d7ed52adc8d43c))
+* **InputMenu:** take `option-attribute` into account to display label ([1a93791](https://github.com/nuxt/ui/commit/1a937919a26546cfd7edb3f6a11ef790d401999d))
+* **Link:** prevent `type` bind on `<a>` ([b0df864](https://github.com/nuxt/ui/commit/b0df86437902696b594e5e7042601506a8bf4436))
+* **SelectMenu:** take `option-attribute` into account to display label ([b9fe74b](https://github.com/nuxt/ui/commit/b9fe74bca5f48555e76c16237c2acc868f69e243)), closes [#1151](https://github.com/nuxt/ui/issues/1151)
+* **Tooltip:** typo in kbd component ([4405d32](https://github.com/nuxt/ui/commit/4405d3239f7e19d399659347f079555318b3231b))
+
+## [2.12.0](https://github.com/nuxt/ui/compare/v2.11.1...v2.12.0) (2024-01-09)
+
+
+### ⚠ BREAKING CHANGES
+
+* **Card:** remove `overflow-hidden` on wrapper
+
+### Features
+
+* **Breadcrumb:** handle `labelClass` and merge `iconClass` ([f623ec1](https://github.com/nuxt/ui/commit/f623ec1130edf448988784b36c15a850470685c4))
+* **Dropdown:** handle `labelClass` and merge `iconClass` ([1c9835d](https://github.com/nuxt/ui/commit/1c9835d7f149231cf2e3e053e5ea08eceeaaa61d)), closes [#716](https://github.com/nuxt/ui/issues/716)
+* **Dropdown:** handle manual mode ([3844714](https://github.com/nuxt/ui/commit/38447146445618a1310a6315c608f4cd21069e17)), closes [#1143](https://github.com/nuxt/ui/issues/1143)
+* **Form:** expose submit function ([#1186](https://github.com/nuxt/ui/issues/1186)) ([4a25a12](https://github.com/nuxt/ui/commit/4a25a12390f8ecae83c1081c89eba99a8fda14f8))
+* **InputMenu:** new component ([#1095](https://github.com/nuxt/ui/issues/1095)) ([6d8d82a](https://github.com/nuxt/ui/commit/6d8d82a265692aaee556e40b09e4b3048ae044da))
+* **Pagination:** add `disabled` prop ([0976833](https://github.com/nuxt/ui/commit/0976833753cd2140649bc324f53a263d4e09ecff)), closes [#1189](https://github.com/nuxt/ui/issues/1189)
+* **Popover:** open and close events ([#1038](https://github.com/nuxt/ui/issues/1038)) ([f32f578](https://github.com/nuxt/ui/commit/f32f578125c12b35e59db2f7981c8b1b5a146397))
+* **SelectMenu:** add `empty` slot when no options ([5d1919a](https://github.com/nuxt/ui/commit/5d1919a5381b316637d50405d287428f67f2b9cc)), closes [#1089](https://github.com/nuxt/ui/issues/1089)
+* **SelectMenu:** allow control of search query ([f735db0](https://github.com/nuxt/ui/commit/f735db04d62fca678ca30ecd565b32e70bcda3e0)), closes [#1174](https://github.com/nuxt/ui/issues/1174)
+* **SelectMenu:** allow creating option despite search ([#1080](https://github.com/nuxt/ui/issues/1080)) ([0fdc8f7](https://github.com/nuxt/ui/commit/0fdc8f70b6a656114d30b07d682e4edcd61a23fb))
+* **Table:** add `sort-mode` prop ([56e0c9a](https://github.com/nuxt/ui/commit/56e0c9a9a05e1e8491e2d460b8d51084bd2c1305)), closes [#1149](https://github.com/nuxt/ui/issues/1149)
+* **Table:** add custom sort function to columns ([#1075](https://github.com/nuxt/ui/issues/1075)) ([4f3af6c](https://github.com/nuxt/ui/commit/4f3af6cfdb5213d1be3d2680fcf3a95f7b3bc0b3))
+* **VerticalNavigation:** ability to add dividers ([#963](https://github.com/nuxt/ui/issues/963)) ([ffd20b3](https://github.com/nuxt/ui/commit/ffd20b3991a35ae7fa0e249fa009e330fd963705))
+* **VerticalNavigation:** handle `labelClass` and merge `iconClass` ([a79f7c0](https://github.com/nuxt/ui/commit/a79f7c0a34c0414fe4feb95691e1f044b07ef087))
+* **VerticalNavigation:** improve accessibility ([#948](https://github.com/nuxt/ui/issues/948)) ([29e64ca](https://github.com/nuxt/ui/commit/29e64ca963eeed1e82640957860f43391d8683ed))
+
+
+### Bug Fixes
+
+* **Alert:** always pass a function to actions click events ([5d78111](https://github.com/nuxt/ui/commit/5d781112f1eb464658c83047bf80c2ea7c9a2b05)), closes [#1197](https://github.com/nuxt/ui/issues/1197)
+* **Card:** remove `overflow-hidden` on wrapper ([4124406](https://github.com/nuxt/ui/commit/412440603206151d63b04ffe6bed1bbc5b0e6615)), closes [#806](https://github.com/nuxt/ui/issues/806) [#1034](https://github.com/nuxt/ui/issues/1034)
+* **config:** prevent class merge of `avatar` size ([b22bd70](https://github.com/nuxt/ui/commit/b22bd70d54e68c3217ba42690210084749fee656))
+* **Dropdown:** improve placement with `hover` mode ([c6aa421](https://github.com/nuxt/ui/commit/c6aa4215d7f9003adeefa7cdff76c7a88715f20c)), closes [#1179](https://github.com/nuxt/ui/issues/1179)
+* **Dropdown:** merge item `class` ([7151b7b](https://github.com/nuxt/ui/commit/7151b7b97d42f389506521044ebaffa8a299e7fb)), closes [#1157](https://github.com/nuxt/ui/issues/1157)
+* **Form:** invalid errors when using `clear` by path ([#1165](https://github.com/nuxt/ui/issues/1165)) ([97a3975](https://github.com/nuxt/ui/commit/97a39751977bf1e942e2bafd5839141383b7af2f))
+* **Form:** memory leak ([#1185](https://github.com/nuxt/ui/issues/1185)) ([ea2a24b](https://github.com/nuxt/ui/commit/ea2a24b5fe6ddc87e6eb951a662ce8b84b9d987f))
+* **forms:** dont disable inputs and selects on `loading` ([3258167](https://github.com/nuxt/ui/commit/3258167a1431b664cd1dcc925a4b3fe06a996831)), closes [#1117](https://github.com/nuxt/ui/issues/1117)
+* **Link:** handle `active` override when value is false ([83631cc](https://github.com/nuxt/ui/commit/83631ccbca1364f012b0c2899f97e2166dd1d360))
+* **Popover:** allow manual mode without blocking normal behaviour ([3334e2a](https://github.com/nuxt/ui/commit/3334e2af3de2844de08ee530e62f2e4e2fd7ed24))
+* **Popover:** improve placement with `hover` mode ([bc00f9c](https://github.com/nuxt/ui/commit/bc00f9c4b25dd4b99cb6e53014624f41ee929654)), closes [#781](https://github.com/nuxt/ui/issues/781)
+* **RadioGroup:** pass `option.disabled` to children ([0c8ab9d](https://github.com/nuxt/ui/commit/0c8ab9d98e494c49cceac111edc0606ee4d63638)), closes [#1109](https://github.com/nuxt/ui/issues/1109)
+* **SelectMenu:** input border focus after `tailwindcss` 3.4 ([e8f573b](https://github.com/nuxt/ui/commit/e8f573b6bb32a22873d9f93b40883ca12b481d7e))
+* **Table:** display nothing instead of error when key is missing ([00d0fd5](https://github.com/nuxt/ui/commit/00d0fd59192cc171abb3d2ddaee46b2b9fa9422f)), closes [#1173](https://github.com/nuxt/ui/issues/1173)
+* **Table:** respect sort prop updates from parent component ([#1208](https://github.com/nuxt/ui/issues/1208)) ([c6841d0](https://github.com/nuxt/ui/commit/c6841d06a48ffef95d238f94a4822a1e48b85422))
+* **Toggle:** add missing `change` event ([4c84839](https://github.com/nuxt/ui/commit/4c84839a0183756b9f8df8674aace8cd40e44dcd)), closes [#1113](https://github.com/nuxt/ui/issues/1113)
+* update vue and fix type issues ([#1112](https://github.com/nuxt/ui/issues/1112)) ([5c99ae1](https://github.com/nuxt/ui/commit/5c99ae131d1a50a8db21f1d5794a06080c515831))
+* **useShortcuts:** include `contenteditable="plaintext-only"` elements in `usingInput` ([#1159](https://github.com/nuxt/ui/issues/1159)) ([648eec3](https://github.com/nuxt/ui/commit/648eec31b99fcffb65c042e0a5587da941c8e90f))
+* **useShortcuts:** invalid code after [#1159](https://github.com/nuxt/ui/issues/1159) ([56e1fed](https://github.com/nuxt/ui/commit/56e1fed373786fc158ca9da9f02a9ec4e273afce))
+
+
+### Reverts
+
+* Revert "docs: pull `nuxt/ui-pro` docs from `main` branch" ([d0ce8ee](https://github.com/nuxt/ui/commit/d0ce8ee1c4a3d7b2285885d76e02e03168011110))
+
+## [2.11.1](https://github.com/nuxt/ui/compare/v2.11.0...v2.11.1) (2023-12-11)
+
+
+### Bug Fixes
+
+* **Breadcrumb:** handle divider in rtl ([#1049](https://github.com/nuxt/ui/issues/1049)) ([e53cdea](https://github.com/nuxt/ui/commit/e53cdeaf0b3746da76cb6a658a5f71064d97fc9a))
+* **CommandPalette:** improve performances and avoid multiple recompute ([db508b2](https://github.com/nuxt/ui/commit/db508b218f5277b2522566f790bd268eae2ee1e5))
+* **CommandPalette:** missing right padding on input with close button ([ad33b26](https://github.com/nuxt/ui/commit/ad33b26729b1bf3d21f8d480e04c197f4fbb6119))
+* **components:** move remaining classes to config ([#1039](https://github.com/nuxt/ui/issues/1039)) ([e408eab](https://github.com/nuxt/ui/commit/e408eabd8b841cdf8c71ce27c35c9675f2db8625))
+* **module:** prevent class merging on `default` children ([f07968a](https://github.com/nuxt/ui/commit/f07968afef263d38183ce6c9cd9185ef7eee0494)), closes [#1076](https://github.com/nuxt/ui/issues/1076)
+* **Notification:** handle dynamic backgrounds ([#1063](https://github.com/nuxt/ui/issues/1063)) ([1f0f618](https://github.com/nuxt/ui/commit/1f0f6181db7fa1ab45b8f7fec8df1cedccaec688))
+* **RadioGroup:** props reactivity issues ([#1065](https://github.com/nuxt/ui/issues/1065)) ([7196d81](https://github.com/nuxt/ui/commit/7196d81b4cecf1711a01bed5fed1236ab3b2398b))
+* **types:** favor `Record<string, any>>` instead of `object` ([4d72a75](https://github.com/nuxt/ui/commit/4d72a758fad5cffa09f3aaf6b3df9baf7edc2a9f))
+* **types:** improve with strict mode ([#1041](https://github.com/nuxt/ui/issues/1041)) ([4a9b66a](https://github.com/nuxt/ui/commit/4a9b66aeb32a332e2d5be7e236e5d4567044b3e2))
+* **types:** workaround for `popper` weak type ([5718dfd](https://github.com/nuxt/ui/commit/5718dfd69a7040987354485b30f7da7aee342abb)), closes [#644](https://github.com/nuxt/ui/issues/644)
+
+
+### Reverts
+
+* Revert "chore(deps): pin `vitest`" ([6984989](https://github.com/nuxt/ui/commit/6984989a2c20fbde177d1e64ea1a7cae07f03c4d))
+
 ## [2.11.0](https://github.com/nuxt/ui/compare/v2.10.0...v2.11.0) (2023-11-23)
 
 

README.md

@@ -1,4 +1,4 @@
-[![nuxt-ui-social-card](https://repository-images.githubusercontent.com/428329515/43fec891-9030-4601-8233-5d45ba5c6013)](https://ui.nuxt.com)
+[![nuxt-ui.png](https://repository-images.githubusercontent.com/428329515/43fec891-9030-4601-8233-5d45ba5c6013)](https://ui.nuxt.com)
 
 # Nuxt UI
 
@@ -7,9 +7,9 @@
 [![License][license-src]][license-href]
 [![Nuxt][nuxt-src]][nuxt-href]
 
-Nuxt UI provides everything related to UI when building Nuxt applications: components, icons, colors, dark mode and also keyboard shortcuts.
+Nuxt UI is a module that provides a set of Vue components and composables built with [Tailwind CSS](https://tailwindcss.com/) and [Headless UI](https://headlessui.dev/) to help you build beautiful and accessible user interfaces.
 
-Is has been developed by [NuxtLabs](https://nuxtlabs.com/) for [Volta](https://volta.net), [Nuxt Studio](https://nuxt.studio/) and the Nuxt community.
+Its goal is to provide everything related to UI when building a Nuxt app. This includes components, icons, colors, dark mode but also keyboard shortcuts.
 
 ## Features
 
@@ -27,14 +27,14 @@ Read more on [ui.nuxt.com](https://ui.nuxt.com)
 ## Installation
 
 ```bash
-# Using npm
+# npm
 npm install @nuxt/ui
-
-# Using yarn
+# yarn
 yarn add @nuxt/ui
-
-# Using pnpm
+# pnpm
 pnpm add @nuxt/ui
+# bun
+bun add @nuxt/ui
 ```
 
 Then, register the module in your `nuxt.config.ts`:

docs/app.vue

@@ -1,6 +1,10 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <div>
+    <NuxtLoadingIndicator />
+
+    <Banner />
+
     <Header v-if="!$route.path.startsWith('/examples')" :links="links" />
 
     <NuxtLayout>
@@ -10,7 +14,7 @@
     <Footer v-if="!$route.path.startsWith('/examples')" />
 
     <ClientOnly>
-      <LazyUDocsSearch ref="searchRef" :files="files" :navigation="navigation" :groups="groups" :links="links" />
+      <LazyUContentSearch ref="searchRef" :files="files" :navigation="navigation" :links="links" :fuse="{ resultLimit: 1000 }" />
     </ClientOnly>
 
     <UNotifications>
@@ -18,6 +22,7 @@
         <span v-html="title" />
       </template>
     </UNotifications>
+    <UModals />
   </div>
 </template>
 
@@ -30,7 +35,7 @@ const searchRef = ref()
 
 const route = useRoute()
 const colorMode = useColorMode()
-const { branch, branches } = useContentSource()
+const { branch } = useContentSource()
 
 const { data: nav } = await useAsyncData('navigation', () => fetchContentNavigation())
 const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', { default: () => [], server: false })
@@ -48,54 +53,31 @@ const navigation = computed(() => {
     ]
   }
 
-  return nav.value.filter(item => item._path !== '/dev')
-})
-
-const groups = computed(() => {
-  if (route.path === '/') {
-    return []
-  }
-
-  return [{ key: 'branch', label: 'Branch', commands: branches.value }]
+  return nav.value?.filter(item => item._path !== '/dev') || []
 })
 
 const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')
 
 const links = computed(() => {
   return [{
-    label: 'Documentation',
+    label: 'Docs',
     icon: 'i-heroicons-book-open',
-    to: `${branch.value?.name === 'dev' ? '/dev' : ''}/getting-started`
-  }, {
-    label: 'Playground',
-    icon: 'i-simple-icons-stackblitz',
-    to: '/playground'
-  }, {
-    label: 'Roadmap',
-    icon: 'i-heroicons-academic-cap',
-    to: '/roadmap'
-  }, !!navigation.value.find(item => item._path === '/pro') && {
+    to: branch.value?.name === 'dev' ? '/dev/getting-started' : '/getting-started',
+    active: branch.value?.name === 'dev' ? (route.path.startsWith('/dev/getting-started') || route.path.startsWith('/dev/components')) : (route.path.startsWith('/getting-started') || route.path.startsWith('/components'))
+  }, ...(navigation.value.find(item => item._path === '/pro') ? [{
     label: 'Pro',
     icon: 'i-heroicons-square-3-stack-3d',
     to: '/pro',
-    children: [{
-      label: 'Features',
-      to: '/pro',
-      exact: true,
-      icon: 'i-heroicons-beaker',
-      description: 'Discover all the features of Nuxt UI Pro.'
-    }, {
-      label: 'Guide',
-      to: '/pro/guide',
-      icon: 'i-heroicons-book-open',
-      description: 'Learn how to use Nuxt UI Pro in your app.'
-    }, {
-      label: 'Components',
-      to: '/pro/components',
-      icon: 'i-heroicons-cube-transparent',
-      description: 'Discover all the components available in Nuxt UI Pro.'
-    }]
+    active: route.path.startsWith('/pro/getting-started') || route.path.startsWith('/pro/components') || route.path.startsWith('/pro/prose')
   }, {
+    label: 'Pricing',
+    icon: 'i-heroicons-credit-card',
+    to: '/pro/pricing'
+  }, {
+    label: 'Templates',
+    icon: 'i-heroicons-computer-desktop',
+    to: '/pro/templates'
+  }] : []), {
     label: 'Releases',
     icon: 'i-heroicons-rocket-launch',
     to: '/releases'

docs/components/Banner.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { isAfter } from 'date-fns'
+
+const id = 'nuxt-ui-banner-1'
+const to = '/pro/pricing'
+const date = new Date('2024-02-25T20:00:00Z')
+
+const timeAgo = useTimeAgo(date)
+
+const hideBanner = () => {
+  localStorage.setItem(id, 'true')
+
+  document.querySelector('html')?.classList.add('hide-banner')
+}
+
+if (process.server) {
+  useHead({
+    script: [{
+      key: 'prehydrate-template-banner',
+      innerHTML: `
+            if (localStorage.getItem('${id}') === 'true') {
+              document.querySelector('html').classList.add('hide-banner')
+            }`.replace(/\s+/g, ' '),
+      type: 'text/javascript'
+    }]
+  })
+}
+
+onMounted(() => {
+  if (isAfter(new Date(), date)) {
+    hideBanner()
+    return
+  }
+
+  const interval = setInterval(() => {
+    if (isAfter(new Date(), date)) {
+      hideBanner()
+      clearInterval(interval)
+    }
+  }, 1000)
+})
+</script>
+
+<template>
+  <div class="relative bg-primary hover:bg-primary/90 transition-[background] backdrop-blur z-50 app-banner">
+    <UContainer class="py-2">
+      <NuxtLink v-if="to" :to="to" class="focus:outline-none" tabindex="-1">
+        <span class="absolute inset-0 " aria-hidden="true" />
+      </NuxtLink>
+
+      <div class="flex items-center justify-between gap-2">
+        <div class="lg:flex-1 hidden lg:flex items-center" />
+
+        <p class="text-sm font-medium text-white dark:text-gray-900">
+          <UIcon name="i-heroicons-gift" class="w-5 h-5 align-top flex-shrink-0 pointer-events-none mr-2" />
+          <span class="font-semibold">Nuxt UI Pro v1.0</span> is out with dashboard components! Discount ends <span class="font-semibold">{{ timeAgo }}</span>.
+        </p>
+
+        <div class="flex items-center justify-end lg:flex-1">
+          <button
+            class="p-1.5 rounded-md inline-flex hover:bg-primary/90"
+            @click.prevent="hideBanner"
+          >
+            <UIcon name="i-heroicons-x-mark-20-solid" class="w-5 h-5 text-white dark:text-gray-900" />
+          </button>
+        </div>
+      </div>
+    </UContainer>
+  </div>
+</template>
+
+<style scoped>
+.hide-banner .app-banner {
+  display: none;
+}
+</style>

docs/components/BranchSelect.vue

@@ -1,36 +1,34 @@
 <template>
   <div class="mb-3 lg:mb-6">
-    <label for="branch" class="block mb-1.5 font-semibold text-sm/6">Version</label>
-
-    <USelectMenu
-      id="branch"
-      :model-value="branch"
-      name="branch"
-      :options="branches"
+    <UDropdown
+      class="w-full"
+      :items="[branches]"
       color="gray"
-      :ui="{ icon: { trailing: { padding: { sm: 'pe-1.5' } } } }"
-      :ui-menu="{ option: { container: 'gap-1.5' } }"
-      @update:model-value="select"
+      mode="hover"
+      :ui="{ width: 'w-full' }"
+      :popper="{ strategy: 'absolute', placement: 'bottom' }"
     >
-      <template #label>
+      <UButton color="gray" class="w-full">
         <UIcon v-if="branch.icon" :name="branch.icon" class="w-4 h-4 flex-shrink-0 text-gray-600 dark:text-gray-300" />
 
-        <span class="font-medium">{{ branch.label }}</span>
+        <span class="text-gray-900 dark:text-white">{{ branch.label }}</span>
 
-        <span class="truncate text-gray-400 dark:text-gray-500">{{ branch.suffix }}</span>
+        <span class="text-gray-400 dark:text-gray-500">{{ branch.suffix }}</span>
+
+        <UIcon name="i-heroicons-chevron-down-20-solid" class="w-5 h-5 text-gray-400 dark:text-gray-500 ml-auto -mr-1" />
+      </UButton>
+
+      <template #item="{ item }">
+        <UIcon v-if="item.icon" :name="item.icon" class="w-4 h-4 flex-shrink-0 text-gray-600 dark:text-gray-300" />
+
+        <span>{{ item.label }}</span>
+
+        <span class="truncate text-gray-400 dark:text-gray-500">{{ item.suffix }}</span>
       </template>
-
-      <template #option="{ option }">
-        <UIcon v-if="option.icon" :name="option.icon" class="w-4 h-4 flex-shrink-0 text-gray-600 dark:text-gray-300" />
-
-        <span class="font-medium">{{ option.label }}</span>
-
-        <span class="truncate text-gray-400 dark:text-gray-500">{{ option.suffix }}</span>
-      </template>
-    </USelectMenu>
+    </UDropdown>
   </div>
 </template>
 
 <script setup lang="ts">
-const { branches, branch, select } = useContentSource()
+const { branches, branch } = useContentSource()
 </script>

docs/components/Footer.vue

@@ -5,21 +5,19 @@
     </div>
   </div>
 
-  <UFooter>
+  <UFooter :links="links">
     <template #left>
-      <a v-if="$route.path.startsWith('/pro')" class="text-sm text-gray-500 dark:text-gray-400 hover:underline" href="https://ui.nuxt.com/pro/purchase" target="_blank">
-        Purchase Nuxt UI Pro
-      </a>
-      <span v-else class="text-sm text-gray-500 dark:text-gray-400">
-        Published under <NuxtLink to="https://github.com/nuxt/ui" target="_blank" class="text-gray-900 dark:text-white">
-          MIT License
-        </NuxtLink>
-      </span>
+      <NuxtLink v-if="$route.path.startsWith('/pro')" to="https://ui.nuxt.com/pro/purchase" target="_blank" class="text-sm text-gray-500 dark:text-gray-400">
+        Purchase <span class="text-gray-900 dark:text-white">Nuxt UI Pro</span>
+      </NuxtLink>
+      <NuxtLink v-else to="https://github.com/nuxt/ui" target="_blank" class="text-sm text-gray-500 dark:text-gray-400">
+        Published under <span class="text-gray-900 dark:text-white">MIT License</span>
+      </NuxtLink>
     </template>
 
     <template #right>
       <UButton aria-label="Nuxt Website" icon="i-simple-icons-nuxtdotjs" to="https://nuxt.com" target="_blank" v-bind="($ui.button.secondary as any)" />
-      <UButton aria-label="Nuxt UI on Discord" icon="i-simple-icons-discord" to="https://discord.com/invite/ps2h6QT" target="_blank" v-bind="($ui.button.secondary as any)" />
+      <UButton aria-label="Nuxt UI on Discord" icon="i-simple-icons-discord" to="https://chat.nuxt.dev" target="_blank" v-bind="($ui.button.secondary as any)" />
       <UButton aria-label="Nuxt on X" icon="i-simple-icons-x" to="https://x.com/nuxt_js" target="_blank" v-bind="($ui.button.secondary as any)" />
       <UButton aria-label="Nuxt UI on GitHub" icon="i-simple-icons-github" to="https://github.com/nuxt/ui" target="_blank" v-bind="($ui.button.secondary as any)" />
     </template>
@@ -27,5 +25,23 @@
 </template>
 
 <script setup lang="ts">
-// force typescript
+const links = [{
+  icon: 'i-simple-icons-figma',
+  label: 'Figma Kit',
+  to: 'https://www.figma.com/community/file/1288455405058138934',
+  target: '_blank'
+}, {
+  label: 'Playground',
+  icon: 'i-simple-icons-stackblitz',
+  to: 'https://stackblitz.com/edit/nuxt-ui',
+  target: '_blank'
+}, {
+  label: 'Roadmap',
+  icon: 'i-heroicons-map',
+  to: '/roadmap'
+}, {
+  label: 'Releases',
+  icon: 'i-heroicons-rocket-launch',
+  to: '/releases'
+}]
 </script>

docs/components/Header.vue

@@ -7,16 +7,19 @@
     }"
   >
     <template #left>
-      <NuxtLink to="/" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white" aria-label="Nuxt UI">
+      <NuxtLink to="/" class="flex items-end gap-2 font-bold text-xl text-gray-900 dark:text-white" aria-label="Nuxt UI">
         <Logo class="w-auto h-6" />
+
+        <UBadge v-if="$route.path.startsWith('/pro')" label="Pro" variant="subtle" size="xs" class="-mb-[2px] rounded font-semibold" />
+        <UBadge v-if="$route.path.startsWith('/dev')" label="Edge" variant="subtle" size="xs" class="-mb-[2px] rounded font-semibold" />
       </NuxtLink>
     </template>
 
     <template #right>
       <ColorPicker />
 
-      <UTooltip text="Search" :shortcuts="[metaSymbol, 'K']">
-        <UDocsSearchButton :label="null" />
+      <UTooltip text="Search" :shortcuts="[metaSymbol, 'K']" :popper="{ strategy: 'absolute' }">
+        <UContentSearchButton :label="null" />
       </UTooltip>
 
       <UColorModeButton />
@@ -33,9 +36,9 @@
     <template #panel>
       <UAsideLinks :links="links" />
 
-      <UDivider type="dashed" class="mt-4 mb-3" />
+      <UDivider type="dashed" class="my-4" />
 
-      <BranchSelect v-if="!route.path.startsWith('/pro')" />
+      <BranchSelect />
 
       <UNavigationTree :links="mapContentNavigation(navigation)" :multiple="false" default-open />
     </template>
@@ -44,10 +47,10 @@
 
 <script setup lang="ts">
 import type { NavItem } from '@nuxt/content/dist/runtime/types'
-import type { Link } from '#ui-pro/types'
+import type { HeaderLink } from '#ui-pro/types'
 
 defineProps<{
-  links: Link[]
+  links: HeaderLink[]
 }>()
 
 const route = useRoute()

docs/components/OgImage/OgImageDocs.vue

@@ -56,7 +56,7 @@ defineProps({
       <h1 class="m-0 text-[75px] font-semibold mb-2 text-white flex items-center">
         <span>{{ title }}</span>
       </h1>
-      <p class="text-[32px] text-[#94a3b8] leading-tight">
+      <p v-if="description" class="text-[32px] text-[#94a3b8] leading-tight">
         {{ description.slice(0, 200) }}
       </p>
     </div>

docs/components/ads/AdsCarbon.vue

@@ -0,0 +1,45 @@
+<template>
+  <div ref="carbonads" class="carbon" />
+</template>
+
+<script setup lang="ts">
+const carbonads = ref(null)
+
+onMounted(() => {
+  if (carbonads.value) {
+    const script = document.createElement('script')
+    script.setAttribute('type', 'text/javascript')
+    script.setAttribute('src', 'https://cdn.carbonads.com/carbon.js?serve=CWYIVK3E&placement=uinuxtcom')
+    script.setAttribute('id', '_carbonads_js')
+    carbonads.value.appendChild(script)
+  }
+})
+</script>
+
+<style lang="postcss">
+.carbon > #carbonads {
+  @apply relative border border-gray-200 dark:border-gray-800 rounded-lg bg-white dark:bg-gray-800/50 hover:border-gray-300 dark:hover:border-gray-700 w-full transition-colors min-h-[220px];
+
+  &:hover {
+    .carbon-text {
+      @apply text-gray-700 dark:text-gray-200;
+    }
+  }
+
+  .carbon-img {
+    @apply flex justify-center p-2 w-full;
+
+    & > img {
+      @apply !max-w-full w-full rounded;
+    }
+  }
+
+  .carbon-text {
+    @apply flex px-2 text-sm text-gray-500 dark:text-gray-400 transition-colors text-center w-full;
+  }
+
+  .carbon-poweredby {
+    @apply block text-xs text-center text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 pt-1 pb-2 px-2 transition-colors;
+  }
+}
+</style>

docs/components/ads/AdsPro.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="relative group/ad border border-gray-200 dark:border-gray-800 rounded-lg bg-white dark:bg-gray-800/50 hover:border-gray-300 dark:hover:border-gray-700 p-2 w-full transition-colors">
+    <NuxtLink to="/pro" class="focus:outline-none" tabindex="-1">
+      <span class="absolute inset-0" aria-hidden="true" />
+    </NuxtLink>
+
+    <UColorModeImage
+      light="/illustrations/pro-light.svg"
+      dark="/illustrations/pro-dark.svg"
+      alt="Nuxt UI Pro"
+      loading="lazy"
+      class="w-full"
+    />
+
+    <div class="flex flex-col items-center mt-2 text-center">
+      <div class="inline-flex gap-1.5">
+        <Logo class="h-4 w-auto" />
+
+        <UBadge variant="subtle" size="xs" label="Pro" class="font-semibold rounded" />
+      </div>
+
+      <p class="text-sm text-gray-500 dark:text-gray-400 group-hover/ad:text-gray-700 dark:group-hover/ad:text-gray-200 mt-1 transition-colors">
+        The Building Blocks for Modern Web Apps.
+      </p>
+    </div>
+  </div>
+</template>

docs/components/color-picker/ColorPicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <UPopover mode="hover">
+  <UPopover mode="hover" :popper="{ strategy: 'absolute' }" :ui="{ width: 'w-[156px]' }">
     <template #default="{ open }">
       <UButton color="gray" variant="ghost" square :class="[open && 'bg-gray-50 dark:bg-gray-800']" aria-label="Color picker">
         <UIcon name="i-heroicons-swatch-20-solid" class="w-5 h-5 text-primary-500 dark:text-primary-400" />

docs/components/content/ComponentCard.vue

@@ -51,11 +51,9 @@
 </template>
 
 <script setup lang="ts">
-// @ts-expect-error
 import { transformContent } from '@nuxt/content/transformers'
-// @ts-ignore
-import { useShikiHighlighter } from '@nuxtjs/mdc/runtime'
 import { upperFirst, camelCase, kebabCase } from 'scule'
+import { useShikiHighlighter } from '~/composables/useShikiHighlighter'
 
 // eslint-disable-next-line vue/no-dupe-keys
 const props = defineProps({
@@ -110,6 +108,10 @@ const props = defineProps({
   componentClass: {
     type: String,
     default: ''
+  },
+  ignoreVModel: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -120,6 +122,7 @@ const componentProps = reactive({ ...props.props })
 const { $prettier } = useNuxtApp()
 const appConfig = useAppConfig()
 const route = useRoute()
+const highlighter = useShikiHighlighter()
 
 let name = props.slug || `U${upperFirst(camelCase(route.params.slug[route.params.slug.length - 1]))}`
 
@@ -213,11 +216,15 @@ const propsToSelect = computed(() => Object.keys(componentProps).map((key) => {
 // eslint-disable-next-line vue/no-dupe-keys
 const code = computed(() => {
   let code = `\`\`\`html
+<template>
 <${name}`
   for (const [key, value] of Object.entries(fullProps.value)) {
     if (value === 'undefined' || value === null) {
       continue
     }
+    if (key === 'modelValue' && props.ignoreVModel) {
+      continue
+    }
 
     code += ` ${(typeof value === 'boolean' && (value !== true || key === 'modelValue')) || typeof value === 'object' || typeof value === 'number' ? ':' : ''}${key === 'modelValue' ? 'model-value' : kebabCase(key)}${typeof value === 'boolean' && !!value && key !== 'modelValue' ? '' : `="${typeof value === 'object' ? renderObject(value) : value}"`}`
   }
@@ -239,7 +246,7 @@ const code = computed(() => {
   } else {
     code += ' />'
   }
-  code += `
+  code += `\n</template>
 \`\`\`
 `
   return code
@@ -261,8 +268,6 @@ function renderObject (obj: any) {
   return obj
 }
 
-const shikiHighlighter = useShikiHighlighter({})
-const codeHighlighter = async (code: string, lang: string, theme: any, highlights: number[]) => shikiHighlighter.getHighlightedAST(code, lang, theme, { highlights })
 const { data: ast } = await useAsyncData(
   `${name}-ast-${JSON.stringify({ props: componentProps, slots: props.slots, code: props.code })}`,
   async () => {
@@ -276,7 +281,7 @@ const { data: ast } = await useAsyncData(
     return transformContent('content:_markdown.md', formatted, {
       markdown: {
         highlight: {
-          highlighter: codeHighlighter,
+          highlighter,
           theme: {
             light: 'material-theme-lighter',
             default: 'material-theme',

docs/components/content/ComponentExample.vue

@@ -12,7 +12,7 @@
       <ContentSlot v-if="$slots.default" :use="$slots.default" />
     </div>
     <template v-if="hasCode">
-      <ContentSlot v-if="$slots.code" :use="$slots.code" />
+      <slot v-if="$slots.code" name="code" />
       <ContentRenderer v-else :value="ast" class="[&>div>pre]:!rounded-t-none [&>div>pre]:!mt-0" />
     </template>
   </div>
@@ -21,10 +21,8 @@
 <script setup lang="ts">
 import { camelCase } from 'scule'
 import { fetchContentExampleCode } from '~/composables/useContentExamplesCode'
-// @ts-expect-error
 import { transformContent } from '@nuxt/content/transformers'
-// @ts-ignore
-import { useShikiHighlighter } from '@nuxtjs/mdc/runtime'
+import { useShikiHighlighter } from '~/composables/useShikiHighlighter'
 
 const props = defineProps({
   component: {
@@ -78,15 +76,14 @@ if (['command-palette-theme-algolia', 'command-palette-theme-raycast', 'vertical
 const instance = getCurrentInstance()
 const camelName = camelCase(component)
 const data = await fetchContentExampleCode(camelName)
+const highlighter = useShikiHighlighter()
 
 const hasCode = computed(() => !props.hiddenCode && (data?.code || instance.slots.code))
 
-const shikiHighlighter = useShikiHighlighter({})
-const codeHighlighter = async (code: string, lang: string, theme: any, highlights: number[]) => shikiHighlighter.getHighlightedAST(code, lang, theme, { highlights })
 const { data: ast } = await useAsyncData(`content-example-${camelName}-ast`, () => transformContent('content:_markdown.md', `\`\`\`vue\n${data?.code ?? ''}\n\`\`\``, {
   markdown: {
     highlight: {
-      highlighter: codeHighlighter,
+      highlighter,
       theme: {
         light: 'material-theme-lighter',
         default: 'material-theme',

docs/components/content/ComponentPreset.vue

@@ -3,9 +3,10 @@
 </template>
 
 <script setup lang="ts">
-// @ts-expect-error
 import { transformContent } from '@nuxt/content/transformers'
 import { upperFirst, camelCase } from 'scule'
+import json5 from 'json5'
+import { useShikiHighlighter } from '~/composables/useShikiHighlighter'
 import * as config from '#ui/ui.config'
 
 const props = defineProps({
@@ -16,6 +17,7 @@ const props = defineProps({
 })
 
 const route = useRoute()
+const highlighter = useShikiHighlighter()
 // eslint-disable-next-line vue/no-dupe-keys
 const slug = props.slug || route.params.slug[route.params.slug.length - 1]
 const camelName = camelCase(slug)
@@ -24,15 +26,18 @@ const name = `U${upperFirst(camelName)}`
 const preset = config[camelName]
 
 const { data: ast } = await useAsyncData(`${name}-preset`, () => transformContent('content:_markdown.md', `
-\`\`\`json
-${JSON.stringify(preset, null, 2)}
+\`\`\`yml
+${json5.stringify(preset, null, 2)}
 \`\`\`\
 `, {
-  highlight: {
-    theme: {
-      light: 'material-theme-lighter',
-      default: 'material-theme',
-      dark: 'material-theme-palenight'
+  markdown: {
+    highlight: {
+      highlighter,
+      theme: {
+        light: 'material-theme-lighter',
+        default: 'material-theme',
+        dark: 'material-theme-palenight'
+      }
     }
   }
 }))

docs/components/content/ComponentPropsField.vue

@@ -1,6 +1,6 @@
 <template>
   <Field v-bind="prop">
-    <code v-if="prop.default">{{ prop.default }}</code>
+    <code v-if="prop.default" class="leading-6">{{ prop.default }}</code>
     <p v-if="prop.description">
       {{ prop.description }}
     </p>
@@ -22,8 +22,8 @@
         <ComponentPropsField v-for="subProp in Object.values(prop.schema.schema)" :key="(subProp as any).name" :prop="subProp" />
       </FieldGroup>
     </Collapsible>
-    <div v-else-if="prop.schema?.kind === 'enum' && prop.schema.type !== 'boolean' && startsWithCapital(prop.schema.type) && !prop.schema.type.startsWith(prop.schema.schema[0])" class="space-x-1 leading-7 -my-1">
-      <code v-for="value in prop.schema.schema.filter(value => typeof value === 'string')" :key="value" class="whitespace-pre-wrap break-words">{{ value }}</code>
+    <div v-else-if="prop.schema?.kind === 'enum' && prop.schema.type !== 'boolean' && startsWithCapital(prop.schema.type) && !prop.schema.type.startsWith(prop.schema.schema[0])" class="flex items-center flex-wrap gap-1 -my-1">
+      <code v-for="value in prop.schema.schema.filter(value => typeof value === 'string')" :key="value" class="whitespace-pre-wrap break-words leading-6">{{ value }}</code>
     </div>
   </Field>
 </template>

docs/components/content/examples/AccordionExampleBasic.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [{
   label: 'Getting Started',
   icon: 'i-heroicons-information-circle',

docs/components/content/examples/AccordionExampleDefaultSlot.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [{
   label: 'Getting Started',
   icon: 'i-heroicons-information-circle',

docs/components/content/examples/AccordionExampleItemSlot.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [{
   label: 'Getting Started',
   icon: 'i-heroicons-information-circle',

docs/components/content/examples/BreadcrumbExampleBasic.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const links = [{
   label: 'Home',
   icon: 'i-heroicons-home',

docs/components/content/examples/BreadcrumbExampleDefaultSlot.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const links = [{
   label: 'Home',
   to: '/'

docs/components/content/examples/BreadcrumbExampleDividerSlot.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const links = [{
   label: 'Home',
   icon: 'i-heroicons-home',

docs/components/content/examples/BreadcrumbExampleIconSlot.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const links = [{
   label: 'Home',
   to: '/'

docs/components/content/examples/CarouselExample.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const items = [
+  'https://picsum.photos/600/800?random=1',
+  'https://picsum.photos/600/800?random=2',
+  'https://picsum.photos/600/800?random=3',
+  'https://picsum.photos/600/800?random=4',
+  'https://picsum.photos/600/800?random=5',
+  'https://picsum.photos/600/800?random=6'
+]
+</script>
+
+<template>
+  <UCarousel v-slot="{ item }" :items="items">
+    <img :src="item" width="300" height="400" draggable="false">
+  </UCarousel>
+</template>

docs/components/content/examples/CarouselExampleArrows.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const items = [
+  'https://picsum.photos/1920/1080?random=1',
+  'https://picsum.photos/1920/1080?random=2',
+  'https://picsum.photos/1920/1080?random=3',
+  'https://picsum.photos/1920/1080?random=4',
+  'https://picsum.photos/1920/1080?random=5',
+  'https://picsum.photos/1920/1080?random=6'
+]
+</script>
+
+<template>
+  <UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'basis-full' }" class="rounded-lg overflow-hidden" arrows>
+    <img :src="item" class="w-full" draggable="false">
+  </UCarousel>
+</template>

docs/components/content/examples/CarouselExampleArrowsCenter.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const items = [
+  'https://picsum.photos/600/800?random=1',
+  'https://picsum.photos/600/800?random=2',
+  'https://picsum.photos/600/800?random=3',
+  'https://picsum.photos/600/800?random=4',
+  'https://picsum.photos/600/800?random=5',
+  'https://picsum.photos/600/800?random=6'
+]
+</script>
+
+<template>
+  <UCarousel
+    v-slot="{ item }"
+    :items="items"
+    :ui="{
+      item: 'basis-full',
+      container: 'rounded-lg'
+    }"
+    :prev-button="{
+      color: 'gray',
+      icon: 'i-heroicons-arrow-left-20-solid',
+      class: '-left-12'
+    }"
+    :next-button="{
+      color: 'gray',
+      icon: 'i-heroicons-arrow-right-20-solid',
+      class: '-right-12'
+    }"
+    arrows
+    class="w-64 mx-auto"
+  >
+    <img :src="item" class="w-full" draggable="false">
+  </UCarousel>
+</template>

docs/components/content/examples/CarouselExampleAutoplay.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+const items = [
+  'https://picsum.photos/1920/1080?random=1',
+  'https://picsum.photos/1920/1080?random=2',
+  'https://picsum.photos/1920/1080?random=3',
+  'https://picsum.photos/1920/1080?random=4',
+  'https://picsum.photos/1920/1080?random=5',
+  'https://picsum.photos/1920/1080?random=6'
+]
+
+const carouselRef = ref()
+
+onMounted(() => {
+  setInterval(() => {
+    if (!carouselRef.value) return
+
+    if (carouselRef.value.page === carouselRef.value.pages) {
+      return carouselRef.value.select(0)
+    }
+
+    carouselRef.value.next()
+  }, 3000)
+})
+</script>
+
+<template>
+  <UCarousel
+    ref="carouselRef"
+    v-slot="{ item }"
+    :items="items"
+    :ui="{ item: 'basis-full' }"
+    class="rounded-lg overflow-hidden"
+    indicators
+  >
+    <img :src="item" class="w-full" draggable="false">
+  </UCarousel>
+</template>

docs/components/content/examples/CarouselExampleIndicators.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const items = [
+  'https://picsum.photos/1920/1080?random=1',
+  'https://picsum.photos/1920/1080?random=2',
+  'https://picsum.photos/1920/1080?random=3',
+  'https://picsum.photos/1920/1080?random=4',
+  'https://picsum.photos/1920/1080?random=5',
+  'https://picsum.photos/1920/1080?random=6'
+]
+</script>
+
+<template>
+  <UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'basis-full' }" class="rounded-lg overflow-hidden" indicators>
+    <img :src="item" class="w-full" draggable="false">
+  </UCarousel>
+</template>

docs/components/content/examples/CarouselExampleIndicatorsSize.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const items = [
+  'https://picsum.photos/600/600?random=1',
+  'https://picsum.photos/600/600?random=2',
+  'https://picsum.photos/600/600?random=3',
+  'https://picsum.photos/600/600?random=4',
+  'https://picsum.photos/600/600?random=5',
+  'https://picsum.photos/600/600?random=6'
+]
+</script>
+
+<template>
+  <UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'basis-full md:basis-1/2 lg:basis-1/3' }" indicators class="rounded-lg overflow-hidden">
+    <img :src="item" class="w-full" draggable="false">
+  </UCarousel>
+</template>

docs/components/content/examples/CarouselExampleSize.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const items = [
+  'https://picsum.photos/600/600?random=1',
+  'https://picsum.photos/600/600?random=2',
+  'https://picsum.photos/600/600?random=3',
+  'https://picsum.photos/600/600?random=4',
+  'https://picsum.photos/600/600?random=5',
+  'https://picsum.photos/600/600?random=6'
+]
+</script>
+
+<template>
+  <UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'basis-full md:basis-1/2 lg:basis-1/3' }">
+    <img :src="item" class="w-full" draggable="false">
+  </UCarousel>
+</template>

docs/components/content/examples/CarouselExampleSizeCenter.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const items = [
+  'https://picsum.photos/600/800?random=1',
+  'https://picsum.photos/600/800?random=2',
+  'https://picsum.photos/600/800?random=3',
+  'https://picsum.photos/600/800?random=4',
+  'https://picsum.photos/600/800?random=5',
+  'https://picsum.photos/600/800?random=6'
+]
+</script>
+
+<template>
+  <UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'basis-full' }" class="w-64 mx-auto rounded-lg overflow-hidden">
+    <img :src="item" class="w-full" draggable="false">
+  </UCarousel>
+</template>

docs/components/content/examples/CarouselExampleSizeFull.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const items = [
+  'https://picsum.photos/1920/1080?random=1',
+  'https://picsum.photos/1920/1080?random=2',
+  'https://picsum.photos/1920/1080?random=3',
+  'https://picsum.photos/1920/1080?random=4',
+  'https://picsum.photos/1920/1080?random=5',
+  'https://picsum.photos/1920/1080?random=6'
+]
+</script>
+
+<template>
+  <UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'basis-full' }" class="rounded-lg overflow-hidden">
+    <img :src="item" class="w-full" draggable="false">
+  </UCarousel>
+</template>

docs/components/content/examples/CarouselExampleSlotsDefault.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const items = [{
+  name: 'Sébastien Chopin',
+  to: 'https://github.com/Atinux',
+  avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/atinux' }
+}, {
+  name: 'Pooya Parsa',
+  to: 'https://github.com/pi0',
+  avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/pi0' }
+}, {
+  name: 'Daniel Roe',
+  to: 'https://github.com/danielroe',
+  avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/danielroe' }
+}, {
+  name: 'Anthony Fu',
+  to: 'https://github.com/antfu',
+  avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/antfu' }
+}]
+</script>
+
+<template>
+  <UCarousel v-slot="{ item, index }" :items="items" :ui="{ item: 'w-full' }">
+    <div class="text-center mx-auto">
+      <img :src="item.avatar.src" :alt="item.name" class="rounded-full w-48 h-48 mb-2" draggable="false">
+
+      <p class="font-semibold">
+        {{ index + 1 }}. {{ item.name }}
+      </p>
+    </div>
+  </UCarousel>
+</template>

docs/components/content/examples/CarouselExampleSlotsIndicator.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+const items = [
+  'https://picsum.photos/600/800?random=1',
+  'https://picsum.photos/600/800?random=2',
+  'https://picsum.photos/600/800?random=3',
+  'https://picsum.photos/600/800?random=4',
+  'https://picsum.photos/600/800?random=5',
+  'https://picsum.photos/600/800?random=6'
+]
+</script>
+
+<template>
+  <UCarousel
+    :items="items"
+    :ui="{
+      item: 'basis-full',
+      container: 'rounded-lg',
+      indicators: {
+        wrapper: 'relative bottom-0 mt-4'
+      }
+    }"
+    indicators
+    class="w-64 mx-auto"
+  >
+    <template #default="{ item }">
+      <img :src="item" class="w-full" draggable="false">
+    </template>
+
+    <template #indicator="{ onClick, page, active }">
+      <UButton :label="String(page)" :variant="active ? 'solid' : 'outline'" size="2xs" class="rounded-full min-w-6 justify-center" @click="onClick(page)" />
+    </template>
+  </UCarousel>
+</template>

docs/components/content/examples/CarouselExampleSlotsPrevNext.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const items = [
+  'https://picsum.photos/600/800?random=1',
+  'https://picsum.photos/600/800?random=2',
+  'https://picsum.photos/600/800?random=3',
+  'https://picsum.photos/600/800?random=4',
+  'https://picsum.photos/600/800?random=5',
+  'https://picsum.photos/600/800?random=6'
+]
+</script>
+
+<template>
+  <UCarousel
+    :items="items"
+    :ui="{
+      item: 'basis-full',
+      container: 'rounded-lg'
+    }"
+    arrows
+    class="w-64 mx-auto"
+  >
+    <template #default="{ item }">
+      <img :src="item" class="w-full" draggable="false">
+    </template>
+
+    <template #prev="{ onClick, disabled }">
+      <button :disabled="disabled" @click="onClick">
+        Prev
+      </button>
+    </template>
+
+    <template #next="{ onClick, disabled }">
+      <button :disabled="disabled" @click="onClick">
+        Next
+      </button>
+    </template>
+  </UCarousel>
+</template>

docs/components/content/examples/CarouselExampleSnapEnd.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const items = [
+  'https://picsum.photos/400/600?random=1',
+  'https://picsum.photos/400/600?random=2',
+  'https://picsum.photos/400/600?random=3',
+  'https://picsum.photos/400/600?random=4',
+  'https://picsum.photos/400/600?random=5',
+  'https://picsum.photos/400/600?random=6'
+]
+</script>
+
+<template>
+  <UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'snap-end' }">
+    <img :src="item" width="200" height="300" draggable="false">
+  </UCarousel>
+</template>

docs/components/content/examples/CarouselExampleSnapStart.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const items = [
+  'https://picsum.photos/400/600?random=1',
+  'https://picsum.photos/400/600?random=2',
+  'https://picsum.photos/400/600?random=3',
+  'https://picsum.photos/400/600?random=4',
+  'https://picsum.photos/400/600?random=5',
+  'https://picsum.photos/400/600?random=6'
+]
+</script>
+
+<template>
+  <UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'snap-start' }">
+    <img :src="item" width="200" height="300" draggable="false">
+  </UCarousel>
+</template>

docs/components/content/examples/CheckboxExample.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const selected = ref(true)
 </script>
 

docs/components/content/examples/ChipExampleShow.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [{
   name: 'messages',
   icon: 'i-heroicons-chat-bubble-oval-left',

docs/components/content/examples/CommandPaletteExampleAsync.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const groups = [{
   key: 'users',
   label: q => q && `Users matching “${q}”...`,
@@ -7,7 +7,7 @@ const groups = [{
       return []
     }
 
-    const users = await $fetch('https://jsonplaceholder.typicode.com/users', { params: { q } })
+    const users = await $fetch<any[]>('https://jsonplaceholder.typicode.com/users', { params: { q } })
 
     return users.map(user => ({ id: user.id, label: user.name, suffix: user.email }))
   }

docs/components/content/examples/CommandPaletteExampleBasic.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = [
   { id: 1, label: 'Wade Cooper' },
   { id: 2, label: 'Arlene Mccoy' },

docs/components/content/examples/CommandPaletteExampleFilter.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = [
   { id: 1, label: 'Wade Cooper', child: true },
   { id: 2, label: 'Arlene Mccoy' },

docs/components/content/examples/CommandPaletteExampleGroups.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const router = useRouter()
 const toast = useToast()
 

docs/components/content/examples/CommandPaletteExampleModal.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const isOpen = ref(false)
 
 const people = [

docs/components/content/examples/CommandPaletteExampleThemeAlgolia.vue

@@ -1,8 +1,11 @@
-<script setup>
+<script setup lang="ts">
+import type { NavItem, ParsedContent } from '@nuxt/content/dist/runtime/types'
+import type { Button } from '#ui/types'
+
 const commandPaletteRef = ref()
 
-const navigation = inject('navigation')
-const files = inject('files')
+const navigation = inject<Ref<NavItem[]>>('navigation')
+const files = inject<Ref<ParsedContent[]>>('files')
 
 const groups = computed(() => navigation.value.map(item => ({
   key: item._path,
@@ -63,8 +66,8 @@ const ui = {
     ref="commandPaletteRef"
     :groups="groups"
     :ui="ui"
-    :close-button="closeButton"
-    :empty-state="emptyState"
+    :close-button="(closeButton as Button)"
+    :empty-state="(emptyState as any)"
     :autoselect="false"
     command-attribute="title"
     :fuse="{

docs/components/content/examples/CommandPaletteExampleThemeRaycast.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const commandPaletteRef = ref()
 
 const suggestions = [

docs/components/content/examples/ContextMenuExample.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const { x, y } = useMouse()
 const { y: windowY } = useWindowScroll()
 

docs/components/content/examples/ContextMenuExampleArrow.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const { x, y } = useMouse()
 const { y: windowY } = useWindowScroll()
 

docs/components/content/examples/ContextMenuExampleOffset.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const { x, y } = useMouse()
 const { y: windowY } = useWindowScroll()
 

docs/components/content/examples/ContextMenuExamplePlacement.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const { x, y } = useMouse()
 const { y: windowY } = useWindowScroll()
 

docs/components/content/examples/DatePickerExample.vue

@@ -1,16 +1,15 @@
-<script setup>
-const date = ref(new Date())
+<script setup lang="ts">
+import { format } from 'date-fns'
 
-const label = computed(() => date.value.toLocaleDateString('en-us', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' })
-)
+const date = ref(new Date())
 </script>
 
 <template>
   <UPopover :popper="{ placement: 'bottom-start' }">
-    <UButton icon="i-heroicons-calendar-days-20-solid" :label="label" />
+    <UButton icon="i-heroicons-calendar-days-20-solid" :label="format(date, 'd MMM, yyy')" />
 
     <template #panel="{ close }">
-      <LazyDatePicker v-model="date" @close="close" />
+      <DatePicker v-model="date" @close="close" />
     </template>
   </UPopover>
 </template>

docs/components/content/examples/DatePickerRangeExample.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { sub, format, isSameDay, type Duration } from 'date-fns'
+
+const ranges = [
+  { label: 'Last 7 days', duration: { days: 7 } },
+  { label: 'Last 14 days', duration: { days: 14 } },
+  { label: 'Last 30 days', duration: { days: 30 } },
+  { label: 'Last 3 months', duration: { months: 3 } },
+  { label: 'Last 6 months', duration: { months: 6 } },
+  { label: 'Last year', duration: { years: 1 } }
+]
+const selected = ref({ start: sub(new Date(), { days: 14 }), end: new Date() })
+
+function isRangeSelected (duration: Duration) {
+  return isSameDay(selected.value.start, sub(new Date(), duration)) && isSameDay(selected.value.end, new Date())
+}
+
+function selectRange (duration: Duration) {
+  selected.value = { start: sub(new Date(), duration), end: new Date() }
+}
+</script>
+
+<template>
+  <UPopover :popper="{ placement: 'bottom-start' }">
+    <UButton icon="i-heroicons-calendar-days-20-solid">
+      {{ format(selected.start, 'd MMM, yyy') }} - {{ format(selected.end, 'd MMM, yyy') }}
+    </UButton>
+
+    <template #panel="{ close }">
+      <div class="flex items-center divide-x divide-gray-200 dark:divide-gray-800">
+        <div class="flex flex-col py-4">
+          <UButton
+            v-for="(range, index) in ranges"
+            :key="index"
+            :label="range.label"
+            color="gray"
+            variant="ghost"
+            class="rounded-none px-6"
+            :class="[isRangeSelected(range.duration) ? 'bg-gray-100 dark:bg-gray-800' : 'hover:bg-gray-50 dark:hover:bg-gray-800/50']"
+            @click="selectRange(range.duration)"
+          />
+        </div>
+
+        <DatePicker v-model="selected" @close="close" />
+      </div>
+    </template>
+  </UPopover>
+</template>

docs/components/content/examples/DividerExampleOrientation.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const form = reactive({ email: 'mail@example.com', password: 'password' })
 </script>
 
@@ -17,7 +17,7 @@ const form = reactive({ email: 'mail@example.com', password: 'password' })
         <UButton label="Login" color="gray" block />
       </div>
 
-      <UDivider label="OR" color="gray" orientation="vertical" />
+      <UDivider label="OR" orientation="vertical" />
 
       <div class="space-y-4 flex flex-col justify-center">
         <UButton color="black" label="Login with GitHub" icon="i-simple-icons-github" block />
@@ -37,7 +37,7 @@ const form = reactive({ email: 'mail@example.com', password: 'password' })
 
         <UButton label="Login" color="gray" block />
 
-        <UDivider label="OR" color="gray" />
+        <UDivider label="OR" />
 
         <UButton color="black" label="Login with GitHub" icon="i-simple-icons-github" block />
         <UButton color="black" label="Login with Google" icon="i-simple-icons-google" block />

docs/components/content/examples/DropdownExampleArrow.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [
   [{
     label: 'Profile',

docs/components/content/examples/DropdownExampleBasic.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [
   [{
     label: 'Profile',

docs/components/content/examples/DropdownExampleMode.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [
   [{
     label: 'Profile',

docs/components/content/examples/DropdownExampleOffset.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [
   [{
     label: 'Profile',

docs/components/content/examples/DropdownExampleOpen.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const items = [
+  [{
+    label: 'Profile',
+    avatar: {
+      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+    }
+  }]
+]
+
+const open = ref(true)
+
+defineShortcuts({
+  o: () => open.value = !open.value
+})
+</script>
+
+<template>
+  <UDropdown v-model:open="open" :items="items" :popper="{ placement: 'bottom-start' }">
+    <UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
+  </UDropdown>
+</template>

docs/components/content/examples/DropdownExamplePlacement.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [
   [{
     label: 'Profile',

docs/components/content/examples/DropdownExampleSlot.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [
   [{
     label: 'ben@example.com',

docs/components/content/examples/FormExampleElements.vue

@@ -10,6 +10,7 @@ const options = [
 
 const state = reactive({
   input: undefined,
+  inputMenu: undefined,
   textarea: undefined,
   select: undefined,
   selectMenu: undefined,
@@ -23,6 +24,9 @@ const state = reactive({
 
 const schema = z.object({
   input: z.string().min(10),
+  inputMenu: z.any().refine(option => option?.value === 'option-2', {
+    message: 'Select Option 2'
+  }),
   textarea: z.string().min(10),
   select: z.string().refine(value => value === 'option-2', {
     message: 'Select Option 2'
@@ -61,6 +65,10 @@ async function onSubmit (event: FormSubmitEvent<Schema>) {
       <UInput v-model="state.input" />
     </UFormGroup>
 
+    <UFormGroup name="inputMenu" label="Input Menu">
+      <UInputMenu v-model="state.inputMenu" :options="options" />
+    </UFormGroup>
+
     <UFormGroup name="textarea" label="Textarea">
       <UTextarea v-model="state.textarea" />
     </UFormGroup>

docs/components/content/examples/FormExampleValibot.vue

@@ -10,8 +10,8 @@ const schema = objectAsync({
 type Schema = Input<typeof schema>
 
 const state = reactive({
-  email: undefined,
-  password: undefined
+  email: '',
+  password: ''
 })
 
 async function onSubmit (event: FormSubmitEvent<Schema>) {

docs/components/content/examples/FormGroupEagerValidationExample.vue

@@ -6,7 +6,7 @@
   </UForm>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { z } from 'zod'
 
 const schema = z.object({

docs/components/content/examples/HorizontalNavigationExample.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const route = useRoute()
+
+const links = [{
+  label: 'Profile',
+  avatar: {
+    src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+  },
+  badge: 100
+}, {
+  label: 'Installation',
+  icon: 'i-heroicons-home',
+  to: '/getting-started/installation'
+}, {
+  label: 'Horizontal Navigation',
+  icon: 'i-heroicons-chart-bar',
+  to: `${route.path.startsWith('/dev') ? '/dev' : ''}/components/horizontal-navigation`
+}, {
+  label: 'Command Palette',
+  icon: 'i-heroicons-command-line',
+  to: '/components/command-palette'
+}]
+</script>
+
+<template>
+  <UHorizontalNavigation :links="links" class="border-b border-gray-200 dark:border-gray-800" />
+</template>

docs/components/content/examples/HorizontalNavigationExampleDefaultSlot.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const route = useRoute()
+
+const links = [{
+  label: 'Horizontal Navigation',
+  to: `${route.path.startsWith('/dev') ? '/dev' : ''}/components/horizontal-navigation`
+}, {
+  label: 'Command Palette',
+  to: '/components/command-palette'
+}, {
+  label: 'Table',
+  to: '/components/table'
+}]
+</script>
+
+<template>
+  <UHorizontalNavigation :links="links">
+    <template #default="{ link }">
+      <span class="group-hover:text-primary relative">{{ link.label }}</span>
+    </template>
+  </UHorizontalNavigation>
+</template>

docs/components/content/examples/HorizontalNavigationExampleSections.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const route = useRoute()
+
+const links = [
+  [{
+    label: 'Installation',
+    icon: 'i-heroicons-home',
+    to: '/getting-started/installation'
+  }, {
+    label: 'Horizontal Navigation',
+    icon: 'i-heroicons-chart-bar',
+    to: `${route.path.startsWith('/dev') ? '/dev' : ''}/components/horizontal-navigation`
+  }, {
+    label: 'Command Palette',
+    icon: 'i-heroicons-command-line',
+    to: '/components/command-palette'
+  }], [{
+    label: 'Examples',
+    icon: 'i-heroicons-light-bulb'
+  }, {
+    label: 'Help',
+    icon: 'i-heroicons-question-mark-circle'
+  }]
+]
+</script>
+
+<template>
+  <UHorizontalNavigation :links="links" class="border-b border-gray-200 dark:border-gray-800" />
+</template>

docs/components/content/examples/InputExample.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const value = ref('')
 </script>
 

docs/components/content/examples/InputMenuExampleBasic.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+
+const selected = ref(people[0])
+</script>
+
+<template>
+  <UInputMenu v-model="selected" :options="people" />
+</template>

docs/components/content/examples/InputMenuExampleEmptySlot.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const people = []
+
+const selected = ref()
+</script>
+
+<template>
+  <UInputMenu v-model="selected" :options="people">
+    <template #empty>
+      No people
+    </template>
+  </UInputMenu>
+</template>

docs/components/content/examples/InputMenuExampleObjects.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { Avatar } from '#ui/types'
+
+const people = [{
+  id: 'benjamincanac',
+  label: 'benjamincanac',
+  href: 'https://github.com/benjamincanac',
+  target: '_blank',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' }
+}, {
+  id: 'Atinux',
+  label: 'Atinux',
+  href: 'https://github.com/Atinux',
+  target: '_blank',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/904724?v=4' }
+}, {
+  id: 'smarroufin',
+  label: 'smarroufin',
+  href: 'https://github.com/smarroufin',
+  target: '_blank',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/7547335?v=4' }
+}, {
+  id: 'nobody',
+  label: 'Nobody',
+  icon: 'i-heroicons-user-circle'
+}]
+
+const selected = ref(people[0])
+</script>
+
+<template>
+  <UInputMenu v-model="selected" :options="people">
+    <template #leading>
+      <UIcon v-if="selected.icon" :name="(selected.icon as string)" class="w-4 h-4 mx-0.5" />
+      <UAvatar v-else-if="selected.avatar" v-bind="(selected.avatar as Avatar)" size="3xs" class="mx-0.5" />
+    </template>
+  </UInputMenu>
+</template>

docs/components/content/examples/InputMenuExampleObjectsValueAttribute.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const people = [{
+  id: 1,
+  name: 'Wade Cooper'
+}, {
+  id: 2,
+  name: 'Arlene Mccoy'
+}, {
+  id: 3,
+  name: 'Devon Webb'
+}, {
+  id: 4,
+  name: 'Tom Cook'
+}]
+
+const selected = ref(people[0].id)
+</script>
+
+<template>
+  <UInputMenu
+    v-model="selected"
+    :options="people"
+    value-attribute="id"
+    option-attribute="name"
+  />
+</template>

docs/components/content/examples/InputMenuExampleOptionEmptySlot.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+
+const selected = ref(people[0])
+</script>
+
+<template>
+  <UInputMenu v-model="selected" :options="people" searchable>
+    <template #option-empty="{ query }">
+      <q>{{ query }}</q> not found
+    </template>
+  </UInputMenu>
+</template>

docs/components/content/examples/InputMenuExampleOptionSlot.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const people = [
+  { name: 'Wade Cooper', online: true },
+  { name: 'Arlene Mccoy', online: false },
+  { name: 'Devon Webb', online: false },
+  { name: 'Tom Cook', online: true },
+  { name: 'Tanya Fox', online: false },
+  { name: 'Hellen Schmidt', online: true },
+  { name: 'Caroline Schultz', online: true },
+  { name: 'Mason Heaney', online: false },
+  { name: 'Claudie Smitham', online: true },
+  { name: 'Emil Schaefer', online: false }
+]
+
+const selected = ref(people[3])
+</script>
+
+<template>
+  <UInputMenu v-model="selected" :options="people" option-attribute="name">
+    <template #option="{ option: person }">
+      <span :class="[person.online ? 'bg-green-400' : 'bg-gray-200', 'inline-block h-2 w-2 flex-shrink-0 rounded-full']" aria-hidden="true" />
+      <span class="truncate">{{ person.name }}</span>
+    </template>
+  </UInputMenu>
+</template>

docs/components/content/examples/InputMenuExamplePopperArrow.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+
+const selected = ref(people[0])
+</script>
+
+<template>
+  <UInputMenu v-model="selected" :options="people" :popper="{ arrow: true }" />
+</template>

docs/components/content/examples/InputMenuExamplePopperOffset.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+
+const selected = ref(people[0])
+</script>
+
+<template>
+  <UInputMenu v-model="selected" :options="people" :popper="{ offsetDistance: 0 }" />
+</template>

docs/components/content/examples/InputMenuExamplePopperPlacement.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+
+const selected = ref(people[0])
+</script>
+
+<template>
+  <UInputMenu v-model="selected" :options="people" :popper="{ placement: 'right-start' }" />
+</template>

docs/components/content/examples/InputMenuExampleSearchAsync.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const loading = ref(false)
+const selected = ref()
+
+async function search (q: string) {
+  loading.value = true
+
+  const users = await $fetch<any[]>('https://jsonplaceholder.typicode.com/users', { params: { q } })
+
+  loading.value = false
+
+  return users
+}
+</script>
+
+<template>
+  <UInputMenu
+    v-model="selected"
+    :search="search"
+    :loading="loading"
+    placeholder="Search for a user..."
+    option-attribute="name"
+    trailing
+    by="id"
+  />
+</template>

docs/components/content/examples/InputMenuExampleSearchAttributes.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const options = [
+  { id: 1, name: 'Wade Cooper', colors: ['red', 'yellow'] },
+  { id: 2, name: 'Arlene Mccoy', colors: ['blue', 'yellow'] },
+  { id: 3, name: 'Devon Webb', colors: ['green', 'blue'] },
+  { id: 4, name: 'Tom Cook', colors: ['blue', 'red'] },
+  { id: 5, name: 'Tanya Fox', colors: ['green', 'red'] },
+  { id: 5, name: 'Hellen Schmidt', colors: ['green', 'yellow'] }
+]
+
+const selected = ref(options[1])
+</script>
+
+<template>
+  <UInputMenu
+    v-model="selected"
+    :options="options"
+    placeholder="Select a person"
+    by="id"
+    option-attribute="name"
+    :search-attributes="['name', 'colors']"
+  >
+    <template #option="{ option: person }">
+      <span v-for="color in person.colors" :key="color.id" class="h-2 w-2 rounded-full" :class="`bg-${color}-500 dark:bg-${color}-400`" />
+      <span class="truncate">{{ person.name }}</span>
+    </template>
+  </UInputMenu>
+</template>

docs/components/content/examples/InputMenuExampleSearchQuery.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+
+const selected = ref()
+const query = ref('Wade')
+</script>
+
+<template>
+  <UInputMenu
+    v-model="selected"
+    v-model:query="query"
+    :options="people"
+    placeholder="Select a person"
+  />
+</template>

docs/components/content/examples/KbdExample.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const { metaSymbol } = useShortcuts()
 </script>
 

docs/components/content/examples/MeterSlotIndicatorExample.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const used = ref(84.2)
 
 const total = 238.42

docs/components/content/examples/MeterSlotLabelExample.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const used = ref(84.2)
 
 const total = 238.42

docs/components/content/examples/ModalExampleBasic.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const isOpen = ref(false)
 </script>
 

docs/components/content/examples/ModalExampleCard.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const isOpen = ref(false)
 </script>
 

docs/components/content/examples/ModalExampleComponent.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+defineProps({
+  count: {
+    type: Number,
+    default: 0
+  }
+})
+</script>
+
+<template>
+  <UModal>
+    <UCard>
+      <p>This modal was opened programmatically !</p>
+      <p>Count: {{ count }}</p>
+    </UCard>
+  </UModal>
+</template>

docs/components/content/examples/ModalExampleComposable.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { ModalExampleComponent } from '#components'
+
+const modal = useModal()
+const count = ref(0)
+
+function openModal () {
+  count.value += 1
+  modal.open(ModalExampleComponent, {
+    count: count.value
+  })
+}
+</script>
+
+<template>
+  <UButton label="Reveal modal" @click="openModal" />
+</template>

docs/components/content/examples/ModalExampleDisableOverlay.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const isOpen = ref(false)
 </script>
 

docs/components/content/examples/ModalExampleDisableTransition.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const isOpen = ref(false)
 </script>
 

docs/components/content/examples/ModalExampleFullscreen.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const isOpen = ref(false)
 </script>
 

docs/components/content/examples/ModalExamplePreventClose.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const isOpen = ref(false)
 </script>
 

docs/components/content/examples/NotificationExampleActions.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const toast = useToast()
 
 const actions = ref([{

docs/components/content/examples/NotificationExampleBasic.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const toast = useToast()
 </script>
 

docs/components/content/examples/NotificationExampleCallback.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const toast = useToast()
 
 function onCallback () {

docs/components/content/examples/NotificationExampleClick.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const toast = useToast()
 
 function onClick () {

docs/components/content/examples/NotificationExampleHtml.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const toast = useToast()
 </script>