@vizejs/ui 0.454.0 → 0.457.0

package/dist/tour.d.mts

@@ -1,2 +1,2 @@
-import { $c as _default$5, Al as TourStepValue, Cl as TourSlotState, Dl as TourState, El as TourSpotlightSlotState, Jc as _default$10, Kc as padTourRect, Ml as TourTargetState, Ol as TourStepDefinition, Qc as _default$6, Sl as TourRootExpose, Tl as TourSpotlightRect, Xc as _default$8, Yc as _default$9, Zc as _default$7, _l as TourHookResult, al as TourAfterLeave, bl as TourNavigationDirection, cl as TourBeforeEnter, dl as TourContentExpose, el as _default$4, fl as TourContentPlacement, gl as TourDismissReason, hl as TourDirection, il as _default, jl as TourTarget, kl as TourStepSlotState, ll as TourBeforeEnterContext, ml as TourControlSlotState, nl as _default$2, ol as TourAfterLeaveContext, pl as TourContentSlotState, qc as resolveTourTarget, rl as _default$1, sl as TourArrowSlotState, tl as _default$3, ul as TourCloseReason, vl as TourMessages, wl as TourSpotlightExpose, xl as TourProgressSlotState, yl as TourMissingTargetBehavior } from "./announcer-DcI680jo.mjs";
+import { $c as _default$5, Al as TourStepValue, Cl as TourSlotState, Dl as TourState, El as TourSpotlightSlotState, Jc as _default$10, Kc as padTourRect, Ml as TourTargetState, Ol as TourStepDefinition, Qc as _default$6, Sl as TourRootExpose, Tl as TourSpotlightRect, Xc as _default$8, Yc as _default$9, Zc as _default$7, _l as TourHookResult, al as TourAfterLeave, bl as TourNavigationDirection, cl as TourBeforeEnter, dl as TourContentExpose, el as _default$4, fl as TourContentPlacement, gl as TourDismissReason, hl as TourDirection, il as _default, jl as TourTarget, kl as TourStepSlotState, ll as TourBeforeEnterContext, ml as TourControlSlotState, nl as _default$2, ol as TourAfterLeaveContext, pl as TourContentSlotState, qc as resolveTourTarget, rl as _default$1, sl as TourArrowSlotState, tl as _default$3, ul as TourCloseReason, vl as TourMessages, wl as TourSpotlightExpose, xl as TourProgressSlotState, yl as TourMissingTargetBehavior } from "./announcer-DunfmMGR.mjs";
 export { _default as Tour, _default as TourRoot, type TourAfterLeave, type TourAfterLeaveContext, _default$1 as TourArrow, type TourArrowSlotState, type TourBeforeEnter, type TourBeforeEnterContext, _default$2 as TourClose, type TourCloseReason, _default$3 as TourContent, type TourContentExpose, type TourContentPlacement, type TourContentSlotState, type TourControlSlotState, _default$4 as TourDescription, type TourDirection, type TourDismissReason, type TourHookResult, type TourMessages, type TourMissingTargetBehavior, type TourNavigationDirection, _default$5 as TourNext, _default$6 as TourPrev, _default$7 as TourProgress, type TourProgressSlotState, type TourRootExpose, type TourSlotState, _default$8 as TourSpotlight, type TourSpotlightExpose, type TourSpotlightRect, type TourSpotlightSlotState, type TourState, _default$9 as TourStep, type TourStepDefinition, type TourStepSlotState, type TourStepValue, type TourTarget, type TourTargetState, _default$10 as TourTitle, padTourRect, resolveTourTarget };

package/dist/tree.d.mts

