@skewedaspect/sleekspace-ui 0.9.1 → 0.10.0

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

@@ -77,6 +77,9 @@
     // Composables
     import { useCustomColors } from '@/composables/useCustomColors';
 
+    // Context
+    import { BREADCRUMBS_KIND_KEY, BREADCRUMBS_SEPARATOR_KEY } from './context';
+
     //------------------------------------------------------------------------------------------------------------------
 
     const props = withDefaults(defineProps<SkBreadcrumbsComponentProps>(), {
@@ -92,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));
 
     //------------------------------------------------------------------------------------------------------------------
 

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

@@ -63,13 +63,20 @@
      * @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
@@ -143,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
@@ -164,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,
     });
@@ -181,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>(() =>
     {
@@ -206,13 +242,17 @@
 
         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/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');
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Dropdown/SkDropdown.vue

@@ -94,6 +94,7 @@
 
     // Context
     import { NAVBAR_SIZE_KEY } from '../NavBar/context';
+    import { DROPDOWN_KIND_KEY } from './context';
 
     //------------------------------------------------------------------------------------------------------------------
 
@@ -170,7 +171,7 @@
     const effectiveSize = computed<SkDropdownSize>(() => props.size ?? navbarSize?.value ?? 'md');
 
     // Provide kind for submenus (reactive computed so changes propagate)
-    provide('dropdown-kind', computed(() => props.kind));
+    provide(DROPDOWN_KIND_KEY, computed(() => props.kind));
 
     //------------------------------------------------------------------------------------------------------------------
 

package/src/components/Dropdown/SkDropdownSubmenu.vue

@@ -75,6 +75,8 @@
     // Types
     import type { SkDropdownKind } from './types';
 
+    import { DROPDOWN_KIND_KEY } from './context';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkDropdownSubmenuComponentProps
@@ -105,12 +107,11 @@
     // Handle portal context (theme injection/re-provision for nested portal components)
     const { theme } = usePortalContext();
 
-    // Inject parent dropdown kind (will be a ComputedRef)
-    const parentKind = inject<any>('dropdown-kind', computed(() => 'neutral'));
+    const parentKind = inject(DROPDOWN_KIND_KEY, computed(() => undefined));
 
     //------------------------------------------------------------------------------------------------------------------
 
-    const effectiveKind = computed(() => props.kind || parentKind.value || 'neutral');
+    const effectiveKind = computed<SkDropdownKind>(() => props.kind ?? parentKind.value ?? 'neutral');
 
     //------------------------------------------------------------------------------------------------------------------
 

package/src/components/Dropdown/context.ts

@@ -0,0 +1,16 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Dropdown Context
+//
+// Injection key for nested SkDropdownSubmenu descendants to inherit the surrounding SkDropdown's
+// kind without manual wiring.
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComputedRef, InjectionKey } from 'vue';
+
+import type { SkDropdownKind } from './types';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export const DROPDOWN_KIND_KEY : InjectionKey<ComputedRef<SkDropdownKind | undefined>> = Symbol('sk-dropdown-kind');
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Field/SkField.test.ts

@@ -0,0 +1,88 @@
+//----------------------------------------------------------------------------------------------------------------------
+// SkField Tests — focuses on the validation-kind provide contract.
+//----------------------------------------------------------------------------------------------------------------------
+
+import { computed, defineComponent, h, inject } from 'vue';
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+
+import { inheritedKindKey, validationKindKey } from '@/composables/injectionKeys';
+
+import SkField from './SkField.vue';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+// Probe component that surfaces the validation-kind / inherited-kind it sees as data attributes.
+// Lets us assert what SkField actually puts on each channel without relying on a leaf form
+// component's class output.
+const Probe = defineComponent({
+    setup()
+    {
+        const validation = inject(validationKindKey, computed(() => 'NONE'));
+        const inherited = inject(inheritedKindKey, computed(() => 'NONE'));
+        return () => h('div', {
+            'data-validation': validation.value ?? 'undef',
+            'data-inherited': inherited.value ?? 'undef',
+        });
+    },
+});
+
+//----------------------------------------------------------------------------------------------------------------------
+
+function mountField(props : Record<string, unknown> = {}) : ReturnType<typeof mount>
+{
+    return mount(SkField, {
+        props,
+        slots: { default: () => h(Probe) },
+    });
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('SkField validation-kind contract', () =>
+{
+    it('provides undefined on validation-kind when state is null', () =>
+    {
+        const wrapper = mountField({ state: null });
+        expect(wrapper.find('[data-validation]').attributes('data-validation')).toBe('undef');
+    });
+
+    it('provides undefined on validation-kind when state is omitted', () =>
+    {
+        const wrapper = mountField();
+        expect(wrapper.find('[data-validation]').attributes('data-validation')).toBe('undef');
+    });
+
+    it('provides validKind on validation-kind when state is true', () =>
+    {
+        const wrapper = mountField({ state: true });
+        expect(wrapper.find('[data-validation]').attributes('data-validation')).toBe('success');
+    });
+
+    it('provides invalidKind on validation-kind when state is false', () =>
+    {
+        const wrapper = mountField({ state: false });
+        expect(wrapper.find('[data-validation]').attributes('data-validation')).toBe('danger');
+    });
+
+    it('honors custom validKind / invalidKind', () =>
+    {
+        const valid = mountField({ state: true, validKind: 'accent' });
+        expect(valid.find('[data-validation]').attributes('data-validation')).toBe('accent');
+
+        const invalid = mountField({ state: false, invalidKind: 'warning' });
+        expect(invalid.find('[data-validation]').attributes('data-validation')).toBe('warning');
+    });
+
+    it('does NOT touch the inherited-kind channel', () =>
+    {
+        // Validation override and ambient default live on separate channels. SkField must not
+        // bleed into inherited-kind, or an InputGroup further down the tree would pick up the
+        // validation kind as if it were an ambient default. The probe falls back to 'NONE' when
+        // no provider exists for inherited-kind — that's the assertion.
+        const wrapper = mountField({ state: false });
+        expect(wrapper.find('[data-inherited]').attributes('data-inherited')).toBe('NONE');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Field/SkField.vue

@@ -58,8 +58,12 @@
     import { computed, provide } from 'vue';
 
     // Types
+    import type { ComponentKind } from '@/types';
     import type { SkFieldLabelPosition } from './types';
 
+    // Composables
+    import { validationKindKey } from '@/composables/injectionKeys';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkFieldComponentProps
@@ -127,7 +131,7 @@
          * inputs via Vue's provide/inject system.
          * @default 'success'
          */
-        validKind ?: string;
+        validKind ?: ComponentKind;
 
         /**
          * Semantic kind to apply to the child input when `state` is `false` (invalid). Typically
@@ -135,7 +139,7 @@
          * inputs via Vue's provide/inject system.
          * @default 'danger'
          */
-        invalidKind ?: string;
+        invalidKind ?: ComponentKind;
     }
 
     //------------------------------------------------------------------------------------------------------------------
@@ -189,8 +193,10 @@
 
     //------------------------------------------------------------------------------------------------------------------
 
-    // Determine the kind to apply based on state prop
-    const effectiveKind = computed(() =>
+    // Determine the kind to apply based on state prop. Only emits a non-undefined value when the
+    // dev opted into validation by setting `state`; otherwise children fall through to their own
+    // kind prop / inherited-kind / default.
+    const effectiveKind = computed<ComponentKind | undefined>(() =>
     {
         if(props.state === true)
         {
@@ -200,13 +206,15 @@
         {
             return props.invalidKind;
         }
-        return undefined; // Let the input use its own kind prop
+        return undefined;
     });
 
     //------------------------------------------------------------------------------------------------------------------
 
-    // Provide kind to child inputs so they can automatically pick it up
-    provide('field-kind', effectiveKind);
+    // Validation channel: always wins over the child's prop and any inherited-kind ambient
+    // default. Only carries a value when `state` is set, so the absence of a state prop leaves
+    // children fully in control.
+    provide(validationKindKey, effectiveKind);
 
     //------------------------------------------------------------------------------------------------------------------