@skewedaspect/sleekspace-ui 0.8.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skewedaspect/sleekspace-ui",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "A Vue 3 component library with a cyberpunk aesthetic, featuring OKLCH colors, beveled corners, and a powerful design token system",
   "type": "module",
   "main": "dist/sleekspace-ui.umd.js",
@@ -13,10 +13,19 @@
       "import": "./dist/sleekspace-ui.es.js",
       "require": "./dist/sleekspace-ui.umd.js"
     },
+    "./global": {
+      "types": "./dist/global.d.ts"
+    },
     "./style": "./dist/sleekspace-ui.css",
+    "./css": "./dist/sleekspace-ui.css",
     "./styles/source": "./src/styles/index.scss",
     "./styles/mixins/responsive": "./src/styles/mixins/_responsive.scss",
-    "./tokens.css": "./dist/tokens.css"
+    "./tokens.css": "./dist/tokens.css",
+    "./static": {
+      "types": "./dist/static/index.d.ts",
+      "import": "./dist/static/index.es.js",
+      "require": "./dist/static/index.cjs.js"
+    }
   },
   "files": [
     "dist",
@@ -29,12 +38,14 @@
     "LICENSE"
   ],
   "scripts": {
-    "dev": "vite build --watch",
-    "build": "npm run generate:types && vue-docgen-web-types && vite build && npm run build:tokens && npm run copy:docs && npm run generate:llms",
+    "dev": "concurrently -n vite,tokens -c cyan,magenta \"vite build --watch\" \"sass --watch src/styles/tokens.scss dist/tokens.css --no-source-map\"",
+    "build": "npm run generate:static-types && npm run generate:web-types && vite build && npm run generate:types && npm run build:static && npm run build:tokens && npm run copy:docs && npm run generate:llms",
+    "build:static": "vite build -c vite.static.config.ts",
     "build:tokens": "sass src/styles/tokens.scss dist/tokens.css --no-source-map",
     "copy:docs": "cp ../../Readme.md README.md && cp ../../LICENSE LICENSE",
     "generate:types": "tsx scripts/generate-global-types.ts",
-    "generate:web-types": "vue-docgen-web-types",
+    "generate:static-types": "node scripts/generate-static-types.ts",
+    "generate:web-types": "vue-docgen-web-types --configFile web-types.config.cjs && tsx scripts/patch-web-types.ts",
     "generate:api-docs": "node ../docs-site/scripts/generate-api-docs.ts",
     "generate:llms": "npm run generate:api-docs && node ../docs-site/scripts/generate-llms-txt.ts --output-dir=.",
     "lint": "eslint src"

package/src/components/Card/SkCard.vue

@@ -10,6 +10,7 @@
         :no-border="noBorder"
         :base-color="baseColor"
         :text-color="textColor"
+        :border-color="borderColor"
         :corners="corners"
         :decoration-corner="decorationCorner"
         :class="classes"

package/src/components/ContextMenu/SkContextMenuRadioGroup.vue

@@ -3,7 +3,10 @@
   --------------------------------------------------------------------------------------------------------------------->
 
 <template>
-    <ContextMenuRadioGroup :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)">
+    <ContextMenuRadioGroup
+        :model-value="modelValue"
+        @update:model-value="$emit('update:modelValue', $event as string)"
+    >
         <slot />
     </ContextMenuRadioGroup>
 </template>

package/src/components/Dropdown/SkDropdown.vue

@@ -6,7 +6,7 @@
     <DropdownMenuRoot>
         <DropdownMenuTrigger as-child>
             <slot name="trigger">
-                <SkButton :kind="kind">
+                <SkButton :kind="kind" :size="effectiveSize">
                     {{ triggerText }}
                     <template #trailing>
                         <svg
@@ -73,7 +73,7 @@
      *                 SkDropdownSubmenu components.
      */
 
