tyrell-components 1.0.0-TC58 → 1.0.0-TC59

package/lib/components/calendar.js

@@ -3,7 +3,7 @@ import { liftProperties, upgradeProperties } from '../utils/upgrade-properties.j
 import { calendarStyles } from '../styles/calendar.js';
 import './calendar-month.js';
 import './calendar-navigation.js';
-import { parseISODate, getMonthName } from '../utils/calendar-utils.js';
+import { parseDateDay, formatISODay, toISODay, getMonthName, localMidnight, utcMidnight } from '../utils/calendar-utils.js';
 import { getEffectiveLocale, observeLocaleChanges } from '../utils/locale.js';
 import { ValidityController, nativeMessage } from '../utils/validity.js';
 function getCurrentDate() {
@@ -32,14 +32,12 @@ const day = parseInt(dayStr, 10);
 const daysInMonth = new Date(year, month, 0).getDate();
 return day >= 1 && day <= daysInMonth ? day : null;
 }
-function formatDateISO(year, month, day) {
-const monthStr = month.toString().padStart(2, '0');
-const dayStr = day.toString().padStart(2, '0');
-return `${year}-${monthStr}-${dayStr}`;
+function formatYear(year) {
+return year.toString().padStart(4, '0');
 }
 export class TyCalendar extends HTMLElement {
 static get observedAttributes() {
-return ['value', 'year', 'month', 'day', 'hide-navigation', 'stateless', 'locale', 'name', 'size', 'width', 'min', 'max', 'flavor'];
+return ['value', 'year', 'month', 'day', 'hide-navigation', 'stateless', 'locale', 'name', 'size', 'width', 'min', 'max', 'flavor', 'required'];
 }
 constructor() {
 super();
@@ -51,12 +49,13 @@ this._view = 'days';
 this._dayGridHeight = 0;
 this._initialValue = '';
 this._valueSets = 0;
+this._pressing = false;
 const current = getCurrentDate();
 this._state = {
 displayYear: current.year,
 displayMonth: current.month,
 };
-this.attachShadow({ mode: 'open' });
+this.attachShadow({ mode: 'open', delegatesFocus: true });
 liftProperties(this);
 if ('attachInternals' in this) {
 this._internals = this.attachInternals();
@@ -132,6 +131,9 @@ this[name === 'min' ? '_min' : '_max'] = newValue || undefined;
 this.syncChildComponents();
 this.updateValidity();
 break;
+case 'required':
+this.updateValidity();
+break;
 case 'flavor':
 this._flavor = newValue || 'primary';
 this.syncChildComponents();
@@ -165,6 +167,12 @@ this.setAttribute('flavor', value);
 else
 this.removeAttribute('flavor');
 }
+get required() {
+return this.hasAttribute('required');
+}
+set required(value) {
+this.toggleAttribute('required', !!value);
+}
 get year() {
 return this._state.selectedYear;
 }
@@ -172,12 +180,12 @@ set year(value) {
 if (value !== undefined) {
 if (this._stateless) {
 this._state.displayYear = value;
-this.setAttribute('year', value.toString());
+this.setAttribute('year', formatYear(value));
 }
 else {
 this._state.selectedYear = value;
 this._state.displayYear = value;
-this.setAttribute('year', value.toString());
+this.setAttribute('year', formatYear(value));
 }
 }
 else {
@@ -306,14 +314,14 @@ this.syncChildComponents();
 get value() {
 const { selectedYear, selectedMonth, selectedDay } = this._state;
 if (selectedYear && selectedMonth && selectedDay) {
-return formatDateISO(selectedYear, selectedMonth, selectedDay);
+return formatISODay(selectedYear, selectedMonth, selectedDay);
 }
 return '';
 }
 set value(isoDate) {
 const set = ++this._valueSets;
 const superseded = () => set !== this._valueSets;
-if (!isoDate) {
+if (isoDate === null || isoDate === undefined || isoDate === '') {
 delete this._state.selectedYear;
 delete this._state.selectedMonth;
 delete this._state.selectedDay;
@@ -328,18 +336,16 @@ this.removeAttribute('day');
 }
 }
 else {
-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);
-const day = parseInt(match[3], 10);
+const parsed = parseDateDay(isoDate);
+if (parsed) {
+const { year, month, day } = parsed;
 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('year', formatYear(year));
 if (superseded())
 return;
 this.setAttribute('month', month.toString());
@@ -455,13 +461,13 @@ this._monthDisplay.customCSS = this._customCSS;
 }
 const { selectedYear, selectedMonth, selectedDay } = this._state;
 if (selectedYear && selectedMonth && selectedDay) {
-const date = new Date(selectedYear, selectedMonth - 1, selectedDay);
-this._monthDisplay.value = date.getTime();
+this._monthDisplay.value = localMidnight(selectedYear, selectedMonth, selectedDay).getTime();
 }
 else {
 this._monthDisplay.value = null;
 }
 }
+this.updateValidity();
 }
 updateFormValue() {
 if (this._stateless)
@@ -471,7 +477,7 @@ return;
 const elementName = this.getAttribute('name');
 const { selectedYear, selectedMonth, selectedDay } = this._state;
 if (elementName && selectedYear && selectedMonth && selectedDay) {
-const isoDate = formatDateISO(selectedYear, selectedMonth, selectedDay);
+const isoDate = formatISODay(selectedYear, selectedMonth, selectedDay);
 this._internals.setFormValue(isoDate);
 }
 else {
@@ -482,22 +488,27 @@ this.updateValidity();
 updateValidity() {
 if (!this._internals)
 return;
+const anchor = this.gridCell() ?? undefined;
 const { selectedYear, selectedMonth, selectedDay } = this._state;
 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 }, message());
+const sel = utcMidnight(selectedYear, selectedMonth, selectedDay);
+const min = this._min ? parseDateDay(this._min) : null;
+const max = this._max ? parseDateDay(this._max) : null;
+const message = () => nativeMessage('input', { type: 'date', min: toISODay(this._min) ?? undefined, max: toISODay(this._max) ?? undefined }, formatISODay(selectedYear, selectedMonth, selectedDay));
+if (min && sel < utcMidnight(min.year, min.month, min.day)) {
+this._validity.set({ rangeUnderflow: true }, message(), anchor);
 return;
 }
-if (max && sel > Date.UTC(max.year, max.month - 1, max.day)) {
-this._validity.set({ rangeOverflow: true }, message());
+if (max && sel > utcMidnight(max.year, max.month, max.day)) {
+this._validity.set({ rangeOverflow: true }, message(), anchor);
 return;
 }
 }
-this._validity.set({});
+else if (this.required) {
+this._validity.set({ valueMissing: true }, nativeMessage('input', { type: 'date', required: true }), anchor);
+return;
+}
+this._validity.set({}, undefined, anchor);
 }
 get form() { return this._internals?.form ?? null; }
 get validity() { return this._internals?.validity; }
@@ -547,7 +558,7 @@ this._state.selectedMonth = month;
 this._state.selectedDay = day;
 this._state.displayYear = year;
 this._state.displayMonth = month;
-this.setAttribute('year', year.toString());
+this.setAttribute('year', formatYear(year));
 this.setAttribute('month', month.toString());
 this.setAttribute('day', day.toString());
 this.updateFormValue();
@@ -572,6 +583,7 @@ this.syncChildComponents();
 if (this._monthDisplay && typeof this._monthDisplay.refresh === 'function') {
 this._monthDisplay.refresh();
 }
+this.updateValidity();
 }
 createNavigation() {
 const nav = document.createElement('ty-calendar-navigation');
@@ -607,8 +619,7 @@ month.width = this._width;
 }
 const { selectedYear, selectedMonth, selectedDay } = this._state;
 if (selectedYear && selectedMonth && selectedDay) {
-const date = new Date(selectedYear, selectedMonth - 1, selectedDay);
-month.value = date.getTime();
+month.value = localMidnight(selectedYear, selectedMonth, selectedDay).getTime();
 }
 if (this._dayContentFn) {
 month.dayContentFn = this._dayContentFn;
@@ -617,6 +628,7 @@ if (this._customCSS) {
 month.customCSS = this._customCSS;
 }
 month.addEventListener('day-click', (e) => this.handleDayClick(e));
+month.shadowRoot?.addEventListener('focusin', () => this.updateValidity());
 this._monthDisplay = month;
 return month;
 }
@@ -629,7 +641,23 @@ root.innerHTML = '';
 this._monthGrid = undefined;
 const container = document.createElement('div');
 container.className = 'calendar-container';
+container.tabIndex = -1;
+const press = () => {
+this._pressing = true;
+setTimeout(() => { this._pressing = false; });
+};
+container.addEventListener('pointerdown', press);
+container.addEventListener('mousedown', press);
+container.addEventListener('focus', () => {
+if (this._pressing)
+return;
+queueMicrotask(() => {
+if (this.shadowRoot?.activeElement === container)
+this.gridCell()?.focus();
+});
+});
 container.addEventListener('keydown', (e) => this.handleKeydown(e));
+container.addEventListener('focusin', () => this.updateValidity());
 this._container = container;
 if (!this._hideNavigation) {
 const nav = this.createNavigation();
@@ -640,6 +668,7 @@ container.appendChild(month);
 root.appendChild(container);
 if (this._view === 'months')
 this.showBody();
+this.updateValidity();
 }
 setView(view) {
 if (view === this._view)
@@ -651,6 +680,7 @@ this._view = view;
 if (this._navigation)
 this._navigation.view = view;
 this.showBody();
+this.updateValidity();
 }
 showBody() {
 const container = this._container;
@@ -676,8 +706,8 @@ static monthIndex(year, month) {
 return year * 12 + (month - 1);
 }
 boundIndices() {
-const min = this._min ? parseISODate(this._min) : null;
-const max = this._max ? parseISODate(this._max) : null;
+const min = this._min ? parseDateDay(this._min) : null;
+const max = this._max ? parseDateDay(this._max) : null;
 return {
 minIdx: min ? TyCalendar.monthIndex(min.year, min.month) : null,
 maxIdx: max ? TyCalendar.monthIndex(max.year, max.month) : null,
@@ -742,6 +772,11 @@ this.goTo(month, this._state.displayYear);
 this.focusDayGrid();
 }
 handleKeydown(e) {
+if (e.target === this._container && e.key.startsWith('Arrow')) {
+e.preventDefault();
+this.gridCell()?.focus();
+return;
+}
 if (e.key === 'Escape' && this._view === 'months') {
 e.preventDefault();
 e.stopPropagation();
@@ -777,10 +812,21 @@ requestAnimationFrame(() => {
 this._navigation?.shadowRoot?.querySelector('.nav-title')?.focus();
 });
 }
+gridCell() {
+if (this._view === 'months') {
+return this._monthGrid?.querySelector('.month-cell[tabindex="0"]:not(:disabled)')
+?? this._monthGrid?.querySelector('.month-cell:not(:disabled)')
+?? this._navigation?.shadowRoot?.querySelector('.nav-title')
+?? null;
+}
+const root = this._monthDisplay?.shadowRoot;
+return root?.querySelector('.calendar-day-cell[tabindex="0"]')
+?? root?.querySelector('.calendar-day-cell.selected')
+?? root?.querySelector('.calendar-day-cell')
+?? null;
+}
 focus(options) {
-const cell = this._view === 'months'
-? this._monthGrid?.querySelector('.month-cell[tabindex="0"]')
-: this._monthDisplay?.shadowRoot?.querySelector('.calendar-day-cell[tabindex="0"]');
+const cell = this.gridCell();
 if (cell)
 cell.focus(options);
 else

package/lib/components/checkbox.d.ts

@@ -32,6 +32,8 @@ export interface TyCheckboxElement extends HTMLElement {
  */
 export declare class TyCheckbox extends TyComponent<CheckboxState> implements TyCheckboxElement {
     static formAssociated: boolean;
+    protected static delegatesFocus: boolean;
+    protected static labelClicks: boolean;
     protected static properties: {
         checked: {
             type: "boolean";
@@ -98,6 +100,9 @@ export declare class TyCheckbox extends TyComponent<CheckboxState> implements Ty
     protected getFormValue(): FormDataEntryValue | null;
     private buildClassList;
     private handleCheckboxClick;
+    /** The ring is for keyboard use: keys show it, a click hides it — also a
+     *  <label>'s, which in Chromium focuses the box as :focus-visible. */
+    private showFocusRing;
     private handleCheckboxKeydown;
     private removeEventListeners;
     /**

package/lib/components/checkbox.js

@@ -21,6 +21,9 @@ ensureStyles(shadow, { css: checkboxStyles, id: "ty-checkbox" });
 onConnect() {
 this.setupEventListeners();
 this._syncCustomFlavor();
+const el = this.shadowRoot.querySelector(".checkbox-container");
+if (el && this.shadowRoot.activeElement !== el)
+el.classList.remove("focused");
 }
 _syncCustomFlavor() {
 this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, this.flavor, ({ base }) => checkboxCustomFlavorCss(base));
@@ -47,8 +50,7 @@ return classes.join(" ");
 handleCheckboxClick(e) {
 if (this.disabled)
 return;
-if (this.isDuplicateActivationClick())
-return;
+this.showFocusRing(e instanceof KeyboardEvent);
 const newValue = this.indeterminate ? true : !this.checked;
 if (this.indeterminate)
 this.indeterminate = false;
@@ -72,6 +74,9 @@ composed: true,
 }));
 }, 0);
 }
+showFocusRing(on) {
+this.shadowRoot?.querySelector(".checkbox-container")?.classList.toggle("focused", on);
+}
 handleCheckboxKeydown(e) {
 if (this.disabled)
 return;
@@ -124,7 +129,7 @@ this._keydownHandler = (e) => {
 this.handleCheckboxKeydown(e);
 };
 this._focusHandler = () => {
-checkboxEl.classList.add("focused");
+checkboxEl.classList.toggle("focused", checkboxEl.matches(":focus-visible"));
 };
 this._blurHandler = () => {
 checkboxEl.classList.remove("focused");
@@ -143,7 +148,8 @@ const ariaChecked = this.indeterminate ? "mixed" : String(this.checked);
 if (!checkboxEl) {
 checkboxEl = document.createElement("div");
 checkboxEl.className = "checkbox-container " + classes;
-checkboxEl.tabIndex = this.disabled ? -1 : 0;
+if (!this.disabled)
+checkboxEl.tabIndex = 0;
 checkboxEl.setAttribute("role", "checkbox");
 checkboxEl.setAttribute("aria-checked", ariaChecked);
 checkboxEl.setAttribute("aria-disabled", String(this.disabled));
@@ -154,8 +160,13 @@ checkboxEl.appendChild(checkboxIcon);
 shadow.appendChild(checkboxEl);
 }
 else {
+const focused = checkboxEl.classList.contains("focused") && shadow.activeElement === checkboxEl;
 checkboxEl.className = "checkbox-container " + classes;
-checkboxEl.tabIndex = this.disabled ? -1 : 0;
+checkboxEl.classList.toggle("focused", focused && !this.disabled);
+if (this.disabled)
+checkboxEl.removeAttribute("tabindex");
+else
+checkboxEl.tabIndex = 0;
 checkboxEl.setAttribute("aria-checked", ariaChecked);
 checkboxEl.setAttribute("aria-disabled", String(this.disabled));
 checkboxEl.setAttribute("aria-required", String(this.required));
@@ -239,6 +250,8 @@ return this._internals.form;
 }
 }
 TyCheckbox.formAssociated = true;
+TyCheckbox.delegatesFocus = true;
+TyCheckbox.labelClicks = true;
 TyCheckbox.properties = {
 checked: {
 type: "boolean",

package/lib/components/copy.d.ts

@@ -109,6 +109,8 @@ export declare class TyCopy extends TyComponent<CopyState> implements TyCopyElem
      * Uses state flag so render() can show the correct icon
      */
     private showCopySuccess;
+    /** Feedback over: the copy icon again. */
+    private resetCopyButton;
     /**
      * Show copy error animation
      * Swaps copy icon → red X icon → copy icon

package/lib/components/copy.js

@@ -32,7 +32,7 @@ this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFla
 onDisconnect() {
 if (this._copyTimeout !== null) {
 clearTimeout(this._copyTimeout);
-this._copyTimeout = null;
+this.resetCopyButton();
 }
 }
 onPropertiesChanged(changes) {
@@ -61,15 +61,15 @@ composed: true
 }));
 }
 catch (err) {
-try {
+const focused = this.shadowRoot.activeElement;
 const textarea = document.createElement('textarea');
+try {
 textarea.value = value;
 textarea.style.position = 'fixed';
 textarea.style.opacity = '0';
 document.body.appendChild(textarea);
 textarea.select();
 document.execCommand('copy');
-document.body.removeChild(textarea);
 this.dispatchEvent(new CustomEvent('copy-success', {
 detail: { value },
 bubbles: true,
@@ -86,6 +86,10 @@ composed: true
 this.showCopyError();
 return;
 }
+finally {
+textarea.remove();
+focused?.focus();
+}
 }
 this.showCopySuccess();
 }
@@ -100,16 +104,17 @@ copyButton.classList.add('success');
 copyButton.innerHTML = CHECK_ICON_SVG;
 copyButton.setAttribute('aria-label', 'Copied!');
 }
-this._copyTimeout = window.setTimeout(() => {
+this._copyTimeout = window.setTimeout(() => this.resetCopyButton(), 2000);
+}
+resetCopyButton() {
 this._showingSuccess = false;
 const btn = this.shadowRoot.querySelector('.copy-button');
 if (btn) {
-btn.classList.remove('success');
+btn.classList.remove('success', 'error');
 btn.innerHTML = COPY_ICON_SVG;
 btn.setAttribute('aria-label', 'Copy to clipboard');
 }
 this._copyTimeout = null;
-}, 2000);
 }
 showCopyError() {
 if (this._copyTimeout !== null) {
@@ -122,34 +127,13 @@ copyButton.classList.add('error');
 copyButton.innerHTML = ERROR_ICON_SVG;
 copyButton.setAttribute('aria-label', 'Copy failed');
 }
-this._copyTimeout = window.setTimeout(() => {
-const btn = this.shadowRoot.querySelector('.copy-button');
-if (btn) {
-btn.classList.remove('error');
-btn.innerHTML = COPY_ICON_SVG;
-btn.setAttribute('aria-label', 'Copy to clipboard');
-}
-this._copyTimeout = null;
-}, 2000);
+this._copyTimeout = window.setTimeout(() => this.resetCopyButton(), 2000);
 }
 setupEventListeners() {
-const shadow = this.shadowRoot;
-const inputWrapper = shadow.querySelector('.input-wrapper');
-const copyButton = shadow.querySelector('.copy-button');
+const inputWrapper = this.shadowRoot.querySelector('.input-wrapper');
 if (inputWrapper && !this.disabled) {
-const wrapperEl = inputWrapper;
-wrapperEl.addEventListener('click', (e) => {
-if (e.target === copyButton || e.target.closest('.copy-button')) {
-return;
-}
-this.copyToClipboard();
-});
-wrapperEl.style.cursor = 'pointer';
-}
-if (copyButton) {
-copyButton.addEventListener('click', () => {
-this.copyToClipboard();
-});
+inputWrapper.addEventListener('click', () => this.copyToClipboard());
+inputWrapper.style.cursor = 'pointer';
 }
 }
 render() {

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

@@ -8,22 +8,11 @@ import { type Placement } from '../utils/positioning.js';
 import { TyComponent } from '../base/ty-component.js';
 import type { Flavor } from '../types/common.js';
 import type { PropertyChange } from '../utils/property-manager.js';
-/**
- * Date components (internal representation in local timezone)
- */
-interface DateComponents {
-    year?: number;
-    month?: number;
-    day?: number;
-    hour?: number;
-    minute?: number;
-    second?: number;
-    epoch?: number;
-}
+import { type DateTimeParts } from '../utils/calendar-utils.js';
 /**
  * Internal date picker state
  */
-interface DatePickerState extends DateComponents {
+interface DatePickerState extends DateTimeParts {
     withTime: boolean;
     open: boolean;
 }
@@ -193,14 +182,6 @@ 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
      */
@@ -214,7 +195,6 @@ 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;
@@ -248,7 +228,7 @@ export declare class TyDatePicker extends TyComponent<DatePickerState> {
      */
     get value(): string | null;
     /**
-     * Set value: any format parseValue() reads, a Date, epoch milliseconds,
+     * Set value: any format parseDateTime() 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.
@@ -268,9 +248,10 @@ export declare class TyDatePicker extends TyComponent<DatePickerState> {
     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.
+     * Match the popup calendar to the stub's look: danger while an error
+     * shows, as on the stub (styles: errorLook), else the user's flavor.
+     * 'default' is the stub's own unstyled state, not a real flavor: the
+     * calendar stays on its own default.
      */
     private calendarFlavor;
     /**