@santi020k/lumen-astro 0.2.0 → 0.4.0

package/README.md

@@ -18,6 +18,10 @@ enhances all matching Lumen markup on the page.
 @import "@santi020k/lumen-astro/styles.css";
 ```
 
+The stylesheet defaults `--ui-font` to `"Montserrat", "Avenir Next", "Segoe UI", sans-serif`.
+It declares the family stack but does not bundle or load font files. Load Montserrat once through
+your preferred delivery path, or override `--ui-font` in application CSS.
+
 With Tailwind, keep the Lumen import in the same shared CSS entry:
 
 ```css
@@ -61,10 +65,75 @@ import { Button, Icon } from '@santi020k/lumen-astro'
 <Icon name="search" label="Search" />
 ```
 
+## Long-form navigation
+
+`Anchor` accepts an optional heading `depth` so article tables of contents can preserve their
+hierarchy. `ScrollProgress` derives reading progress from the document and pins the indicator to
+the top or bottom viewport edge. Both use the single root `UIPrimitives` runtime.
+
+```astro
+---
+import { Anchor, ScrollProgress } from '@santi020k/lumen-astro'
+---
+
+<ScrollProgress aria-label="Article reading progress" />
+<Anchor items={[
+  { depth: 2, href: '#install', label: 'Install' },
+  { depth: 3, href: '#astro', label: 'Astro' }
+]} />
+```
+
+## Data visualization
+
+Use `Sparkline` beside a metric, `BarChart` for categorical comparison, `LineChart` for ordered
+trends, and `PieChart` for a small part-to-whole breakdown. The chart components accept
+already-aggregated series, use Lumen data-color tokens, and include a revealable semantic data
+table by default.
+
+```astro
+---
+import { LineChart } from '@santi020k/lumen-astro'
+
+const series = [{
+  id: 'views',
+  label: 'Views',
+  data: [{ x: 'Mon', y: 42 }, { x: 'Tue', y: 68 }]
+}]
+---
+
+<LineChart aria-label="Views by day" heading="Website traffic" {series} />
+```
+
+`PieChart` accepts one `LumenChartSeries`; its data points become slices. It defaults to
+`variant="donut"` and also supports `variant="pie"`.
+
 Lucide intentionally excludes brand marks. For GitHub and other project-specific icons, put the
 SVG in the default slot instead of passing an unsupported `name`; Astro warns about unknown named
 icons during development.
 
+## Code tabs
+
+Use `CodeTabs` for related install commands, language variants, or configuration examples. Each
+item supplies a stable value, visible label, code string, and optional language. A shared
+`storageKey` keeps matching instances synchronized and remembers the reader's selection.
+
+```astro
+---
+import { CodeTabs } from '@santi020k/lumen-astro'
+
+const installCommands = [
+  { value: 'pnpm', label: 'pnpm', code: 'pnpm add @santi020k/lumen-astro', language: 'bash' },
+  { value: 'npm', label: 'npm', code: 'npm install @santi020k/lumen-astro', language: 'bash' }
+]
+---
+
+<CodeTabs
+  ariaLabel="Package manager"
+  items={installCommands}
+  storageKey="preferred-package-manager"
+/>
+```
+
 ## Optimized images
 
 Lumen's Astro `Image` delegates to `astro:assets`, so imported image metadata, responsive layouts,
@@ -145,3 +214,17 @@ variants. The older `variant="glass"` form remains supported for cards. Overlay
 <DatePicker glass="subtle" />
 <Select glass="strong" options={['Astro', 'React']} />
 ```
+
+## Semantic stat roots
+
+`Stat` renders a `div` by default. Use `as="article"` when the metric and its supporting content
+form a standalone item, or `as="section"` when it is a labeled region in a larger view.
+
+```astro
+<Stat as="article" label="Active workspaces" value="1,234" variant="accent">
+  <p>Across all production organizations.</p>
+</Stat>
+```
+
+Use `variant="default"` for the original neutral surface, `variant="accent"` for a featured metric,
+or `variant="glass"` for selective translucency.

package/components/Anchor.astro

@@ -3,7 +3,13 @@ import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 
 import type { HTMLAttributes } from 'astro/types'
 
