tyrell-components 1.0.0-TC57 → 1.0.0-TC59

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

@@ -9,17 +9,28 @@
  * - 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
  */
 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;
     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
@@ -55,11 +66,14 @@ 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;
     /**
-     * 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
@@ -137,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.
@@ -157,6 +159,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,18 +1,47 @@
 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._handlingActivationClick = false;
+this._userEdited = 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() {
@@ -81,7 +110,6 @@ this._handlePropertyChanges([change]);
 }
 }
 connectedCallback() {
-this._connected = true;
 if (!this._resetDefaults) {
 this._resetDefaults = new Map();
 const ctor = this.constructor;
@@ -92,10 +120,10 @@ 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;
+if (this._validates)
+this._validity.track();
 this.onConnect();
 if (!this._rendered) {
 this.render();
@@ -104,21 +132,28 @@ this._rendered = true;
 }
 disconnectedCallback() {
 this._connected = false;
+if (this._validates)
+this._validity.track();
 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);
-}
+formAssociatedCallback() {
+if (this._validates)
+this._validity.track();
 }
+_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)
@@ -212,14 +247,10 @@ 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)
+this._validity.reset();
 for (const [name, def] of this._resetDefaults ?? []) {
 this.setProperty(name, def);
 }
@@ -230,3 +261,5 @@ onFormReset() {
 }
 TyComponent.formAssociated = true;
 TyComponent.properties = {};
+TyComponent.delegatesFocus = false;
+TyComponent.labelClicks = false;

package/lib/components/button.d.ts

@@ -89,11 +89,25 @@ export declare class TyButton extends TyComponent<ButtonState> implements TyButt
         };
     };
     private _structureInitialized;
+    private _formDisabled;
     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,12 +4,37 @@ 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();
 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();
+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();
@@ -20,6 +45,21 @@ 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;
+}
+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));
@@ -118,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)
@@ -136,7 +176,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 +195,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 +220,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 +239,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.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

@@ -1,7 +1,8 @@
 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();
@@ -24,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 === '')
@@ -44,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;
@@ -53,6 +53,7 @@ const today = new Date();
 this._displayYear = today.getFullYear();
 this._displayMonth = today.getMonth() + 1;
 this.attachShadow({ mode: 'open' });
+liftProperties(this);
 }
 connectedCallback() {
 if (!this._displayMonth) {
@@ -62,23 +63,15 @@ 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')) {
 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, () => {
+if (!this._locale)
 this.render();
 });
 this._syncCustomFlavor();
@@ -102,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') {
@@ -143,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();
 }
 }
@@ -239,6 +232,7 @@ set value(timestamp) {
 const newValue = timestamp ?? undefined;
 if (this._value !== newValue) {
 this._value = newValue;
+this._focusedIndex = null;
 this.render();
 }
 }
@@ -276,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,
@@ -297,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)
@@ -319,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');
@@ -331,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);
 }
 });
 }
@@ -351,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(),
@@ -360,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');
@@ -421,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;
@@ -452,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',