@vizejs/ui 0.443.0 → 0.454.0

package/registry/files/families/actions/split-button/split-button-action.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { computed, useTemplateRef } from "vue";
+
+import { menuLevelContext, menuTreeContext } from "../../menus/menu/menu-context.ts";
+import { splitButtonContext } from "./split-button-context.ts";
+import type { SplitButtonActionExpose, SplitButtonSlotState } from "./split-button-types.ts";
+
+const {
+  type = "button",
+  disabled = false,
+  ariaLabel = undefined,
+} = defineProps<{
+  /**
+   * Native button submission behavior.
+   *
+   * @default "button"
+   */
+  readonly type?: "button" | "reset" | "submit";
+
+  /**
+   * Disable the primary action while the trigger stays available.
+   *
+   * @default false
+   */
+  readonly disabled?: boolean;
+
+  /**
+   * Accessible name when no visible label supplies one.
+   *
+   * @default undefined
+   */
+  readonly ariaLabel?: string;
+}>();
+
+const emit = defineEmits<{
+  /** Fired after user activation reaches the enabled primary action. */
+  press: [nativeEvent: MouseEvent];
+  /** Fired before keyboard handling; call `preventDefault()` to skip the built-in keys. */
+  keydown: [nativeEvent: KeyboardEvent];
+}>();
+
+defineSlots<{
+  /** Primary action contents. Receives the menu open state and availability. */
+  default(props: SplitButtonSlotState): unknown;
+}>();
+
+const tree = menuTreeContext.use();
+const level = menuLevelContext.use();
+const splitButton = splitButtonContext.use();
+const element = useTemplateRef<HTMLButtonElement>("element");
+const disabledState = computed(() => disabled || splitButton.disabled.value);
+
+function onClick(event: MouseEvent): void {
+  if (!disabledState.value) emit("press", event);
+}
+
+function onKeydown(event: KeyboardEvent): void {
+  if (disabledState.value) return;
+  emit("keydown", event);
+  if (event.defaultPrevented) return;
+  // Platform split buttons open their menu from the primary action with Alt+ArrowDown.
+  if (event.altKey && event.key === "ArrowDown") {
+    event.preventDefault();
+    splitButton.openFromAction(element.value, event);
+  }
+}
+
+function focus(options?: FocusOptions): void {
+  element.value?.focus(options);
+}
+
+defineExpose({ element, focus } satisfies Omit<SplitButtonActionExpose, "element"> & {
+  readonly element: typeof element;
+});
+</script>
+
+<template>
+  <button
+    ref="element"
+    :type
+    :disabled="disabledState"
+    :aria-label
+    data-vize-ui="split-button-action"
+    part="action"
+    :data-state="level.state.value"
+    :data-disabled="disabledState ? 'true' : undefined"
+    @click="onClick"
+    @keydown="onKeydown"
+  >
+    <slot
+      :dir="tree.dir.value"
+      :disabled="disabledState"
+      :modal="tree.modal.value"
+      :open="level.open.value"
+      :state="level.state.value"
+    />
+  </button>
+</template>
+
+<style scoped>
+/* Headless by design. Native CSS remains entirely consumer-owned. */
+</style>

package/registry/files/families/actions/split-button/split-button-context.ts

@@ -0,0 +1,17 @@
+import type { ComputedRef } from "vue";
+
+import { createContext } from "../../foundations/context/context.ts";
+
+/** Coordination between SplitButtonRoot and its primary action. */
+export interface SplitButtonContextValue {
+  /** Whether the whole split button is disabled. */
+  readonly disabled: ComputedRef<boolean>;
+
+  /**
+   * Open the menu on behalf of the primary action. Focus returns to `origin`
+   * instead of the trigger when the menu closes.
+   */
+  readonly openFromAction: (origin: HTMLElement | null, event: Event) => boolean;
+}
+
+export const splitButtonContext = createContext<SplitButtonContextValue>("SplitButton");

