@xihan-ui/vue 4.2.0 → 5.1.0

package/dist/components/number-field/number-field.js

@@ -1,12 +1,18 @@
+import { renderStructure } from "../../runtime/structure.js";
 import { useFormControlProps } from "../form/use-form-control.js";
 import { useFieldLabelWiring, useFieldStateWiring } from "../field/use-field-control.js";
 import { provideNumberField, useNumberFieldContext } from "./context.js";
 import { useNumberField } from "./use-number-field.js";
-import { defineComponent, h } from "vue";
+import { numberFieldStructure } from "@xihan-ui/headless";
+import { defineComponent, h, onUnmounted } from "vue";
 //#region src/components/number-field/number-field.ts
 const XhNumberFieldRoot = defineComponent({
 	name: "XhNumberFieldRoot",
 	props: {
+		/** 不显示出来的名字，写成 aria-label 落在与字段标签同一个部件上；放进字段或渲染了 label 部件时以它们为准。 */
+		ariaLabel: { type: String },
+		/** 标题文字。不写默认插槽时铺 label 部件；需要放置其他内容时改用 label 插槽。 */
+		label: { type: String },
 		value: { type: String },
 		defaultValue: { type: String },
 		min: { type: Number },
@@ -30,6 +36,7 @@ const XhNumberFieldRoot = defineComponent({
 			default: void 0
 		},
 		name: { type: String },
+		placeholder: { type: String },
 		changeDelay: { type: Number },
 		changeInterval: { type: Number },
 		minChangeInterval: { type: Number },
@@ -55,23 +62,30 @@ const XhNumberFieldRoot = defineComponent({
 		};
 		const ctx = useNumberField(useFormControlProps(props), notify);
 		provideNumberField(ctx);
-		return () => h("div", ctx.api.value.getRootProps(), slots.default?.({
-			value: ctx.api.value.value,
-			valueAsNumber: ctx.api.value.valueAsNumber,
-			empty: ctx.api.value.empty,
-			canIncrement: ctx.api.value.canIncrement,
-			canDecrement: ctx.api.value.canDecrement,
-			outOfRange: ctx.api.value.outOfRange,
-			setValue: ctx.api.value.setValue,
-			increment: ctx.api.value.increment,
-			decrement: ctx.api.value.decrement
-		}));
+		return () => {
+			const api = ctx.api.value;
+			return h("div", api.getRootProps(), slots.default ? slots.default({
+				value: api.value,
+				valueAsNumber: api.valueAsNumber,
+				empty: api.empty,
+				canIncrement: api.canIncrement,
+				canDecrement: api.canDecrement,
+				outOfRange: api.outOfRange,
+				setValue: api.setValue,
+				increment: api.increment,
+				decrement: api.decrement
+			}) : renderDefaultStructure(props.label, slots.label));
+		};
 	}
 });
 const XhNumberFieldLabel = defineComponent({
 	name: "XhNumberFieldLabel",
 	setup(_, { slots }) {
 		const ctx = useNumberFieldContext();
+		ctx.labelCount.value++;
+		onUnmounted(() => {
+			ctx.labelCount.value--;
+		});
 		return () => h("label", ctx.api.value.getLabelProps(), slots.default?.());
 	}
 });
@@ -122,6 +136,24 @@ const XhNumberFieldDecrementTrigger = defineComponent({
 		return () => h("button", ctx.api.value.getDecrementTriggerProps(), slots.default?.());
 	}
 });
+/** 标准结构里各部件对应的组件。 */
+const NUMBER_FIELD_PARTS = {
+	"label": XhNumberFieldLabel,
+	"control": XhNumberFieldControl,
+	"decrement-trigger": XhNumberFieldDecrementTrigger,
+	"input": XhNumberFieldInput,
+	"increment-trigger": XhNumberFieldIncrementTrigger
+};
+/**
+* 未写默认插槽时铺开的整套结构：照 headless 的 numberFieldStructure 渲，
+* 与 Web Components 不写部件时元素生成的节点出自同一份。标题由 label 插槽接管。
+*/
+function renderDefaultStructure(label, labelSlot) {
+	return renderStructure(numberFieldStructure({
+		label,
+		slotted: (name) => name === "label" && labelSlot != null
+	}), NUMBER_FIELD_PARTS, (node) => node.slot ? labelSlot?.() : void 0);
+}
 //#endregion
 export { XhNumberFieldControl, XhNumberFieldDecrementTrigger, XhNumberFieldIncrementTrigger, XhNumberFieldInput, XhNumberFieldLabel, XhNumberFieldPrefix, XhNumberFieldRoot, XhNumberFieldSuffix };
 

package/dist/components/number-field/number-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-field.js","names":[],"sources":["../../../src/components/number-field/number-field.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 number field 相关实现。\n\nimport type { ControlVariant, Size, Tone } from '@xihan-ui/core'\nimport type { NumberFieldApi, NumberFieldSchema } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { defineComponent, h } from 'vue'\nimport { useFieldLabelWiring, useFieldStateWiring } from '../field/use-field-control'\nimport { useFormControlProps } from '../form/use-form-control'\nimport { provideNumberField, useNumberFieldContext } from './context'\nimport { useNumberField } from './use-number-field'\n\ntype NumberFieldProps = NumberFieldSchema['props']\n\n/** 默认插槽的载荷：原始输入串与其数值、增减是否仍可进行，以及写值、增减的命令。 */\nexport type NumberFieldRootSlotProps = Pick<\n  NumberFieldApi,\n  'value' | 'valueAsNumber' | 'empty' | 'canIncrement' | 'canDecrement' | 'outOfRange' | 'setValue' | 'increment' | 'decrement'\n>\n\nexport const XhNumberFieldRoot = defineComponent({\n  name: 'XhNumberFieldRoot',\n  props: {\n    // 值是原始输入串；缺席值 undefined 表示非受控\n    value: { type: String },\n    defaultValue: { type: String },\n    min: { type: Number },\n    max: { type: Number },\n    step: { type: Number },\n    largeStep: { type: Number },\n    disabled: { type: Boolean, default: undefined },\n    readOnly: { type: Boolean, default: undefined },\n    required: { type: Boolean, default: undefined },\n    invalid: { type: Boolean, default: undefined },\n    name: { type: String },\n    changeDelay: { type: Number },\n    changeInterval: { type: Number },\n    minChangeInterval: { type: Number },\n    clampValueOnBlur: { type: Boolean, default: undefined },\n    variant: { type: String as PropType<ControlVariant> },\n    tone: { type: String as PropType<Tone> },\n    size: { type: String as PropType<Size> },\n    parse: { type: Function as PropType<NumberFieldProps['parse']> },\n    format: { type: Function as PropType<NumberFieldProps['format']> },\n  },\n  // value-change 携带 { value, valueAsNumber }，update:value 携带裸串\n  emits: {\n    'value-change': (_details: PayloadOf<NumberFieldProps, 'onValueChange'>) => true,\n    'update:value': (_value: PayloadOf<NumberFieldProps, 'onValueChange'>['value']) => true,\n  },\n  slots: Object as SlotsType<{\n    default?: (props: NumberFieldRootSlotProps) => VNode[]\n  }>,\n  setup(props, { slots, emit }) {\n    const notify: NumberFieldProps['onValueChange'] = (details) => {\n      emit('value-change', details)\n      emit('update:value', details.value)\n    }\n    const ctx = useNumberField(useFormControlProps(props) as NumberFieldProps, notify)\n    provideNumberField(ctx)\n    return () => h('div', ctx.api.value.getRootProps() as Record<string, unknown>, slots.default?.({\n      value: ctx.api.value.value,\n      valueAsNumber: ctx.api.value.valueAsNumber,\n      empty: ctx.api.value.empty,\n      canIncrement: ctx.api.value.canIncrement,\n      canDecrement: ctx.api.value.canDecrement,\n      outOfRange: ctx.api.value.outOfRange,\n      setValue: ctx.api.value.setValue,\n      increment: ctx.api.value.increment,\n      decrement: ctx.api.value.decrement,\n    }))\n  },\n})\n\nexport const XhNumberFieldLabel = defineComponent({\n  name: 'XhNumberFieldLabel',\n  setup(_, { slots }) {\n    const ctx = useNumberFieldContext()\n    return () => h('label', ctx.api.value.getLabelProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhNumberFieldControl = defineComponent({\n  name: 'XhNumberFieldControl',\n  setup(_, { slots }) {\n    const ctx = useNumberFieldContext()\n    // 视觉盒：输入框与加减钮都放进来，皮肤把描边、底色、聚焦环画在它身上\n    return () => h('div', ctx.api.value.getControlProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhNumberFieldPrefix = defineComponent({\n  name: 'XhNumberFieldPrefix',\n  setup(_, { slots }) {\n    const ctx = useNumberFieldContext()\n    return () => h('span', ctx.api.value.getPrefixProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhNumberFieldSuffix = defineComponent({\n  name: 'XhNumberFieldSuffix',\n  setup(_, { slots }) {\n    const ctx = useNumberFieldContext()\n    return () => h('span', ctx.api.value.getSuffixProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhNumberFieldInput = defineComponent({\n  name: 'XhNumberFieldInput',\n  setup() {\n    // 字段的说明与校验状态要落在真控件上，不能停在封装根的 div 上\n    const fieldWiring = useFieldStateWiring()\n    // 字段的标签也得并进名字链：控件自带的那条指的是它自己那个没渲染的 label 部件\n    const fieldLabel = useFieldLabelWiring()\n    const ctx = useNumberFieldContext()\n    return () => h('input', fieldLabel.value({ ...fieldWiring.value, ...ctx.api.value.getInputProps() as Record<string, unknown> }))\n  },\n})\n\nexport const XhNumberFieldIncrementTrigger = defineComponent({\n  name: 'XhNumberFieldIncrementTrigger',\n  setup(_, { slots }) {\n    const ctx = useNumberFieldContext()\n    return () => h('button', ctx.api.value.getIncrementTriggerProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhNumberFieldDecrementTrigger = defineComponent({\n  name: 'XhNumberFieldDecrementTrigger',\n  setup(_, { slots }) {\n    const ctx = useNumberFieldContext()\n    return () => h('button', ctx.api.value.getDecrementTriggerProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n"],"mappings":"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"}
+{"version":3,"file":"number-field.js","names":[],"sources":["../../../src/components/number-field/number-field.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 number field 相关实现。\n\nimport type { ControlVariant, Size, Tone } from '@xihan-ui/core'\nimport type { NumberFieldApi, NumberFieldSchema } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { numberFieldStructure } from '@xihan-ui/headless'\nimport { defineComponent, h, onUnmounted } from 'vue'\nimport { renderStructure } from '../../runtime/structure'\nimport { useFieldLabelWiring, useFieldStateWiring } from '../field/use-field-control'\nimport { useFormControlProps } from '../form/use-form-control'\nimport { provideNumberField, useNumberFieldContext } from './context'\nimport { useNumberField } from './use-number-field'\n\ntype NumberFieldProps = NumberFieldSchema['props']\n\n/** 默认插槽的载荷：原始输入串与其数值、增减是否仍可进行，以及写值、增减的命令。 */\nexport type NumberFieldRootSlotProps = Pick<\n  NumberFieldApi,\n  'value' | 'valueAsNumber' | 'empty' | 'canIncrement' | 'canDecrement' | 'outOfRange' | 'setValue' | 'increment' | 'decrement'\n>\n\nexport const XhNumberFieldRoot = defineComponent({\n  name: 'XhNumberFieldRoot',\n  props: {\n    /** 不显示出来的名字，写成 aria-label 落在与字段标签同一个部件上；放进字段或渲染了 label 部件时以它们为准。 */\n    ariaLabel: { type: String },\n    /** 标题文字。不写默认插槽时铺 label 部件；需要放置其他内容时改用 label 插槽。 */\n    label: { type: String },\n    // 值是原始输入串；缺席值 undefined 表示非受控\n    value: { type: String },\n    defaultValue: { type: String },\n    min: { type: Number },\n    max: { type: Number },\n    step: { type: Number },\n    largeStep: { type: Number },\n    disabled: { type: Boolean, default: undefined },\n    readOnly: { type: Boolean, default: undefined },\n    required: { type: Boolean, default: undefined },\n    invalid: { type: Boolean, default: undefined },\n    name: { type: String },\n    placeholder: { type: String },\n    changeDelay: { type: Number },\n    changeInterval: { type: Number },\n    minChangeInterval: { type: Number },\n    clampValueOnBlur: { type: Boolean, default: undefined },\n    variant: { type: String as PropType<ControlVariant> },\n    tone: { type: String as PropType<Tone> },\n    size: { type: String as PropType<Size> },\n    parse: { type: Function as PropType<NumberFieldProps['parse']> },\n    format: { type: Function as PropType<NumberFieldProps['format']> },\n  },\n  // value-change 携带 { value, valueAsNumber }，update:value 携带裸串\n  emits: {\n    'value-change': (_details: PayloadOf<NumberFieldProps, 'onValueChange'>) => true,\n    'update:value': (_value: PayloadOf<NumberFieldProps, 'onValueChange'>['value']) => true,\n  },\n  slots: Object as SlotsType<{\n    default?: (props: NumberFieldRootSlotProps) => VNode[]\n    label?: () => VNode[]\n  }>,\n  setup(props, { slots, emit }) {\n    const notify: NumberFieldProps['onValueChange'] = (details) => {\n      emit('value-change', details)\n      emit('update:value', details.value)\n    }\n    const ctx = useNumberField(useFormControlProps(props) as NumberFieldProps, notify)\n    provideNumberField(ctx)\n    return () => {\n      const api = ctx.api.value\n      return h('div', api.getRootProps() as Record<string, unknown>, slots.default\n        ? slots.default({\n            value: api.value,\n            valueAsNumber: api.valueAsNumber,\n            empty: api.empty,\n            canIncrement: api.canIncrement,\n            canDecrement: api.canDecrement,\n            outOfRange: api.outOfRange,\n            setValue: api.setValue,\n            increment: api.increment,\n            decrement: api.decrement,\n          })\n        : renderDefaultStructure(props.label, slots.label))\n    }\n  },\n})\n\nexport const XhNumberFieldLabel = defineComponent({\n  name: 'XhNumberFieldLabel',\n  setup(_, { slots }) {\n    const ctx = useNumberFieldContext()\n    // 渲出来就登记，在 setup 里同步做：排在输入之前时首帧与服务端直出就带上名字\n    ctx.labelCount.value++\n    onUnmounted(() => {\n      ctx.labelCount.value--\n    })\n    return () => h('label', ctx.api.value.getLabelProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhNumberFieldControl = defineComponent({\n  name: 'XhNumberFieldControl',\n  setup(_, { slots }) {\n    const ctx = useNumberFieldContext()\n    // 视觉盒：输入框与加减钮都放进来，皮肤把描边、底色、聚焦环画在它身上\n    return () => h('div', ctx.api.value.getControlProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhNumberFieldPrefix = defineComponent({\n  name: 'XhNumberFieldPrefix',\n  setup(_, { slots }) {\n    const ctx = useNumberFieldContext()\n    return () => h('span', ctx.api.value.getPrefixProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhNumberFieldSuffix = defineComponent({\n  name: 'XhNumberFieldSuffix',\n  setup(_, { slots }) {\n    const ctx = useNumberFieldContext()\n    return () => h('span', ctx.api.value.getSuffixProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhNumberFieldInput = defineComponent({\n  name: 'XhNumberFieldInput',\n  setup() {\n    // 字段的说明与校验状态要落在真控件上，不能停在封装根的 div 上\n    const fieldWiring = useFieldStateWiring()\n    // 字段的标签也得并进名字链：控件自带的那条指的是它自己那个没渲染的 label 部件\n    const fieldLabel = useFieldLabelWiring()\n    const ctx = useNumberFieldContext()\n    return () => h('input', fieldLabel.value({ ...fieldWiring.value, ...ctx.api.value.getInputProps() as Record<string, unknown> }))\n  },\n})\n\nexport const XhNumberFieldIncrementTrigger = defineComponent({\n  name: 'XhNumberFieldIncrementTrigger',\n  setup(_, { slots }) {\n    const ctx = useNumberFieldContext()\n    return () => h('button', ctx.api.value.getIncrementTriggerProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhNumberFieldDecrementTrigger = defineComponent({\n  name: 'XhNumberFieldDecrementTrigger',\n  setup(_, { slots }) {\n    const ctx = useNumberFieldContext()\n    return () => h('button', ctx.api.value.getDecrementTriggerProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\n/** 标准结构里各部件对应的组件。 */\nconst NUMBER_FIELD_PARTS = {\n  'label': XhNumberFieldLabel,\n  'control': XhNumberFieldControl,\n  'decrement-trigger': XhNumberFieldDecrementTrigger,\n  'input': XhNumberFieldInput,\n  'increment-trigger': XhNumberFieldIncrementTrigger,\n}\n\n/**\n * 未写默认插槽时铺开的整套结构：照 headless 的 numberFieldStructure 渲，\n * 与 Web Components 不写部件时元素生成的节点出自同一份。标题由 label 插槽接管。\n */\nfunction renderDefaultStructure(label: string | undefined, labelSlot?: () => VNode[]): VNode[] {\n  const nodes = numberFieldStructure({ label, slotted: name => name === 'label' && labelSlot != null })\n  return renderStructure(nodes, NUMBER_FIELD_PARTS, node => (node.slot ? labelSlot?.() : undefined))\n}\n"],"mappings":"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"}

package/dist/components/number-field/use-number-field.d.ts

@@ -1,7 +1,12 @@
-import { ComputedRef } from "vue";
 import { NumberFieldApi, NumberFieldSchema } from "@xihan-ui/headless";
+import { ComputedRef, Ref } from "vue";
 //#region src/components/number-field/use-number-field.d.ts
 interface NumberFieldContext {
+  /**
+   * 已渲染的 label 部件数量，由 XhNumberFieldLabel 在 setup 里同步登记、卸载时撤销。
+   * 可聚焦部件的 aria-labelledby 据此决定指不指过去：label 排在输入之前时，首帧与服务端直出就带上名字。
+   */
+  labelCount: Ref<number>;
   api: ComputedRef<NumberFieldApi>;
 }
 declare function useNumberField(props: NumberFieldSchema['props'], onValueChange?: NumberFieldSchema['props']['onValueChange']): NumberFieldContext;

package/dist/components/number-field/use-number-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-number-field.d.ts","names":[],"sources":["../../../src/components/number-field/use-number-field.ts"],"mappings":";;;UAciB;EACf,KAAK,YAAY;;iBAGH,eACd,OAAO,4BACP,gBAAgB,8CACf"}
+{"version":3,"file":"use-number-field.d.ts","names":[],"sources":["../../../src/components/number-field/use-number-field.ts"],"mappings":";;;UAciB;;;;;EAKf,YAAY;EACZ,KAAK,YAAY;;iBAGH,eACd,OAAO,4BACP,gBAAgB,8CACf"}

package/dist/components/number-field/use-number-field.js

@@ -1,14 +1,19 @@
 import { vueNormalize } from "../../runtime/normalize-props.js";
 import { useMachine } from "../../runtime/use-machine.js";
-import { computed } from "vue";
 import { connectNumberField, numberFieldMachine } from "@xihan-ui/headless";
+import { computed, ref } from "vue";
 //#region src/components/number-field/use-number-field.ts
 function useNumberField(props, onValueChange) {
+	const labelCount = ref(0);
 	const service = useMachine(numberFieldMachine, () => ({
 		...props,
+		labelled: labelCount.value > 0,
 		onValueChange
 	}));
-	return { api: computed(() => connectNumberField(service, vueNormalize)) };
+	return {
+		labelCount,
+		api: computed(() => connectNumberField(service, vueNormalize))
+	};
 }
 //#endregion
 export { useNumberField };

package/dist/components/number-field/use-number-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-number-field.js","names":[],"sources":["../../../src/components/number-field/use-number-field.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 use number field 相关实现。\n\nimport type { NumberFieldApi, NumberFieldSchema } from '@xihan-ui/headless'\nimport type { ComputedRef } from 'vue'\nimport { connectNumberField, numberFieldMachine } from '@xihan-ui/headless'\nimport { computed } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\n\nexport interface NumberFieldContext {\n  api: ComputedRef<NumberFieldApi>\n}\n\nexport function useNumberField(\n  props: NumberFieldSchema['props'],\n  onValueChange?: NumberFieldSchema['props']['onValueChange'],\n): NumberFieldContext {\n  const service = useMachine(numberFieldMachine, () => ({ ...props, onValueChange }))\n  const api = computed(() => connectNumberField(service, vueNormalize))\n  return { api }\n}\n"],"mappings":";;;;;AAkBA,SAAgB,eACd,OACA,eACoB;CACpB,MAAM,UAAU,WAAW,2BAA2B;EAAE,GAAG;EAAO;CAAc,EAAE;CAElF,OAAO,EAAE,KADG,eAAe,mBAAmB,SAAS,YAAY,CACxD,EAAE;AACf"}
+{"version":3,"file":"use-number-field.js","names":[],"sources":["../../../src/components/number-field/use-number-field.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 use number field 相关实现。\n\nimport type { NumberFieldApi, NumberFieldSchema } from '@xihan-ui/headless'\nimport type { ComputedRef, Ref } from 'vue'\nimport { connectNumberField, numberFieldMachine } from '@xihan-ui/headless'\nimport { computed, ref } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\n\nexport interface NumberFieldContext {\n  /**\n   * 已渲染的 label 部件数量，由 XhNumberFieldLabel 在 setup 里同步登记、卸载时撤销。\n   * 可聚焦部件的 aria-labelledby 据此决定指不指过去：label 排在输入之前时，首帧与服务端直出就带上名字。\n   */\n  labelCount: Ref<number>\n  api: ComputedRef<NumberFieldApi>\n}\n\nexport function useNumberField(\n  props: NumberFieldSchema['props'],\n  onValueChange?: NumberFieldSchema['props']['onValueChange'],\n): NumberFieldContext {\n  const labelCount = ref(0)\n  const service = useMachine(numberFieldMachine, () => ({ ...props, labelled: labelCount.value > 0, onValueChange }))\n  const api = computed(() => connectNumberField(service, vueNormalize))\n  return { labelCount, api }\n}\n"],"mappings":";;;;;AAuBA,SAAgB,eACd,OACA,eACoB;CACpB,MAAM,aAAa,IAAI,CAAC;CACxB,MAAM,UAAU,WAAW,2BAA2B;EAAE,GAAG;EAAO,UAAU,WAAW,QAAQ;EAAG;CAAc,EAAE;CAElH,OAAO;EAAE;EAAY,KADT,eAAe,mBAAmB,SAAS,YAAY,CAC5C;CAAE;AAC3B"}

package/dist/components/page-header/context.d.ts

@@ -1,5 +1,5 @@
-import { ComputedRef } from "vue";
 import { PageHeaderApi } from "@xihan-ui/headless";
+import { ComputedRef } from "vue";
 //#region src/components/page-header/context.d.ts
 interface PageHeaderContext {
   api: ComputedRef<PageHeaderApi>;

package/dist/components/page-header/page-header.js

@@ -1,8 +1,8 @@
 import { vueNormalize } from "../../runtime/normalize-props.js";
 import { withXhConfig } from "../../config/config.js";
 import { providePageHeader, usePageHeaderContext } from "./context.js";
-import { computed, defineComponent, h } from "vue";
 import { connectPageHeader } from "@xihan-ui/headless";
+import { computed, defineComponent, h } from "vue";
 //#region src/components/page-header/page-header.ts
 /** 根节点渲染为 div，默认值由 connect 给出；普通类型省略 default，Boolean 显式保留 undefined */
 const XhPageHeaderRoot = defineComponent({

package/dist/components/pagination/pagination.d.ts

@@ -1,7 +1,7 @@
 import { PayloadOf } from "../../runtime/payload.js";
+import { PaginationApi, PaginationEllipsisSide, PaginationPageSizeChangeDetails, PaginationSchema, PaginationTranslations } from "@xihan-ui/headless";
 import { PropType, SlotsType, VNode } from "vue";
 import { Direction, Placement, Size, Tone } from "@xihan-ui/core";
-import { PaginationApi, PaginationEllipsisSide, PaginationPageSizeChangeDetails, PaginationSchema, PaginationTranslations } from "@xihan-ui/headless";
 //#region src/components/pagination/pagination.d.ts
 type PaginationProps = PaginationSchema['props'];
 /** 默认插槽的载荷：当前页与总量口径、页码序列与条目区间、前后页页码，以及翻页与按当前页切分数据的动作。 */

package/dist/components/pagination/use-pagination.d.ts

@@ -1,5 +1,5 @@
-import { ComputedRef, Ref } from "vue";
 import { PaginationApi, PaginationSchema } from "@xihan-ui/headless";
+import { ComputedRef, Ref } from "vue";
 //#region src/components/pagination/use-pagination.d.ts
 interface PaginationContext {
   api: ComputedRef<PaginationApi>;

package/dist/components/pagination/use-pagination.js

@@ -3,9 +3,9 @@ import { vueNormalize } from "../../runtime/normalize-props.js";
 import { useXhConfig } from "../../config/config.js";
 import { useMachine } from "../../runtime/use-machine.js";
 import { createVueIdGenerator } from "../../runtime/vue-id.js";
+import { connectPagination, paginationMachine, paginationPageSizeSelectProps, selectMachine } from "@xihan-ui/headless";
 import { computed, ref } from "vue";
 import { createRuntimeConfig, createScope } from "@xihan-ui/core";
-import { connectPagination, paginationMachine, paginationPageSizeSelectProps, selectMachine } from "@xihan-ui/headless";
 import { createPositionEngine } from "@xihan-ui/position";
 //#region src/components/pagination/use-pagination.ts
 function usePagination(props, onPageChange, onPageSizeChange) {

package/dist/components/password-input/password-input.d.ts

@@ -1,12 +1,20 @@
 import { PayloadOf } from "../../runtime/payload.js";
+import { PasswordInputApi, PasswordInputSchema, PasswordInputTranslations } from "@xihan-ui/headless";
 import { PropType, SlotsType, VNode } from "vue";
 import { ControlVariant, Size, Tone } from "@xihan-ui/core";
-import { PasswordInputApi, PasswordInputSchema, PasswordInputTranslations } from "@xihan-ui/headless";
 //#region src/components/password-input/password-input.d.ts
 type PasswordInputProps = PasswordInputSchema['props'];
 /** 默认插槽的载荷：当前值与空标志、明暗与大写锁定，以及写值与切换明暗的动作。 */
 type PasswordInputRootSlotProps = Pick<PasswordInputApi, 'value' | 'empty' | 'revealed' | 'capsLock' | 'inputType' | 'setValue' | 'setRevealed' | 'toggleRevealed'>;
 declare const XhPasswordInputRoot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** 标题文字。不写默认插槽时铺 label 部件；需要放置其他内容时改用 label 插槽。 */
+  label: {
+    type: StringConstructor;
+  };
+  /** 不显示出来的名字，写成 aria-label 落在与字段标签同一个部件上；放进字段或渲染了 label 部件时以它们为准。 */
+  ariaLabel: {
+    type: StringConstructor;
+  };
   value: {
     type: StringConstructor;
   };
@@ -69,6 +77,14 @@ declare const XhPasswordInputRoot: import("vue").DefineComponent<import("vue").E
   'revealed-change': (_details: PayloadOf<PasswordInputProps, "onRevealedChange">) => true;
   'update:revealed': (_revealed: PayloadOf<PasswordInputProps, "onRevealedChange">["revealed"]) => true;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** 标题文字。不写默认插槽时铺 label 部件；需要放置其他内容时改用 label 插槽。 */
+  label: {
+    type: StringConstructor;
+  };
+  /** 不显示出来的名字，写成 aria-label 落在与字段标签同一个部件上；放进字段或渲染了 label 部件时以它们为准。 */
+  ariaLabel: {
+    type: StringConstructor;
+  };
   value: {
     type: StringConstructor;
   };
@@ -137,6 +153,8 @@ declare const XhPasswordInputRoot: import("vue").DefineComponent<import("vue").E
   defaultRevealed: boolean;
 }, SlotsType<{
   default?: (props: PasswordInputRootSlotProps) => VNode[];
+  /** 不写默认插槽时标题的内容，代替 label 文字。 */
+  label?: () => VNode[];
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const XhPasswordInputLabel: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;

package/dist/components/password-input/password-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"password-input.d.ts","names":[],"sources":["../../../src/components/password-input/password-input.ts"],"mappings":";;;;;KAkBK,qBAAqB;;KAGd,6BAA6B,KACvC;cAIW,mCAAmB,8BAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgBD,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACT,MAAA,SAAS;;;IACD,MAAA,SAAS,QAAQ;;;;;EAItB,iBAAA,UAAA,UAAU;EACZ,iBAAA,QAAA,UAAU;EACL,oBAAA,UAAA,UAAU;EACT,oBAAA,WAAA,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAVd,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACT,MAAA,SAAS;;;IACD,MAAA,SAAS,QAAQ;;;;;;;;;;;;;;;EAUvC,WAAC,OAAO,+BAA+B;kCA2BnD;cAEW,oCAAoB,0BAAA,oBAAA,4BAAA;;8BAO/B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,sCAAsB,0BAAA,oBAAA,4BAAA;;8BAOjC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,oCAAoB,0BAAA,oBAAA,4BAAA;;8BAW/B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,gDAAgC,0BAAA,oBAAA,4BAAA;;8BAO3C,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,gDAAgC,0BAAA,oBAAA,4BAAA;;8BAO3C,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,4CAA4B,0BAAA,oBAAA,4BAAA;;8BAMvC,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}
+{"version":3,"file":"password-input.d.ts","names":[],"sources":["../../../src/components/password-input/password-input.ts"],"mappings":";;;;;KAoBK,qBAAqB;;KAGd,6BAA6B,KACvC;cAIW,mCAAmB,8BAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAoBD,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACT,MAAA,SAAS;;;IACD,MAAA,SAAS,QAAQ;;;;;EAItB,iBAAA,UAAA,UAAU;EACZ,iBAAA,QAAA,UAAU;EACL,oBAAA,UAAA,UAAU;EACT,oBAAA,WAAA,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAVd,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACT,MAAA,SAAS;;;IACD,MAAA,SAAS,QAAQ;;;;;;;;;;;;;;;EAUvC,WAAC,OAAO,+BAA+B;;EAEzC,cAAM;kCAgChB;cAEW,oCAAoB,0BAAA,oBAAA,4BAAA;;8BAY/B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,sCAAsB,0BAAA,oBAAA,4BAAA;;8BAOjC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,oCAAoB,0BAAA,oBAAA,4BAAA;;8BAe/B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,gDAAgC,0BAAA,oBAAA,4BAAA;;8BAO3C,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,gDAAgC,0BAAA,oBAAA,4BAAA;;8BAO3C,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,4CAA4B,0BAAA,oBAAA,4BAAA;;8BAMvC,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}

package/dist/components/password-input/password-input.js

@@ -1,13 +1,19 @@
+import { renderStructure } from "../../runtime/structure.js";
 import { withXhConfig } from "../../config/config.js";
 import { useFormControlProps } from "../form/use-form-control.js";
 import { useFieldLabelWiring, useFieldStateWiring } from "../field/use-field-control.js";
 import { providePasswordInput, usePasswordInputContext } from "./context.js";
 import { usePasswordInput } from "./use-password-input.js";
-import { defineComponent, h } from "vue";
+import { passwordInputStructure, withFieldDescription } from "@xihan-ui/headless";
+import { defineComponent, h, onUnmounted } from "vue";
 //#region src/components/password-input/password-input.ts
 const XhPasswordInputRoot = defineComponent({
 	name: "XhPasswordInputRoot",
 	props: {
+		/** 标题文字。不写默认插槽时铺 label 部件；需要放置其他内容时改用 label 插槽。 */
+		label: { type: String },
+		/** 不显示出来的名字，写成 aria-label 落在与字段标签同一个部件上；放进字段或渲染了 label 部件时以它们为准。 */
+		ariaLabel: { type: String },
 		value: { type: String },
 		defaultValue: { type: String },
 		revealed: {
@@ -64,22 +70,29 @@ const XhPasswordInputRoot = defineComponent({
 			onRevealedChange
 		});
 		providePasswordInput(ctx);
-		return () => h("div", ctx.api.value.getRootProps(), slots.default?.({
-			value: ctx.api.value.value,
-			empty: ctx.api.value.empty,
-			revealed: ctx.api.value.revealed,
-			capsLock: ctx.api.value.capsLock,
-			inputType: ctx.api.value.inputType,
-			setValue: ctx.api.value.setValue,
-			setRevealed: ctx.api.value.setRevealed,
-			toggleRevealed: ctx.api.value.toggleRevealed
-		}));
+		return () => {
+			const api = ctx.api.value;
+			return h("div", api.getRootProps(), slots.default ? slots.default({
+				value: api.value,
+				empty: api.empty,
+				revealed: api.revealed,
+				capsLock: api.capsLock,
+				inputType: api.inputType,
+				setValue: api.setValue,
+				setRevealed: api.setRevealed,
+				toggleRevealed: api.toggleRevealed
+			}) : renderDefaultStructure(api, props.label, slots.label));
+		};
 	}
 });
 const XhPasswordInputLabel = defineComponent({
 	name: "XhPasswordInputLabel",
 	setup(_, { slots }) {
 		const ctx = usePasswordInputContext();
+		ctx.labelCount.value++;
+		onUnmounted(() => {
+			ctx.labelCount.value--;
+		});
 		return () => h("label", ctx.api.value.getLabelProps(), slots.default?.());
 	}
 });
@@ -96,10 +109,10 @@ const XhPasswordInputInput = defineComponent({
 		const fieldWiring = useFieldStateWiring();
 		const fieldLabel = useFieldLabelWiring();
 		const ctx = usePasswordInputContext();
-		return () => h("input", fieldLabel.value({
+		return () => h("input", fieldLabel.value(withFieldDescription({
 			...fieldWiring.value,
 			...ctx.api.value.getInputProps()
-		}));
+		}, fieldWiring.value["aria-describedby"])));
 	}
 });
 const XhPasswordInputVisibilityTrigger = defineComponent({
@@ -124,6 +137,25 @@ const XhPasswordInputStrengthMeter = defineComponent({
 		return () => h("div", ctx.api.value.getStrengthMeterProps(), slots.default?.());
 	}
 });
+/** 标准结构里各部件对应的组件。 */
+const PASSWORD_INPUT_PARTS = {
+	"label": XhPasswordInputLabel,
+	"control": XhPasswordInputControl,
+	"input": XhPasswordInputInput,
+	"caps-lock-indicator": XhPasswordInputCapsLockIndicator,
+	"visibility-trigger": XhPasswordInputVisibilityTrigger,
+	"strength-meter": XhPasswordInputStrengthMeter
+};
+/**
+* 未写默认插槽时铺开的整套结构：照 headless 的 passwordInputStructure 渲，
+* 与 Web Components 不写部件时元素生成的节点出自同一份。标题由 label 插槽接管。
+*/
+function renderDefaultStructure(api, label, labelSlot) {
+	return renderStructure(passwordInputStructure(api, {
+		label,
+		slotted: (name) => name === "label" && labelSlot != null
+	}), PASSWORD_INPUT_PARTS, (node) => node.slot ? labelSlot?.() : void 0);
+}
 //#endregion
 export { XhPasswordInputCapsLockIndicator, XhPasswordInputControl, XhPasswordInputInput, XhPasswordInputLabel, XhPasswordInputRoot, XhPasswordInputStrengthMeter, XhPasswordInputVisibilityTrigger };
 

package/dist/components/password-input/password-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"password-input.js","names":[],"sources":["../../../src/components/password-input/password-input.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 password input 相关实现。\n\nimport type { ControlVariant, Size, Tone } from '@xihan-ui/core'\nimport type { PasswordInputApi, PasswordInputSchema, PasswordInputTranslations } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { defineComponent, h } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { useFieldLabelWiring, useFieldStateWiring } from '../field/use-field-control'\nimport { useFormControlProps } from '../form/use-form-control'\nimport { providePasswordInput, usePasswordInputContext } from './context'\nimport { usePasswordInput } from './use-password-input'\n\ntype PasswordInputProps = PasswordInputSchema['props']\n\n/** 默认插槽的载荷：当前值与空标志、明暗与大写锁定，以及写值与切换明暗的动作。 */\nexport type PasswordInputRootSlotProps = Pick<\n  PasswordInputApi,\n  'value' | 'empty' | 'revealed' | 'capsLock' | 'inputType' | 'setValue' | 'setRevealed' | 'toggleRevealed'\n>\n\nexport const XhPasswordInputRoot = defineComponent({\n  name: 'XhPasswordInputRoot',\n  props: {\n    // 缺席值 undefined 表示非受控\n    value: { type: String },\n    defaultValue: { type: String },\n    revealed: { type: Boolean, default: undefined },\n    defaultRevealed: { type: Boolean, default: undefined },\n    disabled: { type: Boolean, default: undefined },\n    readOnly: { type: Boolean, default: undefined },\n    required: { type: Boolean, default: undefined },\n    invalid: { type: Boolean, default: undefined },\n    name: { type: String },\n    placeholder: { type: String },\n    autoComplete: { type: String },\n    strength: { type: Number },\n    variant: { type: String as PropType<ControlVariant> },\n    tone: { type: String as PropType<Tone> },\n    size: { type: String as PropType<Size> },\n    translations: { type: Object as PropType<Partial<PasswordInputTranslations>> },\n  },\n  // value-change 携带 { value }，update:value 携带裸串；明暗走 visibility-change 一路\n  emits: {\n    'value-change': (_details: PayloadOf<PasswordInputProps, 'onValueChange'>) => true,\n    'update:value': (_value: PayloadOf<PasswordInputProps, 'onValueChange'>['value']) => true,\n    'revealed-change': (_details: PayloadOf<PasswordInputProps, 'onRevealedChange'>) => true,\n    'update:revealed': (_revealed: PayloadOf<PasswordInputProps, 'onRevealedChange'>['revealed']) => true,\n  },\n  slots: Object as SlotsType<{\n    default?: (props: PasswordInputRootSlotProps) => VNode[]\n  }>,\n  setup(props, { slots, emit }) {\n    const onValueChange: PasswordInputProps['onValueChange'] = (details) => {\n      emit('value-change', details)\n      emit('update:value', details.value)\n    }\n    const onRevealedChange: PasswordInputProps['onRevealedChange'] = (details) => {\n      emit('revealed-change', details)\n      emit('update:revealed', details.revealed)\n    }\n    const ctx = usePasswordInput(\n      withXhConfig('password-input', useFormControlProps(props)) as PasswordInputProps,\n      { onValueChange, onRevealedChange },\n    )\n    providePasswordInput(ctx)\n    return () => h('div', ctx.api.value.getRootProps() as Record<string, unknown>, slots.default?.({\n      value: ctx.api.value.value,\n      empty: ctx.api.value.empty,\n      revealed: ctx.api.value.revealed,\n      capsLock: ctx.api.value.capsLock,\n      inputType: ctx.api.value.inputType,\n      setValue: ctx.api.value.setValue,\n      setRevealed: ctx.api.value.setRevealed,\n      toggleRevealed: ctx.api.value.toggleRevealed,\n    }))\n  },\n})\n\nexport const XhPasswordInputLabel = defineComponent({\n  name: 'XhPasswordInputLabel',\n  setup(_, { slots }) {\n    const ctx = usePasswordInputContext()\n    // 必须是原生 <label>，connect 把 for 写向 input\n    return () => h('label', ctx.api.value.getLabelProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhPasswordInputControl = defineComponent({\n  name: 'XhPasswordInputControl',\n  setup(_, { slots }) {\n    const ctx = usePasswordInputContext()\n    // 视觉盒：输入框、切换钮与大写锁定提示都排在它里面\n    return () => h('div', ctx.api.value.getControlProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhPasswordInputInput = defineComponent({\n  name: 'XhPasswordInputInput',\n  setup() {\n    // 字段的说明与校验状态要落在真控件上，不能停在封装根的 div 上\n    const fieldWiring = useFieldStateWiring()\n    // 字段的标签也得并进名字链：控件自带的那条指的是它自己那个没渲染的 label 部件\n    const fieldLabel = useFieldLabelWiring()\n    const ctx = usePasswordInputContext()\n    // 原生 <input>：光标、选区与撤销都归浏览器，label 的 for 也指着它\n    return () => h('input', fieldLabel.value({ ...fieldWiring.value, ...ctx.api.value.getInputProps() as Record<string, unknown> }))\n  },\n})\n\nexport const XhPasswordInputVisibilityTrigger = defineComponent({\n  name: 'XhPasswordInputVisibilityTrigger',\n  setup(_, { slots }) {\n    const ctx = usePasswordInputContext()\n    // 原生 <button>，Enter / Space 的激活交给平台\n    return () => h('button', ctx.api.value.getVisibilityTriggerProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhPasswordInputCapsLockIndicator = defineComponent({\n  name: 'XhPasswordInputCapsLockIndicator',\n  setup() {\n    const ctx = usePasswordInputContext()\n    // 区内文字由组件写：活区域播报的是内容，不是名字。关着时是空串，节点仍在场\n    return () => h('span', ctx.api.value.getCapsLockIndicatorProps() as Record<string, unknown>, ctx.api.value.capsLockMessage)\n  },\n})\n\n/** 强度条：档位由调用方评分后经 strength 传入，未提供时收起。 */\nexport const XhPasswordInputStrengthMeter = defineComponent({\n  name: 'XhPasswordInputStrengthMeter',\n  setup(_, { slots }) {\n    const ctx = usePasswordInputContext()\n    return () => h('div', ctx.api.value.getStrengthMeterProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n"],"mappings":"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"}
+{"version":3,"file":"password-input.js","names":[],"sources":["../../../src/components/password-input/password-input.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 password input 相关实现。\n\nimport type { ControlVariant, Size, Tone } from '@xihan-ui/core'\nimport type { PasswordInputApi, PasswordInputSchema, PasswordInputTranslations } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { passwordInputStructure, withFieldDescription } from '@xihan-ui/headless'\nimport { defineComponent, h, onUnmounted } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { renderStructure } from '../../runtime/structure'\nimport { useFieldLabelWiring, useFieldStateWiring } from '../field/use-field-control'\nimport { useFormControlProps } from '../form/use-form-control'\nimport { providePasswordInput, usePasswordInputContext } from './context'\nimport { usePasswordInput } from './use-password-input'\n\ntype PasswordInputProps = PasswordInputSchema['props']\n\n/** 默认插槽的载荷：当前值与空标志、明暗与大写锁定，以及写值与切换明暗的动作。 */\nexport type PasswordInputRootSlotProps = Pick<\n  PasswordInputApi,\n  'value' | 'empty' | 'revealed' | 'capsLock' | 'inputType' | 'setValue' | 'setRevealed' | 'toggleRevealed'\n>\n\nexport const XhPasswordInputRoot = defineComponent({\n  name: 'XhPasswordInputRoot',\n  props: {\n    /** 标题文字。不写默认插槽时铺 label 部件；需要放置其他内容时改用 label 插槽。 */\n    label: { type: String },\n    /** 不显示出来的名字，写成 aria-label 落在与字段标签同一个部件上；放进字段或渲染了 label 部件时以它们为准。 */\n    ariaLabel: { type: String },\n    // 缺席值 undefined 表示非受控\n    value: { type: String },\n    defaultValue: { type: String },\n    revealed: { type: Boolean, default: undefined },\n    defaultRevealed: { type: Boolean, default: undefined },\n    disabled: { type: Boolean, default: undefined },\n    readOnly: { type: Boolean, default: undefined },\n    required: { type: Boolean, default: undefined },\n    invalid: { type: Boolean, default: undefined },\n    name: { type: String },\n    placeholder: { type: String },\n    autoComplete: { type: String },\n    strength: { type: Number },\n    variant: { type: String as PropType<ControlVariant> },\n    tone: { type: String as PropType<Tone> },\n    size: { type: String as PropType<Size> },\n    translations: { type: Object as PropType<Partial<PasswordInputTranslations>> },\n  },\n  // value-change 携带 { value }，update:value 携带裸串；明暗走 visibility-change 一路\n  emits: {\n    'value-change': (_details: PayloadOf<PasswordInputProps, 'onValueChange'>) => true,\n    'update:value': (_value: PayloadOf<PasswordInputProps, 'onValueChange'>['value']) => true,\n    'revealed-change': (_details: PayloadOf<PasswordInputProps, 'onRevealedChange'>) => true,\n    'update:revealed': (_revealed: PayloadOf<PasswordInputProps, 'onRevealedChange'>['revealed']) => true,\n  },\n  slots: Object as SlotsType<{\n    default?: (props: PasswordInputRootSlotProps) => VNode[]\n    /** 不写默认插槽时标题的内容，代替 label 文字。 */\n    label?: () => VNode[]\n  }>,\n  setup(props, { slots, emit }) {\n    const onValueChange: PasswordInputProps['onValueChange'] = (details) => {\n      emit('value-change', details)\n      emit('update:value', details.value)\n    }\n    const onRevealedChange: PasswordInputProps['onRevealedChange'] = (details) => {\n      emit('revealed-change', details)\n      emit('update:revealed', details.revealed)\n    }\n    const ctx = usePasswordInput(\n      withXhConfig('password-input', useFormControlProps(props)) as PasswordInputProps,\n      { onValueChange, onRevealedChange },\n    )\n    providePasswordInput(ctx)\n    return () => {\n      const api = ctx.api.value\n      return h('div', api.getRootProps() as Record<string, unknown>, slots.default\n        ? slots.default({\n            value: api.value,\n            empty: api.empty,\n            revealed: api.revealed,\n            capsLock: api.capsLock,\n            inputType: api.inputType,\n            setValue: api.setValue,\n            setRevealed: api.setRevealed,\n            toggleRevealed: api.toggleRevealed,\n          })\n        : renderDefaultStructure(api, props.label, slots.label))\n    }\n  },\n})\n\nexport const XhPasswordInputLabel = defineComponent({\n  name: 'XhPasswordInputLabel',\n  setup(_, { slots }) {\n    const ctx = usePasswordInputContext()\n    // 渲出来就登记，在 setup 里同步做：排在输入之前时首帧与服务端直出就带上名字\n    ctx.labelCount.value++\n    onUnmounted(() => {\n      ctx.labelCount.value--\n    })\n    // 必须是原生 <label>，connect 把 for 写向 input\n    return () => h('label', ctx.api.value.getLabelProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhPasswordInputControl = defineComponent({\n  name: 'XhPasswordInputControl',\n  setup(_, { slots }) {\n    const ctx = usePasswordInputContext()\n    // 视觉盒：输入框、切换钮与大写锁定提示都排在它里面\n    return () => h('div', ctx.api.value.getControlProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhPasswordInputInput = defineComponent({\n  name: 'XhPasswordInputInput',\n  setup() {\n    // 字段的说明与校验状态要落在真控件上，不能停在封装根的 div 上\n    const fieldWiring = useFieldStateWiring()\n    // 字段的标签也得并进名字链：控件自带的那条指的是它自己那个没渲染的 label 部件\n    const fieldLabel = useFieldLabelWiring()\n    const ctx = usePasswordInputContext()\n    // 原生 <input>：光标、选区与撤销都归浏览器，label 的 for 也指着它\n    // 输入框自己的描述链（大写锁定提示）与字段的拼起来，不互相顶掉\n    return () => h('input', fieldLabel.value(withFieldDescription(\n      { ...fieldWiring.value, ...ctx.api.value.getInputProps() as Record<string, unknown> },\n      fieldWiring.value['aria-describedby'] as string | undefined,\n    )))\n  },\n})\n\nexport const XhPasswordInputVisibilityTrigger = defineComponent({\n  name: 'XhPasswordInputVisibilityTrigger',\n  setup(_, { slots }) {\n    const ctx = usePasswordInputContext()\n    // 原生 <button>，Enter / Space 的激活交给平台\n    return () => h('button', ctx.api.value.getVisibilityTriggerProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhPasswordInputCapsLockIndicator = defineComponent({\n  name: 'XhPasswordInputCapsLockIndicator',\n  setup() {\n    const ctx = usePasswordInputContext()\n    // 区内文字由组件写：活区域播报的是内容，不是名字。关着时是空串，节点仍在场\n    return () => h('span', ctx.api.value.getCapsLockIndicatorProps() as Record<string, unknown>, ctx.api.value.capsLockMessage)\n  },\n})\n\n/** 强度条：档位由调用方评分后经 strength 传入，未提供时收起。 */\nexport const XhPasswordInputStrengthMeter = defineComponent({\n  name: 'XhPasswordInputStrengthMeter',\n  setup(_, { slots }) {\n    const ctx = usePasswordInputContext()\n    return () => h('div', ctx.api.value.getStrengthMeterProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\n/** 标准结构里各部件对应的组件。 */\nconst PASSWORD_INPUT_PARTS = {\n  'label': XhPasswordInputLabel,\n  'control': XhPasswordInputControl,\n  'input': XhPasswordInputInput,\n  'caps-lock-indicator': XhPasswordInputCapsLockIndicator,\n  'visibility-trigger': XhPasswordInputVisibilityTrigger,\n  'strength-meter': XhPasswordInputStrengthMeter,\n}\n\n/**\n * 未写默认插槽时铺开的整套结构：照 headless 的 passwordInputStructure 渲，\n * 与 Web Components 不写部件时元素生成的节点出自同一份。标题由 label 插槽接管。\n */\nfunction renderDefaultStructure(api: PasswordInputApi, label: string | undefined, labelSlot?: () => VNode[]): VNode[] {\n  const nodes = passwordInputStructure(api, { label, slotted: name => name === 'label' && labelSlot != null })\n  return renderStructure(nodes, PASSWORD_INPUT_PARTS, node => (node.slot ? labelSlot?.() : undefined))\n}\n"],"mappings":"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"}

package/dist/components/password-input/use-password-input.d.ts

@@ -1,7 +1,12 @@
-import { ComputedRef } from "vue";
 import { PasswordInputApi, PasswordInputSchema } from "@xihan-ui/headless";
+import { ComputedRef, Ref } from "vue";
 //#region src/components/password-input/use-password-input.d.ts
 interface PasswordInputContext {
+  /**
+   * 已渲染的 label 部件数量，由 XhPasswordInputLabel 在 setup 里同步登记、卸载时撤销。
+   * 可聚焦部件的 aria-labelledby 据此决定指不指过去：label 排在输入之前时，首帧与服务端直出就带上名字。
+   */
+  labelCount: Ref<number>;
   api: ComputedRef<PasswordInputApi>;
 }
 declare function usePasswordInput(props: PasswordInputSchema['props'], handlers?: Pick<PasswordInputSchema['props'], 'onValueChange' | 'onRevealedChange'>): PasswordInputContext;

package/dist/components/password-input/use-password-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-password-input.d.ts","names":[],"sources":["../../../src/components/password-input/use-password-input.ts"],"mappings":";;;UAgBiB;EACf,KAAK,YAAY;;iBAGH,iBACd,OAAO,8BACP,WAAU,KAAK,sEACd"}
+{"version":3,"file":"use-password-input.d.ts","names":[],"sources":["../../../src/components/password-input/use-password-input.ts"],"mappings":";;;UAgBiB;;;;;EAKf,YAAY;EACZ,KAAK,YAAY;;iBAGH,iBACd,OAAO,8BACP,WAAU,KAAK,sEACd"}

package/dist/components/password-input/use-password-input.js

@@ -1,16 +1,22 @@
 import { vueNormalize } from "../../runtime/normalize-props.js";
 import { useMachine } from "../../runtime/use-machine.js";
 import { createVueIdGenerator } from "../../runtime/vue-id.js";
-import { computed } from "vue";
-import { createScope } from "@xihan-ui/core";
 import { connectPasswordInput, passwordInputMachine } from "@xihan-ui/headless";
+import { computed, ref } from "vue";
+import { createScope } from "@xihan-ui/core";
 //#region src/components/password-input/use-password-input.ts
 function usePasswordInput(props, handlers = {}) {
+	const scope = createScope(null, createVueIdGenerator());
+	const labelCount = ref(0);
 	const service = useMachine(passwordInputMachine, () => ({
 		...props,
+		labelled: labelCount.value > 0,
 		...handlers
-	}), createScope(null, createVueIdGenerator()));
-	return { api: computed(() => connectPasswordInput(service, vueNormalize)) };
+	}), scope);
+	return {
+		labelCount,
+		api: computed(() => connectPasswordInput(service, vueNormalize))
+	};
 }
 //#endregion
 export { usePasswordInput };

package/dist/components/password-input/use-password-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-password-input.js","names":[],"sources":["../../../src/components/password-input/use-password-input.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 use password input 相关实现。\n\nimport type { PasswordInputApi, PasswordInputSchema } from '@xihan-ui/headless'\nimport type { ComputedRef } from 'vue'\nimport { createScope } from '@xihan-ui/core'\nimport { connectPasswordInput, passwordInputMachine } from '@xihan-ui/headless'\nimport { computed } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\nimport { createVueIdGenerator } from '../../runtime/vue-id'\n\nexport interface PasswordInputContext {\n  api: ComputedRef<PasswordInputApi>\n}\n\nexport function usePasswordInput(\n  props: PasswordInputSchema['props'],\n  handlers: Pick<PasswordInputSchema['props'], 'onValueChange' | 'onRevealedChange'> = {},\n): PasswordInputContext {\n  // scope id 走 Vue 的 useId，保证同页多实例的 IDREF 不相撞\n  const idGen = createVueIdGenerator()\n  const scope = createScope(null, idGen)\n  const service = useMachine(passwordInputMachine, () => ({ ...props, ...handlers }), scope)\n  const api = computed(() => connectPasswordInput(service, vueNormalize))\n  return { api }\n}\n"],"mappings":";;;;;;;AAoBA,SAAgB,iBACd,OACA,WAAqF,CAAC,GAChE;CAItB,MAAM,UAAU,WAAW,6BAA6B;EAAE,GAAG;EAAO,GAAG;CAAS,IADlE,YAAY,MADZ,qBACsB,CACoD,CAAC;CAEzF,OAAO,EAAE,KADG,eAAe,qBAAqB,SAAS,YAAY,CAC1D,EAAE;AACf"}
+{"version":3,"file":"use-password-input.js","names":[],"sources":["../../../src/components/password-input/use-password-input.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 use password input 相关实现。\n\nimport type { PasswordInputApi, PasswordInputSchema } from '@xihan-ui/headless'\nimport type { ComputedRef, Ref } from 'vue'\nimport { createScope } from '@xihan-ui/core'\nimport { connectPasswordInput, passwordInputMachine } from '@xihan-ui/headless'\nimport { computed, ref } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\nimport { createVueIdGenerator } from '../../runtime/vue-id'\n\nexport interface PasswordInputContext {\n  /**\n   * 已渲染的 label 部件数量，由 XhPasswordInputLabel 在 setup 里同步登记、卸载时撤销。\n   * 可聚焦部件的 aria-labelledby 据此决定指不指过去：label 排在输入之前时，首帧与服务端直出就带上名字。\n   */\n  labelCount: Ref<number>\n  api: ComputedRef<PasswordInputApi>\n}\n\nexport function usePasswordInput(\n  props: PasswordInputSchema['props'],\n  handlers: Pick<PasswordInputSchema['props'], 'onValueChange' | 'onRevealedChange'> = {},\n): PasswordInputContext {\n  // scope id 走 Vue 的 useId，保证同页多实例的 IDREF 不相撞\n  const idGen = createVueIdGenerator()\n  const scope = createScope(null, idGen)\n  const labelCount = ref(0)\n  const service = useMachine(passwordInputMachine, () => ({ ...props, labelled: labelCount.value > 0, ...handlers }), scope)\n  const api = computed(() => connectPasswordInput(service, vueNormalize))\n  return { labelCount, api }\n}\n"],"mappings":";;;;;;;AAyBA,SAAgB,iBACd,OACA,WAAqF,CAAC,GAChE;CAGtB,MAAM,QAAQ,YAAY,MADZ,qBACsB,CAAC;CACrC,MAAM,aAAa,IAAI,CAAC;CACxB,MAAM,UAAU,WAAW,6BAA6B;EAAE,GAAG;EAAO,UAAU,WAAW,QAAQ;EAAG,GAAG;CAAS,IAAI,KAAK;CAEzH,OAAO;EAAE;EAAY,KADT,eAAe,qBAAqB,SAAS,YAAY,CAC9C;CAAE;AAC3B"}

package/dist/components/pie-chart/pie-chart.d.ts

@@ -1,6 +1,6 @@
 import { PayloadOf } from "../../runtime/payload.js";
-import { PropType, SlotsType, VNode } from "vue";
 import { ChartDatumDetails, ChartKey, ChartRow, NumberFormatSpec, PieChartApi, PieChartSchema, PieChartTranslations, PieLabelContent, PieLabelDetails, PieLabels, PieSort, PieSweep, PieTooltipModel, PieVariant } from "@xihan-ui/headless";
+import { PropType, SlotsType, VNode } from "vue";
 //#region src/components/pie-chart/pie-chart.d.ts
 type PieChartProps = PieChartSchema['props'];
 /** 默认插槽的载荷：自行摆放部件时用得上的状态与动作。 */
@@ -176,15 +176,15 @@ declare const XhPieChartRoot: import("vue").DefineComponent<import("vue").Extrac
     type: PropType<Partial<PieChartTranslations>>;
   };
 }>> & Readonly<{
-  "onHidden-series-change"?: ((_details: import("@xihan-ui/headless").ChartHiddenSeriesChangeDetails) => any) | undefined;
-  "onUpdate:hiddenSeries"?: ((_hidden: string[]) => any) | undefined;
-  "onActive-key-change"?: ((_details: import("@xihan-ui/headless").ChartActiveKeyChangeDetails) => any) | undefined;
-  "onUpdate:activeKey"?: ((_key: ChartKey | null) => any) | undefined;
   "onDatum-active"?: ((_details: ChartDatumDetails | null) => any) | undefined;
   "onDatum-press"?: ((_details: ChartDatumDetails) => any) | undefined;
+  "onActive-key-change"?: ((_details: import("@xihan-ui/headless").ChartActiveKeyChangeDetails) => any) | undefined;
+  "onUpdate:activeKey"?: ((_key: ChartKey | null) => any) | undefined;
+  "onHidden-series-change"?: ((_details: import("@xihan-ui/headless").ChartHiddenSeriesChangeDetails) => any) | undefined;
+  "onUpdate:hiddenSeries"?: ((_hidden: string[]) => any) | undefined;
 }>, {
-  pending: boolean;
   animated: boolean;
+  pending: boolean;
   rose: boolean;
 }, SlotsType<{
   /** 自行摆放部件；不写时铺开缺省结构：图例、视口（绘图区、环形中心与空态）、提示框。 */

package/dist/components/pie-chart/use-pie-chart.d.ts

@@ -1,6 +1,6 @@
+import { PieChartApi, PieChartSchema } from "@xihan-ui/headless";
 import { ComputedRef, Ref } from "vue";
 import { Service } from "@xihan-ui/core";
-import { PieChartApi, PieChartSchema } from "@xihan-ui/headless";
 //#region src/components/pie-chart/use-pie-chart.d.ts
 /** 对外的回调：由外壳（emit）或组合式调用方提供，随 props 一并喂给机器。 */
 type PieChartNotifiers = Pick<PieChartSchema['props'], 'onHiddenSeriesChange' | 'onActiveKeyChange' | 'onDatumActive' | 'onDatumPress'>;

package/dist/components/pie-chart/use-pie-chart.js

@@ -1,7 +1,7 @@
 import { vueNormalize } from "../../runtime/normalize-props.js";
 import { useMachine } from "../../runtime/use-machine.js";
-import { computed, ref } from "vue";
 import { connectPieChart, pieChartMachine } from "@xihan-ui/headless";
+import { computed, ref } from "vue";
 //#region src/components/pie-chart/use-pie-chart.ts
 /** 量测、度量与文字度量器都在状态机的效应里做，DOM 取值口经 refs 交入。 */
 function usePieChart(props, notify) {

package/dist/components/pin-input/pin-input.d.ts

@@ -1,12 +1,20 @@
 import { PayloadOf } from "../../runtime/payload.js";
+import { PinInputApi, PinInputSchema, PinInputTranslations, PinInputType } from "@xihan-ui/headless";
 import { PropType, SlotsType, VNode } from "vue";
 import { ControlVariant, Size, Tone } from "@xihan-ui/core";
-import { PinInputApi, PinInputSchema, PinInputTranslations, PinInputType } from "@xihan-ui/headless";
 //#region src/components/pin-input/pin-input.d.ts
 type PinInputProps = PinInputSchema['props'];
 /** 默认插槽的载荷：逐格的值与拼接后的串、是否填满、格数与焦点所在格，以及修改值、清空的命令。 */
 type PinInputRootSlotProps = Pick<PinInputApi, 'value' | 'valueAsString' | 'complete' | 'length' | 'focusedIndex' | 'setValue' | 'clear'>;
 declare const XhPinInputRoot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** 不显示出来的名字，写成 aria-label 落在与字段标签同一个部件上；放进字段或渲染了 label 部件时以它们为准。 */
+  ariaLabel: {
+    type: StringConstructor;
+  };
+  /** 标题文字。不写默认插槽时铺 label 部件；需要放置其他内容时改用 label 插槽。 */
+  label: {
+    type: StringConstructor;
+  };
   value: {
     type: PropType<string[]>;
   };
@@ -66,6 +74,14 @@ declare const XhPinInputRoot: import("vue").DefineComponent<import("vue").Extrac
   'value-complete': (_details: PayloadOf<PinInputProps, "onValueComplete">) => true;
   'update:value': (_value: PayloadOf<PinInputProps, "onValueChange">["value"]) => true;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** 不显示出来的名字，写成 aria-label 落在与字段标签同一个部件上；放进字段或渲染了 label 部件时以它们为准。 */
+  ariaLabel: {
+    type: StringConstructor;
+  };
+  /** 标题文字。不写默认插槽时铺 label 部件；需要放置其他内容时改用 label 插槽。 */
+  label: {
+    type: StringConstructor;
+  };
   value: {
     type: PropType<string[]>;
   };
@@ -132,6 +148,8 @@ declare const XhPinInputRoot: import("vue").DefineComponent<import("vue").Extrac
   blurOnComplete: boolean;
 }, SlotsType<{
   default?: (props: PinInputRootSlotProps) => VNode[];
+  /** 不写默认插槽时标题的内容，代替 label 文字。 */
+  label?: () => VNode[];
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const XhPinInputLabel: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;