tyrell-components 1.0.0-RC10

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

@@ -0,0 +1,51 @@
+/**
+ * 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>
+ * ```
+ */
+export declare class TyScrollContainer extends HTMLElement {
+    private _scrollWrapper;
+    private _shadowTop;
+    private _shadowBottom;
+    private _shadowLeft;
+    private _shadowRight;
+    private _scrollbar;
+    private _resizeObserver;
+    private _rafId;
+    static get observedAttributes(): string[];
+    get shadow(): boolean;
+    set shadow(value: boolean);
+    get maxHeight(): string | null;
+    set maxHeight(value: string | null);
+    get hideScrollbar(): boolean;
+    set hideScrollbar(value: boolean);
+    get customScrollbar(): boolean;
+    set customScrollbar(value: boolean);
+    get overflowX(): boolean;
+    set overflowX(value: boolean);
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private _setupScrollbar;
+    private _destroyScrollbar;
+    private _updateMaxHeight;
+    private _onScroll;
+    private _onSlotChange;
+    private _updateShadowState;
+    updateShadows(): void;
+    scrollToTop(smooth?: boolean): void;
+    scrollToBottom(smooth?: boolean): void;
+    scrollToLeft(smooth?: boolean): void;
+    scrollToRight(smooth?: boolean): void;
+    get scrollElement(): HTMLElement | null;
+}
+//# sourceMappingURL=scroll-container.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-container.d.ts","sourceRoot":"","sources":["../../src/components/scroll-container.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAMH,qBAAa,iBAAkB,SAAQ,WAAW;IAChD,OAAO,CAAC,cAAc,CAA2B;IACjD,OAAO,CAAC,UAAU,CAA2B;IAC7C,OAAO,CAAC,aAAa,CAA2B;IAChD,OAAO,CAAC,WAAW,CAA2B;IAC9C,OAAO,CAAC,YAAY,CAA2B;IAC/C,OAAO,CAAC,UAAU,CAA+B;IACjD,OAAO,CAAC,eAAe,CAA8B;IACrD,OAAO,CAAC,MAAM,CAAsB;IAEpC,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAID,IAAI,MAAM,IAAI,OAAO,CAEpB;IAED,IAAI,MAAM,CAAC,KAAK,EAAE,OAAO,EAGxB;IAED,IAAI,SAAS,IAAI,MAAM,GAAG,IAAI,CAE7B;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAIjC;IAED,IAAI,aAAa,IAAI,OAAO,CAE3B;IAED,IAAI,aAAa,CAAC,KAAK,EAAE,OAAO,EAG/B;IAED,IAAI,eAAe,IAAI,OAAO,CAE7B;IAED,IAAI,eAAe,CAAC,KAAK,EAAE,OAAO,EAGjC;IAED,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAG3B;;IA2BD,iBAAiB,IAAI,IAAI;IAsBzB,oBAAoB,IAAI,IAAI;IAe5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAkB9F,OAAO,CAAC,eAAe;IAcvB,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,gBAAgB;IAexB,OAAO,CAAC,SAAS,CAOhB;IAED,OAAO,CAAC,aAAa,CAGpB;IAID,OAAO,CAAC,kBAAkB;IAwB1B,aAAa,IAAI,IAAI;IAKrB,WAAW,CAAC,MAAM,UAAO,GAAG,IAAI;IAIhC,cAAc,CAAC,MAAM,UAAO,GAAG,IAAI;IAMnC,YAAY,CAAC,MAAM,UAAO,GAAG,IAAI;IAIjC,aAAa,CAAC,MAAM,UAAO,GAAG,IAAI;IAMlC,IAAI,aAAa,IAAI,WAAW,GAAG,IAAI,CAEtC;CACF"}

package/lib/components/scroll-container.js

