@santi020k/lumen-astro 3.0.1 → 4.0.0

package/components/DescriptionItem.astro

@@ -0,0 +1,18 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string | null
+  className?: string
+}
+
+const { class: classProp = '', className = '', ...rest } = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(
+  rest, ['ui-description-item', 'ui-descriptions__item'], classProp, className
+)
+---
+
+<div class:list={classList} data-slot="description-item" {...passthrough}><slot /></div>

package/components/DescriptionTerm.astro

@@ -0,0 +1,18 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'dt'> {
+  class?: string | null
+  className?: string
+}
+
+const { class: classProp = '', className = '', ...rest } = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(
+  rest, ['ui-description-term', 'ui-descriptions__term'], classProp, className
+)
+---
+
+<dt class:list={classList} data-slot="description-term" {...passthrough}><slot /></dt>

package/components/DeviceFrame.astro

@@ -0,0 +1,79 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import {
+  type LumenDeviceFrameColor, type LumenDeviceFrameDevice, type LumenDeviceFrameOrientation, type LumenDeviceFrameTone,
+  resolveLumenAstroProps, resolveLumenDeviceFrame, resolveLumenDeviceFrameColor
+} from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'div'> {
+  device?: LumenDeviceFrameDevice
+  orientation?: LumenDeviceFrameOrientation
+  tone?: LumenDeviceFrameTone
+  color?: LumenDeviceFrameColor
+  screenWidth?: number
+  screenHeight?: number
+  scroll?: boolean
+  className?: string
+}
+
+const { device = 'laptop', orientation, tone = 'dark', color, screenWidth, screenHeight, scroll = true,
+  class: classProp, className, style: consumerStyle, ...rest } = Astro.props
+
+const size = resolveLumenDeviceFrame(device, orientation, screenWidth, screenHeight)
+const resolvedColor = resolveLumenDeviceFrameColor(color)
+
+const frameStyle = typeof consumerStyle === 'string' ?
+  `${consumerStyle}${resolvedColor ? `;--ui-device-color:${resolvedColor}` : ''}` :
+  { ...consumerStyle, ...(resolvedColor ? { '--ui-device-color': resolvedColor } : {}) }
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, ['ui-device-frame'], classProp, className)
+---
+
+<div class:list={classList} data-device={device} data-tone={tone} data-orientation={orientation} style={frameStyle} {...passthrough}>
+  <div class="ui-device-frame__shell">
+    <span class="ui-device-frame__hardware" aria-hidden="true">
+      <span class="ui-device-frame__action" />
+      <span class="ui-device-frame__volume-up" />
+      <span class="ui-device-frame__volume-down" />
+      <span class="ui-device-frame__power" />
+      <span class="ui-device-frame__rail-left" />
+      <span class="ui-device-frame__rail-right" />
+    </span>
+    <div class="ui-device-frame__glass">
+    <span aria-hidden="true" class="ui-device-frame__camera"></span>
+    <lumen-device-screen
+class="ui-device-frame__screen"
+data-scroll={String(scroll)}
+data-ui-device-screen
+      data-screen-width={size.width}
+      style={`--ui-device-frame-width: ${size.width}px; --ui-device-frame-height: ${size.height}px; aspect-ratio: ${size.width} / ${size.height}`}
+    >
+      <slot />
+    </lumen-device-screen>
+    </div>
+  </div>
+  <span aria-hidden="true" class="ui-device-frame__base"></span>
+</div>
+
+<script>
+  import { observeLumenDeviceFrame } from '@santi020k/lumen-core'
+
+  class LumenDeviceScreen extends HTMLElement {
+    private cleanup: (() => void) | undefined
+
+    connectedCallback(): void {
+      this.cleanup?.()
+
+      this.cleanup = observeLumenDeviceFrame(this, Number(this.dataset.screenWidth))
+    }
+
+    disconnectedCallback(): void {
+      this.cleanup?.()
+
+      this.cleanup = undefined
+    }
+  }
+
+  if (!customElements.get('lumen-device-screen')) customElements.define('lumen-device-screen', LumenDeviceScreen)
+</script>

package/components/DialogBody.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string | null
+  className?: string
+}
+
+const { class: classProp = '', className = '', ...rest } = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(
+  rest, ['ui-dialog-body'], classProp, className
+)
+---
+
+<div class:list={classList} data-slot="dialog-body" {...passthrough}>
+  <slot />
+</div>

package/components/DialogClose.astro

