@skewedaspect/sleekspace-ui 0.9.0 → 0.10.0

package/src/components/Page/SkPage.vue

@@ -4,11 +4,11 @@
 
 <template>
     <div ref="rootRef" :class="classes" :style="customStyles" :data-scheme="theme">
-        <header v-if="$slots.header" class="sk-page-header">
+        <header v-if="hasSlotContent(slots.header)" class="sk-page-header">
             <slot name="header" />
         </header>
 
-        <div v-if="$slots.subheader" class="sk-page-subheader">
+        <div v-if="hasSlotContent(slots.subheader)" class="sk-page-subheader">
             <slot name="subheader" />
         </div>
 
@@ -18,25 +18,25 @@
                 v-if="hasSidebar && !isSidebarDrawerActive"
                 class="sk-page-sidebar"
             >
-                <div v-if="$slots['sidebar-header']" class="sk-page-sidebar-header">
+                <div v-if="hasSlotContent(slots['sidebar-header'])" class="sk-page-sidebar-header">
                     <slot name="sidebar-header" :is-drawer="false" />
                 </div>
                 <div class="sk-page-sidebar-body">
                     <slot name="sidebar" :is-drawer="false" />
                 </div>
-                <div v-if="$slots['sidebar-footer']" class="sk-page-sidebar-footer">
+                <div v-if="hasSlotContent(slots['sidebar-footer'])" class="sk-page-sidebar-footer">
                     <slot name="sidebar-footer" :is-drawer="false" />
                 </div>
             </aside>
 
             <div class="sk-page-center">
-                <div v-if="$slots['main-header']" class="sk-page-main-header">
+                <div v-if="hasSlotContent(slots['main-header'])" class="sk-page-main-header">
                     <slot name="main-header" />
                 </div>
                 <main class="sk-page-content">
                     <slot />
                 </main>
-                <div v-if="$slots['main-footer']" class="sk-page-main-footer">
+                <div v-if="hasSlotContent(slots['main-footer'])" class="sk-page-main-footer">
                     <slot name="main-footer" />
                 </div>
             </div>
@@ -46,19 +46,19 @@
                 v-if="hasAside && !isAsideDrawerActive"
                 class="sk-page-aside"
             >
-                <div v-if="$slots['aside-header']" class="sk-page-aside-header">
+                <div v-if="hasSlotContent(slots['aside-header'])" class="sk-page-aside-header">
                     <slot name="aside-header" :is-drawer="false" />
                 </div>
                 <div class="sk-page-aside-body">
                     <slot name="aside" :is-drawer="false" />
                 </div>
-                <div v-if="$slots['aside-footer']" class="sk-page-aside-footer">
+                <div v-if="hasSlotContent(slots['aside-footer'])" class="sk-page-aside-footer">
                     <slot name="aside-footer" :is-drawer="false" />
                 </div>
             </aside>
         </div>
 
-        <footer v-if="$slots.footer" class="sk-page-footer">
+        <footer v-if="hasSlotContent(slots.footer)" class="sk-page-footer">
             <slot name="footer" />
         </footer>
 
@@ -84,13 +84,13 @@
                     tabindex="-1"
                     @click="onSidebarDrawerClick"
                 >
-                    <div v-if="$slots['sidebar-header']" class="sk-page-sidebar-header">
+                    <div v-if="hasSlotContent(slots['sidebar-header'])" class="sk-page-sidebar-header">
                         <slot name="sidebar-header" :is-drawer="true" />
                     </div>
                     <div class="sk-page-sidebar-body">
                         <slot name="sidebar" :is-drawer="true" />
                     </div>
-                    <div v-if="$slots['sidebar-footer']" class="sk-page-sidebar-footer">
+                    <div v-if="hasSlotContent(slots['sidebar-footer'])" class="sk-page-sidebar-footer">
                         <slot name="sidebar-footer" :is-drawer="true" />
                     </div>
                 </aside>
@@ -119,13 +119,13 @@
                     tabindex="-1"
                     @click="onAsideDrawerClick"
                 >
