@nuralyui/layout 0.1.0 → 0.1.2

package/dist/VERSIONS.md

@@ -2,12 +2,12 @@
 
 This package includes the following layout components with their respective versions:
 
-- **layout**: v0.0.1
-- **grid**: v0.0.1
-- **flex**: v0.0.1
-- **card**: v0.0.6
+- **layout**: v0.0.3
+- **grid**: v0.0.3
+- **flex**: v0.0.3
+- **card**: v0.0.8
 
 ---
 
-**Package Version**: 0.1.0
+**Package Version**: 0.1.2
 **Build Date**: 2025-10-14

package/dist/card/card.component.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 import { CardSize } from './card.types.js';
-declare const NrCardElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
+declare const NrCardElement_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;
 /**
  * Card component for displaying content in a structured container
  *

package/dist/card/card.component.js

@@ -8,7 +8,7 @@ import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { styles } from './card.style.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
 /**
  * Card component for displaying content in a structured container
  *

package/dist/card/card.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.component.js","sourceRoot":"","sources":["../../../src/components/card/card.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D;;;;;;;;;;;;GAYG;AAEH,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAAhE;;QAGE;;WAEG;QACyB,WAAM,GAAG,EAAE,CAAC;QAExC;;WAEG;QACyB,SAAI,oCAAoB;IAiBtD,CAAC;IAfU,MAAM;QACb,OAAO,IAAI,CAAA;;sBAEO,QAAQ,CAAC;YACrB,aAAa,EAAE,IAAI,CAAC,IAAI,iCAAmB;YAC3C,aAAa,EAAE,IAAI,CAAC,IAAI,iCAAmB;SAC5C,CAAC;;UAEA,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,6BAA6B,IAAI,CAAC,MAAM,QAAQ,CAAC,CAAC,CAAC,EAAE;;;;;KAK5E,CAAC;IACJ,CAAC;CACF,CAAA;AA3BiB,oBAAM,GAAG,MAAO,CAAA;AAKJ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAa;AAKZ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAyB;AAXzC,aAAa;IADzB,aAAa,CAAC,SAAS,CAAC;GACZ,aAAa,CA4BzB;SA5BY,aAAa","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './card.style.js';\nimport { CardSize } from './card.types.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\n\n/**\n * Card component for displaying content in a structured container\n * \n * @element nr-card\n * @slot content - Content to be displayed in the card body\n * \n * @example\n * ```html\n * <nr-card header=\"Card Title\" size=\"medium\">\n *   <div slot=\"content\">Card content goes here</div>\n * </nr-card>\n * ```\n */\n@customElement('nr-card')\nexport class NrCardElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = styles;\n\n  /**\n   * Header text displayed at the top of the card\n   */\n  @property({ type: String }) header = '';\n\n  /**\n   * Size variant of the card\n   */\n  @property({ type: String }) size = CardSize.Default;\n\n  override render() {\n    return html`\n      <div\n        class=\"card ${classMap({\n          'card--small': this.size === CardSize.Small,\n          'card--large': this.size === CardSize.Large\n        })}\"\n      >\n        ${this.header ? html`<div class=\"card__header\">${this.header}</div>` : ''}\n        <div class=\"card__content\">\n          <slot name=\"content\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"card.component.js","sourceRoot":"","sources":["../../../src/components/card/card.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D;;;;;;;;;;;;GAYG;AAEH,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAAhE;;QAGE;;WAEG;QACyB,WAAM,GAAG,EAAE,CAAC;QAExC;;WAEG;QACyB,SAAI,oCAAoB;IAiBtD,CAAC;IAfU,MAAM;QACb,OAAO,IAAI,CAAA;;sBAEO,QAAQ,CAAC;YACrB,aAAa,EAAE,IAAI,CAAC,IAAI,iCAAmB;YAC3C,aAAa,EAAE,IAAI,CAAC,IAAI,iCAAmB;SAC5C,CAAC;;UAEA,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,6BAA6B,IAAI,CAAC,MAAM,QAAQ,CAAC,CAAC,CAAC,EAAE;;;;;KAK5E,CAAC;IACJ,CAAC;CACF,CAAA;AA3BiB,oBAAM,GAAG,MAAO,CAAA;AAKJ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAa;AAKZ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAyB;AAXzC,aAAa;IADzB,aAAa,CAAC,SAAS,CAAC;GACZ,aAAa,CA4BzB;SA5BY,aAAa","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './card.style.js';\nimport { CardSize } from './card.types.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\n\n/**\n * Card component for displaying content in a structured container\n * \n * @element nr-card\n * @slot content - Content to be displayed in the card body\n * \n * @example\n * ```html\n * <nr-card header=\"Card Title\" size=\"medium\">\n *   <div slot=\"content\">Card content goes here</div>\n * </nr-card>\n * ```\n */\n@customElement('nr-card')\nexport class NrCardElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = styles;\n\n  /**\n   * Header text displayed at the top of the card\n   */\n  @property({ type: String }) header = '';\n\n  /**\n   * Size variant of the card\n   */\n  @property({ type: String }) size = CardSize.Default;\n\n  override render() {\n    return html`\n      <div\n        class=\"card ${classMap({\n          'card--small': this.size === CardSize.Small,\n          'card--large': this.size === CardSize.Large\n        })}\"\n      >\n        ${this.header ? html`<div class=\"card__header\">${this.header}</div>` : ''}\n        <div class=\"card__content\">\n          <slot name=\"content\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/card/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuralyui/card",
-    "version": "0.0.6",
+    "version": "0.0.8",
     "description": "",
     "main": "index.js",
     "type": "module",

package/dist/flex/flex.component.d.ts

@@ -5,7 +5,7 @@
  */
 import { LitElement } from 'lit';
 import { FlexDirection, FlexWrap, FlexJustify, FlexAlign, Gap } from './flex.types.js';
-declare const NrFlexElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
+declare const NrFlexElement_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;
 /**
  * Flex layout component for flexible box layouts
  *

package/dist/flex/flex.component.js

@@ -12,7 +12,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { styles } from './flex.style.js';
-import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
 import { EMPTY_STRING } from './flex.types.js';
 /**
  * Flex layout component for flexible box layouts

package/dist/flex/flex.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"flex.component.js","sourceRoot":"","sources":["../../../src/components/flex/flex.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 } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './flex.style.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\nimport {\n    FlexDirection,\n    FlexWrap,\n    FlexJustify,\n    FlexAlign,\n    FlexGap,\n    Gap,\n    EMPTY_STRING\n} from './flex.types.js';\n\n/**\n * Flex layout component for flexible box layouts\n * \n * @example\n * ```html\n * <!-- Basic flex -->\n * <nr-flex>\n *   <div>Item 1</div>\n *   <div>Item 2</div>\n *   <div>Item 3</div>\n * </nr-flex>\n * \n * <!-- Flex with gap -->\n * <nr-flex gap=\"medium\">\n *   <div>Item 1</div>\n *   <div>Item 2</div>\n * </nr-flex>\n * \n * <!-- Centered flex -->\n * <nr-flex justify=\"center\" align=\"center\">\n *   <div>Centered content</div>\n * </nr-flex>\n * \n * <!-- Column layout with gap -->\n * <nr-flex vertical gap=\"16\">\n *   <div>Item 1</div>\n *   <div>Item 2</div>\n * </nr-flex>\n * \n * <!-- Responsive gap -->\n * <nr-flex .gap=${[16, 24]}>\n *   <div>Item 1</div>\n *   <div>Item 2</div>\n * </nr-flex>\n * ```\n * \n * @slot default - Flex items\n */\n@customElement('nr-flex')\nexport class NrFlexElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = styles;\n\n  /** Flex direction (shorthand: use vertical prop for column) */\n  @property({ type: String })\n  direction: FlexDirection = FlexDirection.Row;\n\n  /** Shorthand for flex-direction: column */\n  @property({ type: Boolean })\n  vertical = false;\n\n  /** Flex wrap behavior */\n  @property({ type: String })\n  wrap: FlexWrap = FlexWrap.NoWrap;\n\n  /** Justify content alignment */\n  @property({ type: String })\n  justify: FlexJustify | '' = EMPTY_STRING;\n\n  /** Align items alignment */\n  @property({ type: String })\n  align: FlexAlign | '' = EMPTY_STRING;\n\n  /** Gap between flex items - can be preset string, number (px), or [horizontal, vertical] */\n  @property({ type: Object })\n  gap: Gap = 0;\n\n  /** Make flex container inline */\n  @property({ type: Boolean })\n  inline = false;\n\n  /** Custom flex CSS value (e.g., \"1\", \"auto\", \"none\") */\n  @property({ type: String })\n  flex: string | '' = EMPTY_STRING;\n\n  /**\n   * Get computed flex direction\n   */\n  private getFlexDirection(): FlexDirection {\n    return this.vertical ? FlexDirection.Column : this.direction;\n  }\n\n  /**\n   * Convert gap value to CSS value\n   */\n  private getGapValue(value: Gap): string {\n    if (typeof value === 'number') {\n      return `${value}px`;\n    }\n    \n    if (typeof value === 'string') {\n      // Check if it's a preset\n      switch (value) {\n        case FlexGap.Small:\n          return 'var(--nuraly-spacing-2, 8px)';\n        case FlexGap.Medium:\n          return 'var(--nuraly-spacing-3, 16px)';\n        case FlexGap.Large:\n          return 'var(--nuraly-spacing-4, 24px)';\n        default:\n          return value; // Use as-is (could be CSS variable or custom value)\n      }\n    }\n    \n    return '0';\n  }\n\n  /**\n   * Get gap styles for flex container\n   */\n  private getGapStyles(): Record<string, string> {\n    const styles: Record<string, string> = {};\n    \n    if (Array.isArray(this.gap)) {\n      const [horizontal, vertical] = this.gap;\n      styles['column-gap'] = this.getGapValue(horizontal);\n      styles['row-gap'] = this.getGapValue(vertical);\n    } else if (this.gap) {\n      styles['gap'] = this.getGapValue(this.gap);\n    }\n    \n    return styles;\n  }\n\n  /**\n   * Get all inline styles for flex container\n   */\n  private getFlexStyles(): string {\n    const styles: Record<string, string> = {\n      ...this.getGapStyles()\n    };\n    \n    if (this.flex) {\n      styles['flex'] = this.flex;\n    }\n    \n    return Object.entries(styles)\n      .map(([key, value]) => `${key}: ${value}`)\n      .join('; ');\n  }\n\n  override render() {\n    const flexDirection = this.getFlexDirection();\n    const flexStyles = this.getFlexStyles();\n\n    return html`\n      <div\n        class=\"nr-flex\"\n        data-direction=\"${flexDirection}\"\n        data-wrap=\"${this.wrap}\"\n        data-justify=\"${this.justify}\"\n        data-align=\"${this.align}\"\n        data-inline=\"${this.inline}\"\n        data-theme=\"${this.currentTheme}\"\n        style=\"${flexStyles}\"\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-flex': NrFlexElement;\n  }\n}\n"]}
+{"version":3,"file":"flex.component.js","sourceRoot":"","sources":["../../../src/components/flex/flex.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 } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './flex.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport {\n    FlexDirection,\n    FlexWrap,\n    FlexJustify,\n    FlexAlign,\n    FlexGap,\n    Gap,\n    EMPTY_STRING\n} from './flex.types.js';\n\n/**\n * Flex layout component for flexible box layouts\n * \n * @example\n * ```html\n * <!-- Basic flex -->\n * <nr-flex>\n *   <div>Item 1</div>\n *   <div>Item 2</div>\n *   <div>Item 3</div>\n * </nr-flex>\n * \n * <!-- Flex with gap -->\n * <nr-flex gap=\"medium\">\n *   <div>Item 1</div>\n *   <div>Item 2</div>\n * </nr-flex>\n * \n * <!-- Centered flex -->\n * <nr-flex justify=\"center\" align=\"center\">\n *   <div>Centered content</div>\n * </nr-flex>\n * \n * <!-- Column layout with gap -->\n * <nr-flex vertical gap=\"16\">\n *   <div>Item 1</div>\n *   <div>Item 2</div>\n * </nr-flex>\n * \n * <!-- Responsive gap -->\n * <nr-flex .gap=${[16, 24]}>\n *   <div>Item 1</div>\n *   <div>Item 2</div>\n * </nr-flex>\n * ```\n * \n * @slot default - Flex items\n */\n@customElement('nr-flex')\nexport class NrFlexElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = styles;\n\n  /** Flex direction (shorthand: use vertical prop for column) */\n  @property({ type: String })\n  direction: FlexDirection = FlexDirection.Row;\n\n  /** Shorthand for flex-direction: column */\n  @property({ type: Boolean })\n  vertical = false;\n\n  /** Flex wrap behavior */\n  @property({ type: String })\n  wrap: FlexWrap = FlexWrap.NoWrap;\n\n  /** Justify content alignment */\n  @property({ type: String })\n  justify: FlexJustify | '' = EMPTY_STRING;\n\n  /** Align items alignment */\n  @property({ type: String })\n  align: FlexAlign | '' = EMPTY_STRING;\n\n  /** Gap between flex items - can be preset string, number (px), or [horizontal, vertical] */\n  @property({ type: Object })\n  gap: Gap = 0;\n\n  /** Make flex container inline */\n  @property({ type: Boolean })\n  inline = false;\n\n  /** Custom flex CSS value (e.g., \"1\", \"auto\", \"none\") */\n  @property({ type: String })\n  flex: string | '' = EMPTY_STRING;\n\n  /**\n   * Get computed flex direction\n   */\n  private getFlexDirection(): FlexDirection {\n    return this.vertical ? FlexDirection.Column : this.direction;\n  }\n\n  /**\n   * Convert gap value to CSS value\n   */\n  private getGapValue(value: Gap): string {\n    if (typeof value === 'number') {\n      return `${value}px`;\n    }\n    \n    if (typeof value === 'string') {\n      // Check if it's a preset\n      switch (value) {\n        case FlexGap.Small:\n          return 'var(--nuraly-spacing-2, 8px)';\n        case FlexGap.Medium:\n          return 'var(--nuraly-spacing-3, 16px)';\n        case FlexGap.Large:\n          return 'var(--nuraly-spacing-4, 24px)';\n        default:\n          return value; // Use as-is (could be CSS variable or custom value)\n      }\n    }\n    \n    return '0';\n  }\n\n  /**\n   * Get gap styles for flex container\n   */\n  private getGapStyles(): Record<string, string> {\n    const styles: Record<string, string> = {};\n    \n    if (Array.isArray(this.gap)) {\n      const [horizontal, vertical] = this.gap;\n      styles['column-gap'] = this.getGapValue(horizontal);\n      styles['row-gap'] = this.getGapValue(vertical);\n    } else if (this.gap) {\n      styles['gap'] = this.getGapValue(this.gap);\n    }\n    \n    return styles;\n  }\n\n  /**\n   * Get all inline styles for flex container\n   */\n  private getFlexStyles(): string {\n    const styles: Record<string, string> = {\n      ...this.getGapStyles()\n    };\n    \n    if (this.flex) {\n      styles['flex'] = this.flex;\n    }\n    \n    return Object.entries(styles)\n      .map(([key, value]) => `${key}: ${value}`)\n      .join('; ');\n  }\n\n  override render() {\n    const flexDirection = this.getFlexDirection();\n    const flexStyles = this.getFlexStyles();\n\n    return html`\n      <div\n        class=\"nr-flex\"\n        data-direction=\"${flexDirection}\"\n        data-wrap=\"${this.wrap}\"\n        data-justify=\"${this.justify}\"\n        data-align=\"${this.align}\"\n        data-inline=\"${this.inline}\"\n        data-theme=\"${this.currentTheme}\"\n        style=\"${flexStyles}\"\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-flex': NrFlexElement;\n  }\n}\n"]}

package/dist/flex/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuralyui/flex",
-    "version": "0.0.1",
+    "version": "0.0.3",
     "description": "Flex layout component for NuralyUI library",
     "main": "index.js",
     "type": "module",

package/dist/grid/col.component.d.ts

@@ -5,7 +5,7 @@
  */
 import { LitElement } from 'lit';
 import { ColSize, FlexType } from './grid.types.js';
-declare const NrColElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
+declare const NrColElement_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;
 /**
  * Column component for grid layout system
  *

package/dist/grid/col.component.js

@@ -12,7 +12,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { styles } from './col.style.js';
-import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
 import { BREAKPOINTS, EMPTY_STRING } from './grid.types.js';
 /**
  * Column component for grid layout system

package/dist/grid/col.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"col.component.js","sourceRoot":"","sources":["../../../src/components/grid/col.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAqC,WAAW,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,IAAa,YAAY,GAAzB,MAAa,YAAa,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAA/D;;QAOE,kCAAkC;QAElC,WAAM,GAAG,CAAC,CAAC;QAMX,gCAAgC;QAEhC,SAAI,GAAG,CAAC,CAAC;QAET,gCAAgC;QAEhC,SAAI,GAAG,CAAC,CAAC;QAET,wBAAwB;QAExB,SAAI,GAAkB,YAAY,CAAC;QA0BnC,yBAAyB;QAEjB,sBAAiB,gCAAqC;IA8JhE,CAAC;IA1JU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAEQ,oBAAoB;;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;IACpC,CAAC;IAED;;OAEG;IACK,eAAe;QACrB,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAExB,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YAC5C,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;IACxD,CAAC;IAED;;OAEG;IACK,gBAAgB;QACtB,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC;QAChC,IAAI,aAA6B,CAAC;QAElC,IAAI,KAAK,IAAI,WAAW,CAAC,GAAG,EAAE;YAC5B,aAAa,iCAAqB,CAAC;SACpC;aAAM,IAAI,KAAK,IAAI,WAAW,CAAC,EAAE,EAAE;YAClC,aAAa,+BAAoB,CAAC;SACnC;aAAM,IAAI,KAAK,IAAI,WAAW,CAAC,EAAE,EAAE;YAClC,aAAa,+BAAoB,CAAC;SACnC;aAAM,IAAI,KAAK,IAAI,WAAW,CAAC,EAAE,EAAE;YAClC,aAAa,+BAAoB,CAAC;SACnC;aAAM,IAAI,KAAK,IAAI,WAAW,CAAC,EAAE,EAAE;YAClC,aAAa,+BAAoB,CAAC;SACnC;aAAM;YACL,aAAa,+BAAoB,CAAC;SACnC;QAED,IAAI,aAAa,KAAK,IAAI,CAAC,iBAAiB,EAAE;YAC5C,IAAI,CAAC,iBAAiB,GAAG,aAAa,CAAC;SACxC;IACH,CAAC;IAED;;OAEG;IACK,mBAAmB;QACzB,MAAM,WAAW,GAAqB;YACpC,IAAI,CAAC,iBAAiB;;;;;;SAMvB,CAAC;QAEF,KAAK,MAAM,EAAE,IAAI,WAAW,EAAE;YAC5B,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC;YACvB,IAAI,KAAK,KAAK,SAAS,EAAE;gBACvB,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;oBAC7B,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;iBACxB;gBACD,OAAO,KAAK,CAAC;aACd;SACF;QAED,OAAO,EAAE,CAAC;IACZ,CAAC;IAED;;OAEG;IACK,gBAAgB;;QACtB,MAAM,UAAU,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAE9C,OAAO;YACL,IAAI,EAAE,MAAA,UAAU,CAAC,IAAI,mCAAI,IAAI,CAAC,IAAI;YAClC,MAAM,EAAE,MAAA,UAAU,CAAC,MAAM,mCAAI,IAAI,CAAC,MAAM;YACxC,KAAK,EAAE,MAAA,UAAU,CAAC,KAAK,mCAAI,IAAI,CAAC,KAAK;YACrC,IAAI,EAAE,MAAA,UAAU,CAAC,IAAI,mCAAI,IAAI,CAAC,IAAI;YAClC,IAAI,EAAE,MAAA,UAAU,CAAC,IAAI,mCAAI,IAAI,CAAC,IAAI;SACnC,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,mBAAmB;QACzB,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QACtC,IAAI,MAAM,EAAE;YACV,MAAM,MAAM,GAAG,MAAM,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;YAClD,OAAO,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SAC1C;QACD,OAAO,CAAC,CAAC;IACX,CAAC;IAED;;OAEG;IACK,WAAW;QACjB,MAAM,MAAM,GAA2B,EAAE,CAAC;QAC1C,MAAM,MAAM,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAE1C,IAAI,MAAM,GAAG,CAAC,EAAE;YACd,MAAM,CAAC,cAAc,CAAC,GAAG,GAAG,MAAM,GAAG,CAAC,IAAI,CAAC;YAC3C,MAAM,CAAC,eAAe,CAAC,GAAG,GAAG,MAAM,GAAG,CAAC,IAAI,CAAC;SAC7C;QAED,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;gBACxB,MAAM,CAAC,MAAM,CAAC,GAAG,UAAU,CAAC;aAC7B;iBAAM,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;gBAC/B,MAAM,CAAC,MAAM,CAAC,GAAG,UAAU,CAAC;aAC7B;iBAAM,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;gBACxC,MAAM,CAAC,MAAM,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,OAAO,CAAC;aACnD;iBAAM;gBACL,MAAM,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;aAC5B;SACF;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;IAEQ,MAAM;;QACb,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QACpC,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAEtC,oDAAoD;QACpD,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,CAAA,MAAA,KAAK,CAAC,IAAI,0CAAE,QAAQ,EAAE,KAAI,EAAE,CAAC,CAAC;QAC7D,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,KAAK,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC;QAC1D,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS,EAAE;YAC7B,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;SACzD;aAAM;YACL,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;SACpC;QACD,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,KAAK,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QACtD,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,KAAK,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QACtD,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAEnD,OAAO,IAAI,CAAA;;;iBAGE,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,GAAG,GAAG,KAAK,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;;;;KAIzF,CAAC;IACJ,CAAC;CACF,CAAA;AAlNiB,mBAAM,GAAG,MAAO,CAAA;AAIhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACb;AAId;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAChB;AAIX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACZ;AAIf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAClB;AAIT;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAClB;AAIT;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACQ;AAInC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACL;AAItB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACL;AAItB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACL;AAItB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACL;AAItB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACL;AAItB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACJ;AAIvB;IADC,KAAK,EAAE;uDACsD;AArDnD,YAAY;IADxB,aAAa,CAAC,QAAQ,CAAC;GACX,YAAY,CAmNxB;SAnNY,YAAY","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { styles } from './col.style.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\nimport { ColSize, FlexType, GridBreakpoint, BREAKPOINTS, EMPTY_STRING } from './grid.types.js';\n\n/**\n * Column component for grid layout system\n * \n * @example\n * ```html\n * <!-- Basic column with span -->\n * <nr-col span=\"12\">Half width</nr-col>\n * <nr-col span=\"8\">8/24 width</nr-col>\n * \n * <!-- Column with offset -->\n * <nr-col span=\"12\" offset=\"6\">Offset by 6</nr-col>\n * \n * <!-- Responsive column -->\n * <nr-col \n *   xs=\"24\" \n *   sm=\"12\" \n *   md=\"8\" \n *   lg=\"6\"\n * >Responsive</nr-col>\n * \n * <!-- Column with order -->\n * <nr-col span=\"6\" order=\"4\">Last</nr-col>\n * <nr-col span=\"6\" order=\"1\">First</nr-col>\n * \n * <!-- Flex column -->\n * <nr-col flex=\"auto\">Auto flex</nr-col>\n * <nr-col flex=\"1\">Flex 1</nr-col>\n * ```\n * \n * @slot default - Column content\n */\n@customElement('nr-col')\nexport class NrColElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = styles;\n\n  /** Number of columns to span (out of 24) */\n  @property({ type: Number })\n  span?: number;\n\n  /** Number of columns to offset */\n  @property({ type: Number })\n  offset = 0;\n\n  /** Order of the column */\n  @property({ type: Number })\n  order?: number;\n\n  /** Number of columns to pull */\n  @property({ type: Number })\n  pull = 0;\n\n  /** Number of columns to push */\n  @property({ type: Number })\n  push = 0;\n\n  /** Flex layout style */\n  @property({ type: String })\n  flex: FlexType | '' = EMPTY_STRING;\n\n  /** Extra small devices (<576px) */\n  @property({ type: Object })\n  xs?: number | ColSize;\n\n  /** Small devices (≥576px) */\n  @property({ type: Object })\n  sm?: number | ColSize;\n\n  /** Medium devices (≥768px) */\n  @property({ type: Object })\n  md?: number | ColSize;\n\n  /** Large devices (≥992px) */\n  @property({ type: Object })\n  lg?: number | ColSize;\n\n  /** Extra large devices (≥1200px) */\n  @property({ type: Object })\n  xl?: number | ColSize;\n\n  /** Extra extra large devices (≥1600px) */\n  @property({ type: Object })\n  xxl?: number | ColSize;\n\n  /** Current breakpoint */\n  @state()\n  private currentBreakpoint: GridBreakpoint = GridBreakpoint.XS;\n\n  private resizeObserver?: ResizeObserver;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setupResponsive();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resizeObserver?.disconnect();\n  }\n\n  /**\n   * Setup responsive breakpoint detection\n   */\n  private setupResponsive() {\n    this.updateBreakpoint();\n    \n    this.resizeObserver = new ResizeObserver(() => {\n      this.updateBreakpoint();\n    });\n    \n    this.resizeObserver.observe(document.documentElement);\n  }\n\n  /**\n   * Update current breakpoint based on window width\n   */\n  private updateBreakpoint() {\n    const width = window.innerWidth;\n    let newBreakpoint: GridBreakpoint;\n    \n    if (width >= BREAKPOINTS.xxl) {\n      newBreakpoint = GridBreakpoint.XXL;\n    } else if (width >= BREAKPOINTS.xl) {\n      newBreakpoint = GridBreakpoint.XL;\n    } else if (width >= BREAKPOINTS.lg) {\n      newBreakpoint = GridBreakpoint.LG;\n    } else if (width >= BREAKPOINTS.md) {\n      newBreakpoint = GridBreakpoint.MD;\n    } else if (width >= BREAKPOINTS.sm) {\n      newBreakpoint = GridBreakpoint.SM;\n    } else {\n      newBreakpoint = GridBreakpoint.XS;\n    }\n    \n    if (newBreakpoint !== this.currentBreakpoint) {\n      this.currentBreakpoint = newBreakpoint;\n    }\n  }\n\n  /**\n   * Get responsive configuration for current breakpoint\n   */\n  private getResponsiveConfig(): ColSize {\n    const breakpoints: GridBreakpoint[] = [\n      this.currentBreakpoint,\n      GridBreakpoint.XL,\n      GridBreakpoint.LG,\n      GridBreakpoint.MD,\n      GridBreakpoint.SM,\n      GridBreakpoint.XS\n    ];\n    \n    for (const bp of breakpoints) {\n      const value = this[bp];\n      if (value !== undefined) {\n        if (typeof value === 'number') {\n          return { span: value };\n        }\n        return value;\n      }\n    }\n    \n    return {};\n  }\n\n  /**\n   * Get computed column properties\n   */\n  private getColProperties() {\n    const responsive = this.getResponsiveConfig();\n    \n    return {\n      span: responsive.span ?? this.span,\n      offset: responsive.offset ?? this.offset,\n      order: responsive.order ?? this.order,\n      pull: responsive.pull ?? this.pull,\n      push: responsive.push ?? this.push\n    };\n  }\n\n  /**\n   * Get gutter from parent row\n   */\n  private getGutterFromParent(): number {\n    const parent = this.closest('nr-row');\n    if (parent) {\n      const gutter = parent.getAttribute('data-gutter');\n      return gutter ? parseInt(gutter, 10) : 0;\n    }\n    return 0;\n  }\n\n  /**\n   * Get inline styles for column\n   */\n  private getColStyle() {\n    const styles: Record<string, string> = {};\n    const gutter = this.getGutterFromParent();\n    \n    if (gutter > 0) {\n      styles['padding-left'] = `${gutter / 2}px`;\n      styles['padding-right'] = `${gutter / 2}px`;\n    }\n    \n    if (this.flex) {\n      if (this.flex === 'auto') {\n        styles['flex'] = '1 1 auto';\n      } else if (this.flex === 'none') {\n        styles['flex'] = '0 0 auto';\n      } else if (typeof this.flex === 'number') {\n        styles['flex'] = `${this.flex} ${this.flex} auto`;\n      } else {\n        styles['flex'] = this.flex;\n      }\n    }\n    \n    return styles;\n  }\n\n  override render() {\n    const colStyle = this.getColStyle();\n    const props = this.getColProperties();\n\n    // Apply data attributes to :host for proper styling\n    this.setAttribute('data-span', props.span?.toString() || '');\n    this.setAttribute('data-offset', props.offset.toString());\n    if (props.order !== undefined) {\n      this.setAttribute('data-order', props.order.toString());\n    } else {\n      this.removeAttribute('data-order');\n    }\n    this.setAttribute('data-pull', props.pull.toString());\n    this.setAttribute('data-push', props.push.toString());\n    this.setAttribute('data-theme', this.currentTheme);\n\n    return html`\n      <div\n        class=\"nr-col\"\n        style=\"${Object.entries(colStyle).map(([key, value]) => `${key}: ${value}`).join('; ')}\"\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-col': NrColElement;\n  }\n}\n"]}
+{"version":3,"file":"col.component.js","sourceRoot":"","sources":["../../../src/components/grid/col.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 } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { styles } from './col.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { ColSize, FlexType, GridBreakpoint, BREAKPOINTS, EMPTY_STRING } from './grid.types.js';\n\n/**\n * Column component for grid layout system\n * \n * @example\n * ```html\n * <!-- Basic column with span -->\n * <nr-col span=\"12\">Half width</nr-col>\n * <nr-col span=\"8\">8/24 width</nr-col>\n * \n * <!-- Column with offset -->\n * <nr-col span=\"12\" offset=\"6\">Offset by 6</nr-col>\n * \n * <!-- Responsive column -->\n * <nr-col \n *   xs=\"24\" \n *   sm=\"12\" \n *   md=\"8\" \n *   lg=\"6\"\n * >Responsive</nr-col>\n * \n * <!-- Column with order -->\n * <nr-col span=\"6\" order=\"4\">Last</nr-col>\n * <nr-col span=\"6\" order=\"1\">First</nr-col>\n * \n * <!-- Flex column -->\n * <nr-col flex=\"auto\">Auto flex</nr-col>\n * <nr-col flex=\"1\">Flex 1</nr-col>\n * ```\n * \n * @slot default - Column content\n */\n@customElement('nr-col')\nexport class NrColElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = styles;\n\n  /** Number of columns to span (out of 24) */\n  @property({ type: Number })\n  span?: number;\n\n  /** Number of columns to offset */\n  @property({ type: Number })\n  offset = 0;\n\n  /** Order of the column */\n  @property({ type: Number })\n  order?: number;\n\n  /** Number of columns to pull */\n  @property({ type: Number })\n  pull = 0;\n\n  /** Number of columns to push */\n  @property({ type: Number })\n  push = 0;\n\n  /** Flex layout style */\n  @property({ type: String })\n  flex: FlexType | '' = EMPTY_STRING;\n\n  /** Extra small devices (<576px) */\n  @property({ type: Object })\n  xs?: number | ColSize;\n\n  /** Small devices (≥576px) */\n  @property({ type: Object })\n  sm?: number | ColSize;\n\n  /** Medium devices (≥768px) */\n  @property({ type: Object })\n  md?: number | ColSize;\n\n  /** Large devices (≥992px) */\n  @property({ type: Object })\n  lg?: number | ColSize;\n\n  /** Extra large devices (≥1200px) */\n  @property({ type: Object })\n  xl?: number | ColSize;\n\n  /** Extra extra large devices (≥1600px) */\n  @property({ type: Object })\n  xxl?: number | ColSize;\n\n  /** Current breakpoint */\n  @state()\n  private currentBreakpoint: GridBreakpoint = GridBreakpoint.XS;\n\n  private resizeObserver?: ResizeObserver;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setupResponsive();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resizeObserver?.disconnect();\n  }\n\n  /**\n   * Setup responsive breakpoint detection\n   */\n  private setupResponsive() {\n    this.updateBreakpoint();\n    \n    this.resizeObserver = new ResizeObserver(() => {\n      this.updateBreakpoint();\n    });\n    \n    this.resizeObserver.observe(document.documentElement);\n  }\n\n  /**\n   * Update current breakpoint based on window width\n   */\n  private updateBreakpoint() {\n    const width = window.innerWidth;\n    let newBreakpoint: GridBreakpoint;\n    \n    if (width >= BREAKPOINTS.xxl) {\n      newBreakpoint = GridBreakpoint.XXL;\n    } else if (width >= BREAKPOINTS.xl) {\n      newBreakpoint = GridBreakpoint.XL;\n    } else if (width >= BREAKPOINTS.lg) {\n      newBreakpoint = GridBreakpoint.LG;\n    } else if (width >= BREAKPOINTS.md) {\n      newBreakpoint = GridBreakpoint.MD;\n    } else if (width >= BREAKPOINTS.sm) {\n      newBreakpoint = GridBreakpoint.SM;\n    } else {\n      newBreakpoint = GridBreakpoint.XS;\n    }\n    \n    if (newBreakpoint !== this.currentBreakpoint) {\n      this.currentBreakpoint = newBreakpoint;\n    }\n  }\n\n  /**\n   * Get responsive configuration for current breakpoint\n   */\n  private getResponsiveConfig(): ColSize {\n    const breakpoints: GridBreakpoint[] = [\n      this.currentBreakpoint,\n      GridBreakpoint.XL,\n      GridBreakpoint.LG,\n      GridBreakpoint.MD,\n      GridBreakpoint.SM,\n      GridBreakpoint.XS\n    ];\n    \n    for (const bp of breakpoints) {\n      const value = this[bp];\n      if (value !== undefined) {\n        if (typeof value === 'number') {\n          return { span: value };\n        }\n        return value;\n      }\n    }\n    \n    return {};\n  }\n\n  /**\n   * Get computed column properties\n   */\n  private getColProperties() {\n    const responsive = this.getResponsiveConfig();\n    \n    return {\n      span: responsive.span ?? this.span,\n      offset: responsive.offset ?? this.offset,\n      order: responsive.order ?? this.order,\n      pull: responsive.pull ?? this.pull,\n      push: responsive.push ?? this.push\n    };\n  }\n\n  /**\n   * Get gutter from parent row\n   */\n  private getGutterFromParent(): number {\n    const parent = this.closest('nr-row');\n    if (parent) {\n      const gutter = parent.getAttribute('data-gutter');\n      return gutter ? parseInt(gutter, 10) : 0;\n    }\n    return 0;\n  }\n\n  /**\n   * Get inline styles for column\n   */\n  private getColStyle() {\n    const styles: Record<string, string> = {};\n    const gutter = this.getGutterFromParent();\n    \n    if (gutter > 0) {\n      styles['padding-left'] = `${gutter / 2}px`;\n      styles['padding-right'] = `${gutter / 2}px`;\n    }\n    \n    if (this.flex) {\n      if (this.flex === 'auto') {\n        styles['flex'] = '1 1 auto';\n      } else if (this.flex === 'none') {\n        styles['flex'] = '0 0 auto';\n      } else if (typeof this.flex === 'number') {\n        styles['flex'] = `${this.flex} ${this.flex} auto`;\n      } else {\n        styles['flex'] = this.flex;\n      }\n    }\n    \n    return styles;\n  }\n\n  override render() {\n    const colStyle = this.getColStyle();\n    const props = this.getColProperties();\n\n    // Apply data attributes to :host for proper styling\n    this.setAttribute('data-span', props.span?.toString() || '');\n    this.setAttribute('data-offset', props.offset.toString());\n    if (props.order !== undefined) {\n      this.setAttribute('data-order', props.order.toString());\n    } else {\n      this.removeAttribute('data-order');\n    }\n    this.setAttribute('data-pull', props.pull.toString());\n    this.setAttribute('data-push', props.push.toString());\n    this.setAttribute('data-theme', this.currentTheme);\n\n    return html`\n      <div\n        class=\"nr-col\"\n        style=\"${Object.entries(colStyle).map(([key, value]) => `${key}: ${value}`).join('; ')}\"\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-col': NrColElement;\n  }\n}\n"]}

package/dist/grid/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuralyui/grid",
-    "version": "0.0.1",
+    "version": "0.0.3",
     "description": "Grid layout system (Row and Col) components for NuralyUI library",
     "main": "index.js",
     "type": "module",

package/dist/grid/row.component.d.ts

@@ -5,7 +5,7 @@
  */
 import { LitElement } from 'lit';
 import { RowAlign, RowJustify, Gutter } from './grid.types.js';
-declare const NrRowElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
+declare const NrRowElement_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;
 /**
  * Row component for grid layout system
  *

package/dist/grid/row.component.js

@@ -12,7 +12,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { styles } from './row.style.js';
-import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
 import { EMPTY_STRING, BREAKPOINTS } from './grid.types.js';
 /**
  * Row component for grid layout system

package/dist/grid/row.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"row.component.js","sourceRoot":"","sources":["../../../src/components/grid/row.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 } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { styles } from './row.style.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\nimport { RowAlign, RowJustify, Gutter, EMPTY_STRING, GridBreakpoint, BREAKPOINTS } from './grid.types.js';\n\n/**\n * Row component for grid layout system\n * \n * @example\n * ```html\n * <!-- Basic row -->\n * <nr-row>\n *   <nr-col span=\"12\">Column 1</nr-col>\n *   <nr-col span=\"12\">Column 2</nr-col>\n * </nr-row>\n * \n * <!-- Row with gutter -->\n * <nr-row gutter=\"16\">\n *   <nr-col span=\"8\">Column 1</nr-col>\n *   <nr-col span=\"8\">Column 2</nr-col>\n *   <nr-col span=\"8\">Column 3</nr-col>\n * </nr-row>\n * \n * <!-- Responsive gutter -->\n * <nr-row .gutter=${{ xs: 8, sm: 16, md: 24, lg: 32 }}>\n *   <nr-col span=\"6\">Column</nr-col>\n * </nr-row>\n * \n * <!-- Alignment and justify -->\n * <nr-row align=\"middle\" justify=\"center\">\n *   <nr-col span=\"6\">Centered</nr-col>\n * </nr-row>\n * ```\n * \n * @slot default - Column elements\n */\n@customElement('nr-row')\nexport class NrRowElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = styles;\n\n  /** Vertical alignment of columns */\n  @property({ type: String })\n  align: RowAlign | '' = EMPTY_STRING;\n\n  /** Horizontal alignment of columns */\n  @property({ type: String })\n  justify: RowJustify | '' = EMPTY_STRING;\n\n  /** Grid spacing - number, [horizontal, vertical], or responsive object */\n  @property({ type: Object })\n  gutter: Gutter = 0;\n\n  /** Allow columns to wrap */\n  @property({ type: Boolean })\n  wrap = true;\n\n  /** Current breakpoint for responsive gutter */\n  @state()\n  private currentBreakpoint: GridBreakpoint = GridBreakpoint.XS;\n\n  private resizeObserver?: ResizeObserver;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setupResponsiveGutter();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resizeObserver?.disconnect();\n  }\n\n  /**\n   * Setup responsive gutter based on viewport width\n   */\n  private setupResponsiveGutter() {\n    if (typeof this.gutter === 'object' && !Array.isArray(this.gutter)) {\n      this.updateBreakpoint();\n      \n      this.resizeObserver = new ResizeObserver(() => {\n        this.updateBreakpoint();\n      });\n      \n      this.resizeObserver.observe(document.documentElement);\n    }\n  }\n\n  /**\n   * Update current breakpoint based on window width\n   */\n  private updateBreakpoint() {\n    const width = window.innerWidth;\n    \n    if (width >= BREAKPOINTS.xxl) {\n      this.currentBreakpoint = GridBreakpoint.XXL;\n    } else if (width >= BREAKPOINTS.xl) {\n      this.currentBreakpoint = GridBreakpoint.XL;\n    } else if (width >= BREAKPOINTS.lg) {\n      this.currentBreakpoint = GridBreakpoint.LG;\n    } else if (width >= BREAKPOINTS.md) {\n      this.currentBreakpoint = GridBreakpoint.MD;\n    } else if (width >= BREAKPOINTS.sm) {\n      this.currentBreakpoint = GridBreakpoint.SM;\n    } else {\n      this.currentBreakpoint = GridBreakpoint.XS;\n    }\n  }\n\n  /**\n   * Get the current gutter values [horizontal, vertical]\n   */\n  private getGutterValues(): [number, number] {\n    if (typeof this.gutter === 'number') {\n      return [this.gutter, this.gutter];\n    }\n    \n    if (Array.isArray(this.gutter)) {\n      return this.gutter;\n    }\n    \n    // Responsive gutter object\n    const breakpoints: GridBreakpoint[] = [\n      this.currentBreakpoint,\n      GridBreakpoint.XL,\n      GridBreakpoint.LG,\n      GridBreakpoint.MD,\n      GridBreakpoint.SM,\n      GridBreakpoint.XS\n    ];\n    \n    for (const bp of breakpoints) {\n      const value = this.gutter[bp];\n      if (value !== undefined) {\n        if (typeof value === 'number') {\n          return [value, value];\n        }\n        return value;\n      }\n    }\n    \n    return [0, 0];\n  }\n\n  /**\n   * Get inline styles for row with gutter\n   */\n  private getRowStyle() {\n    const [horizontal, vertical] = this.getGutterValues();\n    \n    const styles: Record<string, string> = {};\n    \n    if (horizontal > 0) {\n      styles['margin-left'] = `-${horizontal / 2}px`;\n      styles['margin-right'] = `-${horizontal / 2}px`;\n    }\n    \n    if (vertical > 0) {\n      styles['row-gap'] = `${vertical}px`;\n    }\n    \n    return styles;\n  }\n\n  /**\n   * Get gutter context for child columns\n   */\n  private getGutterContext() {\n    const [horizontal] = this.getGutterValues();\n    return horizontal;\n  }\n\n  override render() {\n    const rowStyle = this.getRowStyle();\n    const gutter = this.getGutterContext();\n\n    return html`\n      <div\n        class=\"nr-row\"\n        data-align=\"${this.align}\"\n        data-justify=\"${this.justify}\"\n        data-wrap=\"${this.wrap}\"\n        data-theme=\"${this.currentTheme}\"\n        style=\"${Object.entries(rowStyle).map(([key, value]) => `${key}: ${value}`).join('; ')}\"\n        data-gutter=\"${gutter}\"\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-row': NrRowElement;\n  }\n}\n"]}
+{"version":3,"file":"row.component.js","sourceRoot":"","sources":["../../../src/components/grid/row.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAgC,YAAY,EAAkB,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE1G;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,IAAa,YAAY,GAAzB,MAAa,YAAa,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAA/D;;QAGE,oCAAoC;QAEpC,UAAK,GAAkB,YAAY,CAAC;QAEpC,sCAAsC;QAEtC,YAAO,GAAoB,YAAY,CAAC;QAExC,0EAA0E;QAE1E,WAAM,GAAW,CAAC,CAAC;QAEnB,4BAA4B;QAE5B,SAAI,GAAG,IAAI,CAAC;QAEZ,+CAA+C;QAEvC,sBAAiB,gCAAqC;IAmIhE,CAAC;IA/HU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAEQ,oBAAoB;;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;IACpC,CAAC;IAED;;OAEG;IACK,qBAAqB;QAC3B,IAAI,OAAO,IAAI,CAAC,MAAM,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAClE,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAExB,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;gBAC5C,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1B,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;SACvD;IACH,CAAC;IAED;;OAEG;IACK,gBAAgB;QACtB,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC;QAEhC,IAAI,KAAK,IAAI,WAAW,CAAC,GAAG,EAAE;YAC5B,IAAI,CAAC,iBAAiB,iCAAqB,CAAC;SAC7C;aAAM,IAAI,KAAK,IAAI,WAAW,CAAC,EAAE,EAAE;YAClC,IAAI,CAAC,iBAAiB,+BAAoB,CAAC;SAC5C;aAAM,IAAI,KAAK,IAAI,WAAW,CAAC,EAAE,EAAE;YAClC,IAAI,CAAC,iBAAiB,+BAAoB,CAAC;SAC5C;aAAM,IAAI,KAAK,IAAI,WAAW,CAAC,EAAE,EAAE;YAClC,IAAI,CAAC,iBAAiB,+BAAoB,CAAC;SAC5C;aAAM,IAAI,KAAK,IAAI,WAAW,CAAC,EAAE,EAAE;YAClC,IAAI,CAAC,iBAAiB,+BAAoB,CAAC;SAC5C;aAAM;YACL,IAAI,CAAC,iBAAiB,+BAAoB,CAAC;SAC5C;IACH,CAAC;IAED;;OAEG;IACK,eAAe;QACrB,IAAI,OAAO,IAAI,CAAC,MAAM,KAAK,QAAQ,EAAE;YACnC,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;SACnC;QAED,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAC9B,OAAO,IAAI,CAAC,MAAM,CAAC;SACpB;QAED,2BAA2B;QAC3B,MAAM,WAAW,GAAqB;YACpC,IAAI,CAAC,iBAAiB;;;;;;SAMvB,CAAC;QAEF,KAAK,MAAM,EAAE,IAAI,WAAW,EAAE;YAC5B,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YAC9B,IAAI,KAAK,KAAK,SAAS,EAAE;gBACvB,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;oBAC7B,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;iBACvB;gBACD,OAAO,KAAK,CAAC;aACd;SACF;QAED,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAChB,CAAC;IAED;;OAEG;IACK,WAAW;QACjB,MAAM,CAAC,UAAU,EAAE,QAAQ,CAAC,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAEtD,MAAM,MAAM,GAA2B,EAAE,CAAC;QAE1C,IAAI,UAAU,GAAG,CAAC,EAAE;YAClB,MAAM,CAAC,aAAa,CAAC,GAAG,IAAI,UAAU,GAAG,CAAC,IAAI,CAAC;YAC/C,MAAM,CAAC,cAAc,CAAC,GAAG,IAAI,UAAU,GAAG,CAAC,IAAI,CAAC;SACjD;QAED,IAAI,QAAQ,GAAG,CAAC,EAAE;YAChB,MAAM,CAAC,SAAS,CAAC,GAAG,GAAG,QAAQ,IAAI,CAAC;SACrC;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;IAED;;OAEG;IACK,gBAAgB;QACtB,MAAM,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAC5C,OAAO,UAAU,CAAC;IACpB,CAAC;IAEQ,MAAM;QACb,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QACpC,MAAM,MAAM,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAEvC,OAAO,IAAI,CAAA;;;sBAGO,IAAI,CAAC,KAAK;wBACR,IAAI,CAAC,OAAO;qBACf,IAAI,CAAC,IAAI;sBACR,IAAI,CAAC,YAAY;iBACtB,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,GAAG,GAAG,KAAK,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;uBACvE,MAAM;;;;KAIxB,CAAC;IACJ,CAAC;CACF,CAAA;AAvJiB,mBAAM,GAAG,MAAO,CAAA;AAIhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACS;AAIpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACa;AAIxC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACR;AAInB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAChB;AAIZ;IADC,KAAK,EAAE;uDACsD;AArBnD,YAAY;IADxB,aAAa,CAAC,QAAQ,CAAC;GACX,YAAY,CAwJxB;SAxJY,YAAY","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { styles } from './row.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { RowAlign, RowJustify, Gutter, EMPTY_STRING, GridBreakpoint, BREAKPOINTS } from './grid.types.js';\n\n/**\n * Row component for grid layout system\n * \n * @example\n * ```html\n * <!-- Basic row -->\n * <nr-row>\n *   <nr-col span=\"12\">Column 1</nr-col>\n *   <nr-col span=\"12\">Column 2</nr-col>\n * </nr-row>\n * \n * <!-- Row with gutter -->\n * <nr-row gutter=\"16\">\n *   <nr-col span=\"8\">Column 1</nr-col>\n *   <nr-col span=\"8\">Column 2</nr-col>\n *   <nr-col span=\"8\">Column 3</nr-col>\n * </nr-row>\n * \n * <!-- Responsive gutter -->\n * <nr-row .gutter=${{ xs: 8, sm: 16, md: 24, lg: 32 }}>\n *   <nr-col span=\"6\">Column</nr-col>\n * </nr-row>\n * \n * <!-- Alignment and justify -->\n * <nr-row align=\"middle\" justify=\"center\">\n *   <nr-col span=\"6\">Centered</nr-col>\n * </nr-row>\n * ```\n * \n * @slot default - Column elements\n */\n@customElement('nr-row')\nexport class NrRowElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = styles;\n\n  /** Vertical alignment of columns */\n  @property({ type: String })\n  align: RowAlign | '' = EMPTY_STRING;\n\n  /** Horizontal alignment of columns */\n  @property({ type: String })\n  justify: RowJustify | '' = EMPTY_STRING;\n\n  /** Grid spacing - number, [horizontal, vertical], or responsive object */\n  @property({ type: Object })\n  gutter: Gutter = 0;\n\n  /** Allow columns to wrap */\n  @property({ type: Boolean })\n  wrap = true;\n\n  /** Current breakpoint for responsive gutter */\n  @state()\n  private currentBreakpoint: GridBreakpoint = GridBreakpoint.XS;\n\n  private resizeObserver?: ResizeObserver;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setupResponsiveGutter();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resizeObserver?.disconnect();\n  }\n\n  /**\n   * Setup responsive gutter based on viewport width\n   */\n  private setupResponsiveGutter() {\n    if (typeof this.gutter === 'object' && !Array.isArray(this.gutter)) {\n      this.updateBreakpoint();\n      \n      this.resizeObserver = new ResizeObserver(() => {\n        this.updateBreakpoint();\n      });\n      \n      this.resizeObserver.observe(document.documentElement);\n    }\n  }\n\n  /**\n   * Update current breakpoint based on window width\n   */\n  private updateBreakpoint() {\n    const width = window.innerWidth;\n    \n    if (width >= BREAKPOINTS.xxl) {\n      this.currentBreakpoint = GridBreakpoint.XXL;\n    } else if (width >= BREAKPOINTS.xl) {\n      this.currentBreakpoint = GridBreakpoint.XL;\n    } else if (width >= BREAKPOINTS.lg) {\n      this.currentBreakpoint = GridBreakpoint.LG;\n    } else if (width >= BREAKPOINTS.md) {\n      this.currentBreakpoint = GridBreakpoint.MD;\n    } else if (width >= BREAKPOINTS.sm) {\n      this.currentBreakpoint = GridBreakpoint.SM;\n    } else {\n      this.currentBreakpoint = GridBreakpoint.XS;\n    }\n  }\n\n  /**\n   * Get the current gutter values [horizontal, vertical]\n   */\n  private getGutterValues(): [number, number] {\n    if (typeof this.gutter === 'number') {\n      return [this.gutter, this.gutter];\n    }\n    \n    if (Array.isArray(this.gutter)) {\n      return this.gutter;\n    }\n    \n    // Responsive gutter object\n    const breakpoints: GridBreakpoint[] = [\n      this.currentBreakpoint,\n      GridBreakpoint.XL,\n      GridBreakpoint.LG,\n      GridBreakpoint.MD,\n      GridBreakpoint.SM,\n      GridBreakpoint.XS\n    ];\n    \n    for (const bp of breakpoints) {\n      const value = this.gutter[bp];\n      if (value !== undefined) {\n        if (typeof value === 'number') {\n          return [value, value];\n        }\n        return value;\n      }\n    }\n    \n    return [0, 0];\n  }\n\n  /**\n   * Get inline styles for row with gutter\n   */\n  private getRowStyle() {\n    const [horizontal, vertical] = this.getGutterValues();\n    \n    const styles: Record<string, string> = {};\n    \n    if (horizontal > 0) {\n      styles['margin-left'] = `-${horizontal / 2}px`;\n      styles['margin-right'] = `-${horizontal / 2}px`;\n    }\n    \n    if (vertical > 0) {\n      styles['row-gap'] = `${vertical}px`;\n    }\n    \n    return styles;\n  }\n\n  /**\n   * Get gutter context for child columns\n   */\n  private getGutterContext() {\n    const [horizontal] = this.getGutterValues();\n    return horizontal;\n  }\n\n  override render() {\n    const rowStyle = this.getRowStyle();\n    const gutter = this.getGutterContext();\n\n    return html`\n      <div\n        class=\"nr-row\"\n        data-align=\"${this.align}\"\n        data-justify=\"${this.justify}\"\n        data-wrap=\"${this.wrap}\"\n        data-theme=\"${this.currentTheme}\"\n        style=\"${Object.entries(rowStyle).map(([key, value]) => `${key}: ${value}`).join('; ')}\"\n        data-gutter=\"${gutter}\"\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-row': NrRowElement;\n  }\n}\n"]}

package/dist/layout/content.component.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-declare const NrContentElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
+declare const NrContentElement_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;
 /**
  * # Content Component
  *

package/dist/layout/content.component.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
-import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
 import { contentStyles } from './content.style.js';
 /**
  * # Content Component

package/dist/layout/content.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"content.component.js","sourceRoot":"","sources":["../../../src/components/layout/content.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAGxD,MAAM;QACb,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;CACF,CAAA;AATiB,uBAAM,GAAG,aAAc,CAAA;AAD5B,gBAAgB;IAD5B,aAAa,CAAC,YAAY,CAAC;GACf,gBAAgB,CAU5B;SAVY,gBAAgB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\nimport { contentStyles } from './content.style.js';\n\n/**\n * # Content Component\n * \n * The content layout component with default styling.\n * Must be placed inside a Layout component.\n * \n * @element nr-content\n * \n * @slot - Default slot for main content\n * \n * @csspart content - The content container element\n * \n * @example\n * ```html\n * <nr-layout>\n *   <nr-content>\n *     <h1>Main Content</h1>\n *     <p>Your content goes here...</p>\n *   </nr-content>\n * </nr-layout>\n * ```\n */\n@customElement('nr-content')\nexport class NrContentElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = contentStyles;\n\n  override render() {\n    return html`\n      <main class=\"nr-content\" part=\"content\">\n        <slot></slot>\n      </main>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-content': NrContentElement;\n  }\n}\n"]}
+{"version":3,"file":"content.component.js","sourceRoot":"","sources":["../../../src/components/layout/content.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAGxD,MAAM;QACb,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;CACF,CAAA;AATiB,uBAAM,GAAG,aAAc,CAAA;AAD5B,gBAAgB;IAD5B,aAAa,CAAC,YAAY,CAAC;GACf,gBAAgB,CAU5B;SAVY,gBAAgB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { contentStyles } from './content.style.js';\n\n/**\n * # Content Component\n * \n * The content layout component with default styling.\n * Must be placed inside a Layout component.\n * \n * @element nr-content\n * \n * @slot - Default slot for main content\n * \n * @csspart content - The content container element\n * \n * @example\n * ```html\n * <nr-layout>\n *   <nr-content>\n *     <h1>Main Content</h1>\n *     <p>Your content goes here...</p>\n *   </nr-content>\n * </nr-layout>\n * ```\n */\n@customElement('nr-content')\nexport class NrContentElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = contentStyles;\n\n  override render() {\n    return html`\n      <main class=\"nr-content\" part=\"content\">\n        <slot></slot>\n      </main>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-content': NrContentElement;\n  }\n}\n"]}

package/dist/layout/footer.component.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-declare const NrFooterElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
+declare const NrFooterElement_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;
 /**
  * # Footer Component
  *

package/dist/layout/footer.component.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
 import { footerStyles } from './footer.style.js';
 /**
  * # Footer Component

package/dist/layout/footer.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"footer.component.js","sourceRoot":"","sources":["../../../src/components/layout/footer.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAAlE;;QAGE;;WAEG;QAEH,YAAO,GAAG,WAAW,CAAC;IAaxB,CAAC;IAXU,MAAM;QACb,OAAO,IAAI,CAAA;;;;0BAIW,IAAI,CAAC,OAAO;;;;KAIjC,CAAC;IACJ,CAAC;CACF,CAAA;AAnBiB,sBAAM,GAAG,YAAa,CAAA;AAMtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACL;AAPX,eAAe;IAD3B,aAAa,CAAC,WAAW,CAAC;GACd,eAAe,CAoB3B;SApBY,eAAe","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\nimport { footerStyles } from './footer.style.js';\n\n/**\n * # Footer Component\n * \n * The bottom layout component with default styling.\n * Must be placed inside a Layout component.\n * \n * @element nr-footer\n * \n * @slot - Default slot for footer content\n * \n * @csspart footer - The footer container element\n * \n * @example\n * ```html\n * <nr-layout>\n *   <nr-footer>\n *     Copyright © 2025 My Company\n *   </nr-footer>\n * </nr-layout>\n * ```\n */\n@customElement('nr-footer')\nexport class NrFooterElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = footerStyles;\n\n  /**\n   * Padding of the footer. Default is \"24px 50px\".\n   */\n  @property({ type: String })\n  padding = '24px 50px';\n\n  override render() {\n    return html`\n      <footer \n        class=\"nr-footer\" \n        part=\"footer\"\n        style=\"padding: ${this.padding}\"\n      >\n        <slot></slot>\n      </footer>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-footer': NrFooterElement;\n  }\n}\n"]}
+{"version":3,"file":"footer.component.js","sourceRoot":"","sources":["../../../src/components/layout/footer.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAAlE;;QAGE;;WAEG;QAEH,YAAO,GAAG,WAAW,CAAC;IAaxB,CAAC;IAXU,MAAM;QACb,OAAO,IAAI,CAAA;;;;0BAIW,IAAI,CAAC,OAAO;;;;KAIjC,CAAC;IACJ,CAAC;CACF,CAAA;AAnBiB,sBAAM,GAAG,YAAa,CAAA;AAMtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACL;AAPX,eAAe;IAD3B,aAAa,CAAC,WAAW,CAAC;GACd,eAAe,CAoB3B;SApBY,eAAe","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { footerStyles } from './footer.style.js';\n\n/**\n * # Footer Component\n * \n * The bottom layout component with default styling.\n * Must be placed inside a Layout component.\n * \n * @element nr-footer\n * \n * @slot - Default slot for footer content\n * \n * @csspart footer - The footer container element\n * \n * @example\n * ```html\n * <nr-layout>\n *   <nr-footer>\n *     Copyright © 2025 My Company\n *   </nr-footer>\n * </nr-layout>\n * ```\n */\n@customElement('nr-footer')\nexport class NrFooterElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = footerStyles;\n\n  /**\n   * Padding of the footer. Default is \"24px 50px\".\n   */\n  @property({ type: String })\n  padding = '24px 50px';\n\n  override render() {\n    return html`\n      <footer \n        class=\"nr-footer\" \n        part=\"footer\"\n        style=\"padding: ${this.padding}\"\n      >\n        <slot></slot>\n      </footer>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-footer': NrFooterElement;\n  }\n}\n"]}

package/dist/layout/header.component.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-declare const NrHeaderElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
+declare const NrHeaderElement_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;
 /**
  * # Header Component
  *

package/dist/layout/header.component.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
 import { headerStyles } from './header.style.js';
 /**
  * # Header Component

package/dist/layout/header.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"header.component.js","sourceRoot":"","sources":["../../../src/components/layout/header.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAAlE;;QAGE;;WAEG;QAEH,WAAM,GAAG,MAAM,CAAC;IAalB,CAAC;IAXU,MAAM;QACb,OAAO,IAAI,CAAA;;;;yBAIU,IAAI,CAAC,MAAM;;;;KAI/B,CAAC;IACJ,CAAC;CACF,CAAA;AAnBiB,sBAAM,GAAG,YAAa,CAAA;AAMtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACX;AAPL,eAAe;IAD3B,aAAa,CAAC,WAAW,CAAC;GACd,eAAe,CAoB3B;SApBY,eAAe","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\nimport { headerStyles } from './header.style.js';\n\n/**\n * # Header Component\n * \n * The top layout component with default styling.\n * Must be placed inside a Layout component.\n * \n * @element nr-header\n * \n * @slot - Default slot for header content\n * \n * @csspart header - The header container element\n * \n * @example\n * ```html\n * <nr-layout>\n *   <nr-header>\n *     <div class=\"logo\">My App</div>\n *     <nav>Navigation</nav>\n *   </nr-header>\n * </nr-layout>\n * ```\n */\n@customElement('nr-header')\nexport class NrHeaderElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = headerStyles;\n\n  /**\n   * Height of the header. Default is 64px.\n   */\n  @property({ type: String })\n  height = '64px';\n\n  override render() {\n    return html`\n      <header \n        class=\"nr-header\" \n        part=\"header\"\n        style=\"height: ${this.height}\"\n      >\n        <slot></slot>\n      </header>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-header': NrHeaderElement;\n  }\n}\n"]}
+{"version":3,"file":"header.component.js","sourceRoot":"","sources":["../../../src/components/layout/header.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAAlE;;QAGE;;WAEG;QAEH,WAAM,GAAG,MAAM,CAAC;IAalB,CAAC;IAXU,MAAM;QACb,OAAO,IAAI,CAAA;;;;yBAIU,IAAI,CAAC,MAAM;;;;KAI/B,CAAC;IACJ,CAAC;CACF,CAAA;AAnBiB,sBAAM,GAAG,YAAa,CAAA;AAMtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACX;AAPL,eAAe;IAD3B,aAAa,CAAC,WAAW,CAAC;GACd,eAAe,CAoB3B;SApBY,eAAe","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { headerStyles } from './header.style.js';\n\n/**\n * # Header Component\n * \n * The top layout component with default styling.\n * Must be placed inside a Layout component.\n * \n * @element nr-header\n * \n * @slot - Default slot for header content\n * \n * @csspart header - The header container element\n * \n * @example\n * ```html\n * <nr-layout>\n *   <nr-header>\n *     <div class=\"logo\">My App</div>\n *     <nav>Navigation</nav>\n *   </nr-header>\n * </nr-layout>\n * ```\n */\n@customElement('nr-header')\nexport class NrHeaderElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = headerStyles;\n\n  /**\n   * Height of the header. Default is 64px.\n   */\n  @property({ type: String })\n  height = '64px';\n\n  override render() {\n    return html`\n      <header \n        class=\"nr-header\" \n        part=\"header\"\n        style=\"height: ${this.height}\"\n      >\n        <slot></slot>\n      </header>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-header': NrHeaderElement;\n  }\n}\n"]}

