@universal-material/web 3.8.0 → 3.9.0

package/navigation/drawer.js

@@ -3,7 +3,7 @@ import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { styles as baseStyles } from '../shared/base.styles.js';
 import { styles } from './drawer.styles.js';
-let UmDrawer = class UmDrawer extends LitElement {
+let Drawer = class Drawer extends LitElement {
     static { this.styles = [
         baseStyles,
         styles,
@@ -16,8 +16,8 @@ let UmDrawer = class UmDrawer extends LitElement {
     `;
     }
 };
-UmDrawer = __decorate([
+Drawer = __decorate([
     customElement('u-drawer')
-], UmDrawer);
-export { UmDrawer };
+], Drawer);
+export { Drawer };
 //# sourceMappingURL=drawer.js.map

package/navigation/drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../src/navigation/drawer.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAGrC,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;aACtB,WAAM,GAAG;QACvB,UAAU;QACV,MAAM;KACP,AAHqB,CAGpB;IAEiB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAZU,QAAQ;IADpB,aAAa,CAAC,UAAU,CAAC;GACb,QAAQ,CAapB","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './drawer.styles.js';\n\n@customElement('u-drawer')\nexport class UmDrawer extends LitElement {\n  static override styles = [\n    baseStyles,\n    styles,\n  ];\n\n  protected override render(): HTMLTemplateResult {\n    return html`\n      <div class=\"container\" part=\"container\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-drawer': UmDrawer;\n  }\n}\n"]}
+{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../src/navigation/drawer.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAGrC,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;aACpB,WAAM,GAAG;QACvB,UAAU;QACV,MAAM;KACP,AAHqB,CAGpB;IAEiB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAZU,MAAM;IADlB,aAAa,CAAC,UAAU,CAAC;GACb,MAAM,CAalB","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './drawer.styles.js';\n\n@customElement('u-drawer')\nexport class Drawer extends LitElement {\n  static override styles = [\n    baseStyles,\n    styles,\n  ];\n\n  protected override render(): HTMLTemplateResult {\n    return html`\n      <div class=\"container\" part=\"container\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-drawer': Drawer;\n  }\n}\n"]}

package/navigation/side-navigation.d.ts

@@ -1,6 +1,13 @@
 import { HTMLTemplateResult, LitElement } from 'lit';
 import '../elevation/elevation.js';
-export declare class UmSideNavigation extends LitElement {
+/**
+ * @deprecated Use `<u-scaffold>` and place a `<u-drawer>` or
+ * `<u-navigation-rail>` directly as a body sibling (for a permanent
+ * sidebar) or wrap it in `<u-pane mode="sidebar" mode-lg="fixed">` for
+ * a sidebar that collapses to an overlay below `lg`. Standalone usage
+ * outside of a scaffold remains supported.
+ */
+export declare class SideNavigation extends LitElement {
     #private;
     static styles: import("lit").CSSResult[];
     private disableSlideAnimation;
@@ -27,7 +34,7 @@ export declare class UmSideNavigation extends LitElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'u-side-navigation': UmSideNavigation;
+        'u-side-navigation': SideNavigation;
     }
 }
 //# sourceMappingURL=side-navigation.d.ts.map

package/navigation/side-navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"side-navigation.d.ts","sourceRoot":"","sources":["../../src/navigation/side-navigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAS3D,OAAO,2BAA2B,CAAC;AAEnC,qBACa,gBAAiB,SAAQ,UAAU;;IAC9C,OAAgB,MAAM,4BAA6E;IAGnG,OAAO,CAAC,qBAAqB,CAAS;IAEtC;;;;;OAKG;IACH,IACI,YAAY,IAIe,OAAO,CAFrC;IAED,IAAI,YAAY,CAAC,YAAY,EAAE,OAAO,EAMrC;IAE0B,eAAe,EAAE,GAAG,CAAC;IAC/B,KAAK,EAAG,WAAW,CAAC;IACT,eAAe,EAAE,WAAW,GAAG,SAAS,CAAC;IAE5D,MAAM,IAAI,kBAAkB;IAIrC,OAAO,CAAC,aAAa;IAwBrB,OAAO,CAAC,eAAe;IA8BvB,OAAO,CAAC,uBAAuB;IAQ/B,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,sBAAsB;IAgB9B,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,UAAU;CAInB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,gBAAgB,CAAC;KACvC;CACF"}
+{"version":3,"file":"side-navigation.d.ts","sourceRoot":"","sources":["../../src/navigation/side-navigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAS3D,OAAO,2BAA2B,CAAC;AAEnC;;;;;;GAMG;AACH,qBACa,cAAe,SAAQ,UAAU;;IAC5C,OAAgB,MAAM,4BAA6E;IAGnG,OAAO,CAAC,qBAAqB,CAAS;IAEtC;;;;;OAKG;IACH,IACI,YAAY,IAIe,OAAO,CAFrC;IAED,IAAI,YAAY,CAAC,YAAY,EAAE,OAAO,EAMrC;IAE0B,eAAe,EAAE,GAAG,CAAC;IAC/B,KAAK,EAAG,WAAW,CAAC;IACT,eAAe,EAAE,WAAW,GAAG,SAAS,CAAC;IAE5D,MAAM,IAAI,kBAAkB;IAIrC,OAAO,CAAC,aAAa;IAwBrB,OAAO,CAAC,eAAe;IA8BvB,OAAO,CAAC,uBAAuB;IAQ/B,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,sBAAsB;IAgB9B,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,UAAU;CAInB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,cAAc,CAAC;KACrC;CACF"}

package/navigation/side-navigation.js

@@ -7,7 +7,14 @@ import { styles as baseStyles } from '../shared/base.styles.js';
 import { styles as swiperStyles } from './side-navigation-swiper.styles.js';
 import { styles } from './side-navigation.styles.js';
 import '../elevation/elevation.js';
-let UmSideNavigation = class UmSideNavigation extends LitElement {
+/**
+ * @deprecated Use `<u-scaffold>` and place a `<u-drawer>` or
+ * `<u-navigation-rail>` directly as a body sibling (for a permanent
+ * sidebar) or wrap it in `<u-pane mode="sidebar" mode-lg="fixed">` for
+ * a sidebar that collapses to an overlay below `lg`. Standalone usage
+ * outside of a scaffold remains supported.
+ */
+let SideNavigation = class SideNavigation extends LitElement {
     constructor() {
         super(...arguments);
         this.#toggleDrawer = false;
@@ -121,18 +128,18 @@ let UmSideNavigation = class UmSideNavigation extends LitElement {
 };
 __decorate([
     property({ type: Boolean, attribute: 'toggle-drawer' })
-], UmSideNavigation.prototype, "toggleDrawer", null);
+], SideNavigation.prototype, "toggleDrawer", null);
 __decorate([
     query('swiper-container')
-], UmSideNavigation.prototype, "swiperContainer", void 0);
+], SideNavigation.prototype, "swiperContainer", void 0);
 __decorate([
     query('.scrim')
-], UmSideNavigation.prototype, "scrim", void 0);
+], SideNavigation.prototype, "scrim", void 0);
 __decorate([
     query('#scroll-container')
-], UmSideNavigation.prototype, "scrollContainer", void 0);
-UmSideNavigation = __decorate([
+], SideNavigation.prototype, "scrollContainer", void 0);
+SideNavigation = __decorate([
     customElement('u-side-navigation')
-], UmSideNavigation);
-export { UmSideNavigation };
+], SideNavigation);
+export { SideNavigation };
 //# sourceMappingURL=side-navigation.js.map

package/navigation/side-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-navigation.js","sourceRoot":"","sources":["../../src/navigation/side-navigation.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { config } from '../config.js';\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles as swiperStyles } from './side-navigation-swiper.styles.js';\nimport { styles } from './side-navigation.styles.js';\n\nimport '../elevation/elevation.js';\n\n@customElement('u-side-navigation')\nexport class UmSideNavigation extends LitElement {\n  static override styles = [baseStyles, config.navigationDrawer.useSwiperJs ? swiperStyles : styles];\n\n  #toggleDrawer = false;\n  private disableSlideAnimation = false;\n\n  /**\n   * Toggle the navigation drawer visibility\n   *\n   * _Modal drawer_: Open if `true`, closed if `false`\n   * _Standard drawer_: Collapsed if `true`, visible if `false`\n   */\n  @property({ type: Boolean, attribute: 'toggle-drawer' })\n  get toggleDrawer() {\n    return this.#toggleDrawer;\n  }\n\n  set toggleDrawer(toggleDrawer: boolean) {\n    this.#toggleDrawer = toggleDrawer;\n\n    if (!this.disableSlideAnimation) {\n      this.swiperContainer?.swiper?.slideTo(toggleDrawer ? 0 : 1);\n    }\n  }\n\n  @query('swiper-container') swiperContainer: any;\n  @query('.scrim') scrim!: HTMLElement;\n  @query('#scroll-container') scrollContainer: HTMLElement | undefined;\n\n  override render(): HTMLTemplateResult {\n    return config.navigationDrawer.useSwiperJs ? this.renderWithSwipe() : this.renderDefault();\n  }\n\n  private renderDefault() {\n    const classes = { toggle: this.toggleDrawer };\n\n    return html`\n      <div class=\"grid container\">\n        <div>\n          <div class=\"navigation\">\n            <div class=\"scrim ${classMap(classes)}\" @click=\"${this.scrimClick}\"></div>\n            <div class=\"drawer ${classMap(classes)}\">\n              <u-elevation></u-elevation>\n              <div class=\"drawer-container\">\n                <slot name=\"drawer\"></slot>\n              </div>\n            </div>\n            <slot name=\"rail\"></slot>\n          </div>\n        </div>\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private renderWithSwipe() {\n    const classes = { toggle: this.toggleDrawer };\n    return html`\n      <swiper-container\n        class=\"container\"\n        initial-slide=\"1\"\n        resistance-ratio=\"0\"\n        slides-per-view=\"auto\"\n        simulate-touch=\"false\"\n        @swiperactiveindexchange=\"${this.swiperActiveIndexChange}\"\n        @swiperslidermove=\"${this.swiperSliderMove}\"\n        @swipertransitionend=\"${this.swiperTransitionEnd}\"\n        @swipertransitionstart=\"${this.swiperTransitionStart}\"\n        @swiperslidesgridlengthchange=\"${this.slidesGridLengthChange}\">\n        <swiper-slide class=\"drawer ${classMap(classes)}\">\n          <u-elevation></u-elevation>\n          <div class=\"drawer-container\">\n            <slot name=\"drawer\"></slot>\n          </div>\n        </swiper-slide>\n        <swiper-slide class=\"dummy-slide\"></swiper-slide>\n\n        <div id=\"scroll-container\" class=\"content\" slot=\"container-end\">\n          <slot></slot>\n        </div>\n        <div class=\"scrim ${classMap(classes)}\" @click=\"${this.scrimClick}\" slot=\"container-end\"></div>\n      </swiper-container>\n    `;\n  }\n\n  private swiperActiveIndexChange() {\n    if (!this.swiperContainer?.swiper) {\n      return;\n    }\n\n    this.toggleDrawer = !this.swiperContainer.swiper.activeIndex;\n  }\n\n  private swiperTransitionStart() {\n    this.scrim.classList.add('moving');\n  }\n\n  private slidesGridLengthChange() {\n    if (!this.swiperContainer?.swiper) {\n      return;\n    }\n\n    this.classList.add('disable-transition');\n\n    const gridLength = this.swiperContainer.swiper.snapGrid.length;\n    this.swiperContainer.swiper.slideTo(gridLength === 1 ? 0 : 1, 0);\n    this.disableSlideAnimation = true;\n    this.toggleDrawer = true;\n    this.toggleDrawer = false;\n    this.disableSlideAnimation = false;\n    setTimeout(() => this.classList.remove('disable-transition'));\n  }\n\n  private swiperTransitionEnd() {\n    this.scrim.style.removeProperty('--_modal-drawer-open-progress');\n    this.scrim.classList.remove('moving');\n  }\n\n  private swiperSliderMove(e: Event) {\n\n    const swiper = (e as any).detail[0];\n    this.scrim.style.setProperty('--_modal-drawer-open-progress', `${1 - swiper.progress}`);\n  }\n\n  private scrimClick() {\n    this.toggleDrawer = false;\n    this.swiperContainer?.swiper?.slideTo(1);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-side-navigation': UmSideNavigation;\n  }\n}\n"]}
+{"version":3,"file":"side-navigation.js","sourceRoot":"","sources":["../../src/navigation/side-navigation.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAC5E,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAErD,OAAO,2BAA2B,CAAC;AAEnC;;;;;;GAMG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAGL,kBAAa,GAAG,KAAK,CAAC;QACd,0BAAqB,GAAG,KAAK,CAAC;IA8HxC,CAAC;aAjIiB,WAAM,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,AAA5E,CAA6E;IAEnG,aAAa,CAAS;IAGtB;;;;;OAKG;IAEH,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,aAAa,CAAC;IAC5B,CAAC;IAED,IAAI,YAAY,CAAC,YAAqB;QACpC,IAAI,CAAC,aAAa,GAAG,YAAY,CAAC;QAElC,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAChC,IAAI,CAAC,eAAe,EAAE,MAAM,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC9D,CAAC;IACH,CAAC;IAMQ,MAAM;QACb,OAAO,MAAM,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC7F,CAAC;IAEO,aAAa;QACnB,MAAM,OAAO,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC;QAE9C,OAAO,IAAI,CAAA;;;;gCAIiB,QAAQ,CAAC,OAAO,CAAC,aAAa,IAAI,CAAC,UAAU;iCAC5C,QAAQ,CAAC,OAAO,CAAC;;;;;;;;;;;;;KAa7C,CAAC;IACJ,CAAC;IAEO,eAAe;QACrB,MAAM,OAAO,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC;QAC9C,OAAO,IAAI,CAAA;;;;;;;oCAOqB,IAAI,CAAC,uBAAuB;6BACnC,IAAI,CAAC,gBAAgB;gCAClB,IAAI,CAAC,mBAAmB;kCACtB,IAAI,CAAC,qBAAqB;yCACnB,IAAI,CAAC,sBAAsB;sCAC9B,QAAQ,CAAC,OAAO,CAAC;;;;;;;;;;;4BAW3B,QAAQ,CAAC,OAAO,CAAC,aAAa,IAAI,CAAC,UAAU;;KAEpE,CAAC;IACJ,CAAC;IAEO,uBAAuB;QAC7B,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,MAAM,EAAE,CAAC;YAClC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,WAAW,CAAC;IAC/D,CAAC;IAEO,qBAAqB;QAC3B,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACrC,CAAC;IAEO,sBAAsB;QAC5B,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,MAAM,EAAE,CAAC;YAClC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;QAEzC,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC;QAC/D,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,OAAO,CAAC,UAAU,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACjE,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;QAClC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC1B,IAAI,CAAC,qBAAqB,GAAG,KAAK,CAAC;QACnC,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAChE,CAAC;IAEO,mBAAmB;QACzB,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,+BAA+B,CAAC,CAAC;QACjE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IACxC,CAAC;IAEO,gBAAgB,CAAC,CAAQ;QAE/B,MAAM,MAAM,GAAI,CAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QACpC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,+BAA+B,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC;IAC1F,CAAC;IAEO,UAAU;QAChB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC1B,IAAI,CAAC,eAAe,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IAC3C,CAAC;;AApHD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;kDAGvD;AAU0B;IAA1B,KAAK,CAAC,kBAAkB,CAAC;uDAAsB;AAC/B;IAAhB,KAAK,CAAC,QAAQ,CAAC;6CAAqB;AACT;IAA3B,KAAK,CAAC,mBAAmB,CAAC;uDAA0C;AA3B1D,cAAc;IAD1B,aAAa,CAAC,mBAAmB,CAAC;GACtB,cAAc,CAkI1B","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { config } from '../config.js';\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles as swiperStyles } from './side-navigation-swiper.styles.js';\nimport { styles } from './side-navigation.styles.js';\n\nimport '../elevation/elevation.js';\n\n/**\n * @deprecated Use `<u-scaffold>` and place a `<u-drawer>` or\n * `<u-navigation-rail>` directly as a body sibling (for a permanent\n * sidebar) or wrap it in `<u-pane mode=\"sidebar\" mode-lg=\"fixed\">` for\n * a sidebar that collapses to an overlay below `lg`. Standalone usage\n * outside of a scaffold remains supported.\n */\n@customElement('u-side-navigation')\nexport class SideNavigation extends LitElement {\n  static override styles = [baseStyles, config.navigationDrawer.useSwiperJs ? swiperStyles : styles];\n\n  #toggleDrawer = false;\n  private disableSlideAnimation = false;\n\n  /**\n   * Toggle the navigation drawer visibility\n   *\n   * _Modal drawer_: Open if `true`, closed if `false`\n   * _Standard drawer_: Collapsed if `true`, visible if `false`\n   */\n  @property({ type: Boolean, attribute: 'toggle-drawer' })\n  get toggleDrawer() {\n    return this.#toggleDrawer;\n  }\n\n  set toggleDrawer(toggleDrawer: boolean) {\n    this.#toggleDrawer = toggleDrawer;\n\n    if (!this.disableSlideAnimation) {\n      this.swiperContainer?.swiper?.slideTo(toggleDrawer ? 0 : 1);\n    }\n  }\n\n  @query('swiper-container') swiperContainer: any;\n  @query('.scrim') scrim!: HTMLElement;\n  @query('#scroll-container') scrollContainer: HTMLElement | undefined;\n\n  override render(): HTMLTemplateResult {\n    return config.navigationDrawer.useSwiperJs ? this.renderWithSwipe() : this.renderDefault();\n  }\n\n  private renderDefault() {\n    const classes = { toggle: this.toggleDrawer };\n\n    return html`\n      <div class=\"grid container\">\n        <div>\n          <div class=\"navigation\">\n            <div class=\"scrim ${classMap(classes)}\" @click=\"${this.scrimClick}\"></div>\n            <div class=\"drawer ${classMap(classes)}\">\n              <u-elevation></u-elevation>\n              <div class=\"drawer-container\">\n                <slot name=\"drawer\"></slot>\n              </div>\n            </div>\n            <slot name=\"rail\"></slot>\n          </div>\n        </div>\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private renderWithSwipe() {\n    const classes = { toggle: this.toggleDrawer };\n    return html`\n      <swiper-container\n        class=\"container\"\n        initial-slide=\"1\"\n        resistance-ratio=\"0\"\n        slides-per-view=\"auto\"\n        simulate-touch=\"false\"\n        @swiperactiveindexchange=\"${this.swiperActiveIndexChange}\"\n        @swiperslidermove=\"${this.swiperSliderMove}\"\n        @swipertransitionend=\"${this.swiperTransitionEnd}\"\n        @swipertransitionstart=\"${this.swiperTransitionStart}\"\n        @swiperslidesgridlengthchange=\"${this.slidesGridLengthChange}\">\n        <swiper-slide class=\"drawer ${classMap(classes)}\">\n          <u-elevation></u-elevation>\n          <div class=\"drawer-container\">\n            <slot name=\"drawer\"></slot>\n          </div>\n        </swiper-slide>\n        <swiper-slide class=\"dummy-slide\"></swiper-slide>\n\n        <div id=\"scroll-container\" class=\"content\" slot=\"container-end\">\n          <slot></slot>\n        </div>\n        <div class=\"scrim ${classMap(classes)}\" @click=\"${this.scrimClick}\" slot=\"container-end\"></div>\n      </swiper-container>\n    `;\n  }\n\n  private swiperActiveIndexChange() {\n    if (!this.swiperContainer?.swiper) {\n      return;\n    }\n\n    this.toggleDrawer = !this.swiperContainer.swiper.activeIndex;\n  }\n\n  private swiperTransitionStart() {\n    this.scrim.classList.add('moving');\n  }\n\n  private slidesGridLengthChange() {\n    if (!this.swiperContainer?.swiper) {\n      return;\n    }\n\n    this.classList.add('disable-transition');\n\n    const gridLength = this.swiperContainer.swiper.snapGrid.length;\n    this.swiperContainer.swiper.slideTo(gridLength === 1 ? 0 : 1, 0);\n    this.disableSlideAnimation = true;\n    this.toggleDrawer = true;\n    this.toggleDrawer = false;\n    this.disableSlideAnimation = false;\n    setTimeout(() => this.classList.remove('disable-transition'));\n  }\n\n  private swiperTransitionEnd() {\n    this.scrim.style.removeProperty('--_modal-drawer-open-progress');\n    this.scrim.classList.remove('moving');\n  }\n\n  private swiperSliderMove(e: Event) {\n\n    const swiper = (e as any).detail[0];\n    this.scrim.style.setProperty('--_modal-drawer-open-progress', `${1 - swiper.progress}`);\n  }\n\n  private scrimClick() {\n    this.toggleDrawer = false;\n    this.swiperContainer?.swiper?.slideTo(1);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-side-navigation': SideNavigation;\n  }\n}\n"]}

package/navigation-bar/navigation-bar-item.d.ts

@@ -0,0 +1,40 @@
+import { HTMLTemplateResult } from 'lit';
+import { ButtonWrapper } from '../shared/button-wrapper.js';
+export type NavBarItemVariant = 'vertical' | 'horizontal';
+/**
+ * A destination inside a `u-navigation-bar`. Renders an M3 active indicator
+ * pill around the icon (vertical) or around icon + label (horizontal), with
+ * the destination label.
+ *
+ * Slots:
+ *  - default: the destination label.
+ *  - `icon`: the destination icon (24dp).
+ *  - `badge`: an optional `u-badge` placed at the top-right of the icon.
+ */
+export declare class NavigationBarItem extends ButtonWrapper {
+    #private;
+    static styles: import("lit").CSSResultGroup[];
+    private _hasIcon;
+    private _hasLabel;
+    /**
+     * Whether the navigation item is active (selected) or not.
+     */
+    active: boolean;
+    /**
+     * Layout variant. `'vertical'` (default) stacks the icon over the label
+     * with a 56×32dp active indicator pill around the icon. `'horizontal'`
+     * places icon and label side-by-side inside a 40dp-high pill.
+     */
+    variant: NavBarItemVariant;
+    private readonly assignedIcons;
+    private readonly assignedLabelNodes;
+    connectedCallback(): void;
+    protected _getContainerClasses(): Record<string, boolean>;
+    protected _renderContent(): HTMLTemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-navigation-bar-item': NavigationBarItem;
+    }
+}
+//# sourceMappingURL=navigation-bar-item.d.ts.map

package/navigation-bar/navigation-bar-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-bar-item.d.ts","sourceRoot":"","sources":["../../src/navigation-bar/navigation-bar-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAG/C,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAG5D,MAAM,MAAM,iBAAiB,GAAG,UAAU,GAAG,YAAY,CAAC;AAE1D;;;;;;;;;GASG;AACH,qBACa,iBAAkB,SAAQ,aAAa;;IAElD,OAAgB,MAAM,iCAGpB;IAEO,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,SAAS,CAAS;IAEnC;;OAEG;IACyC,MAAM,UAAS;IAE3D;;;;OAIG;IAC0B,OAAO,EAAE,iBAAiB,CAAc;IAGrE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAiB;IAG/C,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAU;IAEpC,iBAAiB,IAAI,IAAI;cAKf,oBAAoB,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;cAQ/C,cAAc,IAAI,kBAAkB;CA8CxD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,iBAAiB,CAAC;KAC5C;CACF"}

package/navigation-bar/navigation-bar-item.js

@@ -0,0 +1,113 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property, queryAssignedElements, queryAssignedNodes, state } from 'lit/decorators.js';
+import { ButtonWrapper } from '../shared/button-wrapper.js';
+import { styles } from './navigation-bar-item.styles.js';
+/**
+ * A destination inside a `u-navigation-bar`. Renders an M3 active indicator
+ * pill around the icon (vertical) or around icon + label (horizontal), with
+ * the destination label.
+ *
+ * Slots:
+ *  - default: the destination label.
+ *  - `icon`: the destination icon (24dp).
+ *  - `badge`: an optional `u-badge` placed at the top-right of the icon.
+ */
+let NavigationBarItem = class NavigationBarItem extends ButtonWrapper {
+    constructor() {
+        super(...arguments);
+        this._hasIcon = false;
+        this._hasLabel = false;
+        /**
+         * Whether the navigation item is active (selected) or not.
+         */
+        this.active = false;
+        /**
+         * Layout variant. `'vertical'` (default) stacks the icon over the label
+         * with a 56×32dp active indicator pill around the icon. `'horizontal'`
+         * places icon and label side-by-side inside a 40dp-high pill.
+         */
+        this.variant = 'vertical';
+        this.#handleIconSlotChange = () => {
+            this._hasIcon = this.assignedIcons.length > 0;
+        };
+        this.#handleLabelSlotChange = () => {
+            this._hasLabel = this.assignedLabelNodes.some(node => {
+                if (node.nodeType === Node.TEXT_NODE) {
+                    return !!node.textContent?.trim();
+                }
+                return true;
+            });
+        };
+    }
+    static { this.styles = [
+        ButtonWrapper.styles,
+        styles,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('aria-labelledby', 'text');
+    }
+    _getContainerClasses() {
+        return {
+            ...super._getContainerClasses(),
+            'has-icon': this._hasIcon,
+            'has-label': this._hasLabel,
+        };
+    }
+    _renderContent() {
+        const icon = html `
+      <span class="icon" part="icon">
+        <slot
+          name="icon"
+          aria-hidden="true"
+          @slotchange=${this.#handleIconSlotChange}></slot>
+        <slot name="badge"></slot>
+      </span>
+    `;
+        const label = html `
+      <span class="label" id="text" part="label">
+        <slot @slotchange=${this.#handleLabelSlotChange}></slot>
+      </span>
+    `;
+        if (this.variant === 'horizontal') {
+            return html `
+        <span class="active-indicator" part="active-indicator">
+          ${icon}
+          ${label}
+        </span>
+      `;
+        }
+        return html `
+      <span class="active-indicator" part="active-indicator">
+        ${icon}
+      </span>
+      ${label}
+    `;
+    }
+    #handleIconSlotChange;
+    #handleLabelSlotChange;
+};
+__decorate([
+    state()
+], NavigationBarItem.prototype, "_hasIcon", void 0);
+__decorate([
+    state()
+], NavigationBarItem.prototype, "_hasLabel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NavigationBarItem.prototype, "active", void 0);
+__decorate([
+    property({ reflect: true })
+], NavigationBarItem.prototype, "variant", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'icon', flatten: true })
+], NavigationBarItem.prototype, "assignedIcons", void 0);
+__decorate([
+    queryAssignedNodes({ flatten: true })
+], NavigationBarItem.prototype, "assignedLabelNodes", void 0);
+NavigationBarItem = __decorate([
+    customElement('u-navigation-bar-item')
+], NavigationBarItem);
+export { NavigationBarItem };
+//# sourceMappingURL=navigation-bar-item.js.map

