@reliability-design/web 1.0.2

package/dist/components/rel-layout/rel-layout.ts

@@ -0,0 +1,60 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("rel-layout")
+export class RelLayout extends LitElement {
+  @property({ type: String }) gap: string = "1rem";
+
+  @property({ type: Number }) columns: number = 4;
+
+  @property({ type: Boolean }) responsive: boolean = true;
+
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    .layout-grid {
+      display: grid;
+      width: 100%;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    /* Responsive breakpoints - only applied when responsive is true */
+    :host([responsive]) .layout-grid {
+      /* Default: use columns property */
+    }
+
+    @media (max-width: 1024px) {
+      :host([responsive]) .layout-grid {
+        grid-template-columns: repeat(3, 1fr) !important;
+      }
+    }
+
+    @media (max-width: 768px) {
+      :host([responsive]) .layout-grid {
+        grid-template-columns: repeat(2, 1fr) !important;
+      }
+    }
+
+    @media (max-width: 480px) {
+      :host([responsive]) .layout-grid {
+        grid-template-columns: 1fr !important;
+      }
+    }
+  `;
+
+  render() {
+    const gridStyle = `
+      gap: ${this.gap};
+      grid-template-columns: repeat(${this.columns}, 1fr);
+    `;
+
+    return html`
+      <div class="layout-grid" style="${gridStyle}">
+        <slot></slot>
+      </div>
+    `;
+  }
+}