tyrell-components 1.0.0-RC13 → 1.0.0-RC14

package/lib/components/input.js

@@ -1,19 +1,3 @@
-/**
- * TyInput Web Component
- * PORTED FROM: clj/ty/components/input.cljs
- * Phase D: Complete with debounce feature for input and change events
- *
- * Enhanced input component with:
- * - Label, error messages, semantic styling
- * - Icon slots (start/end)
- * - Numeric formatting with shadow values
- * - Currency, percent, compact notation
- * - Format-on-blur / raw-on-focus behavior
- * - Debounce (0-5000ms) for input/change events
- * - Immediate event firing on blur (cancels pending debounce)
- *
- * NOTE: Checkbox functionality is in separate ty-checkbox component
- */
 import { TyComponent } from '../base/ty-component.js';
 import { ensureStyles } from '../utils/styles.js';
 import { syncCustomFlavorSheet } from '../utils/flavor-sheet.js';
@@ -21,70 +5,41 @@ import { inputStyles, inputCustomFlavorCss } from '../styles/input.js';
 import { formatNumber, parseNumericValue, shouldFormat as shouldFormatType } from '../utils/number-format.js';
 import { getEffectiveLocale, observeLocaleChanges } from '../utils/locale.js';
 import { REQUIRED_ICON_SVG } from '../utils/icons.js';
-/** Password reveal toggle icons (Lucide eye / eye-off) */
 const EYE_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>`;
 const EYE_OFF_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg>`;
 export class TyInput extends TyComponent {
     constructor() {
-        super(); // TyComponent handles attachInternals() and attachShadow()
-        // ============================================================================
-        // INTERNAL STATE - Not managed by PropertyManager
-        // NOTE: _internals provided by TyComponent base class
-        // ============================================================================
-        // Shadow value - parsed numeric value for formatting
+        super();
         this._shadowValue = null;
-        // Focus state - toggles format/raw display
         this._isFocused = false;
-        // Listener setup tracking
         this._listenersSetup = false;
-        // True when WE auto-set flavor to 'danger' because `error` was present, so we
-        // know to restore 'neutral' when the error clears (and not clobber a flavor
-        // the consumer set themselves).
         this._errorAutoDanger = false;
         this._customFlavorSheet = null;
-        // Store references to handlers for cleanup
         this._inputHandler = null;
         this._changeHandler = null;
         this._focusHandler = null;
         this._blurHandler = null;
-        // Debounce timers
         this._inputDebounceTimer = null;
         this._changeDebounceTimer = null;
-        // Apply styles to shadow root
         const shadow = this.shadowRoot;
         ensureStyles(shadow, { css: inputStyles, id: 'ty-input' });
     }
-    /**
-     * Called when component connects to DOM
-     * TyComponent already handled pre-connection property capture
-     */
     onConnect() {
-        // Initialize shadow value from current value property
         this.initializeShadowValue();
-        // NOTE: Event listeners are set up in render() after input element is created
-        // setupEventListeners() will be called after initial render
-        // Setup locale observer to watch for ancestor lang changes
         this._localeObserver = observeLocaleChanges(this, () => {
             this.render();
         });
         this._syncCustomFlavor();
     }
-    /** Custom (non-built-in) flavors — see utils/flavor-sheet.ts. */
     _syncCustomFlavor() {
         this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, this.flavor, ({ base }) => inputCustomFlavorCss(base));
     }