package/navigation-bar/navigation-bar-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-bar-item.js","sourceRoot":"","sources":["../../src/navigation-bar/navigation-bar-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAsB,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE9G,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAIzD;;;;;;;;;GASG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,aAAa;IAA7C;;QAOY,aAAQ,GAAG,KAAK,CAAC;QACjB,cAAS,GAAG,KAAK,CAAC;QAEnC;;WAEG;QACyC,WAAM,GAAG,KAAK,CAAC;QAE3D;;;;WAIG;QAC0B,YAAO,GAAsB,UAAU,CAAC;QAuDrE,0BAAqB,GAAG,GAAS,EAAE;YACjC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;QAChD,CAAC,CAAC;QAEF,2BAAsB,GAAG,GAAS,EAAE;YAClC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;gBACnD,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,EAAE,CAAC;oBACrC,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC;gBACpC,CAAC;gBACD,OAAO,IAAI,CAAC;YACd,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;IACJ,CAAC;aArFiB,WAAM,GAAG;QACvB,aAAa,CAAC,MAAM;QACpB,MAAM;KACP,AAHqB,CAGpB;IAuBO,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC;IAC/C,CAAC;IAEkB,oBAAoB;QACrC,OAAO;YACL,GAAG,KAAK,CAAC,oBAAoB,EAAE;YAC/B,UAAU,EAAE,IAAI,CAAC,QAAQ;YACzB,WAAW,EAAE,IAAI,CAAC,SAAS;SAC5B,CAAC;IACJ,CAAC;IAEkB,cAAc;QAC/B,MAAM,IAAI,GAAG,IAAI,CAAA;;;;;wBAKG,IAAI,CAAC,qBAAqB;;;KAG7C,CAAC;QAEF,MAAM,KAAK,GAAG,IAAI,CAAA;;4BAEM,IAAI,CAAC,sBAAsB;;KAElD,CAAC;QAEF,IAAI,IAAI,CAAC,OAAO,KAAK,YAAY,EAAE,CAAC;YAClC,OAAO,IAAI,CAAA;;YAEL,IAAI;YACJ,KAAK;;OAEV,CAAC;QACJ,CAAC;QAED,OAAO,IAAI,CAAA;;UAEL,IAAI;;QAEN,KAAK;KACR,CAAC;IACJ,CAAC;IAED,qBAAqB,CAEnB;IAEF,sBAAsB,CAOpB;;AA/Ee;IAAhB,KAAK,EAAE;mDAA0B;AACjB;IAAhB,KAAK,EAAE;oDAA2B;AAKS;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAgB;AAO9B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAyC;AAGpD;IADhB,qBAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wDACR;AAG9B;IADhB,kBAAkB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6DACO;AA1BlC,iBAAiB;IAD7B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,iBAAiB,CAuF7B","sourcesContent":["import { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property, queryAssignedElements, queryAssignedNodes, state } from 'lit/decorators.js';\n\nimport { ButtonWrapper } from '../shared/button-wrapper.js';\nimport { styles } from './navigation-bar-item.styles.js';\n\nexport type NavBarItemVariant = 'vertical' | 'horizontal';\n\n/**\n * A destination inside a `u-navigation-bar`. Renders an M3 active indicator\n * pill around the icon (vertical) or around icon + label (horizontal), with\n * the destination label.\n *\n * Slots:\n *  - default: the destination label.\n *  - `icon`: the destination icon (24dp).\n *  - `badge`: an optional `u-badge` placed at the top-right of the icon.\n */\n@customElement('u-navigation-bar-item')\nexport class NavigationBarItem extends ButtonWrapper {\n\n  static override styles = [\n    ButtonWrapper.styles,\n    styles,\n  ];\n\n  @state() private _hasIcon = false;\n  @state() private _hasLabel = false;\n\n  /**\n   * Whether the navigation item is active (selected) or not.\n   */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /**\n   * Layout variant. `'vertical'` (default) stacks the icon over the label\n   * with a 56×32dp active indicator pill around the icon. `'horizontal'`\n   * places icon and label side-by-side inside a 40dp-high pill.\n   */\n  @property({ reflect: true }) variant: NavBarItemVariant = 'vertical';\n\n  @queryAssignedElements({ slot: 'icon', flatten: true })\n  private readonly assignedIcons!: HTMLElement[];\n\n  @queryAssignedNodes({ flatten: true })\n  private readonly assignedLabelNodes!: Node[];\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('aria-labelledby', 'text');\n  }\n\n  protected override _getContainerClasses(): Record<string, boolean> {\n    return {\n      ...super._getContainerClasses(),\n      'has-icon': this._hasIcon,\n      'has-label': this._hasLabel,\n    };\n  }\n\n  protected override _renderContent(): HTMLTemplateResult {\n    const icon = html`\n      <span class=\"icon\" part=\"icon\">\n        <slot\n          name=\"icon\"\n          aria-hidden=\"true\"\n          @slotchange=${this.#handleIconSlotChange}></slot>\n        <slot name=\"badge\"></slot>\n      </span>\n    `;\n\n    const label = html`\n      <span class=\"label\" id=\"text\" part=\"label\">\n        <slot @slotchange=${this.#handleLabelSlotChange}></slot>\n      </span>\n    `;\n\n    if (this.variant === 'horizontal') {\n      return html`\n        <span class=\"active-indicator\" part=\"active-indicator\">\n          ${icon}\n          ${label}\n        </span>\n      `;\n    }\n\n    return html`\n      <span class=\"active-indicator\" part=\"active-indicator\">\n        ${icon}\n      </span>\n      ${label}\n    `;\n  }\n\n  #handleIconSlotChange = (): void => {\n    this._hasIcon = this.assignedIcons.length > 0;\n  };\n\n  #handleLabelSlotChange = (): void => {\n    this._hasLabel = this.assignedLabelNodes.some(node => {\n      if (node.nodeType === Node.TEXT_NODE) {\n        return !!node.textContent?.trim();\n      }\n      return true;\n    });\n  };\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-navigation-bar-item': NavigationBarItem;\n  }\n}\n"]}