package/registry/files/families/actions/split-button/split-button-root.vue

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import { computed, shallowRef, useTemplateRef } from "vue";
+import type { ComputedRef } from "vue";
+
+import { useResolvedDirection } from "../../i18n/direction/direction-runtime.ts";
+import { useMenuRoot } from "../../menus/menu/menu-root-runtime.ts";
+import type { MenuRootSetupExpose } from "../../menus/menu/menu-root-runtime.ts";
+import type { MenuDirection } from "../../menus/menu/menu-types.ts";
+import { splitButtonContext } from "./split-button-context.ts";
+import type { SplitButtonContextValue } from "./split-button-context.ts";
+import type { SplitButtonAnchor, SplitButtonSlotState } from "./split-button-types.ts";
+
+const {
+  id = undefined,
+  open = undefined,
+  defaultOpen = false,
+  modal = true,
+  dir = undefined,
+  loop = false,
+  disabled = false,
+  anchor = "group",
+  ariaLabel = undefined,
+  ariaLabelledby = undefined,
+  ariaDescribedby = undefined,
+} = defineProps<{
+  /**
+   * Consumer-owned base id. `null` and `undefined` select a deterministic fallback.
+   *
+   * @default undefined
+   */
+  readonly id?: string | null;
+
+  /**
+   * Controlled open state of the menu. `undefined` selects uncontrolled behavior.
+   *
+   * @default undefined
+   */
+  readonly open?: boolean;
+
+  /**
+   * Initial open state for uncontrolled use.
+   *
+   * @default false
+   */
+  readonly defaultOpen?: boolean;
+
+  /**
+   * Make outside content inert and lock document scroll while the menu is open.
+   *
+   * @default true
+   */
+  readonly modal?: boolean;
+
+  /**
+   * Reading direction: flips submenu arrow keys and submenu placement. `undefined` inherits `DirectionProvider`/`LocaleProvider`, then `"ltr"`.
+   *
+   * @default undefined
+   */
+  readonly dir?: MenuDirection;
+
+  /**
+   * Wrap arrow-key navigation from the last item to the first and back.
+   *
+   * @default false
+   */
+  readonly loop?: boolean;
+
+  /**
+   * Disable the primary action and the trigger, and close the menu when it becomes disabled.
+   *
+   * @default false
+   */
+  readonly disabled?: boolean;
+
+  /**
+   * Element the menu is positioned against: the whole group or only the trigger.
+   *
+   * @default "group"
+   */
+  readonly anchor?: SplitButtonAnchor;
+
+  /**
+   * Accessible name of the group when no `aria-labelledby` supplies one.
+   *
+   * @default undefined
+   */
+  readonly ariaLabel?: string;
+
+  /**
+   * Space-separated ids that label the group.
+   *
+   * @default undefined
+   */
+  readonly ariaLabelledby?: string;
+
+  /**
+   * Space-separated ids that describe the group.
+   *
+   * @default undefined
+   */
+  readonly ariaDescribedby?: string;
+}>();
+
+const dirState = useResolvedDirection(() => dir);
+
+const emit = defineEmits<{
+  /** Fired with the requested open value (supports `v-model:open`). */
+  "update:open": [value: boolean];
+  /** Fired after any distinct open-state request with the previous value and native event. */
+  "open-change": [value: boolean, previous: boolean, nativeEvent: Event | null];
+}>();
+
+defineSlots<{
+  /** Primary action, trigger, and content. Receives the menu open state and availability. */
+  default(props: SplitButtonSlotState): unknown;
+}>();
+
+const element = useTemplateRef<HTMLDivElement>("element");
+const disabledState = computed(() => disabled);
+// Element that requested the current open state, when it was not the trigger.
+const restoreElement = shallowRef<HTMLElement | null>(null);
+let pendingOrigin: HTMLElement | null = null;
+
+const menu = useMenuRoot({
+  kind: "split-button",
+  hint: "split-button",
+  id: () => id,
+  open: () => open,
+  defaultOpen: () => defaultOpen,
+  modal: () => modal,
+  dir: () => dirState.value,
+  loop: () => loop,
+  disabled: () => disabled,
+  reference: () => (anchor === "group" ? element.value : menu.level.triggerElement.value),
+  restoreTarget: () => restoreElement.value ?? menu.level.triggerElement.value,
+  onOpenChange: (value, previous, event) => {
+    if (value) restoreElement.value = pendingOrigin;
+    emit("update:open", value);
+    emit("open-change", value, previous, event);
+  },
+});
+const level = menu.level;
+
+function openFromAction(origin: HTMLElement | null, event: Event): boolean {
+  pendingOrigin = origin;
+  try {
+    return level.setOpen(true, event, "first");
+  } finally {
+    pendingOrigin = null;
+  }
+}
+
+splitButtonContext.provide({
+  disabled: disabledState,
+  openFromAction,
+} satisfies SplitButtonContextValue);
+const slotState = computed<SplitButtonSlotState>(() => ({
+  ...menu.slotState.value,
+  disabled: disabledState.value,
+}));
+
+defineExpose({
+  ...menu.expose,
+  disabled: disabledState,
+  element,
+} satisfies MenuRootSetupExpose & {
+  readonly disabled: ComputedRef<boolean>;
+  readonly element: typeof element;
+});
+</script>
+
+<template>
+  <div
+    ref="element"
+    role="group"
+    :aria-label
+    :aria-labelledby
+    :aria-describedby
+    :aria-disabled="disabledState ? 'true' : undefined"
+    data-vize-ui="split-button"
+    part="root"
+    :data-state="level.state.value"
+    :data-disabled="disabledState ? 'true' : undefined"
+  >
+    <slot v-bind="slotState" />
+  </div>
+</template>
+
+<style scoped>
+/* Headless by design. Native CSS remains entirely consumer-owned. */
+</style>

