snice 2.1.5 → 2.2.1

package/dist/components/layout/snice-layout-landing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snice-layout-landing.js","sources":["../../../components/layout/snice-layout-landing.css?inline","../../../../components/layout/snice-layout-landing.ts"],"sourcesContent":["export default \"/* Landing Page Layout */\\n:host {\\n  display: block;\\n  font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);\\n}\\n\\n.layout {\\n  min-height: 100vh;\\n  display: flex;\\n  flex-direction: column;\\n}\\n\\n.container {\\n  max-width: 1200px;\\n  margin: 0 auto;\\n  padding: 0 var(--snice-spacing-lg, 2rem);\\n}\\n\\n.header {\\n  background: var(--snice-color-background, white);\\n  border-bottom: 1px solid var(--snice-color-border, #d1d5db);\\n  position: sticky;\\n  top: 0;\\n  z-index: 100;\\n}\\n\\n.header .container {\\n  display: flex;\\n  align-items: center;\\n  justify-content: space-between;\\n  padding-top: var(--snice-spacing-md, 1rem);\\n  padding-bottom: var(--snice-spacing-md, 1rem);\\n}\\n\\n.brand h1 {\\n  margin: 0;\\n  font-size: var(--snice-font-size-xl, 1.5rem);\\n  font-weight: var(--snice-font-weight-bold, 700);\\n  color: var(--snice-color-text, #374151);\\n}\\n\\n.nav {\\n  display: flex;\\n  gap: var(--snice-spacing-lg, 2rem);\\n}\\n\\n.nav ::slotted(a) {\\n  text-decoration: none;\\n  color: var(--snice-color-text-secondary, #6b7280);\\n  font-weight: var(--snice-font-weight-medium, 500);\\n  transition: color var(--snice-transition-fast, 0.15s) ease;\\n}\\n\\n.nav ::slotted(a:hover) {\\n  color: var(--snice-color-primary, #3b82f6);\\n}\\n\\n.main {\\n  flex: 1;\\n}\\n\\n.hero {\\n  background: var(--snice-color-background-secondary, #f8fafc);\\n  padding: var(--snice-spacing-2xl, 4rem) 0;\\n}\\n\\n.content {\\n  background: var(--snice-color-background, white);\\n}\\n\\n.footer {\\n  background: var(--snice-color-background-tertiary, #f1f5f9);\\n  border-top: 1px solid var(--snice-color-border, #d1d5db);\\n  padding: var(--snice-spacing-xl, 3rem) 0;\\n  margin-top: auto;\\n}\\n\\n/* Mobile responsive */\\n@media (max-width: 768px) {\\n  .header .container {\\n    flex-direction: column;\\n    gap: var(--snice-spacing-md, 1rem);\\n  }\\n  \\n  .nav {\\n    gap: var(--snice-spacing-md, 1rem);\\n  }\\n  \\n  .hero {\\n    padding: var(--snice-spacing-xl, 3rem) 0;\\n  }\\n}\";",null],"names":[],"mappings":";;;AAAA,UAAe,g9DAAg9D;;ICIl9D,kBAAkB,GAAA,CAAA,MAAA;4BAD9B,OAAO,CAAC,sBAAsB,CAAC,CAAA;;;;sBACQ,WAAW;AAAnB,KAAA,cAAQ,WAAW,CAAA;;;;YAAnD,YAAA,CAAA,IAAA,EAAA,gBAAA,GAAA,EAAA,KAAA,EAAA,UAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,IAAA,EAAA,OAAA,EAAA,IAAA,EAAA,UAAA,CAAA,IAAA,EAAA,QAAA,EAAA,SAAA,EAAA,EAAA,IAAA,EAAA,uBAAA,CAAA;;;YAAa,iBAAA,CAAA,UAAA,EAAA,uBAAA,CAAA;;QACX,IAAI,GAAA;AACF,YAAA,gBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkCd;QACH;QAEA,GAAG,GAAA;AACD,YAAA,OAAO,GAAG;QACZ;;;;;;;"}

package/dist/components/layout/snice-layout-minimal.d.ts

@@ -0,0 +1,4 @@
+export declare class SniceLayoutMinimal extends HTMLElement {
+    html(): string;
+    css(): string;
+}

package/dist/components/layout/snice-layout-minimal.js

@@ -0,0 +1,38 @@
+import { __esDecorate, __runInitializers } from 'tslib';
+import { element } from 'snice';
+
+var css = "/* Minimal Layout - Just content */\n:host {\n  display: block;\n  font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);\n}\n\n.layout {\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n}\n\n.main {\n  flex: 1;\n  background: var(--snice-color-background, white);\n}";
+
+let SniceLayoutMinimal = (() => {
+    let _classDecorators = [element('snice-layout-minimal')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        html() {
+            return /*html*/ `
+      <div class="layout">
+        <main class="main">
+          <slot></slot>
+        </main>
+      </div>
+    `;
+        }
+        css() {
+            return css;
+        }
+    });
+    return _classThis;
+})();
+
+export { SniceLayoutMinimal };
+//# sourceMappingURL=snice-layout-minimal.js.map

