@santi020k/lumen-astro 3.0.1 → 4.0.0

package/components/CalendarHeatmap.astro

@@ -0,0 +1,76 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { createLumenCalendarHeatmapGeometry, type LumenCalendarHeatmapDatum, type LumenCalendarHeatmapOptions, type LumenChartLabels, resolveLumenChartLabels } from '@santi020k/lumen-core'
+
+import Chart from './Chart.astro'
+
+interface Props extends HTMLAttributes<'figure'>, LumenCalendarHeatmapOptions {
+  data: readonly LumenCalendarHeatmapDatum[]
+  className?: string
+  heading?: string
+  description?: string
+  caption?: string
+  presentation?: 'bare' | 'default'
+  summary?: string
+  formatValue?: (value: number) => string
+  formatDate?: (date: string) => string
+  weekdayLabels?: readonly string[]
+  labels?: Partial<LumenChartLabels>
+  showTable?: boolean
+}
+
+const { data, startDate, endDate, weekStartsOn = 0, domain, formatValue = String, formatDate = String,
+  weekdayLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], labels, showTable = true, summary,
+  class: classProp, className, ...props } = Astro.props
+
+const text = resolveLumenChartLabels(labels)
+const model = createLumenCalendarHeatmapGeometry(data, { startDate, endDate, weekStartsOn, domain })
+const observed = model.cells.filter(cell => cell.value !== null).length
+const format = (value: number | null) => value === null ? text.notAvailable : formatValue(value)
+const width = Math.max(240, model.weekCount * 18 + 52)
+const factual = model.valid ? `${formatDate(startDate)} – ${formatDate(endDate)}. ${text.value}: ${observed}/${model.cells.length}. ${text.notAvailable}: ${model.cells.length - observed}.` : text.invalidData
+---
+<Chart {...props} class:list={['ui-calendar-heatmap', classProp, className]} summary={summary ?? factual}>
+  {model.valid ?
+(
+<>
+    <p class="ui-calendar-heatmap__range">{formatDate(startDate)} – {formatDate(endDate)}</p>
+    <div class="ui-calendar-heatmap__plot" role="group" tabindex="0" aria-label={text.chartData}>
+      <svg viewBox={`0 0 ${width} 152`} width={width} height="152" aria-hidden="true">
+        {Array.from({ length: 7 }, (_, day) => (
+<text
+x="0"
+y={day * 18 + 15}
+class="ui-calendar-heatmap__weekday"
+>{weekdayLabels[(day + weekStartsOn) % 7] ?? ''}</text>
+))}
+        {model.cells.map(cell => (
+<g><rect class="ui-calendar-heatmap__cell" data-missing={cell.value === null ? '' : undefined} x={cell.week * 18 + 46} y={cell.day * 18 + 2} width="15" height="15" rx="3" style={{ opacity: cell.ratio === null ? 1 : 0.15 + cell.ratio * 0.85 }} /><title>{formatDate(cell.date)}: {format(cell.value)}</title>{cell.value === null && (
+<text
+x={cell.week * 18 + 53.5}
+y={cell.day * 18 + 14}
+text-anchor="middle"
+class="ui-calendar-heatmap__missing"
+>×</text>
+)}</g>
+))}
+        {model.cells.filter(cell => cell.day === 0 && cell.week % 4 === 0).map(cell => (
+<text
+x={cell.week * 18 + 46}
+y="145"
+class="ui-calendar-heatmap__weekday"
+>{cell.date.slice(5)}</text>
+))}
+      </svg>
+    </div>
+    <div class="ui-calendar-heatmap__legend"><span>{formatValue(model.domain.min)}</span><span
+class="ui-calendar-heatmap__scale"
+aria-hidden="true"
+                                                                                         /><span>{formatValue(model.domain.max)}</span><span>× {text.notAvailable}</span></div>
+    {!showTable && <ul class="ui-sr-only">{model.cells.map(cell => <li>{formatDate(cell.date)}: {format(cell.value)}</li>)}</ul>}
+    {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.cells.map(cell => <tr><th scope="row">{formatDate(cell.date)}</th><td>{format(cell.value)}</td></tr>)}</tbody></table></div></details>}
+  </>
+) :
+<p class="ui-chart__empty" role="status">{text.invalidData}</p>}
+</Chart>