-    import { computed, provide, toRef } from 'vue';
+    import { type Ref, computed, inject, provide, toRef } from 'vue';
     import {
         DropdownMenuContent,
         DropdownMenuPortal,
@@ -83,7 +83,7 @@
 
     // Types
     import type { ComponentCustomColors } from '@/types';
-    import type { SkDropdownAlign, SkDropdownKind, SkDropdownSide } from './types';
+    import type { SkDropdownAlign, SkDropdownKind, SkDropdownSide, SkDropdownSize } from './types';
 
     // Components
     import SkButton from '../Button/SkButton.vue';
@@ -92,6 +92,9 @@
     import { useCustomColors } from '@/composables/useCustomColors';
     import { usePortalContext } from '@/composables/usePortalContext';
 
+    // Context
+    import { NAVBAR_SIZE_KEY } from '../NavBar/context';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkDropdownComponentProps extends ComponentCustomColors
@@ -135,6 +138,14 @@
          * @default 4
          */
         sideOffset ?: number;
+
+        /**
+         * Size of the default trigger button. When omitted and the dropdown is rendered inside
+         * an SkNavBar, falls back to the navbar's `size` prop so the trigger naturally matches
+         * surrounding nav controls. Ignored when the `trigger` slot is used.
+         * @default 'md' (or navbar size when nested in an SkNavBar)
+         */
+        size ?: SkDropdownSize;
     }
 
     //------------------------------------------------------------------------------------------------------------------
@@ -145,6 +156,7 @@
         side: 'bottom',
         align: 'start',
         sideOffset: 4,
+        size: undefined,
     });
 
     //------------------------------------------------------------------------------------------------------------------
@@ -152,6 +164,11 @@
     // Handle portal context (theme injection/re-provision for nested portal components)
     const { theme } = usePortalContext();
 
+    // Pick up the navbar's size when nested inside an SkNavBar so the trigger fits the bar.
+    const navbarSize = inject<Ref<SkDropdownSize> | undefined>(NAVBAR_SIZE_KEY, undefined);
+
+    const effectiveSize = computed<SkDropdownSize>(() => props.size ?? navbarSize?.value ?? 'md');
+
     // Provide kind for submenus (reactive computed so changes propagate)
     provide('dropdown-kind', computed(() => props.kind));
 

package/src/components/Dropdown/SkDropdownRadioGroup.vue

@@ -3,7 +3,10 @@
   --------------------------------------------------------------------------------------------------------------------->
 
 <template>
-    <DropdownMenuRadioGroup :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)">
+    <DropdownMenuRadioGroup
+        :model-value="modelValue"
+        @update:model-value="$emit('update:modelValue', $event as string)"
+    >
         <slot />
     </DropdownMenuRadioGroup>
 </template>

package/src/components/Dropdown/types.ts

@@ -2,9 +2,10 @@
 // Dropdown Component Types
 //----------------------------------------------------------------------------------------------------------------------
 
-import type { ComponentKind } from '@/types';
+import type { ComponentKind, ComponentSize } from '@/types';
 
 export type SkDropdownKind = ComponentKind;
+export type SkDropdownSize = ComponentSize;
 export type SkDropdownSide = 'top' | 'right' | 'bottom' | 'left';
 export type SkDropdownAlign = 'start' | 'center' | 'end';
 

package/src/components/NavBar/SkNavBar.vue

@@ -59,10 +59,10 @@
      */
 
     import { computed, provide, toRef, useSlots } from 'vue';
-    import type { SkNavBarKind } from './types';
+    import type { SkNavBarKind, SkNavBarSize } from './types';
     import type { ComponentCustomColors } from '@/types';
     import { useCustomColors } from '@/composables/useCustomColors';
-    import { NAVBAR_KIND_KEY } from './context';
+    import { NAVBAR_KIND_KEY, NAVBAR_SIZE_KEY } from './context';
 
     //------------------------------------------------------------------------------------------------------------------
 
@@ -83,6 +83,14 @@
          * @default true
          */
         sticky ?: boolean;
+
+        /**
+         * Default size for descendant components (buttons, dropdowns, sidebar toggles, etc.) that
+         * read the navbar context. Picks a size that fits the navbar's 4rem height without
+         * overflowing. Descendants can still override with their own `size` prop.
+         * @default 'md'
+         */
+        size ?: SkNavBarSize;
     }
 
     //------------------------------------------------------------------------------------------------------------------
@@ -90,11 +98,13 @@
     const props = withDefaults(defineProps<SkNavBarComponentProps>(), {
         kind: 'neutral',
         sticky: true,
+        size: 'md',
     });
 
-    // Expose the navbar's kind to descendants so components like SkPageSidebarToggle can default
-    // to the surrounding navbar's color scheme without the user wiring it manually.
+    // Expose the navbar's kind and size to descendants so components like SkPageSidebarToggle and
+    // SkDropdown can default to the surrounding navbar's look without the user wiring it manually.
     provide(NAVBAR_KIND_KEY, toRef(() => props.kind));
