@skewedaspect/sleekspace-ui 0.9.0 → 0.10.0

package/src/components/Autocomplete/SkAutocompleteItem.vue

@@ -0,0 +1,85 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - AutocompleteItem Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <AutocompleteItem
+        :class="classes"
+        :value="value"
+        :disabled="disabled"
+        :text-value="textValue"
+    >
+        <slot />
+    </AutocompleteItem>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are in /src/styles/components/_autocomplete.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component SkAutocompleteItem
+     * @description A selectable suggestion within an SkAutocomplete dropdown. When chosen, the item's
+     * `value` is written into the input. Built on RekaUI's AutocompleteItem with keyboard navigation
+     * and type-ahead support.
+     *
+     * @example
+     * ```vue
+     * <SkAutocomplete v-model="query">
+     *     <SkAutocompleteItem value="apple">Apple</SkAutocompleteItem>
+     *     <SkAutocompleteItem value="banana">Banana</SkAutocompleteItem>
+     *     <SkAutocompleteItem value="cherry" disabled>Cherry (out of stock)</SkAutocompleteItem>
+     * </SkAutocomplete>
+     * ```
+     *
+     * @slot default - The display content for this suggestion. Can be plain text or rich content.
+     */
+
+    import { computed } from 'vue';
+    import { AutocompleteItem } from 'reka-ui';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkAutocompleteItemComponentProps
+    {
+        /**
+         * The string written into the input when this item is selected. Must be unique
+         * within the autocomplete to ensure proper highlight/match behavior.
+         */
+        value : string;
+
+        /**
+         * When true, this suggestion is disabled and cannot be selected. Skipped during
+         * keyboard navigation.
+         * @default false
+         */
+        disabled ?: boolean;
+
+        /**
+         * Optional override for filter/typeahead matching. Use when the slot content is
+         * non-textual (icons, custom layouts) and you need to specify what text the
+         * client-side filter should match against.
+         */
+        textValue ?: string;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    withDefaults(defineProps<SkAutocompleteItemComponentProps>(), {
+        disabled: false,
+        textValue: undefined,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() => ({
+        'sk-autocomplete-item': true,
+    }));
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Autocomplete/SkAutocompleteSeparator.vue

@@ -0,0 +1,39 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - AutocompleteSeparator Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <AutocompleteSeparator class="sk-autocomplete-separator" />
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are in /src/styles/components/_autocomplete.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component SkAutocompleteSeparator
+     * @description A visual divider for organizing suggestions within an SkAutocomplete dropdown. Renders
+     * as a horizontal line between items with appropriate spacing.
+     *
+     * @example
+     * ```vue
+     * <SkAutocomplete v-model="query">
+     *     <SkAutocompleteItem value="recent1">Recent search 1</SkAutocompleteItem>
+     *     <SkAutocompleteItem value="recent2">Recent search 2</SkAutocompleteItem>
+     *     <SkAutocompleteSeparator />
+     *     <SkAutocompleteItem value="popular">Popular searches...</SkAutocompleteItem>
+     * </SkAutocomplete>
+     * ```
+     *
+     * @slot - Not applicable. This component does not accept slot content.
+     */
+
+    import { AutocompleteSeparator } from 'reka-ui';
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Autocomplete/index.ts

@@ -0,0 +1,13 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Autocomplete Component Exports
+//----------------------------------------------------------------------------------------------------------------------
+
+export { default as SkAutocomplete } from './SkAutocomplete.vue';
+export { default as SkAutocompleteEmpty } from './SkAutocompleteEmpty.vue';
+export { default as SkAutocompleteGroup } from './SkAutocompleteGroup.vue';
+export { default as SkAutocompleteGroupLabel } from './SkAutocompleteGroupLabel.vue';
+export { default as SkAutocompleteItem } from './SkAutocompleteItem.vue';
+export { default as SkAutocompleteSeparator } from './SkAutocompleteSeparator.vue';
+export type { SkAutocompleteKind, SkAutocompleteSize } from './types';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Autocomplete/types.ts

@@ -0,0 +1,10 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Autocomplete Component Types
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind, ComponentSize } from '@/types';
+
+export type SkAutocompleteKind = ComponentKind;
+export type SkAutocompleteSize = ComponentSize;
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Breadcrumbs/SkBreadcrumbItem.vue

@@ -59,7 +59,10 @@
     import { RouterLink } from 'vue-router';
 
     // Types
-    import type { SkBreadcrumbItemProps, SkBreadcrumbsKind } from './types';
+    import type { SkBreadcrumbItemProps } from './types';
+
+    // Context
+    import { BREADCRUMBS_KIND_KEY } from './context';
 
     //------------------------------------------------------------------------------------------------------------------
 
@@ -106,7 +109,9 @@
 
     //------------------------------------------------------------------------------------------------------------------
 
-    const kind = inject<SkBreadcrumbsKind>('breadcrumbs-kind', 'neutral');
+    // BREADCRUMBS_KIND_KEY carries a Ref<SkBreadcrumbsKind | undefined>, so we read .value below.
+    // (Pre-typed-key code mistakenly treated this as a plain string and rendered `sk-[object Object]`.)
+    const kindRef = inject(BREADCRUMBS_KIND_KEY, computed(() => undefined));
 
     //------------------------------------------------------------------------------------------------------------------
 
@@ -129,7 +134,7 @@
 
     const linkClasses = computed(() => ({
         'sk-breadcrumb-link': true,
-        [`sk-${ kind }`]: true,
+        [`sk-${ kindRef.value ?? 'neutral' }`]: true,
     }));
 
     //------------------------------------------------------------------------------------------------------------------

package/src/components/Breadcrumbs/SkBreadcrumbSeparator.vue

@@ -34,6 +34,9 @@
 
     import { computed, inject } from 'vue';
 
+    // Context
+    import { BREADCRUMBS_SEPARATOR_KEY } from './context';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkBreadcrumbSeparatorComponentProps
@@ -55,11 +58,14 @@
 
     //------------------------------------------------------------------------------------------------------------------
 
-    const parentSeparator = inject<string>('breadcrumbs-separator', '/');
+    // BREADCRUMBS_SEPARATOR_KEY carries a Ref<string | undefined>, so we read .value below.
+    // (Pre-typed-key code mistakenly treated this as a plain string and rendered `[object Object]`
+    // for the separator inside an SkBreadcrumbs.)
+    const parentSeparator = inject(BREADCRUMBS_SEPARATOR_KEY, computed(() => undefined));
 
     //------------------------------------------------------------------------------------------------------------------
 
-    const displaySeparator = computed<string>(() => props.separator ?? parentSeparator);
+    const displaySeparator = computed<string>(() => props.separator ?? parentSeparator.value ?? '/');
 
     //------------------------------------------------------------------------------------------------------------------
 </script>

package/src/components/Breadcrumbs/SkBreadcrumbs.vue

@@ -46,6 +46,9 @@
     import type { ComponentCustomColors } from '@/types';
     import type { SkBreadcrumbsProps } from './types';
 
+    // Utils
+    import { filterRenderableVNodes } from '@/utils/slots';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkBreadcrumbsComponentProps extends SkBreadcrumbsProps, ComponentCustomColors
@@ -74,6 +77,9 @@
     // Composables
     import { useCustomColors } from '@/composables/useCustomColors';
 
+    // Context
+    import { BREADCRUMBS_KIND_KEY, BREADCRUMBS_SEPARATOR_KEY } from './context';
+
     //------------------------------------------------------------------------------------------------------------------
 
     const props = withDefaults(defineProps<SkBreadcrumbsComponentProps>(), {
@@ -89,8 +95,8 @@
 
     //------------------------------------------------------------------------------------------------------------------
 
-    provide('breadcrumbs-kind', toRef(() => props.kind));
-    provide('breadcrumbs-separator', toRef(() => props.separator));
+    provide(BREADCRUMBS_KIND_KEY, toRef(() => props.kind));
+    provide(BREADCRUMBS_SEPARATOR_KEY, toRef(() => props.separator));
 
     //------------------------------------------------------------------------------------------------------------------
 
@@ -109,18 +115,9 @@
 
     const processedItems = computed<VNode[]>(() =>
     {
-        if(!slots.default)
-        {
-            return [];
-        }
-
-        const defaultSlot = slots.default();
-        if(!defaultSlot || defaultSlot.length === 0)
-        {
-            return [];
-        }
-
-        return defaultSlot;
+        if(!slots.default) { return []; }
+
+        return filterRenderableVNodes(slots.default());
     });
 
     //------------------------------------------------------------------------------------------------------------------

package/src/components/Breadcrumbs/context.ts

@@ -0,0 +1,20 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Breadcrumbs Context
+//
+// Injection keys for SkBreadcrumbItem and SkBreadcrumbSeparator descendants to inherit kind and
+// separator from the surrounding SkBreadcrumbs without manual wiring.
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { InjectionKey, Ref } from 'vue';
+
+import type { SkBreadcrumbsKind } from './types';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export const BREADCRUMBS_KIND_KEY : InjectionKey<Ref<SkBreadcrumbsKind | undefined>>
+    = Symbol('sk-breadcrumbs-kind');
+
+export const BREADCRUMBS_SEPARATOR_KEY : InjectionKey<Ref<string | undefined>>
+    = Symbol('sk-breadcrumbs-separator');
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Button/SkButton.vue

@@ -18,16 +18,16 @@
         <span class="sk-button-chrome">
             <span v-if="loading" class="sk-button-loader" aria-hidden="true" />
             <span :class="{ 'sk-button-content': true, 'loading': loading }">
-                <span v-if="$slots.leading" class="sk-button-icon sk-button-icon-leading">
+                <span v-if="hasSlotContent(slots.leading)" class="sk-button-icon sk-button-icon-leading">
                     <slot name="leading" />
                 </span>
-                <span v-if="$slots.icon" class="sk-button-icon sk-button-icon-only">
+                <span v-if="hasSlotContent(slots.icon)" class="sk-button-icon sk-button-icon-only">
                     <slot name="icon" />
                 </span>
-                <span v-if="$slots.default" class="sk-button-text">
+                <span v-if="hasSlotContent(slots.default)" class="sk-button-text">
                     <slot />
                 </span>
-                <span v-if="$slots.trailing" class="sk-button-icon sk-button-icon-trailing">
+                <span v-if="hasSlotContent(slots.trailing)" class="sk-button-icon sk-button-icon-trailing">
                     <slot name="trailing" />
                 </span>
             </span>
@@ -63,15 +63,25 @@
      * @slot icon - Icon for icon-only buttons. When used without the default slot, creates a square icon button.
      */
 
-    import { type Slots, computed, toRef, useSlots } from 'vue';
+    import { type Slots, computed, inject, toRef, useSlots } from 'vue';
 
     // Types
     import type { ComponentCustomColors } from '@/types';
-    import type { SkButtonKind, SkButtonSize, SkButtonType, SkButtonVariant } from './types';
+    import type { SkButtonCorner, SkButtonKind, SkButtonSize, SkButtonType, SkButtonVariant } from './types';
 
     // Composables
+    import {
+        NO_KIND,
+        NO_SIZE,
+        inheritedKindKey,
+        inputGroupSizeKey,
+        validationKindKey,
+    } from '@/composables/injectionKeys';
     import { useCustomColors } from '@/composables/useCustomColors';
 
+    // Utils
+    import { hasSlotContent } from '@/utils/slots';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkButtonComponentProps extends ComponentCustomColors
@@ -140,6 +150,13 @@
          */
         dense ?: boolean;
 
+        /**
+         * Which corners receive the beveled cut. Pass an empty array for square corners.
+         * When omitted, defaults to the button's standalone visual (`top-left` + `bottom-right`).
+         * @default undefined (renders as ['top-left', 'bottom-right'])
+         */
+        corners ?: SkButtonCorner[];
+
         /**
          * URL for the button to navigate to. When provided, the button renders as an `<a>` element
          * instead of a `<button>`. Use for external links or simple navigation that doesn't require
@@ -161,13 +178,14 @@
 
     const props = withDefaults(defineProps<SkButtonComponentProps>(), {
         type: 'button',
-        kind: 'neutral',
+        kind: undefined,
         variant: 'solid',
-        size: 'md',
+        size: undefined,
         disabled: false,
         loading: false,
         pressed: false,
         dense: false,
+        corners: undefined,
         href: undefined,
         to: undefined,
     });
@@ -178,6 +196,27 @@
 
     //------------------------------------------------------------------------------------------------------------------
 
+    const validationKind = inject(validationKindKey, NO_KIND);
+    const inheritedKind = inject(inheritedKindKey, NO_KIND);
+    const inputGroupSize = inject(inputGroupSizeKey, NO_SIZE);
+
+    const effectiveKind = computed<SkButtonKind>(() =>
+    {
+        if(validationKind.value !== undefined) { return validationKind.value; }
+        if(props.kind !== undefined) { return props.kind; }
+        if(inheritedKind.value !== undefined) { return inheritedKind.value; }
+        return 'neutral';
+    });
+
+    const effectiveSize = computed<SkButtonSize>(() =>
+    {
+        if(props.size !== undefined) { return props.size; }
+        if(inputGroupSize.value !== undefined) { return inputGroupSize.value; }
+        return 'md';
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
     // Determine which component to render
     const componentTag = computed<string>(() =>
     {
@@ -199,17 +238,21 @@
 
     const classes = computed<Record<string, boolean>>(() =>
     {
-        const isIconOnly = !!(slots.icon && !slots.default);
+        const isIconOnly = hasSlotContent(slots.icon) && !hasSlotContent(slots.default);
 
         return {
             'sk-button': true,
-            [`sk-${ props.kind }`]: true,
+            [`sk-${ effectiveKind.value }`]: true,
             [`sk-${ props.variant }`]: true,
-            [`sk-${ props.size }`]: true,
+            [`sk-${ effectiveSize.value }`]: true,
             'sk-loading': props.loading,
             'sk-pressed': props.pressed,
             'sk-dense': props.dense,
             'sk-icon-only': isIconOnly,
+            'sk-cut-top-left': props.corners?.includes('top-left') ?? false,
+            'sk-cut-top-right': props.corners?.includes('top-right') ?? false,
+            'sk-cut-bottom-right': props.corners?.includes('bottom-right') ?? false,
+            'sk-cut-bottom-left': props.corners?.includes('bottom-left') ?? false,
         };
     });
 

package/src/components/Button/types.ts

@@ -4,11 +4,17 @@
 
 import type { ComponentKind, ComponentSize, ComponentVariant } from '@/types';
 
+// Types
+import type { SkCorner } from '@/types/corners';
+
 //----------------------------------------------------------------------------------------------------------------------
 
 // HTML button type attribute
 export type SkButtonType = 'button' | 'submit' | 'reset';
 
+// Button corner type (controls which corners receive the beveled cut)
+export type SkButtonCorner = SkCorner;
+
 // Button semantic kinds (uses common types)
 export type SkButtonKind = ComponentKind;
 

package/src/components/Card/SkCard.vue

@@ -15,19 +15,19 @@
         :decoration-corner="decorationCorner"
         :class="classes"
     >
-        <div v-if="title || $slots.header" class="sk-card-header" :style="headerStyles">
+        <div v-if="title || hasSlotContent(slots.header)" class="sk-card-header" :style="headerStyles">
             <h3 v-if="title" class="sk-card-title">
                 {{ title }}
             </h3>
             <slot name="header" />
         </div>
-        <div v-if="$slots.media" class="sk-card-media">
+        <div v-if="hasSlotContent(slots.media)" class="sk-card-media">
             <slot name="media" />
         </div>
-        <div v-if="$slots.default" :class="contentClasses">
+        <div v-if="hasSlotContent(slots.default)" :class="contentClasses">
             <slot />
         </div>
-        <div v-if="$slots.footer" class="sk-card-footer">
+        <div v-if="hasSlotContent(slots.footer)" class="sk-card-footer">
             <slot name="footer" />
         </div>
     </SkPanel>
@@ -64,7 +64,7 @@
      *                appropriate spacing.
      */
 
-    import { computed } from 'vue';
+    import { computed, useSlots } from 'vue';
 
     // Types
     import type { ComponentCustomColors } from '@/types';
@@ -74,6 +74,9 @@
     // Components
     import SkPanel from '../Panel/SkPanel.vue';
 
+    // Utils
+    import { hasSlotContent } from '@/utils/slots';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkCardComponentProps extends ComponentCustomColors
@@ -170,6 +173,10 @@
 
     //------------------------------------------------------------------------------------------------------------------
 
+    const slots = useSlots();
+
+    //------------------------------------------------------------------------------------------------------------------
+
     const classes = computed(() =>
     {
         return {

package/src/components/Checkbox/SkCheckbox.vue

@@ -42,7 +42,7 @@
                 </svg>
             </CheckboxIndicator>
         </CheckboxRoot>
-        <span v-if="label || $slots.default" class="sk-checkbox-label">
+        <span v-if="label || hasSlotContent(slots.default)" class="sk-checkbox-label">
             <slot>{{ label }}</slot>
         </span>
     </label>
@@ -71,7 +71,7 @@
      * @slot default - Custom label content. Overrides the `label` prop when provided.
      */
 
-    import { computed, toRef } from 'vue';
+    import { computed, toRef, useSlots } from 'vue';
     import { CheckboxIndicator, CheckboxRoot } from 'reka-ui';
 
     // Types
@@ -81,6 +81,9 @@
     // Composables
     import { useCustomColors } from '@/composables/useCustomColors';
 
+    // Utils
+    import { hasSlotContent } from '@/utils/slots';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkCheckboxComponentProps extends ComponentCustomColors
@@ -151,6 +154,10 @@
 
     //------------------------------------------------------------------------------------------------------------------
 
+    const slots = useSlots();
+
+    //------------------------------------------------------------------------------------------------------------------
+
     const classes = computed(() => ({
         'sk-checkbox': true,
         [`sk-${ props.kind }`]: true,

package/src/components/ColorPicker/SkColorPicker.vue

@@ -226,7 +226,7 @@
 <!--------------------------------------------------------------------------------------------------------------------->
 
 <script setup lang="ts">
-    import { type Component, type ComputedRef, computed, inject, ref, toRef } from 'vue';
+    import { type Component, computed, inject, ref, toRef } from 'vue';
     import {
         type ColorObject,
         ColorPickerCanvas,
@@ -251,6 +251,13 @@
     import type { SkColorPickerFormat, SkColorPickerKind, SkColorPickerSize } from './types';
 
     // Composables
+    import {
+        NO_KIND,
+        NO_SIZE,
+        inheritedKindKey,
+        inputGroupSizeKey,
+        validationKindKey,
+    } from '@/composables/injectionKeys';
     import { useCustomColors } from '@/composables/useCustomColors';
     import { usePortalContext } from '@/composables/usePortalContext';
 
@@ -283,7 +290,7 @@
 
     const props = withDefaults(defineProps<SkColorPickerComponentProps>(), {
         kind: undefined,
-        size: 'md',
+        size: undefined,
         format: 'hexa',
         showAlpha: true,
         disabled: false,
@@ -299,19 +306,34 @@
 
     const { theme } = usePortalContext();
 
-    const fieldKind = inject<ComputedRef<SkColorPickerKind | undefined>>('field-kind', computed(() => undefined));
+    const validationKind = inject(validationKindKey, NO_KIND);
+    const inheritedKind = inject(inheritedKindKey, NO_KIND);
+    const inputGroupSize = inject(inputGroupSizeKey, NO_SIZE);
     const displayFormat = ref<DisplayFormat>('Hex');
 
     //------------------------------------------------------------------------------------------------------------------
 
-    const effectiveKind = computed(() => fieldKind.value || props.kind || 'neutral');
+    const effectiveKind = computed<SkColorPickerKind>(() =>
+    {
+        if(validationKind.value !== undefined) { return validationKind.value; }
+        if(props.kind !== undefined) { return props.kind; }
+        if(inheritedKind.value !== undefined) { return inheritedKind.value; }
+        return 'neutral';
+    });
+
+    const effectiveSize = computed<SkColorPickerSize>(() =>
+    {
+        if(props.size !== undefined) { return props.size; }
+        if(inputGroupSize.value !== undefined) { return inputGroupSize.value; }
+        return 'md';
+    });
 
     //------------------------------------------------------------------------------------------------------------------
 
     const wrapperClasses = computed(() => ({
         'sk-color-picker': true,
         [`sk-${ effectiveKind.value }`]: true,
-        [`sk-${ props.size }`]: true,
+        [`sk-${ effectiveSize.value }`]: true,
         'sk-disabled': props.disabled,
     }));
 

package/src/components/ContextMenu/SkContextMenu.vue

@@ -45,6 +45,9 @@
     import { useCustomColors } from '@/composables/useCustomColors';
     import { usePortalContext } from '@/composables/usePortalContext';
 
+    // Context
+    import { CONTEXT_MENU_KIND_KEY } from './context';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkContextMenuComponentProps extends ComponentCustomColors
@@ -62,7 +65,7 @@
 
     const { theme } = usePortalContext();
 
-    provide('context-menu-kind', computed(() => props.kind));
+    provide(CONTEXT_MENU_KIND_KEY, computed(() => props.kind));
 
     //------------------------------------------------------------------------------------------------------------------
 

package/src/components/ContextMenu/SkContextMenuSubmenu.vue

@@ -53,6 +53,9 @@
     // Composables
     import { usePortalContext } from '@/composables/usePortalContext';
 
+    // Context
+    import { CONTEXT_MENU_KIND_KEY } from './context';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkContextMenuSubmenuComponentProps
@@ -71,11 +74,11 @@
 
     const { theme } = usePortalContext();
 
-    const parentKind = inject<any>('context-menu-kind', computed(() => 'neutral'));
+    const parentKind = inject(CONTEXT_MENU_KIND_KEY, computed(() => undefined));
 
     //------------------------------------------------------------------------------------------------------------------
 
-    const effectiveKind = computed(() => props.kind || parentKind.value || 'neutral');
+    const effectiveKind = computed<SkContextMenuKind>(() => props.kind ?? parentKind.value ?? 'neutral');
 
     //------------------------------------------------------------------------------------------------------------------
 

package/src/components/ContextMenu/context.ts

@@ -0,0 +1,17 @@
+//----------------------------------------------------------------------------------------------------------------------
+// ContextMenu Context
+//
+// Injection key for nested SkContextMenuSubmenu descendants to inherit the surrounding
+// SkContextMenu's kind without manual wiring.
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComputedRef, InjectionKey } from 'vue';
+
+import type { SkContextMenuKind } from './types';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export const CONTEXT_MENU_KIND_KEY : InjectionKey<ComputedRef<SkContextMenuKind | undefined>>
+    = Symbol('sk-context-menu-kind');
+
+//----------------------------------------------------------------------------------------------------------------------