@@ -0,0 +1,239 @@
+/**
+ * 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>
+ * ```
+ */
+import { ensureStyles } from '../utils/styles.js';
+import { scrollContainerStyles } from '../styles/scroll-container.js';
+import { CustomScrollbar } from '../utils/custom-scrollbar.js';
+export class TyScrollContainer extends HTMLElement {
+    static get observedAttributes() {
+        return ['shadow', 'max-height', 'hide-scrollbar', 'custom-scrollbar', 'overflow-x'];
+    }
+    // ============ Property Accessors ============
+    get shadow() {
+        return this.getAttribute('shadow') !== 'false';
+    }
+    set shadow(value) {
+        if (value)
+            this.removeAttribute('shadow');
+        else
+            this.setAttribute('shadow', 'false');
+    }
+    get maxHeight() {
+        return this.getAttribute('max-height');
+    }
+    set maxHeight(value) {
+        if (value)
+            this.setAttribute('max-height', value);
+        else
+            this.removeAttribute('max-height');
+        this._updateMaxHeight();
+    }
+    get hideScrollbar() {
+        return this.hasAttribute('hide-scrollbar');
+    }
+    set hideScrollbar(value) {
+        if (value)
+            this.setAttribute('hide-scrollbar', '');
+        else
+            this.removeAttribute('hide-scrollbar');
+    }
+    get customScrollbar() {
+        return this.hasAttribute('custom-scrollbar');
+    }
+    set customScrollbar(value) {
+        if (value)
+            this.setAttribute('custom-scrollbar', '');
+        else
+            this.removeAttribute('custom-scrollbar');
+    }
+    get overflowX() {
+        return this.hasAttribute('overflow-x');
+    }
+    set overflowX(value) {
+        if (value)
+            this.setAttribute('overflow-x', '');
+        else
+            this.removeAttribute('overflow-x');
+    }
+    constructor() {
+        super();
+        this._scrollWrapper = null;
+        this._shadowTop = null;
+        this._shadowBottom = null;
+        this._shadowLeft = null;
+        this._shadowRight = null;
+        this._scrollbar = null;
+        this._resizeObserver = null;
+        this._rafId = null;
+        // ============ Private: Scroll Handling ============
+        this._onScroll = () => {
+            if (this._rafId !== null)
+                return;
+            this._rafId = requestAnimationFrame(() => {
+                this._rafId = null;
+                this._updateShadowState();
+            });
+        };
+        this._onSlotChange = () => {
+            this._scrollbar?.update();
+            this._updateShadowState();
+        };
+        const shadow = this.attachShadow({ mode: 'open' });
+        ensureStyles(shadow, { css: scrollContainerStyles, id: 'ty-scroll-container' });
+        shadow.innerHTML = `
+      <div class="scroll-wrapper">
+        <slot></slot>
+      </div>
+      <div class="shadow-overlay">
+        <div class="shadow-top"></div>
+        <div class="shadow-bottom"></div>
+        <div class="shadow-left"></div>
+        <div class="shadow-right"></div>
+      </div>
+    `;
+        this._scrollWrapper = shadow.querySelector('.scroll-wrapper');
+        this._shadowTop = shadow.querySelector('.shadow-top');
+        this._shadowBottom = shadow.querySelector('.shadow-bottom');
+        this._shadowLeft = shadow.querySelector('.shadow-left');
+        this._shadowRight = shadow.querySelector('.shadow-right');
+    }
+    connectedCallback() {
+        this._scrollWrapper?.addEventListener('scroll', this._onScroll, { passive: true });
+        this._resizeObserver = new ResizeObserver(() => {
+            this._scrollbar?.update();
+            this._updateShadowState();
+        });
+        if (this._scrollWrapper) {
+            this._resizeObserver.observe(this._scrollWrapper);
+            const slot = this._scrollWrapper.querySelector('slot');
+            if (slot) {
+                slot.addEventListener('slotchange', this._onSlotChange);
+            }
+        }
+        this._updateMaxHeight();
+        this._updateShadowState();
+        this._setupScrollbar();
+    }
+    disconnectedCallback() {
+        this._scrollWrapper?.removeEventListener('scroll', this._onScroll);
+        this._destroyScrollbar();
+        if (this._resizeObserver) {
+            this._resizeObserver.disconnect();
+            this._resizeObserver = null;
+        }
+        if (this._rafId !== null) {
+            cancelAnimationFrame(this._rafId);
+            this._rafId = null;
+        }
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue)
+            return;
+        if (name === 'max-height') {
+            this._updateMaxHeight();
+            this._updateShadowState();
+            this._scrollbar?.update();
+        }
+        if (name === 'custom-scrollbar' || name === 'overflow-x') {
+            this._destroyScrollbar();
+            this._setupScrollbar();
+            this._updateShadowState();
+        }
+    }
+    // ============ Private: Scrollbar Setup ============
+    _setupScrollbar() {
+        if (!this._scrollWrapper || !this.customScrollbar)
+            return;
+        this._scrollbar = new CustomScrollbar(this._scrollWrapper, {
+            vertical: true,
+            horizontal: this.overflowX
+        });
+        // Append track elements to shadow DOM
+        const shadowRoot = this.shadowRoot;
+        if (this._scrollbar.trackY)
+            shadowRoot.appendChild(this._scrollbar.trackY);
+        if (this._scrollbar.trackX)
+            shadowRoot.appendChild(this._scrollbar.trackX);
+    }
+    _destroyScrollbar() {
+        if (this._scrollbar) {
+            // Remove track elements from DOM
+            this._scrollbar.trackY?.remove();
+            this._scrollbar.trackX?.remove();
+            this._scrollbar.destroy();
+            this._scrollbar = null;
+        }
+    }
+    // ============ Private: Max Height ============
+    _updateMaxHeight() {
+        if (this._scrollWrapper) {
+            const maxHeight = this.maxHeight;
+            if (maxHeight) {
+                this._scrollWrapper.style.setProperty('--scroll-max-height', maxHeight);
+                this._scrollWrapper.style.maxHeight = maxHeight;
+            }
+            else {
+                this._scrollWrapper.style.removeProperty('--scroll-max-height');
+                this._scrollWrapper.style.maxHeight = '';
+            }
+        }
+    }
+    // ============ Private: Shadow State ============
+    _updateShadowState() {
+        if (!this._scrollWrapper)
+            return;
+        const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } = this._scrollWrapper;
+        const threshold = 2;
+        if (this._shadowTop) {
+            this._shadowTop.classList.toggle('visible', scrollTop > threshold);
+        }
+        if (this._shadowBottom) {
+            this._shadowBottom.classList.toggle('visible', scrollTop + clientHeight < scrollHeight - threshold);
+        }
+        if (this.overflowX) {
+            if (this._shadowLeft) {
+                this._shadowLeft.classList.toggle('visible', scrollLeft > threshold);
+            }
+            if (this._shadowRight) {
+                this._shadowRight.classList.toggle('visible', scrollLeft + clientWidth < scrollWidth - threshold);
+            }
+        }
+    }
+    // ============ Public API ============
+    updateShadows() {
+        this._updateShadowState();
+        this._scrollbar?.update();
+    }
+    scrollToTop(smooth = true) {
+        this._scrollWrapper?.scrollTo({ top: 0, behavior: smooth ? 'smooth' : 'auto' });
+    }
+    scrollToBottom(smooth = true) {
+        if (this._scrollWrapper) {
+            this._scrollWrapper.scrollTo({ top: this._scrollWrapper.scrollHeight, behavior: smooth ? 'smooth' : 'auto' });
+        }
+    }
+    scrollToLeft(smooth = true) {
+        this._scrollWrapper?.scrollTo({ left: 0, behavior: smooth ? 'smooth' : 'auto' });
+    }
+    scrollToRight(smooth = true) {
+        if (this._scrollWrapper) {
+            this._scrollWrapper.scrollTo({ left: this._scrollWrapper.scrollWidth, behavior: smooth ? 'smooth' : 'auto' });
+        }
+    }
+    get scrollElement() {
+        return this._scrollWrapper;
+    }
+}
+// Register custom element
+customElements.define('ty-scroll-container', TyScrollContainer);
+//# sourceMappingURL=scroll-container.js.map