package/registry/files/families/actions/split-button/split-button-trigger.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, useTemplateRef } from "vue";
+
+import { menuLevelContext, menuTreeContext } from "../../menus/menu/menu-context.ts";
+import type { SplitButtonSlotState, SplitButtonTriggerExpose } from "./split-button-types.ts";
+
+const {
+  disabled = false,
+  ariaLabel = undefined,
+  openOn = "pointerdown",
+} = defineProps<{
+  /**
+   * Remove the trigger from activation and sequential keyboard focus.
+   *
+   * @default false
+   */
+  readonly disabled?: boolean;
+
+  /**
+   * Accessible name of the menu button. Required when the trigger renders only an icon.
+   *
+   * @default undefined
+   */
+  readonly ariaLabel?: string;
+
+  /**
+   * Primary mouse button event that toggles the menu. `pointerdown` opens on
+   * press (native menu feel, press-drag-release selection); `click` waits for release.
+   *
+   * @default "pointerdown"
+   */
+  readonly openOn?: "click" | "pointerdown";
+}>();
+
+const emit = defineEmits<{
+  /** Fired before a primary-button pointer-down toggles the menu; preventable. */
+  pointerdown: [nativeEvent: PointerEvent];
+  /** Fired before keyboard handling; call `preventDefault()` to skip the built-in keys. */
+  keydown: [nativeEvent: KeyboardEvent];
+}>();
+
+defineSlots<{
+  /** Trigger contents. Receives the menu open state and availability. */
+  default(props: SplitButtonSlotState): unknown;
+}>();
+
+const tree = menuTreeContext.use();
+const level = menuLevelContext.use();
+const element = useTemplateRef<HTMLButtonElement>("element");
+level.hasTrigger.value = true;
+const disabledState = computed(() => disabled || level.disabled.value);
+
+onMounted(() => {
+  level.triggerElement.value = element.value;
+});
+onUnmounted(() => {
+  if (level.triggerElement.value === element.value) level.triggerElement.value = null;
+});
+
+let touchPress = false;
+
+function onPointerdown(event: PointerEvent): void {
+  if (disabledState.value || openOn !== "pointerdown") return;
+  if (event.button !== 0 || event.ctrlKey || event.pointerType === "touch") return;
+  emit("pointerdown", event);
+  if (event.defaultPrevented) return;
+  const opening = !level.open.value;
+  level.setOpen(opening, event, "content");
+  // Keep the trigger from taking focus so the opening content owns it.
+  if (opening) event.preventDefault();
+}
+
+function onClick(event: MouseEvent): void {
+  if (disabledState.value) return;
+  // Mouse presses already toggled on pointer-down; touch, pen taps and
+  // keyboard/assistive-technology clicks (`detail === 0`) toggle here.
+  const handledByPointerdown = openOn === "pointerdown" && event.detail > 0 && !touchPress;
+  touchPress = false;
+  if (handledByPointerdown) return;
+  level.setOpen(!level.open.value, event, event.detail === 0 ? "first" : "content");
+}
+
+function onPointerup(event: PointerEvent): void {
+  touchPress = event.pointerType === "touch";
+}
+
+function onKeydown(event: KeyboardEvent): void {
+  if (disabledState.value) return;
+  emit("keydown", event);
+  if (event.defaultPrevented) return;
+  if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") {
+    event.preventDefault();
+    level.setOpen(true, event, "first");
+  } else if (event.key === "ArrowUp") {
+    event.preventDefault();
+    level.setOpen(true, event, "last");
+  }
+}
+
+function focus(options?: FocusOptions): void {
+  element.value?.focus(options);
+}
+
+defineExpose({ element, focus } satisfies Omit<SplitButtonTriggerExpose, "element"> & {
+  readonly element: typeof element;
+});
+</script>
+
+<template>
+  <button
+    :id="level.triggerId.value"
+    ref="element"
+    type="button"
+    :disabled="disabledState"
+    :aria-label
+    aria-haspopup="menu"
+    :aria-expanded="level.open.value ? 'true' : 'false'"
+    :aria-controls="level.open.value ? level.contentId.value : undefined"
+    data-vize-ui="split-button-trigger"
+    part="trigger"
+    :data-state="level.state.value"
+    :data-disabled="disabledState ? 'true' : undefined"
+    @click="onClick"
+    @keydown="onKeydown"
+    @pointerdown="onPointerdown"
+    @pointerup="onPointerup"
+  >
+    <slot
+      :dir="tree.dir.value"
+      :disabled="disabledState"
+      :modal="tree.modal.value"
+      :open="level.open.value"
+      :state="level.state.value"
+    />
+  </button>
+</template>
+
+<style scoped>
+/* Headless by design. Native CSS remains entirely consumer-owned. */
+</style>

