Minify CDN CSS with esbuild to stop dropped rules (#220)

Tailwind's --minify (Lightning CSS) randomly drops rules from the CDN .min.css files (parcel-bundler/lightningcss#1235). Minify with esbuild using Tailwind v4's browser targets instead, fail the build on esbuild warnings, and have npm run check fail if a .min.css file loses any selector from its unminified file.

.github/workflows/ci.yml

@@ -0,0 +1,38 @@
+name: CI
+
+on:
+  pull_request:
+    branches: [main]
+  push:
+    branches: [main]
+
+permissions:
+  contents: read
+
+concurrency:
+  group: ci-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v7
+        with:
+          persist-credentials: false
+
+      - uses: actions/setup-node@v7
+        with:
+          node-version: 24
+          cache: npm
+          cache-dependency-path: |
+            package-lock.json
+            site/package-lock.json
+
+      - run: npm ci
+
+      # Package: build, check every export exists and the JS parses, list the tarball.
+      - run: npm run check
+
+      # Docs site: build it and check llms.txt links to the .md exports.
+      - run: npm run check:site

.github/workflows/release.yml

@@ -0,0 +1,277 @@
+name: Release
+
+# Publishing a GitHub release (not a prerelease):
+#   1. publish: checks the tag is on main and matches package.json, runs the checks,
+#      then stages the version on npm with `npm stage publish`, using trusted publishing
+#      (OIDC, no token). A maintainer then approves it on npmjs.com (Staged Packages tab)
+#      or with `npm stage approve <stage-id>`, with 2FA. Until then the version is not
+#      installable.
+#   2. deploy-site: waits until the version is live on npm (polls every 30 seconds for
+#      up to about 5h50m), then points the `release` branch at the tag. Cloudflare
+#      Workers Builds deploys basecoatui.com from `release`, so the docs never describe
+#      a version npm does not serve. If you approve later than that, re-run the failed
+#      jobs once approved (deploy-site, then announce).
+#   3. announce: posts the release to Discord (DISCORD_WEBHOOK_URL secret), only after
+#      deploy-site succeeded: the version is on npm and `release` has moved.
+#
+# Running this workflow manually never publishes to npm. Pick a mode:
+#   deploy               move `release` to the tag (redeploy or roll back the site),
+#                        only if that version is already on npm. No Discord post.
+#   announce             post the tag's GitHub release to Discord again. No deploy.
+#   deploy and announce  both, announcing only if the deploy succeeded.
+#
+# Prereleases are ignored by every job.
+#
+# npm trusted publisher settings (allow `npm stage publish` only): repository
+# hunvreus/basecoat, workflow release.yml, no environment. Renaming this file breaks
+# publishing.
+
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: Release tag (for example 1.1.0). Never publishes to npm.
+        required: true
+        type: string
+      mode:
+        description: "deploy: move the site to this tag (version must be on npm). announce: post the release to Discord again. deploy and announce: both."
+        required: true
+        type: choice
+        default: deploy
+        options:
+          - deploy
+          - announce
+          - deploy and announce
+
+permissions: {}
+
+concurrency:
+  group: release
+  cancel-in-progress: false
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    if: github.event_name == 'release' && github.event.release.prerelease == false
+    permissions:
+      contents: read
+      id-token: write
+    env:
+      TAG: ${{ github.event.release.tag_name }}
+    steps:
+      - uses: actions/checkout@v7
+        with:
+          ref: refs/tags/${{ github.event.release.tag_name }}
+          persist-credentials: false
+          fetch-depth: 0
+
+      - name: Check the tag is on main
+        run: |
+          git fetch --no-tags origin main
+          if ! git merge-base --is-ancestor HEAD FETCH_HEAD; then
+            echo "::error::Tag $TAG is not on main. Release from a commit on main."
+            exit 1
+          fi
+
+      - uses: actions/setup-node@v7
+        with:
+          node-version: 24
+          registry-url: https://registry.npmjs.org
+          # No dependency cache in a publishing job (cache poisoning).
+          package-manager-cache: false
+
+      - name: Ensure npm supports staged publishing (>= 11.15.0)
+        run: |
+          if ! node -e 'const [a,b]=process.argv[1].split(".").map(Number);process.exit(a>11||(a===11&&b>=15)?0:1)' "$(npm --version)"; then
+            npm install -g npm@^11.15.0
+          fi
+          npm --version
+
+      - name: Check package.json version matches the tag
+        id: version
+        run: |
+          NAME=$(node -p 'require("./package.json").name')
+          VERSION=$(node -p 'require("./package.json").version')
+          if [ "$VERSION" != "${TAG#v}" ]; then
+            echo "::error::package.json version is $VERSION but the release tag is $TAG. Bump package.json and tag that commit."
+            exit 1
+          fi
+          echo "name=$NAME" >> "$GITHUB_OUTPUT"
+          echo "version=$VERSION" >> "$GITHUB_OUTPUT"
+
+      - name: Check whether this version is already on npm
+        id: npm
+        env:
+          NAME: ${{ steps.version.outputs.name }}
+          VERSION: ${{ steps.version.outputs.version }}
+        run: |
+          STATUS=$(curl -sS -o /dev/null -w '%{http_code}' "https://registry.npmjs.org/$NAME/$VERSION")
+          case "$STATUS" in
+            200)
+              echo "::notice::$NAME@$VERSION is already on npm. Skipping publish."
+              echo "published=true" >> "$GITHUB_OUTPUT" ;;
+            404)
+              echo "published=false" >> "$GITHUB_OUTPUT" ;;
+            *)
+              echo "::error::Unexpected HTTP $STATUS from the npm registry."
+              exit 1 ;;
+          esac
+
+      - name: Install dependencies
+        if: steps.npm.outputs.published == 'false'
+        run: npm ci
+
+      # Builds dist/ and templates/, checks every export exists, and lists the tarball.
+      # `npm stage publish` builds again through the prepack script.
+      - name: Run checks
+        if: steps.npm.outputs.published == 'false'
+        run: npm run check
+
+      # Short-lived OIDC tokens cannot run `npm stage list`, so an already-staged version
+      # is detected from the registry's conflict error instead: staged and published
+      # versions share one version index, so re-staging the same version is refused.
+      - name: Stage on npm
+        if: steps.npm.outputs.published == 'false'
+        run: |
+          set +e
+          npm stage publish --provenance 2>&1 | tee "$RUNNER_TEMP/stage.log"
+          STATUS=${PIPESTATUS[0]}
+          set -e
+          if [ "$STATUS" -eq 0 ]; then
+            echo "::notice::Staged. Approve it on npmjs.com (Staged Packages tab) or with npm stage approve, using 2FA. The site deploys once it is live."
+          elif grep -Eqi 'E409|EPUBLISHCONFLICT|previously published|already (been )?(staged|published|exists)|cannot (publish|stage) over' "$RUNNER_TEMP/stage.log"; then
+            echo "::notice::This version is already staged or published on npm. Skipping."
+          else
+            exit "$STATUS"
+          fi
+
+  deploy-site:
+    runs-on: ubuntu-latest
+    needs: publish
+    if: >-
+      always() &&
+      (needs.publish.result == 'success' || needs.publish.result == 'skipped') &&
+      ((github.event_name == 'release' && github.event.release.prerelease == false) ||
+      (github.event_name == 'workflow_dispatch' && inputs.mode != 'announce'))
+    # GitHub-hosted jobs stop at 6 hours. The wait below gives up before that.
+    timeout-minutes: 355
+    permissions:
+      contents: write
+    env:
+      TAG: ${{ inputs.tag || github.event.release.tag_name }}
+    steps:
+      - uses: actions/checkout@v7
+        with:
+          fetch-depth: 0
+
+      - name: Check the tag is on main
+        id: tag
+        run: |
+          SHA=$(git rev-parse --verify "refs/tags/$TAG^{commit}")
+          if ! git merge-base --is-ancestor "$SHA" origin/main; then
+            echo "::error::Tag $TAG is not on main. Only tags on main can go live."
+            exit 1
+          fi
+          {
+            echo "sha=$SHA"
+            echo "name=$(git show "$SHA:package.json" | jq -r .name)"
+            echo "version=$(git show "$SHA:package.json" | jq -r .version)"
+          } >> "$GITHUB_OUTPUT"
+
+      - name: Wait until the version is live on npm
+        env:
+          NAME: ${{ steps.tag.outputs.name }}
+          VERSION: ${{ steps.tag.outputs.version }}
+          # Manual runs do not wait: the version must already be on npm.
+          MAX_WAIT: ${{ github.event_name == 'release' && '21000' || '0' }}
+        run: |
+          while :; do
+            STATUS=$(curl -sS -o /dev/null -w '%{http_code}' "https://registry.npmjs.org/$NAME/$VERSION" || echo 000)
+            if [ "$STATUS" = "200" ]; then
+              echo "$NAME@$VERSION is live on npm."
+              exit 0
+            fi
+            if [ "$SECONDS" -ge "$MAX_WAIT" ]; then
+              if [ "$MAX_WAIT" = "0" ]; then
+                echo "::error::$NAME@$VERSION is not on npm (HTTP $STATUS). A manual run only deploys versions that are already published."
+              else
+                echo "::error::$NAME@$VERSION is still not live on npm after $((MAX_WAIT / 60)) minutes. Approve the staged package on npmjs.com (Staged Packages tab), then re-run this deploy-site job (Re-run failed jobs). If you rejected it, nothing needs to happen: the site was not deployed."
+              fi
+              exit 1
+            fi
+            echo "Waiting for $NAME@$VERSION on npm (HTTP $STATUS). Approve the staged package on npmjs.com. Checking again in 30 seconds."
+            sleep 30
+          done
+
+      - name: Point release branch at tag
+        env:
+          SHA: ${{ steps.tag.outputs.sha }}
+        run: git push --force origin "$SHA:refs/heads/release"
+
+  # Same message as the old discord-release.yml.
+  announce:
+    runs-on: ubuntu-latest
+    needs: deploy-site
+    if: >-
+      always() &&
+      ((needs.deploy-site.result == 'success' &&
+      ((github.event_name == 'release' && github.event.release.prerelease == false) ||
+      (github.event_name == 'workflow_dispatch' && inputs.mode == 'deploy and announce'))) ||
+      (github.event_name == 'workflow_dispatch' && inputs.mode == 'announce'))
+    permissions:
+      contents: read
+    steps:
+      - name: Send Discord announcement
+        env:
+          DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          RELEASE_TAG_INPUT: ${{ inputs.tag }}
+          REPO: ${{ github.repository }}
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          test -n "$DISCORD_WEBHOOK_URL"
+
+          if [ "$GITHUB_EVENT_NAME" = "workflow_dispatch" ]; then
+            test -n "$RELEASE_TAG_INPUT"
+            curl --fail-with-body \
+              -H "Accept: application/vnd.github+json" \
+              -H "Authorization: Bearer $GH_TOKEN" \
+              -H "X-GitHub-Api-Version: 2022-11-28" \
+              "$GITHUB_API_URL/repos/$REPO/releases/tags/$RELEASE_TAG_INPUT" \
+              > release.json
+          else
+            jq '.release' "$GITHUB_EVENT_PATH" > release.json
+          fi
+
+          if [ "$(jq -r '.prerelease' release.json)" = "true" ]; then
+            echo "Skipping prerelease."
+            exit 0
+          fi
+
+          jq -n \
+            --arg repo "$REPO" \
+            --arg name "$(jq -r '.name // ""' release.json)" \
+            --arg tag "$(jq -r '.tag_name' release.json)" \
+            --arg url "$(jq -r '.html_url' release.json)" \
+            --arg body "$(jq -r '.body // ""' release.json)" \
+            '($body | if length > 1500 then .[:1500] + "...\n\n[Read more](" + $url + ")" else . end) as $description |
+            {
+              username: "Basecoat Releases",
+              allowed_mentions: { parse: [] },
+              embeds: [{
+                title: ($repo + " " + $tag),
+                url: $url,
+                description: ((if $name != "" then "**" + $name + "**\n\n" else "" end) + $description),
+                color: 5793266
+              }]
+            }' > payload.json
+
+          curl --fail-with-body \
+            --retry 3 \
+            --retry-all-errors \
+            --retry-delay 2 \
+            -H "Content-Type: application/json" \
+            -X POST \
+            -d @payload.json \
+            "$DISCORD_WEBHOOK_URL"

.gitignore

@@ -1,6 +1,10 @@
 .*
 !.gitignore
 !.gitattributes
