@styloviz/accordion 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,55 @@
+# @styloviz/accordion
+
+> 10 varieties: default, flush, separated, filled, multi-expand, icon placements, badges & subtitles and disabled items. Sizes (sm / md / lg), CSS-grid animation and keyboard navigation are free; multi-expand is available in the Pro package.
+
+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/accordion
+```
+
+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 { SvAccordionComponent } from '@styloviz/accordion';
+
+@Component({
+  standalone: true,
+  imports: [SvAccordionComponent],
+  template: `
+    <sv-accordion [items]="items" expandMode="single" />
+  `,
+})
+export class DemoComponent {}
+```
+
+## Inputs
+
+| Input | Type | Default | Description |
+| --- | --- | --- | --- |
+| `items` | `AccordionItem[]` | `[]` | Array of panel definitions. |
+| `variant` | `AccordionVariant` | `'default'` | Visual style. |
+| `expandMode` | `AccordionExpand` | `'single'` | Whether one or many panels can be open at once. |
+| `size` | `AccordionSize` | `'md'` | Padding / font scale. |
+| `iconPosition` | `AccordionIconPos` | `'right'` | Which side the chevron appears on. |
+| `customIconPath` | `string` | `''` | Custom SVG `<path d="…">` used as the expand/collapse indicator instead of the default chevron. Leave empty to use the built-in chevron. When only this is set the icon rotates 180° on open (good for arrows). |
+| `customIconOpenPath` | `string` | `''` | Optional alternate SVG `<path d="…">` shown when the panel is **open**. Set this alongside `customIconPath` for a true swap (e.g. plus → minus). When set, rotation is disabled — the paths switch instead. |
+| `customClass` | `string` | `''` | Extra CSS classes applied to the root wrapper. |
+
+## Outputs
+
+| Output | Type | Description |
+| --- | --- | --- |
+| `itemToggled` | `AccordionToggleEvent` | Fires whenever a panel is opened or closed. |
+
+## Documentation
+
+Full API reference and live demos: https://styloviz.dev/docs/accordion
+
+## License
+
+MIT

package/fesm2022/styloviz-accordion.mjs

