tyrell-components 1.0.0-RC13 → 1.0.0-RC15

package/lib/components/tab.d.ts

@@ -1,8 +1,4 @@
-/**
- * Tab Component
- *
- * Individual tab panel with custom scrollbar via CustomScrollbar utility.
- */
+/** Individual tab panel with custom scrollbar via CustomScrollbar utility. */
 export interface TabAttributes {
     id: string | null;
     label: string | null;
@@ -20,4 +16,3 @@ export declare class TyTab extends HTMLElement {
     private _destroyScrollbar;
     resetScroll(): void;
 }
-//# sourceMappingURL=tab.d.ts.map

package/lib/components/tab.js

@@ -1,76 +1,69 @@
-/**
- * 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);
-    }
+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 });
+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);
+customElements.define('ty-tab', TyTab);
 }
-//# sourceMappingURL=tab.js.map

package/lib/components/tabs.d.ts

@@ -1,65 +1,7 @@
 /**
- * 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 Component — carousel-based tabs with sliding transitions, an animated
+ * active marker, and fixed container dimensions. Expects `ty-tab` children;
+ * rich labels come from `slot="label-{tab-id}"` children of `ty-tabs` itself.
  */
 /**
  * Tabs container attributes configuration
@@ -69,6 +11,7 @@ export interface TabsAttributes {
     height: string;
     active: string | null;
     placement: 'top' | 'bottom';
+    fixed: boolean;
 }
 /**
  * Tab change event detail
@@ -83,11 +26,11 @@ export interface TabChangeDetail {
  * TyTabs Web Component
  */
 export declare class TyTabs extends HTMLElement {
-    /** Observed attributes */
     static get observedAttributes(): string[];
     constructor();
+    private _childObserver;
+    private _childRenderQueued;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }
-//# sourceMappingURL=tabs.d.ts.map