tyrell-components 1.0.0-RC10

package/lib/components/switch.js

@@ -0,0 +1,240 @@
+/**
+ * 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 { TyComponent } from "../base/ty-component.js";
+import { ensureStyles } from "../utils/styles.js";
+import { switchStyles } from "../styles/switch.js";
+export class TySwitch extends TyComponent {
+    constructor() {
+        super();
+        this._listenersSetup = false;
+        this._clickHandler = null;
+        this._keydownHandler = null;
+        this._focusHandler = null;
+        this._blurHandler = null;
+        const shadow = this.shadowRoot;
+        ensureStyles(shadow, { css: switchStyles, id: "ty-switch" });
+    }
+    onConnect() { }
+    onDisconnect() {
+        this.removeEventListeners();
+    }
+    onPropertiesChanged(_changes) { }
+    getFormValue() {
+        return this.checked ? this.value : null;
+    }
+    buildClassList() {
+        const classes = [this.size, this.flavor];
+        if (this.disabled)
+            classes.push("disabled");
+        if (this.required)
+            classes.push("required");
+        return classes.join(" ");
+    }
+    handleSwitchClick(e) {
+        if (this.disabled)
+            return;
+        const newValue = !this.checked;
+        this.checked = newValue;
+        setTimeout(() => {
+            const eventDetail = {
+                value: newValue,
+                checked: newValue,
+                formValue: newValue ? this.value : null,
+                originalEvent: e,
+            };
+            this.dispatchEvent(new CustomEvent("input", { detail: eventDetail, bubbles: true, composed: true }));
+            this.dispatchEvent(new CustomEvent("change", { detail: eventDetail, bubbles: true, composed: true }));
+        }, 0);
+    }
+    handleSwitchKeydown(e) {
+        if (this.disabled)
+            return;
+        if (["Space", " ", "Enter"].includes(e.key)) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.handleSwitchClick(e);
+        }
+    }
+    removeEventListeners() {
+        if (!this._listenersSetup)
+            return;
+        const shadow = this.shadowRoot;
+        if (!shadow)
+            return;
+        const el = shadow.querySelector(".switch-container");
+        if (!el)
+            return;
+        if (this._clickHandler) {
+            el.removeEventListener("click", this._clickHandler);
+            this._clickHandler = null;
+        }
+        if (this._keydownHandler) {
+            el.removeEventListener("keydown", this._keydownHandler);
+            this._keydownHandler = null;
+        }
+        if (this._focusHandler) {
+            el.removeEventListener("focus", this._focusHandler);
+            this._focusHandler = null;
+        }
+        if (this._blurHandler) {
+            el.removeEventListener("blur", this._blurHandler);
+            this._blurHandler = null;
+        }
+        this._listenersSetup = false;
+    }
+    setupEventListeners() {
+        if (this._listenersSetup)
+            return;
+        const shadow = this.shadowRoot;
+        const el = shadow.querySelector(".switch-container");
+        if (!el)
+            return;
+        this._clickHandler = (e) => this.handleSwitchClick(e);
+        this._keydownHandler = (e) => this.handleSwitchKeydown(e);
+        this._focusHandler = () => el.classList.add("focused");
+        this._blurHandler = () => el.classList.remove("focused");
+        el.addEventListener("click", this._clickHandler);
+        el.addEventListener("keydown", this._keydownHandler);
+        el.addEventListener("focus", this._focusHandler);
+        el.addEventListener("blur", this._blurHandler);
+        this._listenersSetup = true;
+    }
+    render() {
+        const shadow = this.shadowRoot;
+        let switchEl = shadow.querySelector(".switch-container");
+        const classes = this.buildClassList();
+        if (!switchEl) {
+            switchEl = document.createElement("div");
+            switchEl.className = "switch-container " + classes;
+            switchEl.tabIndex = this.disabled ? -1 : 0;
+            switchEl.setAttribute("role", "switch");
+            switchEl.setAttribute("aria-checked", this.checked ? "true" : "false");
+            switchEl.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+            switchEl.setAttribute("aria-required", this.required ? "true" : "false");
+            const track = document.createElement("div");
+            track.className = "switch-track";
+            const thumb = document.createElement("div");
+            thumb.className = "switch-thumb";
+            track.appendChild(thumb);
+            switchEl.appendChild(track);
+            shadow.appendChild(switchEl);
+            this.setupEventListeners();
+        }
+        else {
+            switchEl.className = "switch-container " + classes;
+            switchEl.tabIndex = this.disabled ? -1 : 0;
+            switchEl.setAttribute("aria-checked", this.checked ? "true" : "false");
+            switchEl.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+            switchEl.setAttribute("aria-required", this.required ? "true" : "false");
+        }
+    }
+    // ============================================================================
+    // PROPERTY ACCESSORS
+    // ============================================================================
+    get checked() { return this.getProperty("checked"); }
+    set checked(value) { this.setProperty("checked", value); }
+    get value() { return this.getProperty("value"); }
+    set value(val) { this.setProperty("value", val); }
+    get name() { return this.getProperty("name"); }
+    set name(val) { this.setProperty("name", val); }
+    get disabled() { return this.getProperty("disabled"); }
+    set disabled(value) { this.setProperty("disabled", value); }
+    get required() { return this.getProperty("required"); }
+    set required(value) { this.setProperty("required", value); }
+    get size() { return this.getProperty("size"); }
+    set size(value) { this.setProperty("size", value); }
+    get flavor() { return this.getProperty("flavor"); }
+    set flavor(value) { this.setProperty("flavor", value); }
+    get form() { return this._internals.form; }
+}
+TySwitch.formAssociated = true;
+TySwitch.properties = {
+    checked: {
+        type: "boolean",
+        visual: true,
+        formValue: true,
+        emitChange: true,
+        default: false,
+    },
+    value: {
+        type: "string",
+        default: "on",
+    },
+    name: {
+        type: "string",
+        default: "",
+    },
+    disabled: {
+        type: "boolean",
+        visual: true,
+        default: false,
+    },
+    required: {
+        type: "boolean",
+        visual: true,
+        default: false,
+    },
+    size: {
+        type: "string",
+        visual: true,
+        default: "md",
+        validate: (v) => ["xs", "sm", "md", "lg", "xl"].includes(v),
+        coerce: (v) => {
+            if (!["xs", "sm", "md", "lg", "xl"].includes(v)) {
+                console.warn(`[ty-switch] Invalid size '${v}'. Using 'md'.`);
+                return "md";
+            }
+            return v;
+        },
+    },
+    flavor: {
+        type: "string",
+        visual: true,
+        default: "primary",
+        validate: (v) => {
+            const valid = [
+                "primary",
+                "secondary",
+                "success",
+                "danger",
+                "warning",
+                "neutral",
+            ];
+            return valid.includes(v);
+        },
+        coerce: (v) => {
+            const valid = [
+                "primary",
+                "secondary",
+                "success",
+                "danger",
+                "warning",
+                "neutral",
+            ];
+            if (!valid.includes(v)) {
+                console.warn(`[ty-switch] Invalid flavor '${v}'. Using 'primary'.`);
+                return "primary";
+            }
+            return v;
+        },
+    },
+};
+if (!customElements.get("ty-switch")) {
+    customElements.define("ty-switch", TySwitch);
+}
+//# sourceMappingURL=switch.js.map

package/lib/components/switch.js.map

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

package/lib/components/tab.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Tab Component
+ *
+ * Individual tab panel with custom scrollbar via CustomScrollbar utility.
+ */
+export interface TabAttributes {
+    id: string | null;
+    label: string | null;
+    disabled: boolean;
+}
+export declare class TyTab 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=tab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../src/components/tab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAClB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,qBAAa,KAAM,SAAQ,WAAW;IACpC,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;IAgBvB,OAAO,CAAC,iBAAiB;IAQzB,WAAW,IAAI,IAAI;CAGpB"}

