snice 7.0.2 → 7.1.0

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

@@ -1,11 +1,11 @@
 /*!
- * snice v7.0.2
- * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
+ * snice v7.1.0
+ * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
  * (c) 2024
  * Released under the MIT License.
  */
 if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.min.js must be loaded before snice-layout.min.js");}
-var SniceLayout = (function (exports, snice) {
+(function (snice) {
   'use strict';
 
   /******************************************************************************
@@ -251,8 +251,55 @@ var SniceLayout = (function (exports, snice) {
           return { kind: 'registry', value: icon };
       return { kind: 'text', value: icon };
   }
+  /**
+   * Detects icon type and returns appropriate template
+   *
+   * Scheme overrides:
+   * - img://path -> forces <img> element
+   * - text://content -> forces text content
+   *
+   * Auto-detection (when no scheme):
+   * - URLs (http://, https://, /, ./, ../, data:) -> <img>
+   * - Image extensions (svg, png, jpg, jpeg, jfif, pjp, gif, webp, avif, jxl,
+   *   ico, cur, bmp, tif, tiff, heic, heif, apng) -> <img>
+   * - Everything else -> span with text content (emoji, plain text)
+   *
+   * ⚠️ "home" or "settings" renders as PLAIN TEXT, not a Material icon.
+   * For Material Symbols, use the icon slot instead:
+   * <span slot="icon" class="material-symbols-outlined">home</span>
+   *
+   * Examples:
+   * - "/path/icon.svg" -> <img>
+   * - "icon.png" -> <img>
+   * - "img://filename" -> <img> (forced)
+   * - "🏠" -> <span> text (emoji)
+   * - "home" -> <span> text (plain text, NOT a Material icon)
+   * - "text:///not/a/path" -> <span> text (forced)
+   */
+  function renderIcon(icon, className = 'icon') {
+      if (!icon)
+          return snice.html ``;
+      const { kind, value } = classifyIcon(icon);
+      if (kind === 'img') {
+          return snice.html `<img class="${className}" src="${value}" alt="" part="icon" />`;
+      }
+      // Built-in SVG registry (components/icons) — named icons resolve here
+      // BEFORE the font-ligature fallback. Without this, names like 'search'
+      // render as literal text unless an external icon font is loaded.
+      if (kind === 'registry') {
+          return snice.html `<span class="${className}" part="icon">${snice.unsafeHTML(ICONS[value])}</span>`;
+      }
+      // Default: text content (emoji, font icon ligature names)
+      // All content is escaped - no HTML injection possible
+      // Detect ligature icon names (lowercase words with underscores, e.g. "search", "check_circle")
+      // vs emoji/other text — apply --snice-icon-font (defaults to Material Symbols Outlined)
+      if (/^[a-z][a-z0-9_]*$/.test(value)) {
+          return snice.html `<span class="${className} snice-icon-ligature" style="font-family:var(--snice-icon-font,'Material Symbols Outlined'),sans-serif" part="icon">${value}</span>`;
+      }
+      return snice.html `<span class="${className}" part="icon">${value}</span>`;
+  }
 
-  var cssContent$1 = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);overflow:hidden;box-sizing:border-box}.nav{display:flex;gap:var(--snice-spacing-md,1rem)}.nav--horizontal{flex-direction:row;align-items:center}.nav--vertical{flex-direction:column;align-items:stretch}.nav__item{position:relative}.nav__link{display:flex;align-items:center;gap:var(--snice-spacing-sm,.75rem);padding:var(--snice-spacing-sm,.75rem) var(--snice-spacing-md,1rem);color:var(--snice-color-text-secondary,rgb(107 114 128));text-decoration:none;border-radius:var(--snice-border-radius-md,.375rem);font-size:var(--snice-font-size-md, 1rem);font-weight:var(--snice-font-weight-medium,500);box-sizing:border-box;min-width:0;position:relative;transition:background-color var(--snice-transition-fast, 150ms) var(--snice-ease-out, ease),color var(--snice-transition-fast, 150ms) var(--snice-ease-out, ease)}.nav__link:hover{background-color:var(--snice-color-surface-container-low,rgb(243 244 246));color:var(--snice-color-text,rgb(23 23 23))}.nav__link:focus-visible{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(59 130 246 / .5));outline-offset:var(--snice-focus-ring-offset,2px)}.nav__link--active{background-color:var(--snice-color-surface-container,rgb(243 244 246));color:var(--snice-color-primary-hover,rgb(96 165 250))}.nav__link--active:hover{background-color:var(--snice-color-surface-container-low,rgb(249 250 251));color:var(--snice-color-primary-hover,rgb(29 78 216))}:host([active-style=text]) .nav__link,:host([active-style=text]) .nav__link--active,:host([active-style=text]) .nav__link--active:hover,:host([active-style=text]) .nav__link:hover{background-color:transparent}:host([active-style=text]) .nav__link:hover{color:color-mix(in srgb,var(--snice-color-primary,rgb(37 99 235)) 60%,transparent)}:host([active-style=text]) .nav__link--active{color:var(--snice-color-primary-hover,rgb(29 78 216))}:host([active-style=text]) .nav__link--active:hover{color:var(--snice-color-primary-hover,rgb(29 78 216))}:host([active-style=text]) .nav__link::after{content:'';position:absolute;background:var(--snice-color-primary,rgb(37 99 235));left:50%;right:50%;bottom:2px;height:2px;border-radius:1px;transition:left 220ms var(--snice-ease-out, ease),right 220ms var(--snice-ease-out, ease),background-color 220ms var(--snice-ease-out, ease);pointer-events:none}:host([active-style=text]) .nav__link:hover::after{left:20%;right:20%}:host([active-style=text]) .nav__link--active::after{left:0;right:0}:host([active-style=text][orientation=vertical]) .nav__link::after{left:0;right:auto;bottom:20%;top:20%;width:2px;height:auto;transform:scaleY(0);transform-origin:center;transition:transform 220ms var(--snice-ease-out, ease),background-color 220ms var(--snice-ease-out, ease)}:host([active-style=text][orientation=vertical]) .nav__link:hover::after{transform:scaleY(.6)}:host([active-style=text][orientation=vertical]) .nav__link--active::after{top:15%;bottom:15%;transform:scaleY(1)}.nav__icon{display:inline-flex;align-items:center;justify-content:center;font-size:var(--snice-font-size-lg, 1.125rem)}.nav__icon svg{width:1.125rem;height:1.125rem;display:block}.nav__icon img{width:1.25em;height:1.25em;object-fit:contain}.nav__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nav--hierarchical.nav--vertical{flex-direction:column;gap:var(--snice-spacing-xs,.5rem)}.nav--hierarchical.nav--horizontal{flex-direction:row;align-items:flex-start;gap:var(--snice-spacing-lg,1.5rem)}.nav--hierarchical .nav__group{display:flex;flex-direction:column;gap:var(--snice-spacing-xs,.5rem)}.nav--hierarchical .nav__submenu{list-style:none;margin:0;padding:0 0 0 var(--snice-spacing-xl,2rem);display:flex;flex-direction:column;gap:var(--snice-spacing-2xs,.25rem)}.nav--hierarchical .nav__submenu .nav__item{margin:0}.nav--hierarchical .nav__submenu .nav__link{font-size:var(--snice-font-size-sm, .875rem);padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-md,1rem)}.nav--grouped.nav--vertical{flex-direction:column;gap:var(--snice-spacing-lg,1.5rem)}.nav--grouped.nav--horizontal{flex-direction:row;align-items:flex-start;gap:var(--snice-spacing-xl,2rem)}.nav--grouped .nav__group{display:flex;flex-direction:column;gap:var(--snice-spacing-xs,.5rem)}.nav--grouped .nav__group-label{font-size:var(--snice-font-size-xs, .75rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-text-tertiary,rgb(115 115 115));text-transform:uppercase;letter-spacing:var(--snice-tracking-wide, .03em);padding:0 var(--snice-spacing-md,1rem);margin-bottom:var(--snice-spacing-2xs,.25rem)}.nav--vertical .nav__item,.nav--vertical .nav__link{width:100%}@media (max-width:768px){.nav--horizontal{flex-wrap:wrap}.nav__label{font-size:var(--snice-font-size-sm, .875rem)}}@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}";
+  var cssContent$e = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);overflow:hidden;box-sizing:border-box}.nav{display:flex;gap:var(--snice-spacing-md,1rem)}.nav--horizontal{flex-direction:row;align-items:center}.nav--vertical{flex-direction:column;align-items:stretch}.nav__item{position:relative}.nav__link{display:flex;align-items:center;gap:var(--snice-spacing-sm,.75rem);padding:var(--snice-spacing-sm,.75rem) var(--snice-spacing-md,1rem);color:var(--snice-color-text-secondary,rgb(107 114 128));text-decoration:none;border-radius:var(--snice-border-radius-md,.375rem);font-size:var(--snice-font-size-md, 1rem);font-weight:var(--snice-font-weight-medium,500);box-sizing:border-box;min-width:0;position:relative;transition:background-color var(--snice-transition-fast, 150ms) var(--snice-ease-out, ease),color var(--snice-transition-fast, 150ms) var(--snice-ease-out, ease)}.nav__link:hover{background-color:var(--snice-color-surface-container-low,rgb(243 244 246));color:var(--snice-color-text,rgb(23 23 23))}.nav__link:focus-visible{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(59 130 246 / .5));outline-offset:var(--snice-focus-ring-offset,2px)}.nav__link--active{background-color:var(--snice-color-surface-container,rgb(243 244 246));color:var(--snice-color-primary-hover,rgb(96 165 250))}.nav__link--active:hover{background-color:var(--snice-color-surface-container-low,rgb(249 250 251));color:var(--snice-color-primary-hover,rgb(29 78 216))}:host([active-style=text]) .nav__link,:host([active-style=text]) .nav__link--active,:host([active-style=text]) .nav__link--active:hover,:host([active-style=text]) .nav__link:hover{background-color:transparent}:host([active-style=text]) .nav__link:hover{color:color-mix(in srgb,var(--snice-color-primary,rgb(37 99 235)) 60%,transparent)}:host([active-style=text]) .nav__link--active{color:var(--snice-color-primary-hover,rgb(29 78 216))}:host([active-style=text]) .nav__link--active:hover{color:var(--snice-color-primary-hover,rgb(29 78 216))}:host([active-style=text]) .nav__link::after{content:'';position:absolute;background:var(--snice-color-primary,rgb(37 99 235));left:50%;right:50%;bottom:2px;height:2px;border-radius:1px;transition:left 220ms var(--snice-ease-out, ease),right 220ms var(--snice-ease-out, ease),background-color 220ms var(--snice-ease-out, ease);pointer-events:none}:host([active-style=text]) .nav__link:hover::after{left:20%;right:20%}:host([active-style=text]) .nav__link--active::after{left:0;right:0}:host([active-style=text][orientation=vertical]) .nav__link::after{left:0;right:auto;bottom:20%;top:20%;width:2px;height:auto;transform:scaleY(0);transform-origin:center;transition:transform 220ms var(--snice-ease-out, ease),background-color 220ms var(--snice-ease-out, ease)}:host([active-style=text][orientation=vertical]) .nav__link:hover::after{transform:scaleY(.6)}:host([active-style=text][orientation=vertical]) .nav__link--active::after{top:15%;bottom:15%;transform:scaleY(1)}.nav__icon{display:inline-flex;align-items:center;justify-content:center;font-size:var(--snice-font-size-lg, 1.125rem)}.nav__icon svg{width:1.125rem;height:1.125rem;display:block}.nav__icon img{width:1.25em;height:1.25em;object-fit:contain}.nav__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nav--hierarchical.nav--vertical{flex-direction:column;gap:var(--snice-spacing-xs,.5rem)}.nav--hierarchical.nav--horizontal{flex-direction:row;align-items:flex-start;gap:var(--snice-spacing-lg,1.5rem)}.nav--hierarchical .nav__group{display:flex;flex-direction:column;gap:var(--snice-spacing-xs,.5rem)}.nav--hierarchical .nav__submenu{list-style:none;margin:0;padding:0 0 0 var(--snice-spacing-xl,2rem);display:flex;flex-direction:column;gap:var(--snice-spacing-2xs,.25rem)}.nav--hierarchical .nav__submenu .nav__item{margin:0}.nav--hierarchical .nav__submenu .nav__link{font-size:var(--snice-font-size-sm, .875rem);padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-md,1rem)}.nav--grouped.nav--vertical{flex-direction:column;gap:var(--snice-spacing-lg,1.5rem)}.nav--grouped.nav--horizontal{flex-direction:row;align-items:flex-start;gap:var(--snice-spacing-xl,2rem)}.nav--grouped .nav__group{display:flex;flex-direction:column;gap:var(--snice-spacing-xs,.5rem)}.nav--grouped .nav__group-label{font-size:var(--snice-font-size-xs, .75rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-text-tertiary,rgb(115 115 115));text-transform:uppercase;letter-spacing:var(--snice-tracking-wide, .03em);padding:0 var(--snice-spacing-md,1rem);margin-bottom:var(--snice-spacing-2xs,.25rem)}.nav--vertical .nav__item,.nav--vertical .nav__link{width:100%}@media (max-width:768px){.nav--horizontal{flex-wrap:wrap}.nav__label{font-size:var(--snice-font-size-sm, .875rem)}}@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}";
 
   const NAME_KEY = 'data-placard-name';
   const GROUP_KEY = 'data-group';