package/navigation-bar/navigation-bar-item.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=navigation-bar-item.styles.d.ts.map

package/navigation-bar/navigation-bar-item.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-bar-item.styles.d.ts","sourceRoot":"","sources":["../../src/navigation-bar/navigation-bar-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAkGlB,CAAC"}

package/navigation-bar/navigation-bar-item.styles.js

@@ -0,0 +1,101 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: flex;
+    flex: 1 1 0;
+    min-width: 0;
+    --_nav-bar-item-icon-size: var(--u-nav-bar-item-icon-size, 24px);
+  }
+
+  .container {
+    display: flex;
+    flex: 1 1 0;
+    align-items: center;
+    justify-content: center;
+    color: var(--u-nav-bar-item-inactive-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
+  }
+
+  .content {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--u-nav-bar-item-vertical-between-space, 6px);
+  }
+
+  :host([variant=horizontal]) .content {
+    flex-direction: column;
+  }
+
+  .active-indicator {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    border-radius: var(--u-nav-bar-item-active-indicator-shape, var(--u-shape-corner-full, 9999px));
+    transition: background-color 150ms;
+  }
+
+  :host(:not([variant=horizontal])) .active-indicator {
+    width: var(--u-nav-bar-item-vertical-active-indicator-width, 56px);
+    height: var(--u-nav-bar-item-vertical-active-indicator-height, 32px);
+  }
+
+  :host([variant=horizontal]) .active-indicator {
+    flex-direction: row;
+    height: var(--u-nav-bar-item-horizontal-active-indicator-height, 40px);
+    padding-inline: var(--u-nav-bar-item-horizontal-active-indicator-leading-space, 16px) var(--u-nav-bar-item-horizontal-active-indicator-trailing-space, 16px);
+    gap: var(--u-nav-bar-item-horizontal-active-indicator-icon-label-space, 4px);
+  }
+
+  .icon {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--_nav-bar-item-icon-size);
+    height: var(--_nav-bar-item-icon-size);
+    font-size: var(--_nav-bar-item-icon-size);
+    line-height: 1;
+    color: var(--u-nav-bar-item-inactive-icon-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
+  }
+
+  .label {
+    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));
+    line-height: var(--u-nav-bar-item-label-line-height, var(--u-label-m-line-height, 1rem));
+    font-size: var(--u-nav-bar-item-label-font-size, var(--u-label-m-font-size, 0.75rem));
+    letter-spacing: var(--u-nav-bar-item-label-letter-spacing, var(--u-label-m-letter-spacing, 0.0416666667rem));
+    font-weight: var(--u-nav-bar-item-label-font-weight, var(--u-label-m-font-weight, var(--u-font-weight-medium, 500)));
+    letter-spacing: var(--u-nav-bar-item-label-letter-spacing, 0.5px);
+    color: var(--u-nav-bar-item-inactive-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+
+  :host([variant=horizontal]) .label {
+    text-align: start;
+  }
+
+  .container:not(.has-label) .label,
+  .container:not(.has-icon) .icon {
+    display: none;
+  }
+
+  :host(.active) .container .active-indicator,
+  :host([active]) .container .active-indicator {
+    background-color: var(--u-nav-bar-item-active-indicator-color, var(--u-color-secondary-container, rgb(232, 222, 248)));
+  }
+  :host(.active) .container .icon,
+  :host([active]) .container .icon {
+    color: var(--u-nav-bar-item-active-icon-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));
+  }
+  :host(.active) .container .label,
+  :host([active]) .container .label {
+    color: var(--u-nav-bar-item-active-label-color, var(--u-color-secondary, rgb(98, 91, 113)));
+  }
+`;
+//# sourceMappingURL=navigation-bar-item.styles.js.map

package/navigation-bar/navigation-bar-item.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-bar-item.styles.js","sourceRoot":"","sources":["../../src/navigation-bar/navigation-bar-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkGzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: flex;\n    flex: 1 1 0;\n    min-width: 0;\n    --_nav-bar-item-icon-size: var(--u-nav-bar-item-icon-size, 24px);\n  }\n\n  .container {\n    display: flex;\n    flex: 1 1 0;\n    align-items: center;\n    justify-content: center;\n    color: var(--u-nav-bar-item-inactive-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  .content {\n    display: inline-flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: var(--u-nav-bar-item-vertical-between-space, 6px);\n  }\n\n  :host([variant=horizontal]) .content {\n    flex-direction: column;\n  }\n\n  .active-indicator {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: 0 0 auto;\n    border-radius: var(--u-nav-bar-item-active-indicator-shape, var(--u-shape-corner-full, 9999px));\n    transition: background-color 150ms;\n  }\n\n  :host(:not([variant=horizontal])) .active-indicator {\n    width: var(--u-nav-bar-item-vertical-active-indicator-width, 56px);\n    height: var(--u-nav-bar-item-vertical-active-indicator-height, 32px);\n  }\n\n  :host([variant=horizontal]) .active-indicator {\n    flex-direction: row;\n    height: var(--u-nav-bar-item-horizontal-active-indicator-height, 40px);\n    padding-inline: var(--u-nav-bar-item-horizontal-active-indicator-leading-space, 16px) var(--u-nav-bar-item-horizontal-active-indicator-trailing-space, 16px);\n    gap: var(--u-nav-bar-item-horizontal-active-indicator-icon-label-space, 4px);\n  }\n\n  .icon {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_nav-bar-item-icon-size);\n    height: var(--_nav-bar-item-icon-size);\n    font-size: var(--_nav-bar-item-icon-size);\n    line-height: 1;\n    color: var(--u-nav-bar-item-inactive-icon-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  .label {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-nav-bar-item-label-line-height, var(--u-label-m-line-height, 1rem));\n    font-size: var(--u-nav-bar-item-label-font-size, var(--u-label-m-font-size, 0.75rem));\n    letter-spacing: var(--u-nav-bar-item-label-letter-spacing, var(--u-label-m-letter-spacing, 0.0416666667rem));\n    font-weight: var(--u-nav-bar-item-label-font-weight, var(--u-label-m-font-weight, var(--u-font-weight-medium, 500)));\n    letter-spacing: var(--u-nav-bar-item-label-letter-spacing, 0.5px);\n    color: var(--u-nav-bar-item-inactive-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    text-align: center;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 100%;\n  }\n\n  :host([variant=horizontal]) .label {\n    text-align: start;\n  }\n\n  .container:not(.has-label) .label,\n  .container:not(.has-icon) .icon {\n    display: none;\n  }\n\n  :host(.active) .container .active-indicator,\n  :host([active]) .container .active-indicator {\n    background-color: var(--u-nav-bar-item-active-indicator-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n  }\n  :host(.active) .container .icon,\n  :host([active]) .container .icon {\n    color: var(--u-nav-bar-item-active-icon-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n  :host(.active) .container .label,\n  :host([active]) .container .label {\n    color: var(--u-nav-bar-item-active-label-color, var(--u-color-secondary, rgb(98, 91, 113)));\n  }\n`;\n"]}