package/dist/components/layout/snice-layout-minimal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snice-layout-minimal.js","sources":["../../../components/layout/snice-layout-minimal.css?inline","../../../../components/layout/snice-layout-minimal.ts"],"sourcesContent":["export default \"/* Minimal Layout - Just content */\\n:host {\\n  display: block;\\n  font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);\\n}\\n\\n.layout {\\n  min-height: 100vh;\\n  display: flex;\\n  flex-direction: column;\\n}\\n\\n.main {\\n  flex: 1;\\n  background: var(--snice-color-background, white);\\n}\";",null],"names":[],"mappings":";;;AAAA,UAAe,mVAAmV;;ICIrV,kBAAkB,GAAA,CAAA,MAAA;4BAD9B,OAAO,CAAC,sBAAsB,CAAC,CAAA;;;;sBACQ,WAAW;AAAnB,KAAA,cAAQ,WAAW,CAAA;;;;YAAnD,YAAA,CAAA,IAAA,EAAA,gBAAA,GAAA,EAAA,KAAA,EAAA,UAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,IAAA,EAAA,OAAA,EAAA,IAAA,EAAA,UAAA,CAAA,IAAA,EAAA,QAAA,EAAA,SAAA,EAAA,EAAA,IAAA,EAAA,uBAAA,CAAA;;;YAAa,iBAAA,CAAA,UAAA,EAAA,uBAAA,CAAA;;QACX,IAAI,GAAA;AACF,YAAA,gBAAe;;;;;;KAMd;QACH;QAEA,GAAG,GAAA;AACD,YAAA,OAAO,GAAG;QACZ;;;;;;;"}

package/dist/components/layout/snice-layout-sidebar.d.ts

@@ -0,0 +1,5 @@
+export declare class SniceLayoutSidebar extends HTMLElement {
+    collapsed: boolean;
+    html(): string;
+    css(): string;
+}

package/dist/components/layout/snice-layout-sidebar.js

