@santi020k/lumen-astro 3.0.0 → 4.0.0

package/components/LineChart.astro

@@ -2,29 +2,37 @@
 import type { HTMLAttributes } from 'astro/types'
 
 import {
-  alignLumenChartSeries,
-  createLumenLineGeometry,
+  createLumenChartDatumActivation,
+  createLumenLineChartModel,
   formatLumenChartSummary,
-  getLumenChartCategories,
-  getLumenChartDomain,
-  getLumenChartTicks,
+  getLumenChartCategoryLabel,
+  getLumenChartMotionKey,
   getLumenChartToneClassName,
   hasLumenChartData,
   type LumenChartLabels,
   type LumenChartSeries,
+  type LumenLineChartOptions,
   resolveLumenChartLabels,
   resolveLumenChartTone,
   scaleLumenChartValue
 } from '@santi020k/lumen-core'
 
+import ChartInspection from '../internal/ChartInspection.astro'
+import { createChartDatumAction } from '../runtime/chart-actions'
+
+import Button from './Button.astro'
 import Chart from './Chart.astro'
+import ChartDatumActions from './ChartDatumActions.astro'
 
-interface Props extends HTMLAttributes<'figure'> {
+interface Props extends HTMLAttributes<'figure'>, LumenLineChartOptions {
+  interactive?: boolean
+  syncGroup?: string
   area?: boolean
   caption?: string
   class?: string | null
   className?: string
   description?: string
+  drilldown?: boolean
   emptyLabel?: string
   formatCategory?: (category: number | string) => string
   formatValue?: (value: number) => string
@@ -42,12 +50,21 @@ interface Props extends HTMLAttributes<'figure'> {
 
 const {
   area = false,
+  annotations = [],
+  domain: requestedDomain,
+  height: requestedHeight,
+  width: requestedWidth,
+  xDomain,
+  xScale = 'categorical',
+  interactive = false,
+  syncGroup,
   caption,
   class: classProp = '',
   className = '',
   description,
+  drilldown = false,
   emptyLabel,
-  formatCategory = String,
+  formatCategory,
   formatValue = String,
   glass = false,
   heading,
@@ -62,29 +79,22 @@ const {
 } = Astro.props
 
 const resolvedLabels = resolveLumenChartLabels(labels)
-const summary = summaryProp ?? formatLumenChartSummary(series, formatValue, resolvedLabels)
-const width = 640
-const height = 320
-const padding = 44
-const categories = getLumenChartCategories(series)
-const hasData = hasLumenChartData(series)
-const alignedSeries = series.map(item => alignLumenChartSeries(item, categories))
-
-const domain = getLumenChartDomain([
-  ...alignedSeries.flatMap(item => item.data.map(datum => datum.y)),
-  referenceValue ?? null
-], false)
-
-const geometries = alignedSeries.map(item => createLumenLineGeometry(item.data, {
-  domain,
-  height,
-  includeZero: false,
-  padding,
-  width
-}))
-
-const ticks = getLumenChartTicks(domain)
-const labelStep = Math.max(1, Math.ceil(categories.length / 8))
+
+const model = createLumenLineChartModel(series, {
+  annotations,
+xScale,
+  ...(requestedDomain ? { domain: requestedDomain } : {}),
+  ...(requestedHeight === undefined ? {} : { height: requestedHeight }),
+  ...(requestedWidth === undefined ? {} : { width: requestedWidth }),
+  ...(xDomain ? { xDomain } : {}),
+  ...(referenceValue === undefined ? {} : { referenceValue }),
+  ...(formatCategory ? { formatCategory } : {}),
+  formatValue
+})
+
+const { width, height, padding, paddingLeft, categories, categoryTicks, domain, geometries, ticks, series: alignedSeries } = model
+const hasData = hasLumenChartData(alignedSeries)
+const summary = summaryProp ?? formatLumenChartSummary(alignedSeries, formatValue, resolvedLabels)
 let markerStep = 1
 
 if (markers === false || markers === 'none') markerStep = Number.POSITIVE_INFINITY
@@ -92,14 +102,29 @@ else if (typeof markers === 'number') markerStep = Math.max(1, Math.round(marker
 else if (markers === 'auto') markerStep = Math.max(1, Math.ceil(categories.length / 24))
 
 const valueFor = (item: LumenChartSeries, category: number | string) => item.data.find(datum => datum.x === category)
-
-const categoryLabelFor = (category: number | string) => series.flatMap(item => item.data)
-  .find(datum => datum.x === category)?.xLabel ?? formatCategory(category)
+const categoryLabelFor = (category: number | string) => getLumenChartCategoryLabel(alignedSeries, category, formatCategory, 'detail')
 
 const referenceY =
   referenceValue === undefined ?
     undefined :
     scaleLumenChartValue(referenceValue, domain, height - padding, padding)
+
+const pointActions = drilldown ?
+geometries.map((geometry, index) => {
+  const item = alignedSeries[index]
+
+  return geometry.points.map(point => item ?
+createChartDatumAction(
+    createLumenChartDatumActivation(item.id, point),
+    `${categoryLabelFor(point.x)} · ${item.label}: ${formatValue(point.y ?? 0)}`,
+    resolvedLabels
+  ) :
+null)
+}) :
+[]
+
+const datumActions = pointActions.flat()
+
 ---
 
 <Chart
@@ -109,22 +134,31 @@ const referenceY =
   {glass}
   {heading}
   {summary}
+  data-ui-chart-interactive={interactive || undefined}
+  data-ui-chart-sync={syncGroup}
   {...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}
+            {interactive ? <Button aria-pressed="true" data-ui-chart-toggle={item.id} disabled size="sm" variant="ghost">{item.label}</Button> : <><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={rest['aria-label'] ?? heading ?? resolvedLabels.chartData}
+class="ui-chart__plot"
+data-ui-chart-interaction-plot={interactive || undefined}
+role="region"
+tabindex="0"
+hidden={!hasData}
+  >
     <svg
       aria-hidden="true"
       preserveAspectRatio="xMidYMid meet"
@@ -139,8 +173,8 @@ const referenceY =
 
             return (
               <>
-                <line x1={padding} x2={width - padding} y1={y} y2={y} />
-                <text x={padding - 8} y={y}>
+                <line x1={paddingLeft} x2={width - padding} y1={y} y2={y} />
+                <text x={paddingLeft - 8} y={y}>
                   {formatValue(tick)}
                 </text>
               </>
@@ -150,31 +184,26 @@ const referenceY =
       </g>
       <g class="ui-chart__axis-labels">
         {
-          categories.map((category, index) => {
-            if (
-              index % labelStep !== 0 &&
-              index !== categories.length - 1
-            )
-              return null
-
-            const denominator = Math.max(1, categories.length - 1)
-
-            const x =
-              padding + (index / denominator) * (width - padding * 2)
-
-            return (
-              <text text-anchor="middle" x={x} y={height - 14}>
-                {categoryLabelFor(category)}
-              </text>
-            )
-          })
+          categoryTicks.map(tick => (
+            <text text-anchor={tick.textAnchor} x={tick.position} y={height - 14}>
+              {tick.label}
+            </text>
+          ))
         }
       </g>
+      <svg
+x={paddingLeft}
+y={padding}
+width={width - padding - paddingLeft}
+height={height - 2 * padding}
+        viewBox={`${paddingLeft} ${padding} ${width - padding - paddingLeft} ${height - 2 * padding}`}
+        overflow="hidden"
+      >
       {
         referenceY !== undefined && (
           <line
             class="ui-chart__reference"
-            x1={padding}
+            x1={paddingLeft}
             x2={width - padding}
             y1={referenceY}
             y2={referenceY}
@@ -183,43 +212,73 @@ const referenceY =
       }
       {
         geometries.map((geometry, index) => {
-          const item = series[index]
+          const item = alignedSeries[index]
 
           if (!item) return null
 
           const tone = resolveLumenChartTone(item.tone, index)
 
           return (
-            <g class:list={['ui-line-chart__series', getLumenChartToneClassName(tone)]}>
-              {area &&
-                geometry.areaPaths.map(path => (
-                  <path class="ui-line-chart__area" d={path} />
-                ))}
-              <path class="ui-line-chart__line" d={geometry.path} />
+            <g
+data-ui-chart-series={item.id}
+class:list={['ui-line-chart__series', getLumenChartToneClassName(tone)]}
+            >
+              {area && geometry.areaPaths.length > 0 && (
+                <path
+                  data-ui-chart-motion-key={JSON.stringify(['area', item.id])}
+                  class="ui-line-chart__area"
+                  d={geometry.areaPaths.join(' ')}
+                />
+              )}
+              <path
+data-ui-chart-motion-key={JSON.stringify(['path', item.id])}
+class="ui-line-chart__line"
+d={geometry.path}
+              />
               {Number.isFinite(markerStep) &&
                 geometry.points.map((point, pointIndex) => pointIndex % markerStep === 0 && (
                   <circle
+                    data-ui-chart-datum={pointActions[index]?.[pointIndex]?.serialized}
+                    data-ui-chart-motion-key={getLumenChartMotionKey(item.id, point)}
                     class="ui-line-chart__point"
                     cx={point.xCoordinate}
                     cy={point.yCoordinate}
                     r="3"
                   >
                     <title>
-                      {`${point.xLabel ?? formatCategory(point.x)} · ${item.label}: ${formatValue(point.y ?? 0)}`}
+                      {`${categoryLabelFor(point.x)} · ${item.label}: ${formatValue(point.y ?? 0)}`}
                     </title>
                   </circle>
                 ))}
+              {drilldown && geometry.points.map((point, pointIndex) => (
+                <circle
+class="ui-chart__datum-hit"
+cx={point.xCoordinate}
+cy={point.yCoordinate}
+r="10"
+                  data-ui-chart-datum={pointActions[index]?.[pointIndex]?.serialized}
+                />
+              ))}
             </g>
           )
         })
       }
+      </svg>
+      {model.annotationMarks.map(mark => (
+<g class:list={['ui-chart__annotation', getLumenChartToneClassName(mark.tone)]}>
+        {mark.axis === 'x' ? <><line x1={mark.coordinate} x2={mark.coordinate} y1={padding} y2={height - padding} /><text x={mark.coordinate + 4} y={padding - 8}>{mark.label}</text></> : <><line x1={paddingLeft} x2={width - padding} y1={mark.coordinate} y2={mark.coordinate} /><text text-anchor="end" x={width - padding} y={mark.coordinate - 8}>{mark.label}</text></>}
+      </g>
+))}
+      {interactive && <line class="ui-chart__crosshair" data-ui-chart-crosshair style="display: none" y1={padding} y2={height - padding} />}
     </svg>
   </div>
+  {model.annotationMarks.length > 0 && <ul class="ui-sr-only">{model.annotationMarks.map(mark => <li>{mark.label}: {mark.axis === 'x' ? categoryLabelFor(mark.value) : formatValue(Number(mark.value))}</li>)}</ul>}
+  {interactive && hasData && <ChartInspection {model} {formatCategory} {formatValue} labels={resolvedLabels} />}
   {
     showTable && hasData && (
       <details class="ui-chart__data">
         <summary>{resolvedLabels.viewData}</summary>
-        <div>
+        <div role="group" tabindex="0" aria-label={resolvedLabels.chartData}>
           <table>
             <thead>
               <tr>
@@ -231,7 +290,7 @@ const referenceY =
               {categories.map(category => (
                 <tr>
                   <th scope="row">{categoryLabelFor(category)}</th>
-                  {series.map(item => {
+                  {alignedSeries.map(item => {
                     const datum = valueFor(item, category)
 
                     return (
@@ -251,4 +310,5 @@ const referenceY =
       </details>
     )
   }
+  {drilldown && <ChartDatumActions actions={datumActions} label={resolvedLabels.exploreData} />}
 </Chart>

package/components/LollipopChart.astro

@@ -0,0 +1,8 @@
+---
+import type { ComponentProps } from 'astro/types'
+
+import ComparisonChart from '../internal/ComparisonChart.astro'
+
+type Props = Omit<ComponentProps<typeof ComparisonChart>, 'paired'>
+---
+<ComparisonChart {...Astro.props} class:list={['ui-lollipop-chart', Astro.props.class, Astro.props.className]} paired={false} />

package/components/MediaFilmstrip.astro

@@ -0,0 +1,19 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'section'> {
+  className?: string
+  label: string
+  selectionLabel: string
+}
+
+const { class: classProp, className, label, selectionLabel, ...rest } = Astro.props
+const { classList, passthrough } = resolveLumenAstroProps(rest, ['ui-media-filmstrip'], classProp, className)
+---
+
+<section {...passthrough} class:list={classList} aria-label={label}>
+  <div class="ui-media-filmstrip__heading"><span>{label}</span><span role="status" data-ui-media-filmstrip-selection>{selectionLabel}</span></div>
+  <ol class="ui-media-filmstrip__items"><slot /></ol>
+</section>

package/components/MediaThumbnail.astro

@@ -0,0 +1,29 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import Button from './Button.astro'
+
+interface Props extends HTMLAttributes<'button'> {
+  className?: string
+  label: string
+  mediaId: string
+  order?: number
+  selected?: boolean
+  state?: 'ready' | 'loading' | 'error'
+  stateLabel?: string
+}
+
+const { class: classProp, className, disabled, label, mediaId, order, selected = false, state = 'ready', stateLabel, ...rest } = Astro.props
+const position = order !== undefined && Number.isSafeInteger(order) && order > 0 ? order : undefined
+const status = stateLabel ?? (state === 'loading' ? 'Loading' : 'Unavailable')
+const { classList, passthrough } = resolveLumenAstroProps(rest, ['ui-media-thumbnail'], classProp, className)
+---
+
+<Button {...passthrough} class:list={classList} variant="outline" data-ui-media-thumbnail data-media-id={mediaId} aria-busy={state === 'loading' || undefined} aria-pressed={selected} disabled={Boolean(disabled) || state !== 'ready'} data-state={state}>
+  <span class="ui-media-thumbnail__media" aria-hidden="true"><slot /></span>
+  <span class="ui-media-thumbnail__label">{label}</span>
+  {position !== undefined && <span class="ui-media-thumbnail__order">{position}</span>}
+  {state !== 'ready' && <span class="ui-media-thumbnail__state">{status}</span>}
+</Button>

package/components/MediaViewport.astro

@@ -0,0 +1,38 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { formatLumenMediaZoom, lumenMediaViewportActions, type LumenMediaViewportLabels, lumenMediaViewportLabels, type LumenMediaViewportValue, normalizeLumenMediaViewport, resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import Button from './Button.astro'
+
+interface Props extends HTMLAttributes<'figure'> {
+  className?: string
+  disabled?: boolean
+  label: string
+  labels?: Partial<LumenMediaViewportLabels>
+  locale?: string
+  maxZoom?: number
+  ratio?: number
+  value?: Partial<LumenMediaViewportValue>
+}
+
+const { class: classProp, className, disabled = false, label, labels, locale, maxZoom = 4, ratio = 16 / 9, value, ...rest } = Astro.props
+const current = normalizeLumenMediaViewport(value, maxZoom)
+const copy = { ...lumenMediaViewportLabels, ...labels }
+const safeRatio = Number.isFinite(ratio) && ratio >= 0.1 && ratio <= 10 ? ratio : 16 / 9
+const statusId = `media-viewport-${crypto.randomUUID()}`
+const { classList, passthrough } = resolveLumenAstroProps(rest, ['ui-media-viewport'], classProp, className)
+---
+
+<figure class:list={classList} {...passthrough} data-ui-media-viewport data-disabled={String(disabled)} data-max-zoom={maxZoom} data-zoom={current.zoom} data-pan-x={current.x} data-pan-y={current.y} data-locale={locale}>
+  <div class="ui-media-viewport__stage" data-ui-media-viewport-stage role="group" aria-label={label} aria-disabled={disabled} aria-describedby={statusId} tabindex="0" style={`aspect-ratio: ${safeRatio}`}>
+    <div class="ui-media-viewport__content" data-ui-media-viewport-content style={`transform: translate(${current.x * (current.zoom - 1) * 50}%, ${current.y * (current.zoom - 1) * 50}%) scale(${current.zoom})`}><slot /></div>
+  </div>
+  <figcaption>
+    <span>{label}</span>
+    <span id={statusId} role="status" aria-live="polite" data-ui-media-viewport-status>{formatLumenMediaZoom(current.zoom, locale)}</span>
+    <div class="ui-media-viewport__actions" role="group" aria-label={label}>
+      {lumenMediaViewportActions.map(action => <Button variant="outline" data-ui-media-viewport-action={action} disabled>{copy[action]}</Button>)}
+    </div>
+  </figcaption>
+</figure>

package/components/Mentions.astro

@@ -49,7 +49,7 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
   />
   <ul class="ui-mentions__list" data-ui-mentions-list hidden id={listId} role="listbox">
     {normalized.map((option, index) => (
-      <li>
+      <li role="presentation">
         <button
           aria-selected="false"
           class="ui-mentions__option"
@@ -57,6 +57,7 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
           data-value={option.value}
           id={`${listId}-option-${index}`}
           role="option"
+          tabindex={-1}
           type="button"
         >
           {option.label}

package/components/MessageScroller.astro

@@ -7,12 +7,16 @@ interface Props extends HTMLAttributes<'div'> {
   class?: string | null
   className?: string
   glass?: boolean | 'subtle' | 'strong'
+  autoScroll?: boolean
+  scrollThreshold?: number
 }
 
 const {
   class: classProp = '',
   className = '',
   glass = false,
+  autoScroll = false,
+  scrollThreshold = 32,
   ...rest
 } = Astro.props
 
@@ -25,6 +29,8 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
 ---
 
 <div
+  data-ui-message-scroller={autoScroll ? '' : undefined}
+  scroll-threshold={scrollThreshold}
   class:list={classList}
   {...passthrough}
 >

package/components/MotionGroup.astro

@@ -0,0 +1,19 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { type LumenWorkflowDuration, resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string | null
+  className?: string
+  duration?: LumenWorkflowDuration
+  enterExit?: boolean
+}
+
+const { class: classProp, className, duration = 'standard', enterExit = true, ...rest } = Astro.props
+const { classList, passthrough } = resolveLumenAstroProps(rest, ['ui-motion-group'], classProp, className)
+---
+
+<div class:list={classList} data-ui-motion-group data-ui-motion-duration={duration} data-ui-motion-enter-exit={String(enterExit)} {...passthrough}>
+  <slot />
+</div>

package/components/NativeSelect.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
@@ -17,7 +17,7 @@ interface Props extends Omit<HTMLAttributes<'select'>, 'size'> {
   size?: HTMLAttributes<'select'>['size']
   options?: SelectOption[]
   placeholder?: string
-  visualSize?: 'default' | 'lg' | 'sm'
+  visualSize?: LumenControlVisualSize
 }
 
 const {

package/components/Pagination.astro

@@ -9,6 +9,7 @@ interface Props extends HTMLAttributes<'nav'> {
 }
 
 const {
+  'aria-label': ariaLabel = 'Pagination',
   class: classProp = '',
   className = '',
   ...rest
@@ -20,7 +21,7 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
 ---
 
 <nav
-  aria-label="Pagination"
+  aria-label={ariaLabel}
   class:list={classList}
   {...passthrough}
 >

package/components/PasswordField.astro

@@ -65,7 +65,7 @@ const { classList } = resolveLumenAstroProps({}, ['ui-password-field'], classPro
       type="button"
       variant="ghost"
     >
-      <span aria-hidden="true" data-ui-password-toggle-label>Show</span>
+      <span aria-hidden="true" data-ui-password-toggle-label>{showLabel}</span>
     </Button>
   </div>
   {hint && <p class="ui-field__hint" data-ui-field-hint id={hintId}>{hint}</p>}