tyrell-components 1.0.0-RC13 → 1.0.0-RC15

package/lib/components/option.d.ts

@@ -1,9 +1,6 @@
 /**
- * TyOption Web Component
- * PORTED FROM: clj/ty/components/option.cljs
- *
- * Ty Option Web Component - Rich HTML alternative to native <option>
- * Enhanced with robust property-attribute synchronization for framework compatibility.
+ * TyOption Web Component - rich HTML alternative to native <option>.
+ * Property-attribute synchronization keeps it compatible with frameworks.
  */
 import type { TyOptionElement } from '../types/common.js';
 export declare class TyOption extends HTMLElement implements TyOptionElement {
@@ -31,9 +28,5 @@ export declare class TyOption extends HTMLElement implements TyOptionElement {
     set highlighted(value: boolean);
     get hidden(): boolean;
     set hidden(value: boolean);
-    /**
-   * Render the option component with rich HTML content and property sync
-   */
     private render;
 }
-//# sourceMappingURL=option.d.ts.map

package/lib/components/option.js

@@ -1,223 +1,175 @@
-/**
- * TyOption Web Component
- * PORTED FROM: clj/ty/components/option.cljs
- *
- * Ty Option Web Component - Rich HTML alternative to native <option>
- * Enhanced with robust property-attribute synchronization for framework compatibility.
- */
 import { ensureStyles } from '../utils/styles.js';
 import { optionStyles } from '../styles/option.js';
-/**
- * Ty Option Component
- *
- * Rich HTML alternative to native <option> element.
- * Supports HTML content, styling, and framework property binding.
- *
- * @example
- * ```html
- * <ty-option value="1">Simple Option</ty-option>
- * <ty-option value="2" selected>Selected Option</ty-option>
- * <ty-option value="3" disabled>Disabled Option</ty-option>
- * <ty-option value="4">
- *   <strong>Rich</strong> <em>HTML</em> Content
- * </ty-option>
- * ```
- */
-/** Lucide `check` — shown on selected options (kept inline: shadow DOM can't rely on the icon registry) */
 const CHECK_SVG = `
-  <svg class="option-check" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-       stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-    <path d="M20 6 9 17l-5-5" />
-  </svg>
+<svg class="option-check" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+<path d="M20 6 9 17l-5-5" />
+</svg>
 `;
 export class TyOption extends HTMLElement {
-    constructor() {
-        super();
-        this._value = undefined;
-        this._selected = false;
-        this._disabled = false;
-        this._highlighted = false;
-        this._hidden = false;
-        const shadow = this.attachShadow({ mode: 'open' });
-        ensureStyles(shadow, { css: optionStyles, id: 'ty-option' });
-        this.render();
-    }
-    static get observedAttributes() {
-        return ['value', 'disabled', 'selected', 'highlighted', 'hidden'];
-    }
-    connectedCallback() {
-        // CRITICAL: Reagent/React may set properties BEFORE the element is constructed
-        // Check if value was set directly on the instance before our getter/setter was available
-        const instanceValue = Object.getOwnPropertyDescriptor(this, 'value');
-        if (instanceValue && instanceValue.value !== undefined) {
-            this._value = instanceValue.value;
-            // Clean up the instance property so our getter/setter works
-            delete this.value;
-        }
-        this.render();
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue === newValue)
-            return;
-        switch (name) {
-            case 'value':
-                this._value = newValue || undefined;
-                break;
-            case 'selected':
-                this._selected = newValue !== null;
-                break;
-            case 'disabled':
-                this._disabled = newValue !== null;
-                break;
-            case 'highlighted':
-                this._highlighted = newValue !== null;
-                break;
-            case 'hidden':
-                this._hidden = newValue !== null;
-                break;
-        }
-        this.render();
-    }
-    /**
-     * Get value from either property or attribute, with textContent fallback.
-     * Property takes precedence (for framework compatibility).
-     */
-    getOptionValue() {
-        // Explicit priority: property > attribute > textContent
-        // This correctly handles empty strings
-        if (this._value !== undefined) {
-            return this._value;
-        }
-        const attrValue = this.getAttribute('value');
-        if (attrValue !== null) {
-            return attrValue;
-        }
-        return this.textContent?.trim() || '';
-    }
-    // Public API - Getters/Setters
-    // NOTE: All setters trigger re-render to support property changes from frameworks like React
-    get value() {
-        return this.getOptionValue();
-    }
-    set value(val) {
-        if (this._value !== val) {
-            this._value = val;
-            if (val !== undefined) {
-                this.setAttribute('value', val);
-            }
-            else {
-                this.removeAttribute('value');
-            }
-            this.render();
-        }
-    }
-    get selected() {
-        return this._selected;
-    }
-    set selected(value) {
-        if (this._selected !== value) {
-            this._selected = value;
-            if (value) {
-                this.setAttribute('selected', '');
-            }
-            else {
-                this.removeAttribute('selected');
-            }
-            this.render();
-        }
-    }
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        if (this._disabled !== value) {
-            this._disabled = value;
-            if (value) {
-                this.setAttribute('disabled', '');
-            }
-            else {
-                this.removeAttribute('disabled');
-            }
-            this.render();
-        }
-    }
-    get highlighted() {
-        return this._highlighted;
-    }
-    set highlighted(value) {
-        if (this._highlighted !== value) {
-            this._highlighted = value;
-            if (value) {
-                this.setAttribute('highlighted', '');
-            }
-            else {
-                this.removeAttribute('highlighted');
-            }
-            this.render();
-        }
-    }
-    get hidden() {
-        return this._hidden;
-    }
-    set hidden(value) {
-        if (this._hidden !== value) {
-            this._hidden = value;
-            if (value) {
-                this.setAttribute('hidden', '');
-            }
-            else {
-                this.removeAttribute('hidden');
-            }
-            this.render();
-        }
-    }
-    /**
-   * Render the option component with rich HTML content and property sync
-   */
-    render() {
-        const shadow = this.shadowRoot;
-        // Create wrapper once — the check icon alone communicates selection;
-        // clicking a selected option again deselects it (see select.ts), so no
-        // separate clear affordance is needed on mobile.
-        if (!shadow.querySelector('.option-content')) {
-            shadow.innerHTML = `<div class="option-content"><slot></slot>${CHECK_SVG}</div>`;
-        }
-        // Update content wrapper attributes
-        const content = shadow.querySelector('.option-content');
-        if (content) {
-            // Disabled state
-            if (this._disabled) {
-                content.setAttribute('disabled', '');
-            }
-            else {
-                content.removeAttribute('disabled');
-            }
-            // Selected state
-            if (this._selected) {
-                content.setAttribute('selected', '');
-            }
-            else {
-                content.removeAttribute('selected');
-            }
-            // Highlighted state
-            if (this._highlighted) {
-                content.setAttribute('highlighted', '');
-            }
-            else {
-                content.removeAttribute('highlighted');
-            }
-            // Hidden state
-            if (this._hidden) {
-                content.setAttribute('hidden', '');
-            }
-            else {
-                content.removeAttribute('hidden');
-            }
-        }
-    }
-}
-// Register the custom element
+constructor() {
+super();
+this._value = undefined;
+this._selected = false;
+this._disabled = false;
+this._highlighted = false;
+this._hidden = false;
+const shadow = this.attachShadow({ mode: 'open' });
+ensureStyles(shadow, { css: optionStyles, id: 'ty-option' });
+this.render();
+}
+static get observedAttributes() {
+return ['value', 'disabled', 'selected', 'highlighted', 'hidden'];
+}
+connectedCallback() {
+const instanceValue = Object.getOwnPropertyDescriptor(this, 'value');
+if (instanceValue) {
+this._value = instanceValue.value;
+delete this.value;
+}
+this.render();
+}
+attributeChangedCallback(name, oldValue, newValue) {
+if (oldValue === newValue)
+return;
+switch (name) {
+case 'value':
+this._value = newValue || undefined;
+break;
+case 'selected':
+this._selected = newValue !== null;
+break;
+case 'disabled':
+this._disabled = newValue !== null;
+break;
+case 'highlighted':
+this._highlighted = newValue !== null;
+break;
+case 'hidden':
+this._hidden = newValue !== null;
+break;
+}
+this.render();
+}
+getOptionValue() {
+if (this._value !== undefined) {
+return this._value;
+}
+const attrValue = this.getAttribute('value');
+if (attrValue !== null) {
+return attrValue;
+}
+return this.textContent?.trim() || '';
+}
+get value() {
+return this.getOptionValue();
+}
+set value(val) {
+if (this._value !== val) {
+this._value = val;
+if (val !== undefined) {
+this.setAttribute('value', val);
+}
+else {
+this.removeAttribute('value');
+}
+this.render();
+}
+}
+get selected() {
+return this._selected;
+}
+set selected(value) {
+if (this._selected !== value) {
+this._selected = value;
+if (value) {
+this.setAttribute('selected', '');
+}
+else {
+this.removeAttribute('selected');
+}
+this.render();
+}
+}
+get disabled() {
+return this._disabled;
+}
+set disabled(value) {
+if (this._disabled !== value) {
+this._disabled = value;
+if (value) {
+this.setAttribute('disabled', '');
+}
+else {
+this.removeAttribute('disabled');
+}
+this.render();
+}
+}
+get highlighted() {
+return this._highlighted;
+}
+set highlighted(value) {
+if (this._highlighted !== value) {
+this._highlighted = value;
+if (value) {
+this.setAttribute('highlighted', '');
+}
+else {
+this.removeAttribute('highlighted');
+}
+this.render();
+}
+}
+get hidden() {
+return this._hidden;
+}
+set hidden(value) {
+if (this._hidden !== value) {
+this._hidden = value;
+if (value) {
+this.setAttribute('hidden', '');
+}
+else {
+this.removeAttribute('hidden');
+}
+this.render();
+}
+}
+render() {
+const shadow = this.shadowRoot;
+if (!shadow.querySelector('.option-content')) {
+shadow.innerHTML = `<div class="option-content"><slot></slot>${CHECK_SVG}</div>`;
+}
+const content = shadow.querySelector('.option-content');
+if (content) {
+if (this._disabled) {
+content.setAttribute('disabled', '');
+}
+else {
+content.removeAttribute('disabled');
+}
+if (this._selected) {
+content.setAttribute('selected', '');
+}
+else {
+content.removeAttribute('selected');
+}
+if (this._highlighted) {
+content.setAttribute('highlighted', '');
+}
+else {
+content.removeAttribute('highlighted');
+}
+if (this._hidden) {
+content.setAttribute('hidden', '');
+}
+else {
+content.removeAttribute('hidden');
+}
+}
+}
+}
 if (!customElements.get('ty-option')) {
-    customElements.define('ty-option', TyOption);
+customElements.define('ty-option', TyOption);
 }
-//# sourceMappingURL=option.js.map

package/lib/components/popup.d.ts

@@ -1,19 +1,6 @@
 /**
- * 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>
+ * Popup Component - click-triggered popup positioned against its PARENT element
+ * (the anchor). Stays open for interaction; closes on outside click or ESC.
  */
 import { type Placement } from '../utils/positioning.js';
 /**
@@ -33,11 +20,9 @@ export declare class TyPopup extends HTMLElement {
     closePopup?: () => void;
     openPopup?: () => void;
     togglePopup?: () => void;
-    /** Observed attributes */
     static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, _oldValue: string | null, _newValue: string | null): void;
 }
-//# sourceMappingURL=popup.d.ts.map