-                    <div v-if="$slots['aside-header']" class="sk-page-aside-header">
+                    <div v-if="hasSlotContent(slots['aside-header'])" class="sk-page-aside-header">
                         <slot name="aside-header" :is-drawer="true" />
                     </div>
                     <div class="sk-page-aside-body">
                         <slot name="aside" :is-drawer="true" />
                     </div>
-                    <div v-if="$slots['aside-footer']" class="sk-page-aside-footer">
+                    <div v-if="hasSlotContent(slots['aside-footer'])" class="sk-page-aside-footer">
                         <slot name="aside-footer" :is-drawer="true" />
                     </div>
                 </aside>
@@ -199,6 +199,9 @@
     import { useFocusTrap } from '@/composables/useFocusTrap';
     import { providePageDrawers } from '@/composables/usePageDrawer';
 
+    // Utils
+    import { hasSlotContent } from '@/utils/slots';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkPageComponentProps
@@ -332,8 +335,8 @@
     // Slot-derived state
     //------------------------------------------------------------------------------------------------------------------
 
-    const hasSidebar = computed<boolean>(() => Boolean(slots.sidebar));
-    const hasAside = computed<boolean>(() => Boolean(slots.aside));
+    const hasSidebar = computed<boolean>(() => hasSlotContent(slots.sidebar));
+    const hasAside = computed<boolean>(() => hasSlotContent(slots.aside));
 
     //------------------------------------------------------------------------------------------------------------------
     // Responsive mode detection — driven by SkPage's own width, not the viewport, so embedded

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/Popover/SkPopover.vue

@@ -14,7 +14,7 @@
                 :collision-padding="8"
             >
                 <!-- Header -->
-                <div v-if="title || $slots.header" class="sk-popover-header">
+                <div v-if="title || hasSlotContent(slots.header)" class="sk-popover-header">
                     <h3 v-if="title" class="sk-popover-title">
                         {{ title }}
                     </h3>
@@ -42,12 +42,12 @@
                 </div>
 
                 <!-- Content -->
-                <div v-if="$slots.default" class="sk-popover-body">
+                <div v-if="hasSlotContent(slots.default)" class="sk-popover-body">
                     <slot />
                 </div>
 
                 <!-- Footer -->
-                <div v-if="$slots.footer" class="sk-popover-footer">
+                <div v-if="hasSlotContent(slots.footer)" class="sk-popover-footer">
                     <slot name="footer" />
                 </div>
 
@@ -100,7 +100,7 @@
      *   button pairs or other closing actions.
      */
 