@@ -333,7 +380,7 @@ var SniceLayout = (function (exports, snice) {
               if (this.shadowRoot.querySelector('style'))
                   return;
               const style = document.createElement('style');
-              style.textContent = cssContent$1;
+              style.textContent = cssContent$e;
               this.shadowRoot.appendChild(style);
           }
           render() {
@@ -829,9 +876,9 @@ var SniceLayout = (function (exports, snice) {
       return _classThis;
   })();
 
-  var cssContent = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);min-height:100vh;min-height:100dvh}:host([contained]){min-height:0}.layout{display:grid;grid-template-rows:auto 1fr auto;min-height:inherit}.header{display:flex;align-items:center;justify-content:space-between;padding:var(--snice-spacing-md,1rem) var(--snice-spacing-lg,2rem);background:var(--snice-color-surface,rgb(255 255 255));border-bottom:1px solid var(--snice-color-border-subtle,var(--snice-color-border,rgb(226 226 226)));box-shadow:var(--snice-shadow-xs,0 1px 2px 0 rgb(0 0 0 / .05))}.brand h1{font-family:var(--snice-font-family-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);margin:0;font-size:var(--snice-heading-lg, 1.5rem);color:var(--snice-color-text,rgb(23 23 23));font-weight:var(--snice-font-weight-semibold,600)}.nav{display:flex;gap:var(--snice-spacing-lg,2rem)}.nav ::slotted(a){text-decoration:none;color:var(--snice-color-text-secondary,rgb(82 82 82));font-weight:var(--snice-font-weight-medium,500);padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-md,1rem);border-radius:var(--snice-border-radius-md,4px);transition:all var(--snice-transition-fast, .15s) ease}.nav ::slotted(a:hover){color:var(--snice-color-primary,rgb(37 99 235));background:var(--snice-color-surface-container-low,rgb(250 250 250))}.nav ::slotted(a.active){color:var(--snice-color-primary,rgb(37 99 235));background:var(--snice-color-primary-subtle,rgb(239 246 255));font-weight:var(--snice-font-weight-semibold,600)}.main{padding:var(--snice-spacing-lg,2rem);background:var(--snice-color-surface-container-low,rgb(250 250 250));overflow-y:auto;position:relative;z-index:0}.footer{padding:var(--snice-spacing-md,1rem) var(--snice-spacing-lg,2rem);background:var(--snice-color-surface,rgb(255 255 255));border-top:1px solid var(--snice-color-border-subtle,var(--snice-color-border,rgb(226 226 226)));text-align:center;color:var(--snice-color-text-secondary,rgb(82 82 82));font-size:var(--snice-font-size-sm, .875rem)}.footer p{margin:0}@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}.footer--empty{display:none}";
+  var cssContent$d = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);min-height:100vh;min-height:100dvh}:host([contained]){min-height:0}.layout{display:grid;grid-template-rows:auto 1fr auto;min-height:inherit}.header{display:flex;align-items:center;justify-content:space-between;padding:var(--snice-spacing-md,1rem) var(--snice-spacing-lg,2rem);background:var(--snice-color-surface,rgb(255 255 255));border-bottom:1px solid var(--snice-color-border-subtle,var(--snice-color-border,rgb(226 226 226)));box-shadow:var(--snice-shadow-xs,0 1px 2px 0 rgb(0 0 0 / .05))}.brand h1{font-family:var(--snice-font-family-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);margin:0;font-size:var(--snice-heading-lg, 1.5rem);color:var(--snice-color-text,rgb(23 23 23));font-weight:var(--snice-font-weight-semibold,600)}.nav{display:flex;gap:var(--snice-spacing-lg,2rem)}.nav ::slotted(a){text-decoration:none;color:var(--snice-color-text-secondary,rgb(82 82 82));font-weight:var(--snice-font-weight-medium,500);padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-md,1rem);border-radius:var(--snice-border-radius-md,4px);transition:all var(--snice-transition-fast, .15s) ease}.nav ::slotted(a:hover){color:var(--snice-color-primary,rgb(37 99 235));background:var(--snice-color-surface-container-low,rgb(250 250 250))}.nav ::slotted(a.active){color:var(--snice-color-primary,rgb(37 99 235));background:var(--snice-color-primary-subtle,rgb(239 246 255));font-weight:var(--snice-font-weight-semibold,600)}.main{padding:var(--snice-spacing-lg,2rem);background:var(--snice-color-surface-container-low,rgb(250 250 250));overflow-y:auto;position:relative;z-index:0}.footer{padding:var(--snice-spacing-md,1rem) var(--snice-spacing-lg,2rem);background:var(--snice-color-surface,rgb(255 255 255));border-top:1px solid var(--snice-color-border-subtle,var(--snice-color-border,rgb(226 226 226)));text-align:center;color:var(--snice-color-text-secondary,rgb(82 82 82));font-size:var(--snice-font-size-sm, .875rem)}.footer p{margin:0}@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}.footer--empty{display:none}";
 