@@ -0,0 +1,21 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { composeClassName } from '@santi020k/lumen-core'
+
+import Button from './Button.astro'
+
+interface Props extends HTMLAttributes<'button'> {
+  class?: string | null
+  className?: string
+  loading?: boolean
+  size?: 'default' | 'sm' | 'lg' | 'icon'
+  variant?: 'default' | 'destructive' | 'ghost' | 'link' | 'outline' | 'secondary'
+}
+
+const { class: classProp = '', className = '', ...rest } = Astro.props
+---
+
+<Button {...rest} class={composeClassName('ui-dialog-close', classProp, className)} data-slot="dialog-close" data-ui-dialog-close>
+  <slot />
+</Button>

package/components/DialogFooter.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'footer'> {
+  class?: string | null
+  className?: string
+}
+
+const { class: classProp = '', className = '', ...rest } = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(
+  rest, ['ui-dialog-footer'], classProp, className
+)
+---
+
+<footer class:list={classList} data-slot="dialog-footer" {...passthrough}>
+  <slot />
+</footer>

package/components/DialogHeader.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'header'> {
+  class?: string | null
+  className?: string
+}
+
+const { class: classProp = '', className = '', ...rest } = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(
+  rest, ['ui-dialog-header'], classProp, className
+)
+---
+
+<header class:list={classList} data-slot="dialog-header" {...passthrough}>
+  <slot />
+</header>

package/components/DialogTitle.astro

@@ -0,0 +1,21 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'h2'> {
+  as?: 'h2' | 'h3' | 'h4'
+  class?: string | null
+  className?: string
+}
+
+const { as: Tag = 'h2', class: classProp = '', className = '', ...rest } = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(
+  rest, ['ui-dialog-title'], classProp, className
+)
+---
+
+<Tag class:list={classList} data-slot="dialog-title" {...passthrough}>
+  <slot />
+</Tag>

package/components/DumbbellChart.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-dumbbell-chart', Astro.props.class, Astro.props.className]} paired={true} />

package/components/FileUpload.astro

@@ -8,6 +8,7 @@ interface Props extends Omit<HTMLAttributes<'input'>, 'type' | 'size'> {
   className?: string
   label?: string
   hint?: string
+  selectedFilesLabel?: string
 }
 
 const {
@@ -15,6 +16,7 @@ const {
   className = '',
   label = 'Choose a file or drag it here',
   hint,
+  selectedFilesLabel = '{count} files selected',
   id,
   ...rest
 } = Astro.props
@@ -24,7 +26,7 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
 ], classProp, className)
 ---
 
-<label class:list={classList} data-ui-file-upload for={id}>
+<label class:list={classList} data-ui-file-upload data-ui-selected-files-label={selectedFilesLabel} for={id}>
   <input class="ui-file-upload__input" data-ui-file-upload-input id={id} type="file" {...passthrough} />
   <svg
     aria-hidden="true"

package/components/FilterBar.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'section'> {
+  label?: string
+  resultLabel?: string
+  pending?: boolean
+  open?: boolean
+  class?: string | null
+  className?: string
+}
+
+const { label = 'Filters', resultLabel, pending = false, open = true, class: classProp, className, ...rest } = Astro.props
+const { classList, passthrough } = resolveLumenAstroProps(rest, ['ui-filter-bar'], classProp, className)
+---
+<section class:list={classList} aria-label={label} aria-busy={pending} {...passthrough}>
+  <details open={open}>
+    <summary>{label}</summary>
+    <div class="ui-filter-bar__controls"><slot /></div>
+  </details>
+  <div class="ui-filter-bar__active"><slot name="active" /><slot name="actions" /></div>
+  <p class="ui-filter-bar__results" role="status" aria-live="polite" aria-atomic="true">{resultLabel}</p>
+</section>

package/components/FunnelChart.astro

