@codesense/relayout 0.0.25 → 0.1.3

package/LICENSE

@@ -1,21 +1,21 @@
-The MIT License (MIT)
-
-Copyright (c) 2025 Lucian Pacurar
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+The MIT License (MIT)
+
+Copyright (c) 2025 Lucian Pacurar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.

package/README.md

@@ -1,14 +1,14 @@
-<p align="center">
-    <p align="center">
-        Relayout
-    </p>
-    <p align="center">
-        Responsive layout system
-    </p>
-</p>
-
----
-
-## Documentation
-
-coming soon
+<p align="center">
+    <p align="center">
+        Relayout
+    </p>
+    <p align="center">
+        Responsive layout system
+    </p>
+</p>
+
+---
+
+## Documentation
+
+coming soon

package/dist/css/relayout.css

@@ -1,5 +1,5 @@
 /*!
- * Relayout v0.0.24 | Responsive layout system
+ * Relayout v0.1.3 | Responsive layout system
  * Copyright (c) 2025 Lucian Pacurar
  * MIT License: https://github.com/codesensedev/relayout/blob/main/LICENSE 
  */:root{--rl-space-0: 0;--rl-space-xs: 0.125rem;--rl-space-s: 0.25rem;--rl-space-m: 0.5rem;--rl-space-l: 1rem;--rl-space-xl: 1.5rem;--rl-space-2xl: 2.25rem;--rl-width-xs: 20rem;--rl-width-s: 30rem;--rl-width-m: 40rem;--rl-width-l: 48rem;--rl-width-xl: 64rem;--rl-width-2xl: 80rem;--rl-grid-xs: 3.125rem;--rl-grid-s: 6.25rem;--rl-grid-m: 9.375rem;--rl-grid-l: 12.5rem;--rl-grid-xl: 15.625rem;--rl-grid-2xl: 20rem;--rl-font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;--rl-font-serif: Georgia, 'Times New Roman', Times, serif;--rl-font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;--rl-font-sans-alt: var(--rl-font-sans);--rl-font-serif-alt: var(--rl-font-serif);--rl-font-mono-alt: var(--rl-font-mono);--rl-text-xs: 0.625rem;--rl-text-s: 0.75rem;--rl-text-m: 0.875rem;--rl-text-l: 1rem;--rl-text-xl: 1.5rem;--rl-text-2xl: 2.25rem;--rl-gap-default: var(--rl-space-0);--rl-padding-default: var(--rl-space-0);--rl-radius-default: var(--rl-space-0);--rl-border-default: solid 1px hsl(0, 0%, 50%);--rl-color-primary: hsl(215, 80%, 45%);--rl-color-secondary: hsl(260, 50%, 50%);--rl-color-accent: hsl(30, 90%, 50%);--rl-color-success: hsl(142, 60%, 35%);--rl-color-warning: hsl(38, 95%, 45%);--rl-color-danger: hsl(0, 70%, 50%);--rl-color-info: hsl(200, 75%, 45%);--rl-color-surface: hsl(0, 0%, 100%);--rl-color-surface-alt: hsl(0, 0%, 96%);--rl-color-text: hsl(0, 0%, 10%);--rl-color-text-muted: hsl(0, 0%, 45%);--rl-shadow-xs: 0 1px 2px hsl(0 0% 0% / 0.08);--rl-shadow-s: 0 1px 4px hsl(0 0% 0% / 0.12);--rl-shadow-m: 0 2px 8px hsl(0 0% 0% / 0.16);--rl-shadow-l: 0 4px 16px hsl(0 0% 0% / 0.20);--rl-shadow-xl: 0 8px 32px hsl(0 0% 0% / 0.24);--rl-shadow-inner: inset 0 1px 3px hsl(0 0% 0% / 0.12);--rl-gradient-primary: linear-gradient(135deg, var(--rl-color-primary), var(--rl-color-secondary));--rl-gradient-accent: linear-gradient(135deg, var(--rl-color-accent), var(--rl-color-primary));--rl-gradient-subtle: linear-gradient(180deg, var(--rl-color-surface), var(--rl-color-surface-alt));--rl-gradient-warm: linear-gradient(135deg, hsl(30, 90%, 55%), hsl(0, 75%, 55%));--rl-gradient-cool: linear-gradient(135deg, hsl(200, 80%, 50%), hsl(260, 60%, 55%))}@media(prefers-color-scheme: dark){:root{--rl-color-primary: hsl(215, 85%, 65%);--rl-color-secondary: hsl(260, 60%, 70%);--rl-color-accent: hsl(30, 90%, 60%);--rl-color-success: hsl(142, 60%, 50%);--rl-color-warning: hsl(38, 95%, 60%);--rl-color-danger: hsl(0, 75%, 65%);--rl-color-info: hsl(200, 80%, 60%);--rl-color-surface: hsl(0, 0%, 12%);--rl-color-surface-alt: hsl(0, 0%, 18%);--rl-color-text: hsl(0, 0%, 95%);--rl-color-text-muted: hsl(0, 0%, 65%)}}[class*=rl-]{box-sizing:border-box;outline:none}.rl-stack{display:flex;flex-direction:column;align-items:stretch;justify-content:start;gap:var(--rl-gap-default)}.rl-stack.rl-align-start{text-align:start}.rl-stack.rl-align-center{text-align:center}.rl-stack.rl-align-end{text-align:end}.rl-flank{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:var(--rl-gap-default)}.rl-flank>:last-child{flex-basis:0;flex-grow:999}.rl-flank-end>:first-child{flex-basis:0;flex-grow:999}.rl-flank-end>:last-child{flex-basis:auto;flex-grow:0}.rl-split{display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--rl-gap-default)}.rl-split-equal>*{flex:1 1 0;min-width:0}.rl-cluster{display:flex;flex-direction:row;align-items:center;justify-content:start;flex-wrap:wrap;gap:var(--rl-gap-default)}.rl-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(var(--rl-grid-s), 1fr));gap:var(--rl-gap-default)}.rl-grid-fit-xs{grid-template-columns:repeat(auto-fit, minmax(var(--rl-grid-xs), 1fr))}.rl-grid-fit-s{grid-template-columns:repeat(auto-fit, minmax(var(--rl-grid-s), 1fr))}.rl-grid-fit-m{grid-template-columns:repeat(auto-fit, minmax(var(--rl-grid-m), 1fr))}.rl-grid-fit-l{grid-template-columns:repeat(auto-fit, minmax(var(--rl-grid-l), 1fr))}.rl-grid-fit-xl{grid-template-columns:repeat(auto-fit, minmax(var(--rl-grid-xl), 1fr))}.rl-grid-fit-2xl{grid-template-columns:repeat(auto-fit, minmax(var(--rl-grid-2xl), 1fr))}.rl-grid-fill-xs{grid-template-columns:repeat(auto-fill, minmax(var(--rl-grid-xs), 1fr))}.rl-grid-fill-s{grid-template-columns:repeat(auto-fill, minmax(var(--rl-grid-s), 1fr))}.rl-grid-fill-m{grid-template-columns:repeat(auto-fill, minmax(var(--rl-grid-m), 1fr))}.rl-grid-fill-l{grid-template-columns:repeat(auto-fill, minmax(var(--rl-grid-l), 1fr))}.rl-grid-fill-xl{grid-template-columns:repeat(auto-fill, minmax(var(--rl-grid-xl), 1fr))}.rl-grid-fill-2xl{grid-template-columns:repeat(auto-fill, minmax(var(--rl-grid-2xl), 1fr))}.rl-frame{display:flex;align-items:center;justify-content:space-around;width:100%;height:100%;overflow:visible}.rl-frame>*{max-width:100%;max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch}.rl-frame>img{display:block;width:auto;height:auto;object-fit:contain}.rl-divider{align-self:stretch;border:none;margin:0;width:100%;height:0;border-top:var(--rl-border-default)}.rl-divider.vertical{width:0;height:100%;border-left:var(--rl-border-default)}.rl-gap-0{gap:var(--rl-space-0)}.rl-gap-xs{gap:var(--rl-space-xs)}.rl-gap-s{gap:var(--rl-space-s)}.rl-gap-m{gap:var(--rl-space-m)}.rl-gap-l{gap:var(--rl-space-l)}.rl-gap-xl{gap:var(--rl-space-xl)}.rl-gap-2xl{gap:var(--rl-space-2xl)}.rl-gradient-primary{background-image:var(--rl-gradient-primary)}.rl-gradient-accent{background-image:var(--rl-gradient-accent)}.rl-gradient-subtle{background-image:var(--rl-gradient-subtle)}.rl-gradient-warm{background-image:var(--rl-gradient-warm)}.rl-gradient-cool{background-image:var(--rl-gradient-cool)}.rl-padding-0{padding:var(--rl-space-0)}.rl-padding-xs{padding:var(--rl-space-xs)}.rl-padding-s{padding:var(--rl-space-s)}.rl-padding-m{padding:var(--rl-space-m)}.rl-padding-l{padding:var(--rl-space-l)}.rl-padding-xl{padding:var(--rl-space-xl)}.rl-padding-2xl{padding:var(--rl-space-2xl)}.rl-align-start{align-items:start}.rl-align-center{align-items:center}.rl-align-end{align-items:end}.rl-align-stretch{align-items:stretch}.rl-justify-start{justify-content:start}.rl-justify-center{justify-content:center}.rl-justify-end{justify-content:end}.rl-width-xs{max-width:var(--rl-width-xs);margin:0 auto;width:100%}.rl-width-s{max-width:var(--rl-width-s);margin:0 auto;width:100%}.rl-width-m{max-width:var(--rl-width-m);margin:0 auto;width:100%}.rl-width-l{max-width:var(--rl-width-l);margin:0 auto;width:100%}.rl-width-xl{max-width:var(--rl-width-xl);margin:0 auto;width:100%}.rl-width-2xl{max-width:var(--rl-width-2xl);margin:0 auto;width:100%}.rl-height-full{height:100%;overflow-y:auto}.rl-height-fill{flex:1 1 0;min-height:0;height:auto;overflow-y:auto}.rl-border{border:var(--rl-border-default);border-radius:var(--rl-radius-default)}.rl-bg-primary{background-color:var(--rl-color-primary)}.rl-bg-secondary{background-color:var(--rl-color-secondary)}.rl-bg-accent{background-color:var(--rl-color-accent)}.rl-bg-success{background-color:var(--rl-color-success)}.rl-bg-warning{background-color:var(--rl-color-warning)}.rl-bg-danger{background-color:var(--rl-color-danger)}.rl-bg-info{background-color:var(--rl-color-info)}.rl-bg-surface{background-color:var(--rl-color-surface)}.rl-bg-surface-alt{background-color:var(--rl-color-surface-alt)}.rl-color-primary{color:var(--rl-color-primary)}.rl-color-secondary{color:var(--rl-color-secondary)}.rl-color-accent{color:var(--rl-color-accent)}.rl-color-success{color:var(--rl-color-success)}.rl-color-warning{color:var(--rl-color-warning)}.rl-color-danger{color:var(--rl-color-danger)}.rl-color-info{color:var(--rl-color-info)}.rl-color-text{color:var(--rl-color-text)}.rl-color-text-muted{color:var(--rl-color-text-muted)}.rl-radius-0{border-radius:var(--rl-space-0)}.rl-radius-xs{border-radius:var(--rl-space-xs)}.rl-radius-s{border-radius:var(--rl-space-s)}.rl-radius-m{border-radius:var(--rl-space-m)}.rl-radius-l{border-radius:var(--rl-space-l)}.rl-radius-xl{border-radius:var(--rl-space-xl)}.rl-radius-2xl{border-radius:var(--rl-space-2xl)}.rl-shadow-xs{box-shadow:var(--rl-shadow-xs)}.rl-shadow-s{box-shadow:var(--rl-shadow-s)}.rl-shadow-m{box-shadow:var(--rl-shadow-m)}.rl-shadow-l{box-shadow:var(--rl-shadow-l)}.rl-shadow-xl{box-shadow:var(--rl-shadow-xl)}.rl-shadow-none{box-shadow:none}.rl-shadow-inner{box-shadow:var(--rl-shadow-inner)}.rl-nowrap{flex-wrap:nowrap}.rl-nowrap-scroll{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}.rl-nowrap-scroll>*{flex:0 0 auto}.rl-wrap-reverse{flex-wrap:wrap-reverse}.rl-font-sans{font-family:var(--rl-font-sans)}.rl-font-serif{font-family:var(--rl-font-serif)}.rl-font-mono{font-family:var(--rl-font-mono)}.rl-font-sans-alt{font-family:var(--rl-font-sans-alt)}.rl-font-serif-alt{font-family:var(--rl-font-serif-alt)}.rl-font-mono-alt{font-family:var(--rl-font-mono-alt)}.rl-font-bold{font-weight:700}.rl-font-medium{font-weight:500}.rl-font-regular{font-weight:400}.rl-text-xs{font-size:var(--rl-text-xs)}.rl-text-s{font-size:var(--rl-text-s)}.rl-text-m{font-size:var(--rl-text-m)}.rl-text-l{font-size:var(--rl-text-l)}.rl-text-xl{font-size:var(--rl-text-xl)}.rl-text-2xl{font-size:var(--rl-text-2xl)}.rl-text-italic{font-style:italic}.rl-text-underline{text-decoration:underline}.rl-text-strike{text-decoration:line-through}.rl-text-muted{opacity:.5}.rl-text-left{text-align:left}.rl-text-center{text-align:center}.rl-text-right{text-align:right}.rl-text-uppercase{text-transform:uppercase}.rl-text-lowercase{text-transform:lowercase}.rl-text-capitalize{text-transform:capitalize}.rl-textline-tight{line-height:1.25}.rl-textline-normal{line-height:1.5}.rl-textline-loose{line-height:2}.rl-text-wrap{white-space:normal}.rl-text-nowrap{white-space:nowrap}.rl-text-truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

