@nuralyui/collapse 0.0.7 → 0.0.9

package/collapse.component.d.ts

@@ -0,0 +1,94 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import { CollapseSection, CollapseSize, CollapseVariant, CollapseAnimation } from './collapse.type.js';
+import '../icon/icon.component.js';
+declare const HyCollapse_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+/**
+ * Versatile collapse/accordion component with multiple variants, animations, and accessibility features.
+ *
+ * @example
+ * ```html
+ * <nr-collapse
+ *   .sections="${sections}"
+ *   size="medium"
+ *   variant="default"
+ *   accordion
+ * ></nr-collapse>
+ * ```
+ *
+ * @element nr-collapse
+ * @fires section-toggle - Fired when a section is toggled
+ * @fires section-before-toggle - Fired before a section is toggled (cancellable)
+ */
+export declare class HyCollapse extends HyCollapse_base {
+    static styles: import("lit").CSSResult;
+    requiredComponents: string[];
+    private animationController;
+    private accordionController;
+    sections: CollapseSection[];
+    size: CollapseSize;
+    variant: CollapseVariant;
+    animation: CollapseAnimation;
+    accordion: boolean;
+    allowMultiple: boolean;
+    disabled: boolean;
+    expandIcon: string;
+    collapseIcon: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string, any>): void;
+    /**
+     * Toggle a section by index
+     */
+    toggleSection(index: number): Promise<void>;
+    /**
+     * Open a specific section
+     */
+    openSection(index: number): Promise<void>;
+    /**
+     * Close a specific section
+     */
+    closeSection(index: number): Promise<void>;
+    /**
+     * Open all sections (respects accordion mode)
+     */
+    openAllSections(): void;
+    /**
+     * Close all sections
+     */
+    closeAllSections(): void;
+    /**
+     * Update a specific section (used by controllers and internal logic)
+     */
+    updateSection(index: number, updates: Partial<CollapseSection>): void;
+    /**
+     * Update multiple sections at once (used by controllers for batch operations)
+     */
+    updateSections(updates: Array<{
+        index: number;
+        updates: Partial<CollapseSection>;
+    }>): void;
+    /**
+     * Handle toggle request from keyboard controller
+     */
+    private handleToggleRequest;
+    /**
+     * Get icon for section state
+     */
+    private getSectionIcon;
+    /**
+     * Check if section is animating
+     */
+    private isSectionAnimating;
+    render(): import("lit").TemplateResult<1>;
+    /**
+     * Render individual section
+     */
+    private renderSection;
+}
+export {};
+//# sourceMappingURL=collapse.component.d.ts.map

package/collapse.component.js

