@xleddyl/443-components-vue 0.5.0 → 0.6.2

package/dist/components/templates/ListPage.vue.d.ts

@@ -41,6 +41,7 @@ declare const __VLS_export: <T extends object>(__VLS_props: NonNullable<Awaited<
         errorTitle?: string;
         retryLabel?: string;
         selectedText?: (count: number) => string;
+        resultsText?: (count: number) => string;
     } & {
         page?: number;
         pageSize?: number;

package/dist/components/templates/NotFoundPage.vue

@@ -11,6 +11,7 @@
       :brand-icon="brandIcon"
       :brand-logo="brandLogo"
       :fill="fill"
+      :level="level"
       :on-home="onHome"
    >
       <template v-if="$slots.actions" #actions><slot name="actions" /></template>
@@ -31,6 +32,7 @@ defineProps({
   brandIcon: { type: null, required: false },
   brandLogo: { type: String, required: false },
   fill: { type: Boolean, required: false, default: true },
+  level: { type: Number, required: false, default: 1 },
   onHome: { type: Function, required: false }
 });
 </script>

package/dist/components/templates/NotFoundPage.vue.d.ts

@@ -1,5 +1,6 @@
 import type { IconName } from '../../composables/useIcons';
 import type { LinkTarget } from '../core/types';
+import type { HeadingLevel } from '../layout/types';
 declare var __VLS_8: {}, __VLS_11: {}, __VLS_13: {};
 type __VLS_Slots = {} & {
     actions?: (props: typeof __VLS_8) => any;
@@ -18,6 +19,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     brandIcon?: IconName;
     brandLogo?: string;
     fill?: boolean;
+    level?: HeadingLevel;
     onHome?: () => void;
     error?: import("./types.ts").ErrorLike | null;
     statusCode?: number;
@@ -230,6 +232,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     brandIcon?: IconName;
     brandLogo?: string;
     fill?: boolean;
+    level?: HeadingLevel;
     onHome?: () => void;
     error?: import("./types.ts").ErrorLike | null;
     statusCode?: number;
@@ -436,6 +439,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     fill: boolean;
     message: string;
     title: string;
+    level: HeadingLevel;
     backLabel: string | false;
     homeTo: LinkTarget;
     homeLabel: string | false;

package/dist/components/templates/SaveBar.vue

@@ -1,8 +1,9 @@
 <template>
-   <div class="k-savebar-slot" :class="{ 'is-visible': visible }">
-      <p class="k-visually-hidden" role="status">{{ visible ? messageText : "" }}</p>
+   <div ref="slotRef" class="k-savebar-slot" :class="{ 'is-visible': visible }" tabindex="-1">
+      <LiveRegion :message="visible ? messageText : ''" />
       <div
          v-if="visible"
+         ref="barRef"
          class="k-savebar"
          role="region"
          :aria-label="labelText"
@@ -38,8 +39,10 @@
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, useTemplateRef, watch } from "vue";
 import { useLocale } from "../../composables/useLocale";
+import { focusStable, hasFocusWithin } from "../../internal/core/focus";
+import LiveRegion from "../../internal/core/LiveRegion.vue";
 import Button from "../core/Button.vue";
 const props = defineProps({
   visible: { type: Boolean, required: false, default: true },
@@ -58,4 +61,16 @@ const discardText = computed(
   () => props.discardLabel === void 0 ? t("common.discard") : props.discardLabel
 );
 const emit = defineEmits(["save", "discard"]);
+const slotRef = useTemplateRef("slotRef");
+const barRef = useTemplateRef("barRef");
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible || !hasFocusWithin(barRef.value)) return;
+    const form = props.form ? document.getElementById(props.form) : null;
+    const target = form ?? slotRef.value;
+    if (target) focusStable(target);
+  },
+  { flush: "pre" }
+);
 </script>

package/dist/components/templates/SaveBar.vue.d.ts

