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


/**
 * @license
 * Copyright 2025 Sandlada & Kai Orion
 * SPDX-License-Identifier: MIT
 */
import { defineComponent, ref, createVNode } from "vue";
import { useReflectAttribute } from "../../node_modules/@glare-labs/vue-reflect-attribute/build/vue-reflect-attribute.js";
import { componentNamePrefix } from "../../internals/component-name-prefix/component-name-prefix.js";
import { useNavigable } from "../../internals/controller/use-navigable.js";
import { renderNavigationDestination } from "../../internals/navigation/render-navigation-destination.js";
import { Elevation } from "../elevation/elevation.js";
import "../elevation/elevation.definition.js";
import { NavigationTab } from "../navigation-tab/navigation-tab.js";
import { props, NavigationBarRippleStyle } from "./navigation-bar.definition.js";
import css from "./styles/navigation-bar.module.scss.js";
const NavigationBar = /* @__PURE__ */ defineComponent({
  name: `${componentNamePrefix}-navigation-bar`,
  slots: {},
  props,
  emits: ["change"],
  setup(props2, {
    slots,
    emit
  }) {
    const root = ref(null);
    const _rippleStyle = ref(props2.rippleStyle);
    const handleChange = (e) => {
      emit("change", e);
    };
    useReflectAttribute(root, {
      attributes: [{
        attribute: "ripple-style",
        ref: _rippleStyle,
        reflect: true,
        type: "string"
      }],
      tick: "after"
    });
    useNavigable(root, {
      tabs: [],
      handleChange
    });
    return () => {
      renderNavigationDestination({
        component: NavigationTab,
        container: root,
        tabs: props2.tabs,
        props: (tabConfig) => ({
          hideInactiveLabel: typeof tabConfig.hideInactiveLabel === "undefined" ? props2.hideInactiveLabel : tabConfig.hideInactiveLabel,
          label: tabConfig.label ?? "Unnamed Tab"
        })
      });
      return createVNode("div", {
        "data-component": "navigation-bar",
        "class": [css["navigation-bar"], _rippleStyle.value === NavigationBarRippleStyle.Unbounded && css["ripple-unbounded"]],
        "ref": root
      }, [slots.default && slots.default(), createVNode(Elevation, null, null)]);
    };
  },
  inheritAttrs: true
});
export {
  NavigationBar
};
//# sourceMappingURL=navigation-bar.js.map