package/package.json

@@ -1,43 +1,43 @@
-{
-  "name": "@codesense/relayout",
-  "version": "0.0.25",
-  "type": "module",
-  "description": "Responsive layout system",
-  "license": "MIT",
-  "main": "dist/js/relayout.js",
-  "module": "dist/js/relayout.js",
-  "style": "dist/css/relayout.css",
-  "types": "dist/js/types/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/js/types/index.d.ts",
-      "import": "./dist/js/relayout.js",
-      "default": "./dist/js/relayout.js"
-    },
-    "./css": "./dist/css/relayout.css",
-    "./relayout.css": "./dist/css/relayout.css"
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "prepublishOnly": "npm run build",
-    "build": "npm run build:css && npm run build:js",
-    "build:css": "sass src/scss/relayout.scss dist/css/relayout.css --style=compressed --no-source-map",
-    "build:js": "rollup -c"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/codesensedev/relayout"
-  },
-  "devDependencies": {
-    "@rollup/plugin-node-resolve": "^16.0.3",
-    "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^12.3.0",
-    "lit": "^3.3.2",
-    "rollup": "^4.57.1",
-    "sass": "^1.93.2",
-    "tslib": "^2.8.1",
-    "typescript": "^5.9.3"
-  }
-}
+{
+  "name": "@codesense/relayout",
+  "version": "0.1.3",
+  "type": "module",
+  "description": "Responsive layout system",
+  "license": "MIT",
+  "main": "dist/js/relayout.js",
+  "module": "dist/js/relayout.js",
+  "style": "dist/css/relayout.css",
+  "types": "dist/js/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/js/types/index.d.ts",
+      "import": "./dist/js/relayout.js",
+      "default": "./dist/js/relayout.js"
+    },
+    "./css": "./dist/css/relayout.css",
+    "./relayout.css": "./dist/css/relayout.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepublishOnly": "npm run build",
+    "build": "npm run build:css && npm run build:js",
+    "build:css": "sass src/scss/relayout.scss dist/css/relayout.css --style=compressed --no-source-map",
+    "build:js": "rollup -c"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/codesensedev/relayout"
+  },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "lit": "^3.3.2",
+    "rollup": "^4.57.1",
+    "sass": "^1.93.2",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.3"
+  }
+}

