@santi020k/lumen-astro 3.0.1 → 4.1.0

package/components/BarChart.astro

@@ -1,9 +1,14 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
 
-import {
+import {   alignLumenChartSeries,
   createLumenBarGeometry,
+createLumenChartDatumActivation,
   formatLumenChartSummary,
+  getLumenChartCategories,
+  getLumenChartCategoryLabel,
+  getLumenChartCategoryTicks,
+  getLumenChartMotionKey,
   getLumenChartTicks,
   getLumenChartToneClassName,
   hasLumenChartData,
@@ -15,7 +20,10 @@ import {
   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
@@ -23,6 +31,7 @@ interface Props extends HTMLAttributes<'figure'> {
   class?: string | null
   className?: string
   description?: string
+  drilldown?: boolean
   emptyLabel?: string
   formatCategory?: (category: number | string) => string
   formatValue?: (value: number) => string
@@ -44,8 +53,9 @@ const {
   class: classProp = '',
   className = '',
   description,
+  drilldown = false,
   emptyLabel,
-  formatCategory = String,
+  formatCategory,
   formatValue = String,
   glass = false,
   heading,
@@ -60,11 +70,41 @@ const {
 } = Astro.props
 
 const resolvedLabels = resolveLumenChartLabels(labels)
-const summary = summaryProp ?? formatLumenChartSummary(series, formatValue, resolvedLabels)
-const geometry = createLumenBarGeometry(series, { categoryWidth, layout, orientation })
-const hasData = hasLumenChartData(series)
+const categories = getLumenChartCategories(series)
+const alignedSeries = series.map(item => alignLumenChartSeries(item, categories))
+
+const motionKeys = new Map(alignedSeries.flatMap(item => item.data.map(point => [
+  JSON.stringify([item.id, point.x]), getLumenChartMotionKey(item.id, point)
+] as const)))
+
+const summary = summaryProp ?? formatLumenChartSummary(alignedSeries, formatValue, resolvedLabels)
+
+const geometry = createLumenBarGeometry(alignedSeries, {
+  width: 480,
+  height: 240,
+  categoryWidth: categoryWidth ?? 160,
+  ...(formatCategory === undefined ? {} : { formatCategory }),
+  formatValue,
+  layout,
+  orientation
+})
+
+const hasData = hasLumenChartData(alignedSeries)
 const ticks = getLumenChartTicks(geometry.domain)
-const categories = geometry.categories.map(category => category.category)
+const margin = geometry.margin
+
+const categoryTicks = getLumenChartCategoryTicks(geometry.categories.map(category => String(category.label)), {
+  end: geometry.width - margin.right,
+  positions: geometry.categories.map(category => category.x),
+  start: margin.left
+})
+
+const valueTicks = getLumenChartCategoryTicks(ticks.map(tick => formatValue(tick)), {
+  end: geometry.width - margin.right,
+  minimumGap: 48,
+  positions: ticks.map(tick => scaleLumenChartValue(tick, geometry.domain, margin.left, geometry.width - margin.right)),
+  start: margin.left
+})
 
 const datumFor = (item: LumenChartSeries, category: number | string) => (
   item.data.find(datum => datum.x === category)
@@ -84,15 +124,23 @@ const formattedValueFor = (item: LumenChartSeries, category: number | string) =>
   return value === null || !Number.isFinite(value) ? resolvedLabels.notAvailable : formatValue(value)
 }
 
-const categoryLabelFor = (category: number | string) => {
-  const label = series.flatMap(item => item.data).find(datum => datum.x === category)?.xLabel
+const categoryLabelFor = (category: number | string) => getLumenChartCategoryLabel(alignedSeries, category, formatCategory, 'detail')
 
-  return label ?? formatCategory(category)
-}
+const datumActions = drilldown ?
+geometry.marks.map(mark => {
+  const item = alignedSeries.find(candidate => candidate.id === mark.seriesId)
+  const datum = item?.data.find(candidate => candidate.x === mark.category)
+
+  return item && datum ?
+createChartDatumAction(
+    createLumenChartDatumActivation(item.id, datum),
+    `${categoryLabelFor(mark.category)} · ${mark.seriesLabel}: ${formatValue(mark.value)}`,
+    resolvedLabels
+  ) :
+null
+}) :
+[]
 
-const margin = orientation === 'horizontal' ?
-  { bottom: 24, left: Math.max(64, Math.min(240, categoryWidth ?? 112)), right: 20, top: 16 } :
-  { bottom: 52, left: 52, right: 16, top: 16 }
 ---
 
 <Chart
@@ -103,6 +151,7 @@ const margin = orientation === 'horizontal' ?
   {heading}
   {summary}
   {...rest}
+  data-ui-chart-activation={drilldown || undefined}
 >
   {
     showLegend && hasData && (
@@ -117,7 +166,7 @@ const margin = orientation === 'horizontal' ?
     )
   }
   {!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"
       preserveAspectRatio="xMidYMid meet"
@@ -145,36 +194,40 @@ const margin = orientation === 'horizontal' ?
                 />
               ) :
               (
-                <line
-                  x1={margin.left}
-                  x2={geometry.width - margin.right}
-                  y1={coordinate}
-                  y2={coordinate}
-                />
+                <>
+                  <line x1={margin.left} x2={geometry.width - margin.right} y1={coordinate} y2={coordinate} />
+                  <text x={margin.left - 8} y={coordinate}>{formatValue(tick)}</text>
+                </>
               )
           })
         }
       </g>
       <g class="ui-chart__axis-labels">
         {
-          geometry.categories.map(category => (
-            <text
-              dominant-baseline={orientation === 'horizontal' ? 'middle' : undefined}
-              text-anchor={orientation === 'horizontal' ? 'end' : 'middle'}
-              x={category.x}
-              y={category.y}
-            >
-              {String(category.label)}
+          orientation === 'horizontal' ?
+geometry.categories.map(category => (
+            <text dominant-baseline="middle" text-anchor="end" x={category.x} y={category.y}>
+              {getLumenChartCategoryTicks([String(category.label)], { end: margin.left - 16, start: 0 })[0]?.label}
             </text>
+          )) :
+categoryTicks.map(tick => (
+            <text text-anchor={tick.textAnchor} x={tick.position} y={geometry.height - 20}>{tick.label}</text>
           ))
         }
       </g>
+      {orientation === 'horizontal' && (
+<g class="ui-chart__axis-labels">{valueTicks.map(tick => (
+        <text text-anchor={tick.textAnchor} x={tick.position} y={geometry.height - 6}>{tick.label}</text>
+      ))}</g>
+)}
       <g class="ui-bar-chart__marks">
         {
-          geometry.marks.map(mark => (
+          geometry.marks.map((mark, index) => (
             <rect
               class={getLumenChartToneClassName(mark.tone)}
+              data-ui-chart-motion-key={motionKeys.get(JSON.stringify([mark.seriesId, mark.category]))}
               height={mark.height}
+              data-ui-chart-datum={datumActions[index]?.serialized}
               rx="4"
               width={mark.width}
               x={mark.x}
@@ -186,6 +239,16 @@ const margin = orientation === 'horizontal' ?
             </rect>
           ))
         }
+{drilldown && geometry.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={datumActions[index]?.serialized}
+  />
+))}
       </g>
     </svg>
   </div>
@@ -193,7 +256,7 @@ const margin = orientation === 'horizontal' ?
     showTable && hasData && (
       <details class="ui-chart__data">
         <summary>{resolvedLabels.viewData}</summary>
-        <div>
+        <div role="group" tabindex="0" aria-label={resolvedLabels.chartData}>
           <table>
             <thead>
               <tr>
@@ -205,7 +268,7 @@ const margin = orientation === 'horizontal' ?
               {categories.map(category => (
                 <tr>
                   <th scope="row">{categoryLabelFor(category)}</th>
-                  {series.map(item => (
+                  {alignedSeries.map(item => (
                     <td>
                       {labelFor(item, category) ?? formattedValueFor(item, category)}
                     </td>
@@ -218,4 +281,5 @@ const margin = orientation === 'horizontal' ?
       </details>
     )
   }
+  {drilldown && <ChartDatumActions actions={datumActions} label={resolvedLabels.exploreData} />}
 </Chart>

package/components/BoxPlot.astro

@@ -0,0 +1,77 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { createLumenBoxPlotGeometry, getLumenChartToneClassName, type LumenBoxPlotDatum, type LumenBoxPlotOptions, type LumenBoxPlotStatisticLabels, type LumenChartLabels, resolveLumenChartLabels } from '@santi020k/lumen-core'
+
+import Chart from './Chart.astro'
+
+interface Props extends HTMLAttributes<'figure'>, LumenBoxPlotOptions {
+  data: readonly LumenBoxPlotDatum[]
+  className?: string
+  heading?: string
+  description?: string
+  caption?: string
+  presentation?: 'bare' | 'default'
+  summary?: string
+  formatValue?: (value: number) => string
+  labels?: Partial<LumenChartLabels>
+  statisticLabels?: Partial<LumenBoxPlotStatisticLabels>
+  showTable?: boolean
+}
+
+const { data, domain, formatValue = String, labels, statisticLabels, showTable = true, summary, class: classProp, className, ...props } = Astro.props
+const text = resolveLumenChartLabels(labels)
+const stats = { min: 'Lower whisker', q1: 'First quartile', median: 'Median', q3: 'Third quartile', max: 'Upper whisker', outliers: 'Outliers', ...statisticLabels }
+const columns = ['min', 'q1', 'median', 'q3', 'max'] as const
+const model = createLumenBoxPlotGeometry(data, { domain })
+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}. ${columns.map(column => `${stats[column]}: ${format(row[column])}`).join('. ')}. ${stats.outliers}: ${(row.outliers ?? []).map(formatValue).join(', ') || '—'}.`
+)).join(' ')
+
+---
+<Chart {...props} class:list={['ui-box-plot', 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> :
+(
+<>
+    <ul class="ui-box-plot__rows">{model.rows.map((row, index) => (
+<li class={getLumenChartToneClassName(row.tone, index)}><div class="
+  ui-box-plot__label
+"
+                                                        ><span>{row.label}</span><span>{stats.median}: <strong>{format(row.median)}</strong></span></div><div
+class="ui-box-plot__track"
+aria-hidden="true"
+                                                                                                                                                         >
+      {row.minPosition !== null && row.maxPosition !== null && (
+<><span
+class="ui-box-plot__whisker"
+style={{ left: `${row.minPosition * 100}%`, width: `${(row.maxPosition - row.minPosition) * 100}%` }}
+  /><span
+class="ui-box-plot__cap"
+style={{ left: `${row.minPosition * 100}%` }}
+    /><span
+class="ui-box-plot__cap"
+style={{ left: `${row.maxPosition * 100}%` }}
+      /></>
+)}
+      {row.q1Position !== null && row.q3Position !== null && (
+<span
+class="ui-box-plot__box"
+style={{ left: `${row.q1Position * 100}%`, width: `${(row.q3Position - row.q1Position) * 100}%` }}
+/>
+)}
+      {row.medianPosition !== null && <span class="ui-box-plot__median" style={{ left: `${row.medianPosition * 100}%` }} />}
+      {row.outlierPositions.map(position => <span class="ui-box-plot__outlier" style={{ left: `${position * 100}%` }} />)}
+    </div></li>
+))}</ul>
+    <div class="ui-bullet-chart__ticks" aria-hidden="true">{model.ticks.map(tick => <span>{formatValue(tick)}</span>)}</div>
+    {!showTable && <ul class="ui-sr-only">{model.rows.map(row => <li>{row.label}. {columns.map(column => `${stats[column]}: ${format(row[column])}`).join('. ')}. {stats.outliers}: {(row.outliers ?? []).map(formatValue).join(', ') || '—'}.</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>{columns.map(column => <th scope="col">{stats[column]}</th>)}<th scope="col">{stats.outliers}</th></tr></thead><tbody>{model.rows.map(row => <tr><th scope="row">{row.label}</th>{columns.map(column => <td>{format(row[column])}</td>)}<td>{(row.outliers ?? []).map(formatValue).join(', ') || '—'}</td></tr>)}</tbody></table></div></details>}
+  </>
+)}
+</Chart>

package/components/Breadcrumb.astro

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

package/components/BulletChart.astro

@@ -0,0 +1,64 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { createLumenBulletGeometry, getLumenChartToneClassName, type LumenBulletOptions, type LumenChartLabels, type LumenChartTone, resolveLumenChartLabels } from '@santi020k/lumen-core'
+
+import Chart from './Chart.astro'
+
+interface Props extends HTMLAttributes<'figure'>, LumenBulletOptions {
+  caption?: string
+  className?: string
+  description?: string
+  formatValue?: (value: number) => string
+  heading?: string
+  labels?: Partial<LumenChartLabels>
+  presentation?: 'bare' | 'default'
+  showTable?: boolean
+  summary?: string
+  target: number
+  targetLabel?: string
+  tone?: LumenChartTone
+  value: number | null
+  valueLabel?: string
+}
+
+const { class: classProp, className, domain, formatValue = String, labels, ranges, showTable = true, summary, target, targetLabel = 'Target', tone = 'series-1', value, valueLabel, ...props } = Astro.props
+const text = resolveLumenChartLabels(labels)
+const model = createLumenBulletGeometry(value, target, { domain, ranges })
+const title = valueLabel ?? text.value
+const actual = model.valid && value !== null ? formatValue(value) : text.notAvailable
+const factual = model.valid ? `${title}: ${actual}. ${targetLabel}: ${formatValue(target)}.` : text.invalidData
+---
+
+<Chart {...props} class:list={['ui-bullet-chart', classProp, className]} summary={summary ?? factual}>
+  {model.valid ?
+(
+    <>
+      <div class="ui-bullet-chart__values">
+        <div><span>{title}</span><strong>{actual}</strong></div>
+        <p><span class="ui-bullet-chart__target-key" aria-hidden="true" />{targetLabel}<strong>{formatValue(target)}</strong></p>
+      </div>
+      <div aria-hidden="true" class="ui-bullet-chart__plot">
+        <div class="ui-bullet-chart__track">
+          {model.ranges.map((range, index) => (
+<span
+class:list={['ui-bullet-chart__range', getLumenChartToneClassName(range.tone ?? 'neutral')]}
+style={{ left: `${range.startRatio * 100}%`, width: `${(range.endRatio - range.startRatio) * 100}%`, opacity: 0.08 + index / Math.max(1, model.ranges.length - 1) * 0.14 }}
+/>
+))}
+          {value !== null && <span class:list={['ui-bullet-chart__bar', getLumenChartToneClassName(tone)]} style={{ left: `${model.valueStartRatio * 100}%`, width: `${model.valueWidthRatio * 100}%` }} />}
+          <span class="ui-bullet-chart__target" style={{ left: `${model.targetRatio * 100}%` }} />
+        </div>
+        <div class="ui-bullet-chart__ticks">{model.ticks.map(tick => <span>{formatValue(tick.value)}</span>)}</div>
+      </div>
+      {model.ranges.length > 0 && <ul class="ui-bullet-chart__ranges">{model.ranges.map(range => <li class={getLumenChartToneClassName(range.tone ?? 'neutral')}><span>{range.label}</span><span>{formatValue(range.start)}–{formatValue(range.end)}</span></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><tr><th scope="row">{title}</th><td>{actual}</td></tr><tr><th scope="row">{targetLabel}</th><td>{formatValue(target)}</td></tr>{model.ranges.map(range => <tr><th scope="row">{range.label}</th><td>{formatValue(range.start)}–{formatValue(range.end)}</td></tr>)}</tbody>
+      </table></div></details>
+)}
+    </>
+  ) :
+<p class="ui-chart__empty" role="status">{text.invalidData}</p>}
+</Chart>

package/components/Button.astro

@@ -50,5 +50,5 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
   {...passthrough}
 >
   {loading && <span aria-hidden="true" class="ui-spinner"></span>}
-  <slot />
+  <span class="ui-button__content"><slot /></span>
 </button>

package/components/Calendar.astro

@@ -1,13 +1,16 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
 
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+import { isLumenDateBoundsValid, type LumenDateLabels, parseLumenDate, resolveLumenAstroProps, resolveLumenDateLabels, resolveLumenDateLocale } from '@santi020k/lumen-core'
 
 interface Props extends Omit<HTMLAttributes<'div'>, 'value'> {
   class?: string | null
   className?: string
   disabled?: boolean
   glass?: boolean | 'subtle' | 'strong'
+  labels?: Partial<Pick<LumenDateLabels, 'previousMonth' | 'nextMonth'>>
+  locale?: string
+  readOnly?: boolean
   max?: string
   min?: string
   month?: string
@@ -15,66 +18,31 @@ interface Props extends Omit<HTMLAttributes<'div'>, 'value'> {
   value?: string
 }
 
-const isoDatePattern = /^\d{4}-\d{2}-\d{2}$/
-const isoMonthPattern = /^\d{4}-\d{2}$/
-const weekdayFormatter = new Intl.DateTimeFormat('en', { timeZone: 'UTC', weekday: 'short' })
-const monthFormatter = new Intl.DateTimeFormat('en', { month: 'long', timeZone: 'UTC', year: 'numeric' })
-
-const dayFormatter = new Intl.DateTimeFormat('en', {
-  day: 'numeric',
-  month: 'long',
-  timeZone: 'UTC',
-  weekday: 'long',
-  year: 'numeric'
-})
-
-const parseIsoDate = (date: string | undefined): Date | undefined => {
-  if (!date || !isoDatePattern.test(date)) return undefined
-
-  const [year, month, day] = date.split('-').map(Number)
-  const parsed = new Date(Date.UTC(year, month - 1, day))
-
-  return parsed.getUTCFullYear() === year &&
-    parsed.getUTCMonth() === month - 1 &&
-    parsed.getUTCDate() === day ?
-    parsed :
-    undefined
-}
-
-const parseIsoMonth = (date: string | undefined): Date | undefined => {
-  if (!date || !isoMonthPattern.test(date)) return undefined
-
-  const [year, month] = date.split('-').map(Number)
-  const parsed = new Date(Date.UTC(year, month - 1, 1))
-
-  return parsed.getUTCFullYear() === year && parsed.getUTCMonth() === month - 1 ?
-    parsed :
-    undefined
-}
-
-const formatIsoDate = (date: Date): string => date.toISOString().slice(0, 10)
-const formatIsoMonth = (date: Date): string => date.toISOString().slice(0, 7)
+const createDate = (year: number, month: number, day: number): Date => {
+  const date = new Date(0)
 
-const addDays = (date: Date, days: number): Date => {
-  const utc = Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate() + days)
+  date.setUTCFullYear(year, month, day)
 
-  return new Date(utc)
+  return date
 }
 
-const isBefore = (date: Date, limit: Date | undefined): boolean => (
-  Boolean(limit && formatIsoDate(date) < formatIsoDate(limit))
-)
-
-const isAfter = (date: Date, limit: Date | undefined): boolean => (
-  Boolean(limit && formatIsoDate(date) > formatIsoDate(limit))
-)
+const parseIsoDate = (date: string | undefined): Date | undefined => parseLumenDate(date) ?? undefined
+const parseIsoMonth = (date: string | undefined): Date | undefined => date ? parseIsoDate(`${date}-01`) : undefined
+const formatIsoDate = (date: Date): string => date.toISOString().split('T')[0] ?? ''
+const formatIsoMonth = (date: Date): string => formatIsoDate(date).slice(0, -3)
+const addDays = (date: Date, days: number): Date => createDate(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate() + days)
+const isBefore = (date: Date, limit: Date | undefined): boolean => Boolean(limit && date < limit)
+const isAfter = (date: Date, limit: Date | undefined): boolean => Boolean(limit && date > limit)
 
 const {
   class: classProp = '',
   className = '',
-  disabled = false,
+  disabled: requestedDisabled = false,
   glass = false,
   id,
+  labels,
+  locale,
+  readOnly = false,
   max,
   min,
   month,
@@ -83,16 +51,26 @@ const {
   ...rest
 } = Astro.props
 
+const disabled = requestedDisabled || !isLumenDateBoundsValid(min, max)
+const resolvedLocale = resolveLumenDateLocale(locale)
+const resolvedLabels = { ...resolveLumenDateLabels(resolvedLocale), ...labels }
+const weekdayFormatter = new Intl.DateTimeFormat(resolvedLocale, { timeZone: 'UTC', weekday: 'short' })
+const monthFormatter = new Intl.DateTimeFormat(resolvedLocale, { month: 'long', timeZone: 'UTC', year: 'numeric' })
+
+const dayFormatter = new Intl.DateTimeFormat(resolvedLocale, {
+  day: 'numeric', month: 'long', timeZone: 'UTC', weekday: 'long', year: 'numeric'
+})
+
 const today = new Date()
-const todayUtc = new Date(Date.UTC(today.getFullYear(), today.getMonth(), today.getDate()))
+const todayUtc = createDate(today.getFullYear(), today.getMonth(), today.getDate())
 const selectedDate = parseIsoDate(value)
-const minDate = parseIsoDate(min)
-const maxDate = parseIsoDate(max)
+const minDate = parseIsoDate(min ?? '0001-01-01')
+const maxDate = parseIsoDate(max ?? '9999-12-31')
 const selectedIso = selectedDate ? formatIsoDate(selectedDate) : ''
 
 const monthDate = parseIsoMonth(month) ??
-  (selectedDate ? new Date(Date.UTC(selectedDate.getUTCFullYear(), selectedDate.getUTCMonth(), 1)) : undefined) ??
-  new Date(Date.UTC(todayUtc.getUTCFullYear(), todayUtc.getUTCMonth(), 1))
+  (selectedDate ? createDate(selectedDate.getUTCFullYear(), selectedDate.getUTCMonth(), 1) : undefined) ??
+  createDate(todayUtc.getUTCFullYear(), todayUtc.getUTCMonth(), 1)
 
 const calendarId = id ?? `ui-calendar-${Math.random().toString(36).slice(2)}`
 const labelId = `${calendarId}-label`
@@ -108,8 +86,9 @@ const firstSelectableDate = visibleDates.find(date => date.getUTCMonth() === mon
 
 let focusIso = formatIsoDate(monthDate)
 
-if (selectedDate && formatIsoMonth(selectedDate) === monthIso) focusIso = selectedIso
+if (selectedDate && !isBefore(selectedDate, minDate) && !isAfter(selectedDate, maxDate) && formatIsoMonth(selectedDate) === monthIso) focusIso = selectedIso
 else if (
+  !isBefore(todayUtc, minDate) && !isAfter(todayUtc, maxDate) &&
   todayUtc.getUTCMonth() === monthDate.getUTCMonth() &&
   todayUtc.getUTCFullYear() === monthDate.getUTCFullYear()
 ) focusIso = todayIso
@@ -131,12 +110,16 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
   aria-disabled={disabled ? 'true' : undefined}
   class:list={classList}
   data-ui-calendar
+  data-locale={locale}
+  data-readonly={readOnly ? 'true' : undefined}
+  data-previous-month-label={labels?.previousMonth}
+  data-next-month-label={labels?.nextMonth}
   data-ui-calendar-initial-month={monthIso}
-  data-ui-calendar-max={maxDate ? formatIsoDate(maxDate) : undefined}
-  data-ui-calendar-min={minDate ? formatIsoDate(minDate) : undefined}
+  data-ui-calendar-max={max}
+  data-ui-calendar-min={min}
   data-ui-calendar-month={monthIso}
   data-ui-calendar-value={selectedIso || undefined}
-  data-disabled={disabled ? 'true' : undefined}
+  data-disabled={requestedDisabled ? 'true' : undefined}
   data-ui-glass-track={glass ? true : undefined}
   id={calendarId}
   {...passthrough}
@@ -151,27 +134,33 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
 
   <div class="ui-calendar__header">
     <button
-      aria-label="Previous month"
+      aria-label={resolvedLabels.previousMonth}
       class="ui-calendar__nav"
       data-ui-calendar-prev
-      disabled={disabled || undefined}
+      disabled={disabled || isBefore(addDays(monthDate, -1), minDate) || undefined}
       type="button"
     >
       <span aria-hidden="true">&lsaquo;</span>
     </button>
     <strong class="ui-calendar__label" data-ui-calendar-label id={labelId}>{monthFormatter.format(monthDate)}</strong>
     <button
-      aria-label="Next month"
+      aria-label={resolvedLabels.nextMonth}
       class="ui-calendar__nav"
       data-ui-calendar-next
-      disabled={disabled || undefined}
+      disabled={disabled || isAfter(createDate(monthDate.getUTCFullYear(), monthDate.getUTCMonth() + 1, 1), maxDate) || undefined}
       type="button"
     >
       <span aria-hidden="true">&rsaquo;</span>
     </button>
   </div>
 
-  <table aria-labelledby={labelId} class="ui-calendar__grid" data-ui-calendar-grid role="grid">
+  <table
+aria-readonly={readOnly ? 'true' : undefined}
+aria-labelledby={labelId}
+class="ui-calendar__grid"
+data-ui-calendar-grid
+role="grid"
+  >
     <thead>
       <tr role="row">
         {weekdays.map(weekday => <th role="columnheader" scope="col">{weekday}</th>)}