tyrell-components 1.0.0-TC45 → 1.0.0-TC47

package/lib/components/popup.js

@@ -1,45 +1,16 @@
-/**
- * Popup Component
- *
- * Interactive popup component with dropdown-like behavior and tooltip positioning.
- * Uses parent-child relationship - popup opens on click, stays open for interaction,
- * closes on outside click or ESC key.
- *
- * @example
- * <button>
- *   Click me
- *   <ty-popup placement="bottom" offset="8">
- *     <div class="ty-elevated p-4 rounded-lg">
- *       Popup content here
- *     </div>
- *   </ty-popup>
- * </button>
- */
-import { findBestPosition } from '../utils/positioning.js';
+import { findBestPosition, preferenceChain } from '../utils/positioning.js';
 import { lockScroll, unlockScroll } from '../utils/scroll-lock.js';
 import { ensureStyles } from '../utils/styles.js';
 import { popupStyles } from '../styles/popup.js';
-// ============================================================================
-// WeakMaps for State Management
-// ============================================================================
 const anchorClickHandlers = new WeakMap();
 const anchorKeyClickHandlers = new WeakMap();
 const outsideClickHandlers = new WeakMap();
 const escapeHandlers = new WeakMap();
 const closeRequestHandlers = new WeakMap();
-const popupIds = new WeakMap(); // Store popup ID for scroll locking
-// ============================================================================
-// Helper Functions
-// ============================================================================
-/**
- * Parse boolean attribute
- */
+const popupIds = new WeakMap();
 function parseBoolAttr(el, name) {
     return el.hasAttribute(name);
 }
