@xleddyl/443-components-vue 0.4.0 → 0.6.0

package/dist/components/templates/ListPage.vue

@@ -12,14 +12,14 @@
 
       <slot name="before" />
 
-      <Card v-if="error" class="k-list-state" padding="lg">
+      <Card v-if="error" class="k-list-state" padding="lg" role="alert">
          <slot name="error" :retry="() => emit('retry')">
             <EmptyState
                variant="plain"
                icon="exclamation-triangle"
                :title="errorText"
                :description="typeof error === 'string' ? error : void 0"
-               :level="2"
+               :level="childLevel"
             >
                <template #actions>
                   <Button
@@ -41,7 +41,7 @@
             :icon="emptyIcon"
             :title="emptyTitleText"
             :description="emptyDescription"
-            :level="2"
+            :level="childLevel"
          >
             <template v-if="$slots['empty-actions']" #actions>
                <slot name="empty-actions" />
@@ -123,7 +123,7 @@
                         icon="magnifying-glass"
                         :title="noResultsTitleText"
                         :description="isFiltered ? noResultsDescriptionText : void 0"
-                        :level="2"
+                        :level="childLevel"
                      >
                         <template v-if="isFiltered" #actions>
                            <Button size="sm" variant="soft" tone="neutral" @click="clearFilters">{{
@@ -153,12 +153,14 @@
          </template>
       </Card>
 
+      <LiveRegion :message="resultsMessage" />
+
       <slot />
    </div>
 </template>
 
 <script setup>
-import { computed, useSlots, watch } from "vue";
+import { computed, ref, useSlots, watch } from "vue";
 import { useLocale } from "../../composables/useLocale";
 import Button from "../core/Button.vue";
 import { createCollator, readCell, sortRows } from "../../internal/data/rows";
@@ -171,6 +173,7 @@ import Table from "../data/Table.vue";
 import EmptyState from "../feedback/EmptyState.vue";
 import Card from "../layout/Card.vue";
 import PageHeader from "../layout/PageHeader.vue";
+import LiveRegion from "../../internal/core/LiveRegion.vue";
 const props = defineProps({
   title: { type: String, required: false },
   description: { type: String, required: false },
@@ -208,7 +211,8 @@ const props = defineProps({
   clearLabel: { type: String, required: false },
   errorTitle: { type: String, required: false },
   retryLabel: { type: String, required: false },
-  selectedText: { type: Function, required: false }
+  selectedText: { type: Function, required: false },
+  resultsText: { type: Function, required: false }
 });
 const { locale, t } = useLocale();
 const searchPlaceholderText = computed(() => props.searchPlaceholder ?? t("common.search"));
@@ -222,6 +226,7 @@ const noResultsDescriptionText = computed(
 const clearText = computed(() => props.clearLabel ?? t("listPage.clearFilters"));
 const errorText = computed(() => props.errorTitle ?? t("common.somethingWentWrong"));
 const retryText = computed(() => props.retryLabel ?? t("common.retry"));
+const childLevel = computed(() => Math.min(props.level + 1, 6));
 function selectedLabel(count) {
   return props.selectedText ? props.selectedText(count) : t("common.selected", { count });
 }
@@ -294,9 +299,17 @@ function clearFilters() {
   filter.value = Array.isArray(filter.value) ? [] : null;
   emit("clear");
 }
+const interacted = ref(false);
 watch([search, filterValues], () => {
+  interacted.value = true;
   if (page.value !== 1) page.value = 1;
 });
+const resultsMessage = computed(() => {
+  if (props.loading || props.error || isFirstRun.value) return "";
+  const total = resultTotal.value;
+  if (!interacted.value && total > 0) return "";
+  return props.resultsText ? props.resultsText(total) : t("listPage.results", { count: total });
+});
 watch(resultTotal, (total) => {
   if (props.loading) return;
   const last = Math.max(1, Math.ceil(total / pageSize.value));

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 });
     });
   };
 }