tyrell-components 1.0.0-TC53 → 1.0.0-TC55

package/lib/components/calendar-month.js

@@ -387,17 +387,30 @@ const disabledAt = (i) => {
 const v = days[i].value;
 return (minTs !== null && v < minTs) || (maxTs !== null && v > maxTs);
 };
-let defaultIndex = days.findIndex(d => d.isSelected);
+const firstEnabled = (pred) => {
+for (let i = 0; i < 42; i++) {
+if (pred(i) && !disabledAt(i))
+return i;
+}
+return -1;
+};
+let defaultIndex = firstEnabled(i => !!days[i].isSelected);
+let provisional = false;
 if (defaultIndex === -1)
-defaultIndex = days.findIndex(d => d.today);
+defaultIndex = firstEnabled(i => !!days[i].today);
+if (defaultIndex === -1) {
+defaultIndex = firstEnabled(() => true);
+provisional = true;
+}
 if (defaultIndex === -1)
 defaultIndex = 0;
 if (this._focusedIndex === null ||
 this._focusedIndex < 0 ||
 this._focusedIndex > 41 ||
 disabledAt(this._focusedIndex)) {
-this._focusedIndex = defaultIndex;
+this._focusedIndex = provisional ? null : defaultIndex;
 }
+const effectiveFocusedIndex = this._focusedIndex ?? defaultIndex;
 this._cellElements = [];
 let flatIndex = 0;
 dayWeeks.forEach(week => {
@@ -407,7 +420,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 === this._focusedIndex);
+const dayCell = this.renderDayCell(dayContext, disabled, flatIndex === effectiveFocusedIndex);
 dayCell.className = `${dayCell.className} calendar-cell calendar-day-cell`;
 dayRow.appendChild(dayCell);
 this._cellElements[flatIndex] = dayCell;

package/lib/components/calendar.d.ts

@@ -32,7 +32,7 @@ export interface CalendarNavigateDetail {
  */
 export declare class TyCalendar extends HTMLElement {
     private _state;
-    private _showNavigation;
+    private _hideNavigation;
     private _stateless;
     private _size;
     private _width?;
@@ -44,6 +44,7 @@ export declare class TyCalendar extends HTMLElement {
     private _navigation?;
     private _monthDisplay?;
     private _internals?;
+    private _initialValue;
     private _localeObserver?;
     static formAssociated: boolean;
     static get observedAttributes(): string[];
@@ -65,8 +66,8 @@ export declare class TyCalendar extends HTMLElement {
     set day(value: number | undefined);
     get locale(): string;
     set locale(value: string);
-    get showNavigation(): boolean;
-    set showNavigation(value: boolean);
+    get hideNavigation(): boolean;
+    set hideNavigation(value: boolean);
     get stateless(): boolean;
     set stateless(value: boolean);
     get size(): CalendarSize;
@@ -83,6 +84,7 @@ export declare class TyCalendar extends HTMLElement {
      * Initialize state from HTML attributes on first load
      */
     private initializeFromAttributes;
+    formResetCallback(): void;
     private syncStateFromAttributes;
     private syncChildComponents;
     private updateFormValue;

package/lib/components/calendar.js

@@ -37,14 +37,15 @@ return `${year}-${monthStr}-${dayStr}`;
 }
 export class TyCalendar extends HTMLElement {
 static get observedAttributes() {
-return ['value', 'year', 'month', 'day', 'show-navigation', 'stateless', 'locale', 'name', 'size', 'width', 'min', 'max', 'flavor'];
+return ['value', 'year', 'month', 'day', 'hide-navigation', 'stateless', 'locale', 'name', 'size', 'width', 'min', 'max', 'flavor'];
 }
 constructor() {
 super();
-this._showNavigation = true;
+this._hideNavigation = false;
 this._stateless = false;
 this._size = 'md';
 this._flavor = 'primary';
+this._initialValue = '';
 const current = getCurrentDate();
 this._state = {
 displayYear: current.year,
@@ -115,8 +116,8 @@ this.syncStateFromAttributes();
 this.syncChildComponents();
 this.updateFormValue();
 break;
-case 'show-navigation':
-this._showNavigation = newValue !== 'false';
+case 'hide-navigation':
+this._hideNavigation = newValue !== null;
 this.render();
 break;
 case 'stateless':
@@ -256,12 +257,15 @@ return getEffectiveLocale(this, this.getAttribute('locale'));
 set locale(value) {
 this.setAttribute('locale', value);
 }
-get showNavigation() {
-return this._showNavigation;
+get hideNavigation() {
+return this._hideNavigation;
 }
-set showNavigation(value) {
-this._showNavigation = value;
-this.setAttribute('show-navigation', value.toString());
+set hideNavigation(value) {
+this._hideNavigation = value;
+if (value)
+this.setAttribute('hide-navigation', '');
+else
+this.removeAttribute('hide-navigation');
 }
 get stateless() {
 return this._stateless;
@@ -363,7 +367,7 @@ initializeFromAttributes() {
 const yearStr = this.getAttribute('year');
 const monthStr = this.getAttribute('month');
 const dayStr = this.getAttribute('day');
-const showNavStr = this.getAttribute('show-navigation');
+const hideNav = this.hasAttribute('hide-navigation');
 const statelessStr = this.getAttribute('stateless');
 const sizeStr = this.getAttribute('size');
 const widthStr = this.getAttribute('width');
@@ -385,9 +389,7 @@ this._state.selectedMonth = month;
 this._state.selectedDay = day;
 }
 }
-if (showNavStr) {
-this._showNavigation = showNavStr !== 'false';
-}
+this._hideNavigation = hideNav;
 if (statelessStr !== null) {
 this._stateless = statelessStr !== 'false';
 }
@@ -397,6 +399,10 @@ this._size = sizeStr;
 if (widthStr) {
 this._width = widthStr;
 }
+this._initialValue = this.value;
+}
+formResetCallback() {
+this.value = this._initialValue;
 }
 syncStateFromAttributes() {
 const yearStr = this.getAttribute('year');
@@ -611,7 +617,7 @@ ensureStyles(root, { css: calendarStyles, id: 'ty-calendar' });
 root.innerHTML = '';
 const container = document.createElement('div');
 container.className = 'calendar-container';
-if (this._showNavigation) {
+if (!this._hideNavigation) {
 const nav = this.createNavigation();
 container.appendChild(nav);
 }

package/lib/components/copy.js

@@ -45,10 +45,11 @@ return classes.join(' ');
 async copyToClipboard() {
 if (this.disabled || !this.value)
 return;
+const value = this.value;
 try {
-await navigator.clipboard.writeText(this.value);
+await navigator.clipboard.writeText(value);
 this.dispatchEvent(new CustomEvent('copy-success', {
-detail: { value: this.value },
+detail: { value },
 bubbles: true,
 composed: true
 }));
@@ -56,7 +57,7 @@ composed: true
 catch (err) {
 try {
 const textarea = document.createElement('textarea');
-textarea.value = this.value;
+textarea.value = value;
 textarea.style.position = 'fixed';
 textarea.style.opacity = '0';
 document.body.appendChild(textarea);
@@ -64,7 +65,7 @@ textarea.select();
 document.execCommand('copy');
 document.body.removeChild(textarea);
 this.dispatchEvent(new CustomEvent('copy-success', {
-detail: { value: this.value },
+detail: { value },
 bubbles: true,
 composed: true
 }));

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

@@ -168,6 +168,13 @@ export declare class TyDatePicker extends TyComponent<DatePickerState> {
      * Compares before setting to prevent circular triggers
      */
     private syncFormValue;
+    /**
+     * Reflect constraint validation to the owning <form> via ElementInternals.
+     * Without this `required` is only cosmetic — unlike ty-input/ty-select/
+     * ty-calendar, which all call setValidity, an empty required date-picker
+     * never blocks form submission.
+     */
+    private updateValidity;
     /**
      * Handle time input changes from TimeInput class
      */

package/lib/components/date-picker.js

@@ -381,6 +381,7 @@ withTime: this._state.withTime,
 open: this._state.open,
 };
 }
+this.syncFormValue();
 break;
 }
 const currentComponents = {
@@ -400,6 +401,7 @@ this._state = {
 ...this._state,
 ...newComponents,
 };
+this.syncFormValue();
 }
 break;
 }
@@ -479,6 +481,18 @@ this.setProperty('value', null);
 }
 }
 }
+updateValidity() {
+if (this.disabled) {
+this._internals.setValidity({});
+return;
+}
+if (this.required && !this.value) {
+this._internals.setValidity({ valueMissing: true }, 'Please fill out this field');
+}
+else {
+this._internals.setValidity({});
+}
+}
 handleTimeInputChange(hour, minute) {
 if (!this.hasDate())
 return;
@@ -797,6 +811,7 @@ return container;
 render() {
 if (!this.shadowRoot)
 return;
+this.updateValidity();
 ensureStyles(this.shadowRoot, { css: datePickerStyles, id: 'ty-date-picker' });
 if (isMobileTouch()) {
 const existingNativeInput = this.shadowRoot.querySelector('.native-date-input');
@@ -864,6 +879,16 @@ if (flavor && flavor !== 'default')
 calendar.setAttribute('flavor', flavor);
 else
 calendar.removeAttribute('flavor');
+const min = this.getProperty('min');
+const max = this.getProperty('max');
+if (min)
+calendar.setAttribute('min', min);
+else
+calendar.removeAttribute('min');
+if (max)
+calendar.setAttribute('max', max);
+else
+calendar.removeAttribute('max');
 }
 if (this._timeInput && this._state.hour !== undefined && this._state.minute !== undefined) {
 this._timeInput.setTime(this._state.hour, this._state.minute);

package/lib/components/option.js

@@ -23,7 +23,7 @@ return ['value', 'disabled', 'selected', 'highlighted', 'hidden'];
 }
 connectedCallback() {
 const instanceValue = Object.getOwnPropertyDescriptor(this, 'value');
-if (instanceValue && instanceValue.value !== undefined) {
+if (instanceValue) {
 this._value = instanceValue.value;
 delete this.value;
 }

package/lib/components/scroll-container.js

@@ -170,18 +170,16 @@ this._contentObserver = new MutationObserver((records) => {
 const wrap = this._scrollWrapper;
 if (!wrap)
 return;
-const wrapTop = wrap.getBoundingClientRect().top;
-let addedAbove = 0;
-for (const r of records) {
-r.addedNodes.forEach((n) => {
-if (n.nodeType !== Node.ELEMENT_NODE)
+const added = new Set();
+for (const r of records)
+r.addedNodes.forEach((n) => added.add(n));
+if (added.size === 0)
 return;
-const rect = n.getBoundingClientRect();
-if (rect.bottom <= wrapTop)
-addedAbove += rect.height;
-else if (rect.top < wrapTop)
-addedAbove += wrapTop - rect.top;
-});
+let addedAbove = 0;
+for (const child of Array.from(this.children)) {
+if (!added.has(child))
+break;
+addedAbove += child.offsetHeight;
 }
 if (addedAbove > 0) {
 wrap.scrollTop += addedAbove;

package/lib/components/select.d.ts

@@ -106,11 +106,10 @@ export declare class TySelect extends TyComponent<SelectState> {
             };
             coerce: (v: any) => "none" | "slug";
         };
-        searchable: {
-            type: "string";
+        notSearchable: {
+            type: "boolean";
             visual: boolean;
-            default: string;
-            coerce: (v: any) => "auto" | "always" | "never";
+            default: boolean;
         };
         align: {
             type: "string";
@@ -142,6 +141,11 @@ export declare class TySelect extends TyComponent<SelectState> {
             visual: boolean;
             default: string;
         };
+        "selected-label": {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
         "no-options-message": {
             type: "string";
             visual: boolean;
@@ -170,11 +174,12 @@ export declare class TySelect extends TyComponent<SelectState> {
     private _externalSearch;
     private _allowCreate;
     private _createTransform;
-    private _searchable;
+    private _notSearchable;
     private _loading;
     private _scrollLockId;
     private _size;
     private _availableLabel;
+    private _selectedLabel;
     private _noOptionsMessage;
     private _state;
     private _stubClickHandler;
@@ -208,6 +213,29 @@ export declare class TySelect extends TyComponent<SelectState> {
     private parseValue;
     /** Initialize component state from the value property / pre-selected children. */
     private initializeState;
+    /**
+     * Declarative init: no `value` attribute, but markup pre-marked one or more
+     * options `selected` — native <select> semantics. This is the ONE place
+     * selection is read FROM the DOM rather than treated as a rendering of
+     * state (see getSelectedValues()): it seeds initial state, once. After
+     * this, `value` rules — flipping an option's `selected` property later
+     * does nothing, same as native.
+     *
+     * Called from initializeState() at connect AND from the child observer:
+     * a real HTML parser upgrades a custom element the moment its start tag is
+     * seen, BEFORE its children exist — `<ty-select>` connects with zero
+     * `<ty-option>` children when it's part of the page's own markup (as
+     * opposed to an already-built fragment attached via innerHTML/appendChild,
+     * where children exist at connect). Calling this only at connect would
+     * silently miss every option parsed after that instant, which is the
+     * common case for markup that is literally in the page's initial HTML.
+     *
+     * Safe to call repeatedly: no-ops once `value` has ever been explicitly
+     * set (attribute or property) or state is already non-empty — including
+     * after a real `.clear()`, which removes `selected` from every option via
+     * syncSelectedTags, so there is nothing left here to (re-)seed from.
+     */
+    private resolveDeclarativeSelection;
     /**
      * Get all option elements from the component (ty-option preferred, ty-tag accepted)
      */
@@ -223,7 +251,15 @@ export declare class TySelect extends TyComponent<SelectState> {
      */
     private deselectTag;
     /**
-     * Get array of currently selected values from tags (ALWAYS reads from DOM)
+     * Get the array of currently selected values.
+     *
+     * Reads STATE (`_state.selectedValues`), not the DOM: `value` is the
+     * selection, and an option's `selected` attribute is a rendering of it
+     * (written by syncSelectedTags below), never the other way round. This
+     * matters whenever options don't fully reflect the selection — external
+     * search legitimately has a selected value with no matching option
+     * present; a DOM scan would report empty and desync .value, `required`
+     * validation and the click-toggle logic from what's actually selected.
      */
     private getSelectedValues;
     private syncSelectedTags;
@@ -299,6 +335,13 @@ export declare class TySelect extends TyComponent<SelectState> {
     private blockSearchClick;
     private handleSearchInput;
     private handleKeyboard;
+    /**
+     * Next tag index in `direction` (-1/1) that isn't disabled, wrapping
+     * around — mirrors handleTagClick's disabled check so keyboard nav can
+     * never land on/select what a click already refuses to. Returns -1 if
+     * every tag is disabled (or there are none).
+     */
+    private nextEnabledTagIndex;
     private filterTags;
     private updateTagVisibility;
     private updateOptionsVisibility;
@@ -340,9 +383,25 @@ export declare class TySelect extends TyComponent<SelectState> {
     private handleMobileTagClick;
     private updateMobileSelectedState;
     /**
-     * Should the popup show a search row? external-search always (the input is
-     * the mechanism); searchable always/never wins otherwise; 'auto' shows it
-     * only when the option list is long enough to need filtering.
+     * Hand the dialog's spare vertical space to one section or the other. Only
+     * one can own it: on a phone there isn't enough height for two scrollable
+     * lists to both be usefully tall, so tapping a header trades the space
+     * rather than splitting it. Selecting from the list hands it back to
+     * "available" — you're still picking, so that's the list you want open.
+     */
+    private expandMobileSection;
+    /**
+     * The selected values as dismissible chips, pinned above the available
+     * list so a long list can never scroll the current selection out of sight.
+     * Rebuilt wholesale: the strip is small, and diffing it would have to
+     * track chip identity for the sake of a handful of nodes.
+     */
+    private renderMobileSelectedChips;
+    /**
+     * Should the popup show a search row? external-search/allow-create pin it
+     * on (the input is the only way to get a query out at all), not-searchable
+     * forces it off, and otherwise it follows the list: shown once there are
+     * more options than fit without scrolling.
      */
     private shouldShowSearch;
     /**
@@ -400,8 +459,8 @@ export declare class TySelect extends TyComponent<SelectState> {
     set clearable(value: boolean);
     get required(): boolean;
     set required(value: boolean);
-    get searchable(): "auto" | "always" | "never";
-    set searchable(value: "auto" | "always" | "never" | boolean);
+    get notSearchable(): boolean;
+    set notSearchable(value: boolean);
     get externalSearch(): boolean;
     set externalSearch(value: boolean);
     get debounce(): number;