-/**
- * Parse integer attribute
- */
 function parseIntAttr(el, name, defaultValue) {
     const value = el.getAttribute(name);
     if (value === null)
@@ -47,9 +18,6 @@ function parseIntAttr(el, name, defaultValue) {
     const parsed = parseInt(value, 10);
     return isNaN(parsed) ? defaultValue : parsed;
 }
-/**
- * Read popup attributes with simplified API
- */
 function getPopupAttributes(el) {
     return {
         manual: parseBoolAttr(el, 'manual'),
@@ -58,21 +26,12 @@ function getPopupAttributes(el) {
         offset: parseIntAttr(el, 'offset', 8),
     };
 }
-/**
- * Get the parent element as anchor (like tooltip)
- */
 function getAnchorElement(el) {
     return el.parentElement;
 }
-/**
- * Get the popup dialog element
- */
 function getPopupDialog(shadowRoot) {
     return shadowRoot.querySelector('.popup-dialog');
 }
-/**
- * Get or create a unique popup ID for scroll locking
- */
 function getPopupId(el) {
     let id = popupIds.get(el);
     if (!id) {
@@ -81,9 +40,6 @@ function getPopupId(el) {
     }
     return id;
 }
-/**
- * Calculate and update popup position based on anchor (tooltip style)
- */
 function updatePosition(el) {
     const { placement, offset } = getPopupAttributes(el);
     const shadowRoot = el.shadowRoot;
@@ -91,13 +47,7 @@ function updatePosition(el) {
     const dialog = shadowRoot ? getPopupDialog(shadowRoot) : null;
     if (!anchor || !dialog)
         return;
-    // Calculate preferred placements based on placement attribute (like tooltip)
-    const preferences = placement === 'top' ? ['top', 'bottom', 'left', 'right'] :
-        placement === 'bottom' ? ['bottom', 'top', 'left', 'right'] :
-            placement === 'left' ? ['left', 'right', 'top', 'bottom'] :
-                placement === 'right' ? ['right', 'left', 'top', 'bottom'] :
-                    ['bottom', 'top', 'right', 'left']; // Default popup placement
-    // Use positioning engine to find best position
+    const preferences = preferenceChain(placement);
     const positionData = findBestPosition({
         targetEl: anchor,
         floatingEl: dialog,
@@ -106,15 +56,10 @@ function updatePosition(el) {
         padding: 8,
         containerPadding: 16,
     });
-    // Update CSS variables with compensated coordinates
     el.style.setProperty('--popup-x', `${positionData.x}px`);
     el.style.setProperty('--popup-y', `${positionData.y}px`);
-    // Add position class like dropdown does (this applies the variables)
     dialog.classList.add('position-calculated');
 }
-/**
- * Close popup with clean animation -> position reset -> hide sequence
- */
 function closePopup(el, force = false) {
     const { disableClose } = getPopupAttributes(el);
     if (!force && disableClose)
@@ -123,8 +68,6 @@ function closePopup(el, force = false) {
     const dialog = shadowRoot ? getPopupDialog(shadowRoot) : null;
     if (!dialog)
         return;
-    // Don't unlock scroll here - let the dialog 'close' event handler do it
-    // This prevents double-unlock issues
     dialog.classList.remove('open');
     dialog.classList.remove('preparing-animation');
     const anchor = getAnchorElement(el);
@@ -132,46 +75,30 @@ function closePopup(el, force = false) {
         anchor.setAttribute('aria-expanded', 'false');
     setTimeout(() => {
         dialog.classList.remove('position-calculated');
-        dialog.close(); // This will trigger 'close' event which unlocks scroll
+        dialog.close();
     }, 150);
-    // Dispatch close event
     el.dispatchEvent(new CustomEvent('close', { bubbles: true }));
 }
-/**
- * Open popup with dialog open but hidden → position → animate sequence
- */
 function openPopup(el) {
-    // Lock scroll using the stored popup ID
     const popupId = getPopupId(el);
     lockScroll(popupId);
     const shadowRoot = el.shadowRoot;
     const dialog = shadowRoot ? getPopupDialog(shadowRoot) : null;
     if (!dialog)
         return;
-    // Step 1: showModal() immediately - dialog gets [open] attribute and proper layout
     dialog.showModal();
     const anchor = getAnchorElement(el);
     if (anchor?.hasAttribute('aria-haspopup'))
         anchor.setAttribute('aria-expanded', 'true');
-    // Step 2: Wait for layout to settle, then measure and position
     requestAnimationFrame(() => {
-        // Now dialog has [open] and accurate dimensions
-        // Calculate and apply position while dialog is hidden by CSS
         updatePosition(el);
-        // Step 3: Add scale transform for animation prep
         dialog.classList.add('preparing-animation');
-        // Step 4: Third RAF - THEN add open class for smooth scale animation
         requestAnimationFrame(() => {
-            // Now animate: scale(0.95) → scale(1) + opacity + visibility
             dialog.classList.add('open');
-            // Dispatch open event
             el.dispatchEvent(new CustomEvent('open', { bubbles: true }));
         });
     });
 }
-/**
- * Toggle popup visibility
- */
 function togglePopup(el) {
     const shadowRoot = el.shadowRoot;
     const dialog = shadowRoot ? getPopupDialog(shadowRoot) : null;
@@ -184,30 +111,20 @@ function togglePopup(el) {
         openPopup(el);
     }
 }
-/**
- * Handle click on anchor element
- */
 function handleAnchorClick(el, event) {
     event.preventDefault();
     event.stopPropagation();
     togglePopup(el);
 }
-/**
- * Handle clicks on the dialog element (backdrop clicks)
- */
 function handleOutsideClick(el, event) {
     event.stopPropagation();
     const shadowRoot = el.shadowRoot;
     const dialog = shadowRoot ? getPopupDialog(shadowRoot) : null;
-    // Close if clicking on dialog backdrop (not popup content)
     if (dialog && event.target === dialog) {
         event.preventDefault();
         closePopup(el);
     }
 }
-/**
- * Handle escape key press
- */
 function handleEscape(el, event) {
     event.stopPropagation();
     if (event.key === 'Escape') {
@@ -220,28 +137,18 @@ function handleEscape(el, event) {
         }
     }
 }
-/**
- * Handle close requests from inside popup content
- */
 function handleCloseRequest(el, event) {
     event.stopPropagation();
     closePopup(el, true);
 }
-/**
- * Setup click listener on anchor element (unless manual=true)
- */
 function setupAnchorEvents(el) {
     const { manual } = getPopupAttributes(el);
     const anchor = getAnchorElement(el);
     if (!anchor || manual)
         return;
-    // Screen reader gets no other signal that clicking this opens something —
-    // the popup itself is a real <dialog> (showModal()), which already gives
-    // it role="dialog" + focus-trap for free, so only the trigger needs this.
     anchor.setAttribute('aria-haspopup', 'dialog');
     if (!anchor.hasAttribute('aria-expanded'))
         anchor.setAttribute('aria-expanded', 'false');
-    // Remove any existing listeners first
     const existingHandler = anchorClickHandlers.get(el);
     if (existingHandler) {
         anchor.removeEventListener('pointerdown', existingHandler);
@@ -250,14 +157,9 @@ function setupAnchorEvents(el) {
     if (existingKeyHandler) {
         anchor.removeEventListener('click', existingKeyHandler);
     }
-    // Create new handlers and store references
     const handler = (e) => handleAnchorClick(el, e);
     anchorClickHandlers.set(el, handler);
     anchor.addEventListener('pointerdown', handler);
-    // pointerdown covers mouse/touch; native keyboard activation (Enter/Space
-    // on a focused anchor) fires 'click' with detail === 0, which pointerdown
-    // never sees — without this, a keyboard-only user could focus the anchor
-    // but had no way to open the popup (same gap fixed in ty-tabs).
     const keyHandler = (e) => {
         if (e.detail === 0)
             handleAnchorClick(el, e);
@@ -265,9 +167,6 @@ function setupAnchorEvents(el) {
     anchorKeyClickHandlers.set(el, keyHandler);
     anchor.addEventListener('click', keyHandler);
 }
-/**
- * Cleanup anchor event listeners
- */
 function cleanupAnchorEvents(el) {
     const anchor = getAnchorElement(el);
     const handler = anchorClickHandlers.get(el);
@@ -283,17 +182,12 @@ function cleanupAnchorEvents(el) {
     anchor?.removeAttribute('aria-haspopup');
     anchor?.removeAttribute('aria-expanded');
 }
-/**
- * Render the popup structure
- */
 function render(el) {
     const shadowRoot = el.shadowRoot;
     if (!shadowRoot)
         return;
     const existingDialog = getPopupDialog(shadowRoot);
-    // Ensure styles are loaded
     ensureStyles(shadowRoot, { css: popupStyles, id: 'ty-popup' });
-    // Create structure if it doesn't exist
     if (!existingDialog) {
         const dialog = document.createElement('dialog');
         const container = document.createElement('div');
@@ -304,17 +198,14 @@ function render(el) {
         shadowRoot.appendChild(dialog);
         dialog.appendChild(container);
         container.appendChild(content);
-        // Initialize position
         el.style.setProperty('--popup-x', '0px');
         el.style.setProperty('--popup-y', '0px');
-        // Setup event listeners
         const outsideHandler = (e) => handleOutsideClick(el, e);
         outsideClickHandlers.set(el, outsideHandler);
         dialog.addEventListener('pointerdown', outsideHandler);
         const escapeHandler = (e) => handleEscape(el, e);
         escapeHandlers.set(el, escapeHandler);
         el.addEventListener('keydown', escapeHandler);
-        // Handle native dialog close event
         dialog.addEventListener('close', () => {
             const popupId = getPopupId(el);
             unlockScroll(popupId);
@@ -323,30 +214,21 @@ function render(el) {
             el.dispatchEvent(new CustomEvent('close', { bubbles: true }));
         });
     }
-    // Add close method to element for programmatic access
     el.closePopup = () => closePopup(el, true);
     el.openPopup = () => openPopup(el);
     el.togglePopup = () => togglePopup(el);
-    // Add event listener for close requests from content
     const closeRequestHandler = (e) => handleCloseRequest(el, e);
     closeRequestHandlers.set(el, closeRequestHandler);
     el.addEventListener('ty:close-popup', closeRequestHandler);
-    // Setup anchor events
     setupAnchorEvents(el);
 }
-/**
- * Cleanup all resources when component disconnects
- */
 function cleanup(el) {
-    // Force unlock scroll if popup is being removed
     const popupId = popupIds.get(el);
     if (popupId) {
         unlockScroll(popupId);
         popupIds.delete(el);
     }
-    // Cleanup anchor events
     cleanupAnchorEvents(el);
-    // Cleanup dialog events
     const shadowRoot = el.shadowRoot;
     const dialog = shadowRoot ? getPopupDialog(shadowRoot) : null;
     if (dialog) {
@@ -367,14 +249,7 @@ function cleanup(el) {
         closeRequestHandlers.delete(el);
     }
 }
-// ============================================================================
-// Component Definition
-// ============================================================================
-/**
- * TyPopup Web Component
- */
 export class TyPopup extends HTMLElement {
-    /** Observed attributes */
     static get observedAttributes() {
         return ['manual', 'disable-close', 'placement', 'offset'];
     }
@@ -389,26 +264,20 @@ export class TyPopup extends HTMLElement {
         cleanup(this);
     }
     attributeChangedCallback(name, _oldValue, _newValue) {
-        // Re-render on attribute changes
         render(this);
-        // Handle specific attribute changes
         switch (name) {
             case 'placement':
             case 'offset':
-                // Update position immediately if open and placement-related attributes change
                 render(this);
                 break;
             case 'manual':
             case 'disable-close':
-                // Recreate anchor events if manual changes
                 cleanupAnchorEvents(this);
                 setupAnchorEvents(this);
                 break;
         }
     }
 }
-// Register the custom element
 if (!customElements.get('ty-popup')) {
     customElements.define('ty-popup', TyPopup);
 }
-//# sourceMappingURL=popup.js.map

package/lib/components/radio.d.ts

@@ -1,20 +1,7 @@
 /**
- * TyRadio + TyRadioGroup Web Components
- *
- * Exclusive selection within a group. ty-radio-group manages the selection
- * value and form integration; ty-radio is the individual choice element.
- *
- * Composition (container + children, like ty-select + ty-option):
- *   <ty-radio-group name="plan" value="pro" label="Plan">
- *     <ty-radio value="free">Free</ty-radio>
- *     <ty-radio value="pro">Pro</ty-radio>
- *     <ty-radio value="team">Team</ty-radio>
- *   </ty-radio-group>
- *
- * Keyboard:
- * - Tab focuses the group's currently-selected (or first) radio
- * - Arrow keys move focus AND selection within the group (per W3C ARIA)
- * - Space/Enter selects the focused radio
+ * TyRadio + TyRadioGroup Web Components - exclusive selection within a group.
+ * ty-radio-group owns the value and form integration; ty-radio is one choice.
+ * Keyboard follows W3C ARIA: arrow keys move focus AND selection together.
  */
 import type { Flavor, Size } from "../types/common.js";
 import { TyComponent } from "../base/ty-component.js";
@@ -162,13 +149,7 @@ export declare class TyRadioGroup extends TyComponent<RadioGroupState> implement
      * because consumers may wrap each radio in a `<label>` for click delegation.
      */
     private getRadios;
-    /**
-     * Push group state down to each radio child.
-     */
     private syncChildren;
-    /**
-     * Handle a child's select request — update value, sync, emit change.
-     */
     private handleRadioSelect;
     /**
      * Arrow-key navigation within group (W3C radio practice: arrow keys move
@@ -199,4 +180,3 @@ export declare class TyRadioGroup extends TyComponent<RadioGroupState> implement
     get form(): HTMLFormElement | null;
 }
 export {};
-//# sourceMappingURL=radio.d.ts.map

package/lib/components/radio.js

@@ -1,21 +1,3 @@
-/**
- * TyRadio + TyRadioGroup Web Components
- *
- * Exclusive selection within a group. ty-radio-group manages the selection
- * value and form integration; ty-radio is the individual choice element.
- *
- * Composition (container + children, like ty-select + ty-option):
- *   <ty-radio-group name="plan" value="pro" label="Plan">
- *     <ty-radio value="free">Free</ty-radio>
- *     <ty-radio value="pro">Pro</ty-radio>
- *     <ty-radio value="team">Team</ty-radio>
- *   </ty-radio-group>
- *
- * Keyboard:
- * - Tab focuses the group's currently-selected (or first) radio
- * - Arrow keys move focus AND selection within the group (per W3C ARIA)
- * - Space/Enter selects the focused radio
- */
 import { TyComponent } from "../base/ty-component.js";
 import { ensureStyles } from "../utils/styles.js";
 import { syncCustomFlavorSheet } from "../utils/flavor-sheet.js";
@@ -33,12 +15,7 @@ export class TyRadio extends TyComponent {
         ensureStyles(shadow, { css: radioStyles, id: "ty-radio" });
     }
     onConnect() {
-        // Re-arm listeners on RE-connect (base skips render() when already
-        // rendered; onDisconnect removed them). No-op on first connect.
         this.setupEventListeners();
-        // Tell the group we exist. During HTML parsing the group connects BEFORE
-        // its children, so its own onConnect sync sees an empty group — each
-        // radio announcing itself lets the group re-sync as children arrive.
         this.dispatchEvent(new CustomEvent("ty-radio-connected", { bubbles: true }));
         this._syncCustomFlavor();
     }
@@ -50,7 +27,6 @@ export class TyRadio extends TyComponent {
             this._syncCustomFlavor();
         }
     }
-    /** Custom (non-built-in) flavors — see utils/flavor-sheet.ts. */
     _syncCustomFlavor() {
         this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, this.flavor, ({ base }) => radioCustomFlavorCss(base));
     }
@@ -64,7 +40,6 @@ export class TyRadio extends TyComponent {
         if (this.disabled)
             return;
         e.stopPropagation();
-        // Notify the group — group will set checked attribute on this and clear others
         this.dispatchEvent(new CustomEvent("ty-radio-select", {
             detail: { value: this.value },
             bubbles: true,
@@ -74,8 +49,6 @@ export class TyRadio extends TyComponent {
     removeEventListeners() {
         if (!this._listenersSetup)
             return;
-        // Click lives on the HOST (label delegation + full-element trigger) —
-        // remove it before the shadow-container guard below.
         if (this._clickHandler) {
             this.removeEventListener("click", this._clickHandler);
             this._clickHandler = null;
@@ -104,8 +77,6 @@ export class TyRadio extends TyComponent {
         this._clickHandler = (e) => this.handleClick(e);
         this._focusHandler = () => el.classList.add("focused");
         this._blurHandler = () => el.classList.remove("focused");
-        // Click on the HOST: whole element is a trigger and a wrapping <label>
-        // delegates (the synthetic click lands on the host, not the shadow).
         this.addEventListener("click", this._clickHandler);
         el.addEventListener("focus", this._focusHandler);
         el.addEventListener("blur", this._blurHandler);
@@ -133,13 +104,9 @@ export class TyRadio extends TyComponent {
             radioEl.setAttribute("aria-checked", String(this.checked));
             radioEl.setAttribute("aria-disabled", String(this.disabled));
         }
-        // (Re)attach listeners — onDisconnect removes them, so a reconnected
-        // element needs them again even though the container already exists.
         this.setupEventListeners();
-        // a11y: name the role="radio" element from its wrapping <label>.
         this.applyLabelName(radioEl);
     }
-    // Property accessors
     get value() { return this.getProperty("value"); }
     set value(v) { this.setProperty("value", v); }
     get checked() { return this.getProperty("checked"); }
@@ -188,11 +155,7 @@ export class TyRadioGroup extends TyComponent {
         ensureStyles(shadow, { css: radioStyles, id: "ty-radio-group" });
     }
     onConnect() {
-        // Re-arm listeners on RE-connect; no-op on first (setup runs in render too)
         this.setupEventListeners();
-        // Sync radio children with current value once light DOM is ready.
-        // NOTE: during HTML parsing this runs before children are parsed — the
-        // ty-radio-connected listener covers late-arriving radios.
         queueMicrotask(() => this.syncChildren());
     }
     onDisconnect() {
@@ -206,30 +169,19 @@ export class TyRadioGroup extends TyComponent {
     getFormValue() {
         return this.value || null;
     }
-    /**
-     * Find ty-radio descendants in this group's light DOM. Searches deeply
-     * because consumers may wrap each radio in a `<label>` for click delegation.
-     */
     getRadios() {
         return Array.from(this.querySelectorAll("ty-radio"));
     }
-    /**
-     * Push group state down to each radio child.
-     */
     syncChildren() {
         const radios = this.getRadios();
         for (const radio of radios) {
             radio.checked = radio.value === this.value;
-            // Inherit size/flavor/disabled from group unless radio set its own
             if (this.disabled)
                 radio.disabled = true;
             radio.size = this.size;
             radio.flavor = this.flavor;
         }
     }
-    /**
-     * Handle a child's select request — update value, sync, emit change.
-     */
     handleRadioSelect(e) {
         if (this.disabled)
             return;
@@ -249,10 +201,6 @@ export class TyRadioGroup extends TyComponent {
             this.dispatchEvent(new CustomEvent("change", { detail: eventDetail, bubbles: true, composed: true }));
         }, 0);
     }
-    /**
-     * Arrow-key navigation within group (W3C radio practice: arrow keys move
-     * focus and selection together).
-     */
     handleKeydown(e) {
         if (this.disabled)
             return;
@@ -294,7 +242,6 @@ export class TyRadioGroup extends TyComponent {
         const next = radios[nextIndex];
         if (next) {
             next.focus();
-            // Per W3C: arrow keys also change selection
             this.value = next.value;
             this.syncChildren();
             const eventDetail = {
@@ -329,8 +276,6 @@ export class TyRadioGroup extends TyComponent {
             return;
         this._selectHandler = (e) => this.handleRadioSelect(e);
         this._keydownHandler = (e) => this.handleKeydown(e);
-        // Radios announce themselves on connect — re-sync so radios parsed AFTER
-        // the group's own onConnect still receive the group's value/size/flavor.
         this._connectedHandler = () => this.syncChildren();
         this.addEventListener("ty-radio-select", this._selectHandler);
         this.addEventListener("keydown", this._keydownHandler);
@@ -345,7 +290,6 @@ export class TyRadioGroup extends TyComponent {
             container.className = "radio-group-container";
             container.setAttribute("role", "radiogroup");
             container.setAttribute("aria-disabled", String(this.disabled));
-            // Label
             if (this.label) {
                 const labelEl = document.createElement("div");
                 labelEl.className = "radio-group-label";
@@ -358,7 +302,6 @@ export class TyRadioGroup extends TyComponent {
                 }
                 container.appendChild(labelEl);
             }
-            // List wrapper that hosts the slot
             const list = document.createElement("div");
             list.className = "radio-group-list " + this.orientation;
             const slot = document.createElement("slot");
@@ -374,7 +317,6 @@ export class TyRadioGroup extends TyComponent {
             this.setupEventListeners();
         }
         else {
-            // Update label
             let labelEl = container.querySelector(".radio-group-label");
             if (this.label) {
                 if (!labelEl) {
@@ -396,11 +338,9 @@ export class TyRadioGroup extends TyComponent {
             else if (labelEl) {
                 labelEl.remove();
             }
-            // Update orientation
             const list = container.querySelector(".radio-group-list");
             if (list)
                 list.className = "radio-group-list " + this.orientation;
-            // Update error
             let errorEl = container.querySelector(".radio-group-error");
             if (this.error) {
                 if (!errorEl) {
@@ -415,10 +355,8 @@ export class TyRadioGroup extends TyComponent {
             }
             container.setAttribute("aria-disabled", String(this.disabled));
         }
-        // Always sync child radios after render
         this.syncChildren();
     }
-    // Property accessors
     get value() { return this.getProperty("value"); }
     set value(v) { this.setProperty("value", v); }
     get name() { return this.getProperty("name"); }
@@ -476,4 +414,3 @@ TyRadioGroup.properties = {
 if (!customElements.get("ty-radio-group")) {
     customElements.define("ty-radio-group", TyRadioGroup);
 }
-//# sourceMappingURL=radio.js.map

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

@@ -1,24 +1,6 @@
 /**
- * TyResizeObserver Web Component
- *
- * Self-observing resize component that tracks its own dimensions
- * and stores them in a global registry accessible by element ID.
- *
- * @example
- * ```html
- * <ty-resize-observer id="parent-container">
- *   <div class="child">
- *     <!-- Child can query parent size via getSize('parent-container') -->
- *   </div>
- * </ty-resize-observer>
- * ```
- *
- * @example With debouncing
- * ```html
- * <ty-resize-observer id="container" debounce="100">
- *   <!-- Only updates after 100ms of no resize activity -->
- * </ty-resize-observer>
- * ```
+ * TyResizeObserver Web Component - self-observing element that tracks its own
+ * dimensions in a global registry keyed by element ID. Optional debounce.
  */
 export declare class TyResizeObserver extends HTMLElement {
     private _resizeObserver;
@@ -32,17 +14,7 @@ export declare class TyResizeObserver extends HTMLElement {
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
-    /**
-     * Setup ResizeObserver to watch this element
-     */
     private setupObserver;
-    /**
-     * Handle resize events - update registry and notify callbacks
-     */
     private handleResize;
-    /**
-     * Cleanup observer and remove from registry
-     */
     private cleanup;
 }
-//# sourceMappingURL=resize-observer.d.ts.map