@@ -0,0 +1,324 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { EMPTY_STRING } from './collapse.type.js';
+import { styles } from './collapse.style.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+import { map } from 'lit/directives/map.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+// Import icon component
+import '../icon/icon.component.js';
+// Import controllers
+import { CollapseAnimationController, CollapseAccordionController } from './controllers/index.js';
+/**
+ * Versatile collapse/accordion component with multiple variants, animations, and accessibility features.
+ *
+ * @example
+ * ```html
+ * <nr-collapse
+ *   .sections="${sections}"
+ *   size="medium"
+ *   variant="default"
+ *   accordion
+ * ></nr-collapse>
+ * ```
+ *
+ * @element nr-collapse
+ * @fires section-toggle - Fired when a section is toggled
+ * @fires section-before-toggle - Fired before a section is toggled (cancellable)
+ */
+let HyCollapse = class HyCollapse extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.requiredComponents = ['nr-icon'];
+        // Controllers
+        this.animationController = new CollapseAnimationController(this);
+        this.accordionController = new CollapseAccordionController(this);
+        // Public properties
+        this.sections = [];
+        this.size = "medium" /* CollapseSize.Medium */;
+        this.variant = "default" /* CollapseVariant.Default */;
+        this.animation = "slide" /* CollapseAnimation.Slide */;
+        this.accordion = false;
+        this.allowMultiple = false;
+        this.disabled = false;
+        this.expandIcon = 'chevron-right';
+        this.collapseIcon = 'chevron-down';
+        /**
+         * Handle toggle request from keyboard controller
+         */
+        this.handleToggleRequest = (event) => {
+            const { index } = event.detail;
+            this.toggleSection(index);
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Listen for internal events from controllers
+        this.addEventListener('section-toggle-requested', this.handleToggleRequest);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('section-toggle-requested', this.handleToggleRequest);
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('accordion') || changedProperties.has('allowMultiple')) {
+            this.accordionController.enforceAccordionMode();
+        }
+    }
+    /**
+     * Toggle a section by index
+     */
+    toggleSection(index) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const section = this.sections[index];
+            if (!section || section.disabled || section.collapsible === false) {
+                return;
+            }
+            const isCurrentlyOpen = !!section.open;
+            const willBeOpen = !isCurrentlyOpen;
+            // Dispatch before-toggle event (cancellable)
+            const beforeToggleEvent = new CustomEvent('section-before-toggle', {
+                detail: {
+                    index,
+                    section,
+                    isOpen: isCurrentlyOpen,
+                    preventDefault: () => beforeToggleEvent.preventDefault()
+                },
+                cancelable: true,
+                bubbles: true
+            });
+            if (!this.dispatchEvent(beforeToggleEvent)) {
+                return; // Event was cancelled
+            }
+            // Handle accordion logic
+            this.accordionController.handleSectionToggle(index, willBeOpen);
+            // Update section state
+            this.updateSection(index, { open: willBeOpen });
+            // Handle animation
+            if (this.animation !== "none" /* CollapseAnimation.None */) {
+                yield this.animationController.animateToggle(index, willBeOpen);
+            }
+            // Dispatch toggle event
+            this.dispatchEvent(new CustomEvent('section-toggle', {
+                detail: {
+                    index,
+                    section: this.sections[index],
+                    isOpen: willBeOpen
+                },
+                bubbles: true
+            }));
+        });
+    }
+    /**
+     * Open a specific section
+     */
+    openSection(index) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const section = this.sections[index];
+            if (section && !section.open) {
+                yield this.toggleSection(index);
+            }
+        });
+    }
+    /**
+     * Close a specific section
+     */
+    closeSection(index) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const section = this.sections[index];
+            if (section && section.open) {
+                yield this.toggleSection(index);
+            }
+        });
+    }
+    /**
+     * Open all sections (respects accordion mode)
+     */
+    openAllSections() {
+        this.accordionController.openAllSections();
+    }
+    /**
+     * Close all sections
+     */
+    closeAllSections() {
+        this.accordionController.closeAllSections();
+    }
+    /**
+     * Update a specific section (used by controllers and internal logic)
+     */
+    updateSection(index, updates) {
+        if (index < 0 || index >= this.sections.length) {
+            return;
+        }
+        this.sections = this.sections.map((section, i) => i === index ? Object.assign(Object.assign({}, section), updates) : section);
+    }
+    /**
+     * Update multiple sections at once (used by controllers for batch operations)
+     */
+    updateSections(updates) {
+        if (updates.length === 0) {
+            return;
+        }
+        this.sections = this.sections.map((section, i) => {
+            const update = updates.find(u => u.index === i);
+            return update ? Object.assign(Object.assign({}, section), update.updates) : section;
+        });
+    }
+    /**
+     * Get icon for section state
+     */
+    getSectionIcon(section) {
+        if (section.expandIcon && section.collapseIcon) {
+            return section.open ? section.collapseIcon : section.expandIcon;
+        }
+        if (section.headerIcon) {
+            return section.headerIcon;
+        }
+        return section.open ? this.collapseIcon : this.expandIcon;
+    }
+    /**
+     * Check if section is animating
+     */
+    isSectionAnimating(index) {
+        return this.animationController.isAnimating(index);
+    }
+    render() {
+        return html `
+      <div class="collapse-container ${classMap({
+            [`collapse-${this.size}`]: true,
+            [`collapse-${this.variant}`]: true,
+            'collapse-accordion': this.accordion,
+            'collapse-disabled': this.disabled
+        })}">
+        ${map(this.sections, (section, index) => this.renderSection(section, index))}
+      </div>
+    `;
+    }
+    /**
+     * Render individual section
+     */
+    renderSection(section, index) {
+        const isOpen = !!section.open;
+        const isDisabled = this.disabled || section.disabled;
+        const isCollapsible = section.collapsible !== false;
+        const isAnimating = this.isSectionAnimating(index);
+        return html `
+      <div 
+        class="collapse-section ${classMap({
+            'collapse-section--open': isOpen,
+            'collapse-section--disabled': isDisabled !== null && isDisabled !== void 0 ? isDisabled : false,
+            'collapse-section--non-collapsible': !isCollapsible,
+            'collapse-section--animating': isAnimating,
+            [section.className || EMPTY_STRING]: !!section.className
+        })}"
+        data-section-index="${index}"
+      >
+        <!-- Section Header -->
+        <div
+          class="collapse-header ${classMap({
+            'collapse-header--expanded': isOpen,
+            'collapse-header--disabled': isDisabled !== null && isDisabled !== void 0 ? isDisabled : false,
+            'collapse-header--clickable': isCollapsible && !isDisabled
+        })}"
+          data-section-index="${index}"
+          role="button"
+          tabindex="${isCollapsible && !isDisabled ? '0' : '-1'}"
+          aria-expanded="${isOpen}"
+          aria-controls="collapse-content-${index}"
+          aria-disabled="${ifDefined(isDisabled)}"
+          @click="${isCollapsible && !isDisabled ? () => this.toggleSection(index) : nothing}"
+        >
+          ${isCollapsible ? html `
+            <nr-icon
+              class="collapse-icon ${classMap({
+            'collapse-icon--expanded': isOpen
+        })}"
+              name="${this.getSectionIcon(section)}"
+              aria-hidden="true"
+            ></nr-icon>
+          ` : nothing}
+          
+          <span class="collapse-header-text">
+            ${section.headerSlot ? html `<slot name="${section.headerSlot}"></slot>` : section.header}
+          </span>
+
+          ${section.headerRight || section.headerRightSlot ? html `
+            <div class="collapse-header-right" @click="${(e) => e.stopPropagation()}">
+              ${section.headerRightSlot ? html `<slot name="${section.headerRightSlot}"></slot>` : section.headerRight}
+            </div>
+          ` : nothing}
+        </div>
+
+        <!-- Section Content -->
+        ${isOpen ? html `
+          <div
+            id="collapse-content-${index}"
+            class="collapse-content"
+            data-section-index="${index}"
+            role="region"
+            aria-labelledby="collapse-header-${index}"
+          >
+            <div class="collapse-content-inner">
+              ${section.contentSlot ? html `<slot name="${section.contentSlot}"></slot>` : section.content}
+            </div>
+          </div>
+        ` : nothing}
+      </div>
+    `;
+    }
+};
+HyCollapse.styles = styles;
+__decorate([
+    property({ type: Array })
+], HyCollapse.prototype, "sections", void 0);
+__decorate([
+    property({ type: String })
+], HyCollapse.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], HyCollapse.prototype, "variant", void 0);
+__decorate([
+    property({ type: String })
+], HyCollapse.prototype, "animation", void 0);
+__decorate([
+    property({ type: Boolean })
+], HyCollapse.prototype, "accordion", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'allow-multiple' })
+], HyCollapse.prototype, "allowMultiple", void 0);
+__decorate([
+    property({ type: Boolean })
+], HyCollapse.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, attribute: 'expand-icon' })
+], HyCollapse.prototype, "expandIcon", void 0);
+__decorate([
+    property({ type: String, attribute: 'collapse-icon' })
+], HyCollapse.prototype, "collapseIcon", void 0);
+HyCollapse = __decorate([
+    customElement('nr-collapse')
+], HyCollapse);
+export { HyCollapse };
+//# sourceMappingURL=collapse.component.js.map