@@ -0,0 +1,74 @@
+import { __esDecorate, __runInitializers } from 'tslib';
+import { element, property } from 'snice';
+
+var css = "/* Sidebar Layout */\n:host {\n  display: block;\n  font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);\n}\n\n.layout {\n  display: grid;\n  grid-template-columns: 250px 1fr;\n  min-height: 100vh;\n  transition: grid-template-columns var(--snice-transition-normal, 0.25s) ease;\n}\n\n:host([collapsed]) .layout {\n  grid-template-columns: 60px 1fr;\n}\n\n.sidebar {\n  background: var(--snice-color-background, white);\n  border-right: 1px solid var(--snice-color-border, #d1d5db);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.sidebar-header {\n  padding: var(--snice-spacing-lg, 2rem) var(--snice-spacing-md, 1rem);\n  border-bottom: 1px solid var(--snice-color-border, #d1d5db);\n}\n\n.sidebar-header h2 {\n  margin: 0;\n  font-size: var(--snice-font-size-lg, 1.125rem);\n  font-weight: var(--snice-font-weight-semibold, 600);\n  color: var(--snice-color-text, #374151);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n:host([collapsed]) .sidebar-header {\n  padding: var(--snice-spacing-md, 1rem) var(--snice-spacing-xs, 0.5rem);\n  text-align: center;\n}\n\n.sidebar-nav {\n  flex: 1;\n  padding: var(--snice-spacing-md, 1rem);\n  overflow-y: auto;\n}\n\n.content-area {\n  display: grid;\n  grid-template-rows: auto 1fr auto;\n  background: var(--snice-color-background-secondary, #f8fafc);\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  gap: var(--snice-spacing-md, 1rem);\n  padding: var(--snice-spacing-md, 1rem) var(--snice-spacing-lg, 2rem);\n  background: var(--snice-color-background, white);\n  border-bottom: 1px solid var(--snice-color-border, #d1d5db);\n}\n\n.sidebar-toggle {\n  background: none;\n  border: none;\n  color: var(--snice-color-text-secondary, #6b7280);\n  cursor: pointer;\n  padding: var(--snice-spacing-xs, 0.5rem);\n  border-radius: var(--snice-border-radius-md, 4px);\n  transition: all var(--snice-transition-fast, 0.15s) ease;\n}\n\n.sidebar-toggle:hover {\n  background: var(--snice-color-background-secondary, #f8fafc);\n  color: var(--snice-color-text, #374151);\n}\n\n.main {\n  padding: var(--snice-spacing-lg, 2rem);\n  overflow-y: auto;\n}\n\n.footer {\n  padding: var(--snice-spacing-md, 1rem) var(--snice-spacing-lg, 2rem);\n  background: var(--snice-color-background, white);\n  border-top: 1px solid var(--snice-color-border, #d1d5db);\n}\n\n/* Mobile responsive */\n@media (max-width: 768px) {\n  .layout {\n    grid-template-columns: 1fr;\n  }\n  \n  :host([collapsed]) .layout {\n    grid-template-columns: 1fr;\n  }\n  \n  .sidebar {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 250px;\n    height: 100vh;\n    z-index: 1000;\n    transform: translateX(-100%);\n    transition: transform var(--snice-transition-normal, 0.25s) ease;\n  }\n  \n  :host(:not([collapsed])) .sidebar {\n    transform: translateX(0);\n  }\n}";
+
+let SniceLayoutSidebar = (() => {
+    let _classDecorators = [element('snice-layout-sidebar')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _collapsed_decorators;
+    let _collapsed_initializers = [];
+    let _collapsed_extraInitializers = [];
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _collapsed_decorators = [property({ type: Boolean, reflect: true })];
+            __esDecorate(null, null, _collapsed_decorators, { kind: "field", name: "collapsed", static: false, private: false, access: { has: obj => "collapsed" in obj, get: obj => obj.collapsed, set: (obj, value) => { obj.collapsed = value; } }, metadata: _metadata }, _collapsed_initializers, _collapsed_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        html() {
+            return /*html*/ `
+      <div class="layout">
+        <aside class="sidebar">
+          <div class="sidebar-header">
+            <slot name="brand">
+              <h2>App</h2>
+            </slot>
+          </div>
+          <nav class="sidebar-nav">
+            <slot name="nav"></slot>
+          </nav>
+        </aside>
+        
+        <div class="content-area">
+          <header class="header">
+            <button class="sidebar-toggle" type="button" aria-label="Toggle sidebar">
+              <svg viewBox="0 0 24 24" width="20" height="20">
+                <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill="currentColor"/>
+              </svg>
+            </button>
+            <slot name="header"></slot>
+          </header>
+          
+          <main class="main">
+            <slot></slot>
+          </main>
+          
+          <footer class="footer">
+            <slot name="footer"></slot>
+          </footer>
+        </div>
+      </div>
+    `;
+        }
+        css() {
+            return css;
+        }
+        constructor() {
+            super(...arguments);
+            this.collapsed = __runInitializers(this, _collapsed_initializers, false);
+            __runInitializers(this, _collapsed_extraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { SniceLayoutSidebar };
+//# sourceMappingURL=snice-layout-sidebar.js.map

package/dist/components/layout/snice-layout-sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snice-layout-sidebar.js","sources":["../../../components/layout/snice-layout-sidebar.css?inline","../../../../components/layout/snice-layout-sidebar.ts"],"sourcesContent":["export default \"/* Sidebar Layout */\\n:host {\\n  display: block;\\n  font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);\\n}\\n\\n.layout {\\n  display: grid;\\n  grid-template-columns: 250px 1fr;\\n  min-height: 100vh;\\n  transition: grid-template-columns var(--snice-transition-normal, 0.25s) ease;\\n}\\n\\n:host([collapsed]) .layout {\\n  grid-template-columns: 60px 1fr;\\n}\\n\\n.sidebar {\\n  background: var(--snice-color-background, white);\\n  border-right: 1px solid var(--snice-color-border, #d1d5db);\\n  display: flex;\\n  flex-direction: column;\\n  overflow: hidden;\\n}\\n\\n.sidebar-header {\\n  padding: var(--snice-spacing-lg, 2rem) var(--snice-spacing-md, 1rem);\\n  border-bottom: 1px solid var(--snice-color-border, #d1d5db);\\n}\\n\\n.sidebar-header h2 {\\n  margin: 0;\\n  font-size: var(--snice-font-size-lg, 1.125rem);\\n  font-weight: var(--snice-font-weight-semibold, 600);\\n  color: var(--snice-color-text, #374151);\\n  white-space: nowrap;\\n  overflow: hidden;\\n  text-overflow: ellipsis;\\n}\\n\\n:host([collapsed]) .sidebar-header {\\n  padding: var(--snice-spacing-md, 1rem) var(--snice-spacing-xs, 0.5rem);\\n  text-align: center;\\n}\\n\\n.sidebar-nav {\\n  flex: 1;\\n  padding: var(--snice-spacing-md, 1rem);\\n  overflow-y: auto;\\n}\\n\\n.content-area {\\n  display: grid;\\n  grid-template-rows: auto 1fr auto;\\n  background: var(--snice-color-background-secondary, #f8fafc);\\n}\\n\\n.header {\\n  display: flex;\\n  align-items: center;\\n  gap: var(--snice-spacing-md, 1rem);\\n  padding: var(--snice-spacing-md, 1rem) var(--snice-spacing-lg, 2rem);\\n  background: var(--snice-color-background, white);\\n  border-bottom: 1px solid var(--snice-color-border, #d1d5db);\\n}\\n\\n.sidebar-toggle {\\n  background: none;\\n  border: none;\\n  color: var(--snice-color-text-secondary, #6b7280);\\n  cursor: pointer;\\n  padding: var(--snice-spacing-xs, 0.5rem);\\n  border-radius: var(--snice-border-radius-md, 4px);\\n  transition: all var(--snice-transition-fast, 0.15s) ease;\\n}\\n\\n.sidebar-toggle:hover {\\n  background: var(--snice-color-background-secondary, #f8fafc);\\n  color: var(--snice-color-text, #374151);\\n}\\n\\n.main {\\n  padding: var(--snice-spacing-lg, 2rem);\\n  overflow-y: auto;\\n}\\n\\n.footer {\\n  padding: var(--snice-spacing-md, 1rem) var(--snice-spacing-lg, 2rem);\\n  background: var(--snice-color-background, white);\\n  border-top: 1px solid var(--snice-color-border, #d1d5db);\\n}\\n\\n/* Mobile responsive */\\n@media (max-width: 768px) {\\n  .layout {\\n    grid-template-columns: 1fr;\\n  }\\n  \\n  :host([collapsed]) .layout {\\n    grid-template-columns: 1fr;\\n  }\\n  \\n  .sidebar {\\n    position: fixed;\\n    top: 0;\\n    left: 0;\\n    width: 250px;\\n    height: 100vh;\\n    z-index: 1000;\\n    transform: translateX(-100%);\\n    transition: transform var(--snice-transition-normal, 0.25s) ease;\\n  }\\n  \\n  :host(:not([collapsed])) .sidebar {\\n    transform: translateX(0);\\n  }\\n}\";",null],"names":[],"mappings":";;;AAAA,UAAe,o2FAAo2F;;ICIt2F,kBAAkB,GAAA,CAAA,MAAA;4BAD9B,OAAO,CAAC,sBAAsB,CAAC,CAAA;;;;sBACQ,WAAW;;;;AAAnB,KAAA,cAAQ,WAAW,CAAA;;;;qCAChD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAA;YAC3C,YAAA,CAAA,IAAA,EAAA,IAAA,EAAA,qBAAA,EAAA,EAAA,IAAA,EAAA,OAAA,EAAA,IAAA,EAAA,WAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,KAAA,EAAA,MAAA,EAAA,EAAA,GAAA,EAAA,GAAA,IAAA,WAAA,IAAA,GAAA,EAAA,GAAA,EAAA,GAAA,IAAA,GAAA,CAAA,SAAS,EAAA,GAAA,EAAA,CAAA,GAAA,EAAA,KAAA,KAAA,EAAA,GAAA,CAAT,SAAS,GAAA,KAAA,CAAA,CAAA,CAAA,EAAA,EAAA,QAAA,EAAA,SAAA,EAAA,EAAA,uBAAA,EAAA,4BAAA,CAAA;YAFX,YAAA,CAAA,IAAA,EAAA,gBAAA,GAAA,EAAA,KAAA,EAAA,UAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,IAAA,EAAA,OAAA,EAAA,IAAA,EAAA,UAAA,CAAA,IAAA,EAAA,QAAA,EAAA,SAAA,EAAA,EAAA,IAAA,EAAA,uBAAA,CAAA;;;YAAa,iBAAA,CAAA,UAAA,EAAA,uBAAA,CAAA;;QAIX,IAAI,GAAA;AACF,YAAA,gBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgCd;QACH;QAEA,GAAG,GAAA;AACD,YAAA,OAAO,GAAG;QACZ;;;YAxCA,IAAA,CAAA,SAAS,GAAA,iBAAA,CAAA,IAAA,EAAA,uBAAA,EAAG,KAAK,CAAA;;;;;;;;;"}

package/dist/components/layout/snice-layout-split.d.ts

@@ -0,0 +1,6 @@
+export declare class SniceLayoutSplit extends HTMLElement {
+    direction: 'horizontal' | 'vertical';
+    ratio: '50-50' | '60-40' | '70-30' | '33-67' | '67-33';
+    html(): string;
+    css(): string;
+}

package/dist/components/layout/snice-layout-split.js

@@ -0,0 +1,58 @@
+import { __esDecorate, __runInitializers } from 'tslib';
+import { element, property } from 'snice';
+
+var css = "/* Split Layout - Two panels side by side */\n:host {\n  display: block;\n  font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);\n}\n\n.layout {\n  display: grid;\n  min-height: 100vh;\n  gap: 1px;\n  background: var(--snice-color-border, #d1d5db);\n}\n\n/* Horizontal split (default) */\n:host([direction=\"horizontal\"]) .layout,\n:host(:not([direction])) .layout {\n  grid-template-columns: 1fr auto 1fr;\n  grid-template-rows: 1fr;\n}\n\n/* Vertical split */\n:host([direction=\"vertical\"]) .layout {\n  grid-template-rows: 1fr auto 1fr;\n  grid-template-columns: 1fr;\n}\n\n/* Ratio variants - Horizontal */\n:host([ratio=\"50-50\"]) .layout,\n:host(:not([ratio])) .layout {\n  grid-template-columns: 1fr 1px 1fr;\n}\n\n:host([ratio=\"60-40\"]) .layout {\n  grid-template-columns: 60fr 1px 40fr;\n}\n\n:host([ratio=\"70-30\"]) .layout {\n  grid-template-columns: 70fr 1px 30fr;\n}\n\n:host([ratio=\"33-67\"]) .layout {\n  grid-template-columns: 33fr 1px 67fr;\n}\n\n:host([ratio=\"67-33\"]) .layout {\n  grid-template-columns: 67fr 1px 33fr;\n}\n\n/* Ratio variants - Vertical */\n:host([direction=\"vertical\"][ratio=\"50-50\"]) .layout,\n:host([direction=\"vertical\"]:not([ratio])) .layout {\n  grid-template-rows: 1fr 1px 1fr;\n}\n\n:host([direction=\"vertical\"][ratio=\"60-40\"]) .layout {\n  grid-template-rows: 60fr 1px 40fr;\n}\n\n:host([direction=\"vertical\"][ratio=\"70-30\"]) .layout {\n  grid-template-rows: 70fr 1px 30fr;\n}\n\n:host([direction=\"vertical\"][ratio=\"33-67\"]) .layout {\n  grid-template-rows: 33fr 1px 67fr;\n}\n\n:host([direction=\"vertical\"][ratio=\"67-33\"]) .layout {\n  grid-template-rows: 67fr 1px 33fr;\n}\n\n.panel {\n  background: var(--snice-color-background, white);\n  overflow: auto;\n}\n\n.panel-left {\n  padding: var(--snice-spacing-lg, 2rem);\n}\n\n.panel-right {\n  padding: var(--snice-spacing-lg, 2rem);\n}\n\n.divider {\n  background: var(--snice-color-border, #d1d5db);\n}\n\n/* Mobile responsive */\n@media (max-width: 768px) {\n  .layout {\n    grid-template-columns: 1fr !important;\n    grid-template-rows: auto auto auto !important;\n  }\n  \n  .divider {\n    height: 1px;\n  }\n  \n  .panel-left,\n  .panel-right {\n    padding: var(--snice-spacing-md, 1rem);\n  }\n}";
+
+let SniceLayoutSplit = (() => {
+    let _classDecorators = [element('snice-layout-split')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _direction_decorators;
+    let _direction_initializers = [];
+    let _direction_extraInitializers = [];
+    let _ratio_decorators;
+    let _ratio_initializers = [];
+    let _ratio_extraInitializers = [];
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _direction_decorators = [property({ reflect: true })];
+            _ratio_decorators = [property({ reflect: true })];
+            __esDecorate(null, null, _direction_decorators, { kind: "field", name: "direction", static: false, private: false, access: { has: obj => "direction" in obj, get: obj => obj.direction, set: (obj, value) => { obj.direction = value; } }, metadata: _metadata }, _direction_initializers, _direction_extraInitializers);
+            __esDecorate(null, null, _ratio_decorators, { kind: "field", name: "ratio", static: false, private: false, access: { has: obj => "ratio" in obj, get: obj => obj.ratio, set: (obj, value) => { obj.ratio = value; } }, metadata: _metadata }, _ratio_initializers, _ratio_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        html() {
+            return /*html*/ `
+      <div class="layout">
+        <div class="panel panel-left">
+          <slot name="left"></slot>
+        </div>
+        <div class="divider"></div>
+        <div class="panel panel-right">
+          <slot name="right"></slot>
+        </div>
+      </div>
+    `;
+        }
+        css() {
+            return css;
+        }
+        constructor() {
+            super(...arguments);
+            this.direction = __runInitializers(this, _direction_initializers, 'horizontal');
+            this.ratio = (__runInitializers(this, _direction_extraInitializers), __runInitializers(this, _ratio_initializers, '50-50'));
+            __runInitializers(this, _ratio_extraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { SniceLayoutSplit };
+//# sourceMappingURL=snice-layout-split.js.map

package/dist/components/layout/snice-layout-split.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snice-layout-split.js","sources":["../../../components/layout/snice-layout-split.css?inline","../../../../components/layout/snice-layout-split.ts"],"sourcesContent":["export default \"/* Split Layout - Two panels side by side */\\n:host {\\n  display: block;\\n  font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);\\n}\\n\\n.layout {\\n  display: grid;\\n  min-height: 100vh;\\n  gap: 1px;\\n  background: var(--snice-color-border, #d1d5db);\\n}\\n\\n/* Horizontal split (default) */\\n:host([direction=\\\"horizontal\\\"]) .layout,\\n:host(:not([direction])) .layout {\\n  grid-template-columns: 1fr auto 1fr;\\n  grid-template-rows: 1fr;\\n}\\n\\n/* Vertical split */\\n:host([direction=\\\"vertical\\\"]) .layout {\\n  grid-template-rows: 1fr auto 1fr;\\n  grid-template-columns: 1fr;\\n}\\n\\n/* Ratio variants - Horizontal */\\n:host([ratio=\\\"50-50\\\"]) .layout,\\n:host(:not([ratio])) .layout {\\n  grid-template-columns: 1fr 1px 1fr;\\n}\\n\\n:host([ratio=\\\"60-40\\\"]) .layout {\\n  grid-template-columns: 60fr 1px 40fr;\\n}\\n\\n:host([ratio=\\\"70-30\\\"]) .layout {\\n  grid-template-columns: 70fr 1px 30fr;\\n}\\n\\n:host([ratio=\\\"33-67\\\"]) .layout {\\n  grid-template-columns: 33fr 1px 67fr;\\n}\\n\\n:host([ratio=\\\"67-33\\\"]) .layout {\\n  grid-template-columns: 67fr 1px 33fr;\\n}\\n\\n/* Ratio variants - Vertical */\\n:host([direction=\\\"vertical\\\"][ratio=\\\"50-50\\\"]) .layout,\\n:host([direction=\\\"vertical\\\"]:not([ratio])) .layout {\\n  grid-template-rows: 1fr 1px 1fr;\\n}\\n\\n:host([direction=\\\"vertical\\\"][ratio=\\\"60-40\\\"]) .layout {\\n  grid-template-rows: 60fr 1px 40fr;\\n}\\n\\n:host([direction=\\\"vertical\\\"][ratio=\\\"70-30\\\"]) .layout {\\n  grid-template-rows: 70fr 1px 30fr;\\n}\\n\\n:host([direction=\\\"vertical\\\"][ratio=\\\"33-67\\\"]) .layout {\\n  grid-template-rows: 33fr 1px 67fr;\\n}\\n\\n:host([direction=\\\"vertical\\\"][ratio=\\\"67-33\\\"]) .layout {\\n  grid-template-rows: 67fr 1px 33fr;\\n}\\n\\n.panel {\\n  background: var(--snice-color-background, white);\\n  overflow: auto;\\n}\\n\\n.panel-left {\\n  padding: var(--snice-spacing-lg, 2rem);\\n}\\n\\n.panel-right {\\n  padding: var(--snice-spacing-lg, 2rem);\\n}\\n\\n.divider {\\n  background: var(--snice-color-border, #d1d5db);\\n}\\n\\n/* Mobile responsive */\\n@media (max-width: 768px) {\\n  .layout {\\n    grid-template-columns: 1fr !important;\\n    grid-template-rows: auto auto auto !important;\\n  }\\n  \\n  .divider {\\n    height: 1px;\\n  }\\n  \\n  .panel-left,\\n  .panel-right {\\n    padding: var(--snice-spacing-md, 1rem);\\n  }\\n}\";",null],"names":[],"mappings":";;;AAAA,UAAe,kvEAAkvE;;ICIpvE,gBAAgB,GAAA,CAAA,MAAA;4BAD5B,OAAO,CAAC,oBAAoB,CAAC,CAAA;;;;sBACQ,WAAW;;;;;;;AAAnB,KAAA,cAAQ,WAAW,CAAA;;;;AAC9C,YAAA,qBAAA,GAAA,CAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAA;AAG3B,YAAA,iBAAA,GAAA,CAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAA;YAF5B,YAAA,CAAA,IAAA,EAAA,IAAA,EAAA,qBAAA,EAAA,EAAA,IAAA,EAAA,OAAA,EAAA,IAAA,EAAA,WAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,KAAA,EAAA,MAAA,EAAA,EAAA,GAAA,EAAA,GAAA,IAAA,WAAA,IAAA,GAAA,EAAA,GAAA,EAAA,GAAA,IAAA,GAAA,CAAA,SAAS,EAAA,GAAA,EAAA,CAAA,GAAA,EAAA,KAAA,KAAA,EAAA,GAAA,CAAT,SAAS,GAAA,KAAA,CAAA,CAAA,CAAA,EAAA,EAAA,QAAA,EAAA,SAAA,EAAA,EAAA,uBAAA,EAAA,4BAAA,CAAA;YAGT,YAAA,CAAA,IAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,EAAA,IAAA,EAAA,OAAA,EAAA,IAAA,EAAA,OAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,KAAA,EAAA,MAAA,EAAA,EAAA,GAAA,EAAA,GAAA,IAAA,OAAA,IAAA,GAAA,EAAA,GAAA,EAAA,GAAA,IAAA,GAAA,CAAA,KAAK,EAAA,GAAA,EAAA,CAAA,GAAA,EAAA,KAAA,KAAA,EAAA,GAAA,CAAL,KAAK,GAAA,KAAA,CAAA,CAAA,CAAA,EAAA,EAAA,QAAA,EAAA,SAAA,EAAA,EAAA,mBAAA,EAAA,wBAAA,CAAA;YALP,YAAA,CAAA,IAAA,EAAA,gBAAA,GAAA,EAAA,KAAA,EAAA,UAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,IAAA,EAAA,OAAA,EAAA,IAAA,EAAA,UAAA,CAAA,IAAA,EAAA,QAAA,EAAA,SAAA,EAAA,EAAA,IAAA,EAAA,uBAAA,CAAA;;;YAAa,iBAAA,CAAA,UAAA,EAAA,uBAAA,CAAA;;QAOX,IAAI,GAAA;AACF,YAAA,gBAAe;;;;;;;;;;KAUd;QACH;QAEA,GAAG,GAAA;AACD,YAAA,OAAO,GAAG;QACZ;;;YArBA,IAAA,CAAA,SAAS,GAAA,iBAAA,CAAA,IAAA,EAAA,uBAAA,EAA8B,YAAY,CAAA;YAGnD,IAAA,CAAA,KAAK,IAAA,iBAAA,CAAA,IAAA,EAAA,4BAAA,CAAA,EAAA,iBAAA,CAAA,IAAA,EAAA,mBAAA,EAAoD,OAAO,CAAA,CAAA;;;;;;;;;"}

package/dist/components/layout/snice-layout.d.ts

@@ -0,0 +1,4 @@
+export declare class SniceLayout extends HTMLElement {
+    html(): string;
+    css(): string;
+}

package/dist/components/layout/snice-layout.js

@@ -0,0 +1,54 @@
+import { __esDecorate, __runInitializers } from 'tslib';
+import { element } from 'snice';
+
+var css = "/* Layout Component Styles */\n:host {\n  display: block;\n  font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);\n}\n\n.layout {\n  display: grid;\n  grid-template-rows: auto 1fr auto;\n  min-height: 100vh;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--snice-spacing-md, 1rem) var(--snice-spacing-lg, 2rem);\n  background: var(--snice-color-background, white);\n  border-bottom: 1px solid var(--snice-color-border, #d1d5db);\n  box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.brand h1 {\n  margin: 0;\n  font-size: var(--snice-font-size-xl, 1.5rem);\n  color: var(--snice-color-text, #374151);\n  font-weight: var(--snice-font-weight-semibold, 600);\n}\n\n.nav {\n  display: flex;\n  gap: var(--snice-spacing-lg, 2rem);\n}\n\n.nav ::slotted(a) {\n  text-decoration: none;\n  color: var(--snice-color-text-secondary, #6b7280);\n  font-weight: var(--snice-font-weight-medium, 500);\n  padding: var(--snice-spacing-xs, 0.5rem) var(--snice-spacing-md, 1rem);\n  border-radius: var(--snice-border-radius-md, 4px);\n  transition: all var(--snice-transition-fast, 0.15s) ease;\n}\n\n.nav ::slotted(a:hover) {\n  color: var(--snice-color-primary, #3b82f6);\n  background: var(--snice-color-background-secondary, #f8fafc);\n}\n\n.nav ::slotted(a.active) {\n  color: var(--snice-color-primary, #3b82f6);\n  background: var(--snice-color-primary-light, #dbeafe);\n  font-weight: var(--snice-font-weight-semibold, 600);\n}\n\n.main {\n  padding: var(--snice-spacing-lg, 2rem);\n  background: var(--snice-color-background-secondary, #f8fafc);\n  overflow-y: auto;\n}\n\n.footer {\n  padding: var(--snice-spacing-md, 1rem) var(--snice-spacing-lg, 2rem);\n  background: var(--snice-color-background, white);\n  border-top: 1px solid var(--snice-color-border, #d1d5db);\n  text-align: center;\n  color: var(--snice-color-text-secondary, #6b7280);\n  font-size: var(--snice-font-size-sm, 0.875rem);\n}\n\n.footer p {\n  margin: 0;\n}";
+
+let SniceLayout = (() => {
+    let _classDecorators = [element('snice-layout')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        html() {
+            return /*html*/ `
+      <div class="layout">
+        <header class="header">
+          <div class="brand">
+            <slot name="brand">
+              <h1>App</h1>
+            </slot>
+          </div>
+          <nav class="nav">
+            <slot name="nav"></slot>
+          </nav>
+        </header>
+        
+        <main class="main">
+          <slot></slot>
+        </main>
+        
+        <footer class="footer">
+          <slot name="footer">
+          </slot>
+        </footer>
+      </div>
+    `;
+        }
+        css() {
+            return css;
+        }
+    });
+    return _classThis;
+})();
+
+export { SniceLayout };
+//# sourceMappingURL=snice-layout.js.map

package/dist/components/layout/snice-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snice-layout.js","sources":["../../../components/layout/snice-layout.css?inline","../../../../components/layout/snice-layout.ts"],"sourcesContent":["export default \"/* Layout Component Styles */\\n:host {\\n  display: block;\\n  font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);\\n}\\n\\n.layout {\\n  display: grid;\\n  grid-template-rows: auto 1fr auto;\\n  min-height: 100vh;\\n}\\n\\n.header {\\n  display: flex;\\n  align-items: center;\\n  justify-content: space-between;\\n  padding: var(--snice-spacing-md, 1rem) var(--snice-spacing-lg, 2rem);\\n  background: var(--snice-color-background, white);\\n  border-bottom: 1px solid var(--snice-color-border, #d1d5db);\\n  box-shadow: 0 2px 4px rgba(0,0,0,0.1);\\n}\\n\\n.brand h1 {\\n  margin: 0;\\n  font-size: var(--snice-font-size-xl, 1.5rem);\\n  color: var(--snice-color-text, #374151);\\n  font-weight: var(--snice-font-weight-semibold, 600);\\n}\\n\\n.nav {\\n  display: flex;\\n  gap: var(--snice-spacing-lg, 2rem);\\n}\\n\\n.nav ::slotted(a) {\\n  text-decoration: none;\\n  color: var(--snice-color-text-secondary, #6b7280);\\n  font-weight: var(--snice-font-weight-medium, 500);\\n  padding: var(--snice-spacing-xs, 0.5rem) var(--snice-spacing-md, 1rem);\\n  border-radius: var(--snice-border-radius-md, 4px);\\n  transition: all var(--snice-transition-fast, 0.15s) ease;\\n}\\n\\n.nav ::slotted(a:hover) {\\n  color: var(--snice-color-primary, #3b82f6);\\n  background: var(--snice-color-background-secondary, #f8fafc);\\n}\\n\\n.nav ::slotted(a.active) {\\n  color: var(--snice-color-primary, #3b82f6);\\n  background: var(--snice-color-primary-light, #dbeafe);\\n  font-weight: var(--snice-font-weight-semibold, 600);\\n}\\n\\n.main {\\n  padding: var(--snice-spacing-lg, 2rem);\\n  background: var(--snice-color-background-secondary, #f8fafc);\\n  overflow-y: auto;\\n}\\n\\n.footer {\\n  padding: var(--snice-spacing-md, 1rem) var(--snice-spacing-lg, 2rem);\\n  background: var(--snice-color-background, white);\\n  border-top: 1px solid var(--snice-color-border, #d1d5db);\\n  text-align: center;\\n  color: var(--snice-color-text-secondary, #6b7280);\\n  font-size: var(--snice-font-size-sm, 0.875rem);\\n}\\n\\n.footer p {\\n  margin: 0;\\n}\";",null],"names":[],"mappings":";;;AAAA,UAAe,m/DAAm/D;;ICIr/D,WAAW,GAAA,CAAA,MAAA;4BADvB,OAAO,CAAC,cAAc,CAAC,CAAA;;;;sBACS,WAAW;AAAnB,KAAA,cAAQ,WAAW,CAAA;;;;YAA5C,YAAA,CAAA,IAAA,EAAA,gBAAA,GAAA,EAAA,KAAA,EAAA,UAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,IAAA,EAAA,OAAA,EAAA,IAAA,EAAA,UAAA,CAAA,IAAA,EAAA,QAAA,EAAA,SAAA,EAAA,EAAA,IAAA,EAAA,uBAAA,CAAA;;;YAAa,iBAAA,CAAA,UAAA,EAAA,uBAAA,CAAA;;QACX,IAAI,GAAA;AACF,YAAA,gBAAe;;;;;;;;;;;;;;;;;;;;;;KAsBd;QACH;QAEA,GAAG,GAAA;AACD,YAAA,OAAO,GAAG;QACZ;;;;;;;"}

package/{components/layout/snice-layout.types.ts → dist/components/layout/snice-layout.types.d.ts}

@@ -1,5 +1,3 @@
 import type { SniceElement } from 'snice';
-
 export interface SniceLayoutElement extends SniceElement {
-  // Add layout-specific properties and methods here as needed
-}
+}

package/dist/components/login/snice-login.d.ts

@@ -0,0 +1,44 @@
+import type { LoginVariant, LoginSize, LoginCredentials, SniceLoginElement } from './snice-login.types';
+import '../alert/snice-alert';
+import '../button/snice-button';
+export declare class SniceLogin extends HTMLElement implements SniceLoginElement {
+    variant: LoginVariant;
+    size: LoginSize;
+    title: string;
+    disabled: boolean;
+    loading: boolean;
+    showRememberMe: boolean;
+    showForgotPassword: boolean;
+    actionText: string;
+    form: HTMLFormElement;
+    usernameInput: HTMLInputElement;
+    passwordInput: HTMLInputElement;
+    rememberInput?: HTMLInputElement;
+    alertElement: HTMLElement;
+    buttonElement: HTMLElement;
+    inputElements: NodeListOf<HTMLInputElement>;
+    private alertMessage;
+    private alertVariant;
+    html(): string;
+    css(): string;
+    login(credentials?: LoginCredentials): any;
+    handleButtonClick(event: Event): Promise<void>;
+    handleSubmit(event: Event): Promise<{
+        username: string;
+        timestamp: string;
+    } | undefined>;
+    handleEnterKey(): void;
+    handleForgotPassword(event: Event): {
+        timestamp: string;
+    };
+    private dispatchLoginSuccess;
+    private dispatchLoginError;
+    private getFormData;
+    showAlert(message: string, variant: 'error' | 'success'): void;
+    clearAlert(): void;
+    private updateAlert;
+    private updateLoadingState;
+    setError(message: string): void;
+    clearError(): void;
+    reset(): void;
+}