@@ -1,2 +1,2 @@
-import { At as TreeItemState, Bt as TreeSlotState, Ct as TreeCheckPropagation, Dt as TreeFlatNode, Et as TreeDropPosition, Ft as TreeReorderController, Ht as TreeVirtualizer, It as TreeReorderItemRegistration, Lt as TreeReorderOptions, Mt as TreeLoadContext, Nt as TreeLoadState, Ot as TreeItemExpose, Pt as TreeMoveEvent, Rt as TreeRootExpose, St as _default, Tt as TreeDirection, Ut as TreeVirtualizerOptions, Vt as TreeState, Wt as TreeVirtualizerSource, _t as useTreeVirtualizer, bt as _default$2, dt as TreeIndexEntry, ft as deriveTreeCheckedStates, gt as toggleTreeChecked, ht as normalizeTreeChecked, jt as TreeKey, kt as TreeItemSlotState, lt as TreeIndex, mt as indexTree, pt as flattenVisibleTree, ut as TreeIndexAccessors, vt as useTreeReorder, wt as TreeCheckedState, xt as _default$1, yt as _default$3, zt as TreeSelectionMode } from "./announcer-DcI680jo.mjs";
+import { At as TreeItemState, Bt as TreeSlotState, Ct as TreeCheckPropagation, Dt as TreeFlatNode, Et as TreeDropPosition, Ft as TreeReorderController, Ht as TreeVirtualizer, It as TreeReorderItemRegistration, Lt as TreeReorderOptions, Mt as TreeLoadContext, Nt as TreeLoadState, Ot as TreeItemExpose, Pt as TreeMoveEvent, Rt as TreeRootExpose, St as _default, Tt as TreeDirection, Ut as TreeVirtualizerOptions, Vt as TreeState, Wt as TreeVirtualizerSource, _t as useTreeVirtualizer, bt as _default$2, dt as TreeIndexEntry, ft as deriveTreeCheckedStates, gt as toggleTreeChecked, ht as normalizeTreeChecked, jt as TreeKey, kt as TreeItemSlotState, lt as TreeIndex, mt as indexTree, pt as flattenVisibleTree, ut as TreeIndexAccessors, vt as useTreeReorder, wt as TreeCheckedState, xt as _default$1, yt as _default$3, zt as TreeSelectionMode } from "./announcer-DunfmMGR.mjs";
 export { _default as Tree, _default as TreeRoot, type TreeCheckPropagation, type TreeCheckedState, type TreeDirection, type TreeDropPosition, type TreeFlatNode, type TreeIndex, type TreeIndexAccessors, type TreeIndexEntry, _default$1 as TreeItem, _default$2 as TreeItemCheckbox, type TreeItemExpose, type TreeItemSlotState, type TreeItemState, _default$3 as TreeItemToggle, type TreeKey, type TreeLoadContext, type TreeLoadState, type TreeMoveEvent, type TreeReorderController, type TreeReorderItemRegistration, type TreeReorderOptions, type TreeRootExpose, type TreeSelectionMode, type TreeSlotState, type TreeState, type TreeVirtualizer, type TreeVirtualizerOptions, type TreeVirtualizerSource, deriveTreeCheckedStates, flattenVisibleTree, indexTree, normalizeTreeChecked, toggleTreeChecked, useTreeReorder, useTreeVirtualizer };

package/dist/week-picker.d.mts

@@ -1,4 +1,4 @@
 import { S as formatIsoDate, i as IsoWeek, r as DateRange, s as PlainDate, z as parseIsoDate } from "./plain-date-By3bTWQG.mjs";
-import { Bb as weekOf, Rb as WeekPickerRootExpose, Vb as _default, zb as WeekSelection } from "./announcer-DcI680jo.mjs";
+import { Bb as weekOf, Rb as WeekPickerRootExpose, Vb as _default, zb as WeekSelection } from "./announcer-DunfmMGR.mjs";
 import { a as _default$2, i as _default$3, n as _default$5, o as _default$1, r as _default$4, t as _default$6 } from "./calendar-year-select.vue-BohqVCaU.mjs";
 export { type DateRange, type IsoWeek, type PlainDate, _default as WeekPicker, _default as WeekPickerRoot, _default$1 as WeekPickerGrid, _default$2 as WeekPickerHeading, _default$3 as WeekPickerMonthSelect, _default$4 as WeekPickerNext, _default$5 as WeekPickerPrev, type WeekPickerRootExpose, _default$6 as WeekPickerYearSelect, type WeekSelection, formatIsoDate, parseIsoDate, weekOf };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vizejs/ui",
-  "version": "0.454.0",
+  "version": "0.457.0",
   "description": "Accessible, headless, Native CSS-first UI primitives",
   "keywords": [
     "accessibility",
@@ -105,6 +105,11 @@
       "import": "./dist/block-ui.mjs",
       "default": "./dist/block-ui.mjs"
     },