package/lib/components/scroll-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-container.js","sourceRoot":"","sources":["../../src/components/scroll-container.ts"],"names":[],"mappings":"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"}

package/lib/components/step.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Step Component
+ *
+ * Individual wizard step panel with custom scrollbar via CustomScrollbar utility.
+ */
+export type StepStatus = 'completed' | 'active' | 'pending' | 'error';
+export interface StepAttributes {
+    id: string | null;
+    label: string | null;
+    description: string | null;
+    disabled: boolean;
+    status: StepStatus | null;
+}
+export declare class TyStep extends HTMLElement {
+    private _scrollbar;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(_name: string, _oldValue: string | null, _newValue: string | null): void;
+    private _render;
+    private _setupScrollbar;
+    private _destroyScrollbar;
+    resetScroll(): void;
+}
+//# sourceMappingURL=step.d.ts.map

package/lib/components/step.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../src/components/step.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;AAEtE,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAClB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,UAAU,GAAG,IAAI,CAAC;CAC3B;AAED,qBAAa,MAAO,SAAQ,WAAW;IACrC,OAAO,CAAC,UAAU,CAA+B;IAEjD,MAAM,KAAK,kBAAkB,aAE5B;;IAOD,iBAAiB;IAIjB,oBAAoB;IAIpB,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI;IAI1F,OAAO,CAAC,OAAO;IAyBf,OAAO,CAAC,eAAe;IAevB,OAAO,CAAC,iBAAiB;IAQzB,WAAW,IAAI,IAAI;CAGpB"}