package/registry/files/families/actions/split-button/split-button-types.ts

@@ -0,0 +1,40 @@
+import type {
+  MenuRootExpose,
+  MenuSlotState,
+  MenuTriggerExpose,
+} from "../../menus/menu/menu-types.ts";
+
+/**
+ * Element the menu content is positioned against.
+ *
+ * - `group`: the whole split button, so the menu lines up with the primary action.
+ * - `trigger`: the menu trigger only.
+ */
+export type SplitButtonAnchor = "group" | "trigger";
+
+/** State exposed to SplitButton slots. */
+export interface SplitButtonSlotState extends MenuSlotState {
+  /** Whether the split button suppresses the primary action and refuses to open. */
+  readonly disabled: boolean;
+}
+
+/** Imperative surface exposed by SplitButtonRoot. */
+export interface SplitButtonRootExpose extends MenuRootExpose {
+  /** Whether the split button suppresses the primary action and refuses to open. */
+  readonly disabled: boolean;
+
+  /** Rendered `role="group"` element. */
+  readonly element: HTMLDivElement | null;
+}
+
+/** Imperative surface exposed by SplitButtonAction. */
+export interface SplitButtonActionExpose {
+  /** Rendered native button. */
+  readonly element: HTMLButtonElement | null;
+
+  /** Move focus to the primary action. */
+  readonly focus: (options?: FocusOptions) => void;
+}
+
+/** Imperative surface exposed by SplitButtonTrigger. */
+export type SplitButtonTriggerExpose = MenuTriggerExpose;

package/registry/files/families/actions/split-button/split-button.ts

