@aceshooting/lyra-ui 0.1.0

package/dist/components/date-picker/date-picker.d.ts

@@ -0,0 +1,64 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { type WeekdayFormat } from './calendar-core.js';
+export interface DateRange {
+    from: Date | null;
+    to: Date | null;
+}
+/**
+ * `<lyra-date-picker>` — an inline month-grid calendar for picking a single date
+ * or a date range. Mirrors the core `<wa-date-picker>` API under `lyra-`.
+ *
+ * Value is ISO 8601: `YYYY-MM-DD` (single) or `YYYY-MM-DD/YYYY-MM-DD` (range).
+ *
+ * @customElement lyra-date-picker
+ * @event change - The user committed a value.
+ * @event input - The value changed during interaction (range: after the first click).
+ * @csspart base, month, header, title, previous, next, weekdays, weekday, grid
+ * @csspart day, day-today, day-outside, day-selected, day-range-start, day-range-end, day-range-inner
+ */
+export declare class LyraDatePicker extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** ISO value: `YYYY-MM-DD` or `YYYY-MM-DD/YYYY-MM-DD`. */
+    value: string;
+    mode: 'single' | 'range';
+    min: string;
+    max: string;
+    disabled: boolean;
+    readonly: boolean;
+    months: 1 | 2;
+    locale: string;
+    firstDayOfWeek: string;
+    weekdayFormat: WeekdayFormat;
+    disablePast: boolean;
+    disableFuture: boolean;
+    withOutsideDays: boolean;
+    private viewDate;
+    private focusedDate;
+    private focusPending;
+    get selection(): DateRange;
+    /** Read-only Date view of a single-mode value. */
+    get valueAsDate(): Date | null;
+    protected willUpdate(changed: PropertyValues): void;
+    private get fdow();
+    private isDisabled;
+    private commit;
+    private selectDate;
+    /** Clear the selection and emit input + change. */
+    clear(): void;
+    /** Navigate to today and focus it. */
+    goToToday(): void;
+    /** Navigate the view to a date and focus it. */
+    goToDate(date: string | Date): void;
+    private nav;
+    private onGridKey;
+    protected updated(): void;
+    private renderDay;
+    private renderMonth;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-date-picker': LyraDatePicker;
+    }
+}

package/dist/components/date-picker/date-picker.js

