@santi020k/lumen-astro 1.4.0 → 1.7.0-rc.0

package/README.md

@@ -60,6 +60,15 @@ incremental migrations, but new code should keep native behavior and visual styl
 <NativeSelect size={8} visualSize="lg" />
 ```
 
+`PhoneInput` generates localized country names, supplementary flags, and calling codes when custom
+`countries` are not provided. Mount `UIPrimitives` once to enable as-you-type formatting,
+metadata-backed validation, automatic country detection for pasted international numbers, and the
+`ui:phone-change` event with a `LumenPhoneNumber` detail.
+
+```astro
+<PhoneInput countryValue="CO" locale="en-US" name="hospitalPhone" />
+```
+
 ## Compound interactive components
 
 Popover, dropdown menu, tabs, and tooltip parts expose the DOM and ARIA contracts consumed by the
@@ -216,7 +225,9 @@ non-code content `Code` semantics.
 ## 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
+trends, `PieChart` for a small part-to-whole breakdown, `ScatterChart` for numeric relationships,
+`Heatmap` for a matrix, `RangeChart` for intervals, and `ComboChart` for a shared-domain mix of bars,
+lines, and areas. The chart components accept
 already-aggregated series, use Lumen data-color tokens, and include a revealable semantic data
 table by default.
 
@@ -237,6 +248,10 @@ const series = [{
 `PieChart` accepts one `LumenChartSeries`; its data points become slices. It defaults to
 `variant="donut"` and also supports `variant="pie"`.
 
+Every chart includes a factual screen-reader summary by default and accepts `summary` for more
+useful domain context. See [data visualization](../../docs/data-visualization.md) for selection,
+missing-data, live-data, and accessibility guidance.
+
 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.

package/components/BarChart.astro

@@ -3,6 +3,7 @@ import type { HTMLAttributes } from 'astro/types'
 
 import {
   createLumenBarGeometry,
+  formatLumenChartSummary,
   getLumenChartTicks,
   getLumenChartToneClassName,
   hasLumenChartData,
@@ -31,6 +32,7 @@ interface Props extends HTMLAttributes<'figure'> {
   series: readonly LumenChartSeries[]
   showLegend?: boolean
   showTable?: boolean
+  summary?: string
 }
 
 const {
@@ -49,6 +51,7 @@ const {
   series,
   showLegend = series.length > 1,
   showTable = true,
+  summary = formatLumenChartSummary(series, formatValue),
   ...rest
 } = Astro.props
 
@@ -72,7 +75,7 @@ const labelFor = (item: LumenChartSeries, category: number | string) => (
 const formattedValueFor = (item: LumenChartSeries, category: number | string) => {
   const value = valueFor(item, category)
 
-  return value === null ? 'Not available' : formatValue(value)
+  return value === null || !Number.isFinite(value) ? 'Not available' : formatValue(value)
 }
 
 const categoryLabelFor = (category: number | string) => {
@@ -92,6 +95,7 @@ const margin = orientation === 'horizontal' ?
   {description}
   {glass}
   {heading}
+  {summary}
   {...rest}
 >
   {

package/components/Chart.astro

@@ -11,6 +11,7 @@ interface Props extends HTMLAttributes<'figure'> {
   glass?: boolean | 'subtle' | 'strong'
   heading?: string
   presentation?: 'bare' | 'default'
+  summary?: string
   value?: string
 }
 
@@ -22,6 +23,7 @@ const {
   glass = false,
   heading,
   presentation = 'default',
+  summary,
   value,
   ...rest
 } = Astro.props
@@ -53,6 +55,7 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
       </header>
     )
   }
+  {summary && <p class="ui-sr-only" data-ui-chart-summary>{summary}</p>}
   <slot />
   {caption && <figcaption>{caption}</figcaption>}
 </figure>

package/components/ComboChart.astro

@@ -0,0 +1,118 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import {
+  alignLumenChartSeries,
+  createLumenBarGeometry,
+  createLumenLineGeometry,
+  formatLumenChartSummary,
+  getLumenChartCategories,
+  getLumenChartDomain,
+  getLumenChartToneClassName,
+  hasLumenChartData,
+  type LumenChartDatum,
+  type LumenComboSeries,
+  resolveLumenChartTone } from '@santi020k/lumen-core'
+
+import Chart from './Chart.astro'
+
+interface Props extends HTMLAttributes<'figure'> {
+  caption?: string
+  class?: string | null
+  className?: string
+  description?: string
+  formatValue?: (value: number) => string
+  heading?: string
+  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 width = 640
+const height = 320
+const padding = 44
+const categories = getLumenChartCategories(series)
+
+const alignedSeries = series.map(item => ({
+  ...item,
+  data: alignLumenChartSeries(item, categories).data
+}))
+
+const domain = getLumenChartDomain(alignedSeries.flatMap(item => item.data.map(datum => datum.y)))
+const barSeries = alignedSeries.filter(item => item.mark === 'bar')
+const lineSeries = alignedSeries.filter(item => item.mark !== 'bar')
+const bars = createLumenBarGeometry(barSeries, { domain, height, width })
+
+const categoryPositions = new Map(
+  bars.categories.map(category => [`${typeof category.category}:${String(category.category)}`, category.x])
+)
+
+const drawableWidth = width - padding * 2
+
+const alignComboLineDatum = (datum: LumenChartDatum): LumenChartDatum => {
+  if (barSeries.length === 0) return datum
+
+  return {
+    ...datum,
+    x: ((categoryPositions.get(`${typeof datum.x}:${String(datum.x)}`) ?? padding) - padding) / drawableWidth
+  }
+}
+
+const lineGeometryOptions = {
+  domain,
+  height,
+  padding,
+  width,
+  ...(barSeries.length === 0 ?
+    {} :
+    {
+      xDomain: { max: 1, min: 0 },
+      xScale: 'linear' as const
+    })
+}
+
+const lines = lineSeries.map(item => createLumenLineGeometry(
+  item.data.map(alignComboLineDatum),
+  lineGeometryOptions
+))
+
+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>}
+  <div class="ui-chart__plot" hidden={!hasData}><svg aria-hidden="true" viewBox={`0 0 ${width} ${height}`}><g class="
+    ui-bar-chart__marks
+  "
+                                                                                                           >{bars.marks.map(mark => <rect class={getLumenChartToneClassName(mark.tone)} height={mark.height} rx="4" width={mark.width} x={mark.x} y={mark.y}><title>{`${mark.seriesLabel}: ${formatValue(mark.value)}`}</title></rect>)}</g>{lines.map((geometry, index) => {
+ const item = lineSeries[index]
+
+ if (!item) return null
+
+ const tone = resolveLumenChartTone(item.tone, index + barSeries.length)
+
+ return (
+<g class:list={['ui-line-chart__series', getLumenChartToneClassName(tone)]}>{item.mark === 'area' && geometry.areaPaths.map(path => (
+<path
+class="ui-line-chart__area"
+d={path}
+/>
+)) }<path
+class="ui-line-chart__line"
+d={geometry.path}
+    /></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 = 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>
+})}</tr>
+))}</tbody></table></div></details>
+)}
+</Chart>

package/components/Heatmap.astro

@@ -0,0 +1,32 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { createLumenHeatmapGeometry, type LumenHeatmapDatum } from '@santi020k/lumen-core'
+
+import Chart from './Chart.astro'
+
+interface Props extends HTMLAttributes<'figure'> {
+  caption?: string
+  class?: string | null
+  className?: string
+  data: readonly LumenHeatmapDatum[]
+  description?: string
+  formatValue?: (value: number) => string
+  heading?: string
+  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 geometry = createLumenHeatmapGeometry(data)
+const hasData = geometry.cells.some(cell => cell.value !== null && Number.isFinite(cell.value))
+---
+
+<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>}
+  <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>}
+</Chart>

package/components/Illustration.astro

@@ -1,7 +1,10 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
 
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+import {
+  renderLumenIllustrationSvg,
+  resolveLumenAstroProps
+} from '@santi020k/lumen-core'
 
 interface Props extends HTMLAttributes<'span'> {
   class?: string | null
@@ -28,6 +31,8 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
   `ui-illustration--${tone}`,
   `ui-illustration--${size}`
 ], classProp, className)
+
+const artwork = renderLumenIllustrationSvg(variant)
 ---
 
 <span
@@ -36,32 +41,5 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
   class:list={classList}
   role={label ? 'img' : undefined}
   {...passthrough}
->
-  <svg aria-hidden="true" fill="none" viewBox="0 0 120 120">
-    <circle class="ui-illustration__wash" cx="60" cy="60" r="48" />
-    {variant === 'empty' && (
-      <g>
-        <path d="M32 48h56l-7 35H39l-7-35Z" />
-        <path d="M43 48 49 36h22l6 12M47 66h26" />
-      </g>
-    )}
-    {variant === 'success' && (
-      <g>
-        <circle cx="60" cy="60" r="28" />
-        <path d="m45 60 10 10 21-23" />
-      </g>
-    )}
-    {variant === 'error' && (
-      <g>
-        <circle cx="60" cy="60" r="28" />
-        <path d="m49 49 22 22m0-22L49 71" />
-      </g>
-    )}
-    {variant === 'offline' && (
-      <g>
-        <path d="M37 74h44a14 14 0 0 0 1-28 23 23 0 0 0-42-4 16 16 0 0 0-3 32Z" />
-        <path d="m38 34 44 52" />
-      </g>
-    )}
-  </svg>
-</span>
+  set:html={artwork}
+/>

package/components/Image.astro

@@ -10,25 +10,32 @@ import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 type Props = (LocalImageProps | RemoteImageProps) & {
   class?: string | null
   className?: string
+  fit?: 'contain' | 'cover'
   invertOnDark?: boolean
+  radius?: 'full' | 'lg' | 'md' | 'none' | 'sm'
 }
 
 const {
   class: classProp = '',
   className = '',
+  fit = 'cover',
   invertOnDark = false,
   loading = 'lazy',
+  radius = 'lg',
   ...rest
 } = Astro.props
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
   'ui-image',
-  invertOnDark && 'ui-image--invert-dark'
+  invertOnDark && 'ui-image--invert-dark',
+  `ui-image--fit-${fit}`,
+  `ui-image--radius-${radius}`
 ], classProp, className)
 ---
 
 <AstroImage
   loading={loading}
   class:list={classList}
+  fit={fit}
   {...passthrough}
 />

package/components/LineChart.astro

@@ -4,6 +4,7 @@ import type { HTMLAttributes } from 'astro/types'
 import {
   alignLumenChartSeries,
   createLumenLineGeometry,
+  formatLumenChartSummary,
   getLumenChartCategories,
   getLumenChartDomain,
   getLumenChartTicks,
@@ -33,6 +34,7 @@ interface Props extends HTMLAttributes<'figure'> {
   series: readonly LumenChartSeries[]
   showLegend?: boolean
   showTable?: boolean
+  summary?: string
 }
 
 const {
@@ -51,6 +53,7 @@ const {
   series,
   showLegend = series.length > 1,
   showTable = true,
+  summary = formatLumenChartSummary(series, formatValue),
   ...rest
 } = Astro.props
 
@@ -99,6 +102,7 @@ const referenceY =
   {description}
   {glass}
   {heading}
+  {summary}
   {...rest}
 >
   {
@@ -227,7 +231,7 @@ const referenceY =
                     return (
                       <td>
                         {datum?.label ??
-                          (datum?.y === null || datum === undefined ?
+                          (datum?.y === undefined || datum.y === null || !Number.isFinite(datum.y) ?
                             'Not available' :
                             formatValue(datum.y))}
                       </td>

package/components/PhoneInput.astro

@@ -1,7 +1,15 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
 
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+import {
+  getLumenPhoneCountries,
+  getLumenPhoneCountry,
+  type LumenPhoneCountry,
+  type LumenPhoneCountryOptions,
+  type LumenPhoneNumber,
+  resolveLumenAstroProps,
+  resolveLumenPhoneNumber
+} from '@santi020k/lumen-core'
 
 interface CountryOption {
   disabled?: boolean
@@ -11,13 +19,20 @@ interface CountryOption {
 
 type Country = CountryOption | string
 
+interface NormalizedCountryOption extends CountryOption {
+  regionCode?: string
+}
+
 interface Props extends Omit<HTMLAttributes<'div'>, 'size'> {
   class?: string | null
   className?: string
   countries?: Country[]
+  countryOptions?: readonly LumenPhoneCountry[]
   countryLabel?: string
   countryName?: string
   countryValue?: string
+  invalidNumberMessage?: string
+  locale?: LumenPhoneCountryOptions['locale']
   name?: string
   placeholder?: string
   size?: 'default' | 'lg' | 'sm'
@@ -28,9 +43,12 @@ const {
   class: classProp = '',
   className = '',
   countries = [],
+  countryOptions,
   countryLabel = 'Country code',
   countryName = 'country',
-  countryValue,
+  countryValue = 'US',
+  invalidNumberMessage = 'Enter a complete phone number.',
+  locale,
   name = 'phone',
   placeholder = 'Phone number',
   size = 'default',
@@ -38,8 +56,45 @@ const {
   ...rest
 } = Astro.props
 
-const normalizedCountries = countries.map(country => typeof country === 'string' ? { label: country, value: country } : country)
-const hasCountryValue = countryValue !== undefined
+const phoneOptions = locale === undefined ? {} : { locale }
+const metadataCountries = countryOptions ?? getLumenPhoneCountries(phoneOptions)
+const usesMetadata = countries.length === 0
+
+const normalizedCountries: NormalizedCountryOption[] = usesMetadata ?
+  metadataCountries.map(country => ({
+  label: country.pickerLabel,
+  regionCode: country.regionCode,
+  value: country.regionCode
+  })) :
+  countries.map(country => typeof country === 'string' ? { label: country, value: country } : country)
+
+const selectedCountry = metadataCountries.find(country => (
+  country.regionCode === countryValue || country.callingCode === countryValue
+)) ?? metadataCountries[0] ?? getLumenPhoneCountry('US', phoneOptions)
+
+const detectedPhoneValue = selectedCountry && value ?
+  resolveLumenPhoneNumber(selectedCountry, value, phoneOptions) :
+  null
+
+const normalizePhoneValue = (detectedValue: LumenPhoneNumber | null): LumenPhoneNumber | null => {
+  if (!detectedValue || !selectedCountry) return detectedValue
+
+  const detectedCountryIsAllowed = metadataCountries.some(country => (
+    country.regionCode === detectedValue.country.regionCode
+  ))
+
+  if (detectedCountryIsAllowed) return detectedValue
+
+  const allowedCountryValue = detectedValue.nationalNumber.startsWith('+') ?
+    detectedValue.nationalNumber.slice(1) :
+    detectedValue.nationalNumber
+
+  return resolveLumenPhoneNumber(selectedCountry, allowedCountryValue, phoneOptions)
+}
+
+const phoneValue = normalizePhoneValue(detectedPhoneValue)
+const selectedCountryValue = usesMetadata ? phoneValue?.country.regionCode ?? selectedCountry?.regionCode : countryValue
+const renderedValue = usesMetadata ? phoneValue?.nationalNumber ?? value : value
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
   'ui-phone-input',
@@ -47,7 +102,14 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
 ], classProp, className)
 ---
 
-<div class:list={classList} {...passthrough}>
+<div
+  class:list={classList}
+  data-e164={phoneValue?.e164}
+  data-invalid-number-message={invalidNumberMessage}
+  data-ui-phone-input={usesMetadata ? '' : undefined}
+  data-valid={phoneValue ? String(phoneValue.isValid) : undefined}
+  {...passthrough}
+>
   <select
     aria-label={countryLabel}
     class:list={[
@@ -61,7 +123,8 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
     {normalizedCountries.map(country => (
       <option
         disabled={country.disabled}
-        selected={hasCountryValue && country.value === countryValue}
+        data-region={country.regionCode}
+        selected={country.value === selectedCountryValue}
         value={country.value}
       >{country.label}
       </option>
@@ -79,6 +142,6 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
     name={name}
     placeholder={placeholder}
     type="tel"
-    value={value}
+    value={renderedValue}
   />
 </div>

package/components/PieChart.astro

@@ -3,6 +3,7 @@ import type { HTMLAttributes } from 'astro/types'
 
 import {
   createLumenPieGeometry,
+  formatLumenChartSummary,
   getLumenChartToneClassName,
   getLumenPieChartVariantClassName,
   hasLumenPieData,
@@ -24,6 +25,7 @@ interface Props extends HTMLAttributes<'figure'> {
   series: LumenChartSeries
   showLegend?: boolean
   showTable?: boolean
+  summary?: string
   valueFormatter?: (value: number) => string
   variant?: LumenPieChartVariant
 }
@@ -41,6 +43,7 @@ const {
   showLegend = true,
   showTable = true,
   valueFormatter = String,
+  summary: summaryProp,
   variant = 'donut',
   ...rest
 } = Astro.props
@@ -48,6 +51,13 @@ const {
 const geometry = createLumenPieGeometry(series.data, { variant })
 const hasData = hasLumenPieData(series.data)
 
+const renderedSeries = {
+  ...series,
+  data: series.data.filter(datum => datum.y !== null && Number.isFinite(datum.y) && datum.y > 0)
+}
+
+const summary = summaryProp ?? formatLumenChartSummary([renderedSeries], valueFormatter)
+
 const percentageFor = (percentage: number) => new Intl.NumberFormat(undefined, {
   maximumFractionDigits: percentage < 0.01 ? 1 : 0,
   style: 'percent'
@@ -60,6 +70,7 @@ const percentageFor = (percentage: number) => new Intl.NumberFormat(undefined, {
   {description}
   {glass}
   {heading}
+  {summary}
   {...rest}
 >
   {

package/components/RangeChart.astro

@@ -0,0 +1,58 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { createLumenRangeGeometry, getLumenChartTicks, getLumenChartToneClassName, type LumenChartTone, type LumenRangeDatum, scaleLumenChartValue } from '@santi020k/lumen-core'
+
+import Chart from './Chart.astro'
+
+interface Props extends HTMLAttributes<'figure'> {
+  caption?: string
+  class?: string | null
+  className?: string
+  data: readonly LumenRangeDatum[]
+  description?: string
+  formatValue?: (value: number) => string
+  heading?: string
+  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 width = 640
+const height = 320
+const padding = 44
+const geometry = createLumenRangeGeometry(data, { height, padding, width })
+
+const summary = summaryProp ?? (
+  geometry.points.length === 0 ?
+    'No chart data available.' :
+    `${geometry.points.length} available ranges.`
+)
+
+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>}
+  <div class="ui-chart__plot" hidden={geometry.points.length === 0}><svg aria-hidden="true" viewBox={`0 0 ${width} ${height}`}><g class="
+    ui-chart__grid
+  "
+                                                                                                                               >{ticks.map(tick => {
+ const y = scaleLumenChartValue(tick, geometry.domain, height - padding, padding)
+
+ return <><line x1={padding} x2={width - padding} y1={y} y2={y}/><text x={padding - 8} y={y}>{formatValue(tick)}</text></>
+})}</g><path
+class="ui-range-chart__area"
+d={geometry.areaPath}
+       />{geometry.points.map(point => (
+<line
+class="ui-range-chart__interval"
+x1={point.xCoordinate}
+x2={point.xCoordinate}
+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>}
+</Chart>

package/components/ScatterChart.astro

@@ -0,0 +1,78 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import {
+  createLumenScatterGeometry,
+  formatLumenChartSummary,
+  getLumenChartTicks,
+  getLumenChartToneClassName,
+  type LumenChartScaleType,
+  type LumenChartSeries,
+  scaleLumenChartValue } from '@santi020k/lumen-core'
+
+import Chart from './Chart.astro'
+
+interface Props extends HTMLAttributes<'figure'> {
+  caption?: string
+  class?: string | null
+  className?: string
+  description?: string
+  emptyLabel?: string
+  formatValue?: (value: number) => string
+  heading?: string
+  series: readonly LumenChartSeries[]
+  showLegend?: boolean
+  showTable?: boolean
+  summary?: string
+  xScale?: Exclude<LumenChartScaleType, 'categorical'>
+}
+
+const {
+  caption,
+  class: classProp = '',
+  className = '',
+  description,
+  emptyLabel = 'No chart data available.',
+  formatValue = String,
+  heading,
+  series,
+  showLegend = series.length > 1,
+  showTable = true,
+  summary: summaryProp,
+  xScale = 'linear',
+  ...rest
+} = Astro.props
+
+const geometry = createLumenScatterGeometry(series, { xScale })
+
+const projectedSeries = series.map(item => ({
+  ...item,
+  data: geometry.points.filter(point => point.seriesId === item.id)
+})).filter(item => item.data.length > 0)
+
+const hasData = geometry.points.length > 0
+const summary = summaryProp ?? formatLumenChartSummary(projectedSeries, formatValue)
+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>}
+  <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 => {
+ const y = scaleLumenChartValue(tick, geometry.domain, geometry.height - 44, 44)
+
+ return <><line x1="44" x2={geometry.width - 44} y1={y} y2={y}/><text x="36" y={y}>{formatValue(tick)}</text></>
+})}</g>
+      <g class="ui-chart__axis-labels">{xTicks.map(tick => {
+ const x = scaleLumenChartValue(tick, geometry.xDomain, 44, geometry.width - 44)
+
+ return <text text-anchor="middle" x={x} y={geometry.height - 14}>{formatValue(tick)}</text>
+})}</g>
+      <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>}
+</Chart>

package/index.ts

@@ -38,6 +38,7 @@ 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'
+export { default as ComboChart } from './components/ComboChart.astro'
 export { default as Command } from './components/Command.astro'
 export { default as Container } from './components/Container.astro'
 export { default as ContextMenu } from './components/ContextMenu.astro'
@@ -68,6 +69,7 @@ export { default as FormattedDate } from './components/FormattedDate.astro'
 export { default as GradientDivider } from './components/GradientDivider.astro'
 export { default as Graphic } from './components/Graphic.astro'
 export { default as Grid } from './components/Grid.astro'
+export { default as Heatmap } from './components/Heatmap.astro'
 export { default as HoverCard } from './components/HoverCard.astro'
 export { default as Icon } from './components/Icon.astro'
 export { default as Illustration } from './components/Illustration.astro'
@@ -108,10 +110,12 @@ export { default as Progress } from './components/Progress.astro'
 export { default as Prose } from './components/Prose.astro'
 export { default as QRCode } from './components/QRCode.astro'
 export { default as RadioGroup } from './components/RadioGroup.astro'
+export { default as RangeChart } from './components/RangeChart.astro'
 export { default as Rating } from './components/Rating.astro'
 export { default as Resizable } from './components/Resizable.astro'
 export { default as RevealGroup } from './components/RevealGroup.astro'
 export { default as RichTextEditor } from './components/RichTextEditor.astro'
+export { default as ScatterChart } from './components/ScatterChart.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'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@santi020k/lumen-astro",
-  "version": "1.4.0",
+  "version": "1.7.0-rc.0",
   "publishConfig": {
     "access": "public"
   },
@@ -37,14 +37,14 @@
   ],
   "dependencies": {
     "uqr": "^0.1.3",
-    "@santi020k/lumen": "^1.4.0",
-    "@santi020k/lumen-core": "^1.4.0"
+    "@santi020k/lumen-core": "^1.7.0-rc.0",
+    "@santi020k/lumen": "^1.7.0-rc.0"
   },
   "devDependencies": {
-    "@astrojs/ts-plugin": "^1.10.10",
-    "astro": "^7.2.0",
+    "@astrojs/ts-plugin": "^1.10.11",
+    "astro": "^7.2.6",
     "typescript": "^6.0.3",
-    "vitest": "^4.1.10"
+    "vitest": "^4.1.11"
   },
   "peerDependencies": {
     "astro": ">=5"

package/runtime/UIPrimitives.astro

@@ -17,6 +17,7 @@ import {
   exportThemeFigmaVariables,
   formatLumenLanguageLabel,
   getLumenLocalePair,
+  getLumenPhoneCountry,
   getLumenRichTextShortcut,
   isLumenRichTextToggleCommand,
   type LumenLocaleOption,
@@ -24,7 +25,8 @@ import {
   type LumenRichTextCommandDetail,
   type LumenThemeTokens,
   lumenTokenNames,
-  normalizeLumenLocales } from '@santi020k/lumen-core'
+  normalizeLumenLocales,
+  resolveLumenPhoneNumber } from '@santi020k/lumen-core'
 
 /* eslint-disable complexity */
 /* Stateful DOM handlers stay local so Astro consumers do not need a framework runtime. */
@@ -71,6 +73,74 @@ const formControlSelector = [
   'textarea'
 ].join(',')
 
+const phoneInputSelector = '[data-ui-phone-input]'
+
+const initPhoneInputs = (scope: ParentNode): void => {
+  for (const root of scope.querySelectorAll<HTMLElement>(phoneInputSelector)) {
+    if (root.dataset.uiPhoneBound === 'true') continue
+
+    const countrySelect = root.querySelector<HTMLSelectElement>('.ui-phone-input__country')
+    const numberInput = root.querySelector<HTMLInputElement>('.ui-phone-input__number')
+
+    if (!countrySelect || !numberInput) continue
+
+    root.dataset.uiPhoneBound = 'true'
+
+    const locale = root.lang || document.documentElement.lang || undefined
+    const phoneOptions = locale ? { locale } : {}
+
+    const commit = (): void => {
+      const selectedOption = countrySelect.selectedOptions[0]
+      const regionCode = selectedOption?.dataset.region ?? countrySelect.value
+      const country = getLumenPhoneCountry(regionCode, phoneOptions)
+
+      if (!country) return
+
+      const detectedPhoneNumber = resolveLumenPhoneNumber(country, numberInput.value, phoneOptions)
+
+      const detectedCountryIsAllowed = Array.from(countrySelect.options).some(option => (
+        option.value === detectedPhoneNumber.country.regionCode
+      ))
+
+      const phoneNumber = detectedCountryIsAllowed ?
+        detectedPhoneNumber :
+        resolveLumenPhoneNumber(
+          country,
+          detectedPhoneNumber.nationalNumber.startsWith('+') ?
+            detectedPhoneNumber.nationalNumber.slice(1) :
+            detectedPhoneNumber.nationalNumber,
+          phoneOptions
+        )
+
+      const hasInput = phoneNumber.nationalNumber.length > 0
+      const invalidMessage = root.dataset.invalidNumberMessage ?? 'Enter a complete phone number.'
+
+      numberInput.value = phoneNumber.nationalNumber
+
+      countrySelect.value = phoneNumber.country.regionCode
+
+      numberInput.setCustomValidity(hasInput && !phoneNumber.isValid ? invalidMessage : '')
+
+      numberInput.setAttribute('aria-invalid', String(hasInput && !phoneNumber.isValid))
+
+      root.dataset.e164 = phoneNumber.e164 ?? ''
+
+      root.dataset.valid = String(phoneNumber.isValid)
+
+      root.dispatchEvent(new CustomEvent('ui:phone-change', {
+        bubbles: true,
+        detail: phoneNumber
+      }))
+    }
+
+    countrySelect.addEventListener('change', commit)
+
+    numberInput.addEventListener('input', commit)
+
+    if (numberInput.value) commit()
+  }
+}
+
 const validityMessageAttributes = [
   ['valueMissing', 'data-error-required'],
   ['typeMismatch', 'data-error-type'],
@@ -3375,13 +3445,13 @@ const kanbanColumnSelector = '[data-ui-kanban-column]'
 
 const initKanbanBoards = (scope: ParentNode): void => {
   for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-kanban]')) {
+    for (const handle of root.querySelectorAll<HTMLElement>('[data-ui-kanban-handle]'))
+      handle.draggable = true
+
     if (root.dataset.uiKanbanBound === 'true') continue
 
     root.dataset.uiKanbanBound = 'true'
 
-    for (const handle of root.querySelectorAll<HTMLElement>('[data-ui-kanban-handle]'))
-      handle.draggable = true
-
     let pointer: {
       active: boolean
       handle: HTMLElement
@@ -3391,13 +3461,21 @@ const initKanbanBoards = (scope: ParentNode): void => {
       startY: number
     } | undefined
 
-    const itemFor = (target: EventTarget | null): HTMLElement | null => target instanceof Element ?
-      target.closest<HTMLElement>('[data-ui-kanban-item]') :
-      null
+    const itemFor = (target: EventTarget | null): HTMLElement | null => {
+      const item = target instanceof Element ?
+        target.closest<HTMLElement>('[data-ui-kanban-item]') :
+        null
+
+      return item?.closest<HTMLElement>('[data-ui-kanban]') === root ? item : null
+    }
 
-    const columnFor = (target: EventTarget | null): HTMLElement | null => target instanceof Element ?
-      target.closest<HTMLElement>(kanbanColumnSelector) :
-      null
+    const columnFor = (target: EventTarget | null): HTMLElement | null => {
+      const column = target instanceof Element ?
+        target.closest<HTMLElement>(kanbanColumnSelector) :
+        null
+
+      return column?.closest<HTMLElement>('[data-ui-kanban]') === root ? column : null
+    }
 
     const clearState = (): void => {
       pointer = undefined
@@ -3580,8 +3658,7 @@ const initKanbanBoards = (scope: ParentNode): void => {
 
       pointer.item.dataset.state = 'dragging'
 
-      const target = document.elementFromPoint(event.clientX, event.clientY)
-        ?.closest<HTMLElement>(kanbanColumnSelector)
+      const target = columnFor(document.elementFromPoint(event.clientX, event.clientY))
 
       for (const column of root.querySelectorAll<HTMLElement>(kanbanColumnSelector)) {
         if (column === target) column.dataset.state = 'drop-target'
@@ -3592,8 +3669,7 @@ const initKanbanBoards = (scope: ParentNode): void => {
     root.addEventListener('pointerup', event => {
       if (!pointer || pointer.pointerId !== event.pointerId) return
 
-      const target = document.elementFromPoint(event.clientX, event.clientY)
-        ?.closest<HTMLElement>(kanbanColumnSelector)
+      const target = columnFor(document.elementFromPoint(event.clientX, event.clientY))
 
       if (pointer.active && target) requestMove(pointer.item, target, 'pointer')
 
@@ -5577,6 +5653,8 @@ const initUiPrimitives = (scope: ParentNode = document): void => {
 
   initFields(scope)
 
+  initPhoneInputs(scope)
+
   initForms(scope)
 
   initPasswordFields(scope)