@ecopages/radiant-ui 0.1.0-rc.7 → 0.1.0

package/README.md

@@ -28,22 +28,30 @@ pnpm run storybook
 
 Open the URL Storybook prints (default port `6006`).
 
+### Checking layout and styles
+
+- **Automated (CI-friendly):** `pnpm run test:storybook` runs each story’s `play` function in a real browser (Vitest + Playwright). Layout helpers live in `.storybook/layout-assertions.ts` (overflow, `--text-control-input` font size, popover viewport bounds) — see `Components/DateRangePicker` → **NarrowLayout**. Input typography uses the `--text-control-input` token in `tokens/typography/default.css` (16px below `640px`, `--text-control` at `sm` and up).
+- **Manual:** run `pnpm run storybook` and use the browser’s responsive mode or resize the preview; no third-party visual service required.
+- **Pixel snapshots (optional):** Vitest browser mode supports Playwright `toHaveScreenshot()` with baselines committed in the repo if you want image diffs without Chromatic.
+
 Useful scripts:
 
 ```bash
 pnpm run test            # Vitest (storybook + unit browser projects)
 pnpm run test:storybook  # Story interaction/render tests (CI)
-pnpm run test:ssr:smoke  # Local SSR smoke (6 stories × client/ssr-static/ssr-hydrate)
-pnpm run test:ssr        # Full Components/* SSR matrix (nightly)
+pnpm run test:ssr:smoke  # SSR smoke (6 stories × client/ssr-static/ssr-hydrate; runs on PRs)
+pnpm run test:ssr        # Full Components/* SSR matrix (run on demand)
 pnpm run typecheck
 pnpm run lint
 pnpm run build:lib       # generate exports + build JS/types + compile CSS
 ```
 
-`test:storybook` runs stories through the Vitest addon (no Storybook dev server). `test:ssr:smoke` and `test:ssr` spawn Storybook, visit stories in Playwright, and fail on `.radiant-ssr-error` banners or disallowed page errors. Empty mounts fail only for stories listed in `scripts/storybook-ssr-harness.ts` (`expectsMount` / `allowEmptyMount`).
+`test:storybook` runs stories through the Vitest addon (no Storybook dev server). `test:ssr:smoke` and `test:ssr` spawn Storybook, visit stories in Playwright, and fail on `.radiant-ssr-error` banners or disallowed page errors. For stories expected to mount, the harness waits briefly for content or an SSR error banner before checking the result. Empty mounts fail only for stories listed in `scripts/storybook-ssr-harness.ts` (`expectsMount` / `allowEmptyMount`).
 
 Published CSS under `dist/` is **already compiled** (Tailwind `@apply` resolved). Theme and token values remain CSS custom properties so apps can swap themes at runtime. The package does not minify CSS.
 
