@lazhus/kg-ui 0.4.15 → 0.4.16

package/README.md

@@ -127,7 +127,7 @@ document.documentElement.setAttribute('data-theme', 'dark');
 - `kg-file-upload`
 
 ### Layout & Structure
-- `kg-grid` / `kg-row` / `kg-column` - Grid system
+- `kg-grid` / `kg-row` / `kg-column` - Grid system (w/ Gap & Align)
 - `kg-accordion` - Collapsible sections
 - `kg-modal` - Modal dialog
 - `kg-drawer` - Side panel

package/custom-elements.json

@@ -1909,7 +1909,7 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ container: { type: Boolean, reflect: true }, padded: { type: Boolean, reflect: true }, relaxed: { type: Boolean, reflect: true }, doubling: { type: Boolean, reflect: true }, stackable: { type: Boolean, reflect: true } }"
+              "default": "{ container: { type: Boolean, reflect: true }, padded: { type: Boolean, reflect: true }, relaxed: { type: Boolean, reflect: true }, doubling: { type: Boolean, reflect: true }, stackable: { type: Boolean, reflect: true }, gap: { type: String, reflect: true } }"
             },
             {
               "kind": "field",
@@ -1917,9 +1917,61 @@
               "static": true,
               "default": "css` :host { display: block; width: 100%; box-sizing: border-box; } :host([container]) { max-width: 1200px; margin: 0 auto; padding-left: var(--kg-space-md); padding-right: var(--kg-space-md); } .ui-grid { display: flex; flex-direction: column; width: 100%; } :host([padded]) { padding: var(--kg-space-md) 0; } `"
             },