@@ -0,0 +1,50 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { createLumenFunnelGeometry, getLumenChartToneClassName, type LumenChartLabels, type LumenFunnelDatum, resolveLumenChartLabels } from '@santi020k/lumen-core'
+
+import Chart from './Chart.astro'
+
+interface Props extends HTMLAttributes<'figure'> {
+  data: readonly LumenFunnelDatum[]
+  className?: string
+  heading?: string
+  description?: string
+  caption?: string
+  presentation?: 'bare' | 'default'
+  summary?: string
+  formatValue?: (value: number) => string
+  labels?: Partial<LumenChartLabels>
+  showTable?: boolean
+}
+
+const { data, formatValue = String, labels, showTable = true, summary, class: classProp, className, ...props } = Astro.props
+const text = resolveLumenChartLabels(labels)
+const model = createLumenFunnelGeometry(data)
+const format = (value: number | null) => value === null ? text.notAvailable : formatValue(value)
+const fallback = model.valid ? text.empty : text.invalidData
+const factual = !model.valid || model.rows.length === 0 ? fallback : model.rows.map(row => `${row.label}: ${format(row.value)}`).join('. ')
+---
+<Chart {...props} class:list={['ui-funnel-chart', classProp, className]} summary={summary ?? factual}>
+  {!model.valid || model.rows.length === 0 ?
+<p class="ui-chart__empty" role="status">{model.valid ? text.empty : text.invalidData}</p> :
+(
+<>
+    <ol class="ui-funnel-chart__rows">{model.rows.map((row, index) => (
+<li class={getLumenChartToneClassName(row.tone, index)}><div class="
+  ui-funnel-chart__label
+"
+                                                        ><span>{row.label}</span><strong>{format(row.value)}</strong></div><div
+class="ui-funnel-chart__track"
+aria-hidden="true"
+                                                                                                                           >{row.ratio !== null && (
+<span
+class="ui-funnel-chart__bar"
+style={{ width: `${row.ratio * 100}%` }}
+/>
+)}</div></li>
+))}</ol>
+    {showTable && <details class="ui-chart__data"><summary>{text.viewData}</summary><div role="group" tabindex="0" aria-label={text.chartData}><table><thead><tr><th scope="col">{text.category}</th><th scope="col">{text.value}</th></tr></thead><tbody>{model.rows.map(row => <tr><th scope="row">{row.label}</th><td>{format(row.value)}</td></tr>)}</tbody></table></div></details>}
+  </>
+)}
+</Chart>

package/components/Grid.astro

@@ -8,7 +8,7 @@ interface Props extends HTMLAttributes<'div'> {
   class?: string | null
   className?: string
   columns?: 1 | 2 | 3 | 4 | 6 | 12 | 'auto'
-  gap?: 'lg' | 'md' | 'none' | 'sm' | 'xl'
+  gap?: '2xl' | '3xl' | 'group' | 'lg' | 'md' | 'none' | 'related' | 'section' | 'sm' | 'xl' | 'xs'
   minItemWidth?: string
 }
 
