@skewedaspect/sleekspace-ui 0.8.1 → 0.9.0

package/dist/components/Dropdown/SkDropdown.vue.d.ts

@@ -1,5 +1,5 @@
 import { ComponentCustomColors } from '../../types';
-import { SkDropdownAlign, SkDropdownKind, SkDropdownSide } from './types';
+import { SkDropdownAlign, SkDropdownKind, SkDropdownSide, SkDropdownSize } from './types';
 export interface SkDropdownComponentProps extends ComponentCustomColors {
     /**
      * Semantic color kind that controls the menu's accent colors for hover states and
@@ -36,6 +36,13 @@ export interface SkDropdownComponentProps extends ComponentCustomColors {
      * @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;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -49,6 +56,7 @@ declare function __VLS_template(): {
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<SkDropdownComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkDropdownComponentProps> & Readonly<{}>, {
     kind: SkDropdownKind;
+    size: SkDropdownSize;
     triggerText: string;
     side: SkDropdownSide;
     sideOffset: number;

package/dist/components/Dropdown/types.d.ts

@@ -1,4 +1,5 @@
-import { ComponentKind } from '../../types';
+import { 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/dist/components/NavBar/SkNavBar.vue.d.ts

@@ -1,4 +1,4 @@
-import { SkNavBarKind } from './types';
+import { SkNavBarKind, SkNavBarSize } from './types';
 import { ComponentCustomColors } from '../../types';
 export interface SkNavBarComponentProps extends ComponentCustomColors {
     /**
@@ -15,6 +15,13 @@ export interface SkNavBarComponentProps extends ComponentCustomColors {
      * @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;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -30,6 +37,7 @@ declare function __VLS_template(): {
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<SkNavBarComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkNavBarComponentProps> & Readonly<{}>, {
     kind: SkNavBarKind;
+    size: SkNavBarSize;
     sticky: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

package/dist/components/NavBar/context.d.ts

@@ -1,3 +1,5 @@
 import { InjectionKey, Ref } from 'vue';
+import { ComponentSize } from '../../types';
 import { SkNavBarKind } from './types';
 export declare const NAVBAR_KIND_KEY: InjectionKey<Ref<SkNavBarKind>>;
+export declare const NAVBAR_SIZE_KEY: InjectionKey<Ref<ComponentSize>>;

package/dist/components/NavBar/types.d.ts

@@ -1,6 +1,10 @@
-import { ComponentKind } from '../../types';
+import { ComponentKind, ComponentSize } from '../../types';
 /**
  * Available kinds for the navbar component.
  * Supports both semantic kinds (themeable) and color kinds (direct palette access).
  */
 export type SkNavBarKind = ComponentKind;
+/**
+ * Size hint propagated to descendant controls (buttons, dropdowns, sidebar toggles).
+ */
+export type SkNavBarSize = ComponentSize;

package/dist/components/Page/SkPage.vue.d.ts

@@ -66,6 +66,14 @@ export interface SkPageComponentProps {
      * @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;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -147,6 +155,7 @@ declare const __VLS_component: import('vue').DefineComponent<SkPageComponentProp
     sidebarOpen: boolean;
     asideOpen: boolean;
     flush: boolean;
+    noBounce: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     rootRef: HTMLDivElement;
     sidebarDrawerRef: HTMLElement;

package/dist/components/ScrollArea/SkScrollArea.vue.d.ts

@@ -7,9 +7,10 @@ export interface SkScrollAreaComponentProps {
     textColor?: string;
     /**
      * 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;
@@ -19,7 +20,57 @@ declare function __VLS_template(): {
     slots: {
         default?(_: {}): any;
     };
-    refs: {};
+    refs: {
+        viewportRef: ({
+            $: import('vue').ComponentInternalInstance;
+            $data: {};
+            $props: {
+                readonly nonce?: string | undefined;
+                readonly asChild?: boolean | undefined;
+                readonly as?: (import('reka-ui').AsTag | import('vue').Component) | undefined;
+            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+            $attrs: import('vue').Attrs;
+            $refs: {
+                [x: string]: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: import('vue').Slot<any> | undefined;
+            }>;
+            $root: import('vue').ComponentPublicInstance | null;
+            $parent: import('vue').ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: (event: string, ...args: any[]) => void;
+            $el: any;
+            $options: import('vue').ComponentOptionsBase<Readonly<import('reka-ui').ScrollAreaViewportProps> & Readonly<{}>, {
+                viewportElement: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
+            }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import('vue').nextTick;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+        } & Readonly<{}> & Omit<Readonly<import('reka-ui').ScrollAreaViewportProps> & Readonly<{}>, "viewportElement"> & {
+            viewportElement: HTMLElement | undefined;
+        } & {} & import('vue').ComponentCustomProperties & {} & {
+            $slots: {
+                default?: (props: {}) => any;
+            };
+        }) | null;
+    };
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
@@ -30,7 +81,57 @@ declare const __VLS_component: import('vue').DefineComponent<SkScrollAreaCompone
     textColor: string;
     orientation: SkScrollAreaOrientation;
     fade: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    viewportRef: ({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly nonce?: string | undefined;
+            readonly asChild?: boolean | undefined;
+            readonly as?: (import('reka-ui').AsTag | import('vue').Component) | undefined;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+        $attrs: import('vue').Attrs;
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import('vue').Slot<any> | undefined;
+        }>;
+        $root: import('vue').ComponentPublicInstance | null;
+        $parent: import('vue').ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import('vue').ComponentOptionsBase<Readonly<import('reka-ui').ScrollAreaViewportProps> & Readonly<{}>, {
+            viewportElement: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import('vue').nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+    } & Readonly<{}> & Omit<Readonly<import('reka-ui').ScrollAreaViewportProps> & Readonly<{}>, "viewportElement"> & {
+        viewportElement: HTMLElement | undefined;
+    } & {} & import('vue').ComponentCustomProperties & {} & {
+        $slots: {
+            default?: (props: {}) => any;
+        };
+    }) | null;
+}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/composables/useCustomColors.d.ts

@@ -2,73 +2,35 @@ import { Ref } from 'vue';
 /**
  * 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>
- * ```
- *
- * @example With both base and text colors
- * ```vue
- * <SkButton base-color="oklch(0.7 0.25 300)" text-color="white">
- *   Custom Purple Button
- * </SkButton>
- * ```
- *
- * @example Using CSS variables
- * ```vue
- * <SkPanel base-color="var(--my-custom-color)" text-color="var(--my-text-color)">
- *   Content
- * </SkPanel>
+ * <SkPanel base-color="neon-pink" text-color="primary" border-color="neon-purple">...</SkPanel>
  * ```
  *
- * @example Custom component
+ * @example Raw CSS values
  * ```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>
+ * <SkButton base-color="oklch(0.7 0.25 300)" text-color="white">Click me</SkButton>
  * ```
- *
- * 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 declare function useCustomColors(componentName: string, baseColor: Ref<string | undefined> | string | undefined, textColor: Ref<string | undefined> | string | undefined): Ref<Record<string, string>>;
+export declare function useCustomColors(componentName: string, baseColor: Ref<string | undefined> | string | undefined, textColor: Ref<string | undefined> | string | undefined, borderColor?: Ref<string | undefined> | string | undefined): Ref<Record<string, string>>;

package/{src → dist}/global.d.ts

@@ -5,12 +5,16 @@
 // Generated by: scripts/generate-global-types.ts
 //
 // This file provides TypeScript/Volar support for globally registered SleekSpace UI components.
-// Users should reference this file in their tsconfig.json:
+// Consumers can opt in either by referencing the package export in a project .d.ts:
+//
+//   /// <reference types="@skewedaspect/sleekspace-ui/global" />
+//
+// ...or by including the declaration file directly in tsconfig.json:
 //
 // {
 //   "include": [
 //     "src/**/*",
-//     "node_modules/@skewedaspect/sleekspace-ui/src/global.d.ts"
+//     "node_modules/@skewedaspect/sleekspace-ui/dist/global.d.ts"
 //   ]
 // }
 //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////