@nuraly/lumenui 0.1.0

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

@@ -0,0 +1,68 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  :host([disabled]) {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  .form-wrapper {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--nuraly-form-gap, 16px);
+  }
+
+  .form-wrapper[disabled] {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  /* Form validation states */
+  :host([data-validation-state="pristine"]) {
+    border-left: 3px solid transparent;
+  }
+
+  :host([data-validation-state="valid"]) {
+    border-left: 3px solid #52c41a;
+  }
+
+  :host([data-validation-state="invalid"]) {
+    border-left: 3px solid #ff4d4f;
+  }
+
+  :host([data-validation-state="pending"]) {
+    border-left: 3px solid #1890ff;
+  }
+
+  /* Form submission states */
+  :host([data-submission-state="submitting"]) {
+    opacity: 0.8;
+    pointer-events: none;
+  }
+
+  :host([data-submission-state="success"]) {
+    border-left: 3px solid #52c41a;
+  }
+
+  :host([data-submission-state="error"]) {
+    border-left: 3px solid #ff4d4f;
+  }
+
+  /* Responsive design */
+  @media (max-width: 768px) {
+    .form-wrapper {
+      gap: var(--nuraly-form-gap-mobile, 12px);
+    }
+  }
+`;
+//# sourceMappingURL=form.style.js.map

package/dist/src/components/form/form.types.d.ts

@@ -0,0 +1,92 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { ValidatableComponent, FormFieldInfo } from '@nuralyui/common/mixins';
+/**
+ * Form validation states that can be applied to the form and its children
+ */
+export declare enum FormValidationState {
+    Pristine = "pristine",// Form has not been interacted with
+    Pending = "pending",// Validation is in progress
+    Valid = "valid",// All form fields are valid
+    Invalid = "invalid",// One or more form fields are invalid
+    Submitted = "submitted"
+}
+/**
+ * Form submission states
+ */
+export declare enum FormSubmissionState {
+    Idle = "idle",
+    Submitting = "submitting",
+    Success = "success",
+    Error = "error"
+}
+/**
+ * Form configuration options
+ */
+export interface FormConfig {
+    /** Enable real-time validation */
+    validateOnChange?: boolean;
+    /** Validate fields on blur */
+    validateOnBlur?: boolean;
+    /** Show validation errors immediately */
+    showErrorsImmediately?: boolean;
+    /** Prevent submission if invalid */
+    preventInvalidSubmission?: boolean;
+    /** Reset form after successful submission */
+    resetOnSuccess?: boolean;
+    /** Custom validation debounce delay (ms) */
+    validationDelay?: number;
+}
+/**
+ * Form field information
+ */
+export interface FormField extends FormFieldInfo {
+}
+/**
+ * Form validation result
+ */
+export interface FormValidationResult {
+    isValid: boolean;
+    invalidFields: FormField[];
+    validationErrors: Record<string, string>;
+    summary: string;
+}
+/**
+ * Form submission data
+ */
+export interface FormSubmissionData {
+    formData: FormData;
+    jsonData: Record<string, any>;
+    fields: Record<string, any>;
+}
+/**
+ * Interface that form field components must implement
+ * @deprecated Use ValidatableComponent from shared/validation.types.js instead
+ */
+export interface FormFieldCapable extends ValidatableComponent {
+}
+/**
+ * Form event details
+ */
+export interface FormEventDetail {
+    formData?: FormSubmissionData;
+    validationResult?: FormValidationResult;
+    field?: FormField;
+    error?: Error;
+}
+/**
+ * Custom form events
+ */
+export declare const FORM_EVENTS: {
+    readonly VALIDATION_CHANGED: "nr-form-validation-changed";
+    readonly FIELD_CHANGED: "nr-form-field-changed";
+    readonly SUBMIT_ATTEMPT: "nr-form-submit-attempt";
+    readonly SUBMIT_SUCCESS: "nr-form-submit-success";
+    readonly SUBMIT_ERROR: "nr-form-submit-error";
+    readonly RESET: "nr-form-reset";
+};
+export type FormEventType = typeof FORM_EVENTS[keyof typeof FORM_EVENTS];
+//# sourceMappingURL=form.types.d.ts.map

package/dist/src/components/form/form.types.js

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Form validation states that can be applied to the form and its children
+ */
+export var FormValidationState;
+(function (FormValidationState) {
+    FormValidationState["Pristine"] = "pristine";
+    FormValidationState["Pending"] = "pending";
+    FormValidationState["Valid"] = "valid";
+    FormValidationState["Invalid"] = "invalid";
+    FormValidationState["Submitted"] = "submitted"; // Form has been submitted
+})(FormValidationState || (FormValidationState = {}));
+/**
+ * Form submission states
+ */
+export var FormSubmissionState;
+(function (FormSubmissionState) {
+    FormSubmissionState["Idle"] = "idle";
+    FormSubmissionState["Submitting"] = "submitting";
+    FormSubmissionState["Success"] = "success";
+    FormSubmissionState["Error"] = "error";
+})(FormSubmissionState || (FormSubmissionState = {}));
+/**
+ * Custom form events
+ */
+export const FORM_EVENTS = {
+    VALIDATION_CHANGED: 'nr-form-validation-changed',
+    FIELD_CHANGED: 'nr-form-field-changed',
+    SUBMIT_ATTEMPT: 'nr-form-submit-attempt',
+    SUBMIT_SUCCESS: 'nr-form-submit-success',
+    SUBMIT_ERROR: 'nr-form-submit-error',
+    RESET: 'nr-form-reset',
+};
+//# sourceMappingURL=form.types.js.map

package/dist/src/components/form/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { NrFormElement } from './form.component.js';
+export * from './form.types.js';
+export { FormValidationController } from './controllers/validation.controller.js';
+export { FormSubmissionController } from './controllers/submission.controller.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/form/index.js

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+// Main component
+export { NrFormElement } from './form.component.js';
+// Types and interfaces
+export * from './form.types.js';
+// Controllers
+export { FormValidationController } from './controllers/validation.controller.js';
+export { FormSubmissionController } from './controllers/submission.controller.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,202 @@
+import{css as t,LitElement as a,html as s}from"lit";import{property as e,state as o,customElement as r}from"lit/decorators.js";import{NuralyUIBaseMixin as i}from"@nuralyui/common/mixins";const d=t`
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  .nr-row {
+    display: flex;
+    flex-flow: row wrap;
+    min-width: 0;
+    
+    /* Theme-aware */
+    color: var(--nuraly-color-text);
+  }
+
+  /* Wrap control */
+  .nr-row[data-wrap="false"] {
+    flex-wrap: nowrap;
+  }
+
+  /* Horizontal alignment (justify-content) */
+  .nr-row[data-justify="start"] {
+    justify-content: flex-start;
+  }
+
+  .nr-row[data-justify="end"] {
+    justify-content: flex-end;
+  }
+
+  .nr-row[data-justify="center"] {
+    justify-content: center;
+  }
+
+  .nr-row[data-justify="space-around"] {
+    justify-content: space-around;
+  }
+
+  .nr-row[data-justify="space-between"] {
+    justify-content: space-between;
+  }
+
+  .nr-row[data-justify="space-evenly"] {
+    justify-content: space-evenly;
+  }
+
+  /* Vertical alignment (align-items) */
+  .nr-row[data-align="top"] {
+    align-items: flex-start;
+  }
+
+  .nr-row[data-align="middle"] {
+    align-items: center;
+  }
+
+  .nr-row[data-align="bottom"] {
+    align-items: flex-end;
+  }
+
+  .nr-row[data-align="stretch"] {
+    align-items: stretch;
+  }
+`,h="",n={xs:0,sm:576,md:768,lg:992,xl:1200,xxl:1600};
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var l=function(t,a,s,e){for(var o,r=arguments.length,i=r<3?a:null===e?e=Object.getOwnPropertyDescriptor(a,s):e,d=t.length-1;d>=0;d--)(o=t[d])&&(i=(r<3?o(i):r>3?o(a,s,i):o(a,s))||i);return r>3&&i&&Object.defineProperty(a,s,i),i};let f=class extends(i(a)){constructor(){super(...arguments),this.align="",this.justify="",this.gutter=0,this.wrap=!0,this.currentBreakpoint="xs"}connectedCallback(){super.connectedCallback(),this.setupResponsiveGutter()}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.resizeObserver)||void 0===t||t.disconnect()}setupResponsiveGutter(){"object"!=typeof this.gutter||Array.isArray(this.gutter)||(this.updateBreakpoint(),this.resizeObserver=new ResizeObserver(()=>{this.updateBreakpoint()}),this.resizeObserver.observe(document.documentElement))}updateBreakpoint(){const t=window.innerWidth;this.currentBreakpoint=t>=n.xxl?"xxl":t>=n.xl?"xl":t>=n.lg?"lg":t>=n.md?"md":t>=n.sm?"sm":"xs"}getGutterValues(){if("number"==typeof this.gutter)return[this.gutter,this.gutter];if(Array.isArray(this.gutter))return this.gutter;const t=[this.currentBreakpoint,"xl","lg","md","sm","xs"];for(const a of t){const t=this.gutter[a];if(void 0!==t)return"number"==typeof t?[t,t]:t}return[0,0]}getRowStyle(){const[t,a]=this.getGutterValues(),s={};return t>0&&(s["margin-left"]=`-${t/2}px`,s["margin-right"]=`-${t/2}px`),a>0&&(s["row-gap"]=`${a}px`),s}getGutterContext(){const[t]=this.getGutterValues();return t}render(){const t=this.getRowStyle(),a=this.getGutterContext();return s`
+      <div
+        class="nr-row"
+        data-align="${this.align}"
+        data-justify="${this.justify}"
+        data-wrap="${this.wrap}"
+        data-theme="${this.currentTheme}"
+        style="${Object.entries(t).map(([t,a])=>`${t}: ${a}`).join("; ")}"
+        data-gutter="${a}"
+      >
+        <slot></slot>
+      </div>
+    `}};f.styles=d,l([e({type:String})],f.prototype,"align",void 0),l([e({type:String})],f.prototype,"justify",void 0),l([e({type:Object})],f.prototype,"gutter",void 0),l([e({type:Boolean})],f.prototype,"wrap",void 0),l([o()],f.prototype,"currentBreakpoint",void 0),f=l([r("nr-row")],f);const p=t`
+  :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%; }
+`
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */;var u=function(t,a,s,e){for(var o,r=arguments.length,i=r<3?a:null===e?e=Object.getOwnPropertyDescriptor(a,s):e,d=t.length-1;d>=0;d--)(o=t[d])&&(i=(r<3?o(i):r>3?o(a,s,i):o(a,s))||i);return r>3&&i&&Object.defineProperty(a,s,i),i};let m=class extends(i(a)){constructor(){super(...arguments),this.offset=0,this.pull=0,this.push=0,this.flex="",this.currentBreakpoint="xs"}connectedCallback(){super.connectedCallback(),this.setupResponsive()}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.resizeObserver)||void 0===t||t.disconnect()}setupResponsive(){this.updateBreakpoint(),this.resizeObserver=new ResizeObserver(()=>{this.updateBreakpoint()}),this.resizeObserver.observe(document.documentElement)}updateBreakpoint(){const t=window.innerWidth;let a;a=t>=n.xxl?"xxl":t>=n.xl?"xl":t>=n.lg?"lg":t>=n.md?"md":t>=n.sm?"sm":"xs",a!==this.currentBreakpoint&&(this.currentBreakpoint=a)}getResponsiveConfig(){const t=[this.currentBreakpoint,"xl","lg","md","sm","xs"];for(const a of t){const t=this[a];if(void 0!==t)return"number"==typeof t?{span:t}:t}return{}}getColProperties(){var t,a,s,e,o;const r=this.getResponsiveConfig();return{span:null!==(t=r.span)&&void 0!==t?t:this.span,offset:null!==(a=r.offset)&&void 0!==a?a:this.offset,order:null!==(s=r.order)&&void 0!==s?s:this.order,pull:null!==(e=r.pull)&&void 0!==e?e:this.pull,push:null!==(o=r.push)&&void 0!==o?o:this.push}}getGutterFromParent(){const t=this.closest("nr-row");if(t){const a=t.getAttribute("data-gutter");return a?Number.parseInt(a,10):0}return 0}getColStyle(){const t={},a=this.getGutterFromParent();return a>0&&(t["padding-left"]=a/2+"px",t["padding-right"]=a/2+"px"),this.flex&&("auto"===this.flex?t.flex="1 1 auto":"none"===this.flex?t.flex="0 0 auto":"number"==typeof this.flex?t.flex=`${this.flex} ${this.flex} auto`:t.flex=this.flex),t}render(){var t;const a=this.getColStyle(),e=this.getColProperties();return this.setAttribute("data-span",(null===(t=e.span)||void 0===t?void 0:t.toString())||""),this.setAttribute("data-offset",e.offset.toString()),void 0!==e.order?this.setAttribute("data-order",e.order.toString()):this.removeAttribute("data-order"),this.setAttribute("data-pull",e.pull.toString()),this.setAttribute("data-push",e.push.toString()),this.setAttribute("data-theme",this.currentTheme),s`
+      <div
+        class="nr-col"
+        style="${Object.entries(a).map(([t,a])=>`${t}: ${a}`).join("; ")}"
+      >
+        <slot></slot>
+      </div>
+    `}};m.styles=p,u([e({type:Number})],m.prototype,"span",void 0),u([e({type:Number})],m.prototype,"offset",void 0),u([e({type:Number})],m.prototype,"order",void 0),u([e({type:Number})],m.prototype,"pull",void 0),u([e({type:Number})],m.prototype,"push",void 0),u([e({type:String})],m.prototype,"flex",void 0),u([e({type:Object})],m.prototype,"xs",void 0),u([e({type:Object})],m.prototype,"sm",void 0),u([e({type:Object})],m.prototype,"md",void 0),u([e({type:Object})],m.prototype,"lg",void 0),u([e({type:Object})],m.prototype,"xl",void 0),u([e({type:Object})],m.prototype,"xxl",void 0),u([o()],m.prototype,"currentBreakpoint",void 0),m=u([r("nr-col")],m);export{n as BREAKPOINTS,h as EMPTY_STRING,m as NrColElement,f as NrRowElement};

package/dist/src/components/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("@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
+ *
+ * @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-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-col': NrColElement;
+    }
+}
+export {};
+//# sourceMappingURL=col.component.d.ts.map