diff --git a/.changeset/fix-docs-links-and-vector-map.md b/.changeset/fix-docs-links-and-vector-map.md new file mode 100644 index 000000000..f65308b37 --- /dev/null +++ b/.changeset/fix-docs-links-and-vector-map.md @@ -0,0 +1,5 @@ +--- +"@tabler/docs": patch +--- + +Fixed the docs logo link name, dead example links in the navbar and offcanvas pages, and the vector map error on its plugin page. diff --git a/.changeset/fix-preview-markup-a11y.md b/.changeset/fix-preview-markup-a11y.md new file mode 100644 index 000000000..05abe1659 --- /dev/null +++ b/.changeset/fix-preview-markup-a11y.md @@ -0,0 +1,5 @@ +--- +"@tabler/preview": patch +--- + +Fixed the marketing footer layout, timeline social icons, missing `alt` and `aria-label` attributes and invalid nesting in demos. diff --git a/.changeset/fix-scrollspy-numeric-ids.md b/.changeset/fix-scrollspy-numeric-ids.md new file mode 100644 index 000000000..9cf042bc0 --- /dev/null +++ b/.changeset/fix-scrollspy-numeric-ids.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Fixed ScrollSpy throwing on target ids that start with a digit, such as headings like `1. Setup`. diff --git a/core/js/src/bootstrap/scrollspy.ts b/core/js/src/bootstrap/scrollspy.ts index f4f1dc591..33c530f2a 100644 --- a/core/js/src/bootstrap/scrollspy.ts +++ b/core/js/src/bootstrap/scrollspy.ts @@ -8,7 +8,7 @@ import BaseComponent from './base-component' import EventHandler from './dom/event-handler' import SelectorEngine from './dom/selector-engine' -import { getElement, isDisabled, isVisible } from './util/index' +import { getElement, isDisabled, isVisible, parseSelector } from './util/index' import type { ComponentConfig, ComponentConfigType } from './types' const NAME = 'scrollspy' @@ -198,7 +198,7 @@ class ScrollSpy extends BaseComponent { continue } - const observableSection = SelectorEngine.findOne(decodeURI((anchor as HTMLAnchorElement).hash), this._element) + const observableSection = SelectorEngine.findOne(parseSelector(decodeURI((anchor as HTMLAnchorElement).hash)), this._element) if (isVisible(observableSection!)) { this._targetLinks.set(decodeURI((anchor as HTMLAnchorElement).hash), anchor) diff --git a/core/js/tests/unit/scrollspy.spec.ts b/core/js/tests/unit/scrollspy.spec.ts index 2c67a57d9..4668695a7 100644 --- a/core/js/tests/unit/scrollspy.spec.ts +++ b/core/js/tests/unit/scrollspy.spec.ts @@ -624,4 +624,11 @@ describe('ScrollSpy', () => { expect(ScrollSpy.getInstance(scrollSpyEl)).not.toBeNull() }) }) + describe('target ids', () => { + it('should accept anchors whose target id starts with a digit', () => { + fixtureEl.innerHTML = ['', '
', '
test
', '
'].join('') + + expect(() => new ScrollSpy('#content', { target: '#navigation' })).not.toThrow() + }) + }) }) diff --git a/docs/components/DocsNavbar.astro b/docs/components/DocsNavbar.astro index 324fc928f..96e4c0635 100644 --- a/docs/components/DocsNavbar.astro +++ b/docs/components/DocsNavbar.astro @@ -17,7 +17,7 @@ const changelogUrl = 'https://tabler.io/changelog' - + v{site.version} diff --git a/docs/content/ui/components/avatar.mdx b/docs/content/ui/components/avatar.mdx index bd4a2df1f..e75e97ba1 100644 --- a/docs/content/ui/components/avatar.mdx +++ b/docs/content/ui/components/avatar.mdx @@ -204,9 +204,9 @@ Put an icon inside to show the action. The variant is often used as a link or a - - - + + + @@ -216,11 +216,11 @@ The upload avatar uses the same size classes as a normal avatar, from `avatar-xx - - - - - + + + + + diff --git a/docs/content/ui/components/button.mdx b/docs/content/ui/components/button.mdx index 36242b3a7..aa8f21a5f 100644 --- a/docs/content/ui/components/button.mdx +++ b/docs/content/ui/components/button.mdx @@ -592,10 +592,10 @@ Use the `.btn-actions` container to group multiple action buttons together. This
- - - - + + + +
diff --git a/docs/content/ui/components/card.mdx b/docs/content/ui/components/card.mdx index a85d18e40..b3f40052d 100644 --- a/docs/content/ui/components/card.mdx +++ b/docs/content/ui/components/card.mdx @@ -151,7 +151,7 @@ Add an image to your blog post card to make it eye-catching. You can do it by ad
3 days ago
- +
@@ -203,7 +203,7 @@ You can also put the image beside the text instead of above it. Use a `row row-0
3 days ago
- +
diff --git a/docs/content/ui/components/list-group.mdx b/docs/content/ui/components/list-group.mdx index 46fd44814..f98eb2bfb 100644 --- a/docs/content/ui/components/list-group.mdx +++ b/docs/content/ui/components/list-group.mdx @@ -124,7 +124,7 @@ Add `list-group-hoverable` to the container to highlight the row under the point
Change deprecated html tags
- +
@@ -132,7 +132,7 @@ Add `list-group-hoverable` to the container to highlight the row under the point
Fix spacing in the navbar
- +
@@ -248,7 +248,7 @@ This pattern joins several variants: a flush list inside a card, hoverable rows,
The last deploy did not finish
- +
@@ -260,7 +260,7 @@ This pattern joins several variants: a flush list inside a card, hoverable rows,
Alice replied in the design thread
- +
diff --git a/docs/content/ui/components/offcanvas.mdx b/docs/content/ui/components/offcanvas.mdx index 2b8cc03da..e47949f67 100644 --- a/docs/content/ui/components/offcanvas.mdx +++ b/docs/content/ui/components/offcanvas.mdx @@ -68,8 +68,8 @@ Add `offcanvas-narrow` for a panel thinner than the default. It suits a short li The offcanvas component is used to display a cookies banner. It is a great way to inform users about the use of cookies on your website and to get their consent. -
Do you like cookies? 🍪 We use cookies to ensure you get the best experience on our website. Learn more
`}> - +
Do you like cookies? 🍪 We use cookies to ensure you get the best experience on our website. Learn more
`}> + ## Accessibility diff --git a/docs/content/ui/layout/navbars.mdx b/docs/content/ui/layout/navbars.mdx index af57dc179..09cbe1c33 100644 --- a/docs/content/ui/layout/navbars.mdx +++ b/docs/content/ui/layout/navbars.mdx @@ -69,11 +69,11 @@ The navbar can contain links, buttons, and other elements. You can customize the
Status - Profile + Profile Feedback
- Settings - Logout + Settings + Logout
diff --git a/preview/pages/badges.astro b/preview/pages/badges.astro index 5fc56e320..70f649a36 100644 --- a/preview/pages/badges.astro +++ b/preview/pages/badges.astro @@ -92,7 +92,7 @@ const sizes = ['sm', 'md', 'lg'] - diff --git a/preview/pages/buttons.astro b/preview/pages/buttons.astro index 62ab572df..ad83c0d1e 100644 --- a/preview/pages/buttons.astro +++ b/preview/pages/buttons.astro @@ -1,4 +1,5 @@ --- +import { ucFirst } from '@shared/lib/string-format' import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import Icon from '@ui/Icon.astro' import Button from '@ui/Button.astro' @@ -69,7 +70,7 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const
{ actions.map((action) => ( - + )) diff --git a/preview/pages/card-actions.astro b/preview/pages/card-actions.astro index c884fa325..41102e2e0 100644 --- a/preview/pages/card-actions.astro +++ b/preview/pages/card-actions.astro @@ -130,7 +130,7 @@ const person3 = requireIndex(people, 3)
- +
Edit user Change permissions @@ -151,10 +151,10 @@ const person3 = requireIndex(people, 3) A compact row of icon-only actions in the header.
- - - - + + + + diff --git a/preview/pages/email-inbox.astro b/preview/pages/email-inbox.astro index 2389f221b..4dae3c722 100644 --- a/preview/pages/email-inbox.astro +++ b/preview/pages/email-inbox.astro @@ -75,7 +75,7 @@ import mails from '@data/mails.json'
-
@@ -87,7 +87,7 @@ import mails from '@data/mails.json' -
@@ -100,7 +100,7 @@ import mails from '@data/mails.json' -
@@ -158,22 +158,22 @@ import mails from '@data/mails.json'
- - + +
diff --git a/preview/pages/lightbox.astro b/preview/pages/lightbox.astro index 7f5ac0b5f..f2734742c 100644 --- a/preview/pages/lightbox.astro +++ b/preview/pages/lightbox.astro @@ -13,7 +13,7 @@ const filteredPhotos = photos.filter((photo) => photo.horizontal) { filteredPhotos.map((photo) => (
- +
diff --git a/preview/pages/navigation.astro b/preview/pages/navigation.astro index 07ab6e787..bee62036c 100644 --- a/preview/pages/navigation.astro +++ b/preview/pages/navigation.astro @@ -9,31 +9,31 @@ import DocsLink from '@ui/DocsLink.astro'
- +
- +
- +
- +
- +
- +
- +
diff --git a/preview/pages/photogrid.astro b/preview/pages/photogrid.astro index d24a18d8d..fbe065268 100644 --- a/preview/pages/photogrid.astro +++ b/preview/pages/photogrid.astro @@ -13,41 +13,41 @@ const photoAt = (i: number) => requireIndex(photosData, i)
- +
- +
- +
- +
- +
- +
- +
@@ -58,39 +58,39 @@ const photoAt = (i: number) => requireIndex(photosData, i)
- +
- +
- +
- +
- +
- +
- +
diff --git a/shared/components/cards/Card.astro b/shared/components/cards/Card.astro index 277f333f1..2d58464b0 100644 --- a/shared/components/cards/Card.astro +++ b/shared/components/cards/Card.astro @@ -108,7 +108,7 @@ const imgBottomPhoto = requireIndex(photos as { file: string; title: string }[],
  • - +
    • diff --git a/shared/components/cards/DevelopmentActivity.astro b/shared/components/cards/DevelopmentActivity.astro index e7b148541..58671b6f3 100644 --- a/shared/components/cards/DevelopmentActivity.astro +++ b/shared/components/cards/DevelopmentActivity.astro @@ -24,7 +24,7 @@ const rows = (commits as Commit[]).slice(0, 5) Development activity
    -
    +
    diff --git a/shared/components/cards/GalleryPhoto.astro b/shared/components/cards/GalleryPhoto.astro index 8af1c5301..8d7211d83 100644 --- a/shared/components/cards/GalleryPhoto.astro +++ b/shared/components/cards/GalleryPhoto.astro @@ -5,6 +5,7 @@ import Icon from '@ui/Icon.astro' import { randomNumber, timeagoLabel } from '@shared/lib/pseudo-random' interface Photo { + title: string file: string [key: string]: unknown } @@ -29,7 +30,7 @@ const heartClass = (index > 2 && index < 9) || index === 10 ? 'icon-filled text- ---
    - + {photo.title}
    diff --git a/shared/components/cards/SignInCard.astro b/shared/components/cards/SignInCard.astro index 2cb7b7fe8..d7b4fea2b 100644 --- a/shared/components/cards/SignInCard.astro +++ b/shared/components/cards/SignInCard.astro @@ -16,10 +16,10 @@ import SignInForm from './SignInForm.astro'
    -
    -
    diff --git a/shared/components/cards/SocialTraffic.astro b/shared/components/cards/SocialTraffic.astro index cad463a6f..365d2c07d 100644 --- a/shared/components/cards/SocialTraffic.astro +++ b/shared/components/cards/SocialTraffic.astro @@ -26,7 +26,7 @@ const services = 'Instagram:3550,Twitter:1798,Facebook:1245,TikTok:986,Pinterest {service.name} {formatNumber(service.visitors)} -
    +
    diff --git a/shared/components/cards/Sponsor.astro b/shared/components/cards/Sponsor.astro index aa929f725..31e68e85e 100644 --- a/shared/components/cards/Sponsor.astro +++ b/shared/components/cards/Sponsor.astro @@ -10,7 +10,7 @@ const { rtl = false } = Astro.props --- - + Help Tabler Grow and Thrive

    Sponsor Tabler and help us make a difference!

    - +
    diff --git a/shared/components/cards/TopDeals.astro b/shared/components/cards/TopDeals.astro index 80d4b65a3..d13f79636 100644 --- a/shared/components/cards/TopDeals.astro +++ b/shared/components/cards/TopDeals.astro @@ -56,7 +56,7 @@ const deals = crmDashboard.top_deals - diff --git a/shared/components/cards/UsersList.astro b/shared/components/cards/UsersList.astro index 97ea9e7c0..5ff4141b1 100644 --- a/shared/components/cards/UsersList.astro +++ b/shared/components/cards/UsersList.astro @@ -72,7 +72,7 @@ const rows = people.slice(offset, offset + limit).map((person, idx) => {
    {hoverable && (
    - +
    diff --git a/shared/components/cards/UsersList2.astro b/shared/components/cards/UsersList2.astro index 39533b901..98e5c2f5e 100644 --- a/shared/components/cards/UsersList2.astro +++ b/shared/components/cards/UsersList2.astro @@ -40,7 +40,7 @@ const rows = people.slice(offset, offset + limit).map((person, idx) => { rows.map((row) => (
    - +
    diff --git a/shared/components/cards/music/TracksList.astro b/shared/components/cards/music/TracksList.astro index 89ab4d7f2..bd03b11bb 100644 --- a/shared/components/cards/music/TracksList.astro +++ b/shared/components/cards/music/TracksList.astro @@ -27,7 +27,7 @@ const items = tracks.slice(0, 12)
    {millisecondsToMinutes(track.duration_ms)}
    -
    - + diff --git a/shared/components/demo/MapVector.astro b/shared/components/demo/MapVector.astro index 88db1f1b0..aed8de681 100644 --- a/shared/components/demo/MapVector.astro +++ b/shared/components/demo/MapVector.astro @@ -129,6 +129,9 @@ const mapOptions = data function initMapVector() { const container = document.querySelector(mapSelector); + if (!container) { + return; + } // jsVectorMap computes its initial scale from the container's layout // size. If the container is still 0x0 (e.g. layout hasn't settled diff --git a/shared/components/demo/Timeline.astro b/shared/components/demo/Timeline.astro index fa09caa87..56bd6f85f 100644 --- a/shared/components/demo/Timeline.astro +++ b/shared/components/demo/Timeline.astro @@ -19,7 +19,7 @@ const timelinePhoto = (i: number) => requireIndex(timelinePhotos, i)
    • -
      +
      10 hrs ago
      @@ -49,7 +49,7 @@ const timelinePhoto = (i: number) => requireIndex(timelinePhotos, i)
    • -
      +
      1 day ago
      diff --git a/shared/components/forms/FormElements5.astro b/shared/components/forms/FormElements5.astro index 92ba5cfb3..e9a10d3ed 100644 --- a/shared/components/forms/FormElements5.astro +++ b/shared/components/forms/FormElements5.astro @@ -137,9 +137,9 @@ import FormGroup from '@ui/FormGroup.astro'
      @@ -147,9 +147,9 @@ import FormGroup from '@ui/FormGroup.astro'
      @@ -157,9 +157,9 @@ import FormGroup from '@ui/FormGroup.astro'
    diff --git a/shared/components/marketing/sections/Features.astro b/shared/components/marketing/sections/Features.astro index fd92ff196..f42f91703 100644 --- a/shared/components/marketing/sections/Features.astro +++ b/shared/components/marketing/sections/Features.astro @@ -12,7 +12,7 @@ const sectionClass = ['section', className]
    -
    +

    Mobile-optimized

    diff --git a/shared/components/navbar/Navbar.astro b/shared/components/navbar/Navbar.astro index c04298093..98970ceef 100644 --- a/shared/components/navbar/Navbar.astro +++ b/shared/components/navbar/Navbar.astro @@ -31,6 +31,8 @@ interface Props { backgroundColor?: string; /** extra classes on the header */ class?: string | undefined; + /** id of the collapsible menu; pass a unique one when a page renders several navbars */ + menuId?: string; } // When a page passes no pageMenu, nothing in the menu is active. @@ -53,6 +55,7 @@ const { background, backgroundColor, class: className, + menuId = 'navbar-menu', } = Astro.props; const breakpoint = 'md'; @@ -76,7 +79,7 @@ const headerClass = [ data-bs-theme={dark ? 'dark' : undefined} >
    - + { !hideBrand && ( @@ -106,7 +109,7 @@ const headerClass = [ { condensed && ( -