@skewedaspect/sleekspace-ui 0.9.1 → 0.10.0

package/src/components/InputGroup/types.ts

@@ -0,0 +1,27 @@
+//----------------------------------------------------------------------------------------------------------------------
+// InputGroup Component Types
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentCustomColors, ComponentKind, ComponentSize } from '@/types';
+import type { SkCorner } from '@/types/corners';
+
+export type SkInputGroupKind = ComponentKind;
+export type SkInputGroupSize = ComponentSize;
+
+export type SkInputGroupCorner = SkCorner;
+
+export type SkInputGroupAddonKind = SkInputGroupKind;
+export type SkInputGroupAddonSize = SkInputGroupSize;
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export interface SkInputGroupBaseProps extends ComponentCustomColors
+{
+    kind ?: SkInputGroupKind;
+    size ?: SkInputGroupSize;
+    corners ?: SkInputGroupCorner[];
+}
+
+export type SkInputGroupComponentProps = SkInputGroupBaseProps;
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Listbox/SkListbox.vue

@@ -71,7 +71,7 @@
      *                 to create visual dividers between groups of options.
      */
 
-    import { type ComputedRef, computed, inject, toRef } from 'vue';
+    import { computed, inject, toRef } from 'vue';
     import {
         ComboboxAnchor,
         ComboboxContent,
@@ -87,6 +87,13 @@
     import type { SkListboxKind, SkListboxSize } from './types';
 
     // Composables
+    import {
+        NO_KIND,
+        NO_SIZE,
+        inheritedKindKey,
+        inputGroupSizeKey,
+        validationKindKey,
+    } from '@/composables/injectionKeys';
     import { useCustomColors } from '@/composables/useCustomColors';
     import { usePortalContext } from '@/composables/usePortalContext';
 
@@ -131,7 +138,7 @@
 
     const props = withDefaults(defineProps<SkListboxComponentProps>(), {
         kind: undefined,
-        size: 'md',
+        size: undefined,
         placeholder: 'Search...',
         disabled: false,
     });
@@ -150,19 +157,33 @@
     // Handle portal context (theme injection/re-provision for nested portal components)
     const { theme } = usePortalContext();
 
-    // Inject field kind from parent SkField
-    const fieldKind = inject<ComputedRef<SkListboxKind | undefined>>('field-kind', computed(() => undefined));
+    const validationKind = inject(validationKindKey, NO_KIND);
+    const inheritedKind = inject(inheritedKindKey, NO_KIND);
+    const inputGroupSize = inject(inputGroupSizeKey, NO_SIZE);
 
     //------------------------------------------------------------------------------------------------------------------
 
-    const effectiveKind = computed(() => fieldKind.value || props.kind || 'neutral');
+    const effectiveKind = computed<SkListboxKind>(() =>
+    {
+        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<SkListboxSize>(() =>
+    {
+        if(props.size !== undefined) { return props.size; }
+        if(inputGroupSize.value !== undefined) { return inputGroupSize.value; }
+        return 'md';
+    });
 
     //------------------------------------------------------------------------------------------------------------------
 
     const wrapperClasses = computed(() => ({
         'sk-listbox': true,
         [`sk-${ effectiveKind.value }`]: true,
-        [`sk-${ props.size }`]: true,
+        [`sk-${ effectiveSize.value }`]: true,
     }));
 
     //------------------------------------------------------------------------------------------------------------------

package/src/components/NumberInput/SkNumberInput.vue

@@ -74,7 +74,7 @@
      * ```
      */
 
-    import { type ComputedRef, computed, inject, toRef } from 'vue';
+    import { computed, inject, toRef } from 'vue';
     import {
         NumberFieldDecrement,
         NumberFieldIncrement,
@@ -84,9 +84,16 @@
 
     // Types
     import type { ComponentCustomColors } from '@/types';
-    import type { SkNumberInputKind, SkNumberInputSize } from './types';
+    import type { SkNumberInputCorner, SkNumberInputKind, SkNumberInputSize } from './types';
 
     // Composables
+    import {
+        NO_KIND,
+        NO_SIZE,
+        inheritedKindKey,
+        inputGroupSizeKey,
+        validationKindKey,
+    } from '@/composables/injectionKeys';
     import { useCustomColors } from '@/composables/useCustomColors';
 
     //------------------------------------------------------------------------------------------------------------------
@@ -178,13 +185,19 @@
          * @default true
          */
         showSteppers ?: boolean;
+
+        /**
+         * Which corners receive the beveled cut. Pass an empty array for square corners.
+         * @default undefined (renders as ['top-right'])
+         */
+        corners ?: SkNumberInputCorner[];
     }
 
     //------------------------------------------------------------------------------------------------------------------
 
     const props = withDefaults(defineProps<SkNumberInputComponentProps>(), {
         kind: undefined,
-        size: 'md',
+        size: undefined,
         placeholder: undefined,
         disabled: false,
         readonly: false,
@@ -194,6 +207,7 @@
         max: undefined,
         step: 1,
         showSteppers: true,
+        corners: undefined,
     });
 
     //------------------------------------------------------------------------------------------------------------------
@@ -207,19 +221,37 @@
 
     //------------------------------------------------------------------------------------------------------------------
 
-    // Inject kind from parent SkField if available
-    const fieldKind = inject<ComputedRef<SkNumberInputKind | undefined>>('field-kind', computed(() => undefined));
+    const validationKind = inject(validationKindKey, NO_KIND);
+    const inheritedKind = inject(inheritedKindKey, NO_KIND);
+    const inputGroupSize = inject(inputGroupSizeKey, NO_SIZE);
 
     //------------------------------------------------------------------------------------------------------------------
 
-    const effectiveKind = computed(() => fieldKind.value || props.kind || 'neutral');
+    const effectiveKind = computed<SkNumberInputKind>(() =>
+    {
+        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<SkNumberInputSize>(() =>
+    {
+        if(props.size !== undefined) { return props.size; }
+        if(inputGroupSize.value !== undefined) { return inputGroupSize.value; }
+        return 'md';
+    });
 
     //------------------------------------------------------------------------------------------------------------------
 
     const wrapperClasses = computed(() => ({
         'sk-number-input-wrapper': true,
         [`sk-${ effectiveKind.value }`]: true,
-        [`sk-${ props.size }`]: true,
+        [`sk-${ effectiveSize.value }`]: true,
+        '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/NumberInput/types.ts

@@ -3,8 +3,10 @@
 //----------------------------------------------------------------------------------------------------------------------
 
 import type { ComponentKind, ComponentSize } from '@/types';
+import type { SkCorner } from '@/types/corners';
 
 export type SkNumberInputKind = ComponentKind;
 export type SkNumberInputSize = ComponentSize;
+export type SkNumberInputCorner = SkCorner;
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/components/Pagination/SkPagination.vue

@@ -81,6 +81,9 @@
     import type { ComponentCustomColors } from '@/types';
     import type { SkPaginationProps } from './types';
 
+    // Context
+    import { PAGINATION_KIND_KEY, PAGINATION_SIZE_KEY, PAGINATION_VARIANT_KEY } from './context';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkPaginationComponentProps extends SkPaginationProps, ComponentCustomColors
@@ -189,9 +192,9 @@
 
     //------------------------------------------------------------------------------------------------------------------
 
-    provide('pagination-kind', toRef(() => props.kind));
-    provide('pagination-size', toRef(() => props.size));
-    provide('pagination-variant', toRef(() => props.variant));
+    provide(PAGINATION_KIND_KEY, toRef(() => props.kind));
+    provide(PAGINATION_SIZE_KEY, toRef(() => props.size));
+    provide(PAGINATION_VARIANT_KEY, toRef(() => props.variant));
 
     //------------------------------------------------------------------------------------------------------------------
 

package/src/components/Pagination/SkPaginationItem.vue

@@ -39,10 +39,13 @@
      * ```
      */
 
-    import { type Ref, computed, inject } from 'vue';
+    import { computed, inject } from 'vue';
 
     // Types
-    import type { SkPaginationItemProps, SkPaginationKind, SkPaginationSize, SkPaginationVariant } from './types';
+    import type { SkPaginationItemProps } from './types';
+
+    // Context
+    import { PAGINATION_KIND_KEY, PAGINATION_SIZE_KEY, PAGINATION_VARIANT_KEY } from './context';
 
     //------------------------------------------------------------------------------------------------------------------
 
@@ -98,9 +101,9 @@
 
     //------------------------------------------------------------------------------------------------------------------
 
-    const kindRef = inject<Ref<SkPaginationKind>>('pagination-kind');
-    const sizeRef = inject<Ref<SkPaginationSize>>('pagination-size');
-    const variantRef = inject<Ref<SkPaginationVariant>>('pagination-variant');
+    const kindRef = inject(PAGINATION_KIND_KEY, undefined);
+    const sizeRef = inject(PAGINATION_SIZE_KEY, undefined);
+    const variantRef = inject(PAGINATION_VARIANT_KEY, undefined);
 
     const kind = computed(() => kindRef?.value ?? 'neutral');
     const size = computed(() => sizeRef?.value ?? 'md');

package/src/components/Pagination/context.ts

@@ -0,0 +1,19 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Pagination Context
+//
+// Injection keys for SkPaginationItem descendants to inherit kind, size, and variant from the
+// surrounding SkPagination without manual wiring.
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { InjectionKey, Ref } from 'vue';
+
+import type { SkPaginationKind, SkPaginationSize, SkPaginationVariant } from './types';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export const PAGINATION_KIND_KEY : InjectionKey<Ref<SkPaginationKind | undefined>> = Symbol('sk-pagination-kind');
+export const PAGINATION_SIZE_KEY : InjectionKey<Ref<SkPaginationSize | undefined>> = Symbol('sk-pagination-size');
+export const PAGINATION_VARIANT_KEY : InjectionKey<Ref<SkPaginationVariant | undefined>>
+    = Symbol('sk-pagination-variant');
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Panel/types.ts

@@ -3,6 +3,7 @@
 //----------------------------------------------------------------------------------------------------------------------
 
 import type { ComponentKind } from '@/types';
+import type { SkCorner } from '@/types/corners';
 
 //----------------------------------------------------------------------------------------------------------------------
 
@@ -12,7 +13,7 @@ export type SkPanelKind = ComponentKind;
 // Panel sizes (only affects cut size, not padding or dimensions)
 export type SkPanelSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
-// Which corners get the bevel cut
-export type SkPanelCorner = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
+// Re-export under the legacy name so consumers and SkPanel continue to compile unchanged.
+export type SkPanelCorner = SkCorner;
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/components/Radio/SkRadio.vue

@@ -46,7 +46,7 @@
      *                 formatting, icons, or complex layouts alongside the radio button.
      */
 
-    import { type ComputedRef, computed, inject, toRef, useSlots } from 'vue';
+    import { computed, inject, toRef, useSlots } from 'vue';
     import { RadioGroupIndicator, RadioGroupItem } from 'reka-ui';
 
     // Types
@@ -56,6 +56,9 @@
     // Composables
     import { useCustomColors } from '@/composables/useCustomColors';
 
+    // Context
+    import { RADIO_KIND_KEY, RADIO_SIZE_KEY } from './context';
+
     // Utils
     import { hasSlotContent } from '@/utils/slots';
 
@@ -118,8 +121,8 @@
     //------------------------------------------------------------------------------------------------------------------
 
     // Inject parent kind and size
-    const parentKind = inject<ComputedRef<SkRadioKind | undefined>>('radio-kind', computed(() => undefined));
-    const parentSize = inject<ComputedRef<SkRadioSize | undefined>>('radio-size', computed(() => undefined));
+    const parentKind = inject(RADIO_KIND_KEY, computed(() => undefined));
+    const parentSize = inject(RADIO_SIZE_KEY, computed(() => undefined));
 
     //------------------------------------------------------------------------------------------------------------------
 

package/src/components/Radio/SkRadioGroup.vue

@@ -49,6 +49,8 @@
     // Types
     import type { SkRadioGroupOrientation, SkRadioKind, SkRadioSize } from './types';
 
+    import { RADIO_KIND_KEY, RADIO_SIZE_KEY } from './context';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkRadioGroupComponentProps
@@ -134,8 +136,8 @@
     //------------------------------------------------------------------------------------------------------------------
 
     // Provide kind and size to child radios
-    provide('radio-kind', computed(() => props.kind));
-    provide('radio-size', computed(() => props.size));
+    provide(RADIO_KIND_KEY, computed(() => props.kind));
+    provide(RADIO_SIZE_KEY, computed(() => props.size));
 
     //------------------------------------------------------------------------------------------------------------------
 

package/src/components/Radio/context.ts

@@ -0,0 +1,17 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Radio Context
+//
+// Injection keys for SkRadio descendants to inherit kind and size from the surrounding
+// SkRadioGroup without manual wiring.
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComputedRef, InjectionKey } from 'vue';
+
+import type { SkRadioKind, SkRadioSize } from './types';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export const RADIO_KIND_KEY : InjectionKey<ComputedRef<SkRadioKind | undefined>> = Symbol('sk-radio-kind');
+export const RADIO_SIZE_KEY : InjectionKey<ComputedRef<SkRadioSize | undefined>> = Symbol('sk-radio-size');
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Select/SkSelect.vue

@@ -72,7 +72,7 @@
      *                 to create visual dividers between groups of options.
      */
 
-    import { type ComputedRef, computed, inject, provide, reactive, toRef } from 'vue';
+    import { computed, inject, provide, reactive, toRef } from 'vue';
     import {
         SelectContent,
         SelectPortal,
@@ -84,9 +84,16 @@
 
     // Types
     import type { ComponentCustomColors } from '@/types';
-    import type { SkSelectKind, SkSelectSize } from './types';
+    import type { SkSelectCorner, SkSelectKind, SkSelectSize } from './types';
 
     // Composables
+    import {
+        NO_KIND,
+        NO_SIZE,
+        inheritedKindKey,
+        inputGroupSizeKey,
+        validationKindKey,
+    } from '@/composables/injectionKeys';
     import { useCustomColors } from '@/composables/useCustomColors';
     import { usePortalContext } from '@/composables/usePortalContext';
 
@@ -124,15 +131,22 @@
          * @default false
          */
         disabled ?: boolean;
+
+        /**
+         * Which corners receive the beveled cut. Pass an empty array for square corners.
+         * @default undefined (renders as ['top-right'])
+         */
+        corners ?: SkSelectCorner[];
     }
 
     //------------------------------------------------------------------------------------------------------------------
 
     const props = withDefaults(defineProps<SkSelectComponentProps>(), {
         kind: undefined,
-        size: 'md',
+        size: undefined,
         placeholder: 'Select...',
         disabled: false,
+        corners: undefined,
     });
 
     //------------------------------------------------------------------------------------------------------------------
@@ -148,8 +162,9 @@
     // Handle portal context (theme injection/re-provision for nested portal components)
     const { theme } = usePortalContext();
 
-    // Inject field kind from parent SkField
-    const fieldKind = inject<ComputedRef<SkSelectKind | undefined>>('field-kind', computed(() => undefined));
+    const validationKind = inject(validationKindKey, NO_KIND);
+    const inheritedKind = inject(inheritedKindKey, NO_KIND);
+    const inputGroupSize = inject(inputGroupSizeKey, NO_SIZE);
 
     //------------------------------------------------------------------------------------------------------------------
 
@@ -175,14 +190,31 @@
 
     //------------------------------------------------------------------------------------------------------------------
 
-    const effectiveKind = computed(() => fieldKind.value || props.kind || 'neutral');
+    const effectiveKind = computed<SkSelectKind>(() =>
+    {
+        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<SkSelectSize>(() =>
+    {
+        if(props.size !== undefined) { return props.size; }
+        if(inputGroupSize.value !== undefined) { return inputGroupSize.value; }
+        return 'md';
+    });
 
     //------------------------------------------------------------------------------------------------------------------
 
     const wrapperClasses = computed(() => ({
         'sk-select': true,
         [`sk-${ effectiveKind.value }`]: true,
-        [`sk-${ props.size }`]: true,
+        [`sk-${ effectiveSize.value }`]: true,
+        '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/Select/types.ts

@@ -3,8 +3,10 @@
 //----------------------------------------------------------------------------------------------------------------------
 
 import type { ComponentKind, ComponentSize } from '@/types';
+import type { SkCorner } from '@/types/corners';
 
 export type SkSelectKind = ComponentKind;
 export type SkSelectSize = ComponentSize;
+export type SkSelectCorner = SkCorner;
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/components/Tabs/SkTab.vue

@@ -47,11 +47,13 @@
      * @slot icon - Optional icon displayed before the tab label. Useful for visual indicators.
      */
 
-    import { type ComputedRef, type Slots, computed, inject, useSlots } from 'vue';
+    import { type Slots, computed, inject, useSlots } from 'vue';
     import { TabsTrigger } from 'reka-ui';
     import type { ComponentKind } from '@/types';
     import { hasSlotContent } from '@/utils/slots';
 
+    import { TABS_KIND_KEY } from './context';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkTabComponentProps
@@ -99,7 +101,7 @@
     //------------------------------------------------------------------------------------------------------------------
 
     // Inject parent kind (Sleekspace-specific for theming)
-    const parentKind = inject<ComputedRef<ComponentKind | undefined>>('tabs-kind', computed(() => undefined));
+    const parentKind = inject(TABS_KIND_KEY, computed(() => undefined));
 
     // Use prop kind if provided, otherwise use parent kind
     const kind = computed(() => props.kind ?? parentKind.value);

package/src/components/Tabs/SkTabList.vue

@@ -37,6 +37,8 @@
     import { TabsList } from 'reka-ui';
     import type { SkTabsOrientation } from './types.ts';
 
+    import { TABS_ORIENTATION_KEY } from './context';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkTabListComponentProps
@@ -60,11 +62,11 @@
     // Inject orientation from parent (if prop not provided)
     // Note: RekaUI's TabsList gets orientation from TabsRoot context automatically,
     // but we need it for our styling classes
-    const contextOrientation = inject<any>('tabs-orientation', 'horizontal');
+    const contextOrientation = inject(TABS_ORIENTATION_KEY, computed(() => 'horizontal' as const));
 
     //------------------------------------------------------------------------------------------------------------------
 
-    const effectiveOrientation = computed(() => props.orientation || contextOrientation.value);
+    const effectiveOrientation = computed(() => props.orientation ?? contextOrientation.value);
 
     const classes = computed(() =>
     {

package/src/components/Tabs/SkTabs.vue

@@ -49,6 +49,8 @@
     import type { ComponentCustomColors, ComponentKind } from '@/types';
     import { useCustomColors } from '@/composables/useCustomColors';
 
+    import { TABS_KIND_KEY, TABS_ORIENTATION_KEY, TABS_PLACEMENT_KEY } from './context';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkTabsComponentProps extends ComponentCustomColors
@@ -106,9 +108,9 @@
 
     // Provide our custom props to child components for styling
     // (RekaUI handles its own context internally, but we need these for our CSS classes)
-    provide('tabs-orientation', computed(() => props.orientation));
-    provide('tabs-placement', computed(() => props.placement));
-    provide('tabs-kind', computed(() => props.kind));
+    provide(TABS_ORIENTATION_KEY, computed(() => props.orientation));
+    provide(TABS_PLACEMENT_KEY, computed(() => props.placement));
+    provide(TABS_KIND_KEY, computed(() => props.kind));
 
     //------------------------------------------------------------------------------------------------------------------
 

package/src/components/Tabs/context.ts

@@ -0,0 +1,19 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Tabs Context
+//
+// Injection keys for SkTab / SkTabList descendants to inherit kind, orientation, and placement
+// from the surrounding SkTabs without manual wiring.
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComputedRef, InjectionKey } from 'vue';
+
+import type { ComponentKind } from '@/types';
+import type { SkTabsOrientation, SkTabsPlacement } from './types';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export const TABS_KIND_KEY : InjectionKey<ComputedRef<ComponentKind | undefined>> = Symbol('sk-tabs-kind');
+export const TABS_ORIENTATION_KEY : InjectionKey<ComputedRef<SkTabsOrientation>> = Symbol('sk-tabs-orientation');
+export const TABS_PLACEMENT_KEY : InjectionKey<ComputedRef<SkTabsPlacement>> = Symbol('sk-tabs-placement');
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/TagsInput/SkTagsInput.vue

@@ -64,7 +64,7 @@
      * @slot - Not applicable. This component does not accept slot content.
      */
 
-    import { type ComputedRef, computed, inject, toRef } from 'vue';
+    import { computed, inject, toRef } from 'vue';
     import {
         TagsInputInput,
         TagsInputItem,
@@ -78,6 +78,13 @@
     import type { SkTagsInputKind, SkTagsInputSize } from './types';
 
     // Composables
+    import {
+        NO_KIND,
+        NO_SIZE,
+        inheritedKindKey,
+        inputGroupSizeKey,
+        validationKindKey,
+    } from '@/composables/injectionKeys';
     import { useCustomColors } from '@/composables/useCustomColors';
 
     //------------------------------------------------------------------------------------------------------------------
@@ -151,7 +158,7 @@
 
     const props = withDefaults(defineProps<SkTagsInputComponentProps>(), {
         kind: undefined,
-        size: 'md',
+        size: undefined,
         placeholder: 'Add tag...',
         disabled: false,
         max: undefined,
@@ -172,12 +179,26 @@
 
     //------------------------------------------------------------------------------------------------------------------
 
-    // Inject field kind
-    const fieldKind = inject<ComputedRef<SkTagsInputKind | undefined>>('field-kind', computed(() => undefined));
+    const validationKind = inject(validationKindKey, NO_KIND);
+    const inheritedKind = inject(inheritedKindKey, NO_KIND);
+    const inputGroupSize = inject(inputGroupSizeKey, NO_SIZE);
 
     //------------------------------------------------------------------------------------------------------------------
 
-    const effectiveKind = computed(() => fieldKind.value || props.kind || 'neutral');
+    const effectiveKind = computed<SkTagsInputKind>(() =>
+    {
+        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<SkTagsInputSize>(() =>
+    {
+        if(props.size !== undefined) { return props.size; }
+        if(inputGroupSize.value !== undefined) { return inputGroupSize.value; }
+        return 'md';
+    });
 
     //------------------------------------------------------------------------------------------------------------------
 
@@ -204,7 +225,7 @@
     const wrapperClasses = computed(() => ({
         'sk-tags-input': true,
         [`sk-${ effectiveKind.value }`]: true,
-        [`sk-${ props.size }`]: true,
+        [`sk-${ effectiveSize.value }`]: true,
     }));
 
     //------------------------------------------------------------------------------------------------------------------
@@ -218,7 +239,7 @@
     const tagClasses = computed(() => ({
         [`sk-${ effectiveTagKind.value }`]: true,
         [`sk-${ props.tagVariant }`]: true,
-        [`sk-${ props.size }`]: true,
+        [`sk-${ effectiveSize.value }`]: true,
     }));
 
     //------------------------------------------------------------------------------------------------------------------