@sandlada/mdc/build/components/appbar/appbar.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"../../node_modules/lit/decorators.js";import t from"../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";import{BaseAppBar as n}from"./internal/base-appbar.js";import{AppBarStyles as r}from"./appbar.style.js";
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*
* @fileoverview
* Material Design 3 and MD3 Expressive App Bar component.
*
* App bars display navigation, actions, and text at the top of a screen.
* They contain a headline/title, optional subtitle, navigation icon, and actions.
*
* @example
* ```html
* <!-- Small App Bar -->
* <mdc-appbar headline="Page Title">
*   <mdc-icon-button slot="leading"><mdc-icon>arrow_back</mdc-icon></mdc-icon-button>
*   <mdc-icon-button slot="trailing"><mdc-icon>search</mdc-icon></mdc-icon-button>
*   <mdc-icon-button slot="trailing"><mdc-icon>more_vert</mdc-icon></mdc-icon-button>
* </mdc-appbar>
*
* <!-- Medium Flexible App Bar with Subtitle -->
* <mdc-appbar variant="medium-flexible" headline="Daily activities" subtitle="Record new fitness goals">
*   <mdc-icon-button slot="leading"><mdc-icon>arrow_back</mdc-icon></mdc-icon-button>
*   <mdc-icon-button slot="trailing"><mdc-icon>add</mdc-icon></mdc-icon-button>
* </mdc-appbar>
*
* <!-- Search App Bar -->
* <mdc-appbar variant="search" headline="Search product">
*   <mdc-icon-button slot="leading"><mdc-icon>menu</mdc-icon></mdc-icon-button>
*   <mdc-icon-button slot="trailing"><mdc-icon>account_circle</mdc-icon></mdc-icon-button>
* </mdc-appbar>
* ```
*/
let i=class extends n{static{this.styles=r}};i=t([e(`mdc-appbar`)],i);export{i as MDCAppBar};
//# sourceMappingURL=appbar.js.map