snice 2.5.4 → 3.1.0

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

@@ -1,9 +1,9 @@
 import { __runInitializers, __esDecorate } from 'tslib';
-import { element, property, query, on, part } from 'snice';
+import { element, property, query, render, styles, ready, html, css } from 'snice';
 import '../drawer/snice-drawer.js';
 import '../nav/snice-nav.js';
 
-var css = "/* Sidebar Layout with full-width header */\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 spans full width */\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, 1.25rem);\n  background: var(--snice-color-background, white);\n  border-bottom: 1px solid var(--snice-color-border, #e5e7eb);\n  z-index: 10;\n}\n\n.header-brand {\n  display: flex;\n  align-items: center;\n}\n\n.header-brand 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, #111827);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sidebar-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--snice-size-control-md, 2rem);\n  height: var(--snice-size-control-md, 2rem);\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, 6px);\n  transition: all var(--snice-transition-fast, 150ms) ease;\n}\n\n.sidebar-toggle:hover {\n  background: var(--snice-color-primary, rgb(59 130 246));\n  color: var(--snice-color-text-inverse, white);\n}\n\n.sidebar-toggle:focus-visible {\n  outline: var(--snice-focus-ring-width, 2px) solid var(--snice-focus-ring-color, #3b82f6);\n  outline-offset: var(--snice-focus-ring-offset, 2px);\n}\n\n.header-content {\n  flex: 1;\n  min-width: 0; /* Allow flex item to shrink below content size */\n  display: flex;\n  align-items: center;\n  gap: var(--snice-spacing-md, 1rem);\n}\n\n/* Ensure slotted content can take full width */\n.header-content ::slotted(*) {\n  flex: 1;\n  width: 100%;\n}\n\n/* Body area contains drawer and main content */\n.body-area {\n  position: relative;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n  background: var(--snice-color-background-secondary, #f8fafc);\n}\n\n.sidebar-drawer {\n  flex-shrink: 0;\n}\n\n.sidebar-nav {\n  display: flex;\n  flex-direction: column;\n  gap: var(--snice-spacing-sm, 0.75rem);\n  padding: var(--snice-spacing-md, 1rem);\n}\n\n.main {\n  flex: 1;\n  padding: var(--snice-spacing-lg, 1.25rem);\n  overflow-y: auto;\n  background: var(--snice-color-background-secondary, #f8fafc);\n}\n\n/* Footer spans full width */\n.footer {\n  padding: var(--snice-spacing-md, 1rem) var(--snice-spacing-lg, 1.25rem);\n  background: var(--snice-color-background, white);\n  border-top: 1px solid var(--snice-color-border, #e5e7eb);\n}\n\n.footer:empty {\n  display: none;\n}\n\n/* Responsive behavior */\n@media (max-width: 768px) {\n  .header {\n    padding: var(--snice-spacing-sm, 0.75rem) var(--snice-spacing-md, 1rem);\n  }\n\n  .main {\n    padding: var(--snice-spacing-md, 1rem);\n  }\n\n  .footer {\n    padding: var(--snice-spacing-sm, 0.75rem) var(--snice-spacing-md, 1rem);\n  }\n}";
+var cssContent = "/* Sidebar Layout with full-width header */\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 spans full width */\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, 1.25rem);\n  background: var(--snice-color-background, white);\n  border-bottom: 1px solid var(--snice-color-border, #e5e7eb);\n  z-index: 10;\n}\n\n.header-brand {\n  display: flex;\n  align-items: center;\n}\n\n.header-brand 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, #111827);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sidebar-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--snice-size-control-md, 2rem);\n  height: var(--snice-size-control-md, 2rem);\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, 6px);\n  transition: all var(--snice-transition-fast, 150ms) ease;\n}\n\n.sidebar-toggle:hover {\n  background: var(--snice-color-primary, rgb(59 130 246));\n  color: var(--snice-color-text-inverse, white);\n}\n\n.sidebar-toggle:focus-visible {\n  outline: var(--snice-focus-ring-width, 2px) solid var(--snice-focus-ring-color, #3b82f6);\n  outline-offset: var(--snice-focus-ring-offset, 2px);\n}\n\n.header-content {\n  flex: 1;\n  min-width: 0; /* Allow flex item to shrink below content size */\n  display: flex;\n  align-items: center;\n  gap: var(--snice-spacing-md, 1rem);\n}\n\n/* Ensure slotted content can take full width */\n.header-content ::slotted(*) {\n  flex: 1;\n  width: 100%;\n}\n\n/* Body area contains drawer and main content */\n.body-area {\n  position: relative;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n  background: var(--snice-color-background-secondary, #f8fafc);\n}\n\n.sidebar-drawer {\n  flex-shrink: 0;\n}\n\n.sidebar-nav {\n  display: flex;\n  flex-direction: column;\n  gap: var(--snice-spacing-sm, 0.75rem);\n  padding: var(--snice-spacing-md, 1rem);\n}\n\n.main {\n  flex: 1;\n  padding: var(--snice-spacing-lg, 1.25rem);\n  overflow-y: auto;\n  background: var(--snice-color-background-secondary, #f8fafc);\n}\n\n/* Footer spans full width */\n.footer {\n  padding: var(--snice-spacing-md, 1rem) var(--snice-spacing-lg, 1.25rem);\n  background: var(--snice-color-background, white);\n  border-top: 1px solid var(--snice-color-border, #e5e7eb);\n}\n\n.footer:empty {\n  display: none;\n}\n\n/* Responsive behavior */\n@media (max-width: 768px) {\n  .header {\n    padding: var(--snice-spacing-sm, 0.75rem) var(--snice-spacing-md, 1rem);\n  }\n\n  .main {\n    padding: var(--snice-spacing-md, 1rem);\n  }\n\n  .footer {\n    padding: var(--snice-spacing-sm, 0.75rem) var(--snice-spacing-md, 1rem);\n  }\n}";
 
 let SniceLayoutSidebar = (() => {
     let _classDecorators = [element('snice-layout-sidebar')];
@@ -21,8 +21,9 @@ let SniceLayoutSidebar = (() => {
     let _navElement_decorators;
     let _navElement_initializers = [];
     let _navElement_extraInitializers = [];
-    let _handleSidebarToggle_decorators;
-    let _renderNav_decorators;
+    let _renderContent_decorators;
+    let _componentStyles_decorators;
+    let _init_decorators;
     (class extends _classSuper {
         static { _classThis = this; }
         constructor() {
@@ -38,10 +39,12 @@ let SniceLayoutSidebar = (() => {
             _collapsed_decorators = [property({ type: Boolean, })];
             _sidebarDrawer_decorators = [query('.sidebar-drawer')];
             _navElement_decorators = [query('snice-nav')];
-            _handleSidebarToggle_decorators = [on('click', '.sidebar-toggle')];
-            _renderNav_decorators = [part('nav')];
-            __esDecorate(this, null, _handleSidebarToggle_decorators, { kind: "method", name: "handleSidebarToggle", static: false, private: false, access: { has: obj => "handleSidebarToggle" in obj, get: obj => obj.handleSidebarToggle }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _renderNav_decorators, { kind: "method", name: "renderNav", static: false, private: false, access: { has: obj => "renderNav" in obj, get: obj => obj.renderNav }, metadata: _metadata }, null, _instanceExtraInitializers);
+            _renderContent_decorators = [render()];
+            _componentStyles_decorators = [styles()];
+            _init_decorators = [ready()];
+            __esDecorate(this, null, _renderContent_decorators, { kind: "method", name: "renderContent", static: false, private: false, access: { has: obj => "renderContent" in obj, get: obj => obj.renderContent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _componentStyles_decorators, { kind: "method", name: "componentStyles", static: false, private: false, access: { has: obj => "componentStyles" in obj, get: obj => obj.componentStyles }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _init_decorators, { kind: "method", name: "init", static: false, private: false, access: { has: obj => "init" in obj, get: obj => obj.init }, metadata: _metadata }, null, _instanceExtraInitializers);
             __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, null, _sidebarDrawer_decorators, { kind: "field", name: "sidebarDrawer", static: false, private: false, access: { has: obj => "sidebarDrawer" in obj, get: obj => obj.sidebarDrawer, set: (obj, value) => { obj.sidebarDrawer = value; } }, metadata: _metadata }, _sidebarDrawer_initializers, _sidebarDrawer_extraInitializers);
             __esDecorate(null, null, _navElement_decorators, { kind: "field", name: "navElement", static: false, private: false, access: { has: obj => "navElement" in obj, get: obj => obj.navElement, set: (obj, value) => { obj.navElement = value; } }, metadata: _metadata }, _navElement_initializers, _navElement_extraInitializers);
@@ -50,11 +53,11 @@ let SniceLayoutSidebar = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
-        html() {
-            return /*html*/ `
+        renderContent() {
+            return html /*html*/ `
       <div class="layout">
         <header class="header">
-          <button class="sidebar-toggle" type="button" aria-label="Toggle sidebar">
+          <button class="sidebar-toggle" type="button" aria-label="Toggle sidebar" @click=${this.handleSidebarToggle}>
             <svg viewBox="0 0 24 24" width="20" height="20">
               <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill="currentColor"/>
             </svg>
@@ -72,7 +75,7 @@ let SniceLayoutSidebar = (() => {
         <div class="body-area">
           <snice-drawer class="sidebar-drawer" position="left" size="medium" contained>
             <span slot="title">Navigation</span>
-            <snice-nav class="sidebar-nav" part="nav" variant="hierarchical" orientation="vertical"></snice-nav>
+            <snice-nav class="sidebar-nav" variant="hierarchical" orientation="vertical"></snice-nav>
           </snice-drawer>
 
           <main class="main">
@@ -86,26 +89,45 @@ let SniceLayoutSidebar = (() => {
       </div>
     `;
         }
-        css() {
-            return css;
+        componentStyles() {
+            return css /*css*/ `${cssContent}`;
         }
         handleSidebarToggle() {
             if (this.sidebarDrawer) {
                 this.sidebarDrawer.toggle();
             }
         }
-        update(_appContext, placards, currentRoute, _routeParams) {
+        init() {
+            // Update nav when component is ready and shadow DOM is available
+            this.updateNav();
+        }
+        update(appContext, placards, currentRoute, routeParams) {
             this.placards = placards;
             this.currentRoute = currentRoute;
             // Update the navigation
-            this.renderNav();
+            this.updateNav(appContext, routeParams);
         }
-        renderNav() {
+        updateNav(appContext, routeParams) {
+            // If @query hasn't resolved yet, try manual query
+            if (!this.navElement && this.shadowRoot) {
+                const manualNav = this.shadowRoot.querySelector('snice-nav');
+                if (manualNav) {
+                    manualNav.update(this.placards, appContext, this.currentRoute, routeParams);
+                    return;
+                }
+            }
             if (this.navElement) {
-                this.navElement.placards = this.placards;
-                this.navElement.currentRoute = this.currentRoute;
+                this.navElement.update(this.placards, appContext, this.currentRoute, routeParams);
+            }
+            else {
+                // Shadow DOM not ready yet, retry after next frame
+                requestAnimationFrame(() => {
+                    const nav = this.shadowRoot?.querySelector('snice-nav');
+                    if (nav) {
+                        nav.update(this.placards, appContext, this.currentRoute, routeParams);
+                    }
+                });
             }
-            return '';
         }
     });
     return _classThis;

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

@@ -1 +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 with full-width header */\\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 spans full width */\\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, 1.25rem);\\n  background: var(--snice-color-background, white);\\n  border-bottom: 1px solid var(--snice-color-border, #e5e7eb);\\n  z-index: 10;\\n}\\n\\n.header-brand {\\n  display: flex;\\n  align-items: center;\\n}\\n\\n.header-brand 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, #111827);\\n  white-space: nowrap;\\n  overflow: hidden;\\n  text-overflow: ellipsis;\\n}\\n\\n.sidebar-toggle {\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n  width: var(--snice-size-control-md, 2rem);\\n  height: var(--snice-size-control-md, 2rem);\\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, 6px);\\n  transition: all var(--snice-transition-fast, 150ms) ease;\\n}\\n\\n.sidebar-toggle:hover {\\n  background: var(--snice-color-primary, rgb(59 130 246));\\n  color: var(--snice-color-text-inverse, white);\\n}\\n\\n.sidebar-toggle:focus-visible {\\n  outline: var(--snice-focus-ring-width, 2px) solid var(--snice-focus-ring-color, #3b82f6);\\n  outline-offset: var(--snice-focus-ring-offset, 2px);\\n}\\n\\n.header-content {\\n  flex: 1;\\n  min-width: 0; /* Allow flex item to shrink below content size */\\n  display: flex;\\n  align-items: center;\\n  gap: var(--snice-spacing-md, 1rem);\\n}\\n\\n/* Ensure slotted content can take full width */\\n.header-content ::slotted(*) {\\n  flex: 1;\\n  width: 100%;\\n}\\n\\n/* Body area contains drawer and main content */\\n.body-area {\\n  position: relative;\\n  display: flex;\\n  flex: 1;\\n  overflow: hidden;\\n  background: var(--snice-color-background-secondary, #f8fafc);\\n}\\n\\n.sidebar-drawer {\\n  flex-shrink: 0;\\n}\\n\\n.sidebar-nav {\\n  display: flex;\\n  flex-direction: column;\\n  gap: var(--snice-spacing-sm, 0.75rem);\\n  padding: var(--snice-spacing-md, 1rem);\\n}\\n\\n.main {\\n  flex: 1;\\n  padding: var(--snice-spacing-lg, 1.25rem);\\n  overflow-y: auto;\\n  background: var(--snice-color-background-secondary, #f8fafc);\\n}\\n\\n/* Footer spans full width */\\n.footer {\\n  padding: var(--snice-spacing-md, 1rem) var(--snice-spacing-lg, 1.25rem);\\n  background: var(--snice-color-background, white);\\n  border-top: 1px solid var(--snice-color-border, #e5e7eb);\\n}\\n\\n.footer:empty {\\n  display: none;\\n}\\n\\n/* Responsive behavior */\\n@media (max-width: 768px) {\\n  .header {\\n    padding: var(--snice-spacing-sm, 0.75rem) var(--snice-spacing-md, 1rem);\\n  }\\n\\n  .main {\\n    padding: var(--snice-spacing-md, 1rem);\\n  }\\n\\n  .footer {\\n    padding: var(--snice-spacing-sm, 0.75rem) var(--snice-spacing-md, 1rem);\\n  }\\n}\";",null],"names":[],"mappings":"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"}
+{"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 with full-width header */\\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 spans full width */\\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, 1.25rem);\\n  background: var(--snice-color-background, white);\\n  border-bottom: 1px solid var(--snice-color-border, #e5e7eb);\\n  z-index: 10;\\n}\\n\\n.header-brand {\\n  display: flex;\\n  align-items: center;\\n}\\n\\n.header-brand 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, #111827);\\n  white-space: nowrap;\\n  overflow: hidden;\\n  text-overflow: ellipsis;\\n}\\n\\n.sidebar-toggle {\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n  width: var(--snice-size-control-md, 2rem);\\n  height: var(--snice-size-control-md, 2rem);\\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, 6px);\\n  transition: all var(--snice-transition-fast, 150ms) ease;\\n}\\n\\n.sidebar-toggle:hover {\\n  background: var(--snice-color-primary, rgb(59 130 246));\\n  color: var(--snice-color-text-inverse, white);\\n}\\n\\n.sidebar-toggle:focus-visible {\\n  outline: var(--snice-focus-ring-width, 2px) solid var(--snice-focus-ring-color, #3b82f6);\\n  outline-offset: var(--snice-focus-ring-offset, 2px);\\n}\\n\\n.header-content {\\n  flex: 1;\\n  min-width: 0; /* Allow flex item to shrink below content size */\\n  display: flex;\\n  align-items: center;\\n  gap: var(--snice-spacing-md, 1rem);\\n}\\n\\n/* Ensure slotted content can take full width */\\n.header-content ::slotted(*) {\\n  flex: 1;\\n  width: 100%;\\n}\\n\\n/* Body area contains drawer and main content */\\n.body-area {\\n  position: relative;\\n  display: flex;\\n  flex: 1;\\n  overflow: hidden;\\n  background: var(--snice-color-background-secondary, #f8fafc);\\n}\\n\\n.sidebar-drawer {\\n  flex-shrink: 0;\\n}\\n\\n.sidebar-nav {\\n  display: flex;\\n  flex-direction: column;\\n  gap: var(--snice-spacing-sm, 0.75rem);\\n  padding: var(--snice-spacing-md, 1rem);\\n}\\n\\n.main {\\n  flex: 1;\\n  padding: var(--snice-spacing-lg, 1.25rem);\\n  overflow-y: auto;\\n  background: var(--snice-color-background-secondary, #f8fafc);\\n}\\n\\n/* Footer spans full width */\\n.footer {\\n  padding: var(--snice-spacing-md, 1rem) var(--snice-spacing-lg, 1.25rem);\\n  background: var(--snice-color-background, white);\\n  border-top: 1px solid var(--snice-color-border, #e5e7eb);\\n}\\n\\n.footer:empty {\\n  display: none;\\n}\\n\\n/* Responsive behavior */\\n@media (max-width: 768px) {\\n  .header {\\n    padding: var(--snice-spacing-sm, 0.75rem) var(--snice-spacing-md, 1rem);\\n  }\\n\\n  .main {\\n    padding: var(--snice-spacing-md, 1rem);\\n  }\\n\\n  .footer {\\n    padding: var(--snice-spacing-sm, 0.75rem) var(--snice-spacing-md, 1rem);\\n  }\\n}\";",null],"names":[],"mappings":"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"}

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

@@ -1,6 +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;
+    renderContent(): import("snice").TemplateResult;
+    componentStyles(): import("snice").CSSResult;
 }

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

@@ -1,7 +1,7 @@
 import { __esDecorate, __runInitializers } from 'tslib';
-import { element, property } from 'snice';
+import { element, property, render, styles, html, css } 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}";
+var cssContent = "/* 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')];
@@ -9,18 +9,25 @@ let SniceLayoutSplit = (() => {
     let _classExtraInitializers = [];
     let _classThis;
     let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
     let _direction_decorators;
     let _direction_initializers = [];
     let _direction_extraInitializers = [];
     let _ratio_decorators;
     let _ratio_initializers = [];
     let _ratio_extraInitializers = [];
+    let _renderContent_decorators;
+    let _componentStyles_decorators;
     (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({})];
             _ratio_decorators = [property({})];
+            _renderContent_decorators = [render()];
+            _componentStyles_decorators = [styles()];
+            __esDecorate(this, null, _renderContent_decorators, { kind: "method", name: "renderContent", static: false, private: false, access: { has: obj => "renderContent" in obj, get: obj => obj.renderContent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _componentStyles_decorators, { kind: "method", name: "componentStyles", static: false, private: false, access: { has: obj => "componentStyles" in obj, get: obj => obj.componentStyles }, metadata: _metadata }, null, _instanceExtraInitializers);
             __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);
@@ -28,8 +35,8 @@ let SniceLayoutSplit = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
-        html() {
-            return /*html*/ `
+        renderContent() {
+            return html /*html*/ `
       <div class="layout">
         <div class="panel panel-left">
           <slot name="left"></slot>
@@ -41,12 +48,12 @@ let SniceLayoutSplit = (() => {
       </div>
     `;
         }
-        css() {
-            return css;
+        componentStyles() {
+            return css /*css*/ `${cssContent}`;
         }
         constructor() {
             super(...arguments);
-            this.direction = __runInitializers(this, _direction_initializers, 'horizontal');
+            this.direction = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _direction_initializers, 'horizontal'));
             this.ratio = (__runInitializers(this, _direction_extraInitializers), __runInitializers(this, _ratio_initializers, '50-50'));
             __runInitializers(this, _ratio_extraInitializers);
         }

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

@@ -1 +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;;;;qCAC9C,QAAQ,CAAC,EAAI,CAAC,CAAA;iCAGd,QAAQ,CAAC,EAAI,CAAC,CAAA;YAFf,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;;;;;;;;;"}
+{"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":"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"}

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

@@ -5,9 +5,9 @@ export declare class SniceLayout extends HTMLElement implements Layout {
     navElement: SniceNav;
     private placards;
     private currentRoute;
-    html(): string;
-    css(): string;
+    renderContent(): import("snice").TemplateResult;
+    componentStyles(): import("snice").CSSResult;
     onReady(): void;
-    update(_appContext: AppContext, placards: Placard[], currentRoute: string, _routeParams: RouteParams): void;
-    updateNav(): void;
+    update(appContext: AppContext, placards: Placard[], currentRoute: string, routeParams: RouteParams): void;
+    updateNav(appContext?: AppContext, routeParams?: RouteParams): void;
 }

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

@@ -1,8 +1,8 @@
 import { __runInitializers, __esDecorate } from 'tslib';
-import { element, query, ready } from 'snice';
+import { element, query, render, styles, ready, html, css } from 'snice';
 import '../nav/snice-nav.js';
 
-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}";
+var cssContent = "/* 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')];
@@ -14,6 +14,8 @@ let SniceLayout = (() => {
     let _navElement_decorators;
     let _navElement_initializers = [];
     let _navElement_extraInitializers = [];
+    let _renderContent_decorators;
+    let _componentStyles_decorators;
     let _onReady_decorators;
     (class extends _classSuper {
         static { _classThis = this; }
@@ -26,7 +28,11 @@ let SniceLayout = (() => {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _navElement_decorators = [query('snice-nav')];
+            _renderContent_decorators = [render()];
+            _componentStyles_decorators = [styles()];
             _onReady_decorators = [ready()];
+            __esDecorate(this, null, _renderContent_decorators, { kind: "method", name: "renderContent", static: false, private: false, access: { has: obj => "renderContent" in obj, get: obj => obj.renderContent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _componentStyles_decorators, { kind: "method", name: "componentStyles", static: false, private: false, access: { has: obj => "componentStyles" in obj, get: obj => obj.componentStyles }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _onReady_decorators, { kind: "method", name: "onReady", static: false, private: false, access: { has: obj => "onReady" in obj, get: obj => obj.onReady }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(null, null, _navElement_decorators, { kind: "field", name: "navElement", static: false, private: false, access: { has: obj => "navElement" in obj, get: obj => obj.navElement, set: (obj, value) => { obj.navElement = value; } }, metadata: _metadata }, _navElement_initializers, _navElement_extraInitializers);
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
@@ -34,8 +40,8 @@ let SniceLayout = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
-        html() {
-            return /*html*/ `
+        renderContent() {
+            return html /*html*/ `
       <div class="layout">
         <header class="header">
           <div class="brand">
@@ -57,8 +63,8 @@ let SniceLayout = (() => {
       </div>
     `;
         }
-        css() {
-            return css;
+        componentStyles() {
+            return css /*css*/ `${cssContent}`;
         }
         onReady() {
             // Update nav if we already have placards
@@ -66,17 +72,17 @@ let SniceLayout = (() => {
                 this.updateNav();
             }
         }
-        update(_appContext, placards, currentRoute, _routeParams) {
+        update(appContext, placards, currentRoute, routeParams) {
             this.placards = placards;
             this.currentRoute = currentRoute;
             // Update navigation - only if shadow DOM exists
             if (this.shadowRoot) {
-                this.updateNav();
+                this.updateNav(appContext, routeParams);
             }
         }
-        updateNav() {
+        updateNav(appContext, routeParams) {
             if (this.navElement) {
-                this.navElement.update(this.placards, this.currentRoute);
+                this.navElement.update(this.placards, appContext, this.currentRoute, routeParams);
             }
         }
     });

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

@@ -1 +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;;ICOr/D,WAAW,GAAA,CAAA,MAAA;4BADvB,OAAO,CAAC,cAAc,CAAC,CAAA;;;;sBACS,WAAW;;;;;;AAAnB,KAAA,cAAQ,WAAW,CAAA;;;;YAE1C,IAAA,CAAA,UAAU,IAFC,mDAAW,EAAA,iBAAA,CAAA,IAAA,EAAA,wBAAA,EAAA,MAAA,CAAA,CAAA;YAId,IAAA,CAAA,QAAQ,IAAA,iBAAA,CAAA,IAAA,EAAA,6BAAA,CAAA,EAAc,EAAE,CAAA;YACxB,IAAA,CAAA,YAAY,GAAG,EAAE;QAqD3B;;;sCAzDG,KAAK,CAAC,WAAW,CAAC,CAAA;AAkClB,YAAA,mBAAA,GAAA,CAAA,KAAK,EAAE,CAAA;AACR,YAAA,YAAA,CAAA,IAAA,EAAA,IAAA,EAAA,mBAAA,EAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,SAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,KAAA,EAAA,MAAA,EAAA,EAAA,GAAA,EAAA,GAAA,IAAA,SAAA,IAAA,GAAA,EAAA,GAAA,EAAA,GAAA,IAAA,GAAA,CAAA,OAAO,EAAA,EAAA,QAAA,EAAA,SAAA,EAAA,EAAA,IAAA,EAAA,0BAAA,CAAA;YAlCP,YAAA,CAAA,IAAA,EAAA,IAAA,EAAA,sBAAA,EAAA,EAAA,IAAA,EAAA,OAAA,EAAA,IAAA,EAAA,YAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,KAAA,EAAA,MAAA,EAAA,EAAA,GAAA,EAAA,GAAA,IAAA,YAAA,IAAA,GAAA,EAAA,GAAA,EAAA,GAAA,IAAA,GAAA,CAAA,UAAU,EAAA,GAAA,EAAA,CAAA,GAAA,EAAA,KAAA,KAAA,EAAA,GAAA,CAAV,UAAU,GAAA,KAAA,CAAA,CAAA,CAAA,EAAA,EAAA,QAAA,EAAA,SAAA,EAAA,EAAA,wBAAA,EAAA,6BAAA,CAAA;YAFZ,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;;;;;;;;;;;;;;;;;;;;KAoBd;QACH;QAEA,GAAG,GAAA;AACD,YAAA,OAAO,GAAG;QACZ;QAGA,OAAO,GAAA;;YAEL,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC5B,IAAI,CAAC,SAAS,EAAE;YAClB;QACF;AAEA,QAAA,MAAM,CAAC,WAAuB,EAAE,QAAmB,EAAE,YAAoB,EAAE,YAAyB,EAAA;AAClG,YAAA,IAAI,CAAC,QAAQ,GAAG,QAAQ;AACxB,YAAA,IAAI,CAAC,YAAY,GAAG,YAAY;;AAGhC,YAAA,IAAI,IAAI,CAAC,UAAU,EAAE;gBACnB,IAAI,CAAC,SAAS,EAAE;YAClB;QACF;QAEA,SAAS,GAAA;AACP,YAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACnB,gBAAA,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC;YAC1D;QACF;;;;;;;"}
+{"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":"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"}

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

@@ -20,19 +20,14 @@ export declare class SniceLogin extends HTMLElement implements SniceLoginElement
     inputElements: NodeListOf<HTMLInputElement>;
     private alertMessage;
     private alertVariant;
-    html(): string;
-    css(): string;
+    renderContent(): import("snice").TemplateResult;
+    componentStyles(): import("snice").CSSResult;
     updateLoginClasses(): void;
     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 handleButtonClick;
+    private handleSubmit;
+    private handleEnterKey;
+    private handleForgotPassword;
     private dispatchLoginSuccess;
     private dispatchLoginError;
     private getFormData;