tyrell-components 1.0.0-TC57 → 1.0.0-TC58

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

@@ -9,6 +9,8 @@
  * - Property change events via 'prop:change' (separate from user 'change' events)
  */
 import { PropertyManager, PropertyConfig, PropertyChange } from '../utils/property-manager.js';
+import { upgradeProperties } from '../utils/upgrade-properties.js';
+export { upgradeProperties };
 /**
  * Base class for all Ty components with unified property lifecycle
  */
@@ -20,6 +22,9 @@ export declare abstract class TyComponent<T = any> extends HTMLElement {
     private _validity;
     protected _connected: boolean;
     protected _rendered: boolean;
+    /** The user edited the field since it was created or its form reset:
+     *  blur then shows its validation message (like native :user-invalid). */
+    protected _userEdited: boolean;
     constructor();
     /**
      * Define which attributes to observe
@@ -56,10 +61,11 @@ export declare abstract class TyComponent<T = any> extends HTMLElement {
      */
     disconnectedCallback(): void;
     /**
-     * Capture properties that were set before connectedCallback
-     * (React, Vue, Reagent set properties before element is connected)
+     * upgradeProperties(), plus declared properties without an accessor of
+     * their own name (e.g. ty-input's `minlength`): those go straight to
+     * setProperty().
      */
-    private _capturePreSetProperties;
+    private _upgradeProperties;
     /**
      * THE CORE LIFECYCLE METHOD
      * All property changes flow through here
@@ -157,6 +163,9 @@ export declare abstract class TyComponent<T = any> extends HTMLElement {
      * semantics). Non-form state (e.g. a checkbox's submission `value`, a
      * ty-radio's option `value`) is deliberately left alone — the old
      * blanket 'value' reset corrupted radio groups by wiping child values.
+     * Like a native control the field also looks untouched again: the
+     * validation message it showed is gone (an `error` the author set stays)
+     * and a blur shows nothing until the user edits it.
      */
     formResetCallback(): void;
     /**

package/lib/base/ty-component.js

@@ -1,10 +1,13 @@
 import { PropertyManager } from '../utils/property-manager.js';
 import { ValidityController } from '../utils/validity.js';
+import { upgradeProperties } from '../utils/upgrade-properties.js';
+export { upgradeProperties };
 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;
@@ -81,7 +84,6 @@ this._handlePropertyChanges([change]);
 }
 }
 connectedCallback() {
-this._connected = true;
 if (!this._resetDefaults) {
 this._resetDefaults = new Map();
 const ctor = this.constructor;
@@ -92,10 +94,8 @@ const attr = this.getAttribute(this._toKebabCase(name));
 this._resetDefaults.set(name, attr ?? (typeof config.default === 'function' ? config.default() : config.default) ?? null);
 }
 }
-const preSetProps = this._capturePreSetProperties();
-if (preSetProps.length > 0) {
-this._handlePropertyChanges(preSetProps);
-}
+this._upgradeProperties();
+this._connected = true;
 this.onConnect();
 if (!this._rendered) {
 this.render();
@@ -106,19 +106,20 @@ disconnectedCallback() {
 this._connected = false;
 this.onDisconnect();
 }
-_capturePreSetProperties() {
-const changes = [];
-const ctor = this.constructor;
-for (const propName of Object.keys(ctor.properties)) {
-const descriptor = Object.getOwnPropertyDescriptor(this, propName);
-if (descriptor && descriptor.value !== undefined) {
-const change = this.props.updateProperty(propName, descriptor.value, 'property');
-if (change) {
-changes.push(change);
-}
-}
+_upgradeProperties() {
+for (const name of Object.keys(this.constructor.properties)) {
+if (!Object.prototype.hasOwnProperty.call(this, name))
+continue;
+const value = this[name];
+delete this[name];
+if (value === undefined)
+continue;
+if (name in this)
+this[name] = value;
+else
+this.setProperty(name, value);
 }
-return changes;
+upgradeProperties(this);
 }
 _handlePropertyChanges(changes) {
 if (changes.length === 0)
@@ -220,6 +221,9 @@ queueMicrotask(() => { this._handlingActivationClick = false; });
 return false;
 }
 formResetCallback() {
+this._userEdited = false;
+if (this._validates)
+this._validity.reset();
 for (const [name, def] of this._resetDefaults ?? []) {
 this.setProperty(name, def);
 }

package/lib/components/button.d.ts

@@ -89,11 +89,15 @@ export declare class TyButton extends TyComponent<ButtonState> implements TyButt
         };
     };
     private _structureInitialized;
+    private _formDisabled;
     private _customFlavorSheet;
+    private _ownClick;
     constructor();
     protected onConnect(): void;
     protected onDisconnect(): void;
     protected onPropertiesChanged(changes: PropertyChange[]): void;
+    formDisabledCallback(disabled: boolean): void;
+    private get _isDisabled();
     /**
      * 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

@@ -8,8 +8,19 @@ export class TyButton extends TyComponent {
 constructor() {
 super();
 this._structureInitialized = false;
+this._formDisabled = false;
 this._customFlavorSheet = null;
+this._ownClick = null;
 ensureStyles(this.shadowRoot, { css: buttonStyles, id: "ty-button" });
+this.addEventListener("click", (e) => {
+const button = this.shadowRoot.querySelector("button");
+if (!button || e === this._ownClick)
+return;
+if (e.composedPath().includes(button))
+return;
+e.stopImmediatePropagation();
+button.click();
+}, true);
 }
 onConnect() {
 this._syncCustomFlavor();
@@ -20,6 +31,14 @@ if (changes.some((c) => c.name === "flavor")) {
 this._syncCustomFlavor();
 }
 }
+formDisabledCallback(disabled) {
+this._formDisabled = disabled;
+if (this._structureInitialized)
+this.render();
+}
+get _isDisabled() {
+return this.disabled || this._formDisabled;
+}
 _syncCustomFlavor() {
 const { base } = this.parseFlavor();
 this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, base, () => buttonCustomFlavorCss(base));
@@ -136,7 +155,7 @@ initializeButtonStructure() {
 const shadow = this.shadowRoot;
 const classes = this.buildClasses();
 const button = document.createElement("button");
-button.disabled = this.disabled;
+button.disabled = this._isDisabled;
 button.className = classes;
 button.setAttribute("part", "button");
 const loader = document.createElement("span");
@@ -155,15 +174,21 @@ button.appendChild(startSlot);
 button.appendChild(defaultSlot);
 button.appendChild(endSlot);
 button.addEventListener("click", (e) => {
-if (this.disabled || this.loading)
+const path = e.composedPath();
+if (path.slice(0, path.indexOf(button)).some((n) => n instanceof Element && n.localName === "ty-popup"))
 return;
 e.stopPropagation();
-this.handleFormAction();
-this.dispatchEvent(new CustomEvent("click", {
+if (this._isDisabled || this.loading)
+return;
+const click = new CustomEvent("click", {
 bubbles: true,
 composed: true,
+cancelable: true,
 detail: { originalEvent: e },
-}));
+});
+this._ownClick = click;
+if (this.dispatchEvent(click))
+this.handleFormAction();
 });
 this.applyLoadingState(button);
 shadow.appendChild(button);
@@ -174,12 +199,14 @@ const isLoading = this.loading;
 button.classList.toggle("loading", isLoading);
 if (isLoading) {
 button.setAttribute("aria-busy", "true");
+button.setAttribute("aria-disabled", "true");
 const loader = button.querySelector(".loader-icon");
 if (loader)
 loader.innerHTML = getLoaderSvg();
 }
 else {
 button.removeAttribute("aria-busy");
+button.removeAttribute("aria-disabled");
 }
 }
 render() {
@@ -191,7 +218,7 @@ return;
 const classes = this.buildClasses();
 const button = shadow.querySelector("button");
 if (button) {
-button.disabled = this.disabled;
+button.disabled = this._isDisabled;
 button.className = classes;
 this.applyLoadingState(button);
 }

package/lib/components/calendar-month.js

@@ -1,4 +1,5 @@
 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';
@@ -53,6 +54,7 @@ const today = new Date();
 this._displayYear = today.getFullYear();
 this._displayMonth = today.getMonth() + 1;
 this.attachShadow({ mode: 'open' });
+liftProperties(this);
 }
 connectedCallback() {
 if (!this._displayMonth) {
@@ -68,16 +70,7 @@ const sizeAttr = this.getAttribute('size');
 if (sizeAttr && (sizeAttr === 'sm' || sizeAttr === 'md' || sizeAttr === 'lg')) {
 this._size = sizeAttr;
 }
-const plainDayContentFn = this.dayContentFn;
-if (plainDayContentFn && !this._dayContentFn) {
-this._dayContentFn = plainDayContentFn;
-delete this.dayContentFn;
-}
-const plainCustomCSS = this.customCSS;
-if (plainCustomCSS && !this._customCSS) {
-this._customCSS = plainCustomCSS;
-delete this.customCSS;
-}
+upgradeProperties(this);
 this._localeObserver = observeLocaleChanges(this, () => {
 this.render();
 });

package/lib/components/calendar.d.ts

@@ -50,6 +50,7 @@ export declare class TyCalendar extends HTMLElement {
     private _internals?;
     private _validity?;
     private _initialValue;
+    private _valueSets;
     private _localeObserver?;
     static formAssociated: boolean;
     static get observedAttributes(): string[];
@@ -94,7 +95,8 @@ export declare class TyCalendar extends HTMLElement {
     private syncChildComponents;
     private updateFormValue;
     /**
-     * Selection outside [min, max] => rangeUnderflow/rangeOverflow.
+     * 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.
      */
     private updateValidity;

package/lib/components/calendar.js

@@ -1,10 +1,11 @@
 import { ensureStyles } from '../utils/styles.js';
+import { liftProperties, upgradeProperties } from '../utils/upgrade-properties.js';
 import { calendarStyles } from '../styles/calendar.js';
 import './calendar-month.js';
 import './calendar-navigation.js';
 import { parseISODate, getMonthName } from '../utils/calendar-utils.js';
 import { getEffectiveLocale, observeLocaleChanges } from '../utils/locale.js';
-import { ValidityController } from '../utils/validity.js';
+import { ValidityController, nativeMessage } from '../utils/validity.js';
 function getCurrentDate() {
 const now = new Date();
 return {
@@ -49,12 +50,14 @@ this._flavor = 'primary';
 this._view = 'days';
 this._dayGridHeight = 0;
 this._initialValue = '';
+this._valueSets = 0;
 const current = getCurrentDate();
 this._state = {
 displayYear: current.year,
 displayMonth: current.month,
 };
 this.attachShadow({ mode: 'open' });
+liftProperties(this);
 if ('attachInternals' in this) {
 this._internals = this.attachInternals();
 this._validity = new ValidityController(this, this._internals);
@@ -62,36 +65,7 @@ this._validity = new ValidityController(this, this._internals);
 }
 connectedCallback() {
 this.initializeFromAttributes();
-const plainDayContentFn = this.dayContentFn;
-if (plainDayContentFn && !this._dayContentFn) {
-this._dayContentFn = plainDayContentFn;
-delete this.dayContentFn;
-}
-const plainCustomCSS = this.customCSS;
-if (plainCustomCSS && !this._customCSS) {
-this._customCSS = plainCustomCSS;
-delete this.customCSS;
-}
-const plainValue = this.value;
-if (plainValue && typeof plainValue === 'string' && plainValue !== this.value) {
-const match = plainValue.match(/^(\d{4})-(\d{2})-(\d{2})$/);
-if (match) {
-const year = parseInt(match[1], 10);
-const month = parseInt(match[2], 10);
-const day = parseInt(match[3], 10);
-this._state.selectedYear = year;
-this._state.selectedMonth = month;
-this._state.selectedDay = day;
-this._state.displayYear = year;
-this._state.displayMonth = month;
-if (!this._stateless) {
-this.setAttribute('year', year.toString());
-this.setAttribute('month', month.toString());
-this.setAttribute('day', day.toString());
-}
-}
-delete this.value;
-}
+upgradeProperties(this);
 this.render();
 this.updateFormValue();
 this._localeObserver = observeLocaleChanges(this, () => {
@@ -337,18 +311,24 @@ return formatDateISO(selectedYear, selectedMonth, selectedDay);
 return '';
 }
 set value(isoDate) {
+const set = ++this._valueSets;
+const superseded = () => set !== this._valueSets;
 if (!isoDate) {
 delete this._state.selectedYear;
 delete this._state.selectedMonth;
 delete this._state.selectedDay;
 if (!this._stateless) {
 this.removeAttribute('year');
+if (superseded())
+return;
 this.removeAttribute('month');
+if (superseded())
+return;
 this.removeAttribute('day');
 }
 }
 else {
-const match = isoDate.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+const match = typeof isoDate === 'string' && isoDate.match(/^(\d{4})-(\d{2})-(\d{2})$/);
 if (match) {
 const year = parseInt(match[1], 10);
 const month = parseInt(match[2], 10);
@@ -360,7 +340,11 @@ this._state.displayYear = year;
 this._state.displayMonth = month;
 if (!this._stateless) {
 this.setAttribute('year', year.toString());
+if (superseded())
+return;
 this.setAttribute('month', month.toString());
+if (superseded())
+return;
 this.setAttribute('day', day.toString());
 }
 }
@@ -503,12 +487,13 @@ if (selectedYear && selectedMonth && selectedDay) {
 const sel = Date.UTC(selectedYear, selectedMonth - 1, selectedDay);
 const min = this._min ? parseISODate(this._min) : null;
 const max = this._max ? parseISODate(this._max) : null;
+const message = () => nativeMessage('input', { type: 'date', min: this._min, max: this._max }, formatDateISO(selectedYear, selectedMonth, selectedDay));
 if (min && sel < Date.UTC(min.year, min.month - 1, min.day)) {
-this._validity.set({ rangeUnderflow: true }, `Date must be ${this._min} or later`);
+this._validity.set({ rangeUnderflow: true }, message());
 return;
 }
 if (max && sel > Date.UTC(max.year, max.month - 1, max.day)) {
-this._validity.set({ rangeOverflow: true }, `Date must be ${this._max} or earlier`);
+this._validity.set({ rangeOverflow: true }, message());
 return;
 }
 }

package/lib/components/checkbox.d.ts

@@ -112,7 +112,7 @@ export declare class TyCheckbox extends TyComponent<CheckboxState> implements Ty
     protected render(): void;
     /** Focus the checkbox itself (the host is not focusable; its role element is). */
     focus(options?: FocusOptions): void;
-    /** required + unchecked => valueMissing; otherwise valid. */
+    /** required + unchecked => valueMissing (the browser's own message); otherwise valid. */
     private updateValidity;
     get checked(): boolean;
     set checked(value: boolean);

package/lib/components/checkbox.js

@@ -3,6 +3,7 @@ import { TyComponent } from "../base/ty-component.js";
 import { ensureStyles } from "../utils/styles.js";
 import { syncCustomFlavorSheet } from "../utils/flavor-sheet.js";
 import { checkboxStyles, checkboxCustomFlavorCss } from "../styles/checkbox.js";
+import { nativeMessage } from "../utils/validity.js";
 const CHECK_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>`;
 const DASH_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>`;
 export class TyCheckbox extends TyComponent {
@@ -179,7 +180,7 @@ this.applyValidity({});
 return;
 }
 if (this.required && !this.checked) {
-this.applyValidity({ valueMissing: true }, "Please check this box", anchor ?? undefined);
+this.applyValidity({ valueMissing: true }, nativeMessage("input", { type: "checkbox", required: true }), anchor ?? undefined);
 }
 else {
 this.applyValidity({});

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

@@ -1,7 +1,8 @@
 /**
  * TyDatePicker Web Component — read-only input stub + calendar dropdown
  * (modal <dialog>), optional time input, form participation via
- * ElementInternals. Value is UTC; display is local.
+ * ElementInternals. Value is a UTC instant (wall-clock with `native`);
+ * display is local.
  */
 import { type Placement } from '../utils/positioning.js';
 import { TyComponent } from '../base/ty-component.js';
@@ -16,6 +17,8 @@ interface DateComponents {
     day?: number;
     hour?: number;
     minute?: number;
+    second?: number;
+    epoch?: number;
 }
 /**
  * Internal date picker state
@@ -99,6 +102,11 @@ export declare class TyDatePicker extends TyComponent<DatePickerState> {
             visual: boolean;
             default: boolean;
         };
+        error: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
         format: {
             type: "string";
             visual: boolean;
@@ -123,12 +131,19 @@ export declare class TyDatePicker extends TyComponent<DatePickerState> {
             visual: boolean;
             default: boolean;
         };
+        native: {
+            type: "boolean";
+            visual: boolean;
+            default: boolean;
+        };
     };
     private _state;
     private _clickListener?;
     private _keydownListener?;
     private _dialogClickListener?;
     private _closeTimestamp;
+    private _initialized;
+    private _syncing;
     private _timeInput?;
     private _localeObserver?;
     private _customFlavorSheet;
@@ -142,16 +157,21 @@ export declare class TyDatePicker extends TyComponent<DatePickerState> {
     /** Handle state updates BEFORE render. */
     protected onPropertiesChanged(changes: PropertyChange[]): void;
     /**
-     * Get form value - returns UTC string from current state
-     * TyComponent calls this automatically when value property changes
+     * Get form value - the submitted string from current state (see
+     * componentsToOutputValue). TyComponent calls this automatically when the
+     * value property changes.
      */
     protected getFormValue(): FormDataEntryValue | null;
+    private outputValue;
     protected updateFormValue(): void;
-    /** Focus the field: the host itself isn't focusable. */
+    /** The field's focusable element: the stub, or the native input on touch devices. */
+    private focusTarget;
+    /** Focus the field: the host itself isn't focusable. Disabled: nothing, like a native input. */
     focus(options?: FocusOptions): void;
     /**
      * `required` used to be cosmetic: nothing reported valueMissing, so an empty
      * required picker never blocked its form. Disabled pickers don't validate.
+     * The message is a native date (datetime-local with time) input's.
      */
     private updateValidity;
     private getComponents;
@@ -173,6 +193,14 @@ export declare class TyDatePicker extends TyComponent<DatePickerState> {
      * Compares before setting to prevent circular triggers
      */
     private syncFormValue;
+    /**
+     * `error` turns an unflavored field ('default'/'neutral') danger, like
+     * ty-input; clearing it puts back exactly the flavor attribute the author
+     * had, or none, kept meanwhile in ERROR_FLAVOR. Runs once connected: while
+     * the element upgrades, `error` may come before the `flavor` written next
+     * to it.
+     */
+    private syncErrorFlavor;
     /**
      * Handle time changes from the footer's hour/minute fields
      */
@@ -186,6 +214,7 @@ export declare class TyDatePicker extends TyComponent<DatePickerState> {
     set placement(v: Placement | '');
     get flavor(): DatePickerFlavor;
     set flavor(v: DatePickerFlavor);
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     get label(): string;
     set label(v: string);
     get placeholder(): string;
@@ -208,17 +237,23 @@ export declare class TyDatePicker extends TyComponent<DatePickerState> {
     set max(v: string);
     get withTime(): boolean;
     set withTime(v: boolean);
+    get native(): boolean;
+    set native(v: boolean);
+    get error(): string;
+    set error(v: string);
     /**
-     * Get current value (UTC ISO string)
+     * Get current value — the string the form submits: a UTC ISO instant, or
+     * wall-clock ('YYYY-MM-DD' / 'YYYY-MM-DDTHH:mm') with `native`. null when
+     * empty (the form then submits name=, like a native date input).
      */
     get value(): string | null;
     /**
-     * Set value (UTC ISO string, Date object, or null)
+     * Set value: any format parseValue() reads, a Date, epoch milliseconds,
+     * or null. It's normalized to the submitted form.
      *
      * When set to null/undefined/empty string, the attribute is removed.
-     * When set to a valid date, the attribute is set to ISO UTC string.
      */
-    set value(val: string | Date | null);
+    set value(val: string | number | Date | null);
     /**
      * Clear the date value programmatically WITH a change event (source:
      * 'clear'). Works regardless of `no-clear` — lets any
@@ -232,15 +267,32 @@ export declare class TyDatePicker extends TyComponent<DatePickerState> {
     /** Footer: clock + "Time" on the left, HH : MM on the right, summary below. */
     private renderTimeSection;
     private renderCalendarDropdown;
+    /**
+     * Match the popup calendar to the stub's flavor — the one the user set, not
+     * the danger an error swapped in. 'default' is the stub's own unstyled
+     * state, not a real flavor: the calendar stays on its own default.
+     */
+    private calendarFlavor;
     /**
      * Render native date input for mobile touch devices.
      * Uses <input type="date"> or <input type="datetime-local"> when with-time.
      * Reuses .date-picker-stub styling and existing event/state infrastructure.
      */
     private renderNativeInput;
+    /**
+     * The touch devices' native input follows the picker: type (date, or
+     * datetime-local with time), disabled, required, min/max (datetime-local
+     * wants a time suffix) and value — also when they change at runtime.
+     */
+    private syncNativeInput;
     private calculateCalendarPosition;
     private renderContainer;
     protected render(): void;
+    /**
+     * The `error` line under the field — same markup as ty-input's; the field
+     * (stub, or the native input on touch devices) is described by it.
+     */
+    private syncErrorLine;
     /**
      * Update display without destroying DOM (for open dialog)
      */