diff --git a/.build/markup-classes-baseline.txt b/.build/markup-classes-baseline.txt index 45a70f396..092507a37 100644 --- a/.build/markup-classes-baseline.txt +++ b/.build/markup-classes-baseline.txt @@ -1,7 +1,6 @@ # Classes used in the rendered html that no stylesheet defines on purpose: # JavaScript hooks and demo-only markers. One per line; delete a line when the hook goes. callout-note -checkbox-wrapper-mail datagrid-content datagrid-item datatable @@ -11,17 +10,7 @@ docs-search docs-theme-toggle dropzone-msg-desc dropzone-msg-title -email-action-icons -email-action-icons-item -email-border -email-content -email-date -email-list -email-sender-info -email-subject -email-title fallback -file-offcanvas github-dark icon-tabler icon-tabler-pencil @@ -47,7 +36,6 @@ sort-score sort-status sort-tags sort-type -star-toggle table-tbody tblr-illustrations-computer-fix-a tblr-illustrations-computer-fix-b diff --git a/.build/release-notes.ts b/.build/release-notes.ts index da3a796c3..e12468435 100644 --- a/.build/release-notes.ts +++ b/.build/release-notes.ts @@ -31,11 +31,7 @@ const { version } = JSON.parse(readFileSync(join(repoRoot, 'core', 'package.json // The `## ` block of a changelog, without its heading. const versionBlock = (changelog: string): string => { const lines = changelog.split('\n') - // `## 1.5.0`, or `## 1.5.0 - 2026-09-05` once the date has been stamped on it. - const start = lines.findIndex((line) => { - const heading = line.trim() - return heading === `## ${version}` || heading.startsWith(`## ${version} - `) - }) + const start = lines.findIndex((line) => line.trim() === `## ${version}`) if (start === -1) return '' const rest = lines.slice(start + 1) diff --git a/.build/stamp-changelog-dates.ts b/.build/stamp-changelog-dates.ts deleted file mode 100644 index 4b5446aec..000000000 --- a/.build/stamp-changelog-dates.ts +++ /dev/null @@ -1,44 +0,0 @@ -#!/usr/bin/env node -// Adds the release date to the heading `changeset version` has just written, so -// every entry in a changelog reads `## 1.5.0 - 2026-09-05`. -// -// The date is the day the version pull request was last regenerated, which the -// bot redoes on every push to dev. It can therefore be a day or two before the -// release when nothing lands in between. -// -// Run: pnpm run stamp-changelog-dates (part of `pnpm run version`) - -import { existsSync, readFileSync, writeFileSync } from 'node:fs' -import { join, dirname } from 'node:path' -import { fileURLToPath } from 'node:url' - -const __dirname = dirname(fileURLToPath(import.meta.url)) -const repoRoot = join(__dirname, '..') - -const packages = ['core', 'preview', 'docs'] - -interface PackageJson { - version: string -} - -const today = new Date().toISOString().slice(0, 10) -const stamped: string[] = [] - -for (const name of packages) { - const changelog = join(repoRoot, name, 'CHANGELOG.md') - if (!existsSync(changelog)) continue - - const { version } = JSON.parse(readFileSync(join(repoRoot, name, 'package.json'), 'utf8')) as PackageJson - const content = readFileSync(changelog, 'utf8') - - // Only a heading without a date, so running this twice changes nothing. - const lines = content.split('\n') - const index = lines.findIndex((line) => line.trim() === `## ${version}`) - if (index === -1) continue - - lines[index] = `## ${version} - ${today}` - writeFileSync(changelog, lines.join('\n')) - stamped.push(`${name}/CHANGELOG.md: ## ${version} - ${today}`) -} - -console.log(stamped.length > 0 ? stamped.join('\n') : 'Nothing to stamp.') diff --git a/.changeset/avatar-page-descriptions.md b/.changeset/avatar-page-descriptions.md new file mode 100644 index 000000000..41f7b5749 --- /dev/null +++ b/.changeset/avatar-page-descriptions.md @@ -0,0 +1,5 @@ +--- +"@tabler/preview": patch +--- + +Updated the avatar list and brand card descriptions on the avatars preview page. diff --git a/.changeset/docs-markdown-mirror-data-tables.md b/.changeset/docs-markdown-mirror-data-tables.md new file mode 100644 index 000000000..a2ff61c52 --- /dev/null +++ b/.changeset/docs-markdown-mirror-data-tables.md @@ -0,0 +1,5 @@ +--- +'@tabler/docs': patch +--- + +Added the color palette, flags, payments and social icons tables to the docs `.md` mirrors via a new `MarkdownSource` component. diff --git a/.changeset/fix-card-code-radius.md b/.changeset/fix-card-code-radius.md new file mode 100644 index 000000000..1c493b170 --- /dev/null +++ b/.changeset/fix-card-code-radius.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Fixed `.card-code` so the code block follows the card corners instead of drawing its own `border-radius`. diff --git a/.changeset/fix-dark-mode-shadows.md b/.changeset/fix-dark-mode-shadows.md new file mode 100644 index 000000000..56b604862 --- /dev/null +++ b/.changeset/fix-dark-mode-shadows.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Fixed invisible box-shadows in dark mode with a new global `--tblr-shadow-color` `light-dark()` token. diff --git a/.changeset/fix-docs-toc-scroll.md b/.changeset/fix-docs-toc-scroll.md new file mode 100644 index 000000000..507cd79af --- /dev/null +++ b/.changeset/fix-docs-toc-scroll.md @@ -0,0 +1,5 @@ +--- +"@tabler/docs": patch +--- + +Fixed the docs "On this page" list running past the viewport; the sticky rail now scrolls on its own. diff --git a/.changeset/fix-dropdown-arrow-border.md b/.changeset/fix-dropdown-arrow-border.md new file mode 100644 index 000000000..5bc2a0c31 --- /dev/null +++ b/.changeset/fix-dropdown-arrow-border.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Fixed the `.dropdown-menu-arrow` border color and replaced the deprecated `clip` with `clip-path`. diff --git a/.changeset/fix-email-inbox-list.md b/.changeset/fix-email-inbox-list.md new file mode 100644 index 000000000..b64cb2ce3 --- /dev/null +++ b/.changeset/fix-email-inbox-list.md @@ -0,0 +1,5 @@ +--- +"@tabler/preview": patch +--- + +Fixed the unstyled message list on the `email-inbox` page: a hoverable list group with label dots, dates and row actions. diff --git a/.changeset/fix-folded-sidebar-flicker.md b/.changeset/fix-folded-sidebar-flicker.md new file mode 100644 index 000000000..9247c53e5 --- /dev/null +++ b/.changeset/fix-folded-sidebar-flicker.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Fixed the folded sidebar flashing the active submenu as a flyout on reload before `tabler.js` closed it. diff --git a/.changeset/fix-form-switch-knob-light.md b/.changeset/fix-form-switch-knob-light.md new file mode 100644 index 000000000..6bd089f62 --- /dev/null +++ b/.changeset/fix-form-switch-knob-light.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Fixed the invisible `.form-switch` knob in light mode by restoring a gray `$form-switch-color`. diff --git a/.changeset/icons-page-all-icons.md b/.changeset/icons-page-all-icons.md new file mode 100644 index 000000000..be9ccb57c --- /dev/null +++ b/.changeset/icons-page-all-icons.md @@ -0,0 +1,5 @@ +--- +"@tabler/preview": patch +--- + +Fixed the preview icons page to render all icons in production builds, keeping the 20-icon limit only for the dev server. diff --git a/.changeset/preview-subtitles-classes.md b/.changeset/preview-subtitles-classes.md new file mode 100644 index 000000000..75d9db3b7 --- /dev/null +++ b/.changeset/preview-subtitles-classes.md @@ -0,0 +1,5 @@ +--- +"@tabler/preview": patch +--- + +Updated the preview card descriptions to name CSS classes and markup instead of Astro component props. diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 99271e708..873c5e37f 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -44,6 +44,29 @@ jobs: env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + # `changesets/action` fills the version pull request with one section per + # package (`## @tabler/core@1.5.1`, …), so a changeset that touches several + # packages shows up several times. Replace that body with the same notes the + # GitHub release gets: the intro from `.github/release-notes/.md` + # and the changes grouped as core / demo / docs, each listed once. The + # action rewrites the body on every push to dev, so this runs right after it. + - name: Write the release notes into the version pull request + if: steps.changesets.outputs.pr-number != '' + continue-on-error: true + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + PR_NUMBER: ${{ steps.changesets.outputs.pr-number }} + run: | + git fetch --depth=1 origin changeset-release/dev + git checkout --force --detach origin/changeset-release/dev + version=$(node -p "require('./core/package.json').version") + { + echo "Merging this pull request publishes \`@tabler/core@${version}\` to npm and creates the GitHub release. It is regenerated on every push to \`dev\`." + echo + pnpm run --silent release-notes + } > "${RUNNER_TEMP}/pr-body.md" + gh pr edit "${PR_NUMBER}" --body-file "${RUNNER_TEMP}/pr-body.md" + # `pnpm run build` above zipped preview/dist into packages-zip/; attach it to # the GitHub release that changesets/action just created for @tabler/core. - name: Attach the preview zip to the GitHub release diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md index 4b0c4745a..c955ad001 100644 --- a/core/CHANGELOG.md +++ b/core/CHANGELOG.md @@ -1,6 +1,6 @@ # @tabler/core -## 1.5.0 - 2026-09-05 +## 1.5.0 ### Minor Changes @@ -118,7 +118,7 @@ - 70ec683: Updated `$card-status-size` default from `$border-width-wide` to `3px`. - 666ccd6: Updated shadow tokens (`--tblr-shadow-*`) to use the new `xs`–`2xl` and `overlay` values. -## 1.4.0 - 2025-07-13 +## 1.4.0 ### Minor Changes @@ -137,19 +137,19 @@ - 666a296: Fix list group item hoverable only with `.list-group-hoverable` class - cfd4cb6: Fix `.pagination-link` hover styles to non-active items -## 1.3.2 - 2025-05-19 +## 1.3.2 ### Patch Changes - 446c34e: Fix README file in core package -## 1.3.1 - 2025-05-19 +## 1.3.1 ### Patch Changes - a7f73d7: Fix README file in core package -## 1.3.0 - 2025-05-19 +## 1.3.0 ### Minor Changes @@ -179,7 +179,7 @@ - e675389: Fix missing border-radius to `.card-header-tabs` - 9007e73: Fix FAQ accordion structure -## 1.2.0 - 2025-04-16 +## 1.2.0 ### Minor Changes @@ -214,13 +214,13 @@ - 6d6d1bd: Add responsive font size for form controls on mobile devices - 6c566cf: Add new advanced table example -## 1.1.1 - 2025-03-01 +## 1.1.1 ### Patch Changes - f29c911: Fix Documentation structure -## 1.1.0 - 2025-03-01 +## 1.1.0 ### Minor Changes @@ -251,7 +251,7 @@ - 24b944c: Fix `.avatar-upload` double borders - ca4ba14: Fixes navbar styles with new hover effects and color variables -## 1.0.0 - 2025-01-28 +## 1.0.0 ### Minor Changes @@ -373,14 +373,14 @@ - 94b83d4: Add support for changeset tool for more efficient and organized code changes - c51ff28: Fix colors in date range datepicker -## 1.0.0-beta24 - 2025-01-11 +## 1.0.0-beta24 - Enhanced documentation. - Updated illustrations and improved SVG handling in HTML. - Updated copyright year in LICENSE file to 2025. - Added marketing pages plugin. -## 1.0.0-beta23 - 2025-01-07 +## 1.0.0-beta23 - Documentation improvements. - Added countup functionality and updated documentation example. @@ -417,7 +417,7 @@ - Fixed icon issues. - Fixed URL in documentation. -## 1.0.0-beta22 - 2025-01-02 +## 1.0.0-beta22 - Fixed `@charset` CSS declaration in bundle. - Fixed cells with inline icons. @@ -440,7 +440,7 @@ - Read changelog from `CHANGELOG.md` file. - Initialized VS Code configuration. -## 1.0.0-beta21 - 2024-09-08 +## 1.0.0-beta21 - Updated dependencies. - Updated Tabler Icons to v3.14.0 and the import script. @@ -477,7 +477,7 @@ - Improved heights, scrolls, and layouts in Docs examples. - Fixed flags display in preview. -## 1.0.0-beta20 - 2023-08-24 +## 1.0.0-beta20 - Update `bootstrap` to v5.3.1 - Add new `Chat` component @@ -503,7 +503,7 @@ - `Dockerfile` fix - Switch from `npm` to `pnpm` for faster package installation -## 1.0.0-beta19 - 2023-05-15 +## 1.0.0-beta19 - Add customizable Star Ratings component using `star-rating.js` library (#1571) - Add new "Filled" section to Icons page (#1574) @@ -511,7 +511,7 @@ - Fix text color in dark version of navbar (#1569) - Changelog update -## 1.0.0-beta18 - 2023-05-14 +## 1.0.0-beta18 - new page: Cookie banner - Unify dark mode with latest Bootstrap API and improve dark mode elements (#1561) @@ -534,7 +534,7 @@ - Dark mode lite colors improvement - Fix non full width selects (#1392) -## 1.0.0-beta17 - 2023-01-28 +## 1.0.0-beta17 - update `bootstrap` to v5.3.0 - update icons to v2.1.2 @@ -556,7 +556,7 @@ - move `@tabler/icons` to `dev-dependencies` - fix #1370: avatar stacked list is not stacked anymore -## 1.0.0-beta16 - 2022-11-12 +## 1.0.0-beta16 - new `Photogrid` page - `Steps` component improvements @@ -570,7 +570,7 @@ - homepage navbar fix - fix #1262 - `.bg-opacity-xx` class is not functioning properly -## 1.0.0-beta15 - 2022-11-01 +## 1.0.0-beta15 - new `badges` page - `` styling @@ -587,12 +587,12 @@ - `btn-actions` fixes - replace `$text-muted` to css variable -## 1.0.0-beta14 - 2022-10-21 +## 1.0.0-beta14 - fix active items in dark mode - update Jekyll to newest version -## 1.0.0-beta13 - 2022-10-18 +## 1.0.0-beta13 - update Bootstrap to 5.2.1, update dependencies - new `tracking` component @@ -622,7 +622,7 @@ - fix #1275 - remove last border-right on progress bar - fix #1261 - broken offcanvas bg -## 1.0.0-beta12 - 2022-09-19 +## 1.0.0-beta12 - new "Job listing" page - new "Sign in with cover" page @@ -647,7 +647,7 @@ - fix form elements demo page radio buttons - replace `gulp-minify` with `gulp-terser` -## 1.0.0-beta11 - 2022-08-05 +## 1.0.0-beta11 - new `Dropzone` component - new `Lightbox` component @@ -662,7 +662,7 @@ - fix: #1125 incorrect chart display in the mobile version - update Bootstrap to 5.2.0 -## 1.0.0-beta10 - 2022-04-29 +## 1.0.0-beta10 - new `datatable` component - update Tabler Icons to v1.67 @@ -671,7 +671,7 @@ - replace !important modifier with more specific selectors (#1100) - new `FAQ` page -## 1.0.0-beta9 - 2022-02-26 +## 1.0.0-beta9 - fix: #1061 - list group item colors in light and dark modes - new `tasks` dashboard @@ -684,7 +684,7 @@ - add `font-display: swap;` to improve font loading - new `Boxed` layout -## 1.0.0-beta8 - 2022-02-05 +## 1.0.0-beta8 - update dependencies - new vector maps demos @@ -693,7 +693,7 @@ - replace `badge` with `status-dot` in `navbar-notifications.html` - map tooltip fixes -## 1.0.0-beta7 - 2022-02-05 +## 1.0.0-beta7 - fix: #1019 - project-overview.html link not working - fix: #1010 - card with bottom tabs has incorrect border radius @@ -706,7 +706,7 @@ - RTL stylesheet fixes - new card action demos -## 1.0.0-beta6 - 2022-01-18 +## 1.0.0-beta6 - pricing cards fix - fix bug `fw-...`, `.fs-...` is missed (#987) @@ -719,7 +719,7 @@ - fix #959 - `node-sass` does not properly compile nested media queries - update package dependencies to newest version -## 1.0.0-beta5 - 2021-12-07 +## 1.0.0-beta5 **Tabler has finally lived to see dark mode! 🌝🌚** @@ -736,7 +736,7 @@ - colors unify - add `tom-select` and remove `choices.js` -## 1.0.0-beta4 - 2021-10-24 +## 1.0.0-beta4 - upgrade required node.js version to 14 - upgrade Bootstrap to 5.1 @@ -744,14 +744,14 @@ - fix #775 - litepicker not initializing - fix `nouislider` import in dev -## 1.0.0-beta3 - 2021-05-08 +## 1.0.0-beta3 - upgrade Bootstrap to 5.0 - upgrade dependencies - change `$border-radius-pill` variable - badge vertical align fix -## 1.0.0-beta2 - 2021-03-29 +## 1.0.0-beta2 - update dependencies - `li` marker fix @@ -764,7 +764,7 @@ - charts label fixes - charts docs -## 1.0.0-beta - 2021-02-17 +## 1.0.0-beta **Initial beta release of Tabler v1.0! Lots more coming soon though 😁** diff --git a/core/scss/_props.scss b/core/scss/_props.scss index 9959a025d..d29c4338f 100644 --- a/core/scss/_props.scss +++ b/core/scss/_props.scss @@ -76,6 +76,7 @@ } /** Shadows */ + --shadow-color: #{$box-shadow-color}; @each $name, $value in $box-shadows { --shadow#{if(sass($name): '-#{$name}'; else: '')}: #{$value}; } diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss index 60fe09ced..a39923812 100644 --- a/core/scss/_variables.scss +++ b/core/scss/_variables.scss @@ -949,30 +949,41 @@ $aspect-ratios: ( ) !default; // Shadows -$box-shadow-xs: 0 1px 2px 0 rgba(18, 18, 23, 0.05) !default; +// Neutral drop-shadow tint. Emitted once as the global `--shadow-color` custom +// property (see `_props.scss`); every shadow below only varies its opacity via +// `color-transparent()`, never its colour. +// +// The light branch is already 60% transparent, so `color-transparent()` scales +// each shadow down from the percentages below to the intended light-mode value +// (e.g. `0.125 * 0.4 = 0.05`). The dark branch is fully opaque black, so the +// same percentage lands 2.5x darker — otherwise a near-black shadow is +// invisible against the dark surfaces. Keep the two in sync when tuning. +$box-shadow-color: light-dark(rgba(18, 18, 23, 0.4), #000) !default; + +$box-shadow-xs: 0 1px 2px 0 color-transparent(var(--shadow-color), 0.125) !default; $box-shadow-sm: - 0 1px 3px 0 rgba(18, 18, 23, 0.1), - 0 1px 2px 0 rgba(18, 18, 23, 0.06) !default; + 0 1px 3px 0 color-transparent(var(--shadow-color), 0.25), + 0 1px 2px 0 color-transparent(var(--shadow-color), 0.15) !default; $box-shadow-md: - 0px 2px 4px -1px rgba(18, 18, 23, 0.06), - 0px 4px 6px -1px rgba(18, 18, 23, 0.08) !default; + 0px 2px 4px -1px color-transparent(var(--shadow-color), 0.15), + 0px 4px 6px -1px color-transparent(var(--shadow-color), 0.2) !default; $box-shadow-lg: - 0px 4px 6px -2px rgba(18, 18, 23, 0.05), - 0px 10px 15px -3px rgba(18, 18, 23, 0.08) !default; + 0px 4px 6px -2px color-transparent(var(--shadow-color), 0.125), + 0px 10px 15px -3px color-transparent(var(--shadow-color), 0.2) !default; $box-shadow-xl: - 0px 10px 10px -5px rgba(18, 18, 23, 0.04), - 0px 20px 25px -5px rgba(18, 18, 23, 0.1) !default; -$box-shadow-2xl: 0px 25px 50px -12px rgba(18, 18, 23, 0.25) !default; + 0px 10px 10px -5px color-transparent(var(--shadow-color), 0.1), + 0px 20px 25px -5px color-transparent(var(--shadow-color), 0.25) !default; +$box-shadow-2xl: 0px 25px 50px -12px color-transparent(var(--shadow-color), 0.625) !default; $box-shadow-overlay: - 0px 2px 4px 0px rgba(18, 18, 23, 0.04), - 0px 5px 8px 0px rgba(18, 18, 23, 0.04), - 0px 10px 18px 0px rgba(18, 18, 23, 0.03), - 0px 24px 48px 0px rgba(18, 18, 23, 0.03), - 0px 0px 0px 1px rgba(18, 18, 23, 0.1) !default; + 0px 2px 4px 0px color-transparent(var(--shadow-color), 0.1), + 0px 5px 8px 0px color-transparent(var(--shadow-color), 0.1), + 0px 10px 18px 0px color-transparent(var(--shadow-color), 0.075), + 0px 24px 48px 0px color-transparent(var(--shadow-color), 0.075), + 0px 0px 0px 1px color-transparent(var(--shadow-color), 0.25) !default; $box-shadow: $box-shadow-md !default; $box-shadow-transparent: 0 0 0 0 transparent !default; -$box-shadow-border: 0px 0px 0px 1px rgba(18, 18, 23, 0.1) !default; +$box-shadow-border: 0px 0px 0px 1px color-transparent(var(--shadow-color), 0.25) !default; $box-shadow-input: $box-shadow-xs !default; $box-shadow-card: $box-shadow-xs !default; $box-shadow-card-hover: $box-shadow-lg !default; @@ -995,7 +1006,7 @@ $box-shadows: ( dropdown: $box-shadow-dropdown, ) !default; -$box-shadow-inset: inset 0 1px 2px rgba($black, 0.075) !default; +$box-shadow-inset: inset 0 1px 2px color-transparent(var(--shadow-color), 0.1875) !default; // Component active $component-active-color: $white !default; @@ -1982,14 +1993,14 @@ $form-select-font-size-lg: $input-font-size-lg !default; $form-select-border-radius-lg: $input-border-radius-lg !default; $form-select-transition: $input-transition !default; -$form-switch-color: $white !default; +$form-switch-color: $gray-200 !default; $form-switch-width: 2rem !default; $form-switch-height: 1.25rem !default; $form-switch-padding-start: $form-switch-width + 0.5rem !default; $form-switch-bg-image: url("data:image/svg+xml,") !default; $form-switch-border-radius: $form-switch-width !default; $form-switch-transition: background-position 0.15s ease-in-out !default; -$form-switch-focus-color: $white !default; +$form-switch-focus-color: $input-focus-border-color !default; $form-switch-focus-bg-image: url("data:image/svg+xml,") !default; $form-switch-checked-color: $white !default; $form-switch-checked-bg-image: url("data:image/svg+xml,") !default; diff --git a/core/scss/layout/_navbar.scss b/core/scss/layout/_navbar.scss index b1332ce3c..6912f8b1e 100644 --- a/core/scss/layout/_navbar.scss +++ b/core/scss/layout/_navbar.scss @@ -622,6 +622,16 @@ Navbar vertical // a bare :where()/[…] selector would lose to it and never take effect. html[data-bs-sidebar^='folded'] { --sidebar-width: var(--sidebar-folded-width); + + // The sidebar is rendered for the expanded state, so the active submenu can + // arrive open (.show). Folded, it would paint as a flyout until sidebar.ts + // closes it on DOMContentLoaded — a flicker on every reload. Menus opened by + // the Dropdown plugin carry a popper data attribute (data-tblr-popper from + // tabler.js, data-bs-popper from Bootstrap's own js), so only the + // server-rendered ones hide. + .navbar-vertical .dropdown-menu.show:not([data-bs-popper]):not([data-tblr-popper]) { + display: none; + } } .navbar-vertical:is(.navbar-folded, .navbar-folded-hover) { diff --git a/core/scss/ui/_cards.scss b/core/scss/ui/_cards.scss index 7bae53814..974fe020c 100644 --- a/core/scss/ui/_cards.scss +++ b/core/scss/ui/_cards.scss @@ -568,6 +568,17 @@ Card code */ .card-code { padding: 0; + overflow: hidden; + + // The code block is a dark box, so it follows the card's corners: rounded at + // the card's top or bottom edge, square when another section sits next to it. + &:first-child { + @include border-top-radius(var(--card-border-radius)); + } + + &:last-child { + @include border-bottom-radius(var(--card-border-radius)); + } .highlight { margin: 0; @@ -577,6 +588,7 @@ Card code pre { margin: 0 !important; border: 0 !important; + @include border-radius(0); } } diff --git a/core/scss/ui/_dropdowns.scss b/core/scss/ui/_dropdowns.scss index f810e505c..51b992686 100644 --- a/core/scss/ui/_dropdowns.scss +++ b/core/scss/ui/_dropdowns.scss @@ -100,11 +100,12 @@ $dropdown-tokens: defaults( display: block; width: 14px; height: 14px; - clip: rect(0, 9px, 9px, 0); + clip-path: inset(0 5px 5px 0); content: ''; background: inherit; - border: 1px solid; - border-color: inherit; + // The menu draws its edge with the 1px ring in --dropdown-box-shadow and has + // no border, so `inherit` would give the arrow the text color. + border: 1px solid var(--dropdown-border-color); /* rtl:ignore */ transform: rotate(45deg); diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index eef8d2e14..9b392fa23 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -1,6 +1,6 @@ # @tabler/docs -## 1.5.0 - 2026-09-05 +## 1.5.0 ### Minor Changes diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index db74bc1ad..095b79f09 100644 --- a/docs/astro.config.mjs +++ b/docs/astro.config.mjs @@ -26,11 +26,7 @@ export default defineConfig({ }, // Static output + the Vercel adapter: turns `redirects` below into real HTTP // redirects at Vercel's routing layer (no adapter = meta-refresh HTML pages). - adapter: vercel({ - webAnalytics: { - enabled: true, - }, - }), + adapter: vercel(), // renamed/moved pages, shared with middleware.ts redirects, // pages live at the package root (./pages) — content-first layout; all diff --git a/docs/components/Colors.astro b/docs/components/Colors.astro index 054e68e69..7487e6598 100644 --- a/docs/components/Colors.astro +++ b/docs/components/Colors.astro @@ -1,14 +1,26 @@ --- +import MarkdownSource from './MarkdownSource.astro' +import { markdownTable } from '@shared/lib/markdown-source' + interface Props { - colors: Record + colors: Record } const { colors }: Props = Astro.props + +// The .md mirror gets the palette as a table; hex values are listed only when +// the data has real ones (the gray scale points at a CSS variable instead). +const list = Object.values(colors) +const withHex = list.some((color) => color.hex?.startsWith('#')) +const markdown = markdownTable( + ['Color', 'CSS variable', ...(withHex ? ['Hex'] : [])], + list.map((color) => [color.title, `\`${color.prop}\``, ...(withHex ? [color.hex?.startsWith('#') ? `\`${color.hex}\`` : ''] : [])]), +) ---
{ - Object.values(colors).map((color) => { + list.map((color) => { return (
@@ -18,3 +30,4 @@ const { colors }: Props = Astro.props }) }
+ diff --git a/docs/components/DocsCopyMarkdownLink.astro b/docs/components/DocsCopyMarkdownLink.astro new file mode 100644 index 000000000..b95f9e615 --- /dev/null +++ b/docs/components/DocsCopyMarkdownLink.astro @@ -0,0 +1,91 @@ +--- +// Fetches this page's Markdown mirror (its url with ".md" appended) and copies +// its content to the clipboard, so the page can be pasted into an LLM directly. +import Icon from '@ui/Icon.astro' + +interface Props { + /** Url of the page's `.md` mirror, fetched on click. */ + url: string + /** Absolute url of the same `.md` mirror, for the "Ask ChatGPT" / "Ask Claude" prompts. */ + absoluteUrl?: string | undefined + class?: string +} + +const { url, absoluteUrl, class: className } = Astro.props + +// Both ChatGPT and Claude open with this text already in the composer; the +// reader still has to press send. +const prompt = absoluteUrl && `Read ${absoluteUrl} so I can ask questions about it.` +const askChatGptUrl = prompt && `https://chatgpt.com/?q=${encodeURIComponent(prompt)}` +const askClaudeUrl = prompt && `https://claude.ai/new?q=${encodeURIComponent(prompt)}` +--- + +
+ + +
+ + + View as markdown + + { + askChatGptUrl && ( + + + Ask ChatGPT + + ) + } + { + askClaudeUrl && ( + + + Ask Claude + + ) + } +
+
+ + diff --git a/docs/components/DocsToc.astro b/docs/components/DocsToc.astro index b72df9218..943cecc13 100644 --- a/docs/components/DocsToc.astro +++ b/docs/components/DocsToc.astro @@ -19,11 +19,9 @@ interface Props { editUrl?: string | undefined /** URL of the file implementing the component, from the page's `source` front matter */ sourceUrl?: string | undefined - /** url of this page's markdown mirror, offered as a copy button */ - markdownUrl?: string | undefined } -const { toc = [], editUrl, sourceUrl, markdownUrl } = Astro.props +const { toc = [], editUrl, sourceUrl } = Astro.props const illustrationsCount = illustrations.length --- @@ -54,15 +52,8 @@ const illustrationsCount = illustrations.length { - (markdownUrl || sourceUrl || editUrl) && ( + (sourceUrl || editUrl) && (