+Component entries register their nested custom elements as well as their own host. The package's `sideEffects` list preserves source `*.script.ts` / `*.script.tsx` registration modules during the library build and built `index.js` entries during consumer bundling. Removing those source side effects can leave nested Derived Trees as empty tags during SSR. `build:lib` runs `test:package` against isolated imports of the built date compositions and sidebar trigger to verify registration and server-rendered markup.
+
 ## Using radiant-ui
 
 ```ts

package/dist/components/ui/alert/alert.d.ts

@@ -30,12 +30,10 @@ export type RuiAlertDescriptionProps = JsxElementProps<HTMLDivElement>;
 export declare function RuiAlertDescription({ children, class: className, ...props }: RuiAlertDescriptionProps): import("@ecopages/jsx").JsxRenderable;
 export type RuiAlertComponentProps = JsxElementProps<HTMLDivElement> & RuiAlertProps;
 /**
- * Status alert with optional dismiss control.
+ * Status alert with optional dismiss control. Stamps `<rui-alert>` and the inner
+ * `role="alert"` surface; appends `[data-alert-close]` when `dismissible`.
  *
  * @remarks
- * Importable JSX helper around `<rui-alert>`. Owns the `role="alert"` surface and
- * BEM classes; the host owns dismiss (`rui-close` / `dismiss()`).
- *
  * Variant tones map to semantic theme roles (`info`, `success`, `warning`, `error`)
  * via `.rui-alert--*` — not palette steps. See `alert.css` and DESIGN.md status roles.
  *

package/dist/components/ui/alert/alert.script.d.ts

@@ -23,16 +23,25 @@ export type RuiAlertCloseDetail = {
     reason: 'dismiss';
 };
 /**
- * `<rui-alert>` — a brief, important message that attracts attention
- * without interrupting the user's task.
+ * `<rui-alert>` — status message host with optional dismiss.
  *
- * Compose with the `RuiAlert` view (surface + optional dismiss control) and
- * `RuiAlertIcon` / `RuiAlertTitle` / `RuiAlertDescription` as needed.
+ * The custom element is a behavior host: it does not render the composed tree.
+ * Import the script and place light-DOM children that match the contract below,
+ * or use the `RuiAlert` view helpers which stamp the same targets.
  *
  * Prefer injecting or revealing alerts at the moment they become relevant;
  * static copy that is always present should not use `role="alert"`.
  *
- * @summary Status message host; optional dismiss removes the element.
+ * ## Light-DOM contract
+ *
+ * Optional:
+ * - `[data-alert-close]` — dismiss control. Click calls `dismiss()` when `dismissible` is set.
+ *
+ * The host does not query alert content or the `role="alert"` surface. Authors own
+ * that markup (or use `RuiAlert`, which stamps it). Do not rely on BEM class names
+ * for behavior.
+ *
+ * Nested hosts: none.
  *
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/alert/
  *
@@ -40,22 +49,23 @@ export type RuiAlertCloseDetail = {
  *
  * @attr {('info'|'success'|'warning'|'error')} variant - Visual tone. Default: `info`.
  * @attr {('inline'|'banner')} layout - Layout mode. Default: `inline`.
- * @attr {boolean} dismissible - Show dismiss control (via the view). Default: `false`.
+ * @attr {boolean} dismissible - Show dismiss control. Default: `false`.
  * @attr {string} close-label - Accessible name for dismiss. Default: `Dismiss`.
  *
- * @slot - Alert content. Prefer the `RuiAlert` view so the `role="alert"` surface
- *   and BEM classes stay in sync with `variant` / `layout` / `dismissible`.
- *
  * @fires rui-close - Emitted when the alert is dismissed; then the host is removed.
  *
  * @remarks
- * Styling classes live on the JSX view helpers (`@cssclass`). This element owns
- * dismiss behavior — default `render()` is a passthrough slot so prop updates do
- * not rebuild the composed light-DOM surface.
+ * Minimum headless tree with dismiss:
+ *
+ * ```html
+ * <rui-alert dismissible close-label="Dismiss">
+ *   <div role="alert">Your session will expire soon.</div>
+ *   <button type="button" data-alert-close aria-label="Dismiss"></button>
+ * </rui-alert>
+ * ```
  *
- * **Why a custom element?** Dismiss emits `rui-close` and removes the host from
- * the DOM without re-projecting slot content. A presentational-only wrapper would
- * need equivalent lifecycle wiring; the CE keeps that behavior self-contained.
+ * BEM classes are presentation-only; see view `@cssclass`. Dismiss emits `rui-close`
+ * and removes the host without re-building the composed surface.
  */
 export declare class RuiAlert extends RadiantElement {
     variant: RuiAlertVariant;

package/dist/components/ui/autocomplete/autocomplete.css

@@ -15,11 +15,10 @@
     background-color: var(--color-background, var(--background));
     padding-inline: var(--spacing-control-x, var(--space-control-x));
     padding-block: var(--spacing-control-y, var(--space-control-y));
-    font-size: var(--text-sm, var(--text-sm));
-    line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
     color: var(--color-on-background, var(--on-background));
     --tw-outline-style: none;
     outline-style: none;
+    font-size: var(--text-control-input);
   }
   .rui-autocomplete__input:focus-visible {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);

package/dist/components/ui/autocomplete/autocomplete.d.ts

@@ -5,21 +5,26 @@ export type RuiAutocompleteInputProps = JsxElementProps<HTMLInputElement> & {
     placeholder?: string;
     disabled?: boolean;
 };
-/** Search field paired with `RuiAutocomplete` via `data-autocomplete-input`.
+/** Search field paired with `RuiAutocomplete`. Stamps `[data-autocomplete-input]`.
  *
  * @cssclass rui-autocomplete__input - Bordered search input.
  */
 export declare function RuiAutocompleteInput({ placeholder, class: className, disabled, ...props }: RuiAutocompleteInputProps): JsxRenderable;
 export type RuiAutocompleteCollectionProps = JsxElementProps<HTMLDivElement>;
-/** Wrapper around the filterable collection inside `RuiAutocomplete`.
+/** Wrapper around the filterable collection. Stamps `[data-autocomplete-collection]`.
  *
  * @cssclass rui-autocomplete__collection - Scrollable filterable region.
  */
 export declare function RuiAutocompleteCollection({ children, class: className, ...props }: RuiAutocompleteCollectionProps): JsxRenderable;
 export type RuiAutocompleteEmptyProps = JsxElementProps<HTMLDivElement>;
-/** Shown when filtering yields no visible items.
+/** No-results state. Stamps `[data-autocomplete-empty]`; host toggles `hidden`.
  *
  * @cssclass rui-autocomplete__empty - No-results state.
  */
 export declare function RuiAutocompleteEmpty({ children, class: className, ...props }: RuiAutocompleteEmptyProps): JsxRenderable;
+/**
+ * Filter host view. Wraps children in `[data-ref="root"]` (presentation only).
+ *
+ * @cssclass rui-autocomplete - Filter host root.
+ */
 export declare function RuiAutocomplete({ children, ...props }: JsxCustomElementAttributes<RuiAutocompleteElement, RuiAutocompleteProps>): JsxRenderable;

package/dist/components/ui/autocomplete/autocomplete.script.d.ts

@@ -9,9 +9,32 @@ export type RuiAutocompleteProps = {
 /**
  * `<rui-autocomplete>` — filters a composed collection from a text input.
  *
- * Wrap a search field (`data-autocomplete-input`) and a collection
- * (`data-autocomplete-collection` or default slot) containing `[role="option"]`,
- * `[role="menuitem"]`, or `[data-tag]` items.
+ * The custom element is a behavior host: it does not render filter markup.
+ * Import the script and place light-DOM children that match the contract below,
+ * or use `RuiAutocomplete` and its helpers, which stamp the same targets.
+ *
+ * ## Light-DOM contract
+ *
+ * Required (one of):
+ * - `[data-autocomplete-input]` — search field inside this host. Host listens for `input`.
+ * - External `[data-autocomplete-input]` on an ancestor `rui-combobox` or `rui-select`
+ *   when this host does not contain the input.
+ *
+ * Collection (one of):
+ * - `[data-autocomplete-collection]` — wrapper around filterable items.
+ * - The host element itself — when no collection wrapper is provided.
+ *
+ * Per item inside the collection:
+ * - `[role="option"]`, `[role="menuitem"]`, or `[data-tag]` — filterable rows. Host
+ *   toggles `hidden` based on the query. Text match uses `data-label` or trimmed
+ *   `textContent`.
+ *
+ * Optional:
+ * - `[data-autocomplete-empty]` — no-results state. Host toggles `hidden` when matches exist.
+ * - `[data-label]` on items — filter text; falls back to trimmed `textContent`.
+ *
+ * Nested hosts: filterable items are often `rui-listbox` options or `rui-tag` chips;
+ * this host only queries the role / data-tag selectors above, not listbox internals.
  *
  * @remarks When nested in `rui-combobox`, the combobox input acts as the filter
  * field. `rui-select` uses a dedicated search input inside the popup instead.
@@ -23,7 +46,9 @@ export type RuiAutocompleteProps = {
  * @attr {string} sensitivity - Filter sensitivity: `base` (case-insensitive contains), `case`, or `accent`. Default: `base`.
  * @attr {string} input-value - Controlled filter query; when unset, reads from the composed input. Default: `''`.
  *
- * @cssclass rui-autocomplete - Filter host.
+ * @remarks
+ * `[data-ref="root"]` on the view is presentation only; the host does not query it.
+ * BEM classes live on the view; the host never queries them.
  */
 export declare class RuiAutocomplete extends RadiantElement {
     sensitivity: TextFilterSensitivity;

package/dist/components/ui/avatar/avatar.css

@@ -2,33 +2,35 @@
 @layer properties;
 @layer components {
   .rui-avatar {
+    --rui-avatar-size: var(--space-10);
+    --rui-avatar-radius: var(--radius-pill);
+    --rui-avatar-surface: var(--surface-container);
     position: relative;
     display: inline-flex;
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
     overflow: hidden;
-    border-radius: var(--radius-pill, var(--radius-pill));
-    background-color: var(--color-surface-container, var(--surface-container));
     --tw-font-weight: var(--font-weight-medium, var(--weight-medium));
     font-weight: var(--font-weight-medium, var(--weight-medium));
     color: var(--color-on-surface, var(--on-surface));
+    inline-size: var(--rui-avatar-size);
+    block-size: var(--rui-avatar-size);
+    border-radius: var(--rui-avatar-radius);
+    background-color: var(--rui-avatar-surface);
   }
   .rui-avatar--sm {
-    width: var(--spacing-8, var(--space-8));
-    height: var(--spacing-8, var(--space-8));
+    --rui-avatar-size: var(--space-8);
     font-size: var(--text-xs, var(--text-xs));
     line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
   }
   .rui-avatar--md {
-    width: calc(var(--spacing, 0.25rem) * 10);
-    height: calc(var(--spacing, 0.25rem) * 10);
+    --rui-avatar-size: var(--space-10);
     font-size: var(--text-sm, var(--text-sm));
     line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
   }
   .rui-avatar--lg {
-    width: calc(var(--spacing, 0.25rem) * 12);
-    height: calc(var(--spacing, 0.25rem) * 12);
+    --rui-avatar-size: var(--space-12);
     font-size: var(--text-body, var(--text-body));
   }
   .rui-avatar__image {

package/dist/components/ui/avatar/avatar.d.ts

@@ -15,7 +15,9 @@ export type RuiAvatarProps = JsxElementProps<HTMLSpanElement> & {
  * @remarks When `src` is omitted or fails to load, initials derived from `alt`
  * (or the explicit `fallback`) are shown in a `role="img"` span. There is no
  * runtime image-error listener — pass `fallback` for reliable SSR of the
- * fallback state.
+ * fallback state. Override `--rui-avatar-size`, `--rui-avatar-radius`, and
+ * `--rui-avatar-surface` on `.rui-avatar`. Size modifiers set `--rui-avatar-size`
+ * (`sm` `--space-8`, `md` `--space-10`, `lg` `--space-12`).
  *
  * @cssclass rui-avatar - Avatar root; `role="img"` when image-less.
  * @cssclass rui-avatar--sm - Small size.

package/dist/components/ui/breadcrumb/breadcrumb.d.ts

@@ -3,23 +3,23 @@ import type { RuiBreadcrumb as RuiBreadcrumbElement, RuiBreadcrumbProps } from '
 import './breadcrumb.script';
 export type RuiBreadcrumbViewProps = JsxCustomElementAttributes<RuiBreadcrumbElement, RuiBreadcrumbProps>;
 /**
- * Landmark wrapper for a breadcrumb trail. Set `separator` once here (e.g. `/`
- * or `>`); empty `RuiBreadcrumbSeparator` nodes pick it up via CSS — no context.
- * Pass children into a separator to override for that instance.
+ * Landmark wrapper for a breadcrumb trail. Stamps `<nav class="rui-breadcrumb">`.
  *
  * @cssclass rui-breadcrumb - `<nav>` landmark root.
+ *
+ * @remarks `separator` sets `--rui-breadcrumb-separator` for empty separators.
  */
 export declare function RuiBreadcrumb({ children, label, separator, ...props }: RuiBreadcrumbViewProps): import("@ecopages/jsx").JsxRenderable;
 export type RuiBreadcrumbListProps = JsxElementProps<HTMLOListElement>;
 /**
- * Ordered list of breadcrumb items and separators.
+ * Ordered list of breadcrumb items and separators. Stamps `<ol class="rui-breadcrumb__list">`.
  *
  * @cssclass rui-breadcrumb__list - Ordered list row.
  */
 export declare function RuiBreadcrumbList({ children, class: className, ...props }: RuiBreadcrumbListProps): import("@ecopages/jsx").JsxRenderable;
 export type RuiBreadcrumbItemProps = JsxElementProps<HTMLLIElement>;
 /**
- * Single crumb (`<li>`).
+ * Single crumb list item. Stamps `<li class="rui-breadcrumb__item">`.
  *
  * @cssclass rui-breadcrumb__item - List item wrapping a crumb link/page.
  */
@@ -28,25 +28,25 @@ export type RuiBreadcrumbLinkProps = JsxElementProps<HTMLAnchorElement> & {
     href: string;
 };
 /**
- * Linked ancestor page.
+ * Linked ancestor page. Stamps `<a class="rui-breadcrumb__link">`.
  *
  * @cssclass rui-breadcrumb__link - Crumb link.
  */
 export declare function RuiBreadcrumbLink({ children, href, class: className, ...props }: RuiBreadcrumbLinkProps): import("@ecopages/jsx").JsxRenderable;
 export type RuiBreadcrumbPageProps = JsxElementProps<HTMLSpanElement>;
 /**
- * Current page (non-link).
+ * Current page (non-link). Stamps `<span class="rui-breadcrumb__page" aria-current="page">`.
  *
  * @cssclass rui-breadcrumb__page - Current page span (`aria-current="page"`).
  */
 export declare function RuiBreadcrumbPage({ children, class: className, ...props }: RuiBreadcrumbPageProps): import("@ecopages/jsx").JsxRenderable;
 export type RuiBreadcrumbSeparatorProps = JsxElementProps<HTMLLIElement>;
 /**
- * Visual separator between crumbs. Renders as a presentational list item.
- * With no children, uses the glyph from `RuiBreadcrumb`’s `separator` prop
- * (CSS custom property). With children, those replace the default glyph.
+ * Visual separator between crumbs. Stamps presentational `<li class="rui-breadcrumb__separator">`.
  *
  * @cssclass rui-breadcrumb__separator - Presentational separator (`aria-hidden`).
+ *
+ * @remarks With no children, uses the glyph from `RuiBreadcrumb`'s `separator` prop.
  */
 export declare function RuiBreadcrumbSeparator({ children, class: className, ...props }: RuiBreadcrumbSeparatorProps): import("@ecopages/jsx").JsxRenderable;
 export type RuiBreadcrumbEllipsisProps = JsxElementProps<HTMLSpanElement> & {
@@ -54,7 +54,7 @@ export type RuiBreadcrumbEllipsisProps = JsxElementProps<HTMLSpanElement> & {
     label?: string;
 };
 /**
- * Collapsed middle segment indicator.
+ * Collapsed middle segment indicator. Stamps `<span class="rui-breadcrumb__ellipsis">`.
  *
  * @cssclass rui-breadcrumb__ellipsis - Collapsed segment indicator (`aria-hidden`).
  * @cssclass rui-breadcrumb__ellipsis-label - Screen-reader label for the collapsed segment.

package/dist/components/ui/breadcrumb/breadcrumb.script.d.ts

@@ -10,20 +10,20 @@ export type RuiBreadcrumbProps = {
     separator?: string;
 };
 /**
- * `<rui-breadcrumb>` — a trail of links to ancestor pages in hierarchical order.
+ * `<rui-breadcrumb>` — navigation landmark for a hierarchical page trail.
  *
- * Implements the WAI-ARIA APG Breadcrumb pattern: a `<nav>` landmark containing
- * an ordered list of links, with `aria-current="page"` on the current page item.
- *
- * Compose with the JSX helpers (`RuiBreadcrumbList`, `RuiBreadcrumbItem`,
- * `RuiBreadcrumbLink`, `RuiBreadcrumbPage`, `RuiBreadcrumbSeparator`,
- * `RuiBreadcrumbEllipsis`).
+ * The custom element holds `label` and `separator` props; it does not query
+ * authored children. Use `RuiBreadcrumb` and the breadcrumb helpers, which stamp
+ * the `<nav>` landmark and list structure.
  *
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/
- *
- * Keyboard interaction: standard link navigation (`Tab`, `Enter`).
- *
  * @element rui-breadcrumb
+ * @attr {string} label - Accessible name for the navigation landmark. Default: `Breadcrumb`.
+ * @attr {string} separator - Glyph for empty `RuiBreadcrumbSeparator` nodes (CSS custom property). Default: `/`.
+ *
+ * @remarks
+ * No light-DOM query contract — keyboard interaction is standard link navigation.
+ * BEM classes live on the view helpers.
  */
 export declare class RuiBreadcrumb extends RadiantElement {
     label: string;

package/dist/components/ui/calendar/calendar.css

@@ -5,6 +5,7 @@ rui-calendar {
 }
 @layer components {
   .rui-calendar {
+    max-width: 100%;
     border-radius: var(--radius-container, var(--radius-container));
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -32,15 +33,15 @@ rui-calendar {
     }
   }
   .rui-calendar__month-panel {
-    width: calc(var(--spacing, 0.25rem) * 64);
     flex-shrink: 0;
+    width: min(var(--rui-calendar-month-width, 16rem), calc(100vw - 1rem));
   }
   .rui-calendar__header {
     margin-bottom: var(--spacing-2, var(--space-2));
-    display: flex;
+    display: grid;
+    grid-template-columns: 2rem 1fr 2rem;
     align-items: center;
-    justify-content: space-between;
-    gap: var(--spacing-inline, var(--space-inline));
+    gap: 0px;
   }
   .rui-calendar__nav-spacer {
     display: inline-flex;
@@ -49,7 +50,11 @@ rui-calendar {
     flex-shrink: 0;
   }
   .rui-calendar__month {
-    flex: 1;
+    min-width: 0px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding-inline: var(--spacing-1, var(--space-1));
     text-align: center;
     --tw-font-weight: var(--font-weight-medium, var(--weight-medium));
     font-weight: var(--font-weight-medium, var(--weight-medium));

package/dist/components/ui/calendar/calendar.script.d.ts

@@ -30,15 +30,34 @@ type MonthPanel = {
 /**
  * `<rui-calendar>` — locale-aware month grid(s) for picking dates.
  *
+ * Derived Tree: the host `render()` paints the month grid. Authored children are
+ * not the inner calendar. Parent hosts (`rui-date-field`, `rui-date-range-picker`)
+ * embed `<rui-calendar>` and query day targets when opening the popup.
+ *
  * Supports single, multiple, and range selection. Value format:
  * - single: `YYYY-MM-DD`
  * - multiple: comma-separated ISO dates
  * - range: `YYYY-MM-DD/YYYY-MM-DD`
  *
- * @see https://react-aria.adobe.com/Calendar
+ * ## Light-DOM contract
  *
- * @element rui-calendar
+ * Generated by `render()` (do not author manually):
+ * - `[data-ref="root"]` — application root. Host sets `role="application"`,
+ *   `aria-label`, and `aria-multiselectable` when `selection-mode="multiple"`.
+ * - `[data-calendar-prev-month]` / `[data-calendar-next-month]` — paging controls.
+ * - `[data-calendar-grid]` — month grid (`role="grid"`).
+ * - `[data-calendar-day]` — day buttons. Host sets `data-iso`, roving `tabIndex`,
+ *   `aria-selected`, `aria-current`, `disabled`, and range `data-range-*` attrs.
+ * - `[data-calendar-today]` — jump to today.
+ *
+ * Parent-queried on nested calendars:
+ * - `[data-calendar-day][data-iso="…"]` — focus target when a date-field popup opens.
+ * - `[data-calendar-day][tabindex="0"]` — roving focus fallback.
+ *
+ * Nested hosts: none.
  *
+ * @see https://react-aria.adobe.com/Calendar
+ * @element rui-calendar
  * @attr {string} value - Selected date(s) in the mode-specific ISO format. Default: `''`.
  * @attr {string} min - Earliest selectable ISO date. Default: `''`.
  * @attr {string} max - Latest selectable ISO date. Default: `''`.
@@ -47,29 +66,12 @@ type MonthPanel = {
  * @attr {('single'|'multiple'|'range')} selection-mode - Selection mode. Default: `single`.
  * @attr {number} visible-months - Month grids shown side by side. Default: `1`.
  * @attr {('visible'|'single')} page-behavior - Whether paging moves by all visible months or one month. Default: `visible`.
- *
  * @fires rui-change - Emitted when the selection changes; detail carries `value`, plus `start` / `end` for ranges.
  *
- * @cssclass rui-calendar - Root surface (`role="application"`).
- * @cssclass rui-calendar--multi - Multi-month root modifier.
- * @cssclass rui-calendar__months - Row of month panels.
- * @cssclass rui-calendar__month-panel - Single month grid column.
- * @cssclass rui-calendar__header - Month title row with paging controls.
- * @cssclass rui-calendar__nav - Prev / next month button.
- * @cssclass rui-calendar__nav-spacer - Placeholder where a nav button is absent.
- * @cssclass rui-calendar__month - Month title.
- * @cssclass rui-calendar__weekdays - Weekday header row.
- * @cssclass rui-calendar__weekday - Weekday label.
- * @cssclass rui-calendar__grid - Month grid (`role="grid"`).
- * @cssclass rui-calendar__week - Grid row.
- * @cssclass rui-calendar__day - Day cell button (`role="gridcell"`).
- * @cssclass rui-calendar__footer - Footer row with the today button.
- * @cssclass rui-calendar__today - "Today" jump button.
- *
  * @remarks
  * Arrow keys move the focused day, PageUp / PageDown page the months (Shift
- * adds ±12), and Enter / Space select the focused day. Disabled or out-of-range
- * days are skipped while navigating.
+ * adds ±12), and Enter / Space select the focused day. BEM classes are
+ * presentation-only; behavior keys off the `data-calendar-*` targets above.
  */
 export declare class RuiCalendar extends RadiantElement {
     value: string;
@@ -112,6 +114,7 @@ export declare class RuiCalendar extends RadiantElement {
     private previewRange;
     private clearRangePreview;
     private initialize;
+    constructor();
     protected onConnected(): void;
     onPropsUpdated(): void;
     onPrevMonth(event: Event): void;

package/dist/components/ui/calendar/index.js

@@ -1,2 +1,2 @@
-import{jsx as p,jsxs as ge}from"@ecopages/jsx/jsx-runtime";import{RadiantElement as ft,customElement as Rt,event as St,onEvent as F,onUpdated as At,prop as S,state as A}from"@ecopages/radiant";function Se(t){if(!t)return;let e=t.split(",").map(n=>n.trim()).filter(Boolean);return e.length>1?e:e[0]}function q(t){if(t==null)return null;let e=/^(\d{4})-(\d{2})-(\d{2})$/.exec(t.trim());if(!e)return null;let n=Number(e[1]),r=Number(e[2])-1,a=Number(e[3]),i=new Date(n,r,a);return i.getFullYear()!==n||i.getMonth()!==r||i.getDate()!==a?null:i}function L(t){let e=t.getFullYear(),n=String(t.getMonth()+1).padStart(2,"0"),r=String(t.getDate()).padStart(2,"0");return`${e}-${n}-${r}`}function ne(t,e,n){return!(e&&t<e||n&&t>n)}function T(t,e){return t.localeCompare(e)}function O(t,e){return T(t,e)<=0?{start:t,end:e}:{start:e,end:t}}function C(t){if(!t)return null;let[e,n]=t.split("/");return!e||!n?null:O(e,n)}function re(t){if(!t)return"";let e=O(t.start,t.end);return`${e.start}/${e.end}`}function G(t){return t?t.split(",").map(e=>e.trim()).filter(Boolean).sort(T):[]}function ae(t){return[...new Set(t)].sort(T).join(",")}function ie(t,e){let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),[...n].sort(T)}function Ae(t,e){let n=O(e.start,e.end);return T(t,n.start)>=0&&T(t,n.end)<=0}function oe(t,e,n){if(e==="single"){let f=n.singleIso===t;return{isSelected:f,isRangeStart:f,isRangeEnd:f,isRangeMiddle:!1}}if(e==="multiple"){let f=n.multipleIsos?.includes(t)??!1;return{isSelected:f,isRangeStart:f,isRangeEnd:f,isRangeMiddle:!1}}let r=n.range;if(!r)return{isSelected:!1,isRangeStart:!1,isRangeEnd:!1,isRangeMiddle:!1};let a=O(r.start,r.end),i=Ae(t,a),o=t===a.start,c=t===a.end;return{isSelected:i,isRangeStart:o,isRangeEnd:c,isRangeMiddle:i&&!o&&!c}}function se(t,e,n){return e.anchor?{committed:O(e.anchor,n),draft:{anchor:null,hover:null}}:{committed:t,draft:{anchor:n,hover:n}}}function J(t){let e=pt(t);try{let r=new Intl.Locale(e).weekInfo;if(r?.firstDay!=null)return r.firstDay===7?0:r.firstDay}catch{}return e.startsWith("en-US")?0:1}function pt(t){return Array.isArray(t)?t[0]??navigator.language:t??navigator.language}function vt(t){return new Date(t.getFullYear(),t.getMonth(),t.getDate())}function yt(t,e){return t.getFullYear()===e.getFullYear()&&t.getMonth()===e.getMonth()&&t.getDate()===e.getDate()}function bt(t){let e=t.selectionMode??"single",n=t.value??"";if(e==="multiple")return{mode:e,multipleIsos:G(n)};if(e==="range"){let r=C(n);if(t.rangeDraft?.anchor){let a=t.rangeDraft.hover??t.rangeDraft.anchor;return{mode:e,range:_t(t.rangeDraft.anchor,a)}}return{mode:e,range:r}}return{mode:e,singleIso:n||void 0}}function _t(t,e){return t.localeCompare(e)<=0?{start:t,end:e}:{start:e,end:t}}function le(t,e,n){let r=J(n.locale),a=vt(n.today??new Date),i=bt(n),c=(new Date(t,e,1).getDay()-r+7)%7,Y=new Date(t,e,1-c),f=[],g=new Date(Y);for(let k=0;k<6;k+=1){let D=[];for(let z=0;z<7;z+=1){let P=L(g),x=oe(P,i.mode,{singleIso:i.singleIso,multipleIsos:i.multipleIsos,range:i.range});D.push({date:new Date(g),iso:P,inMonth:g.getMonth()===e,isToday:yt(g,a),isSelected:x.isSelected,isDisabled:!ne(P,n.min,n.max),isRangeStart:x.isRangeStart,isRangeEnd:x.isRangeEnd,isRangeMiddle:x.isRangeMiddle}),g.setDate(g.getDate()+1)}if(f.push(D),k>=4&&g.getMonth()!==e&&g.getDate()>7)break}return f}function N(t,e,n){let r=new Date(t,e+n,1);return{year:r.getFullYear(),month:r.getMonth()}}function ce(t,e,n){let r=Math.max(1,Math.min(n,12));return Array.from({length:r},(a,i)=>{let o=N(t,e,i);return{year:o.year,month:o.month,offset:i}})}var ke=new Map;function Mt(t,e){return`${JSON.stringify(t??null)}|${JSON.stringify(e)}`}function ue(t,e){let n=Mt(t,e),r=ke.get(n);if(r)return r;let a=new Intl.DateTimeFormat(t,e);return ke.set(n,a),a}function de(t,e){return ue(e,{month:"long",year:"numeric"}).format(t)}function he(t,e){let n=ue(t,{weekday:"narrow"}),r=[];for(let a=0;a<7;a+=1){let i=(e+a)%7,o=new Date(2024,0,i===0?7:i);r.push(n.format(o))}return r}function fe(t){return new Intl.RelativeTimeFormat(t,{numeric:"auto"}).format(0,"day")}var Ee,Le,Te,Fe,Ye,Pe,Ve,Oe,Ce,Ge,ze,je,$e,Be,He,Ue,We,Ke,qe,Je,Ne,Qe,Xe,Ze,et,tt,nt,rt,at,it,ot,st,lt,ct,ut,dt;function wt(t,e,n,r,a,i){var o,c,Y,f,g,k,D,z=Symbol.metadata||Symbol.for("Symbol.metadata"),P=Object.defineProperty,x=Object.create,me=[x(null),x(null)],pe=e.length;function B(s,b,v){return function(l,u){b&&(u=l,l=t);for(var _=0;_<s.length;_++)u=s[_].apply(l,v?[u]:[]);return v?u:l}}function I(s,b,v,l){if(typeof s!="function"&&(l||s!==void 0))throw new TypeError(b+" must "+(v||"be")+" a function"+(l?"":" or undefined"));return s}function ve(s,b,v,l,u,_,E,y,M,w,be){function Q(h){if(!be(h))throw new TypeError("Attempted to access private element on non-instance")}var X=[].concat(b[0]),_e=b[3],Z=!E,j=u===1,Me=u===3,we=u===4,H=u===2;function U(h,V,Ie){return function(K,Re){return V&&(Re=K,K=s),Ie&&Ie(K),d[h].call(K,Re)}}if(!Z){var d={},ee=[],R=Me?"get":we||j?"set":"value";if(M?(w||j?d={get:ht(function(){return _e(this)},l,"get"),set:function(h){b[4](this,h)}}:d[R]=_e,w||ht(d[R],l,H?"":R)):w||(d=Object.getOwnPropertyDescriptor(s,l)),!w&&!M){if((c=me[+y][l])&&(c^u)!==7)throw Error("Decorating two elements with the same name ("+d[R].name+") is not supported yet");me[+y][l]=u<3?1:u}}for(var m=s,W=X.length-1;W>=0;W-=v?2:1){var De=I(X[W],"A decorator","be",!0),xe=v?X[W-1]:void 0,te={},$={kind:["field","accessor","method","getter","setter","class"][u],name:l,metadata:o,addInitializer:function(h,V){if(h.v)throw new TypeError("attempted to call addInitializer after decoration was finished");I(V,"An initializer","be",!0),_.push(V)}.bind(null,te)};if(Z)c=De.call(xe,m,$),te.v=1,I(c,"class decorators","return")&&(m=c);else if($.static=y,$.private=M,c=$.access={has:M?be.bind():function(h){return l in h}},we||(c.get=M?H?function(h){return Q(h),d.value}:U("get",0,Q):function(h){return h[l]}),H||Me||(c.set=M?U("set",0,Q):function(h,V){h[l]=V}),m=De.call(xe,j?{get:d.get,set:d.set}:d[R],$),te.v=1,j){if(typeof m=="object"&&m)(c=I(m.get,"accessor.get"))&&(d.get=c),(c=I(m.set,"accessor.set"))&&(d.set=c),(c=I(m.init,"accessor.init"))&&ee.unshift(c);else if(m!==void 0)throw new TypeError("accessor decorators must return an object with get, set, or init properties or undefined")}else I(m,(w?"field":"method")+" decorators","return")&&(w?ee.unshift(m):d[R]=m)}return u<2&&E.push(B(ee,y,1),B(_,y,0)),w||Z||(M?j?E.splice(-1,0,U("get",y),U("set",y)):E.push(H?d[R]:I.call.bind(d[R])):P(s,l,d)),m}function ye(s){return P(s,z,{configurable:!0,enumerable:!0,value:o})}return i!==void 0&&(o=i[z]),o=x(o??null),g=[],k=function(s){s&&g.push(B(s))},D=function(s,b){for(var v=0;v<n.length;v++){var l=n[v],u=l[1],_=7&u;if((8&u)==s&&!_==b){var E=l[2],y=!!l[3],M=16&u;ve(s?t:t.prototype,l,M,y?"#"+E:Dt(E),_,_<2?[]:s?f=f||[]:Y=Y||[],g,!!s,y,b,s&&y?function(w){return It(w)===t}:a)}}},D(8,0),D(0,0),D(8,1),D(0,1),k(Y),k(f),c=g,pe||ye(t),{e:c,get c(){var s=[];return pe&&[ye(t=ve(t,[e],r,t.name,5,s)),B(s,1)]}}}function Dt(t){var e=xt(t,"string");return typeof e=="symbol"?e:e+""}function xt(t,e){if(typeof t!="object"||!t)return t;var n=t[Symbol.toPrimitive];if(n!==void 0){var r=n.call(t,e||"default");if(typeof r!="object")return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return(e==="string"?String:Number)(t)}function ht(t,e,n){typeof e=="symbol"&&(e=(e=e.description)?"["+e+"]":"");try{Object.defineProperty(t,"name",{configurable:!0,value:n?n+" "+e:e})}catch{}return t}function It(t){if(Object(t)!==t)throw TypeError("right-hand side of 'in' should be an object, got "+(t!==null?typeof t:"null"));return t}var mt,gt=class extends ft{static{({e:[Te,Fe,Ye,Pe,Ve,Oe,Ce,Ge,ze,je,$e,Be,He,Ue,We,Ke,qe,Je,Ne,Qe,Xe,Ze,et,tt,nt,rt,at,it,ot,st,lt,ct,ut,dt,Ee],c:[mt,Le]}=wt(this,[Rt("rui-calendar")],[[S({type:String,reflect:!0,defaultValue:""}),0,"value"],[S({type:String,defaultValue:""}),0,"min"],[S({type:String,defaultValue:""}),0,"max"],[S({type:Boolean,reflect:!0,defaultValue:!1}),0,"disabled"],[S({type:String,defaultValue:""}),0,"locale"],[S({type:String,attribute:"selection-mode",defaultValue:"single"}),0,"selectionMode"],[S({type:Number,attribute:"visible-months",defaultValue:1}),0,"visibleMonths"],[S({type:String,attribute:"page-behavior",defaultValue:"visible"}),0,"pageBehavior"],[St({name:"rui-change",bubbles:!0,composed:!0}),0,"changeEvent"],[A,0,"viewYear"],[A,0,"viewMonth"],[A,0,"focusedIso"],[A,0,"weekdayLabels"],[A,0,"monthPanels"],[A,0,"todayLabel"],[A,0,"rangeAnchor"],[A,0,"rangeHover"],[At(["value","min","max","disabled","locale","selectionMode","visibleMonths","pageBehavior"]),2,"onPropsUpdated"],[F({selector:"[data-calendar-prev-month]",type:"click"}),2,"onPrevMonth"],[F({selector:"[data-calendar-next-month]",type:"click"}),2,"onNextMonth"],[F({selector:"[data-calendar-today]",type:"click"}),2,"onTodayClick"],[F({selector:"[data-calendar-day]",type:"click"}),2,"onDayClick"],[F({selector:"[data-calendar-day]",type:"pointerenter"}),2,"onDayPointerEnter"],[F({selector:"[data-calendar-grid]",type:"pointerleave"}),2,"onGridPointerLeave"],[F({selector:"[data-calendar-day]",type:"keydown"}),2,"onDayKeydown"]],0,void 0,ft))}constructor(...e){super(...e),dt(this)}value=(Ee(this),Te(this));min=(Fe(this),Ye(this));max=(Pe(this),Ve(this));disabled=(Oe(this),Ce(this));locale=(Ge(this),ze(this));selectionMode=(je(this),$e(this));visibleMonths=(Be(this),He(this));pageBehavior=(Ue(this),We(this));changeEvent=(Ke(this),qe(this));viewYear=(Je(this),Ne(this,new Date().getFullYear()));viewMonth=(Qe(this),Xe(this,new Date().getMonth()));focusedIso=(Ze(this),et(this,""));weekdayLabels=(tt(this),nt(this,[]));monthPanels=(rt(this),at(this,[]));todayLabel=(it(this),ot(this,""));rangeAnchor=(st(this),lt(this,null));rangeHover=(ct(this),ut(this,null));get resolvedLocale(){return Se(this.locale)}get pageDelta(){return this.pageBehavior==="single"?1:Math.max(1,Math.min(this.visibleMonths,12))}get monthOptions(){return{locale:this.resolvedLocale,selectionMode:this.selectionMode,value:this.value??"",rangeDraft:{anchor:this.rangeAnchor,hover:this.rangeHover},min:this.min||void 0,max:this.max||void 0}}syncViewFromValue(){let e=this.selectionMode==="range"?C(this.value)?.start??"":this.selectionMode==="multiple"?G(this.value)[0]??"":this.value,n=q(e);if(n){this.viewYear=n.getFullYear(),this.viewMonth=n.getMonth(),this.focusedIso=e;return}let r=new Date;this.viewYear=r.getFullYear(),this.viewMonth=r.getMonth(),this.focusedIso=L(r)}refreshGrid(){this.weekdayLabels=he(this.resolvedLocale,J(this.resolvedLocale)),this.monthPanels=ce(this.viewYear,this.viewMonth,this.visibleMonths).map(e=>{let n=new Date(e.year,e.month,1);return{year:e.year,month:e.month,label:de(n,this.resolvedLocale),weeks:le(e.year,e.month,this.monthOptions)}}),this.todayLabel=fe(this.resolvedLocale)}moveMonth(e){let n=N(this.viewYear,this.viewMonth,e);this.viewYear=n.year,this.viewMonth=n.month,this.refreshGrid()}getFlatDays(){return this.monthPanels.flatMap(e=>e.weeks.flat())}moveFocusedDay(e){let n=this.getFlatDays().filter(o=>!o.isDisabled);if(!n.length)return;let r=n.findIndex(o=>o.iso===this.focusedIso),a=r<0?Math.max(0,n.findIndex(o=>o.inMonth)):(r+e+n.length)%n.length,i=n[a];if(i){if(!this.isMonthVisible(i.date)){this.viewYear=i.date.getFullYear(),this.viewMonth=i.date.getMonth(),this.focusedIso=i.iso,this.refreshGrid(),this.focusFocusedDay();return}this.focusedIso=i.iso,this.focusDayInCurrentGrid(i.iso)}}isMonthVisible(e){let n=this.viewYear*12+this.viewMonth,r=n+this.visibleMonths-1,a=e.getFullYear()*12+e.getMonth();return a>=n&&a<=r}focusDayInCurrentGrid(e){let n=this.querySelector('[data-calendar-day][tabindex="0"]'),r=Array.from(this.querySelectorAll(`[data-calendar-day][data-iso="${e}"]:not(:disabled)`)),a=r.find(i=>!i.hasAttribute("data-outside"))??r[0];a&&(n&&n!==a&&(n.tabIndex=-1),a.tabIndex=0,a.focus())}focusFocusedDay(){requestAnimationFrame(()=>{this.focusDayInCurrentGrid(this.focusedIso)})}moveFocusedMonth(e){let n=q(this.focusedIso)??new Date(this.viewYear,this.viewMonth,1),r=new Date(n.getFullYear(),n.getMonth()+e,1),a=new Date(r.getFullYear(),r.getMonth()+1,0).getDate(),i=new Date(r.getFullYear(),r.getMonth(),Math.min(n.getDate(),a));this.viewYear=i.getFullYear(),this.viewMonth=i.getMonth(),this.focusedIso=L(i),this.refreshGrid(),this.focusFocusedDay()}isIsoAllowed(e){return!(this.min&&e<this.min||this.max&&e>this.max)}emitChange(e,n={}){this.changeEvent.emit({value:e,...n})}selectSingle(e){!this.isIsoAllowed(e)||e===this.value||(this.value=e,this.emitChange(e),this.refreshGrid())}selectMultiple(e){if(!this.isIsoAllowed(e))return;let n=ae(ie(G(this.value),e));n!==this.value&&(this.value=n,this.emitChange(n),this.refreshGrid())}selectRange(e){if(!this.isIsoAllowed(e))return;let n=se(C(this.value),{anchor:this.rangeAnchor,hover:this.rangeHover},e);if(this.rangeAnchor=n.draft.anchor,this.rangeHover=n.draft.hover,n.committed){let r=re(n.committed);r!==this.value&&(this.value=r,this.emitChange(r,{start:n.committed.start,end:n.committed.end}))}this.refreshGrid()}selectIso(e){if(this.selectionMode==="multiple"){this.selectMultiple(e);return}if(this.selectionMode==="range"){this.selectRange(e);return}this.selectSingle(e)}previewRange(e){this.selectionMode!=="range"||!this.rangeAnchor||this.disabled||this.rangeHover!==e&&(this.rangeHover=e,this.refreshGrid())}clearRangePreview(){this.rangeHover&&(this.rangeHover=this.rangeAnchor,this.refreshGrid())}initialize(){this.syncViewFromValue(),this.refreshGrid()}onConnected(){this.initialize()}onPropsUpdated(){this.selectionMode!=="range"&&(this.rangeAnchor=null,this.rangeHover=null),this.syncViewFromValue(),this.refreshGrid()}onPrevMonth(e){e.preventDefault(),this.moveMonth(-this.pageDelta)}onNextMonth(e){e.preventDefault(),this.moveMonth(this.pageDelta)}onTodayClick(e){e.preventDefault(),this.selectIso(L(new Date))}onDayClick(e){let n=e.target.closest("[data-calendar-day]"),r=n?.getAttribute("data-iso");!r||n?.disabled||this.disabled||this.selectIso(r)}onDayPointerEnter(e){let n=e.target.closest("[data-calendar-day]"),r=n?.getAttribute("data-iso");!r||n?.disabled||this.previewRange(r)}onGridPointerLeave(){this.clearRangePreview()}onDayKeydown(e){if(this.disabled)return;let n=e.target.getAttribute("data-iso");if(n&&(this.focusedIso=n),e.key==="ArrowLeft"){e.preventDefault(),this.moveFocusedDay(-1);return}if(e.key==="ArrowRight"){e.preventDefault(),this.moveFocusedDay(1);return}if(e.key==="ArrowUp"){e.preventDefault(),this.moveFocusedDay(-7);return}if(e.key==="ArrowDown"){e.preventDefault(),this.moveFocusedDay(7);return}if(e.key==="PageUp"){e.preventDefault(),this.moveFocusedMonth(e.shiftKey?-12:-this.pageDelta);return}if(e.key==="PageDown"){e.preventDefault(),this.moveFocusedMonth(e.shiftKey?12:this.pageDelta);return}if(e.key==="Enter"||e.key===" "){e.preventDefault();let r=e.target,a=r.getAttribute("data-iso");a&&!r.disabled&&this.selectIso(a)}}dayDataAttributes(e){return{"data-range-start":e.isRangeStart?"true":void 0,"data-range-end":e.isRangeEnd?"true":void 0,"data-range-middle":e.isRangeMiddle?"true":void 0}}render(){let e=this.monthPanels.length,n=e>1;return ge("div",{class:`rui-calendar${n?" rui-calendar--multi":""}`,"data-ref":"root",role:"application","aria-label":"Calendar","aria-multiselectable":this.selectionMode==="multiple"?"true":void 0,children:[p("div",{class:"rui-calendar__months",children:this.monthPanels.map((r,a)=>ge("div",{class:"rui-calendar__month-panel","data-calendar-month-panel":!0,children:[ge("div",{class:"rui-calendar__header",children:[a===0?p("button",{type:"button",class:"rui-calendar__nav","data-calendar-prev-month":!0,"aria-label":"Previous month",disabled:this.disabled,children:"\u2039"}):p("span",{class:"rui-calendar__nav-spacer","aria-hidden":"true"}),p("div",{class:"rui-calendar__month","aria-live":"polite",children:r.label}),a===e-1?p("button",{type:"button",class:"rui-calendar__nav","data-calendar-next-month":!0,"aria-label":"Next month",disabled:this.disabled,children:"\u203A"}):p("span",{class:"rui-calendar__nav-spacer","aria-hidden":"true"})]}),a===0?p("div",{class:"rui-calendar__weekdays",role:"row",children:this.weekdayLabels.map(i=>p("div",{class:"rui-calendar__weekday",role:"columnheader","aria-hidden":"true",children:i}))}):null,p("div",{class:"rui-calendar__grid",role:"grid","data-calendar-grid":!0,children:r.weeks.map(i=>p("div",{class:"rui-calendar__week",role:"row",children:i.map(o=>p("button",{type:"button",class:"rui-calendar__day","data-calendar-day":!0,"data-iso":o.iso,role:"gridcell",disabled:this.disabled||o.isDisabled,tabIndex:o.iso===this.focusedIso?0:-1,"aria-selected":o.isSelected?"true":"false","aria-current":o.isToday?"date":void 0,"data-outside":o.inMonth?void 0:"true",...this.dayDataAttributes(o),children:o.date.getDate()}))}))})]}))}),p("div",{class:"rui-calendar__footer",children:p("button",{type:"button",class:"rui-calendar__today","data-calendar-today":!0,disabled:this.disabled,children:this.todayLabel})})]})}static{Le()}};import{jsx as kt}from"@ecopages/jsx/jsx-runtime";function Et({children:t,...e}){return kt("rui-calendar",{...e,children:t})}export{Et as RuiCalendar,mt as RuiCalendarElement};
+import{jsx as p,jsxs as ge}from"@ecopages/jsx/jsx-runtime";import{RadiantElement as ft,customElement as St,event as Rt,onEvent as F,onUpdated as At,prop as R,registerSsrPreparationCallback as kt,state as A}from"@ecopages/radiant";function Re(t){if(!t)return;let e=t.split(",").map(n=>n.trim()).filter(Boolean);return e.length>1?e:e[0]}function N(t){if(t==null)return null;let e=/^(\d{4})-(\d{2})-(\d{2})$/.exec(t.trim());if(!e)return null;let n=Number(e[1]),r=Number(e[2])-1,a=Number(e[3]),i=new Date(n,r,a);return i.getFullYear()!==n||i.getMonth()!==r||i.getDate()!==a?null:i}function L(t){let e=t.getFullYear(),n=String(t.getMonth()+1).padStart(2,"0"),r=String(t.getDate()).padStart(2,"0");return`${e}-${n}-${r}`}function ne(t,e,n){return!(e&&t<e||n&&t>n)}function T(t,e){return t.localeCompare(e)}function O(t,e){return T(t,e)<=0?{start:t,end:e}:{start:e,end:t}}function C(t){if(!t)return null;let[e,n]=t.split("/");return!e||!n?null:O(e,n)}function re(t){if(!t)return"";let e=O(t.start,t.end);return`${e.start}/${e.end}`}function G(t){return t?t.split(",").map(e=>e.trim()).filter(Boolean).sort(T):[]}function ae(t){return[...new Set(t)].sort(T).join(",")}function ie(t,e){let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),[...n].sort(T)}function Ae(t,e){let n=O(e.start,e.end);return T(t,n.start)>=0&&T(t,n.end)<=0}function se(t,e,n){if(e==="single"){let f=n.singleIso===t;return{isSelected:f,isRangeStart:f,isRangeEnd:f,isRangeMiddle:!1}}if(e==="multiple"){let f=n.multipleIsos?.includes(t)??!1;return{isSelected:f,isRangeStart:f,isRangeEnd:f,isRangeMiddle:!1}}let r=n.range;if(!r)return{isSelected:!1,isRangeStart:!1,isRangeEnd:!1,isRangeMiddle:!1};let a=O(r.start,r.end),i=Ae(t,a),s=t===a.start,c=t===a.end;return{isSelected:i,isRangeStart:s,isRangeEnd:c,isRangeMiddle:i&&!s&&!c}}function oe(t,e,n){return e.anchor?{committed:O(e.anchor,n),draft:{anchor:null,hover:null}}:{committed:t,draft:{anchor:n,hover:n}}}function q(t){let e=pt(t);try{let r=new Intl.Locale(e).weekInfo;if(r?.firstDay!=null)return r.firstDay===7?0:r.firstDay}catch{}return e.startsWith("en-US")?0:1}function pt(t){return Array.isArray(t)?t[0]??navigator.language:t??navigator.language}function vt(t){return new Date(t.getFullYear(),t.getMonth(),t.getDate())}function yt(t,e){return t.getFullYear()===e.getFullYear()&&t.getMonth()===e.getMonth()&&t.getDate()===e.getDate()}function bt(t){let e=t.selectionMode??"single",n=t.value??"";if(e==="multiple")return{mode:e,multipleIsos:G(n)};if(e==="range"){let r=C(n);if(t.rangeDraft?.anchor){let a=t.rangeDraft.hover??t.rangeDraft.anchor;return{mode:e,range:_t(t.rangeDraft.anchor,a)}}return{mode:e,range:r}}return{mode:e,singleIso:n||void 0}}function _t(t,e){return t.localeCompare(e)<=0?{start:t,end:e}:{start:e,end:t}}function le(t,e,n){let r=q(n.locale),a=vt(n.today??new Date),i=bt(n),c=(new Date(t,e,1).getDay()-r+7)%7,Y=new Date(t,e,1-c),f=[],g=new Date(Y);for(let k=0;k<6;k+=1){let w=[];for(let z=0;z<7;z+=1){let P=L(g),x=se(P,i.mode,{singleIso:i.singleIso,multipleIsos:i.multipleIsos,range:i.range});w.push({date:new Date(g),iso:P,inMonth:g.getMonth()===e,isToday:yt(g,a),isSelected:x.isSelected,isDisabled:!ne(P,n.min,n.max),isRangeStart:x.isRangeStart,isRangeEnd:x.isRangeEnd,isRangeMiddle:x.isRangeMiddle}),g.setDate(g.getDate()+1)}if(f.push(w),k>=4&&g.getMonth()!==e&&g.getDate()>7)break}return f}function J(t,e,n){let r=new Date(t,e+n,1);return{year:r.getFullYear(),month:r.getMonth()}}function ce(t,e,n){let r=Math.max(1,Math.min(n,12));return Array.from({length:r},(a,i)=>{let s=J(t,e,i);return{year:s.year,month:s.month,offset:i}})}var ke=new Map;function Mt(t,e){return`${JSON.stringify(t??null)}|${JSON.stringify(e)}`}function ue(t,e){let n=Mt(t,e),r=ke.get(n);if(r)return r;let a=new Intl.DateTimeFormat(t,e);return ke.set(n,a),a}function de(t,e){return ue(e,{month:"long",year:"numeric"}).format(t)}function he(t,e){let n=ue(t,{weekday:"narrow"}),r=[];for(let a=0;a<7;a+=1){let i=(e+a)%7,s=new Date(2024,0,i===0?7:i);r.push(n.format(s))}return r}function fe(t){return new Intl.RelativeTimeFormat(t,{numeric:"auto"}).format(0,"day")}var Ee,Le,Te,Fe,Ye,Pe,Ve,Oe,Ce,Ge,ze,je,Be,$e,He,Ue,We,Ke,Ne,qe,Je,Qe,Xe,Ze,et,tt,nt,rt,at,it,st,ot,lt,ct,ut,dt;function Dt(t,e,n,r,a,i){var s,c,Y,f,g,k,w,z=Symbol.metadata||Symbol.for("Symbol.metadata"),P=Object.defineProperty,x=Object.create,me=[x(null),x(null)],pe=e.length;function $(o,b,v){return function(l,u){b&&(u=l,l=t);for(var _=0;_<o.length;_++)u=o[_].apply(l,v?[u]:[]);return v?u:l}}function I(o,b,v,l){if(typeof o!="function"&&(l||o!==void 0))throw new TypeError(b+" must "+(v||"be")+" a function"+(l?"":" or undefined"));return o}function ve(o,b,v,l,u,_,E,y,M,D,be){function Q(h){if(!be(h))throw new TypeError("Attempted to access private element on non-instance")}var X=[].concat(b[0]),_e=b[3],Z=!E,j=u===1,Me=u===3,De=u===4,H=u===2;function U(h,V,Ie){return function(K,Se){return V&&(Se=K,K=o),Ie&&Ie(K),d[h].call(K,Se)}}if(!Z){var d={},ee=[],S=Me?"get":De||j?"set":"value";if(M?(D||j?d={get:ht(function(){return _e(this)},l,"get"),set:function(h){b[4](this,h)}}:d[S]=_e,D||ht(d[S],l,H?"":S)):D||(d=Object.getOwnPropertyDescriptor(o,l)),!D&&!M){if((c=me[+y][l])&&(c^u)!==7)throw Error("Decorating two elements with the same name ("+d[S].name+") is not supported yet");me[+y][l]=u<3?1:u}}for(var m=o,W=X.length-1;W>=0;W-=v?2:1){var we=I(X[W],"A decorator","be",!0),xe=v?X[W-1]:void 0,te={},B={kind:["field","accessor","method","getter","setter","class"][u],name:l,metadata:s,addInitializer:function(h,V){if(h.v)throw new TypeError("attempted to call addInitializer after decoration was finished");I(V,"An initializer","be",!0),_.push(V)}.bind(null,te)};if(Z)c=we.call(xe,m,B),te.v=1,I(c,"class decorators","return")&&(m=c);else if(B.static=y,B.private=M,c=B.access={has:M?be.bind():function(h){return l in h}},De||(c.get=M?H?function(h){return Q(h),d.value}:U("get",0,Q):function(h){return h[l]}),H||Me||(c.set=M?U("set",0,Q):function(h,V){h[l]=V}),m=we.call(xe,j?{get:d.get,set:d.set}:d[S],B),te.v=1,j){if(typeof m=="object"&&m)(c=I(m.get,"accessor.get"))&&(d.get=c),(c=I(m.set,"accessor.set"))&&(d.set=c),(c=I(m.init,"accessor.init"))&&ee.unshift(c);else if(m!==void 0)throw new TypeError("accessor decorators must return an object with get, set, or init properties or undefined")}else I(m,(D?"field":"method")+" decorators","return")&&(D?ee.unshift(m):d[S]=m)}return u<2&&E.push($(ee,y,1),$(_,y,0)),D||Z||(M?j?E.splice(-1,0,U("get",y),U("set",y)):E.push(H?d[S]:I.call.bind(d[S])):P(o,l,d)),m}function ye(o){return P(o,z,{configurable:!0,enumerable:!0,value:s})}return i!==void 0&&(s=i[z]),s=x(s??null),g=[],k=function(o){o&&g.push($(o))},w=function(o,b){for(var v=0;v<n.length;v++){var l=n[v],u=l[1],_=7&u;if((8&u)==o&&!_==b){var E=l[2],y=!!l[3],M=16&u;ve(o?t:t.prototype,l,M,y?"#"+E:wt(E),_,_<2?[]:o?f=f||[]:Y=Y||[],g,!!o,y,b,o&&y?function(D){return It(D)===t}:a)}}},w(8,0),w(0,0),w(8,1),w(0,1),k(Y),k(f),c=g,pe||ye(t),{e:c,get c(){var o=[];return pe&&[ye(t=ve(t,[e],r,t.name,5,o)),$(o,1)]}}}function wt(t){var e=xt(t,"string");return typeof e=="symbol"?e:e+""}function xt(t,e){if(typeof t!="object"||!t)return t;var n=t[Symbol.toPrimitive];if(n!==void 0){var r=n.call(t,e||"default");if(typeof r!="object")return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return(e==="string"?String:Number)(t)}function ht(t,e,n){typeof e=="symbol"&&(e=(e=e.description)?"["+e+"]":"");try{Object.defineProperty(t,"name",{configurable:!0,value:n?n+" "+e:e})}catch{}return t}function It(t){if(Object(t)!==t)throw TypeError("right-hand side of 'in' should be an object, got "+(t!==null?typeof t:"null"));return t}var mt,gt=class extends ft{static{({e:[Te,Fe,Ye,Pe,Ve,Oe,Ce,Ge,ze,je,Be,$e,He,Ue,We,Ke,Ne,qe,Je,Qe,Xe,Ze,et,tt,nt,rt,at,it,st,ot,lt,ct,ut,dt,Ee],c:[mt,Le]}=Dt(this,[St("rui-calendar")],[[R({type:String,reflect:!0,defaultValue:""}),0,"value"],[R({type:String,defaultValue:""}),0,"min"],[R({type:String,defaultValue:""}),0,"max"],[R({type:Boolean,reflect:!0,defaultValue:!1}),0,"disabled"],[R({type:String,defaultValue:""}),0,"locale"],[R({type:String,attribute:"selection-mode",defaultValue:"single"}),0,"selectionMode"],[R({type:Number,attribute:"visible-months",defaultValue:1}),0,"visibleMonths"],[R({type:String,attribute:"page-behavior",defaultValue:"visible"}),0,"pageBehavior"],[Rt({name:"rui-change",bubbles:!0,composed:!0}),0,"changeEvent"],[A,0,"viewYear"],[A,0,"viewMonth"],[A,0,"focusedIso"],[A,0,"weekdayLabels"],[A,0,"monthPanels"],[A,0,"todayLabel"],[A,0,"rangeAnchor"],[A,0,"rangeHover"],[At(["value","min","max","disabled","locale","selectionMode","visibleMonths","pageBehavior"]),2,"onPropsUpdated"],[F({selector:"[data-calendar-prev-month]",type:"click"}),2,"onPrevMonth"],[F({selector:"[data-calendar-next-month]",type:"click"}),2,"onNextMonth"],[F({selector:"[data-calendar-today]",type:"click"}),2,"onTodayClick"],[F({selector:"[data-calendar-day]",type:"click"}),2,"onDayClick"],[F({selector:"[data-calendar-day]",type:"pointerenter"}),2,"onDayPointerEnter"],[F({selector:"[data-calendar-grid]",type:"pointerleave"}),2,"onGridPointerLeave"],[F({selector:"[data-calendar-day]",type:"keydown"}),2,"onDayKeydown"]],0,void 0,ft))}value=(Ee(this),Te(this));min=(Fe(this),Ye(this));max=(Pe(this),Ve(this));disabled=(Oe(this),Ce(this));locale=(Ge(this),ze(this));selectionMode=(je(this),Be(this));visibleMonths=($e(this),He(this));pageBehavior=(Ue(this),We(this));changeEvent=(Ke(this),Ne(this));viewYear=(qe(this),Je(this,new Date().getFullYear()));viewMonth=(Qe(this),Xe(this,new Date().getMonth()));focusedIso=(Ze(this),et(this,""));weekdayLabels=(tt(this),nt(this,[]));monthPanels=(rt(this),at(this,[]));todayLabel=(it(this),st(this,""));rangeAnchor=(ot(this),lt(this,null));rangeHover=(ct(this),ut(this,null));get resolvedLocale(){return Re(this.locale)}get pageDelta(){return this.pageBehavior==="single"?1:Math.max(1,Math.min(this.visibleMonths,12))}get monthOptions(){return{locale:this.resolvedLocale,selectionMode:this.selectionMode,value:this.value??"",rangeDraft:{anchor:this.rangeAnchor,hover:this.rangeHover},min:this.min||void 0,max:this.max||void 0}}syncViewFromValue(){let e=this.selectionMode==="range"?C(this.value)?.start??"":this.selectionMode==="multiple"?G(this.value)[0]??"":this.value,n=N(e);if(n){this.viewYear=n.getFullYear(),this.viewMonth=n.getMonth(),this.focusedIso=e;return}let r=new Date;this.viewYear=r.getFullYear(),this.viewMonth=r.getMonth(),this.focusedIso=L(r)}refreshGrid(){this.weekdayLabels=he(this.resolvedLocale,q(this.resolvedLocale)),this.monthPanels=ce(this.viewYear,this.viewMonth,this.visibleMonths).map(e=>{let n=new Date(e.year,e.month,1);return{year:e.year,month:e.month,label:de(n,this.resolvedLocale),weeks:le(e.year,e.month,this.monthOptions)}}),this.todayLabel=fe(this.resolvedLocale)}moveMonth(e){let n=J(this.viewYear,this.viewMonth,e);this.viewYear=n.year,this.viewMonth=n.month,this.refreshGrid()}getFlatDays(){return this.monthPanels.flatMap(e=>e.weeks.flat())}moveFocusedDay(e){let n=this.getFlatDays().filter(s=>!s.isDisabled);if(!n.length)return;let r=n.findIndex(s=>s.iso===this.focusedIso),a=r<0?Math.max(0,n.findIndex(s=>s.inMonth)):(r+e+n.length)%n.length,i=n[a];if(i){if(!this.isMonthVisible(i.date)){this.viewYear=i.date.getFullYear(),this.viewMonth=i.date.getMonth(),this.focusedIso=i.iso,this.refreshGrid(),this.focusFocusedDay();return}this.focusedIso=i.iso,this.focusDayInCurrentGrid(i.iso)}}isMonthVisible(e){let n=this.viewYear*12+this.viewMonth,r=n+this.visibleMonths-1,a=e.getFullYear()*12+e.getMonth();return a>=n&&a<=r}focusDayInCurrentGrid(e){let n=this.querySelector('[data-calendar-day][tabindex="0"]'),r=Array.from(this.querySelectorAll(`[data-calendar-day][data-iso="${e}"]:not(:disabled)`)),a=r.find(i=>!i.hasAttribute("data-outside"))??r[0];a&&(n&&n!==a&&(n.tabIndex=-1),a.tabIndex=0,a.focus())}focusFocusedDay(){requestAnimationFrame(()=>{this.focusDayInCurrentGrid(this.focusedIso)})}moveFocusedMonth(e){let n=N(this.focusedIso)??new Date(this.viewYear,this.viewMonth,1),r=new Date(n.getFullYear(),n.getMonth()+e,1),a=new Date(r.getFullYear(),r.getMonth()+1,0).getDate(),i=new Date(r.getFullYear(),r.getMonth(),Math.min(n.getDate(),a));this.viewYear=i.getFullYear(),this.viewMonth=i.getMonth(),this.focusedIso=L(i),this.refreshGrid(),this.focusFocusedDay()}isIsoAllowed(e){return!(this.min&&e<this.min||this.max&&e>this.max)}emitChange(e,n={}){this.changeEvent.emit({value:e,...n})}selectSingle(e){!this.isIsoAllowed(e)||e===this.value||(this.value=e,this.emitChange(e),this.refreshGrid())}selectMultiple(e){if(!this.isIsoAllowed(e))return;let n=ae(ie(G(this.value),e));n!==this.value&&(this.value=n,this.emitChange(n),this.refreshGrid())}selectRange(e){if(!this.isIsoAllowed(e))return;let n=oe(C(this.value),{anchor:this.rangeAnchor,hover:this.rangeHover},e);if(this.rangeAnchor=n.draft.anchor,this.rangeHover=n.draft.hover,n.committed){let r=re(n.committed);r!==this.value&&(this.value=r,this.emitChange(r,{start:n.committed.start,end:n.committed.end}))}this.refreshGrid()}selectIso(e){if(this.selectionMode==="multiple"){this.selectMultiple(e);return}if(this.selectionMode==="range"){this.selectRange(e);return}this.selectSingle(e)}previewRange(e){this.selectionMode!=="range"||!this.rangeAnchor||this.disabled||this.rangeHover!==e&&(this.rangeHover=e,this.refreshGrid())}clearRangePreview(){this.rangeHover&&(this.rangeHover=this.rangeAnchor,this.refreshGrid())}initialize(){this.syncViewFromValue(),this.refreshGrid()}constructor(){super(),dt(this),kt(this,()=>this.initialize())}onConnected(){this.initialize()}onPropsUpdated(){this.selectionMode!=="range"&&(this.rangeAnchor=null,this.rangeHover=null),this.syncViewFromValue(),this.refreshGrid()}onPrevMonth(e){e.preventDefault(),this.moveMonth(-this.pageDelta)}onNextMonth(e){e.preventDefault(),this.moveMonth(this.pageDelta)}onTodayClick(e){e.preventDefault(),this.selectIso(L(new Date))}onDayClick(e){let n=e.target.closest("[data-calendar-day]"),r=n?.getAttribute("data-iso");!r||n?.disabled||this.disabled||this.selectIso(r)}onDayPointerEnter(e){let n=e.target.closest("[data-calendar-day]"),r=n?.getAttribute("data-iso");!r||n?.disabled||this.previewRange(r)}onGridPointerLeave(){this.clearRangePreview()}onDayKeydown(e){if(this.disabled)return;let n=e.target.getAttribute("data-iso");if(n&&(this.focusedIso=n),e.key==="ArrowLeft"){e.preventDefault(),this.moveFocusedDay(-1);return}if(e.key==="ArrowRight"){e.preventDefault(),this.moveFocusedDay(1);return}if(e.key==="ArrowUp"){e.preventDefault(),this.moveFocusedDay(-7);return}if(e.key==="ArrowDown"){e.preventDefault(),this.moveFocusedDay(7);return}if(e.key==="PageUp"){e.preventDefault(),this.moveFocusedMonth(e.shiftKey?-12:-this.pageDelta);return}if(e.key==="PageDown"){e.preventDefault(),this.moveFocusedMonth(e.shiftKey?12:this.pageDelta);return}if(e.key==="Enter"||e.key===" "){e.preventDefault();let r=e.target,a=r.getAttribute("data-iso");a&&!r.disabled&&this.selectIso(a)}}dayDataAttributes(e){return{"data-range-start":e.isRangeStart?"true":void 0,"data-range-end":e.isRangeEnd?"true":void 0,"data-range-middle":e.isRangeMiddle?"true":void 0}}render(){let e=this.monthPanels.length,n=e>1;return ge("div",{class:`rui-calendar${n?" rui-calendar--multi":""}`,"data-ref":"root",role:"application","aria-label":"Calendar","aria-multiselectable":this.selectionMode==="multiple"?"true":void 0,children:[p("div",{class:"rui-calendar__months",children:this.monthPanels.map((r,a)=>ge("div",{class:"rui-calendar__month-panel","data-calendar-month-panel":!0,children:[ge("div",{class:"rui-calendar__header",children:[a===0?p("button",{type:"button",class:"rui-calendar__nav","data-calendar-prev-month":!0,"aria-label":"Previous month",disabled:this.disabled,children:"\u2039"}):p("span",{class:"rui-calendar__nav-spacer","aria-hidden":"true"}),p("div",{class:"rui-calendar__month","aria-live":"polite",children:r.label}),a===e-1?p("button",{type:"button",class:"rui-calendar__nav","data-calendar-next-month":!0,"aria-label":"Next month",disabled:this.disabled,children:"\u203A"}):p("span",{class:"rui-calendar__nav-spacer","aria-hidden":"true"})]}),a===0?p("div",{class:"rui-calendar__weekdays",role:"row",children:this.weekdayLabels.map(i=>p("div",{class:"rui-calendar__weekday",role:"columnheader","aria-hidden":"true",children:i}))}):null,p("div",{class:"rui-calendar__grid",role:"grid","data-calendar-grid":!0,children:r.weeks.map(i=>p("div",{class:"rui-calendar__week",role:"row",children:i.map(s=>p("button",{type:"button",class:"rui-calendar__day","data-calendar-day":!0,"data-iso":s.iso,role:"gridcell",disabled:this.disabled||s.isDisabled,tabIndex:s.iso===this.focusedIso?0:-1,"aria-selected":s.isSelected?"true":"false","aria-current":s.isToday?"date":void 0,"data-outside":s.inMonth?void 0:"true",...this.dayDataAttributes(s),children:s.date.getDate()}))}))})]}))}),p("div",{class:"rui-calendar__footer",children:p("button",{type:"button",class:"rui-calendar__today","data-calendar-today":!0,disabled:this.disabled,children:this.todayLabel})})]})}static{Le()}};import{jsx as Et}from"@ecopages/jsx/jsx-runtime";function Lt({children:t,...e}){return Et("rui-calendar",{...e,children:t})}export{Lt as RuiCalendar,mt as RuiCalendarElement};
 //# sourceMappingURL=index.js.map