@@ -1,8 +1,8 @@
-declare var __VLS_1: {}, __VLS_3: {};
+declare var __VLS_6: {}, __VLS_8: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_6) => any;
 } & {
-    actions?: (props: typeof __VLS_3) => any;
+    actions?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{
     visible?: boolean;
@@ -18,6 +18,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -173,7 +174,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
@@ -221,6 +221,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -376,7 +377,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;

package/dist/components/templates/SettingsGroup.vue

@@ -14,7 +14,7 @@
          </div>
       </div>
       <div v-if="$slots.default" class="k-settings-group-body">
-         <slot />
+         <slot :heading-id="headingId" />
       </div>
    </section>
 </template>

package/dist/components/templates/SettingsGroup.vue.d.ts

@@ -1,4 +1,6 @@
-declare var __VLS_7: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {};
+declare var __VLS_7: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {
+    headingId: string;
+};
 type __VLS_Slots = {} & {
     label?: (props: typeof __VLS_7) => any;
 } & {

package/dist/components/templates/SettingsModal.vue

@@ -6,7 +6,7 @@
       flush
       hide-close
       :sheet="false"
-      :aria-label="titleText"
+      :label="titleText"
       :before-close="beforeClose"
       @open="emit('open')"
       @close="emit('close')"
@@ -14,7 +14,7 @@
    >
       <template #default="{ close }">
          <div class="k-settings-modal-frame">
-            <nav class="k-settings-modal-nav" :aria-label="navText">
+            <div class="k-settings-modal-nav">
                <Button
                   class="k-settings-modal-close"
                   icon="x-mark"
@@ -24,7 +24,15 @@
                   :aria-label="closeText"
                   @click="close"
                />
-               <div class="k-settings-modal-nav-list">
+               <nav
+                  ref="navList"
+                  class="k-settings-modal-nav-list"
+                  :aria-label="navText"
+                  :class="{
+  'is-overflow-top': navEdges.overflowTop.value,
+  'is-overflow-bottom': navEdges.overflowBottom.value
+}"
+               >
                   <div
                      v-for="group in navGroups"
                      :key="group.key"
@@ -71,7 +79,7 @@
                         </button>
                      </template>
                   </div>
-               </div>
+               </nav>
                <template v-if="onSignOut">
                   <hr class="k-settings-modal-divider" />
                   <button type="button" class="k-settings-modal-tab is-danger" @click="signOut">
@@ -79,7 +87,7 @@
                      <span class="k-settings-modal-tab-label">{{ signOutText }}</span>
                   </button>
                </template>
-            </nav>
+            </div>
 
             <section
                v-if="active"
@@ -101,47 +109,61 @@
                      <slot :name="`actions-${active.id}`" :section="active" :close="close" />
                   </div>
                </header>
-               <slot :name="`section-${active.id}`" :section="active" :close="close">
-                  <template v-if="active.id === 'account' && account">
-                     <div class="k-settings-modal-account">
-                        <Avatar :name="account.name" :src="account.avatar" size="lg" decorative />
-                        <div class="k-settings-modal-account-text">
-                           <span class="k-settings-modal-account-name">{{ account.name }}</span>
-                           <span v-if="account.email" class="k-settings-modal-account-email">
-                              {{ account.email }}
-                           </span>
+               <div
+                  ref="contentBody"
+                  class="k-settings-modal-body"
+                  :class="{
+  'is-overflow-top': contentEdges.overflowTop.value,
+  'is-overflow-bottom': contentEdges.overflowBottom.value
+}"
+               >
+                  <slot :name="`section-${active.id}`" :section="active" :close="close">
+                     <template v-if="active.id === 'account' && account">
+                        <div class="k-settings-modal-account">
+                           <Avatar
+                              :name="account.name"
+                              :src="account.avatar"
+                              size="lg"
+                              decorative
+                           />
+                           <div class="k-settings-modal-account-text">
+                              <span class="k-settings-modal-account-name">{{ account.name }}</span>
+                              <span v-if="account.email" class="k-settings-modal-account-email">
+                                 {{ account.email }}
+                              </span>
+                           </div>
+                           <Badge v-if="account.role" :label="account.role" />
                         </div>
-                        <Badge v-if="account.role" :label="account.role" />
-                     </div>
-                     <slot name="account-fields" :account="account" :close="close" />
-                     <SettingsGroup
-                        v-if="onSignOut && !hideSession"
-                        :label="sessionLabelText"
-                        :description="sessionDescriptionText"
-                        row
-                     >
-                        <template #actions>
-                           <Button
-                              variant="soft"
-                              tone="danger"
-                              size="sm"
-                              icon="arrow-left-start-on-rectangle"
-                              @click="signOut"
-                           >
-                              {{ signOutText }}
-                           </Button>
-                        </template>
-                     </SettingsGroup>
-                  </template>
-                  <AppearanceSettings
-                     v-else-if="active.id === 'appearance'"
-                     :presets="presets"
-                     :theme-label="themeLabel"
-                     :theme-text="themeText"
-                     :preset-label="presetLabel"
-                     :preset-text="presetText"
-                  />
-               </slot>
+                        <slot name="account-fields" :account="account" :close="close" />
+                        <SettingsGroup
+                           v-if="onSignOut && !hideSession"
+                           :label="sessionLabelText"
+                           :description="sessionDescriptionText"
+                           row
+                        >
+                           <template #actions>
+                              <Button
+                                 variant="soft"
+                                 tone="danger"
+                                 size="sm"
+                                 icon="arrow-left-start-on-rectangle"
+                                 @click="signOut"
+                              >
+                                 {{ signOutText }}
+                              </Button>
+                           </template>
+                        </SettingsGroup>
+                     </template>
+                     <AppearanceSettings
+                        v-else-if="active.id === 'appearance'"
+                        :presets="presets"
+                        :theme-label="themeLabel"
+                        :theme-text="themeText"
+                        :preset-label="presetLabel"
+                        :preset-text="presetText"
+                     />
+                  </slot>
+               </div>
             </section>
          </div>
       </template>
@@ -149,10 +171,11 @@
 </template>
 
 <script setup>
-import { computed, useId } from "vue";
+import { computed, useId, useTemplateRef } from "vue";
 import { THEME_PRESETS } from "../../composables/usePreset";
 import { useLocale } from "../../composables/useLocale";
 import { useLinkResolver } from "../../internal/core/link";
+import { useScrollEdges } from "../../internal/core/scroll-edges";
 import Button from "../core/Button.vue";
 import Icon from "../core/Icon.vue";
 import Avatar from "../data/Avatar.vue";
@@ -194,6 +217,10 @@ const signOutText = computed(() => props.signOutLabel ?? t("settings.signOut"));
 const sessionLabelText = computed(() => props.sessionLabel ?? t("settings.session"));
 const sessionDescriptionText = computed(() => props.sessionText ?? t("settings.sessionDescription"));
 const baseId = useId();
+const navList = useTemplateRef("navList");
+const contentBody = useTemplateRef("contentBody");
+const navEdges = useScrollEdges(() => navList.value);
+const contentEdges = useScrollEdges(() => contentBody.value);
 const panelId = `${baseId}-panel`;
 const { resolveLink } = useLinkResolver();
 const sectionList = computed(() => {

package/dist/components/templates/SettingsModal.vue.d.ts

@@ -1,18 +1,14 @@
 import type { ThemePreset } from '../../composables/usePreset';
 import type { DialogBeforeClose } from '../overlays/types';
-import type { SettingsModalAccount, SettingsModalSection } from './types';
-type SectionScope = {
-    section: SettingsModalSection;
-    close: () => void;
-};
+import type { SettingsModalAccount, SettingsModalSection, SettingsSectionSlotProps } from './types';
 type __VLS_Slots = {
     'account-fields'?: (props: {
         account: SettingsModalAccount;
         close: () => void;
     }) => unknown;
 } & {
-    [key: `section-${string}`]: ((props: SectionScope) => unknown) | undefined;
-    [key: `actions-${string}`]: ((props: SectionScope) => unknown) | undefined;
+    [key: `section-${string}`]: ((props: SettingsSectionSlotProps) => unknown) | undefined;
+    [key: `actions-${string}`]: ((props: SettingsSectionSlotProps) => unknown) | undefined;
 };
 declare const __VLS_base: import("vue").DefineComponent<{
     sections?: SettingsModalSection[];
@@ -40,11 +36,13 @@ declare const __VLS_base: import("vue").DefineComponent<{
     key?: PropertyKey | undefined;
     loading?: boolean;
     prefix?: "k-modal" | "k-drawer" | undefined;
+    label?: string;
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     description?: string;
     size?: import("../overlays/types").ModalSize;
+    dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -200,7 +198,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined;
-    dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
     enterKeyHint?: import("vue").HTMLAttributes["enterkeyhint"];
@@ -238,8 +235,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     onVnodeUpdated?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
     onVnodeBeforeUnmount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
-    onCancel?: ((payload: Event) => void) | undefined;
     flush?: boolean;
+    onCancel?: ((payload: Event) => void) | undefined;
     sheet?: boolean;
     rootClass?: unknown;
     hideClose?: boolean;
@@ -276,11 +273,13 @@ declare const __VLS_base: import("vue").DefineComponent<{
     key?: PropertyKey | undefined;
     loading?: boolean;
     prefix?: "k-modal" | "k-drawer" | undefined;
+    label?: string;
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     description?: string;
     size?: import("../overlays/types").ModalSize;
+    dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -436,7 +435,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined;
-    dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
     enterKeyHint?: import("vue").HTMLAttributes["enterkeyhint"];
@@ -474,8 +472,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     onVnodeUpdated?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
     onVnodeBeforeUnmount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
-    onCancel?: ((payload: Event) => void) | undefined;
     flush?: boolean;
+    onCancel?: ((payload: Event) => void) | undefined;
     sheet?: boolean;
     rootClass?: unknown;
     hideClose?: boolean;

package/dist/components/templates/SettingsPage.vue.d.ts

@@ -34,6 +34,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -189,7 +190,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
@@ -246,6 +246,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -401,7 +402,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;

package/dist/components/templates/SettingsSection.vue.d.ts

@@ -24,10 +24,12 @@ declare const __VLS_base: import("vue").DefineComponent<{
     key?: PropertyKey | undefined;
     prefix?: string | undefined;
     selected?: boolean;
+    label?: string;
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     bind?: Record<string, unknown>;
+    dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -188,7 +190,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined;
-    dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
     enterKeyHint?: import("vue").HTMLAttributes["enterkeyhint"];
@@ -251,10 +252,12 @@ declare const __VLS_base: import("vue").DefineComponent<{
     key?: PropertyKey | undefined;
     prefix?: string | undefined;
     selected?: boolean;
+    label?: string;
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     bind?: Record<string, unknown>;
+    dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -415,7 +418,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined;
-    dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
     enterKeyHint?: import("vue").HTMLAttributes["enterkeyhint"];

package/dist/components/templates/types.d.ts

@@ -30,6 +30,10 @@ export interface SettingsModalSection {
     badge?: string | number;
     disabled?: boolean;
 }
+export interface SettingsSectionSlotProps {
+    section: SettingsModalSection;
+    close: () => void;
+}
 export interface SettingsModalAccount {
     name: string;
     email?: string;

package/dist/composables/useAlert.mjs

@@ -1,22 +1,17 @@
 import { useLocale } from "./useLocale.mjs";
-import { confirmQueue, hasConfirmHost, nextConfirmId } from "../internal/overlays/confirm.mjs";
+import { isClient } from "../internal/core/env.mjs";
+import { enqueueDialog, hasConfirmHost, nativeDialogMessage } from "../internal/overlays/confirm.mjs";
 export function useAlert() {
   const { t } = useLocale();
   return function alert(input = {}) {
     const options = typeof input === "string" ? { description: input } : input;
-    if (typeof window === "undefined") return Promise.resolve();
+    if (!isClient()) return Promise.resolve();
     if (!hasConfirmHost()) {
-      window.alert([options.title, options.description].filter(Boolean).join("\n\n"));
+      window.alert(nativeDialogMessage(options));
       return Promise.resolve();
     }
     return new Promise((resolve) => {
-      confirmQueue.push({
-        title: t("alert.title"),
-        ...options,
-        kind: "alert",
-        id: nextConfirmId(),
-        resolve
-      });
+      enqueueDialog({ title: t("alert.title"), ...options, kind: "alert", resolve });
     });
   };
 }

package/dist/composables/useConfirm.mjs

@@ -1,8 +1,8 @@
 import { useLocale } from "./useLocale.mjs";
-import { confirmQueue, hasConfirmHost, nextConfirmId } from "../internal/overlays/confirm.mjs";
+import { isClient } from "../internal/core/env.mjs";
+import { enqueueDialog, hasConfirmHost, nativeDialogMessage } from "../internal/overlays/confirm.mjs";
 async function nativeConfirm(options, fallback) {
-  const message = [options.title, options.description].filter(Boolean).join("\n\n");
-  if (!window.confirm(message || fallback)) return false;
+  if (!window.confirm(nativeDialogMessage(options) || fallback)) return false;
   try {
     await options.onConfirm?.();
     return true;
@@ -14,10 +14,10 @@ export function useConfirm() {
   const { t } = useLocale();
   return function confirm(input = {}) {
     const options = typeof input === "string" ? { description: input } : input;
-    if (typeof window === "undefined") return Promise.resolve(false);
+    if (!isClient()) return Promise.resolve(false);
     if (!hasConfirmHost()) return nativeConfirm(options, t("common.areYouSure"));
     return new Promise((resolve) => {
-      confirmQueue.push({ ...options, kind: "confirm", id: nextConfirmId(), resolve });
+      enqueueDialog({ ...options, kind: "confirm", resolve });
     });
   };
 }

package/dist/composables/useField.d.ts

@@ -2,6 +2,7 @@ import type { ComputedRef, MaybeRefOrGetter } from 'vue';
 export interface FieldContext {
     id: string;
     labelId: string;
+    hasLabel?: ComputedRef<boolean>;
     name: ComputedRef<string | undefined>;
     describedBy: ComputedRef<string | undefined>;
     invalid: ComputedRef<boolean>;
@@ -9,6 +10,7 @@ export interface FieldContext {
     disabled: ComputedRef<boolean>;
     setControlError: (message: string | undefined, source?: object) => void;
     setLabelable?: (labelable: boolean | undefined, source: object) => void;
+    setRequiredHint?: (hint: boolean | undefined, source: object) => void;
 }
 export type FieldControlRole = 'primary' | 'auxiliary';
 export declare function useField(): FieldContext | null;
@@ -20,6 +22,7 @@ export interface FieldControlOptions {
     describedBy?: MaybeRefOrGetter<string | undefined>;
     role?: MaybeRefOrGetter<FieldControlRole | undefined>;
     labelable?: MaybeRefOrGetter<boolean | undefined>;
+    requiredHint?: MaybeRefOrGetter<boolean | undefined>;
 }
 export declare function useFieldControl(options?: FieldControlOptions): {
     readonly field: FieldContext | null;
@@ -28,6 +31,7 @@ export declare function useFieldControl(options?: FieldControlOptions): {
     required: ComputedRef<boolean>;
     disabled: ComputedRef<boolean>;
     describedBy: ComputedRef<string | undefined>;
+    labelledBy: ComputedRef<string | undefined>;
     attrs: ComputedRef<{
         id: string | undefined;
         name: string | undefined;

package/dist/composables/useField.mjs

@@ -1,5 +1,6 @@
 import { computed, getCurrentScope, inject, onScopeDispose, toValue, watch } from "vue";
 import { FIELD_KEY, FIELD_ROLE_KEY } from "../internal/keys.mjs";
+import { joinIds } from "../internal/forms/control.mjs";
 export function useField() {
   return inject(FIELD_KEY, null);
 }
@@ -14,16 +15,18 @@ export function useFieldControl(options = {}) {
     () => Boolean(toValue(options.required) || field.value?.required.value)
   );
   const disabled = computed(() => Boolean(toValue(options.disabled) || parent?.disabled.value));
-  const describedBy = computed(() => {
-    const ids = [toValue(options.describedBy), field.value?.describedBy.value].filter(Boolean);
-    return ids.length ? ids.join(" ") : void 0;
-  });
+  const describedBy = computed(
+    () => joinIds(toValue(options.describedBy), field.value?.describedBy.value)
+  );
+  const labelledBy = computed(
+    () => field.value?.hasLabel?.value === false ? void 0 : field.value?.labelId
+  );
   const attrs = computed(() => ({
     id: id.value,
     name: field.value?.name.value,
     "aria-invalid": invalid.value ? "true" : void 0,
     "aria-describedby": describedBy.value,
-    "aria-required": required.value ? "true" : void 0,
+    "aria-required": required.value && !toValue(options.requiredHint) ? "true" : void 0,
     disabled: disabled.value || void 0
   }));
   const source = {};
@@ -35,9 +38,16 @@ export function useFieldControl(options = {}) {
         (labelable) => parent.setLabelable?.(labelable, source),
         { immediate: true }
       );
+    if (parent.setRequiredHint && options.requiredHint !== void 0)
+      watch(
+        () => auxiliary.value ? void 0 : toValue(options.requiredHint),
+        (hint) => parent.setRequiredHint?.(hint, source),
+        { immediate: true }
+      );
     onScopeDispose(() => {
       parent.setControlError(void 0, source);
       parent.setLabelable?.(void 0, source);
+      parent.setRequiredHint?.(void 0, source);
     });
   }
   return {
@@ -49,6 +59,7 @@ export function useFieldControl(options = {}) {
     required,
     disabled,
     describedBy,
+    labelledBy,
     attrs,
     auxiliary,
     setControlError