@styloviz/tabs 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 StyloViz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,57 @@
+# @styloviz/tabs
+
+> 6 visual styles (underline, pills, boxed, lifted, border-card, unstyled), closable and scrollable tabs, vertical layout, keyboard navigation and lazy panels.
+
+Part of the **StyloViz UI Kit** — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, `OnPush`, strongly typed, dark-mode ready.
+
+## Installation
+
+```bash
+npm install @styloviz/core @styloviz/tabs
+```
+
+Requires `@angular/core` and `@angular/common` >= 21. `@styloviz/core` is a peer dependency shared by every component. Prefer everything at once? `@styloviz/all` installs the whole free tier in one command.
+
+## Usage
+
+```ts
+import { SvTabsComponent } from '@styloviz/tabs';
+
+@Component({
+  standalone: true,
+  imports: [SvTabsComponent],
+  template: `
+    <sv-tabs [tabs]="tabs">
+      <ng-template svTabPanel="overview">…</ng-template>
+    </sv-tabs>
+  `,
+})
+export class DemoComponent {}
+```
+
+## Inputs
+
+| Input | Type | Default | Description |
+| --- | --- | --- | --- |
+| `tabs` | `TabItem[]` | `[]` | Tab definitions in display order. |
+| `activeId` | `string (two-way)` | `''` | ID of the currently active tab. Use `[(activeId)]` for two-way binding. |
+| `tabsStyle` | `TabsStyle` | `'underline'` | Visual style variant. |
+| `size` | `TabsSize` | `'md'` | Size of the tab text and icons. |
+| `layout` | `TabsLayout` | `'horizontal'` | Layout direction. |
+| `fullWidth` | `boolean` | `false` | Whether tab buttons stretch to fill all available width. Only applicable to the `'horizontal'` layout. |
+| `scrollable` | `boolean` | `false` | Allows the tab list to scroll horizontally instead of wrapping/overflowing when there are more tabs than fit the available width. |
+| `customClass` | `string` | `''` | Additional CSS classes on the root wrapper. |
+
+## Outputs
+
+| Output | Type | Description |
+| --- | --- | --- |
+| `tabClose` | `TabItem` | Emitted when a tab's close (×) button is clicked. The tab is NOT removed automatically — remove it from `tabs` yourself. |
+
+## Documentation
+
+Full API reference and live demos: https://styloviz.dev/docs/tabs
+
+## License
+
+MIT

package/fesm2022/styloviz-tabs.mjs