@@ -0,0 +1,310 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { styles } from './date-picker.styles.js';
+import { monthMatrix, weekdayLabels, monthTitle, formatISO, parseISO, isSameDay, addMonths, resolveFirstDayOfWeek, } from './calendar-core.js';
+/**
+ * `<lyra-date-picker>` — an inline month-grid calendar for picking a single date
+ * or a date range. Mirrors the core `<wa-date-picker>` API under `lyra-`.
+ *
+ * Value is ISO 8601: `YYYY-MM-DD` (single) or `YYYY-MM-DD/YYYY-MM-DD` (range).
+ *
+ * @customElement lyra-date-picker
+ * @event change - The user committed a value.
+ * @event input - The value changed during interaction (range: after the first click).
+ * @csspart base, month, header, title, previous, next, weekdays, weekday, grid
+ * @csspart day, day-today, day-outside, day-selected, day-range-start, day-range-end, day-range-inner
+ */
+export class LyraDatePicker extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** ISO value: `YYYY-MM-DD` or `YYYY-MM-DD/YYYY-MM-DD`. */
+        this.value = '';
+        this.mode = 'single';
+        this.min = '';
+        this.max = '';
+        this.disabled = false;
+        this.readonly = false;
+        this.months = 1;
+        this.locale = '';
+        this.firstDayOfWeek = 'auto';
+        this.weekdayFormat = 'short';
+        this.disablePast = false;
+        this.disableFuture = false;
+        this.withOutsideDays = false;
+        this.viewDate = new Date(new Date().getFullYear(), new Date().getMonth(), 1);
+        this.focusedDate = null;
+        this.focusPending = false;
+        this.onGridKey = (e) => {
+            const current = this.focusedDate ?? this.selection.from ?? new Date();
+            let next = null;
+            switch (e.key) {
+                case 'ArrowLeft':
+                    next = new Date(current.getFullYear(), current.getMonth(), current.getDate() - 1);
+                    break;
+                case 'ArrowRight':
+                    next = new Date(current.getFullYear(), current.getMonth(), current.getDate() + 1);
+                    break;
+                case 'ArrowUp':
+                    next = new Date(current.getFullYear(), current.getMonth(), current.getDate() - 7);
+                    break;
+                case 'ArrowDown':
+                    next = new Date(current.getFullYear(), current.getMonth(), current.getDate() + 7);
+                    break;
+                case 'PageUp':
+                    next = new Date(current.getFullYear(), current.getMonth() - 1, current.getDate());
+                    break;
+                case 'PageDown':
+                    next = new Date(current.getFullYear(), current.getMonth() + 1, current.getDate());
+                    break;
+                case 'Home':
+                    next = new Date(current.getFullYear(), current.getMonth(), 1);
+                    break;
+                case 'End':
+                    next = new Date(current.getFullYear(), current.getMonth() + 1, 0);
+                    break;
+                case 'Enter':
+                case ' ':
+                    e.preventDefault();
+                    this.selectDate(current);
+                    return;
+                default:
+                    return;
+            }
+            e.preventDefault();
+            this.focusedDate = next;
+            this.viewDate = new Date(next.getFullYear(), next.getMonth(), 1);
+            this.focusPending = true;
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    get selection() {
+        const parts = this.value.split('/');
+        return { from: parseISO(parts[0] ?? ''), to: parseISO(parts[1] ?? '') };
+    }
+    /** Read-only Date view of a single-mode value. */
+    get valueAsDate() {
+        return this.mode === 'single' ? this.selection.from : null;
+    }
+    willUpdate(changed) {
+        if (changed.has('value') && this.value) {
+            const from = this.selection.from;
+            if (from)
+                this.viewDate = new Date(from.getFullYear(), from.getMonth(), 1);
+        }
+    }
+    get fdow() {
+        return resolveFirstDayOfWeek(this.firstDayOfWeek);
+    }
+    isDisabled(d) {
+        const min = parseISO(this.min);
+        const max = parseISO(this.max);
+        if (min && d < min)
+            return true;
+        if (max && d > max)
+            return true;
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        if (this.disablePast && d < today)
+            return true;
+        if (this.disableFuture && d > today)
+            return true;
+        return false;
+    }
+    commit(from, to, fire) {
+        this.value =
+            this.mode === 'range'
+                ? from && to
+                    ? `${formatISO(from)}/${formatISO(to)}`
+                    : from
+                        ? formatISO(from)
+                        : ''
+                : from
+                    ? formatISO(from)
+                    : '';
+        this.emit('input');
+        if (fire)
+            this.emit('change');
+    }
+    selectDate(date) {
+        if (this.disabled || this.readonly || this.isDisabled(date))
+            return;
+        this.focusedDate = date;
+        if (this.mode === 'range') {
+            const { from, to } = this.selection;
+            if (!from || (from && to)) {
+                this.commit(date, null, false);
+            }
+            else {
+                let a = from;
+                let b = date;
+                if (b < a)
+                    [a, b] = [b, a];
+                this.commit(a, b, true);
+            }
+        }
+        else {
+            this.commit(date, null, true);
+        }
+    }
+    /** Clear the selection and emit input + change. */
+    clear() {
+        this.commit(null, null, true);
+    }
+    /** Navigate to today and focus it. */
+    goToToday() {
+        this.goToDate(new Date());
+    }
+    /** Navigate the view to a date and focus it. */
+    goToDate(date) {
+        const d = typeof date === 'string' ? parseISO(date) : date;
+        if (!d)
+            return;
+        this.viewDate = new Date(d.getFullYear(), d.getMonth(), 1);
+        this.focusedDate = d;
+        this.focusPending = true;
+    }
+    nav(delta) {
+        this.viewDate = addMonths(this.viewDate, delta);
+    }
+    updated() {
+        if (this.focusPending && this.focusedDate) {
+            this.focusPending = false;
+            const iso = formatISO(this.focusedDate);
+            const cell = this.renderRoot.querySelector(`[data-date="${iso}"]`);
+            cell?.focus();
+        }
+    }
+    renderDay(date, shownMonth) {
+        const outside = date.getMonth() !== shownMonth;
+        // Outside-month days are empty placeholders by default (matches WA), keeping the
+        // 6-row grid aligned without low-contrast faded numbers.
+        if (outside && !this.withOutsideDays) {
+            return html `<span part="day-placeholder" role="gridcell"></span>`;
+        }
+        const { from, to } = this.selection;
+        const disabled = this.isDisabled(date);
+        const today = new Date();
+        const isToday = isSameDay(date, today);
+        const isStart = from && isSameDay(date, from);
+        const isEnd = to && isSameDay(date, to);
+        const selected = this.mode === 'single' ? isStart : isStart || isEnd;
+        const inRange = this.mode === 'range' && from && to && date > from && date < to;
+        const focused = this.focusedDate && isSameDay(date, this.focusedDate) ? true : !this.focusedDate && isStart;
+        const parts = ['day'];
+        if (outside)
+            parts.push('day-outside');
+        if (isToday)
+            parts.push('day-today');
+        if (selected)
+            parts.push('day-selected');
+        if (isStart && this.mode === 'range')
+            parts.push('day-range-start');
+        if (isEnd)
+            parts.push('day-range-end');
+        if (inRange)
+            parts.push('day-range-inner');
+        return html `<button
+      part=${parts.join(' ')}
+      role="gridcell"
+      data-date=${formatISO(date)}
+      aria-selected=${selected ? 'true' : 'false'}
+      aria-label=${date.toLocaleDateString(this.locale || undefined, {
+            weekday: 'long',
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+        })}
+      tabindex=${focused ? '0' : '-1'}
+      ?disabled=${disabled}
+      @click=${() => this.selectDate(date)}
+    >
+      ${date.getDate()}
+    </button>`;
+    }
+    renderMonth(offset) {
+        const base = addMonths(this.viewDate, offset);
+        const year = base.getFullYear();
+        const month = base.getMonth();
+        const matrix = monthMatrix(year, month, this.fdow);
+        const labels = weekdayLabels(this.fdow, this.weekdayFormat, this.locale);
+        const isFirst = offset === 0;
+        const isLast = offset === this.months - 1;
+        return html `<div part="month">
+      <div part="header">
+        ${isFirst
+            ? html `<button part="previous" type="button" aria-label="Previous month" @click=${() => this.nav(-1)}>
+              ‹
+            </button>`
+            : html `<span></span>`}
+        <div part="title">${monthTitle(year, month, this.locale)}</div>
+        ${isLast
+            ? html `<button part="next" type="button" aria-label="Next month" @click=${() => this.nav(1)}>›</button>`
+            : html `<span></span>`}
+      </div>
+      <div part="weekdays">${labels.map((l) => html `<span part="weekday">${l}</span>`)}</div>
+      <div part="grid" role="grid" @keydown=${this.onGridKey}>
+        ${matrix.map((week) => html `<div part="week" role="row">${week.map((d) => this.renderDay(d, month))}</div>`)}
+      </div>
+    </div>`;
+    }
+    render() {
+        const monthEls = [];
+        for (let i = 0; i < this.months; i++)
+            monthEls.push(this.renderMonth(i));
+        return html `<div part="base">${monthEls}</div>`;
+    }
+}
+__decorate([
+    property()
+], LyraDatePicker.prototype, "value", void 0);
+__decorate([
+    property()
+], LyraDatePicker.prototype, "mode", void 0);
+__decorate([
+    property()
+], LyraDatePicker.prototype, "min", void 0);
+__decorate([
+    property()
+], LyraDatePicker.prototype, "max", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraDatePicker.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraDatePicker.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Number })
+], LyraDatePicker.prototype, "months", void 0);
+__decorate([
+    property()
+], LyraDatePicker.prototype, "locale", void 0);
+__decorate([
+    property({ attribute: 'first-day-of-week' })
+], LyraDatePicker.prototype, "firstDayOfWeek", void 0);
+__decorate([
+    property({ attribute: 'weekday-format' })
+], LyraDatePicker.prototype, "weekdayFormat", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'disable-past' })
+], LyraDatePicker.prototype, "disablePast", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'disable-future' })
+], LyraDatePicker.prototype, "disableFuture", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'with-outside-days' })
+], LyraDatePicker.prototype, "withOutsideDays", void 0);
+__decorate([
+    state()
+], LyraDatePicker.prototype, "viewDate", void 0);
+__decorate([
+    state()
+], LyraDatePicker.prototype, "focusedDate", void 0);
+defineElement('date-picker', LyraDatePicker);

