@vizejs/ui 0.387.0 → 0.388.0

package/dist/toolbar-CIU1bor0.d.mts

@@ -0,0 +1,259 @@
+import { n as PrimitiveElement, t as PrimitiveAs } from "./primitive-BE2mdUcw.mjs";
+import { CSSProperties, ComputedRef, ShallowRef } from "vue";
+
+//#region src/families/actions/toolbar/toolbar-types.d.ts
+/** Directional layout hint used by Toolbar arrow-key roving focus. */
+type ToolbarOrientation = "horizontal" | "vertical";
+/** Reading direction used to map horizontal Toolbar arrow keys. */
+type ToolbarDirection = "ltr" | "rtl";
+/** Stable root state exposed for consumer-owned styling and tests. */
+type ToolbarState = "disabled" | "idle";
+/** Stable item state exposed for consumer-owned styling and tests. */
+type ToolbarItemState = "disabled" | "idle";
+/** Stable part names emitted by the Toolbar family. */
+type ToolbarPart = "item" | "root";
+/** Stable `data-vize-ui` values emitted by the Toolbar family. */
+type ToolbarDataName = "toolbar" | "toolbar-item";
+/** Stable data attributes emitted by one or more Toolbar components. */
+type ToolbarDataAttribute = "data-disabled" | "data-orientation" | "data-roving-focus" | "data-state" | "data-value" | "data-vize-ui";
+/** CSS custom properties authored inline by the Toolbar root. */
+type ToolbarCssCustomProperty = "--vize-ui-toolbar-orientation";
+/** Inline style contract applied to the Toolbar root. */
+interface ToolbarStyle extends Readonly<CSSProperties> {
+  /** Consumer-overridable orientation token for layout recipes. */
+  readonly "--vize-ui-toolbar-orientation": ToolbarOrientation;
+}
+/** Public props accepted by the root Toolbar component. */
+interface ToolbarProps {
+  /**
+   * Native element, custom element, or component to render.
+   *
+   * @default "div"
+   */
+  readonly as?: PrimitiveAs;
+  /**
+   * Disable every item and remove the toolbar from roving focus.
+   *
+   * @default false
+   */
+  readonly disabled?: boolean;
+  /**
+   * Directional layout hint used by arrow-key roving focus.
+   *
+   * @default "horizontal"
+   */
+  readonly orientation?: ToolbarOrientation;
+  /**
+   * Reading direction used to map horizontal arrow-key navigation.
+   *
+   * @default "ltr"
+   */
+  readonly dir?: ToolbarDirection;
+  /**
+   * Whether arrow-key navigation wraps at the first and last enabled item.
+   *
+   * @default true
+   */
+  readonly loop?: boolean;
+  /**
+   * Whether items participate in a single-tabstop roving focus model.
+   *
+   * @default true
+   */
+  readonly rovingFocus?: boolean;
+  /**
+   * Accessible name when no visible label or `aria-labelledby` supplies one.
+   *
+   * @default undefined
+   */
+  readonly ariaLabel?: string;
+  /**
+   * Space-separated ids that label the toolbar.
+   *
+   * @default undefined
+   */
+  readonly ariaLabelledby?: string;
+  /**
+   * Space-separated ids that describe the toolbar.
+   *
+   * @default undefined
+   */
+  readonly ariaDescribedby?: string;
+}
+/** Props accepted by ToolbarItem. */
+interface ToolbarItemProps {
+  /**
+   * Native element, custom element, or component to render.
+   *
+   * @default "button"
+   */
+  readonly as?: PrimitiveAs;
+  /**
+   * Whether the rendered target already implements native button semantics.
+   *
+   * @default auto
+   */
+  readonly native?: boolean;
+  /**
+   * Native button submission behavior.
+   *
+   * @default "button"
+   */
+  readonly type?: "button" | "reset" | "submit";
+  /**
+   * Stable item value emitted by item and toolbar press events.
+   *
+   * @default required
+   */
+  readonly value: string;
+  /**
+   * Disable this item while preserving the rest of the toolbar.
+   *
+   * @default false
+   */
+  readonly disabled?: boolean;
+  /**
+   * Accessible name when no visible label or `aria-labelledby` supplies one.
+   *
+   * @default undefined
+   */
+  readonly ariaLabel?: string;
+  /**
+   * Space-separated ids that label this item.
+   *
+   * @default undefined
+   */
+  readonly ariaLabelledby?: string;
+  /**
+   * Space-separated ids that describe this item.
+   *
+   * @default undefined
+   */
+  readonly ariaDescribedby?: string;
+}
+/** Events emitted by the root Toolbar component. */
+interface ToolbarEmits {
+  /** Fired after an enabled item is activated by pointer or keyboard. */
+  press: [value: string, nativeEvent: MouseEvent];
+}
+/** Events emitted by ToolbarItem. */
+interface ToolbarItemEmits {
+  /** Fired after user activation reaches this enabled item. */
+  press: [value: string, nativeEvent: MouseEvent];
+}
+/** State exposed to the Toolbar default slot. */
+interface ToolbarSlotState {
+  /** Whether the toolbar suppresses every item activation. */
+  readonly disabled: boolean;
+  /** Directional layout hint used by arrow-key roving focus. */
+  readonly orientation: ToolbarOrientation;
+  /** Reading direction used by horizontal arrow-key roving focus. */
+  readonly dir: ToolbarDirection;
+  /** Whether items participate in a single-tabstop roving focus model. */
+  readonly rovingFocus: boolean;
+  /** Stable state token for styling and tests. */
+  readonly state: ToolbarState;
+  /** Inline native style object applied to the host. */
+  readonly style: ToolbarStyle;
+}
+/** State exposed to a ToolbarItem slot. */
+interface ToolbarItemSlotState {
+  /** Item value used by the toolbar navigation and press contract. */
+  readonly value: string;
+  /** Whether this item or its toolbar suppresses activation. */
+  readonly disabled: boolean;
+  /** Directional layout hint inherited from the toolbar. */
+  readonly orientation: ToolbarOrientation;
+  /** Reading direction inherited from the toolbar. */
+  readonly dir: ToolbarDirection;
+  /** Stable state token for styling and tests. */
+  readonly state: ToolbarItemState;
+}
+//#endregion
+//#region src/families/actions/toolbar/toolbar.vue.d.ts
+type __VLS_Slots$1 = {
+  /** Renders grouped action controls with toolbar navigation state. */default(props: ToolbarSlotState): unknown;
+};
+declare function focus$1(options?: FocusOptions): void;
+declare function focusValue(value: string, options?: FocusOptions): boolean;
+declare const __VLS_base$1: import("vue").DefineComponent<ToolbarProps, {
+  activeValue: ShallowRef<string | null, string | null>;
+  dir: ComputedRef<ToolbarDirection>;
+  disabled: ComputedRef<boolean>;
+  element: Readonly<ShallowRef<PrimitiveElement | null>>;
+  focus: typeof focus$1;
+  focusValue: typeof focusValue;
+  orientation: ComputedRef<ToolbarOrientation>;
+  rovingFocus: ComputedRef<boolean>;
+  state: ComputedRef<ToolbarState>;
+  style: ComputedRef<ToolbarStyle>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  press: (value: string, nativeEvent: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<ToolbarProps> & Readonly<{
+  onPress?: (value: string, nativeEvent: MouseEvent) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export$1: __VLS_WithSlots$1<typeof __VLS_base$1, __VLS_Slots$1>;
+declare const _default$1: typeof __VLS_export$1;
+type __VLS_WithSlots$1<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/families/actions/toolbar/toolbar-item.vue.d.ts
+type __VLS_Slots = {
+  /** Renders item contents with current availability and navigation state. */default(props: ToolbarItemSlotState): unknown;
+};
+declare function focus(options?: FocusOptions): void;
+declare const __VLS_base: import("vue").DefineComponent<ToolbarItemProps, {
+  dir: ComputedRef<ToolbarDirection>;
+  disabled: ComputedRef<boolean>;
+  element: Readonly<import("vue").ShallowRef<PrimitiveElement | null>>;
+  focus: typeof focus;
+  orientation: ComputedRef<ToolbarOrientation>;
+  state: ComputedRef<ToolbarItemState>;
+  value: string;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  press: (value: string, nativeEvent: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<ToolbarItemProps> & Readonly<{
+  onPress?: (value: string, nativeEvent: MouseEvent) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/families/actions/toolbar/toolbar-contracts.d.ts
+/** Slots exposed by the root Toolbar component. */
+interface ToolbarSlots {
+  /** Renders grouped action controls with toolbar navigation state. */
+  default(props: ToolbarSlotState): unknown;
+}
+/** Slots exposed by ToolbarItem. */
+interface ToolbarItemSlots {
+  /** Renders item contents with current availability and navigation state. */
+  default(props: ToolbarItemSlotState): unknown;
+}
+/** Public component instance state exposed by the root Toolbar component. */
+interface ToolbarExpose extends ToolbarSlotState {
+  /** Currently active item value, or `null` before an item is focusable. */
+  readonly activeValue: string | null;
+  /** Rendered root element or component instance. */
+  readonly element: PrimitiveElement | null;
+  /** Move focus to the active or first enabled item. */
+  readonly focus: (options?: FocusOptions) => void;
+  /** Move focus to an enabled item by value and report whether it was found. */
+  readonly focusValue: (value: string, options?: FocusOptions) => boolean;
+}
+/** Public component instance state exposed by ToolbarItem. */
+interface ToolbarItemExpose extends ToolbarItemSlotState {
+  /** Rendered item element or component instance. */
+  readonly element: PrimitiveElement | null;
+  /** Move focus to the rendered item. */
+  readonly focus: (options?: FocusOptions) => void;
+}
+//#endregion
+export { ToolbarPart as _, _default as a, ToolbarState as b, ToolbarDataAttribute as c, ToolbarEmits as d, ToolbarItemEmits as f, ToolbarOrientation as g, ToolbarItemState as h, ToolbarSlots as i, ToolbarDataName as l, ToolbarItemSlotState as m, ToolbarItemExpose as n, _default$1 as o, ToolbarItemProps as p, ToolbarItemSlots as r, ToolbarCssCustomProperty as s, ToolbarExpose as t, ToolbarDirection as u, ToolbarProps as v, ToolbarStyle as x, ToolbarSlotState as y };

package/dist/toolbar-CXE8YCX-.mjs

@@ -0,0 +1,425 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { createContext } from "./context.mjs";
+import { computed, createBlock, defineComponent, guardReactiveProps, mergeProps, nextTick, normalizeProps, onUnmounted, openBlock, renderSlot, resolveDynamicComponent, shallowRef, unref, useTemplateRef, watch, withCtx } from "vue";
+//#region src/families/actions/toolbar/toolbar-context.ts
+const toolbarContext = createContext("Toolbar");
+//#endregion
+//#region src/families/actions/toolbar/toolbar.vue
+var toolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "toolbar",
+	props: {
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		orientation: {
+			type: String,
+			required: false,
+			default: "horizontal"
+		},
+		dir: {
+			type: String,
+			required: false,
+			default: "ltr"
+		},
+		loop: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		rovingFocus: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaDescribedby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	emits: ["press"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const element = useTemplateRef("element");
+		const items = /* @__PURE__ */ new Set();
+		const activeValue = shallowRef(null);
+		const disabledState = computed(() => __props.disabled);
+		const orientationState = computed(() => __props.orientation);
+		const dirState = computed(() => __props.dir);
+		const rovingFocusState = computed(() => __props.rovingFocus);
+		const state = computed(() => disabledState.value ? "disabled" : "idle");
+		const toolbarStyle = computed(() => ({ "--vize-ui-toolbar-orientation": orientationState.value }));
+		const intrinsicProps = computed(() => ({ style: toolbarStyle.value }));
+		const slotState = computed(() => ({
+			dir: dirState.value,
+			disabled: disabledState.value,
+			orientation: orientationState.value,
+			rovingFocus: rovingFocusState.value,
+			state: state.value,
+			style: toolbarStyle.value
+		}));
+		watch([
+			disabledState,
+			orientationState,
+			dirState,
+			rovingFocusState
+		], () => syncActiveValue(), {
+			flush: "post",
+			immediate: true
+		});
+		function getElementNode(target) {
+			if (typeof Element !== "undefined" && target instanceof Element) return target;
+			if (typeof Element !== "undefined" && target != null && "$el" in target && target.$el instanceof Element) return target.$el;
+			return null;
+		}
+		function focusTarget(target, options) {
+			const node = getElementNode(target);
+			if (typeof HTMLElement !== "undefined" && node instanceof HTMLElement) {
+				node.focus(options);
+				return true;
+			}
+			if (target != null && "focus" in target && typeof target.focus === "function") {
+				target.focus(options);
+				return true;
+			}
+			return false;
+		}
+		function getOrderedItems() {
+			const enabled = [...items].filter((item) => !item.disabled.value);
+			const root = getElementNode(element.value);
+			if (root === null) return enabled;
+			const positions = /* @__PURE__ */ new Map();
+			root.querySelectorAll("[data-vize-ui=\"toolbar-item\"]").forEach((node, index) => positions.set(node, index));
+			return enabled.sort((left, right) => {
+				return (positions.get(getElementNode(left.element.value) ?? root) ?? enabled.length) - (positions.get(getElementNode(right.element.value) ?? root) ?? enabled.length);
+			});
+		}
+		function validateItemValue(item) {
+			const itemValue = item.value();
+			for (const registered of items) if (registered !== item && registered.value() === itemValue) throw new Error("VIZE_UI_TOOLBAR_VALUE_DUPLICATE");
+		}
+		function syncActiveValue(item) {
+			if (item !== void 0) validateItemValue(item);
+			if (disabledState.value || !rovingFocusState.value) {
+				activeValue.value = null;
+				return;
+			}
+			const enabled = getOrderedItems();
+			if (enabled.some((candidate) => candidate.value() === activeValue.value)) return;
+			activeValue.value = enabled[0]?.value() ?? null;
+		}
+		function focusItem(item, options) {
+			activeValue.value = item.value();
+			focusTarget(item.element.value, options);
+		}
+		function focus(options) {
+			syncActiveValue();
+			const enabled = getOrderedItems();
+			const target = enabled.find((item) => item.value() === activeValue.value) ?? enabled[0];
+			if (target !== void 0) focusItem(target, options);
+		}
+		function focusValue(value, options) {
+			const target = getOrderedItems().find((item) => item.value() === value);
+			if (target === void 0) return false;
+			focusItem(target, options);
+			return true;
+		}
+		function moveFocus(fromValue, intent, options) {
+			if (disabledState.value || !rovingFocusState.value) return false;
+			const enabled = getOrderedItems();
+			if (enabled.length === 0) return false;
+			const fromIndex = enabled.findIndex((item) => item.value() === fromValue);
+			const activeIndex = enabled.findIndex((item) => item.value() === activeValue.value);
+			const currentIndex = fromIndex >= 0 ? fromIndex : activeIndex;
+			const rawIndex = intent === "first" ? 0 : intent === "last" ? enabled.length - 1 : currentIndex < 0 ? intent === "next" ? 0 : enabled.length - 1 : currentIndex + (intent === "next" ? 1 : -1);
+			const target = enabled[__props.loop ? (rawIndex + enabled.length) % enabled.length : rawIndex];
+			if (target === void 0) return false;
+			focusItem(target, options);
+			return true;
+		}
+		function getItemState(itemDisabled) {
+			return itemDisabled ? "disabled" : "idle";
+		}
+		function registerItem(item) {
+			validateItemValue(item);
+			items.add(item);
+			syncActiveValue();
+			nextTick(syncActiveValue);
+			return () => {
+				const removedValue = item.value();
+				items.delete(item);
+				if (activeValue.value === removedValue) activeValue.value = null;
+				syncActiveValue();
+			};
+		}
+		function requestItemPress(value, nativeEvent) {
+			if (!disabledState.value) emit("press", value, nativeEvent);
+		}
+		function setActiveValue(value) {
+			if (!disabledState.value) activeValue.value = value;
+		}
+		toolbarContext.provide({
+			activeValue,
+			dir: dirState,
+			disabled: disabledState,
+			getItemState,
+			moveFocus,
+			orientation: orientationState,
+			registerItem,
+			requestItemPress,
+			rovingFocus: rovingFocusState,
+			setActiveValue,
+			state,
+			syncActiveValue
+		});
+		__expose({
+			activeValue,
+			dir: dirState,
+			disabled: disabledState,
+			element,
+			focus,
+			focusValue,
+			orientation: orientationState,
+			rovingFocus: rovingFocusState,
+			state,
+			style: toolbarStyle
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps({
+				ref_key: "element",
+				ref: element,
+				role: "toolbar",
+				"aria-label": __props.ariaLabel,
+				"aria-labelledby": __props.ariaLabelledby,
+				"aria-describedby": __props.ariaDescribedby,
+				"aria-orientation": orientationState.value,
+				"aria-disabled": disabledState.value ? "true" : void 0,
+				dir: dirState.value,
+				"data-vize-ui": "toolbar",
+				part: "root",
+				"data-state": state.value,
+				"data-disabled": disabledState.value ? "true" : void 0,
+				"data-orientation": orientationState.value,
+				"data-roving-focus": rovingFocusState.value ? "true" : void 0
+			}, intrinsicProps.value), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)]),
+				_: 3
+			}, 16, [
+				"aria-label",
+				"aria-labelledby",
+				"aria-describedby",
+				"aria-orientation",
+				"aria-disabled",
+				"dir",
+				"data-state",
+				"data-disabled",
+				"data-orientation",
+				"data-roving-focus"
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-4789b6ea"]]);
+//#endregion
+//#region src/families/actions/toolbar/toolbar-item.vue
+var toolbar_item_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "toolbar-item",
+	props: {
+		as: {
+			type: null,
+			required: false,
+			default: "button"
+		},
+		native: {
+			type: Boolean,
+			required: false,
+			default: () => void 0
+		},
+		type: {
+			type: String,
+			required: false,
+			default: "button"
+		},
+		value: {
+			type: String,
+			required: true
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaDescribedby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	emits: ["press"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		function getToolbarKeyboardAction(key, phase) {
+			if (key === "Enter") return phase === "keydown" ? "activate" : "ignore";
+			if (key === " ") return phase === "keydown" ? "prevent" : "activate";
+			return "ignore";
+		}
+		const emit = __emit;
+		const context = toolbarContext.use();
+		const element = useTemplateRef("element");
+		const isNativeButton = computed(() => __props.native ?? __props.as === "button");
+		const itemDisabled = computed(() => context.disabled.value || __props.disabled);
+		const itemState = computed(() => context.getItemState(itemDisabled.value));
+		const tabIndex = computed(() => {
+			if (itemDisabled.value) return isNativeButton.value ? void 0 : -1;
+			if (!context.rovingFocus.value) return isNativeButton.value ? void 0 : 0;
+			return context.activeValue.value === __props.value ? 0 : -1;
+		});
+		const slotState = computed(() => ({
+			dir: context.dir.value,
+			disabled: itemDisabled.value,
+			orientation: context.orientation.value,
+			state: itemState.value,
+			value: __props.value
+		}));
+		const registration = {
+			disabled: itemDisabled,
+			element,
+			value: () => __props.value
+		};
+		const unregister = context.registerItem(registration);
+		watch([itemDisabled, () => __props.value], () => context.syncActiveValue(registration), { flush: "sync" });
+		onUnmounted(unregister);
+		function onClick(event) {
+			if (itemDisabled.value) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+				return;
+			}
+			context.requestItemPress(__props.value, event);
+			emit("press", __props.value, event);
+		}
+		function onFocus() {
+			if (!itemDisabled.value) context.setActiveValue(__props.value);
+		}
+		function getNavigationIntent(key) {
+			if (key === "Home") return "first";
+			if (key === "End") return "last";
+			if (context.orientation.value === "horizontal") {
+				const nextKey = context.dir.value === "rtl" ? "ArrowLeft" : "ArrowRight";
+				const previousKey = context.dir.value === "rtl" ? "ArrowRight" : "ArrowLeft";
+				if (key === nextKey) return "next";
+				if (key === previousKey) return "previous";
+			} else {
+				if (key === "ArrowDown") return "next";
+				if (key === "ArrowUp") return "previous";
+			}
+			return null;
+		}
+		function onKeyboard(event, phase) {
+			if (phase === "keydown") {
+				const intent = getNavigationIntent(event.key);
+				if (intent !== null && context.moveFocus(__props.value, intent)) {
+					event.preventDefault();
+					return;
+				}
+			}
+			if (isNativeButton.value) return;
+			const action = getToolbarKeyboardAction(event.key, phase);
+			if (action === "ignore") return;
+			event.preventDefault();
+			if (itemDisabled.value) {
+				event.stopImmediatePropagation();
+				return;
+			}
+			if (action === "activate" && event.currentTarget instanceof HTMLElement) event.currentTarget.click();
+		}
+		function onKeydown(event) {
+			onKeyboard(event, "keydown");
+		}
+		function onKeyup(event) {
+			onKeyboard(event, "keyup");
+		}
+		function focusTarget(target, options) {
+			if (typeof target === "object" && target !== null && "focus" in target && typeof target.focus === "function") target.focus(options);
+		}
+		function focus(options) {
+			focusTarget(element.value, options);
+		}
+		__expose({
+			dir: computed(() => context.dir.value),
+			disabled: itemDisabled,
+			element,
+			focus,
+			orientation: computed(() => context.orientation.value),
+			state: itemState,
+			value: __props.value
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), {
+				ref_key: "element",
+				ref: element,
+				type: isNativeButton.value ? __props.type : void 0,
+				disabled: isNativeButton.value ? itemDisabled.value : void 0,
+				role: isNativeButton.value ? void 0 : "button",
+				tabindex: tabIndex.value,
+				"aria-label": __props.ariaLabel,
+				"aria-labelledby": __props.ariaLabelledby,
+				"aria-describedby": __props.ariaDescribedby,
+				"aria-disabled": itemDisabled.value && !isNativeButton.value ? "true" : void 0,
+				"data-vize-ui": "toolbar-item",
+				part: "item",
+				"data-state": itemState.value,
+				"data-disabled": itemDisabled.value ? "true" : void 0,
+				"data-orientation": unref(context).orientation.value,
+				"data-value": __props.value,
+				onClick,
+				onFocus,
+				onKeydown,
+				onKeyup
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)]),
+				_: 3
+			}, 40, [
+				"type",
+				"disabled",
+				"role",
+				"tabindex",
+				"aria-label",
+				"aria-labelledby",
+				"aria-describedby",
+				"aria-disabled",
+				"data-state",
+				"data-disabled",
+				"data-orientation",
+				"data-value"
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-cf547e8d"]]);
+//#endregion
+export { toolbar_default as n, toolbar_item_default as t };

package/dist/toolbar.d.mts

@@ -0,0 +1,2 @@
+import { _ as ToolbarPart, a as _default$1, b as ToolbarState, c as ToolbarDataAttribute, d as ToolbarEmits, f as ToolbarItemEmits, g as ToolbarOrientation, h as ToolbarItemState, i as ToolbarSlots, l as ToolbarDataName, m as ToolbarItemSlotState, n as ToolbarItemExpose, o as _default, p as ToolbarItemProps, r as ToolbarItemSlots, s as ToolbarCssCustomProperty, t as ToolbarExpose, u as ToolbarDirection, v as ToolbarProps, x as ToolbarStyle, y as ToolbarSlotState } from "./toolbar-CIU1bor0.mjs";
+export { _default as Toolbar, type ToolbarCssCustomProperty, type ToolbarDataAttribute, type ToolbarDataName, type ToolbarDirection, type ToolbarEmits, type ToolbarExpose, _default$1 as ToolbarItem, type ToolbarItemEmits, type ToolbarItemExpose, type ToolbarItemProps, type ToolbarItemSlotState, type ToolbarItemSlots, type ToolbarItemState, type ToolbarOrientation, type ToolbarPart, type ToolbarProps, type ToolbarSlotState, type ToolbarSlots, type ToolbarState, type ToolbarStyle };

package/dist/toolbar.mjs

@@ -0,0 +1,2 @@
+import { n as toolbar_default, t as toolbar_item_default } from "./toolbar-CXE8YCX-.mjs";
+export { toolbar_default as Toolbar, toolbar_item_default as ToolbarItem };