snice 2.2.3 → 2.4.0

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

@@ -1 +1 @@
-{"version":3,"file":"snice-layout-centered.js","sources":["../../../components/layout/snice-layout-centered.css?inline","../../../../components/layout/snice-layout-centered.ts"],"sourcesContent":["export default \"/* Centered Layout - For forms, auth pages, etc */\\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  align-items: center;\\n  justify-content: center;\\n  padding: var(--snice-spacing-lg, 2rem);\\n  background: var(--snice-color-background-secondary, #f8fafc);\\n}\\n\\n.container {\\n  width: 100%;\\n  max-width: 400px;\\n  background: var(--snice-color-background, white);\\n  border-radius: var(--snice-border-radius-lg, 8px);\\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\\n  padding: var(--snice-spacing-xl, 3rem);\\n}\\n\\n/* Width variants */\\n:host([width=\\\"sm\\\"]) .container {\\n  max-width: 320px;\\n}\\n\\n:host([width=\\\"md\\\"]) .container {\\n  max-width: 400px;\\n}\\n\\n:host([width=\\\"lg\\\"]) .container {\\n  max-width: 500px;\\n}\\n\\n:host([width=\\\"xl\\\"]) .container {\\n  max-width: 600px;\\n}\\n\\n/* Mobile responsive */\\n@media (max-width: 480px) {\\n  .layout {\\n    padding: var(--snice-spacing-md, 1rem);\\n  }\\n  \\n  .container {\\n    padding: var(--snice-spacing-lg, 2rem);\\n  }\\n}\";",null],"names":[],"mappings":";;;AAAA,UAAe,0oCAA0oC;;ICI5oC,mBAAmB,GAAA,CAAA,MAAA;4BAD/B,OAAO,CAAC,uBAAuB,CAAC,CAAA;;;;sBACQ,WAAW;;;;AAAnB,KAAA,cAAQ,WAAW,CAAA;;;;AACjD,YAAA,iBAAA,GAAA,CAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAA;YAC5B,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;YAFP,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;;;;;;KAMd;QACH;QAEA,GAAG,GAAA;AACD,YAAA,OAAO,GAAG;QACZ;;;YAdA,IAAA,CAAA,KAAK,GAAA,iBAAA,CAAA,IAAA,EAAA,mBAAA,EAA8B,IAAI,CAAA;;;;;;;;;"}
+{"version":3,"file":"snice-layout-centered.js","sources":["../../../components/layout/snice-layout-centered.css?inline","../../../../components/layout/snice-layout-centered.ts"],"sourcesContent":["export default \"/* Centered Layout - For forms, auth pages, etc */\\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  align-items: center;\\n  justify-content: center;\\n  padding: var(--snice-spacing-lg, 2rem);\\n  background: var(--snice-color-background-secondary, #f8fafc);\\n}\\n\\n.container {\\n  width: 100%;\\n  max-width: 400px;\\n  background: var(--snice-color-background, white);\\n  border-radius: var(--snice-border-radius-lg, 8px);\\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\\n  padding: var(--snice-spacing-xl, 3rem);\\n}\\n\\n/* Width variants */\\n:host([width=\\\"sm\\\"]) .container {\\n  max-width: 320px;\\n}\\n\\n:host([width=\\\"md\\\"]) .container {\\n  max-width: 400px;\\n}\\n\\n:host([width=\\\"lg\\\"]) .container {\\n  max-width: 500px;\\n}\\n\\n:host([width=\\\"xl\\\"]) .container {\\n  max-width: 600px;\\n}\\n\\n/* Mobile responsive */\\n@media (max-width: 480px) {\\n  .layout {\\n    padding: var(--snice-spacing-md, 1rem);\\n  }\\n  \\n  .container {\\n    padding: var(--snice-spacing-lg, 2rem);\\n  }\\n}\";",null],"names":[],"mappings":";;;AAAA,UAAe,0oCAA0oC;;ICI5oC,mBAAmB,GAAA,CAAA,MAAA;4BAD/B,OAAO,CAAC,uBAAuB,CAAC,CAAA;;;;sBACQ,WAAW;;;;AAAnB,KAAA,cAAQ,WAAW,CAAA;;;;iCACjD,QAAQ,CAAC,EAAI,CAAC,CAAA;YACf,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;YAFP,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;;;;;;KAMd;QACH;QAEA,GAAG,GAAA;AACD,YAAA,OAAO,GAAG;QACZ;;;YAdA,IAAA,CAAA,KAAK,GAAA,iBAAA,CAAA,IAAA,EAAA,mBAAA,EAA8B,IAAI,CAAA;;;;;;;;;"}

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