-  let SniceLayout = (() => {
+  (() => {
       let _classDecorators = [snice.element('snice-layout')];
       let _classDescriptor;
       let _classExtraInitializers = [];
@@ -893,7 +940,7 @@ var SniceLayout = (function (exports, snice) {
     `;
           }
           styles() {
-              return snice.css /*css*/ `${cssContent}`;
+              return snice.css /*css*/ `${cssContent$d}`;
           }
           wireFooterState() {
               this.syncFooterState();
@@ -933,9 +980,1607 @@ var SniceLayout = (function (exports, snice) {
       return _classThis;
   })();
 
-  exports.SniceLayout = SniceLayout;
+  var cssContent$c = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);min-height:100vh;min-height:100dvh}:host([contained]){min-height:0}.layout{display:grid;grid-template-columns:1fr 1fr;min-height:inherit;height:100%;background:var(--snice-color-surface,rgb(255 255 255))}:host([panel-position=start]) .layout{grid-template-areas:\"panel form\"}:host([panel-position=start]) .form-side{grid-area:form}.form-side{display:flex;align-items:center;justify-content:center;padding:var(--snice-spacing-xl,2rem)}.form-inner{width:100%;max-width:var(--snice-layout-auth-width,24rem);display:flex;flex-direction:column;gap:var(--snice-spacing-lg,1.5rem)}.brand{font-family:var(--snice-font-family-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);font-size:var(--snice-heading-md, 1.125rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-text,rgb(23 23 23))}.brand:not(:has(::slotted(*))){display:block}.footer{font-size:var(--snice-font-size-sm, .875rem);color:var(--snice-color-text-secondary,rgb(82 82 82))}.panel{display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--snice-layout-auth-panel-bg,var(--snice-color-surface-container,hsl(0 0% 95%)));border-left:1px solid var(--snice-color-border-subtle,var(--snice-color-border,rgb(226 226 226)))}:host([panel-position=start]) .panel{grid-area:panel;border-left:none;border-right:1px solid var(--snice-color-border-subtle,var(--snice-color-border,rgb(226 226 226)))}.panel ::slotted(img),.panel ::slotted(picture),.panel ::slotted(video){width:100%;height:100%;object-fit:cover}@media (max-width:768px){.layout{grid-template-columns:1fr;grid-template-areas:\"form\"}.panel{display:none}.form-side{padding:var(--snice-spacing-lg,1.5rem)}}@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}";
+
+  /**
+   * Split authentication page: the form on one side, brand imagery on the other.
+   *
+   * The brand panel is decorative. Below the breakpoint it steps aside and the
+   * form takes the full width, which is what sign-in pages do everywhere.
+   */
+  (() => {
+      let _classDecorators = [snice.element('snice-layout-auth-split')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _panelPosition_decorators;
+      let _panelPosition_initializers = [];
+      let _panelPosition_extraInitializers = [];
+      let _contained_decorators;
+      let _contained_initializers = [];
+      let _contained_extraInitializers = [];
+      let _render_decorators;
+      let _styles_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _panelPosition_decorators = [snice.property({ attribute: 'panel-position' })];
+              _contained_decorators = [snice.property({ type: Boolean })];
+              _render_decorators = [snice.render()];
+              _styles_decorators = [snice.styles()];
+              __esDecorate(this, null, _render_decorators, { kind: "method", name: "render", static: false, private: false, access: { has: obj => "render" in obj, get: obj => obj.render }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _styles_decorators, { kind: "method", name: "styles", static: false, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(null, null, _panelPosition_decorators, { kind: "field", name: "panelPosition", static: false, private: false, access: { has: obj => "panelPosition" in obj, get: obj => obj.panelPosition, set: (obj, value) => { obj.panelPosition = value; } }, metadata: _metadata }, _panelPosition_initializers, _panelPosition_extraInitializers);
+              __esDecorate(null, null, _contained_decorators, { kind: "field", name: "contained", static: false, private: false, access: { has: obj => "contained" in obj, get: obj => obj.contained, set: (obj, value) => { obj.contained = value; } }, metadata: _metadata }, _contained_initializers, _contained_extraInitializers);
+              __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+              _classThis = _classDescriptor.value;
+              if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+              __runInitializers(_classThis, _classExtraInitializers);
+          }
+          render() {
+              return snice.html /*html*/ `
+      <div class="layout">
+        <section class="form-side" part="form">
+          <div class="form-inner">
+            <div class="brand" part="brand">
+              <slot name="brand"></slot>
+            </div>
+
+            <div class="form-body" part="page">
+              <slot name="page"></slot>
+            </div>
+
+            <div class="footer" part="footer">
+              <slot name="footer"></slot>
+            </div>
+          </div>
+        </section>
+
+        <aside class="panel" part="panel" aria-hidden="true">
+          <slot name="panel"></slot>
+        </aside>
+      </div>
+    `;
+          }
+          styles() {
+              return snice.css /*css*/ `${cssContent$c}`;
+          }
+          constructor() {
+              super(...arguments);
+              /** Which side the brand panel sits on. */
+              this.panelPosition = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _panelPosition_initializers, 'end'));
+              /** Size to the parent element instead of filling the screen. */
+              this.contained = (__runInitializers(this, _panelPosition_extraInitializers), __runInitializers(this, _contained_initializers, false));
+              __runInitializers(this, _contained_extraInitializers);
+          }
+      });
+      return _classThis;
+  })();
+
+  var cssContent$b = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);min-height:100vh;min-height:100dvh}:host([contained]){min-height:0}.layout{min-height:inherit;display:grid;grid-template-rows:auto 1fr auto}.container{max-width:68rem;margin:0 auto;padding:0 var(--snice-spacing-lg,1.5rem)}.header{background:var(--snice-color-surface,rgb(255 255 255));border-bottom:1px solid var(--snice-color-border-subtle,var(--snice-color-border,rgb(226 226 226)));padding:var(--snice-spacing-md,1rem) 0}.header .container{display:flex;align-items:center;justify-content:space-between}.brand h1{font-family:var(--snice-font-family-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);margin:0;font-size:var(--snice-heading-lg, 1.5rem);font-weight:var(--snice-font-weight-bold,700);color:var(--snice-color-text,rgb(23 23 23))}.nav{display:flex;gap:var(--snice-spacing-lg,2rem)}.nav ::slotted(a){text-decoration:none;color:var(--snice-color-text-secondary,rgb(82 82 82));font-weight:var(--snice-font-weight-medium,500);transition:color var(--snice-transition-fast, .15s) ease}.nav ::slotted(a:hover){color:var(--snice-color-primary,rgb(37 99 235))}.main{background:var(--snice-color-surface,rgb(255 255 255));padding:var(--snice-spacing-xl,3rem) 0}.content-area{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--snice-spacing-2xl,3rem);align-items:start}.content-area--with-sidebar{grid-template-columns:minmax(0,1fr) 18rem}.article{max-width:var(--snice-layout-measure,65ch);margin-inline:auto;width:100%}.content-area--with-sidebar .article{justify-self:end;margin-inline:0}.sidebar{background:var(--snice-color-surface-container-high,rgb(252 251 249));border:1px solid var(--snice-color-border-subtle,transparent);border-radius:var(--snice-border-radius-lg,.5rem);padding:var(--snice-spacing-lg,1.5rem);position:sticky;top:var(--snice-spacing-lg,1.5rem)}.sidebar--empty{display:none}.footer{background:var(--snice-color-surface-container,hsl(0 0% 95%));border-top:1px solid var(--snice-color-border-subtle,var(--snice-color-border,rgb(226 226 226)));padding:var(--snice-spacing-xl,3rem) 0}.article ::slotted(h1){font-family:var(--snice-font-family-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);font-size:var(--snice-heading-2xl, 2.25rem);font-weight:var(--snice-font-weight-bold,700);color:var(--snice-color-text,rgb(23 23 23));line-height:var(--snice-line-height-tight, 1.25);margin-bottom:var(--snice-spacing-lg,2rem)}.article ::slotted(h2){font-family:var(--snice-font-family-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);font-size:var(--snice-heading-xl, 1.875rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-text,rgb(23 23 23));margin-top:var(--snice-spacing-xl,3rem);margin-bottom:var(--snice-spacing-md,1rem)}.article ::slotted(p){font-size:var(--snice-font-size-base, 1rem);line-height:var(--snice-line-height-relaxed, 1.625);color:var(--snice-color-text,rgb(23 23 23));margin-bottom:var(--snice-spacing-md,1rem)}@media (max-width:968px){.content-area,.content-area--with-sidebar{grid-template-columns:1fr;gap:var(--snice-spacing-xl,3rem)}.content-area--with-sidebar .article{justify-self:stretch;margin-inline:auto}.sidebar{position:static}}@media (max-width:768px){.header .container{flex-direction:column;gap:var(--snice-spacing-md,1rem)}.main{padding:var(--snice-spacing-lg,2rem) 0}}@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}";
+
+  (() => {
+      let _classDecorators = [snice.element('snice-layout-blog')];
+      let _classDescriptor;
+      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 _hasSidebar_decorators;
+      let _hasSidebar_initializers = [];
+      let _hasSidebar_extraInitializers = [];
+      let _render_decorators;
+      let _styles_decorators;
+      let _wireSlotDetection_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.hasSidebar = (__runInitializers(this, _useNav_extraInitializers), __runInitializers(this, _hasSidebar_initializers, false));
+              this.placards = (__runInitializers(this, _hasSidebar_extraInitializers), []);
+              this.currentRoute = '';
+          }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _navElement_decorators = [snice.query('snice-nav')];
+              _useNav_decorators = [snice.property({ type: Boolean, attribute: 'use-nav' })];
+              _hasSidebar_decorators = [snice.property({ attribute: false })];
+              _render_decorators = [snice.render()];
+              _styles_decorators = [snice.styles()];
+              _wireSlotDetection_decorators = [snice.ready()];
+              __esDecorate(this, null, _render_decorators, { kind: "method", name: "render", static: false, private: false, access: { has: obj => "render" in obj, get: obj => obj.render }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _styles_decorators, { kind: "method", name: "styles", static: false, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _wireSlotDetection_decorators, { kind: "method", name: "wireSlotDetection", static: false, private: false, access: { has: obj => "wireSlotDetection" in obj, get: obj => obj.wireSlotDetection }, 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, null, _hasSidebar_decorators, { kind: "field", name: "hasSidebar", static: false, private: false, access: { has: obj => "hasSidebar" in obj, get: obj => obj.hasSidebar, set: (obj, value) => { obj.hasSidebar = value; } }, metadata: _metadata }, _hasSidebar_initializers, _hasSidebar_extraInitializers);
+              __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+              _classThis = _classDescriptor.value;
+              if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+              __runInitializers(_classThis, _classExtraInitializers);
+          }
+          render() {
+              return snice.html /*html*/ `
+      <div class="layout">
+        <header class="header">
+          <div class="container">
+            <div class="brand">
+              <slot name="brand">
+                <h1>Blog</h1>
+              </slot>
+            </div>
+            <if ${this.useNav}>
+              <snice-nav class="nav" variant="flat" orientation="horizontal"></snice-nav>
+            </if>
+            <if ${!this.useNav}>
+              <nav class="nav">
+                <slot name="nav"></slot>
+              </nav>
+            </if>
+          </div>
+        </header>
+
+        <main class="main">
+          <div class="container">
+            <div class="content-area${this.hasSidebar ? ' content-area--with-sidebar' : ''}">
+              <article class="article">
+                <slot name="page"></slot>
+              </article>
+
+              <aside class="sidebar${this.hasSidebar ? '' : ' sidebar--empty'}">
+                <slot name="sidebar"></slot>
+              </aside>
+            </div>
+          </div>
+        </main>
+
+        <footer class="footer">
+          <div class="container">
+            <slot name="footer"></slot>
+          </div>
+        </footer>
+      </div>
+    `;
+          }
+          styles() {
+              return snice.css /*css*/ `${cssContent$b}`;
+          }
+          wireSlotDetection() {
+              this.syncSlotState();
+              this.shadowRoot?.addEventListener('slotchange', () => this.syncSlotState());
+          }
+          syncSlotState() {
+              this.hasSidebar = !!this.querySelector('[slot="sidebar"]');
+          }
+          update(appContext, placards, currentRoute, routeParams) {
+              this.placards = placards;
+              this.currentRoute = currentRoute;
+              this.useNav = true;
+              this.updateNav(appContext, routeParams);
+          }
+          updateNav(appContext, routeParams) {
+              if (this.navElement) {
+                  this.navElement.update(this.placards, appContext, this.currentRoute, routeParams);
+              }
+          }
+      });
+      return _classThis;
+  })();
+
+  var cssContent$a = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);min-height:100vh;min-height:100dvh}:host([contained]){min-height:0}.layout{min-height:inherit;display:grid;grid-template-rows:auto 1fr auto;background:var(--snice-color-surface,rgb(255 255 255))}.header{background:var(--snice-color-surface-container-high,rgb(252 251 249));border-bottom:1px solid var(--snice-color-border-subtle,var(--snice-color-border,rgb(226 226 226)));padding:var(--snice-spacing-md,1rem) var(--snice-spacing-lg,1.5rem)}.main{padding:var(--snice-spacing-lg,2rem)}.grid{display:grid;grid-template-columns:repeat(3,1fr)}:host([columns=\"1\"]) .grid{grid-template-columns:1fr}:host([columns=\"2\"]) .grid{grid-template-columns:repeat(2,1fr)}:host([columns=\"3\"]) .grid{grid-template-columns:repeat(3,1fr)}:host([columns=\"4\"]) .grid{grid-template-columns:repeat(4,1fr)}:host([columns=\"6\"]) .grid{grid-template-columns:repeat(6,1fr)}:host([gap=sm]) .grid{gap:var(--snice-spacing-sm,.75rem)}:host(:not([gap])) .grid,:host([gap=md]) .grid{gap:var(--snice-spacing-md,1rem)}:host([gap=lg]) .grid{gap:var(--snice-spacing-lg,2rem)}:host([gap=xl]) .grid{gap:var(--snice-spacing-xl,3rem)}.footer{background:var(--snice-color-surface-container,hsl(0 0% 95%));border-top:1px solid var(--snice-color-border-subtle,var(--snice-color-border,rgb(226 226 226)));padding:var(--snice-spacing-md,1rem) var(--snice-spacing-lg,1.5rem)}.footer--empty,.header--empty{display:none}@media (max-width:1200px){:host([columns=\"6\"]) .grid{grid-template-columns:repeat(4,1fr)}}@media (max-width:992px){:host([columns=\"4\"]) .grid,:host([columns=\"6\"]) .grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:768px){:host(:not([columns])) .grid,:host([columns=\"3\"]) .grid,:host([columns=\"4\"]) .grid,:host([columns=\"6\"]) .grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:480px){.grid{grid-template-columns:1fr!important}.main{padding:var(--snice-spacing-md,1rem)}}@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}";
+
+  (() => {
+      let _classDecorators = [snice.element('snice-layout-card')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _columns_decorators;
+      let _columns_initializers = [];
+      let _columns_extraInitializers = [];
+      let _gap_decorators;
+      let _gap_initializers = [];
+      let _gap_extraInitializers = [];
+      let _hasFooter_decorators;
+      let _hasFooter_initializers = [];
+      let _hasFooter_extraInitializers = [];
+      let _hasHeader_decorators;
+      let _hasHeader_initializers = [];
+      let _hasHeader_extraInitializers = [];
+      let _render_decorators;
+      let _wireSlotDetection_decorators;
+      let _styles_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _columns_decorators = [snice.property({})];
+              _gap_decorators = [snice.property({})];
+              _hasFooter_decorators = [snice.property({ attribute: false })];
+              _hasHeader_decorators = [snice.property({ attribute: false })];
+              _render_decorators = [snice.render()];
+              _wireSlotDetection_decorators = [snice.ready()];
+              _styles_decorators = [snice.styles()];
+              __esDecorate(this, null, _render_decorators, { kind: "method", name: "render", static: false, private: false, access: { has: obj => "render" in obj, get: obj => obj.render }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _wireSlotDetection_decorators, { kind: "method", name: "wireSlotDetection", static: false, private: false, access: { has: obj => "wireSlotDetection" in obj, get: obj => obj.wireSlotDetection }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _styles_decorators, { kind: "method", name: "styles", static: false, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(null, null, _columns_decorators, { kind: "field", name: "columns", static: false, private: false, access: { has: obj => "columns" in obj, get: obj => obj.columns, set: (obj, value) => { obj.columns = value; } }, metadata: _metadata }, _columns_initializers, _columns_extraInitializers);
+              __esDecorate(null, null, _gap_decorators, { kind: "field", name: "gap", static: false, private: false, access: { has: obj => "gap" in obj, get: obj => obj.gap, set: (obj, value) => { obj.gap = value; } }, metadata: _metadata }, _gap_initializers, _gap_extraInitializers);
+              __esDecorate(null, null, _hasFooter_decorators, { kind: "field", name: "hasFooter", static: false, private: false, access: { has: obj => "hasFooter" in obj, get: obj => obj.hasFooter, set: (obj, value) => { obj.hasFooter = value; } }, metadata: _metadata }, _hasFooter_initializers, _hasFooter_extraInitializers);
+              __esDecorate(null, null, _hasHeader_decorators, { kind: "field", name: "hasHeader", static: false, private: false, access: { has: obj => "hasHeader" in obj, get: obj => obj.hasHeader, set: (obj, value) => { obj.hasHeader = value; } }, metadata: _metadata }, _hasHeader_initializers, _hasHeader_extraInitializers);
+              __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+              _classThis = _classDescriptor.value;
+              if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+              __runInitializers(_classThis, _classExtraInitializers);
+          }
+          render() {
+              return snice.html /*html*/ `
+      <div class="layout">
+        <header class="header${this.hasHeader ? '' : ' header--empty'}">
+          <slot name="header"></slot>
+        </header>
+
+        <main class="main">
+          <div class="grid">
+            <slot name="page"></slot>
+          </div>
+        </main>
+
+        <footer class="footer${this.hasFooter ? '' : ' footer--empty'}">
+          <slot name="footer"></slot>
+        </footer>
+      </div>
+    `;
+          }
+          wireSlotDetection() {
+              this.syncSlotState();
+              this.shadowRoot?.addEventListener('slotchange', () => this.syncSlotState());
+          }
+          syncSlotState() {
+              this.hasFooter = !!this.querySelector('[slot="footer"]');
+              this.hasHeader = !!this.querySelector('[slot="header"]');
+          }
+          styles() {
+              return snice.css /*css*/ `${cssContent$a}`;
+          }
+          constructor() {
+              super(...arguments);
+              this.columns = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _columns_initializers, '3'));
+              this.gap = (__runInitializers(this, _columns_extraInitializers), __runInitializers(this, _gap_initializers, 'md'));
+              this.hasFooter = (__runInitializers(this, _gap_extraInitializers), __runInitializers(this, _hasFooter_initializers, false));
+              this.hasHeader = (__runInitializers(this, _hasFooter_extraInitializers), __runInitializers(this, _hasHeader_initializers, false));
+              __runInitializers(this, _hasHeader_extraInitializers);
+          }
+      });
+      return _classThis;
+  })();
+
+  var cssContent$9 = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);min-height:100vh;min-height:100dvh}:host([contained]){min-height:0}.layout{min-height:inherit;display:flex;align-items:center;justify-content:center;padding:var(--snice-spacing-xl,2rem);background:var(--snice-color-surface,rgb(255 255 255))}.stack{display:flex;flex-direction:column;align-items:center;gap:var(--snice-spacing-lg,1.5rem);width:100%}.brand{display:flex;justify-content:center;font-family:var(--snice-font-family-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);font-size:var(--snice-heading-md, 1.125rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-text,rgb(23 23 23))}.footer{display:flex;justify-content:center;gap:var(--snice-spacing-md,1rem);font-size:var(--snice-font-size-sm, .875rem);color:var(--snice-color-text-secondary,rgb(82 82 82))}.brand--empty,.footer--empty{display:none}.container{width:100%;max-width:24rem;background:var(--snice-color-surface-container-highest,hsl(0 0% 100%));border:1px solid var(--snice-color-border-subtle,transparent);border-radius:var(--snice-border-radius-lg,.5rem);box-shadow:var(--snice-shadow-lg,0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1));padding:var(--snice-spacing-xl,2rem)}:host([width=sm]) .container{max-width:20rem}:host([width=md]) .container{max-width:24rem}:host([width=lg]) .container{max-width:32rem}:host([width=xl]) .container{max-width:38rem}@media (max-width:480px){.layout{padding:var(--snice-spacing-md,1rem)}.container{padding:var(--snice-spacing-lg,1.5rem)}}@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}";
+
+  (() => {
+      let _classDecorators = [snice.element('snice-layout-centered')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _width_decorators;
+      let _width_initializers = [];
+      let _width_extraInitializers = [];
+      let _hasBrand_decorators;
+      let _hasBrand_initializers = [];
+      let _hasBrand_extraInitializers = [];
+      let _hasFooter_decorators;
+      let _hasFooter_initializers = [];
+      let _hasFooter_extraInitializers = [];
+      let _render_decorators;
+      let _wireSlotDetection_decorators;
+      let _styles_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _width_decorators = [snice.property({})];
+              _hasBrand_decorators = [snice.property({ attribute: false })];
+              _hasFooter_decorators = [snice.property({ attribute: false })];
+              _render_decorators = [snice.render()];
+              _wireSlotDetection_decorators = [snice.ready()];
+              _styles_decorators = [snice.styles()];
+              __esDecorate(this, null, _render_decorators, { kind: "method", name: "render", static: false, private: false, access: { has: obj => "render" in obj, get: obj => obj.render }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _wireSlotDetection_decorators, { kind: "method", name: "wireSlotDetection", static: false, private: false, access: { has: obj => "wireSlotDetection" in obj, get: obj => obj.wireSlotDetection }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _styles_decorators, { kind: "method", name: "styles", static: false, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(null, null, _width_decorators, { kind: "field", name: "width", static: false, private: false, access: { has: obj => "width" in obj, get: obj => obj.width, set: (obj, value) => { obj.width = value; } }, metadata: _metadata }, _width_initializers, _width_extraInitializers);
+              __esDecorate(null, null, _hasBrand_decorators, { kind: "field", name: "hasBrand", static: false, private: false, access: { has: obj => "hasBrand" in obj, get: obj => obj.hasBrand, set: (obj, value) => { obj.hasBrand = value; } }, metadata: _metadata }, _hasBrand_initializers, _hasBrand_extraInitializers);
+              __esDecorate(null, null, _hasFooter_decorators, { kind: "field", name: "hasFooter", static: false, private: false, access: { has: obj => "hasFooter" in obj, get: obj => obj.hasFooter, set: (obj, value) => { obj.hasFooter = value; } }, metadata: _metadata }, _hasFooter_initializers, _hasFooter_extraInitializers);
+              __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+              _classThis = _classDescriptor.value;
+              if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+              __runInitializers(_classThis, _classExtraInitializers);
+          }
+          render() {
+              return snice.html /*html*/ `
+      <div class="layout">
+        <div class="stack">
+          <div class="brand${this.hasBrand ? '' : ' brand--empty'}">
+            <slot name="brand"></slot>
+          </div>
+
+          <div class="container">
+            <slot name="page"></slot>
+          </div>
+
+          <div class="footer${this.hasFooter ? '' : ' footer--empty'}">
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+          }
+          wireSlotDetection() {
+              this.syncSlotState();
+              this.shadowRoot?.addEventListener('slotchange', () => this.syncSlotState());
+          }
+          syncSlotState() {
+              this.hasBrand = !!this.querySelector('[slot="brand"]');
+              this.hasFooter = !!this.querySelector('[slot="footer"]');
+          }
+          styles() {
+              return snice.css /*css*/ `${cssContent$9}`;
+          }
+          constructor() {
+              super(...arguments);
+              this.width = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _width_initializers, 'md'));
+              this.hasBrand = (__runInitializers(this, _width_extraInitializers), __runInitializers(this, _hasBrand_initializers, false));
+              this.hasFooter = (__runInitializers(this, _hasBrand_extraInitializers), __runInitializers(this, _hasFooter_initializers, false));
+              __runInitializers(this, _hasFooter_extraInitializers);
+          }
+      });
+      return _classThis;
+  })();
+
+  var cssContent$8 = ":host{display:block;--breadcrumb-font-size:0.875rem;--breadcrumb-spacing:0.5rem;--breadcrumb-color:var(--snice-color-text-secondary, rgb(82 82 82));--breadcrumb-hover-color:var(--snice-color-primary, rgb(37 99 235));--breadcrumb-active-color:var(--snice-color-text, rgb(23 23 23));--breadcrumb-separator-color:var(--snice-color-text-tertiary, rgb(163 163 163))}case,default,if,when{display:contents}.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;list-style:none;margin:0;padding:0;font-size:var(--breadcrumb-font-size);line-height:1.5}.breadcrumb-item{display:flex;align-items:center;color:var(--breadcrumb-color)}.breadcrumb-link{color:inherit;text-decoration:none;transition:color .2s;cursor:pointer;outline:0;border-radius:var(--snice-border-radius-sm,.125rem);padding:.125rem .25rem;margin:-.125rem -.25rem;display:inline-flex;align-items:center;gap:.375rem}.breadcrumb-link:hover{color:var(--breadcrumb-hover-color);text-decoration:underline}.breadcrumb-link:focus-visible{box-shadow:0 0 0 2px var(--snice-focus-ring-color,rgb(59 130 246 / .5))}.breadcrumb-text{padding:2px 4px;margin:-2px -4px;display:inline-flex;align-items:center;gap:.375rem}.breadcrumb-icon{display:inline-flex;align-items:center;justify-content:center;font-size:1.1em;width:1.2em;height:1.2em;line-height:1}.breadcrumb-icon svg{width:1.2em;height:1.2em}.breadcrumb-icon img{width:1.2em;height:1.2em;object-fit:contain}.breadcrumb-icon-image{width:1.2em;height:1.2em;object-fit:contain;vertical-align:middle}[hidden]{display:none!important}.breadcrumb-item--active{color:var(--breadcrumb-active-color);font-weight:var(--snice-font-weight-medium,500)}.breadcrumb-item--active .breadcrumb-link{cursor:default;pointer-events:none}.breadcrumb-separator{margin:0 var(--breadcrumb-spacing);color:var(--breadcrumb-separator-color);user-select:none}.breadcrumb-ellipsis{display:flex;align-items:center;padding:2px 4px;margin:-2px -4px;cursor:pointer;color:var(--breadcrumb-color);background:0 0;border:none;font:inherit;border-radius:var(--snice-border-radius-sm,.125rem);transition:background .2s}.breadcrumb-ellipsis:hover{background:var(--snice-color-surface-hover,rgb(0 0 0 / .05))}.breadcrumb-ellipsis:focus-visible{box-shadow:0 0 0 2px var(--snice-focus-ring-color,rgb(59 130 246 / .5));outline:0}:host([size=small]){--breadcrumb-font-size:0.75rem;--breadcrumb-spacing:0.375rem}:host([size=large]){--breadcrumb-font-size:1rem;--breadcrumb-spacing:0.625rem}.breadcrumb--collapsed .breadcrumb-item--hidden{display:none}@media (max-width:640px){.breadcrumb{font-size:calc(var(--breadcrumb-font-size) * .9)}}.breadcrumb-ellipsis-icon{display:flex}.breadcrumb-ellipsis-icon svg{width:1rem;height:1rem}@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}";
+
+  (() => {
+      let _classDecorators = [snice.element('snice-breadcrumbs')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _items_decorators;
+      let _items_initializers = [];
+      let _items_extraInitializers = [];
+      let _separator_decorators;
+      let _separator_initializers = [];
+      let _separator_extraInitializers = [];
+      let _size_decorators;
+      let _size_initializers = [];
+      let _size_extraInitializers = [];
+      let _maxItems_decorators;
+      let _maxItems_initializers = [];
+      let _maxItems_extraInitializers = [];
+      let _breadcrumbElement_decorators;
+      let _breadcrumbElement_initializers = [];
+      let _breadcrumbElement_extraInitializers = [];
+      let _collapsed_decorators;
+      let _collapsed_initializers = [];
+      let _collapsed_extraInitializers = [];
+      let _renderTrigger_decorators;
+      let _renderTrigger_initializers = [];
+      let _renderTrigger_extraInitializers = [];
+      let _render_decorators;
+      let _styles_decorators;
+      let _emitBreadcrumbClick_decorators;
+      let _updateBreadcrumb_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _items_decorators = [snice.property({ type: Array, attribute: false })];
+              _separator_decorators = [snice.property({})];
+              _size_decorators = [snice.property({})];
+              _maxItems_decorators = [snice.property({ type: Number, attribute: 'max-items' })];
+              _breadcrumbElement_decorators = [snice.query('.breadcrumb')];
+              _collapsed_decorators = [snice.property({ type: Boolean })];
+              _renderTrigger_decorators = [snice.property({ type: Number, attribute: false })];
+              _render_decorators = [snice.render()];
+              _styles_decorators = [snice.styles()];
+              _emitBreadcrumbClick_decorators = [snice.dispatch('breadcrumb-click', { bubbles: true, composed: true })];
+              _updateBreadcrumb_decorators = [snice.watch('items', 'separator', 'maxItems')];
+              __esDecorate(this, null, _render_decorators, { kind: "method", name: "render", static: false, private: false, access: { has: obj => "render" in obj, get: obj => obj.render }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _styles_decorators, { kind: "method", name: "styles", static: false, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _emitBreadcrumbClick_decorators, { kind: "method", name: "emitBreadcrumbClick", static: false, private: false, access: { has: obj => "emitBreadcrumbClick" in obj, get: obj => obj.emitBreadcrumbClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _updateBreadcrumb_decorators, { kind: "method", name: "updateBreadcrumb", static: false, private: false, access: { has: obj => "updateBreadcrumb" in obj, get: obj => obj.updateBreadcrumb }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(null, null, _items_decorators, { kind: "field", name: "items", static: false, private: false, access: { has: obj => "items" in obj, get: obj => obj.items, set: (obj, value) => { obj.items = value; } }, metadata: _metadata }, _items_initializers, _items_extraInitializers);
+              __esDecorate(null, null, _separator_decorators, { kind: "field", name: "separator", static: false, private: false, access: { has: obj => "separator" in obj, get: obj => obj.separator, set: (obj, value) => { obj.separator = value; } }, metadata: _metadata }, _separator_initializers, _separator_extraInitializers);
+              __esDecorate(null, null, _size_decorators, { kind: "field", name: "size", static: false, private: false, access: { has: obj => "size" in obj, get: obj => obj.size, set: (obj, value) => { obj.size = value; } }, metadata: _metadata }, _size_initializers, _size_extraInitializers);
+              __esDecorate(null, null, _maxItems_decorators, { kind: "field", name: "maxItems", static: false, private: false, access: { has: obj => "maxItems" in obj, get: obj => obj.maxItems, set: (obj, value) => { obj.maxItems = value; } }, metadata: _metadata }, _maxItems_initializers, _maxItems_extraInitializers);
+              __esDecorate(null, null, _breadcrumbElement_decorators, { kind: "field", name: "breadcrumbElement", static: false, private: false, access: { has: obj => "breadcrumbElement" in obj, get: obj => obj.breadcrumbElement, set: (obj, value) => { obj.breadcrumbElement = value; } }, metadata: _metadata }, _breadcrumbElement_initializers, _breadcrumbElement_extraInitializers);
+              __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, _renderTrigger_decorators, { kind: "field", name: "renderTrigger", static: false, private: false, access: { has: obj => "renderTrigger" in obj, get: obj => obj.renderTrigger, set: (obj, value) => { obj.renderTrigger = value; } }, metadata: _metadata }, _renderTrigger_initializers, _renderTrigger_extraInitializers);
+              __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+              _classThis = _classDescriptor.value;
+              if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+              __runInitializers(_classThis, _classExtraInitializers);
+          }
+          render() {
+              const allItems = this.getAllItems();
+              const visibleItems = this.getVisibleItems(allItems);
+              const hasCollapsed = this.maxItems > 0 && allItems.length > this.maxItems && this.collapsed;
+              const breadcrumbClass = `breadcrumb${hasCollapsed ? ' breadcrumb--collapsed' : ''}`;
+              return snice.html /*html*/ `
+      <slot style="display: none" @slotchange="${() => this.handleSlotChange()}"></slot>
+      <nav part="base" aria-label="Breadcrumb" @click="${(e) => this.handleClick(e)}">
+        <ol part="list" class="${breadcrumbClass}">
+          ${visibleItems.map((item, index) => {
+                const isLast = index === visibleItems.length - 1;
+                const isActive = item.active || isLast;
+                const isHidden = hasCollapsed && index > 0 && index < visibleItems.length - 2;
+                const itemClass = `breadcrumb-item${isActive ? ' breadcrumb-item--active' : ''}${isHidden ? ' breadcrumb-item--hidden' : ''}`;
+                const allIndex = allItems.indexOf(item);
+                const showLink = !!item.href && !isActive;
+                const showActiveText = !showLink && isActive;
+                const showInactiveText = !showLink && !isActive;
+                return snice.html /*html*/ `
+              <li class="${itemClass}">
+                <if ${showLink}>
+                  <a part="link" href="${item.href}"
+                     class="breadcrumb-link"
+                     data-index="${allIndex}"
+                     tabindex="0">
+                    ${this.renderItemIcon(item)}
+                    ${item.label}
+                  </a>
+                </if>
+                <if ${showActiveText}>
+                  <span class="breadcrumb-text" aria-current="page">
+                    ${this.renderItemIcon(item)}
+                    ${item.label}
+                  </span>
+                </if>
+                <if ${showInactiveText}>
+                  <span class="breadcrumb-text">
+                    ${this.renderItemIcon(item)}
+                    ${item.label}
+                  </span>
+                </if>
+                <if ${!isLast}>
+                  <span part="separator" class="breadcrumb-separator" aria-hidden="true">
+                    ${this.separator}
+                  </span>
+                </if>
+              </li>
+              <if ${hasCollapsed && index === 0 && allItems.length > this.maxItems}>
+                <li class="breadcrumb-item">
+                  <button part="ellipsis" class="breadcrumb-ellipsis"
+                          aria-label="Show all breadcrumbs"
+                          aria-expanded="false"
+                          tabindex="0">
+                    <span class="breadcrumb-ellipsis-icon" aria-hidden="true">${snice.unsafeHTML(ELLIPSIS_HORIZONTAL)}</span>
+                  </button>
+                  <span class="breadcrumb-separator" aria-hidden="true">
+                    ${this.separator}
+                  </span>
+                </li>
+              </if>
+            `;
+            })}
+        </ol>
+      </nav>
+    `;
+          }
+          styles() {
+              return snice.css `${cssContent$8}`;
+          }
+          getAllItems() {
+              // Prefer slot items if available, otherwise use items property
+              return this.slotItems.length > 0 ? this.slotItems : this.items;
+          }
+          getVisibleItems(allItems) {
+              if (this.maxItems <= 0 || allItems.length <= this.maxItems || !this.collapsed) {
+                  return allItems;
+              }
+              // Show first item and last (maxItems - 1) items
+              const firstItem = allItems[0];
+              const lastItems = allItems.slice(-(this.maxItems - 1));
+              return [firstItem, ...lastItems];
+          }
+          handleClick(event) {
+              const target = event.target;
+              // Handle ellipsis click
+              if (target.closest('.breadcrumb-ellipsis')) {
+                  this.collapsed = false;
+                  // The ellipsis button disappears on expand; move focus to the first
+                  // newly revealed crumb so keyboard users aren't dropped to the body.
+                  this.rendered?.then?.(() => {
+                      const firstRevealed = this.shadowRoot?.querySelectorAll('.breadcrumb-link')[1];
+                      (firstRevealed ?? this.shadowRoot?.querySelector('.breadcrumb-link'))?.focus();
+                  });
+                  return;
+              }
+              // Handle breadcrumb link click
+              const link = target.closest('.breadcrumb-link');
+              if (link) {
+                  const href = link.getAttribute('href') || '';
+                  const idxAttr = link.getAttribute('data-index');
+                  const allItems = this.getAllItems();
+                  const index = idxAttr !== null ? parseInt(idxAttr, 10) : -1;
+                  const item = index >= 0 && index < allItems.length ? allItems[index] : undefined;
+                  const label = item?.label ?? link.textContent?.trim() ?? '';
+                  this.emitBreadcrumbClick({ item, index, href, label });
+              }
+          }
+          emitBreadcrumbClick(detail) {
+              return detail;
+          }
+          handleSlotChange() {
+              const slot = this.shadowRoot?.querySelector('slot');
+              if (!slot)
+                  return;
+              const crumbs = slot.assignedElements().filter(el => el.tagName.toLowerCase() === 'snice-crumb');
+              this.slotItems = crumbs.map(crumb => {
+                  // Check for slotted icon element
+                  const iconElement = crumb.querySelector('[slot="icon"]');
+                  return {
+                      label: crumb.label || crumb.textContent?.trim() || '',
+                      href: crumb.href || undefined,
+                      icon: crumb.icon || undefined,
+                      iconImage: crumb.iconImage || undefined,
+                      active: crumb.active || false,
+                      iconNode: iconElement || undefined
+                  };
+              });
+              // Trigger re-render to display slot items by updating a property
+              this.renderTrigger++;
+          }
+          updateBreadcrumb() {
+              this.collapsed = true;
+          }
+          setItems(items) {
+              this.items = items;
+          }
+          renderItemIcon(item) {
+              // Slotted icon node takes precedence
+              if (item.iconNode) {
+                  const clone = item.iconNode.cloneNode(true);
+                  clone.classList.add('breadcrumb-icon');
+                  clone.removeAttribute('slot');
+                  return snice.html `${clone}`;
+              }
+              // iconImage takes precedence for backwards compatibility
+              if (item.iconImage) {
+                  return renderIcon(item.iconImage, 'breadcrumb-icon');
+              }
+              if (item.icon) {
+                  return renderIcon(item.icon, 'breadcrumb-icon');
+              }
+              return snice.html ``;
+          }
+          constructor() {
+              super(...arguments);
+              this.items = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _items_initializers, []));
+              this.separator = (__runInitializers(this, _items_extraInitializers), __runInitializers(this, _separator_initializers, '/'));
+              this.size = (__runInitializers(this, _separator_extraInitializers), __runInitializers(this, _size_initializers, 'medium'));
+              this.maxItems = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _maxItems_initializers, 0));
+              this.breadcrumbElement = (__runInitializers(this, _maxItems_extraInitializers), __runInitializers(this, _breadcrumbElement_initializers, void 0));
+              this.collapsed = (__runInitializers(this, _breadcrumbElement_extraInitializers), __runInitializers(this, _collapsed_initializers, true));
+              this.slotItems = (__runInitializers(this, _collapsed_extraInitializers), []);
+              this.renderTrigger = __runInitializers(this, _renderTrigger_initializers, 0);
+              __runInitializers(this, _renderTrigger_extraInitializers);
+          }
+      });
+      return _classThis;
+  })();
+
+  var cssContent$7 = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif)}:host(:not([contained])){position:fixed;inset:0}:host([contained]){position:relative;min-height:0;height:100%}.layout{display:flex;flex-direction:column;min-height:100%;background:var(--snice-color-surface,rgb(255 255 255))}.header{display:flex;align-items:center;gap:var(--snice-spacing-md,1rem);padding:var(--snice-spacing-sm,.75rem) var(--snice-spacing-lg,1.5rem);background:var(--snice-color-surface-container-high,rgb(252 251 249));border-bottom:1px solid var(--snice-color-border-subtle,var(--snice-color-border,rgb(226 226 226)));position:relative;z-index:var(--snice-z-sticky,10)}.header-start h1{font-family:var(--snice-font-family-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);margin:0;font-size:var(--snice-heading-md, 1.125rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-text,rgb(23 23 23));white-space:nowrap}.header-content{flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:var(--snice-spacing-md,1rem)}.sidebar-toggle{display:flex;align-items:center;justify-content:center;width:var(--snice-layout-control-size,2rem);height:var(--snice-layout-control-size,2rem);background:0 0;border:none;color:var(--snice-color-text-secondary,rgb(82 82 82));cursor:pointer;padding:var(--snice-spacing-xs,.5rem);border-radius:var(--snice-border-radius-md,6px);transition:all var(--snice-transition-fast, 150ms) ease}.sidebar-toggle:hover{background:var(--snice-color-surface-hover,var(--snice-color-overlay-hover,hsl(0 0% 0% / .04)));color:var(--snice-color-text,rgb(23 23 23))}.sidebar-toggle:focus-visible{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(59 130 246 / .5));outline-offset:var(--snice-focus-ring-offset,2px)}.toolbar{padding:var(--snice-spacing-sm,.75rem) var(--snice-spacing-lg,1.5rem);border-bottom:1px solid var(--snice-color-border-subtle,var(--snice-color-border,rgb(226 226 226)));background:var(--snice-color-surface,rgb(255 255 255))}.toolbar--hidden{display:none}.body-area{position:relative;display:flex;flex:1;overflow:hidden}.sidebar{flex-shrink:0;width:var(--snice-layout-sidebar-width,16rem);background:var(--snice-color-surface-container-low,rgb(250 250 250));border-right:1px solid var(--snice-color-border-subtle,var(--snice-color-border,rgb(226 226 226)));overflow-y:auto;overflow-x:hidden;padding-block:var(--snice-spacing-sm,0.75rem);transition:width var(--snice-transition-normal, 250ms) ease,transform var(--snice-transition-normal, 250ms) ease}.sidebar--collapsed{width:0;border-right:none}.scrim{display:none}.sidebar ::slotted(a),.sidebar ::slotted(button){display:flex;align-items:center;gap:var(--snice-spacing-sm,.75rem);padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-md,1rem);margin:0 var(--snice-spacing-xs,.5rem);border-radius:var(--snice-border-radius-md,6px);color:var(--snice-color-text-secondary,rgb(82 82 82));text-decoration:none;cursor:pointer;transition:background var(--snice-transition-fast, 150ms) ease,color var(--snice-transition-fast, 150ms) ease}.sidebar ::slotted(a:hover),.sidebar ::slotted(button:hover){background:var(--snice-color-surface-hover,var(--snice-color-overlay-hover,hsl(0 0% 0% / .06)));color:var(--snice-color-text,rgb(23 23 23))}.sidebar ::slotted(a:focus-visible),.sidebar ::slotted(button:focus-visible){outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(59 130 246 / .5));outline-offset:var(--snice-focus-ring-offset,2px)}.sidebar ::slotted([aria-current]){background:var(--snice-color-primary-alpha,color-mix(in srgb,var(--snice-color-primary,rgb(37 99 235)) 10%,transparent));color:var(--snice-color-primary,rgb(37 99 235))}.sidebar-nav{display:flex;flex-direction:column;gap:var(--snice-spacing-sm,.75rem);padding:var(--snice-spacing-md,1rem)}.content-area{flex:1;min-width:0;display:grid;grid-template-columns:1fr;grid-template-areas:\"main\";overflow-y:auto}.content-area--railed{grid-template-columns:1fr var(--snice-layout-rail-width,18rem);grid-template-areas:\"main right-sidebar\"}.main{grid-area:main;padding:var(--snice-spacing-xl,2rem);min-width:0}.right-sidebar{grid-area:right-sidebar;background:var(--snice-color-surface-container-low,rgb(250 250 250));padding:var(--snice-spacing-lg,1.5rem);border-left:1px solid var(--snice-color-border-subtle,var(--snice-color-border,rgb(226 226 226)))}.right-sidebar--empty{display:none}@media (max-width:1024px){.content-area--railed{grid-template-columns:1fr;grid-template-areas:\"main\" \"right-sidebar\"}.right-sidebar{border-left:none;border-top:1px solid var(--snice-color-border-subtle,var(--snice-color-border,rgb(226 226 226)))}}@media (max-width:768px){.header,.toolbar{padding:var(--snice-spacing-sm,.75rem) var(--snice-spacing-md,1rem)}.sidebar{position:absolute;top:0;bottom:0;left:0;z-index:var(--snice-z-overlay,1100);width:min(80vw,18rem);transform:translateX(-105%);box-shadow:var(--snice-shadow-lg,0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1))}.sidebar--collapsed{width:min(80vw,18rem);border-right:1px solid var(--snice-color-border-subtle,var(--snice-color-border,rgb(226 226 226)))}.sidebar--mobile-open{transform:translateX(0)}.scrim--visible{display:block;position:absolute;inset:0;z-index:var(--snice-z-scrim,1000);background:rgb(0 0 0 / .4)}.main{padding:var(--snice-spacing-md,1rem)}}@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}";
 
-  return exports;
+  (() => {
+      let _classDecorators = [snice.element('snice-layout-dashboard')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _navElement_decorators;
+      let _navElement_initializers = [];
+      let _navElement_extraInitializers = [];
+      let _placards_decorators;
+      let _placards_initializers = [];
+      let _placards_extraInitializers = [];
+      let _currentRoute_decorators;
+      let _currentRoute_initializers = [];
+      let _currentRoute_extraInitializers = [];
+      let _collapsed_decorators;
+      let _collapsed_initializers = [];
+      let _collapsed_extraInitializers = [];
+      let _contained_decorators;
+      let _contained_initializers = [];
+      let _contained_extraInitializers = [];
+      let _mobileOpen_decorators;
+      let _mobileOpen_initializers = [];
+      let _mobileOpen_extraInitializers = [];
+      let _hasRail_decorators;
+      let _hasRail_initializers = [];
+      let _hasRail_extraInitializers = [];
+      let _hasToolbarContent_decorators;
+      let _hasToolbarContent_initializers = [];
+      let _hasToolbarContent_extraInitializers = [];
+      let _render_decorators;
+      let _wireSlotDetection_decorators;
+      let _styles_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _navElement_decorators = [snice.query('snice-nav')];
+              _placards_decorators = [snice.property({ type: Array })];
+              _currentRoute_decorators = [snice.property({ attribute: false })];
+              _collapsed_decorators = [snice.property({ type: Boolean })];
+              _contained_decorators = [snice.property({ type: Boolean })];
+              _mobileOpen_decorators = [snice.property({ attribute: false })];
+              _hasRail_decorators = [snice.property({ attribute: false })];
+              _hasToolbarContent_decorators = [snice.property({ attribute: false })];
+              _render_decorators = [snice.render()];
+              _wireSlotDetection_decorators = [snice.ready()];
+              _styles_decorators = [snice.styles()];
+              __esDecorate(this, null, _render_decorators, { kind: "method", name: "render", static: false, private: false, access: { has: obj => "render" in obj, get: obj => obj.render }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _wireSlotDetection_decorators, { kind: "method", name: "wireSlotDetection", static: false, private: false, access: { has: obj => "wireSlotDetection" in obj, get: obj => obj.wireSlotDetection }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _styles_decorators, { kind: "method", name: "styles", static: false, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles }, 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, _placards_decorators, { kind: "field", name: "placards", static: false, private: false, access: { has: obj => "placards" in obj, get: obj => obj.placards, set: (obj, value) => { obj.placards = value; } }, metadata: _metadata }, _placards_initializers, _placards_extraInitializers);
+              __esDecorate(null, null, _currentRoute_decorators, { kind: "field", name: "currentRoute", static: false, private: false, access: { has: obj => "currentRoute" in obj, get: obj => obj.currentRoute, set: (obj, value) => { obj.currentRoute = value; } }, metadata: _metadata }, _currentRoute_initializers, _currentRoute_extraInitializers);
+              __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, _contained_decorators, { kind: "field", name: "contained", static: false, private: false, access: { has: obj => "contained" in obj, get: obj => obj.contained, set: (obj, value) => { obj.contained = value; } }, metadata: _metadata }, _contained_initializers, _contained_extraInitializers);
+              __esDecorate(null, null, _mobileOpen_decorators, { kind: "field", name: "mobileOpen", static: false, private: false, access: { has: obj => "mobileOpen" in obj, get: obj => obj.mobileOpen, set: (obj, value) => { obj.mobileOpen = value; } }, metadata: _metadata }, _mobileOpen_initializers, _mobileOpen_extraInitializers);
+              __esDecorate(null, null, _hasRail_decorators, { kind: "field", name: "hasRail", static: false, private: false, access: { has: obj => "hasRail" in obj, get: obj => obj.hasRail, set: (obj, value) => { obj.hasRail = value; } }, metadata: _metadata }, _hasRail_initializers, _hasRail_extraInitializers);
+              __esDecorate(null, null, _hasToolbarContent_decorators, { kind: "field", name: "hasToolbarContent", static: false, private: false, access: { has: obj => "hasToolbarContent" in obj, get: obj => obj.hasToolbarContent, set: (obj, value) => { obj.hasToolbarContent = value; } }, metadata: _metadata }, _hasToolbarContent_initializers, _hasToolbarContent_extraInitializers);
+              __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+              _classThis = _classDescriptor.value;
+              if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+              __runInitializers(_classThis, _classExtraInitializers);
+          }
+          render() {
+              const sidebarCollapsedClass = this.collapsed ? ' sidebar--collapsed' : '';
+              const sidebarMobileClass = this.mobileOpen ? ' sidebar--mobile-open' : '';
+              const scrimClass = this.mobileOpen ? ' scrim--visible' : '';
+              const expanded = this.mobileOpen || !this.collapsed;
+              const railedClass = this.hasRail ? ' content-area--railed' : '';
+              const railEmptyClass = this.hasRail ? '' : ' right-sidebar--empty';
+              const breadcrumbsHtml = this.getBreadcrumbsHtml();
+              const toolbarHiddenClass = this.hasToolbarContent || breadcrumbsHtml ? '' : ' toolbar--hidden';
+              return snice.html /*html*/ `
+      <div class="layout">
+        <header class="header" part="header">
+          <button class="sidebar-toggle" type="button" aria-label="Toggle sidebar" aria-expanded="${expanded}" @click=${this.handleSidebarToggle}>
+            <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-start">
+            <slot name="brand">
+              <h1>Dashboard</h1>
+            </slot>
+          </div>
+          <div class="header-content">
+            <slot name="header"></slot>
+          </div>
+        </header>
+
+        <div class="toolbar${toolbarHiddenClass}" part="toolbar">
+          <slot name="toolbar">${breadcrumbsHtml}</slot>
+        </div>
+
+        <div class="body-area">
+          <aside class="sidebar${sidebarCollapsedClass}${sidebarMobileClass}" part="sidebar">
+            <slot name="sidebar">
+              <snice-nav class="sidebar-nav" variant="hierarchical" orientation="vertical"></snice-nav>
+            </slot>
+          </aside>
+
+          <div class="scrim${scrimClass}" part="scrim" @click=${this.handleScrimClick}></div>
+
+          <div class="content-area${railedClass}">
+            <main class="main" part="main">
+              <slot name="page"></slot>
+            </main>
+
+            <aside class="right-sidebar${railEmptyClass}" part="right-sidebar">
+              <slot name="right-sidebar"></slot>
+            </aside>
+          </div>
+        </div>
+      </div>
+    `;
+          }
+          handleSidebarToggle() {
+              const isMobileViewport = typeof window !== 'undefined'
+                  && typeof window.matchMedia === 'function'
+                  && window.matchMedia('(max-width: 768px)').matches;
+              if (isMobileViewport) {
+                  this.mobileOpen = !this.mobileOpen;
+                  return;
+              }
+              this.collapsed = !this.collapsed;
+          }
+          handleScrimClick() {
+              this.mobileOpen = false;
+          }
+          wireSlotDetection() {
+              this.syncSlotState();
+              // slotchange bubbles to the shadow root (not past it), so one delegated
+              // listener survives re-renders that replace the slot elements.
+              this.shadowRoot?.addEventListener('slotchange', () => this.syncSlotState());
+          }
+          syncSlotState() {
+              this.hasRail = !!this.querySelector('[slot="right-sidebar"]');
+              this.hasToolbarContent = !!this.querySelector('[slot="toolbar"]');
+          }
+          styles() {
+              return snice.css /*css*/ `${cssContent$7}`;
+          }
+          update(appContext, placards, currentRoute, routeParams) {
+              this.placards = placards;
+              this.currentRoute = currentRoute;
+              // Update navigation
+              this.updateNav(appContext, routeParams);
+          }
+          updateNav(appContext, routeParams) {
+              if (this.navElement) {
+                  this.navElement.update(this.placards, appContext, this.currentRoute, routeParams);
+              }
+          }
+          getBreadcrumbsHtml() {
+              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.href || '',
+                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;
+          }
+          constructor() {
+              super(...arguments);
+              this.navElement = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _navElement_initializers, void 0));
+              this.placards = (__runInitializers(this, _navElement_extraInitializers), __runInitializers(this, _placards_initializers, []));
+              this.currentRoute = (__runInitializers(this, _placards_extraInitializers), __runInitializers(this, _currentRoute_initializers, ''));
+              this.collapsed = (__runInitializers(this, _currentRoute_extraInitializers), __runInitializers(this, _collapsed_initializers, false));
+              /** Size to the parent element instead of pinning to the viewport. */
+              this.contained = (__runInitializers(this, _collapsed_extraInitializers), __runInitializers(this, _contained_initializers, false));
+              this.mobileOpen = (__runInitializers(this, _contained_extraInitializers), __runInitializers(this, _mobileOpen_initializers, false));
+              this.hasRail = (__runInitializers(this, _mobileOpen_extraInitializers), __runInitializers(this, _hasRail_initializers, false));
+              this.hasToolbarContent = (__runInitializers(this, _hasRail_extraInitializers), __runInitializers(this, _hasToolbarContent_initializers, false));
+              __runInitializers(this, _hasToolbarContent_extraInitializers);
+          }
+      });
+      return _classThis;
+  })();
+
+  var cssContent$6 = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif)}:host(:not([contained])){position:fixed;inset:0}:host([contained]){position:relative;min-height:0;height:100%}.layout{min-height:inherit;display:grid;grid-template-rows:auto 1fr;height:100%;background:var(--snice-color-surface,rgb(255 255 255))}.skip-link{position:absolute;top:var(--snice-spacing-xs,.5rem);left:var(--snice-spacing-xs,.5rem);z-index:var(--snice-z-notification,1300);padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-md,1rem);border-radius:var(--snice-border-radius-md,6px);background:var(--snice-color-surface-container-highest,hsl(0 0% 100%));color:var(--snice-color-text,rgb(23 23 23));text-decoration:none;transform:translateY(-200%);transition:transform var(--snice-transition-fast, 150ms) ease}.skip-link:focus-visible{transform:translateY(0);outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(59 130 246 / .5));outline-offset:var(--snice-focus-ring-offset,2px)}.header{display:flex;align-items:center;gap:var(--snice-spacing-md,1rem);height:var(--snice-layout-docs-header-height,4rem);padding:0 var(--snice-spacing-lg,1.5rem);background:var(--snice-color-surface-container-high,rgb(252 251 249));border-bottom:1px solid var(--snice-color-border-subtle,var(--snice-color-border,rgb(226 226 226)));position:relative;z-index:var(--snice-z-sticky,10)}.header-brand{display:flex;align-items:center;font-family:var(--snice-font-family-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-text,rgb(23 23 23));white-space:nowrap}.header-content{flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:var(--snice-spacing-md,1rem)}.sidebar-toggle{display:none;align-items:center;justify-content:center;width:var(--snice-layout-control-size,2rem);height:var(--snice-layout-control-size,2rem);background:0 0;border:none;color:var(--snice-color-text-secondary,rgb(82 82 82));cursor:pointer;padding:var(--snice-spacing-xs,.5rem);border-radius:var(--snice-border-radius-md,6px);transition:background var(--snice-transition-fast, 150ms) ease,color var(--snice-transition-fast, 150ms) ease}.sidebar-toggle:hover{background:var(--snice-color-surface-hover,var(--snice-color-overlay-hover,hsl(0 0% 0% / .06)));color:var(--snice-color-text,rgb(23 23 23))}.sidebar-toggle:focus-visible{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(59 130 246 / .5));outline-offset:var(--snice-focus-ring-offset,2px)}.body-area{position:relative;display:grid;grid-template-columns:var(--snice-layout-docs-nav-width,18.75rem) minmax(0,1fr) var(--snice-layout-docs-toc-width,18.75rem);min-height:0;overflow:hidden}.sidebar{overflow-y:auto;padding:var(--snice-spacing-lg,1.5rem) var(--snice-spacing-md,1rem);border-right:1px solid var(--snice-color-border-subtle,var(--snice-color-border,rgb(226 226 226)));background:var(--snice-color-surface,rgb(255 255 255));transition:transform var(--snice-transition-normal, 250ms) ease}.sidebar ::slotted(a){display:block;padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-sm,.75rem);border-radius:var(--snice-border-radius-md,6px);color:var(--snice-color-text-secondary,rgb(82 82 82));text-decoration:none;transition:background var(--snice-transition-fast, 150ms) ease,color var(--snice-transition-fast, 150ms) ease}.sidebar ::slotted(a:hover){background:var(--snice-color-surface-hover,var(--snice-color-overlay-hover,hsl(0 0% 0% / .06)));color:var(--snice-color-text,rgb(23 23 23))}.sidebar ::slotted([aria-current]){background:var(--snice-color-primary-alpha,color-mix(in srgb,var(--snice-color-primary,rgb(37 99 235)) 10%,transparent));color:var(--snice-color-primary,rgb(37 99 235))}.scrim{display:none}.content{overflow-y:auto;padding:var(--snice-spacing-xl,2rem);min-width:0}.prose{max-width:var(--snice-layout-measure,65ch);margin-inline:auto}.prose ::slotted(h1),.prose ::slotted(h2),.prose ::slotted(h3),.prose ::slotted(h4){scroll-margin-top:calc(var(--snice-layout-docs-header-height,4rem) + var(--snice-spacing-md,1rem))}.footer{max-width:var(--snice-layout-measure,65ch);margin-inline:auto;padding-top:var(--snice-spacing-xl,2rem);color:var(--snice-color-text-secondary,rgb(82 82 82));font-size:var(--snice-font-size-sm, .875rem)}.toc{overflow-y:auto;padding:var(--snice-spacing-lg,1.5rem) var(--snice-spacing-md,1rem);border-left:1px solid var(--snice-color-border-subtle,var(--snice-color-border,rgb(226 226 226)));font-size:var(--snice-font-size-sm, .875rem)}.toc ::slotted(*){position:sticky;top:0}@media (max-width:1152px){.body-area{grid-template-columns:var(--snice-layout-docs-nav-width,18.75rem) minmax(0,1fr)}.toc{display:none}}@media (max-width:996px){.sidebar-toggle{display:flex}.body-area{grid-template-columns:minmax(0,1fr)}.sidebar{position:absolute;top:0;bottom:0;left:0;z-index:var(--snice-z-overlay,1100);width:min(83vw,var(--snice-layout-docs-nav-width,18.75rem));transform:translateX(-105%);box-shadow:var(--snice-shadow-lg,0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1))}.sidebar--open{transform:translateX(0)}.scrim--visible{display:block;position:absolute;inset:0;z-index:var(--snice-z-scrim,1000);background:rgb(0 0 0 / .4)}.content{padding:var(--snice-spacing-lg,1.5rem)}.header{height:var(--snice-layout-docs-header-height-compact,3.5rem);padding:0 var(--snice-spacing-md,1rem)}}@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}";
+
+  /**
+   * Documentation shell: navigation tree, prose at a reading measure, and an
+   * on-this-page rail.
+   *
+   * The rail leaves first on narrower screens, then the tree becomes a drawer —
+   * the order documentation sites settle on. Each region scrolls on its own.
+   */
+  (() => {
+      let _classDecorators = [snice.element('snice-layout-docs')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _sidebarOpen_decorators;
+      let _sidebarOpen_initializers = [];
+      let _sidebarOpen_extraInitializers = [];
+      let _contained_decorators;
+      let _contained_initializers = [];
+      let _contained_extraInitializers = [];
+      let _hasToc_decorators;
+      let _hasToc_initializers = [];
+      let _hasToc_extraInitializers = [];
+      let _render_decorators;
+      let _styles_decorators;
+      let _wireRegions_decorators;
+      let _releaseListeners_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          constructor() {
+              super(...arguments);
+              /** Sidebar drawer state below the navigation breakpoint. */
+              this.sidebarOpen = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _sidebarOpen_initializers, false));
+              /** Size to the parent element instead of pinning to the viewport. */
+              this.contained = (__runInitializers(this, _sidebarOpen_extraInitializers), __runInitializers(this, _contained_initializers, false));
+              this.hasToc = (__runInitializers(this, _contained_extraInitializers), __runInitializers(this, _hasToc_initializers, false));
+              this.navElement = __runInitializers(this, _hasToc_extraInitializers);
+              this.placards = [];
+              this.currentRoute = '';
+          }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _sidebarOpen_decorators = [snice.property({ attribute: false })];
+              _contained_decorators = [snice.property({ type: Boolean })];
+              _hasToc_decorators = [snice.property({ attribute: false })];
+              _render_decorators = [snice.render()];
+              _styles_decorators = [snice.styles()];
+              _wireRegions_decorators = [snice.ready()];
+              _releaseListeners_decorators = [snice.dispose()];
+              __esDecorate(this, null, _render_decorators, { kind: "method", name: "render", static: false, private: false, access: { has: obj => "render" in obj, get: obj => obj.render }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _styles_decorators, { kind: "method", name: "styles", static: false, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _wireRegions_decorators, { kind: "method", name: "wireRegions", static: false, private: false, access: { has: obj => "wireRegions" in obj, get: obj => obj.wireRegions }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _releaseListeners_decorators, { kind: "method", name: "releaseListeners", static: false, private: false, access: { has: obj => "releaseListeners" in obj, get: obj => obj.releaseListeners }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(null, null, _sidebarOpen_decorators, { kind: "field", name: "sidebarOpen", static: false, private: false, access: { has: obj => "sidebarOpen" in obj, get: obj => obj.sidebarOpen, set: (obj, value) => { obj.sidebarOpen = value; } }, metadata: _metadata }, _sidebarOpen_initializers, _sidebarOpen_extraInitializers);
+              __esDecorate(null, null, _contained_decorators, { kind: "field", name: "contained", static: false, private: false, access: { has: obj => "contained" in obj, get: obj => obj.contained, set: (obj, value) => { obj.contained = value; } }, metadata: _metadata }, _contained_initializers, _contained_extraInitializers);
+              __esDecorate(null, null, _hasToc_decorators, { kind: "field", name: "hasToc", static: false, private: false, access: { has: obj => "hasToc" in obj, get: obj => obj.hasToc, set: (obj, value) => { obj.hasToc = value; } }, metadata: _metadata }, _hasToc_initializers, _hasToc_extraInitializers);
+              __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+              _classThis = _classDescriptor.value;
+              if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+              __runInitializers(_classThis, _classExtraInitializers);
+          }
+          render() {
+              const sidebarClass = this.sidebarOpen ? ' sidebar--open' : '';
+              const scrimClass = this.sidebarOpen ? ' scrim--visible' : '';
+              const tocClass = this.hasToc ? '' : ' toc--empty';
+              return snice.html /*html*/ `
+      <div class="layout">
+        <a class="skip-link" href="#snice-docs-main">Skip to content</a>
+
+        <header class="header" part="header">
+          <button
+            class="sidebar-toggle"
+            type="button"
+            aria-label="Toggle documentation navigation"
+            aria-expanded="${this.sidebarOpen}"
+            @click=${this.handleSidebarToggle}
+          >
+            <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">
+              <span class="brand-fallback">Documentation</span>
+            </slot>
+          </div>
+          <div class="header-content">
+            <slot name="header"></slot>
+          </div>
+        </header>
+
+        <div class="body-area">
+          <nav class="sidebar${sidebarClass}" part="sidebar" aria-label="Documentation">
+            <slot name="sidebar">
+              <snice-nav class="sidebar-nav" variant="hierarchical" orientation="vertical"></snice-nav>
+            </slot>
+          </nav>
+
+          <div class="scrim${scrimClass}" part="scrim" @click=${this.handleScrimClick}></div>
+
+          <main class="content" id="snice-docs-main" part="main">
+            <article class="prose" part="prose">
+              <slot name="page"></slot>
+            </article>
+            <footer class="footer" part="footer">
+              <slot name="footer"></slot>
+            </footer>
+          </main>
+
+          <aside class="toc${tocClass}" part="toc" aria-label="On this page">
+            <slot name="toc"></slot>
+          </aside>
+        </div>
+      </div>
+    `;
+          }
+          styles() {
+              return snice.css /*css*/ `${cssContent$6}`;
+          }
+          handleSidebarToggle() {
+              this.sidebarOpen = !this.sidebarOpen;
+          }
+          handleScrimClick() {
+              this.sidebarOpen = false;
+          }
+          wireRegions() {
+              this.syncSlotState();
+              this.shadowRoot?.addEventListener('slotchange', () => this.syncSlotState());
+              if (typeof document !== 'undefined') {
+                  this.escapeListener = (event) => {
+                      if (event.key === 'Escape' && this.sidebarOpen)
+                          this.sidebarOpen = false;
+                  };
+                  document.addEventListener('keydown', this.escapeListener);
+              }
+          }
+          releaseListeners() {
+              if (this.escapeListener && typeof document !== 'undefined') {
+                  document.removeEventListener('keydown', this.escapeListener);
+                  this.escapeListener = undefined;
+              }
+          }
+          syncSlotState() {
+              this.hasToc = !!this.querySelector('[slot="toc"]');
+              this.navElement = this.shadowRoot?.querySelector('snice-nav');
+          }
+          update(appContext, placards, currentRoute, routeParams) {
+              this.placards = placards;
+              this.currentRoute = currentRoute;
+              this.updateNav(appContext, routeParams);
+          }
+          updateNav(appContext, routeParams) {
+              const nav = this.navElement ?? this.shadowRoot?.querySelector('snice-nav');
+              if (nav) {
+                  nav.update(this.placards, appContext, this.currentRoute, routeParams);
+              }
+          }
+      });
+      return _classThis;
+  })();
+
+  var cssContent$5 = ":host{display:block;min-height:100%;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif)}:host(:not([contained])){position:fixed;inset:0}:host([contained]){position:relative;min-height:0;height:100%}.layout{position:relative;width:100%;height:100%;min-height:inherit;overflow:hidden;background:var(--snice-color-surface,hsl(var(--snice-color-gray-900,0 0% 9%)))}.background{position:absolute;inset:0;z-index:1}.overlay{position:absolute;inset:0;z-index:2;background:hsl(0 0% 0% / .5);opacity:0;transition:opacity var(--snice-transition-normal, .25s) ease;pointer-events:none}:host([overlay]) .overlay{opacity:1;pointer-events:auto}.content{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;padding:var(--snice-spacing-lg,2rem)}.controls{position:absolute;bottom:0;left:0;right:0;z-index:4;padding:var(--snice-spacing-lg,2rem);background:linear-gradient(transparent,hsl(0 0% 0% / .8));transform:translateY(100%);transition:transform var(--snice-transition-normal, .25s) ease}:host(:hover) .controls{transform:translateY(0)}@media (max-width:768px){.controls{transform:translateY(0);background:hsl(0 0% 0% / .8)}.content{padding:var(--snice-spacing-md,1rem)}}@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}";
+
+  (() => {
+      let _classDecorators = [snice.element('snice-layout-fullscreen')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _overlay_decorators;
+      let _overlay_initializers = [];
+      let _overlay_extraInitializers = [];
+      let _contained_decorators;
+      let _contained_initializers = [];
+      let _contained_extraInitializers = [];
+      let _render_decorators;
+      let _styles_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _overlay_decorators = [snice.property({ type: Boolean, })];
+              _contained_decorators = [snice.property({ type: Boolean })];
+              _render_decorators = [snice.render()];
+              _styles_decorators = [snice.styles()];
+              __esDecorate(this, null, _render_decorators, { kind: "method", name: "render", static: false, private: false, access: { has: obj => "render" in obj, get: obj => obj.render }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _styles_decorators, { kind: "method", name: "styles", static: false, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __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, null, _contained_decorators, { kind: "field", name: "contained", static: false, private: false, access: { has: obj => "contained" in obj, get: obj => obj.contained, set: (obj, value) => { obj.contained = value; } }, metadata: _metadata }, _contained_initializers, _contained_extraInitializers);
+              __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+              _classThis = _classDescriptor.value;
+              if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+              __runInitializers(_classThis, _classExtraInitializers);
+          }
+          render() {
+              return snice.html /*html*/ `
+      <div class="layout">
+        <div class="background">
+          <slot name="background"></slot>
+        </div>
+
+        <div class="overlay">
+          <slot name="overlay"></slot>
+        </div>
+
+        <div class="content">
+          <slot name="page"></slot>
+        </div>
+
+        <div class="controls">
+          <slot name="controls"></slot>
+        </div>
+      </div>
+    `;
+          }
+          styles() {
+              return snice.css /*css*/ `${cssContent$5}`;
+          }
+          constructor() {
+              super(...arguments);
+              this.overlay = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _overlay_initializers, false));
+              /** Size to the parent element instead of pinning to the viewport. */
+              this.contained = (__runInitializers(this, _overlay_extraInitializers), __runInitializers(this, _contained_initializers, false));
+              __runInitializers(this, _contained_extraInitializers);
+          }
+      });
+      return _classThis;
+  })();
+
+  var cssContent$4 = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);min-height:100vh;min-height:100dvh}:host([contained]){min-height:0}.layout{min-height:inherit;display:flex;flex-direction:column}.container{max-width:var(--snice-layout-container,80rem);margin:0 auto;padding:0 var(--snice-spacing-lg,2rem)}.header{background:color-mix(in srgb,var(--snice-color-surface,rgb(255 255 255)) 72%,transparent);backdrop-filter:saturate(1.4) blur(8px);-webkit-backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--snice-color-border-subtle,var(--snice-color-border,rgb(226 226 226)));position:sticky;top:0;z-index:var(--snice-z-sticky,10)}.header .container{display:flex;align-items:center;justify-content:space-between;padding-top:var(--snice-spacing-md,1rem);padding-bottom:var(--snice-spacing-md,1rem)}.brand h1{font-family:var(--snice-font-family-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);margin:0;font-size:var(--snice-heading-lg, 1.5rem);font-weight:var(--snice-font-weight-bold,700);color:var(--snice-color-text,rgb(23 23 23))}.nav{display:flex;gap:var(--snice-spacing-lg,2rem)}.nav ::slotted(a){text-decoration:none;color:var(--snice-color-text-secondary,rgb(82 82 82));font-weight:var(--snice-font-weight-medium,500);transition:color var(--snice-transition-fast, .15s) ease}.nav ::slotted(a:hover){color:var(--snice-color-primary,rgb(37 99 235))}.main{flex:1}.hero{background:var(--snice-color-surface-container-low,hsl(0 0% 98%));padding:var(--snice-spacing-2xl,4rem) 0}.content{background:var(--snice-color-surface,rgb(255 255 255))}.footer{background:var(--snice-color-surface-container,hsl(0 0% 95%));border-top:1px solid var(--snice-color-border-subtle,var(--snice-color-border,rgb(226 226 226)));padding:var(--snice-spacing-xl,3rem) 0;margin-top:auto}@media (max-width:768px){.header .container{flex-direction:column;gap:var(--snice-spacing-md,1rem)}.nav{gap:var(--snice-spacing-md,1rem)}.hero{padding:var(--snice-spacing-xl,3rem) 0}}@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}";
+
+  (() => {
+      let _classDecorators = [snice.element('snice-layout-landing')];
+      let _classDescriptor;
+      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 _render_decorators;
+      let _styles_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 = [snice.query('snice-nav')];
+              _useNav_decorators = [snice.property({ type: Boolean, attribute: 'use-nav' })];
+              _render_decorators = [snice.render()];
+              _styles_decorators = [snice.styles()];
+              __esDecorate(this, null, _render_decorators, { kind: "method", name: "render", static: false, private: false, access: { has: obj => "render" in obj, get: obj => obj.render }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _styles_decorators, { kind: "method", name: "styles", static: false, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles }, 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 });
+              __runInitializers(_classThis, _classExtraInitializers);
+          }
+          render() {
+              return snice.html /*html*/ `
+      <div class="layout">
+        <header class="header">
+          <div class="container">
+            <div class="brand">
+              <slot name="brand">
+                <h1>Brand</h1>
+              </slot>
+            </div>
+            <if ${this.useNav}>
+              <snice-nav class="nav" variant="flat" orientation="horizontal"></snice-nav>
+            </if>
+            <if ${!this.useNav}>
+              <nav class="nav">
+                <slot name="nav"></slot>
+              </nav>
+            </if>
+            <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 name="page"></slot>
+          </div>
+        </main>
+
+        <footer class="footer">
+          <div class="container">
+            <slot name="footer"></slot>
+          </div>
+        </footer>
+      </div>
+    `;
+          }
+          styles() {
+              return snice.css /*css*/ `${cssContent$4}`;
+          }
+          update(appContext, placards, currentRoute, routeParams) {
+              this.placards = placards;
+              this.currentRoute = currentRoute;
+              this.useNav = true;
+              this.updateNav(appContext, routeParams);
+          }
+          updateNav(appContext, routeParams) {
+              if (this.navElement) {
+                  this.navElement.update(this.placards, appContext, this.currentRoute, routeParams);
+              }
+          }
+      });
+      return _classThis;
+  })();
+
+  var cssContent$3 = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif)}:host(:not([contained])){position:fixed;inset:0}:host([contained]){position:relative;min-height:0;height:100%}.layout{min-height:inherit;display:grid;grid-template-rows:auto 1fr;height:100%;background:var(--snice-color-surface,rgb(255 255 255))}.header{display:flex;align-items:center;gap:var(--snice-spacing-md,1rem);padding:var(--snice-spacing-sm,.75rem) var(--snice-spacing-lg,1.5rem);background:var(--snice-color-surface-container-high,rgb(252 251 249));border-bottom:1px solid var(--snice-color-border-subtle,var(--snice-color-border,rgb(226 226 226)))}.header:not(:has(slot[name=brand])):not(:has(slot[name=header])){display:none}.header-brand{display:flex;align-items:center;font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-text,rgb(23 23 23))}.header-content{flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:var(--snice-spacing-md,1rem)}.back{display:flex;align-items:center;justify-content:center;width:var(--snice-layout-control-size,2rem);height:var(--snice-layout-control-size,2rem);background:0 0;border:none;color:var(--snice-color-text-secondary,rgb(82 82 82));cursor:pointer;padding:var(--snice-spacing-xs,.5rem);border-radius:var(--snice-border-radius-md,6px);transition:background var(--snice-transition-fast, 150ms) ease,color var(--snice-transition-fast, 150ms) ease}.back:hover{background:var(--snice-color-surface-hover,var(--snice-color-overlay-hover,hsl(0 0% 0% / .06)));color:var(--snice-color-text,rgb(23 23 23))}.back:focus-visible{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(59 130 246 / .5));outline-offset:var(--snice-focus-ring-offset,2px)}.body-area{display:flex;min-height:0;overflow:hidden}.pane{min-width:0;overflow-y:auto}.list{flex-shrink:0;width:var(--snice-layout-list-width,20rem);background:var(--snice-color-surface-container-low,rgb(250 250 250));border-right:1px solid var(--snice-color-border-subtle,var(--snice-color-border,rgb(226 226 226)))}.detail{flex:1;padding:var(--snice-spacing-xl,2rem)}.detail-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--snice-color-text-tertiary,rgb(115 115 115))}@media (max-width:640px){.list{width:100%;border-right:none}.pane--hidden{display:none}.detail{padding:var(--snice-spacing-md,1rem)}.header{padding:var(--snice-spacing-sm,.75rem) var(--snice-spacing-md,1rem)}}@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}";
+
+  /**
+   * Master-detail shell: a scrollable list beside the selected item's detail.
+   * The mail, chat, and issue-tracker shape.
+   *
+   * Wide viewports show both panes. Below the breakpoint only one is on screen:
+   * the list, until something is selected, then the detail with a back control.
+   */
+  (() => {
+      let _classDecorators = [snice.element('snice-layout-master-detail')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _selected_decorators;
+      let _selected_initializers = [];
+      let _selected_extraInitializers = [];
+      let _contained_decorators;
+      let _contained_initializers = [];
+      let _contained_extraInitializers = [];
+      let _narrow_decorators;
+      let _narrow_initializers = [];
+      let _narrow_extraInitializers = [];
+      let _render_decorators;
+      let _styles_decorators;
+      let _handleBack_decorators;
+      let _watchViewport_decorators;
+      let _releaseViewport_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          constructor() {
+              super(...arguments);
+              /** A detail item is open. Drives the single-pane view below the breakpoint. */
+              this.selected = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _selected_initializers, false));
+              /** Size to the parent element instead of pinning to the viewport. */
+              this.contained = (__runInitializers(this, _selected_extraInitializers), __runInitializers(this, _contained_initializers, false));
+              this.narrow = (__runInitializers(this, _contained_extraInitializers), __runInitializers(this, _narrow_initializers, false));
+              this.placards = (__runInitializers(this, _narrow_extraInitializers), []);
+              this.currentRoute = '';
+          }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _selected_decorators = [snice.property({ type: Boolean })];
+              _contained_decorators = [snice.property({ type: Boolean })];
+              _narrow_decorators = [snice.property({ attribute: false })];
+              _render_decorators = [snice.render()];
+              _styles_decorators = [snice.styles()];
+              _handleBack_decorators = [snice.dispatch('detail-closed', { bubbles: true, composed: true })];
+              _watchViewport_decorators = [snice.ready()];
+              _releaseViewport_decorators = [snice.dispose()];
+              __esDecorate(this, null, _render_decorators, { kind: "method", name: "render", static: false, private: false, access: { has: obj => "render" in obj, get: obj => obj.render }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _styles_decorators, { kind: "method", name: "styles", static: false, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handleBack_decorators, { kind: "method", name: "handleBack", static: false, private: false, access: { has: obj => "handleBack" in obj, get: obj => obj.handleBack }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _watchViewport_decorators, { kind: "method", name: "watchViewport", static: false, private: false, access: { has: obj => "watchViewport" in obj, get: obj => obj.watchViewport }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _releaseViewport_decorators, { kind: "method", name: "releaseViewport", static: false, private: false, access: { has: obj => "releaseViewport" in obj, get: obj => obj.releaseViewport }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(null, null, _selected_decorators, { kind: "field", name: "selected", static: false, private: false, access: { has: obj => "selected" in obj, get: obj => obj.selected, set: (obj, value) => { obj.selected = value; } }, metadata: _metadata }, _selected_initializers, _selected_extraInitializers);
+              __esDecorate(null, null, _contained_decorators, { kind: "field", name: "contained", static: false, private: false, access: { has: obj => "contained" in obj, get: obj => obj.contained, set: (obj, value) => { obj.contained = value; } }, metadata: _metadata }, _contained_initializers, _contained_extraInitializers);
+              __esDecorate(null, null, _narrow_decorators, { kind: "field", name: "narrow", static: false, private: false, access: { has: obj => "narrow" in obj, get: obj => obj.narrow, set: (obj, value) => { obj.narrow = value; } }, metadata: _metadata }, _narrow_initializers, _narrow_extraInitializers);
+              __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+              _classThis = _classDescriptor.value;
+              if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+              __runInitializers(_classThis, _classExtraInitializers);
+          }
+          render() {
+              const showDetail = !this.narrow || this.selected;
+              const showList = !this.narrow || !this.selected;
+              const listClass = showList ? '' : ' pane--hidden';
+              const detailClass = showDetail ? '' : ' pane--hidden';
+              return snice.html /*html*/ `
+      <div class="layout">
+        <header class="header" part="header">
+          <if ${this.narrow && this.selected}>
+            <button class="back" type="button" aria-label="Back to list" @click=${this.handleBack}>
+              <svg viewBox="0 0 24 24" width="20" height="20">
+                <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" fill="currentColor"/>
+              </svg>
+            </button>
+          </if>
+          <div class="header-brand">
+            <slot name="brand"></slot>
+          </div>
+          <div class="header-content">
+            <slot name="header"></slot>
+          </div>
+        </header>
+
+        <div class="body-area">
+          <section class="pane list${listClass}" part="list" aria-label="Items">
+            <slot name="list"></slot>
+          </section>
+
+          <section class="pane detail${detailClass}" part="detail" aria-label="Details">
+            <slot name="detail">
+              <div class="detail-empty" part="empty">
+                <slot name="empty">Select an item</slot>
+              </div>
+            </slot>
+          </section>
+        </div>
+      </div>
+    `;
+          }
+          styles() {
+              return snice.css /*css*/ `${cssContent$3}`;
+          }
+          handleBack() {
+              this.selected = false;
+              return { selected: false };
+          }
+          watchViewport() {
+              if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
+                  return;
+              this.viewportQuery = window.matchMedia('(max-width: 640px)');
+              this.narrow = this.viewportQuery.matches;
+              this.viewportListener = (event) => {
+                  this.narrow = event.matches;
+              };
+              this.viewportQuery.addEventListener('change', this.viewportListener);
+          }
+          releaseViewport() {
+              if (this.viewportQuery && this.viewportListener) {
+                  this.viewportQuery.removeEventListener('change', this.viewportListener);
+                  this.viewportQuery = undefined;
+                  this.viewportListener = undefined;
+              }
+          }
+          update(_appContext, placards, currentRoute, _routeParams) {
+              this.placards = placards;
+              this.currentRoute = currentRoute;
+          }
+      });
+      return _classThis;
+  })();
+
+  var cssContent$2 = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);min-height:100vh;min-height:100dvh}:host([contained]){min-height:0}.layout{min-height:inherit;display:flex;flex-direction:column}.main{flex:1;background:var(--snice-color-surface,rgb(255 255 255))}@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}";
+
+  (() => {
+      let _classDecorators = [snice.element('snice-layout-minimal')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _render_decorators;
+      let _styles_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _render_decorators = [snice.render()];
+              _styles_decorators = [snice.styles()];
+              __esDecorate(this, null, _render_decorators, { kind: "method", name: "render", static: false, private: false, access: { has: obj => "render" in obj, get: obj => obj.render }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _styles_decorators, { kind: "method", name: "styles", static: false, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+              _classThis = _classDescriptor.value;
+              if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+              __runInitializers(_classThis, _classExtraInitializers);
+          }
+          render() {
+              return snice.html /*html*/ `
+      <div class="layout">
+        <main class="main">
+          <slot name="page"></slot>
+        </main>
+      </div>
+    `;
+          }
+          styles() {
+              return snice.css /*css*/ `${cssContent$2}`;
+          }
+          constructor() {
+              super(...arguments);
+              __runInitializers(this, _instanceExtraInitializers);
+          }
+      });
+      return _classThis;
+  })();
+
+  var cssContent$1 = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif)}:host(:not([contained])){position:fixed;inset:0}:host([contained]){position:relative;min-height:0;height:100%}.layout{display:grid;grid-template-rows:auto 1fr auto;min-height:100%}.header{display:flex;align-items:center;gap:var(--snice-spacing-md,1rem);padding:var(--snice-spacing-sm,.75rem) var(--snice-spacing-lg,1.5rem);background:var(--snice-color-surface-container-high,rgb(252 251 249));border-bottom:1px solid var(--snice-color-border-subtle,var(--snice-color-border,rgb(226 226 226)));position:relative;z-index:var(--snice-z-sticky,10)}.header-brand{display:flex;align-items:center}.header-brand h2{font-family:var(--snice-font-family-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);margin:0;font-size:var(--snice-heading-md, 1.125rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-text,rgb(23 23 23));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-toggle{display:flex;align-items:center;justify-content:center;width:var(--snice-layout-control-size,2rem);height:var(--snice-layout-control-size,2rem);background:0 0;border:none;color:var(--snice-color-text-secondary,rgb(82 82 82));cursor:pointer;padding:var(--snice-spacing-xs,.5rem);border-radius:var(--snice-border-radius-md,6px);transition:all var(--snice-transition-fast, 150ms) ease}.sidebar-toggle:hover{background:var(--snice-color-surface-hover,var(--snice-color-overlay-hover,hsl(0 0% 0% / .04)));color:var(--snice-color-text,rgb(23 23 23))}.sidebar-toggle:focus-visible{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(59 130 246 / .5));outline-offset:var(--snice-focus-ring-offset,2px)}.header-content{flex:1;min-width:0;display:flex;align-items:center;gap:var(--snice-spacing-md,1rem)}.header-content ::slotted(*){flex:1;width:100%}.body-area{position:relative;display:flex;flex:1;overflow:hidden;background:var(--snice-color-surface,rgb(255 255 255))}.sidebar{flex-shrink:0;width:var(--snice-layout-sidebar-width,16rem);background:var(--snice-color-surface-container-low,rgb(250 250 250));border-right:1px solid var(--snice-color-border-subtle,var(--snice-color-border,rgb(226 226 226)));overflow-y:auto;overflow-x:hidden;padding-block:var(--snice-spacing-sm,0.75rem);transition:width var(--snice-transition-normal, 250ms) ease,transform var(--snice-transition-normal, 250ms) ease}.sidebar--collapsed{width:0;border-right:none}.sidebar--rail.sidebar--collapsed{width:var(--snice-layout-rail-collapsed-width,3rem);border-right:1px solid var(--snice-color-border-subtle,var(--snice-color-border,rgb(226 226 226)))}.sidebar--rail.sidebar--collapsed ::slotted(*){overflow:hidden;white-space:nowrap}.scrim{display:none}.sidebar ::slotted(a),.sidebar ::slotted(button){display:flex;align-items:center;gap:var(--snice-spacing-sm,.75rem);padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-md,1rem);margin:0 var(--snice-spacing-xs,.5rem);border-radius:var(--snice-border-radius-md,6px);color:var(--snice-color-text-secondary,rgb(82 82 82));text-decoration:none;cursor:pointer;transition:background var(--snice-transition-fast, 150ms) ease,color var(--snice-transition-fast, 150ms) ease}.sidebar ::slotted(a:hover),.sidebar ::slotted(button:hover){background:var(--snice-color-surface-hover,var(--snice-color-overlay-hover,hsl(0 0% 0% / .06)));color:var(--snice-color-text,rgb(23 23 23))}.sidebar ::slotted(a:focus-visible),.sidebar ::slotted(button:focus-visible){outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(59 130 246 / .5));outline-offset:var(--snice-focus-ring-offset,2px)}.sidebar ::slotted([aria-current]){background:var(--snice-color-primary-alpha,color-mix(in srgb,var(--snice-color-primary,rgb(37 99 235)) 10%,transparent));color:var(--snice-color-primary,rgb(37 99 235))}.sidebar-nav{display:flex;flex-direction:column;gap:var(--snice-spacing-sm,.75rem);padding:var(--snice-spacing-md,1rem)}.main{flex:1;padding:var(--snice-spacing-xl,2rem);overflow-y:auto;background:var(--snice-color-surface,rgb(255 255 255));position:relative;z-index:0}.footer{padding:var(--snice-spacing-md,1rem) var(--snice-spacing-lg,1.5rem);background:var(--snice-color-surface-container,hsl(0 0% 95%));border-top:1px solid var(--snice-color-border-subtle,var(--snice-color-border,rgb(226 226 226)))}.footer--empty{display:none}@media (max-width:768px){.header{padding:var(--snice-spacing-sm,.75rem) var(--snice-spacing-md,1rem)}.sidebar{position:absolute;top:0;bottom:0;left:0;z-index:var(--snice-z-overlay,1100);width:min(80vw,18rem);transform:translateX(-105%);box-shadow:var(--snice-shadow-lg,0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1))}.sidebar--collapsed,.sidebar--rail.sidebar--collapsed{width:min(80vw,18rem);border-right:1px solid var(--snice-color-border-subtle,var(--snice-color-border,rgb(226 226 226)))}.sidebar--mobile-open{transform:translateX(0)}.scrim--visible{display:block;position:absolute;inset:0;z-index:var(--snice-z-scrim,1000);background:rgb(0 0 0 / .4)}.main{padding:var(--snice-spacing-md,1rem)}.footer{padding:var(--snice-spacing-sm,.75rem) var(--snice-spacing-md,1rem)}}@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}";
+
+  (() => {
+      let _classDecorators = [snice.element('snice-layout-sidebar')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _collapsed_decorators;
+      let _collapsed_initializers = [];
+      let _collapsed_extraInitializers = [];
+      let _contained_decorators;
+      let _contained_initializers = [];
+      let _contained_extraInitializers = [];
+      let _collapseMode_decorators;
+      let _collapseMode_initializers = [];
+      let _collapseMode_extraInitializers = [];
+      let _mobileOpen_decorators;
+      let _mobileOpen_initializers = [];
+      let _mobileOpen_extraInitializers = [];
+      let _navElement_decorators;
+      let _navElement_initializers = [];
+      let _navElement_extraInitializers = [];
+      let _hasFooterContent_decorators;
+      let _hasFooterContent_initializers = [];
+      let _hasFooterContent_extraInitializers = [];
+      let _render_decorators;
+      let _styles_decorators;
+      let _handleKeydown_decorators;
+      let _wireFooterState_decorators;
+      let _bindShortcut_decorators;
+      let _releaseShortcut_decorators;
+      let _init_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          constructor() {
+              super(...arguments);
+              this.collapsed = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _collapsed_initializers, false));
+              /** Size to the parent element instead of pinning to the viewport. */
+              this.contained = (__runInitializers(this, _collapsed_extraInitializers), __runInitializers(this, _contained_initializers, false));
+              /**
+               * How the sidebar collapses on desktop:
+               * `rail` shrinks it to an icon-width column, `offcanvas` hides it entirely,
+               * `none` pins it open and drops the toggle.
+               */
+              this.collapseMode = (__runInitializers(this, _contained_extraInitializers), __runInitializers(this, _collapseMode_initializers, 'rail'));
+              this.mobileOpen = (__runInitializers(this, _collapseMode_extraInitializers), __runInitializers(this, _mobileOpen_initializers, false));
+              this.navElement = (__runInitializers(this, _mobileOpen_extraInitializers), __runInitializers(this, _navElement_initializers, void 0));
+              this.placards = (__runInitializers(this, _navElement_extraInitializers), []);
+              this.currentRoute = '';
+              this.hasFooterContent = __runInitializers(this, _hasFooterContent_initializers, false);
+              this.shortcutListener = __runInitializers(this, _hasFooterContent_extraInitializers);
+          }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _collapsed_decorators = [snice.property({ type: Boolean })];
+              _contained_decorators = [snice.property({ type: Boolean })];
+              _collapseMode_decorators = [snice.property({ attribute: 'collapse-mode' })];
+              _mobileOpen_decorators = [snice.property({ attribute: false })];
+              _navElement_decorators = [snice.query('snice-nav')];
+              _hasFooterContent_decorators = [snice.property({ attribute: false })];
+              _render_decorators = [snice.render()];
+              _styles_decorators = [snice.styles()];
+              _handleKeydown_decorators = [snice.on('keydown')];
+              _wireFooterState_decorators = [snice.ready()];
+              _bindShortcut_decorators = [snice.ready()];
+              _releaseShortcut_decorators = [snice.dispose()];
+              _init_decorators = [snice.ready()];
+              __esDecorate(this, null, _render_decorators, { kind: "method", name: "render", static: false, private: false, access: { has: obj => "render" in obj, get: obj => obj.render }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _styles_decorators, { kind: "method", name: "styles", static: false, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handleKeydown_decorators, { kind: "method", name: "handleKeydown", static: false, private: false, access: { has: obj => "handleKeydown" in obj, get: obj => obj.handleKeydown }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _wireFooterState_decorators, { kind: "method", name: "wireFooterState", static: false, private: false, access: { has: obj => "wireFooterState" in obj, get: obj => obj.wireFooterState }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _bindShortcut_decorators, { kind: "method", name: "bindShortcut", static: false, private: false, access: { has: obj => "bindShortcut" in obj, get: obj => obj.bindShortcut }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _releaseShortcut_decorators, { kind: "method", name: "releaseShortcut", static: false, private: false, access: { has: obj => "releaseShortcut" in obj, get: obj => obj.releaseShortcut }, 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, _contained_decorators, { kind: "field", name: "contained", static: false, private: false, access: { has: obj => "contained" in obj, get: obj => obj.contained, set: (obj, value) => { obj.contained = value; } }, metadata: _metadata }, _contained_initializers, _contained_extraInitializers);
+              __esDecorate(null, null, _collapseMode_decorators, { kind: "field", name: "collapseMode", static: false, private: false, access: { has: obj => "collapseMode" in obj, get: obj => obj.collapseMode, set: (obj, value) => { obj.collapseMode = value; } }, metadata: _metadata }, _collapseMode_initializers, _collapseMode_extraInitializers);
+              __esDecorate(null, null, _mobileOpen_decorators, { kind: "field", name: "mobileOpen", static: false, private: false, access: { has: obj => "mobileOpen" in obj, get: obj => obj.mobileOpen, set: (obj, value) => { obj.mobileOpen = value; } }, metadata: _metadata }, _mobileOpen_initializers, _mobileOpen_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, null, _hasFooterContent_decorators, { kind: "field", name: "hasFooterContent", static: false, private: false, access: { has: obj => "hasFooterContent" in obj, get: obj => obj.hasFooterContent, set: (obj, value) => { obj.hasFooterContent = value; } }, metadata: _metadata }, _hasFooterContent_initializers, _hasFooterContent_extraInitializers);
+              __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+              _classThis = _classDescriptor.value;
+              if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+              __runInitializers(_classThis, _classExtraInitializers);
+          }
+          render() {
+              const isRail = this.collapseMode === 'rail';
+              const canCollapse = this.collapseMode !== 'none';
+              const sidebarRailClass = isRail ? ' sidebar--rail' : '';
+              const sidebarCollapsedClass = canCollapse && this.collapsed ? ' sidebar--collapsed' : '';
+              const sidebarMobileClass = this.mobileOpen ? ' sidebar--mobile-open' : '';
+              const scrimClass = this.mobileOpen ? ' scrim--visible' : '';
+              const expanded = this.mobileOpen || !this.collapsed;
+              return snice.html /*html*/ `
+      <div class="layout">
+        <header class="header" part="header">
+          <if ${canCollapse}>
+            <button class="sidebar-toggle" type="button" aria-label="Toggle sidebar" aria-expanded="${expanded}" @click=${this.handleSidebarToggle}>
+              <svg viewBox="0 0 24 24" width="20" height="20">
+                <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill="currentColor"/>
+              </svg>
+            </button>
+          </if>
+          <div class="header-brand">
+            <slot name="brand">
+              <h2>App</h2>
+            </slot>
+          </div>
+          <div class="header-content">
+            <slot name="header"></slot>
+          </div>
+        </header>
+
+        <div class="body-area">
+          <aside class="sidebar${sidebarRailClass}${sidebarCollapsedClass}${sidebarMobileClass}" part="sidebar">
+            <slot name="sidebar">
+              <snice-nav class="sidebar-nav" variant="hierarchical" orientation="vertical"></snice-nav>
+            </slot>
+          </aside>
+
+          <div class="scrim${scrimClass}" part="scrim" @click=${this.handleScrimClick}></div>
+
+          <main class="main" part="main">
+            <slot name="page"></slot>
+          </main>
+        </div>
+
+        <footer class="footer${this.hasFooterContent ? '' : ' footer--empty'}" part="footer">
+          <slot name="footer"></slot>
+        </footer>
+      </div>
+    `;
+          }
+          styles() {
+              return snice.css /*css*/ `${cssContent$1}`;
+          }
+          handleSidebarToggle() {
+              if (this.collapseMode === 'none')
+                  return;
+              const isMobileViewport = typeof window !== 'undefined'
+                  && typeof window.matchMedia === 'function'
+                  && window.matchMedia('(max-width: 768px)').matches;
+              if (isMobileViewport) {
+                  this.mobileOpen = !this.mobileOpen;
+                  return;
+              }
+              this.collapsed = !this.collapsed;
+          }
+          handleScrimClick() {
+              this.mobileOpen = false;
+          }
+          handleKeydown(event) {
+              if (event.key === 'Escape' && this.mobileOpen) {
+                  this.mobileOpen = false;
+              }
+          }
+          wireFooterState() {
+              this.syncFooterState();
+              this.shadowRoot?.addEventListener('slotchange', () => this.syncFooterState());
+          }
+          syncFooterState() {
+              this.hasFooterContent = !!this.querySelector('[slot="footer"]');
+          }
+          bindShortcut() {
+              if (typeof document === 'undefined')
+                  return;
+              this.shortcutListener = (event) => {
+                  const isToggleChord = event.key?.toLowerCase() === 'b' && (event.metaKey || event.ctrlKey);
+                  if (!isToggleChord)
+                      return;
+                  event.preventDefault();
+                  this.handleSidebarToggle();
+              };
+              document.addEventListener('keydown', this.shortcutListener);
+          }
+          releaseShortcut() {
+              if (this.shortcutListener && typeof document !== 'undefined') {
+                  document.removeEventListener('keydown', this.shortcutListener);
+                  this.shortcutListener = undefined;
+              }
+          }
+          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.updateNav(appContext, routeParams);
+          }
+          updateNav(appContext, routeParams) {
+              if (this.navElement) {
+                  this.navElement.update(this.placards, appContext, this.currentRoute, routeParams);
+              }
+          }
+      });
+      return _classThis;
+  })();
+
+  var cssContent = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);min-height:100vh;min-height:100dvh}:host([contained]){min-height:0}.layout{display:grid;min-height:inherit;gap:1px;background:var(--snice-color-border-subtle,var(--snice-color-border,rgb(226 226 226)))}:host(:not([direction])) .layout,:host([direction=horizontal]) .layout{grid-template-columns:1fr auto 1fr;grid-template-rows:1fr}:host([direction=vertical]) .layout{grid-template-rows:1fr auto 1fr;grid-template-columns:1fr}:host(:not([ratio])) .layout,:host([ratio=\"50-50\"]) .layout{grid-template-columns:1fr 1px 1fr}:host([ratio=\"60-40\"]) .layout{grid-template-columns:60fr 1px 40fr}:host([ratio=\"70-30\"]) .layout{grid-template-columns:70fr 1px 30fr}:host([ratio=\"33-67\"]) .layout{grid-template-columns:33fr 1px 67fr}:host([ratio=\"67-33\"]) .layout{grid-template-columns:67fr 1px 33fr}:host([direction=vertical]:not([ratio])) .layout,:host([direction=vertical][ratio=\"50-50\"]) .layout{grid-template-rows:1fr 1px 1fr}:host([direction=vertical][ratio=\"60-40\"]) .layout{grid-template-rows:60fr 1px 40fr}:host([direction=vertical][ratio=\"70-30\"]) .layout{grid-template-rows:70fr 1px 30fr}:host([direction=vertical][ratio=\"33-67\"]) .layout{grid-template-rows:33fr 1px 67fr}:host([direction=vertical][ratio=\"67-33\"]) .layout{grid-template-rows:67fr 1px 33fr}.panel{background:var(--snice-color-surface,rgb(255 255 255));overflow:auto}.panel-left,.panel-right{padding:var(--snice-spacing-lg,2rem)}.divider{background:var(--snice-color-border-subtle,var(--snice-color-border,rgb(226 226 226)))}@media (max-width:768px){.layout{grid-template-columns:1fr!important;grid-template-rows:auto auto auto!important}.divider{height:1px}.panel-left,.panel-right{padding:var(--snice-spacing-md,1rem)}}@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}";
+
+  (() => {
+      let _classDecorators = [snice.element('snice-layout-split')];
+      let _classDescriptor;
+      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 _render_decorators;
+      let _styles_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 = [snice.property({})];
+              _ratio_decorators = [snice.property({})];
+              _render_decorators = [snice.render()];
+              _styles_decorators = [snice.styles()];
+              __esDecorate(this, null, _render_decorators, { kind: "method", name: "render", static: false, private: false, access: { has: obj => "render" in obj, get: obj => obj.render }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _styles_decorators, { kind: "method", name: "styles", static: false, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles }, 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);
+              _classThis = _classDescriptor.value;
+              if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+              __runInitializers(_classThis, _classExtraInitializers);
+          }
+          render() {
+              return snice.html /*html*/ `
+      <div class="layout">
+        <div class="panel panel-left">
+          <slot name="left"></slot>
+        </div>
+        <div class="divider"></div>
+        <div class="panel panel-right">
+          <slot name="right"></slot>
+        </div>
+      </div>
+    `;
+          }
+          styles() {
+              return snice.css /*css*/ `${cssContent}`;
+          }
+          constructor() {
+              super(...arguments);
+              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);
+          }
+      });
+      return _classThis;
+  })();
 
-})({}, Snice);
+})(Snice);
 //# sourceMappingURL=snice-layout.js.map