+    provide(NAVBAR_SIZE_KEY, toRef(() => props.size));
 
     //------------------------------------------------------------------------------------------------------------------
 

package/src/components/NavBar/context.ts

@@ -1,16 +1,18 @@
 //----------------------------------------------------------------------------------------------------------------------
 // NavBar Context
 //
-// Injection key for descendants (e.g. SkPageSidebarToggle) that want to inherit the surrounding
-// navbar's kind without the user wiring it manually.
+// Injection keys for descendants (e.g. SkPageSidebarToggle, SkDropdown) that want to inherit the
+// surrounding navbar's kind/size without the user wiring it manually.
 //----------------------------------------------------------------------------------------------------------------------
 
 import type { InjectionKey, Ref } from 'vue';
 
+import type { ComponentSize } from '@/types';
 import type { SkNavBarKind } from './types';
 
 //----------------------------------------------------------------------------------------------------------------------
 
 export const NAVBAR_KIND_KEY : InjectionKey<Ref<SkNavBarKind>> = Symbol('sk-navbar-kind');
+export const NAVBAR_SIZE_KEY : InjectionKey<Ref<ComponentSize>> = Symbol('sk-navbar-size');
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/components/NavBar/types.ts

@@ -2,7 +2,7 @@
 // NavBar Types
 //----------------------------------------------------------------------------------------------------------------------
 
-import type { ComponentKind } from '@/types';
+import type { ComponentKind, ComponentSize } from '@/types';
 
 //----------------------------------------------------------------------------------------------------------------------
 
@@ -12,4 +12,9 @@ import type { ComponentKind } from '@/types';
  */
 export type SkNavBarKind = ComponentKind;
 
+/**
+ * Size hint propagated to descendant controls (buttons, dropdowns, sidebar toggles).
+ */
+export type SkNavBarSize = ComponentSize;
+
 //----------------------------------------------------------------------------------------------------------------------

package/src/components/Page/SkPage.vue

@@ -279,6 +279,15 @@
          * @default false
          */
         flush ?: boolean;
+
+        /**
+         * When true, disables the bouncy overscroll / rubber-band effect on the page's scroll
+         * containers (main content, sidebar body, aside body). Applies `overscroll-behavior: none`
+         * to every scrollable region owned by SkPage. Note: the document-level bounce from scrolling
+         * the page itself (outside SkPage's containers) can only be killed on `html`/`body`.
+         * @default false
+         */
+        noBounce ?: boolean;
     }
 
     //------------------------------------------------------------------------------------------------------------------
@@ -296,6 +305,7 @@
         asideOpen: undefined,
         theme: undefined,
         flush: false,
