@skewedaspect/sleekspace-ui 0.9.0 → 0.9.1

package/src/components/Card/SkCard.vue

@@ -15,19 +15,19 @@
         :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>
@@ -64,7 +64,7 @@
      *                appropriate spacing.
      */
 
-    import { computed } from 'vue';
+    import { computed, useSlots } from 'vue';
 
     // Types
     import type { ComponentCustomColors } from '@/types';
@@ -74,6 +74,9 @@
     // Components
     import SkPanel from '../Panel/SkPanel.vue';
 
+    // Utils
+    import { hasSlotContent } from '@/utils/slots';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkCardComponentProps extends ComponentCustomColors
@@ -170,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/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>
@@ -62,6 +62,7 @@
     import type { SkNavBarKind, SkNavBarSize } from './types';
     import type { ComponentCustomColors } from '@/types';
     import { useCustomColors } from '@/composables/useCustomColors';
+    import { hasSlotContent } from '@/utils/slots';
     import { NAVBAR_KIND_KEY, NAVBAR_SIZE_KEY } from './context';
 
     //------------------------------------------------------------------------------------------------------------------

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,
     });
 
     //------------------------------------------------------------------------------------------------------------------

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/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 { type ComputedRef, computed, inject, toRef, useSlots } from 'vue';
     import { RadioGroupIndicator, RadioGroupItem } from 'reka-ui';
 
     // Types
@@ -56,6 +56,9 @@
     // Composables
     import { useCustomColors } from '@/composables/useCustomColors';
 
+    // Utils
+    import { hasSlotContent } from '@/utils/slots';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkRadioComponentProps extends ComponentCustomColors
@@ -110,6 +113,10 @@
 
     //------------------------------------------------------------------------------------------------------------------
 
+    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));

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,10 @@
      * @slot icon - Optional icon displayed before the tab label. Useful for visual indicators.
      */
 
-    import { type ComputedRef, computed, inject } from 'vue';
+    import { type ComputedRef, type Slots, computed, inject, useSlots } from 'vue';
     import { TabsTrigger } from 'reka-ui';
     import type { ComponentKind } from '@/types';
+    import { hasSlotContent } from '@/utils/slots';
 
     //------------------------------------------------------------------------------------------------------------------
 
@@ -93,6 +94,10 @@
 
     //------------------------------------------------------------------------------------------------------------------
 
+    const slots : Slots = useSlots();
+
+    //------------------------------------------------------------------------------------------------------------------
+
     // Inject parent kind (Sleekspace-specific for theming)
     const parentKind = inject<ComputedRef<ComponentKind | undefined>>('tabs-kind', computed(() => undefined));
 

package/src/components/TreeView/SkTreeItem.vue

@@ -32,7 +32,7 @@
         <div v-else-if="showChevron" class="sk-tree-item-chevron-spacer" />
 
         <!-- Leading slot (icons, checkboxes, etc.) -->
-        <div v-if="$slots.leading" class="sk-tree-item-leading">
+        <div v-if="hasSlotContent(slots.leading)" class="sk-tree-item-leading">
             <slot name="leading" :is-expanded="isExpanded" :is-selected="isSelected" />
         </div>
 
@@ -47,7 +47,7 @@
         </div>
 
         <!-- Trailing slot -->
-        <div v-if="$slots.trailing" class="sk-tree-item-trailing">
+        <div v-if="hasSlotContent(slots.trailing)" class="sk-tree-item-trailing">
             <slot name="trailing" :is-expanded="isExpanded" :is-selected="isSelected" />
         </div>
     </TreeItem>
@@ -62,8 +62,12 @@
 <!--------------------------------------------------------------------------------------------------------------------->
 
 <script setup lang="ts">
+    import { type Slots, useSlots } from 'vue';
     import { type FlattenedItem, TreeItem } from 'reka-ui';
 
+    // Utils
+    import { hasSlotContent } from '@/utils/slots';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkTreeItemComponentProps
@@ -79,6 +83,10 @@
         disabled: false,
         showChevron: true,
     });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const slots : Slots = useSlots();
 </script>
 
 <!--------------------------------------------------------------------------------------------------------------------->

package/src/static/generated/defaults.ts

@@ -169,6 +169,7 @@ export const DEFAULTS : Record<string, Record<string, unknown>> =
         min: undefined,
         max: undefined,
         step: 1,
+        showSteppers: true,
     },
     page:
     {

package/src/static/generated/propTypes.ts

@@ -191,6 +191,7 @@ export interface SkNumberInputStaticProps extends ComponentCustomColors
     min ? : number;
     max ? : number;
     step ? : number;
+    showSteppers ? : boolean;
 }
 
 export interface SkPageStaticProps extends ComponentCustomColors

package/src/styles/components/_number-input.scss

@@ -330,13 +330,21 @@
 .sk-number-input-increment
 {
     position: relative;
-    border-bottom: var(--sk-border-width-thin) solid var(--sk-number-input-color-base);
 
-    // Match the parent's top-right corner cut
+    // Shape-only: match the wrapper's top-right bevel so the button's background (and hover fill)
+    // doesn't square off the cut corner. We use zero-width / transparent so the mixin's `border:`
+    // shorthand doesn't paint a visible stroke on top/right/left — the wrapper and steppers already
+    // draw those sides.
     @include cut-border(
         $cut: var(--sk-number-input-cut),
+        $border-width: 0,
+        $border-color: transparent,
         $corners: (top-right)
     );
+
+    // Divider between increment and decrement. Must come after the mixin so the `border:`
+    // shorthand inside doesn't clobber it.
+    border-bottom: var(--sk-border-width-thin) solid var(--sk-number-input-color-base);
 }
 
 //----------------------------------------------------------------------------------------------------------------------