@@ -0,0 +1,272 @@
+import * as i0 from '@angular/core';
+import { input, output, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgClass } from '@angular/common';
+
+// ─── Badge palette ────────────────────────────────────────────────────────────
+const BADGE_CLASSES = {
+    primary: 'bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300',
+    success: 'bg-accent-50  text-accent-600  dark:bg-accent-500/20  dark:text-accent-400',
+    warning: 'bg-warning-50 text-warning-600 dark:bg-warning-500/20 dark:text-warning-400',
+    danger: 'bg-danger-50  text-danger-600  dark:bg-danger-500/20  dark:text-danger-400',
+    info: 'bg-sky-50     text-sky-600     dark:bg-sky-500/20     dark:text-sky-400',
+    neutral: 'bg-gray-100   text-gray-600    dark:bg-gray-700       dark:text-gray-300',
+};
+// ─── Component ────────────────────────────────────────────────────────────────
+/**
+ * AccordionComponent — A fully-featured, accessible expand/collapse panel set.
+ *
+ * ## Variants
+ * | variant    | Description                                                   |
+ * |------------|---------------------------------------------------------------|
+ * | `default`  | Outer border wrapping all panels with interior dividers       |
+ * | `flush`    | No outer border — only horizontal dividers between panels     |
+ * | `separated`| Each panel is an independent floating card with shadow        |
+ * | `filled`   | Active panel header gets a tinted colour fill                 |
+ *
+ * ## Features
+ * - Single or multi-expand mode
+ * - Left or right chevron icon position
+ * - Optional custom SVG icon path per panel (leading icon)
+ * - Optional subtitle under the header title
+ * - Optional badge with 6 semantic colour variants
+ * - Disabled panel support
+ * - `defaultOpen` per item to pre-open panels
+ * - CSS-grid based height animation — no JavaScript height calculation
+ * - Keyboard navigation: Enter/Space to toggle, ↑↓ to move focus
+ * - ARIA: `role="button"`, `aria-expanded`, `aria-disabled`, `aria-controls`
+ * - Full dark-mode support
+ * - 3 sizes: `sm` / `md` / `lg`
+ *
+ * ## Usage
+ * ```html
+ * <sv-accordion
+ *   [items]="faqItems"
+ *   variant="separated"
+ *   expandMode="multi"
+ *   [size]="'md'"
+ * />
+ * ```
+ */
+class SvAccordionComponent {
+    // ── Inputs ─────────────────────────────────────────────────────────────────
+    /** Array of panel definitions. */
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Visual style. @default 'default' */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Whether one or many panels can be open at once. @default 'single' */
+    expandMode = input('single', ...(ngDevMode ? [{ debugName: "expandMode" }] : /* istanbul ignore next */ []));
+    /** Padding / font scale. @default 'md' */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Which side the chevron appears on. @default 'right' */
+    iconPosition = input('right', ...(ngDevMode ? [{ debugName: "iconPosition" }] : /* istanbul ignore next */ []));
+    /**
+     * Custom SVG `<path d="…">` used as the expand/collapse indicator instead
+     * of the default chevron. Leave empty to use the built-in chevron.
+     * When only this is set the icon rotates 180° on open (good for arrows).
+     */
+    customIconPath = input('', ...(ngDevMode ? [{ debugName: "customIconPath" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional alternate SVG `<path d="…">` shown when the panel is **open**.
+     * Set this alongside `customIconPath` for a true swap (e.g. plus → minus).
+     * When set, rotation is disabled — the paths switch instead.
+     */
+    customIconOpenPath = input('', ...(ngDevMode ? [{ debugName: "customIconOpenPath" }] : /* istanbul ignore next */ []));
+    /** Extra CSS classes applied to the root wrapper. */
+    customClass = input('', ...(ngDevMode ? [{ debugName: "customClass" }] : /* istanbul ignore next */ []));
+    // ── Outputs ────────────────────────────────────────────────────────────────
+    /** Fires whenever a panel is opened or closed. */
+    itemToggled = output();
+    // ── Internal state ─────────────────────────────────────────────────────────
+    /** Set of currently-open item IDs. */
+    openIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "openIds" }] : /* istanbul ignore next */ []));
+    // ── Lifecycle ──────────────────────────────────────────────────────────────
+    ngOnInit() {
+        const initial = new Set();
+        for (const item of this.items()) {
+            if (item.defaultOpen && !item.disabled) {
+                if (this.expandMode() === 'single') {
+                    initial.clear();
+                    initial.add(item.id);
+                    break;
+                }
+                initial.add(item.id);
+            }
+        }
+        this.openIds.set(initial);
+    }
+    // ── Public queries ─────────────────────────────────────────────────────────
+    isOpen(id) {
+        return this.openIds().has(id);
+    }
+    // ── Interaction ────────────────────────────────────────────────────────────
+    toggle(item) {
+        if (item.disabled)
+            return;
+        const current = new Set(this.openIds());
+        const wasOpen = current.has(item.id);
+        if (this.expandMode() === 'single') {
+            current.clear();
+            if (!wasOpen)
+                current.add(item.id);
+        }
+        else {
+            wasOpen ? current.delete(item.id) : current.add(item.id);
+        }
+        this.openIds.set(current);
+        this.itemToggled.emit({ id: item.id, open: !wasOpen });
+    }
+    onKeydown(event, item, _index) {
+        const items = this.items().filter(i => !i.disabled);
+        const currentIndex = items.findIndex(i => i.id === item.id);
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.toggle(item);
+                break;
+            case 'ArrowDown': {
+                event.preventDefault();
+                const next = items[currentIndex + 1];
+                if (next)
+                    this.focusHeader(next.id);
+                break;
+            }
+            case 'ArrowUp': {
+                event.preventDefault();
+                const prev = items[currentIndex - 1];
+                if (prev)
+                    this.focusHeader(prev.id);
+                break;
+            }
+            case 'Home': {
+                event.preventDefault();
+                if (items.length)
+                    this.focusHeader(items[0].id);
+                break;
+            }
+            case 'End': {
+                event.preventDefault();
+                if (items.length)
+                    this.focusHeader(items[items.length - 1].id);
+                break;
+            }
+        }
+    }
+    focusHeader(id) {
+        const el = document.getElementById(`acc-header-${id}`);
+        el?.focus();
+    }
+    // ── CSS class helpers ──────────────────────────────────────────────────────
+    rootClasses = computed(() => {
+        const v = this.variant();
+        const base = 'w-full';
+        const separated = '';
+        const bordered = v === 'default' || v === 'filled'
+            ? 'rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden divide-y divide-gray-200 dark:divide-gray-700'
+            : v === 'flush'
+                ? 'divide-y divide-gray-200 dark:divide-gray-700'
+                : '';
+        return [base, separated, bordered, this.customClass()].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    itemWrapperClass(_item) {
+        return '';
+    }
+    headerClasses(item) {
+        const v = this.variant();
+        const s = this.size();
+        const open = this.isOpen(item.id);
+        const padding = s === 'sm' ? 'px-4 py-2.5' :
+            s === 'lg' ? 'px-6 py-5' :
+                'px-5 py-4';
+        const base = [
+            'w-full flex items-center gap-3 text-left select-none',
+            'transition-colors duration-150 focus-visible:outline-none',
+            'focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-inset',
+            padding,
+        ].join(' ');
+        const cursor = item.disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer';
+        let bg = '';
+        if (v === 'filled') {
+            bg = open
+                ? 'bg-primary-50 dark:bg-primary-900/30'
+                : 'bg-gray-50 dark:bg-gray-800/50 hover:bg-gray-100 dark:hover:bg-gray-800';
+        }
+        else {
+            bg = item.disabled
+                ? 'bg-white dark:bg-gray-900'
+                : 'bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800/60';
+        }
+        return [base, cursor, bg].join(' ');
+    }
+    titleClasses(item) {
+        const s = this.size();
+        const open = this.isOpen(item.id);
+        const size = s === 'sm' ? 'text-sm' :
+            s === 'lg' ? 'text-base' :
+                'text-sm';
+        return [
+            size,
+            'font-semibold leading-snug tracking-tight',
+            open
+                ? 'text-primary-600 dark:text-primary-400'
+                : 'text-gray-900 dark:text-gray-100',
+        ].join(' ');
+    }
+    subtitleClasses() {
+        const s = this.size();
+        return [
+            s === 'sm' ? 'text-[11px]' : 'text-xs',
+            'mt-0.5 text-gray-500 dark:text-gray-400 leading-none',
+        ].join(' ');
+    }
+    contentClasses() {
+        const s = this.size();
+        const padding = s === 'sm' ? 'px-4 pt-2 pb-4' :
+            s === 'lg' ? 'px-6 pt-4 pb-7' :
+                'px-5 pt-3 pb-6';
+        return [
+            padding,
+            'text-sm text-gray-600 dark:text-gray-400 leading-relaxed',
+            'bg-white dark:bg-gray-900',
+        ].join(' ');
+    }
+    badgeClass(color = 'neutral') {
+        return [
+            'inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-semibold leading-none',
+            BADGE_CLASSES[color],
+        ].join(' ');
+    }
+    chevronClasses(item) {
+        return [
+            'shrink-0 w-4 h-4 transition-transform duration-200',
+            this.isOpen(item.id) ? 'rotate-180' : 'rotate-0',
+            this.isOpen(item.id)
+                ? 'text-primary-500 dark:text-primary-400'
+                : 'text-gray-500 dark:text-gray-400',
+        ].join(' ');
+    }
+    leadingIconClasses(item) {
+        return [
+            'shrink-0 w-4 h-4',
+            this.isOpen(item.id)
+                ? 'text-primary-500 dark:text-primary-400'
+                : 'text-gray-500 dark:text-gray-400',
+        ].join(' ');
+    }
+    panelClasses() {
+        return 'grid transition-[grid-template-rows] duration-250 ease-in-out';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SvAccordionComponent, isStandalone: true, selector: "sv-accordion", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, expandMode: { classPropertyName: "expandMode", publicName: "expandMode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, customIconPath: { classPropertyName: "customIconPath", publicName: "customIconPath", isSignal: true, isRequired: false, transformFunction: null }, customIconOpenPath: { classPropertyName: "customIconOpenPath", publicName: "customIconOpenPath", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemToggled: "itemToggled" }, ngImport: i0, template: "<!-- \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\n     \u2551  AccordionComponent \u2014 Accessible expand/collapse panel set             \u2551\n     \u2551  Variants: default \u00B7 flush \u00B7 separated \u00B7 filled                        \u2551\n     \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255D -->\n\n<div [ngClass]=\"rootClasses()\" role=\"list\">\n  @for (item of items(); track item.id; let idx = $index) {\n\n    <!-- \u2500\u2500 Panel wrapper (separated variant gets its own card) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div [ngClass]=\"itemWrapperClass(item)\" role=\"listitem\">\n\n      <!-- \u2500\u2500 Header / trigger \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      <button\n        [id]=\"'acc-header-' + item.id\"\n        type=\"button\"\n        role=\"button\"\n        [attr.aria-expanded]=\"isOpen(item.id)\"\n        [attr.aria-controls]=\"'acc-panel-' + item.id\"\n        [attr.aria-disabled]=\"item.disabled || null\"\n        [attr.tabindex]=\"item.disabled ? '-1' : '0'\"\n        [ngClass]=\"headerClasses(item)\"\n        (click)=\"toggle(item)\"\n        (keydown)=\"onKeydown($event, item, idx)\"\n      >\n        <!-- \u2500\u2500 Left chevron (when iconPosition = 'left') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n        @if (iconPosition() === 'left') {\n          <span aria-hidden=\"true\">\n            @if (customIconPath()) {\n              <svg class=\"shrink-0 w-4 h-4 transition-transform duration-200\"\n                   [class.rotate-90]=\"!customIconOpenPath() && isOpen(item.id)\"\n                   [ngClass]=\"isOpen(item.id) ? 'text-primary-500 dark:text-primary-400' : 'text-gray-500 dark:text-gray-400'\"\n                   viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                   stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path [attr.d]=\"customIconOpenPath() && isOpen(item.id) ? customIconOpenPath() : customIconPath()\" />\n              </svg>\n            } @else {\n              <svg [ngClass]=\"chevronClasses(item)\"\n                   viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                   stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n                   aria-hidden=\"true\">\n                <path d=\"M6 9l6 6 6-6\" />\n              </svg>\n            }\n          </span>\n        }\n\n        <!-- \u2500\u2500 Leading item icon \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        @if (item.iconPath) {\n          <span class=\"shrink-0\" aria-hidden=\"true\">\n            <svg [ngClass]=\"leadingIconClasses(item)\"\n                 viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                 stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path [attr.d]=\"item.iconPath\" />\n            </svg>\n          </span>\n        }\n\n        <!-- \u2500\u2500 Title + subtitle \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        <span class=\"min-w-0 flex-1\">\n          <span [ngClass]=\"titleClasses(item)\" class=\"block truncate\">\n            {{ item.title }}\n          </span>\n          @if (item.subtitle) {\n            <span [ngClass]=\"subtitleClasses()\" class=\"block\">\n              {{ item.subtitle }}\n            </span>\n          }\n        </span>\n\n        <!-- \u2500\u2500 Badge \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        @if (item.badge) {\n          <span [ngClass]=\"badgeClass(item.badgeColor ?? 'neutral')\">\n            {{ item.badge }}\n          </span>\n        }\n\n        <!-- \u2500\u2500 Right chevron (when iconPosition = 'right', default) \u2500\u2500\u2500\u2500 -->\n        @if (iconPosition() === 'right') {\n          <span class=\"ml-auto shrink-0\" aria-hidden=\"true\">\n            @if (customIconPath()) {\n              <svg class=\"w-4 h-4 transition-transform duration-200\"\n                   [class.rotate-180]=\"!customIconOpenPath() && isOpen(item.id)\"\n                   [ngClass]=\"isOpen(item.id) ? 'text-primary-500 dark:text-primary-400' : 'text-gray-500 dark:text-gray-400'\"\n                   viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                   stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path [attr.d]=\"customIconOpenPath() && isOpen(item.id) ? customIconOpenPath() : customIconPath()\" />\n              </svg>\n            } @else {\n              <svg [ngClass]=\"chevronClasses(item)\"\n                   viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                   stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n                   aria-hidden=\"true\">\n                <path d=\"M6 9l6 6 6-6\" />\n              </svg>\n            }\n          </span>\n        }\n      </button>\n\n      <!-- \u2500\u2500 Panel body \u2014 CSS grid animation \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        [id]=\"'acc-panel-' + item.id\"\n        role=\"region\"\n        [attr.aria-labelledby]=\"'acc-header-' + item.id\"\n        class=\"grid transition-[grid-template-rows] duration-[250ms] ease-in-out\"\n        [style.grid-template-rows]=\"isOpen(item.id) ? '1fr' : '0fr'\"\n      >\n        <!-- Inner wrapper MUST have overflow:hidden for the grid trick -->\n        <div class=\"overflow-hidden\">\n          <div [ngClass]=\"contentClasses()\">\n            {{ item.content }}\n          </div>\n        </div>\n      </div>\n\n    </div><!-- /panel wrapper -->\n\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvAccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sv-accordion', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\n     \u2551  AccordionComponent \u2014 Accessible expand/collapse panel set             \u2551\n     \u2551  Variants: default \u00B7 flush \u00B7 separated \u00B7 filled                        \u2551\n     \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255D -->\n\n<div [ngClass]=\"rootClasses()\" role=\"list\">\n  @for (item of items(); track item.id; let idx = $index) {\n\n    <!-- \u2500\u2500 Panel wrapper (separated variant gets its own card) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div [ngClass]=\"itemWrapperClass(item)\" role=\"listitem\">\n\n      <!-- \u2500\u2500 Header / trigger \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      <button\n        [id]=\"'acc-header-' + item.id\"\n        type=\"button\"\n        role=\"button\"\n        [attr.aria-expanded]=\"isOpen(item.id)\"\n        [attr.aria-controls]=\"'acc-panel-' + item.id\"\n        [attr.aria-disabled]=\"item.disabled || null\"\n        [attr.tabindex]=\"item.disabled ? '-1' : '0'\"\n        [ngClass]=\"headerClasses(item)\"\n        (click)=\"toggle(item)\"\n        (keydown)=\"onKeydown($event, item, idx)\"\n      >\n        <!-- \u2500\u2500 Left chevron (when iconPosition = 'left') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n        @if (iconPosition() === 'left') {\n          <span aria-hidden=\"true\">\n            @if (customIconPath()) {\n              <svg class=\"shrink-0 w-4 h-4 transition-transform duration-200\"\n                   [class.rotate-90]=\"!customIconOpenPath() && isOpen(item.id)\"\n                   [ngClass]=\"isOpen(item.id) ? 'text-primary-500 dark:text-primary-400' : 'text-gray-500 dark:text-gray-400'\"\n                   viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                   stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path [attr.d]=\"customIconOpenPath() && isOpen(item.id) ? customIconOpenPath() : customIconPath()\" />\n              </svg>\n            } @else {\n              <svg [ngClass]=\"chevronClasses(item)\"\n                   viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                   stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n                   aria-hidden=\"true\">\n                <path d=\"M6 9l6 6 6-6\" />\n              </svg>\n            }\n          </span>\n        }\n\n        <!-- \u2500\u2500 Leading item icon \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        @if (item.iconPath) {\n          <span class=\"shrink-0\" aria-hidden=\"true\">\n            <svg [ngClass]=\"leadingIconClasses(item)\"\n                 viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                 stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path [attr.d]=\"item.iconPath\" />\n            </svg>\n          </span>\n        }\n\n        <!-- \u2500\u2500 Title + subtitle \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        <span class=\"min-w-0 flex-1\">\n          <span [ngClass]=\"titleClasses(item)\" class=\"block truncate\">\n            {{ item.title }}\n          </span>\n          @if (item.subtitle) {\n            <span [ngClass]=\"subtitleClasses()\" class=\"block\">\n              {{ item.subtitle }}\n            </span>\n          }\n        </span>\n\n        <!-- \u2500\u2500 Badge \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        @if (item.badge) {\n          <span [ngClass]=\"badgeClass(item.badgeColor ?? 'neutral')\">\n            {{ item.badge }}\n          </span>\n        }\n\n        <!-- \u2500\u2500 Right chevron (when iconPosition = 'right', default) \u2500\u2500\u2500\u2500 -->\n        @if (iconPosition() === 'right') {\n          <span class=\"ml-auto shrink-0\" aria-hidden=\"true\">\n            @if (customIconPath()) {\n              <svg class=\"w-4 h-4 transition-transform duration-200\"\n                   [class.rotate-180]=\"!customIconOpenPath() && isOpen(item.id)\"\n                   [ngClass]=\"isOpen(item.id) ? 'text-primary-500 dark:text-primary-400' : 'text-gray-500 dark:text-gray-400'\"\n                   viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                   stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path [attr.d]=\"customIconOpenPath() && isOpen(item.id) ? customIconOpenPath() : customIconPath()\" />\n              </svg>\n            } @else {\n              <svg [ngClass]=\"chevronClasses(item)\"\n                   viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                   stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n                   aria-hidden=\"true\">\n                <path d=\"M6 9l6 6 6-6\" />\n              </svg>\n            }\n          </span>\n        }\n      </button>\n\n      <!-- \u2500\u2500 Panel body \u2014 CSS grid animation \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        [id]=\"'acc-panel-' + item.id\"\n        role=\"region\"\n        [attr.aria-labelledby]=\"'acc-header-' + item.id\"\n        class=\"grid transition-[grid-template-rows] duration-[250ms] ease-in-out\"\n        [style.grid-template-rows]=\"isOpen(item.id) ? '1fr' : '0fr'\"\n      >\n        <!-- Inner wrapper MUST have overflow:hidden for the grid trick -->\n        <div class=\"overflow-hidden\">\n          <div [ngClass]=\"contentClasses()\">\n            {{ item.content }}\n          </div>\n        </div>\n      </div>\n\n    </div><!-- /panel wrapper -->\n\n  }\n</div>\n" }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], expandMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandMode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], customIconPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "customIconPath", required: false }] }], customIconOpenPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "customIconOpenPath", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], itemToggled: [{ type: i0.Output, args: ["itemToggled"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SvAccordionComponent };
+//# sourceMappingURL=styloviz-accordion.mjs.map

package/fesm2022/styloviz-accordion.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styloviz-accordion.mjs","sources":["../../../../projects/accordion-free/src/lib/accordion.component.ts","../../../../projects/accordion-free/src/lib/accordion.component.html","../../../../projects/accordion-free/src/styloviz-accordion.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  OnInit,\n  output,\n  signal,\n} from '@angular/core';\nimport { NgClass } from '@angular/common';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\n/** Visual presentation style. */\nexport type AccordionVariant  = 'default' | 'flush' | 'filled';\n\n/** Header + content padding scale. */\nexport type AccordionSize     = 'sm' | 'md' | 'lg';\n\n/** Whether one or many panels may be open simultaneously. */\nexport type AccordionExpand   = 'single' | 'multi';\n\n/** Which side the expand/collapse chevron appears on. */\nexport type AccordionIconPos  = 'left' | 'right';\n\n/** Badge color variant for panel headers. */\nexport type AccordionBadgeColor =\n  | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';\n\n// ─── Interfaces ───────────────────────────────────────────────────────────────\n\n/** Describes a single accordion panel. */\nexport interface AccordionItem {\n  /** Unique identifier — used as the open-state key. */\n  id: string;\n  /** Main header text. */\n  title: string;\n  /** Body text (plain text). Projected content can be added via template. */\n  content: string;\n  /** Secondary line beneath the title. */\n  subtitle?: string;\n  /** SVG `<path d=\"…\">` rendered as a leading icon in the header. */\n  iconPath?: string;\n  /** Small badge label on the right side of the header (before the chevron). */\n  badge?: string;\n  /** Semantic color of the badge. @default 'neutral' */\n  badgeColor?: AccordionBadgeColor;\n  /** Prevents the panel from being toggled. @default false */\n  disabled?: boolean;\n  /** Opens this panel when the component initialises. @default false */\n  defaultOpen?: boolean;\n}\n\n/** Emitted every time a panel is toggled. */\nexport interface AccordionToggleEvent {\n  id:   string;\n  open: boolean;\n}\n\n// ─── Badge palette ────────────────────────────────────────────────────────────\n\nconst BADGE_CLASSES: Record<AccordionBadgeColor, string> = {\n  primary: 'bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300',\n  success: 'bg-accent-50  text-accent-600  dark:bg-accent-500/20  dark:text-accent-400',\n  warning: 'bg-warning-50 text-warning-600 dark:bg-warning-500/20 dark:text-warning-400',\n  danger:  'bg-danger-50  text-danger-600  dark:bg-danger-500/20  dark:text-danger-400',\n  info:    'bg-sky-50     text-sky-600     dark:bg-sky-500/20     dark:text-sky-400',\n  neutral: 'bg-gray-100   text-gray-600    dark:bg-gray-700       dark:text-gray-300',\n};\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * AccordionComponent — A fully-featured, accessible expand/collapse panel set.\n *\n * ## Variants\n * | variant    | Description                                                   |\n * |------------|---------------------------------------------------------------|\n * | `default`  | Outer border wrapping all panels with interior dividers       |\n * | `flush`    | No outer border — only horizontal dividers between panels     |\n * | `separated`| Each panel is an independent floating card with shadow        |\n * | `filled`   | Active panel header gets a tinted colour fill                 |\n *\n * ## Features\n * - Single or multi-expand mode\n * - Left or right chevron icon position\n * - Optional custom SVG icon path per panel (leading icon)\n * - Optional subtitle under the header title\n * - Optional badge with 6 semantic colour variants\n * - Disabled panel support\n * - `defaultOpen` per item to pre-open panels\n * - CSS-grid based height animation — no JavaScript height calculation\n * - Keyboard navigation: Enter/Space to toggle, ↑↓ to move focus\n * - ARIA: `role=\"button\"`, `aria-expanded`, `aria-disabled`, `aria-controls`\n * - Full dark-mode support\n * - 3 sizes: `sm` / `md` / `lg`\n *\n * ## Usage\n * ```html\n * <sv-accordion\n *   [items]=\"faqItems\"\n *   variant=\"separated\"\n *   expandMode=\"multi\"\n *   [size]=\"'md'\"\n * />\n * ```\n */\n@Component({\n  selector: 'sv-accordion',\n  standalone: true,\n  imports: [NgClass],\n  templateUrl: './accordion.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SvAccordionComponent implements OnInit {\n\n  // ── Inputs ─────────────────────────────────────────────────────────────────\n\n  /** Array of panel definitions. */\n  items = input<AccordionItem[]>([]);\n\n  /** Visual style. @default 'default' */\n  variant = input<AccordionVariant>('default');\n\n  /** Whether one or many panels can be open at once. @default 'single' */\n  expandMode = input<AccordionExpand>('single');\n\n  /** Padding / font scale. @default 'md' */\n  size = input<AccordionSize>('md');\n\n  /** Which side the chevron appears on. @default 'right' */\n  iconPosition = input<AccordionIconPos>('right');\n\n  /**\n   * Custom SVG `<path d=\"…\">` used as the expand/collapse indicator instead\n   * of the default chevron. Leave empty to use the built-in chevron.\n   * When only this is set the icon rotates 180° on open (good for arrows).\n   */\n  customIconPath = input<string>('');\n\n  /**\n   * Optional alternate SVG `<path d=\"…\">` shown when the panel is **open**.\n   * Set this alongside `customIconPath` for a true swap (e.g. plus → minus).\n   * When set, rotation is disabled — the paths switch instead.\n   */\n  customIconOpenPath = input<string>('');\n\n  /** Extra CSS classes applied to the root wrapper. */\n  customClass = input<string>('');\n\n  // ── Outputs ────────────────────────────────────────────────────────────────\n\n  /** Fires whenever a panel is opened or closed. */\n  itemToggled = output<AccordionToggleEvent>();\n\n  // ── Internal state ─────────────────────────────────────────────────────────\n\n  /** Set of currently-open item IDs. */\n  private readonly openIds = signal<Set<string>>(new Set());\n\n  // ── Lifecycle ──────────────────────────────────────────────────────────────\n\n  ngOnInit(): void {\n    const initial = new Set<string>();\n    for (const item of this.items()) {\n      if (item.defaultOpen && !item.disabled) {\n        if (this.expandMode() === 'single') {\n          initial.clear();\n          initial.add(item.id);\n          break;\n        }\n        initial.add(item.id);\n      }\n    }\n    this.openIds.set(initial);\n  }\n\n  // ── Public queries ─────────────────────────────────────────────────────────\n\n  isOpen(id: string): boolean {\n    return this.openIds().has(id);\n  }\n\n  // ── Interaction ────────────────────────────────────────────────────────────\n\n  toggle(item: AccordionItem): void {\n    if (item.disabled) return;\n\n    const current = new Set(this.openIds());\n    const wasOpen = current.has(item.id);\n\n    if (this.expandMode() === 'single') {\n      current.clear();\n      if (!wasOpen) current.add(item.id);\n    } else {\n      wasOpen ? current.delete(item.id) : current.add(item.id);\n    }\n\n    this.openIds.set(current);\n    this.itemToggled.emit({ id: item.id, open: !wasOpen });\n  }\n\n  onKeydown(event: KeyboardEvent, item: AccordionItem, _index: number): void {\n    const items = this.items().filter(i => !i.disabled);\n    const currentIndex = items.findIndex(i => i.id === item.id);\n\n    switch (event.key) {\n      case 'Enter':\n      case ' ':\n        event.preventDefault();\n        this.toggle(item);\n        break;\n      case 'ArrowDown': {\n        event.preventDefault();\n        const next = items[currentIndex + 1];\n        if (next) this.focusHeader(next.id);\n        break;\n      }\n      case 'ArrowUp': {\n        event.preventDefault();\n        const prev = items[currentIndex - 1];\n        if (prev) this.focusHeader(prev.id);\n        break;\n      }\n      case 'Home': {\n        event.preventDefault();\n        if (items.length) this.focusHeader(items[0].id);\n        break;\n      }\n      case 'End': {\n        event.preventDefault();\n        if (items.length) this.focusHeader(items[items.length - 1].id);\n        break;\n      }\n    }\n  }\n\n  private focusHeader(id: string): void {\n    const el = document.getElementById(`acc-header-${id}`);\n    el?.focus();\n  }\n\n  // ── CSS class helpers ──────────────────────────────────────────────────────\n\n  readonly rootClasses = computed(() => {\n    const v = this.variant();\n    const base = 'w-full';\n    const separated = '';\n    const bordered =\n      v === 'default' || v === 'filled'\n        ? 'rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden divide-y divide-gray-200 dark:divide-gray-700'\n        : v === 'flush'\n        ? 'divide-y divide-gray-200 dark:divide-gray-700'\n        : '';\n    return [base, separated, bordered, this.customClass()].filter(Boolean).join(' ');\n  });\n\n  itemWrapperClass(_item: AccordionItem): string {\n    return '';\n  }\n\n  headerClasses(item: AccordionItem): string {\n    const v = this.variant();\n    const s = this.size();\n    const open = this.isOpen(item.id);\n\n    const padding =\n      s === 'sm' ? 'px-4 py-2.5' :\n      s === 'lg' ? 'px-6 py-5'   :\n                   'px-5 py-4';\n\n    const base = [\n      'w-full flex items-center gap-3 text-left select-none',\n      'transition-colors duration-150 focus-visible:outline-none',\n      'focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-inset',\n      padding,\n    ].join(' ');\n\n    const cursor = item.disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer';\n\n    let bg = '';\n    if (v === 'filled') {\n      bg = open\n        ? 'bg-primary-50 dark:bg-primary-900/30'\n        : 'bg-gray-50 dark:bg-gray-800/50 hover:bg-gray-100 dark:hover:bg-gray-800';\n    } else {\n      bg = item.disabled\n        ? 'bg-white dark:bg-gray-900'\n        : 'bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800/60';\n    }\n\n    return [base, cursor, bg].join(' ');\n  }\n\n  titleClasses(item: AccordionItem): string {\n    const s = this.size();\n    const open = this.isOpen(item.id);\n    const size =\n      s === 'sm' ? 'text-sm'   :\n      s === 'lg' ? 'text-base' :\n                   'text-sm';\n\n    return [\n      size,\n      'font-semibold leading-snug tracking-tight',\n      open\n        ? 'text-primary-600 dark:text-primary-400'\n        : 'text-gray-900 dark:text-gray-100',\n    ].join(' ');\n  }\n\n  subtitleClasses(): string {\n    const s = this.size();\n    return [\n      s === 'sm' ? 'text-[11px]' : 'text-xs',\n      'mt-0.5 text-gray-500 dark:text-gray-400 leading-none',\n    ].join(' ');\n  }\n\n  contentClasses(): string {\n    const s = this.size();\n    const padding =\n      s === 'sm' ? 'px-4 pt-2 pb-4'  :\n      s === 'lg' ? 'px-6 pt-4 pb-7'  :\n                   'px-5 pt-3 pb-6';\n    return [\n      padding,\n      'text-sm text-gray-600 dark:text-gray-400 leading-relaxed',\n      'bg-white dark:bg-gray-900',\n    ].join(' ');\n  }\n\n  badgeClass(color: AccordionBadgeColor = 'neutral'): string {\n    return [\n      'inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-semibold leading-none',\n      BADGE_CLASSES[color],\n    ].join(' ');\n  }\n\n  chevronClasses(item: AccordionItem): string {\n    return [\n      'shrink-0 w-4 h-4 transition-transform duration-200',\n      this.isOpen(item.id) ? 'rotate-180' : 'rotate-0',\n      this.isOpen(item.id)\n        ? 'text-primary-500 dark:text-primary-400'\n        : 'text-gray-500 dark:text-gray-400',\n    ].join(' ');\n  }\n\n  leadingIconClasses(item: AccordionItem): string {\n    return [\n      'shrink-0 w-4 h-4',\n      this.isOpen(item.id)\n        ? 'text-primary-500 dark:text-primary-400'\n        : 'text-gray-500 dark:text-gray-400',\n    ].join(' ');\n  }\n\n  panelClasses(): string {\n    return 'grid transition-[grid-template-rows] duration-250 ease-in-out';\n  }\n}\n","<!-- ╔═══════════════════════════════════════════════════════════════════════╗\n     ║  AccordionComponent — Accessible expand/collapse panel set             ║\n     ║  Variants: default · flush · separated · filled                        ║\n     ╚═══════════════════════════════════════════════════════════════════════╝ -->\n\n<div [ngClass]=\"rootClasses()\" role=\"list\">\n  @for (item of items(); track item.id; let idx = $index) {\n\n    <!-- ── Panel wrapper (separated variant gets its own card) ─────────── -->\n    <div [ngClass]=\"itemWrapperClass(item)\" role=\"listitem\">\n\n      <!-- ── Header / trigger ──────────────────────────────────────────── -->\n      <button\n        [id]=\"'acc-header-' + item.id\"\n        type=\"button\"\n        role=\"button\"\n        [attr.aria-expanded]=\"isOpen(item.id)\"\n        [attr.aria-controls]=\"'acc-panel-' + item.id\"\n        [attr.aria-disabled]=\"item.disabled || null\"\n        [attr.tabindex]=\"item.disabled ? '-1' : '0'\"\n        [ngClass]=\"headerClasses(item)\"\n        (click)=\"toggle(item)\"\n        (keydown)=\"onKeydown($event, item, idx)\"\n      >\n        <!-- ── Left chevron (when iconPosition = 'left') ─────────────── -->\n        @if (iconPosition() === 'left') {\n          <span aria-hidden=\"true\">\n            @if (customIconPath()) {\n              <svg class=\"shrink-0 w-4 h-4 transition-transform duration-200\"\n                   [class.rotate-90]=\"!customIconOpenPath() && isOpen(item.id)\"\n                   [ngClass]=\"isOpen(item.id) ? 'text-primary-500 dark:text-primary-400' : 'text-gray-500 dark:text-gray-400'\"\n                   viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                   stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path [attr.d]=\"customIconOpenPath() && isOpen(item.id) ? customIconOpenPath() : customIconPath()\" />\n              </svg>\n            } @else {\n              <svg [ngClass]=\"chevronClasses(item)\"\n                   viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                   stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n                   aria-hidden=\"true\">\n                <path d=\"M6 9l6 6 6-6\" />\n              </svg>\n            }\n          </span>\n        }\n\n        <!-- ── Leading item icon ─────────────────────────────────────── -->\n        @if (item.iconPath) {\n          <span class=\"shrink-0\" aria-hidden=\"true\">\n            <svg [ngClass]=\"leadingIconClasses(item)\"\n                 viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                 stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path [attr.d]=\"item.iconPath\" />\n            </svg>\n          </span>\n        }\n\n        <!-- ── Title + subtitle ───────────────────────────────────────── -->\n        <span class=\"min-w-0 flex-1\">\n          <span [ngClass]=\"titleClasses(item)\" class=\"block truncate\">\n            {{ item.title }}\n          </span>\n          @if (item.subtitle) {\n            <span [ngClass]=\"subtitleClasses()\" class=\"block\">\n              {{ item.subtitle }}\n            </span>\n          }\n        </span>\n\n        <!-- ── Badge ─────────────────────────────────────────────────── -->\n        @if (item.badge) {\n          <span [ngClass]=\"badgeClass(item.badgeColor ?? 'neutral')\">\n            {{ item.badge }}\n          </span>\n        }\n\n        <!-- ── Right chevron (when iconPosition = 'right', default) ──── -->\n        @if (iconPosition() === 'right') {\n          <span class=\"ml-auto shrink-0\" aria-hidden=\"true\">\n            @if (customIconPath()) {\n              <svg class=\"w-4 h-4 transition-transform duration-200\"\n                   [class.rotate-180]=\"!customIconOpenPath() && isOpen(item.id)\"\n                   [ngClass]=\"isOpen(item.id) ? 'text-primary-500 dark:text-primary-400' : 'text-gray-500 dark:text-gray-400'\"\n                   viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                   stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path [attr.d]=\"customIconOpenPath() && isOpen(item.id) ? customIconOpenPath() : customIconPath()\" />\n              </svg>\n            } @else {\n              <svg [ngClass]=\"chevronClasses(item)\"\n                   viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                   stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n                   aria-hidden=\"true\">\n                <path d=\"M6 9l6 6 6-6\" />\n              </svg>\n            }\n          </span>\n        }\n      </button>\n\n      <!-- ── Panel body — CSS grid animation ───────────────────────────── -->\n      <div\n        [id]=\"'acc-panel-' + item.id\"\n        role=\"region\"\n        [attr.aria-labelledby]=\"'acc-header-' + item.id\"\n        class=\"grid transition-[grid-template-rows] duration-[250ms] ease-in-out\"\n        [style.grid-template-rows]=\"isOpen(item.id) ? '1fr' : '0fr'\"\n      >\n        <!-- Inner wrapper MUST have overflow:hidden for the grid trick -->\n        <div class=\"overflow-hidden\">\n          <div [ngClass]=\"contentClasses()\">\n            {{ item.content }}\n          </div>\n        </div>\n      </div>\n\n    </div><!-- /panel wrapper -->\n\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/accordion",
+  "version": "0.1.1",
+  "description": "10 varieties: default, flush, separated, filled, multi-expand, icon placements, badges & subtitles and disabled items. Sizes (sm / md / lg), CSS-grid animation and keyboard navigation are free; multi-expand is available in the Pro package.",
+  "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/accordion-free"
+  },
+  "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-accordion.mjs",
+  "typings": "types/styloviz-accordion.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/styloviz-accordion.d.ts",
+      "default": "./fesm2022/styloviz-accordion.mjs"
+    }
+  },
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/types/styloviz-accordion.d.ts

