@sewadah/selaras 0.3.0 → 0.3.2

package/dist/runtime/components/NavigationMenu.vue.d.ts

@@ -45,19 +45,19 @@ declare var __VLS_8: {}, __VLS_17: string, __VLS_18: {
 }, __VLS_124: string, __VLS_125: {
     item: NavigationMenuItem;
     active: boolean;
-}, __VLS_142: string, __VLS_143: {
+}, __VLS_147: string, __VLS_148: {
     item: NavigationMenuItem;
     active: boolean;
-}, __VLS_146: string, __VLS_147: {
+}, __VLS_151: string, __VLS_152: {
     item: NavigationMenuItem;
     active: boolean;
-}, __VLS_155: string, __VLS_156: {
+}, __VLS_160: string, __VLS_161: {
     item: NavigationMenuItem;
     active: boolean;
-}, __VLS_159: string, __VLS_160: {
+}, __VLS_164: string, __VLS_165: {
     item: NavigationMenuItem;
     active: boolean;
-}, __VLS_162: {};
+}, __VLS_172: {};
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_17>]?: (props: typeof __VLS_18) => any;
 } & {
@@ -83,17 +83,17 @@ type __VLS_Slots = {} & {
 } & {
     [K in NonNullable<typeof __VLS_124>]?: (props: typeof __VLS_125) => any;
 } & {
-    [K in NonNullable<typeof __VLS_142>]?: (props: typeof __VLS_143) => any;
+    [K in NonNullable<typeof __VLS_147>]?: (props: typeof __VLS_148) => any;
 } & {
-    [K in NonNullable<typeof __VLS_146>]?: (props: typeof __VLS_147) => any;
+    [K in NonNullable<typeof __VLS_151>]?: (props: typeof __VLS_152) => any;
 } & {
-    [K in NonNullable<typeof __VLS_155>]?: (props: typeof __VLS_156) => any;
+    [K in NonNullable<typeof __VLS_160>]?: (props: typeof __VLS_161) => any;
 } & {
-    [K in NonNullable<typeof __VLS_159>]?: (props: typeof __VLS_160) => any;
+    [K in NonNullable<typeof __VLS_164>]?: (props: typeof __VLS_165) => any;
 } & {
     'list-leading'?: (props: typeof __VLS_8) => any;
 } & {
-    'list-trailing'?: (props: typeof __VLS_162) => any;
+    'list-trailing'?: (props: typeof __VLS_172) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<NavigationMenuProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavigationMenuProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/NavigationMenuAccordionItem.vue

@@ -2,8 +2,10 @@
 import { computed, useId, useSlots } from "vue";
 import { NuxtLink } from "#components";
 import { useRoute } from "#imports";
+import { vHotkey } from "../directives/hotkey";
+import ShortcutHint from "../internal/ShortcutHint.vue";
 import { navigationMenuTheme } from "../theme/navigation-menu";
-import { isNavigationMenuItemActive } from "../utils/navigation-menu";
+import { isNavigationMenuItemActive, navigationMenuHotkey } from "../utils/navigation-menu";
 import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme } from "../utils/ui";
 import Accordion from "./Accordion.vue";
@@ -83,6 +85,7 @@ function onSelect(item, event) {
             <component
               :is="child.to ? NuxtLink : 'button'"
               v-else
+              v-hotkey="navigationMenuHotkey(child)"
               :to="child.to"
               :type="child.to ? void 0 : 'button'"
               :disabled="child.to ? void 0 : child.disabled"
@@ -98,6 +101,7 @@ function onSelect(item, event) {
                   <span v-bind="resolveSlot(ui.linkLabel, props.ui?.linkLabel)">{{ child.label }}</span>
                 </slot>
                 <slot :name="slotName(child, '-trailing')" :item="child" :active="isActive(child)" />
+                <ShortcutHint :shortcut="child.shortcut" />
               </slot>
             </component>
           </li>

package/dist/runtime/components/NavigationMenuFlyoutList.vue

@@ -2,8 +2,10 @@
 import { computed } from "vue";
 import { NuxtLink } from "#components";
 import { useRoute } from "#imports";
+import { vHotkey } from "../directives/hotkey";
+import ShortcutHint from "../internal/ShortcutHint.vue";
 import { navigationMenuTheme } from "../theme/navigation-menu";
-import { isNavigationMenuItemActive } from "../utils/navigation-menu";
+import { isNavigationMenuItemActive, navigationMenuHotkey } from "../utils/navigation-menu";
 import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useThemeBindings } from "../utils/ui";
 import Icon from "./Icon.vue";
@@ -35,12 +37,13 @@ function linkProps(item) {
     <li v-for="item in items" :key="item.label" v-bind="resolveSlot(ui.childItem, props.ui?.childItem)">
       <NavigationMenuAccordionItem v-if="item.children?.length" :item="item" :color="color" :variant="variant" :highlight="highlight" :ui="props.ui" />
       <component
-        :is="item.to ? NuxtLink : 'button'" v-else :to="item.to" :type="item.to ? void 0 : 'button'"
-        :disabled="item.to ? void 0 : item.disabled" v-bind="linkProps(item)"
-        :aria-disabled="item.to && item.disabled ? 'true' : void 0" @click="onSelect(item, $event)"
+        :is="item.to ? NuxtLink : 'button'" v-else v-hotkey="navigationMenuHotkey(item)" :to="item.to"
+        :type="item.to ? void 0 : 'button'" :disabled="item.to ? void 0 : item.disabled"
+        v-bind="linkProps(item)" :aria-disabled="item.to && item.disabled ? 'true' : void 0" @click="onSelect(item, $event)"
       >
         <Icon v-if="item.icon" :name="item.icon" v-bind="resolveSlot(ui.linkIcon, props.ui?.linkIcon)" />
         <span v-bind="resolveSlot(ui.linkLabel, props.ui?.linkLabel)">{{ item.label }}</span>
+        <ShortcutHint :shortcut="item.shortcut" />
       </component>
     </li>
   </ul>

package/dist/runtime/components/Popover.d.vue.ts

@@ -1,4 +1,6 @@
 import type { PopoverThemeSlots } from '../theme/popover.js';
+import type { RoundedArrowConfig } from '../utils/arrow.js';
+import type { OverlayPortal, OverlayPositioning } from '../utils/overlay.js';
 import type { UiProp } from '../utils/ui.js';
 export interface PopoverProps {
     open?: boolean;
@@ -6,14 +8,18 @@ export interface PopoverProps {
     defaultOpen?: boolean;
     side?: 'top' | 'right' | 'bottom' | 'left';
     align?: 'start' | 'center' | 'end';
+    /** Anchored panel positioning. Overrides `side` and `align` when supplied. */
+    positioning?: OverlayPositioning;
+    /** Teleport target, or `false` to render the panel inline. Defaults to `body`. */
+    portal?: OverlayPortal;
     /** Forwarded to Reka UI's own PopoverRoot `modal` prop - `true` traps focus and blocks interaction with the rest of the page, like a lightweight modal dialog. */
     modal?: boolean;
     /** When `false`, Escape and an outside click (or, since a popover is non-modal by default, an outside element merely receiving focus) no longer close the popover - the `escapeKeyDown`/`pointerDownOutside`/`focusOutside` events still fire, so a consumer can still react, but none of them close it on their own anymore. */
     dismissible?: boolean;
     /** When `false`, closing the popover no longer returns keyboard focus to its trigger. Reka does this by default regardless of *why* the popover closed, including a purely programmatic `open` change - which matters for a popover that can open via hover rather than a deliberate click/keypress: focus landing back on a trigger nobody meant to focus can itself count as focus moving "outside" whatever *other* popover the pointer has since moved on to, closing that one too. Defaults to `true`, matching Reka's own out-of-the-box behavior. */
     returnFocusOnClose?: boolean;
-    /** Shows the little pointer triangle connecting the popover to its trigger. */
-    arrow?: boolean;
+    /** Shows the pointer; an object configures its size, rounding, and edge clearance. */
+    arrow?: boolean | RoundedArrowConfig;
     ui?: UiProp<PopoverThemeSlots>;
 }
 export interface PopoverEmits {

package/dist/runtime/components/Popover.vue

@@ -2,16 +2,21 @@
 import { PopoverArrow, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from "reka-ui";
 import { computed, getCurrentInstance, ref, watch } from "vue";
 import { popoverTheme } from "../theme/popover";
-import { resolveSlot, useComponentTheme, useThemeBindings } from "../utils/ui";
+import { arrowContentProps, arrowElementProps } from "../utils/arrow";
+import { overlayPortalProps } from "../utils/overlay";
+import { resolveSlot, useComponentTheme, useFallthroughProps, useThemeBindings } from "../utils/ui";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   open: { type: Boolean, required: false, default: void 0 },
   defaultOpen: { type: Boolean, required: false },
   side: { type: String, required: false, default: "bottom" },
   align: { type: String, required: false, default: "center" },
+  positioning: { type: Object, required: false },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: void 0 },
   modal: { type: Boolean, required: false, default: false },
   dismissible: { type: Boolean, required: false, default: true },
   returnFocusOnClose: { type: Boolean, required: false, default: true },
-  arrow: { type: Boolean, required: false, default: false },
+  arrow: { type: [Boolean, Object], required: false, default: false },
   ui: { type: Object, required: false }
 });
 const emit = defineEmits(["update:open", "escapeKeyDown", "pointerDownOutside", "focusOutside", "openAutoFocus"]);
@@ -41,8 +46,10 @@ function onOpenAutoFocus(event) {
 const theme = useComponentTheme("popover", popoverTheme);
 const themeBindings = useThemeBindings();
 const ui = computed(() => theme.value());
-const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
-const arrowProps = computed(() => resolveSlot(ui.value.arrow, props.ui?.arrow));
+const triggerProps = useFallthroughProps();
+const contentProps = computed(() => ({ ...resolveSlot(ui.value.content, props.ui?.content), ...arrowContentProps(props.arrow), ...props.positioning }));
+const portalProps = computed(() => overlayPortalProps(props.portal));
+const arrowProps = computed(() => ({ ...resolveSlot(ui.value.arrow, props.ui?.arrow), ...arrowElementProps(props.arrow) }));
 const isControlled = Object.hasOwn(getCurrentInstance()?.vnode.props ?? {}, "open");
 const internalOpen = ref(props.open ?? props.defaultOpen ?? false);
 watch(() => props.open, (value) => {
@@ -58,10 +65,10 @@ function onUpdateOpen(value) {
 
 <template>
   <PopoverRoot :open="internalOpen" :modal="modal" @update:open="onUpdateOpen">
-    <PopoverTrigger v-if="$slots.default" as-child>
+    <PopoverTrigger v-if="$slots.default" as-child v-bind="triggerProps">
       <slot />
     </PopoverTrigger>
-    <PopoverPortal>
+    <PopoverPortal v-bind="portalProps">
       <PopoverContent
         :data-selaras-theme="themeBindings['data-selaras-theme']"
         :data-selaras-mode="themeBindings['data-selaras-mode']"

package/dist/runtime/components/Popover.vue.d.ts

@@ -1,4 +1,6 @@
 import type { PopoverThemeSlots } from '../theme/popover.js';
+import type { RoundedArrowConfig } from '../utils/arrow.js';
+import type { OverlayPortal, OverlayPositioning } from '../utils/overlay.js';
 import type { UiProp } from '../utils/ui.js';
 export interface PopoverProps {
     open?: boolean;
@@ -6,14 +8,18 @@ export interface PopoverProps {
     defaultOpen?: boolean;
     side?: 'top' | 'right' | 'bottom' | 'left';
     align?: 'start' | 'center' | 'end';
+    /** Anchored panel positioning. Overrides `side` and `align` when supplied. */
+    positioning?: OverlayPositioning;
+    /** Teleport target, or `false` to render the panel inline. Defaults to `body`. */
+    portal?: OverlayPortal;
     /** Forwarded to Reka UI's own PopoverRoot `modal` prop - `true` traps focus and blocks interaction with the rest of the page, like a lightweight modal dialog. */
     modal?: boolean;
     /** When `false`, Escape and an outside click (or, since a popover is non-modal by default, an outside element merely receiving focus) no longer close the popover - the `escapeKeyDown`/`pointerDownOutside`/`focusOutside` events still fire, so a consumer can still react, but none of them close it on their own anymore. */
     dismissible?: boolean;
     /** When `false`, closing the popover no longer returns keyboard focus to its trigger. Reka does this by default regardless of *why* the popover closed, including a purely programmatic `open` change - which matters for a popover that can open via hover rather than a deliberate click/keypress: focus landing back on a trigger nobody meant to focus can itself count as focus moving "outside" whatever *other* popover the pointer has since moved on to, closing that one too. Defaults to `true`, matching Reka's own out-of-the-box behavior. */
     returnFocusOnClose?: boolean;
-    /** Shows the little pointer triangle connecting the popover to its trigger. */
-    arrow?: boolean;
+    /** Shows the pointer; an object configures its size, rounding, and edge clearance. */
+    arrow?: boolean | RoundedArrowConfig;
     ui?: UiProp<PopoverThemeSlots>;
 }
 export interface PopoverEmits {

package/dist/runtime/components/ProsePre.d.vue.ts

@@ -4,6 +4,8 @@ export interface ProsePreProps {
     filename?: string;
     /** Overrides the file-type icon resolved from `filename`/`language`. */
     icon?: string;
+    /** Renders the metadata and copy row above the code. @default true */
+    showHeader?: boolean;
     highlights?: number[];
     meta?: string;
 }

package/dist/runtime/components/ProsePre.vue

@@ -13,6 +13,7 @@ const props = defineProps({
   language: { type: String, required: false },
   filename: { type: String, required: false },
   icon: { type: String, required: false },
+  showHeader: { type: Boolean, required: false, default: true },
   highlights: { type: Array, required: false },
   meta: { type: String, required: false }
 });
@@ -35,7 +36,7 @@ async function copy() {
 
 <template>
   <div v-bind="resolveSlot(ui.preWrapper, void 0)">
-    <div v-if="filename || language || code" v-bind="resolveSlot(ui.preHeader, void 0)">
+    <div v-if="showHeader && (filename || language || code)" v-bind="resolveSlot(ui.preHeader, void 0)">
       <span v-bind="resolveSlot(ui.preLabel, void 0)">
         <Icon v-if="fileIcon" :name="fileIcon" v-bind="resolveSlot(ui.preIcon, void 0)" />
         <span v-if="filename" v-bind="resolveSlot(ui.preFilename, void 0)">{{ filename }}</span>

package/dist/runtime/components/ProsePre.vue.d.ts

@@ -4,6 +4,8 @@ export interface ProsePreProps {
     filename?: string;
     /** Overrides the file-type icon resolved from `filename`/`language`. */
     icon?: string;
+    /** Renders the metadata and copy row above the code. @default true */
+    showHeader?: boolean;
     highlights?: number[];
     meta?: string;
 }

package/dist/runtime/components/Select.d.vue.ts

@@ -1,8 +1,10 @@
-import type { SelectIdentity, SelectModel, SelectProps, SelectSlots } from '../utils/select-contracts.js';
+import type { SelectEntry, SelectEntryItem, SelectModel, SelectProps, SelectSlots } from '../utils/select-contracts.js';
 export type { SelectEmits, SelectProps, SelectSlots } from '../utils/select-contracts.js';
-declare const __VLS_export: <Entry extends object, Key extends string = "value", Multiple extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+declare const __VLS_export: <Entry extends SelectEntry, Key extends string = "value", Multiple extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<SelectProps<Entry, Key, Multiple> & {
-        "onUpdate:modelValue"?: ((value: SelectModel<SelectIdentity<Entry, Key>, Multiple>) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: SelectModel<SelectEntryItem<Entry> extends infer T ? T extends SelectEntryItem<Entry> ? T extends import("../utils/select-contracts.js").SelectValue ? T : Key extends "value" ? T extends object ? "value" extends keyof T ? T extends infer T_1 ? T_1 extends T ? T_1 extends {
+            value: infer Value;
+        } ? Value : T_1 | NonNullable<T_1[keyof T_1 & "value"]> : never : never : T : never : Key extends keyof T ? T[Key] : never : never : never, Multiple>) => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;
         "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
     }> & (typeof globalThis extends {
@@ -11,7 +13,9 @@ declare const __VLS_export: <Entry extends object, Key extends string = "value",
     expose: (exposed: {}) => void;
     attrs: any;
     slots: SelectSlots<Entry, Key>;
-    emit: ((evt: "update:modelValue", value: SelectModel<SelectIdentity<Entry, Key>, Multiple>) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:searchTerm", value: string) => void);
+    emit: ((evt: "update:modelValue", value: SelectModel<SelectEntryItem<Entry> extends infer T ? T extends SelectEntryItem<Entry> ? T extends import("../utils/select-contracts.js").SelectValue ? T : Key extends "value" ? T extends object ? "value" extends keyof T ? T extends infer T_1 ? T_1 extends T ? T_1 extends {
+        value: infer Value;
+    } ? Value : T_1 | NonNullable<T_1[keyof T_1 & "value"]> : never : never : T : never : Key extends keyof T ? T[Key] : never : never : never, Multiple>) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:searchTerm", value: string) => void);
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/dist/runtime/components/Select.vue

@@ -7,7 +7,7 @@ const props = defineProps({
   name: { type: String, required: false },
   form: { type: String, required: false },
   items: { type: Array, required: true },
-  valueKey: { type: String, required: false },
+  valueKey: { type: void 0, required: false },
   labelKey: { type: String, required: false },
   open: { type: Boolean, required: false },
   defaultOpen: { type: Boolean, required: false },
@@ -29,7 +29,9 @@ const props = defineProps({
   searchTerm: { type: String, required: false },
   resetSearchTermOnBlur: { type: Boolean, required: false },
   resetSearchTermOnSelect: { type: Boolean, required: false },
-  arrow: { type: Boolean, required: false },
+  arrow: { type: [Boolean, Object], required: false },
+  positioning: { type: Object, required: false },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: void 0 },
   adaptive: { type: Boolean, required: false },
   ui: { type: Object, required: false }
 });

package/dist/runtime/components/Select.vue.d.ts

@@ -1,8 +1,10 @@
-import type { SelectIdentity, SelectModel, SelectProps, SelectSlots } from '../utils/select-contracts.js';
+import type { SelectEntry, SelectEntryItem, SelectModel, SelectProps, SelectSlots } from '../utils/select-contracts.js';
 export type { SelectEmits, SelectProps, SelectSlots } from '../utils/select-contracts.js';
-declare const __VLS_export: <Entry extends object, Key extends string = "value", Multiple extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+declare const __VLS_export: <Entry extends SelectEntry, Key extends string = "value", Multiple extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<SelectProps<Entry, Key, Multiple> & {
-        "onUpdate:modelValue"?: ((value: SelectModel<SelectIdentity<Entry, Key>, Multiple>) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: SelectModel<SelectEntryItem<Entry> extends infer T ? T extends SelectEntryItem<Entry> ? T extends import("../utils/select-contracts.js").SelectValue ? T : Key extends "value" ? T extends object ? "value" extends keyof T ? T extends infer T_1 ? T_1 extends T ? T_1 extends {
+            value: infer Value;
+        } ? Value : T_1 | NonNullable<T_1[keyof T_1 & "value"]> : never : never : T : never : Key extends keyof T ? T[Key] : never : never : never, Multiple>) => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;
         "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
     }> & (typeof globalThis extends {
@@ -11,7 +13,9 @@ declare const __VLS_export: <Entry extends object, Key extends string = "value",
     expose: (exposed: {}) => void;
     attrs: any;
     slots: SelectSlots<Entry, Key>;
-    emit: ((evt: "update:modelValue", value: SelectModel<SelectIdentity<Entry, Key>, Multiple>) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:searchTerm", value: string) => void);
+    emit: ((evt: "update:modelValue", value: SelectModel<SelectEntryItem<Entry> extends infer T ? T extends SelectEntryItem<Entry> ? T extends import("../utils/select-contracts.js").SelectValue ? T : Key extends "value" ? T extends object ? "value" extends keyof T ? T extends infer T_1 ? T_1 extends T ? T_1 extends {
+        value: infer Value;
+    } ? Value : T_1 | NonNullable<T_1[keyof T_1 & "value"]> : never : never : T : never : Key extends keyof T ? T[Key] : never : never : never, Multiple>) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:searchTerm", value: string) => void);
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/dist/runtime/components/Slideover.vue

@@ -4,9 +4,10 @@ import { computed, getCurrentInstance, ref, useSlots, watch, watchEffect } from
 import { useIcons } from "../composables/use-icons";
 import { useMessages } from "../composables/use-messages";
 import { slideoverTheme } from "../theme/slideover";
-import { resolveSlot, useComponentTheme, useThemeBindings } from "../utils/ui";
+import { resolveSlot, useComponentTheme, useRootProps, useThemeBindings } from "../utils/ui";
 import Button from "./Button.vue";
 import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   open: { type: Boolean, required: false, default: void 0 },
   defaultOpen: { type: Boolean, required: false },
@@ -70,8 +71,8 @@ const messages = useMessages();
 const theme = useComponentTheme("slideover", slideoverTheme);
 const themeBindings = useThemeBindings();
 const ui = computed(() => theme.value({ side: props.side, inset: props.inset, transition: props.transition }));
+const contentProps = useRootProps(() => ui.value.content, () => props.ui?.content);
 const overlayProps = computed(() => resolveSlot(ui.value.overlay, props.ui?.overlay));
-const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
 const headerProps = computed(() => resolveSlot(ui.value.header, props.ui?.header));
 const titleProps = computed(() => resolveSlot(ui.value.title, props.ui?.title));
 const descriptionProps = computed(() => resolveSlot(ui.value.description, props.ui?.description));

package/dist/runtime/components/SplitterPanel.d.vue.ts

@@ -37,13 +37,13 @@ declare const __VLS_base: import("vue").DefineComponent<SplitterPanelProps, {
     isCollapsed: import("vue").ComputedRef<boolean>;
     isExpanded: import("vue").ComputedRef<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    expand: () => any;
     resize: (size: number) => any;
     collapse: () => any;
-    expand: () => any;
 }, string, import("vue").PublicProps, Readonly<SplitterPanelProps> & Readonly<{
+    onExpand?: (() => any) | undefined;
     onResize?: ((size: number) => any) | undefined;
     onCollapse?: (() => any) | undefined;
-    onExpand?: (() => 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;

package/dist/runtime/components/SplitterPanel.vue.d.ts

@@ -37,13 +37,13 @@ declare const __VLS_base: import("vue").DefineComponent<SplitterPanelProps, {
     isCollapsed: import("vue").ComputedRef<boolean>;
     isExpanded: import("vue").ComputedRef<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    expand: () => any;
     resize: (size: number) => any;
     collapse: () => any;
-    expand: () => any;
 }, string, import("vue").PublicProps, Readonly<SplitterPanelProps> & Readonly<{
+    onExpand?: (() => any) | undefined;
     onResize?: ((size: number) => any) | undefined;
     onCollapse?: (() => any) | undefined;
-    onExpand?: (() => 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;

package/dist/runtime/components/Table.vue

@@ -15,11 +15,14 @@ import Checkbox from "./Checkbox.vue";
 import Icon from "./Icon.vue";
 import Input from "./Input.vue";
 import Pagination from "./Pagination.vue";
+import Popover from "./Popover.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   data: { type: Array, required: true },
   columns: { type: Array, required: false },
   selectable: { type: Boolean, required: false },
+  rowHover: { type: Boolean, required: false },
+  selectOnRowClick: { type: Boolean, required: false },
   pageSize: { type: Number, required: false },
   loading: { type: Boolean, required: false },
   sorting: { type: null, required: false },
@@ -32,6 +35,8 @@ const props = defineProps({
   gridlines: { type: Boolean, required: false },
   striped: { type: Boolean, required: false },
   expandable: { type: Boolean, required: false },
+  tree: { type: Boolean, required: false },
+  getSubRows: { type: Function, required: false },
   expanded: { type: null, required: false },
   columnVisibility: { type: null, required: false },
   columnToggle: { type: Boolean, required: false },
@@ -56,7 +61,8 @@ const ui = computed(() => theme.value({
   color: effectiveColor.value,
   gridlines: props.gridlines,
   striped: props.striped,
-  scrollable: !!props.scrollHeight
+  scrollable: !!props.scrollHeight,
+  rowHover: props.rowHover
 }));
 const selectColumn = {
   id: "__select__",
@@ -88,7 +94,7 @@ const expandColumn = {
 };
 const columns = computed(() => {
   const base = props.columns ?? convertChildrenToColumns(slots.default?.());
-  const withExpand = props.expandable ? [expandColumn, ...base] : base;
+  const withExpand = props.expandable && !props.tree ? [expandColumn, ...base] : base;
   return props.selectable ? [selectColumn, ...withExpand] : withExpand;
 });
 const columnPinning = computed(() => collectColumnPinning(columns.value));
@@ -111,7 +117,7 @@ const theadProps = computed(() => resolveSlot(ui.value.thead, props.ui?.thead));
 const trProps = computed(() => resolveSlot(ui.value.tr, props.ui?.tr));
 const instance = getCurrentInstance();
 function isRowClickable() {
-  return !!instance?.vnode.props?.onRowClick;
+  return !!props.selectable && props.selectOnRowClick || !!instance?.vnode.props?.onRowClick;
 }
 function bodyRowProps(rowOriginal) {
   const extraClass = [
@@ -122,7 +128,13 @@ function bodyRowProps(rowOriginal) {
   const rowStyle = props.rowStyle?.(rowOriginal);
   return rowStyle ? { ...base, style: { ...base.style, ...rowStyle } } : base;
 }
-function onRowClick(rowOriginal, event) {
+function onRowClick(rowOriginal, event, toggleSelection) {
+  const target = event.target;
+  const clickedControl = target instanceof Element && target.closest(
+    'a, button, input, select, textarea, [role="button"], [role="checkbox"], [role="radio"], [role="link"], [contenteditable="true"], [data-row-click-ignore]'
+  );
+  if (props.selectable && props.selectOnRowClick && !clickedControl)
+    toggleSelection?.();
   emit("rowClick", rowOriginal, event);
 }
 function onRowContextmenu(rowOriginal, event) {
@@ -135,6 +147,9 @@ const tdProps = computed(() => resolveSlot(ui.value.td, props.ui?.td));
 const tfootProps = computed(() => resolveSlot(ui.value.tfoot, props.ui?.tfoot));
 const emptyStateProps = computed(() => resolveSlot(ui.value.emptyState, props.ui?.emptyState));
 const filterInputProps = computed(() => resolveSlot(ui.value.filterInput, props.ui?.filterInput));
+const filterButtonProps = computed(() => resolveSlot(ui.value.filterButton, props.ui?.filterButton));
+const filterIconProps = computed(() => resolveSlot(ui.value.filterIcon, props.ui?.filterIcon));
+const filterPopoverProps = computed(() => resolveSlot(ui.value.filterPopover, props.ui?.filterPopover));
 const paginationWrapperProps = computed(() => resolveSlot(ui.value.paginationWrapper, props.ui?.paginationWrapper));
 const paginationInfoProps = computed(() => resolveSlot(ui.value.paginationInfo, props.ui?.paginationInfo));
 const paginationButtonsProps = computed(() => resolveSlot(ui.value.paginationButtons, props.ui?.paginationButtons));
@@ -148,6 +163,8 @@ const columnToggleItemProps = computed(() => resolveSlot(ui.value.columnToggleIt
 const hasFooter = computed(
   () => table.getFooterGroups().some((group) => group.headers.some((header) => header.column.columnDef.footer))
 );
+const treeColumnId = computed(() => table.getVisibleLeafColumns().find((column) => !column.id.startsWith("__"))?.id);
+const treeCellProps = computed(() => resolveSlot(ui.value.treeCell, props.ui?.treeCell));
 const headerRefs = /* @__PURE__ */ new Map();
 function setHeaderRef(id, el) {
   if (el)
@@ -255,26 +272,56 @@ defineExpose({
                 @keydown.space.prevent="header.column.getToggleSortingHandler()?.($event)"
               >
                 <template v-if="!header.isPlaceholder || header.rowSpan > 1">
-                  <FlexRender :header="header" />
-                  <Icon
-                    v-if="header.column.getIsSorted() === 'asc'"
-                    :name="icons.sortAscending"
-                    v-bind="sortIconProps"
-                  />
-                  <Icon
-                    v-else-if="header.column.getIsSorted() === 'desc'"
-                    :name="icons.sortDescending"
-                    v-bind="sortIconProps"
-                  />
-                  <div v-if="header.column.getCanFilter()">
-                    <Input
-                      size="sm"
-                      :model-value="header.column.getFilterValue() ?? ''"
-                      :placeholder="messages.filterPlaceholder"
-                      v-bind="filterInputProps"
-                      @click.stop
-                      @update:model-value="(value) => header.column.setFilterValue(value)"
+                  <div :class="applyClassPrefix('inline-flex items-center gap-1')">
+                    <FlexRender :header="header" />
+                    <Icon
+                      v-if="header.column.getCanSort()"
+                      :name="header.column.getIsSorted() === 'asc' ? icons.sortAscending : header.column.getIsSorted() === 'desc' ? icons.sortDescending : icons.sortUnsorted"
+                      :data-sort-state="header.column.getIsSorted() || 'none'"
+                      v-bind="sortIconProps"
                     />
+                    <Popover v-if="header.column.getCanFilter()" side="bottom" align="start" :ui="{ content: filterPopoverProps }">
+                      <Button
+                        v-bind="filterButtonProps"
+                        variant="ghost"
+                        :color="header.column.getIsFiltered() ? 'primary' : 'neutral'"
+                        size="sm"
+                        square
+                        :aria-label="messages.filterColumn(typeof header.column.columnDef.header === 'string' ? header.column.columnDef.header : header.column.id)"
+                        :aria-pressed="header.column.getIsFiltered()"
+                        @click.stop
+                        @keydown.stop
+                      >
+                        <Icon :name="icons.filter" v-bind="filterIconProps" />
+                      </Button>
+                      <template #content>
+                        <div :class="applyClassPrefix('flex flex-col gap-2')">
+                          <div :class="applyClassPrefix('flex items-center justify-between gap-2')">
+                            <span :class="applyClassPrefix('text-sm font-medium text-[var(--selaras-resolved-text-default)]')">
+                              {{ messages.filterColumn(typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : header.column.id) }}
+                            </span>
+                            <Button
+                              variant="text"
+                              color="neutral"
+                              size="sm"
+                              :disabled="!header.column.getIsFiltered()"
+                              @click.stop="header.column.setFilterValue(void 0)"
+                            >
+                              {{ messages.clear }}
+                            </Button>
+                          </div>
+                          <Input
+                            size="sm"
+                            :model-value="header.column.getFilterValue() ?? ''"
+                            :placeholder="messages.filterPlaceholder"
+                            :aria-label="messages.filterColumn(typeof header.column.columnDef.header === 'string' ? header.column.columnDef.header : header.column.id)"
+                            v-bind="filterInputProps"
+                            @click.stop
+                            @update:model-value="(value) => header.column.setFilterValue(value)"
+                          />
+                        </div>
+                      </template>
+                    </Popover>
                   </div>
                 </template>
               </th>
@@ -289,7 +336,7 @@ defineExpose({
           <template v-for="row in visibleRows" :key="row.id">
             <tr
               v-bind="bodyRowProps(row.original)"
-              @click="onRowClick(row.original, $event)"
+              @click="onRowClick(row.original, $event, row.getCanSelect() ? () => row.toggleSelected() : void 0)"
               @contextmenu="onRowContextmenu(row.original, $event)"
             >
               <td
@@ -299,10 +346,32 @@ defineExpose({
                 :data-pinned="cell.column.getIsPinned() || void 0"
                 :style="pinnedStyle(cell)"
               >
-                <FlexRender :cell="cell" />
+                <div
+                  v-if="tree && cell.column.id === treeColumnId"
+                  v-bind="treeCellProps"
+                  :style="{ paddingInlineStart: `${row.depth * 1.25}rem` }"
+                >
+                  <button
+                    v-if="row.getCanExpand()"
+                    type="button"
+                    v-bind="resolveSlot(ui.expandButton, props.ui?.expandButton)"
+                    :aria-label="row.getIsExpanded() ? messages.collapseRow : messages.expandRow"
+                    :aria-expanded="row.getIsExpanded()"
+                    @click.stop="row.toggleExpanded()"
+                  >
+                    <Icon
+                      :name="icons.chevronRight"
+                      v-bind="resolveSlot(ui.expandChevron, props.ui?.expandChevron)"
+                      :data-expanded="row.getIsExpanded() || void 0"
+                    />
+                  </button>
+                  <span v-else :class="resolveSlot(ui.expandButton, props.ui?.expandButton).class" aria-hidden="true" />
+                  <FlexRender :cell="cell" />
+                </div>
+                <FlexRender v-else :cell="cell" />
               </td>
             </tr>
-            <tr v-if="row.getIsExpanded()" v-bind="expandedRowProps">
+            <tr v-if="row.getIsExpanded() && !tree" v-bind="expandedRowProps">
               <td :colspan="row.getVisibleCells().length" v-bind="expandedCellProps">
                 <slot name="expanded" :row="row.original" />
               </td>