@@ -1,4 +1,15 @@
-export declare class SniceLayoutDashboard extends HTMLElement {
+import type { AppContext, Placard, RouteParams, Layout } from 'snice';
+import '../breadcrumbs/snice-breadcrumbs.ts';
+import '../nav/snice-nav.ts';
+import type { SniceNav } from '../nav/snice-nav.ts';
+export declare class SniceLayoutDashboard extends HTMLElement implements Layout {
+    navElement: SniceNav;
+    private placards;
+    private currentRoute;
     html(): string;
     css(): string;
+    update(_appContext: AppContext, placards: Placard[], currentRoute: string, _routeParams: RouteParams): void;
+    renderNav(): string;
+    renderBreadcrumbs(): string;
+    private buildBreadcrumbTrail;
 }

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

@@ -1,5 +1,7 @@
-import { __esDecorate, __runInitializers } from 'tslib';
-import { element } from 'snice';
+import { __runInitializers, __esDecorate } from 'tslib';
+import { element, query, part } from 'snice';
+import '../breadcrumbs/snice-breadcrumbs.js';
+import '../nav/snice-nav.js';
 
 var css = "/* Dashboard Layout - Complex grid with multiple areas */\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-areas: \n    \"header header header\"\n    \"nav nav nav\"\n    \"sidebar main right-sidebar\";\n  grid-template-rows: auto auto 1fr;\n  grid-template-columns: 250px 1fr 250px;\n  min-height: 100vh;\n  gap: 1px;\n  background: var(--snice-color-border, #d1d5db);\n}\n\n.header {\n  grid-area: 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}\n\n.header-start h1 {\n  margin: 0;\n  font-size: var(--snice-font-size-xl, 1.5rem);\n  font-weight: var(--snice-font-weight-semibold, 600);\n  color: var(--snice-color-text, #374151);\n}\n\n.header-center {\n  flex: 1;\n  max-width: 400px;\n  margin: 0 var(--snice-spacing-lg, 2rem);\n}\n\n.nav {\n  grid-area: nav;\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 {\n  grid-area: sidebar;\n  background: var(--snice-color-background, white);\n  padding: var(--snice-spacing-lg, 2rem);\n  overflow-y: auto;\n}\n\n.main {\n  grid-area: main;\n  padding: var(--snice-spacing-lg, 2rem);\n  background: var(--snice-color-background-secondary, #f8fafc);\n  overflow-y: auto;\n}\n\n.right-sidebar {\n  grid-area: right-sidebar;\n  background: var(--snice-color-background, white);\n  padding: var(--snice-spacing-lg, 2rem);\n  overflow-y: auto;\n}\n\n/* Responsive */\n@media (max-width: 1024px) {\n  .layout {\n    grid-template-areas: \n      \"header header\"\n      \"nav nav\"\n      \"main main\";\n    grid-template-columns: 1fr;\n  }\n  \n  .sidebar,\n  .right-sidebar {\n    display: none;\n  }\n}\n\n@media (max-width: 768px) {\n  .header {\n    flex-direction: column;\n    gap: var(--snice-spacing-md, 1rem);\n  }\n  \n  .header-center {\n    margin: 0;\n    max-width: none;\n    width: 100%;\n  }\n}";
 
@@ -9,10 +11,28 @@ let SniceLayoutDashboard = (() => {
     let _classExtraInitializers = [];
     let _classThis;
     let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _navElement_decorators;
+    let _navElement_initializers = [];
+    let _navElement_extraInitializers = [];
+    let _renderNav_decorators;
+    let _renderBreadcrumbs_decorators;
     (class extends _classSuper {
         static { _classThis = this; }
+        constructor() {
+            super(...arguments);
+            this.navElement = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _navElement_initializers, void 0));
+            this.placards = (__runInitializers(this, _navElement_extraInitializers), []);
+            this.currentRoute = '';
+        }
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _navElement_decorators = [query('snice-nav')];
+            _renderNav_decorators = [part('nav')];
+            _renderBreadcrumbs_decorators = [part('breadcrumbs')];
+            __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);
+            __esDecorate(this, null, _renderBreadcrumbs_decorators, { kind: "method", name: "renderBreadcrumbs", static: false, private: false, access: { has: obj => "renderBreadcrumbs" in obj, get: obj => obj.renderBreadcrumbs }, 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);
             _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
@@ -34,19 +54,15 @@ let SniceLayoutDashboard = (() => {
             <slot name="user"></slot>
           </div>
         </header>
-        
-        <nav class="nav">
-          <slot name="nav"></slot>
-        </nav>
-        
-        <aside class="sidebar">
-          <slot name="sidebar"></slot>
-        </aside>
-        
+
+        <snice-nav class="nav" part="nav" variant="grouped" orientation="horizontal"></snice-nav>
+
+        <aside class="sidebar" part="breadcrumbs"></aside>
+
         <main class="main">
-          <slot></slot>
+          <slot name="page"></slot>
         </main>
-        
+
         <aside class="right-sidebar">
           <slot name="right-sidebar"></slot>
         </aside>
@@ -56,6 +72,69 @@ let SniceLayoutDashboard = (() => {
         css() {
             return css;
         }
+        update(_appContext, placards, currentRoute, _routeParams) {
+            this.placards = placards;
+            this.currentRoute = currentRoute;
+            // Update navigation and breadcrumbs
+            this.renderNav();
+            this.renderBreadcrumbs();
+        }
+        renderNav() {
+            if (this.navElement) {
+                this.navElement.placards = this.placards;
+                this.navElement.currentRoute = this.currentRoute;
+            }
+            return '';
+        }
+        renderBreadcrumbs() {
+            const currentPlacard = this.placards.find(p => this.currentRoute === p.name || this.currentRoute.startsWith(`/${p.name}`));
+            if (!currentPlacard) {
+                return '';
+            }
+            // Build breadcrumb trail
+            const breadcrumbs = this.buildBreadcrumbTrail(currentPlacard);
+            if (breadcrumbs.length === 0) {
+                return '';
+            }
+            return `
+      <snice-breadcrumbs
+        items='${JSON.stringify(breadcrumbs.map(p => ({
+                label: p.title,
+                href: `#/${p.name}`,
+                icon: p.icon
+            })))}'
+        separator="/">
+      </snice-breadcrumbs>
+    `;
+        }
+        buildBreadcrumbTrail(placard) {
+            const trail = [];
+            // If explicit breadcrumbs are defined, use them
+            if (placard.breadcrumbs && placard.breadcrumbs.length > 0) {
+                placard.breadcrumbs.forEach(name => {
+                    const p = this.placards.find(pc => pc.name === name);
+                    if (p)
+                        trail.push(p);
+                });
+                return trail;
+            }
+            // Otherwise, build from parent hierarchy
+            let current = placard;
+            const visited = new Set();
+            while (current) {
+                if (visited.has(current.name))
+                    break; // Prevent infinite loops
+                visited.add(current.name);
+                trail.unshift(current);
+                if (current.parent) {
+                    current = this.placards.find(p => p.name === current.parent);
+                }
+                else {
+                    break;
+                }
+            }
+            return trail;
+        }
     });
     return _classThis;
 })();

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

@@ -1 +1 @@
-{"version":3,"file":"snice-layout-dashboard.js","sources":["../../../components/layout/snice-layout-dashboard.css?inline","../../../../components/layout/snice-layout-dashboard.ts"],"sourcesContent":["export default \"/* Dashboard Layout - Complex grid with multiple areas */\\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-areas: \\n    \\\"header header header\\\"\\n    \\\"nav nav nav\\\"\\n    \\\"sidebar main right-sidebar\\\";\\n  grid-template-rows: auto auto 1fr;\\n  grid-template-columns: 250px 1fr 250px;\\n  min-height: 100vh;\\n  gap: 1px;\\n  background: var(--snice-color-border, #d1d5db);\\n}\\n\\n.header {\\n  grid-area: 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}\\n\\n.header-start h1 {\\n  margin: 0;\\n  font-size: var(--snice-font-size-xl, 1.5rem);\\n  font-weight: var(--snice-font-weight-semibold, 600);\\n  color: var(--snice-color-text, #374151);\\n}\\n\\n.header-center {\\n  flex: 1;\\n  max-width: 400px;\\n  margin: 0 var(--snice-spacing-lg, 2rem);\\n}\\n\\n.nav {\\n  grid-area: nav;\\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 {\\n  grid-area: sidebar;\\n  background: var(--snice-color-background, white);\\n  padding: var(--snice-spacing-lg, 2rem);\\n  overflow-y: auto;\\n}\\n\\n.main {\\n  grid-area: main;\\n  padding: var(--snice-spacing-lg, 2rem);\\n  background: var(--snice-color-background-secondary, #f8fafc);\\n  overflow-y: auto;\\n}\\n\\n.right-sidebar {\\n  grid-area: right-sidebar;\\n  background: var(--snice-color-background, white);\\n  padding: var(--snice-spacing-lg, 2rem);\\n  overflow-y: auto;\\n}\\n\\n/* Responsive */\\n@media (max-width: 1024px) {\\n  .layout {\\n    grid-template-areas: \\n      \\\"header header\\\"\\n      \\\"nav nav\\\"\\n      \\\"main main\\\";\\n    grid-template-columns: 1fr;\\n  }\\n  \\n  .sidebar,\\n  .right-sidebar {\\n    display: none;\\n  }\\n}\\n\\n@media (max-width: 768px) {\\n  .header {\\n    flex-direction: column;\\n    gap: var(--snice-spacing-md, 1rem);\\n  }\\n  \\n  .header-center {\\n    margin: 0;\\n    max-width: none;\\n    width: 100%;\\n  }\\n}\";",null],"names":[],"mappings":";;;AAAA,UAAe,2uEAA2uE;;ICI7uE,oBAAoB,GAAA,CAAA,MAAA;4BADhC,OAAO,CAAC,wBAAwB,CAAC,CAAA;;;;sBACQ,WAAW;AAAnB,KAAA,cAAQ,WAAW,CAAA;;;;YAArD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgCd;QACH;QAEA,GAAG,GAAA;AACD,YAAA,OAAO,GAAG;QACZ;;;;;;;"}
+{"version":3,"file":"snice-layout-dashboard.js","sources":["../../../components/layout/snice-layout-dashboard.css?inline","../../../../components/layout/snice-layout-dashboard.ts"],"sourcesContent":["export default \"/* Dashboard Layout - Complex grid with multiple areas */\\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-areas: \\n    \\\"header header header\\\"\\n    \\\"nav nav nav\\\"\\n    \\\"sidebar main right-sidebar\\\";\\n  grid-template-rows: auto auto 1fr;\\n  grid-template-columns: 250px 1fr 250px;\\n  min-height: 100vh;\\n  gap: 1px;\\n  background: var(--snice-color-border, #d1d5db);\\n}\\n\\n.header {\\n  grid-area: 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}\\n\\n.header-start h1 {\\n  margin: 0;\\n  font-size: var(--snice-font-size-xl, 1.5rem);\\n  font-weight: var(--snice-font-weight-semibold, 600);\\n  color: var(--snice-color-text, #374151);\\n}\\n\\n.header-center {\\n  flex: 1;\\n  max-width: 400px;\\n  margin: 0 var(--snice-spacing-lg, 2rem);\\n}\\n\\n.nav {\\n  grid-area: nav;\\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 {\\n  grid-area: sidebar;\\n  background: var(--snice-color-background, white);\\n  padding: var(--snice-spacing-lg, 2rem);\\n  overflow-y: auto;\\n}\\n\\n.main {\\n  grid-area: main;\\n  padding: var(--snice-spacing-lg, 2rem);\\n  background: var(--snice-color-background-secondary, #f8fafc);\\n  overflow-y: auto;\\n}\\n\\n.right-sidebar {\\n  grid-area: right-sidebar;\\n  background: var(--snice-color-background, white);\\n  padding: var(--snice-spacing-lg, 2rem);\\n  overflow-y: auto;\\n}\\n\\n/* Responsive */\\n@media (max-width: 1024px) {\\n  .layout {\\n    grid-template-areas: \\n      \\\"header header\\\"\\n      \\\"nav nav\\\"\\n      \\\"main main\\\";\\n    grid-template-columns: 1fr;\\n  }\\n  \\n  .sidebar,\\n  .right-sidebar {\\n    display: none;\\n  }\\n}\\n\\n@media (max-width: 768px) {\\n  .header {\\n    flex-direction: column;\\n    gap: var(--snice-spacing-md, 1rem);\\n  }\\n  \\n  .header-center {\\n    margin: 0;\\n    max-width: none;\\n    width: 100%;\\n  }\\n}\";",null],"names":[],"mappings":"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"}

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

@@ -16,7 +16,7 @@ let SniceLayoutFullscreen = (() => {
         static { _classThis = this; }
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _overlay_decorators = [property({ type: Boolean, reflect: true })];
+            _overlay_decorators = [property({ type: Boolean, })];
             __esDecorate(null, null, _overlay_decorators, { kind: "field", name: "overlay", static: false, private: false, access: { has: obj => "overlay" in obj, get: obj => obj.overlay, set: (obj, value) => { obj.overlay = value; } }, metadata: _metadata }, _overlay_initializers, _overlay_extraInitializers);
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
             _classThis = _classDescriptor.value;

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

@@ -1 +1 @@
-{"version":3,"file":"snice-layout-fullscreen.js","sources":["../../../components/layout/snice-layout-fullscreen.css?inline","../../../../components/layout/snice-layout-fullscreen.ts"],"sourcesContent":["export default \"/* Fullscreen Layout - For presentations, media viewers, etc */\\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  position: relative;\\n  width: 100vw;\\n  height: 100vh;\\n  overflow: hidden;\\n  background: var(--snice-color-background-dark, #111827);\\n}\\n\\n.background {\\n  position: absolute;\\n  inset: 0;\\n  z-index: 1;\\n}\\n\\n.overlay {\\n  position: absolute;\\n  inset: 0;\\n  z-index: 2;\\n  background: rgba(0, 0, 0, 0.5);\\n  opacity: 0;\\n  transition: opacity var(--snice-transition-normal, 0.25s) ease;\\n  pointer-events: none;\\n}\\n\\n:host([overlay]) .overlay {\\n  opacity: 1;\\n  pointer-events: auto;\\n}\\n\\n.content {\\n  position: absolute;\\n  inset: 0;\\n  z-index: 3;\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n  padding: var(--snice-spacing-lg, 2rem);\\n}\\n\\n.controls {\\n  position: absolute;\\n  bottom: 0;\\n  left: 0;\\n  right: 0;\\n  z-index: 4;\\n  padding: var(--snice-spacing-lg, 2rem);\\n  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));\\n  transform: translateY(100%);\\n  transition: transform var(--snice-transition-normal, 0.25s) ease;\\n}\\n\\n:host(:hover) .controls {\\n  transform: translateY(0);\\n}\\n\\n/* Media queries for mobile */\\n@media (max-width: 768px) {\\n  .controls {\\n    transform: translateY(0);\\n    background: rgba(0, 0, 0, 0.8);\\n  }\\n  \\n  .content {\\n    padding: var(--snice-spacing-md, 1rem);\\n  }\\n}\";",null],"names":[],"mappings":";;;AAAA,UAAe,28CAA28C;;ICI78C,qBAAqB,GAAA,CAAA,MAAA;4BADjC,OAAO,CAAC,yBAAyB,CAAC,CAAA;;;;sBACQ,WAAW;;;;AAAnB,KAAA,cAAQ,WAAW,CAAA;;;;mCACnD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAA;YAC3C,YAAA,CAAA,IAAA,EAAA,IAAA,EAAA,mBAAA,EAAA,EAAA,IAAA,EAAA,OAAA,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,GAAA,EAAA,CAAA,GAAA,EAAA,KAAA,KAAA,EAAA,GAAA,CAAP,OAAO,GAAA,KAAA,CAAA,CAAA,CAAA,EAAA,EAAA,QAAA,EAAA,SAAA,EAAA,EAAA,qBAAA,EAAA,0BAAA,CAAA;YAFT,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;;;;;;;;;;;;;;;;;;KAkBd;QACH;QAEA,GAAG,GAAA;AACD,YAAA,OAAO,GAAG;QACZ;;;YA1BA,IAAA,CAAA,OAAO,GAAA,iBAAA,CAAA,IAAA,EAAA,qBAAA,EAAG,KAAK,CAAA;;;;;;;;;"}
+{"version":3,"file":"snice-layout-fullscreen.js","sources":["../../../components/layout/snice-layout-fullscreen.css?inline","../../../../components/layout/snice-layout-fullscreen.ts"],"sourcesContent":["export default \"/* Fullscreen Layout - For presentations, media viewers, etc */\\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  position: relative;\\n  width: 100vw;\\n  height: 100vh;\\n  overflow: hidden;\\n  background: var(--snice-color-background-dark, #111827);\\n}\\n\\n.background {\\n  position: absolute;\\n  inset: 0;\\n  z-index: 1;\\n}\\n\\n.overlay {\\n  position: absolute;\\n  inset: 0;\\n  z-index: 2;\\n  background: rgba(0, 0, 0, 0.5);\\n  opacity: 0;\\n  transition: opacity var(--snice-transition-normal, 0.25s) ease;\\n  pointer-events: none;\\n}\\n\\n:host([overlay]) .overlay {\\n  opacity: 1;\\n  pointer-events: auto;\\n}\\n\\n.content {\\n  position: absolute;\\n  inset: 0;\\n  z-index: 3;\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n  padding: var(--snice-spacing-lg, 2rem);\\n}\\n\\n.controls {\\n  position: absolute;\\n  bottom: 0;\\n  left: 0;\\n  right: 0;\\n  z-index: 4;\\n  padding: var(--snice-spacing-lg, 2rem);\\n  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));\\n  transform: translateY(100%);\\n  transition: transform var(--snice-transition-normal, 0.25s) ease;\\n}\\n\\n:host(:hover) .controls {\\n  transform: translateY(0);\\n}\\n\\n/* Media queries for mobile */\\n@media (max-width: 768px) {\\n  .controls {\\n    transform: translateY(0);\\n    background: rgba(0, 0, 0, 0.8);\\n  }\\n  \\n  .content {\\n    padding: var(--snice-spacing-md, 1rem);\\n  }\\n}\";",null],"names":[],"mappings":";;;AAAA,UAAe,28CAA28C;;ICI78C,qBAAqB,GAAA,CAAA,MAAA;4BADjC,OAAO,CAAC,yBAAyB,CAAC,CAAA;;;;sBACQ,WAAW;;;;AAAnB,KAAA,cAAQ,WAAW,CAAA;;;;AACnD,YAAA,mBAAA,GAAA,CAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,GAAI,CAAC,CAAA;YAC9B,YAAA,CAAA,IAAA,EAAA,IAAA,EAAA,mBAAA,EAAA,EAAA,IAAA,EAAA,OAAA,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,GAAA,EAAA,CAAA,GAAA,EAAA,KAAA,KAAA,EAAA,GAAA,CAAP,OAAO,GAAA,KAAA,CAAA,CAAA,CAAA,EAAA,EAAA,QAAA,EAAA,SAAA,EAAA,EAAA,qBAAA,EAAA,0BAAA,CAAA;YAFT,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;;;;;;;;;;;;;;;;;;KAkBd;QACH;QAEA,GAAG,GAAA;AACD,YAAA,OAAO,GAAG;QACZ;;;YA1BA,IAAA,CAAA,OAAO,GAAA,iBAAA,CAAA,IAAA,EAAA,qBAAA,EAAG,KAAK,CAAA;;;;;;;;;"}

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

@@ -1,4 +1,13 @@
-export declare class SniceLayoutLanding extends HTMLElement {
+import type { AppContext, Placard, RouteParams, Layout } from 'snice';
+import '../nav/snice-nav.ts';
+import type { SniceNav } from '../nav/snice-nav.ts';
+export declare class SniceLayoutLanding extends HTMLElement implements Layout {
+    navElement?: SniceNav;
+    useNav: boolean;
+    private placards;
+    private currentRoute;
     html(): string;
     css(): string;
+    update(_appContext: AppContext, placards: Placard[], currentRoute: string, _routeParams: RouteParams): void;
+    renderNav(): string;
 }

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

@@ -1,5 +1,6 @@
-import { __esDecorate, __runInitializers } from 'tslib';
-import { element } from 'snice';
+import { __runInitializers, __esDecorate } from 'tslib';
+import { element, query, property, part } from 'snice';
+import '../nav/snice-nav.js';
 
 var css = "/* 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}";
 
@@ -9,10 +10,31 @@ let SniceLayoutLanding = (() => {
     let _classExtraInitializers = [];
     let _classThis;
     let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _navElement_decorators;
+    let _navElement_initializers = [];
+    let _navElement_extraInitializers = [];
+    let _useNav_decorators;
+    let _useNav_initializers = [];
+    let _useNav_extraInitializers = [];
+    let _renderNav_decorators;
     (class extends _classSuper {
         static { _classThis = this; }
+        constructor() {
+            super(...arguments);
+            this.navElement = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _navElement_initializers, void 0));
+            this.useNav = (__runInitializers(this, _navElement_extraInitializers), __runInitializers(this, _useNav_initializers, false));
+            this.placards = (__runInitializers(this, _useNav_extraInitializers), []);
+            this.currentRoute = '';
+        }
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _navElement_decorators = [query('snice-nav')];
+            _useNav_decorators = [property({ type: Boolean, attribute: 'use-nav' })];
+            _renderNav_decorators = [part('nav')];
+            __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);
+            __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, null, _useNav_decorators, { kind: "field", name: "useNav", static: false, private: false, access: { has: obj => "useNav" in obj, get: obj => obj.useNav, set: (obj, value) => { obj.useNav = value; } }, metadata: _metadata }, _useNav_initializers, _useNav_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 });
@@ -28,25 +50,29 @@ let SniceLayoutLanding = (() => {
                 <h1>Brand</h1>
               </slot>
             </div>
-            <nav class="nav">
-              <slot name="nav"></slot>
-            </nav>
+            ${this.useNav ? /*html*/ `
+              <snice-nav class="nav" part="nav" variant="flat" orientation="horizontal"></snice-nav>
+            ` : /*html*/ `
+              <nav class="nav">
+                <slot name="nav"></slot>
+              </nav>
+            `}
             <div class="cta">
               <slot name="cta"></slot>
             </div>
           </div>
         </header>
-        
+
         <main class="main">
           <section class="hero">
             <slot name="hero"></slot>
           </section>
-          
+
           <div class="content">
             <slot></slot>
           </div>
         </main>
-        
+
         <footer class="footer">
           <div class="container">
             <slot name="footer"></slot>
@@ -58,6 +84,19 @@ let SniceLayoutLanding = (() => {
         css() {
             return css;
         }
+        update(_appContext, placards, currentRoute, _routeParams) {
+            this.placards = placards;
+            this.currentRoute = currentRoute;
+            this.useNav = true;
+            this.renderNav();
+        }
+        renderNav() {
+            if (this.navElement) {
+                this.navElement.placards = this.placards;
+                this.navElement.currentRoute = this.currentRoute;
+            }
+            return '';
+        }
     });
     return _classThis;
 })();

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

@@ -1 +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;;;;;;;"}
+{"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":"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"}

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

@@ -1,5 +1,17 @@
-export declare class SniceLayoutSidebar extends HTMLElement {
+import type { AppContext, Placard, RouteParams, Layout } from 'snice';
+import '../drawer/snice-drawer.ts';
+import '../nav/snice-nav.ts';
+import type { SniceNav } from '../nav/snice-nav.ts';
+import type { SniceDrawerElement } from '../drawer/snice-drawer.types.ts';
+export declare class SniceLayoutSidebar extends HTMLElement implements Layout {
     collapsed: boolean;
+    sidebarDrawer?: SniceDrawerElement;
+    navElement: SniceNav;
+    private placards;
+    private currentRoute;
     html(): string;
     css(): string;
+    handleSidebarToggle(): void;
+    update(_appContext: AppContext, placards: Placard[], currentRoute: string, _routeParams: RouteParams): void;
+    renderNav(): string;
 }

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

@@ -1,7 +1,9 @@
-import { __esDecorate, __runInitializers } from 'tslib';
-import { element, property } from 'snice';
+import { __runInitializers, __esDecorate } from 'tslib';
+import { element, property, query, on, part } from 'snice';
+import '../drawer/snice-drawer.js';
+import '../nav/snice-nav.js';
 
-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}";
+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}";
 
 let SniceLayoutSidebar = (() => {
     let _classDecorators = [element('snice-layout-sidebar')];
@@ -9,15 +11,40 @@ let SniceLayoutSidebar = (() => {
     let _classExtraInitializers = [];
     let _classThis;
     let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
     let _collapsed_decorators;
     let _collapsed_initializers = [];
     let _collapsed_extraInitializers = [];
+    let _sidebarDrawer_decorators;
+    let _sidebarDrawer_initializers = [];
+    let _sidebarDrawer_extraInitializers = [];
+    let _navElement_decorators;
+    let _navElement_initializers = [];
+    let _navElement_extraInitializers = [];
+    let _handleSidebarToggle_decorators;
+    let _renderNav_decorators;
     (class extends _classSuper {
         static { _classThis = this; }
+        constructor() {
+            super(...arguments);
+            this.collapsed = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _collapsed_initializers, false));
+            this.sidebarDrawer = (__runInitializers(this, _collapsed_extraInitializers), __runInitializers(this, _sidebarDrawer_initializers, void 0));
+            this.navElement = (__runInitializers(this, _sidebarDrawer_extraInitializers), __runInitializers(this, _navElement_initializers, void 0));
+            this.placards = (__runInitializers(this, _navElement_extraInitializers), []);
+            this.currentRoute = '';
+        }
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _collapsed_decorators = [property({ type: Boolean, reflect: true })];
+            _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);
             __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);
             __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 });
@@ -26,45 +53,59 @@ let SniceLayoutSidebar = (() => {
         html() {
             return /*html*/ `
       <div class="layout">
-        <aside class="sidebar">
-          <div class="sidebar-header">
+        <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>
+          <div class="header-brand">
             <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>
+          <div class="header-content">
             <slot name="header"></slot>
-          </header>
-          
+          </div>
+        </header>
+
+        <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-drawer>
+
           <main class="main">
-            <slot></slot>
+            <slot name="page"></slot>
           </main>
-          
-          <footer class="footer">
-            <slot name="footer"></slot>
-          </footer>
         </div>
+
+        <footer class="footer">
+          <slot name="footer"></slot>
+        </footer>
       </div>
     `;
         }
         css() {
             return css;
         }
-        constructor() {
-            super(...arguments);
-            this.collapsed = __runInitializers(this, _collapsed_initializers, false);
-            __runInitializers(this, _collapsed_extraInitializers);
+        handleSidebarToggle() {
+            if (this.sidebarDrawer) {
+                this.sidebarDrawer.toggle();
+            }
+        }
+        update(_appContext, placards, currentRoute, _routeParams) {
+            this.placards = placards;
+            this.currentRoute = currentRoute;
+            // Update the navigation
+            this.renderNav();
+        }
+        renderNav() {
+            if (this.navElement) {
+                this.navElement.placards = this.placards;
+                this.navElement.currentRoute = this.currentRoute;
+            }
+            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 */\\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;;;;;;;;;"}
+{"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.js

@@ -19,8 +19,8 @@ let SniceLayoutSplit = (() => {
         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 })];
+            _direction_decorators = [property({})];
+            _ratio_decorators = [property({})];
             __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);

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;;;;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;;;;;;;;;"}
+{"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;;;;;;;;;"}