diff --git a/.claude/commands/barista-review.md b/.claude/commands/barista-review.md
index e9bcc4342..86eb602cf 100644
--- a/.claude/commands/barista-review.md
+++ b/.claude/commands/barista-review.md
@@ -5,7 +5,7 @@ description: Review a frappe-ui pull request and post one concise comment with f
 
 You are **barista**, the PR-review assistant for `frappe/frappe-ui` — a Vue 3 component library on the road to a v1 API freeze. Your job is to give the author a **useful, terse code review** that catches real problems and ignores noise. You are not a linter, not a style police, not a rubber stamp.
 
-**The single most important thing you do**: defend the library's public API against **linear growth**. The component count keeps rising; the prop/slot/event vocabulary must not. Every new prop, slot, or event is a thing every consumer has to learn, every doc page has to explain, and every future component has to be consistent with. Before you flag anything else, ask: *does this PR add public API surface, and could that surface have been expressed by reusing what already exists?*
+**The single most important thing you do**: defend the library's public API against **linear growth**. The component count keeps rising; the prop/slot/event vocabulary must not. Every new prop, slot, or event is a thing every consumer has to learn, every doc page has to explain, and every future component has to be consistent with. Before you flag anything else, ask: _does this PR add public API surface, and could that surface have been expressed by reusing what already exists?_
 
 Inputs from the workflow:
 
@@ -75,6 +75,7 @@ Apply this **before** correctness/a11y/tests when the PR adds or changes public
 The "done" components have already converged on these names. A new component or prop that means the same thing **must** use the same name. If the PR uses a different name for an existing concept, that's a `Concerns`-level finding — name drift compounds.
 
 **Canonical props (the v1 vocabulary):**
+
 - Sizing/style: `size`, `variant`, `theme`. Variant enums: `solid | subtle | outline | ghost`. Input size: `sm | md | lg | xl`. Toggle size: `sm | md`. Pull from `src/composables/inputTypes.ts` — do not inline-redeclare.
 - State: `disabled`, `loading`, `error`, `required`, `readonly` (form-control "non-editable" only — don't reuse for "can't type" in pickers; that's `typeable`).
 - Overlay/positioning: `open` (visibility, paired with `update:open` and `v-model:open`), `side`, `align`, `offset`, `portalTo`. Never `show`, `visible`, `isOpen`, `placement` (deprecated).
@@ -86,12 +87,14 @@ The "done" components have already converged on these names. A new component or
 - Open-after-select: `keepOpen` (default `false`). Not `autoClose`.
 
 **Canonical slots:**
+
 - `#default`, `#prefix`, `#suffix`, `#trigger`, `#empty`, `#header`, `#footer`, `#actions`.
 - Per-item (selection family): `#item`, `#item-prefix`, `#item-label`, `#item-suffix`.
 - Labeling: `#label`, `#description`.
 - Forbidden: `#icon-left` / `#icon-right` / `#leading` / `#trailing` / `#target` / `#emptyState` / `#after` / `#option`. The carve-out is **Button's `#icon`** for icon-only buttons.
 
 **Canonical events:**
+
 - `update:modelValue`, `update:open`, `update:<named-model>`, `change` (only when distinct from `update:modelValue`), `focus`, `blur`, `close`.
 - Forbidden: ad-hoc `:value` + `@valueChange` pairs (`P2`), `@toggle`, `@clickOutside`, `@keydownEnter` (`P1`).
 
@@ -115,19 +118,21 @@ Any one of these is a `Concerns`-level finding. Suggest the canonical-vocabulary
 ## When new public surface IS justified
 
 Don't push back on novelty that's genuinely domain-specific:
+
 - DatePicker's `isDateUnavailable` — predicate over a Date is date-domain.
 - Chart's `series` — data-domain.
 - Tabs' `as` polymorphism — explicit `P3` carve-out for real polymorphism needs.
 
-The test is: *could three other components plausibly want this?* If yes, push for the canonical name **now**. The bar is "could", not "do today" — `min`/`max` on DatePicker and Slider was the right call before a third caller existed, because the concept (bounding an axis) was already generic. Domain-prefixed names like `minDate` would have locked the vocabulary out of NumberInput / future Counter / future Range components.
+The test is: _could three other components plausibly want this?_ If yes, push for the canonical name **now**. The bar is "could", not "do today" — `min`/`max` on DatePicker and Slider was the right call before a third caller existed, because the concept (bounding an axis) was already generic. Domain-prefixed names like `minDate` would have locked the vocabulary out of NumberInput / future Counter / future Range components.
 
 If no caller beyond this component could ever want it (it's truly domain-bound), the new name is fine — but it should still match the **shape** rules (primitive types, named axis, no config blob, no semantic color axis).
 
-**Positive signal**: if the PR *renames* a domain-prefixed prop to the generic name (e.g. `minDate` → `min`, `iconLeft` → `#prefix`, `closable` → `dismissible`), call it out approvingly in the verdict. That's the direction the library should be moving.
+**Positive signal**: if the PR _renames_ a domain-prefixed prop to the generic name (e.g. `minDate` → `min`, `iconLeft` → `#prefix`, `closable` → `dismissible`), call it out approvingly in the verdict. That's the direction the library should be moving.
 
 ## What to cite
 
 When you flag an API issue, name:
+
 1. The principle (`P3`, `P6`, …) or the canonical-vocabulary entry above.
 2. The file:line where the drift is introduced.
 3. At least one existing component that already uses the canonical name, so the author can see the pattern. (`Combobox.vue:455` uses `#prefix`. `TextInput.vue:32` uses `#prefix`. Etc.)
@@ -173,6 +178,7 @@ If the PR has 0 of the above issues, post a 1-line "Looks good" with a sentence
 ## Re-review (EVENT=`issue_comment`)
 
 Acknowledge the maintainer's directive in one line:
+
 > Re-reviewing per @$BARISTA_COMMENT_AUTHOR — focused on <thing>.
 
 Then post a fresh verdict + bullets.
@@ -180,6 +186,7 @@ Then post a fresh verdict + bullets.
 # Examples
 
 **Good — concerns (API drift):**
+
 > **Concerns** — public surface grows where existing vocabulary covers it.
 >
 > - `src/components/Toast/types.ts:31` — new `closable` prop. Alert and Dialog already spell this `dismissible` (`Alert/types.ts:33`, `Dialog/types.ts:87`). Rename to `dismissible` to keep the v1 vocabulary tight (`P13` + canonical-vocab list).
@@ -189,6 +196,7 @@ Then post a fresh verdict + bullets.
 > Suggest: dropping the two new props removes 2 entries from the public API without losing capability.
 
 **Good — concerns (correctness):**
+
 > **Concerns** — likely breaking change.
 >
 > - `src/components/Button.vue:38` — renamed `theme` prop to `variant` without deprecation shim (`P13`). Consumers calling `<Button theme="…">` will silently fall through to default.
@@ -198,16 +206,19 @@ Then post a fresh verdict + bullets.
 > Suggest: keep `theme` as a deprecated alias with a one-time warning, restore `type="button"`, add a test for `variant`.
 
 **Good — minor nits:**
+
 > **Minor nits** — nothing blocking.
 >
 > - `src/utils/date.ts:14` — `parseDate` returns `Date | null` but callers in `DatePicker.vue:88` treat null as today. Worth a comment or default at the call site.
 > - `tests/unit/DatePicker.spec.ts` — `it.skip` left in; intentional?
 
 **Good — looks good:**
+
 > **Looks good** — tightens `DatePicker` keyboard nav with a roving tabindex. Tests in `tests/unit/DatePicker.spec.ts:120` cover the new path. No public API change.
 
 **Bad — too long / prose / style nits:**
-> Thanks for the PR! I noticed a few things… *(long prose paragraph)* … Also, you could rename this variable to be more descriptive, and maybe split this function into two. *(opinion noise)*
+
+> Thanks for the PR! I noticed a few things… _(long prose paragraph)_ … Also, you could rename this variable to be more descriptive, and maybe split this function into two. _(opinion noise)_
 
 (Filler, prose, personal style preference. Don't ship.)
 
diff --git a/.claude/commands/barista-triage.md b/.claude/commands/barista-triage.md
index 93aa470df..5a8d1e1ab 100644
--- a/.claude/commands/barista-triage.md
+++ b/.claude/commands/barista-triage.md
@@ -133,6 +133,7 @@ Nothing else is permitted.
 # Examples
 
 **Good — terse hypothesis (preferred shape):**
+
 > Likely a CJS/ESM interop bug in `src/components/FeatherIcon.vue:3`.
 >
 > - `feather-icons` v4 ships only `dist/feather.js` (CJS, no ESM default export).
@@ -141,20 +142,24 @@ Nothing else is permitted.
 > - Workaround for users: add `feather-icons` to `optimizeDeps.include` in Vite config.
 
 **Good — duplicate found (one-liner):**
+
 > Likely a duplicate of #612 (open) — same `MultiSelect` focus loss after tag removal.
 
 **Good — needs more info (only after investigation):**
+
 > Couldn't reproduce from the description. `useResource` is at `src/data/resources.ts`; nothing obvious matches.
 >
 > - Which call signature did you use?
 > - frappe-ui version + browser?
 
 **Bad — too long, prose-style, full of filler:**
+
 > Thanks for filing this! Could you share: the version, the component, a repro, and what you expected vs. what happened?
 
 (Filler greeting, no investigation, prose where bullets would work. Don't ship this.)
 
 **Anti-pattern (real case from #637):** the body said
+
 > `Uncaught SyntaxError: The requested module '/node_modules/feather-icons/dist/feather.js' does not provide an export named 'default' (at FeatherIcon.vue:3:8)`
 
 …plus an attached screenshot. Asking for "version, component, repro" here is wrong — the body already gives you a file:line and the offending dep. The right move is: `Read src/components/FeatherIcon.vue` lines 1-10, check `package.json` for the `feather-icons` version, `git log -- src/components/FeatherIcon.vue`, then comment with what you found.
diff --git a/.coderabbit.yaml b/.coderabbit.yaml
index 20127ff76..30e3019aa 100644
--- a/.coderabbit.yaml
+++ b/.coderabbit.yaml
@@ -5,20 +5,20 @@ knowledge_base:
   code_guidelines:
     enabled: true
     file_patterns:
-      - ".github/copilot-instructions.md"
-      - "v1-release/plan.md"
-      - "v1-release/04-components-audit.md"
-      - "v1-release/08-selection-and-menu-api-spec.md"
-      - "v1-release/changelog.md"
+      - '.github/copilot-instructions.md'
+      - 'v1-release/plan.md'
+      - 'v1-release/04-components-audit.md'
+      - 'v1-release/08-selection-and-menu-api-spec.md'
+      - 'v1-release/changelog.md'
   learnings:
     scope: local
   linked_repositories:
-    - repository: "frappe/gameplan"
-    - repository: "frappe/crm"
-    - repository: "frappe/lms"
-    - repository: "frappe/builder"
-    - repository: "frappe/drive"
-    - repository: "frappe/insights"
+    - repository: 'frappe/gameplan'
+    - repository: 'frappe/crm'
+    - repository: 'frappe/lms'
+    - repository: 'frappe/builder'
+    - repository: 'frappe/drive'
+    - repository: 'frappe/insights'
 
 reviews:
   profile: chill
@@ -42,25 +42,25 @@ reviews:
     drafts: false
     auto_incremental_review: false
     ignore_title_keywords:
-      - "WIP"
-      - "[skip review]"
+      - 'WIP'
+      - '[skip review]'
     ignore_usernames:
-      - "dependabot[bot]"
-      - "renovate[bot]"
-      - "github-actions[bot]"
+      - 'dependabot[bot]'
+      - 'renovate[bot]'
+      - 'github-actions[bot]'
 
   path_filters:
-    - "!/node_modules/"
-    - "!/dist/"
-    - "!/yarn.lock"
-    - "!/docs/.vitepress/cache/"
-    - "!/docs/meta/"
-    - "!/docs/content/auto-imports.d.ts"
-    - "!/docs/content/components.d.ts"
-    - "!/cypress/screenshots/"
+    - '!/node_modules/'
+    - '!/dist/'
+    - '!/yarn.lock'
+    - '!/docs/.vitepress/cache/'
+    - '!/docs/meta/'
+    - '!/docs/content/auto-imports.d.ts'
+    - '!/docs/content/components.d.ts'
+    - '!/cypress/screenshots/'
 
   path_instructions:
-    - path: "/**/*.{vue,ts,js}"
+    - path: '/**/*.{vue,ts,js}'
       instructions: |
         This repository is frappe-ui, a reusable Vue 3 component library and utility package, not an app codebase.
 
@@ -77,7 +77,7 @@ reviews:
         - do not suggest app-level patterns like state management, route architecture, or page composition
         - do not suggest backend changes unless the file is under /frappe/
 
-    - path: "/src/components/**/*.{vue,ts}"
+    - path: '/src/components/**/*.{vue,ts}'
       instructions: |
         Review as a component-library maintainer.
 
@@ -90,7 +90,7 @@ reviews:
 
         Prefer high-signal comments over speculative refactors.
 
-    - path: "/src/data-fetching/**/*.{ts,js}"
+    - path: '/src/data-fetching/**/*.{ts,js}'
       instructions: |
         Focus on reactive correctness, API contracts, caching behavior, loading and error states, and side effects.
 
@@ -102,14 +102,14 @@ reviews:
 
         Avoid suggesting generic fetch or axios patterns when existing frappe-ui composable patterns are intentional.
 
-    - path: "/src/resources/**/*.{ts,js}"
+    - path: '/src/resources/**/*.{ts,js}'
       instructions: |
         This is legacy resource-layer code kept for compatibility.
         Be conservative with suggestions.
         Prefer comments only for real bugs, compatibility risks, or unsafe side effects.
         Do not push large rewrites just to modernize style.
 
-    - path: "/frappe/**/*.{vue,ts,js}"
+    - path: '/frappe/**/*.{vue,ts,js}'
       instructions: |
         This folder contains higher-level Frappe-specific components and helpers built on top of the library.
 
@@ -120,12 +120,12 @@ reviews:
 
         Be conservative with suggestions that would force wide downstream app changes unless the PR is clearly doing that intentionally.
 
-    - path: "/docs/**"
+    - path: '/docs/**'
       instructions: |
         Only comment when docs are wrong, outdated, misleading, or missing important usage or accessibility guidance.
         Ignore wording-only, tone-only, or formatting-only suggestions.
 
-    - path: "/v1-release/**"
+    - path: '/v1-release/**'
       instructions: |
         These files are planning and release-support docs, not implementation code.
 
@@ -137,7 +137,7 @@ reviews:
 
         Ignore editorial wording tweaks unless they change meaning.
 
-    - path: "/src/components/**/stories/**"
+    - path: '/src/components/**/stories/**'
       instructions: |
         Review stories for misleading examples, missing important states, or missing accessibility-relevant coverage.
         Ignore presentation-only nits.
@@ -179,6 +179,6 @@ reviews:
   tools:
     semgrep:
       enabled: true
-      config_file: ".semgrep.yml"
+      config_file: '.semgrep.yml'
     languagetool:
       enabled: false
diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs
index e52351470..8974c9b09 100644
--- a/.git-blame-ignore-revs
+++ b/.git-blame-ignore-revs
@@ -1,4 +1,6 @@
 # Ran prettier on source
 # after adding tailwind plugin
 54563d9deba9d95c1212c1be2217ce8fa181162b
-8e07a190aff0eba2a3e072f9857a654dca6fa0e1
\ No newline at end of file
+8e07a190aff0eba2a3e072f9857a654dca6fa0e1
+# Applied oxlint --fix and oxfmt
+7a5b2ea4d0f24821dc5d44a1d3c443bd73e3fd64
\ No newline at end of file
diff --git a/.github/barista/SETUP.md b/.github/barista/SETUP.md
index c860120ad..c5244b9ea 100644
--- a/.github/barista/SETUP.md
+++ b/.github/barista/SETUP.md
@@ -8,19 +8,19 @@ It posts as **`barista[bot]`** (a custom GitHub App), and bills Claude API calls
 
 ### Issue triage (`barista-triage.yml`)
 
-| Trigger | Action |
-| --- | --- |
-| `issues.opened` | Read issue → investigate the code (grep, read files, check git history, search past issues) → apply labels → post a comment with findings or hypothesis |
-| `issue_comment.created` (only if comment contains `/barista` AND author is a maintainer) | Re-investigate based on the maintainer's directive |
-| `workflow_dispatch` (manual) | Re-triage a specific issue number for debugging |
+| Trigger                                                                                  | Action                                                                                                                                                  |
+| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `issues.opened`                                                                          | Read issue → investigate the code (grep, read files, check git history, search past issues) → apply labels → post a comment with findings or hypothesis |
+| `issue_comment.created` (only if comment contains `/barista` AND author is a maintainer) | Re-investigate based on the maintainer's directive                                                                                                      |
+| `workflow_dispatch` (manual)                                                             | Re-triage a specific issue number for debugging                                                                                                         |
 
 ### PR review (`barista-review.yml`)
 
-| Trigger | Action |
-| --- | --- |
-| `pull_request` opened / synchronize / reopened / ready_for_review | Read PR + diff → investigate affected files → post one review comment with verdict (Looks good / Minor nits / Concerns) |
-| `issue_comment.created` on a PR (only if comment contains `/barista review` AND author is a maintainer) | Re-review, optionally focused on what the maintainer asked about |
-| `workflow_dispatch` (manual) | Re-review a specific PR number for debugging |
+| Trigger                                                                                                 | Action                                                                                                                  |
+| ------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `pull_request` opened / synchronize / reopened / ready_for_review                                       | Read PR + diff → investigate affected files → post one review comment with verdict (Looks good / Minor nits / Concerns) |
+| `issue_comment.created` on a PR (only if comment contains `/barista review` AND author is a maintainer) | Re-review, optionally focused on what the maintainer asked about                                                        |
+| `workflow_dispatch` (manual)                                                                            | Re-review a specific PR number for debugging                                                                            |
 
 Fork PRs and drafts are skipped by design — the bot token is not exposed to untrusted PR head code, and drafts aren't ready for review.
 
@@ -70,16 +70,16 @@ Copy the printed token.
 
 In **<https://github.com/frappe/frappe-ui/settings/secrets/actions>**, add:
 
-| Type | Name | Value |
-| --- | --- | --- |
-| Secret | `BARISTA_APP_ID` | The numeric App ID from step 1.6 |
-| Secret | `BARISTA_PRIVATE_KEY` | **Full contents** of the `.pem` file, including the `-----BEGIN…-----` and `-----END…-----` lines |
-| Secret | `CLAUDE_CODE_OAUTH_TOKEN` | The token from `claude setup-token` |
+| Type   | Name                      | Value                                                                                             |
+| ------ | ------------------------- | ------------------------------------------------------------------------------------------------- |
+| Secret | `BARISTA_APP_ID`          | The numeric App ID from step 1.6                                                                  |
+| Secret | `BARISTA_PRIVATE_KEY`     | **Full contents** of the `.pem` file, including the `-----BEGIN…-----` and `-----END…-----` lines |
+| Secret | `CLAUDE_CODE_OAUTH_TOKEN` | The token from `claude setup-token`                                                               |
 
 In **Settings → Secrets and variables → Actions → Variables**, add:
 
-| Type | Name | Value |
-| --- | --- | --- |
+| Type     | Name              | Value  |
+| -------- | ----------------- | ------ |
 | Variable | `BARISTA_ENABLED` | `true` |
 
 The `BARISTA_ENABLED` variable is the kill switch. Set it to anything other than `true` (or delete it) to instantly disable barista without redeploying.
diff --git a/.github/workflows/barista-review.yml b/.github/workflows/barista-review.yml
index 282dbc49f..d4aa20a0b 100644
--- a/.github/workflows/barista-review.yml
+++ b/.github/workflows/barista-review.yml
@@ -113,9 +113,9 @@ jobs:
         with:
           claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
           github_token: ${{ steps.app-token.outputs.token }}
-          allowed_non_write_users: "*"
-          display_report: "true"
-          prompt: "/barista-review REPO: ${{ github.repository }} PR_NUMBER: ${{ steps.pr.outputs.number }} EVENT: ${{ github.event_name }}"
+          allowed_non_write_users: '*'
+          display_report: 'true'
+          prompt: '/barista-review REPO: ${{ github.repository }} PR_NUMBER: ${{ steps.pr.outputs.number }} EVENT: ${{ github.event_name }}'
 
       - name: Append run-stats footer to barista's comment
         if: always() && steps.run-barista.outcome == 'success'
diff --git a/.github/workflows/barista-triage.yml b/.github/workflows/barista-triage.yml
index d05ab3e2b..01d50cf95 100644
--- a/.github/workflows/barista-triage.yml
+++ b/.github/workflows/barista-triage.yml
@@ -94,11 +94,11 @@ jobs:
         with:
           claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
           github_token: ${{ steps.app-token.outputs.token }}
-          allowed_non_write_users: "*"
+          allowed_non_write_users: '*'
           # Renders a human-readable transcript in the Actions run's Step Summary
           # (formatted markdown). Avoid show_full_output which dumps raw JSON in logs.
-          display_report: "true"
-          prompt: "/barista-triage REPO: ${{ github.repository }} ISSUE_NUMBER: ${{ steps.issue.outputs.number }} EVENT: ${{ github.event_name }}"
+          display_report: 'true'
+          prompt: '/barista-triage REPO: ${{ github.repository }} ISSUE_NUMBER: ${{ steps.issue.outputs.number }} EVENT: ${{ github.event_name }}'
 
       - name: Append run-stats footer to barista's comment
         if: always() && steps.run-barista.outcome == 'success'
diff --git a/.github/workflows/claude.yml b/.github/workflows/claude.yml
index 6b15fac7a..eb9719ecc 100644
--- a/.github/workflows/claude.yml
+++ b/.github/workflows/claude.yml
@@ -47,4 +47,3 @@ jobs:
           # See https://github.com/anthropics/claude-code-action/blob/main/docs/usage.md
           # or https://code.claude.com/docs/en/cli-reference for available options
           # claude_args: '--allowed-tools Bash(gh pr *)'
-
diff --git a/.github/workflows/format.yml b/.github/workflows/format.yml
new file mode 100644
index 000000000..48123288a
--- /dev/null
+++ b/.github/workflows/format.yml
@@ -0,0 +1,22 @@
+name: Format Check
+
+on:
+  pull_request:
+  push:
+    branches: [main]
+
+jobs:
+  oxfmt:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - run: yarn install --frozen-lockfile
+
+      - name: Check formatting
+        run: yarn format:check
diff --git a/.husky/.gitignore b/.husky/.gitignore
deleted file mode 100644
index 31354ec13..000000000
--- a/.husky/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-_
diff --git a/.oxfmtrc.json b/.oxfmtrc.json
new file mode 100644
index 000000000..7911f5be3
--- /dev/null
+++ b/.oxfmtrc.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "singleQuote": true,
+  "semi": false,
+  "tabWidth": 2,
+  "useTabs": false,
+  "printWidth": 80,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "quoteProps": "consistent",
+  "objectWrap": "preserve",
+  "proseWrap": "preserve",
+  "ignorePatterns": [
+    "node_modules/**",
+    "dist/**",
+    "auto-imports.d.ts",
+    "components.d.ts",
+    ".nyc_output/**",
+    "coverage/**"
+  ]
+}
diff --git a/.oxlintrc.json b/.oxlintrc.json
new file mode 100644
index 000000000..09ee8b5a8
--- /dev/null
+++ b/.oxlintrc.json
@@ -0,0 +1,55 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["typescript", "unicorn", "oxc"],
+  "categories": {
+    "correctness": "error",
+    "suspicious": "warn",
+    "perf": "warn"
+  },
+  "env": {
+    "builtin": true
+  },
+  "rules": {
+    "no-empty": ["warn", { "allowEmptyCatch": true }],
+    "unicorn/no-array-for-each": "off",
+    "unicorn/no-null": "off",
+    "typescript/no-explicit-any": "warn",
+    "typescript/consistent-type-imports": ["warn", { "prefer": "type-imports" }]
+  },
+  // Relax rules that are overly strict in test code:
+  //  - no-shadow: callback params like (q) => and (doc) => shadow outer imports — unavoidable
+  //  - no-explicit-any: catch (e: any) and controller hook stubs legitimately need any
+  //  - consistent-function-scoping: helper closures inside describe blocks are fine
+  "overrides": [
+    {
+      "files": [
+        "**/*.cy.ts",
+        "**/*.cy.js",
+        "**/*.test.ts",
+        "**/*.spec.ts",
+        "cypress/**",
+        "tests/**/*.ts"
+      ],
+      "rules": {
+        "no-shadow": "off",
+        "typescript/no-explicit-any": "off",
+        "unicorn/consistent-function-scoping": "off"
+      }
+    },
+    {
+      "files": ["frappe/**"],
+      "rules": {
+        "typescript/no-explicit-any": "off",
+        "no-unused-vars": "off"
+      }
+    }
+  ],
+  "ignorePatterns": [
+    "node_modules",
+    "dist",
+    "auto-imports.d.ts",
+    "components.d.ts",
+    ".nyc_output",
+    "coverage"
+  ]
+}
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
deleted file mode 100644
index d8776e235..000000000
--- a/.pre-commit-config.yaml
+++ /dev/null
@@ -1,27 +0,0 @@
-exclude: 'node_modules|.git'
-default_stages: [commit]
-fail_fast: false
-
-
-repos:
-  - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v4.0.0-alpha.8
-    hooks:
-      - id: prettier
-        types_or:
-          - javascript
-          - vue
-        additional_dependencies:
-          - prettier
-          - prettier-plugin-tailwindcss
-        exclude: |
-            (?x)^(
-                .*node_modules.*|
-                .*boilerplate.*|
-                .*src.*.js|
-            )$
-
-ci:
-    autoupdate_schedule: weekly
-    skip: []
-    submodules: false
diff --git a/.prettierrc.json b/.prettierrc.json
deleted file mode 100644
index 50f7605fd..000000000
--- a/.prettierrc.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-    "semi": false,
-    "singleQuote": true,
-    "tabWidth": 2,
-    "proseWrap": "always"
-}
\ No newline at end of file
diff --git a/.semgrep.yml b/.semgrep.yml
index fa079408b..959ae4e7a 100644
--- a/.semgrep.yml
+++ b/.semgrep.yml
@@ -9,7 +9,7 @@ rules:
     languages: [ts, js]
     paths:
       exclude:
-        - "src/resources/**"
+        - 'src/resources/**'
     pattern-regex: 'from\s+[''"][^''"]*\/resources[\/''"]'
 
   - id: no-console-log-in-source
@@ -21,17 +21,17 @@ rules:
     languages: [ts, js]
     paths:
       include:
-        - "src/**/*.ts"
-        - "src/**/*.js"
-        - "frappe/**/*.ts"
-        - "frappe/**/*.js"
+        - 'src/**/*.ts'
+        - 'src/**/*.js'
+        - 'frappe/**/*.ts'
+        - 'frappe/**/*.js'
       exclude:
-        - "**/*.cy.ts"
-        - "**/*.story.ts"
-        - "**/*.spec.ts"
-        - "**/*.test.ts"
-        - "src/stories/**"
-        - "src/mocks/**"
+        - '**/*.cy.ts'
+        - '**/*.story.ts'
+        - '**/*.spec.ts'
+        - '**/*.test.ts'
+        - 'src/stories/**'
+        - 'src/mocks/**'
     pattern: console.log(...)
 
   - id: prefer-lucide-over-feather-icon
@@ -44,14 +44,14 @@ rules:
     languages: [generic]
     paths:
       include:
-        - "src/**/*.vue"
-        - "src/**/*.ts"
-        - "src/**/*.js"
-        - "frappe/**/*.vue"
-        - "frappe/**/*.ts"
-        - "frappe/**/*.js"
+        - 'src/**/*.vue'
+        - 'src/**/*.ts'
+        - 'src/**/*.js'
+        - 'frappe/**/*.vue'
+        - 'frappe/**/*.ts'
+        - 'frappe/**/*.js'
       exclude:
-        - "src/components/FeatherIcon.vue"
-        - "src/utils/iconString.ts"
-        - "src/index.ts"
+        - 'src/components/FeatherIcon.vue'
+        - 'src/utils/iconString.ts'
+        - 'src/index.ts'
     pattern-regex: 'FeatherIcon'
diff --git a/404.html b/404.html
index 2f9e807bc..0e4c58f3a 100644
--- a/404.html
+++ b/404.html
@@ -1,14 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="refresh" content="0; url=./index.html">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="refresh" content="0; url=./index.html" />
     <script>
-        // JavaScript redirect as a fallback
-        const path = window.location.pathname;
-        window.location.href = `/?route=${path}`;
+      // JavaScript redirect as a fallback
+      const path = window.location.pathname
+      window.location.href = `/?route=${path}`
     </script>
-</head>
-<body>
-</body>
-</html>
\ No newline at end of file
+  </head>
+  <body></body>
+</html>
diff --git a/CONTEXT.md b/CONTEXT.md
index c6eaf59d1..586ca0033 100644
--- a/CONTEXT.md
+++ b/CONTEXT.md
@@ -15,7 +15,7 @@ The visibility state of an overlay component (Dialog, Popover, Dropdown, Tooltip
 _Avoid_: visible, show, isOpen (as a public API; internal refs are fine)
 
 **modelValue**:
-Reserved for the **primary value** a component represents (selected option, text content, etc.). For overlay components, `modelValue` is *not* the visibility — visibility is `open`.
+Reserved for the **primary value** a component represents (selected option, text content, etc.). For overlay components, `modelValue` is _not_ the visibility — visibility is `open`.
 _Avoid_: using `v-model` (bare) for visibility on overlay components
 
 **dismissible**:
@@ -33,6 +33,7 @@ The auto-rendered visual scaffolding around a Dialog's content — padded card b
 
 **Dialog**:
 The single modal overlay component. Traps focus, blocks interaction with the page, and is always portalled. ARIA semantics are derived from props:
+
 - `role="dialog"` always (we do not differentiate `alertdialog`; the role distinction is rarely surfaced by screen readers in practice and the simplification avoids fragile heuristics)
 - `aria-labelledby` ← `title` (or the custom `#body-title` slot's container, when used)
 - `aria-describedby` ← `message`
@@ -46,28 +47,31 @@ Mounting is handled by `<FrappeUIProvider>`, which renders a hidden `<Dialogs />
 
 - `dialog.confirm({...})` → `Promise<{ ok: boolean, close: () => void }>`
 - `dialog.alert({...})` → `Promise<{ close: () => void }>`
-- `dialog.prompt({...})` → `Promise<{ values: Record<string, any> | null, close: () => void }>` *(values is null on cancel)*
+- `dialog.prompt({...})` → `Promise<{ values: Record<string, any> | null, close: () => void }>` _(values is null on cancel)_
 
 **Lifecycle contract**: imperative helpers do **not** auto-close on confirm. The promise resolves the moment the user picks an action; the caller calls `close()` when ready (typically after async work). The confirm/submit button auto-shows a loading state from click until `close()` is called. On cancel, the dialog auto-closes and the promise resolves with `ok: false` / `values: null`.
 
 **PromptField** (the schema for `dialog.prompt`'s `fields` array):
+
 ```ts
 type PromptField = {
-  name: string                                              // result key
+  name: string // result key
   label?: string
-  type?: 'text' | 'textarea' | 'select' | 'checkbox'        // default 'text'
+  type?: 'text' | 'textarea' | 'select' | 'checkbox' // default 'text'
   defaultValue?: string | boolean
   placeholder?: string
-  required?: boolean                                        // only validation supported in v1
-  options?: Array<{ label: string; value: string }>         // for 'select'
-  description?: string                                      // helper text under label
+  required?: boolean // only validation supported in v1
+  options?: Array<{ label: string; value: string }> // for 'select'
+  description?: string // helper text under label
 }
 ```
+
 Custom `validate` callbacks are intentionally not in v1 — callers needing custom validation should compose a real form inside `<Dialog>`. `dialog.prompt` resolves to `null` on cancel/dismiss.
 
 **theme** (Dialog & imperative API): The color tone of the icon and the primary action button. Values match `Alert.theme`: `'yellow' | 'blue' | 'red' | 'green'`. The imperative helpers also use `theme` to pick a sensible default icon (overridable via `icon`).
 
 Cross-library vocabulary (the only two axes used to color components):
+
 - **variant** = visual style (`solid | outline | subtle | ghost`) — Button, Badge, Alert
 - **theme** = color tone (color names) — Button, Badge, Alert, Dialog
 
diff --git a/PHILOSOPHY.md b/PHILOSOPHY.md
index 945a77f6b..8f3cc58d4 100644
--- a/PHILOSOPHY.md
+++ b/PHILOSOPHY.md
@@ -5,14 +5,16 @@ This is the rulebook that governs API design across `frappe-ui`. Every principle
 **Audience:** contributors, AI agents doing PRs, reviewers. Not end users.
 
 **How to use it:**
+
 - Cite by ID in PRs and issues (`"this violates P3"`, `"P11 carve-out applies"`).
 - When you draft a new component or refactor an old one, walk this doc top-to-bottom.
 - When a principle stops being generative — when it forces a clearly wrong answer in a real case — propose an edit, don't carve a quiet exception.
 
 **Relationship to other docs:**
-- **`CONTEXT.md`** is the *vocabulary*: what `open`, `variant`, `theme`, `dismissible` mean. PHILOSOPHY is the *rules* that use the vocabulary.
-- **`v1-release/adr/`** are *decisions* — specific applications of principles to specific design questions. ADRs cite principles; principles don't cite ADRs.
-- **`v1-release/*-spec.md`** are *component-family specs* that implement principles for a family (Dialog, inputs, selection).
+
+- **`CONTEXT.md`** is the _vocabulary_: what `open`, `variant`, `theme`, `dismissible` mean. PHILOSOPHY is the _rules_ that use the vocabulary.
+- **`v1-release/adr/`** are _decisions_ — specific applications of principles to specific design questions. ADRs cite principles; principles don't cite ADRs.
+- **`v1-release/*-spec.md`** are _component-family specs_ that implement principles for a family (Dialog, inputs, selection).
 
 ---
 
@@ -22,7 +24,7 @@ This is the rulebook that governs API design across `frappe-ui`. Every principle
 
 **Rule:** Event and slot names describe what happened to the component's state, not the physical input that produced it. Prefer `change`, `open`, `select`, `submit`, `dismiss` over `toggle`, `clickOutside`, `keydownEnter`.
 
-Exception: when the DOM event *is* the behavior (e.g. `click` on a `Button`), don't rename it. The principle applies when the component layers its own state or intent above the raw event.
+Exception: when the DOM event _is_ the behavior (e.g. `click` on a `Button`), don't rename it. The principle applies when the component layers its own state or intent above the raw event.
 
 **Why:** Behavior names stay correct when the underlying interaction changes — a `Switch` flipped by click, drag, or keyboard all emits the same `change`. Interaction names tie callers to one input channel and break when the interaction model evolves.
 
@@ -44,7 +46,7 @@ Exception: when the DOM event *is* the behavior (e.g. `click` on a `Button`), do
 
 ### P2. Prefer v-model for two-way state
 
-**Rule:** Any reactive state a component lets the caller both set and observe is exposed via `v-model`. Use Vue's named `v-model:<name>` for every piece of two-way state *except* the component's *primary value* (text content, selected option), which binds to unnamed `v-model` (= `modelValue`). Never invent ad-hoc `:value` + `@valueChange` pairs.
+**Rule:** Any reactive state a component lets the caller both set and observe is exposed via `v-model`. Use Vue's named `v-model:<name>` for every piece of two-way state _except_ the component's _primary value_ (text content, selected option), which binds to unnamed `v-model` (= `modelValue`). Never invent ad-hoc `:value` + `@valueChange` pairs.
 
 A component without a primary value (e.g. `Dialog` has visibility but no selected value) leaves `modelValue` unused and exposes every axis as a named v-model.
 
@@ -55,8 +57,12 @@ A component without a primary value (e.g. `Dialog` has visibility but no selecte
 ```vue
 <!-- Bad -->
 <Input :value="x" @input="x = $event" />
-<Combobox :selected="x" @selectedChange="x = $event"
-          :query="q" @queryChange="q = $event" />
+<Combobox
+  :selected="x"
+  @selectedChange="x = $event"
+  :query="q"
+  @queryChange="q = $event"
+/>
 
 <!-- Good -->
 <Input v-model="x" />
@@ -69,7 +75,7 @@ A component without a primary value (e.g. `Dialog` has visibility but no selecte
 
 ### P3. Prefer primitive prop types
 
-**Rule:** Component props are primitives (string, number, boolean) by default. Structured props (objects, arrays-of-objects) are allowed only when the prop represents irreducibly structured *data* the component renders — `options` for a Select, `actions` for a Dialog, `series` for a Chart. Config-blob props that bundle unrelated fields (title + size + icon + actions in one object) are forbidden.
+**Rule:** Component props are primitives (string, number, boolean) by default. Structured props (objects, arrays-of-objects) are allowed only when the prop represents irreducibly structured _data_ the component renders — `options` for a Select, `actions` for a Dialog, `series` for a Chart. Config-blob props that bundle unrelated fields (title + size + icon + actions in one object) are forbidden.
 
 **Multi-state props.** When a prop has more than two states, use a string enum named after the axis it varies (`density="compact" | "default"`, `panes="single" | "dual"`). Avoid a generic `mode` prop — name the axis instead.
 
@@ -79,15 +85,22 @@ A component without a primary value (e.g. `Dialog` has visibility but no selecte
 
 ```vue
 <!-- Bad -->
-<Dialog :options="{ title, size, icon, actions }" />     <!-- config blob -->
-<Picker mode="dualpane" />                               <!-- generic mode, no axis -->
-<Select multi searchable />                              <!-- boolean mode-switches → split -->
+<Dialog :options="{ title, size, icon, actions }" />
+<!-- config blob -->
+<Picker mode="dualpane" />
+<!-- generic mode, no axis -->
+<Select multi searchable />
+<!-- boolean mode-switches → split -->
 
 <!-- Good -->
-<Dialog v-model:open :title :size :actions />            <!-- flat primitives -->
-<DateRangePicker dualPane />                             <!-- 2 states, boolean -->
-<DateRangePicker panes="single" />                       <!-- 3+ states, axis-named enum -->
-<MultiSelect />                                          <!-- split, not flagged -->
+<Dialog v-model:open :title :size :actions />
+<!-- flat primitives -->
+<DateRangePicker dualPane />
+<!-- 2 states, boolean -->
+<DateRangePicker panes="single" />
+<!-- 3+ states, axis-named enum -->
+<MultiSelect />
+<!-- split, not flagged -->
 <Combobox />
 ```
 
@@ -96,6 +109,7 @@ A component without a primary value (e.g. `Dialog` has visibility but no selecte
 ### P4. Two color axes only: variant + theme — no semantic axis
 
 **Rule:** Components that vary along color/style use exactly two axes:
+
 - **`variant`** — visual style (`solid | outline | subtle | ghost`)
 - **`theme`** — color tone (concrete color names)
 
@@ -103,7 +117,7 @@ No third axis (`intent`, `severity`, `appearance`, `kind`, `status`). "Warning"
 
 **State-driven appearance** (error, disabled, loading) is governed by state props (`error`, `disabled`, `loading`), not by `theme`. A `TextInput` turning red on error is not `theme="red"`.
 
-**Components without a tone axis.** Components with one canonical look (Switch, TextInput, Checkbox) don't need a `theme` prop. P4 forbids inventing a *third* axis, not requiring a second.
+**Components without a tone axis.** Components with one canonical look (Switch, TextInput, Checkbox) don't need a `theme` prop. P4 forbids inventing a _third_ axis, not requiring a second.
 
 **Why:** A semantic axis adds indirection (which `intent` maps to which color?), drifts across components (`intent` vs `appearance` vs `kind`), and breaks down under brand customization. Two axes — visual + tone — is what every mature component library converges to.
 
@@ -131,9 +145,12 @@ Icon-only buttons, action toggles, and other controls that don't carry a value a
 
 ```vue
 <!-- Bad -->
-<Select :title="..." />                  <!-- non-canonical prop name -->
-<Checkbox>{{ label }}</Checkbox>         <!-- label as default slot -->
-<DatePicker placeholder="Date" />        <!-- placeholder abused as label -->
+<Select :title="..." />
+<!-- non-canonical prop name -->
+<Checkbox>{{ label }}</Checkbox>
+<!-- label as default slot -->
+<DatePicker placeholder="Date" />
+<!-- placeholder abused as label -->
 
 <!-- Good -->
 <Select :label :description :error required />
@@ -150,6 +167,7 @@ Icon-only buttons, action toggles, and other controls that don't carry a value a
 **Rule:** Slot names come from a shared vocabulary, not invented per component. Scope by the unit they belong to when slots repeat.
 
 **Canonical generic slots (top level):**
+
 - `#default` — main content
 - `#prefix` / `#suffix` — leading/trailing visual elements (icon, avatar, badge, indicator)
 - `#trigger` — the element that opens an overlay
@@ -158,6 +176,7 @@ Icon-only buttons, action toggles, and other controls that don't carry a value a
 - `#label` / `#description` — overrides for the labeling contract (P5)
 
 **Scoped slots (inside repeated units)** prefix with the unit name:
+
 - `#item-prefix` / `#item-suffix` / `#item-label` — per-item in a list / dropdown / select
 - `#tab-label` — per-tab in Tabs
 - `#column-header` — per-column in a Table
@@ -187,6 +206,7 @@ Icon-only buttons, action toggles, and other controls that don't carry a value a
 **Rule:** Slots that render dynamic content receive the component's relevant state as slot props. Callers should never have to re-derive state the slot already knows.
 
 **Standard slot-prop shapes:**
+
 - Per-item slots: `{ item, index, active, disabled, selected }`
 - Trigger slots: `{ open, disabled, value }`
 - Input slots (e.g. Combobox `#empty`): `{ query }`
@@ -194,7 +214,7 @@ Icon-only buttons, action toggles, and other controls that don't carry a value a
 
 **Why:** Forcing callers to re-derive state (looking up "is this item selected" by comparing IDs against the outer v-model) breaks encapsulation, duplicates matching logic, and silently drifts when internal selection rules change (e.g. multi-select, "select all" semantics).
 
-Static-content slots (`#footer`, `#empty` with no dynamic context, `#prefix` on a non-list component) don't need slot props. P7 governs slots that render *per-item or per-state*.
+Static-content slots (`#footer`, `#empty` with no dynamic context, `#prefix` on a non-list component) don't need slot props. P7 governs slots that render _per-item or per-state_.
 
 ```vue
 <!-- Bad -->
@@ -219,31 +239,37 @@ Static-content slots (`#footer`, `#empty` with no dynamic context, `#prefix` on
 
 ### P8. Split components instead of overloading them
 
-**Rule:** When a component grows a prop that *changes its fundamental contract* — what kind of value it emits, whether it's single- or multi-valued, what UI affordances it shows, what shape its `options` take — split into a separate component instead of adding the prop.
+**Rule:** When a component grows a prop that _changes its fundamental contract_ — what kind of value it emits, whether it's single- or multi-valued, what UI affordances it shows, what shape its `options` take — split into a separate component instead of adding the prop.
 
 **Split when:**
+
 - The value type changes (`string` vs `string[]`)
 - A visible UI region appears/disappears (tag-input area, search field, multi-pane layout that's a different mental model)
 - The docs grow `if X, then …` branches everywhere
 
 **Keep one component when:**
+
 - The variant is purely visual/layout (`dualPane`, `density="compact"`, `size="sm"`)
 - The prop is additive without changing emitted shape
 - The behavior under the prop is a strict subset of the base behavior
 
 **Why:** A configurable behemoth has multiplicative bug surface (`multi × searchable × creatable × clearable = 16 combinations`), forces every caller to read prop docs to know what the value type is, and freezes the API around the union of every use case. Split components have stable contracts each.
 
-**Shared internals are highly encouraged** — a `useSelection()` composable, a base `<Listbox>` primitive. P8 governs the *public surface*, not internal duplication. Splitting public components ≠ duplicating code.
+**Shared internals are highly encouraged** — a `useSelection()` composable, a base `<Listbox>` primitive. P8 governs the _public surface_, not internal duplication. Splitting public components ≠ duplicating code.
 
 ```vue
 <!-- Bad -->
 <Autocomplete :fetch-options="fetchUsers" multi searchable creatable />
 
 <!-- Good -->
-<Select />          <!-- single, fixed options -->
-<MultiSelect />     <!-- multi, fixed options -->
-<Combobox />        <!-- single, searchable -->
-<Autocomplete />    <!-- async-fetched, optionally creatable -->
+<Select />
+<!-- single, fixed options -->
+<MultiSelect />
+<!-- multi, fixed options -->
+<Combobox />
+<!-- single, searchable -->
+<Autocomplete />
+<!-- async-fetched, optionally creatable -->
 ```
 
 ---
@@ -253,6 +279,7 @@ Static-content slots (`#footer`, `#empty` with no dynamic context, `#prefix` on
 **Rule:** Imperative helpers (`dialog.*`, `toast.*`, …) are shaped to minimize the code the caller writes for the common case. The shape — callback, Promise, or sync handle — is chosen per helper based on what makes the typical call site shortest while still letting advanced cases escape hatch.
 
 **Non-negotiables:**
+
 - **A namespace** — `dialog.confirm`, `toast.success`. Never flat `confirmDialog()`.
 - **Provider-mounted** — helpers inherit `provide/inject` from the host app via `<FrappeUIProvider>`.
 - **A synchronous handle** — `{ close }` returned at call time for programmatic dismissal (timeouts, route changes).
@@ -283,25 +310,27 @@ setTimeout(close, 5000)
 
 ## Styling
 
-### P10. Customize via slots and data-* attributes, never class-name props
+### P10. Customize via slots and data-\* attributes, never class-name props
 
 **Rule:** Components expose customization through two channels:
 
-1. **Slots** — for *content* injection (governed by P6/P7).
-2. **`data-*` attributes** — for *styling* hooks. Components set stable `data-slot="…"`, `data-state="…"`, `data-disabled`, `data-variant`, `data-size` on rendered DOM so callers and brand themes target them via CSS.
+1. **Slots** — for _content_ injection (governed by P6/P7).
+2. **`data-*` attributes** — for _styling_ hooks. Components set stable `data-slot="…"`, `data-state="…"`, `data-disabled`, `data-variant`, `data-size` on rendered DOM so callers and brand themes target them via CSS.
 
 **Forbidden:**
+
 - Class-name injection props (`triggerClass`, `contentClass`, `itemClass`)
 - Style-injection props (`triggerStyle`)
 - Pass-through prop blobs (`:popoverProps="{ class }"`)
 
-Root `class` fallthrough — `<MyDropdown class="my-4">` landing on the root via Vue's default attribute inheritance — is fine. P10 forbids *named class props for inner elements*, not the implicit single binding.
+Root `class` fallthrough — `<MyDropdown class="my-4">` landing on the root via Vue's default attribute inheritance — is fine. P10 forbids _named class props for inner elements_, not the implicit single binding.
 
 The exact data-slot / data-state taxonomy is per component family; each family's spec defines its own values.
 
 **Why:**
-- Class-injection props leak the internal DOM tree into the public API. Every restructure breaks every caller. `data-slot` keeps the *contract* stable.
-- N class props become N² as components grow (`triggerHoverClass`, `triggerDisabledClass`, …). data-* + CSS scales without growing the prop surface.
+
+- Class-injection props leak the internal DOM tree into the public API. Every restructure breaks every caller. `data-slot` keeps the _contract_ stable.
+- N class props become N² as components grow (`triggerHoverClass`, `triggerDisabledClass`, …). data-\* + CSS scales without growing the prop surface.
 - Callers get full state-aware styling via CSS without the component cooperating on each new state.
 
 ```vue
@@ -320,10 +349,15 @@ The exact data-slot / data-state taxonomy is per component family; each family's
   <div data-slot="item" data-state="active" data-disabled>…</div>
 </div>
 ```
+
 ```css
 /* Good — caller CSS */
-[data-slot="trigger"][data-state="open"] { box-shadow: … }
-[data-slot="item"][data-disabled]        { opacity: .5 }
+[data-slot='trigger'][data-state='open'] {
+  box-shadow: …;
+}
+[data-slot='item'][data-disabled] {
+  opacity: 0.5;
+}
 ```
 
 ---
@@ -340,6 +374,7 @@ The exact data-slot / data-state taxonomy is per component family; each family's
 **The Button exception:** Button has a singular `#icon` slot (and `icon` prop with no left/right pair) because square icon-only buttons are a standard, common component.
 
 **Forbidden:**
+
 - Structured icon-config objects (`icon: { name, theme, … }`). Identity is one value; theme/size are component-level concerns, not fields packed inside the icon prop.
 - Bare un-namespaced names (`icon="edit"`) — collides the moment a second icon set ships.
 - Multiple competing channels on one component (`iconName` prop + `iconComponent` prop + `#icon` slot).
@@ -348,14 +383,19 @@ The exact data-slot / data-state taxonomy is per component family; each family's
 
 ```vue
 <!-- Bad -->
-<Dialog :icon="{ name: 'lucide-alert', theme: 'red' }" />   <!-- icon-config blob -->
-<Button icon="edit" />                                       <!-- un-namespaced -->
-<Combobox iconName="…" iconComponent="…" />                  <!-- competing channels -->
+<Dialog :icon="{ name: 'lucide-alert', theme: 'red' }" />
+<!-- icon-config blob -->
+<Button icon="edit" />
+<!-- un-namespaced -->
+<Combobox iconName="…" iconComponent="…" />
+<!-- competing channels -->
 
 <!-- Good -->
-<Dialog icon="lucide-alert" theme="red" />                   <!-- string + theme on component -->
+<Dialog icon="lucide-alert" theme="red" />
+<!-- string + theme on component -->
 <Button icon="lucide-edit" />
-<Button :icon="MyCustomLogo" />                              <!-- Component escape hatch -->
+<Button :icon="MyCustomLogo" />
+<!-- Component escape hatch -->
 <Combobox>
   <template #prefix><LucideStar class="size-4" /></template> <!-- generic slot -->
 </Combobox>
@@ -367,9 +407,10 @@ The exact data-slot / data-state taxonomy is per component family; each family's
 
 ### P12. Accessibility is non-negotiable
 
-**Rule:** Every component ships with keyboard navigation, focus management, and ARIA semantics correct *at first release*. A11y is not a follow-up. A component that can't be operated by keyboard, doesn't trap focus when modal, or lacks the ARIA contract for its role is not done.
+**Rule:** Every component ships with keyboard navigation, focus management, and ARIA semantics correct _at first release_. A11y is not a follow-up. A component that can't be operated by keyboard, doesn't trap focus when modal, or lacks the ARIA contract for its role is not done.
 
 **The baseline every interactive component meets:**
+
 - **Keyboard-operable.** Every action available by pointer is available by keyboard. Semantics follow the WAI-ARIA Authoring Practices pattern for the role (Dialog → focus trap + Esc; Combobox → arrows + Enter + Esc; Tabs → arrows; Switch → Space).
 - **Visible focus on keyboard focus.** A focus ring (or equivalent indicator) appears when focus arrives via keyboard, not on mouse click. Style with `:focus-visible`, not `:focus`. Visible in light and dark mode.
 - **ARIA semantics by props, not by markup.** Roles (`role="dialog"`, `role="combobox"`), state (`aria-expanded`, `aria-selected`, `aria-invalid`), and naming (`aria-labelledby`, `aria-describedby`, `aria-errormessage`) are wired by the component from its props.
@@ -380,21 +421,27 @@ The exact data-slot / data-state taxonomy is per component family; each family's
 **Why:** A11y as a follow-up never happens — components ship, apps depend on them, retrofitting becomes coordinated migration work. The library's job is to make accessibility the default. WAI-ARIA patterns are stable specifications; we implement them once so consumers don't have to.
 
 **Edge cases:**
+
 1. **A11y vs visual design.** When a designer wants something a11y forbids (removing the focus ring), the component still ships the baseline. Visual customization happens via data-state hooks (P10), not by stripping the contract.
 2. **Wrapped libs.** Components wrapping `reka-ui` inherit a strong baseline — we audit and document deviations, not start from scratch.
 3. **Genuine compromises.** Some patterns lack a perfect a11y answer (e.g. virtualized listboxes). Document the deviation in the component spec, pick the least bad option, don't pretend the trade-off doesn't exist.
 
 ```vue
 <!-- Bad -->
-<Dialog open>                                  <!-- no focus trap, Esc doesn't close -->
+<Dialog
+  open
+>                                  <!-- no focus trap, Esc doesn't close -->
   <button @click="confirm">                    <!-- icon-only, no aria-label -->
     <LucideX />
   </button>
 </Dialog>
-<TextInput :error="msg" />                     <!-- error not linked via aria-errormessage -->
+<TextInput :error="msg" />
+<!-- error not linked via aria-errormessage -->
 
 <!-- Good -->
-<Dialog v-model:open>                          <!-- focus trapped, Esc closes, role+aria-* wired -->
+<Dialog
+  v-model:open
+>                          <!-- focus trapped, Esc closes, role+aria-* wired -->
   <Button icon="lucide-x" aria-label="Close" />
 </Dialog>
 <TextInput v-model="x" label="Email" :error="msg" />
@@ -411,6 +458,7 @@ The exact data-slot / data-state taxonomy is per component family; each family's
 **Rule:** Changes to public-API surface keep the old surface working alongside the new one. Removal happens on the next major release, never in a minor/patch.
 
 **Mechanics:**
+
 1. Old API stays functional, same behavior, no breakage.
 2. One-time `warnDeprecated(component, oldName, newName)` per `(component, prop)` per page-load — not on every render.
 3. Renaming changes ship as a flat old → new mapping that codemods can read.
@@ -422,12 +470,13 @@ The exact data-slot / data-state taxonomy is per component family; each family's
 **v1 is the freeze line.** Pre-v1, the library evolves freely. At v1 release, P13 turns on. v1 itself is the last opportunity to make breaking shape changes — and that opportunity is used **only** for surfaces that are genuinely wrong (semantically broken, dangerous defaults, strongly negative patterns).
 
 Accepted v1 carve-outs:
+
 - `DateRangePicker.modelValue`: concat-string → `string[]` (value is structurally an array; old shape forces callers to parse a delimiter).
 - `DialogIcon` structured object → `string | Component` (per P11).
 
 When in doubt, deprecate. The carve-out is for things you'd otherwise spend the next decade explaining as "the historical quirk."
 
-**Bug-fix renames.** If a prop's *behavior* was wrong (semantic bug), fixing it is a breaking change in disguise. Treat as a deprecation: ship the corrected behavior under a new name, deprecate the old.
+**Bug-fix renames.** If a prop's _behavior_ was wrong (semantic bug), fixing it is a breaking change in disguise. Treat as a deprecation: ship the corrected behavior under a new name, deprecate the old.
 
 **Security/correctness fixes** that can't be done compatibly are not deprecations — they ship as outright fixes with a changelog + advisory. P13 covers normal evolution.
 
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index 698b01a42..95857aea4 100644
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -34,4 +34,4 @@
 //       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
 //     }
 //   }
-// }
\ No newline at end of file
+// }
diff --git a/cypress/support/component-index.html b/cypress/support/component-index.html
index ac6e79fd8..faf3b5f43 100644
--- a/cypress/support/component-index.html
+++ b/cypress/support/component-index.html
@@ -1,12 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <title>Components App</title>
   </head>
   <body>
     <div data-cy-root></div>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/docs/.vitepress/meta.ts b/docs/.vitepress/meta.ts
index 5c7f54b9b..39dc3895e 100644
--- a/docs/.vitepress/meta.ts
+++ b/docs/.vitepress/meta.ts
@@ -1,5 +1,5 @@
 export const meta = {
-	name: 'Frappe UI',
-	github: 'https://github.com/frappe/frappe-ui',
-	description: 'An UI component library based on the Frappe design system ',
+  name: 'Frappe UI',
+  github: 'https://github.com/frappe/frappe-ui',
+  description: 'An UI component library based on the Frappe design system ',
 }
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 5d47ce4bf..9adc07c27 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,7 +1,7 @@
 import type { Theme } from 'vitepress'
-import "../../../src/fonts/Inter/inter.css"
-import "../../css/style.css"
-import "../../css/shiki.css"
+import '../../../src/fonts/Inter/inter.css'
+import '../../css/style.css'
+import '../../css/shiki.css'
 import Demo from '../../components/Docs/Demo.vue'
 import Layout from '../../components/Layout.vue'
 
@@ -10,7 +10,7 @@ if (process.env.NODE_ENV === 'production') {
 }
 
 export default {
-	Layout,
+  Layout,
   enhanceApp({ app, router, siteData }) {
     app.component('ComponentPreview', Demo)
   },
diff --git a/docs/components/Docs/EmitsTable.vue b/docs/components/Docs/EmitsTable.vue
index aca4edd84..5a2a5bb65 100644
--- a/docs/components/Docs/EmitsTable.vue
+++ b/docs/components/Docs/EmitsTable.vue
@@ -55,7 +55,9 @@ defineProps<Props>()
             <p
               v-if="typeof x.deprecated === 'string'"
               class="whitespace-pre-wrap font-mono text-xs text-ink-gray-6"
-            >Deprecated — {{ x.deprecated }}</p>
+            >
+              Deprecated — {{ x.deprecated }}
+            </p>
             <p
               v-else-if="x.description"
               class="mt-1 whitespace-pre-wrap font-mono text-xs leading-6 text-ink-gray-6"
diff --git a/docs/components/Docs/OnThisPage.vue b/docs/components/Docs/OnThisPage.vue
index 565b50075..d5b74c602 100644
--- a/docs/components/Docs/OnThisPage.vue
+++ b/docs/components/Docs/OnThisPage.vue
@@ -1,78 +1,73 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref, watch } from "vue";
-import { useRoute } from "vitepress";
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRoute } from 'vitepress'
 
 interface Heading {
-  type: string;
-  name: string;
-  id: string;
-  scrollPos: number;
+  type: string
+  name: string
+  id: string
+  scrollPos: number
 }
 
-const headings = ref<Heading[]>([]);
-const activeHeading = ref();
-const h2Exists = ref(false);
+const headings = ref<Heading[]>([])
+const activeHeading = ref()
+const h2Exists = ref(false)
 
 const setHeadings = () => {
-  const elements = Array.from(document.querySelectorAll("h2, h3"));
+  const elements = Array.from(document.querySelectorAll('h2, h3'))
 
-  h2Exists.value = elements.some((el) => el.tagName == "H2");
+  h2Exists.value = elements.some((el) => el.tagName == 'H2')
 
   headings.value = elements.map((el) => ({
     type: el.tagName.toLowerCase(),
     name: el.textContent?.trim(),
     id: el.id,
     scrollPos: el.offsetTop,
-  }));
-};
+  }))
+}
 
 const setActiveHeading = () => {
-  const curScrollPos = document.documentElement.scrollTop;
+  const curScrollPos = document.documentElement.scrollTop
 
   for (let i = 0; i < headings.value.length; i++) {
     if (curScrollPos <= headings.value[i].scrollPos) {
-      activeHeading.value = headings.value[i].id;
-      break;
+      activeHeading.value = headings.value[i].id
+      break
     }
   }
-};
+}
 
-const route = useRoute();
+const route = useRoute()
 
 onMounted(() => {
-  setHeadings();
-  document.addEventListener("scroll", setActiveHeading);
-});
+  setHeadings()
+  document.addEventListener('scroll', setActiveHeading)
+})
 
 onUnmounted(() => {
-  document.removeEventListener("scroll", setActiveHeading);
-});
+  document.removeEventListener('scroll', setActiveHeading)
+})
 
-watch(route, setHeadings);
+watch(route, setHeadings)
 </script>
 
 <template>
   <aside
     class="sticky top-24 hidden lg:flex flex-col h-fit mt-10 leading-relaxed w-[200px]"
-    :class='{ "invisible": headings.length == 0 }'
+    :class="{ invisible: headings.length == 0 }"
   >
     <span class="font-medium whitespace-nowrap pl-3">On this page</span>
 
     <a
       v-for="x in headings"
       :href="`#${x.id}`"
-      class="
-        text-ink-gray-6 whitespace-nowrap !no-underline pl-4 py-1 border-l
-        hover:text-ink-gray-9
-      "
+      class="text-ink-gray-6 whitespace-nowrap !no-underline pl-4 py-1 border-l hover:text-ink-gray-9"
       @click="activeHeading = x.id"
-      :class='
-        {
-          "pl-7": x.type == "h3" && h2Exists,
-          "border-outline-gray-5 text-ink-gray-9": activeHeading &&
-            x.id == activeHeading,
-        }
-      '
+      :class="{
+        'pl-7': x.type == 'h3' && h2Exists,
+        'border-outline-gray-5 text-ink-gray-9':
+          activeHeading && x.id == activeHeading,
+      }"
     >
       {{ x.name }}
     </a>
diff --git a/docs/components/Docs/PropsTable.vue b/docs/components/Docs/PropsTable.vue
index 953241589..27d2e1120 100644
--- a/docs/components/Docs/PropsTable.vue
+++ b/docs/components/Docs/PropsTable.vue
@@ -127,7 +127,9 @@ const typeDefinition = computed(() => {
               <p
                 v-if="typeof x.deprecated === 'string'"
                 class="whitespace-pre-wrap text-p-sm text-ink-gray-6"
-              >Deprecated — {{ x.deprecated }}</p>
+              >
+                Deprecated — {{ x.deprecated }}
+              </p>
               <p
                 v-else-if="x.description"
                 class="mt-1 whitespace-pre-wrap text-p-sm leading-6 text-ink-gray-6"
diff --git a/docs/components/Docs/SlotsTable.vue b/docs/components/Docs/SlotsTable.vue
index 7e0e9d6c0..67005b1ac 100644
--- a/docs/components/Docs/SlotsTable.vue
+++ b/docs/components/Docs/SlotsTable.vue
@@ -55,7 +55,9 @@ defineProps<Props>()
             <p
               v-if="typeof x.deprecated === 'string'"
               class="whitespace-pre-wrap font-mono text-xs text-ink-gray-6"
-            >Deprecated — {{ x.deprecated }}</p>
+            >
+              Deprecated — {{ x.deprecated }}
+            </p>
             <p
               v-else-if="x.description"
               class="mt-1 whitespace-pre-wrap font-mono text-xs leading-6 text-ink-gray-6"
diff --git a/docs/components/Docs/sidebarList.ts b/docs/components/Docs/sidebarList.ts
index af4da4df3..bde107b65 100644
--- a/docs/components/Docs/sidebarList.ts
+++ b/docs/components/Docs/sidebarList.ts
@@ -28,7 +28,10 @@ export function getSidebarList(componentList: string[]): SidebarSection[] {
     {
       text: 'Design System',
       items: [
-        { text: 'Background Color', link: '/docs/design-system/background-color' },
+        {
+          text: 'Background Color',
+          link: '/docs/design-system/background-color',
+        },
         { text: 'Text Design', link: '/docs/design-system/text' },
         { text: 'Border Color', link: '/docs/design-system/border-color' },
         { text: 'Drop Shadow', link: '/docs/design-system/drop-shadow' },
@@ -44,7 +47,10 @@ export function getSidebarList(componentList: string[]): SidebarSection[] {
       items: [
         { text: 'Resource', link: '/docs/data-fetching/resource' },
         { text: 'List Resource', link: '/docs/data-fetching/list-resource' },
-        { text: 'Document Resource', link: '/docs/data-fetching/document-resource' },
+        {
+          text: 'Document Resource',
+          link: '/docs/data-fetching/document-resource',
+        },
       ],
     },
     {
diff --git a/docs/components/Home/ComponentGroups.vue b/docs/components/Home/ComponentGroups.vue
index c808ce434..2c903982d 100644
--- a/docs/components/Home/ComponentGroups.vue
+++ b/docs/components/Home/ComponentGroups.vue
@@ -1,69 +1,57 @@
 <script setup lang="ts">
-import DataDisplay from "./dummies/DataDisplay.vue";
-import Navigation from "./dummies/Navigation.vue";
-import Forms from "./dummies/Forms.vue";
-import Datetime from "./dummies/Datetime.vue";
-import Overlays from "./dummies/Overlays.vue";
-import Feedback from "./dummies/Feedback.vue";
-import Charts from "./dummies/Charts.vue";
-import { Badge } from "frappe-ui";
+import DataDisplay from './dummies/DataDisplay.vue'
+import Navigation from './dummies/Navigation.vue'
+import Forms from './dummies/Forms.vue'
+import Datetime from './dummies/Datetime.vue'
+import Overlays from './dummies/Overlays.vue'
+import Feedback from './dummies/Feedback.vue'
+import Charts from './dummies/Charts.vue'
+import { Badge } from 'frappe-ui'
 import { withBase } from 'vitepress'
 
 const componentGroups = {
-  "Data Display": {
+  'Data Display': {
     component: DataDisplay,
-    list: ["Avatar", "Badge", "ListView"],
+    list: ['Avatar', 'Badge', 'ListView'],
   },
 
-  "Navigation": {
+  'Navigation': {
     component: Navigation,
-    list: [
-      "Breadcrumbs",
-      "Tabs",
-      "TabButtons",
-      "Sidebar",
-    ],
+    list: ['Breadcrumbs', 'Tabs', 'TabButtons', 'Sidebar'],
   },
-  "Forms": {
+  'Forms': {
     component: Forms,
     list: [
-      "Input",
-      "FormControl",
-      "Select",
-      "MultiSelect",
-      "Checkbox",
-      "Switch",
-      "Password",
-      "FileUploader",
-      "Rating",
-      "TextEditor",
+      'Input',
+      'FormControl',
+      'Select',
+      'MultiSelect',
+      'Checkbox',
+      'Switch',
+      'Password',
+      'FileUploader',
+      'Rating',
+      'TextEditor',
     ],
   },
-  "DateTime": {
+  'DateTime': {
     component: Datetime,
-    list: ["Calendar", "DatePicker", "MonthPicker", "TimePicker"],
+    list: ['Calendar', 'DatePicker', 'MonthPicker', 'TimePicker'],
   },
-  "Overlays": {
+  'Overlays': {
     component: Overlays,
-    list: ["Dialog", "Dropdown", "Popover", "Tooltip"],
+    list: ['Dialog', 'Dropdown', 'Popover', 'Tooltip'],
   },
-  "Feedback": {
+  'Feedback': {
     component: Feedback,
-    list: [
-      "Alert",
-      "ErrorMessage",
-      "Progress",
-      "CircularProgressBar",
-    ],
+    list: ['Alert', 'ErrorMessage', 'Progress', 'CircularProgressBar'],
   },
 
-  "Charts": {
+  'Charts': {
     component: Charts,
-    list: [
-      "Charts",
-    ],
+    list: ['Charts'],
   },
-};
+}
 </script>
 
 <template>
@@ -87,7 +75,7 @@ const componentGroups = {
           <a
             v-for="x in components.list"
             :key="x"
-            :href='withBase("/docs/components/" + x.toLowerCase())'
+            :href="withBase('/docs/components/' + x.toLowerCase())"
           >
             <Badge size="lg" class="hover:bg-surface-gray-4">
               {{ x }}
diff --git a/docs/components/Home/Showcase/col1.vue b/docs/components/Home/Showcase/col1.vue
index eec7e4ee2..2afd62d27 100644
--- a/docs/components/Home/Showcase/col1.vue
+++ b/docs/components/Home/Showcase/col1.vue
@@ -1,45 +1,38 @@
 <script setup lang="ts">
-import {
-  Avatar,
-  Button,
-  FormControl,
-  Select,
-  Switch,
-  Tooltip,
-} from "frappe-ui";
-import LucideRight from "~icons/lucide/arrow-right";
-import LucideGlobe from "~icons/lucide/globe";
-import LucideLink from "~icons/lucide/link";
-import LucideSearch from "~icons/lucide/search";
-import LucideInfo from "~icons/lucide/info";
-import LucideCircle from "~icons/lucide/circle-plus";
+import { Avatar, Button, FormControl, Select, Switch, Tooltip } from 'frappe-ui'
+import LucideRight from '~icons/lucide/arrow-right'
+import LucideGlobe from '~icons/lucide/globe'
+import LucideLink from '~icons/lucide/link'
+import LucideSearch from '~icons/lucide/search'
+import LucideInfo from '~icons/lucide/info'
+import LucideCircle from '~icons/lucide/circle-plus'
 
 const countryOptions = [
-  { label: "Syria", value: "SY" },
-  { label: "Egypt", value: "EG" },
-  { label: "Canada", value: "CA" },
-  { label: "Ireland", value: "IR" },
-];
+  { label: 'Syria', value: 'SY' },
+  { label: 'Egypt', value: 'EG' },
+  { label: 'Canada', value: 'CA' },
+  { label: 'Ireland', value: 'IR' },
+]
 
 const users = [
   {
-    name: "Sandeep",
-    label: "sandeep@gmail.com",
-    img: "https://i.pravatar.cc/150?img=1",
+    name: 'Sandeep',
+    label: 'sandeep@gmail.com',
+    img: 'https://i.pravatar.cc/150?img=1',
   },
   {
-    name: "John",
-    label: "john@proton.me",
-    img: "https://i.pravatar.cc/150?img=2",
+    name: 'John',
+    label: 'john@proton.me',
+    img: 'https://i.pravatar.cc/150?img=2',
   },
   {
-    name: "Zach",
-    label: "zach@frappe.io",
-    img: "https://i.pravatar.cc/150?img=3",
+    name: 'Zach',
+    label: 'zach@frappe.io',
+    img: 'https://i.pravatar.cc/150?img=3',
   },
-];
+]
 
-const selOpts = ["Admin", "Editor", "Viewer", "Guest"]
+const selOpts = ['Admin', 'Editor', 'Viewer', 'Guest']
 </script>
 
 <template>
@@ -54,17 +47,9 @@ const selOpts = ["Admin", "Editor", "Viewer", "Guest"]
         class="col-span-2"
       />
 
-      <FormControl
-        type="select"
-        label="Country"
-        :options="countryOptions"
-      />
+      <FormControl type="select" label="Country" :options="countryOptions" />
 
-      <FormControl
-        type="select"
-        label="City"
-        :options="countryOptions"
-      />
+      <FormControl type="select" label="City" :options="countryOptions" />
 
       <FormControl
         label="Address"
@@ -84,22 +69,20 @@ const selOpts = ["Admin", "Editor", "Viewer", "Guest"]
         type="select"
         label="Month"
         placeholder="MM"
-        :options='
-          [
-            "January",
-            "February",
-            "March",
-            "April",
-            "May",
-            "June",
-            "July",
-            "August",
-            "September",
-            "October",
-            "November",
-            "December",
-          ]
-        '
+        :options="[
+          'January',
+          'February',
+          'March',
+          'April',
+          'May',
+          'June',
+          'July',
+          'August',
+          'September',
+          'October',
+          'November',
+          'December',
+        ]"
       />
 
       <FormControl
@@ -108,7 +91,8 @@ const selOpts = ["Admin", "Editor", "Viewer", "Guest"]
         placeholder="Select Year"
         :options="
           Array.from({ length: 6 }, (_, i) =>
-            String(i + new Date().getFullYear()))
+            String(i + new Date().getFullYear()),
+          )
         "
       />
 
@@ -135,14 +119,16 @@ const selOpts = ["Admin", "Editor", "Viewer", "Guest"]
         </div>
         <div class="grid gap-1 mr-auto">
           <span class="text-ink-gray-9">Visible to everyone</span>
-          <p class="text-ink-gray-5">
-            Collaborate and stay in sync
-          </p>
+          <p class="text-ink-gray-5">Collaborate and stay in sync</p>
         </div>
         <Switch />
       </div>
 
-      <Select placeholder="Add people or emails" variant="outline" :options="users">
+      <Select
+        placeholder="Add people or emails"
+        variant="outline"
+        :options="users"
+      >
         <template #prefix>
           <LucideSearch class="size-4" />
         </template>
@@ -159,7 +145,7 @@ const selOpts = ["Admin", "Editor", "Viewer", "Guest"]
         </div>
 
         <Select
-          :options='selOpts'
+          :options="selOpts"
           class="my-auto ml-auto !w-fit"
           variant="ghost"
           placeholder="Select"
@@ -172,12 +158,10 @@ const selOpts = ["Admin", "Editor", "Viewer", "Guest"]
           <template #prefix>
             <LucideLink class="size-4" />
           </template>
-          Copy Link</Button>
-
-        <Tooltip
-          text="Gotchu!"
-          :hover-delay="0"
+          Copy Link</Button
         >
+
+        <Tooltip text="Gotchu!" :hover-delay="0">
           <span class="flex gap-2">
             Learn more
             <LucideInfo class="size-4" />
@@ -189,7 +173,8 @@ const selOpts = ["Admin", "Editor", "Viewer", "Guest"]
         <template #prefix>
           <LucideCircle class="size-4" />
         </template>
-        Create project</Button>
+        Create project</Button
+      >
     </div>
   </section>
 </template>
diff --git a/docs/components/Home/Showcase/col2.vue b/docs/components/Home/Showcase/col2.vue
index a078e5462..f5bdf4606 100644
--- a/docs/components/Home/Showcase/col2.vue
+++ b/docs/components/Home/Showcase/col2.vue
@@ -47,7 +47,7 @@ const resetState = () => {
     class="grid gap-5 *:rounded *:border [&_label]:text-ink-gray-9 [&_label]:mb-2 [&_label]:text-base h-fit"
   >
     <div class="h-fit">
-      <Tabs :tabs v-model="val" class='[&>[role=tablist]]:px-4'>
+      <Tabs :tabs v-model="val" class="[&>[role=tablist]]:px-4">
         <template #tab-panel="{ tab }">
           <div v-if="tab.label == 'Profile'" class="p-5">
             <div class="flex items-center gap-4 mb-4">
diff --git a/docs/components/Home/Showcase/col3.vue b/docs/components/Home/Showcase/col3.vue
index 027df6661..22f34f899 100644
--- a/docs/components/Home/Showcase/col3.vue
+++ b/docs/components/Home/Showcase/col3.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref } from 'vue'
 import {
   Avatar,
   Badge,
@@ -9,67 +9,64 @@ import {
   Select,
   Slider,
   Switch,
-} from "frappe-ui";
-import LucideCoins from "~icons/lucide/circle-dollar-sign";
-import LucideUsers from "~icons/lucide/users";
-import LucideVideo from "~icons/lucide/video";
-import LucideMapPin from "~icons/lucide/map-pin";
-import LucideClock from "~icons/lucide/clock";
-import LucideCalendar from "~icons/lucide/calendar";
-import LucideX from "~icons/lucide/x";
-import LucideLink from "~icons/lucide/send";
+} from 'frappe-ui'
+import LucideCoins from '~icons/lucide/circle-dollar-sign'
+import LucideUsers from '~icons/lucide/users'
+import LucideVideo from '~icons/lucide/video'
+import LucideMapPin from '~icons/lucide/map-pin'
+import LucideClock from '~icons/lucide/clock'
+import LucideCalendar from '~icons/lucide/calendar'
+import LucideX from '~icons/lucide/x'
+import LucideLink from '~icons/lucide/send'
 
 const imgs = [
-  "https://avatars.githubusercontent.com/u/499550?s=60&v=4",
+  'https://avatars.githubusercontent.com/u/499550?s=60&v=4',
   'https://avatars.githubusercontent.com/u/2798204?s=70&v=4',
   'https://avatars.githubusercontent.com/u/28706372?s=96&v=4',
   'https://avatars.githubusercontent.com/u/1493221?s=70&v=4',
-];
+]
 
-const progressVal = ref(1);
-const checkboxVal = ref(true);
+const progressVal = ref(1)
+const checkboxVal = ref(true)
 
 const incProgress = () => {
   if (progressVal.value < 3) {
-    progressVal.value += 1;
+    progressVal.value += 1
   }
-};
+}
 
 const decProgress = () => {
   if (progressVal.value > 1) {
-    progressVal.value -= 1;
+    progressVal.value -= 1
   }
-};
+}
 
-const themes = ["green", "red", "blue", "yellow", "gray"];
+const themes = ['green', 'red', 'blue', 'yellow', 'gray']
 
-const slider2Val = ref([20, 50]);
-const switchVal = ref(true);
+const slider2Val = ref([20, 50])
+const switchVal = ref(true)
 
 const progressData = [
   {
-    title: "Objection Handling",
-    desc:
-      "In this objection handling role-play scenario, participants will engage in a simulated sales interaction.",
-    tags: ["Communication", "Negotiation"],
+    title: 'Objection Handling',
+    desc: 'In this objection handling role-play scenario, participants will engage in a simulated sales interaction.',
+    tags: ['Communication', 'Negotiation'],
   },
 
   {
-    title: "Business Development",
-    desc:
-      "In this business development role-play scenario, participants will engage in a simulated sales interaction.",
-    tags: ["Strategy", "Customer support"],
+    title: 'Business Development',
+    desc: 'In this business development role-play scenario, participants will engage in a simulated sales interaction.',
+    tags: ['Strategy', 'Customer support'],
   },
 
   {
-    title: "Marketing Strategy",
-    desc:
-      "In this marketing strategy role-play scenario, participants will engage in a simulated sales interaction.",
-    tags: ["Strategy", "Analytics"],
+    title: 'Marketing Strategy',
+    desc: 'In this marketing strategy role-play scenario, participants will engage in a simulated sales interaction.',
+    tags: ['Strategy', 'Analytics'],
   },
-];
+]
 
-const toggledDiv = ref(false);
+const toggledDiv = ref(false)
 </script>
 
 <template>
@@ -97,7 +94,7 @@ const toggledDiv = ref(false);
         <Badge
           v-for="(tag, tagIndex) in progressData[progressVal - 1].tags"
           :key="tag"
-          :theme='themes[tagIndex] || "gray"'
+          :theme="themes[tagIndex] || 'gray'"
           size="lg"
           class="rounded-sm"
         >
@@ -114,14 +111,10 @@ const toggledDiv = ref(false);
           class="border-2 border-surface-white -ml-2"
         />
 
-        <span class="ml-3 text-sm !text-ink-gray-9">
-          + 5 more
-        </span>
+        <span class="ml-3 text-sm !text-ink-gray-9"> + 5 more </span>
       </div>
 
-      <div
-        class="grid grid-cols-2 mt-3 gap-3 *:py-4 border-t rounded pt-3"
-      >
+      <div class="grid grid-cols-2 mt-3 gap-3 *:py-4 border-t rounded pt-3">
         <Button @click="decProgress">Back</Button>
         <Button @click="incProgress" variant="solid">Next</Button>
       </div>
@@ -133,7 +126,7 @@ const toggledDiv = ref(false);
           <LucideCoins class="size-4" />
           Price range
         </span>
-        <Badge size="lg" class='rounded-sm'>
+        <Badge size="lg" class="rounded-sm">
           ${{ slider2Val[0] * 10 }} - ${{ slider2Val[1] * 10 }}
         </Badge>
       </div>
@@ -150,9 +143,7 @@ const toggledDiv = ref(false);
       <div class="flex gap-3 justify-between">
         <div class="grid gap-2">
           <span class="text-ink-gray-9">Smart compose</span>
-          <p class="text-ink-gray-5">
-            Enable predictive suggestions
-          </p>
+          <p class="text-ink-gray-5">Enable predictive suggestions</p>
         </div>
         <Switch v-model="switchVal" />
       </div>
@@ -162,9 +153,7 @@ const toggledDiv = ref(false);
       <div class="flex gap-2 justify-between">
         <div class="grid gap-2">
           <span class="text-ink-gray-9">Inline completions</span>
-          <p class="text-ink-gray-5">
-            Auto completions as you type
-          </p>
+          <p class="text-ink-gray-5">Auto completions as you type</p>
         </div>
         <Switch />
       </div>
@@ -172,7 +161,7 @@ const toggledDiv = ref(false);
 
     <div
       class="p-5 transition-all duration-200"
-      :class='{ "border-outline-gray-5": checkboxVal }'
+      :class="{ 'border-outline-gray-5': checkboxVal }"
     >
       <Checkbox
         v-model="checkboxVal"
@@ -184,7 +173,7 @@ const toggledDiv = ref(false);
 
     <div
       class="p-4 grid"
-      :class='{ "animate-bounce bg-surface-white shadow-lg": toggledDiv }'
+      :class="{ 'animate-bounce bg-surface-white shadow-lg': toggledDiv }"
     >
       <h3 class="text-xl mb-2 font-semibold flex gap-3 justify-between">
         Schedule an event
diff --git a/docs/components/Home/Showcase/col4.vue b/docs/components/Home/Showcase/col4.vue
index de6a916bf..442984f28 100644
--- a/docs/components/Home/Showcase/col4.vue
+++ b/docs/components/Home/Showcase/col4.vue
@@ -1,35 +1,35 @@
 <script setup lang="ts">
-import { computed, reactive, ref } from "vue";
-import { Avatar, Button, Password, Progress, Tree } from "frappe-ui";
+import { computed, reactive, ref } from 'vue'
+import { Avatar, Button, Password, Progress, Tree } from 'frappe-ui'
 
-import LucideFolder from "~icons/lucide/folder";
-import LucideFile from "~icons/lucide/file";
-import LucideShield from "~icons/lucide/shield-plus";
-import LucideChevronRight from "~icons/lucide/chevron-right";
-import LucideBell from "~icons/lucide/bell";
-import LucideX from "~icons/lucide/X";
-import LucideUpDown from "~icons/lucide/arrow-down-up";
+import LucideFolder from '~icons/lucide/folder'
+import LucideFile from '~icons/lucide/file'
+import LucideShield from '~icons/lucide/shield-plus'
+import LucideChevronRight from '~icons/lucide/chevron-right'
+import LucideBell from '~icons/lucide/bell'
+import LucideX from '~icons/lucide/X'
+import LucideUpDown from '~icons/lucide/arrow-down-up'
 
 const treeState = reactive({
   showIndentationGuides: true,
-  rowHeight: "25px",
-  indentWidth: "15px",
+  rowHeight: '25px',
+  indentWidth: '15px',
   node: {
-    name: "guest",
-    label: "Guest",
+    name: 'guest',
+    label: 'Guest',
     isCollapsed: true,
     children: [
       {
-        name: "downloads",
-        label: "Downloads",
+        name: 'downloads',
+        label: 'Downloads',
         children: [
           {
-            name: "Images",
-            label: "download.zip",
+            name: 'Images',
+            label: 'download.zip',
             children: [
               {
-                name: "image.png",
-                label: "image.png",
+                name: 'image.png',
+                label: 'image.png',
                 children: [],
               },
             ],
@@ -37,74 +37,76 @@ const treeState = reactive({
         ],
       },
       {
-        name: "documents",
-        label: "Documents",
+        name: 'documents',
+        label: 'Documents',
         children: [
           {
-            name: "somefile.txt",
-            label: "somefile.txt",
+            name: 'somefile.txt',
+            label: 'somefile.txt',
             children: [],
           },
           {
-            name: "somefile.pdf",
-            label: "somefile.pdf",
+            name: 'somefile.pdf',
+            label: 'somefile.pdf',
             children: [],
           },
         ],
       },
     ],
   },
-});
+})
 
-const password = ref("000000000");
-const hasValidLength = computed(() => password.value.length >= 9);
+const password = ref('000000000')
+const hasValidLength = computed(() => password.value.length >= 9)
 
 const hasLettersAndNumbers = computed(
   () => /[a-zA-Z]/.test(password.value) && /\d/.test(password.value),
-);
-const hasSpecialChar = computed(
-  () => /[#@$%^&*_?@~]/.test(password.value),
-);
-
-const strengthScore = computed(() =>
-  [hasValidLength.value, hasLettersAndNumbers.value, hasSpecialChar.value]
-    .filter(Boolean).length
-);
+)
+const hasSpecialChar = computed(() => /[#@$%^&*_?@~]/.test(password.value))
+
+const strengthScore = computed(
+  () =>
+    [
+      hasValidLength.value,
+      hasLettersAndNumbers.value,
+      hasSpecialChar.value,
+    ].filter(Boolean).length,
+)
 
 const strengthLabel = computed(() =>
   strengthScore.value <= 1
-    ? { text: "Weak", class: "text-ink-red-3" }
+    ? { text: 'Weak', class: 'text-ink-red-3' }
     : strengthScore.value === 2
-    ? { text: "Moderate", class: "text-ink-yellow-3" }
-    : { text: "Strong", class: "text-ink-green-3" }
-);
+      ? { text: 'Moderate', class: 'text-ink-yellow-3' }
+      : { text: 'Strong', class: 'text-ink-green-3' },
+)
 
 const notifs = [
   {
-    img: "https://randomuser.me/api/portraits/men/32.jpg",
-    name: "Matthew Connor",
-    txt: "The deadline for you is tomorrow.",
-    type: "invitation",
-    time: "Just now",
+    img: 'https://randomuser.me/api/portraits/men/32.jpg',
+    name: 'Matthew Connor',
+    txt: 'The deadline for you is tomorrow.',
+    type: 'invitation',
+    time: 'Just now',
     unread: false,
   },
   {
-    img: "https://randomuser.me/api/portraits/men/45.jpg",
-    name: "Eeren McKenzie",
-    txt: "Review the latest design updates",
+    img: 'https://randomuser.me/api/portraits/men/45.jpg',
+    name: 'Eeren McKenzie',
+    txt: 'Review the latest design updates',
     type: null,
-    time: "5 min ago",
+    time: '5 min ago',
     unread: true,
   },
   {
-    img: "https://randomuser.me/api/portraits/men/68.jpg",
-    name: "John Doe",
-    txt: "Review the design changes",
+    img: 'https://randomuser.me/api/portraits/men/68.jpg',
+    name: 'John Doe',
+    txt: 'Review the design changes',
     type: null,
-    time: "10 min ago",
+    time: '10 min ago',
     unread: true,
   },
-];
+]
 </script>
 
 <template>
@@ -113,14 +115,12 @@ const notifs = [
   >
     <div class="p-5 bg-urface-cards h-fit">
       <Tree
-        :options="
-          {
-            showIndentationGuides: treeState.showIndentationGuides,
-            rowHeight: treeState.rowHeight,
-            indentWidth: treeState.indentWidth,
-            defaultCollapsed: false,
-          }
-        "
+        :options="{
+          showIndentationGuides: treeState.showIndentationGuides,
+          rowHeight: treeState.rowHeight,
+          indentWidth: treeState.indentWidth,
+          defaultCollapsed: false,
+        }"
         nodeKey="name"
         :node="treeState.node"
       >
@@ -132,7 +132,7 @@ const notifs = [
             <LucideChevronRight
               v-if="hasChildren"
               class="size-4 transition-transform"
-              :class='{ "rotate-90": isCollapsed }'
+              :class="{ 'rotate-90': isCollapsed }"
             />
 
             <LucideFolder v-if="hasChildren" class="size-4" />
@@ -179,20 +179,18 @@ const notifs = [
       </Progress>
 
       <div class="px-8 !py-3 rounded bg-surface-gray-1 text-sm text-ink-gray-5">
-        <li :class='{ "line-through opacity-60": hasValidLength }'>
+        <li :class="{ 'line-through opacity-60': hasValidLength }">
           Includes 9-16 characters
         </li>
-        <li :class='{ "line-through opacity-60": hasLettersAndNumbers }'>
+        <li :class="{ 'line-through opacity-60': hasLettersAndNumbers }">
           Combines letters and numbers
         </li>
-        <li :class='{ "line-through opacity-60": hasSpecialChar }'>
+        <li :class="{ 'line-through opacity-60': hasSpecialChar }">
           A special character #@$%^&*_?@~
         </li>
       </div>
 
-      <Button variant="solid" class="w-full py-4">
-        Create password
-      </Button>
+      <Button variant="solid" class="w-full py-4"> Create password </Button>
     </div>
 
     <div>
@@ -207,7 +205,7 @@ const notifs = [
       <div
         v-for="(x, i) in notifs"
         class="flex gap-4 p-4"
-        :class='{ "border-b": i < notifs.length - 1 }'
+        :class="{ 'border-b': i < notifs.length - 1 }"
       >
         <Avatar size="xl" :image="x.img" />
 
diff --git a/docs/components/Home/Showcase/index.vue b/docs/components/Home/Showcase/index.vue
index 650241e53..5764ffef4 100644
--- a/docs/components/Home/Showcase/index.vue
+++ b/docs/components/Home/Showcase/index.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import Col1 from "./col1.vue";
-import Col2 from "./col2.vue";
-import Col3 from "./col3.vue";
-import Col4 from "./col4.vue";
+import Col1 from './col1.vue'
+import Col2 from './col2.vue'
+import Col3 from './col3.vue'
+import Col4 from './col4.vue'
 </script>
 
 <template>
diff --git a/docs/components/Home/dummies/Charts.vue b/docs/components/Home/dummies/Charts.vue
index 7028d33ac..a20db901e 100644
--- a/docs/components/Home/dummies/Charts.vue
+++ b/docs/components/Home/dummies/Charts.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-let bars = [22, 36, 28, 44, 30, 52, 34, 40, 26, 48, 32, 44, 28];
+let bars = [22, 36, 28, 44, 30, 52, 34, 40, 26, 48, 32, 44, 28]
 // bars = [...bars,...bars]
 </script>
 
 <template>
-  <div
-    class="p-3 flex items-end gap-6 overflow-hidden"
-  >
-    <div class="flex items-end gap-2 w-full bg-surface-cards p-4 pt-8 rounded overflow-hidden shadow-lg dark:shadow-none ">
+  <div class="p-3 flex items-end gap-6 overflow-hidden">
+    <div
+      class="flex items-end gap-2 w-full bg-surface-cards p-4 pt-8 rounded overflow-hidden shadow-lg dark:shadow-none"
+    >
       <div
         v-for="(h, i) in bars"
         :key="i"
@@ -17,4 +17,3 @@ let bars = [22, 36, 28, 44, 30, 52, 34, 40, 26, 48, 32, 44, 28];
     </div>
   </div>
 </template>
-
diff --git a/docs/components/Home/dummies/DataDisplay.vue b/docs/components/Home/dummies/DataDisplay.vue
index ea14d8215..9b26f7932 100644
--- a/docs/components/Home/dummies/DataDisplay.vue
+++ b/docs/components/Home/dummies/DataDisplay.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="p-3 grid grid-cols-3 gap-2">
     <div
-      class="rounded bg-surface-cards dark:bg-surface-cards p-2 flex flex-col gap-2 shadow-lg dark:shadow-none "
+      class="rounded bg-surface-cards dark:bg-surface-cards p-2 flex flex-col gap-2 shadow-lg dark:shadow-none"
       v-for="_ in 3"
     >
       <div class="h-2 w-8 rounded bg-surface-gray-2" />
diff --git a/docs/components/Home/dummies/Datetime.vue b/docs/components/Home/dummies/Datetime.vue
index a5f54b00f..876cfb4d3 100644
--- a/docs/components/Home/dummies/Datetime.vue
+++ b/docs/components/Home/dummies/Datetime.vue
@@ -7,12 +7,10 @@
       <div class="h-4 w-4 bg-surface-gray-4 rounded" />
     </div>
 
-    <div class="bg-surface-cards rounded p-3 grid grid-cols-7 gap-2 shadow-lg dark:shadow-none">
-      <div
-        v-for="i in 14"
-        :key="i"
-        class="h-4 rounded-sm bg-surface-gray-3"
-      />
+    <div
+      class="bg-surface-cards rounded p-3 grid grid-cols-7 gap-2 shadow-lg dark:shadow-none"
+    >
+      <div v-for="i in 14" :key="i" class="h-4 rounded-sm bg-surface-gray-3" />
     </div>
   </div>
 </template>
diff --git a/docs/components/Home/dummies/Feedback.vue b/docs/components/Home/dummies/Feedback.vue
index 83e12ca58..b0171c814 100644
--- a/docs/components/Home/dummies/Feedback.vue
+++ b/docs/components/Home/dummies/Feedback.vue
@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="p-5 flex justify-center"
-  >
+  <div class="p-5 flex justify-center">
     <div class="flex flex-col gap-3">
       <div
         class="shadow-lg dark:shadow-none bg-surface-cards border border-outline-gray-3 rounded p-2 w-32 flex items-center gap-2"
@@ -23,7 +21,7 @@
       </div>
 
       <div
-        class="shadow-lg dark:shadow-none  bg-surface-cards border border-surface-gray-3 rounded p-2 w-32 flex items-center gap-2"
+        class="shadow-lg dark:shadow-none bg-surface-cards border border-surface-gray-3 rounded p-2 w-32 flex items-center gap-2"
       >
         <div class="h-2 w-2 bg-red-400/40 rounded-full flex-shrink-0" />
         <div class="flex-1">
diff --git a/docs/components/Home/dummies/Navigation.vue b/docs/components/Home/dummies/Navigation.vue
index b23dbebfb..826b5ca35 100644
--- a/docs/components/Home/dummies/Navigation.vue
+++ b/docs/components/Home/dummies/Navigation.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from "vue";
+import { onMounted, onUnmounted, ref } from 'vue'
 
-const active = ref(0);
-let timer: number;
+const active = ref(0)
+let timer: number
 
 onMounted(() => {
   timer = window.setInterval(() => {
-    active.value = (active.value + 1) % 3;
-  }, 500);
-});
+    active.value = (active.value + 1) % 3
+  }, 500)
+})
 
 onUnmounted(() => {
-  clearInterval(timer);
-});
+  clearInterval(timer)
+})
 </script>
 
 <template>
@@ -24,15 +24,12 @@ onUnmounted(() => {
         v-for="(_, i) in 3"
         :key="i"
         class="h-3 w-full rounded-sm transition-all duration-500 ease-in-out"
-        :class='active === i ? "bg-surface-white" : "bg-surface-gray-2"'
+        :class="active === i ? 'bg-surface-white' : 'bg-surface-gray-2'"
       />
     </div>
 
     <div
-      class="
-        mt-2 p-5 animate-pulse rounded flex items-center w-full bg-surface-gray-4
-        dark:bg-surface-gray-3
-      "
+      class="mt-2 p-5 animate-pulse rounded flex items-center w-full bg-surface-gray-4 dark:bg-surface-gray-3"
     />
   </div>
 </template>
diff --git a/docs/components/Home/dummies/Overlays.vue b/docs/components/Home/dummies/Overlays.vue
index c0522a69b..a4a5bd951 100644
--- a/docs/components/Home/dummies/Overlays.vue
+++ b/docs/components/Home/dummies/Overlays.vue
@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="p-5 px-9"
-  >
+  <div class="p-5 px-9">
     <div class="mx-auto grid gap-2 relative w-1/2">
       <div
         class="absolute bottom-3 -left-6 bg-surface-cards rounded shadow-md border border-outline-gray-2 p-1.5 w-20"
diff --git a/docs/components/Home/index.vue b/docs/components/Home/index.vue
index 7acbad413..6f6cbb9ed 100644
--- a/docs/components/Home/index.vue
+++ b/docs/components/Home/index.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import Hero from "./Hero.vue";
-import Showcase from "./Showcase/index.vue"
+import Hero from './Hero.vue'
+import Showcase from './Showcase/index.vue'
 </script>
 
 <template>
-  <div class='flex flex-col min-h-screen'>
+  <div class="flex flex-col min-h-screen">
     <Hero />
-		<Showcase/>
+    <Showcase />
   </div>
 </template>
diff --git a/docs/components/LucideGallery.vue b/docs/components/LucideGallery.vue
index e69520b46..37f758aca 100644
--- a/docs/components/LucideGallery.vue
+++ b/docs/components/LucideGallery.vue
@@ -23,7 +23,7 @@ for (const value of Object.values(LucideIcons as Record<string, unknown>)) {
 }
 const icons = [...iconsByName.entries()]
   .map(([name, svg]) => ({ name, svg }))
-  .sort((a, b) => a.name.localeCompare(b.name))
+  .toSorted((a, b) => a.name.localeCompare(b.name))
 
 const query = ref('')
 
diff --git a/docs/components/Navbar.vue b/docs/components/Navbar.vue
index a3faf6a44..b90e5ae3d 100644
--- a/docs/components/Navbar.vue
+++ b/docs/components/Navbar.vue
@@ -43,7 +43,7 @@ const routes = computed(() => {
   for (const x of state.sidebarList) {
     if (!x.items) {
       routelabels.push({ label: x.text, link: x.link })
-    } //
+    }  //
     else {
       const tmp = x.items.map((nested) => ({
         label: x.text + '/' + nested.text,
diff --git a/docs/components/Search/Popup.vue b/docs/components/Search/Popup.vue
index 956af1db4..d4e3046a0 100644
--- a/docs/components/Search/Popup.vue
+++ b/docs/components/Search/Popup.vue
@@ -59,7 +59,8 @@ const hasResults = computed(() =>
 
 const highlightedLink = ref<string | null>(null)
 const onHighlight = (payload: { value: unknown } | undefined) => {
-  highlightedLink.value = typeof payload?.value === 'string' ? payload.value : null
+  highlightedLink.value =
+    typeof payload?.value === 'string' ? payload.value : null
 }
 
 const navigateTo = (item: SidebarItem) => {
diff --git a/docs/components/Story.vue b/docs/components/Story.vue
index 9f97812d7..9f0ed8d35 100644
--- a/docs/components/Story.vue
+++ b/docs/components/Story.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { Button } from "frappe-ui";
-import LucideBox from "~icons/lucide/box";
+import { Button } from 'frappe-ui'
+import LucideBox from '~icons/lucide/box'
 
 interface Props {
-  title?: string;
-  previewCss?: string;
+  title?: string
+  previewCss?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  title: "Default",
-});
+  title: 'Default',
+})
 </script>
 
 <template>
diff --git a/docs/components/tokens/BorderRadius.vue b/docs/components/tokens/BorderRadius.vue
index e294f8186..708f0e635 100644
--- a/docs/components/tokens/BorderRadius.vue
+++ b/docs/components/tokens/BorderRadius.vue
@@ -1,24 +1,19 @@
 <script setup lang="ts">
-
 type BorderRadiusToken = {
-  name: string;
-  value: string;
-};
+  name: string
+  value: string
+}
 
 const props = defineProps<{
-  data: BorderRadiusToken[];
-}>();
+  data: BorderRadiusToken[]
+}>()
 
-const data = props.data.slice(0, props.data.length - 1);
+const data = props.data.slice(0, props.data.length - 1)
 </script>
 
 <template>
   <div class="grid grid-cols-3 gap-5 my-10">
-    <div
-      v-for="radius in data"
-      :key="radius.name"
-      class="grid gap-3"
-    >
+    <div v-for="radius in data" :key="radius.name" class="grid gap-3">
       <div class="text-sm justify-between flex">
         <span class="font-medium">
           {{ 'rounded-' + radius.name }}
@@ -30,12 +25,7 @@ const data = props.data.slice(0, props.data.length - 1);
 
       <!-- card -->
       <div
-        class="
-          border grid gap-3
-          border-outline-gray-2
-          bg-surface-cards
-          p-4
-        "
+        class="border grid gap-3 border-outline-gray-2 bg-surface-cards p-4"
         :style="{ borderRadius: radius.value }"
       >
         <div class="flex items-center gap-3 borer-b">
@@ -54,9 +44,7 @@ const data = props.data.slice(0, props.data.length - 1);
         </div>
 
         <div class="flex items-center justify-between">
-          <span class="text-xs text-ink-gray-4">
-            8 items
-          </span>
+          <span class="text-xs text-ink-gray-4"> 8 items </span>
 
           <button
             class="px-3 py-1 text-xs border bg-surface-white"
diff --git a/docs/components/tokens/DropShadow.vue b/docs/components/tokens/DropShadow.vue
index 4eded7ed8..265416f7d 100644
--- a/docs/components/tokens/DropShadow.vue
+++ b/docs/components/tokens/DropShadow.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 const classNames = [
-  "shadow-none",
-  "shadow-sm",
-  "shadow-md",
-  "shadow-lg",
-  "shadow-xl",
-  "shadow-2xl",
-];
+  'shadow-none',
+  'shadow-sm',
+  'shadow-md',
+  'shadow-lg',
+  'shadow-xl',
+  'shadow-2xl',
+]
 </script>
 
 <template>
@@ -17,8 +17,7 @@ const classNames = [
       <div
         :class="item"
         class="rounded border grid gap-3 p-3 bg-surface-cards h-20"
-      >
-      </div>
+      ></div>
     </div>
   </div>
 </template>
diff --git a/docs/components/tokens/Text.vue b/docs/components/tokens/Text.vue
index c278ae6c1..909949d99 100644
--- a/docs/components/tokens/Text.vue
+++ b/docs/components/tokens/Text.vue
@@ -1,37 +1,37 @@
 <script setup>
-import { computed, ref } from "vue";
-import { Tabs } from "frappe-ui";
+import { computed, ref } from 'vue'
+import { Tabs } from 'frappe-ui'
 
 defineProps({
   data: {
     type: Array,
     required: true,
   },
-});
+})
 
-const activeTab = ref(0);
+const activeTab = ref(0)
 
 const tabs = [
-	{ label: "Text Color" },
-  { label: "Font Size" },
-  { label: "Font Weight" },
-  { label: "Letter Spacing" },
-  { label: "Line Height" },
-];
+  { label: 'Text Color' },
+  { label: 'Font Size' },
+  { label: 'Font Weight' },
+  { label: 'Letter Spacing' },
+  { label: 'Line Height' },
+]
 
-const activeTabLabel = computed(() => tabs[activeTab.value].label);
+const activeTabLabel = computed(() => tabs[activeTab.value].label)
 
-const text = ref("The quick brown fox jumps over the lazy dog");
+const text = ref('The quick brown fox jumps over the lazy dog')
 
 const para =
-  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
 </script>
 
 <template>
   <div class="grid gap-3">
     <Tabs :tabs v-model="activeTab" class="[&>div]:!px-1 rounded" />
 
-    <template v-if='activeTabLabel === "Text Color"'>
+    <template v-if="activeTabLabel === 'Text Color'">
       <div class="grid grid-cols-4 gap-x-4 gap-y-10">
         <template v-for="color in data.txtColors" :key="color.name">
           <span
@@ -42,9 +42,7 @@ const para =
           </span>
 
           <div v-else class="grid gap-2">
-            <span :style='{ color: color.value, fontSize: "50px" }'>
-              Aa
-            </span>
+            <span :style="{ color: color.value, fontSize: '50px' }"> Aa </span>
             <span>{{ color.name }}</span>
             <span class="text-sm text-ink-gray-5">{{ color.value }}</span>
           </div>
@@ -52,7 +50,7 @@ const para =
       </div>
     </template>
 
-    <template v-if='activeTabLabel === "Font Size"'>
+    <template v-if="activeTabLabel === 'Font Size'">
       <div
         v-for="item in data.fontSize"
         :key="item.name"
@@ -63,28 +61,26 @@ const para =
         </div>
 
         <div
-          :style="
-            {
-              fontSize: item.value[0],
-              lineHeight: item.value[1]?.lineHeight,
-              letterSpacing: item.value[1]?.letterSpacing,
-              fontWeight: item.value[1]?.fontWeight,
-            }
-          "
+          :style="{
+            fontSize: item.value[0],
+            lineHeight: item.value[1]?.lineHeight,
+            letterSpacing: item.value[1]?.letterSpacing,
+            fontWeight: item.value[1]?.fontWeight,
+          }"
         >
-          {{ item.name.includes("p") ? para : text }}
+          {{ item.name.includes('p') ? para : text }}
         </div>
 
         <div class="mt-2 text-xs opacity-60">
           {{ item.value[0] }}
-          · lh {{ item.value[1]?.lineHeight }}
-          · ls {{ item.value[1]?.letterSpacing }}
-          · fw {{ item.value[1]?.fontWeight }}
+          · lh {{ item.value[1]?.lineHeight }} · ls
+          {{ item.value[1]?.letterSpacing }} · fw
+          {{ item.value[1]?.fontWeight }}
         </div>
       </div>
     </template>
 
-    <template v-if='activeTabLabel === "Font Weight"'>
+    <template v-if="activeTabLabel === 'Font Weight'">
       <div
         v-for="item in data.fontWeight"
         :key="item.name"
@@ -94,50 +90,38 @@ const para =
           {{ item.name }} ({{ item.value }})
         </div>
 
-        <div
-          class="text-base"
-          :style="{ fontWeight: item.value }"
-        >
+        <div class="text-base" :style="{ fontWeight: item.value }">
           The quick brown fox jumps over the lazy dog
         </div>
       </div>
     </template>
 
-    <template v-if='activeTabLabel === "Letter Spacing"'>
+    <template v-if="activeTabLabel === 'Letter Spacing'">
       <div
         v-for="item in data.letterSpacing"
         :key="item.name"
         class="rounded border p-4"
-        :style='
-          {
-            letterSpacing: item.value,
-            fontSize: "16px",
-          }
-        '
+        :style="{
+          letterSpacing: item.value,
+          fontSize: '16px',
+        }"
       >
         <div class="text-xs opacity-60 mb-2">
           tracking-{{ item.name }} ({{ item.value }})
         </div>
-        <div>
-          The quick brown fox jumps over the lazy dog
-        </div>
+        <div>The quick brown fox jumps over the lazy dog</div>
       </div>
     </template>
 
-    <template v-if='activeTabLabel === "Line Height"'>
+    <template v-if="activeTabLabel === 'Line Height'">
       <div
         v-for="item in data.lineHeight"
         :key="item.name"
         class="rounded border border-outline-gray-2 p-3"
       >
-        <div class="text-xs opacity-60 mb-1">
-          leading-{{ item.name }}
-        </div>
+        <div class="text-xs opacity-60 mb-1">leading-{{ item.name }}</div>
 
-        <p
-          class="text-base my-2"
-          :style="{ lineHeight: item.value }"
-        >
+        <p class="text-base my-2" :style="{ lineHeight: item.value }">
           {{ para }}
         </p>
 
diff --git a/docs/components/tokens/TxtColor.vue b/docs/components/tokens/TxtColor.vue
index c2989ca85..363dc4a2b 100644
--- a/docs/components/tokens/TxtColor.vue
+++ b/docs/components/tokens/TxtColor.vue
@@ -4,7 +4,7 @@ defineProps({
     type: Array,
     required: true,
   },
-});
+})
 </script>
 
 <template>
@@ -15,9 +15,7 @@ defineProps({
       </h2>
 
       <div v-else class="grid gap-2">
-        <span :style='{ color: color.value, fontSize: "50px" }'>
-          Aa
-        </span>
+        <span :style="{ color: color.value, fontSize: '50px' }"> Aa </span>
         <span>{{ color.name }}</span>
         <span class="text-sm text-ink-gray-5">{{ color.value }}</span>
       </div>
diff --git a/docs/content/docs/getting-started.md b/docs/content/docs/getting-started.md
index 1bc717e94..01af5145b 100644
--- a/docs/content/docs/getting-started.md
+++ b/docs/content/docs/getting-started.md
@@ -10,7 +10,7 @@ You can quickly setup `frappe-ui` using
 you already have a Frappe app for which you want to build a frontend you can
 start with **Step 2**.
 
-###  Create your Frappe app
+### Create your Frappe app
 
 ```sh
 bench new-app todo
diff --git a/docs/content/docs/other/icons.md b/docs/content/docs/other/icons.md
index e4f2a0e62..32ad9f686 100644
--- a/docs/content/docs/other/icons.md
+++ b/docs/content/docs/other/icons.md
@@ -152,14 +152,14 @@ an inline `<svg>`.
 
 ## Which one should I use?
 
-| Situation                                   | Use                          |
-| ------------------------------------------- | ---------------------------- |
-| Static icon in a template                   | Class — `lucide-menu`        |
-| Icon name from props/data with a known set  | Class — list each literal    |
-| Icon name truly dynamic (loops, API data)   | `~icons/lucide/*` import     |
-| Passing an icon as a prop value             | `~icons/lucide/*` import     |
-| Inside an `<svg>` (need real SVG children)  | `~icons/lucide/*` import     |
-| Quick prototyping in a template             | `<LucideName />` auto-import |
+| Situation                                  | Use                          |
+| ------------------------------------------ | ---------------------------- |
+| Static icon in a template                  | Class — `lucide-menu`        |
+| Icon name from props/data with a known set | Class — list each literal    |
+| Icon name truly dynamic (loops, API data)  | `~icons/lucide/*` import     |
+| Passing an icon as a prop value            | `~icons/lucide/*` import     |
+| Inside an `<svg>` (need real SVG children) | `~icons/lucide/*` import     |
+| Quick prototyping in a template            | `<LucideName />` auto-import |
 
 In most components you write, the class form is the right answer.
 
@@ -180,7 +180,8 @@ class string or a component reference.
 <!-- ✅ Class form (recommended) -->
 <Button icon-left="lucide-plus" label="New task" />
 <Button icon-right="lucide-arrow-right" label="Continue" />
-<Button icon="lucide-settings" />  <!-- icon-only -->
+<Button icon="lucide-settings" />
+<!-- icon-only -->
 
 <!-- Component form — for dynamic icons or pass-through cases -->
 <script setup>
@@ -204,9 +205,9 @@ shapes as `Button.iconLeft`:
 ```vue
 <script setup>
 const options = [
-  { label: 'Profile',  icon: 'lucide-user',     onClick: () => {} },
+  { label: 'Profile', icon: 'lucide-user', onClick: () => {} },
   { label: 'Settings', icon: 'lucide-settings', onClick: () => {} },
-  { label: 'Sign out', icon: 'lucide-log-out',  onClick: () => {} },
+  { label: 'Sign out', icon: 'lucide-log-out', onClick: () => {} },
 ]
 </script>
 
diff --git a/docs/css/shiki.css b/docs/css/shiki.css
index 681278025..f097e6cce 100644
--- a/docs/css/shiki.css
+++ b/docs/css/shiki.css
@@ -1,3 +1,182 @@
-/* Auto-generated on build-time */ 
+/* Auto-generated on build-time */
 
- .s_edvzsf{--shiki-dark:#7DCFFF;--shiki-light:#D73A49}.s_13ahmt{--shiki-dark:#9ABDF5;--shiki-light:#24292E}.s_4q1z3w{--shiki-dark:#0DB9D7;--shiki-light:#24292E}.s_w1p9wo{--shiki-dark:#89DDFF;--shiki-light:#032F62}.s_2575z4{--shiki-dark:#9ECE6A;--shiki-light:#032F62}.s_50ecpt{--shiki-dark:#BB9AF7;--shiki-light:#D73A49}.s_euu481{--shiki-dark:#C0CAF5;--shiki-light:#6F42C1}.s_1th9sy{--shiki-dark:#51597D;--shiki-dark-font-style:italic;--shiki-light:#6A737D;--shiki-light-font-style:inherit}.s_bsv8nz{--shiki-dark:#73DACA;--shiki-light:#E36209}.s_2ekfrt{--shiki-dark:#89DDFF;--shiki-light:#D73A49}.s_i592pt{--shiki-dark:#0DB9D7;--shiki-light:#005CC5}.s_indoxt{--shiki-dark:#7AA2F7;--shiki-light:#6F42C1}.s_fsg3al{--shiki-dark:#E0AF68;--shiki-light:#E36209}.s_2cy0ei{--shiki-dark:#a9b1d6;--shiki-light:#24292e;--shiki-dark-bg:#1a1b26;--shiki-light-bg:#fff}.s_1zd9e2{--shiki-dark:#BA3C97;--shiki-light:#24292E}.s_1uuh8p{--shiki-dark:#F7768E;--shiki-light:#22863A}.s_1i4ay4{--shiki-dark:#BB9AF7;--shiki-light:#6F42C1}.s_1jjt6x{--shiki-dark:#89DDFF;--shiki-light:#24292E}.s_wac0bt{--shiki-dark:#DE5971;--shiki-light:#22863A}.s_22m8k2{--shiki-dark:#C0CAF5;--shiki-light:#24292E}.s_252irl{--shiki-dark:#9D7CD8;--shiki-dark-font-style:italic;--shiki-light:#D73A49;--shiki-light-font-style:inherit}.s_295sjd{--shiki-dark:#BB9AF7;--shiki-light:#005CC5}.s_6am9cx{--shiki-dark:#9AA5CE;--shiki-light:#24292E}.s_y1rh3e{--shiki-dark:#646E9C;--shiki-dark-font-style:italic;--shiki-light:#D73A49;--shiki-light-font-style:inherit}.s_21q2v7{--shiki-dark:#89DDFF;--shiki-dark-font-style:italic;--shiki-light:#032F62;--shiki-light-font-style:inherit}.s_1cpno3{--shiki-dark:#5A638C;--shiki-dark-font-style:italic;--shiki-light:#24292E;--shiki-light-font-style:inherit}.s_40mev6{--shiki-dark:#FF9E64;--shiki-light:#005CC5}.s_20l85h{--shiki-dark:#7DCFFF;--shiki-light:#032F62}.s_r4oegk{--shiki-dark:#73DACA;--shiki-light:#24292E}.s_29n2kq{--shiki-dark:#BB9AF7;--shiki-dark-font-style:italic;--shiki-light:#D73A49;--shiki-light-font-style:inherit}.s_11933w{--shiki-dark:#7DCFFF;--shiki-light:#24292E}.s_28rvie{--shiki-dark:#FF5370;--shiki-dark-font-style:inherit;--shiki-light:#B31D28;--shiki-light-font-style:italic}.s_12xt1b{--shiki-dark:#41A6B5;--shiki-light:#24292E}.s_fjrnv8{--shiki-dark:#F7768E;--shiki-dark-font-weight:bold;--shiki-light:#D73A49;--shiki-light-font-weight:inherit}.s_kq5psm{--shiki-dark:#A9B1D6;--shiki-light:#24292E}.s_suc1p8{--shiki-dark:#BB9AF7;--shiki-dark-font-style:inherit;--shiki-light:#B31D28;--shiki-light-font-style:italic}.s_2a1oer{--shiki-dark:#BB9AF7;--shiki-light:#24292E}.s_2d41qv{--shiki-dark:#E0AF68;--shiki-light:#005CC5}.s_118ozv{--shiki-dark:#F7768E;--shiki-light:#005CC5}.s_g1fsda{--shiki-dark:#73DACA;--shiki-light:#6F42C1}
\ No newline at end of file
+.s_edvzsf {
+  --shiki-dark: #7dcfff;
+  --shiki-light: #d73a49;
+}
+.s_13ahmt {
+  --shiki-dark: #9abdf5;
+  --shiki-light: #24292e;
+}
+.s_4q1z3w {
+  --shiki-dark: #0db9d7;
+  --shiki-light: #24292e;
+}
+.s_w1p9wo {
+  --shiki-dark: #89ddff;
+  --shiki-light: #032f62;
+}
+.s_2575z4 {
+  --shiki-dark: #9ece6a;
+  --shiki-light: #032f62;
+}
+.s_50ecpt {
+  --shiki-dark: #bb9af7;
+  --shiki-light: #d73a49;
+}
+.s_euu481 {
+  --shiki-dark: #c0caf5;
+  --shiki-light: #6f42c1;
+}
+.s_1th9sy {
+  --shiki-dark: #51597d;
+  --shiki-dark-font-style: italic;
+  --shiki-light: #6a737d;
+  --shiki-light-font-style: inherit;
+}
+.s_bsv8nz {
+  --shiki-dark: #73daca;
+  --shiki-light: #e36209;
+}
+.s_2ekfrt {
+  --shiki-dark: #89ddff;
+  --shiki-light: #d73a49;
+}
+.s_i592pt {
+  --shiki-dark: #0db9d7;
+  --shiki-light: #005cc5;
+}
+.s_indoxt {
+  --shiki-dark: #7aa2f7;
+  --shiki-light: #6f42c1;
+}
+.s_fsg3al {
+  --shiki-dark: #e0af68;
+  --shiki-light: #e36209;
+}
+.s_2cy0ei {
+  --shiki-dark: #a9b1d6;
+  --shiki-light: #24292e;
+  --shiki-dark-bg: #1a1b26;
+  --shiki-light-bg: #fff;
+}
+.s_1zd9e2 {
+  --shiki-dark: #ba3c97;
+  --shiki-light: #24292e;
+}
+.s_1uuh8p {
+  --shiki-dark: #f7768e;
+  --shiki-light: #22863a;
+}
+.s_1i4ay4 {
+  --shiki-dark: #bb9af7;
+  --shiki-light: #6f42c1;
+}
+.s_1jjt6x {
+  --shiki-dark: #89ddff;
+  --shiki-light: #24292e;
+}
+.s_wac0bt {
+  --shiki-dark: #de5971;
+  --shiki-light: #22863a;
+}
+.s_22m8k2 {
+  --shiki-dark: #c0caf5;
+  --shiki-light: #24292e;
+}
+.s_252irl {
+  --shiki-dark: #9d7cd8;
+  --shiki-dark-font-style: italic;
+  --shiki-light: #d73a49;
+  --shiki-light-font-style: inherit;
+}
+.s_295sjd {
+  --shiki-dark: #bb9af7;
+  --shiki-light: #005cc5;
+}
+.s_6am9cx {
+  --shiki-dark: #9aa5ce;
+  --shiki-light: #24292e;
+}
+.s_y1rh3e {
+  --shiki-dark: #646e9c;
+  --shiki-dark-font-style: italic;
+  --shiki-light: #d73a49;
+  --shiki-light-font-style: inherit;
+}
+.s_21q2v7 {
+  --shiki-dark: #89ddff;
+  --shiki-dark-font-style: italic;
+  --shiki-light: #032f62;
+  --shiki-light-font-style: inherit;
+}
+.s_1cpno3 {
+  --shiki-dark: #5a638c;
+  --shiki-dark-font-style: italic;
+  --shiki-light: #24292e;
+  --shiki-light-font-style: inherit;
+}
+.s_40mev6 {
+  --shiki-dark: #ff9e64;
+  --shiki-light: #005cc5;
+}
+.s_20l85h {
+  --shiki-dark: #7dcfff;
+  --shiki-light: #032f62;
+}
+.s_r4oegk {
+  --shiki-dark: #73daca;
+  --shiki-light: #24292e;
+}
+.s_29n2kq {
+  --shiki-dark: #bb9af7;
+  --shiki-dark-font-style: italic;
+  --shiki-light: #d73a49;
+  --shiki-light-font-style: inherit;
+}
+.s_11933w {
+  --shiki-dark: #7dcfff;
+  --shiki-light: #24292e;
+}
+.s_28rvie {
+  --shiki-dark: #ff5370;
+  --shiki-dark-font-style: inherit;
+  --shiki-light: #b31d28;
+  --shiki-light-font-style: italic;
+}
+.s_12xt1b {
+  --shiki-dark: #41a6b5;
+  --shiki-light: #24292e;
+}
+.s_fjrnv8 {
+  --shiki-dark: #f7768e;
+  --shiki-dark-font-weight: bold;
+  --shiki-light: #d73a49;
+  --shiki-light-font-weight: inherit;
+}
+.s_kq5psm {
+  --shiki-dark: #a9b1d6;
+  --shiki-light: #24292e;
+}
+.s_suc1p8 {
+  --shiki-dark: #bb9af7;
+  --shiki-dark-font-style: inherit;
+  --shiki-light: #b31d28;
+  --shiki-light-font-style: italic;
+}
+.s_2a1oer {
+  --shiki-dark: #bb9af7;
+  --shiki-light: #24292e;
+}
+.s_2d41qv {
+  --shiki-dark: #e0af68;
+  --shiki-light: #005cc5;
+}
+.s_118ozv {
+  --shiki-dark: #f7768e;
+  --shiki-light: #005cc5;
+}
+.s_g1fsda {
+  --shiki-dark: #73daca;
+  --shiki-light: #6f42c1;
+}
diff --git a/docs/scripts/propsgen.ts b/docs/scripts/propsgen.ts
index 9580050ed..4f0e17be2 100644
--- a/docs/scripts/propsgen.ts
+++ b/docs/scripts/propsgen.ts
@@ -92,11 +92,11 @@ ${indent}]`
 
     return `{
 ${entries
-      .map(
-        ([key, itemValue]) =>
-          `${nextIndent}${formatObjectKey(key)}: ${toVueExpression(itemValue, indentLevel + 1)}`,
-      )
-      .join(',\n')}
+  .map(
+    ([key, itemValue]) =>
+      `${nextIndent}${formatObjectKey(key)}: ${toVueExpression(itemValue, indentLevel + 1)}`,
+  )
+  .join(',\n')}
 ${indent}}`
   }
 
@@ -135,10 +135,10 @@ function getEventDescription(name: string, description?: string) {
 
   return (
     {
-      change: 'Fired after the value is committed.',
-      open: 'Fired when the component opens.',
-      close: 'Fired when the component closes.',
-      dismiss: 'Fired when the component is dismissed.',
+      'change': 'Fired after the value is committed.',
+      'open': 'Fired when the component opens.',
+      'close': 'Fired when the component closes.',
+      'dismiss': 'Fired when the component is dismissed.',
       'item-click': 'Fired when an enabled item is clicked.',
       'value-commit': 'Fired once when the user finishes committing the value.',
     }[name] ?? ''
@@ -167,7 +167,7 @@ function parseStoryFileName(fileName: string) {
 function sortStories(
   stories: Array<{ fileName: string; title: string; order: number | null }>,
 ) {
-  return [...stories].sort((a, b) => {
+  return [...stories].toSorted((a, b) => {
     if (a.order != null || b.order != null) {
       if (a.order == null) return 1
       if (b.order == null) return -1
@@ -309,7 +309,7 @@ function getAvailableComponents() {
     .filter((name) => {
       return fs.existsSync(path.join(componentDir, name, `${name}.vue`))
     })
-    .sort((a, b) => a.localeCompare(b))
+    .toSorted((a, b) => a.localeCompare(b))
 }
 
 // A folder's `index.ts` may re-export additional public sub-components
@@ -397,11 +397,7 @@ function replaceAutoGeneratedSection(content: string, replacement: string) {
 }
 
 function syncComponentDocsStories(componentName: string) {
-  const docsPath = path.join(
-    componentDir,
-    componentName,
-    `${componentName}.md`,
-  )
+  const docsPath = path.join(componentDir, componentName, `${componentName}.md`)
 
   if (!fs.existsSync(docsPath)) {
     return
@@ -498,11 +494,7 @@ selectedFolders.forEach((folder) => {
       return extractTableData(d.name, meta)
     })
 
-    const metaFilePath = path.join(
-      componentDir,
-      folder,
-      `${folder}.api.md`,
-    )
+    const metaFilePath = path.join(componentDir, folder, `${folder}.api.md`)
     const str = genFolderMetaTable(folder, components)
     fs.writeFileSync(metaFilePath, str)
     console.log(`Generated ${folder} meta`)
diff --git a/docs/state.ts b/docs/state.ts
index fab8e6754..7e3fc6253 100644
--- a/docs/state.ts
+++ b/docs/state.ts
@@ -4,5 +4,5 @@ export const state = reactive({
   mobsidebar: false,
   mobnavbar: false,
   searchDialog: false,
-  sidebarList: []
+  sidebarList: [],
 })
diff --git a/frappe/DataImport/DataImport.vue b/frappe/DataImport/DataImport.vue
index 1d165fbf7..53ac544a9 100644
--- a/frappe/DataImport/DataImport.vue
+++ b/frappe/DataImport/DataImport.vue
@@ -1,12 +1,24 @@
 <template>
   <header
-		class="sticky flex items-center justify-between space-x-28 top-0 z-10 border-b bg-surface-white px-3 py-2.5 sm:px-5"
-    >
-      <Breadcrumbs :items="breadcrumbs" />
-      <ImportSteps class="flex-1 hidden lg:flex" v-if="step != 'list'" :data="data" :step="step" @updateStep="updateStep" />
+    class="sticky flex items-center justify-between space-x-28 top-0 z-10 border-b bg-surface-white px-3 py-2.5 sm:px-5"
+  >
+    <Breadcrumbs :items="breadcrumbs" />
+    <ImportSteps
+      class="flex-1 hidden lg:flex"
+      v-if="step != 'list'"
+      :data="data"
+      :step="step"
+      @updateStep="updateStep"
+    />
   </header>
   <div>
-      <ImportSteps class="flex-1 lg:hidden w-[90%] mx-auto mt-5" v-if="step != 'list'" :data="data" :step="step" @updateStep="updateStep" />
+    <ImportSteps
+      class="flex-1 lg:hidden w-[90%] mx-auto mt-5"
+      v-if="step != 'list'"
+      :data="data"
+      :step="step"
+      @updateStep="updateStep"
+    />
 
     <DataImportList
       v-if="step === 'list'"
@@ -36,7 +48,12 @@
       :dataImports="dataImports"
       :data="data as DataImport"
       :fields="fields"
-      :doctypeMap="doctypeMap as Record<string, { title: string; listRoute?: string; pageRoute?: string }>"
+      :doctypeMap="
+        doctypeMap as Record<
+          string,
+          { title: string; listRoute?: string; pageRoute?: string }
+        >
+      "
       @updateStep="updateStep"
     />
   </div>
@@ -59,7 +76,7 @@ const data = ref<DataImport | null>(null)
 
 const props = defineProps<Partial<DataImportProps>>()
 
-  const dataImports = createListResource({
+const dataImports = createListResource({
   doctype: 'Data Import',
   fields: [
     'name',
@@ -70,14 +87,14 @@ const props = defineProps<Partial<DataImportProps>>()
     'mute_emails',
     'import_file',
     'google_sheets_url',
-    'template_options'
+    'template_options',
   ],
   auto: true,
   orderBy: 'modified desc',
 })
 
 const fields = createResource({
-  url: "frappe.desk.form.load.getdoctype",
+  url: 'frappe.desk.form.load.getdoctype',
   makeParams: (values: { doctype: string }) => {
     return {
       doctype: values.doctype,
@@ -87,11 +104,10 @@ const fields = createResource({
   auto: false,
 })
 
-
 const updateData = () => {
-  data.value = dataImports.data?.find(
-    (di: DataImport) => di.name === props.importName,
-    ) || null
+  data.value =
+    dataImports.data?.find((di: DataImport) => di.name === props.importName) ||
+    null
 }
 
 watch(
@@ -121,13 +137,19 @@ watch(
   { immediate: true },
 )
 
-watch(() => route.query, () => {
-  if (route.query.step == 'list') {
-    step.value = 'list'
-  }
-})
+watch(
+  () => route.query,
+  () => {
+    if (route.query.step == 'list') {
+      step.value = 'list'
+    }
+  },
+)
 
-const updateStep = (newStep: 'list' | 'upload' | 'map' | 'preview', newData: DataImport) => {
+const updateStep = (
+  newStep: 'list' | 'upload' | 'map' | 'preview',
+  newData: DataImport,
+) => {
   step.value = newStep
   if (newData) {
     data.value = newData
@@ -143,11 +165,11 @@ const breadcrumbs = computed(() => {
   let crumbs = [
     {
       label: 'Data Import',
-      route: { 
-        name: 'DataImportList', 
+      route: {
+        name: 'DataImportList',
         query: {
-          step: 'list'
-        } 
+          step: 'list',
+        },
       },
     },
   ]
@@ -160,6 +182,4 @@ const breadcrumbs = computed(() => {
 
   return crumbs
 })
-
-
 </script>
diff --git a/frappe/DataImport/DataImportList.vue b/frappe/DataImport/DataImportList.vue
index d1c3f8cf3..1fcfcd6b9 100644
--- a/frappe/DataImport/DataImportList.vue
+++ b/frappe/DataImport/DataImportList.vue
@@ -1,116 +1,125 @@
 <template>
-    <div class="flex min-h-0 flex-col text-base py-5 w-[90%] lg:w-[700px] mx-auto">
-		<div class="flex items-center justify-between">
-			<div>
-				<div class="text-xl font-semibold mb-1 text-ink-gray-9">
-					Data Import
-				</div>
-				<div class="text-ink-gray-6 leading-5">
-					Import data into your system using CSV files.
-				</div>
-			</div>
-            <Button variant="solid" @click="showModal = true">
-                <template #prefix>
-                    <FeatherIcon name="plus" class="size-4 stroke-1.5" />
-                </template>
-                Import
-            </Button>
-		</div>
-
-        <div class="flex items-center space-x-2 my-5">
-            <FormControl
-                v-model="search"
-                placeholder="Search imported files"
-                type="text"
-                class="flex-1"
-            />
-            <FormControl
-                v-model="importStatus"
-                type="select"
-                :options="importOptions"
-            />
+  <div
+    class="flex min-h-0 flex-col text-base py-5 w-[90%] lg:w-[700px] mx-auto"
+  >
+    <div class="flex items-center justify-between">
+      <div>
+        <div class="text-xl font-semibold mb-1 text-ink-gray-9">
+          Data Import
+        </div>
+        <div class="text-ink-gray-6 leading-5">
+          Import data into your system using CSV files.
         </div>
+      </div>
+      <Button variant="solid" @click="showModal = true">
+        <template #prefix>
+          <FeatherIcon name="plus" class="size-4 stroke-1.5" />
+        </template>
+        Import
+      </Button>
+    </div>
+
+    <div class="flex items-center space-x-2 my-5">
+      <FormControl
+        v-model="search"
+        placeholder="Search imported files"
+        type="text"
+        class="flex-1"
+      />
+      <FormControl
+        v-model="importStatus"
+        type="select"
+        :options="importOptions"
+      />
+    </div>
 
-        <div v-if="dataImports.data?.length" class="overflow-y-scroll">
-            <div class="divide-y">
-                <div class="grid grid-cols-[75%,20%] lg:grid-cols-[85%,20%] items-center text-sm text-ink-gray-5 py-1.5 mx-2 my-0.5 px-1">
-                    <div>
-                        Name
-                    </div>
-                    <div class="pl-1">
-                        Status
-                    </div>
-                </div>
-                <div
-                    v-for="dataImport in dataImports.data"
-                    @click="() => redirectToImport(dataImport.name!)"
-                    class="grid grid-cols-[75%,20%] lg:grid-cols-[85%,20%] items-center cursor-pointer py-2.5 px-1 mx-2"
-                >
-                    <div class="space-y-1">
-                        <div class="text-ink-gray-7">
-                            {{ dataImport.reference_doctype }}
-                        </div>
-                        <div class="text-ink-gray-5">
-                            {{ dayjs(dataImport.creation).fromNow() }}
-                        </div>
-                    </div>
-                    <Badge :label="dataImport.status" :theme="getBadgeColor(dataImport.status) as BadgeProps['theme']" class="w-fit" />
-                </div>
+    <div v-if="dataImports.data?.length" class="overflow-y-scroll">
+      <div class="divide-y">
+        <div
+          class="grid grid-cols-[75%,20%] lg:grid-cols-[85%,20%] items-center text-sm text-ink-gray-5 py-1.5 mx-2 my-0.5 px-1"
+        >
+          <div>Name</div>
+          <div class="pl-1">Status</div>
+        </div>
+        <div
+          v-for="dataImport in dataImports.data"
+          @click="() => redirectToImport(dataImport.name!)"
+          class="grid grid-cols-[75%,20%] lg:grid-cols-[85%,20%] items-center cursor-pointer py-2.5 px-1 mx-2"
+        >
+          <div class="space-y-1">
+            <div class="text-ink-gray-7">
+              {{ dataImport.reference_doctype }}
             </div>
-            <div class="my-5 flex justify-center">
-                <Button v-if="props.dataImports.hasNextPage" @click="props.dataImports.next()">
-                    <template #prefix>
-                        <FeatherIcon name="refresh-cw" class="size-4 stroke-1.5" />
-                    </template>
-                    Load More
-                </Button>
+            <div class="text-ink-gray-5">
+              {{ dayjs(dataImport.creation).fromNow() }}
             </div>
+          </div>
+          <Badge
+            :label="dataImport.status"
+            :theme="getBadgeColor(dataImport.status) as BadgeProps['theme']"
+            class="w-fit"
+          />
         </div>
-        <div v-else class="text-sm italic text-ink-gray-5 mt-5">
-            No data imports found.
-        </div>
-        <Dialog
-            v-model="showModal"
-            :options="{
-                title: 'New Data Import',
-                actions: [{
-                    label: 'Continue',
-                    variant: 'solid',
-                    onClick({ close }) {
-                        createDataImport(close)
-                    }
-                }]
-            }"
+      </div>
+      <div class="my-5 flex justify-center">
+        <Button
+          v-if="props.dataImports.hasNextPage"
+          @click="props.dataImports.next()"
         >
-            <template #body-content>
-                <div>
-                    <Link
-                        v-model="doctypeForImport"
-                        doctype="DocType"
-                        :filters="{
-                            'allow_import': 1
-                        }"
-                        label="Choose a Document Type to import"
-                    />
-                </div>
-            </template>
-        </Dialog>
-	</div>
+          <template #prefix>
+            <FeatherIcon name="refresh-cw" class="size-4 stroke-1.5" />
+          </template>
+          Load More
+        </Button>
+      </div>
+    </div>
+    <div v-else class="text-sm italic text-ink-gray-5 mt-5">
+      No data imports found.
+    </div>
+    <Dialog
+      v-model="showModal"
+      :options="{
+        title: 'New Data Import',
+        actions: [
+          {
+            label: 'Continue',
+            variant: 'solid',
+            onClick({ close }) {
+              createDataImport(close)
+            },
+          },
+        ],
+      }"
+    >
+      <template #body-content>
+        <div>
+          <Link
+            v-model="doctypeForImport"
+            doctype="DocType"
+            :filters="{
+              allow_import: 1,
+            }"
+            label="Choose a Document Type to import"
+          />
+        </div>
+      </template>
+    </Dialog>
+  </div>
 </template>
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import type { DataImports, DataImport } from './types'
-import { dayjs } from "../../src/utils/dayjs"
-import { getBadgeColor } from "./dataImport"
+import { dayjs } from '../../src/utils/dayjs'
+import { getBadgeColor } from './dataImport'
 import Badge from '../../src/components/Badge/Badge.vue'
 import type { BadgeProps } from '../../src/components/Badge/types'
-import { toast } from "../../src/components/Toast/toast"
+import { toast } from '../../src/components/Toast/toast'
 import Button from '../../src/components/Button/Button.vue'
 import Dialog from '../../src/components/Dialog/Dialog.vue'
 import FeatherIcon from '../../src/components/FeatherIcon.vue'
 import FormControl from '../../src/components/FormControl/FormControl.vue'
-import Link from "../Link/Link.vue"
+import Link from '../Link/Link.vue'
 
 const search = ref('')
 const importStatus = ref('All')
@@ -120,53 +129,63 @@ const emit = defineEmits(['updateStep'])
 const router = useRouter()
 
 const props = defineProps<{
-    dataImports: DataImports
+  dataImports: DataImports
 }>()
 
 const importOptions = computed(() => {
-    const options = ["All", "Pending", "Success", "Partial Success", "Error", "Timed Out"]
-    return options.map(option => ({ label: option, value: option }))
+  const options = [
+    'All',
+    'Pending',
+    'Success',
+    'Partial Success',
+    'Error',
+    'Timed Out',
+  ]
+  return options.map((option) => ({ label: option, value: option }))
 })
 
 watch([search, importStatus], ([newSearch, newStatus]) => {
-    props.dataImports.update({
-        filters: [
-            newSearch ? [['name', 'like', `%${newSearch}%`]] : [],
-            newStatus !== 'All' ? [['status', '=', newStatus]] : [],
-        ].flat(),
-    })
-    props.dataImports.reload()
+  props.dataImports.update({
+    filters: [
+      newSearch ? [['name', 'like', `%${newSearch}%`]] : [],
+      newStatus !== 'All' ? [['status', '=', newStatus]] : [],
+    ].flat(),
+  })
+  props.dataImports.reload()
 })
 
 const createDataImport = (close: () => void) => {
-    props.dataImports.insert.submit({
-        reference_doctype: doctypeForImport.value!,
-        import_type: 'Insert New Records',
-        mute_emails: true,
-        status: 'Pending',
-    }, {
-        onSuccess(data: DataImport) {
-            router.replace({
-                name: 'DataImport',
-                params: {
-                    importName: data.name
-                },
-            })
-            close()
-        },
-        onError(error: any) {
-            console.error(error)
-            toast.error(error.messages?.[0] || error)
-        }
-    })
+  props.dataImports.insert.submit(
+    {
+      reference_doctype: doctypeForImport.value!,
+      import_type: 'Insert New Records',
+      mute_emails: true,
+      status: 'Pending',
+    },
+    {
+      onSuccess(data: DataImport) {
+        router.replace({
+          name: 'DataImport',
+          params: {
+            importName: data.name,
+          },
+        })
+        close()
+      },
+      onError(error: any) {
+        console.error(error)
+        toast.error(error.messages?.[0] || error)
+      },
+    },
+  )
 }
 
 const redirectToImport = (importName: string) => {
-    router.replace({
-        name: 'DataImport',
-        params: {
-            importName
-        },
-    })
+  router.replace({
+    name: 'DataImport',
+    params: {
+      importName,
+    },
+  })
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/frappe/DataImport/ImportSteps.vue b/frappe/DataImport/ImportSteps.vue
index d246d431c..5b069d67b 100644
--- a/frappe/DataImport/ImportSteps.vue
+++ b/frappe/DataImport/ImportSteps.vue
@@ -1,68 +1,86 @@
 <template>
-    <div class="flex items-center space-x-3 lg:space-x-10 text-xs lg:text-base">
-        <div class="flex items-center space-x-1 lg:space-x-2 text-ink-gray-5 cursor-pointer" 
+  <div class="flex items-center space-x-3 lg:space-x-10 text-xs lg:text-base">
+    <div
+      class="flex items-center space-x-1 lg:space-x-2 text-ink-gray-5 cursor-pointer"
+      :class="{
+        'text-ink-gray-9 font-semibold': onUploadStep,
+      }"
+      @click="emit('updateStep', 'upload', { ...data })"
+    >
+      <FeatherIcon
+        v-if="uploadStepCompleted"
+        name="check"
+        class="size-5 text-sm border rounded-[5px] p-0.5"
         :class="{
-            'text-ink-gray-9 font-semibold': onUploadStep
+          'text-ink-white bg-surface-gray-7': onUploadStep,
         }"
-        @click="emit('updateStep', 'upload', { ...data })"
-        >
-            <FeatherIcon v-if="uploadStepCompleted" name="check" class="size-5 text-sm border rounded-[5px] p-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onUploadStep,
-            }"/>
-            <div v-else class="text-sm border rounded-[5px] px-1.5 py-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onUploadStep,
-            }">
-                <span>
-                    1
-                </span>
-            </div>
-            <div>
-                Upload File
-            </div>
-        </div>
-        <div class="flex items-center space-x-1 lg:space-x-2 text-ink-gray-5" 
+      />
+      <div
+        v-else
+        class="text-sm border rounded-[5px] px-1.5 py-0.5"
         :class="{
-            'text-ink-gray-9 font-semibold': onMapStep,
-            'cursor-pointer': uploadStepCompleted
+          'text-ink-white bg-surface-gray-7': onUploadStep,
         }"
-        @click="moveToMapStep()"
-        >
-            <FeatherIcon v-if="mapStepCompleted" name="check" class="size-5 text-sm border rounded-[5px] p-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onMapStep,
-            }"/>
-            <div v-else class="text-sm border rounded-[5px] px-1.5 py-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onMapStep,
-            }">
-                <span>
-                    2
-                </span>
-            </div>
-            <div>
-                Map Data
-            </div>
-        </div>
-        <div class="flex items-center space-x-1 lg:space-x-2 text-ink-gray-5" 
+      >
+        <span> 1 </span>
+      </div>
+      <div>Upload File</div>
+    </div>
+    <div
+      class="flex items-center space-x-1 lg:space-x-2 text-ink-gray-5"
+      :class="{
+        'text-ink-gray-9 font-semibold': onMapStep,
+        'cursor-pointer': uploadStepCompleted,
+      }"
+      @click="moveToMapStep()"
+    >
+      <FeatherIcon
+        v-if="mapStepCompleted"
+        name="check"
+        class="size-5 text-sm border rounded-[5px] p-0.5"
+        :class="{
+          'text-ink-white bg-surface-gray-7': onMapStep,
+        }"
+      />
+      <div
+        v-else
+        class="text-sm border rounded-[5px] px-1.5 py-0.5"
+        :class="{
+          'text-ink-white bg-surface-gray-7': onMapStep,
+        }"
+      >
+        <span> 2 </span>
+      </div>
+      <div>Map Data</div>
+    </div>
+    <div
+      class="flex items-center space-x-1 lg:space-x-2 text-ink-gray-5"
+      :class="{
+        'text-ink-gray-9 font-semibold': onPreviewStep,
+        'cursor-pointer': uploadStepCompleted,
+      }"
+      @click="moveToPreviewStep()"
+    >
+      <FeatherIcon
+        v-if="previewStepCompleted"
+        name="check"
+        class="size-5 text-sm border rounded-[5px] p-0.5"
+        :class="{
+          'text-ink-white bg-surface-gray-7': onPreviewStep,
+        }"
+      />
+      <div
+        v-else
+        class="text-sm border rounded-[5px] px-1.5 py-0.5"
         :class="{
-            'text-ink-gray-9 font-semibold': onPreviewStep,
-            'cursor-pointer': uploadStepCompleted
+          'text-ink-white bg-surface-gray-7': onPreviewStep,
         }"
-        @click="moveToPreviewStep()"
-        >
-            <FeatherIcon v-if="previewStepCompleted" name="check" class="size-5 text-sm border rounded-[5px] p-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onPreviewStep,
-            }"/>
-            <div v-else class="text-sm border rounded-[5px] px-1.5 py-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onPreviewStep,
-            }">
-                <span>
-                    3
-                </span>
-            </div>
-            <div>
-                Review & Import
-            </div>
-        </div>
+      >
+        <span> 3 </span>
+      </div>
+      <div>Review & Import</div>
     </div>
+  </div>
 </template>
 <script setup lang="ts">
 import type { DataImport } from './types'
@@ -72,43 +90,47 @@ import FeatherIcon from '../../src/components/FeatherIcon.vue'
 const emit = defineEmits(['updateStep'])
 
 const props = defineProps<{
-    data: DataImport | null
-    step: 'list' | 'upload' | 'map' | 'preview'
+  data: DataImport | null
+  step: 'list' | 'upload' | 'map' | 'preview'
 }>()
 
 const onUploadStep = computed(() => {
-    return props.step === 'upload'
+  return props.step === 'upload'
 })
 
 const uploadStepCompleted = computed(() => {
-    return props.data?.import_file || props.data?.google_sheets_url
+  return props.data?.import_file || props.data?.google_sheets_url
 })
 
 const onMapStep = computed(() => {
-    return props.step === 'map'
+  return props.step === 'map'
 })
 
 const mapStepCompleted = computed(() => {
-    return props.data && props.data?.template_options && JSON.parse(props.data.template_options).column_to_field_map
+  return (
+    props.data &&
+    props.data?.template_options &&
+    JSON.parse(props.data.template_options).column_to_field_map
+  )
 })
 
 const onPreviewStep = computed(() => {
-    return props.step === 'preview'
+  return props.step === 'preview'
 })
 
 const previewStepCompleted = computed(() => {
-    return props.data?.status === 'Success'
+  return props.data?.status === 'Success'
 })
 
 const moveToMapStep = () => {
-    if (uploadStepCompleted.value) {
-        emit('updateStep', 'map', { ...props.data })
-    }
+  if (uploadStepCompleted.value) {
+    emit('updateStep', 'map', { ...props.data })
+  }
 }
 
 const moveToPreviewStep = () => {
-    if (uploadStepCompleted.value) {
-        emit('updateStep', 'preview', { ...props.data })
-    }
+  if (uploadStepCompleted.value) {
+    emit('updateStep', 'preview', { ...props.data })
+  }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/frappe/DataImport/MappingStep.vue b/frappe/DataImport/MappingStep.vue
index cb4bba9e0..f81d9f06c 100644
--- a/frappe/DataImport/MappingStep.vue
+++ b/frappe/DataImport/MappingStep.vue
@@ -1,187 +1,204 @@
 <template>
-    <div class="w-[85%] lg:w-[700px] mx-auto py-12 space-y-8 text-base">
-       <div class="flex justify-between">
-            <div class="space-y-2">
-                <div class="text-lg font-semibold text-ink-gray-9">
-                    <span>
-                        Map Data
-                    </span>
-                    <Badge v-if="data?.status" :theme="getBadgeColor(data?.status)">
-                        {{ data?.status }}
-                    </Badge>
-                </div>
-                <div class="leading-5 text-ink-gray-7">
-                    Change the mapping of columns from your file to fields in the system
-                </div>
-            </div>
-
-            <div class="flex flex-col lg:flex-row space-y-2 lg:space-x-2 lg:space-y-0">
-                <Button v-if="mappingUpdated" label="Reset Mapping" @click="resetMapping" />
-                <Button label="Continue" variant="solid" @click="$emit('updateStep', 'preview')" />
-            </div>
-       </div>
-
-       <div v-if="Object.keys(columnMappings).length" class="border rounded-md space-y-8">
-            <div class="grid grid-cols-2 text-ink-gray-5 border-b py-2 px-4">
-                <div>
-                    Fields in File
-                </div>
-                <div>
-                    Fields in System
-                </div>
-            </div>
-            <div class="grid grid-cols-2 py-2 px-4 gap-y-8">
-                <template v-for="i in columnsFromFile.length" :key="i">
-                    <div class="text-ink-gray-7">{{ columnsFromFile[i - 1] }}</div>
-                    <Autocomplete
-                        :model-value="columnMappings[columnsFromFile[i - 1]]"
-                        :options="columnsFromSystem"
-                        placeholder="Select field"
-                        @update:model-value="(val: any) => updateColumnMappings(i, val)"
-                    />
-                </template>
-            </div>
+  <div class="w-[85%] lg:w-[700px] mx-auto py-12 space-y-8 text-base">
+    <div class="flex justify-between">
+      <div class="space-y-2">
+        <div class="text-lg font-semibold text-ink-gray-9">
+          <span> Map Data </span>
+          <Badge v-if="data?.status" :theme="getBadgeColor(data?.status)">
+            {{ data?.status }}
+          </Badge>
         </div>
+        <div class="leading-5 text-ink-gray-7">
+          Change the mapping of columns from your file to fields in the system
+        </div>
+      </div>
+
+      <div
+        class="flex flex-col lg:flex-row space-y-2 lg:space-x-2 lg:space-y-0"
+      >
+        <Button
+          v-if="mappingUpdated"
+          label="Reset Mapping"
+          @click="resetMapping"
+        />
+        <Button
+          label="Continue"
+          variant="solid"
+          @click="$emit('updateStep', 'preview')"
+        />
+      </div>
+    </div>
+
+    <div
+      v-if="Object.keys(columnMappings).length"
+      class="border rounded-md space-y-8"
+    >
+      <div class="grid grid-cols-2 text-ink-gray-5 border-b py-2 px-4">
+        <div>Fields in File</div>
+        <div>Fields in System</div>
+      </div>
+      <div class="grid grid-cols-2 py-2 px-4 gap-y-8">
+        <template v-for="i in columnsFromFile.length" :key="i">
+          <div class="text-ink-gray-7">{{ columnsFromFile[i - 1] }}</div>
+          <Autocomplete
+            :model-value="columnMappings[columnsFromFile[i - 1]]"
+            :options="columnsFromSystem"
+            placeholder="Select field"
+            @update:model-value="(val: any) => updateColumnMappings(i, val)"
+          />
+        </template>
+      </div>
     </div>
+  </div>
 </template>
 <script setup lang="ts">
-import type { DataImport, DataImports } from './types';
+import type { DataImport, DataImports } from './types'
 import { fieldsToIgnore, getBadgeColor, getPreviewData } from './dataImport'
-import { computed, nextTick, onMounted, ref } from 'vue';
-import { toast } from "../../src/components/Toast/toast"
-import Autocomplete from '../../src/components/Autocomplete/Autocomplete.vue';
-import Badge from '../../src/components/Badge/Badge.vue';
-import Button from '../../src/components/Button/Button.vue';
+import { computed, nextTick, onMounted, ref } from 'vue'
+import { toast } from '../../src/components/Toast/toast'
+import Autocomplete from '../../src/components/Autocomplete/Autocomplete.vue'
+import Badge from '../../src/components/Badge/Badge.vue'
+import Button from '../../src/components/Button/Button.vue'
 
-const previewData = ref<any>(null);
+const previewData = ref<any>(null)
 const emit = defineEmits(['updateStep'])
-const columnMappings = ref<Record<string, string>>({});
-const mappingUpdated = ref(false);
+const columnMappings = ref<Record<string, string>>({})
+const mappingUpdated = ref(false)
 
 const props = defineProps<{
-    dataImports: DataImports
-    data: DataImport
-    fields: any
+  dataImports: DataImports
+  data: DataImport
+  fields: any
 }>()
 
 onMounted(async () => {
-    previewData.value = await getPreviewData(props.data.name!, props.data.import_file, props.data.google_sheets_url);
-    initializeColumnMappings();
-});
+  previewData.value = await getPreviewData(
+    props.data.name!,
+    props.data.import_file,
+    props.data.google_sheets_url,
+  )
+  initializeColumnMappings()
+})
 
 const initializeColumnMappings = () => {
-    const mappings: Record<string, string> = {};
-    let columnToFieldMap = []
-    if (props.data?.template_options)
-        columnToFieldMap = JSON.parse(props.data?.template_options)?.["column_to_field_map"];
-
-        if (Object.keys(columnToFieldMap).length > 0)
-            mappingUpdated.value = true;
-
-        columnsFromFile.value.forEach((col: string, index: number) => {
-        if (columnToFieldMap && columnToFieldMap[index])
-            mappings[col] = getMappedColumnName(columnToFieldMap[index]);
-        else
-            mappings[col] = col;
-    });
-
-    columnMappings.value = mappings;
+  const mappings: Record<string, string> = {}
+  let columnToFieldMap = []
+  if (props.data?.template_options)
+    columnToFieldMap = JSON.parse(props.data?.template_options)?.[
+      'column_to_field_map'
+    ]
+
+  if (Object.keys(columnToFieldMap).length > 0) mappingUpdated.value = true
+
+  columnsFromFile.value.forEach((col: string, index: number) => {
+    if (columnToFieldMap && columnToFieldMap[index])
+      mappings[col] = getMappedColumnName(columnToFieldMap[index])
+    else mappings[col] = col
+  })
+
+  columnMappings.value = mappings
 }
 
 const getMappedColumnName = (fieldname: string) => {
-    const field = columnsFromSystem.value.find((f: any) => f.value == fieldname);
-    if (field)
-        return field.label;
-    return fieldname;
+  const field = columnsFromSystem.value.find((f: any) => f.value == fieldname)
+  if (field) return field.label
+  return fieldname
 }
 
 const updateColumnMappings = (index: number, value: any) => {
-    if (!value) return;
-    mappingUpdated.value = true;
-    let templateOptions = props.data?.template_options ? JSON.parse(props.data?.template_options) : {};
-    let columnToFieldMap = templateOptions["column_to_field_map"] || {};
-    columnToFieldMap[index - 1] = value.value;
-
-    props.dataImports.setValue.submit({
-        ...props.data,
-        template_options: JSON.stringify({
-            ...templateOptions,
-            column_to_field_map: columnToFieldMap
+  if (!value) return
+  mappingUpdated.value = true
+  let templateOptions = props.data?.template_options
+    ? JSON.parse(props.data?.template_options)
+    : {}
+  let columnToFieldMap = templateOptions['column_to_field_map'] || {}
+  columnToFieldMap[index - 1] = value.value
+
+  props.dataImports.setValue.submit(
+    {
+      ...props.data,
+      template_options: JSON.stringify({
+        ...templateOptions,
+        column_to_field_map: columnToFieldMap,
+      }),
+    },
+    {
+      onSuccess: (data: DataImport) => {
+        emit('updateStep', 'map', { ...data })
+        nextTick(() => {
+          initializeColumnMappings()
         })
-    }, {
-        onSuccess: (data: DataImport) => {
-            emit('updateStep', 'map', { ...data })
-            nextTick(() => {
-                initializeColumnMappings()
-            })
-        },
-        onError: (error: any) => {
-            toast.error(error.messages?.[0] || error)
-            console.error("Error updating column mappings:", error);
-        }
-    })
+      },
+      onError: (error: any) => {
+        toast.error(error.messages?.[0] || error)
+        console.error('Error updating column mappings:', error)
+      },
+    },
+  )
 }
 
 const columnsFromFile = computed(() => {
-    const columns: string[] = [];
-    previewData.value?.columns.forEach((col: any) => {
-        if (col.header_title != "Sr. No")
-            columns.push(col.header_title);
-    })
-    return columns;
+  const columns: string[] = []
+  previewData.value?.columns.forEach((col: any) => {
+    if (col.header_title != 'Sr. No') columns.push(col.header_title)
+  })
+  return columns
 })
 
 const columnsFromSystem = computed(() => {
   const parent = props.data!.reference_doctype
   const docs = props.fields.data?.docs || []
 
-  return docs
-    .map((doc: any) => {
-      const isParent = doc.name === parent
-
-      const columns = doc.fields
-        .filter((f: any) => !fieldsToIgnore.includes(f.fieldtype))
-        .map((f: any) => ({
-          value: f.fieldname,
-          label: isParent
-            ? f.label
-            : `${f.label} (${getChildTableName(parent, doc.name)})`,
-        }))
-
-      return [
-        { value: "name", label: "ID" },
-        ...columns,
-      ]
-    })
-    .flat()
+  return docs.flatMap((doc: any) => {
+    const isParent = doc.name === parent
+
+    const columns = doc.fields
+      .filter((f: any) => !fieldsToIgnore.includes(f.fieldtype))
+      .map((f: any) => ({
+        value: f.fieldname,
+        label: isParent
+          ? f.label
+          : `${f.label} (${getChildTableName(parent, doc.name)})`,
+      }))
+
+    return [{ value: 'name', label: 'ID' }, ...columns]
+  })
 })
 
 const resetMapping = () => {
-    let templateOptions = props.data?.template_options ? JSON.parse(props.data?.template_options) : {};
-    props.dataImports.setValue.submit({
-        ...props.data,
-        template_options: JSON.stringify({
-            ...templateOptions,
-            column_to_field_map: {}
+  let templateOptions = props.data?.template_options
+    ? JSON.parse(props.data?.template_options)
+    : {}
+  props.dataImports.setValue.submit(
+    {
+      ...props.data,
+      template_options: JSON.stringify({
+        ...templateOptions,
+        column_to_field_map: {},
+      }),
+    },
+    {
+      onSuccess: (data: DataImport) => {
+        emit('updateStep', 'map', { ...data })
+        nextTick(() => {
+          initializeColumnMappings()
         })
-    }, {
-        onSuccess: (data: DataImport) => {
-            emit('updateStep', 'map', { ...data })
-            nextTick(() => {
-                initializeColumnMappings()
-            })
-        },
-        onError: (error: any) => {
-            toast.error(error.messages?.[0] || error)
-            console.error("Error resetting column mappings:", error);
-        }
-    })
+      },
+      onError: (error: any) => {
+        toast.error(error.messages?.[0] || error)
+        console.error('Error resetting column mappings:', error)
+      },
+    },
+  )
 }
 
 const getChildTableName = (parent: string, child: string) => {
-    let parentFields = props.fields.data?.docs.find((doc: any) => doc.name == parent)?.fields || [];
+  let parentFields =
+    props.fields.data?.docs.find((doc: any) => doc.name == parent)?.fields || []
 
-    let childField = parentFields.filter((field: any) => field.options == child)[0]
-    return childField?.label || child;
+  let childField = parentFields.filter(
+    (field: any) => field.options == child,
+  )[0]
+  return childField?.label || child
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/frappe/DataImport/PreviewStep.vue b/frappe/DataImport/PreviewStep.vue
index 1ed47084d..bb2c886bd 100644
--- a/frappe/DataImport/PreviewStep.vue
+++ b/frappe/DataImport/PreviewStep.vue
@@ -1,373 +1,410 @@
 <template>
-    <div class="text-base h-full flex flex-col w-[90%] lg:w-[700px] mx-auto py-12 space-y-10">
-        <div class="flex flex-col space-y-1">
-            <div class="flex items-center justify-between text-ink-gray-7">
-                <div class="flex items-center space-x-2 text-lg font-semibold text-ink-gray-9">
-                    <span>
-                        Review and Import
-                    </span>
-
-                    <Badge :theme="getBadgeColor(data.status)">
-                        {{ data.status }}
-                    </Badge>
-                </div>
-                <Button 
-                    v-if="data.status != 'Success'" 
-                    :label="data.status != 'Pending' ? 'Retry' : 'Import'" 
-                    variant="solid" @click="startImport" />
-                <Button v-else-if="listRoute" label="Done" @click="redirectToList()" />
-            </div>
-            <div class="leading-5 text-ink-gray-7">
-                Verify the data before starting the import process
-            </div>
+  <div
+    class="text-base h-full flex flex-col w-[90%] lg:w-[700px] mx-auto py-12 space-y-10"
+  >
+    <div class="flex flex-col space-y-1">
+      <div class="flex items-center justify-between text-ink-gray-7">
+        <div
+          class="flex items-center space-x-2 text-lg font-semibold text-ink-gray-9"
+        >
+          <span> Review and Import </span>
+
+          <Badge :theme="getBadgeColor(data.status)">
+            {{ data.status }}
+          </Badge>
         </div>
+        <Button
+          v-if="data.status != 'Success'"
+          :label="data.status != 'Pending' ? 'Retry' : 'Import'"
+          variant="solid"
+          @click="startImport"
+        />
+        <Button v-else-if="listRoute" label="Done" @click="redirectToList()" />
+      </div>
+      <div class="leading-5 text-ink-gray-7">
+        Verify the data before starting the import process
+      </div>
+    </div>
 
-        <div v-if="mapping.length" class="space-y-2">
-            <div class="text-ink-gray-5 text-sm">
-                Column Mapping
-            </div>
-            <div class="border rounded-md bg-surface-gray-2 p-4 space-y-4 text-sm text-ink-gray-7">
-                <div v-for="map in mapping" class="grid grid-cols-[40%,10%,40%] lg:grid-cols-3 space-x-3 items-center">
-                    <div class="">
-                        {{ map[0] }}
-                    </div>
-                    <div class="flex justify-end">
-                        <FeatherIcon name="arrow-right" class="inline size-4 text-ink-gray-5" />
-                    </div>
-                    <div>
-                        {{ map[1] }}
-                    </div>
-                </div>
-            </div>
+    <div v-if="mapping.length" class="space-y-2">
+      <div class="text-ink-gray-5 text-sm">Column Mapping</div>
+      <div
+        class="border rounded-md bg-surface-gray-2 p-4 space-y-4 text-sm text-ink-gray-7"
+      >
+        <div
+          v-for="map in mapping"
+          class="grid grid-cols-[40%,10%,40%] lg:grid-cols-3 space-x-3 items-center"
+        >
+          <div class="">
+            {{ map[0] }}
+          </div>
+          <div class="flex justify-end">
+            <FeatherIcon
+              name="arrow-right"
+              class="inline size-4 text-ink-gray-5"
+            />
+          </div>
+          <div>
+            {{ map[1] }}
+          </div>
         </div>
+      </div>
+    </div>
 
-        <div v-if="warnings.length" class="space-y-2">
-            <div class="text-ink-gray-5 text-sm">
-                Warnings
-            </div>
-            <div class="rounded-md bg-surface-amber-2 p-2 space-y-2 text-xs">
-                <div v-for="warning in warnings" class="flex items-center space-x-2">
-                    <FeatherIcon name="alert-circle" class="size-3 text-ink-amber-3" />
-                    <div v-html="warning.message" class="text-ink-amber-3"></div>
-                </div>
-            </div>
+    <div v-if="warnings.length" class="space-y-2">
+      <div class="text-ink-gray-5 text-sm">Warnings</div>
+      <div class="rounded-md bg-surface-amber-2 p-2 space-y-2 text-xs">
+        <div v-for="warning in warnings" class="flex items-center space-x-2">
+          <FeatherIcon name="alert-circle" class="size-3 text-ink-amber-3" />
+          <div v-html="warning.message" class="text-ink-amber-3"></div>
         </div>
+      </div>
+    </div>
 
-        <div v-if="preview?.data?.length" class="border rounded-md overflow-x-auto">
-            <table class="divide-y">
-                <thead class="rounded-t-md">
-                    <tr>
-                        <th
-                            v-for="column in previewColumns"
-                            :key="column.key"
-                            :style="{ minWidth: column.width, textAlign: column.align }"
-                            class="p-2 text-left text-sm text-ink-gray-5"
-                            :class="{
-                                'border-r': column.key != previewColumns[previewColumns.length -1].key,
-                                'w-full': column.key == previewColumns[previewColumns.length -1].key
-                            }"
-                        >
-                            {{ column.label }}
-                        </th>
-                    </tr>
-                </thead>
-                <tbody class="bg-surface-white divide-y divide-surface-gray-2">
-                    <tr v-for="(row, rowIndex) in previewData" :key="rowIndex">
-                        <td
-                            v-for="column in previewColumns"
-                            :key="column.key"
-                            :style="{ minWidth: column.width, textAlign: column.align }"
-                            class="px-3 py-2 text-sm text-ink-gray-7 align-top"
-                            :class="{
-                                'border-r': column.key != previewColumns[previewColumns.length -1].key
-                            }"
-                        >
-                            <div class="leading-5 text-sm">
-                                {{ row[column.key] }}
-                            </div>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
+    <div v-if="preview?.data?.length" class="border rounded-md overflow-x-auto">
+      <table class="divide-y">
+        <thead class="rounded-t-md">
+          <tr>
+            <th
+              v-for="column in previewColumns"
+              :key="column.key"
+              :style="{ minWidth: column.width, textAlign: column.align }"
+              class="p-2 text-left text-sm text-ink-gray-5"
+              :class="{
+                'border-r':
+                  column.key != previewColumns[previewColumns.length - 1].key,
+                'w-full':
+                  column.key == previewColumns[previewColumns.length - 1].key,
+              }"
+            >
+              {{ column.label }}
+            </th>
+          </tr>
+        </thead>
+        <tbody class="bg-surface-white divide-y divide-surface-gray-2">
+          <tr v-for="(row, rowIndex) in previewData" :key="rowIndex">
+            <td
+              v-for="column in previewColumns"
+              :key="column.key"
+              :style="{ minWidth: column.width, textAlign: column.align }"
+              class="px-3 py-2 text-sm text-ink-gray-7 align-top"
+              :class="{
+                'border-r':
+                  column.key != previewColumns[previewColumns.length - 1].key,
+              }"
+            >
+              <div class="leading-5 text-sm">
+                {{ row[column.key] }}
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
 
-        <div v-if="data.status != 'Pending' && importLogs.length" class="space-y-4">
-
-            <div class="font-semibold text-ink-gray-9">
-                Import Logs
-            </div>
-
-            <div class="rounded-md p-2" :class="importBannerClass">
-                {{ importSuccessCount }} {{ importSuccessCount == 1 ? 'row' : 'rows' }} imported successfully, {{ importErrorCount }} {{ importErrorCount == 1 ? 'row' : 'rows' }} failed.
-            </div>
-
-            <TabButtons :buttons="tabButtons" v-model="activeTab" class="w-fit" />
-
-            <div v-if="filteredLogs.length" class="border rounded-md overflow-x-auto">
-                <table class="table-fixed w-full divide-y">
-                    <thead class="rounded-t-md">
-                        <tr>
-                            <th
-                                class="p-2 text-left text-sm text-ink-gray-5 w-20 border-r text-center"
-                            >
-                                Row no.
-                            </th>
-                            <th class="p-2 text-left text-sm text-ink-gray-5 w-[80%]">
-                                Message
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody class="bg-surface-white divide-y divide-surface-gray-2">
-                        <tr v-for="(row, rowIndex) in filteredLogs" :key="rowIndex" class="group">
-                            <td class="px-3 py-2 text-sm text-ink-gray-7 border-r">
-                                <div class="flex items-center justify-center space-x-2">
-                                    <div v-if="row.success" class="size-1.5 bg-surface-green-3 rounded"></div>
-                                    <div v-else class="size-1.5 bg-surface-red-5 rounded"></div>
-                                    <div>
-                                        {{ JSON.parse(row["row_indexes"])[0] - 1 }}
-                                    </div>
-                                </div>
-                            </td>
-                            
-                            <td class="px-3 py-2 text-sm text-ink-gray-7 w-full">
-                                <span v-if="rowMessage(row)" v-html="rowMessage(row)">
-                                </span>
-                                <span v-else-if="!rowMessage(row) && !row.success">
-                                    Failed to import
-                                </span>
-                                <span v-else-if="row.success">
-                                    Successfully imported 
-                                    <span @click="redirectToPage(row.docname)" :class="{
-                                        'cursor-pointer underline': pageRoute
-                                    }"> {{ row.docname }} </span>
-                                </span>
-                            </td>
-                            <td class="px-3 py-2 text-ink-gray-5 float-right invisible group-hover:visible">
-                                <Popover v-if="row.exception" trigger="hover" placement="left-start">
-                                    <template #target>
-                                        <FeatherIcon name="info" class="size-4" />
-                                    </template>
-                                    <template #body-main>
-                                        <div class="w-[500px] p-2 text-xs leading-5 font-mono">
-                                            {{ row.exception }}
-                                        </div>
-                                    </template>
-                                </Popover>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-            <div v-else class="text-ink-gray-5 text-sm">
-                No logs to display.
-            </div>
-        </div>
+    <div v-if="data.status != 'Pending' && importLogs.length" class="space-y-4">
+      <div class="font-semibold text-ink-gray-9">Import Logs</div>
+
+      <div class="rounded-md p-2" :class="importBannerClass">
+        {{ importSuccessCount }}
+        {{ importSuccessCount == 1 ? 'row' : 'rows' }} imported successfully,
+        {{ importErrorCount }}
+        {{ importErrorCount == 1 ? 'row' : 'rows' }} failed.
+      </div>
+
+      <TabButtons :buttons="tabButtons" v-model="activeTab" class="w-fit" />
+
+      <div v-if="filteredLogs.length" class="border rounded-md overflow-x-auto">
+        <table class="table-fixed w-full divide-y">
+          <thead class="rounded-t-md">
+            <tr>
+              <th
+                class="p-2 text-left text-sm text-ink-gray-5 w-20 border-r text-center"
+              >
+                Row no.
+              </th>
+              <th class="p-2 text-left text-sm text-ink-gray-5 w-[80%]">
+                Message
+              </th>
+            </tr>
+          </thead>
+          <tbody class="bg-surface-white divide-y divide-surface-gray-2">
+            <tr
+              v-for="(row, rowIndex) in filteredLogs"
+              :key="rowIndex"
+              class="group"
+            >
+              <td class="px-3 py-2 text-sm text-ink-gray-7 border-r">
+                <div class="flex items-center justify-center space-x-2">
+                  <div
+                    v-if="row.success"
+                    class="size-1.5 bg-surface-green-3 rounded"
+                  ></div>
+                  <div v-else class="size-1.5 bg-surface-red-5 rounded"></div>
+                  <div>
+                    {{ JSON.parse(row['row_indexes'])[0] - 1 }}
+                  </div>
+                </div>
+              </td>
+
+              <td class="px-3 py-2 text-sm text-ink-gray-7 w-full">
+                <span v-if="rowMessage(row)" v-html="rowMessage(row)"> </span>
+                <span v-else-if="!rowMessage(row) && !row.success">
+                  Failed to import
+                </span>
+                <span v-else-if="row.success">
+                  Successfully imported
+                  <span
+                    @click="redirectToPage(row.docname)"
+                    :class="{
+                      'cursor-pointer underline': pageRoute,
+                    }"
+                  >
+                    {{ row.docname }}
+                  </span>
+                </span>
+              </td>
+              <td
+                class="px-3 py-2 text-ink-gray-5 float-right invisible group-hover:visible"
+              >
+                <Popover
+                  v-if="row.exception"
+                  trigger="hover"
+                  placement="left-start"
+                >
+                  <template #target>
+                    <FeatherIcon name="info" class="size-4" />
+                  </template>
+                  <template #body-main>
+                    <div class="w-[500px] p-2 text-xs leading-5 font-mono">
+                      {{ row.exception }}
+                    </div>
+                  </template>
+                </Popover>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div v-else class="text-ink-gray-5 text-sm">No logs to display.</div>
     </div>
+  </div>
 </template>
 <script setup lang="ts">
 import { getPreviewData, getBadgeColor } from './dataImport'
-import { computed, nextTick, onMounted, ref, watch } from 'vue';
-import type { DataImport, DataImports } from './types';
-import Badge from '../../src/components/Badge/Badge.vue';
-import Button from '../../src/components/Button/Button.vue';
-import call from '../../src/utils/call';
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import type { DataImport, DataImports } from './types'
+import Badge from '../../src/components/Badge/Badge.vue'
+import Button from '../../src/components/Button/Button.vue'
+import call from '../../src/utils/call'
 import FeatherIcon from '../../src/components/FeatherIcon.vue'
-import initSocket from "../../src/utils/socketio";
-import Popover from "../../src/components/Popover/Popover.vue"
-import TabButtons from '../../src/components/TabButtons/TabButtons.vue';
+import initSocket from '../../src/utils/socketio'
+import Popover from '../../src/components/Popover/Popover.vue'
+import TabButtons from '../../src/components/TabButtons/TabButtons.vue'
 
-const preview = ref<any>(null);
+const preview = ref<any>(null)
 const emit = defineEmits(['updateStep'])
-const importLogs = ref<any[]>([]);
-const filteredLogs = ref<any[]>([]);
-const activeTab = ref('all');
+const importLogs = ref<any[]>([])
+const filteredLogs = ref<any[]>([])
+const activeTab = ref('all')
 
 const props = defineProps<{
-    dataImports: DataImports
-    data: DataImport
-    fields: any
-    doctypeMap: Record<string, { title: string; listRoute?: string; pageRoute?: string }>
+  dataImports: DataImports
+  data: DataImport
+  fields: any
+  doctypeMap: Record<
+    string,
+    { title: string; listRoute?: string; pageRoute?: string }
+  >
 }>()
 
 onMounted(async () => {
-    let socket = initSocket();
-    socket.on("data_import_refresh", (data: { data_import: string }) => {
-        reloadPreviewData(data.data_import);
-    })
-
-    if (!props.data?.name) return;
-    preview.value = await getPreviewData(
-        props.data.name, props.data.import_file, props.data.google_sheets_url
-    );
-    if (props.data.status != "Pending") {
-        getImportLogs();
-    }
-});
+  let socket = initSocket()
+  socket.on('data_import_refresh', (data: { data_import: string }) => {
+    reloadPreviewData(data.data_import)
+  })
+
+  if (!props.data?.name) return
+  preview.value = await getPreviewData(
+    props.data.name,
+    props.data.import_file,
+    props.data.google_sheets_url,
+  )
+  if (props.data.status != 'Pending') {
+    getImportLogs()
+  }
+})
 
 const reloadPreviewData = (dataImport: string) => {
-    if (dataImport != props.data.name) return;
-    nextTick(() => {
-        props.dataImports.reload()
-        nextTick(async () => {
-            let updatedData = props.dataImports.data?.find(d => d.name === props.data.name
-            )
-            emit('updateStep', 'preview', { ...updatedData })
-            getImportLogs()
-        })
+  if (dataImport != props.data.name) return
+  nextTick(() => {
+    props.dataImports.reload()
+    nextTick(async () => {
+      let updatedData = props.dataImports.data?.find(
+        (d) => d.name === props.data.name,
+      )
+      emit('updateStep', 'preview', { ...updatedData })
+      getImportLogs()
     })
+  })
 }
 
 const previewColumns = computed(() => {
-    const columns: any[] = [];
-    preview.value?.columns.forEach((col: any, index: number) => {
-        let align = 'left';
-        let width = "300px"
-        if (index == 0) {
-            col.header_title = "No"
-            align = 'center';
-            width = "60px"
-        } else if (col.header_title == "ID") {
-            width = "150px"
-        }
-        columns.push({
-            key: col.header_title,
-            label: col.header_title,
-            width: width,
-            align: align,
-        });
-    });
-    return columns;
+  const columns: any[] = []
+  preview.value?.columns.forEach((col: any, index: number) => {
+    let align = 'left'
+    let width = '300px'
+    if (index == 0) {
+      col.header_title = 'No'
+      align = 'center'
+      width = '60px'
+    } else if (col.header_title == 'ID') {
+      width = '150px'
+    }
+    columns.push({
+      key: col.header_title,
+      label: col.header_title,
+      width: width,
+      align: align,
+    })
+  })
+  return columns
 })
 
 const previewData = computed(() => {
-    const data: Record<string, any>[] = [];
-    preview.value?.data.forEach((row: any) => {
-        const dataMap: Record<string, any> = {};
-        Object.keys(row).forEach((key: any, index: number) => {
-            let columnLabel = getColumnLabel(index)
-            let mappedFieldIndex = getMappedColumnName(index);
-            if (columnLabel == "No") {
-                dataMap[columnLabel] = row[key] - 1;
-            } else if (mappedFieldIndex) {
-                dataMap[columnLabel] = row[mappedFieldIndex];
-            } else {
-                dataMap[columnLabel] = row[key];
-            }
-        })
-        data.push(dataMap);
+  const data: Record<string, any>[] = []
+  preview.value?.data.forEach((row: any) => {
+    const dataMap: Record<string, any> = {}
+    Object.keys(row).forEach((key: any, index: number) => {
+      let columnLabel = getColumnLabel(index)
+      let mappedFieldIndex = getMappedColumnName(index)
+      if (columnLabel == 'No') {
+        dataMap[columnLabel] = row[key] - 1
+      } else if (mappedFieldIndex) {
+        dataMap[columnLabel] = row[mappedFieldIndex]
+      } else {
+        dataMap[columnLabel] = row[key]
+      }
     })
-    return data;
+    data.push(dataMap)
+  })
+  return data
 })
 
 const getColumnLabel = (index: number) => {
-    return preview.value?.columns[index]?.header_title || `Column ${index + 1}`;
+  return preview.value?.columns[index]?.header_title || `Column ${index + 1}`
 }
 
 const getMappedColumnName = (index: number) => {
-    let mappedColumn = preview.value?.columns[index]?.map_to_field
-    if (!mappedColumn) return null
-    let mappedColumnLabel = preview.value?.columns[index]?.df?.label
-    let mappedColumnIndex = preview.value?.columns.filter((col: any) => col.header_title == mappedColumnLabel)[0]?.column_number
-    return mappedColumnIndex;
+  let mappedColumn = preview.value?.columns[index]?.map_to_field
+  if (!mappedColumn) return null
+  let mappedColumnLabel = preview.value?.columns[index]?.df?.label
+  let mappedColumnIndex = preview.value?.columns.filter(
+    (col: any) => col.header_title == mappedColumnLabel,
+  )[0]?.column_number
+  return mappedColumnIndex
 }
 
 const startImport = () => {
-    call("frappe.core.doctype.data_import.data_import.form_start_import", {
-        data_import: props.data.name
-    })
+  call('frappe.core.doctype.data_import.data_import.form_start_import', {
+    data_import: props.data.name,
+  })
 }
 
 const getImportLogs = () => {
-    call("frappe.core.doctype.data_import.data_import.get_import_logs", {
-        data_import: props.data.name
-    }).then((data: any) =>  {
-        importLogs.value = data;
-        filteredLogs.value = data;
-    })
+  call('frappe.core.doctype.data_import.data_import.get_import_logs', {
+    data_import: props.data.name,
+  }).then((data: any) => {
+    importLogs.value = data
+    filteredLogs.value = data
+  })
 }
 
 const updateImportLogs = () => {
-    if (activeTab.value == 'all') {
-        filteredLogs.value = importLogs.value;
-    } else if (activeTab.value == 'successful') {
-        filteredLogs.value = importLogs.value.filter(log => log.success);
-    } else if (activeTab.value == 'failed') {
-        filteredLogs.value = importLogs.value.filter(log => !log.success);
-    }
+  if (activeTab.value == 'all') {
+    filteredLogs.value = importLogs.value
+  } else if (activeTab.value == 'successful') {
+    filteredLogs.value = importLogs.value.filter((log) => log.success)
+  } else if (activeTab.value == 'failed') {
+    filteredLogs.value = importLogs.value.filter((log) => !log.success)
+  }
 }
 
 watch(activeTab, () => {
-    updateImportLogs();
+  updateImportLogs()
 })
 
 const importSuccessCount = computed(() => {
-    if (!importLogs.value.length) return 0;
-    return importLogs.value.filter(log => log.success).length
+  if (!importLogs.value.length) return 0
+  return importLogs.value.filter((log) => log.success).length
 })
 
 const importErrorCount = computed(() => {
-    if (!importLogs.value.length) return 0;
-    return importLogs.value.filter(log => !log.success).length
+  if (!importLogs.value.length) return 0
+  return importLogs.value.filter((log) => !log.success).length
 })
 
 const importBannerClass = computed(() => {
-    if (importErrorCount.value == 0) {
-        return 'bg-surface-green-2 text-ink-green-3'
-    } else if (importSuccessCount.value == 0) {
-        return 'bg-surface-red-2 text-ink-red-3'
-    } else {
-        return 'bg-surface-amber-2 text-ink-amber-3'
-    }
+  if (importErrorCount.value == 0) {
+    return 'bg-surface-green-2 text-ink-green-3'
+  } else if (importSuccessCount.value == 0) {
+    return 'bg-surface-red-2 text-ink-red-3'
+  } else {
+    return 'bg-surface-amber-2 text-ink-amber-3'
+  }
 })
 
 const mapping = computed(() => {
-    let warningMap: string[][] = [];
-    if (!preview.value?.warnings?.length) return [];
-    preview.value.warnings.forEach((warning: any) => {
-        if (warning.type == "info") {
-            const regex = /<strong>(.*?)<\/strong>/g;
-            let match;
-            const fields = [];
-            while ((match = regex.exec(warning.message)) !== null) {
-                fields.push(match[1]);
-            }
-            warningMap.push(fields);
-        }
-    })
-    return warningMap;
+  let warningMap: string[][] = []
+  if (!preview.value?.warnings?.length) return []
+  preview.value.warnings.forEach((warning: any) => {
+    if (warning.type == 'info') {
+      const regex = /<strong>(.*?)<\/strong>/g
+      let match
+      const fields = []
+      while ((match = regex.exec(warning.message)) !== null) {
+        fields.push(match[1])
+      }
+      warningMap.push(fields)
+    }
+  })
+  return warningMap
 })
 
 const warnings = computed(() => {
-    return preview.value?.warnings?.filter((warning: any) => warning.type != "info") || [];
+  return (
+    preview.value?.warnings?.filter((warning: any) => warning.type != 'info') ||
+    []
+  )
 })
 
 const listRoute = computed(() => {
-    return props.doctypeMap[props.data.reference_doctype]?.listRoute
+  return props.doctypeMap[props.data.reference_doctype]?.listRoute
 })
 
 const redirectToList = () => {
-    if (!listRoute.value) return;
-    window.location.href = listRoute.value;
+  if (!listRoute.value) return
+  window.location.href = listRoute.value
 }
 
 const pageRoute = computed(() => {
-    return props.doctypeMap[props.data.reference_doctype]?.pageRoute
+  return props.doctypeMap[props.data.reference_doctype]?.pageRoute
 })
 
 const redirectToPage = (docname: string) => {
-    if (!pageRoute.value) return;
-    window.location.href = pageRoute.value.replace('docname', docname);
+  if (!pageRoute.value) return
+  window.location.href = pageRoute.value.replace('docname', docname)
 }
 
 const tabButtons = computed(() => {
-    return [
-        { label: 'All', value: 'all' },
-        { label: 'Successful', value: 'successful' },
-        { label: 'Failed', value: 'failed' },
-    ]
+  return [
+    { label: 'All', value: 'all' },
+    { label: 'Successful', value: 'successful' },
+    { label: 'Failed', value: 'failed' },
+  ]
 })
 
 const rowMessage = (row: any) => {
-    return JSON.parse(row.messages)?.[0]?.message
+  return JSON.parse(row.messages)?.[0]?.message
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/frappe/DataImport/TemplateModal.vue b/frappe/DataImport/TemplateModal.vue
index 88184bc55..2ddfb4637 100644
--- a/frappe/DataImport/TemplateModal.vue
+++ b/frappe/DataImport/TemplateModal.vue
@@ -1,215 +1,259 @@
 <template>
-    <Dialog v-model="show" :options="{
-        title: 'Export Data',
-        size: '2xl',
-    }">
-        <template #body-content>
-            <div class="text-base space-y-5">
-                <div class="grid grid-cols-2 gap-5">
-                    <FormControl
-                        label="File Type"
-                        v-model="fileType"
-                        :options="['Excel', 'CSV']"
-                        type="select"
-                    />
+  <Dialog
+    v-model="show"
+    :options="{
+      title: 'Export Data',
+      size: '2xl',
+    }"
+  >
+    <template #body-content>
+      <div class="text-base space-y-5">
+        <div class="grid grid-cols-2 gap-5">
+          <FormControl
+            label="File Type"
+            v-model="fileType"
+            :options="['Excel', 'CSV']"
+            type="select"
+          />
+        </div>
+        <div class="border-t">
+          <p class="mt-2 text-ink-gray-5">
+            Select the fields you want to include in the template.
+          </p>
+          <div class="space-x-2 mt-2 mb-5">
+            <Button label="Select All" @click="selectAllFields" />
+            <Button
+              label="Select Mandatory Fields"
+              @click="selectMandatoryFields"
+            />
+            <Button label="Unselect All" @click="unselectAllFields" />
+          </div>
+          <div class="space-y-8">
+            <div
+              v-for="doctype in Object.keys(fields.data)"
+              :key="doctype"
+              class="flex flex-col space-y-2"
+            >
+              <div class="text-ink-gray-5">
+                {{ doctype }}
+              </div>
+              <div class="grid grid-cols-2 gap-5">
+                <div
+                  v-for="field in fields.data[doctype]"
+                  :key="field.fieldname"
+                  class="flex items-center space-x-2"
+                >
+                  <Checkbox
+                    :id="`checkbox-${doctype}-${field.fieldname}`"
+                    :checked="fieldSelection[doctype][field.fieldname]"
+                    @change="
+                      (e: Event) =>
+                        (fieldSelection[doctype][field.fieldname] = (
+                          e.target as HTMLInputElement
+                        ).checked)
+                    "
+                  />
+                  <label
+                    :for="`checkbox-${doctype}-${field.fieldname}`"
+                    :class="{
+                      'text-ink-red-3': field.reqd,
+                    }"
+                  >
+                    {{ field.label || field.fieldname }}
+                  </label>
                 </div>
-                <div class="border-t">
-                    <p class="mt-2 text-ink-gray-5">
-                        Select the fields you want to include in the template.
-                    </p>
-                    <div class="space-x-2 mt-2 mb-5">
-                        <Button label="Select All" @click="selectAllFields" />
-                        <Button label="Select Mandatory Fields" @click="selectMandatoryFields" />
-                        <Button label="Unselect All" @click="unselectAllFields" />
-                    </div>
-                    <div class="space-y-8">
-                        <div v-for="doctype in Object.keys(fields.data)" :key="doctype" class="flex flex-col space-y-2">
-                            <div class="text-ink-gray-5">
-                                {{ doctype }}
-                            </div>
-                            <div class="grid grid-cols-2 gap-5">
-                                <div v-for="field in fields.data[doctype]" :key="field.fieldname" class="flex items-center space-x-2">
-                                    <Checkbox
-                                        :id="`checkbox-${doctype}-${field.fieldname}`"
-                                        :checked="fieldSelection[doctype][field.fieldname]"
-                                        @change="(e: Event) => fieldSelection[doctype][field.fieldname] = (e.target as HTMLInputElement).checked"
-                                        />
-                                    <label
-                                        :for="`checkbox-${doctype}-${field.fieldname}`"
-                                        :class="{
-                                            'text-ink-red-3': field.reqd
-                                        }">
-                                        {{ field.label || field.fieldname }}
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </template>
-        <template #actions="{ close }">
-            <div class="flex justify-end space-x-2">
-                <Button label="Export" variant="solid" @click="handleExport" />
-                <Button label="Cancel" @click="close" />
+              </div>
             </div>
-        </template>
-    </Dialog>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #actions="{ close }">
+      <div class="flex justify-end space-x-2">
+        <Button label="Export" variant="solid" @click="handleExport" />
+        <Button label="Cancel" @click="close" />
+      </div>
+    </template>
+  </Dialog>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
 import type { DocField } from './types'
 import { createResource } from '../../src/resources'
 import { fieldsToIgnore, getChildTableName } from './dataImport'
-import Button from "../../src/components/Button/Button.vue"
-import Checkbox from "../../src/components/Checkbox/Checkbox.vue"
-import Dialog from "../../src/components/Dialog/Dialog.vue"
-import FormControl from "../../src/components/FormControl/FormControl.vue"
+import Button from '../../src/components/Button/Button.vue'
+import Checkbox from '../../src/components/Checkbox/Checkbox.vue'
+import Dialog from '../../src/components/Dialog/Dialog.vue'
+import FormControl from '../../src/components/FormControl/FormControl.vue'
 
 const show = defineModel<boolean>({ required: true, default: false })
 const fileType = ref<'Excel' | 'CSV'>('CSV')
-const exportType = ref<'All Records' | '5 Records' | 'Blank Template'>('Blank Template')
+const exportType = ref<'All Records' | '5 Records' | 'Blank Template'>(
+  'Blank Template',
+)
 const fieldSelection = ref<Record<string, Record<string, boolean>>>({})
 const doctypeMeta = ref<any>(null)
 
 const props = defineProps<{
-    doctype: string
+  doctype: string
 }>()
 
 const fields = createResource({
-    url: "frappe.desk.form.load.getdoctype",
-    params: {
-        doctype: props.doctype,
-        with_parent: 1,
-    },
-    auto: true,
-    transform(data: any) {
-        doctypeMeta.value = data.docs
-        return transformFields(data)
-    }
+  url: 'frappe.desk.form.load.getdoctype',
+  params: {
+    doctype: props.doctype,
+    with_parent: 1,
+  },
+  auto: true,
+  transform(data: any) {
+    doctypeMeta.value = data.docs
+    return transformFields(data)
+  },
 })
 
 const transformFields = (data: any) => {
-    let doctypeMap: Record<string, { fieldname: string; label: string; reqd: number }[]> = {}
+  let doctypeMap: Record<
+    string,
+    { fieldname: string; label: string; reqd: number }[]
+  > = {}
 
-    prepareDoctypeMap(data.docs, doctypeMap)
-    addIDField(doctypeMap)
-    updateFieldSelection(doctypeMap)
+  prepareDoctypeMap(data.docs, doctypeMap)
+  addIDField(doctypeMap)
+  updateFieldSelection(doctypeMap)
 
-    return doctypeMap
+  return doctypeMap
 }
 
-const prepareDoctypeMap = (docs: any[], doctypeMap: Record<string, { fieldname: string; label: string; reqd: number }[]>) => {
-    docs.forEach((doc: any) => {
-        doctypeMap[doc.name] = doc.fields.filter((field: DocField) => {
-            return !fieldsToIgnore.includes(field.fieldtype)
-        }).map((field: DocField) => {
-            return {
-                fieldname: field.fieldname,
-                label: field.label,
-                reqd: field.reqd,
-                disabled: doc.name == props.doctype && field.reqd ? true : false,
-            }
-        })
-    })
+const prepareDoctypeMap = (
+  docs: any[],
+  doctypeMap: Record<
+    string,
+    { fieldname: string; label: string; reqd: number }[]
+  >,
+) => {
+  docs.forEach((doc: any) => {
+    doctypeMap[doc.name] = doc.fields
+      .filter((field: DocField) => {
+        return !fieldsToIgnore.includes(field.fieldtype)
+      })
+      .map((field: DocField) => {
+        return {
+          fieldname: field.fieldname,
+          label: field.label,
+          reqd: field.reqd,
+          disabled: doc.name == props.doctype && field.reqd ? true : false,
+        }
+      })
+  })
 }
 
-const addIDField = (doctypeMap: Record<string, { fieldname: string; label: string; reqd: number }[]>) => {
-    Object.keys(doctypeMap).forEach((doctype: string) => {
-        doctypeMap[doctype].unshift({
-            fieldname: "name",
-            label: "ID",
-            reqd: 1,
-        } as { fieldname: string; label: string; reqd: number })
-    })
+const addIDField = (
+  doctypeMap: Record<
+    string,
+    { fieldname: string; label: string; reqd: number }[]
+  >,
+) => {
+  Object.keys(doctypeMap).forEach((doctype: string) => {
+    doctypeMap[doctype].unshift({
+      fieldname: 'name',
+      label: 'ID',
+      reqd: 1,
+    } as { fieldname: string; label: string; reqd: number })
+  })
 }
 
-const updateFieldSelection = (doctypeMap: Record<string, { fieldname: string; label: string; reqd: number }[]>) => {
-    Object.keys(doctypeMap).forEach((doctype: string) => {
-        if (!fieldSelection.value[doctype]) {
-            fieldSelection.value[doctype] = {}
-            if (doctype == props.doctype) {
-                doctypeMap[doctype].forEach((field) => {
-                    if (field.reqd) {
-                        fieldSelection.value[doctype][field.fieldname] = true
-                    }
-                })
-            }
-        }
-    })
+const updateFieldSelection = (
+  doctypeMap: Record<
+    string,
+    { fieldname: string; label: string; reqd: number }[]
+  >,
+) => {
+  Object.keys(doctypeMap).forEach((doctype: string) => {
+    if (!fieldSelection.value[doctype]) {
+      fieldSelection.value[doctype] = {}
+      if (doctype == props.doctype) {
+        doctypeMap[doctype].forEach((field) => {
+          if (field.reqd) {
+            fieldSelection.value[doctype][field.fieldname] = true
+          }
+        })
+      }
+    }
+  })
 }
 
 const getExportURL = () => {
-    let doctype = props.doctype
-    let exportFields = getExportFields()
-    let exportRecords = getExportType()
-    let exportPageLength = exportType.value == "5 Records" ? 5 : ''
-    
-    return `/api/method/frappe.core.doctype.data_import.data_import.download_template
+  let doctype = props.doctype
+  let exportFields = getExportFields()
+  let exportRecords = getExportType()
+  let exportPageLength = exportType.value == '5 Records' ? 5 : ''
+
+  return `/api/method/frappe.core.doctype.data_import.data_import.download_template
         ?doctype=${encodeURIComponent(doctype)}
         &export_fields=${encodeURIComponent(JSON.stringify(exportFields))}
         &export_records=${encodeURIComponent(exportRecords)}
         &file_type=${encodeURIComponent(fileType.value)}
-        &export_page_length=${exportPageLength}`
-        .replace(/\s+/g, '')
+        &export_page_length=${exportPageLength}`.replace(/\s+/g, '')
 }
 
 const handleExport = async () => {
-    let url = getExportURL()
-    const response = await fetch(url)
-    const blob = await response.blob();
-    const link = document.createElement('a');
+  let url = getExportURL()
+  const response = await fetch(url)
+  const blob = await response.blob()
+  const link = document.createElement('a')
 
-    link.href = URL.createObjectURL(blob);
-    link.download = props.doctype + (fileType.value === 'CSV' ? '.csv' : '.xlsx');
-    document.body.appendChild(link);
+  link.href = URL.createObjectURL(blob)
+  link.download = props.doctype + (fileType.value === 'CSV' ? '.csv' : '.xlsx')
+  document.body.appendChild(link)
 
-    link.click();
-    document.body.removeChild(link);
+  link.click()
+  document.body.removeChild(link)
 }
 
 const getExportFields = () => {
-    let exportFields: Record<string, string[]> = {}
-    Object.keys(fieldSelection.value).forEach((doctype: string) => {
-        let doctypeName = doctype == props.doctype ? doctype : getChildTableName(doctype, props.doctype, doctypeMeta.value)
-        exportFields[doctypeName] = Object.keys(fieldSelection.value[doctype]).filter((fieldname: string) => fieldSelection.value[doctype][fieldname])
-    })
-    return exportFields
+  let exportFields: Record<string, string[]> = {}
+  Object.keys(fieldSelection.value).forEach((doctype: string) => {
+    let doctypeName =
+      doctype == props.doctype
+        ? doctype
+        : getChildTableName(doctype, props.doctype, doctypeMeta.value)
+    exportFields[doctypeName] = Object.keys(
+      fieldSelection.value[doctype],
+    ).filter((fieldname: string) => fieldSelection.value[doctype][fieldname])
+  })
+  return exportFields
 }
 
 const getExportType = () => {
-    if (exportType.value == "Blank Template")
-        return "blank_template"
-    if (exportType.value == "5 Records")
-        return "5_records"
-    return "all"
+  if (exportType.value == 'Blank Template') return 'blank_template'
+  if (exportType.value == '5 Records') return '5_records'
+  return 'all'
 }
 
 const selectAllFields = () => {
-    Object.keys(fields.data).forEach((doctype: string) => {
-        fields.data[doctype].forEach((field: DocField) => {
-            if (!fieldSelection.value[doctype]) {
-                fieldSelection.value[doctype] = {};
-            }
-            fieldSelection.value[doctype][field.fieldname] = true;
-        })
+  Object.keys(fields.data).forEach((doctype: string) => {
+    fields.data[doctype].forEach((field: DocField) => {
+      if (!fieldSelection.value[doctype]) {
+        fieldSelection.value[doctype] = {}
+      }
+      fieldSelection.value[doctype][field.fieldname] = true
     })
+  })
 }
 
 const selectMandatoryFields = () => {
-    Object.keys(fields.data).forEach((doctype: string) => {
-        fields.data[doctype].forEach((field: DocField) => {
-            fieldSelection.value[doctype][field.fieldname] = field.reqd ? true : false
-        })
+  Object.keys(fields.data).forEach((doctype: string) => {
+    fields.data[doctype].forEach((field: DocField) => {
+      fieldSelection.value[doctype][field.fieldname] = field.reqd ? true : false
     })
+  })
 }
 
 const unselectAllFields = () => {
-    Object.keys(fields.data).forEach((doctype: string) => {
-        fields.data[doctype].forEach((field: DocField) => {
-            fieldSelection.value[doctype][field.fieldname] = false
-        })
+  Object.keys(fields.data).forEach((doctype: string) => {
+    fields.data[doctype].forEach((field: DocField) => {
+      fieldSelection.value[doctype][field.fieldname] = false
     })
+  })
 }
-
-</script>
\ No newline at end of file
+</script>
diff --git a/frappe/DataImport/UploadStep.vue b/frappe/DataImport/UploadStep.vue
index c43c0305d..b9aecc561 100644
--- a/frappe/DataImport/UploadStep.vue
+++ b/frappe/DataImport/UploadStep.vue
@@ -1,166 +1,200 @@
 <template>
-    <div class="text-base h-full flex flex-col w-[85%] lg:w-[700px] mx-auto pt-12 space-y-8">
-        <div class="flex flex-col space-y-1 text-ink-gray-7">
-            <div class="flex items-center justify-between">
-                <div class="flex items-center space-x-2 text-xl font-semibold text-ink-gray-9">
-                    <span>
-                        Choose Import
-                    </span>
-                    <Badge v-if="data?.status" :theme="getBadgeColor(data?.status)">
-                        {{ data?.status }}
-                    </Badge>
-                </div>
-                <Button
-                    variant="solid"
-                    @click="saveImport"
-                    :disabled="disableContinueButton"
-                >
-                    Continue
-                </Button>
-            </div>
-            <div class="leading-5">
-                Import data into your system using CSV files or Google Sheets.
-            </div>
+  <div
+    class="text-base h-full flex flex-col w-[85%] lg:w-[700px] mx-auto pt-12 space-y-8"
+  >
+    <div class="flex flex-col space-y-1 text-ink-gray-7">
+      <div class="flex items-center justify-between">
+        <div
+          class="flex items-center space-x-2 text-xl font-semibold text-ink-gray-9"
+        >
+          <span> Choose Import </span>
+          <Badge v-if="data?.status" :theme="getBadgeColor(data?.status)">
+            {{ data?.status }}
+          </Badge>
         </div>
+        <Button
+          variant="solid"
+          @click="saveImport"
+          :disabled="disableContinueButton"
+        >
+          Continue
+        </Button>
+      </div>
+      <div class="leading-5">
+        Import data into your system using CSV files or Google Sheets.
+      </div>
+    </div>
 
-        <div class="space-y-4">
-            <div
-                v-if="showFileSelector && !importFile"
-                @dragover.prevent
-                @drop.prevent="(e) =>  uploadFile(e)"
-                class="h-[300px] flex items-center justify-center bg-surface-gray-1 border border-dashed border-outline-gray-3 rounded-md">
-                <div v-if="showFileSelector && !uploading" class="w-4/5 lg:w-2/5 text-center">
-                    <FeatherIcon name="upload-cloud" class="size-6 stroke-1.5 text-ink-gray-6 mx-auto mb-2.5" />
-                    <input
-                        ref="fileInput"
-                        type="file"
-                        accept=".csv"
-                        class="hidden"
-                        @change="(e) => uploadFile(e)"
-                    />
-                    <div class="leading-5 text-ink-gray-9">
-                        Drag and drop a CSV file, or upload from your
-                        <span @click="openFileSelector" class="cursor-pointer font-semibold hover:underline">Device</span>
-                        or
-                        <span @click="openSheetSelector" class="cursor-pointer font-semibold hover:underline">
-                            Google Sheet
-                        </span>
-                    </div>
-                </div>
-                <div v-else-if="showFileSelector && uploading" class="w-4/5 lg:w-2/5 bg-surface-white border rounded-md p-2">
-                    <div class="space-y-2">
-                        <div class="font-medium">
-                            {{ uploadingdFile.name }}
-                        </div>
-                        <div class="text-ink-gray-6">
-                            {{ convertToKB(uploaded) }} of {{ convertToKB(total) }}
-                        </div>
-                    </div>
-                    <div class="w-full bg-surface-gray-1 h-1 rounded-full mt-3">
-                        <div
-                            class="bg-surface-gray-7 h-1 rounded-full transition-all duration-500 ease-in-out"
-                            :style="`width: ${uploadProgress}%`"
-                        ></div>
-                    </div>
-                </div>
+    <div class="space-y-4">
+      <div
+        v-if="showFileSelector && !importFile"
+        @dragover.prevent
+        @drop.prevent="(e) => uploadFile(e)"
+        class="h-[300px] flex items-center justify-center bg-surface-gray-1 border border-dashed border-outline-gray-3 rounded-md"
+      >
+        <div
+          v-if="showFileSelector && !uploading"
+          class="w-4/5 lg:w-2/5 text-center"
+        >
+          <FeatherIcon
+            name="upload-cloud"
+            class="size-6 stroke-1.5 text-ink-gray-6 mx-auto mb-2.5"
+          />
+          <input
+            ref="fileInput"
+            type="file"
+            accept=".csv"
+            class="hidden"
+            @change="(e) => uploadFile(e)"
+          />
+          <div class="leading-5 text-ink-gray-9">
+            Drag and drop a CSV file, or upload from your
+            <span
+              @click="openFileSelector"
+              class="cursor-pointer font-semibold hover:underline"
+              >Device</span
+            >
+            or
+            <span
+              @click="openSheetSelector"
+              class="cursor-pointer font-semibold hover:underline"
+            >
+              Google Sheet
+            </span>
+          </div>
+        </div>
+        <div
+          v-else-if="showFileSelector && uploading"
+          class="w-4/5 lg:w-2/5 bg-surface-white border rounded-md p-2"
+        >
+          <div class="space-y-2">
+            <div class="font-medium">
+              {{ uploadingdFile.name }}
             </div>
-            <div v-else-if="importFile" class="h-[300px] flex items-center justify-center bg-surface-gray-1 border border-dashed border-outline-gray-3 rounded-md">
-                <div class="w-4/5 lg:w-2/5 bg-surface-white border rounded-md p-2 flex items-center justify-between items-center">
-                    <div class="space-y-2">
-                        <div class="font-medium leading-5 text-ink-gray-9">
-                            {{ importFile.file_name || importFile.split("/").pop() }}
-                        </div>
-                        <div v-if="importFile.file_size" class="text-ink-gray-6">
-                            {{ convertToKB(importFile.file_size) }}
-                        </div>
-                    </div>
-                    <FeatherIcon
-                        name="trash-2"
-                        class="size-4 stroke-1.5 text-ink-red-3 cursor-pointer"
-                        @click="deleteFile"
-                    />
-                </div>
+            <div class="text-ink-gray-6">
+              {{ convertToKB(uploaded) }} of {{ convertToKB(total) }}
             </div>
-
-            <div v-else-if="showSheetSelector" class="flex flex-col h-[300px] p-4 border border-dashed border-outline-gray-3 rounded-md">
-                <div class="flex items-center space-x-2 text-ink-gray-7">
-                    <FeatherIcon name="chevron-left" class="size-4 cursor-pointer" @click="backToFileSelector" />
-                    <div>
-                        Google Sheet
-                    </div>
-                </div>
-                <div class="flex-1 flex flex-col items-center justify-center w-[95%] lg:w-[400px] mx-auto space-y-3">
-                    <input
-                        v-model="googleSheet"
-                        type="text"
-                        class="w-full border border-outline-gray-2 rounded-md px-2.5 text-base"
-                        placeholder="Add Google Sheets Link"
-                    />
-                    <div class="text-ink-gray-5">
-                        Make sure the link is publically accessible to fetch the data.
-                    </div>
-                </div>
+          </div>
+          <div class="w-full bg-surface-gray-1 h-1 rounded-full mt-3">
+            <div
+              class="bg-surface-gray-7 h-1 rounded-full transition-all duration-500 ease-in-out"
+              :style="`width: ${uploadProgress}%`"
+            ></div>
+          </div>
+        </div>
+      </div>
+      <div
+        v-else-if="importFile"
+        class="h-[300px] flex items-center justify-center bg-surface-gray-1 border border-dashed border-outline-gray-3 rounded-md"
+      >
+        <div
+          class="w-4/5 lg:w-2/5 bg-surface-white border rounded-md p-2 flex items-center justify-between items-center"
+        >
+          <div class="space-y-2">
+            <div class="font-medium leading-5 text-ink-gray-9">
+              {{ importFile.file_name || importFile.split('/').pop() }}
             </div>
-
-            <div class="flex justify-end">
-                <Dropdown
-                    :options="[
-                        {
-                            label: 'Mandatory Fields',
-                            onClick() {
-                                exportTemplate('mandatory')
-                            },
-                        },
-                        {
-                            label: 'All Fields',
-                            onClick() {
-                                exportTemplate('all')
-                            },
-                        },
-                        {
-                            label: 'Custom Template',
-                            onClick() {
-                                showTemplateModal = true
-                            },
-                        }
-                    ]"
-                >
-                    <template v-slot="{ open }">
-                        <Button variant="ghost">
-                            <template #prefix>
-                                <FeatherIcon name="download" class="size-4 stroke-1.5" />
-                            </template>
-                            Download CSV Template
-                            <template #suffix>
-                                <FeatherIcon name="chevron-down" :class="[
-                                    'w-4 h-4 stroke-1.5 ml-1 transform transition-transform',
-                                    open ? 'rotate-180' : '',
-                                ]" />
-                            </template>
-                        </Button>
-                    </template>
-                </Dropdown>
+            <div v-if="importFile.file_size" class="text-ink-gray-6">
+              {{ convertToKB(importFile.file_size) }}
             </div>
+          </div>
+          <FeatherIcon
+            name="trash-2"
+            class="size-4 stroke-1.5 text-ink-red-3 cursor-pointer"
+            @click="deleteFile"
+          />
         </div>
-
-        <TemplateModal
-            v-if="props.doctype || props.data?.reference_doctype"
-            v-model="showTemplateModal"
-            :doctype="props.doctype || props.data?.reference_doctype as string"
-        />
+      </div>
+
+      <div
+        v-else-if="showSheetSelector"
+        class="flex flex-col h-[300px] p-4 border border-dashed border-outline-gray-3 rounded-md"
+      >
+        <div class="flex items-center space-x-2 text-ink-gray-7">
+          <FeatherIcon
+            name="chevron-left"
+            class="size-4 cursor-pointer"
+            @click="backToFileSelector"
+          />
+          <div>Google Sheet</div>
+        </div>
+        <div
+          class="flex-1 flex flex-col items-center justify-center w-[95%] lg:w-[400px] mx-auto space-y-3"
+        >
+          <input
+            v-model="googleSheet"
+            type="text"
+            class="w-full border border-outline-gray-2 rounded-md px-2.5 text-base"
+            placeholder="Add Google Sheets Link"
+          />
+          <div class="text-ink-gray-5">
+            Make sure the link is publically accessible to fetch the data.
+          </div>
+        </div>
+      </div>
+
+      <div class="flex justify-end">
+        <Dropdown
+          :options="[
+            {
+              label: 'Mandatory Fields',
+              onClick() {
+                exportTemplate('mandatory')
+              },
+            },
+            {
+              label: 'All Fields',
+              onClick() {
+                exportTemplate('all')
+              },
+            },
+            {
+              label: 'Custom Template',
+              onClick() {
+                showTemplateModal = true
+              },
+            },
+          ]"
+        >
+          <template v-slot="{ open }">
+            <Button variant="ghost">
+              <template #prefix>
+                <FeatherIcon name="download" class="size-4 stroke-1.5" />
+              </template>
+              Download CSV Template
+              <template #suffix>
+                <FeatherIcon
+                  name="chevron-down"
+                  :class="[
+                    'w-4 h-4 stroke-1.5 ml-1 transform transition-transform',
+                    open ? 'rotate-180' : '',
+                  ]"
+                />
+              </template>
+            </Button>
+          </template>
+        </Dropdown>
+      </div>
     </div>
+
+    <TemplateModal
+      v-if="props.doctype || props.data?.reference_doctype"
+      v-model="showTemplateModal"
+      :doctype="props.doctype || (props.data?.reference_doctype as string)"
+    />
+  </div>
 </template>
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import type { DataImports, DataImport, DocField, DocType } from './types'
-import { toast } from "../../src/components/Toast/toast"
+import { toast } from '../../src/components/Toast/toast'
 import { fieldsToIgnore, getChildTableName, getBadgeColor } from './dataImport'
 import Badge from '../../src/components/Badge/Badge.vue'
 import Button from '../../src/components/Button/Button.vue'
 import Dropdown from '../../src/components/Dropdown/Dropdown.vue'
 import FeatherIcon from '../../src/components/FeatherIcon.vue'
-import FileUploadHandler from '../../src/utils/fileUploadHandler';
+import FileUploadHandler from '../../src/utils/fileUploadHandler'
 import TemplateModal from './TemplateModal.vue'
 
 const emit = defineEmits(['updateStep'])
@@ -178,240 +212,270 @@ const showLibrarySelector = ref(false)
 const router = useRouter()
 
 const props = defineProps<{
-    dataImports: DataImports
-    doctype?: string
-    fields: any
-    data: DataImport | null
+  dataImports: DataImports
+  doctype?: string
+  fields: any
+  data: DataImport | null
 }>()
 
 const uploadProgress = computed(() => {
-    if (total.value === 0) return 0
-    return Math.floor((uploaded.value / total.value) * 100)
+  if (total.value === 0) return 0
+  return Math.floor((uploaded.value / total.value) * 100)
 })
 
 const extractFile = (e: Event): File | null => {
-    const inputFiles = (e.target as HTMLInputElement)?.files
-    const dt = (e as DragEvent).dataTransfer?.files
+  const inputFiles = (e.target as HTMLInputElement)?.files
+  const dt = (e as DragEvent).dataTransfer?.files
 
-    return inputFiles?.[0] || dt?.[0] || null
+  return inputFiles?.[0] || dt?.[0] || null
 }
 
 const uploadFile = (e: Event) => {
-    const file = extractFile(e)
-    if (!file) return;
-
-    if (file.type !== 'text/csv') {
-        toast.error('Please upload a valid CSV file.')
-        console.error('Please upload a valid CSV file.')
-        return;
-    }
-
-    uploadingdFile.value = file
-    const uploader = new FileUploadHandler()
-
-    uploader.on("start", () => {
-        uploading.value = true
-    })
-
-    uploader.on("progress", (data: { uploaded: number, total: number }) => {
-        uploaded.value = data.uploaded
-        total.value = data.total
-    })
-
-    uploader.on("error", (error: any) => {
-        uploading.value = false
-        toast.error(error)
-        console.error('File upload error:', error)
-    })
-
-    uploader.on("finish", () => {
-        uploading.value = false
+  const file = extractFile(e)
+  if (!file) return
+
+  if (file.type !== 'text/csv') {
+    toast.error('Please upload a valid CSV file.')
+    console.error('Please upload a valid CSV file.')
+    return
+  }
+
+  uploadingdFile.value = file
+  const uploader = new FileUploadHandler()
+
+  uploader.on('start', () => {
+    uploading.value = true
+  })
+
+  uploader.on('progress', (data: { uploaded: number; total: number }) => {
+    uploaded.value = data.uploaded
+    total.value = data.total
+  })
+
+  uploader.on('error', (error: any) => {
+    uploading.value = false
+    toast.error(error)
+    console.error('File upload error:', error)
+  })
+
+  uploader.on('finish', () => {
+    uploading.value = false
+  })
+  uploader
+    .upload(file, {})
+    .then((data) => {
+      importFile.value = data
     })
-    uploader.upload(file, {}).then((data => {
-        importFile.value = data
-    })).catch(error => {
-        console.error('File upload error:', error)
+    .catch((error) => {
+      console.error('File upload error:', error)
     })
 }
 
 const saveImport = () => {
-    if (props.data?.name) {
-        updateImport()
-    } else {
-        createImport()
-    }
+  if (props.data?.name) {
+    updateImport()
+  } else {
+    createImport()
+  }
 }
 
 const createImport = () => {
-    props.dataImports.insert.submit({
-        reference_doctype: props.doctype!,
-        import_type: "Insert New Records",
-        mute_emails: true,
-        status: 'Pending',
-        google_sheets_url: googleSheet.value.trim(),
-        import_file: importFile.value?.file_url,
-    }, {
-        onSuccess(data: DataImport) {
-            router.replace({
-                name: 'DataImport',
-                params: {
-                    importName: data.name
-                },
-                query: {
-                    step: 'map'
-                }
-            })
-        },
-        onError(error: any) {
-            toast.error(error.messages?.[0] || error)
-            console.error('Error creating data import:', error)
-        }
-    })
+  props.dataImports.insert.submit(
+    {
+      reference_doctype: props.doctype!,
+      import_type: 'Insert New Records',
+      mute_emails: true,
+      status: 'Pending',
+      google_sheets_url: googleSheet.value.trim(),
+      import_file: importFile.value?.file_url,
+    },
+    {
+      onSuccess(data: DataImport) {
+        router.replace({
+          name: 'DataImport',
+          params: {
+            importName: data.name,
+          },
+          query: {
+            step: 'map',
+          },
+        })
+      },
+      onError(error: any) {
+        toast.error(error.messages?.[0] || error)
+        console.error('Error creating data import:', error)
+      },
+    },
+  )
 }
 
 const updateImport = () => {
-    if (!props.data) return;
-    props.dataImports.setValue.submit({
-        ...props.data,
-        google_sheets_url: googleSheet.value.trim(),
-        import_file: importFile.value ? importFile.value.file_url : '',
-    }, {
-        onSuccess(data: DataImport) {
-            nextTick(() => {
-                if (importFile.value || googleSheet.value.trim().length) {
-                    emit('updateStep', 'map', data)
-                } else {
-                    emit('updateStep', 'upload', data)
-                }
-            })
-        },
-        onError(error: any) {
-            toast.error(error.messages?.[0] || error, { duration: 1000 })
-            console.error('Error updating data import:', error)
-        }
-    })
+  if (!props.data) return
+  props.dataImports.setValue.submit(
+    {
+      ...props.data,
+      google_sheets_url: googleSheet.value.trim(),
+      import_file: importFile.value ? importFile.value.file_url : '',
+    },
+    {
+      onSuccess(data: DataImport) {
+        nextTick(() => {
+          if (importFile.value || googleSheet.value.trim().length) {
+            emit('updateStep', 'map', data)
+          } else {
+            emit('updateStep', 'upload', data)
+          }
+        })
+      },
+      onError(error: any) {
+        toast.error(error.messages?.[0] || error, { duration: 1000 })
+        console.error('Error updating data import:', error)
+      },
+    },
+  )
 }
 
 const exportTemplate = async (type: 'mandatory' | 'all') => {
-    let url = getExportURL(type)
-    const response = await fetch(url)
-    const blob = await response.blob();
-    const link = document.createElement('a');
+  let url = getExportURL(type)
+  const response = await fetch(url)
+  const blob = await response.blob()
+  const link = document.createElement('a')
 
-    link.href = URL.createObjectURL(blob);
-    link.download = props.doctype + '.csv'
-    document.body.appendChild(link);
+  link.href = URL.createObjectURL(blob)
+  link.download = props.doctype + '.csv'
+  document.body.appendChild(link)
 
-    link.click();
-    document.body.removeChild(link);
+  link.click()
+  document.body.removeChild(link)
 }
 
 const getExportURL = (type: 'mandatory' | 'all') => {
-    if (!props.doctype && !props.data?.reference_doctype) return ''
-    let exportFields = getExportFields(type)
+  if (!props.doctype && !props.data?.reference_doctype) return ''
+  let exportFields = getExportFields(type)
 
-    return `/api/method/frappe.core.doctype.data_import.data_import.download_template
-        ?doctype=${encodeURIComponent(props.doctype || props.data?.reference_doctype as string)}
+  return `/api/method/frappe.core.doctype.data_import.data_import.download_template
+        ?doctype=${encodeURIComponent(props.doctype || (props.data?.reference_doctype as string))}
         &export_fields=${encodeURIComponent(JSON.stringify(exportFields))}
         &export_records=blank_template
-        &file_type=CSV`
-        .replace(/\s+/g, '')
+        &file_type=CSV`.replace(/\s+/g, '')
 }
 
 const getExportFields = (type: 'mandatory' | 'all') => {
-    /* {'Sales Invoice': ['name', 'customer'], 'Sales Invoice Item': ['item_code']} */
-    if (type == "mandatory") {
-        return getMandatoryFields()
-    }
-    return getAllFields()
+  /* {'Sales Invoice': ['name', 'customer'], 'Sales Invoice Item': ['item_code']} */
+  if (type == 'mandatory') {
+    return getMandatoryFields()
+  }
+  return getAllFields()
 }
 
 const getMandatoryFields = () => {
-    let exportableFields: Record<string, string[]> = {}
-    let docs = props.fields.data?.docs || []
-    let referenceDoctype = props.doctype || props.data?.reference_doctype as string
-    let parentDoctype = docs.find((doc: DocType) => doc.name == referenceDoctype)
-
-    let parentFields = parentDoctype.fields.filter((field: DocField) => {
-        return !fieldsToIgnore.includes(field.fieldtype) && field.reqd
-    }).map((field: DocField) => field.fieldname)
-    parentFields.unshift('name')
-    exportableFields[referenceDoctype] = parentFields
-
-    let childDoctypes = parentDoctype.fields.filter((field: DocField) => {
-        return (field.fieldtype === 'Table' || field.fieldtype === 'Table MultiSelect') && field.reqd
-    })
-
-    childDoctypes.forEach((field: DocField) => {
-        let childDoctype = docs.find((doc: DocType) => doc.name == field.options)
-        if (childDoctype) {
-            let childFields = childDoctype.fields.filter((f: DocField) => {
-                return !fieldsToIgnore.includes(f.fieldtype) && f.reqd
-            }).map((f: DocField) => f.fieldname)
-            childFields.unshift('name')
-            exportableFields[field.fieldname] = childFields
-        }
+  let exportableFields: Record<string, string[]> = {}
+  let docs = props.fields.data?.docs || []
+  let referenceDoctype =
+    props.doctype || (props.data?.reference_doctype as string)
+  let parentDoctype = docs.find((doc: DocType) => doc.name == referenceDoctype)
+
+  let parentFields = parentDoctype.fields
+    .filter((field: DocField) => {
+      return !fieldsToIgnore.includes(field.fieldtype) && field.reqd
     })
+    .map((field: DocField) => field.fieldname)
+  parentFields.unshift('name')
+  exportableFields[referenceDoctype] = parentFields
+
+  let childDoctypes = parentDoctype.fields.filter((field: DocField) => {
+    return (
+      (field.fieldtype === 'Table' ||
+        field.fieldtype === 'Table MultiSelect') &&
+      field.reqd
+    )
+  })
+
+  childDoctypes.forEach((field: DocField) => {
+    let childDoctype = docs.find((doc: DocType) => doc.name == field.options)
+    if (childDoctype) {
+      let childFields = childDoctype.fields
+        .filter((f: DocField) => {
+          return !fieldsToIgnore.includes(f.fieldtype) && f.reqd
+        })
+        .map((f: DocField) => f.fieldname)
+      childFields.unshift('name')
+      exportableFields[field.fieldname] = childFields
+    }
+  })
 
-    return exportableFields
+  return exportableFields
 }
 
 const getAllFields = () => {
-    let doctypeMap: Record<string, string[]> = {}
-    let docs = props.fields.data?.docs || []
-    docs.forEach((doc: DocType) => {
-        let exportableFields = doc.fields.filter((field: DocField) => {
-            return !fieldsToIgnore.includes(field.fieldtype)
-        }).map((field: DocField) => field.fieldname)
-        exportableFields.unshift('name')
-        let doctypeName = doc.name == props.doctype ? doc.name : getChildTableName(doc.name, props.doctype || props.data?.reference_doctype as string, docs)
-        doctypeMap[doctypeName] = exportableFields
-    })
-    return doctypeMap
+  let doctypeMap: Record<string, string[]> = {}
+  let docs = props.fields.data?.docs || []
+  docs.forEach((doc: DocType) => {
+    let exportableFields = doc.fields
+      .filter((field: DocField) => {
+        return !fieldsToIgnore.includes(field.fieldtype)
+      })
+      .map((field: DocField) => field.fieldname)
+    exportableFields.unshift('name')
+    let doctypeName =
+      doc.name == props.doctype
+        ? doc.name
+        : getChildTableName(
+            doc.name,
+            props.doctype || (props.data?.reference_doctype as string),
+            docs,
+          )
+    doctypeMap[doctypeName] = exportableFields
+  })
+  return doctypeMap
 }
 
 const openFileSelector = () => {
-    fileInput.value?.click()
+  fileInput.value?.click()
 }
 
 const openSheetSelector = () => {
-    showFileSelector.value = false
-    showLibrarySelector.value = false
-    showSheetSelector.value = true
+  showFileSelector.value = false
+  showLibrarySelector.value = false
+  showSheetSelector.value = true
 }
 
 const backToFileSelector = () => {
-    showFileSelector.value = true
-    showLibrarySelector.value = false
-    showSheetSelector.value = false
+  showFileSelector.value = true
+  showLibrarySelector.value = false
+  showSheetSelector.value = false
 }
 
 const disableContinueButton = computed(() => {
-    return !importFile.value && !googleSheet.value.trim().length
+  return !importFile.value && !googleSheet.value.trim().length
 })
 
-watch(() => props.data, () => {
+watch(
+  () => props.data,
+  () => {
     if (props.data) {
-        if (props.data.import_file) {
-            importFile.value = props.data.import_file
-        } else if (props.data.google_sheets_url) {
-            openSheetSelector()
-            googleSheet.value = props.data.google_sheets_url
-        }
+      if (props.data.import_file) {
+        importFile.value = props.data.import_file
+      } else if (props.data.google_sheets_url) {
+        openSheetSelector()
+        googleSheet.value = props.data.google_sheets_url
+      }
     }
-}, { immediate: true })
+  },
+  { immediate: true },
+)
 
 watch([importFile, googleSheet], () => {
-    if (!importFile.value || !googleSheet.value.trim().length) {
-        updateImport()
-    }
+  if (!importFile.value || !googleSheet.value.trim().length) {
+    updateImport()
+  }
 })
 
 const deleteFile = () => {
-    importFile.value = null
+  importFile.value = null
 }
 
 const convertToKB = (bytes: number) => {
-    return (bytes / 1024).toFixed(2) + ' KB'
+  return (bytes / 1024).toFixed(2) + ' KB'
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/frappe/DataImport/dataImport.ts b/frappe/DataImport/dataImport.ts
index e7a2bb0da..72bae81cb 100644
--- a/frappe/DataImport/dataImport.ts
+++ b/frappe/DataImport/dataImport.ts
@@ -1,52 +1,63 @@
-import { toast } from "../../src/components/Toast/toast"
+import { toast } from '../../src/components/Toast/toast'
 import type { DataImportStatus } from './types'
-import call from '../../src/utils/call';
+import call from '../../src/utils/call'
 
 export const getBadgeColor = (status: DataImportStatus) => {
-    const colorMap = {
-        "Pending": "orange",
-        "Success": "green",
-        "Partial Success": "orange",
-        "Error": "red",
-        "Timed Out": "orange"
-    } as const;
-    return colorMap[status as DataImportStatus] || "gray"
+  const colorMap = {
+    'Pending': 'orange',
+    'Success': 'green',
+    'Partial Success': 'orange',
+    'Error': 'red',
+    'Timed Out': 'orange',
+  } as const
+  return colorMap[status as DataImportStatus] || 'gray'
 }
 
 export const fieldsToIgnore = [
-    "Section Break",
-    "Column Break",
-    "Tab Break",
-    "HTML",
-    "Table",
-    "Table MultiSelect",
-    "Button",
-    "Image",
-    "Fold",
-    "Heading"
+  'Section Break',
+  'Column Break',
+  'Tab Break',
+  'HTML',
+  'Table',
+  'Table MultiSelect',
+  'Button',
+  'Image',
+  'Fold',
+  'Heading',
 ]
 
-export const getChildTableName = (doctype: string, parentDocType: string, docs: any[]) => {
-    let childTableName = ''
-    let doctypeFields = docs.filter((doc: any) => {
-        return doc.name == parentDocType
-    })[0].fields
+export const getChildTableName = (
+  doctype: string,
+  parentDocType: string,
+  docs: any[],
+) => {
+  let childTableName = ''
+  let doctypeFields = docs.filter((doc: any) => {
+    return doc.name == parentDocType
+  })[0].fields
 
-   doctypeFields.forEach((field: any) => {
-        if (field.options == doctype) {
-            childTableName = field.fieldname
-        }
-   })
-    return childTableName
+  doctypeFields.forEach((field: any) => {
+    if (field.options == doctype) {
+      childTableName = field.fieldname
+    }
+  })
+  return childTableName
 }
 
-export const getPreviewData = (importName: string, file: string | undefined, sheet: string | undefined) => {
-    return call("frappe.core.doctype.data_import.data_import.get_preview_from_template", {
-        data_import: importName,
-        import_file: file,
-        google_sheets_url: sheet
-    }).catch((error: any) => {
-        toast.error(error.messages?.[0] || error)
-        console.error("Error fetching preview data:", error)
-    })
-}
\ No newline at end of file
+export const getPreviewData = (
+  importName: string,
+  file: string | undefined,
+  sheet: string | undefined,
+) => {
+  return call(
+    'frappe.core.doctype.data_import.data_import.get_preview_from_template',
+    {
+      data_import: importName,
+      import_file: file,
+      google_sheets_url: sheet,
+    },
+  ).catch((error: any) => {
+    toast.error(error.messages?.[0] || error)
+    console.error('Error fetching preview data:', error)
+  })
+}
diff --git a/frappe/DataImport/types.ts b/frappe/DataImport/types.ts
index 406ab98c8..a6b3a869a 100644
--- a/frappe/DataImport/types.ts
+++ b/frappe/DataImport/types.ts
@@ -3,7 +3,10 @@ export interface DataImportProps {
   description?: string
   doctype?: string | null
   importName?: string | null
-  doctypeMap?: Record<string, { title: string; listRoute?: string; pageRoute?: string }>
+  doctypeMap?: Record<
+    string,
+    { title: string; listRoute?: string; pageRoute?: string }
+  >
 }
 
 export interface DataImport {
@@ -21,14 +24,36 @@ export interface DataImport {
 export interface DataImports {
   data: DataImport[]
   update: (args: { filters: any[] }) => void
-  insert: { submit: (params: DataImport, options: { validate?: () => boolean; onSuccess: (data: DataImport) => void; onError: (err: any) => void }) => void }
-  setValue: { submit: (params: DataImport, options: { onSuccess: (data: DataImport) => void; onError: (err: any) => void }) => void }
+  insert: {
+    submit: (
+      params: DataImport,
+      options: {
+        validate?: () => boolean
+        onSuccess: (data: DataImport) => void
+        onError: (err: any) => void
+      },
+    ) => void
+  }
+  setValue: {
+    submit: (
+      params: DataImport,
+      options: {
+        onSuccess: (data: DataImport) => void
+        onError: (err: any) => void
+      },
+    ) => void
+  }
   reload: () => void
   hasNextPage: () => boolean
   next: () => Promise<void>
 }
 
-export type DataImportStatus = "Pending" | "Success" | "Partial Success" | "Error" | "Timed Out"
+export type DataImportStatus =
+  | 'Pending'
+  | 'Success'
+  | 'Partial Success'
+  | 'Error'
+  | 'Timed Out'
 
 export interface DocField {
   label: string
@@ -48,4 +73,4 @@ export interface File {
   file_url: string
   file_name: string
   file_size: number
-}
\ No newline at end of file
+}
diff --git a/frappe/Filter/Filter.vue b/frappe/Filter/Filter.vue
index e577bd849..36bde1477 100644
--- a/frappe/Filter/Filter.vue
+++ b/frappe/Filter/Filter.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, ref, watch } from "vue";
-import type { FilterProps, StateRow } from "./types";
+import { computed, ref, watch } from 'vue'
+import type { FilterProps, StateRow } from './types'
 
 import {
   getDefaultOperator,
@@ -8,71 +8,72 @@ import {
   getValueControl,
   parseFilters,
   reverseOperatorMap,
-} from "./utils";
+} from './utils'
 
-import Badge from "../../src/components/Badge/Badge.vue";
-import Button from "../../src/components/Button/Button.vue";
-import Combobox from "../../src/components/Combobox/Combobox.vue";
-import Popover from "../../src/components/Popover/Popover.vue";
-import Select from "../../src/components/Select/Select.vue";
-import { createResource } from "../../src/resources";
+import Badge from '../../src/components/Badge/Badge.vue'
+import Button from '../../src/components/Button/Button.vue'
+import Combobox from '../../src/components/Combobox/Combobox.vue'
+import Popover from '../../src/components/Popover/Popover.vue'
+import Select from '../../src/components/Select/Select.vue'
+import { createResource } from '../../src/resources'
 
-import FilterIcon from "../Icons/FilterIcon.vue";
+import FilterIcon from '../Icons/FilterIcon.vue'
 
-let props = defineProps<FilterProps>();
-const model = defineModel<any[]>();
+let props = defineProps<FilterProps>()
+const model = defineModel<any[]>()
 
 const doctypeFields = createResource({
-  url: "frappe.desk.form.load.getdoctype",
-  method: "GET",
+  url: 'frappe.desk.form.load.getdoctype',
+  method: 'GET',
   params: { doctype: props.doctype },
   auto: true,
   transform(data) {
-    const options = data.docs[0].fields.map((x) => {
-      return {
-        label: x.label,
-        type: x.fieldtype,
-        value: x.fieldname,
-        options: x.options?.split("\n"),
-      };
-    })
-      .filter((x) =>
-        !["Section Break", "Read Only", "Column Break"].includes(x.type)
-      );
-
-    return options;
+    const options = data.docs[0].fields
+      .map((x) => {
+        return {
+          label: x.label,
+          type: x.fieldtype,
+          value: x.fieldname,
+          options: x.options?.split('\n'),
+        }
+      })
+      .filter(
+        (x) => !['Section Break', 'Read Only', 'Column Break'].includes(x.type),
+      )
+
+    return options
   },
   onSuccess(data) {
     setFilters()
-  }
-});
+  },
+})
 
 const dummyObj = () => ({
-  field: { fieldName: "", fieldType: "", options: [] },
-  operator: "",
-  value: "",
-});
+  field: { fieldName: '', fieldType: '', options: [] },
+  operator: '',
+  value: '',
+})
 
-const rows = ref([dummyObj()]);
-const insertRow = () => rows.value.push(dummyObj());
+const rows = ref([dummyObj()])
+const insertRow = () => rows.value.push(dummyObj())
 
 watch(
   () => model.value,
   () => setFilters(),
-  { deep: true }
-);
+  { deep: true },
+)
 
 const setFilters = () => {
-  if (!doctypeFields.data?.length || !model.value?.length) return;
+  if (!doctypeFields.data?.length || !model.value?.length) return
 
   const _filters = model.value
     .map((filter: any) => {
-      let [fieldName, operator, value] = filter;
-      const field = doctypeFields.data.find((f: any) => f.value === fieldName);
-      if (!field) return null;
+      let [fieldName, operator, value] = filter
+      const field = doctypeFields.data.find((f: any) => f.value === fieldName)
+      if (!field) return null
 
-      if (field.type === "Check") {
-        value = value ? "Yes" : "No"
+      if (field.type === 'Check') {
+        value = value ? 'Yes' : 'No'
       }
 
       return {
@@ -83,33 +84,33 @@ const setFilters = () => {
         },
         operator: reverseOperatorMap[operator] || operator,
         value: value,
-      };
+      }
     })
-    .filter((row) => row !== null) as StateRow[];
+    .filter((row) => row !== null) as StateRow[]
 
-  rows.value = _filters as typeof rows.value;
+  rows.value = _filters as typeof rows.value
 }
 
 const clearRows = (closePopup: () => void) => {
-  rows.value = [dummyObj()];
-  closePopup();
-  apply();
-};
+  rows.value = [dummyObj()]
+  closePopup()
+  apply()
+}
 
 const deleteRow = (index: number) => {
-  rows.value.splice(index, 1);
-  if (rows.value.length === 0) insertRow();
-  apply();
-};
+  rows.value.splice(index, 1)
+  if (rows.value.length === 0) insertRow()
+  apply()
+}
 
 const getField = (val: string) => {
-  return doctypeFields.data?.find((x: StateRow) => x.value === val);
-};
+  return doctypeFields.data?.find((x: StateRow) => x.value === val)
+}
 
 const updateFilter = (val: string, index: number) => {
-  if (!val) return;
+  if (!val) return
 
-  const field = getField(val);
+  const field = getField(val)
   rows.value[index] = {
     field: {
       fieldName: val,
@@ -117,18 +118,18 @@ const updateFilter = (val: string, index: number) => {
       options: field.options,
     },
     operator: getDefaultOperator(field),
-    value: "",
-  };
-  apply();
-};
+    value: '',
+  }
+  apply()
+}
 
 const apply = () => {
-  model.value = parseFilters(rows.value);
-};
+  model.value = parseFilters(rows.value)
+}
 
-const filterCount = computed(() =>
-  rows.value.filter((row) => row.field.fieldName !== "").length
-);
+const filterCount = computed(
+  () => rows.value.filter((row) => row.field.fieldName !== '').length,
+)
 </script>
 
 <template>
@@ -140,13 +141,13 @@ const filterCount = computed(() =>
     <template #target="{ close, togglePopover }">
       <Button
         @click="togglePopover()"
-        :class='{ "rounded-r-none": filterCount != 0 }'
+        :class="{ 'rounded-r-none': filterCount != 0 }"
       >
         <template #prefix><FilterIcon /></template>
         Filter
         <Badge
           v-if="filterCount != 0"
-          :class='"bg-surface-gray-4 ml-1 rounded"'
+          :class="'bg-surface-gray-4 ml-1 rounded'"
           :label="filterCount"
         />
       </Button>
@@ -165,7 +166,7 @@ const filterCount = computed(() =>
         <template v-for="(row, index) in rows">
           <Combobox
             :options="doctypeFields.data"
-            :placeholder='"Select an option..."'
+            :placeholder="'Select an option...'"
             :disabled="false"
             @update:modelValue="(e) => updateFilter(e, index)"
             v-model="row.field.fieldName"
diff --git a/frappe/Filter/types.ts b/frappe/Filter/types.ts
index 7ca5b86c4..235fe32e4 100644
--- a/frappe/Filter/types.ts
+++ b/frappe/Filter/types.ts
@@ -1,15 +1,15 @@
 export interface FilterProps {
-	doctype: string;
+  doctype: string
 }
 
 export interface Field {
-	fieldName: string;
-	fieldType: string;
-	options?: string[];
+  fieldName: string
+  fieldType: string
+  options?: string[]
 }
 
 export interface StateRow {
-	field: Field;
-	operator: string;
-	value: string;
+  field: Field
+  operator: string
+  value: string
 }
diff --git a/frappe/Filter/utils.ts b/frappe/Filter/utils.ts
index ab78a1065..846657364 100644
--- a/frappe/Filter/utils.ts
+++ b/frappe/Filter/utils.ts
@@ -9,7 +9,7 @@ import { Link } from '../Link'
 
 import type { Field, StateRow } from './types'
 
-const typeCheck = ['Check']
+const typeCheck = new Set(['Check'])
 const typeLink = ['Link', 'Dynamic Link']
 const typeNumber = ['Float', 'Int', 'Currency', 'Percent']
 const typeSelect = ['Select']
@@ -57,7 +57,7 @@ export const getOperators = (field: Field) => {
     return baseOperators
   }
 
-  if (typeCheck.includes(fieldType)) {
+  if (typeCheck.has(fieldType)) {
     return [{ label: 'Equals', value: 'equals' }]
   }
 
@@ -139,7 +139,7 @@ export const getValueControl = (row: StateRow) => {
     return h(TextInput, { placeholder: 'Enter value' })
   }
 
-  if (typeSelect.includes(fieldType) || typeCheck.includes(fieldType)) {
+  if (typeSelect.includes(fieldType) || typeCheck.has(fieldType)) {
     let _options = options || ['Yes', 'No']
 
     return h(Select, { placeholder: 'Select Option', options: _options })
@@ -202,36 +202,37 @@ const transformIn = (row: StateRow) => {
 }
 
 const operatorMap = {
-  is: 'is',
+  'is': 'is',
   'is not': 'is not',
-  in: 'in',
+  'in': 'in',
   'not in': 'not in',
-  equals: '=',
+  'equals': '=',
   'not equals': '!=',
-  yes: true,
-  no: false,
-  like: 'LIKE',
+  'yes': true,
+  'no': false,
+  'like': 'LIKE',
   'not like': 'NOT LIKE',
   '>': '>',
   '<': '<',
   '>=': '>=',
   '<=': '<=',
-  between: 'between',
-  timespan: 'timespan',
+  'between': 'between',
+  'timespan': 'timespan',
 }
 
 export const reverseOperatorMap = Object.fromEntries(
-  Object.entries(operatorMap).map(([key, value]) => [value, key])
-);
+  Object.entries(operatorMap).map(([key, value]) => [value, key]),
+)
 
 export const parseFilters = (filters: any) => {
   const _filters = JSON.parse(JSON.stringify(filters))
 
   return _filters.map(transformIn).reduce((acc, cur) => {
     if (['equals', '='].includes(cur.operator)) {
-      cur.value = cur.value == 'Yes' ? true : cur.value == 'No' ? false : cur.value
+      cur.value =
+        cur.value == 'Yes' ? true : cur.value == 'No' ? false : cur.value
     } else if (cur.operator === 'between') {
-      cur.value = [...cur.value.split(',')]
+      cur.value = cur.value.split(',')
     }
 
     return [
diff --git a/frappe/Link/types.ts b/frappe/Link/types.ts
index cc1dd026f..29c9f8163 100644
--- a/frappe/Link/types.ts
+++ b/frappe/Link/types.ts
@@ -1,4 +1,4 @@
-import { ComboboxVariant } from '../../src/components/Combobox/types'
+import type { ComboboxVariant } from '../../src/components/Combobox/types'
 
 export interface LinkProps {
   doctype: string
diff --git a/frappe/drive/components/InfoDialog.vue b/frappe/drive/components/InfoDialog.vue
index b28937d35..138417a88 100644
--- a/frappe/drive/components/InfoDialog.vue
+++ b/frappe/drive/components/InfoDialog.vue
@@ -1,7 +1,10 @@
 <template>
   <Dialog v-model="open" @close="dialogType = ''">
     <template #body-title>
-      <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9 cursor-pointer pr-2" @click="emitter.emit('rename')">
+      <h3
+        class="text-2xl font-semibold leading-6 text-ink-gray-9 cursor-pointer pr-2"
+        @click="emitter.emit('rename')"
+      >
         {{ entity.title }}
       </h3>
     </template>
@@ -9,51 +12,72 @@
       <ul class="space-y-3 text-sm mb-4 text-ink-gray-8">
         <span class="text-base font-semibold">Information</span>
         <li>
-          <span class="inline-block w-24 text-ink-gray-5">{{ __('Owner') }}:</span>
+          <span class="inline-block w-24 text-ink-gray-5"
+            >{{ __('Owner') }}:</span
+          >
           <span class="col-span-1">
             <a :href="`mailto:${entity.owner}`">{{ entity.owner }}</a>
           </span>
         </li>
         <li>
-          <span class="inline-block w-24 text-ink-gray-5">{{ __('Type') }}:</span>
+          <span class="inline-block w-24 text-ink-gray-5"
+            >{{ __('Type') }}:</span
+          >
           <span class="col-span-1">{{ entity.file_type }}</span>
         </li>
         <li v-if="entity.file_size">
-          <span class="inline-block w-24 text-ink-gray-5">{{ __('Size') }}:</span>
+          <span class="inline-block w-24 text-ink-gray-5"
+            >{{ __('Size') }}:</span
+          >
           <span class="col-span-1">
             {{ entity.file_size_pretty }}{{ ` (${entity.file_size})` }}
           </span>
         </li>
         <li>
-          <span class="inline-block w-24 text-ink-gray-5">{{ __('Modified') }}:</span>
+          <span class="inline-block w-24 text-ink-gray-5"
+            >{{ __('Modified') }}:</span
+          >
           <span class="col-span-1">{{ formatDate(entity.modified) }}</span>
         </li>
         <li>
-          <span class="inline-block w-24 text-ink-gray-5">{{ __('Added') }}:</span>
+          <span class="inline-block w-24 text-ink-gray-5"
+            >{{ __('Added') }}:</span
+          >
           <span class="col-span-1">{{ formatDate(entity.creation) }}</span>
         </li>
         <li class="flex items-center">
-          <span class="inline-block w-24 text-ink-gray-5">{{ __('Tags') }}:</span>
+          <span class="inline-block w-24 text-ink-gray-5"
+            >{{ __('Tags') }}:</span
+          >
           <TagInput class="flex-grow bg-transparent" :entity />
         </li>
       </ul>
 
-      <ul v-if="editor?.storage?.characterCount" class="space-y-3 text-sm mb-4 text-ink-gray-8">
+      <ul
+        v-if="editor?.storage?.characterCount"
+        class="space-y-3 text-sm mb-4 text-ink-gray-8"
+      >
         <span class="text-base font-semibold">{{ __('Stats') }}</span>
         <li>
-          <span class="inline-block w-24 text-ink-gray-5">{{ __('Words') }}:</span>
+          <span class="inline-block w-24 text-ink-gray-5"
+            >{{ __('Words') }}:</span
+          >
           <span class="col-span-1">{{
             editor.storage.characterCount.words()
-            }}</span>
+          }}</span>
         </li>
         <li>
-          <span class="inline-block w-24 text-ink-gray-5">{{ __('Characters') }}:</span>
+          <span class="inline-block w-24 text-ink-gray-5"
+            >{{ __('Characters') }}:</span
+          >
           <span class="col-span-1">{{
             editor.storage.characterCount.characters()
-            }}</span>
+          }}</span>
         </li>
         <li>
-          <span class="inline-block w-24 text-ink-gray-5">{{ __('Reading time') }}:</span>
+          <span class="inline-block w-24 text-ink-gray-5"
+            >{{ __('Reading time') }}:</span
+          >
           <span class="col-span-1">
             {{ Math.ceil(editor.storage.characterCount.words() / 200) }}
             {{
@@ -66,35 +90,56 @@
       </ul>
       <div class="flex justify-between items-center">
         <span class="text-base font-semibold text-ink-gray-8">Access</span>
-        <Button v-if="entity.share" :variant="'subtle'" size="sm"
-          class="rounded flex justify-center items-center scale-[90%]" @click="emitter.emit('share')">
+        <Button
+          v-if="entity.share"
+          :variant="'subtle'"
+          size="sm"
+          class="rounded flex justify-center items-center scale-[90%]"
+          @click="emitter.emit('share')"
+        >
           {{ __('Manage') }}
         </Button>
       </div>
-      <LoadingIndicator v-if="!getGeneralAccess.data?.type" class="size-4 mx-auto my-1" />
+      <LoadingIndicator
+        v-if="!getGeneralAccess.data?.type"
+        class="size-4 mx-auto my-1"
+      />
       <ul v-else class="space-y-3 text-sm py-2">
         <li class="flex">
-          <span class="inline-block w-24 text-ink-gray-5">{{ __('General') }}:</span>
+          <span class="inline-block w-24 text-ink-gray-5"
+            >{{ __('General') }}:</span
+          >
           <div class="col-span-1 flex gap-2">
             <div class="col-span-1 flex gap-2 items-center text-ink-gray-8">
-              <div class="rounded-full flex items-center justify-center p-0.5 size-4.5"
-                :class="accessConfig[getGeneralAccess.data.type].color">
-                <component :is="accessConfig[getGeneralAccess.data.type].icon" class="h-[90%] w-[90%]" />
+              <div
+                class="rounded-full flex items-center justify-center p-0.5 size-4.5"
+                :class="accessConfig[getGeneralAccess.data.type].color"
+              >
+                <component
+                  :is="accessConfig[getGeneralAccess.data.type].icon"
+                  class="h-[90%] w-[90%]"
+                />
               </div>
               <span>{{ accessConfig[getGeneralAccess.data.type].label }}</span>
             </div>
           </div>
         </li>
         <li>
-          <span class="inline-block w-24 text-ink-gray-5">{{ __('Shared') }}:</span>
-          <span v-if="userAccess.data?.length" class="col-span-1 text-ink-gray-8">
+          <span class="inline-block w-24 text-ink-gray-5"
+            >{{ __('Shared') }}:</span
+          >
+          <span
+            v-if="userAccess.data?.length"
+            class="col-span-1 text-ink-gray-8"
+          >
             {{
               userAccess.data.length +
               ' ' +
               (userAccess.data.length === 1 ? __('person') : __('people'))
             }}
             {{
-              userAccess.data.length < 3 ? '(' + userAccess.data.map((k) => k.user).join(', ') + ')'
+              userAccess.data.length < 3
+                ? '(' + userAccess.data.map((k) => k.user).join(', ') + ')'
                 : ''
             }}
           </span>
@@ -105,7 +150,9 @@
         <div>
           <span class="text-base font-semibold">{{ __('Developer') }}</span>
           <Button variant="subtle" size="sm" class="scale-[90%] float-right">
-            <a :href="'/app/drive-file/' + entity.name" target="_blank">Open in Desk</a>
+            <a :href="'/app/drive-file/' + entity.name" target="_blank"
+              >Open in Desk</a
+            >
           </Button>
         </div>
         <li>
@@ -130,12 +177,7 @@
 </template>
 
 <script setup>
-import {
-  Dialog,
-  Button,
-  LoadingIndicator,
-  createResource,
-} from '../../../src'
+import { Dialog, Button, LoadingIndicator, createResource } from '../../../src'
 import TagInput from './TagInput/TagInput.vue'
 import { ref, inject } from 'vue'
 import { onKeyDown } from '@vueuse/core'
@@ -145,7 +187,6 @@ import LucideBuilding2 from '~icons/lucide/building-2'
 import LucideLock from '~icons/lucide/lock'
 import LucideGlobe2 from '~icons/lucide/globe-2'
 
-
 const dialogType = defineModel()
 const open = ref(true)
 
diff --git a/frappe/drive/js/icons.js b/frappe/drive/js/icons.js
index 39deeb631..90883207b 100644
--- a/frappe/drive/js/icons.js
+++ b/frappe/drive/js/icons.js
@@ -1,668 +1,668 @@
-import ToggleRight from "~icons/lucide/toggle-right"
-import PlusSquare from "~icons/lucide/plus-square"
-import Sunset from "~icons/lucide/sunset"
-import Battery from "~icons/lucide/battery"
-import LogIn from "~icons/lucide/log-in"
-import Map from "~icons/lucide/map"
-import CornerUpRight from "~icons/lucide/corner-up-right"
-import ZapOff from "~icons/lucide/zap-off"
-import BarChart2 from "~icons/lucide/bar-chart-2"
-import Home from "~icons/lucide/home"
-import Contact from "~icons/lucide/contact"
-import Coffee from "~icons/lucide/coffee"
-import GitBranch from "~icons/lucide/git-branch"
-import TrendingUp from "~icons/lucide/trending-up"
-import EyeOff from "~icons/lucide/eye-off"
-import Octagon from "~icons/lucide/octagon"
-import Edit from "~icons/lucide/edit"
-import RefreshCcw from "~icons/lucide/refresh-ccw"
-import Truck from "~icons/lucide/truck"
-import Volume2 from "~icons/lucide/volume-2"
-import Star from "~icons/lucide/star"
-import MinusCircle from "~icons/lucide/minus-circle"
-import UserCheck from "~icons/lucide/user-check"
-import Copy from "~icons/lucide/copy"
-import Power from "~icons/lucide/power"
-import DivideCircle from "~icons/lucide/divide-circle"
-import Grid from "~icons/lucide/grid"
-import Music from "~icons/lucide/music"
-import Slash from "~icons/lucide/slash"
-import User from "~icons/lucide/user"
-import Activity from "~icons/lucide/activity"
-import Moon from "~icons/lucide/moon"
-import Layers from "~icons/lucide/layers"
-import Smile from "~icons/lucide/smile"
-import ZoomOut from "~icons/lucide/zoom-out"
-import Volume1 from "~icons/lucide/volume-1"
-import Meh from "~icons/lucide/meh"
-import GitPullRequest from "~icons/lucide/git-pull-request"
-import Info from "~icons/lucide/info"
-import Sidebar from "~icons/lucide/sidebar"
-import ThumbsUp from "~icons/lucide/thumbs-up"
-import Share from "~icons/lucide/share"
-import Printer from "~icons/lucide/printer"
-import Voicemail from "~icons/lucide/voicemail"
-import Paperclip from "~icons/lucide/paperclip"
-import CheckSquare from "~icons/lucide/check-square"
-import Radio from "~icons/lucide/radio"
-import Hexagon from "~icons/lucide/hexagon"
-import Tablet from "~icons/lucide/tablet"
-import HardDrive from "~icons/lucide/hard-drive"
-import Heart from "~icons/lucide/heart"
-import Send from "~icons/lucide/send"
-import Delete from "~icons/lucide/delete"
-import Link from "~icons/lucide/link"
-import Pause from "~icons/lucide/pause"
-import PhoneOutgoing from "~icons/lucide/phone-outgoing"
-import Save from "~icons/lucide/save"
-import UserX from "~icons/lucide/user-x"
-import PenTool from "~icons/lucide/pen-tool"
-import Trash2 from "~icons/lucide/trash-2"
-import GitMerge from "~icons/lucide/git-merge"
-import Headphones from "~icons/lucide/headphones"
-import Bookmark from "~icons/lucide/bookmark"
-import Airplay from "~icons/lucide/airplay"
-import GitCommit from "~icons/lucide/git-commit"
-import Tv from "~icons/lucide/tv"
-import Flag from "~icons/lucide/flag"
-import PhoneMissed from "~icons/lucide/phone-missed"
-import Terminal from "~icons/lucide/terminal"
-import MousePointer from "~icons/lucide/mouse-pointer"
-import Minimize from "~icons/lucide/minimize"
-import Zap from "~icons/lucide/zap"
-import Mic from "~icons/lucide/mic"
-import Thermometer from "~icons/lucide/thermometer"
-import Sunrise from "~icons/lucide/sunrise"
-import Folder from "~icons/lucide/folder"
-import Repeat from "~icons/lucide/repeat"
-import XCircle from "~icons/lucide/x-circle"
-import FolderPlus from "~icons/lucide/folder-plus"
-import Settings from "~icons/lucide/settings"
-import MessageSquare from "~icons/lucide/message-square"
-import Cloud from "~icons/lucide/cloud"
-import MicOff from "~icons/lucide/mic-off"
-import ExternalLink from "~icons/lucide/external-link"
-import Menu from "~icons/lucide/menu"
-import PauseCircle from "~icons/lucide/pause-circle"
-import ToggleLeft from "~icons/lucide/toggle-left"
-import Speaker from "~icons/lucide/speaker"
-import Image from "~icons/lucide/image"
-import Wifi from "~icons/lucide/wifi"
-import FileText from "~icons/lucide/file-text"
-import SkipBack from "~icons/lucide/skip-back"
-import SkipForward from "~icons/lucide/skip-forward"
-import Award from "~icons/lucide/award"
-import RefreshCw from "~icons/lucide/refresh-cw"
-import Video from "~icons/lucide/video"
-import Camera from "~icons/lucide/camera"
-import Loader from "~icons/lucide/loader"
-import Book from "~icons/lucide/book"
-import Tag from "~icons/lucide/tag"
-import Phone from "~icons/lucide/phone"
-import Rewind from "~icons/lucide/rewind"
-import MessageCircle from "~icons/lucide/message-circle"
-import VolumeX from "~icons/lucide/volume-x"
-import List from "~icons/lucide/list"
-import Key from "~icons/lucide/key"
-import Trash from "~icons/lucide/trash"
-import Briefcase from "~icons/lucide/briefcase"
-import Share2 from "~icons/lucide/share-2"
-import ZoomIn from "~icons/lucide/zoom-in"
-import Wind from "~icons/lucide/wind"
-import Move from "~icons/lucide/move"
-import Compass from "~icons/lucide/compass"
-import Gift from "~icons/lucide/gift"
-import Frown from "~icons/lucide/frown"
-import Upload from "~icons/lucide/upload"
-import UserMinus from "~icons/lucide/user-minus"
-import Database from "~icons/lucide/database"
-import Search from "~icons/lucide/search"
-import Globe from "~icons/lucide/globe"
-import Bell from "~icons/lucide/bell"
-import Monitor from "~icons/lucide/monitor"
-import Scissors from "~icons/lucide/scissors"
-import FastForward from "~icons/lucide/fast-forward"
-import PieChart from "~icons/lucide/pie-chart"
-import MoreVertical from "~icons/lucide/more-vertical"
-import Eye from "~icons/lucide/eye"
-import VideoOff from "~icons/lucide/video-off"
-import Smartphone from "~icons/lucide/smartphone"
-import Server from "~icons/lucide/server"
-import PhoneOff from "~icons/lucide/phone-off"
-import WifiOff from "~icons/lucide/wifi-off"
-import Cast from "~icons/lucide/cast"
-import Package from "~icons/lucide/package"
-import DivideSquare from "~icons/lucide/divide-square"
-import Filter from "~icons/lucide/filter"
-import PlusCircle from "~icons/lucide/plus-circle"
-import Edit2 from "~icons/lucide/edit-2"
-import ChevronsRight from "~icons/lucide/chevrons-right"
-import Layout from "~icons/lucide/layout"
-import Unlock from "~icons/lucide/unlock"
-import Navigation from "~icons/lucide/navigation"
-import LogOut from "~icons/lucide/log-out"
-import Underline from "~icons/lucide/underline"
-import Triangle from "~icons/lucide/triangle"
-import Watch from "~icons/lucide/watch"
-import Disc from "~icons/lucide/disc"
-import StopCircle from "~icons/lucide/stop-circle"
-import Film from "~icons/lucide/film"
-import PlayCircle from "~icons/lucide/play-circle"
-import UserPlus from "~icons/lucide/user-plus"
-import Type from "~icons/lucide/type"
-import Rss from "~icons/lucide/rss"
-import XSquare from "~icons/lucide/x-square"
-import PhoneForwarded from "~icons/lucide/phone-forwarded"
-import Calendar from "~icons/lucide/calendar"
-import File from "~icons/lucide/file"
-import ThumbsDown from "~icons/lucide/thumbs-down"
-import Download from "~icons/lucide/download"
-import Umbrella from "~icons/lucide/umbrella"
-import Sun from "~icons/lucide/sun"
-import PhoneCall from "~icons/lucide/phone-call"
-import AlertCircle from "~icons/lucide/alert-circle"
-import CheckCircle from "~icons/lucide/check-circle"
-import Target from "~icons/lucide/target"
-import LifeBuoy from "~icons/lucide/life-buoy"
-import Shield from "~icons/lucide/shield"
-import Cpu from "~icons/lucide/cpu"
-import Users from "~icons/lucide/users"
-import Mail from "~icons/lucide/mail"
-import RotateCw from "~icons/lucide/rotate-cw"
-import PhoneIncoming from "~icons/lucide/phone-incoming"
-import CreditCard from "~icons/lucide/credit-card"
-import Lock from "~icons/lucide/lock"
-import Maximize from "~icons/lucide/maximize"
-import Inbox from "~icons/lucide/inbox"
-import ShoppingCart from "~icons/lucide/shopping-cart"
-import Play from "~icons/lucide/play"
-import Code from "~icons/lucide/code"
-import RotateCcw from "~icons/lucide/rotate-ccw"
-import MoreHorizontal from "~icons/lucide/more-horizontal"
-import Percent from "~icons/lucide/percent"
-import HelpCircle from "~icons/lucide/help-circle"
-import Shuffle from "~icons/lucide/shuffle"
-import Sliders from "~icons/lucide/sliders"
-import Volume from "~icons/lucide/volume"
-import Building from "~icons/lucide/building"
+import ToggleRight from '~icons/lucide/toggle-right'
+import PlusSquare from '~icons/lucide/plus-square'
+import Sunset from '~icons/lucide/sunset'
+import Battery from '~icons/lucide/battery'
+import LogIn from '~icons/lucide/log-in'
+import Map from '~icons/lucide/map'
+import CornerUpRight from '~icons/lucide/corner-up-right'
+import ZapOff from '~icons/lucide/zap-off'
+import BarChart2 from '~icons/lucide/bar-chart-2'
+import Home from '~icons/lucide/home'
+import Contact from '~icons/lucide/contact'
+import Coffee from '~icons/lucide/coffee'
+import GitBranch from '~icons/lucide/git-branch'
+import TrendingUp from '~icons/lucide/trending-up'
+import EyeOff from '~icons/lucide/eye-off'
+import Octagon from '~icons/lucide/octagon'
+import Edit from '~icons/lucide/edit'
+import RefreshCcw from '~icons/lucide/refresh-ccw'
+import Truck from '~icons/lucide/truck'
+import Volume2 from '~icons/lucide/volume-2'
+import Star from '~icons/lucide/star'
+import MinusCircle from '~icons/lucide/minus-circle'
+import UserCheck from '~icons/lucide/user-check'
+import Copy from '~icons/lucide/copy'
+import Power from '~icons/lucide/power'
+import DivideCircle from '~icons/lucide/divide-circle'
+import Grid from '~icons/lucide/grid'
+import Music from '~icons/lucide/music'
+import Slash from '~icons/lucide/slash'
+import User from '~icons/lucide/user'
+import Activity from '~icons/lucide/activity'
+import Moon from '~icons/lucide/moon'
+import Layers from '~icons/lucide/layers'
+import Smile from '~icons/lucide/smile'
+import ZoomOut from '~icons/lucide/zoom-out'
+import Volume1 from '~icons/lucide/volume-1'
+import Meh from '~icons/lucide/meh'
+import GitPullRequest from '~icons/lucide/git-pull-request'
+import Info from '~icons/lucide/info'
+import Sidebar from '~icons/lucide/sidebar'
+import ThumbsUp from '~icons/lucide/thumbs-up'
+import Share from '~icons/lucide/share'
+import Printer from '~icons/lucide/printer'
+import Voicemail from '~icons/lucide/voicemail'
+import Paperclip from '~icons/lucide/paperclip'
+import CheckSquare from '~icons/lucide/check-square'
+import Radio from '~icons/lucide/radio'
+import Hexagon from '~icons/lucide/hexagon'
+import Tablet from '~icons/lucide/tablet'
+import HardDrive from '~icons/lucide/hard-drive'
+import Heart from '~icons/lucide/heart'
+import Send from '~icons/lucide/send'
+import Delete from '~icons/lucide/delete'
+import Link from '~icons/lucide/link'
+import Pause from '~icons/lucide/pause'
+import PhoneOutgoing from '~icons/lucide/phone-outgoing'
+import Save from '~icons/lucide/save'
+import UserX from '~icons/lucide/user-x'
+import PenTool from '~icons/lucide/pen-tool'
+import Trash2 from '~icons/lucide/trash-2'
+import GitMerge from '~icons/lucide/git-merge'
+import Headphones from '~icons/lucide/headphones'
+import Bookmark from '~icons/lucide/bookmark'
+import Airplay from '~icons/lucide/airplay'
+import GitCommit from '~icons/lucide/git-commit'
+import Tv from '~icons/lucide/tv'
+import Flag from '~icons/lucide/flag'
+import PhoneMissed from '~icons/lucide/phone-missed'
+import Terminal from '~icons/lucide/terminal'
+import MousePointer from '~icons/lucide/mouse-pointer'
+import Minimize from '~icons/lucide/minimize'
+import Zap from '~icons/lucide/zap'
+import Mic from '~icons/lucide/mic'
+import Thermometer from '~icons/lucide/thermometer'
+import Sunrise from '~icons/lucide/sunrise'
+import Folder from '~icons/lucide/folder'
+import Repeat from '~icons/lucide/repeat'
+import XCircle from '~icons/lucide/x-circle'
+import FolderPlus from '~icons/lucide/folder-plus'
+import Settings from '~icons/lucide/settings'
+import MessageSquare from '~icons/lucide/message-square'
+import Cloud from '~icons/lucide/cloud'
+import MicOff from '~icons/lucide/mic-off'
+import ExternalLink from '~icons/lucide/external-link'
+import Menu from '~icons/lucide/menu'
+import PauseCircle from '~icons/lucide/pause-circle'
+import ToggleLeft from '~icons/lucide/toggle-left'
+import Speaker from '~icons/lucide/speaker'
+import Image from '~icons/lucide/image'
+import Wifi from '~icons/lucide/wifi'
+import FileText from '~icons/lucide/file-text'
+import SkipBack from '~icons/lucide/skip-back'
+import SkipForward from '~icons/lucide/skip-forward'
+import Award from '~icons/lucide/award'
+import RefreshCw from '~icons/lucide/refresh-cw'
+import Video from '~icons/lucide/video'
+import Camera from '~icons/lucide/camera'
+import Loader from '~icons/lucide/loader'
+import Book from '~icons/lucide/book'
+import Tag from '~icons/lucide/tag'
+import Phone from '~icons/lucide/phone'
+import Rewind from '~icons/lucide/rewind'
+import MessageCircle from '~icons/lucide/message-circle'
+import VolumeX from '~icons/lucide/volume-x'
+import List from '~icons/lucide/list'
+import Key from '~icons/lucide/key'
+import Trash from '~icons/lucide/trash'
+import Briefcase from '~icons/lucide/briefcase'
+import Share2 from '~icons/lucide/share-2'
+import ZoomIn from '~icons/lucide/zoom-in'
+import Wind from '~icons/lucide/wind'
+import Move from '~icons/lucide/move'
+import Compass from '~icons/lucide/compass'
+import Gift from '~icons/lucide/gift'
+import Frown from '~icons/lucide/frown'
+import Upload from '~icons/lucide/upload'
+import UserMinus from '~icons/lucide/user-minus'
+import Database from '~icons/lucide/database'
+import Search from '~icons/lucide/search'
+import Globe from '~icons/lucide/globe'
+import Bell from '~icons/lucide/bell'
+import Monitor from '~icons/lucide/monitor'
+import Scissors from '~icons/lucide/scissors'
+import FastForward from '~icons/lucide/fast-forward'
+import PieChart from '~icons/lucide/pie-chart'
+import MoreVertical from '~icons/lucide/more-vertical'
+import Eye from '~icons/lucide/eye'
+import VideoOff from '~icons/lucide/video-off'
+import Smartphone from '~icons/lucide/smartphone'
+import Server from '~icons/lucide/server'
+import PhoneOff from '~icons/lucide/phone-off'
+import WifiOff from '~icons/lucide/wifi-off'
+import Cast from '~icons/lucide/cast'
+import Package from '~icons/lucide/package'
+import DivideSquare from '~icons/lucide/divide-square'
+import Filter from '~icons/lucide/filter'
+import PlusCircle from '~icons/lucide/plus-circle'
+import Edit2 from '~icons/lucide/edit-2'
+import ChevronsRight from '~icons/lucide/chevrons-right'
+import Layout from '~icons/lucide/layout'
+import Unlock from '~icons/lucide/unlock'
+import Navigation from '~icons/lucide/navigation'
+import LogOut from '~icons/lucide/log-out'
+import Underline from '~icons/lucide/underline'
+import Triangle from '~icons/lucide/triangle'
+import Watch from '~icons/lucide/watch'
+import Disc from '~icons/lucide/disc'
+import StopCircle from '~icons/lucide/stop-circle'
+import Film from '~icons/lucide/film'
+import PlayCircle from '~icons/lucide/play-circle'
+import UserPlus from '~icons/lucide/user-plus'
+import Type from '~icons/lucide/type'
+import Rss from '~icons/lucide/rss'
+import XSquare from '~icons/lucide/x-square'
+import PhoneForwarded from '~icons/lucide/phone-forwarded'
+import Calendar from '~icons/lucide/calendar'
+import File from '~icons/lucide/file'
+import ThumbsDown from '~icons/lucide/thumbs-down'
+import Download from '~icons/lucide/download'
+import Umbrella from '~icons/lucide/umbrella'
+import Sun from '~icons/lucide/sun'
+import PhoneCall from '~icons/lucide/phone-call'
+import AlertCircle from '~icons/lucide/alert-circle'
+import CheckCircle from '~icons/lucide/check-circle'
+import Target from '~icons/lucide/target'
+import LifeBuoy from '~icons/lucide/life-buoy'
+import Shield from '~icons/lucide/shield'
+import Cpu from '~icons/lucide/cpu'
+import Users from '~icons/lucide/users'
+import Mail from '~icons/lucide/mail'
+import RotateCw from '~icons/lucide/rotate-cw'
+import PhoneIncoming from '~icons/lucide/phone-incoming'
+import CreditCard from '~icons/lucide/credit-card'
+import Lock from '~icons/lucide/lock'
+import Maximize from '~icons/lucide/maximize'
+import Inbox from '~icons/lucide/inbox'
+import ShoppingCart from '~icons/lucide/shopping-cart'
+import Play from '~icons/lucide/play'
+import Code from '~icons/lucide/code'
+import RotateCcw from '~icons/lucide/rotate-ccw'
+import MoreHorizontal from '~icons/lucide/more-horizontal'
+import Percent from '~icons/lucide/percent'
+import HelpCircle from '~icons/lucide/help-circle'
+import Shuffle from '~icons/lucide/shuffle'
+import Sliders from '~icons/lucide/sliders'
+import Volume from '~icons/lucide/volume'
+import Building from '~icons/lucide/building'
 
 const icons = {
-  "toggle-right": ToggleRight,
-  "plus-square": PlusSquare,
-  sunset: Sunset,
-  battery: Battery,
-  "log-in": LogIn,
-  map: Map,
-  "corner-up-right": CornerUpRight,
-  "zap-off": ZapOff,
-  "bar-chart-2": BarChart2,
-  home: Home,
-  coffee: Coffee,
-  "git-branch": GitBranch,
-  "trending-up": TrendingUp,
-  "eye-off": EyeOff,
-  octagon: Octagon,
-  edit: Edit,
-  "refresh-ccw": RefreshCcw,
-  truck: Truck,
-  "volume-2": Volume2,
-  star: Star,
-  "minus-circle": MinusCircle,
-  "user-check": UserCheck,
-  copy: Copy,
-  power: Power,
-  "divide-circle": DivideCircle,
-  grid: Grid,
-  music: Music,
-  slash: Slash,
-  user: User,
-  activity: Activity,
-  moon: Moon,
-  layers: Layers,
-  smile: Smile,
-  "zoom-out": ZoomOut,
-  "volume-1": Volume1,
-  meh: Meh,
-  "git-pull-request": GitPullRequest,
-  info: Info,
-  sidebar: Sidebar,
-  "thumbs-up": ThumbsUp,
-  share: Share,
-  printer: Printer,
-  voicemail: Voicemail,
-  paperclip: Paperclip,
-  "check-square": CheckSquare,
-  radio: Radio,
-  hexagon: Hexagon,
-  tablet: Tablet,
-  "hard-drive": HardDrive,
-  heart: Heart,
-  send: Send,
-  delete: Delete,
-  link: Link,
-  pause: Pause,
-  "phone-outgoing": PhoneOutgoing,
-  save: Save,
-  "user-x": UserX,
-  "pen-tool": PenTool,
-  "trash-2": Trash2,
-  "git-merge": GitMerge,
-  headphones: Headphones,
-  bookmark: Bookmark,
-  airplay: Airplay,
-  "git-commit": GitCommit,
-  tv: Tv,
-  flag: Flag,
-  "phone-missed": PhoneMissed,
-  terminal: Terminal,
-  "mouse-pointer": MousePointer,
-  minimize: Minimize,
-  zap: Zap,
-  mic: Mic,
-  thermometer: Thermometer,
-  sunrise: Sunrise,
-  folder: Folder,
-  repeat: Repeat,
-  "x-circle": XCircle,
-  "folder-plus": FolderPlus,
-  settings: Settings,
-  "message-square": MessageSquare,
-  cloud: Cloud,
-  "mic-off": MicOff,
-  "external-link": ExternalLink,
-  menu: Menu,
-  "pause-circle": PauseCircle,
-  "toggle-left": ToggleLeft,
-  speaker: Speaker,
-  image: Image,
-  wifi: Wifi,
-  "file-text": FileText,
-  "skip-back": SkipBack,
-  "skip-forward": SkipForward,
-  award: Award,
-  "refresh-cw": RefreshCw,
-  video: Video,
-  camera: Camera,
-  loader: Loader,
-  book: Book,
-  tag: Tag,
-  phone: Phone,
-  rewind: Rewind,
-  "message-circle": MessageCircle,
-  "volume-x": VolumeX,
-  list: List,
-  key: Key,
-  trash: Trash,
-  briefcase: Briefcase,
-  "share-2": Share2,
-  "zoom-in": ZoomIn,
-  wind: Wind,
-  move: Move,
-  compass: Compass,
-  gift: Gift,
-  frown: Frown,
-  upload: Upload,
-  "user-minus": UserMinus,
-  database: Database,
-  search: Search,
-  globe: Globe,
-  bell: Bell,
-  monitor: Monitor,
-  scissors: Scissors,
-  "fast-forward": FastForward,
-  "pie-chart": PieChart,
-  "more-vertical": MoreVertical,
-  eye: Eye,
-  "video-off": VideoOff,
-  smartphone: Smartphone,
-  server: Server,
-  "phone-off": PhoneOff,
-  "wifi-off": WifiOff,
-  cast: Cast,
-  package: Package,
-  "divide-square": DivideSquare,
-  filter: Filter,
-  "plus-circle": PlusCircle,
-  "edit-2": Edit2,
-  "chevrons-right": ChevronsRight,
-  layout: Layout,
-  unlock: Unlock,
-  navigation: Navigation,
-  "log-out": LogOut,
-  underline: Underline,
-  triangle: Triangle,
-  watch: Watch,
-  disc: Disc,
-  "stop-circle": StopCircle,
-  film: Film,
-  "play-circle": PlayCircle,
-  "user-plus": UserPlus,
-  type: Type,
-  rss: Rss,
-  "x-square": XSquare,
-  "phone-forwarded": PhoneForwarded,
-  calendar: Calendar,
-  file: File,
-  "thumbs-down": ThumbsDown,
-  download: Download,
-  umbrella: Umbrella,
-  sun: Sun,
-  "phone-call": PhoneCall,
-  "alert-circle": AlertCircle,
-  "check-circle": CheckCircle,
-  target: Target,
-  "life-buoy": LifeBuoy,
-  shield: Shield,
-  cpu: Cpu,
-  users: Users,
-  mail: Mail,
-  "rotate-cw": RotateCw,
-  "phone-incoming": PhoneIncoming,
-  "credit-card": CreditCard,
-  lock: Lock,
-  maximize: Maximize,
-  inbox: Inbox,
-  "shopping-cart": ShoppingCart,
-  play: Play,
-  code: Code,
-  "rotate-ccw": RotateCcw,
-  "more-horizontal": MoreHorizontal,
-  percent: Percent,
-  "help-circle": HelpCircle,
-  shuffle: Shuffle,
-  sliders: Sliders,
-  volume: Volume,
-  "toggle-right": ToggleRight,
-  "plus-square": PlusSquare,
-  sunset: Sunset,
-  battery: Battery,
-  "log-in": LogIn,
-  map: Map,
-  "corner-up-right": CornerUpRight,
-  "zap-off": ZapOff,
-  "bar-chart-2": BarChart2,
-  home: Home,
-  coffee: Coffee,
-  "git-branch": GitBranch,
-  "trending-up": TrendingUp,
-  "eye-off": EyeOff,
-  octagon: Octagon,
-  edit: Edit,
-  "refresh-ccw": RefreshCcw,
-  truck: Truck,
-  "volume-2": Volume2,
-  star: Star,
-  "minus-circle": MinusCircle,
-  "user-check": UserCheck,
-  copy: Copy,
-  power: Power,
-  "divide-circle": DivideCircle,
-  grid: Grid,
-  music: Music,
-  slash: Slash,
-  user: User,
-  activity: Activity,
-  moon: Moon,
-  layers: Layers,
-  smile: Smile,
-  "zoom-out": ZoomOut,
-  "volume-1": Volume1,
-  meh: Meh,
-  "git-pull-request": GitPullRequest,
-  info: Info,
-  sidebar: Sidebar,
-  "thumbs-up": ThumbsUp,
-  share: Share,
-  printer: Printer,
-  voicemail: Voicemail,
-  paperclip: Paperclip,
-  "check-square": CheckSquare,
-  radio: Radio,
-  hexagon: Hexagon,
-  tablet: Tablet,
-  "hard-drive": HardDrive,
-  heart: Heart,
-  send: Send,
-  delete: Delete,
-  link: Link,
-  pause: Pause,
-  "phone-outgoing": PhoneOutgoing,
-  save: Save,
-  "user-x": UserX,
-  "pen-tool": PenTool,
-  "trash-2": Trash2,
-  "git-merge": GitMerge,
-  headphones: Headphones,
-  bookmark: Bookmark,
-  airplay: Airplay,
-  "git-commit": GitCommit,
-  tv: Tv,
-  flag: Flag,
-  "phone-missed": PhoneMissed,
-  terminal: Terminal,
-  "mouse-pointer": MousePointer,
-  minimize: Minimize,
-  zap: Zap,
-  mic: Mic,
-  thermometer: Thermometer,
-  sunrise: Sunrise,
-  folder: Folder,
-  repeat: Repeat,
-  "x-circle": XCircle,
-  "folder-plus": FolderPlus,
-  settings: Settings,
-  "message-square": MessageSquare,
-  cloud: Cloud,
-  "mic-off": MicOff,
-  "external-link": ExternalLink,
-  menu: Menu,
-  "pause-circle": PauseCircle,
-  "toggle-left": ToggleLeft,
-  speaker: Speaker,
-  image: Image,
-  wifi: Wifi,
-  "file-text": FileText,
-  "skip-back": SkipBack,
-  "skip-forward": SkipForward,
-  award: Award,
-  "refresh-cw": RefreshCw,
-  video: Video,
-  camera: Camera,
-  loader: Loader,
-  book: Book,
-  tag: Tag,
-  phone: Phone,
-  rewind: Rewind,
-  "message-circle": MessageCircle,
-  "volume-x": VolumeX,
-  list: List,
-  key: Key,
-  trash: Trash,
-  briefcase: Briefcase,
-  "share-2": Share2,
-  "zoom-in": ZoomIn,
-  wind: Wind,
-  move: Move,
-  compass: Compass,
-  gift: Gift,
-  frown: Frown,
-  upload: Upload,
-  "user-minus": UserMinus,
-  database: Database,
-  search: Search,
-  globe: Globe,
-  bell: Bell,
-  monitor: Monitor,
-  scissors: Scissors,
-  "fast-forward": FastForward,
-  "pie-chart": PieChart,
-  "more-vertical": MoreVertical,
-  eye: Eye,
-  "video-off": VideoOff,
-  smartphone: Smartphone,
-  server: Server,
-  "phone-off": PhoneOff,
-  "wifi-off": WifiOff,
-  cast: Cast,
-  package: Package,
-  "divide-square": DivideSquare,
-  filter: Filter,
-  "plus-circle": PlusCircle,
-  "edit-2": Edit2,
-  "chevrons-right": ChevronsRight,
-  layout: Layout,
-  unlock: Unlock,
-  navigation: Navigation,
-  "log-out": LogOut,
-  underline: Underline,
-  triangle: Triangle,
-  watch: Watch,
-  disc: Disc,
-  "stop-circle": StopCircle,
-  film: Film,
-  "play-circle": PlayCircle,
-  "user-plus": UserPlus,
-  type: Type,
-  rss: Rss,
-  "x-square": XSquare,
-  "phone-forwarded": PhoneForwarded,
-  calendar: Calendar,
-  file: File,
-  "thumbs-down": ThumbsDown,
-  download: Download,
-  umbrella: Umbrella,
-  sun: Sun,
-  "phone-call": PhoneCall,
-  "alert-circle": AlertCircle,
-  "check-circle": CheckCircle,
-  target: Target,
-  "life-buoy": LifeBuoy,
-  shield: Shield,
-  cpu: Cpu,
-  users: Users,
-  mail: Mail,
-  "rotate-cw": RotateCw,
-  "phone-incoming": PhoneIncoming,
-  "credit-card": CreditCard,
-  lock: Lock,
-  maximize: Maximize,
-  inbox: Inbox,
-  "shopping-cart": ShoppingCart,
-  play: Play,
-  code: Code,
-  "rotate-ccw": RotateCcw,
-  "more-horizontal": MoreHorizontal,
-  percent: Percent,
-  "help-circle": HelpCircle,
-  shuffle: Shuffle,
-  sliders: Sliders,
-  volume: Volume,
-  "toggle-right": ToggleRight,
-  "plus-square": PlusSquare,
-  sunset: Sunset,
-  battery: Battery,
-  "log-in": LogIn,
-  map: Map,
-  "corner-up-right": CornerUpRight,
-  "zap-off": ZapOff,
-  "bar-chart-2": BarChart2,
-  home: Home,
-  coffee: Coffee,
-  "git-branch": GitBranch,
-  "trending-up": TrendingUp,
-  "eye-off": EyeOff,
-  octagon: Octagon,
-  edit: Edit,
-  "refresh-ccw": RefreshCcw,
-  truck: Truck,
-  "volume-2": Volume2,
-  star: Star,
-  "minus-circle": MinusCircle,
-  "user-check": UserCheck,
-  copy: Copy,
-  power: Power,
-  "divide-circle": DivideCircle,
-  grid: Grid,
-  music: Music,
-  slash: Slash,
-  user: User,
-  activity: Activity,
-  moon: Moon,
-  layers: Layers,
-  smile: Smile,
-  "zoom-out": ZoomOut,
-  "volume-1": Volume1,
-  meh: Meh,
-  "git-pull-request": GitPullRequest,
-  info: Info,
-  sidebar: Sidebar,
-  "thumbs-up": ThumbsUp,
-  share: Share,
-  printer: Printer,
-  voicemail: Voicemail,
-  paperclip: Paperclip,
-  "check-square": CheckSquare,
-  radio: Radio,
-  hexagon: Hexagon,
-  tablet: Tablet,
-  "hard-drive": HardDrive,
-  heart: Heart,
-  send: Send,
-  delete: Delete,
-  link: Link,
-  pause: Pause,
-  "phone-outgoing": PhoneOutgoing,
-  save: Save,
-  "user-x": UserX,
-  "pen-tool": PenTool,
-  "trash-2": Trash2,
-  "git-merge": GitMerge,
-  headphones: Headphones,
-  bookmark: Bookmark,
-  airplay: Airplay,
-  "git-commit": GitCommit,
-  tv: Tv,
-  flag: Flag,
-  "phone-missed": PhoneMissed,
-  terminal: Terminal,
-  "mouse-pointer": MousePointer,
-  minimize: Minimize,
-  zap: Zap,
-  mic: Mic,
-  thermometer: Thermometer,
-  sunrise: Sunrise,
-  folder: Folder,
-  repeat: Repeat,
-  "x-circle": XCircle,
-  "folder-plus": FolderPlus,
-  settings: Settings,
-  "message-square": MessageSquare,
-  cloud: Cloud,
-  "mic-off": MicOff,
-  "external-link": ExternalLink,
-  menu: Menu,
-  "pause-circle": PauseCircle,
-  "toggle-left": ToggleLeft,
-  speaker: Speaker,
-  image: Image,
-  wifi: Wifi,
-  "file-text": FileText,
-  "skip-back": SkipBack,
-  "skip-forward": SkipForward,
-  award: Award,
-  "refresh-cw": RefreshCw,
-  video: Video,
-  camera: Camera,
-  loader: Loader,
-  book: Book,
-  tag: Tag,
-  phone: Phone,
-  rewind: Rewind,
-  "message-circle": MessageCircle,
-  "volume-x": VolumeX,
-  list: List,
-  building: Building,
-  contact: Contact,
+  'toggle-right': ToggleRight,
+  'plus-square': PlusSquare,
+  'sunset': Sunset,
+  'battery': Battery,
+  'log-in': LogIn,
+  'map': Map,
+  'corner-up-right': CornerUpRight,
+  'zap-off': ZapOff,
+  'bar-chart-2': BarChart2,
+  'home': Home,
+  'coffee': Coffee,
+  'git-branch': GitBranch,
+  'trending-up': TrendingUp,
+  'eye-off': EyeOff,
+  'octagon': Octagon,
+  'edit': Edit,
+  'refresh-ccw': RefreshCcw,
+  'truck': Truck,
+  'volume-2': Volume2,
+  'star': Star,
+  'minus-circle': MinusCircle,
+  'user-check': UserCheck,
+  'copy': Copy,
+  'power': Power,
+  'divide-circle': DivideCircle,
+  'grid': Grid,
+  'music': Music,
+  'slash': Slash,
+  'user': User,
+  'activity': Activity,
+  'moon': Moon,
+  'layers': Layers,
+  'smile': Smile,
+  'zoom-out': ZoomOut,
+  'volume-1': Volume1,
+  'meh': Meh,
+  'git-pull-request': GitPullRequest,
+  'info': Info,
+  'sidebar': Sidebar,
+  'thumbs-up': ThumbsUp,
+  'share': Share,
+  'printer': Printer,
+  'voicemail': Voicemail,
+  'paperclip': Paperclip,
+  'check-square': CheckSquare,
+  'radio': Radio,
+  'hexagon': Hexagon,
+  'tablet': Tablet,
+  'hard-drive': HardDrive,
+  'heart': Heart,
+  'send': Send,
+  'delete': Delete,
+  'link': Link,
+  'pause': Pause,
+  'phone-outgoing': PhoneOutgoing,
+  'save': Save,
+  'user-x': UserX,
+  'pen-tool': PenTool,
+  'trash-2': Trash2,
+  'git-merge': GitMerge,
+  'headphones': Headphones,
+  'bookmark': Bookmark,
+  'airplay': Airplay,
+  'git-commit': GitCommit,
+  'tv': Tv,
+  'flag': Flag,
+  'phone-missed': PhoneMissed,
+  'terminal': Terminal,
+  'mouse-pointer': MousePointer,
+  'minimize': Minimize,
+  'zap': Zap,
+  'mic': Mic,
+  'thermometer': Thermometer,
+  'sunrise': Sunrise,
+  'folder': Folder,
+  'repeat': Repeat,
+  'x-circle': XCircle,
+  'folder-plus': FolderPlus,
+  'settings': Settings,
+  'message-square': MessageSquare,
+  'cloud': Cloud,
+  'mic-off': MicOff,
+  'external-link': ExternalLink,
+  'menu': Menu,
+  'pause-circle': PauseCircle,
+  'toggle-left': ToggleLeft,
+  'speaker': Speaker,
+  'image': Image,
+  'wifi': Wifi,
+  'file-text': FileText,
+  'skip-back': SkipBack,
+  'skip-forward': SkipForward,
+  'award': Award,
+  'refresh-cw': RefreshCw,
+  'video': Video,
+  'camera': Camera,
+  'loader': Loader,
+  'book': Book,
+  'tag': Tag,
+  'phone': Phone,
+  'rewind': Rewind,
+  'message-circle': MessageCircle,
+  'volume-x': VolumeX,
+  'list': List,
+  'key': Key,
+  'trash': Trash,
+  'briefcase': Briefcase,
+  'share-2': Share2,
+  'zoom-in': ZoomIn,
+  'wind': Wind,
+  'move': Move,
+  'compass': Compass,
+  'gift': Gift,
+  'frown': Frown,
+  'upload': Upload,
+  'user-minus': UserMinus,
+  'database': Database,
+  'search': Search,
+  'globe': Globe,
+  'bell': Bell,
+  'monitor': Monitor,
+  'scissors': Scissors,
+  'fast-forward': FastForward,
+  'pie-chart': PieChart,
+  'more-vertical': MoreVertical,
+  'eye': Eye,
+  'video-off': VideoOff,
+  'smartphone': Smartphone,
+  'server': Server,
+  'phone-off': PhoneOff,
+  'wifi-off': WifiOff,
+  'cast': Cast,
+  'package': Package,
+  'divide-square': DivideSquare,
+  'filter': Filter,
+  'plus-circle': PlusCircle,
+  'edit-2': Edit2,
+  'chevrons-right': ChevronsRight,
+  'layout': Layout,
+  'unlock': Unlock,
+  'navigation': Navigation,
+  'log-out': LogOut,
+  'underline': Underline,
+  'triangle': Triangle,
+  'watch': Watch,
+  'disc': Disc,
+  'stop-circle': StopCircle,
+  'film': Film,
+  'play-circle': PlayCircle,
+  'user-plus': UserPlus,
+  'type': Type,
+  'rss': Rss,
+  'x-square': XSquare,
+  'phone-forwarded': PhoneForwarded,
+  'calendar': Calendar,
+  'file': File,
+  'thumbs-down': ThumbsDown,
+  'download': Download,
+  'umbrella': Umbrella,
+  'sun': Sun,
+  'phone-call': PhoneCall,
+  'alert-circle': AlertCircle,
+  'check-circle': CheckCircle,
+  'target': Target,
+  'life-buoy': LifeBuoy,
+  'shield': Shield,
+  'cpu': Cpu,
+  'users': Users,
+  'mail': Mail,
+  'rotate-cw': RotateCw,
+  'phone-incoming': PhoneIncoming,
+  'credit-card': CreditCard,
+  'lock': Lock,
+  'maximize': Maximize,
+  'inbox': Inbox,
+  'shopping-cart': ShoppingCart,
+  'play': Play,
+  'code': Code,
+  'rotate-ccw': RotateCcw,
+  'more-horizontal': MoreHorizontal,
+  'percent': Percent,
+  'help-circle': HelpCircle,
+  'shuffle': Shuffle,
+  'sliders': Sliders,
+  'volume': Volume,
+  'toggle-right': ToggleRight,
+  'plus-square': PlusSquare,
+  'sunset': Sunset,
+  'battery': Battery,
+  'log-in': LogIn,
+  'map': Map,
+  'corner-up-right': CornerUpRight,
+  'zap-off': ZapOff,
+  'bar-chart-2': BarChart2,
+  'home': Home,
+  'coffee': Coffee,
+  'git-branch': GitBranch,
+  'trending-up': TrendingUp,
+  'eye-off': EyeOff,
+  'octagon': Octagon,
+  'edit': Edit,
+  'refresh-ccw': RefreshCcw,
+  'truck': Truck,
+  'volume-2': Volume2,
+  'star': Star,
+  'minus-circle': MinusCircle,
+  'user-check': UserCheck,
+  'copy': Copy,
+  'power': Power,
+  'divide-circle': DivideCircle,
+  'grid': Grid,
+  'music': Music,
+  'slash': Slash,
+  'user': User,
+  'activity': Activity,
+  'moon': Moon,
+  'layers': Layers,
+  'smile': Smile,
+  'zoom-out': ZoomOut,
+  'volume-1': Volume1,
+  'meh': Meh,
+  'git-pull-request': GitPullRequest,
+  'info': Info,
+  'sidebar': Sidebar,
+  'thumbs-up': ThumbsUp,
+  'share': Share,
+  'printer': Printer,
+  'voicemail': Voicemail,
+  'paperclip': Paperclip,
+  'check-square': CheckSquare,
+  'radio': Radio,
+  'hexagon': Hexagon,
+  'tablet': Tablet,
+  'hard-drive': HardDrive,
+  'heart': Heart,
+  'send': Send,
+  'delete': Delete,
+  'link': Link,
+  'pause': Pause,
+  'phone-outgoing': PhoneOutgoing,
+  'save': Save,
+  'user-x': UserX,
+  'pen-tool': PenTool,
+  'trash-2': Trash2,
+  'git-merge': GitMerge,
+  'headphones': Headphones,
+  'bookmark': Bookmark,
+  'airplay': Airplay,
+  'git-commit': GitCommit,
+  'tv': Tv,
+  'flag': Flag,
+  'phone-missed': PhoneMissed,
+  'terminal': Terminal,
+  'mouse-pointer': MousePointer,
+  'minimize': Minimize,
+  'zap': Zap,
+  'mic': Mic,
+  'thermometer': Thermometer,
+  'sunrise': Sunrise,
+  'folder': Folder,
+  'repeat': Repeat,
+  'x-circle': XCircle,
+  'folder-plus': FolderPlus,
+  'settings': Settings,
+  'message-square': MessageSquare,
+  'cloud': Cloud,
+  'mic-off': MicOff,
+  'external-link': ExternalLink,
+  'menu': Menu,
+  'pause-circle': PauseCircle,
+  'toggle-left': ToggleLeft,
+  'speaker': Speaker,
+  'image': Image,
+  'wifi': Wifi,
+  'file-text': FileText,
+  'skip-back': SkipBack,
+  'skip-forward': SkipForward,
+  'award': Award,
+  'refresh-cw': RefreshCw,
+  'video': Video,
+  'camera': Camera,
+  'loader': Loader,
+  'book': Book,
+  'tag': Tag,
+  'phone': Phone,
+  'rewind': Rewind,
+  'message-circle': MessageCircle,
+  'volume-x': VolumeX,
+  'list': List,
+  'key': Key,
+  'trash': Trash,
+  'briefcase': Briefcase,
+  'share-2': Share2,
+  'zoom-in': ZoomIn,
+  'wind': Wind,
+  'move': Move,
+  'compass': Compass,
+  'gift': Gift,
+  'frown': Frown,
+  'upload': Upload,
+  'user-minus': UserMinus,
+  'database': Database,
+  'search': Search,
+  'globe': Globe,
+  'bell': Bell,
+  'monitor': Monitor,
+  'scissors': Scissors,
+  'fast-forward': FastForward,
+  'pie-chart': PieChart,
+  'more-vertical': MoreVertical,
+  'eye': Eye,
+  'video-off': VideoOff,
+  'smartphone': Smartphone,
+  'server': Server,
+  'phone-off': PhoneOff,
+  'wifi-off': WifiOff,
+  'cast': Cast,
+  'package': Package,
+  'divide-square': DivideSquare,
+  'filter': Filter,
+  'plus-circle': PlusCircle,
+  'edit-2': Edit2,
+  'chevrons-right': ChevronsRight,
+  'layout': Layout,
+  'unlock': Unlock,
+  'navigation': Navigation,
+  'log-out': LogOut,
+  'underline': Underline,
+  'triangle': Triangle,
+  'watch': Watch,
+  'disc': Disc,
+  'stop-circle': StopCircle,
+  'film': Film,
+  'play-circle': PlayCircle,
+  'user-plus': UserPlus,
+  'type': Type,
+  'rss': Rss,
+  'x-square': XSquare,
+  'phone-forwarded': PhoneForwarded,
+  'calendar': Calendar,
+  'file': File,
+  'thumbs-down': ThumbsDown,
+  'download': Download,
+  'umbrella': Umbrella,
+  'sun': Sun,
+  'phone-call': PhoneCall,
+  'alert-circle': AlertCircle,
+  'check-circle': CheckCircle,
+  'target': Target,
+  'life-buoy': LifeBuoy,
+  'shield': Shield,
+  'cpu': Cpu,
+  'users': Users,
+  'mail': Mail,
+  'rotate-cw': RotateCw,
+  'phone-incoming': PhoneIncoming,
+  'credit-card': CreditCard,
+  'lock': Lock,
+  'maximize': Maximize,
+  'inbox': Inbox,
+  'shopping-cart': ShoppingCart,
+  'play': Play,
+  'code': Code,
+  'rotate-ccw': RotateCcw,
+  'more-horizontal': MoreHorizontal,
+  'percent': Percent,
+  'help-circle': HelpCircle,
+  'shuffle': Shuffle,
+  'sliders': Sliders,
+  'volume': Volume,
+  'toggle-right': ToggleRight,
+  'plus-square': PlusSquare,
+  'sunset': Sunset,
+  'battery': Battery,
+  'log-in': LogIn,
+  'map': Map,
+  'corner-up-right': CornerUpRight,
+  'zap-off': ZapOff,
+  'bar-chart-2': BarChart2,
+  'home': Home,
+  'coffee': Coffee,
+  'git-branch': GitBranch,
+  'trending-up': TrendingUp,
+  'eye-off': EyeOff,
+  'octagon': Octagon,
+  'edit': Edit,
+  'refresh-ccw': RefreshCcw,
+  'truck': Truck,
+  'volume-2': Volume2,
+  'star': Star,
+  'minus-circle': MinusCircle,
+  'user-check': UserCheck,
+  'copy': Copy,
+  'power': Power,
+  'divide-circle': DivideCircle,
+  'grid': Grid,
+  'music': Music,
+  'slash': Slash,
+  'user': User,
+  'activity': Activity,
+  'moon': Moon,
+  'layers': Layers,
+  'smile': Smile,
+  'zoom-out': ZoomOut,
+  'volume-1': Volume1,
+  'meh': Meh,
+  'git-pull-request': GitPullRequest,
+  'info': Info,
+  'sidebar': Sidebar,
+  'thumbs-up': ThumbsUp,
+  'share': Share,
+  'printer': Printer,
+  'voicemail': Voicemail,
+  'paperclip': Paperclip,
+  'check-square': CheckSquare,
+  'radio': Radio,
+  'hexagon': Hexagon,
+  'tablet': Tablet,
+  'hard-drive': HardDrive,
+  'heart': Heart,
+  'send': Send,
+  'delete': Delete,
+  'link': Link,
+  'pause': Pause,
+  'phone-outgoing': PhoneOutgoing,
+  'save': Save,
+  'user-x': UserX,
+  'pen-tool': PenTool,
+  'trash-2': Trash2,
+  'git-merge': GitMerge,
+  'headphones': Headphones,
+  'bookmark': Bookmark,
+  'airplay': Airplay,
+  'git-commit': GitCommit,
+  'tv': Tv,
+  'flag': Flag,
+  'phone-missed': PhoneMissed,
+  'terminal': Terminal,
+  'mouse-pointer': MousePointer,
+  'minimize': Minimize,
+  'zap': Zap,
+  'mic': Mic,
+  'thermometer': Thermometer,
+  'sunrise': Sunrise,
+  'folder': Folder,
+  'repeat': Repeat,
+  'x-circle': XCircle,
+  'folder-plus': FolderPlus,
+  'settings': Settings,
+  'message-square': MessageSquare,
+  'cloud': Cloud,
+  'mic-off': MicOff,
+  'external-link': ExternalLink,
+  'menu': Menu,
+  'pause-circle': PauseCircle,
+  'toggle-left': ToggleLeft,
+  'speaker': Speaker,
+  'image': Image,
+  'wifi': Wifi,
+  'file-text': FileText,
+  'skip-back': SkipBack,
+  'skip-forward': SkipForward,
+  'award': Award,
+  'refresh-cw': RefreshCw,
+  'video': Video,
+  'camera': Camera,
+  'loader': Loader,
+  'book': Book,
+  'tag': Tag,
+  'phone': Phone,
+  'rewind': Rewind,
+  'message-circle': MessageCircle,
+  'volume-x': VolumeX,
+  'list': List,
+  'building': Building,
+  'contact': Contact,
 }
 
 export default icons
diff --git a/frappe/drive/js/utils.js b/frappe/drive/js/utils.js
index 240d00daf..f7002bce4 100644
--- a/frappe/drive/js/utils.js
+++ b/frappe/drive/js/utils.js
@@ -48,7 +48,7 @@ function slugger(title) {
   return slugify(title.split('.').join(' '), {
     lower: true,
     trim: true,
-    remove: /[^\w\s\']|_/,
+    remove: /[^\w\s']|_/,
   })
 }
 
@@ -109,7 +109,6 @@ export const formatDate = (date) => {
   return `${formattedDate}, ${formattedTime}`
 }
 
-
 export const openEntity = (entity, new_tab = false) => {
   if (new_tab) {
     return window.open(getFileLink(entity, false), '_blank')
diff --git a/frappe/index.d.ts b/frappe/index.d.ts
index 26aaba696..1d8b58741 100644
--- a/frappe/index.d.ts
+++ b/frappe/index.d.ts
@@ -58,7 +58,10 @@ declare module 'frappe-ui/frappe' {
     capture: (event_name: string, data?: Record<string, any>) => void
   }
   export const telemetryPlugin: {
-    install: (app: import('vue').App, options: { app_name: string }) => Promise<void>
+    install: (
+      app: import('vue').App,
+      options: { app_name: string },
+    ) => Promise<void>
   }
 }
 
diff --git a/frappe/telemetry/index.ts b/frappe/telemetry/index.ts
index b492dd144..434a59b7f 100644
--- a/frappe/telemetry/index.ts
+++ b/frappe/telemetry/index.ts
@@ -1,6 +1,7 @@
 import { reactive, readonly, ref, type App } from 'vue'
 
-import { pulse_provider, PulseProvider } from './pulse.ts'
+import type { PulseProvider } from './pulse.ts'
+import { pulse_provider } from './pulse.ts'
 import { silentCall } from './utils.ts'
 
 let pulseProvider: PulseProvider | null = null
diff --git a/frappe/telemetry/utils.ts b/frappe/telemetry/utils.ts
index 3a069871b..55c017714 100644
--- a/frappe/telemetry/utils.ts
+++ b/frappe/telemetry/utils.ts
@@ -8,8 +8,10 @@ export const silentCall = <T>(method: string): Promise<T> => {
   console.error = () => {}
   console.log = () => {}
 
-  return call(method).catch(() => {}).finally(() => {
-    console.log = originalLog
-    console.error = originalError
-  })
+  return call(method)
+    .catch(() => {})
+    .finally(() => {
+      console.log = originalLog
+      console.error = originalError
+    })
 }
diff --git a/icons/Icon.vue b/icons/Icon.vue
index 84db4979f..aed1903dc 100644
--- a/icons/Icon.vue
+++ b/icons/Icon.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import { onMounted } from 'vue';
+import { onMounted } from 'vue'
 
 const props = defineProps<{ name: string }>()
 
 onMounted(() => {
   if (!document.getElementById('lucide-sprite')) {
-    console.warn(
-      'Lucide sprite not found! Make sure to use the spritePlugin.'
-    )
+    console.warn('Lucide sprite not found! Make sure to use the spritePlugin.')
   }
 })
 </script>
diff --git a/icons/IconPicker.story.vue b/icons/IconPicker.story.vue
index 6473b00cc..b536ac84a 100644
--- a/icons/IconPicker.story.vue
+++ b/icons/IconPicker.story.vue
@@ -95,15 +95,15 @@ const state = reactive({
 
     <Variant title="Disabled State">
       <div class="p-4">
-        <label class="block text-sm font-medium mb-2">Disabled Icon Picker</label>
+        <label class="block text-sm font-medium mb-2"
+          >Disabled Icon Picker</label
+        >
         <IconPicker
           v-model="disabledValue"
           placeholder="This is disabled"
           :disabled="true"
         />
-        <div class="mt-2 text-sm text-gray-600">
-          Icon picker is disabled
-        </div>
+        <div class="mt-2 text-sm text-gray-600">Icon picker is disabled</div>
       </div>
     </Variant>
 
@@ -118,7 +118,7 @@ const state = reactive({
         :options="[
           { value: 'start', label: 'Start' },
           { value: 'center', label: 'Center' },
-          { value: 'end', label: 'End' }
+          { value: 'end', label: 'End' },
         ]"
       />
     </template>
diff --git a/index.html b/index.html
index 5378c060c..24705fe9a 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
diff --git a/license.md b/license.md
index 3acdd754b..bdaff64d5 100644
--- a/license.md
+++ b/license.md
@@ -5,4 +5,4 @@ Permission is hereby granted, free of charge, to any person obtaining a copy of
 
 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 
-THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
\ No newline at end of file
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/package.json b/package.json
index 3ab2aaa33..63ad31cde 100644
--- a/package.json
+++ b/package.json
@@ -2,29 +2,23 @@
   "name": "frappe-ui",
   "version": "0.1.278",
   "description": "A set of components and utilities for rapid UI development",
+  "license": "MIT",
+  "author": "Frappe Technologies Pvt. Ltd.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/frappe/frappe-ui.git"
+  },
+  "files": [
+    "frappe",
+    "src",
+    "scripts",
+    "vite",
+    "icons",
+    "tailwind",
+    "tsconfig.base.json"
+  ],
   "type": "module",
   "sideEffects": false,
-  "scripts": {
-    "test": "vitest --run",
-    "test:coverage": "vitest --run --coverage",
-    "test:cypress": "cypress run --component",
-    "test:cypress:coverage": "cross-env COVERAGE=true cypress run --component",
-    "coverage": "yarn test:coverage && yarn test:cypress:coverage && yarn coverage:merge",
-    "coverage:merge": "tsx scripts/merge-coverage.ts",
-    "type-check": "vue-tsc --noEmit",
-    "type-check:tsc": "tsc --noEmit",
-    "prettier": "yarn run prettier -w ./src",
-    "bump-and-release": "yarn test && git pull --rebase origin main && yarn run release-patch",
-    "release-patch": "yarn version --patch && git push && git push --tags",
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "docs:dev": "vitepress dev docs --host",
-    "docs:build": "vitepress build docs",
-    "docs:preview": "vitepress preview docs",
-    "docs:gen": "tsx docs/scripts/propsgen.ts",
-    "docs:gen:all": "yarn docs:gen --all"
-  },
   "exports": {
     ".": {
       "import": "./src/index.ts",
@@ -60,21 +54,33 @@
       "default": "./tsconfig.base.json"
     }
   },
-  "files": [
-    "frappe",
-    "src",
-    "scripts",
-    "vite",
-    "icons",
-    "tailwind",
-    "tsconfig.base.json"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/frappe/frappe-ui.git"
+  "scripts": {
+    "test": "vitest --run",
+    "test:coverage": "vitest --run --coverage",
+    "test:cypress": "cypress run --component",
+    "test:cypress:coverage": "cross-env COVERAGE=true cypress run --component",
+    "coverage": "yarn test:coverage && yarn test:cypress:coverage && yarn coverage:merge",
+    "coverage:merge": "tsx scripts/merge-coverage.ts",
+    "type-check": "vue-tsc --noEmit",
+    "type-check:tsc": "tsc --noEmit",
+    "prettier": "yarn run prettier -w ./src",
+    "format": "oxfmt",
+    "format:check": "oxfmt --check",
+    "lint": "oxlint",
+    "lint:fix": "oxlint --fix",
+    "lint-and-format": "yarn format && yarn lint:fix",
+    "bump-and-release": "yarn test && git pull --rebase origin main && yarn run release-patch",
+    "release-patch": "yarn version --patch && git push && git push --tags",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "prepare": "chmod +x ./scripts/setup-pre-commit.sh && ./scripts/setup-pre-commit.sh",
+    "docs:dev": "vitepress dev docs --host",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs",
+    "docs:gen": "tsx docs/scripts/propsgen.ts",
+    "docs:gen:all": "yarn docs:gen --all"
   },
-  "author": "Frappe Technologies Pvt. Ltd.",
-  "license": "MIT",
   "dependencies": {
     "@headlessui/vue": "^1.7.14",
     "@popperjs/core": "^2.11.2",
@@ -131,10 +137,6 @@
     "unplugin-vue-components": "^32.0.0",
     "vue-sonner": "^2.0.9"
   },
-  "peerDependencies": {
-    "vue": ">=3.5.0",
-    "vue-router": "^4.1.6"
-  },
   "devDependencies": {
     "@cypress/code-coverage": "^3.13.10",
     "@vitejs/plugin-vue": "^6.0.7",
@@ -147,6 +149,8 @@
     "lint-staged": ">=10",
     "msw": "^2.7.0",
     "nyc": "^17.1.0",
+    "oxfmt": "^0.44.0",
+    "oxlint": "^1.59.0",
     "postcss": "^8.5.10",
     "prettier-plugin-tailwindcss": "^0.1.13",
     "tailwindcss": "^3.2.7",
@@ -160,26 +164,27 @@
     "vue-router": "^4.1.6",
     "vue-tsc": "^3.2.7"
   },
+  "peerDependencies": {
+    "vue": ">=3.5.0",
+    "vue-router": "^4.1.6"
+  },
   "resolutions": {
-    "prosemirror-model": "1.25.2",
-    "prosemirror-state": "1.4.3",
-    "prosemirror-view": "1.40.0",
-    "prosemirror-transform": "1.10.4",
     "defu": "^6.1.5",
     "esbuild": "^0.25.0",
+    "js-yaml": "^4.1.1",
     "lodash": "^4.18.0",
     "markdown-it": "^14.1.1",
+    "picomatch": "^4.0.4",
+    "postcss": "^8.5.10",
+    "prosemirror-model": "1.25.2",
+    "prosemirror-state": "1.4.3",
+    "prosemirror-transform": "1.10.4",
+    "prosemirror-view": "1.40.0",
     "qs": "^6.14.2",
     "rollup": "^4.59.0",
     "socket.io-parser": "^4.2.6",
     "systeminformation": "^5.31.6",
-    "ws": "^8.20.1",
-    "postcss": "^8.5.10",
     "vite": "^7.3.2",
-    "picomatch": "^4.0.4",
-    "js-yaml": "^4.1.1"
-  },
-  "lint-staged": {
-    "*.{js,css,md,vue}": "prettier --write"
+    "ws": "^8.20.1"
   }
 }
diff --git a/readme.md b/readme.md
index f23247e69..3e507ae9b 100644
--- a/readme.md
+++ b/readme.md
@@ -3,6 +3,7 @@
 <img src="https://github.com/user-attachments/assets/0a81cdc1-d957-47a9-b151-f5571be0d038" width="80" />
 
 # Frappe UI
+
 **Rapidly build modern frontends for Frappe apps**
 
 <img alt="NPM Downloads" src="https://img.shields.io/npm/dm/frappe-ui.svg?style=flat"/>
@@ -17,8 +18,8 @@
 Frappe UI provides a set of components and utilities for rapid UI development. Components are built using Vue 3 and Tailwind.
 Along with generic components like Button, Link, Dialog, etc., it also contains utilities for handling server-side data fetching, directives and utilities.
 
-
 ### Motivation
+
 In 2019, I began building [Frappe Books](https://github.com/frappe/books) which had a new design. This led to the creation of small reusable components like Button, Dialog, and Card. Moving on to [Frappe Cloud](https://github.com/frappe/press) in 2020, I reused and evolved these components in the Frappe Cloud UI. In 2022, while starting a new project, I decided to extract these components into a standalone package to avoid repeating the copy-paste process. This package is now being developed alongside the [Gameplan](https://github.com/frappe/gameplan), continually adding generic components and utilities for frontend development.
 
 ### Under the Hood
diff --git a/scripts/merge-coverage.ts b/scripts/merge-coverage.ts
index 808ad0555..65f100f31 100644
--- a/scripts/merge-coverage.ts
+++ b/scripts/merge-coverage.ts
@@ -22,13 +22,17 @@ mkdirSync(merged, { recursive: true })
 if (existsSync(vitestReport)) {
   copyFileSync(vitestReport, join(merged, 'vitest.json'))
 } else {
-  console.warn('Vitest coverage missing — merged report will reflect Cypress only.')
+  console.warn(
+    'Vitest coverage missing — merged report will reflect Cypress only.',
+  )
 }
 
 if (existsSync(cypressReport)) {
   copyFileSync(cypressReport, join(merged, 'cypress.json'))
 } else {
-  console.warn('Cypress coverage missing — merged report will reflect Vitest only.')
+  console.warn(
+    'Cypress coverage missing — merged report will reflect Vitest only.',
+  )
 }
 
 execSync(`npx nyc merge ${merged} ${join(merged, 'coverage-final.json')}`, {
diff --git a/scripts/merge-cypress-shards.ts b/scripts/merge-cypress-shards.ts
index 020d229c4..da38c37e4 100644
--- a/scripts/merge-cypress-shards.ts
+++ b/scripts/merge-cypress-shards.ts
@@ -1,5 +1,11 @@
 import { execSync } from 'node:child_process'
-import { existsSync, mkdirSync, readdirSync, copyFileSync, rmSync } from 'node:fs'
+import {
+  existsSync,
+  mkdirSync,
+  readdirSync,
+  copyFileSync,
+  rmSync,
+} from 'node:fs'
 import { join } from 'node:path'
 
 const shardsDir = 'coverage/cypress-shards'
diff --git a/scripts/pre-commit.sh b/scripts/pre-commit.sh
new file mode 100644
index 000000000..e3b4a3e7e
--- /dev/null
+++ b/scripts/pre-commit.sh
@@ -0,0 +1,7 @@
+STAGED=$(git diff --cached --name-only --diff-filter=ACMR)
+yarn format
+
+git diff --exit-code $STAGED || {
+  echo "✗ Staged files were formatted - review and commit again."
+  exit 1
+}
\ No newline at end of file
diff --git a/scripts/setup-pre-commit.sh b/scripts/setup-pre-commit.sh
new file mode 100755
index 000000000..d67717620
--- /dev/null
+++ b/scripts/setup-pre-commit.sh
@@ -0,0 +1 @@
+cp ./scripts/pre-commit.sh "$(git rev-parse --git-dir)/hooks/pre-commit" && chmod +x "$(git rev-parse --git-dir)/hooks/pre-commit"
\ No newline at end of file
diff --git a/skills/frappe-ui/COMPONENTS.md b/skills/frappe-ui/COMPONENTS.md
index b07b18e8e..d845181b0 100644
--- a/skills/frappe-ui/COMPONENTS.md
+++ b/skills/frappe-ui/COMPONENTS.md
@@ -13,7 +13,7 @@ Render any lucide icon as a `<span>` with the icon class — never import a Vue
 
 - Class name is `lucide-<kebab-case-name>` (e.g. `lucide-arrow-right`, `lucide-circle-check`).
 - Size with Tailwind's `size-*` (`size-3`, `size-4`, `size-5` cover most UI).
-- Always `aria-hidden="true"` — icons are decorative; the surrounding label carries meaning. If the icon is the *only* content (icon-only button), give the parent an `aria-label`.
+- Always `aria-hidden="true"` — icons are decorative; the surrounding label carries meaning. If the icon is the _only_ content (icon-only button), give the parent an `aria-label`.
 - Color inherits from `currentColor` — set on the parent or with `text-ink-*`.
 
 For frappe-ui components that take an `icon` prop (Button, Dropdown options, Dialog, Alert, Badge), pass the namespaced **string** `"lucide-edit"` — the component renders the span for you.
@@ -21,7 +21,9 @@ For frappe-ui components that take an `icon` prop (Button, Dropdown options, Dia
 ## Actions
 
 ### `Button`
+
 Default for any trigger. `<Button :label icon iconLeft iconRight variant theme size loading disabled />`.
+
 - `variant`: `solid | outline | subtle | ghost` (default `subtle`).
 - `theme`: `gray | blue | red | green` (default `gray`).
 - `size`: `sm | md | lg | xl | 2xl` (default `sm`).
@@ -30,30 +32,46 @@ Default for any trigger. `<Button :label icon iconLeft iconRight variant theme s
 - Primary actions: `variant="solid" theme="gray"`. Destructive: `variant="solid" theme="red"` or `subtle theme="red"`.
 
 ### `Dropdown`
+
 Menu of actions anchored to a trigger. `<Dropdown :options="[{ label, icon, onClick, ... }]"><Button ... /></Dropdown>`.
+
 - The first child is the trigger.
 - Pass actions as `options`; nested groups via `options: [{ group: 'Label', items: [...] }]`.
 
 ## Overlays
 
 ### `Dialog`
+
 Modal. Always `v-model:open`. Props: `title`, `message`, `icon`, `theme`, `size`, `actions`, `dismissible`.
+
 - `actions` is an array of button configs; each `onClick` receives `{ close }`.
 - `bare` to suppress chrome (full-bleed content like command palettes).
 - For confirm/alert/prompt, prefer the **imperative API** below.
 
 ### Imperative dialogs
+
 ```ts
 import { dialog, toast } from 'frappe-ui'
 
-dialog.confirm({ title: 'Delete?', theme: 'red', onConfirm: async () => await api.delete() })
+dialog.confirm({
+  title: 'Delete?',
+  theme: 'red',
+  onConfirm: async () => await api.delete(),
+})
 dialog.alert({ title: 'Saved' })
-const { values } = await dialog.prompt({ title: 'Rename', fields: [{ name: 'title', label: 'Title', required: true }] })
-toast.success('Saved'); toast.error('Failed'); toast.info('FYI')
+const { values } = await dialog.prompt({
+  title: 'Rename',
+  fields: [{ name: 'title', label: 'Title', required: true }],
+})
+toast.success('Saved')
+toast.error('Failed')
+toast.info('FYI')
 ```
+
 Mount `<FrappeUIProvider>` once near the app root.
 
 ### `Popover` / `Tooltip`
+
 - `Popover` for arbitrary anchored content. `v-model:open`, slots: `#target` (trigger), `#body` (content).
 - `Tooltip` for hover hints. `<Tooltip text="..."><Button .../></Tooltip>`. Don't use Tooltip for actionable UI — that's `Popover` / `Dropdown`.
 
@@ -62,95 +80,122 @@ Mount `<FrappeUIProvider>` once near the app root.
 All input controls accept the **shared labeling contract**: `label`, `description`, `error`, `required`.
 
 ### `FormControl`
+
 The default wrapper. Pass `type="text" | "textarea" | "select" | "checkbox" | "autocomplete"` etc. Use it instead of raw `TextInput` when you need a labeled field with consistent layout.
 
 ### `TextInput` / `Textarea` / `Password`
+
 Single-line / multi-line / masked input. `v-model="value"`. Use `FormControl :type="..."` if you want the field wrapper.
 
 ### `Select`
+
 Fixed list, single value. `<Select v-model :options="[{ label, value }]" placeholder="..." />`.
 
 ### `MultiSelect`
+
 Fixed list, multiple values. `v-model` is `string[]`.
 
 ### `Combobox`
+
 Single-select with search. `v-model="selected"` + `v-model:query="q"`. For options that filter as user types.
 
 ### `Autocomplete`
+
 Async-fetched options (typically Frappe doctype links). Pass `fetchOptions` or use it inside Frappe Link contexts.
 
 ### `Checkbox` / `Switch`
+
 Boolean. `v-model="checked"` + `:label`. `Switch` for settings-style toggles; `Checkbox` for forms / multi-pick rows.
 
 ### `DatePicker` / `MonthPicker` / `TimePicker` / `DateRangePicker`
+
 `v-model` holds the value. `DateRangePicker` v-model is `string[]` of length 2.
 
 ### `Slider` / `Rating`
+
 `v-model` numeric. Standard labeling props apply.
 
 ### `FileUploader`
+
 Frappe-native file upload. Renders an upload control with progress; emits the uploaded `File` doc.
 
 ## Display
 
 ### `Badge`
+
 Status pill. `<Badge :label theme variant size />`. Same color axes as Button.
 
 ### `Alert`
+
 Inline banner. `<Alert :title variant theme>` + slot for body.
 
 ### `Avatar`
+
 `<Avatar :label :image size />`. `label` is used to generate initials when no image.
 
 ### `Tooltip` — see Overlays.
 
 ### `Progress` / `CircularProgressBar` / `Spinner` / `LoadingIndicator` / `LoadingText`
+
 - `Spinner` / `LoadingIndicator` for inline loading.
 - `LoadingText` for skeleton-style text placeholder.
 - `Progress` linear; `CircularProgressBar` radial.
 
 ### `Divider`
+
 Horizontal/vertical rule. Prefer over `<hr class="..." />`.
 
 ### `Breadcrumbs`
+
 `<Breadcrumbs :items="[{ label, route }]" />`.
 
 ### `Tabs` / `TabButtons`
+
 - `Tabs` for full content tabs (top-level page sections). `v-model:tab`.
 - `TabButtons` for inline segmented controls (filter switches).
 
 ### `KeyboardShortcut`
+
 Renders a kbd combo. `<KeyboardShortcut keys="cmd+k" />`.
 
 ## Lists & data
 
 ### `ListView`
+
 Table/grid list with built-in selection, sorting, virtualization. Configure via `columns`, `rows`, `options`. Prefer this over hand-rolled `<table>` for any data list.
 
 ### `ItemListRow`
+
 Single-row list item (label + prefix/suffix). Compose into custom lists when `ListView` is too heavy.
 
 ### `ListFilter`
+
 Filter builder UI matched to Frappe-style queries.
 
 ### `Tree`
+
 Hierarchical lists.
 
 ### `Calendar`
+
 Month/week calendar view.
 
 ### `Charts`
+
 Chart family (line, bar, etc.) wrapping ECharts/Frappe Charts.
 
 ### `TextEditor`
+
 TipTap-based rich text. Heavy — only when you need real content editing.
 
 ### `CommandPalette`
+
 Cmd-K palette. Compose with `Dialog bare`.
 
 ## Layout
 
 ### `Sidebar`
+
 App-shell sidebar primitive. Pair with router views.
 
 ### `Divider` — see Display.
@@ -160,7 +205,9 @@ App-shell sidebar primitive. Pair with router views.
 ## Provider
 
 ### `FrappeUIProvider`
+
 Mount once at app root. Provides:
+
 - Imperative dialog/toast mounts.
 - Theme (light/dark via `[data-theme="dark"]`).
 - Resource provider for `createResource` / v3 data APIs.
@@ -181,6 +228,7 @@ const ping = useCall<string>({
 ```
 
 **Options** (`UseCallOptions<TResponse, TParams>`):
+
 - `url: string | Ref<string>` — the API endpoint. Use a `Ref` / `computed` for reactive URLs (e.g. resource ID in the path).
 - `method?: 'GET' | 'POST' | 'PUT' | 'DELETE'` — default `GET`.
 - `params?: TParams | (() => TParams)` — request params. Pass a function for reactive params; refs inside are auto-unwrapped. GET requests serialise to the query string; non-GET sends a JSON body.
@@ -195,6 +243,7 @@ const ping = useCall<string>({
 - `onError?: (error) => void` — fires after a failed response.
 
 **Reactive return** (treat as a `reactive` object — no `.value`):
+
 - `data` — response data (or cached data while loading).
 - `error` — `Error` instance on failure.
 - `loading` / `isFetching` — boolean.
@@ -215,9 +264,13 @@ const userResource = useCall<User>({
   cacheKey: ['user', userId],
 })
 ```
+
 ```vue
 <LoadingText v-if="userResource.loading && !userResource.data" />
-<ErrorMessage v-else-if="userResource.error" :message="userResource.error.message" />
+<ErrorMessage
+  v-else-if="userResource.error"
+  :message="userResource.error.message"
+/>
 <UserCard v-else :user="userResource.data" />
 ```
 
@@ -241,6 +294,7 @@ async function save() {
 ```
 
 **Tips:**
+
 - `immediate: false` + `submit()` is the canonical write shape.
 - For lists, prefer `useList` (paginated, with filters/sort) over composing `useCall` by hand.
 - For a single doctype document, prefer `useDoc`.
@@ -256,15 +310,21 @@ For prototypes and demos, drop to **`useFetch` from `@vueuse/core`** — it's th
 import { useFetch } from '@vueuse/core'
 
 // Read
-const { data: todo, error, isFetching, execute } = useFetch(
-  `https://jsonplaceholder.typicode.com/todos/1`,
-).json<Todo>()
+const {
+  data: todo,
+  error,
+  isFetching,
+  execute,
+} = useFetch(`https://jsonplaceholder.typicode.com/todos/1`).json<Todo>()
 
 // Write (trigger on action)
-const { data, execute: save, isFetching: saving } = useFetch(
-  '/api/tasks',
-  { immediate: false },
-).post(() => ({ title: form.title })).json<Task>()
+const {
+  data,
+  execute: save,
+  isFetching: saving,
+} = useFetch('/api/tasks', { immediate: false })
+  .post(() => ({ title: form.title }))
+  .json<Task>()
 
 async function onSubmit() {
   await save()
diff --git a/skills/frappe-ui/PATTERNS.md b/skills/frappe-ui/PATTERNS.md
index 2bf795061..c41a06de6 100644
--- a/skills/frappe-ui/PATTERNS.md
+++ b/skills/frappe-ui/PATTERNS.md
@@ -4,7 +4,7 @@ Common compositions seen across Frappe Cloud, Gameplan, Desk, Drive, Insights. R
 
 ## Layout principles
 
-Apply these before reaching for any specific pattern below — they're what make a Frappe screen *read* as a Frappe screen.
+Apply these before reaching for any specific pattern below — they're what make a Frappe screen _read_ as a Frappe screen.
 
 1. **Strive for alignment.** Repeating elements down a list should align in columns, not float inside flex rows. If every list item has a `<Badge>`, a timestamp, or a button on the right, give each one a fixed-width slot (`w-24 shrink-0`, `w-32 shrink-0`) so they form a column. Inline `flex items-center gap-2` is fine for one row but produces ragged edges down a list.
 2. **One primary action per page.** Only one `<Button variant="solid" theme="gray">` per screen — usually the page header's "New X". Everything else is default (`subtle`) or `ghost`. If the app shell already has a global "Create" button, the page should not also have a solid primary.
@@ -37,7 +37,9 @@ Mount `FrappeUIProvider` once at the app root so imperative `dialog.*` / `toast.
 ## Page header
 
 ```vue
-<header class="flex items-center justify-between border-b border-outline-gray-1 px-6 py-4">
+<header
+  class="flex items-center justify-between border-b border-outline-gray-1 px-6 py-4"
+>
   <div>
     <Breadcrumbs :items="crumbs" />
     <h1 class="mt-1 text-xl text-ink-gray-9">{{ title }}</h1>
@@ -64,8 +66,18 @@ const errors = reactive({})
 
 <template>
   <form class="mx-auto max-w-xl space-y-4 p-6" @submit.prevent="save">
-    <FormControl v-model="form.title" label="Title" required :error="errors.title" />
-    <FormControl v-model="form.description" type="textarea" label="Description" description="Markdown supported." />
+    <FormControl
+      v-model="form.title"
+      label="Title"
+      required
+      :error="errors.title"
+    />
+    <FormControl
+      v-model="form.description"
+      type="textarea"
+      label="Description"
+      description="Markdown supported."
+    />
     <FormControl
       v-model="form.priority"
       type="select"
@@ -78,13 +90,20 @@ const errors = reactive({})
     />
     <div class="flex justify-end gap-2 pt-2">
       <Button label="Cancel" @click="cancel" />
-      <Button variant="solid" theme="gray" type="submit" :loading="saving" label="Save" />
+      <Button
+        variant="solid"
+        theme="gray"
+        type="submit"
+        :loading="saving"
+        label="Save"
+      />
     </div>
   </form>
 </template>
 ```
 
 Rules:
+
 - One column. Stack with `space-y-4`.
 - Every field uses `FormControl` (or a direct input control) with `label` + `error`.
 - Submit pair: secondary `Cancel` left, primary `Save` right.
@@ -94,6 +113,7 @@ Rules:
 Always use `useCall` (or `useList` / `useDoc`) — never raw `fetch` / `axios`.
 
 **Read (auto on mount):**
+
 ```ts
 import { useCall } from 'frappe-ui'
 
@@ -105,6 +125,7 @@ const user = useCall<User>({
 ```
 
 **Write (trigger on action):**
+
 ```ts
 import { useCall, toast } from 'frappe-ui'
 
@@ -150,17 +171,27 @@ Never build your own confirm `<Dialog>` for this.
 <script setup>
 import { ListView, Button, useList } from 'frappe-ui'
 
-const tasks = useList<Task>({
-  doctype: 'Task',
-  fields: ['name', 'title', 'status', 'modified'],
-})
+const tasks =
+  useList <
+  Task >
+  {
+    doctype: 'Task',
+    fields: ['name', 'title', 'status', 'modified'],
+  }
 </script>
 
 <template>
   <div class="flex h-full flex-col">
-    <header class="flex items-center justify-between border-b border-outline-gray-1 px-6 py-3">
+    <header
+      class="flex items-center justify-between border-b border-outline-gray-1 px-6 py-3"
+    >
       <h1 class="text-lg text-ink-gray-9">Tasks</h1>
-      <Button variant="solid" theme="gray" icon-left="lucide-plus" label="New Task" />
+      <Button
+        variant="solid"
+        theme="gray"
+        icon-left="lucide-plus"
+        label="New Task"
+      />
     </header>
     <ListView
       class="flex-1"
@@ -209,9 +240,12 @@ Don't use toasts for confirmations or anything requiring a decision — that's `
 ```
 
 Map statuses to themes in one place:
+
 ```ts
 function statusTheme(s) {
-  return ({ open: 'blue', closed: 'gray', error: 'red', done: 'green' })[s] ?? 'gray'
+  return (
+    { open: 'blue', closed: 'gray', error: 'red', done: 'green' }[s] ?? 'gray'
+  )
 }
 ```
 
diff --git a/skills/frappe-ui/SETUP.md b/skills/frappe-ui/SETUP.md
index 955e40e3f..d509aed97 100644
--- a/skills/frappe-ui/SETUP.md
+++ b/skills/frappe-ui/SETUP.md
@@ -26,10 +26,10 @@ npm install frappe-ui
 
 frappe-ui's `package.json` exposes only a handful of subpaths. The two most common mistakes:
 
-| Mistake | Use this instead |
-|---|---|
+| Mistake                                                  | Use this instead                                  |
+| -------------------------------------------------------- | ------------------------------------------------- |
 | `import frappeUIPreset from 'frappe-ui/tailwind/preset'` | `import frappeUIPreset from 'frappe-ui/tailwind'` |
-| `@import 'frappe-ui/src/style.css'` | `@import 'frappe-ui/style.css'` |
+| `@import 'frappe-ui/src/style.css'`                      | `@import 'frappe-ui/style.css'`                   |
 
 Anything not in the `exports` map (like `frappe-ui/src/*`) will fail with `Package subpath '…' is not defined by "exports"`.
 
@@ -120,7 +120,7 @@ import './style.css'
 import App from './App.vue'
 
 const app = createApp(App)
-app.use(router)   // required — frappe-ui's <Button> injects Symbol(router)
+app.use(router) // required — frappe-ui's <Button> injects Symbol(router)
 app.use(FrappeUI) // installs the plugin (resource provider, etc.)
 app.mount('#app')
 ```
@@ -151,7 +151,11 @@ import { createRouter, createWebHistory } from 'vue-router'
 export const router = createRouter({
   history: createWebHistory(),
   routes: [
-    { path: '/', name: 'Home', component: () => import('./pages/HomeScreen.vue') },
+    {
+      path: '/',
+      name: 'Home',
+      component: () => import('./pages/HomeScreen.vue'),
+    },
   ],
 })
 ```
diff --git a/skills/frappe-ui/TOKENS.md b/skills/frappe-ui/TOKENS.md
index 350e07ee1..81da8ada9 100644
--- a/skills/frappe-ui/TOKENS.md
+++ b/skills/frappe-ui/TOKENS.md
@@ -39,16 +39,16 @@ Three semantic categories — each takes a color + numeric step. Higher = strong
 
 ### Rule of thumb
 
-| Need              | Use                              |
-|-------------------|----------------------------------|
-| Page bg           | `bg-surface-white`               |
-| Card bg           | `bg-surface-white` + border, or `bg-surface-gray-1` |
-| Hovered row       | `bg-surface-gray-2`              |
-| Primary text      | `text-ink-gray-9`                |
-| Muted text        | `text-ink-gray-5`                |
-| Border            | `border-outline-gray-1` (or `gray-2` for stronger) |
-| Destructive text  | `text-ink-red-3`                 |
-| Success text      | `text-ink-green-3`               |
+| Need             | Use                                                 |
+| ---------------- | --------------------------------------------------- |
+| Page bg          | `bg-surface-white`                                  |
+| Card bg          | `bg-surface-white` + border, or `bg-surface-gray-1` |
+| Hovered row      | `bg-surface-gray-2`                                 |
+| Primary text     | `text-ink-gray-9`                                   |
+| Muted text       | `text-ink-gray-5`                                   |
+| Border           | `border-outline-gray-1` (or `gray-2` for stronger)  |
+| Destructive text | `text-ink-red-3`                                    |
+| Success text     | `text-ink-green-3`                                  |
 
 Never reach for `text-gray-900`, `bg-white`, `border-gray-200` — they don't track the theme.
 
@@ -62,7 +62,7 @@ Never reach for `text-gray-900`, `bg-white`, `border-gray-200` — they don't tr
 Pick the wrong one and copy looks cramped (multi-line text in `text-*`) or floppy (one-line labels in `text-p-*`).
 
 | Class                       | Size  | Use                                     |
-|-----------------------------|-------|-----------------------------------------|
+| --------------------------- | ----- | --------------------------------------- |
 | `text-2xs` / `text-p-2xs`   | 11px  | Micro-labels, badges / tiny captions    |
 | `text-xs` / `text-p-xs`     | 12px  | Captions, meta / multi-line meta        |
 | `text-sm` / `text-p-sm`     | 13px  | Secondary labels / secondary paragraphs |
@@ -78,31 +78,32 @@ All have tuned letter-spacing — don't override unless you know why.
 
 ## Radius
 
-| Class            | px    | Use                            |
-|------------------|-------|--------------------------------|
-| `rounded-none`   | 0     | Flush edges                    |
-| `rounded-sm`     | 4     | Tags, small chips              |
-| `rounded` (default) | 8  | Inputs, buttons, list items    |
-| `rounded-md`     | 10    | Cards                          |
-| `rounded-lg`     | 12    | Dialogs, larger surfaces       |
-| `rounded-xl`     | 16    | Hero panels                    |
-| `rounded-2xl`    | 20    | Marketing surfaces             |
-| `rounded-full`   | pill  | Avatars, status dots, pill badges |
+| Class               | px   | Use                               |
+| ------------------- | ---- | --------------------------------- |
+| `rounded-none`      | 0    | Flush edges                       |
+| `rounded-sm`        | 4    | Tags, small chips                 |
+| `rounded` (default) | 8    | Inputs, buttons, list items       |
+| `rounded-md`        | 10   | Cards                             |
+| `rounded-lg`        | 12   | Dialogs, larger surfaces          |
+| `rounded-xl`        | 16   | Hero panels                       |
+| `rounded-2xl`       | 20   | Marketing surfaces                |
+| `rounded-full`      | pill | Avatars, status dots, pill badges |
 
 ## Shadow
 
-| Class         | Use                                  |
-|---------------|--------------------------------------|
-| `shadow-sm`   | Cards on white                       |
-| `shadow`      | Default (inputs on focus)            |
-| `shadow-md`   | Popovers, dropdowns                  |
-| `shadow-lg`   | Dialogs                              |
-| `shadow-xl`   | Floating panels                      |
-| `shadow-2xl`  | Hero overlays                        |
+| Class        | Use                       |
+| ------------ | ------------------------- |
+| `shadow-sm`  | Cards on white            |
+| `shadow`     | Default (inputs on focus) |
+| `shadow-md`  | Popovers, dropdowns       |
+| `shadow-lg`  | Dialogs                   |
+| `shadow-xl`  | Floating panels           |
+| `shadow-2xl` | Hero overlays             |
 
 ## Spacing
 
 Use Tailwind's spacing scale. Frappe density tends to be tight:
+
 - Form field gap: `space-y-3` or `gap-3`.
 - Section gap: `space-y-6` / `gap-6`.
 - Page padding: `p-4` on mobile, `p-6`/`p-8` on desktop.
@@ -117,8 +118,12 @@ Toggle by setting `[data-theme="dark"]` on `<html>`. All semantic tokens flip au
 When you must style a frappe-ui component beyond its prop surface, target its `data-slot` / `data-state` attributes (not internal classes):
 
 ```css
-[data-slot="trigger"][data-state="open"] { box-shadow: ... }
-[data-slot="item"][data-disabled] { opacity: .5 }
+[data-slot='trigger'][data-state='open'] {
+  box-shadow: ...;
+}
+[data-slot='item'][data-disabled] {
+  opacity: 0.5;
+}
 ```
 
 Never use class-injection props (`triggerClass`, `contentClass`) — they don't exist on frappe-ui components by design.
diff --git a/src/components/Alert/Alert.api.md b/src/components/Alert/Alert.api.md
index 5bf1945b1..7caaa8b93 100644
--- a/src/components/Alert/Alert.api.md
+++ b/src/components/Alert/Alert.api.md
@@ -77,11 +77,11 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="Alert" :data="propsData"/> 
+## API Reference
 
-<SlotsTable :data="slotsData"/> 
+<PropsTable name="Alert" :data="propsData"/>
 
-<EmitsTable :data="emitsData"/> 
+<SlotsTable :data="slotsData"/>
 
+<EmitsTable :data="emitsData"/>
diff --git a/src/components/Alert/Alert.md b/src/components/Alert/Alert.md
index 82462f9b4..5cb3e3c92 100644
--- a/src/components/Alert/Alert.md
+++ b/src/components/Alert/Alert.md
@@ -3,12 +3,15 @@
 A prominent message used to communicate important information, warnings, or status updates to the user.
 
 ## Themes
+
 <ComponentPreview name="Alert-Themes" />
 
 ## Controlled state
+
 <ComponentPreview name="Alert-Controlled" />
 
 ## Slots Example
+
 <ComponentPreview name="Alert-Slots" />
 
 <!-- @include: ./Alert.api.md -->
diff --git a/src/components/Alert/Alert.vue b/src/components/Alert/Alert.vue
index 70913e2fb..e0b006694 100644
--- a/src/components/Alert/Alert.vue
+++ b/src/components/Alert/Alert.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import type { AlertProps } from "./types";
+import type { AlertProps } from './types'
 
 /** Controls the visibility of the alert for dismissing or toggling it */
-const visible = defineModel({ default: true });
+const visible = defineModel({ default: true })
 
 const emit = defineEmits(['dismiss'])
 
@@ -15,16 +15,16 @@ const dismissAlert = () => {
 
 const classes = computed(() => {
   const subtleBgs = {
-    yellow: "bg-surface-amber-2",
-    blue: "bg-surface-blue-2",
-    red: "bg-surface-red-2",
-    green: "bg-surface-green-2",
-  };
+    yellow: 'bg-surface-amber-2',
+    blue: 'bg-surface-blue-2',
+    red: 'bg-surface-red-2',
+    green: 'bg-surface-green-2',
+  }
 
-  if (props.variant == "outline") return "border border-outline-gray-3";
+  if (props.variant == 'outline') return 'border border-outline-gray-3'
 
-  return props.theme ? subtleBgs[props.theme] : "bg-surface-gray-2";
-});
+  return props.theme ? subtleBgs[props.theme] : 'bg-surface-gray-2'
+})
 
 const icon = computed(() => {
   const data = {
@@ -37,9 +37,9 @@ const icon = computed(() => {
 })
 
 const props = withDefaults(defineProps<AlertProps>(), {
-  variant: "subtle",
+  variant: 'subtle',
   dismissible: true,
-});
+})
 
 defineSlots<{
   /** Custom icon shown before the content */
@@ -61,14 +61,10 @@ defineSlots<{
     class="grid grid-cols-[auto_1fr_auto] gap-3 rounded-md px-4 py-3.5 text-base items-start"
   >
     <slot name="icon">
-      <span
-        v-if="icon"
-        class="size-4"
-        :class="[icon.class, icon.css]"
-      />
+      <span v-if="icon" class="size-4" :class="[icon.class, icon.css]" />
     </slot>
 
-    <div class="grid gap-2" :class='{ "col-span-2": !$slots.icon && !icon }'>
+    <div class="grid gap-2" :class="{ 'col-span-2': !$slots.icon && !icon }">
       <span class="text-ink-gray-9"> {{ props.title }} </span>
 
       <slot name="description">
diff --git a/src/components/Avatar/Avatar.api.md b/src/components/Avatar/Avatar.api.md
index c3af5921d..c17b1375c 100644
--- a/src/components/Avatar/Avatar.api.md
+++ b/src/components/Avatar/Avatar.api.md
@@ -46,9 +46,9 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="Avatar" :data="propsData"/> 
+## API Reference
 
-<SlotsTable :data="slotsData"/> 
+<PropsTable name="Avatar" :data="propsData"/>
 
+<SlotsTable :data="slotsData"/>
diff --git a/src/components/Avatar/Avatar.cy.ts b/src/components/Avatar/Avatar.cy.ts
index ee7f4ce4b..ba9eadf61 100644
--- a/src/components/Avatar/Avatar.cy.ts
+++ b/src/components/Avatar/Avatar.cy.ts
@@ -3,19 +3,19 @@ import Avatar from './Avatar.vue'
 const sizes = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl']
 
 const sizeHeights = {
-  xs: '4',
-  sm: '5',
-  md: '6',
-  lg: '7',
-  xl: '8',
+  'xs': '4',
+  'sm': '5',
+  'md': '6',
+  'lg': '7',
+  'xl': '8',
   '2xl': '10',
   '3xl': '11.5',
 }
 
 const defaultProps = {
   'data-cy': 'avatar',
-  image: 'https://avatars.githubusercontent.com/u/499550',
-  label: 'Abc',
+  'image': 'https://avatars.githubusercontent.com/u/499550',
+  'label': 'Abc',
 }
 
 describe('Avatar', () => {
@@ -39,7 +39,7 @@ describe('Avatar', () => {
 
   it('Name', () => {
     cy.mount(Avatar, {
-      props: { 'data-cy': 'avatar', label: 'Abc' },
+      props: { 'data-cy': 'avatar', 'label': 'Abc' },
     })
 
     cy.get('[data-cy="avatar"]').should('have.text', 'A')
diff --git a/src/components/Avatar/Avatar.md b/src/components/Avatar/Avatar.md
index 8acb20733..ec3d046a4 100644
--- a/src/components/Avatar/Avatar.md
+++ b/src/components/Avatar/Avatar.md
@@ -3,9 +3,11 @@
 A visual representation of a user, typically shown as an image, initials, or an icon.
 
 ## Themes
+
 <ComponentPreview name="Avatar-Shapes" />
 
 ## Controlled state
+
 <ComponentPreview name="Avatar-Sizes" />
 
 <!-- @include: ./Avatar.api.md -->
diff --git a/src/components/Avatar/Avatar.vue b/src/components/Avatar/Avatar.vue
index ec6dd71f1..aaf75bfc2 100644
--- a/src/components/Avatar/Avatar.vue
+++ b/src/components/Avatar/Avatar.vue
@@ -51,11 +51,11 @@ const shapeClasses = computed(() => {
   return {
     circle: 'rounded-full',
     square: {
-      xs: 'rounded-[4px]',
-      sm: 'rounded-[5px]',
-      md: 'rounded-[5px]',
-      lg: 'rounded-[6px]',
-      xl: 'rounded-[6px]',
+      'xs': 'rounded-[4px]',
+      'sm': 'rounded-[5px]',
+      'md': 'rounded-[5px]',
+      'lg': 'rounded-[6px]',
+      'xl': 'rounded-[6px]',
       '2xl': 'rounded-[8px]',
       '3xl': 'rounded-[10px]',
     }[props.size],
@@ -64,11 +64,11 @@ const shapeClasses = computed(() => {
 
 const sizeClasses = computed(() => {
   return {
-    xs: 'w-4 h-4',
-    sm: 'w-5 h-5',
-    md: 'w-6 h-6',
-    lg: 'w-7 h-7',
-    xl: 'w-8 h-8',
+    'xs': 'w-4 h-4',
+    'sm': 'w-5 h-5',
+    'md': 'w-6 h-6',
+    'lg': 'w-7 h-7',
+    'xl': 'w-8 h-8',
     '2xl': 'w-10 h-10',
     '3xl': 'w-11.5 h-11.5',
   }[props.size]
@@ -76,11 +76,11 @@ const sizeClasses = computed(() => {
 
 const labelClasses = computed(() => {
   let sizeClass = {
-    xs: 'text-2xs',
-    sm: 'text-sm',
-    md: 'text-base',
-    lg: 'text-base',
-    xl: 'text-lg',
+    'xs': 'text-2xs',
+    'sm': 'text-sm',
+    'md': 'text-base',
+    'lg': 'text-base',
+    'xl': 'text-lg',
     '2xl': 'text-xl',
     '3xl': 'text-2xl',
   }[props.size]
@@ -89,11 +89,11 @@ const labelClasses = computed(() => {
 
 const indicatorContainerClasses = computed(() => {
   return {
-    xs: '-mr-[.1rem] -mb-[.1rem] h-2 w-2',
-    sm: '-mr-[.1rem] -mb-[.1rem] h-[9px] w-[9px]',
-    md: '-mr-[.1rem] -mb-[.1rem] h-2.5 w-2.5',
-    lg: '-mr-[.1rem] -mb-[.1rem] h-3 w-3',
-    xl: '-mr-[.1rem] -mb-[.1rem] h-3 w-3',
+    'xs': '-mr-[.1rem] -mb-[.1rem] h-2 w-2',
+    'sm': '-mr-[.1rem] -mb-[.1rem] h-[9px] w-[9px]',
+    'md': '-mr-[.1rem] -mb-[.1rem] h-2.5 w-2.5',
+    'lg': '-mr-[.1rem] -mb-[.1rem] h-3 w-3',
+    'xl': '-mr-[.1rem] -mb-[.1rem] h-3 w-3',
     '2xl': '-mr-[.1rem] -mb-[.1rem] h-3.5 w-3.5',
     '3xl': '-mr-[.2rem] -mb-[.2rem] h-4 w-4',
   }[props.size]
@@ -101,11 +101,11 @@ const indicatorContainerClasses = computed(() => {
 
 const indicatorClasses = computed(() => {
   return {
-    xs: 'h-1 w-1',
-    sm: 'h-[5px] w-[5px]',
-    md: 'h-1.5 w-1.5',
-    lg: 'h-2 w-2',
-    xl: 'h-2 w-2',
+    'xs': 'h-1 w-1',
+    'sm': 'h-[5px] w-[5px]',
+    'md': 'h-1.5 w-1.5',
+    'lg': 'h-2 w-2',
+    'xl': 'h-2 w-2',
     '2xl': 'h-2.5 w-2.5',
     '3xl': 'h-3 w-3',
   }[props.size]
@@ -113,11 +113,11 @@ const indicatorClasses = computed(() => {
 
 const iconClasses = computed(() => {
   return {
-    xs: 'h-2.5 w-2.5',
-    sm: 'h-3 w-3',
-    md: 'h-4 w-4',
-    lg: 'h-4 w-4',
-    xl: 'h-4 w-4',
+    'xs': 'h-2.5 w-2.5',
+    'sm': 'h-3 w-3',
+    'md': 'h-4 w-4',
+    'lg': 'h-4 w-4',
+    'xl': 'h-4 w-4',
     '2xl': 'h-5 w-5',
     '3xl': 'h-5 w-5',
   }[props.size]
@@ -136,5 +136,4 @@ defineSlots<{
   /** Small indicator shown at the bottom-right of the avatar */
   indicator?: () => any
 }>()
-
 </script>
diff --git a/src/components/Badge/Badge.api.md b/src/components/Badge/Badge.api.md
index 146a665a4..39baec5c8 100644
--- a/src/components/Badge/Badge.api.md
+++ b/src/components/Badge/Badge.api.md
@@ -52,9 +52,9 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="Badge" :data="propsData"/> 
+## API Reference
 
-<SlotsTable :data="slotsData"/> 
+<PropsTable name="Badge" :data="propsData"/>
 
+<SlotsTable :data="slotsData"/>
diff --git a/src/components/Badge/Badge.cy.ts b/src/components/Badge/Badge.cy.ts
index 8d1febe1e..c2be082d1 100644
--- a/src/components/Badge/Badge.cy.ts
+++ b/src/components/Badge/Badge.cy.ts
@@ -11,7 +11,10 @@ describe('<Badge />', () => {
     cy.get('.inline-flex.rounded-full').should('contain.text', 'Default')
     // Default theme is gray, variant is subtle
     cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-gray-6')
-    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-gray-2')
+    cy.get('.inline-flex.rounded-full').should(
+      'have.class',
+      'bg-surface-gray-2',
+    )
   })
 
   it('renders label prop', () => {
@@ -32,7 +35,10 @@ describe('<Badge />', () => {
       },
     })
     cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-gray-6')
-    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-gray-2')
+    cy.get('.inline-flex.rounded-full').should(
+      'have.class',
+      'bg-surface-gray-2',
+    )
 
     // Blue
     cy.mount(Badge, {
@@ -42,7 +48,10 @@ describe('<Badge />', () => {
       },
     })
     cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-blue-2')
-    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-blue-2')
+    cy.get('.inline-flex.rounded-full').should(
+      'have.class',
+      'bg-surface-blue-2',
+    )
 
     // Green
     cy.mount(Badge, {
@@ -52,7 +61,10 @@ describe('<Badge />', () => {
       },
     })
     cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-green-3')
-    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-green-2')
+    cy.get('.inline-flex.rounded-full').should(
+      'have.class',
+      'bg-surface-green-2',
+    )
 
     // Orange
     cy.mount(Badge, {
@@ -62,7 +74,10 @@ describe('<Badge />', () => {
       },
     })
     cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-amber-3')
-    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-amber-1')
+    cy.get('.inline-flex.rounded-full').should(
+      'have.class',
+      'bg-surface-amber-1',
+    )
 
     // Red
     cy.mount(Badge, {
@@ -84,7 +99,10 @@ describe('<Badge />', () => {
       },
     })
     cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-white')
-    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-gray-7')
+    cy.get('.inline-flex.rounded-full').should(
+      'have.class',
+      'bg-surface-gray-7',
+    )
 
     // Subtle (default)
     cy.mount(Badge, {
@@ -94,7 +112,10 @@ describe('<Badge />', () => {
       },
     })
     cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-gray-6')
-    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-gray-2')
+    cy.get('.inline-flex.rounded-full').should(
+      'have.class',
+      'bg-surface-gray-2',
+    )
 
     // Outline
     cy.mount(Badge, {
@@ -105,7 +126,10 @@ describe('<Badge />', () => {
     })
     cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-gray-6')
     cy.get('.inline-flex.rounded-full').should('have.class', 'bg-transparent')
-    cy.get('.inline-flex.rounded-full').should('have.class', 'border-outline-gray-1')
+    cy.get('.inline-flex.rounded-full').should(
+      'have.class',
+      'border-outline-gray-1',
+    )
 
     // Ghost
     cy.mount(Badge, {
@@ -233,13 +257,16 @@ describe('<Badge />', () => {
     cy.get('.inline-flex.rounded-full').should('have.class', 'inline-flex')
     cy.get('.inline-flex.rounded-full').should('have.class', 'items-center')
     cy.get('.inline-flex.rounded-full').should('have.class', 'rounded-full')
-    cy.get('.inline-flex.rounded-full').should('have.class', 'whitespace-nowrap')
+    cy.get('.inline-flex.rounded-full').should(
+      'have.class',
+      'whitespace-nowrap',
+    )
   })
 
   it('renders prefix slot with correct size constraints', () => {
     const TestIcon = {
       render() {
-        return h('svg', { 'data-cy': 'prefix-icon', class: 'w-4 h-4' })
+        return h('svg', { 'data-cy': 'prefix-icon', 'class': 'w-4 h-4' })
       },
     }
 
diff --git a/src/components/Badge/Badge.vue b/src/components/Badge/Badge.vue
index 8099ae703..abd350964 100644
--- a/src/components/Badge/Badge.vue
+++ b/src/components/Badge/Badge.vue
@@ -73,7 +73,7 @@ const classes = computed(() => {
     sm: 'h-4 text-xs px-1.5',
     md: 'h-5 text-xs px-1.5',
     lg: 'h-6 text-sm px-2',
-		xl: 'h-7 text-base px-2',
+    xl: 'h-7 text-base px-2',
   }[props.size]
 
   return [variantClasses, sizeClasses]
diff --git a/src/components/Badge/stories/Themes.vue b/src/components/Badge/stories/Themes.vue
index 0ee989120..fe637be34 100644
--- a/src/components/Badge/stories/Themes.vue
+++ b/src/components/Badge/stories/Themes.vue
@@ -3,8 +3,8 @@ import { Badge } from 'frappe-ui'
 </script>
 
 <template>
-  <Badge theme="gray" size='lg'>Solid</Badge>
-  <Badge theme="blue" size='lg'>Subtle</Badge>
-  <Badge theme="green" size='lg'>Outline</Badge>
-  <Badge theme="orange" size='lg'>Ghost</Badge>
+  <Badge theme="gray" size="lg">Solid</Badge>
+  <Badge theme="blue" size="lg">Subtle</Badge>
+  <Badge theme="green" size="lg">Outline</Badge>
+  <Badge theme="orange" size="lg">Ghost</Badge>
 </template>
diff --git a/src/components/Badge/types.ts b/src/components/Badge/types.ts
index 0d9417564..8ca421afc 100644
--- a/src/components/Badge/types.ts
+++ b/src/components/Badge/types.ts
@@ -15,4 +15,3 @@ export interface BadgeProps {
   /** Content displayed inside the badge */
   label?: Label | string | number
 }
-
diff --git a/src/components/Breadcrumbs/Breadcrumbs.api.md b/src/components/Breadcrumbs/Breadcrumbs.api.md
index f4f70a421..eb1ce6cb5 100644
--- a/src/components/Breadcrumbs/Breadcrumbs.api.md
+++ b/src/components/Breadcrumbs/Breadcrumbs.api.md
@@ -26,9 +26,9 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="Breadcrumbs" :data="propsData"/> 
+## API Reference
 
-<SlotsTable :data="slotsData"/> 
+<PropsTable name="Breadcrumbs" :data="propsData"/>
 
+<SlotsTable :data="slotsData"/>
diff --git a/src/components/Breadcrumbs/types.ts b/src/components/Breadcrumbs/types.ts
index 22b4de8e4..a01850b94 100644
--- a/src/components/Breadcrumbs/types.ts
+++ b/src/components/Breadcrumbs/types.ts
@@ -1,4 +1,4 @@
-import { RouterLinkProps } from 'vue-router'
+import type { RouterLinkProps } from 'vue-router'
 
 export interface BreadcrumbItem {
   /** Text shown for the breadcrumb item */
diff --git a/src/components/Button/Button.api.md b/src/components/Button/Button.api.md
index fa3a0d772..d2f215fc4 100644
--- a/src/components/Button/Button.api.md
+++ b/src/components/Button/Button.api.md
@@ -120,9 +120,9 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="Button" :data="propsData"/> 
+## API Reference
 
-<SlotsTable :data="slotsData"/> 
+<PropsTable name="Button" :data="propsData"/>
 
+<SlotsTable :data="slotsData"/>
diff --git a/src/components/Button/Button.vue b/src/components/Button/Button.vue
index b8aa98273..c5fc5ce32 100644
--- a/src/components/Button/Button.vue
+++ b/src/components/Button/Button.vue
@@ -9,70 +9,84 @@
           :aria-label="label"
           ref="rootRef"
         >
-      <LoadingIndicator
-        v-if="loading"
-        :class="{
-          'h-3 w-3': size == 'sm',
-          'h-[13.5px] w-[13.5px]': size == 'md',
-          'h-[15px] w-[15px]': size == 'lg',
-          'h-4.5 w-4.5': size == 'xl' || size == '2xl',
-        }"
-      />
-      <slot name="prefix" v-else-if="$slots['prefix'] || iconLeft">
-        <span
-          v-if="iconLeft && typeof iconLeft === 'string' && iconLeft.startsWith('lucide-')"
-          :class="[iconLeft, lucideSlotClasses]"
-          aria-hidden="true"
-        />
-        <FeatherIcon
-          v-else-if="iconLeft && typeof iconLeft === 'string'"
-          :name="iconLeft"
-          :class="slotClasses"
-          aria-hidden="true"
-        />
-        <component v-else-if="iconLeft" :is="iconLeft" :class="slotClasses" />
-      </slot>
-
-      <template v-if="loading && loadingText">{{ loadingText }}</template>
-      <template v-else-if="isIconButton && !loading">
-        <span
-          v-if="icon && typeof icon === 'string' && icon.startsWith('lucide-')"
-          :class="[icon, lucideSlotClasses]"
-          aria-hidden="true"
-        />
-        <FeatherIcon
-          v-else-if="icon && typeof icon === 'string'"
-          :name="icon"
-          :class="slotClasses"
-        />
-        <component v-else-if="icon" :is="icon" :class="slotClasses" />
-        <slot name="icon" v-else-if="$slots.icon" />
-        <div v-else-if="hasLucideIconInDefaultSlot" :class="slotClasses">
-          <slot>{{ label }}</slot>
-        </div>
-      </template>
-      <span v-else :class="{ 'sr-only': isIconButton }" class="truncate">
-        <slot>{{ label }}</slot>
-      </span>
-
-      <slot name="suffix">
-        <span
-          v-if="iconRight && typeof iconRight === 'string' && iconRight.startsWith('lucide-')"
-          :class="[iconRight, lucideSlotClasses]"
-          aria-hidden="true"
-        />
-        <FeatherIcon
-          v-else-if="iconRight && typeof iconRight === 'string'"
-          :name="iconRight"
-          :class="slotClasses"
-          aria-hidden="true"
-        />
-        <component
-          v-else-if="iconRight"
-          :is="iconRight"
-          :class="slotClasses"
-        />
-      </slot>
+          <LoadingIndicator
+            v-if="loading"
+            :class="{
+              'h-3 w-3': size == 'sm',
+              'h-[13.5px] w-[13.5px]': size == 'md',
+              'h-[15px] w-[15px]': size == 'lg',
+              'h-4.5 w-4.5': size == 'xl' || size == '2xl',
+            }"
+          />
+          <slot name="prefix" v-else-if="$slots['prefix'] || iconLeft">
+            <span
+              v-if="
+                iconLeft &&
+                typeof iconLeft === 'string' &&
+                iconLeft.startsWith('lucide-')
+              "
+              :class="[iconLeft, lucideSlotClasses]"
+              aria-hidden="true"
+            />
+            <FeatherIcon
+              v-else-if="iconLeft && typeof iconLeft === 'string'"
+              :name="iconLeft"
+              :class="slotClasses"
+              aria-hidden="true"
+            />
+            <component
+              v-else-if="iconLeft"
+              :is="iconLeft"
+              :class="slotClasses"
+            />
+          </slot>
+
+          <template v-if="loading && loadingText">{{ loadingText }}</template>
+          <template v-else-if="isIconButton && !loading">
+            <span
+              v-if="
+                icon && typeof icon === 'string' && icon.startsWith('lucide-')
+              "
+              :class="[icon, lucideSlotClasses]"
+              aria-hidden="true"
+            />
+            <FeatherIcon
+              v-else-if="icon && typeof icon === 'string'"
+              :name="icon"
+              :class="slotClasses"
+            />
+            <component v-else-if="icon" :is="icon" :class="slotClasses" />
+            <slot name="icon" v-else-if="$slots.icon" />
+            <div v-else-if="hasLucideIconInDefaultSlot" :class="slotClasses">
+              <slot>{{ label }}</slot>
+            </div>
+          </template>
+          <span v-else :class="{ 'sr-only': isIconButton }" class="truncate">
+            <slot>{{ label }}</slot>
+          </span>
+
+          <slot name="suffix">
+            <span
+              v-if="
+                iconRight &&
+                typeof iconRight === 'string' &&
+                iconRight.startsWith('lucide-')
+              "
+              :class="[iconRight, lucideSlotClasses]"
+              aria-hidden="true"
+            />
+            <FeatherIcon
+              v-else-if="iconRight && typeof iconRight === 'string'"
+              :name="iconRight"
+              :class="slotClasses"
+              aria-hidden="true"
+            />
+            <component
+              v-else-if="iconRight"
+              :is="iconRight"
+              :class="slotClasses"
+            />
+          </slot>
         </component>
       </TooltipTrigger>
       <TooltipBubble v-if="tooltip?.length" :text="tooltip" />
@@ -185,19 +199,19 @@ const buttonClasses = computed(() => {
   let disabledClasses = disabledClassesMap[themeVariant]
 
   let sizeClasses = {
-    sm: 'h-7 text-base px-2 rounded',
-    md: 'h-8 text-base font-medium px-2.5 rounded',
-    lg: 'h-10 text-lg font-medium px-3 rounded-md',
-    xl: 'h-11.5 text-xl font-medium px-3.5 rounded-lg',
+    'sm': 'h-7 text-base px-2 rounded',
+    'md': 'h-8 text-base font-medium px-2.5 rounded',
+    'lg': 'h-10 text-lg font-medium px-3 rounded-md',
+    'xl': 'h-11.5 text-xl font-medium px-3.5 rounded-lg',
     '2xl': 'h-13 text-2xl font-medium px-3.5 rounded-xl',
   }[props.size]
 
   if (isIconButton.value) {
     sizeClasses = {
-      sm: 'h-7 w-7 rounded',
-      md: 'h-8 w-8 rounded',
-      lg: 'h-10 w-10 rounded-md',
-      xl: 'h-11.5 w-11.5 rounded-lg',
+      'sm': 'h-7 w-7 rounded',
+      'md': 'h-8 w-8 rounded',
+      'lg': 'h-10 w-10 rounded-md',
+      'xl': 'h-11.5 w-11.5 rounded-lg',
       '2xl': 'h-13 w-13 rounded-xl',
     }[props.size]
   }
@@ -212,10 +226,10 @@ const buttonClasses = computed(() => {
 
 const slotClasses = computed(() => {
   let classes = {
-    sm: 'h-4',
-    md: 'h-4.5',
-    lg: 'h-5',
-    xl: 'h-6',
+    'sm': 'h-4',
+    'md': 'h-4.5',
+    'lg': 'h-5',
+    'xl': 'h-6',
     '2xl': 'h-6',
   }[props.size]
 
@@ -224,10 +238,10 @@ const slotClasses = computed(() => {
 
 const lucideSlotClasses = computed(() => {
   return {
-    sm: 'size-4',
-    md: 'size-4.5',
-    lg: 'size-5',
-    xl: 'size-6',
+    'sm': 'size-4',
+    'md': 'size-4.5',
+    'lg': 'size-5',
+    'xl': 'size-6',
     '2xl': 'size-6',
   }[props.size]
 })
diff --git a/src/components/Calendar/Calendar.api.md b/src/components/Calendar/Calendar.api.md
index f30348cda..e4f95885f 100644
--- a/src/components/Calendar/Calendar.api.md
+++ b/src/components/Calendar/Calendar.api.md
@@ -79,11 +79,11 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="Calendar" :data="propsData"/> 
+## API Reference
 
-<SlotsTable :data="slotsData"/> 
+<PropsTable name="Calendar" :data="propsData"/>
 
-<EmitsTable :data="emitsData"/> 
+<SlotsTable :data="slotsData"/>
 
+<EmitsTable :data="emitsData"/>
diff --git a/src/components/Calendar/Calendar.md b/src/components/Calendar/Calendar.md
index bd6c2357d..110491295 100644
--- a/src/components/Calendar/Calendar.md
+++ b/src/components/Calendar/Calendar.md
@@ -3,7 +3,9 @@
 A full-featured date and event view for displaying, organizing, and navigating schedules across days, weeks, or months.
 
 ## Default
+
 <ComponentPreview name="Calendar-Examples" csr="true" />
 
 ## Custom Header
+
 <ComponentPreview name="Calendar-CustomHeader" csr="true" />
diff --git a/src/components/Calendar/Calendar.vue b/src/components/Calendar/Calendar.vue
index db5cda1c0..679ab9efd 100644
--- a/src/components/Calendar/Calendar.vue
+++ b/src/components/Calendar/Calendar.vue
@@ -41,9 +41,17 @@
         <div class="flex gap-x-1">
           <!-- Increment and Decrement Button-->
 
-          <Button @click="decrement" variant="ghost" icon="lucide-chevron-left" />
+          <Button
+            @click="decrement"
+            variant="ghost"
+            icon="lucide-chevron-left"
+          />
           <Button label="Today" @click="setCalendarDate()" variant="ghost" />
-          <Button @click="increment" variant="ghost" icon="lucide-chevron-right" />
+          <Button
+            @click="increment"
+            variant="ghost"
+            icon="lucide-chevron-right"
+          />
 
           <!--  View change button, default is months or can be set via props!  -->
           <TabButtons
@@ -343,7 +351,7 @@ function openModal(data) {
 
 function handleCellClick(e, date, time = '', isFullDay = false) {
   if (isAnyPopoverOpen.value) {
-	isAnyPopoverOpen.value = false
+    isAnyPopoverOpen.value = false
     return
   }
 
@@ -676,7 +684,7 @@ function getVisibleRange() {
   if (activeView.value === 'Week') {
     const weekDates = datesInWeeks.value[week.value] || []
     if (!weekDates.length) return null
-    const orderedWeek = [...weekDates].sort((a, b) => a - b)
+    const orderedWeek = [...weekDates].toSorted((a, b) => a - b)
     const start = dayjs(orderedWeek[0]).startOf('day')
     const end = dayjs(orderedWeek[orderedWeek.length - 1]).endOf('day')
     return {
diff --git a/src/components/Calendar/CalendarDaily.vue b/src/components/Calendar/CalendarDaily.vue
index c15e6ddd3..3685b86ee 100644
--- a/src/components/Calendar/CalendarDaily.vue
+++ b/src/components/Calendar/CalendarDaily.vue
@@ -99,9 +99,9 @@
               :key="calendarEvent.id"
               :date="currentDate"
             >
-			  <template #event-popover-content="slotProps">
+              <template #event-popover-content="slotProps">
                 <slot name="event-popover-content" v-bind="slotProps" />
-			  </template>
+              </template>
             </CalendarWeekDayEvent>
             <!-- Current time Marker -->
             <CalendarTimeMarker :date="currentDate" />
diff --git a/src/components/Calendar/CalendarMonthEvent.vue b/src/components/Calendar/CalendarMonthEvent.vue
index a5b612b82..a87269a4c 100644
--- a/src/components/Calendar/CalendarMonthEvent.vue
+++ b/src/components/Calendar/CalendarMonthEvent.vue
@@ -1,10 +1,17 @@
 <template>
-  <Popover placement="left" transition="default" @open="registerDeleteShortcut" @close="unregisterDeleteShortcut">
+  <Popover
+    placement="left"
+    transition="default"
+    @open="registerDeleteShortcut"
+    @close="unregisterDeleteShortcut"
+  >
     <template #target="{ togglePopover, isOpen }">
       <div
         v-bind="$attrs"
         class="event flex gap-1.5 min-h-6 mx-px rounded p-[5px] transition-all duration-75 w-full overflow-hidden"
-        :class="{ active: activeEvent == (props.event?.id || props.event?.name) }"
+        :class="{
+          active: activeEvent == (props.event?.id || props.event?.name),
+        }"
         :style="eventBgStyle"
         @click.stop="handleEventClick($event, togglePopover, isOpen)"
         @dblclick.prevent="handleEventEdit($event)"
@@ -14,11 +21,19 @@
           class="event-border w-[2px] rounded shrink-0"
           :style="eventBorderStyle"
         />
-        <div class="relative flex h-full select-none items-start gap-2 overflow-hidden">
+        <div
+          class="relative flex h-full select-none items-start gap-2 overflow-hidden"
+        >
           <div v-if="config.showIcon && eventIcons[props.event.type]">
-            <component :is="eventIcons[props.event.type]" class="h-4 w-4 text-black" />
+            <component
+              :is="eventIcons[props.event.type]"
+              class="h-4 w-4 text-black"
+            />
           </div>
-          <p class="text-sm font-medium truncate" :class="{ italic: !props.event.title }">
+          <p
+            class="text-sm font-medium truncate"
+            :class="{ italic: !props.event.title }"
+          >
             {{ props.event.title || '[No title]' }}
           </p>
         </div>
diff --git a/src/components/Calendar/CalendarMonthly.vue b/src/components/Calendar/CalendarMonthly.vue
index 9f6ffd17b..c120c1441 100644
--- a/src/components/Calendar/CalendarMonthly.vue
+++ b/src/components/Calendar/CalendarMonthly.vue
@@ -32,11 +32,15 @@
         @click="calendarActions.handleCellClick($event, date)"
       >
         <div class="flex justify-center font-normal">
-          <div class="flex gap-0.5 w-full flex-col items-center text-xs text-right">
+          <div
+            class="flex gap-0.5 w-full flex-col items-center text-xs text-right"
+          >
             <span
               class="w-full flex justify-between items-center"
               :class="[
-                date.toDateString() === new Date().toDateString() ? 'p-[3px] pb-0.5' : 'p-2',
+                date.toDateString() === new Date().toDateString()
+                  ? 'p-[3px] pb-0.5'
+                  : 'p-2',
               ]"
             >
               <div></div>
@@ -87,7 +91,9 @@
               <ShowMoreCalendarEvent
                 v-if="timedEvents[parseDate(date)]"
                 :draggable="config.isEditMode"
-                @dragstart="onDragStart($event, timedEvents[parseDate(date)][0].id)"
+                @dragstart="
+                  onDragStart($event, timedEvents[parseDate(date)][0].id)
+                "
                 @dragend="$event.target.style.opacity = '1'"
                 @dragover.prevent
                 :events="timedEvents[parseDate(date)]"
@@ -134,9 +140,13 @@ const props = defineProps({
 
 const emit = defineEmits(['setCurrentDate'])
 
-const timedEvents = computed(() => useCalendarData(props.events, 'Month').timedEvents.value)
+const timedEvents = computed(
+  () => useCalendarData(props.events, 'Month').timedEvents.value,
+)
 
-const maxEventsInCell = computed(() => (props.currentMonthDates.length > 35 ? 1 : 2))
+const maxEventsInCell = computed(() =>
+  props.currentMonthDates.length > 35 ? 1 : 2,
+)
 
 function isCurrentMonth(date) {
   return date.getMonth() === props.currentMonth
diff --git a/src/components/Calendar/CalendarWeekDayEvent.vue b/src/components/Calendar/CalendarWeekDayEvent.vue
index df3f756b7..f4b97eba4 100644
--- a/src/components/Calendar/CalendarWeekDayEvent.vue
+++ b/src/components/Calendar/CalendarWeekDayEvent.vue
@@ -10,7 +10,9 @@
       <div
         ref="eventRef"
         class="event min-h-6 mx-px shadow rounded transition-all duration-75 shrink-0"
-        :class="{ active: activeEvent == (props.event?.id || props.event?.name) }"
+        :class="{
+          active: activeEvent == (props.event?.id || props.event?.name),
+        }"
         :style="innerStyle"
         @click.prevent="handleEventClick($event, togglePopover)"
         @dblclick.prevent="handleEventEdit($event)"
@@ -22,7 +24,9 @@
             class="event-border h-full w-[2px] rounded shrink-0"
             :style="eventBorderStyle"
           />
-          <div class="relative flex h-full select-none items-start gap-2 overflow-hidden">
+          <div
+            class="relative flex h-full select-none items-start gap-2 overflow-hidden"
+          >
             <div v-if="config.showIcon && eventIcons[props.event.type]">
               <component :is="eventIcons[props.event.type]" class="h-4 w-4" />
             </div>
@@ -40,7 +44,11 @@
                 class="text-xs font-normal event-subtitle"
               >
                 {{
-                  formattedDuration(updatedEvent.fromTime, updatedEvent.toTime, config.timeFormat)
+                  formattedDuration(
+                    updatedEvent.fromTime,
+                    updatedEvent.toTime,
+                    config.timeFormat,
+                  )
                 }}
               </p>
             </div>
@@ -153,15 +161,22 @@ const containerStyle = computed(() => {
     }
   }
 
-  const diff = calculateDiff(calendarEvent.value.fromTime, calendarEvent.value.toTime)
+  const diff = calculateDiff(
+    calendarEvent.value.fromTime,
+    calendarEvent.value.toTime,
+  )
   let height = diff * minuteHeight
   if (height < heightThreshold) height = minimumHeight
 
   const top = calculateMinutes(calendarEvent.value.fromTime) * minuteHeight
   const hallNumber = calendarEvent.value.hallNumber || 0
 
-  const width = isResizing.value || isRepositioning.value ? '100%' : `${93 - hallNumber * 20}%`
-  const left = isResizing.value || isRepositioning.value ? '0' : `${hallNumber * 20}%`
+  const width =
+    isResizing.value || isRepositioning.value
+      ? '100%'
+      : `${93 - hallNumber * 20}%`
+  const left =
+    isResizing.value || isRepositioning.value ? '0' : `${hallNumber * 20}%`
 
   return {
     position: 'absolute',
@@ -171,7 +186,8 @@ const containerStyle = computed(() => {
     height: `${height}px`,
     zIndex: isResizing.value || isRepositioning.value ? 100 : 0,
     transform: `translate(${state.xAxis}px, ${state.yAxis}px)`,
-    transition: isResizing.value || isRepositioning.value ? 'none' : 'all 0.1s ease',
+    transition:
+      isResizing.value || isRepositioning.value ? 'none' : 'all 0.1s ease',
   }
 })
 
@@ -211,7 +227,8 @@ const lineClampClass = computed(() => {
 
 function newEventEndTime(newHeight) {
   let newEndTime =
-    parseFloat(newHeight) / minuteHeight + calculateMinutes(calendarEvent.value.fromTime)
+    parseFloat(newHeight) / minuteHeight +
+    calculateMinutes(calendarEvent.value.fromTime)
   newEndTime = Math.floor(newEndTime)
   if (newEndTime > 1440) newEndTime = 1440
   return convertMinutesToHours(newEndTime)
@@ -228,7 +245,8 @@ function handleResizeMouseDown() {
   function resize(e) {
     preventClick.value = true
     const diffX = e.clientY - eventRef.value.getBoundingClientRect().top
-    eventRef.value.style.height = Math.round(diffX / height15Min) * height15Min + 'px'
+    eventRef.value.style.height =
+      Math.round(diffX / height15Min) * height15Min + 'px'
     eventRef.value.style.width = '100%'
     updatedEvent.toTime = newEventEndTime(eventRef.value.style.height)
     calendarEvent.value.toTime = newEventEndTime(eventRef.value.style.height)
@@ -279,14 +297,17 @@ function handleRepositionMouseDown(e, isPopoverOpen, closePopover) {
     if (calendarEvent.value.isFullDay && activeView.value === 'Week') {
       eventRef.value.style.width = '90%'
     }
-    if (calendarEvent.value.date !== updatedEvent.date) isEventUpdated.value = true
+    if (calendarEvent.value.date !== updatedEvent.date)
+      isEventUpdated.value = true
 
     if (isEventUpdated.value) {
       calendarEvent.value.date = updatedEvent.date
       calendarEvent.value.fromDate = updatedEvent.date
       calendarEvent.value.toDate = updatedEvent.date
-      calendarEvent.value.fromDateTime = updatedEvent.date + ' ' + updatedEvent.fromTime
-      calendarEvent.value.toDateTime = updatedEvent.date + ' ' + updatedEvent.toTime
+      calendarEvent.value.fromDateTime =
+        updatedEvent.date + ' ' + updatedEvent.fromTime
+      calendarEvent.value.toDateTime =
+        updatedEvent.date + ' ' + updatedEvent.toTime
       calendarEvent.value.fromTime = updatedEvent.fromTime
       calendarEvent.value.toTime = updatedEvent.toTime
       calendarActions.updateEventState(calendarEvent.value)
@@ -313,14 +334,20 @@ function handleHorizontalMovement(clientX, rect) {
 
   state.xAxis = Math.ceil(diff * eventWidth)
   updatedEvent.date = parseDate(
-    new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() + diff),
+    new Date(
+      currentDate.getFullYear(),
+      currentDate.getMonth(),
+      currentDate.getDate() + diff,
+    ),
   )
 }
 
 function handleVerticalMovement(clientY, prevY, rect) {
   let diffY = clientY - prevY
 
-  const parentRect = eventRef.value.closest('[data-time-grid]').getBoundingClientRect()
+  const parentRect = eventRef.value
+    .closest('[data-time-grid]')
+    .getBoundingClientRect()
   if (clientY < parentRect.top) diffY = parentRect.top - rect.top
   if (clientY > parentRect.bottom) diffY = parentRect.bottom - rect.bottom
 
@@ -328,10 +355,12 @@ function handleVerticalMovement(clientY, prevY, rect) {
   state.yAxis = diffY
 
   updatedEvent.fromTime = convertMinutesToHours(
-    calculateMinutes(calendarEvent.value.fromTime) + Math.round(diffY / minuteHeight),
+    calculateMinutes(calendarEvent.value.fromTime) +
+      Math.round(diffY / minuteHeight),
   )
   updatedEvent.toTime = convertMinutesToHours(
-    calculateMinutes(calendarEvent.value.toTime) + Math.round(diffY / minuteHeight),
+    calculateMinutes(calendarEvent.value.toTime) +
+      Math.round(diffY / minuteHeight),
   )
 
   for (const key of ['fromTime', 'toTime']) {
diff --git a/src/components/Calendar/CalendarWeekly.vue b/src/components/Calendar/CalendarWeekly.vue
index 45bca9eea..ae5eb0641 100644
--- a/src/components/Calendar/CalendarWeekly.vue
+++ b/src/components/Calendar/CalendarWeekly.vue
@@ -32,10 +32,16 @@
           :is="showCollapsable ? Button : 'div'"
           :class="{ '!pl-1.5 pr-1 py-1 !gap-1': showCollapsable }"
           variant="ghost"
-          :iconRight="showCollapsable ? (isCollapsed ? 'chevron-down' : 'chevron-up') : ''"
+          :iconRight="
+            showCollapsable ? (isCollapsed ? 'chevron-down' : 'chevron-up') : ''
+          "
           @click="showCollapsable && (isCollapsed = !isCollapsed)"
         >
-          <div class="text-sm text-ink-gray-6 h-[29px] inline-flex items-center">All day</div>
+          <div
+            class="text-sm text-ink-gray-6 h-[29px] inline-flex items-center"
+          >
+            All day
+          </div>
         </component>
       </div>
       <div class="grid w-full grid-cols-7 overflow-hidden">
@@ -60,13 +66,17 @@
               :key="calendarEvent.id"
               :date="date"
               @click.stop
-			  >
-                <template #event-popover-content="slotProps">
-                  <slot name="event-popover-content" v-bind="slotProps" />
-                </template>
-              </CalendarWeekDayEvent>
+            >
+              <template #event-popover-content="slotProps">
+                <slot name="event-popover-content" v-bind="slotProps" />
+              </template>
+            </CalendarWeekDayEvent>
             <Button
-              v-if="showCollapsable && isCollapsed && fullDayEvents[parseDate(date)]?.length > 2"
+              v-if="
+                showCollapsable &&
+                isCollapsed &&
+                fullDayEvents[parseDate(date)]?.length > 2
+              "
               :label="fullDayEvents[parseDate(date)]?.length - 2 + ' more'"
               variant="ghost"
               class="w-fit text-sm !py-0.5 !h-5 !justify-start cursor-pointer"
@@ -106,7 +116,9 @@
               class="relative w-full border-outline-gray-1"
               :class="[
                 idx === 0 && 'calendar-column border-l-[1px]',
-                config.noBorder && idx === weeklyDates.length - 1 ? '' : 'border-r-[1px]',
+                config.noBorder && idx === weeklyDates.length - 1
+                  ? ''
+                  : 'border-r-[1px]',
                 isWeekend(date, config) && 'bg-surface-gray-1',
               ]"
               :data-date-attr="date"
@@ -118,7 +130,9 @@
                 v-for="(time, i) in timeArray"
                 :key="time"
                 :data-time-attr="i == 0 ? '' : time"
-                @click.prevent="calendarActions.handleCellClick($event, date, time)"
+                @click.prevent="
+                  calendarActions.handleCellClick($event, date, time)
+                "
               >
                 <div
                   class="border-outline-gray-1 w-full"
@@ -185,12 +199,18 @@ const isCollapsed = ref(true)
 const hourHeight = props.config.hourHeight
 const minuteHeight = hourHeight / 60
 
-const timeArray = props.config.timeFormat == '24h' ? twentyFourHoursFormat : twelveHoursFormat
+const timeArray =
+  props.config.timeFormat == '24h' ? twentyFourHoursFormat : twelveHoursFormat
 
-const timedEvents = computed(() => useCalendarData(props.events).timedEvents.value)
-const fullDayEvents = computed(() => useCalendarData(props.events).fullDayEvents.value)
+const timedEvents = computed(
+  () => useCalendarData(props.events).timedEvents.value,
+)
+const fullDayEvents = computed(
+  () => useCalendarData(props.events).fullDayEvents.value,
+)
 
-const isToday = (date) => new Date(date).toDateString() === new Date().toDateString()
+const isToday = (date) =>
+  new Date(date).toDateString() === new Date().toDateString()
 
 const currentTime = computed(() => {
   let d = new Date()
@@ -225,7 +245,10 @@ function getFullDayEventsCount(eventsObject) {
 }
 
 function setFullDayEventsHeight(eventsObject, weeklyDates) {
-  let currentWeekEvents = getFullDayEventsInCurrentWeek(eventsObject, weeklyDates)
+  let currentWeekEvents = getFullDayEventsInCurrentWeek(
+    eventsObject,
+    weeklyDates,
+  )
   let maxEvents = getFullDayEventsCount(currentWeekEvents)
   if (maxEvents > 3) {
     showCollapsable.value = true
diff --git a/src/components/Calendar/EventModalContent.vue b/src/components/Calendar/EventModalContent.vue
index b38ebb0e3..0dbe107e4 100644
--- a/src/components/Calendar/EventModalContent.vue
+++ b/src/components/Calendar/EventModalContent.vue
@@ -4,10 +4,18 @@
       <span class="cursor-pointer" @click.stop="$emit('close')">
         <span class="lucide-x size-4" aria-hidden="true" />
       </span>
-      <span v-if="isEditMode" class="cursor-pointer" @click.stop="$emit('edit')">
+      <span
+        v-if="isEditMode"
+        class="cursor-pointer"
+        @click.stop="$emit('edit')"
+      >
         <span class="lucide-edit-2 size-4" aria-hidden="true" />
       </span>
-      <span v-if="isEditMode" class="cursor-pointer" @click.stop="$emit('delete')">
+      <span
+        v-if="isEditMode"
+        class="cursor-pointer"
+        @click.stop="$emit('delete')"
+      >
         <span class="lucide-trash-2 size-4" aria-hidden="true" />
       </span>
     </div>
@@ -28,7 +36,10 @@
             {{ calendarEvent.participant }}
           </span>
         </div>
-        <div class="flex items-center gap-2" v-if="calendarEvent.fromTime && calendarEvent.toTime">
+        <div
+          class="flex items-center gap-2"
+          v-if="calendarEvent.fromTime && calendarEvent.toTime"
+        >
           <span class="lucide-clock size-4" aria-hidden="true" />
           <span class="text-sm font-normal">
             {{ calendarEvent.fromTime }} - {{ calendarEvent.toTime }}
diff --git a/src/components/Calendar/calendarUtils.js b/src/components/Calendar/calendarUtils.js
index 61f3d7e93..22c949526 100644
--- a/src/components/Calendar/calendarUtils.js
+++ b/src/components/Calendar/calendarUtils.js
@@ -25,7 +25,7 @@ export function getCalendarDates(month, year) {
 
   function getBeforeDates(firstDay, leftPadding) {
     let allDates = getDatesAfter(firstDay, 0, leftPadding, -1)
-    allDates = allDates.reverse()
+    allDates = allDates.toReversed()
     return allDates
   }
 
@@ -145,7 +145,7 @@ export function handleSeconds(time) {
 
 export function findOverlappingEventsCount(events) {
   // Sort events based on start time
-  events = events.sort((a, b) => a.startTime - b.startTime)
+  events = events.toSorted((a, b) => a.startTime - b.startTime)
 
   let hallNumber = 0
   const result = []
@@ -164,15 +164,13 @@ export function findOverlappingEventsCount(events) {
   }
 
   // flattening halls and events
-  return result
-    .map((hall, idx) =>
-      hall.map((event, eventIdx) => ({
-        ...event,
-        hallNumber: idx,
-        idx: eventIdx,
-      })),
-    )
-    .flat()
+  return result.flatMap((hall, idx) =>
+    hall.map((event, eventIdx) => ({
+      ...event,
+      hallNumber: idx,
+      idx: eventIdx,
+    })),
+  )
 }
 
 // Helpers
diff --git a/src/components/Calendar/composables/useCalendarData.js b/src/components/Calendar/composables/useCalendarData.js
index df68bd2cf..8d6ad7f42 100644
--- a/src/components/Calendar/composables/useCalendarData.js
+++ b/src/components/Calendar/composables/useCalendarData.js
@@ -22,7 +22,7 @@ export default function useCalendarData(events, view = '') {
           task.startTime = calculateMinutes(task.fromTime)
           task.endTime = calculateMinutes(task.toTime)
         })
-        let sortedEvents = value.sort((a, b) => a.startTime - b.startTime)
+        let sortedEvents = value.toSorted((a, b) => a.startTime - b.startTime)
         sortedArray[key] = findOverlappingEventsCount(sortedEvents)
       }
     }
@@ -42,7 +42,7 @@ function sortMonthlyEvents(events) {
   let fullDayEvents = events.filter((event) => event.isFullDay)
   let timedEvents = events
     .filter((event) => !event.isFullDay)
-    .sort((a, b) =>
+    .toSorted((a, b) =>
       a.fromTime !== b.fromTime
         ? calculateMinutes(a.fromTime) > calculateMinutes(b.fromTime)
           ? 1
diff --git a/src/components/Calendar/stories/CustomHeader.vue b/src/components/Calendar/stories/CustomHeader.vue
index 09332d552..fb43e2872 100644
--- a/src/components/Calendar/stories/CustomHeader.vue
+++ b/src/components/Calendar/stories/CustomHeader.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { Button, Calendar, DatePicker, Select } from "frappe-ui";
+import { Button, Calendar, DatePicker, Select } from 'frappe-ui'
 
 const config = {
   defaultMode: 'Month',
@@ -92,7 +92,9 @@ const events = ref([
 </script>
 
 <template>
-  <div class="w-full flex flex-wrap gap-3 items-center h-screen overflow-hidden">
+  <div
+    class="w-full flex flex-wrap gap-3 items-center h-screen overflow-hidden"
+  >
     <Calendar
       :config="config"
       :events="events"
diff --git a/src/components/Calendar/stories/Examples.vue b/src/components/Calendar/stories/Examples.vue
index ab0551865..4e0ff9e1a 100644
--- a/src/components/Calendar/stories/Examples.vue
+++ b/src/components/Calendar/stories/Examples.vue
@@ -92,7 +92,9 @@ const events = ref([
 </script>
 
 <template>
-  <div class="w-full flex flex-wrap gap-3 items-center h-screen overflow-hidden">
+  <div
+    class="w-full flex flex-wrap gap-3 items-center h-screen overflow-hidden"
+  >
     <Calendar
       :config="config"
       :events="events"
diff --git a/src/components/Calendar/useEventBase.js b/src/components/Calendar/useEventBase.js
index 16aa94442..ce2cdb29f 100644
--- a/src/components/Calendar/useEventBase.js
+++ b/src/components/Calendar/useEventBase.js
@@ -41,7 +41,9 @@ export function useEventBase(props) {
   const getTheme = () => {
     const theme = document.documentElement.getAttribute('data-theme')
     if (theme) return theme
-    return document.documentElement.classList.contains('htw-dark') ? 'dark' : 'light'
+    return document.documentElement.classList.contains('htw-dark')
+      ? 'dark'
+      : 'light'
   }
 
   function color(colorValue) {
@@ -103,7 +105,10 @@ export function useEventBase(props) {
     if (e.detail === 1) {
       clickTimer = setTimeout(() => {
         if (calendarActions.props.onClick)
-          calendarActions.props.onClick({ e, calendarEvent: calendarEvent.value })
+          calendarActions.props.onClick({
+            e,
+            calendarEvent: calendarEvent.value,
+          })
         else {
           togglePopover()
           isAnyPopoverOpen.value = !isPopoverOpen
@@ -118,7 +123,10 @@ export function useEventBase(props) {
     e && (e.cancelBubble = true)
     clearTimeout(clickTimer)
     if (calendarActions.props.onDblClick) {
-      calendarActions.props.onDblClick({ e, calendarEvent: calendarEvent.value })
+      calendarActions.props.onDblClick({
+        e,
+        calendarEvent: calendarEvent.value,
+      })
       return
     }
     if (!config.isEditMode) return
diff --git a/src/components/Charts/axisChartOptions.ts b/src/components/Charts/axisChartOptions.ts
index d21b36c7c..4a19339d9 100644
--- a/src/components/Charts/axisChartOptions.ts
+++ b/src/components/Charts/axisChartOptions.ts
@@ -1,6 +1,6 @@
 import useEchartsOptions from './eChartOptions'
 import { formatValue, mergeDeep } from './helpers'
-import {
+import type {
   AreaSeriesConfig,
   AxisChartConfig,
   BarSeriesConfig,
@@ -26,7 +26,7 @@ export default function useAxisChartOptions(config: AxisChartConfig) {
   const swapXY = config.swapXY
   const lastBarSeriesIdx = config.series
     .slice()
-    .reverse()
+    .toReversed()
     .findIndex((s) => s.type === 'bar')
   const hasY2 = config.series.some((s) => s.axis === 'y2')
 
@@ -99,7 +99,7 @@ function getBarSeriesOptions(config: AxisChartConfig, series: BarSeriesConfig) {
   const idx = config.series.findIndex((s) => s.name === series.name)
   const lastBarSeriesIdx = config.series
     .slice()
-    .reverse()
+    .toReversed()
     .findIndex((s) => s.type === 'bar')
 
   const isLastBar = lastBarSeriesIdx === idx
diff --git a/src/components/Charts/donutChartOptions.ts b/src/components/Charts/donutChartOptions.ts
index 033512884..85e674b0f 100644
--- a/src/components/Charts/donutChartOptions.ts
+++ b/src/components/Charts/donutChartOptions.ts
@@ -1,12 +1,12 @@
 import { getTitleOptions } from './eChartOptions'
 import { formatValue } from './helpers'
-import { DonutChartConfig } from './types'
+import type { DonutChartConfig } from './types'
 
 export default function useDonutChartOptions(config: DonutChartConfig) {
   const isRTL = config.dir === 'rtl'
   let data = config.data || []
 
-  data = data.sort((a, b) => {
+  data = data.toSorted((a, b) => {
     const aValue = a[config.valueColumn]
     const bValue = b[config.valueColumn]
     if (aValue === bValue) {
diff --git a/src/components/Charts/eChartOptions.ts b/src/components/Charts/eChartOptions.ts
index 6c34ff765..5e785d3ef 100644
--- a/src/components/Charts/eChartOptions.ts
+++ b/src/components/Charts/eChartOptions.ts
@@ -1,5 +1,5 @@
 import { formatDate, formatLabel, formatValue, mergeDeep } from './helpers'
-import { AxisChartConfig } from './types'
+import type { AxisChartConfig } from './types'
 
 export const PADDING_TOP = 0
 export const PADDING_BOTTOM = 10
@@ -47,7 +47,7 @@ export default function useEchartsOptions(config: AxisChartConfig) {
     tooltip: {
       show: true,
       trigger: 'axis',
-      formatter: (params: Object | Array<Object>) => {
+      formatter: (params: object | Array<object>) => {
         const dirAttr = isRTL ? ' dir="rtl"' : ''
 
         if (Array.isArray(params)) {
@@ -55,7 +55,7 @@ export default function useEchartsOptions(config: AxisChartConfig) {
             // remove zero values
             .filter((p) => p.value?.[1] !== 0)
             // sort in descending order by value
-            .sort((a, b) => b.value?.[1] - a.value?.[1])
+            .toSorted((a, b) => b.value?.[1] - a.value?.[1])
         }
 
         if (!Array.isArray(params)) {
@@ -133,7 +133,11 @@ export default function useEchartsOptions(config: AxisChartConfig) {
   }
 }
 
-export function getTitleOptions(title: string, subtitle?: string, isRTL?: boolean) {
+export function getTitleOptions(
+  title: string,
+  subtitle?: string,
+  isRTL?: boolean,
+) {
   return {
     top: '4px',
     left: isRTL ? 'right' : '0.8%',
@@ -231,7 +235,10 @@ function getXAxisOptions(config: AxisChartConfig) {
         },
       }
 
-  return mergeDeep(options, config.swapXY ? config.yAxis.echartOptions : config.xAxis.echartOptions)
+  return mergeDeep(
+    options,
+    config.swapXY ? config.yAxis.echartOptions : config.xAxis.echartOptions,
+  )
 }
 
 function getYAxisOptions(config: AxisChartConfig) {
@@ -309,7 +316,7 @@ function getYAxisOptions(config: AxisChartConfig) {
 
   primaryYAxisOptions = mergeDeep(
     primaryYAxisOptions,
-    config.swapXY ? config.xAxis.echartOptions : config.yAxis.echartOptions
+    config.swapXY ? config.xAxis.echartOptions : config.yAxis.echartOptions,
   )
 
   let secondaryYAxisOptions = {
@@ -360,7 +367,7 @@ function getYAxisOptions(config: AxisChartConfig) {
 
   secondaryYAxisOptions = mergeDeep(
     secondaryYAxisOptions,
-    config.swapXY ? config.y2Axis?.echartOptions : config.y2Axis?.echartOptions
+    config.swapXY ? config.y2Axis?.echartOptions : config.y2Axis?.echartOptions,
   )
 
   return config.swapXY
diff --git a/src/components/Charts/funnelChartOptions.ts b/src/components/Charts/funnelChartOptions.ts
index 59dd5d748..b2ad97414 100644
--- a/src/components/Charts/funnelChartOptions.ts
+++ b/src/components/Charts/funnelChartOptions.ts
@@ -6,7 +6,7 @@ import {
   TITLE_HEIGHT,
 } from './eChartOptions'
 import { formatValue } from './helpers'
-import { FunnelChartConfig } from './types'
+import type { FunnelChartConfig } from './types'
 
 export default function getFunnelChartOptions(config: FunnelChartConfig) {
   const isRTL = config.dir === 'rtl'
diff --git a/src/components/Charts/helpers.ts b/src/components/Charts/helpers.ts
index bfaed7a86..4f27049fd 100644
--- a/src/components/Charts/helpers.ts
+++ b/src/components/Charts/helpers.ts
@@ -49,7 +49,11 @@ export type TimeGrain =
   | 'month'
   | 'quarter'
   | 'year'
-export function formatDate(date: string, format?: string, grain: TimeGrain = 'day') {
+export function formatDate(
+  date: string,
+  format?: string,
+  grain: TimeGrain = 'day',
+) {
   if (!date) return ''
 
   if (grain) {
@@ -74,33 +78,32 @@ export function formatDate(date: string, format?: string, grain: TimeGrain = 'da
   return dayjs(date).format(format)
 }
 
-
 export function isObject(item: any) {
   return item && typeof item === 'object' && !Array.isArray(item)
 }
 
 export function mergeDeep(target: any, ...sources: any[]) {
-  if (!sources.length) return target;
-  const source = sources.shift();
+  if (!sources.length) return target
+  const source = sources.shift()
 
   if (!source || !isObject(target) || !isObject(source)) {
     // Skip the current source if it's not a proper object
-    return mergeDeep(target, ...sources);
+    return mergeDeep(target, ...sources)
   }
 
-  let output = Object.assign({}, target);
+  let output = Object.assign({}, target)
 
   Object.keys(source).forEach((key) => {
     if (isObject(source[key])) {
       if (!(key in output)) {
-        output[key] = source[key];
+        output[key] = source[key]
       } else {
-        output[key] = mergeDeep(output[key], source[key]);
+        output[key] = mergeDeep(output[key], source[key])
       }
     } else {
-      output[key] = source[key];
+      output[key] = source[key]
     }
-  });
+  })
 
-  return mergeDeep(output, ...sources);
+  return mergeDeep(output, ...sources)
 }
diff --git a/src/components/Charts/types.ts b/src/components/Charts/types.ts
index 718e7602c..cea5a9203 100644
--- a/src/components/Charts/types.ts
+++ b/src/components/Charts/types.ts
@@ -1,4 +1,4 @@
-import { TimeGrain } from './helpers'
+import type { TimeGrain } from './helpers'
 
 export type AxisChartConfig = {
   data: Record<string, any>[]
diff --git a/src/components/Checkbox/Checkbox.api.md b/src/components/Checkbox/Checkbox.api.md
index f70385fba..1e67e4c33 100644
--- a/src/components/Checkbox/Checkbox.api.md
+++ b/src/components/Checkbox/Checkbox.api.md
@@ -85,11 +85,11 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="Checkbox" :data="propsData"/> 
+## API Reference
 
-<SlotsTable :data="slotsData"/> 
+<PropsTable name="Checkbox" :data="propsData"/>
 
-<EmitsTable :data="emitsData"/> 
+<SlotsTable :data="slotsData"/>
 
+<EmitsTable :data="emitsData"/>
diff --git a/src/components/Checkbox/Checkbox.cy.ts b/src/components/Checkbox/Checkbox.cy.ts
index 53aef51cd..52d7da532 100644
--- a/src/components/Checkbox/Checkbox.cy.ts
+++ b/src/components/Checkbox/Checkbox.cy.ts
@@ -59,7 +59,12 @@ describe('Checkbox', () => {
 
     it('renders the canonical data-* hooks on the control', () => {
       cy.mount(Checkbox, {
-        props: { label: 'Accept', size: 'md', required: true, modelValue: true },
+        props: {
+          label: 'Accept',
+          size: 'md',
+          required: true,
+          modelValue: true,
+        },
       })
       cy.get('input').should('have.attr', 'data-slot', 'control')
       cy.get('input').should('have.attr', 'data-size', 'md')
diff --git a/src/components/Checkbox/Checkbox.vue b/src/components/Checkbox/Checkbox.vue
index d8e44533c..18cd04161 100644
--- a/src/components/Checkbox/Checkbox.vue
+++ b/src/components/Checkbox/Checkbox.vue
@@ -1,9 +1,6 @@
 <template>
   <div class="inline-flex flex-col">
-    <div
-      class="inline-flex gap-2 rounded transition"
-      :class="rowClasses"
-    >
+    <div class="inline-flex gap-2 rounded transition" :class="rowClasses">
       <input
         class="rounded-sm mt-[1px] bg-surface-white"
         :class="inputClasses"
@@ -41,11 +38,7 @@
       >
         <slot v-if="$slots.description" name="description" />
       </InputDescription>
-      <InputError
-        v-if="hasError"
-        :id="errorMessageId"
-        :lines="errorLines"
-      />
+      <InputError v-if="hasError" :id="errorMessageId" :lines="errorLines" />
     </div>
   </div>
 </template>
diff --git a/src/components/Checkbox/index.ts b/src/components/Checkbox/index.ts
index 4e7abd311..f2b20f33b 100644
--- a/src/components/Checkbox/index.ts
+++ b/src/components/Checkbox/index.ts
@@ -1,2 +1,2 @@
 export { default as Checkbox } from './Checkbox.vue'
-export type { CheckboxProps } from './types'
\ No newline at end of file
+export type { CheckboxProps } from './types'
diff --git a/src/components/CircularProgressBar/CircularProgressBar.api.md b/src/components/CircularProgressBar/CircularProgressBar.api.md
index 26d5fc405..44de30067 100644
--- a/src/components/CircularProgressBar/CircularProgressBar.api.md
+++ b/src/components/CircularProgressBar/CircularProgressBar.api.md
@@ -56,7 +56,7 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="CircularProgressBar" :data="propsData"/> 
+## API Reference
 
+<PropsTable name="CircularProgressBar" :data="propsData"/>
diff --git a/src/components/CircularProgressBar/CircularProgressBar.story.vue b/src/components/CircularProgressBar/CircularProgressBar.story.vue
index af33aa6f6..0e11c5f94 100644
--- a/src/components/CircularProgressBar/CircularProgressBar.story.vue
+++ b/src/components/CircularProgressBar/CircularProgressBar.story.vue
@@ -1,11 +1,11 @@
 <script setup>
-import { CircularProgressBar } from "frappe-ui";
-import Story from "@/components/Story.vue";
+import { CircularProgressBar } from 'frappe-ui'
+import Story from '@/components/Story.vue'
 
 // 'black' | 'red' | 'green' | 'blue' | 'orange'
 
-const themes = ["black", "red", "green", "blue", "orange"];
-const sizes = ["xs", "sm", "md", "lg", "xl"];
+const themes = ['black', 'red', 'green', 'blue', 'orange']
+const sizes = ['xs', 'sm', 'md', 'lg', 'xl']
 </script>
 
 <template>
@@ -36,7 +36,7 @@ const sizes = ["xs", "sm", "md", "lg", "xl"];
       <CircularProgressBar
         :step="2"
         :totalSteps="6"
-        :theme='{ primary: "#2376f5", secondary: "#ddd5d5" }'
+        :theme="{ primary: '#2376f5', secondary: '#ddd5d5' }"
       />
     </Story>
 
diff --git a/src/components/CircularProgressBar/index.ts b/src/components/CircularProgressBar/index.ts
index 020527ac3..2dc9ac7a7 100644
--- a/src/components/CircularProgressBar/index.ts
+++ b/src/components/CircularProgressBar/index.ts
@@ -1,2 +1,2 @@
 export { default as CircularProgressBar } from './CircularProgressBar.vue'
-export type { CircularProgressBarProps } from './types'
\ No newline at end of file
+export type { CircularProgressBarProps } from './types'
diff --git a/src/components/CircularProgressBar/types.ts b/src/components/CircularProgressBar/types.ts
index 0307d9a9a..d1e7040c7 100644
--- a/src/components/CircularProgressBar/types.ts
+++ b/src/components/CircularProgressBar/types.ts
@@ -29,7 +29,13 @@ export interface CircularProgressBarProps {
   variant?: 'solid' | 'outline'
 
   /** Theme used for the progress bar (predefined or custom colors) */
-  theme?: 'black' | 'red' | 'green' | 'blue' | 'orange' | { primary: string; secondary: string }
+  theme?:
+    | 'black'
+    | 'red'
+    | 'green'
+    | 'blue'
+    | 'orange'
+    | { primary: string; secondary: string }
 
   /** Size of the progress bar */
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
diff --git a/src/components/Combobox/Combobox.api.md b/src/components/Combobox/Combobox.api.md
index dd51f5c98..544322562 100644
--- a/src/components/Combobox/Combobox.api.md
+++ b/src/components/Combobox/Combobox.api.md
@@ -262,11 +262,11 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="Combobox" :data="propsData"/> 
+## API Reference
 
-<SlotsTable :data="slotsData"/> 
+<PropsTable name="Combobox" :data="propsData"/>
 
-<EmitsTable :data="emitsData"/> 
+<SlotsTable :data="slotsData"/>
 
+<EmitsTable :data="emitsData"/>
diff --git a/src/components/Combobox/Combobox.cy.ts b/src/components/Combobox/Combobox.cy.ts
index fb011f34e..147c8d70b 100644
--- a/src/components/Combobox/Combobox.cy.ts
+++ b/src/components/Combobox/Combobox.cy.ts
@@ -11,8 +11,16 @@ describe('Combobox', () => {
         props: { options: fruits, placeholder: 'Pick fruit' },
       })
 
-      cy.get('[data-slot="trigger"]').should('have.attr', 'data-variant', 'subtle')
-      cy.get('[role="combobox"]').should('have.attr', 'placeholder', 'Pick fruit')
+      cy.get('[data-slot="trigger"]').should(
+        'have.attr',
+        'data-variant',
+        'subtle',
+      )
+      cy.get('[role="combobox"]').should(
+        'have.attr',
+        'placeholder',
+        'Pick fruit',
+      )
     })
 
     it('forwards `id` to the input element', () => {
@@ -25,13 +33,21 @@ describe('Combobox', () => {
         props: { options: fruits, size: 'lg', variant: 'outline' },
       })
       cy.get('[data-slot="trigger"]').should('have.attr', 'data-size', 'lg')
-      cy.get('[data-slot="trigger"]').should('have.attr', 'data-variant', 'outline')
+      cy.get('[data-slot="trigger"]').should(
+        'have.attr',
+        'data-variant',
+        'outline',
+      )
     })
 
     it('renders the chevron and rotates it when open', () => {
       cy.mount(Combobox, { props: { options: fruits } })
       cy.get('[data-slot="chevron"]').should('exist')
-      cy.get('[data-slot="trigger"]').should('have.attr', 'data-state', 'closed')
+      cy.get('[data-slot="trigger"]').should(
+        'have.attr',
+        'data-state',
+        'closed',
+      )
 
       cy.get('[data-slot="chevron"]').click()
       cy.get('[data-slot="trigger"]').should('have.attr', 'data-state', 'open')
@@ -48,7 +64,7 @@ describe('Combobox', () => {
     it('opens and selects a regular option', () => {
       cy.mount(Combobox, {
         props: {
-          options: fruits,
+          'options': fruits,
           'onUpdate:modelValue': cy.spy().as('onUpdate'),
           'onUpdate:selectedOption': cy.spy().as('onSelectedOption'),
         },
@@ -79,7 +95,7 @@ describe('Combobox', () => {
     it('emits update:open when opening and closing', () => {
       cy.mount(Combobox, {
         props: {
-          options: fruits,
+          'options': fruits,
           'onUpdate:open': cy.spy().as('onOpen'),
         },
       })
@@ -101,8 +117,8 @@ describe('Combobox', () => {
     it('does not select a disabled option on click', () => {
       cy.mount(Combobox, {
         props: {
-          open: true,
-          options: [
+          'open': true,
+          'options': [
             { label: 'Apple', value: 'apple' },
             { label: 'Mango', value: 'mango', disabled: true },
           ],
@@ -118,10 +134,10 @@ describe('Combobox', () => {
     it('emits update:query and input, filters options, and clears value when cleared', () => {
       cy.mount(Combobox, {
         props: {
-          modelValue: 'Apple',
-          options: fruits,
+          'modelValue': 'Apple',
+          'options': fruits,
           'onUpdate:query': cy.spy().as('onUpdateQuery'),
-          onInput: cy.spy().as('onInput'),
+          'onInput': cy.spy().as('onInput'),
           'onUpdate:modelValue': cy.spy().as('onUpdate'),
           'onUpdate:selectedOption': cy.spy().as('onSelectedOption'),
         },
@@ -151,10 +167,14 @@ describe('Combobox', () => {
         },
       })
       cy.get('[role="combobox"]').type('ENG')
-      cy.get('[role="option"]').should('have.length', 1).and('contain.text', 'Engineering')
+      cy.get('[role="option"]')
+        .should('have.length', 1)
+        .and('contain.text', 'Engineering')
 
       cy.get('[role="combobox"]').clear().type('des')
-      cy.get('[role="option"]').should('have.length', 1).and('contain.text', 'Design')
+      cy.get('[role="option"]')
+        .should('have.length', 1)
+        .and('contain.text', 'Design')
     })
   })
 
@@ -162,16 +182,18 @@ describe('Combobox', () => {
     it('shows the built-in create row and commits raw query as value', () => {
       cy.mount(Combobox, {
         props: {
-          options: fruits,
-          allowCustomValue: true,
-          openOnFocus: true,
+          'options': fruits,
+          'allowCustomValue': true,
+          'openOnFocus': true,
           'onUpdate:modelValue': cy.spy().as('onUpdate'),
         },
       })
 
       cy.get('[role="combobox"]').focus().type('dragonfruit')
       cy.get('[role="option"]').should('have.length', 1)
-      cy.get('[role="option"]').first().should('contain.text', 'Create "dragonfruit"')
+      cy.get('[role="option"]')
+        .first()
+        .should('contain.text', 'Create "dragonfruit"')
       cy.get('[role="option"]').first().click()
       cy.get('@onUpdate').should('have.been.calledWith', 'dragonfruit')
     })
@@ -179,9 +201,9 @@ describe('Combobox', () => {
     it('pressing Enter commits the custom value', () => {
       cy.mount(Combobox, {
         props: {
-          options: fruits,
-          allowCustomValue: true,
-          openOnFocus: true,
+          'options': fruits,
+          'allowCustomValue': true,
+          'openOnFocus': true,
           'onUpdate:modelValue': cy.spy().as('onUpdate'),
         },
       })
@@ -233,7 +255,8 @@ describe('Combobox', () => {
               value: 'jane',
               slots: {
                 prefix: () => h('span', { 'data-cy': 'p' }, 'P'),
-                label: ({ item }: any) => h('span', { 'data-cy': 'l' }, item.label),
+                label: ({ item }: any) =>
+                  h('span', { 'data-cy': 'l' }, item.label),
                 suffix: () => h('span', { 'data-cy': 's' }, 'S'),
               },
             },
@@ -254,7 +277,8 @@ describe('Combobox', () => {
               label: 'Custom Row',
               value: 'row',
               slots: {
-                item: () => h('div', { 'data-cy': 'full-row' }, 'Custom Takeover'),
+                item: () =>
+                  h('div', { 'data-cy': 'full-row' }, 'Custom Takeover'),
               },
             },
           ],
@@ -357,8 +381,8 @@ describe('Combobox', () => {
 
       cy.mount(Combobox, {
         props: {
-          openOnFocus: true,
-          options: [
+          'openOnFocus': true,
+          'options': [
             { label: 'Apple', value: 'apple' },
             {
               type: 'custom',
@@ -484,7 +508,10 @@ describe('Combobox', () => {
           footer: () => h('div', { 'data-cy': 'footer' }, 'FOOTER'),
         },
       })
-      cy.get('[data-slot="footer"] [data-cy="footer"]').should('contain.text', 'FOOTER')
+      cy.get('[data-slot="footer"] [data-cy="footer"]').should(
+        'contain.text',
+        'FOOTER',
+      )
     })
   })
 
@@ -508,7 +535,11 @@ describe('Combobox', () => {
       }).then(() => {
         expect(warn).to.have.been.calledWithMatch(/placement.*deprecated/i)
       })
-      cy.get('[data-slot="content"]').should('have.attr', 'data-align', 'center')
+      cy.get('[data-slot="content"]').should(
+        'have.attr',
+        'data-align',
+        'center',
+      )
     })
 
     it('forwards `side` to the popover', () => {
@@ -532,7 +563,7 @@ describe('Combobox', () => {
           trigger: ({ displayValue }: any) =>
             h(
               'button',
-              { type: 'button', 'data-cy': 'custom-btn' },
+              { 'type': 'button', 'data-cy': 'custom-btn' },
               displayValue || 'Pick a fruit',
             ),
         },
@@ -548,7 +579,7 @@ describe('Combobox', () => {
         props: { options: fruits },
         slots: {
           trigger: () =>
-            h('button', { type: 'button', 'data-cy': 'btn' }, 'Pick'),
+            h('button', { 'type': 'button', 'data-cy': 'btn' }, 'Pick'),
         },
       })
 
@@ -557,7 +588,9 @@ describe('Combobox', () => {
         .should('be.focused')
         .type('ma')
 
-      cy.get('[role="option"]').should('have.length', 1).and('contain.text', 'Mango')
+      cy.get('[role="option"]')
+        .should('have.length', 1)
+        .and('contain.text', 'Mango')
     })
 
     it('renders built-in button when trigger="button" is set and avoids nested <button>', () => {
@@ -604,8 +637,8 @@ describe('Combobox', () => {
     it('exposes `reset()` which clears query and selection', () => {
       cy.mount(Combobox, {
         props: {
-          modelValue: 'Apple',
-          options: fruits,
+          'modelValue': 'Apple',
+          'options': fruits,
           'onUpdate:modelValue': cy.spy().as('onUpdate'),
           'onUpdate:selectedOption': cy.spy().as('onSelectedOption'),
           'onUpdate:query': cy.spy().as('onUpdateQuery'),
diff --git a/src/components/Combobox/Combobox.md b/src/components/Combobox/Combobox.md
index cb7b48dd3..074cc2265 100644
--- a/src/components/Combobox/Combobox.md
+++ b/src/components/Combobox/Combobox.md
@@ -3,51 +3,61 @@
 Lets users choose from available options or type their own. Provides clear, responsive feedback for every interaction.
 
 ## Simple
+
 A plain repo picker — just pass `options` as an array of strings.
 
 <ComponentPreview name="Combobox-Simple" layout="stacked" />
 
 ## Emoji Picker
+
 Button-triggered combobox via `trigger="button"`. The search input moves into the popover header. The button's label and prefix auto-derive from the selected option — `#item-prefix` doubles as the selected-state prefix, and `#prefix` is the placeholder icon shown before anything is picked.
 
 <ComponentPreview name="Combobox-EmojiPicker" layout="stacked" />
 
 ## Grouped Options
+
 Options split into named groups. `#item-prefix` renders a colored swatch per row.
 
 <ComponentPreview name="Combobox-Grouped" />
 
 ## Custom Value
+
 Free-form acceptance via `allowCustomValue`: the typed query becomes the model value when nothing matches, and unknown external values are preserved. The component renders a built-in "Create X" row as a click affordance. Use this when you want a "text input with autocomplete" feel. For richer create-new UX (custom label, icon, persistence callback), see [Create New](#create-new) below.
 
 <ComponentPreview name="Combobox-CustomValue" />
 
 ## Clearable
+
 Uses the `#trigger` slot to compose a custom trigger with an inline clear button. The X clears `v-model` via `@click.stop` so the popover doesn't toggle, and `@pointerdown.stop` keeps the anchor from intercepting the press.
 
 <ComponentPreview name="Combobox-Clearable" />
 
 ## Create New
+
 "Create new" is just a `type: 'custom'` option. `condition` hides the row when the query is empty or already matches an existing item, and `onClick` receives the typed `query` so you can persist the new value.
 
 <ComponentPreview name="Combobox-CreateNew" />
 
 ## Status Picker
+
 Dotted indicator aligned to the first line, with supporting description text.
 
 <ComponentPreview name="Combobox-StatusPicker" />
 
 ## Member Picker
+
 Avatar rows with a contextual invite action authored through a template slot.
 
 <ComponentPreview name="Combobox-MemberPicker" />
 
 ## In Dialog
+
 Combobox rendered inside a Dialog. Verifies focus restores to the trigger after the popover closes, even when wrapped by the Dialog's focus scope.
 
 <ComponentPreview name="Combobox-InDialog" layout="stacked" />
 
 ## Label, Description, Error
+
 `Combobox` supports `label`, `description`, `error`, and `required` directly — no `FormControl` wrapper needed. The error suppresses the description and wires `aria-invalid` + `aria-errormessage` onto the input.
 
 <ComponentPreview name="Combobox-Labeling" />
diff --git a/src/components/Combobox/Combobox.vue b/src/components/Combobox/Combobox.vue
index 0f7408ea7..eca752e97 100644
--- a/src/components/Combobox/Combobox.vue
+++ b/src/components/Combobox/Combobox.vue
@@ -110,10 +110,10 @@ const {
 const hasLabeling = computed(() => {
   return Boolean(
     props.label ||
-      props.description ||
-      hasError.value ||
-      slots.label ||
-      slots.description,
+    props.description ||
+    hasError.value ||
+    slots.label ||
+    slots.description,
   )
 })
 
@@ -415,27 +415,27 @@ defineSlots<ComboboxSlots>()
       there's no labeling, so bare usage keeps its flattened layout.
     -->
     <div :class="hasLabeling ? null : 'contents'">
-  <ComboboxRoot
-    ref="rootRef"
-    class="contents"
-    :model-value="internalModelValue"
-    :open="open"
-    :disabled="disabled"
-    :ignore-filter="true"
-    :open-on-focus="openOnFocus"
-    :open-on-click="openOnClick"
-    @update:modelValue="handleRootModelValueChange"
-    @update:open="handleRootOpenChange"
-  >
-    <!--
+      <ComboboxRoot
+        ref="rootRef"
+        class="contents"
+        :model-value="internalModelValue"
+        :open="open"
+        :disabled="disabled"
+        :ignore-filter="true"
+        :open-on-focus="openOnFocus"
+        :open-on-click="openOnClick"
+        @update:modelValue="handleRootModelValueChange"
+        @update:open="handleRootOpenChange"
+      >
+        <!--
       Two trigger modes, picked automatically:
         1. Default (`trigger="input"`): the trigger IS the search input.
         2. Button mode (`trigger="button"` or `#trigger` slot provided):
            caller's button — or the built-in auto-wired Button — opens the
            popover; the search input moves into the popover header.
     -->
-    <template v-if="isButtonMode">
-      <!--
+        <template v-if="isButtonMode">
+          <!--
         reka's `ComboboxTrigger` hardcodes `tabindex="-1"` — it assumes
         the ComboboxInput is the tab-stop and the trigger is just a
         mouse-clickable chevron. That's wrong for button mode where
@@ -447,24 +447,24 @@ defineSlots<ComboboxSlots>()
         to the child via `as-child` — this makes consumer-supplied
         `#trigger` elements "just work" without wiring handlers.
       -->
-      <ComboboxAnchor
-        as-child
-        @click="open = !open"
-        @pointerdown="markPointerDown"
-      >
-        <slot
-          v-if="$slots.trigger"
-          name="trigger"
-          v-bind="{
-            open,
-            disabled: !!disabled,
-            query: typedQuery,
-            selectedOption,
-            displayValue,
-          }"
-        />
+          <ComboboxAnchor
+            as-child
+            @click="open = !open"
+            @pointerdown="markPointerDown"
+          >
+            <slot
+              v-if="$slots.trigger"
+              name="trigger"
+              v-bind="{
+                open,
+                disabled: !!disabled,
+                query: typedQuery,
+                selectedOption,
+                displayValue,
+              }"
+            />
 
-        <!--
+            <!--
           Rendered as a raw `<button>` (not the `<Button>` component) so
           the prefix / label / chevron are direct flex children and
           `justify-between` + label `flex-1` align cleanly. Wrapping in
@@ -472,30 +472,30 @@ defineSlots<ComboboxSlots>()
           `<span>`, which is content-sized and would center the label in
           `w-full` buttons.
         -->
-        <button
-          v-else
-          type="button"
-          :class="[
-            triggerClasses,
-            'justify-between',
-            disabled && 'cursor-not-allowed',
-            hasLabeling ? 'w-full' : null,
-            hasLabeling ? null : (attrs.class as any),
-          ]"
-          :style="hasLabeling ? null : (attrs.style as any)"
-          :disabled="disabled"
-          data-slot="trigger"
-          :data-state="open ? 'open' : 'closed'"
-          :data-variant="variant"
-          :data-size="size"
-          :data-invalid="hasError ? 'true' : undefined"
-          :data-required="required ? 'true' : undefined"
-          :id="inputId"
-          aria-haspopup="listbox"
-          :aria-expanded="open"
-          v-bind="inputAriaAttrs"
-        >
-          <!--
+            <button
+              v-else
+              type="button"
+              :class="[
+                triggerClasses,
+                'justify-between',
+                disabled && 'cursor-not-allowed',
+                hasLabeling ? 'w-full' : null,
+                hasLabeling ? null : (attrs.class as any),
+              ]"
+              :style="hasLabeling ? null : (attrs.style as any)"
+              :disabled="disabled"
+              data-slot="trigger"
+              :data-state="open ? 'open' : 'closed'"
+              :data-variant="variant"
+              :data-size="size"
+              :data-invalid="hasError ? 'true' : undefined"
+              :data-required="required ? 'true' : undefined"
+              :id="inputId"
+              aria-haspopup="listbox"
+              :aria-expanded="open"
+              v-bind="inputAriaAttrs"
+            >
+              <!--
             Prefix precedence on the trigger:
               1. selected + `#item-prefix` slot → reuse the list's per-item
                  prefix renderer so the trigger matches the dropdown row
@@ -504,159 +504,159 @@ defineSlots<ComboboxSlots>()
                  string / emoji / component).
               3. not selected + `#prefix` slot → user's placeholder affordance.
           -->
-          <template v-if="selectedOption && $slots['item-prefix']">
-            <slot
-              name="item-prefix"
-              v-bind="{
-                item: selectedOption,
-                query: '',
-                selected: true,
-              }"
-            />
-          </template>
-          <OptionIcon
-            v-else-if="selectedOption?.icon"
-            :icon="selectedOption.icon"
-          />
-          <slot
-            v-else-if="!selectedOption && $slots.prefix"
-            name="prefix"
-            v-bind="{
-              open,
-              disabled: !!disabled,
-              query: typedQuery,
-              selectedOption,
-              displayValue,
-            }"
-          />
-
-          <span
+              <template v-if="selectedOption && $slots['item-prefix']">
+                <slot
+                  name="item-prefix"
+                  v-bind="{
+                    item: selectedOption,
+                    query: '',
+                    selected: true,
+                  }"
+                />
+              </template>
+              <OptionIcon
+                v-else-if="selectedOption?.icon"
+                :icon="selectedOption.icon"
+              />
+              <slot
+                v-else-if="!selectedOption && $slots.prefix"
+                name="prefix"
+                v-bind="{
+                  open,
+                  disabled: !!disabled,
+                  query: typedQuery,
+                  selectedOption,
+                  displayValue,
+                }"
+              />
+
+              <span
+                :class="[
+                  'min-w-0 flex-1 truncate text-left font-normal',
+                  !selectedOption && 'text-ink-gray-4',
+                ]"
+              >
+                {{ selectedOption?.label ?? placeholder }}
+              </span>
+
+              <slot
+                name="suffix"
+                v-bind="{
+                  open,
+                  disabled: !!disabled,
+                  query: typedQuery,
+                  selectedOption,
+                  displayValue,
+                }"
+              >
+                <span
+                  :class="[
+                    'lucide-chevron-down size-4 shrink-0 text-ink-gray-4 transition-transform duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]',
+                    open && 'rotate-180',
+                  ]"
+                />
+              </slot>
+            </button>
+          </ComboboxAnchor>
+        </template>
+
+        <template v-else>
+          <ComboboxAnchor
+            data-slot="trigger"
+            :data-state="open ? 'open' : 'closed'"
+            :data-disabled="disabled ? '' : undefined"
+            :data-variant="variant"
+            :data-size="size"
+            :data-invalid="hasError ? 'true' : undefined"
+            :data-required="required ? 'true' : undefined"
             :class="[
-              'min-w-0 flex-1 truncate text-left font-normal',
-              !selectedOption && 'text-ink-gray-4',
+              triggerClasses,
+              hasLabeling ? 'w-full' : null,
+              hasLabeling ? null : (attrs.class as any),
             ]"
+            :style="hasLabeling ? null : (attrs.style as any)"
+            @pointerdown="markPointerDown"
           >
-            {{ selectedOption?.label ?? placeholder }}
-          </span>
-
-          <slot
-            name="suffix"
-            v-bind="{
-              open,
-              disabled: !!disabled,
-              query: typedQuery,
-              selectedOption,
-              displayValue,
-            }"
-          >
-            <span
-              :class="[
-                'lucide-chevron-down size-4 shrink-0 text-ink-gray-4 transition-transform duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]',
-                open && 'rotate-180',
-              ]"
-            />
-          </slot>
-        </button>
-      </ComboboxAnchor>
-    </template>
-
-    <template v-else>
-      <ComboboxAnchor
-        data-slot="trigger"
-        :data-state="open ? 'open' : 'closed'"
-        :data-disabled="disabled ? '' : undefined"
-        :data-variant="variant"
-        :data-size="size"
-        :data-invalid="hasError ? 'true' : undefined"
-        :data-required="required ? 'true' : undefined"
-        :class="[
-          triggerClasses,
-          hasLabeling ? 'w-full' : null,
-          hasLabeling ? null : (attrs.class as any),
-        ]"
-        :style="hasLabeling ? null : (attrs.style as any)"
-        @pointerdown="markPointerDown"
-      >
-        <!--
+            <!--
           Prefix precedence matches button mode: selected option's
           `#item-prefix` → selected option's icon auto-render →
           user's `#prefix` slot.
         -->
-        <template v-if="selectedOption && $slots['item-prefix']">
-          <slot
-            name="item-prefix"
-            v-bind="{ item: selectedOption, query: '', selected: true }"
-          />
+            <template v-if="selectedOption && $slots['item-prefix']">
+              <slot
+                name="item-prefix"
+                v-bind="{ item: selectedOption, query: '', selected: true }"
+              />
+            </template>
+            <OptionIcon
+              v-else-if="selectedOption?.icon"
+              :icon="selectedOption.icon"
+            />
+            <slot
+              v-else
+              name="prefix"
+              v-bind="{
+                open,
+                disabled: !!disabled,
+                query: typedQuery,
+                selectedOption,
+                displayValue,
+              }"
+            />
+
+            <ComboboxInput
+              :id="inputId"
+              v-bind="{ ...inputAttrs, ...inputAriaAttrs }"
+              data-slot="input"
+              :data-variant="variant"
+              :data-size="size"
+              :value="query"
+              :disabled="disabled"
+              :placeholder="placeholder"
+              :class="resolvedInputClasses"
+              @input="handleInputChange"
+              @focus="emit('focus', $event)"
+              @blur="emit('blur', $event)"
+              @keydown.enter="handleInputEnter"
+            />
+
+            <slot
+              name="suffix"
+              v-bind="{
+                open,
+                disabled: !!disabled,
+                query: typedQuery,
+                selectedOption,
+                displayValue,
+              }"
+            >
+              <ComboboxTrigger
+                :disabled="disabled"
+                data-slot="chevron"
+                class="inline-flex shrink-0 items-center justify-center text-ink-gray-4 outline-none transition-transform duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] data-[state=open]:rotate-180"
+              >
+                <span class="lucide-chevron-down size-4 text-ink-gray-6" />
+              </ComboboxTrigger>
+            </slot>
+          </ComboboxAnchor>
         </template>
-        <OptionIcon
-          v-else-if="selectedOption?.icon"
-          :icon="selectedOption.icon"
-        />
-        <slot
-          v-else
-          name="prefix"
-          v-bind="{
-            open,
-            disabled: !!disabled,
-            query: typedQuery,
-            selectedOption,
-            displayValue,
-          }"
-        />
-
-        <ComboboxInput
-          :id="inputId"
-          v-bind="{ ...inputAttrs, ...inputAriaAttrs }"
-          data-slot="input"
-          :data-variant="variant"
-          :data-size="size"
-          :value="query"
-          :disabled="disabled"
-          :placeholder="placeholder"
-          :class="resolvedInputClasses"
-          @input="handleInputChange"
-          @focus="emit('focus', $event)"
-          @blur="emit('blur', $event)"
-          @keydown.enter="handleInputEnter"
-        />
-
-        <slot
-          name="suffix"
-          v-bind="{
-            open,
-            disabled: !!disabled,
-            query: typedQuery,
-            selectedOption,
-            displayValue,
-          }"
-        >
-          <ComboboxTrigger
-            :disabled="disabled"
-            data-slot="chevron"
-            class="inline-flex shrink-0 items-center justify-center text-ink-gray-4 outline-none transition-transform duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] data-[state=open]:rotate-180"
+
+        <ComboboxPortal :to="portalTo">
+          <ComboboxContent
+            data-slot="content"
+            data-selection
+            :data-variant="variant"
+            :data-size="size"
+            :class="[
+              'z-[100]',
+              !isButtonMode && 'min-w-[--reka-combobox-trigger-width]',
+            ]"
+            position="popper"
+            :side="side"
+            :align="resolvedAlign"
+            :side-offset="offset"
           >
-            <span class="lucide-chevron-down size-4 text-ink-gray-6" />
-          </ComboboxTrigger>
-        </slot>
-      </ComboboxAnchor>
-    </template>
-
-    <ComboboxPortal :to="portalTo">
-      <ComboboxContent
-        data-slot="content"
-        data-selection
-        :data-variant="variant"
-        :data-size="size"
-        :class="[
-          'z-[100]',
-          !isButtonMode && 'min-w-[--reka-combobox-trigger-width]',
-        ]"
-        position="popper"
-        :side="side"
-        :align="resolvedAlign"
-        :side-offset="offset"
-      >
-        <!--
+            <!--
           Why FocusScope lives here (inside ComboboxContent) and not around it:
 
           ComboboxContent is a <Presence> wrapper — it renders null when the
@@ -677,55 +677,55 @@ defineSlots<ComboboxSlots>()
           once the dialog trap is paused. In input mode we prevent it so the
           trigger input keeps focus while the list opens.
         -->
-        <FocusScope
-          as-child
-          @mount-auto-focus="handleFocusScopeMountAutoFocus"
-          @unmount-auto-focus.prevent
-        >
-          <div
-            data-slot="content-body"
-            :data-motion="contentMotion"
-            class="overflow-hidden rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5"
-          >
-            <div
-              v-if="isButtonMode"
-              data-slot="content-search"
-              class="flex items-center gap-2 border-b border-outline-gray-1 px-3"
+            <FocusScope
+              as-child
+              @mount-auto-focus="handleFocusScopeMountAutoFocus"
+              @unmount-auto-focus.prevent
             >
-              <ComboboxInput
-                :id="`${inputId}-search-input`"
-                v-bind="inputAttrs"
-                data-slot="input"
-                :value="query"
-                :disabled="disabled"
-                :placeholder="placeholder"
-                class="min-w-0 flex-1 px-0 border-0 bg-transparent py-2 text-base text-ink-gray-8 outline-none placeholder:text-ink-gray-4 focus:ring-0"
-                @input="handleInputChange"
-                @focus="emit('focus', $event)"
-                @blur="emit('blur', $event)"
-                @keydown.enter="handleInputEnter"
-              />
-            </div>
-
-            <ComboboxResults
-              :groups="filteredGroups"
-              :size="size"
-              :query="typedQuery"
-              :model="model ?? null"
-              :loading="loading"
-              :empty-text="emptyText"
-              :show-create-option="showCreateOption"
-              :show-empty="showEmpty"
-              :slot-fns="slots"
-              :all-selectable-options="allSelectableOptions"
-              @select-custom="handleCustomItemSelect"
-              @select-create="handleCreateOptionSelect"
-            />
-          </div>
-        </FocusScope>
-      </ComboboxContent>
-    </ComboboxPortal>
-  </ComboboxRoot>
+              <div
+                data-slot="content-body"
+                :data-motion="contentMotion"
+                class="overflow-hidden rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5"
+              >
+                <div
+                  v-if="isButtonMode"
+                  data-slot="content-search"
+                  class="flex items-center gap-2 border-b border-outline-gray-1 px-3"
+                >
+                  <ComboboxInput
+                    :id="`${inputId}-search-input`"
+                    v-bind="inputAttrs"
+                    data-slot="input"
+                    :value="query"
+                    :disabled="disabled"
+                    :placeholder="placeholder"
+                    class="min-w-0 flex-1 px-0 border-0 bg-transparent py-2 text-base text-ink-gray-8 outline-none placeholder:text-ink-gray-4 focus:ring-0"
+                    @input="handleInputChange"
+                    @focus="emit('focus', $event)"
+                    @blur="emit('blur', $event)"
+                    @keydown.enter="handleInputEnter"
+                  />
+                </div>
+
+                <ComboboxResults
+                  :groups="filteredGroups"
+                  :size="size"
+                  :query="typedQuery"
+                  :model="model ?? null"
+                  :loading="loading"
+                  :empty-text="emptyText"
+                  :show-create-option="showCreateOption"
+                  :show-empty="showEmpty"
+                  :slot-fns="slots"
+                  :all-selectable-options="allSelectableOptions"
+                  @select-custom="handleCustomItemSelect"
+                  @select-create="handleCreateOptionSelect"
+                />
+              </div>
+            </FocusScope>
+          </ComboboxContent>
+        </ComboboxPortal>
+      </ComboboxRoot>
     </div>
     <InputDescription
       v-if="showDescription || $slots.description"
diff --git a/src/components/Combobox/ComboboxResults.vue b/src/components/Combobox/ComboboxResults.vue
index 98eb094ba..eebca7515 100644
--- a/src/components/Combobox/ComboboxResults.vue
+++ b/src/components/Combobox/ComboboxResults.vue
@@ -121,7 +121,6 @@ function getItemTextValue(item: NormalizedItem) {
 function handleSelect(item: NormalizedItem, event: Event) {
   if (isCustomOption(item)) emit('selectCustom', item, event)
 }
-
 </script>
 
 <template>
diff --git a/src/components/Combobox/types.ts b/src/components/Combobox/types.ts
index 852e138e1..41b82e3f6 100644
--- a/src/components/Combobox/types.ts
+++ b/src/components/Combobox/types.ts
@@ -209,17 +209,17 @@ export interface ComboboxEmptySlotProps {
 
 export interface ComboboxSlots {
   /** Fully custom trigger renderer. */
-  trigger?: (props: ComboboxTriggerSlotProps) => any
+  'trigger'?: (props: ComboboxTriggerSlotProps) => any
 
   /** Overrides the rendered label content. Receives `{ required }`. */
-  label?: (props: { required: boolean }) => any
+  'label'?: (props: { required: boolean }) => any
 
   /** Overrides the rendered description content. */
-  description?: () => any
+  'description'?: () => any
 
   /** Content rendered before the default input. Receives the same shape
    * as `#trigger` and `#suffix` (`ComboboxSlotProps`). */
-  prefix?: (props: ComboboxPrefixSlotProps) => any
+  'prefix'?: (props: ComboboxPrefixSlotProps) => any
 
   /**
    * Content rendered after the input (input mode) or label (button mode).
@@ -228,7 +228,7 @@ export interface ComboboxSlots {
    * Common use: an inline clear button. Use `@click.stop` and
    * `@pointerdown.stop` so the press doesn't toggle the popover.
    */
-  suffix?: (props: ComboboxSuffixSlotProps) => any
+  'suffix'?: (props: ComboboxSuffixSlotProps) => any
 
   /** Shared content rendered before the standard row label. */
   'item-prefix'?: (props: ComboboxItemSlotProps) => any
@@ -240,16 +240,16 @@ export interface ComboboxSlots {
   'item-suffix'?: (props: ComboboxItemSlotProps) => any
 
   /** Replaces the entire row. */
-  item?: (props: ComboboxItemSlotProps) => any
+  'item'?: (props: ComboboxItemSlotProps) => any
 
   /** Custom renderer for group labels. */
   'group-label'?: (props: ComboboxGroupLabelSlotProps) => any
 
   /** Fallback content rendered when there are no results. */
-  empty?: (props: ComboboxEmptySlotProps) => any
+  'empty'?: (props: ComboboxEmptySlotProps) => any
 
   /** Content rendered after the list. */
-  footer?: () => any
+  'footer'?: () => any
 
   [slotName: string]: ((props: any) => any) | undefined
 }
@@ -267,13 +267,13 @@ export interface ComboboxEmits {
   ]
 
   /** Fired when the input receives focus. */
-  focus: [event: FocusEvent]
+  'focus': [event: FocusEvent]
 
   /** Fired when the input loses focus. */
-  blur: [event: FocusEvent]
+  'blur': [event: FocusEvent]
 
   /** @deprecated compatibility alias for `update:query`. */
-  input: [value: string]
+  'input': [value: string]
 }
 
 export interface ComboboxExposed {
diff --git a/src/components/CommandPalette/CommandPalette.api.md b/src/components/CommandPalette/CommandPalette.api.md
index 4364acf11..5889b4df3 100644
--- a/src/components/CommandPalette/CommandPalette.api.md
+++ b/src/components/CommandPalette/CommandPalette.api.md
@@ -46,9 +46,9 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="CommandPalette" :data="propsData"/> 
+## API Reference
 
-<EmitsTable :data="emitsData"/> 
+<PropsTable name="CommandPalette" :data="propsData"/>
 
+<EmitsTable :data="emitsData"/>
diff --git a/src/components/DatePicker/CalendarPanel.vue b/src/components/DatePicker/CalendarPanel.vue
index 14aa63a14..7a8492638 100644
--- a/src/components/DatePicker/CalendarPanel.vue
+++ b/src/components/DatePicker/CalendarPanel.vue
@@ -112,9 +112,13 @@
                 :tabindex="isFocusedCell(cell) ? 0 : -1"
                 @mouseenter="emit('hoverCell', cell.date)"
                 @click="!cell.isUnavailable && emit('selectDate', cell.date)"
-                @keydown.left.prevent="shiftFocus(cell.date.subtract(1, 'day'), -1)"
+                @keydown.left.prevent="
+                  shiftFocus(cell.date.subtract(1, 'day'), -1)
+                "
                 @keydown.right.prevent="shiftFocus(cell.date.add(1, 'day'), 1)"
-                @keydown.up.prevent="shiftFocus(cell.date.subtract(7, 'day'), -1)"
+                @keydown.up.prevent="
+                  shiftFocus(cell.date.subtract(7, 'day'), -1)
+                "
                 @keydown.down.prevent="shiftFocus(cell.date.add(7, 'day'), 1)"
                 @keydown.home.prevent="
                   shiftFocus(cell.date.subtract(cell.date.day(), 'day'), -1)
@@ -295,9 +299,7 @@ function isFocusedCell(cell: CalendarPanelCell): boolean {
   return !!props.focusedDate && cell.date.isSame(props.focusedDate, 'day')
 }
 
-function pickInitialFocusDate(
-  weeks: CalendarPanelCell[][],
-): Dayjs | null {
+function pickInitialFocusDate(weeks: CalendarPanelCell[][]): Dayjs | null {
   const flat = weeks.flat()
   const selected = flat.find(
     (c) =>
@@ -343,12 +345,7 @@ watch(
 // for an unbounded run of dates would otherwise spin forever.
 const MAX_SKIP_DISABLED_STEPS = 366
 
-function shiftFocus(
-  target: Dayjs,
-  dir: 1 | -1,
-  retried = false,
-  steps = 0,
-) {
+function shiftFocus(target: Dayjs, dir: 1 | -1, retried = false, steps = 0) {
   // Bounds check first — if the target is outside [min, max], the arrow
   // press is a no-op rather than trying to navigate into nothing. Matches
   // Reka's CalendarCellTrigger behavior.
@@ -448,6 +445,10 @@ function cellClass(cell: CalendarPanelCell): Array<string | false> {
     ]
   }
 
-  return [inMonthCls, todayCls, 'rounded hover:bg-surface-gray-2 cursor-pointer']
+  return [
+    inMonthCls,
+    todayCls,
+    'rounded hover:bg-surface-gray-2 cursor-pointer',
+  ]
 }
 </script>
diff --git a/src/components/DatePicker/DatePicker.api.md b/src/components/DatePicker/DatePicker.api.md
index 782efbffc..743e4a69d 100644
--- a/src/components/DatePicker/DatePicker.api.md
+++ b/src/components/DatePicker/DatePicker.api.md
@@ -758,29 +758,29 @@
   }
 ]
 </script>
+
 ## API Reference
 
 ### DatePicker
 
-<PropsTable name="DatePicker" :data="datePickerProps"/> 
+<PropsTable name="DatePicker" :data="datePickerProps"/>
 
-<SlotsTable :data="datePickerSlots"/> 
+<SlotsTable :data="datePickerSlots"/>
 
-<EmitsTable :data="datePickerEmits"/> 
+<EmitsTable :data="datePickerEmits"/>
 
 ### DateRangePicker
 
-<PropsTable folder="DatePicker" name="DateRangePicker" :data="dateRangePickerProps"/> 
+<PropsTable folder="DatePicker" name="DateRangePicker" :data="dateRangePickerProps"/>
 
-<SlotsTable :data="dateRangePickerSlots"/> 
+<SlotsTable :data="dateRangePickerSlots"/>
 
-<EmitsTable :data="dateRangePickerEmits"/> 
+<EmitsTable :data="dateRangePickerEmits"/>
 
 ### DateTimePicker
 
-<PropsTable folder="DatePicker" name="DateTimePicker" :data="dateTimePickerProps"/> 
-
-<SlotsTable :data="dateTimePickerSlots"/> 
+<PropsTable folder="DatePicker" name="DateTimePicker" :data="dateTimePickerProps"/>
 
-<EmitsTable :data="dateTimePickerEmits"/> 
+<SlotsTable :data="dateTimePickerSlots"/>
 
+<EmitsTable :data="dateTimePickerEmits"/>
diff --git a/src/components/DatePicker/DatePicker.cy.ts b/src/components/DatePicker/DatePicker.cy.ts
index e023e69b9..e3b04e992 100644
--- a/src/components/DatePicker/DatePicker.cy.ts
+++ b/src/components/DatePicker/DatePicker.cy.ts
@@ -11,7 +11,7 @@ const clearSlot = {
       'button',
       {
         'aria-label': 'Clear',
-        onClick: () => {
+        'onClick': () => {
           props.clear()
           props.close()
         },
@@ -128,7 +128,7 @@ describe('DatePicker', () => {
   it('v-model', () => {
     cy.mount(DatePicker, {
       props: {
-        onChange: cy.spy().as('onChange'),
+        'onChange': cy.spy().as('onChange'),
         'onUpdate:modelValue': cy.spy().as('onUpdate'),
       },
     })
@@ -165,8 +165,16 @@ describe('DatePicker', () => {
     })
     cy.get('input').dblclick()
     cy.get('[role=dialog]').should('exist')
-    cy.get('[aria-label="2025-06-09"]').should('have.attr', 'aria-disabled', 'true')
-    cy.get('[aria-label="2025-06-21"]').should('have.attr', 'aria-disabled', 'true')
+    cy.get('[aria-label="2025-06-09"]').should(
+      'have.attr',
+      'aria-disabled',
+      'true',
+    )
+    cy.get('[aria-label="2025-06-21"]').should(
+      'have.attr',
+      'aria-disabled',
+      'true',
+    )
     cy.get('[aria-label="2025-06-15"]').should('not.have.attr', 'aria-disabled')
   })
 
@@ -180,8 +188,16 @@ describe('DatePicker', () => {
     })
     cy.get('input').dblclick()
     // 2025-06-14 is a Saturday, 2025-06-15 is a Sunday, 2025-06-16 is a Monday
-    cy.get('[aria-label="2025-06-14"]').should('have.attr', 'aria-disabled', 'true')
-    cy.get('[aria-label="2025-06-15"]').should('have.attr', 'aria-disabled', 'true')
+    cy.get('[aria-label="2025-06-14"]').should(
+      'have.attr',
+      'aria-disabled',
+      'true',
+    )
+    cy.get('[aria-label="2025-06-15"]').should(
+      'have.attr',
+      'aria-disabled',
+      'true',
+    )
     cy.get('[aria-label="2025-06-16"]').should('not.have.attr', 'aria-disabled')
   })
 
@@ -279,7 +295,7 @@ describe('DatePicker', () => {
     it('Enter and Space select the focused cell', () => {
       cy.mount(DatePicker, {
         props: {
-          modelValue: '2025-06-15',
+          'modelValue': '2025-06-15',
           'onUpdate:modelValue': cy.spy().as('onUpdate'),
         },
       })
@@ -294,7 +310,8 @@ describe('DatePicker', () => {
         props: {
           modelValue: '2025-06-15',
           // Disable 2025-06-16 only — pressing → from 15 should skip to 17.
-          isDateUnavailable: (d: any) => d.format('YYYY-MM-DD') === '2025-06-16',
+          isDateUnavailable: (d: any) =>
+            d.format('YYYY-MM-DD') === '2025-06-16',
         },
       })
       cy.get('input').focus().type('{downArrow}')
@@ -308,7 +325,10 @@ describe('DatePicker', () => {
       cy.get('input').focus().type('{downArrow}')
       cy.focused().trigger('keydown', { key: 'ArrowRight' })
       cy.focused().should('have.attr', 'data-value', '2025-07-01')
-      cy.get('[aria-label=cycle-calendar-view]').should('contain.text', 'Jul 2025')
+      cy.get('[aria-label=cycle-calendar-view]').should(
+        'contain.text',
+        'Jul 2025',
+      )
     })
   })
 })
diff --git a/src/components/DatePicker/DatePicker.md b/src/components/DatePicker/DatePicker.md
index 4fa48e8c4..1553f25bd 100644
--- a/src/components/DatePicker/DatePicker.md
+++ b/src/components/DatePicker/DatePicker.md
@@ -3,12 +3,15 @@
 A set of pickers for selecting dates, date ranges, or date and time. Smooth, intuitive interfaces make choosing and adjusting values quick and precise.
 
 ## Date Picker
+
 <ComponentPreview name="DatePicker-Examples" />
 
 ## DateTime Picker
+
 <ComponentPreview name="DatePicker-DateTime" />
 
 ## Date Range Picker
+
 <ComponentPreview name="DatePicker-Range" />
 
 <!-- @include: ./DatePicker.api.md -->
diff --git a/src/components/DatePicker/DatePicker.vue b/src/components/DatePicker/DatePicker.vue
index 811386292..91373233a 100644
--- a/src/components/DatePicker/DatePicker.vue
+++ b/src/components/DatePicker/DatePicker.vue
@@ -28,10 +28,18 @@
     @close="onShellClose"
     @request-focus="onShellRequestFocus"
   >
-    <template v-if="$slots.trigger" #trigger="ts"><slot name="trigger" v-bind="ts" /></template>
-    <template v-if="$slots.target" #target="ts"><slot name="target" v-bind="ts" /></template>
-    <template v-if="$slots.prefix" #prefix="ts"><slot name="prefix" v-bind="ts" /></template>
-    <template v-if="$slots.suffix" #suffix="ts"><slot name="suffix" v-bind="ts" /></template>
+    <template v-if="$slots.trigger" #trigger="ts"
+      ><slot name="trigger" v-bind="ts"
+    /></template>
+    <template v-if="$slots.target" #target="ts"
+      ><slot name="target" v-bind="ts"
+    /></template>
+    <template v-if="$slots.prefix" #prefix="ts"
+      ><slot name="prefix" v-bind="ts"
+    /></template>
+    <template v-if="$slots.suffix" #suffix="ts"
+      ><slot name="suffix" v-bind="ts"
+    /></template>
 
     <template #default="{ close }">
       <div
@@ -97,11 +105,7 @@ import {
   type LegacyDatePickerProps,
 } from './composables'
 import type { Dayjs } from 'dayjs/esm'
-import type {
-  DatePickerProps,
-  DatePickerEmits,
-  DatePickerSlots,
-} from './types'
+import type { DatePickerProps, DatePickerEmits, DatePickerSlots } from './types'
 
 const props = withDefaults(defineProps<DatePickerProps>(), {
   value: '',
diff --git a/src/components/DatePicker/DateRangePicker.cy.ts b/src/components/DatePicker/DateRangePicker.cy.ts
index 4f56441da..3e71fec77 100644
--- a/src/components/DatePicker/DateRangePicker.cy.ts
+++ b/src/components/DatePicker/DateRangePicker.cy.ts
@@ -11,7 +11,7 @@ const sidebarSlot = {
         'button',
         {
           'aria-label': 'Last 7 days',
-          onClick: () => {
+          'onClick': () => {
             const fmt = (d: Date) => {
               const p = (n: number) => String(n).padStart(2, '0')
               return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}`
@@ -32,7 +32,7 @@ const sidebarSlot = {
           'button',
           {
             'aria-label': 'Clear',
-            onClick: () => {
+            'onClick': () => {
               props.clear()
               props.close()
             },
@@ -156,7 +156,7 @@ describe('DateRangePicker', () => {
   it('emits v-model as [from, to] array', () => {
     cy.mount(DateRangePicker, {
       props: {
-        modelValue: ['2025-06-10', '2025-06-10'],
+        'modelValue': ['2025-06-10', '2025-06-10'],
         'onUpdate:modelValue': cy.spy().as('onUpdate'),
       },
     })
@@ -172,7 +172,7 @@ describe('DateRangePicker', () => {
   it('emits [] when range is cleared', () => {
     cy.mount(DateRangePicker, {
       props: {
-        modelValue: ['2025-06-10', '2025-06-15'],
+        'modelValue': ['2025-06-10', '2025-06-15'],
         'onUpdate:modelValue': cy.spy().as('onUpdate'),
       },
       slots: sidebarSlot,
@@ -213,7 +213,7 @@ describe('DateRangePicker', () => {
           'button',
           {
             'aria-label': 'Reversed',
-            onClick: () => {
+            'onClick': () => {
               props.setRange(['2025-06-20', '2025-06-10'])
               props.close()
             },
@@ -242,8 +242,16 @@ describe('DateRangePicker', () => {
       },
     })
     cy.get('input').dblclick()
-    cy.get('[aria-label="2025-06-09"]').should('have.attr', 'aria-disabled', 'true')
-    cy.get('[aria-label="2025-06-21"]').should('have.attr', 'aria-disabled', 'true')
+    cy.get('[aria-label="2025-06-09"]').should(
+      'have.attr',
+      'aria-disabled',
+      'true',
+    )
+    cy.get('[aria-label="2025-06-21"]').should(
+      'have.attr',
+      'aria-disabled',
+      'true',
+    )
     cy.get('[aria-label="2025-06-15"]').should('not.have.attr', 'aria-disabled')
   })
 
@@ -260,7 +268,7 @@ describe('DateRangePicker', () => {
     // then pick the later date first and the earlier one second.
     cy.mount(DateRangePicker, {
       props: {
-        modelValue: ['2025-06-15', '2025-06-15'],
+        'modelValue': ['2025-06-15', '2025-06-15'],
         'onUpdate:modelValue': cy.spy().as('onUpdate'),
       },
     })
@@ -291,7 +299,10 @@ describe('DateRangePicker', () => {
     it('renders two side-by-side calendar grids', () => {
       cy.mount(DateRangePicker, { props: { dualPane: true } })
       cy.get('input').dblclick()
-      cy.get('[role=grid][aria-label="Calendar dates"]').should('have.length', 2)
+      cy.get('[role=grid][aria-label="Calendar dates"]').should(
+        'have.length',
+        2,
+      )
     })
 
     it('shows the centered header (no cycle button) in dual-pane', () => {
@@ -324,7 +335,7 @@ describe('DateRangePicker', () => {
     it('Enter on a focused cell selects the range start, then end', () => {
       cy.mount(DateRangePicker, {
         props: {
-          modelValue: ['2025-06-15', '2025-06-15'],
+          'modelValue': ['2025-06-15', '2025-06-15'],
           'onUpdate:modelValue': cy.spy().as('onUpdate'),
         },
       })
@@ -356,7 +367,10 @@ describe('DateRangePicker', () => {
       cy.focused().trigger('keydown', { key: 'ArrowRight' })
       cy.focused().should('have.attr', 'data-value', '2025-07-01')
       // Both panes still rendered — view didn't advance to hide June.
-      cy.get('[role=grid][aria-label="Calendar dates"]').should('have.length', 2)
+      cy.get('[role=grid][aria-label="Calendar dates"]').should(
+        'have.length',
+        2,
+      )
       cy.get('[aria-label="2025-06-28"]').should('exist')
     })
   })
diff --git a/src/components/DatePicker/DateRangePicker.vue b/src/components/DatePicker/DateRangePicker.vue
index 1a012d14a..14474be78 100644
--- a/src/components/DatePicker/DateRangePicker.vue
+++ b/src/components/DatePicker/DateRangePicker.vue
@@ -28,10 +28,18 @@
     @close="onShellClose"
     @request-focus="onShellRequestFocus"
   >
-    <template v-if="$slots.trigger" #trigger="ts"><slot name="trigger" v-bind="ts" /></template>
-    <template v-if="$slots.target" #target="ts"><slot name="target" v-bind="ts" /></template>
-    <template v-if="$slots.prefix" #prefix="ts"><slot name="prefix" v-bind="ts" /></template>
-    <template v-if="$slots.suffix" #suffix="ts"><slot name="suffix" v-bind="ts" /></template>
+    <template v-if="$slots.trigger" #trigger="ts"
+      ><slot name="trigger" v-bind="ts"
+    /></template>
+    <template v-if="$slots.target" #target="ts"
+      ><slot name="target" v-bind="ts"
+    /></template>
+    <template v-if="$slots.prefix" #prefix="ts"
+      ><slot name="prefix" v-bind="ts"
+    /></template>
+    <template v-if="$slots.suffix" #suffix="ts"
+      ><slot name="suffix" v-bind="ts"
+    /></template>
 
     <template #default="{ close }">
       <div
@@ -255,8 +263,7 @@ function onPanelNavigate(target: Dayjs) {
       target.month() === currentMonth.value &&
       target.year() === currentYear.value
     const inRight =
-      target.month() === rightMonth.value &&
-      target.year() === rightYear.value
+      target.month() === rightMonth.value && target.year() === rightYear.value
     if (inLeft || inRight) {
       focusedDate.value = target
       return
@@ -406,8 +413,7 @@ function buildRangeWeeks(year: number, month: number): CalendarPanelCell[][] {
       if (f && t) {
         inRange = d.date.isAfter(f, 'day') && d.date.isBefore(t, 'day')
       } else if (hoverEnd && f) {
-        inRange =
-          d.date.isAfter(f, 'day') && !d.date.isAfter(hoverEnd, 'day')
+        inRange = d.date.isAfter(f, 'day') && !d.date.isAfter(hoverEnd, 'day')
       } else if (hoverStart && f) {
         inRange =
           !d.date.isBefore(hoverStart, 'day') && d.date.isBefore(f, 'day')
@@ -543,9 +549,7 @@ function handleTodayClick() {
   resetView()
 }
 
-function handleSetRange(
-  range: [string | Date | Dayjs, string | Date | Dayjs],
-) {
+function handleSetRange(range: [string | Date | Dayjs, string | Date | Dayjs]) {
   const a = dayjs(range[0])
   const b = dayjs(range[1])
   if (!a.isValid() || !b.isValid()) return
diff --git a/src/components/DatePicker/DateTimePicker.cy.ts b/src/components/DatePicker/DateTimePicker.cy.ts
index 3b46579a9..523f89731 100644
--- a/src/components/DatePicker/DateTimePicker.cy.ts
+++ b/src/components/DatePicker/DateTimePicker.cy.ts
@@ -8,7 +8,7 @@ const clearSlot = {
       'button',
       {
         'aria-label': 'Clear',
-        onClick: () => {
+        'onClick': () => {
           props.clear()
           props.close()
         },
@@ -63,8 +63,16 @@ describe('DateTimePicker', () => {
       },
     })
     cy.get('input').first().dblclick()
-    cy.get('[aria-label="2025-06-09"]').should('have.attr', 'aria-disabled', 'true')
-    cy.get('[aria-label="2025-06-21"]').should('have.attr', 'aria-disabled', 'true')
+    cy.get('[aria-label="2025-06-09"]').should(
+      'have.attr',
+      'aria-disabled',
+      'true',
+    )
+    cy.get('[aria-label="2025-06-21"]').should(
+      'have.attr',
+      'aria-disabled',
+      'true',
+    )
     cy.get('[aria-label="2025-06-15"]').should('not.have.attr', 'aria-disabled')
   })
 
@@ -116,7 +124,7 @@ describe('DateTimePicker', () => {
     it('selecting a date emits update:modelValue with combined date+time', () => {
       cy.mount(DateTimePicker, {
         props: {
-          modelValue: '2025-06-15 12:00:00',
+          'modelValue': '2025-06-15 12:00:00',
           'onUpdate:modelValue': cy.spy().as('onUpdate'),
         },
       })
@@ -157,8 +165,16 @@ describe('DateTimePicker', () => {
       },
     })
     cy.get('input').first().dblclick()
-    cy.get('[aria-label="2025-06-09"]').should('have.attr', 'aria-disabled', 'true')
-    cy.get('[aria-label="2025-06-21"]').should('have.attr', 'aria-disabled', 'true')
+    cy.get('[aria-label="2025-06-09"]').should(
+      'have.attr',
+      'aria-disabled',
+      'true',
+    )
+    cy.get('[aria-label="2025-06-21"]').should(
+      'have.attr',
+      'aria-disabled',
+      'true',
+    )
   })
 
   describe('keyboard navigation', () => {
@@ -172,7 +188,7 @@ describe('DateTimePicker', () => {
     it('Enter on a focused cell selects it and keeps popover open', () => {
       cy.mount(DateTimePicker, {
         props: {
-          modelValue: '2025-06-15 12:00:00',
+          'modelValue': '2025-06-15 12:00:00',
           'onUpdate:modelValue': cy.spy().as('onUpdate'),
         },
       })
diff --git a/src/components/DatePicker/DateTimePicker.vue b/src/components/DatePicker/DateTimePicker.vue
index c6e99efd9..4e4f1baba 100644
--- a/src/components/DatePicker/DateTimePicker.vue
+++ b/src/components/DatePicker/DateTimePicker.vue
@@ -28,10 +28,18 @@
     @close="onShellClose"
     @request-focus="onShellRequestFocus"
   >
-    <template v-if="$slots.trigger" #trigger="ts"><slot name="trigger" v-bind="ts" /></template>
-    <template v-if="$slots.target" #target="ts"><slot name="target" v-bind="ts" /></template>
-    <template v-if="$slots.prefix" #prefix="ts"><slot name="prefix" v-bind="ts" /></template>
-    <template v-if="$slots.suffix" #suffix="ts"><slot name="suffix" v-bind="ts" /></template>
+    <template v-if="$slots.trigger" #trigger="ts"
+      ><slot name="trigger" v-bind="ts"
+    /></template>
+    <template v-if="$slots.target" #target="ts"
+      ><slot name="target" v-bind="ts"
+    /></template>
+    <template v-if="$slots.prefix" #prefix="ts"
+      ><slot name="prefix" v-bind="ts"
+    /></template>
+    <template v-if="$slots.suffix" #suffix="ts"
+      ><slot name="suffix" v-bind="ts"
+    /></template>
 
     <template #default="{ close }">
       <div
diff --git a/src/components/DatePicker/composables.ts b/src/components/DatePicker/composables.ts
index f6644df79..63bf6b637 100644
--- a/src/components/DatePicker/composables.ts
+++ b/src/components/DatePicker/composables.ts
@@ -101,7 +101,9 @@ export function usePopoverPositioning(
 ) {
   const resolvedSide = computed<PopoverSide>(
     () =>
-      props.side ?? ((legacy.placement?.split('-')[0] as PopoverSide) ?? 'bottom'),
+      props.side ??
+      (legacy.placement?.split('-')[0] as PopoverSide) ??
+      'bottom',
   )
   const resolvedAlign = computed<PopoverAlign>(() => {
     if (props.align !== undefined) return props.align
@@ -142,9 +144,7 @@ export function useKeepOpen(
   props: CommonDatePickerProps,
   legacy: { autoClose?: boolean },
 ) {
-  return computed(
-    () => props.keepOpen === true || legacy.autoClose === false,
-  )
+  return computed(() => props.keepOpen === true || legacy.autoClose === false)
 }
 
 // Coerce arbitrary string input to a Dayjs, respecting an optional explicit format.
diff --git a/src/components/DatePicker/stories/Range.vue b/src/components/DatePicker/stories/Range.vue
index 726776e70..b4a0a9b4c 100644
--- a/src/components/DatePicker/stories/Range.vue
+++ b/src/components/DatePicker/stories/Range.vue
@@ -116,7 +116,10 @@ const ret = computed(() =>
         :max="oneYearOut"
       >
         <template #prefix>
-          <span class="lucide-hotel size-4 text-ink-gray-5" aria-hidden="true" />
+          <span
+            class="lucide-hotel size-4 text-ink-gray-5"
+            aria-hidden="true"
+          />
         </template>
       </DateRangePicker>
 
diff --git a/src/components/DatePicker/types.ts b/src/components/DatePicker/types.ts
index e786ee087..bc7c95417 100644
--- a/src/components/DatePicker/types.ts
+++ b/src/components/DatePicker/types.ts
@@ -229,9 +229,7 @@ export interface DateRangePickerActionsSlotProps {
    * Commits both endpoints atomically. Normalizes order so the earlier
    * date becomes `from`. Use for fixed-window presets ("Last 7 days").
    */
-  setRange: (
-    range: [string | Date | Dayjs, string | Date | Dayjs],
-  ) => void
+  setRange: (range: [string | Date | Dayjs, string | Date | Dayjs]) => void
   clear: () => void
   close: () => void
 }
diff --git a/src/components/DatePicker/utils.ts b/src/components/DatePicker/utils.ts
index 7d1ae5d52..24939a8c0 100644
--- a/src/components/DatePicker/utils.ts
+++ b/src/components/DatePicker/utils.ts
@@ -96,7 +96,7 @@ export function getDatesAfter(date: Date, count: number) {
   }
 
   if (incrementer === -1) {
-    return dates.reverse()
+    return dates.toReversed()
   }
   return dates
 }
diff --git a/src/components/Dialog/Dialog.api.md b/src/components/Dialog/Dialog.api.md
index e5b9e87b3..5d62b0900 100644
--- a/src/components/Dialog/Dialog.api.md
+++ b/src/components/Dialog/Dialog.api.md
@@ -172,11 +172,11 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="Dialog" :data="propsData"/> 
+## API Reference
 
-<SlotsTable :data="slotsData"/> 
+<PropsTable name="Dialog" :data="propsData"/>
 
-<EmitsTable :data="emitsData"/> 
+<SlotsTable :data="slotsData"/>
 
+<EmitsTable :data="emitsData"/>
diff --git a/src/components/Dialog/Dialog.cy.ts b/src/components/Dialog/Dialog.cy.ts
index 6cb495049..99ad9787d 100644
--- a/src/components/Dialog/Dialog.cy.ts
+++ b/src/components/Dialog/Dialog.cy.ts
@@ -22,12 +22,12 @@ describe('Dialog', () => {
             { default: () => 'Show' },
           ),
           h(Dialog, {
-            open: this.open,
+            'open': this.open,
             'onUpdate:open': (v: boolean) => (this.open = v),
             onClose,
-            title: 'Modal Dialog',
-            message: 'A simple modal.',
-            actions: [
+            'title': 'Modal Dialog',
+            'message': 'A simple modal.',
+            'actions': [
               {
                 label: 'Close',
                 variant: 'solid',
@@ -71,9 +71,9 @@ describe('Dialog', () => {
             { default: () => 'Show' },
           ),
           h(Dialog, {
-            modelValue: this.open,
+            'modelValue': this.open,
             'onUpdate:modelValue': (v: boolean) => (this.open = v),
-            title: 'Legacy v-model',
+            'title': 'Legacy v-model',
           }),
         ]
       },
@@ -109,9 +109,9 @@ describe('Dialog', () => {
       },
       render() {
         return h(Dialog, {
-          open: this.open,
+          'open': this.open,
           'onUpdate:open': (v: boolean) => (this.open = v),
-          title: 'With X',
+          'title': 'With X',
         })
       },
     })
@@ -141,7 +141,7 @@ describe('Dialog', () => {
       slots: {
         default: h(
           'div',
-          { 'data-cy': 'bare-content', class: 'p-6' },
+          { 'data-cy': 'bare-content', 'class': 'p-6' },
           'bare content',
         ),
       },
@@ -218,11 +218,7 @@ describe('Dialog', () => {
     cy.mount(Dialog, {
       props: { modelValue: true },
       slots: {
-        'body-header': h(
-          'div',
-          { 'data-cy': 'body-header' },
-          'legacy header',
-        ),
+        'body-header': h('div', { 'data-cy': 'body-header' }, 'legacy header'),
         'body-content': h(
           'div',
           { 'data-cy': 'body-content' },
@@ -261,11 +257,7 @@ describe('Dialog', () => {
     cy.mount(Dialog, {
       props: { modelValue: true },
       slots: {
-        'body-header': h(
-          'div',
-          { 'data-cy': 'body-header' },
-          'legacy header',
-        ),
+        'body-header': h('div', { 'data-cy': 'body-header' }, 'legacy header'),
       },
     })
 
@@ -296,8 +288,8 @@ describe('Dialog', () => {
         default: () =>
           h('input', {
             'data-cy': 'name-input',
-            autofocus: '',
-            value: 'untitled',
+            'autofocus': '',
+            'value': 'untitled',
           }),
       },
     })
@@ -320,12 +312,8 @@ describe('Dialog', () => {
         default: () =>
           h('div', { autofocus: '' }, [
             h('span', 'label'),
-            h(
-              'button',
-              { 'data-cy': 'toggle', type: 'button' },
-              'Toggle',
-            ),
-            h('button', { 'data-cy': 'second', type: 'button' }, 'Other'),
+            h('button', { 'data-cy': 'toggle', 'type': 'button' }, 'Toggle'),
+            h('button', { 'data-cy': 'second', 'type': 'button' }, 'Other'),
           ]),
       },
     })
diff --git a/src/components/Dialog/Dialog.md b/src/components/Dialog/Dialog.md
index 346a23881..eeac722bb 100644
--- a/src/components/Dialog/Dialog.md
+++ b/src/components/Dialog/Dialog.md
@@ -3,12 +3,15 @@
 A flexible overlay for showing messages, forms, or actions. Keeps focus on content while allowing clear, user-friendly interactions.
 
 ## Destructive confirm
+
 <ComponentPreview name="Dialog-Confirm" />
 
 ## Create / edit form
+
 <ComponentPreview name="Dialog-Custom" />
 
 ## State-driven actions
+
 <ComponentPreview name="Dialog-Modal" />
 
 ## Action layout
@@ -20,15 +23,19 @@ Everything else sits side-by-side at natural width, right-aligned. Using the
 <ComponentPreview name="Dialog-ActionsLayout" />
 
 ## Single-CTA form
+
 <ComponentPreview name="Dialog-Interactive" />
 
 ## Auto-focus a field
+
 <ComponentPreview name="Dialog-Autofocus" />
 
 ## Full-canvas (`bare`)
+
 <ComponentPreview name="Dialog-Bare" />
 
 ## Master / detail browser
+
 <ComponentPreview name="Dialog-Browse" />
 
 ## Imperative API
@@ -68,5 +75,4 @@ its loading state while async validators settle.
 
 <ComponentPreview name="Dialog-Prompt" />
 
-
 <!-- @include: ./Dialog.api.md -->
diff --git a/src/components/Dialog/Dialog.vue b/src/components/Dialog/Dialog.vue
index f0ea8a958..0c8ffdff5 100644
--- a/src/components/Dialog/Dialog.vue
+++ b/src/components/Dialog/Dialog.vue
@@ -112,7 +112,11 @@
                   name="actions"
                   v-bind="{ close, actions: reactiveActions }"
                 >
-                  <div :class="isSingleActionFullWidth ? '' : 'flex justify-end gap-2'">
+                  <div
+                    :class="
+                      isSingleActionFullWidth ? '' : 'flex justify-end gap-2'
+                    "
+                  >
                     <Button
                       v-for="action in reactiveActions"
                       :key="action.label"
@@ -269,11 +273,11 @@ const isDismissible = computed(() => {
 const sizeClass = computed(() => {
   const size = resolved.value.size
   const map: Record<string, string> = {
-    xs: 'max-w-xs',
-    sm: 'max-w-sm',
-    md: 'max-w-md',
-    lg: 'max-w-lg',
-    xl: 'max-w-xl',
+    'xs': 'max-w-xs',
+    'sm': 'max-w-sm',
+    'md': 'max-w-md',
+    'lg': 'max-w-lg',
+    'xl': 'max-w-xl',
     '2xl': 'max-w-2xl',
     '3xl': 'max-w-3xl',
     '4xl': 'max-w-4xl',
diff --git a/src/components/Dialog/stories/Autofocus.vue b/src/components/Dialog/stories/Autofocus.vue
index a4a5138f8..ff9c231f4 100644
--- a/src/components/Dialog/stories/Autofocus.vue
+++ b/src/components/Dialog/stories/Autofocus.vue
@@ -54,10 +54,7 @@ const prefs = ref({ notify: false, digest: true })
   <Dialog v-model:open="prefsOpen" title="Notification preferences">
     <div class="space-y-4">
       <div autofocus>
-        <Switch
-          label="Email me on every reply"
-          v-model="prefs.notify"
-        />
+        <Switch label="Email me on every reply" v-model="prefs.notify" />
       </div>
       <Switch label="Weekly digest" v-model="prefs.digest" />
     </div>
diff --git a/src/components/Dialog/stories/Custom.vue b/src/components/Dialog/stories/Custom.vue
index 16884cc48..338eccb79 100644
--- a/src/components/Dialog/stories/Custom.vue
+++ b/src/components/Dialog/stories/Custom.vue
@@ -21,17 +21,17 @@ const title = computed(() => (editMode.value ? 'Edit task' : 'Create task'))
 
 <template>
   <div class="w-full flex gap-2">
-    <Button @click="(editMode = false), (open = true)">New task</Button>
+    <Button @click="((editMode = false), (open = true))">New task</Button>
     <Button
       variant="outline"
       @click="
-        (editMode = true),
-          (task = {
-            title: 'Wire up release notes',
-            status: 'In Progress',
-            description: 'Pull v1.x highlights into the public changelog.',
-          }),
-          (open = true)
+        ((editMode = true),
+        (task = {
+          title: 'Wire up release notes',
+          status: 'In Progress',
+          description: 'Pull v1.x highlights into the public changelog.',
+        }),
+        (open = true))
       "
     >
       Edit task
diff --git a/src/components/Dialog/stories/Imperative.vue b/src/components/Dialog/stories/Imperative.vue
index 821447498..3e73c0725 100644
--- a/src/components/Dialog/stories/Imperative.vue
+++ b/src/components/Dialog/stories/Imperative.vue
@@ -127,7 +127,7 @@ function dangerCustomLabel() {
   // delete in the literal sense.
   dialog.danger({
     title: 'Revoke invitation',
-    message: 'This will revoke jane@example.com\'s pending invitation.',
+    message: "This will revoke jane@example.com's pending invitation.",
     confirmLabel: 'Revoke',
     onConfirm: async () => {
       await new Promise((r) => setTimeout(r, 500))
@@ -176,7 +176,8 @@ function optimisticClose() {
   // useful when the user has already committed and the UI shouldn't block.
   dialog.confirm({
     title: 'Send report',
-    message: 'Send the weekly report to your team? The dialog will close immediately.',
+    message:
+      'Send the weekly report to your team? The dialog will close immediately.',
     confirmLabel: 'Send',
     onConfirm: async ({ close }) => {
       close()
@@ -194,7 +195,8 @@ function optimisticClose() {
 function keepOpenAfterAsync() {
   dialog.confirm({
     title: 'Claim username',
-    message: 'Claim the username "frappe-fan"? This pretends to call the server.',
+    message:
+      'Claim the username "frappe-fan"? This pretends to call the server.',
     confirmLabel: 'Claim',
     onConfirm: async () => {
       await new Promise((r) => setTimeout(r, 700))
diff --git a/src/components/Dialog/stories/Interactive.vue b/src/components/Dialog/stories/Interactive.vue
index 010eca241..635443aa8 100644
--- a/src/components/Dialog/stories/Interactive.vue
+++ b/src/components/Dialog/stories/Interactive.vue
@@ -23,11 +23,7 @@ async function createTask(close: () => void) {
 <template>
   <Button @click="open = true">New task</Button>
 
-  <Dialog
-    v-model:open="open"
-    title="New task"
-    :dismissible="!isDirty"
-  >
+  <Dialog v-model:open="open" title="New task" :dismissible="!isDirty">
     <div class="space-y-4">
       <FormControl
         label="Title"
diff --git a/src/components/Dialog/stories/Modal.vue b/src/components/Dialog/stories/Modal.vue
index 78a8d8928..5f85333d6 100644
--- a/src/components/Dialog/stories/Modal.vue
+++ b/src/components/Dialog/stories/Modal.vue
@@ -21,9 +21,17 @@ async function testConnection({ close }: { close: () => void }) {
 const testButton = computed(() => {
   if (state.value === 'testing') return { label: 'Testing…', loading: true }
   if (state.value === 'connected')
-    return { label: 'Connected', theme: 'green' as const, variant: 'outline' as const }
+    return {
+      label: 'Connected',
+      theme: 'green' as const,
+      variant: 'outline' as const,
+    }
   if (state.value === 'failed')
-    return { label: 'Failed, retry?', theme: 'red' as const, variant: 'outline' as const }
+    return {
+      label: 'Failed, retry?',
+      theme: 'red' as const,
+      variant: 'outline' as const,
+    }
   return { label: 'Test connection', variant: 'outline' as const }
 })
 </script>
diff --git a/src/components/Dialog/stories/Prompt.vue b/src/components/Dialog/stories/Prompt.vue
index 0f09b1572..9f47f233e 100644
--- a/src/components/Dialog/stories/Prompt.vue
+++ b/src/components/Dialog/stories/Prompt.vue
@@ -148,7 +148,7 @@ function createAccount() {
         placeholder: 'jane@example.com',
         // Sync validator — runs in the same parallel pass as `username`.
         validate: (value: string) => {
-          if (!value.includes('@')) return 'That doesn\'t look like an email.'
+          if (!value.includes('@')) return "That doesn't look like an email."
           return null
         },
       },
@@ -160,7 +160,10 @@ function createAccount() {
         // Cross-field validation via the second argument.
         validate: (value: string, all) => {
           if (value.length < 8) return 'Use at least 8 characters.'
-          if (typeof all.username === 'string' && value.includes(all.username)) {
+          if (
+            typeof all.username === 'string' &&
+            value.includes(all.username)
+          ) {
             return 'Password must not contain your username.'
           }
           return null
diff --git a/src/components/Dialog/types.ts b/src/components/Dialog/types.ts
index 4dc37e11b..18c31cc96 100644
--- a/src/components/Dialog/types.ts
+++ b/src/components/Dialog/types.ts
@@ -108,7 +108,7 @@ export interface DialogEmits {
   'update:modelValue': [value: boolean]
 
   /** Fired when the dialog transitions to closed. */
-  close: []
+  'close': []
 
   /** Fired after the close animation finishes. */
   'after-leave': []
@@ -133,16 +133,16 @@ export interface DialogExposed {
 
 export interface DialogSlots {
   /** Main content rendered inside the padded card. Exposes `{ close }`. */
-  default?: (props: DialogSlotProps) => any
+  'default'?: (props: DialogSlotProps) => any
 
   /** Title area; accepts arbitrary content (extra buttons next to title, etc.). Exposes `{ close }`. */
-  title?: (props: DialogSlotProps) => any
+  'title'?: (props: DialogSlotProps) => any
 
   /** Footer override; exposes `{ close, actions }`. */
-  actions?: (props: DialogActionsSlotProps) => any
+  'actions'?: (props: DialogActionsSlotProps) => any
 
   /** @deprecated Use `#default` + `bare` prop. */
-  body?: () => any
+  'body'?: () => any
 
   /** @deprecated Use `#default`. */
   'body-main'?: () => any
diff --git a/src/components/Dialogs.vue b/src/components/Dialogs.vue
index afe82c962..d1c66e74d 100644
--- a/src/components/Dialogs.vue
+++ b/src/components/Dialogs.vue
@@ -7,11 +7,7 @@
       :key="legacy.id ?? legacy"
     />
     <!-- v1 imperative `dialog.*` stack. -->
-    <component
-      v-for="d in imperativeDialogs"
-      :is="d.component"
-      :key="d.id"
-    />
+    <component v-for="d in imperativeDialogs" :is="d.component" :key="d.id" />
   </div>
 </template>
 
diff --git a/src/components/Divider/Divider.api.md b/src/components/Divider/Divider.api.md
index b908b0ce6..fff6167f2 100644
--- a/src/components/Divider/Divider.api.md
+++ b/src/components/Divider/Divider.api.md
@@ -33,7 +33,7 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="Divider" :data="propsData"/> 
+## API Reference
 
+<PropsTable name="Divider" :data="propsData"/>
diff --git a/src/components/Divider/index.ts b/src/components/Divider/index.ts
index eafa2264b..487643683 100644
--- a/src/components/Divider/index.ts
+++ b/src/components/Divider/index.ts
@@ -1,2 +1,2 @@
 export { default as Divider } from './Divider.vue'
-export type { DividerProps } from './types'
\ No newline at end of file
+export type { DividerProps } from './types'
diff --git a/src/components/Dropdown/Dropdown.api.md b/src/components/Dropdown/Dropdown.api.md
index b6ff69bf3..b2767bab7 100644
--- a/src/components/Dropdown/Dropdown.api.md
+++ b/src/components/Dropdown/Dropdown.api.md
@@ -112,11 +112,11 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="Dropdown" :data="propsData"/> 
+## API Reference
 
-<SlotsTable :data="slotsData"/> 
+<PropsTable name="Dropdown" :data="propsData"/>
 
-<EmitsTable :data="emitsData"/> 
+<SlotsTable :data="slotsData"/>
 
+<EmitsTable :data="emitsData"/>
diff --git a/src/components/Dropdown/Dropdown.md b/src/components/Dropdown/Dropdown.md
index c986f8811..918a977d0 100644
--- a/src/components/Dropdown/Dropdown.md
+++ b/src/components/Dropdown/Dropdown.md
@@ -4,31 +4,37 @@ A flexible menu component for actions. Handles groups, nested submenus,
 toggle rows, disabled items, custom triggers, and a built-in kebab pattern.
 
 ## Simple
+
 A plain actions menu with icons. The default trigger is an auto-generated `<Button>` — pass `button: { label }` to override its text.
 
 <ComponentPreview name="Dropdown-01_Simple" layout="stacked" />
 
 ## With Shortcuts
+
 Keyboard shortcuts rendered in the row suffix. Use the `#item-suffix` slot and a custom `shortcut` field on each item to keep the label clean and the hint secondary.
 
 <ComponentPreview name="Dropdown-02_Shortcuts" layout="stacked" />
 
 ## Submenus
+
 Grouped actions with nested submenus — the "Share" path recurses into "Invite people" which recurses into channel targets. Groups are just `{ group, options }` entries in the options array.
 
 <ComponentPreview name="Dropdown-03_Submenus" />
 
 ## Switches
+
 Toggle items live inside the menu using `switch: true` + `switchValue`. Clicking a switch row fires `onClick(boolean)` with the new value and keeps the menu open, so consumers can flip multiple settings in one sitting.
 
 <ComponentPreview name="Dropdown-04_Switches" />
 
 ## Kebab Menu
+
 The classic row-actions pattern — a ghost icon button that opens a grouped menu. `#trigger` swaps in the `LucideMoreHorizontal` button, and the `open` slot prop keeps the button in its `active` state while the menu is open.
 
 <ComponentPreview name="Dropdown-05_KebabMenu" />
 
 ## User Menu
+
 A real workspace + profile menu — nested Apps / Theme submenus, account-group footer, and a completely custom trigger showing the workspace icon, product name, and current user.
 
 <ComponentPreview name="Dropdown-06_UserMenu" />
diff --git a/src/components/Dropdown/DropdownMenuItemContent.vue b/src/components/Dropdown/DropdownMenuItemContent.vue
index 1c5e3b9c3..ecdf91bd1 100644
--- a/src/components/Dropdown/DropdownMenuItemContent.vue
+++ b/src/components/Dropdown/DropdownMenuItemContent.vue
@@ -126,7 +126,6 @@ const hasItemSlotsSuffix = computed(() => {
 function handleSwitchChange(value: boolean) {
   ;(props.item.onClick as ((value: boolean) => void) | undefined)?.(value)
 }
-
 </script>
 
 <template>
@@ -142,7 +141,11 @@ function handleSwitchChange(value: boolean) {
       />
       <span
         v-else-if="isLucideIconString(item.icon)"
-        :class="[item.icon, dropdownClasses.itemIcon, getDropdownIconColor(item)]"
+        :class="[
+          item.icon,
+          dropdownClasses.itemIcon,
+          getDropdownIconColor(item),
+        ]"
         aria-hidden="true"
       />
       <span
@@ -213,7 +216,11 @@ function handleSwitchChange(value: boolean) {
       />
       <span
         v-else-if="trailing === 'submenu'"
-        :class="['lucide-chevron-right', dropdownClasses.chevronIcon, getDropdownIconColor(item)]"
+        :class="[
+          'lucide-chevron-right',
+          dropdownClasses.chevronIcon,
+          getDropdownIconColor(item),
+        ]"
         aria-hidden="true"
       />
     </template>
diff --git a/src/components/Dropdown/stories/05_KebabMenu.vue b/src/components/Dropdown/stories/05_KebabMenu.vue
index 098ed8918..d6d7fc9c9 100644
--- a/src/components/Dropdown/stories/05_KebabMenu.vue
+++ b/src/components/Dropdown/stories/05_KebabMenu.vue
@@ -52,7 +52,9 @@ function rowActions(task: Task): DropdownOptions {
 </script>
 
 <template>
-  <div class="w-full w-80 divide-y divide-outline-gray-1 rounded-lg border border-outline-gray-1 bg-surface-white">
+  <div
+    class="w-full w-80 divide-y divide-outline-gray-1 rounded-lg border border-outline-gray-1 bg-surface-white"
+  >
     <div
       v-for="task in tasks"
       :key="task.title"
diff --git a/src/components/Dropdown/types.ts b/src/components/Dropdown/types.ts
index 1ae300eec..d3e761f76 100644
--- a/src/components/Dropdown/types.ts
+++ b/src/components/Dropdown/types.ts
@@ -210,13 +210,13 @@ export interface DropdownGroupSlotProps {
 
 export interface DropdownSlots {
   /** Alternate trigger renderer. */
-  default?: (props: DropdownTriggerSlotProps) => any
+  'default'?: (props: DropdownTriggerSlotProps) => any
 
   /** Explicit trigger slot renderer. */
-  trigger?: (props: DropdownTriggerSlotProps) => any
+  'trigger'?: (props: DropdownTriggerSlotProps) => any
 
   /** Replaces the entire item row. */
-  item?: (props: DropdownItemSlotProps) => any
+  'item'?: (props: DropdownItemSlotProps) => any
 
   /** Content rendered before the standard item label. */
   'item-prefix'?: (props: DropdownItemSlotProps) => any
@@ -231,7 +231,7 @@ export interface DropdownSlots {
   'group-label'?: (props: DropdownGroupSlotProps) => any
 
   /** Fallback content rendered when no items are available. */
-  empty?: () => any
+  'empty'?: () => any
 
   [slotName: string]: ((props: any) => any) | undefined
 }
diff --git a/src/components/ErrorMessage/ErrorMessage.api.md b/src/components/ErrorMessage/ErrorMessage.api.md
index c4937ce29..ee72ce3a6 100644
--- a/src/components/ErrorMessage/ErrorMessage.api.md
+++ b/src/components/ErrorMessage/ErrorMessage.api.md
@@ -13,7 +13,7 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="ErrorMessage" :data="propsData"/> 
+## API Reference
 
+<PropsTable name="ErrorMessage" :data="propsData"/>
diff --git a/src/components/ErrorMessage/ErrorMessage.md b/src/components/ErrorMessage/ErrorMessage.md
index a3483e07c..2e46d178e 100644
--- a/src/components/ErrorMessage/ErrorMessage.md
+++ b/src/components/ErrorMessage/ErrorMessage.md
@@ -3,10 +3,11 @@
 Displays a clear message to indicate errors or issues. Helps users understand problems and take corrective action quickly.
 
 ## String Message
+
 <ComponentPreview name="ErrorMessage-Examples" />
 
 ## Error Object
-<ComponentPreview name="ErrorMessage-ErrorObject" />
 
+<ComponentPreview name="ErrorMessage-ErrorObject" />
 
 <!-- @include: ./ErrorMessage.api.md -->
diff --git a/src/components/ErrorMessage/index.ts b/src/components/ErrorMessage/index.ts
index ac91bd6d9..199af50fb 100644
--- a/src/components/ErrorMessage/index.ts
+++ b/src/components/ErrorMessage/index.ts
@@ -1,2 +1,2 @@
 export { default as ErrorMessage } from './ErrorMessage.vue'
-export type { ErrorMessageProps } from './types'
\ No newline at end of file
+export type { ErrorMessageProps } from './types'
diff --git a/src/components/ErrorMessage/stories/ErrorObject.vue b/src/components/ErrorMessage/stories/ErrorObject.vue
index 9d5faf3de..c0ab8cfac 100644
--- a/src/components/ErrorMessage/stories/ErrorObject.vue
+++ b/src/components/ErrorMessage/stories/ErrorObject.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ErrorMessage } from "frappe-ui";
+import { ErrorMessage } from 'frappe-ui'
 
-const error = new Error("There was an error");
+const error = new Error('There was an error')
 </script>
 
 <template>
diff --git a/src/components/FeatherIcon.vue b/src/components/FeatherIcon.vue
index 09900f4a7..bc791f388 100644
--- a/src/components/FeatherIcon.vue
+++ b/src/components/FeatherIcon.vue
@@ -40,16 +40,16 @@ export default {
       mergeProps(
         icon.attrs,
         {
-          fill: 'none',
-          stroke: 'currentColor',
-          color: this.color,
+          'fill': 'none',
+          'stroke': 'currentColor',
+          'color': this.color,
           'stroke-linecap': 'round',
           'stroke-linejoin': 'round',
           'stroke-width': this.strokeWidth,
-          width: null,
-          height: null,
-          class: [icon.attrs.class, 'shrink-0'],
-          innerHTML: icon.contents,
+          'width': null,
+          'height': null,
+          'class': [icon.attrs.class, 'shrink-0'],
+          'innerHTML': icon.contents,
         },
         this.$attrs,
       ),
diff --git a/src/components/FileUploader/FileUploader.api.md b/src/components/FileUploader/FileUploader.api.md
index 34a311e09..ded45a35e 100644
--- a/src/components/FileUploader/FileUploader.api.md
+++ b/src/components/FileUploader/FileUploader.api.md
@@ -26,7 +26,7 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="FileUploader" :data="propsData"/> 
+## API Reference
 
+<PropsTable name="FileUploader" :data="propsData"/>
diff --git a/src/components/FormControl/FormControl.api.md b/src/components/FormControl/FormControl.api.md
index d74261c5d..fb538452d 100644
--- a/src/components/FormControl/FormControl.api.md
+++ b/src/components/FormControl/FormControl.api.md
@@ -85,9 +85,9 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="FormControl" :data="propsData"/> 
+## API Reference
 
-<SlotsTable :data="slotsData"/> 
+<PropsTable name="FormControl" :data="propsData"/>
 
+<SlotsTable :data="slotsData"/>
diff --git a/src/components/FormControl/FormControl.cy.ts b/src/components/FormControl/FormControl.cy.ts
index 688f531d3..8fc6967cd 100644
--- a/src/components/FormControl/FormControl.cy.ts
+++ b/src/components/FormControl/FormControl.cy.ts
@@ -93,7 +93,10 @@ describe('FormControl', () => {
       cy.spy(win.console, 'warn').as('consoleWarn')
     })
     cy.mount(FormControl, { props: { label: 'Title' } })
-    cy.get('@consoleWarn').should('not.have.been.calledWithMatch', /FormControl/)
+    cy.get('@consoleWarn').should(
+      'not.have.been.calledWithMatch',
+      /FormControl/,
+    )
   })
 
   describe('dispatcher delegation', () => {
@@ -187,7 +190,7 @@ describe('FormControl', () => {
       cy.mount({
         render: () =>
           h('div', { style: 'width: 240px; padding: 16px;' }, [
-            h('div', { 'data-cy': 'col', style: 'min-width: 140px;' }, [
+            h('div', { 'data-cy': 'col', 'style': 'min-width: 140px;' }, [
               h(FormControl, { type: 'select', options }),
             ]),
           ]),
@@ -205,7 +208,7 @@ describe('FormControl', () => {
       cy.mount({
         render: () =>
           h('div', { style: 'width: 240px; padding: 16px;' }, [
-            h('div', { 'data-cy': 'col', style: 'min-width: 140px;' }, [
+            h('div', { 'data-cy': 'col', 'style': 'min-width: 140px;' }, [
               h(FormControl, { type: 'combobox', options }),
             ]),
           ]),
diff --git a/src/components/FormControl/FormControl.md b/src/components/FormControl/FormControl.md
index 73e93fbe6..f2651e79f 100644
--- a/src/components/FormControl/FormControl.md
+++ b/src/components/FormControl/FormControl.md
@@ -10,18 +10,18 @@ A create-account form using every control type.
 
 ## Supported types
 
-| `type`            | Renders                                                       |
-| ----------------- | ------------------------------------------------------------- |
-| `text` _(default)_, `email`, `password`, `number`, `search`, `tel`, `url`, `file`, `range`, `month`, `week`, `datetime-local` | [`TextInput`](./textinput) with the matching HTML `type`      |
-| `textarea`        | [`Textarea`](./textarea)                                      |
-| `select`          | [`Select`](./select)                                          |
-| `combobox`        | [`Combobox`](./combobox)                                      |
-| `multiselect`     | [`MultiSelect`](./multiselect)                                |
-| `checkbox`        | [`Checkbox`](./checkbox)                                      |
-| `date`            | [`DatePicker`](./datepicker#date-picker)                      |
-| `daterange`       | [`DateRangePicker`](./datepicker#date-range-picker)           |
-| `datetime`        | [`DateTimePicker`](./datepicker#datetime-picker)              |
-| `time`            | [`TimePicker`](./timepicker)                                  |
+| `type`                                                                                                                        | Renders                                                  |
+| ----------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
+| `text` _(default)_, `email`, `password`, `number`, `search`, `tel`, `url`, `file`, `range`, `month`, `week`, `datetime-local` | [`TextInput`](./textinput) with the matching HTML `type` |
+| `textarea`                                                                                                                    | [`Textarea`](./textarea)                                 |
+| `select`                                                                                                                      | [`Select`](./select)                                     |
+| `combobox`                                                                                                                    | [`Combobox`](./combobox)                                 |
+| `multiselect`                                                                                                                 | [`MultiSelect`](./multiselect)                           |
+| `checkbox`                                                                                                                    | [`Checkbox`](./checkbox)                                 |
+| `date`                                                                                                                        | [`DatePicker`](./datepicker#date-picker)                 |
+| `daterange`                                                                                                                   | [`DateRangePicker`](./datepicker#date-range-picker)      |
+| `datetime`                                                                                                                    | [`DateTimePicker`](./datepicker#datetime-picker)         |
+| `time`                                                                                                                        | [`TimePicker`](./timepicker)                             |
 
 > **Breaking change in v1:** `type="date"` and `type="time"` used to render native HTML inputs through `TextInput`. They now resolve to `DatePicker` and `TimePicker`. Use `TextInput` directly (or `type="datetime-local"`) if you need the native input.
 
diff --git a/src/components/FormControl/FormControl.story.vue b/src/components/FormControl/FormControl.story.vue
index 0720520bd..d5302a33b 100644
--- a/src/components/FormControl/FormControl.story.vue
+++ b/src/components/FormControl/FormControl.story.vue
@@ -1,33 +1,26 @@
 <script setup lang="ts">
-import Story from "@/components/Story.vue";
-import { reactive, ref } from "vue";
-import { Avatar, FormControl } from "frappe-ui";
+import Story from '@/components/Story.vue'
+import { reactive, ref } from 'vue'
+import { Avatar, FormControl } from 'frappe-ui'
 
 const state = reactive({
-  size: "sm",
-  variant: "subtle",
-  placeholder: "Placeholder",
+  size: 'sm',
+  variant: 'subtle',
+  placeholder: 'Placeholder',
   disabled: false,
-  label: "Label",
-});
+  label: 'Label',
+})
 
-const inputValue = ref("");
-const selectValue = ref(null);
-const autocompleteValue = ref(null);
-const checkboxValue = ref(false);
-const dateValue = ref("");
-const dateRangeValue = ref("");
-const dateTimeValue = ref("");
-const timeValue = ref("");
+const inputValue = ref('')
+const selectValue = ref(null)
+const autocompleteValue = ref(null)
+const checkboxValue = ref(false)
+const dateValue = ref('')
+const dateRangeValue = ref('')
+const dateTimeValue = ref('')
+const timeValue = ref('')
 
-const inputTypes = [
-  "text",
-  "number",
-  "email",
-  "password",
-  "search",
-  "textarea",
-];
+const inputTypes = ['text', 'number', 'email', 'password', 'search', 'textarea']
 </script>
 
 <template>
@@ -39,13 +32,11 @@ const inputTypes = [
     <Story title="Select Input" :layout="{ width: 250 }">
       <FormControl
         type="select"
-        :options='
-          [
-            { label: "One", value: "1" },
-            { label: "Two", value: "2" },
-            { label: "Three", value: "3" },
-          ]
-        '
+        :options="[
+          { label: 'One', value: '1' },
+          { label: 'Two', value: '2' },
+          { label: 'Three', value: '3' },
+        ]"
         v-bind="state"
         v-model="selectValue"
       />
@@ -54,13 +45,11 @@ const inputTypes = [
     <Story title="Combobox Input" :layout="{ width: 250 }">
       <FormControl
         type="combobox"
-        :options='
-          [
-            { label: "One", value: "1" },
-            { label: "Two", value: "2" },
-            { label: "Three", value: "3" },
-          ]
-        '
+        :options="[
+          { label: 'One', value: '1' },
+          { label: 'Two', value: '2' },
+          { label: 'Three', value: '3' },
+        ]"
         v-bind="state"
         v-model="autocompleteValue"
       />
diff --git a/src/components/FormControl/FormControl.vue b/src/components/FormControl/FormControl.vue
index 7f7d37078..0fa34d7a6 100644
--- a/src/components/FormControl/FormControl.vue
+++ b/src/components/FormControl/FormControl.vue
@@ -6,7 +6,11 @@
     :class="[fillWidth ? 'w-full' : null, attrs.class]"
     :style="attrs.style"
   >
-    <template v-for="name in Object.keys($slots)" :key="name" #[name]="slotProps">
+    <template
+      v-for="name in Object.keys($slots)"
+      :key="name"
+      #[name]="slotProps"
+    >
       <!-- @vue-ignore -->
       <slot :name="name" v-bind="slotProps" />
     </template>
@@ -133,16 +137,16 @@ const forwardedAttrs = computed(() => {
 
 defineSlots<{
   /** Custom content rendered before the input (prefix icon/content) */
-  prefix?: () => any
+  'prefix'?: () => any
   /** Custom content rendered after the input (suffix icon/content) */
-  suffix?: () => any
+  'suffix'?: () => any
   /** Custom description slot (replaces description prop) */
-  description?: () => any
+  'description'?: () => any
   /** Custom label slot (replaces label prop). Receives `{ required }`. */
-  label?: (props: { required: boolean }) => any
+  'label'?: (props: { required: boolean }) => any
   /** Custom slot for autocomplete items prefix (if using Autocomplete type) */
   'item-prefix'?: (props: { item: any }) => any
   /** Default slot override for full input rendering */
-  default?: () => any
+  'default'?: () => any
 }>()
 </script>
diff --git a/src/components/FormControl/stories/RealForm.vue b/src/components/FormControl/stories/RealForm.vue
index 1973a560f..8d3224ca0 100644
--- a/src/components/FormControl/stories/RealForm.vue
+++ b/src/components/FormControl/stories/RealForm.vue
@@ -25,8 +25,7 @@ const errors = computed(() => {
   else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email))
     e.email = 'Enter a valid email.'
   if (!form.password) e.password = 'Pick a password.'
-  else if (form.password.length < 8)
-    e.password = 'Use at least 8 characters.'
+  else if (form.password.length < 8) e.password = 'Use at least 8 characters.'
   if (!form.role) e.role = 'Pick a role.'
   if (!form.team) e.team = 'Pick a team.'
   if (form.skills.length === 0) e.skills = 'Pick at least one skill.'
@@ -83,10 +82,7 @@ function reset() {
 </script>
 
 <template>
-  <form
-    class="w-full max-w-lg space-y-4 py-4"
-    @submit.prevent="submit"
-  >
+  <form class="w-full max-w-lg space-y-4 py-4" @submit.prevent="submit">
     <div class="space-y-1">
       <h2 class="text-lg font-semibold text-ink-gray-9">Create account</h2>
       <p class="text-p-sm text-ink-gray-6">
diff --git a/src/components/Input.vue b/src/components/Input.vue
index f2f1677e7..cf4a85915 100644
--- a/src/components/Input.vue
+++ b/src/components/Input.vue
@@ -1,5 +1,8 @@
 <template>
-  <label :class="[type == 'checkbox' ? 'flex' : 'block', $attrs.class]" :style="$attrs.style">
+  <label
+    :class="[type == 'checkbox' ? 'flex' : 'block', $attrs.class]"
+    :style="$attrs.style"
+  >
     <span
       v-if="label && type != 'checkbox'"
       class="mb-2 block text-sm leading-4 text-gray-700"
diff --git a/src/components/InputLabeling/InputError.vue b/src/components/InputLabeling/InputError.vue
index df62a6b5a..0951943dc 100644
--- a/src/components/InputLabeling/InputError.vue
+++ b/src/components/InputLabeling/InputError.vue
@@ -5,7 +5,9 @@
     data-slot="error"
     role="alert"
     class="text-p-sm whitespace-pre-line text-ink-red-3"
-  >{{ lines.join('\n') }}</div>
+  >
+    {{ lines.join('\n') }}
+  </div>
 </template>
 <script setup lang="ts">
 defineProps<{
diff --git a/src/components/ItemListRow/ItemListRow.api.md b/src/components/ItemListRow/ItemListRow.api.md
index d1b1b405d..a5aeb45a8 100644
--- a/src/components/ItemListRow/ItemListRow.api.md
+++ b/src/components/ItemListRow/ItemListRow.api.md
@@ -65,9 +65,9 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="ItemListRow" :data="propsData"/> 
+## API Reference
 
-<SlotsTable :data="slotsData"/> 
+<PropsTable name="ItemListRow" :data="propsData"/>
 
+<SlotsTable :data="slotsData"/>
diff --git a/src/components/ItemListRow/stories/RowStates.vue b/src/components/ItemListRow/stories/RowStates.vue
index 486f8e522..2dc1c3dc2 100644
--- a/src/components/ItemListRow/stories/RowStates.vue
+++ b/src/components/ItemListRow/stories/RowStates.vue
@@ -4,10 +4,10 @@ import { ItemListRow } from 'frappe-ui'
 
 <template>
   <div class="w-full gap-3 items-center justify-center !py-20 grid">
-    <div class="flex w-[320px] flex-col gap-2 rounded-lg border border-outline-gray-2 bg-surface-modal p-2">
-      <ItemListRow>
-        Simple row with no prefix or suffix
-      </ItemListRow>
+    <div
+      class="flex w-[320px] flex-col gap-2 rounded-lg border border-outline-gray-2 bg-surface-modal p-2"
+    >
+      <ItemListRow> Simple row with no prefix or suffix </ItemListRow>
 
       <ItemListRow active>
         <template #prefix>
diff --git a/src/components/KeyboardShortcut.vue b/src/components/KeyboardShortcut.vue
index 53b74a3cb..c457dc0c0 100644
--- a/src/components/KeyboardShortcut.vue
+++ b/src/components/KeyboardShortcut.vue
@@ -14,7 +14,11 @@
           <span class="lucide-command size-3" role="img" aria-label="Command" />
         </span>
         <span v-else-if="part.type === 'shift'">
-          <span class="lucide-arrow-big-up size-3" role="img" aria-label="Shift" />
+          <span
+            class="lucide-arrow-big-up size-3"
+            role="img"
+            aria-label="Shift"
+          />
         </span>
         <span v-else-if="part.type === 'alt'">
           <span class="lucide-option size-3" role="img" aria-label="Option" />
@@ -55,7 +59,11 @@
         <span v-else class="font-mono text-[10px] leading-none">Ctrl</span>
       </span>
       <span v-if="shift">
-        <span class="lucide-arrow-big-up size-3" role="img" aria-label="Shift" />
+        <span
+          class="lucide-arrow-big-up size-3"
+          role="img"
+          aria-label="Shift"
+        />
       </span>
       <span v-if="alt">
         <span class="lucide-option size-3" role="img" aria-label="Option" />
@@ -132,45 +140,45 @@ function parseCombo(raw?: string): Part[] {
   if (!raw) return []
   // Maps input token (lowercased) to a canonical type (modifier) or leaves as key.
   const aliasMap: Record<string, string> = {
-    mod: isMac.value ? 'cmd' : 'ctrl',
-    command: 'cmd',
-    cmd: 'cmd',
+    'mod': isMac.value ? 'cmd' : 'ctrl',
+    'command': 'cmd',
+    'cmd': 'cmd',
     '⌘': 'cmd',
-    control: 'ctrl',
-    ctrl: 'ctrl',
-    option: 'alt',
-    opt: 'alt',
-    alt: 'alt',
+    'control': 'ctrl',
+    'ctrl': 'ctrl',
+    'option': 'alt',
+    'opt': 'alt',
+    'alt': 'alt',
     '⌥': 'alt',
-    shift: 'shift',
+    'shift': 'shift',
     '⇧': 'shift',
-    meta: isMac.value ? 'cmd' : 'win',
-    win: 'win',
-    windows: 'win',
+    'meta': isMac.value ? 'cmd' : 'win',
+    'win': 'win',
+    'windows': 'win',
   }
   const keyMap: Record<string, string> = {
-    esc: 'Esc',
-    escape: 'Esc',
-    enter: '↵',
-    return: '↵',
-    space: 'Space',
+    'esc': 'Esc',
+    'escape': 'Esc',
+    'enter': '↵',
+    'return': '↵',
+    'space': 'Space',
     ' ': 'Space',
-    tab: 'Tab',
-    backspace: '⌫',
-    delete: '⌦',
-    del: '⌦',
-    up: '↑',
-    arrowup: '↑',
-    down: '↓',
-    arrowdown: '↓',
-    left: '←',
-    arrowleft: '←',
-    right: '→',
-    arrowright: '→',
-    pageup: 'PgUp',
-    pagedown: 'PgDn',
-    home: 'Home',
-    end: 'End',
+    'tab': 'Tab',
+    'backspace': '⌫',
+    'delete': '⌦',
+    'del': '⌦',
+    'up': '↑',
+    'arrowup': '↑',
+    'down': '↓',
+    'arrowdown': '↓',
+    'left': '←',
+    'arrowleft': '←',
+    'right': '→',
+    'arrowright': '→',
+    'pageup': 'PgUp',
+    'pagedown': 'PgDn',
+    'home': 'Home',
+    'end': 'End',
   }
 
   const result: Part[] = raw
@@ -221,8 +229,8 @@ const ariaLabel = computed(() => {
     '⌘': 'Command',
     '⇧': 'Shift',
     '⌥': 'Option',
-    Ctrl: 'Control',
-    Win: 'Windows',
+    'Ctrl': 'Control',
+    'Win': 'Windows',
     '↵': 'Enter',
     '⌫': 'Backspace',
     '⌦': 'Delete',
diff --git a/src/components/ListFilter/ListFilter.api.md b/src/components/ListFilter/ListFilter.api.md
index 5e771c49d..d5e35dc9f 100644
--- a/src/components/ListFilter/ListFilter.api.md
+++ b/src/components/ListFilter/ListFilter.api.md
@@ -29,9 +29,9 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="ListFilter" :data="propsData"/> 
+## API Reference
 
-<EmitsTable :data="emitsData"/> 
+<PropsTable name="ListFilter" :data="propsData"/>
 
+<EmitsTable :data="emitsData"/>
diff --git a/src/components/ListFilter/ListFilter.vue b/src/components/ListFilter/ListFilter.vue
index 7f7e66664..da6c26f42 100644
--- a/src/components/ListFilter/ListFilter.vue
+++ b/src/components/ListFilter/ListFilter.vue
@@ -72,7 +72,11 @@
               </div>
             </div>
             <div class="flex-shrink-0">
-              <Button variant="ghost" icon="lucide-x" @click="removeFilter(i)" />
+              <Button
+                variant="ghost"
+                icon="lucide-x"
+                @click="removeFilter(i)"
+              />
             </div>
           </div>
           <div
@@ -122,7 +126,7 @@ import FilterIcon from './FilterIcon.vue'
 import NestedPopover from './NestedPopover.vue'
 import SearchComplete from './SearchComplete.vue'
 
-const typeCheck = ['Check']
+const typeCheck = new Set(['Check'])
 const typeLink = ['Link']
 const typeNumber = ['Float', 'Int']
 const typeSelect = ['Select']
@@ -153,7 +157,7 @@ const fields = computed(() => {
     .filter((field) => {
       return (
         !field.is_virtual &&
-        (typeCheck.includes(field.fieldtype) ||
+        (typeCheck.has(field.fieldtype) ||
           typeLink.includes(field.fieldtype) ||
           typeNumber.includes(field.fieldtype) ||
           typeSelect.includes(field.fieldtype) ||
@@ -232,7 +236,7 @@ function getOperators(fieldtype) {
       ],
     )
   }
-  if (typeCheck.includes(fieldtype)) {
+  if (typeCheck.has(fieldtype)) {
     options.push(...[{ label: 'Equals', value: '=' }])
   }
   return options
@@ -242,7 +246,7 @@ function getDefaultOperator(fieldtype) {
   if (
     typeSelect.includes(fieldtype) ||
     typeLink.includes(fieldtype) ||
-    typeCheck.includes(fieldtype) ||
+    typeCheck.has(fieldtype) ||
     typeNumber.includes(fieldtype)
   ) {
     return '='
@@ -251,7 +255,7 @@ function getDefaultOperator(fieldtype) {
 }
 
 function getValueSelector(fieldtype, options) {
-  if (typeSelect.includes(fieldtype) || typeCheck.includes(fieldtype)) {
+  if (typeSelect.includes(fieldtype) || typeCheck.has(fieldtype)) {
     const _options =
       fieldtype == 'Check' ? ['Yes', 'No'] : getSelectOptions(options)
     return h(FormControl, {
@@ -267,7 +271,7 @@ function getDefaultValue(field) {
   if (typeSelect.includes(field.fieldtype)) {
     return getSelectOptions(field.options)[0]
   }
-  if (typeCheck.includes(field.fieldtype)) {
+  if (typeCheck.has(field.fieldtype)) {
     return 'Yes'
   }
   return ''
diff --git a/src/components/ListView/ListEmptyState.vue b/src/components/ListView/ListEmptyState.vue
index 093f3c3ea..2394a2c45 100644
--- a/src/components/ListView/ListEmptyState.vue
+++ b/src/components/ListView/ListEmptyState.vue
@@ -3,7 +3,9 @@
     class="flex h-full w-full flex-col items-center justify-center text-base"
   >
     <slot>
-      <div class="text-xl font-medium text-ink-gray-8 mt-6">{{ list.options.emptyState.title }}</div>
+      <div class="text-xl font-medium text-ink-gray-8 mt-6">
+        {{ list.options.emptyState.title }}
+      </div>
       <div class="mt-1 text-base text-ink-gray-5">
         {{ list.options.emptyState.description }}
       </div>
diff --git a/src/components/ListView/ListRow.vue b/src/components/ListView/ListRow.vue
index 0890e9738..8061a139b 100644
--- a/src/components/ListView/ListRow.vue
+++ b/src/components/ListView/ListRow.vue
@@ -16,9 +16,7 @@
     v-bind="{
       ...getLinkBindings(),
       onClick: onRowClick,
-      ...(row.disabled
-        ? { 'aria-disabled': 'true', tabindex: -1 }
-        : {}),
+      ...(row.disabled ? { 'aria-disabled': 'true', 'tabindex': -1 } : {}),
     }"
   >
     <component
@@ -35,7 +33,7 @@
           height: rowHeight,
           gridTemplateColumns: getGridTemplateColumns(
             list.columns,
-            list.options.selectable
+            list.options.selectable,
           ),
         }"
       >
@@ -114,7 +112,7 @@ const list = inject('list')
 
 const rowRoute = computed(
   () =>
-    list.value.options.getRowRoute && list.value.options.getRowRoute(props.row)
+    list.value.options.getRowRoute && list.value.options.getRowRoute(props.row),
 )
 
 const isExternalRoute = computed(() => {
@@ -151,7 +149,7 @@ const isSelected = computed(() => {
 const isActive = computed(
   () =>
     list.value.options.enableActive &&
-    list.value.activeRow.value === props.row.name
+    list.value.activeRow.value === props.row.name,
 )
 
 const isHoverable = computed(() => {
@@ -168,7 +166,7 @@ const rowHeight = computed(() => {
 const roundedClass = computed(() => {
   if (!isSelected.value) return 'rounded'
 
-  const selections = [...list.value.selections]
+  const selections = new Set([...list.value.selections])
   let groups = list.value.rows[0]?.group
     ? list.value.rows.map((k) => k.rows)
     : [list.value.rows]
@@ -177,8 +175,8 @@ const roundedClass = computed(() => {
     let currentIndex = rows.findIndex((k) => k == props.row)
     if (currentIndex === -1) continue
 
-    let atBottom = !selections.includes(rows[currentIndex + 1]?.name)
-    let atTop = !selections.includes(rows[currentIndex - 1]?.name)
+    let atBottom = !selections.has(rows[currentIndex + 1]?.name)
+    let atTop = !selections.has(rows[currentIndex - 1]?.name)
 
     return (atBottom ? 'rounded-b ' : '') + (atTop ? 'rounded-t' : '')
   }
@@ -210,7 +208,7 @@ const handleCheckboxClick = (event) => {
       : list.value.rows
 
     const lastIndex = rows.findIndex(
-      (k) => lastSelected === k[list.value.rowKey]
+      (k) => lastSelected === k[list.value.rowKey],
     )
     const curIndex = rows.findIndex((k) => value === k[list.value.rowKey])
 
diff --git a/src/components/ListView/ListView.api.md b/src/components/ListView/ListView.api.md
index 284b91c5d..93ffdc66c 100644
--- a/src/components/ListView/ListView.api.md
+++ b/src/components/ListView/ListView.api.md
@@ -55,11 +55,11 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="ListView" :data="propsData"/> 
+## API Reference
 
-<SlotsTable :data="slotsData"/> 
+<PropsTable name="ListView" :data="propsData"/>
 
-<EmitsTable :data="emitsData"/> 
+<SlotsTable :data="slotsData"/>
 
+<EmitsTable :data="emitsData"/>
diff --git a/src/components/ListView/ListView.md b/src/components/ListView/ListView.md
index d9aa23611..258d1f4cd 100644
--- a/src/components/ListView/ListView.md
+++ b/src/components/ListView/ListView.md
@@ -7,16 +7,21 @@ Displays data in a structured, scrollable list with support for columns, groups,
 <ComponentPreview name="ListView-Examples" />
 
 ## Custom List
+
 <ComponentPreview name="ListView-CustomList" />
 
-## Grouped Rows 
+## Grouped Rows
+
 <ComponentPreview name="ListView-GroupedRows" />
 
 ## Cell Slot
+
 <ComponentPreview name="ListView-CellSlot" />
 
 ## Empty List
+
 <ComponentPreview name="ListView-Empty" />
 
 ## Disabled Rows
+
 <ComponentPreview name="ListView-Disabled" />
diff --git a/src/components/MonthPicker/MonthPicker.api.md b/src/components/MonthPicker/MonthPicker.api.md
index 5258d28f0..9917a17d7 100644
--- a/src/components/MonthPicker/MonthPicker.api.md
+++ b/src/components/MonthPicker/MonthPicker.api.md
@@ -35,9 +35,9 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="MonthPicker" :data="propsData"/> 
+## API Reference
 
-<EmitsTable :data="emitsData"/> 
+<PropsTable name="MonthPicker" :data="propsData"/>
 
+<EmitsTable :data="emitsData"/>
diff --git a/src/components/MonthPicker/MonthPicker.vue b/src/components/MonthPicker/MonthPicker.vue
index 97789ad1c..4ccbf604f 100644
--- a/src/components/MonthPicker/MonthPicker.vue
+++ b/src/components/MonthPicker/MonthPicker.vue
@@ -10,7 +10,7 @@ const props = withDefaults(defineProps<MonthPickerProps>(), {
 })
 
 const viewMode = ref('month')
-const model = defineModel<String>({ default: '' })
+const model = defineModel<string>({ default: '' })
 
 const months = [
   'January',
@@ -60,10 +60,10 @@ const nextClick = () => {
 }
 
 const formatBtn = (v: string | number) =>
-  viewMode.value == 'month' ? (v as String).slice(0, 3) : v
+  viewMode.value == 'month' ? (v as string).slice(0, 3) : v
 
 const txtClass = computed(() => {
-  return model.value || props.disabled ? '': '!text-ink-gray-5' 
+  return model.value || props.disabled ? '' : '!text-ink-gray-5'
 })
 </script>
 
@@ -72,21 +72,29 @@ const txtClass = computed(() => {
     popover-class="mt-2 shadow-xl rounded-lg border bg-surface-modal p-2"
   >
     <template #target="{ togglePopover, isOpen }">
-      <Button @click="togglePopover" class="w-full justify-between border" :class="txtClass"
-				:disabled="disabled" aria-haspopup="dialog" :aria-expanded="isOpen">
+      <Button
+        @click="togglePopover"
+        class="w-full justify-between border"
+        :class="txtClass"
+        :disabled="disabled"
+        aria-haspopup="dialog"
+        :aria-expanded="isOpen"
+      >
         {{ model || props.placeholder }}
-        <template #suffix> <span class="lucide-calendar size-4 text-ink-gray-6" /> </template>
+        <template #suffix>
+          <span class="lucide-calendar size-4 text-ink-gray-6" />
+        </template>
       </Button>
     </template>
 
     <template #body>
       <div class="flex gap-2 justify-between">
-        <Button variant="ghost" @click="prevClick" label='previous'>
+        <Button variant="ghost" @click="prevClick" label="previous">
           <span class="lucide-chevron-left size-4 text-ink-gray-5" />
         </Button>
 
         <!-- view toggler -->
-         <Button @click="toggleViewMode" label="Toggle view mode">
+        <Button @click="toggleViewMode" label="Toggle view mode">
           <template v-if="viewMode == 'month'">
             {{ model.split(' ')[1] ?? currentYear }}
           </template>
@@ -95,7 +103,7 @@ const txtClass = computed(() => {
           </template>
         </Button>
 
-        <Button variant="ghost" @click="nextClick" label='next'>
+        <Button variant="ghost" @click="nextClick" label="next">
           <span class="lucide-chevron-right size-4 text-ink-gray-5" />
         </Button>
       </div>
diff --git a/src/components/MonthPicker/index.ts b/src/components/MonthPicker/index.ts
index 995f7e7b8..3a082a008 100644
--- a/src/components/MonthPicker/index.ts
+++ b/src/components/MonthPicker/index.ts
@@ -1 +1 @@
-export { default as MonthPicker } from "./MonthPicker.vue";
+export { default as MonthPicker } from './MonthPicker.vue'
diff --git a/src/components/MonthPicker/stories/Example.vue b/src/components/MonthPicker/stories/Example.vue
index 3fcc5dd85..bf130e66f 100644
--- a/src/components/MonthPicker/stories/Example.vue
+++ b/src/components/MonthPicker/stories/Example.vue
@@ -12,21 +12,17 @@ const reportPeriod = ref('')
     <div class="grid w-full max-w-xl grid-cols-1 gap-6 sm:grid-cols-2">
       <div class="flex flex-col gap-1.5">
         <span class="text-sm text-ink-gray-7">Billing statement</span>
-        <MonthPicker
-          v-model="statementMonth"
-          placeholder="Pick a month"
-        />
+        <MonthPicker v-model="statementMonth" placeholder="Pick a month" />
         <span class="text-xs text-ink-gray-5">
-          {{ statementMonth ? `Showing ${statementMonth}` : 'No month selected' }}
+          {{
+            statementMonth ? `Showing ${statementMonth}` : 'No month selected'
+          }}
         </span>
       </div>
 
       <div class="flex flex-col gap-1.5">
         <span class="text-sm text-ink-gray-7">Reporting period</span>
-        <MonthPicker
-          v-model="reportPeriod"
-          placeholder="Fiscal month"
-        />
+        <MonthPicker v-model="reportPeriod" placeholder="Fiscal month" />
       </div>
     </div>
   </div>
diff --git a/src/components/MonthPicker/types.ts b/src/components/MonthPicker/types.ts
index e436e9fa1..8f9e1eff3 100644
--- a/src/components/MonthPicker/types.ts
+++ b/src/components/MonthPicker/types.ts
@@ -1,7 +1,7 @@
 export interface MonthPickerProps {
-	/** Placeholder text shown when no value is selected */
-  placeholder?: string;
+  /** Placeholder text shown when no value is selected */
+  placeholder?: string
 
-	/** Disables the month picker */
-	disabled?: boolean;
+  /** Disables the month picker */
+  disabled?: boolean
 }
diff --git a/src/components/MultiSelect/MultiSelect.api.md b/src/components/MultiSelect/MultiSelect.api.md
index 05c5cc94a..f25ffdff4 100644
--- a/src/components/MultiSelect/MultiSelect.api.md
+++ b/src/components/MultiSelect/MultiSelect.api.md
@@ -233,11 +233,11 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="MultiSelect" :data="propsData"/> 
+## API Reference
 
-<SlotsTable :data="slotsData"/> 
+<PropsTable name="MultiSelect" :data="propsData"/>
 
-<EmitsTable :data="emitsData"/> 
+<SlotsTable :data="slotsData"/>
 
+<EmitsTable :data="emitsData"/>
diff --git a/src/components/MultiSelect/MultiSelect.cy.ts b/src/components/MultiSelect/MultiSelect.cy.ts
index b046e8026..a8cfa4f7c 100644
--- a/src/components/MultiSelect/MultiSelect.cy.ts
+++ b/src/components/MultiSelect/MultiSelect.cy.ts
@@ -56,7 +56,7 @@ describe('MultiSelect', () => {
     cy.mount(MultiSelect, {
       props: { options },
       slots: {
-        footer: () => h('div', { 'data-cy': 'footer' }, ['footer']),
+        'footer': () => h('div', { 'data-cy': 'footer' }, ['footer']),
         'item-label': () => h('div', { 'data-cy': 'item-label' }, ['label']),
       },
     })
@@ -94,7 +94,7 @@ describe('MultiSelect', () => {
     cy.mount(MultiSelect, {
       props: {
         options,
-        modelValue: ['apple'],
+        'modelValue': ['apple'],
         'onUpdate:modelValue': cy.spy().as('onUpdate'),
       },
     })
@@ -138,7 +138,7 @@ describe('MultiSelect', () => {
   it('disabled option cannot be selected', () => {
     cy.mount(MultiSelect, {
       props: {
-        options: [
+        'options': [
           { label: 'Apple', value: 'apple', disabled: true },
           { label: 'Banana', value: 'banana' },
         ],
diff --git a/src/components/MultiSelect/MultiSelect.md b/src/components/MultiSelect/MultiSelect.md
index c46d58a20..e2e1acabb 100644
--- a/src/components/MultiSelect/MultiSelect.md
+++ b/src/components/MultiSelect/MultiSelect.md
@@ -3,46 +3,55 @@
 Searchable multi-choice picker. Matches the `Combobox` / `Select` item-slot model and provides built-in Clear All / Select All footer controls.
 
 ## Default
+
 A plain picker — button trigger opens a popover with a search input, option list, and default footer.
 
 <ComponentPreview name="MultiSelect-Example" />
 
 ## Item Prefix
+
 Use `#item-prefix` to render avatars, icons, or indicators next to each option label.
 
 <ComponentPreview name="MultiSelect-Options" />
 
 ## Members
+
 Use `#prefix` to render an aggregate visual across the current selection — here, a stack of avatars capped at three with a "+N" overflow badge. When `#prefix` is provided it owns the entire prefix area regardless of selection count, so the same template handles 0 / 1 / many.
 
 <ComponentPreview name="MultiSelect-Members" />
 
 ## Grouped Options
+
 Options can be split into named groups. Group labels render above each group's items.
 
 <ComponentPreview name="MultiSelect-Grouped" />
 
 ## Async Options
+
 Fetch options from a server as the user types. Listen to `@update:query`, debounce the request, and feed the results back into `:options`. The `:loading` prop swaps the result body for a loading state. Two things to watch for: drop stale responses with a request id so a slower earlier query can't overwrite the latest results, and merge currently-selected items into the options array so chips stay resolvable after the query narrows the list.
 
 <ComponentPreview name="MultiSelect-AsyncOptions" />
 
 ## Custom Footer
+
 Replace the default Clear All / Select All footer with a custom one. The slot receives `clearAll`, `selectAll`, `selectedOptions`, and `query`.
 
 <ComponentPreview name="MultiSelect-Footer" />
 
 ## Custom Trigger
+
 Use `#trigger` to fully replace the default button trigger. The slot receives `open`, `disabled`, `selectedOptions`, `displayValue`, `clearAll`, and `toggleOpen`.
 
 <ComponentPreview name="MultiSelect-TriggerSlot" />
 
 ## Tags Trigger
+
 A chips-style trigger: each selected option renders as a removable `Badge`, with inline remove buttons. Authored through `#trigger` using `selectedOptions` and the parent's `v-model`.
 
 <ComponentPreview name="MultiSelect-TagsTrigger" />
 
 ## Label, Description, Error
+
 `MultiSelect` supports `label`, `description`, `error`, and `required` directly — no `FormControl` wrapper needed. The error suppresses the description and wires `aria-invalid` + `aria-errormessage` onto the trigger.
 
 <ComponentPreview name="MultiSelect-Labeling" />
diff --git a/src/components/MultiSelect/MultiSelect.vue b/src/components/MultiSelect/MultiSelect.vue
index 3fed1330f..22766a04e 100644
--- a/src/components/MultiSelect/MultiSelect.vue
+++ b/src/components/MultiSelect/MultiSelect.vue
@@ -86,10 +86,10 @@ const {
 const hasLabeling = computed(() => {
   return Boolean(
     props.label ||
-      props.description ||
-      hasError.value ||
-      slots.label ||
-      slots.description,
+    props.description ||
+    hasError.value ||
+    slots.label ||
+    slots.description,
   )
 })
 
@@ -255,69 +255,69 @@ defineSlots<MultiSelectSlots>()
         <slot name="label" v-bind="slotProps" />
       </template>
     </InputLabel>
-  <ComboboxRoot
-    multiple
-    :model-value="internalModel"
-    :open="open"
-    :disabled="disabled"
-    :ignore-filter="true"
-    @update:modelValue="handleRootModelValueChange"
-    @update:open="handleRootOpenChange"
-  >
-    <ComboboxAnchor
-      as-child
-      @click="toggleOpen"
-      @pointerdown="markPointerDown"
+    <ComboboxRoot
+      multiple
+      :model-value="internalModel"
+      :open="open"
+      :disabled="disabled"
+      :ignore-filter="true"
+      @update:modelValue="handleRootModelValueChange"
+      @update:open="handleRootOpenChange"
     >
-      <slot
-        v-if="$slots.trigger"
-        name="trigger"
-        v-bind="{
-          open,
-          disabled: !!disabled,
-          query: typedQuery,
-          selectedOptions,
-          displayValue,
-          clearAll,
-          toggleOpen,
-        }"
-      />
-
-      <!--
+      <ComboboxAnchor
+        as-child
+        @click="toggleOpen"
+        @pointerdown="markPointerDown"
+      >
+        <slot
+          v-if="$slots.trigger"
+          name="trigger"
+          v-bind="{
+            open,
+            disabled: !!disabled,
+            query: typedQuery,
+            selectedOptions,
+            displayValue,
+            clearAll,
+            toggleOpen,
+          }"
+        />
+
+        <!--
         Rendered as a raw `<button>` so prefix / label / chevron are
         direct flex children and `justify-between` + label `flex-1` align
         cleanly. Wrapping in `<Button>` would nest the label inside
         Button's own default-slot `<span>`, which is content-sized and
         would center the label when a width class is applied.
       -->
-      <button
-        v-else
-        type="button"
-        :class="[
-          triggerClasses,
-          'justify-between',
-          disabled && 'cursor-not-allowed',
-          hasLabeling ? 'w-full' : null,
-          hasLabeling ? null : (attrs.class as any),
-        ]"
-        :style="hasLabeling ? null : (attrs.style as any)"
-        :disabled="disabled"
-        data-slot="trigger"
-        :data-state="open ? 'open' : 'closed'"
-        :data-variant="variant"
-        :data-size="size"
-        :data-disabled="disabled ? '' : undefined"
-        :data-invalid="hasError ? 'true' : undefined"
-        :data-required="required ? 'true' : undefined"
-        :id="inputId"
-        aria-haspopup="listbox"
-        :aria-expanded="open"
-        :aria-invalid="hasError || undefined"
-        :aria-errormessage="hasError ? errorMessageId : undefined"
-        :aria-describedby="describedBy"
-        :aria-required="required || undefined"
-      >
-        <!--
+        <button
+          v-else
+          type="button"
+          :class="[
+            triggerClasses,
+            'justify-between',
+            disabled && 'cursor-not-allowed',
+            hasLabeling ? 'w-full' : null,
+            hasLabeling ? null : (attrs.class as any),
+          ]"
+          :style="hasLabeling ? null : (attrs.style as any)"
+          :disabled="disabled"
+          data-slot="trigger"
+          :data-state="open ? 'open' : 'closed'"
+          :data-variant="variant"
+          :data-size="size"
+          :data-disabled="disabled ? '' : undefined"
+          :data-invalid="hasError ? 'true' : undefined"
+          :data-required="required ? 'true' : undefined"
+          :id="inputId"
+          aria-haspopup="listbox"
+          :aria-expanded="open"
+          :aria-invalid="hasError || undefined"
+          :aria-errormessage="hasError ? errorMessageId : undefined"
+          :aria-describedby="describedBy"
+          :aria-required="required || undefined"
+        >
+          <!--
           Prefix precedence on the trigger:
             1. `#prefix` slot, when provided, owns the entire prefix area
                regardless of selection count. Use it for aggregate
@@ -329,101 +329,100 @@ defineSlots<MultiSelectSlots>()
                the icon.
             4. otherwise: nothing.
         -->
-        <slot
-          v-if="$slots.prefix"
-          name="prefix"
-          v-bind="{
-            open,
-            disabled: !!disabled,
-            query: typedQuery,
-            selectedOptions,
-            displayValue,
-            clearAll,
-            toggleOpen,
-          }"
-        />
-        <template
-          v-else-if="singleSelectedOption && $slots['item-prefix']"
-        >
           <slot
-            name="item-prefix"
+            v-if="$slots.prefix"
+            name="prefix"
             v-bind="{
-              item: singleSelectedOption,
-              query: '',
-              selected: true,
+              open,
+              disabled: !!disabled,
+              query: typedQuery,
+              selectedOptions,
+              displayValue,
+              clearAll,
+              toggleOpen,
             }"
           />
-        </template>
-        <OptionIcon
-          v-else-if="singleSelectedOption?.icon"
-          :icon="singleSelectedOption.icon"
-        />
-
-        <span class="grid min-w-0 flex-1 text-left font-normal">
-          <span
-            :class="[
-              'col-start-1 row-start-1 max-w-full truncate',
-              !selectedOptions.length && 'text-ink-gray-4',
-            ]"
-          >
+          <template v-else-if="singleSelectedOption && $slots['item-prefix']">
             <slot
-              name="summary"
+              name="item-prefix"
               v-bind="{
-                open,
-                disabled: !!disabled,
-                query: typedQuery,
-                selectedOptions,
-                displayValue,
-                clearAll,
-                toggleOpen,
-                summary: triggerSummary,
+                item: singleSelectedOption,
+                query: '',
+                selected: true,
               }"
-            >{{ triggerSummary }}</slot>
-          </span>
-          <span
-            v-if="!$slots.summary"
-            aria-hidden="true"
-            class="multi-select-trigger-sizer col-start-1 row-start-1"
-            :data-width-text="triggerSizingText"
+            />
+          </template>
+          <OptionIcon
+            v-else-if="singleSelectedOption?.icon"
+            :icon="singleSelectedOption.icon"
           />
-        </span>
 
-        <slot
-          name="suffix"
-          v-bind="{
-            open,
-            disabled: !!disabled,
-            query: typedQuery,
-            selectedOptions,
-            displayValue,
-            clearAll,
-            toggleOpen,
-          }"
+          <span class="grid min-w-0 flex-1 text-left font-normal">
+            <span
+              :class="[
+                'col-start-1 row-start-1 max-w-full truncate',
+                !selectedOptions.length && 'text-ink-gray-4',
+              ]"
+            >
+              <slot
+                name="summary"
+                v-bind="{
+                  open,
+                  disabled: !!disabled,
+                  query: typedQuery,
+                  selectedOptions,
+                  displayValue,
+                  clearAll,
+                  toggleOpen,
+                  summary: triggerSummary,
+                }"
+                >{{ triggerSummary }}</slot
+              >
+            </span>
+            <span
+              v-if="!$slots.summary"
+              aria-hidden="true"
+              class="multi-select-trigger-sizer col-start-1 row-start-1"
+              :data-width-text="triggerSizingText"
+            />
+          </span>
+
+          <slot
+            name="suffix"
+            v-bind="{
+              open,
+              disabled: !!disabled,
+              query: typedQuery,
+              selectedOptions,
+              displayValue,
+              clearAll,
+              toggleOpen,
+            }"
+          >
+            <span
+              :class="[
+                'lucide-chevron-down size-4 shrink-0 text-ink-gray-4 transition-transform duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]',
+                open && 'rotate-180',
+              ]"
+            />
+          </slot>
+        </button>
+      </ComboboxAnchor>
+
+      <ComboboxPortal :to="portalTo">
+        <ComboboxContent
+          data-slot="content"
+          data-selection
+          :data-variant="variant"
+          :data-size="size"
+          :data-loading="loading ? '' : undefined"
+          class="z-[100] min-w-[--reka-combobox-trigger-width]"
+          position="popper"
+          :side="side"
+          :align="align"
+          :side-offset="offset"
         >
-          <span
-            :class="[
-              'lucide-chevron-down size-4 shrink-0 text-ink-gray-4 transition-transform duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]',
-              open && 'rotate-180',
-            ]"
-          />
-        </slot>
-      </button>
-    </ComboboxAnchor>
-
-    <ComboboxPortal :to="portalTo">
-      <ComboboxContent
-        data-slot="content"
-        data-selection
-        :data-variant="variant"
-        :data-size="size"
-        :data-loading="loading ? '' : undefined"
-        class="z-[100] min-w-[--reka-combobox-trigger-width]"
-        position="popper"
-        :side="side"
-        :align="align"
-        :side-offset="offset"
-      >
-        <!--
+          <!--
           FocusScope sits on the always-present content-body div (inside
           ComboboxContent, which is a <Presence> wrapper that renders null
           while closed). Mounting it here pushes a new entry onto reka's
@@ -432,86 +431,86 @@ defineSlots<MultiSelectSlots>()
           popover (e.g. the search input). See Combobox.vue for the same
           fix and a longer rationale.
         -->
-        <FocusScope as-child @unmount-auto-focus.prevent>
-          <div
-            data-slot="content-body"
-            :data-motion="contentMotion"
-            class="overflow-hidden rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5"
-          >
+          <FocusScope as-child @unmount-auto-focus.prevent>
             <div
-              v-if="!hideSearch"
-              data-slot="search"
-              class="flex items-center gap-2 border-b border-outline-gray-1 px-3"
+              data-slot="content-body"
+              :data-motion="contentMotion"
+              class="overflow-hidden rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5"
             >
-              <ComboboxInput
-                data-slot="input"
-                :value="query"
-                :disabled="disabled"
-                :placeholder="placeholder"
-                autocomplete="off"
-                class="min-w-0 flex-1 border-0 bg-transparent px-0 py-2 text-base text-ink-gray-8 outline-none placeholder:text-ink-gray-4 focus:ring-0"
-                @input="handleInputChange"
-              />
-              <LoadingIndicator
-                v-if="loading"
-                class="size-4 shrink-0 text-ink-gray-5"
-              />
-            </div>
-
-            <MultiSelectResults
-              :groups="filteredGroups"
-              :size="size"
-              :query="typedQuery"
-              :selected-values="safeModel"
-              :loading="loading"
-              :hide-search="hideSearch"
-              :empty-text="emptyText"
-              :show-empty="showEmpty"
-              :slot-fns="slots"
-              :all-options="allOptions"
-            />
-
-            <template v-if="$slots.footer">
-              <div data-slot="footer">
-                <slot
-                  name="footer"
-                  v-bind="{
-                    clearAll,
-                    selectAll,
-                    selectedOptions,
-                    query: typedQuery,
-                  }"
+              <div
+                v-if="!hideSearch"
+                data-slot="search"
+                class="flex items-center gap-2 border-b border-outline-gray-1 px-3"
+              >
+                <ComboboxInput
+                  data-slot="input"
+                  :value="query"
+                  :disabled="disabled"
+                  :placeholder="placeholder"
+                  autocomplete="off"
+                  class="min-w-0 flex-1 border-0 bg-transparent px-0 py-2 text-base text-ink-gray-8 outline-none placeholder:text-ink-gray-4 focus:ring-0"
+                  @input="handleInputChange"
+                />
+                <LoadingIndicator
+                  v-if="loading"
+                  class="size-4 shrink-0 text-ink-gray-5"
                 />
               </div>
-            </template>
-            <div
-              v-else
-              data-slot="footer"
-              class="flex items-center justify-between gap-2 border-t border-outline-gray-1 px-2 py-1.5"
-            >
-              <Button
-                v-if="safeModel.length > 0"
-                variant="ghost"
-                size="sm"
-                @click="clearAll"
-              >
-                Clear All
-              </Button>
-              <Button
-                v-if="!allSelected"
-                variant="ghost"
-                size="sm"
-                class="ml-auto"
-                @click="selectAll"
+
+              <MultiSelectResults
+                :groups="filteredGroups"
+                :size="size"
+                :query="typedQuery"
+                :selected-values="safeModel"
+                :loading="loading"
+                :hide-search="hideSearch"
+                :empty-text="emptyText"
+                :show-empty="showEmpty"
+                :slot-fns="slots"
+                :all-options="allOptions"
+              />
+
+              <template v-if="$slots.footer">
+                <div data-slot="footer">
+                  <slot
+                    name="footer"
+                    v-bind="{
+                      clearAll,
+                      selectAll,
+                      selectedOptions,
+                      query: typedQuery,
+                    }"
+                  />
+                </div>
+              </template>
+              <div
+                v-else
+                data-slot="footer"
+                class="flex items-center justify-between gap-2 border-t border-outline-gray-1 px-2 py-1.5"
               >
-                Select All
-              </Button>
+                <Button
+                  v-if="safeModel.length > 0"
+                  variant="ghost"
+                  size="sm"
+                  @click="clearAll"
+                >
+                  Clear All
+                </Button>
+                <Button
+                  v-if="!allSelected"
+                  variant="ghost"
+                  size="sm"
+                  class="ml-auto"
+                  @click="selectAll"
+                >
+                  Select All
+                </Button>
+              </div>
             </div>
-          </div>
-        </FocusScope>
-      </ComboboxContent>
-    </ComboboxPortal>
-  </ComboboxRoot>
+          </FocusScope>
+        </ComboboxContent>
+      </ComboboxPortal>
+    </ComboboxRoot>
     <InputDescription
       v-if="showDescription || $slots.description"
       :id="descriptionId"
diff --git a/src/components/MultiSelect/MultiSelectResults.vue b/src/components/MultiSelect/MultiSelectResults.vue
index f8b37a8b4..c8295f048 100644
--- a/src/components/MultiSelect/MultiSelectResults.vue
+++ b/src/components/MultiSelect/MultiSelectResults.vue
@@ -72,7 +72,6 @@ const { toInternal: getInternalValue } = useEmptyValueMapping(
 function getItemTextValue(item: NormalizedOption) {
   return `${item.label} ${item.value}`.trim()
 }
-
 </script>
 
 <template>
diff --git a/src/components/MultiSelect/stories/AsyncOptions.vue b/src/components/MultiSelect/stories/AsyncOptions.vue
index 26d053bfe..5f702f55e 100644
--- a/src/components/MultiSelect/stories/AsyncOptions.vue
+++ b/src/components/MultiSelect/stories/AsyncOptions.vue
@@ -11,24 +11,114 @@ type Member = {
 }
 
 const ALL_MEMBERS: Member[] = [
-  { label: 'Alex Rivera', value: 'alex@frappe.io', image: 'https://i.pravatar.cc/80?u=alex@frappe.io', role: 'Engineering' },
-  { label: 'Alexandra Chen', value: 'alexandra@frappe.io', image: 'https://i.pravatar.cc/80?u=alexandra@frappe.io', role: 'Design' },
-  { label: 'Alexei Volkov', value: 'alexei@frappe.io', image: 'https://i.pravatar.cc/80?u=alexei@frappe.io', role: 'Engineering' },
-  { label: 'Priya Shah', value: 'priya@frappe.io', image: 'https://i.pravatar.cc/80?u=priya@frappe.io', role: 'Design' },
-  { label: 'Priyanka Mehta', value: 'priyanka@frappe.io', image: 'https://i.pravatar.cc/80?u=priyanka@frappe.io', role: 'Product' },
-  { label: 'Marcus Lee', value: 'marcus@frappe.io', image: 'https://i.pravatar.cc/80?u=marcus@frappe.io', role: 'Product' },
-  { label: 'Marco Silva', value: 'marco@frappe.io', image: 'https://i.pravatar.cc/80?u=marco@frappe.io', role: 'Engineering' },
-  { label: 'Maria Garcia', value: 'maria@frappe.io', image: 'https://i.pravatar.cc/80?u=maria@frappe.io', role: 'Marketing' },
-  { label: 'Sofia Hartmann', value: 'sofia@frappe.io', image: 'https://i.pravatar.cc/80?u=sofia@frappe.io', role: 'Engineering' },
-  { label: 'Sophie Laurent', value: 'sophie@frappe.io', image: 'https://i.pravatar.cc/80?u=sophie@frappe.io', role: 'Sales' },
-  { label: 'Kenji Tanaka', value: 'kenji@frappe.io', image: 'https://i.pravatar.cc/80?u=kenji@frappe.io', role: 'Design' },
-  { label: 'Kenta Mori', value: 'kenta@frappe.io', image: 'https://i.pravatar.cc/80?u=kenta@frappe.io', role: 'Engineering' },
-  { label: 'Nadia Okafor', value: 'nadia@frappe.io', image: 'https://i.pravatar.cc/80?u=nadia@frappe.io', role: 'Product' },
-  { label: 'Diego Alvarez', value: 'diego@frappe.io', image: 'https://i.pravatar.cc/80?u=diego@frappe.io', role: 'Engineering' },
-  { label: 'Lina Petrova', value: 'lina@frappe.io', image: 'https://i.pravatar.cc/80?u=lina@frappe.io', role: 'Marketing' },
-  { label: 'Liam Connor', value: 'liam@frappe.io', image: 'https://i.pravatar.cc/80?u=liam@frappe.io', role: 'Product' },
-  { label: 'Hassan Iqbal', value: 'hassan@frappe.io', image: 'https://i.pravatar.cc/80?u=hassan@frappe.io', role: 'Sales' },
-  { label: 'Ava Nguyen', value: 'ava@frappe.io', image: 'https://i.pravatar.cc/80?u=ava@frappe.io', role: 'Engineering' },
+  {
+    label: 'Alex Rivera',
+    value: 'alex@frappe.io',
+    image: 'https://i.pravatar.cc/80?u=alex@frappe.io',
+    role: 'Engineering',
+  },
+  {
+    label: 'Alexandra Chen',
+    value: 'alexandra@frappe.io',
+    image: 'https://i.pravatar.cc/80?u=alexandra@frappe.io',
+    role: 'Design',
+  },
+  {
+    label: 'Alexei Volkov',
+    value: 'alexei@frappe.io',
+    image: 'https://i.pravatar.cc/80?u=alexei@frappe.io',
+    role: 'Engineering',
+  },
+  {
+    label: 'Priya Shah',
+    value: 'priya@frappe.io',
+    image: 'https://i.pravatar.cc/80?u=priya@frappe.io',
+    role: 'Design',
+  },
+  {
+    label: 'Priyanka Mehta',
+    value: 'priyanka@frappe.io',
+    image: 'https://i.pravatar.cc/80?u=priyanka@frappe.io',
+    role: 'Product',
+  },
+  {
+    label: 'Marcus Lee',
+    value: 'marcus@frappe.io',
+    image: 'https://i.pravatar.cc/80?u=marcus@frappe.io',
+    role: 'Product',
+  },
+  {
+    label: 'Marco Silva',
+    value: 'marco@frappe.io',
+    image: 'https://i.pravatar.cc/80?u=marco@frappe.io',
+    role: 'Engineering',
+  },
+  {
+    label: 'Maria Garcia',
+    value: 'maria@frappe.io',
+    image: 'https://i.pravatar.cc/80?u=maria@frappe.io',
+    role: 'Marketing',
+  },
+  {
+    label: 'Sofia Hartmann',
+    value: 'sofia@frappe.io',
+    image: 'https://i.pravatar.cc/80?u=sofia@frappe.io',
+    role: 'Engineering',
+  },
+  {
+    label: 'Sophie Laurent',
+    value: 'sophie@frappe.io',
+    image: 'https://i.pravatar.cc/80?u=sophie@frappe.io',
+    role: 'Sales',
+  },
+  {
+    label: 'Kenji Tanaka',
+    value: 'kenji@frappe.io',
+    image: 'https://i.pravatar.cc/80?u=kenji@frappe.io',
+    role: 'Design',
+  },
+  {
+    label: 'Kenta Mori',
+    value: 'kenta@frappe.io',
+    image: 'https://i.pravatar.cc/80?u=kenta@frappe.io',
+    role: 'Engineering',
+  },
+  {
+    label: 'Nadia Okafor',
+    value: 'nadia@frappe.io',
+    image: 'https://i.pravatar.cc/80?u=nadia@frappe.io',
+    role: 'Product',
+  },
+  {
+    label: 'Diego Alvarez',
+    value: 'diego@frappe.io',
+    image: 'https://i.pravatar.cc/80?u=diego@frappe.io',
+    role: 'Engineering',
+  },
+  {
+    label: 'Lina Petrova',
+    value: 'lina@frappe.io',
+    image: 'https://i.pravatar.cc/80?u=lina@frappe.io',
+    role: 'Marketing',
+  },
+  {
+    label: 'Liam Connor',
+    value: 'liam@frappe.io',
+    image: 'https://i.pravatar.cc/80?u=liam@frappe.io',
+    role: 'Product',
+  },
+  {
+    label: 'Hassan Iqbal',
+    value: 'hassan@frappe.io',
+    image: 'https://i.pravatar.cc/80?u=hassan@frappe.io',
+    role: 'Sales',
+  },
+  {
+    label: 'Ava Nguyen',
+    value: 'ava@frappe.io',
+    image: 'https://i.pravatar.cc/80?u=ava@frappe.io',
+    role: 'Engineering',
+  },
 ]
 
 // Mocks a server endpoint: 400ms latency + substring match on label/value.
diff --git a/src/components/MultiSelect/types.ts b/src/components/MultiSelect/types.ts
index 5b101de63..9cb6e7b84 100644
--- a/src/components/MultiSelect/types.ts
+++ b/src/components/MultiSelect/types.ts
@@ -179,7 +179,7 @@ export interface MultiSelectFooterSlotProps {
 
 export interface MultiSelectSlots {
   /** Fully custom trigger renderer. */
-  trigger?: (props: MultiSelectTriggerSlotProps) => any
+  'trigger'?: (props: MultiSelectTriggerSlotProps) => any
 
   /**
    * Content rendered before the trigger label. When provided, this slot
@@ -188,7 +188,7 @@ export interface MultiSelectSlots {
    * auto-renders the selected option's `#item-prefix` / `icon` when
    * exactly one is selected, and nothing otherwise.
    */
-  prefix?: (props: MultiSelectPrefixSlotProps) => any
+  'prefix'?: (props: MultiSelectPrefixSlotProps) => any
 
   /**
    * Overrides the trigger label region. Receives the default summary
@@ -196,7 +196,7 @@ export interface MultiSelectSlots {
    * show comma-separated labels (or any other format) instead of the
    * default `"N selected"` for multi-selection states.
    */
-  summary?: (props: MultiSelectSummarySlotProps) => any
+  'summary'?: (props: MultiSelectSummarySlotProps) => any
 
   /**
    * Content rendered after the trigger label. Providing this slot
@@ -204,13 +204,13 @@ export interface MultiSelectSlots {
    * your slot content is conditional. Use `@click.stop` and
    * `@pointerdown.stop` so the press doesn't toggle the popover.
    */
-  suffix?: (props: MultiSelectSuffixSlotProps) => any
+  'suffix'?: (props: MultiSelectSuffixSlotProps) => any
 
   /** Overrides the rendered label content. Receives `{ required }`. */
-  label?: (props: { required: boolean }) => any
+  'label'?: (props: { required: boolean }) => any
 
   /** Overrides the rendered description content. */
-  description?: () => any
+  'description'?: () => any
 
   /** Shared content rendered before the standard row label. */
   'item-prefix'?: (props: MultiSelectItemSlotProps) => any
@@ -222,19 +222,19 @@ export interface MultiSelectSlots {
   'item-suffix'?: (props: MultiSelectItemSlotProps) => any
 
   /** Replaces the entire row. */
-  item?: (props: MultiSelectItemSlotProps) => any
+  'item'?: (props: MultiSelectItemSlotProps) => any
 
   /** Custom renderer for group labels. */
   'group-label'?: (props: MultiSelectGroupLabelSlotProps) => any
 
   /** Fallback content rendered when there are no results. */
-  empty?: (props: MultiSelectEmptySlotProps) => any
+  'empty'?: (props: MultiSelectEmptySlotProps) => any
 
   /** Replaces the default Clear All / Select All footer. */
-  footer?: (props: MultiSelectFooterSlotProps) => any
+  'footer'?: (props: MultiSelectFooterSlotProps) => any
 
   /** @deprecated compatibility alias for `#item-label`. */
-  option?: (props: { item: MultiSelectOption }) => any
+  'option'?: (props: { item: MultiSelectOption }) => any
 
   [slotName: string]: ((props: any) => any) | undefined
 }
diff --git a/src/components/Password/Password.api.md b/src/components/Password/Password.api.md
index 25eafaee5..57f141755 100644
--- a/src/components/Password/Password.api.md
+++ b/src/components/Password/Password.api.md
@@ -102,11 +102,11 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="Password" :data="propsData"/> 
+## API Reference
 
-<SlotsTable :data="slotsData"/> 
+<PropsTable name="Password" :data="propsData"/>
 
-<EmitsTable :data="emitsData"/> 
+<SlotsTable :data="slotsData"/>
 
+<EmitsTable :data="emitsData"/>
diff --git a/src/components/Password/Password.cy.ts b/src/components/Password/Password.cy.ts
index fe410ebb1..2f7b550d5 100644
--- a/src/components/Password/Password.cy.ts
+++ b/src/components/Password/Password.cy.ts
@@ -19,7 +19,7 @@ describe('Password', () => {
   it('v-model with modelValue', () => {
     cy.mount(Password, {
       props: {
-        modelValue: '123456',
+        'modelValue': '123456',
         'onUpdate:modelValue': cy.spy().as('onUpdate'),
       },
     })
diff --git a/src/components/Password/stories/LegacyValue.vue b/src/components/Password/stories/LegacyValue.vue
index 2f525f8b3..8e59e4a20 100644
--- a/src/components/Password/stories/LegacyValue.vue
+++ b/src/components/Password/stories/LegacyValue.vue
@@ -8,9 +8,5 @@ import { Password } from 'frappe-ui'
 -->
 
 <template>
-  <Password
-    label="Legacy field"
-    value="hunter2"
-    placeholder="Enter password"
-  />
+  <Password label="Legacy field" value="hunter2" placeholder="Enter password" />
 </template>
diff --git a/src/components/Popover/Popover.api.md b/src/components/Popover/Popover.api.md
index 74568f7dd..b84992cf9 100644
--- a/src/components/Popover/Popover.api.md
+++ b/src/components/Popover/Popover.api.md
@@ -118,11 +118,11 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="Popover" :data="propsData"/> 
+## API Reference
 
-<SlotsTable :data="slotsData"/> 
+<PropsTable name="Popover" :data="propsData"/>
 
-<EmitsTable :data="emitsData"/> 
+<SlotsTable :data="slotsData"/>
 
+<EmitsTable :data="emitsData"/>
diff --git a/src/components/Popover/Popover.cy.ts b/src/components/Popover/Popover.cy.ts
index 75cd3c0a1..c18e87e71 100644
--- a/src/components/Popover/Popover.cy.ts
+++ b/src/components/Popover/Popover.cy.ts
@@ -3,8 +3,8 @@ import Popover from './Popover.vue'
 import Button from '../Button/Button.vue'
 
 const PopoverSlots = {
-  target: ({ togglePopover }) =>
-    h(Button, { 'data-cy': 'trigger', onClick: togglePopover }, 'Click me'),
+  'target': ({ togglePopover }) =>
+    h(Button, { 'data-cy': 'trigger', 'onClick': togglePopover }, 'Click me'),
   'body-main': h('div', { 'data-cy': 'popover-content' }, 'Popover content'),
 }
 
@@ -36,7 +36,7 @@ describe('Popover', () => {
       slots: PopoverSlots,
       props: {
         'onUpdate:show': onUpdateShow,
-        onClose: onClose,
+        'onClose': onClose,
       },
     })
 
diff --git a/src/components/Popover/Popover.md b/src/components/Popover/Popover.md
index a08555353..a518103cc 100644
--- a/src/components/Popover/Popover.md
+++ b/src/components/Popover/Popover.md
@@ -3,9 +3,11 @@
 Shows information in a portal that doesnt disturb the page layout.
 
 ## Trigger Click
+
 <ComponentPreview name="Popover-Click" />
 
 ## Trigger Hover
+
 <ComponentPreview name="Popover-Hover" />
 
 <!-- @include: ./Popover.api.md -->
diff --git a/src/components/Popover/Popover.vue b/src/components/Popover/Popover.vue
index 8bcc7182a..4026a49c4 100644
--- a/src/components/Popover/Popover.vue
+++ b/src/components/Popover/Popover.vue
@@ -4,7 +4,7 @@
       <div
         ref="anchorRef"
         :class="['flex', $attrs.class]"
-        :style="($attrs.style as StyleValue)"
+        :style="$attrs.style as StyleValue"
         @mouseover="onMouseover"
         @mouseleave="onMouseleave"
       >
@@ -247,7 +247,7 @@ onUnmounted(() => {
 
 defineSlots<{
   /** Content of the trigger/anchor element */
-  target?: (props: {
+  'target'?: (props: {
     togglePopover: () => void
     updatePosition: () => void
     open: () => void
@@ -256,7 +256,7 @@ defineSlots<{
   }) => any
 
   /** Main content of the popover body */
-  body?: (props: {
+  'body'?: (props: {
     togglePopover: () => void
     updatePosition: () => void
     open: () => void
@@ -273,7 +273,6 @@ defineSlots<{
     isOpen: boolean
   }) => any
 }>()
-
 </script>
 
 <style>
diff --git a/src/components/Popover/index.ts b/src/components/Popover/index.ts
index c20021652..2188e6752 100644
--- a/src/components/Popover/index.ts
+++ b/src/components/Popover/index.ts
@@ -1 +1 @@
-export { default as Popover } from './Popover.vue'
\ No newline at end of file
+export { default as Popover } from './Popover.vue'
diff --git a/src/components/Progress/Progress.api.md b/src/components/Progress/Progress.api.md
index 4c1b6ecc0..de5edf292 100644
--- a/src/components/Progress/Progress.api.md
+++ b/src/components/Progress/Progress.api.md
@@ -56,9 +56,9 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="Progress" :data="propsData"/> 
+## API Reference
 
-<SlotsTable :data="slotsData"/> 
+<PropsTable name="Progress" :data="propsData"/>
 
+<SlotsTable :data="slotsData"/>
diff --git a/src/components/Progress/Progress.md b/src/components/Progress/Progress.md
index ccdb1f1ec..d9c3bb34e 100644
--- a/src/components/Progress/Progress.md
+++ b/src/components/Progress/Progress.md
@@ -3,15 +3,19 @@
 Visually represents progress or completion of a task. Updates dynamically to give users clear feedback on status.
 
 ## Examples
+
 <ComponentPreview name="Progress-Examples" />
 
 ## Hint
+
 <ComponentPreview name="Progress-Hint" />
 
 ## Intervals
+
 <ComponentPreview name="Progress-Intervals" />
 
 ## Sizes
+
 <ComponentPreview name="Progress-Sizes" />
 
 <!-- @include: ./Progress.api.md -->
diff --git a/src/components/Progress/Progress.vue b/src/components/Progress/Progress.vue
index ed6e2fe55..d531d756a 100644
--- a/src/components/Progress/Progress.vue
+++ b/src/components/Progress/Progress.vue
@@ -88,7 +88,7 @@ const filledIntervalCount = computed(() => {
 })
 
 defineSlots<{
-  /** Custom content for the hint area (usually displays the progress value). 
+  /** Custom content for the hint area (usually displays the progress value).
    * If not provided, defaults to showing `props.value` followed by `%`.
    */
   hint?: () => any
diff --git a/src/components/Progress/index.ts b/src/components/Progress/index.ts
index 93ff00025..c096672f2 100644
--- a/src/components/Progress/index.ts
+++ b/src/components/Progress/index.ts
@@ -1,2 +1,2 @@
 export { default as Progress } from './Progress.vue'
-export type { ProgressProps } from './types'
\ No newline at end of file
+export type { ProgressProps } from './types'
diff --git a/src/components/Progress/stories/Sizes.vue b/src/components/Progress/stories/Sizes.vue
index cf9189150..8e234a768 100644
--- a/src/components/Progress/stories/Sizes.vue
+++ b/src/components/Progress/stories/Sizes.vue
@@ -3,7 +3,9 @@ import { Progress } from 'frappe-ui'
 </script>
 
 <template>
-  <div class="w-full gap-3 items-center grid grid-cols-2 *:bordr *:rounded *:p-3">
+  <div
+    class="w-full gap-3 items-center grid grid-cols-2 *:bordr *:rounded *:p-3"
+  >
     <Progress :value="50" size="sm" label="Progress - sm" />
     <Progress :value="50" size="md" label="Progress - md" />
     <Progress :value="50" size="lg" label="Progress - lg" />
diff --git a/src/components/Rating/Rating.api.md b/src/components/Rating/Rating.api.md
index 805120913..624eed27c 100644
--- a/src/components/Rating/Rating.api.md
+++ b/src/components/Rating/Rating.api.md
@@ -92,11 +92,11 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="Rating" :data="propsData"/> 
+## API Reference
 
-<SlotsTable :data="slotsData"/> 
+<PropsTable name="Rating" :data="propsData"/>
 
-<EmitsTable :data="emitsData"/> 
+<SlotsTable :data="slotsData"/>
 
+<EmitsTable :data="emitsData"/>
diff --git a/src/components/Rating/Rating.cy.ts b/src/components/Rating/Rating.cy.ts
index 58318ed93..9a369f759 100644
--- a/src/components/Rating/Rating.cy.ts
+++ b/src/components/Rating/Rating.cy.ts
@@ -23,7 +23,7 @@ describe('Rating', () => {
     const onUpdate = cy.spy().as('onUpdate')
 
     cy.mount(Rating, {
-      props: { modelValue: 0, 'onUpdate:modelValue': onUpdate },
+      props: { 'modelValue': 0, 'onUpdate:modelValue': onUpdate },
     })
 
     cy.get('[role="radio"]').eq(2).click()
@@ -32,7 +32,10 @@ describe('Rating', () => {
 
   it('readonly', () => {
     cy.mount(Rating, {
-      props: { 'onUpdate:modelValue': cy.spy().as('onUpdate'), readonly: true },
+      props: {
+        'onUpdate:modelValue': cy.spy().as('onUpdate'),
+        'readonly': true,
+      },
     })
 
     cy.get('[role="radio"]').eq(1).click()
@@ -51,7 +54,9 @@ describe('Rating', () => {
       cy.mount(Rating, {
         props: { modelValue: 2, size: size as keyof typeof sizes },
       })
-      cy.get('[role="radio"] svg').first().should('have.class', sizes[size as keyof typeof sizes])
+      cy.get('[role="radio"] svg')
+        .first()
+        .should('have.class', sizes[size as keyof typeof sizes])
     }
   })
 
diff --git a/src/components/Rating/Rating.vue b/src/components/Rating/Rating.vue
index e6350c01f..c7d2319be 100644
--- a/src/components/Rating/Rating.vue
+++ b/src/components/Rating/Rating.vue
@@ -133,10 +133,10 @@ const markRating = (index: number) => {
 const hasLabeling = computed(() => {
   return Boolean(
     props.label ||
-      slots.label ||
-      showDescription.value ||
-      slots.description ||
-      hasError.value,
+    slots.label ||
+    showDescription.value ||
+    slots.description ||
+    hasError.value,
   )
 })
 </script>
diff --git a/src/components/Rating/index.ts b/src/components/Rating/index.ts
index f893a0100..abf9c092c 100644
--- a/src/components/Rating/index.ts
+++ b/src/components/Rating/index.ts
@@ -1,2 +1,2 @@
 export { default as Rating } from './Rating.vue'
-export type { RatingProps } from './types'
\ No newline at end of file
+export type { RatingProps } from './types'
diff --git a/src/components/Select/Select.api.md b/src/components/Select/Select.api.md
index f06f10d64..23bb40e3c 100644
--- a/src/components/Select/Select.api.md
+++ b/src/components/Select/Select.api.md
@@ -163,11 +163,11 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="Select" :data="propsData"/> 
+## API Reference
 
-<SlotsTable :data="slotsData"/> 
+<PropsTable name="Select" :data="propsData"/>
 
-<EmitsTable :data="emitsData"/> 
+<SlotsTable :data="slotsData"/>
 
+<EmitsTable :data="emitsData"/>
diff --git a/src/components/Select/Select.cy.ts b/src/components/Select/Select.cy.ts
index c70b7cd1e..15ef65b12 100644
--- a/src/components/Select/Select.cy.ts
+++ b/src/components/Select/Select.cy.ts
@@ -130,13 +130,13 @@ describe('Select', () => {
         return () =>
           h('div', { class: 'flex items-start gap-6' }, [
             h(Select, {
-              options: ['Short'],
-              modelValue: 'Short',
+              'options': ['Short'],
+              'modelValue': 'Short',
               'data-cy': 'short-select',
             }),
             h(Select, {
-              options: ['Short', 'A much longer option label'],
-              modelValue: 'Short',
+              'options': ['Short', 'A much longer option label'],
+              'modelValue': 'Short',
               'data-cy': 'long-select',
             }),
           ])
@@ -162,13 +162,13 @@ describe('Select', () => {
           h('div', { class: 'w-[320px] space-y-4' }, [
             h(Select, {
               options,
-              modelValue: 'abc',
+              'modelValue': 'abc',
               'data-cy': 'auto-width-select',
             }),
             h(Select, {
               options,
-              modelValue: 'abc',
-              class: 'w-full',
+              'modelValue': 'abc',
+              'class': 'w-full',
               'data-cy': 'full-width-select',
             }),
           ])
@@ -263,13 +263,13 @@ describe('Select', () => {
         return () =>
           h('form', { onSubmit: handleSubmit }, [
             h(Select, {
-              modelValue: value.value,
+              'modelValue': value.value,
               'onUpdate:modelValue': (nextValue) => {
                 value.value = nextValue
               },
-              name: 'status',
-              required: true,
-              autocomplete: 'organization-title',
+              'name': 'status',
+              'required': true,
+              'autocomplete': 'organization-title',
               options,
             }),
             h('button', { type: 'submit' }, 'Submit'),
diff --git a/src/components/Select/Select.md b/src/components/Select/Select.md
index 9846af3d3..5650bdbc9 100644
--- a/src/components/Select/Select.md
+++ b/src/components/Select/Select.md
@@ -4,20 +4,25 @@ Lets users select one option from a list. Ideal for forms, settings, or any
 interface where a single choice is required.
 
 ## Example
+
 <ComponentPreview name="Select-Example" />
 
 ## Custom Option Layout
+
 Use `#item-prefix` and `#item-label` to tailor the standard row — for example, an avatar plus a two-line label with a secondary description. `#prefix` on the trigger reuses the selected option's accessory.
 
 <ComponentPreview name="Select-OptionSlot" />
 
 ## States
+
 <ComponentPreview name="Select-States" />
 
 ## Trigger Slots
+
 <ComponentPreview name="Select-TriggerSlots" />
 
 ## Label, Description, Error
+
 `Select` supports `label`, `description`, `error`, and `required` directly — no `FormControl` wrapper needed. The error suppresses the description and wires `aria-invalid` + `aria-errormessage` onto the trigger.
 
 <ComponentPreview name="Select-Labeling" />
diff --git a/src/components/Select/Select.vue b/src/components/Select/Select.vue
index bcc083477..0dcd2cabc 100644
--- a/src/components/Select/Select.vue
+++ b/src/components/Select/Select.vue
@@ -77,10 +77,10 @@ const {
 const hasLabeling = computed(() => {
   return Boolean(
     props.label ||
-      props.description ||
-      hasError.value ||
-      slots.label ||
-      slots.description,
+    props.description ||
+    hasError.value ||
+    slots.label ||
+    slots.description,
   )
 })
 
@@ -231,53 +231,60 @@ defineSlots<SelectSlots>()
       </template>
     </InputLabel>
     <SelectRoot v-model="internalModel" v-model:open="open" v-bind="rootAttrs">
-    <SelectTrigger
-      :id="inputId"
-      data-slot="trigger"
-      v-bind="triggerAttrs"
-      :class="[
-        triggerClasses,
-        hasLabeling ? 'w-full' : null,
-        hasLabeling ? null : (attrs.class as any),
-      ]"
-      :style="hasLabeling ? null : (attrs.style as any)"
-      :disabled="disabled"
-      :aria-invalid="hasError || undefined"
-      :aria-errormessage="hasError ? errorMessageId : undefined"
-      :aria-describedby="describedBy"
-      :aria-required="required || undefined"
-      :data-invalid="hasError ? 'true' : undefined"
-      :data-required="required ? 'true' : undefined"
-      @pointerdown="markPointerDown"
-    >
-      <template v-if="$slots.trigger">
-        <slot
-          name="trigger"
-          v-bind="{ open, disabled: !!disabled, selectedOption, displayValue }"
-        />
-        <div
-          data-slot="trigger-value"
-          :class="[
-            'pointer-events-none absolute inset-0 flex items-center overflow-hidden',
-            triggerContentPadding,
-          ]"
-          aria-hidden="true"
-        >
-          <SelectValue
-            :placeholder="placeholder"
-            class="max-w-full truncate opacity-0"
-            :class="{ 'text-ink-gray-4': showPlaceholderForSelected }"
+      <SelectTrigger
+        :id="inputId"
+        data-slot="trigger"
+        v-bind="triggerAttrs"
+        :class="[
+          triggerClasses,
+          hasLabeling ? 'w-full' : null,
+          hasLabeling ? null : (attrs.class as any),
+        ]"
+        :style="hasLabeling ? null : (attrs.style as any)"
+        :disabled="disabled"
+        :aria-invalid="hasError || undefined"
+        :aria-errormessage="hasError ? errorMessageId : undefined"
+        :aria-describedby="describedBy"
+        :aria-required="required || undefined"
+        :data-invalid="hasError ? 'true' : undefined"
+        :data-required="required ? 'true' : undefined"
+        @pointerdown="markPointerDown"
+      >
+        <template v-if="$slots.trigger">
+          <slot
+            name="trigger"
+            v-bind="{
+              open,
+              disabled: !!disabled,
+              selectedOption,
+              displayValue,
+            }"
+          />
+          <div
+            data-slot="trigger-value"
+            :class="[
+              'pointer-events-none absolute inset-0 flex items-center overflow-hidden',
+              triggerContentPadding,
+            ]"
+            aria-hidden="true"
           >
-            <template v-if="selectedOption">
-              {{
-                showPlaceholderForSelected ? placeholder : selectedOption.label
-              }}
-            </template>
-          </SelectValue>
-        </div>
-      </template>
-      <template v-else>
-        <!--
+            <SelectValue
+              :placeholder="placeholder"
+              class="max-w-full truncate opacity-0"
+              :class="{ 'text-ink-gray-4': showPlaceholderForSelected }"
+            >
+              <template v-if="selectedOption">
+                {{
+                  showPlaceholderForSelected
+                    ? placeholder
+                    : selectedOption.label
+                }}
+              </template>
+            </SelectValue>
+          </div>
+        </template>
+        <template v-else>
+          <!--
           Prefix precedence on the trigger:
             1. selected + `#item-prefix` slot → reuse the list's per-item
                prefix renderer so the trigger matches the dropdown row
@@ -286,97 +293,101 @@ defineSlots<SelectSlots>()
                string / emoji / component).
             3. not selected + `#prefix` slot → user's placeholder affordance.
         -->
-        <template v-if="selectedOption && slots['item-prefix']">
+          <template v-if="selectedOption && slots['item-prefix']">
+            <slot
+              name="item-prefix"
+              v-bind="{ item: selectedOption, option: selectedOption }"
+            />
+          </template>
+          <OptionIcon
+            v-else-if="selectedOption?.icon"
+            :icon="selectedOption.icon"
+          />
           <slot
-            name="item-prefix"
-            v-bind="{ item: selectedOption, option: selectedOption }"
+            v-else
+            name="prefix"
+            v-bind="{
+              open,
+              disabled: !!disabled,
+              selectedOption,
+              displayValue,
+            }"
           />
-        </template>
-        <OptionIcon
-          v-else-if="selectedOption?.icon"
-          :icon="selectedOption.icon"
-        />
-        <slot
-          v-else
-          name="prefix"
-          v-bind="{
-            open,
-            disabled: !!disabled,
-            selectedOption,
-            displayValue,
-          }"
-        />
-
-        <div class="grid min-w-0 text-left truncate">
-          <SelectValue
-            :placeholder="placeholder"
-            class="col-start-1 row-start-1 max-w-full truncate"
-            :class="{ 'text-ink-gray-4': showPlaceholderForSelected }"
+
+          <div class="grid min-w-0 text-left truncate">
+            <SelectValue
+              :placeholder="placeholder"
+              class="col-start-1 row-start-1 max-w-full truncate"
+              :class="{ 'text-ink-gray-4': showPlaceholderForSelected }"
+            >
+              <template v-if="selectedOption">
+                {{
+                  showPlaceholderForSelected
+                    ? placeholder
+                    : selectedOption.label
+                }}
+              </template>
+            </SelectValue>
+            <span
+              aria-hidden="true"
+              class="select-trigger-sizer col-start-1 row-start-1"
+              :data-width-text="selectSizingText"
+            />
+          </div>
+
+          <slot
+            name="suffix"
+            v-bind="{
+              open,
+              disabled: !!disabled,
+              selectedOption,
+              displayValue,
+            }"
           >
-            <template v-if="selectedOption">
-              {{
-                showPlaceholderForSelected ? placeholder : selectedOption.label
-              }}
-            </template>
-          </SelectValue>
-          <span
-            aria-hidden="true"
-            class="select-trigger-sizer col-start-1 row-start-1"
-            :data-width-text="selectSizingText"
-          />
-        </div>
-
-        <slot
-          name="suffix"
-          v-bind="{
-            open,
-            disabled: !!disabled,
-            selectedOption,
-            displayValue,
-          }"
-        >
-          <span class="lucide-chevron-down ml-auto size-4 shrink-0 text-ink-gray-4" />
-        </slot>
-      </template>
-    </SelectTrigger>
+            <span
+              class="lucide-chevron-down ml-auto size-4 shrink-0 text-ink-gray-4"
+            />
+          </slot>
+        </template>
+      </SelectTrigger>
 
-    <SelectPortal>
-      <SelectContent
-        data-slot="content"
-        data-selection
-        class="z-[100] origin-[var(--reka-select-content-transform-origin)]"
-      >
-        <div
-          data-slot="content-body"
-          :data-motion="contentMotion"
-          class="overflow-hidden rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 will-change-[opacity,transform] origin-[var(--reka-select-content-transform-origin)]"
+      <SelectPortal>
+        <SelectContent
+          data-slot="content"
+          data-selection
+          class="z-[100] origin-[var(--reka-select-content-transform-origin)]"
         >
-          <SelectViewport class="flex flex-col p-1">
-            <div
-              v-if="!selectOptions.length"
-              data-slot="empty"
-              class="px-2 py-1.5 text-base text-ink-gray-5"
-            >
-              <slot name="empty">{{ emptyText }}</slot>
-            </div>
-
-            <template v-else>
-              <SelectItem
-                v-for="(internalOption, index) in internalOptions"
-                :key="getOptionKey(internalOption.option, index)"
-                :disabled="internalOption.option.disabled"
-                :value="internalOption.internalValue"
-                data-slot="item"
-                :class="itemRootClasses"
-                class="select-none rounded border-0 text-base text-ink-gray-9 data-[disabled]:text-ink-gray-4 data-[highlighted]:bg-surface-gray-2 data-[state=checked]:bg-surface-gray-3 data-[highlighted]:data-[state=checked]:bg-surface-gray-4"
+          <div
+            data-slot="content-body"
+            :data-motion="contentMotion"
+            class="overflow-hidden rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 will-change-[opacity,transform] origin-[var(--reka-select-content-transform-origin)]"
+          >
+            <SelectViewport class="flex flex-col p-1">
+              <div
+                v-if="!selectOptions.length"
+                data-slot="empty"
+                class="px-2 py-1.5 text-base text-ink-gray-5"
               >
-                <ItemListRow
-                  :size="itemSize"
-                  :selected="internalOption.option.value === model"
+                <slot name="empty">{{ emptyText }}</slot>
+              </div>
+
+              <template v-else>
+                <SelectItem
+                  v-for="(internalOption, index) in internalOptions"
+                  :key="getOptionKey(internalOption.option, index)"
                   :disabled="internalOption.option.disabled"
+                  :value="internalOption.internalValue"
+                  data-slot="item"
+                  :class="itemRootClasses"
+                  class="select-none rounded border-0 text-base text-ink-gray-9 data-[disabled]:text-ink-gray-4 data-[highlighted]:bg-surface-gray-2 data-[state=checked]:bg-surface-gray-3 data-[highlighted]:data-[state=checked]:bg-surface-gray-4"
                 >
-                  <template #prefix>
-                    <!--
+                  <ItemListRow
+                    :size="itemSize"
+                    :selected="internalOption.option.value === model"
+                    :disabled="internalOption.option.disabled"
+                  >
+                    <template #prefix>
+                      <!--
                       v-if chain (not unconditional slot + v-if icon) so that
                       with neither a consumer `#item-prefix` slot nor an
                       `option.icon`, the prefix template renders only
@@ -391,79 +402,94 @@ defineSlots<SelectSlots>()
                       through the Tailwind plugin; component values render
                       directly.
                     -->
-                    <slot
-                      v-if="slots['item-prefix']"
-                      name="item-prefix"
-                      v-bind="{ item: internalOption.option, option: internalOption.option }"
-                    />
-                    <OptionIcon
-                      v-else-if="internalOption.option.icon"
-                      :icon="internalOption.option.icon"
-                    />
-                  </template>
-
-                  <template #label>
-                    <!--
+                      <slot
+                        v-if="slots['item-prefix']"
+                        name="item-prefix"
+                        v-bind="{
+                          item: internalOption.option,
+                          option: internalOption.option,
+                        }"
+                      />
+                      <OptionIcon
+                        v-else-if="internalOption.option.icon"
+                        :icon="internalOption.option.icon"
+                      />
+                    </template>
+
+                    <template #label>
+                      <!--
                       SelectItemText must wrap the visible label so reka's
                       item-aligned positioning uses the on-screen label rect.
                       Previously rendered as `sr-only`, which gave a 1x1 rect
                       and mis-anchored the popup (prefix not covered).
                     -->
-                    <SelectItemText as="div" class="min-w-0">
-                      <slot
-                        v-if="
-                          getOptionSlotName(internalOption.option) &&
-                          slots[getOptionSlotName(internalOption.option)!]
-                        "
-                        :name="getOptionSlotName(internalOption.option)!"
-                        v-bind="{ item: internalOption.option, option: internalOption.option }"
-                      />
-                      <slot
-                        v-else
-                        name="item-label"
-                        v-bind="{ item: internalOption.option, option: internalOption.option }"
-                      >
+                      <SelectItemText as="div" class="min-w-0">
+                        <slot
+                          v-if="
+                            getOptionSlotName(internalOption.option) &&
+                            slots[getOptionSlotName(internalOption.option)!]
+                          "
+                          :name="getOptionSlotName(internalOption.option)!"
+                          v-bind="{
+                            item: internalOption.option,
+                            option: internalOption.option,
+                          }"
+                        />
                         <slot
-                          name="option"
-                          v-bind="{ item: internalOption.option, option: internalOption.option }"
+                          v-else
+                          name="item-label"
+                          v-bind="{
+                            item: internalOption.option,
+                            option: internalOption.option,
+                          }"
                         >
-                          <div class="truncate">
-                            {{ internalOption.option.label }}
-                          </div>
-                          <div
-                            v-if="internalOption.option.description"
-                            class="truncate text-p-sm text-ink-gray-5"
+                          <slot
+                            name="option"
+                            v-bind="{
+                              item: internalOption.option,
+                              option: internalOption.option,
+                            }"
                           >
-                            {{ internalOption.option.description }}
-                          </div>
+                            <div class="truncate">
+                              {{ internalOption.option.label }}
+                            </div>
+                            <div
+                              v-if="internalOption.option.description"
+                              class="truncate text-p-sm text-ink-gray-5"
+                            >
+                              {{ internalOption.option.description }}
+                            </div>
+                          </slot>
                         </slot>
-                      </slot>
-                    </SelectItemText>
-                  </template>
-
-                  <template #suffix>
-                    <slot
-                      name="item-suffix"
-                      v-bind="{ item: internalOption.option, option: internalOption.option }"
-                    />
-                    <SelectItemIndicator
-                      class="ml-1 inline-flex items-center justify-center"
-                    >
-                      <span class="lucide-check size-4 text-ink-gray-6" />
-                    </SelectItemIndicator>
-                  </template>
-                </ItemListRow>
-              </SelectItem>
-            </template>
-
-            <div v-if="$slots.footer" data-slot="footer">
-              <slot name="footer" />
-            </div>
-          </SelectViewport>
-        </div>
-      </SelectContent>
-    </SelectPortal>
-  </SelectRoot>
+                      </SelectItemText>
+                    </template>
+
+                    <template #suffix>
+                      <slot
+                        name="item-suffix"
+                        v-bind="{
+                          item: internalOption.option,
+                          option: internalOption.option,
+                        }"
+                      />
+                      <SelectItemIndicator
+                        class="ml-1 inline-flex items-center justify-center"
+                      >
+                        <span class="lucide-check size-4 text-ink-gray-6" />
+                      </SelectItemIndicator>
+                    </template>
+                  </ItemListRow>
+                </SelectItem>
+              </template>
+
+              <div v-if="$slots.footer" data-slot="footer">
+                <slot name="footer" />
+              </div>
+            </SelectViewport>
+          </div>
+        </SelectContent>
+      </SelectPortal>
+    </SelectRoot>
     <InputDescription
       v-if="showDescription || $slots.description"
       :id="descriptionId"
diff --git a/src/components/Select/stories/Labeling.vue b/src/components/Select/stories/Labeling.vue
index a499287b9..0c45aa6af 100644
--- a/src/components/Select/stories/Labeling.vue
+++ b/src/components/Select/stories/Labeling.vue
@@ -6,9 +6,7 @@ const value = ref('')
 const required = ref(true)
 const showError = ref(false)
 
-const error = computed(() =>
-  showError.value ? 'Please choose a fruit.' : '',
-)
+const error = computed(() => (showError.value ? 'Please choose a fruit.' : ''))
 
 const options = [
   { label: 'Apple', value: 'apple' },
diff --git a/src/components/Select/types.ts b/src/components/Select/types.ts
index 876034a87..33fc493b0 100644
--- a/src/components/Select/types.ts
+++ b/src/components/Select/types.ts
@@ -80,30 +80,30 @@ export interface SelectItemSlotProps {
 
 export interface SelectSlots {
   /** Fully custom trigger renderer. */
-  trigger?: (props: SelectTriggerSlotProps) => any
+  'trigger'?: (props: SelectTriggerSlotProps) => any
 
   /** Overrides the rendered label content. Receives `{ required }`. */
-  label?: (props: { required: boolean }) => any
+  'label'?: (props: { required: boolean }) => any
 
   /** Overrides the rendered description content. */
-  description?: () => any
+  'description'?: () => any
 
   /** Content rendered before the trigger value. Receives the same shape
    * as `#trigger` and `#suffix` (`SelectSlotProps`). */
-  prefix?: (props: SelectPrefixSlotProps) => any
+  'prefix'?: (props: SelectPrefixSlotProps) => any
 
   /**
    * Content rendered after the trigger value. Providing this slot
    * **replaces the default chevron** — render your own fallback when
    * your slot content is conditional.
    */
-  suffix?: (props: SelectSuffixSlotProps) => any
+  'suffix'?: (props: SelectSuffixSlotProps) => any
 
   /**
    * Shared renderer for option labels.
    * @deprecated use `#item-label` for per-row label customization. `#option` remains as a back-compat alias through v1.x.
    */
-  option?: (props: SelectItemSlotProps) => any
+  'option'?: (props: SelectItemSlotProps) => any
 
   /** Content rendered before the standard option label. */
   'item-prefix'?: (props: SelectItemSlotProps) => any
@@ -115,10 +115,10 @@ export interface SelectSlots {
   'item-suffix'?: (props: SelectItemSlotProps) => any
 
   /** Fallback content rendered when no options are available. */
-  empty?: () => any
+  'empty'?: () => any
 
   /** Content rendered below the option list. */
-  footer?: () => any
+  'footer'?: () => any
 
   [slotName: string]: ((props: any) => any) | undefined
 }
diff --git a/src/components/Sidebar/Sidebar.api.md b/src/components/Sidebar/Sidebar.api.md
index 40ca3ff0c..dc941fcce 100644
--- a/src/components/Sidebar/Sidebar.api.md
+++ b/src/components/Sidebar/Sidebar.api.md
@@ -185,31 +185,31 @@
   }
 ]
 </script>
+
 ## API Reference
 
 ### Sidebar
 
-<PropsTable name="Sidebar" :data="sidebarProps"/> 
+<PropsTable name="Sidebar" :data="sidebarProps"/>
 
-<SlotsTable :data="sidebarSlots"/> 
+<SlotsTable :data="sidebarSlots"/>
 
-<EmitsTable :data="sidebarEmits"/> 
+<EmitsTable :data="sidebarEmits"/>
 
 ### SidebarHeader
 
-<PropsTable folder="Sidebar" name="SidebarHeader" :data="sidebarHeaderProps"/> 
+<PropsTable folder="Sidebar" name="SidebarHeader" :data="sidebarHeaderProps"/>
 
-<SlotsTable :data="sidebarHeaderSlots"/> 
+<SlotsTable :data="sidebarHeaderSlots"/>
 
 ### SidebarItem
 
-<PropsTable folder="Sidebar" name="SidebarItem" :data="sidebarItemProps"/> 
+<PropsTable folder="Sidebar" name="SidebarItem" :data="sidebarItemProps"/>
 
-<SlotsTable :data="sidebarItemSlots"/> 
+<SlotsTable :data="sidebarItemSlots"/>
 
 ### SidebarSection
 
-<PropsTable folder="Sidebar" name="SidebarSection" :data="sidebarSectionProps"/> 
-
-<SlotsTable :data="sidebarSectionSlots"/> 
+<PropsTable folder="Sidebar" name="SidebarSection" :data="sidebarSectionProps"/>
 
+<SlotsTable :data="sidebarSectionSlots"/>
diff --git a/src/components/Sidebar/Sidebar.md b/src/components/Sidebar/Sidebar.md
index 94f16e5e0..103791f36 100644
--- a/src/components/Sidebar/Sidebar.md
+++ b/src/components/Sidebar/Sidebar.md
@@ -3,6 +3,7 @@
 Provides a vertical navigation panel for organizing links and actions. Supports sections, collapsible groups, and quick access to key features.
 
 ## Default
+
 <ComponentPreview name="Sidebar-Example" />
 
 <!-- @include: ./Sidebar.api.md -->
diff --git a/src/components/Sidebar/SidebarItem.vue b/src/components/Sidebar/SidebarItem.vue
index 8a950b1d0..7602e766b 100644
--- a/src/components/Sidebar/SidebarItem.vue
+++ b/src/components/Sidebar/SidebarItem.vue
@@ -24,7 +24,11 @@
             <span class="grid flex-shrink-0 place-items-center">
               <slot name="icon">
                 <span
-                  v-if="props.icon && typeof props.icon === 'string' && props.icon.startsWith('lucide-')"
+                  v-if="
+                    props.icon &&
+                    typeof props.icon === 'string' &&
+                    props.icon.startsWith('lucide-')
+                  "
                   class="size-4 text-ink-gray-6"
                   :class="props.icon"
                 />
diff --git a/src/components/Sidebar/SidebarSection.vue b/src/components/Sidebar/SidebarSection.vue
index 05ac4b485..e5ccacbd4 100644
--- a/src/components/Sidebar/SidebarSection.vue
+++ b/src/components/Sidebar/SidebarSection.vue
@@ -41,7 +41,11 @@
     >
       <nav v-if="!isCollapsed" class="space-y-0.5">
         <template v-for="item in props.items" :key="item.label">
-          <slot name="sidebar-item" :item="item" :isCollapsed="isSidebarCollapsed">
+          <slot
+            name="sidebar-item"
+            :item="item"
+            :isCollapsed="isSidebarCollapsed"
+          >
             <SidebarItem
               :label="item.label"
               :accessKey="item.accessKey"
diff --git a/src/components/Sidebar/stories/Example.vue b/src/components/Sidebar/stories/Example.vue
index a7bed3966..50f9bd566 100644
--- a/src/components/Sidebar/stories/Example.vue
+++ b/src/components/Sidebar/stories/Example.vue
@@ -40,7 +40,11 @@ const crmSidebar = reactive({
         { label: 'Leads', icon: 'lucide-users', to: '/leads' },
         { label: 'Deals', icon: 'lucide-briefcase', to: '/deals' },
         { label: 'Contacts', icon: 'lucide-user-check', to: '/contacts' },
-        { label: 'Organizations', icon: 'lucide-building', to: '/organizations' },
+        {
+          label: 'Organizations',
+          icon: 'lucide-building',
+          to: '/organizations',
+        },
         { label: 'Notes', icon: 'lucide-clipboard', to: '/notes' },
         { label: 'Tasks', icon: 'lucide-check-square', to: '/tasks' },
         { label: 'Call Logs', icon: 'lucide-phone', to: '/call-logs' },
@@ -56,8 +60,16 @@ const crmSidebar = reactive({
       collapsible: true,
       items: [
         { label: 'My Open Deals', icon: 'lucide-link', to: '/my-open-deals' },
-        { label: 'Partnership Deals', icon: 'lucide-link', to: '/partnership-deals' },
-        { label: 'Unassigned Deals', icon: 'lucide-link', to: '/unassigned-deals' },
+        {
+          label: 'Partnership Deals',
+          icon: 'lucide-link',
+          to: '/partnership-deals',
+        },
+        {
+          label: 'Unassigned Deals',
+          icon: 'lucide-link',
+          to: '/unassigned-deals',
+        },
         {
           label: 'Enterprise Pipeline',
           icon: 'lucide-link',
diff --git a/src/components/Sidebar/types.ts b/src/components/Sidebar/types.ts
index 34f1c7b26..9cea7cdaf 100644
--- a/src/components/Sidebar/types.ts
+++ b/src/components/Sidebar/types.ts
@@ -1,4 +1,4 @@
-import { RouteLocationRaw } from 'vue-router'
+import type { RouteLocationRaw } from 'vue-router'
 
 export type SidebarHeaderProps = {
   title: string
diff --git a/src/components/Slider/Slider.api.md b/src/components/Slider/Slider.api.md
index 9135c43e1..3cdeb03fb 100644
--- a/src/components/Slider/Slider.api.md
+++ b/src/components/Slider/Slider.api.md
@@ -104,11 +104,11 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="Slider" :data="propsData"/> 
+## API Reference
 
-<SlotsTable :data="slotsData"/> 
+<PropsTable name="Slider" :data="propsData"/>
 
-<EmitsTable :data="emitsData"/> 
+<SlotsTable :data="slotsData"/>
 
+<EmitsTable :data="emitsData"/>
diff --git a/src/components/Slider/Slider.vue b/src/components/Slider/Slider.vue
index bfdcb2d2a..37061c9f8 100644
--- a/src/components/Slider/Slider.vue
+++ b/src/components/Slider/Slider.vue
@@ -85,10 +85,10 @@ const onValueCommit = (value: SliderValue) => {
 const hasLabeling = computed(() => {
   return Boolean(
     props.label ||
-      slots.label ||
-      showDescription.value ||
-      slots.description ||
-      hasError.value,
+    slots.label ||
+    showDescription.value ||
+    slots.description ||
+    hasError.value,
   )
 })
 </script>
diff --git a/src/components/Slider/stories/ValueCommit.vue b/src/components/Slider/stories/ValueCommit.vue
index 8c5a3ee36..f4a410ae5 100644
--- a/src/components/Slider/stories/ValueCommit.vue
+++ b/src/components/Slider/stories/ValueCommit.vue
@@ -23,7 +23,8 @@ function onValueCommit(committed: number[]) {
       @value-commit="onValueCommit"
     />
     <p class="text-p-sm text-ink-gray-6">
-      Commits: {{ commits.length ? commits.map((c) => c.join(',')).join(' · ') : '—' }}
+      Commits:
+      {{ commits.length ? commits.map((c) => c.join(',')).join(' · ') : '—' }}
     </p>
   </div>
 </template>
diff --git a/src/components/Switch/Switch.api.md b/src/components/Switch/Switch.api.md
index 650cf2e4c..2f44da08d 100644
--- a/src/components/Switch/Switch.api.md
+++ b/src/components/Switch/Switch.api.md
@@ -93,11 +93,11 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="Switch" :data="propsData"/> 
+## API Reference
 
-<SlotsTable :data="slotsData"/> 
+<PropsTable name="Switch" :data="propsData"/>
 
-<EmitsTable :data="emitsData"/> 
+<SlotsTable :data="slotsData"/>
 
+<EmitsTable :data="emitsData"/>
diff --git a/src/components/Switch/Switch.cy.ts b/src/components/Switch/Switch.cy.ts
index c89f35694..a561ca65d 100644
--- a/src/components/Switch/Switch.cy.ts
+++ b/src/components/Switch/Switch.cy.ts
@@ -33,7 +33,7 @@ describe('Switch', () => {
     cy.mount(Switch, {
       props: {
         'onUpdate:modelValue': cy.spy().as('onUpdate'),
-        onChange: cy.spy().as('onChange'),
+        'onChange': cy.spy().as('onChange'),
       },
     })
 
diff --git a/src/components/Switch/Switch.vue b/src/components/Switch/Switch.vue
index cdf88cf8f..de47eb78b 100644
--- a/src/components/Switch/Switch.vue
+++ b/src/components/Switch/Switch.vue
@@ -42,10 +42,7 @@
         <SwitchThumb :class="switchCircleClasses" />
       </SwitchRoot>
     </div>
-    <div
-      v-if="showDescription || hasError || $slots.description"
-      class="mt-1"
-    >
+    <div v-if="showDescription || hasError || $slots.description" class="mt-1">
       <InputDescription
         v-if="showDescription || $slots.description"
         :id="descriptionId"
@@ -53,11 +50,7 @@
       >
         <slot v-if="$slots.description" name="description" />
       </InputDescription>
-      <InputError
-        v-if="hasError"
-        :id="errorMessageId"
-        :lines="errorLines"
-      />
+      <InputError v-if="hasError" :id="errorMessageId" :lines="errorLines" />
     </div>
   </div>
 </template>
diff --git a/src/components/Switch/index.ts b/src/components/Switch/index.ts
index 0cf115f9d..0d0b52dfd 100644
--- a/src/components/Switch/index.ts
+++ b/src/components/Switch/index.ts
@@ -1,2 +1,2 @@
 export { default as Switch } from './Switch.vue'
-export type { SwitchProps } from './types'
\ No newline at end of file
+export type { SwitchProps } from './types'
diff --git a/src/components/Switch/types.ts b/src/components/Switch/types.ts
index c91eca069..aba820a90 100644
--- a/src/components/Switch/types.ts
+++ b/src/components/Switch/types.ts
@@ -22,4 +22,3 @@ export interface SwitchProps extends InputLabelingProps {
    */
   labelClasses?: string
 }
-
diff --git a/src/components/TabButtons/TabButtons.api.md b/src/components/TabButtons/TabButtons.api.md
index eeefdb2a0..b7f0fee5b 100644
--- a/src/components/TabButtons/TabButtons.api.md
+++ b/src/components/TabButtons/TabButtons.api.md
@@ -27,9 +27,9 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="TabButtons" :data="propsData"/> 
+## API Reference
 
-<EmitsTable :data="emitsData"/> 
+<PropsTable name="TabButtons" :data="propsData"/>
 
+<EmitsTable :data="emitsData"/>
diff --git a/src/components/TabButtons/TabButtons.cy.ts b/src/components/TabButtons/TabButtons.cy.ts
index a465a671f..02dbdccaf 100644
--- a/src/components/TabButtons/TabButtons.cy.ts
+++ b/src/components/TabButtons/TabButtons.cy.ts
@@ -5,11 +5,11 @@ describe('<TabButtons />', () => {
   it('updates the selected value', () => {
     cy.mount(TabButtons, {
       props: {
-        buttons: [
+        'buttons': [
           { label: 'Day', value: 'day' },
           { label: 'Week', value: 'week' },
         ],
-        modelValue: 'day',
+        'modelValue': 'day',
         'onUpdate:modelValue': cy.spy().as('onUpdate'),
       },
     })
@@ -37,11 +37,11 @@ describe('<TabButtons />', () => {
   it('syncs the model with the active fallback', () => {
     cy.mount(TabButtons, {
       props: {
-        buttons: [
+        'buttons': [
           { label: 'Day', value: 'day' },
           { label: 'Week', value: 'week', active: true },
         ],
-        modelValue: 'month',
+        'modelValue': 'month',
         'onUpdate:modelValue': cy.spy().as('onUpdate'),
       },
     })
diff --git a/src/components/TabButtons/TabButtons.story.vue b/src/components/TabButtons/TabButtons.story.vue
index ba013ac92..25e68c94e 100644
--- a/src/components/TabButtons/TabButtons.story.vue
+++ b/src/components/TabButtons/TabButtons.story.vue
@@ -1,20 +1,18 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import Story from "@/components/Story.vue";
-import { TabButtons } from "frappe-ui";
-const currentTab = ref("mytasks");
+import { ref } from 'vue'
+import Story from '@/components/Story.vue'
+import { TabButtons } from 'frappe-ui'
+const currentTab = ref('mytasks')
 </script>
 
 <template>
   <div class="flex w-4/5">
     <Story>
       <TabButtons
-        :buttons='
-          [
-            { label: "Tasks assigned to me", value: "mytasks" },
-            { label: "Tasks created by me", value: "created" },
-          ]
-        '
+        :buttons="[
+          { label: 'Tasks assigned to me', value: 'mytasks' },
+          { label: 'Tasks created by me', value: 'created' },
+        ]"
         v-model="currentTab"
       />
     </Story>
diff --git a/src/components/TabButtons/index.ts b/src/components/TabButtons/index.ts
index a5e78227b..387c73d2e 100644
--- a/src/components/TabButtons/index.ts
+++ b/src/components/TabButtons/index.ts
@@ -1 +1 @@
-export { default as TabButtons } from './TabButtons.vue'
\ No newline at end of file
+export { default as TabButtons } from './TabButtons.vue'
diff --git a/src/components/Tabs/Tabs.api.md b/src/components/Tabs/Tabs.api.md
index d37dd0cfd..f01c4383f 100644
--- a/src/components/Tabs/Tabs.api.md
+++ b/src/components/Tabs/Tabs.api.md
@@ -58,11 +58,11 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="Tabs" :data="propsData"/> 
+## API Reference
 
-<SlotsTable :data="slotsData"/> 
+<PropsTable name="Tabs" :data="propsData"/>
 
-<EmitsTable :data="emitsData"/> 
+<SlotsTable :data="slotsData"/>
 
+<EmitsTable :data="emitsData"/>
diff --git a/src/components/Tabs/Tabs.cy.ts b/src/components/Tabs/Tabs.cy.ts
index 369505c0e..81538fdbe 100644
--- a/src/components/Tabs/Tabs.cy.ts
+++ b/src/components/Tabs/Tabs.cy.ts
@@ -82,7 +82,7 @@ describe('Tabs', () => {
             Tabs,
             {
               tabs,
-              modelValue: value.value,
+              'modelValue': value.value,
               'onUpdate:modelValue': (nextValue: string | number) => {
                 value.value = nextValue
               },
diff --git a/src/components/Tabs/Tabs.md b/src/components/Tabs/Tabs.md
index aa64070c2..34e1d5eae 100644
--- a/src/components/Tabs/Tabs.md
+++ b/src/components/Tabs/Tabs.md
@@ -3,9 +3,11 @@
 Organizes content into separate panels that users can switch between. Makes navigating related sections quick and intuitive.
 
 ## Orientation
+
 <ComponentPreview name="Tabs-Orientation" />
 
 ## Icons
+
 <ComponentPreview name="Tabs-Icons" />
 
 <!-- @include: ./Tabs.api.md -->
diff --git a/src/components/Tabs/Tabs.vue b/src/components/Tabs/Tabs.vue
index 99944d731..9c1b039fb 100644
--- a/src/components/Tabs/Tabs.vue
+++ b/src/components/Tabs/Tabs.vue
@@ -96,15 +96,15 @@ defineSlots<{
             :class="{ 'px-2.5': props.vertical, 'py-2.5': !props.vertical }"
           >
             <span
-              v-if="tab.icon && typeof tab.icon === 'string' && tab.icon.startsWith('lucide-')"
+              v-if="
+                tab.icon &&
+                typeof tab.icon === 'string' &&
+                tab.icon.startsWith('lucide-')
+              "
               class="size-4"
               :class="tab.icon"
             />
-            <component
-              v-else-if="tab.icon"
-              :is="tab.icon"
-              class="size-4"
-            />
+            <component v-else-if="tab.icon" :is="tab.icon" class="size-4" />
 
             {{ tab.label }}
           </component>
diff --git a/src/components/TextEditor/TextEditor.api.md b/src/components/TextEditor/TextEditor.api.md
index 51001a8db..843eea215 100644
--- a/src/components/TextEditor/TextEditor.api.md
+++ b/src/components/TextEditor/TextEditor.api.md
@@ -151,11 +151,11 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="TextEditor" :data="propsData"/> 
+## API Reference
 
-<SlotsTable :data="slotsData"/> 
+<PropsTable name="TextEditor" :data="propsData"/>
 
-<EmitsTable :data="emitsData"/> 
+<SlotsTable :data="slotsData"/>
 
+<EmitsTable :data="emitsData"/>
diff --git a/src/components/TextEditor/TextEditor.md b/src/components/TextEditor/TextEditor.md
index 9b61dacaa..2c3ffdd87 100644
--- a/src/components/TextEditor/TextEditor.md
+++ b/src/components/TextEditor/TextEditor.md
@@ -3,9 +3,11 @@
 A rich text editor based on TipTap for creating and formatting content. Offers intuitive controls, styling options, and smooth editing experience.
 
 ## Default
+
 <ComponentPreview name="TextEditor-Example" />
 
 ## Comment Editor
+
 <ComponentPreview name="TextEditor-Comment" />
 
 <!-- @include: ./TextEditor.api.md -->
diff --git a/src/components/TextEditor/commands.js b/src/components/TextEditor/commands.js
index a2ba4424d..c854d049f 100644
--- a/src/components/TextEditor/commands.js
+++ b/src/components/TextEditor/commands.js
@@ -32,7 +32,7 @@ import Table from '~icons/lucide/table-properties'
 import TableOfContentsIcon from '~icons/lucide/square-menu'
 
 export default {
-  Paragraph: {
+  'Paragraph': {
     label: 'Paragraph',
     icon: Text,
     action: (editor) => editor.chain().focus().setParagraph().run(),
@@ -93,28 +93,28 @@ export default {
     shortcut: 'Meta-Alt-6',
     isActive: (editor) => editor.isActive('heading', { level: 6 }),
   },
-  Bold: {
+  'Bold': {
     label: 'Bold',
     icon: Bold,
     action: (editor) => editor.chain().focus().toggleBold().run(),
     shortcut: 'Meta-B',
     isActive: (editor) => editor.isActive('bold'),
   },
-  Italic: {
+  'Italic': {
     label: 'Italic',
     icon: Italic,
     action: (editor) => editor.chain().focus().toggleItalic().run(),
     shortcut: 'Meta-I',
     isActive: (editor) => editor.isActive('italic'),
   },
-  Underline: {
+  'Underline': {
     label: 'Underline',
     icon: Underline,
     action: (editor) => editor.chain().focus().toggleUnderline().run(),
     shortcut: 'Meta-U',
     isActive: (editor) => editor.isActive('underline'),
   },
-  Strikethrough: {
+  'Strikethrough': {
     label: 'Strikethrough',
     icon: Strikethrough,
     action: (editor) => editor.chain().focus().toggleStrike().run(),
@@ -142,13 +142,13 @@ export default {
     shortcut: 'Meta-Shift-9',
     isActive: (editor) => editor.isActive('taskList'),
   },
-  IndentList: {
+  'IndentList': {
     label: 'Indent List',
     action: (editor) => editor.chain().focus().sinkListItem('listItem').run(),
     icon: IndentList,
     condition: (editor) => editor.can().sinkListItem('listItem'),
   },
-  DedentList: {
+  'DedentList': {
     label: 'Dedent List',
     action: (editor) => editor.chain().focus().liftListItem('listItem').run(),
     icon: DedentList,
@@ -175,21 +175,21 @@ export default {
     shortcut: 'Meta-Shift-R',
     isActive: (editor) => editor.isActive({ textAlign: 'right' }),
   },
-  FontColor: {
+  'FontColor': {
     label: 'Font Color',
     icon: FontColor,
     isActive: (editor) =>
       editor.getAttributes('textStyle')?.color || editor.isActive('highlight'),
     component: defineAsyncComponent(() => import('./components/FontColor.vue')),
   },
-  Blockquote: {
+  'Blockquote': {
     label: 'Blockquote',
     icon: DoubleQuotes,
     action: (editor) => editor.chain().focus().toggleBlockquote().run(),
     shortcut: 'Meta-Shift-B',
     isActive: (editor) => editor.isActive('blockquote'),
   },
-  Code: {
+  'Code': {
     label: 'Code',
     icon: CodeView,
     action: (editor) => editor.chain().focus().toggleCodeBlock().run(),
@@ -202,7 +202,7 @@ export default {
     action: (editor) => editor.chain().focus().setHorizontalRule().run(),
     isActive: (editor) => false,
   },
-  Link: {
+  'Link': {
     label: 'Link',
     icon: Link,
     isActive: (editor) => editor.isActive('link'),
@@ -210,7 +210,7 @@ export default {
       () => import('./components/InsertLink.vue'),
     ),
   },
-  Image: {
+  'Image': {
     label: 'Image',
     icon: Image,
     isActive: (editor) => false,
@@ -218,7 +218,7 @@ export default {
       () => import('./components/InsertImage.vue'),
     ),
   },
-  Video: {
+  'Video': {
     label: 'Video',
     icon: Video,
     isActive: (editor) => false,
@@ -226,7 +226,7 @@ export default {
       () => import('./components/InsertVideo.vue'),
     ),
   },
-  Iframe: {
+  'Iframe': {
     label: 'Embed',
     icon: GalleryVertical,
     isActive: (editor) => editor.isActive('iframe'),
@@ -234,21 +234,21 @@ export default {
       () => import('./extensions/iframe/InsertIframe.vue'),
     ),
   },
-  Undo: {
+  'Undo': {
     label: 'Undo',
     icon: Undo,
     action: (editor) => editor.chain().focus().undo().run(),
     shortcut: 'Meta-Z',
     isDisabled: (editor) => !editor.can().chain().focus().undo().run(),
   },
-  Redo: {
+  'Redo': {
     label: 'Redo',
     icon: Redo,
     action: (editor) => editor.chain().focus().redo().run(),
     shortcut: 'Meta-Shift-Z',
     isDisabled: (editor) => !editor.can().chain().focus().redo().run(),
   },
-  InsertTable: {
+  'InsertTable': {
     label: 'Insert Table',
     icon: Table,
     action: (editor) =>
@@ -259,86 +259,86 @@ export default {
         .run(),
     isActive: (editor) => editor.can().deleteTable(),
   },
-  AddColumnBefore: {
+  'AddColumnBefore': {
     label: 'Add Column Before',
     action: (editor) => editor.chain().focus().addColumnBefore().run(),
     isActive: (editor) => false,
     condition: (editor) => editor.can().addColumnBefore(),
   },
-  AddColumnAfter: {
+  'AddColumnAfter': {
     label: 'Add Column After',
     action: (editor) => editor.chain().focus().addColumnAfter().run(),
     isActive: (editor) => false,
     condition: (editor) => editor.can().addColumnAfter(),
   },
-  DeleteColumn: {
+  'DeleteColumn': {
     label: 'Delete Column',
     action: (editor) => editor.chain().focus().deleteColumn().run(),
     isActive: (editor) => false,
     condition: (editor) => editor.can().deleteColumn(),
   },
-  AddRowBefore: {
+  'AddRowBefore': {
     label: 'Add Row Before',
     action: (editor) => editor.chain().focus().addRowBefore().run(),
     isActive: (editor) => false,
     condition: (editor) => editor.can().addRowBefore(),
   },
-  AddRowAfter: {
+  'AddRowAfter': {
     label: 'Add Row After',
     action: (editor) => editor.chain().focus().addRowAfter().run(),
     isActive: (editor) => false,
     condition: (editor) => editor.can().addRowAfter(),
   },
-  DeleteRow: {
+  'DeleteRow': {
     label: 'Delete Row',
     action: (editor) => editor.chain().focus().deleteRow().run(),
     isActive: (editor) => false,
     condition: (editor) => editor.can().deleteRow(),
   },
-  DeleteTable: {
+  'DeleteTable': {
     label: 'Delete Table',
     action: (editor) => editor.chain().focus().deleteTable().run(),
     isActive: (editor) => false,
     condition: (editor) => editor.can().deleteTable(),
   },
-  MergeCells: {
+  'MergeCells': {
     label: 'Merge Cells',
     action: (editor) => editor.chain().focus().mergeCells().run(),
     isActive: (editor) => false,
     condition: (editor) => editor.can().mergeCells(),
   },
-  SplitCell: {
+  'SplitCell': {
     label: 'Split Cell',
     action: (editor) => editor.chain().focus().splitCell().run(),
     isActive: (editor) => false,
     condition: (editor) => editor.can().splitCell(),
   },
-  ToggleHeaderColumn: {
+  'ToggleHeaderColumn': {
     label: 'Toggle Header Column',
     action: (editor) => editor.chain().focus().toggleHeaderColumn().run(),
     isActive: (editor) => false,
     condition: (editor) => editor.can().toggleHeaderColumn(),
   },
-  ToggleHeaderRow: {
+  'ToggleHeaderRow': {
     label: 'Toggle Header Row',
     action: (editor) => editor.chain().focus().toggleHeaderRow().run(),
     isActive: (editor) => false,
     condition: (editor) => editor.can().toggleHeaderRow(),
   },
-  ToggleHeaderCell: {
+  'ToggleHeaderCell': {
     label: 'Toggle Header Cell',
     action: (editor) => editor.chain().focus().toggleHeaderCell().run(),
     isActive: (editor) => false,
     condition: (editor) => editor.can().toggleHeaderCell(),
   },
-  TableOfContents: {
+  'TableOfContents': {
     label: 'Table of Contents',
     icon: TableOfContentsIcon,
     action: (editor) =>
       editor.chain().focus().insertTableOfContentsNode().run(),
     isActive: (editor) => editor.isActive('tocNode'),
   },
-  Separator: {
+  'Separator': {
     type: 'separator',
   },
 }
diff --git a/src/components/TextEditor/components/CodeBlockComponent.vue b/src/components/TextEditor/components/CodeBlockComponent.vue
index ce57663cf..b21347c90 100644
--- a/src/components/TextEditor/components/CodeBlockComponent.vue
+++ b/src/components/TextEditor/components/CodeBlockComponent.vue
@@ -63,7 +63,7 @@ export default {
           }
         })
         .concat([{ label: 'html', value: 'xml' }])
-        .sort((a, b) => a.label.localeCompare(b.label))
+        .toSorted((a, b) => a.label.localeCompare(b.label))
     },
   },
 }
diff --git a/src/components/TextEditor/components/MediaNodeView.vue b/src/components/TextEditor/components/MediaNodeView.vue
index 92e607a27..c4e9a6fcf 100644
--- a/src/components/TextEditor/components/MediaNodeView.vue
+++ b/src/components/TextEditor/components/MediaNodeView.vue
@@ -33,7 +33,9 @@ const floatButtonRef = ref<HTMLElement | null>(null)
 const showCaption = ref(props.node.attrs.alt ? true : false)
 const isVideo = computed(() => props.node.type.name === 'video')
 const isUploaded = computed(() => Boolean(props.node.attrs.src))
-const fileContent = computed(() => localFileMap.get(props.node.attrs.uploadId)?.b64)
+const fileContent = computed(
+  () => localFileMap.get(props.node.attrs.uploadId)?.b64,
+)
 
 const currentAlignIcon = computed(() => {
   return (
@@ -265,36 +267,73 @@ const wrapperClasses = (float: string) => [
 </script>
 
 <template>
-  <NodeViewWrapper as="div" :class="node.attrs.float ? wrapperClasses(node.attrs.float) : 'my-2'">
-    <div ref="containerRef" class="group relative overflow-hidden not-prose rounded-[2px]" :class="[
-      {
-        'ring-2 ring-outline-gray-3 ring-offset-2': selected,
-      },
-      node.attrs.align === 'center' || !node.attrs.align ? 'mx-auto' : '',
-      node.attrs.align === 'right' ? 'ml-auto mr-0' : '',
-      node.attrs.align === 'left' ? 'mr-auto ml-0' : '',
-      !node.attrs.float && 'block max-w-full',
-    ]" :style="{
-      width: node.attrs.width ? `${node.attrs.width}px` : 'auto',
-    }">
+  <NodeViewWrapper
+    as="div"
+    :class="node.attrs.float ? wrapperClasses(node.attrs.float) : 'my-2'"
+  >
+    <div
+      ref="containerRef"
+      class="group relative overflow-hidden not-prose rounded-[2px]"
+      :class="[
+        {
+          'ring-2 ring-outline-gray-3 ring-offset-2': selected,
+        },
+        node.attrs.align === 'center' || !node.attrs.align ? 'mx-auto' : '',
+        node.attrs.align === 'right' ? 'ml-auto mr-0' : '',
+        node.attrs.align === 'left' ? 'mr-auto ml-0' : '',
+        !node.attrs.float && 'block max-w-full',
+      ]"
+      :style="{
+        width: node.attrs.width ? `${node.attrs.width}px` : 'auto',
+      }"
+    >
       <div v-if="isUploaded || fileContent" class="relative">
-        <img v-if="!isVideo" ref="mediaRef" class="rounded-[2px]" :class="!isUploaded && 'opacity-40'" :src="node.attrs.src || fileContent"
-          :alt="node.attrs.alt || ''" :width="node.attrs.width" :height="node.attrs.height"
-          @click.stop="selectMedia" @load="handleMediaLoaded" />
-        <video v-else ref="mediaRef" class="rounded-[2px]" :class="!isUploaded && 'opacity-40'" :src="node.attrs.src || fileContent"
-          :width="node.attrs.width" :height="node.attrs.height" :autoplay="node.attrs.autoplay"
-          :loop="node.attrs.loop" :muted="node.attrs.muted" :controls="isUploaded" @click.stop="selectMedia"
-          @loadedmetadata="handleMediaLoaded" />
-
-        <div v-if="isUploaded" class="absolute top-2 right-2 items-center bg-black/65 px-1.5 py-1 gap-2 rounded"
-          :class="selected && isEditable ? 'flex' : 'hidden'">
+        <img
+          v-if="!isVideo"
+          ref="mediaRef"
+          class="rounded-[2px]"
+          :class="!isUploaded && 'opacity-40'"
+          :src="node.attrs.src || fileContent"
+          :alt="node.attrs.alt || ''"
+          :width="node.attrs.width"
+          :height="node.attrs.height"
+          @click.stop="selectMedia"
+          @load="handleMediaLoaded"
+        />
+        <video
+          v-else
+          ref="mediaRef"
+          class="rounded-[2px]"
+          :class="!isUploaded && 'opacity-40'"
+          :src="node.attrs.src || fileContent"
+          :width="node.attrs.width"
+          :height="node.attrs.height"
+          :autoplay="node.attrs.autoplay"
+          :loop="node.attrs.loop"
+          :muted="node.attrs.muted"
+          :controls="isUploaded"
+          @click.stop="selectMedia"
+          @loadedmetadata="handleMediaLoaded"
+        />
+
+        <div
+          v-if="isUploaded"
+          class="absolute top-2 right-2 items-center bg-black/65 px-1.5 py-1 gap-2 rounded"
+          :class="selected && isEditable ? 'flex' : 'hidden'"
+        >
           <button>
-            <LucideCaptions @click="toggleCaptions" class="size-4"
-              :class="[showCaption ? 'text-ink-white' : 'text-ink-gray-4']" />
+            <LucideCaptions
+              @click="toggleCaptions"
+              class="size-4"
+              :class="[showCaption ? 'text-ink-white' : 'text-ink-gray-4']"
+            />
           </button>
-          <button v-if="!isVideo" @click.stop="toggleAlignPopper"
+          <button
+            v-if="!isVideo"
+            @click.stop="toggleAlignPopper"
             class="hover:text-ink-white text-ink-gray-4"
-            :class="[node.attrs.align ? 'text-ink-white' : 'text-ink-gray-4']">
+            :class="[node.attrs.align ? 'text-ink-white' : 'text-ink-gray-4']"
+          >
             <component :is="currentAlignIcon" class="size-4" />
           </button>
           <!-- <button @click.stop="toggleFloatPopper" class="hover:text-ink-white text-ink-gray-4"
@@ -302,54 +341,88 @@ const wrapperClasses = (float: string) => [
             <component :is="currentFloatIcon" class="size-4" />
           </button> -->
 
-          <div ref="alignButtonRef" v-if="showAlignPopper && !isVideo"
-            class="absolute top-full mt-1 right-6 bg-black/65 rounded shadow-lg px-1.5 py-1 z-50 gap-2.5 flex items-center">
+          <div
+            ref="alignButtonRef"
+            v-if="showAlignPopper && !isVideo"
+            class="absolute top-full mt-1 right-6 bg-black/65 rounded shadow-lg px-1.5 py-1 z-50 gap-2.5 flex items-center"
+          >
             <Tooltip text="Align left" class="h-5">
-              <button @click="setAlignment('left')" class="text-ink-gray-4 hover:text-ink-white" :class="node.attrs.align === 'left'
-                ? 'text-ink-white'
-                : 'text-ink-gray-4'
-                ">
+              <button
+                @click="setAlignment('left')"
+                class="text-ink-gray-4 hover:text-ink-white"
+                :class="
+                  node.attrs.align === 'left'
+                    ? 'text-ink-white'
+                    : 'text-ink-gray-4'
+                "
+              >
                 <LucideAlignLeft class="size-4" />
               </button>
             </Tooltip>
             <Tooltip text="Align center" class="h-5">
-              <button @click="setAlignment('center')" class="text-ink-gray-4 hover:text-ink-white" :class="node.attrs.align === 'center'
-                ? 'text-ink-white'
-                : 'text-ink-gray-4'
-                ">
+              <button
+                @click="setAlignment('center')"
+                class="text-ink-gray-4 hover:text-ink-white"
+                :class="
+                  node.attrs.align === 'center'
+                    ? 'text-ink-white'
+                    : 'text-ink-gray-4'
+                "
+              >
                 <LucideAlignCenter class="size-4" />
               </button>
             </Tooltip>
             <Tooltip text="Align right" class="h-5">
-              <button @click="setAlignment('right')" class="text-ink-gray-4 hover:text-ink-white" :class="node.attrs.align === 'right'
-                ? 'text-ink-white'
-                : 'text-ink-gray-4'
-                ">
+              <button
+                @click="setAlignment('right')"
+                class="text-ink-gray-4 hover:text-ink-white"
+                :class="
+                  node.attrs.align === 'right'
+                    ? 'text-ink-white'
+                    : 'text-ink-gray-4'
+                "
+              >
                 <LucideAlignRight class="size-4" />
               </button>
             </Tooltip>
           </div>
 
-          <div v-if="showFloatPopper" ref="floatButtonRef"
-            class="absolute top-full mt-1 right-0 bg-black/65 rounded shadow-lg px-1.5 py-1 z-50 gap-2.5 flex items-center">
+          <div
+            v-if="showFloatPopper"
+            ref="floatButtonRef"
+            class="absolute top-full mt-1 right-0 bg-black/65 rounded shadow-lg px-1.5 py-1 z-50 gap-2.5 flex items-center"
+          >
             <Tooltip text="Float left" class="h-5">
-              <button @click="setFloat('left')" class="text-ink-gray-4 hover:text-ink-white" :class="node.attrs.float === 'left'
-                ? 'text-ink-white'
-                : 'text-ink-gray-4'
-                ">
+              <button
+                @click="setFloat('left')"
+                class="text-ink-gray-4 hover:text-ink-white"
+                :class="
+                  node.attrs.float === 'left'
+                    ? 'text-ink-white'
+                    : 'text-ink-gray-4'
+                "
+              >
                 <LucideFloatLeft class="size-4" />
               </button>
             </Tooltip>
             <Tooltip text="Float right" class="h-5">
-              <button @click="setFloat('right')" class="text-ink-gray-4 hover:text-ink-white" :class="node.attrs.float === 'right'
-                ? 'text-ink-white'
-                : 'text-ink-gray-4'
-                ">
+              <button
+                @click="setFloat('right')"
+                class="text-ink-gray-4 hover:text-ink-white"
+                :class="
+                  node.attrs.float === 'right'
+                    ? 'text-ink-white'
+                    : 'text-ink-gray-4'
+                "
+              >
                 <LucideFloatRight class="size-4" />
               </button>
             </Tooltip>
             <Tooltip v-if="node.attrs.float" text="Remove float" class="h-5">
-              <button @click="setFloat(null)" class="text-ink-gray-4 hover:text-ink-white hover:bg-transparent">
+              <button
+                @click="setFloat(null)"
+                class="text-ink-gray-4 hover:text-ink-white hover:bg-transparent"
+              >
                 <LucideNoFloat class="size-4" />
               </button>
             </Tooltip>
@@ -362,35 +435,72 @@ const wrapperClasses = (float: string) => [
           class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
           :icon-left="h(LucideRotateCw, { class: 'size-4' })"
           label="Try again"
-          @click="isVideo ? editor.commands.reuploadVideo(node.attrs.uploadId) : editor.commands.reuploadImage(node.attrs.uploadId)"
+          @click="
+            isVideo
+              ? editor.commands.reuploadVideo(node.attrs.uploadId)
+              : editor.commands.reuploadImage(node.attrs.uploadId)
+          "
         />
 
-        <button v-if="selected && isEditable && isUploaded" class="absolute bottom-2 right-2 cursor-nw-resize bg-black/65 rounded p-1"
-          @mousedown.prevent="startResize">
+        <button
+          v-if="selected && isEditable && isUploaded"
+          class="absolute bottom-2 right-2 cursor-nw-resize bg-black/65 rounded p-1"
+          @mousedown.prevent="startResize"
+        >
           <LucideMoveDiagonal2 class="text-white size-4" />
         </button>
-        <div v-if="node.attrs.loading" class="inset-0 absolute flex items-center justify-center z-10">
+        <div
+          v-if="node.attrs.loading"
+          class="inset-0 absolute flex items-center justify-center z-10"
+        >
           <div
-            class="bg-gray-900/80 p-2 inset-0 leading-none rounded-sm flex flex-col items-center justify-center gap-2">
+            class="bg-gray-900/80 p-2 inset-0 leading-none rounded-sm flex flex-col items-center justify-center gap-2"
+          >
             <div class="flex items-center gap-2">
               <LoadingIndicator class="text-gray-100 size-4" />
-              <span class="text-gray-100">Uploading {{ isVideo ? 'video' : 'image' }}...</span>
+              <span class="text-gray-100"
+                >Uploading {{ isVideo ? 'video' : 'image' }}...</span
+              >
             </div>
           </div>
         </div>
       </div>
-      <div v-else class="flex flex-col items-center justify-center gap-2 border rounded text-ink-gray-6 text-sm py-5 max-w-full" :class="{ 'border-none': selected }" :style="{ width: node.attrs.width + 'px', aspectRatio: node.attrs.width && node.attrs.height ? `${node.attrs.width} / ${node.attrs.height}` : undefined,}">
-        <div class="text-ink-gray-8 text-base">This {{ isVideo ? 'video' : 'image' }} hasn't yet been uploaded.</div>
-        <div v-if="node.attrs.error" class="text-sm text-ink-red-4">Upload failed: {{ node.attrs.error }}</div>
+      <div
+        v-else
+        class="flex flex-col items-center justify-center gap-2 border rounded text-ink-gray-6 text-sm py-5 max-w-full"
+        :class="{ 'border-none': selected }"
+        :style="{
+          width: node.attrs.width + 'px',
+          aspectRatio:
+            node.attrs.width && node.attrs.height
+              ? `${node.attrs.width} / ${node.attrs.height}`
+              : undefined,
+        }"
+      >
+        <div class="text-ink-gray-8 text-base">
+          This {{ isVideo ? 'video' : 'image' }} hasn't yet been uploaded.
+        </div>
+        <div v-if="node.attrs.error" class="text-sm text-ink-red-4">
+          Upload failed: {{ node.attrs.error }}
+        </div>
       </div>
 
-      <input v-if="(node.attrs.alt || showCaption) && !node.attrs.error" v-model="caption"
+      <input
+        v-if="(node.attrs.alt || showCaption) && !node.attrs.error"
+        v-model="caption"
         class="w-full text-center bg-transparent text-sm text-ink-gray-6 h-7 border-none focus:ring-0 placeholder-ink-gray-4"
-        placeholder="Add caption" :disabled="!isEditable" @change="updateCaption" @keydown="handleKeydown" />
-
-      <div v-if="node.attrs.error && fileContent" class="w-full py-1.5 text-center">
+        placeholder="Add caption"
+        :disabled="!isEditable"
+        @change="updateCaption"
+        @keydown="handleKeydown"
+      />
+
+      <div
+        v-if="node.attrs.error && fileContent"
+        class="w-full py-1.5 text-center"
+      >
         <ErrorMessage :message="`Upload failed: ${node.attrs.error}`" />
       </div>
     </div>
   </NodeViewWrapper>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/components/TextEditor/components/TextEditorBubbleMenu.vue b/src/components/TextEditor/components/TextEditorBubbleMenu.vue
index f0d1f11e5..02c8c26ab 100644
--- a/src/components/TextEditor/components/TextEditorBubbleMenu.vue
+++ b/src/components/TextEditor/components/TextEditorBubbleMenu.vue
@@ -1,7 +1,16 @@
 <template>
-  <BubbleMenu v-if="bubbleMenuButtons" class="bubble-menu rounded-md z-[100]"
-    :class="bubbleMenuButtons.length > 1 && 'shadow-sm'" :editor="editor" v-bind="options">
-    <Menu class="rounded" :class="bubbleMenuButtons.length > 1 && 'shadow-lg'" :buttons="bubbleMenuButtons" />
+  <BubbleMenu
+    v-if="bubbleMenuButtons"
+    class="bubble-menu rounded-md z-[100]"
+    :class="bubbleMenuButtons.length > 1 && 'shadow-sm'"
+    :editor="editor"
+    v-bind="options"
+  >
+    <Menu
+      class="rounded"
+      :class="bubbleMenuButtons.length > 1 && 'shadow-lg'"
+      :buttons="bubbleMenuButtons"
+    />
   </BubbleMenu>
 </template>
 <script>
diff --git a/src/components/TextEditor/extensions/code-block.ts b/src/components/TextEditor/extensions/code-block.ts
index 68e6145df..7b131c677 100644
--- a/src/components/TextEditor/extensions/code-block.ts
+++ b/src/components/TextEditor/extensions/code-block.ts
@@ -46,7 +46,7 @@ export const ExtendedCodeBlock = CodeBlockLowlight.extend({
   },
   addKeyboardShortcuts() {
     return {
-      Tab: () => {
+      'Tab': () => {
         const { state, dispatch } = this.editor.view
         const ctx = getCodeBlockCtx(state)
         if (!ctx) return false
diff --git a/src/components/TextEditor/extensions/content-paste-extension.ts b/src/components/TextEditor/extensions/content-paste-extension.ts
index ca5ad5433..1d7da983b 100644
--- a/src/components/TextEditor/extensions/content-paste-extension.ts
+++ b/src/components/TextEditor/extensions/content-paste-extension.ts
@@ -1,8 +1,9 @@
-import { Extension, Node } from '@tiptap/core'
+import type { Node } from '@tiptap/core'
+import { Extension } from '@tiptap/core'
 import { Plugin, PluginKey } from '@tiptap/pm/state'
 import { Slice, Fragment } from '@tiptap/pm/model'
 import { DOMParser } from '@tiptap/pm/model'
-import { EditorView } from '@tiptap/pm/view'
+import type { EditorView } from '@tiptap/pm/view'
 import { detectMarkdown, markdownToHTML } from '../../../utils/markdown'
 import { processMultipleImages } from './image/image-extension'
 
diff --git a/src/components/TextEditor/extensions/emoji/emoji-extension.ts b/src/components/TextEditor/extensions/emoji/emoji-extension.ts
index 39f29641c..cec808315 100644
--- a/src/components/TextEditor/extensions/emoji/emoji-extension.ts
+++ b/src/components/TextEditor/extensions/emoji/emoji-extension.ts
@@ -1,8 +1,6 @@
 import { PluginKey } from '@tiptap/pm/state'
-import {
-  BaseSuggestionItem,
-  createSuggestionExtension,
-} from '../suggestion/createSuggestionExtension'
+import type { BaseSuggestionItem } from '../suggestion/createSuggestionExtension'
+import { createSuggestionExtension } from '../suggestion/createSuggestionExtension'
 import EmojiList from './EmojiList.vue'
 import _EMOJIS from './emojis.json'
 
@@ -21,7 +19,7 @@ export default createSuggestionExtension<EmojiItem>({
     return EMOJIS.filter((item) =>
       item.name.toLowerCase().includes(query.toLowerCase()),
     )
-      .sort((a, b) => {
+      .toSorted((a, b) => {
         const aName = a.name.toLowerCase()
         const bName = b.name.toLowerCase()
         const queryLower = query.toLowerCase()
diff --git a/src/components/TextEditor/extensions/iframe/IframeNodeView.vue b/src/components/TextEditor/extensions/iframe/IframeNodeView.vue
index 44f3331eb..b88d0a2c4 100644
--- a/src/components/TextEditor/extensions/iframe/IframeNodeView.vue
+++ b/src/components/TextEditor/extensions/iframe/IframeNodeView.vue
@@ -14,7 +14,7 @@ const containerRef = ref<HTMLDivElement | null>(null)
 const isResizing = ref(false)
 const startDragX = ref(0)
 const startWidth = ref(0)
-const originalAspectRatio = ref(9/16) // Default 16:9
+const originalAspectRatio = ref(9 / 16) // Default 16:9
 const isEditable = ref(false)
 
 function selectIframe() {
@@ -28,19 +28,19 @@ const platformInfo = computed(() => {
     const aspectInfo = calculateAspectRatio(props.node.attrs.src)
     return {
       platform: platform?.name || 'Generic',
-      aspectRatio: aspectInfo.ratio
+      aspectRatio: aspectInfo.ratio,
     }
   }
-  return { platform: 'Generic', aspectRatio: 9/16 }
+  return { platform: 'Generic', aspectRatio: 9 / 16 }
 })
 
 const iframeStyles = computed(() => {
   const width = props.node.attrs.width || 640
-  const height = props.node.attrs.height || (width * originalAspectRatio.value)
+  const height = props.node.attrs.height || width * originalAspectRatio.value
 
   return {
     width: `${width}px`,
-    height: `${height}px`
+    height: `${height}px`,
   }
 })
 
@@ -68,14 +68,15 @@ function startResize(event: MouseEvent) {
   selectIframe()
   isResizing.value = true
   startDragX.value = event.clientX
-  startWidth.value = containerRef.value?.offsetWidth || props.node.attrs.width || 640
+  startWidth.value =
+    containerRef.value?.offsetWidth || props.node.attrs.width || 640
 
   // Use stored aspect ratio or calculate from current dimensions
   if (props.node.attrs.aspectRatio) {
     originalAspectRatio.value = props.node.attrs.aspectRatio
   } else {
     const width = props.node.attrs.width || startWidth.value
-    const height = props.node.attrs.height || (width * originalAspectRatio.value)
+    const height = props.node.attrs.height || width * originalAspectRatio.value
     if (width && height) {
       originalAspectRatio.value = height / width
     }
@@ -125,7 +126,7 @@ function stopResize() {
     props.updateAttributes({
       width: finalWidth,
       height: finalHeight,
-      aspectRatio: originalAspectRatio.value
+      aspectRatio: originalAspectRatio.value,
     })
 
     // Clear temporary styles immediately (like image extension)
@@ -194,7 +195,7 @@ function setCursorBeforeIframe() {
       ]"
       :style="{
         width: node.attrs.width ? `${node.attrs.width}px` : 'auto',
-        maxWidth: '100%'
+        maxWidth: '100%',
       }"
       @keydown="handleKeydown"
       tabindex="0"
@@ -236,7 +237,7 @@ function setCursorBeforeIframe() {
               @click.stop="setAlignment('left')"
               :class="[
                 'px-1.5 py-1 text-ink-gray-4 hover:text-white transition-colors duration-150',
-                { 'text-white': node.attrs.align === 'left' }
+                { 'text-white': node.attrs.align === 'left' },
               ]"
               title="Align Left"
             >
@@ -246,7 +247,7 @@ function setCursorBeforeIframe() {
               @click.stop="setAlignment('center')"
               :class="[
                 'px-1.5 py-1 text-ink-gray-4 hover:text-white transition-colors duration-150',
-                { 'text-white': node.attrs.align === 'center' }
+                { 'text-white': node.attrs.align === 'center' },
               ]"
               title="Align Center"
             >
@@ -256,7 +257,7 @@ function setCursorBeforeIframe() {
               @click.stop="setAlignment('right')"
               :class="[
                 'px-1.5 py-1 text-ink-gray-4 hover:text-white transition-colors duration-150',
-                { 'text-white': node.attrs.align === 'right' }
+                { 'text-white': node.attrs.align === 'right' },
               ]"
               title="Align Right"
             >
@@ -275,7 +276,6 @@ function setCursorBeforeIframe() {
           </button>
         </div>
 
-
         <!-- Loading state for new embeds -->
         <div
           v-if="!node.attrs.src"
@@ -295,7 +295,12 @@ function setCursorBeforeIframe() {
         class="w-full text-center bg-transparent text-sm text-ink-gray-6 h-7 border-0 mt-2 focus:outline-none focus:ring-0 placeholder-ink-gray-4 disabled:opacity-60"
         placeholder="Add caption"
         :disabled="!isEditable"
-        @input="(e) => props.updateAttributes({ title: (e.target as HTMLInputElement).value })"
+        @input="
+          (e) =>
+            props.updateAttributes({
+              title: (e.target as HTMLInputElement).value,
+            })
+        "
         @keydown="handleKeydown"
       />
     </div>
diff --git a/src/components/TextEditor/extensions/iframe/InsertIframe.vue b/src/components/TextEditor/extensions/iframe/InsertIframe.vue
index 7d5a513be..301134d48 100644
--- a/src/components/TextEditor/extensions/iframe/InsertIframe.vue
+++ b/src/components/TextEditor/extensions/iframe/InsertIframe.vue
@@ -60,10 +60,9 @@ import {
   detectPlatform,
   calculateAspectRatio,
   getOptimalDimensions,
-  ALLOWED_DOMAINS
+  ALLOWED_DOMAINS,
 } from './utils'
 
-
 const props = defineProps<{
   editor: Editor
 }>()
@@ -88,7 +87,7 @@ const isValidUrl = computed(() => {
       if (srcMatch?.[1]) {
         return validateURL(srcMatch[1], {
           allowedDomains: ALLOWED_DOMAINS,
-          HTMLAttributes: {}
+          HTMLAttributes: {},
         })
       }
       return false
@@ -97,7 +96,7 @@ const isValidUrl = computed(() => {
     // Handle direct URLs
     return validateURL(embedUrl.value, {
       allowedDomains: ALLOWED_DOMAINS,
-      HTMLAttributes: {}
+      HTMLAttributes: {},
     })
   } catch {
     return false
@@ -120,14 +119,15 @@ const processedUrl = computed(() => {
 })
 
 const platformInfo = computed(() => {
-  if (!embedUrl.value || !isValidUrl.value) return { platform: 'Generic', aspectRatio: 9/16 }
+  if (!embedUrl.value || !isValidUrl.value)
+    return { platform: 'Generic', aspectRatio: 9 / 16 }
 
   const platform = detectPlatform(processedUrl.value)
   const aspectInfo = calculateAspectRatio(processedUrl.value)
 
   return {
     platform: platform?.name || 'Generic',
-    aspectRatio: aspectInfo.ratio
+    aspectRatio: aspectInfo.ratio,
   }
 })
 
@@ -180,14 +180,15 @@ function insertIframe() {
     width: customWidth.value,
     height: customHeight.value,
     title: title.value,
-    align: alignment.value
+    align: alignment.value,
   })
 
   if (success) {
     showDialog.value = false
     props.editor.commands.focus()
   } else {
-    urlError.value = 'Failed to insert embed. Please check the URL and try again.'
+    urlError.value =
+      'Failed to insert embed. Please check the URL and try again.'
   }
 }
 
@@ -198,12 +199,18 @@ function handleSlashCommandInsert(event: CustomEvent) {
 }
 
 onMounted(() => {
-  props.editor.view.dom.addEventListener('iframe:open-dialog', handleSlashCommandInsert as EventListener)
+  props.editor.view.dom.addEventListener(
+    'iframe:open-dialog',
+    handleSlashCommandInsert as EventListener,
+  )
 })
 
 onUnmounted(() => {
   try {
-  props.editor.view.dom.removeEventListener('iframe:open-dialog', handleSlashCommandInsert as EventListener)
+    props.editor.view.dom.removeEventListener(
+      'iframe:open-dialog',
+      handleSlashCommandInsert as EventListener,
+    )
   } catch {}
 })
 </script>
diff --git a/src/components/TextEditor/extensions/iframe/iframe-extension.ts b/src/components/TextEditor/extensions/iframe/iframe-extension.ts
index fa1b621bc..9f549601c 100644
--- a/src/components/TextEditor/extensions/iframe/iframe-extension.ts
+++ b/src/components/TextEditor/extensions/iframe/iframe-extension.ts
@@ -2,7 +2,12 @@ import { Node, mergeAttributes } from '@tiptap/core'
 import { VueNodeViewRenderer } from '@tiptap/vue-3'
 import { Plugin, PluginKey } from '@tiptap/pm/state'
 import IframeNodeView from './IframeNodeView.vue'
-import { validateURL, processURL, getOptimalDimensions, ALLOWED_DOMAINS } from './utils'
+import {
+  validateURL,
+  processURL,
+  getOptimalDimensions,
+  ALLOWED_DOMAINS,
+} from './utils'
 
 // Constants for iframe constraints
 const MIN_IFRAME_WIDTH = 200
@@ -80,7 +85,7 @@ export const IframeExtension = Node.create<IframeOptions>({
         }),
       },
       aspectRatio: {
-        default: 9/16, // Default 16:9 aspect ratio
+        default: 9 / 16, // Default 16:9 aspect ratio
         parseHTML: () => null, // Don't parse from HTML
         renderHTML: () => ({}), // Don't render to HTML
       },
@@ -155,7 +160,7 @@ export const IframeExtension = Node.create<IframeOptions>({
             width: width ? parseInt(width, 10) : null,
             height: height ? parseInt(height, 10) : null,
             title: title || null,
-            align: align || 'center'
+            align: align || 'center',
           }
         },
       },
@@ -196,7 +201,10 @@ export const IframeExtension = Node.create<IframeOptions>({
           // Calculate optimal dimensions if not provided
           const editorElement = editor.view.dom
           const editorWidth = editorElement?.clientWidth || 800
-          const optimalDimensions = getOptimalDimensions(processedSrc, editorWidth)
+          const optimalDimensions = getOptimalDimensions(
+            processedSrc,
+            editorWidth,
+          )
 
           const attrs = {
             src: processedSrc,
@@ -210,7 +218,7 @@ export const IframeExtension = Node.create<IframeOptions>({
 
           return commands.insertContent({
             type: this.name,
-            attrs
+            attrs,
           })
         },
 
@@ -227,7 +235,7 @@ export const IframeExtension = Node.create<IframeOptions>({
           // Emit a custom event on the editor's view DOM element
           // This is more localized than document.dispatchEvent
           const event = new CustomEvent('iframe:open-dialog', {
-            detail: { editor }
+            detail: { editor },
           })
           editor.view.dom.dispatchEvent(event)
           return true
@@ -251,7 +259,14 @@ export const IframeExtension = Node.create<IframeOptions>({
             if (html) {
               const iframeData = parseIframeFromHTML(html)
               if (iframeData) {
-                return createIframeNode(view, extensionThis, iframeData.src, iframeData.width, iframeData.height, iframeData.title)
+                return createIframeNode(
+                  view,
+                  extensionThis,
+                  iframeData.src,
+                  iframeData.width,
+                  iframeData.height,
+                  iframeData.title,
+                )
               }
             }
 
@@ -259,14 +274,22 @@ export const IframeExtension = Node.create<IframeOptions>({
             if (text && text.includes('<iframe')) {
               const iframeData = parseIframeFromHTML(text)
               if (iframeData) {
-                return createIframeNode(view, extensionThis, iframeData.src, iframeData.width, iframeData.height, iframeData.title)
+                return createIframeNode(
+                  view,
+                  extensionThis,
+                  iframeData.src,
+                  iframeData.width,
+                  iframeData.height,
+                  iframeData.title,
+                )
               }
             }
 
             // Fallback to URL detection for plain text
             if (text) {
               // Check if pasted text is a supported embed URL
-              const urlPattern = /^https?:\/\/(?:www\.)?(?:youtube\.com\/watch\?v=[\w-]+|youtu\.be\/[\w-]+|youtube\.com\/embed\/[\w-]+|vimeo\.com\/\d+|player\.vimeo\.com\/video\/\d+|codepen\.io\/[\w-]+\/pen\/[\w-]+|codesandbox\.io\/[\w\/.-]+|figma\.com\/[\w\/.-]+|embed\.figma\.com\/[\w\/.-]+)$/
+              const urlPattern =
+                /^https?:\/\/(?:www\.)?(?:youtube\.com\/watch\?v=[\w-]+|youtu\.be\/[\w-]+|youtube\.com\/embed\/[\w-]+|vimeo\.com\/\d+|player\.vimeo\.com\/video\/\d+|codepen\.io\/[\w-]+\/pen\/[\w-]+|codesandbox\.io\/[\w/.-]+|figma\.com\/[\w/.-]+|embed\.figma\.com\/[\w/.-]+)$/
 
               if (urlPattern.test(text.trim())) {
                 return createIframeNode(view, extensionThis, text.trim())
@@ -282,7 +305,9 @@ export const IframeExtension = Node.create<IframeOptions>({
 })
 
 // Helper function to parse iframe embed codes from pasted HTML content
-function parseIframeFromHTML(html: string): { src: string, width?: number, height?: number, title?: string } | null {
+function parseIframeFromHTML(
+  html: string,
+): { src: string; width?: number; height?: number; title?: string } | null {
   try {
     const parser = new DOMParser()
     const doc = parser.parseFromString(html, 'text/html')
@@ -301,7 +326,7 @@ function parseIframeFromHTML(html: string): { src: string, width?: number, heigh
           src,
           width: widthMatch ? parseInt(widthMatch[1], 10) : undefined,
           height: heightMatch ? parseInt(heightMatch[1], 10) : undefined,
-          title: titleMatch ? titleMatch[1] : undefined
+          title: titleMatch ? titleMatch[1] : undefined,
         }
       }
       return null
@@ -310,8 +335,12 @@ function parseIframeFromHTML(html: string): { src: string, width?: number, heigh
     const src = iframe.getAttribute('src')
     if (!src) return null
 
-    const width = iframe.getAttribute('width') ? parseInt(iframe.getAttribute('width')!, 10) : undefined
-    const height = iframe.getAttribute('height') ? parseInt(iframe.getAttribute('height')!, 10) : undefined
+    const width = iframe.getAttribute('width')
+      ? parseInt(iframe.getAttribute('width')!, 10)
+      : undefined
+    const height = iframe.getAttribute('height')
+      ? parseInt(iframe.getAttribute('height')!, 10)
+      : undefined
     const title = iframe.getAttribute('title') || undefined
 
     return { src, width, height, title }
@@ -321,9 +350,18 @@ function parseIframeFromHTML(html: string): { src: string, width?: number, heigh
 }
 
 // Helper function to create iframe node from parsed data
-function createIframeNode(view: any, extensionThis: any, src: string, width?: number, height?: number, title?: string) {
+function createIframeNode(
+  view: any,
+  extensionThis: any,
+  src: string,
+  width?: number,
+  height?: number,
+  title?: string,
+) {
   // Ask user for confirmation before creating iframe
-  const shouldCreateEmbed = confirm(`Do you want to embed this content?\n\nURL: ${src}\n\nClick "OK" to create an embed, or "Cancel" to paste as plain text.`)
+  const shouldCreateEmbed = confirm(
+    `Do you want to embed this content?\n\nURL: ${src}\n\nClick "OK" to create an embed, or "Cancel" to paste as plain text.`,
+  )
 
   if (!shouldCreateEmbed) {
     return false // Allow default paste behavior (paste as text)
@@ -339,8 +377,10 @@ function createIframeNode(view: any, extensionThis: any, src: string, width?: nu
   const editorWidth = editorElement?.clientWidth || 800
 
   // Use provided dimensions or calculate optimal ones
-  const finalWidth = width || getOptimalDimensions(processedUrl, editorWidth).width
-  const finalHeight = height || getOptimalDimensions(processedUrl, editorWidth).height
+  const finalWidth =
+    width || getOptimalDimensions(processedUrl, editorWidth).width
+  const finalHeight =
+    height || getOptimalDimensions(processedUrl, editorWidth).height
 
   const attrs = {
     src: processedUrl,
@@ -348,7 +388,7 @@ function createIframeNode(view: any, extensionThis: any, src: string, width?: nu
     height: finalHeight,
     title: title,
     align: 'center' as const,
-    aspectRatio: finalHeight / finalWidth
+    aspectRatio: finalHeight / finalWidth,
   }
 
   const node = view.state.schema.nodes.iframe.create(attrs)
diff --git a/src/components/TextEditor/extensions/iframe/index.ts b/src/components/TextEditor/extensions/iframe/index.ts
index 39accb8d5..a92485e5b 100644
--- a/src/components/TextEditor/extensions/iframe/index.ts
+++ b/src/components/TextEditor/extensions/iframe/index.ts
@@ -6,6 +6,6 @@ export {
   getOptimalDimensions,
   validateURL,
   processURL,
-  ALLOWED_DOMAINS
+  ALLOWED_DOMAINS,
 } from './utils'
 export type { AspectRatioInfo, PlatformConfig } from './utils'
diff --git a/src/components/TextEditor/extensions/iframe/utils.ts b/src/components/TextEditor/extensions/iframe/utils.ts
index 4ef20fa4e..7d67910f9 100644
--- a/src/components/TextEditor/extensions/iframe/utils.ts
+++ b/src/components/TextEditor/extensions/iframe/utils.ts
@@ -1,5 +1,4 @@
-import { IframeOptions } from './iframe-extension'
-
+import type { IframeOptions } from './iframe-extension'
 
 export const ALLOWED_DOMAINS = [
   'youtube.com',
@@ -36,45 +35,45 @@ export interface PlatformConfig {
 const PLATFORM_CONFIGS: PlatformConfig[] = [
   {
     name: 'YouTube',
-    ratio: 9/16, // 16:9 aspect ratio
+    ratio: 9 / 16, // 16:9 aspect ratio
     defaultWidth: 640,
-    urlPatterns: ['youtube.com', 'youtu.be', 'youtube-nocookie.com']
+    urlPatterns: ['youtube.com', 'youtu.be', 'youtube-nocookie.com'],
   },
   {
     name: 'Vimeo',
-    ratio: 9/16, // 16:9 aspect ratio
+    ratio: 9 / 16, // 16:9 aspect ratio
     defaultWidth: 640,
-    urlPatterns: ['vimeo.com', 'player.vimeo.com']
+    urlPatterns: ['vimeo.com', 'player.vimeo.com'],
   },
   {
     name: 'CodePen',
-    ratio: 3/2, // 2:3 aspect ratio (taller for code demos)
+    ratio: 3 / 2, // 2:3 aspect ratio (taller for code demos)
     defaultWidth: 500,
-    urlPatterns: ['codepen.io']
+    urlPatterns: ['codepen.io'],
   },
   {
     name: 'CodeSandbox',
-    ratio: 3/2, // 2:3 aspect ratio
+    ratio: 3 / 2, // 2:3 aspect ratio
     defaultWidth: 500,
-    urlPatterns: ['codesandbox.io']
+    urlPatterns: ['codesandbox.io'],
   },
   {
     name: 'Figma',
-    ratio: 9/16, // 16:9 default for design embeds
+    ratio: 9 / 16, // 16:9 default for design embeds
     defaultWidth: 800,
-    urlPatterns: ['figma.com', 'www.figma.com', 'embed.figma.com']
+    urlPatterns: ['figma.com', 'www.figma.com', 'embed.figma.com'],
   },
   {
     name: 'Google Docs',
-    ratio: 4/3, // 4:3 for documents
+    ratio: 4 / 3, // 4:3 for documents
     defaultWidth: 600,
-    urlPatterns: ['docs.google.com', 'drive.google.com']
+    urlPatterns: ['docs.google.com', 'drive.google.com'],
   },
   {
     name: 'Notion',
-    ratio: 4/3, // 4:3 for pages
+    ratio: 4 / 3, // 4:3 for pages
     defaultWidth: 600,
-    urlPatterns: ['notion.so', 'www.notion.so']
+    urlPatterns: ['notion.so', 'www.notion.so'],
   },
 ]
 
@@ -83,9 +82,11 @@ export function detectPlatform(url: string): PlatformConfig | null {
     const urlObj = new URL(url)
     const domain = urlObj.hostname.toLowerCase()
 
-    return PLATFORM_CONFIGS.find(config =>
-      config.urlPatterns.some(pattern => domain.includes(pattern))
-    ) || null
+    return (
+      PLATFORM_CONFIGS.find((config) =>
+        config.urlPatterns.some((pattern) => domain.includes(pattern)),
+      ) || null
+    )
   } catch {
     return null
   }
@@ -99,35 +100,41 @@ export function calculateAspectRatio(url: string): AspectRatioInfo {
       ratio: platform.ratio,
       width: platform.defaultWidth,
       height: Math.round(platform.defaultWidth * platform.ratio),
-      platform: platform.name
+      platform: platform.name,
     }
   }
 
   // Default to 16:9 for unknown platforms
   return {
-    ratio: 9/16,
+    ratio: 9 / 16,
     width: 640,
     height: 360,
-    platform: 'Generic'
+    platform: 'Generic',
   }
 }
 
-export function getOptimalDimensions(url: string, containerWidth?: number): { width: number, height: number } {
+export function getOptimalDimensions(
+  url: string,
+  containerWidth?: number,
+): { width: number; height: number } {
   const aspectInfo = calculateAspectRatio(url)
 
   // If container width is provided, scale to fit
   if (containerWidth) {
     const CONTAINER_PADDING = 40 // px for editor padding
-    const maxWidth = Math.min(containerWidth - CONTAINER_PADDING, aspectInfo.width)
+    const maxWidth = Math.min(
+      containerWidth - CONTAINER_PADDING,
+      aspectInfo.width,
+    )
     return {
       width: maxWidth,
-      height: Math.round(maxWidth * aspectInfo.ratio)
+      height: Math.round(maxWidth * aspectInfo.ratio),
     }
   }
 
   return {
     width: aspectInfo.width,
-    height: aspectInfo.height
+    height: aspectInfo.height,
   }
 }
 
@@ -145,7 +152,7 @@ export function validateURL(url: string, options: IframeOptions): boolean {
     // If allowedDomains is specified, check if domain is allowed
     if (options.allowedDomains?.length) {
       return options.allowedDomains.some((allowed) =>
-        domain.includes(allowed.toLowerCase())
+        domain.includes(allowed.toLowerCase()),
       )
     }
 
@@ -240,7 +247,7 @@ function convertToCodePenEmbed(url: string): string {
       return url
     }
 
-    const match = url.match(/codepen\.io\/([^\/]+)\/pen\/([^\/\?]+)/)
+    const match = url.match(/codepen\.io\/([^/]+)\/pen\/([^/\?]+)/)
     if (match?.[1] && match?.[2]) {
       return `https://codepen.io/${match[1]}/embed/${match[2]}?default-tab=result`
     }
@@ -256,7 +263,10 @@ function convertToFigmaEmbed(url: string): string {
     const urlObj = new URL(url)
 
     // Convert direct Figma links to embed URLs
-    if (urlObj.hostname === 'www.figma.com' || urlObj.hostname === 'figma.com') {
+    if (
+      urlObj.hostname === 'www.figma.com' ||
+      urlObj.hostname === 'figma.com'
+    ) {
       // Convert https://www.figma.com/design/... to https://embed.figma.com/design/...
       if (urlObj.pathname.startsWith('/design/')) {
         urlObj.hostname = 'embed.figma.com'
diff --git a/src/components/TextEditor/extensions/image-group/ImageGroupNodeView.vue b/src/components/TextEditor/extensions/image-group/ImageGroupNodeView.vue
index 863e8ee82..52255f7ab 100644
--- a/src/components/TextEditor/extensions/image-group/ImageGroupNodeView.vue
+++ b/src/components/TextEditor/extensions/image-group/ImageGroupNodeView.vue
@@ -8,25 +8,48 @@
           </template>
           Edit
         </Button>
-        <Select :options="selectOptions" v-model="internalColumns" size="sm" variant="subtle" class="w-28" />
+        <Select
+          :options="selectOptions"
+          v-model="internalColumns"
+          size="sm"
+          variant="subtle"
+          class="w-28"
+        />
       </div>
       <div class="grid gap-px" :style="gridStyle">
-        <div v-for="(img, idx) in images" :key="img.attrs.src + idx"
-          class="relative aspect-square w-full h-full overflow-hidden bg-surface-white group">
-          <button v-if="isEditable" type="button"
+        <div
+          v-for="(img, idx) in images"
+          :key="img.attrs.src + idx"
+          class="relative aspect-square w-full h-full overflow-hidden bg-surface-white group"
+        >
+          <button
+            v-if="isEditable"
+            type="button"
             class="absolute top-1 right-1 z-10 bg-white/80 hover:bg-white rounded-full p-1 shadow transition-opacity opacity-0 group-hover:opacity-100 focus:opacity-100"
-            aria-label="Remove image" @click.stop="removeImage(idx)">
+            aria-label="Remove image"
+            @click.stop="removeImage(idx)"
+          >
             <LucideX class="w-4 h-4 text-gray-700" />
           </button>
-          <img :src="img.attrs.src" :alt="img.attrs.alt || ''"
-            class="object-cover w-full h-full not-prose cursor-pointer rounded-[2px]" v-if="!isEditable"
-            @click="openViewer(idx)" />
-          <img v-else :src="img.attrs.src" :alt="img.attrs.alt || ''"
-            class="object-cover w-full h-full not-prose rounded-[2px]" />
+          <img
+            :src="img.attrs.src"
+            :alt="img.attrs.alt || ''"
+            class="object-cover w-full h-full not-prose cursor-pointer rounded-[2px]"
+            v-if="!isEditable"
+            @click="openViewer(idx)"
+          />
+          <img
+            v-else
+            :src="img.attrs.src"
+            :alt="img.attrs.alt || ''"
+            class="object-cover w-full h-full not-prose rounded-[2px]"
+          />
 
           <!-- Caption overlay (visible when there's alt text) -->
-          <div v-if="img.attrs.alt"
-            class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent rounded-b-[2px] opacity-0 group-hover:opacity-100 transition-opacity">
+          <div
+            v-if="img.attrs.alt"
+            class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent rounded-b-[2px] opacity-0 group-hover:opacity-100 transition-opacity"
+          >
             <div class="p-2">
               <div class="text-white text-xs truncate" :title="img.attrs.alt">
                 {{ img.attrs.alt }}
@@ -35,11 +58,23 @@
           </div>
         </div>
       </div>
-      <ImageViewerModal v-if="showViewer" v-model:show="showViewer" :images="viewerImages"
-        :initialIndex="viewerIndex" />
-      <ImageGroupUploadDialog v-if="showEditModal" v-model="showEditModal" :files="editFiles" :editor="props.editor"
-        mode="edit" :existingImages="existingImages" :initialColumns="columns" @close="handleEditModalClose"
-        @save="handleEditSave" />
+      <ImageViewerModal
+        v-if="showViewer"
+        v-model:show="showViewer"
+        :images="viewerImages"
+        :initialIndex="viewerIndex"
+      />
+      <ImageGroupUploadDialog
+        v-if="showEditModal"
+        v-model="showEditModal"
+        :files="editFiles"
+        :editor="props.editor"
+        mode="edit"
+        :existingImages="existingImages"
+        :initialColumns="columns"
+        @close="handleEditModalClose"
+        @save="handleEditSave"
+      />
       <slot />
     </div>
   </NodeViewWrapper>
diff --git a/src/components/TextEditor/extensions/image-group/ImageGroupUploadDialog.vue b/src/components/TextEditor/extensions/image-group/ImageGroupUploadDialog.vue
index 19c7beb25..a77b8fac6 100644
--- a/src/components/TextEditor/extensions/image-group/ImageGroupUploadDialog.vue
+++ b/src/components/TextEditor/extensions/image-group/ImageGroupUploadDialog.vue
@@ -500,13 +500,15 @@ function addFiles(files: File[]) {
   const imageFiles = files.filter((file) => file.type.startsWith('image/'))
   const newImageItems = imageFiles.map(createImageItem)
 
-  const existingFileSignatures = images.value
-    .filter((item) => item.type === 'file' && item.file)
-    .map((item) => `${item.file!.name}-${item.file!.size}`)
+  const existingFileSignatures = new Set(
+    images.value
+      .filter((item) => item.type === 'file' && item.file)
+      .map((item) => `${item.file!.name}-${item.file!.size}`),
+  )
 
   const uniqueNewItems = newImageItems.filter(
     (item) =>
-      !existingFileSignatures.includes(`${item.file!.name}-${item.file!.size}`),
+      !existingFileSignatures.has(`${item.file!.name}-${item.file!.size}`),
   )
 
   images.value.push(...uniqueNewItems)
diff --git a/src/components/TextEditor/extensions/image-group/image-group-extension.ts b/src/components/TextEditor/extensions/image-group/image-group-extension.ts
index 37a303e65..d745eb1be 100644
--- a/src/components/TextEditor/extensions/image-group/image-group-extension.ts
+++ b/src/components/TextEditor/extensions/image-group/image-group-extension.ts
@@ -1,7 +1,7 @@
 import { Node, mergeAttributes } from '@tiptap/core'
 import { VueNodeViewRenderer } from '@tiptap/vue-3'
 import ImageGroupNodeView from './ImageGroupNodeView.vue'
-import { UploadedFile } from '../../../../utils/useFileUpload'
+import type { UploadedFile } from '../../../../utils/useFileUpload'
 
 export interface ImageGroupOptions {
   /**
@@ -140,7 +140,7 @@ export const ImageGroup = Node.create<ImageGroupOptions>({
           }
 
           // Sort by position (descending) for deletion
-          const sortedImages = [...images].sort((a, b) => b.pos - a.pos)
+          const sortedImages = [...images].toSorted((a, b) => b.pos - a.pos)
 
           // Find the position to insert the group (start of selection)
           const insertPos = Math.min(...images.map((img) => img.pos))
diff --git a/src/components/TextEditor/extensions/image-viewer-extension.ts b/src/components/TextEditor/extensions/image-viewer-extension.ts
index d71d8cde8..8d70820c2 100644
--- a/src/components/TextEditor/extensions/image-viewer-extension.ts
+++ b/src/components/TextEditor/extensions/image-viewer-extension.ts
@@ -139,7 +139,7 @@ function openImageViewerModal(images: ImageInfo[], initialIndex: number) {
   const app = createApp({
     render() {
       return h(ImageViewerModal, {
-        show: true,
+        'show': true,
         images, // Pass the collected image data
         initialIndex, // Pass the starting index
         'onUpdate:show': (value: boolean) => {
diff --git a/src/components/TextEditor/extensions/image/image-extension.ts b/src/components/TextEditor/extensions/image/image-extension.ts
index f98a63330..9075c320d 100644
--- a/src/components/TextEditor/extensions/image/image-extension.ts
+++ b/src/components/TextEditor/extensions/image/image-extension.ts
@@ -5,11 +5,12 @@ import {
 } from '@tiptap/core'
 import { VueNodeViewRenderer } from '@tiptap/vue-3'
 import MediaNodeView from '../../components/MediaNodeView.vue'
-import { Plugin, Selection, Transaction, EditorState } from '@tiptap/pm/state'
-import { EditorView } from '@tiptap/pm/view'
-import { Node } from '@tiptap/pm/model'
+import type { Transaction, EditorState } from '@tiptap/pm/state'
+import { Plugin, Selection } from '@tiptap/pm/state'
+import type { EditorView } from '@tiptap/pm/view'
+import type { Node } from '@tiptap/pm/model'
 import { fileToBase64 } from '../../../../index'
-import { UploadedFile } from '../../../../utils/useFileUpload'
+import type { UploadedFile } from '../../../../utils/useFileUpload'
 
 export const localFileMap = new Map()
 
diff --git a/src/components/TextEditor/extensions/link/link-extension.ts b/src/components/TextEditor/extensions/link/link-extension.ts
index 34101ce72..8d42992aa 100644
--- a/src/components/TextEditor/extensions/link/link-extension.ts
+++ b/src/components/TextEditor/extensions/link/link-extension.ts
@@ -1,8 +1,9 @@
 import { createApp, h } from 'vue'
 import Link from '@tiptap/extension-link'
 import tippy, { type Instance as TippyInstance } from 'tippy.js'
-import { getMarkRange, Range, Editor } from '@tiptap/core'
-import { MarkType } from '@tiptap/pm/model'
+import type { Range, Editor } from '@tiptap/core'
+import { getMarkRange } from '@tiptap/core'
+import type { MarkType } from '@tiptap/pm/model'
 import { Plugin, PluginKey } from '@tiptap/pm/state'
 import LinkPopup from '../../components/LinkPopup.vue'
 import { linkPasteHandler } from './linkPasteHandler'
diff --git a/src/components/TextEditor/extensions/link/linkPasteHandler.ts b/src/components/TextEditor/extensions/link/linkPasteHandler.ts
index 8ba697549..c15590f28 100644
--- a/src/components/TextEditor/extensions/link/linkPasteHandler.ts
+++ b/src/components/TextEditor/extensions/link/linkPasteHandler.ts
@@ -1,5 +1,5 @@
-import { Editor } from '@tiptap/core'
-import { MarkType } from '@tiptap/pm/model'
+import type { Editor } from '@tiptap/core'
+import type { MarkType } from '@tiptap/pm/model'
 import { Plugin, PluginKey } from '@tiptap/pm/state'
 import { isValidUrl } from '../../../../utils/url-validation'
 
diff --git a/src/components/TextEditor/extensions/mention/mention-extension.ts b/src/components/TextEditor/extensions/mention/mention-extension.ts
index 18e256719..3e2b2b251 100644
--- a/src/components/TextEditor/extensions/mention/mention-extension.ts
+++ b/src/components/TextEditor/extensions/mention/mention-extension.ts
@@ -1,11 +1,10 @@
-import { MaybeRefOrGetter, toValue, type Component } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
+import { toValue, type Component } from 'vue'
 import { Extension, Node, mergeAttributes } from '@tiptap/core'
 import { VueNodeViewRenderer } from '@tiptap/vue-3'
 import { PluginKey } from '@tiptap/pm/state'
-import {
-  createSuggestionExtension,
-  BaseSuggestionItem,
-} from '../suggestion/createSuggestionExtension'
+import type { BaseSuggestionItem } from '../suggestion/createSuggestionExtension'
+import { createSuggestionExtension } from '../suggestion/createSuggestionExtension'
 import SuggestionList from '../suggestion/SuggestionList.vue'
 import './style.css'
 
@@ -75,7 +74,7 @@ function createMentionNode(component?: Component) {
       return [
         'span',
         mergeAttributes(HTMLAttributes, {
-          class: 'mention',
+          'class': 'mention',
           'data-type': 'mention',
         }),
         `@${HTMLAttributes['data-label'] || HTMLAttributes.id || ''}`,
diff --git a/src/components/TextEditor/extensions/mention/style.css b/src/components/TextEditor/extensions/mention/style.css
index 5c3e4c3de..7a85d75e3 100644
--- a/src/components/TextEditor/extensions/mention/style.css
+++ b/src/components/TextEditor/extensions/mention/style.css
@@ -6,6 +6,7 @@
   display: inline-block;
 }
 
-.mention.ProseMirror-selectednode, .mention:hover {
+.mention.ProseMirror-selectednode,
+.mention:hover {
   background-color: var(--surface-gray-1, #f8f8f8);
 }
diff --git a/src/components/TextEditor/extensions/slash-commands/slash-commands-extension.ts b/src/components/TextEditor/extensions/slash-commands/slash-commands-extension.ts
index b7cf9e075..d7a999d54 100644
--- a/src/components/TextEditor/extensions/slash-commands/slash-commands-extension.ts
+++ b/src/components/TextEditor/extensions/slash-commands/slash-commands-extension.ts
@@ -1,11 +1,11 @@
-import { Editor, Range } from '@tiptap/core'
+import type { Editor, Range } from '@tiptap/core'
 import { PluginKey } from '@tiptap/pm/state'
 import {
   createSuggestionExtension,
   type BaseSuggestionItem,
 } from '../suggestion/createSuggestionExtension'
 import SlashCommandsList from './SlashCommandsList.vue'
-import { Component as VueComponent } from 'vue'
+import type { Component as VueComponent } from 'vue'
 
 import Heading2 from '~icons/lucide/heading-2'
 import Heading3 from '~icons/lucide/heading-3'
diff --git a/src/components/TextEditor/extensions/suggestion/createSuggestionExtension.ts b/src/components/TextEditor/extensions/suggestion/createSuggestionExtension.ts
index e7f8ff6aa..02980d134 100644
--- a/src/components/TextEditor/extensions/suggestion/createSuggestionExtension.ts
+++ b/src/components/TextEditor/extensions/suggestion/createSuggestionExtension.ts
@@ -1,12 +1,12 @@
-import { Extension, Editor, Range } from '@tiptap/core'
+import type { Editor, Range } from '@tiptap/core'
+import { Extension } from '@tiptap/core'
 import { VueRenderer } from '@tiptap/vue-3'
-import Suggestion, {
-  SuggestionOptions,
-  SuggestionProps,
-} from '@tiptap/suggestion'
-import { PluginKey } from '@tiptap/pm/state'
-import tippy, { Instance as TippyInstance, Props as TippyProps } from 'tippy.js'
-import { Component as VueComponent } from 'vue'
+import type { SuggestionOptions, SuggestionProps } from '@tiptap/suggestion'
+import Suggestion from '@tiptap/suggestion'
+import type { PluginKey } from '@tiptap/pm/state'
+import type { Instance as TippyInstance, Props as TippyProps } from 'tippy.js'
+import tippy from 'tippy.js'
+import type { Component as VueComponent } from 'vue'
 
 export interface BaseSuggestionItem {
   title?: string
diff --git a/src/components/TextEditor/extensions/tag/tag-extension.ts b/src/components/TextEditor/extensions/tag/tag-extension.ts
index 575f592f2..0e356577a 100644
--- a/src/components/TextEditor/extensions/tag/tag-extension.ts
+++ b/src/components/TextEditor/extensions/tag/tag-extension.ts
@@ -1,12 +1,10 @@
 import { Node, mergeAttributes, Range, Editor } from '@tiptap/core'
 import { PluginKey } from '@tiptap/pm/state'
-import {
-  createSuggestionExtension,
-  BaseSuggestionItem,
-} from '../suggestion/createSuggestionExtension'
+import type { BaseSuggestionItem } from '../suggestion/createSuggestionExtension'
+import { createSuggestionExtension } from '../suggestion/createSuggestionExtension'
 import SuggestionList from '../suggestion/SuggestionList.vue'
 import { toValue } from 'vue'
-import { TextEditorProps } from '../../types'
+import type { TextEditorProps } from '../../types'
 
 export const TagNode = Node.create({
   name: 'tagItem',
@@ -61,7 +59,7 @@ export const TagNode = Node.create({
     ]
   },
   renderText({ node }: any) {
-    return `#${node.attrs.tagLabel ||  ''}`
+    return `#${node.attrs.tagLabel || ''}`
   },
   addCommands() {
     return {
diff --git a/src/components/TextEditor/extensions/toc-node/index.ts b/src/components/TextEditor/extensions/toc-node/index.ts
index 28e9f840c..a46f1b674 100644
--- a/src/components/TextEditor/extensions/toc-node/index.ts
+++ b/src/components/TextEditor/extensions/toc-node/index.ts
@@ -1,3 +1,2 @@
 export { TocNodeExtension } from './toc-node-extension'
 export { default } from './toc-node-extension'
-
diff --git a/src/components/TextEditor/extensions/toc-node/toc-node-extension.ts b/src/components/TextEditor/extensions/toc-node/toc-node-extension.ts
index f260a2d10..6e72d67b9 100644
--- a/src/components/TextEditor/extensions/toc-node/toc-node-extension.ts
+++ b/src/components/TextEditor/extensions/toc-node/toc-node-extension.ts
@@ -43,8 +43,7 @@ export const TocNodeExtension = Node.create({
       if (this.editor?.commands?.getCurrentTab) {
         activeTabId = this.editor.commands.getCurrentTab() || null
       }
-    } catch (e) {
-    }
+    } catch (e) {}
 
     if (this.editor?.state?.doc) {
       const doc = this.editor.state.doc
@@ -80,7 +79,11 @@ export const TocNodeExtension = Node.create({
     if (headings.length === 0) {
       return [
         'div',
-        { ...HTMLAttributes, 'data-type': 'toc-node', class: 'table-of-contents-node' },
+        {
+          ...HTMLAttributes,
+          'data-type': 'toc-node',
+          'class': 'table-of-contents-node',
+        },
         'No headings found in this document.',
       ]
     }
@@ -123,7 +126,13 @@ export const TocNodeExtension = Node.create({
           {},
           ['p', { style: 'margin: 0' }, node.text],
           ...(node.children.length > 0
-            ? [['ol', { style: 'list-style-type: decimal; padding-left: 1.5em' }, ...convertToHTML(node.children)]]
+            ? [
+                [
+                  'ol',
+                  { style: 'list-style-type: decimal; padding-left: 1.5em' },
+                  ...convertToHTML(node.children),
+                ],
+              ]
             : []),
         ])
       }
@@ -135,8 +144,19 @@ export const TocNodeExtension = Node.create({
 
     return [
       'div',
-      { ...HTMLAttributes, 'data-type': 'toc-node', class: 'table-of-contents-node' },
-      ['ol', { style: 'list-style-type: decimal; margin: 0.5em 0; padding-left: 1.5em' }, ...listItems],
+      {
+        ...HTMLAttributes,
+        'data-type': 'toc-node',
+        'class': 'table-of-contents-node',
+      },
+      [
+        'ol',
+        {
+          style:
+            'list-style-type: decimal; margin: 0.5em 0; padding-left: 1.5em',
+        },
+        ...listItems,
+      ],
     ]
   },
 
@@ -161,6 +181,3 @@ export const TocNodeExtension = Node.create({
 })
 
 export default TocNodeExtension
-
-
-
diff --git a/src/components/TextEditor/extensions/video-extension.ts b/src/components/TextEditor/extensions/video-extension.ts
index abc0b5e68..85ab0a783 100644
--- a/src/components/TextEditor/extensions/video-extension.ts
+++ b/src/components/TextEditor/extensions/video-extension.ts
@@ -5,11 +5,12 @@ import {
 } from '@tiptap/core'
 import { VueNodeViewRenderer } from '@tiptap/vue-3'
 import MediaNodeView from '../components/MediaNodeView.vue'
-import { Plugin, Selection, Transaction, EditorState } from '@tiptap/pm/state'
-import { EditorView } from '@tiptap/pm/view'
-import { Node } from '@tiptap/pm/model'
+import type { Transaction, EditorState } from '@tiptap/pm/state'
+import { Plugin, Selection } from '@tiptap/pm/state'
+import type { EditorView } from '@tiptap/pm/view'
+import type { Node } from '@tiptap/pm/model'
 import { fileToBase64 } from '../../../index'
-import { UploadedFile } from '../../../utils/useFileUpload'
+import type { UploadedFile } from '../../../utils/useFileUpload'
 import { localFileMap } from './image/image-extension'
 
 export interface VideoExtensionOptions {
diff --git a/src/components/TextEditor/index.ts b/src/components/TextEditor/index.ts
index e07c3e131..8fac23ac1 100644
--- a/src/components/TextEditor/index.ts
+++ b/src/components/TextEditor/index.ts
@@ -4,4 +4,4 @@ export { default as TextEditorBubbleMenu } from './components/TextEditorBubbleMe
 export { default as TextEditorFixedMenu } from './components/TextEditorFixedMenu.vue'
 export { default as TextEditorFloatingMenu } from './components/TextEditorFloatingMenu.vue'
 export { EditorContent as TextEditorContent } from '@tiptap/vue-3'
-export { createEditorButton as createEditorButton } from './utils'
+export { createEditorButton } from './utils'
diff --git a/src/components/TextEditor/style.css b/src/components/TextEditor/style.css
index 6cf46cd30..f9fde678d 100644
--- a/src/components/TextEditor/style.css
+++ b/src/components/TextEditor/style.css
@@ -178,8 +178,11 @@ img.ProseMirror-selectednode {
    Edit mode:    no override — natural 14px × 1.7 = 23.8px, avoids jump when typing
    Readonly mode: scoped via [contenteditable=false] + ProseMirror-trailingBreak class
    to precisely target empty paragraphs (not inline <br> in content) */
-.ProseMirror[contenteditable='false'] .prose-v3 p:has(> br.ProseMirror-trailingBreak:only-child),
-.prose-v3.ProseMirror[contenteditable='false'] p:has(> br.ProseMirror-trailingBreak:only-child) {
+.ProseMirror[contenteditable='false']
+  .prose-v3
+  p:has(> br.ProseMirror-trailingBreak:only-child),
+.prose-v3.ProseMirror[contenteditable='false']
+  p:has(> br.ProseMirror-trailingBreak:only-child) {
   line-height: 20px;
 }
 
diff --git a/src/components/TextInput/TextInput.api.md b/src/components/TextInput/TextInput.api.md
index 726484718..7482f4c1a 100644
--- a/src/components/TextInput/TextInput.api.md
+++ b/src/components/TextInput/TextInput.api.md
@@ -113,11 +113,11 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="TextInput" :data="propsData"/> 
+## API Reference
 
-<SlotsTable :data="slotsData"/> 
+<PropsTable name="TextInput" :data="propsData"/>
 
-<EmitsTable :data="emitsData"/> 
+<SlotsTable :data="slotsData"/>
 
+<EmitsTable :data="emitsData"/>
diff --git a/src/components/TextInput/TextInput.vue b/src/components/TextInput/TextInput.vue
index 6214dac85..865d17d79 100644
--- a/src/components/TextInput/TextInput.vue
+++ b/src/components/TextInput/TextInput.vue
@@ -68,11 +68,7 @@
     >
       <slot v-if="$slots.description" name="description" />
     </InputDescription>
-    <InputError
-      v-if="hasError"
-      :id="errorMessageId"
-      :lines="errorLines"
-    />
+    <InputError v-if="hasError" :id="errorMessageId" :lines="errorLines" />
   </LabelingWrapper>
 </template>
 
@@ -140,10 +136,10 @@ const {
 const hasLabeling = computed(() => {
   return Boolean(
     props.label ||
-      props.description ||
-      hasError.value ||
-      slots.label ||
-      slots.description,
+    props.description ||
+    hasError.value ||
+    slots.label ||
+    slots.description,
   )
 })
 
diff --git a/src/components/TextInput/index.ts b/src/components/TextInput/index.ts
index 1f4a4ba5f..97cbc1f60 100644
--- a/src/components/TextInput/index.ts
+++ b/src/components/TextInput/index.ts
@@ -1,2 +1,2 @@
 export { default as TextInput } from './TextInput.vue'
-export type { TextInputProps } from './types'
\ No newline at end of file
+export type { TextInputProps } from './types'
diff --git a/src/components/Textarea/Textarea.api.md b/src/components/Textarea/Textarea.api.md
index 45a224b31..76bec05df 100644
--- a/src/components/Textarea/Textarea.api.md
+++ b/src/components/Textarea/Textarea.api.md
@@ -103,11 +103,11 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="Textarea" :data="propsData"/> 
+## API Reference
 
-<SlotsTable :data="slotsData"/> 
+<PropsTable name="Textarea" :data="propsData"/>
 
-<EmitsTable :data="emitsData"/> 
+<SlotsTable :data="slotsData"/>
 
+<EmitsTable :data="emitsData"/>
diff --git a/src/components/Textarea/Textarea.cy.ts b/src/components/Textarea/Textarea.cy.ts
index ff8919bc7..a07fda8e1 100644
--- a/src/components/Textarea/Textarea.cy.ts
+++ b/src/components/Textarea/Textarea.cy.ts
@@ -19,7 +19,7 @@ describe('Textarea', () => {
   it('emits update:modelValue on input', () => {
     cy.mount(Textarea, {
       props: {
-        modelValue: '',
+        'modelValue': '',
         'onUpdate:modelValue': cy.stub().as('updateModelValue'),
       },
     })
@@ -56,7 +56,7 @@ describe('Textarea', () => {
     cy.clock()
     cy.mount(Textarea, {
       props: {
-        debounce: 300,
+        'debounce': 300,
         'onUpdate:modelValue': cy.stub().as('updateModelValue'),
       },
     })
diff --git a/src/components/Textarea/Textarea.vue b/src/components/Textarea/Textarea.vue
index 43d365dd8..735623ea0 100644
--- a/src/components/Textarea/Textarea.vue
+++ b/src/components/Textarea/Textarea.vue
@@ -42,11 +42,7 @@
     >
       <slot v-if="$slots.description" name="description" />
     </InputDescription>
-    <InputError
-      v-if="hasError"
-      :id="errorMessageId"
-      :lines="errorLines"
-    />
+    <InputError v-if="hasError" :id="errorMessageId" :lines="errorLines" />
   </LabelingWrapper>
 </template>
 
@@ -102,10 +98,10 @@ const {
 const hasLabeling = computed(() => {
   return Boolean(
     props.label ||
-      slots.label ||
-      showDescription.value ||
-      slots.description ||
-      hasError.value,
+    slots.label ||
+    showDescription.value ||
+    slots.description ||
+    hasError.value,
   )
 })
 
diff --git a/src/components/Textarea/index.ts b/src/components/Textarea/index.ts
index 779234d5e..36e8d63e5 100644
--- a/src/components/Textarea/index.ts
+++ b/src/components/Textarea/index.ts
@@ -1,2 +1,2 @@
 export { default as Textarea } from './Textarea.vue'
-export type { TextareaProps } from './types'
\ No newline at end of file
+export type { TextareaProps } from './types'
diff --git a/src/components/Textarea/stories/Variants.vue b/src/components/Textarea/stories/Variants.vue
index 0105c4203..e324f3337 100644
--- a/src/components/Textarea/stories/Variants.vue
+++ b/src/components/Textarea/stories/Variants.vue
@@ -4,8 +4,16 @@ import { Textarea } from 'frappe-ui'
 
 <template>
   <div class="flex flex-col gap-4 items-start w-full max-w-sm">
-    <Textarea variant="subtle" label="Subtle" placeholder="Write something..." />
-    <Textarea variant="outline" label="Outline" placeholder="Write something..." />
+    <Textarea
+      variant="subtle"
+      label="Subtle"
+      placeholder="Write something..."
+    />
+    <Textarea
+      variant="outline"
+      label="Outline"
+      placeholder="Write something..."
+    />
     <Textarea variant="ghost" label="Ghost" placeholder="Write something..." />
   </div>
 </template>
diff --git a/src/components/TimePicker/TimePicker.api.md b/src/components/TimePicker/TimePicker.api.md
index 9f0b9781f..0786c7405 100644
--- a/src/components/TimePicker/TimePicker.api.md
+++ b/src/components/TimePicker/TimePicker.api.md
@@ -229,11 +229,11 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="TimePicker" :data="propsData"/> 
+## API Reference
 
-<SlotsTable :data="slotsData"/> 
+<PropsTable name="TimePicker" :data="propsData"/>
 
-<EmitsTable :data="emitsData"/> 
+<SlotsTable :data="slotsData"/>
 
+<EmitsTable :data="emitsData"/>
diff --git a/src/components/TimePicker/TimePicker.cy.ts b/src/components/TimePicker/TimePicker.cy.ts
index f98392a32..a13b4215b 100644
--- a/src/components/TimePicker/TimePicker.cy.ts
+++ b/src/components/TimePicker/TimePicker.cy.ts
@@ -31,10 +31,10 @@ describe('TimePicker', () => {
     cy.mount(TimePicker, {
       props: {
         'onUpdate:modelValue': onUpdate,
-        onChange: onChange,
-        onOpen: onOpen,
-        onClose: onClose,
-        use12Hour: false,
+        'onChange': onChange,
+        'onOpen': onOpen,
+        'onClose': onClose,
+        'use12Hour': false,
       },
     })
 
diff --git a/src/components/TimePicker/TimePicker.md b/src/components/TimePicker/TimePicker.md
index 7aad75da6..1ca2b0339 100644
--- a/src/components/TimePicker/TimePicker.md
+++ b/src/components/TimePicker/TimePicker.md
@@ -3,16 +3,19 @@
 Lets users select a specific time from a list or enter a custom value. Supports 12/24-hour formats, custom intervals, and optional time ranges.
 
 ## Basic
+
 <ComponentPreview name="TimePicker-Basic" />
 
 ## 24 Hour Format
+
 <ComponentPreview name="TimePicker-TwentyFour" />
 
 ## Custom Options
+
 <ComponentPreview name="TimePicker-CustomOptions" />
 
 ## Min / Max Range
+
 <ComponentPreview name="TimePicker-Range" />
 
 <!-- @include: ./TimePicker.api.md -->
-
diff --git a/src/components/TimePicker/TimePicker.vue b/src/components/TimePicker/TimePicker.vue
index 001792f8c..40e343c85 100644
--- a/src/components/TimePicker/TimePicker.vue
+++ b/src/components/TimePicker/TimePicker.vue
@@ -24,10 +24,7 @@
             <slot name="prefix" />
           </template>
           <template #suffix>
-            <slot
-              name="suffix"
-              v-bind="{ togglePopover, isOpen }"
-            >
+            <slot name="suffix" v-bind="{ togglePopover, isOpen }">
               <span
                 class="lucide-chevron-down size-4 cursor-pointer"
                 aria-hidden="true"
@@ -145,7 +142,7 @@ defineSlots<{
 
 const resolvedSide = computed<PopoverSide>(
   () =>
-    props.side ?? ((props.placement?.split('-')[0] as PopoverSide) ?? 'bottom'),
+    props.side ?? (props.placement?.split('-')[0] as PopoverSide) ?? 'bottom',
 )
 const resolvedAlign = computed<PopoverAlign>(() => {
   if (props.align !== undefined) return props.align
@@ -213,15 +210,11 @@ if (import.meta.env.DEV) {
       warned.scrollMode = true
     }
     if (props.minTime !== undefined && !warned.minTime) {
-      console.warn(
-        '[TimePicker] `minTime` is deprecated. Use `min` instead.',
-      )
+      console.warn('[TimePicker] `minTime` is deprecated. Use `min` instead.')
       warned.minTime = true
     }
     if (props.maxTime !== undefined && !warned.maxTime) {
-      console.warn(
-        '[TimePicker] `maxTime` is deprecated. Use `max` instead.',
-      )
+      console.warn('[TimePicker] `maxTime` is deprecated. Use `max` instead.')
       warned.maxTime = true
     }
   })
@@ -257,7 +250,9 @@ const canonicalValue = ref<string>(
 
 // What the user sees / can edit in the trigger input. Synced from
 // canonicalValue when not actively typing.
-const displayValue = ref<string>(formatTime(canonicalValue.value, props.use12Hour))
+const displayValue = ref<string>(
+  formatTime(canonicalValue.value, props.use12Hour),
+)
 
 const isTyping = ref(false)
 const highlightIndex = ref<number>(-1)
@@ -300,7 +295,10 @@ const displayedOptions = computed<TimeOption[]>(() => {
  * typed text, or the option nearest to it in minutes. Drives both the
  * highlighted row and the scroll-into-view target.
  */
-const typingTarget = computed<{ exact: TimeOption | null; nearest: TimeOption | null }>(() => {
+const typingTarget = computed<{
+  exact: TimeOption | null
+  nearest: TimeOption | null
+}>(() => {
   const list = displayedOptions.value
   if (!list.length) return { exact: null, nearest: null }
   const parsed = parseFlexibleTime(displayValue.value)
@@ -496,7 +494,8 @@ function moveHighlight(delta: number) {
     const idx = seed ? list.findIndex((o) => o.value === seed) : -1
     highlightIndex.value = idx > -1 ? idx : 0
   } else {
-    highlightIndex.value = (highlightIndex.value + delta + list.length) % list.length
+    highlightIndex.value =
+      (highlightIndex.value + delta + list.length) % list.length
   }
   isTyping.value = false
   scrollHighlightedIntoView()
@@ -551,9 +550,7 @@ function scrollOnOpen() {
     const target =
       typingTarget.value.exact?.value ??
       typingTarget.value.nearest?.value ??
-      (canonicalValue.value
-        ? baseCompare(canonicalValue.value)
-        : null)
+      (canonicalValue.value ? baseCompare(canonicalValue.value) : null)
     if (!target) return
     const el = panel.querySelector<HTMLElement>(`[data-value="${target}"]`)
     el?.scrollIntoView({ block: 'center' })
@@ -589,4 +586,3 @@ defineExpose({
   },
 })
 </script>
-
diff --git a/src/components/TimePicker/stories/TwentyFour.vue b/src/components/TimePicker/stories/TwentyFour.vue
index e67f8dd7d..d23d27dc8 100644
--- a/src/components/TimePicker/stories/TwentyFour.vue
+++ b/src/components/TimePicker/stories/TwentyFour.vue
@@ -11,16 +11,14 @@ const cronTime = ref('02:00')
   <div class="w-full gap-3 items-center grid justify-center py-20">
     <div class="flex w-72 flex-col gap-1.5">
       <span class="text-sm text-ink-gray-7">Nightly backup runs at</span>
-      <TimePicker
-        v-model="cronTime"
-        :use12Hour="false"
-        :interval="30"
-      >
+      <TimePicker v-model="cronTime" :use12Hour="false" :interval="30">
         <template #prefix>
           <LucideServerCog class="size-4 text-ink-gray-5" />
         </template>
       </TimePicker>
-      <span class="text-xs text-ink-gray-5">UTC, every day at {{ cronTime }}</span>
+      <span class="text-xs text-ink-gray-5"
+        >UTC, every day at {{ cronTime }}</span
+      >
     </div>
   </div>
 </template>
diff --git a/src/components/TimePicker/utils.ts b/src/components/TimePicker/utils.ts
index 49f356b88..846d47a76 100644
--- a/src/components/TimePicker/utils.ts
+++ b/src/components/TimePicker/utils.ts
@@ -167,7 +167,7 @@ export function findNearestIndex(
   if (lo < minutes.length) candidates.push(lo)
   if (lo - 1 >= 0) candidates.push(lo - 1)
   if (!candidates.length) return -1
-  return candidates.sort(
+  return candidates.toSorted(
     (a, b) =>
       Math.abs(minutes[a] - targetMinutes) -
       Math.abs(minutes[b] - targetMinutes),
diff --git a/src/components/Toast/Toast.api.md b/src/components/Toast/Toast.api.md
index b77a90b94..4537d881a 100644
--- a/src/components/Toast/Toast.api.md
+++ b/src/components/Toast/Toast.api.md
@@ -62,9 +62,9 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="Toast" :data="propsData"/> 
+## API Reference
 
-<EmitsTable :data="emitsData"/> 
+<PropsTable name="Toast" :data="propsData"/>
 
+<EmitsTable :data="emitsData"/>
diff --git a/src/components/Toast/stories/Examples.vue b/src/components/Toast/stories/Examples.vue
index 8dd8d1d8c..8c2dc5470 100644
--- a/src/components/Toast/stories/Examples.vue
+++ b/src/components/Toast/stories/Examples.vue
@@ -3,7 +3,10 @@ import { Button, toast } from 'frappe-ui'
 </script>
 
 <template>
-  <Button label="Workspace created" @click="toast.success('Workspace created')" />
+  <Button
+    label="Workspace created"
+    @click="toast.success('Workspace created')"
+  />
   <Button label="Link copied" @click="toast.info('Link copied to clipboard')" />
   <Button
     label="Comment posted"
diff --git a/src/components/Tooltip/Tooltip.api.md b/src/components/Tooltip/Tooltip.api.md
index 7bf3b0d04..e10eb7821 100644
--- a/src/components/Tooltip/Tooltip.api.md
+++ b/src/components/Tooltip/Tooltip.api.md
@@ -101,17 +101,17 @@
   }
 ]
 </script>
+
 ## API Reference
 
 ### Tooltip
 
-<PropsTable name="Tooltip" :data="tooltipProps"/> 
+<PropsTable name="Tooltip" :data="tooltipProps"/>
 
-<SlotsTable :data="tooltipSlots"/> 
+<SlotsTable :data="tooltipSlots"/>
 
 ### TooltipBubble
 
-<PropsTable folder="Tooltip" name="TooltipBubble" :data="tooltipBubbleProps"/> 
-
-<SlotsTable :data="tooltipBubbleSlots"/> 
+<PropsTable folder="Tooltip" name="TooltipBubble" :data="tooltipBubbleProps"/>
 
+<SlotsTable :data="tooltipBubbleSlots"/>
diff --git a/src/components/Tooltip/Tooltip.md b/src/components/Tooltip/Tooltip.md
index 080246276..3aa4d657b 100644
--- a/src/components/Tooltip/Tooltip.md
+++ b/src/components/Tooltip/Tooltip.md
@@ -1,8 +1,9 @@
-#  Tooltip
+# Tooltip
 
 A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
 
 ## Default
+
 <ComponentPreview name="Tooltip-Examples" />
 
 ## With Slots
diff --git a/src/components/Tooltip/Tooltip.vue b/src/components/Tooltip/Tooltip.vue
index c21d0e14f..5a4a10c35 100644
--- a/src/components/Tooltip/Tooltip.vue
+++ b/src/components/Tooltip/Tooltip.vue
@@ -37,7 +37,6 @@ defineSlots<{
    */
   content?: () => any
 }>()
-
 </script>
 
 <template>
diff --git a/src/components/Tooltip/types.ts b/src/components/Tooltip/types.ts
index 06ec44d5f..714170ca2 100644
--- a/src/components/Tooltip/types.ts
+++ b/src/components/Tooltip/types.ts
@@ -28,4 +28,3 @@ export interface TooltipProps {
    */
   disabled?: boolean
 }
-
diff --git a/src/components/Tree/Tree.api.md b/src/components/Tree/Tree.api.md
index f3c56a47e..7f385f728 100644
--- a/src/components/Tree/Tree.api.md
+++ b/src/components/Tree/Tree.api.md
@@ -44,9 +44,9 @@
   }
 ]
 </script>
-## API Reference
 
-<PropsTable name="Tree" :data="propsData"/> 
+## API Reference
 
-<SlotsTable :data="slotsData"/> 
+<PropsTable name="Tree" :data="propsData"/>
 
+<SlotsTable :data="slotsData"/>
diff --git a/src/components/Tree/Tree.md b/src/components/Tree/Tree.md
index 8ea4ff28e..42bad4cef 100644
--- a/src/components/Tree/Tree.md
+++ b/src/components/Tree/Tree.md
@@ -2,7 +2,8 @@
 
 Displays hierarchical data in a collapsible tree structure. Makes it easy to navigate nested items and manage complex relationships.
 
-## Default 
+## Default
+
 <ComponentPreview name="Tree-Example" />
 
 <!-- @include: ./Tree.api.md -->
diff --git a/src/components/Tree/index.ts b/src/components/Tree/index.ts
index b3767421f..4c73847b8 100644
--- a/src/components/Tree/index.ts
+++ b/src/components/Tree/index.ts
@@ -1,2 +1,2 @@
 export { default as Tree } from './Tree.vue'
-export type { TreeProps } from './types'
\ No newline at end of file
+export type { TreeProps } from './types'
diff --git a/src/components/Tree/tree.cy.ts b/src/components/Tree/tree.cy.ts
index 3d7aef8bf..db5346733 100644
--- a/src/components/Tree/tree.cy.ts
+++ b/src/components/Tree/tree.cy.ts
@@ -93,9 +93,7 @@ describe('Tree', () => {
       },
     })
 
-    cy.contains('Root')
-      .parent()
-      .should('have.css', 'height', '40px')
+    cy.contains('Root').parent().should('have.css', 'height', '40px')
 
     // indentation line
     cy.get('.border-r').should('exist')
@@ -118,8 +116,7 @@ describe('Tree', () => {
             `label-${node.label}`,
           ),
 
-        icon: () =>
-          h('span', { 'data-cy': 'icon' }, 'icon'),
+        icon: () => h('span', { 'data-cy': 'icon' }, 'icon'),
       },
     })
 
diff --git a/src/components/VueGridLayout/types.ts b/src/components/VueGridLayout/types.ts
index 35e16600e..8f394dbf4 100644
--- a/src/components/VueGridLayout/types.ts
+++ b/src/components/VueGridLayout/types.ts
@@ -22,5 +22,5 @@ export type Layout = Array<LayoutItem>
 export interface GridLayoutProps {
   cols?: number
   rowHeight?: number
-  disabled?: Boolean
+  disabled?: boolean
 }
diff --git a/src/components/shared/selection/createItemSlotRender.ts b/src/components/shared/selection/createItemSlotRender.ts
index 1a135b94b..8e94a67d7 100644
--- a/src/components/shared/selection/createItemSlotRender.ts
+++ b/src/components/shared/selection/createItemSlotRender.ts
@@ -19,8 +19,7 @@ export function createItemSlotRender(name: string) {
       slotProps: { type: Object, required: true },
     },
     setup(innerProps) {
-      return () =>
-        (innerProps.render as (p: any) => any)(innerProps.slotProps)
+      return () => (innerProps.render as (p: any) => any)(innerProps.slotProps)
     },
   })
 }
diff --git a/src/data-fetching/docStore.ts b/src/data-fetching/docStore.ts
index 0e28e291c..a539089ab 100644
--- a/src/data-fetching/docStore.ts
+++ b/src/data-fetching/docStore.ts
@@ -1,4 +1,5 @@
-import { Ref, ref, MaybeRefOrGetter, toValue } from 'vue'
+import type { Ref, MaybeRefOrGetter } from 'vue'
+import { ref, toValue } from 'vue'
 import { idbStore } from './idbStore'
 
 type Doc = {
diff --git a/src/data-fetching/useCall/types.ts b/src/data-fetching/useCall/types.ts
index 7784c3006..032790ca0 100644
--- a/src/data-fetching/useCall/types.ts
+++ b/src/data-fetching/useCall/types.ts
@@ -1,4 +1,4 @@
-import { Ref } from 'vue'
+import type { Ref } from 'vue'
 
 export type BasicParams = Record<string, any> | undefined
 export type CacheKey = string | Array<string | number | boolean | object>
diff --git a/src/data-fetching/useCall/useCall.ts b/src/data-fetching/useCall/useCall.ts
index d1523622b..91c1720e5 100644
--- a/src/data-fetching/useCall/useCall.ts
+++ b/src/data-fetching/useCall/useCall.ts
@@ -1,9 +1,9 @@
 import { computed, reactive, readonly, ref, unref } from 'vue'
-import { AfterFetchContext, UseFetchOptions } from '@vueuse/core'
+import type { AfterFetchContext, UseFetchOptions } from '@vueuse/core'
 import { useFrappeFetch } from '../useFrappeFetch'
 import { unrefObject, makeGetParams, normalizeCacheKey } from '../utils'
 import { idbStore } from '../idbStore'
-import { BasicParams, UseCallOptions } from './types'
+import type { BasicParams, UseCallOptions } from './types'
 
 export function useCall<TResponse, TParams extends BasicParams = undefined>(
   options: UseCallOptions<TResponse, TParams>,
diff --git a/src/data-fetching/useDoc/useDoc.ts b/src/data-fetching/useDoc/useDoc.ts
index 6fdc6702d..44ca3d1f9 100644
--- a/src/data-fetching/useDoc/useDoc.ts
+++ b/src/data-fetching/useDoc/useDoc.ts
@@ -1,15 +1,9 @@
-import {
-  computed,
-  reactive,
-  readonly,
-  Ref,
-  MaybeRefOrGetter,
-  toValue,
-} from 'vue'
-import { UseFetchOptions, AfterFetchContext } from '@vueuse/core'
+import type { Ref, MaybeRefOrGetter } from 'vue'
+import { computed, reactive, readonly, toValue } from 'vue'
+import type { UseFetchOptions, AfterFetchContext } from '@vueuse/core'
 import { useFrappeFetch } from '../useFrappeFetch'
 import { useCall } from '../useCall/useCall'
-import { UseCallOptions } from '../useCall/types'
+import type { UseCallOptions } from '../useCall/types'
 import { docStore } from '../docStore'
 import { listStore } from '../useList/listStore'
 
@@ -24,8 +18,10 @@ type TransformMethods<T> = {
       : never
 }
 
-interface DocMethodOption<T = any>
-  extends Omit<UseCallOptions<T>, 'url' | 'baseUrl'> {
+interface DocMethodOption<T = any> extends Omit<
+  UseCallOptions<T>,
+  'url' | 'baseUrl'
+> {
   name: string
 }
 
diff --git a/src/data-fetching/useFrappeFetch.ts b/src/data-fetching/useFrappeFetch.ts
index 48c23233f..094511c5a 100644
--- a/src/data-fetching/useFrappeFetch.ts
+++ b/src/data-fetching/useFrappeFetch.ts
@@ -120,7 +120,7 @@ function setHeaders(headers: HeadersInit) {
   }
 
   const defaultHeaders: Record<string, string> = {
-    Accept: 'application/json',
+    'Accept': 'application/json',
     'Content-Type': 'application/json; charset=utf-8',
   }
   if (siteName) {
diff --git a/src/data-fetching/useList/types.ts b/src/data-fetching/useList/types.ts
index 133c65a60..0644f3153 100644
--- a/src/data-fetching/useList/types.ts
+++ b/src/data-fetching/useList/types.ts
@@ -1,5 +1,6 @@
-import { MaybeRefOrGetter, Reactive, Ref } from 'vue'
-import { CacheKey } from '../useCall/types'
+import type { MaybeRefOrGetter } from 'vue'
+import { Reactive, Ref } from 'vue'
+import type { CacheKey } from '../useCall/types'
 
 export type Field = string
 export type LinkField = `${Field}.${Field}` | `${Field}.${Field} as ${string}`
diff --git a/src/data-fetching/useList/useList.ts b/src/data-fetching/useList/useList.ts
index f11fad22c..1adba8bcb 100644
--- a/src/data-fetching/useList/useList.ts
+++ b/src/data-fetching/useList/useList.ts
@@ -1,13 +1,13 @@
+import type { Ref } from 'vue'
 import {
   computed,
   MaybeRefOrGetter,
   reactive,
   readonly,
-  Ref,
   ref,
   toValue,
 } from 'vue'
-import {
+import type {
   AfterFetchContext,
   OnFetchErrorContext,
   UseFetchOptions,
@@ -15,7 +15,7 @@ import {
 import { useFrappeFetch } from '../useFrappeFetch'
 import { useCall } from '../useCall/useCall'
 import { parseFilters, makeGetParams, normalizeCacheKey } from '../utils'
-import { UseListOptions, UseListResponse } from './types'
+import type { UseListOptions, UseListResponse } from './types'
 import { idbStore } from '../idbStore'
 import { listStore } from './listStore'
 import { docStore } from '../docStore'
@@ -97,8 +97,6 @@ export function useList<T extends { name: string }>(
     execute,
   } = useFrappeFetch<UseListResponse<T>>(_url, fetchOptions).get()
 
-
-
   const result = computed(() => {
     if (normalizedCacheKey && (out.loading || !out.isFinished)) {
       let data = cachedResponse.value
diff --git a/src/data-fetching/useNewDoc/useNewDoc.ts b/src/data-fetching/useNewDoc/useNewDoc.ts
index 198b21093..e6cad313d 100644
--- a/src/data-fetching/useNewDoc/useNewDoc.ts
+++ b/src/data-fetching/useNewDoc/useNewDoc.ts
@@ -1,6 +1,6 @@
 import { reactive, unref } from 'vue'
 import { useCall } from '../useCall/useCall'
-import { UseCallOptions } from '../useCall/types'
+import type { UseCallOptions } from '../useCall/types'
 import { docStore } from '../docStore'
 
 type UseNewDocOptions = Omit<
diff --git a/src/data-fetching/utils.ts b/src/data-fetching/utils.ts
index 56bb7b6a5..9fa3840af 100644
--- a/src/data-fetching/utils.ts
+++ b/src/data-fetching/utils.ts
@@ -1,5 +1,6 @@
-import { MaybeRef, toValue, MaybeRefOrGetter } from 'vue'
-import { Filters } from './useList/types'
+import type { MaybeRef, MaybeRefOrGetter } from 'vue'
+import { toValue } from 'vue'
+import type { Filters } from './useList/types'
 
 export function makeGetParams(params: Record<string, any>) {
   let url = new URLSearchParams()
diff --git a/src/directives/focus.ts b/src/directives/focus.ts
index 6779dabaa..aea4bc20c 100644
--- a/src/directives/focus.ts
+++ b/src/directives/focus.ts
@@ -1,4 +1,4 @@
-import { type ObjectDirective, type DirectiveBinding, nextTick } from "vue"
+import { type ObjectDirective, type DirectiveBinding, nextTick } from 'vue'
 
 interface FocusDirective extends ObjectDirective<HTMLElement> {
   mounted(el: HTMLElement, binding: DirectiveBinding<boolean>): void
@@ -14,7 +14,7 @@ const focusDirective: FocusDirective = {
       await nextTick()
       firstFocusableElement.focus()
       if (
-        binding.arg === "autoselect" &&
+        binding.arg === 'autoselect' &&
         (firstFocusableElement instanceof HTMLInputElement ||
           firstFocusableElement instanceof HTMLTextAreaElement)
       ) {
diff --git a/src/fonts/Inter/inter.css b/src/fonts/Inter/inter.css
index e01007ebc..59a3d2575 100644
--- a/src/fonts/Inter/inter.css
+++ b/src/fonts/Inter/inter.css
@@ -13,11 +13,11 @@
     url('Inter.var.woff2?v=3.19') format('woff2');
   src: url('Inter.var.woff2?v=3.19') format('woff2') tech('variations');
   unicode-range:
-    U+0000-05FF, /* Latin, Greek, Cyrillic, Hebrew */
-    U+0700-1FFF, /* Extended Latin, Greek, Cyrillic, Armenian, Georgian */
-    U+2C00-2FFF, /* Additional scripts */
-    U+4E00-9FFF, /* CJK (Chinese, Japanese, Korean) */
-    U+AC00-D7AF; /* Hangul (Korean) */
+    U+0000-05FF,
+    /* Latin, Greek, Cyrillic, Hebrew */ U+0700-1FFF,
+    /* Extended Latin, Greek, Cyrillic, Armenian, Georgian */ U+2C00-2FFF,
+    /* Additional scripts */ U+4E00-9FFF,
+    /* CJK (Chinese, Japanese, Korean) */ U+AC00-D7AF; /* Hangul (Korean) */
 }
 @font-face {
   font-family: 'InterVar';
@@ -28,7 +28,8 @@
     url('Inter-Italic.var.woff2?v=3.19') format('woff2-variations'),
     url('Inter-Italic.var.woff2?v=3.19') format('woff2');
   src: url('Inter-Italic.var.woff2?v=3.19') format('woff2') tech('variations');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
+  unicode-range:
+    U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
 }
 /* Aliased 'InterVar' font as 'Inter' */
 /* To prevent breaking usage of `font-family: 'Inter'` */
@@ -42,11 +43,11 @@
     url('Inter.var.woff2?v=3.19') format('woff2');
   src: url('Inter.var.woff2?v=3.19') format('woff2') tech('variations');
   unicode-range:
-    U+0000-05FF, /* Latin, Greek, Cyrillic, Hebrew */
-    U+0700-1FFF, /* Extended Latin, Greek, Cyrillic, Armenian, Georgian */
-    U+2C00-2FFF, /* Additional scripts */
-    U+4E00-9FFF, /* CJK (Chinese, Japanese, Korean) */
-    U+AC00-D7AF; /* Hangul (Korean) */
+    U+0000-05FF,
+    /* Latin, Greek, Cyrillic, Hebrew */ U+0700-1FFF,
+    /* Extended Latin, Greek, Cyrillic, Armenian, Georgian */ U+2C00-2FFF,
+    /* Additional scripts */ U+4E00-9FFF,
+    /* CJK (Chinese, Japanese, Korean) */ U+AC00-D7AF; /* Hangul (Korean) */
 }
 @font-face {
   font-family: 'Inter';
@@ -57,5 +58,6 @@
     url('Inter-Italic.var.woff2?v=3.19') format('woff2-variations'),
     url('Inter-Italic.var.woff2?v=3.19') format('woff2');
   src: url('Inter-Italic.var.woff2?v=3.19') format('woff2') tech('variations');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
+  unicode-range:
+    U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
 }
diff --git a/src/resources/realtime.ts b/src/resources/realtime.ts
index 17a1768ad..86cfe4780 100644
--- a/src/resources/realtime.ts
+++ b/src/resources/realtime.ts
@@ -1,4 +1,4 @@
-import { Socket } from 'socket.io-client'
+import type { Socket } from 'socket.io-client'
 
 export function onDocUpdate(
   socket: Socket,
diff --git a/src/utils/call.js b/src/utils/call.js
index a1b84fa79..99e2a71f3 100644
--- a/src/utils/call.js
+++ b/src/utils/call.js
@@ -5,7 +5,7 @@ export default async function call(method, args, options = {}) {
 
   let headers = Object.assign(
     {
-      Accept: 'application/json',
+      'Accept': 'application/json',
       'Content-Type': 'application/json; charset=utf-8',
       'X-Frappe-Site-Name': window.location.hostname,
     },
diff --git a/src/utils/confirmDialog.js b/src/utils/confirmDialog.js
index 0dd443816..d4ea27231 100644
--- a/src/utils/confirmDialog.js
+++ b/src/utils/confirmDialog.js
@@ -5,14 +5,19 @@ import { warnDeprecated } from './warnDeprecated'
 /**
  * @deprecated Use `dialog.confirm()` from `frappe-ui` instead.
  */
-export function confirmDialog({ title = 'Untitled', message = '', onConfirm, onCancel }) {
+export function confirmDialog({
+  title = 'Untitled',
+  message = '',
+  onConfirm,
+  onCancel,
+}) {
   warnDeprecated('confirmDialog()', 'dialog.confirm()')
   renderDialog(
     h(ConfirmDialog, {
       title,
       message,
       onConfirm,
-      onCancel
+      onCancel,
     }),
   )
 }
diff --git a/src/utils/dayjs.ts b/src/utils/dayjs.ts
index 7cd33aee7..5f70b0e6c 100644
--- a/src/utils/dayjs.ts
+++ b/src/utils/dayjs.ts
@@ -1,4 +1,5 @@
-import _dayjs, { Dayjs } from 'dayjs/esm'
+import type { Dayjs } from 'dayjs/esm'
+import _dayjs from 'dayjs/esm'
 import relativeTime from 'dayjs/esm/plugin/relativeTime'
 import localizedFormat from 'dayjs/esm/plugin/localizedFormat'
 import updateLocale from 'dayjs/esm/plugin/updateLocale'
diff --git a/src/utils/dialog.cy.ts b/src/utils/dialog.cy.ts
index 2dae5eba7..756aa7334 100644
--- a/src/utils/dialog.cy.ts
+++ b/src/utils/dialog.cy.ts
@@ -105,8 +105,7 @@ describe('dialog.ts — imperative API', () => {
   })
 
   it('extracts frappe-style messages[] from a rejection payload', () => {
-    const onConfirm = () =>
-      Promise.reject({ messages: ['Server says no'] })
+    const onConfirm = () => Promise.reject({ messages: ['Server says no'] })
     cy.mount(DialogManager)
     cy.then(() => {
       confirm({ title: 't', onConfirm })
@@ -225,10 +224,7 @@ describe('dialog.ts — imperative API', () => {
       confirm({ title: 'Danger', theme: 'red' })
     })
     cy.get('[role=dialog] .lucide-alert-triangle').should('exist')
-    cy.contains('button', 'Confirm').should(
-      'have.class',
-      'bg-surface-red-5',
-    )
+    cy.contains('button', 'Confirm').should('have.class', 'bg-surface-red-5')
   })
 
   it('a string icon overrides the theme default', () => {
@@ -322,9 +318,7 @@ describe('dialog.ts — imperative API', () => {
     cy.contains('button', 'Save').click()
     cy.get('[role=dialog]').contains('Save failed').should('exist')
     cy.get('[role=dialog]').should('exist')
-    cy.contains('button', 'Save')
-      .find('svg.animate-spin')
-      .should('not.exist')
+    cy.contains('button', 'Save').find('svg.animate-spin').should('not.exist')
   })
 
   // ---- danger -------------------------------------------------------------
@@ -440,8 +434,7 @@ describe('dialog.ts — imperative API', () => {
             name: 'email',
             label: 'Email',
             defaultValue: 'bad',
-            validate: (v: string) =>
-              v === 'bad' ? 'Invalid email' : null,
+            validate: (v: string) => (v === 'bad' ? 'Invalid email' : null),
           },
         ],
         onConfirm,
@@ -450,9 +443,7 @@ describe('dialog.ts — imperative API', () => {
     cy.contains('button', 'Submit').click()
     cy.get('[role=dialog]').contains('Invalid email').should('exist')
     cy.get('@onConfirm').should('not.have.been.called')
-    cy.contains('button', 'Submit')
-      .find('svg.animate-spin')
-      .should('not.exist')
+    cy.contains('button', 'Submit').find('svg.animate-spin').should('not.exist')
   })
 
   it('prompt clears a stale field error as soon as the user edits it', () => {
diff --git a/src/utils/dialog.ts b/src/utils/dialog.ts
index 262149b2e..db6e1abab 100644
--- a/src/utils/dialog.ts
+++ b/src/utils/dialog.ts
@@ -402,16 +402,16 @@ export function confirm(args: ConfirmArgs): DialogHandle {
         h(
           Dialog,
           {
-            open: state.open,
+            'open': state.open,
             'onUpdate:open': (val: boolean) => {
               if (!val) onCancel()
             },
-            title: args.title,
-            icon: resolvedIcon,
-            size: args.size || 'md',
+            'title': args.title,
+            'icon': resolvedIcon,
+            'size': args.size || 'md',
             dismissible,
-            showCloseButton: dismissible,
-            onAfterLeave: () => remove(assignedId),
+            'showCloseButton': dismissible,
+            'onAfterLeave': () => remove(assignedId),
           },
           {
             default: () =>
@@ -550,15 +550,17 @@ export function prompt(args: PromptArgs): DialogHandle {
         : null
 
     const modelValue =
-      field.type === 'combobox' ? values[field.name] || null : values[field.name]
+      field.type === 'combobox'
+        ? values[field.name] || null
+        : values[field.name]
 
     const fieldNode = h(FormControl, {
-      label: field.label,
-      description: field.description,
-      type: (field.type as any) || 'text',
-      required: field.required,
-      placeholder: field.placeholder,
-      options: (field as any).options,
+      'label': field.label,
+      'description': field.description,
+      'type': (field.type as any) || 'text',
+      'required': field.required,
+      'placeholder': field.placeholder,
+      'options': (field as any).options,
       modelValue,
       'onUpdate:modelValue': onUpdate,
       ...comboboxAttrs,
@@ -579,16 +581,16 @@ export function prompt(args: PromptArgs): DialogHandle {
         h(
           Dialog,
           {
-            open: state.open,
+            'open': state.open,
             'onUpdate:open': (val: boolean) => {
               if (!val) onCancel()
             },
-            title: args.title,
-            icon: resolvedIcon,
-            size: args.size || 'md',
+            'title': args.title,
+            'icon': resolvedIcon,
+            'size': args.size || 'md',
             dismissible,
-            showCloseButton: dismissible,
-            onAfterLeave: () => remove(assignedId),
+            'showCloseButton': dismissible,
+            'onAfterLeave': () => remove(assignedId),
           },
           {
             default: () =>
diff --git a/src/utils/fileUploadHandler.ts b/src/utils/fileUploadHandler.ts
index c3d72c3bf..a5c3b2ec9 100644
--- a/src/utils/fileUploadHandler.ts
+++ b/src/utils/fileUploadHandler.ts
@@ -1,4 +1,4 @@
-import { UploadOptions } from "./useFileUpload"
+import type { UploadOptions } from './useFileUpload'
 
 type EventListenerOption = 'start' | 'progress' | 'finish' | 'error'
 
@@ -133,10 +133,10 @@ class FileUploadHandler {
       if (options.optimize) {
         form_data.append('optimize', '1')
         if (options.max_width) {
-            form_data.append('max_width', options.max_width.toString())
+          form_data.append('max_width', options.max_width.toString())
         }
         if (options.max_height) {
-            form_data.append('max_height', options.max_height.toString())
+          form_data.append('max_height', options.max_height.toString())
         }
       }
 
diff --git a/src/utils/frappeRequest.js b/src/utils/frappeRequest.js
index 66e425328..2e28a70bc 100644
--- a/src/utils/frappeRequest.js
+++ b/src/utils/frappeRequest.js
@@ -10,7 +10,7 @@ export function frappeRequest(options) {
       }
       let headers = Object.assign(
         {
-          Accept: 'application/json',
+          'Accept': 'application/json',
           'Content-Type': 'application/json; charset=utf-8',
           'X-Frappe-Site-Name': window.location.hostname,
         },
@@ -51,7 +51,9 @@ export function frappeRequest(options) {
 
         if (data._server_messages) {
           let onMessageHandler =
-            getConfig('serverMessagesHandler') || options.onServerMessages || null
+            getConfig('serverMessagesHandler') ||
+            options.onServerMessages ||
+            null
           if (onMessageHandler) {
             onMessageHandler(JSON.parse(data?._server_messages) || [])
           }
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
index ac3ed54f4..c9fa5ae30 100644
--- a/src/utils/theme.ts
+++ b/src/utils/theme.ts
@@ -1,4 +1,5 @@
-import { ref, onMounted, Ref } from 'vue'
+import type { Ref } from 'vue'
+import { ref, onMounted } from 'vue'
 
 export type Theme = 'light' | 'dark' | 'system'
 
diff --git a/src/utils/url-validation.ts b/src/utils/url-validation.ts
index 89138e77b..3005666bd 100644
--- a/src/utils/url-validation.ts
+++ b/src/utils/url-validation.ts
@@ -31,7 +31,7 @@ export function isValidUrl(url: string): boolean {
   // (alphanumeric, -, _, ., /, #, ?, =, &, %).
   // This prevents colons (avoiding 'javascript:' like schemes) and other problematic
   // characters like spaces, (, ), !, {, }.
-  if (/^[\w\-]([\w\-./#?=&%]*)$/i.test(url)) {
+  if (/^[\w-]([\w\-./#?=&%]*)$/i.test(url)) {
     return true
   }
 
diff --git a/tailwind/colorPalette.js b/tailwind/colorPalette.js
index c76d7a51d..35b83b496 100644
--- a/tailwind/colorPalette.js
+++ b/tailwind/colorPalette.js
@@ -3,23 +3,23 @@ import colorsData from './colors.json'
 
 function generateColorPalette() {
   const colorPalette = {
-    inherit: tailwindColors.inherit,
-    current: tailwindColors.current,
-    transparent: tailwindColors.transparent,
-    black: tailwindColors.black,
-    white: tailwindColors.white,
-    gray: {},
-    blue: {},
-    green: {},
-    red: {},
-    orange: {},
-    yellow: {},
-    teal: {},
-    violet: {},
-    cyan: {},
-    amber: {},
-    pink: {},
-    purple: {},
+    'inherit': tailwindColors.inherit,
+    'current': tailwindColors.current,
+    'transparent': tailwindColors.transparent,
+    'black': tailwindColors.black,
+    'white': tailwindColors.white,
+    'gray': {},
+    'blue': {},
+    'green': {},
+    'red': {},
+    'orange': {},
+    'yellow': {},
+    'teal': {},
+    'violet': {},
+    'cyan': {},
+    'amber': {},
+    'pink': {},
+    'purple': {},
     'white-overlay': {},
     'black-overlay': {},
   }
diff --git a/tailwind/colors.js b/tailwind/colors.js
index 9d30ef1d7..1c6c5e584 100644
--- a/tailwind/colors.js
+++ b/tailwind/colors.js
@@ -534,7 +534,7 @@ let semanticColors = {
     'red-2': withOpacity('var(--outline-red-2)'),
     'red-3': withOpacity('var(--outline-red-3)'),
     'red-4': withOpacity('var(--outline-red-4)'),
-    white: withOpacity('var(--outline-white)'),
+    'white': withOpacity('var(--outline-white)'),
   },
   // for background color
   surface: {
@@ -542,7 +542,7 @@ let semanticColors = {
     'amber-2': withOpacity('var(--surface-amber-2)'),
     'blue-1': withOpacity('var(--surface-blue-1)'),
     'blue-2': withOpacity('var(--surface-blue-2)'),
-    cards: withOpacity('var(--surface-cards)'),
+    'cards': withOpacity('var(--surface-cards)'),
     'cyan-1': withOpacity('var(--surface-cyan-1)'),
     'gray-1': withOpacity('var(--surface-gray-1)'),
     'gray-2': withOpacity('var(--surface-gray-2)'),
@@ -555,7 +555,7 @@ let semanticColors = {
     'green-2': withOpacity('var(--surface-green-2)'),
     'green-3': withOpacity('var(--surface-green-3)'),
     'menu-bar': withOpacity('var(--surface-menu-bar)'),
-    modal: withOpacity('var(--surface-modal)'),
+    'modal': withOpacity('var(--surface-modal)'),
     'orange-1': withOpacity('var(--surface-orange-1)'),
     'pink-1': withOpacity('var(--surface-pink-1)'),
     'red-1': withOpacity('var(--surface-red-1)'),
@@ -564,9 +564,9 @@ let semanticColors = {
     'red-4': withOpacity('var(--surface-red-4)'),
     'red-5': withOpacity('var(--surface-red-5)'),
     'red-6': withOpacity('var(--surface-red-6)'),
-    selected: withOpacity('var(--surface-selected)'),
+    'selected': withOpacity('var(--surface-selected)'),
     'violet-1': withOpacity('var(--surface-violet-1)'),
-    white: withOpacity('var(--surface-white)'),
+    'white': withOpacity('var(--surface-white)'),
   },
   // for text color and svg stroke/fill
   ink: {
@@ -595,29 +595,29 @@ let semanticColors = {
     'red-3': withOpacity('var(--text-ink-red-3)'),
     'red-4': withOpacity('var(--text-ink-red-4)'),
     'violet-1': withOpacity('var(--text-ink-violet-1)'),
-    white: withOpacity('var(--text-ink-white)'),
+    'white': withOpacity('var(--text-ink-white)'),
   },
 }
 
 function colorPalette({ colors }) {
   return {
-    inherit: colors.inherit,
-    current: colors.current,
-    transparent: colors.transparent,
-    black: colors.black,
-    white: colors.white,
-    gray: getDefaultColorMap('gray'),
-    blue: getDefaultColorMap('blue'),
-    green: getDefaultColorMap('green'),
-    red: getDefaultColorMap('red'),
-    orange: getDefaultColorMap('orange'),
-    yellow: getDefaultColorMap('yellow'),
-    teal: getDefaultColorMap('teal'),
-    violet: getDefaultColorMap('violet'),
-    cyan: getDefaultColorMap('cyan'),
-    amber: getDefaultColorMap('amber'),
-    pink: getDefaultColorMap('pink'),
-    purple: getDefaultColorMap('purple'),
+    'inherit': colors.inherit,
+    'current': colors.current,
+    'transparent': colors.transparent,
+    'black': colors.black,
+    'white': colors.white,
+    'gray': getDefaultColorMap('gray'),
+    'blue': getDefaultColorMap('blue'),
+    'green': getDefaultColorMap('green'),
+    'red': getDefaultColorMap('red'),
+    'orange': getDefaultColorMap('orange'),
+    'yellow': getDefaultColorMap('yellow'),
+    'teal': getDefaultColorMap('teal'),
+    'violet': getDefaultColorMap('violet'),
+    'cyan': getDefaultColorMap('cyan'),
+    'amber': getDefaultColorMap('amber'),
+    'pink': getDefaultColorMap('pink'),
+    'purple': getDefaultColorMap('purple'),
     'white-overlay': (() => {
       let obj = {}
       for (let shade in whiteOverlay) {
diff --git a/tailwind/figma-variables-to-colors.js b/tailwind/figma-variables-to-colors.js
index 2ef52a591..7f53ef5e6 100644
--- a/tailwind/figma-variables-to-colors.js
+++ b/tailwind/figma-variables-to-colors.js
@@ -40,11 +40,11 @@ function convertToJSON(variables) {
     },
   }
 
-  const lightPattern = /^light\/([^\/]+)\/([^\/]+)$/
-  const darkPattern = /^dark\/([^\/]+)\/([^\/]+)$/
-  const neutralPattern = /^neutral\/([^\/]+)$/
-  const whiteOverlayPattern = /^white overlay\/([^\/]+)$/
-  const blackOverlayPattern = /^black overlay\/([^\/]+)$/
+  const lightPattern = /^light\/([^/]+)\/([^/]+)$/
+  const darkPattern = /^dark\/([^/]+)\/([^/]+)$/
+  const neutralPattern = /^neutral\/([^/]+)$/
+  const whiteOverlayPattern = /^white overlay\/([^/]+)$/
+  const blackOverlayPattern = /^black overlay\/([^/]+)$/
 
   const colorMap = {}
 
diff --git a/tailwind/iconPackPlugin.js b/tailwind/iconPackPlugin.js
index 81dfec1a3..b7be8f3a1 100644
--- a/tailwind/iconPackPlugin.js
+++ b/tailwind/iconPackPlugin.js
@@ -84,9 +84,9 @@ export function iconPackPlugin({
             // class-based icon behaves identically to the inline-svg form
             // it replaces — no phantom line-box height in the parent, no
             // baseline drift next to text in flex containers.
-            display: 'block',
-            width: '1em',
-            height: '1em',
+            'display': 'block',
+            'width': '1em',
+            'height': '1em',
             'background-color': 'currentColor',
             '-webkit-mask-image': `url("${uri}")`,
             'mask-image': `url("${uri}")`,
diff --git a/tailwind/plugin.js b/tailwind/plugin.js
index cdfe8c1be..ece8986c0 100644
--- a/tailwind/plugin.js
+++ b/tailwind/plugin.js
@@ -10,7 +10,7 @@ let semanticColors = generateSemanticColors()
 let cssVariables = generateCSSVariables()
 
 let globalStyles = (theme) => ({
-  html: {
+  'html': {
     'font-family': `InterVar, ${theme('fontFamily.sans')}`,
     'font-optical-sizing': 'auto',
   },
@@ -19,7 +19,7 @@ let globalStyles = (theme) => ({
     WebkitFontSmoothing: 'antialiased',
     MozOsxFontSmoothing: 'grayscale',
   },
-  select: {
+  'select': {
     backgroundImage:
       'url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%237C7C7C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" aria-hidden="true" viewBox="0 0 24 24" ><path d="m6 9 6 6 6-6" /></svg>\')',
     backgroundSize: '1.13em',
@@ -53,25 +53,25 @@ export default plugin(
     theme: {
       colors: colorPalette,
       borderRadius: {
-        none: '0px', // 0
-        sm: '0.25rem', // 4px
-        DEFAULT: '0.5rem', // 8px
-        md: '0.625rem', // 10px
-        lg: '0.75rem', // 12px
-        xl: '1rem', // 16px
+        'none': '0px', // 0
+        'sm': '0.25rem', // 4px
+        'DEFAULT': '0.5rem', // 8px
+        'md': '0.625rem', // 10px
+        'lg': '0.75rem', // 12px
+        'xl': '1rem', // 16px
         '2xl': '1.25rem', // 20px
-        full: '9999px', // 9999px
+        'full': '9999px', // 9999px
       },
       boxShadow: {
-        sm: '0px 1px 2px rgba(0, 0, 0, 0.1)',
-        DEFAULT:
+        'sm': '0px 1px 2px rgba(0, 0, 0, 0.1)',
+        'DEFAULT':
           '0px 0px 1px rgba(0, 0, 0, 0.45), 0px 1px 2px rgba(0, 0, 0, 0.1)',
-        md: '0px 0px 1px rgba(0, 0, 0, 0.12), 0px 0.5px 2px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.16)',
-        lg: '0px 0px 1px rgba(0, 0, 0, 0.35), 0px 6px 8px -4px rgba(0, 0, 0, 0.1)',
-        xl: '0px 0px 1px rgba(0, 0, 0, 0.19), 0px 1px 2px rgba(0, 0, 0, 0.07), 0px 6px 15px -5px rgba(0, 0, 0, 0.11)',
+        'md': '0px 0px 1px rgba(0, 0, 0, 0.12), 0px 0.5px 2px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.16)',
+        'lg': '0px 0px 1px rgba(0, 0, 0, 0.35), 0px 6px 8px -4px rgba(0, 0, 0, 0.1)',
+        'xl': '0px 0px 1px rgba(0, 0, 0, 0.19), 0px 1px 2px rgba(0, 0, 0, 0.07), 0px 6px 15px -5px rgba(0, 0, 0, 0.11)',
         '2xl':
           '0px 0px 1px rgba(0, 0, 0, 0.2), 0px 1px 3px rgba(0, 0, 0, 0.05), 0px 10px 24px -3px rgba(0, 0, 0, 0.1)',
-        none: 'none',
+        'none': 'none',
       },
       container: {
         padding: {
@@ -87,7 +87,7 @@ export default plugin(
             fontWeight: '420',
           },
         ],
-        xs: [
+        'xs': [
           '12px',
           {
             lineHeight: '1.15',
@@ -95,7 +95,7 @@ export default plugin(
             fontWeight: '420',
           },
         ],
-        sm: [
+        'sm': [
           '13px',
           {
             lineHeight: '1.15',
@@ -103,7 +103,7 @@ export default plugin(
             fontWeight: '420',
           },
         ],
-        base: [
+        'base': [
           '14px',
           {
             lineHeight: '1.15',
@@ -111,7 +111,7 @@ export default plugin(
             fontWeight: '420',
           },
         ],
-        lg: [
+        'lg': [
           '16px',
           {
             lineHeight: '1.15',
@@ -119,7 +119,7 @@ export default plugin(
             fontWeight: '400',
           },
         ],
-        xl: [
+        'xl': [
           '18px',
           {
             lineHeight: '1.15',
@@ -274,7 +274,7 @@ export default plugin(
           52: '13rem',
         },
         typography: (theme) => ({
-          DEFAULT: {
+          'DEFAULT': {
             css: {
               '--tw-prose-body': 'var(--ink-gray-8)',
               '--tw-prose-headings': 'var(--ink-gray-9)',
@@ -293,19 +293,19 @@ export default plugin(
               '--tw-prose-pre-bg': 'var(--ink-gray-8)',
               '--tw-prose-th-borders': 'var(--ink-gray-2)',
               '--tw-prose-td-borders': 'var(--ink-gray-1)',
-              h1: {
+              'h1': {
                 fontWeight: 600,
               },
-              h2: {
+              'h2': {
                 fontWeight: 600,
               },
-              h3: {
+              'h3': {
                 fontWeight: 600,
               },
-              h4: {
+              'h4': {
                 fontWeight: 600,
               },
-              h5: {
+              'h5': {
                 fontWeight: 600,
               },
               'h1 strong': {
@@ -333,33 +333,33 @@ export default plugin(
               },
             },
           },
-          sm: {
+          'sm': {
             css: {
-              fontSize: '14px',
-              fontWeight: 420,
-              lineHeight: 1.5,
-              letterSpacing: '0.02em',
-              h1: {
+              'fontSize': '14px',
+              'fontWeight': 420,
+              'lineHeight': 1.5,
+              'letterSpacing': '0.02em',
+              'h1': {
                 fontSize: em(20, 14),
               },
-              h2: {
+              'h2': {
                 fontSize: em(18, 14),
               },
-              h3: {
+              'h3': {
                 fontSize: em(16, 14),
               },
-              h4: {
+              'h4': {
                 fontSize: em(14, 14),
               },
-              h5: {
+              'h5': {
                 fontSize: em(13, 14),
               },
-              p: {
+              'p': {
                 marginTop: '0.5rem',
                 marginBottom: '0.5rem',
               },
               'ul > li': {
-                margin: '0.5rem 0',
+                'margin': '0.5rem 0',
                 '> p': {
                   margin: '0.5rem 0',
                 },
@@ -374,7 +374,7 @@ export default plugin(
                 },
               },
               'ol > li': {
-                margin: '0.5rem 0',
+                'margin': '0.5rem 0',
                 '> p': {
                   margin: '0.5rem 0',
                 },
@@ -393,13 +393,13 @@ export default plugin(
           // prose-v3: zero paragraph margins, user controls spacing with Enter
           // all spacing on 8px grid: 4, 8, 16, 24, 32px
           // empty <p> = 14px × 1.7 line-height ≈ 23.8px (the user's spacing unit)
-          v3: {
+          'v3': {
             css: [
               {
-                fontSize: '14px',
-                fontWeight: 420,
-                lineHeight: '1.7',
-                letterSpacing: '0.02em',
+                'fontSize': '14px',
+                'fontWeight': 420,
+                'lineHeight': '1.7',
+                'letterSpacing': '0.02em',
 
                 // prose-v3 color tokens — calmer, softer than defaults
                 '--tw-prose-body': 'var(--ink-gray-7)',
@@ -410,7 +410,7 @@ export default plugin(
                 '--tw-prose-code': 'var(--ink-gray-8)',
 
                 // links: subtle bottom border, darkens on hover
-                a: {
+                'a': {
                   textDecoration: 'none',
                   borderBottom: '1px solid var(--ink-gray-3)',
                   transition: 'border-color 0.08s ease',
@@ -422,7 +422,7 @@ export default plugin(
                 // inline code: subtle pill — strip Tailwind's added quotes
                 'code::before': { content: 'none' },
                 'code::after': { content: 'none' },
-                code: {
+                'code': {
                   backgroundColor: 'var(--surface-gray-2)',
                   borderRadius: '4px',
                   paddingTop: '1px',
@@ -442,16 +442,16 @@ export default plugin(
                 },
 
                 // blockquote: left border, receded color, no italic, no quote marks
-                blockquote: {
+                'blockquote': {
                   'border-inline-start-width': '2px',
-                  borderInlineStartColor: 'var(--ink-gray-3)',
-                  borderInlineStartStyle: 'solid',
-                  marginTop: '16px',
-                  marginBottom: '16px',
-                  paddingInlineStart: '1em',
-                  fontStyle: 'normal',
-                  color: 'var(--ink-gray-6)',
-                  quotes: 'none',
+                  'borderInlineStartColor': 'var(--ink-gray-3)',
+                  'borderInlineStartStyle': 'solid',
+                  'marginTop': '16px',
+                  'marginBottom': '16px',
+                  'paddingInlineStart': '1em',
+                  'fontStyle': 'normal',
+                  'color': 'var(--ink-gray-6)',
+                  'quotes': 'none',
                 },
                 'blockquote p:first-of-type::before': { content: 'none' },
                 'blockquote p:last-of-type::after': { content: 'none' },
@@ -461,7 +461,7 @@ export default plugin(
                 },
 
                 // paragraphs: zero margin — user controls spacing with empty paragraphs
-                p: {
+                'p': {
                   marginTop: '0',
                   marginBottom: '0',
                 },
@@ -469,31 +469,31 @@ export default plugin(
                 // headings: marginTop creates section break (32/24px),
                 // marginBottom keeps heading close to its content (8px, proximity)
                 // h1/h2: full weight + darkest; h3-h5: softer weight + stepped-back color
-                h1: {
+                'h1': {
                   fontSize: em(20, 14),
                   marginTop: '32px',
                   marginBottom: '8px',
                   lineHeight: '1.3',
                 },
-                h2: {
+                'h2': {
                   fontSize: em(18, 14),
                   marginTop: '32px',
                   marginBottom: '8px',
                   lineHeight: '1.35',
                 },
-                h3: {
+                'h3': {
                   fontSize: em(16, 14),
                   marginTop: '24px',
                   marginBottom: '8px',
                   lineHeight: '1.4',
                 },
-                h4: {
+                'h4': {
                   fontSize: em(14, 14),
                   marginTop: '24px',
                   marginBottom: '8px',
                   lineHeight: '1.45',
                 },
-                h5: {
+                'h5': {
                   fontSize: em(13, 14),
                   marginTop: '24px',
                   marginBottom: '8px',
@@ -508,17 +508,17 @@ export default plugin(
                 'h5 + *': { marginTop: '0' },
 
                 // lists: small outer margin (4px), tight internal spacing
-                ul: {
+                'ul': {
                   marginTop: '4px',
                   marginBottom: '4px',
                   paddingInlineStart: '1.5em',
                 },
-                ol: {
+                'ol': {
                   marginTop: '4px',
                   marginBottom: '4px',
                   paddingInlineStart: '1.5em',
                 },
-                li: {
+                'li': {
                   marginTop: '4px',
                   marginBottom: '4px',
                 },
@@ -532,7 +532,7 @@ export default plugin(
                 },
 
                 // code blocks: breathing room (16px)
-                pre: {
+                'pre': {
                   fontSize: em(12, 14),
                   lineHeight: '1.6',
                   marginTop: '16px',
@@ -545,7 +545,7 @@ export default plugin(
                 },
 
                 // tables: breathing room (16px)
-                table: {
+                'table': {
                   fontSize: em(12, 14),
                   lineHeight: '1.5',
                   marginTop: '16px',
@@ -553,11 +553,11 @@ export default plugin(
                 },
 
                 // images, video, figures: breathing room (16px)
-                img: {
+                'img': {
                   marginTop: '16px',
                   marginBottom: '16px',
                 },
-                picture: {
+                'picture': {
                   marginTop: '16px',
                   marginBottom: '16px',
                 },
@@ -565,11 +565,11 @@ export default plugin(
                   marginTop: '0',
                   marginBottom: '0',
                 },
-                video: {
+                'video': {
                   marginTop: '16px',
                   marginBottom: '16px',
                 },
-                figure: {
+                'figure': {
                   marginTop: '16px',
                   marginBottom: '16px',
                 },
@@ -579,7 +579,7 @@ export default plugin(
                 },
 
                 // hr: short centered line, not edge-to-edge
-                hr: {
+                'hr': {
                   marginTop: '24px',
                   marginBottom: '24px',
                   marginLeft: 'auto',
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 198a0ac75..e0affd6d3 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -15,6 +15,6 @@
     "noEmit": true,
     "types": ["vitest/globals", "unplugin-icons/types/vue"],
     "declaration": true,
-    "emitDeclarationOnly": true,
+    "emitDeclarationOnly": true
   }
 }
diff --git a/v1-release/04-components-audit.md b/v1-release/04-components-audit.md
index 33d125fd5..fa3becfef 100644
--- a/v1-release/04-components-audit.md
+++ b/v1-release/04-components-audit.md
@@ -18,42 +18,42 @@ findings should be layered on top in follow-up passes.
 
 ## Core component audit matrix
 
-| Component    | Primary file                                   | script setup |  TS | types.ts | stories | tests | docs | Notes                                                           |
-| ------------ | ---------------------------------------------- | -----------: | --: | -------: | ------: | ----: | ---: | --------------------------------------------------------------- |
-| Alert        | `src/components/Alert/Alert.vue`               |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Good baseline                                                   |
-| Avatar       | `src/components/Avatar/Avatar.vue`             |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Good baseline                                                   |
-| Badge        | `src/components/Badge/Badge.vue`               |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | API audit still needed                                          |
-| Breadcrumbs  | `src/components/Breadcrumbs/Breadcrumbs.vue`   |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Good baseline                                                   |
-| Button       | `src/components/Button/Button.vue`             |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Renders feather-name icon prop via `FeatherIcon` for back-compat (kept)                               |
-| Checkbox     | `src/components/Checkbox/Checkbox.vue`         |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Good baseline                                                   |
-| Combobox     | `src/components/Combobox/Combobox.vue`         |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Part of critical selection cluster                              |
-| DatePicker   | `src/components/DatePicker/DatePicker.vue`     |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Good baseline                                                   |
-| MonthPicker  | `src/components/MonthPicker/MonthPicker.vue`   |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Good baseline                                                   |
-| TimePicker   | `src/components/TimePicker/TimePicker.vue`     |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Good baseline                                                   |
-| Dialog       | `src/components/Dialog/Dialog.vue`             |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Overlay/floating blocker                                        |
-| Divider      | `src/components/Divider/Divider.vue`           |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Baseline coverage added; action mode semantics reviewed         |
-| Dropdown     | `src/components/Dropdown/Dropdown.vue`         |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Part of critical selection/floating cluster                     |
-| ErrorMessage | `src/components/ErrorMessage/ErrorMessage.vue` |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Good baseline                                                   |
-| FileUploader | `src/components/FileUploader/FileUploader.vue` |           ❌ |  ❌ |       ❌ |      ✅ |    ❌ |   ✅ | Legacy public component; modernization blocker                  |
-| FormControl  | `src/components/FormControl/FormControl.vue`   |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Baseline present; part of critical selection/input cluster      |
-| ListView     | `src/components/ListView/ListView.vue`         |           ✅ |  ❌ |       ❌ |      ✅ |    ❌ |   ✅ | Script setup but not TS; missing types/test baseline            |
-| MultiSelect  | `src/components/MultiSelect/MultiSelect.vue`   |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Critical blocker                                                |
-| Password     | `src/components/Password/Password.vue`         |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Depends on FormControl quality                                  |
-| Popover      | `src/components/Popover/Popover.vue`           |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Overlay/floating blocker                                        |
-| Progress     | `src/components/Progress/Progress.vue`         |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Good baseline                                                   |
-| Rating       | `src/components/Rating/Rating.vue`             |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Renders feather-name icon prop via `FeatherIcon` for back-compat (kept)                               |
-| Select       | `src/components/Select/Select.vue`             |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Selection/floating cluster                                      |
-| Sidebar      | `src/components/Sidebar/Sidebar.vue`           |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Good baseline                                                   |
-| Slider       | `src/components/Slider/Slider.vue`             |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Baseline present                                                |
-| Switch       | `src/components/Switch/Switch.vue`             |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Critical blocker; still uses internal `FeatherIcon`             |
-| TabButtons   | `src/components/TabButtons/TabButtons.vue`     |           ❌ |  ❌ |       ❌ |      ✅ |    ❌ |   ✅ | Legacy public component; modernization blocker                  |
-| Tabs         | `src/components/Tabs/Tabs.vue`                 |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Good baseline                                                   |
-| TextEditor   | `src/components/TextEditor/TextEditor.vue`     |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Public component baseline exists; internals still need refactor |
-| TextInput    | `src/components/TextInput/TextInput.vue`       |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Good baseline                                                   |
-| Textarea     | `src/components/Textarea/Textarea.vue`         |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Baseline present                                                |
-| Toast        | `src/components/Toast/Toast.vue`               |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Baseline coverage added in this pass                            |
-| Tooltip      | `src/components/Tooltip/Tooltip.vue`           |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Good baseline                                                   |
-| Tree         | `src/components/Tree/Tree.vue`                 |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Renders feather-name icon prop via `FeatherIcon` for back-compat (kept)                               |
+| Component    | Primary file                                   | script setup |  TS | types.ts | stories | tests | docs | Notes                                                                   |
+| ------------ | ---------------------------------------------- | -----------: | --: | -------: | ------: | ----: | ---: | ----------------------------------------------------------------------- |
+| Alert        | `src/components/Alert/Alert.vue`               |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Good baseline                                                           |
+| Avatar       | `src/components/Avatar/Avatar.vue`             |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Good baseline                                                           |
+| Badge        | `src/components/Badge/Badge.vue`               |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | API audit still needed                                                  |
+| Breadcrumbs  | `src/components/Breadcrumbs/Breadcrumbs.vue`   |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Good baseline                                                           |
+| Button       | `src/components/Button/Button.vue`             |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Renders feather-name icon prop via `FeatherIcon` for back-compat (kept) |
+| Checkbox     | `src/components/Checkbox/Checkbox.vue`         |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Good baseline                                                           |
+| Combobox     | `src/components/Combobox/Combobox.vue`         |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Part of critical selection cluster                                      |
+| DatePicker   | `src/components/DatePicker/DatePicker.vue`     |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Good baseline                                                           |
+| MonthPicker  | `src/components/MonthPicker/MonthPicker.vue`   |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Good baseline                                                           |
+| TimePicker   | `src/components/TimePicker/TimePicker.vue`     |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Good baseline                                                           |
+| Dialog       | `src/components/Dialog/Dialog.vue`             |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Overlay/floating blocker                                                |
+| Divider      | `src/components/Divider/Divider.vue`           |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Baseline coverage added; action mode semantics reviewed                 |
+| Dropdown     | `src/components/Dropdown/Dropdown.vue`         |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Part of critical selection/floating cluster                             |
+| ErrorMessage | `src/components/ErrorMessage/ErrorMessage.vue` |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Good baseline                                                           |
+| FileUploader | `src/components/FileUploader/FileUploader.vue` |           ❌ |  ❌ |       ❌ |      ✅ |    ❌ |   ✅ | Legacy public component; modernization blocker                          |
+| FormControl  | `src/components/FormControl/FormControl.vue`   |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Baseline present; part of critical selection/input cluster              |
+| ListView     | `src/components/ListView/ListView.vue`         |           ✅ |  ❌ |       ❌ |      ✅ |    ❌ |   ✅ | Script setup but not TS; missing types/test baseline                    |
+| MultiSelect  | `src/components/MultiSelect/MultiSelect.vue`   |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Critical blocker                                                        |
+| Password     | `src/components/Password/Password.vue`         |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Depends on FormControl quality                                          |
+| Popover      | `src/components/Popover/Popover.vue`           |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Overlay/floating blocker                                                |
+| Progress     | `src/components/Progress/Progress.vue`         |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Good baseline                                                           |
+| Rating       | `src/components/Rating/Rating.vue`             |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Renders feather-name icon prop via `FeatherIcon` for back-compat (kept) |
+| Select       | `src/components/Select/Select.vue`             |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Selection/floating cluster                                              |
+| Sidebar      | `src/components/Sidebar/Sidebar.vue`           |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Good baseline                                                           |
+| Slider       | `src/components/Slider/Slider.vue`             |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Baseline present                                                        |
+| Switch       | `src/components/Switch/Switch.vue`             |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Critical blocker; still uses internal `FeatherIcon`                     |
+| TabButtons   | `src/components/TabButtons/TabButtons.vue`     |           ❌ |  ❌ |       ❌ |      ✅ |    ❌ |   ✅ | Legacy public component; modernization blocker                          |
+| Tabs         | `src/components/Tabs/Tabs.vue`                 |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Good baseline                                                           |
+| TextEditor   | `src/components/TextEditor/TextEditor.vue`     |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Public component baseline exists; internals still need refactor         |
+| TextInput    | `src/components/TextInput/TextInput.vue`       |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Good baseline                                                           |
+| Textarea     | `src/components/Textarea/Textarea.vue`         |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Baseline present                                                        |
+| Toast        | `src/components/Toast/Toast.vue`               |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Baseline coverage added in this pass                                    |
+| Tooltip      | `src/components/Tooltip/Tooltip.vue`           |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Good baseline                                                           |
+| Tree         | `src/components/Tree/Tree.vue`                 |           ✅ |  ✅ |       ✅ |      ✅ |    ✅ |   ✅ | Renders feather-name icon prop via `FeatherIcon` for back-compat (kept) |
 
 ## Highest-priority structural gaps
 
diff --git a/v1-release/08-selection-and-menu-api-spec.md b/v1-release/08-selection-and-menu-api-spec.md
index ce5106b7b..97318f122 100644
--- a/v1-release/08-selection-and-menu-api-spec.md
+++ b/v1-release/08-selection-and-menu-api-spec.md
@@ -356,12 +356,12 @@ slots?: ItemSlots<ItemSlotProps>
 Key names mirror the template slot names one-to-one, with the redundant
 `item-` prefix stripped because we're already scoped to an item:
 
-| template slot     | `slots.*` key |
-| ----------------- | ------------- |
-| `#item-prefix`    | `prefix`      |
-| `#item-label`     | `label`       |
-| `#item-suffix`    | `suffix`      |
-| `#item`           | `item`        |
+| template slot  | `slots.*` key |
+| -------------- | ------------- |
+| `#item-prefix` | `prefix`      |
+| `#item-label`  | `label`       |
+| `#item-suffix` | `suffix`      |
+| `#item`        | `item`        |
 
 Rules:
 
diff --git a/v1-release/08b-dropdown-spec.md b/v1-release/08b-dropdown-spec.md
index eec2f2c55..381e36d78 100644
--- a/v1-release/08b-dropdown-spec.md
+++ b/v1-release/08b-dropdown-spec.md
@@ -555,8 +555,7 @@ const options = users.map((user) => ({
   selected: user.id === activeId,
   onClick: () => switchTo(user.id),
   slots: {
-    prefix: ({ item }) =>
-      h(Avatar, { image: item.image, class: 'size-4' }),
+    prefix: ({ item }) => h(Avatar, { image: item.image, class: 'size-4' }),
     suffix: ({ selected }) =>
       selected ? h(LucideCheck, { class: 'size-4' }) : null,
   },
diff --git a/v1-release/08d-combobox-spec.md b/v1-release/08d-combobox-spec.md
index 6b3564afb..3b9a80d70 100644
--- a/v1-release/08d-combobox-spec.md
+++ b/v1-release/08d-combobox-spec.md
@@ -159,15 +159,15 @@ Trigger modes:
   into the popover header and auto-focuses on open. The button's label
   is the selected option's `label` or the `placeholder`. The button's
   prefix resolves by priority:
-    1. selected + consumer's `#item-prefix` slot → reused with the
-       selected option, so the same slot that renders each row's prefix
-       also renders the selected-state prefix
-    2. selected + `selectedOption.icon` → rendered as a `<component>`
-    3. no selection + consumer's `#prefix` slot → used as the
-       placeholder prefix (e.g. a generic icon shown before anything is
-       picked)
-    4. nothing
-  For richer custom triggers, use the `#trigger` slot directly.
+  1. selected + consumer's `#item-prefix` slot → reused with the
+     selected option, so the same slot that renders each row's prefix
+     also renders the selected-state prefix
+  2. selected + `selectedOption.icon` → rendered as a `<component>`
+  3. no selection + consumer's `#prefix` slot → used as the
+     placeholder prefix (e.g. a generic icon shown before anything is
+     picked)
+  4. nothing
+     For richer custom triggers, use the `#trigger` slot directly.
 
 Providing a `#trigger` slot implicitly activates button mode regardless
 of the `trigger` prop value, since the caller is replacing the trigger
@@ -203,9 +203,9 @@ interface ComboboxEmits {
   'update:selectedOption': [
     option: ComboboxSelectableOption | ComboboxCustomOption | null,
   ]
-  focus: [event: FocusEvent]
-  blur: [event: FocusEvent]
-  input: [value: string]
+  'focus': [event: FocusEvent]
+  'blur': [event: FocusEvent]
+  'input': [value: string]
 }
 ```
 
@@ -717,11 +717,7 @@ Do not deprecate:
 ```
 
 ```vue
-<Combobox
-  v-model="value"
-  :options="options"
-  @update:query="query = $event"
->
+<Combobox v-model="value" :options="options" @update:query="query = $event">
   <template #item-create-new="{ item, query }">
     Create "{{ query }}"
   </template>
@@ -782,8 +778,7 @@ const users = fetchedUsers.map((user) => ({
   label: user.name,
   value: user.id,
   slots: {
-    prefix: ({ item }) =>
-      h(Avatar, { image: item.image, class: 'size-4' }),
+    prefix: ({ item }) => h(Avatar, { image: item.image, class: 'size-4' }),
   },
 }))
 ```
@@ -843,7 +838,7 @@ continues to work unchanged through `v1.x`.
 - **Slot-prop symmetry across `#trigger` / `#prefix` / `#suffix`.** All
   three slots now receive the same shape (`ComboboxSlotProps`). `#prefix`
   previously received no props; it now gets `{ open, disabled, query,
-  selectedOption, displayValue }` for parity. `selectedOption` is always
+selectedOption, displayValue }` for parity. `selectedOption` is always
   `null` inside `#prefix` because the prefix only renders pre-selection,
   but the field is exposed for symmetry. The matching change was made on
   `MultiSelect` (added `query` to `#trigger`; aligned `#suffix`) and
diff --git a/v1-release/08f-dialog-spec.md b/v1-release/08f-dialog-spec.md
index 9490261c2..dd440e33f 100644
--- a/v1-release/08f-dialog-spec.md
+++ b/v1-release/08f-dialog-spec.md
@@ -7,7 +7,7 @@ This document defines the exact public API for `Dialog` and the imperative `dial
 Architectural calls in this spec are recorded as ADRs:
 
 - [`adr/0001-single-dialog-component.md`](./adr/0001-single-dialog-component.md) — why we ship one `<Dialog>` and not `<Dialog>` + `<AlertDialog>`.
-- [`adr/0002-imperative-dialog-caller-closes.md`](./adr/0002-imperative-dialog-caller-closes.md) — *superseded.* Original plan: imperative API resolves on click, caller calls `close()`.
+- [`adr/0002-imperative-dialog-caller-closes.md`](./adr/0002-imperative-dialog-caller-closes.md) — _superseded._ Original plan: imperative API resolves on click, caller calls `close()`.
 - [`adr/0003-imperative-dialog-onconfirm.md`](./adr/0003-imperative-dialog-onconfirm.md) — why the imperative API ended up callback-based (`onConfirm` with auto-close, throw to stay open), reversing ADR-0002.
 
 ## Role
@@ -18,20 +18,20 @@ Apps reach for the imperative `dialog.*` helpers when they need a one-off confir
 
 ## Decisions at a glance
 
-| Decision | Direction |
-|---|---|
-| Component count | One `<Dialog>` only — no `<AlertDialog>` |
-| ARIA role | `role="dialog"` always |
-| Visibility model | `v-model:open` (canonical) **and** `v-model` (also supported) |
-| Prop surface | Flat top-level props; `options` blob retained as deprecated alias |
-| Dismiss control | `dismissible: boolean` (default `true`); replaces `disableOutsideClickToClose` |
-| Chrome control | `bare: boolean` (default `false`); replaces the legacy `#body` slot |
-| Close button | `showCloseButton: boolean` (default `true`); independent of header |
-| Size scale | All 11 sizes kept (`xs` → `7xl`); maps to Tailwind `max-w-*` |
-| Color vocabulary | `theme` with color names (`'yellow' \| 'blue' \| 'red' \| 'green'`), matching `Alert.theme`. No semantic axis. |
-| Slots | Canonical: `#default`, `#title`, `#actions`. Legacy slots deprecated with internal forwarding. |
-| Imperative API | Callback-based `dialog.confirm`, `dialog.danger`, `dialog.prompt`. `onConfirm` resolving auto-closes; throwing keeps the dialog open with the thrown message rendered inline. Each helper returns a synchronous `DialogHandle` for programmatic dismissal. |
-| Mount mechanism | `<FrappeUIProvider>` renders `<Dialogs />` next to `<Toasts />`. `<Dialogs />` is still exported for callers who don't use the provider. |
+| Decision         | Direction                                                                                                                                                                                                                                                  |
+| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Component count  | One `<Dialog>` only — no `<AlertDialog>`                                                                                                                                                                                                                   |
+| ARIA role        | `role="dialog"` always                                                                                                                                                                                                                                     |
+| Visibility model | `v-model:open` (canonical) **and** `v-model` (also supported)                                                                                                                                                                                              |
+| Prop surface     | Flat top-level props; `options` blob retained as deprecated alias                                                                                                                                                                                          |
+| Dismiss control  | `dismissible: boolean` (default `true`); replaces `disableOutsideClickToClose`                                                                                                                                                                             |
+| Chrome control   | `bare: boolean` (default `false`); replaces the legacy `#body` slot                                                                                                                                                                                        |
+| Close button     | `showCloseButton: boolean` (default `true`); independent of header                                                                                                                                                                                         |
+| Size scale       | All 11 sizes kept (`xs` → `7xl`); maps to Tailwind `max-w-*`                                                                                                                                                                                               |
+| Color vocabulary | `theme` with color names (`'yellow' \| 'blue' \| 'red' \| 'green'`), matching `Alert.theme`. No semantic axis.                                                                                                                                             |
+| Slots            | Canonical: `#default`, `#title`, `#actions`. Legacy slots deprecated with internal forwarding.                                                                                                                                                             |
+| Imperative API   | Callback-based `dialog.confirm`, `dialog.danger`, `dialog.prompt`. `onConfirm` resolving auto-closes; throwing keeps the dialog open with the thrown message rendered inline. Each helper returns a synchronous `DialogHandle` for programmatic dismissal. |
+| Mount mechanism  | `<FrappeUIProvider>` renders `<Dialogs />` next to `<Toasts />`. `<Dialogs />` is still exported for callers who don't use the provider.                                                                                                                   |
 
 ## Exact public API for v1
 
@@ -39,8 +39,17 @@ Apps reach for the imperative `dialog.*` helpers when they need a one-off confir
 
 ```ts
 type DialogSize =
-  | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-  | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl'
+  | 'xs'
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | '2xl'
+  | '3xl'
+  | '4xl'
+  | '5xl'
+  | '6xl'
+  | '7xl'
 
 type DialogTheme = 'yellow' | 'blue' | 'red' | 'green'
 
@@ -84,17 +93,17 @@ interface DialogProps {
   icon?: string | DialogIcon
 
   // Layout.
-  size?: DialogSize                 // default 'lg'
-  position?: DialogPosition         // default 'center'
+  size?: DialogSize // default 'lg'
+  position?: DialogPosition // default 'center'
   paddingTop?: string | number
 
   // Actions.
   actions?: DialogAction[]
 
   // Behavior.
-  dismissible?: boolean             // default true
-  showCloseButton?: boolean         // default true
-  bare?: boolean                    // default false
+  dismissible?: boolean // default true
+  showCloseButton?: boolean // default true
+  bare?: boolean // default false
 
   // Deprecated (still supported, warn once).
   disableOutsideClickToClose?: boolean
@@ -113,10 +122,10 @@ interface DialogProps {
 
 ### Slots
 
-| Slot | Scope | Purpose |
-|---|---|---|
-| `#default` | — | Main content, rendered inside the padded card. |
-| `#title` | — | Title area; accepts arbitrary content (extra buttons next to title, etc.). |
+| Slot       | Scope                | Purpose                                                                                                                      |
+| ---------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| `#default` | —                    | Main content, rendered inside the padded card.                                                                               |
+| `#title`   | —                    | Title area; accepts arbitrary content (extra buttons next to title, etc.).                                                   |
 | `#actions` | `{ close, actions }` | Footer override; `actions` is the reactive action list (with `loading`) so callers can re-lay-out the auto-rendered buttons. |
 
 **Slot precedence rules:**
@@ -128,22 +137,22 @@ interface DialogProps {
 
 **Deprecated slots** (warn once, internally forwarded to the canonical slot):
 
-| Legacy slot | Forwards to | Notes |
-|---|---|---|
-| `#body-content` | `#default` | Most-common legacy slot (~85% of legacy usage). |
-| `#body-main` | `#default` | Auto-header conditional on title makes these equivalent. |
-| `#body-title` | `#title` | Direct rename. |
-| `#body-header` | — | No replacement — extras go in `#title`. Warns + renders nothing. |
-| `#body` | `#default` + `bare` | Apps using `#body` for full layout control migrate to `bare` + `#default`. Codemod-able. |
+| Legacy slot     | Forwards to         | Notes                                                                                    |
+| --------------- | ------------------- | ---------------------------------------------------------------------------------------- |
+| `#body-content` | `#default`          | Most-common legacy slot (~85% of legacy usage).                                          |
+| `#body-main`    | `#default`          | Auto-header conditional on title makes these equivalent.                                 |
+| `#body-title`   | `#title`            | Direct rename.                                                                           |
+| `#body-header`  | —                   | No replacement — extras go in `#title`. Warns + renders nothing.                         |
+| `#body`         | `#default` + `bare` | Apps using `#body` for full layout control migrate to `bare` + `#default`. Codemod-able. |
 
 ### Events
 
-| Event | Payload | Notes |
-|---|---|---|
-| `update:open` | `boolean` | Fires for `v-model:open`. |
-| `update:modelValue` | `boolean` | Fires for `v-model` (bare). Same value as `update:open`. |
-| `close` | — | Fires when the dialog transitions to closed. |
-| `after-leave` | — | Fires after the close animation finishes. Used heavily in apps for form-reset patterns. |
+| Event               | Payload   | Notes                                                                                   |
+| ------------------- | --------- | --------------------------------------------------------------------------------------- |
+| `update:open`       | `boolean` | Fires for `v-model:open`.                                                               |
+| `update:modelValue` | `boolean` | Fires for `v-model` (bare). Same value as `update:open`.                                |
+| `close`             | —         | Fires when the dialog transitions to closed.                                            |
+| `after-leave`       | —         | Fires after the close animation finishes. Used heavily in apps for form-reset patterns. |
 
 ### ARIA
 
@@ -212,12 +221,12 @@ type DialogAction = Omit<ButtonProps, 'onClick' | 'loading'> & {
 interface ConfirmArgs {
   title?: string
   message?: string
-  confirmLabel?: string          // default 'Confirm'; ignored when actions[] is set
-  cancelLabel?: string           // default 'Cancel';  ignored when actions[] is set
-  theme?: DialogTheme            // colors the confirm button + picks default icon
-  icon?: string | DialogIcon     // overrides theme-derived default icon
-  size?: DialogSize              // default 'md'
-  dismissible?: boolean          // default true
+  confirmLabel?: string // default 'Confirm'; ignored when actions[] is set
+  cancelLabel?: string // default 'Cancel';  ignored when actions[] is set
+  theme?: DialogTheme // colors the confirm button + picks default icon
+  icon?: string | DialogIcon // overrides theme-derived default icon
+  size?: DialogSize // default 'md'
+  dismissible?: boolean // default true
   onConfirm?: (ctx: DialogControl) => void | Promise<void>
   onCancel?: () => void | Promise<void>
   /**
@@ -239,12 +248,12 @@ interface PromptArgs {
   title?: string
   message?: string
   fields: PromptField[]
-  confirmLabel?: string          // default 'Submit'
-  cancelLabel?: string           // default 'Cancel'
+  confirmLabel?: string // default 'Submit'
+  cancelLabel?: string // default 'Cancel'
   theme?: DialogTheme
   icon?: string | DialogIcon
-  size?: DialogSize              // default 'md'
-  dismissible?: boolean          // default true
+  size?: DialogSize // default 'md'
+  dismissible?: boolean // default true
   onConfirm: (ctx: PromptControl) => void | Promise<void>
   onCancel?: () => void | Promise<void>
 }
@@ -270,13 +279,22 @@ interface BasePromptField {
 
 type PromptField =
   | (BasePromptField & { type?: 'text' | 'textarea'; defaultValue?: string })
-  | (BasePromptField & { type: 'select'; defaultValue?: string;
-                         options: Array<{ label: string; value: string }> })
+  | (BasePromptField & {
+      type: 'select'
+      defaultValue?: string
+      options: Array<{ label: string; value: string }>
+    })
   | (BasePromptField & { type: 'checkbox'; defaultValue?: boolean })
-  | (BasePromptField & { type: 'combobox'; defaultValue?: string;
-                         options: ComboboxOption[]; allowCreate?: boolean })
-
-interface DialogHandle { close: () => void }
+  | (BasePromptField & {
+      type: 'combobox'
+      defaultValue?: string
+      options: ComboboxOption[]
+      allowCreate?: boolean
+    })
+
+interface DialogHandle {
+  close: () => void
+}
 
 declare const dialog: {
   confirm(args: ConfirmArgs): DialogHandle
@@ -287,12 +305,12 @@ declare const dialog: {
 
 ### Lifecycle contract
 
-| `onConfirm` outcome | Result |
-|---|---|
-| Resolves | Dialog auto-closes |
-| Throws / rejects | Dialog stays open. Thrown message is extracted via the internal `extractErrorMessage` (Frappe `messages[]`, `Error.message`, plain string, generic fallback) and rendered inline. Buttons re-enable. |
-| Calls `ctx.close()` before/during the await | Dialog closes immediately; the trailing auto-close is an idempotent no-op |
-| Calls `ctx.setError(msg)` without throwing | Inline error is set, but the dialog **still auto-closes** when `onConfirm` resolves. To stay open with an error, throw instead. |
+| `onConfirm` outcome                         | Result                                                                                                                                                                                               |
+| ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Resolves                                    | Dialog auto-closes                                                                                                                                                                                   |
+| Throws / rejects                            | Dialog stays open. Thrown message is extracted via the internal `extractErrorMessage` (Frappe `messages[]`, `Error.message`, plain string, generic fallback) and rendered inline. Buttons re-enable. |
+| Calls `ctx.close()` before/during the await | Dialog closes immediately; the trailing auto-close is an idempotent no-op                                                                                                                            |
+| Calls `ctx.setError(msg)` without throwing  | Inline error is set, but the dialog **still auto-closes** when `onConfirm` resolves. To stay open with an error, throw instead.                                                                      |
 
 The confirm/submit button shows a loading spinner for as long as the `onConfirm` promise is pending. When `actions[]` is supplied, each action tracks its own loading state — the clicked button spins; every other button disables until it settles.
 
@@ -304,13 +322,13 @@ Each helper returns `{ close }` synchronously, so callers can dismiss the dialog
 
 When `theme` is set without an explicit `icon`, the helper uses these defaults (all overridable):
 
-| `theme` | Default icon | Confirm button color |
-|---|---|---|
-| `red` | `lucide-alert-triangle` | red solid |
-| `yellow` | `lucide-alert-triangle` | default solid (Button doesn't have a `yellow` theme — icon theme is honored, button falls back) |
-| `blue` | `lucide-info` | blue solid |
-| `green` | `lucide-check-circle` | green solid |
-| *(unset)* | none | default solid |
+| `theme`   | Default icon            | Confirm button color                                                                            |
+| --------- | ----------------------- | ----------------------------------------------------------------------------------------------- |
+| `red`     | `lucide-alert-triangle` | red solid                                                                                       |
+| `yellow`  | `lucide-alert-triangle` | default solid (Button doesn't have a `yellow` theme — icon theme is honored, button falls back) |
+| `blue`    | `lucide-info`           | blue solid                                                                                      |
+| `green`   | `lucide-check-circle`   | green solid                                                                                     |
+| _(unset)_ | none                    | default solid                                                                                   |
 
 `dialog.danger` pins `theme: 'red'` and inherits the alert-triangle default.
 
@@ -357,11 +375,19 @@ dialog.confirm({
   message: 'A page with this name already exists. Create a copy or replace?',
   actions: [
     { label: 'Cancel', variant: 'outline' },
-    { label: 'Create copy', onClick: async () => { await api.copy() } },
+    {
+      label: 'Create copy',
+      onClick: async () => {
+        await api.copy()
+      },
+    },
     {
       label: 'Replace',
-      variant: 'solid', theme: 'red',
-      onClick: async () => { await api.replace() },
+      variant: 'solid',
+      theme: 'red',
+      onClick: async () => {
+        await api.replace()
+      },
     },
   ],
 })
@@ -403,18 +429,18 @@ socket.once('upload:done', () => handle.close())
 
 Each deprecated surface keeps working in v1, emits a one-time dev-mode console warning (per instance / per session), and includes the canonical replacement in the message.
 
-| Deprecated | Replacement |
-|---|---|
-| `options` blob prop | Flat top-level props |
-| `disableOutsideClickToClose` | `dismissible` (inverted) |
-| `icon: { appearance: 'warning' \| 'info' \| 'danger' \| 'success' }` | `icon: { theme: 'yellow' \| 'blue' \| 'red' \| 'green' }` |
-| `#body-content`, `#body-main` slots | `#default` |
-| `#body-title` slot | `#title` |
-| `#body-header` slot | (no replacement — use `#title` for extras) |
-| `#body` slot | `#default` + `bare` prop |
-| `action.onClick(callableContext)` shim | `action.onClick({ close })` |
-| `confirmDialog()` helper | `dialog.confirm()` |
-| `ConfirmDialog.vue` component | mounted internally by `dialog.confirm()`; not part of v1 public surface |
+| Deprecated                                                           | Replacement                                                             |
+| -------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| `options` blob prop                                                  | Flat top-level props                                                    |
+| `disableOutsideClickToClose`                                         | `dismissible` (inverted)                                                |
+| `icon: { appearance: 'warning' \| 'info' \| 'danger' \| 'success' }` | `icon: { theme: 'yellow' \| 'blue' \| 'red' \| 'green' }`               |
+| `#body-content`, `#body-main` slots                                  | `#default`                                                              |
+| `#body-title` slot                                                   | `#title`                                                                |
+| `#body-header` slot                                                  | (no replacement — use `#title` for extras)                              |
+| `#body` slot                                                         | `#default` + `bare` prop                                                |
+| `action.onClick(callableContext)` shim                               | `action.onClick({ close })`                                             |
+| `confirmDialog()` helper                                             | `dialog.confirm()`                                                      |
+| `ConfirmDialog.vue` component                                        | mounted internally by `dialog.confirm()`; not part of v1 public surface |
 
 `<Dialogs />` is **not** deprecated — it remains exported and is now rendered by `<FrappeUIProvider>` alongside `<Toasts />`. Apps that already mount it in their template continue to work; rendering it twice is safe (the second mount has no extra effect, but the imperative dialog stack lives in a shared module-level ref so the same stack drives both).
 
diff --git a/v1-release/09-datepicker-audit.md b/v1-release/09-datepicker-audit.md
index f5b6c30bd..6102714d3 100644
--- a/v1-release/09-datepicker-audit.md
+++ b/v1-release/09-datepicker-audit.md
@@ -47,10 +47,10 @@ placement?: DatePickerPlacement
 
 DatePicker has `autoClose: boolean` (default `true`). The selection family uses `keepOpen` on individual items as the escape hatch. At the component level there is no direct equivalent — but the naming `keepOpen` is the established direction. These are inverse booleans of each other:
 
-| Current | v1 equivalent |
-|---|---|
+| Current                     | v1 equivalent               |
+| --------------------------- | --------------------------- |
 | `autoClose: true` (default) | `keepOpen: false` (default) |
-| `autoClose: false` | `keepOpen: true` |
+| `autoClose: false`          | `keepOpen: true`            |
 
 **Fix:** Rename `autoClose` to `keepOpen` with default `false`. Deprecate `autoClose` with a mapping.
 
@@ -115,7 +115,7 @@ All three pickers accept both `value` and `modelValue` with an `||` fallback:
 
 ```ts
 interface DatePickerProps extends CommonDatePickerProps {
-  value?: string      // uncontrolled
+  value?: string // uncontrolled
   modelValue?: string // controlled
 }
 ```
@@ -169,6 +169,7 @@ But the actual emitted value is a comma-separated string like `"2025-01-01,2025-
 **Fix:** Define a separate `DateRangePickerEmits` that makes the format explicit, and document the output format. Consider whether the emitted value should be `string[]` instead of a comma-joined string for a cleaner v1 API.
 
 Option A (keep string, document it):
+
 ```ts
 export type DateRangePickerEmits = {
   /** Emits a comma-separated "YYYY-MM-DD,YYYY-MM-DD" string, or "" when cleared. */
@@ -178,6 +179,7 @@ export type DateRangePickerEmits = {
 ```
 
 Option B (emit array — breaking change from current):
+
 ```ts
 export type DateRangePickerEmits = {
   /** Emits [fromDate, toDate] in YYYY-MM-DD format, or [] when cleared. */
@@ -207,6 +209,7 @@ The `modelValue` prop already accepts `string | string[]`, which suggests Option
 The legacy utility functions it depends on (`getDate`, `getDatesAfter`, `getDaysInMonth`, `isLeapYear`) are also exported from `utils.ts` but are only used by this composable.
 
 **Fix:**
+
 - Mark `useDatePicker` as `@deprecated` in its JSDoc and add a dev-mode warning.
 - Mark the legacy util exports (`getDate`, `getDatesAfter`, `getDaysInMonth`, `isLeapYear`) as `@deprecated`.
 - Keep them exported for the v1 migration window, consistent with the broader deprecation policy.
@@ -227,7 +230,7 @@ The legacy utility functions it depends on (`getDate`, `getDatesAfter`, `getDays
 
 ```html
 <!-- DateTimePicker.vue — missing label -->
-<Button variant="ghost" size="sm" @click="cycleView">
+<button variant="ghost" size="sm" @click="cycleView"></button>
 ```
 
 **Fix:** Add `label="cycle-calendar-view"` to the cycle-view button in `DateTimePicker`.
@@ -276,9 +279,9 @@ type PopoverAlign = 'start' | 'center' | 'end'
 
 interface CommonDatePickerProps {
   // Positioning — aligned with Combobox/Dropdown/Select vocabulary
-  side?: PopoverSide             // default: 'bottom'
-  align?: PopoverAlign           // default: 'start'
-  offset?: number                // default: 4
+  side?: PopoverSide // default: 'bottom'
+  align?: PopoverAlign // default: 'start'
+  offset?: number // default: 4
   /** @deprecated use side + align */
   placement?: DatePickerPlacement
 
@@ -289,17 +292,17 @@ interface CommonDatePickerProps {
   label?: string
 
   // Interaction
-  readonly?: boolean             // prevents typing; popover still opens
-  disabled?: boolean             // prevents all interaction
+  readonly?: boolean // prevents typing; popover still opens
+  disabled?: boolean // prevents all interaction
   clearable?: boolean
-  keepOpen?: boolean             // default: false (closes after selection)
+  keepOpen?: boolean // default: false (closes after selection)
   /** @deprecated use keepOpen: true */
   autoClose?: boolean
 
   // Constraints
-  min?: string                   // YYYY-MM-DD — earliest selectable date
-  max?: string                   // YYYY-MM-DD — latest selectable date
-  isDateUnavailable?: (date: Dayjs) => boolean  // return true to block a date
+  min?: string // YYYY-MM-DD — earliest selectable date
+  max?: string // YYYY-MM-DD — latest selectable date
+  isDateUnavailable?: (date: Dayjs) => boolean // return true to block a date
 
   // Deprecated
   /** @deprecated use readonly instead */
@@ -359,6 +362,7 @@ Slots: `target`, `prefix`, `suffix` (same shape as DatePicker).
 Exposed: `open(): void`
 
 **`dualPane` rendering rules:**
+
 - Only renders the second panel when `view === 'date'` — cycling to month/year falls back to a single panel to avoid duplicate selectors.
 - Right panel always shows the month following `currentMonth` and hides its own prev/Today nav (left panel hides its next nav, so chrome isn't duplicated).
 
@@ -398,12 +402,12 @@ Exposed: `open(): void`
 
 Same four issues as the DatePicker family:
 
-| Current | v1 |
-|---|---|
-| `placement: 'bottom-start' \| ...` | `side` + `align` + `offset` (deprecate `placement`) |
-| `autoClose: boolean` (default `true`) | `keepOpen: boolean` (default `false`); deprecate `autoClose` |
+| Current                                 | v1                                                             |
+| --------------------------------------- | -------------------------------------------------------------- |
+| `placement: 'bottom-start' \| ...`      | `side` + `align` + `offset` (deprecate `placement`)            |
+| `autoClose: boolean` (default `true`)   | `keepOpen: boolean` (default `false`); deprecate `autoClose`   |
 | `allowCustom: boolean` (default `true`) | `readonly: boolean` (default `false`); deprecate `allowCustom` |
-| `value?: string` (uncontrolled) | use `modelValue` / `v-model`; deprecate `value` |
+| `value?: string` (uncontrolled)         | use `modelValue` / `v-model`; deprecate `value`                |
 
 `TimePicker` has no `inputClass` prop, so that fix is N/A.
 
@@ -432,9 +436,9 @@ interface TimePickerProps {
   value?: string
 
   // Positioning
-  side?: PopoverSide       // default: 'bottom'
-  align?: PopoverAlign     // default: 'start'
-  offset?: number          // default: 4
+  side?: PopoverSide // default: 'bottom'
+  align?: PopoverAlign // default: 'start'
+  offset?: number // default: 4
   /** @deprecated use side + align */
   placement?: TimePickerPlacement
 
@@ -444,17 +448,17 @@ interface TimePickerProps {
   use12Hour?: boolean
 
   // Interaction
-  readonly?: boolean       // default: false — prevents typing; popover still opens
+  readonly?: boolean // default: false — prevents typing; popover still opens
   disabled?: boolean
-  keepOpen?: boolean       // default: false (closes after selection)
+  keepOpen?: boolean // default: false (closes after selection)
   /** @deprecated use keepOpen (inverse) */
   autoClose?: boolean
 
   // Options / constraints
   interval?: number
   options?: Array<{ value: string; label?: string }>
-  min?: string             // HH:mm[:ss] — minimum selectable time
-  max?: string             // HH:mm[:ss] — maximum selectable time
+  min?: string // HH:mm[:ss] — minimum selectable time
+  max?: string // HH:mm[:ss] — maximum selectable time
   scrollMode?: 'center' | 'start' | 'nearest'
 
   // Deprecated
@@ -555,17 +559,17 @@ The current footer `#actions` was added during the v1 refactor and has no publis
 
 ### Decisions
 
-| Decision | Direction |
-|---|---|
-| Slot name | `#actions` — kept, matches `Dialog` |
-| Location | Left sidebar inside the popover, divided from the calendar by `divide-x divide-outline-gray-2` |
-| Visibility | Rendered only when the slot is provided. Calendar layout unchanged otherwise. |
-| Styling | Unstyled. Consumer renders their own button list inside `<aside class="flex flex-col p-2 gap-0.5">`. |
-| Popover width | Fixed widths (`w-56` on `DatePicker`) switch to `w-fit` when the sidebar is present. |
-| Footer block | **Removed** from all three components. |
-| Auto Clear button | **Removed.** Consumers who want an in-popover Clear write it inside `#actions` using the `clear` slot prop. |
-| `clearable` prop | Survives. Reduced to an input-level affordance — controls the trigger input's clear `×`, not a popover button. |
-| Migration | None. Behavior-change changelog entry only. |
+| Decision          | Direction                                                                                                      |
+| ----------------- | -------------------------------------------------------------------------------------------------------------- |
+| Slot name         | `#actions` — kept, matches `Dialog`                                                                            |
+| Location          | Left sidebar inside the popover, divided from the calendar by `divide-x divide-outline-gray-2`                 |
+| Visibility        | Rendered only when the slot is provided. Calendar layout unchanged otherwise.                                  |
+| Styling           | Unstyled. Consumer renders their own button list inside `<aside class="flex flex-col p-2 gap-0.5">`.           |
+| Popover width     | Fixed widths (`w-56` on `DatePicker`) switch to `w-fit` when the sidebar is present.                           |
+| Footer block      | **Removed** from all three components.                                                                         |
+| Auto Clear button | **Removed.** Consumers who want an in-popover Clear write it inside `#actions` using the `clear` slot prop.    |
+| `clearable` prop  | Survives. Reduced to an input-level affordance — controls the trigger input's clear `×`, not a popover button. |
+| Migration         | None. Behavior-change changelog entry only.                                                                    |
 
 ### Slot props
 
@@ -573,7 +577,7 @@ The current footer `#actions` was added during the v1 refactor and has no publis
 
 ```ts
 interface DatePickerActionsSlotProps {
-  selected: string                                     // 'YYYY-MM-DD' or ''
+  selected: string // 'YYYY-MM-DD' or ''
   setDate: (date: string | Date | Dayjs) => void
   clear: () => void
   close: () => void
@@ -587,16 +591,14 @@ interface DateRangePickerActionsSlotProps {
   setDate: (date: string | Date | Dayjs) => void
 
   /** Commits both endpoints atomically; normalizes order. */
-  setRange: (
-    range: [string | Date | Dayjs, string | Date | Dayjs],
-  ) => void
+  setRange: (range: [string | Date | Dayjs, string | Date | Dayjs]) => void
 
   clear: () => void
   close: () => void
 }
 
 interface DateTimePickerActionsSlotProps extends DatePickerActionsSlotProps {
-  time: string                                         // 'HH:mm:ss' or ''
+  time: string // 'HH:mm:ss' or ''
 }
 ```
 
@@ -644,17 +646,20 @@ interface DateTimePickerActionsSlotProps extends DatePickerActionsSlotProps {
 ## Execution checklist
 
 **Vocab alignment**
+
 - [ ] Replace `placement` with `side` + `align` + `offset`; deprecate `placement` with internal mapping
 - [ ] Rename `autoClose` → `keepOpen` (default `false`); deprecate `autoClose`
 - [ ] Deprecate `allowCustom`; document `readonly` as the replacement
 - [ ] Deprecate `inputClass`; document `class` on the component element as the replacement
 
 **Constraints**
+
 - [x] Add `min` / `max` to `CommonDatePickerProps` (all three pickers). On `DateTimePicker`, deprecate `minDateTime`/`maxDateTime` as aliases.
 - [x] Add `isDateUnavailable?: (date: Dayjs) => boolean` to `CommonDatePickerProps`
 - [x] Lift date-disabling logic from `DateTimePicker` into a shared util; wire it into `DatePicker` and `DateRangePicker`
 
 **Structural fixes**
+
 - [ ] Replace `FeatherIcon` with `LucideChevronDown` in all three pickers
 - [ ] Add `DateTimePickerProps` to `types.ts` and export it
 - [ ] Define and export `DateRangePickerEmits`; decide comma-string vs `string[]` before freeze
@@ -664,11 +669,13 @@ interface DateTimePickerActionsSlotProps extends DatePickerActionsSlotProps {
 - [ ] Add `defineExpose({ open })` to `DatePicker` and `DateTimePicker`
 
 **Deprecations**
+
 - [ ] Add `@deprecated` warning for `value` prop (dev-mode warn, all three pickers)
 - [ ] Deprecate `useDatePicker` composable (JSDoc + dev-mode warning)
 - [ ] Deprecate legacy util exports: `getDate`, `getDatesAfter`, `getDaysInMonth`, `isLeapYear`
 
 **TimePicker**
+
 - [ ] Add `side` / `align` / `offset` to `TimePickerProps`; deprecate `placement` with internal mapping
 - [ ] Add `keepOpen` (default `false`); deprecate `autoClose` with inverse mapping
 - [ ] Add `readonly` prop; deprecate `allowCustom`; internal trigger reads `props.readonly || props.allowCustom === false`
@@ -677,6 +684,7 @@ interface DateTimePickerActionsSlotProps extends DatePickerActionsSlotProps {
 - [x] Add `min`/`max` props; deprecate `minTime`/`maxTime` with internal fallback
 
 **`#actions` slot relocation**
+
 - [ ] Move `#actions` rendering from footer to left sidebar in `DatePicker`, `DateRangePicker`, `DateTimePicker`
 - [ ] Delete the footer `<div v-if="$slots.actions || (clearable && …)">` block from all three components
 - [ ] Switch fixed-width popovers to `w-fit` when `$slots.actions` is present
@@ -688,5 +696,6 @@ interface DateTimePickerActionsSlotProps extends DatePickerActionsSlotProps {
 - [ ] Changelog entry: behavior change — `#actions` moved to sidebar, footer removed, in-popover auto Clear removed
 
 **Docs**
+
 - [ ] Regenerate `docs/meta/DatePicker.md` after API changes
 - [ ] Regenerate `docs/meta/TimePicker.md` after API changes
diff --git a/v1-release/09-input-components-spec.md b/v1-release/09-input-components-spec.md
index 88808085b..3740617a7 100644
--- a/v1-release/09-input-components-spec.md
+++ b/v1-release/09-input-components-spec.md
@@ -172,15 +172,15 @@ export type InputVariant = 'subtle' | 'outline' | 'ghost'
 
 Apply per component:
 
-| Component      | Size type   | Variant type       |
-| -------------- | ----------- | ------------------ |
-| `TextInput`    | `InputSize` | `InputVariant`     |
-| `Textarea`     | `InputSize` | `InputVariant`     |
-| `Password`     | `InputSize` | `InputVariant`     |
-| `Rating`       | `InputSize` | n/a                |
-| `Checkbox`     | `ToggleSize`| n/a                |
-| `Switch`       | `ToggleSize`| n/a                |
-| `Slider`       | `ToggleSize`| n/a                |
+| Component   | Size type    | Variant type   |
+| ----------- | ------------ | -------------- |
+| `TextInput` | `InputSize`  | `InputVariant` |
+| `Textarea`  | `InputSize`  | `InputVariant` |
+| `Password`  | `InputSize`  | `InputVariant` |
+| `Rating`    | `InputSize`  | n/a            |
+| `Checkbox`  | `ToggleSize` | n/a            |
+| `Switch`    | `ToggleSize` | n/a            |
+| `Slider`    | `ToggleSize` | n/a            |
 
 Rationale: `lg` and `xl` produce useful visual range for text inputs and
 trigger surfaces but produce oversized chunky controls for binary
@@ -192,11 +192,11 @@ not API symmetry.
 Every input uses `defineModel<T>()` for the primary value:
 
 ```ts
-const model = defineModel<string>()             // TextInput, Textarea, Password
-const model = defineModel<boolean>()            // Switch
-const model = defineModel<boolean | 1 | 0>()    // Checkbox (union retained for v1; coerce internally)
-const model = defineModel<number>()             // Rating
-const model = defineModel<SliderValue>()        // Slider
+const model = defineModel<string>() // TextInput, Textarea, Password
+const model = defineModel<boolean>() // Switch
+const model = defineModel<boolean | 1 | 0>() // Checkbox (union retained for v1; coerce internally)
+const model = defineModel<number>() // Rating
+const model = defineModel<SliderValue>() // Slider
 ```
 
 Typed `*Emits` interfaces are added only when a component emits non-model
@@ -361,17 +361,17 @@ Rules:
 
 ### Wired warnings for v1
 
-| Component / API                     | Warning name                       | Replacement                  |
-| ----------------------------------- | ---------------------------------- | ---------------------------- |
-| `Input.vue`                         | `Input`                            | `TextInput`                  |
-| `Autocomplete`                      | `Autocomplete`                     | `Combobox` or `MultiSelect`  |
-| `FormControl type='autocomplete'`   | `FormControl type="autocomplete"`  | Use `Combobox` standalone    |
-| `Password.value` prop               | `Password.value`                   | `v-model` / `modelValue`     |
-| `Rating.rating_from` prop           | `Rating.rating_from`               | `max`                        |
-| `Switch.change` emit                | `Switch.change`                    | `update:modelValue` / `v-model` |
-| `Switch.labelClasses` prop          | `Switch.labelClasses`              | `data-*` styling hooks       |
-| `Checkbox.padding` prop             | `Checkbox.padding`                 | `data-*` styling hooks       |
-| `Divider.action.handler` (existing) | `Divider.action.handler`           | `Divider.action.onClick`     |
+| Component / API                     | Warning name                      | Replacement                     |
+| ----------------------------------- | --------------------------------- | ------------------------------- |
+| `Input.vue`                         | `Input`                           | `TextInput`                     |
+| `Autocomplete`                      | `Autocomplete`                    | `Combobox` or `MultiSelect`     |
+| `FormControl type='autocomplete'`   | `FormControl type="autocomplete"` | Use `Combobox` standalone       |
+| `Password.value` prop               | `Password.value`                  | `v-model` / `modelValue`        |
+| `Rating.rating_from` prop           | `Rating.rating_from`              | `max`                           |
+| `Switch.change` emit                | `Switch.change`                   | `update:modelValue` / `v-model` |
+| `Switch.labelClasses` prop          | `Switch.labelClasses`             | `data-*` styling hooks          |
+| `Checkbox.padding` prop             | `Checkbox.padding`                | `data-*` styling hooks          |
+| `Divider.action.handler` (existing) | `Divider.action.handler`          | `Divider.action.onClick`        |
 
 `FeatherIcon` removal is tracked in the broader v1 plan and uses the same
 utility once finalized.
@@ -447,7 +447,7 @@ test/story expectations that apply to every input in scope.
 - `src/utils/warnDeprecated.ts` — dev-mode warning utility (see
   "Deprecations").
 - `src/composables/useInputLabeling.ts` — returns `{ inputId, labelledBy,
-  describedBy, errorMessageId, dataAttrs, hasError }`. Also exports the
+describedBy, errorMessageId, dataAttrs, hasError }`. Also exports the
   shared `InputLabelingProps` and `InputLabelingSlots` interfaces from the
   same module.
 - `src/composables/inputTypes.ts` — exports `InputSize`, `ToggleSize`,
@@ -560,7 +560,7 @@ replace it with the v1 equivalent rather than keeping both. Keep an old
 story only when it covers a real scenario the new stories don't (e.g. an
 integration with another component, a non-obvious prop combination).
 Deprecated APIs still need their own dedicated story per the list above —
-that's separate from rewriting the *primary* examples to use the new
+that's separate from rewriting the _primary_ examples to use the new
 contract.
 
 ### Deprecation wiring
diff --git a/v1-release/11-toast-spec.md b/v1-release/11-toast-spec.md
index 7746079c1..01103243e 100644
--- a/v1-release/11-toast-spec.md
+++ b/v1-release/11-toast-spec.md
@@ -183,16 +183,16 @@ Audit: ~6 callsites pass a numeric `duration`. Each needs `× 1000`.
 
 ### Renamed / removed APIs
 
-| 0.1.x | v1 | Audited callsites |
-|---|---|---|
-| `toast.create({ message, ... })` | `toast(message, { ... })` or `toast.message(message, { ... })` | 5 (helpdesk) |
-| `toast.remove(id)` | `toast.dismiss(id)` | 0 |
-| `toast.removeAll()` | `toast.dismiss()` | 0 |
-| `import { Toasts } from 'frappe-ui'`<br>`<Toasts />` | `<FrappeUIProvider>` wrap, **or** `import { ToastProvider } from 'frappe-ui'`; `<ToastProvider />` | 2 (crm, hrms) |
-| `<ToastProvider>` SFC | `import { ToastProvider } from 'frappe-ui'` (styled wrapper around sonner's `<Toaster>`) | 0 |
-| Options field: `message` | `title` | several (all `toast.create` callsites) |
-| Options field: `closable` | `closeButton` (sonner global) or `dismissible` (per-toast) | several |
-| Options field: `type` (on raw options) | use the type helper instead (`toast.success`, etc.) | n/a |
+| 0.1.x                                                | v1                                                                                                 | Audited callsites                      |
+| ---------------------------------------------------- | -------------------------------------------------------------------------------------------------- | -------------------------------------- |
+| `toast.create({ message, ... })`                     | `toast(message, { ... })` or `toast.message(message, { ... })`                                     | 5 (helpdesk)                           |
+| `toast.remove(id)`                                   | `toast.dismiss(id)`                                                                                | 0                                      |
+| `toast.removeAll()`                                  | `toast.dismiss()`                                                                                  | 0                                      |
+| `import { Toasts } from 'frappe-ui'`<br>`<Toasts />` | `<FrappeUIProvider>` wrap, **or** `import { ToastProvider } from 'frappe-ui'`; `<ToastProvider />` | 2 (crm, hrms)                          |
+| `<ToastProvider>` SFC                                | `import { ToastProvider } from 'frappe-ui'` (styled wrapper around sonner's `<Toaster>`)           | 0                                      |
+| Options field: `message`                             | `title`                                                                                            | several (all `toast.create` callsites) |
+| Options field: `closable`                            | `closeButton` (sonner global) or `dismissible` (per-toast)                                         | several                                |
+| Options field: `type` (on raw options)               | use the type helper instead (`toast.success`, etc.)                                                | n/a                                    |
 
 ### Dropped `toast.promise` extensions
 
@@ -223,7 +223,7 @@ import { toast } from 'frappe-ui'
 export function createToast({ title, message, variant = 'info', duration }) {
   return (toast[variant] ?? toast.info)(title, {
     description: message,
-    duration: duration,  // already in ms in legacy createToast — no conversion
+    duration: duration, // already in ms in legacy createToast — no conversion
   })
 }
 ```
diff --git a/v1-release/changelog.md b/v1-release/changelog.md
index 5fbd47323..7ed5aacdd 100644
--- a/v1-release/changelog.md
+++ b/v1-release/changelog.md
@@ -72,9 +72,13 @@ what changes.
 
 ```ts
 // before
-function onChange(v: string) { const [from, to] = v.split(',') }
+function onChange(v: string) {
+  const [from, to] = v.split(',')
+}
 // after
-function onChange(v: DateRangeValue) { const [from, to] = v } // [] when cleared
+function onChange(v: DateRangeValue) {
+  const [from, to] = v
+} // [] when cleared
 ```
 
 Reactive forms that pass the value through unchanged are unaffected.
@@ -314,36 +318,36 @@ assistive technologies.
 
 ## Deprecation log
 
-| API                                | Replacement                          | Notes                                  |
-| ---------------------------------- | ------------------------------------ | -------------------------------------- |
-| `Divider.action.handler`           | `Divider.action.onClick`             | Warns when set                         |
-| `Password.value` prop              | `v-model` / `modelValue`             | Warns when set                         |
-| `Rating.rating_from` prop          | `max`                                | Silent alias; warns when set           |
-| `Switch.change` emit               | `update:modelValue` / `v-model`      | Warns when bound                       |
-| `Switch.labelClasses` prop         | `data-*` styling hooks               | Warns when set                         |
-| `Checkbox.padding` prop            | `data-*` styling hooks               | Warns when set                         |
-| `Dropdown` `{ group, items }`      | `{ group, options }`                 | Silent alias; warns if both            |
-| Select `#item-*` slot prop `option` | `item`                              | Silent alias; JSDoc only, no runtime warning |
-| `Input.vue`                        | `TextInput`                          | Warns on mount                         |
-| `Autocomplete`                     | `Combobox` or `MultiSelect`          | Warns on mount                         |
-| `FormControl type='autocomplete'`  | `Combobox` standalone                | Warns when type is set                 |
-| DatePicker family `placement`      | `side` + `align` + `offset`          | Mapped internally; warns               |
-| DatePicker family `autoClose`      | `keepOpen` (inverse)                 | Mapped internally; warns               |
-| DatePicker family `allowCustom`    | `typeable: false`                    | Mapped internally; warns               |
-| DatePicker family `readonly`       | `typeable: false`                    | Picker-level only; warns               |
-| DatePicker family `inputClass`     | `class` on the component element     | Warns when set                         |
-| DatePicker family `value` prop     | `v-model` / `modelValue`             | Warns when set                         |
-| DatePicker family `change` emit    | `update:modelValue` / `v-model`      | Warns when bound                       |
-| DatePicker family `#target` slot   | `#trigger`                           | Silent alias; warns                    |
-| `TimePicker.scrollMode`            | none (always centered)               | Warns when set                         |
-| `DateTimePicker.minDateTime`       | `min`                                | Mapped internally; warns               |
-| `DateTimePicker.maxDateTime`       | `max`                                | Mapped internally; warns               |
-| `TimePicker.minTime`               | `min`                                | Mapped internally; warns               |
-| `TimePicker.maxTime`               | `max`                                | Mapped internally; warns               |
-| `useDatePicker` composable         | use picker components directly       | Warns on call                          |
-| `getDate` / `getDatesAfter` / etc. | use picker components directly       | JSDoc only; no runtime warning         |
-| `FeatherIcon`                      | `lucide-*` strings (or a `Component`) | Warns when feather names pass through |
-| Dialog legacy `options` blob       | flat top-level props                 | Warns once per instance                |
-| Dialog `#body*` slots              | `#default` / `#title` / `#actions`   | Warns when used                        |
-| Dialog `icon.appearance`           | `icon.theme`                         | Auto-mapped; warns                     |
-| `confirmDialog()`                  | `dialog.confirm()`                   | Warns on call                          |
+| API                                 | Replacement                           | Notes                                        |
+| ----------------------------------- | ------------------------------------- | -------------------------------------------- |
+| `Divider.action.handler`            | `Divider.action.onClick`              | Warns when set                               |
+| `Password.value` prop               | `v-model` / `modelValue`              | Warns when set                               |
+| `Rating.rating_from` prop           | `max`                                 | Silent alias; warns when set                 |
+| `Switch.change` emit                | `update:modelValue` / `v-model`       | Warns when bound                             |
+| `Switch.labelClasses` prop          | `data-*` styling hooks                | Warns when set                               |
+| `Checkbox.padding` prop             | `data-*` styling hooks                | Warns when set                               |
+| `Dropdown` `{ group, items }`       | `{ group, options }`                  | Silent alias; warns if both                  |
+| Select `#item-*` slot prop `option` | `item`                                | Silent alias; JSDoc only, no runtime warning |
+| `Input.vue`                         | `TextInput`                           | Warns on mount                               |
+| `Autocomplete`                      | `Combobox` or `MultiSelect`           | Warns on mount                               |
+| `FormControl type='autocomplete'`   | `Combobox` standalone                 | Warns when type is set                       |
+| DatePicker family `placement`       | `side` + `align` + `offset`           | Mapped internally; warns                     |
+| DatePicker family `autoClose`       | `keepOpen` (inverse)                  | Mapped internally; warns                     |
+| DatePicker family `allowCustom`     | `typeable: false`                     | Mapped internally; warns                     |
+| DatePicker family `readonly`        | `typeable: false`                     | Picker-level only; warns                     |
+| DatePicker family `inputClass`      | `class` on the component element      | Warns when set                               |
+| DatePicker family `value` prop      | `v-model` / `modelValue`              | Warns when set                               |
+| DatePicker family `change` emit     | `update:modelValue` / `v-model`       | Warns when bound                             |
+| DatePicker family `#target` slot    | `#trigger`                            | Silent alias; warns                          |
+| `TimePicker.scrollMode`             | none (always centered)                | Warns when set                               |
+| `DateTimePicker.minDateTime`        | `min`                                 | Mapped internally; warns                     |
+| `DateTimePicker.maxDateTime`        | `max`                                 | Mapped internally; warns                     |
+| `TimePicker.minTime`                | `min`                                 | Mapped internally; warns                     |
+| `TimePicker.maxTime`                | `max`                                 | Mapped internally; warns                     |
+| `useDatePicker` composable          | use picker components directly        | Warns on call                                |
+| `getDate` / `getDatesAfter` / etc.  | use picker components directly        | JSDoc only; no runtime warning               |
+| `FeatherIcon`                       | `lucide-*` strings (or a `Component`) | Warns when feather names pass through        |
+| Dialog legacy `options` blob        | flat top-level props                  | Warns once per instance                      |
+| Dialog `#body*` slots               | `#default` / `#title` / `#actions`    | Warns when used                              |
+| Dialog `icon.appearance`            | `icon.theme`                          | Auto-mapped; warns                           |
+| `confirmDialog()`                   | `dialog.confirm()`                    | Warns on call                                |
diff --git a/v1-release/migration.md b/v1-release/migration.md
index 0a63cd1d4..460d60fe8 100644
--- a/v1-release/migration.md
+++ b/v1-release/migration.md
@@ -38,16 +38,16 @@ from [`./README.md`](./README.md).
 
 Behavior changes that affect your code even if you don't touch it.
 
-| Change                                                       | Where                                  | Action                                                                 |
-| ------------------------------------------------------------ | -------------------------------------- | ---------------------------------------------------------------------- |
-| `DateRangePicker` emits `[from, to]` tuple                   | `update:modelValue` / `change`         | Update `onChange` handlers that called `.split(',')`.                  |
-| `DateTimePicker` keeps popover open after date click         | Date click no longer auto-closes       | Close from `@update:modelValue`, or add an `#actions` Apply button.    |
-| DatePicker family — footer + auto Clear button removed       | Popover footer                         | Render explicit Clear inside `#actions` if you relied on it.           |
-| `DateRangePicker.clearable` default flipped to `true`        | Prop default                           | Pass `:clearable="false"` if you don't want the clear affordance.      |
-| `Slider` — hardcoded `aria-label="Volume"` removed           | A11y output                            | Pass `label` explicitly (every non-volume site was announced wrong).   |
-| `Slider` — uncontrolled init from `min`                      | Initial render                         | Was rendering with no thumb. No code change needed if you `v-model`.   |
-| `Password.v-model` now works                                 | Two-way binding                        | If you were working around the bug with `:value` + `@input`, simplify. |
-| `Rating` filled stars now render visibly                     | Visual                                 | No code change. Confirm screenshots in tests.                          |
+| Change                                                 | Where                            | Action                                                                 |
+| ------------------------------------------------------ | -------------------------------- | ---------------------------------------------------------------------- |
+| `DateRangePicker` emits `[from, to]` tuple             | `update:modelValue` / `change`   | Update `onChange` handlers that called `.split(',')`.                  |
+| `DateTimePicker` keeps popover open after date click   | Date click no longer auto-closes | Close from `@update:modelValue`, or add an `#actions` Apply button.    |
+| DatePicker family — footer + auto Clear button removed | Popover footer                   | Render explicit Clear inside `#actions` if you relied on it.           |
+| `DateRangePicker.clearable` default flipped to `true`  | Prop default                     | Pass `:clearable="false"` if you don't want the clear affordance.      |
+| `Slider` — hardcoded `aria-label="Volume"` removed     | A11y output                      | Pass `label` explicitly (every non-volume site was announced wrong).   |
+| `Slider` — uncontrolled init from `min`                | Initial render                   | Was rendering with no thumb. No code change needed if you `v-model`.   |
+| `Password.v-model` now works                           | Two-way binding                  | If you were working around the bug with `:value` + `@input`, simplify. |
+| `Rating` filled stars now render visibly               | Visual                           | No code change. Confirm screenshots in tests.                          |
 
 ## Vocabulary cheatsheet
 
@@ -55,16 +55,16 @@ v1 unifies the prop names used across popover-trigger components
 (`Combobox`, `Dropdown`, `Select`, `DatePicker`, `TimePicker`, etc).
 If you've used any of them, the rest will feel familiar.
 
-| Concept                          | v1 vocabulary                              |
-| -------------------------------- | ------------------------------------------ |
-| Popover position                 | `side` + `align` + `offset`                |
-| Close-on-select                  | `keepOpen` (boolean, default `false`)      |
-| Allow typing into the trigger    | `typeable` (boolean, default `true`)       |
-| Constraint range                 | `min` / `max`                              |
-| Two-way bound open state         | `v-model:open`                             |
-| Custom trigger slot              | `#trigger`                                 |
-| Trailing slot (replaces chevron) | `#suffix`                                  |
-| Dismiss via outside click / Esc  | `dismissible` (boolean, default `true`)    |
+| Concept                          | v1 vocabulary                           |
+| -------------------------------- | --------------------------------------- |
+| Popover position                 | `side` + `align` + `offset`             |
+| Close-on-select                  | `keepOpen` (boolean, default `false`)   |
+| Allow typing into the trigger    | `typeable` (boolean, default `true`)    |
+| Constraint range                 | `min` / `max`                           |
+| Two-way bound open state         | `v-model:open`                          |
+| Custom trigger slot              | `#trigger`                              |
+| Trailing slot (replaces chevron) | `#suffix`                               |
+| Dismiss via outside click / Esc  | `dismissible` (boolean, default `true`) |
 
 ---
 
@@ -75,19 +75,19 @@ Migrating existing `Dialog` usages to the flat-prop API. See
 
 ### TL;DR — the migration table
 
-| Before                                     | After                                       | Notes                                                  |
-| ------------------------------------------ | ------------------------------------------- | ------------------------------------------------------ |
-| `v-model="show"`                           | `v-model:open="show"`                       | `:open` is the canonical model name.                   |
-| `:options="{ title: 'X' }"`                | `title="X"`                                 | Flatten every key in `options` to a top-level prop.    |
-| `:options="{ size: 'sm' }"`                | `size="sm"`                                 | Same scale (`xs` → `7xl`).                             |
-| `:options="{ actions: [...] }"`            | `:actions="[...]"`                          | Array-of-`{label, variant, theme, onClick}` unchanged. |
-| `disableOutsideClickToClose`               | `:dismissible="false"`                      | Inverted boolean. Default is `true`.                   |
-| `<template #body-content>…</template>`     | `…` (default slot)                          | Drop the wrapper — content goes in the default slot.   |
-| `<template #body-title>…</template>`       | `<template #title>…</template>`             | Renamed.                                               |
-| `<template #body>…</template>`             | `bare` prop + default slot                  | `bare` opts out of the chrome (no padded card, no auto-header, no auto-actions). |
-| `<template #body-header>…</template>`      | `<template #title>…</template>`             | No direct replacement — put extras in `#title`.        |
-| `onClick: (close) => …`                    | `onClick: ({ close }) => …`                 | Action callbacks now receive an object, not a bare fn. |
-| Manual focus (`ref` + `setTimeout`, `v-focus`, `focus()` in `onMounted`) | `autofocus` attribute on a descendant       | Dialog focuses any `[autofocus]` element on open.       |
+| Before                                                                   | After                                 | Notes                                                                            |
+| ------------------------------------------------------------------------ | ------------------------------------- | -------------------------------------------------------------------------------- |
+| `v-model="show"`                                                         | `v-model:open="show"`                 | `:open` is the canonical model name.                                             |
+| `:options="{ title: 'X' }"`                                              | `title="X"`                           | Flatten every key in `options` to a top-level prop.                              |
+| `:options="{ size: 'sm' }"`                                              | `size="sm"`                           | Same scale (`xs` → `7xl`).                                                       |
+| `:options="{ actions: [...] }"`                                          | `:actions="[...]"`                    | Array-of-`{label, variant, theme, onClick}` unchanged.                           |
+| `disableOutsideClickToClose`                                             | `:dismissible="false"`                | Inverted boolean. Default is `true`.                                             |
+| `<template #body-content>…</template>`                                   | `…` (default slot)                    | Drop the wrapper — content goes in the default slot.                             |
+| `<template #body-title>…</template>`                                     | `<template #title>…</template>`       | Renamed.                                                                         |
+| `<template #body>…</template>`                                           | `bare` prop + default slot            | `bare` opts out of the chrome (no padded card, no auto-header, no auto-actions). |
+| `<template #body-header>…</template>`                                    | `<template #title>…</template>`       | No direct replacement — put extras in `#title`.                                  |
+| `onClick: (close) => …`                                                  | `onClick: ({ close }) => …`           | Action callbacks now receive an object, not a bare fn.                           |
+| Manual focus (`ref` + `setTimeout`, `v-focus`, `focus()` in `onMounted`) | `autofocus` attribute on a descendant | Dialog focuses any `[autofocus]` element on open.                                |
 
 ### Walkthroughs
 
@@ -221,7 +221,8 @@ it. This replaces three common patterns:
 <FormControl ref="titleInput" />
 <script setup>
 watch(show, (val) => {
-  if (val) setTimeout(() => titleInput.value.$el?.querySelector('input')?.focus(), 100)
+  if (val)
+    setTimeout(() => titleInput.value.$el?.querySelector('input')?.focus(), 100)
 })
 </script>
 
@@ -286,8 +287,12 @@ $dialog({
   title: 'Delete',
   message: 'Are you sure?',
   actions: [
-    { label: 'Delete', variant: 'solid', theme: 'red',
-      onClick: ({ hideDialog }) => item.delete().then(hideDialog) },
+    {
+      label: 'Delete',
+      variant: 'solid',
+      theme: 'red',
+      onClick: ({ hideDialog }) => item.delete().then(hideDialog),
+    },
   ],
 })
 
@@ -306,11 +311,11 @@ dialog.danger({
 
 The lifecycle contract:
 
-| `onConfirm` outcome | Result |
-|---|---|
-| Resolves | Dialog auto-closes |
-| Throws / rejects | Dialog stays open; thrown message rendered inline; buttons re-enabled |
-| Calls `ctx.close()` early | Dialog closes immediately (the trailing auto-close is a no-op) |
+| `onConfirm` outcome       | Result                                                                |
+| ------------------------- | --------------------------------------------------------------------- |
+| Resolves                  | Dialog auto-closes                                                    |
+| Throws / rejects          | Dialog stays open; thrown message rendered inline; buttons re-enabled |
+| Calls `ctx.close()` early | Dialog closes immediately (the trailing auto-close is a no-op)        |
 
 Three helpers in the `dialog` namespace:
 
@@ -333,8 +338,21 @@ dialog.confirm({
   message: 'Save before leaving?',
   actions: [
     { label: 'Cancel', variant: 'outline' },
-    { label: 'Discard', theme: 'red', variant: 'subtle', onClick: () => { /* … */ } },
-    { label: 'Save', variant: 'solid', onClick: async () => { await save() } },
+    {
+      label: 'Discard',
+      theme: 'red',
+      variant: 'subtle',
+      onClick: () => {
+        /* … */
+      },
+    },
+    {
+      label: 'Save',
+      variant: 'solid',
+      onClick: async () => {
+        await save()
+      },
+    },
   ],
 })
 ```
@@ -488,6 +506,7 @@ mount `<Dialogs />` directly in their root template.
 ## Legacy components
 
 > ⏳ **TODO.** Replacements:
+>
 > - `Input.vue` → `TextInput`
 > - `Autocomplete` → `Combobox` (single-select) or `MultiSelect`
 > - `FormControl type='autocomplete'` → `Combobox` standalone
@@ -502,6 +521,7 @@ Where structure changed, components expose `data-*` hooks (`data-slot`,
 or class, audit those selectors.
 
 **What about Popover, Toast, and Autocomplete?**
+
 - `Autocomplete` → `Combobox` (single-select) or `MultiSelect`.
 - `Popover` → component-level popovers are owned by the component
   (Combobox, Dropdown, Select, DatePicker). No standalone replacement
diff --git a/v1-release/research/07-selection-components-usage-audit.md b/v1-release/research/07-selection-components-usage-audit.md
index 63e549c3a..986b8c724 100644
--- a/v1-release/research/07-selection-components-usage-audit.md
+++ b/v1-release/research/07-selection-components-usage-audit.md
@@ -85,11 +85,13 @@ Representative files inspected:
 ### Dropdown
 
 **What it is used for**
+
 - By far the dominant menu/action primitive.
 - Used mostly for action menus, not value selection.
 - Common option shape is already very consistent: `label`, `icon`, `onClick`, plus occasional `group`, `hideLabel`, `submenu`, `switch`, `component`, `condition`.
 
 **Default vs custom rendering**
+
 - **Mostly default rendering** for standard action menus:
   - `insights/frontend/src/query/QueryMenu.vue`
   - `meet/frontend/src/components/FloatingControls.vue`
@@ -102,6 +104,7 @@ Representative files inspected:
   - destructive full-width button rows
 
 **Customization patterns found**
+
 - Trigger customization is common:
   - `#default` / slot `{ open }` used to rotate chevrons or style the trigger
   - examples:
@@ -121,6 +124,7 @@ Representative files inspected:
   - `switch`: `drive/frontend/src/pages/Document.vue`
 
 **Main takeaway**
+
 - `Dropdown` is useful and widely adopted.
 - Its biggest weakness is item customization: once consumers need anything beyond the stock row, they often have to take over the whole row shell.
 
@@ -129,6 +133,7 @@ Representative files inspected:
 ### Select
 
 **What it is used for**
+
 - Low-to-moderate usage.
 - Mostly narrow, static enums:
   - status/type/scope/sort choices
@@ -139,11 +144,13 @@ Representative files inspected:
     - `gameplan/frontend/src/pages/People.vue`
 
 **Default vs custom rendering**
+
 - **Almost entirely default rendering.**
 - Only one clear real-world custom option rendering case stood out:
   - `helpdesk/desk/src/components/Settings/SavedReplies/SavedReplyView.vue`
 
 **Customization patterns found**
+
 - Trigger `#prefix` is common:
   - icons before selected value in `gameplan/frontend/src/pages/People.vue`
   - `helpdesk/desk/src/components/Settings/SavedReplies/SavedReplyView.vue`
@@ -153,6 +160,7 @@ Representative files inspected:
   - the component still owns the row shell/hover/selection styling
 
 **Main takeaway**
+
 - Real usage supports keeping `Select` small and boring.
 - It is not where teams are asking for deep rendering flexibility.
 - Its current customization style is better than `Dropdown` because the shell remains component-owned.
@@ -162,6 +170,7 @@ Representative files inspected:
 ### Combobox
 
 **What it is used for**
+
 - Direct use is **much lighter** than `Autocomplete`.
 - Real direct usage is mostly:
   - simple searchable single-selects
@@ -173,6 +182,7 @@ Representative files inspected:
   - `drive/frontend/src/components/DocEditor/components/FontFamily.vue`
 
 **Default vs custom rendering**
+
 - Direct app usage is mostly default/plain.
 - The notable real-world advanced case:
   - `gameplan/frontend/src/components/NewSpaceDialog.vue`
@@ -181,6 +191,7 @@ Representative files inspected:
     - custom “Add New Category” row
 
 **Customization patterns found**
+
 - Per-option custom schema (`type: 'custom'`, `slotName`) exists, but I found only one strong real app usage.
 - I did **not** find meaningful real app usage of Combobox `render` as a public customization pattern.
 - Richer flows still drop to raw headless comboboxes instead of the higher-level component:
@@ -189,6 +200,7 @@ Representative files inspected:
   - `helpdesk/desk/src/components/Settings/Assignment Rules/AssigneeSearch.vue`
 
 **Main takeaway**
+
 - `Combobox` looks more like a lower-level primitive today.
 - The per-option `slotName` / `render` model is real, but not strongly validated by usage.
 
@@ -197,16 +209,19 @@ Representative files inspected:
 ### MultiSelect
 
 **What it is used for**
+
 - Surprisingly light direct usage in the shared component surface.
 - Main-library-style usage found mostly in simple cases:
   - `helpdesk/desk/src/components/Settings/SavedReplies/SavedReplyView.vue`
   - `insights/frontend/src2/query/components/JoinSelectorDialog.vue`
 
 **Default vs custom rendering**
+
 - In the audited real usages, **almost all MultiSelect usage is default**.
 - I did not find meaningful real-world customization of MultiSelect item rendering in app code.
 
 **Adjacent patterns that matter**
+
 - When apps need richer multi-select behavior, they often do **not** use the shared `MultiSelect`:
   - `gameplan/frontend/src/components/MultiSelect.vue`
     - grouped options
@@ -219,6 +234,7 @@ Representative files inspected:
     - uses local `@/components/MultiSelect.vue` for tag-like email/phone entry (`v-model:items`)
 
 **Main takeaway**
+
 - Current shared `MultiSelect` seems underpowered for richer real-world needs.
 - Apps needing grouped/visual/rich multi-pick behavior are building local alternatives.
 
@@ -227,6 +243,7 @@ Representative files inspected:
 ### Autocomplete
 
 **What it is used for**
+
 - This is the most heavily used search-based selection API in real apps.
 - Especially dominant in:
   - `insights/frontend/src`
@@ -234,6 +251,7 @@ Representative files inspected:
   - Helpdesk/CRM/HRMS wrappers for remote link/search fields
 
 **Default vs custom rendering**
+
 - **Mostly default item rendering**, with light customization.
 - Common customizations are:
   - custom trigger/target
@@ -242,6 +260,7 @@ Representative files inspected:
   - app-local wrappers adding `item-label`
 
 **Customization patterns found**
+
 - Good shell-owned customization pattern already exists here:
   - `insights/frontend/src/query/ChartTypeSelector.vue`
     - custom target
@@ -260,6 +279,7 @@ Representative files inspected:
   - `insights/frontend/src2/data_store/ImportTableDialog.vue` uses `v-model:query`
 
 **Main takeaway**
+
 - `Autocomplete` already points to the best customization model in this audit:
   - component owns the row shell
   - consumer customizes sub-parts
@@ -425,7 +445,7 @@ Representative files inspected:
   - `#item-prefix`
   - `#item-label`
   - footer actions  
-  CRM and HRMS have near-equivalent patterns:
+    CRM and HRMS have near-equivalent patterns:
   - `crm/frontend/src/components/Controls/Link.vue`
   - `hrms/frontend/src/components/Link.vue`
 
@@ -472,4 +492,4 @@ Representative files inspected:
    - a separate dedicated picker, not a bloated base `MultiSelect`.
 
 7. **Add `data-*` styling hooks on owned shells.**  
-   This will reduce the need for consumers to replace markup just to change classes.
\ No newline at end of file
+   This will reduce the need for consumers to replace markup just to change classes.
diff --git a/v1-release/research/09-input-components-usage-audit.md b/v1-release/research/09-input-components-usage-audit.md
index 08c6f5f5e..73518b992 100644
--- a/v1-release/research/09-input-components-usage-audit.md
+++ b/v1-release/research/09-input-components-usage-audit.md
@@ -28,18 +28,18 @@ frontends.
 Call-site counts per component, per app. Counts are usage in real app code
 (not stories/tests/docs).
 
-| App         | FormControl | Input (legacy) | Autocomplete | Switch | Checkbox | TextInput | Textarea | ErrorMessage | FileUploader |
-| ----------- | ----------- | -------------- | ------------ | ------ | -------- | --------- | -------- | ------------ | ------------ |
-| gameplan    | 16          | 0              | 2            | 1      | 3        | 7         | 0        | 26           | 3            |
-| helpdesk    | 44          | 1              | 8            | 10     | 7        | 2         | 0        | 20           | 7            |
-| crm         | 15          | 0              | 4            | 0      | 0        | 3         | 0        | 6            | 4            |
-| insights    | 86          | 10             | 48           | 4      | 16       | 3         | 1        | 3            | 2            |
-| drive       | 10          | 1              | 0            | 1      | 0        | 1         | 0        | 3            | 2            |
-| builder     | 2           | 0              | 6            | 6      | 0        | 0         | 1        | 0            | 4            |
-| meet        | 8           | 0              | 0            | 3      | 0        | 0         | 0        | 0            | 0            |
-| slides      | 2           | 0              | 0            | 1      | 1        | 0         | 0        | 0            | 2            |
-| hrms        | 2           | 0              | 4            | 1      | 0        | 0         | 0        | 4            | 1            |
-| **TOTAL**   | **185**     | **12**         | **72**       | **27** | **27**   | **16**    | **2**    | **62**       | **25**       |
+| App       | FormControl | Input (legacy) | Autocomplete | Switch | Checkbox | TextInput | Textarea | ErrorMessage | FileUploader |
+| --------- | ----------- | -------------- | ------------ | ------ | -------- | --------- | -------- | ------------ | ------------ |
+| gameplan  | 16          | 0              | 2            | 1      | 3        | 7         | 0        | 26           | 3            |
+| helpdesk  | 44          | 1              | 8            | 10     | 7        | 2         | 0        | 20           | 7            |
+| crm       | 15          | 0              | 4            | 0      | 0        | 3         | 0        | 6            | 4            |
+| insights  | 86          | 10             | 48           | 4      | 16       | 3         | 1        | 3            | 2            |
+| drive     | 10          | 1              | 0            | 1      | 0        | 1         | 0        | 3            | 2            |
+| builder   | 2           | 0              | 6            | 6      | 0        | 0         | 1        | 0            | 4            |
+| meet      | 8           | 0              | 0            | 3      | 0        | 0         | 0        | 0            | 0            |
+| slides    | 2           | 0              | 0            | 1      | 1        | 0         | 0        | 0            | 2            |
+| hrms      | 2           | 0              | 4            | 1      | 0        | 0         | 0        | 4            | 1            |
+| **TOTAL** | **185**     | **12**         | **72**       | **27** | **27**   | **16**    | **2**    | **62**       | **25**       |
 
 `Rating` had zero call sites across all audited apps.
 `Slider` had ~5 call sites concentrated in `builder` settings panes; not
@@ -53,15 +53,15 @@ through `FormControl type="password"` (1 site).
 
 **Distinct `type=` values in the wild:**
 
-| `type` value     | call sites |
-| ---------------- | ---------- |
-| (implicit text)  | ~35        |
-| `select`         | 39         |
-| `number`         | 18         |
-| `checkbox`       | 16         |
-| `autocomplete`   | 7          |
-| `textarea`       | 6          |
-| `password`       | 1          |
+| `type` value               | call sites                                            |
+| -------------------------- | ----------------------------------------------------- |
+| (implicit text)            | ~35                                                   |
+| `select`                   | 39                                                    |
+| `number`                   | 18                                                    |
+| `checkbox`                 | 16                                                    |
+| `autocomplete`             | 7                                                     |
+| `textarea`                 | 6                                                     |
+| `password`                 | 1                                                     |
 | dynamic (`type=fieldType`) | several — Frappe field introspection in CRM, Helpdesk |
 
 **Wrapper vs router pattern:** every observed call site treats `FormControl`
@@ -247,18 +247,18 @@ straining the API.
 
 ## Summary of locked decisions
 
-| Decision                                  | Data                                              | Locked v1 stance                                        | Migration load |
-| ----------------------------------------- | ------------------------------------------------- | ------------------------------------------------------- | -------------- |
-| `FormControl` scope                       | 185 router uses; 0 wrapper uses; 7 `type='autocomplete'` | Keep router; warn `type='autocomplete'` only           | 2 files (meet, insights) — trivial |
-| `Switch.labelClasses` / `Checkbox.padding`| Both 0 uses on frappe-ui components               | Drop both without a deprecation cycle; standardize on `data-*` hooks | 0 apps |
-| `Input.vue` deprecation                   | 12 call sites, 83% in insights                    | Wire warning; keep functional through `v1.x`            | Mechanical migration |
-| `Autocomplete` direct deprecation         | 72 call sites, 3 stable patterns, app-local wrappers | Wire warning; treat as long-lived legacy through `v1.x` | Defer push to `Combobox` to post-v1 |
-| `Password.value` deprecation              | 0 uses                                            | Wire warning; trivial                                   | 0 apps |
-| `Rating.rating_from` rename               | 0 uses                                            | Ship rename + alias for completeness                    | 0 apps |
-| `Textarea.label` removal                  | 0 uses                                            | Absorb into shared labeling contract                    | 0 apps |
-| `ErrorMessage` `v-html` removal           | 62 uses, all plain string / `Error`               | Safe to drop                                            | 0 apps |
-| `FileUploader` API freeze                 | 25 uses, single universal pattern                 | Confirm freeze; modernize structurally only             | 0 apps |
-| Shared labeling contract on Checkbox      | ~11 uses already passing `label`                  | Implement; usage is already forward-compatible          | 0 apps |
+| Decision                                   | Data                                                     | Locked v1 stance                                                     | Migration load                      |
+| ------------------------------------------ | -------------------------------------------------------- | -------------------------------------------------------------------- | ----------------------------------- |
+| `FormControl` scope                        | 185 router uses; 0 wrapper uses; 7 `type='autocomplete'` | Keep router; warn `type='autocomplete'` only                         | 2 files (meet, insights) — trivial  |
+| `Switch.labelClasses` / `Checkbox.padding` | Both 0 uses on frappe-ui components                      | Drop both without a deprecation cycle; standardize on `data-*` hooks | 0 apps                              |
+| `Input.vue` deprecation                    | 12 call sites, 83% in insights                           | Wire warning; keep functional through `v1.x`                         | Mechanical migration                |
+| `Autocomplete` direct deprecation          | 72 call sites, 3 stable patterns, app-local wrappers     | Wire warning; treat as long-lived legacy through `v1.x`              | Defer push to `Combobox` to post-v1 |
+| `Password.value` deprecation               | 0 uses                                                   | Wire warning; trivial                                                | 0 apps                              |
+| `Rating.rating_from` rename                | 0 uses                                                   | Ship rename + alias for completeness                                 | 0 apps                              |
+| `Textarea.label` removal                   | 0 uses                                                   | Absorb into shared labeling contract                                 | 0 apps                              |
+| `ErrorMessage` `v-html` removal            | 62 uses, all plain string / `Error`                      | Safe to drop                                                         | 0 apps                              |
+| `FileUploader` API freeze                  | 25 uses, single universal pattern                        | Confirm freeze; modernize structurally only                          | 0 apps                              |
+| Shared labeling contract on Checkbox       | ~11 uses already passing `label`                         | Implement; usage is already forward-compatible                       | 0 apps                              |
 
 The audit produced **no surprises against the spec** and **no signals to
 redesign**. Every parked decision now has data behind it and can be promoted
diff --git a/v1-release/research/10-input-v1-coverage-verification.md b/v1-release/research/10-input-v1-coverage-verification.md
index b25585487..623472ab4 100644
--- a/v1-release/research/10-input-v1-coverage-verification.md
+++ b/v1-release/research/10-input-v1-coverage-verification.md
@@ -27,6 +27,7 @@ Grep across all audited apps finds zero direct calls to `Switch.labelClasses` or
 finding stands.
 
 The implementation wires both via `warnDeprecated()` in dev mode:
+
 - `Checkbox.vue:72-74`: `watchEffect(() => { if (props.padding) warnDeprecated(...) })`
 - `Switch.vue:107-110`: `watchEffect(() => { if (props.labelClasses) warnDeprecated(...) })`
 
@@ -55,17 +56,18 @@ on the control element and wrapping label/description/error regions.
 
 Spot-checked across components:
 
-| Component | Control slot | Label slot | Description slot | Error slot | All slots rendered |
-| --------- | ------------ | ---------- | ---------------- | ---------- | ------------------- |
-| TextInput | `data-slot="control"` | `data-slot="label"` (InputLabel) | `data-slot="description"` (InputDescription) | `data-slot="error"` (InputError) | Yes, via LabelingWrapper |
-| Textarea | `data-slot="control"` | `data-slot="label"` | `data-slot="description"` | `data-slot="error"` | Yes |
-| Password | (delegates to TextInput) | — | — | — | Yes, inherited |
-| Checkbox | `data-slot="control"` | `data-slot="label"` | `data-slot="description"` | `data-slot="error"` | Yes, inline-row layout |
-| Switch | `data-slot="control"` | `data-slot="label"` | `data-slot="description"` | `data-slot="error"` | Yes, inline-row layout |
-| Rating | `data-slot="control"` | `data-slot="label"` | `data-slot="description"` | `data-slot="error"` | Yes |
-| Slider | `data-slot="control"` | `data-slot="label"` | `data-slot="description"` | `data-slot="error"` | Yes |
+| Component | Control slot             | Label slot                       | Description slot                             | Error slot                       | All slots rendered       |
+| --------- | ------------------------ | -------------------------------- | -------------------------------------------- | -------------------------------- | ------------------------ |
+| TextInput | `data-slot="control"`    | `data-slot="label"` (InputLabel) | `data-slot="description"` (InputDescription) | `data-slot="error"` (InputError) | Yes, via LabelingWrapper |
+| Textarea  | `data-slot="control"`    | `data-slot="label"`              | `data-slot="description"`                    | `data-slot="error"`              | Yes                      |
+| Password  | (delegates to TextInput) | —                                | —                                            | —                                | Yes, inherited           |
+| Checkbox  | `data-slot="control"`    | `data-slot="label"`              | `data-slot="description"`                    | `data-slot="error"`              | Yes, inline-row layout   |
+| Switch    | `data-slot="control"`    | `data-slot="label"`              | `data-slot="description"`                    | `data-slot="error"`              | Yes, inline-row layout   |
+| Rating    | `data-slot="control"`    | `data-slot="label"`              | `data-slot="description"`                    | `data-slot="error"`              | Yes                      |
+| Slider    | `data-slot="control"`    | `data-slot="label"`              | `data-slot="description"`                    | `data-slot="error"`              | Yes                      |
 
 Data attributes present on control elements:
+
 - `data-state` (always) — `"valid"` (default) or `"invalid"` (when `error` is set); for
   Checkbox/Switch/Rating, also `"checked"` / `"unchecked"` / custom state.
 - `data-size` (when `size` prop is set) — renders from `options.size()` callback in
@@ -78,10 +80,17 @@ Data attributes present on control elements:
 The vocabulary is consistent across all components. No component omits or deviates.
 
 **Consumer expectation:** apps can now write Tailwind selectors like
+
 ```css
-[data-state="invalid"] { @apply ring-red-300; }
-[data-size="lg"] { @apply text-lg; }
-[data-required="true"] { /* required-field styling */ }
+[data-state='invalid'] {
+  @apply ring-red-300;
+}
+[data-size='lg'] {
+  @apply text-lg;
+}
+[data-required='true'] {
+  /* required-field styling */
+}
 ```
 
 **Verdict: covered.** The spec's vocabulary is fully rendered on every input family
@@ -92,6 +101,7 @@ component.
 Three files in the codebase pair hand-rolled `<label>` + frappe-ui input:
 
 **Example:** `frappe_calendar/frontend/src/views/EventForm.vue` (lines ~140–160):
+
 ```vue
 <div class="space-y-2">
   <label class="block text-sm text-ink-gray-7">Location</label>
@@ -104,6 +114,7 @@ Three files in the codebase pair hand-rolled `<label>` + frappe-ui input:
 ```
 
 These call sites are forward-compatible with v1:
+
 1. The hand-rolled label is a `<label>` element with no `for` attribute — it does not
    link to the TextInput's `id`.
 2. If the app later adds the `label` prop to TextInput, v1's InputLabel renders a proper
@@ -128,6 +139,7 @@ the prior audit's ~11 — likely due to component-library expansion or search-pa
 evolution). Sample from the codebase:
 
 **`insights/frontend/src/widgets/SeriesOption.vue`:**
+
 ```vue
 <Checkbox v-model="series.smoothLines" label="Enable Curved Lines" />
 <Checkbox v-model="series.showPoints" label="Show Data Points" />
@@ -136,6 +148,7 @@ evolution). Sample from the codebase:
 
 These v1 components render the label via InputLabel (inline-row layout with the control).
 The rendered DOM is:
+
 ```html
 <div class="inline-flex gap-2 rounded transition">
   <input ... data-slot="control" ... />
@@ -163,6 +176,7 @@ additive; no migration cost.
 ### 2.4 Hand-rolled label + input pairs
 
 One file found (`frappe_calendar/EventForm.vue`). The pattern:
+
 ```vue
 <div class="space-y-2">
   <label class="block text-sm text-ink-gray-7">Location</label>
@@ -185,6 +199,7 @@ aligns with the app's hand-rolled spacing.
 ### 3.1 `Input.vue` (legacy component)
 
 **Real call sites:** 21 found (prior audit: 12).
+
 - `insights/frontend/src`: 19 files
 - `helpdesk/desk/src`: 1 file
 - `drive/frontend/src`: 1 file
@@ -194,6 +209,7 @@ audited codebase. The component exists but the warning is deferred to Wave E. Co
 this is on the Wave E PR checklist.
 
 **Sample usage:**
+
 ```vue
 <Input type="number" min="0" v-model="..." />
 <Input type="password" ... />
@@ -218,6 +234,7 @@ These are all fully functional in v1; the deprecation warning is deferred to Wav
 ### 3.3 `FormControl type='autocomplete'`
 
 **Real call sites:** 9 found (prior audit: 7).
+
 - `meet/frontend/src`: 3
 - `builder/frontend/src`: 2
 - `helpdesk/desk/src`: 3
@@ -234,6 +251,7 @@ through `v1.x`.
 **Real call sites:** 0 found (unchanged).
 
 The `Password.vue` component wires the deprecation:
+
 ```ts
 watchEffect(() => {
   if (props.value != null) {
@@ -255,6 +273,7 @@ No real app does this; the check is defensive.
 **Real call sites:** 0 found (unchanged).
 
 The Rating component wires the alias:
+
 ```ts
 const starCount = computed(() => props.max ?? props.rating_from ?? 5)
 
@@ -277,6 +296,7 @@ The only `@change` on a Switch-like component appears in the frappe-ui test stor
 
 **Implementation:** Switch watches `model` and triggers any `onChange` handler from
 `attrs` (Vue attrs passed to the component), then calls `warnDeprecated()`:
+
 ```ts
 watch(model, (val) => {
   const onChange = attrs.onChange as ... | undefined
@@ -319,6 +339,7 @@ Auditing for `label` or explicit `aria-label`:
 
 **`slides/frontend/src/components/*.vue` (custom SliderInput wrapper):**
 All 9 slider usages pass a `label` prop to the custom `SliderInput` component:
+
 ```vue
 <SliderInput label="Opacity" ... />
 <SliderInput label="Spread" ... />
@@ -340,9 +361,11 @@ break any real call site.
 ## 5. Password — v-model fix
 
 **Real call sites via FormControl type='password':** 1 found (prior audit: 1).
+
 - `helpdesk/desk/src`: 5 Password instances total (not via FormControl)
 
 **Direct `<Password>` component usage:**
+
 - `helpdesk/desk/src`: 5 call sites (using v-model)
 
 None of these rely on the broken `.value` prop pattern. The v-model fix in Wave B
@@ -357,6 +380,7 @@ None of these rely on the broken `.value` prop pattern. The v-model fix in Wave
 ### 6.1 Arbitrary attrs forwarding
 
 **TextInput and Textarea:** Both use `inheritAttrs: false` and forward `$attrs` selectively:
+
 ```ts
 v-bind="{ ...dataAttrs, ...attrsWithoutClassStyle }"
 ```
@@ -379,6 +403,7 @@ custom divs.
 ### 6.3 `error` prop receiving `Error` objects
 
 **Implementation confirmed:** `useInputLabeling()` handles `string | FrappeUIError`:
+
 ```ts
 const errorLines = computed<string[]>(() => {
   const e = props.error
@@ -399,6 +424,7 @@ real usage.
 
 **Implementation:** The inline-row layout stacks description and error below the
 label/control row, indented to align under the label:
+
 ```vue
 <div class="inline-flex gap-2 ...">
   <input ... />
@@ -421,6 +447,7 @@ description prop today, so the visual change is nonbreaking.
 ### 6.5 Rating and Slider with size prop
 
 **Implementation:**
+
 - `Rating.size: InputSize` (controls star count or size — unclear from spec, but the
   component only applies size to label font size; stars stay hardcoded).
 - `Slider.size: ToggleSize` (controls track and thumb proportions).
@@ -434,6 +461,7 @@ description prop today, so the visual change is nonbreaking.
 ## 7. Summary
 
 ### Styling hooks: **covered**
+
 - ✅ `data-*` vocabulary fully rendered on all input components and label/description/error
   regions.
 - ✅ Deprecated `Switch.labelClasses` and `Checkbox.padding` wired with `warnDeprecated()`.
@@ -442,11 +470,13 @@ description prop today, so the visual change is nonbreaking.
 - ✅ Hand-rolled label + input pairs forward-compatible; no visual collision.
 
 ### Shared labeling contract: **covered**
+
 - ✅ 25+ Checkbox instances pass `label` prop; render correctly with inline-row layout.
 - ✅ Textarea and Switch label prop usage at 0; additive without breakage.
 - ✅ Hand-rolled label+input example found; forward-compatible with v1 spacing.
 
 ### Deprecations: **covered (pending Wave E)**
+
 - ✅ `Input.vue`, `Autocomplete`, `FormControl type='autocomplete'` — 21 + 72 + 9 real
   call sites quantified and confirmed functional.
 - ✅ `Password.value`, `Rating.rating_from`, `Switch.change`, `Switch.labelClasses`,
@@ -455,14 +485,17 @@ description prop today, so the visual change is nonbreaking.
   patterns that don't occur in practice).
 
 ### Slider unlabeled: **safe**
+
 - ✅ ~14 Slider call sites all include `label` prop (directly or via wrapper).
 - ✅ Removal of hardcoded `aria-label="Volume"` does not break any real site.
 
 ### Password v-model fix: **safe**
+
 - ✅ 5 direct `<Password>` usages; all use v-model correctly.
 - ✅ Broken `.value` prop pattern not found in real code.
 
 ### New patterns: **no gaps**
+
 - ✅ Arbitrary attrs forwarding working (e.g., `autocomplete`, `name`).
 - ✅ Ref binding supported (not heavily used).
 - ✅ `error: Error | string` contract verified against 62 ErrorMessage call sites.
diff --git a/vite.config.ts b/vite.config.ts
index b430675ff..bc29ffb46 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -10,7 +10,10 @@ export default defineConfig({
   plugins: [
     vue(),
     lucideIcons({
-      componentGlobs: ['src/components/**/*.vue', '!src/components/**/stories/*.vue'],
+      componentGlobs: [
+        'src/components/**/*.vue',
+        '!src/components/**/stories/*.vue',
+      ],
     }),
     coverageEnabled &&
       istanbul({
diff --git a/vite/README.md b/vite/README.md
index 4eb2ccb2c..1082ccde3 100644
--- a/vite/README.md
+++ b/vite/README.md
@@ -73,10 +73,10 @@ instance.
 - Proxies routes like `/api`, `/app`, `/assets`, `/files`, etc.
 - Auto-detects the Frappe port from `common_site_config.json`
 
-| Option   | Description                                    | Default                                          |
-| -------- | ---------------------------------------------- | ------------------------------------------------ |
-| `port`   | Vite dev server port                           | Auto-calculated from `webserver_port`            |
-| `source` | Regex for routes to proxy                      | `'^/(app\|login\|api\|assets\|files\|private)'`  |
+| Option   | Description               | Default                                         |
+| -------- | ------------------------- | ----------------------------------------------- |
+| `port`   | Vite dev server port      | Auto-calculated from `webserver_port`           |
+| `source` | Regex for routes to proxy | `'^/(app\|login\|api\|assets\|files\|private)'` |
 
 ```javascript
 frappeui({
@@ -111,10 +111,10 @@ import LucideArrowRight from '~icons/lucide/arrow-right'
 Auto-generates TypeScript interfaces from Frappe DocType JSON files. Interfaces
 are regenerated only when the source DocType changes.
 
-| Option   | Description                                | Default                  |
-| -------- | ------------------------------------------ | ------------------------ |
-| `input`  | Map of `app_name` → array of doctype names | *(required)*             |
-| `output` | Output file path for generated types       | `src/types/doctypes.ts`  |
+| Option   | Description                                | Default                 |
+| -------- | ------------------------------------------ | ----------------------- |
+| `input`  | Map of `app_name` → array of doctype names | _(required)_            |
+| `output` | Output file path for generated types       | `src/types/doctypes.ts` |
 
 ```javascript
 frappeui({
@@ -166,13 +166,13 @@ directory structure.
 - Sets correct base URLs for Frappe's asset serving
 - Copies the built `index.html` to the specified location (typically in `www/`)
 
-| Option          | Description                          | Default                                   |
-| --------------- | ------------------------------------ | ----------------------------------------- |
-| `outDir`        | Build output directory               | `'../app_name/public/frontend'` (auto)    |
-| `baseUrl`       | Base URL for assets                  | `'/assets/app_name/frontend/'` (auto)     |
-| `indexHtmlPath` | Where to copy built `index.html`     | Inferred from `frontendRoute`             |
-| `emptyOutDir`   | Clear output directory before build  | `true`                                    |
-| `sourcemap`     | Generate source maps                 | `true`                                    |
+| Option          | Description                         | Default                                |
+| --------------- | ----------------------------------- | -------------------------------------- |
+| `outDir`        | Build output directory              | `'../app_name/public/frontend'` (auto) |
+| `baseUrl`       | Base URL for assets                 | `'/assets/app_name/frontend/'` (auto)  |
+| `indexHtmlPath` | Where to copy built `index.html`    | Inferred from `frontendRoute`          |
+| `emptyOutDir`   | Clear output directory before build | `true`                                 |
+| `sourcemap`     | Generate source maps                | `true`                                 |
 
 ```javascript
 frappeui({
diff --git a/vite/doctypeInterfaceGenerator.js b/vite/doctypeInterfaceGenerator.js
index d0e31b92d..d9898d419 100644
--- a/vite/doctypeInterfaceGenerator.js
+++ b/vite/doctypeInterfaceGenerator.js
@@ -114,25 +114,25 @@ export class DocTypeInterfaceGenerator {
     const fields = jsonData.fields
 
     const typeMapping = {
-      Data: 'string',
+      'Data': 'string',
       'Text Editor': 'string',
-      Link: 'string',
-      Table: 'any[]',
+      'Link': 'string',
+      'Table': 'any[]',
       'Table MultiSelect': 'any[]',
-      Percent: 'number',
-      Int: 'number',
-      Float: 'number',
-      Datetime: 'string', // "YYYY-MM-DD HH:MM:SS"
-      Date: 'string', // "YYYY-MM-DD"
-      Check: '0 | 1',
+      'Percent': 'number',
+      'Int': 'number',
+      'Float': 'number',
+      'Datetime': 'string', // "YYYY-MM-DD HH:MM:SS"
+      'Date': 'string', // "YYYY-MM-DD"
+      'Check': '0 | 1',
       'Attach Image': 'string',
       'Dynamic Link': 'string',
       'Small Text': 'string',
-      Color: 'string',
-      Text: 'string',
-      Autocomplete: 'string',
-      Password: 'string',
-      Code: 'string',
+      'Color': 'string',
+      'Text': 'string',
+      'Autocomplete': 'string',
+      'Password': 'string',
+      'Code': 'string',
       'Read Only': 'string',
     }
 
diff --git a/yarn.lock b/yarn.lock
index c3c35e28a..4c25e7067 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -728,6 +728,196 @@
   resolved "https://registry.yarnpkg.com/@open-draft/until/-/until-2.1.0.tgz#0acf32f470af2ceaf47f095cdecd40d68666efda"
   integrity sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg==
 
+"@oxfmt/binding-android-arm-eabi@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-android-arm-eabi/-/binding-android-arm-eabi-0.44.0.tgz#5974105a730c44c7404ef163c5b8b686682fa06d"
+  integrity sha512-5UvghMd9SA/yvKTWCAxMAPXS1d2i054UeOf4iFjZjfayTwCINcC3oaSXjtbZfCaEpxgJod7XiOjTtby5yEv/BQ==
+
+"@oxfmt/binding-android-arm64@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-android-arm64/-/binding-android-arm64-0.44.0.tgz#77f553e42571b99cae390baadc237a84207178bd"
+  integrity sha512-IVudM1BWfvrYO++Khtzr8q9n5Rxu7msUvoFMqzGJVdX7HfUXUDHwaH2zHZNB58svx2J56pmCUzophyaPFkcG/A==
+
+"@oxfmt/binding-darwin-arm64@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-darwin-arm64/-/binding-darwin-arm64-0.44.0.tgz#a43262f59aa8da667db53ba3d454ef1afcef3e18"
+  integrity sha512-eWCLAIKAHfx88EqEP1Ga2yz7qVcqDU5lemn4xck+07bH182hDdprOHjbogyk0In1Djys3T0/pO2JepFnRJ41Mg==
+
+"@oxfmt/binding-darwin-x64@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-darwin-x64/-/binding-darwin-x64-0.44.0.tgz#cd95251cfc545f26a6ee7e664d5bd6df71b4f567"
+  integrity sha512-eHTBznHLM49++dwz07MblQ2cOXyIgeedmE3Wgy4ptUESj38/qYZyRi1MPwC9olQJWssMeY6WI3UZ7YmU5ggvyQ==
+
+"@oxfmt/binding-freebsd-x64@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-freebsd-x64/-/binding-freebsd-x64-0.44.0.tgz#eb3234a5a3c63346d134c3823cc763e01924be01"
+  integrity sha512-jLMmbj0u0Ft43QpkUVr/0v1ZfQCGWAvU+WznEHcN3wZC/q6ox7XeSJtk9P36CCpiDSUf3sGnzbIuG1KdEMEDJQ==
+
+"@oxfmt/binding-linux-arm-gnueabihf@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-0.44.0.tgz#b939bc27eb8be72c7e689b9307ed6086dc683059"
+  integrity sha512-n+A/u/ByK1qV8FVGOwyaSpw5NPNl0qlZfgTBqHeGIqr8Qzq1tyWZ4lAaxPoe5mZqE3w88vn3+jZtMxriHPE7tg==
+
+"@oxfmt/binding-linux-arm-musleabihf@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-0.44.0.tgz#0725a2d091643a00bbacdffaa12e377abf32606c"
+  integrity sha512-5eax+FkxyCqAi3Rw0mrZFr7+KTt/XweFsbALR+B5ljWBLBl8nHe4ADrUnb1gLEfQCJLl+Ca5FIVD4xEt95AwIw==
+
+"@oxfmt/binding-linux-arm64-gnu@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-0.44.0.tgz#416e68d5e536fa19ca8499611fca9928cc2ee9d4"
+  integrity sha512-58l8JaHxSGOmOMOG2CIrNsnkRJAj0YcHQCmvNACniOa/vd1iRHhlPajczegzS5jwMENlqgreyiTR9iNlke8qCw==
+
+"@oxfmt/binding-linux-arm64-musl@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-linux-arm64-musl/-/binding-linux-arm64-musl-0.44.0.tgz#8bb3bd2461b354caa443d093471b347547426e8a"
+  integrity sha512-AlObQIXyVRZ96LbtVljtFq0JqH5B92NU+BQeDFrXWBUWlCKAM0wF5GLfIhCLT5kQ3Sl+U0YjRJ7Alqj5hGQaCg==
+
+"@oxfmt/binding-linux-ppc64-gnu@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-0.44.0.tgz#427a2278fa9aff179d2c66dce29dabe78f907474"
+  integrity sha512-YcFE8/q/BbrCiIiM5piwbkA6GwJc5QqhMQp2yDrqQ2fuVkZ7CInb1aIijZ/k8EXc72qXMSwKpVlBv1w/MsGO/A==
+
+"@oxfmt/binding-linux-riscv64-gnu@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-0.44.0.tgz#587c4381de6e30d9302ddc4b3f40b0cd7af209ee"
+  integrity sha512-eOdzs6RqkRzuqNHUX5C8ISN5xfGh4xDww8OEd9YAmc3OWN8oAe5bmlIqQ+rrHLpv58/0BuU48bxkhnIGjA/ATQ==
+
+"@oxfmt/binding-linux-riscv64-musl@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-linux-riscv64-musl/-/binding-linux-riscv64-musl-0.44.0.tgz#c9e41aa68ebad6966642ef4df4fac17cdd67fa34"
+  integrity sha512-YBgNTxntD/QvlFUfgvh8bEdwOhXiquX8gaofZJAwYa/Xp1S1DQrFVZEeck7GFktr24DztsSp8N8WtWCBwxs0Hw==
+
+"@oxfmt/binding-linux-s390x-gnu@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-0.44.0.tgz#c04ffde3e1e2703704fcdf3875ba08b0c2881334"
+  integrity sha512-GLIh1R6WHWshl/i4QQDNgj0WtT25aRO4HNUWEoitxiywyRdhTFmFEYT2rXlcl9U6/26vhmOqG5cRlMLG3ocaIA==
+
+"@oxfmt/binding-linux-x64-gnu@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-linux-x64-gnu/-/binding-linux-x64-gnu-0.44.0.tgz#b3109a3c8bebb42612d3c684c251d2cdd614c94e"
+  integrity sha512-gZOpgTlOsLcLfAF9qgpTr7FIIFSKnQN3hDf/0JvQ4CIwMY7h+eilNjxq/CorqvYcEOu+LRt1W4ZS7KccEHLOdA==
+
+"@oxfmt/binding-linux-x64-musl@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-linux-x64-musl/-/binding-linux-x64-musl-0.44.0.tgz#26a3c17c0bb4d171cd582986cddbad188ff9534d"
+  integrity sha512-1CyS9JTB+pCUFYFI6pkQGGZaT/AY5gnhHVrQQLhFba6idP9AzVYm1xbdWfywoldTYvjxQJV6x4SuduCIfP3W+A==
+
+"@oxfmt/binding-openharmony-arm64@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-openharmony-arm64/-/binding-openharmony-arm64-0.44.0.tgz#2702d7cfc86821e55878c2bffba5f75430d5107a"
+  integrity sha512-bmEv70Ak6jLr1xotCbF5TxIKjsmQaiX+jFRtnGtfA03tJPf6VG3cKh96S21boAt3JZc+Vjx8PYcDuLj39vM2Pw==
+
+"@oxfmt/binding-win32-arm64-msvc@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-0.44.0.tgz#c0ebbde2b30452d0d36adaa2cb566ab6c31849f0"
+  integrity sha512-yWzB+oCpSnP/dmw85eFLAT5o35Ve5pkGS2uF/UCISpIwDqf1xa7OpmtomiqY/Vzg8VyvMbuf6vroF2khF/+1Vg==
+
+"@oxfmt/binding-win32-ia32-msvc@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-win32-ia32-msvc/-/binding-win32-ia32-msvc-0.44.0.tgz#b6cba86c0f87a95648a10ef3482aa1a1c1d18de9"
+  integrity sha512-TcWpo18xEIE3AmIG2kpr3kz5IEhQgnx0lazl2+8L+3eTopOAUevQcmlr4nhguImNWz0OMeOZrYZOhJNCf16nlQ==
+
+"@oxfmt/binding-win32-x64-msvc@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/@oxfmt/binding-win32-x64-msvc/-/binding-win32-x64-msvc-0.44.0.tgz#61ce119e828b46e2c89254f05529a8c2f7ee25f1"
+  integrity sha512-oj8aLkPJZppIM4CMQNsyir9ybM1Xw/CfGPTSsTnzpVGyljgfbdP0EVUlURiGM0BDrmw5psQ6ArmGCcUY/yABaQ==
+
+"@oxlint/binding-android-arm-eabi@1.66.0":
+  version "1.66.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-android-arm-eabi/-/binding-android-arm-eabi-1.66.0.tgz#0916596bf2c23bcb493d594a3eee5e8d34829934"
+  integrity sha512-f7kq8N51T4phpzqfBpA2qaVTI/KrkCmNwaj3t/97I/WLTDI+UhlP5GL9eER+zVxBhtlx5rKXWByJU1/zDAvyaw==
+
+"@oxlint/binding-android-arm64@1.66.0":
+  version "1.66.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-android-arm64/-/binding-android-arm64-1.66.0.tgz#8e51076e805fe907d1258c932e04f73ec0cb0e37"
+  integrity sha512-xu6QO71tdDS9mjmLZ3AqhtaVHBvdmsOKkYnReNNDgh+XiwnsipeQOIxbiYOOO0iAXycJ+GK0wdMSZP/2j/AmSg==
+
+"@oxlint/binding-darwin-arm64@1.66.0":
+  version "1.66.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-darwin-arm64/-/binding-darwin-arm64-1.66.0.tgz#871514f03858a2aeb186f7fa8275d887c1250dd6"
+  integrity sha512-HZ24VimSOC7mxuEA99e0H2FS0C1yO3+iW13jPRAk+e2njsUs3QeAXsafCDyaIrV/MirdOVez+etQNQsJE43zNQ==
+
+"@oxlint/binding-darwin-x64@1.66.0":
+  version "1.66.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-darwin-x64/-/binding-darwin-x64-1.66.0.tgz#9eb21bf4ed57ce6a348e7de4bac7c0ac8ade8fbd"
+  integrity sha512-awhj8ZvJrrRSnXj7V++rpZvTmnl99L6mi0B7gg7Cp7BN6cKpzuI481bHNLvXGA9GB1/oEgA3ponuyoAc6Md12A==
+
+"@oxlint/binding-freebsd-x64@1.66.0":
+  version "1.66.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-freebsd-x64/-/binding-freebsd-x64-1.66.0.tgz#136e84cbc66d7443e92ad49c7dd9d8d2a7f1efc4"
+  integrity sha512-KQF0oVV21/FjIqkRuL8Q1vh8ECsE5+ocdH5tcqTQ4ZnYuDVoYibQUNfqBjQaUsP6UIIda5Y75Wpm5p4RgQWiWw==
+
+"@oxlint/binding-linux-arm-gnueabihf@1.66.0":
+  version "1.66.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.66.0.tgz#22661b19749a9ed9493b1d07864d4d6af0d1a47c"
+  integrity sha512-9u1rgwZSEXWb30vbFZzQ78HVXBo0WCKNwJ3a2InRUTNMRng+PUDIoSFmA+m4HdUfBaIqftShq8J8qHc+eE/Vig==
+
+"@oxlint/binding-linux-arm-musleabihf@1.66.0":
+  version "1.66.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-1.66.0.tgz#6abeef29cd78b5633241ab994548e0dd453e4373"
+  integrity sha512-Ynot2HR1bHxUaNWoC280MVTDfZuaWuP3XfSMRDhyuZrVjhzoaBCVFlw8h8qeZjWKVUBhPWFIxB7AQTlK8Z2WWg==
+
+"@oxlint/binding-linux-arm64-gnu@1.66.0":
+  version "1.66.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.66.0.tgz#8dd275350cf7d8894f5c677976cc0881b957b456"
+  integrity sha512-xCbgzciGgo+A4aQZEknsNrNiIwY7sU5SfRuMmRjPIvZAgdF34cIHiKvwOsS5XRLjlTVSFwitmq6YclTtHTfU+g==
+
+"@oxlint/binding-linux-arm64-musl@1.66.0":
+  version "1.66.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.66.0.tgz#85991243879377ff29284717853375caac159eee"
+  integrity sha512-hmo+ZB/lHkR1HdDmnziNpzSLmulnUSu10VEqX2Yex7OwvoBAbjJQLvy4gIBRV3AAwWnCvAxKp5Nv1GE6LU1QMg==
+
+"@oxlint/binding-linux-ppc64-gnu@1.66.0":
+  version "1.66.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.66.0.tgz#6664af6365864ae2c73923b4ef2bbf98bb6e03de"
+  integrity sha512-2Invd4Uyy81mVooQC5FBtfxSNrvcX1OxbMlVQ6M2erRrNI2awFYF26YNW2yFxdVFZ4ffNOWKghtMjhnUPsXsVA==
+
+"@oxlint/binding-linux-riscv64-gnu@1.66.0":
+  version "1.66.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-1.66.0.tgz#bf04cd5a047fa0ab9d762c157e11f89329578498"
+  integrity sha512-s0iXPDQVdgayE3RGa/N2DZF7tjgg0TwEtD1sGoDxqPDGrIXgo45H0yHknT0f9A0yteASsweYZtDyTuVlM4aSag==
+
+"@oxlint/binding-linux-riscv64-musl@1.66.0":
+  version "1.66.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-linux-riscv64-musl/-/binding-linux-riscv64-musl-1.66.0.tgz#0977f483945038a61e1227a63418b98bd8d8ba94"
+  integrity sha512-OekL4XFiu7RPK0JIZi8VeHgtIXPREf42t8Cy/rKEsC+P3gcqDgNAAGiyuUOpdbG4wwbfue1q4CHcCO7spSve6w==
+
+"@oxlint/binding-linux-s390x-gnu@1.66.0":
+  version "1.66.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.66.0.tgz#dbfd38e90e7a96195bc6717c05775f1993cd6b47"
+  integrity sha512-Ga1D0kj1SFslm34ThA/BdkUlyAYEnTsXyRC4pF0C5agZSwtGdHYWMTQWemUfBGp4RCG4QWXgdO+HmmmKqOtlBg==
+
+"@oxlint/binding-linux-x64-gnu@1.66.0":
+  version "1.66.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.66.0.tgz#8dddd0602f10e339c912bea8e83b265598209d9f"
+  integrity sha512-p5jfP1wUZe/IC3qpQO84n9DRnf9g3lKRtLBlQq23ykyrDglHcVx7sWmVTlPuU6SBw8mNnPzyOn022G3XZHnlww==
+
+"@oxlint/binding-linux-x64-musl@1.66.0":
+  version "1.66.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-linux-x64-musl/-/binding-linux-x64-musl-1.66.0.tgz#97430162306edec152a514da3c1e9f4bf0333dfc"
+  integrity sha512-vUB/sYlYZorDL1ZD+o9mRv7zbsykrrFRtmgS6R8musZqLtrPRQn1gc1eGpuX+sfdccz42STl/AqldY6XRb2upQ==
+
+"@oxlint/binding-openharmony-arm64@1.66.0":
+  version "1.66.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-openharmony-arm64/-/binding-openharmony-arm64-1.66.0.tgz#d76d198e5b3bfff153b52bcbd9bffaed885ca012"
+  integrity sha512-yde+6p/F59xRkGR9H1HfngWRif1QRJjynZK349l+UI0H6w9hL3G8/AVaTHFyTtLVQ56qtNbX2/5Dc77n1ovnOg==
+
+"@oxlint/binding-win32-arm64-msvc@1.66.0":
+  version "1.66.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.66.0.tgz#945120ca5fe79c6880e0467212d7f6fe61d9f026"
+  integrity sha512-O9GLucgoTdmOrbBX+EjzNe7o/Ze5TFOvXcib6bzUOtBOmj6cV+zw18NgB+cGKAkDw1Pdqs8vGkfHbbsLuDtXWg==
+
+"@oxlint/binding-win32-ia32-msvc@1.66.0":
+  version "1.66.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-win32-ia32-msvc/-/binding-win32-ia32-msvc-1.66.0.tgz#c047de7a70624edbbf98f57f5f16ef406a3e61ca"
+  integrity sha512-m3Pjwc2MfTcom4E4gOv7DyuGyt7OfGNCbmqDHd+N7EzXmP+ppHuudm2NjcA3AjV5TSeGxaguVF4SbTKHe1USYA==
+
+"@oxlint/binding-win32-x64-msvc@1.66.0":
+  version "1.66.0"
+  resolved "https://registry.yarnpkg.com/@oxlint/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.66.0.tgz#a482bdd06f2cc0c5cb31b4ae2d6a60ee80442704"
+  integrity sha512-/DbBvw8UFBhja6PqudUjV4UtfsJr0Oa7jUjWVKB0g86lj/VwnPrkngn0sFql3c9RDA0O16dh7ozsXb6GjNAzBQ==
+
 "@pkgjs/parseargs@^0.11.0":
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
@@ -4952,6 +5142,58 @@ outvariant@^1.4.0, outvariant@^1.4.3:
   resolved "https://registry.yarnpkg.com/outvariant/-/outvariant-1.4.3.tgz#221c1bfc093e8fec7075497e7799fdbf43d14873"
   integrity sha512-+Sl2UErvtsoajRDKCE5/dBz4DIvHXQQnAxtQTF04OJxY0+DyZXSo5P5Bb7XYWOh81syohlYL24hbDwxedPUJCA==
 
+oxfmt@^0.44.0:
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/oxfmt/-/oxfmt-0.44.0.tgz#36ba90ef3fc958d37e01d38a3024c3f3dc0ff055"
+  integrity sha512-lnncqvHewyRvaqdrnntVIrZV2tEddz8lbvPsQzG/zlkfvgZkwy0HP1p/2u1aCDToeg1jb9zBpbJdfkV73Itw+w==
+  dependencies:
+    tinypool "2.1.0"
+  optionalDependencies:
+    "@oxfmt/binding-android-arm-eabi" "0.44.0"
+    "@oxfmt/binding-android-arm64" "0.44.0"
+    "@oxfmt/binding-darwin-arm64" "0.44.0"
+    "@oxfmt/binding-darwin-x64" "0.44.0"
+    "@oxfmt/binding-freebsd-x64" "0.44.0"
+    "@oxfmt/binding-linux-arm-gnueabihf" "0.44.0"
+    "@oxfmt/binding-linux-arm-musleabihf" "0.44.0"
+    "@oxfmt/binding-linux-arm64-gnu" "0.44.0"
+    "@oxfmt/binding-linux-arm64-musl" "0.44.0"
+    "@oxfmt/binding-linux-ppc64-gnu" "0.44.0"
+    "@oxfmt/binding-linux-riscv64-gnu" "0.44.0"
+    "@oxfmt/binding-linux-riscv64-musl" "0.44.0"
+    "@oxfmt/binding-linux-s390x-gnu" "0.44.0"
+    "@oxfmt/binding-linux-x64-gnu" "0.44.0"
+    "@oxfmt/binding-linux-x64-musl" "0.44.0"
+    "@oxfmt/binding-openharmony-arm64" "0.44.0"
+    "@oxfmt/binding-win32-arm64-msvc" "0.44.0"
+    "@oxfmt/binding-win32-ia32-msvc" "0.44.0"
+    "@oxfmt/binding-win32-x64-msvc" "0.44.0"
+
+oxlint@^1.59.0:
+  version "1.66.0"
+  resolved "https://registry.yarnpkg.com/oxlint/-/oxlint-1.66.0.tgz#737ca5fab7fcfd95e3869cafecaea8193fc5fcc2"
+  integrity sha512-N4LLxYLd94KEBqXDMDM5f+2PUpItTjDLreXe2Gn5KhjhCK4Qp2YUXaBi8Yu325ryOgKwt22m45fpD7nPOn69Yw==
+  optionalDependencies:
+    "@oxlint/binding-android-arm-eabi" "1.66.0"
+    "@oxlint/binding-android-arm64" "1.66.0"
+    "@oxlint/binding-darwin-arm64" "1.66.0"
+    "@oxlint/binding-darwin-x64" "1.66.0"
+    "@oxlint/binding-freebsd-x64" "1.66.0"
+    "@oxlint/binding-linux-arm-gnueabihf" "1.66.0"
+    "@oxlint/binding-linux-arm-musleabihf" "1.66.0"
+    "@oxlint/binding-linux-arm64-gnu" "1.66.0"
+    "@oxlint/binding-linux-arm64-musl" "1.66.0"
+    "@oxlint/binding-linux-ppc64-gnu" "1.66.0"
+    "@oxlint/binding-linux-riscv64-gnu" "1.66.0"
+    "@oxlint/binding-linux-riscv64-musl" "1.66.0"
+    "@oxlint/binding-linux-s390x-gnu" "1.66.0"
+    "@oxlint/binding-linux-x64-gnu" "1.66.0"
+    "@oxlint/binding-linux-x64-musl" "1.66.0"
+    "@oxlint/binding-openharmony-arm64" "1.66.0"
+    "@oxlint/binding-win32-arm64-msvc" "1.66.0"
+    "@oxlint/binding-win32-ia32-msvc" "1.66.0"
+    "@oxlint/binding-win32-x64-msvc" "1.66.0"
+
 p-limit@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
@@ -6333,6 +6575,11 @@ tinyglobby@^0.2.0, tinyglobby@^0.2.11, tinyglobby@^0.2.12, tinyglobby@^0.2.13, t
     fdir "^6.5.0"
     picomatch "^4.0.3"
 
+tinypool@2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tinypool/-/tinypool-2.1.0.tgz#303a671d6ef68d03c9512cdc9a47c86b8a85f20c"
+  integrity sha512-Pugqs6M0m7Lv1I7FtxN4aoyToKg1C4tu+/381vH35y8oENM/Ai7f7C4StcoK4/+BSw9ebcS8jRiVrORFKCALLw==
+
 tinypool@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/tinypool/-/tinypool-1.1.1.tgz#059f2d042bd37567fbc017d3d426bdd2a2612591"