tyrell-components 1.0.0-RC13 → 1.0.0-RC15

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;
@@ -31,18 +13,9 @@ 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;
-    /**
-     * 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

package/lib/components/resize-observer.js

@@ -1,108 +1,74 @@
-/**
- * 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>
- * ```
- */
 import { ensureStyles } from '../utils/styles.js';
 import { resizeObserverStyles } from '../styles/resize-observer.js';
 import { updateSize, removeSize } from '../utils/resize-observer.js';
 export class TyResizeObserver extends HTMLElement {
-    static get observedAttributes() {
-        return ['id', 'debounce'];
-    }
-    /**
-     * Debounce in milliseconds (default: 0 = no debounce)
-     */
-    get debounce() {
-        return parseInt(this.getAttribute('debounce') || '0');
-    }
-    set debounce(value) {
-        this.setAttribute('debounce', String(value));
-    }
-    constructor() {
-        super();
-        this._resizeObserver = null;
-        this._debounceTimer = null;
-        // Setup shadow DOM with styles
-        const shadow = this.attachShadow({ mode: 'open' });
-        ensureStyles(shadow, { css: resizeObserverStyles, id: 'ty-resize-observer' });
-        // Simple slot for content
-        shadow.innerHTML = '<slot></slot>';
-    }
-    connectedCallback() {
-        this.setupObserver();
-    }
-    disconnectedCallback() {
-        this.cleanup();
-    }
-    /**
-     * Setup ResizeObserver to watch this element
-     */
-    setupObserver() {
-        this._resizeObserver = new ResizeObserver((entries) => {
-            if (this.debounce > 0) {
-                // Debounced handling
-                if (this._debounceTimer)
-                    clearTimeout(this._debounceTimer);
-                this._debounceTimer = window.setTimeout(() => {
-                    this.handleResize(entries);
-                }, this.debounce);
-            }
-            else {
-                // Immediate handling
-                this.handleResize(entries);
-            }
-        });
-        // Observe the custom element itself (not shadow root)
-        this._resizeObserver.observe(this);
-    }
-    /**
-     * Handle resize events - update registry and notify callbacks
-     */
-    handleResize(entries) {
-        const { width, height } = entries[0].contentRect;
-        // Only update if element has an ID
-        if (this.id) {
-            updateSize(this.id, width, height);
-        }
-    }
-    /**
-     * Cleanup observer and remove from registry
-     */
-    cleanup() {
-        // Disconnect observer
-        if (this._resizeObserver) {
-            this._resizeObserver.disconnect();
-            this._resizeObserver = null;
-        }
-        // Clear pending debounce timer
-        if (this._debounceTimer) {
-            clearTimeout(this._debounceTimer);
-            this._debounceTimer = null;
-        }
-        // Remove from registry
-        if (this.id) {
-            removeSize(this.id);
-        }
-    }
-}
-// Register custom element
+static get observedAttributes() {
+return ['id', 'debounce'];
+}
+get debounce() {
+return parseInt(this.getAttribute('debounce') || '0');
+}
+set debounce(value) {
+this.setAttribute('debounce', String(value));
+}
+constructor() {
+super();
+this._resizeObserver = null;
+this._debounceTimer = null;
+const shadow = this.attachShadow({ mode: 'open' });
+ensureStyles(shadow, { css: resizeObserverStyles, id: 'ty-resize-observer' });
+shadow.innerHTML = '<slot></slot>';
+}
+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();
+}
+setupObserver() {
+this._resizeObserver = new ResizeObserver((entries) => {
+if (this.debounce > 0) {
+if (this._debounceTimer)
+clearTimeout(this._debounceTimer);
+this._debounceTimer = window.setTimeout(() => {
+this.handleResize(entries);
+}, this.debounce);
+}
+else {
+this.handleResize(entries);
+}
+});
+this._resizeObserver.observe(this);
+}
+handleResize(entries) {
+const { width, height } = entries[0].contentRect;
+if (this.id) {
+updateSize(this.id, width, height);
+}
+}
+cleanup() {
+if (this._resizeObserver) {
+this._resizeObserver.disconnect();
+this._resizeObserver = null;
+}
+if (this._debounceTimer) {
+clearTimeout(this._debounceTimer);
+this._debounceTimer = null;
+}
+if (this.id) {
+removeSize(this.id);
+}
+}
+}
+if (!customElements.get('ty-resize-observer')) {
 customElements.define('ty-resize-observer', TyResizeObserver);
-//# sourceMappingURL=resize-observer.js.map
+}

package/lib/components/scroll-container.d.ts

@@ -1,15 +1,6 @@
 /**
- * TyScrollContainer Web Component
- *
- * A scroll container with shadow indicators and an optional custom-rendered scrollbar.
- * Uses the CustomScrollbar utility internally.
- *
- * @example Custom scrollbar
- * ```html
- * <ty-scroll-container max-height="300px" custom-scrollbar>
- *   <div>Long content...</div>
- * </ty-scroll-container>
- * ```
+ * TyScrollContainer Web Component - scroll wrapper with edge shadow indicators
+ * and an optional custom-rendered scrollbar (CustomScrollbar utility).
  */
 export declare class TyScrollContainer extends HTMLElement {
     private _scrollWrapper;
@@ -64,4 +55,3 @@ export declare class TyScrollContainer extends HTMLElement {
     scrollToElement(target: Element | string, smooth?: boolean): void;
     get scrollElement(): HTMLElement | null;
 }
-//# sourceMappingURL=scroll-container.d.ts.map