@nuralyui/layout 0.0.1 → 0.1.0

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

@@ -0,0 +1,103 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+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;
+/**
+ * Column component for grid layout system
+ *
+ * @example
+ * ```html
+ * <!-- Basic column with span -->
+ * <nr-col span="12">Half width</nr-col>
+ * <nr-col span="8">8/24 width</nr-col>
+ *
+ * <!-- Column with offset -->
+ * <nr-col span="12" offset="6">Offset by 6</nr-col>
+ *
+ * <!-- Responsive column -->
+ * <nr-col
+ *   xs="24"
+ *   sm="12"
+ *   md="8"
+ *   lg="6"
+ * >Responsive</nr-col>
+ *
+ * <!-- Column with order -->
+ * <nr-col span="6" order="4">Last</nr-col>
+ * <nr-col span="6" order="1">First</nr-col>
+ *
+ * <!-- Flex column -->
+ * <nr-col flex="auto">Auto flex</nr-col>
+ * <nr-col flex="1">Flex 1</nr-col>
+ * ```
+ *
+ * @slot default - Column content
+ */
+export declare class NrColElement extends NrColElement_base {
+    static styles: import("lit").CSSResult;
+    /** Number of columns to span (out of 24) */
+    span?: number;
+    /** Number of columns to offset */
+    offset: number;
+    /** Order of the column */
+    order?: number;
+    /** Number of columns to pull */
+    pull: number;
+    /** Number of columns to push */
+    push: number;
+    /** Flex layout style */
+    flex: FlexType | '';
+    /** Extra small devices (<576px) */
+    xs?: number | ColSize;
+    /** Small devices (≥576px) */
+    sm?: number | ColSize;
+    /** Medium devices (≥768px) */
+    md?: number | ColSize;
+    /** Large devices (≥992px) */
+    lg?: number | ColSize;
+    /** Extra large devices (≥1200px) */
+    xl?: number | ColSize;
+    /** Extra extra large devices (≥1600px) */
+    xxl?: number | ColSize;
+    /** Current breakpoint */
+    private currentBreakpoint;
+    private resizeObserver?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Setup responsive breakpoint detection
+     */
+    private setupResponsive;
+    /**
+     * Update current breakpoint based on window width
+     */
+    private updateBreakpoint;
+    /**
+     * Get responsive configuration for current breakpoint
+     */
+    private getResponsiveConfig;
+    /**
+     * Get computed column properties
+     */
+    private getColProperties;
+    /**
+     * Get gutter from parent row
+     */
+    private getGutterFromParent;
+    /**
+     * Get inline styles for column
+     */
+    private getColStyle;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-col': NrColElement;
+    }
+}
+export {};
+//# sourceMappingURL=col.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"col.component.d.ts","sourceRoot":"","sources":["../../../src/components/grid/col.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAA6C,MAAM,iBAAiB,CAAC;;AAE/F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBACa,YAAa,SAAQ,iBAA6B;IAC7D,OAAgB,MAAM,0BAAU;IAEhC,4CAA4C;IAE5C,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,kCAAkC;IAElC,MAAM,SAAK;IAEX,0BAA0B;IAE1B,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,gCAAgC;IAEhC,IAAI,SAAK;IAET,gCAAgC;IAEhC,IAAI,SAAK;IAET,wBAAwB;IAExB,IAAI,EAAE,QAAQ,GAAG,EAAE,CAAgB;IAEnC,mCAAmC;IAEnC,EAAE,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEtB,6BAA6B;IAE7B,EAAE,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEtB,8BAA8B;IAE9B,EAAE,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEtB,6BAA6B;IAE7B,EAAE,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEtB,oCAAoC;IAEpC,EAAE,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEtB,0CAA0C;IAE1C,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEvB,yBAAyB;IAEzB,OAAO,CAAC,iBAAiB,CAAqC;IAE9D,OAAO,CAAC,cAAc,CAAC,CAAiB;IAE/B,iBAAiB;IAKjB,oBAAoB;IAK7B;;OAEG;IACH,OAAO,CAAC,eAAe;IAUvB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAuBxB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAuB3B;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAYxB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAS3B;;OAEG;IACH,OAAO,CAAC,WAAW;IAwBV,MAAM;CAyBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,YAAY,CAAC;KACxB;CACF"}

package/dist/grid/col.component.js