+            {
+              "kind": "method",
+              "name": "getGapValue"
+            },
             {
               "kind": "method",
               "name": "render"
+            },
+            {
+              "type": {
+                "text": "Boolean"
+              },
+              "description": "Container mode",
+              "name": "container",
+              "kind": "field"
+            },
+            {
+              "type": {
+                "text": "Boolean"
+              },
+              "description": "Adds padding",
+              "name": "padded",
+              "kind": "field"
+            },
+            {
+              "type": {
+                "text": "Boolean"
+              },
+              "description": "Relaxed spacing",
+              "name": "relaxed",
+              "kind": "field"
+            },
+            {
+              "type": {
+                "text": "Boolean"
+              },
+              "description": "Doubling behavior",
+              "name": "doubling",
+              "kind": "field"
+            },
+            {
+              "type": {
+                "text": "Boolean"
+              },
+              "description": "Stackable behavior",
+              "name": "stackable",
+              "kind": "field"
+            },
+            {
+              "type": {
+                "text": "String"
+              },
+              "description": "Gap size (xs, sm, md, lg, xl) or valid CSS value",
+              "name": "gap",
+              "kind": "field"
             }
           ],
           "superclass": {
@@ -2975,17 +3027,57 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ columns: { type: Number, reflect: true }, stretched: { type: Boolean, reflect: true }, centered: { type: Boolean, reflect: true }, justify: { type: String, reflect: true } }"
+              "default": "{ columns: { type: Number, reflect: true }, stretched: { type: Boolean, reflect: true }, centered: { type: Boolean, reflect: true }, justify: { type: String, reflect: true }, align: { type: String, reflect: true } }"
             },
             {
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :host { display: flex; flex-wrap: wrap; margin: 0 calc(var(--kg-space-md) * -1); box-sizing: border-box; } :host([centered]) { justify-content: center; } :host([justify=\"space-between\"]) { justify-content: space-between; } :host([justify=\"end\"]) { justify-content: flex-end; } :host([stretched]) { align-items: stretch; } /* Handle nesting if needed */ ::slotted(kg-column) { padding: var(--kg-space-md); } `"
+              "default": "css` :host { display: flex; flex-wrap: wrap; margin: 0 calc(var(--kg-space-md) * -1); box-sizing: border-box; } :host([centered]) { justify-content: center; } :host([justify=\"start\"]) { justify-content: flex-start; } :host([justify=\"center\"]) { justify-content: center; } :host([justify=\"end\"]) { justify-content: flex-end; } :host([justify=\"space-between\"]) { justify-content: space-between; } :host([justify=\"space-around\"]) { justify-content: space-around; } :host([justify=\"space-evenly\"]) { justify-content: space-evenly; } :host([align=\"start\"]) { align-items: flex-start; } :host([align=\"center\"]) { align-items: center; } :host([align=\"end\"]) { align-items: flex-end; } :host([align=\"stretch\"]) { align-items: stretch; } :host([align=\"baseline\"]) { align-items: baseline; } :host([stretched]) { align-items: stretch; } /* Handle nesting if needed */ ::slotted(kg-column) { padding: var(--kg-space-md); } `"
             },
             {
               "kind": "method",
               "name": "render"
+            },
+            {
+              "type": {
+                "text": "Number"
+              },
+              "description": "Number of columns",
+              "name": "columns",
+              "kind": "field"
+            },
+            {
+              "type": {
+                "text": "Boolean"
+              },
+              "description": "Stretch content",
+              "name": "stretched",
+              "kind": "field"
+            },
+            {
+              "type": {
+                "text": "Boolean"
+              },
+              "description": "Center content horizontally",
+              "name": "centered",
+              "kind": "field"
+            },
+            {
+              "type": {
+                "text": "String"
+              },
+              "description": "Justify content (start, center, end, space-between, space-around, space-evenly)",
+              "name": "justify",
+              "kind": "field"
+            },
+            {
+              "type": {
+                "text": "String"
+              },
+              "description": "Align items vertically (start, center, end, stretch, baseline)",
+              "name": "align",
+              "kind": "field"
             }
           ],
           "superclass": {

package/dist/components/kg-grid.js

@@ -1,8 +1,8 @@
-var e=Object.defineProperty,t=(t,o,r)=>((t,o,r)=>o in t?e(t,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[o]=r)(t,"symbol"!=typeof o?o+"":o,r);import{LitElement as o,css as r,html as a}from"lit";class d extends o{render(){return a`
-      <div class="ui-grid">
+var e=Object.defineProperty,a=(a,t,r)=>((a,t,r)=>t in a?e(a,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):a[t]=r)(a,"symbol"!=typeof t?t+"":t,r);import{LitElement as t,css as r,html as l}from"lit";class s extends t{getGapValue(){return this.gap?{xs:"var(--kg-space-xs)",sm:"var(--kg-space-sm)",md:"var(--kg-space-md)",lg:"var(--kg-space-lg)",xl:"var(--kg-space-xl)"}[this.gap]||this.gap:""}render(){const e=this.gap?`gap: ${this.getGapValue()};`:"";return l`
+      <div class="ui-grid" style="${e}">
         <slot></slot>
       </div>
-    `}}t(d,"properties",{container:{type:Boolean,reflect:!0},padded:{type:Boolean,reflect:!0},relaxed:{type:Boolean,reflect:!0},doubling:{type:Boolean,reflect:!0},stackable:{type:Boolean,reflect:!0}}),t(d,"styles",r`
+    `}}a(s,"properties",{container:{type:Boolean,reflect:!0},padded:{type:Boolean,reflect:!0},relaxed:{type:Boolean,reflect:!0},doubling:{type:Boolean,reflect:!0},stackable:{type:Boolean,reflect:!0},gap:{type:String,reflect:!0}}),a(s,"styles",r`
     :host {
       display: block;
       width: 100%;
@@ -25,4 +25,4 @@ var e=Object.defineProperty,t=(t,o,r)=>((t,o,r)=>o in t?e(t,o,{enumerable:!0,con
     :host([padded]) {
       padding: var(--kg-space-md) 0;
     }
-  `),customElements.define("kg-grid",d);export{d as kggrid};
+  `),customElements.define("kg-grid",s);export{s as kggrid};

package/dist/components/kg-row.js

@@ -1,4 +1,4 @@
-var e=Object.defineProperty,t=(t,n,r)=>((t,n,r)=>n in t?e(t,n,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[n]=r)(t,"symbol"!=typeof n?n+"":n,r);import{LitElement as n,css as r,html as s}from"lit";class o extends n{render(){return s`<slot></slot>`}}t(o,"properties",{columns:{type:Number,reflect:!0},stretched:{type:Boolean,reflect:!0},centered:{type:Boolean,reflect:!0},justify:{type:String,reflect:!0}}),t(o,"styles",r`
+var e=Object.defineProperty,t=(t,s,n)=>((t,s,n)=>s in t?e(t,s,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[s]=n)(t,"symbol"!=typeof s?s+"":s,n);import{LitElement as s,css as n,html as i}from"lit";class r extends s{render(){return i`<slot></slot>`}}t(r,"properties",{columns:{type:Number,reflect:!0},stretched:{type:Boolean,reflect:!0},centered:{type:Boolean,reflect:!0},justify:{type:String,reflect:!0},align:{type:String,reflect:!0}}),t(r,"styles",n`
     :host {
       display: flex;
       flex-wrap: wrap;
@@ -10,8 +10,18 @@ var e=Object.defineProperty,t=(t,n,r)=>((t,n,r)=>n in t?e(t,n,{enumerable:!0,con
       justify-content: center;
     }
 
-    :host([justify="space-between"]) { justify-content: space-between; }
+    :host([justify="start"]) { justify-content: flex-start; }
+    :host([justify="center"]) { justify-content: center; }
     :host([justify="end"]) { justify-content: flex-end; }
+    :host([justify="space-between"]) { justify-content: space-between; }
+    :host([justify="space-around"]) { justify-content: space-around; }
+    :host([justify="space-evenly"]) { justify-content: space-evenly; }
+
+    :host([align="start"]) { align-items: flex-start; }
+    :host([align="center"]) { align-items: center; }
+    :host([align="end"]) { align-items: flex-end; }
+    :host([align="stretch"]) { align-items: stretch; }
+    :host([align="baseline"]) { align-items: baseline; }
 
     :host([stretched]) {
       align-items: stretch;
@@ -21,4 +31,4 @@ var e=Object.defineProperty,t=(t,n,r)=>((t,n,r)=>n in t?e(t,n,{enumerable:!0,con
     ::slotted(kg-column) {
       padding: var(--kg-space-md);
     }
-  `),customElements.define("kg-row",o);export{o as kgrow};
+  `),customElements.define("kg-row",r);export{r as kgrow};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lazhus/kg-ui",
-  "version": "0.4.15",
+  "version": "0.4.16",
   "type": "module",
   "files": [
     "dist",

package/types/components/kg-grid.d.ts

@@ -2,6 +2,18 @@ import { LitElement } from 'lit';
 
 /** @customElement kg-grid */
 export class kggrid extends LitElement {
+  /** Container mode */
+  container: boolean;
+  /** Adds padding */
+  padded: boolean;
+  /** Relaxed spacing */
+  relaxed: boolean;
+  /** Doubling behavior */
+  doubling: boolean;
+  /** Stackable behavior */
+  stackable: boolean;
+  /** Gap size (xs, sm, md, lg, xl) or valid CSS value */
+  gap: string;
 }
 
 declare global {
@@ -12,7 +24,12 @@ declare global {
   namespace JSX {
     interface IntrinsicElements {
       'kg-grid': {
-
+      container?: boolean;
+      padded?: boolean;
+      relaxed?: boolean;
+      doubling?: boolean;
+      stackable?: boolean;
+      gap?: string;
         [key: string]: any;
       };
     }

package/types/components/kg-row.d.ts

@@ -2,6 +2,16 @@ import { LitElement } from 'lit';
 
 /** @customElement kg-row */
 export class kgrow extends LitElement {
+  /** Number of columns */
+  columns: number;
+  /** Stretch content */
+  stretched: boolean;
+  /** Center content horizontally */
+  centered: boolean;
+  /** Justify content (start, center, end, space-between, space-around, space-evenly) */
+  justify: string;
+  /** Align items vertically (start, center, end, stretch, baseline) */
+  align: string;
 }
 
 declare global {
@@ -12,7 +22,11 @@ declare global {
   namespace JSX {
     interface IntrinsicElements {
       'kg-row': {
-
+      columns?: number;
+      stretched?: boolean;
+      centered?: boolean;
+      justify?: string;
+      align?: string;
         [key: string]: any;
       };
     }

package/types/index.d.ts

@@ -198,7 +198,12 @@ declare global {
       [key: string]: any;
     };
     'kg-grid': {
-
+      container?: boolean;
+      padded?: boolean;
+      relaxed?: boolean;
+      doubling?: boolean;
+      stackable?: boolean;
+      gap?: string;
       [key: string]: any;
     };
     'kg-image': {
@@ -270,7 +275,11 @@ declare global {
       [key: string]: any;
     };
     'kg-row': {
-
+      columns?: number;
+      stretched?: boolean;
+      centered?: boolean;
+      justify?: string;
+      align?: string;
       [key: string]: any;
     };
     'kg-select': {