Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-28 12:56:24 +04:00
Code Issues Projects Releases Wiki Activity

Add screenshots package and fix card-gradient minify bug (#2793)

Browse Source 
Co-authored-by: Bartek <xbartoszdobija@gmail.com>
This commit is contained in:
Paweł Kuna
2026-08-07 00:48:28 +02:00
committed by GitHub
co-authored by Bartek
parent cd0b210a87
commit b38cd32d07
82 changed files with 1698 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
shared/components/cards/AuthenticateAccount.astro
+72
View File
@@ -0,0 +1,72 @@
---
import FormFooter from '@ui/FormFooter.astro'
import Button from '@ui/Button.astro'
import ButtonList from '@ui/ButtonList.astro'
import CaptureScript from '../CaptureScript.astro'
---
<form class="card card-md" action="#" method="get" autocomplete="off" novalidate>
<div class="card-body">
<h2 class="card-title card-title-lg text-center mb-4">Authenticate Your Account</h2>
<p class="my-4 text-center">
Please confirm your account by entering the authorization code sent to <strong>+1 856-672-8552</strong>.
</p>
<div class="my-5">
<div class="row g-4">
{
Array.from({ length: 2 }).map(() => (
<div class="col">
<div class="row g-2">
{Array.from({ length: 3 }).map(() => (
<div class="col">
<input type="text" class="form-control form-control-lg text-center px-3 py-3" maxlength="1" inputmode="numeric" pattern="[0-9]*" data-code-input />
</div>
))}
</div>
</div>
))
}
</div>
</div>
<div class="my-4">
<label class="form-check">
<input type="checkbox" class="form-check-input" />
Don't ask for codes again on this device
</label>
</div>
<FormFooter>
<ButtonList class="flex-nowrap">
<Button text="Cancel" block href="#" />
<Button text="Verify" block color="primary" />
</ButtonList>
</FormFooter>
</div>
</form>
<CaptureScript>
<!-- BEGIN CODE INPUT SCRIPT -->
<script is:inline>
const inputs = document.querySelectorAll('[data-code-input]')
inputs.forEach((input, i) => {
input.addEventListener('input', (e) => {
const target = e.target
if (target.value.length === target.maxLength && i + 1 < inputs.length) {
inputs[i + 1].focus()
}
})
input.addEventListener('keydown', (e) => {
const target = e.target
if (target.value.length === 0 && e.key === 'Backspace' && i > 0) {
inputs[i - 1].focus()
}
})
})
</script>
<!-- END CODE INPUT SCRIPT -->
</CaptureScript>
shared/components/cards/CarouselCard.astro
+1
View File
@@ -2,6 +2,7 @@
// Photos filtered to horizontal=true, then sliced by offset/limit.
import photos from '@data/photos.json'
import CardTitle from '@ui/CardTitle.astro'
import Carousel from '@ui/Carousel.astro'
interface Props {
id?: string
shared/components/cards/StatusMonitoring.astro
+72
View File
@@ -0,0 +1,72 @@
---
import Subheader from '@ui/Subheader.astro'
import Trending from '@ui/Trending.astro'
interface TrackingItem {
status?: 'success' | 'warning' | 'danger'
label: string
}
// Mirrors the uptime history shown in docs/pages/ui/components/tracking.mdx.
const uptime: TrackingItem[] = [
{ status: 'success', label: 'Operational' },
{ status: 'success', label: 'Operational' },
{ status: 'success', label: 'Operational' },
{ status: 'success', label: 'Operational' },
{ status: 'danger', label: 'Downtime' },
{ status: 'success', label: 'Operational' },
{ status: 'success', label: 'Operational' },
{ status: 'success', label: 'Operational' },
{ status: 'success', label: 'Operational' },
{ status: 'success', label: 'Operational' },
{ status: 'success', label: 'Operational' },
{ status: 'success', label: 'Operational' },
{ status: 'success', label: 'Operational' },
{ status: 'warning', label: 'Big load' },
{ status: 'success', label: 'Operational' },
{ status: 'success', label: 'Operational' },
{ status: 'success', label: 'Operational' },
{ status: 'danger', label: 'Downtime' },
{ status: 'success', label: 'Operational' },
{ status: 'success', label: 'Operational' },
{ status: 'success', label: 'Operational' },
{ label: 'No data' },
{ label: 'No data' },
{ status: 'success', label: 'Operational' },
{ status: 'success', label: 'Operational' },
{ status: 'success', label: 'Operational' },
{ status: 'success', label: 'Operational' },
{ status: 'success', label: 'Operational' },
{ status: 'success', label: 'Operational' },
{ status: 'success', label: 'Operational' },
]
---
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center">
<Subheader>Status monitoring</Subheader>
<div class="ms-auto lh-1">
<div class="dropdown">
<a class="dropdown-toggle text-secondary" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Current month </a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item active" href="#">Current month</a>
<a class="dropdown-item" href="#">Last month</a>
<a class="dropdown-item" href="#">Last 3 months</a>
</div>
</div>
</div>
</div>
<div class="d-flex align-items-baseline">
<div class="h1 mb-3 me-2">99.5%</div>
<div class="me-auto">
<Trending value={2} />
</div>
</div>
<div class="mt-2">
<div class="tracking">
{uptime.map((item) => <div class:list={['tracking-block', item.status && `bg-${item.status}`]} data-bs-toggle="tooltip" data-bs-placement="top" title={item.label} />)}
</div>
</div>
</div>
</div>
shared/components/cards/charts/ConversionRate.astro
+24
View File
@@ -0,0 +1,24 @@
---
import Subheader from '@ui/Subheader.astro'
import DropdownDays from '@ui/DropdownDays.astro'
import Trending from '@ui/Trending.astro'
import Progress from '@ui/Progress.astro'
---
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center">
<Subheader>Conversion rate</Subheader>
<div class="ms-auto lh-1">
<DropdownDays id="conversion-rate" label="Select time range for conversion rate" />
</div>
</div>
<div class="d-flex align-items-baseline">
<div class="h1 mb-3 me-2">42.8%</div>
<div class="me-auto">
<Trending value={5} />
</div>
</div>
<Progress value={43} color="primary" size="sm" />
</div>
</div>
shared/components/cards/charts/CryptoPrice.astro
+11
View File
@@ -0,0 +1,11 @@
---
import Subheader from '@ui/Subheader.astro'
import Chart from '@ui/Chart.astro'
---
<div class="card">
<div class="card-body">
<Subheader>LTC/BTC</Subheader>
<Chart chartId="dashboard-crypto-candlestick" height={12} label="LTC/BTC" />
</div>
</div>
shared/components/cards/charts/SalesOverview.astro
+26
View File
@@ -0,0 +1,26 @@
---
import Subheader from '@ui/Subheader.astro'
import Chart from '@ui/Chart.astro'
import Legend from '@ui/Legend.astro'
---
<div class="card">
<div class="card-body">
<div class="d-flex align-items-start justify-content-between gap-3 mb-2">
<div class="mb-3">
<Subheader>Sales overview</Subheader>
<div class="d-flex align-items-baseline gap-2 mt-1">
<div class="h1 mb-0">$284,300</div>
<div class="text-green fw-medium">+12.4%</div>
</div>
</div>
<div class="d-flex align-items-center gap-3">
<Legend color="primary">This year</Legend>
<Legend color="secondary">Last year</Legend>
</div>
</div>
<Chart chartId="sales-overview" height={15} label="Sales overview" />
</div>
</div>
shared/components/cards/charts/TrafficSources.astro
+11
View File
@@ -0,0 +1,11 @@
---
import Subheader from '@ui/Subheader.astro'
import Chart from '@ui/Chart.astro'
---
<div class="card">
<div class="card-body">
<Subheader>Traffic sources</Subheader>
<Chart chartId="traffic-sources-donut" height={12} label="Traffic sources" />
</div>
</div>
shared/components/cards/charts/WeeklyActivity.astro
+11
View File
@@ -0,0 +1,11 @@
---
import Subheader from '@ui/Subheader.astro'
import Chart from '@ui/Chart.astro'
---
<div class="card">
<div class="card-body">
<Subheader>Weekly activity</Subheader>
<Chart chartId="activity-heatmap" height={12} label="Weekly activity" />
</div>
</div>
shared/components/marketing/MarketingNavbar.astro
+2 -2
View File
@@ -1,7 +1,7 @@
---
// "active" is hardcoded on Home — not derived from the current page.
// Relative base is "../" for one-level-deep marketing pages.
import NavbarLogo from '../navbar/NavbarLogo.astro'
import Logo from '../navbar/Logo.astro'
const base = '..'
---
@@ -9,7 +9,7 @@ const base = '..'
<!-- BEGIN MARKETING NAVBAR -->
<header class="navbar navbar-expand-lg navbar-transparent py-3">
<div class="container">
<NavbarLogo href={base} />
<Logo href={base} />
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle primary navigation">
<span class="navbar-toggler-icon"></span>
</button>
shared/components/marketing/hero/Side.astro
+15 -16
View File
@@ -1,6 +1,7 @@
---
import Icon from '@ui/Icon.astro'
import Illustration from '@ui/Illustration.astro'
import Carousel from '@ui/Carousel.astro'
import CaptureScript from '../../CaptureScript.astro'
const strings = ['more effective', 'more efficient', 'more productive']
@@ -27,27 +28,25 @@ const typedId = 'typed'
</div>
<div class="col-md-6">
<div class="hero-img-side">
<div id="carousel-controls" class="carousel slide" data-bs-ride="carousel" data-interval="4000">
<div class="carousel-inner">
<div class="carousel-item active">
<Illustration image="boy-with-key.svg" class="d-block mx-auto" height="350" />
</div>
<div class="carousel-item">
<Illustration image="boy-girl.svg" class="d-block mx-auto" height="350" />
</div>
<div class="carousel-item">
<Illustration image="computer-fix.svg" class="d-block mx-auto" height="350" />
</div>
<Carousel id="carousel-controls" slideCount={3} interval={4000}>
<div class="carousel-item active">
<Illustration image="boy-with-key.svg" class="d-block mx-auto" height="350" />
</div>
<button type="button" class="carousel-control-prev text-secondary" data-bs-target="#carousel-controls" data-bs-slide="prev">
<div class="carousel-item">
<Illustration image="boy-girl.svg" class="d-block mx-auto" height="350" />
</div>
<div class="carousel-item">
<Illustration image="computer-fix.svg" class="d-block mx-auto" height="350" />
</div>
<a slot="controls" class="carousel-control-prev text-secondary" href="#carousel-controls" role="button" data-bs-slide="prev">
<Icon name="chevron-left" class="icon-md" />
<span class="visually-hidden">Previous</span>
</button>
<button type="button" class="carousel-control-next text-secondary" data-bs-target="#carousel-controls" data-bs-slide="next">
</a>
<a slot="controls" class="carousel-control-next text-secondary" href="#carousel-controls" role="button" data-bs-slide="next">
<Icon name="chevron-right" class="icon-md" />
<span class="visually-hidden">Next</span>
</button>
</div>
</a>
</Carousel>
</div>
</div>
</div>
shared/components/navbar/NavbarLogo.astro → shared/components/navbar/Logo.astro
+6 -4
View File
@@ -9,18 +9,20 @@ interface Props {
smallLogo?: boolean
hideLogo?: boolean
showTitle?: boolean
/** neutral gray mark + text instead of the live brand color (e.g. screenshot watermarks) */
gray?: boolean
}
const { href = '.', class: className, header = false, smallLogo = false, hideLogo = false, showTitle = false } = Astro.props
const { href = '.', class: className, header = false, smallLogo = false, hideLogo = false, showTitle = false, gray = false } = Astro.props
const brandClasses = ['navbar-brand navbar-brand-autodark', className]
const brandClasses = ['navbar-brand navbar-brand-autodark', gray && 'navbar-brand-gray', className]
const logoClass = `navbar-brand-image${showTitle ? ' me-3' : ''}`
const logoMark =
'<path d="M64.6 16.2C63 9.9 58.1 5 51.8 3.4 40 1.5 28 1.5 16.2 3.4 9.9 5 5 9.9 3.4 16.2 1.5 28 1.5 40 3.4 51.8 5 58.1 9.9 63 16.2 64.6c11.8 1.9 23.8 1.9 35.6 0C58.1 63 63 58.1 64.6 51.8c1.9-11.8 1.9-23.8 0-35.6zM33.3 36.3c-2.8 4.4-6.6 8.2-11.1 11-1.5.9-3.3.9-4.8.1s-2.4-2.3-2.5-4c0-1.7.9-3.3 2.4-4.1 2.3-1.4 4.4-3.2 6.1-5.3-1.8-2.1-3.8-3.8-6.1-5.3-2.3-1.3-3-4.2-1.7-6.4s4.3-2.9 6.5-1.6c4.5 2.8 8.2 6.5 11.1 10.9 1 1.4 1 3.3.1 4.7zM49.2 46H37.8c-2.1 0-3.8-1-3.8-3s1.7-3 3.8-3h11.4c2.1 0 3.8 1 3.8 3s-1.7 3-3.8 3z" fill="#066fd1" style="fill: var(--tblr-primary, #066fd1)" />'
'<path d="M64.6 16.2C63 9.9 58.1 5 51.8 3.4 40 1.5 28 1.5 16.2 3.4 9.9 5 5 9.9 3.4 16.2 1.5 28 1.5 40 3.4 51.8 5 58.1 9.9 63 16.2 64.6c11.8 1.9 23.8 1.9 35.6 0C58.1 63 63 58.1 64.6 51.8c1.9-11.8 1.9-23.8 0-35.6zM33.3 36.3c-2.8 4.4-6.6 8.2-11.1 11-1.5.9-3.3.9-4.8.1s-2.4-2.3-2.5-4c0-1.7.9-3.3 2.4-4.1 2.3-1.4 4.4-3.2 6.1-5.3-1.8-2.1-3.8-3.8-6.1-5.3-2.3-1.3-3-4.2-1.7-6.4s4.3-2.9 6.5-1.6c4.5 2.8 8.2 6.5 11.1 10.9 1 1.4 1 3.3.1 4.7zM49.2 46H37.8c-2.1 0-3.8-1-3.8-3s1.7-3 3.8-3h11.4c2.1 0 3.8 1 3.8 3s-1.7 3-3.8 3z" fill="#066fd1" style="fill: var(--tblr-navbar-logo-color, var(--tblr-primary, #066fd1))" />'
const logoText =
'<path d="M105.8 46.1c.4 0 .9.2 1.2.6s.6 1 .6 1.7c0 .9-.5 1.6-1.4 2.2s-2 .9-3.2.9c-2 0-3.7-.4-5-1.3s-2-2.6-2-5.4V31.6h-2.2c-.8 0-1.4-.3-1.9-.8s-.9-1.1-.9-1.9c0-.7.3-1.4.8-1.8s1.2-.7 1.9-.7h2.2v-3.1c0-.8.3-1.5.8-2.1s1.3-.8 2.1-.8 1.5.3 2 .8.8 1.3.8 2.1v3.1h3.4c.8 0 1.4.3 1.9.8s.8 1.2.8 1.9-.3 1.4-.8 1.8-1.2.7-1.9.7h-3.4v13c0 .7.2 1.2.5 1.5s.8.5 1.4.5c.3 0 .6-.1 1.1-.2.5-.2.8-.3 1.2-.3zm28-20.7c.8 0 1.5.3 2.1.8.5.5.8 1.2.8 2.1v20.3c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2-.8-.8-1.2-.8-2.1c-.8.9-1.9 1.7-3.2 2.4-1.3.7-2.8 1-4.3 1-2.2 0-4.2-.6-6-1.7-1.8-1.1-3.2-2.7-4.2-4.7s-1.6-4.3-1.6-6.9c0-2.6.5-4.9 1.5-6.9s2.4-3.6 4.2-4.8c1.8-1.1 3.7-1.7 5.9-1.7 1.5 0 3 .3 4.3.8 1.3.6 2.5 1.3 3.4 2.1 0-.8.3-1.5.8-2.1.5-.5 1.2-.7 2-.7zm-9.7 21.3c2.1 0 3.8-.8 5.1-2.3s2-3.4 2-5.7-.7-4.2-2-5.8c-1.3-1.5-3-2.3-5.1-2.3-2 0-3.7.8-5 2.3-1.3 1.5-2 3.5-2 5.8s.6 4.2 1.9 5.7 3 2.3 5.1 2.3zm32.1-21.3c2.2 0 4.2.6 6 1.7 1.8 1.1 3.2 2.7 4.2 4.7s1.6 4.3 1.6 6.9-.5 4.9-1.5 6.9-2.4 3.6-4.2 4.8c-1.8 1.1-3.7 1.7-5.9 1.7-1.5 0-3-.3-4.3-.9s-2.5-1.4-3.4-2.3v.3c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2.1-.8c-.5-.5-.8-1.2-.8-2.1V18.9c0-.8.3-1.5.8-2.1.5-.6 1.2-.8 2.1-.8s1.5.3 2.1.8c.5.6.8 1.3.8 2.1v10c.8-1 1.8-1.8 3.2-2.5 1.3-.7 2.8-1 4.3-1zm-.7 21.3c2 0 3.7-.8 5-2.3s2-3.5 2-5.8-.6-4.2-1.9-5.7-3-2.3-5.1-2.3-3.8.8-5.1 2.3-2 3.4-2 5.7.7 4.2 2 5.8c1.3 1.6 3 2.3 5.1 2.3zm23.6 1.9c0 .8-.3 1.5-.8 2.1s-1.3.8-2.1.8-1.5-.3-2-.8-.8-1.3-.8-2.1V18.9c0-.8.3-1.5.8-2.1s1.3-.8 2.1-.8 1.5.3 2 .8.8 1.3.8 2.1v29.7zm29.3-10.5c0 .8-.3 1.4-.9 1.9-.6.5-1.2.7-2 .7h-15.8c.4 1.9 1.3 3.4 2.6 4.4 1.4 1.1 2.9 1.6 4.7 1.6 1.3 0 2.3-.1 3.1-.4.7-.2 1.3-.5 1.8-.8.4-.3.7-.5.9-.6.6-.3 1.1-.4 1.6-.4.7 0 1.2.2 1.7.7s.7 1 .7 1.7c0 .9-.4 1.6-1.3 2.4-.9.7-2.1 1.4-3.6 1.9s-3 .8-4.6.8c-2.7 0-5-.6-7-1.7s-3.5-2.7-4.6-4.6-1.6-4.2-1.6-6.6c0-2.8.6-5.2 1.7-7.2s2.7-3.7 4.6-4.8 3.9-1.7 6-1.7 4.1.6 6 1.7 3.4 2.7 4.5 4.7c.9 1.9 1.5 4.1 1.5 6.3zm-12.2-7.5c-3.7 0-5.9 1.7-6.6 5.2h12.6v-.3c-.1-1.3-.8-2.5-2-3.5s-2.5-1.4-4-1.4zm30.3-5.2c1 0 1.8.3 2.4.8.7.5 1 1.2 1 1.9 0 1-.3 1.7-.8 2.2-.5.5-1.1.8-1.8.7-.5 0-1-.1-1.6-.3-.2-.1-.4-.1-.6-.2-.4-.1-.7-.1-1.1-.1-.8 0-1.6.3-2.4.8s-1.4 1.3-1.9 2.3-.7 2.3-.7 3.7v11.4c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2.1-.8c-.5-.6-.8-1.3-.8-2.1V28.8c0-.8.3-1.5.8-2.1.5-.6 1.2-.8 2.1-.8s1.5.3 2.1.8c.5.6.8 1.3.8 2.1v.6c.7-1.3 1.8-2.3 3.2-3 1.3-.7 2.8-1 4.3-1z" fill-rule="evenodd" clip-rule="evenodd" fill="#4a4a4a"/>'
'<path d="M105.8 46.1c.4 0 .9.2 1.2.6s.6 1 .6 1.7c0 .9-.5 1.6-1.4 2.2s-2 .9-3.2.9c-2 0-3.7-.4-5-1.3s-2-2.6-2-5.4V31.6h-2.2c-.8 0-1.4-.3-1.9-.8s-.9-1.1-.9-1.9c0-.7.3-1.4.8-1.8s1.2-.7 1.9-.7h2.2v-3.1c0-.8.3-1.5.8-2.1s1.3-.8 2.1-.8 1.5.3 2 .8.8 1.3.8 2.1v3.1h3.4c.8 0 1.4.3 1.9.8s.8 1.2.8 1.9-.3 1.4-.8 1.8-1.2.7-1.9.7h-3.4v13c0 .7.2 1.2.5 1.5s.8.5 1.4.5c.3 0 .6-.1 1.1-.2.5-.2.8-.3 1.2-.3zm28-20.7c.8 0 1.5.3 2.1.8.5.5.8 1.2.8 2.1v20.3c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2-.8-.8-1.2-.8-2.1c-.8.9-1.9 1.7-3.2 2.4-1.3.7-2.8 1-4.3 1-2.2 0-4.2-.6-6-1.7-1.8-1.1-3.2-2.7-4.2-4.7s-1.6-4.3-1.6-6.9c0-2.6.5-4.9 1.5-6.9s2.4-3.6 4.2-4.8c1.8-1.1 3.7-1.7 5.9-1.7 1.5 0 3 .3 4.3.8 1.3.6 2.5 1.3 3.4 2.1 0-.8.3-1.5.8-2.1.5-.5 1.2-.7 2-.7zm-9.7 21.3c2.1 0 3.8-.8 5.1-2.3s2-3.4 2-5.7-.7-4.2-2-5.8c-1.3-1.5-3-2.3-5.1-2.3-2 0-3.7.8-5 2.3-1.3 1.5-2 3.5-2 5.8s.6 4.2 1.9 5.7 3 2.3 5.1 2.3zm32.1-21.3c2.2 0 4.2.6 6 1.7 1.8 1.1 3.2 2.7 4.2 4.7s1.6 4.3 1.6 6.9-.5 4.9-1.5 6.9-2.4 3.6-4.2 4.8c-1.8 1.1-3.7 1.7-5.9 1.7-1.5 0-3-.3-4.3-.9s-2.5-1.4-3.4-2.3v.3c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2.1-.8c-.5-.5-.8-1.2-.8-2.1V18.9c0-.8.3-1.5.8-2.1.5-.6 1.2-.8 2.1-.8s1.5.3 2.1.8c.5.6.8 1.3.8 2.1v10c.8-1 1.8-1.8 3.2-2.5 1.3-.7 2.8-1 4.3-1zm-.7 21.3c2 0 3.7-.8 5-2.3s2-3.5 2-5.8-.6-4.2-1.9-5.7-3-2.3-5.1-2.3-3.8.8-5.1 2.3-2 3.4-2 5.7.7 4.2 2 5.8c1.3 1.6 3 2.3 5.1 2.3zm23.6 1.9c0 .8-.3 1.5-.8 2.1s-1.3.8-2.1.8-1.5-.3-2-.8-.8-1.3-.8-2.1V18.9c0-.8.3-1.5.8-2.1s1.3-.8 2.1-.8 1.5.3 2 .8.8 1.3.8 2.1v29.7zm29.3-10.5c0 .8-.3 1.4-.9 1.9-.6.5-1.2.7-2 .7h-15.8c.4 1.9 1.3 3.4 2.6 4.4 1.4 1.1 2.9 1.6 4.7 1.6 1.3 0 2.3-.1 3.1-.4.7-.2 1.3-.5 1.8-.8.4-.3.7-.5.9-.6.6-.3 1.1-.4 1.6-.4.7 0 1.2.2 1.7.7s.7 1 .7 1.7c0 .9-.4 1.6-1.3 2.4-.9.7-2.1 1.4-3.6 1.9s-3 .8-4.6.8c-2.7 0-5-.6-7-1.7s-3.5-2.7-4.6-4.6-1.6-4.2-1.6-6.6c0-2.8.6-5.2 1.7-7.2s2.7-3.7 4.6-4.8 3.9-1.7 6-1.7 4.1.6 6 1.7 3.4 2.7 4.5 4.7c.9 1.9 1.5 4.1 1.5 6.3zm-12.2-7.5c-3.7 0-5.9 1.7-6.6 5.2h12.6v-.3c-.1-1.3-.8-2.5-2-3.5s-2.5-1.4-4-1.4zm30.3-5.2c1 0 1.8.3 2.4.8.7.5 1 1.2 1 1.9 0 1-.3 1.7-.8 2.2-.5.5-1.1.8-1.8.7-.5 0-1-.1-1.6-.3-.2-.1-.4-.1-.6-.2-.4-.1-.7-.1-1.1-.1-.8 0-1.6.3-2.4.8s-1.4 1.3-1.9 2.3-.7 2.3-.7 3.7v11.4c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2.1-.8c-.5-.6-.8-1.3-.8-2.1V28.8c0-.8.3-1.5.8-2.1.5-.6 1.2-.8 2.1-.8s1.5.3 2.1.8c.5.6.8 1.3.8 2.1v.6c.7-1.3 1.8-2.3 3.2-3 1.3-.7 2.8-1 4.3-1z" fill-rule="evenodd" clip-rule="evenodd" fill="#4a4a4a" style="fill: var(--tblr-navbar-logo-color, #4a4a4a)"/>'
const logoSvg = smallLogo ? `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 68" width="32" height="32" aria-label="${site.title}" class="${logoClass}">${logoMark}</svg>` : `<svg xmlns="http://www.w3.org/2000/svg" width="110" height="32" viewBox="0 0 232 68" class="${logoClass}">${logoMark}${logoText}</svg>`
---
shared/components/navbar/Navbar.astro
+2 -2
View File
@@ -7,7 +7,7 @@
// fluidSearch has no effect on output (search in the condensed branch is dead
// code); the prop is kept for call-site compatibility.
import Icon from '@ui/Icon.astro';
import NavbarLogo from './NavbarLogo.astro';
import Logo from './Logo.astro';
import NavbarToggler from './NavbarToggler.astro';
import NavbarSide from './NavbarSide.astro';
import NavbarMenu from './NavbarMenu.astro';
@@ -90,7 +90,7 @@ const headerClass = [
{
!hideBrand && (
<NavbarLogo
<Logo
header
class="d-none-navbar-horizontal pe-0 pe-md-3"
smallLogo={smallLogo}
shared/components/navbar/Sidebar.astro
+2 -2
View File
@@ -1,6 +1,6 @@
---
import NavbarToggler from './NavbarToggler.astro'
import NavbarLogo from './NavbarLogo.astro'
import Logo from './Logo.astro'
import NavbarSide from './NavbarSide.astro'
import NavbarMenu from './NavbarMenu.astro'
@@ -25,7 +25,7 @@ const asideClass = ['navbar navbar-vertical', end && 'navbar-end', `navbar-expan
<div class="container-fluid">
<NavbarToggler target="sidebar-menu" />
<NavbarLogo header />
<Logo header />
{/* Only the Sponsor button renders (no show-* flags). */}
<NavbarSide class="d-lg-none" breakpoint={breakpoint} />
shared/components/parts/Datagrid.astro
+34 -68
View File
@@ -3,6 +3,8 @@
import Avatar from '@ui/Avatar.astro'
import AvatarList from '@ui/AvatarList.astro'
import Icon from '@ui/Icon.astro'
import Datagrid from '@ui/Datagrid.astro'
import DatagridItem from '@ui/DatagridItem.astro'
import people from '@data/people.json'
interface Person {
@@ -14,72 +16,36 @@ interface Person {
const creator = (people as Person[])[0]
---
<div class="datagrid">
<div class="datagrid-item">
<div class="datagrid-title">Registrar</div>
<div class="datagrid-content">Third Party</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Nameservers</div>
<div class="datagrid-content">Third Party</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Port number</div>
<div class="datagrid-content">3306</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Expiration date</div>
<div class="datagrid-content">–</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Creator</div>
<div class="datagrid-content">
<div class="d-flex align-items-center">
<Avatar person={creator} size="xs" class="me-2" />
{creator.full_name}
</div>
<Datagrid>
<DatagridItem title="Registrar">Third Party</DatagridItem>
<DatagridItem title="Nameservers">Third Party</DatagridItem>
<DatagridItem title="Port number">3306</DatagridItem>
<DatagridItem title="Expiration date">–</DatagridItem>
<DatagridItem title="Creator">
<div class="d-flex align-items-center">
<Avatar person={creator} size="xs" class="me-2" />
{creator.full_name}
</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Age</div>
<div class="datagrid-content">15 days</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Edge network</div>
<div class="datagrid-content">
<span class="status status-green"> Active </span>
</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Avatars list</div>
<div class="datagrid-content">
<AvatarList stacked={true} size="xs" text="+3" />
</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Checkbox</div>
<div class="datagrid-content">
<label class="form-check">
<input class="form-check-input" type="checkbox" checked />
<span class="form-check-label">Click me</span>
</label>
</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Icon</div>
<div class="datagrid-content">
<Icon name="check" color="green" />
Checked
</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Form control</div>
<div class="datagrid-content">
<input type="text" class="form-control form-control-flush" placeholder="Input placeholder" />
</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Longer description</div>
<div class="datagrid-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>
</div>
</DatagridItem>
<DatagridItem title="Age">15 days</DatagridItem>
<DatagridItem title="Edge network">
<span class="status status-green"> Active </span>
</DatagridItem>
<DatagridItem title="Avatars list">
<AvatarList stacked={true} size="xs" text="+3" />
</DatagridItem>
<DatagridItem title="Checkbox">
<label class="form-check">
<input class="form-check-input" type="checkbox" checked />
<span class="form-check-label">Click me</span>
</label>
</DatagridItem>
<DatagridItem title="Icon">
<Icon name="check" color="green" />
Checked
</DatagridItem>
<DatagridItem title="Form control">
<input type="text" class="form-control form-control-flush" placeholder="Input placeholder" />
</DatagridItem>
<DatagridItem title="Longer description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</DatagridItem>
</Datagrid>
shared/data/charts.json
+142
View File
@@ -612,6 +612,129 @@
}
]
},
"traffic-sources-donut": {
"type": "donut",
"legend": true,
"series": [
{ "name": "Organic search", "color": "azure", "data": 38 },
{ "name": "Direct", "color": "primary", "data": 27 },
{ "name": "Social media", "color": "purple", "data": 18 },
{ "name": "Referral", "color": "orange", "data": 12 },
{ "name": "Email", "color": "green", "data": 5 }
]
},
"activity-heatmap": {
"type": "heatmap",
"color": "green",
"hide-tooltip": false,
"series": [
{
"name": "Mon",
"heatmap-data": [
{ "x": "W1", "y": 2 },
{ "x": "W2", "y": 4 },
{ "x": "W3", "y": 0 },
{ "x": "W4", "y": 6 },
{ "x": "W5", "y": 3 },
{ "x": "W6", "y": 8 },
{ "x": "W7", "y": 1 },
{ "x": "W8", "y": 5 },
{ "x": "W9", "y": 7 },
{ "x": "W10", "y": 2 }
]
},
{
"name": "Tue",
"heatmap-data": [
{ "x": "W1", "y": 5 },
{ "x": "W2", "y": 1 },
{ "x": "W3", "y": 7 },
{ "x": "W4", "y": 3 },
{ "x": "W5", "y": 9 },
{ "x": "W6", "y": 2 },
{ "x": "W7", "y": 6 },
{ "x": "W8", "y": 0 },
{ "x": "W9", "y": 4 },
{ "x": "W10", "y": 8 }
]
},
{
"name": "Wed",
"heatmap-data": [
{ "x": "W1", "y": 8 },
{ "x": "W2", "y": 6 },
{ "x": "W3", "y": 2 },
{ "x": "W4", "y": 9 },
{ "x": "W5", "y": 4 },
{ "x": "W6", "y": 1 },
{ "x": "W7", "y": 7 },
{ "x": "W8", "y": 3 },
{ "x": "W9", "y": 5 },
{ "x": "W10", "y": 0 }
]
},
{
"name": "Thu",
"heatmap-data": [
{ "x": "W1", "y": 1 },
{ "x": "W2", "y": 9 },
{ "x": "W3", "y": 4 },
{ "x": "W4", "y": 2 },
{ "x": "W5", "y": 7 },
{ "x": "W6", "y": 5 },
{ "x": "W7", "y": 0 },
{ "x": "W8", "y": 8 },
{ "x": "W9", "y": 3 },
{ "x": "W10", "y": 6 }
]
},
{
"name": "Fri",
"heatmap-data": [
{ "x": "W1", "y": 6 },
{ "x": "W2", "y": 3 },
{ "x": "W3", "y": 9 },
{ "x": "W4", "y": 1 },
{ "x": "W5", "y": 5 },
{ "x": "W6", "y": 7 },
{ "x": "W7", "y": 4 },
{ "x": "W8", "y": 2 },
{ "x": "W9", "y": 8 },
{ "x": "W10", "y": 1 }
]
},
{
"name": "Sat",
"heatmap-data": [
{ "x": "W1", "y": 0 },
{ "x": "W2", "y": 2 },
{ "x": "W3", "y": 1 },
{ "x": "W4", "y": 3 },
{ "x": "W5", "y": 0 },
{ "x": "W6", "y": 2 },
{ "x": "W7", "y": 1 },
{ "x": "W8", "y": 0 },
{ "x": "W9", "y": 2 },
{ "x": "W10", "y": 1 }
]
},
{
"name": "Sun",
"heatmap-data": [
{ "x": "W1", "y": 1 },
{ "x": "W2", "y": 0 },
{ "x": "W3", "y": 2 },
{ "x": "W4", "y": 0 },
{ "x": "W5", "y": 1 },
{ "x": "W6", "y": 3 },
{ "x": "W7", "y": 0 },
{ "x": "W8", "y": 1 },
{ "x": "W9", "y": 0 },
{ "x": "W10", "y": 2 }
]
}
]
},
"scatter": {
"demo": true,
"type": "scatter",
@@ -691,6 +814,25 @@
"categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
"y-max": 110
},
"sales-overview": {
"type": "line",
"stroke-width": [3, 2],
"stroke-dash": [0, 6],
"series": [
{
"name": "This year",
"color": "primary",
"data": [180, 195, 210, 205, 225, 240, 235, 260, 255, 270, 285, 300]
},
{
"name": "Last year",
"color": "secondary",
"data": [150, 160, 168, 172, 180, 188, 190, 200, 205, 210, 215, 225]
}
],
"categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
"y-max": 320
},
"new-clients": {
"type": "line",
"datetime": true,
shared/data/menu.json
+4
View File
@@ -231,6 +231,10 @@
"title": "Toasts",
"url": "toasts.html"
},
"tracking": {
"title": "Tracking",
"url": "tracking.html"
},
"typography": {
"title": "Typography",
"url": "typography.html"
shared/layouts/PayLayout.astro
+2 -2
View File
@@ -1,7 +1,7 @@
---
// Minimal navbar (small logo + close button) then a .page with the content.
import BaseLayout from './BaseLayout.astro'
import NavbarLogo from '@shared/components/navbar/NavbarLogo.astro'
import Logo from '@shared/components/navbar/Logo.astro'
interface Props {
title?: string
@@ -18,7 +18,7 @@ const { title, pageLibs, bodyClass } = Astro.props
<!-- BEGIN NAVBAR -->
<header class="navbar">
<div class="container-fluid">
<NavbarLogo smallLogo />
<Logo smallLogo />
<div>
<a href="." class="btn btn-close"></a>
shared/layouts/SingleLayout.astro
+2 -2
View File
@@ -1,6 +1,6 @@
---
import BaseLayout from './BaseLayout.astro'
import NavbarLogo from '@shared/components/navbar/NavbarLogo.astro'
import Logo from '@shared/components/navbar/Logo.astro'
interface Props {
title?: string
@@ -18,7 +18,7 @@ const { title, containerSize = 'tight', hideLogo } = Astro.props
{
!hideLogo && (
<div class="text-center mb-4">
<NavbarLogo />
<Logo />
</div>
)
}
shared/lib/chart-script.ts
+23 -4
View File
@@ -8,6 +8,8 @@ type Serie = {
'color'?: string
'color-opacity'?: string
'candlestick-data'?: { x: number; y: number[] }[]
/** one row of a heatmap: { x: category label, y: intensity value } per cell */
'heatmap-data'?: { x: string; y: number }[]
}
export type ChartData = {
@@ -160,6 +162,15 @@ export function chartConfig(opts: { id: string; data: ChartData; height: number
config.dataLabels = { enabled: Boolean(data.datalabels) }
}
if (type === 'heatmap') {
// Rounded cells + a hairline gap read less like a spreadsheet, more like
// a deliberate "contribution graph" grid. Single-hue intensity shading
// (light -> the series color) is ApexCharts' own default once `colors`
// is set below, so no colorScale.ranges override is needed here.
config.plotOptions = { heatmap: { radius: 3 } }
config.dataLabels = { enabled: false }
}
if (data['fill-type']) {
config.fill = {
type: data['fill-type'],
@@ -212,7 +223,7 @@ export function chartConfig(opts: { id: string; data: ChartData; height: number
} else {
config.series = series.map((s) => ({
name: s.name ?? '',
data: s['candlestick-data'] ? s['candlestick-data'].map((c) => ({ x: c.x, y: c.y })) : (s.data as number[]),
data: s['candlestick-data'] ? s['candlestick-data'].map((c) => ({ x: c.x, y: c.y })) : s['heatmap-data'] ? s['heatmap-data'].map((c) => ({ x: c.x, y: c.y })) : (s.data as number[]),
}))
}
}
@@ -223,6 +234,9 @@ export function chartConfig(opts: { id: string; data: ChartData; height: number
padding: data.sparkline ? undefined : { top: -20, right: 0, left: -4, bottom: -4 },
show: data['hide-grid'] ? false : undefined,
strokeDashArray: data['hide-grid'] ? undefined : 4,
// ApexCharts' own default (#e0e0e0) is a light-mode-only gray — near
// invisible, and wrong-toned, against a dark background.
borderColor: 'var(--tblr-border-color)',
xaxis: !data['hide-grid'] && data['show-x'] ? { lines: { show: true } } : undefined,
}
@@ -231,9 +245,11 @@ export function chartConfig(opts: { id: string; data: ChartData; height: number
config.dataLabels = { enabled: true }
}
if (data.categories || data.datetime) {
if (data.categories || data.datetime || type === 'heatmap') {
config.xaxis = {
labels: { padding: 0 },
// ApexCharts' own default label color (#373d3f) is a light-mode-only
// dark gray — low-contrast (near-invisible) against a dark background.
labels: { padding: 0, style: { colors: 'var(--tblr-secondary)' } },
tooltip: { enabled: false },
axisBorder: type === 'area' || type === 'bar' ? { show: false } : undefined,
categories: data.categories?.map(String),
@@ -243,7 +259,7 @@ export function chartConfig(opts: { id: string; data: ChartData; height: number
if (!isRound) {
config.yaxis = {
labels: { padding: 4 },
labels: { padding: 4, style: { colors: 'var(--tblr-secondary)' } },
max: data['y-max'],
title: data['y-title'] ? { text: escapeHtml(data['y-title']) } : undefined,
tooltip: data['y-tooltip'] ? { enabled: true } : undefined,
@@ -268,6 +284,9 @@ export function chartConfig(opts: { id: string; data: ChartData; height: number
offsetY: 12,
markers: { width: 10, height: 10, radius: 100 },
itemMargin: { horizontal: 8, vertical: 8 },
// Same fixed light-mode-only default (#373d3f) as the axis labels —
// near-invisible on a dark background.
labels: { colors: 'var(--tblr-secondary)' },
}
: { show: false }
shared/ui/BackgroundPattern.astro
+22
View File
@@ -0,0 +1,22 @@
---
// .bg-pattern-{type} utility (core/scss/ui/_patterns.scss) as a component;
// combine with a theme color and/or size, e.g. <BackgroundPattern pattern="dots" color="primary" size="lg" />.
interface Props {
pattern: 'diagonal' | 'diagonal-2' | 'dots' | 'rectangles' | 'lines' | 'lines-vertical' | 'grid' | 'grid-diagonal' | 'blueprint' | 'cross-dots' | 'circles' | 'diagonal-stripes' | 'diagonal-stripes-2' | 'zigzag' | 'vertical-stripes' | 'horizontal-stripes'
/** theme color the pattern ramps up to, e.g. 'primary' */
color?: string
size?: 'sm' | 'md' | 'lg' | 'xl'
/** element to render instead of div */
as?: string
class?: string
/** remaining attributes (style, data-*, …) are forwarded to the element */
[key: string]: unknown
}
const { pattern, color, size, as: Element = 'div', class: className, ...rest } = Astro.props
---
<Element class:list={[`bg-pattern-${pattern}`, color && `bg-pattern-${color}`, size && `bg-pattern-${size}`, className]} {...rest}>
<slot />
</Element>
shared/ui/Carousel.astro
+67
View File
@@ -0,0 +1,67 @@
---
// Self-contained carousel (.carousel). Default slot holds the .carousel-item elements
// (the caller marks the first one "active" — see CarouselCard.astro / hero/Side.astro);
// indicators/controls are generated from props. A "controls" slot overrides the default
// icon-span controls with custom markup (e.g. an <Icon>-based pair).
interface Props {
id?: string
/** slide count, used to generate indicator buttons */
slideCount: number
fade?: boolean
/** data-bs-interval in ms, or false to disable autoplay */
interval?: number | false
indicators?: boolean
indicatorsVariant?: 'dot' | 'thumb'
indicatorsVertical?: boolean
/** ratio ratio-4x3 on each indicator button, typically paired with indicatorsVariant="thumb" */
indicatorsThumbRatio?: boolean
/** background-image per slide, used when indicatorsVariant="thumb" */
indicatorsImages?: string[]
controls?: boolean
class?: string
/** remaining attributes forwarded to the element */
[key: string]: unknown
}
const { id, slideCount, fade, interval, indicators, indicatorsVariant, indicatorsVertical, indicatorsThumbRatio, indicatorsImages, controls, class: className, ...rest } = Astro.props
const target = id ? `#${id}` : undefined
const slideIndexes = Array.from({ length: slideCount }, (_, i) => i)
const hasCustomControls = Astro.slots.has('controls')
---
<div id={id} class:list={['carousel', 'slide', fade && 'carousel-fade', className]} data-bs-ride="carousel" data-bs-interval={interval === false ? 'false' : interval} {...rest}>
{
indicators && (
<div class:list={['carousel-indicators', indicatorsVertical && 'carousel-indicators-vertical', indicatorsVariant === 'dot' && 'carousel-indicators-dot', indicatorsVariant === 'thumb' && 'carousel-indicators-thumb']}>
{slideIndexes.map((i) => (
<button type="button" data-bs-target={target} data-bs-slide-to={i} class:list={[indicatorsThumbRatio && 'ratio ratio-4x3', i === 0 && 'active']} style={indicatorsVariant === 'thumb' && indicatorsImages?.[i] ? `background-image: url(${indicatorsImages[i]})` : undefined} />
))}
</div>
)
}
<div class="carousel-inner">
<slot />
</div>
{
hasCustomControls ? (
<slot name="controls" />
) : (
controls && (
<Fragment>
<a class="carousel-control-prev" href={target} role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true" />
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href={target} role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true" />
<span class="visually-hidden">Next</span>
</a>
</Fragment>
)
)
}
</div>
shared/ui/Chart.astro
+31
View File
@@ -50,11 +50,42 @@ const elementId = `chart-${id}`;
<script define:vars={{ chartKey, elementId, config, xFormatterExpr }}>
window.tabler_chart ??= {};
// Heatmap shades each cell by computing off the literal base color in JS
// (light -> full color-mix by value), unlike other chart types where the
// SVG `fill` attribute just holds `var(--chart-...)` and the browser paints
// it directly. A raw var()/color-mix() string can't be parsed by that color
// math, so it falls back to gray — and ApexCharts' heatmap parser only
// accepts hex, not rgb()/rgba() either. Probing a real element's computed
// `color` resolves var()/color-mix() (Chromium serializes it as a CSS Color 4
// `color(srgb ...)` string), then a 1x1 canvas round-trip converts that to hex.
function resolveCssVar(value) {
if (typeof value !== 'string' || !value.includes('var(')) return value;
const probe = document.createElement('span');
probe.style.cssText = 'position:absolute;visibility:hidden';
probe.style.color = value;
document.body.appendChild(probe);
const resolved = getComputedStyle(probe).color;
probe.remove();
if (!resolved) return value;
const canvas = document.createElement('canvas');
canvas.width = canvas.height = 1;
const ctx = canvas.getContext('2d');
ctx.fillStyle = resolved;
ctx.fillRect(0, 0, 1, 1);
const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
return `#${[r, g, b].map((c) => c.toString(16).padStart(2, '0')).join('')}`;
}
function initChart() {
if (xFormatterExpr && config.xaxis?.labels) {
config.xaxis.labels.formatter = new Function('val', `return (${xFormatterExpr})`);
}
if (config.chart?.type === 'heatmap' && Array.isArray(config.colors)) {
config.colors = config.colors.map(resolveCssVar);
}
window.ApexCharts &&
(window.tabler_chart[chartKey] = new ApexCharts(document.getElementById(elementId), config)).render();
}
shared/ui/Datagrid.astro
+13
View File
@@ -0,0 +1,13 @@
---
// Data grid container (.datagrid); holds DatagridItem children.
interface Props {
class?: string
}
const { class: className } = Astro.props
---
<div class:list={['datagrid', className]}>
<slot />
</div>
shared/ui/DatagridItem.astro
+17
View File
@@ -0,0 +1,17 @@
---
// A single label/value pair (.datagrid-item); slot renders the value.
interface Props {
title: string
class?: string
}
const { title, class: className } = Astro.props
---
<div class:list={['datagrid-item', className]}>
<div class="datagrid-title">{title}</div>
<div class="datagrid-content">
<slot />
</div>
</div>
shared/ui/Legend.astro
+15
View File
@@ -0,0 +1,15 @@
---
// A single legend item: a colored .legend dot + label, e.g. the "This year" /
// "Last year" chart legend in SalesOverview.astro.
interface Props {
color?: string
class?: string
}
const { color = 'primary', class: className } = Astro.props
---
<div class:list={['d-flex align-items-center gap-2', className]}>
<span class={`legend bg-${color}`}></span>
<span class="text-secondary"><slot /></span>
</div>
shared/ui/ScaleLegend.astro
+24
View File
@@ -0,0 +1,24 @@
---
// "Less -> More" gradient legend, e.g. for a choropleth map's color scale.
interface Props {
/** number of swatches */
steps?: number
/** theme color the swatches ramp up to, e.g. 'primary' */
color?: string
minLabel?: string
maxLabel?: string
class?: string
}
const { steps = 10, color = 'primary', minLabel = 'Less', maxLabel = 'More', class: className } = Astro.props
const items = Array.from({ length: steps }, (_, i) => i + 1)
---
<div class:list={['d-flex align-items-center gap-2', className]}>
<div class="text-secondary">{minLabel}</div>
<div class="d-flex gap-1">
{items.map((step) => <span class="legend" style={`background: color-mix(in srgb, transparent, var(--tblr-${color}) ${(step / steps) * 100}%);`} />)}
</div>
<div class="text-secondary">{maxLabel}</div>
</div>