package/lib/components/step.js

@@ -0,0 +1,75 @@
+/**
+ * Step Component
+ *
+ * Individual wizard step panel with custom scrollbar via CustomScrollbar utility.
+ */
+import { ensureStyles } from '../utils/styles.js';
+import { stepStyles } from '../styles/step.js';
+import { CustomScrollbar, isCustomScrollbarEnabled } from '../utils/custom-scrollbar.js';
+export class TyStep extends HTMLElement {
+    static get observedAttributes() {
+        return ['id', 'label', 'description', 'disabled', 'status'];
+    }
+    constructor() {
+        super();
+        this._scrollbar = null;
+        this.attachShadow({ mode: 'open' });
+    }
+    connectedCallback() {
+        this._render();
+    }
+    disconnectedCallback() {
+        this._destroyScrollbar();
+    }
+    attributeChangedCallback(_name, _oldValue, _newValue) {
+        this._render();
+    }
+    _render() {
+        const shadowRoot = this.shadowRoot;
+        if (!shadowRoot)
+            return;
+        const id = this.getAttribute('id');
+        if (!shadowRoot.querySelector('.step-wrapper')) {
+            ensureStyles(shadowRoot, { css: stepStyles, id: 'ty-step' });
+            shadowRoot.innerHTML = `
+        <div class="step-wrapper"
+             role="tabpanel"
+             ${id ? `id="panel-${id}"` : ''}
+             ${id ? `aria-labelledby="step-${id}"` : ''}
+        >
+          <div class="step-panel">
+            <slot></slot>
+          </div>
+        </div>
+      `;
+            this._setupScrollbar();
+        }
+    }
+    _setupScrollbar() {
+        const panel = this.shadowRoot?.querySelector('.step-panel');
+        const wrapper = this.shadowRoot?.querySelector('.step-wrapper');
+        if (!panel || !wrapper)
+            return;
+        if (!isCustomScrollbarEnabled())
+            return;
+        panel.classList.add('ty-custom-scroll');
+        this._scrollbar = new CustomScrollbar(panel, { vertical: true });
+        if (this._scrollbar.trackY) {
+            wrapper.appendChild(this._scrollbar.trackY);
+        }
+    }
+    _destroyScrollbar() {
+        if (this._scrollbar) {
+            this._scrollbar.trackY?.remove();
+            this._scrollbar.destroy();
+            this._scrollbar = null;
+        }
+    }
+    resetScroll() {
+        this._scrollbar?.scrollToTop(false);
+    }
+}
+if (!customElements.get('ty-step')) {
+    customElements.define('ty-step', TyStep);
+}
+//# sourceMappingURL=step.js.map