+!.github/
+!.github/workflows/
+!.github/workflows/*.yml
+!.github/workflows/*.yaml
 _site/
 
 node_modules/

AGENTS.md

@@ -48,6 +48,7 @@
 ## JavaScript
 - JavaScript is behavior only; do not use JS to paper over CSS architecture issues.
 - Register JS components with `window.basecoat.register()` and make initialization idempotent with `data-*-initialized` flags.
+- Component init functions must return before attaching listeners or mutating DOM when the root already has its initialized flag.
 - Keep generated DOM minimal and aligned with documented HTML.
 - Prefer native browser APIs and events.
 - Keep scroll management scoped to component containers. Do not use `scrollIntoView()` when it can scroll the page unexpectedly.

CHANGELOG.md

@@ -1,6 +1,63 @@
 # Changelog
 
-## Unreleased
+## [Unreleased]
+
+## [1.1.0] - 2026-10-23
+
+### Upgrading
+
+- Toast `title`, `description`, `action.label` and `cancel.label` are now escaped as text by default. If you pass HTML in any of them, add `html: true` to your `toaster.toast()` call.
+
+### Added
+
+- Added vertical separators: `<hr aria-orientation="vertical">` renders as a 1px line that fills its row.
+- Added single-file `.bundle.css` builds (`dist/basecoat.bundle.css` and `dist/basecoat-{style}.bundle.css`) with every Basecoat import inlined, so the standalone Tailwind CLI can use Basecoat without npm. Based on the standalone CLI setup proposed by [@ytsruh](https://github.com/ytsruh) in [#150](https://github.com/hunvreus/basecoat/pull/150).
+- Added an `html: true` option to `toaster.toast()` for callers that need to pass raw HTML in the title, description or action labels.
+
+### Changed
+
+- Toast `title`, `description`, `action.label` and `cancel.label` are now escaped as text by default, matching Sonner. Pass `html: true` to keep the previous raw-HTML behavior.
+- Changed the default `--font-sans` to start with `"Geist"`, the family name used by Google Fonts, Bunny Fonts and Fontsource, with `"Geist Sans"` kept as a fallback. The customization docs now install `@fontsource/geist`.
+- Updated the docs dependency to `reallysimpledocs@^1.0.14`, so `llms.txt` links to the Markdown version of each page.
+- Documented how to use Tailwind utilities with Basecoat's theme colors alongside the CDN build and the Tailwind Play CDN.
+
+### Fixed
+
+- Prevented Escape from dismissing an enclosing dialog while closing an open Combobox popup.
+- Fixed long Tooltip text clipping instead of showing an ellipsis across all style packs.
+- Locked page scroll while a modal Dialog, Alert Dialog, Command Dialog or Drawer is open.
+- Kept a parent Popover, Dropdown Menu, Select or Combobox open when a nested one opens inside it. Sibling components still close each other.
+- Scoped Sidebar navigation styles to the sidebar's direct child `nav` (`.sidebar > nav`), so other `nav` elements inside a sidebar, such as a Tabs list, are no longer fixed and stacked.
+- Stopped Dialogs and Command Dialogs from closing when a press starts inside the dialog and the drag ends on the backdrop. Updated the Nunjucks and Jinja templates and the docs examples. Based on [#104](https://github.com/hunvreus/basecoat/pull/104) by [@PhilipdeRijk](https://github.com/PhilipdeRijk).
+- Fixed iOS auto-zoom when tapping the Combobox input, the Combobox chips input, the Command search input, native Selects, and Input Group inputs and textareas by using `text-base` below the `md` breakpoint, like regular inputs. The compact Lyra and Mira styles keep their smaller sizes.
+- Fixed Slider thumb hover and focus rings, the RTL Sidebar submenu chevron, and some dark mode and tooltip arrow styles not applying in the unminified CDN files, because the rules were nested under pseudo-elements.
+- Fixed CDN `.min.css` builds occasionally dropping rules (such as hidden Combobox, Command and Select options) by minifying with esbuild instead of Tailwind's minifier.
+- Stopped the Toast docs example from pushing its fragment URL into the browser history with HTMX.
+- Replaced the `.form` migration snippet in the 1.0.0 notes, which fails in Tailwind v4, with markup that works.
+
+### Contributors
+
+- Thanks to [@ytsruh](https://github.com/ytsruh), [@PhilipdeRijk](https://github.com/PhilipdeRijk), [@sgruendel](https://github.com/sgruendel), [@alexander-posztos](https://github.com/alexander-posztos) and [@Jezda1337](https://github.com/Jezda1337) for their contributions to this release.
+
+## [1.0.2] - 2026-07-06
+
+### Added
+
+- Added `data-size="sm"` support to Alert Dialog for the compact upstream size.
+
+### Changed
+
+- Removed global font smoothing from Basecoat's package CSS so `antialiased` remains an application-level choice.
+
+## [1.0.1] - 2026-06-28
+
+### Added
+
+- Added explicit `force: true` support to `window.basecoat.init()` and `window.basecoat.initAll()` for rehydrating restored DOM after framework or navigation cache restores.
+
+### Fixed
+
+- Reinitialized Basecoat components after HTMX history restores in the docs site.
 
 ## [1.0.0] - 2026-06-27
 
@@ -136,15 +193,17 @@
 
 ### Migration Notes
 
-To keep the previous `.form` wrapper behavior, define it in your own Tailwind CSS:
+The `.form` wrapper can't be recreated with `@apply`: Tailwind v4 only applies utilities, not Basecoat's component classes. Wrap each label and control in a `.field` instead:
 
-```css
-.form label { @apply label; }
-.form input { @apply input; }
-.form textarea { @apply textarea; }
-.form select { @apply select; }
+```html
+<div class="field">
+  <label for="email">Email</label>
+  <input id="email" type="email">
+</div>
 ```
 
+Or add the component class to each element: `class="label"`, `class="input"`, `class="textarea"`, or `class="select"` on a native `<select>`.
+
 To keep the previous document-event command APIs, add bridge listeners in your app:
 
 ```js

CONTRIBUTING.md

@@ -1,15 +1,15 @@
 # Contributing to Basecoat
 
 - Support development by sponsoring the author: https://github.com/sponsors/hunvreus
-- Submit pull requests (PRs) against the `development` branch, not `main`.
-- For branches, we have:
-  - `main` is our production and default branch. This is what we deploy to https://basecoatui.com and publish to https://www.npmjs.com/package/basecoat-css.
-  - `development` is for staging. We will deploy it soon at https://dev.basecoatui.com.
+- Submit pull requests (PRs) against the `main` branch.
+- Branches:
+  - `main` is the default branch. All work lands here, and https://main-basecoat.hunvreus.workers.dev previews it.
+  - `release` is what https://basecoatui.com deploys. Only the release workflow moves it (see below).
   - New features are worked in `feature/name-of-the-feature` branches.
-  - Issues are addressed in `issue/123-main-isse` branches.
-  - When ready, we PR against `development`, test it and then finally merge to `main`.
+  - Issues are addressed in `issue/123-main-issue` branches.
+  - When ready, open a PR against `main`.
 - Keep changes focused: one feature or fix per PR.
-- Test locally before submitting.
+- Test locally before submitting: `npm run check` (package) and `npm run check:site` (docs site). CI runs both on every PR.
 - Follow existing code style.
 
 ## Cloudflare Workers deploys
@@ -25,7 +25,32 @@ Workers Builds settings:
 - Build command: `npm run docs:build`
 - Deploy command: `npx wrangler deploy`
 - Non-production branch deploy command: `npx wrangler versions upload`
-- Production branch: `main`
+- Production branch: `release`
 - Enable builds for non-production branches for branch preview URLs.
 
+## Releasing
+
+The site at basecoatui.com deploys from the `release` branch, not `main`, so the docs always match the version on npm. Nobody commits to `release` directly.
+
+To cut a release:
+
+1. Bump the version on `main`: `npm version 1.1.0 --no-git-tag-version`, then commit (for example "Prepare 1.1.0 release") and push.
+2. Tag that commit with the same version, with no `v` prefix, and push: `git tag 1.1.0 && git push origin 1.1.0`.
+3. Publish a GitHub release for the tag: `gh release create 1.1.0 --generate-notes --latest --verify-tag`.
+4. Approve the staged version on npmjs.com, in the package's Staged Packages tab, or with `npm stage approve <stage-id>`. Both ask for 2FA.
+
+Publishing the release runs `.github/workflows/release.yml`:
+
+- **publish** checks that the tag is on `main` and matches the version in `package.json`, runs `npm run check`, and stages the version on npm with `npm stage publish`, using trusted publishing. A staged version is not installable until a maintainer approves it. If the version is already staged or published, this step is skipped.
+- **deploy-site** waits until the version is live on npm, then points `release` at the tag, and Cloudflare builds and deploys the site. It checks every 30 seconds for up to about 5h50m. If you approve later than that, the job fails with a message: after approving, use Re-run failed jobs on that run, which re-runs deploy-site and then announce. If staging fails or you reject the version, the site is not deployed.
+- **announce** posts the release notes to Discord, only after deploy-site succeeded. By then the version is installable from npm and `release` has moved, so Cloudflare is building the new site (that takes a few minutes).
+
+Do not run `npm publish` by hand. Versions reach npm only through this workflow and your approval. The workflow needs no npm token and adds a provenance statement linking each version to the commit it was built from. Prereleases are not staged, deployed or announced.
+
+You can also run the Release workflow manually from the Actions tab, with a tag and a mode. A manual run never publishes to npm.
+
+- `deploy` (default) redeploys or rolls back the site: it moves `release` to the tag, only if that version is already on npm. It doesn't post to Discord.
+- `announce` posts the tag's GitHub release to Discord again, for example after a failed post. It doesn't deploy.
+- `deploy and announce` does both, and announces only if the deploy succeeded.
+
 Thanks for helping!

README.md

@@ -92,6 +92,7 @@ These entrypoints are generated by `scripts/generate-css-entrypoints.js` and by
 
 - `window.basecoat.init(name)` initializes uninitialized components for one registered component.
 - `window.basecoat.initAll()` initializes all uninitialized registered components.
+- `window.basecoat.init(name, { force: true })` and `window.basecoat.initAll({ force: true })` destroy and reinitialize matching components. Use this when a framework or navigation library restores previously initialized DOM from a cache. Force mode resets transient component state such as open menus, focus state, and active interactions.
 - `window.basecoat.refresh(element)` asks an initialized component to rescan dynamic children when it supports refresh.
 - Components use internal destroy hooks to clean up listeners when initialized roots are removed from the DOM.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "basecoat-css",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Tailwind CSS for Basecoat components",
   "author": {
     "name": "hunvreus",
@@ -123,15 +123,18 @@
   "scripts": {
     "build": "node ./scripts/build.js",
     "prepack": "node ./scripts/build.js",
-    "docs:build": "npm run build && npm --prefix site run build",
+    "check": "npm run build && node ./scripts/check.js && npm pack --dry-run --ignore-scripts",
+    "check:site": "npm run docs:build && node ./scripts/check.js site",
+    "docs:build": "npm run build && npm --prefix site clean-install --progress=false && npm --prefix site run build",
     "docs:dev": "npm --prefix site run dev",
     "docs:preview": "npm run docs:build && npm --prefix site run preview",
-    "workers:dev": "npm run build && npm --prefix site run workers:dev",
-    "workers:deploy": "npm run build && npm --prefix site run workers:deploy",
-    "workers:preview": "npm run build && npm --prefix site run workers:preview"
+    "workers:dev": "npm run build && npm --prefix site clean-install --progress=false && npm --prefix site run workers:dev",
+    "workers:deploy": "npm run build && npm --prefix site clean-install --progress=false && npm --prefix site run workers:deploy",
+    "workers:preview": "npm run build && npm --prefix site clean-install --progress=false && npm --prefix site run workers:preview"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.1.17",
+    "esbuild": "0.28.2",
     "prettier": "^3.5.3",
     "tailwindcss": "^4.1.17",
     "terser": "^5.42.0"

scripts/build.js

@@ -3,10 +3,16 @@ import path from 'path';
 import { fileURLToPath } from 'url';
 import { exec } from 'child_process';
 import { promisify } from 'util';
+import { transform } from 'esbuild';
 import { generateCssEntrypoints } from './generate-css-entrypoints.js';
 
 const execPromise = promisify(exec);
 
+// Tailwind CSS v4 browser baseline (https://tailwindcss.com/docs/compatibility).
+// Minified CDN CSS uses esbuild because Tailwind's --minify (Lightning CSS) can
+// randomly drop rules (parcel-bundler/lightningcss#1235).
+const cssTargets = ['chrome111', 'safari16.4', 'firefox128'];
+
 // Resolve project root, assuming this script is in <project_root>/scripts/
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -64,6 +70,37 @@ async function copyDirRecursive(src, dest) {
   }
 }
 
+// Recursively inlines relative `@import "./...";` lines into a single CSS string.
+// Each file is inlined at most once per bundle (tracked in `seen`).
+async function inlineCssImports(filePath, seen) {
+  const resolved = path.resolve(filePath);
+  if (seen.has(resolved)) return '';
+  seen.add(resolved);
+
+  const source = await fs.readFile(resolved, 'utf-8');
+  const lines = source.split('\n');
+  const out = [];
+  for (const line of lines) {
+    const match = line.match(/^\s*@import\s+["'](\.{1,2}\/[^"']+)["']\s*;\s*$/);
+    if (match) {
+      const inlined = await inlineCssImports(path.join(path.dirname(resolved), match[1]), seen);
+      if (inlined) out.push(inlined.replace(/\n+$/, ''));
+    } else if (/^\s*@import\s+["']\.{1,2}\//.test(line)) {
+      throw new Error(`Unsupported relative @import (with modifiers) in ${resolved}: ${line.trim()}`);
+    } else {
+      out.push(line);
+    }
+  }
+  return out.join('\n');
+}
+
+// Writes an uncompiled single-file bundle for a dist CSS entrypoint.
+async function writeCssBundle(entryPath, outPath, label, version) {
+  const body = await inlineCssImports(entryPath, new Set());
+  const header = `/* Basecoat v${version}, ${label}, single-file source. Import after tailwindcss. */\n`;
+  await fs.writeFile(outPath, `${header}${body.replace(/\n+$/, '')}\n`);
+}
+
 // Main build function to prepare the package for publishing.
 async function build() {
   console.log('Starting build process...');
@@ -155,6 +192,20 @@ async function build() {
   await copyDirRecursive(srcCssCompatDir, cssCompatDistDir);
   console.log(`Copied split CSS folders to ${cssDistDir}`);
 
+  // Create uncompiled single-file bundles for Tailwind users without a package manager.
+  const { version } = JSON.parse(await fs.readFile(path.join(projectRoot, 'package.json'), 'utf-8'));
+  for (const style of styles) {
+    await writeCssBundle(
+      path.join(cssDistDir, `basecoat-${style}.css`),
+      path.join(cssDistDir, `basecoat-${style}.bundle.css`),
+      style,
+      version,
+    );
+  }
+  await writeCssBundle(path.join(cssDistDir, 'basecoat.css'), path.join(cssDistDir, 'basecoat.bundle.css'), 'vega', version);
+  await writeCssBundle(path.join(cssDistDir, 'basecoat-base.css'), path.join(cssDistDir, 'basecoat-base.bundle.css'), 'base (no style pack)', version);
+  console.log(`Generated single-file CSS bundles in ${cssDistDir}`);
+
   await copyDirRecursive(srcNunjucksDir, path.join(cssTemplatesDir, 'nunjucks'));
   await copyDirRecursive(srcJinjaDir, path.join(cssTemplatesDir, 'jinja'));
   console.log(`Copied template assets to ${cssTemplatesDir}`);
@@ -169,7 +220,13 @@ async function build() {
 
     await execPromise(`npx tailwindcss -i "${cdnCssSrc}" -o "${cssDistCdnPath}"`);
     console.log(`Generated non-minified CSS: ${cssDistCdnPath}`);
-    await execPromise(`npx tailwindcss -i "${cdnCssSrc}" -o "${cssDistCdnMinPath}" --minify`);
+    const { code, warnings } = await transform(await fs.readFile(cssDistCdnPath, 'utf-8'), {
+      loader: 'css',
+      minify: true,
+      target: cssTargets,
+    });
+    if (warnings.length) throw new Error(`esbuild warnings for ${cssDistCdnPath}: ${warnings.map((w) => w.text).join('; ')}`);
+    await fs.writeFile(cssDistCdnMinPath, code);
     console.log(`Generated minified CSS: ${cssDistCdnMinPath}`);
   }
 

scripts/check.js

@@ -0,0 +1,173 @@
+// Cheap sanity checks. Run after a build.
+//   node scripts/check.js        package: every export target exists, JS parses, min CSS keeps all selectors
+//   node scripts/check.js site   docs site: site/dist built, llms.txt links to .md exports
+import fs from 'fs';
+import path from 'path';
+import { execFileSync } from 'child_process';
+import { fileURLToPath } from 'url';
+
+const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const errors = [];
+
+function checkPackage() {
+  const pkg = JSON.parse(fs.readFileSync(path.join(root, 'package.json'), 'utf8'));
+
+  for (const [key, target] of Object.entries(pkg.exports)) {
+    const file = path.join(root, target);
+    if (target.includes('*')) {
+      const dir = path.dirname(file.slice(0, file.indexOf('*')) + 'x');
+      if (!fs.existsSync(dir) || fs.readdirSync(dir).length === 0) {
+        errors.push(`export "${key}": no files in ${path.relative(root, dir)}`);
+      }
+    } else if (!fs.existsSync(file) || fs.statSync(file).size === 0) {
+      errors.push(`export "${key}": ${target} is missing or empty`);
+    }
+  }
+
+  const jsDir = path.join(root, 'dist', 'js');
+  for (const name of fs.existsSync(jsDir) ? fs.readdirSync(jsDir) : []) {
+    if (!name.endsWith('.js')) continue;
+    try {
+      execFileSync(process.execPath, ['--check', path.join(jsDir, name)], { stdio: 'pipe' });
+    } catch (error) {
+      const message = error.stderr.toString().split('\n').find((line) => /Error/.test(line));
+      errors.push(`dist/js/${name} does not parse: ${message || 'syntax error'}`);
+    }
+  }
+}
+
+// Minified CDN CSS must keep every selector of its unminified source.
+// Selectors are flattened (nesting resolved, :is() lists expanded) and normalized
+// (::after/:after, attribute quotes, combinator spacing, from/0%) before comparing.
+function splitTop(str) {
+  const out = [];
+  let depth = 0, quote = null, cur = '';
+  for (let i = 0; i < str.length; i++) {
+    const c = str[i];
+    if (quote) { cur += c; if (c === '\\') cur += str[++i] ?? ''; else if (c === quote) quote = null; continue; }
+    if (c === '"' || c === "'") { quote = c; cur += c; continue; }
+    if (c === '(' || c === '[') depth++;
+    else if (c === ')' || c === ']') depth--;
+    if (c === ',' && depth === 0) { out.push(cur); cur = ''; } else cur += c;
+  }
+  out.push(cur);
+  return out.map((s) => s.trim()).filter(Boolean);
+}
+
+function parseCss(css) {
+  css = css.replace(/\/\*[\s\S]*?\*\//g, '');
+  const root = { children: [] };
+  const stack = [root];
+  let buf = '', quote = null, paren = 0;
+  for (let i = 0; i < css.length; i++) {
+    const c = css[i];
+    if (quote) { buf += c; if (c === '\\') buf += css[++i] ?? ''; else if (c === quote) quote = null; continue; }
+    if (c === '"' || c === "'") { quote = c; buf += c; continue; }
+    if (c === '(') paren++;
+    else if (c === ')') paren--;
+    if (paren > 0) { buf += c; continue; }
+    if (c === '{') { const node = { prelude: buf.trim(), children: [] }; stack.at(-1).children.push(node); stack.push(node); buf = ''; }
+    else if (c === '}') { if (buf.trim()) stack.at(-1).children.push({ decl: true }); stack.pop(); buf = ''; }
+    else if (c === ';') { if (buf.trim()) stack.at(-1).children.push({ decl: true }); buf = ''; }
+    else buf += c;
+  }
+  return root;
+}
+
+function normalizeSelector(s) {
+  return s
+    .replace(/::(before|after|first-line|first-letter)\b/g, ':$1')
+    .replace(/\[\s*([^\]=~|^$*\s]+)\s*([~|^$*]?=)\s*(["'])((?:\\.|(?!\3).)*)\3\s*(\s[is])?\s*\]/g, '[$1$2$4$5]')
+    .replace(/\s+/g, ' ')
+    .replace(/\s*([>+~,])\s*/g, '$1')
+    .replace(/\(\s+/g, '(')
+    .replace(/\s+\)/g, ')')
+    .replace(/^from$/, '0%')
+    .replace(/^to$/, '100%')
+    .trim();
+}
+
+function expandIs(sel) {
+  const i = sel.indexOf(':is(');
+  if (i < 0) return [sel];
+  let depth = 0, j = i + 3;
+  for (; j < sel.length; j++) { if (sel[j] === '(') depth++; else if (sel[j] === ')' && --depth === 0) break; }
+  const inner = splitTop(sel.slice(i + 4, j));
+  const attached = i > 0 && !/[\s>+~(,]/.test(sel[i - 1]);
+  if (attached && inner.some((part) => /[\s>+~]/.test(part.replace(/\([^)]*\)/g, '')))) {
+    return expandIs(sel.slice(j + 1)).map((rest) => sel.slice(0, j + 1) + rest);
+  }
+  return inner.flatMap((part) => expandIs(sel.slice(0, i) + part + sel.slice(j + 1)));
+}
+
+function flatSelectors(css) {
+  const keys = new Set();
+  const normParams = (p) => p.replace(/\s+/g, ' ').replace(/\s*([():,<>=]+)\s*/g, '$1').replace(/"/g, "'").trim().toLowerCase();
+  const walk = (node, ctx, parents) => {
+    for (const child of node.children) {
+      if (!child.children) continue;
+      const pre = child.prelude;
+      if (pre.startsWith('@')) {
+        const [, name, params] = pre.match(/^@([\w-]+)\s*([\s\S]*)$/);
+        const at = `@${name} ${normParams(params)}`;
+        if (/^(media|supports|layer|container|keyframes|-webkit-keyframes|scope|starting-style)$/.test(name)) {
+          // Declarations directly inside a nested at-rule belong to the parent selectors.
+          if (parents && child.children.some((c) => c.decl)) for (const p of parents) keys.add(`${[...ctx, at].join(' | ')} || ${p}`);
+          walk(child, [...ctx, at], name.endsWith('keyframes') ? null : parents);
+        } else keys.add([...ctx, at].join(' | '));
+        continue;
+      }
+      const own = splitTop(pre);
+      const sels = (parents ? parents.flatMap((p) => own.map((s) => (s.includes('&') ? s.replace(/&/g, p) : `${p} ${s}`))) : own)
+        .map(normalizeSelector).flatMap(expandIs).map(normalizeSelector);
+      if (child.children.some((c) => c.decl)) for (const s of sels) keys.add(`${ctx.join(' | ')} || ${s}`);
+      walk(child, ctx, sels);
+    }
+  };
+  walk(parseCss(css), [], null);
+  return keys;
+}
+
+function checkMinifiedCss() {
+  const dist = path.join(root, 'dist');
+  for (const name of fs.existsSync(dist) ? fs.readdirSync(dist) : []) {
+    if (!name.endsWith('.cdn.css')) continue;
+    const minName = name.replace(/\.css$/, '.min.css');
+    const minFile = path.join(dist, minName);
+    if (!fs.existsSync(minFile)) { errors.push(`dist/${minName} is missing`); continue; }
+    const min = flatSelectors(fs.readFileSync(minFile, 'utf8'));
+    const missing = [...flatSelectors(fs.readFileSync(path.join(dist, name), 'utf8'))].filter((key) => !min.has(key));
+    if (missing.length) errors.push(`dist/${minName} dropped ${missing.length} selector(s) from dist/${name}, e.g. ${missing.slice(0, Number(process.env.SHOW || 3)).join('; ')}`);
+  }
+}
+
+function checkSite() {
+  const dist = path.join(root, 'site', 'dist');
+  for (const file of ['index.html', 'llms.txt', 'llms-full.txt']) {
+    if (!fs.existsSync(path.join(dist, file))) errors.push(`site/dist/${file} is missing`);
+  }
+  const llms = path.join(dist, 'llms.txt');
+  if (!fs.existsSync(llms)) return;
+  const links = [...fs.readFileSync(llms, 'utf8').matchAll(/^- \[[^\]]*\]\(([^)]+)\)/gm)].map((m) => m[1]);
+  if (links.length === 0) errors.push('site/dist/llms.txt has no links');
+  for (const link of links) {
+    if (!link.endsWith('.md')) errors.push(`site/dist/llms.txt links to ${link}, not a .md export`);
+  }
+}
+
+const target = process.argv[2] || 'package';
+if (target === 'package') {
+  checkPackage();
+  checkMinifiedCss();
+}
+else if (target === 'site') checkSite();
+else {
+  console.error(`Unknown target "${target}". Use "package" or "site".`);
+  process.exit(2);
+}
+
+if (errors.length) {
+  console.error(`${target} check failed:\n- ${errors.join('\n- ')}`);
+  process.exit(1);
+}
+console.log(`${target} check passed.`);

site/astro.config.mjs

@@ -31,6 +31,7 @@ export default defineConfig({
       style: 'vega',
       css: false,
       bodyAttrs: {
+        class: 'antialiased',
         'hx-boost': 'true',
         'hx-target': '#content',
         'hx-select': '#content',

site/package.json

@@ -15,7 +15,7 @@
     "htmx.org": "^2.0.10",
     "lucide-static": "^1.17.0",
     "nunjucks": "^3.2.4",
-    "reallysimpledocs": "^1.0.6"
+    "reallysimpledocs": "^1.0.14"
   },
   "devDependencies": {
     "astro": "^6.4.6",

site/src/components/StyleHead.astro

@@ -24,28 +24,28 @@ const styleUrls = {
 
 <style is:inline>
   @font-face {
-    font-family: "Geist Sans";
+    font-family: "Geist";
     src: url("/assets/fonts/geist/geist-sans-latin-400-normal.woff2") format("woff2");
     font-weight: 400;
     font-style: normal;
     font-display: swap;
   }
   @font-face {
-    font-family: "Geist Sans";
+    font-family: "Geist";
     src: url("/assets/fonts/geist/geist-sans-latin-500-normal.woff2") format("woff2");
     font-weight: 500;
     font-style: normal;
     font-display: swap;
   }
   @font-face {
-    font-family: "Geist Sans";
+    font-family: "Geist";
     src: url("/assets/fonts/geist/geist-sans-latin-600-normal.woff2") format("woff2");
     font-weight: 600;
     font-style: normal;
     font-display: swap;
   }
   @font-face {
-    font-family: "Geist Sans";
+    font-family: "Geist";
     src: url("/assets/fonts/geist/geist-sans-latin-700-normal.woff2") format("woff2");
     font-weight: 700;
     font-style: normal;
@@ -159,7 +159,33 @@ const styleUrls = {
       }
     };
 
+    const clearSerializedRuntimeState = (root) => {
+      for (const element of root.querySelectorAll?.("*") || []) {
+        delete element.dataset.basecoatComponent;
+        for (const attribute of Array.from(element.attributes)) {
+          if (/^data-[a-z0-9-]+-initialized$/.test(attribute.name)) {
+            element.removeAttribute(attribute.name);
+          }
+        }
+      }
+    };
+
+    const cleanHistoryItem = (event) => {
+      const item = event.detail?.item;
+      if (typeof item?.content !== "string") return;
+
+      const template = document.createElement("template");
+      template.innerHTML = item.content;
+      clearSerializedRuntimeState(template.content);
+      item.content = template.innerHTML;
+    };
+
     document.addEventListener("DOMContentLoaded", syncSidebar);
+    document.addEventListener("htmx:historyItemCreated", cleanHistoryItem);
+    document.addEventListener("htmx:historyRestore", () => {
+      window.basecoat?.initAll?.({ force: true });
+      syncSidebar();
+    });
     document.addEventListener("htmx:afterSettle", () => {
       window.basecoat?.initAll?.();
       syncSidebar();

site/src/docs/components/alert-dialog.mdx

@@ -74,7 +74,7 @@ Alert Dialog uses a native `<dialog class="alert-dialog">` element. Omit the clo
   <dd>Trigger button. Basecoat uses the native <code>HTMLDialogElement.showModal()</code> method.</dd>
   <dt><code>&lt;dialog class="alert-dialog" id="&#123; DIALOG_ID &#125;"&gt;</code></dt>
   <dd>
-    Native modal dialog. Add <code>aria-labelledby</code> and <code>aria-describedby</code> when title and description are present.
+    Native modal dialog. Add <code>aria-labelledby</code> and <code>aria-describedby</code> when title and description are present. Use <code>data-size="sm"</code> for the compact upstream size.
     <dl>
       <dt><code>&lt;div&gt;</code></dt>
       <dd>
@@ -164,6 +164,27 @@ Use a destructive action button when the alert dialog confirms a destructive ope
 </dialog>
 </Preview>
 
+### Small
+
+Use `data-size="sm"` for a compact alert dialog. The small size keeps media, title, and description stacked and centers the action buttons in a two-column footer.
+
+<Preview>
+<button type="button" onclick="document.getElementById('alert-dialog-small').showModal()" class="btn" data-variant="outline">Invite Members</button>
+<dialog id="alert-dialog-small" class="alert-dialog" data-size="sm" aria-labelledby="alert-dialog-small-title" aria-describedby="alert-dialog-small-description">
+  <div>
+    <header>
+      <figure><svg class="lucide lucide-users" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><path d="M16 3.128a4 4 0 0 1 0 7.744" /><path d="M22 21v-2a4 4 0 0 0-3-3.87" /><circle cx="9" cy="7" r="4" /></svg></figure>
+      <h2 id="alert-dialog-small-title">Invite team members?</h2>
+      <p id="alert-dialog-small-description">Send an invitation link to your selected teammates.</p>
+    </header>
+    <footer>
+      <button class="btn" data-variant="outline" onclick="this.closest('dialog').close()">Cancel</button>
+      <button class="btn" onclick="this.closest('dialog').close()">Invite</button>
+    </footer>
+  </div>
+</dialog>
+</Preview>
+
 ### RTL
 
 Alert Dialog supports document direction. Set `dir="rtl"` on the dialog or a parent element.

site/src/docs/components/combobox.mdx

@@ -85,6 +85,8 @@ Combobox is input-first. The visible input filters the list; the hidden input st
   </Step>
 </Steps>
 
+Pressing Escape in the input closes an open suggestions popup without dismissing an enclosing dialog. Once the popup is closed, press Escape again to dismiss the dialog.
+
 ### HTML structure
 
 <dl>

site/src/docs/components/command.mdx

@@ -197,7 +197,7 @@ A simple command menu in a dialog.
 
 <Preview>
 <button type="button" class="btn" data-variant="outline" onclick="document.getElementById('command-basic').showModal()">Open Menu</button>
-<dialog id="command-basic" class="command-dialog" aria-label="Command menu" onclick="if (event.target === this) this.close()">
+<dialog id="command-basic" class="command-dialog" aria-label="Command menu" onpointerdown="this.dataset.backdropPress = event.target === this" onclick="if (event.target === this && this.dataset.backdropPress === 'true') this.close()">
   <div class="command">
     <header><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
       <input type="text" id="command-basic-input" placeholder="Type a command or search..." autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-controls="command-basic-menu" />
@@ -218,7 +218,7 @@ A simple command menu in a dialog.
 
 <Preview>
 <button type="button" class="btn" data-variant="outline" onclick="document.getElementById('command-shortcuts-dialog').showModal()">Open Menu</button>
-<dialog id="command-shortcuts-dialog" class="command-dialog" aria-label="Command menu" onclick="if (event.target === this) this.close()">
+<dialog id="command-shortcuts-dialog" class="command-dialog" aria-label="Command menu" onpointerdown="this.dataset.backdropPress = event.target === this" onclick="if (event.target === this && this.dataset.backdropPress === 'true') this.close()">
   <div class="command">
     <header><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
       <input type="text" id="command-shortcuts-input" placeholder="Type a command or search..." autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-controls="command-shortcuts-menu" />
@@ -248,7 +248,7 @@ A simple command menu in a dialog.
 
 <Preview>
 <button type="button" class="btn" data-variant="outline" onclick="document.getElementById('command-groups-dialog').showModal()">Open Menu</button>
-<dialog id="command-groups-dialog" class="command-dialog" aria-label="Command menu" onclick="if (event.target === this) this.close()">
+<dialog id="command-groups-dialog" class="command-dialog" aria-label="Command menu" onpointerdown="this.dataset.backdropPress = event.target === this" onclick="if (event.target === this && this.dataset.backdropPress === 'true') this.close()">
   <div class="command">
     <header><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
       <input type="text" id="command-groups-input" placeholder="Type a command or search..." autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-controls="command-groups-menu" />
@@ -291,7 +291,7 @@ A simple command menu in a dialog.
 
 <Preview>
 <button type="button" class="btn" data-variant="outline" onclick="document.getElementById('command-scrollable-dialog').showModal()">Open Menu</button>
-<dialog id="command-scrollable-dialog" class="command-dialog" aria-label="Command menu" onclick="if (event.target === this) this.close()">
+<dialog id="command-scrollable-dialog" class="command-dialog" aria-label="Command menu" onpointerdown="this.dataset.backdropPress = event.target === this" onclick="if (event.target === this && this.dataset.backdropPress === 'true') this.close()">
   <div class="command">
     <header><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
       <input type="text" id="command-scrollable-input" placeholder="Type a command or search..." autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-controls="command-scrollable-menu" />

site/src/docs/components/dialog.mdx

@@ -2,7 +2,7 @@
 
 <Preview>
 <button type="button" onclick="document.getElementById('demo-dialog-edit-profile').showModal()" class="btn" data-variant="outline">Open Dialog</button>
-<dialog id="demo-dialog-edit-profile" class="dialog" aria-labelledby="demo-dialog-edit-profile-title" aria-describedby="demo-dialog-edit-profile-description" onclick="if (event.target === this) this.close()">
+<dialog id="demo-dialog-edit-profile" class="dialog" aria-labelledby="demo-dialog-edit-profile-title" aria-describedby="demo-dialog-edit-profile-description" onpointerdown="this.dataset.backdropPress = event.target === this" onclick="if (event.target === this && this.dataset.backdropPress === 'true') this.close()">
   <div class="sm:max-w-sm">
     <header>
       <h2 id="demo-dialog-edit-profile-title">Edit profile</h2>
@@ -63,7 +63,7 @@ Basecoat uses the native `<dialog>` element and `showModal()`. This differs from
 
 ```html
 <button type="button" onclick="document.getElementById('demo-dialog-edit-profile').showModal()" class="btn" data-variant="outline">Open Dialog</button>