-    /**
-     * Called when component disconnects from DOM
-     */
     onDisconnect() {
-        // Clean up event listeners
         this.removeEventListeners();
-        // Cleanup locale observer
         if (this._localeObserver) {
             this._localeObserver();
             this._localeObserver = undefined;
         }
-        // Clear any pending debounce timers
         if (this._inputDebounceTimer !== null) {
             clearTimeout(this._inputDebounceTimer);
             this._inputDebounceTimer = null;
@@ -94,13 +49,6 @@ export class TyInput extends TyComponent {
             this._changeDebounceTimer = null;
         }
     }
-    // ============================================================================
-    // TYCOMPONENT LIFECYCLE HOOKS
-    // ============================================================================
-    /**
-     * Handle property changes - called BEFORE render
-     * This replaces the old attributeChangedCallback logic
-     */
     onPropertiesChanged(changes) {
         for (const { name, newValue } of changes) {
             switch (name) {
@@ -108,25 +56,20 @@ export class TyInput extends TyComponent {
                     this._syncCustomFlavor();
                     break;
                 case 'value':
-                    // Parse to shadow value for numeric types
                     this._shadowValue = this.parseShadowValue(newValue || '');
                     break;
                 case 'type':
-                    // Re-parse shadow value when type changes
                     const currentValue = this.getProperty('value') || '';
                     this._shadowValue = this.parseShadowValue(currentValue);
                     break;
                 case 'error':
                     if (newValue) {
-                        // Auto-set flavor to danger when an error appears on a neutral field
                         if (this.getProperty('flavor') === 'neutral') {
                             this.setProperty('flavor', 'danger');
                             this._errorAutoDanger = true;
                         }
                     }
                     else if (this._errorAutoDanger) {
-                        // Error cleared and WE were the ones who set danger → restore neutral
-                        // (live validation passing should drop the danger styling).
                         if (this.getProperty('flavor') === 'danger') {
                             this.setProperty('flavor', 'neutral');
                         }
@@ -136,16 +79,10 @@ export class TyInput extends TyComponent {
             }
         }
     }
-    /**
-     * Hook: Called when form is reset
-     * Clear shadow value and focus state
-     */
     onFormReset() {
-        // Reset shadow value to default (empty)
         this._shadowValue = null;
-        // Reset focus state
+        this.initializeShadowValue();
         this._isFocused = false;
-        // Clear any pending debounce timers
         if (this._inputDebounceTimer !== null) {
             clearTimeout(this._inputDebounceTimer);
             this._inputDebounceTimer = null;
@@ -156,33 +93,20 @@ export class TyInput extends TyComponent {
         }
         this.render();
     }
-    /**
-     * Override form value to return shadow value
-     * This ensures numeric types submit their parsed values
-     */
     getFormValue() {
         const formValue = this._shadowValue !== null ? String(this._shadowValue) : null;
         return formValue;
     }
-    /**
-     * Initialize shadow value from the initial value attribute
-     */
     initializeShadowValue() {
         const currentValue = this.getProperty('value');
         if (currentValue) {
             this._shadowValue = this.parseShadowValue(currentValue);
-            // Update form value
             this._internals.setFormValue(this._shadowValue !== null ? String(this._shadowValue) : null);
         }
     }
-    /**
-     * Parse a string value to the appropriate shadow value type
-     */
     parseShadowValue(value) {
-        // Defensive check: ensure value is actually a string before calling .trim()
         if (!value || typeof value !== 'string' || value.trim() === '')
             return null;
-        // For numeric types, parse to number
         if (shouldFormatType(this.type)) {
             const parsed = parseNumericValue(value);
             if (parsed !== null && this.precision === 0) {
@@ -190,37 +114,25 @@ export class TyInput extends TyComponent {
             }
             return parsed;
         }
-        // For other types, keep as string
         return value;
     }
-    /**
-     * Check if current input should format numbers
-     */
     shouldFormat() {
         return shouldFormatType(this.type) &&
             !this._isFocused &&
             this._shadowValue !== null &&
             typeof this._shadowValue === 'number';
     }
-    /**
-     * Get the format configuration for current input
-     */
     getFormatConfig() {
         return {
             type: this.type,
-            locale: this.locale, // Use getter which calls getEffectiveLocale correctly
+            locale: this.locale,
             currency: this.currency,
             precision: this.precision
         };
     }
-    /**
-     * Get the display value (formatted or raw)
-     */
     getDisplayValue() {
         if (this.shouldFormat()) {
             let valueToFormat = this._shadowValue;
-            // For percent: divide by 100 (user enters 15, displays as 15%)
-            // This matches ClojureScript behavior
             if (this.type === 'percent') {
                 valueToFormat = valueToFormat / 100;
             }
@@ -228,14 +140,8 @@ export class TyInput extends TyComponent {
         }
         return this._shadowValue !== null ? String(this._shadowValue) : '';
     }
-    // ============================================================================
-    // PROPERTY ACCESSORS - Simplified with TyComponent
-    // NOTE: validateFlavor removed - now handled by property configuration
-    // ============================================================================
-    // Core properties - simple getProperty/setProperty pattern
     get type() { return this.getProperty('type'); }
     set type(v) { this.setProperty('type', v); }
-    // Value - special getter returns shadow value
     get value() {
         return this._shadowValue !== null ? String(this._shadowValue) : '';
     }
@@ -256,26 +162,19 @@ export class TyInput extends TyComponent {
     set size(v) { this.setProperty('size', v); }
     get flavor() { return this.getProperty('flavor'); }
     set flavor(v) { this.setProperty('flavor', v); }
-    // Numeric formatting properties
     get currency() { return this.getProperty('currency'); }
     set currency(v) { this.setProperty('currency', v); }
-    // Locale - special getter uses getEffectiveLocale()
     get locale() {
         return getEffectiveLocale(this, this.getProperty('locale'));
     }
     set locale(v) { this.setProperty('locale', v); }
     get precision() { return this.getProperty('precision'); }
     set precision(v) { this.setProperty('precision', v); }
-    // Debounce property
     get debounce() { return this.getProperty('debounce'); }
     set debounce(v) { this.setProperty('debounce', v); }
-    // Form property
     get form() {
         return this._internals.form;
     }
-    /**
-     * Build CSS class list for input wrapper
-     */
     buildClassList() {
         const classes = [this.size];
         if (this.disabled)
@@ -286,9 +185,6 @@ export class TyInput extends TyComponent {
             classes.push('error');
         return classes.join(' ');
     }
-    /**
-     * Dispatch input event (helper method for debouncing)
-     */
     dispatchInputEvent(rawValue, originalEvent) {
         this.dispatchEvent(new CustomEvent('input', {
             detail: {
@@ -301,9 +197,6 @@ export class TyInput extends TyComponent {
             composed: true
         }));
     }
-    /**
-     * Dispatch change event (helper method for debouncing)
-     */
     dispatchChangeEvent(rawValue, originalEvent) {
         this.dispatchEvent(new CustomEvent('change', {
             detail: {
@@ -316,9 +209,6 @@ export class TyInput extends TyComponent {
             composed: true
         }));
     }
-    /**
-     * Remove event listeners for cleanup
-     */
     removeEventListeners() {
         if (!this._listenersSetup)
             return;
@@ -328,7 +218,6 @@ export class TyInput extends TyComponent {
         const inputEl = shadow.querySelector('input');
         if (!inputEl)
             return;
-        // Remove all event listeners using stored handler references
         if (this._inputHandler) {
             inputEl.removeEventListener('input', this._inputHandler);
             this._inputHandler = null;
@@ -347,13 +236,9 @@ export class TyInput extends TyComponent {
         }
         this._listenersSetup = false;
     }
-    /**
-   * Setup event listeners for input element
-   * IMPORTANT: Only called ONCE, not on every render (like ClojureScript)
-   */
     setupEventListeners() {
         if (this._listenersSetup) {
-            return; // Already setup
+            return;
         }
         const shadow = this.shadowRoot;
         const inputEl = shadow.querySelector('input');
@@ -362,70 +247,51 @@ export class TyInput extends TyComponent {
             console.warn('[TyInput.setupEventListeners] ⚠️ Input element not found!');
             return;
         }
-        // Create and store handler references for cleanup
-        // Input event - update shadow value and form (with debounce support)
         this._inputHandler = (e) => {
-            // Stop native event from propagating - only our custom event should bubble
             e.stopPropagation();
             e.stopImmediatePropagation();
             const target = e.target;
             const rawValue = target.value;
-            // Parse to shadow value
             this._shadowValue = this.parseShadowValue(rawValue);
-            // Update form value with shadow value
             this._internals.setFormValue(this._shadowValue !== null ? String(this._shadowValue) : null);
             this.updateValidity();
-            // Clear existing timer
             if (this._inputDebounceTimer !== null) {
                 clearTimeout(this._inputDebounceTimer);
             }
-            // If debounce is set, debounce the event
             if (this.debounce > 0) {
                 this._inputDebounceTimer = window.setTimeout(() => {
-                    // Use current value, not the captured rawValue
                     this.dispatchInputEvent(inputEl.value, e);
                     this._inputDebounceTimer = null;
                 }, this.debounce);
             }
             else {
-                // Fire immediately if no debounce
                 this.dispatchInputEvent(rawValue, e);
             }
         };
-        // Change event (with debounce support)
         this._changeHandler = (e) => {
-            // Stop native event from propagating - only our custom event should bubble
             e.stopPropagation();
             e.stopImmediatePropagation();
             const target = e.target;
             const rawValue = target.value;
-            // Parse to shadow value
             this._shadowValue = this.parseShadowValue(rawValue);
-            // Update form value
             this._internals.setFormValue(this._shadowValue !== null ? String(this._shadowValue) : null);
             this.updateValidity();
-            // Clear existing timer
             if (this._changeDebounceTimer !== null) {
                 clearTimeout(this._changeDebounceTimer);
             }
-            // If debounce is set, debounce the event
             if (this.debounce > 0) {
                 this._changeDebounceTimer = window.setTimeout(() => {
-                    // Use current value, not the captured rawValue
                     this.dispatchChangeEvent(inputEl.value, e);
                     this._changeDebounceTimer = null;
                 }, this.debounce);
             }
             else {
-                // Fire immediately if no debounce
                 this.dispatchChangeEvent(rawValue, e);
             }
         };
-        // Focus event - show raw value for numeric types
         this._focusHandler = (e) => {
             this._isFocused = true;
             wrapperEl.classList.add('focused');
-            // For numeric types, show raw shadow value
             if (shouldFormatType(this.type) && this._shadowValue !== null) {
                 inputEl.value = String(this._shadowValue);
             }
@@ -435,17 +301,14 @@ export class TyInput extends TyComponent {
                 composed: true
             }));
         };
-        // Blur event - fire pending debounced events immediately, then show formatted value
         this._blurHandler = (e) => {
             const target = e.target;
             const rawValue = target.value;
-            // Fire any pending debounced input event immediately on blur
             if (this._inputDebounceTimer !== null) {
                 clearTimeout(this._inputDebounceTimer);
                 this._inputDebounceTimer = null;
                 this.dispatchInputEvent(rawValue, e);
             }
-            // Fire any pending debounced change event immediately on blur
             if (this._changeDebounceTimer !== null) {
                 clearTimeout(this._changeDebounceTimer);
                 this._changeDebounceTimer = null;
@@ -453,7 +316,6 @@ export class TyInput extends TyComponent {
             }
             this._isFocused = false;
             wrapperEl.classList.remove('focused');
-            // For numeric types, show formatted value
             if (this.shouldFormat()) {
                 inputEl.value = this.getDisplayValue();
             }
@@ -463,18 +325,12 @@ export class TyInput extends TyComponent {
                 composed: true
             }));
         };
-        // Add event listeners
         inputEl.addEventListener('input', this._inputHandler);
         inputEl.addEventListener('change', this._changeHandler);
         inputEl.addEventListener('focus', this._focusHandler);
         inputEl.addEventListener('blur', this._blurHandler);
         this._listenersSetup = true;
     }
-    /**
-     * Render the input component with wrapper and slots
-     * Phase C: Uses getDisplayValue() for formatted output
-     *
-     */
     render() {
         const shadow = this.shadowRoot;
         const existingInput = shadow.querySelector('input');
@@ -482,19 +338,15 @@ export class TyInput extends TyComponent {
         const existingLabel = shadow.querySelector('.ty-field-label');
         const existingError = shadow.querySelector('.error-message');
         const classes = this.buildClassList();
-        // Map input type (all numeric types use 'text' in DOM, others pass through)
         const inputType = ['password', 'email', 'tel', 'url'].includes(this.type)
             ? this.type
             : 'text';
-        // Set inputmode for mobile keyboard hint
         const inputMode = shouldFormatType(this.type) ? 'decimal'
             : this.type === 'email' ? 'email'
                 : this.type === 'tel' ? 'tel'
                     : this.type === 'url' ? 'url'
                         : undefined;
-        // Get display value (formatted or raw based on focus)
         const displayValue = this.getDisplayValue();
-        // If input exists, just update properties (like ClojureScript does)
         if (existingInput && existingWrapper) {
             existingInput.type = inputType;
             existingInput.value = displayValue;
@@ -504,9 +356,7 @@ export class TyInput extends TyComponent {
                 existingInput.inputMode = inputMode;
             else
                 existingInput.removeAttribute('inputmode');
-            // Update wrapper classes
             existingWrapper.className = `input-wrapper ${classes}`;
-            // Set disabled property AND manage attribute
             existingInput.disabled = this.disabled;
             if (this.disabled) {
                 existingInput.setAttribute('disabled', '');
@@ -514,7 +364,6 @@ export class TyInput extends TyComponent {
             else {
                 existingInput.removeAttribute('disabled');
             }
-            // Set required property AND manage attribute
             existingInput.required = this.required;
             if (this.required) {
                 existingInput.setAttribute('required', '');
@@ -522,26 +371,19 @@ export class TyInput extends TyComponent {
             else {
                 existingInput.removeAttribute('required');
             }
-            // a11y: the shadow <label> isn't programmatically linked to this input,
-            // so give the control an accessible name directly.
             if (this.label)
                 existingInput.setAttribute('aria-label', this.label);
             else
                 existingInput.removeAttribute('aria-label');
-            // ===== BUG FIX: Dynamic label creation =====
-            // Update or CREATE label if needed
             if (this.label) {
                 if (existingLabel) {
-                    // Label exists, just update it
                     existingLabel.innerHTML = `${this.label}${this.required ? `<span class="required-icon">${REQUIRED_ICON_SVG}</span>` : ''}`;
                     existingLabel.style.display = 'flex';
                 }
                 else {
-                    // Label doesn't exist but we need one - CREATE IT!
                     const labelEl = document.createElement('label');
                     labelEl.className = 'ty-field-label';
                     labelEl.innerHTML = `${this.label}${this.required ? `<span class="required-icon">${REQUIRED_ICON_SVG}</span>` : ''}`;
-                    // Insert label BEFORE the input-wrapper
                     const container = shadow.querySelector('.input-container');
                     if (container) {
                         container.insertBefore(labelEl, existingWrapper);
@@ -549,11 +391,9 @@ export class TyInput extends TyComponent {
                 }
             }
             else if (existingLabel) {
-                // No label text, hide existing label
                 ;
                 existingLabel.style.display = 'none';
             }
-            // Update error message
             if (this.error) {
                 if (existingError) {
                     existingError.textContent = this.error;
@@ -570,7 +410,6 @@ export class TyInput extends TyComponent {
             }
         }
         else {
-            // Create initial structure with wrapper and slots
             const labelHtml = this.label ? `
           <label class="ty-field-label">
             ${this.label}
@@ -602,31 +441,22 @@ export class TyInput extends TyComponent {
             ${errorHtml}
           </div>
         `;
-            // Set boolean properties after creating element
             const inputEl = shadow.querySelector('input');
             inputEl.disabled = this.disabled;
             inputEl.required = this.required;
             if (this.label)
-                inputEl.setAttribute('aria-label', this.label); // a11y: name the control
+                inputEl.setAttribute('aria-label', this.label);
             this.setupPasswordToggle();
-            // Setup event listeners ONCE
             this.setupEventListeners();
         }
-        // Reflect constraint validation (required, etc.) to the owning <form>.
         this.updateValidity();
     }
-    /**
-     * Wire the password reveal toggle (rendered only for type="password").
-     * Toggles the NATIVE input's type between password/text — the component's
-     * `type` property stays "password" (form value and API unaffected).
-     */
     setupPasswordToggle() {
         const shadow = this.shadowRoot;
         const toggle = shadow.querySelector('.password-toggle');
         const inputEl = shadow.querySelector('input');
         if (!toggle || !inputEl)
             return;
-        // Keep focus in the input while clicking the toggle
         toggle.addEventListener('mousedown', (e) => e.preventDefault());
         toggle.addEventListener('click', () => {
             const reveal = inputEl.type === 'password';
@@ -636,12 +466,6 @@ export class TyInput extends TyComponent {
             toggle.setAttribute('aria-pressed', String(reveal));
         });
     }
-    /**
-     * Reflect constraint validation to the owning <form> via ElementInternals.
-     * Without this `required` is only cosmetic — the inner shadow <input> can't
-     * block the outer form. Empty + required => valueMissing; otherwise valid.
-     * Disabled fields are barred from constraint validation.
-     */
     updateValidity() {
         const inputEl = this.shadowRoot?.querySelector('input');
         if (this.disabled) {
@@ -658,11 +482,7 @@ export class TyInput extends TyComponent {
     }
 }
 TyInput.formAssociated = true;
-// ============================================================================
-// PROPERTY CONFIGURATION - Declarative property lifecycle
-// ============================================================================
 TyInput.properties = {
-    // Core properties
     type: {
         type: 'string',
         visual: true,
@@ -726,7 +546,6 @@ TyInput.properties = {
         type: 'string',
         visual: true,
         default: 'md',
-        // Fields come in exactly three sizes; legacy xs/xl map to sm/lg.
         validate: (v) => ['sm', 'md', 'lg'].includes(v),
         coerce: (v) => {
             if (v === 'xs')
@@ -740,15 +559,11 @@ TyInput.properties = {
             return v;
         }
     },
-    // Any string is accepted: built-ins get static CSS, other identifiers
-    // become custom flavors (see _syncCustomFlavor), garbage degrades to
-    // the default look.
     flavor: {
         type: 'string',
         visual: true,
         default: 'neutral'
     },
-    // Numeric formatting properties
     currency: {
         type: 'string',
         visual: true,
@@ -777,7 +592,6 @@ TyInput.properties = {
             return Math.max(0, Math.min(10, Math.floor(num)));
         }
     },
-    // Debounce property
     debounce: {
         type: 'number',
         default: 0,
@@ -793,8 +607,6 @@ TyInput.properties = {
         }
     }
 };
-// Register the custom element
 if (!customElements.get('ty-input')) {
     customElements.define('ty-input', TyInput);
 }
-//# sourceMappingURL=input.js.map

package/lib/components/modal.d.ts

@@ -1,28 +1,7 @@
 /**
- * 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>
+ * Modal Component - wrapper around the native <dialog> element providing
+ * backdrop, scroll locking and keyboard interaction, without styling content.
+ * Closing runs through a cancellable `beforeclose` event (unsaved-state flows).
  */
 /**
  * Modal attributes configuration
@@ -68,11 +47,23 @@ export declare class TyModal extends HTMLElement {
     hide?: (opts?: {
         force?: boolean;
     }) => void;
-    /** Observed attributes */
     static get observedAttributes(): string[];
+    get open(): boolean;
+    set open(v: boolean);
+    get backdrop(): boolean;
+    set backdrop(v: boolean);
+    /** @deprecated Use preventOutsideClick — prevent-* wins when both are set. */
+    get closeOnOutsideClick(): boolean;
+    set closeOnOutsideClick(v: boolean);
+    /** @deprecated Use preventEscape — prevent-* wins when both are set. */
+    get closeOnEscape(): boolean;
+    set closeOnEscape(v: boolean);
+    get preventOutsideClick(): boolean;
+    set preventOutsideClick(v: boolean);
+    get preventEscape(): boolean;
+    set preventEscape(v: boolean);
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(_name: string, _oldValue: string | null, _newValue: string | null): void;
 }
-//# sourceMappingURL=modal.d.ts.map