package/dist/layout/layout.component.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-declare const NrLayoutElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
+declare const NrLayoutElement_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;
 /**
  * # Layout Component
  *

package/dist/layout/layout.component.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html } from 'lit';
 import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
-import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
 import { layoutStyles } from './layout.style.js';
 /**
  * # Layout Component

package/dist/layout/layout.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.component.js","sourceRoot":"","sources":["../../../src/components/layout/layout.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AACnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAAlE;;QAGE;;;;WAIG;QAEH,aAAQ,GAAG,KAAK,CAAC;IA4CnB,CAAC;IAxCU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAEQ,OAAO,CAAC,iBAAuC;QACtD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED;;OAEG;IACK,WAAW;;QACjB,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,MAAM,CAAC,CAAC;QACpD,IAAI,IAAI,EAAE;YACR,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACjD,MAAM,eAAe,GAAG,gBAAgB,CAAC,IAAI,CAC3C,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,UAAU,CAChD,CAAC;YACF,IAAI,IAAI,CAAC,QAAQ,KAAK,eAAe,EAAE;gBACrC,IAAI,CAAC,QAAQ,GAAG,eAAe,CAAC;aACjC;SACF;IACH,CAAC;IAED;;OAEG;IACK,gBAAgB;QACtB,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;4BAEa,IAAI,CAAC,gBAAgB;;KAE5C,CAAC;IACJ,CAAC;CACF,CAAA;AApDiB,sBAAM,GAAG,YAAa,CAAA;AAQtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;iDAClD;AAIjB;IAFC,qBAAqB,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;wDAK/C;AAhBU,eAAe;IAD3B,aAAa,CAAC,WAAW,CAAC;GACd,eAAe,CAqD3B;SArDY,eAAe","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\nimport { layoutStyles } from './layout.style.js';\n\n/**\n * # Layout Component\n * \n * The layout wrapper component that provides the base structure for a page layout.\n * Can contain Header, Sider, Content, Footer, or nested Layout components.\n * \n * @element nr-layout\n * \n * @slot - Default slot for layout children (Header, Sider, Content, Footer, or nested Layout)\n * \n * @csspart layout - The layout container element\n * \n * @example\n * ```html\n * <nr-layout>\n *   <nr-header>Header</nr-header>\n *   <nr-content>Content</nr-content>\n *   <nr-footer>Footer</nr-footer>\n * </nr-layout>\n * ```\n */\n@customElement('nr-layout')\nexport class NrLayoutElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = layoutStyles;\n\n  /**\n   * Whether the layout contains a Sider component.\n   * When true, the layout uses horizontal flex direction.\n   * Automatically detected from slotted content.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'has-sider' })\n  hasSider = false;\n\n  @queryAssignedElements({ selector: 'nr-sider' })\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.detectSider();\n  }\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n    this.detectSider();\n  }\n\n  /**\n   * Detects if the layout has a Sider component as a direct child\n   */\n  private detectSider(): void {\n    const slot = this.shadowRoot?.querySelector('slot');\n    if (slot) {\n      const assignedElements = slot.assignedElements();\n      const hasSiderElement = assignedElements.some(\n        (el) => el.tagName.toLowerCase() === 'nr-sider'\n      );\n      if (this.hasSider !== hasSiderElement) {\n        this.hasSider = hasSiderElement;\n      }\n    }\n  }\n\n  /**\n   * Handles slot changes to re-detect sider elements\n   */\n  private handleSlotChange(): void {\n    this.detectSider();\n  }\n\n  override render() {\n    return html`\n      <div class=\"nr-layout\" part=\"layout\">\n        <slot @slotchange=${this.handleSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-layout': NrLayoutElement;\n  }\n}\n"]}
+{"version":3,"file":"layout.component.js","sourceRoot":"","sources":["../../../src/components/layout/layout.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AACnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAAlE;;QAGE;;;;WAIG;QAEH,aAAQ,GAAG,KAAK,CAAC;IA4CnB,CAAC;IAxCU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAEQ,OAAO,CAAC,iBAAuC;QACtD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED;;OAEG;IACK,WAAW;;QACjB,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,MAAM,CAAC,CAAC;QACpD,IAAI,IAAI,EAAE;YACR,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACjD,MAAM,eAAe,GAAG,gBAAgB,CAAC,IAAI,CAC3C,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,UAAU,CAChD,CAAC;YACF,IAAI,IAAI,CAAC,QAAQ,KAAK,eAAe,EAAE;gBACrC,IAAI,CAAC,QAAQ,GAAG,eAAe,CAAC;aACjC;SACF;IACH,CAAC;IAED;;OAEG;IACK,gBAAgB;QACtB,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;4BAEa,IAAI,CAAC,gBAAgB;;KAE5C,CAAC;IACJ,CAAC;CACF,CAAA;AApDiB,sBAAM,GAAG,YAAa,CAAA;AAQtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;iDAClD;AAIjB;IAFC,qBAAqB,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;wDAK/C;AAhBU,eAAe;IAD3B,aAAa,CAAC,WAAW,CAAC;GACd,eAAe,CAqD3B;SArDY,eAAe","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { layoutStyles } from './layout.style.js';\n\n/**\n * # Layout Component\n * \n * The layout wrapper component that provides the base structure for a page layout.\n * Can contain Header, Sider, Content, Footer, or nested Layout components.\n * \n * @element nr-layout\n * \n * @slot - Default slot for layout children (Header, Sider, Content, Footer, or nested Layout)\n * \n * @csspart layout - The layout container element\n * \n * @example\n * ```html\n * <nr-layout>\n *   <nr-header>Header</nr-header>\n *   <nr-content>Content</nr-content>\n *   <nr-footer>Footer</nr-footer>\n * </nr-layout>\n * ```\n */\n@customElement('nr-layout')\nexport class NrLayoutElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = layoutStyles;\n\n  /**\n   * Whether the layout contains a Sider component.\n   * When true, the layout uses horizontal flex direction.\n   * Automatically detected from slotted content.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'has-sider' })\n  hasSider = false;\n\n  @queryAssignedElements({ selector: 'nr-sider' })\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.detectSider();\n  }\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n    this.detectSider();\n  }\n\n  /**\n   * Detects if the layout has a Sider component as a direct child\n   */\n  private detectSider(): void {\n    const slot = this.shadowRoot?.querySelector('slot');\n    if (slot) {\n      const assignedElements = slot.assignedElements();\n      const hasSiderElement = assignedElements.some(\n        (el) => el.tagName.toLowerCase() === 'nr-sider'\n      );\n      if (this.hasSider !== hasSiderElement) {\n        this.hasSider = hasSiderElement;\n      }\n    }\n  }\n\n  /**\n   * Handles slot changes to re-detect sider elements\n   */\n  private handleSlotChange(): void {\n    this.detectSider();\n  }\n\n  override render() {\n    return html`\n      <div class=\"nr-layout\" part=\"layout\">\n        <slot @slotchange=${this.handleSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-layout': NrLayoutElement;\n  }\n}\n"]}