@@ -0,0 +1,253 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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 { BREAKPOINTS, EMPTY_STRING } from './grid.types.js';
+/**
+ * Column component for grid layout system
+ *
+ * @example
+ * ```html
+ * <!-- Basic column with span -->
+ * <nr-col span="12">Half width</nr-col>
+ * <nr-col span="8">8/24 width</nr-col>
+ *
+ * <!-- Column with offset -->
+ * <nr-col span="12" offset="6">Offset by 6</nr-col>
+ *
+ * <!-- Responsive column -->
+ * <nr-col
+ *   xs="24"
+ *   sm="12"
+ *   md="8"
+ *   lg="6"
+ * >Responsive</nr-col>
+ *
+ * <!-- Column with order -->
+ * <nr-col span="6" order="4">Last</nr-col>
+ * <nr-col span="6" order="1">First</nr-col>
+ *
+ * <!-- Flex column -->
+ * <nr-col flex="auto">Auto flex</nr-col>
+ * <nr-col flex="1">Flex 1</nr-col>
+ * ```
+ *
+ * @slot default - Column content
+ */
+let NrColElement = class NrColElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /** Number of columns to offset */
+        this.offset = 0;
+        /** Number of columns to pull */
+        this.pull = 0;
+        /** Number of columns to push */
+        this.push = 0;
+        /** Flex layout style */
+        this.flex = EMPTY_STRING;
+        /** Current breakpoint */
+        this.currentBreakpoint = "xs" /* GridBreakpoint.XS */;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setupResponsive();
+    }
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    /**
+     * Setup responsive breakpoint detection
+     */
+    setupResponsive() {
+        this.updateBreakpoint();
+        this.resizeObserver = new ResizeObserver(() => {
+            this.updateBreakpoint();
+        });
+        this.resizeObserver.observe(document.documentElement);
+    }
+    /**
+     * Update current breakpoint based on window width
+     */
+    updateBreakpoint() {
+        const width = window.innerWidth;
+        let newBreakpoint;
+        if (width >= BREAKPOINTS.xxl) {
+            newBreakpoint = "xxl" /* GridBreakpoint.XXL */;
+        }
+        else if (width >= BREAKPOINTS.xl) {
+            newBreakpoint = "xl" /* GridBreakpoint.XL */;
+        }
+        else if (width >= BREAKPOINTS.lg) {
+            newBreakpoint = "lg" /* GridBreakpoint.LG */;
+        }
+        else if (width >= BREAKPOINTS.md) {
+            newBreakpoint = "md" /* GridBreakpoint.MD */;
+        }
+        else if (width >= BREAKPOINTS.sm) {
+            newBreakpoint = "sm" /* GridBreakpoint.SM */;
+        }
+        else {
+            newBreakpoint = "xs" /* GridBreakpoint.XS */;
+        }
+        if (newBreakpoint !== this.currentBreakpoint) {
+            this.currentBreakpoint = newBreakpoint;
+        }
+    }
+    /**
+     * Get responsive configuration for current breakpoint
+     */
+    getResponsiveConfig() {
+        const breakpoints = [
+            this.currentBreakpoint,
+            "xl" /* GridBreakpoint.XL */,
+            "lg" /* GridBreakpoint.LG */,
+            "md" /* GridBreakpoint.MD */,
+            "sm" /* GridBreakpoint.SM */,
+            "xs" /* GridBreakpoint.XS */
+        ];
+        for (const bp of breakpoints) {
+            const value = this[bp];
+            if (value !== undefined) {
+                if (typeof value === 'number') {
+                    return { span: value };
+                }
+                return value;
+            }
+        }
+        return {};
+    }
+    /**
+     * Get computed column properties
+     */
+    getColProperties() {
+        var _a, _b, _c, _d, _e;
+        const responsive = this.getResponsiveConfig();
+        return {
+            span: (_a = responsive.span) !== null && _a !== void 0 ? _a : this.span,
+            offset: (_b = responsive.offset) !== null && _b !== void 0 ? _b : this.offset,
+            order: (_c = responsive.order) !== null && _c !== void 0 ? _c : this.order,
+            pull: (_d = responsive.pull) !== null && _d !== void 0 ? _d : this.pull,
+            push: (_e = responsive.push) !== null && _e !== void 0 ? _e : this.push
+        };
+    }
+    /**
+     * Get gutter from parent row
+     */
+    getGutterFromParent() {
+        const parent = this.closest('nr-row');
+        if (parent) {
+            const gutter = parent.getAttribute('data-gutter');
+            return gutter ? parseInt(gutter, 10) : 0;
+        }
+        return 0;
+    }
+    /**
+     * Get inline styles for column
+     */
+    getColStyle() {
+        const styles = {};
+        const gutter = this.getGutterFromParent();
+        if (gutter > 0) {
+            styles['padding-left'] = `${gutter / 2}px`;
+            styles['padding-right'] = `${gutter / 2}px`;
+        }
+        if (this.flex) {
+            if (this.flex === 'auto') {
+                styles['flex'] = '1 1 auto';
+            }
+            else if (this.flex === 'none') {
+                styles['flex'] = '0 0 auto';
+            }
+            else if (typeof this.flex === 'number') {
+                styles['flex'] = `${this.flex} ${this.flex} auto`;
+            }
+            else {
+                styles['flex'] = this.flex;
+            }
+        }
+        return styles;
+    }
+    render() {
+        var _a;
+        const colStyle = this.getColStyle();
+        const props = this.getColProperties();
+        // Apply data attributes to :host for proper styling
+        this.setAttribute('data-span', ((_a = props.span) === null || _a === void 0 ? void 0 : _a.toString()) || '');
+        this.setAttribute('data-offset', props.offset.toString());
+        if (props.order !== undefined) {
+            this.setAttribute('data-order', props.order.toString());
+        }
+        else {
+            this.removeAttribute('data-order');
+        }
+        this.setAttribute('data-pull', props.pull.toString());
+        this.setAttribute('data-push', props.push.toString());
+        this.setAttribute('data-theme', this.currentTheme);
+        return html `
+      <div
+        class="nr-col"
+        style="${Object.entries(colStyle).map(([key, value]) => `${key}: ${value}`).join('; ')}"
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+NrColElement.styles = styles;
+__decorate([
+    property({ type: Number })
+], NrColElement.prototype, "span", void 0);
+__decorate([
+    property({ type: Number })
+], NrColElement.prototype, "offset", void 0);
+__decorate([
+    property({ type: Number })
+], NrColElement.prototype, "order", void 0);
+__decorate([
+    property({ type: Number })
+], NrColElement.prototype, "pull", void 0);
+__decorate([
+    property({ type: Number })
+], NrColElement.prototype, "push", void 0);
+__decorate([
+    property({ type: String })
+], NrColElement.prototype, "flex", void 0);
+__decorate([
+    property({ type: Object })
+], NrColElement.prototype, "xs", void 0);
+__decorate([
+    property({ type: Object })
+], NrColElement.prototype, "sm", void 0);
+__decorate([
+    property({ type: Object })
+], NrColElement.prototype, "md", void 0);
+__decorate([
+    property({ type: Object })
+], NrColElement.prototype, "lg", void 0);
+__decorate([
+    property({ type: Object })
+], NrColElement.prototype, "xl", void 0);
+__decorate([
+    property({ type: Object })
+], NrColElement.prototype, "xxl", void 0);
+__decorate([
+    state()
+], NrColElement.prototype, "currentBreakpoint", void 0);
+NrColElement = __decorate([
+    customElement('nr-col')
+], NrColElement);
+export { NrColElement };
+//# sourceMappingURL=col.component.js.map

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

@@ -0,0 +1 @@
+{"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 '../../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"]}

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

@@ -0,0 +1,6 @@
+/**
+ * Column component styles for the Grid system
+ * Using shared CSS variables from /src/shared/themes/
+ */
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=col.style.d.ts.map

package/dist/grid/col.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"col.style.d.ts","sourceRoot":"","sources":["../../../src/components/grid/col.style.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,MAAM,yBA8GlB,CAAC"}

package/dist/grid/col.style.js

@@ -0,0 +1,117 @@
+import { css } from 'lit';
+/**
+ * Column component styles for the Grid system
+ * Using shared CSS variables from /src/shared/themes/
+ */
+export const styles = css `
+  :host {
+    display: block;
+    box-sizing: border-box;
+    flex-shrink: 0;
+  }
+
+  .nr-col {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    
+    /* Theme-aware */
+    color: var(--nuraly-color-text);
+  }
+
+  /* Column spans (1-24) - Apply flex to :host */
+  :host([data-span="1"]) { flex: 0 0 4.16666667%; max-width: 4.16666667%; }
+  :host([data-span="2"]) { flex: 0 0 8.33333333%; max-width: 8.33333333%; }
+  :host([data-span="3"]) { flex: 0 0 12.5%; max-width: 12.5%; }
+  :host([data-span="4"]) { flex: 0 0 16.66666667%; max-width: 16.66666667%; }
+  :host([data-span="5"]) { flex: 0 0 20.83333333%; max-width: 20.83333333%; }
+  :host([data-span="6"]) { flex: 0 0 25%; max-width: 25%; }
+  :host([data-span="7"]) { flex: 0 0 29.16666667%; max-width: 29.16666667%; }
+  :host([data-span="8"]) { flex: 0 0 33.33333333%; max-width: 33.33333333%; }
+  :host([data-span="9"]) { flex: 0 0 37.5%; max-width: 37.5%; }
+  :host([data-span="10"]) { flex: 0 0 41.66666667%; max-width: 41.66666667%; }
+  :host([data-span="11"]) { flex: 0 0 45.83333333%; max-width: 45.83333333%; }
+  :host([data-span="12"]) { flex: 0 0 50%; max-width: 50%; }
+  :host([data-span="13"]) { flex: 0 0 54.16666667%; max-width: 54.16666667%; }
+  :host([data-span="14"]) { flex: 0 0 58.33333333%; max-width: 58.33333333%; }
+  :host([data-span="15"]) { flex: 0 0 62.5%; max-width: 62.5%; }
+  :host([data-span="16"]) { flex: 0 0 66.66666667%; max-width: 66.66666667%; }
+  :host([data-span="17"]) { flex: 0 0 70.83333333%; max-width: 70.83333333%; }
+  :host([data-span="18"]) { flex: 0 0 75%; max-width: 75%; }
+  :host([data-span="19"]) { flex: 0 0 79.16666667%; max-width: 79.16666667%; }
+  :host([data-span="20"]) { flex: 0 0 83.33333333%; max-width: 83.33333333%; }
+  :host([data-span="21"]) { flex: 0 0 87.5%; max-width: 87.5%; }
+  :host([data-span="22"]) { flex: 0 0 91.66666667%; max-width: 91.66666667%; }
+  :host([data-span="23"]) { flex: 0 0 95.83333333%; max-width: 95.83333333%; }
+  :host([data-span="24"]) { flex: 0 0 100%; max-width: 100%; }
+
+  /* Column offsets (0-24) - Apply to :host */
+  :host([data-offset="0"]) { margin-left: 0; }
+  :host([data-offset="1"]) { margin-left: 4.16666667%; }
+  :host([data-offset="2"]) { margin-left: 8.33333333%; }
+  :host([data-offset="3"]) { margin-left: 12.5%; }
+  :host([data-offset="4"]) { margin-left: 16.66666667%; }
+  :host([data-offset="5"]) { margin-left: 20.83333333%; }
+  :host([data-offset="6"]) { margin-left: 25%; }
+  :host([data-offset="7"]) { margin-left: 29.16666667%; }
+  :host([data-offset="8"]) { margin-left: 33.33333333%; }
+  :host([data-offset="9"]) { margin-left: 37.5%; }
+  :host([data-offset="10"]) { margin-left: 41.66666667%; }
+  :host([data-offset="11"]) { margin-left: 45.83333333%; }
+  :host([data-offset="12"]) { margin-left: 50%; }
+  :host([data-offset="13"]) { margin-left: 54.16666667%; }
+  :host([data-offset="14"]) { margin-left: 58.33333333%; }
+  :host([data-offset="15"]) { margin-left: 62.5%; }
+  :host([data-offset="16"]) { margin-left: 66.66666667%; }
+  :host([data-offset="17"]) { margin-left: 70.83333333%; }
+  :host([data-offset="18"]) { margin-left: 75%; }
+  :host([data-offset="19"]) { margin-left: 79.16666667%; }
+  :host([data-offset="20"]) { margin-left: 83.33333333%; }
+  :host([data-offset="21"]) { margin-left: 87.5%; }
+  :host([data-offset="22"]) { margin-left: 91.66666667%; }
+  :host([data-offset="23"]) { margin-left: 95.83333333%; }
+
+  /* Order - Apply to :host */
+  :host([data-order="1"]) { order: 1; }
+  :host([data-order="2"]) { order: 2; }
+  :host([data-order="3"]) { order: 3; }
+  :host([data-order="4"]) { order: 4; }
+  :host([data-order="5"]) { order: 5; }
+  :host([data-order="6"]) { order: 6; }
+  :host([data-order="7"]) { order: 7; }
+  :host([data-order="8"]) { order: 8; }
+  :host([data-order="9"]) { order: 9; }
+  :host([data-order="10"]) { order: 10; }
+
+  /* Pull (right positioning) - Apply to :host */
+  :host([data-pull="0"]) { right: auto; }
+  :host([data-pull="1"]) { right: 4.16666667%; }
+  :host([data-pull="2"]) { right: 8.33333333%; }
+  :host([data-pull="3"]) { right: 12.5%; }
+  :host([data-pull="4"]) { right: 16.66666667%; }
+  :host([data-pull="5"]) { right: 20.83333333%; }
+  :host([data-pull="6"]) { right: 25%; }
+  :host([data-pull="7"]) { right: 29.16666667%; }
+  :host([data-pull="8"]) { right: 33.33333333%; }
+  :host([data-pull="9"]) { right: 37.5%; }
+  :host([data-pull="10"]) { right: 41.66666667%; }
+  :host([data-pull="11"]) { right: 45.83333333%; }
+  :host([data-pull="12"]) { right: 50%; }
+
+  /* Push (left positioning) - Apply to :host */
+  :host([data-push="0"]) { left: auto; }
+  :host([data-push="1"]) { left: 4.16666667%; }
+  :host([data-push="2"]) { left: 8.33333333%; }
+  :host([data-push="3"]) { left: 12.5%; }
+  :host([data-push="4"]) { left: 16.66666667%; }
+  :host([data-push="5"]) { left: 20.83333333%; }
+  :host([data-push="6"]) { left: 25%; }
+  :host([data-push="7"]) { left: 29.16666667%; }
+  :host([data-push="8"]) { left: 33.33333333%; }
+  :host([data-push="9"]) { left: 37.5%; }
+  :host([data-push="10"]) { left: 41.66666667%; }
+  :host([data-push="11"]) { left: 45.83333333%; }
+  :host([data-push="12"]) { left: 50%; }
+`;
+//# sourceMappingURL=col.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"col.style.js","sourceRoot":"","sources":["../../../src/components/grid/col.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8GxB,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Column component styles for the Grid system\n * Using shared CSS variables from /src/shared/themes/\n */\nexport const styles = css`\n  :host {\n    display: block;\n    box-sizing: border-box;\n    flex-shrink: 0;\n  }\n\n  .nr-col {\n    position: relative;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    \n    /* Theme-aware */\n    color: var(--nuraly-color-text);\n  }\n\n  /* Column spans (1-24) - Apply flex to :host */\n  :host([data-span=\"1\"]) { flex: 0 0 4.16666667%; max-width: 4.16666667%; }\n  :host([data-span=\"2\"]) { flex: 0 0 8.33333333%; max-width: 8.33333333%; }\n  :host([data-span=\"3\"]) { flex: 0 0 12.5%; max-width: 12.5%; }\n  :host([data-span=\"4\"]) { flex: 0 0 16.66666667%; max-width: 16.66666667%; }\n  :host([data-span=\"5\"]) { flex: 0 0 20.83333333%; max-width: 20.83333333%; }\n  :host([data-span=\"6\"]) { flex: 0 0 25%; max-width: 25%; }\n  :host([data-span=\"7\"]) { flex: 0 0 29.16666667%; max-width: 29.16666667%; }\n  :host([data-span=\"8\"]) { flex: 0 0 33.33333333%; max-width: 33.33333333%; }\n  :host([data-span=\"9\"]) { flex: 0 0 37.5%; max-width: 37.5%; }\n  :host([data-span=\"10\"]) { flex: 0 0 41.66666667%; max-width: 41.66666667%; }\n  :host([data-span=\"11\"]) { flex: 0 0 45.83333333%; max-width: 45.83333333%; }\n  :host([data-span=\"12\"]) { flex: 0 0 50%; max-width: 50%; }\n  :host([data-span=\"13\"]) { flex: 0 0 54.16666667%; max-width: 54.16666667%; }\n  :host([data-span=\"14\"]) { flex: 0 0 58.33333333%; max-width: 58.33333333%; }\n  :host([data-span=\"15\"]) { flex: 0 0 62.5%; max-width: 62.5%; }\n  :host([data-span=\"16\"]) { flex: 0 0 66.66666667%; max-width: 66.66666667%; }\n  :host([data-span=\"17\"]) { flex: 0 0 70.83333333%; max-width: 70.83333333%; }\n  :host([data-span=\"18\"]) { flex: 0 0 75%; max-width: 75%; }\n  :host([data-span=\"19\"]) { flex: 0 0 79.16666667%; max-width: 79.16666667%; }\n  :host([data-span=\"20\"]) { flex: 0 0 83.33333333%; max-width: 83.33333333%; }\n  :host([data-span=\"21\"]) { flex: 0 0 87.5%; max-width: 87.5%; }\n  :host([data-span=\"22\"]) { flex: 0 0 91.66666667%; max-width: 91.66666667%; }\n  :host([data-span=\"23\"]) { flex: 0 0 95.83333333%; max-width: 95.83333333%; }\n  :host([data-span=\"24\"]) { flex: 0 0 100%; max-width: 100%; }\n\n  /* Column offsets (0-24) - Apply to :host */\n  :host([data-offset=\"0\"]) { margin-left: 0; }\n  :host([data-offset=\"1\"]) { margin-left: 4.16666667%; }\n  :host([data-offset=\"2\"]) { margin-left: 8.33333333%; }\n  :host([data-offset=\"3\"]) { margin-left: 12.5%; }\n  :host([data-offset=\"4\"]) { margin-left: 16.66666667%; }\n  :host([data-offset=\"5\"]) { margin-left: 20.83333333%; }\n  :host([data-offset=\"6\"]) { margin-left: 25%; }\n  :host([data-offset=\"7\"]) { margin-left: 29.16666667%; }\n  :host([data-offset=\"8\"]) { margin-left: 33.33333333%; }\n  :host([data-offset=\"9\"]) { margin-left: 37.5%; }\n  :host([data-offset=\"10\"]) { margin-left: 41.66666667%; }\n  :host([data-offset=\"11\"]) { margin-left: 45.83333333%; }\n  :host([data-offset=\"12\"]) { margin-left: 50%; }\n  :host([data-offset=\"13\"]) { margin-left: 54.16666667%; }\n  :host([data-offset=\"14\"]) { margin-left: 58.33333333%; }\n  :host([data-offset=\"15\"]) { margin-left: 62.5%; }\n  :host([data-offset=\"16\"]) { margin-left: 66.66666667%; }\n  :host([data-offset=\"17\"]) { margin-left: 70.83333333%; }\n  :host([data-offset=\"18\"]) { margin-left: 75%; }\n  :host([data-offset=\"19\"]) { margin-left: 79.16666667%; }\n  :host([data-offset=\"20\"]) { margin-left: 83.33333333%; }\n  :host([data-offset=\"21\"]) { margin-left: 87.5%; }\n  :host([data-offset=\"22\"]) { margin-left: 91.66666667%; }\n  :host([data-offset=\"23\"]) { margin-left: 95.83333333%; }\n\n  /* Order - Apply to :host */\n  :host([data-order=\"1\"]) { order: 1; }\n  :host([data-order=\"2\"]) { order: 2; }\n  :host([data-order=\"3\"]) { order: 3; }\n  :host([data-order=\"4\"]) { order: 4; }\n  :host([data-order=\"5\"]) { order: 5; }\n  :host([data-order=\"6\"]) { order: 6; }\n  :host([data-order=\"7\"]) { order: 7; }\n  :host([data-order=\"8\"]) { order: 8; }\n  :host([data-order=\"9\"]) { order: 9; }\n  :host([data-order=\"10\"]) { order: 10; }\n\n  /* Pull (right positioning) - Apply to :host */\n  :host([data-pull=\"0\"]) { right: auto; }\n  :host([data-pull=\"1\"]) { right: 4.16666667%; }\n  :host([data-pull=\"2\"]) { right: 8.33333333%; }\n  :host([data-pull=\"3\"]) { right: 12.5%; }\n  :host([data-pull=\"4\"]) { right: 16.66666667%; }\n  :host([data-pull=\"5\"]) { right: 20.83333333%; }\n  :host([data-pull=\"6\"]) { right: 25%; }\n  :host([data-pull=\"7\"]) { right: 29.16666667%; }\n  :host([data-pull=\"8\"]) { right: 33.33333333%; }\n  :host([data-pull=\"9\"]) { right: 37.5%; }\n  :host([data-pull=\"10\"]) { right: 41.66666667%; }\n  :host([data-pull=\"11\"]) { right: 45.83333333%; }\n  :host([data-pull=\"12\"]) { right: 50%; }\n\n  /* Push (left positioning) - Apply to :host */\n  :host([data-push=\"0\"]) { left: auto; }\n  :host([data-push=\"1\"]) { left: 4.16666667%; }\n  :host([data-push=\"2\"]) { left: 8.33333333%; }\n  :host([data-push=\"3\"]) { left: 12.5%; }\n  :host([data-push=\"4\"]) { left: 16.66666667%; }\n  :host([data-push=\"5\"]) { left: 20.83333333%; }\n  :host([data-push=\"6\"]) { left: 25%; }\n  :host([data-push=\"7\"]) { left: 29.16666667%; }\n  :host([data-push=\"8\"]) { left: 33.33333333%; }\n  :host([data-push=\"9\"]) { left: 37.5%; }\n  :host([data-push=\"10\"]) { left: 41.66666667%; }\n  :host([data-push=\"11\"]) { left: 45.83333333%; }\n  :host([data-push=\"12\"]) { left: 50%; }\n`;\n"]}

package/dist/grid/grid.types.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Grid system types and constants
+ */
+export declare const EMPTY_STRING = "";
+/**
+ * Responsive breakpoints matching Ant Design
+ */
+export declare const enum GridBreakpoint {
+    XS = "xs",
+    SM = "sm",
+    MD = "md",
+    LG = "lg",
+    XL = "xl",
+    XXL = "xxl"
+}
+/**
+ * Breakpoint pixel values
+ */
+export declare const BREAKPOINTS: {
+    readonly xs: 0;
+    readonly sm: 576;
+    readonly md: 768;
+    readonly lg: 992;
+    readonly xl: 1200;
+    readonly xxl: 1600;
+};
+/**
+ * Horizontal alignment of flex items
+ */
+export declare const enum RowAlign {
+    Top = "top",
+    Middle = "middle",
+    Bottom = "bottom",
+    Stretch = "stretch"
+}
+/**
+ * Horizontal arrangement of columns
+ */
+export declare const enum RowJustify {
+    Start = "start",
+    End = "end",
+    Center = "center",
+    SpaceAround = "space-around",
+    SpaceBetween = "space-between",
+    SpaceEvenly = "space-evenly"
+}
+/**
+ * Gutter configuration - can be number, array, or object
+ */
+export declare type Gutter = number | [number, number] | Partial<Record<GridBreakpoint, number | [number, number]>>;
+/**
+ * Column span configuration for responsive breakpoints
+ */
+export interface ColSize {
+    span?: number;
+    offset?: number;
+    order?: number;
+    pull?: number;
+    push?: number;
+}
+/**
+ * Responsive column configuration
+ */
+export declare type ResponsiveCol = number | ColSize;
+/**
+ * Column configuration for all breakpoints
+ */
+export interface ColResponsive {
+    xs?: ResponsiveCol;
+    sm?: ResponsiveCol;
+    md?: ResponsiveCol;
+    lg?: ResponsiveCol;
+    xl?: ResponsiveCol;
+    xxl?: ResponsiveCol;
+}
+/**
+ * Flex properties
+ */
+export declare type FlexType = number | 'none' | 'auto' | string;
+//# sourceMappingURL=grid.types.d.ts.map

package/dist/grid/grid.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.types.d.ts","sourceRoot":"","sources":["../../../src/components/grid/grid.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,YAAY,KAAK,CAAC;AAE/B;;GAEG;AACH,0BAAkB,cAAc;IAC9B,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,GAAG,QAAQ;CACZ;AAED;;GAEG;AACH,eAAO,MAAM,WAAW;;;;;;;CAOd,CAAC;AAEX;;GAEG;AACH,0BAAkB,QAAQ;IACxB,GAAG,QAAQ;IACX,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,OAAO,YAAY;CACpB;AAED;;GAEG;AACH,0BAAkB,UAAU;IAC1B,KAAK,UAAU;IACf,GAAG,QAAQ;IACX,MAAM,WAAW;IACjB,WAAW,iBAAiB;IAC5B,YAAY,kBAAkB;IAC9B,WAAW,iBAAiB;CAC7B;AAED;;GAEG;AACH,oBAAY,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;AAE5G;;GAEG;AACH,MAAM,WAAW,OAAO;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,oBAAY,aAAa,GAAG,MAAM,GAAG,OAAO,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,EAAE,CAAC,EAAE,aAAa,CAAC;IACnB,EAAE,CAAC,EAAE,aAAa,CAAC;IACnB,EAAE,CAAC,EAAE,aAAa,CAAC;IACnB,EAAE,CAAC,EAAE,aAAa,CAAC;IACnB,EAAE,CAAC,EAAE,aAAa,CAAC;IACnB,GAAG,CAAC,EAAE,aAAa,CAAC;CACrB;AAED;;GAEG;AACH,oBAAY,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC"}

package/dist/grid/grid.types.js

@@ -0,0 +1,16 @@
+/**
+ * Grid system types and constants
+ */
+export const EMPTY_STRING = '';
+/**
+ * Breakpoint pixel values
+ */
+export const BREAKPOINTS = {
+    xs: 0,
+    sm: 576,
+    md: 768,
+    lg: 992,
+    xl: 1200,
+    xxl: 1600
+};
+//# sourceMappingURL=grid.types.js.map

package/dist/grid/grid.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.types.js","sourceRoot":"","sources":["../../../src/components/grid/grid.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC;AAc/B;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,IAAI;IACR,GAAG,EAAE,IAAI;CACD,CAAC","sourcesContent":["/**\n * Grid system types and constants\n */\n\nexport const EMPTY_STRING = '';\n\n/**\n * Responsive breakpoints matching Ant Design\n */\nexport const enum GridBreakpoint {\n  XS = 'xs',  // < 576px\n  SM = 'sm',  // >= 576px\n  MD = 'md',  // >= 768px\n  LG = 'lg',  // >= 992px\n  XL = 'xl',  // >= 1200px\n  XXL = 'xxl' // >= 1600px\n}\n\n/**\n * Breakpoint pixel values\n */\nexport const BREAKPOINTS = {\n  xs: 0,\n  sm: 576,\n  md: 768,\n  lg: 992,\n  xl: 1200,\n  xxl: 1600\n} as const;\n\n/**\n * Horizontal alignment of flex items\n */\nexport const enum RowAlign {\n  Top = 'top',\n  Middle = 'middle',\n  Bottom = 'bottom',\n  Stretch = 'stretch'\n}\n\n/**\n * Horizontal arrangement of columns\n */\nexport const enum RowJustify {\n  Start = 'start',\n  End = 'end',\n  Center = 'center',\n  SpaceAround = 'space-around',\n  SpaceBetween = 'space-between',\n  SpaceEvenly = 'space-evenly'\n}\n\n/**\n * Gutter configuration - can be number, array, or object\n */\nexport type Gutter = number | [number, number] | Partial<Record<GridBreakpoint, number | [number, number]>>;\n\n/**\n * Column span configuration for responsive breakpoints\n */\nexport interface ColSize {\n  span?: number;\n  offset?: number;\n  order?: number;\n  pull?: number;\n  push?: number;\n}\n\n/**\n * Responsive column configuration\n */\nexport type ResponsiveCol = number | ColSize;\n\n/**\n * Column configuration for all breakpoints\n */\nexport interface ColResponsive {\n  xs?: ResponsiveCol;\n  sm?: ResponsiveCol;\n  md?: ResponsiveCol;\n  lg?: ResponsiveCol;\n  xl?: ResponsiveCol;\n  xxl?: ResponsiveCol;\n}\n\n/**\n * Flex properties\n */\nexport type FlexType = number | 'none' | 'auto' | string;\n"]}

package/dist/grid/index.d.ts

@@ -0,0 +1,4 @@
+export * from './row.component.js';
+export * from './col.component.js';
+export * from './grid.types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/grid/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/grid/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC"}

package/dist/grid/index.js

@@ -0,0 +1,4 @@
+export * from './row.component.js';
+export * from './col.component.js';
+export * from './grid.types.js';
+//# sourceMappingURL=index.js.map

package/dist/grid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/grid/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC","sourcesContent":["export * from './row.component.js';\nexport * from './col.component.js';\nexport * from './grid.types.js';\n"]}