@manohub/ui 0.7.0 → 0.7.1

package/dist/components/tabs/index.js

@@ -1,72 +1,64 @@
-import { defineComponent, ref, computed, createVNode, Fragment, mergeProps } from "vue";
-import { Icon } from "@manohub/icon";
+import { defineComponent, ref, createVNode } from "vue";
+import { TabBar } from "../tabbar/index.js";
+const TabPanel = /* @__PURE__ */ defineComponent({
+  name: "TabPanel",
+  /* 渲染的是插槽内容（片段根），属性无处可继承 —— 壳归 `Tabs`，属性由它在渲染期搬过去 */
+  inheritAttrs: false,
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    value: {
+      type: [String, Number],
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    lazy: {
+      type: Boolean,
+      default: false
+    }
+  },
+  slots: Object,
+  setup(_props, {
+    slots
+  }) {
+    return () => slots.default?.() ?? null;
+  }
+});
+const flattenChildren = (raw) => (Array.isArray(raw) ? raw : raw == null ? [] : [raw]).flatMap((child) => Array.isArray(child) ? child : [child]).filter((child) => child !== null && child !== void 0 && child !== false && child !== true && child !== "");
+const isTabPanel = (child) => !!child && typeof child === "object" && child.type === TabPanel;
+const panelPropsOf = (child) => isTabPanel(child) ? child.props ?? {} : null;
 const Tabs = /* @__PURE__ */ defineComponent({
   name: "Tabs",
   inheritAttrs: false,
   props: {
     options: {
       type: Array,
-      required: true
+      default: void 0
     },
-    /** 受控选中值；不传即非受控（由 `defaultValue` 起） */
     value: {
       type: [String, Number],
       default: void 0
     },
-    /** 非受控初始选中值，缺省第一项 */
     defaultValue: {
       type: [String, Number],
       default: void 0
     },
-    /** 选中变化回调（受控与非受控都会调） */
     onChange: {
       type: Function,
       default: void 0
     },
-    /** 形态：`line` 下划线 / `card` 选项卡 */
-    type: {
-      type: String,
-      default: "line"
-    },
-    /** 整体居中（页签少、要撑满整行时用） */
-    centered: {
-      type: Boolean,
-      default: false
-    },
-    /** 尺寸档（24 / 32 / 40，只覆盖令牌） */
-    size: {
-      type: String,
-      default: "md"
-    },
-    /** 每项带关闭位（单项可用 `option.closable` 覆写） */
-    closable: {
-      type: Boolean,
-      default: false
-    },
-    /** 尾部「新增」按钮 */
-    addable: {
+    lazy: {
       type: Boolean,
       default: false
-    },
-    /** 「更多」页签的文字 */
-    moreLabel: {
-      type: String,
-      default: "更多"
-    },
-    /** 关闭某项（只回调，**不从 `options` 里删** —— 数据归调用方） */
-    onClose: {
-      type: Function,
-      default: void 0
-    },
-    /** 点新增（只回调） */
-    onAdd: {
-      type: Function,
-      default: void 0
     }
   },
-  /* 受控值必须 emit 回 `update:value`，否则 `v-model:value="x"` 是**静默失效**的：
-     受控时 `props.value !== undefined` ⇒ 内部状态不更新，而外部又收不到新值 ⇒ 点 tab 毫无反应
-     （不报错、不警告）。本件 0.6.x 就漏了这条 —— 文档示例教 `v-model:value` 却点了不动。 */
+  /* 同 `TabBar`：受控值必须 emit 回 `update:value`，否则 `v-model:value="current"` 静默失效
+     （受控时内部状态不更新、外部又收不到 ⇒ 点选项毫无反应）。 */
   emits: {
     "update:value": (value) => true
   },
@@ -76,86 +68,62 @@ const Tabs = /* @__PURE__ */ defineComponent({
     attrs,
     emit
   }) {
-    const innerValue = ref(props.value ?? props.defaultValue ?? props.options[0]?.value);
-    const current = computed(() => props.value ?? innerValue.value);
-    const moreId = `mh-tabs-${Math.random().toString(36).slice(2, 10)}`;
+    const innerValue = ref(props.defaultValue);
+    let items = [];
     const select = (value) => {
-      const target = props.options.find((option) => option.value === value);
-      if (target?.disabled) return;
+      if (items.find((option) => option.value === value)?.disabled) return;
       if (props.value === void 0) innerValue.value = value;
       emit("update:value", value);
       props.onChange?.(value);
     };
-    const isClosable = (option) => option.closable ?? props.closable;
-    return () => createVNode("nav", {
-      "class": [
-        "mh-tabs",
-        /* `mh-popup-host` 是操作层展开转向的**宿主标记**（popup.css 靠它 :has 反推面板开合）：
-           没有它，「更多」的 caret 展开时不会翻向 —— 与 Select / Tooltip 同一分工。 */
-        "mh-popup-host",
-        props.type === "card" ? "mh-tabs--card" : "",
-        props.centered ? "mh-tabs--centered" : "",
-        props.size === "md" ? "" : `mh-tabs--${props.size}`,
-        attrs.class
-      ].filter(Boolean).join(" "),
-      "style": attrs.style,
-      "role": "tablist"
-    }, [props.options.map((option) => {
-      const active = option.value === current.value;
-      return createVNode("button", {
-        "key": option.value,
-        "type": "button",
-        "role": "tab",
-        "class": ["mh-tabs__tab", active ? "is-selected" : "", option.disabled ? "is-disabled" : ""].filter(Boolean).join(" "),
-        "data-state": active ? "active" : "inactive",
-        "aria-selected": active,
-        "disabled": option.disabled,
-        "onClick": () => select(option.value)
-      }, [option.label, isClosable(option) && !option.disabled ? (
-        /* 关闭位不是 `<button>`：页签自己是按钮，按钮里嵌按钮是非法 HTML。
-           用 `role="button"` + `stopPropagation` 表达同样的语义与行为。 */
-        createVNode("span", {
-          "class": "mh-tabs__close",
-          "role": "button",
-          "tabindex": -1,
-          "aria-label": `关闭${option.label}`,
-          "onClick": (event) => {
-            event.stopPropagation();
-            event.preventDefault();
-            props.onClose?.(option.value);
-          }
-        }, [createVNode(Icon, {
-          "name": "close"
-        }, null)])
-      ) : null]);
-    }), props.addable ? createVNode("button", {
-      "type": "button",
-      "class": "mh-tabs__add",
-      "aria-label": "新增页签",
-      "onClick": () => props.onAdd?.()
-    }, [createVNode(Icon, {
-      "name": "plus"
-    }, null)]) : null, slots.more ? createVNode(Fragment, null, [createVNode("button", mergeProps({
-      "type": "button",
-      "class": "mh-tabs__tab mh-tabs__tab--more",
-      "data-state": "inactive"
-    }, {
-      popovertarget: moreId
-    }), [props.moreLabel, createVNode(Icon, {
-      "name": "chevron-down",
-      "class": "mh-popup-caret"
-    }, null)]), createVNode("div", mergeProps({
-      "id": moreId,
-      "class": "mh-popup",
-      "data-side": "bottom",
-      "data-align": "end"
-    }, {
-      popover: "auto"
-    }), [slots.more({
-      options: props.options
-    })])]) : null]);
+    return () => {
+      const nodes = flattenChildren(slots.default?.());
+      const panelMode = nodes.some(isTabPanel);
+      const list = panelMode ? nodes.filter(isTabPanel) : nodes;
+      const blockItems = list.map((node, index) => {
+        const info = panelPropsOf(node);
+        if (info) {
+          return {
+            label: info.name,
+            value: info.value ?? info.name,
+            disabled: info.disabled ?? false
+          };
+        }
+        return props.options?.[index] ?? null;
+      });
+      items = blockItems.filter((item) => item !== null);
+      const current = props.value ?? innerValue.value ?? items[0]?.value;
+      const panels = list.map((node, index) => {
+        const item = blockItems[index];
+        const info = panelPropsOf(node);
+        const active = item !== null && item.value === current;
+        if ((props.lazy || info?.lazy) && !active) return null;
+        const raw = info ? node.props ?? {} : {};
+        return createVNode("div", {
+          "key": String(item?.value ?? index),
+          "class": ["mh-tabs-panel", raw.class].filter(Boolean).join(" "),
+          "style": raw.style,
+          "hidden": !active
+        }, [node]);
+      });
+      return createVNode("div", {
+        "class": ["mh-tabs", attrs.class].filter(Boolean).join(" "),
+        "style": attrs.style
+      }, [slots.selector ? slots.selector({
+        value: current,
+        options: items,
+        select
+      }) : createVNode(TabBar, {
+        "options": items,
+        "value": current,
+        "onChange": select
+      }, null), createVNode("div", {
+        "class": "mh-tabs-panels"
+      }, [panels])]);
+    };
   }
 });
 export {
+  TabPanel,
   Tabs
 };

package/dist/components/tag/index.d.ts

@@ -185,7 +185,7 @@ export declare const Tag: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{}>, {
     color: string;
     size: ControlSize;
-    icon: "filter" | "copy" | "help" | "table" | "menu" | "search" | "link" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
+    icon: "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
     disabled: boolean;
     name: string;
     value: string | number;
@@ -196,8 +196,8 @@ export declare const Tag: import("vue").DefineComponent<import("vue").ExtractPro
     selected: boolean;
     lg: boolean;
     shape: "add" | "select" | "chip" | "regular" | "status" | undefined;
-    tone: "error" | "info" | "success" | "warning" | undefined;
     closable: boolean;
+    tone: "error" | "info" | "success" | "warning" | undefined;
 }, SlotsType<{
     default?: () => VNodeChild;
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/toast/index.d.ts

@@ -99,9 +99,9 @@ export declare const Toast: import("vue").DefineComponent<import("vue").ExtractP
     onClose?: (() => any) | undefined;
 }>, {
     text: string;
-    icon: boolean | "filter" | "copy" | "help" | "table" | "menu" | "search" | "link" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
-    tone: ToastTone;
+    icon: boolean | "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
     closable: boolean;
+    tone: ToastTone;
     action: string;
     onAction: () => void;
     duration: number;
@@ -151,9 +151,9 @@ export declare const ToastCompound: {
         close: () => true;
     }, import("vue").PublicProps, {
         text: string;
-        icon: boolean | "filter" | "copy" | "help" | "table" | "menu" | "search" | "link" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
-        tone: ToastTone;
+        icon: boolean | "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
         closable: boolean;
+        tone: ToastTone;
         action: string;
         onAction: () => void;
         duration: number;
@@ -205,9 +205,9 @@ export declare const ToastCompound: {
         onClose?: (() => any) | undefined;
     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
         text: string;
-        icon: boolean | "filter" | "copy" | "help" | "table" | "menu" | "search" | "link" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
-        tone: ToastTone;
+        icon: boolean | "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
         closable: boolean;
+        tone: ToastTone;
         action: string;
         onAction: () => void;
         duration: number;
@@ -256,9 +256,9 @@ export declare const ToastCompound: {
     close: () => true;
 }, string, {
     text: string;
-    icon: boolean | "filter" | "copy" | "help" | "table" | "menu" | "search" | "link" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
-    tone: ToastTone;
+    icon: boolean | "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
     closable: boolean;
+    tone: ToastTone;
     action: string;
     onAction: () => void;
     duration: number;

package/dist/index.d.ts

@@ -21,7 +21,7 @@ export { Card, type CardProps, type CardVariant, type CardPadding, type CardHead
 export { Divider, type DividerProps } from './components/divider';
 export { Nav, type NavVariant } from './components/nav';
 export { Collapse, type CollapseProps, type CollapseCompound } from './components/collapse';
-export { Tabset, type TabsetOption, type TabsetProps } from './components/tabset';
+export { TabPanel, Tabs, type TabPanelProps, type TabsOption, type TabsProps } from './components/tabs';
 export { Layout, type LayoutGap, type LayoutAlign, type LayoutJustify, type LayoutColumns, type LayoutSpan, } from './components/layout';
 export { Avatar, type AvatarProps, type AvatarSize, type AvatarCompound } from './components/avatar';
 export { Skeleton, type SkeletonProps } from './components/skeleton';
@@ -37,7 +37,7 @@ export { Search, type SearchProps } from './components/search';
 export { Select, type SelectOption, type SelectValue } from './components/select';
 export { Switch } from './components/switch';
 export { Capsule, type CapsuleOption, type CapsuleShape } from './components/capsule';
-export { Form, type FormProps, type FormHeaderProps, type FormItemProps, type FormValues, type FormItemSlotScope, type FormLabelAlign, type FormPadding, type FormCompound, } from './components/form';
+export { Form, type FormProps, type FormHeaderProps, type FormItemProps, type FormValues, type FormItemSlotScope, type FormItemAlign, type FormLabelAlign, type FormColumns, type FormPadding, type FormCompound, } from './components/form';
 export { Checkbox, type CheckboxOption, type CheckboxCompound, type CheckboxCompoundType, } from './components/checkbox';
 export { Filter, FilterItem, FILTER_ALL, normalizeFilterValue, type FilterValue, type FilterValues, type FilterProps, type FilterItemProps, type FilterItemSlotScope, type FilterCompound, } from './components/filter';
 export { Notice, type NoticeTone } from './components/notice';
@@ -45,10 +45,10 @@ export { Notification, type NotificationTone, } from './components/notification'
 export { Dialog, type DialogWidth } from './components/dialog';
 export { Drawer, type DrawerSide } from './components/drawer';
 export { Tooltip, type TooltipSide, type TooltipAlign, } from './components/tooltip';
-export { Table, type TableColumn, type TableRow, type TableSortOrder, } from './components/table';
+export { Table, type TableColumn, type TableRow, type TableRowSelectable, type TableSortOrder, } from './components/table';
 export { Pagination, type PaginationPageItem } from './components/pagination';
-export { Tabs, type TabsOption, type TabsValue } from './components/tabs';
-export { Steps, type StepsItem, type StepsVariant, type StepsCompound, type StepsCompoundType, } from './components/steps';
+export { TabBar, type TabBarOption, type TabBarValue } from './components/tabbar';
+export { Steps, type CanJump, type StepsItem, type StepsVariant, type StepsCompound, type StepsCompoundType, } from './components/steps';
 export { Toast, type ToastTone, type ToastCompound, type ToastCompoundType, } from './components/toast';
 export { Code } from './components/code';
 export { CodeEditor, type CodeEditorProps, type CodeEditorAutoSize, } from './components/code-editor';

package/dist/index.js

@@ -4,7 +4,7 @@ import { Card } from "./components/card/index.js";
 import { Divider } from "./components/divider/index.js";
 import { Nav } from "./components/nav/index.js";
 import { Collapse } from "./components/collapse/index.js";
-import { Tabset } from "./components/tabset/index.js";
+import { TabPanel, Tabs } from "./components/tabs/index.js";
 import { Layout } from "./components/layout/index.js";
 import { Avatar } from "./components/avatar/index.js";
 import { Skeleton } from "./components/skeleton/index.js";
@@ -30,7 +30,7 @@ import { Drawer } from "./components/drawer/index.js";
 import { Tooltip } from "./components/tooltip/index.js";
 import { Table } from "./components/table/index.js";
 import { Pagination } from "./components/pagination/index.js";
-import { Tabs } from "./components/tabs/index.js";
+import { TabBar } from "./components/tabbar/index.js";
 import { Steps } from "./components/steps/index.js";
 import { Toast } from "./components/toast/index.js";
 import { Code } from "./components/code/index.js";
@@ -77,9 +77,10 @@ export {
   Skeleton,
   Steps,
   Switch,
+  TabBar,
+  TabPanel,
   Table,
   Tabs,
-  Tabset,
   Tag,
   Text,
   Textarea,

package/dist/styles/components/capsule.css

@@ -14,11 +14,11 @@
  *
  * 状态三源等价：原生 `input:checked` / 组件下发 `[data-state='active']` / 静态档 `.is-selected`。
  *
- * **与面板组合**：要「选中即切面板」，外面套 `styles/operations/tabset.css` 的 `.mh-tabset` ——
- * 本族不认识它、它也不认识本族（两层零互指），壳层挂类即可。
+ * **与面板组合**：要「选中即切面板」，把本件塞进 `Tabs` 的 `selector` 插槽即可 ——
+ * 面板显隐由 `Tabs` 按受控值下发 `hidden`，本族不认识它、它也不认识本族（两层零互指）。
  *
- * **与 `Tabset` 的判据**：`Tabset` 是操作层（只给行为与档位表、不带面），面可由本件或按钮族的分段形态担任；
- * 本件是**带自己轨道与选中胶囊的轻量选择控件**。
+ * **与 `Tabs` 的判据**：`Tabs` 是操作层的**骨架**（只给根、面板组与收起态，不带面），
+ * 面可由本件或按钮族的分段形态担任；本件是**带自己轨道与选中胶囊的轻量选择控件**。
  */
 .mh-capsule {
   display: inline-flex;