-<dialog id="demo-dialog-edit-profile" class="dialog" aria-labelledby="demo-dialog-edit-profile-title" aria-describedby="demo-dialog-edit-profile-description" onclick="if (event.target === this) this.close()">
+<dialog id="demo-dialog-edit-profile" class="dialog" aria-labelledby="demo-dialog-edit-profile-title" aria-describedby="demo-dialog-edit-profile-description" onpointerdown="this.dataset.backdropPress = event.target === this" onclick="if (event.target === this && this.dataset.backdropPress === 'true') this.close()">
   <div class="sm:max-w-sm">
     <header>
       <h2 id="demo-dialog-edit-profile-title">Edit profile</h2>
@@ -134,7 +134,7 @@ Basecoat uses the native `<dialog>` element and `showModal()`. This differs from
 
 <Preview>
 <button type="button" onclick="document.getElementById('dialog-custom-close').showModal()" class="btn" data-variant="outline">Share</button>
-<dialog id="dialog-custom-close" class="dialog" aria-labelledby="dialog-custom-close-title" aria-describedby="dialog-custom-close-description" onclick="if (event.target === this) this.close()">
+<dialog id="dialog-custom-close" class="dialog" aria-labelledby="dialog-custom-close-title" aria-describedby="dialog-custom-close-description" onpointerdown="this.dataset.backdropPress = event.target === this" onclick="if (event.target === this && this.dataset.backdropPress === 'true') this.close()">
   <div class="sm:max-w-md">
     <header>
       <h2 id="dialog-custom-close-title">Share link</h2>
@@ -157,7 +157,7 @@ Basecoat uses the native `<dialog>` element and `showModal()`. This differs from
 
 <Preview>
 <button type="button" onclick="document.getElementById('dialog-no-close').showModal()" class="btn" data-variant="outline">No Close Button</button>
-<dialog id="dialog-no-close" class="dialog" aria-labelledby="dialog-no-close-title" aria-describedby="dialog-no-close-description" onclick="if (event.target === this) this.close()">
+<dialog id="dialog-no-close" class="dialog" aria-labelledby="dialog-no-close-title" aria-describedby="dialog-no-close-description" onpointerdown="this.dataset.backdropPress = event.target === this" onclick="if (event.target === this && this.dataset.backdropPress === 'true') this.close()">
   <div>
     <header>
       <h2 id="dialog-no-close-title">No Close Button</h2>
@@ -171,7 +171,7 @@ Basecoat uses the native `<dialog>` element and `showModal()`. This differs from
 
 <Preview>
 <button type="button" onclick="document.getElementById('dialog-sticky-footer').showModal()" class="btn" data-variant="outline">Sticky Footer</button>
-<dialog id="dialog-sticky-footer" class="dialog" aria-labelledby="dialog-sticky-footer-title" aria-describedby="dialog-sticky-footer-description" onclick="if (event.target === this) this.close()">
+<dialog id="dialog-sticky-footer" class="dialog" aria-labelledby="dialog-sticky-footer-title" aria-describedby="dialog-sticky-footer-description" onpointerdown="this.dataset.backdropPress = event.target === this" onclick="if (event.target === this && this.dataset.backdropPress === 'true') this.close()">
   <div>
     <header>
       <h2 id="dialog-sticky-footer-title">Sticky Footer</h2>
@@ -199,7 +199,7 @@ Basecoat uses the native `<dialog>` element and `showModal()`. This differs from
 
 <Preview>
 <button type="button" onclick="document.getElementById('dialog-scrollable').showModal()" class="btn" data-variant="outline">Scrollable Content</button>
-<dialog id="dialog-scrollable" class="dialog" aria-labelledby="dialog-scrollable-title" aria-describedby="dialog-scrollable-description" onclick="if (event.target === this) this.close()">
+<dialog id="dialog-scrollable" class="dialog" aria-labelledby="dialog-scrollable-title" aria-describedby="dialog-scrollable-description" onpointerdown="this.dataset.backdropPress = event.target === this" onclick="if (event.target === this && this.dataset.backdropPress === 'true') this.close()">
   <div>
     <header>
       <h2 id="dialog-scrollable-title">Scrollable Content</h2>
@@ -229,7 +229,7 @@ Dialog positioning and close button placement use logical properties. Set `dir="
 <Preview>
 <div dir="rtl">
   <button type="button" onclick="document.getElementById('dialog-rtl').showModal()" class="btn" data-variant="outline">فتح الحوار</button>
-  <dialog id="dialog-rtl" class="dialog" aria-labelledby="dialog-rtl-title" aria-describedby="dialog-rtl-description" onclick="if (event.target === this) this.close()">
+  <dialog id="dialog-rtl" class="dialog" aria-labelledby="dialog-rtl-title" aria-describedby="dialog-rtl-description" onpointerdown="this.dataset.backdropPress = event.target === this" onclick="if (event.target === this && this.dataset.backdropPress === 'true') this.close()">
     <div class="sm:max-w-sm">
       <header>
         <h2 id="dialog-rtl-title">تعديل الملف الشخصي</h2>

site/src/docs/components/separator.mdx

@@ -0,0 +1,134 @@
+# Separator
+
+<Callout title="No dedicated component" icon="circle-alert">
+  There is no dedicated Separator component in Basecoat.
+</Callout>
+
+<Preview class="w-full max-w-sm">
+<div class="flex flex-col gap-4 text-sm">
+  <div class="flex flex-col gap-1.5">
+    <div class="leading-none font-medium">Basecoat</div>
+    <div class="text-muted-foreground">Tailwind components for any web stack</div>
+  </div>
+  <hr role="separator" />
+  <div>A set of components you can drop into any HTML page, styled like shadcn/ui.</div>
+</div>
+</Preview>
+
+## Usage
+
+<Steps>
+  <Step title="Include CSS">
+
+Import Tailwind and one full Basecoat style bundle.
+
+```css
+@import "tailwindcss";
+@import "basecoat-css/vega.css";
+```
+
+Or import only the base CSS, which styles horizontal and vertical separators.
+
+```css
+@import "tailwindcss";
+@import "basecoat-css/base.css";
+```
+
+Separator is a native `<hr>` and has no dedicated component CSS file.
+
+Using CDN or bundler imports? See the [Installation page](/installation).
+
+  </Step>
+  <Step title="Add your separator HTML">
+
+Use an `<hr>` with `role="separator"`. It renders as a 1px line in the `border` color, matching shadcn/ui's Separator.
+
+```html
+<hr role="separator" />
+```
+
+If the separator is purely decorative, use `role="none"` instead so assistive technologies skip it. This is what shadcn/ui's `decorative` prop does.
+
+```html
+<hr role="none" />
+```
+
+  </Step>
+</Steps>
+
+## Examples
+
+### Vertical
+
+Add `aria-orientation="vertical"` for a vertical separator. It fills the height of its row.
+
+<Preview>
+<div class="flex h-5 items-center gap-4 text-sm">
+  <div>Blog</div>
+  <hr role="separator" aria-orientation="vertical" />
+  <div>Docs</div>
+  <hr role="separator" aria-orientation="vertical" />
+  <div>Source</div>
+</div>
+</Preview>
+
+### Menu
+
+Vertical separators between menu items with descriptions.
+
+<Preview>
+<div class="flex items-center gap-2 text-sm md:gap-4">
+  <div class="flex flex-col gap-1">
+    <span class="font-medium">Settings</span>
+    <span class="text-xs text-muted-foreground">Manage preferences</span>
+  </div>
+  <hr role="separator" aria-orientation="vertical" />
+  <div class="flex flex-col gap-1">
+    <span class="font-medium">Account</span>
+    <span class="text-xs text-muted-foreground">Profile & security</span>
+  </div>
+  <hr role="separator" aria-orientation="vertical" class="hidden md:block" />
+  <div class="hidden flex-col gap-1 md:flex">
+    <span class="font-medium">Help</span>
+    <span class="text-xs text-muted-foreground">Support & docs</span>
+  </div>
+</div>
+</Preview>
+
+### List
+
+Horizontal separators between list items.
+
+<Preview class="w-full max-w-sm">
+<div class="flex flex-col gap-2 text-sm">
+  <dl class="flex items-center justify-between">
+    <dt>Item 1</dt>
+    <dd class="text-muted-foreground">Value 1</dd>
+  </dl>
+  <hr role="separator" />
+  <dl class="flex items-center justify-between">
+    <dt>Item 2</dt>
+    <dd class="text-muted-foreground">Value 2</dd>
+  </dl>
+  <hr role="separator" />
+  <dl class="flex items-center justify-between">
+    <dt>Item 3</dt>
+    <dd class="text-muted-foreground">Value 3</dd>
+  </dl>
+</div>
+</Preview>
+
+### RTL
+
+Separators follow document direction. Vertical separators use a logical inline-start border, so they need no changes.
+
+<Preview class="w-full max-w-sm">
+<div dir="rtl" class="flex flex-col gap-4 text-sm">
+  <div class="flex flex-col gap-1.5">
+    <div class="leading-none font-medium">Basecoat</div>
+    <div class="text-muted-foreground">مكونات Tailwind لأي بيئة ويب</div>
+  </div>
+  <hr role="separator" />
+  <div>مجموعة من المكونات يمكنك إضافتها إلى أي صفحة HTML، بتصميم مثل shadcn/ui.</div>
+</div>
+</Preview>

site/src/docs/components/toast.mdx

@@ -10,6 +10,7 @@
   hx-get="/fragments/toast/success"
   hx-target="#toaster"
   hx-swap="beforeend"
+  hx-push-url="false"
 >Toast from backend (with HTMX)</button>
 </Preview>
 
@@ -163,6 +164,10 @@ Append server-rendered toast markup to the toaster, or create one from JavaScrip
 
 ### Config object
 
+<Callout type="warning" title="Text is escaped by default" icon="triangle-alert">
+  `title`, `description`, and action labels are inserted as plain text. With `html: true` they are inserted as HTML, so never pass untrusted user input with it. `onclick` is JavaScript code and must never contain user input. `icon` is always inserted as raw HTML (it is meant for SVG markup).
+</Callout>
+
 <dl>
   <dt><code>duration</code> <span class="badge" data-variant="secondary">Optional</span></dt>
   <dd>Timeout in milliseconds. Defaults to <code>3000</code>, or <code>5000</code> for error toasts. Use <code>-1</code> to keep it open.</dd>
@@ -176,4 +181,10 @@ Append server-rendered toast markup to the toaster, or create one from JavaScrip
   <dd>Primary action. Supports <code>label</code> with either <code>href</code> or <code>onclick</code>.</dd>
   <dt><code>cancel</code> <span class="badge" data-variant="secondary">Optional</span></dt>
   <dd>Secondary action. Supports <code>label</code> and optional <code>onclick</code>.</dd>
+  <dt><code>icon</code> <span class="badge" data-variant="secondary">Optional</span></dt>
+  <dd>Custom icon markup, usually an SVG. Inserted as raw HTML. Defaults to the category icon.</dd>
+  <dt><code>html</code> <span class="badge" data-variant="secondary">Optional</span></dt>
+  <dd>Set to <code>true</code> to insert <code>title</code>, <code>description</code>, and action labels as HTML instead of plain text. Defaults to <code>false</code>. Only use it with trusted content.</dd>
 </dl>
+
+The Jinja and Nunjucks `toast()` macros render on your server, so your template engine's autoescaping applies to `title`, `description`, and labels there when it is enabled. Nunjucks enables it by default. With Jinja, make sure your environment's `autoescape` setting covers the Basecoat template files (for example `.html.jinja`). `icon` is output with `safe`, and `onclick` is output as an attribute, so neither should contain user input.

site/src/docs/components/tooltip.mdx

@@ -53,6 +53,14 @@ Basecoat tooltips are CSS-only and text-only. This intentionally differs from sh
 <button class="btn" data-variant="outline" data-tooltip="Default tooltip">Default</button>
 </Preview>
 
+### Long text
+
+Tooltips stay on one line and truncate with an ellipsis when the text exceeds the maximum width. This intentionally differs from shadcn/ui's multiline tooltip content.
+
+<Preview>
+<button class="btn" data-variant="outline" data-tooltip="A tooltip with enough text to exceed the default maximum width and demonstrate truncation">Hover</button>
+</Preview>
+
 ### Sides
 
 <Preview>

site/src/docs/customization.mdx

@@ -45,12 +45,12 @@ Learn more in the [shadcn/ui theming docs](https://ui.shadcn.com/docs/theming).
 
 ## Fonts
 
-Basecoat does not ship web font files by default. Its font tokens prefer [Geist Sans](https://fonts.google.com/specimen/Geist) and [Geist Mono](https://fonts.google.com/specimen/Geist+Mono) when those fonts are available, then fall back to the full Tailwind default sans and mono stacks.
+Basecoat does not ship web font files by default. Its font tokens prefer [Geist](https://fonts.google.com/specimen/Geist) and [Geist Mono](https://fonts.google.com/specimen/Geist+Mono) when those fonts are available, then fall back to the full Tailwind default sans and mono stacks.
 
 Install the fonts with Fontsource:
 
 ```bash
-npm install @fontsource/geist-sans @fontsource/geist-mono
+npm install @fontsource/geist @fontsource/geist-mono
 ```
 
 Then import the font files. Basecoat's default font tokens already reference Geist with full system fallbacks:
@@ -58,10 +58,10 @@ Then import the font files. Basecoat's default font tokens already reference Gei
 ```css
 @import "tailwindcss";
 @import "basecoat-css/sera";
-@import "@fontsource/geist-sans/400.css";
-@import "@fontsource/geist-sans/500.css";
-@import "@fontsource/geist-sans/600.css";
-@import "@fontsource/geist-sans/700.css";
+@import "@fontsource/geist/400.css";
+@import "@fontsource/geist/500.css";
+@import "@fontsource/geist/600.css";
+@import "@fontsource/geist/700.css";
 @import "@fontsource/geist-mono/400.css";
 @import "@fontsource/geist-mono/500.css";
 @import "@fontsource/geist-mono/600.css";

site/src/docs/docs.json

@@ -94,6 +94,7 @@
         "components/radio-group",
         "components/select",
         "components/scroll-area",
+        "components/separator",
         "components/sidebar",
         "components/skeleton",
         "components/slider",

site/src/docs/installation.mdx