+    "./app-bar": {
+      "types": "./dist/app-bar.d.mts",
+      "import": "./dist/app-bar.mjs",
+      "default": "./dist/app-bar.mjs"
+    },
     "./bottom-navigation": {
       "types": "./dist/bottom-navigation.d.mts",
       "import": "./dist/bottom-navigation.mjs",
@@ -1165,7 +1170,7 @@
     "@tsdown/css": "0.22.14",
     "@types/node": "25.9.2",
     "@vitejs/plugin-vue": "6.0.7",
-    "@vizejs/native": "0.454.0",
+    "@vizejs/native": "0.457.0",
     "@vue/compiler-sfc": "3.5.35",
     "@vue/test-utils": "2.4.10",
     "happy-dom": "20.11.2",

package/registry/files/families/navigation/app-bar/app-bar-types.ts

@@ -0,0 +1,32 @@
+/** Scroll container an AppBar follows: an element, a selector, or `null` for the window. */
+export type AppBarTarget = HTMLElement | string | null;
+
+/** Stable visibility state exposed for consumer-owned styling and tests. */
+export type AppBarState = "visible" | "hidden";
+
+/** State exposed to every AppBar slot. */
+export interface AppBarSlotState {
+  /** Whether the followed container has scrolled past `elevateThreshold`. */
+  readonly elevated: boolean;
+
+  /** Whether `hideOnScroll` currently asks the consumer to move the bar out of view. */
+  readonly hidden: boolean;
+
+  /** Stable visibility token for styling and tests. */
+  readonly state: AppBarState;
+
+  /** Current scroll offset of the followed container in CSS pixels. */
+  readonly scrollTop: number;
+}
+
+/** Public instance exposed by AppBar. */
+export interface AppBarExpose extends AppBarSlotState {
+  /** Rendered root element. */
+  readonly element: HTMLElement | null;
+
+  /** Bring a hidden bar back into view. */
+  readonly show: () => void;
+
+  /** Re-read the scroll offset, for containers that scroll without a scroll event. */
+  readonly refresh: () => number;
+}

package/registry/files/families/navigation/app-bar/app-bar.ts

@@ -0,0 +1,3 @@
+/** Top application bar: a header landmark that reports scroll elevation and can hide while scrolling down. */
+export { default as AppBar } from "./app-bar.vue";
+export type { AppBarExpose, AppBarSlotState, AppBarState, AppBarTarget } from "./app-bar-types.ts";

package/registry/files/families/navigation/app-bar/app-bar.vue

@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import { computed, onMounted, onScopeDispose, shallowRef, useTemplateRef, watch } from "vue";
+import type { ComputedRef, ShallowRef } from "vue";
+
+import type { AppBarExpose, AppBarSlotState, AppBarState, AppBarTarget } from "./app-bar-types.ts";
+
+const {
+  as = "header",
+  target = null,
+  elevateThreshold = 0,
+  hideOnScroll = false,
+  hideThreshold = 64,
+  ariaLabel = undefined,
+  ariaLabelledby = undefined,
+} = defineProps<{
+  /**
+   * Host element. A top-level `header` is the page's banner landmark; use `div`
+   * when the bar sits inside another landmark that already has a header.
+   *
+   * @default "header"
+   */
+  readonly as?: "header" | "div";
+
+  /**
+   * Scroll container to follow: an element, a selector, or `null` for the window.
+   *
+   * @default null
+   */
+  readonly target?: AppBarTarget;
+
+  /**
+   * Scroll offset in CSS pixels past which the bar reports `elevated`.
+   *
+   * @default 0
+   */
+  readonly elevateThreshold?: number;
+
+  /**
+   * Report `hidden` while the container scrolls down, and visible again as soon as it scrolls up.
+   *
+   * @default false
+   */
+  readonly hideOnScroll?: boolean;
+
+  /**
+   * Scroll offset in CSS pixels before `hideOnScroll` may hide the bar.
+   *
+   * @default 64
+   */
+  readonly hideThreshold?: number;
+
+  /**
+   * Accessible name of the landmark when no visible title labels it.
+   *
+   * @default undefined
+   */
+  readonly ariaLabel?: string;
+
+  /**
+   * Ids that label the landmark (overrides `ariaLabel`).
+   *
+   * @default undefined
+   */
+  readonly ariaLabelledby?: string;
+}>();
+
+const emit = defineEmits<{
+  /** Fired when `hideOnScroll` hides or reveals the bar. */
+  "visibility-change": [hidden: boolean];
+}>();
+
+defineSlots<{
+  /** Leading content such as a navigation or back button. */
+  start?(props: AppBarSlotState): unknown;
+  /** Title and main content. */
+  default?(props: AppBarSlotState): unknown;
+  /** Trailing actions. */
+  end?(props: AppBarSlotState): unknown;
+}>();
+
+const element = useTemplateRef<HTMLElement>("element");
+const scrollTop = shallowRef(0);
+const hidden = shallowRef(false);
+const focusWithin = shallowRef(false);
+const finite = (value: number, fallback: number) =>
+  Number.isFinite(value) ? Math.max(0, value) : fallback;
+const elevated = computed(() => scrollTop.value > finite(elevateThreshold, 0));
+const state = computed<AppBarState>(() => (hidden.value ? "hidden" : "visible"));
+const slotState = computed<AppBarSlotState>(() => ({
+  elevated: elevated.value,
+  hidden: hidden.value,
+  scrollTop: scrollTop.value,
+  state: state.value,
+}));
+let container: HTMLElement | Window | null = null;
+
+function setHidden(next: boolean): void {
+  if (hidden.value === next) return;
+  hidden.value = next;
+  emit("visibility-change", next);
+}
+
+function resolveContainer(): HTMLElement | Window | null {
+  const ownerDocument = element.value?.ownerDocument;
+  if (!ownerDocument) return null;
+  if (target === null) return ownerDocument.defaultView;
+  if (typeof target !== "string") return target;
+  const found = ownerDocument.querySelector(target);
+  return found instanceof HTMLElement ? found : null;
+}
+
+function readOffset(source: HTMLElement | Window): number {
+  const offset = "scrollY" in source ? source.scrollY : source.scrollTop;
+  return Number.isFinite(offset) ? Math.max(0, offset) : 0;
+}
+
+function refresh(): number {
+  const previous = scrollTop.value;
+  const next = container === null ? 0 : readOffset(container);
+  scrollTop.value = next;
+  if (!hideOnScroll || focusWithin.value) setHidden(false);
+  else if (next < previous || next <= finite(hideThreshold, 64)) setHidden(false);
+  else if (next > previous) setHidden(true);
+  return next;
+}
+
+function onScroll(): void {
+  refresh();
+}
+
+function detach(): void {
+  container?.removeEventListener("scroll", onScroll);
+  container = null;
+}
+
+function attach(): void {
+  detach();
+  container = resolveContainer();
+  container?.addEventListener("scroll", onScroll, { passive: true });
+  scrollTop.value = container === null ? 0 : readOffset(container);
+}
+
+function onFocusin(): void {
+  focusWithin.value = true;
+  setHidden(false);
+}
+
+function onFocusout(event: FocusEvent): void {
+  const next = event.relatedTarget;
+  focusWithin.value = next instanceof Node && element.value?.contains(next) === true;
+}
+
+function show(): void {
+  setHidden(false);
+}
+
+onMounted(attach);
+watch(
+  () => target,
+  () => attach(),
+);
+watch(
+  () => hideOnScroll,
+  (enabled) => {
+    if (!enabled) setHidden(false);
+  },
+);
+onScopeDispose(detach);
+
+defineExpose({
+  element,
+  elevated,
+  hidden,
+  refresh,
+  scrollTop,
+  show,
+  state,
+} satisfies Omit<AppBarExpose, "element" | "elevated" | "hidden" | "scrollTop" | "state"> & {
+  readonly element: typeof element;
+  readonly elevated: ComputedRef<boolean>;
+  readonly hidden: Readonly<ShallowRef<boolean>>;
+  readonly scrollTop: Readonly<ShallowRef<number>>;
+  readonly state: ComputedRef<AppBarState>;
+});
+</script>
+
+<template>
+  <component
+    :is="as"
+    ref="element"
+    :aria-label="ariaLabelledby === undefined ? ariaLabel : undefined"
+    :aria-labelledby
+    part="root"
+    data-vize-ui="app-bar"
+    :data-state="state"
+    :data-elevated="elevated ? 'true' : undefined"
+    :data-hidden="hidden ? 'true' : undefined"
+    @focusin="onFocusin"
+    @focusout="onFocusout"
+  >
+    <div v-if="$slots.start" part="start" data-vize-ui="app-bar-start">
+      <slot name="start" v-bind="slotState" />
+    </div>
+    <div part="content" data-vize-ui="app-bar-content">
+      <slot v-bind="slotState" />
+    </div>
+    <div v-if="$slots.end" part="end" data-vize-ui="app-bar-end">
+      <slot name="end" v-bind="slotState" />
+    </div>
+  </component>
+</template>
+
+<style scoped>
+/* Headless by design. Position, elevation, and the hide transition are consumer-owned. */
+</style>

package/registry/files/families/navigation/app-bar/examples/app-bar-basic.vue

@@ -0,0 +1,21 @@
+<!-- Top app bar with a menu button, a title, and a search action that hides while scrolling down. -->
+<script setup lang="ts">
+import { useId } from "vue";
+import { AppBar } from "../app-bar.ts";
+
+const titleId = useId();
+</script>
+
+<template>
+  <AppBar hide-on-scroll :aria-labelledby="titleId">
+    <template #start>
+      <button type="button" aria-label="Open navigation">≡</button>
+    </template>
+    <template #default="{ elevated }">
+      <span :id="titleId" :data-elevated="elevated ? 'true' : undefined">Inbox</span>
+    </template>
+    <template #end>
+      <button type="button">Search</button>
+    </template>
+  </AppBar>
+</template>

package/registry/registry.json

@@ -3,7 +3,7 @@
   "registryKind": "vize-lib",
   "package": {
     "name": "@vizejs/ui",
-    "version": "0.454.0"
+    "version": "0.457.0"
   },
   "kind": "ui",
   "filesDirectory": "files",
@@ -481,6 +481,58 @@
         }
       ]
     },