-type AnchorLink = { href: string; label: string }
+type AnchorDepth = 1 | 2 | 3 | 4 | 5 | 6
+
+type AnchorLink = {
+  depth?: AnchorDepth
+  href: string
+  label: string
+}
 
 export interface Props extends HTMLAttributes<'nav'> {
   class?: string | null
@@ -34,7 +40,13 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
     <ol>
       {items.map((item, index) => (
         <li>
-          <a data-active={index === 0 ? 'true' : 'false'} href={item.href}>{item.label}</a>
+          <a
+            data-active={index === 0 ? 'true' : 'false'}
+            data-depth={item.depth}
+            href={item.href}
+          >
+            {item.label}
+          </a>
         </li>
       ))}
     </ol>

package/components/BarChart.astro

@@ -0,0 +1,185 @@
+---
+import {
+  createLumenBarGeometry,
+  getLumenChartTicks,
+  hasLumenChartData,
+  type LumenBarChartLayout,
+  type LumenChartOrientation,
+  type LumenChartSeries,
+  resolveLumenChartTone,
+  scaleLumenChartValue
+} from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+import Chart from './Chart.astro'
+
+interface Props extends HTMLAttributes<'figure'> {
+  caption?: string
+  class?: string | null
+  className?: string
+  description?: string
+  glass?: boolean | 'subtle' | 'strong'
+  heading?: string
+  layout?: LumenBarChartLayout
+  orientation?: LumenChartOrientation
+  series: readonly LumenChartSeries[]
+  showLegend?: boolean
+  showTable?: boolean
+}
+
+const {
+  caption,
+  class: classProp = '',
+  className = '',
+  description,
+  glass = false,
+  heading,
+  layout = 'grouped',
+  orientation = 'vertical',
+  series,
+  showLegend = series.length > 1,
+  showTable = true,
+  ...rest
+} = Astro.props
+const geometry = createLumenBarGeometry(series, { layout, orientation })
+const hasData = hasLumenChartData(series)
+const ticks = getLumenChartTicks(geometry.domain)
+const categories = geometry.categories.map(category => category.label)
+const valueFor = (item: LumenChartSeries, category: number | string) =>
+  item.data.find(datum => datum.x === category)?.y ?? null
+const labelFor = (item: LumenChartSeries, category: number | string) =>
+  item.data.find(datum => datum.x === category)?.label
+const margin = orientation === 'horizontal'
+  ? { bottom: 24, left: 112, right: 20, top: 16 }
+  : { bottom: 52, left: 52, right: 16, top: 16 }
+---
+
+<Chart
+  class:list={['ui-bar-chart', classProp, className]}
+  {caption}
+  {description}
+  {glass}
+  {heading}
+  {...rest}
+>
+  {
+    showLegend && hasData && (
+      <ul class="ui-chart__legend" aria-label="Chart legend">
+        {series.map((item, index) => (
+          <li class={`ui-chart-tone--${resolveLumenChartTone(item.tone, index)}`}>
+            <span aria-hidden="true" />
+            {item.label}
+          </li>
+        ))}
+      </ul>
+    )
+  }
+  {!hasData && <p class="ui-chart__empty" role="status">No chart data available.</p>}
+  <div class="ui-chart__plot" hidden={!hasData}>
+    <svg
+      aria-hidden="true"
+      preserveAspectRatio="xMidYMid meet"
+      viewBox={`0 0 ${geometry.width} ${geometry.height}`}
+    >
+      <g class="ui-chart__grid">
+        {
+          ticks.map((tick) => {
+            const coordinate =
+              orientation === 'horizontal'
+                ? scaleLumenChartValue(
+                    tick,
+                    geometry.domain,
+                    margin.left,
+                    geometry.width - margin.right
+                  )
+                : scaleLumenChartValue(
+                    tick,
+                    geometry.domain,
+                    geometry.height - margin.bottom,
+                    margin.top
+                  )
+
+            return orientation === 'horizontal' ? (
+              <line
+                x1={coordinate}
+                x2={coordinate}
+                y1={margin.top}
+                y2={geometry.height - margin.bottom}
+              />
+            ) : (
+              <line
+                x1={margin.left}
+                x2={geometry.width - margin.right}
+                y1={coordinate}
+                y2={coordinate}
+              />
+            )
+          })
+        }
+      </g>
+      <g class="ui-chart__axis-labels">
+        {
+          geometry.categories.map((category) => (
+            <text
+              dominant-baseline={orientation === 'horizontal' ? 'middle' : undefined}
+              text-anchor={orientation === 'horizontal' ? 'end' : 'middle'}
+              x={category.x}
+              y={category.y}
+            >
+              {String(category.label)}
+            </text>
+          ))
+        }
+      </g>
+      <g class="ui-bar-chart__marks">
+        {
+          geometry.marks.map((mark) => (
+            <rect
+              class={`ui-chart-tone--${mark.tone}`}
+              height={mark.height}
+              rx="4"
+              width={mark.width}
+              x={mark.x}
+              y={mark.y}
+            >
+              <title>
+                {`${String(mark.category)} · ${mark.seriesLabel}: ${mark.value}`}
+              </title>
+            </rect>
+          ))
+        }
+      </g>
+    </svg>
+  </div>
+  {
+    showTable && hasData && (
+      <details class="ui-chart__data">
+        <summary>View chart data</summary>
+        <div>
+          <table>
+            <thead>
+              <tr>
+                <th scope="col">Category</th>
+                {series.map(item => <th scope="col">{item.label}</th>)}
+              </tr>
+            </thead>
+            <tbody>
+              {categories.map(category => (
+                <tr>
+                  <th scope="row">{String(category)}</th>
+                  {series.map(item => (
+                    <td>
+                      {labelFor(item, category) ??
+                        String(valueFor(item, category) ?? 'Not available')}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </details>
+    )
+  }
+</Chart>

package/components/Chart.astro

@@ -4,15 +4,23 @@ import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends HTMLAttributes<'figure'> {
+  caption?: string
   class?: string | null
   className?: string
+  description?: string
   glass?: boolean | 'subtle' | 'strong'
+  heading?: string
+  value?: string
 }
 
 const {
+  caption,
   class: classProp = '',
   className = '',
+  description,
   glass = false,
+  heading,
+  value,
   ...rest
 } = Astro.props
 
@@ -28,5 +36,20 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
   class:list={classList}
   {...passthrough}
 >
+  {
+    (heading || description || value || Astro.slots.has('header')) && (
+      <header>
+        <slot name="header">
+          <div class="ui-chart__heading">
+            {heading && <h3>{heading}</h3>}
+            {description && <p>{description}</p>}
+          </div>
+          {value && <strong data-ui-chart-value>{value}</strong>}
+        </slot>
+        <slot name="actions" />
+      </header>
+    )
+  }
   <slot />
+  {caption && <figcaption>{caption}</figcaption>}
 </figure>

package/components/CodeTabs.astro

@@ -0,0 +1,92 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+import Code from './Code.astro'
+import Tabs from './Tabs.astro'
+
+type CodeTheme = 'auto' | 'lumen' | 'santi020k'
+
+export interface CodeTabItem {
+  code: string
+  label: string
+  language?: string
+  value: string
+}
+
+interface Props extends HTMLAttributes<'div'> {
+  ariaLabel?: string
+  class?: string | null
+  className?: string
+  copy?: boolean
+  initialValue?: string
+  items: readonly CodeTabItem[]
+  storageKey?: string
+  theme?: CodeTheme
+  wrap?: boolean
+}
+
+const {
+  ariaLabel = 'Code examples',
+  class: classProp = '',
+  className = '',
+  copy = true,
+  initialValue,
+  items,
+  storageKey,
+  theme = 'auto',
+  wrap = true,
+  ...rest
+} = Astro.props
+
+const selectedValue = initialValue ?? items[0]?.value
+const tabsStateProps = {
+  ...(selectedValue === undefined ? {} : { initialValue: selectedValue }),
+  ...(storageKey === undefined ? {} : { storageKey })
+}
+const { classList, passthrough } = resolveLumenAstroProps(
+  rest,
+  ['ui-code-tabs'],
+  classProp ?? '',
+  className
+)
+---
+
+<Tabs
+  class:list={classList}
+  {...tabsStateProps}
+  {...passthrough}
+>
+  <div class="ui-code-tabs__list" role="tablist" aria-label={ariaLabel}>
+    {items.map(item => (
+      <button
+        aria-selected={item.value === selectedValue ? 'true' : 'false'}
+        class="ui-code-tabs__tab"
+        data-value={item.value}
+        role="tab"
+        type="button"
+      >
+        {item.label}
+      </button>
+    ))}
+  </div>
+
+  {items.map(item => (
+    <div
+      class="ui-code-tabs__panel"
+      data-value={item.value}
+      hidden={item.value !== selectedValue}
+      role="tabpanel"
+    >
+      <Code
+        code={item.code}
+        copy={copy}
+        {...(item.language === undefined ? {} : { language: item.language })}
+        theme={theme}
+        variant="block"
+        wrap={wrap}
+      />
+    </div>
+  ))}
+</Tabs>

package/components/Dialog.astro

@@ -7,6 +7,7 @@ interface Props extends HTMLAttributes<'dialog'> {
   class?: string | null
   className?: string
   glass?: boolean | 'subtle' | 'strong'
+  layout?: 'centered' | 'fullscreen'
   /**
    * @deprecated Use `glass` instead. `surface="glass"` maps to `glass={true}`.
    */
@@ -17,6 +18,7 @@ const {
   class: classProp = '',
   className = '',
   glass = false,
+  layout = 'centered',
   surface = 'default',
   ...rest
 } = Astro.props
@@ -24,6 +26,7 @@ const {
 const resolvedGlass = resolveLumenGlass(glass, surface)
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
     'ui-dialog',
+    layout === 'fullscreen' && 'ui-dialog--fullscreen',
     resolvedGlass && 'ui-dialog--glass',
     glass === 'subtle' && 'ui-glass-subtle',
     glass === 'strong' && 'ui-glass-strong'
@@ -32,6 +35,7 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
 
 <dialog
   data-surface={resolvedGlass ? 'glass' : 'default'}
+  data-layout={layout}
   data-ui-dialog
   class:list={classList}
   {...passthrough}

package/components/Icon.astro

@@ -32,7 +32,7 @@ const isDecorative = decorative ?? !label
 const iconSvg = name ? renderLumenIconSvg(name) : ''
 
 if (name && !iconSvg && import.meta.env.DEV) {
-  console.warn(`[Lumen Icon] Unknown Lucide icon "${name}". Use the default slot for brand or project-specific SVGs.`)
+  console.warn(`[Lumen Icon] Unknown icon "${name}". Register an icon pack or use the default slot for project-specific SVGs.`)
 }
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [

package/components/LineChart.astro

@@ -0,0 +1,227 @@
+---
+import {
+  alignLumenChartSeries,
+  createLumenLineGeometry,
+  getLumenChartCategories,
+  getLumenChartDomain,
+  getLumenChartTicks,
+  hasLumenChartData,
+  type LumenChartSeries,
+  resolveLumenChartTone,
+  scaleLumenChartValue
+} from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+import Chart from './Chart.astro'
+
+interface Props extends HTMLAttributes<'figure'> {
+  area?: boolean
+  caption?: string
+  class?: string | null
+  className?: string
+  description?: string
+  glass?: boolean | 'subtle' | 'strong'
+  heading?: string
+  markers?: boolean
+  referenceValue?: number
+  series: readonly LumenChartSeries[]
+  showLegend?: boolean
+  showTable?: boolean
+}
+
+const {
+  area = false,
+  caption,
+  class: classProp = '',
+  className = '',
+  description,
+  glass = false,
+  heading,
+  markers = true,
+  referenceValue,
+  series,
+  showLegend = series.length > 1,
+  showTable = true,
+  ...rest
+} = Astro.props
+const width = 640
+const height = 320
+const padding = 44
+const categories = getLumenChartCategories(series)
+const hasData = hasLumenChartData(series)
+const alignedSeries = series.map(item => alignLumenChartSeries(item, categories))
+const domain = getLumenChartDomain([
+  ...alignedSeries.flatMap(item => item.data.map(datum => datum.y)),
+  referenceValue ?? null
+], false)
+const geometries = alignedSeries.map(item =>
+  createLumenLineGeometry(item.data, {
+    domain,
+    height,
+    includeZero: false,
+    padding,
+    width
+  })
+)
+const ticks = getLumenChartTicks(domain)
+const labelStep = Math.max(1, Math.ceil(categories.length / 8))
+const valueFor = (item: LumenChartSeries, category: number | string) =>
+  item.data.find(datum => datum.x === category)
+const referenceY =
+  referenceValue === undefined
+    ? undefined
+    : scaleLumenChartValue(referenceValue, domain, height - padding, padding)
+---
+
+<Chart
+  class:list={['ui-line-chart', classProp, className]}
+  {caption}
+  {description}
+  {glass}
+  {heading}
+  {...rest}
+>
+  {
+    showLegend && hasData && (
+      <ul class="ui-chart__legend" aria-label="Chart legend">
+        {series.map((item, index) => (
+          <li class={`ui-chart-tone--${resolveLumenChartTone(item.tone, index)}`}>
+            <span aria-hidden="true" />
+            {item.label}
+          </li>
+        ))}
+      </ul>
+    )
+  }
+  {!hasData && <p class="ui-chart__empty" role="status">No chart data available.</p>}
+  <div class="ui-chart__plot" hidden={!hasData}>
+    <svg
+      aria-hidden="true"
+      preserveAspectRatio="xMidYMid meet"
+      viewBox={`0 0 ${width} ${height}`}
+    >
+      <g class="ui-chart__grid">
+        {
+          ticks.map((tick) => {
+            const y = scaleLumenChartValue(
+              tick,
+              domain,
+              height - padding,
+              padding
+            )
+
+            return (
+              <>
+                <line x1={padding} x2={width - padding} y1={y} y2={y} />
+                <text x={padding - 8} y={y}>
+                  {Number(tick.toPrecision(4))}
+                </text>
+              </>
+            )
+          })
+        }
+      </g>
+      <g class="ui-chart__axis-labels">
+        {
+          categories.map((category, index) => {
+            if (
+              index % labelStep !== 0 &&
+              index !== categories.length - 1
+            )
+              return null
+
+            const denominator = Math.max(1, categories.length - 1)
+            const x =
+              padding + (index / denominator) * (width - padding * 2)
+
+            return (
+              <text text-anchor="middle" x={x} y={height - 14}>
+                {String(category)}
+              </text>
+            )
+          })
+        }
+      </g>
+      {
+        referenceY !== undefined && (
+          <line
+            class="ui-chart__reference"
+            x1={padding}
+            x2={width - padding}
+            y1={referenceY}
+            y2={referenceY}
+          />
+        )
+      }
+      {
+        geometries.map((geometry, index) => {
+          const item = series[index]
+
+          if (!item) return null
+
+          const tone = resolveLumenChartTone(item.tone, index)
+
+          return (
+            <g class={`ui-line-chart__series ui-chart-tone--${tone}`}>
+              {area &&
+                geometry.areaPaths.map(path => (
+                  <path class="ui-line-chart__area" d={path} />
+                ))}
+              <path class="ui-line-chart__line" d={geometry.path} />
+              {markers &&
+                geometry.points.map(point => (
+                  <circle
+                    class="ui-line-chart__point"
+                    cx={point.xCoordinate}
+                    cy={point.yCoordinate}
+                    r="3"
+                  >
+                    <title>
+                      {`${point.label ?? String(point.x)} · ${item.label}: ${point.y}`}
+                    </title>
+                  </circle>
+                ))}
+            </g>
+          )
+        })
+      }
+    </svg>
+  </div>
+  {
+    showTable && hasData && (
+      <details class="ui-chart__data">
+        <summary>View chart data</summary>
+        <div>
+          <table>
+            <thead>
+              <tr>
+                <th scope="col">Category</th>
+                {series.map(item => <th scope="col">{item.label}</th>)}
+              </tr>
+            </thead>
+            <tbody>
+              {categories.map(category => (
+                <tr>
+                  <th scope="row">{String(category)}</th>
+                  {series.map(item => {
+                    const datum = valueFor(item, category)
+
+                    return (
+                      <td>
+                        {datum?.label ??
+                          (datum?.y === null || datum === undefined
+                            ? 'Not available'
+                            : String(datum.y))}
+                      </td>
+                    )
+                  })}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </details>
+    )
+  }
+</Chart>

package/components/Particles.astro

@@ -29,3 +29,49 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
 >
   <slot />
 </div>
+
+<script>
+  type ParticleDensity = 'low' | 'medium' | 'high'
+
+  const densityConfig: Record<ParticleDensity, number> = {
+    low: 15,
+    medium: 25,
+    high: 40
+  }
+
+  const particleTones = [
+    'var(--brand)',
+    'var(--accent)',
+    'var(--glow, var(--brand))'
+  ]
+
+  const initParticles = (scope: ParentNode = document) => {
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
+
+    for (const container of scope.querySelectorAll<HTMLElement>('[data-ui-particles]')) {
+      if (container.hasAttribute('data-ui-particles-initialized')) continue
+
+      container.setAttribute('data-ui-particles-initialized', '')
+
+      const density = (container.dataset.uiParticles || 'medium') as ParticleDensity
+      const count = densityConfig[density]
+
+      for (let index = 0; index < count; index++) {
+        const particle = document.createElement('span')
+        const size = Math.random() * 12 + 8
+
+        particle.className = 'ui-particles__particle'
+        particle.style.setProperty('--ui-particle-delay', `${Math.random() * 8}s`)
+        particle.style.setProperty('--ui-particle-duration', `${20 + Math.random() * 15}s`)
+        particle.style.setProperty('--ui-particle-left', `${Math.random() * 100}%`)
+        particle.style.setProperty('--ui-particle-size', `${size}px`)
+        particle.style.setProperty('--ui-particle-tone', particleTones[Math.floor(Math.random() * particleTones.length)])
+        particle.style.setProperty('--ui-particle-top', `${Math.random() * 100}%`)
+        container.appendChild(particle)
+      }
+    }
+  }
+
+  initParticles()
+  document.addEventListener('astro:after-swap', () => initParticles())
+</script>

package/components/PieChart.astro

@@ -0,0 +1,138 @@
+---
+import {
+  createLumenPieGeometry,
+  hasLumenPieData,
+  type LumenChartSeries,
+  type LumenPieChartVariant
+} from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+import Chart from './Chart.astro'
+
+interface Props extends HTMLAttributes<'figure'> {
+  caption?: string
+  centerLabel?: string
+  centerValue?: string
+  class?: string | null
+  className?: string
+  description?: string
+  glass?: boolean | 'subtle' | 'strong'
+  heading?: string
+  series: LumenChartSeries
+  showLegend?: boolean
+  showTable?: boolean
+  valueFormatter?: (value: number) => string
+  variant?: LumenPieChartVariant
+}
+
+const {
+  caption,
+  centerLabel,
+  centerValue,
+  class: classProp = '',
+  className = '',
+  description,
+  glass = false,
+  heading,
+  series,
+  showLegend = true,
+  showTable = true,
+  valueFormatter = String,
+  variant = 'donut',
+  ...rest
+} = Astro.props
+const geometry = createLumenPieGeometry(series.data, { variant })
+const hasData = hasLumenPieData(series.data)
+const percentageFor = (percentage: number) =>
+  new Intl.NumberFormat(undefined, {
+    maximumFractionDigits: percentage < 0.01 ? 1 : 0,
+    style: 'percent'
+  }).format(percentage)
+---
+
+<Chart
+  class:list={['ui-pie-chart', `ui-pie-chart--${variant}`, classProp, className]}
+  {caption}
+  {description}
+  {glass}
+  {heading}
+  {...rest}
+>
+  {
+    showLegend && hasData && (
+      <ul class="ui-chart__legend" aria-label="Chart legend">
+        {geometry.slices.map(slice => (
+          <li class={`ui-chart-tone--${slice.tone}`}>
+            <span aria-hidden="true" />
+            {slice.label}
+          </li>
+        ))}
+      </ul>
+    )
+  }
+  {!hasData && <p class="ui-chart__empty" role="status">No chart data available.</p>}
+  <div class="ui-chart__plot ui-pie-chart__plot" hidden={!hasData}>
+    <svg
+      aria-hidden="true"
+      preserveAspectRatio="xMidYMid meet"
+      viewBox={`0 0 ${geometry.size} ${geometry.size}`}
+    >
+      <g class="ui-pie-chart__slices">
+        {
+          geometry.slices.map(slice => (
+            <path
+              class={`ui-chart-tone--${slice.tone}`}
+              d={slice.path}
+              fill-rule="evenodd"
+            >
+              <title>
+                {`${slice.label}: ${valueFormatter(slice.value)} (${percentageFor(slice.percentage)})`}
+              </title>
+            </path>
+          ))
+        }
+      </g>
+    </svg>
+    {
+      variant === 'donut' && (centerLabel != null || centerValue != null) && (
+        <>
+          <div class="ui-pie-chart__center" aria-hidden="true">
+            {centerValue != null && <strong>{centerValue}</strong>}
+            {centerLabel != null && <span>{centerLabel}</span>}
+          </div>
+          <div class="ui-sr-only">
+            {centerValue} {centerLabel}
+          </div>
+        </>
+      )
+    }
+  </div>
+  {
+    showTable && hasData && (
+      <details class="ui-chart__data">
+        <summary>View chart data</summary>
+        <div>
+          <table>
+            <thead>
+              <tr>
+                <th scope="col">Category</th>
+                <th scope="col">Value</th>
+                <th scope="col">Share</th>
+              </tr>
+            </thead>
+            <tbody>
+              {geometry.slices.map(slice => (
+                <tr>
+                  <th scope="row">{slice.label}</th>
+                  <td>{valueFormatter(slice.value)}</td>
+                  <td>{percentageFor(slice.percentage)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </details>
+    )
+  }
+</Chart>

package/components/Pill.astro

@@ -8,6 +8,7 @@ interface Props extends HTMLAttributes<'span'> {
   className?: string
   count?: number | string
   href?: string
+  variant?: 'brand' | 'neutral' | 'outline'
 }
 
 const {
@@ -15,20 +16,22 @@ const {
   className = '',
   count,
   href,
+  variant = 'neutral',
   ...rest
 } = Astro.props
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-  'ui-pill'
+  'ui-pill',
+  variant !== 'neutral' && `ui-pill--${variant}`
 ], classProp, className)
 ---
 
 {href
-  ? <a class:list={classList} href={href} {...passthrough}>
+  ? <a class:list={classList} data-variant={variant} href={href} {...passthrough}>
       <slot />
       {count != null && <span class="ui-pill__count">{count}</span>}
     </a>
-  : <span class:list={classList} {...passthrough}>
+  : <span class:list={classList} data-variant={variant} {...passthrough}>
       <slot />
       {count != null && <span class="ui-pill__count">{count}</span>}
     </span>

package/components/ScrollProgress.astro

@@ -0,0 +1,38 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string | null
+  className?: string
+  position?: 'bottom' | 'top'
+}
+
+const {
+  'aria-label': ariaLabel = 'Reading progress',
+  class: classProp = '',
+  className = '',
+  position = 'top',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-scroll-progress',
+  position === 'bottom' && 'ui-scroll-progress--bottom'
+], classProp, className)
+---
+
+<div
+  aria-label={ariaLabel}
+  aria-valuemax="100"
+  aria-valuemin="0"
+  aria-valuenow="0"
+  class:list={classList}
+  data-position={position}
+  data-ui-scroll-progress
+  role="progressbar"
+  {...passthrough}
+>
+  <span class="ui-scroll-progress__bar"></span>
+</div>

package/components/Sparkline.astro

@@ -0,0 +1,72 @@
+---
+import {
+  composeClassName,
+  createLumenLineGeometry,
+  type LumenChartTone,
+  resolveLumenChartTone
+} from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'span'> {
+  area?: boolean
+  class?: string | null
+  className?: string
+  label: string
+  showEndpoint?: boolean
+  tone?: LumenChartTone
+  values: readonly number[]
+}
+
+const {
+  area = false,
+  class: classProp = '',
+  className = '',
+  label,
+  showEndpoint = true,
+  tone,
+  values,
+  ...rest
+} = Astro.props
+const data = values.map((value, index) => ({ x: index, y: value }))
+const geometry = createLumenLineGeometry(data, {
+  height: 40,
+  padding: 3,
+  width: 120
+})
+const resolvedTone = resolveLumenChartTone(tone)
+const endpoint = geometry.points[geometry.points.length - 1]
+---
+
+<span
+  aria-label={label}
+  class={composeClassName(
+    'ui-sparkline',
+    `ui-chart-tone--${resolvedTone}`,
+    classProp,
+    className
+  )}
+  role="img"
+  {...rest}
+>
+  <svg aria-hidden="true" preserveAspectRatio="none" viewBox="0 0 120 40">
+    {
+      area &&
+        geometry.areaPaths.map((path) => (
+          <path class="ui-sparkline__area" d={path} />
+        ))
+    }
+    <path class="ui-sparkline__line" d={geometry.path} />
+    {
+      showEndpoint && endpoint && (
+        <circle
+          class="ui-sparkline__endpoint"
+          cx={endpoint.xCoordinate}
+          cy={endpoint.yCoordinate}
+          r="2.5"
+        />
+      )
+    }
+  </svg>
+  <span class="ui-sr-only">{label}</span>
+</span>

package/components/Stat.astro

@@ -4,31 +4,36 @@ import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends HTMLAttributes<'div'> {
+  as?: 'article' | 'div' | 'section'
   class?: string | null
   className?: string
   label?: string
   value?: string
+  variant?: 'accent' | 'default' | 'glass'
 }
 
 const {
+  as: Tag = 'div',
   class: classProp = '',
   className = '',
   label,
   value,
+  variant = 'default',
   ...rest
 } = Astro.props
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-  'ui-stat'
+  'ui-stat',
+  variant !== 'default' && `ui-stat--${variant}`
 ], classProp, className)
 ---
 
-<div
+<Tag
   class:list={classList}
+  data-variant={variant}
   {...passthrough}
 >
   {label && <div class="ui-stat-label">{label}</div>}
   {value && <div class="ui-stat-value">{value}</div>}
   <slot />
-</div>
-
+</Tag>

package/components/Watermark.astro

@@ -39,7 +39,7 @@ const watermarkSvg = [
   `<svg xmlns="http://www.w3.org/2000/svg" width="${tileSize}" height="${tileSize}" viewBox="0 0 ${tileSize} ${tileSize}">`,
   `<text x="${tileSize / 2}" y="${tileSize / 2}" dominant-baseline="middle" text-anchor="middle"`,
   ` transform="rotate(${rotate} ${tileSize / 2} ${tileSize / 2})"`,
-  ' fill="black" font-family="system-ui, sans-serif" font-size="16" font-weight="500" letter-spacing="1.6">',
+  ' fill="black" font-family="Montserrat, Avenir Next, Segoe UI, sans-serif" font-size="16" font-weight="500" letter-spacing="1.6">',
   `${escapedWatermarkText}</text></svg>`
 ].join('')
 const watermarkImage = `url("data:image/svg+xml,${encodeURIComponent(watermarkSvg)}")`

package/index.d.ts

@@ -13,6 +13,7 @@ export { default as Autocomplete } from './components/Autocomplete.astro'
 export { default as Avatar } from './components/Avatar.astro'
 export { default as BackToTop } from './components/BackToTop.astro'
 export { default as Badge } from './components/Badge.astro'
+export { default as BarChart } from './components/BarChart.astro'
 export { default as Breadcrumb } from './components/Breadcrumb.astro'
 export { default as Bubble } from './components/Bubble.astro'
 export { default as Button } from './components/Button.astro'
@@ -26,6 +27,7 @@ export { default as Cascader } from './components/Cascader.astro'
 export { default as Chart } from './components/Chart.astro'
 export { default as Checkbox } from './components/Checkbox.astro'
 export { default as Code } from './components/Code.astro'
+export { default as CodeTabs } from './components/CodeTabs.astro'
 export { default as Collapsible } from './components/Collapsible.astro'
 export { default as ColorPicker } from './components/ColorPicker.astro'
 export { default as Combobox } from './components/Combobox.astro'
@@ -57,6 +59,7 @@ export { default as Item } from './components/Item.astro'
 export { default as Kbd } from './components/Kbd.astro'
 export { default as Label } from './components/Label.astro'
 export { default as LanguageToggle } from './components/LanguageToggle.astro'
+export { default as LineChart } from './components/LineChart.astro'
 export { default as Link } from './components/Link.astro'
 export { default as Marker } from './components/Marker.astro'
 export { default as Mentions } from './components/Mentions.astro'
@@ -71,6 +74,7 @@ export { default as NumberField } from './components/NumberField.astro'
 export { default as Pagination } from './components/Pagination.astro'
 export { default as Particles } from './components/Particles.astro'
 export { default as PhoneInput } from './components/PhoneInput.astro'
+export { default as PieChart } from './components/PieChart.astro'
 export { default as Pill } from './components/Pill.astro'
 export { default as Popconfirm } from './components/Popconfirm.astro'
 export { default as Popover } from './components/Popover.astro'
@@ -84,6 +88,7 @@ export { default as RevealGroup } from './components/RevealGroup.astro'
 export { default as RichTextEditor } from './components/RichTextEditor.astro'
 export { default as Schedule } from './components/Schedule.astro'
 export { default as ScrollArea } from './components/ScrollArea.astro'
+export { default as ScrollProgress } from './components/ScrollProgress.astro'
 export { default as ScrollReveal } from './components/ScrollReveal.astro'
 export { default as SearchField } from './components/SearchField.astro'
 export { default as Segmented } from './components/Segmented.astro'
@@ -95,6 +100,7 @@ export { default as Skeleton } from './components/Skeleton.astro'
 export { default as SkipLink } from './components/SkipLink.astro'
 export { default as Slider } from './components/Slider.astro'
 export { default as Sonner } from './components/Sonner.astro'
+export { default as Sparkline } from './components/Sparkline.astro'
 export { default as SpeedDial } from './components/SpeedDial.astro'
 export { default as Spinner } from './components/Spinner.astro'
 export { default as Stat } from './components/Stat.astro'

package/index.ts

@@ -13,6 +13,7 @@ export { default as Autocomplete } from './components/Autocomplete.astro'
 export { default as Avatar } from './components/Avatar.astro'
 export { default as BackToTop } from './components/BackToTop.astro'
 export { default as Badge } from './components/Badge.astro'
+export { default as BarChart } from './components/BarChart.astro'
 export { default as Breadcrumb } from './components/Breadcrumb.astro'
 export { default as Bubble } from './components/Bubble.astro'
 export { default as Button } from './components/Button.astro'
@@ -26,6 +27,7 @@ export { default as Cascader } from './components/Cascader.astro'
 export { default as Chart } from './components/Chart.astro'
 export { default as Checkbox } from './components/Checkbox.astro'
 export { default as Code } from './components/Code.astro'
+export { default as CodeTabs } from './components/CodeTabs.astro'
 export { default as Collapsible } from './components/Collapsible.astro'
 export { default as ColorPicker } from './components/ColorPicker.astro'
 export { default as Combobox } from './components/Combobox.astro'
@@ -57,6 +59,7 @@ export { default as Item } from './components/Item.astro'
 export { default as Kbd } from './components/Kbd.astro'
 export { default as Label } from './components/Label.astro'
 export { default as LanguageToggle } from './components/LanguageToggle.astro'
+export { default as LineChart } from './components/LineChart.astro'
 export { default as Link } from './components/Link.astro'
 export { default as Marker } from './components/Marker.astro'
 export { default as Mentions } from './components/Mentions.astro'
@@ -71,6 +74,7 @@ export { default as NumberField } from './components/NumberField.astro'
 export { default as Pagination } from './components/Pagination.astro'
 export { default as Particles } from './components/Particles.astro'
 export { default as PhoneInput } from './components/PhoneInput.astro'
+export { default as PieChart } from './components/PieChart.astro'
 export { default as Pill } from './components/Pill.astro'
 export { default as Popconfirm } from './components/Popconfirm.astro'
 export { default as Popover } from './components/Popover.astro'
@@ -84,6 +88,7 @@ export { default as RevealGroup } from './components/RevealGroup.astro'
 export { default as RichTextEditor } from './components/RichTextEditor.astro'
 export { default as Schedule } from './components/Schedule.astro'
 export { default as ScrollArea } from './components/ScrollArea.astro'
+export { default as ScrollProgress } from './components/ScrollProgress.astro'
 export { default as ScrollReveal } from './components/ScrollReveal.astro'
 export { default as SearchField } from './components/SearchField.astro'
 export { default as Segmented } from './components/Segmented.astro'
@@ -95,6 +100,7 @@ export { default as Skeleton } from './components/Skeleton.astro'
 export { default as SkipLink } from './components/SkipLink.astro'
 export { default as Slider } from './components/Slider.astro'
 export { default as Sonner } from './components/Sonner.astro'
+export { default as Sparkline } from './components/Sparkline.astro'
 export { default as SpeedDial } from './components/SpeedDial.astro'
 export { default as Spinner } from './components/Spinner.astro'
 export { default as Stat } from './components/Stat.astro'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@santi020k/lumen-astro",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "publishConfig": {
     "access": "public"
   },
@@ -33,8 +33,8 @@
   ],
   "dependencies": {
     "uqr": "^0.1.3",
-    "@santi020k/lumen": "^0.2.0",
-    "@santi020k/lumen-core": "^0.2.0"
+    "@santi020k/lumen": "^0.4.0",
+    "@santi020k/lumen-core": "^0.4.0"
   },
   "devDependencies": {
     "@astrojs/ts-plugin": "^1.10.10",

package/runtime/UIPrimitives.astro

@@ -4112,6 +4112,47 @@
     }
   }
 
+  let scrollProgressFrame = 0
+
+  const updateScrollProgress = (): void => {
+    scrollProgressFrame = 0
+
+    const scrollingElement = document.scrollingElement ?? document.documentElement
+    const maximum = scrollingElement.scrollHeight - scrollingElement.clientHeight
+
+    const percentage = maximum > 0
+      ? Math.min(100, Math.max(0, (scrollingElement.scrollTop / maximum) * 100))
+      : 0
+
+    for (const root of document.querySelectorAll<HTMLElement>('[data-ui-scroll-progress]')) {
+      const bar = root.querySelector<HTMLElement>('.ui-scroll-progress__bar')
+
+      root.setAttribute('aria-valuenow', `${Math.round(percentage)}`)
+
+      if (bar) bar.style.transform = `scaleX(${percentage / 100})`
+    }
+  }
+
+  const requestScrollProgressUpdate = (): void => {
+    if (scrollProgressFrame) return
+
+    scrollProgressFrame = requestAnimationFrame(updateScrollProgress)
+  }
+
+  const initScrollProgress = (scope: ParentNode): void => {
+    if (!scope.querySelector('[data-ui-scroll-progress]')) return
+
+    requestScrollProgressUpdate()
+
+    if (document.documentElement.dataset.uiScrollProgressBound === 'true') return
+
+    document.documentElement.dataset.uiScrollProgressBound = 'true'
+
+    window.addEventListener('resize', requestScrollProgressUpdate, { passive: true })
+
+    window.addEventListener('scroll', requestScrollProgressUpdate, { passive: true })
+  }
+
   const initTours = (scope: ParentNode): void => {
     for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-tour]')) {
       if (root.dataset.uiBound === 'true') continue
@@ -4654,6 +4695,8 @@
 
     initAnchors(scope)
 
+    initScrollProgress(scope)
+
     initTours(scope)
 
     initTransfers(scope)