package/dist/layout/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuralyui/layout",
-    "version": "0.0.1",
+    "version": "0.0.3",
     "description": "Layout components for NuralyUI - includes Layout, Header, Footer, Sider, and Content",
     "type": "module",
     "main": "index.js",
@@ -10,11 +10,16 @@
         ".": {
             "import": "./index.js",
             "types": "./index.d.ts"
+        },
+        "./bundle": {
+            "import": "./bundle.js"
         }
     },
     "files": [
         "*.js",
         "*.d.ts",
+        "*.js.map",
+        "bundle.js",
         "*.ts",
         "!*.stories.ts",
         "!*.test.ts"

package/dist/layout/sider.component.d.ts

@@ -1,6 +1,6 @@
 import { LitElement, PropertyValues } from 'lit';
 import { LayoutBreakpoint, SiderTheme } from './layout.types.js';
-declare const NrSiderElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
+declare const NrSiderElement_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;
 /**
  * # Sider Component
  *

package/dist/layout/sider.component.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { LitElement, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
 import { siderStyles } from './sider.style.js';
 import { BREAKPOINT_VALUES, } from './layout.types.js';
 /**

package/dist/layout/sider.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"sider.component.js","sourceRoot":"","sources":["../../../src/components/layout/sider.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\nimport { siderStyles } from './sider.style.js';\nimport {\n    LayoutBreakpoint,\n    BREAKPOINT_VALUES,\n    SiderTheme,\n} from './layout.types.js';\n\n/**\n * # Sider Component\n * \n * The sidebar component with collapsible functionality, theme support, and responsive behavior.\n * Must be placed inside a Layout component.\n * \n * @element nr-sider\n * \n * @slot - Default slot for sider content (usually navigation menu)\n * @slot trigger - Custom trigger slot (overrides default trigger)\n * \n * @fires collapse - Fired when the sider is collapsed or expanded\n * @fires breakpoint - Fired when the breakpoint is triggered\n * \n * @csspart sider - The sider container element\n * @csspart trigger - The collapse trigger element\n * \n * @example\n * ```html\n * <nr-layout has-sider>\n *   <nr-sider collapsible breakpoint=\"lg\">\n *     <nav>Navigation Menu</nav>\n *   </nr-sider>\n *   <nr-content>Content</nr-content>\n * </nr-layout>\n * ```\n */\n@customElement('nr-sider')\nexport class NrSiderElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = siderStyles;\n\n  /**\n   * Breakpoint for responsive collapsing\n   */\n  @property({ type: String })\n  breakpoint?: LayoutBreakpoint;\n\n  /**\n   * Current collapsed state (controlled)\n   */\n  @property({ type: Boolean, reflect: true })\n  collapsed = false;\n\n  /**\n   * Width when collapsed. Set to 0 for a special trigger.\n   */\n  @property({ type: Number, attribute: 'collapsed-width' })\n  collapsedWidth = 80;\n\n  /**\n   * Whether the sider can be collapsed\n   */\n  @property({ type: Boolean })\n  collapsible = false;\n\n  /**\n   * Initial collapsed state (uncontrolled)\n   */\n  @property({ type: Boolean, attribute: 'default-collapsed' })\n  defaultCollapsed = false;\n\n  /**\n   * Reverse the arrow direction (for right-side sider)\n   */\n  @property({ type: Boolean, attribute: 'reverse-arrow' })\n  reverseArrow = false;\n\n  /**\n   * Sider theme (light or dark)\n   */\n  @property({ type: String, reflect: true })\n  theme: SiderTheme = SiderTheme.Dark;\n\n  /**\n   * Custom trigger element. Set to null to hide trigger.\n   */\n  @property({ type: String })\n  trigger: 'default' | null = 'default';\n\n  /**\n   * Sider width when expanded\n   */\n  @property({ type: String })\n  width: number | string = 200;\n\n  /**\n   * Custom styles for zero-width trigger\n   */\n  @property({ type: String, attribute: 'zero-width-trigger-style' })\n  zeroWidthTriggerStyle = '';\n\n  /**\n   * Internal state for tracking if breakpoint is active\n   */\n  @state()\n  private belowBreakpoint = false;\n\n  /**\n   * ResizeObserver for responsive behavior\n   */\n  private resizeObserver?: ResizeObserver;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    // Set initial collapsed state\n    if (this.defaultCollapsed && !this.hasAttribute('collapsed')) {\n      this.collapsed = true;\n    }\n\n    // Setup resize observer for breakpoint\n    if (this.breakpoint) {\n      this.setupResizeObserver();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.resizeObserver?.disconnect();\n  }\n\n  override updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('breakpoint')) {\n      this.resizeObserver?.disconnect();\n      if (this.breakpoint) {\n        this.setupResizeObserver();\n      }\n    }\n  }\n\n  /**\n   * Setup ResizeObserver for responsive breakpoint behavior\n   */\n  private setupResizeObserver(): void {\n    if (!this.breakpoint) return;\n\n    const breakpointValue = BREAKPOINT_VALUES[this.breakpoint];\n    \n    this.resizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        const width = entry.contentRect.width;\n        const shouldBeCollapsed = width < breakpointValue;\n\n        if (shouldBeCollapsed !== this.belowBreakpoint) {\n          this.belowBreakpoint = shouldBeCollapsed;\n          \n          // Auto-collapse when below breakpoint\n          if (this.collapsible && shouldBeCollapsed !== this.collapsed) {\n            this.collapsed = shouldBeCollapsed;\n            this.dispatchCollapseEvent('responsive');\n          }\n\n          // Dispatch breakpoint event\n          this.dispatchBreakpointEvent(shouldBeCollapsed);\n        }\n      }\n    });\n\n    // Observe the parent layout or document body\n    const target = this.closest('nr-layout') || document.body;\n    this.resizeObserver.observe(target);\n  }\n\n  /**\n   * Toggle collapsed state\n   */\n  private toggleCollapse(): void {\n    this.collapsed = !this.collapsed;\n    this.dispatchCollapseEvent('clickTrigger');\n  }\n\n  /**\n   * Dispatch collapse event\n   */\n  private dispatchCollapseEvent(type: 'clickTrigger' | 'responsive'): void {\n    this.dispatchEvent(\n      new CustomEvent<{ collapsed: boolean; type: string }>('collapse', {\n        detail: { collapsed: this.collapsed, type },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /**\n   * Dispatch breakpoint event\n   */\n  private dispatchBreakpointEvent(broken: boolean): void {\n    this.dispatchEvent(\n      new CustomEvent<{ broken: boolean }>('breakpoint', {\n        detail: { broken },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /**\n   * Get the current width based on collapsed state\n   */\n  private getCurrentWidth(): string {\n    if (this.collapsed) {\n      return `${this.collapsedWidth}px`;\n    }\n    return typeof this.width === 'number' ? `${this.width}px` : this.width.toString();\n  }\n\n  /**\n   * Render the collapse trigger\n   */\n  private renderTrigger() {\n    if (this.trigger === null || !this.collapsible) {\n      return null;\n    }\n\n    // Check for custom trigger slot\n    const hasCustomTrigger = this.querySelector('[slot=\"trigger\"]');\n    if (hasCustomTrigger) {\n      return html`<slot name=\"trigger\"></slot>`;\n    }\n\n    // Zero-width trigger (special trigger when collapsedWidth is 0)\n    if (this.collapsedWidth === 0 && this.collapsed) {\n      return html`\n        <div\n          class=\"nr-sider-zero-width-trigger\"\n          part=\"trigger\"\n          style=${this.zeroWidthTriggerStyle}\n          @click=${this.toggleCollapse}\n        >\n          <span class=\"trigger-icon\">${this.reverseArrow ? '◀' : '▶'}</span>\n        </div>\n      `;\n    }\n\n    // Default trigger\n    return html`\n      <div\n        class=\"nr-sider-trigger\"\n        part=\"trigger\"\n        @click=${this.toggleCollapse}\n      >\n        <span class=\"trigger-icon\">\n          ${this.collapsed \n            ? (this.reverseArrow ? '◀' : '▶') \n            : (this.reverseArrow ? '▶' : '◀')\n          }\n        </span>\n      </div>\n    `;\n  }\n\n  override render() {\n    const classes = {\n      'nr-sider': true,\n      'nr-sider-collapsed': this.collapsed,\n      'nr-sider-has-trigger': this.collapsible && this.trigger !== null,\n      'nr-sider-below-breakpoint': this.belowBreakpoint,\n      'nr-sider-zero-width': this.collapsed && this.collapsedWidth === 0,\n    };\n\n    return html`\n      <aside\n        class=${classMap(classes)}\n        part=\"sider\"\n        style=\"width: ${this.getCurrentWidth()}; flex: 0 0 ${this.getCurrentWidth()};\"\n      >\n        <div class=\"nr-sider-children\">\n          <slot></slot>\n        </div>\n        ${this.renderTrigger()}\n      </aside>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-sider': NrSiderElement;\n  }\n}\n"]}
+{"version":3,"file":"sider.component.js","sourceRoot":"","sources":["../../../src/components/layout/sider.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { siderStyles } from './sider.style.js';\nimport {\n    LayoutBreakpoint,\n    BREAKPOINT_VALUES,\n    SiderTheme,\n} from './layout.types.js';\n\n/**\n * # Sider Component\n * \n * The sidebar component with collapsible functionality, theme support, and responsive behavior.\n * Must be placed inside a Layout component.\n * \n * @element nr-sider\n * \n * @slot - Default slot for sider content (usually navigation menu)\n * @slot trigger - Custom trigger slot (overrides default trigger)\n * \n * @fires collapse - Fired when the sider is collapsed or expanded\n * @fires breakpoint - Fired when the breakpoint is triggered\n * \n * @csspart sider - The sider container element\n * @csspart trigger - The collapse trigger element\n * \n * @example\n * ```html\n * <nr-layout has-sider>\n *   <nr-sider collapsible breakpoint=\"lg\">\n *     <nav>Navigation Menu</nav>\n *   </nr-sider>\n *   <nr-content>Content</nr-content>\n * </nr-layout>\n * ```\n */\n@customElement('nr-sider')\nexport class NrSiderElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = siderStyles;\n\n  /**\n   * Breakpoint for responsive collapsing\n   */\n  @property({ type: String })\n  breakpoint?: LayoutBreakpoint;\n\n  /**\n   * Current collapsed state (controlled)\n   */\n  @property({ type: Boolean, reflect: true })\n  collapsed = false;\n\n  /**\n   * Width when collapsed. Set to 0 for a special trigger.\n   */\n  @property({ type: Number, attribute: 'collapsed-width' })\n  collapsedWidth = 80;\n\n  /**\n   * Whether the sider can be collapsed\n   */\n  @property({ type: Boolean })\n  collapsible = false;\n\n  /**\n   * Initial collapsed state (uncontrolled)\n   */\n  @property({ type: Boolean, attribute: 'default-collapsed' })\n  defaultCollapsed = false;\n\n  /**\n   * Reverse the arrow direction (for right-side sider)\n   */\n  @property({ type: Boolean, attribute: 'reverse-arrow' })\n  reverseArrow = false;\n\n  /**\n   * Sider theme (light or dark)\n   */\n  @property({ type: String, reflect: true })\n  theme: SiderTheme = SiderTheme.Dark;\n\n  /**\n   * Custom trigger element. Set to null to hide trigger.\n   */\n  @property({ type: String })\n  trigger: 'default' | null = 'default';\n\n  /**\n   * Sider width when expanded\n   */\n  @property({ type: String })\n  width: number | string = 200;\n\n  /**\n   * Custom styles for zero-width trigger\n   */\n  @property({ type: String, attribute: 'zero-width-trigger-style' })\n  zeroWidthTriggerStyle = '';\n\n  /**\n   * Internal state for tracking if breakpoint is active\n   */\n  @state()\n  private belowBreakpoint = false;\n\n  /**\n   * ResizeObserver for responsive behavior\n   */\n  private resizeObserver?: ResizeObserver;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    // Set initial collapsed state\n    if (this.defaultCollapsed && !this.hasAttribute('collapsed')) {\n      this.collapsed = true;\n    }\n\n    // Setup resize observer for breakpoint\n    if (this.breakpoint) {\n      this.setupResizeObserver();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.resizeObserver?.disconnect();\n  }\n\n  override updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('breakpoint')) {\n      this.resizeObserver?.disconnect();\n      if (this.breakpoint) {\n        this.setupResizeObserver();\n      }\n    }\n  }\n\n  /**\n   * Setup ResizeObserver for responsive breakpoint behavior\n   */\n  private setupResizeObserver(): void {\n    if (!this.breakpoint) return;\n\n    const breakpointValue = BREAKPOINT_VALUES[this.breakpoint];\n    \n    this.resizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        const width = entry.contentRect.width;\n        const shouldBeCollapsed = width < breakpointValue;\n\n        if (shouldBeCollapsed !== this.belowBreakpoint) {\n          this.belowBreakpoint = shouldBeCollapsed;\n          \n          // Auto-collapse when below breakpoint\n          if (this.collapsible && shouldBeCollapsed !== this.collapsed) {\n            this.collapsed = shouldBeCollapsed;\n            this.dispatchCollapseEvent('responsive');\n          }\n\n          // Dispatch breakpoint event\n          this.dispatchBreakpointEvent(shouldBeCollapsed);\n        }\n      }\n    });\n\n    // Observe the parent layout or document body\n    const target = this.closest('nr-layout') || document.body;\n    this.resizeObserver.observe(target);\n  }\n\n  /**\n   * Toggle collapsed state\n   */\n  private toggleCollapse(): void {\n    this.collapsed = !this.collapsed;\n    this.dispatchCollapseEvent('clickTrigger');\n  }\n\n  /**\n   * Dispatch collapse event\n   */\n  private dispatchCollapseEvent(type: 'clickTrigger' | 'responsive'): void {\n    this.dispatchEvent(\n      new CustomEvent<{ collapsed: boolean; type: string }>('collapse', {\n        detail: { collapsed: this.collapsed, type },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /**\n   * Dispatch breakpoint event\n   */\n  private dispatchBreakpointEvent(broken: boolean): void {\n    this.dispatchEvent(\n      new CustomEvent<{ broken: boolean }>('breakpoint', {\n        detail: { broken },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /**\n   * Get the current width based on collapsed state\n   */\n  private getCurrentWidth(): string {\n    if (this.collapsed) {\n      return `${this.collapsedWidth}px`;\n    }\n    return typeof this.width === 'number' ? `${this.width}px` : this.width.toString();\n  }\n\n  /**\n   * Render the collapse trigger\n   */\n  private renderTrigger() {\n    if (this.trigger === null || !this.collapsible) {\n      return null;\n    }\n\n    // Check for custom trigger slot\n    const hasCustomTrigger = this.querySelector('[slot=\"trigger\"]');\n    if (hasCustomTrigger) {\n      return html`<slot name=\"trigger\"></slot>`;\n    }\n\n    // Zero-width trigger (special trigger when collapsedWidth is 0)\n    if (this.collapsedWidth === 0 && this.collapsed) {\n      return html`\n        <div\n          class=\"nr-sider-zero-width-trigger\"\n          part=\"trigger\"\n          style=${this.zeroWidthTriggerStyle}\n          @click=${this.toggleCollapse}\n        >\n          <span class=\"trigger-icon\">${this.reverseArrow ? '◀' : '▶'}</span>\n        </div>\n      `;\n    }\n\n    // Default trigger\n    return html`\n      <div\n        class=\"nr-sider-trigger\"\n        part=\"trigger\"\n        @click=${this.toggleCollapse}\n      >\n        <span class=\"trigger-icon\">\n          ${this.collapsed \n            ? (this.reverseArrow ? '◀' : '▶') \n            : (this.reverseArrow ? '▶' : '◀')\n          }\n        </span>\n      </div>\n    `;\n  }\n\n  override render() {\n    const classes = {\n      'nr-sider': true,\n      'nr-sider-collapsed': this.collapsed,\n      'nr-sider-has-trigger': this.collapsible && this.trigger !== null,\n      'nr-sider-below-breakpoint': this.belowBreakpoint,\n      'nr-sider-zero-width': this.collapsed && this.collapsedWidth === 0,\n    };\n\n    return html`\n      <aside\n        class=${classMap(classes)}\n        part=\"sider\"\n        style=\"width: ${this.getCurrentWidth()}; flex: 0 0 ${this.getCurrentWidth()};\"\n      >\n        <div class=\"nr-sider-children\">\n          <slot></slot>\n        </div>\n        ${this.renderTrigger()}\n      </aside>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-sider': NrSiderElement;\n  }\n}\n"]}

package/dist/versions.json

@@ -1,6 +1,6 @@
 {
-  "layout": "0.0.1",
-  "grid": "0.0.1",
-  "flex": "0.0.1",
-  "card": "0.0.6"
+  "layout": "0.0.3",
+  "grid": "0.0.3",
+  "flex": "0.0.3",
+  "card": "0.0.8"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuralyui/layout",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Layout components package for Nuraly UI Library - includes grid, flex, and layout containers",
   "main": "dist/index.js",
   "type": "module",
@@ -60,13 +60,13 @@
   "license": "BSD-3-Clause",
   "repository": {
     "type": "git",
-    "url": "https://github.com/NuralyUI/NuralyUI.git",
+    "url": "https://github.com/Nuralyio/NuralyUI.git",
     "directory": "packages/layout"
   },
   "bugs": {
-    "url": "https://github.com/NuralyUI/NuralyUI/issues"
+    "url": "https://github.com/Nuralyio/NuralyUI/issues"
   },
-  "homepage": "https://github.com/NuralyUI/NuralyUI#readme",
+  "homepage": "https://github.com/Nuralyio/NuralyUI#readme",
   "peerDependencies": {
     "lit": "^2.2.4",
     "@lit/reactive-element": "^1.6.1"

package/dist/card/card.type.d.ts

@@ -1,6 +0,0 @@
-export declare const enum CardSize {
-    Small = "small",
-    Default = "default",
-    Large = "large"
-}
-//# sourceMappingURL=card.type.d.ts.map

package/dist/card/card.type.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"card.type.d.ts","sourceRoot":"","sources":["../../../src/components/card/card.type.ts"],"names":[],"mappings":"AAAA,0BAAkB,QAAQ;IACxB,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB"}

package/dist/card/card.type.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=card.type.js.map

package/dist/card/card.type.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"card.type.js","sourceRoot":"","sources":["../../../src/components/card/card.type.ts"],"names":[],"mappings":"","sourcesContent":["export const enum CardSize {\n  Small = 'small',\n  Default = 'default',\n  Large = 'large',\n}\n"]}

package/dist/card/demo/hy-card-demo.d.ts

@@ -1,8 +0,0 @@
-import { LitElement } from 'lit';
-import '../card.component.js';
-import '../../button/demo/buttons-demo.js';
-export declare class HyCardDemo extends LitElement {
-    static styles: import("lit").CSSResult;
-    render(): import("lit").TemplateResult<1>;
-}
-//# sourceMappingURL=hy-card-demo.d.ts.map

package/dist/card/demo/hy-card-demo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"hy-card-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/card/demo/hy-card-demo.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,sBAAsB,CAAC;AAE9B,OAAO,mCAAmC,CAAC;AAE3C,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,0BAKpB;IACO,MAAM;CAqBhB"}

