@sandlada/vue-mdc/build/components/navigation-rail-tab/navigation-rail-tab.js


/**
 * @license
 * Copyright 2025 Sandlada & Kai Orion
 * SPDX-License-Identifier: MIT
 */
import { defineComponent, ref, onMounted, createVNode } from "vue";
import { useReflectAttribute } from "../../node_modules/@glare-labs/vue-reflect-attribute/build/vue-reflect-attribute.js";
import { isServer } from "../../utils/is-server.js";
import { SAttachableController } from "../../internals/controller/use-attachable.js";
import "../../internals/navigation/render-navigation-destination.js";
import { componentNamePrefix } from "../../internals/component-name-prefix/component-name-prefix.js";
import { FocusRing } from "../focus-ring/focus-ring.js";
import { Ripple } from "../ripple/ripple.js";
import { props } from "./navigation-rail-tab.definition.js";
import css from "./styles/navigation-rail-tab.module.scss.js";
const NavigationRailTab = /* @__PURE__ */ defineComponent({
  name: `${componentNamePrefix}-navigation-rail-tab`,
  props,
  slots: {},
  emits: ["tab-click", "change"],
  setup(props2, {
    slots,
    emit
  }) {
    const root = ref(null);
    const _hideInactiveLabel = ref(props2.hideInactiveLabel);
    const _label = ref(props2.label);
    useReflectAttribute(root, {
      attributes: [{
        attribute: "hide-inactive-label",
        ref: _hideInactiveLabel,
        reflect: true,
        type: "boolean"
      }, {
        attribute: "label",
        ref: _label,
        reflect: true,
        type: "string"
      }]
    });
    onMounted(() => {
      if (isServer() || !root.value) {
        return;
      }
      const ripple = root.value.querySelector("&>span>.ripple");
      ripple[SAttachableController].attach(root.value);
    });
    return () => createVNode("button", {
      "data-component": "navigation-rail-tab",
      "navigation-tab": true,
      "class": [css["navigation-rail-tab"]],
      "role": "tab",
      "ref": root
    }, [createVNode(FocusRing, {
      "inward": true,
      "shapeInherit": false
    }, null), createVNode("span", {
      "aria-hidden": "true",
      "class": [css["icon-content"]]
    }, [createVNode(Ripple, {
      "class": "ripple"
    }, null), createVNode("span", {
      "class": css["active-indicator"]
    }, null), createVNode("span", {
      "class": css["icon"]
    }, [slots["inactive-icon"] ? slots["inactive-icon"]() : slots.default && slots.default()]), createVNode("span", {
      "class": [css["icon"], css["icon--active"]]
    }, [slots["active-icon"] ? slots["active-icon"]() : slots.default && slots.default()])]), (typeof _label.value.length !== "undefined" || _label.value !== null) && createVNode("span", {
      "class": css["label"]
    }, [_label.value])]);
  }
});
export {
  NavigationRailTab
};
//# sourceMappingURL=navigation-rail-tab.js.map