@sandlada/mdc/build/components/navigation-bar/navigation-bar.js

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

import{customElement as e}from"../../node_modules/@lit/reactive-element/decorators/custom-element.js";import{property as t}from"../../node_modules/@lit/reactive-element/decorators/property.js";import"../../node_modules/lit/decorators.js";import{html as n}from"../../node_modules/lit-html/lit-html.js";import"../../node_modules/lit/index.js";import{classMap as r}from"../../node_modules/lit-html/directives/class-map.js";import"../../node_modules/lit/directives/class-map.js";import i from"../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";import{BaseNavigationBar as a}from"./internal/base-navigation-bar.js";import{NavigationBarVariant as o}from"./navigation-bar.interface.js";import{NavigationBarStyles as s}from"./navigation-bar.style.js";
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*
* @fileoverview
* Navigation bar container with scope propagation and variant styles.
*
* For imperative show/close and scroll-driven auto-show/hide, attach an
* {@link EdgeSlideController} from `src/utils/controller/edge-slide-controller.ts`.
*
* @example
* ```html
* <mdc-navigation-bar
*   navigation-scope="main-nav"
*   variant="horizontal"
* >
*   <mdc-navigation-tab name="bar-tabs" value="/home">Home</mdc-navigation-tab>
*   <mdc-navigation-tab name="bar-tabs" value="/search">Search</mdc-navigation-tab>
* </mdc-navigation-bar>
* ```
*/
let c=class extends a{constructor(...e){super(...e),this.variant=o.Horizontal}static{this.styles=s}firstUpdated(){super.firstUpdated(),this.syncTabVariants(),this.shadowRoot?.querySelector(`slot`)?.addEventListener(`slotchange`,()=>{this.syncTabVariants()})}updated(e){super.updated(e),e.has(`variant`)&&this.syncTabVariants()}render(){return n`<div class="${r(this.getRenderClasses())}">${this.renderSlot()} ${this.renderBackground()}</div>`}getRenderClasses(){return{container:!0,[this.variant]:!0}}renderBackground(){return n`<div aria-hidden="true" class="background"></div>`}syncTabVariants(){let e=this.computeTargetVariant(),t=this.querySelectorAll(`mdc-navigation-tab`);for(let n of t)n.variant=e}computeTargetVariant(){switch(this.variant){case`vertical`:return`bar-vertical`;case`horizontal`:return`bar-horizontal`;case`vertical-xr`:return`bar-xr-vertical`}}};i([t({type:String,reflect:!0,attribute:`variant`})],c.prototype,`variant`,void 0),c=i([e(`mdc-navigation-bar`)],c);export{c as MDCNavigationBar};
//# sourceMappingURL=navigation-bar.js.map