package/dist/card/demo/hy-card-demo.js

@@ -1,44 +0,0 @@
-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;
-};
-import { css, html, LitElement } from 'lit';
-import '../card.component.js';
-import { customElement } from 'lit/decorators.js';
-import '../../button/demo/buttons-demo.js';
-let HyCardDemo = class HyCardDemo extends LitElement {
-    render() {
-        return html `
-      Default
-      <hy-card .header=${'welcome'}>
-        <p slot="content">hello</p>
-      </hy-card>
-      <br />
-      Small
-
-      <hy-card .size=${'small'} .header=${'welcome small'}>
-        <p slot="content">hello</p>
-      </hy-card>
-      <br />
-
-      Large
-
-      <hy-card .size=${'large'} .header=${'welcome large'}>
-        <p slot="content">hello</p>
-      </hy-card>
-    `;
-    }
-};
-HyCardDemo.styles = css `
-    :host {
-      display: block;
-      width: 25%;
-    }
-  `;
-HyCardDemo = __decorate([
-    customElement('hy-card-demo')
-], HyCardDemo);
-export { HyCardDemo };
-//# sourceMappingURL=hy-card-demo.js.map

package/dist/card/demo/hy-card-demo.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hy-card-demo.js","sourceRoot":"","sources":["../../../../src/components/card/demo/hy-card-demo.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,mCAAmC,CAAC;AAG3C,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,UAAU;IAO/B,MAAM;QACb,OAAO,IAAI,CAAA;;yBAEU,SAAS;;;;;;uBAMX,OAAO,YAAY,eAAe;;;;;;;uBAOlC,OAAO,YAAY,eAAe;;;KAGpD,CAAC;IACJ,CAAC;CACF,CAAA;AA3BiB,iBAAM,GAAG,GAAG,CAAA;;;;;GAK1B,CAAA;AANS,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CA4BtB;SA5BY,UAAU","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport '../card.component.js';\nimport { customElement } from 'lit/decorators.js';\nimport '../../button/demo/buttons-demo.js';\n\n@customElement('hy-card-demo')\nexport class HyCardDemo extends LitElement {\n  static override styles = css`\n    :host {\n      display: block;\n      width: 25%;\n    }\n  `;\n  override render() {\n    return html`\n      Default\n      <hy-card .header=${'welcome'}>\n        <p slot=\"content\">hello</p>\n      </hy-card>\n      <br />\n      Small\n\n      <hy-card .size=${'small'} .header=${'welcome small'}>\n        <p slot=\"content\">hello</p>\n      </hy-card>\n      <br />\n\n      Large\n\n      <hy-card .size=${'large'} .header=${'welcome large'}>\n        <p slot=\"content\">hello</p>\n      </hy-card>\n    `;\n  }\n}\n"]}