@skewedaspect/sleekspace-ui 0.8.1 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skewedaspect/sleekspace-ui",
-  "version": "0.8.1",
+  "version": "0.9.1",
   "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,17 @@
     "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 \"npm run dev:vite\" \"npm run dev:tokens\"",
+    "dev:vite": "vite build --watch",
+    "dev:tokens": "sass --watch src/styles/tokens.scss dist/tokens.css --no-source-map",
+    "build": "npm run clean && 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",
+    "clean": "rm -rf dist",
+    "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/Alert/SkAlert.vue

@@ -94,6 +94,9 @@
     // Composables
     import { useCustomColors } from '@/composables/useCustomColors';
 
+    // Utils
+    import { hasSlotContent } from '@/utils/slots';
+
     //------------------------------------------------------------------------------------------------------------------
 
     // Kinds that have default icons
@@ -162,9 +165,8 @@
 
         // Auto-show if kind has a default icon or if slot content is provided
         const hasDefaultIcon = FEEDBACK_KINDS.includes(props.kind as typeof FEEDBACK_KINDS[number]);
-        const hasSlotContent = !!slots.icon;
 
-        return hasDefaultIcon || hasSlotContent;
+        return hasDefaultIcon || hasSlotContent(slots.icon);
     });
 
     //------------------------------------------------------------------------------------------------------------------

package/src/components/Breadcrumbs/SkBreadcrumbs.vue

@@ -46,6 +46,9 @@
     import type { ComponentCustomColors } from '@/types';
     import type { SkBreadcrumbsProps } from './types';
 
+    // Utils
+    import { filterRenderableVNodes } from '@/utils/slots';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkBreadcrumbsComponentProps extends SkBreadcrumbsProps, ComponentCustomColors
@@ -109,18 +112,9 @@
 
     const processedItems = computed<VNode[]>(() =>
     {
-        if(!slots.default)
-        {
-            return [];
-        }
-
-        const defaultSlot = slots.default();
-        if(!defaultSlot || defaultSlot.length === 0)
-        {
-            return [];
-        }
-
-        return defaultSlot;
+        if(!slots.default) { return []; }
+
+        return filterRenderableVNodes(slots.default());
     });
 
     //------------------------------------------------------------------------------------------------------------------

package/src/components/Button/SkButton.vue

@@ -18,16 +18,16 @@
         <span class="sk-button-chrome">
             <span v-if="loading" class="sk-button-loader" aria-hidden="true" />
             <span :class="{ 'sk-button-content': true, 'loading': loading }">
-                <span v-if="$slots.leading" class="sk-button-icon sk-button-icon-leading">
+                <span v-if="hasSlotContent(slots.leading)" class="sk-button-icon sk-button-icon-leading">
                     <slot name="leading" />
                 </span>
-                <span v-if="$slots.icon" class="sk-button-icon sk-button-icon-only">
+                <span v-if="hasSlotContent(slots.icon)" class="sk-button-icon sk-button-icon-only">
                     <slot name="icon" />
                 </span>
-                <span v-if="$slots.default" class="sk-button-text">
+                <span v-if="hasSlotContent(slots.default)" class="sk-button-text">
                     <slot />
                 </span>
-                <span v-if="$slots.trailing" class="sk-button-icon sk-button-icon-trailing">
+                <span v-if="hasSlotContent(slots.trailing)" class="sk-button-icon sk-button-icon-trailing">
                     <slot name="trailing" />
                 </span>
             </span>
@@ -72,6 +72,9 @@
     // Composables
     import { useCustomColors } from '@/composables/useCustomColors';
 