package/lib/components/tab.js

@@ -0,0 +1,76 @@
+/**
+ * Tab Component
+ *
+ * Individual tab panel with custom scrollbar via CustomScrollbar utility.
+ */
+import { ensureStyles } from '../utils/styles.js';
+import { tabStyles } from '../styles/tab.js';
+import { CustomScrollbar, isCustomScrollbarEnabled } from '../utils/custom-scrollbar.js';
+export class TyTab extends HTMLElement {
+    static get observedAttributes() {
+        return ['id', 'label', 'disabled'];
+    }
+    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('.tab-wrapper')) {
+            ensureStyles(shadowRoot, { css: tabStyles, id: 'ty-tab' });
+            shadowRoot.innerHTML = `
+        <div class="tab-wrapper"
+             role="tabpanel"
+             ${id ? `id="panel-${id}"` : ''}
+             ${id ? `aria-labelledby="tab-${id}"` : ''}
+        >
+          <div class="tab-panel">
+            <slot></slot>
+          </div>
+        </div>
+      `;
+            this._setupScrollbar();
+        }
+    }
+    _setupScrollbar() {
+        const panel = this.shadowRoot?.querySelector('.tab-panel');
+        const wrapper = this.shadowRoot?.querySelector('.tab-wrapper');
+        if (!panel || !wrapper)
+            return;
+        if (!isCustomScrollbarEnabled())
+            return;
+        panel.classList.add('ty-custom-scroll');
+        this._scrollbar = new CustomScrollbar(panel, { vertical: true });
+        // Append track to wrapper (outside the scroll area, so it stays fixed)
+        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-tab')) {
+    customElements.define('ty-tab', TyTab);
+}
+//# sourceMappingURL=tab.js.map

