tyrell-components 1.0.0-TC45 → 1.0.0-TC47

package/lib/components/modal.js

@@ -1,71 +1,23 @@
-/**
- * Modal Component
- *
- * Pure wrapper for modal dialogs using the native <dialog> element.
- * Provides backdrop, focus management, scroll locking, and keyboard interaction
- * without imposing any styling on content.
- *
- * Features:
- * - Native dialog element wrapper
- * - Dual API: declarative (open attribute) and imperative (show/hide methods)
- * - Cancellable `beforeclose` lifecycle event for unsaved-state flows
- * - Auto-hiding close button on hover (desktop only)
- * - Scroll locking with unique modal IDs
- * - Customizable backdrop via CSS variables
- *
- * @example
- * <ty-modal id="my-modal">
- *   <div class="ty-elevated p-6 rounded-lg max-w-md">
- *     <h3 class="text-lg font-semibold mb-4">Modal Title</h3>
- *     <p class="ty-text- mb-4">Modal content here</p>
- *     <ty-button onclick="this.closest('ty-modal').hide()">
- *       Close
- *     </ty-button>
- *   </div>
- * </ty-modal>
- */
 import { lockScroll, unlockScroll } from '../utils/scroll-lock.js';
 import { ensureStyles } from '../utils/styles.js';
 import { modalStyles } from '../styles/modal.js';
-// ============================================================================
-// WeakMaps for State Management
-// ============================================================================
 const backdropClickHandlers = new WeakMap();
 const escapeKeyHandlers = new WeakMap();
 const closeButtonHandlers = new WeakMap();
 const hoverEnterHandlers = new WeakMap();
 const hoverLeaveHandlers = new WeakMap();
