@aceshooting/lyra-ui 2.0.0 → 2.1.0

package/dist/components/conversation-item/conversation-item.js

@@ -71,16 +71,12 @@ function defaultFormatTimestamp(date, now = new Date()) {
  * identically-shaped choice. `lyra-select` therefore carries no detail
  * payload at all.
  *
- * `role="option"` (not `"button"`) on `[part="option"]`, since this is meant
- * to live inside a `role="listbox"` history list (that future list
- * component supplies the listbox/group ancestor `role="option"` requires)
- * rather than stand in for a single push-button action. Used truly
- * standalone -- with no listbox/group ancestor -- it's still fully
- * operable, just technically missing that ARIA parent context; wrap it in a
- * `role="listbox"` (or `role="group"`) container to satisfy that when
- * accessibility-auditing a standalone usage.
+ * `role="button"` on `[part="option"]` so the item has valid semantics both
+ * standalone and when placed in a larger history-list layout. A conversation
+ * row activates one current session; it is not itself a listbox option and
+ * therefore does not require a particular owner role.
  *
- * `role="option"` (like native `<option>`/`role="button"`) forbids focusable
+ * `role="button"` forbids focusable
  * descendants -- verified against axe-core's `nested-interactive` rule,
  * which flags it. That's why the rename button and the `actions` slot are
  * rendered as DOM *siblings* of `[part="option"]` (both inside
@@ -88,10 +84,9 @@ function defaultFormatTimestamp(date, now = new Date()) {
  * contains plain text/`<time>` content. The in-place rename `<input>` is the
  * same problem one level deeper -- it replaces the title *inside*
  * `[part="option"]` while renaming -- so `[part="option"]` sheds its
- * `role`/`tabindex`/`aria-selected`/`aria-label` entirely for the duration
- * of an edit. This isn't just an ARIA-compliance workaround: a row mid-edit
- * genuinely isn't a selectable listbox choice at that moment, it's a text
- * field, so suspending the option semantics is also the more accurate
+ * `role`/`tabindex`/`aria-current`/`aria-label` entirely for the duration
+ * of an edit. A row mid-edit is a text field, so suspending the button
+ * semantics is also the more accurate
  * description of what's on screen.
  *
  * Inline rename is a dedicated pencil/edit icon button (not a double-click
@@ -117,7 +112,7 @@ function defaultFormatTimestamp(date, now = new Date()) {
  * when the trimmed draft is empty or unchanged from the original `title`
  * (that's treated as an implicit cancel).
  * @csspart base - The outer row wrapper (plain, no ARIA role) laying out `[part="option"]`, the rename button, and `actions`.
- * @csspart option - The selectable region (`role="option"`, removed while renaming -- see the class doc). Wraps `content` and `timestamp`.
+ * @csspart option - The selectable region (`role="button"`, removed while renaming -- see the class doc). Wraps `content` and `timestamp`.
  * @csspart content - Wrapper around the title and excerpt.
  * @csspart title - The title text, shown while not renaming.
  * @csspart title-input - The in-place rename `<input>`, shown only while renaming.
@@ -137,7 +132,9 @@ export class LyraConversationItem extends LyraElement {
          *  brand-quiet background treatment. */
         this.active = false;
         /** Whether inline-rename is available at all. When `false`, the rename
-         *  button never renders and the row can never enter its editing state. */
+         *  button never renders and the row can never enter its editing state. If
+         *  flipped to `false` while a rename is already open, the in-progress edit
+         *  is cancelled (discarded, like Escape) rather than left committable. */
         this.editable = true;
         this.renaming = false;
         this.draftTitle = '';
@@ -200,10 +197,17 @@ export class LyraConversationItem extends LyraElement {
         };
     }
     static { this.styles = [LyraElement.styles, styles]; }
-    willUpdate() {
+    willUpdate(changed) {
         if (!this.hasUpdated) {
             this.hasActionsSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'actions');
         }
+        // `editable` documents that flipping it false can never leave a rename
+        // committable -- without this, toggling it mid-edit would strand the
+        // input mounted (and still submittable via Enter/blur) since nothing
+        // else observes `editable` while `renaming` is already true.
+        if (changed.has('editable') && !this.editable && this.renaming) {
+            this.cancelRename();
+        }
     }
     updated(changed) {
         if (changed.has('renaming') && this.renaming) {
@@ -245,13 +249,18 @@ export class LyraConversationItem extends LyraElement {
         const formatter = this.formatTimestamp ?? defaultFormatTimestamp;
         const displayTitle = this.title || 'Untitled conversation';
         const showRenameButton = this.editable && !this.renaming;
+        // Shared between the rename button and the input it opens: the input is
+        // where focus actually lands, so it needs the same row-specific
+        // accessible name (not a generic one) to disambiguate which row a
+        // screen-reader user is editing.
+        const renameLabel = `Rename ${displayTitle}`;
         return html `
       <div part="base">
         <div
           part="option"
-          role=${this.renaming ? nothing : 'option'}
+          role=${this.renaming ? nothing : 'button'}
           tabindex=${this.renaming ? nothing : '0'}
-          aria-selected=${this.renaming ? nothing : this.active ? 'true' : 'false'}
+          aria-current=${this.renaming || !this.active ? nothing : 'true'}
           aria-label=${this.renaming ? nothing : this.getAttribute('aria-label') || displayTitle}
           @click=${this.onOptionClick}
           @keydown=${this.onOptionKeyDown}
@@ -262,7 +271,7 @@ export class LyraConversationItem extends LyraElement {
                   part="title-input"
                   type="text"
                   .value=${this.draftTitle}
-                  aria-label="Rename conversation"
+                  aria-label=${renameLabel}
                   @input=${this.onTitleInputChange}
                   @keydown=${this.onTitleInputKeyDown}
                   @blur=${this.onTitleInputBlur}
@@ -276,7 +285,7 @@ export class LyraConversationItem extends LyraElement {
             ? html `<button
               part="rename-button"
               type="button"
-              aria-label=${`Rename ${displayTitle}`}
+              aria-label=${renameLabel}
               @click=${this.onRenameButtonClick}
             >
               ${pencilIcon()}

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

@@ -1,4 +1,18 @@
 export type WeekdayFormat = 'narrow' | 'short' | 'long';
+export type CalendarMode = 'single' | 'range';
+/** Normalize an untyped calendar count to the supported one- or two-month range. */
+export declare function normalizeCalendarMonths(value: unknown): 1 | 2;
+/** Normalize an untyped weekday format before passing it to `Intl.DateTimeFormat`. */
+export declare function normalizeWeekdayFormat(value: unknown): WeekdayFormat;
+/** Normalize an untyped picker mode to the single-date default. */
+export declare function normalizeCalendarMode(value: unknown): CalendarMode;
+/**
+ * Construct a date formatter while treating a malformed runtime locale as
+ * the platform default. Attribute values and JavaScript property writes are
+ * not constrained by TypeScript's declarations, so they must not be allowed
+ * to turn a calendar render into a `RangeError`.
+ */
+export declare function dateTimeFormat(locale: unknown, options: Intl.DateTimeFormatOptions): Intl.DateTimeFormat;
 /** Parse `YYYY-MM-DD` into a local Date, or null if invalid. */
 export declare function parseISO(s: string): Date | null;
 /** Format a Date as local `YYYY-MM-DD`. */
@@ -6,6 +20,16 @@ export declare function formatISO(d: Date): string;
 export declare function isSameDay(a: Date, b: Date): boolean;
 /** First day of the month `n` months from `d`. */
 export declare function addMonths(d: Date, n: number): Date;
+/**
+ * `d` shifted by `n` months, keeping the same day-of-month unless the target
+ * month is shorter, in which case the day is clamped to that month's last
+ * day. Plain `new Date(year, month + n, d.getDate())` construction instead
+ * overflows a too-large day-of-month into the *following* month (e.g. Jan 31
+ * + 1 month rolls into March, skipping February entirely) because the Date
+ * constructor normalizes out-of-range day components rather than clamping
+ * them.
+ */
+export declare function addMonthsClampingDay(d: Date, n: number): Date;
 export declare function clampDate(d: Date, min: Date | null, max: Date | null): Date;
 /**
  * A 6×7 grid of Dates covering the given month, week-aligned to `firstDayOfWeek`

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

@@ -1,3 +1,32 @@
+/** Normalize an untyped calendar count to the supported one- or two-month range. */
+export function normalizeCalendarMonths(value) {
+    const numeric = typeof value === 'number' ? value : Number(value);
+    if (!Number.isFinite(numeric))
+        return 1;
+    return Math.min(2, Math.max(1, Math.trunc(numeric)));
+}
+/** Normalize an untyped weekday format before passing it to `Intl.DateTimeFormat`. */
+export function normalizeWeekdayFormat(value) {
+    return value === 'narrow' || value === 'long' ? value : 'short';
+}
+/** Normalize an untyped picker mode to the single-date default. */
+export function normalizeCalendarMode(value) {
+    return value === 'range' ? 'range' : 'single';
+}
+/**
+ * Construct a date formatter while treating a malformed runtime locale as
+ * the platform default. Attribute values and JavaScript property writes are
+ * not constrained by TypeScript's declarations, so they must not be allowed
+ * to turn a calendar render into a `RangeError`.
+ */
+export function dateTimeFormat(locale, options) {
+    try {
+        return new Intl.DateTimeFormat(typeof locale === 'string' && locale ? locale : undefined, options);
+    }
+    catch {
+        return new Intl.DateTimeFormat(undefined, options);
+    }
+}
 /** Parse `YYYY-MM-DD` into a local Date, or null if invalid. */
 export function parseISO(s) {
     if (!s)
@@ -32,6 +61,20 @@ export function isSameDay(a, b) {
 export function addMonths(d, n) {
     return new Date(d.getFullYear(), d.getMonth() + n, 1);
 }
+/**
+ * `d` shifted by `n` months, keeping the same day-of-month unless the target
+ * month is shorter, in which case the day is clamped to that month's last
+ * day. Plain `new Date(year, month + n, d.getDate())` construction instead
+ * overflows a too-large day-of-month into the *following* month (e.g. Jan 31
+ * + 1 month rolls into March, skipping February entirely) because the Date
+ * constructor normalizes out-of-range day components rather than clamping
+ * them.
+ */
+export function addMonthsClampingDay(d, n) {
+    const targetMonth = d.getMonth() + n;
+    const lastDayOfTargetMonth = new Date(d.getFullYear(), targetMonth + 1, 0).getDate();
+    return new Date(d.getFullYear(), targetMonth, Math.min(d.getDate(), lastDayOfTargetMonth));
+}
 export function clampDate(d, min, max) {
     if (min && d < min)
         return min;
@@ -60,18 +103,22 @@ export function monthMatrix(year, month, firstDayOfWeek = 0) {
 }
 /** Localized weekday header labels, ordered from `firstDayOfWeek`. */
 export function weekdayLabels(firstDayOfWeek = 0, format = 'short', locale) {
-    const fmt = new Intl.DateTimeFormat(locale || undefined, { weekday: format });
+    const numericFirstDay = Number(firstDayOfWeek);
+    const start = Number.isFinite(numericFirstDay)
+        ? ((Math.trunc(numericFirstDay) % 7) + 7) % 7
+        : 0;
+    const fmt = dateTimeFormat(locale, { weekday: normalizeWeekdayFormat(format) });
     const labels = [];
     // 2021-08-01 is a Sunday, so index i maps cleanly to a weekday.
     for (let i = 0; i < 7; i++) {
-        const day = (firstDayOfWeek + i) % 7;
+        const day = (start + i) % 7;
         labels.push(fmt.format(new Date(2021, 7, 1 + day)));
     }
     return labels;
 }
 /** Localized "Month YYYY" title. */
 export function monthTitle(year, month, locale) {
-    return new Intl.DateTimeFormat(locale || undefined, { month: 'long', year: 'numeric' }).format(new Date(year, month, 1));
+    return dateTimeFormat(locale, { month: 'long', year: 'numeric' }).format(new Date(year, month, 1));
 }
 const FDOW = { sun: 0, mon: 1, tue: 2, wed: 3, thu: 4, fri: 5, sat: 6 };
 /** Locale-derived first day of week (0=Sunday … 6=Saturday), or null if unsupported. */
@@ -97,5 +144,5 @@ export function resolveFirstDayOfWeek(value, locale) {
         const derived = locale ? localeFirstDayOfWeek(locale) : null;
         return derived ?? 0;
     }
-    return FDOW[value.toLowerCase()] ?? 0;
+    return typeof value === 'string' ? (FDOW[value.toLowerCase()] ?? 0) : 0;
 }

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

@@ -16,43 +16,109 @@ declare const LyraDateInput_base: typeof LyraElement & (new (...args: any[]) =>
  * @event change - Fired on committed date transitions.
  * @event lyra-show / lyra-hide - Calendar popover lifecycle.
  * @event lyra-clear - The clear button was used.
- * @csspart form-control, form-control-label, input-wrapper, input, clear-button, expand-button, expand-icon, popup, date-picker, hint, error
+ * @csspart form-control - The outer form-control wrapper.
+ * @csspart form-control-label - The label wrapper.
+ * @csspart input-wrapper - The input and button wrapper.
+ * @csspart input - The text input.
+ * @csspart clear-button - The clear control.
+ * @csspart expand-button - The calendar popup toggle.
+ * @csspart expand-icon - The calendar icon.
+ * @csspart popup - The positioned calendar popup.
+ * @csspart date-picker - The nested date picker.
+ * @csspart hint - The hint message.
+ * @csspart error - The validation message.
  * @slot label - Custom label content.
  * @slot error - Custom error content.
  * @slot hint - Custom hint content.
  */
 export declare class LyraDateInput extends LyraDateInput_base {
     static styles: import("lit").CSSResultGroup[];
-    mode: 'single' | 'range';
-    min: string;
-    max: string;
-    readonly: boolean;
+    static properties: {
+        mode: {
+            noAccessor: boolean;
+        };
+        min: {
+            noAccessor: boolean;
+        };
+        max: {
+            noAccessor: boolean;
+        };
+        readonly: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            noAccessor: boolean;
+        };
+        disablePast: {
+            type: BooleanConstructor;
+            attribute: string;
+            noAccessor: boolean;
+        };
+        disableFuture: {
+            type: BooleanConstructor;
+            attribute: string;
+            noAccessor: boolean;
+        };
+    };
     open: boolean;
     withClear: boolean;
     label: string;
     hint: string;
     errorText: string;
     placeholder: string;
+    private accessibleLabel;
     locale: string;
     months: 1 | 2;
     firstDayOfWeek: string;
     weekdayFormat: WeekdayFormat;
-    disablePast: boolean;
-    disableFuture: boolean;
     withOutsideDays: boolean;
+    /** Accessible label for the clear button. Override for a non-English `locale`. */
+    clearLabel: string;
+    /** Accessible label for the calendar-toggle button. Override for a non-English `locale`. */
+    openLabel: string;
+    /** Accessible name for the calendar popover dialog. Override for a non-English `locale`. */
+    dialogLabel: string;
     private cleanupFn?;
+    private popupTrigger?;
+    private restorePopupFocusOnClose;
     private inputId;
     private popupId;
     private touched;
+    constructor();
     private hasHintSlot;
     private hasErrorSlot;
     private hasLabelSlot;
+    private _mode;
+    private _min;
+    private _max;
+    private _readonly;
+    private _disablePast;
+    private _disableFuture;
+    private typedBadInput;
+    get mode(): 'single' | 'range';
+    set mode(next: 'single' | 'range');
+    get min(): string;
+    set min(next: string);
+    get max(): string;
+    set max(next: string);
+    get readonly(): boolean;
+    set readonly(next: boolean);
+    get disablePast(): boolean;
+    set disablePast(next: boolean);
+    get disableFuture(): boolean;
+    set disableFuture(next: boolean);
+    get value(): string;
+    set value(next: string);
+    private setTypedBadInput;
+    private parseStrictISO;
+    private normalizeCommittedValue;
+    private valueDates;
+    protected updateValidity(): void;
     private get displayText();
-    protected willUpdate(): void;
+    protected willUpdate(changed: PropertyValues): void;
     /** Open the calendar popover. */
     show(): void;
     /** Close the calendar popover. */
-    hide(): void;
+    hide(restoreFocus?: boolean): void;
     private onDocPointer;
     /** Clear the value. */
     clear(): void;
@@ -82,10 +148,11 @@ export declare class LyraDateInput extends LyraDateInput_base {
      *  from-before-to order, matching what the date-picker's own UI-driven
      *  `commit()` already does for a UI-picked range. */
     private parseRangeText;
-    private isWithinBounds;
     private onInputKey;
     private onFormControlKey;
     private onInputBlur;
+    formStateRestoreCallback(state: string | File | FormData | null, _mode?: 'restore' | 'autocomplete'): void;
+    formResetCallback(): void;
     private onHintSlotChange;
     private onErrorSlotChange;
     private onLabelSlotChange;