package/collapse.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapse.component.js","sourceRoot":"","sources":["../../../src/components/collapse/collapse.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport {\n  CollapseSection,\n  CollapseSize,\n  CollapseVariant,\n  CollapseAnimation,\n  CollapseSectionToggleEvent,\n  CollapseBeforeToggleEvent,\n  EMPTY_STRING\n} from './collapse.type.js';\nimport { styles } from './collapse.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { map } from 'lit/directives/map.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\n// Import icon component\nimport '../icon/icon.component.js';\n\n// Import controllers\nimport {\n  CollapseAnimationController,\n  CollapseAccordionController\n} from './controllers/index.js';\n\n/**\n * Versatile collapse/accordion component with multiple variants, animations, and accessibility features.\n * \n * @example\n * ```html\n * <nr-collapse\n *   .sections=\"${sections}\"\n *   size=\"medium\"\n *   variant=\"default\"\n *   accordion\n * ></nr-collapse>\n * ```\n * \n * @element nr-collapse\n * @fires section-toggle - Fired when a section is toggled\n * @fires section-before-toggle - Fired before a section is toggled (cancellable)\n */\n@customElement('nr-collapse')\nexport class HyCollapse extends NuralyUIBaseMixin(LitElement) {\n  static override styles = styles;\n  override requiredComponents = ['nr-icon'];\n\n  // Controllers\n  private animationController = new CollapseAnimationController(this);\n  private accordionController = new CollapseAccordionController(this);\n\n  // Public properties\n  @property({ type: Array }) sections: CollapseSection[] = [];\n  @property({ type: String }) size: CollapseSize = CollapseSize.Medium;\n  @property({ type: String }) variant: CollapseVariant = CollapseVariant.Default;\n  @property({ type: String }) animation: CollapseAnimation = CollapseAnimation.Slide;\n  @property({ type: Boolean }) accordion = false;\n  @property({ type: Boolean, attribute: 'allow-multiple' }) allowMultiple = false;\n  @property({ type: Boolean }) disabled = false;\n  @property({ type: String, attribute: 'expand-icon' }) expandIcon = 'chevron-right';\n  @property({ type: String, attribute: 'collapse-icon' }) collapseIcon = 'chevron-down';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    \n    // Listen for internal events from controllers\n    this.addEventListener('section-toggle-requested', this.handleToggleRequest as EventListener);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('section-toggle-requested', this.handleToggleRequest as EventListener);\n  }\n\n  override updated(changedProperties: Map<string, any>): void {\n    super.updated(changedProperties);\n    \n    if (changedProperties.has('accordion') || changedProperties.has('allowMultiple')) {\n      this.accordionController.enforceAccordionMode();\n    }\n  }\n\n  /**\n   * Toggle a section by index\n   */\n  async toggleSection(index: number): Promise<void> {\n    const section = this.sections[index];\n    if (!section || section.disabled || section.collapsible === false) {\n      return;\n    }\n\n    const isCurrentlyOpen = !!section.open;\n    const willBeOpen = !isCurrentlyOpen;\n\n    // Dispatch before-toggle event (cancellable)\n    const beforeToggleEvent: CustomEvent<CollapseBeforeToggleEvent> = new CustomEvent<CollapseBeforeToggleEvent>('section-before-toggle', {\n      detail: {\n        index,\n        section,\n        isOpen: isCurrentlyOpen,\n        preventDefault: () => beforeToggleEvent.preventDefault()\n      },\n      cancelable: true,\n      bubbles: true\n    });\n\n    if (!this.dispatchEvent(beforeToggleEvent)) {\n      return; // Event was cancelled\n    }\n\n    // Handle accordion logic\n    this.accordionController.handleSectionToggle(index, willBeOpen);\n\n    // Update section state\n    this.updateSection(index, { open: willBeOpen });\n\n    // Handle animation\n    if (this.animation !== CollapseAnimation.None) {\n      await this.animationController.animateToggle(index, willBeOpen);\n    }\n\n    // Dispatch toggle event\n    this.dispatchEvent(new CustomEvent<CollapseSectionToggleEvent>('section-toggle', {\n      detail: {\n        index,\n        section: this.sections[index],\n        isOpen: willBeOpen\n      },\n      bubbles: true\n    }));\n  }\n\n  /**\n   * Open a specific section\n   */\n  async openSection(index: number): Promise<void> {\n    const section = this.sections[index];\n    if (section && !section.open) {\n      await this.toggleSection(index);\n    }\n  }\n\n  /**\n   * Close a specific section\n   */\n  async closeSection(index: number): Promise<void> {\n    const section = this.sections[index];\n    if (section && section.open) {\n      await this.toggleSection(index);\n    }\n  }\n\n  /**\n   * Open all sections (respects accordion mode)\n   */\n  openAllSections(): void {\n    this.accordionController.openAllSections();\n  }\n\n  /**\n   * Close all sections\n   */\n  closeAllSections(): void {\n    this.accordionController.closeAllSections();\n  }\n\n  /**\n   * Update a specific section (used by controllers and internal logic)\n   */\n  updateSection(index: number, updates: Partial<CollapseSection>): void {\n    if (index < 0 || index >= this.sections.length) {\n      return;\n    }\n    \n    this.sections = this.sections.map((section, i) => \n      i === index ? { ...section, ...updates } : section\n    );\n  }\n\n  /**\n   * Update multiple sections at once (used by controllers for batch operations)\n   */\n  updateSections(updates: Array<{ index: number; updates: Partial<CollapseSection> }>): void {\n    if (updates.length === 0) {\n      return;\n    }\n    \n    this.sections = this.sections.map((section, i) => {\n      const update = updates.find(u => u.index === i);\n      return update ? { ...section, ...update.updates } : section;\n    });\n  }\n\n  /**\n   * Handle toggle request from keyboard controller\n   */\n  private handleToggleRequest = (event: CustomEvent): void => {\n    const { index } = event.detail;\n    this.toggleSection(index);\n  };\n\n  /**\n   * Get icon for section state\n   */\n  private getSectionIcon(section: CollapseSection): string {\n    if (section.expandIcon && section.collapseIcon) {\n      return section.open ? section.collapseIcon : section.expandIcon;\n    }\n    \n    if (section.headerIcon) {\n      return section.headerIcon;\n    }\n\n    return section.open ? this.collapseIcon : this.expandIcon;\n  }\n\n  /**\n   * Check if section is animating\n   */\n  private isSectionAnimating(index: number): boolean {\n    return this.animationController.isAnimating(index);\n  }\n\n  override render() {\n    return html`\n      <div class=\"collapse-container ${classMap({\n        [`collapse-${this.size}`]: true,\n        [`collapse-${this.variant}`]: true,\n        'collapse-accordion': this.accordion,\n        'collapse-disabled': this.disabled\n      })}\">\n        ${map(this.sections, (section, index) => this.renderSection(section, index))}\n      </div>\n    `;\n  }\n\n  /**\n   * Render individual section\n   */\n  private renderSection(section: CollapseSection, index: number) {\n    const isOpen = !!section.open;\n    const isDisabled = this.disabled || section.disabled;\n    const isCollapsible = section.collapsible !== false;\n    const isAnimating = this.isSectionAnimating(index);\n\n    return html`\n      <div \n        class=\"collapse-section ${classMap({\n          'collapse-section--open': isOpen,\n          'collapse-section--disabled': isDisabled ?? false,\n          'collapse-section--non-collapsible': !isCollapsible,\n          'collapse-section--animating': isAnimating,\n          [section.className || EMPTY_STRING]: !!section.className\n        })}\"\n        data-section-index=\"${index}\"\n      >\n        <!-- Section Header -->\n        <div\n          class=\"collapse-header ${classMap({\n            'collapse-header--expanded': isOpen,\n            'collapse-header--disabled': isDisabled ?? false,\n            'collapse-header--clickable': isCollapsible && !isDisabled\n          })}\"\n          data-section-index=\"${index}\"\n          role=\"button\"\n          tabindex=\"${isCollapsible && !isDisabled ? '0' : '-1'}\"\n          aria-expanded=\"${isOpen}\"\n          aria-controls=\"collapse-content-${index}\"\n          aria-disabled=\"${ifDefined(isDisabled)}\"\n          @click=\"${isCollapsible && !isDisabled ? () => this.toggleSection(index) : nothing}\"\n        >\n          ${isCollapsible ? html`\n            <nr-icon\n              class=\"collapse-icon ${classMap({\n                'collapse-icon--expanded': isOpen\n              })}\"\n              name=\"${this.getSectionIcon(section)}\"\n              aria-hidden=\"true\"\n            ></nr-icon>\n          ` : nothing}\n          \n          <span class=\"collapse-header-text\">\n            ${section.headerSlot ? html`<slot name=\"${section.headerSlot}\"></slot>` : section.header}\n          </span>\n\n          ${section.headerRight || section.headerRightSlot ? html`\n            <div class=\"collapse-header-right\" @click=\"${(e: Event) => e.stopPropagation()}\">\n              ${section.headerRightSlot ? html`<slot name=\"${section.headerRightSlot}\"></slot>` : section.headerRight}\n            </div>\n          ` : nothing}\n        </div>\n\n        <!-- Section Content -->\n        ${isOpen ? html`\n          <div\n            id=\"collapse-content-${index}\"\n            class=\"collapse-content\"\n            data-section-index=\"${index}\"\n            role=\"region\"\n            aria-labelledby=\"collapse-header-${index}\"\n          >\n            <div class=\"collapse-content-inner\">\n              ${section.contentSlot ? html`<slot name=\"${section.contentSlot}\"></slot>` : section.content}\n            </div>\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n"]}

package/collapse.style.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Collapse component styles using theme variables
+ * Follows NuralyUI architecture with clean CSS variable usage
+ */
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=collapse.style.d.ts.map