snice 2.5.4 → 3.2.0

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

@@ -1,7 +1,7 @@
-import { __esDecorate, __runInitializers } from 'tslib';
-import { element, property, part } from 'snice';
+import { __runInitializers, __esDecorate } from 'tslib';
+import { element, property, context, watch } from 'snice';
 
-var css = ":host {\n  display: block;\n  font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);\n  contain: layout style paint;\n}\n\n.nav {\n  display: flex;\n  gap: var(--snice-spacing-md, 1rem);\n}\n\n.nav--horizontal {\n  flex-direction: row;\n  align-items: center;\n}\n\n.nav--vertical {\n  flex-direction: column;\n  align-items: stretch;\n}\n\n.nav__item {\n  position: relative;\n}\n\n.nav__link {\n  display: flex;\n  align-items: center;\n  gap: var(--snice-spacing-sm, 0.75rem);\n  padding: var(--snice-spacing-sm, 0.75rem) var(--snice-spacing-md, 1rem);\n  color: var(--snice-color-text-secondary, rgb(107 114 128));\n  text-decoration: none;\n  border-radius: var(--snice-border-radius-md, 0.375rem);\n  font-size: var(--snice-font-size-md, 1rem);\n  font-weight: var(--snice-font-weight-medium, 500);\n  transition:\n    background-color var(--snice-transition-fast, 150ms) ease,\n    color var(--snice-transition-fast, 150ms) ease;\n}\n\n.nav__link:hover {\n  background-color: var(--snice-color-background-secondary, rgb(243 244 246));\n  color: var(--snice-color-text, rgb(23 23 23));\n}\n\n.nav__link:focus-visible {\n  outline: var(--snice-focus-ring-width, 2px) solid var(--snice-focus-ring-color, rgb(59 130 246 / 0.5));\n  outline-offset: var(--snice-focus-ring-offset, 2px);\n}\n\n.nav__link--active {\n  background-color: var(--snice-color-primary, rgb(37 99 235));\n  color: var(--snice-color-text-inverse, rgb(250 250 250));\n}\n\n.nav__link--active:hover {\n  background-color: var(--snice-color-primary-dark, rgb(29 78 216));\n  color: var(--snice-color-text-inverse, rgb(250 250 250));\n}\n\n.nav__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--snice-font-size-lg, 1.125rem);\n}\n\n.nav__label {\n  white-space: nowrap;\n}\n\n/* Hierarchical variant */\n.nav--hierarchical {\n  flex-direction: column;\n  gap: var(--snice-spacing-xs, 0.5rem);\n}\n\n.nav--hierarchical .nav__group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--snice-spacing-xs, 0.5rem);\n}\n\n.nav--hierarchical .nav__submenu {\n  list-style: none;\n  margin: 0;\n  padding: 0 0 0 var(--snice-spacing-xl, 2rem);\n  display: flex;\n  flex-direction: column;\n  gap: var(--snice-spacing-2xs, 0.25rem);\n}\n\n.nav--hierarchical .nav__submenu .nav__item {\n  margin: 0;\n}\n\n.nav--hierarchical .nav__submenu .nav__link {\n  font-size: var(--snice-font-size-sm, 0.875rem);\n  padding: var(--snice-spacing-xs, 0.5rem) var(--snice-spacing-md, 1rem);\n}\n\n/* Grouped variant */\n.nav--grouped {\n  flex-direction: column;\n  gap: var(--snice-spacing-lg, 1.5rem);\n}\n\n.nav--grouped .nav__group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--snice-spacing-xs, 0.5rem);\n}\n\n.nav--grouped .nav__group-label {\n  font-size: var(--snice-font-size-xs, 0.75rem);\n  font-weight: var(--snice-font-weight-semibold, 600);\n  color: var(--snice-color-text-tertiary, rgb(115 115 115));\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  padding: 0 var(--snice-spacing-md, 1rem);\n  margin-bottom: var(--snice-spacing-2xs, 0.25rem);\n}\n\n/* Vertical orientation specific */\n.nav--vertical .nav__item,\n.nav--vertical .nav__link {\n  width: 100%;\n}\n\n/* Responsive adjustments */\n@media (max-width: 768px) {\n  .nav--horizontal {\n    flex-wrap: wrap;\n  }\n\n  .nav__label {\n    font-size: var(--snice-font-size-sm, 0.875rem);\n  }\n}\n";
+var cssContent = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);contain:layout style paint}.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);transition:background-color var(--snice-transition-fast, 150ms) ease,color var(--snice-transition-fast, 150ms) ease}.nav__link:hover{background-color:var(--snice-color-background-secondary,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-background-tertiary,rgb(243 244 246));color:var(--snice-color-primary,rgb(37 99 235))}.nav__link--active:hover{background-color:var(--snice-color-background-secondary,rgb(249 250 251));color:var(--snice-color-primary-hover,rgb(29 78 216))}.nav__icon{display:inline-flex;align-items:center;justify-content:center;font-size:var(--snice-font-size-lg, 1.125rem)}.nav__label{white-space:nowrap}.nav--hierarchical{flex-direction:column;gap:var(--snice-spacing-xs,.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{flex-direction:column;gap:var(--snice-spacing-lg,1.5rem)}.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:.05em;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)}}";
 
 let SniceNav = (() => {
     let _classDecorators = [element('snice-nav')];
@@ -10,73 +10,131 @@ let SniceNav = (() => {
     let _classThis;
     let _classSuper = HTMLElement;
     let _instanceExtraInitializers = [];
-    let _currentRoute_decorators;
-    let _currentRoute_initializers = [];
-    let _currentRoute_extraInitializers = [];
     let _variant_decorators;
     let _variant_initializers = [];
     let _variant_extraInitializers = [];
     let _orientation_decorators;
     let _orientation_initializers = [];
     let _orientation_extraInitializers = [];
-    let _renderNavContent_decorators;
+    let _isTopLevel_decorators;
+    let _isTopLevel_initializers = [];
+    let _isTopLevel_extraInitializers = [];
+    let _handleContext_decorators;
+    let _handleChange_decorators;
     (class extends _classSuper {
         static { _classThis = this; }
+        constructor() {
+            super(...arguments);
+            this.variant = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _variant_initializers, 'flat'));
+            this.orientation = (__runInitializers(this, _variant_extraInitializers), __runInitializers(this, _orientation_initializers, 'horizontal'));
+            this.isTopLevel = (__runInitializers(this, _orientation_extraInitializers), __runInitializers(this, _isTopLevel_initializers, false));
+            this.placards = (__runInitializers(this, _isTopLevel_extraInitializers), []);
+            this.currentRoute = '';
+            this.routeParams = {};
+            this.appContext = null;
+        }
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _currentRoute_decorators = [property()];
             _variant_decorators = [property()];
             _orientation_decorators = [property()];
-            _renderNavContent_decorators = [part('nav-content')];
-            __esDecorate(this, null, _renderNavContent_decorators, { kind: "method", name: "renderNavContent", static: false, private: false, access: { has: obj => "renderNavContent" in obj, get: obj => obj.renderNavContent }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __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);
+            _isTopLevel_decorators = [property({ type: Boolean })];
+            _handleContext_decorators = [context()];
+            _handleChange_decorators = [watch('variant'), watch('orientation')];
+            __esDecorate(this, null, _handleContext_decorators, { kind: "method", name: "handleContext", static: false, private: false, access: { has: obj => "handleContext" in obj, get: obj => obj.handleContext }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleChange_decorators, { kind: "method", name: "handleChange", static: false, private: false, access: { has: obj => "handleChange" in obj, get: obj => obj.handleChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(null, null, _variant_decorators, { kind: "field", name: "variant", static: false, private: false, access: { has: obj => "variant" in obj, get: obj => obj.variant, set: (obj, value) => { obj.variant = value; } }, metadata: _metadata }, _variant_initializers, _variant_extraInitializers);
             __esDecorate(null, null, _orientation_decorators, { kind: "field", name: "orientation", static: false, private: false, access: { has: obj => "orientation" in obj, get: obj => obj.orientation, set: (obj, value) => { obj.orientation = value; } }, metadata: _metadata }, _orientation_initializers, _orientation_extraInitializers);
+            __esDecorate(null, null, _isTopLevel_decorators, { kind: "field", name: "isTopLevel", static: false, private: false, access: { has: obj => "isTopLevel" in obj, get: obj => obj.isTopLevel, set: (obj, value) => { obj.isTopLevel = value; } }, metadata: _metadata }, _isTopLevel_initializers, _isTopLevel_extraInitializers);
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
             _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
-        html() {
-            return /*html*/ `<div part="nav-content"></div><slot></slot>`;
+        connectedCallback() {
+            this.attachShadow({ mode: 'open' });
+            this.applyStyles();
+            this.render();
         }
-        css() {
-            return css;
+        handleContext(ctx) {
+            // Only update from context if this is a top-level nav
+            if (this.isTopLevel) {
+                this.update(ctx.navigation.placards, ctx.application, ctx.navigation.route, ctx.navigation.params);
+            }
+        }
+        handleChange() {
+            this.render();
+        }
+        applyStyles() {
+            if (!this.shadowRoot)
+                return;
+            const style = document.createElement('style');
+            style.textContent = cssContent;
+            this.shadowRoot.appendChild(style);
+        }
+        render() {
+            if (!this.shadowRoot)
+                return;
+            this.shadowRoot.innerHTML = '';
+            this.applyStyles();
+            const wrapper = document.createElement('div');
+            wrapper.className = 'nav-content';
+            const navItems = this.placards
+                .filter(p => !p.parent && p.show !== false && this.isVisible(p))
+                .sort((a, b) => (a.order || 0) - (b.order || 0));
+            if (navItems.length > 0) {
+                if (this.variant === 'grouped') {
+                    wrapper.appendChild(this.renderGrouped(navItems));
+                }
+                else if (this.variant === 'hierarchical') {
+                    wrapper.appendChild(this.renderHierarchical(navItems));
+                }
+                else {
+                    wrapper.appendChild(this.renderFlat(navItems));
+                }
+            }
+            this.shadowRoot.appendChild(wrapper);
+            const slot = document.createElement('slot');
+            this.shadowRoot.appendChild(slot);
         }
         renderFlat(navItems) {
-            return /*html*/ `
-      <nav class="nav nav--${this.variant} nav--${this.orientation}" role="navigation">
-        ${navItems.map(placard => this.renderNavItem(placard)).join('')}
-      </nav>
-    `;
+            const nav = document.createElement('nav');
+            nav.className = `nav nav--${this.variant} nav--${this.orientation}`;
+            nav.setAttribute('role', 'navigation');
+            navItems.forEach(placard => {
+                nav.appendChild(this.renderNavItem(placard));
+            });
+            return nav;
         }
         renderHierarchical(navItems) {
-            return /*html*/ `
-      <nav class="nav nav--${this.variant} nav--${this.orientation}" role="navigation">
-        ${navItems.map(placard => {
+            const nav = document.createElement('nav');
+            nav.className = `nav nav--${this.variant} nav--${this.orientation}`;
+            nav.setAttribute('role', 'navigation');
+            navItems.forEach(placard => {
                 const children = this.placards
-                    .filter(p => p.parent === placard.name && p.show !== false)
+                    .filter(p => p.parent === placard.name && p.show !== false && this.isVisible(p))
                     .sort((a, b) => (a.order || 0) - (b.order || 0));
-                const childrenHtml = children.length > 0 ? /*html*/ `
-            <ul class="nav__submenu">
-              ${children.map(child => /*html*/ `
-                <li class="nav__item ${this.isActive(child) ? 'nav__item--active' : ''}">
-                  ${this.renderNavLink(child)}
-                </li>
-              `).join('')}
-            </ul>
-          ` : '';
-                return /*html*/ `
-            <div class="nav__group ${this.isActive(placard) ? 'nav__group--active' : ''}">
-              ${this.renderNavLink(placard)}
-              ${childrenHtml}
-            </div>
-          `;
-            }).join('')}
-      </nav>
-    `;
+                const groupDiv = document.createElement('div');
+                groupDiv.className = this.isActive(placard) ? 'nav__group nav__group--active' : 'nav__group';
+                groupDiv.appendChild(this.renderNavLink(placard));
+                if (children.length > 0) {
+                    const submenu = document.createElement('ul');
+                    submenu.className = 'nav__submenu';
+                    children.forEach(child => {
+                        const li = document.createElement('li');
+                        li.className = this.isActive(child) ? 'nav__item nav__item--active' : 'nav__item';
+                        li.appendChild(this.renderNavLink(child));
+                        submenu.appendChild(li);
+                    });
+                    groupDiv.appendChild(submenu);
+                }
+                nav.appendChild(groupDiv);
+            });
+            return nav;
         }
         renderGrouped(navItems) {
+            const nav = document.createElement('nav');
+            nav.className = `nav nav--${this.variant} nav--${this.orientation}`;
+            nav.setAttribute('role', 'navigation');
             const groups = new Map();
             navItems.forEach(placard => {
                 const groupName = placard.group || 'default';
@@ -85,77 +143,110 @@ let SniceNav = (() => {
                 }
                 groups.get(groupName).push(placard);
             });
-            return /*html*/ `
-      <nav class="nav nav--${this.variant} nav--${this.orientation}" role="navigation">
-        ${Array.from(groups.entries()).map(([groupName, items]) => {
+            groups.forEach((items, groupName) => {
                 const sortedItems = items.sort((a, b) => (a.order || 0) - (b.order || 0));
-                return /*html*/ `
-            <div class="nav__group" data-group="${groupName}">
-              ${groupName !== 'default' ? /*html*/ `
-                <div class="nav__group-label">${groupName}</div>
-              ` : ''}
-              ${sortedItems.map(placard => this.renderNavItem(placard)).join('')}
-            </div>
-          `;
-            }).join('')}
-      </nav>
-    `;
+                const groupDiv = document.createElement('div');
+                groupDiv.className = 'nav__group';
+                groupDiv.setAttribute('data-group', groupName);
+                if (groupName !== 'default') {
+                    const label = document.createElement('div');
+                    label.className = 'nav__group-label';
+                    label.textContent = groupName;
+                    groupDiv.appendChild(label);
+                }
+                sortedItems.forEach(placard => {
+                    groupDiv.appendChild(this.renderNavItem(placard));
+                });
+                nav.appendChild(groupDiv);
+            });
+            return nav;
         }
         renderNavItem(placard) {
-            const isActive = this.isActive(placard);
-            return /*html*/ `
-      <div class="nav__item ${isActive ? 'nav__item--active' : ''}">
-        ${this.renderNavLink(placard)}
-      </div>
-    `;
+            const div = document.createElement('div');
+            div.className = this.isActive(placard) ? 'nav__item nav__item--active' : 'nav__item';
+            div.appendChild(this.renderNavLink(placard));
+            return div;
         }
         renderNavLink(placard) {
-            const isActive = this.isActive(placard);
-            const icon = placard.icon ? /*html*/ `<span class="nav__icon">${placard.icon}</span>` : '';
-            const tooltip = placard.tooltip ? `title="${placard.tooltip}"` : '';
+            const a = document.createElement('a');
             const href = placard.name === 'home' ? '#/' : `#/${placard.name}`;
-            return /*html*/ `
-      <a href="${href}"
-         class="nav__link ${isActive ? 'nav__link--active' : ''}"
-         aria-current="${isActive ? 'page' : ''}"
-         ${tooltip}>
-        ${icon}
-        <span class="nav__label">${placard.title}</span>
-      </a>
-    `;
+            a.href = href;
+            a.className = this.isActive(placard) ? 'nav__link nav__link--active' : 'nav__link';
+            // Accessibility
+            if (this.isActive(placard)) {
+                a.setAttribute('aria-current', 'page');
+            }
+            // Use description for aria-label if available, otherwise fall back to title
+            if (placard.description) {
+                a.setAttribute('aria-label', placard.description);
+            }
+            // Tooltip (prefers tooltip, falls back to description)
+            if (placard.tooltip) {
+                a.title = placard.tooltip;
+            }
+            else if (placard.description) {
+                a.title = placard.description;
+            }
+            // Keyboard shortcuts - add data attribute for external hotkey handlers
+            if (placard.hotkeys && placard.hotkeys.length > 0) {
+                a.setAttribute('data-hotkeys', placard.hotkeys.join(','));
+            }
+            // Help URL - add data attribute for external help systems
+            if (placard.helpUrl) {
+                a.setAttribute('data-help-url', placard.helpUrl);
+            }
+            // Search terms - add data attribute for search functionality
+            if (placard.searchTerms && placard.searchTerms.length > 0) {
+                a.setAttribute('data-search-terms', placard.searchTerms.join(','));
+            }
+            // Custom attributes - apply any custom data attributes
+            if (placard.attributes) {
+                Object.entries(placard.attributes).forEach(([key, value]) => {
+                    a.setAttribute(`data-${key}`, String(value));
+                });
+            }
+            if (placard.icon) {
+                const iconSpan = document.createElement('span');
+                iconSpan.className = 'nav__icon';
+                iconSpan.textContent = placard.icon;
+                a.appendChild(iconSpan);
+            }
+            const labelSpan = document.createElement('span');
+            labelSpan.className = 'nav__label';
+            labelSpan.textContent = placard.title;
+            a.appendChild(labelSpan);
+            return a;
         }
         isActive(placard) {
-            return this.currentRoute === placard.name ||
-                this.currentRoute.startsWith(`/${placard.name}`) ||
-                (placard.name === 'home' && this.currentRoute === '/');
+            // Normalize route - remove leading slash if present
+            const route = this.currentRoute.startsWith('/')
+                ? this.currentRoute.slice(1)
+                : this.currentRoute;
+            // Check exact match or starts with (for child routes)
+            return route === placard.name ||
+                route.startsWith(`${placard.name}/`) ||
+                (placard.name === 'home' && (this.currentRoute === '/' || this.currentRoute === ''));
         }
-        update(placards, currentRoute) {
-            this.placards = placards;
-            this.currentRoute = currentRoute;
-            this.renderNavContent();
+        isVisible(placard) {
+            if (!placard.visibleOn)
+                return true;
+            if (!this.appContext)
+                return true;
+            const guards = Array.isArray(placard.visibleOn) ? placard.visibleOn : [placard.visibleOn];
+            return guards.every(guard => guard(this.appContext, this.routeParams));
         }
-        renderNavContent() {
-            const navItems = this.placards
-                .filter(p => !p.parent && p.show !== false)
-                .sort((a, b) => (a.order || 0) - (b.order || 0));
-            if (navItems.length === 0) {
-                return '';
+        update(placards, appContext, currentRoute, routeParams) {
+            this.placards = [...placards];
+            if (appContext) {
+                this.appContext = appContext;
             }
-            if (this.variant === 'grouped') {
-                return this.renderGrouped(navItems);
+            if (currentRoute !== undefined) {
+                this.currentRoute = currentRoute;
             }
-            if (this.variant === 'hierarchical') {
-                return this.renderHierarchical(navItems);
+            if (routeParams) {
+                this.routeParams = routeParams;
             }
-            return this.renderFlat(navItems);
-        }
-        constructor() {
-            super(...arguments);
-            this.placards = (__runInitializers(this, _instanceExtraInitializers), []);
-            this.currentRoute = __runInitializers(this, _currentRoute_initializers, '');
-            this.variant = (__runInitializers(this, _currentRoute_extraInitializers), __runInitializers(this, _variant_initializers, 'flat'));
-            this.orientation = (__runInitializers(this, _variant_extraInitializers), __runInitializers(this, _orientation_initializers, 'horizontal'));
-            __runInitializers(this, _orientation_extraInitializers);
+            this.render();
         }
     });
     return _classThis;

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

@@ -1 +1 @@
-{"version":3,"file":"snice-nav.js","sources":["../../../components/nav/snice-nav.css?inline","../../../../components/nav/snice-nav.ts"],"sourcesContent":["export default \":host {\\n  display: block;\\n  font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);\\n  contain: layout style paint;\\n}\\n\\n.nav {\\n  display: flex;\\n  gap: var(--snice-spacing-md, 1rem);\\n}\\n\\n.nav--horizontal {\\n  flex-direction: row;\\n  align-items: center;\\n}\\n\\n.nav--vertical {\\n  flex-direction: column;\\n  align-items: stretch;\\n}\\n\\n.nav__item {\\n  position: relative;\\n}\\n\\n.nav__link {\\n  display: flex;\\n  align-items: center;\\n  gap: var(--snice-spacing-sm, 0.75rem);\\n  padding: var(--snice-spacing-sm, 0.75rem) var(--snice-spacing-md, 1rem);\\n  color: var(--snice-color-text-secondary, rgb(107 114 128));\\n  text-decoration: none;\\n  border-radius: var(--snice-border-radius-md, 0.375rem);\\n  font-size: var(--snice-font-size-md, 1rem);\\n  font-weight: var(--snice-font-weight-medium, 500);\\n  transition:\\n    background-color var(--snice-transition-fast, 150ms) ease,\\n    color var(--snice-transition-fast, 150ms) ease;\\n}\\n\\n.nav__link:hover {\\n  background-color: var(--snice-color-background-secondary, rgb(243 244 246));\\n  color: var(--snice-color-text, rgb(23 23 23));\\n}\\n\\n.nav__link:focus-visible {\\n  outline: var(--snice-focus-ring-width, 2px) solid var(--snice-focus-ring-color, rgb(59 130 246 / 0.5));\\n  outline-offset: var(--snice-focus-ring-offset, 2px);\\n}\\n\\n.nav__link--active {\\n  background-color: var(--snice-color-primary, rgb(37 99 235));\\n  color: var(--snice-color-text-inverse, rgb(250 250 250));\\n}\\n\\n.nav__link--active:hover {\\n  background-color: var(--snice-color-primary-dark, rgb(29 78 216));\\n  color: var(--snice-color-text-inverse, rgb(250 250 250));\\n}\\n\\n.nav__icon {\\n  display: inline-flex;\\n  align-items: center;\\n  justify-content: center;\\n  font-size: var(--snice-font-size-lg, 1.125rem);\\n}\\n\\n.nav__label {\\n  white-space: nowrap;\\n}\\n\\n/* Hierarchical variant */\\n.nav--hierarchical {\\n  flex-direction: column;\\n  gap: var(--snice-spacing-xs, 0.5rem);\\n}\\n\\n.nav--hierarchical .nav__group {\\n  display: flex;\\n  flex-direction: column;\\n  gap: var(--snice-spacing-xs, 0.5rem);\\n}\\n\\n.nav--hierarchical .nav__submenu {\\n  list-style: none;\\n  margin: 0;\\n  padding: 0 0 0 var(--snice-spacing-xl, 2rem);\\n  display: flex;\\n  flex-direction: column;\\n  gap: var(--snice-spacing-2xs, 0.25rem);\\n}\\n\\n.nav--hierarchical .nav__submenu .nav__item {\\n  margin: 0;\\n}\\n\\n.nav--hierarchical .nav__submenu .nav__link {\\n  font-size: var(--snice-font-size-sm, 0.875rem);\\n  padding: var(--snice-spacing-xs, 0.5rem) var(--snice-spacing-md, 1rem);\\n}\\n\\n/* Grouped variant */\\n.nav--grouped {\\n  flex-direction: column;\\n  gap: var(--snice-spacing-lg, 1.5rem);\\n}\\n\\n.nav--grouped .nav__group {\\n  display: flex;\\n  flex-direction: column;\\n  gap: var(--snice-spacing-xs, 0.5rem);\\n}\\n\\n.nav--grouped .nav__group-label {\\n  font-size: var(--snice-font-size-xs, 0.75rem);\\n  font-weight: var(--snice-font-weight-semibold, 600);\\n  color: var(--snice-color-text-tertiary, rgb(115 115 115));\\n  text-transform: uppercase;\\n  letter-spacing: 0.05em;\\n  padding: 0 var(--snice-spacing-md, 1rem);\\n  margin-bottom: var(--snice-spacing-2xs, 0.25rem);\\n}\\n\\n/* Vertical orientation specific */\\n.nav--vertical .nav__item,\\n.nav--vertical .nav__link {\\n  width: 100%;\\n}\\n\\n/* Responsive adjustments */\\n@media (max-width: 768px) {\\n  .nav--horizontal {\\n    flex-wrap: wrap;\\n  }\\n\\n  .nav__label {\\n    font-size: var(--snice-font-size-sm, 0.875rem);\\n  }\\n}\\n\";",null],"names":[],"mappings":"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"}
+{"version":3,"file":"snice-nav.js","sources":["../../../components/nav/snice-nav.css?inline","../../../../components/nav/snice-nav.ts"],"sourcesContent":["export default \":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);contain:layout style paint}.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);transition:background-color var(--snice-transition-fast, 150ms) ease,color var(--snice-transition-fast, 150ms) ease}.nav__link:hover{background-color:var(--snice-color-background-secondary,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-background-tertiary,rgb(243 244 246));color:var(--snice-color-primary,rgb(37 99 235))}.nav__link--active:hover{background-color:var(--snice-color-background-secondary,rgb(249 250 251));color:var(--snice-color-primary-hover,rgb(29 78 216))}.nav__icon{display:inline-flex;align-items:center;justify-content:center;font-size:var(--snice-font-size-lg, 1.125rem)}.nav__label{white-space:nowrap}.nav--hierarchical{flex-direction:column;gap:var(--snice-spacing-xs,.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{flex-direction:column;gap:var(--snice-spacing-lg,1.5rem)}.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:.05em;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)}}\";",null],"names":[],"mappings":"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"}

package/dist/components/nav/snice-nav.types.d.ts

@@ -1,11 +1,11 @@
-import type { Placard } from 'snice';
+import type { Placard, AppContext } from 'snice';
 export type NavVariant = 'flat' | 'hierarchical' | 'grouped';
 export type NavOrientation = 'horizontal' | 'vertical';
 export interface SniceNavElement extends HTMLElement {
-    placards: Placard[];
-    currentRoute: string;
     variant: NavVariant;
     orientation: NavOrientation;
+    isTopLevel: boolean;
+    update(placards: Placard[], appContext?: AppContext, currentRoute?: string, routeParams?: Record<string, string>): void;
     html?(): string | Promise<string>;
     css?(): string | string[] | Promise<string | string[]>;
 }

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

@@ -8,16 +8,15 @@ export declare class SnicePagination extends HTMLElement {
     showNext: boolean;
     size: 'small' | 'medium' | 'large';
     variant: 'default' | 'rounded' | 'text';
-    html(): string;
-    css(): string;
+    renderContent(): import("snice").TemplateResult;
+    componentStyles(): import("snice").CSSResult;
     private getPageNumbers;
-    handleFirst(): void;
-    handlePrev(): void;
-    handleNext(): void;
-    handleLast(): void;
+    handleFirst(event: Event): void;
+    handlePrev(event: Event): void;
+    handleNext(event: Event): void;
+    handleLast(event: Event): void;
     handlePageClick(event: Event): void;
     private changePage;
-    private updateView;
     goToPage(page: number): void;
     nextPage(): void;
     previousPage(): void;