+        noBounce: false,
     });
 
     const emit = defineEmits<{
@@ -535,6 +545,7 @@
         'sk-sidebar-drawer-active': isSidebarDrawerActive.value,
         'sk-aside-drawer-active': isAsideDrawerActive.value,
         'sk-flush': props.flush,
+        'sk-no-bounce': props.noBounce,
     }));
 
     const customStyles = computed(() =>

package/src/components/Panel/SkPanel.vue

@@ -131,7 +131,8 @@
     const customColorStyles = useCustomColors(
         'panel',
         toRef(() => props.baseColor),
-        toRef(() => props.textColor)
+        toRef(() => props.textColor),
+        toRef(() => props.borderColor)
     );
 
     //------------------------------------------------------------------------------------------------------------------

package/src/components/ScrollArea/SkScrollArea.vue

@@ -3,8 +3,8 @@
   --------------------------------------------------------------------------------------------------------------------->
 
 <template>
-    <ScrollAreaRoot :type="type" :class="classes" :style="customColorStyles">
-        <ScrollAreaViewport class="sk-scroll-area-viewport">
+    <ScrollAreaRoot :type="type" :class="classes" :style="rootStyles">
+        <ScrollAreaViewport ref="viewportRef" class="sk-scroll-area-viewport">
             <slot />
         </ScrollAreaViewport>
         <ScrollAreaScrollbar
@@ -34,7 +34,7 @@
 <!--------------------------------------------------------------------------------------------------------------------->
 
 <script setup lang="ts">
-    import { computed, toRef } from 'vue';
+    import { computed, onBeforeUnmount, onMounted, ref, toRef } from 'vue';
     import {
         ScrollAreaCorner,
         ScrollAreaRoot,
@@ -61,9 +61,10 @@
 
         /**
          * When true, fade the scrollable edges with a CSS mask so content visibly tapers
-         * into/out of the viewport. Applies to whichever axis (or both) is scrollable.
+         * into/out of the viewport. Only edges with more content to scroll toward get the
+         * fade -- the top fade disappears at scrollTop=0, bottom fade at scroll end, etc.
          * Override the fade distance via the `--sk-scroll-area-fade` custom property
-         * (default 1.5rem).
+         * (default 1rem).
          * @default false
          */
         fade ?: boolean;
@@ -94,6 +95,78 @@
         [`sk-${ props.orientation }`]: true,
         'sk-fade': props.fade,
     }));
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Scroll-position-aware fade tracking
+    //------------------------------------------------------------------------------------------------------------------
+
+    const viewportRef = ref<InstanceType<typeof ScrollAreaViewport> | null>(null);
+
+    const fadeTop = ref(0);
+    const fadeBottom = ref(0);
+    const fadeLeft = ref(0);
+    const fadeRight = ref(0);
+
+    let scrollEl : HTMLElement | null = null;
+    let resizeObs : ResizeObserver | null = null;
+    let rafID : number | null = null;
+
+    function updateFades() : void
+    {
+        if(!scrollEl) { return; }
+        const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } = scrollEl;
+        const threshold = 1;
+        fadeTop.value = scrollTop > threshold ? 1 : 0;
+        fadeBottom.value = scrollHeight - scrollTop - clientHeight > threshold ? 1 : 0;
+        fadeLeft.value = scrollLeft > threshold ? 1 : 0;
+        fadeRight.value = scrollWidth - scrollLeft - clientWidth > threshold ? 1 : 0;
+    }
+
+    function scheduleUpdate() : void
+    {
+        if(rafID !== null) { return; }
+        rafID = requestAnimationFrame(() =>
+        {
+            rafID = null;
+            updateFades();
+        });
+    }
+
+    onMounted(() =>
+    {
+        const exposed = viewportRef.value as unknown as { viewportElement ?: HTMLElement } | null;
+        scrollEl = exposed?.viewportElement ?? null;
+        if(!scrollEl) { return; }
+
+        scrollEl.addEventListener('scroll', scheduleUpdate, { passive: true });
+        resizeObs = new ResizeObserver(scheduleUpdate);
+        resizeObs.observe(scrollEl);
+        for(const child of Array.from(scrollEl.children))
+        {
+            resizeObs.observe(child);
+        }
+        updateFades();
+    });
+
+    onBeforeUnmount(() =>
+    {
+        if(scrollEl) { scrollEl.removeEventListener('scroll', scheduleUpdate); }
+        resizeObs?.disconnect();
+        if(rafID !== null) { cancelAnimationFrame(rafID); }
+    });
+
+    const rootStyles = computed(() =>
+    {
+        const styles : Record<string, string> = { ...customColorStyles.value };
+        if(props.fade)
+        {
+            styles['--sk-scroll-fade-top'] = String(fadeTop.value);
+            styles['--sk-scroll-fade-bottom'] = String(fadeBottom.value);
+            styles['--sk-scroll-fade-left'] = String(fadeLeft.value);
+            styles['--sk-scroll-fade-right'] = String(fadeRight.value);
+        }
+        return styles;
+    });
 </script>
 
 <!--------------------------------------------------------------------------------------------------------------------->

package/src/components/TreeView/SkTreeView.vue

@@ -6,13 +6,13 @@
     <TreeRoot
         :items="items"
         :get-key="getKey"
-        :model-value="modelValue"
+        :model-value="rekaModelValue"
         :multiple="multiple"
         :propagate-select="propagateSelect"
         :default-expanded="expandedKeys"
         :class="classes"
         :style="customColorStyles"
-        @update:model-value="$emit('update:modelValue', $event as T | T[])"
+        @update:model-value="$emit('update:modelValue', $event as unknown as T | T[])"
     >
         <template #default="{ flattenItems }">
             <slot :flatten-items="flattenItems" />
@@ -73,6 +73,11 @@
 
     //------------------------------------------------------------------------------------------------------------------
 