@@ -0,0 +1,339 @@
+import * as i0 from '@angular/core';
+import { input, inject, TemplateRef, Directive, model, output, contentChildren, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
+
+// ─── Tab Panel Directive ──────────────────────────────────────────────────────
+/**
+ * TabPanelDirective — marks a `<ng-template>` as content for a specific tab.
+ *
+ * Usage:
+ * ```html
+ * <sv-tabs [tabs]="tabs" [(activeId)]="active">
+ *   <ng-template svTabPanel="settings">Settings content…</ng-template>
+ *   <ng-template svTabPanel="profile">Profile content…</ng-template>
+ * </sv-tabs>
+ * ```
+ */
+class SvTabPanelDirective {
+    /** Must match a `TabItem.id`. */
+    tabId = input.required({ ...(ngDevMode ? { debugName: "tabId" } : /* istanbul ignore next */ {}), alias: 'svTabPanel' });
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvTabPanelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", type: SvTabPanelDirective, isStandalone: true, selector: "[svTabPanel]", inputs: { tabId: { classPropertyName: "tabId", publicName: "svTabPanel", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvTabPanelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[svTabPanel]',
+                    standalone: true,
+                }]
+        }], propDecorators: { tabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "svTabPanel", required: true }] }] } });
+// ─── Component ───────────────────────────────────────────────────────────────
+/**
+ * Tabs — A horizontal (or vertical) tab switcher with content projection.
+ *
+ * Features:
+ * - 6 visual styles: underline · pills · boxed · lifted · border-card · unstyled
+ * - `unstyled` strips all decorative classes for fully headless theming — pairs with the
+ *   `data-active`/`data-disabled` attributes exposed on every tab button for custom CSS
+ * - `border-card` wraps the tab row and panel in one cohesive bordered card
+ * - Horizontal and vertical layout modes
+ * - Keyboard navigation: ← → (horizontal) / ↑ ↓ (vertical), Home, End
+ * - Optional icon, badge, unread dot, and closable (×) button per tab
+ * - Optional horizontal scrolling for tab lists that overflow their container
+ * - Disabled tab support
+ * - Lazy rendering — tab panel content is only inserted into the DOM after
+ *   first activation (prevents layout shift on initial paint)
+ * - Two-way `activeId` binding via `model()`
+ * - Content projection via `svTabPanel` directive on `<ng-template>` tags
+ * - Full dark-mode support
+ * - Accessible: `role="tablist"`, `role="tab"`, `role="tabpanel"`,
+ *   `aria-selected`, `aria-controls`, `aria-disabled`
+ *
+ * **Content projection:**
+ * ```html
+ * <sv-tabs [tabs]="myTabs" [(activeId)]="activeTab">
+ *   <ng-template svTabPanel="general">General settings…</ng-template>
+ *   <ng-template svTabPanel="security">Security settings…</ng-template>
+ * </sv-tabs>
+ * ```
+ *
+ * **No-projection (external panel control):**
+ * Omit `<ng-template>` children and react to `(activeIdChange)` instead.
+ */
+class SvTabsComponent {
+    // ── Inputs ────────────────────────────────────────────────────────────────
+    /** Tab definitions in display order. */
+    tabs = input([], ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    /** ID of the currently active tab. Use `[(activeId)]` for two-way binding. */
+    activeId = model('', ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
+    /** Visual style variant. @default 'underline' */
+    tabsStyle = input('underline', ...(ngDevMode ? [{ debugName: "tabsStyle" }] : /* istanbul ignore next */ []));
+    /** Size of the tab text and icons. @default 'md' */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Layout direction. @default 'horizontal' */
+    layout = input('horizontal', ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether tab buttons stretch to fill all available width.
+     * Only applicable to the `'horizontal'` layout. @default false
+     */
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
+    /**
+     * Allows the tab list to scroll horizontally instead of wrapping/overflowing
+     * when there are more tabs than fit the available width. @default false
+     */
+    scrollable = input(false, ...(ngDevMode ? [{ debugName: "scrollable" }] : /* istanbul ignore next */ []));
+    /** Additional CSS classes on the root wrapper. */
+    customClass = input('', ...(ngDevMode ? [{ debugName: "customClass" }] : /* istanbul ignore next */ []));
+    // ── Outputs ───────────────────────────────────────────────────────────────
+    /** Emitted when a tab's close (×) button is clicked. The tab is NOT removed automatically — remove it from `tabs` yourself. */
+    tabClose = output();
+    // ── Content children (panel templates) ───────────────────────────────────
+    panels = contentChildren(SvTabPanelDirective, ...(ngDevMode ? [{ debugName: "panels" }] : /* istanbul ignore next */ []));
+    /** Look up the TemplateRef for a given tab ID. Returns null when no panel registered. */
+    panelFor(tabId) {
+        return this.panels().find(p => p.tabId() === tabId)?.templateRef ?? null;
+    }
+    // ── Internal ──────────────────────────────────────────────────────────────
+    /**
+     * Tracks which tab IDs have been activated at least once.
+     * Used for lazy-rendering: a panel is only projected into the DOM
+     * after the user first visits that tab.
+     */
+    activatedIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "activatedIds" }] : /* istanbul ignore next */ []));
+    // ── Computed ──────────────────────────────────────────────────────────────
+    /** Resolved active ID — falls back to first enabled tab when empty. */
+    resolvedActiveId = computed(() => {
+        const id = this.activeId();
+        if (id)
+            return id;
+        return this.tabs().find(t => !t.disabled)?.id ?? '';
+    }, ...(ngDevMode ? [{ debugName: "resolvedActiveId" }] : /* istanbul ignore next */ []));
+    navigableTabs = computed(() => this.tabs().filter(t => !t.disabled), ...(ngDevMode ? [{ debugName: "navigableTabs" }] : /* istanbul ignore next */ []));
+    // ── Size maps ─────────────────────────────────────────────────────────────
+    tabTextClass = computed(() => ({
+        sm: 'text-xs',
+        md: 'text-sm',
+        lg: 'text-base',
+    })[this.size()], ...(ngDevMode ? [{ debugName: "tabTextClass" }] : /* istanbul ignore next */ []));
+    tabPadClass = computed(() => {
+        const s = this.size();
+        const v = this.tabsStyle();
+        if (this.layout() === 'vertical') {
+            return { sm: 'px-3 py-1.5', md: 'px-4 py-2', lg: 'px-5 py-2.5' }[s];
+        }
+        if (v === 'boxed' || v === 'lifted' || v === 'border-card') {
+            return { sm: 'px-3 py-1.5', md: 'px-4 py-2', lg: 'px-5 py-2.5' }[s];
+        }
+        return { sm: 'px-2.5 py-1.5', md: 'px-4 py-2.5', lg: 'px-5 py-3' }[s];
+    }, ...(ngDevMode ? [{ debugName: "tabPadClass" }] : /* istanbul ignore next */ []));
+    iconClass = computed(() => ({
+        sm: 'h-3.5 w-3.5',
+        md: 'h-4 w-4',
+        lg: 'h-5 w-5',
+    })[this.size()], ...(ngDevMode ? [{ debugName: "iconClass" }] : /* istanbul ignore next */ []));
+    // ── Root + list classes ───────────────────────────────────────────────────
+    rootClasses = computed(() => {
+        const base = this.layout() === 'vertical'
+            ? 'flex gap-4'
+            : 'flex flex-col';
+        const cardWrap = this.tabsStyle() === 'border-card'
+            ? 'overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900'
+            : '';
+        return [base, cardWrap, this.customClass()].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    listClasses = computed(() => {
+        const v = this.tabsStyle();
+        const isV = this.layout() === 'vertical';
+        // Horizontal tab lists always allow horizontal scroll: `overflow-x-auto`
+        // shows no scrollbar while the tabs fit, and scrolls instead of clipping /
+        // forcing page overflow once they don't (e.g. many tabs on a phone). The
+        // `scrollable` input still controls whether tabs keep their natural width
+        // (`shrink-0`, below) or shrink to fit first.
+        const scroll = !isV ? 'overflow-x-auto' : '';
+        if (v === 'unstyled') {
+            return [
+                isV ? 'flex flex-col gap-1 shrink-0' : 'flex gap-1',
+                this.fullWidth() && !isV ? 'w-full' : '',
+                scroll,
+            ].filter(Boolean).join(' ');
+        }
+        if (v === 'border-card') {
+            return [
+                isV
+                    ? 'flex flex-col gap-0 shrink-0 border-r border-gray-200 bg-gray-50/60 p-2 dark:border-gray-800 dark:bg-gray-800/30'
+                    : 'flex gap-0 border-b border-gray-200 bg-gray-50/60 px-2 pt-2 dark:border-gray-800 dark:bg-gray-800/30',
+                this.fullWidth() && !isV ? 'w-full' : '',
+                scroll,
+            ].filter(Boolean).join(' ');
+        }
+        if (v === 'boxed') {
+            return [
+                isV ? 'flex flex-col gap-1 shrink-0' : 'flex gap-1',
+                'rounded-xl bg-gray-100 p-1 dark:bg-gray-800/60',
+                this.fullWidth() && !isV ? 'w-full' : '',
+                scroll,
+            ].filter(Boolean).join(' ');
+        }
+        if (v === 'lifted') {
+            return [
+                isV ? 'flex flex-col gap-0 shrink-0 border-r border-gray-200/80 dark:border-gray-800/60 pr-0'
+                    : 'flex gap-0 border-b border-gray-200/80 dark:border-gray-800/60',
+                this.fullWidth() && !isV ? 'w-full' : '',
+                scroll,
+            ].filter(Boolean).join(' ');
+        }
+        if (v === 'pills') {
+            return [
+                isV ? 'flex flex-col gap-1 shrink-0' : 'flex gap-1',
+                this.fullWidth() && !isV ? 'w-full' : '',
+                scroll,
+            ].filter(Boolean).join(' ');
+        }
+        // underline (default)
+        return [
+            isV ? 'flex flex-col gap-0 shrink-0 border-r border-gray-200/80 dark:border-gray-800/60'
+                : 'flex gap-0 border-b border-gray-200/80 dark:border-gray-800/60',
+            this.fullWidth() && !isV ? 'w-full' : '',
+            scroll,
+        ].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []));
+    // ── Per-tab classes ───────────────────────────────────────────────────────
+    tabClasses(tab) {
+        const isActive = tab.id === this.resolvedActiveId();
+        const isDisabled = !!tab.disabled;
+        const v = this.tabsStyle();
+        const isV = this.layout() === 'vertical';
+        const fw = this.fullWidth() && !isV;
+        const base = [
+            'inline-flex items-center gap-2 font-medium transition-colors duration-150',
+            'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1',
+            this.tabPadClass(),
+            this.tabTextClass(),
+            isDisabled ? 'cursor-not-allowed opacity-40' : 'cursor-pointer',
+            fw ? 'flex-1 justify-center' : '',
+            this.scrollable() && !isV ? 'shrink-0' : '',
+        ].filter(Boolean);
+        if (v === 'unstyled') {
+            // No decorative classes — consumers theme via [data-active]/[data-disabled]
+            // hooks (see template) and their own CSS/customClass.
+        }
+        else if (v === 'border-card') {
+            if (isV) {
+                base.push('-mr-px rounded-l-lg border border-r-0 border-transparent');
+                base.push(isActive
+                    ? 'border-gray-200 bg-white font-semibold text-gray-900 dark:border-gray-800 dark:bg-gray-900 dark:text-white'
+                    : isDisabled ? 'text-gray-400' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200');
+            }
+            else {
+                base.push('-mb-px rounded-t-lg border border-b-0 border-transparent');
+                base.push(isActive
+                    ? 'border-gray-200 bg-white text-gray-900 dark:border-gray-800 dark:bg-gray-900 dark:text-white'
+                    : isDisabled ? 'text-gray-400' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200');
+            }
+        }
+        else if (v === 'pills') {
+            base.push('rounded-lg');
+            base.push(isActive
+                ? 'bg-primary-600 text-white shadow-sm dark:bg-primary-600'
+                : isDisabled ? 'text-gray-400' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-800 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200');
+        }
+        else if (v === 'boxed') {
+            base.push('rounded-lg');
+            base.push(isActive
+                ? 'bg-white text-gray-900 shadow-sm dark:bg-gray-700/80 dark:text-white'
+                : isDisabled ? 'text-gray-400' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200');
+        }
+        else if (v === 'lifted') {
+            if (isV) {
+                base.push('border-r-2 -mr-px');
+                base.push(isActive
+                    ? 'border-primary-600 text-gray-900 font-semibold dark:text-white dark:border-primary-500 bg-primary-50/50 dark:bg-primary-950/20'
+                    : isDisabled ? 'border-transparent text-gray-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:border-gray-600');
+            }
+            else {
+                base.push('rounded-t-lg border border-b-0 -mb-px');
+                base.push(isActive
+                    ? 'border-gray-200/80 bg-white text-gray-900 dark:border-gray-700/60 dark:bg-gray-900 dark:text-white'
+                    : isDisabled ? 'border-transparent text-gray-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-200 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:border-gray-700');
+            }
+        }
+        else {
+            // underline
+            if (isV) {
+                base.push('border-r-2 -mr-px');
+                base.push(isActive
+                    ? 'border-primary-600 text-gray-900 font-semibold dark:border-primary-500 dark:text-white'
+                    : isDisabled ? 'border-transparent text-gray-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:border-gray-600');
+            }
+            else {
+                base.push('border-b-2 -mb-px');
+                base.push(isActive
+                    ? 'border-primary-600 text-gray-900 font-semibold dark:border-primary-500 dark:text-white'
+                    : isDisabled ? 'border-transparent text-gray-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:border-gray-600');
+            }
+        }
+        return base.join(' ');
+    }
+    // ── Panel visibility ──────────────────────────────────────────────────────
+    isPanelVisible(tab) {
+        return tab.id === this.resolvedActiveId();
+    }
+    /** Returns true once the tab has been activated (for lazy rendering). */
+    isPanelMounted(tab) {
+        return this.activatedIds().has(tab.id) || tab.id === this.resolvedActiveId();
+    }
+    // ── Event handlers ────────────────────────────────────────────────────────
+    selectTab(tab) {
+        if (tab.disabled || tab.id === this.resolvedActiveId())
+            return;
+        this.activatedIds.update(s => new Set([...s, tab.id]));
+        this.activeId.set(tab.id);
+    }
+    /** Close (×) button handler — emits `tabClose`; the consumer owns removing the tab. */
+    onCloseTab(event, tab) {
+        event.stopPropagation();
+        this.tabClose.emit(tab);
+    }
+    onTabKeydown(event, tab) {
+        const navigable = this.navigableTabs();
+        const idx = navigable.findIndex(t => t.id === tab.id);
+        const isV = this.layout() === 'vertical';
+        let next;
+        if (isV) {
+            if (event.key === 'ArrowDown')
+                next = navigable[idx + 1];
+            if (event.key === 'ArrowUp')
+                next = navigable[idx - 1];
+        }
+        else {
+            if (event.key === 'ArrowRight')
+                next = navigable[idx + 1];
+            if (event.key === 'ArrowLeft')
+                next = navigable[idx - 1];
+        }
+        if (event.key === 'Home')
+            next = navigable[0];
+        if (event.key === 'End')
+            next = navigable[navigable.length - 1];
+        if (next) {
+            event.preventDefault();
+            this.selectTab(next);
+            const el = document.getElementById(`tab-${next.id}`);
+            el?.focus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SvTabsComponent, isStandalone: true, selector: "sv-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null }, tabsStyle: { classPropertyName: "tabsStyle", publicName: "tabsStyle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeId: "activeIdChange", tabClose: "tabClose" }, queries: [{ propertyName: "panels", predicate: SvTabPanelDirective, isSignal: true }], ngImport: i0, template: "<div [ngClass]=\"rootClasses()\">\n\n  <!-- \u2500\u2500 Tab list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div\n    role=\"tablist\"\n    [ngClass]=\"listClasses()\"\n    [attr.aria-orientation]=\"layout() === 'vertical' ? 'vertical' : 'horizontal'\"\n  >\n    @for (tab of tabs(); track tab.id) {\n      <!--\n        Wrapper carries the visual treatment (padding, color, background, border) so a\n        `closable` tab's \u00D7 button can sit as a real sibling <button> instead of being\n        nested inside the tab's own <button> \u2014 nesting interactive controls inside a\n        <button> is invalid HTML and gets silently mis-parsed by browsers.\n      -->\n      <span\n        [attr.data-active]=\"tab.id === resolvedActiveId() ? '' : null\"\n        [attr.data-disabled]=\"tab.disabled ? '' : null\"\n        [ngClass]=\"tabClasses(tab)\"\n      >\n        <button\n          [id]=\"'tab-' + tab.id\"\n          type=\"button\"\n          role=\"tab\"\n          [attr.aria-selected]=\"tab.id === resolvedActiveId()\"\n          [attr.aria-controls]=\"'panel-' + tab.id\"\n          [attr.aria-disabled]=\"tab.disabled || null\"\n          [attr.tabindex]=\"tab.id === resolvedActiveId() ? 0 : -1\"\n          class=\"inline-flex items-center gap-2 rounded-[inherit] bg-transparent\n                 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500\n                 focus-visible:ring-offset-1\"\n          (click)=\"selectTab(tab)\"\n          (keydown)=\"onTabKeydown($event, tab)\"\n        >\n          <!-- Icon -->\n          @if (tab.iconPath) {\n            <svg\n              [ngClass]=\"iconClass()\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <path [attr.d]=\"tab.iconPath\" />\n            </svg>\n          }\n\n          {{ tab.label }}\n\n          <!-- Unread/status dot -->\n          @if (tab.dot) {\n            <span class=\"h-1.5 w-1.5 shrink-0 rounded-full bg-red-500\" aria-hidden=\"true\"></span>\n            <span class=\"sr-only\">(unread)</span>\n          }\n\n          <!-- Badge -->\n          @if (tab.badge) {\n            <span\n              class=\"inline-flex items-center justify-center rounded-full\n                     bg-gray-200 px-1.5 py-0.5 text-[10px] font-semibold\n                     leading-none text-gray-700 dark:bg-gray-700 dark:text-gray-200\"\n              [class.bg-white]=\"tab.id === resolvedActiveId() && tabsStyle() === 'pills'\"\n              [class.text-primary-600]=\"tab.id === resolvedActiveId() && tabsStyle() === 'pills'\"\n            >\n              {{ tab.badge }}\n            </span>\n          }\n        </button>\n\n        <!-- Close button \u2014 a real sibling <button>, not nested inside the tab button -->\n        @if (tab.closable) {\n          <button\n            type=\"button\"\n            class=\"-mr-1 ml-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded\n                   text-current/60 transition-colors hover:bg-black/10 hover:text-current\n                   focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500\n                   dark:hover:bg-white/10\"\n            [attr.aria-label]=\"'Close ' + tab.label\"\n            (click)=\"onCloseTab($event, tab)\"\n          >\n            <svg class=\"h-3 w-3\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\n                 stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M18 6L6 18M6 6l12 12\" />\n            </svg>\n          </button>\n        }\n      </span>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Tab panels \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"flex-1 min-w-0\" [ngClass]=\"tabsStyle() === 'border-card' ? 'p-4' : ''\">\n    @for (tab of tabs(); track tab.id) {\n      @if (isPanelMounted(tab)) {\n        <div\n          [id]=\"'panel-' + tab.id\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"'tab-' + tab.id\"\n          [attr.tabindex]=\"isPanelVisible(tab) ? 0 : null\"\n          [ngClass]=\"isPanelVisible(tab) ? 'block focus:outline-none' : 'hidden'\"\n        >\n          @if (panelFor(tab.id); as tpl) {\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n          }\n        </div>\n      }\n    }\n  </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sv-tabs', standalone: true, imports: [NgClass, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"rootClasses()\">\n\n  <!-- \u2500\u2500 Tab list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div\n    role=\"tablist\"\n    [ngClass]=\"listClasses()\"\n    [attr.aria-orientation]=\"layout() === 'vertical' ? 'vertical' : 'horizontal'\"\n  >\n    @for (tab of tabs(); track tab.id) {\n      <!--\n        Wrapper carries the visual treatment (padding, color, background, border) so a\n        `closable` tab's \u00D7 button can sit as a real sibling <button> instead of being\n        nested inside the tab's own <button> \u2014 nesting interactive controls inside a\n        <button> is invalid HTML and gets silently mis-parsed by browsers.\n      -->\n      <span\n        [attr.data-active]=\"tab.id === resolvedActiveId() ? '' : null\"\n        [attr.data-disabled]=\"tab.disabled ? '' : null\"\n        [ngClass]=\"tabClasses(tab)\"\n      >\n        <button\n          [id]=\"'tab-' + tab.id\"\n          type=\"button\"\n          role=\"tab\"\n          [attr.aria-selected]=\"tab.id === resolvedActiveId()\"\n          [attr.aria-controls]=\"'panel-' + tab.id\"\n          [attr.aria-disabled]=\"tab.disabled || null\"\n          [attr.tabindex]=\"tab.id === resolvedActiveId() ? 0 : -1\"\n          class=\"inline-flex items-center gap-2 rounded-[inherit] bg-transparent\n                 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500\n                 focus-visible:ring-offset-1\"\n          (click)=\"selectTab(tab)\"\n          (keydown)=\"onTabKeydown($event, tab)\"\n        >\n          <!-- Icon -->\n          @if (tab.iconPath) {\n            <svg\n              [ngClass]=\"iconClass()\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <path [attr.d]=\"tab.iconPath\" />\n            </svg>\n          }\n\n          {{ tab.label }}\n\n          <!-- Unread/status dot -->\n          @if (tab.dot) {\n            <span class=\"h-1.5 w-1.5 shrink-0 rounded-full bg-red-500\" aria-hidden=\"true\"></span>\n            <span class=\"sr-only\">(unread)</span>\n          }\n\n          <!-- Badge -->\n          @if (tab.badge) {\n            <span\n              class=\"inline-flex items-center justify-center rounded-full\n                     bg-gray-200 px-1.5 py-0.5 text-[10px] font-semibold\n                     leading-none text-gray-700 dark:bg-gray-700 dark:text-gray-200\"\n              [class.bg-white]=\"tab.id === resolvedActiveId() && tabsStyle() === 'pills'\"\n              [class.text-primary-600]=\"tab.id === resolvedActiveId() && tabsStyle() === 'pills'\"\n            >\n              {{ tab.badge }}\n            </span>\n          }\n        </button>\n\n        <!-- Close button \u2014 a real sibling <button>, not nested inside the tab button -->\n        @if (tab.closable) {\n          <button\n            type=\"button\"\n            class=\"-mr-1 ml-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded\n                   text-current/60 transition-colors hover:bg-black/10 hover:text-current\n                   focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500\n                   dark:hover:bg-white/10\"\n            [attr.aria-label]=\"'Close ' + tab.label\"\n            (click)=\"onCloseTab($event, tab)\"\n          >\n            <svg class=\"h-3 w-3\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\n                 stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M18 6L6 18M6 6l12 12\" />\n            </svg>\n          </button>\n        }\n      </span>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Tab panels \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"flex-1 min-w-0\" [ngClass]=\"tabsStyle() === 'border-card' ? 'p-4' : ''\">\n    @for (tab of tabs(); track tab.id) {\n      @if (isPanelMounted(tab)) {\n        <div\n          [id]=\"'panel-' + tab.id\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"'tab-' + tab.id\"\n          [attr.tabindex]=\"isPanelVisible(tab) ? 0 : null\"\n          [ngClass]=\"isPanelVisible(tab) ? 'block focus:outline-none' : 'hidden'\"\n        >\n          @if (panelFor(tab.id); as tpl) {\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n          }\n        </div>\n      }\n    }\n  </div>\n\n</div>\n" }]
+        }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], activeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeId", required: false }] }, { type: i0.Output, args: ["activeIdChange"] }], tabsStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabsStyle", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], tabClose: [{ type: i0.Output, args: ["tabClose"] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SvTabPanelDirective), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SvTabPanelDirective, SvTabsComponent };
+//# sourceMappingURL=styloviz-tabs.mjs.map

package/fesm2022/styloviz-tabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styloviz-tabs.mjs","sources":["../../../../projects/tabs/src/lib/tabs.component.ts","../../../../projects/tabs/src/lib/tabs.component.html","../../../../projects/tabs/src/styloviz-tabs.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChildren,\n  Directive,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n  TemplateRef,\n} from '@angular/core';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type TabsStyle  = 'underline' | 'pills' | 'boxed' | 'lifted' | 'border-card' | 'unstyled';\nexport type TabsSize   = 'sm' | 'md' | 'lg';\nexport type TabsLayout = 'horizontal' | 'vertical';\n\n/** A single tab definition. */\nexport interface TabItem {\n  /** Unique key — used as the active-tab identifier. */\n  id:        string;\n  /** Display label. */\n  label:     string;\n  /** Optional SVG `<path d=\"...\">` shown before the label. */\n  iconPath?: string;\n  /** Suppress rendering this tab's content until it is first activated. @default false */\n  lazy?:     boolean;\n  /** Prevent the user from switching to this tab. @default false */\n  disabled?: boolean;\n  /** Small badge text (e.g. count). */\n  badge?:    string;\n  /** Small unread/status dot rendered next to the label (independent of `badge`). @default false */\n  dot?:      boolean;\n  /** Shows a close (×) button on the tab and emits `tabClose` when clicked. @default false */\n  closable?: boolean;\n}\n\n// ─── Tab Panel Directive ──────────────────────────────────────────────────────\n\n/**\n * TabPanelDirective — marks a `<ng-template>` as content for a specific tab.\n *\n * Usage:\n * ```html\n * <sv-tabs [tabs]=\"tabs\" [(activeId)]=\"active\">\n *   <ng-template svTabPanel=\"settings\">Settings content…</ng-template>\n *   <ng-template svTabPanel=\"profile\">Profile content…</ng-template>\n * </sv-tabs>\n * ```\n */\n@Directive({\n  selector: '[svTabPanel]',\n  standalone: true,\n})\nexport class SvTabPanelDirective {\n  /** Must match a `TabItem.id`. */\n  tabId = input.required<string>({ alias: 'svTabPanel' });\n\n  readonly templateRef = inject(TemplateRef<unknown>);\n}\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\n/**\n * Tabs — A horizontal (or vertical) tab switcher with content projection.\n *\n * Features:\n * - 6 visual styles: underline · pills · boxed · lifted · border-card · unstyled\n * - `unstyled` strips all decorative classes for fully headless theming — pairs with the\n *   `data-active`/`data-disabled` attributes exposed on every tab button for custom CSS\n * - `border-card` wraps the tab row and panel in one cohesive bordered card\n * - Horizontal and vertical layout modes\n * - Keyboard navigation: ← → (horizontal) / ↑ ↓ (vertical), Home, End\n * - Optional icon, badge, unread dot, and closable (×) button per tab\n * - Optional horizontal scrolling for tab lists that overflow their container\n * - Disabled tab support\n * - Lazy rendering — tab panel content is only inserted into the DOM after\n *   first activation (prevents layout shift on initial paint)\n * - Two-way `activeId` binding via `model()`\n * - Content projection via `svTabPanel` directive on `<ng-template>` tags\n * - Full dark-mode support\n * - Accessible: `role=\"tablist\"`, `role=\"tab\"`, `role=\"tabpanel\"`,\n *   `aria-selected`, `aria-controls`, `aria-disabled`\n *\n * **Content projection:**\n * ```html\n * <sv-tabs [tabs]=\"myTabs\" [(activeId)]=\"activeTab\">\n *   <ng-template svTabPanel=\"general\">General settings…</ng-template>\n *   <ng-template svTabPanel=\"security\">Security settings…</ng-template>\n * </sv-tabs>\n * ```\n *\n * **No-projection (external panel control):**\n * Omit `<ng-template>` children and react to `(activeIdChange)` instead.\n */\n@Component({\n  selector: 'sv-tabs',\n  standalone: true,\n  imports: [NgClass, NgTemplateOutlet],\n  templateUrl: './tabs.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SvTabsComponent {\n  // ── Inputs ────────────────────────────────────────────────────────────────\n\n  /** Tab definitions in display order. */\n  tabs = input<TabItem[]>([]);\n\n  /** ID of the currently active tab. Use `[(activeId)]` for two-way binding. */\n  activeId = model<string>('');\n\n  /** Visual style variant. @default 'underline' */\n  tabsStyle = input<TabsStyle>('underline');\n\n  /** Size of the tab text and icons. @default 'md' */\n  size = input<TabsSize>('md');\n\n  /** Layout direction. @default 'horizontal' */\n  layout = input<TabsLayout>('horizontal');\n\n  /**\n   * Whether tab buttons stretch to fill all available width.\n   * Only applicable to the `'horizontal'` layout. @default false\n   */\n  fullWidth = input<boolean>(false);\n\n  /**\n   * Allows the tab list to scroll horizontally instead of wrapping/overflowing\n   * when there are more tabs than fit the available width. @default false\n   */\n  scrollable = input<boolean>(false);\n\n  /** Additional CSS classes on the root wrapper. */\n  customClass = input<string>('');\n\n  // ── Outputs ───────────────────────────────────────────────────────────────\n\n  /** Emitted when a tab's close (×) button is clicked. The tab is NOT removed automatically — remove it from `tabs` yourself. */\n  tabClose = output<TabItem>();\n\n  // ── Content children (panel templates) ───────────────────────────────────\n\n  private panels = contentChildren(SvTabPanelDirective);\n\n  /** Look up the TemplateRef for a given tab ID. Returns null when no panel registered. */\n  panelFor(tabId: string): TemplateRef<unknown> | null {\n    return this.panels().find(p => p.tabId() === tabId)?.templateRef ?? null;\n  }\n\n  // ── Internal ──────────────────────────────────────────────────────────────\n\n  /**\n   * Tracks which tab IDs have been activated at least once.\n   * Used for lazy-rendering: a panel is only projected into the DOM\n   * after the user first visits that tab.\n   */\n  activatedIds = signal<Set<string>>(new Set());\n\n  // ── Computed ──────────────────────────────────────────────────────────────\n\n  /** Resolved active ID — falls back to first enabled tab when empty. */\n  resolvedActiveId = computed<string>(() => {\n    const id = this.activeId();\n    if (id) return id;\n    return this.tabs().find(t => !t.disabled)?.id ?? '';\n  });\n\n  navigableTabs = computed(() => this.tabs().filter(t => !t.disabled));\n\n  // ── Size maps ─────────────────────────────────────────────────────────────\n\n  tabTextClass = computed<string>(() => ({\n    sm: 'text-xs',\n    md: 'text-sm',\n    lg: 'text-base',\n  })[this.size()]);\n\n  tabPadClass = computed<string>(() => {\n    const s = this.size();\n    const v = this.tabsStyle();\n    if (this.layout() === 'vertical') {\n      return { sm: 'px-3 py-1.5', md: 'px-4 py-2', lg: 'px-5 py-2.5' }[s];\n    }\n    if (v === 'boxed' || v === 'lifted' || v === 'border-card') {\n      return { sm: 'px-3 py-1.5', md: 'px-4 py-2', lg: 'px-5 py-2.5' }[s];\n    }\n    return { sm: 'px-2.5 py-1.5', md: 'px-4 py-2.5', lg: 'px-5 py-3' }[s];\n  });\n\n  iconClass = computed<string>(() => ({\n    sm: 'h-3.5 w-3.5',\n    md: 'h-4 w-4',\n    lg: 'h-5 w-5',\n  })[this.size()]);\n\n  // ── Root + list classes ───────────────────────────────────────────────────\n\n  rootClasses = computed<string>(() => {\n    const base = this.layout() === 'vertical'\n      ? 'flex gap-4'\n      : 'flex flex-col';\n    const cardWrap = this.tabsStyle() === 'border-card'\n      ? 'overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900'\n      : '';\n    return [base, cardWrap, this.customClass()].filter(Boolean).join(' ');\n  });\n\n  listClasses = computed<string>(() => {\n    const v      = this.tabsStyle();\n    const isV    = this.layout() === 'vertical';\n    // Horizontal tab lists always allow horizontal scroll: `overflow-x-auto`\n    // shows no scrollbar while the tabs fit, and scrolls instead of clipping /\n    // forcing page overflow once they don't (e.g. many tabs on a phone). The\n    // `scrollable` input still controls whether tabs keep their natural width\n    // (`shrink-0`, below) or shrink to fit first.\n    const scroll = !isV ? 'overflow-x-auto' : '';\n\n    if (v === 'unstyled') {\n      return [\n        isV ? 'flex flex-col gap-1 shrink-0' : 'flex gap-1',\n        this.fullWidth() && !isV ? 'w-full' : '',\n        scroll,\n      ].filter(Boolean).join(' ');\n    }\n\n    if (v === 'border-card') {\n      return [\n        isV\n          ? 'flex flex-col gap-0 shrink-0 border-r border-gray-200 bg-gray-50/60 p-2 dark:border-gray-800 dark:bg-gray-800/30'\n          : 'flex gap-0 border-b border-gray-200 bg-gray-50/60 px-2 pt-2 dark:border-gray-800 dark:bg-gray-800/30',\n        this.fullWidth() && !isV ? 'w-full' : '',\n        scroll,\n      ].filter(Boolean).join(' ');\n    }\n\n    if (v === 'boxed') {\n      return [\n        isV ? 'flex flex-col gap-1 shrink-0' : 'flex gap-1',\n        'rounded-xl bg-gray-100 p-1 dark:bg-gray-800/60',\n        this.fullWidth() && !isV ? 'w-full' : '',\n        scroll,\n      ].filter(Boolean).join(' ');\n    }\n\n    if (v === 'lifted') {\n      return [\n        isV ? 'flex flex-col gap-0 shrink-0 border-r border-gray-200/80 dark:border-gray-800/60 pr-0'\n            : 'flex gap-0 border-b border-gray-200/80 dark:border-gray-800/60',\n        this.fullWidth() && !isV ? 'w-full' : '',\n        scroll,\n      ].filter(Boolean).join(' ');\n    }\n\n    if (v === 'pills') {\n      return [\n        isV ? 'flex flex-col gap-1 shrink-0' : 'flex gap-1',\n        this.fullWidth() && !isV ? 'w-full' : '',\n        scroll,\n      ].filter(Boolean).join(' ');\n    }\n\n    // underline (default)\n    return [\n      isV ? 'flex flex-col gap-0 shrink-0 border-r border-gray-200/80 dark:border-gray-800/60'\n          : 'flex gap-0 border-b border-gray-200/80 dark:border-gray-800/60',\n      this.fullWidth() && !isV ? 'w-full' : '',\n      scroll,\n    ].filter(Boolean).join(' ');\n  });\n\n  // ── Per-tab classes ───────────────────────────────────────────────────────\n\n  tabClasses(tab: TabItem): string {\n    const isActive   = tab.id === this.resolvedActiveId();\n    const isDisabled = !!tab.disabled;\n    const v          = this.tabsStyle();\n    const isV        = this.layout() === 'vertical';\n    const fw         = this.fullWidth() && !isV;\n\n    const base = [\n      'inline-flex items-center gap-2 font-medium transition-colors duration-150',\n      'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1',\n      this.tabPadClass(),\n      this.tabTextClass(),\n      isDisabled ? 'cursor-not-allowed opacity-40' : 'cursor-pointer',\n      fw ? 'flex-1 justify-center' : '',\n      this.scrollable() && !isV ? 'shrink-0' : '',\n    ].filter(Boolean);\n\n    if (v === 'unstyled') {\n      // No decorative classes — consumers theme via [data-active]/[data-disabled]\n      // hooks (see template) and their own CSS/customClass.\n    } else if (v === 'border-card') {\n      if (isV) {\n        base.push('-mr-px rounded-l-lg border border-r-0 border-transparent');\n        base.push(isActive\n          ? 'border-gray-200 bg-white font-semibold text-gray-900 dark:border-gray-800 dark:bg-gray-900 dark:text-white'\n          : isDisabled ? 'text-gray-400' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200');\n      } else {\n        base.push('-mb-px rounded-t-lg border border-b-0 border-transparent');\n        base.push(isActive\n          ? 'border-gray-200 bg-white text-gray-900 dark:border-gray-800 dark:bg-gray-900 dark:text-white'\n          : isDisabled ? 'text-gray-400' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200');\n      }\n    } else if (v === 'pills') {\n      base.push('rounded-lg');\n      base.push(isActive\n        ? 'bg-primary-600 text-white shadow-sm dark:bg-primary-600'\n        : isDisabled ? 'text-gray-400' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-800 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200');\n    } else if (v === 'boxed') {\n      base.push('rounded-lg');\n      base.push(isActive\n        ? 'bg-white text-gray-900 shadow-sm dark:bg-gray-700/80 dark:text-white'\n        : isDisabled ? 'text-gray-400' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200');\n    } else if (v === 'lifted') {\n      if (isV) {\n        base.push('border-r-2 -mr-px');\n        base.push(isActive\n          ? 'border-primary-600 text-gray-900 font-semibold dark:text-white dark:border-primary-500 bg-primary-50/50 dark:bg-primary-950/20'\n          : isDisabled ? 'border-transparent text-gray-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:border-gray-600');\n      } else {\n        base.push('rounded-t-lg border border-b-0 -mb-px');\n        base.push(isActive\n          ? 'border-gray-200/80 bg-white text-gray-900 dark:border-gray-700/60 dark:bg-gray-900 dark:text-white'\n          : isDisabled ? 'border-transparent text-gray-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-200 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:border-gray-700');\n      }\n    } else {\n      // underline\n      if (isV) {\n        base.push('border-r-2 -mr-px');\n        base.push(isActive\n          ? 'border-primary-600 text-gray-900 font-semibold dark:border-primary-500 dark:text-white'\n          : isDisabled ? 'border-transparent text-gray-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:border-gray-600');\n      } else {\n        base.push('border-b-2 -mb-px');\n        base.push(isActive\n          ? 'border-primary-600 text-gray-900 font-semibold dark:border-primary-500 dark:text-white'\n          : isDisabled ? 'border-transparent text-gray-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:border-gray-600');\n      }\n    }\n\n    return base.join(' ');\n  }\n\n  // ── Panel visibility ──────────────────────────────────────────────────────\n\n  isPanelVisible(tab: TabItem): boolean {\n    return tab.id === this.resolvedActiveId();\n  }\n\n  /** Returns true once the tab has been activated (for lazy rendering). */\n  isPanelMounted(tab: TabItem): boolean {\n    return this.activatedIds().has(tab.id) || tab.id === this.resolvedActiveId();\n  }\n\n  // ── Event handlers ────────────────────────────────────────────────────────\n\n  selectTab(tab: TabItem): void {\n    if (tab.disabled || tab.id === this.resolvedActiveId()) return;\n    this.activatedIds.update(s => new Set([...s, tab.id]));\n    this.activeId.set(tab.id);\n  }\n\n  /** Close (×) button handler — emits `tabClose`; the consumer owns removing the tab. */\n  onCloseTab(event: Event, tab: TabItem): void {\n    event.stopPropagation();\n    this.tabClose.emit(tab);\n  }\n\n  onTabKeydown(event: KeyboardEvent, tab: TabItem): void {\n    const navigable = this.navigableTabs();\n    const idx       = navigable.findIndex(t => t.id === tab.id);\n    const isV       = this.layout() === 'vertical';\n\n    let next: TabItem | undefined;\n\n    if (isV) {\n      if (event.key === 'ArrowDown') next = navigable[idx + 1];\n      if (event.key === 'ArrowUp')   next = navigable[idx - 1];\n    } else {\n      if (event.key === 'ArrowRight') next = navigable[idx + 1];\n      if (event.key === 'ArrowLeft')  next = navigable[idx - 1];\n    }\n    if (event.key === 'Home') next = navigable[0];\n    if (event.key === 'End')  next = navigable[navigable.length - 1];\n\n    if (next) {\n      event.preventDefault();\n      this.selectTab(next);\n      const el = document.getElementById(`tab-${next.id}`);\n      el?.focus();\n    }\n  }\n}\n","<div [ngClass]=\"rootClasses()\">\n\n  <!-- ── Tab list ──────────────────────────────────────────────────────── -->\n  <div\n    role=\"tablist\"\n    [ngClass]=\"listClasses()\"\n    [attr.aria-orientation]=\"layout() === 'vertical' ? 'vertical' : 'horizontal'\"\n  >\n    @for (tab of tabs(); track tab.id) {\n      <!--\n        Wrapper carries the visual treatment (padding, color, background, border) so a\n        `closable` tab's × button can sit as a real sibling <button> instead of being\n        nested inside the tab's own <button> — nesting interactive controls inside a\n        <button> is invalid HTML and gets silently mis-parsed by browsers.\n      -->\n      <span\n        [attr.data-active]=\"tab.id === resolvedActiveId() ? '' : null\"\n        [attr.data-disabled]=\"tab.disabled ? '' : null\"\n        [ngClass]=\"tabClasses(tab)\"\n      >\n        <button\n          [id]=\"'tab-' + tab.id\"\n          type=\"button\"\n          role=\"tab\"\n          [attr.aria-selected]=\"tab.id === resolvedActiveId()\"\n          [attr.aria-controls]=\"'panel-' + tab.id\"\n          [attr.aria-disabled]=\"tab.disabled || null\"\n          [attr.tabindex]=\"tab.id === resolvedActiveId() ? 0 : -1\"\n          class=\"inline-flex items-center gap-2 rounded-[inherit] bg-transparent\n                 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500\n                 focus-visible:ring-offset-1\"\n          (click)=\"selectTab(tab)\"\n          (keydown)=\"onTabKeydown($event, tab)\"\n        >\n          <!-- Icon -->\n          @if (tab.iconPath) {\n            <svg\n              [ngClass]=\"iconClass()\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <path [attr.d]=\"tab.iconPath\" />\n            </svg>\n          }\n\n          {{ tab.label }}\n\n          <!-- Unread/status dot -->\n          @if (tab.dot) {\n            <span class=\"h-1.5 w-1.5 shrink-0 rounded-full bg-red-500\" aria-hidden=\"true\"></span>\n            <span class=\"sr-only\">(unread)</span>\n          }\n\n          <!-- Badge -->\n          @if (tab.badge) {\n            <span\n              class=\"inline-flex items-center justify-center rounded-full\n                     bg-gray-200 px-1.5 py-0.5 text-[10px] font-semibold\n                     leading-none text-gray-700 dark:bg-gray-700 dark:text-gray-200\"\n              [class.bg-white]=\"tab.id === resolvedActiveId() && tabsStyle() === 'pills'\"\n              [class.text-primary-600]=\"tab.id === resolvedActiveId() && tabsStyle() === 'pills'\"\n            >\n              {{ tab.badge }}\n            </span>\n          }\n        </button>\n\n        <!-- Close button — a real sibling <button>, not nested inside the tab button -->\n        @if (tab.closable) {\n          <button\n            type=\"button\"\n            class=\"-mr-1 ml-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded\n                   text-current/60 transition-colors hover:bg-black/10 hover:text-current\n                   focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500\n                   dark:hover:bg-white/10\"\n            [attr.aria-label]=\"'Close ' + tab.label\"\n            (click)=\"onCloseTab($event, tab)\"\n          >\n            <svg class=\"h-3 w-3\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\n                 stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M18 6L6 18M6 6l12 12\" />\n            </svg>\n          </button>\n        }\n      </span>\n    }\n  </div>\n\n  <!-- ── Tab panels ─────────────────────────────────────────────────────── -->\n  <div class=\"flex-1 min-w-0\" [ngClass]=\"tabsStyle() === 'border-card' ? 'p-4' : ''\">\n    @for (tab of tabs(); track tab.id) {\n      @if (isPanelMounted(tab)) {\n        <div\n          [id]=\"'panel-' + tab.id\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"'tab-' + tab.id\"\n          [attr.tabindex]=\"isPanelVisible(tab) ? 0 : null\"\n          [ngClass]=\"isPanelVisible(tab) ? 'block focus:outline-none' : 'hidden'\"\n        >\n          @if (panelFor(tab.id); as tpl) {\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n          }\n        </div>\n      }\n    }\n  </div>\n\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@styloviz/tabs",
+  "version": "0.1.1",
+  "description": "6 visual styles (underline, pills, boxed, lifted, border-card, unstyled), closable and scrollable tabs, vertical layout, keyboard navigation and lazy panels.",
+  "license": "MIT",
+  "author": "sazzad-bs23",
+  "homepage": "https://styloviz.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rhossain/angular-tailwind-dashboard-components.git",
+    "directory": "projects/tabs"
+  },
+  "bugs": {
+    "url": "https://github.com/rhossain/angular-tailwind-dashboard-components/issues"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=21.0.0",
+    "@angular/core": ">=21.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/styloviz-tabs.mjs",
+  "typings": "types/styloviz-tabs.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/styloviz-tabs.d.ts",
+      "default": "./fesm2022/styloviz-tabs.mjs"
+    }
+  },
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/types/styloviz-tabs.d.ts