+    // Utils
+    import { hasSlotContent } from '@/utils/slots';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkButtonComponentProps extends ComponentCustomColors
@@ -199,7 +202,7 @@
 
     const classes = computed<Record<string, boolean>>(() =>
     {
-        const isIconOnly = !!(slots.icon && !slots.default);
+        const isIconOnly = hasSlotContent(slots.icon) && !hasSlotContent(slots.default);
 
         return {
             'sk-button': true,

package/src/components/Card/SkCard.vue

@@ -10,23 +10,24 @@
         :no-border="noBorder"
         :base-color="baseColor"
         :text-color="textColor"
+        :border-color="borderColor"
         :corners="corners"
         :decoration-corner="decorationCorner"
         :class="classes"
     >
-        <div v-if="title || $slots.header" class="sk-card-header" :style="headerStyles">
+        <div v-if="title || hasSlotContent(slots.header)" class="sk-card-header" :style="headerStyles">
             <h3 v-if="title" class="sk-card-title">
                 {{ title }}
             </h3>
             <slot name="header" />
         </div>
-        <div v-if="$slots.media" class="sk-card-media">
+        <div v-if="hasSlotContent(slots.media)" class="sk-card-media">
             <slot name="media" />
         </div>
-        <div v-if="$slots.default" :class="contentClasses">
+        <div v-if="hasSlotContent(slots.default)" :class="contentClasses">
             <slot />
         </div>
-        <div v-if="$slots.footer" class="sk-card-footer">
+        <div v-if="hasSlotContent(slots.footer)" class="sk-card-footer">
             <slot name="footer" />
         </div>
     </SkPanel>
@@ -63,7 +64,7 @@
      *                appropriate spacing.
      */
 
-    import { computed } from 'vue';
+    import { computed, useSlots } from 'vue';
 
     // Types
     import type { ComponentCustomColors } from '@/types';
@@ -73,6 +74,9 @@
     // Components
     import SkPanel from '../Panel/SkPanel.vue';
 
+    // Utils
+    import { hasSlotContent } from '@/utils/slots';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkCardComponentProps extends ComponentCustomColors
@@ -169,6 +173,10 @@
 
     //------------------------------------------------------------------------------------------------------------------
 
+    const slots = useSlots();
+
+    //------------------------------------------------------------------------------------------------------------------
+
     const classes = computed(() =>
     {
         return {

package/src/components/Checkbox/SkCheckbox.vue

@@ -42,7 +42,7 @@
                 </svg>
             </CheckboxIndicator>
         </CheckboxRoot>
-        <span v-if="label || $slots.default" class="sk-checkbox-label">
+        <span v-if="label || hasSlotContent(slots.default)" class="sk-checkbox-label">
             <slot>{{ label }}</slot>
         </span>
     </label>
@@ -71,7 +71,7 @@
      * @slot default - Custom label content. Overrides the `label` prop when provided.
      */
 
-    import { computed, toRef } from 'vue';
+    import { computed, toRef, useSlots } from 'vue';
     import { CheckboxIndicator, CheckboxRoot } from 'reka-ui';
 
     // Types
@@ -81,6 +81,9 @@
     // Composables
     import { useCustomColors } from '@/composables/useCustomColors';
 
+    // Utils
+    import { hasSlotContent } from '@/utils/slots';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkCheckboxComponentProps extends ComponentCustomColors
@@ -151,6 +154,10 @@
 
     //------------------------------------------------------------------------------------------------------------------
 
+    const slots = useSlots();
+
+    //------------------------------------------------------------------------------------------------------------------
+
     const classes = computed(() => ({
         'sk-checkbox': true,
         [`sk-${ props.kind }`]: true,

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/Modal/SkModal.vue

@@ -1,6 +1,6 @@
 <template>
     <DialogRoot v-model:open="isOpen">
-        <DialogTrigger v-if="$slots.trigger || triggerText" as-child>
+        <DialogTrigger v-if="hasSlotContent(slots.trigger) || triggerText" as-child>
             <slot name="trigger">
                 <SkButton :kind="kind">
                     {{ triggerText }}
@@ -17,7 +17,7 @@
                 @pointer-down-outside="handleOverlayClick"
                 @interact-outside="handleOverlayClick"
             >
-                <div v-if="$slots.title || title" class="sk-modal-header">
+                <div v-if="hasSlotContent(slots.title) || title" class="sk-modal-header">
                     <DialogTitle class="sk-modal-title">
                         <slot name="title" :close="close">
                             {{ title }}
@@ -40,7 +40,7 @@
                 <div class="sk-modal-body">
                     <slot :close="close" />
                 </div>
-                <div v-if="$slots.footer" class="sk-modal-footer">
+                <div v-if="hasSlotContent(slots.footer)" class="sk-modal-footer">
                     <slot name="footer" :close="close" />
                 </div>
             </DialogContent>
@@ -88,7 +88,7 @@
      * @slot footer - Footer content, typically containing action buttons. Receives `{ close }` slot prop.
      */
 
-    import { computed, ref, toRef, watch } from 'vue';
+    import { type Slots, computed, ref, toRef, useSlots, watch } from 'vue';
     import {
         DialogClose,
         DialogContent,
@@ -106,6 +106,9 @@
     import { useCustomColors } from '@/composables/useCustomColors';
     import { usePortalContext } from '@/composables/usePortalContext';
 
+    // Utils
+    import { hasSlotContent } from '@/utils/slots';
+
     // Components
     import SkButton from '../Button/SkButton.vue';
 
@@ -206,6 +209,10 @@
 
     //------------------------------------------------------------------------------------------------------------------
 
+    const slots : Slots = useSlots();
+
+    //------------------------------------------------------------------------------------------------------------------
+
     const isOpen = ref(props.open);
 
     watch(() => props.open, (newValue) =>

package/src/components/NavBar/SkNavBar.vue

@@ -5,19 +5,19 @@
 <template>
     <nav :class="classes" :style="customColorStyles">
         <div class="sk-navbar-content">
-            <div v-if="slots.leading" class="sk-navbar-leading">
+            <div v-if="hasSlotContent(slots.leading)" class="sk-navbar-leading">
                 <slot name="leading" />
             </div>
 
-            <div v-if="slots.brand" class="sk-navbar-brand">
+            <div v-if="hasSlotContent(slots.brand)" class="sk-navbar-brand">
                 <slot name="brand" />
             </div>
 
-            <div v-if="slots.default" class="sk-navbar-nav">
+            <div v-if="hasSlotContent(slots.default)" class="sk-navbar-nav">
                 <slot />
             </div>
 
-            <div v-if="slots.actions" class="sk-navbar-actions">
+            <div v-if="hasSlotContent(slots.actions)" class="sk-navbar-actions">
                 <slot name="actions" />
             </div>
         </div>
@@ -59,10 +59,11 @@
      */
 
     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 { hasSlotContent } from '@/utils/slots';
+    import { NAVBAR_KIND_KEY, NAVBAR_SIZE_KEY } from './context';
 
     //------------------------------------------------------------------------------------------------------------------
 
@@ -83,6 +84,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 +99,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/NumberInput/SkNumberInput.vue

@@ -17,7 +17,7 @@
             :step="step"
         >
             <NumberFieldInput :class="inputClasses" :placeholder="placeholder" />
-            <div class="sk-number-input-steppers">
+            <div v-if="showSteppers" class="sk-number-input-steppers">
                 <NumberFieldIncrement class="sk-number-input-increment">
                     <svg
                         xmlns="http://www.w3.org/2000/svg"
@@ -170,6 +170,14 @@
          * @default 1
          */
         step ?: number;
+
+        /**
+         * When true, renders the increment/decrement stepper buttons on the right side of the
+         * input. Set to false for a plain numeric text field (users can still use arrow keys
+         * and type values directly).
+         * @default true
+         */
+        showSteppers ?: boolean;
     }
 
     //------------------------------------------------------------------------------------------------------------------
@@ -185,6 +193,7 @@
         min: undefined,
         max: undefined,
         step: 1,
+        showSteppers: true,
     });
 
     //------------------------------------------------------------------------------------------------------------------