@xleddyl/443-components-vue 0.4.0 → 0.6.0

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>

package/dist/internal/layout/NavGroup.vue.d.ts

@@ -0,0 +1,412 @@
+import type { NavItem } from '../../components/layout/types';
+declare var __VLS_11: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{
+    item: NavItem;
+    open: boolean;
+    rail: boolean;
+    childActive: boolean;
+    panelId: string;
+    key?: PropertyKey | undefined;
+    prefix?: string | undefined | undefined;
+    title?: string | undefined | undefined;
+    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;
+    'aria-hidden'?: (boolean | "true" | "false") | undefined;
+    onCopy?: ((payload: ClipboardEvent) => void) | undefined;
+    onCut?: ((payload: ClipboardEvent) => void) | undefined;
+    onPaste?: ((payload: ClipboardEvent) => void) | undefined;
+    onCompositionend?: ((payload: CompositionEvent) => void) | undefined;
+    onCompositionstart?: ((payload: CompositionEvent) => void) | undefined;
+    onCompositionupdate?: ((payload: CompositionEvent) => void) | undefined;
+    onDrag?: ((payload: DragEvent) => void) | undefined;
+    onDragend?: ((payload: DragEvent) => void) | undefined;
+    onDragenter?: ((payload: DragEvent) => void) | undefined;
+    onDragexit?: ((payload: DragEvent) => void) | undefined;
+    onDragleave?: ((payload: DragEvent) => void) | undefined;
+    onDragover?: ((payload: DragEvent) => void) | undefined;
+    onDragstart?: ((payload: DragEvent) => void) | undefined;
+    onDrop?: ((payload: DragEvent) => void) | undefined;
+    onFocus?: ((payload: FocusEvent) => void) | undefined;
+    onFocusin?: ((payload: FocusEvent) => void) | undefined;
+    onFocusout?: ((payload: FocusEvent) => void) | undefined;
+    onBlur?: ((payload: FocusEvent) => void) | undefined;
+    onChange?: ((payload: Event) => void) | undefined;
+    onBeforeinput?: ((payload: InputEvent) => void) | undefined;
+    onFormdata?: ((payload: FormDataEvent) => void) | undefined;
+    onInput?: ((payload: InputEvent) => void) | undefined;
+    onReset?: ((payload: Event) => void) | undefined;
+    onSubmit?: ((payload: SubmitEvent) => void) | undefined;
+    onInvalid?: ((payload: Event) => void) | undefined;
+    onFullscreenchange?: ((payload: Event) => void) | undefined;
+    onFullscreenerror?: ((payload: Event) => void) | undefined;
+    onLoad?: ((payload: Event) => void) | undefined;
+    onError?: ((payload: Event) => void) | undefined;
+    onKeydown?: ((payload: KeyboardEvent) => void) | undefined;
+    onKeypress?: ((payload: KeyboardEvent) => void) | undefined;
+    onKeyup?: ((payload: KeyboardEvent) => void) | undefined;
+    onDblclick?: ((payload: MouseEvent) => void) | undefined;
+    onMousedown?: ((payload: MouseEvent) => void) | undefined;
+    onMouseenter?: ((payload: MouseEvent) => void) | undefined;
+    onMouseleave?: ((payload: MouseEvent) => void) | undefined;
+    onMousemove?: ((payload: MouseEvent) => void) | undefined;
+    onMouseout?: ((payload: MouseEvent) => void) | undefined;
+    onMouseover?: ((payload: MouseEvent) => void) | undefined;
+    onMouseup?: ((payload: MouseEvent) => void) | undefined;
+    onAbort?: ((payload: UIEvent) => void) | undefined;
+    onCanplay?: ((payload: Event) => void) | undefined;
+    onCanplaythrough?: ((payload: Event) => void) | undefined;
+    onDurationchange?: ((payload: Event) => void) | undefined;
+    onEmptied?: ((payload: Event) => void) | undefined;
+    onEncrypted?: ((payload: MediaEncryptedEvent) => void) | undefined;
+    onEnded?: ((payload: Event) => void) | undefined;
+    onLoadeddata?: ((payload: Event) => void) | undefined;
+    onLoadedmetadata?: ((payload: Event) => void) | undefined;
+    onLoadstart?: ((payload: Event) => void) | undefined;
+    onPause?: ((payload: Event) => void) | undefined;
+    onPlay?: ((payload: Event) => void) | undefined;
+    onPlaying?: ((payload: Event) => void) | undefined;
+    onProgress?: ((payload: ProgressEvent<EventTarget>) => void) | undefined;
+    onRatechange?: ((payload: Event) => void) | undefined;
+    onSeeked?: ((payload: Event) => void) | undefined;
+    onSeeking?: ((payload: Event) => void) | undefined;
+    onStalled?: ((payload: Event) => void) | undefined;
+    onSuspend?: ((payload: Event) => void) | undefined;
+    onTimeupdate?: ((payload: Event) => void) | undefined;
+    onVolumechange?: ((payload: Event) => void) | undefined;
+    onWaiting?: ((payload: Event) => void) | undefined;
+    onSelect?: ((payload: Event) => void) | undefined;
+    onScroll?: ((payload: Event) => void) | undefined;
+    onScrollend?: ((payload: Event) => void) | undefined;
+    onTouchcancel?: ((payload: TouchEvent) => void) | undefined;
+    onTouchend?: ((payload: TouchEvent) => void) | undefined;
+    onTouchmove?: ((payload: TouchEvent) => void) | undefined;
+    onTouchstart?: ((payload: TouchEvent) => void) | undefined;
+    onAuxclick?: ((payload: PointerEvent) => void) | undefined;
+    onClick?: ((payload: PointerEvent) => void) | undefined;
+    onContextmenu?: ((payload: PointerEvent) => void) | undefined;
+    onGotpointercapture?: ((payload: PointerEvent) => void) | undefined;
+    onLostpointercapture?: ((payload: PointerEvent) => void) | undefined;
+    onPointerdown?: ((payload: PointerEvent) => void) | undefined;
+    onPointermove?: ((payload: PointerEvent) => void) | undefined;
+    onPointerup?: ((payload: PointerEvent) => void) | undefined;
+    onPointercancel?: ((payload: PointerEvent) => void) | undefined;
+    onPointerenter?: ((payload: PointerEvent) => void) | undefined;
+    onPointerleave?: ((payload: PointerEvent) => void) | undefined;
+    onPointerover?: ((payload: PointerEvent) => void) | undefined;
+    onPointerout?: ((payload: PointerEvent) => void) | undefined;
+    onBeforetoggle?: ((payload: ToggleEvent) => void) | undefined;
+    onWheel?: ((payload: WheelEvent) => void) | undefined;
+    onAnimationcancel?: ((payload: AnimationEvent) => void) | undefined;
+    onAnimationstart?: ((payload: AnimationEvent) => void) | undefined;
+    onAnimationend?: ((payload: AnimationEvent) => void) | undefined;
+    onAnimationiteration?: ((payload: AnimationEvent) => void) | undefined;
+    onSecuritypolicyviolation?: ((payload: SecurityPolicyViolationEvent) => void) | undefined;
+    onTransitioncancel?: ((payload: TransitionEvent) => void) | undefined;
+    onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
+    onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
+    onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
+    innerHTML?: string | undefined | undefined;
+    color?: string | undefined | undefined;
+    id?: string | undefined | undefined;
+    lang?: string | undefined | undefined;
+    tabindex?: (string | number) | undefined;
+    'aria-activedescendant'?: string | undefined | undefined;
+    'aria-atomic'?: (boolean | "true" | "false") | undefined;
+    'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined | undefined;
+    'aria-busy'?: (boolean | "true" | "false") | undefined;
+    'aria-checked'?: (boolean | "true" | "false") | "mixed" | undefined;
+    'aria-colcount'?: (string | number) | undefined;
+    'aria-colindex'?: (string | number) | undefined;
+    'aria-colspan'?: (string | number) | undefined;
+    'aria-controls'?: string | undefined | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
+    'aria-describedby'?: string | undefined | undefined;
+    'aria-details'?: string | undefined | undefined;
+    'aria-disabled'?: (boolean | "true" | "false") | undefined;
+    'aria-dropeffect'?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+    'aria-errormessage'?: string | undefined | undefined;
+    'aria-expanded'?: (boolean | "true" | "false") | undefined;
+    'aria-flowto'?: string | undefined | undefined;
+    'aria-grabbed'?: (boolean | "true" | "false") | undefined;
+    'aria-haspopup'?: "grid" | "tree" | "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | undefined;
+    'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
+    'aria-keyshortcuts'?: string | undefined | undefined;
+    'aria-labelledby'?: string | undefined | undefined;
+    'aria-level'?: (string | number) | undefined;
+    'aria-live'?: "off" | "assertive" | "polite" | undefined | undefined;
+    'aria-modal'?: (boolean | "true" | "false") | undefined;
+    'aria-multiline'?: (boolean | "true" | "false") | undefined;
+    'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
+    'aria-orientation'?: "horizontal" | "vertical" | undefined | undefined;
+    'aria-owns'?: string | undefined | undefined;
+    'aria-placeholder'?: string | undefined | undefined;
+    'aria-posinset'?: (string | number) | undefined;
+    'aria-pressed'?: (boolean | "true" | "false") | "mixed" | undefined;
+    'aria-readonly'?: (boolean | "true" | "false") | undefined;
+    'aria-relevant'?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+    'aria-required'?: (boolean | "true" | "false") | undefined;
+    'aria-roledescription'?: string | undefined | undefined;
+    'aria-rowcount'?: (string | number) | undefined;
+    'aria-rowindex'?: (string | number) | undefined;
+    'aria-rowspan'?: (string | number) | undefined;
+    'aria-selected'?: (boolean | "true" | "false") | undefined;
+    'aria-setsize'?: (string | number) | undefined;
+    'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+    'aria-valuemax'?: (string | number) | undefined;
+    'aria-valuemin'?: (string | number) | undefined;
+    'aria-valuenow'?: (string | number) | undefined;
+    'aria-valuetext'?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
+    ref_for?: boolean | undefined | undefined;
+    ref_key?: string | undefined | undefined;
+    accesskey?: string | undefined | undefined;
+    contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contextmenu?: 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;
+    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
+    inert?: (boolean | "true" | "false") | undefined;
+    spellcheck?: (boolean | "true" | "false") | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
+    radiogroup?: string | undefined | undefined;
+    about?: string | undefined | undefined;
+    datatype?: string | undefined | undefined;
+    inlist?: any;
+    property?: string | undefined | undefined;
+    resource?: string | undefined | undefined;
+    typeof?: string | undefined | undefined;
+    vocab?: string | undefined | undefined;
+    autocapitalize?: string | undefined | undefined;
+    autocorrect?: string | undefined | undefined;
+    autosave?: string | undefined | undefined;
+    itemprop?: string | undefined | undefined;
+    itemscope?: (boolean | "true" | "false") | undefined;
+    itemtype?: string | undefined | undefined;
+    itemid?: string | undefined | undefined;
+    itemref?: string | undefined | undefined;
+    security?: string | undefined | undefined;
+    unselectable?: "on" | "off" | undefined | undefined;
+    inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+    is?: string | undefined | undefined;
+    exportparts?: string | undefined;
+    part?: string | undefined;
+    popover?: (import("../../index.ts").PopoverMode | "" | boolean) | undefined;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: () => any;
+}, string, import("vue").PublicProps, Readonly<{
+    item: NavItem;
+    open: boolean;
+    rail: boolean;
+    childActive: boolean;
+    panelId: string;
+    key?: PropertyKey | undefined;
+    prefix?: string | undefined | undefined;
+    title?: string | undefined | undefined;
+    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;
+    'aria-hidden'?: (boolean | "true" | "false") | undefined;
+    onCopy?: ((payload: ClipboardEvent) => void) | undefined;
+    onCut?: ((payload: ClipboardEvent) => void) | undefined;
+    onPaste?: ((payload: ClipboardEvent) => void) | undefined;
+    onCompositionend?: ((payload: CompositionEvent) => void) | undefined;
+    onCompositionstart?: ((payload: CompositionEvent) => void) | undefined;
+    onCompositionupdate?: ((payload: CompositionEvent) => void) | undefined;
+    onDrag?: ((payload: DragEvent) => void) | undefined;
+    onDragend?: ((payload: DragEvent) => void) | undefined;
+    onDragenter?: ((payload: DragEvent) => void) | undefined;
+    onDragexit?: ((payload: DragEvent) => void) | undefined;
+    onDragleave?: ((payload: DragEvent) => void) | undefined;
+    onDragover?: ((payload: DragEvent) => void) | undefined;
+    onDragstart?: ((payload: DragEvent) => void) | undefined;
+    onDrop?: ((payload: DragEvent) => void) | undefined;
+    onFocus?: ((payload: FocusEvent) => void) | undefined;
+    onFocusin?: ((payload: FocusEvent) => void) | undefined;
+    onFocusout?: ((payload: FocusEvent) => void) | undefined;
+    onBlur?: ((payload: FocusEvent) => void) | undefined;
+    onChange?: ((payload: Event) => void) | undefined;
+    onBeforeinput?: ((payload: InputEvent) => void) | undefined;
+    onFormdata?: ((payload: FormDataEvent) => void) | undefined;
+    onInput?: ((payload: InputEvent) => void) | undefined;
+    onReset?: ((payload: Event) => void) | undefined;
+    onSubmit?: ((payload: SubmitEvent) => void) | undefined;
+    onInvalid?: ((payload: Event) => void) | undefined;
+    onFullscreenchange?: ((payload: Event) => void) | undefined;
+    onFullscreenerror?: ((payload: Event) => void) | undefined;
+    onLoad?: ((payload: Event) => void) | undefined;
+    onError?: ((payload: Event) => void) | undefined;
+    onKeydown?: ((payload: KeyboardEvent) => void) | undefined;
+    onKeypress?: ((payload: KeyboardEvent) => void) | undefined;
+    onKeyup?: ((payload: KeyboardEvent) => void) | undefined;
+    onDblclick?: ((payload: MouseEvent) => void) | undefined;
+    onMousedown?: ((payload: MouseEvent) => void) | undefined;
+    onMouseenter?: ((payload: MouseEvent) => void) | undefined;
+    onMouseleave?: ((payload: MouseEvent) => void) | undefined;
+    onMousemove?: ((payload: MouseEvent) => void) | undefined;
+    onMouseout?: ((payload: MouseEvent) => void) | undefined;
+    onMouseover?: ((payload: MouseEvent) => void) | undefined;
+    onMouseup?: ((payload: MouseEvent) => void) | undefined;
+    onAbort?: ((payload: UIEvent) => void) | undefined;
+    onCanplay?: ((payload: Event) => void) | undefined;
+    onCanplaythrough?: ((payload: Event) => void) | undefined;
+    onDurationchange?: ((payload: Event) => void) | undefined;
+    onEmptied?: ((payload: Event) => void) | undefined;
+    onEncrypted?: ((payload: MediaEncryptedEvent) => void) | undefined;
+    onEnded?: ((payload: Event) => void) | undefined;
+    onLoadeddata?: ((payload: Event) => void) | undefined;
+    onLoadedmetadata?: ((payload: Event) => void) | undefined;
+    onLoadstart?: ((payload: Event) => void) | undefined;
+    onPause?: ((payload: Event) => void) | undefined;
+    onPlay?: ((payload: Event) => void) | undefined;
+    onPlaying?: ((payload: Event) => void) | undefined;
+    onProgress?: ((payload: ProgressEvent<EventTarget>) => void) | undefined;
+    onRatechange?: ((payload: Event) => void) | undefined;
+    onSeeked?: ((payload: Event) => void) | undefined;
+    onSeeking?: ((payload: Event) => void) | undefined;
+    onStalled?: ((payload: Event) => void) | undefined;
+    onSuspend?: ((payload: Event) => void) | undefined;
+    onTimeupdate?: ((payload: Event) => void) | undefined;
+    onVolumechange?: ((payload: Event) => void) | undefined;
+    onWaiting?: ((payload: Event) => void) | undefined;
+    onSelect?: ((payload: Event) => void) | undefined;
+    onScroll?: ((payload: Event) => void) | undefined;
+    onScrollend?: ((payload: Event) => void) | undefined;
+    onTouchcancel?: ((payload: TouchEvent) => void) | undefined;
+    onTouchend?: ((payload: TouchEvent) => void) | undefined;
+    onTouchmove?: ((payload: TouchEvent) => void) | undefined;
+    onTouchstart?: ((payload: TouchEvent) => void) | undefined;
+    onAuxclick?: ((payload: PointerEvent) => void) | undefined;
+    onClick?: ((payload: PointerEvent) => void) | undefined;
+    onContextmenu?: ((payload: PointerEvent) => void) | undefined;
+    onGotpointercapture?: ((payload: PointerEvent) => void) | undefined;
+    onLostpointercapture?: ((payload: PointerEvent) => void) | undefined;
+    onPointerdown?: ((payload: PointerEvent) => void) | undefined;
+    onPointermove?: ((payload: PointerEvent) => void) | undefined;
+    onPointerup?: ((payload: PointerEvent) => void) | undefined;
+    onPointercancel?: ((payload: PointerEvent) => void) | undefined;
+    onPointerenter?: ((payload: PointerEvent) => void) | undefined;
+    onPointerleave?: ((payload: PointerEvent) => void) | undefined;
+    onPointerover?: ((payload: PointerEvent) => void) | undefined;
+    onPointerout?: ((payload: PointerEvent) => void) | undefined;
+    onBeforetoggle?: ((payload: ToggleEvent) => void) | undefined;
+    onWheel?: ((payload: WheelEvent) => void) | undefined;
+    onAnimationcancel?: ((payload: AnimationEvent) => void) | undefined;
+    onAnimationstart?: ((payload: AnimationEvent) => void) | undefined;
+    onAnimationend?: ((payload: AnimationEvent) => void) | undefined;
+    onAnimationiteration?: ((payload: AnimationEvent) => void) | undefined;
+    onSecuritypolicyviolation?: ((payload: SecurityPolicyViolationEvent) => void) | undefined;
+    onTransitioncancel?: ((payload: TransitionEvent) => void) | undefined;
+    onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
+    onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
+    onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
+    innerHTML?: string | undefined | undefined;
+    color?: string | undefined | undefined;
+    id?: string | undefined | undefined;
+    lang?: string | undefined | undefined;
+    tabindex?: (string | number) | undefined;
+    'aria-activedescendant'?: string | undefined | undefined;
+    'aria-atomic'?: (boolean | "true" | "false") | undefined;
+    'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined | undefined;
+    'aria-busy'?: (boolean | "true" | "false") | undefined;
+    'aria-checked'?: (boolean | "true" | "false") | "mixed" | undefined;
+    'aria-colcount'?: (string | number) | undefined;
+    'aria-colindex'?: (string | number) | undefined;
+    'aria-colspan'?: (string | number) | undefined;
+    'aria-controls'?: string | undefined | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
+    'aria-describedby'?: string | undefined | undefined;
+    'aria-details'?: string | undefined | undefined;
+    'aria-disabled'?: (boolean | "true" | "false") | undefined;
+    'aria-dropeffect'?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+    'aria-errormessage'?: string | undefined | undefined;
+    'aria-expanded'?: (boolean | "true" | "false") | undefined;
+    'aria-flowto'?: string | undefined | undefined;
+    'aria-grabbed'?: (boolean | "true" | "false") | undefined;
+    'aria-haspopup'?: "grid" | "tree" | "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | undefined;
+    'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
+    'aria-keyshortcuts'?: string | undefined | undefined;
+    'aria-labelledby'?: string | undefined | undefined;
+    'aria-level'?: (string | number) | undefined;
+    'aria-live'?: "off" | "assertive" | "polite" | undefined | undefined;
+    'aria-modal'?: (boolean | "true" | "false") | undefined;
+    'aria-multiline'?: (boolean | "true" | "false") | undefined;
+    'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
+    'aria-orientation'?: "horizontal" | "vertical" | undefined | undefined;
+    'aria-owns'?: string | undefined | undefined;
+    'aria-placeholder'?: string | undefined | undefined;
+    'aria-posinset'?: (string | number) | undefined;
+    'aria-pressed'?: (boolean | "true" | "false") | "mixed" | undefined;
+    'aria-readonly'?: (boolean | "true" | "false") | undefined;
+    'aria-relevant'?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+    'aria-required'?: (boolean | "true" | "false") | undefined;
+    'aria-roledescription'?: string | undefined | undefined;
+    'aria-rowcount'?: (string | number) | undefined;
+    'aria-rowindex'?: (string | number) | undefined;
+    'aria-rowspan'?: (string | number) | undefined;
+    'aria-selected'?: (boolean | "true" | "false") | undefined;
+    'aria-setsize'?: (string | number) | undefined;
+    'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+    'aria-valuemax'?: (string | number) | undefined;
+    'aria-valuemin'?: (string | number) | undefined;
+    'aria-valuenow'?: (string | number) | undefined;
+    'aria-valuetext'?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
+    ref_for?: boolean | undefined | undefined;
+    ref_key?: string | undefined | undefined;
+    accesskey?: string | undefined | undefined;
+    contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contextmenu?: 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;
+    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
+    inert?: (boolean | "true" | "false") | undefined;
+    spellcheck?: (boolean | "true" | "false") | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
+    radiogroup?: string | undefined | undefined;
+    about?: string | undefined | undefined;
+    datatype?: string | undefined | undefined;
+    inlist?: any;
+    property?: string | undefined | undefined;
+    resource?: string | undefined | undefined;
+    typeof?: string | undefined | undefined;
+    vocab?: string | undefined | undefined;
+    autocapitalize?: string | undefined | undefined;
+    autocorrect?: string | undefined | undefined;
+    autosave?: string | undefined | undefined;
+    itemprop?: string | undefined | undefined;
+    itemscope?: (boolean | "true" | "false") | undefined;
+    itemtype?: string | undefined | undefined;
+    itemid?: string | undefined | undefined;
+    itemref?: string | undefined | undefined;
+    security?: string | undefined | undefined;
+    unselectable?: "on" | "off" | undefined | undefined;
+    inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+    is?: string | undefined | undefined;
+    exportparts?: string | undefined;
+    part?: string | undefined;
+    popover?: (import("../../index.ts").PopoverMode | "" | boolean) | undefined;
+}> & Readonly<{
+    onToggle?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/internal/layout/route.mjs

@@ -29,6 +29,6 @@ export function matchesPath(current, target, exact) {
   const from = normalize(current);
   const to = normalize(target);
   if (from === to) return true;
-  if (exact) return false;
+  if (exact || !to) return false;
   return from.startsWith(to === "/" ? "/" : `${to}/`) && to !== "/";
 }

package/dist/internal/overlays/DialogFrame.vue

@@ -2,7 +2,8 @@
    <dialog
       ref="dialogRef"
       :class="[prefix, rootClass]"
-      :aria-labelledby="hasTitle ? titleId : void 0"
+      :aria-labelledby="labelledBy"
+      :aria-label="labelledBy ? void 0 : label"
       :aria-describedby="hasDescription ? descriptionId : void 0"
       :closedby="dismissible ? 'closerequest' : 'none'"
       @cancel="onCancel"
@@ -12,7 +13,15 @@
    >
       <div v-if="present" ref="panelRef" :class="`${prefix}-panel`" tabindex="-1">
          <header v-if="hasHeader" :class="`${prefix}-header`">
-            <slot name="header" :close="close" :title-id="titleId" :description-id="descriptionId">
+            <div v-if="slots.header" :id="headerId" class="k-dialog-header-slot">
+               <slot
+                  name="header"
+                  :close="close"
+                  :title-id="titleId"
+                  :description-id="descriptionId"
+               />
+            </div>
+            <template v-else>
                <div :class="`${prefix}-heading`">
                   <div v-if="slots['title-trailing']" :class="`${prefix}-title-row`">
                      <h2 v-if="hasTitle" :id="titleId" :class="`${prefix}-title`">
@@ -27,7 +36,7 @@
                      <slot name="description">{{ description }}</slot>
                   </p>
                </div>
-            </slot>
+            </template>
             <div v-if="$slots.actions || showClose" :class="`${prefix}-actions`">
                <slot name="actions" :close="close" />
                <Button
@@ -43,8 +52,18 @@
                />
             </div>
          </header>
-         <div :class="[`${prefix}-body`, { 'is-flush': flush }]">
-            <slot :close="close" />
+         <div
+            ref="bodyRef"
+            :class="[
+  `${prefix}-body`,
+  {
+    'is-flush': flush,
+    'is-overflow-top': overflowTop,
+    'is-overflow-bottom': overflowBottom
+  }
+]"
+         >
+            <slot :close="close" :title-id="labelledBy ?? titleId" />
          </div>
          <footer v-if="$slots.footer" :class="`${prefix}-footer`">
             <slot name="footer" :close="close" />