package/navigation-bar/navigation-bar.d.ts

@@ -0,0 +1,40 @@
+import { PropertyValues } from '@lit/reactive-element';
+import { HTMLTemplateResult, LitElement } from 'lit';
+/**
+ * Material 3 navigation bar — a persistent bar pinned to the bottom of the
+ * application that hosts top-level destinations (typically 3–5 icon buttons
+ * or navigation-bar items). Mirrors `u-top-app-bar`'s positioning model: an
+ * internal `.spacing` filler reserves the bar's height inside the surrounding
+ * flow so content under it does not get obscured.
+ *
+ * Slots:
+ *  - default: destination items (e.g. `u-icon-button`s).
+ */
+export declare class NavigationBar extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /**
+     * The positioning strategy of the navigation bar.
+     */
+    position: 'fixed' | 'absolute' | 'static';
+    /**
+     * The element the bar will observe for scroll. Accepts an `HTMLElement`,
+     * the id of an element, `'window'` to use the window scroll, or `'none'`
+     * to disable. When unset, the bar consumes the scroll container provided
+     * by an ancestor `u-scaffold` via context, falling back to `'window'`.
+     * Reserved for future scroll-driven behaviors (e.g. hide on scroll).
+     */
+    scrollContainer: 'none' | 'window' | string | HTMLElement | undefined;
+    protected readonly _scrollContainerFromContext: HTMLElement | undefined;
+    private readonly _container;
+    private containerSizeObserver;
+    render(): HTMLTemplateResult;
+    firstUpdated(changedProperties: PropertyValues): void;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-navigation-bar': NavigationBar;
+    }
+}
+//# sourceMappingURL=navigation-bar.d.ts.map