@@ -17,7 +17,7 @@ const {
   class: classProp = '',
   className = '',
   columns = 'auto',
-  gap = 'md',
+  gap = 'group',
   minItemWidth,
   style,
   ...rest

package/components/Heatmap.astro

@@ -1,16 +1,21 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
 
-import { createLumenHeatmapGeometry, type LumenChartLabels, type LumenHeatmapDatum, resolveLumenChartLabels } from '@santi020k/lumen-core'
+import { createLumenHeatmapDatumActivation, createLumenHeatmapModel, getLumenHeatmapColor, type LumenChartLabels, type LumenHeatmapDatum, type LumenHeatmapOptions, 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'> {
+interface Props extends HTMLAttributes<'figure'>, LumenHeatmapOptions {
+  showLegend?: boolean
   caption?: string
   class?: string | null
   className?: string
   data: readonly LumenHeatmapDatum[]
   description?: string
+  drilldown?: boolean
   formatValue?: (value: number) => string
   heading?: string
   labels?: Partial<LumenChartLabels>
@@ -18,18 +23,62 @@ interface Props extends HTMLAttributes<'figure'> {
   summary?: string
 }
 
-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 { colorScale = 'sequential', midpoint = 0, domain, showLegend = true, caption, class: classProp = '', className = '', data, description, drilldown = false, formatValue = String, heading, labels, showTable = true, summary: summaryProp, ...rest } = Astro.props
+const geometry = createLumenHeatmapModel(data, { colorScale, midpoint, ...(domain ? { domain } : {}) })
+const availableCells = geometry.cells.filter(cell => cell.value !== null && Number.isFinite(cell.value))
+const hasData = availableCells.length > 0
 const resolvedLabels = resolveLumenChartLabels(labels)
-const summary = summaryProp ?? resolvedLabels.formatHeatmapSummary(geometry.cells.filter(cell => cell.value !== null && Number.isFinite(cell.value)).length)
+const summary = summaryProp ?? resolvedLabels.formatHeatmapSummary(availableCells.length)
+
+const datumActions = drilldown ?
+availableCells.map(cell => createChartDatumAction(
+  createLumenHeatmapDatumActivation(cell),
+  `${cell.xLabel ?? cell.x} · ${cell.yLabel ?? cell.y}: ${cell.label ?? formatValue(cell.value ?? 0)}`,
+  resolvedLabels
+)) :
+[]
+
+const datumActionByCell = new Map(availableCells.map((cell, index) => [cell, datumActions[index]]))
+
 ---
 
-<Chart class:list={['ui-heatmap', classProp, className]} {caption} {description} {heading} {summary} {...rest}>
+<Chart class:list={['ui-heatmap', classProp, className]} {caption} {description} {heading} {summary} {...rest} data-ui-chart-activation={drilldown || undefined}>
   {!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>{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>}
+  <div
+aria-label={rest['aria-label'] ?? heading ?? resolvedLabels.chartData}
+class="ui-chart__plot"
+role="region"
+tabindex="0"
+hidden={geometry.cells.length === 0}
+  >
+    <svg aria-hidden="true" viewBox={`0 0 ${geometry.width} ${geometry.height}`}>
+      <g class="ui-chart__axis-labels">
+        {geometry.xTicks.map(tick => <text text-anchor={tick.textAnchor} x={tick.position} y="298">{tick.label}</text>)}
+        {geometry.yTicks.map(tick => <text class="ui-heatmap__row-label" text-anchor="end" dominant-baseline="middle" x="108" y={tick.position}>{tick.label}</text>)}
+      </g>
+      <g class="ui-heatmap__cells">{geometry.cells.map(cell => {
+        const missing = cell.value === null || !Number.isFinite(cell.value)
+
+        return (
+<g>
+          <rect data-ui-chart-datum={datumActionByCell.get(cell)?.serialized} height={Math.max(0, cell.height - 2)} width={Math.max(0, cell.width - 2)} x={cell.xCoordinate + 1} y={cell.yCoordinate + 1} style={{ fill: getLumenHeatmapColor(cell.value, geometry.domain, colorScale, geometry.midpoint) }}>
+            <title>{`${cell.xLabel ?? cell.x} · ${cell.yLabel ?? cell.y}: ${missing ? resolvedLabels.notAvailable : cell.label ?? formatValue(cell.value ?? 0)}`}</title>
+          </rect>
+          {missing && <text class="ui-heatmap__missing" text-anchor="middle" dominant-baseline="middle" x={cell.xCoordinate + cell.width / 2} y={cell.yCoordinate + cell.height / 2}>×</text>}
+        </g>
+)
+      })}</g>
+    </svg>
+  </div>
+  {showLegend && geometry.cells.length > 0 && (
+<div class="ui-heatmap__legend" aria-label={resolvedLabels.chartLegend}>
+    <span>{formatValue(geometry.domain.min)}</span><span
+style={{ background: geometry.legendBackground }}
+class="ui-heatmap__scale"
+                                                   >{colorScale === 'diverging' && <span style={{ left: `${geometry.midpointPercent}%` }}>{formatValue(geometry.midpoint)}</span>}</span><span>{formatValue(geometry.domain.max)}</span>
+    <span>× {resolvedLabels.notAvailable}</span>
+  </div>
+)}
+  {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.column}</th><th scope="col">{resolvedLabels.row}</th><th scope="col">{resolvedLabels.value}</th></tr></thead><tbody>{geometry.cells.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>}
+  {drilldown && <ChartDatumActions actions={datumActions} label={resolvedLabels.exploreData} />}
 </Chart>

package/components/Histogram.astro

@@ -0,0 +1,30 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { createLumenHistogramGeometry, type LumenChartLabels, type LumenChartTone, type LumenHistogramBin, resolveLumenChartLabels } from '@santi020k/lumen-core'
+
+import IntervalChart from '../internal/IntervalChart.astro'
+
+interface Props extends HTMLAttributes<'figure'> {
+  bins: readonly LumenHistogramBin[]
+  caption?: string
+  class?: string | null
+  className?: string
+  description?: string
+  formatBoundary?: (value: number) => string
+  formatValue?: (value: number) => string
+  frequency?: 'count' | 'density'
+  heading?: string
+  labels?: Partial<LumenChartLabels>
+  presentation?: 'bare' | 'default'
+  showTable?: boolean
+  summary?: string
+  tone?: LumenChartTone
+  valueLabel?: string
+}
+
+const { bins, class: classProp, className, formatBoundary = String, formatValue = String, frequency = 'count', labels, tone = 'series-1', valueLabel = resolveLumenChartLabels(labels)[frequency === 'density' ? 'density' : 'count'], ...rest } = Astro.props
+const model = createLumenHistogramGeometry(bins, { formatBoundary, formatValue, frequency, tone })
+---
+
+<IntervalChart {...rest} class:list={['ui-histogram', classProp, className]} {model} {labels} {formatBoundary} {formatValue} {valueLabel} />

package/components/Icon.astro

@@ -18,16 +18,20 @@ interface Props extends HTMLAttributes<'span'> {
 }
 
 const {
+  'aria-hidden': ariaHidden,
+  'aria-label': ariaLabel,
   class: classProp = '',
   className = '',
   decorative,
   label,
   name,
+  role,
   size = 'default',
   ...rest
 } = Astro.props
 
-const isDecorative = decorative ?? !label
+const accessibleLabel = label ?? ariaLabel
+const isDecorative = decorative ?? (ariaHidden === undefined ? !accessibleLabel : ariaHidden === true || ariaHidden === 'true')
 const iconSvg = name ? renderLumenIconSvg(name) : ''
 
 if (name && !iconSvg && import.meta.env.DEV) {
@@ -47,9 +51,9 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
 
 <span
   aria-hidden={isDecorative ? 'true' : undefined}
-  aria-label={!isDecorative ? label : undefined}
+  aria-label={!isDecorative ? accessibleLabel : undefined}
   class:list={classList}
-  role={!isDecorative ? 'img' : undefined}
+  role={!isDecorative ? role ?? 'img' : undefined}
   {...passthrough}
 >
   {name ? <Fragment set:html={iconSvg} /> : <slot />}

package/components/ImageComparison.astro

@@ -0,0 +1,74 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import {
+  formatLumenImageComparisonValue,
+  type LumenImageComparisonMode,
+  normalizeLumenImageComparisonMode,
+  normalizeLumenImageComparisonRatio,
+  normalizeLumenImageComparisonValue,
+  resolveLumenAstroProps
+} from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'figure'> {
+  afterLabel?: string
+  beforeLabel?: string
+  class?: string | null
+  className?: string
+  disabled?: boolean
+  fit?: 'contain' | 'cover'
+  label: string
+  locale?: string
+  mode?: LumenImageComparisonMode
+  name?: string
+  ratio?: number
+  value?: number
+}
+
+const {
+  afterLabel = 'After', beforeLabel = 'Before', class: classProp = '', className = '',
+  disabled = false, fit = 'cover', label, locale, mode: requestedMode = 'reveal', name, ratio = 16 / 9, value = 50,
+  ...rest
+} = Astro.props
+
+const mode = normalizeLumenImageComparisonMode(requestedMode)
+const position = normalizeLumenImageComparisonValue(value)
+const aspectRatio = normalizeLumenImageComparisonRatio(ratio)
+const { classList, passthrough } = resolveLumenAstroProps(rest, ['ui-image-comparison'], classProp, className)
+---
+
+<figure
+  class:list={classList}
+  data-ui-image-comparison
+  data-after-label={afterLabel}
+  data-disabled={disabled ? 'true' : undefined}
+  data-fit={fit}
+  data-mode={mode}
+  data-locale={locale}
+  {...passthrough}
+>
+  <div class="ui-image-comparison__frame" style={`--ui-image-comparison-position: ${position}%; --ui-image-comparison-ratio: ${aspectRatio}`}>
+    <div class="ui-image-comparison__before" hidden={mode === 'after'}><slot name="before" /></div>
+    <div class="ui-image-comparison__after" hidden={mode === 'before'}><slot name="after" /></div>
+    <div aria-hidden="true" class="ui-image-comparison__divider"></div>
+  </div>
+  <div aria-hidden="true" class="ui-image-comparison__labels"><span hidden={mode === 'after'}>{beforeLabel}</span><span hidden={mode === 'before'}>{afterLabel}</span></div>
+  <figcaption class="ui-image-comparison__caption">
+    <label class="ui-image-comparison__control" hidden={mode !== 'reveal'}>
+      <span>{label}</span>
+      <input
+        aria-valuetext={formatLumenImageComparisonValue(position, afterLabel, locale)}
+        class="ui-slider ui-image-comparison__range"
+        data-ui-image-comparison-input
+        disabled
+        max="100"
+        min="0"
+        name={name}
+        step="1"
+        type="range"
+        value={position}
+      />
+    </label>
+    <slot />
+  </figcaption>
+</figure>

package/components/Input.astro

@@ -1,13 +1,13 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
 
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+import { type LumenControlVisualSize, resolveLumenAstroProps } from '@santi020k/lumen-core'
 
 interface Props extends Omit<HTMLAttributes<'input'>, 'size'> {
   class?: string | null
   className?: string
   size?: HTMLAttributes<'input'>['size']
-  visualSize?: 'default' | 'lg' | 'sm'
+  visualSize?: LumenControlVisualSize
 }
 
 const {