tyrell-components 1.0.0-TC47 → 1.0.0-TC48

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,14 @@ 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);
     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)) {
@@ -47,7 +48,6 @@ function isMobile() {
 function dispatchModalEvent(el, eventType, detail) {
     const event = new CustomEvent(eventType, {
         detail,
-        bubbles: true,
         cancelable: true,
     });
     el.dispatchEvent(event);
@@ -80,14 +80,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) {
@@ -226,6 +225,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 +241,7 @@ function render(el) {
             else {
                 dialog.show();
             }
+            syncBackdropZoom();
             dispatchModalEvent(el, 'open', {});
         }
     }
@@ -244,9 +249,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 +266,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 +284,7 @@ function cleanup(el) {
         unlockScroll(modalId);
         modalIds.delete(el);
     }
+    syncBackdropZoom();
     if (!dialog)
         return;
     const backdropHandler = backdropClickHandlers.get(el);
@@ -308,6 +323,14 @@ export class TyModal extends HTMLElement {
     static get observedAttributes() {
         return ['open', 'backdrop', 'close-on-outside-click', 'close-on-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)); }
     constructor() {
         super();
         this.attachShadow({ mode: 'open' });

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 {

package/lib/styles/modal.d.ts

@@ -4,4 +4,4 @@
  * CSS for the modal component wrapper.
  * The modal is a pure wrapper - all content styling is user-defined.
  */
-export declare const modalStyles = "\n:host {\n  display: contents;\n  /* Don't interfere with layout */\n}\n\n/* Part of the modal wrapper functionality, not user content styling */\n.close-button {\n  position: absolute;\n  top: -8px;\n  right: -8px;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 4px;\n  border-radius: 4px;\n  transition: var(--ty-transition-colors);\n  z-index: 1;\n  color: #d8d8d8;\n\n  /* Remove all default browser styling that could cause outlines/borders */\n  outline: none;\n  box-shadow: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n\n  /* Remove mobile tap highlights and focus rings */\n  -webkit-tap-highlight-color: transparent;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n.close-button:hover {\n  color: white;\n}\n\n/* Explicitly remove focus and active states for all interaction modes */\n.close-button:focus,\n.close-button:focus-visible,\n.close-button:focus-within,\n.close-button:active {\n  outline: none !important;\n  box-shadow: none !important;\n  border: none !important;\n  background: transparent !important;\n}\n\n/* Override hover color even in focus/active states */\n.close-button:hover,\n.close-button:focus:hover,\n.close-button:active:hover {\n  color: white;\n}\n\n.close-button.hide {\n  visibility: hidden;\n}\n\n/* Pure wrapper: only essential modal functionality, no styling of user content */\n.ty-modal-dialog {\n  /* Reset default dialog styles */\n  padding: 18px;\n  border: none;\n  margin: 0;\n  background: transparent;\n\n  /* Centered */\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n\n  z-index: 1000;\n  overflow: hidden;\n\n  /* No sizing - let user content determine size */\n  max-width: 85vw;\n  max-height: 90vh;\n\n  outline: none;\n}\n\n/* Backdrop is part of modal functionality, not user content */\n.ty-modal-dialog::backdrop {\n  background: var(--ty-modal-backdrop, rgba(0, 0, 0, 0.5));\n  backdrop-filter: var(--ty-modal-backdrop-blur, blur(2px));\n  animation: ty-modal-backdrop-enter var(--ty-modal-duration, 200ms) ease-out;\n}\n\n/* When backdrop is disabled */\n.ty-modal-dialog:not([data-backdrop])::backdrop {\n  background: transparent;\n  backdrop-filter: none;\n}\n\n/* Minimal container - no styling imposed on user content */\n.modal-content {\n  color: var(--ty-text);\n}\n\n@keyframes ty-modal-backdrop-enter {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n";
+export declare const modalStyles = "\n:host {\n  display: contents;\n  /* Don't interfere with layout */\n}\n\n/* Part of the modal wrapper functionality, not user content styling */\n.close-button {\n  position: absolute;\n  top: -8px;\n  right: -8px;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 4px;\n  border-radius: 4px;\n  transition: var(--ty-transition-colors);\n  z-index: 1;\n  color: #d8d8d8;\n\n  /* Remove all default browser styling that could cause outlines/borders */\n  outline: none;\n  box-shadow: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n\n  /* Remove mobile tap highlights and focus rings */\n  -webkit-tap-highlight-color: transparent;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n.close-button:hover {\n  color: white;\n}\n\n/* Explicitly remove focus and active states for all interaction modes */\n.close-button:focus,\n.close-button:focus-visible,\n.close-button:focus-within,\n.close-button:active {\n  outline: none !important;\n  box-shadow: none !important;\n  border: none !important;\n  background: transparent !important;\n}\n\n/* Override hover color even in focus/active states */\n.close-button:hover,\n.close-button:focus:hover,\n.close-button:active:hover {\n  color: white;\n}\n\n.close-button.hide {\n  visibility: hidden;\n}\n\n/* Pure wrapper: only essential modal functionality, no styling of user content */\n.ty-modal-dialog {\n  /* Reset default dialog styles */\n  padding: 18px;\n  border: none;\n  margin: 0;\n  background: transparent;\n\n  /* Centered */\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n\n  z-index: 1000;\n  overflow: hidden;\n\n  /* No sizing - let user content determine size */\n  max-width: 85vw;\n  max-height: 90vh;\n\n  outline: none;\n}\n\n/* Panel zoom-in synced with the backdrop fade (shadcn-style zoom-in-95).\n   Enter-only: animating exit on a native <dialog> means delaying close(). */\n.ty-modal-dialog[open] {\n  animation: ty-modal-enter var(--ty-modal-duration, 200ms) ease-out;\n}\n\n@keyframes ty-modal-enter {\n  from {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.93);\n  }\n\n  to {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n\n/* Backdrop is part of modal functionality, not user content */\n.ty-modal-dialog::backdrop {\n  background: var(--ty-modal-backdrop, rgba(0, 0, 0, 0.5));\n  backdrop-filter: var(--ty-modal-backdrop-blur, blur(2px));\n  animation: ty-modal-backdrop-enter var(--ty-modal-duration, 200ms) ease-out;\n}\n\n/* When backdrop is disabled */\n.ty-modal-dialog:not([data-backdrop])::backdrop {\n  background: transparent;\n  backdrop-filter: none;\n}\n\n/* Minimal container - no styling imposed on user content */\n.modal-content {\n  color: var(--ty-text);\n}\n\n@keyframes ty-modal-backdrop-enter {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n";

package/lib/styles/modal.js

@@ -84,6 +84,24 @@ export const modalStyles = `
   outline: none;
 }
 
+/* Panel zoom-in synced with the backdrop fade (shadcn-style zoom-in-95).
+   Enter-only: animating exit on a native <dialog> means delaying close(). */
+.ty-modal-dialog[open] {
+  animation: ty-modal-enter var(--ty-modal-duration, 200ms) ease-out;
+}
+
+@keyframes ty-modal-enter {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.93);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
 /* Backdrop is part of modal functionality, not user content */
 .ty-modal-dialog::backdrop {
   background: var(--ty-modal-backdrop, rgba(0, 0, 0, 0.5));

package/lib/styles/option.d.ts

@@ -1,2 +1,2 @@
 /** Option Component Styles */
-export declare const optionStyles = "\n.option-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--ty-spacing-2);\n  box-sizing: border-box;\n  width: 100%;\n\n  cursor: pointer;\n  user-select: none;\n\n  transition: var(--ty-transition-all);\n\n  /* Linear-paired typography */\n  color: var(--ty-text);\n  font-family: inherit;\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  border-radius: var(--ty-radius-md);\n}\n\n:host([cloned]) .option-content {\n  padding: 0px;\n  background: transparent;\n}\n\n.option-content:hover {\n  background: var(--ty-bg-neutral-soft);\n}\n\n.option-content[highlighted] {\n  background: var(--ty-bg-neutral-soft);\n  color: var(--ty-text-strong);\n  font-weight: var(--ty-font-semibold);\n}\n\n/* Selected: quiet \u2014 bolder text color only, no background slab, no weight change */\n.option-content[selected] {\n  background: transparent;\n  color: var(--ty-text-bold);\n}\n\n/* Lucide check \u2014 right-aligned, visible only on selected options */\n.option-check {\n  display: none;\n  flex-shrink: 0;\n  width: 14px;\n  height: 14px;\n  margin-left: auto;\n  color: var(--ty-color-primary);\n}\n\n.option-content[selected] .option-check {\n  display: block;\n}\n\n/* Never show the check on the copy cloned into the select's trigger field */\n:host([cloned]) .option-check {\n  display: none;\n}\n\n.option-content[selected]:hover {\n  background: var(--ty-bg-neutral-soft);\n}\n\n.option-content[disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.option-content[hidden] {}\n\n.option-content * {\n  pointer-events: none;\n}\n";
+export declare const optionStyles = "\n.option-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--ty-spacing-2);\n  box-sizing: border-box;\n  width: 100%;\n\n  cursor: pointer;\n  user-select: none;\n\n  transition: var(--ty-transition-all);\n\n  /* Linear-paired typography */\n  color: var(--ty-text);\n  font-family: inherit;\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  border-radius: var(--ty-radius-md);\n}\n\n/* Cloned copy (projected into the select's trigger field): host defaults to\n   inline like any unstyled custom element, which ignores width/overflow \u2014\n   force a block box so the parent's flex-basis:0 truncation (select.ts\n   .select-stub.has-clone slot[name=\"selected\"]) actually clips it, and\n   collapse the content to a single ellipsized line instead of wrapping. */\n:host([cloned]) {\n  display: block;\n  min-width: 0;\n  overflow: hidden;\n}\n:host([cloned]) .option-content {\n  display: block;\n  padding: 0px;\n  background: transparent;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.option-content:hover {\n  background: var(--ty-bg-neutral-soft);\n}\n\n.option-content[highlighted] {\n  background: var(--ty-bg-neutral-soft);\n  color: var(--ty-text-strong);\n  font-weight: var(--ty-font-semibold);\n}\n\n/* Selected: quiet \u2014 bolder text color only, no background slab, no weight change */\n.option-content[selected] {\n  background: transparent;\n  color: var(--ty-text-bold);\n}\n\n/* Lucide check \u2014 right-aligned, visible only on selected options */\n.option-check {\n  display: none;\n  flex-shrink: 0;\n  width: 14px;\n  height: 14px;\n  margin-left: auto;\n  color: var(--ty-color-primary);\n}\n\n.option-content[selected] .option-check {\n  display: block;\n}\n\n/* Never show the check on the copy cloned into the select's trigger field */\n:host([cloned]) .option-check {\n  display: none;\n}\n\n.option-content[selected]:hover {\n  background: var(--ty-bg-neutral-soft);\n}\n\n.option-content[disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.option-content[hidden] {}\n\n.option-content * {\n  pointer-events: none;\n}\n";