+    type RekaTreeValue = Record<string, unknown> | Record<string, unknown>[];
+    const rekaModelValue = computed(() => props.modelValue as unknown as RekaTreeValue);
+
+    //------------------------------------------------------------------------------------------------------------------
+
     function getAllKeys(items : T[]) : string[]
     {
         const keys : string[] = [];

package/src/composables/useCustomColors.ts

@@ -4,117 +4,126 @@
 
 import { type Ref, computed } from 'vue';
 
+//----------------------------------------------------------------------------------------------------------------------
+// Kind name resolution
+//----------------------------------------------------------------------------------------------------------------------
+
+/**
+ * Kind names that the color props accept as shortcuts. Typing `baseColor="neon-pink"` resolves
+ * to `var(--sk-neon-pink-base)`; typing `borderColor="primary"` resolves to `var(--sk-primary-base)`.
+ * Any string not in this set is passed through verbatim as a CSS color value.
+ */
+const KIND_NAMES = new Set<string>([
+    // Semantic
+    'neutral',
+    'primary',
+    'accent',
+    'info',
+    'success',
+    'warning',
+    'danger',
+    // Color
+    'boulder',
+    'neon-blue',
+    'light-blue',
+    'neon-orange',
+    'neon-purple',
+    'neon-green',
+    'neon-mint',
+    'neon-pink',
+    'yellow',
+    'red',
+]);
+
+type ColorPart = 'base' | 'text';
+
+function resolveColor(value : string | undefined, part : ColorPart) : string | undefined
+{
+    if(!value) { return undefined; }
+    const trimmed = value.trim();
+    if(KIND_NAMES.has(trimmed))
+    {
+        return `var(--sk-${ trimmed }-${ part })`;
+    }
+    return value;
+}
+
+function unwrap(input : Ref<string | undefined> | string | undefined) : string | undefined
+{
+    return typeof input === 'string' ? input : input?.value;
+}
+
 //----------------------------------------------------------------------------------------------------------------------
 
 /**
  * Composable for handling custom color props in components.
  *
- * This composable provides a consistent way to apply custom colors to components by generating
- * CSS variables that override the component's default color tokens. It supports any CSS color
- * format including hex, rgb, hsl, oklch, named colors, and CSS variables.
+ * Generates CSS custom properties that override a component's default color tokens. Props accept
+ * either a kind name (e.g. `"neon-pink"`, `"primary"`), which resolves to the matching
+ * `--sk-<kind>-base/-text` token, or any raw CSS color value (hex, rgb, oklch, named, or
+ * `var(...)`), which is passed through unchanged. This lets consumers use SleekSpace's palette
+ * by name without having to remember the token syntax.
  *
  * Works with any component that follows the CSS variable naming convention:
  * - `--sk-{componentName}-color-base` for the base/background color
  * - `--sk-{componentName}-fg` for the foreground/text color
+ * - `--sk-{componentName}-border-base` / `--sk-{componentName}-border-color` for the border (optional)
  *
- * @param componentName - The component name used in CSS variable naming
- *                        (e.g., 'button', 'panel', 'my-custom-component')
- * @param baseColor - The base/background color (any CSS color value, including CSS variables)
- * @param textColor - Optional foreground/text color. If not provided, falls back to `--sk-neutral-text`
+ * @param componentName - The component name used in CSS variable naming (e.g., 'button', 'panel')
+ * @param baseColor - Kind name or CSS color value for the base/background color
+ * @param textColor - Kind name or CSS color value for the foreground/text color. Falls back to
+ *                    `--sk-neutral-text` when only `baseColor` is provided.
+ * @param borderColor - Optional kind name or CSS color value for the border. When provided,
+ *                      both `--sk-<component>-border-base` and `--sk-<component>-border-color`
+ *                      are emitted so the border takes precedence over any kind's default.
  *
  * @returns Computed style object with CSS variables ready to bind to a component's style attribute
  *
- * @example Basic usage with base color only
+ * @example Kind name shortcut
  * ```vue
- * <script setup>
- * import { useCustomColors } from '@/composables/useCustomColors';
- *
- * const props = defineProps<{ baseColor?: string }>();
- * const customColors = useCustomColors('button', toRef(() => props.baseColor), undefined);
- * </script>
- *
- * <template>
- *   <button :style="customColors">Click me</button>
- * </template>
+ * <SkPanel base-color="neon-pink" text-color="primary" border-color="neon-purple">...</SkPanel>
  * ```
  *
- * @example With both base and text colors
+ * @example Raw CSS values
  * ```vue
- * <SkButton base-color="oklch(0.7 0.25 300)" text-color="white">
- *   Custom Purple Button
- * </SkButton>
+ * <SkButton base-color="oklch(0.7 0.25 300)" text-color="white">Click me</SkButton>
  * ```
- *
- * @example Using CSS variables
- * ```vue
- * <SkPanel base-color="var(--my-custom-color)" text-color="var(--my-text-color)">
- *   Content
- * </SkPanel>
- * ```
- *
- * @example Custom component
- * ```vue
- * <script setup>
- * import { useCustomColors } from '@/composables/useCustomColors';
- *
- * const props = defineProps<{ baseColor?: string; textColor?: string }>();
- * const customColors = useCustomColors('my-widget', toRef(() => props.baseColor), toRef(() => props.textColor));
- * </script>
- *
- * <template>
- *   <div class="my-widget" :style="customColors">
- *     <!-- Will generate: --sk-my-widget-color-base and --sk-my-widget-fg -->
- *   </div>
- * </template>
- * ```
- *
- * Generated CSS variables:
- * - `--sk-{componentName}-color-base` - The base color for backgrounds and accents
- * - `--sk-{componentName}-fg` - The foreground/text color
- *
- * @remarks
- * - If `textColor` is not provided, components will use `--sk-neutral-text` from the active theme
- * - For best contrast, always provide `textColor` when using custom `baseColor`
- * - The generated CSS variables integrate with the component's existing token system
- * - Works with any component name - no need to register components beforehand
  */
 export function useCustomColors(
     componentName : string,
     baseColor : Ref<string | undefined> | string | undefined,
-    textColor : Ref<string | undefined> | string | undefined
+    textColor : Ref<string | undefined> | string | undefined,
+    borderColor ?: Ref<string | undefined> | string | undefined
 ) : Ref<Record<string, string>>
 {
     return computed(() =>
     {
         const styles : Record<string, string> = {};
 
-        // Resolve refs to values
-        const baseColorValue = typeof baseColor === 'string' ? baseColor : baseColor?.value;
-        const textColorValue = typeof textColor === 'string' ? textColor : textColor?.value;
+        const baseResolved = resolveColor(unwrap(baseColor), 'base');
+        const textResolved = resolveColor(unwrap(textColor), 'text');
+        const borderResolved = resolveColor(unwrap(borderColor), 'base');
 
-        // Only apply custom colors if baseColor is provided
-        if(!baseColorValue)
+        if(baseResolved)
         {
-            return styles;
-        }
-
-        // Set the base color CSS variable
-        const baseVarName = `--sk-${ componentName }-color-base`;
-        styles[baseVarName] = baseColorValue;
+            styles[`--sk-${ componentName }-color-base`] = baseResolved;
 
-        // Set or calculate text color
-        const fgVarName = `--sk-${ componentName }-fg`;
-
-        if(textColorValue)
+            // Keep historical contract: when a caller sets baseColor without textColor, fall back
+            // to --sk-neutral-text so text remains legible on arbitrary custom backgrounds.
+            styles[`--sk-${ componentName }-fg`] = textResolved ?? 'var(--sk-neutral-text)';
+        }
+        else if(textResolved)
         {
-            // Use provided text color
-            styles[fgVarName] = textColorValue;
+            styles[`--sk-${ componentName }-fg`] = textResolved;
         }
-        else
+
+        if(borderResolved)
         {
-            // Fallback to the theme's default text color
-            // Users should provide textColor for optimal contrast
-            styles[fgVarName] = 'var(--sk-neutral-text)';
+            // Set both tokens so the override wins regardless of which one the component's
+            // SCSS consults (`--*-border-base` usually drives decorations; `--*-border-color`
+            // drives the actual border).
+            styles[`--sk-${ componentName }-border-base`] = borderResolved;
+            styles[`--sk-${ componentName }-border-color`] = borderResolved;
         }
 
         return styles;

package/src/composables/usePortalContext.test.ts

@@ -2,8 +2,6 @@
 // Portal Context Composable Tests
 //----------------------------------------------------------------------------------------------------------------------
 
-/* eslint-disable vue/one-component-per-file */
-
 import { describe, expect, it } from 'vitest';
 import { defineComponent, h, inject, provide, ref } from 'vue';
 import { mount } from '@vue/test-utils';