@santi020k/lumen-astro 3.0.1 → 4.0.0

package/components/PhoneInput.astro

@@ -4,6 +4,7 @@ import type { HTMLAttributes } from 'astro/types'
 import {
   getLumenPhoneCountries,
   getLumenPhoneCountry,
+  type LumenControlVisualSize,
   type LumenPhoneCountry,
   type LumenPhoneCountryOptions,
   type LumenPhoneNumber,
@@ -11,6 +12,8 @@ import {
   resolveLumenPhoneNumber
 } from '@santi020k/lumen-core'
 
+import CountryFlag from './CountryFlag.astro'
+
 interface CountryOption {
   disabled?: boolean
   label: string
@@ -23,7 +26,7 @@ interface NormalizedCountryOption extends CountryOption {
   regionCode?: string
 }
 
-interface Props extends Omit<HTMLAttributes<'div'>, 'size'> {
+interface Props extends HTMLAttributes<'div'> {
   class?: string | null
   className?: string
   countries?: Country[]
@@ -31,17 +34,30 @@ interface Props extends Omit<HTMLAttributes<'div'>, 'size'> {
   countryLabel?: string
   countryName?: string
   countryValue?: string
+  disabled?: boolean
+  readOnly?: boolean
+  required?: boolean
+  errorMessage?: string
+  showValidationError?: boolean
+  inputProps?: Omit<HTMLAttributes<'input'>, 'value' | 'name' | 'type'>
   invalidNumberMessage?: string
   locale?: LumenPhoneCountryOptions['locale']
   name?: string
   placeholder?: string
-  size?: 'default' | 'lg' | 'sm'
+  visualSize?: LumenControlVisualSize
   value?: string
 }
 
 const {
   class: classProp = '',
   className = '',
+  id,
+  disabled = false,
+  readOnly = false,
+  required = false,
+  errorMessage,
+  showValidationError = true,
+  inputProps = {},
   countries = [],
   countryOptions,
   countryLabel = 'Country code',
@@ -51,18 +67,20 @@ const {
   locale,
   name = 'phone',
   placeholder = 'Phone number',
-  size = 'default',
+  visualSize = 'default',
   value,
   ...rest
 } = Astro.props
 
+const isDisabled = disabled || Boolean(inputProps.disabled)
+const isReadOnly = readOnly || Boolean(inputProps.readonly)
 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,
+  label: `${country.displayName} (${country.callingCode})`,
   regionCode: country.regionCode,
   value: country.regionCode
   })) :
@@ -95,6 +113,9 @@ const normalizePhoneValue = (detectedValue: LumenPhoneNumber | null): LumenPhone
 const phoneValue = normalizePhoneValue(detectedPhoneValue)
 const selectedCountryValue = usesMetadata ? phoneValue?.country.regionCode ?? selectedCountry?.regionCode : countryValue
 const renderedValue = usesMetadata ? phoneValue?.nationalNumber ?? value : value
+const inputId = id ?? inputProps.id ?? `phone-${crypto.randomUUID()}`
+const errorId = `phone-error-${crypto.randomUUID()}`
+const effectiveError = errorMessage || (showValidationError && phoneValue && phoneValue.nationalNumber.length > 0 && !phoneValue.isValid ? invalidNumberMessage : '')
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
   'ui-phone-input',
@@ -104,21 +125,39 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
 
 <div
   class:list={classList}
+  data-disabled={isDisabled || undefined}
+  data-readonly={isReadOnly || undefined}
+  data-size={visualSize}
+  data-slot="phone-input"
+  data-error-message={errorMessage}
+  data-error-id={errorId}
+  data-show-validation-error={String(showValidationError)}
+  data-invalid={effectiveError ? 'true' : undefined}
   data-e164={phoneValue?.e164}
   data-invalid-number-message={invalidNumberMessage}
   data-ui-phone-input={usesMetadata ? '' : undefined}
   data-valid={phoneValue ? String(phoneValue.isValid) : undefined}
   {...passthrough}
 >
+  <span class="ui-phone-input__picker" data-slot="phone-country">
+    {usesMetadata && (
+<span aria-hidden="true" class="ui-phone-input__selection">
+      <CountryFlag decorative regionCode={phoneValue?.country.regionCode ?? selectedCountry?.regionCode ?? countryValue} />
+      <span data-ui-phone-code>{phoneValue?.country.callingCode ?? selectedCountry?.callingCode}</span>
+      <span class="ui-phone-input__chevron" />
+    </span>
+)}
   <select
     aria-label={countryLabel}
     class:list={[
       'ui-select',
       'ui-phone-input__country',
-      size === 'sm' && 'ui-select--sm',
-      size === 'lg' && 'ui-select--lg'
+      visualSize === 'sm' && 'ui-select--sm',
+      visualSize === 'lg' && 'ui-select--lg'
     ]}
+    disabled={isDisabled || isReadOnly || normalizedCountries.length === 0}
     name={countryName}
+    form={inputProps.form}
   >
     {normalizedCountries.map(country => (
       <option
@@ -130,13 +169,22 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
       </option>
     ))}
   </select>
+  </span>
   <input
-    autocomplete="tel"
+    {...inputProps}
+    id={inputId}
+    autocomplete={inputProps.autocomplete ?? 'tel-national'}
+    disabled={disabled || inputProps.disabled}
+    readonly={readOnly || inputProps.readonly}
+    required={required || inputProps.required}
+    aria-invalid={effectiveError ? 'true' : inputProps['aria-invalid']}
+    aria-errormessage={effectiveError ? errorId : inputProps['aria-errormessage']}
+    aria-describedby={[inputProps['aria-describedby'], effectiveError ? errorId : undefined].filter(Boolean).join(' ') || undefined}
     class:list={[
       'ui-input',
       'ui-phone-input__number',
-      size === 'sm' && 'ui-input--sm',
-      size === 'lg' && 'ui-input--lg'
+      visualSize === 'sm' && 'ui-input--sm',
+      visualSize === 'lg' && 'ui-input--lg'
     ]}
     inputmode="tel"
     name={name}
@@ -144,4 +192,7 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
     type="tel"
     value={renderedValue}
   />
+  {isReadOnly && !isDisabled && <input name={countryName} form={inputProps.form} type="hidden" value={selectedCountryValue} />}
 </div>
+
+<span class="ui-phone-input__error" id={errorId} role="alert" hidden={!effectiveError}>{effectiveError}</span>

package/components/PhoneNumber.astro

@@ -0,0 +1,19 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { formatLumenPhoneNumber, type LumenPhoneNumber } from '@santi020k/lumen-core'
+
+import CountryFlag from './CountryFlag.astro'
+
+interface Props extends HTMLAttributes<'span'> {
+  value: LumenPhoneNumber
+  link?: boolean
+}
+
+const { value, link = false, class: className, ...props } = Astro.props
+const Tag = link && value.isValid && value.e164 ? 'a' : 'span'
+---
+<Tag {...props} class:list={['ui-phone-number', className]} href={link && value.isValid && value.e164 ? `tel:${value.e164}` : undefined} title={value.country.displayName}>
+  <CountryFlag decorative regionCode={value.country.regionCode} />
+  <span>{formatLumenPhoneNumber(value) || '—'}</span>
+</Tag>

package/components/PieChart.astro

@@ -1,7 +1,7 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
 
-import {
+import { createLumenChartDatumActivation,
   createLumenPieGeometry,
   formatLumenChartSummary,
   getLumenChartToneClassName,
@@ -12,7 +12,10 @@ import {
   type LumenPieChartVariant,
   resolveLumenChartLabels } from '@santi020k/lumen-core'
 
+import { createChartDatumAction } from '../runtime/chart-actions'
+
 import Chart from './Chart.astro'
+import ChartDatumActions from './ChartDatumActions.astro'
 
 interface Props extends HTMLAttributes<'figure'> {
   caption?: string
@@ -21,6 +24,7 @@ interface Props extends HTMLAttributes<'figure'> {
   class?: string | null
   className?: string
   description?: string
+  drilldown?: boolean
   glass?: boolean | 'subtle' | 'strong'
   heading?: string
   labels?: Partial<LumenChartLabels>
@@ -39,6 +43,7 @@ const {
   class: classProp = '',
   className = '',
   description,
+  drilldown = false,
   glass = false,
   heading,
   labels,
@@ -66,6 +71,21 @@ const percentageFor = (percentage: number) => new Intl.NumberFormat(undefined, {
   maximumFractionDigits: percentage < 0.01 ? 1 : 0,
   style: 'percent'
 }).format(percentage)
+
+const datumActions = drilldown ?
+geometry.slices.map((slice, index) => {
+  const datum = renderedSeries.data[index]
+
+  return datum ?
+createChartDatumAction(
+    createLumenChartDatumActivation(series.id, datum),
+    `${slice.label} · ${series.label}: ${valueFormatter(slice.value)}`,
+    resolvedLabels
+  ) :
+null
+}) :
+[]
+
 ---
 
 <Chart
@@ -76,6 +96,7 @@ const percentageFor = (percentage: number) => new Intl.NumberFormat(undefined, {
   {heading}
   {summary}
   {...rest}
+  data-ui-chart-activation={drilldown || undefined}
 >
   {
     showLegend && hasData && (
@@ -98,9 +119,10 @@ const percentageFor = (percentage: number) => new Intl.NumberFormat(undefined, {
     >
       <g class="ui-pie-chart__slices">
         {
-          geometry.slices.map(slice => (
+          geometry.slices.map((slice, index) => (
             <path
               class={getLumenChartToneClassName(slice.tone)}
+              data-ui-chart-datum={datumActions[index]?.serialized}
               d={slice.path}
               fill-rule="evenodd"
             >
@@ -130,7 +152,7 @@ const percentageFor = (percentage: number) => new Intl.NumberFormat(undefined, {
     showTable && hasData && (
       <details class="ui-chart__data">
         <summary>{resolvedLabels.viewData}</summary>
-        <div>
+        <div role="group" tabindex="0" aria-label={resolvedLabels.chartData}>
           <table>
             <thead>
               <tr>
@@ -153,4 +175,5 @@ const percentageFor = (percentage: number) => new Intl.NumberFormat(undefined, {
       </details>
     )
   }
+  {drilldown && <ChartDatumActions actions={datumActions} label={resolvedLabels.exploreData} />}
 </Chart>

package/components/PromptComposer.astro

@@ -0,0 +1,36 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { canSubmitLumenPrompt, normalizeLumenPromptLimit } from '@santi020k/lumen-core'
+
+import Button from './Button.astro'
+import Form from './Form.astro'
+import Label from './Label.astro'
+import Stack from './Stack.astro'
+import Textarea from './Textarea.astro'
+
+interface Props extends HTMLAttributes<'form'> {
+  disabled?: boolean
+  label?: string
+  maxLength?: number
+  pending?: boolean
+  sendLabel?: string
+  stopLabel?: string
+  submitOnEnter?: boolean
+  value?: string
+}
+
+const { class: className, disabled = false, id = `prompt-${crypto.randomUUID()}`, label = 'Message', maxLength = 4000, pending = false, sendLabel = 'Send', stopLabel = 'Stop', submitOnEnter = false, value = '', ...rest } = Astro.props
+const limit = normalizeLumenPromptLimit(maxLength)
+---
+
+<Form {...rest} class:list={['ui-prompt-composer', className]} data-ui-prompt-composer data-disabled={String(disabled)} data-pending={String(pending)} data-submit-on-enter={String(submitOnEnter)} enhance={false} method="post" status={pending ? 'submitting' : 'idle'}>
+  <Label for={id}>{label}</Label>
+  <Textarea id={id} data-ui-prompt-input disabled={disabled} maxlength={limit} name="prompt" required rows={3}>{value}</Textarea>
+  <Stack direction="horizontal" gap="related" wrap>
+    <slot name="actions" />
+    <Button data-ui-prompt-send disabled={disabled || pending || (!rest.action && !canSubmitLumenPrompt(value, limit))} type="submit">{sendLabel}</Button>
+    <Button data-ui-prompt-stop disabled={disabled} hidden={!pending} type="button" variant="secondary">{stopLabel}</Button>
+  </Stack>
+  <slot />
+</Form>

package/components/RangeChart.astro

@@ -1,9 +1,12 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
 
-import { createLumenRangeGeometry, getLumenChartTicks, getLumenChartToneClassName, type LumenChartLabels, type LumenChartTone, type LumenRangeDatum, resolveLumenChartLabels, scaleLumenChartValue } from '@santi020k/lumen-core'
+import { createLumenRangeDatumActivation, createLumenRangeGeometry, getLumenChartCategoryTicks, getLumenChartTicks, getLumenChartToneClassName, type LumenChartLabels, type LumenChartTone, type LumenRangeDatum, resolveLumenChartLabels, scaleLumenChartValue } from '@santi020k/lumen-core'
+
+import { createChartDatumAction } from '../runtime/chart-actions'
 
 import Chart from './Chart.astro'
+import ChartDatumActions from './ChartDatumActions.astro'
 
 interface Props extends HTMLAttributes<'figure'> {
   caption?: string
@@ -11,6 +14,7 @@ interface Props extends HTMLAttributes<'figure'> {
   className?: string
   data: readonly LumenRangeDatum[]
   description?: string
+  drilldown?: boolean
   formatValue?: (value: number) => string
   heading?: string
   labels?: Partial<LumenChartLabels>
@@ -19,7 +23,7 @@ interface Props extends HTMLAttributes<'figure'> {
   tone?: LumenChartTone
 }
 
-const { caption, class: classProp = '', className = '', data, description, formatValue = String, heading, labels, showTable = true, summary: summaryProp, tone = 'series-1', ...rest } = Astro.props
+const { caption, class: classProp = '', className = '', data, description, drilldown = false, formatValue = String, heading, labels, showTable = true, summary: summaryProp, tone = 'series-1', ...rest } = Astro.props
 const width = 640
 const height = 320
 const padding = 44
@@ -32,29 +36,55 @@ const summary = summaryProp ?? (
     resolvedLabels.formatRangeSummary(geometry.points.length)
 )
 
+const categoryTicks = getLumenChartCategoryTicks(geometry.points.map(point => String(point.xLabel ?? point.x)), {
+  start: padding,
+  end: width - padding,
+  positions: geometry.points.map(point => point.xCoordinate)
+})
+
 const ticks = getLumenChartTicks(geometry.domain)
+
+const datumActions = drilldown ?
+geometry.points.map(point => createChartDatumAction(
+  createLumenRangeDatumActivation(point),
+  `${point.xLabel ?? point.x}: ${point.label ?? `${formatValue(point.low ?? 0)}–${formatValue(point.high ?? 0)}`}`,
+  resolvedLabels
+)) :
+[]
+
 ---
 
-<Chart class:list={['ui-range-chart', getLumenChartToneClassName(tone), classProp, className]} {caption} {description} {heading} {summary} {...rest}>
+<Chart class:list={['ui-range-chart', getLumenChartToneClassName(tone), classProp, className]} {caption} {description} {heading} {summary} {...rest} data-ui-chart-activation={drilldown || undefined}>
   {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="
+  <div aria-label={resolvedLabels.chartData} class="ui-chart__plot" role="region" tabindex="0" hidden={geometry.points.length === 0}><svg aria-hidden="true" viewBox={`0 0 ${width} ${height}`}><g class="
     ui-chart__grid
   "
-                                                                                                                               >{ticks.map(tick => {
+                                                                                                                                                                                                >{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
+})}</g><g class="ui-chart__axis-labels">{categoryTicks.map(tick => <text x={tick.position} y={height - 12} text-anchor={tick.textAnchor}>{tick.label}</text>)}</g><path
 class="ui-range-chart__area"
 d={geometry.areaPath}
-       />{geometry.points.map(point => (
+                                                                                                                                                                  />{geometry.points.map((point, index) => (
 <line
+data-ui-chart-datum={datumActions[index]?.serialized}
 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>
+))}{drilldown && geometry.points.map((point, index) => (
+  <rect
+class="ui-chart__datum-hit"
+x={point.xCoordinate - 10}
+    y={Math.min(point.highCoordinate, point.lowCoordinate) - Math.max(0, 20 - Math.abs(point.highCoordinate - point.lowCoordinate)) / 2}
+    width="20"
+height={Math.max(20, Math.abs(point.highCoordinate - point.lowCoordinate))}
+    data-ui-chart-datum={datumActions[index]?.serialized}
+  />
 ))}</svg></div>
-  {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>}
+  {showTable && <details class="ui-chart__data"><summary>{resolvedLabels.viewData}</summary><div role="group" tabindex="0" aria-label={resolvedLabels.chartData}><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>}
+  {drilldown && <ChartDatumActions actions={datumActions} label={resolvedLabels.exploreData} />}
 </Chart>

package/components/ScatterChart.astro

@@ -1,33 +1,46 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
 
-import {
+import { createLumenChartDatumActivation,
   createLumenScatterGeometry,
+  createLumenScatterReferences,
   formatLumenChartSummary,
   getLumenChartTicks,
   getLumenChartToneClassName,
+  getLumenScatterXTicks,
+  type LumenChartDomain,
   type LumenChartLabels,
-  type LumenChartScaleType,
   type LumenChartSeries,
+  type LumenScatterReference,
+  type LumenScatterScaleType,
   resolveLumenChartLabels,
-  scaleLumenChartValue } from '@santi020k/lumen-core'
+  scaleLumenChartValue,  scaleLumenScatterX } from '@santi020k/lumen-core'
+
+import { createChartDatumAction } from '../runtime/chart-actions'
 
 import Chart from './Chart.astro'
+import ChartDatumActions from './ChartDatumActions.astro'
 
 interface Props extends HTMLAttributes<'figure'> {
   caption?: string
   class?: string | null
   className?: string
   description?: string
+  drilldown?: boolean
   emptyLabel?: string
   formatValue?: (value: number) => string
+  formatX?: (value: number | string) => string
+  formatY?: (value: number) => string
+  xDomain?: Partial<LumenChartDomain>
+  domain?: Partial<LumenChartDomain>
+  references?: readonly LumenScatterReference[]
   heading?: string
   labels?: Partial<LumenChartLabels>
   series: readonly LumenChartSeries[]
   showLegend?: boolean
   showTable?: boolean
   summary?: string
-  xScale?: Exclude<LumenChartScaleType, 'categorical'>
+  xScale?: LumenScatterScaleType
 }
 
 const {
@@ -35,8 +48,14 @@ const {
   class: classProp = '',
   className = '',
   description,
+  drilldown = false,
   emptyLabel,
   formatValue = String,
+  formatX = String,
+  formatY = formatValue,
+  xDomain,
+  domain,
+  references = [],
   heading,
   labels,
   series,
@@ -47,7 +66,9 @@ const {
   ...rest
 } = Astro.props
 
-const geometry = createLumenScatterGeometry(series, { xScale })
+const plotId = `ui-scatter-${crypto.randomUUID()}`
+const geometry = createLumenScatterGeometry(series, { xScale, ...(xDomain ? { xDomain } : {}), ...(domain ? { domain } : {}) })
+const referenceGeometry = createLumenScatterReferences(references, geometry, xScale)
 const resolvedLabels = resolveLumenChartLabels(labels)
 
 const projectedSeries = series.map(item => ({
@@ -56,28 +77,55 @@ const projectedSeries = series.map(item => ({
 })).filter(item => item.data.length > 0)
 
 const hasData = geometry.points.length > 0
-const summary = summaryProp ?? formatLumenChartSummary(projectedSeries, formatValue, resolvedLabels)
-const xTicks = getLumenChartTicks(geometry.xDomain)
+const summary = summaryProp ?? formatLumenChartSummary(projectedSeries, formatY, resolvedLabels)
+const xTicks = getLumenScatterXTicks(geometry.xDomain, xScale)
 const yTicks = getLumenChartTicks(geometry.domain)
+
+const datumActions = drilldown ?
+geometry.points.map(point => createChartDatumAction(
+  createLumenChartDatumActivation(point.seriesId, point),
+  `${point.xLabel ?? formatX(point.x)} · ${point.seriesLabel}: ${point.label ?? formatY(point.y ?? 0)}`,
+  resolvedLabels
+)) :
+[]
+
 ---
 
-<Chart class:list={['ui-scatter-chart', classProp, className]} {caption} {description} {heading} {summary} {...rest}>
+<Chart class:list={['ui-scatter-chart', classProp, className]} {caption} {description} {heading} {summary} {...rest} data-ui-chart-activation={drilldown || undefined}>
   {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}>
+  <div aria-label={resolvedLabels.chartData} class="ui-chart__plot" role="region" tabindex="0" hidden={!hasData}>
     <svg aria-hidden="true" viewBox={`0 0 ${geometry.width} ${geometry.height}`}>
+      <defs><clipPath id={plotId}><rect x="44" y="44" width={geometry.width - 88} height={geometry.height - 88} /></clipPath></defs>
       <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></>
+ return <><line x1="44" x2={geometry.width - 44} y1={y} y2={y}/><text x="36" y={y}>{formatY(tick)}</text></>
 })}</g>
       <g class="ui-chart__axis-labels">{xTicks.map(tick => {
- const x = scaleLumenChartValue(tick, geometry.xDomain, 44, geometry.width - 44)
+ const x = scaleLumenScatterX(tick, geometry.xDomain, 44, geometry.width - 44, xScale)
 
- return <text text-anchor="middle" x={x} y={geometry.height - 14}>{formatValue(tick)}</text>
+ return <text text-anchor="middle" x={x} y={geometry.height - 14}>{formatX(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>
+      <g class="ui-scatter-chart__references" clip-path={`url(#${plotId})`}>{referenceGeometry.map(reference => reference.region ?
+        <rect x={Math.min(reference.x1, reference.x2)} y={Math.min(reference.y1, reference.y2)} width={Math.abs(reference.x2 - reference.x1)} height={Math.abs(reference.y2 - reference.y1)}><title>{reference.label}</title></rect> :
+        <line x1={reference.x1} x2={reference.x2} y1={reference.y1} y2={reference.y2}><title>{reference.label}</title></line>)}</g>
+      <g class="ui-scatter-chart__marks" clip-path={`url(#${plotId})`}>{geometry.points.map((point, index) => <circle data-ui-chart-datum={datumActions[index]?.serialized} class={getLumenChartToneClassName(point.tone)} cx={point.xCoordinate} cy={point.yCoordinate} r={point.radius}><title>{`${point.xLabel ?? formatX(point.x)} · ${point.seriesLabel}: ${point.label ?? formatY(point.y ?? 0)}`}</title></circle>)}</g>
+      {drilldown && geometry.points.map((point, index) => point.xCoordinate >= 44 && point.xCoordinate <= geometry.width - 44 && point.yCoordinate >= 44 && point.yCoordinate <= geometry.height - 44 && (
+        <circle
+class="ui-chart__datum-hit"
+cx={point.xCoordinate}
+cy={point.yCoordinate}
+r={Math.max(10, point.radius)}
+          data-ui-chart-datum={datumActions[index]?.serialized}
+        />
+      ))}
+
     </svg>
   </div>
-  {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>}
+  {referenceGeometry.length > 0 && (
+<ul class="ui-scatter-chart__reference-labels">{referenceGeometry.map(reference => <li>{reference.label}</li>)}</ul>
+)}
+  {showTable && hasData && <details class="ui-chart__data"><summary>{resolvedLabels.viewData}</summary><div role="group" tabindex="0" aria-label={resolvedLabels.chartData}><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 ?? formatX(point.x)}</th><td>{point.seriesLabel}</td><td>{point.label ?? formatY(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>}
+  {drilldown && <ChartDatumActions actions={datumActions} label={resolvedLabels.exploreData} />}
 </Chart>

package/components/Segmented.astro

@@ -1,7 +1,7 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
 
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+import { type LumenControlVisualSize, resolveLumenAstroProps } from '@santi020k/lumen-core'
 
 type SegmentedOption = string | { disabled?: boolean, label: string, value: string }
 
@@ -11,7 +11,7 @@ interface Props extends HTMLAttributes<'div'> {
   defaultValue?: string
   name?: string
   options?: SegmentedOption[]
-  size?: 'default' | 'sm' | 'lg'
+  visualSize?: LumenControlVisualSize
   value?: string
 }
 
@@ -22,7 +22,7 @@ const {
   defaultValue,
   name = 'segmented',
   options = [],
-  size = 'default',
+  visualSize = 'default',
   value = defaultValue,
   ...rest
 } = Astro.props
@@ -31,8 +31,8 @@ const normalized = options.map(option => typeof option === 'string' ? { disabled
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
   'ui-segmented',
-  size === 'sm' && 'ui-segmented--sm',
-  size === 'lg' && 'ui-segmented--lg'
+  visualSize === 'sm' && 'ui-segmented--sm',
+  visualSize === 'lg' && 'ui-segmented--lg'
 ], classProp, className)
 ---
 

package/components/Select.astro

@@ -1,7 +1,7 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
 
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+import { type LumenControlVisualSize, resolveLumenAstroProps } from '@santi020k/lumen-core'
 
 interface Option {
   disabled?: boolean
@@ -11,13 +11,13 @@ interface Option {
 
 type SelectOption = Option | string
 
-interface Props extends Omit<HTMLAttributes<'select'>, 'size'> {
+interface Props extends HTMLAttributes<'select'> {
   class?: string | null
   className?: string
   glass?: boolean | 'subtle' | 'strong'
   options?: SelectOption[]
   placeholder?: string
-  size?: 'default' | 'lg' | 'md' | 'sm'
+  visualSize?: LumenControlVisualSize
 }
 
 const {
@@ -30,7 +30,7 @@ const {
   options = [],
   placeholder,
   required = false,
-  size = 'default',
+  visualSize = 'default',
   value,
   ...rest
 } = Astro.props
@@ -63,8 +63,8 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
     class:list={[
       'ui-select',
       'ui-select__native',
-      size === 'sm' && 'ui-select--sm',
-      size === 'lg' && 'ui-select--lg'
+      visualSize === 'sm' && 'ui-select--sm',
+      visualSize === 'lg' && 'ui-select--lg'
     ]}
     data-ui-select-native
     disabled={disabled}
@@ -98,8 +98,8 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
       class:list={[
         'ui-select',
         'ui-select__trigger',
-        size === 'sm' && 'ui-select--sm',
-        size === 'lg' && 'ui-select--lg'
+        visualSize === 'sm' && 'ui-select--sm',
+        visualSize === 'lg' && 'ui-select--lg'
       ]}
       data-ui-select-trigger
       disabled={disabled}

package/components/SourceCitation.astro

@@ -0,0 +1,18 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenCitationHref } from '@santi020k/lumen-core'
+
+import Link from './Link.astro'
+
+interface Props extends Omit<HTMLAttributes<'a'>, 'href'> { href: string, label: string }
+
+const { class: className, href, label, ...rest } = Astro.props
+const safeHref = resolveLumenCitationHref(href)
+---
+
+{safeHref ?
+<Link {...rest} class:list={['ui-source-citation', className]} href={safeHref} rel="noopener noreferrer">{label}<slot /></Link> :
+(
+<span class:list={['ui-source-citation', className]}>{label}<slot /></span>
+)}