tyrell-components 1.0.0-TC47 → 1.0.0-TC49

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

@@ -132,9 +132,14 @@ export declare abstract class TyComponent<T = any> extends HTMLElement {
      * two genuinely separate clicks are always in different tasks.
      */
     protected isDuplicateActivationClick(): boolean;
-    /**
-     * Form reset callback - called when form.reset() is invoked
-     * Resets component to its default value
+    private _resetDefaults;
+    /**
+     * Form reset callback - called when form.reset() is invoked.
+     * Restores every formValue-bearing property to its attribute-declared
+     * default captured at first connect (native defaultValue/defaultChecked
+     * 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.
      */
     formResetCallback(): void;
     /**

package/lib/base/ty-component.js

@@ -5,6 +5,7 @@ export class TyComponent extends HTMLElement {
         this._connected = false;
         this._rendered = false;
         this._handlingActivationClick = false;
+        this._resetDefaults = null;
         const ctor = this.constructor;
         this.props = new PropertyManager(ctor.properties);
         this._internals = this.attachInternals();
@@ -79,6 +80,16 @@ export class TyComponent extends HTMLElement {
     }
     connectedCallback() {
         this._connected = true;
+        if (!this._resetDefaults) {
+            this._resetDefaults = new Map();
+            const ctor = this.constructor;
+            for (const [name, config] of Object.entries(ctor.properties)) {
+                if (!config.formValue)
+                    continue;
+                const attr = this.getAttribute(this._toKebabCase(name));
+                this._resetDefaults.set(name, attr ?? config.default ?? null);
+            }
+        }
         const preSetProps = this._capturePreSetProperties();
         if (preSetProps.length > 0) {
             this._handlePropertyChanges(preSetProps);
@@ -178,11 +189,8 @@ export class TyComponent extends HTMLElement {
         return false;
     }
     formResetCallback() {
-        const ctor = this.constructor;
-        const valueConfig = ctor.properties['value'];
-        if (valueConfig) {
-            const defaultValue = valueConfig.default ?? '';
-            this.setProperty('value', defaultValue);
+        for (const [name, def] of this._resetDefaults ?? []) {
+            this.setProperty(name, def);
         }
         this.onFormReset();
     }

package/lib/components/date-picker.js

@@ -980,10 +980,7 @@ export class TyDatePicker extends TyComponent {
         if (isMobileTouch())
             return;
         this.updateState({ open: true });
-        this.dispatchEvent(new CustomEvent('open', {
-            bubbles: true,
-            composed: true
-        }));
+        this.dispatchEvent(new CustomEvent('open'));
         this.render();
         requestAnimationFrame(() => {
             if (!this.shadowRoot)
@@ -1022,10 +1019,7 @@ export class TyDatePicker extends TyComponent {
             if (stubEl)
                 stubEl.setAttribute('aria-expanded', 'false');
         }
-        this.dispatchEvent(new CustomEvent('close', {
-            bubbles: true,
-            composed: true
-        }));
+        this.dispatchEvent(new CustomEvent('close'));
         this.render();
     }
     cleanup() {

package/lib/components/file-upload.d.ts

@@ -80,6 +80,12 @@ export declare class TyFileUpload extends TyComponent<FileUploadState> implement
     protected onPropertiesChanged(_changes: PropertyChange[]): void;
     protected onFormReset(): void;
     protected getFormValue(): FormData | string | null;
+    /**
+     * Match a file against the `accept` attribute the way native inputs do:
+     * comma-separated list of `.ext`, `type/subtype` or `type/*` entries.
+     * No/blank accept matches everything.
+     */
+    private matchesAccept;
     get files(): File[];
     get multiple(): boolean;
     set multiple(v: boolean);

package/lib/components/file-upload.js

@@ -44,15 +44,30 @@ export class TyFileUpload extends TyComponent {
             fileInput.value = "";
     }
     getFormValue() {
-        if (this._files.length === 0)
+        if (this._files.length === 0 || !this.name)
             return null;
         const fd = new FormData();
-        const fieldName = this.name || "files";
         for (const file of this._files) {
-            fd.append(fieldName, file);
+            fd.append(this.name, file);
         }
         return fd;
     }
+    matchesAccept(file) {
+        const accept = this.accept?.trim();
+        if (!accept)
+            return true;
+        return accept.split(",").some((raw) => {
+            const entry = raw.trim().toLowerCase();
+            if (!entry)
+                return false;
+            if (entry.startsWith("."))
+                return file.name.toLowerCase().endsWith(entry);
+            const type = file.type.toLowerCase();
+            if (entry.endsWith("/*"))
+                return type.startsWith(entry.slice(0, -1));
+            return type === entry;
+        });
+    }
     get files() {
         return [...this._files];
     }
@@ -178,7 +193,7 @@ export class TyFileUpload extends TyComponent {
             e.stopPropagation();
             this._isDragging = false;
             dropZone.classList.remove("drag-active");
-            const files = Array.from(e.dataTransfer?.files ?? []);
+            const files = Array.from(e.dataTransfer?.files ?? []).filter((f) => this.matchesAccept(f));
             if (files.length > 0)
                 this.setFiles(files);
         };

package/lib/components/input.js

@@ -81,6 +81,7 @@ export class TyInput extends TyComponent {
     }
     onFormReset() {
         this._shadowValue = null;
+        this.initializeShadowValue();
         this._isFocused = false;
         if (this._inputDebounceTimer !== null) {
             clearTimeout(this._inputDebounceTimer);

package/lib/components/modal.d.ts

@@ -48,6 +48,18 @@ export declare class TyModal extends HTMLElement {
         force?: boolean;
     }) => void;
     static get observedAttributes(): string[];
+    get open(): boolean;
+    set open(v: boolean);
+    get backdrop(): boolean;
+    set backdrop(v: boolean);
+    get closeOnOutsideClick(): boolean;
+    set closeOnOutsideClick(v: boolean);
+    get closeOnEscape(): boolean;
+    set closeOnEscape(v: boolean);
+    get preventOutsideClick(): boolean;
+    set preventOutsideClick(v: boolean);
+    get preventEscape(): boolean;
+    set preventEscape(v: boolean);
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;

package/lib/components/modal.js

@@ -7,6 +7,7 @@ const closeButtonHandlers = new WeakMap();
 const hoverEnterHandlers = new WeakMap();
 const hoverLeaveHandlers = new WeakMap();
 const modalIds = new WeakMap();
+const pendingCloseReasons = new WeakMap();
 const CLOSE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`;
 function parseBoolAttr(el, name) {
     if (!el.hasAttribute(name)) {
@@ -22,12 +23,16 @@ function getModalAttributes(el) {
     return {
         open: parseBoolAttr(el, 'open'),
         backdrop: el.hasAttribute('backdrop') ? parseBoolAttr(el, 'backdrop') : true,
-        closeOnOutsideClick: el.hasAttribute('close-on-outside-click')
-            ? parseBoolAttr(el, 'close-on-outside-click')
-            : true,
-        closeOnEscape: el.hasAttribute('close-on-escape')
-            ? parseBoolAttr(el, 'close-on-escape')
-            : true,
+        closeOnOutsideClick: parseBoolAttr(el, 'prevent-outside-click')
+            ? false
+            : el.hasAttribute('close-on-outside-click')
+                ? parseBoolAttr(el, 'close-on-outside-click')
+                : true,
+        closeOnEscape: parseBoolAttr(el, 'prevent-escape')
+            ? false
+            : el.hasAttribute('close-on-escape')
+                ? parseBoolAttr(el, 'close-on-escape')
+                : true,
     };
 }
 function getModalDialog(shadowRoot) {
@@ -47,7 +52,6 @@ function isMobile() {
 function dispatchModalEvent(el, eventType, detail) {
     const event = new CustomEvent(eventType, {
         detail,
-        bubbles: true,
         cancelable: true,
     });
     el.dispatchEvent(event);
@@ -80,14 +84,13 @@ function closeModal(el, reason = 'programmatic', opts) {
     if (!opts?.force) {
         const beforeClose = new CustomEvent('beforeclose', {
             detail: { reason },
-            bubbles: true,
-            composed: true,
             cancelable: true,
         });
         el.dispatchEvent(beforeClose);
         if (beforeClose.defaultPrevented)
             return;
     }
+    pendingCloseReasons.set(el, reason);
     el.removeAttribute('open');
 }
 function openModal(el) {
@@ -157,6 +160,14 @@ function setupEscapeKey(el, dialog, enabled) {
         escapeKeyHandlers.set(el, handler);
         dialog.addEventListener('keydown', handler);
     }
+    else {
+        const handler = (e) => {
+            if (e.key === 'Escape')
+                e.preventDefault();
+        };
+        escapeKeyHandlers.set(el, handler);
+        dialog.addEventListener('keydown', handler);
+    }
 }
 function setupCloseButton(el, dialog, showButton) {
     const closeButton = dialog.querySelector('.close-button');
@@ -226,6 +237,11 @@ function render(el) {
     }
     setupBackdropClick(el, dialog, attributes.closeOnOutsideClick);
     setupEscapeKey(el, dialog, attributes.closeOnEscape);
+    dialog.oncancel = (event) => {
+        event.preventDefault();
+        if (getModalAttributes(el).closeOnEscape)
+            closeModal(el, 'escape');
+    };
     setupCloseButton(el, dialog, attributes.closeOnOutsideClick);
     setupCloseButtonHover(el, dialog);
     if (attributes.open) {
@@ -237,6 +253,7 @@ function render(el) {
             else {
                 dialog.show();
             }
+            syncBackdropZoom();
             dispatchModalEvent(el, 'open', {});
         }
     }
@@ -244,9 +261,10 @@ function render(el) {
         if (dialog.open) {
             unlockScroll(modalId);
             dialog.close();
-            dispatchModalEvent(el, 'close', {
-                reason: 'programmatic'
-            });
+            syncBackdropZoom();
+            const reason = pendingCloseReasons.get(el) ?? 'programmatic';
+            pendingCloseReasons.delete(el);
+            dispatchModalEvent(el, 'close', { reason });
         }
     }
     dialog.onclose = (event) => {
@@ -260,8 +278,16 @@ function render(el) {
                 returnValue: dialog.returnValue || undefined
             });
         }
+        syncBackdropZoom();
     };
 }
+function syncBackdropZoom() {
+    const anyOpen = Array.from(document.querySelectorAll('ty-modal[open][backdrop-zoom], ty-dialog[open][backdrop-zoom]')).some((m) => {
+        const v = m.getAttribute('backdrop-zoom').toLowerCase().trim();
+        return v !== 'false' && v !== '0';
+    });
+    document.documentElement.classList.toggle('ty-modal-zoom', anyOpen);
+}
 function cleanup(el) {
     const modalId = modalIds.get(el);
     const shadowRoot = el.shadowRoot;
@@ -270,6 +296,7 @@ function cleanup(el) {
         unlockScroll(modalId);
         modalIds.delete(el);
     }
+    syncBackdropZoom();
     if (!dialog)
         return;
     const backdropHandler = backdropClickHandlers.get(el);
@@ -306,7 +333,23 @@ function cleanup(el) {
 }
 export class TyModal extends HTMLElement {
     static get observedAttributes() {
-        return ['open', 'backdrop', 'close-on-outside-click', 'close-on-escape', 'label'];
+        return ['open', 'backdrop', 'close-on-outside-click', 'close-on-escape', 'prevent-outside-click', 'prevent-escape', 'label'];
+    }
+    get open() { return parseBoolAttr(this, 'open'); }
+    set open(v) { v ? this.setAttribute('open', 'true') : this.removeAttribute('open'); }
+    get backdrop() { return getModalAttributes(this).backdrop; }
+    set backdrop(v) { this.setAttribute('backdrop', String(!!v)); }
+    get closeOnOutsideClick() { return getModalAttributes(this).closeOnOutsideClick; }
+    set closeOnOutsideClick(v) { this.setAttribute('close-on-outside-click', String(!!v)); }
+    get closeOnEscape() { return getModalAttributes(this).closeOnEscape; }
+    set closeOnEscape(v) { this.setAttribute('close-on-escape', String(!!v)); }
+    get preventOutsideClick() { return parseBoolAttr(this, 'prevent-outside-click'); }
+    set preventOutsideClick(v) {
+        v ? this.setAttribute('prevent-outside-click', '') : this.removeAttribute('prevent-outside-click');
+    }
+    get preventEscape() { return parseBoolAttr(this, 'prevent-escape'); }
+    set preventEscape(v) {
+        v ? this.setAttribute('prevent-escape', '') : this.removeAttribute('prevent-escape');
     }
     constructor() {
         super();

package/lib/components/popup.js

@@ -58,6 +58,7 @@ function updatePosition(el) {
     });
     el.style.setProperty('--popup-x', `${positionData.x}px`);
     el.style.setProperty('--popup-y', `${positionData.y}px`);
+    dialog.dataset.side = positionData.placement.split('-')[0];
     dialog.classList.add('position-calculated');
 }
 function closePopup(el, force = false) {
@@ -76,8 +77,7 @@ function closePopup(el, force = false) {
     setTimeout(() => {
         dialog.classList.remove('position-calculated');
         dialog.close();
-    }, 150);
-    el.dispatchEvent(new CustomEvent('close', { bubbles: true }));
+    }, 200);
 }
 function openPopup(el) {
     const popupId = getPopupId(el);
@@ -95,7 +95,7 @@ function openPopup(el) {
         dialog.classList.add('preparing-animation');
         requestAnimationFrame(() => {
             dialog.classList.add('open');
-            el.dispatchEvent(new CustomEvent('open', { bubbles: true }));
+            el.dispatchEvent(new CustomEvent('open'));
         });
     });
 }
@@ -211,7 +211,7 @@ function render(el) {
             unlockScroll(popupId);
             dialog.classList.remove('open');
             dialog.classList.remove('preparing-animation');
-            el.dispatchEvent(new CustomEvent('close', { bubbles: true }));
+            el.dispatchEvent(new CustomEvent('close'));
         });
     }
     el.closePopup = () => closePopup(el, true);

package/lib/components/radio.js

@@ -176,8 +176,16 @@ export class TyRadioGroup extends TyComponent {
         const radios = this.getRadios();
         for (const radio of radios) {
             radio.checked = radio.value === this.value;
-            if (this.disabled)
-                radio.disabled = true;
+            if (this.disabled) {
+                if (!radio.disabled) {
+                    radio.disabled = true;
+                    radio.dataset.tyGroupDisabled = "";
+                }
+            }
+            else if ("tyGroupDisabled" in radio.dataset) {
+                radio.disabled = false;
+                delete radio.dataset.tyGroupDisabled;
+            }
             radio.size = this.size;
             radio.flavor = this.flavor;
         }

package/lib/components/resize-observer.d.ts

@@ -13,6 +13,7 @@ export declare class TyResizeObserver extends HTMLElement {
     set debounce(value: number);
     constructor();
     connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     disconnectedCallback(): void;
     private setupObserver;
     private handleResize;

package/lib/components/resize-observer.js

@@ -22,6 +22,15 @@ export class TyResizeObserver extends HTMLElement {
     connectedCallback() {
         this.setupObserver();
     }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'id' && oldValue && oldValue !== newValue) {
+            removeSize(oldValue);
+            if (newValue && this.isConnected) {
+                const { width, height } = this.getBoundingClientRect();
+                updateSize(newValue, width, height);
+            }
+        }
+    }
     disconnectedCallback() {
         this.cleanup();
     }
@@ -60,4 +69,6 @@ export class TyResizeObserver extends HTMLElement {
         }
     }
 }
-customElements.define('ty-resize-observer', TyResizeObserver);
+if (!customElements.get('ty-resize-observer')) {
+    customElements.define('ty-resize-observer', TyResizeObserver);
+}

package/lib/components/select.js

@@ -379,6 +379,7 @@ export class TySelect extends TyComponent {
             popupHeight: estimatedHeight,
             align: anchored.align,
             side: anchored.side,
+            gap: 8,
         });
         const positionBelow = pos.below;
         const x = pos.x - wrapPadding;
@@ -436,8 +437,8 @@ export class TySelect extends TyComponent {
         this._scrollLockId = lockId;
         lockScroll(lockId);
         dialog.showModal();
-        dialog.classList.add("open");
         this.calculatePosition();
+        dialog.classList.add("open");
         this._state.open = true;
         const chevron = shadow.querySelector(".dropdown-chevron");
         if (chevron)
@@ -516,6 +517,7 @@ export class TySelect extends TyComponent {
         this._scrollLockId = lockId;
         lockScroll(lockId);
         dialog.showModal();
+        dialog.getBoundingClientRect();
         dialog.classList.add("open");
         this._state.open = true;
         const tags = this.getTagElements().map((el) => this.getTagData(el));
@@ -845,8 +847,6 @@ export class TySelect extends TyComponent {
     fireOpenEvent() {
         this.dispatchEvent(new CustomEvent("open", {
             detail: { mode: this._state.mode, element: this },
-            bubbles: true,
-            composed: true,
         }));
         if (this._externalSearch) {
             this.fireSearchEvent("");
@@ -855,8 +855,6 @@ export class TySelect extends TyComponent {
     fireCloseEvent() {
         this.dispatchEvent(new CustomEvent("close", {
             detail: { mode: this._state.mode, element: this },
-            bubbles: true,
-            composed: true,
         }));
     }
     dispatchChangeEvent(detail) {

package/lib/components/selected-tags.js

@@ -105,7 +105,7 @@ export class TySelectedOptions extends HTMLElement {
         return ctx;
     }
     templateSource(template) {
-        if (template.content.firstElementChild)
+        if (template.content.hasChildNodes())
             return template.content;
         const frag = document.createDocumentFragment();
         template.childNodes.forEach(n => frag.appendChild(n.cloneNode(true)));

package/lib/components/tabs.d.ts

@@ -27,6 +27,8 @@ export interface TabChangeDetail {
 export declare class TyTabs extends HTMLElement {
     static get observedAttributes(): string[];
     constructor();
+    private _childObserver;
+    private _childRenderQueued;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;

package/lib/components/tabs.js

@@ -515,12 +515,27 @@ export class TyTabs extends HTMLElement {
     }
     constructor() {
         super();
+        this._childObserver = null;
+        this._childRenderQueued = false;
         this.attachShadow({ mode: 'open' });
     }
     connectedCallback() {
         render(this);
+        this._childObserver = new MutationObserver(() => {
+            if (this._childRenderQueued)
+                return;
+            this._childRenderQueued = true;
+            queueMicrotask(() => {
+                this._childRenderQueued = false;
+                if (this.isConnected)
+                    render(this);
+            });
+        });
+        this._childObserver.observe(this, { childList: true });
     }
     disconnectedCallback() {
+        this._childObserver?.disconnect();
+        this._childObserver = null;
         cleanup(this);
     }
     attributeChangedCallback(name, oldValue, newValue) {

package/lib/components/tooltip.js

@@ -57,7 +57,28 @@ function removeDescribedBy(anchor, id) {
         anchor.removeAttribute('aria-describedby');
     }
 }
+function ensureTooltipMotionStyles() {
+    if (document.getElementById('ty-tooltip-motion'))
+        return;
+    const style = document.createElement('style');
+    style.id = 'ty-tooltip-motion';
+    style.textContent = `
+.ty-tooltip-popover:popover-open {
+  transition:
+    opacity var(--ty-tooltip-duration, 120ms) ease-out,
+    translate var(--ty-tooltip-duration, 120ms) ease-out;
+}
+@starting-style {
+  .ty-tooltip-popover:popover-open { opacity: 0; translate: 0 4px; }
+  .ty-tooltip-popover:popover-open[data-side="bottom"] { translate: 0 -4px; }
+  .ty-tooltip-popover:popover-open[data-side="left"] { translate: 4px 0; }
+  .ty-tooltip-popover:popover-open[data-side="right"] { translate: -4px 0; }
+}
+`;
+    document.head.appendChild(style);
+}
 function getOrCreatePopover(el) {
+    ensureTooltipMotionStyles();
     let popover = popoverElements.get(el);
     if (!popover) {
         popover = document.createElement('div');
@@ -143,6 +164,7 @@ function updatePosition(el) {
     });
     popover.style.left = `${position.x}px`;
     popover.style.top = `${position.y}px`;
+    popover.dataset.side = position.placement.split('-')[0];
 }
 function cleanupAutoUpdate(el) {
     const cleanup = autoUpdateCleanup.get(el);

package/lib/components/wizard.d.ts

@@ -30,6 +30,8 @@ export interface WizardStepChangeDetail {
 export declare class TyWizard extends HTMLElement {
     static get observedAttributes(): string[];
     constructor();
+    private _childObserver;
+    private _childRenderQueued;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;

package/lib/components/wizard.js

@@ -399,12 +399,27 @@ export class TyWizard extends HTMLElement {
     }
     constructor() {
         super();
+        this._childObserver = null;
+        this._childRenderQueued = false;
         this.attachShadow({ mode: 'open' });
     }
     connectedCallback() {
         render(this);
+        this._childObserver = new MutationObserver(() => {
+            if (this._childRenderQueued)
+                return;
+            this._childRenderQueued = true;
+            queueMicrotask(() => {
+                this._childRenderQueued = false;
+                if (this.isConnected)
+                    render(this);
+            });
+        });
+        this._childObserver.observe(this, { childList: true });
     }
     disconnectedCallback() {
+        this._childObserver?.disconnect();
+        this._childObserver = null;
         cleanup(this);
     }
     attributeChangedCallback(name, oldValue, newValue) {

package/lib/styles/button.js

@@ -8,7 +8,7 @@ const solidFlavor = (f, fb) => {
     const solid = (suffix) => tokenRef('--ty-solid', f, suffix, fb);
     const borderL = f === 'neutral'
         ? ' --_border-l: var(--ty-button-border-l-neutral, var(--ty-button-border-l, -0.15));'
-        : ' --_border-l: var(--ty-button-border-l, -0.15);';
+        : ' --_border-l: var(--_muted-border-l, var(--ty-button-border-l, -0.15));';
     const plusNudge = f === 'neutral' ? nudgedMid : nudged;
     return `
 button.solid.${f} { --_ring: ${tokenRef('--ty-color', f, '', fb)}; --_solid-bg: var(--ty-button-bg, var(--_muted-solid-bg, ${solid('')})); --_solid-rest: var(--ty-button-bg, var(--_muted-solid-bg, ${solid('')}));${borderL} color: var(--ty-button-color, var(--_muted-solid-fg, ${solid('-fg')})); }
@@ -288,6 +288,7 @@ button.muted {
   --_muted-solid-fg: var(--ty-solid-neutral-fg);
   --_muted-outlined-line: var(--ty-color-neutral);
   --_muted-ghost-fg: var(--ty-color-neutral);
+  --_muted-border-l: var(--ty-button-border-l-neutral, var(--ty-button-border-l, -0.15));
 }
 button.muted.tone-plus {
   --_muted-solid-bg: var(--ty-solid-neutral-strong);
@@ -310,6 +311,7 @@ button.muted.tone-minus {
     --_muted-solid-fg: unset;
     --_muted-outlined-line: unset;
     --_muted-ghost-fg: unset;
+    --_muted-border-l: unset;
   }
 }
 button.muted:active:not(:disabled),
@@ -318,6 +320,7 @@ button.muted:focus-visible:not(:disabled) {
   --_muted-solid-fg: unset;
   --_muted-outlined-line: unset;
   --_muted-ghost-fg: unset;
+  --_muted-border-l: unset;
 }
 
 button.pill {

package/lib/styles/date-picker.js

@@ -252,7 +252,15 @@ ${FLAVORS.filter((f) => f !== "neutral").map((f) => datePickerFlavor(f)).join(""
   padding: var(--calendar-padding, 8px);
 
   opacity: 0;
-  transition: opacity 200ms ease;
+  /* Entrance motion uses the individual scale/translate properties so it
+     composes with the collision-shift transform below (they apply first). */
+  scale: 0.96;
+  translate: 0 -6px;
+  transform-origin: top center;
+  transition:
+    opacity var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1)),
+    scale var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1)),
+    translate var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1));
 
   transform: translate(var(--calendar-offset-x, 0px), var(--calendar-offset-y, 0px));
   top: -1000px;
@@ -269,10 +277,28 @@ ${FLAVORS.filter((f) => f !== "neutral").map((f) => datePickerFlavor(f)).join(""
   bottom: var(--calendar-y);
   top: auto;
   flex-direction: column-reverse;
+  translate: 0 6px;
+  transform-origin: bottom center;
 }
 
 .calendar-dialog.open {
   opacity: 1;
+  scale: 1;
+  translate: 0 0;
+}
+
+/* First-frame "from" values — see select-base.ts: transitions can't start on
+   an element that was display:none last frame; @starting-style fixes that. */
+@starting-style {
+  .calendar-dialog.open {
+    opacity: 0;
+    scale: 0.96;
+    translate: 0 -6px;
+  }
+
+  .calendar-dialog.open.position-above {
+    translate: 0 6px;
+  }
 }
 
 .calendar-dialog::backdrop {