@sondor-technology/sondor-components 1.0.1-develop.13 → 1.0.1-develop.14

package/src/components/grid/grid-row.ts

@@ -1,14 +1,14 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
+import {LitElement, html, css, PropertyValues} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
 
-@customElement('st-grid-row')
+@customElement("st-grid-row")
 export class StGridRow extends LitElement {
-  @property({ type: Number }) xs = 1;
-  @property({ type: Number }) sm?: number;
-  @property({ type: Number }) md?: number;
-  @property({ type: Number }) lg?: number;
-  @property({ type: Number }) xl?: number;
+  @property({type: Number}) xs = 1;
+  @property({type: Number}) sm?: number;
+  @property({type: Number}) md?: number;
+  @property({type: Number}) lg?: number;
+  @property({type: Number}) xl?: number;
 
   static styles = [
     resetStyles,
@@ -22,46 +22,59 @@ export class StGridRow extends LitElement {
       }
 
       /* Mobile First (xs) */
-      :host { --_cols: var(--grid-xs, 1); }
+      :host {
+        --_cols: var(--grid-xs, 1);
+      }
 
       /* Small (sm: >= 640px) */
       @media (min-width: 640px) {
-        :host { --_cols: var(--grid-sm, var(--grid-xs, 1)); }
+        :host {
+          --_cols: var(--grid-sm, var(--grid-xs, 1));
+        }
       }
-      
+
       /* Medium (md: >= 768px) */
       @media (min-width: 768px) {
-        :host { --_cols: var(--grid-md, var(--grid-sm, var(--grid-xs, 1))); }
+        :host {
+          --_cols: var(--grid-md, var(--grid-sm, var(--grid-xs, 1)));
+        }
       }
-      
+
       /* Large (lg: >= 1024px) */
       @media (min-width: 1024px) {
-        :host { --_cols: var(--grid-lg, var(--grid-md, var(--grid-sm, var(--grid-xs, 1)))); }
+        :host {
+          --_cols: var(--grid-lg, var(--grid-md, var(--grid-sm, var(--grid-xs, 1))));
+        }
       }
-      
+
       /* Extra Large (xl: >= 1280px) */
       @media (min-width: 1280px) {
-        :host { --_cols: var(--grid-xl, var(--grid-lg, var(--grid-md, var(--grid-sm, var(--grid-xs, 1))))); }
+        :host {
+          --_cols: var(
+            --grid-xl,
+            var(--grid-lg, var(--grid-md, var(--grid-sm, var(--grid-xs, 1))))
+          );
+        }
       }
-    `
+    `,
   ];
 
-  updated(changedProperties: Map<string, any>) {
+  updated(changedProperties: PropertyValues<this>) {
     super.updated(changedProperties);
-    
-    this.style.setProperty('--grid-xs', this.xs.toString());
-    
-    if (this.sm !== undefined) this.style.setProperty('--grid-sm', this.sm.toString());
-    else this.style.removeProperty('--grid-sm');
 
-    if (this.md !== undefined) this.style.setProperty('--grid-md', this.md.toString());
-    else this.style.removeProperty('--grid-md');
+    this.style.setProperty("--grid-xs", this.xs.toString());
+
+    if (this.sm !== undefined) this.style.setProperty("--grid-sm", this.sm.toString());
+    else this.style.removeProperty("--grid-sm");
 
-    if (this.lg !== undefined) this.style.setProperty('--grid-lg', this.lg.toString());
-    else this.style.removeProperty('--grid-lg');
+    if (this.md !== undefined) this.style.setProperty("--grid-md", this.md.toString());
+    else this.style.removeProperty("--grid-md");
 
-    if (this.xl !== undefined) this.style.setProperty('--grid-xl', this.xl.toString());
-    else this.style.removeProperty('--grid-xl');
+    if (this.lg !== undefined) this.style.setProperty("--grid-lg", this.lg.toString());
+    else this.style.removeProperty("--grid-lg");
+
+    if (this.xl !== undefined) this.style.setProperty("--grid-xl", this.xl.toString());
+    else this.style.removeProperty("--grid-xl");
   }
 
   render() {
@@ -71,6 +84,6 @@ export class StGridRow extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'st-grid-row': StGridRow;
+    "st-grid-row": StGridRow;
   }
-}
+}

package/src/components/grid/grid.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css, PropertyValues } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { resetStyles } from '../../styles/reset.js';
 
@@ -19,10 +19,13 @@ export class StGrid extends LitElement {
     `
   ];
 
-  updated(changedProperties: Map<string, any>) {
+  updated(changedProperties: PropertyValues<this>) {
     super.updated(changedProperties);
-    // This CSS variable will automatically cascade down the DOM tree
-    this.style.setProperty('--grid-gap', this.gap);
+    
+    // Performance optimization: Only touch the DOM if the gap property actually changed
+    if (changedProperties.has('gap')) {
+      this.style.setProperty('--grid-gap', this.gap);
+    }
   }
 
   render() {