Appearance
Styling and CSS customization
Availability
Calendar availability uses .xc-availability-band with data-band-type=blocked or buffer in the time grid. Inline top/height retain minute geometry; bands do not intercept event pointers. .xc-availability-summary is a per-day native disclosure with keyboard focus. .xc-availability-status presents rejection text and is a live region. Preserve both textual reasons and visible focus.
[data-unavailable=true] identifies a rejected interaction preview/target; its event/day outline is dashed, so rejection does not rely on color alone. Override --xc-unavailable (default #b3261e, outline/status), --xc-blocked-background (#b3261e12, blocked hatch) and --xc-buffer-background (#79747e22, buffer hatch) on the calendar root. Supply an appropriate high-contrast unavailable foreground for dark themes.
See availability for behavior and limitations.
ChronoSketch ships a Material Design 3 default theme, not a mandatory product theme. These CSS variables and named styling hooks are supported customization points for Vanilla JS, React and Vue. No Shadow DOM or !important rules block overrides.
Unified control style
ts
createCalendar({ controlsStyle: 'rounded' })
// Also supported: 'squared' and 'flat'controlsStyle defaults to rounded. It applies to Today, navigation arrows, view selection, the date-picker trigger, picker buttons and date-button shapes. rounded uses 24px control corners; squared uses subtle 4px corners; flat uses 4px corners with transparent borders/backgrounds and no resting control shadow. The today indicator stays circular in the calendar and picker, independently of control radii: filled in rounded/squared, transparent with a 1px accent border in flat. This also applies when today is selected in the picker. Other selected dates retain their control style. Hover and keyboard focus remain visible. The date-picker popup follows controlsStyle: its default dialog radius in rounded mode and the 4px field radius in squared/flat mode. Other menus, dialog shells and event cards retain their separate theme variables.
Vanilla supports calendar.setControlsStyle('flat'); omitting the argument restores rounded. React/Vue synchronize the same option without remounting. Changes preserve focus, navigation and scroll. Invalid values throw before changing the current style. The option sets presentation only, not application/domain state.
The root exposes data-controls-style for styling. Presets set button/field radius variables; consumer rules such as .booking-calendar .xc-calendar loaded afterward can override them. Flat mode intentionally overrides resting border/background colors; to override that appearance, target the corresponding state selector, e.g. .booking-calendar .xc-calendar[data-controls-style=flat] .xc-button.
Load order and instance scope
Import the package stylesheet once, then your stylesheet:
ts
import '@xsigns/chronosketch/styles.css'
import './calendar-theme.css'Place each calendar inside a wrapper you own. Target the actual .xc-calendar root under that wrapper: setting variables only on the wrapper will not override default values declared directly on the calendar root.
html
<div class="booking-calendar"><!-- mount ChronoSketch here --></div>css
.booking-calendar .xc-calendar {
--xc-accent: #006b54;
--xc-on-primary: #ffffff;
--xc-primary-container: #c0f2dc;
--xc-on-primary-container: #00382b;
--xc-surface: #ffffff;
--xc-on-surface: #18251f;
--xc-surface-container: #edf5ef;
--xc-border: #bfd0c4;
--xc-muted: #52645a;
--xc-grid-guide: #e3ece6;
--xc-state-hover: #006b5414;
--xc-state-pressed: #006b5424;
--xc-border-width: 1px;
--xc-radius-calendar: 12px;
--xc-radius-button: 8px;
--xc-radius-field: 8px;
--xc-radius-menu: 12px;
--xc-radius-dialog: 16px;
--xc-radius-event: 6px;
}Use separate wrappers for independently themed instances. Controls, selection popovers and the date dialog remain DOM descendants of the calendar even when rendered in the browser top layer, so root variables and ancestor selectors apply.
Theme variables
All variables are declared on .xc-calendar. Change related foreground/background roles together; an accent override does not automatically generate a whole palette.
| Variable | Default | Purpose |
|---|---|---|
--xc-accent | #365eeb | Primary selection, today, focus and event accent |
--xc-on-primary | #fff | Text on the primary selection color |
--xc-primary-container | #e1e7ff | Event and selected-option background |
--xc-on-primary-container | #183270 | Text on that background |
--xc-surface | #fff | Calendar, outlined fields and buttons |
--xc-on-surface | #202124 | Main text |
--xc-surface-container | #f1f3fa | Menu/dialog surfaces and outside-month days |
--xc-border | #e4e8ef | Calendar, grid, button and dialog borders |
--xc-border-width | 1px | Those borders and the select outline; excludes today outlines, focus rings and event accent |
--xc-muted | #6d7688 | Secondary text and select border color |
--xc-grid-guide | #f0f2f6 | Half-hour lines |
--xc-state-hover | #365eeb14 | Hover/active-option overlay |
--xc-state-pressed | #365eeb24 | Pressed overlay |
--xc-backdrop | #15203933 | Mobile date-dialog backdrop |
--xc-radius-calendar | 16px | Outer calendar corners |
--xc-shadow-calendar | 0 2px 6px #2021240a, 0 8px 24px #2021240f | Outer calendar shadow; use none to disable |
--xc-radius-button | 24px | Button and date-cell corners, except today; presets may change this |
--xc-radius-field | 24px | View-select corners |
--xc-radius-menu | 12px | Selection popup corners |
--xc-radius-dialog | 28px | Date-picker dialog corners |
--xc-radius-event | 4px | Event corners |
--xc-elevation-2 | 0 2px 6px #20212426, 0 4px 12px #20212414 | Selection popup shadow |
--xc-elevation-3 | 0 8px 24px #20212433 | Date-dialog shadow |
CSS class reference
Prefer variables for a consistent theme; use these classes for targeted changes. The classes are styling hooks, not a DOM hierarchy or JavaScript querying API.
| Classes | Area |
|---|---|
.xc-calendar | Root: typography, surface and outer border |
.xc-toolbar, .xc-navigation, .xc-actions, .xc-title | Header groups and visible period title |
.xc-icon, .xc-date-trigger | Inline icon size/color and date/icon alignment |
.xc-button, .xc-icon-button | Shared buttons and centered SVG navigation buttons |
.xc-view-field, .xc-view-label, .xc-view-select | Outlined view selection field |
.xc-select-list, .xc-select-option | Material popup and its options |
.xc-date-picker, .xc-picker-dialog | Date control container and responsive popup; mobile uses ::backdrop |
.xc-picker-header, .xc-picker-grid | Picker month navigation and date grid |
.xc-month, .xc-weekday | Month grid and weekday headings |
.xc-day, .xc-date, .xc-event | Day cells, date buttons and all-day events |
.xc-agenda, .xc-agenda-date, .xc-empty | Agenda rows, headings and empty state |
.xc-time-view, .xc-time-view-week, .xc-time-view-day | Day/week view and modifiers |
.xc-time-view-content, .xc-time-view-columns | Time-grid content and column alignment |
.xc-time-view-header, .xc-time-view-all-day, .xc-period-heading | Fixed headings and all-day area |
.xc-all-day-label, .xc-time-corner | All-day caption and time-axis corner |
.xc-time-scroll, .xc-time-row, .xc-hour-label, .xc-time-cell | Scroll viewport, hour height, labels and cells |
Targeted overrides
css
.booking-calendar .xc-calendar {
font-family: Inter, system-ui, sans-serif;
}
.booking-calendar .xc-title {
font-size: 1.25rem;
}
.booking-calendar .xc-event {
border-left-width: 4px;
font-weight: 500;
}
.booking-calendar .xc-time-scroll {
height: 560px;
max-height: 70vh;
}
.booking-calendar .xc-time-row {
height: 72px;
}
.booking-calendar .xc-time-view-week .xc-time-view-content {
min-width: 840px;
}The initial time scroll reads rendered row height. Keep hour rows equally tall and load layout CSS before mounting so initial positioning can measure it. Keep column definitions shared between headings and time rows. --xc-day-count is an internal layout value, not a theme token. Popup positioning uses inline geometry; customize its colors, borders and corners without overriding top/left/position.
State styling
| Selector | Meaning |
|---|---|
.xc-view-select[aria-expanded="true"] | Open selection field |
.xc-select-option[aria-selected="true"] | Committed view |
.xc-select-option[data-active="true"] | Keyboard-highlighted option |
.xc-day[data-outside="true"] | Outside the selected month |
.xc-date[aria-current="date"] | Today in the main calendar |
.xc-picker-grid [data-outside="true"] | Outside the displayed picker month |
.xc-picker-grid [aria-selected="true"] .xc-button | Selected picker date |
.xc-picker-grid [aria-current="date"] | Today in the picker |
Use :hover, :active and :focus-visible for interaction styling. Keep a visible focus indicator, readable contrast, usable touch targets and reduced-motion behavior when overriding defaults. Do not change semantic attributes from CSS/JS to force a visual state.
Framework integration
React and Vanilla use the same wrapper/global stylesheet example above. With CSS Modules, make package classes global inside your local wrapper:
css
.calendar :global(.xc-calendar) { --xc-accent: #006b54; }In a Vue SFC, wrap the component and use :deep inside scoped styles because the library creates its own DOM nodes:
vue
<template>
<div class="booking-calendar"><Calendar :options="options" /></div>
</template>
<style scoped>
.booking-calendar :deep(.xc-calendar) {
--xc-radius-calendar: 12px;
}
.booking-calendar :deep(.xc-event) {
font-weight: 500;
}
</style>A normal global stylesheet works in Vue too. You do not need a separate styling API or framework-specific theme implementation.
Compatibility
This document describes the supported styling options. Maintain the documented classes, state selectors and variables alongside source. Renaming/removing them or changing their meaning is a consumer-facing change and must be recorded in release notes. Review these notes when updating. Do not rely on element order, generated IDs, undocumented attributes, internal file paths or nth-child selectors as compatibility guarantees. The picker uses [data-presentation="desktop"] above 600px and [data-presentation="mobile"] at smaller widths. Desktop placement uses inline geometry; do not override top/left/max-height. Unselected picker day buttons other than today are transparent so squared/rounded presets do not create a grid of filled buttons.
Event context menu
.xc-context-menu styles the popup; .xc-context-item styles its actions. [aria-disabled=true] identifies unavailable actions; preserve visible keyboard focus. The menu inherits surface-container, on-surface, muted, state-hover, radius-menu and elevation-2 variables from its calendar root, including in the browser top layer. Inline positioning is internal geometry. Menu items remain flat across control styles. See event context actions.
Outer calendar container
Only the outer shell uses --xc-radius-calendar and --xc-shadow-calendar. These variables are independent of controlsStyle and all inner control/menu radii and elevations. Override them per instance, including in dark themes:
css
.booking-calendar .xc-calendar {
--xc-radius-calendar: 12px;
--xc-shadow-calendar: 0 4px 16px #00000018;
}Use 0px for square outer corners and none for no shadow. The default outer radius changed from 24px to 16px and now has a subtle shadow; set 24px and none respectively to restore the earlier outer appearance.
Month drag states
.xc-month .xc-event[draggable=true] uses a grab cursor. .xc-event[data-dragging=true] dims the source; .xc-day[data-drop-target=true] marks the destination with an inset accent outline and state-hover overlay. These states are temporary and removed on cancellation.
Timed raster cards
.xc-time-canvas anchors the 24-hour content; .xc-timed-events is the overlay, .xc-timed-column is a day column, .xc-timed-event a positioned event button and .xc-event-time its time label. Event color/radius tokens remain shared. Inline top/height express minute geometry; keep these intact when customizing appearance. All-day drag state selectors also apply to the weekly all-day header.
Weekly timed editing
.xc-timed-event[data-editable=true] uses a grab cursor. During preview, [data-editing=true] uses an accent outline and raised stacking order. .xc-resize-handle is the bottom mouse target; its ::after draws the grip. Keep that target usable when overriding styles. Position and height remain minute-driven inline geometry. Localized hover instructions explain dragging.
.xc-timed-column[data-drop-target=true] marks a timed event's destination day using the accent and hover tokens. Drag preview uses an inline horizontal transform; leave that transform to the interaction logic.
Week numbers
Enable with showWeekNumbers: true. Override .xc-week-number-heading and .xc-week-number for the month column, or --xc-week-number-width on .xc-month[data-week-numbers=true] (48px desktop, 32px mobile). Colors use existing --xc-muted, --xc-surface-container, and --xc-border. Week/Day suffixes share .xc-title; Agenda suffixes share .xc-agenda-date.
Timed month card appearance
Month cards with .xc-month .xc-event[data-event-kind=timed] have transparent background, --xc-on-surface text, and a --xc-border-width outline colored with --xc-accent. Consumers can override this selector. All-day filled cards and the Week/Day time-raster styles retain their existing appearance.
The Month column displays the localized label only in its heading (KW / Week); row cells contain numbers only. Its right divider uses --xc-border-width and --xc-border, separating it from adjacent-month day backgrounds.
Month drawing
.xc-month[data-draw-enabled=true] enables drawing. During a drag, .xc-day[data-draw-selected=true] marks selected dates; the preview bar surface/text use --xc-primary-container / --xc-on-primary-container and the inset outline uses --xc-accent. Override .xc-draw-preview to customize the temporary preview; selected date cells no longer receive a highlight. The preview is not a stored event.
Connected month bars
.xc-month-event is a 24px-high event segment spanning consecutive dates in one week. It retains .xc-event and kind styling. The rendered layout sets --xc-event-span and --xc-event-lane; these are internal positioning values. data-continues-before/after remove rounded ends at week boundaries. .xc-draw-preview styles the non-interactive draft with opacity and a dashed outline. The localized preview label is configurable via messages.newEvent. See bar layout for the current DOM contract.
Weekly creation preview
.xc-time-draw-preview is a non-interactive temporary timed card, using the existing event colors, reduced opacity and a dashed --xc-accent outline. It contains localized time boundaries and messages.newEvent.
Weekly all-day drawing
.xc-time-view-all-day[data-draw-enabled=true] reserves bottom space for a connected .xc-draw-preview bar. Its appearance shares event colors and the dashed accent outline. Existing event cards remain interactive above that space.
Weekly connected all-day cards live under .xc-time-view-all-day[data-connected=true]. They share .xc-month-event (the existing segment class) and its event/continuation styling. Row heights use the internal --xc-event-lanes positioning value. The preview retains .xc-draw-preview. Consumers querying events per date should use the data-segment-start/end interval because one bar now spans multiple cells.
The date-picker trigger icon uses 18px via .xc-date-trigger .xc-icon. Override that selector to customize its size independently of other icons.
Resource timeline
The separate Timeline uses xc-calendar for the same theme/control roles plus xc-timeline for its own layout. Import @xsigns/chronosketch/timeline/styles.css after @xsigns/chronosketch/styles.css. --xc-timeline-sidebar (px) controls the sticky resource width, default 240px, 150px on narrow screens. Resource rows have a 60px minimum and grow with overlapping event lanes; group rows remain 40px. Virtualization uses cumulative offsets. Timeline-specific classes and overlap limits are documented in its feature guide.
The timeline's tinted header and group separators use --xc-timeline-section-border (default #c5ccda) for stronger contrast on light surfaces. It affects the header bottom, time-tick/sidebar dividers and group borders, leaving resource-row/grid borders on --xc-border. For dark themes, set --xc-timeline-section-border: var(--xc-border), as the demo does.
Explicit component dimensions
Calendar and Timeline accept width/height and min/max constraints through options and setSize. See Component sizing. Theme variables continue to control colors, radii and shadows independently of component size.
Timeline overview header
The optional visual overview uses xc-timeline-heading (sticky wrapper), xc-timeline-periods (32px row), xc-timeline-period (one date section), xc-timeline-period-label (horizontal sticky text) and xc-timeline-period-corner (blank sticky resource-column corner). Colors use the existing surface-container, on-surface and timeline-section-border tokens. Header heights participate in virtualization geometry; override colors/borders/fonts, not the fixed row heights. See visual overview.
The Week/Day separator below the toolbar belongs to .xc-time-view and uses --xc-border-width and --xc-border. It spans the time-axis corner and scrollbar gutter; .xc-period-heading does not add a second top border.
In Week and Day, .xc-time-view-header owns the full-width bottom border below all-day events, including the time-axis corner and scrollbar gutter. The first hour row omits its top border to avoid a double separator at midnight.
Day omits the repeated date-heading row and the all-day cell's right border. Its all-day area starts directly below the toolbar separator.
Event presentation
Event presentation is the public configuration API. CSS hooks: xc-event-content, xc-event-title, xc-event-person, xc-event-resource, xc-event-detail and xc-event-status. Status uses data-strikethrough on the event. Per-card palette variables are --xc-event-light-background/text/accent and --xc-event-dark-background/text/accent. The root data-event-theme selects light, dark or system. Timed left/width values belong to overlap geometry; avoid overriding them. Content templates remain inside the event button.
Timeline group icons
.xc-timeline-group-icon styles optional decorative SVGs beside group titles. They use currentColor and an 18px fixed flex box; titles truncate with ellipsis and expose their full text through title. Keep group row heights unchanged.
The resource column uses .xc-timeline-resource-title for truncating text and .xc-timeline-toggle-all for its background-free, borderless group icon control (36px hit area). Keep the latter focusable and its accessible name intact when styling.
Timeline zoom and loading coverage
.xc-timeline-zoom, .xc-timeline-zoom-caption, .xc-timeline-zoom-value and .xc-timeline-zoom-slider style the labeled native range input. Track/thumb use existing border/accent tokens; preserve keyboard focus and accessible value text. .xc-timeline-loading-band uses a non-interactive hatch for unknown coverage, not resource unavailability. Its position/width belongs to time geometry.
.xc-timeline-zoom[hidden] removes the slider from layout and keyboard navigation when showZoom is false. Preserve this rule in consumer overrides.
Decorative event media: .xc-event-media is a fixed 16px wrapper, .xc-event-image uses cover and circular clipping; [data-variant="logo"] uses contain. Gantt .xc-timeline-entry-title truncates beside the media. These shared hooks apply to Calendar and Gantt.
Task Gantt
Import shared @xsigns/chronosketch/styles.css and @xsigns/chronosketch/task-gantt/styles.css. TaskGantt shares xc-timeline-* axis, viewport, header and zoom hooks, which retain their existing resource Timeline names. The package ships their shared CSS internally; consumers need no new shared-axis import. Existing Timeline CSS imports remain compatible.
Task hooks: .xc-task-gantt, .xc-task-row, .xc-task-label, .xc-task-name, .xc-task-toggle, .xc-task-add-child, .xc-task-bar, .xc-task-bar-body, .xc-task-progress, .xc-task-handle, [data-kind="summary"], [data-kind="milestone"] and .xc-task-dependencies. --xc-task-color customizes bar color and accepts per-task presentation colors. Shared event media hooks apply to task bars. Preserve row/header dimensions, bar geometry, milestone transforms and handle hit areas; these participate in scrolling, virtualization and pointer mapping. Dependency SVGs are decorative. Demo dialog styles are not a package contract.
Task progress editing adds .xc-task-progress-slider (native range input) and .xc-task-progress-value (transient visual percentage). Preserve native keyboard focus and the centered grip. Only the thumb receives pointer events, keeping the remaining bar available for date movement and resizing. The existing .xc-task-progress remains the fill layer.
The progress range extends by half the 10px thumb width on each side, so the thumb center follows the fill boundary exactly across 0–100%, including zoom.
.xc-task-summary-progress displays the aggregate percentage, pinned inside the visible part of long summary bars. Progress grips are hidden until bar hover or slider focus, and remain visible on devices without hover support.
TaskGantt optional ordering uses .xc-task-order-grip (hover/focus, always visible on touch) and .xc-task-row[data-order-drop=before|after] .xc-task-label for the insertion line. Colors inherit the shared theme; grips have no filled background.
During task ordering, .xc-task-order-preview is the floating cell; [data-allowed=false] marks invalid placement and .xc-task-order-blocked contains the localized prohibited badge. .xc-task-label[data-order-source] dims the source. The preview is non-interactive and inherits the component's theme in the top layer.
Task order previews animate row transforms and connection geometry together for 160 ms. The system prefers-reduced-motion: reduce setting disables interpolation.
Resource Timeline has no drag/resize grip or editing-state CSS hooks. Calendar and TaskGantt retain their separate editing styles. Day all-day cells omit .xc-date. Their empty message uses .xc-empty.xc-all-day-empty, with compact padding, left alignment and --xc-muted. Override messages.emptyAllDay for the text.
Resource Timeline and TaskGantt expose data-height-mode="fill|content" on their roots. Their canvas grid ends at the final actual row; unused viewport space uses the inherited surface. Configure heights through heightMode and size options rather than changing geometry variables.
Horizontal time scrollbar
Web Gantt and Task Manager render .xc-timeline-scrollbar when their time range overflows. .xc-timeline-scrollbar-thumb is the draggable grip. The default 7px grip uses theme-derived dark/light neutral colors inside a 24px hit area. Native scrolling remains available. Chromium/WebKit suppress the duplicate horizontal platform bar and retain a styled vertical scrollbar; browsers without per-axis scrollbar styling may also show their platform bar.
Override these on the component or an ancestor:
| Variable | Default / purpose |
|---|---|
--xc-scrollbar-size | 7px, visible grip/track height |
--xc-scrollbar-hit-size | 24px, control height, clamped to at least 24px |
--xc-scrollbar-thumb | Theme-derived neutral grip color |
--xc-scrollbar-thumb-active | --xc-on-surface, hover/focus color |
--xc-scrollbar-track | Subtle theme-derived track color |
Keep grip/surface contrast sufficient when overriding colors. Keyboard focus uses --xc-accent; forced colors use system colors. The heading top separator uses --xc-timeline-section-border without adding to header height.
Resources styles and card-stack hooks: Resources styling.
Resources count badges: .xc-resource-heading contains the wrapping .xc-resource-name; optional .xc-resource-count occupies its own lower row. The count uses --xc-accent and stays inset within the card; enable with showRemainingCount.
The outer .xc-resources-sidebar also uses --xc-shadow-calendar, with the same default subtle shadow as Calendar. Set it on the Resources container or sidebar to configure its elevation (none disables it). The demo's subtle/ strong/off shadow setting applies to both outer panels.
Availability Picker
Import @xsigns/chronosketch/availability/styles.css. .xc-availability-picker uses shared .xc-calendar color roles. --xc-availability-picker-free controls the free-day background; --xc-availability-picker-columns is set from layout configuration. Public hooks: .xc-availability-picker-months, .xc-availability-picker-month, .xc-availability-picker-grid, .xc-availability-picker-day, .xc-availability-picker-number, .xc-availability-picker-content, .xc-availability-picker-badge, .xc-availability-picker-detail and .xc-availability-picker-status. Day attributes expose data-date, data-available (true/false/unknown), data-selected, data-boundary (start/end/empty), data-anchor, data-restricted, data-annotation (application tag), optional data-gap, and data-preview. Keep focus, selection and rejection states perceivable when overriding styles. Annotations can be styled with scoped [data-annotation="offer"] selectors.
Availability selection and range boundaries take precedence over the available-day fill, including when the application overrides the palette for dark appearance.
The Availability Picker root has data-day-style="squared" (default) or "rounded". Available-day fill is painted in the day button's ::before pseudo-element; the button retains its full hit area. Selection and active preview suppress that fill. Restriction strokes, annotation accents and bookable-gap outlines use ::after with the same inset geometry and day shape; they do not span the full button. Annotations remain logical ranges, rendered as compact per-day accents. Custom day styling should preserve this distinction and the month's column widths.
Availability day badges use .xc-availability-picker-badge-anchor for the inset surface anchor and .xc-availability-picker-badge for the top-right marker. The badge has data-content="dot|icon|number", a fixed 16px diameter for all content variants, and small intentional overflow. dayBadge supplies background and foreground colors; CSS may override geometry. Preserve pointer transparency, the readable day number and the full day hit area. The .xc-availability-picker-label inline annotation label is no longer rendered; use badge content for icons/counts and tooltip hooks for longer explanations. Period annotation accents remain separate.
indicatorColor sets --xc-availability-picker-indicator on the picker root (default var(--xc-accent)). Annotation accents and available-day restriction strokes use it. Bookable-gap outlines use --xc-border for contrast; unavailable restriction strokes retain --xc-muted. Badge colors remain independent.
Days with a badge carry data-badge="true"; their annotation ::after shadow is suppressed. Gap outlines and restriction strokes are retained.
Badge sizing refinement: dot, icon and number share a fixed 16px/pt circle. No border, outline or outline-like shadow is drawn. Numeric content uses 7px/pt text so 99+ fits without changing badge dimensions.
For data-day-style="squared", start/end selection boundaries use a 4px outer corner radius; rounded mode retains 24px outer corners. Inner edges remain square.
The picker uses one shared outer card. --xc-availability-picker-columns now lives on its root and bounds the entire card at 360px per column. Month headings use --xc-surface-container; 1px month separators use --xc-border; incomplete rows retain the surface color. Header/footer align with the month panels. Empty detail live regions reserve no extra vertical space. All classes remain overridable.
Unavailable days use one thin, closed contour in the muted/secondary foreground color, matching the 36px/pt day shape. It replaces the restriction underline for these days, rather than adding a second border. The strikethrough remains; showUnavailable controls both marks. Available-day indicators are unchanged.
The shared .xc-availability-picker-detail hint card now lives in the sticky .xc-availability-picker-footer[data-hints=true], rather than each month. --xc-availability-picker-hint-height controls reserved height (default 4.5rem); long content scrolls internally. The leading 3px indicator uses the configured indicator color, and the card uses surface-container/on-surface theme roles. showHints: false removes the card and its reserved space.
Month cards follow dayStyle: rounded uses 12px/pt corners and 12px/pt gaps between islands; squared keeps adjoining rectangular cards. Each card has a complete border. Card heights stretch to the tallest month only in their own responsive grid row, so a six-week row does not add a sixth week to other rows. Day rows retain their spacing; shorter months receive trailing blank space. This supersedes the previous shared separator-only month framing.