@@ -0,0 +1,40 @@
+/**
+ * Accessible, unstyled SplitButton: a primary action paired with a menu button
+ * (WAI-ARIA APG) that opens related actions. Items, groups, radio/checkbox
+ * items, and submenus are the shared Menu parts re-exported under SplitButton
+ * names.
+ */
+export { default as SplitButton, default as SplitButtonRoot } from "./split-button-root.vue";
+export { default as SplitButtonAction } from "./split-button-action.vue";
+export { default as SplitButtonTrigger } from "./split-button-trigger.vue";
+export {
+  MenuArrow as SplitButtonArrow,
+  MenuCheckboxItem as SplitButtonCheckboxItem,
+  MenuContent as SplitButtonContent,
+  MenuGroup as SplitButtonGroup,
+  MenuItem as SplitButtonItem,
+  MenuItemIndicator as SplitButtonItemIndicator,
+  MenuLabel as SplitButtonLabel,
+  MenuRadioGroup as SplitButtonRadioGroup,
+  MenuRadioItem as SplitButtonRadioItem,
+  MenuSeparator as SplitButtonSeparator,
+  MenuSub as SplitButtonSub,
+  MenuSubContent as SplitButtonSubContent,
+  MenuSubTrigger as SplitButtonSubTrigger,
+} from "../../menus/menu/menu.ts";
+export type {
+  MenuCheckedState as SplitButtonCheckedState,
+  MenuContentExpose as SplitButtonContentExpose,
+  MenuContentSlotState as SplitButtonContentSlotState,
+  MenuDirection as SplitButtonDirection,
+  MenuItemExpose as SplitButtonItemExpose,
+  MenuSelectEvent as SplitButtonSelectEvent,
+  MenuState as SplitButtonState,
+} from "../../menus/menu/menu.ts";
+export type {
+  SplitButtonActionExpose,
+  SplitButtonAnchor,
+  SplitButtonRootExpose,
+  SplitButtonSlotState,
+  SplitButtonTriggerExpose,
+} from "./split-button-types.ts";

package/registry/files/families/date-time/calendar/calendar-multiple-root.vue

