@xleddyl/443-components-vue 0.5.0 → 0.6.2

package/dist/components/layout/AppShell.vue

@@ -11,9 +11,31 @@
 }"
       @keydown.esc="onEscape"
    >
-      <a class="k-shell-skip k-visually-hidden-focusable" :href="`#${mainId}`">{{ skipText }}</a>
+      <a
+         class="k-shell-skip k-visually-hidden-focusable"
+         :href="`#${mainId}`"
+         :inert="drawer ? true : void 0"
+         >{{ skipText }}</a
+      >
       <div class="k-shell-scrim" aria-hidden="true" @click="closeNav({ restoreFocus: true })" />
-      <aside :id="sidebarId" ref="sidebar" class="k-shell-sidebar" :aria-label="sidebarText">
+      <div
+         :id="sidebarId"
+         ref="sidebar"
+         class="k-shell-sidebar"
+         :role="drawer ? 'dialog' : void 0"
+         :aria-modal="drawer ? 'true' : void 0"
+         :aria-label="drawer ? sidebarText : void 0"
+      >
+         <Button
+            v-if="drawer"
+            class="k-shell-close k-shell-mobile-only"
+            variant="ghost"
+            tone="neutral"
+            size="sm"
+            icon="x-mark"
+            :aria-label="closeText"
+            @click="closeNav({ restoreFocus: true })"
+         />
          <slot
             name="sidebar"
             :collapsed="collapsed"
@@ -21,8 +43,8 @@
             :toggle-collapsed="toggleCollapsed"
             :close-nav="closeNav"
          />
-      </aside>
-      <div class="k-shell-body" :inert="open && mobile ? true : void 0">
+      </div>
+      <div class="k-shell-body" :inert="drawer ? true : void 0">
          <header class="k-shell-topbar" :class="{ 'is-mobile-only': !showTopbar }">
             <Button
                ref="menuButton"
@@ -49,10 +71,10 @@
 </template>
 
 <script setup>