+    {
+      "name": "app-bar",
+      "kind": "ui",
+      "title": "App Bar",
+      "description": "Headless App Bar component (stable); covers HTML header landmark, Material top app bar, Vuetify v-app-bar.",
+      "aliases": [
+        "app header",
+        "header bar",
+        "navigation bar",
+        "top app bar"
+      ],
+      "packageSubpath": "./app-bar",
+      "entry": "families/navigation/app-bar/app-bar.ts",
+      "files": [
+        {
+          "path": "families/navigation/app-bar/app-bar-types.ts",
+          "role": "types",
+          "sha256": "b879f2e17375f59b23f3ef2255575315f597c0a073a09c486228060994986bbe",
+          "size": 1142
+        },
+        {
+          "path": "families/navigation/app-bar/app-bar.ts",
+          "role": "entry",
+          "sha256": "47345ab2cde53e012af11e4953d52e3d2c671bdb1e84cc8f54e692eebfb1afd9",
+          "size": 262
+        },
+        {
+          "path": "families/navigation/app-bar/app-bar.vue",
+          "role": "component",
+          "sha256": "73b43ea845bd5302a3132cd7b6dbc116bdde28ea7230a97000d08e57e695754f",
+          "size": 5828
+        }
+      ],
+      "registryDependencies": [],
+      "dependencies": [
+        {
+          "name": "vue",
+          "range": "^3.5.0 || ^3.6.0-rc.11",
+          "kind": "peer"
+        }
+      ],
+      "contentHash": "a8958a46484dc33e0e7a1023ca8b25af39d2e5506fa96d42310b2b63f022b705",
+      "examples": [
+        {
+          "path": "families/navigation/app-bar/examples/app-bar-basic.vue",
+          "title": "Basic",
+          "description": "Top app bar with a menu button, a title, and a search action that hides while scrolling down.",
+          "sha256": "b93fe8e116cf8207b2cd934ad689359b9b10369ff9f3fd2225b47eced7bdc2da",
+          "size": 651
+        }
+      ]
+    },
     {
       "name": "aspect-ratio",
       "kind": "ui",