@xleddyl/443-components-vue 0.5.0 → 0.6.2

package/dist/internal/core/scroll-edges.d.ts

@@ -0,0 +1,5 @@
+export declare function useScrollEdges(target: () => HTMLElement | null | undefined): {
+    overflowTop: import("vue").Ref<boolean, boolean>;
+    overflowBottom: import("vue").Ref<boolean, boolean>;
+    update: () => void;
+};

package/dist/internal/core/scroll-edges.mjs

@@ -0,0 +1,63 @@
+import { onBeforeUnmount, ref, watch } from "vue";
+const EDGE_TOLERANCE = 1;
+export function useScrollEdges(target) {
+  const overflowTop = ref(false);
+  const overflowBottom = ref(false);
+  let element = null;
+  let frame = 0;
+  let resizeObserver;
+  let mutationObserver;
+  function measure() {
+    frame = 0;
+    if (!element) return;
+    const { scrollTop, scrollHeight, clientHeight } = element;
+    overflowTop.value = scrollTop > EDGE_TOLERANCE;
+    overflowBottom.value = scrollHeight - clientHeight - scrollTop > EDGE_TOLERANCE;
+  }
+  function schedule() {
+    if (frame) return;
+    frame = requestAnimationFrame(measure);
+  }
+  function observeChildren() {
+    if (!element || !resizeObserver) return;
+    resizeObserver.disconnect();
+    resizeObserver.observe(element);
+    for (const child of element.children) resizeObserver.observe(child);
+  }
+  function detach() {
+    if (frame) cancelAnimationFrame(frame);
+    frame = 0;
+    element?.removeEventListener("scroll", schedule);
+    resizeObserver?.disconnect();
+    mutationObserver?.disconnect();
+    element = null;
+  }
+  function attach(next) {
+    element = next;
+    next.addEventListener("scroll", schedule, { passive: true });
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(schedule);
+      observeChildren();
+    }
+    if (typeof MutationObserver !== "undefined") {
+      mutationObserver = new MutationObserver(() => {
+        observeChildren();
+        schedule();
+      });
+      mutationObserver.observe(next, { childList: true });
+    }
+    measure();
+  }
+  watch(
+    target,
+    (next) => {
+      if (next === element) return;
+      detach();
+      if (next) attach(next);
+      else overflowTop.value = overflowBottom.value = false;
+    },
+    { flush: "post", immediate: true }
+  );
+  onBeforeUnmount(detach);
+  return { overflowTop, overflowBottom, update: schedule };
+}

package/dist/internal/core/storage.d.ts

@@ -1,5 +1,7 @@
+import type { Ref } from 'vue';
 export declare function readStorage(key: string): string | null;
 export declare function writeStorage(key: string, value: string): void;
 export declare function removeStorage(key: string): void;
 export declare function readStorageJson(key: string): unknown;
 export declare function writeStorageJson(key: string, value: unknown): void;
+export declare function createStoredRef<T extends string>(key: string, isValid: (value: unknown) => value is T, fallback: T): Ref<T>;

package/dist/internal/core/storage.mjs