@@ -0,0 +1,131 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+
+type TabsStyle = 'underline' | 'pills' | 'boxed' | 'lifted' | 'border-card' | 'unstyled';
+type TabsSize = 'sm' | 'md' | 'lg';
+type TabsLayout = 'horizontal' | 'vertical';
+/** A single tab definition. */
+interface TabItem {
+    /** Unique key — used as the active-tab identifier. */
+    id: string;
+    /** Display label. */
+    label: string;
+    /** Optional SVG `<path d="...">` shown before the label. */
+    iconPath?: string;
+    /** Suppress rendering this tab's content until it is first activated. @default false */
+    lazy?: boolean;
+    /** Prevent the user from switching to this tab. @default false */
+    disabled?: boolean;
+    /** Small badge text (e.g. count). */
+    badge?: string;
+    /** Small unread/status dot rendered next to the label (independent of `badge`). @default false */
+    dot?: boolean;
+    /** Shows a close (×) button on the tab and emits `tabClose` when clicked. @default false */
+    closable?: boolean;
+}
+/**
+ * TabPanelDirective — marks a `<ng-template>` as content for a specific tab.
+ *
+ * Usage:
+ * ```html
+ * <sv-tabs [tabs]="tabs" [(activeId)]="active">
+ *   <ng-template svTabPanel="settings">Settings content…</ng-template>
+ *   <ng-template svTabPanel="profile">Profile content…</ng-template>
+ * </sv-tabs>
+ * ```
+ */
+declare class SvTabPanelDirective {
+    /** Must match a `TabItem.id`. */
+    tabId: _angular_core.InputSignal<string>;
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SvTabPanelDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SvTabPanelDirective, "[svTabPanel]", never, { "tabId": { "alias": "svTabPanel"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * Tabs — A horizontal (or vertical) tab switcher with content projection.
+ *
+ * Features:
+ * - 6 visual styles: underline · pills · boxed · lifted · border-card · unstyled
+ * - `unstyled` strips all decorative classes for fully headless theming — pairs with the
+ *   `data-active`/`data-disabled` attributes exposed on every tab button for custom CSS
+ * - `border-card` wraps the tab row and panel in one cohesive bordered card
+ * - Horizontal and vertical layout modes
+ * - Keyboard navigation: ← → (horizontal) / ↑ ↓ (vertical), Home, End
+ * - Optional icon, badge, unread dot, and closable (×) button per tab
+ * - Optional horizontal scrolling for tab lists that overflow their container
+ * - Disabled tab support
+ * - Lazy rendering — tab panel content is only inserted into the DOM after
+ *   first activation (prevents layout shift on initial paint)
+ * - Two-way `activeId` binding via `model()`
+ * - Content projection via `svTabPanel` directive on `<ng-template>` tags
+ * - Full dark-mode support
+ * - Accessible: `role="tablist"`, `role="tab"`, `role="tabpanel"`,
+ *   `aria-selected`, `aria-controls`, `aria-disabled`
+ *
+ * **Content projection:**
+ * ```html
+ * <sv-tabs [tabs]="myTabs" [(activeId)]="activeTab">
+ *   <ng-template svTabPanel="general">General settings…</ng-template>
+ *   <ng-template svTabPanel="security">Security settings…</ng-template>
+ * </sv-tabs>
+ * ```
+ *
+ * **No-projection (external panel control):**
+ * Omit `<ng-template>` children and react to `(activeIdChange)` instead.
+ */
+declare class SvTabsComponent {
+    /** Tab definitions in display order. */
+    tabs: _angular_core.InputSignal<TabItem[]>;
+    /** ID of the currently active tab. Use `[(activeId)]` for two-way binding. */
+    activeId: _angular_core.ModelSignal<string>;
+    /** Visual style variant. @default 'underline' */
+    tabsStyle: _angular_core.InputSignal<TabsStyle>;
+    /** Size of the tab text and icons. @default 'md' */
+    size: _angular_core.InputSignal<TabsSize>;
+    /** Layout direction. @default 'horizontal' */
+    layout: _angular_core.InputSignal<TabsLayout>;
+    /**
+     * Whether tab buttons stretch to fill all available width.
+     * Only applicable to the `'horizontal'` layout. @default false
+     */
+    fullWidth: _angular_core.InputSignal<boolean>;
+    /**
+     * Allows the tab list to scroll horizontally instead of wrapping/overflowing
+     * when there are more tabs than fit the available width. @default false
+     */
+    scrollable: _angular_core.InputSignal<boolean>;
+    /** Additional CSS classes on the root wrapper. */
+    customClass: _angular_core.InputSignal<string>;
+    /** Emitted when a tab's close (×) button is clicked. The tab is NOT removed automatically — remove it from `tabs` yourself. */
+    tabClose: _angular_core.OutputEmitterRef<TabItem>;
+    private panels;
+    /** Look up the TemplateRef for a given tab ID. Returns null when no panel registered. */
+    panelFor(tabId: string): TemplateRef<unknown> | null;
+    /**
+     * Tracks which tab IDs have been activated at least once.
+     * Used for lazy-rendering: a panel is only projected into the DOM
+     * after the user first visits that tab.
+     */
+    activatedIds: _angular_core.WritableSignal<Set<string>>;
+    /** Resolved active ID — falls back to first enabled tab when empty. */
+    resolvedActiveId: _angular_core.Signal<string>;
+    navigableTabs: _angular_core.Signal<TabItem[]>;
+    tabTextClass: _angular_core.Signal<string>;
+    tabPadClass: _angular_core.Signal<string>;
+    iconClass: _angular_core.Signal<string>;
+    rootClasses: _angular_core.Signal<string>;
+    listClasses: _angular_core.Signal<string>;
+    tabClasses(tab: TabItem): string;
+    isPanelVisible(tab: TabItem): boolean;
+    /** Returns true once the tab has been activated (for lazy rendering). */
+    isPanelMounted(tab: TabItem): boolean;
+    selectTab(tab: TabItem): void;
+    /** Close (×) button handler — emits `tabClose`; the consumer owns removing the tab. */
+    onCloseTab(event: Event, tab: TabItem): void;
+    onTabKeydown(event: KeyboardEvent, tab: TabItem): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SvTabsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SvTabsComponent, "sv-tabs", never, { "tabs": { "alias": "tabs"; "required": false; "isSignal": true; }; "activeId": { "alias": "activeId"; "required": false; "isSignal": true; }; "tabsStyle": { "alias": "tabsStyle"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "scrollable": { "alias": "scrollable"; "required": false; "isSignal": true; }; "customClass": { "alias": "customClass"; "required": false; "isSignal": true; }; }, { "activeId": "activeIdChange"; "tabClose": "tabClose"; }, ["panels"], never, true, never>;
+}
+
+export { SvTabPanelDirective, SvTabsComponent };
+export type { TabItem, TabsLayout, TabsSize, TabsStyle };