@@ -64,10 +64,38 @@ Or load the Basecoat runtime once, then only the component scripts you use.
 | `dist/basecoat-{style}.cdn.min.css` | Standalone CDN stylesheet for `vega`, `nova`, `maia`, `lyra`, `mira`, `luma`, `sera`, or `rhea`. |
 | `dist/basecoat-base.cdn.min.css` | Base tokens, utilities, and component structure without a style pack. |
 | `dist/basecoat-compat.cdn.min.css` | Optional pre-1.0 compatibility aliases. Load after Basecoat. |
+| `dist/basecoat.bundle.css` | Uncompiled single-file source for use with your own Tailwind build. Alias for the Vega style. |
+| `dist/basecoat-{style}.bundle.css` | Uncompiled single-file source for use with your own Tailwind build, for `vega`, `nova`, `maia`, `lyra`, `mira`, `luma`, `sera`, or `rhea`. |
 | `dist/js/all.min.js` | All auto-initialized JavaScript components except Chart. |
 | `dist/js/basecoat.min.js` | Runtime only. Load once before individual component scripts. |
 | `dist/js/{component}.min.js` | Individual JavaScript component file. |
 
+### Tailwind utilities with the CDN
+
+The CDN stylesheets only include the utilities Basecoat uses, so classes like `bg-primary` or `text-muted-foreground` are not available. If you add the [Tailwind Play CDN](https://tailwindcss.com/docs/installation/play-cdn) for utilities, map Basecoat's theme tokens to Tailwind colors and restore the border color after Tailwind's preflight. Load this after the Basecoat stylesheet.
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+<style type="text/tailwindcss">
+  @theme inline {
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-border: var(--border);
+  }
+  @layer base {
+    *, ::before, ::after { border-color: var(--border); }
+  }
+</style>
+```
+
+Add any other tokens you use the same way, for example `--color-destructive: var(--destructive);`. The Play CDN is meant for prototypes. For production, use the [Tailwind CLI with a bundle file](#npm) instead.
+
 ## NPM
 
 <Steps>
@@ -129,6 +157,10 @@ Or import a named style bundle.
 @import "basecoat-css/maia";
 ```
 
+<Callout title="Using the Tailwind CLI without npm?" icon="info">
+  Download a single-file bundle, for example <a href={`https://cdn.jsdelivr.net/npm/basecoat-css@${basecoatVersion}/dist/basecoat-maia.bundle.css`}>{`basecoat-maia.bundle.css`}</a>. Save it next to your CSS and import it after Tailwind: `@import "tailwindcss"; @import "./basecoat-maia.bundle.css";`. Use `basecoat.bundle.css` for the default Vega style.
+</Callout>
+
 <Callout type="warning" title="Stylesheet order matters" icon="triangle-alert">
   Load Basecoat after any stylesheet that includes Tailwind base/preflight. Loading another full Tailwind build after Basecoat can reset borders, inputs, and other component defaults.
 </Callout>
@@ -195,7 +227,7 @@ See [Templates](/templates) for the available macros and arguments.
 | `basecoat-css/components` | All component structure without a style pack. |
 | `basecoat-css/components/button` | Individual component CSS. Replace `button` with any component file. |
 | `basecoat-css/styles/maia` | Individual style-pack CSS. Use with `basecoat-css/base` or `basecoat-css/components`. |
-| `basecoat-css/all.css` | Full default stylesheet plus all style-pack CSS. Use only when you need every style pack available at runtime. |
+| `basecoat-css/all.css` | Alias for `basecoat-css`, the default Vega stylesheet. It does not include the other style packs. |
 | `basecoat-css/compat` | Optional pre-1.0 compatibility aliases. Load after Basecoat. |
 
 ### Template files
@@ -243,6 +275,14 @@ Chart uses a separate helper and is not included in `basecoat-css/all`.
 
 Each component page shows the minimal scripts or imports required for that component.
 
+### JavaScript lifecycle
+
+Basecoat initializes registered components on page load and when new DOM is inserted.
+
+Use `window.basecoat.initAll()` after manually inserting HTML that contains Basecoat components. It only initializes components that are not already initialized.
+
+Use `window.basecoat.initAll({ force: true })` when a framework or navigation library restores previously initialized DOM from a cache, such as an HTMX history restore. Force mode destroys existing component instances before reinitializing them, so it also resets transient state such as open menus, focus state, and active interactions.
+
 ## Compatibility
 
 Basecoat 1.0 introduces new style packs and a smaller public API based on root classes plus semantic HTML and documented attributes. If you need pre-1.0 class aliases while migrating, load the compatibility stylesheet after your Basecoat stylesheet.

site/src/scripts/demo-interactions.js

@@ -1,6 +1,3 @@
-import "../../../src/js/basecoat.js";
-import "../../../src/js/accordion.js";
-
 const initPriceRange = () => {
   const input = document.getElementById("price-range");
   const output = document.getElementById("price-range-output");
@@ -104,3 +101,5 @@ if (document.readyState === "loading") {
 } else {
   initDemos();
 }
+
+document.addEventListener("htmx:afterSettle", initDemos);

src/css/base/base.css

@@ -84,7 +84,7 @@
 }
 
 @theme {
-  --font-sans: "Geist Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-sans: "Geist", "Geist Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
@@ -131,6 +131,15 @@
     @apply scroll-smooth;
   }
   body {
-    @apply bg-background text-foreground overscroll-none antialiased;
+    @apply bg-background text-foreground overscroll-none;
+  }
+  hr:where([aria-orientation='vertical']) {
+    flex-shrink: 0;
+    align-self: stretch;
+    inline-size: 1px;
+    block-size: auto;
+    margin: 0;
+    border-block-start-width: 0;
+    border-inline-start-width: 1px;
   }
 }

src/css/components/dialog.css

@@ -1,5 +1,19 @@
 /* Dialog */
+@keyframes dialog-scroll-lock {
+  from, to {
+    scrollbar-gutter: stable;
+  }
+}
+
 @layer components {
+  /* Lock page scroll while a modal dialog is open. The scroll timeline only
+     reserves the scrollbar gutter if the page can scroll, so nothing shifts. */
+  html:has(:is(.dialog, .alert-dialog, .command-dialog, .drawer):modal) {
+    overflow: hidden;
+    animation: dialog-scroll-lock linear both;
+    animation-timeline: scroll(self);
+  }
+
   .dialog,
   .alert-dialog {
     @apply bg-transparent p-0 text-inherit opacity-0 transition-all transition-discrete backdrop:opacity-0 backdrop:transition-all backdrop:transition-discrete;
@@ -77,5 +91,25 @@
     > * > footer {
       @apply flex flex-col-reverse sm:flex-row sm:justify-end;
     }
+
+    &:is([data-size='sm']) > * > header,
+    > [data-size='sm'] > header {
+      @apply sm:place-items-center sm:text-center;
+    }
+
+    &:is([data-size='sm']) > * > header:has(> figure),
+    > [data-size='sm'] > header:has(> figure) {
+      @apply sm:grid-rows-[auto_auto_1fr];
+    }
+
+    &:is([data-size='sm']) > * > header:has(> figure) > :is(h2, p),
+    > [data-size='sm'] > header:has(> figure) > :is(h2, p) {
+      @apply sm:col-start-auto;
+    }
+
+    &:is([data-size='sm']) > * > footer,
+    > [data-size='sm'] > footer {
+      @apply grid grid-cols-2 sm:grid sm:grid-cols-2;
+    }
   }
 }

src/css/components/sidebar.css

@@ -8,7 +8,7 @@
     &[aria-hidden=false] {
       @apply max-md:bg-black/50 max-md:fixed max-md:inset-0 max-md:z-40;
     }