package/dist/test-comparison.html

@@ -1,432 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Graal CSS vs Web Components Comparison</title>
-    <link rel="stylesheet" href="./css/relayout.css">
-    <script type="module" src="./js/relayout.js"></script>
-    <style>
-        body {
-            font-family: system-ui, sans-serif;
-            padding: 2rem;
-            background: #f5f5f5;
-        }
-        .comparison {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 2rem;
-            margin-bottom: 3rem;
-        }
-        .section {
-            background: white;
-            padding: 1.5rem;
-            border-radius: 8px;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-        }
-        h1 {
-            text-align: center;
-            margin-bottom: 2rem;
-        }
-        h2 {
-            margin-top: 0;
-            color: #333;
-            border-bottom: 2px solid #e0e0e0;
-            padding-bottom: 0.5rem;
-        }
-        h3 {
-            color: #666;
-            font-size: 1rem;
-            margin-top: 1.5rem;
-        }
-        .demo-item {
-            background: #f9f9f9;
-            padding: 1rem;
-            border: 1px solid #e0e0e0;
-            margin: 0.5rem 0;
-        }
-        code {
-            background: #f4f4f4;
-            padding: 0.2rem 0.4rem;
-            border-radius: 3px;
-            font-size: 0.9em;
-        }
-        pre {
-            background: #f4f4f4;
-            padding: 1rem;
-            border-radius: 4px;
-            overflow-x: auto;
-            font-size: 0.85em;
-        }
-    </style>
-</head>
-<body>
-    <h1>🎨 Graal CSS Classes vs Web Components</h1>
-
-    <!-- STACK COMPARISON -->
-    <div class="comparison">
-        <div class="section">
-            <h2>CSS Classes (SCSS)</h2>
-            <h3>Stack Layout</h3>
-            <div class="rl-stack rl-gap-l">
-                <div class="demo-item">Item 1</div>
-                <div class="demo-item">Item 2</div>
-                <div class="demo-item">Item 3</div>
-            </div>
-            <pre>&lt;div class="rl-stack rl-gap-l"&gt;
-  &lt;div&gt;Item 1&lt;/div&gt;
-  &lt;div&gt;Item 2&lt;/div&gt;
-  &lt;div&gt;Item 3&lt;/div&gt;
-&lt;/div&gt;</pre>
-        </div>
-
-        <div class="section">
-            <h2>Web Components (Lit)</h2>
-            <h3>Stack Layout</h3>
-            <rl-stack rl-gap-l>
-                <div class="demo-item">Item 1</div>
-                <div class="demo-item">Item 2</div>
-                <div class="demo-item">Item 3</div>
-            </rl-stack>
-            <pre>&lt;rl-stack rl-gap-l&gt;
-  &lt;div&gt;Item 1&lt;/div&gt;
-  &lt;div&gt;Item 2&lt;/div&gt;
-  &lt;div&gt;Item 3&lt;/div&gt;
-&lt;/rl-stack&gt;</pre>
-        </div>
-    </div>
-
-    <!-- CLUSTER COMPARISON -->
-    <div class="comparison">
-        <div class="section">
-            <h3>Cluster Layout</h3>
-            <div class="rl-cluster rl-gap-m">
-                <div class="demo-item">Tag 1</div>
-                <div class="demo-item">Tag 2</div>
-                <div class="demo-item">Tag 3</div>
-                <div class="demo-item">Tag 4</div>
-                <div class="demo-item">Tag 5</div>
-            </div>
-            <pre>&lt;div class="rl-cluster rl-gap-m"&gt;
-  &lt;div&gt;Tag 1&lt;/div&gt;
-  &lt;div&gt;Tag 2&lt;/div&gt;
-  ...
-&lt;/div&gt;</pre>
-        </div>
-
-        <div class="section">
-            <h3>Cluster Layout</h3>
-            <rl-cluster rl-gap-m>
-                <div class="demo-item">Tag 1</div>
-                <div class="demo-item">Tag 2</div>
-                <div class="demo-item">Tag 3</div>
-                <div class="demo-item">Tag 4</div>
-                <div class="demo-item">Tag 5</div>
-            </rl-cluster>
-            <pre>&lt;rl-cluster rl-gap-m&gt;
-  &lt;div&gt;Tag 1&lt;/div&gt;
-  &lt;div&gt;Tag 2&lt;/div&gt;
-  ...
-&lt;/rl-cluster&gt;</pre>
-        </div>
-    </div>
-
-    <!-- SPLIT COMPARISON -->
-    <div class="comparison">
-        <div class="section">
-            <h3>Split Layout</h3>
-            <div class="rl-split rl-gap-l">
-                <div class="demo-item">Left</div>
-                <div class="demo-item">Right</div>
-            </div>
-            <pre>&lt;div class="rl-split rl-gap-l"&gt;
-  &lt;div&gt;Left&lt;/div&gt;
-  &lt;div&gt;Right&lt;/div&gt;
-&lt;/div&gt;</pre>
-        </div>
-
-        <div class="section">
-            <h3>Split Layout</h3>
-            <rl-split rl-gap-l>
-                <div class="demo-item">Left</div>
-                <div class="demo-item">Right</div>
-            </rl-split>
-            <pre>&lt;rl-split rl-gap-l&gt;
-  &lt;div&gt;Left&lt;/div&gt;
-  &lt;div&gt;Right&lt;/div&gt;
-&lt;/rl-split&gt;</pre>
-        </div>
-    </div>
-
-    <!-- GRID COMPARISON -->
-    <div class="comparison">
-        <div class="section">
-            <h3>Grid Layout</h3>
-            <div class="rl-grid rl-gap-m">
-                <div class="demo-item">1</div>
-                <div class="demo-item">2</div>
-                <div class="demo-item">3</div>
-                <div class="demo-item">4</div>
-            </div>
-            <pre>&lt;div class="rl-grid rl-gap-m"&gt;
-  &lt;div&gt;1&lt;/div&gt;
-  &lt;div&gt;2&lt;/div&gt;
-  ...
-&lt;/div&gt;</pre>
-        </div>
-
-        <div class="section">
-            <h3>Grid Layout</h3>
-            <rl-grid rl-gap-m>
-                <div class="demo-item">1</div>
-                <div class="demo-item">2</div>
-                <div class="demo-item">3</div>
-                <div class="demo-item">4</div>
-            </rl-grid>
-            <pre>&lt;rl-grid rl-gap-m&gt;
-  &lt;div&gt;1&lt;/div&gt;
-  &lt;div&gt;2&lt;/div&gt;
-  ...
-&lt;/rl-grid&gt;</pre>
-        </div>
-    </div>
-
-    <!-- FLANK COMPARISON -->
-    <div class="comparison">
-        <div class="section">
-            <h3>Flank Layout</h3>
-            <div class="rl-flank rl-gap-m">
-                <div class="demo-item">Logo</div>
-                <div class="demo-item">Flexible content that grows</div>
-            </div>
-            <pre>&lt;div class="rl-flank rl-gap-m"&gt;
-  &lt;div&gt;Logo&lt;/div&gt;
-  &lt;div&gt;Flexible content&lt;/div&gt;
-&lt;/div&gt;</pre>
-        </div>
-
-        <div class="section">
-            <h3>Flank Layout</h3>
-            <rl-flank rl-gap-m>
-                <div class="demo-item">Logo</div>
-                <div class="demo-item">Flexible content that grows</div>
-            </rl-flank>
-            <pre>&lt;rl-flank rl-gap-m&gt;
-  &lt;div&gt;Logo&lt;/div&gt;
-  &lt;div&gt;Flexible content&lt;/div&gt;
-&lt;/rl-flank&gt;</pre>
-        </div>
-    </div>
-
-    <!-- FRAME COMPARISON -->
-    <div class="comparison">
-        <div class="section">
-            <h3>Frame Layout</h3>
-            <div class="rl-frame" style="height: 200px; border: 2px dashed #ccc;">
-                <div class="demo-item">Centered content</div>
-            </div>
-            <pre>&lt;div class="rl-frame"&gt;
-  &lt;div&gt;Centered content&lt;/div&gt;
-&lt;/div&gt;</pre>
-        </div>
-
-        <div class="section">
-            <h3>Frame Layout</h3>
-            <rl-frame style="height: 200px; border: 2px dashed #ccc;">
-                <div class="demo-item">Centered content</div>
-            </rl-frame>
-            <pre>&lt;rl-frame&gt;
-  &lt;div&gt;Centered content&lt;/div&gt;
-&lt;/rl-frame&gt;</pre>
-        </div>
-    </div>
-
-    <!-- DIVIDER COMPARISON -->
-    <div class="comparison">
-        <div class="section">
-            <h3>Stack with Divider</h3>
-            <div class="rl-stack rl-gap-l">
-                <div class="demo-item">Section 1</div>
-                <hr class="rl-divider">
-                <div class="demo-item">Section 2</div>
-            </div>
-            <pre>&lt;div class="rl-stack rl-gap-l"&gt;
-  &lt;div&gt;Section 1&lt;/div&gt;
-  &lt;hr class="rl-divider"&gt;
-  &lt;div&gt;Section 2&lt;/div&gt;
-&lt;/div&gt;</pre>
-        </div>
-
-        <div class="section">
-            <h3>Stack with Divider</h3>
-            <rl-stack rl-gap-l>
-                <div class="demo-item">Section 1</div>
-                <rl-divider></rl-divider>
-                <div class="demo-item">Section 2</div>
-            </rl-stack>
-            <pre>&lt;rl-stack rl-gap-l&gt;
-  &lt;div&gt;Section 1&lt;/div&gt;
-  &lt;rl-divider&gt;&lt;/rl-divider&gt;
-  &lt;div&gt;Section 2&lt;/div&gt;
-&lt;/rl-stack&gt;</pre>
-        </div>
-    </div>
-
-    <!-- BORDER & RADIUS MODIFIERS -->
-    <div class="comparison">
-        <div class="section">
-            <h3>Border + Radius Modifiers</h3>
-            <div class="rl-stack rl-gap-m rl-border rl-padding-l rl-radius-m">
-                <div class="demo-item">With border</div>
-                <div class="demo-item">With padding</div>
-                <div class="demo-item">With radius</div>
-            </div>
-            <pre>&lt;div class="rl-stack rl-gap-m 
-     rl-border rl-padding-l rl-radius-m"&gt;
-  &lt;div&gt;With border&lt;/div&gt;
-  &lt;div&gt;With padding&lt;/div&gt;
-  &lt;div&gt;With radius&lt;/div&gt;
-&lt;/div&gt;</pre>
-        </div>
-
-        <div class="section">
-            <h3>Border + Radius Modifiers</h3>
-            <rl-stack rl-gap-m rl-border rl-padding-l rl-radius-m>
-                <div class="demo-item">With border</div>
-                <div class="demo-item">With padding</div>
-                <div class="demo-item">With radius</div>
-            </rl-stack>
-            <pre>&lt;rl-stack rl-gap-m 
-          rl-border rl-padding-l rl-radius-m&gt;
-  &lt;div&gt;With border&lt;/div&gt;
-  &lt;div&gt;With padding&lt;/div&gt;
-  &lt;div&gt;With radius&lt;/div&gt;
-&lt;/rl-stack&gt;</pre>
-        </div>
-    </div>
-
-    <!-- ALIGN MODIFIERS -->
-    <div class="comparison">
-        <div class="section">
-            <h3>Align Modifiers</h3>
-            <div class="rl-stack rl-gap-m rl-align-center">
-                <div class="demo-item" style="width: 60%;">Center aligned</div>
-                <div class="demo-item" style="width: 40%;">Centered</div>
-            </div>
-            <pre>&lt;div class="rl-stack rl-gap-m 
-     rl-align-center"&gt;
-  &lt;div&gt;Center aligned&lt;/div&gt;
-  &lt;div&gt;Centered&lt;/div&gt;
-&lt;/div&gt;</pre>
-        </div>
-
-        <div class="section">
-            <h3>Align Modifiers</h3>
-            <rl-stack rl-gap-m rl-align-center>
-                <div class="demo-item" style="width: 60%;">Center aligned</div>
-                <div class="demo-item" style="width: 40%;">Centered</div>
-            </rl-stack>
-            <pre>&lt;rl-stack rl-gap-m rl-align-center&gt;
-  &lt;div&gt;Center aligned&lt;/div&gt;
-  &lt;div&gt;Centered&lt;/div&gt;
-&lt;/rl-stack&gt;</pre>
-        </div>
-    </div>
-
-    <!-- JUSTIFY MODIFIERS -->
-    <div class="comparison">
-        <div class="section">
-            <h3>Justify Modifiers</h3>
-            <div class="rl-cluster rl-gap-m rl-justify-center" style="border: 2px dashed #ccc; padding: 1rem;">
-                <div class="demo-item">Item 1</div>
-                <div class="demo-item">Item 2</div>
-                <div class="demo-item">Item 3</div>
-            </div>
-            <pre>&lt;div class="rl-cluster rl-gap-m 
-     rl-justify-center"&gt;
-  &lt;div&gt;Item 1&lt;/div&gt;
-  &lt;div&gt;Item 2&lt;/div&gt;
-  &lt;div&gt;Item 3&lt;/div&gt;
-&lt;/div&gt;</pre>
-        </div>
-
-        <div class="section">
-            <h3>Justify Modifiers</h3>
-            <rl-cluster rl-gap-m rl-justify-center style="border: 2px dashed #ccc; padding: 1rem;">
-                <div class="demo-item">Item 1</div>
-                <div class="demo-item">Item 2</div>
-                <div class="demo-item">Item 3</div>
-            </rl-cluster>
-            <pre>&lt;rl-cluster rl-gap-m rl-justify-center&gt;
-  &lt;div&gt;Item 1&lt;/div&gt;
-  &lt;div&gt;Item 2&lt;/div&gt;
-  &lt;div&gt;Item 3&lt;/div&gt;
-&lt;/rl-cluster&gt;</pre>
-        </div>
-    </div>
-
-    <!-- COMPARISON TABLE -->
-    <div style="background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
-        <h2>Key Differences</h2>
-        <table style="width: 100%; border-collapse: collapse;">
-            <thead>
-                <tr style="background: #f4f4f4;">
-                    <th style="padding: 0.75rem; text-align: left; border: 1px solid #ddd;">Aspect</th>
-                    <th style="padding: 0.75rem; text-align: left; border: 1px solid #ddd;">CSS Classes</th>
-                    <th style="padding: 0.75rem; text-align: left; border: 1px solid #ddd;">Web Components</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr>
-                    <td style="padding: 0.75rem; border: 1px solid #ddd;"><strong>Browser Support</strong></td>
-                    <td style="padding: 0.75rem; border: 1px solid #ddd;">✅ Universal (all browsers)</td>
-                    <td style="padding: 0.75rem; border: 1px solid #ddd;">⚠️ Modern browsers only</td>
-                </tr>
-                <tr style="background: #f9f9f9;">
-                    <td style="padding: 0.75rem; border: 1px solid #ddd;"><strong>Bundle Size</strong></td>
-                    <td style="padding: 0.75rem; border: 1px solid #ddd;">✅ Minimal (CSS only)</td>
-                    <td style="padding: 0.75rem; border: 1px solid #ddd;">⚠️ Includes JS + Lit</td>
-                </tr>
-                <tr>
-                    <td style="padding: 0.75rem; border: 1px solid #ddd;"><strong>Style Encapsulation</strong></td>
-                    <td style="padding: 0.75rem; border: 1px solid #ddd;">❌ Global scope</td>
-                    <td style="padding: 0.75rem; border: 1px solid #ddd;">✅ Shadow DOM (isolated)</td>
-                </tr>
-                <tr style="background: #f9f9f9;">
-                    <td style="padding: 0.75rem; border: 1px solid #ddd;"><strong>Semantic HTML</strong></td>
-                    <td style="padding: 0.75rem; border: 1px solid #ddd;">✅ Standard elements</td>
-                    <td style="padding: 0.75rem; border: 1px solid #ddd;">✅ Custom elements</td>
-                </tr>
-                <tr>
-                    <td style="padding: 0.75rem; border: 1px solid #ddd;"><strong>Performance</strong></td>
-                    <td style="padding: 0.75rem; border: 1px solid #ddd;">✅ Fast (CSS only)</td>
-                    <td style="padding: 0.75rem; border: 1px solid #ddd;">⚠️ Component overhead</td>
-                </tr>
-                <tr style="background: #f9f9f9;">
-                    <td style="padding: 0.75rem; border: 1px solid #ddd;"><strong>SSR/SSG</strong></td>
-                    <td style="padding: 0.75rem; border: 1px solid #ddd;">✅ Works perfectly</td>
-                    <td style="padding: 0.75rem; border: 1px solid #ddd;">⚠️ Needs DSD or hydration</td>
-                </tr>
-                <tr>
-                    <td style="padding: 0.75rem; border: 1px solid #ddd;"><strong>Framework Agnostic</strong></td>
-                    <td style="padding: 0.75rem; border: 1px solid #ddd;">✅ Works everywhere</td>
-                    <td style="padding: 0.75rem; border: 1px solid #ddd;">✅ Works everywhere</td>
-                </tr>
-                <tr style="background: #f9f9f9;">
-                    <td style="padding: 0.75rem; border: 1px solid #ddd;"><strong>DX (Syntax)</strong></td>
-                    <td style="padding: 0.75rem; border: 1px solid #ddd;">⚠️ Class names</td>
-                    <td style="padding: 0.75rem; border: 1px solid #ddd;">✅ Clean HTML tags</td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-
-    <script>
-        // Open DevTools and inspect elements to see Shadow DOM in web components
-        console.log('%c🎨 Graal CSS Test Page', 'font-size: 20px; font-weight: bold;');
-        console.log('💡 Inspect elements to see the difference:');
-        console.log('  - CSS classes: styles applied globally');
-        console.log('  - Web components: styles encapsulated in Shadow DOM');
-    </script>
-</body>
-</html>