import { h } from 'atomico';
import { g as getComponentOrDefine } from './chunks/65ef80fe.js';

var style = ":host {\n  width: 100%;\n}\n\n.page {\n  width: 960px;\n}\n\n.title {\n  width: -webkit-min-content;\n  width: -moz-min-content;\n  width: min-content;\n  cursor: pointer;\n  line-height: 28px;\n  text-align: center;\n  height: 20px;\n  font-size: 20px;\n  color: #9f9f9f;\n  padding-bottom: 15px;\n  margin: 10px 15px;\n}\n\n.selected {\n  border-bottom: 4px solid #ffa72f;\n  color: #000;\n}\n\n.hidden {\n  visibility: hidden;\n  display: none;\n}\n";

const _jsxFileName = "/Users/rang/rang/frond_ng/packages/six/src/components/kun-tab/kun-tab.tsx";
const KunTab = ({ selected: boolean, message: string }) => (
  h('host', { shadowDom: true, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 6}}
    , h('style', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 7}}, style)
    , h('span', { className: `title ${selected ? "selected" : ""}`, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 8}}
      , message
    )
  )
);

KunTab.props = {
  selected: {
    type: Boolean,
    value: false,
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
  message: {
    type: String,
    value: "kun-loading",
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
};

var kunTab = getComponentOrDefine("kun-tab", KunTab);

export default kunTab;