package/components/Card.astro

@@ -7,6 +7,7 @@ interface Props extends HTMLAttributes<'div'> {
   as?: 'article' | 'div' | 'section'
   class?: string | null
   className?: string
+  density?: 'comfortable' | 'compact' | 'spacious'
   glass?: boolean | 'subtle' | 'strong'
   variant?: 'default' | 'glass' | 'interactive' | 'muted' | 'unstyled'
 }
@@ -15,6 +16,7 @@ const {
   as: Tag = 'div',
   class: classProp = '',
   className = '',
+  density = 'comfortable',
   glass = false,
   variant = 'default',
   ...rest
@@ -24,6 +26,7 @@ const isGlass = glass || variant === 'glass'
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
   'ui-card',
+  `ui-card--${density}`,
   variant === 'unstyled' && 'ui-card--unstyled',
   variant === 'muted' && 'ui-card--muted',
   variant === 'interactive' && 'ui-card--interactive',
@@ -35,6 +38,7 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
 
 <Tag
   class:list={classList}
+  data-density={density}
   data-slot="card"
   data-variant={variant}
   {...passthrough}

package/components/ChangeSummary.astro

@@ -0,0 +1,36 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { type LumenChangeSummaryItem, resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'section'> {
+  items?: readonly LumenChangeSummaryItem[]
+  label?: string
+  beforeLabel?: string
+  afterLabel?: string
+  changedLabel?: string
+  unchangedLabel?: string
+  summary?: string
+  class?: string | null
+  className?: string
+}
+
+const { items = [], label = 'Changes', beforeLabel = 'Before', afterLabel = 'After', changedLabel = 'Changed',
+  unchangedLabel = 'Unchanged', summary, class: classProp, className, ...rest } = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, ['ui-change-summary'], classProp, className)
+---
+<section class:list={classList} aria-label={label} {...passthrough}>
+  <h3 class="ui-change-summary__heading">{label}</h3>
+  {summary && <p class="ui-change-summary__summary">{summary}</p>}
+  <dl class="ui-change-summary__list">
+    {items.map(item => (
+      <div class="ui-change-summary__item" data-changed={item.changed}>
+        <dt>{item.label}<span class="ui-change-summary__state">{item.changed ? changedLabel : unchangedLabel}</span></dt>
+        <dd><span class="ui-change-summary__value-label">{beforeLabel}</span>{item.before}</dd>
+        <dd><span class="ui-change-summary__value-label">{afterLabel}</span>{item.after}</dd>
+      </div>
+    ))}
+  </dl>
+  <slot />
+</section>

package/components/ChartDatumActions.astro

@@ -0,0 +1,24 @@
+---
+import type { ChartDatumAction } from '../runtime/chart-actions'
+
+import Button from './Button.astro'
+
+interface Props {
+  actions: readonly (ChartDatumAction | null)[]
+  label: string
+}
+
+const { actions, label } = Astro.props
+const available = actions.filter(action => action !== null)
+---
+
+{available.length > 0 && (
+  <details class="ui-chart__actions" data-ui-chart-actions>
+    <summary>{label}</summary>
+    <ul>
+      {available.map(action => (
+        <li><Button variant="ghost" data-ui-chart-datum={action.serialized}>{action.label}</Button></li>
+      ))}
+    </ul>
+  </details>
+)}

package/components/ChartMotion.astro

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

package/components/Code.astro

@@ -12,6 +12,10 @@ interface Props extends HTMLAttributes<'code'> {
   className?: string
   code?: string
   copy?: boolean
+  codeLabel?: string
+  copyLabel?: string
+  copiedLabel?: string
+  errorLabel?: string
   highlighted?: boolean
   label?: string
   language?: string
@@ -25,6 +29,10 @@ const {
   className = '',
   code,
   copy = false,
+  codeLabel = 'Code example',
+  copyLabel = 'Copy code to clipboard',
+  copiedLabel = 'Code copied to clipboard',
+  errorLabel = 'Could not copy code. Select and copy it manually.',
   highlighted = false,
   label,
   language,
@@ -54,6 +62,7 @@ const renderedCode = hasCode ? renderLumenCodeHtml(code, language) : ''
   (
     <figure
       class:list={blockClassList}
+      data-code-label={codeLabel}
       data-code-theme={theme}
       data-language={language}
       data-slot="code"
@@ -73,8 +82,14 @@ const renderedCode = hasCode ? renderLumenCodeHtml(code, language) : ''
           </span>
           {copy && (
             <button
-              aria-label="Copy code to clipboard"
+              aria-label={copyLabel}
               class="ui-code__copy"
+              data-copy-value={highlighted ? code : undefined}
+              data-copy-label={copyLabel}
+              data-copy-copied-label={copiedLabel}
+              data-copy-error-label={errorLabel}
+              data-state="idle"
+              title={copyLabel}
               data-ui-code-copy
               type="button"
             >
@@ -85,8 +100,8 @@ const renderedCode = hasCode ? renderLumenCodeHtml(code, language) : ''
         </figcaption>
       )}
       {highlighted && <slot />}
-      {!highlighted && hasCode && <pre><code set:html={renderedCode}></code></pre>}
-      {!highlighted && !hasCode && <pre><code><slot /></code></pre>}
+      {!highlighted && hasCode && <pre aria-label={!wrap ? codeLabel : undefined} role={!wrap ? 'region' : undefined} tabindex={!wrap ? 0 : undefined}><code set:html={renderedCode}></code></pre>}
+      {!highlighted && !hasCode && <pre aria-label={!wrap ? codeLabel : undefined} role={!wrap ? 'region' : undefined} tabindex={!wrap ? 0 : undefined}><code><slot /></code></pre>}
     </figure>
   ) :
   (

package/components/CodeTabs.astro

@@ -20,6 +20,10 @@ interface Props extends HTMLAttributes<'div'> {
   class?: string | null
   className?: string
   copy?: boolean
+  codeLabel?: string
+  copyLabel?: string
+  copiedLabel?: string
+  errorLabel?: string
   initialValue?: string
   items: readonly CodeTabItem[]
   storageKey?: string
@@ -32,6 +36,10 @@ const {
   class: classProp = '',
   className = '',
   copy = true,
+  codeLabel = 'Code example',
+  copyLabel = 'Copy code to clipboard',
+  copiedLabel = 'Code copied to clipboard',
+  errorLabel = 'Could not copy code. Select and copy it manually.',
   initialValue,
   items,
   storageKey,
@@ -82,6 +90,10 @@ const { classList, passthrough } = resolveLumenAstroProps(
       <Code
         code={item.code}
         copy={copy}
+        codeLabel={codeLabel}
+        copyLabel={copyLabel}
+        copiedLabel={copiedLabel}
+        errorLabel={errorLabel}
         {...(item.language === undefined ? {} : { language: item.language })}
         theme={theme}
         variant="block"

package/components/ComboChart.astro

@@ -1,28 +1,35 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
 
-import {
-  alignLumenChartSeries,
+import {   alignLumenChartSeries,
   createLumenBarGeometry,
+createLumenChartDatumActivation,
   createLumenLineGeometry,
   formatLumenChartSummary,
   getLumenChartCategories,
+  getLumenChartCategoryLabel,
+  getLumenChartCategoryTicks,
   getLumenChartDomain,
+  getLumenChartTicks,
   getLumenChartToneClassName,
   hasLumenChartData,
   type LumenChartDatum,
   type LumenChartLabels,
   type LumenComboSeries,
   resolveLumenChartLabels,
-  resolveLumenChartTone } from '@santi020k/lumen-core'
+  resolveLumenChartTone,  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
   class?: string | null
   className?: string
   description?: string
+  drilldown?: boolean
   formatValue?: (value: number) => string
   heading?: string
   labels?: Partial<LumenChartLabels>
@@ -32,7 +39,7 @@ interface Props extends HTMLAttributes<'figure'> {
   summary?: string
 }
 
-const { caption, class: classProp = '', className = '', description, formatValue = String, heading, labels, series, showLegend = true, showTable = true, summary: summaryProp, ...rest } = Astro.props
+const { caption, class: classProp = '', className = '', description, drilldown = false, formatValue = String, heading, labels, series, showLegend = true, showTable = true, summary: summaryProp, ...rest } = Astro.props
 const resolvedLabels = resolveLumenChartLabels(labels)
 const summary = summaryProp ?? formatLumenChartSummary(series, formatValue, resolvedLabels)
 const width = 640
@@ -73,6 +80,8 @@ const lineGeometryOptions = {
   ...(barSeries.length === 0 ?
     {} :
     {
+      paddingBottom: bars.margin.bottom,
+      paddingTop: bars.margin.top,
       xDomain: { max: 1, min: 0 },
       xScale: 'linear' as const
     })
@@ -83,16 +92,80 @@ const lines = lineSeries.map(item => createLumenLineGeometry(
   lineGeometryOptions
 ))
 
+const plotTop = barSeries.length > 0 ? bars.margin.top : padding
+const plotBottom = height - (barSeries.length > 0 ? bars.margin.bottom : padding)
+const plotLeft = barSeries.length > 0 ? bars.margin.left : padding
+const plotRight = width - (barSeries.length > 0 ? bars.margin.right : padding)
+const ticks = getLumenChartTicks(domain)
+
+const categoryTicks = getLumenChartCategoryTicks(categories.map(category => getLumenChartCategoryLabel(series, category)), {
+  start: plotLeft,
+  end: plotRight,
+  ...(barSeries.length > 0 ? { positions: bars.categories.map(category => category.x) } : {})
+})
+
 const hasData = hasLumenChartData(series)
+
+const barActions = drilldown ?
+bars.marks.map(mark => {
+  const item = barSeries.find(candidate => candidate.id === mark.seriesId)
+  const datum = item?.data.find(candidate => candidate.x === mark.category)
+
+  return item && datum ?
+createChartDatumAction(
+    createLumenChartDatumActivation(item.id, datum),
+    `${datum.xLabel ?? datum.x} · ${item.label}: ${datum.label ?? formatValue(mark.value)}`,
+    resolvedLabels
+  ) :
+null
+}) :
+[]
+
+const pointActions = drilldown ?
+lines.map((geometry, index) => {
+  const item = lineSeries[index]
+
+  return geometry.points.map(point => {
+    const datum = item?.data.find(candidate => alignComboLineDatum(candidate).x === point.x)
+
+    return item && datum ?
+createChartDatumAction(
+      createLumenChartDatumActivation(item.id, datum),
+      `${datum.xLabel ?? datum.x} · ${item.label}: ${datum.label ?? formatValue(point.y ?? 0)}`,
+      resolvedLabels
+    ) :
+null
+  })
+}) :
+[]
+
+const datumActions = [...barActions, ...pointActions.flat()]
+
 ---
 
-<Chart class:list={['ui-combo-chart', classProp, className]} {caption} {description} {heading} {summary} {...rest}>
+<Chart class:list={['ui-combo-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">{resolvedLabels.empty}</p>}
-  <div class="ui-chart__plot" hidden={!hasData}><svg aria-hidden="true" viewBox={`0 0 ${width} ${height}`}><g class="
-    ui-bar-chart__marks
+  <div aria-label={resolvedLabels.chartData} class="ui-chart__plot" role="region" tabindex="0" hidden={!hasData}><svg aria-hidden="true" viewBox={`0 0 ${width} ${height}`}><g class="
+    ui-chart__grid
   "
-                                                                                                           >{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) => {
+                                                                                                                                                                            >{ticks.map(tick => {
+  const y = scaleLumenChartValue(tick, domain, plotBottom, plotTop)
+
+  return <><line x1={plotLeft} x2={plotRight} y1={y} y2={y} /><text x={plotLeft - 8} y={y}>{formatValue(tick)}</text></>
+})}</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><g class="
+  ui-bar-chart__marks
+"
+                                                                                                                                                                  >{bars.marks.map((mark, index) => <rect data-ui-chart-datum={barActions[index]?.serialized} 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>)}{drilldown && bars.marks.map((mark, index) => (
+  <rect
+class="ui-chart__datum-hit"
+width={Math.max(12, mark.width)}
+height={Math.max(12, mark.height)}
+    x={mark.x - Math.max(0, 12 - mark.width) / 2}
+y={mark.y - Math.max(0, 12 - mark.height) / 2}
+    data-ui-chart-datum={barActions[index]?.serialized}
+  />
+))}</g>{lines.map((geometry, index) => {
  const item = lineSeries[index]
 
  if (!item) return null
@@ -108,16 +181,25 @@ d={path}
 )) }<path
 class="ui-line-chart__line"
 d={geometry.path}
-    /></g>
+    />{geometry.points.map(point => <circle class="ui-line-chart__point" cx={point.xCoordinate} cy={point.yCoordinate} r="3.5" />)}{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></div>
   {showTable && hasData && (
-<details class="ui-chart__data"><summary>{resolvedLabels.viewData}</summary><div><table><thead><tr><th scope="col">{resolvedLabels.category}</th>{series.map(item => <th scope="col">{item.label}</th>)}</tr></thead><tbody>{categories.map(category => (
-<tr><th scope="row">{String(category)}</th>{series.map(item => {
+<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>{series.map(item => <th scope="col">{item.label}</th>)}</tr></thead><tbody>{categories.map(category => (
+<tr><th scope="row">{String(category)}</th>{alignedSeries.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) ? resolvedLabels.notAvailable : formatValue(datum.y))}</td>
 })}</tr>
 ))}</tbody></table></div></details>
 )}
+  {drilldown && <ChartDatumActions actions={datumActions} label={resolvedLabels.exploreData} />}
 </Chart>

package/components/CountryFlag.astro

@@ -0,0 +1,23 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { getLumenPhoneFlagSource } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'span'> {
+  regionCode: string
+  decorative?: boolean
+}
+
+const { regionCode, decorative = false, class: className, ...props } = Astro.props
+const source = getLumenPhoneFlagSource(regionCode)
+---
+<span
+{...props}
+aria-hidden={decorative || undefined}
+aria-label={decorative ? undefined : props['aria-label'] ?? regionCode.toUpperCase()}
+class:list={['ui-country-flag', className]}
+data-slot="country-flag"
+role={decorative ? undefined : 'img'}
+>
+  {source ? <img alt="" height="18" src={source} width="24" /> : regionCode.toUpperCase().slice(0, 2)}
+</span>

package/components/DataTable.astro

@@ -33,6 +33,8 @@ interface Props extends HTMLAttributes<'div'> {
   class?: string | null
   className?: string
   columns?: DataTableColumn[]
+  layout?: 'records' | 'scroll'
+  sortMode?: 'client' | 'manual'
   glass?: boolean | 'subtle' | 'strong'
   name?: string
   rows?: DataTableRow[]
@@ -44,6 +46,8 @@ const {
   className = '',
   columns = [],
   glass = false,
+  layout = 'scroll',
+  sortMode = 'client',
   name,
   rows = [],
   selectable = false,
@@ -80,17 +84,20 @@ const getRowValue = (row: DataTableRow, index: number): string => String(row.row
   class:list={classList}
   data-ui-datatable
   data-ui-datatable-name={name}
+  data-ui-datatable-sort-mode={sortMode}
+  data-layout={layout}
   data-ui-datatable-selectable={selectable ? 'true' : undefined}
   data-ui-glass-track={glass ? true : undefined}
   {...passthrough}
 >
   {hasData ?
     (
-      <table>
-        <thead>
-          <tr>
+      <table class="ui-table" data-layout={layout} role="table">
+        <thead role="rowgroup">
+          <tr role="row">
             {columns.map(column => (
               <th
+                data-ui-datatable-sort-key={column.key}
                 data-ui-datatable-sort-type={column.sort}
                 data-ui-datatable-sortable={column.sortable ? 'true' : undefined}
                 scope="col"
@@ -100,15 +107,16 @@ const getRowValue = (row: DataTableRow, index: number): string => String(row.row
             ))}
           </tr>
         </thead>
-        <tbody>
+        <tbody role="rowgroup">
           {rows.map((row, rowIndex) => (
-            <tr data-ui-datatable-row data-value={getRowValue(row, rowIndex)}>
+            <tr role="row" data-ui-datatable-row data-value={getRowValue(row, rowIndex)}>
               {columns.map(column => {
                 const cell = row[column.key]
 
                 return (
-                  <td data-sort-value={getSortValue(cell)}>
-                    {formatCell(cell)}
+                  <td role="cell" data-sort-value={getSortValue(cell)}>
+                    {layout === 'records' && <span class="ui-table__label" aria-hidden="true">{column.header ?? column.label ?? column.key}</span>}
+                    <div class="ui-table__value">{formatCell(cell)}</div>
                   </td>
                 )
               })}

package/components/DatePicker.astro

@@ -1,7 +1,7 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
 
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+import { type LumenDateLabels, parseLumenDate, resolveLumenAstroProps, resolveLumenDateLabels, resolveLumenDateLocale } from '@santi020k/lumen-core'
 
 import Calendar from './Calendar.astro'
 
@@ -9,6 +9,8 @@ interface Props extends HTMLAttributes<'input'> {
   class?: string | null
   className?: string
   glass?: boolean | 'subtle' | 'strong'
+  labels?: Partial<Pick<LumenDateLabels, 'previousMonth' | 'nextMonth' | 'chooseDate'>>
+  locale?: string
   placeholder?: string
 }
 
@@ -18,6 +20,9 @@ const {
   disabled = false,
   glass = false,
   id,
+  labels,
+  locale,
+  readonly = false,
   max,
   min,
   name,
@@ -39,28 +44,28 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
   glass === 'strong' && 'ui-glass-strong'
 ], classProp, className)
 
+const resolvedLocale = resolveLumenDateLocale(locale)
+const resolvedLabels = { ...resolveLumenDateLabels(resolvedLocale), ...labels }
 const selectedValue = value === undefined || value === null ? undefined : String(value)
-const hasSelectedValue = selectedValue !== undefined && selectedValue !== ''
-const placeholderText = placeholder ?? 'Choose a date'
+const selectedDate = parseLumenDate(selectedValue)
+const hasSelectedValue = selectedDate !== null
+const placeholderText = placeholder ?? resolvedLabels.chooseDate
 
-const selectedDate = hasSelectedValue ?
-  new Date(`${selectedValue}T00:00:00.000Z`) :
-  undefined
-
-const displayValue = selectedDate && !Number.isNaN(selectedDate.getTime()) ?
-  new Intl.DateTimeFormat('en', {
-    day: 'numeric',
-    month: 'short',
-    timeZone: 'UTC',
-    year: 'numeric'
+const displayValue = selectedDate ?
+  new Intl.DateTimeFormat(resolvedLocale, {
+    day: 'numeric', month: 'short', timeZone: 'UTC', year: 'numeric'
   }).format(selectedDate) :
-  placeholderText
+placeholderText
+
 ---
 
 <div
   class:list={classList}
   data-placeholder={hasSelectedValue ? undefined : 'true'}
   data-ui-date-picker
+  data-locale={locale}
+  data-choose-date-label={labels?.chooseDate}
+  data-placeholder-default={placeholder === undefined ? 'true' : undefined}
   data-ui-glass-track={glass ? true : undefined}
 >
   <input
@@ -71,7 +76,8 @@ const displayValue = selectedDate && !Number.isNaN(selectedDate.getTime()) ?
     max={max}
     min={min}
     name={name}
-    placeholder={placeholder}
+    placeholder={placeholderText}
+    readonly={readonly}
     required={required}
     type={type}
     value={value}
@@ -83,6 +89,7 @@ const displayValue = selectedDate && !Number.isNaN(selectedDate.getTime()) ?
       aria-controls={popoverId}
       aria-expanded="false"
       aria-haspopup="dialog"
+      aria-disabled={readonly ? 'true' : undefined}
       aria-required={required ? 'true' : undefined}
       class="ui-input ui-date-picker ui-date-picker__trigger"
       data-ui-date-picker-trigger
@@ -97,7 +104,7 @@ const displayValue = selectedDate && !Number.isNaN(selectedDate.getTime()) ?
     </button>
 
     <div
-      aria-label="Choose date"
+      aria-label={resolvedLabels.chooseDate}
       class="ui-date-picker__popover"
       data-state="closed"
       data-ui-date-picker-popover
@@ -105,7 +112,7 @@ const displayValue = selectedDate && !Number.isNaN(selectedDate.getTime()) ?
       id={popoverId}
       role="dialog"
     >
-      <Calendar max={typeof max === 'string' ? max : undefined} min={typeof min === 'string' ? min : undefined} value={selectedValue} />
+      <Calendar locale={locale} labels={labels} readOnly={readonly} max={typeof max === 'string' ? max : undefined} min={typeof min === 'string' ? min : undefined} value={selectedValue} />
     </div>
   </div>
 </div>

package/components/DescriptionDetail.astro

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