@santi020k/lumen-astro 2.0.0 → 3.0.0

package/README.md

@@ -253,9 +253,17 @@ non-code content `Code` semantics.
 
 ```astro
 <p id="invite">Join the Lumen workspace</p>
-<CopyButton target="#invite" toast>Copy invite</CopyButton>
+<CopyButton size="sm" target="#invite" toast variant="default">
+  Copy invite
+  <span slot="copied">Invite copied</span>
+  <span slot="error">Copy failed</span>
+</CopyButton>
 ```
 
+`CopyButton` accepts the same presentation `variant` and `size` vocabulary as `Button`. Its stable
+`copy-idle`, `copy-copied`, and `copy-error` slots keep visible feedback in
+sync with the accessible label; free-form default children remain the idle presentation.
+
 ## Data visualization
 
 Use `Sparkline` beside a metric, `BarChart` for categorical comparison, `LineChart` for ordered
@@ -374,14 +382,14 @@ animates a formatted metric while preserving a stable accessible value. All thre
 content readable without JavaScript and honor reduced-motion preferences.
 
 ```astro
-<ScrollReveal animation="slide-up" duration="slow">
+<ScrollReveal animation="slide-up" as="section" duration="slow">
   <h2>Release highlights</h2>
 </ScrollReveal>
 
-<RevealGroup stagger={80}>
-  <Card>Plan</Card>
-  <Card>Build</Card>
-  <Card>Ship</Card>
+<RevealGroup as="ul" stagger={80}>
+  <li><Card>Plan</Card></li>
+  <li><Card>Build</Card></li>
+  <li><Card>Ship</Card></li>
 </RevealGroup>
 
 <AnimatedNumber decimals={1} suffix="%" value={99.8} />
@@ -414,3 +422,10 @@ form a standalone item, or `as="section"` when it is a labeled region in a large
 
 Use `variant="default"` for the original neutral surface, `variant="accent"` for a featured metric,
 or `variant="glass"` for selective translucency.
+
+## Consumer composition recipes
+
+See [consumer UI recipes](../../docs/consumer-ui-recipes.md) for static React icons, responsive
+record tables, keyboard-aware native sheets, whole-unit amount fields, adaptive editors, and
+asynchronous action states. Each recipe identifies the public primitives and the behavior that
+remains owned by the application.

package/components/BarChart.astro

@@ -8,8 +8,10 @@ import {
   getLumenChartToneClassName,
   hasLumenChartData,
   type LumenBarChartLayout,
+  type LumenChartLabels,
   type LumenChartOrientation,
   type LumenChartSeries,
+  resolveLumenChartLabels,
   scaleLumenChartValue
 } from '@santi020k/lumen-core'
 
@@ -26,6 +28,7 @@ interface Props extends HTMLAttributes<'figure'> {
   formatValue?: (value: number) => string
   glass?: boolean | 'subtle' | 'strong'
   heading?: string
+  labels?: Partial<LumenChartLabels>
   layout?: LumenBarChartLayout
   orientation?: LumenChartOrientation
   presentation?: 'bare' | 'default'
@@ -41,20 +44,23 @@ const {
   class: classProp = '',
   className = '',
   description,
-  emptyLabel = 'No chart data available.',
+  emptyLabel,
   formatCategory = String,
   formatValue = String,
   glass = false,
   heading,
+  labels,
   layout = 'grouped',
   orientation = 'vertical',
   series,
   showLegend = series.length > 1,
   showTable = true,
-  summary = formatLumenChartSummary(series, formatValue),
+  summary: summaryProp,
   ...rest
 } = Astro.props
 
+const resolvedLabels = resolveLumenChartLabels(labels)
+const summary = summaryProp ?? formatLumenChartSummary(series, formatValue, resolvedLabels)
 const geometry = createLumenBarGeometry(series, { categoryWidth, layout, orientation })
 const hasData = hasLumenChartData(series)
 const ticks = getLumenChartTicks(geometry.domain)
@@ -75,7 +81,7 @@ const labelFor = (item: LumenChartSeries, category: number | string) => (
 const formattedValueFor = (item: LumenChartSeries, category: number | string) => {
   const value = valueFor(item, category)
 
-  return value === null || !Number.isFinite(value) ? 'Not available' : formatValue(value)
+  return value === null || !Number.isFinite(value) ? resolvedLabels.notAvailable : formatValue(value)
 }
 
 const categoryLabelFor = (category: number | string) => {
@@ -100,7 +106,7 @@ const margin = orientation === 'horizontal' ?
 >
   {
     showLegend && hasData && (
-      <ul class="ui-chart__legend" aria-label="Chart legend">
+      <ul class="ui-chart__legend" aria-label={resolvedLabels.chartLegend}>
         {series.map((item, index) => (
           <li class={getLumenChartToneClassName(item.tone, index)}>
             <span aria-hidden="true" />
@@ -110,7 +116,7 @@ const margin = orientation === 'horizontal' ?
       </ul>
     )
   }
-  {!hasData && <p class="ui-chart__empty" role="status">{emptyLabel}</p>}
+  {!hasData && <p class="ui-chart__empty" role="status">{emptyLabel ?? resolvedLabels.empty}</p>}
   <div class="ui-chart__plot" hidden={!hasData}>
     <svg
       aria-hidden="true"
@@ -186,12 +192,12 @@ const margin = orientation === 'horizontal' ?
   {
     showTable && hasData && (
       <details class="ui-chart__data">
-        <summary>View chart data</summary>
+        <summary>{resolvedLabels.viewData}</summary>
         <div>
           <table>
             <thead>
               <tr>
-                <th scope="col">Category</th>
+                <th scope="col">{resolvedLabels.category}</th>
                 {series.map(item => <th scope="col">{item.label}</th>)}
               </tr>
             </thead>

package/components/ComboChart.astro

@@ -11,7 +11,9 @@ import {
   getLumenChartToneClassName,
   hasLumenChartData,
   type LumenChartDatum,
+  type LumenChartLabels,
   type LumenComboSeries,
+  resolveLumenChartLabels,
   resolveLumenChartTone } from '@santi020k/lumen-core'
 
 import Chart from './Chart.astro'
@@ -23,13 +25,16 @@ interface Props extends HTMLAttributes<'figure'> {
   description?: string
   formatValue?: (value: number) => string
   heading?: string
+  labels?: Partial<LumenChartLabels>
   series: readonly LumenComboSeries[]
   showLegend?: boolean
   showTable?: boolean
   summary?: string
 }
 
-const { caption, class: classProp = '', className = '', description, formatValue = String, heading, series, showLegend = true, showTable = true, summary = formatLumenChartSummary(series, formatValue), ...rest } = Astro.props
+const { caption, class: classProp = '', className = '', description, formatValue = String, heading, labels, series, showLegend = true, showTable = true, summary: summaryProp, ...rest } = Astro.props
+const resolvedLabels = resolveLumenChartLabels(labels)
+const summary = summaryProp ?? formatLumenChartSummary(series, formatValue, resolvedLabels)
 const width = 640
 const height = 320
 const padding = 44
@@ -82,8 +87,8 @@ const hasData = hasLumenChartData(series)
 ---
 
 <Chart class:list={['ui-combo-chart', classProp, className]} {caption} {description} {heading} {summary} {...rest}>
-  {showLegend && hasData && <ul class="ui-chart__legend" aria-label="Chart legend">{series.map((item, index) => <li class={getLumenChartToneClassName(item.tone, index)}><span aria-hidden="true" />{item.label}</li>)}</ul>}
-  {!hasData && <p class="ui-chart__empty" role="status">No chart data available.</p>}
+  {showLegend && hasData && <ul class="ui-chart__legend" aria-label={resolvedLabels.chartLegend}>{series.map((item, index) => <li class={getLumenChartToneClassName(item.tone, index)}><span aria-hidden="true" />{item.label}</li>)}</ul>}
+  {!hasData && <p class="ui-chart__empty" role="status">{resolvedLabels.empty}</p>}
   <div class="ui-chart__plot" hidden={!hasData}><svg aria-hidden="true" viewBox={`0 0 ${width} ${height}`}><g class="
     ui-bar-chart__marks
   "
@@ -107,11 +112,11 @@ d={geometry.path}
 )
 })}</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 => (
+<details class="ui-chart__data"><summary>{resolvedLabels.viewData}</summary><div><table><thead><tr><th scope="col">{resolvedLabels.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 = item.data.find(point => point.x === category)
 
- return <td>{datum?.label ?? (datum?.y === undefined || datum.y === null || !Number.isFinite(datum.y) ? 'Not available' : formatValue(datum.y))}</td>
+ return <td>{datum?.label ?? (datum?.y === undefined || datum.y === null || !Number.isFinite(datum.y) ? resolvedLabels.notAvailable : formatValue(datum.y))}</td>
 })}</tr>
 ))}</tbody></table></div></details>
 )}

package/components/CopyButton.astro

@@ -10,9 +10,11 @@ interface Props extends HTMLAttributes<'button'> {
   errorLabel?: string
   label?: string
   resetAfter?: number
+  size?: 'default' | 'sm' | 'lg' | 'icon'
   target?: string
   toast?: boolean
   value?: string
+  variant?: 'default' | 'destructive' | 'ghost' | 'link' | 'outline' | 'secondary'
 }
 
 const {
@@ -22,16 +24,22 @@ const {
   errorLabel = 'Could not copy to clipboard',
   label = 'Copy to clipboard',
   resetAfter = 2000,
+  size = 'default',
   target,
   toast = false,
   type = 'button',
   value,
+  variant = 'outline',
   ...rest
 } = Astro.props
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
   'ui-button',
-  'ui-button--outline',
+  `ui-button--${variant}`,
+  size === 'default' && 'ui-button--default-size',
+  size === 'sm' && 'ui-button--sm',
+  size === 'lg' && 'ui-button--lg',
+  size === 'icon' && 'ui-button--icon',
   'ui-copy-button'
 ], classProp, className)
 ---
@@ -46,10 +54,19 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
   data-copy-target={target}
   data-copy-toast={toast ? 'true' : undefined}
   data-copy-value={value}
+  data-size={size}
+  data-slot="copy-button"
   data-state="idle"
   data-ui-copy-button
+  data-variant={variant}
   type={type}
   {...passthrough}
 >
-  <slot>Copy</slot>
+  <span data-slot="copy-idle"><slot>Copy</slot></span>
+  <span aria-hidden="true" data-slot="copy-copied" hidden>
+    <slot name="copied">{copiedLabel}</slot>
+  </span>
+  <span aria-hidden="true" data-slot="copy-error" hidden>
+    <slot name="error">{errorLabel}</slot>
+  </span>
 </button>

package/components/Heatmap.astro

@@ -1,7 +1,7 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
 
-import { createLumenHeatmapGeometry, type LumenHeatmapDatum } from '@santi020k/lumen-core'
+import { createLumenHeatmapGeometry, type LumenChartLabels, type LumenHeatmapDatum, resolveLumenChartLabels } from '@santi020k/lumen-core'
 
 import Chart from './Chart.astro'
 
@@ -13,20 +13,23 @@ interface Props extends HTMLAttributes<'figure'> {
   description?: string
   formatValue?: (value: number) => string
   heading?: string
+  labels?: Partial<LumenChartLabels>
   showTable?: boolean
   summary?: string
 }
 
-const { caption, class: classProp = '', className = '', data, description, formatValue = String, heading, showTable = true, summary = `${data.filter(item => item.value !== null && Number.isFinite(item.value)).length} available heatmap cells.`, ...rest } = Astro.props
+const { caption, class: classProp = '', className = '', data, description, formatValue = String, heading, labels, showTable = true, summary: summaryProp, ...rest } = Astro.props
 const geometry = createLumenHeatmapGeometry(data)
 const hasData = geometry.cells.some(cell => cell.value !== null && Number.isFinite(cell.value))
+const resolvedLabels = resolveLumenChartLabels(labels)
+const summary = summaryProp ?? resolvedLabels.formatHeatmapSummary(geometry.cells.filter(cell => cell.value !== null && Number.isFinite(cell.value)).length)
 ---
 
 <Chart class:list={['ui-heatmap', classProp, className]} {caption} {description} {heading} {summary} {...rest}>
-  {!hasData && <p class="ui-chart__empty" role="status">No chart data available.</p>}
+  {!hasData && <p class="ui-chart__empty" role="status">{resolvedLabels.empty}</p>}
   <div class="ui-chart__plot" hidden={!hasData}><svg aria-hidden="true" viewBox={`0 0 ${geometry.width} ${geometry.height}`}><g class="
     ui-heatmap__cells
   "
                                                                                                                              >{geometry.cells.filter(cell => cell.value !== null && Number.isFinite(cell.value)).map(cell => <rect height={Math.max(0, cell.height - 2)} opacity={Math.max(0.12, cell.ratio)} width={Math.max(0, cell.width - 2)} x={cell.xCoordinate + 1} y={cell.yCoordinate + 1}><title>{`${cell.xLabel ?? cell.x} · ${cell.yLabel ?? cell.y}: ${cell.label ?? formatValue(cell.value ?? 0)}`}</title></rect>)}</g></svg></div>
-  {showTable && <details class="ui-chart__data"><summary>View chart data</summary><div><table><thead><tr><th scope="col">Column</th><th scope="col">Row</th><th scope="col">Value</th></tr></thead><tbody>{data.map(cell => <tr><th scope="row">{cell.xLabel ?? cell.x}</th><td>{cell.yLabel ?? cell.y}</td><td>{cell.label ?? (cell.value === null || !Number.isFinite(cell.value) ? 'Not available' : formatValue(cell.value))}</td></tr>)}</tbody></table></div></details>}
+  {showTable && <details class="ui-chart__data"><summary>{resolvedLabels.viewData}</summary><div><table><thead><tr><th scope="col">{resolvedLabels.column}</th><th scope="col">{resolvedLabels.row}</th><th scope="col">{resolvedLabels.value}</th></tr></thead><tbody>{data.map(cell => <tr><th scope="row">{cell.xLabel ?? cell.x}</th><td>{cell.yLabel ?? cell.y}</td><td>{cell.label ?? (cell.value === null || !Number.isFinite(cell.value) ? resolvedLabels.notAvailable : formatValue(cell.value))}</td></tr>)}</tbody></table></div></details>}
 </Chart>

package/components/LineChart.astro

@@ -10,7 +10,9 @@ import {
   getLumenChartTicks,
   getLumenChartToneClassName,
   hasLumenChartData,
+  type LumenChartLabels,
   type LumenChartSeries,
+  resolveLumenChartLabels,
   resolveLumenChartTone,
   scaleLumenChartValue
 } from '@santi020k/lumen-core'
@@ -28,6 +30,7 @@ interface Props extends HTMLAttributes<'figure'> {
   formatValue?: (value: number) => string
   glass?: boolean | 'subtle' | 'strong'
   heading?: string
+  labels?: Partial<LumenChartLabels>
   markers?: 'all' | 'auto' | 'none' | boolean | number
   presentation?: 'bare' | 'default'
   referenceValue?: number
@@ -43,20 +46,23 @@ const {
   class: classProp = '',
   className = '',
   description,
-  emptyLabel = 'No chart data available.',
+  emptyLabel,
   formatCategory = String,
   formatValue = String,
   glass = false,
   heading,
+  labels,
   markers = 'auto',
   referenceValue,
   series,
   showLegend = series.length > 1,
   showTable = true,
-  summary = formatLumenChartSummary(series, formatValue),
+  summary: summaryProp,
   ...rest
 } = Astro.props
 
+const resolvedLabels = resolveLumenChartLabels(labels)
+const summary = summaryProp ?? formatLumenChartSummary(series, formatValue, resolvedLabels)
 const width = 640
 const height = 320
 const padding = 44
@@ -107,7 +113,7 @@ const referenceY =
 >
   {
     showLegend && hasData && (
-      <ul class="ui-chart__legend" aria-label="Chart legend">
+      <ul class="ui-chart__legend" aria-label={resolvedLabels.chartLegend}>
         {series.map((item, index) => (
           <li class={getLumenChartToneClassName(item.tone, index)}>
             <span aria-hidden="true" />
@@ -117,7 +123,7 @@ const referenceY =
       </ul>
     )
   }
-  {!hasData && <p class="ui-chart__empty" role="status">{emptyLabel}</p>}
+  {!hasData && <p class="ui-chart__empty" role="status">{emptyLabel ?? resolvedLabels.empty}</p>}
   <div class="ui-chart__plot" hidden={!hasData}>
     <svg
       aria-hidden="true"
@@ -212,12 +218,12 @@ const referenceY =
   {
     showTable && hasData && (
       <details class="ui-chart__data">
-        <summary>View chart data</summary>
+        <summary>{resolvedLabels.viewData}</summary>
         <div>
           <table>
             <thead>
               <tr>
-                <th scope="col">Category</th>
+                <th scope="col">{resolvedLabels.category}</th>
                 {series.map(item => <th scope="col">{item.label}</th>)}
               </tr>
             </thead>
@@ -232,7 +238,7 @@ const referenceY =
                       <td>
                         {datum?.label ??
                           (datum?.y === undefined || datum.y === null || !Number.isFinite(datum.y) ?
-                            'Not available' :
+                            resolvedLabels.notAvailable :
                             formatValue(datum.y))}
                       </td>
                     )

package/components/PieChart.astro

@@ -7,9 +7,10 @@ import {
   getLumenChartToneClassName,
   getLumenPieChartVariantClassName,
   hasLumenPieData,
+  type LumenChartLabels,
   type LumenChartSeries,
-  type LumenPieChartVariant
-} from '@santi020k/lumen-core'
+  type LumenPieChartVariant,
+  resolveLumenChartLabels } from '@santi020k/lumen-core'
 
 import Chart from './Chart.astro'
 
@@ -22,6 +23,7 @@ interface Props extends HTMLAttributes<'figure'> {
   description?: string
   glass?: boolean | 'subtle' | 'strong'
   heading?: string
+  labels?: Partial<LumenChartLabels>
   series: LumenChartSeries
   showLegend?: boolean
   showTable?: boolean
@@ -39,6 +41,7 @@ const {
   description,
   glass = false,
   heading,
+  labels,
   series,
   showLegend = true,
   showTable = true,
@@ -49,6 +52,7 @@ const {
 } = Astro.props
 
 const geometry = createLumenPieGeometry(series.data, { variant })
+const resolvedLabels = resolveLumenChartLabels(labels)
 const hasData = hasLumenPieData(series.data)
 
 const renderedSeries = {
@@ -56,7 +60,7 @@ const renderedSeries = {
   data: series.data.filter(datum => datum.y !== null && Number.isFinite(datum.y) && datum.y > 0)
 }
 
-const summary = summaryProp ?? formatLumenChartSummary([renderedSeries], valueFormatter)
+const summary = summaryProp ?? formatLumenChartSummary([renderedSeries], valueFormatter, resolvedLabels)
 
 const percentageFor = (percentage: number) => new Intl.NumberFormat(undefined, {
   maximumFractionDigits: percentage < 0.01 ? 1 : 0,
@@ -75,7 +79,7 @@ const percentageFor = (percentage: number) => new Intl.NumberFormat(undefined, {
 >
   {
     showLegend && hasData && (
-      <ul class="ui-chart__legend" aria-label="Chart legend">
+      <ul class="ui-chart__legend" aria-label={resolvedLabels.chartLegend}>
         {geometry.slices.map(slice => (
           <li class={getLumenChartToneClassName(slice.tone)}>
             <span aria-hidden="true" />
@@ -85,7 +89,7 @@ const percentageFor = (percentage: number) => new Intl.NumberFormat(undefined, {
       </ul>
     )
   }
-  {!hasData && <p class="ui-chart__empty" role="status">No chart data available.</p>}
+  {!hasData && <p class="ui-chart__empty" role="status">{resolvedLabels.empty}</p>}
   <div class="ui-chart__plot ui-pie-chart__plot" hidden={!hasData}>
     <svg
       aria-hidden="true"
@@ -125,13 +129,13 @@ const percentageFor = (percentage: number) => new Intl.NumberFormat(undefined, {
   {
     showTable && hasData && (
       <details class="ui-chart__data">
-        <summary>View chart data</summary>
+        <summary>{resolvedLabels.viewData}</summary>
         <div>
           <table>
             <thead>
               <tr>
-                <th scope="col">Category</th>
-                <th scope="col">Value</th>
+                <th scope="col">{resolvedLabels.category}</th>
+                <th scope="col">{resolvedLabels.value}</th>
                 <th scope="col">Share</th>
               </tr>
             </thead>

package/components/RangeChart.astro

@@ -1,7 +1,7 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
 
-import { createLumenRangeGeometry, getLumenChartTicks, getLumenChartToneClassName, type LumenChartTone, type LumenRangeDatum, scaleLumenChartValue } from '@santi020k/lumen-core'
+import { createLumenRangeGeometry, getLumenChartTicks, getLumenChartToneClassName, type LumenChartLabels, type LumenChartTone, type LumenRangeDatum, resolveLumenChartLabels, scaleLumenChartValue } from '@santi020k/lumen-core'
 
 import Chart from './Chart.astro'
 
@@ -13,28 +13,30 @@ interface Props extends HTMLAttributes<'figure'> {
   description?: string
   formatValue?: (value: number) => string
   heading?: string
+  labels?: Partial<LumenChartLabels>
   showTable?: boolean
   summary?: string
   tone?: LumenChartTone
 }
 
-const { caption, class: classProp = '', className = '', data, description, formatValue = String, heading, showTable = true, summary: summaryProp, tone = 'series-1', ...rest } = Astro.props
+const { caption, class: classProp = '', className = '', data, description, formatValue = String, heading, labels, showTable = true, summary: summaryProp, tone = 'series-1', ...rest } = Astro.props
 const width = 640
 const height = 320
 const padding = 44
 const geometry = createLumenRangeGeometry(data, { height, padding, width })
+const resolvedLabels = resolveLumenChartLabels(labels)
 
 const summary = summaryProp ?? (
   geometry.points.length === 0 ?
-    'No chart data available.' :
-    `${geometry.points.length} available ranges.`
+    resolvedLabels.formatRangeSummary(0) :
+    resolvedLabels.formatRangeSummary(geometry.points.length)
 )
 
 const ticks = getLumenChartTicks(geometry.domain)
 ---
 
 <Chart class:list={['ui-range-chart', getLumenChartToneClassName(tone), classProp, className]} {caption} {description} {heading} {summary} {...rest}>
-  {geometry.points.length === 0 && <p class="ui-chart__empty" role="status">No chart data available.</p>}
+  {geometry.points.length === 0 && <p class="ui-chart__empty" role="status">{resolvedLabels.empty}</p>}
   <div class="ui-chart__plot" hidden={geometry.points.length === 0}><svg aria-hidden="true" viewBox={`0 0 ${width} ${height}`}><g class="
     ui-chart__grid
   "
@@ -54,5 +56,5 @@ y1={point.highCoordinate}
 y2={point.lowCoordinate}
 ><title>{`${point.xLabel ?? point.x}: ${point.label ?? `${formatValue(point.low ?? 0)}–${formatValue(point.high ?? 0)}`}`}</title></line>
 ))}</svg></div>
-  {showTable && <details class="ui-chart__data"><summary>View chart data</summary><div><table><thead><tr><th scope="col">Category</th><th scope="col">Low</th><th scope="col">High</th></tr></thead><tbody>{data.map(item => <tr><th scope="row">{item.xLabel ?? item.x}</th><td>{item.low === null || !Number.isFinite(item.low) ? 'Not available' : formatValue(item.low)}</td><td>{item.high === null || !Number.isFinite(item.high) ? 'Not available' : formatValue(item.high)}</td></tr>)}</tbody></table></div></details>}
+  {showTable && <details class="ui-chart__data"><summary>{resolvedLabels.viewData}</summary><div><table><thead><tr><th scope="col">{resolvedLabels.category}</th><th scope="col">{resolvedLabels.low}</th><th scope="col">{resolvedLabels.high}</th></tr></thead><tbody>{data.map(item => <tr><th scope="row">{item.xLabel ?? item.x}</th><td>{item.low === null || !Number.isFinite(item.low) ? resolvedLabels.notAvailable : formatValue(item.low)}</td><td>{item.high === null || !Number.isFinite(item.high) ? resolvedLabels.notAvailable : formatValue(item.high)}</td></tr>)}</tbody></table></div></details>}
 </Chart>

package/components/RevealGroup.astro

@@ -5,6 +5,7 @@ import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 
 interface Props extends HTMLAttributes<'div'> {
   animation?: 'fade' | 'slide-up' | 'scale'
+  as?: 'div' | 'ol' | 'section' | 'ul'
   class?: string | null
   className?: string
   delay?: number
@@ -16,6 +17,7 @@ interface Props extends HTMLAttributes<'div'> {
 
 const {
   animation = 'slide-up',
+  as: Tag = 'div',
   class: classProp = '',
   className = '',
   delay = 0,
@@ -44,7 +46,7 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
 ], classProp, className)
 ---
 
-<div
+<Tag
   class:list={classList}
   data-ui-reveal-group
   data-ui-reveal-once={String(once)}
@@ -53,4 +55,4 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
   {...passthrough}
 >
   <slot />
-</div>
+</Tag>

package/components/ScatterChart.astro

@@ -6,8 +6,10 @@ import {
   formatLumenChartSummary,
   getLumenChartTicks,
   getLumenChartToneClassName,
+  type LumenChartLabels,
   type LumenChartScaleType,
   type LumenChartSeries,
+  resolveLumenChartLabels,
   scaleLumenChartValue } from '@santi020k/lumen-core'
 
 import Chart from './Chart.astro'
@@ -20,6 +22,7 @@ interface Props extends HTMLAttributes<'figure'> {
   emptyLabel?: string
   formatValue?: (value: number) => string
   heading?: string
+  labels?: Partial<LumenChartLabels>
   series: readonly LumenChartSeries[]
   showLegend?: boolean
   showTable?: boolean
@@ -32,9 +35,10 @@ const {
   class: classProp = '',
   className = '',
   description,
-  emptyLabel = 'No chart data available.',
+  emptyLabel,
   formatValue = String,
   heading,
+  labels,
   series,
   showLegend = series.length > 1,
   showTable = true,
@@ -44,6 +48,7 @@ const {
 } = Astro.props
 
 const geometry = createLumenScatterGeometry(series, { xScale })
+const resolvedLabels = resolveLumenChartLabels(labels)
 
 const projectedSeries = series.map(item => ({
   ...item,
@@ -51,14 +56,14 @@ const projectedSeries = series.map(item => ({
 })).filter(item => item.data.length > 0)
 
 const hasData = geometry.points.length > 0
-const summary = summaryProp ?? formatLumenChartSummary(projectedSeries, formatValue)
+const summary = summaryProp ?? formatLumenChartSummary(projectedSeries, formatValue, resolvedLabels)
 const xTicks = getLumenChartTicks(geometry.xDomain)
 const yTicks = getLumenChartTicks(geometry.domain)
 ---
 
 <Chart class:list={['ui-scatter-chart', classProp, className]} {caption} {description} {heading} {summary} {...rest}>
-  {showLegend && hasData && <ul class="ui-chart__legend" aria-label="Chart legend">{series.map((item, index) => <li class={getLumenChartToneClassName(item.tone, index)}><span aria-hidden="true" />{item.label}</li>)}</ul>}
-  {!hasData && <p class="ui-chart__empty" role="status">{emptyLabel}</p>}
+  {showLegend && hasData && <ul class="ui-chart__legend" aria-label={resolvedLabels.chartLegend}>{series.map((item, index) => <li class={getLumenChartToneClassName(item.tone, index)}><span aria-hidden="true" />{item.label}</li>)}</ul>}
+  {!hasData && <p class="ui-chart__empty" role="status">{emptyLabel ?? resolvedLabels.empty}</p>}
   <div class="ui-chart__plot" hidden={!hasData}>
     <svg aria-hidden="true" viewBox={`0 0 ${geometry.width} ${geometry.height}`}>
       <g class="ui-chart__grid">{yTicks.map(tick => {
@@ -74,5 +79,5 @@ const yTicks = getLumenChartTicks(geometry.domain)
       <g class="ui-scatter-chart__marks">{geometry.points.map(point => <circle class={getLumenChartToneClassName(point.tone)} cx={point.xCoordinate} cy={point.yCoordinate} r={point.radius}><title>{`${point.xLabel ?? point.x} · ${point.seriesLabel}: ${point.label ?? formatValue(point.y ?? 0)}`}</title></circle>)}</g>
     </svg>
   </div>
-  {showTable && hasData && <details class="ui-chart__data"><summary>View chart data</summary><div><table><thead><tr><th scope="col">X</th><th scope="col">Series</th><th scope="col">Value</th><th scope="col">Size</th></tr></thead><tbody>{geometry.points.map(point => <tr><th scope="row">{point.xLabel ?? point.x}</th><td>{point.seriesLabel}</td><td>{point.label ?? formatValue(point.y ?? 0)}</td><td>{point.size === undefined || point.size === null || !Number.isFinite(point.size) ? 'Not available' : formatValue(point.size)}</td></tr>)}</tbody></table></div></details>}
+  {showTable && hasData && <details class="ui-chart__data"><summary>{resolvedLabels.viewData}</summary><div><table><thead><tr><th scope="col">{resolvedLabels.x}</th><th scope="col">{resolvedLabels.series}</th><th scope="col">{resolvedLabels.value}</th><th scope="col">{resolvedLabels.size}</th></tr></thead><tbody>{geometry.points.map(point => <tr><th scope="row">{point.xLabel ?? point.x}</th><td>{point.seriesLabel}</td><td>{point.label ?? formatValue(point.y ?? 0)}</td><td>{point.size === undefined || point.size === null || !Number.isFinite(point.size) ? resolvedLabels.notAvailable : formatValue(point.size)}</td></tr>)}</tbody></table></div></details>}
 </Chart>

package/components/ScrollReveal.astro

@@ -5,6 +5,7 @@ import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 
 interface Props extends HTMLAttributes<'div'> {
   animation?: 'fade' | 'slide-up' | 'scale'
+  as?: 'article' | 'div' | 'section'
   class?: string | null
   className?: string
   delay?: number
@@ -15,6 +16,7 @@ interface Props extends HTMLAttributes<'div'> {
 
 const {
   animation = 'fade',
+  as: Tag = 'div',
   class: classProp = '',
   className = '',
   delay = 0,
@@ -40,7 +42,7 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
 ], classProp, className)
 ---
 
-<div
+<Tag
   class:list={classList}
   data-ui-reveal-once={String(once)}
   data-ui-reveal-threshold={safeThreshold}
@@ -49,4 +51,4 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
   {...passthrough}
 >
   <slot />
-</div>
+</Tag>

package/components/SkipLink.astro

@@ -21,6 +21,7 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
 
 <a
   class:list={classList}
+  data-slot="skip-link"
   {...passthrough}
 >
   <slot />

package/components/Table.astro

@@ -7,17 +7,20 @@ interface Props extends HTMLAttributes<'div'> {
   class?: string | null
   className?: string
   glass?: boolean | 'subtle' | 'strong'
+  layout?: 'records' | 'scroll'
 }
 
 const {
   class: classProp = '',
   className = '',
   glass = false,
+  layout = 'scroll',
   ...rest
 } = Astro.props
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
   'ui-table-wrap',
+  layout === 'records' && 'ui-table-wrap--records',
   glass && 'ui-table-wrap--glass',
   glass === 'subtle' && 'ui-glass-subtle',
   glass === 'strong' && 'ui-glass-strong'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@santi020k/lumen-astro",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "publishConfig": {
     "access": "public"
   },
@@ -42,15 +42,15 @@
     "lumen": "./bin/lumen.mjs"
   },
   "dependencies": {
-    "uqr": "^0.1.3",
-    "@santi020k/lumen-core": "^2.0.0",
-    "@santi020k/lumen": "^2.0.0"
+    "@santi020k/lumen": "^3.0.0",
+    "@santi020k/lumen-core": "^3.0.0",
+    "uqr": "^0.1.3"
   },
   "devDependencies": {
-    "@astrojs/ts-plugin": "^1.10.11",
-    "astro": "^7.2.6",
-    "typescript": "^6.0.3",
-    "vitest": "^4.1.11"
+    "@astrojs/ts-plugin": "^1.10.12",
+    "astro": "^7.3.5",
+    "typescript": "~6.0.3",
+    "vitest": "^5.0.1"
   },
   "peerDependencies": {
     "astro": ">=5"

package/runtime/UIPrimitives.astro

@@ -1456,6 +1456,20 @@ const initCopyButtons = (scope: ParentNode): void => {
 
     let resetTimer = 0
 
+    const setCopyButtonState = (state: 'copied' | 'error' | 'idle'): void => {
+      button.dataset.state = state
+
+      for (const part of button.querySelectorAll<HTMLElement>('[data-slot^="copy-"]')) {
+        const isActive = part.dataset.slot === `copy-${state}`
+
+        part.hidden = !isActive
+
+        part.setAttribute('aria-hidden', String(!isActive))
+      }
+    }
+
+    setCopyButtonState('idle')
+
     button.addEventListener('click', async () => {
       const label = button.dataset.copyLabel ?? 'Copy to clipboard'
 
@@ -1474,7 +1488,7 @@ const initCopyButtons = (scope: ParentNode): void => {
 
         await navigator.clipboard.writeText(value)
 
-        button.dataset.state = 'copied'
+        setCopyButtonState('copied')
 
         button.setAttribute('aria-label', copiedLabel)
 
@@ -1491,7 +1505,7 @@ const initCopyButtons = (scope: ParentNode): void => {
           }))
         }
       } catch (error) {
-        button.dataset.state = 'error'
+        setCopyButtonState('error')
 
         button.setAttribute('aria-label', errorLabel)
 
@@ -1518,7 +1532,7 @@ const initCopyButtons = (scope: ParentNode): void => {
         2000
 
       resetTimer = window.setTimeout(() => {
-        button.dataset.state = 'idle'
+        setCopyButtonState('idle')
 
         button.setAttribute('aria-label', label)
 

package/styles/critical.css

@@ -698,7 +698,7 @@
 .ui-badge--warning {
   background: hsl(var(--warning) / 0.12);
   border-color: hsl(var(--warning) / 0.36);
-  color: hsl(var(--warning));
+  color: hsl(var(--ink));
 }
 
 .ui-input,
@@ -893,7 +893,7 @@
 .ui-field > p,
 .ui-field > small {
   margin: 0;
-  color: hsl(var(--ink-muted));
+  color: hsl(var(--ink-soft));
   font-size: 0.8125rem;
   line-height: 1.5;
 }
@@ -1190,6 +1190,61 @@
   font-size: 0.875rem;
 }
 
+.ui-table__label {
+  display: none;
+}
+
+@media (max-width: 48rem) {
+.ui-table-wrap--records table,
+  .ui-table-wrap--records tbody {
+    display: block;
+    min-width: 0;
+  }
+
+.ui-table-wrap--records thead {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+.ui-table-wrap--records tbody tr {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
+    gap: 1rem;
+    padding: 1rem;
+  }
+
+.ui-table-wrap--records tbody tr + tr {
+    border-top: 1px solid hsl(var(--line));
+  }
+
+.ui-table-wrap--records tbody td {
+    display: block;
+    min-width: 0;
+    padding: 0;
+    border: 0;
+    overflow-wrap: anywhere;
+    white-space: normal;
+    text-align: start;
+  }
+
+.ui-table-wrap--records .ui-table__label {
+    display: block;
+    margin-bottom: 0.25rem;
+    color: hsl(var(--ink-soft));
+    font-size: 0.75rem;
+    font-weight: 600;
+  }
+
+.ui-table-wrap--records .ui-table__cell--wide {
+    grid-column: 1 / -1;
+  }
+}
+
 .ui-table-wrap th,
 .ui-data-table th {
   border-bottom: 1px solid hsl(var(--line));