-    import { computed, toRef } from 'vue';
+    import { type Slots, computed, toRef, useSlots } from 'vue';
     import {
         PopoverArrow,
         PopoverClose,
@@ -118,6 +118,9 @@
     import { useCustomColors } from '@/composables/useCustomColors';
     import { usePortalContext } from '@/composables/usePortalContext';
 
+    // Utils
+    import { hasSlotContent } from '@/utils/slots';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkPopoverComponentProps extends ComponentCustomColors
@@ -223,6 +226,10 @@
 
     //------------------------------------------------------------------------------------------------------------------
 
+    const slots : Slots = useSlots();
+
+    //------------------------------------------------------------------------------------------------------------------
+
     const contentClasses = computed(() => ({
         'sk-popover-content': true,
         [`sk-${ props.kind }`]: true,

package/src/components/Radio/SkRadio.vue

@@ -12,7 +12,7 @@
         >
             <RadioGroupIndicator class="sk-radio-indicator" />
         </RadioGroupItem>
-        <span v-if="label || $slots.default" class="sk-radio-label">
+        <span v-if="label || hasSlotContent(slots.default)" class="sk-radio-label">
             <slot>{{ label }}</slot>
         </span>
     </label>
@@ -46,7 +46,7 @@
      *                 formatting, icons, or complex layouts alongside the radio button.
      */
 
-    import { type ComputedRef, computed, inject, toRef } from 'vue';
+    import { computed, inject, toRef, useSlots } from 'vue';
     import { RadioGroupIndicator, RadioGroupItem } from 'reka-ui';
 
     // Types
@@ -56,6 +56,12 @@
     // Composables
     import { useCustomColors } from '@/composables/useCustomColors';
 
+    // Context
+    import { RADIO_KIND_KEY, RADIO_SIZE_KEY } from './context';
+
+    // Utils
+    import { hasSlotContent } from '@/utils/slots';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkRadioComponentProps extends ComponentCustomColors
@@ -110,9 +116,13 @@
 
     //------------------------------------------------------------------------------------------------------------------
 
+    const slots = useSlots();
+
+    //------------------------------------------------------------------------------------------------------------------
+
     // 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/Switch/SkSwitch.vue

@@ -18,17 +18,17 @@
         </SwitchRoot>
         <label v-if="showLabel" class="sk-switch-label">
             <!-- Default slot overrides everything -->
-            <slot v-if="slots.default" />
+            <slot v-if="hasSlotContent(slots.default)" />
             <!-- If using on/off labels with animation -->
             <Transition v-else-if="useOnOffLabels && !disableLabelAnimation" name="sk-switch-label-fade" mode="out-in">
                 <span v-if="modelValue" :key="'on'">
-                    <slot v-if="slots['label-on']" name="label-on" />
+                    <slot v-if="hasSlotContent(slots['label-on'])" name="label-on" />
                     <template v-else>
                         {{ labelOn }}
                     </template>
                 </span>
                 <span v-else :key="'off'">
-                    <slot v-if="slots['label-off']" name="label-off" />
+                    <slot v-if="hasSlotContent(slots['label-off'])" name="label-off" />
                     <template v-else>
                         {{ labelOff }}
                     </template>
@@ -37,13 +37,13 @@
             <!-- If using on/off labels without animation -->
             <template v-else-if="useOnOffLabels && disableLabelAnimation">
                 <span v-if="modelValue">
-                    <slot v-if="slots['label-on']" name="label-on" />
+                    <slot v-if="hasSlotContent(slots['label-on'])" name="label-on" />
                     <template v-else>
                         {{ labelOn }}
                     </template>
                 </span>
                 <span v-else>
-                    <slot v-if="slots['label-off']" name="label-off" />
+                    <slot v-if="hasSlotContent(slots['label-off'])" name="label-off" />
                     <template v-else>
                         {{ labelOff }}
                     </template>
@@ -88,6 +88,9 @@
     // Composables
     import { useCustomColors } from '@/composables/useCustomColors';
 
+    // Utils
+    import { hasSlotContent } from '@/utils/slots';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkSwitchComponentProps extends ComponentCustomColors
@@ -232,14 +235,12 @@
         // - labelOn/labelOff props are provided, OR
         // - label-on/label-off slots are provided, OR
         // - fallback label prop is provided
-        return Boolean(
-            slots.default
-                || props.labelOn
-                || props.labelOff
-                || slots['label-on']
-                || slots['label-off']
-                || props.label
-        );
+        return hasSlotContent(slots.default)
+            || Boolean(props.labelOn)
+            || Boolean(props.labelOff)
+            || hasSlotContent(slots['label-on'])
+            || hasSlotContent(slots['label-off'])
+            || Boolean(props.label);
     });
 
     const useOnOffLabels = computed(() =>

package/src/components/Tabs/SkTab.vue

@@ -8,7 +8,7 @@
         :disabled="disabled"
         :class="classes"
     >
-        <span v-if="$slots.icon" class="sk-tab-icon">
+        <span v-if="hasSlotContent(slots.icon)" class="sk-tab-icon">
             <slot name="icon" />
         </span>
         <span class="sk-tab-label">
@@ -47,9 +47,12 @@
      * @slot icon - Optional icon displayed before the tab label. Useful for visual indicators.
      */
 
-    import { type ComputedRef, computed, inject } 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';
 
     //------------------------------------------------------------------------------------------------------------------
 
@@ -93,8 +96,12 @@
 
     //------------------------------------------------------------------------------------------------------------------
 
+    const slots : Slots = useSlots();
+
+    //------------------------------------------------------------------------------------------------------------------
+
     // 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');
+
+//----------------------------------------------------------------------------------------------------------------------