+import { useResizeObserver } from "../../internal/core/resize";
 import {
   computed,
   nextTick,
-  onBeforeUnmount,
   onMounted,
   provide,
   ref,
@@ -66,11 +88,12 @@ import { useLocale } from "../../composables/useLocale";
 import { SHELL_KEY } from "../../internal/layout/keys";
 import { usePersistedBoolean } from "../../internal/layout/persist";
 import Button from "../core/Button.vue";
-import { focusFirst } from "../../internal/overlays/focus";
+import { focusFirst } from "../../internal/core/focus";
 const props = defineProps({
   variant: { type: String, required: false, default: "inset" },
   sidebarLabel: { type: String, required: false },
   menuLabel: { type: String, required: false },
+  closeLabel: { type: String, required: false },
   skipLabel: { type: String, required: false },
   fluid: { type: Boolean, required: false },
   topbar: { type: Boolean, required: false, default: void 0 },
@@ -79,7 +102,8 @@ const props = defineProps({
   viewTransition: { type: Boolean, required: false }
 });
 const { t } = useLocale();
-const sidebarText = computed(() => props.sidebarLabel ?? t("shell.sidebar"));
+const sidebarText = computed(() => props.sidebarLabel ?? t("shell.navigation"));
+const closeText = computed(() => props.closeLabel ?? t("shell.closeNavigation"));
 const menuText = computed(() => props.menuLabel ?? t("shell.openNavigation"));
 const skipText = computed(() => props.skipLabel ?? t("shell.skipToContent"));
 const collapsedModel = defineModel("collapsed", { type: Boolean, ...{ default: false } });
@@ -88,6 +112,7 @@ const MOBILE_BREAKPOINT = 768;
 const slots = useSlots();
 const collapsed = usePersistedBoolean(collapsedModel.value, props.storageKey);
 const mobile = ref(false);
+const drawer = computed(() => open.value && mobile.value);
 watch(collapsedModel, (value) => collapsed.value = value);
 watch(
   collapsed,
@@ -133,28 +158,25 @@ useHotkey(() => props.shortcut ? [props.shortcut] : [], toggle, {
   enabled: () => Boolean(props.shortcut),
   allowInInputs: false
 });
-let observer;
 function measure(width) {
   mobile.value = width > 0 && width < MOBILE_BREAKPOINT;
   if (!mobile.value && open.value) open.value = false;
 }
 onMounted(() => {
-  const element = shell.value;
-  if (!element) return;
-  measure(element.clientWidth);
-  if (typeof ResizeObserver === "undefined") return;
-  observer = new ResizeObserver((entries) => {
-    const entry = entries[0];
-    if (entry) measure(entry.contentRect.width);
-  });
-  observer.observe(element);
+  if (shell.value) measure(shell.value.clientWidth);
 });
-onBeforeUnmount(() => observer?.disconnect());
+useResizeObserver(
+  () => [shell.value],
+  ([entry]) => {
+    if (entry) measure(entry.contentRect.width);
+  }
+);
 watch(open, (value) => {
   if (!value) return;
   nextTick(() => focusFirst(sidebar.value));
 });
 provide(SHELL_KEY, {
+  sidebarId,
   collapsed,
   open,
   mobile,

package/dist/components/layout/AppShell.vue.d.ts

@@ -6,29 +6,30 @@ declare function closeNav(options?: {
     focusMain?: boolean;
 }): void;
 declare function toggle(): void;
-declare var __VLS_1: {
+declare var __VLS_8: {
     collapsed: boolean;
     mobile: boolean;
     toggleCollapsed: typeof toggleCollapsed;
     closeNav: typeof closeNav;
-}, __VLS_10: {
+}, __VLS_17: {
     openNav: typeof openNav;
     mobile: boolean;
     collapsed: boolean;
-}, __VLS_12: {}, __VLS_14: {};
+}, __VLS_19: {}, __VLS_21: {};
 type __VLS_Slots = {} & {
-    sidebar?: (props: typeof __VLS_1) => any;
+    sidebar?: (props: typeof __VLS_8) => any;
 } & {
-    topbar?: (props: typeof __VLS_10) => any;
+    topbar?: (props: typeof __VLS_17) => any;
 } & {
-    default?: (props: typeof __VLS_12) => any;
+    default?: (props: typeof __VLS_19) => any;
 } & {
-    overlays?: (props: typeof __VLS_14) => any;
+    overlays?: (props: typeof __VLS_21) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{
     variant?: AppShellVariant;
     sidebarLabel?: string;
     menuLabel?: string;
+    closeLabel?: string;
     skipLabel?: string;
     fluid?: boolean;
     topbar?: boolean;
@@ -43,6 +44,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;
@@ -198,7 +200,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;
@@ -241,6 +242,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     variant?: AppShellVariant;
     sidebarLabel?: string;
     menuLabel?: string;
+    closeLabel?: string;
     skipLabel?: string;
     fluid?: boolean;
     topbar?: boolean;
@@ -255,6 +257,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;
@@ -410,7 +413,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/layout/Card.vue

@@ -2,7 +2,7 @@
    <Polymorphic
       :as="as"
       v-bind="$attrs"
-      :bind="selectionAttrs"
+      :bind="rootAttrs"
       class="k-card"
       :class="[
   `k-card-${variant}`,
@@ -15,40 +15,62 @@
   }
 ]"
    >
-      <header v-if="hasHeader" class="k-card-header">
+      <component :is="plain ? 'span' : 'div'" v-if="hasHeader" :id="headerId" class="k-card-header">
          <slot name="header">
             <span v-if="icon || $slots.icon" class="k-card-icon" aria-hidden="true">
                <slot name="icon"><Icon v-if="icon" :name="icon" /></slot>
             </span>
-            <div class="k-card-heading">
-               <component :is="`h${level}`" v-if="title || $slots.title" class="k-card-title">
+            <component :is="plain ? 'span' : 'div'" class="k-card-heading">
+               <component
+                  :is="plain ? 'span' : `h${level}`"
+                  v-if="title || $slots.title"
+                  class="k-card-title"
+               >
                   <component :is="link.is" v-if="link" v-bind="link.attrs" class="k-card-link">
                      <slot name="title">{{ title }}</slot>
                   </component>
                   <slot v-else name="title">{{ title }}</slot>
                </component>
-               <p v-if="description || $slots.description" class="k-card-description">
+               <component
+                  :is="plain ? 'span' : 'p'"
+                  v-if="description || $slots.description"
+                  class="k-card-description"
+               >
                   <slot name="description">{{ description }}</slot>
-               </p>
-            </div>
+               </component>
+            </component>
          </slot>
-         <div v-if="$slots.actions" class="k-card-actions">
+         <component :is="plain ? 'span' : 'div'" v-if="$slots.actions" class="k-card-actions">
             <slot name="actions" />
-         </div>
-      </header>
-      <div v-if="$slots.default" class="k-card-body">
+         </component>
+      </component>
+      <component
+         :is="plain ? 'span' : 'div'"
+         v-if="$slots.default"
+         :id="bodyId"
+         class="k-card-body"
+      >
          <slot />
-      </div>
-      <footer v-if="$slots.footer" class="k-card-footer">
+      </component>
+      <component :is="plain ? 'span' : 'div'" v-if="$slots.footer" class="k-card-footer">
          <slot name="footer" />
-      </footer>
+      </component>
+      <component
+         :is="link.is"
+         v-if="link && !hasTitle"
+         v-bind="link.attrs"
+         class="k-card-link k-card-link-overlay"
+         :aria-label="label"
+         :aria-labelledby="label ? void 0 : overlayLabelledBy"
+      />
    </Polymorphic>
 </template>
 
 <script setup>
 import { useLinkResolver } from "../../internal/core/link";
 import { Polymorphic } from "../../internal/core/Polymorphic";
-import { computed, useAttrs, useSlots } from "vue";
+import { computed, useAttrs, useId, useSlots } from "vue";
+import { joinIds } from "../../internal/forms/control";
 import Icon from "../core/Icon.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -64,7 +86,8 @@ const props = defineProps({
   target: { type: String, required: false },
   disabled: { type: Boolean, required: false },
   selected: { type: Boolean, required: false, default: void 0 },
-  animated: { type: Boolean, required: false, default: true }
+  animated: { type: Boolean, required: false, default: true },
+  label: { type: String, required: false }
 });
 const SELECTABLE_ROLES = /* @__PURE__ */ new Set(["option", "tab", "gridcell", "row", "treeitem"]);
 const slots = useSlots();
@@ -78,6 +101,17 @@ const { resolveLink } = useLinkResolver();
 const link = computed(() => props.disabled ? null : resolveLink(props));
 const isLink = computed(() => link.value !== null);
 const isInteractive = computed(() => isLink.value || props.as === "button");
+const plain = computed(() => props.as === "button" || attrs.role === "button");
+const hasTitle = computed(() => Boolean(props.title || slots.title));
+const headerId = useId();
+const bodyId = useId();
+const overlayLabelledBy = computed(
+  () => joinIds(hasHeader.value && headerId, slots.default && bodyId)
+);
+const rootAttrs = computed(() => ({
+  ...selectionAttrs.value,
+  ...props.as === "button" ? { type: "button", disabled: props.disabled || void 0 } : {}
+}));
 const selectionAttrs = computed(() => {
   if (props.selected === void 0) return void 0;
   const state = props.selected ? "true" : "false";

package/dist/components/layout/Card.vue.d.ts

@@ -1,23 +1,23 @@
 import type { IconName } from '../../composables/useIcons';
 import type { CardPadding, CardVariant, HeadingLevel } from './types';
 import type { LinkTarget } from '../core/types';
-declare var __VLS_7: {}, __VLS_9: {}, __VLS_28: {}, __VLS_30: {}, __VLS_32: {}, __VLS_34: {}, __VLS_36: {}, __VLS_38: {};
+declare var __VLS_13: {}, __VLS_15: {}, __VLS_40: {}, __VLS_42: {}, __VLS_50: {}, __VLS_58: {}, __VLS_66: {}, __VLS_74: {};
 type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_7) => any;
+    header?: (props: typeof __VLS_13) => any;
 } & {
-    icon?: (props: typeof __VLS_9) => any;
+    icon?: (props: typeof __VLS_15) => any;
 } & {
-    title?: (props: typeof __VLS_28) => any;
+    title?: (props: typeof __VLS_40) => any;
 } & {
-    title?: (props: typeof __VLS_30) => any;
+    title?: (props: typeof __VLS_42) => any;
 } & {
-    description?: (props: typeof __VLS_32) => any;
+    description?: (props: typeof __VLS_50) => any;
 } & {
-    actions?: (props: typeof __VLS_34) => any;
+    actions?: (props: typeof __VLS_58) => any;
 } & {
-    default?: (props: typeof __VLS_36) => any;
+    default?: (props: typeof __VLS_66) => any;
 } & {
-    footer?: (props: typeof __VLS_38) => any;
+    footer?: (props: typeof __VLS_74) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{
     title?: string | undefined;
@@ -33,6 +33,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     disabled?: boolean;
     selected?: boolean;
     animated?: boolean;
+    label?: string;
     inlist?: any;
     download?: any;
     key?: PropertyKey | undefined;
@@ -41,6 +42,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     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;
@@ -198,7 +200,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"];
@@ -252,6 +253,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     disabled?: boolean;
     selected?: boolean;
     animated?: boolean;
+    label?: string;
     inlist?: any;
     download?: any;
     key?: PropertyKey | undefined;
@@ -260,6 +262,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     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;
@@ -417,7 +420,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/layout/CopyButton.vue

@@ -8,7 +8,7 @@
          :square="!showLabel"
          :disabled="disabled"
          :class="{ 'is-copied': copied }"
-         :aria-label="showLabel ? void 0 : copied ? copiedText : copyText"
+         :aria-label="showLabel ? void 0 : copyText"
          :title="showLabel ? void 0 : copyText"
          @click="onCopy"
       >
@@ -16,18 +16,24 @@
             <Icon name="clipboard" class="k-copy-icon is-idle" />
             <Icon name="check" class="k-copy-icon is-done" />
          </span>
-         <span v-if="showLabel" class="k-copy-label">{{ copied ? copiedText : copyText }}</span>
+         <template v-if="showLabel">
+            <span class="k-copy-label" aria-hidden="true">{{
+               copied ? copiedText : copyText
+            }}</span>
+            <span class="k-visually-hidden">{{ copyText }}</span>
+         </template>
       </Button>
-      <span class="k-visually-hidden" role="status">{{ copied ? copiedText : "" }}</span>
+      <LiveRegion :message="message" />
    </span>
 </template>
 
 <script setup>
 import { computed } from "vue";
-import { useCopy } from "../../composables/useCopy";
+import { useAnnouncedCopy } from "../../internal/core/copy";
 import { useLocale } from "../../composables/useLocale";
 import Button from "../core/Button.vue";
 import Icon from "../core/Icon.vue";
+import LiveRegion from "../../internal/core/LiveRegion.vue";
 const props = defineProps({
   value: { type: String, required: true },
   label: { type: String, required: false },
@@ -43,7 +49,9 @@ const emit = defineEmits(["copy"]);
 const { t } = useLocale();
 const copyText = computed(() => props.label ?? t("common.copy"));
 const copiedText = computed(() => props.copiedLabel ?? t("common.copied"));
-const { copied, copy } = useCopy({ resetAfter: props.resetAfter });
+const { copied, copy, message } = useAnnouncedCopy(() => copiedText.value, {
+  resetAfter: props.resetAfter
+});
 async function onCopy() {
   emit("copy", await copy(props.value));
 }

package/dist/components/layout/CopyButton.vue.d.ts

@@ -15,6 +15,7 @@ declare const __VLS_export: 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;
@@ -169,7 +170,6 @@ declare const __VLS_export: 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;
@@ -218,6 +218,7 @@ declare const __VLS_export: 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;
@@ -372,7 +373,6 @@ declare const __VLS_export: 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;
@@ -406,8 +406,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
 }> & Readonly<{
     onCopy?: ((success: boolean) => any) | undefined;
 }>, {
-    size: ButtonSize;
     tone: Tone;
+    size: ButtonSize;
     variant: ButtonVariant;
     resetAfter: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/layout/NavLink.vue

@@ -5,7 +5,8 @@
       :bind="linkAttrs"
       class="k-navlink"
       :class="{ 'is-active': active, 'is-disabled': disabled }"
-      :title="shell?.collapsed.value ? label : void 0"
+      :title="rail ? label : void 0"
+      :aria-label="railLabel"
       @click="onClick"
    >
       <span v-if="icon || $slots.icon" class="k-navlink-icon" aria-hidden="true">
@@ -16,6 +17,7 @@
       >
       <span v-if="badge !== void 0 && badge !== ''" class="k-navlink-badge">{{ badge }}</span>
       <Icon v-if="external" name="arrow-right" class="k-navlink-external" />
+      <span v-if="external" class="k-visually-hidden">{{ t("common.opensInNewTab") }}</span>
    </Polymorphic>
 </template>
 
@@ -25,6 +27,7 @@ import { Polymorphic } from "../../internal/core/Polymorphic";
 import { computed } from "vue";
 import { useAppShell } from "../../composables/useAppShell";
 import { useLinkComponent } from "../../composables/useLink";
+import { useLocale } from "../../composables/useLocale";
 import Icon from "../core/Icon.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -40,6 +43,12 @@ const props = defineProps({
 });
 const linkComponent = useLinkComponent();
 const shell = useAppShell();
+const { t } = useLocale();
+const rail = computed(() => Boolean(shell?.collapsed.value && !shell.mobile.value));
+const railLabel = computed(() => {
+  if (!rail.value || !props.label) return void 0;
+  return props.external ? `${props.label} ${t("common.opensInNewTab")}` : props.label;
+});
 const tag = computed(() => {
   if (props.disabled) return "a";
   if (props.to !== void 0 && linkComponent) return linkComponent;

package/dist/components/layout/NavLink.vue.d.ts

@@ -25,6 +25,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     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;
@@ -183,7 +184,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"];
@@ -243,6 +243,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     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;
@@ -401,7 +402,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/layout/PageHeader.vue

@@ -1,5 +1,5 @@
 <template>
-   <header class="k-page-header" :class="{ 'is-bordered': bordered }">
+   <div class="k-page-header" :class="{ 'is-bordered': bordered }">
       <div class="k-page-header-heading">
          <slot name="breadcrumbs">
             <Breadcrumbs
@@ -35,7 +35,7 @@
       <div v-if="$slots.default" class="k-page-header-extra">
          <slot />
       </div>
-   </header>
+   </div>
 </template>
 
 <script setup>

package/dist/components/layout/Separator.vue

@@ -2,8 +2,8 @@
    <div
       class="k-separator"
       :class="[`k-separator-${orientation}`, { 'has-label': Boolean(label || $slots.default) }]"
-      :role="decorative ? 'none' : 'separator'"
-      :aria-orientation="!decorative && orientation === 'vertical' ? 'vertical' : void 0"
+      :role="plain ? 'none' : 'separator'"
+      :aria-orientation="!plain && orientation === 'vertical' ? 'vertical' : void 0"
    >
       <span v-if="label || $slots.default" class="k-separator-label">
          <slot>{{ label }}</slot>
@@ -12,9 +12,12 @@
 </template>
 
 <script setup>
-defineProps({
+import { computed, useSlots } from "vue";
+const props = defineProps({
   orientation: { type: String, required: false, default: "horizontal" },
   label: { type: String, required: false },
   decorative: { type: Boolean, required: false }
 });
+const slots = useSlots();
+const plain = computed(() => props.decorative || Boolean(props.label || slots.default));
 </script>

package/dist/components/layout/Sidebar.vue

@@ -11,15 +11,21 @@
             tone="neutral"
             size="xs"
             icon="chevron-left"
-            :aria-label="isCollapsed ? expandText : collapseText"
+            :aria-label="collapseText"
             :aria-expanded="isCollapsed ? 'false' : 'true'"
+            :aria-controls="shell.sidebarId"
             @click="shell?.toggleCollapsed()"
          />
       </div>
       <div v-if="$slots.top" class="k-sidebar-top">
          <slot name="top" :collapsed="isCollapsed" />
       </div>
-      <nav class="k-sidebar-nav" :aria-label="navText">
+      <nav
+         ref="nav"
+         class="k-sidebar-nav"
+         :class="{ 'is-overflow-top': overflowTop, 'is-overflow-bottom': overflowBottom }"
+         :aria-label="navText"
+      >
          <slot :collapsed="isCollapsed" />
       </nav>
       <div v-if="$slots.footer" class="k-sidebar-footer">
@@ -29,20 +35,21 @@
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, useTemplateRef } from "vue";
 import { useAppShell } from "../../composables/useAppShell";
 import { useLocale } from "../../composables/useLocale";
+import { useScrollEdges } from "../../internal/core/scroll-edges";
 import Button from "../core/Button.vue";
 const props = defineProps({
   label: { type: String, required: false },
   collapsible: { type: Boolean, required: false },
-  collapseLabel: { type: String, required: false },
-  expandLabel: { type: String, required: false }
+  collapseLabel: { type: String, required: false }
 });
 const { t } = useLocale();
 const navText = computed(() => props.label ?? t("shell.main"));
-const collapseText = computed(() => props.collapseLabel ?? t("shell.collapse"));
-const expandText = computed(() => props.expandLabel ?? t("shell.expand"));
+const collapseText = computed(() => props.collapseLabel ?? t("shell.sidebar"));
 const shell = useAppShell();
 const isCollapsed = computed(() => Boolean(shell?.collapsed.value));
+const nav = useTemplateRef("nav");
+const { overflowTop, overflowBottom } = useScrollEdges(() => nav.value);
 </script>