@xleddyl/443-components-vue 0.4.0 → 0.6.0

package/dist/internal/core/intl.mjs

@@ -1,23 +1,24 @@
-const numberFormats = /* @__PURE__ */ new Map();
-const dateTimeFormats = /* @__PURE__ */ new Map();
-function cacheKey(locale, options) {
-  return `${locale ?? ""}|${JSON.stringify(options)}`;
-}
-export function numberFormat(locale, options = {}) {
-  const key = cacheKey(locale, options);
-  let format = numberFormats.get(key);
-  if (!format) {
-    format = new Intl.NumberFormat(locale, options);
-    numberFormats.set(key, format);
-  }
-  return format;
-}
-export function dateTimeFormat(locale, options = {}) {
-  const key = cacheKey(locale, options);
-  let format = dateTimeFormats.get(key);
-  if (!format) {
-    format = new Intl.DateTimeFormat(locale, options);
-    dateTimeFormats.set(key, format);
-  }
-  return format;
+function cachedIntl(create) {
+  const cache = /* @__PURE__ */ new Map();
+  return (locale, options = {}) => {
+    const key = `${locale ?? ""}|${JSON.stringify(options)}`;
+    let instance = cache.get(key);
+    if (!instance) {
+      instance = create(locale, options);
+      cache.set(key, instance);
+    }
+    return instance;
+  };
 }
+export const numberFormat = cachedIntl(
+  (locale, options) => new Intl.NumberFormat(locale, options)
+);
+export const dateTimeFormat = cachedIntl(
+  (locale, options) => new Intl.DateTimeFormat(locale, options)
+);
+export const pluralRules = cachedIntl(
+  (locale, options) => new Intl.PluralRules(locale, options)
+);
+export const collator = cachedIntl(
+  (locale, options) => new Intl.Collator(locale, options)
+);

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

@@ -0,0 +1,6 @@
+export declare const LIVE_DELAY = 120;
+export declare function useLiveMessage(): {
+    message: import("vue").Ref<string, string>;
+    announce: (text: string | undefined) => void;
+    clear: () => void;
+};

package/dist/internal/core/live.mjs

@@ -0,0 +1,22 @@
+import { getCurrentScope, onScopeDispose, ref } from "vue";
+import { isClient } from "./env.mjs";
+export const LIVE_DELAY = 120;
+export function useLiveMessage() {
+  const message = ref("");
+  let timer;
+  function clear() {
+    if (timer) clearTimeout(timer);
+    timer = void 0;
+    message.value = "";
+  }
+  function announce(text) {
+    clear();
+    if (!text || !isClient()) return;
+    timer = setTimeout(() => {
+      timer = void 0;
+      message.value = text;
+    }, LIVE_DELAY);
+  }
+  if (getCurrentScope()) onScopeDispose(clear);
+  return { message, announce, clear };
+}

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

@@ -1,4 +1,3 @@
 import type { Ref } from 'vue';
 import type { ThemePreset } from './preset-data';
-export declare function injectPresetStore(): Ref<ThemePreset> | null;
 export declare function resolvePresetStore(): Ref<ThemePreset>;

package/dist/internal/core/preset.mjs

@@ -1,19 +1,9 @@
-import { effectScope, getCurrentInstance, inject, ref, watch } from "vue";
+import { getCurrentInstance, inject } from "vue";
 import { PRESET_KEY } from "../keys.mjs";
-import { isClient } from "./env.mjs";
 import { isThemePreset, PRESET_STORAGE_KEY } from "./preset-data.mjs";
-import { readStorage, writeStorage } from "./storage.mjs";
-export function injectPresetStore() {
-  return getCurrentInstance() ? inject(PRESET_KEY, null) : null;
-}
+import { createStoredRef } from "./storage.mjs";
 let localStore;
-function createLocalStore() {
-  const stored = isClient() ? readStorage(PRESET_STORAGE_KEY) : null;
-  const store = ref(isThemePreset(stored) ? stored : "default");
-  if (isClient())
-    effectScope(true).run(() => watch(store, (value) => writeStorage(PRESET_STORAGE_KEY, value)));
-  return store;
-}
 export function resolvePresetStore() {
-  return injectPresetStore() ?? (localStore ??= createLocalStore());
+  const injected = getCurrentInstance() ? inject(PRESET_KEY, null) : null;
+  return injected ?? (localStore ??= createStoredRef(PRESET_STORAGE_KEY, isThemePreset, "default"));
 }

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

@@ -0,0 +1 @@
+export declare function useResizeObserver(targets: () => (Element | null | undefined)[], callback: ResizeObserverCallback): void;

package/dist/internal/core/resize.mjs

@@ -0,0 +1,11 @@
+import { onBeforeUnmount, onMounted } from "vue";
+export function useResizeObserver(targets, callback) {
+  let observer;
+  onMounted(() => {
+    const elements = targets().filter((element) => Boolean(element));
+    if (!elements.length || typeof ResizeObserver === "undefined") return;
+    observer = new ResizeObserver(callback);
+    for (const element of elements) observer.observe(element);
+  });
+  onBeforeUnmount(() => observer?.disconnect());
+}

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

@@ -11,3 +11,10 @@ export declare function useRovingTabStops(root: Readonly<Ref<HTMLElement | null>
     onKeydown: (event: KeyboardEvent) => void;
     onFocusIn: (event: FocusEvent) => void;
 };
+export declare function useTypeahead(): {
+    type: (char: string) => {
+        query: string;
+        cycle: boolean;
+    };
+    typing: () => boolean;
+};

package/dist/internal/core/roving.mjs

@@ -1,4 +1,4 @@
-import { nextTick, onMounted, onUpdated } from "vue";
+import { getCurrentScope, nextTick, onMounted, onScopeDispose, onUpdated } from "vue";
 const FORWARD = {
   horizontal: ["ArrowRight"],
   vertical: ["ArrowDown"],
@@ -60,3 +60,21 @@ export function useRovingTabStops(root, options) {
   onUpdated(sync);
   return { onKeydown, onFocusIn };
 }
+const TYPEAHEAD_RESET = 500;
+export function useTypeahead() {
+  let buffer = "";
+  let timer;
+  function clear() {
+    clearTimeout(timer);
+    buffer = "";
+  }
+  function type(char) {
+    clearTimeout(timer);
+    buffer += char.toLowerCase();
+    timer = setTimeout(() => buffer = "", TYPEAHEAD_RESET);
+    const repeated = [...buffer].every((letter) => letter === buffer[0]);
+    return { query: repeated ? buffer[0] : buffer, cycle: repeated || buffer.length === 1 };
+  }
+  if (getCurrentScope()) onScopeDispose(clear);
+  return { type, typing: () => buffer !== "" };
+}

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