package/dist/components/date-picker/date-picker.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/date-picker/date-picker.styles.js

@@ -0,0 +1,101 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: inline-block;
+    --lyra-cell-size: 2.25rem;
+  }
+  [part='base'] {
+    display: flex;
+    gap: var(--lyra-space-l);
+    padding: var(--lyra-space-s);
+    background: var(--lyra-color-surface);
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+  }
+  [part='header'] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--lyra-space-s);
+    margin-block-end: var(--lyra-space-xs);
+  }
+  [part='title'] {
+    font-weight: 600;
+    font-size: 0.9375rem;
+  }
+  [part='previous'],
+  [part='next'] {
+    border: none;
+    background: none;
+    cursor: pointer;
+    color: var(--lyra-color-text);
+    font-size: 1.1rem;
+    line-height: 1;
+    padding: var(--lyra-space-xs);
+    border-radius: var(--lyra-radius);
+  }
+  [part='previous']:hover,
+  [part='next']:hover {
+    background: var(--lyra-color-brand-quiet);
+  }
+  [part='weekdays'] {
+    display: grid;
+    grid-template-columns: repeat(7, var(--lyra-cell-size));
+  }
+  [part='weekday'] {
+    text-align: center;
+    font-size: 0.75rem;
+    color: var(--lyra-color-text-quiet);
+    padding-block: var(--lyra-space-xs);
+  }
+  [part='grid'] {
+    display: grid;
+    grid-template-columns: repeat(7, var(--lyra-cell-size));
+  }
+  [part='week'] {
+    display: contents;
+  }
+  [part~='day'] {
+    inline-size: var(--lyra-cell-size);
+    block-size: var(--lyra-cell-size);
+    border: none;
+    background: none;
+    cursor: pointer;
+    color: var(--lyra-color-text);
+    font: inherit;
+    border-radius: var(--lyra-radius);
+  }
+  [part~='day']:hover {
+    background: var(--lyra-color-brand-quiet);
+  }
+  [part~='day-outside'] {
+    color: var(--lyra-color-text-quiet);
+  }
+  [part='day-placeholder'] {
+    inline-size: var(--lyra-cell-size);
+    block-size: var(--lyra-cell-size);
+  }
+  [part~='day-today'] {
+    outline: 1px solid var(--lyra-color-brand);
+    outline-offset: -1px;
+  }
+  [part~='day-range-inner'] {
+    background: var(--lyra-color-brand-quiet);
+    border-radius: 0;
+  }
+  [part~='day-selected'],
+  [part~='day-range-start'],
+  [part~='day-range-end'] {
+    background: var(--lyra-color-brand);
+    color: #fff;
+  }
+  [part~='day']:disabled {
+    color: var(--lyra-color-text-quiet);
+    opacity: 0.35;
+    cursor: not-allowed;
+  }
+  [part~='day']:focus-visible {
+    outline: 2px solid var(--lyra-color-brand);
+    outline-offset: 1px;
+  }
+`;

package/dist/components/flag/flag.d.ts

@@ -0,0 +1,35 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/**
+ * `<lyra-flag>` — a country/language flag.
+ *
+ * Flag images are shipped by the optional peer package `@aceshooting/lyra-flags`,
+ * not bundled into lyra-ui itself, so importing the core library pulls zero flag
+ * weight. Give it a `country` (ISO 3166-1 alpha-2) or a `language` tag (mapped to
+ * a representative country).
+ *
+ * @customElement lyra-flag
+ * @example <lyra-flag country="fr"></lyra-flag>
+ * @example <lyra-flag language="en" label="English"></lyra-flag>
+ * @csspart image - The underlying <img>.
+ */
+export declare class LyraFlag extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** ISO 3166-1 alpha-2 country code (e.g. `fr`, `us`). Takes precedence over `language`. */
+    country?: string;
+    /** BCP-47-ish language tag (e.g. `en`, `en-US`) resolved to a country flag. */
+    language?: string;
+    /** Accessible label / `alt` text. Defaults to the uppercase code. */
+    label?: string;
+    /** Render as a circular flag. */
+    round: boolean;
+    private src?;
+    private get code();
+    protected willUpdate(changed: PropertyValues<this>): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-flag': LyraFlag;
+    }
+}

package/dist/components/flag/flag.js

@@ -0,0 +1,91 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { styles } from './flag.styles.js';
+import { languageToCountry } from './language-map.js';
+let flagUrlResolver;
+/**
+ * Lazily loads the optional peer dependency '@aceshooting/lyra-flags' once per
+ * page. Resolves to `null` (with a one-time warning) if it isn't installed.
+ */
+function loadFlagUrlResolver() {
+    if (!flagUrlResolver) {
+        flagUrlResolver = import('@aceshooting/lyra-flags')
+            .then((mod) => mod.flagUrl)
+            .catch(() => {
+            console.warn("<lyra-flag> needs the optional peer dependency '@aceshooting/lyra-flags' to render " +
+                'flag images — install it with `pnpm add @aceshooting/lyra-flags`.');
+            return null;
+        });
+    }
+    return flagUrlResolver;
+}
+/**
+ * `<lyra-flag>` — a country/language flag.
+ *
+ * Flag images are shipped by the optional peer package `@aceshooting/lyra-flags`,
+ * not bundled into lyra-ui itself, so importing the core library pulls zero flag
+ * weight. Give it a `country` (ISO 3166-1 alpha-2) or a `language` tag (mapped to
+ * a representative country).
+ *
+ * @customElement lyra-flag
+ * @example <lyra-flag country="fr"></lyra-flag>
+ * @example <lyra-flag language="en" label="English"></lyra-flag>
+ * @csspart image - The underlying <img>.
+ */
+export class LyraFlag extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** Render as a circular flag. */
+        this.round = false;
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    get code() {
+        if (this.country)
+            return this.country.toLowerCase();
+        if (this.language)
+            return languageToCountry(this.language);
+        return undefined;
+    }
+    willUpdate(changed) {
+        if (!changed.has('country') && !changed.has('language'))
+            return;
+        const code = this.code;
+        if (!code) {
+            this.src = undefined;
+            return;
+        }
+        void loadFlagUrlResolver().then((resolve) => {
+            this.src = resolve?.(code);
+        });
+    }
+    render() {
+        if (!this.src)
+            return html ``;
+        const alt = this.label ?? (this.code ?? '').toUpperCase();
+        return html `<img part="image" src=${this.src} alt=${alt} loading="lazy" decoding="async" />`;
+    }
+}
+__decorate([
+    property()
+], LyraFlag.prototype, "country", void 0);
+__decorate([
+    property()
+], LyraFlag.prototype, "language", void 0);
+__decorate([
+    property()
+], LyraFlag.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraFlag.prototype, "round", void 0);
+__decorate([
+    state()
+], LyraFlag.prototype, "src", void 0);
+defineElement('flag', LyraFlag);

package/dist/components/flag/flag.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/flag/flag.styles.js

@@ -0,0 +1,27 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: inline-block;
+    inline-size: auto;
+    block-size: 1em;
+    line-height: 0;
+    vertical-align: middle;
+  }
+  [part='image'] {
+    display: block;
+    block-size: 100%;
+    inline-size: auto;
+    border-radius: var(--lyra-flag-radius, 2px);
+    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08) inset;
+    object-fit: cover;
+  }
+  :host([round]) {
+    block-size: 1em;
+    inline-size: 1em;
+  }
+  :host([round]) [part='image'] {
+    inline-size: 100%;
+    block-size: 100%;
+    border-radius: 50%;
+  }
+`;

package/dist/components/flag/language-map.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Default mapping from a language subtag to a representative country flag
+ * (ISO 3166-1 alpha-2). Languages don't map 1:1 to countries; these are the
+ * conventional choices for language pickers. Override per-app as needed.
+ */
+export declare const LANGUAGE_TO_COUNTRY: Record<string, string>;
+/**
+ * Resolve a BCP-47-ish language tag to a flag country code.
+ * A region subtag wins (`en-US` → `us`); otherwise the base language is mapped.
+ */
+export declare function languageToCountry(language: string): string | undefined;