-const modalIds = new WeakMap(); // Store unique modal ID for scroll locking
-// ============================================================================
-// Constants
-// ============================================================================
-/**
- * SVG icon for the close button (Lucide X icon)
- */
+const modalIds = 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>`;
-// ============================================================================
-// Helper Functions
-// ============================================================================
-/**
- * Parse boolean attribute
- * Boolean attribute semantics: presence -> true, explicit 'false' -> false
- * Matches ClojureScript implementation
- */
 function parseBoolAttr(el, name) {
     if (!el.hasAttribute(name)) {
         return false;
     }
     const value = el.getAttribute(name);
-    // Explicit "false" string means false
     if (value !== null && value.toLowerCase() === 'false') {
         return false;
     }
-    // Attribute present (even empty) means true
     return true;
 }
-/**
- * Read modal attributes with defaults
- */
 function getModalAttributes(el) {
     return {
         open: parseBoolAttr(el, 'open'),
@@ -78,15 +30,9 @@ function getModalAttributes(el) {
             : true,
     };
 }
-/**
- * Get the modal dialog element from shadow root
- */
 function getModalDialog(shadowRoot) {
     return shadowRoot.querySelector('.ty-modal-dialog');
 }
-/**
- * Get or create a unique modal ID for scroll locking
- */
 function getModalId(el) {
     let id = modalIds.get(el);
     if (!id) {
@@ -95,15 +41,9 @@ function getModalId(el) {
     }
     return id;
 }
-/**
- * Check if device is mobile (for hover behavior)
- */
 function isMobile() {
     return window.innerWidth < 768 || navigator.maxTouchPoints > 0;
 }
-/**
- * Dispatch custom modal event
- */
 function dispatchModalEvent(el, eventType, detail) {
     const event = new CustomEvent(eventType, {
         detail,
@@ -112,12 +52,6 @@ function dispatchModalEvent(el, eventType, detail) {
     });
     el.dispatchEvent(event);
 }
-// ============================================================================
-// Dialog Structure Creation
-// ============================================================================
-/**
- * Ensure the internal dialog structure exists in shadow DOM
- */
 function ensureInternalDialog(shadowRoot) {
     let dialog = getModalDialog(shadowRoot);
     if (!dialog) {
@@ -125,45 +59,24 @@ function ensureInternalDialog(shadowRoot) {
         const closeButton = document.createElement('button');
         const contentDiv = document.createElement('div');
         const slot = document.createElement('slot');
-        // Setup dialog structure
         dialog.className = 'ty-modal-dialog';
-        // Setup close button with SVG icon
         closeButton.className = 'close-button';
         closeButton.type = 'button';
         closeButton.setAttribute('aria-label', 'Close modal');
         closeButton.innerHTML = CLOSE_ICON;
-        // Setup content container
         contentDiv.className = 'modal-content';
         contentDiv.appendChild(slot);
-        // Assemble: dialog > [close-button, content-div]
         dialog.appendChild(closeButton);
         dialog.appendChild(contentDiv);
         shadowRoot.appendChild(dialog);
     }
     return dialog;
 }
-// ============================================================================
-// Event Handlers
-// ============================================================================
-/**
- * Close modal with cancellable beforeclose lifecycle.
- *
- *   1. Emit `beforeclose` (cancellable, bubbles, composed). Consumers can
- *      `event.preventDefault()` to abort the close — render your own UI for
- *      unsaved-state flows.
- *   2. Remove the `open` attribute, which triggers the actual close.
- *
- * Callers pass `reason` so consumers can decide differently based on intent
- * (e.g. "OK to discard via ESC, but not via .hide() during a save").
- */
 function closeModal(el, reason = 'programmatic', opts) {
     const shadowRoot = el.shadowRoot;
     const dialog = shadowRoot ? getModalDialog(shadowRoot) : null;
     if (!dialog || !dialog.open)
         return;
-    // `force: true` bypasses the cancellable event. Used by consumers AFTER
-    // they've shown their own confirm UI and the user said "yes, close" —
-    // calling `.hide()` again without force would re-trigger their intercept.
     if (!opts?.force) {
         const beforeClose = new CustomEvent('beforeclose', {
             detail: { reason },
@@ -175,31 +88,20 @@ function closeModal(el, reason = 'programmatic', opts) {
         if (beforeClose.defaultPrevented)
             return;
     }
-    // Remove open attribute (triggers actual close).
     el.removeAttribute('open');
 }
-/**
- * Open modal programmatically
- */
 function openModal(el) {
     el.setAttribute('open', 'true');
 }
-/**
- * Handle backdrop click
- */
 function handleBackdropClick(el, event) {
     event.stopPropagation();
     const shadowRoot = el.shadowRoot;
     const dialog = shadowRoot ? getModalDialog(shadowRoot) : null;
-    // Only close if clicking on dialog backdrop (not content)
     if (dialog && event.target === dialog) {
         event.preventDefault();
         closeModal(el, 'backdrop');
     }
 }
-/**
- * Handle escape key press
- */
 function handleEscapeKey(el, event) {
     event.stopPropagation();
     if (event.key === 'Escape') {
@@ -207,17 +109,11 @@ function handleEscapeKey(el, event) {
         closeModal(el, 'escape');
     }
 }
-/**
- * Handle close button click
- */
 function handleCloseButtonClick(el, event) {
     event.preventDefault();
     event.stopPropagation();
     closeModal(el, 'close-button');
 }
-/**
- * Handle hover enter on modal content (hide close button)
- */
 function handleHoverEnter(_el, event) {
     const content = event.currentTarget;
     const dialog = content.closest('.ty-modal-dialog');
@@ -228,9 +124,6 @@ function handleHoverEnter(_el, event) {
         }
     }
 }
-/**
- * Handle hover leave on modal content (show close button)
- */
 function handleHoverLeave(_el, event) {
     const content = event.currentTarget;
     const dialog = content.closest('.ty-modal-dialog');
@@ -241,75 +134,55 @@ function handleHoverLeave(_el, event) {
         }
     }
 }
-/**
- * Setup backdrop click handling
- */
 function setupBackdropClick(el, dialog, enabled) {
-    // Remove existing listener
     const existingHandler = backdropClickHandlers.get(el);
     if (existingHandler) {
         dialog.removeEventListener('click', existingHandler);
         backdropClickHandlers.delete(el);
     }
-    // Add new listener if enabled
     if (enabled) {
         const handler = (e) => handleBackdropClick(el, e);
         backdropClickHandlers.set(el, handler);
         dialog.addEventListener('click', handler);
     }
 }
-/**
- * Setup escape key handling
- */
 function setupEscapeKey(el, dialog, enabled) {
-    // Remove existing listener
     const existingHandler = escapeKeyHandlers.get(el);
     if (existingHandler) {
         dialog.removeEventListener('keydown', existingHandler);
         escapeKeyHandlers.delete(el);
     }
-    // Add new listener if enabled
     if (enabled) {
         const handler = (e) => handleEscapeKey(el, e);
         escapeKeyHandlers.set(el, handler);
         dialog.addEventListener('keydown', handler);
     }
 }
-/**
- * Setup close button click handling and visibility
- */
 function setupCloseButton(el, dialog, showButton) {
     const closeButton = dialog.querySelector('.close-button');
     if (!closeButton)
         return;
-    // Show or hide close button based on close-on-outside-click setting
     if (showButton) {
         closeButton.style.display = '';
     }
     else {
         closeButton.style.display = 'none';
     }
-    // Remove existing listener
     const existingHandler = closeButtonHandlers.get(el);
     if (existingHandler) {
         closeButton.removeEventListener('click', existingHandler);
         closeButtonHandlers.delete(el);
     }
-    // Add click listener only if button is visible
     if (showButton) {
         const handler = (e) => handleCloseButtonClick(el, e);
         closeButtonHandlers.set(el, handler);
         closeButton.addEventListener('click', handler);
     }
 }
-/**
- * Setup close button hover handlers (desktop only)
- */
 function setupCloseButtonHover(el, dialog) {
     const modalContent = dialog.querySelector('.modal-content');
     if (!modalContent)
         return;
-    // Remove existing listeners
     const existingEnterHandler = hoverEnterHandlers.get(el);
     const existingLeaveHandler = hoverLeaveHandlers.get(el);
     if (existingEnterHandler) {
@@ -320,7 +193,6 @@ function setupCloseButtonHover(el, dialog) {
         modalContent.removeEventListener('mouseleave', existingLeaveHandler);
         hoverLeaveHandlers.delete(el);
     }
-    // Add hover listeners only on desktop
     if (!isMobile()) {
         const enterHandler = (e) => handleHoverEnter(el, e);
         const leaveHandler = (e) => handleHoverLeave(el, e);
@@ -330,12 +202,6 @@ function setupCloseButtonHover(el, dialog) {
         modalContent.addEventListener('mouseleave', leaveHandler);
     }
 }
-// ============================================================================
-// Core Render Function
-// ============================================================================
-/**
- * Render the modal structure and sync state
- */
 function render(el) {
     const shadowRoot = el.shadowRoot;
     if (!shadowRoot)
@@ -343,22 +209,14 @@ function render(el) {
     const attributes = getModalAttributes(el);
     const dialog = ensureInternalDialog(shadowRoot);
     const modalId = getModalId(el);
-    // Ensure styles are loaded
     ensureStyles(shadowRoot, { css: modalStyles, id: 'ty-modal' });
-    // Apply dialog class
     dialog.className = 'ty-modal-dialog';
-    // Apply backdrop attribute
     if (attributes.backdrop) {
         dialog.setAttribute('data-backdrop', 'true');
     }
     else {
         dialog.removeAttribute('data-backdrop');
     }
-    // Accessible name: <dialog> has an implicit role="dialog" for free, but
-    // nothing gives it a NAME unless the consumer's own slotted heading
-    // happens to get wired up manually. Opt-in `label` attribute (same
-    // pattern as ty-select/ty-date-picker's `label` prop) — unset stays
-    // exactly as before (no regression, just no fix without opting in).
     const label = el.getAttribute('label');
     if (label) {
         dialog.setAttribute('aria-label', label);
@@ -366,54 +224,35 @@ function render(el) {
     else {
         dialog.removeAttribute('aria-label');
     }
-    // Setup event handlers
     setupBackdropClick(el, dialog, attributes.closeOnOutsideClick);
     setupEscapeKey(el, dialog, attributes.closeOnEscape);
     setupCloseButton(el, dialog, attributes.closeOnOutsideClick);
     setupCloseButtonHover(el, dialog);
-    // Sync open state with native dialog
     if (attributes.open) {
         if (!dialog.open) {
-            // Lock scroll
             lockScroll(modalId);
-            // Show dialog
             if (attributes.backdrop) {
                 dialog.showModal();
             }
             else {
                 dialog.show();
             }
-            // Dispatch open event
             dispatchModalEvent(el, 'open', {});
         }
     }
     else {
         if (dialog.open) {
-            // Unlock scroll
             unlockScroll(modalId);
-            // Close dialog
             dialog.close();
-            // Dispatch close event
             dispatchModalEvent(el, 'close', {
                 reason: 'programmatic'
             });
         }
     }
-    // Handle dialog's native close event.
-    //
-    // Child components (ty-select, ty-date-picker) dispatch a
-    // bubbling+composed `close` custom event when their popups close. Those
-    // events bubble up to *this* dialog and trigger `onclose` too — without this
-    // guard, opening a dropdown inside a modal and closing the dropdown would
-    // close the whole modal. The native dialog `close` event is not composed
-    // and targets the dialog itself, so we only react when `event.target` is
-    // the dialog.
     dialog.onclose = (event) => {
         if (event.target !== dialog)
             return;
-        // Ensure scroll is unlocked
         unlockScroll(modalId);
-        // Sync the open attribute
         if (el.hasAttribute('open')) {
             el.removeAttribute('open');
             dispatchModalEvent(el, 'close', {
@@ -423,33 +262,26 @@ function render(el) {
         }
     };
 }
-/**
- * Cleanup all resources when component disconnects
- */
 function cleanup(el) {
     const modalId = modalIds.get(el);
     const shadowRoot = el.shadowRoot;
     const dialog = shadowRoot ? getModalDialog(shadowRoot) : null;
-    // Force unlock scroll if modal removed while open
     if (modalId) {
         unlockScroll(modalId);
         modalIds.delete(el);
     }
     if (!dialog)
         return;
-    // Cleanup backdrop click handler
     const backdropHandler = backdropClickHandlers.get(el);
     if (backdropHandler) {
         dialog.removeEventListener('click', backdropHandler);
         backdropClickHandlers.delete(el);
     }
-    // Cleanup escape key handler
     const escapeHandler = escapeKeyHandlers.get(el);
     if (escapeHandler) {
         dialog.removeEventListener('keydown', escapeHandler);
         escapeKeyHandlers.delete(el);
     }
-    // Cleanup close button handler
     const closeButton = dialog.querySelector('.close-button');
     if (closeButton) {
         const closeHandler = closeButtonHandlers.get(el);
@@ -458,7 +290,6 @@ function cleanup(el) {
             closeButtonHandlers.delete(el);
         }
     }
-    // Cleanup hover handlers
     const modalContent = dialog.querySelector('.modal-content');
     if (modalContent) {
         const enterHandler = hoverEnterHandlers.get(el);
@@ -473,14 +304,7 @@ function cleanup(el) {
         }
     }
 }
-// ============================================================================
-// Component Definition
-// ============================================================================
-/**
- * TyModal Web Component
- */
 export class TyModal extends HTMLElement {
-    /** Observed attributes */
     static get observedAttributes() {
         return ['open', 'backdrop', 'close-on-outside-click', 'close-on-escape', 'label'];
     }
@@ -490,7 +314,6 @@ export class TyModal extends HTMLElement {
     }
     connectedCallback() {
         render(this);
-        // Add public API methods
         this.show = () => openModal(this);
         this.hide = (opts) => closeModal(this, 'programmatic', opts);
     }
@@ -498,25 +321,15 @@ export class TyModal extends HTMLElement {
         cleanup(this);
     }
     attributeChangedCallback(_name, _oldValue, _newValue) {
-        // React (and any framework that conditionally mounts an already-open
-        // modal) sets initial attributes BEFORE inserting the element into the
-        // document, and showModal() on a disconnected <dialog> throws
-        // InvalidStateError. Defer — connectedCallback render()s on insertion
-        // and applies `open` then.
         if (!this.isConnected)
             return;
-        // Re-render on attribute changes
         render(this);
     }
 }
-// Register the custom element
 if (!customElements.get('ty-modal')) {
     customElements.define('ty-modal', TyModal);
 }
-// Also exposed as ty-dialog — the platform/ARIA name (wraps native <dialog>).
-// A constructor can only register once, hence the subclass.
 if (!customElements.get('ty-dialog')) {
     customElements.define('ty-dialog', class TyDialog extends TyModal {
     });
 }
-//# sourceMappingURL=modal.js.map

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,29 +1,5 @@
-/**
- * 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">
@@ -46,12 +22,9 @@ export class TyOption extends HTMLElement {
         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();
@@ -78,13 +51,7 @@ export class TyOption extends HTMLElement {
         }
         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;
         }
@@ -94,8 +61,6 @@ export class TyOption extends HTMLElement {
         }
         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();
     }
@@ -171,42 +136,31 @@ export class TyOption extends HTMLElement {
             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', '');
             }
@@ -216,8 +170,6 @@ export class TyOption extends HTMLElement {
         }
     }
 }
-// Register the custom element
 if (!customElements.get('ty-option')) {
     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