@nuraly/lumenui 0.1.0 → 0.2.2

package/dist/src/components/collapse/collapse.component.js

@@ -44,6 +44,11 @@ import { CollapseAnimationController, CollapseAccordionController } from './cont
  * @element nr-collapse
  * @fires section-toggle - Fired when a section is toggled
  * @fires section-before-toggle - Fired before a section is toggled (cancellable)
+ *
+ * @csspart container - The outermost collapse container div
+ * @csspart item - An individual collapse section wrapper
+ * @csspart item-header - The header/trigger element of a collapse section
+ * @csspart item-content - The collapsible content area of a section
  */
 let HyCollapse = class HyCollapse extends NuralyUIBaseMixin(LitElement) {
     constructor() {
@@ -204,7 +209,7 @@ let HyCollapse = class HyCollapse extends NuralyUIBaseMixin(LitElement) {
     }
     render() {
         return html `
-      <div class="collapse-container ${classMap({
+      <div part="container" class="collapse-container ${classMap({
             [`collapse-${this.size}`]: true,
             [`collapse-${this.variant}`]: true,
             'collapse-accordion': this.accordion,
@@ -223,7 +228,8 @@ let HyCollapse = class HyCollapse extends NuralyUIBaseMixin(LitElement) {
         const isCollapsible = section.collapsible !== false;
         const isAnimating = this.isSectionAnimating(index);
         return html `
-      <div 
+      <div
+        part="item"
         class="collapse-section ${classMap({
             'collapse-section--open': isOpen,
             'collapse-section--disabled': isDisabled !== null && isDisabled !== void 0 ? isDisabled : false,
@@ -235,6 +241,7 @@ let HyCollapse = class HyCollapse extends NuralyUIBaseMixin(LitElement) {
       >
         <!-- Section Header -->
         <div
+          part="item-header"
           class="collapse-header ${classMap({
             'collapse-header--expanded': isOpen,
             'collapse-header--disabled': isDisabled !== null && isDisabled !== void 0 ? isDisabled : false,
@@ -272,6 +279,7 @@ let HyCollapse = class HyCollapse extends NuralyUIBaseMixin(LitElement) {
         <!-- Section Content -->
         ${isOpen ? html `
           <div
+            part="item-content"
             id="collapse-content-${index}"
             class="collapse-content"
             data-section-index="${index}"
@@ -287,6 +295,7 @@ let HyCollapse = class HyCollapse extends NuralyUIBaseMixin(LitElement) {
     `;
     }
 };
+HyCollapse.useShadowDom = true;
 HyCollapse.styles = styles;
 __decorate([
     property({ type: Array })

package/dist/src/components/collapse/collapse.style.js

@@ -12,10 +12,10 @@ export const styles = css `
   :host {
     display: block;
     width: 100%;
-    
+
     /* Force CSS custom property inheritance to ensure theme switching works properly */
-    color: var(--nuraly-color-text);
-    background-color: var(--nuraly-color-background);
+    color: #161616;
+    background-color: #ffffff;
   }
 
   /* Force re-evaluation of theme-dependent properties on theme change */
@@ -27,17 +27,17 @@ export const styles = css `
   .collapse-container {
     display: flex;
     flex-direction: column;
-    gap: var(--nuraly-spacing-collapse-gap);
-    border: var(--nuraly-color-collapse-border);
-    border-radius: var(--nuraly-border-radius-collapse);
-    background-color: var(--nuraly-color-collapse-bordered-background);
+    gap: 0;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    background-color: #ffffff;
     overflow: visible;
   }
 
   .collapse-section {
     position: relative;
-    border-bottom: 1px solid var(--nuraly-color-collapse-border);
-    transition: var(--nuraly-transition-collapse);
+    border-bottom: 1px solid #e0e0e0;
+    transition: all 0.2s;
   }
 
   .collapse-section:last-child {
@@ -45,7 +45,7 @@ export const styles = css `
   }
 
   .collapse-section--disabled {
-    opacity: var(--nuraly-opacity-collapse-disabled);
+    opacity: 0.5;
     pointer-events: none;
   }
 
@@ -62,40 +62,40 @@ export const styles = css `
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: var(--nuraly-spacing-collapse-padding);
-    background-color: var(--nuraly-color-collapse-header-background);
-    color: var(--nuraly-color-collapse-header-text);
-    font-weight: var(--nuraly-font-collapse-header-weight);
-    font-size: var(--nuraly-font-collapse-header-size);
-    line-height: var(--nuraly-font-collapse-header-line-height);
+    padding: 0.75rem 1rem;
+    background-color: #f4f4f4;
+    color: #161616;
+    font-weight: 500;
+    font-size: 0.875rem;
+    line-height: 1.5;
     border: none;
     cursor: pointer;
     user-select: none;
-    transition: var(--nuraly-collapse-transition-duration) var(--nuraly-collapse-transition-easing);
-    border-radius: var(--nuraly-border-radius-collapse-header);
+    transition: 0.2s ease;
+    border-radius: 0;
   }
 
   .collapse-header--clickable:hover {
-    background-color: var(--nuraly-color-collapse-header-background-hover);
+    background-color: #e8e8e8;
   }
 
   .collapse-header--clickable:active {
-    background-color: var(--nuraly-color-collapse-header-background-active);
+    background-color: #d8d8d8;
   }
 
   .collapse-header--expanded {
-    background-color: var(--nuraly-color-collapse-header-background-expanded);
+    background-color: #e8e8e8;
   }
 
   .collapse-header--disabled {
-    color: var(--nuraly-color-collapse-header-text-disabled);
+    color: #c6c6c6;
     cursor: not-allowed;
   }
 
   .collapse-header:focus-visible {
-    outline: 2px solid var(--nuraly-color-collapse-focus-outline);
+    outline: 2px solid #7c3aed;
     outline-offset: 2px;
-    box-shadow: var(--nuraly-shadow-collapse-focus);
+    box-shadow: 0 0 0 3px rgba(124,58,237,0.2);
   }
 
   .collapse-header-text {
@@ -106,9 +106,9 @@ export const styles = css `
   .collapse-header-right {
     display: flex;
     align-items: center;
-    gap: var(--nuraly-spacing-collapse-header-right-gap, 0.5rem);
-    margin-left: var(--nuraly-spacing-collapse-header-right-margin, 0.75rem);
-    color: var(--nuraly-color-collapse-header-right-text, inherit);
+    gap: 0.5rem;
+    margin-left: 0.75rem;
+    color: inherit;
   }
 
   .collapse-header-right > * {
@@ -120,89 +120,89 @@ export const styles = css `
     display: flex;
     align-items: center;
     justify-content: center;
-    width: var(--nuraly-collapse-icon-size);
-    height: var(--nuraly-collapse-icon-size);
-    color: var(--nuraly-color-collapse-icon);
-    transition: var(--nuraly-collapse-icon-transition);
+    width: 1rem;
+    height: 1rem;
+    color: #525252;
+    transition: transform 0.2s ease;
     transform-origin: center;
   }
 
   .collapse-header--disabled .collapse-icon {
-    color: var(--nuraly-color-collapse-icon-disabled);
+    color: #c6c6c6;
   }
 
   /* Content Styles */
   .collapse-content {
-    background-color: var(--nuraly-color-collapse-content-background);
-    border-radius: var(--nuraly-border-radius-collapse-content);
-    transition: var(--nuraly-collapse-transition-duration) var(--nuraly-collapse-transition-easing);
+    background-color: #ffffff;
+    border-radius: 0;
+    transition: 0.2s ease;
   }
 
   .collapse-content-inner {
-    padding: var(--nuraly-spacing-collapse-content-padding);
-    color: var(--nuraly-color-collapse-content-text);
-    font-weight: var(--nuraly-font-collapse-content-weight);
-    font-size: var(--nuraly-font-collapse-content-size);
-    line-height: var(--nuraly-font-collapse-content-line-height);
+    padding: 1rem;
+    color: #161616;
+    font-weight: 400;
+    font-size: 0.875rem;
+    line-height: 1.5;
   }
 
   /* Size Variants */
   :host([size="small"]) .collapse-header {
-    padding: var(--nuraly-spacing-collapse-small-padding);
+    padding: 0.5rem 0.75rem;
   }
 
   :host([size="small"]) .collapse-content-inner {
-    padding: var(--nuraly-spacing-collapse-small-content-padding);
+    padding: 0.5rem 0.75rem;
   }
 
   :host([size="medium"]) .collapse-header {
-    padding: var(--nuraly-spacing-collapse-medium-padding);
+    padding: 0.75rem 1rem;
   }
 
   :host([size="medium"]) .collapse-content-inner {
-    padding: var(--nuraly-spacing-collapse-medium-content-padding);
+    padding: 0.75rem 1rem;
   }
 
   :host([size="large"]) .collapse-header {
-    padding: var(--nuraly-spacing-collapse-large-padding);
+    padding: 1rem 1.5rem;
   }
 
   :host([size="large"]) .collapse-content-inner {
-    padding: var(--nuraly-spacing-collapse-large-content-padding);
+    padding: 1rem 1.5rem;
   }
 
   /* Variant Styles */
   :host([variant="default"]) .collapse-container {
-    background-color: var(--nuraly-color-collapse-content-background);
-    border: 1px solid var(--nuraly-color-collapse-border);
+    background-color: #ffffff;
+    border: 1px solid #e0e0e0;
   }
 
   :host([variant="bordered"]) .collapse-container {
-    background-color: var(--nuraly-color-collapse-bordered-background);
-    border: 2px solid var(--nuraly-color-collapse-bordered-border);
+    background-color: #ffffff;
+    border: 2px solid #e0e0e0;
   }
 
   :host([variant="ghost"]) .collapse-container {
-    background-color: var(--nuraly-color-collapse-ghost-background);
-    border: 1px solid var(--nuraly-color-collapse-ghost-border);
+    background-color: transparent;
+    border: 1px solid transparent;
   }
 
   :host([variant="ghost"]) .collapse-header:hover {
-    background-color: var(--nuraly-color-collapse-ghost-hover);
+    background-color: #f4f4f4;
   }
 
   /* Accordion Mode */
   :host([accordion]) .collapse-section {
-    border-bottom: 1px solid var(--nuraly-color-collapse-border);
+    border-bottom: 1px solid #e0e0e0;
   }
 
   /* Shadow Variants */
   :host(:not([variant="ghost"])) .collapse-container {
-    box-shadow: var(--nuraly-shadow-collapse);
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
   }
 
   :host(:not([variant="ghost"])) .collapse-container:hover {
-    box-shadow: var(--nuraly-shadow-collapse-hover);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
   }
 
   /* Accessibility */
@@ -213,7 +213,7 @@ export const styles = css `
     .collapse-section {
       transition: none;
     }
-    
+
     .collapse-icon--expanded {
       transform: none;
     }
@@ -222,11 +222,11 @@ export const styles = css `
   /* High Contrast Mode */
   @media (prefers-contrast: high) {
     .collapse-header {
-      border: 2px solid var(--nuraly-color-collapse-border-focus);
+      border: 2px solid #e0e0e0;
     }
-    
+
     .collapse-header:focus-visible {
-      outline: 3px solid var(--nuraly-color-collapse-focus-outline);
+      outline: 3px solid #7c3aed;
     }
   }
 `;

package/dist/src/components/collapse/controllers/accordion.controller.d.ts

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseCollapseController, CollapseControllerHost } from './base.controller.js';
+/**
+ * Extended host interface for accordion functionality
+ */
+export interface CollapseAccordionHost extends CollapseControllerHost {
+    accordion?: boolean;
+    allowMultiple?: boolean;
+}
+/**
+ * Accordion controller for collapse component
+ * Handles accordion behavior (single section open at a time)
+ */
+export declare class CollapseAccordionController extends BaseCollapseController {
+    /**
+     * Handle section toggle with accordion logic
+     */
+    handleSectionToggle(index: number, isOpening: boolean): void;
+    /**
+     * Close all sections except the specified one
+     */
+    private closeOtherSections;
+    /**
+     * Ensure only one section is open (accordion mode)
+     */
+    enforceAccordionMode(): void;
+    /**
+     * Open specific section (accordion mode)
+     */
+    openSection(index: number): void;
+    /**
+     * Close specific section
+     */
+    closeSection(index: number): void;
+    /**
+     * Close all sections
+     */
+    closeAllSections(): void;
+    /**
+     * Open all sections (only if not in accordion mode or allowMultiple is true)
+     */
+    openAllSections(): void;
+    /**
+     * Get the currently active (open) section in accordion mode
+     */
+    getActiveSectionIndex(): number;
+    /**
+     * Check if accordion mode is enabled
+     */
+    isAccordionMode(): boolean;
+    /**
+     * Check if multiple sections can be open
+     */
+    allowsMultiple(): boolean;
+}
+//# sourceMappingURL=accordion.controller.d.ts.map

package/dist/src/components/collapse/controllers/accordion.controller.js

@@ -0,0 +1,132 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseCollapseController } from './base.controller.js';
+/**
+ * Accordion controller for collapse component
+ * Handles accordion behavior (single section open at a time)
+ */
+export class CollapseAccordionController extends BaseCollapseController {
+    /**
+     * Handle section toggle with accordion logic
+     */
+    handleSectionToggle(index, isOpening) {
+        if (!this.host.accordion) {
+            // Not in accordion mode, allow normal toggle
+            return;
+        }
+        if (isOpening && !this.host.allowMultiple) {
+            // Close all other sections when opening one in accordion mode
+            this.closeOtherSections(index);
+        }
+    }
+    /**
+     * Close all sections except the specified one
+     */
+    closeOtherSections(exceptIndex) {
+        this.host.sections.forEach((section, index) => {
+            if (index !== exceptIndex && section.open && section.collapsible !== false) {
+                this.updateSection(index, { open: false });
+            }
+        });
+    }
+    /**
+     * Ensure only one section is open (accordion mode)
+     */
+    enforceAccordionMode() {
+        if (!this.host.accordion || this.host.allowMultiple) {
+            return;
+        }
+        const openSections = this.getOpenSections();
+        // If more than one section is open, close all but the first
+        if (openSections.length > 1) {
+            const sectionsToUpdate = openSections.slice(1).map(index => ({
+                index,
+                updates: { open: false }
+            }));
+            this.updateSections(sectionsToUpdate);
+        }
+    }
+    /**
+     * Open specific section (accordion mode)
+     */
+    openSection(index) {
+        const section = this.getSection(index);
+        if (!section || section.disabled || section.collapsible === false) {
+            return;
+        }
+        if (this.host.accordion && !this.host.allowMultiple) {
+            // Close all other sections first
+            this.closeOtherSections(index);
+        }
+        this.updateSection(index, { open: true });
+    }
+    /**
+     * Close specific section
+     */
+    closeSection(index) {
+        const section = this.getSection(index);
+        if (!section || section.disabled || section.collapsible === false) {
+            return;
+        }
+        this.updateSection(index, { open: false });
+    }
+    /**
+     * Close all sections
+     */
+    closeAllSections() {
+        const sectionsToUpdate = this.host.sections
+            .map((section, index) => ({ section, index }))
+            .filter(({ section }) => section.open && section.collapsible !== false && !section.disabled)
+            .map(({ index }) => ({ index, updates: { open: false } }));
+        if (sectionsToUpdate.length > 0) {
+            this.updateSections(sectionsToUpdate);
+        }
+    }
+    /**
+     * Open all sections (only if not in accordion mode or allowMultiple is true)
+     */
+    openAllSections() {
+        if (this.host.accordion && !this.host.allowMultiple) {
+            // In accordion mode with single selection, open only the first valid section
+            const firstValidIndex = this.host.sections.findIndex(section => section.collapsible !== false && !section.disabled);
+            if (firstValidIndex !== -1) {
+                this.openSection(firstValidIndex);
+            }
+            return;
+        }
+        // Open all valid sections
+        const sectionsToUpdate = this.host.sections
+            .map((section, index) => ({ section, index }))
+            .filter(({ section }) => !section.open && section.collapsible !== false && !section.disabled)
+            .map(({ index }) => ({ index, updates: { open: true } }));
+        if (sectionsToUpdate.length > 0) {
+            this.updateSections(sectionsToUpdate);
+        }
+    }
+    /**
+     * Get the currently active (open) section in accordion mode
+     */
+    getActiveSectionIndex() {
+        if (!this.host.accordion) {
+            return -1;
+        }
+        const openSections = this.getOpenSections();
+        return openSections.length > 0 ? openSections[0] : -1;
+    }
+    /**
+     * Check if accordion mode is enabled
+     */
+    isAccordionMode() {
+        return !!this.host.accordion;
+    }
+    /**
+     * Check if multiple sections can be open
+     */
+    allowsMultiple() {
+        return !!this.host.allowMultiple;
+    }
+}
+//# sourceMappingURL=accordion.controller.js.map

package/dist/src/components/collapse/controllers/animation.controller.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseCollapseController, CollapseControllerHost } from './base.controller.js';
+/**
+ * Animation controller for collapse component
+ * Handles smooth expand/collapse animations
+ */
+export declare class CollapseAnimationController extends BaseCollapseController {
+    private animatingSections;
+    private animationDuration;
+    constructor(host: CollapseControllerHost);
+    /**
+     * Animate section toggle
+     */
+    animateToggle(index: number, isOpening: boolean): Promise<void>;
+    /**
+     * Animate expand
+     */
+    private animateExpand;
+    /**
+     * Animate collapse
+     */
+    private animateCollapse;
+    /**
+     * Get content element for a section
+     */
+    private getContentElement;
+    /**
+     * Check if section is currently animating
+     */
+    isAnimating(index: number): boolean;
+    /**
+     * Set animation duration
+     */
+    setAnimationDuration(duration: number): void;
+}
+//# sourceMappingURL=animation.controller.d.ts.map

package/dist/src/components/collapse/controllers/animation.controller.js

@@ -0,0 +1,125 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+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 { BaseCollapseController } from './base.controller.js';
+/**
+ * Animation controller for collapse component
+ * Handles smooth expand/collapse animations
+ */
+export class CollapseAnimationController extends BaseCollapseController {
+    constructor(host) {
+        super(host);
+        this.animatingSections = new Set();
+        this.animationDuration = 300; // ms
+    }
+    /**
+     * Animate section toggle
+     */
+    animateToggle(index, isOpening) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const section = this.getSection(index);
+            if (!section || this.animatingSections.has(index)) {
+                return;
+            }
+            this.animatingSections.add(index);
+            try {
+                const contentElement = this.getContentElement(index);
+                if (!contentElement)
+                    return;
+                if (isOpening) {
+                    yield this.animateExpand(contentElement);
+                }
+                else {
+                    yield this.animateCollapse(contentElement);
+                }
+            }
+            finally {
+                this.animatingSections.delete(index);
+            }
+        });
+    }
+    /**
+     * Animate expand
+     */
+    animateExpand(element) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const fullHeight = element.scrollHeight;
+            element.style.height = '0px';
+            element.style.overflow = 'hidden';
+            element.style.transition = `height ${this.animationDuration}ms ease-out`;
+            // Force reflow
+            element.getAnimations();
+            element.style.height = `${fullHeight}px`;
+            return new Promise((resolve) => {
+                const handleTransitionEnd = () => {
+                    element.style.height = '';
+                    element.style.overflow = '';
+                    element.style.transition = '';
+                    element.removeEventListener('transitionend', handleTransitionEnd);
+                    resolve();
+                };
+                element.addEventListener('transitionend', handleTransitionEnd);
+                // Fallback timeout
+                setTimeout(handleTransitionEnd, this.animationDuration + 50);
+            });
+        });
+    }
+    /**
+     * Animate collapse
+     */
+    animateCollapse(element) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const currentHeight = element.scrollHeight;
+            element.style.height = `${currentHeight}px`;
+            element.style.overflow = 'hidden';
+            element.style.transition = `height ${this.animationDuration}ms ease-out`;
+            // Force reflow
+            element.getAnimations();
+            element.style.height = '0px';
+            return new Promise((resolve) => {
+                const handleTransitionEnd = () => {
+                    element.style.height = '';
+                    element.style.overflow = '';
+                    element.style.transition = '';
+                    element.removeEventListener('transitionend', handleTransitionEnd);
+                    resolve();
+                };
+                element.addEventListener('transitionend', handleTransitionEnd);
+                // Fallback timeout
+                setTimeout(handleTransitionEnd, this.animationDuration + 50);
+            });
+        });
+    }
+    /**
+     * Get content element for a section
+     */
+    getContentElement(index) {
+        var _a;
+        const hostElement = this.host;
+        return ((_a = hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.collapse-content[data-section-index="${index}"]`)) || null;
+    }
+    /**
+     * Check if section is currently animating
+     */
+    isAnimating(index) {
+        return this.animatingSections.has(index);
+    }
+    /**
+     * Set animation duration
+     */
+    setAnimationDuration(duration) {
+        this.animationDuration = Math.max(0, duration);
+    }
+}
+//# sourceMappingURL=animation.controller.js.map