@@ -101,7 +101,7 @@ const selection = useMultipleCalendarSelection({
 const core = useCalendarCore(props, selection.adapter, root, (date) =>
   emit("update:focusedDate", date),
 );
-const { id, headingId, slotState, direction, state } = core;
+const { id: resolvedId, headingId, slotState, direction, state } = core;
 const isoValues = computed(() => selection.value.value.map((date) => formatIsoDate(date)));
 
 type CalendarMultipleRootSetupExpose = {
@@ -124,7 +124,7 @@ defineExpose(exposed);
 
 <template>
   <div
-    :id
+    :id="resolvedId"
     ref="root"
     role="group"
     :dir="direction"

package/registry/files/families/date-time/calendar/calendar-root.vue

@@ -94,7 +94,7 @@ const selection = useSingleCalendarSelection({
 const core = useCalendarCore(props, selection.adapter, root, (date) =>
   emit("update:focusedDate", date),
 );
-const { id, headingId, slotState, direction, state } = core;
+const { id: resolvedId, headingId, slotState, direction, state } = core;
 const isoValue = computed(() =>
   selection.value.value ? formatIsoDate(selection.value.value) : "",
 );
@@ -118,7 +118,7 @@ defineExpose(exposed);
 
 <template>
   <div
-    :id
+    :id="resolvedId"
     ref="root"
     role="group"
     :dir="direction"

package/registry/files/families/date-time/duration-field/duration-field.vue

@@ -67,7 +67,7 @@ defineSlots<{
 const root = useTemplateRef<HTMLDivElement>("root");
 const input = useTemplateRef<HTMLInputElement>("input");
 const field = useDurationField(props, emit, root);
-const { id, direction, isoValue, slotState, exposed, segmentId } = field;
+const { id: resolvedId, direction, isoValue, slotState, exposed, segmentId } = field;
 const validation = useFieldValidationInput({
   input,
   invalid: () => false,
@@ -96,7 +96,7 @@ defineExpose(exposed);
 
 <template>
   <div
-    :id
+    :id="resolvedId"
     ref="root"
     part="root"
     role="group"
@@ -171,7 +171,7 @@ defineExpose(exposed);
       :required="slotState.required"
       :disabled="slotState.disabled"
       tabindex="-1"
-      :aria-labelledby="id"
+      :aria-labelledby="resolvedId"
       autocomplete="off"
       data-vize-ui="duration-field-input"
       :style="fieldValidationInputStyle"

package/registry/files/families/date-time/range-calendar/range-calendar-root.vue

@@ -104,7 +104,7 @@ const selection = useRangeCalendarSelection({
 const core = useCalendarCore(props, selection.adapter, root, (date) =>
   emit("update:focusedDate", date),
 );
-const { id, headingId, slotState, direction, state } = core;
+const { id: resolvedId, headingId, slotState, direction, state } = core;
 const isoStart = computed(() =>
   selection.value.value ? formatIsoDate(selection.value.value.start) : "",
 );
@@ -135,7 +135,7 @@ defineExpose(exposed);
 
 <template>
   <div
-    :id
+    :id="resolvedId"
     ref="root"
     role="group"
     :dir="direction"

package/registry/files/families/date-time/week-picker/week-picker-root.vue

@@ -106,7 +106,7 @@ const core = useCalendarCore(props, selection.adapter, root, (date) =>
   emit("update:focusedDate", date),
 );
 resolveWeekStart = () => core.exposed.weekStartsOn.value;
-const { id, headingId, slotState, direction, state } = core;
+const { id: resolvedId, headingId, slotState, direction, state } = core;
 const isoStart = computed(() =>
   selection.value.value ? formatIsoDate(selection.value.value.start) : "",
 );
@@ -137,7 +137,7 @@ defineExpose(exposed);
 
 <template>
   <div
-    :id
+    :id="resolvedId"
     ref="root"
     role="group"
     :dir="direction"

package/registry/files/families/feedback/meter/meter-state.ts

@@ -24,6 +24,8 @@ export interface MeterStateOptions {
 
   /**
    * Raw maximum. Values less than or equal to `min` are repaired to `min + 1`.
+   * If that addition rounds back to `min`, retain the finite collapsed range
+   * with zero percent and mark it invalid.
    *
    * @default METER_DEFAULT_MAX
    */
@@ -95,8 +97,8 @@ export function getMeterState(options: MeterStateOptions = {}): MeterSlotState {
   if (finite(options.max) && options.max > min) {
     max = options.max;
   } else {
-    invalid = invalid || options.max != null;
     max = min + 1;
+    invalid = invalid || options.max != null || max === min;
   }
   const value = finite(options.value) ? clamp(options.value, min, max) : min;
   invalid =
@@ -114,7 +116,13 @@ export function getMeterState(options: MeterStateOptions = {}): MeterSlotState {
     [low, high] = [high, low];
   }
 
-  const percent = ((value - min) / (max - min)) * 100;
+  const span = max - min;
+  const percent =
+    max === min
+      ? 0
+      : (Number.isFinite(span)
+          ? (value - min) / span
+          : (value / 2 - min / 2) / (max / 2 - min / 2)) * 100;
   const range = rangeFor(value, low, high);
   const optimumRange =
     optimumResult.value === null ? null : rangeFor(optimumResult.value, low, high);

package/registry/files/families/feedback/meter/meter-types.ts

@@ -12,7 +12,10 @@ export interface MeterSlotState {
   /** Finite lower bound. */
   readonly min: number;
 
-  /** Finite upper bound, always greater than `min`. */
+  /**
+   * Finite upper bound. Equals `min` only when a repaired `min + 1` rounds
+   * back to `min`; that collapsed range reports zero percent and invalid state.
+   */
   readonly max: number;
 
   /** Optional low threshold clamped to the normalized range. */

package/registry/files/families/feedback/meter/meter.vue

@@ -41,6 +41,8 @@ const {
 
   /**
    * Upper bound. Values less than or equal to `min` are repaired to `min + 1`.
+   * If that addition rounds back to `min`, the collapsed finite range reports
+   * zero percent and invalid state.
    *
    * @default 1
    */