@nuraly/lumenui 0.1.0 → 0.2.2

package/dist/src/components/code-editor/code-editor.style.js

@@ -6,16 +6,9 @@
 import { css } from 'lit';
 export const styles = css `
   :host {
-    --nuraly-code-editor-width: 100%;
-    --nuraly-code-editor-height: 100%;
-    --nuraly-code-editor-min-height: 0;
-    --nuraly-code-editor-max-height: none;
-    --nuraly-code-editor-border-radius: 4px;
-    --nuraly-code-editor-border: 1px solid var(--nuraly-border-color, #e0e0e0);
-
     display: block;
-    width: var(--nuraly-code-editor-width);
-    height: var(--nuraly-code-editor-height);
+    width: 100%;
+    height: 100%;
   }
 
   :host([hidden]) {
@@ -23,17 +16,148 @@ export const styles = css `
   }
 
   .editor-container {
+    display: flex;
     width: 100%;
     height: 100%;
-    min-height: var(--nuraly-code-editor-min-height);
-    max-height: var(--nuraly-code-editor-max-height);
-    border-radius: var(--nuraly-code-editor-border-radius);
+    min-height: 80px;
+    border-radius: 8px;
+    border: 1px solid var(--nr-border, #e0e0e0);
+    overflow: auto;
+    font-family: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+    font-size: 13px;
+    line-height: 1.6;
+  }
+
+  /* Light theme */
+  .editor-container.light {
+    background: #fafafa;
+    color: #24292e;
+  }
+
+  .editor-container.light .line-numbers-gutter {
+    background: #f0f0f0;
+    color: #999;
+    border-right: 1px solid #e0e0e0;
+  }
+
+  /* Dark theme */
+  .editor-container.dark {
+    background: #1e1e1e;
+    color: #d4d4d4;
+    border-color: #333;
+  }
+
+  .editor-container.dark .line-numbers-gutter {
+    background: #1a1a1a;
+    color: #555;
+    border-right: 1px solid #333;
+  }
+
+  /* Line numbers gutter */
+  .line-numbers-gutter {
+    flex-shrink: 0;
+    width: 48px;
+    padding: 10px 0;
+    text-align: right;
+    user-select: none;
     overflow: hidden;
   }
 
-  main {
-    width: 100%;
-    height: 100%;
+  .line-number {
+    padding: 0 12px 0 0;
+    font-size: inherit;
+    line-height: inherit;
   }
+
+  /* Editor area */
+  .editor {
+    flex: 1;
+    min-width: 0;
+    padding: 10px 16px;
+    outline: none;
+    overflow: auto;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    white-space: pre;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .editor:focus {
+    outline: none;
+  }
+
+  /* Selection colors */
+  .editor-container.light .editor::selection,
+  .editor-container.light .editor *::selection {
+    background: rgba(124, 58, 237, 0.15);
+  }
+
+  .editor-container.dark .editor::selection,
+  .editor-container.dark .editor *::selection {
+    background: rgba(124, 58, 237, 0.3);
+  }
+
+  /* Caret color */
+  .editor-container.light .editor {
+    caret-color: #24292e;
+  }
+
+  .editor-container.dark .editor {
+    caret-color: #d4d4d4;
+  }
+
+  /* Readonly state */
+  :host([readonly]) .editor {
+    opacity: 0.7;
+    cursor: default;
+  }
+
+  /* ======== Syntax highlighting — Light theme ======== */
+  .editor-container.light .hljs-keyword { color: #d73a49; }
+  .editor-container.light .hljs-string { color: #032f62; }
+  .editor-container.light .hljs-number { color: #005cc5; }
+  .editor-container.light .hljs-comment { color: #6a737d; font-style: italic; }
+  .editor-container.light .hljs-function { color: #6f42c1; }
+  .editor-container.light .hljs-title { color: #6f42c1; }
+  .editor-container.light .hljs-params { color: #24292e; }
+  .editor-container.light .hljs-built_in { color: #e36209; }
+  .editor-container.light .hljs-literal { color: #005cc5; }
+  .editor-container.light .hljs-type { color: #005cc5; }
+  .editor-container.light .hljs-attr { color: #005cc5; }
+  .editor-container.light .hljs-tag { color: #22863a; }
+  .editor-container.light .hljs-name { color: #22863a; }
+  .editor-container.light .hljs-selector-class { color: #6f42c1; }
+  .editor-container.light .hljs-selector-id { color: #005cc5; }
+  .editor-container.light .hljs-attribute { color: #005cc5; }
+  .editor-container.light .hljs-variable { color: #e36209; }
+  .editor-container.light .hljs-regexp { color: #032f62; }
+  .editor-container.light .hljs-symbol { color: #005cc5; }
+  .editor-container.light .hljs-meta { color: #6a737d; }
+  .editor-container.light .hljs-punctuation { color: #24292e; }
+
+  /* ======== Syntax highlighting — Dark theme ======== */
+  .editor-container.dark .hljs-keyword { color: #c678dd; }
+  .editor-container.dark .hljs-string { color: #98c379; }
+  .editor-container.dark .hljs-number { color: #d19a66; }
+  .editor-container.dark .hljs-comment { color: #5c6370; font-style: italic; }
+  .editor-container.dark .hljs-function { color: #61afef; }
+  .editor-container.dark .hljs-title { color: #61afef; }
+  .editor-container.dark .hljs-params { color: #abb2bf; }
+  .editor-container.dark .hljs-built_in { color: #e6c07b; }
+  .editor-container.dark .hljs-literal { color: #d19a66; }
+  .editor-container.dark .hljs-type { color: #e6c07b; }
+  .editor-container.dark .hljs-attr { color: #d19a66; }
+  .editor-container.dark .hljs-tag { color: #e06c75; }
+  .editor-container.dark .hljs-name { color: #e06c75; }
+  .editor-container.dark .hljs-selector-class { color: #e6c07b; }
+  .editor-container.dark .hljs-selector-id { color: #61afef; }
+  .editor-container.dark .hljs-attribute { color: #d19a66; }
+  .editor-container.dark .hljs-variable { color: #e06c75; }
+  .editor-container.dark .hljs-regexp { color: #98c379; }
+  .editor-container.dark .hljs-symbol { color: #56b6c2; }
+  .editor-container.dark .hljs-meta { color: #5c6370; }
+  .editor-container.dark .hljs-punctuation { color: #abb2bf; }
 `;
 //# sourceMappingURL=code-editor.style.js.map

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

@@ -1,17 +1,17 @@
-import{css as e,LitElement as o,html as t,nothing as n}from"lit";import{property as i,customElement as a}from"lit/decorators.js";import{NuralyUIBaseMixin as l}from"@nuralyui/common/mixins";import{map as s}from"lit/directives/map.js";import{classMap as r}from"lit/directives/class-map.js";import{ifDefined as c}from"lit/directives/if-defined.js";import{BaseComponentController as d}from"@nuralyui/common/controllers";
+import{css as e,html as t,nothing as i,LitElement as o}from"lit";import{property as s,customElement as n}from"lit/decorators.js";import{map as r}from"lit/directives/map.js";import{classMap as c}from"lit/directives/class-map.js";import{ifDefined as a}from"lit/directives/if-defined.js";
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */
-const p=e`
+const l=e`
   :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 */
@@ -23,17 +23,17 @@ const p=e`
   .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 {
@@ -41,7 +41,7 @@ const p=e`
   }
 
   .collapse-section--disabled {
-    opacity: var(--nuraly-opacity-collapse-disabled);
+    opacity: 0.5;
     pointer-events: none;
   }
 
@@ -58,40 +58,40 @@ const p=e`
     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 {
@@ -102,9 +102,9 @@ const p=e`
   .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 > * {
@@ -116,89 +116,89 @@ const p=e`
     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 */
@@ -209,7 +209,7 @@ const p=e`
     .collapse-section {
       transition: none;
     }
-    
+
     .collapse-icon--expanded {
       transform: none;
     }
@@ -218,14 +218,14 @@ const p=e`
   /* 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;
     }
   }
-`;
+`,d=e=>class extends e{constructor(){super(...arguments),this.handleSystemThemeChange=()=>{this.closest("[data-theme]")||document.documentElement.hasAttribute("data-theme")||this.requestUpdate()}}connectedCallback(){super.connectedCallback(),this.setupThemeObserver(),this.setupDesignSystemObserver(),this.setupSystemThemeListener()}disconnectedCallback(){var e,t,i;super.disconnectedCallback(),null===(e=this.themeObserver)||void 0===e||e.disconnect(),null===(t=this.designSystemObserver)||void 0===t||t.disconnect(),null===(i=this.mediaQuery)||void 0===i||i.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var e,t;const i=(null===(e=this.closest("[data-theme]"))||void 0===e?void 0:e.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return i||((null===(t=window.matchMedia)||void 0===t?void 0:t.call(window,"(prefers-color-scheme: dark)").matches)?"dark":"light")}get currentDesignSystem(){var e;const t=(null===(e=this.closest("[design-system]"))||void 0===e?void 0:e.getAttribute("design-system"))||document.documentElement.getAttribute("design-system");return"carbon"===t?t:"default"}setupThemeObserver(){this.themeObserver=new MutationObserver(()=>{this.requestUpdate()}),this.themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme"]})}setupDesignSystemObserver(){this.designSystemObserver=new MutationObserver(()=>{this.requestUpdate()}),this.designSystemObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["design-system"]})}setupSystemThemeListener(){window.matchMedia&&(this.mediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.mediaQuery.addEventListener("change",this.handleSystemThemeChange))}},h=()=>{var e;return void 0!==globalThis.litElementVersions||"undefined"!=typeof process&&"development"===(null===(e=process.env)||void 0===e?void 0:e.NODE_ENV)||"undefined"!=typeof window&&("localhost"===window.location.hostname||"127.0.0.1"===window.location.hostname)},p=e=>class extends e{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(h())for(const e of this.requiredComponents)if(!this.isComponentAvailable(e))throw new Error(`Required component "${e}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}. Example: import '@nuralyui/${e}';`)}validateDependenciesWithHandler(e){if(!h())return!0;let t=!0;for(const i of this.requiredComponents)if(!this.isComponentAvailable(i)){t=!1;const o=new Error(`Required component "${i}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);e?e(i,o):console.error(o.message)}return t}isComponentAvailable(e){return!!customElements.get(e)}getMissingDependencies(){return this.requiredComponents.filter(e=>!this.isComponentAvailable(e))}areDependenciesAvailable(){return this.requiredComponents.every(e=>this.isComponentAvailable(e))}addRequiredComponent(e){this.requiredComponents.includes(e)||this.requiredComponents.push(e)}removeRequiredComponent(e){const t=this.requiredComponents.indexOf(e);t>-1&&this.requiredComponents.splice(t,1)}},u=e=>class extends e{dispatchCustomEvent(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(e,t){var i;const o=Object.assign(Object.assign({},t),{timestamp:Date.now(),componentName:(null===(i=this.tagName)||void 0===i?void 0:i.toLowerCase())||"unknown"});this.dispatchCustomEvent(e,o)}dispatchInputEvent(e,t){const i=Object.assign({target:t.target||this,value:t.value,originalEvent:t.originalEvent},t);this.dispatchCustomEvent(e,i)}dispatchFocusEvent(e,t){const i=Object.assign({target:t.target||this,value:t.value,focused:t.focused,cursorPosition:t.cursorPosition,selectedText:t.selectedText},t);this.dispatchCustomEvent(e,i)}dispatchValidationEvent(e,t){var i;const o=Object.assign({target:t.target||this,value:t.value,isValid:null!==(i=t.isValid)&&void 0!==i&&i,error:t.error},t);this.dispatchCustomEvent(e,o)}dispatchActionEvent(e,t){const i=Object.assign({target:t.target||this,action:t.action,previousValue:t.previousValue,newValue:t.newValue},t);this.dispatchCustomEvent(e,i)}isReadonlyKeyAllowed(e){if(e.ctrlKey||e.metaKey){return["KeyA","KeyC"].includes(e.code)}return["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(e.key)}isActivationKey(e){return"Enter"===e.key||" "===e.key}},f=new Set,m=new Map;
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
@@ -236,48 +236,60 @@ const p=e`
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */
-class h extends d{getSection(e){return this.host.sections[e]}updateSection(e,o){if(this.host.updateSection)return void this.host.updateSection(e,o);const t=this.getSection(e);if(t){const n=[...this.host.sections];n[e]=Object.assign(Object.assign({},t),o),this.host.sections=n,this.host.requestUpdate()}}updateSections(e){if(this.host.updateSections)return void this.host.updateSections(e);const o=[...this.host.sections];let t=!1;e.forEach(({index:e,updates:n})=>{const i=this.getSection(e);i&&(o[e]=Object.assign(Object.assign({},i),n),t=!0)}),t&&(this.host.sections=o,this.host.requestUpdate())}getOpenSections(){return this.host.sections.map((e,o)=>e.open?o:-1).filter(e=>-1!==e)}}
+const v=e=>{class t extends e{constructor(){super(...arguments),this.t=null}createRenderRoot(){return this.constructor.useShadowDom?super.createRenderRoot():this}connectedCallback(){const e=this.constructor.useShadowDom;if(!e&&null===this.t)for(this.t=[];this.firstChild;)this.t.push(this.removeChild(this.firstChild));if(super.connectedCallback(),!e){const e=this.constructor,t=this.tagName.toLowerCase(),i=e.styles;if(i){const e=g(i);e&&function(e,t,i){var o;if(!m.has(e)){const i=new CSSStyleSheet;i.replaceSync(t),m.set(e,i)}const s=m.get(e),n=`doc:${e}`;if(f.has(n)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,s],f.add(n)),i){let t=i;for(;t;){const i=t.getRootNode();if(!(i instanceof ShadowRoot))break;{const n=`shadow:${((null===(o=i.host)||void 0===o?void 0:o.tagName)||"").toLowerCase()}:${e}`;f.has(n)||(i.adoptedStyleSheets=[...i.adoptedStyleSheets,s],f.add(n)),t=i.host}}}}(t,e,this)}}}get lightChildren(){return this.t?this.t.filter(e=>!(e instanceof Element&&e.hasAttribute("slot"))):[]}lightChildrenNamed(e){return this.t?this.t.filter(t=>t instanceof Element&&t.getAttribute("slot")===e):[]}}return t.useShadowDom=!1,t};function g(e){return Array.isArray(e)?e.map(e=>g(e)).filter(Boolean).join("\n"):e&&"string"==typeof e.cssText?e.cssText:"string"==typeof e?e:""}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */class b{constructor(e){this._host=e,e.addController(this)}get host(){return this._host}hostConnected(){}hostDisconnected(){}hostUpdate(){}hostUpdated(){}requestUpdate(){try{this._host.requestUpdate()}catch(e){this.handleError(e,"requestUpdate")}}dispatchEvent(e){try{return this._host.dispatchEvent(e)}catch(e){return this.handleError(e,"dispatchEvent"),!1}}handleError(e,t){console.error(`[${this.constructor.name}] Error in ${t}:`,e);try{this._host.dispatchEvent(new CustomEvent("nr-controller-error",{detail:{error:e.message,context:t,controller:this.constructor.name},bubbles:!0,composed:!0}))}catch(e){}}safeExecute(e,t,i){try{return e()}catch(e){return this.handleError(e,t),i}}debounce(e,t){let i;const o=(...o)=>{void 0!==i&&clearTimeout(i),i=setTimeout(()=>{i=void 0,e.apply(this,o)},t)};return o.cancel=()=>{void 0!==i&&(clearTimeout(i),i=void 0)},o}}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */class x extends b{getSection(e){return this.host.sections[e]}updateSection(e,t){if(this.host.updateSection)return void this.host.updateSection(e,t);const i=this.getSection(e);if(i){const o=[...this.host.sections];o[e]=Object.assign(Object.assign({},i),t),this.host.sections=o,this.host.requestUpdate()}}updateSections(e){if(this.host.updateSections)return void this.host.updateSections(e);const t=[...this.host.sections];let i=!1;e.forEach(({index:e,updates:o})=>{const s=this.getSection(e);s&&(t[e]=Object.assign(Object.assign({},s),o),i=!0)}),i&&(this.host.sections=t,this.host.requestUpdate())}getOpenSections(){return this.host.sections.map((e,t)=>e.open?t:-1).filter(e=>-1!==e)}}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */var u=function(e,o,t,n){return new(t||(t=Promise))(function(i,a){function l(e){try{r(n.next(e))}catch(e){a(e)}}function s(e){try{r(n.throw(e))}catch(e){a(e)}}function r(e){var o;e.done?i(e.value):(o=e.value,o instanceof t?o:new t(function(e){e(o)})).then(l,s)}r((n=n.apply(e,o||[])).next())})};class v extends h{constructor(e){super(e),this.animatingSections=new Set,this.animationDuration=300}animateToggle(e,o){return u(this,void 0,void 0,function*(){if(this.getSection(e)&&!this.animatingSections.has(e)){this.animatingSections.add(e);try{const t=this.getContentElement(e);if(!t)return;o?yield this.animateExpand(t):yield this.animateCollapse(t)}finally{this.animatingSections.delete(e)}}})}animateExpand(e){return u(this,void 0,void 0,function*(){const o=e.scrollHeight;return e.style.height="0px",e.style.overflow="hidden",e.style.transition=`height ${this.animationDuration}ms ease-out`,e.getAnimations(),e.style.height=`${o}px`,new Promise(o=>{const t=()=>{e.style.height="",e.style.overflow="",e.style.transition="",e.removeEventListener("transitionend",t),o()};e.addEventListener("transitionend",t),setTimeout(t,this.animationDuration+50)})})}animateCollapse(e){return u(this,void 0,void 0,function*(){const o=e.scrollHeight;return e.style.height=`${o}px`,e.style.overflow="hidden",e.style.transition=`height ${this.animationDuration}ms ease-out`,e.getAnimations(),e.style.height="0px",new Promise(o=>{const t=()=>{e.style.height="",e.style.overflow="",e.style.transition="",e.removeEventListener("transitionend",t),o()};e.addEventListener("transitionend",t),setTimeout(t,this.animationDuration+50)})})}getContentElement(e){var o;return(null===(o=this.host.shadowRoot)||void 0===o?void 0:o.querySelector(`.collapse-content[data-section-index="${e}"]`))||null}isAnimating(e){return this.animatingSections.has(e)}setAnimationDuration(e){this.animationDuration=Math.max(0,e)}}
+ */var w=function(e,t,i,o){return new(i||(i=Promise))(function(s,n){function r(e){try{a(o.next(e))}catch(e){n(e)}}function c(e){try{a(o.throw(e))}catch(e){n(e)}}function a(e){var t;e.done?s(e.value):(t=e.value,t instanceof i?t:new i(function(e){e(t)})).then(r,c)}a((o=o.apply(e,t||[])).next())})};class y extends x{constructor(e){super(e),this.animatingSections=new Set,this.animationDuration=300}animateToggle(e,t){return w(this,void 0,void 0,function*(){if(this.getSection(e)&&!this.animatingSections.has(e)){this.animatingSections.add(e);try{const i=this.getContentElement(e);if(!i)return;t?yield this.animateExpand(i):yield this.animateCollapse(i)}finally{this.animatingSections.delete(e)}}})}animateExpand(e){return w(this,void 0,void 0,function*(){const t=e.scrollHeight;return e.style.height="0px",e.style.overflow="hidden",e.style.transition=`height ${this.animationDuration}ms ease-out`,e.getAnimations(),e.style.height=`${t}px`,new Promise(t=>{const i=()=>{e.style.height="",e.style.overflow="",e.style.transition="",e.removeEventListener("transitionend",i),t()};e.addEventListener("transitionend",i),setTimeout(i,this.animationDuration+50)})})}animateCollapse(e){return w(this,void 0,void 0,function*(){const t=e.scrollHeight;return e.style.height=`${t}px`,e.style.overflow="hidden",e.style.transition=`height ${this.animationDuration}ms ease-out`,e.getAnimations(),e.style.height="0px",new Promise(t=>{const i=()=>{e.style.height="",e.style.overflow="",e.style.transition="",e.removeEventListener("transitionend",i),t()};e.addEventListener("transitionend",i),setTimeout(i,this.animationDuration+50)})})}getContentElement(e){var t;return(null===(t=this.host.shadowRoot)||void 0===t?void 0:t.querySelector(`.collapse-content[data-section-index="${e}"]`))||null}isAnimating(e){return this.animatingSections.has(e)}setAnimationDuration(e){this.animationDuration=Math.max(0,e)}}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */class g extends h{handleSectionToggle(e,o){this.host.accordion&&o&&!this.host.allowMultiple&&this.closeOtherSections(e)}closeOtherSections(e){this.host.sections.forEach((o,t)=>{t!==e&&o.open&&!1!==o.collapsible&&this.updateSection(t,{open:!1})})}enforceAccordionMode(){if(!this.host.accordion||this.host.allowMultiple)return;const e=this.getOpenSections();if(e.length>1){const o=e.slice(1).map(e=>({index:e,updates:{open:!1}}));this.updateSections(o)}}openSection(e){const o=this.getSection(e);o&&!o.disabled&&!1!==o.collapsible&&(this.host.accordion&&!this.host.allowMultiple&&this.closeOtherSections(e),this.updateSection(e,{open:!0}))}closeSection(e){const o=this.getSection(e);o&&!o.disabled&&!1!==o.collapsible&&this.updateSection(e,{open:!1})}closeAllSections(){const e=this.host.sections.map((e,o)=>({section:e,index:o})).filter(({section:e})=>e.open&&!1!==e.collapsible&&!e.disabled).map(({index:e})=>({index:e,updates:{open:!1}}));e.length>0&&this.updateSections(e)}openAllSections(){if(this.host.accordion&&!this.host.allowMultiple){const e=this.host.sections.findIndex(e=>!1!==e.collapsible&&!e.disabled);return void(-1!==e&&this.openSection(e))}const e=this.host.sections.map((e,o)=>({section:e,index:o})).filter(({section:e})=>!e.open&&!1!==e.collapsible&&!e.disabled).map(({index:e})=>({index:e,updates:{open:!0}}));e.length>0&&this.updateSections(e)}getActiveSectionIndex(){if(!this.host.accordion)return-1;const e=this.getOpenSections();return e.length>0?e[0]:-1}isAccordionMode(){return!!this.host.accordion}allowsMultiple(){return!!this.host.allowMultiple}}
+ */class S extends x{handleSectionToggle(e,t){this.host.accordion&&t&&!this.host.allowMultiple&&this.closeOtherSections(e)}closeOtherSections(e){this.host.sections.forEach((t,i)=>{i!==e&&t.open&&!1!==t.collapsible&&this.updateSection(i,{open:!1})})}enforceAccordionMode(){if(!this.host.accordion||this.host.allowMultiple)return;const e=this.getOpenSections();if(e.length>1){const t=e.slice(1).map(e=>({index:e,updates:{open:!1}}));this.updateSections(t)}}openSection(e){const t=this.getSection(e);t&&!t.disabled&&!1!==t.collapsible&&(this.host.accordion&&!this.host.allowMultiple&&this.closeOtherSections(e),this.updateSection(e,{open:!0}))}closeSection(e){const t=this.getSection(e);t&&!t.disabled&&!1!==t.collapsible&&this.updateSection(e,{open:!1})}closeAllSections(){const e=this.host.sections.map((e,t)=>({section:e,index:t})).filter(({section:e})=>e.open&&!1!==e.collapsible&&!e.disabled).map(({index:e})=>({index:e,updates:{open:!1}}));e.length>0&&this.updateSections(e)}openAllSections(){if(this.host.accordion&&!this.host.allowMultiple){const e=this.host.sections.findIndex(e=>!1!==e.collapsible&&!e.disabled);return void(-1!==e&&this.openSection(e))}const e=this.host.sections.map((e,t)=>({section:e,index:t})).filter(({section:e})=>!e.open&&!1!==e.collapsible&&!e.disabled).map(({index:e})=>({index:e,updates:{open:!0}}));e.length>0&&this.updateSections(e)}getActiveSectionIndex(){if(!this.host.accordion)return-1;const e=this.getOpenSections();return e.length>0?e[0]:-1}isAccordionMode(){return!!this.host.accordion}allowsMultiple(){return!!this.host.allowMultiple}}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */var b=function(e,o,t,n){for(var i,a=arguments.length,l=a<3?o:null===n?n=Object.getOwnPropertyDescriptor(o,t):n,s=e.length-1;s>=0;s--)(i=e[s])&&(l=(a<3?i(l):a>3?i(o,t,l):i(o,t))||l);return a>3&&l&&Object.defineProperty(o,t,l),l},y=function(e,o,t,n){return new(t||(t=Promise))(function(i,a){function l(e){try{r(n.next(e))}catch(e){a(e)}}function s(e){try{r(n.throw(e))}catch(e){a(e)}}function r(e){var o;e.done?i(e.value):(o=e.value,o instanceof t?o:new t(function(e){e(o)})).then(l,s)}r((n=n.apply(e,o||[])).next())})};let f=class extends(l(o)){constructor(){super(...arguments),this.requiredComponents=["nr-icon"],this.animationController=new v(this),this.accordionController=new g(this),this.sections=[],this.size="medium",this.variant="default",this.animation="slide",this.accordion=!1,this.allowMultiple=!1,this.disabled=!1,this.expandIcon="chevron-right",this.collapseIcon="chevron-down",this.handleToggleRequest=e=>{const{index:o}=e.detail;this.toggleSection(o)}}connectedCallback(){super.connectedCallback(),this.addEventListener("section-toggle-requested",this.handleToggleRequest)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("section-toggle-requested",this.handleToggleRequest)}updated(e){super.updated(e),(e.has("accordion")||e.has("allowMultiple"))&&this.accordionController.enforceAccordionMode()}toggleSection(e){return y(this,void 0,void 0,function*(){const o=this.sections[e];if(!o||o.disabled||!1===o.collapsible)return;const t=!!o.open,n=!t,i=new CustomEvent("section-before-toggle",{detail:{index:e,section:o,isOpen:t,preventDefault:()=>i.preventDefault()},cancelable:!0,bubbles:!0});this.dispatchEvent(i)&&(this.accordionController.handleSectionToggle(e,n),this.updateSection(e,{open:n}),"none"!==this.animation&&(yield this.animationController.animateToggle(e,n)),this.dispatchEvent(new CustomEvent("section-toggle",{detail:{index:e,section:this.sections[e],isOpen:n},bubbles:!0})))})}openSection(e){return y(this,void 0,void 0,function*(){const o=this.sections[e];o&&!o.open&&(yield this.toggleSection(e))})}closeSection(e){return y(this,void 0,void 0,function*(){const o=this.sections[e];o&&o.open&&(yield this.toggleSection(e))})}openAllSections(){this.accordionController.openAllSections()}closeAllSections(){this.accordionController.closeAllSections()}updateSection(e,o){e<0||e>=this.sections.length||(this.sections=this.sections.map((t,n)=>n===e?Object.assign(Object.assign({},t),o):t))}updateSections(e){0!==e.length&&(this.sections=this.sections.map((o,t)=>{const n=e.find(e=>e.index===t);return n?Object.assign(Object.assign({},o),n.updates):o}))}getSectionIcon(e){return e.expandIcon&&e.collapseIcon?e.open?e.collapseIcon:e.expandIcon:e.headerIcon?e.headerIcon:e.open?this.collapseIcon:this.expandIcon}isSectionAnimating(e){return this.animationController.isAnimating(e)}render(){return t`
-      <div class="collapse-container ${r({[`collapse-${this.size}`]:!0,[`collapse-${this.variant}`]:!0,"collapse-accordion":this.accordion,"collapse-disabled":this.disabled})}">
-        ${s(this.sections,(e,o)=>this.renderSection(e,o))}
+ */var $=function(e,t,i,o){for(var s,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o,c=e.length-1;c>=0;c--)(s=e[c])&&(r=(n<3?s(r):n>3?s(t,i,r):s(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r},k=function(e,t,i,o){return new(i||(i=Promise))(function(s,n){function r(e){try{a(o.next(e))}catch(e){n(e)}}function c(e){try{a(o.throw(e))}catch(e){n(e)}}function a(e){var t;e.done?s(e.value):(t=e.value,t instanceof i?t:new i(function(e){e(t)})).then(r,c)}a((o=o.apply(e,t||[])).next())})};let E=class extends((e=>p(d(u(v(e)))))(o)){constructor(){super(...arguments),this.requiredComponents=["nr-icon"],this.animationController=new y(this),this.accordionController=new S(this),this.sections=[],this.size="medium",this.variant="default",this.animation="slide",this.accordion=!1,this.allowMultiple=!1,this.disabled=!1,this.expandIcon="chevron-right",this.collapseIcon="chevron-down",this.handleToggleRequest=e=>{const{index:t}=e.detail;this.toggleSection(t)}}connectedCallback(){super.connectedCallback(),this.addEventListener("section-toggle-requested",this.handleToggleRequest)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("section-toggle-requested",this.handleToggleRequest)}updated(e){super.updated(e),(e.has("accordion")||e.has("allowMultiple"))&&this.accordionController.enforceAccordionMode()}toggleSection(e){return k(this,void 0,void 0,function*(){const t=this.sections[e];if(!t||t.disabled||!1===t.collapsible)return;const i=!!t.open,o=!i,s=new CustomEvent("section-before-toggle",{detail:{index:e,section:t,isOpen:i,preventDefault:()=>s.preventDefault()},cancelable:!0,bubbles:!0});this.dispatchEvent(s)&&(this.accordionController.handleSectionToggle(e,o),this.updateSection(e,{open:o}),"none"!==this.animation&&(yield this.animationController.animateToggle(e,o)),this.dispatchEvent(new CustomEvent("section-toggle",{detail:{index:e,section:this.sections[e],isOpen:o},bubbles:!0})))})}openSection(e){return k(this,void 0,void 0,function*(){const t=this.sections[e];t&&!t.open&&(yield this.toggleSection(e))})}closeSection(e){return k(this,void 0,void 0,function*(){const t=this.sections[e];t&&t.open&&(yield this.toggleSection(e))})}openAllSections(){this.accordionController.openAllSections()}closeAllSections(){this.accordionController.closeAllSections()}updateSection(e,t){e<0||e>=this.sections.length||(this.sections=this.sections.map((i,o)=>o===e?Object.assign(Object.assign({},i),t):i))}updateSections(e){0!==e.length&&(this.sections=this.sections.map((t,i)=>{const o=e.find(e=>e.index===i);return o?Object.assign(Object.assign({},t),o.updates):t}))}getSectionIcon(e){return e.expandIcon&&e.collapseIcon?e.open?e.collapseIcon:e.expandIcon:e.headerIcon?e.headerIcon:e.open?this.collapseIcon:this.expandIcon}isSectionAnimating(e){return this.animationController.isAnimating(e)}render(){return t`
+      <div part="container" class="collapse-container ${c({[`collapse-${this.size}`]:!0,[`collapse-${this.variant}`]:!0,"collapse-accordion":this.accordion,"collapse-disabled":this.disabled})}">
+        ${r(this.sections,(e,t)=>this.renderSection(e,t))}
       </div>
-    `}renderSection(e,o){const i=!!e.open,a=this.disabled||e.disabled,l=!1!==e.collapsible,s=this.isSectionAnimating(o);return t`
-      <div 
-        class="collapse-section ${r({"collapse-section--open":i,"collapse-section--disabled":null!=a&&a,"collapse-section--non-collapsible":!l,"collapse-section--animating":s,[e.className||""]:!!e.className})}"
+    `}renderSection(e,o){const s=!!e.open,n=this.disabled||e.disabled,r=!1!==e.collapsible,l=this.isSectionAnimating(o);return t`
+      <div
+        part="item"
+        class="collapse-section ${c({"collapse-section--open":s,"collapse-section--disabled":null!=n&&n,"collapse-section--non-collapsible":!r,"collapse-section--animating":l,[e.className||""]:!!e.className})}"
         data-section-index="${o}"
       >
         <!-- Section Header -->
         <div
-          class="collapse-header ${r({"collapse-header--expanded":i,"collapse-header--disabled":null!=a&&a,"collapse-header--clickable":l&&!a})}"
+          part="item-header"
+          class="collapse-header ${c({"collapse-header--expanded":s,"collapse-header--disabled":null!=n&&n,"collapse-header--clickable":r&&!n})}"
           data-section-index="${o}"
           role="button"
-          tabindex="${l&&!a?"0":"-1"}"
-          aria-expanded="${i}"
+          tabindex="${r&&!n?"0":"-1"}"
+          aria-expanded="${s}"
           aria-controls="collapse-content-${o}"
-          aria-disabled="${c(a)}"
-          @click="${l&&!a?()=>this.toggleSection(o):n}"
+          aria-disabled="${a(n)}"
+          @click="${r&&!n?()=>this.toggleSection(o):i}"
         >
-          ${l?t`
+          ${r?t`
             <nr-icon
-              class="collapse-icon ${r({"collapse-icon--expanded":i})}"
+              class="collapse-icon ${c({"collapse-icon--expanded":s})}"
               name="${this.getSectionIcon(e)}"
               aria-hidden="true"
             ></nr-icon>
-          `:n}
+          `:i}
           
           <span class="collapse-header-text">
             ${e.headerSlot?t`<slot name="${e.headerSlot}"></slot>`:t`<nr-label .size=${this.size}>${e.header}</nr-label>`}
@@ -287,12 +299,13 @@ class h extends d{getSection(e){return this.host.sections[e]}updateSection(e,o){
             <div class="collapse-header-right" @click="${e=>e.stopPropagation()}">
               ${e.headerRightSlot?t`<slot name="${e.headerRightSlot}"></slot>`:e.headerRight}
             </div>
-          `:n}
+          `:i}
         </div>
 
         <!-- Section Content -->
-        ${i?t`
+        ${s?t`
           <div
+            part="item-content"
             id="collapse-content-${o}"
             class="collapse-content"
             data-section-index="${o}"
@@ -303,6 +316,6 @@ class h extends d{getSection(e){return this.host.sections[e]}updateSection(e,o){
               ${e.contentSlot?t`<slot name="${e.contentSlot}"></slot>`:e.content}
             </div>
           </div>
-        `:n}
+        `:i}
       </div>
-    `}};f.styles=p,b([i({type:Array})],f.prototype,"sections",void 0),b([i({type:String})],f.prototype,"size",void 0),b([i({type:String})],f.prototype,"variant",void 0),b([i({type:String})],f.prototype,"animation",void 0),b([i({type:Boolean})],f.prototype,"accordion",void 0),b([i({type:Boolean,attribute:"allow-multiple"})],f.prototype,"allowMultiple",void 0),b([i({type:Boolean})],f.prototype,"disabled",void 0),b([i({type:String,attribute:"expand-icon"})],f.prototype,"expandIcon",void 0),b([i({type:String,attribute:"collapse-icon"})],f.prototype,"collapseIcon",void 0),f=b([a("nr-collapse")],f);export{f as HyCollapse};
+    `}};E.useShadowDom=!0,E.styles=l,$([s({type:Array})],E.prototype,"sections",void 0),$([s({type:String})],E.prototype,"size",void 0),$([s({type:String})],E.prototype,"variant",void 0),$([s({type:String})],E.prototype,"animation",void 0),$([s({type:Boolean})],E.prototype,"accordion",void 0),$([s({type:Boolean,attribute:"allow-multiple"})],E.prototype,"allowMultiple",void 0),$([s({type:Boolean})],E.prototype,"disabled",void 0),$([s({type:String,attribute:"expand-icon"})],E.prototype,"expandIcon",void 0),$([s({type:String,attribute:"collapse-icon"})],E.prototype,"collapseIcon",void 0),E=$([n("nr-collapse")],E);export{E as HyCollapse};

package/dist/src/components/collapse/collapse.component.d.ts

@@ -5,7 +5,7 @@
  */
 import { LitElement } from 'lit';
 import { CollapseSection, CollapseSize, CollapseVariant, CollapseAnimation } from './collapse.type.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;
+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) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
 /**
  * Versatile collapse/accordion component with multiple variants, animations, and accessibility features.
  *
@@ -22,8 +22,14 @@ declare const HyCollapse_base: (new (...args: any[]) => import("@nuralyui/common
  * @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
  */
 export declare class HyCollapse extends HyCollapse_base {
+    static useShadowDom: boolean;
     static styles: import("lit").CSSResult;
     requiredComponents: string[];
     private animationController;