@@ -0,0 +1,124 @@
+import * as _angular_core from '@angular/core';
+import { OnInit } from '@angular/core';
+
+/** Visual presentation style. */
+type AccordionVariant = 'default' | 'flush' | 'filled';
+/** Header + content padding scale. */
+type AccordionSize = 'sm' | 'md' | 'lg';
+/** Whether one or many panels may be open simultaneously. */
+type AccordionExpand = 'single' | 'multi';
+/** Which side the expand/collapse chevron appears on. */
+type AccordionIconPos = 'left' | 'right';
+/** Badge color variant for panel headers. */
+type AccordionBadgeColor = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+/** Describes a single accordion panel. */
+interface AccordionItem {
+    /** Unique identifier — used as the open-state key. */
+    id: string;
+    /** Main header text. */
+    title: string;
+    /** Body text (plain text). Projected content can be added via template. */
+    content: string;
+    /** Secondary line beneath the title. */
+    subtitle?: string;
+    /** SVG `<path d="…">` rendered as a leading icon in the header. */
+    iconPath?: string;
+    /** Small badge label on the right side of the header (before the chevron). */
+    badge?: string;
+    /** Semantic color of the badge. @default 'neutral' */
+    badgeColor?: AccordionBadgeColor;
+    /** Prevents the panel from being toggled. @default false */
+    disabled?: boolean;
+    /** Opens this panel when the component initialises. @default false */
+    defaultOpen?: boolean;
+}
+/** Emitted every time a panel is toggled. */
+interface AccordionToggleEvent {
+    id: string;
+    open: boolean;
+}
+/**
+ * AccordionComponent — A fully-featured, accessible expand/collapse panel set.
+ *
+ * ## Variants
+ * | variant    | Description                                                   |
+ * |------------|---------------------------------------------------------------|
+ * | `default`  | Outer border wrapping all panels with interior dividers       |
+ * | `flush`    | No outer border — only horizontal dividers between panels     |
+ * | `separated`| Each panel is an independent floating card with shadow        |
+ * | `filled`   | Active panel header gets a tinted colour fill                 |
+ *
+ * ## Features
+ * - Single or multi-expand mode
+ * - Left or right chevron icon position
+ * - Optional custom SVG icon path per panel (leading icon)
+ * - Optional subtitle under the header title
+ * - Optional badge with 6 semantic colour variants
+ * - Disabled panel support
+ * - `defaultOpen` per item to pre-open panels
+ * - CSS-grid based height animation — no JavaScript height calculation
+ * - Keyboard navigation: Enter/Space to toggle, ↑↓ to move focus
+ * - ARIA: `role="button"`, `aria-expanded`, `aria-disabled`, `aria-controls`
+ * - Full dark-mode support
+ * - 3 sizes: `sm` / `md` / `lg`
+ *
+ * ## Usage
+ * ```html
+ * <sv-accordion
+ *   [items]="faqItems"
+ *   variant="separated"
+ *   expandMode="multi"
+ *   [size]="'md'"
+ * />
+ * ```
+ */
+declare class SvAccordionComponent implements OnInit {
+    /** Array of panel definitions. */
+    items: _angular_core.InputSignal<AccordionItem[]>;
+    /** Visual style. @default 'default' */
+    variant: _angular_core.InputSignal<AccordionVariant>;
+    /** Whether one or many panels can be open at once. @default 'single' */
+    expandMode: _angular_core.InputSignal<AccordionExpand>;
+    /** Padding / font scale. @default 'md' */
+    size: _angular_core.InputSignal<AccordionSize>;
+    /** Which side the chevron appears on. @default 'right' */
+    iconPosition: _angular_core.InputSignal<AccordionIconPos>;
+    /**
+     * Custom SVG `<path d="…">` used as the expand/collapse indicator instead
+     * of the default chevron. Leave empty to use the built-in chevron.
+     * When only this is set the icon rotates 180° on open (good for arrows).
+     */
+    customIconPath: _angular_core.InputSignal<string>;
+    /**
+     * Optional alternate SVG `<path d="…">` shown when the panel is **open**.
+     * Set this alongside `customIconPath` for a true swap (e.g. plus → minus).
+     * When set, rotation is disabled — the paths switch instead.
+     */
+    customIconOpenPath: _angular_core.InputSignal<string>;
+    /** Extra CSS classes applied to the root wrapper. */
+    customClass: _angular_core.InputSignal<string>;
+    /** Fires whenever a panel is opened or closed. */
+    itemToggled: _angular_core.OutputEmitterRef<AccordionToggleEvent>;
+    /** Set of currently-open item IDs. */
+    private readonly openIds;
+    ngOnInit(): void;
+    isOpen(id: string): boolean;
+    toggle(item: AccordionItem): void;
+    onKeydown(event: KeyboardEvent, item: AccordionItem, _index: number): void;
+    private focusHeader;
+    readonly rootClasses: _angular_core.Signal<string>;
+    itemWrapperClass(_item: AccordionItem): string;
+    headerClasses(item: AccordionItem): string;
+    titleClasses(item: AccordionItem): string;
+    subtitleClasses(): string;
+    contentClasses(): string;
+    badgeClass(color?: AccordionBadgeColor): string;
+    chevronClasses(item: AccordionItem): string;
+    leadingIconClasses(item: AccordionItem): string;
+    panelClasses(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SvAccordionComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SvAccordionComponent, "sv-accordion", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "expandMode": { "alias": "expandMode"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "customIconPath": { "alias": "customIconPath"; "required": false; "isSignal": true; }; "customIconOpenPath": { "alias": "customIconOpenPath"; "required": false; "isSignal": true; }; "customClass": { "alias": "customClass"; "required": false; "isSignal": true; }; }, { "itemToggled": "itemToggled"; }, never, never, true, never>;
+}
+
+export { SvAccordionComponent };
+export type { AccordionBadgeColor, AccordionExpand, AccordionIconPos, AccordionItem, AccordionSize, AccordionToggleEvent, AccordionVariant };