package/lib/components/step.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"step.js","sourceRoot":"","sources":["../../src/components/step.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AAYzF,MAAM,OAAO,MAAO,SAAQ,WAAW;IAGrC,MAAM,KAAK,kBAAkB;QAC3B,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;IAC9D,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QAPF,eAAU,GAA2B,IAAI,CAAA;QAQ/C,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;IACtC,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,OAAO,EAAE,CAAC;IACjB,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAED,wBAAwB,CAAC,KAAa,EAAE,SAAwB,EAAE,SAAwB;QACxF,IAAI,CAAC,OAAO,EAAE,CAAC;IACjB,CAAC;IAEO,OAAO;QACb,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;QACnC,IAAI,CAAC,UAAU;YAAE,OAAO;QAExB,MAAM,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QAEnC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,EAAE,CAAC;YAC/C,YAAY,CAAC,UAAU,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC;YAE7D,UAAU,CAAC,SAAS,GAAG;;;eAGd,EAAE,CAAC,CAAC,CAAC,aAAa,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE;eAC5B,EAAE,CAAC,CAAC,CAAC,yBAAyB,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE;;;;;;OAMhD,CAAC;YAEF,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAEO,eAAe;QACrB,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,aAAa,CAAgB,CAAC;QAC3E,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,eAAe,CAAgB,CAAC;QAC/E,IAAI,CAAC,KAAK,IAAI,CAAC,OAAO;YAAE,OAAO;QAE/B,IAAI,CAAC,wBAAwB,EAAE;YAAE,OAAO;QAExC,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;QACxC,IAAI,CAAC,UAAU,GAAG,IAAI,eAAe,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QAEjE,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;YAC3B,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC;IAEO,iBAAiB;QACvB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC;YACjC,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC;YAC1B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACzB,CAAC;IACH,CAAC;IAED,WAAW;QACT,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IACtC,CAAC;CACF;AAED,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;IACnC,cAAc,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AAC3C,CAAC"}

package/lib/components/switch.d.ts

@@ -0,0 +1,111 @@
+/**
+ * TySwitch Web Component
+ *
+ * "Just the toggle" primitive — renders only the track + thumb visual.
+ * Label, required asterisk, and error display are the consumer's
+ * responsibility — wrap in a `<label>` for click delegation.
+ *
+ * - Boolean checked state, role="switch" ARIA
+ * - Form-associated, keyboard accessibility
+ * - Sizes (xs, sm, md, lg, xl) and semantic flavors
+ *
+ * @example
+ * <label>
+ *   <ty-switch name="notifications" checked></ty-switch>
+ *   Email notifications
+ * </label>
+ */
+import type { Flavor, Size } from "../types/common.js";
+import { TyComponent } from "../base/ty-component.js";
+import type { PropertyChange } from "../utils/property-manager.js";
+interface SwitchState {
+    checked: boolean;
+    listenersSetup: boolean;
+}
+export interface TySwitchElement extends HTMLElement {
+    checked: boolean;
+    value: string;
+    name: string;
+    disabled: boolean;
+    required: boolean;
+    size: Size;
+    flavor: Flavor;
+    form: HTMLFormElement | null;
+}
+export declare class TySwitch extends TyComponent<SwitchState> implements TySwitchElement {
+    static formAssociated: boolean;
+    protected static properties: {
+        checked: {
+            type: "boolean";
+            visual: boolean;
+            formValue: boolean;
+            emitChange: boolean;
+            default: boolean;
+        };
+        value: {
+            type: "string";
+            default: string;
+        };
+        name: {
+            type: "string";
+            default: string;
+        };
+        disabled: {
+            type: "boolean";
+            visual: boolean;
+            default: boolean;
+        };
+        required: {
+            type: "boolean";
+            visual: boolean;
+            default: boolean;
+        };
+        size: {
+            type: "string";
+            visual: boolean;
+            default: string;
+            validate: (v: any) => boolean;
+            coerce: (v: any) => any;
+        };
+        flavor: {
+            type: "string";
+            visual: boolean;
+            default: string;
+            validate: (v: any) => boolean;
+            coerce: (v: any) => any;
+        };
+    };
+    private _listenersSetup;
+    private _clickHandler;
+    private _keydownHandler;
+    private _focusHandler;
+    private _blurHandler;
+    constructor();
+    protected onConnect(): void;
+    protected onDisconnect(): void;
+    protected onPropertiesChanged(_changes: PropertyChange[]): void;
+    protected getFormValue(): FormDataEntryValue | null;
+    private buildClassList;
+    private handleSwitchClick;
+    private handleSwitchKeydown;
+    private removeEventListeners;
+    private setupEventListeners;
+    protected render(): void;
+    get checked(): boolean;
+    set checked(value: boolean);
+    get value(): string;
+    set value(val: string);
+    get name(): string;
+    set name(val: string);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get required(): boolean;
+    set required(value: boolean);
+    get size(): Size;
+    set size(value: Size);
+    get flavor(): Flavor;
+    set flavor(value: Flavor);
+    get form(): HTMLFormElement | null;
+}
+export {};
+//# sourceMappingURL=switch.d.ts.map

