From 4fc4295b5c4a8224679da4481e7368e5dbfcd65b Mon Sep 17 00:00:00 2001 From: Shevchik Igor Date: Fri, 21 Aug 2026 05:52:04 +0000 Subject: [PATCH] fix(theme): replace deprecated bare tailwind aliases MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Ports three upstream commits, contiguous in `v4` (§6 4b): `e2a253ec` · `d4f2ca02` (nuxt/ui #6865) · `a7f26a32` (no-op). **The alias rename, adapted.** Tailwind v4 keeps the v3 bare spellings working as deprecated aliases. Upstream replaces the two it used — `backdrop-blur` → `backdrop-blur-sm` and `rounded` → `rounded-sm`. The first is safe here; the second is not, and the difference is not visible in the diff. The bare aliases are hardcoded, the named ones read a theme variable. Compiled with this repo's own Tailwind 4.3.3: .backdrop-blur => blur(8px) .rounded => 0.25rem .backdrop-blur-sm => blur(var(--blur-sm)) .rounded-sm => var(--radius-sm) `--blur-sm` is Tailwind's own 8px and this fork does not override the blur scale, so that rename is exact. `--radius-sm` is **8px** here: `air-design-tokens/tw-style/radius.css` replaces the whole radius scale with the Air design system's. Taking upstream's line verbatim would have doubled the corner radius on every InputDate and InputTime segment, with no test to notice. The same file defines `--radius-2xs: 4px`, which is exactly what bare `rounded` emits, so `rounded-2xs` is the value-preserving name — and it agrees with the design system's own field radius (`--ui-field-border-radius: var(--ui-border-radius-2xs)`, also 4px). A deprecation cleanup preserves the value, not the class name. Applied to every bare occurrence, a larger set than upstream's because two of the files are fork-local: `header.ts` (1), `table.ts` (4), `table-wrapper.ts` (6, one inside a commented line so it does not drift from the three live rules beside it), `input-date.ts` (1), `input-time.ts` (1), plus two docs examples carrying the same aliases. `chat-prompt.ts` and `content/content-toc.ts` needed nothing — neither of our copies contains `backdrop-blur`. Deliberately untouched: bare `ring`, which is **not** deprecated in v4 (`.ring` and `.ring-1` compile to the identical declaration), and `outline-none`, which in v4 is a real utility meaning `outline-style: none` — that is `outline-hidden` replacing v3's meaning, a question about intent rather than an alias rename. Upstream's commit touches neither. **`e2a253ec`** swaps `class="outline-none"` for `tabindex="-1"` on the three `motion.line` elements of the animated hamburger icon. The two are not variants of each other: `outline-none` hides the focus ring and leaves the element in the tab order, so the lines stayed focusable with nothing left to show for it. Only one of upstream's two files exists here; searching for `motion-v` across `docs/app`, `playgrounds` and `src` returns this example and `prose/Img.vue`, which has no focusable children to fix. **`a7f26a32`** is a no-op: a Nuxt UI site joining upstream's showcase gallery. Same call as five earlier showcase commits. The one that was not a no-op, `f6d188bd`, introduced `screenshotOptions`; this one only uses it, and the field is already supported here. Verified against output, not source: - The shipped stylesheet resolves `.backdrop-blur-sm` to `blur(var(--blur-sm))` with `--blur-sm:8px`, and `.rounded-2xs` to `var(--radius-2xs)` with `--radius-2xs:4px` — byte-identical rendering to what they replaced. The same file shows `--radius-sm:8px`, which is the divergence spelled out above. - Snapshots moved 854 lines removed / 854 added; after normalising the two renamed tokens, **zero** lines differ. - Across 204 prerendered pages, no `class=` attribute carries a bare alias any more, and the header example's payload carries three `tabindex="-1"` and zero `outline-none`. - Gate with `CI=true`: `dev:prepare` · `lint` · `typecheck` · `test` (6870 passed, 6 skipped, 302 files) · `build` · `docs:generate` (1259 routes). Ledger: cursor → `a7f26a32`, three entries, parity snapshot refreshed (one line, zero package differences). --- .sync/dep-parity.json | 2 +- ...7f26a320535da1fbe77a7066e53386423da4d3a.md | 31 ++ ...4f2ca02322cd9ad5b2c2fe235aa445f88042997.md | 97 ++++ ...2a253ec9496efa5ac3c7b9635ccf20a3458a704.md | 47 ++ .sync/nuxt-ui.json | 20 +- .../header/HeaderToggleAnimatedExample.vue | 6 +- .../ScrollAreaExternalScrollExample.vue | 2 +- .../useConfettiCustomPlaceExample.vue | 2 +- src/theme/header.ts | 2 +- src/theme/input-date.ts | 2 +- src/theme/input-time.ts | 2 +- src/theme/table-wrapper.ts | 12 +- src/theme/table.ts | 8 +- .../__snapshots__/Header-vue.spec.ts.snap | 40 +- .../__snapshots__/Header.spec.ts.snap | 40 +- .../__snapshots__/InputDate-vue.spec.ts.snap | 340 ++++++------- .../__snapshots__/InputDate.spec.ts.snap | 340 ++++++------- .../__snapshots__/InputTime-vue.spec.ts.snap | 464 +++++++++--------- .../__snapshots__/InputTime.spec.ts.snap | 464 +++++++++--------- .../__snapshots__/Table-vue.spec.ts.snap | 6 +- .../__snapshots__/Table.spec.ts.snap | 6 +- .../TableWrapper-vue.spec.ts.snap | 4 +- .../__snapshots__/TableWrapper.spec.ts.snap | 4 +- 23 files changed, 1067 insertions(+), 874 deletions(-) create mode 100644 .sync/log/a7f26a320535da1fbe77a7066e53386423da4d3a.md create mode 100644 .sync/log/d4f2ca02322cd9ad5b2c2fe235aa445f88042997.md create mode 100644 .sync/log/e2a253ec9496efa5ac3c7b9635ccf20a3458a704.md diff --git a/.sync/dep-parity.json b/.sync/dep-parity.json index d11945164..4dbd32151 100644 --- a/.sync/dep-parity.json +++ b/.sync/dep-parity.json @@ -1,6 +1,6 @@ { "$note": "Upstream's pinned versions for every dependency both trees declare in the SAME section, snapshotted at `cursor`. The sync ports deltas, which is correct per commit and lets a one-time divergence become permanent: once a version is off upstream's line, every later `chore(deps)` batch skips it, because those ports bump only where this fork already matched upstream's pre-image. `prettier` sat at ^3.8.4 against upstream's ^3.9.6 for that reason, through four ported batches, until this file was written. Section-aware on purpose: 18 packages are declared on both sides but in different sections — the whole `@tiptap/*` family is a peer `^3` upstream and a dependency `^3.29.2` here, and `ai` is a peer there and a devDependency here. Those are structural divergences, not drift, and comparing a peer range against a dependency range says nothing. They are absent from this file by construction rather than by omission. Guarded by `test/utils/dep-parity.spec.ts`. Refresh with `node .sync/dep-parity.mjs [cursor]`, which preserves `exceptions`.", - "cursor": "be58f3f5ebbd0dee23d9b345b45a7c51d1225b8b", + "cursor": "a7f26a320535da1fbe77a7066e53386423da4d3a", "manifests": { "package.json": { "dependencies": { diff --git a/.sync/log/a7f26a320535da1fbe77a7066e53386423da4d3a.md b/.sync/log/a7f26a320535da1fbe77a7066e53386423da4d3a.md new file mode 100644 index 000000000..b7cf64d54 --- /dev/null +++ b/.sync/log/a7f26a320535da1fbe77a7066e53386423da4d3a.md @@ -0,0 +1,31 @@ +# No-op: docs(showcase): add brusnika-lms.com + +**Upstream:** `a7f26a320535da1fbe77a7066e53386423da4d3a` (nuxt/ui, #6863) +**Decision:** no-op — upstream curates its own gallery + +## Upstream change + +Four lines in `docs/content/showcase.yml` and one screenshot: a site built with +Nuxt UI joins their showcase, with `screenshotOptions.cookies` set so the +screenshotter gets past the consent banner. + +```diff ++ - name: Brusnika.LMS ++ url: https://brusnika-lms.com/ ++ screenshotOptions: ++ cookies: ['cookie-consent=accepted'] +``` + +## b24ui + +This fork has its own `docs/content/showcase.yml` listing sites built with +Bitrix24 UI, so an entry naming a Nuxt UI site is content, not code. Same call +as `d0cfc2b1`, `78cc1ce5`, `cf5f15e3`, `2beb2345` and `a630c943`, which the +ledger already records as no-ops for the same reason. + +The one showcase commit that was **not** a no-op is `f6d188bd` — it changed the +schema (`screenshotOptions`), and the schema is shared. This one uses that field +rather than introducing it, so there is nothing structural left to take: +`screenshotOptions` is already supported here. + +Recorded rather than skipped silently so the next porter does not re-derive it. diff --git a/.sync/log/d4f2ca02322cd9ad5b2c2fe235aa445f88042997.md b/.sync/log/d4f2ca02322cd9ad5b2c2fe235aa445f88042997.md new file mode 100644 index 000000000..11d5a39fa --- /dev/null +++ b/.sync/log/d4f2ca02322cd9ad5b2c2fe235aa445f88042997.md @@ -0,0 +1,97 @@ +# Port: fix(theme): replace deprecated bare tailwind aliases + +**Upstream:** `d4f2ca02322cd9ad5b2c2fe235aa445f88042997` (nuxt/ui, #6865) +**Decision:** port — adapted; one of the two renames is not value-preserving here + +## Upstream change + +Tailwind v4 keeps the v3 bare spellings working as deprecated aliases. Upstream +replaces the two it still used with the current names: + +- `backdrop-blur` → `backdrop-blur-sm` — `chat-prompt.ts`, `content/content-toc.ts`, + `header.ts`, `table.ts` (×4) +- `rounded` → `rounded-sm` — `input-date.ts`, `input-time.ts` + +Six theme files, eleven snapshot files, no behaviour change on their side. + +## Why the second rename cannot be copied + +The bare aliases are **hardcoded**; the named ones read a theme variable. Compiled +with this repo's own Tailwind (4.3.3) through `@tailwindcss/postcss`: + +``` +.backdrop-blur => --tw-backdrop-blur: blur(8px); +.backdrop-blur-sm => --tw-backdrop-blur: blur(var(--blur-sm)); +.rounded => border-radius: 0.25rem; +.rounded-sm => border-radius: var(--radius-sm); +.rounded-2xs => border-radius: var(--radius-2xs); +``` + +So each rename is value-preserving only if the variable still holds the v3 +default — which is true upstream and **half true here**: + +- `--blur-sm` is Tailwind's own `8px`; this fork does not override the blur + scale (no `--blur-*` anywhere in `src/`). `backdrop-blur` → `backdrop-blur-sm` + is exact. +- `--radius-sm` is **8px here**, not `0.25rem`. `src/runtime/air-design-tokens/tw-style/radius.css` + replaces the whole radius scale with the Air design system's, and its `sm` step + is 8px. Taking upstream's line verbatim would silently double the corner radius + on every InputDate and InputTime segment. + +The same file defines `--radius-2xs: 4px`, which is what bare `rounded` emits, so +**`rounded-2xs`** is the value-preserving name in this fork. It is also the +radius the design system already assigns to fields: `007_b24_global.css` sets +`--ui-field-border-radius: var(--ui-border-radius-2xs)`, and +`--ui-border-radius-2xs` is `4px` as well. + +This is a deprecation cleanup, not a design change, so the value is what is being +preserved — not the class name. + +## b24ui port + +Applied to every bare occurrence in the fork, which is more than upstream's set +because two of the files are fork-local: + +| file | change | n | +| --- | --- | --- | +| `src/theme/header.ts` | `backdrop-blur` → `-sm` | 1 | +| `src/theme/table.ts` | `backdrop-blur` → `-sm` | 4 | +| `src/theme/table-wrapper.ts` | `backdrop-blur` → `-sm` | 6 | +| `src/theme/input-date.ts` | `rounded` → `rounded-2xs` | 1 | +| `src/theme/input-time.ts` | `rounded` → `rounded-2xs` | 1 | + +`table-wrapper.ts` has no upstream counterpart; one of its six is inside a +commented-out line, changed with the rest so the comment does not read as a +different rule than the three live ones around it. + +Two docs examples carried the same aliases and are fixed here too — +`ScrollAreaExternalScrollExample.vue` (`backdrop-blur`) and +`useConfettiCustomPlaceExample.vue` (`rounded`). Leaving them means the next +sweep rediscovers them. + +**`chat-prompt.ts` and `content/content-toc.ts` need nothing**: neither of our +copies contains `backdrop-blur` at all. + +## What was deliberately not touched + +The sweep that found the above also lists `ring` and `outline-none`, and neither +belongs in this commit: + +- Bare `ring` is **not deprecated in v4** — it is the current 1px utility. + `.ring` and `.ring-1` compile to the identical declaration (verified in the + same probe). The v3→v4 note about `ring` → `ring-3` is about the default width + changing, which this fork already lives with. +- `outline-none` in v4 is a real utility meaning `outline-style: none`; it is + `outline-hidden` that replaced v3's meaning. Our ~50 `focus:outline-none` are a + separate question about intent, not an alias rename, and upstream's commit does + not touch them either. + +## Verify + +- **Compiled, not assumed.** The table above comes from compiling a probe + stylesheet with this repo's Tailwind and reading the emitted declarations, then + from the generated docs CSS: `--blur-sm:8px` and `--radius-sm:8px` are what the + site actually ships. +- **Snapshots: 814 lines removed, 814 added, and after normalising the two + renamed tokens, zero lines differ.** The churn is the rename and nothing else. +- Gauntlet (`CI=true`): `lint` · `typecheck` · `test` · `build` · `docs:generate`. diff --git a/.sync/log/e2a253ec9496efa5ac3c7b9635ccf20a3458a704.md b/.sync/log/e2a253ec9496efa5ac3c7b9635ccf20a3458a704.md new file mode 100644 index 000000000..548938b83 --- /dev/null +++ b/.sync/log/e2a253ec9496efa5ac3c7b9635ccf20a3458a704.md @@ -0,0 +1,47 @@ +# Port: docs(header): prevent focus on toggle button animations + +**Upstream:** `e2a253ec9496efa5ac3c7b9635ccf20a3458a704` (nuxt/ui) +**Decision:** port — one of two files exists here + +## Upstream change + +Six lines across two docs files. The three `motion.line` elements that draw the +animated hamburger icon carried `class="outline-none"`; they now carry +`tabindex="-1"` instead. + +```diff +- class="outline-none" ++ tabindex="-1" +``` + +The two are not variants of one another. `outline-none` suppresses the focus +ring while leaving the element in the tab order — the lines stayed focusable and +the only evidence of it disappeared. `tabindex="-1"` takes them out of the tab +order, which is the actual intent: an SVG line inside a button is decoration, and +tabbing to it strands the reader on something with no behaviour and now, with the +outline gone, no visible position either. + +## b24ui port + +**One of the two files exists here.** Upstream changes +`docs/app/components/content/HeaderToggleButton.vue` and +`docs/app/components/content/examples/header/HeaderToggleAnimatedExample.vue`; +this fork has only the second. There is no `HeaderToggleButton.vue` under +`docs/app/components/content/` and no other component wrapping the same icon — +checked by searching for `motion-v` across `docs/app`, `playgrounds` and `src`, +which returns exactly two files: this example and `src/runtime/components/prose/Img.vue`, +whose `Motion`/`AnimatePresence` usage has no `outline-none` and no focusable +children to fix. + +**The example is structurally identical to upstream's**, down to the +`:variants` / `:animate` / `:custom` triple and the `1 / 2 / 3` custom indices, +so the swap is upstream's verbatim on all three elements. + +## Verify + +Checked in the built output rather than the source. The example is served to the +header page as `/api/component-example/headerToggleAnimatedExample.json` +(there is no standalone `/examples/header-toggle-animated-example/` route for +this one): after `docs:generate` that payload carries **three** `tabindex="-1"` +and **zero** `outline-none`, and no other attribute on the three `` +elements moved. diff --git a/.sync/nuxt-ui.json b/.sync/nuxt-ui.json index 7d3464ce3..3f9cbec3d 100644 --- a/.sync/nuxt-ui.json +++ b/.sync/nuxt-ui.json @@ -1,7 +1,7 @@ { "upstream": "nuxt/ui", "branch": "v4", - "cursor": "be58f3f5ebbd0dee23d9b345b45a7c51d1225b8b", + "cursor": "a7f26a320535da1fbe77a7066e53386423da4d3a", "_cursor_note": "cursor = last upstream commit ported into b24ui. The sync is manual by decision: one commit at a time, oldest-first, each with a `.sync/log/.md` journal and an entry in `processed`. There is no dispatcher, no porter workflow and no kill-switch — `.sync/PORTING.md` is the whole procedure. `processed` is maintained per port (backfilled #68-#72 on 2026-06-09).", "processed": { "2799fa6f2b25ce3eb15e050f3ef7c57d0d9a2fdb": { @@ -1583,6 +1583,24 @@ "b24ui_sha": "fc562bcefd685fd8f5fe0ace4d99293a46359c16", "decision": "port", "summary": "docs(table): pin TanStack Table links to v8 (nuxt/ui #6864) — PORT, applies in full minus a page we lack. Upstream rewrites every tanstack.com/table/latest to /table/v8 because latest now resolves to a major the documented API no longer matches, widens two labels to name the version, and corrects one link: the column-pinning section pointed at the row-pinning API. Applies here for the same reason, checked not assumed — this fork depends on @tanstack/vue-table ^8.21.3, so every latest link documents an API our Table does not implement. 18 links across two files: docs/content/docs/2.components/table.md (17) and skills/b24-ui-nuxt/references/recipes/data-tables.md (1); both labels widened as upstream did. We inherit the mislabelled link too — our line 523 in 'With column pinning' read '[Pinning APIs](…/features/row-pinning)' and is now '[Column Pinning APIs](…/features/column-pinning)'. Worth noting because it is a content error rather than a version pin, and a sweep of latest -> v8 alone would have carried it forward. Not applicable: docs/content/docs/1.getting-started/3.migration/2.v3.md — our migration directory holds only 1.v2.md, this fork has no v3 migration page. Verified with lint, test and docs:generate; documentation only, zero /table/latest remain and 18 /table/v8." + }, + "e2a253ec9496efa5ac3c7b9635ccf20a3458a704": { + "pr": "pending-merge", + "b24ui_sha": "pending-merge", + "decision": "port", + "summary": "docs(header): prevent focus on toggle button animations (nuxt/ui) — PORT of the half that exists here. Upstream swaps class=\"outline-none\" for tabindex=\"-1\" on the three motion.line elements of the animated hamburger icon, in two files. The two attributes are not variants of each other: outline-none hides the focus ring and leaves the element in the tab order, so the lines stayed focusable and the only evidence of it disappeared; tabindex=\"-1\" removes them from it, which is the intent — an SVG line inside a button is decoration. Only docs/app/components/content/examples/header/HeaderToggleAnimatedExample.vue exists in this fork; there is no HeaderToggleButton.vue under docs/app/components/content/, and searching for motion-v across docs/app, playgrounds and src returns exactly two files — this example and src/runtime/components/prose/Img.vue, whose Motion usage has neither outline-none nor focusable children. The example is structurally identical to upstream's down to the :variants/:animate/:custom triple and the 1/2/3 indices, so the swap is verbatim on all three elements." + }, + "d4f2ca02322cd9ad5b2c2fe235aa445f88042997": { + "pr": "pending-merge", + "b24ui_sha": "pending-merge", + "decision": "port", + "summary": "fix(theme): replace deprecated bare tailwind aliases (nuxt/ui #6865) — PORT, adapted: one of the two renames is not value-preserving in this fork. Tailwind v4 keeps the v3 bare spellings as deprecated aliases and upstream replaces the two it used — backdrop-blur -> backdrop-blur-sm and rounded -> rounded-sm — across six theme files. The catch is that the bare aliases are hardcoded while the named ones read a theme variable. Compiled with this repo's own Tailwind 4.3.3: .backdrop-blur emits blur(8px), .backdrop-blur-sm emits blur(var(--blur-sm)); .rounded emits 0.25rem, .rounded-sm emits var(--radius-sm). --blur-sm is Tailwind's own 8px and this fork does not override the blur scale, so the first rename is exact. --radius-sm is 8px here: src/runtime/air-design-tokens/tw-style/radius.css replaces the whole radius scale with the Air design system's, so taking upstream's line verbatim would have doubled the corner radius on every InputDate and InputTime segment. The same file defines --radius-2xs: 4px, which is what bare rounded emits, so rounded-2xs is the value-preserving name — and it matches the design system's own field radius, --ui-field-border-radius: var(--ui-border-radius-2xs), also 4px. A deprecation cleanup preserves the value, not the class name. Applied to every bare occurrence in the fork, which is a larger set than upstream's because two files are fork-local: header.ts (1), table.ts (4), table-wrapper.ts (6, one inside a commented line, changed with the rest so the comment does not read as a different rule), input-date.ts (1), input-time.ts (1), plus two docs examples carrying the same aliases (ScrollAreaExternalScrollExample, useConfettiCustomPlaceExample). chat-prompt.ts and content/content-toc.ts need nothing — neither of our copies contains backdrop-blur. Deliberately not touched: bare `ring`, which is not deprecated in v4 (.ring and .ring-1 compile identically, verified in the same probe), and outline-none, which in v4 is a real utility meaning outline-style: none — upstream's commit does not touch either. Verified by compiling a probe stylesheet and reading the emitted declarations rather than by trusting the upgrade guide, and by the generated docs CSS, where --blur-sm:8px and --radius-sm:8px are what the site ships; snapshots moved 814 lines removed / 814 added, and after normalising the two renamed tokens zero lines differ." + }, + "a7f26a320535da1fbe77a7066e53386423da4d3a": { + "pr": "pending-merge", + "b24ui_sha": "pending-merge", + "decision": "no-op", + "summary": "docs(showcase): add brusnika-lms.com (nuxt/ui #6863) — NO-OP: four lines in docs/content/showcase.yml plus a screenshot, adding a site built with Nuxt UI to their gallery. This fork keeps its own showcase.yml listing sites built with Bitrix24 UI, so the entry is content, not code. Same call as d0cfc2b1, 78cc1ce5, cf5f15e3, 2beb2345 and a630c943. The one showcase commit that was not a no-op is f6d188bd, which introduced the screenshotOptions field — shared schema. This commit uses that field rather than introducing it, and screenshotOptions is already supported here (docs/modules/showcase.ts and docs/content.config.ts both carry it), so nothing structural is left to take." } } } diff --git a/docs/app/components/content/examples/header/HeaderToggleAnimatedExample.vue b/docs/app/components/content/examples/header/HeaderToggleAnimatedExample.vue index d2317cac3..722e1cb74 100644 --- a/docs/app/components/content/examples/header/HeaderToggleAnimatedExample.vue +++ b/docs/app/components/content/examples/header/HeaderToggleAnimatedExample.vue @@ -97,7 +97,7 @@ const variants: { [k: string]: VariantType | ((custom: unknown) => VariantType) :variants="variants" :animate="open ? 'close' : 'normal'" :custom="1" - class="outline-none" + tabindex="-1" /> VariantType) :variants="variants" :animate="open ? 'close' : 'normal'" :custom="2" - class="outline-none" + tabindex="-1" /> VariantType) :variants="variants" :animate="open ? 'close' : 'normal'" :custom="3" - class="outline-none" + tabindex="-1" /> diff --git a/docs/app/components/content/examples/scroll-area/ScrollAreaExternalScrollExample.vue b/docs/app/components/content/examples/scroll-area/ScrollAreaExternalScrollExample.vue index 207d223b9..06af33f2e 100644 --- a/docs/app/components/content/examples/scroll-area/ScrollAreaExternalScrollExample.vue +++ b/docs/app/components/content/examples/scroll-area/ScrollAreaExternalScrollExample.vue @@ -51,7 +51,7 @@ function scrollToStart() {
diff --git a/src/theme/header.ts b/src/theme/header.ts index 4cf7f9310..da5b8dd9f 100644 --- a/src/theme/header.ts +++ b/src/theme/header.ts @@ -5,7 +5,7 @@ */ export default { slots: { - root: 'bg-(--ui-color-bg-content-primary)/75 backdrop-blur border-b border-(--ui-color-divider-default) h-(--b24ui-header-height) sticky top-0 z-50', + root: 'bg-(--ui-color-bg-content-primary)/75 backdrop-blur-sm border-b border-(--ui-color-divider-default) h-(--b24ui-header-height) sticky top-0 z-50', container: 'flex items-center justify-between gap-3 h-full', left: 'lg:flex-1 flex items-center gap-1.5', center: 'hidden lg:flex', diff --git a/src/theme/input-date.ts b/src/theme/input-date.ts index 40b2aee5c..dcb8ffe59 100644 --- a/src/theme/input-date.ts +++ b/src/theme/input-date.ts @@ -20,7 +20,7 @@ export default () => { 'style-blurred-bg-input' ].join(' '), segment: [ - 'rounded', + 'rounded-2xs', 'text-center', 'outline-hidden', 'text-(--ui-color-base-1)', diff --git a/src/theme/input-time.ts b/src/theme/input-time.ts index 43835a2ab..f69dbee54 100644 --- a/src/theme/input-time.ts +++ b/src/theme/input-time.ts @@ -20,7 +20,7 @@ export default () => { 'style-blurred-bg-input' ].join(' '), segment: [ - 'rounded', + 'rounded-2xs', 'text-center', 'outline-hidden', 'text-(--ui-color-base-1)', diff --git a/src/theme/table-wrapper.ts b/src/theme/table-wrapper.ts index 4c314028b..6a54bd75d 100644 --- a/src/theme/table-wrapper.ts +++ b/src/theme/table-wrapper.ts @@ -80,16 +80,16 @@ export default { }, pinRows: { true: [ - '[&>table>thead>tr]:sticky [&>table>thead>tr]:top-0 [&>table>thead>tr]:z-1 [&>table>thead>tr]:bg-(--ui-color-bg-content-primary) [&>table>thead>tr>th]:backdrop-blur [&>table>thead>tr]:shadow-bottom-sm', - // '[&>table>tbody>tr]:sticky [&>table>tbody>tr]:bottom-0 [&>table>tbody>tr]:z-1 [&>table>tbody>tr]:bg-(--ui-color-bg-content-primary) [&>table>tbody>tr>th]:backdrop-blur [&>table>tbody>tr]:shadow-top-sm', - '[&>table>tfoot>tr]:sticky [&>table>tfoot>tr]:bottom-0 [&>table>tfoot>tr]:z-1 [&>table>tfoot>tr]:bg-(--ui-color-bg-content-primary) [&>table>tfoot>tr>th]:backdrop-blur [&>table>tfoot>tr]:shadow-top-sm' + '[&>table>thead>tr]:sticky [&>table>thead>tr]:top-0 [&>table>thead>tr]:z-1 [&>table>thead>tr]:bg-(--ui-color-bg-content-primary) [&>table>thead>tr>th]:backdrop-blur-sm [&>table>thead>tr]:shadow-bottom-sm', + // '[&>table>tbody>tr]:sticky [&>table>tbody>tr]:bottom-0 [&>table>tbody>tr]:z-1 [&>table>tbody>tr]:bg-(--ui-color-bg-content-primary) [&>table>tbody>tr>th]:backdrop-blur-sm [&>table>tbody>tr]:shadow-top-sm', + '[&>table>tfoot>tr]:sticky [&>table>tfoot>tr]:bottom-0 [&>table>tfoot>tr]:z-1 [&>table>tfoot>tr]:bg-(--ui-color-bg-content-primary) [&>table>tfoot>tr>th]:backdrop-blur-sm [&>table>tfoot>tr]:shadow-top-sm' ].join(' ') }, pinCols: { true: [ - '[&>table>thead>tr>th]:sticky [&>table>thead>tr>th]:right-0 [&>table>thead>tr>th]:left-0 [&>table>thead>tr>th]:bg-(--ui-color-bg-content-primary) [&>table>thead>tr>th]:backdrop-blur', - '[&>table>tbody>tr>th]:sticky [&>table>tbody>tr>th]:right-0 [&>table>tbody>tr>th]:left-0 [&>table>tbody>tr>th]:bg-(--ui-color-bg-content-primary) [&>table>tbody>tr>th]:backdrop-blur', - '[&>table>tfoot>tr>th]:sticky [&>table>tfoot>tr>th]:right-0 [&>table>tfoot>tr>th]:left-0 [&>table>tfoot>tr>th]:bg-(--ui-color-bg-content-primary) [&>table>tfoot>tr>th]:backdrop-blur' + '[&>table>thead>tr>th]:sticky [&>table>thead>tr>th]:right-0 [&>table>thead>tr>th]:left-0 [&>table>thead>tr>th]:bg-(--ui-color-bg-content-primary) [&>table>thead>tr>th]:backdrop-blur-sm', + '[&>table>tbody>tr>th]:sticky [&>table>tbody>tr>th]:right-0 [&>table>tbody>tr>th]:left-0 [&>table>tbody>tr>th]:bg-(--ui-color-bg-content-primary) [&>table>tbody>tr>th]:backdrop-blur-sm', + '[&>table>tfoot>tr>th]:sticky [&>table>tfoot>tr>th]:right-0 [&>table>tfoot>tr>th]:left-0 [&>table>tfoot>tr>th]:bg-(--ui-color-bg-content-primary) [&>table>tfoot>tr>th]:backdrop-blur-sm' ].join(' ') }, rowHover: { diff --git a/src/theme/table.ts b/src/theme/table.ts index c462557c9..b4c96abd6 100644 --- a/src/theme/table.ts +++ b/src/theme/table.ts @@ -91,13 +91,13 @@ export default { 'sticky', 'top-0 inset-x-0', 'bg-(--ui-color-bg-content-primary)', - 'z-2 backdrop-blur' + 'z-2 backdrop-blur-sm' ].join(' '), // bg-default/75 tfoot: [ 'sticky', 'bottom-0 inset-x-0', 'bg-(--ui-color-bg-content-primary)', - 'z-2 backdrop-blur' + 'z-2 backdrop-blur-sm' ].join(' ') // bg-default/75 }, header: { @@ -105,7 +105,7 @@ export default { 'sticky', 'top-0 inset-x-0', 'bg-(--ui-color-bg-content-primary)', - 'z-2 backdrop-blur' + 'z-2 backdrop-blur-sm' ].join(' ') // bg-default/75 }, footer: { @@ -113,7 +113,7 @@ export default { 'sticky', 'bottom-0 inset-x-0', 'bg-(--ui-color-bg-content-primary)', - 'z-2 backdrop-blur' + 'z-2 backdrop-blur-sm' ].join(' ') // bg-default/75 } }, diff --git a/test/components/__snapshots__/Header-vue.spec.ts.snap b/test/components/__snapshots__/Header-vue.spec.ts.snap index 92ca0eff3..b40dc165e 100644 --- a/test/components/__snapshots__/Header-vue.spec.ts.snap +++ b/test/components/__snapshots__/Header-vue.spec.ts.snap @@ -1,7 +1,7 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`Header > renders with as correctly 1`] = ` -"
+"
" @@ -238,12 +238,12 @@ exports[`InputTime > renders with leadingIcon correctly 1`] = ` exports[`InputTime > renders with max value correctly 1`] = ` "
-
––
- -
––
- -
AM
- +
––
+ +
––
+ +
AM
+
" @@ -252,12 +252,12 @@ exports[`InputTime > renders with max value correctly 1`] = ` exports[`InputTime > renders with min value correctly 1`] = ` "
-
––
- -
––
- -
AM
- +
––
+ +
––
+ +
AM
+
" @@ -266,12 +266,12 @@ exports[`InputTime > renders with min value correctly 1`] = ` exports[`InputTime > renders with modelValue correctly 1`] = ` "
-
12
- -
30
- -
PM
- +
12
+ +
30
+ +
PM
+
" @@ -280,12 +280,12 @@ exports[`InputTime > renders with modelValue correctly 1`] = ` exports[`InputTime > renders with placeholder correctly 1`] = ` "
-
––
- -
––
- -
AM
- +
––
+ +
––
+ +
AM
+
" @@ -294,20 +294,20 @@ exports[`InputTime > renders with placeholder correctly 1`] = ` exports[`InputTime > renders with range and defaultValue correctly 1`] = ` "
-
12
- -
30
- -
PM
-
12
+ +
30
+ +
PM
+ -
2
- -
30
- -
PM
- +
2
+ +
30
+ +
PM
+
" @@ -316,20 +316,20 @@ exports[`InputTime > renders with range and defaultValue correctly 1`] = ` exports[`InputTime > renders with range and modelValue correctly 1`] = ` "
-
12
- -
30
- -
PM
-
12
+ +
30
+ +
PM
+ -
2
- -
30
- -
PM
- +
2
+ +
30
+ +
PM
+
" @@ -338,20 +338,20 @@ exports[`InputTime > renders with range and modelValue correctly 1`] = ` exports[`InputTime > renders with range correctly 1`] = ` "
-
––
- -
––
- -
AM
-
––
+ +
––
+ +
AM
+ -
––
- -
––
- -
AM
- +
––
+ +
––
+ +
AM
+
" @@ -360,12 +360,12 @@ exports[`InputTime > renders with range correctly 1`] = ` exports[`InputTime > renders with readonly correctly 1`] = ` "
-
12
- -
30
- -
PM
- +
12
+ +
30
+ +
PM
+
" @@ -374,12 +374,12 @@ exports[`InputTime > renders with readonly correctly 1`] = ` exports[`InputTime > renders with required correctly 1`] = ` "
-
12
- -
30
- -
PM
- +
12
+ +
30
+ +
PM
+
" @@ -388,12 +388,12 @@ exports[`InputTime > renders with required correctly 1`] = ` exports[`InputTime > renders with separator slot correctly 1`] = ` "
-
––
- -
––
- -
AM
- +
––
+ +
––
+ +
AM
+
" @@ -402,20 +402,20 @@ exports[`InputTime > renders with separator slot correctly 1`] = ` exports[`InputTime > renders with separatorIcon correctly 1`] = ` "
-
––
- -
––
- -
AM
-
––
+ +
––
+ +
AM
+ -
––
- -
––
- -
AM
- +
––
+ +
––
+ +
AM
+
" @@ -424,12 +424,12 @@ exports[`InputTime > renders with separatorIcon correctly 1`] = ` exports[`InputTime > renders with size lg correctly 1`] = ` "
-
––
- -
––
- -
AM
- +
––
+ +
––
+ +
AM
+
" @@ -438,12 +438,12 @@ exports[`InputTime > renders with size lg correctly 1`] = ` exports[`InputTime > renders with size md correctly 1`] = ` "
-
––
- -
––
- -
AM
- +
––
+ +
––
+ +
AM
+
" @@ -452,12 +452,12 @@ exports[`InputTime > renders with size md correctly 1`] = ` exports[`InputTime > renders with size sm correctly 1`] = ` "
-
––
- -
––
- -
AM
- +
––
+ +
––
+ +
AM
+
" @@ -466,12 +466,12 @@ exports[`InputTime > renders with size sm correctly 1`] = ` exports[`InputTime > renders with size xl correctly 1`] = ` "
-
––
- -
––
- -
AM
- +
––
+ +
––
+ +
AM
+
" @@ -480,12 +480,12 @@ exports[`InputTime > renders with size xl correctly 1`] = ` exports[`InputTime > renders with size xs correctly 1`] = ` "
-
––
- -
––
- -
AM
- +
––
+ +
––
+ +
AM
+
" @@ -494,12 +494,12 @@ exports[`InputTime > renders with size xs correctly 1`] = ` exports[`InputTime > renders with size xss correctly 1`] = ` "
-
––
- -
––
- -
AM
- +
––
+ +
––
+ +
AM
+
" @@ -508,12 +508,12 @@ exports[`InputTime > renders with size xss correctly 1`] = ` exports[`InputTime > renders with trailing slot correctly 1`] = ` "
-
––
- -
––
- -
AM
- +
––
+ +
––
+ +
AM
+ Trailing slot
" `; @@ -521,12 +521,12 @@ exports[`InputTime > renders with trailing slot correctly 1`] = ` exports[`InputTime > renders with trailingIcon correctly 1`] = ` "
-
––
- -
––
- -
AM
- +
––
+ +
––
+ +
AM
+
" `; diff --git a/test/components/__snapshots__/Table-vue.spec.ts.snap b/test/components/__snapshots__/Table-vue.spec.ts.snap index 0fa004f9e..3347e3e0a 100644 --- a/test/components/__snapshots__/Table-vue.spec.ts.snap +++ b/test/components/__snapshots__/Table-vue.spec.ts.snap @@ -2108,7 +2108,7 @@ exports[`Table > renders with sticky correctly 1`] = ` "
- + @@ -2169,7 +2169,7 @@ exports[`Table > renders with virtualize and sticky correctly 1`] = ` "
Id Amount
- + +
@@ -2205,7 +2205,7 @@ exports[`Table > renders with virtualize and sticky correctly 1`] = ` -
diff --git a/test/components/__snapshots__/Table.spec.ts.snap b/test/components/__snapshots__/Table.spec.ts.snap index d9d32cb12..645e37146 100644 --- a/test/components/__snapshots__/Table.spec.ts.snap +++ b/test/components/__snapshots__/Table.spec.ts.snap @@ -2108,7 +2108,7 @@ exports[`Table > renders with sticky correctly 1`] = ` "
- + @@ -2169,7 +2169,7 @@ exports[`Table > renders with virtualize and sticky correctly 1`] = ` "
Id Amount
- + +
@@ -2205,7 +2205,7 @@ exports[`Table > renders with virtualize and sticky correctly 1`] = ` -
diff --git a/test/components/__snapshots__/TableWrapper-vue.spec.ts.snap b/test/components/__snapshots__/TableWrapper-vue.spec.ts.snap index 31aab9d6b..d6f17148f 100644 --- a/test/components/__snapshots__/TableWrapper-vue.spec.ts.snap +++ b/test/components/__snapshots__/TableWrapper-vue.spec.ts.snap @@ -10,9 +10,9 @@ exports[`TableWrapper > renders with class correctly 1`] = `"
<table><tbody><tr><th>1</th><td>2</td></tr></tbody></table>
"`; -exports[`TableWrapper > renders with pinCols correctly 1`] = `"
<table><tbody><tr><th>1</th><td>2</td></tr></tbody></table>
"`; +exports[`TableWrapper > renders with pinCols correctly 1`] = `"
<table><tbody><tr><th>1</th><td>2</td></tr></tbody></table>
"`; -exports[`TableWrapper > renders with pinRows correctly 1`] = `"
<table><tbody><tr><th>1</th><td>2</td></tr></tbody></table>
"`; +exports[`TableWrapper > renders with pinRows correctly 1`] = `"
<table><tbody><tr><th>1</th><td>2</td></tr></tbody></table>
"`; exports[`TableWrapper > renders with rounded correctly 1`] = `"
<table><tbody><tr><th>1</th><td>2</td></tr></tbody></table>
"`; diff --git a/test/components/__snapshots__/TableWrapper.spec.ts.snap b/test/components/__snapshots__/TableWrapper.spec.ts.snap index 31aab9d6b..d6f17148f 100644 --- a/test/components/__snapshots__/TableWrapper.spec.ts.snap +++ b/test/components/__snapshots__/TableWrapper.spec.ts.snap @@ -10,9 +10,9 @@ exports[`TableWrapper > renders with class correctly 1`] = `"
<table><tbody><tr><th>1</th><td>2</td></tr></tbody></table>
"`; -exports[`TableWrapper > renders with pinCols correctly 1`] = `"
<table><tbody><tr><th>1</th><td>2</td></tr></tbody></table>
"`; +exports[`TableWrapper > renders with pinCols correctly 1`] = `"
<table><tbody><tr><th>1</th><td>2</td></tr></tbody></table>
"`; -exports[`TableWrapper > renders with pinRows correctly 1`] = `"
<table><tbody><tr><th>1</th><td>2</td></tr></tbody></table>
"`; +exports[`TableWrapper > renders with pinRows correctly 1`] = `"
<table><tbody><tr><th>1</th><td>2</td></tr></tbody></table>
"`; exports[`TableWrapper > renders with rounded correctly 1`] = `"
<table><tbody><tr><th>1</th><td>2</td></tr></tbody></table>
"`;