package/navigation-bar/navigation-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-bar.d.ts","sourceRoot":"","sources":["../../src/navigation-bar/navigation-bar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAQpE;;;;;;;;;GASG;AACH,qBACa,aAAc,SAAQ,UAAU;;IAC3C,OAAgB,MAAM,4BAAwB;IAE9C;;OAEG;IAEH,QAAQ,EAAE,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAW;IAEpD;;;;;;OAMG;IAEH,eAAe,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,WAAW,GAAG,SAAS,CAAa;IAIlF,SAAS,CAAC,QAAQ,CAAC,2BAA2B,EAAG,WAAW,GAAG,SAAS,CAAC;IAE9C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAe;IAErE,OAAO,CAAC,qBAAqB,CAA+B;IAEnD,MAAM,IAAI,kBAAkB;IAmB5B,YAAY,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAOrD,oBAAoB,IAAI,IAAI;CAStC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,aAAa,CAAC;KACnC;CACF"}

package/navigation-bar/navigation-bar.js

@@ -0,0 +1,85 @@
+import { __decorate } from "tslib";
+import { consume } from '@lit/context';
+import { html, LitElement, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { scrollContainerContext } from '../scaffold/scroll-container-context.js';
+import { styles as baseStyles } from '../shared/base.styles.js';
+import { styles } from './navigation-bar.styles.js';
+/**
+ * Material 3 navigation bar — a persistent bar pinned to the bottom of the
+ * application that hosts top-level destinations (typically 3–5 icon buttons
+ * or navigation-bar items). Mirrors `u-top-app-bar`'s positioning model: an
+ * internal `.spacing` filler reserves the bar's height inside the surrounding
+ * flow so content under it does not get obscured.
+ *
+ * Slots:
+ *  - default: destination items (e.g. `u-icon-button`s).
+ */
+let NavigationBar = class NavigationBar extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The positioning strategy of the navigation bar.
+         */
+        this.position = 'fixed';
+        /**
+         * The element the bar will observe for scroll. Accepts an `HTMLElement`,
+         * the id of an element, `'window'` to use the window scroll, or `'none'`
+         * to disable. When unset, the bar consumes the scroll container provided
+         * by an ancestor `u-scaffold` via context, falling back to `'window'`.
+         * Reserved for future scroll-driven behaviors (e.g. hide on scroll).
+         */
+        this.scrollContainer = undefined;
+        this.containerSizeObserver = null;
+    }
+    static { this.styles = [baseStyles, styles]; }
+    render() {
+        const containerClasses = classMap({
+            [this.position]: true,
+        });
+        const appBarSpacing = this.position !== 'static'
+            ? html `<div class="spacing"></div>`
+            : nothing;
+        return html `
+      ${appBarSpacing}
+      <div class="container ${containerClasses}" part="container">
+        <div class="content" part="content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.containerSizeObserver = new ResizeObserver(() => this.#setContentHeightProperty());
+        this.containerSizeObserver.observe(this._container);
+        this.#setContentHeightProperty();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.containerSizeObserver?.disconnect();
+        this.containerSizeObserver = null;
+    }
+    #setContentHeightProperty() {
+        this.style.setProperty('--_content-height', `${this._container.clientHeight}px`);
+    }
+};
+__decorate([
+    property({ reflect: true })
+], NavigationBar.prototype, "position", void 0);
+__decorate([
+    property({ attribute: 'scroll-container' })
+], NavigationBar.prototype, "scrollContainer", void 0);
+__decorate([
+    consume({ context: scrollContainerContext, subscribe: true }),
+    state()
+], NavigationBar.prototype, "_scrollContainerFromContext", void 0);
+__decorate([
+    query('.container', true)
+], NavigationBar.prototype, "_container", void 0);
+NavigationBar = __decorate([
+    customElement('u-navigation-bar')
+], NavigationBar);
+export { NavigationBar };
+//# sourceMappingURL=navigation-bar.js.map

package/navigation-bar/navigation-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-bar.js","sourceRoot":"","sources":["../../src/navigation-bar/navigation-bar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAGvC,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AACjF,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEpD;;;;;;;;;GASG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAGL;;WAEG;QAEH,aAAQ,GAAoC,OAAO,CAAC;QAEpD;;;;;;WAMG;QAEH,oBAAe,GAAyD,SAAS,CAAC;QAQ1E,0BAAqB,GAA0B,IAAI,CAAC;IAqC9D,CAAC;aA7DiB,WAAM,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,AAAvB,CAAwB;IA0BrC,MAAM;QACb,MAAM,gBAAgB,GAAG,QAAQ,CAAC;YAChC,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI;SACtB,CAAC,CAAC;QAEH,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,KAAK,QAAQ;YAC9C,CAAC,CAAC,IAAI,CAAA,6BAA6B;YACnC,CAAC,CAAC,OAAO,CAAC;QAEZ,OAAO,IAAI,CAAA;QACP,aAAa;8BACS,gBAAgB;;;;;KAKzC,CAAC;IACJ,CAAC;IAEQ,YAAY,CAAC,iBAAiC;QACrD,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QACtC,IAAI,CAAC,qBAAqB,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,CAAC,CAAC;QACxF,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACpD,IAAI,CAAC,yBAAyB,EAAE,CAAC;IACnC,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,qBAAqB,EAAE,UAAU,EAAE,CAAC;QACzC,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;IACpC,CAAC;IAED,yBAAyB;QACvB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,mBAAmB,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,YAAY,IAAI,CAAC,CAAC;IACnF,CAAC;;AAtDD;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACwB;AAUpD;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;sDACsC;AAI/D;IAFlB,OAAO,CAAC,EAAE,OAAO,EAAE,sBAAsB,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;IAC7D,KAAK,EAAE;kEACiE;AAE7B;IAA3C,KAAK,CAAC,YAAY,EAAE,IAAI,CAAC;iDAA2C;AAvB1D,aAAa;IADzB,aAAa,CAAC,kBAAkB,CAAC;GACrB,aAAa,CA8DzB","sourcesContent":["import { consume } from '@lit/context';\nimport { PropertyValues } from '@lit/reactive-element';\n\nimport { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { scrollContainerContext } from '../scaffold/scroll-container-context.js';\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './navigation-bar.styles.js';\n\n/**\n * Material 3 navigation bar — a persistent bar pinned to the bottom of the\n * application that hosts top-level destinations (typically 3–5 icon buttons\n * or navigation-bar items). Mirrors `u-top-app-bar`'s positioning model: an\n * internal `.spacing` filler reserves the bar's height inside the surrounding\n * flow so content under it does not get obscured.\n *\n * Slots:\n *  - default: destination items (e.g. `u-icon-button`s).\n */\n@customElement('u-navigation-bar')\nexport class NavigationBar extends LitElement {\n  static override styles = [baseStyles, styles];\n\n  /**\n   * The positioning strategy of the navigation bar.\n   */\n  @property({ reflect: true })\n  position: 'fixed' | 'absolute' | 'static' = 'fixed';\n\n  /**\n   * The element the bar will observe for scroll. Accepts an `HTMLElement`,\n   * the id of an element, `'window'` to use the window scroll, or `'none'`\n   * to disable. When unset, the bar consumes the scroll container provided\n   * by an ancestor `u-scaffold` via context, falling back to `'window'`.\n   * Reserved for future scroll-driven behaviors (e.g. hide on scroll).\n   */\n  @property({ attribute: 'scroll-container' })\n  scrollContainer: 'none' | 'window' | string | HTMLElement | undefined = undefined;\n\n  @consume({ context: scrollContainerContext, subscribe: true })\n  @state()\n  protected readonly _scrollContainerFromContext!: HTMLElement | undefined;\n\n  @query('.container', true) private readonly _container!: HTMLElement;\n\n  private containerSizeObserver: ResizeObserver | null = null;\n\n  override render(): HTMLTemplateResult {\n    const containerClasses = classMap({\n      [this.position]: true,\n    });\n\n    const appBarSpacing = this.position !== 'static'\n      ? html`<div class=\"spacing\"></div>`\n      : nothing;\n\n    return html`\n      ${appBarSpacing}\n      <div class=\"container ${containerClasses}\" part=\"container\">\n        <div class=\"content\" part=\"content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  override firstUpdated(changedProperties: PropertyValues): void {\n    super.firstUpdated(changedProperties);\n    this.containerSizeObserver = new ResizeObserver(() => this.#setContentHeightProperty());\n    this.containerSizeObserver.observe(this._container);\n    this.#setContentHeightProperty();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.containerSizeObserver?.disconnect();\n    this.containerSizeObserver = null;\n  }\n\n  #setContentHeightProperty(): void {\n    this.style.setProperty('--_content-height', `${this._container.clientHeight}px`);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-navigation-bar': NavigationBar;\n  }\n}\n"]}

