@lazhus/kg-ui 0.5.0 → 0.5.1

package/custom-elements.json

@@ -856,7 +856,7 @@
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :host { display: block; box-sizing: border-box; flex: 0 0 auto; /* Gutter padding */ padding-left: calc(var(--kg-gap, 0px) * 0.5); padding-right: calc(var(--kg-gap, 0px) * 0.5); } `"
+              "default": "css` :host { display: block; box-sizing: border-box; flex: 0 0 auto; } `"
             },
             {
               "kind": "method",
@@ -1947,7 +1947,7 @@
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :host { display: flex; flex-direction: column; width: 100%; box-sizing: border-box; /* Default gap */ --kg-gap: var(--kg-space-md, 1rem); } `"
+              "default": "css` :host { display: flex; flex-direction: column; width: 100%; box-sizing: border-box; gap: var(--kg-space-md, 1rem); } `"
             },
             {
               "kind": "method",
@@ -3023,13 +3023,13 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ justify: { type: String, reflect: true }, align: { type: String, reflect: true }, color: { type: String, reflect: true } }"
+              "default": "{ justify: { type: String, reflect: true }, align: { type: String, reflect: true }, color: { type: String, reflect: true }, gap: { type: String, reflect: true }, }"
             },
             {
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :host { display: flex; flex-wrap: wrap; box-sizing: border-box; width: calc(100% + var(--kg-gap, 0px)); margin-left: calc(var(--kg-gap, 0px) * -0.5); margin-right: calc(var(--kg-gap, 0px) * -0.5); row-gap: var(--kg-gap, 0px); } /* Justify (Horizontal) */ :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; } /* Align (Vertical) */ :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; } `"
+              "default": "css` :host { display: flex; flex-wrap: wrap; box-sizing: border-box; width: 100%; --kg-gap: var(--kg-space-md, 1rem); /* Default gap variable */ gap: var(--kg-gap); } /* Justify (Horizontal) */ :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; } /* Align (Vertical) */ :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; } `"
             },
             {
               "kind": "method",

package/dist/components/kg-column.js

@@ -1,29 +1,25 @@
-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 l}from"lit";class i extends o{render(){const e=[];this.color&&e.push(`background-color: ${this.color};`);const t=this.sm||12,o=this.md||t,r=this.lg||o;return l`
+var e=Object.defineProperty,t=(t,o,l)=>((t,o,l)=>o in t?e(t,o,{enumerable:!0,configurable:!0,writable:!0,value:l}):t[o]=l)(t,"symbol"!=typeof o?o+"":o,l);import{LitElement as o,css as l,html as r}from"lit";class s extends o{render(){const e=[];this.color&&e.push(`background-color: ${this.color};`);const t=this.sm||12,o=this.md||t,l=this.lg||o;return r`
       <style>
         :host { ${e.join(" ")} }
         
         /* Mobile / Default (< 768px) */
-        :host { width: ${t/12*100}%; }
+        :host { width: calc(${t/12*100}% - ((1 - ${t/12}) * var(--kg-gap, 0px))); }
 
         /* Tablet (768px - 1024px) */
         @media (min-width: 768px) {
-            :host { width: ${o/12*100}%; }
+            :host { width: calc(${o/12*100}% - ((1 - ${o/12}) * var(--kg-gap, 0px))); }
         }
 
         /* Desktop (> 1024px) */
         @media (min-width: 1024px) {
-            :host { width: ${r/12*100}%; }
+            :host { width: calc(${l/12*100}% - ((1 - ${l/12}) * var(--kg-gap, 0px))); }
         }
       </style>
       <slot></slot>
-    `}}t(i,"properties",{lg:{type:Number,reflect:!0},md:{type:Number,reflect:!0},sm:{type:Number,reflect:!0},color:{type:String,reflect:!0}}),t(i,"styles",r`
+    `}}t(s,"properties",{lg:{type:Number,reflect:!0},md:{type:Number,reflect:!0},sm:{type:Number,reflect:!0},color:{type:String,reflect:!0}}),t(s,"styles",l`
     :host {
       display: block;
       box-sizing: border-box;
       flex: 0 0 auto;
-      
-      /* Gutter padding */
-      padding-left: calc(var(--kg-gap, 0px) * 0.5);
-      padding-right: calc(var(--kg-gap, 0px) * 0.5);
     }
-  `),customElements.define("kg-column",i);export{i as kgcolumn};
+  `),customElements.define("kg-column",s);export{s as kgcolumn};

package/dist/components/kg-grid.js

@@ -1,4 +1,4 @@
-var e=Object.defineProperty,t=(t,r,o)=>((t,r,o)=>r in t?e(t,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[r]=o)(t,"symbol"!=typeof r?r+"":r,o);import{LitElement as r,css as o,html as s}from"lit";class l extends r{render(){const e=[];return this.gap&&(e.push(`--kg-gap: ${this.gap};`),e.push(`gap: ${this.gap};`)),this.color&&e.push(`background-color: ${this.color};`),s`
+var e=Object.defineProperty,t=(t,r,o)=>((t,r,o)=>r in t?e(t,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[r]=o)(t,"symbol"!=typeof r?r+"":r,o);import{LitElement as r,css as o,html as s}from"lit";class l extends r{render(){const e=[];return this.gap&&e.push(`gap: ${this.gap};`),this.color&&e.push(`background-color: ${this.color};`),s`
       <style>
         :host { ${e.join(" ")} }
       </style>
@@ -9,7 +9,6 @@ var e=Object.defineProperty,t=(t,r,o)=>((t,r,o)=>r in t?e(t,r,{enumerable:!0,con
       flex-direction: column;
       width: 100%;
       box-sizing: border-box;
-      /* Default gap */
-      --kg-gap: var(--kg-space-md, 1rem); 
+      gap: var(--kg-space-md, 1rem);
     }
   `),customElements.define("kg-grid",l);export{l as kggrid};

package/dist/components/kg-row.js

@@ -1,17 +1,16 @@
-var t=Object.defineProperty,e=(e,s,n)=>((e,s,n)=>s in e?t(e,s,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[s]=n)(e,"symbol"!=typeof s?s+"":s,n);import{LitElement as s,css as n,html as i}from"lit";class r extends s{render(){const t=[];return this.color&&t.push(`background-color: ${this.color};`),i`
+var t=Object.defineProperty,e=(e,s,i)=>((e,s,i)=>s in e?t(e,s,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[s]=i)(e,"symbol"!=typeof s?s+"":s,i);import{LitElement as s,css as i,html as n}from"lit";class a extends s{render(){const t=[];return this.color&&t.push(`background-color: ${this.color};`),this.gap&&(t.push(`gap: ${this.gap};`),t.push(`--kg-gap: ${this.gap};`)),n`
       <style>
         :host { ${t.join(" ")} }
       </style>
       <slot></slot>
-    `}}e(r,"properties",{justify:{type:String,reflect:!0},align:{type:String,reflect:!0},color:{type:String,reflect:!0}}),e(r,"styles",n`
+    `}}e(a,"properties",{justify:{type:String,reflect:!0},align:{type:String,reflect:!0},color:{type:String,reflect:!0},gap:{type:String,reflect:!0}}),e(a,"styles",i`
     :host {
       display: flex;
       flex-wrap: wrap;
       box-sizing: border-box;
-      width: calc(100% + var(--kg-gap, 0px));
-      margin-left: calc(var(--kg-gap, 0px) * -0.5);
-      margin-right: calc(var(--kg-gap, 0px) * -0.5);
-      row-gap: var(--kg-gap, 0px);
+      width: 100%;
+      --kg-gap: var(--kg-space-md, 1rem); /* Default gap variable */
+      gap: var(--kg-gap);
     }
 
     /* Justify (Horizontal) */
@@ -28,4 +27,4 @@ var t=Object.defineProperty,e=(e,s,n)=>((e,s,n)=>s in e?t(e,s,{enumerable:!0,con
     :host([align="end"]) { align-items: flex-end; }
     :host([align="stretch"]) { align-items: stretch; }
     :host([align="baseline"]) { align-items: baseline; }
-  `),customElements.define("kg-row",r);export{r as kgrow};
+  `),customElements.define("kg-row",a);export{a as kgrow};

package/package.json

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