package/lib/components/tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../src/components/tab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AAQzF,MAAM,OAAO,KAAM,SAAQ,WAAW;IAGpC,MAAM,KAAK,kBAAkB;QAC3B,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC;IACrC,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,cAAc,CAAC,EAAE,CAAC;YAC9C,YAAY,CAAC,UAAU,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC;YAE3D,UAAU,CAAC,SAAS,GAAG;;;eAGd,EAAE,CAAC,CAAC,CAAC,aAAa,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE;eAC5B,EAAE,CAAC,CAAC,CAAC,wBAAwB,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE;;;;;;OAM/C,CAAC;YAEF,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAEO,eAAe;QACrB,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,YAAY,CAAgB,CAAC;QAC1E,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,cAAc,CAAgB,CAAC;QAC9E,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,uEAAuE;QACvE,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,QAAQ,CAAC,EAAE,CAAC;IAClC,cAAc,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;AACzC,CAAC"}

package/lib/components/tabs.d.ts

@@ -0,0 +1,93 @@
+/**
+ * Tabs Component
+ *
+ * A carousel-based tabs component with smooth animations and fixed container dimensions.
+ * Features horizontal sliding transitions, smart positioning marker, and independent panel scrolling.
+ *
+ * Features:
+ * - Carousel animation with smooth sliding transitions
+ * - Fixed dimensions prevent layout shift between tabs
+ * - Animated marker that follows active tab button
+ * - Rich label support via slots (icons, badges, custom content)
+ * - Custom marker slot for complete active tab styling control
+ * - Independent panel scrolling with scroll position reset
+ * - ResizeObserver for responsive percentage widths
+ * - Smart rendering - only updates DOM when necessary
+ * - Accessibility with ARIA roles and attributes
+ * - Top/bottom placement for tab buttons
+ *
+ * @example
+ * <!-- Basic tabs with text labels -->
+ * <ty-tabs width="800px" height="600px" active="general">
+ *   <ty-tab id="general" label="General Settings">
+ *     <div class="p-6">General content...</div>
+ *   </ty-tab>
+ *   <ty-tab id="advanced" label="Advanced Settings">
+ *     <div class="p-6">Advanced content...</div>
+ *   </ty-tab>
+ * </ty-tabs>
+ *
+ * @example
+ * <!-- Rich labels with icons and badges -->
+ * <ty-tabs width="800px" height="600px">
+ *   <!-- Rich label as direct child -->
+ *   <span slot="label-profile" class="flex items-center gap-2">
+ *     <ty-icon name="user" size="sm"></ty-icon>
+ *     Profile
+ *   </span>
+ *
+ *   <span slot="label-notifications" class="flex items-center gap-2">
+ *     <ty-icon name="bell" size="sm"></ty-icon>
+ *     Notifications
+ *     <span class="ty-bg-danger ty-text-danger++ px-2 py-0.5 rounded-full text-xs">5</span>
+ *   </span>
+ *
+ *   <!-- Tab panels -->
+ *   <ty-tab id="profile">...</ty-tab>
+ *   <ty-tab id="notifications">...</ty-tab>
+ * </ty-tabs>
+ *
+ * @example
+ * <!-- Custom marker styling -->
+ * <ty-tabs width="100%" height="400px">
+ *   <!-- Gradient marker slot -->
+ *   <div slot="marker" style="
+ *     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ *     border-radius: 0.5rem;
+ *     box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+ *   "></div>
+ *
+ *   <ty-tab id="tab1" label="Dashboard">...</ty-tab>
+ *   <ty-tab id="tab2" label="Analytics">...</ty-tab>
+ * </ty-tabs>
+ */
+/**
+ * Tabs container attributes configuration
+ */
+export interface TabsAttributes {
+    width: string;
+    height: string;
+    active: string | null;
+    placement: 'top' | 'bottom';
+}
+/**
+ * Tab change event detail
+ */
+export interface TabChangeDetail {
+    activeId: string;
+    activeIndex: number;
+    previousId: string | null;
+    previousIndex: number | null;
+}
+/**
+ * TyTabs Web Component
+ */
+export declare class TyTabs extends HTMLElement {
+    /** Observed attributes */
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}
+//# sourceMappingURL=tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AASH;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,SAAS,EAAE,KAAK,GAAG,QAAQ,CAAC;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AA+pBD;;GAEG;AACH,qBAAa,MAAO,SAAQ,WAAW;IACrC,0BAA0B;IAC1B,MAAM,KAAK,kBAAkB,aAE5B;;IAOD,iBAAiB;IAIjB,oBAAoB;IAIpB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;CAiBxF"}