-    nav {
+    > nav {
       @apply fixed inset-y-0 z-50 flex w-(--sidebar-mobile-width) flex-col transition-transform duration-300 ease-in-out md:w-(--sidebar-width);
     }
     & + * {
@@ -16,14 +16,14 @@
     }
     &:not([data-side]),
     &[data-side=left] {
-      nav {
+      > nav {
         @apply left-0 border-r;
       }
       & + * {
         @apply relative md:ml-(--sidebar-width);
       }
       &[aria-hidden=true] {
-        nav {
+        > nav {
           @apply -translate-x-full;
         }
         & + * {
@@ -32,14 +32,14 @@
       }
     }
     &[data-side=right] {
-      nav {
+      > nav {
         @apply right-0 border-l;
       }
       & + * {
         @apply relative md:mr-(--sidebar-width);
       }
       &[aria-hidden=true] {
-        nav {
+        > nav {
           @apply translate-x-full;
         }
         & + * {
@@ -47,7 +47,7 @@
         }
       }
     }
-    nav {
+    > nav {
       > header,
       > footer {
         @apply flex flex-col;
@@ -79,7 +79,10 @@
               &:not([open]) {
                 > summary {
                   &::after {
-                    @apply -rotate-90 rtl:rotate-90;
+                    @apply -rotate-90;
+                  }
+                  &:where(:dir(rtl), [dir='rtl'], [dir='rtl'] *)::after {
+                    @apply rotate-90;
                   }
                 }
               }

src/css/components/tooltip.css

@@ -4,7 +4,7 @@
     @apply relative;
 
     &:before {
-      @apply absolute z-[60] w-fit max-w-xs origin-(--transform-origin) scale-95 truncate invisible opacity-0 transition-all pointer-events-none content-[attr(data-tooltip)];
+      @apply absolute block z-[60] w-fit max-w-xs origin-(--transform-origin) scale-95 truncate invisible opacity-0 transition-all pointer-events-none content-[attr(data-tooltip)];
     }
 
     &:hover:before {

src/css/styles/luma.css

@@ -217,7 +217,7 @@
   /* Native Select */
   .field > select,
   select.select {
-    @apply bg-input/50 border-transparent placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-fit rounded-3xl border py-1 ps-3 pe-8 text-sm transition-[color,box-shadow,background-color] focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-8;
+    @apply bg-input/50 border-transparent placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-fit rounded-3xl border py-1 ps-3 pe-8 text-base md:text-sm transition-[color,box-shadow,background-color] focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-8;
     @apply bg-[image:var(--chevron-down-icon-50)] bg-no-repeat bg-position-[center_right_0.625rem] bg-size-[1rem];
   }
 
@@ -373,7 +373,7 @@
   }
 
   .command > header input {
-    @apply ps-1.5 text-sm placeholder:text-muted-foreground;
+    @apply ps-1.5 text-base md:text-sm placeholder:text-muted-foreground;
   }
 
   .command [role='menu'] {
@@ -415,7 +415,7 @@
 
   /* Combobox */
   .combobox > input[role='combobox'] {
-    @apply bg-input/50 border-transparent focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-3xl border py-2 ps-3 pe-8 text-sm transition-[color,box-shadow,background-color] focus-visible:ring-3 aria-invalid:ring-3;
+    @apply bg-input/50 border-transparent focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-3xl border py-2 ps-3 pe-8 text-base md:text-sm transition-[color,box-shadow,background-color] focus-visible:ring-3 aria-invalid:ring-3;
   }
 
   .combobox > svg,
@@ -464,6 +464,10 @@
     @apply bg-input/50 border-transparent focus-within:border-ring focus-within:ring-ring/30 has-[[aria-invalid=true]]:ring-destructive/20 dark:has-[[aria-invalid=true]]:ring-destructive/40 has-[[aria-invalid=true]]:border-destructive dark:has-[[aria-invalid=true]]:border-destructive/50 min-h-9 gap-1.5 rounded-3xl border bg-clip-padding px-1.5 py-1.5 text-sm transition-[color,box-shadow,background-color] focus-within:ring-3 has-[[aria-invalid=true]]:ring-3;
   }
 
+  .combobox-chips > input[role='combobox'] {
+    @apply text-base md:text-sm;
+  }
+
   .combobox-chip {
     @apply bg-input text-foreground dark:bg-input/60 h-5.5 gap-1 rounded-3xl px-2 text-xs font-medium has-[>.combobox-chip-remove]:pe-0;
   }
@@ -540,6 +544,11 @@
     @apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 max-w-xs gap-6 rounded-4xl p-6 shadow-xl ring-1 duration-100 sm:max-w-md;
   }
 
+  .alert-dialog:is([data-size='sm']) > *,
+  .alert-dialog > [data-size='sm'] {
+    @apply sm:max-w-xs;
+  }
+
   .dialog > * {
     @apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 max-w-[calc(100%-2rem)] gap-6 rounded-4xl p-6 text-sm shadow-xl ring-1 duration-100 sm:max-w-md;
   }
@@ -782,7 +791,11 @@
   }
 
   :is(.field > input[type='radio'], .input[type='radio']):checked:before {
-    @apply bg-primary-foreground size-2 dark:size-2.5;
+    @apply bg-primary-foreground size-2;
+  }
+
+  html.dark :is(.field > input[type='radio'], .input[type='radio']):checked:before {
+    @apply size-2.5;
   }
 
   /* Switch */
@@ -800,7 +813,11 @@
   }
 
   :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):before {
-    @apply bg-background rounded-full shadow-sm not-dark:bg-clip-padding;
+    @apply bg-background rounded-full shadow-sm;
+  }
+
+  html:not(.dark) :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):before {
+    @apply bg-clip-padding;
   }
 
   html.dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not(:checked):before {
@@ -943,7 +960,7 @@
     @apply rounded-3xl;
   }
   .input-group > :is(input, select, [data-control]) {
-    @apply px-3 py-1 text-sm;
+    @apply px-3 py-1 text-base md:text-sm;
   }
 
   .input-group:not([data-orientation='vertical']):has(> :is([data-align='start'], [data-align='inline-start'])) > :is(input, select, [data-control]) {
@@ -955,7 +972,7 @@
   }
 
   .input-group > textarea {
-    @apply px-3 py-2.5 text-sm;
+    @apply px-3 py-2.5 text-base md:text-sm;
   }
 
   .input-group > :is(span, [role='group'], header, footer),
@@ -1177,92 +1194,92 @@
   }
 
   /* Sidebar */
-  .sidebar nav {
+  .sidebar > nav {
     @apply bg-sidebar text-sidebar-foreground;
   }
 
-  .sidebar nav > header,
-  .sidebar nav > footer {
+  .sidebar > nav > header,
+  .sidebar > nav > footer {
     @apply gap-2 p-2 [--radius:var(--radius-xl)];
   }
 
-  .sidebar nav > section {
+  .sidebar > nav > section {
     @apply gap-2 [--radius:var(--radius-xl)];
   }
 
-  .sidebar nav [role=separator] {
+  .sidebar > nav [role=separator] {
     @apply border-sidebar-border mx-2;
   }
 
-  .sidebar nav > section > [role=group] {
+  .sidebar > nav > section > [role=group] {
     @apply p-2;
   }
 
-  .sidebar nav h3 {
+  .sidebar > nav h3 {
     @apply text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-xl px-3 text-xs font-medium focus-visible:ring-2 [&>svg]:size-4 transition-[margin,opacity] duration-200 ease-linear;
   }
 
-  .sidebar nav > section > [role=group] > ul {
+  .sidebar > nav > section > [role=group] > ul {
     @apply gap-0.5;
   }
 
-  .sidebar nav > section > [role=group] {
+  .sidebar > nav > section > [role=group] {
     @apply text-sm;
   }
 
-  .sidebar nav li > :is(a, button),
-  .sidebar nav li > details > summary {
+  .sidebar > nav li > :is(a, button),
+  .sidebar > nav li > details > summary {
     @apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground gap-2 rounded-xl px-3 py-2 text-sm focus-visible:ring-2 text-left focus-visible:outline-hidden data-[open]:hover:bg-sidebar-accent data-[open]:hover:text-sidebar-accent-foreground [&>svg]:shrink-0 [&>svg]:size-4;
   }
 
-  .sidebar nav li > :is(a, button):is([aria-current=page], [data-active=true]),
-  .sidebar nav li > details > summary:is([aria-current=page], [data-active=true]) {
+  .sidebar > nav li > :is(a, button):is([aria-current=page], [data-active=true]),
+  .sidebar > nav li > details > summary:is([aria-current=page], [data-active=true]) {
     @apply bg-sidebar-accent text-sidebar-accent-foreground font-medium;
   }
 
-  .sidebar nav li > :is(a, button):not([data-variant]),
-  .sidebar nav li > details > summary:not([data-variant]),
-  .sidebar nav li > :is(a, button)[data-variant=default],
-  .sidebar nav li > details > summary[data-variant=default] {
+  .sidebar > nav li > :is(a, button):not([data-variant]),
+  .sidebar > nav li > details > summary:not([data-variant]),
+  .sidebar > nav li > :is(a, button)[data-variant=default],
+  .sidebar > nav li > details > summary[data-variant=default] {
     @apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
   }
 
-  .sidebar nav li > :is(a, button)[data-variant=outline],
-  .sidebar nav li > details > summary[data-variant=outline] {
+  .sidebar > nav li > :is(a, button)[data-variant=outline],
+  .sidebar > nav li > details > summary[data-variant=outline] {
     @apply bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
   }
 
-  .sidebar nav li > :is(a, button):not([data-size]),
-  .sidebar nav li > details > summary:not([data-size]),
-  .sidebar nav li > :is(a, button)[data-size=default],
-  .sidebar nav li > details > summary[data-size=default] {
+  .sidebar > nav li > :is(a, button):not([data-size]),
+  .sidebar > nav li > details > summary:not([data-size]),
+  .sidebar > nav li > :is(a, button)[data-size=default],
+  .sidebar > nav li > details > summary[data-size=default] {
     @apply h-9 text-sm;
   }
 
-  .sidebar nav li > :is(a, button)[data-size=sm],
-  .sidebar nav li > details > summary[data-size=sm] {
+  .sidebar > nav li > :is(a, button)[data-size=sm],
+  .sidebar > nav li > details > summary[data-size=sm] {
     @apply h-8 text-xs;
   }
 
-  .sidebar nav li > :is(a, button)[data-size=lg],
-  .sidebar nav li > details > summary[data-size=lg] {
+  .sidebar > nav li > :is(a, button)[data-size=lg],
+  .sidebar > nav li > details > summary[data-size=lg] {
     @apply h-14 px-3 text-sm;
   }
 
-  .sidebar nav li > details > summary::after {
+  .sidebar > nav li > details > summary::after {
     @apply size-4;
   }
 
-  .sidebar nav li > details::details-content {
+  .sidebar > nav li > details::details-content {
     @apply px-3.5;
   }
 
-  .sidebar nav ul ul {
+  .sidebar > nav ul ul {
     @apply border-sidebar-border translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
   }
 
-  .sidebar nav ul ul > li > :is(a, button),
-  .sidebar nav ul ul > li > details > summary {
+  .sidebar > nav ul ul > li > :is(a, button),
+  .sidebar > nav ul ul > li > details > summary {
     @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-xl px-3 text-sm focus-visible:ring-2 [&>svg]:size-4;
   }
   /* Progress */
@@ -1319,11 +1336,19 @@
 
   /* Tooltip */
   [data-tooltip]::before {
-    @apply bg-foreground text-background inline-flex items-center gap-1.5 rounded-xl px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-lg;
+    @apply bg-foreground text-background rounded-xl px-3 py-1.5 text-xs;
   }
 
   [data-tooltip][data-arrow]::after {
-    @apply bg-foreground absolute z-[60] size-2.5 rotate-45 rounded-[2px] data-[side=left]:translate-x-[-1.5px] data-[side=right]:translate-x-[1.5px];
+    @apply bg-foreground absolute z-[60] size-2.5 rotate-45 rounded-[2px];
+  }
+
+  [data-tooltip][data-arrow][data-side='left']::after {
+    @apply translate-x-[-1.5px];
+  }
+
+  [data-tooltip][data-arrow][data-side='right']::after {
+    @apply translate-x-[1.5px];
   }
 
   /* Toast */
@@ -1357,15 +1382,54 @@
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-webkit-slider-thumb {
-    @apply ring-black/10 not-dark:bg-clip-padding ring-1 h-4 w-6 rounded-full bg-white shadow-md transition-[color,box-shadow,background-color] hover:ring-4 hover:ring-ring/30 focus-visible:ring-4 focus-visible:ring-ring/30 -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)] focus-visible:outline-hidden;
+    @apply ring-black/10 ring-1 h-4 w-6 rounded-full bg-white shadow-md transition-[color,box-shadow,background-color] -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)];
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-moz-range-thumb {
-    @apply ring-black/10 not-dark:bg-clip-padding ring-1 h-4 w-6 rounded-full bg-white shadow-md transition-[color,box-shadow,background-color] hover:ring-4 hover:ring-ring/30 focus-visible:ring-4 focus-visible:ring-ring/30 focus-visible:outline-hidden;
+    @apply ring-black/10 ring-1 h-4 w-6 rounded-full bg-white shadow-md transition-[color,box-shadow,background-color];
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-ms-thumb {
-    @apply ring-black/10 not-dark:bg-clip-padding ring-1 h-4 w-6 rounded-full bg-white shadow-md transition-[color,box-shadow,background-color] hover:ring-4 hover:ring-ring/30 focus-visible:ring-4 focus-visible:ring-ring/30 focus-visible:outline-hidden;
+    @apply ring-black/10 ring-1 h-4 w-6 rounded-full bg-white shadow-md transition-[color,box-shadow,background-color];
+  }
+
+  /* States go before the thumb pseudo-element so they still apply with native CSS nesting. */
+  html:not(.dark) :is(.field > input[type='range'], .input[type='range'])::-webkit-slider-thumb {
+    @apply bg-clip-padding;
+  }
+
+  html:not(.dark) :is(.field > input[type='range'], .input[type='range'])::-moz-range-thumb {
+    @apply bg-clip-padding;
+  }
+
+  html:not(.dark) :is(.field > input[type='range'], .input[type='range'])::-ms-thumb {
+    @apply bg-clip-padding;
+  }
+
+  @media (hover: hover) {
+    :is(.field > input[type='range'], .input[type='range']):hover::-webkit-slider-thumb {
+      @apply ring-4 ring-ring/30;
+    }
+
+    :is(.field > input[type='range'], .input[type='range']):hover::-moz-range-thumb {
+      @apply ring-4 ring-ring/30;
+    }
+
+    :is(.field > input[type='range'], .input[type='range']):hover::-ms-thumb {
+      @apply ring-4 ring-ring/30;
+    }
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-webkit-slider-thumb {
+    @apply ring-4 ring-ring/30 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-moz-range-thumb {
+    @apply ring-4 ring-ring/30 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-ms-thumb {
+    @apply ring-4 ring-ring/30 outline-hidden;
   }
 
 }

src/css/styles/lyra.css

@@ -520,6 +520,11 @@
     @apply bg-popover text-popover-foreground ring-foreground/10 max-w-xs gap-4 rounded-none p-4 ring-1 duration-100 sm:max-w-sm;
   }
 
+  .alert-dialog:is([data-size='sm']) > *,
+  .alert-dialog > [data-size='sm'] {
+    @apply sm:max-w-xs;
+  }
+
   .dialog > * {
     @apply bg-popover text-popover-foreground ring-foreground/10 max-w-[calc(100%-2rem)] gap-4 rounded-none p-4 text-xs/relaxed ring-1 duration-100 sm:max-w-sm;
   }
@@ -1180,92 +1185,92 @@
   }
 
   /* Sidebar */
-  .sidebar nav {
+  .sidebar > nav {
     @apply bg-sidebar text-sidebar-foreground;
   }
 
-  .sidebar nav > header,
-  .sidebar nav > footer {
+  .sidebar > nav > header,
+  .sidebar > nav > footer {
     @apply gap-2 p-2;
   }
 
-  .sidebar nav > section {
+  .sidebar > nav > section {
     @apply gap-0;
   }
 
-  .sidebar nav [role=separator] {
+  .sidebar > nav [role=separator] {
     @apply border-sidebar-border mx-2;
   }
 
-  .sidebar nav > section > [role=group] {
+  .sidebar > nav > section > [role=group] {
     @apply p-2;
   }
 
-  .sidebar nav h3 {
+  .sidebar > nav h3 {
     @apply text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-none px-2 text-xs focus-visible:ring-2 [&>svg]:size-4 transition-[margin,opacity] duration-200 ease-linear;
   }
 
-  .sidebar nav > section > [role=group] > ul {
+  .sidebar > nav > section > [role=group] > ul {
     @apply gap-0;
   }
 
-  .sidebar nav > section > [role=group] {
+  .sidebar > nav > section > [role=group] {
     @apply text-xs;
   }
 
-  .sidebar nav li > :is(a, button),
-  .sidebar nav li > details > summary {
+  .sidebar > nav li > :is(a, button),
+  .sidebar > nav li > details > summary {
     @apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground gap-2 rounded-none p-2 text-xs focus-visible:ring-2 text-left focus-visible:outline-hidden data-[open]:hover:bg-sidebar-accent data-[open]:hover:text-sidebar-accent-foreground [&>svg]:shrink-0 [&>svg]:size-4;
   }
 
-  .sidebar nav li > :is(a, button):is([aria-current=page], [data-active=true]),
-  .sidebar nav li > details > summary:is([aria-current=page], [data-active=true]) {
+  .sidebar > nav li > :is(a, button):is([aria-current=page], [data-active=true]),
+  .sidebar > nav li > details > summary:is([aria-current=page], [data-active=true]) {
     @apply bg-sidebar-accent text-sidebar-accent-foreground font-medium;
   }
 
-  .sidebar nav li > :is(a, button):not([data-variant]),
-  .sidebar nav li > details > summary:not([data-variant]),
-  .sidebar nav li > :is(a, button)[data-variant=default],
-  .sidebar nav li > details > summary[data-variant=default] {
+  .sidebar > nav li > :is(a, button):not([data-variant]),
+  .sidebar > nav li > details > summary:not([data-variant]),
+  .sidebar > nav li > :is(a, button)[data-variant=default],
+  .sidebar > nav li > details > summary[data-variant=default] {
     @apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
   }
 
-  .sidebar nav li > :is(a, button)[data-variant=outline],
-  .sidebar nav li > details > summary[data-variant=outline] {
+  .sidebar > nav li > :is(a, button)[data-variant=outline],
+  .sidebar > nav li > details > summary[data-variant=outline] {
     @apply bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
   }
 
-  .sidebar nav li > :is(a, button):not([data-size]),
-  .sidebar nav li > details > summary:not([data-size]),
-  .sidebar nav li > :is(a, button)[data-size=default],
-  .sidebar nav li > details > summary[data-size=default] {
+  .sidebar > nav li > :is(a, button):not([data-size]),
+  .sidebar > nav li > details > summary:not([data-size]),
+  .sidebar > nav li > :is(a, button)[data-size=default],
+  .sidebar > nav li > details > summary[data-size=default] {
     @apply h-8 text-xs;
   }
 
-  .sidebar nav li > :is(a, button)[data-size=sm],
-  .sidebar nav li > details > summary[data-size=sm] {
+  .sidebar > nav li > :is(a, button)[data-size=sm],
+  .sidebar > nav li > details > summary[data-size=sm] {
     @apply h-7 text-xs;
   }
 
-  .sidebar nav li > :is(a, button)[data-size=lg],
-  .sidebar nav li > details > summary[data-size=lg] {
+  .sidebar > nav li > :is(a, button)[data-size=lg],
+  .sidebar > nav li > details > summary[data-size=lg] {
     @apply h-12 text-xs;
   }
 
-  .sidebar nav li > details > summary::after {
+  .sidebar > nav li > details > summary::after {
     @apply size-4;
   }
 
-  .sidebar nav li > details::details-content {
+  .sidebar > nav li > details::details-content {
     @apply px-3.5;
   }
 
-  .sidebar nav ul ul {
+  .sidebar > nav ul ul {
     @apply border-sidebar-border translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
   }
 
-  .sidebar nav ul ul > li > :is(a, button),
-  .sidebar nav ul ul > li > details > summary {
+  .sidebar > nav ul ul > li > :is(a, button),
+  .sidebar > nav ul ul > li > details > summary {
     @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-none px-2 text-xs focus-visible:ring-2 [&>svg]:size-4;
   }
   /* Progress */
@@ -1322,7 +1327,7 @@
 
   /* Tooltip */
   [data-tooltip]::before {
-    @apply bg-foreground text-background inline-flex items-center gap-1.5 rounded-none px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-none;
+    @apply bg-foreground text-background rounded-none px-3 py-1.5 text-xs;
   }
 
   [data-tooltip][data-arrow]::after {
@@ -1360,15 +1365,54 @@
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-webkit-slider-thumb {
-    @apply border-ring ring-ring/50 relative size-3 rounded-none border bg-white transition-[color,box-shadow] hover:ring-1 focus-visible:ring-1 active:ring-1 -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)] focus-visible:outline-hidden;
+    @apply border-ring ring-ring/50 relative size-3 rounded-none border bg-white transition-[color,box-shadow] -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)];
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-moz-range-thumb {
-    @apply border-ring ring-ring/50 relative size-3 rounded-none border bg-white transition-[color,box-shadow] hover:ring-1 focus-visible:ring-1 active:ring-1 focus-visible:outline-hidden;
+    @apply border-ring ring-ring/50 relative size-3 rounded-none border bg-white transition-[color,box-shadow];
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-ms-thumb {
-    @apply border-ring ring-ring/50 relative size-3 rounded-none border bg-white transition-[color,box-shadow] hover:ring-1 focus-visible:ring-1 active:ring-1 focus-visible:outline-hidden;
+    @apply border-ring ring-ring/50 relative size-3 rounded-none border bg-white transition-[color,box-shadow];
+  }
+
+  /* States go before the thumb pseudo-element so they still apply with native CSS nesting. */
+  @media (hover: hover) {
+    :is(.field > input[type='range'], .input[type='range']):hover::-webkit-slider-thumb {
+      @apply ring-1;
+    }
+
+    :is(.field > input[type='range'], .input[type='range']):hover::-moz-range-thumb {
+      @apply ring-1;
+    }
+
+    :is(.field > input[type='range'], .input[type='range']):hover::-ms-thumb {
+      @apply ring-1;
+    }
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-webkit-slider-thumb {
+    @apply ring-1 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-moz-range-thumb {
+    @apply ring-1 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-ms-thumb {
+    @apply ring-1 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):active::-webkit-slider-thumb {
+    @apply ring-1;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):active::-moz-range-thumb {
+    @apply ring-1;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):active::-ms-thumb {
+    @apply ring-1;
   }
 
 }

src/css/styles/maia.css

@@ -209,7 +209,7 @@
   /* Native Select */
   .field > select,
   select.select {
-    @apply border-input bg-input/30 placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-fit rounded-4xl border py-1 ps-3 pe-8 text-sm transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=sm]:h-8;
+    @apply border-input bg-input/30 placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-fit rounded-4xl border py-1 ps-3 pe-8 text-base md:text-sm transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=sm]:h-8;
     @apply bg-[image:var(--chevron-down-icon-50)] bg-no-repeat bg-position-[center_right_0.875rem] bg-size-[1rem];
   }
 
@@ -365,7 +365,7 @@
   }
 
   .command > header input {
-    @apply ps-1.5 text-sm placeholder:text-muted-foreground;
+    @apply ps-1.5 text-base md:text-sm placeholder:text-muted-foreground;
   }
 
   .command [role='menu'] {
@@ -407,7 +407,7 @@
 
   /* Combobox */
   .combobox > input[role='combobox'] {
-    @apply border-input bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-4xl border py-2 ps-3 pe-8 text-sm transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px];
+    @apply border-input bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-4xl border py-2 ps-3 pe-8 text-base md:text-sm transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px];
   }
 
   .combobox > svg,
@@ -456,6 +456,10 @@
     @apply bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-[[aria-invalid=true]]:ring-destructive/20 dark:has-[[aria-invalid=true]]:ring-destructive/40 has-[[aria-invalid=true]]:border-destructive dark:has-[[aria-invalid=true]]:border-destructive/50 min-h-9 gap-1.5 rounded-4xl border bg-clip-padding px-1.5 py-1.5 text-sm transition-colors focus-within:ring-[3px] has-[[aria-invalid=true]]:ring-[3px];
   }
 
+  .combobox-chips > input[role='combobox'] {
+    @apply text-base md:text-sm;
+  }
+
   .combobox-chip {
     @apply bg-muted-foreground/10 text-foreground h-5.5 gap-1 rounded-4xl px-2 text-xs font-medium has-[>.combobox-chip-remove]:pe-0;
   }
@@ -532,6 +536,11 @@
     @apply bg-popover text-popover-foreground ring-foreground/5 max-w-xs gap-6 rounded-4xl p-6 ring-1 duration-100 sm:max-w-md;
   }
 
+  .alert-dialog:is([data-size='sm']) > *,
+  .alert-dialog > [data-size='sm'] {
+    @apply sm:max-w-xs;
+  }
+
   .dialog > * {
     @apply bg-popover text-popover-foreground ring-foreground/5 max-w-[calc(100%-2rem)] gap-6 rounded-4xl p-6 text-sm ring-1 duration-100 sm:max-w-md;
   }
@@ -931,7 +940,7 @@
     @apply rounded-2xl;
   }
   .input-group > :is(input, select, [data-control]) {
-    @apply px-3 py-1 text-sm;
+    @apply px-3 py-1 text-base md:text-sm;
   }
 
   .input-group:not([data-orientation='vertical']):has(> :is([data-align='start'], [data-align='inline-start'])) > :is(input, select, [data-control]) {
@@ -943,7 +952,7 @@
   }
 
   .input-group > textarea {
-    @apply px-3 py-2 text-sm;
+    @apply px-3 py-2 text-base md:text-sm;
   }
 
   .input-group > :is(span, [role='group'], header, footer),
@@ -1165,92 +1174,92 @@
   }
 
   /* Sidebar */
-  .sidebar nav {
+  .sidebar > nav {
     @apply bg-sidebar text-sidebar-foreground;
   }
 
-  .sidebar nav > header,
-  .sidebar nav > footer {
+  .sidebar > nav > header,
+  .sidebar > nav > footer {
     @apply gap-2 p-2 [--radius:var(--radius-xl)];
   }
 
-  .sidebar nav > section {
+  .sidebar > nav > section {
     @apply gap-2 [--radius:var(--radius-xl)];
   }
 
-  .sidebar nav [role=separator] {
+  .sidebar > nav [role=separator] {
     @apply border-sidebar-border mx-2;
   }
 
-  .sidebar nav > section > [role=group] {
+  .sidebar > nav > section > [role=group] {
     @apply p-2;
   }
 
-  .sidebar nav h3 {
+  .sidebar > nav h3 {
     @apply text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-3 text-xs font-medium focus-visible:ring-2 [&>svg]:size-4 transition-[margin,opacity] duration-200 ease-linear;
   }
 
-  .sidebar nav > section > [role=group] > ul {
+  .sidebar > nav > section > [role=group] > ul {
     @apply gap-1;
   }
 
-  .sidebar nav > section > [role=group] {
+  .sidebar > nav > section > [role=group] {
     @apply text-sm;
   }
 
-  .sidebar nav li > :is(a, button),
-  .sidebar nav li > details > summary {
+  .sidebar > nav li > :is(a, button),
+  .sidebar > nav li > details > summary {
     @apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground gap-2 rounded-lg px-3 py-2 text-sm focus-visible:ring-2 text-left focus-visible:outline-hidden data-[open]:hover:bg-sidebar-accent data-[open]:hover:text-sidebar-accent-foreground [&>svg]:shrink-0 [&>svg]:size-4;
   }
 
-  .sidebar nav li > :is(a, button):is([aria-current=page], [data-active=true]),
-  .sidebar nav li > details > summary:is([aria-current=page], [data-active=true]) {
+  .sidebar > nav li > :is(a, button):is([aria-current=page], [data-active=true]),
+  .sidebar > nav li > details > summary:is([aria-current=page], [data-active=true]) {
     @apply bg-sidebar-accent text-sidebar-accent-foreground font-medium;
   }
 
-  .sidebar nav li > :is(a, button):not([data-variant]),
-  .sidebar nav li > details > summary:not([data-variant]),
-  .sidebar nav li > :is(a, button)[data-variant=default],
-  .sidebar nav li > details > summary[data-variant=default] {
+  .sidebar > nav li > :is(a, button):not([data-variant]),
+  .sidebar > nav li > details > summary:not([data-variant]),
+  .sidebar > nav li > :is(a, button)[data-variant=default],
+  .sidebar > nav li > details > summary[data-variant=default] {
     @apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
   }
 
-  .sidebar nav li > :is(a, button)[data-variant=outline],
-  .sidebar nav li > details > summary[data-variant=outline] {
+  .sidebar > nav li > :is(a, button)[data-variant=outline],
+  .sidebar > nav li > details > summary[data-variant=outline] {
     @apply bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
   }
 
-  .sidebar nav li > :is(a, button):not([data-size]),
-  .sidebar nav li > details > summary:not([data-size]),
-  .sidebar nav li > :is(a, button)[data-size=default],
-  .sidebar nav li > details > summary[data-size=default] {
+  .sidebar > nav li > :is(a, button):not([data-size]),
+  .sidebar > nav li > details > summary:not([data-size]),
+  .sidebar > nav li > :is(a, button)[data-size=default],
+  .sidebar > nav li > details > summary[data-size=default] {
     @apply h-9 text-sm;
   }
 
-  .sidebar nav li > :is(a, button)[data-size=sm],
-  .sidebar nav li > details > summary[data-size=sm] {
+  .sidebar > nav li > :is(a, button)[data-size=sm],
+  .sidebar > nav li > details > summary[data-size=sm] {
     @apply h-8 text-xs;
   }
 
-  .sidebar nav li > :is(a, button)[data-size=lg],
-  .sidebar nav li > details > summary[data-size=lg] {
+  .sidebar > nav li > :is(a, button)[data-size=lg],
+  .sidebar > nav li > details > summary[data-size=lg] {
     @apply h-14 px-3 text-sm;
   }
 
-  .sidebar nav li > details > summary::after {
+  .sidebar > nav li > details > summary::after {
     @apply size-4;
   }
 
-  .sidebar nav li > details::details-content {
+  .sidebar > nav li > details::details-content {
     @apply px-3.5;
   }
 
-  .sidebar nav ul ul {
+  .sidebar > nav ul ul {
     @apply border-sidebar-border translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
   }
 
-  .sidebar nav ul ul > li > :is(a, button),
-  .sidebar nav ul ul > li > details > summary {
+  .sidebar > nav ul ul > li > :is(a, button),
+  .sidebar > nav ul ul > li > details > summary {
     @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 text-sm focus-visible:ring-2 [&>svg]:size-4;
   }
   /* Progress */
@@ -1307,11 +1316,19 @@
 
   /* Tooltip */
   [data-tooltip]::before {
-    @apply bg-foreground text-background inline-flex items-center gap-1.5 rounded-2xl px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-4xl;
+    @apply bg-foreground text-background rounded-2xl px-3 py-1.5 text-xs;
   }
 
   [data-tooltip][data-arrow]::after {
-    @apply bg-foreground absolute z-[60] size-2.5 rotate-45 rounded-[2px] data-[side=left]:translate-x-[-1.5px] data-[side=right]:translate-x-[1.5px];
+    @apply bg-foreground absolute z-[60] size-2.5 rotate-45 rounded-[2px];
+  }
+
+  [data-tooltip][data-arrow][data-side='left']::after {
+    @apply translate-x-[-1.5px];
+  }
+
+  [data-tooltip][data-arrow][data-side='right']::after {
+    @apply translate-x-[1.5px];
   }
 
   /* Toast */
@@ -1345,15 +1362,42 @@
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-webkit-slider-thumb {
-    @apply border-primary ring-ring/50 size-4 rounded-4xl border bg-white shadow-sm transition-colors hover:ring-4 focus-visible:ring-4 -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)] focus-visible:outline-hidden;
+    @apply border-primary ring-ring/50 size-4 rounded-4xl border bg-white shadow-sm transition-colors -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)];
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-moz-range-thumb {
-    @apply border-primary ring-ring/50 size-4 rounded-4xl border bg-white shadow-sm transition-colors hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden;
+    @apply border-primary ring-ring/50 size-4 rounded-4xl border bg-white shadow-sm transition-colors;
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-ms-thumb {
-    @apply border-primary ring-ring/50 size-4 rounded-4xl border bg-white shadow-sm transition-colors hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden;
+    @apply border-primary ring-ring/50 size-4 rounded-4xl border bg-white shadow-sm transition-colors;
+  }
+
+  /* States go before the thumb pseudo-element so they still apply with native CSS nesting. */
+  @media (hover: hover) {
+    :is(.field > input[type='range'], .input[type='range']):hover::-webkit-slider-thumb {
+      @apply ring-4;
+    }
+
+    :is(.field > input[type='range'], .input[type='range']):hover::-moz-range-thumb {
+      @apply ring-4;
+    }
+
+    :is(.field > input[type='range'], .input[type='range']):hover::-ms-thumb {
+      @apply ring-4;
+    }
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-webkit-slider-thumb {
+    @apply ring-4 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-moz-range-thumb {
+    @apply ring-4 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-ms-thumb {
+    @apply ring-4 outline-hidden;
   }
 
 }

src/css/styles/mira.css

@@ -407,7 +407,7 @@
 
   /* Combobox */
   .combobox > input[role='combobox'] {
-    @apply border-input bg-input/20 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-7 rounded-md border py-1 ps-2 pe-6 text-xs/relaxed transition-colors focus-visible:ring-2 aria-invalid:ring-2;
+    @apply border-input bg-input/20 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-7 rounded-md border py-1 ps-2 pe-6 text-sm md:text-xs/relaxed transition-colors focus-visible:ring-2 aria-invalid:ring-2;
   }
 
   .combobox > svg,
@@ -536,6 +536,11 @@
     @apply bg-popover text-popover-foreground ring-foreground/10 max-w-xs gap-3 rounded-xl p-4 ring-1 duration-100 sm:max-w-sm;
   }
 
+  .alert-dialog:is([data-size='sm']) > *,
+  .alert-dialog > [data-size='sm'] {
+    @apply max-w-64 sm:max-w-64;
+  }
+
   .dialog > * {
     @apply bg-popover text-popover-foreground ring-foreground/10 max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-xs/relaxed ring-1 duration-100 sm:max-w-sm;
   }
@@ -1174,92 +1179,92 @@
   }
 
   /* Sidebar */
-  .sidebar nav {
+  .sidebar > nav {
     @apply bg-sidebar text-sidebar-foreground;
   }
 
-  .sidebar nav > header,
-  .sidebar nav > footer {
+  .sidebar > nav > header,
+  .sidebar > nav > footer {
     @apply gap-2 p-2;
   }
 
-  .sidebar nav > section {
+  .sidebar > nav > section {
     @apply gap-0;
   }
 
-  .sidebar nav [role=separator] {
+  .sidebar > nav [role=separator] {
     @apply border-sidebar-border mx-2;
   }
 
-  .sidebar nav > section > [role=group] {
+  .sidebar > nav > section > [role=group] {
     @apply px-2 py-1;
   }
 
-  .sidebar nav h3 {
+  .sidebar > nav h3 {
     @apply text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs focus-visible:ring-2 [&>svg]:size-4 transition-[margin,opacity] duration-200 ease-linear;
   }
 
-  .sidebar nav > section > [role=group] > ul {
+  .sidebar > nav > section > [role=group] > ul {
     @apply gap-px;
   }
 
-  .sidebar nav > section > [role=group] {
+  .sidebar > nav > section > [role=group] {
     @apply text-xs;
   }
 
-  .sidebar nav li > :is(a, button),
-  .sidebar nav li > details > summary {
+  .sidebar > nav li > :is(a, button),
+  .sidebar > nav li > details > summary {
     @apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground gap-2 rounded-[calc(var(--radius-sm)+2px)] p-2 text-xs focus-visible:ring-2 text-left focus-visible:outline-hidden data-[open]:hover:bg-sidebar-accent data-[open]:hover:text-sidebar-accent-foreground [&>svg]:shrink-0 [&>svg]:size-4;
   }
 
-  .sidebar nav li > :is(a, button):is([aria-current=page], [data-active=true]),
-  .sidebar nav li > details > summary:is([aria-current=page], [data-active=true]) {
+  .sidebar > nav li > :is(a, button):is([aria-current=page], [data-active=true]),
+  .sidebar > nav li > details > summary:is([aria-current=page], [data-active=true]) {
     @apply bg-sidebar-accent text-sidebar-accent-foreground font-medium;
   }
 
-  .sidebar nav li > :is(a, button):not([data-variant]),
-  .sidebar nav li > details > summary:not([data-variant]),
-  .sidebar nav li > :is(a, button)[data-variant=default],
-  .sidebar nav li > details > summary[data-variant=default] {
+  .sidebar > nav li > :is(a, button):not([data-variant]),
+  .sidebar > nav li > details > summary:not([data-variant]),
+  .sidebar > nav li > :is(a, button)[data-variant=default],
+  .sidebar > nav li > details > summary[data-variant=default] {
     @apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
   }
 
-  .sidebar nav li > :is(a, button)[data-variant=outline],
-  .sidebar nav li > details > summary[data-variant=outline] {
+  .sidebar > nav li > :is(a, button)[data-variant=outline],
+  .sidebar > nav li > details > summary[data-variant=outline] {
     @apply bg-muted/20 dark:bg-muted/30 border-input shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
   }
 
-  .sidebar nav li > :is(a, button):not([data-size]),
-  .sidebar nav li > details > summary:not([data-size]),
-  .sidebar nav li > :is(a, button)[data-size=default],
-  .sidebar nav li > details > summary[data-size=default] {
+  .sidebar > nav li > :is(a, button):not([data-size]),
+  .sidebar > nav li > details > summary:not([data-size]),
+  .sidebar > nav li > :is(a, button)[data-size=default],
+  .sidebar > nav li > details > summary[data-size=default] {
     @apply h-8 text-xs;
   }
 
-  .sidebar nav li > :is(a, button)[data-size=sm],
-  .sidebar nav li > details > summary[data-size=sm] {
+  .sidebar > nav li > :is(a, button)[data-size=sm],
+  .sidebar > nav li > details > summary[data-size=sm] {
     @apply h-7 text-xs;
   }
 
-  .sidebar nav li > :is(a, button)[data-size=lg],
-  .sidebar nav li > details > summary[data-size=lg] {
+  .sidebar > nav li > :is(a, button)[data-size=lg],
+  .sidebar > nav li > details > summary[data-size=lg] {
     @apply h-12 text-xs;
   }
 
-  .sidebar nav li > details > summary::after {
+  .sidebar > nav li > details > summary::after {
     @apply size-4;
   }
 
-  .sidebar nav li > details::details-content {
+  .sidebar > nav li > details::details-content {
     @apply px-3.5;
   }
 
-  .sidebar nav ul ul {
+  .sidebar > nav ul ul {
     @apply border-sidebar-border translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
   }
 
-  .sidebar nav ul ul > li > :is(a, button),
-  .sidebar nav ul ul > li > details > summary {
+  .sidebar > nav ul ul > li > :is(a, button),
+  .sidebar > nav ul ul > li > details > summary {
     @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 text-xs focus-visible:ring-2 [&>svg]:size-4;
   }
   /* Progress */
@@ -1316,7 +1321,7 @@
 
   /* Tooltip */
   [data-tooltip]::before {
-    @apply bg-foreground text-background inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-sm;
+    @apply bg-foreground text-background rounded-md px-3 py-1.5 text-xs;
   }
 
   [data-tooltip][data-arrow]::after {
@@ -1354,15 +1359,54 @@
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-webkit-slider-thumb {
-    @apply border-ring ring-ring/30 relative size-3 rounded-md border bg-white transition-[color,box-shadow] hover:ring-2 focus-visible:ring-2 active:ring-2 -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)] focus-visible:outline-hidden;
+    @apply border-ring ring-ring/30 relative size-3 rounded-md border bg-white transition-[color,box-shadow] -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)];
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-moz-range-thumb {
-    @apply border-ring ring-ring/30 relative size-3 rounded-md border bg-white transition-[color,box-shadow] hover:ring-2 focus-visible:ring-2 active:ring-2 focus-visible:outline-hidden;
+    @apply border-ring ring-ring/30 relative size-3 rounded-md border bg-white transition-[color,box-shadow];
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-ms-thumb {
-    @apply border-ring ring-ring/30 relative size-3 rounded-md border bg-white transition-[color,box-shadow] hover:ring-2 focus-visible:ring-2 active:ring-2 focus-visible:outline-hidden;
+    @apply border-ring ring-ring/30 relative size-3 rounded-md border bg-white transition-[color,box-shadow];
+  }
+
+  /* States go before the thumb pseudo-element so they still apply with native CSS nesting. */
+  @media (hover: hover) {
+    :is(.field > input[type='range'], .input[type='range']):hover::-webkit-slider-thumb {
+      @apply ring-2;
+    }
+
+    :is(.field > input[type='range'], .input[type='range']):hover::-moz-range-thumb {
+      @apply ring-2;
+    }
+
+    :is(.field > input[type='range'], .input[type='range']):hover::-ms-thumb {
+      @apply ring-2;
+    }
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-webkit-slider-thumb {
+    @apply ring-2 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-moz-range-thumb {
+    @apply ring-2 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-ms-thumb {
+    @apply ring-2 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):active::-webkit-slider-thumb {
+    @apply ring-2;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):active::-moz-range-thumb {
+    @apply ring-2;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):active::-ms-thumb {
+    @apply ring-2;
   }
 
 }

src/css/styles/nova.css

@@ -205,7 +205,7 @@
   /* Native Select */
   .field > select,
   select.select {
-    @apply border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-fit rounded-lg border bg-transparent py-1 ps-2.5 pe-8 text-sm transition-colors focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5;
+    @apply border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-fit rounded-lg border bg-transparent py-1 ps-2.5 pe-8 text-base md:text-sm transition-colors focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5;
     @apply bg-[image:var(--chevron-down-icon-50)] bg-no-repeat bg-position-[center_right_0.625rem] bg-size-[1rem];
   }
 
@@ -361,7 +361,7 @@
   }
 
   .command > header input {
-    @apply ps-1.5 text-sm placeholder:text-muted-foreground;
+    @apply ps-1.5 text-base md:text-sm placeholder:text-muted-foreground;
   }
 
   .command [role='menu'] {
@@ -403,7 +403,7 @@
 
   /* Combobox */
   .combobox > input[role='combobox'] {
-    @apply border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent py-1 ps-2.5 pe-8 text-sm transition-colors focus-visible:ring-3 aria-invalid:ring-3;
+    @apply border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent py-1 ps-2.5 pe-8 text-base md:text-sm transition-colors focus-visible:ring-3 aria-invalid:ring-3;
   }
 
   .combobox > svg,
@@ -452,6 +452,10 @@
     @apply dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-[[aria-invalid=true]]:ring-destructive/20 dark:has-[[aria-invalid=true]]:ring-destructive/40 has-[[aria-invalid=true]]:border-destructive dark:has-[[aria-invalid=true]]:border-destructive/50 min-h-8 gap-1 rounded-lg border bg-transparent bg-clip-padding px-1 py-1 text-sm transition-colors focus-within:ring-3 has-[[aria-invalid=true]]:ring-3;
   }
 
+  .combobox-chips > input[role='combobox'] {
+    @apply text-base md:text-sm;
+  }
+
   .combobox-chip {
     @apply bg-muted text-foreground h-5.25 gap-1 rounded-sm px-1.5 text-xs font-medium has-[>.combobox-chip-remove]:pe-0;
   }
@@ -528,6 +532,11 @@
     @apply bg-popover text-popover-foreground ring-foreground/10 max-w-xs gap-4 rounded-xl p-4 ring-1 duration-100 sm:max-w-sm;
   }
 
+  .alert-dialog:is([data-size='sm']) > *,
+  .alert-dialog > [data-size='sm'] {
+    @apply sm:max-w-xs;
+  }
+
   .dialog > * {
     @apply bg-popover text-popover-foreground ring-foreground/10 max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm;
   }
@@ -946,7 +955,7 @@
   }
 
   .input-group > :is(input, select, [data-control]) {
-    @apply px-2.5 py-1 text-sm;
+    @apply px-2.5 py-1 text-base md:text-sm;
   }
 
   .input-group:not([data-orientation='vertical']):has(> :is([data-align='start'], [data-align='inline-start'])) > :is(input, select, [data-control]) {
@@ -958,7 +967,7 @@
   }
 
   .input-group > textarea {
-    @apply px-2.5 py-2 text-sm;
+    @apply px-2.5 py-2 text-base md:text-sm;
   }
 
   .input-group > :is(span, [role='group'], header, footer),
@@ -1188,92 +1197,92 @@
   }
 
   /* Sidebar */
-  .sidebar nav {
+  .sidebar > nav {
     @apply bg-sidebar text-sidebar-foreground;
   }
 
-  .sidebar nav > header,
-  .sidebar nav > footer {
+  .sidebar > nav > header,
+  .sidebar > nav > footer {
     @apply gap-2 p-2;
   }
 
-  .sidebar nav > section {
+  .sidebar > nav > section {
     @apply gap-0;
   }
 
-  .sidebar nav [role=separator] {
+  .sidebar > nav [role=separator] {
     @apply border-sidebar-border mx-2;
   }
 
-  .sidebar nav > section > [role=group] {
+  .sidebar > nav > section > [role=group] {
     @apply p-2;
   }
 
-  .sidebar nav h3 {
+  .sidebar > nav h3 {
     @apply text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium focus-visible:ring-2 [&>svg]:size-4 transition-[margin,opacity] duration-200 ease-linear;
   }
 
-  .sidebar nav > section > [role=group] > ul {
+  .sidebar > nav > section > [role=group] > ul {
     @apply gap-0;
   }
 
-  .sidebar nav > section > [role=group] {
+  .sidebar > nav > section > [role=group] {
     @apply text-sm;
   }
 
-  .sidebar nav li > :is(a, button),
-  .sidebar nav li > details > summary {
+  .sidebar > nav li > :is(a, button),
+  .sidebar > nav li > details > summary {
     @apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-sm focus-visible:ring-2 text-left focus-visible:outline-hidden data-[open]:hover:bg-sidebar-accent data-[open]:hover:text-sidebar-accent-foreground [&>svg]:shrink-0 [&>svg]:size-4;
   }
 
-  .sidebar nav li > :is(a, button):is([aria-current=page], [data-active=true]),
-  .sidebar nav li > details > summary:is([aria-current=page], [data-active=true]) {
+  .sidebar > nav li > :is(a, button):is([aria-current=page], [data-active=true]),
+  .sidebar > nav li > details > summary:is([aria-current=page], [data-active=true]) {
     @apply bg-sidebar-accent text-sidebar-accent-foreground font-medium;
   }
 
-  .sidebar nav li > :is(a, button):not([data-variant]),
-  .sidebar nav li > details > summary:not([data-variant]),
-  .sidebar nav li > :is(a, button)[data-variant=default],
-  .sidebar nav li > details > summary[data-variant=default] {
+  .sidebar > nav li > :is(a, button):not([data-variant]),
+  .sidebar > nav li > details > summary:not([data-variant]),
+  .sidebar > nav li > :is(a, button)[data-variant=default],
+  .sidebar > nav li > details > summary[data-variant=default] {
     @apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
   }
 
-  .sidebar nav li > :is(a, button)[data-variant=outline],
-  .sidebar nav li > details > summary[data-variant=outline] {
+  .sidebar > nav li > :is(a, button)[data-variant=outline],
+  .sidebar > nav li > details > summary[data-variant=outline] {
     @apply bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
   }
 
-  .sidebar nav li > :is(a, button):not([data-size]),
-  .sidebar nav li > details > summary:not([data-size]),
-  .sidebar nav li > :is(a, button)[data-size=default],
-  .sidebar nav li > details > summary[data-size=default] {
+  .sidebar > nav li > :is(a, button):not([data-size]),
+  .sidebar > nav li > details > summary:not([data-size]),
+  .sidebar > nav li > :is(a, button)[data-size=default],
+  .sidebar > nav li > details > summary[data-size=default] {
     @apply h-8 text-sm;
   }
 
-  .sidebar nav li > :is(a, button)[data-size=sm],
-  .sidebar nav li > details > summary[data-size=sm] {
+  .sidebar > nav li > :is(a, button)[data-size=sm],
+  .sidebar > nav li > details > summary[data-size=sm] {
     @apply h-7 text-xs;
   }
 
-  .sidebar nav li > :is(a, button)[data-size=lg],
-  .sidebar nav li > details > summary[data-size=lg] {
+  .sidebar > nav li > :is(a, button)[data-size=lg],
+  .sidebar > nav li > details > summary[data-size=lg] {
     @apply h-12 text-sm;
   }
 
-  .sidebar nav li > details > summary::after {
+  .sidebar > nav li > details > summary::after {
     @apply size-4;
   }
 
-  .sidebar nav li > details::details-content {
+  .sidebar > nav li > details::details-content {
     @apply px-3.5;
   }
 
-  .sidebar nav ul ul {
+  .sidebar > nav ul ul {
     @apply border-sidebar-border translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
   }
 
-  .sidebar nav ul ul > li > :is(a, button),
-  .sidebar nav ul ul > li > details > summary {
+  .sidebar > nav ul ul > li > :is(a, button),
+  .sidebar > nav ul ul > li > details > summary {
     @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 text-sm focus-visible:ring-2 [&>svg]:size-4;
   }
   /* Progress */
@@ -1330,7 +1339,7 @@
 
   /* Tooltip */
   [data-tooltip]::before {
-    @apply bg-foreground text-background inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-sm;
+    @apply bg-foreground text-background rounded-md px-3 py-1.5 text-xs;
   }
 
   [data-tooltip][data-arrow]::after {
@@ -1368,15 +1377,54 @@
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-webkit-slider-thumb {
-    @apply border-ring ring-ring/50 relative size-3 rounded-full border bg-white transition-[color,box-shadow] hover:ring-3 focus-visible:ring-3 active:ring-3 -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)] focus-visible:outline-hidden;
+    @apply border-ring ring-ring/50 relative size-3 rounded-full border bg-white transition-[color,box-shadow] -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)];
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-moz-range-thumb {
-    @apply border-ring ring-ring/50 relative size-3 rounded-full border bg-white transition-[color,box-shadow] hover:ring-3 focus-visible:ring-3 active:ring-3 focus-visible:outline-hidden;
+    @apply border-ring ring-ring/50 relative size-3 rounded-full border bg-white transition-[color,box-shadow];
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-ms-thumb {
-    @apply border-ring ring-ring/50 relative size-3 rounded-full border bg-white transition-[color,box-shadow] hover:ring-3 focus-visible:ring-3 active:ring-3 focus-visible:outline-hidden;
+    @apply border-ring ring-ring/50 relative size-3 rounded-full border bg-white transition-[color,box-shadow];
+  }
+
+  /* States go before the thumb pseudo-element so they still apply with native CSS nesting. */
+  @media (hover: hover) {
+    :is(.field > input[type='range'], .input[type='range']):hover::-webkit-slider-thumb {
+      @apply ring-3;
+    }
+
+    :is(.field > input[type='range'], .input[type='range']):hover::-moz-range-thumb {
+      @apply ring-3;
+    }
+
+    :is(.field > input[type='range'], .input[type='range']):hover::-ms-thumb {
+      @apply ring-3;
+    }
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-webkit-slider-thumb {
+    @apply ring-3 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-moz-range-thumb {
+    @apply ring-3 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-ms-thumb {
+    @apply ring-3 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):active::-webkit-slider-thumb {
+    @apply ring-3;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):active::-moz-range-thumb {
+    @apply ring-3;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):active::-ms-thumb {
+    @apply ring-3;
   }
 
 }

src/css/styles/rhea.css

@@ -217,7 +217,7 @@
   /* Native Select */
   .field > select,
   select.select {
-    @apply bg-input/50 border-transparent placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-fit rounded-2xl border py-1 ps-2.5 pe-8 text-sm transition-[color,box-shadow] duration-200 focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-7;
+    @apply bg-input/50 border-transparent placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-fit rounded-2xl border py-1 ps-2.5 pe-8 text-base md:text-sm transition-[color,box-shadow] duration-200 focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-7;
     @apply bg-[image:var(--chevron-down-icon-50)] bg-no-repeat bg-position-[center_right_0.625rem] bg-size-[1rem];
   }
 
@@ -373,7 +373,7 @@
   }
 
   .command > header input {
-    @apply ps-1.5 text-sm placeholder:text-muted-foreground;
+    @apply ps-1.5 text-base md:text-sm placeholder:text-muted-foreground;
   }
 
   .command [role='menu'] {
@@ -415,7 +415,7 @@
 
   /* Combobox */
   .combobox > input[role='combobox'] {
-    @apply bg-input/50 border-transparent focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 rounded-2xl border py-1 ps-2.5 pe-8 text-sm transition-[color,box-shadow] duration-200 focus-visible:ring-3 aria-invalid:ring-3;
+    @apply bg-input/50 border-transparent focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 rounded-2xl border py-1 ps-2.5 pe-8 text-base md:text-sm transition-[color,box-shadow] duration-200 focus-visible:ring-3 aria-invalid:ring-3;
   }
 
   .combobox > svg,
@@ -464,6 +464,10 @@
     @apply bg-input/50 border-transparent focus-within:border-ring focus-within:ring-ring/30 has-[[aria-invalid=true]]:ring-destructive/20 dark:has-[[aria-invalid=true]]:ring-destructive/40 has-[[aria-invalid=true]]:border-destructive dark:has-[[aria-invalid=true]]:border-destructive/50 min-h-8 gap-1 rounded-2xl border bg-clip-padding px-1 py-1 text-sm transition-[color,box-shadow] duration-200 focus-within:ring-3 has-[[aria-invalid=true]]:ring-3;
   }
 
+  .combobox-chips > input[role='combobox'] {
+    @apply text-base md:text-sm;
+  }
+
   .combobox-chip {
     @apply bg-input text-foreground dark:bg-input/60 h-5.25 gap-1 rounded-2xl px-1.5 text-xs font-medium has-[>.combobox-chip-remove]:pe-0.5;
   }
@@ -540,6 +544,11 @@
     @apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 max-w-xs gap-6 rounded-3xl p-6 shadow-xl ring-1 duration-100 sm:max-w-md;
   }
 
+  .alert-dialog:is([data-size='sm']) > *,
+  .alert-dialog > [data-size='sm'] {
+    @apply sm:max-w-xs;
+  }
+
   .dialog > * {
     @apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 max-w-[calc(100%-2rem)] gap-6 rounded-3xl p-6 text-sm shadow-xl ring-1 duration-100 sm:max-w-md;
   }
@@ -782,7 +791,11 @@
   }
 
   :is(.field > input[type='radio'], .input[type='radio']):checked:before {
-    @apply bg-primary-foreground size-2 dark:size-2.5;
+    @apply bg-primary-foreground size-2;
+  }
+
+  html.dark :is(.field > input[type='radio'], .input[type='radio']):checked:before {
+    @apply size-2.5;
   }
 
   /* Switch */
@@ -800,7 +813,11 @@
   }
 
   :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):before {
-    @apply bg-background rounded-2xl shadow-sm not-dark:bg-clip-padding;
+    @apply bg-background rounded-2xl shadow-sm;
+  }
+
+  html:not(.dark) :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):before {
+    @apply bg-clip-padding;
   }
 
   html.dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not(:checked):before {
@@ -940,7 +957,7 @@
     @apply opacity-50;
   }
   .input-group > :is(input, select, [data-control]) {
-    @apply px-2.5 py-1 text-sm;
+    @apply px-2.5 py-1 text-base md:text-sm;
   }
 
   .input-group:not([data-orientation='vertical']):has(> :is([data-align='start'], [data-align='inline-start'])) > :is(input, select, [data-control]) {
@@ -952,7 +969,7 @@
   }
 
   .input-group > textarea {
-    @apply px-2.5 py-2 text-sm;
+    @apply px-2.5 py-2 text-base md:text-sm;
   }
 
   .input-group > :is(span, [role='group'], header, footer),
@@ -1182,92 +1199,92 @@
   }
 
   /* Sidebar */
-  .sidebar nav {
+  .sidebar > nav {
     @apply bg-sidebar text-sidebar-foreground;
   }
 
-  .sidebar nav > header,
-  .sidebar nav > footer {
+  .sidebar > nav > header,
+  .sidebar > nav > footer {
     @apply gap-2 p-2 [--radius:var(--radius-xl)];
   }
 
-  .sidebar nav > section {
+  .sidebar > nav > section {
     @apply gap-2 [--radius:var(--radius-xl)];
   }
 
-  .sidebar nav [role=separator] {
+  .sidebar > nav [role=separator] {
     @apply border-sidebar-border mx-2;
   }
 
-  .sidebar nav > section > [role=group] {
+  .sidebar > nav > section > [role=group] {
     @apply p-2;
   }
 
-  .sidebar nav h3 {
+  .sidebar > nav h3 {
     @apply text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-xl px-3 text-xs font-medium focus-visible:ring-3 [&>svg]:size-4 transition-[margin,opacity] duration-200 ease-linear;
   }
 
-  .sidebar nav > section > [role=group] > ul {
+  .sidebar > nav > section > [role=group] > ul {
     @apply gap-0.5;
   }
 
-  .sidebar nav > section > [role=group] {
+  .sidebar > nav > section > [role=group] {
     @apply text-sm;
   }
 
-  .sidebar nav li > :is(a, button),
-  .sidebar nav li > details > summary {
+  .sidebar > nav li > :is(a, button),
+  .sidebar > nav li > details > summary {
     @apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground gap-2 rounded-xl px-3 py-2 text-sm duration-200 focus-visible:ring-3 whitespace-nowrap has-[>svg:first-child]:ps-2.5 has-[>svg:last-child]:pe-2.5 text-left focus-visible:outline-hidden data-[open]:hover:bg-sidebar-accent data-[open]:hover:text-sidebar-accent-foreground [&>svg]:shrink-0 [&>svg]:size-4;
   }
 
-  .sidebar nav li > :is(a, button):is([aria-current=page], [data-active=true]),
-  .sidebar nav li > details > summary:is([aria-current=page], [data-active=true]) {
+  .sidebar > nav li > :is(a, button):is([aria-current=page], [data-active=true]),
+  .sidebar > nav li > details > summary:is([aria-current=page], [data-active=true]) {
     @apply bg-sidebar-accent text-sidebar-accent-foreground font-medium;
   }
 
-  .sidebar nav li > :is(a, button):not([data-variant]),
-  .sidebar nav li > details > summary:not([data-variant]),
-  .sidebar nav li > :is(a, button)[data-variant=default],
-  .sidebar nav li > details > summary[data-variant=default] {
+  .sidebar > nav li > :is(a, button):not([data-variant]),
+  .sidebar > nav li > details > summary:not([data-variant]),
+  .sidebar > nav li > :is(a, button)[data-variant=default],
+  .sidebar > nav li > details > summary[data-variant=default] {
     @apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
   }
 
-  .sidebar nav li > :is(a, button)[data-variant=outline],
-  .sidebar nav li > details > summary[data-variant=outline] {
+  .sidebar > nav li > :is(a, button)[data-variant=outline],
+  .sidebar > nav li > details > summary[data-variant=outline] {
     @apply bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
   }
 
-  .sidebar nav li > :is(a, button):not([data-size]),
-  .sidebar nav li > details > summary:not([data-size]),
-  .sidebar nav li > :is(a, button)[data-size=default],
-  .sidebar nav li > details > summary[data-size=default] {
+  .sidebar > nav li > :is(a, button):not([data-size]),
+  .sidebar > nav li > details > summary:not([data-size]),
+  .sidebar > nav li > :is(a, button)[data-size=default],
+  .sidebar > nav li > details > summary[data-size=default] {
     @apply h-8 text-sm;
   }
 
-  .sidebar nav li > :is(a, button)[data-size=sm],
-  .sidebar nav li > details > summary[data-size=sm] {
+  .sidebar > nav li > :is(a, button)[data-size=sm],
+  .sidebar > nav li > details > summary[data-size=sm] {
     @apply h-7 text-xs;
   }
 
-  .sidebar nav li > :is(a, button)[data-size=lg],
-  .sidebar nav li > details > summary[data-size=lg] {
+  .sidebar > nav li > :is(a, button)[data-size=lg],
+  .sidebar > nav li > details > summary[data-size=lg] {
     @apply h-12 px-3 text-sm;
   }
 
-  .sidebar nav li > details > summary::after {
+  .sidebar > nav li > details > summary::after {
     @apply size-4;
   }
 
-  .sidebar nav li > details::details-content {
+  .sidebar > nav li > details::details-content {
     @apply px-3.5;
   }
 
-  .sidebar nav ul ul {
+  .sidebar > nav ul ul {
     @apply border-sidebar-border translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
   }
 
-  .sidebar nav ul ul > li > :is(a, button),
-  .sidebar nav ul ul > li > details > summary {
+  .sidebar > nav ul ul > li > :is(a, button),
+  .sidebar > nav ul ul > li > details > summary {
     @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-xl px-3 text-sm focus-visible:ring-3 [&>svg]:size-4;
   }
   /* Progress */
@@ -1324,11 +1341,19 @@
 
   /* Tooltip */
   [data-tooltip]::before {
-    @apply bg-foreground text-background inline-flex items-center gap-1.5 rounded-xl px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-lg;
+    @apply bg-foreground text-background rounded-xl px-3 py-1.5 text-xs;
   }
 
   [data-tooltip][data-arrow]::after {
-    @apply bg-foreground absolute z-[60] size-2.5 rotate-45 rounded-[2px] data-[side=left]:translate-x-[-1.5px] data-[side=right]:translate-x-[1.5px];
+    @apply bg-foreground absolute z-[60] size-2.5 rotate-45 rounded-[2px];
+  }
+
+  [data-tooltip][data-arrow][data-side='left']::after {
+    @apply translate-x-[-1.5px];
+  }
+
+  [data-tooltip][data-arrow][data-side='right']::after {
+    @apply translate-x-[1.5px];
   }
 
   /* Toast */
@@ -1362,15 +1387,54 @@
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-webkit-slider-thumb {
-    @apply ring-black/10 not-dark:bg-clip-padding ring-1 size-4 rounded-2xl bg-white shadow-md transition-[color,box-shadow] duration-200 hover:ring-4 hover:ring-ring/30 focus-visible:ring-4 focus-visible:ring-ring/30 -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)] focus-visible:outline-hidden;
+    @apply ring-black/10 ring-1 size-4 rounded-2xl bg-white shadow-md transition-[color,box-shadow] duration-200 -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)];
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-moz-range-thumb {
-    @apply ring-black/10 not-dark:bg-clip-padding ring-1 size-4 rounded-2xl bg-white shadow-md transition-[color,box-shadow] duration-200 hover:ring-4 hover:ring-ring/30 focus-visible:ring-4 focus-visible:ring-ring/30 focus-visible:outline-hidden;
+    @apply ring-black/10 ring-1 size-4 rounded-2xl bg-white shadow-md transition-[color,box-shadow] duration-200;
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-ms-thumb {
-    @apply ring-black/10 not-dark:bg-clip-padding ring-1 size-4 rounded-2xl bg-white shadow-md transition-[color,box-shadow] duration-200 hover:ring-4 hover:ring-ring/30 focus-visible:ring-4 focus-visible:ring-ring/30 focus-visible:outline-hidden;
+    @apply ring-black/10 ring-1 size-4 rounded-2xl bg-white shadow-md transition-[color,box-shadow] duration-200;
+  }
+
+  /* States go before the thumb pseudo-element so they still apply with native CSS nesting. */
+  html:not(.dark) :is(.field > input[type='range'], .input[type='range'])::-webkit-slider-thumb {
+    @apply bg-clip-padding;
+  }
+
+  html:not(.dark) :is(.field > input[type='range'], .input[type='range'])::-moz-range-thumb {
+    @apply bg-clip-padding;
+  }
+
+  html:not(.dark) :is(.field > input[type='range'], .input[type='range'])::-ms-thumb {
+    @apply bg-clip-padding;
+  }
+
+  @media (hover: hover) {
+    :is(.field > input[type='range'], .input[type='range']):hover::-webkit-slider-thumb {
+      @apply ring-4 ring-ring/30;
+    }
+
+    :is(.field > input[type='range'], .input[type='range']):hover::-moz-range-thumb {
+      @apply ring-4 ring-ring/30;
+    }
+
+    :is(.field > input[type='range'], .input[type='range']):hover::-ms-thumb {
+      @apply ring-4 ring-ring/30;
+    }
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-webkit-slider-thumb {
+    @apply ring-4 ring-ring/30 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-moz-range-thumb {
+    @apply ring-4 ring-ring/30 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-ms-thumb {
+    @apply ring-4 ring-ring/30 outline-hidden;
   }
 
 }

src/css/styles/sera.css

@@ -221,7 +221,7 @@
   /* Native Select */
   .field > select,
   select.select {
-    @apply border-transparent border-b-input bg-transparent placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground focus-visible:border-b-ring aria-invalid:border-b-destructive dark:aria-invalid:border-b-destructive/50 h-10 w-fit rounded-none border py-2 ps-0 pe-8 text-sm transition-[color,border-color] data-[size=sm]:h-9;
+    @apply border-transparent border-b-input bg-transparent placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground focus-visible:border-b-ring aria-invalid:border-b-destructive dark:aria-invalid:border-b-destructive/50 h-10 w-fit rounded-none border py-2 ps-0 pe-8 text-base md:text-sm transition-[color,border-color] data-[size=sm]:h-9;
     @apply bg-[image:var(--chevron-down-icon-50)] bg-no-repeat bg-position-[center_right_0] bg-size-[0.875rem];
   }
 
@@ -377,7 +377,7 @@
   }
 
   .command > header input {
-    @apply h-9 ps-1.5 pe-2 text-sm placeholder:text-muted-foreground;
+    @apply h-9 ps-1.5 pe-2 text-base md:text-sm placeholder:text-muted-foreground;
   }
 
   .command [role='menu'] {
@@ -419,7 +419,7 @@
 
   /* Combobox */
   .combobox > input[role='combobox'] {
-    @apply border-transparent border-b-input bg-transparent focus-visible:border-b-ring aria-invalid:border-b-destructive dark:aria-invalid:border-b-destructive/50 h-10 rounded-none border py-2 ps-0 pe-8 text-sm transition-[color,border-color];
+    @apply border-transparent border-b-input bg-transparent focus-visible:border-b-ring aria-invalid:border-b-destructive dark:aria-invalid:border-b-destructive/50 h-10 rounded-none border py-2 ps-0 pe-8 text-base md:text-sm transition-[color,border-color];
   }
 
   .combobox > svg,
@@ -468,6 +468,10 @@
     @apply border-transparent border-b-input bg-transparent focus-within:border-b-ring has-[[aria-invalid=true]]:border-b-destructive dark:has-[[aria-invalid=true]]:border-b-destructive/50 min-h-10 gap-1.5 rounded-none border bg-clip-padding px-0 py-1.5 text-sm transition-[color,border-color];
   }
 
+  .combobox-chips > input[role='combobox'] {
+    @apply text-base md:text-sm;
+  }
+
   .combobox-chip {
     @apply bg-muted text-foreground h-5.5 gap-1 rounded-none px-2 text-xs font-medium has-[>.combobox-chip-remove]:pe-0;
   }
@@ -544,6 +548,11 @@
     @apply bg-popover text-popover-foreground ring-foreground/10 max-w-xs gap-6 rounded-none p-6 shadow-md ring-1 duration-100 sm:max-w-md;
   }
 
+  .alert-dialog:is([data-size='sm']) > *,
+  .alert-dialog > [data-size='sm'] {
+    @apply sm:max-w-xs;
+  }
+
   .dialog > * {
     @apply bg-popover text-popover-foreground ring-foreground/10 max-w-[calc(100%-2rem)] gap-6 rounded-none p-6 text-sm shadow-md ring-1 duration-100 sm:max-w-md;
   }
@@ -965,7 +974,7 @@
     @apply opacity-50;
   }
   .input-group > :is(input, select, [data-control]) {
-    @apply px-0 py-1 text-sm;
+    @apply px-0 py-1 text-base md:text-sm;
   }
 
   .input-group:not([data-orientation='vertical']):has(> :is([data-align='start'], [data-align='inline-start'])) > :is(input, select, [data-control]) {
@@ -977,7 +986,7 @@
   }
 
   .input-group > textarea {
-    @apply px-0 py-2.5 text-sm;
+    @apply px-0 py-2.5 text-base md:text-sm;
   }
 
   .input-group > :is(span, [role='group'], header, footer),
@@ -1198,92 +1207,92 @@
   }
 
   /* Sidebar */
-  .sidebar nav {
+  .sidebar > nav {
     @apply bg-sidebar text-sidebar-foreground;
   }
 
-  .sidebar nav > header,
-  .sidebar nav > footer {
+  .sidebar > nav > header,
+  .sidebar > nav > footer {
     @apply gap-2 p-2 [--radius:0];
   }
 
-  .sidebar nav > section {
+  .sidebar > nav > section {
     @apply gap-2 [--radius:0];
   }
 
-  .sidebar nav [role=separator] {
+  .sidebar > nav [role=separator] {
     @apply border-sidebar-border mx-2;
   }
 
-  .sidebar nav > section > [role=group] {
+  .sidebar > nav > section > [role=group] {
     @apply p-2;
   }
 
-  .sidebar nav h3 {
+  .sidebar > nav h3 {
     @apply text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-none px-3 text-xs font-semibold uppercase tracking-wider focus-visible:ring-2 [&>svg]:size-3.5 transition-[margin,opacity] duration-200 ease-linear;
   }
 
-  .sidebar nav > section > [role=group] > ul {
+  .sidebar > nav > section > [role=group] > ul {
     @apply gap-0.5;
   }
 
-  .sidebar nav > section > [role=group] {
+  .sidebar > nav > section > [role=group] {
     @apply text-sm;
   }
 
-  .sidebar nav li > :is(a, button),
-  .sidebar nav li > details > summary {
+  .sidebar > nav li > :is(a, button),
+  .sidebar > nav li > details > summary {
     @apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground gap-2 rounded-none px-3 py-2 text-sm focus-visible:ring-2 text-left focus-visible:outline-hidden data-[open]:hover:bg-sidebar-accent data-[open]:hover:text-sidebar-accent-foreground [&>svg]:shrink-0 [&>svg]:size-3.5;
   }
 
-  .sidebar nav li > :is(a, button):is([aria-current=page], [data-active=true]),
-  .sidebar nav li > details > summary:is([aria-current=page], [data-active=true]) {
+  .sidebar > nav li > :is(a, button):is([aria-current=page], [data-active=true]),
+  .sidebar > nav li > details > summary:is([aria-current=page], [data-active=true]) {
     @apply bg-sidebar-accent text-sidebar-accent-foreground font-medium;
   }
 
-  .sidebar nav li > :is(a, button):not([data-variant]),
-  .sidebar nav li > details > summary:not([data-variant]),
-  .sidebar nav li > :is(a, button)[data-variant=default],
-  .sidebar nav li > details > summary[data-variant=default] {
+  .sidebar > nav li > :is(a, button):not([data-variant]),
+  .sidebar > nav li > details > summary:not([data-variant]),
+  .sidebar > nav li > :is(a, button)[data-variant=default],
+  .sidebar > nav li > details > summary[data-variant=default] {
     @apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
   }
 
-  .sidebar nav li > :is(a, button)[data-variant=outline],
-  .sidebar nav li > details > summary[data-variant=outline] {
+  .sidebar > nav li > :is(a, button)[data-variant=outline],
+  .sidebar > nav li > details > summary[data-variant=outline] {
     @apply bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
   }
 
-  .sidebar nav li > :is(a, button):not([data-size]),
-  .sidebar nav li > details > summary:not([data-size]),
-  .sidebar nav li > :is(a, button)[data-size=default],
-  .sidebar nav li > details > summary[data-size=default] {
+  .sidebar > nav li > :is(a, button):not([data-size]),
+  .sidebar > nav li > details > summary:not([data-size]),
+  .sidebar > nav li > :is(a, button)[data-size=default],
+  .sidebar > nav li > details > summary[data-size=default] {
     @apply h-9 text-sm;
   }
 
-  .sidebar nav li > :is(a, button)[data-size=sm],
-  .sidebar nav li > details > summary[data-size=sm] {
+  .sidebar > nav li > :is(a, button)[data-size=sm],
+  .sidebar > nav li > details > summary[data-size=sm] {
     @apply h-8 text-xs;
   }
 
-  .sidebar nav li > :is(a, button)[data-size=lg],
-  .sidebar nav li > details > summary[data-size=lg] {
+  .sidebar > nav li > :is(a, button)[data-size=lg],
+  .sidebar > nav li > details > summary[data-size=lg] {
     @apply h-14 px-3 text-sm;
   }
 
-  .sidebar nav li > details > summary::after {
+  .sidebar > nav li > details > summary::after {
     @apply size-3.5;
   }
 
-  .sidebar nav li > details::details-content {
+  .sidebar > nav li > details::details-content {
     @apply px-3.5;
   }
 
-  .sidebar nav ul ul {
+  .sidebar > nav ul ul {
     @apply border-sidebar-border translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
   }
 
-  .sidebar nav ul ul > li > :is(a, button),
-  .sidebar nav ul ul > li > details > summary {
+  .sidebar > nav ul ul > li > :is(a, button),
+  .sidebar > nav ul ul > li > details > summary {
     @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-none px-3 text-sm focus-visible:ring-2 [&>svg]:size-3.5;
   }
   /* Progress */
@@ -1340,7 +1349,7 @@
 
   /* Tooltip */
   [data-tooltip]::before {
-    @apply bg-foreground text-background inline-flex items-center gap-1.5 rounded-none px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-none;
+    @apply bg-foreground text-background rounded-none px-3 py-1.5 text-xs;
   }
 
   [data-tooltip][data-arrow]::after {
@@ -1378,15 +1387,42 @@
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-webkit-slider-thumb {
-    @apply size-3 border-none bg-primary transition-colors hover:ring-2 hover:ring-ring/30 focus-visible:ring-2 focus-visible:ring-ring/30 -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)] focus-visible:outline-hidden;
+    @apply size-3 border-none bg-primary transition-colors -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)];
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-moz-range-thumb {
-    @apply size-3 border-none bg-primary transition-colors hover:ring-2 hover:ring-ring/30 focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-hidden;
+    @apply size-3 border-none bg-primary transition-colors;
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-ms-thumb {
-    @apply size-3 border-none bg-primary transition-colors hover:ring-2 hover:ring-ring/30 focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-hidden;
+    @apply size-3 border-none bg-primary transition-colors;
+  }
+
+  /* States go before the thumb pseudo-element so they still apply with native CSS nesting. */
+  @media (hover: hover) {
+    :is(.field > input[type='range'], .input[type='range']):hover::-webkit-slider-thumb {
+      @apply ring-2 ring-ring/30;
+    }
+
+    :is(.field > input[type='range'], .input[type='range']):hover::-moz-range-thumb {
+      @apply ring-2 ring-ring/30;
+    }
+
+    :is(.field > input[type='range'], .input[type='range']):hover::-ms-thumb {
+      @apply ring-2 ring-ring/30;
+    }
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-webkit-slider-thumb {
+    @apply ring-2 ring-ring/30 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-moz-range-thumb {
+    @apply ring-2 ring-ring/30 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-ms-thumb {
+    @apply ring-2 ring-ring/30 outline-hidden;
   }
 
 }

src/css/styles/vega.css

@@ -205,7 +205,7 @@
   /* Native Select */
   .field > select,
   select.select {
-    @apply border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-fit rounded-md border bg-transparent py-1 ps-2.5 pe-8 text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-8;
+    @apply border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-fit rounded-md border bg-transparent py-1 ps-2.5 pe-8 text-base md:text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-8;
     @apply bg-[image:var(--chevron-down-icon-50)] bg-no-repeat bg-position-[center_right_0.625rem] bg-size-[1rem];
   }
 
@@ -361,7 +361,7 @@
   }
 
   .command > header input {
-    @apply ps-1.5 text-sm placeholder:text-muted-foreground;
+    @apply ps-1.5 text-base md:text-sm placeholder:text-muted-foreground;
   }
 
   .command [role='menu'] {
@@ -403,7 +403,7 @@
 
   /* Combobox */
   .combobox > input[role='combobox'] {
-    @apply border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-md border bg-transparent py-2 ps-2.5 pe-8 text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3;
+    @apply border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-md border bg-transparent py-2 ps-2.5 pe-8 text-base md:text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3;
   }
 
   .combobox > svg,
@@ -452,6 +452,10 @@
     @apply dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-[[aria-invalid=true]]:ring-destructive/20 dark:has-[[aria-invalid=true]]:ring-destructive/40 has-[[aria-invalid=true]]:border-destructive dark:has-[[aria-invalid=true]]:border-destructive/50 min-h-9 gap-1.5 rounded-md border bg-transparent bg-clip-padding px-1.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-3 has-[[aria-invalid=true]]:ring-3;
   }
 
+  .combobox-chips > input[role='combobox'] {
+    @apply text-base md:text-sm;
+  }
+
   .combobox-chip {
     @apply bg-muted text-foreground h-5.5 gap-1 rounded-sm px-1.5 text-xs font-medium has-[>.combobox-chip-remove]:pe-0;
   }
@@ -528,6 +532,11 @@
     @apply bg-popover text-popover-foreground ring-foreground/10 max-w-xs gap-6 rounded-xl p-6 ring-1 duration-100 sm:max-w-lg;
   }
 
+  .alert-dialog:is([data-size='sm']) > *,
+  .alert-dialog > [data-size='sm'] {
+    @apply sm:max-w-xs;
+  }
+
   .dialog > * {
     @apply bg-popover text-popover-foreground ring-foreground/10 max-w-[calc(100%-2rem)] gap-6 rounded-xl p-6 text-sm ring-1 duration-100 sm:max-w-md;
   }
@@ -945,7 +954,7 @@
     @apply opacity-50;
   }
   .input-group > :is(input, select, [data-control]) {
-    @apply px-2.5 py-1 text-sm;
+    @apply px-2.5 py-1 text-base md:text-sm;
   }
 
   .input-group:not([data-orientation='vertical']):has(> :is([data-align='start'], [data-align='inline-start'])) > :is(input, select, [data-control]) {
@@ -957,7 +966,7 @@
   }
 
   .input-group > textarea {
-    @apply px-2.5 py-2 text-sm;
+    @apply px-2.5 py-2 text-base md:text-sm;
   }
 
   .input-group > :is(span, [role='group'], header, footer),
@@ -1187,92 +1196,92 @@
   }
 
   /* Sidebar */
-  .sidebar nav {
+  .sidebar > nav {
     @apply bg-sidebar text-sidebar-foreground;
   }
 
-  .sidebar nav > header,
-  .sidebar nav > footer {
+  .sidebar > nav > header,
+  .sidebar > nav > footer {
     @apply gap-2 p-2;
   }
 
-  .sidebar nav > section {
+  .sidebar > nav > section {
     @apply gap-2;
   }
 
-  .sidebar nav [role=separator] {
+  .sidebar > nav [role=separator] {
     @apply border-sidebar-border mx-2;
   }
 
-  .sidebar nav > section > [role=group] {
+  .sidebar > nav > section > [role=group] {
     @apply p-2;
   }
 
-  .sidebar nav h3 {
+  .sidebar > nav h3 {
     @apply text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium focus-visible:ring-2 [&>svg]:size-4 transition-[margin,opacity] duration-200 ease-linear;
   }
 
-  .sidebar nav > section > [role=group] > ul {
+  .sidebar > nav > section > [role=group] > ul {
     @apply gap-1;
   }
 
-  .sidebar nav > section > [role=group] {
+  .sidebar > nav > section > [role=group] {
     @apply text-sm;
   }
 
-  .sidebar nav li > :is(a, button),
-  .sidebar nav li > details > summary {
+  .sidebar > nav li > :is(a, button),
+  .sidebar > nav li > details > summary {
     @apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-sm focus-visible:ring-2 text-left focus-visible:outline-hidden data-[open]:hover:bg-sidebar-accent data-[open]:hover:text-sidebar-accent-foreground [&>svg]:shrink-0 [&>svg]:size-4;
   }
 
-  .sidebar nav li > :is(a, button):is([aria-current=page], [data-active=true]),
-  .sidebar nav li > details > summary:is([aria-current=page], [data-active=true]) {
+  .sidebar > nav li > :is(a, button):is([aria-current=page], [data-active=true]),
+  .sidebar > nav li > details > summary:is([aria-current=page], [data-active=true]) {
     @apply bg-sidebar-accent text-sidebar-accent-foreground font-medium;
   }
 
-  .sidebar nav li > :is(a, button):not([data-variant]),
-  .sidebar nav li > details > summary:not([data-variant]),
-  .sidebar nav li > :is(a, button)[data-variant=default],
-  .sidebar nav li > details > summary[data-variant=default] {
+  .sidebar > nav li > :is(a, button):not([data-variant]),
+  .sidebar > nav li > details > summary:not([data-variant]),
+  .sidebar > nav li > :is(a, button)[data-variant=default],
+  .sidebar > nav li > details > summary[data-variant=default] {
     @apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
   }
 
-  .sidebar nav li > :is(a, button)[data-variant=outline],
-  .sidebar nav li > details > summary[data-variant=outline] {
+  .sidebar > nav li > :is(a, button)[data-variant=outline],
+  .sidebar > nav li > details > summary[data-variant=outline] {
     @apply bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
   }
 
-  .sidebar nav li > :is(a, button):not([data-size]),
-  .sidebar nav li > details > summary:not([data-size]),
-  .sidebar nav li > :is(a, button)[data-size=default],
-  .sidebar nav li > details > summary[data-size=default] {
+  .sidebar > nav li > :is(a, button):not([data-size]),
+  .sidebar > nav li > details > summary:not([data-size]),
+  .sidebar > nav li > :is(a, button)[data-size=default],
+  .sidebar > nav li > details > summary[data-size=default] {
     @apply h-8 text-sm;
   }
 
-  .sidebar nav li > :is(a, button)[data-size=sm],
-  .sidebar nav li > details > summary[data-size=sm] {
+  .sidebar > nav li > :is(a, button)[data-size=sm],
+  .sidebar > nav li > details > summary[data-size=sm] {
     @apply h-7 text-xs;
   }
 
-  .sidebar nav li > :is(a, button)[data-size=lg],
-  .sidebar nav li > details > summary[data-size=lg] {
+  .sidebar > nav li > :is(a, button)[data-size=lg],
+  .sidebar > nav li > details > summary[data-size=lg] {
     @apply h-12 text-sm;
   }
 
-  .sidebar nav li > details > summary::after {
+  .sidebar > nav li > details > summary::after {
     @apply size-4;
   }
 
-  .sidebar nav li > details::details-content {
+  .sidebar > nav li > details::details-content {
     @apply px-3.5;
   }
 
-  .sidebar nav ul ul {
+  .sidebar > nav ul ul {
     @apply border-sidebar-border translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
   }
 
-  .sidebar nav ul ul > li > :is(a, button),
-  .sidebar nav ul ul > li > details > summary {
+  .sidebar > nav ul ul > li > :is(a, button),
+  .sidebar > nav ul ul > li > details > summary {
     @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 text-sm focus-visible:ring-2 [&>svg]:size-4;
   }
   /* Progress */
@@ -1329,7 +1338,7 @@
 
   /* Tooltip */
   [data-tooltip]::before {
-    @apply bg-foreground text-background inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-sm;
+    @apply bg-foreground text-background rounded-md px-3 py-1.5 text-xs;
   }
 
   [data-tooltip][data-arrow]::after {
@@ -1367,15 +1376,42 @@
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-webkit-slider-thumb {
-    @apply border-primary ring-ring/50 size-4 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)] focus-visible:outline-hidden;
+    @apply border-primary ring-ring/50 size-4 rounded-full border bg-white shadow-sm transition-[color,box-shadow] -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)];
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-moz-range-thumb {
-    @apply border-primary ring-ring/50 size-4 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden;
+    @apply border-primary ring-ring/50 size-4 rounded-full border bg-white shadow-sm transition-[color,box-shadow];
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-ms-thumb {
-    @apply border-primary ring-ring/50 size-4 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden;
+    @apply border-primary ring-ring/50 size-4 rounded-full border bg-white shadow-sm transition-[color,box-shadow];
+  }
+
+  /* States go before the thumb pseudo-element so they still apply with native CSS nesting. */
+  @media (hover: hover) {
+    :is(.field > input[type='range'], .input[type='range']):hover::-webkit-slider-thumb {
+      @apply ring-4;
+    }
+
+    :is(.field > input[type='range'], .input[type='range']):hover::-moz-range-thumb {
+      @apply ring-4;
+    }
+
+    :is(.field > input[type='range'], .input[type='range']):hover::-ms-thumb {
+      @apply ring-4;
+    }
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-webkit-slider-thumb {
+    @apply ring-4 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-moz-range-thumb {
+    @apply ring-4 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-ms-thumb {
+    @apply ring-4 outline-hidden;
   }
 
 }

src/js/basecoat.js

@@ -63,9 +63,24 @@
     node.querySelectorAll('[data-basecoat-component]').forEach(destroyComponent);
   };
 
-  const initAllComponents = () => {
+  const uniqueElements = (elements) => Array.from(new Set(elements));
+
+  const getComponentElements = (componentName, selector, force = false) => {
+    const elements = Array.from(document.querySelectorAll(selector));
+    if (force) {
+      elements.push(...document.querySelectorAll(`[data-basecoat-component="${componentName}"]`));
+    }
+    return uniqueElements(elements);
+  };
+
+  const initAllComponents = (options = {}) => {
+    const force = options.force === true;
     Object.entries(componentRegistry).forEach(([name, { selector }]) => {
-      document.querySelectorAll(selector).forEach(element => initComponent(element, name));
+      getComponentElements(name, selector, force).forEach((element) => {
+        const wasComponent = element.dataset?.basecoatComponent === name;
+        if (force) destroyComponent(element);
+        if (wasComponent || element.matches(selector)) initComponent(element, name);
+      });
     });
   };
 
@@ -111,18 +126,23 @@
     observer = null;
   };
 
-  const initRegisteredComponent = (componentName) => {
+  const initRegisteredComponent = (componentName, options = {}) => {
     const component = componentRegistry[componentName];
     if (!component) {
       console.warn(`Component '${componentName}' not found in registry`);
       return;
     }
 
-    document.querySelectorAll(component.selector).forEach(element => initComponent(element, componentName));
+    const force = options.force === true;
+    getComponentElements(componentName, component.selector, force).forEach((element) => {
+      const wasComponent = element.dataset?.basecoatComponent === componentName;
+      if (force) destroyComponent(element);
+      if (wasComponent || element.matches(component.selector)) initComponent(element, componentName);
+    });
   };
 
-  const initAllRegisteredComponents = () => {
-    initAllComponents();
+  const initAllRegisteredComponents = (options = {}) => {
+    initAllComponents(options);
   };
 
   const setTheme = (mode) => {

src/js/combobox.js

@@ -390,7 +390,11 @@
     }
 
     if (event.key === 'Escape') {
-      root.close(true);
+      if (isOpen) {
+        event.preventDefault();
+        event.stopPropagation();
+        root.close(true);
+      }
       return;
     }
 
@@ -503,7 +507,7 @@
       if (!root.contains(event.target)) root.close(false);
     };
     const handleDocumentPopover = (event) => {
-      if (event.detail.source !== root) root.close(false);
+      if (!root.contains(event.detail.source)) root.close(false);
     };
 
     state.input.addEventListener('focus', handleInputFocus);

src/js/dropdown-menu.js

@@ -165,7 +165,7 @@
     };
 
     const handleDocumentPopover = (event) => {
-      if (event.detail.source !== root) root.close(false);
+      if (!root.contains(event.detail.source)) root.close(false);
     };
 
     state.trigger.addEventListener('click', handleTriggerClick);

src/js/popover.js

@@ -60,7 +60,7 @@
     };
 
     const handleDocumentPopover = (event) => {
-      if (event.detail.source !== popoverComponent) {
+      if (!popoverComponent.contains(event.detail.source)) {
         closePopover(false);
       }
     };

src/js/select.js

@@ -373,7 +373,7 @@
       if (!root.contains(event.target)) root.close(false);
     };
     const handleDocumentPopover = (event) => {
-      if (event.detail.source !== root) root.close(false);
+      if (!root.contains(event.detail.source)) root.close(false);
     };
 
     state.trigger.addEventListener('keydown', handleTriggerKeydown);

src/js/sidebar.js

@@ -1,6 +1,6 @@
 (() => {
   const initSidebar = (sidebarComponent) => {
-    if (sidebarComponent.dataset.sidebarInitialized) return;
+    if (sidebarComponent.dataset.sidebarInitialized && typeof sidebarComponent.toggle === 'function') return;
 
     const initialOpen = sidebarComponent.dataset.initialOpen !== 'false';
     const initialMobileOpen = sidebarComponent.dataset.initialMobileOpen === 'true';
@@ -30,7 +30,7 @@
 
     const handleClick = (event) => {
       const target = event.target;
-      const nav = sidebarComponent.querySelector('nav');
+      const nav = sidebarComponent.querySelector(':scope > nav');
       const isMobile = window.innerWidth < breakpoint;
 
       if (isMobile && target.closest('a, button') && !target.closest('[data-keep-mobile-sidebar-open]')) {
@@ -60,6 +60,6 @@
   };
 
   if (window.basecoat) {
-    window.basecoat.register('sidebar', '.sidebar:not([data-sidebar-initialized])', initSidebar);
+    window.basecoat.register('sidebar', '.sidebar', initSidebar);
   }
 })();

src/js/toast.js

@@ -131,6 +131,13 @@
     element.addEventListener('transitionend', () => element.remove(), { once: true });
   }
 
+  const escapeHtml = (value) => String(value)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+
   function createToast(config) {
     const {
       category = 'info',
@@ -140,18 +147,22 @@
       cancel,
       duration,
       icon,
+      html: allowHtml = false,
     } = config;
 
+    // Text is escaped unless `html: true`. `icon` is always raw markup (SVG).
+    const text = (value) => (allowHtml ? String(value) : escapeHtml(value));
+
     const iconHtml = icon || (category && ICONS[category]) || '';
-    const titleHtml = title ? `<h2>${title}</h2>` : '';
-    const descriptionHtml = description ? `<p>${description}</p>` : '';
+    const titleHtml = title ? `<h2>${text(title)}</h2>` : '';
+    const descriptionHtml = description ? `<p>${text(description)}</p>` : '';
     const actionHtml = action?.href
-      ? `<a href="${action.href}" class="btn" data-toast-action>${action.label}</a>`
+      ? `<a href="${escapeHtml(action.href)}" class="btn" data-toast-action>${text(action.label)}</a>`
       : action?.onclick
-        ? `<button type="button" class="btn" data-toast-action onclick="${action.onclick}">${action.label}</button>`
+        ? `<button type="button" class="btn" data-toast-action onclick="${escapeHtml(action.onclick)}">${text(action.label)}</button>`
         : '';
     const cancelHtml = cancel
-      ? `<button type="button" class="btn h-6 text-xs px-2.5 rounded-sm" data-variant="outline" data-toast-cancel onclick="${cancel?.onclick || ''}">${cancel.label}</button>`
+      ? `<button type="button" class="btn h-6 text-xs px-2.5 rounded-sm" data-variant="outline" data-toast-cancel onclick="${escapeHtml(cancel?.onclick || '')}">${text(cancel.label)}</button>`
       : '';
 
     const footerHtml = actionHtml || cancelHtml ? `<footer>${actionHtml}${cancelHtml}</footer>` : '';
@@ -161,8 +172,8 @@
         class="toast"
         role="${category === 'error' ? 'alert' : 'status'}"
         aria-atomic="true"
-        ${category ? `data-category="${category}"` : ''}
-        ${duration !== undefined ? `data-duration="${duration}"` : ''}
+        ${category ? `data-category="${escapeHtml(category)}"` : ''}
+        ${duration !== undefined ? `data-duration="${escapeHtml(duration)}"` : ''}
       >
         <div class="toast-content">
           ${iconHtml}

src/templates/jinja/command.html.jinja

@@ -98,7 +98,7 @@
   class="command-dialog {{ dialog_attrs.class | default('') }}"
   aria-label="Command menu"
   {% if open %}open{% endif %}
-  onclick="if (event.target === this) this.close()"
+  onpointerdown="this.dataset.backdropPress = event.target === this" onclick="if (event.target === this && this.dataset.backdropPress === 'true') this.close()"
   {% for key, value in dialog_attrs.items() %}
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}

src/templates/jinja/dialog.html.jinja

@@ -53,7 +53,7 @@
   {% if title %}aria-labelledby="{{ id }}-title"{% endif %}
   {% if description %}aria-describedby="{{ id }}-description"{% endif %}
   {% if open %}open{% endif %}
-  {% if close_on_overlay_click %}onclick="if (event.target === this) this.close()"{% endif %}
+  {% if close_on_overlay_click %}onpointerdown="this.dataset.backdropPress = event.target === this" onclick="if (event.target === this && this.dataset.backdropPress === 'true') this.close()"{% endif %}
   {% for key, value in dialog_attrs.items() %}
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}

src/templates/nunjucks/command.njk

@@ -92,7 +92,7 @@
   class="command-dialog {{ dialog_attrs.class }}"
   aria-label="Command menu"
   {% if open %}open{% endif %}
-  onclick="if (event.target === this) this.close()"
+  onpointerdown="this.dataset.backdropPress = event.target === this" onclick="if (event.target === this && this.dataset.backdropPress === 'true') this.close()"
   {% for key, value in dialog_attrs %}
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}

src/templates/nunjucks/dialog.njk

@@ -48,7 +48,7 @@
   {% if title %}aria-labelledby="{{ id }}-title"{% endif %}
   {% if description %}aria-describedby="{{ id }}-description"{% endif %}
   {% if open %}open{% endif %}
-  {% if close_on_overlay_click %}onclick="if (event.target === this) this.close()"{% endif %}
+  {% if close_on_overlay_click %}onpointerdown="this.dataset.backdropPress = event.target === this" onclick="if (event.target === this && this.dataset.backdropPress === 'true') this.close()"{% endif %}
   {% for key, value in dialog_attrs %}
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}