@@ -1,3 +1,5 @@
+import { effectScope, ref, watch } from "vue";
+import { isClient } from "./env.mjs";
 export function readStorage(key) {
   try {
     return localStorage.getItem(key);
@@ -29,3 +31,9 @@ export function readStorageJson(key) {
 export function writeStorageJson(key, value) {
   writeStorage(key, JSON.stringify(value));
 }
+export function createStoredRef(key, isValid, fallback) {
+  const stored = isClient() ? readStorage(key) : null;
+  const store = ref(isValid(stored) ? stored : fallback);
+  if (isClient()) effectScope(true).run(() => watch(store, (value) => writeStorage(key, value)));
+  return store;
+}

package/dist/internal/core/theme.d.ts

@@ -3,7 +3,6 @@ import type { ThemePreference } from '../../composables/useTheme';
 export declare const THEME_STORAGE_KEY = "k-theme";
 export declare const THEME_ORDER: readonly ThemePreference[];
 export declare function isThemePreference(value: unknown): value is ThemePreference;
-export declare function injectThemeStore(): Ref<ThemePreference> | null;
 export declare function resolveThemeStore(): Ref<ThemePreference>;
 export declare const systemDark: import("vue").ShallowRef<boolean, boolean>;
 export declare function listenToSystemTheme(): void;

package/dist/internal/core/theme.mjs

@@ -1,25 +1,16 @@
-import { effectScope, getCurrentInstance, inject, ref, shallowRef, watch } from "vue";
+import { getCurrentInstance, inject, shallowRef } from "vue";
 import { THEME_KEY } from "../keys.mjs";
 import { DARK_SCHEME_QUERY, isClient } from "./env.mjs";
-import { readStorage, writeStorage } from "./storage.mjs";
+import { createStoredRef } from "./storage.mjs";
 export const THEME_STORAGE_KEY = "k-theme";
 export const THEME_ORDER = ["system", "light", "dark"];
 export function isThemePreference(value) {
   return THEME_ORDER.includes(value);
 }
-export function injectThemeStore() {
-  return getCurrentInstance() ? inject(THEME_KEY, null) : null;
-}
 let localStore;
-function createLocalStore() {
-  const stored = isClient() ? readStorage(THEME_STORAGE_KEY) : null;
-  const store = ref(isThemePreference(stored) ? stored : "system");
-  if (isClient())
-    effectScope(true).run(() => watch(store, (value) => writeStorage(THEME_STORAGE_KEY, value)));
-  return store;
-}
 export function resolveThemeStore() {
-  return injectThemeStore() ?? (localStore ??= createLocalStore());
+  const injected = getCurrentInstance() ? inject(THEME_KEY, null) : null;
+  return injected ?? (localStore ??= createStoredRef(THEME_STORAGE_KEY, isThemePreference, "system"));
 }
 export const systemDark = shallowRef(false);
 let systemListening = false;

package/dist/internal/core/tone.d.ts

@@ -1,3 +1,4 @@
 import type { Tone } from '../../components/core/types';
 import type { IconName } from '../../composables/useIcons';
 export declare const toneIcons: Record<Tone, IconName>;
+export declare function spokenToneKey(tone: string | undefined): "tone.danger" | "tone.warning" | "tone.info" | "tone.success" | undefined;

package/dist/internal/core/tone.mjs

@@ -6,3 +6,7 @@ export const toneIcons = {
   warning: "exclamation-triangle",
   danger: "exclamation-circle"
 };
+const SPOKEN_TONES = ["danger", "warning", "info", "success"];
+export function spokenToneKey(tone) {
+  return SPOKEN_TONES.includes(tone) ? `tone.${tone}` : void 0;
+}

package/dist/internal/core/transition.d.ts

@@ -0,0 +1 @@
+export declare function withViewTransition(update: () => void, enabled?: boolean): void;

package/dist/internal/core/transition.mjs

@@ -0,0 +1,20 @@
+import { nextTick } from "vue";
+import { isClient, prefersReducedMotion } from "./env.mjs";
+function hasTopLayerContent() {
+  try {
+    return Boolean(document.querySelector(":modal, :popover-open"));
+  } catch {
+    return Boolean(document.querySelector("dialog[open]"));
+  }
+}
+export function withViewTransition(update, enabled = true) {
+  const canAnimate = enabled && isClient() && typeof document.startViewTransition === "function" && !prefersReducedMotion() && !hasTopLayerContent();
+  if (!canAnimate) {
+    update();
+    return;
+  }
+  document.startViewTransition(async () => {
+    update();
+    await nextTick();
+  });
+}

package/dist/internal/data/rows.mjs

@@ -1,17 +1,18 @@
+import { collator } from "../core/intl.mjs";
 export function createCollator(locale) {
-  return new Intl.Collator(locale, { numeric: true, sensitivity: "base" });
+  return collator(locale, { numeric: true, sensitivity: "base" });
 }
 function isEmptyCell(value) {
   return value === null || value === void 0 || value === "";
 }
-export function compareValues(a, b, collator) {
+export function compareValues(a, b, collator2) {
   if (a === b) return 0;
   if (isEmptyCell(a)) return 1;
   if (isEmptyCell(b)) return -1;
   if (typeof a === "number" && typeof b === "number") return a - b;
   if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
   if (typeof a === "boolean" && typeof b === "boolean") return Number(a) - Number(b);
-  return collator.compare(String(a), String(b));
+  return collator2.compare(String(a), String(b));
 }
 export function readColumn(row, key, column) {
   return column?.value ? column.value(row) : row[key];
@@ -23,14 +24,14 @@ export function readCell(row, key, columns) {
     columns?.find((column) => column.key === key)
   );
 }
-export function sortRows(rows, sort, columns, collator) {
+export function sortRows(rows, sort, columns, collator2) {
   if (!sort) return rows;
   const column = columns?.find((item) => item.key === sort.key);
   const direction = sort.direction === "asc" ? 1 : -1;
   return [...rows].sort((a, b) => {
     const left = readColumn(a, sort.key, column);
     const right = readColumn(b, sort.key, column);
-    const order = compareValues(left, right, collator);
+    const order = compareValues(left, right, collator2);
     return isEmptyCell(left) || isEmptyCell(right) ? order : order * direction;
   });
 }

package/dist/internal/data/tree.d.ts

@@ -1,7 +1,6 @@
-import type { TreeMove, TreeNode } from '../../components/data/types';
-type NodeId = TreeNode['id'];
+import type { TreeMove, TreeNodeId } from '../../components/data/types';
 interface TreeShape<T> {
-    id: NodeId;
+    id: TreeNodeId;
     children?: T[];
 }
 export declare function applyTreeMove<T extends TreeShape<T>>(nodes: T[], move: TreeMove): T[];

package/dist/internal/feedback/LoadingHost.vue

@@ -17,14 +17,15 @@
          ref="screenRef"
          class="k-loading-screen"
          :aria-label="screenLabel"
-         aria-busy="true"
+         tabindex="-1"
          @cancel.prevent
       >
-         <span v-if="screenOpen" class="k-loading-screen-indicator" tabindex="-1">
-            <Spinner :label="screenLabel" />
+         <span v-if="screenOpen" class="k-loading-screen-indicator">
+            <Spinner decorative />
             <span class="k-loading-screen-label" aria-hidden="true">{{ screenLabel }}</span>
          </span>
       </dialog>
+      <LiveRegion :message="statusMessage" />
    </template>
 </template>
 
@@ -32,8 +33,10 @@
 import { computed, nextTick, onBeforeUnmount, ref, useTemplateRef, watch } from "vue";
 import Spinner from "../../components/core/Spinner.vue";
 import { useLocale } from "../../composables/useLocale";
+import { activeElement } from "../core/focus";
+import LiveRegion from "../core/LiveRegion.vue";
 import { isPopoverOpen, supportsPopover } from "../floating/support";
-import { modalStack } from "../overlays/dialog";
+import { modalStack, releaseModal } from "../overlays/dialog";
 import { useHostClaim } from "../overlays/host";
 import { loadingTasks } from "./loading";
 const props = defineProps({
@@ -52,6 +55,10 @@ const screenOpen = ref(false);
 const busy = computed(() => loadingTasks.length > 0);
 const blockingTask = computed(() => loadingTasks.find((task) => task.blocking));
 const screenLabel = computed(() => blockingTask.value?.label ?? barLabel.value);
+const statusMessage = computed(() => {
+  if (phase.value !== "running" || screenOpen.value) return "";
+  return loadingTasks.find((task) => task.label)?.label ?? barLabel.value;
+});
 let showTimer;
 let trickleTimer;
 let hideTimer;
@@ -104,18 +111,21 @@ function openScreen() {
   screenTimer = setTimeout(async () => {
     const dialog = screenRef.value;
     if (!dialog || dialog.open || !blockingTask.value) return;
-    returnTarget = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    returnTarget = activeElement();
     screenOpen.value = true;
     dialog.showModal();
+    releaseModal(dialog);
+    modalStack.push(dialog);
     if (phase.value !== "idle") showBar();
     await nextTick();
-    dialog.querySelector(".k-loading-screen-indicator")?.focus();
+    dialog.focus({ preventScroll: true });
   }, props.delay);
 }
 function closeScreen() {
   clearTimeout(screenTimer);
   const dialog = screenRef.value;
   screenOpen.value = false;
+  releaseModal(dialog);
   if (!dialog?.open) return;
   dialog.close();
   if (returnTarget?.isConnected) returnTarget.focus({ preventScroll: true });

package/dist/internal/feedback/loading.mjs

@@ -1,8 +1,9 @@
 import { shallowReactive } from "vue";
+import { isClient } from "../core/env.mjs";
 export const loadingTasks = shallowReactive([]);
 let counter = 0;
 export function startLoadingTask(options = {}) {
-  if (typeof window === "undefined") return () => {
+  if (!isClient()) return () => {
   };
   counter += 1;
   const task = {

package/dist/internal/feedback/progress.d.ts

@@ -0,0 +1,12 @@
+export interface ProgressValueSource {
+    value?: number | null;
+    max: number;
+    valueText?: (value: number, max: number) => string;
+}
+export declare function percentText(ratio: number): string;
+export declare function useProgressValue(props: ProgressValueSource): {
+    indeterminate: import("vue").ComputedRef<boolean>;
+    clamped: import("vue").ComputedRef<number>;
+    ratio: import("vue").ComputedRef<number>;
+    displayValue: import("vue").ComputedRef<string>;
+};

package/dist/internal/feedback/progress.mjs

@@ -0,0 +1,13 @@
+import { computed } from "vue";
+export function percentText(ratio) {
+  return `${Math.round(ratio * 100)}%`;
+}
+export function useProgressValue(props) {
+  const indeterminate = computed(() => props.value === null || props.value === void 0);
+  const clamped = computed(() => Math.min(Math.max(props.value ?? 0, 0), props.max));
+  const ratio = computed(() => props.max > 0 ? clamped.value / props.max : 0);
+  const displayValue = computed(
+    () => props.valueText ? props.valueText(clamped.value, props.max) : percentText(ratio.value)
+  );
+  return { indeterminate, clamped, ratio, displayValue };
+}

package/dist/internal/floating/layer.d.ts

@@ -25,4 +25,4 @@ export declare function useFloatingLayer(options: FloatingLayerOptions): {
     reposition: () => void;
 };
 export declare const ARROW_OFFSET = 4;
-export declare function syncOpenModel(open: Ref<boolean>, layer: ReturnType<typeof useFloatingLayer>, source: () => HTMLElement | null): void;
+export declare function syncOpenModel(open: Ref<boolean>, isOpen: Readonly<Ref<boolean>>, show: () => void, hide: () => void): void;

package/dist/internal/floating/layer.mjs

@@ -1,4 +1,5 @@
 import { onBeforeUnmount, onMounted, ref, useId, watch } from "vue";
+import { activeElement, isFocusLost } from "../core/focus.mjs";
 import {
   ANCHOR_STYLE_PROPERTIES,
   addAnchorName,
@@ -15,6 +16,7 @@ import {
   supportsPopover,
   waitForAnimations
 } from "./support.mjs";
+const fallbackStack = [];
 export function useFloatingLayer(options) {
   const id = useId();
   const anchorName = `--k-anchor-${id.replace(/[^a-zA-Z0-9_-]/g, "")}`;
@@ -105,7 +107,7 @@ export function useFloatingLayer(options) {
   function opening() {
     if (isOpen.value) return;
     isOpen.value = true;
-    returnTarget = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    returnTarget = activeElement();
     startPositioning();
     options.onBeforeOpen?.();
   }
@@ -115,9 +117,7 @@ export function useFloatingLayer(options) {
   function closing() {
     const element = options.floating.value;
     if (!element || options.returnFocus?.() === false) return;
-    const active = document.activeElement;
-    const focusInside = active instanceof Node && element.contains(active);
-    if (!focusInside && active && active !== document.body) return;
+    if (!isFocusLost(element)) return;
     const fallback = anchorElement();
     const target = returnTarget && returnTarget.isConnected && !element.contains(returnTarget) ? returnTarget : fallback;
     if (target instanceof HTMLElement) target.focus({ preventScroll: true });
@@ -153,12 +153,19 @@ export function useFloatingLayer(options) {
       if (element.contains(target) || anchorElement()?.contains(target)) return;
       hide();
     };
+    const entry = {};
     const onKeyDown = (event) => {
-      if (event.key === "Escape") hide();
+      if (event.key !== "Escape" || event.defaultPrevented) return;
+      if (fallbackStack[fallbackStack.length - 1] !== entry) return;
+      event.preventDefault();
+      hide();
     };
+    fallbackStack.push(entry);
     document.addEventListener("pointerdown", onPointerDown, true);
     document.addEventListener("keydown", onKeyDown);
     removeFallbackListeners = () => {
+      const index = fallbackStack.indexOf(entry);
+      if (index >= 0) fallbackStack.splice(index, 1);
       document.removeEventListener("pointerdown", onPointerDown, true);
       document.removeEventListener("keydown", onKeyDown);
     };
@@ -231,13 +238,13 @@ export function useFloatingLayer(options) {
   };
 }
 export const ARROW_OFFSET = 4;
-export function syncOpenModel(open, layer, source) {
-  watch(layer.isOpen, (value) => {
+export function syncOpenModel(open, isOpen, show, hide) {
+  watch(isOpen, (value) => {
     if (open.value !== value) open.value = value;
   });
   watch(open, (value) => {
-    if (value === layer.isOpen.value) return;
-    if (value) layer.show(source());
-    else layer.hide();
+    if (value === isOpen.value) return;
+    if (value) show();
+    else hide();
   });
 }

package/dist/internal/forms/keys.d.ts

@@ -24,3 +24,7 @@ export interface RadioGroupContext {
 }
 export declare const CHECKBOX_GROUP_KEY: InjectionKey<CheckboxGroupContext>;
 export declare const RADIO_GROUP_KEY: InjectionKey<RadioGroupContext>;
+export interface InputGroupContext {
+    register: (id: string) => () => void;
+}
+export declare const INPUT_GROUP_KEY: InjectionKey<InputGroupContext>;

package/dist/internal/forms/keys.mjs

@@ -1,2 +1,3 @@
 export const CHECKBOX_GROUP_KEY = Symbol("k-checkbox-group");
 export const RADIO_GROUP_KEY = Symbol("k-radio-group");
+export const INPUT_GROUP_KEY = Symbol("k-input-group");

package/dist/internal/forms/name.d.ts

@@ -0,0 +1,2 @@
+export declare function hasNameAttrs(attrs: Record<string, unknown>): boolean;
+export declare function warnUnnamed(component: string, named: () => boolean): void;

package/dist/internal/forms/name.mjs

@@ -0,0 +1,12 @@
+import { onMounted, warn } from "vue";
+export function hasNameAttrs(attrs) {
+  return Boolean(attrs["aria-label"] || attrs["aria-labelledby"]);
+}
+export function warnUnnamed(component, named) {
+  onMounted(() => {
+    if (!named())
+      warn(
+        `[@xleddyl/443-components-vue] ${component} needs an accessible name: pass a label prop, wrap it in a FormField with a label, or set aria-label or aria-labelledby.`
+      );
+  });
+}

package/dist/internal/forms/standard-schema.d.ts

@@ -22,8 +22,6 @@ export interface StandardSchemaV1<Input = unknown, Output = Input> {
     };
 }
 export declare function isStandardSchema(value: unknown): value is StandardSchemaV1;
-export declare function runStandardSchema(schema: StandardSchemaV1, value: unknown): Promise<readonly StandardSchemaIssue[]>;
-export declare function issuesByField(issues: ReadonlyArray<StandardSchemaIssue>): Record<string, string>;
 export type IssuePath = ReadonlyArray<PropertyKey>;
 export type IssueKeyResolver = (path: IssuePath) => string | ReadonlyArray<string> | undefined;
 export interface GroupedIssues {

package/dist/internal/forms/standard-schema.mjs

@@ -1,24 +1,6 @@
 export function isStandardSchema(value) {
   return typeof value === "object" && value !== null && "~standard" in value;
 }
-function issueField(issue) {
-  const segment = issue.path?.[0];
-  if (segment === void 0) return void 0;
-  const key = typeof segment === "object" ? segment.key : segment;
-  return typeof key === "symbol" ? void 0 : String(key);
-}
-export async function runStandardSchema(schema, value) {
-  const result = await schema["~standard"].validate(value);
-  return result.issues ?? [];
-}
-export function issuesByField(issues) {
-  const errors = {};
-  for (const issue of issues) {
-    const field = issueField(issue);
-    if (field !== void 0 && !(field in errors)) errors[field] = issue.message;
-  }
-  return errors;
-}
 export function issuePath(issue) {
   return (issue.path ?? []).map(
     (segment) => typeof segment === "object" && segment !== null ? segment.key : segment

package/dist/internal/layout/NavGroup.vue

@@ -0,0 +1,104 @@
+<template>
+   <div class="k-navgroup" :class="{ 'is-open': open && !rail }">
+      <button
+         ref="triggerRef"
+         type="button"
+         class="k-navlink k-navgroup-trigger"
+         :class="{
+  'is-child-active': childActive,
+  'is-disabled': item.disabled,
+  'is-menu-open': rail && menuOpen
+}"
+         :disabled="item.disabled"
+         :aria-haspopup="rail ? 'menu' : void 0"
+         :aria-expanded="(rail ? menuOpen : open) ? 'true' : 'false'"
+         :aria-controls="rail ? menuId : panelId"
+         :title="rail ? item.label : void 0"
+         @click="onClick"
+         @keydown="onKeydown"
+         @pointerdown="onPointerDown"
+      >
+         <span v-if="item.icon" class="k-navlink-icon" aria-hidden="true">
+            <Icon :name="item.icon" />
+         </span>
+         <span class="k-navlink-label">{{ item.label }}</span>
+         <span v-if="item.badge !== void 0 && item.badge !== ''" class="k-navlink-badge">
+            {{ item.badge }}
+         </span>
+         <Icon name="chevron-right" class="k-navgroup-chevron" />
+      </button>
+      <div :id="panelId" class="k-navgroup-panel" :inert="open && !rail ? void 0 : true">
+         <div class="k-navgroup-list">
+            <slot />
+         </div>
+      </div>
+      <MenuList
+         v-if="rail"
+         :id="menuId"
+         ref="menuRef"
+         :items="menuItems"
+         :anchor="() => triggerRef"
+         placement="right-start"
+         :offset="10"
+         :label="item.label"
+         @open-change="menuOpen = $event"
+      />
+   </div>
+</template>
+
+<script setup>
+import { computed, ref, useTemplateRef, watch } from "vue";
+import Icon from "../../components/core/Icon.vue";
+import { useInvoker } from "../floating/trigger";
+import MenuList from "../overlays/MenuList.vue";
+import { menuTriggerHandlers } from "../overlays/menu";
+const props = defineProps({
+  item: { type: Object, required: true },
+  open: { type: Boolean, required: true },
+  rail: { type: Boolean, required: true },
+  childActive: { type: Boolean, required: true },
+  panelId: { type: String, required: true }
+});
+const emit = defineEmits(["toggle"]);
+const menuId = computed(() => `${props.panelId}-menu`);
+const triggerRef = useTemplateRef("triggerRef");
+const menuRef = useTemplateRef("menuRef");
+const menuOpen = ref(false);
+const railTrigger = computed(() => props.rail ? triggerRef.value : null);
+const menuElement = computed(() => menuRef.value?.el ?? null);
+function toMenuItem(item) {
+  return {
+    label: item.label,
+    icon: item.icon,
+    to: item.to,
+    href: item.href,
+    target: item.external ? "_blank" : void 0,
+    disabled: item.disabled,
+    children: item.children?.length ? item.children.map(toMenuItem) : void 0
+  };
+}
+const menuItems = computed(() => (props.item.children ?? []).map(toMenuItem));
+useInvoker(railTrigger, menuElement, () => {
+  menuRef.value?.toggle("first", triggerRef.value);
+});
+function onClick() {
+  if (!props.rail) emit("toggle");
+}
+const menuTrigger = menuTriggerHandlers(
+  () => menuRef.value,
+  () => triggerRef.value,
+  ["ArrowRight", "ArrowDown"]
+);
+function onKeydown(event) {
+  if (props.rail) menuTrigger.onKeydown(event);
+}
+function onPointerDown(event) {
+  if (props.rail) menuTrigger.onPointerDown(event);
+}
+watch(
+  () => props.rail,
+  (rail) => {
+    if (!rail) menuOpen.value = false;
+  }
+);
+</script>