tyrell-components 1.0.0-TC58 → 1.0.0-TC59

package/lib/base/ty-component.d.ts

@@ -17,6 +17,12 @@ export { upgradeProperties };
 export declare abstract class TyComponent<T = any> extends HTMLElement {
     static formAssociated: boolean;
     protected static properties: Record<string, PropertyConfig>;
+    /** attachShadow delegatesFocus: the host itself counts as focusable when
+     *  its focusable role element lives in the shadow (checkbox/switch) —
+     *  Firefox checks the host, not the validation anchor, on a blocked submit. */
+    protected static delegatesFocus: boolean;
+    /** A wrapping <label> delegates clicks to the host (see watchLabelForwards). */
+    protected static labelClicks: boolean;
     protected props: PropertyManager<T>;
     protected _internals: ElementInternals;
     private _validity;
@@ -60,6 +66,8 @@ export declare abstract class TyComponent<T = any> extends HTMLElement {
      * Disconnected callback
      */
     disconnectedCallback(): void;
+    /** The form owner changed (moved, `form` attribute): see ValidityController.track(). */
+    formAssociatedCallback(): void;
     /**
      * upgradeProperties(), plus declared properties without an accessor of
      * their own name (e.g. ty-input's `minlength`): those go straight to
@@ -143,18 +151,6 @@ export declare abstract class TyComponent<T = any> extends HTMLElement {
      * the role element as aria-label, giving it an accessible name.
      */
     protected applyLabelName(roleEl: HTMLElement): void;
-    private _handlingActivationClick;
-    /**
-     * Guard for click-driven toggle handlers (checkbox/switch) on components
-     * whose whole host is the click target AND that expect a wrapping
-     * <label> to delegate to them. Some browsers still forward a label's own
-     * synthetic click to the associated control even when the original click
-     * already targeted that control directly, firing 'click' twice for one
-     * user gesture. Both arrive synchronously in the same task, so a flag
-     * cleared on the next microtask catches only the spurious duplicate —
-     * two genuinely separate clicks are always in different tasks.
-     */
-    protected isDuplicateActivationClick(): boolean;
     private _resetDefaults;
     /**
      * Form reset callback - called when form.reset() is invoked.

package/lib/base/ty-component.js

@@ -2,20 +2,46 @@ import { PropertyManager } from '../utils/property-manager.js';
 import { ValidityController } from '../utils/validity.js';
 import { upgradeProperties } from '../utils/upgrade-properties.js';
 export { upgradeProperties };
+const labelClickHosts = new WeakSet();
+const directClicks = new WeakMap();
+let labelForwardsWatched = false;
+function watchLabelForwards() {
+if (labelForwardsWatched)
+return;
+labelForwardsWatched = true;
+window.addEventListener('click', (e) => {
+const path = e.composedPath();
+const host = path.find((n) => labelClickHosts.has(n));
+if (!host)
+return;
+const at = `${e.clientX},${e.clientY}`;
+if (path[0] !== host) {
+directClicks.set(host, at);
+setTimeout(() => { if (directClicks.get(host) === at)
+directClicks.delete(host); });
+}
+else if (directClicks.get(host) === at) {
+e.stopImmediatePropagation();
+}
+}, true);
+}
 export class TyComponent extends HTMLElement {
 constructor() {
 super();
 this._connected = false;
 this._rendered = false;
 this._userEdited = false;
-this._handlingActivationClick = false;
 this._resetDefaults = null;
 const ctor = this.constructor;
 this.props = new PropertyManager(ctor.properties);
 this._internals = this.attachInternals();
 this._validity = new ValidityController(this, this._internals);
 if (!this.shadowRoot) {
-this.attachShadow({ mode: 'open' });
+this.attachShadow({ mode: 'open', delegatesFocus: ctor.delegatesFocus });
+}
+if (ctor.labelClicks) {
+labelClickHosts.add(this);
+watchLabelForwards();
 }
 }
 static get observedAttributes() {
@@ -96,6 +122,8 @@ this._resetDefaults.set(name, attr ?? (typeof config.default === 'function' ? co
 }
 this._upgradeProperties();
 this._connected = true;
+if (this._validates)
+this._validity.track();
 this.onConnect();
 if (!this._rendered) {
 this.render();
@@ -104,8 +132,14 @@ this._rendered = true;
 }
 disconnectedCallback() {
 this._connected = false;
+if (this._validates)
+this._validity.track();
 this.onDisconnect();
 }
+formAssociatedCallback() {
+if (this._validates)
+this._validity.track();
+}
 _upgradeProperties() {
 for (const name of Object.keys(this.constructor.properties)) {
 if (!Object.prototype.hasOwnProperty.call(this, name))
@@ -213,13 +247,6 @@ roleEl.setAttribute('aria-label', text);
 else
 roleEl.removeAttribute('aria-label');
 }
-isDuplicateActivationClick() {
-if (this._handlingActivationClick)
-return true;
-this._handlingActivationClick = true;
-queueMicrotask(() => { this._handlingActivationClick = false; });
-return false;
-}
 formResetCallback() {
 this._userEdited = false;
 if (this._validates)
@@ -234,3 +261,5 @@ onFormReset() {
 }
 TyComponent.formAssociated = true;
 TyComponent.properties = {};
+TyComponent.delegatesFocus = false;
+TyComponent.labelClicks = false;

package/lib/components/button.d.ts

@@ -93,11 +93,21 @@ export declare class TyButton extends TyComponent<ButtonState> implements TyButt
     private _customFlavorSheet;
     private _ownClick;
     constructor();
+    /**
+     * A real press inside the host's content box that missed the button: the
+     * empty host below a wide button that a min-height made taller, or around
+     * one a page's display: flex stretched. Nothing there looks like the
+     * button, so it's no press. Host padding and border are outside the
+     * content box.
+     */
+    private _pressOffButton;
     protected onConnect(): void;
     protected onDisconnect(): void;
     protected onPropertiesChanged(changes: PropertyChange[]): void;
     formDisabledCallback(disabled: boolean): void;
     private get _isDisabled();
+    /** Focus the inner <button>. The host itself isn't focusable. */
+    focus(options?: FocusOptions): void;
     /**
      * Custom flavors: adopt generated per-flavor rules pointed at the user's
      * design tokens (--ty-solid-X / --ty-color-X / --ty-bg-X), falling back to

package/lib/components/button.js

@@ -4,6 +4,7 @@ import { ensureStyles, buildClassList } from "../utils/styles.js";
 import { buttonStyles, buttonCustomFlavorCss } from "../styles/button.js";
 import { syncCustomFlavorSheet } from "../utils/flavor-sheet.js";
 import { getLoaderSvg } from "../utils/loader-registry.js";
+import { asSubmitAttempt } from "../utils/validity.js";
 export class TyButton extends TyComponent {
 constructor() {
 super();
@@ -19,9 +20,22 @@ return;
 if (e.composedPath().includes(button))
 return;
 e.stopImmediatePropagation();
+if (!this._pressOffButton(e))
 button.click();
 }, true);
 }
+_pressOffButton(e) {
+if (!e.isTrusted || !(e instanceof MouseEvent))
+return false;
+const r = this.getBoundingClientRect();
+const s = getComputedStyle(this);
+const px = (p) => parseFloat(s.getPropertyValue(p)) || 0;
+const left = r.left + px("border-left-width") + px("padding-left");
+const right = r.right - px("border-right-width") - px("padding-right");
+const top = r.top + px("border-top-width") + px("padding-top");
+const bottom = r.bottom - px("border-bottom-width") - px("padding-bottom");
+return e.clientX >= left && e.clientX < right && e.clientY >= top && e.clientY < bottom;
+}
 onConnect() {
 this._syncCustomFlavor();
 }
@@ -39,6 +53,13 @@ this.render();
 get _isDisabled() {
 return this.disabled || this._formDisabled;
 }
+focus(options) {
+const button = this.shadowRoot?.querySelector("button");
+if (button)
+button.focus(options);
+else
+super.focus(options);
+}
 _syncCustomFlavor() {
 const { base } = this.parseFlavor();
 this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, base, () => buttonCustomFlavorCss(base));
@@ -137,7 +158,7 @@ if (this.name && this.value) {
 this._internals.setFormValue(this.value);
 }
 try {
-form.requestSubmit();
+asSubmitAttempt(() => form.requestSubmit());
 }
 finally {
 if (this.name && this.value)

package/lib/components/calendar-month.d.ts

@@ -32,7 +32,7 @@ export interface DayClickDetail {
 export declare class TyCalendarMonth extends HTMLElement {
     private _displayYear;
     private _displayMonth;
-    private _locale;
+    private _locale?;
     private _size;
     private _width?;
     private _minWidth?;
@@ -97,6 +97,12 @@ export declare class TyCalendarMonth extends HTMLElement {
      * Useful when external data changes (e.g., async event loading)
      */
     refresh(): void;
+    /**
+     * A day was picked (click, Enter, Space): it becomes the grid's tab stop and
+     * takes the focus, which render() keeps on it when the pick re-renders the
+     * grid. Then the events go out.
+     */
+    private pickDay;
     private dispatchDayClick;
     /**
      * WAI-ARIA grid pattern: gridcell + roving tabindex (exactly one cell in

package/lib/components/calendar-month.js

@@ -2,7 +2,7 @@ import { ensureStyles } from '../utils/styles.js';
 import { liftProperties, upgradeProperties } from '../utils/upgrade-properties.js';
 import { syncCustomFlavorSheet } from '../utils/flavor-sheet.js';
 import { calendarMonthStyles, calendarMonthCustomFlavorCss } from '../styles/calendar-month.js';
-import { getCalendarMonthDays, getLocalizedWeekdays, parseISODate } from '../utils/calendar-utils.js';
+import { getCalendarMonthDays, getLocalizedWeekdays, localMidnight, parseDateDay, utcMidnight } from '../utils/calendar-utils.js';
 import { getEffectiveLocale, observeLocaleChanges } from '../utils/locale.js';
 function defaultDayContent(dayContext) {
 return dayContext.dayInMonth.toString();
@@ -25,10 +25,10 @@ return value instanceof HTMLElement;
 function isoToUTCTimestamp(iso) {
 if (!iso)
 return null;
-const parsed = parseISODate(iso);
+const parsed = parseDateDay(iso);
 if (!parsed)
 return null;
-return Date.UTC(parsed.year, parsed.month - 1, parsed.day);
+return utcMidnight(parsed.year, parsed.month, parsed.day);
 }
 function normalizeSizeValue(value) {
 if (!value || value === '')
@@ -45,7 +45,6 @@ return ['display-year', 'display-month', 'locale', 'size', 'min', 'max', 'flavor
 }
 constructor() {
 super();
-this._locale = 'en-US';
 this._size = 'md';
 this._customFlavorSheet = null;
 this._focusedIndex = null;
@@ -64,7 +63,7 @@ if (!this._displayYear) {
 this._displayYear = new Date().getFullYear();
 }
 if (!this._locale) {
-this._locale = this.getAttribute('locale') || 'en-US';
+this._locale = this.getAttribute('locale') || undefined;
 }
 const sizeAttr = this.getAttribute('size');
 if (sizeAttr && (sizeAttr === 'sm' || sizeAttr === 'md' || sizeAttr === 'lg')) {
@@ -72,6 +71,7 @@ this._size = sizeAttr;
 }
 upgradeProperties(this);
 this._localeObserver = observeLocaleChanges(this, () => {
+if (!this._locale)
 this.render();
 });
 this._syncCustomFlavor();
@@ -95,7 +95,7 @@ this.displayMonth = n;
 }
 }
 else if (name === 'locale') {
-this._locale = newValue || 'en-US';
+this._locale = newValue || undefined;
 this.render();
 }
 else if (name === 'size') {
@@ -136,11 +136,11 @@ this.render();
 }
 }
 get locale() {
-return getEffectiveLocale(this, this.getAttribute('locale'));
+return getEffectiveLocale(this, this._locale);
 }
 set locale(value) {
 if (this._locale !== value) {
-this._locale = value;
+this._locale = value || undefined;
 this.render();
 }
 }
@@ -232,6 +232,7 @@ set value(timestamp) {
 const newValue = timestamp ?? undefined;
 if (this._value !== newValue) {
 this._value = newValue;
+this._focusedIndex = null;
 this.render();
 }
 }
@@ -269,6 +270,15 @@ this.shadowRoot.adoptedStyleSheets = [...existing, this._customCSS];
 refresh() {
 this.render();
 }
+pickDay(cell, dayContext, domEvent) {
+const index = this._cellElements.indexOf(cell);
+if (index !== -1) {
+this._cellElements.forEach((c) => c.setAttribute('tabindex', c === cell ? '0' : '-1'));
+this._focusedIndex = index;
+cell.focus({ preventScroll: true });
+}
+this.dispatchDayClick(dayContext, domEvent);
+}
 dispatchDayClick(dayContext, _domEvent) {
 const detail = {
 dayContext,
@@ -290,7 +300,7 @@ cancelable: true,
 this.dispatchEvent(event);
 }
 }
-renderDayCell(dayContext, disabled, isRoving) {
+renderDayCell(dayContext, disabled, isRoving, label) {
 const dayElement = document.createElement('div');
 const content = this._dayContentFn
 ? this._dayContentFn(dayContext)
@@ -312,8 +322,7 @@ else if (isDOMElement(content)) {
 dayElement.appendChild(content);
 }
 dayElement.setAttribute('role', 'gridcell');
-dayElement.setAttribute('aria-label', new Intl.DateTimeFormat(this._locale, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })
-.format(new Date(dayContext.localValue)));
+dayElement.setAttribute('aria-label', label.format(new Date(dayContext.localValue)));
 dayElement.setAttribute('aria-selected', String(!!dayContext.isSelected));
 if (dayContext.today)
 dayElement.setAttribute('aria-current', 'date');
@@ -324,13 +333,13 @@ dayElement.setAttribute('tabindex', '-1');
 else {
 dayElement.setAttribute('tabindex', isRoving ? '0' : '-1');
 dayElement.addEventListener('click', (event) => {
-this.dispatchDayClick(dayContext, event);
+this.pickDay(dayElement, dayContext, event);
 });
 dayElement.addEventListener('keydown', (event) => {
 const ke = event;
 if (ke.key === 'Enter' || ke.key === ' ') {
 ke.preventDefault();
-this.dispatchDayClick(dayContext, event);
+this.pickDay(dayElement, dayContext, event);
 }
 });
 }
@@ -344,7 +353,7 @@ ensureStyles(root, { css: calendarMonthStyles, id: 'ty-calendar-month' });
 this.applyCustomCSS();
 this.applyWidthProperties();
 let selection;
-if (this._value) {
+if (this._value !== undefined) {
 const date = new Date(this._value);
 selection = {
 year: date.getFullYear(),
@@ -353,13 +362,16 @@ day: date.getDate()
 };
 }
 const days = getCalendarMonthDays(this._displayYear, this._displayMonth, selection);
-const weekdays = getLocalizedWeekdays(this._locale, 'short');
+const locale = this.locale;
+const weekdays = getLocalizedWeekdays(locale, 'short');
+const dayLabel = new Intl.DateTimeFormat(locale, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
+const hadFocus = !!root.activeElement;
 root.innerHTML = '';
 const calendarContainer = document.createElement('div');
 calendarContainer.className = `calendar-flex-container calendar-size-${this._size}`;
 calendarContainer.setAttribute('role', 'grid');
-calendarContainer.setAttribute('aria-label', new Intl.DateTimeFormat(this._locale, { month: 'long', year: 'numeric' })
-.format(new Date(this._displayYear, this._displayMonth - 1, 1)));
+calendarContainer.setAttribute('aria-label', new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' })
+.format(localMidnight(this._displayYear, this._displayMonth, 1)));
 const headerRow = document.createElement('div');
 headerRow.className = 'calendar-row calendar-header-row';
 headerRow.setAttribute('role', 'row');
@@ -414,7 +426,7 @@ dayRow.setAttribute('role', 'row');
 week.forEach(dayContext => {
 const disabled = (minTs !== null && dayContext.value < minTs) ||
 (maxTs !== null && dayContext.value > maxTs);
-const dayCell = this.renderDayCell(dayContext, disabled, flatIndex === effectiveFocusedIndex);
+const dayCell = this.renderDayCell(dayContext, disabled, flatIndex === effectiveFocusedIndex, dayLabel);
 dayCell.className = `${dayCell.className} calendar-cell calendar-day-cell`;
 dayRow.appendChild(dayCell);
 this._cellElements[flatIndex] = dayCell;
@@ -445,6 +457,8 @@ nextCell.focus();
 }
 });
 root.appendChild(calendarContainer);
+if (hadFocus)
+this._cellElements[effectiveFocusedIndex]?.focus({ preventScroll: true });
 }
 }
 if (!customElements.get('ty-calendar-month')) {

package/lib/components/calendar-navigation.js

@@ -1,6 +1,6 @@
 import { ensureStyles } from '../utils/styles.js';
 import { calendarNavigationStyles } from '../styles/calendar-navigation.js';
-import { getMonthName, parseISODate } from '../utils/calendar-utils.js';
+import { getMonthName, parseDateDay } from '../utils/calendar-utils.js';
 import { getEffectiveLocale, observeLocaleChanges } from '../utils/locale.js';
 import { TyComponent } from '../base/ty-component.js';
 const CHEVRON_LEFT_SVG = `<?xml version='1.0' encoding='UTF-8'?>
@@ -31,6 +31,7 @@ onConnect() {
 this._state.displayMonth = this.displayMonth;
 this._state.displayYear = this.displayYear;
 this._localeObserver = observeLocaleChanges(this, () => {
+if (!this.getProperty('locale'))
 this.render();
 });
 this.render();
@@ -122,8 +123,8 @@ static monthIndex(year, month) {
 return year * 12 + (month - 1);
 }
 boundIndices() {
-const min = parseISODate(this.min);
-const max = parseISODate(this.max);
+const min = parseDateDay(this.min);
+const max = parseDateDay(this.max);
 return {
 minIdx: min ? TyCalendarNavigation.monthIndex(min.year, min.month) : null,
 maxIdx: max ? TyCalendarNavigation.monthIndex(max.year, max.month) : null,
@@ -175,6 +176,12 @@ this.style.removeProperty('--nav-width');
 }
 const months = this.view === 'months';
 const monthName = getMonthName(this._state.displayMonth, this.locale, 'long');
+const had = root.activeElement;
+const place = !had ? null
+: had.classList.contains('nav-title') ? 'title'
+: had.className.includes('-prev') ? 'prev'
+: had.className.includes('-next') ? 'next'
+: null;
 root.innerHTML = '';
 const header = document.createElement('div');
 header.className = 'calendar-navigation-header';
@@ -206,11 +213,17 @@ const step = months ? 12 : 1;
 const unit = months ? 'year' : 'month';
 const arrows = document.createElement('div');
 arrows.className = 'nav-group nav-arrows';
-arrows.appendChild(this.createButton(`nav-btn nav-${unit}-prev`, `Previous ${unit}`, CHEVRON_LEFT_SVG, () => this.navigateBy(-step), this.isNavDisabled(-step)));
-arrows.appendChild(this.createButton(`nav-btn nav-${unit}-next`, `Next ${unit}`, CHEVRON_RIGHT_SVG, () => this.navigateBy(step), this.isNavDisabled(step)));
+const prev = this.createButton(`nav-btn nav-${unit}-prev`, `Previous ${unit}`, CHEVRON_LEFT_SVG, () => this.navigateBy(-step), this.isNavDisabled(-step));
+const next = this.createButton(`nav-btn nav-${unit}-next`, `Next ${unit}`, CHEVRON_RIGHT_SVG, () => this.navigateBy(step), this.isNavDisabled(step));
+arrows.appendChild(prev);
+arrows.appendChild(next);
 header.appendChild(title);
 header.appendChild(arrows);
 root.appendChild(header);
+if (place) {
+const successor = place === 'prev' ? prev : place === 'next' ? next : title;
+(successor.disabled ? title : successor).focus({ preventScroll: true });
+}
 }
 }
 TyCalendarNavigation.properties = {
@@ -251,7 +264,7 @@ return num;
 locale: {
 type: 'string',
 visual: true,
-default: 'en-US'
+default: ''
 },
 size: {
 type: 'string',

package/lib/components/calendar.d.ts

@@ -51,6 +51,7 @@ export declare class TyCalendar extends HTMLElement {
     private _validity?;
     private _initialValue;
     private _valueSets;
+    private _pressing;
     private _localeObserver?;
     static formAssociated: boolean;
     static get observedAttributes(): string[];
@@ -64,6 +65,8 @@ export declare class TyCalendar extends HTMLElement {
     set max(value: string | undefined);
     get flavor(): string;
     set flavor(value: string);
+    get required(): boolean;
+    set required(value: boolean);
     get year(): number | undefined;
     set year(value: number | undefined);
     get month(): number | undefined;
@@ -85,7 +88,12 @@ export declare class TyCalendar extends HTMLElement {
     get customCSS(): CSSStyleSheet | undefined;
     set customCSS(sheet: CSSStyleSheet | undefined);
     get value(): string;
-    set value(isoDate: string);
+    /**
+     * Reads what ty-date-picker reads: 'YYYY-MM-DD', 'YYYY-MM-DDTHH:mm[:ss]'
+     * (that day), an ISO instant with Z/offset or epoch ms / a Date (its local
+     * day). The value stays 'YYYY-MM-DD'; anything else is no value.
+     */
+    set value(isoDate: string | number | Date | null | undefined);
     /**
      * Initialize state from HTML attributes on first load
      */
@@ -95,9 +103,12 @@ export declare class TyCalendar extends HTMLElement {
     private syncChildComponents;
     private updateFormValue;
     /**
-     * Selection outside [min, max] => rangeUnderflow/rangeOverflow, with a
-     * native date input's message.
-     * UI can't produce this (days are disabled), but programmatic values can.
+     * required with no selection => valueMissing; a selection outside
+     * [min, max] => rangeUnderflow/rangeOverflow (UI can't pick one, days are
+     * disabled, but programmatic values can). With a native date input's
+     * message. The grid's tab stop is the anchor, so a submit focuses it and
+     * the browser shows its bubble there; the cells are rebuilt on every grid
+     * render, so each one runs this again.
      */
     private updateValidity;
     get form(): HTMLFormElement | null;
@@ -130,7 +141,15 @@ export declare class TyCalendar extends HTMLElement {
     private pickMonth;
     private handleKeydown;
     private focusNavTitle;
-    /** Focus the grid's tab stop (the focused day, or month in the month view). */
+    /**
+     * The grid's tab stop: the focused day, or month in the month view. When
+     * every day shown is disabled (a value outside min/max) there is none: then
+     * the selected day, or the first one; disabled cells still take focus.
+     * Disabled month cells don't (buttons): with every month of the year
+     * disabled, the navigation title (back to the days) stands in.
+     */
+    private gridCell;
+    /** Focus the grid's tab stop (see gridCell). */
     focus(options?: FocusOptions): void;
     private focusDayGrid;
 }