package/lib/components/switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/components/switch.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAInE,UAAU,WAAW;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,IAAI,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,eAAe,GAAG,IAAI,CAAC;CAC9B;AAED,qBAAa,QACX,SAAQ,WAAW,CAAC,WAAW,CAC/B,YAAW,eAAe;IAC1B,MAAM,CAAC,cAAc,UAAQ;IAE7B,SAAS,CAAC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA8BT,GAAG;wBACL,GAAG;;;;;;0BAYD,GAAG;wBAWL,GAAG;;MAgBjB;IAEF,OAAO,CAAC,eAAe,CAAkB;IACzC,OAAO,CAAC,aAAa,CAAqC;IAC1D,OAAO,CAAC,eAAe,CAAqC;IAC5D,OAAO,CAAC,aAAa,CAA6B;IAClD,OAAO,CAAC,YAAY,CAA6B;;IAQjD,SAAS,CAAC,SAAS,IAAI,IAAI;IAC3B,SAAS,CAAC,YAAY,IAAI,IAAI;IAG9B,SAAS,CAAC,mBAAmB,CAAC,QAAQ,EAAE,cAAc,EAAE,GAAG,IAAI;IAE/D,SAAS,CAAC,YAAY,IAAI,kBAAkB,GAAG,IAAI;IAInD,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,iBAAiB;IAqBzB,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,oBAAoB;IA0B5B,OAAO,CAAC,mBAAmB;IAmB3B,SAAS,CAAC,MAAM,IAAI,IAAI;IAoCxB,IAAI,OAAO,IAAI,OAAO,CAAwC;IAC9D,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAAyC;IAEnE,IAAI,KAAK,IAAI,MAAM,CAAsC;IACzD,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAAqC;IAE1D,IAAI,IAAI,IAAI,MAAM,CAAqC;IACvD,IAAI,IAAI,CAAC,GAAG,EAAE,MAAM,EAAoC;IAExD,IAAI,QAAQ,IAAI,OAAO,CAAyC;IAChE,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAA0C;IAErE,IAAI,QAAQ,IAAI,OAAO,CAAyC;IAChE,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAA0C;IAErE,IAAI,IAAI,IAAI,IAAI,CAA6C;IAC7D,IAAI,IAAI,CAAC,KAAK,EAAE,IAAI,EAAsC;IAE1D,IAAI,MAAM,IAAI,MAAM,CAAiD;IACrE,IAAI,MAAM,CAAC,KAAK,EAAE,MAAM,EAAwC;IAEhE,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAAiC;CACpE"}