package/navigation-bar/navigation-bar.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=navigation-bar.styles.d.ts.map

package/navigation-bar/navigation-bar.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-bar.styles.d.ts","sourceRoot":"","sources":["../../src/navigation-bar/navigation-bar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAyClB,CAAC"}

package/navigation-bar/navigation-bar.styles.js

@@ -0,0 +1,44 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    --u-elevation-level: 2;
+  }
+
+  .container {
+    position: relative;
+    background-color: var(--u-nav-bar-container-color, var(--u-color-surface-container, rgb(243, 237, 247)));
+    color: var(--u-nav-bar-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));
+    transition: background-color 100ms;
+  }
+
+  .absolute {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: 0;
+    z-index: var(--u-nav-bar-z-index, 1010);
+  }
+
+  .fixed {
+    position: fixed;
+    inset-inline: 0;
+    inset-block-end: 0;
+    inset-inline-start: var(--u-app-bar-offset, 0);
+    z-index: var(--u-nav-bar-z-index, 1010);
+    transition: background-color 100ms, inset-inline-start 375ms cubic-bezier(0.19, 1, 0.22, 1);
+  }
+
+  .spacing {
+    padding-block-start: var(--_content-height);
+  }
+
+  .content {
+    display: flex;
+    align-items: stretch;
+    justify-content: space-around;
+    min-height: var(--u-nav-bar-container-height, 64px);
+    padding-inline: 0;
+    gap: var(--u-nav-bar-item-between-space, 0);
+  }
+`;
+//# sourceMappingURL=navigation-bar.styles.js.map