@haiyue/ui 0.1.2 → 0.2.2

package/dist/core/validation.js

@@ -0,0 +1,243 @@
+import { isSnapshot, snapshot } from './data.js';
+export class HYUIError extends Error {
+    code;
+    context;
+    constructor(code, message, context = {}, cause) {
+        const place = [context.source && `${context.source.file}:${context.source.line ?? 1}`, context.key, context.property,
+            context.operation, context.revision === undefined ? undefined : `revision=${context.revision}`].filter(Boolean).join(' ');
+        super(`${message}${place ? ` [${place}]` : ''}`, cause === undefined ? undefined : { cause });
+        this.name = 'HYUIError';
+        this.code = code;
+        this.context = Object.freeze({ ...context });
+    }
+}
+export const HY_FEATURES = Object.freeze([
+    'text.composition', 'text.selection', 'text.secure', 'accessibility', 'icons.system', 'layout.rtl', 'theme.highContrast', 'motion.reduced',
+]);
+const fail = (message, context) => { throw new HYUIError('invalid-props', message, context); };
+const field = (context, key) => ({ ...context, property: context.property ? `${context.property}.${key}` : key });
+function check(test, message) {
+    return (value, context) => { if (!test(value))
+        fail(message, context); };
+}
+const string = check(v => typeof v === 'string', 'Expected string');
+const name = check(v => typeof v === 'string' && v.trim().length > 0, 'Expected non-empty identifier');
+const boolean = check(v => typeof v === 'boolean', 'Expected boolean');
+const number = check(v => typeof v === 'number' && Number.isFinite(v), 'Expected finite number');
+const positive = check(v => typeof v === 'number' && Number.isFinite(v) && v > 0, 'Expected positive finite number');
+const size = check(v => typeof v === 'number' && Number.isFinite(v) && v >= 0, 'Expected non-negative finite number');
+const integer = check(v => Number.isSafeInteger(v) && v >= 0, 'Expected non-negative integer');
+const choice = (...values) => check(v => values.includes(v), `Expected one of ${values.join(', ')}`);
+const length = (v, c) => { if (v !== 'auto')
+    size(v, c); };
+function record(value, context) {
+    if (!value || typeof value !== 'object' || ![Object.prototype, null].includes(Object.getPrototypeOf(value)))
+        fail('Expected plain data object', context);
+    return value;
+}
+function shape(fields, required = []) {
+    return (v, c) => {
+        const obj = record(v, c);
+        for (const key of required)
+            if (!Object.hasOwn(obj, key))
+                fail('Missing required property', field(c, key));
+        for (const key of Object.keys(obj)) {
+            if (!Object.hasOwn(fields, key))
+                fail('Unknown property', field(c, key));
+            const descriptor = Object.getOwnPropertyDescriptor(obj, key);
+            if (!('value' in descriptor))
+                fail('Accessors are not protocol data', field(c, key));
+            fields[key](descriptor.value, field(c, key));
+        }
+    };
+}
+const list = (item) => (v, c) => {
+    if (!Array.isArray(v))
+        fail('Expected array', c);
+    for (let i = 0; i < v.length; i++)
+        item(v[i], field(c, String(i)));
+};
+const track = (v, c) => typeof v === 'object' && v !== null ? shape({ grow: positive }, ['grow'])(v, c) : length(v, c);
+const layout = (v, c) => {
+    shape({ width: length, height: length, minWidth: size, maxWidth: size, minHeight: size, maxHeight: size,
+        padding: (p, ctx) => { list(size)(p, ctx); if (p.length !== 4)
+            fail('Expected four padding values', ctx); },
+        gap: size, grow: size, align: choice('start', 'center', 'end', 'stretch'), columns: list(track), rows: list(track),
+        row: integer, column: integer, clip: boolean })(v, c);
+    const p = v;
+    for (const dimension of ['Width', 'Height'])
+        if (p[`min${dimension}`] > p[`max${dimension}`])
+            fail('Minimum exceeds maximum', c);
+};
+const common = {
+    visible: boolean, layout,
+    a11y: shape({ label: string, description: string, error: string,
+        role: choice('button', 'text', 'textbox', 'checkbox', 'tab', 'dialog', 'image', 'slider', 'list', 'tree') }, ['label']),
+};
+const resource = shape({ id: name, alt: string }, ['id', 'alt']);
+const selection = { value: string, options: list(shape({ value: string, label: string, disabled: boolean }, ['value', 'label'])), disabled: boolean };
+const text = { value: string, disabled: boolean, readOnly: boolean, placeholder: string };
+const schemas = {
+    Row: shape(common), Column: shape(common), Grid: shape(common), Overlay: shape(common),
+    Scroll: shape({ ...common, axis: choice('horizontal', 'vertical') }, ['axis']),
+    Text: shape({ ...common, text: string, wrap: boolean, textStyle: choice('title', 'body', 'caption'), tone: choice('default', 'muted', 'danger') }, ['text']),
+    Image: shape({ ...common, resource, fit: choice('contain', 'cover') }, ['resource']),
+    Icon: shape({ ...common, resource, systemName: name }, ['resource']),
+    Button: shape({ ...common, text: string, disabled: boolean, busy: boolean, icon: choice('save', 'export', 'play', 'pause', 'reset', 'step', 'settings', 'back', 'chevronDown', 'check', 'close', 'add'), variant: choice('primary', 'secondary', 'quiet', 'danger'), size: choice('regular', 'compact') }, ['text']),
+    Checkbox: shape({ ...common, checked: boolean, disabled: boolean, text: string }, ['checked', 'text']),
+    RadioGroup: shape({ ...common, ...selection }, ['value', 'options']),
+    Rate: shape({ ...common, value: integer, count: check(v => Number.isInteger(v) && v >= 1 && v <= 10, 'Expected count 1–10'), disabled: boolean, readOnly: boolean }, ['value', 'count']),
+    Badge: shape({ ...common, text: string }, ['text']), Divider: shape({ ...common, text: string }),
+    Toggle: shape({ ...common, checked: boolean, disabled: boolean }, ['checked']),
+    Select: shape({ ...common, ...selection, presentation: choice('auto', 'popover', 'sheet') }, ['value', 'options']), Tabs: shape({ ...common, ...selection, variant: choice('underline', 'segmented') }, ['value', 'options']),
+    TextInput: shape({ ...common, ...text, secure: boolean }, ['value']), TextArea: shape({ ...common, ...text }, ['value']),
+    Slider: shape({ ...common, value: number, min: number, max: number, step: positive, disabled: boolean }, ['value', 'min', 'max', 'step']),
+    Dialog: shape({ ...common, open: boolean, title: string, dismissible: boolean }, ['open', 'title']),
+    FormGroup: shape({ ...common, label: string, description: string, error: string }, ['label']),
+    PlatformView: shape({ ...common, slot: name, resourceId: name }, ['slot', 'resourceId']),
+};
+export const HY_COMPONENTS = Object.freeze(Object.keys(schemas));
+export function hyValidateCapabilities(capabilities) {
+    const context = { property: 'capabilities' };
+    shape({ contract: choice(1), backend: choice('web', 'nativescript', 'desktop'), components: list(choice(...HY_COMPONENTS)),
+        features: list((v, c) => { if (!HY_FEATURES.includes(v))
+            throw new HYUIError('capability', 'Unknown capability', c); }) }, ['contract', 'backend', 'components', 'features'])(capabilities, context);
+    if (new Set(capabilities.components).size !== capabilities.components.length || new Set(capabilities.features).size !== capabilities.features.length) {
+        throw new HYUIError('capability', 'Duplicate capability declaration', context);
+    }
+}
+export function hySupports(capabilities, feature) {
+    hyValidateCapabilities(capabilities);
+    if (!HY_FEATURES.includes(feature))
+        throw new HYUIError('capability', 'Unknown capability', { property: feature });
+    return capabilities.features.includes(feature);
+}
+const validatedSnapshots = new WeakMap();
+function remember(props, kind) {
+    let kinds = validatedSnapshots.get(props);
+    if (!kinds) {
+        kinds = new Set();
+        validatedSnapshots.set(props, kinds);
+    }
+    kinds.add(kind);
+}
+/** Internal immutable hand-off. Mutable and merely shallow-frozen inputs are always validated. */
+export function snapshotValidatedProps(kind, props, context, capabilities) {
+    hyValidateProps(kind, props, context, capabilities);
+    const result = snapshot(props);
+    remember(result, kind);
+    return result;
+}
+export function hyValidateProps(kind, props, context = {}, capabilities) {
+    if (!Object.hasOwn(schemas, kind))
+        fail('Unknown component kind', context);
+    if (!validatedSnapshots.get(props)?.has(kind)) {
+        schemas[kind](props, context);
+        if (kind === 'Select' || kind === 'Tabs' || kind === 'RadioGroup') {
+            const p = props;
+            if (new Set(p.options.map(o => o.value)).size !== p.options.length)
+                fail('Duplicate option value', field(context, 'options'));
+            if (!p.options.some(o => o.value === p.value))
+                fail('Unknown controlled value', field(context, 'value'));
+        }
+        if (kind === 'Button') {
+            const p = props;
+            if (p.icon && !p.text.trim() && !p.a11y?.label.trim())
+                fail('Icon-only button needs an accessible label', field(context, 'a11y.label'));
+        }
+        if (kind === 'Rate' && props.value > props.count)
+            fail('Rating exceeds count', context);
+        if (kind === 'Slider') {
+            const p = props;
+            if (p.min > p.max || p.value < p.min || p.value > p.max)
+                fail('Slider value/range is invalid', context);
+        }
+        if (kind !== 'Grid' && (props.layout?.rows || props.layout?.columns))
+            fail('Track definitions require Grid', field(context, 'layout'));
+        if (isSnapshot(props))
+            remember(props, kind);
+    }
+    if (capabilities) {
+        if (!capabilities.components.includes(kind))
+            throw new HYUIError('capability', `Unsupported component ${kind}`, context);
+        const needs = [];
+        if (props.a11y)
+            needs.push('accessibility');
+        if (kind === 'TextInput' && props.secure)
+            needs.push('text.secure');
+        if (kind === 'Icon' && props.systemName)
+            needs.push('icons.system');
+        for (const feature of needs)
+            if (!capabilities.features.includes(feature))
+                throw new HYUIError('capability', `Missing capability ${feature}`, context);
+    }
+}
+/** Escaped, stable backend key. Author keys are unique across all slots of one parent. */
+export function hyKey(...parts) {
+    for (const key of parts)
+        name(key, { key });
+    if (!parts.length)
+        throw new HYUIError('invalid-props', 'A node path needs at least one key');
+    return '/' + parts.map(key => key.replace(/~/g, '~0').replace(/\//g, '~1')).join('/');
+}
+export function hyValidateNode(node, capabilities) {
+    if (capabilities)
+        hyValidateCapabilities(capabilities);
+    const ancestors = new Set();
+    const walk = (value, parent) => {
+        const raw = record(value, { property: 'node' });
+        for (const key of Object.keys(raw))
+            if (!('value' in Object.getOwnPropertyDescriptor(raw, key)))
+                fail('Accessors are not protocol data', { property: `node.${key}` });
+        name(raw.key, { property: 'key' });
+        const path = [...parent, raw.key];
+        const context = { key: hyKey(...path), ...(value.source ? { source: value.source } : {}) };
+        if (ancestors.has(value))
+            fail('Cyclic node tree', context);
+        ancestors.add(value);
+        for (const key of Object.keys(raw))
+            if (!['key', 'kind', 'props', 'children', 'slots', 'source', 'requires'].includes(key))
+                fail('Unknown node property', field(context, key));
+        if (value.source !== undefined)
+            shape({ file: name, line: check(v => Number.isSafeInteger(v) && v > 0, 'Expected positive line number') }, ['file'])(value.source, field(context, 'source'));
+        hyValidateProps(value.kind, value.props, context, capabilities);
+        if (value.requires !== undefined) {
+            list((v, c) => { if (!HY_FEATURES.includes(v))
+                throw new HYUIError('capability', 'Unknown capability', c); })(value.requires, field(context, 'requires'));
+            for (const feature of value.requires)
+                if (capabilities && !capabilities.features.includes(feature))
+                    throw new HYUIError('capability', `Missing capability ${feature}`, context);
+        }
+        const siblings = new Set();
+        const visit = (children, property) => {
+            if (!Array.isArray(children))
+                fail('Expected children array', field(context, property));
+            for (const child of children) {
+                record(child, field(context, property));
+                if (siblings.has(child.key))
+                    throw new HYUIError('duplicate-key', `Duplicate key ${child.key}`, { ...context, property });
+                siblings.add(child.key);
+                walk(child, path);
+            }
+        };
+        if (value.children !== undefined)
+            visit(value.children, 'children');
+        if (value.slots !== undefined) {
+            record(value.slots, field(context, 'slots'));
+            for (const [slot, children] of Object.entries(value.slots)) {
+                name(slot, context);
+                visit(children, `slots.${slot}`);
+            }
+        }
+        if ((value.children?.length || Object.values(value.slots ?? {}).some(a => a.length))
+            && !['Row', 'Column', 'Grid', 'Overlay', 'Scroll', 'Dialog', 'FormGroup', 'Tabs', 'Button'].includes(value.kind))
+            fail('Leaf component cannot contain children; use a container or PlatformView', context);
+        ancestors.delete(value);
+    };
+    walk(node, []);
+    return snapshot(node);
+}
+export function hyNode(kind, key, props, content = {}) {
+    return hyValidateNode({ kind, key, props, ...content });
+}
+//# sourceMappingURL=validation.js.map

package/dist/date-picker.d.ts

@@ -0,0 +1,60 @@
+export interface HYDatePickerChangeDetail {
+    readonly value: string;
+    readonly date: Date | null;
+}
+export interface HYDatePickerOpenChangeDetail {
+    readonly open: boolean;
+}
+/** Accessible calendar date picker with stable ISO values. */
+export declare class HYDatePicker extends HTMLElement {
+    private readonly _control;
+    private readonly _trigger;
+    private readonly _label;
+    private readonly _arrow;
+    private readonly _clear;
+    private readonly _panel;
+    private readonly _panelId;
+    private _value;
+    private _viewDate;
+    private _reflecting;
+    private _outsideAbort;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    get value(): string;
+    set value(value: string);
+    get open(): boolean;
+    set open(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get clearable(): boolean;
+    set clearable(value: boolean);
+    get placeholder(): string;
+    set placeholder(value: string);
+    get min(): string;
+    set min(value: string);
+    get max(): string;
+    set max(value: string);
+    get locale(): string;
+    set locale(value: string);
+    get weekStart(): 0 | 1;
+    set weekStart(value: 0 | 1);
+    private _syncAttributes;
+    private _normalizeValue;
+    private _reflectValue;
+    private _isAllowed;
+    private _setViewFromValue;
+    private _formatDate;
+    private _render;
+    private _renderPanel;
+    private _monthButton;
+    private _handleDayKeydown;
+    private _focusDate;
+    private _focusPreferredDate;
+    private _commit;
+    private _syncOutsideListener;
+    private _dispatchOpenChange;
+}
+export declare function defineDatePickerComponents(): void;

package/dist/date-picker.js

@@ -0,0 +1,355 @@
+function parseISODate(value) {
+    const match = /^(\d{4})-(\d{2})-(\d{2})$/u.exec(String(value ?? ''));
+    if (!match)
+        return null;
+    const year = Number(match[1]);
+    const month = Number(match[2]);
+    const day = Number(match[3]);
+    const date = new Date(year, month - 1, day);
+    return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day ? date : null;
+}
+function toISODate(date) {
+    return `${String(date.getFullYear()).padStart(4, '0')}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+}
+function addDays(date, amount) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);
+}
+function addMonths(date, amount) {
+    return new Date(date.getFullYear(), date.getMonth() + amount, 1);
+}
+function addCalendarMonths(date, amount) {
+    const first = addMonths(date, amount);
+    const lastDay = new Date(first.getFullYear(), first.getMonth() + 1, 0).getDate();
+    return new Date(first.getFullYear(), first.getMonth(), Math.min(date.getDate(), lastDay));
+}
+/** Accessible calendar date picker with stable ISO values. */
+export class HYDatePicker extends HTMLElement {
+    _control = document.createElement('div');
+    _trigger = document.createElement('button');
+    _label = document.createElement('span');
+    _arrow = document.createElement('span');
+    _clear = document.createElement('button');
+    _panel = document.createElement('div');
+    _panelId = `hy-date-picker-${globalThis.crypto?.randomUUID?.() ?? Math.random().toString(36).slice(2)}`;
+    _value = '';
+    _viewDate = new Date(new Date().getFullYear(), new Date().getMonth(), 1);
+    _reflecting = false;
+    _outsideAbort = null;
+    static get observedAttributes() {
+        return ['value', 'min', 'max', 'placeholder', 'disabled', 'clearable', 'open', 'locale', 'week-start', 'aria-label'];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = `
+      :host { position: relative; display: inline-block; min-width: 180px; color: var(--hy-text-color, #eef3ff); font: 12px/1.4 system-ui, sans-serif; }
+      .control { display: grid; grid-template-columns: minmax(0, 1fr) auto; height: var(--hy-date-picker-height, 34px); box-sizing: border-box; border: 1px solid var(--hy-border-color, #3d4654); border-radius: var(--hy-date-picker-radius, 6px); background: var(--hy-input-bg-color, #111722); }
+      :host(:not([disabled])) .control:hover { border-color: var(--hy-hover-border-color, #596779); }
+      :host(:focus-within) .control, :host([open]) .control { border-color: var(--hy-focus-border-color, #79a8ff); box-shadow: 0 0 0 2px var(--hy-focus-ring-color, rgba(121, 168, 255, 0.22)); }
+      .trigger { display: flex; align-items: center; min-width: 0; gap: 8px; padding: 0 8px 0 10px; overflow: hidden; border: 0; color: inherit; background: transparent; cursor: pointer; font: inherit; text-align: left; }
+      .label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .label.placeholder { color: var(--hy-muted-color, #788697); }
+      .arrow { flex: 0 0 auto; color: var(--hy-muted-color, #788697); font-size: 14px; }
+      .clear { width: 28px; padding: 0; border: 0; color: var(--hy-muted-color, #788697); background: transparent; cursor: pointer; font: 15px/1 system-ui, sans-serif; }
+      .clear:hover { color: var(--hy-text-color, #eef3ff); }
+      .clear[hidden] { display: none; }
+      .trigger:focus-visible, .clear:focus-visible { outline: none; }
+      :host([disabled]) { opacity: 0.52; }
+      :host([disabled]) .trigger, :host([disabled]) .clear { cursor: not-allowed; }
+      .panel { position: absolute; z-index: var(--hy-date-picker-z-index, 50); top: calc(100% + 6px); left: 0; width: var(--hy-date-picker-panel-width, 286px); box-sizing: border-box; padding: 10px; border: 1px solid var(--hy-border-color, #3d4654); border-radius: var(--hy-date-picker-panel-radius, 8px); background: var(--hy-menu-bg-color, var(--hy-surface-elevated-color, #171d27)); box-shadow: 0 12px 32px var(--hy-menu-shadow-color, rgba(0, 0, 0, 0.36)); }
+      .panel[hidden] { display: none; }
+      .calendar-header { display: grid; grid-template-columns: 30px 1fr 30px; align-items: center; margin-bottom: 7px; }
+      .month-label { color: var(--hy-text-color, #eef3ff); font-weight: 650; text-align: center; }
+      .month-button, .footer button { height: 28px; border: 1px solid transparent; border-radius: 4px; color: var(--hy-secondary-text-color, #aebbd0); background: transparent; cursor: pointer; font: inherit; }
+      .month-button:hover:not(:disabled), .footer button:hover:not(:disabled) { color: var(--hy-accent-color, #79a8ff); background: var(--hy-hover-bg-color, #273241); }
+      .month-button:focus-visible, .footer button:focus-visible { outline: 2px solid var(--hy-focus-border-color, #79a8ff); outline-offset: 1px; }
+      .month-button:disabled, .footer button:disabled { cursor: not-allowed; opacity: 0.35; }
+      .weekdays, .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
+      .weekday { padding: 4px 0; color: var(--hy-muted-color, #788697); font-size: 10px; text-align: center; }
+      .day { position: relative; width: 100%; aspect-ratio: 1; min-height: 31px; padding: 0; border: 1px solid transparent; border-radius: var(--hy-date-picker-day-radius, 50%); color: var(--hy-secondary-text-color, #aebbd0); background: transparent; cursor: pointer; font: inherit; }
+      .day:hover:not(:disabled), .day:focus-visible { outline: none; color: var(--hy-text-color, #eef3ff); border-color: var(--hy-hover-border-color, #596779); background: var(--hy-hover-bg-color, #273241); }
+      .day.outside { color: var(--hy-muted-color, #788697); opacity: 0.6; }
+      .day.today::after { position: absolute; right: 50%; bottom: 3px; width: 3px; height: 3px; border-radius: 50%; background: var(--hy-accent-color, #79a8ff); content: ''; transform: translateX(50%); }
+      .day[aria-selected="true"] { color: var(--hy-selected-text-color, #fff); border-color: var(--hy-selected-bg-color, #554cc6); background: var(--hy-selected-bg-color, #554cc6); }
+      .day:disabled { cursor: not-allowed; opacity: 0.24; }
+      .footer { display: flex; justify-content: flex-end; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hy-border-color, #3d4654); }
+      .footer button { padding: 0 9px; color: var(--hy-accent-color, #79a8ff); }
+    `;
+        this._control.className = 'control';
+        this._control.part.add('control');
+        this._trigger.type = 'button';
+        this._trigger.className = 'trigger';
+        this._trigger.part.add('trigger');
+        this._trigger.setAttribute('aria-haspopup', 'dialog');
+        this._trigger.setAttribute('aria-controls', this._panelId);
+        this._label.className = 'label';
+        this._label.part.add('label');
+        this._arrow.className = 'arrow';
+        this._arrow.part.add('arrow');
+        this._arrow.setAttribute('aria-hidden', 'true');
+        this._arrow.textContent = '▣';
+        this._trigger.append(this._label, this._arrow);
+        this._clear.type = 'button';
+        this._clear.className = 'clear';
+        this._clear.part.add('clear');
+        this._clear.setAttribute('aria-label', 'Clear date');
+        this._clear.textContent = '×';
+        this._panel.id = this._panelId;
+        this._panel.className = 'panel';
+        this._panel.part.add('panel');
+        this._panel.setAttribute('role', 'dialog');
+        this._control.append(this._trigger, this._clear);
+        root.append(style, this._control, this._panel);
+        this._trigger.addEventListener('click', () => { if (!this.disabled)
+            this.open = !this.open; });
+        this._trigger.addEventListener('keydown', event => {
+            if (event.key === 'ArrowDown' && !this.disabled) {
+                event.preventDefault();
+                this.open = true;
+                queueMicrotask(() => this._focusPreferredDate());
+            }
+            else if (event.key === 'Escape' && this.open) {
+                event.preventDefault();
+                this.open = false;
+            }
+        });
+        this._clear.addEventListener('click', event => { event.stopPropagation(); if (!this.disabled)
+            this._commit(''); });
+    }
+    connectedCallback() { this._syncAttributes(); this._render(); this._syncOutsideListener(); }
+    disconnectedCallback() { this._outsideAbort?.abort(); this._outsideAbort = null; }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue || this._reflecting)
+            return;
+        if (name === 'value' || name === 'min' || name === 'max') {
+            this._value = this._normalizeValue(this.getAttribute('value') ?? '');
+            this._reflectValue();
+        }
+        if (name === 'open' && this.open)
+            this._setViewFromValue();
+        this._render();
+        if (name === 'open') {
+            this._syncOutsideListener();
+            this._dispatchOpenChange();
+        }
+    }
+    get value() { return this._value; }
+    set value(value) { this._value = this._normalizeValue(value); this._reflectValue(); this._render(); }
+    get open() { return this.hasAttribute('open'); }
+    set open(value) { this.toggleAttribute('open', Boolean(value)); }
+    get disabled() { return this.hasAttribute('disabled'); }
+    set disabled(value) { this.toggleAttribute('disabled', Boolean(value)); }
+    get clearable() { return this.getAttribute('clearable') !== 'false'; }
+    set clearable(value) { this.setAttribute('clearable', String(Boolean(value))); }
+    get placeholder() { return this.getAttribute('placeholder') ?? 'Select date'; }
+    set placeholder(value) { this.setAttribute('placeholder', String(value)); }
+    get min() { return parseISODate(this.getAttribute('min')) ? this.getAttribute('min') : ''; }
+    set min(value) { if (parseISODate(value))
+        this.setAttribute('min', value);
+    else
+        this.removeAttribute('min'); }
+    get max() { return parseISODate(this.getAttribute('max')) ? this.getAttribute('max') : ''; }
+    set max(value) { if (parseISODate(value))
+        this.setAttribute('max', value);
+    else
+        this.removeAttribute('max'); }
+    get locale() { return this.getAttribute('locale') || document.documentElement.lang || navigator.language; }
+    set locale(value) { this.setAttribute('locale', String(value)); }
+    get weekStart() { return this.getAttribute('week-start') === '0' ? 0 : 1; }
+    set weekStart(value) { this.setAttribute('week-start', value === 0 ? '0' : '1'); }
+    _syncAttributes() { this._value = this._normalizeValue(this.getAttribute('value') ?? ''); this._reflectValue(); if (this.open)
+        this._setViewFromValue(); }
+    _normalizeValue(value) {
+        const date = parseISODate(value);
+        if (!date)
+            return '';
+        const iso = toISODate(date);
+        return this._isAllowed(iso) ? iso : '';
+    }
+    _reflectValue() {
+        if (this.getAttribute('value') === this._value)
+            return;
+        this._reflecting = true;
+        if (this._value)
+            this.setAttribute('value', this._value);
+        else
+            this.removeAttribute('value');
+        this._reflecting = false;
+    }
+    _isAllowed(value) { return (!this.min || value >= this.min) && (!this.max || value <= this.max); }
+    _setViewFromValue() {
+        const selected = parseISODate(this._value);
+        const today = new Date();
+        const source = selected ?? today;
+        this._viewDate = new Date(source.getFullYear(), source.getMonth(), 1);
+    }
+    _formatDate(value) {
+        const date = parseISODate(value);
+        if (!date)
+            return '';
+        return new Intl.DateTimeFormat(this.locale, { year: 'numeric', month: 'short', day: 'numeric' }).format(date);
+    }
+    _render() {
+        const text = this._formatDate(this._value);
+        this._label.textContent = text || this.placeholder;
+        this._label.classList.toggle('placeholder', !text);
+        this._trigger.disabled = this.disabled;
+        this._trigger.setAttribute('aria-expanded', String(this.open));
+        const name = this.getAttribute('aria-label');
+        if (name)
+            this._trigger.setAttribute('aria-label', name);
+        else
+            this._trigger.removeAttribute('aria-label');
+        this._clear.hidden = !this.clearable || !this._value;
+        this._clear.disabled = this.disabled;
+        this._panel.hidden = !this.open;
+        if (this.open)
+            this._renderPanel();
+        else
+            this._panel.replaceChildren();
+    }
+    _renderPanel() {
+        const header = document.createElement('div');
+        header.className = 'calendar-header';
+        header.part.add('header');
+        const previous = this._monthButton('‹', 'Previous month', -1);
+        const next = this._monthButton('›', 'Next month', 1);
+        const month = document.createElement('div');
+        month.className = 'month-label';
+        month.part.add('month-label');
+        month.setAttribute('aria-live', 'polite');
+        month.textContent = new Intl.DateTimeFormat(this.locale, { year: 'numeric', month: 'long' }).format(this._viewDate);
+        header.append(previous, month, next);
+        const weekdays = document.createElement('div');
+        weekdays.className = 'weekdays';
+        weekdays.part.add('weekdays');
+        const sunday = new Date(2024, 0, 7);
+        for (let index = 0; index < 7; index += 1) {
+            const element = document.createElement('span');
+            element.className = 'weekday';
+            element.part.add('weekday');
+            element.textContent = new Intl.DateTimeFormat(this.locale, { weekday: 'short' }).format(addDays(sunday, (index + this.weekStart) % 7));
+            weekdays.append(element);
+        }
+        const days = document.createElement('div');
+        days.className = 'days';
+        days.part.add('days');
+        days.setAttribute('role', 'grid');
+        const first = new Date(this._viewDate.getFullYear(), this._viewDate.getMonth(), 1);
+        const offset = (first.getDay() - this.weekStart + 7) % 7;
+        const start = addDays(first, -offset);
+        const today = toISODate(new Date());
+        for (let index = 0; index < 42; index += 1) {
+            const date = addDays(start, index);
+            const iso = toISODate(date);
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.className = 'day';
+            button.part.add('day');
+            button.dataset.date = iso;
+            button.setAttribute('role', 'gridcell');
+            button.setAttribute('aria-label', new Intl.DateTimeFormat(this.locale, { dateStyle: 'full' }).format(date));
+            button.setAttribute('aria-selected', String(iso === this._value));
+            button.textContent = String(date.getDate());
+            button.disabled = !this._isAllowed(iso);
+            button.classList.toggle('outside', date.getMonth() !== this._viewDate.getMonth());
+            button.classList.toggle('today', iso === today);
+            button.addEventListener('click', () => this._commit(iso));
+            button.addEventListener('keydown', event => this._handleDayKeydown(event, date));
+            days.append(button);
+        }
+        const footer = document.createElement('div');
+        footer.className = 'footer';
+        footer.part.add('footer');
+        const todayButton = document.createElement('button');
+        todayButton.type = 'button';
+        todayButton.textContent = 'Today';
+        todayButton.disabled = !this._isAllowed(today);
+        todayButton.addEventListener('click', () => this._commit(today));
+        footer.append(todayButton);
+        this._panel.replaceChildren(header, weekdays, days, footer);
+    }
+    _monthButton(text, label, direction) {
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'month-button';
+        button.part.add(direction < 0 ? 'previous' : 'next');
+        button.textContent = text;
+        button.setAttribute('aria-label', label);
+        const candidate = addMonths(this._viewDate, direction);
+        const first = toISODate(candidate);
+        const last = toISODate(new Date(candidate.getFullYear(), candidate.getMonth() + 1, 0));
+        button.disabled = Boolean((this.min && last < this.min) || (this.max && first > this.max));
+        button.addEventListener('click', () => { this._viewDate = candidate; this._renderPanel(); });
+        return button;
+    }
+    _handleDayKeydown(event, date) {
+        let target = null;
+        if (event.key === 'ArrowLeft')
+            target = addDays(date, -1);
+        else if (event.key === 'ArrowRight')
+            target = addDays(date, 1);
+        else if (event.key === 'ArrowUp')
+            target = addDays(date, -7);
+        else if (event.key === 'ArrowDown')
+            target = addDays(date, 7);
+        else if (event.key === 'Home')
+            target = addDays(date, -(date.getDay() - this.weekStart + 7) % 7);
+        else if (event.key === 'End')
+            target = addDays(date, 6 - (date.getDay() - this.weekStart + 7) % 7);
+        else if (event.key === 'PageUp')
+            target = addCalendarMonths(date, -1);
+        else if (event.key === 'PageDown')
+            target = addCalendarMonths(date, 1);
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            this.open = false;
+            this._trigger.focus();
+            return;
+        }
+        if (!target)
+            return;
+        event.preventDefault();
+        if (!this._isAllowed(toISODate(target)))
+            return;
+        this._focusDate(target);
+    }
+    _focusDate(date) {
+        if (date.getMonth() !== this._viewDate.getMonth() || date.getFullYear() !== this._viewDate.getFullYear()) {
+            this._viewDate = new Date(date.getFullYear(), date.getMonth(), 1);
+            this._renderPanel();
+        }
+        queueMicrotask(() => this._panel.querySelector(`.day[data-date="${toISODate(date)}"]`)?.focus());
+    }
+    _focusPreferredDate() { const preferred = parseISODate(this._value) ?? new Date(); if (this._isAllowed(toISODate(preferred)))
+        this._focusDate(preferred);
+    else
+        this._panel.querySelector('.day:not(:disabled)')?.focus(); }
+    _commit(value) {
+        this._value = this._normalizeValue(value);
+        this._reflectValue();
+        if (this.open)
+            this.open = false;
+        else
+            this._render();
+        this.dispatchEvent(new CustomEvent('value-change', { bubbles: true, composed: true, detail: { value: this._value, date: parseISODate(this._value) } }));
+    }
+    _syncOutsideListener() {
+        this._outsideAbort?.abort();
+        this._outsideAbort = null;
+        if (!this.open || !this.isConnected)
+            return;
+        const abort = new AbortController();
+        this._outsideAbort = abort;
+        queueMicrotask(() => { if (!abort.signal.aborted)
+            document.addEventListener('pointerdown', event => { if (!event.composedPath().includes(this))
+                this.open = false; }, { capture: true, signal: abort.signal }); });
+    }
+    _dispatchOpenChange() { this.dispatchEvent(new CustomEvent('open-change', { bubbles: true, composed: true, detail: { open: this.open } })); }
+}
+export function defineDatePickerComponents() {
+    if (!customElements.get('hy-date-picker'))
+        customElements.define('hy-date-picker', HYDatePicker);
+}
+//# sourceMappingURL=date-picker.js.map