@@ -54,16 +73,19 @@
 </template>
 
 <script setup>
-import { computed, useId, useTemplateRef } from "vue";
+import { computed, nextTick, ref, useAttrs, useId, useTemplateRef, warn, watch } from "vue";
 import Button from "../../components/core/Button.vue";
 import { useLocale } from "../../composables/useLocale";
 import { provideFieldBoundary } from "../../composables/useFieldBoundary";
+import { useScrollEdges } from "../core/scroll-edges";
 import { useModalDialog } from "./dialog";
+import { hasNameAttrs } from "../forms/name";
 const props = defineProps({
   prefix: { type: String, required: true },
   rootClass: { type: null, required: true },
   title: { type: String, required: false },
   description: { type: String, required: false },
+  label: { type: String, required: false },
   dismissible: { type: Boolean, required: true },
   hideClose: { type: Boolean, required: false },
   closeLabel: { type: String, required: false },
@@ -80,10 +102,26 @@ const open = defineModel("open", { type: Boolean, ...{ required: true } });
 const baseId = useId();
 const titleId = `${baseId}-title`;
 const descriptionId = `${baseId}-description`;
+const headerId = `${baseId}-header`;
 const dialogRef = useTemplateRef("dialogRef");
 const panelRef = useTemplateRef("panelRef");
+const bodyRef = useTemplateRef("bodyRef");
+const { overflowTop, overflowBottom } = useScrollEdges(() => bodyRef.value);
 const hasTitle = computed(() => Boolean(props.title || slots.title));
 const hasDescription = computed(() => Boolean(props.description || slots.description));
+const headerTitled = ref(false);
+const labelledBy = computed(() => {
+  if (slots.header) return headerTitled.value ? titleId : headerId;
+  return hasTitle.value ? titleId : void 0;
+});
+const attrs = useAttrs();
+watch(open, (value) => {
+  if (!value || labelledBy.value || props.label) return;
+  if (hasNameAttrs(attrs)) return;
+  warn(
+    `[@xleddyl/443-components-vue] ${props.prefix === "k-modal" ? "Modal" : "Drawer"} needs a title, a #header slot or a label to name the dialog.`
+  );
+});
 const showClose = computed(() => props.dismissible && !props.hideClose);
 const hasHeader = computed(
   () => Boolean(
@@ -104,5 +142,14 @@ function close() {
   if (props.loading) return Promise.resolve(false);
   return requestClose("action");
 }
+watch(present, async (value) => {
+  if (!value || !slots.header) return;
+  await nextTick();
+  headerTitled.value = Boolean(
+    [...panelRef.value?.querySelectorAll("[id]") ?? []].some(
+      (element) => element.id === titleId
+    )
+  );
+});
 defineExpose({ close, el: dialogRef });
 </script>