@skewedaspect/sleekspace-ui 0.5.0 → 0.6.0

package/docs/guides/design-tokens/advanced.md

@@ -31,7 +31,12 @@ Add new color primitives in `_foundation-colors.scss`:
 1. Create `src/styles/themes/_mytheme.scss`
 2. Define all 7 semantic kinds with the `[data-scheme="mytheme"]` selector
 3. Import in `themes/index.scss`: `@forward 'mytheme';`
-4. Add to TypeScript types: `export type SkThemeName = 'greyscale' | 'colorful' | 'mytheme';`
+4. Register the TypeScript type via module augmentation:
+   ```ts
+   declare module '@skewedaspect/sleekspace-ui' {
+       interface SkThemeNameMap { mytheme : true; }
+   }
+   ```
 5. Use: `<SkTheme theme="mytheme">`
 
 ### Component Token Overrides

package/docs/guides/theming.md

@@ -265,7 +265,17 @@ Apply it with `SkTheme` or `SkPage`:
 </SkPage>
 ```
 
-> **TypeScript note:** The `theme` prop is typed as `SkThemeName` which is `'greyscale' | 'colorful'`. For custom theme names, cast the value: `:theme="'ocean' as any"`. If you're building a library that adds themes, you can augment the type via module declaration.
+> **TypeScript note:** To get type-safe autocomplete for custom theme names, augment the `SkThemeNameMap` interface:
+>
+> ```ts
+> declare module '@skewedaspect/sleekspace-ui' {
+>     interface SkThemeNameMap {
+>         ocean : true;
+>     }
+> }
+> ```
+>
+> This registers `'ocean'` as a valid `SkThemeName` throughout your project.
 
 ### Using Foundation Colors
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skewedaspect/sleekspace-ui",
-  "version": "0.5.0",
+  "version": "0.6.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",

package/src/components/Card/SkCard.vue

@@ -10,6 +10,8 @@
         :no-border="noBorder"
         :base-color="baseColor"
         :text-color="textColor"
+        :corners="corners"
+        :decoration-corner="decorationCorner"
         :class="classes"
     >
         <div v-if="title || $slots.header" class="sk-card-header" :style="headerStyles">
@@ -66,7 +68,7 @@
     // Types
     import type { ComponentCustomColors } from '@/types';
     import type { SkCardKind } from './types';
-    import type { SkPanelSize } from '../Panel/types';
+    import type { SkPanelCorner, SkPanelSize } from '../Panel/types';
 
     // Components
     import SkPanel from '../Panel/SkPanel.vue';
@@ -136,6 +138,18 @@
          * @default false
          */
         scrollable ?: boolean;
+
+        /**
+         * Which corners receive the beveled cut. Passed through to the underlying SkPanel.
+         * @default ['bottom-right']
+         */
+        corners ?: SkPanelCorner[];
+
+        /**
+         * Which corner displays the decorative accent stripe. Passed through to SkPanel.
+         * @default 'bottom-right'
+         */
+        decorationCorner ?: SkPanelCorner;
     }
 
     //------------------------------------------------------------------------------------------------------------------
@@ -149,6 +163,8 @@
         title: undefined,
         headerColor: undefined,
         scrollable: false,
+        corners: () => [ 'bottom-right' ],
+        decorationCorner: 'bottom-right',
     });
 
     //------------------------------------------------------------------------------------------------------------------

package/src/components/Panel/SkPanel.vue

@@ -40,7 +40,7 @@
 
     // Types
     import type { ComponentCustomColors } from '@/types';
-    import type { SkPanelKind, SkPanelSize } from './types';
+    import type { SkPanelCorner, SkPanelKind, SkPanelSize } from './types';
 
     // Composables
     import { useCustomColors } from '@/composables/useCustomColors';
@@ -81,6 +81,20 @@
          * @default false
          */
         noBorder ?: boolean;
+
+        /**
+         * Which corners receive the beveled cut. Any combination of the four corners can be
+         * specified. Pass an empty array for no cut corners.
+         * @default ['bottom-right']
+         */
+        corners ?: SkPanelCorner[];
+
+        /**
+         * Which corner displays the decorative accent stripe. Must be one of the active
+         * `corners` for the decoration to be visible.
+         * @default 'bottom-right'
+         */
+        decorationCorner ?: SkPanelCorner;
     }
 
     //------------------------------------------------------------------------------------------------------------------
@@ -90,6 +104,8 @@
         size: 'md',
         showDecoration: true,
         noBorder: false,
+        corners: () => [ 'bottom-right' ],
+        decorationCorner: 'bottom-right',
     });
 
     //------------------------------------------------------------------------------------------------------------------
@@ -101,6 +117,11 @@
             [`sk-${ props.kind }`]: true,
             [`sk-${ props.size }`]: true,
             'sk-no-border': props.noBorder,
+            'sk-cut-top-left': props.corners.includes('top-left'),
+            'sk-cut-top-right': props.corners.includes('top-right'),
+            'sk-cut-bottom-right': props.corners.includes('bottom-right'),
+            'sk-cut-bottom-left': props.corners.includes('bottom-left'),
+            [`sk-decoration-${ props.decorationCorner }`]: true,
         };
     });
 
@@ -116,14 +137,18 @@
     //------------------------------------------------------------------------------------------------------------------
 
     // Control decoration visibility
-    // Note: noBorder automatically disables decoration
+    // Hidden when: noBorder, showDecoration is false, or decorationCorner isn't in corners
     const decorationDisplay = computed(() =>
     {
-        if(props.noBorder)
+        if(props.noBorder || !props.showDecoration)
+        {
+            return 'none';
+        }
+        if(!props.corners.includes(props.decorationCorner))
         {
             return 'none';
         }
-        return props.showDecoration ? 'block' : 'none';
+        return 'block';
     });
 </script>
 

package/src/components/Panel/types.ts

@@ -12,4 +12,7 @@ export type SkPanelKind = ComponentKind;
 // Panel sizes (only affects cut size, not padding or dimensions)
 export type SkPanelSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
+// Which corners get the bevel cut
+export type SkPanelCorner = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
+
 //----------------------------------------------------------------------------------------------------------------------

package/src/components/Select/SkSelect.vue

@@ -0,0 +1,210 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - Select Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <div :class="wrapperClasses" :style="customColorStyles">
+        <SelectRoot v-model="modelValue" :disabled="disabled">
+            <SelectTrigger :class="triggerClasses">
+                <SelectValue :placeholder="placeholder">
+                    <template v-if="displayText">
+                        {{ displayText }}
+                    </template>
+                </SelectValue>
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="square"
+                    stroke-linejoin="miter"
+                    style="width: 1rem; height: 1rem; flex-shrink: 0;"
+                >
+                    <polyline points="6 9 12 15 18 9" />
+                </svg>
+            </SelectTrigger>
+
+            <SelectPortal>
+                <SelectContent
+                    :data-scheme="theme"
+                    :class="contentClasses"
+                    :style="customColorStyles"
+                    position="popper"
+                    side="bottom"
+                    align="start"
+                    :side-offset="4"
+                >
+                    <SelectViewport>
+                        <slot />
+                    </SelectViewport>
+                </SelectContent>
+            </SelectPortal>
+        </SelectRoot>
+    </div>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are in /src/styles/components/_select.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component SkSelect
+     * @description A simple dropdown select for picking from predefined options. Unlike SkListbox which includes
+     * a search input for filtering, SkSelect provides a clean trigger button that opens a dropdown panel.
+     * Built on RekaUI's Select primitive with full keyboard navigation and portal rendering.
+     *
+     * @example
+     * ```vue
+     * <SkSelect v-model="selectedCountry" kind="primary" placeholder="Select a country...">
+     *     <SkSelectItem value="us">United States</SkSelectItem>
+     *     <SkSelectItem value="uk">United Kingdom</SkSelectItem>
+     *     <SkSelectItem value="ca">Canada</SkSelectItem>
+     * </SkSelect>
+     * ```
+     *
+     * @slot default - SkSelectItem components representing the available options. Use SkSelectSeparator
+     *                 to create visual dividers between groups of options.
+     */
+
+    import { type ComputedRef, computed, inject, provide, reactive, toRef } from 'vue';
+    import {
+        SelectContent,
+        SelectPortal,
+        SelectRoot,
+        SelectTrigger,
+        SelectValue,
+        SelectViewport,
+    } from 'reka-ui';
+
+    // Types
+    import type { ComponentCustomColors } from '@/types';
+    import type { SkSelectKind, SkSelectSize } from './types';
+
+    // Composables
+    import { useCustomColors } from '@/composables/useCustomColors';
+    import { usePortalContext } from '@/composables/usePortalContext';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkSelectComponentProps extends ComponentCustomColors
+    {
+        /**
+         * Semantic color kind that controls the trigger border, focus ring, and selected
+         * item highlight appearance. When used inside SkField, inherits the field's
+         * kind if not explicitly set.
+         * @default 'neutral' (or inherited from parent SkField)
+         */
+        kind ?: SkSelectKind;
+
+        /**
+         * Size of the trigger and dropdown content. Controls the trigger height,
+         * text size, and option item dimensions. Available sizes: 'sm' (small),
+         * 'md' (medium), 'lg' (large).
+         * @default 'md'
+         */
+        size ?: SkSelectSize;
+
+        /**
+         * Placeholder text displayed in the trigger when no option is selected.
+         * Use to guide users on what type of selection to make.
+         * @default 'Select...'
+         */
+        placeholder ?: string;
+
+        /**
+         * When true, the select is disabled and cannot be interacted with. The trigger
+         * is non-clickable and the dropdown cannot be opened. The component appears
+         * with reduced opacity and the cursor changes to not-allowed.
+         * @default false
+         */
+        disabled ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkSelectComponentProps>(), {
+        kind: undefined,
+        size: 'md',
+        placeholder: 'Select...',
+        disabled: false,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * The selected value. Use with `v-model` for two-way binding. The value corresponds
+     * to the `value` prop of the selected SkSelectItem.
+     */
+    const modelValue = defineModel<string>();
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Handle portal context (theme injection/re-provision for nested portal components)
+    const { theme } = usePortalContext();
+
+    // Inject field kind from parent SkField
+    const fieldKind = inject<ComputedRef<SkSelectKind | undefined>>('field-kind', computed(() => undefined));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Item label registry -- items register their value→label on mount so we can display
+    // the selected text synchronously, avoiding the flash from SelectValue's async detection.
+    const itemLabels = reactive(new Map<string, string>());
+
+    provide('sk-select-register', (value : string, label : string) =>
+    {
+        itemLabels.set(value, label);
+    });
+
+    provide('sk-select-unregister', (value : string) =>
+    {
+        itemLabels.delete(value);
+    });
+
+    const displayText = computed(() =>
+    {
+        if(!modelValue.value) { return ''; }
+        return itemLabels.get(modelValue.value) || modelValue.value;
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const effectiveKind = computed(() => fieldKind.value || props.kind || 'neutral');
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const wrapperClasses = computed(() => ({
+        'sk-select': true,
+        [`sk-${ effectiveKind.value }`]: true,
+        [`sk-${ props.size }`]: true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const triggerClasses = computed(() => ({
+        'sk-select-trigger': true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const contentClasses = computed(() => ({
+        'sk-select-content': true,
+        [`sk-${ effectiveKind.value }`]: true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const customColorStyles = useCustomColors(
+        'select',
+        toRef(() => props.baseColor),
+        toRef(() => props.textColor)
+    );
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Select/SkSelectItem.vue

@@ -0,0 +1,112 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - SelectItem Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <SelectItem :class="classes" :value="value" :disabled="disabled">
+        <SelectItemText ref="textEl">
+            <slot />
+        </SelectItemText>
+        <SelectItemIndicator class="sk-select-item-indicator">
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="3"
+                stroke-linecap="square"
+                stroke-linejoin="miter"
+                style="width: 1rem; height: 1rem;"
+            >
+                <polyline points="20 6 9 17 4 12" />
+            </svg>
+        </SelectItemIndicator>
+    </SelectItem>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are in /src/styles/components/_select.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component SkSelectItem
+     * @description A selectable option within an SkSelect dropdown. When selected, the item displays a
+     * checkmark indicator and its value is set as the select's v-model. Built on RekaUI's SelectItem
+     * with keyboard navigation support.
+     *
+     * @example
+     * ```vue
+     * <SkSelect v-model="selected">
+     *     <SkSelectItem value="option1">First Option</SkSelectItem>
+     *     <SkSelectItem value="option2">Second Option</SkSelectItem>
+     *     <SkSelectItem value="option3" disabled>Unavailable Option</SkSelectItem>
+     * </SkSelect>
+     * ```
+     *
+     * @slot default - The display content for this option. Can be plain text or rich content including
+     *                 icons, formatted text, or custom layouts. This is what users see in the dropdown.
+     */
+
+    import { computed, inject, onMounted, onUnmounted, useTemplateRef } from 'vue';
+    import { SelectItem, SelectItemIndicator, SelectItemText } from 'reka-ui';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkSelectItemComponentProps
+    {
+        /**
+         * The value this option represents. When selected, the parent SkSelect's v-model
+         * will be set to this value. Must be a string and unique within the select.
+         */
+        value : string;
+
+        /**
+         * When true, this option is disabled and cannot be selected. The item appears
+         * with reduced opacity and is skipped during keyboard navigation.
+         * @default false
+         */
+        disabled ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkSelectItemComponentProps>(), {
+        disabled: false,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const textEl = useTemplateRef<InstanceType<typeof SelectItemText>>('textEl');
+    const register = inject<(value : string, label : string) => void>('sk-select-register', undefined);
+    const unregister = inject<(value : string) => void>('sk-select-unregister', undefined);
+
+    onMounted(() =>
+    {
+        const el = (textEl.value as unknown as { $el ?: HTMLElement })?.$el;
+        if(register)
+        {
+            register(props.value, el?.textContent?.trim() || props.value);
+        }
+    });
+
+    onUnmounted(() =>
+    {
+        if(unregister)
+        {
+            unregister(props.value);
+        }
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() => ({
+        'sk-select-item': true,
+    }));
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Select/SkSelectSeparator.vue

@@ -0,0 +1,40 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - SelectSeparator Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <SelectSeparator class="sk-select-separator" />
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are in /src/styles/components/_select.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component SkSelectSeparator
+     * @description A visual divider for organizing options within an SkSelect dropdown. Use to create
+     * logical groups of related options without affecting selection behavior. Renders as a horizontal
+     * line between items with appropriate spacing.
+     *
+     * @example
+     * ```vue
+     * <SkSelect v-model="selected">
+     *     <SkSelectItem value="recent1">Recent Document 1</SkSelectItem>
+     *     <SkSelectItem value="recent2">Recent Document 2</SkSelectItem>
+     *     <SkSelectSeparator />
+     *     <SkSelectItem value="all">Browse All Documents...</SkSelectItem>
+     * </SkSelect>
+     * ```
+     *
+     * @slot - Not applicable. This component does not accept slot content.
+     */
+
+    import { SelectSeparator } from 'reka-ui';
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Select/index.ts

@@ -0,0 +1,10 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Select Component Exports
+//----------------------------------------------------------------------------------------------------------------------
+
+export { default as SkSelect } from './SkSelect.vue';
+export { default as SkSelectItem } from './SkSelectItem.vue';
+export { default as SkSelectSeparator } from './SkSelectSeparator.vue';
+export type { SkSelectKind, SkSelectSize } from './types';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Select/types.ts

@@ -0,0 +1,10 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Select Component Types
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind, ComponentSize } from '@/types';
+
+export type SkSelectKind = ComponentKind;
+export type SkSelectSize = ComponentSize;
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Sidebar/SkSidebar.vue

@@ -3,11 +3,13 @@
   --------------------------------------------------------------------------------------------------------------------->
 
 <template>
-    <aside :class="classes">
+    <aside :class="classes" :style="sidebarStyles">
         <SkPanel
             :kind="kind"
             :base-color="baseColor"
             :text-color="textColor"
+            :corners="panelCorners"
+            :decoration-corner="panelDecorationCorner"
             class="sk-sidebar-panel"
         >
             <div class="sk-panel-scroll-content">
@@ -49,8 +51,13 @@
      */
 
     import { computed } from 'vue';
-    import type { SkSidebarKind } from './types';
+
+    // Types
+    import type { SkSidebarKind, SkSidebarSide } from './types';
     import type { ComponentCustomColors } from '@/types';
+    import type { SkPanelCorner } from '../Panel/types';
+
+    // Components
     import SkPanel from '../Panel/SkPanel.vue';
 
     //------------------------------------------------------------------------------------------------------------------
@@ -72,6 +79,13 @@
          * @default '180px'
          */
         width ?: string;
+
+        /**
+         * Which side of the layout the sidebar is placed on. Controls the direction of the
+         * panel bevel and the sidebar-item clip-path cuts so they mirror appropriately.
+         * @default 'left'
+         */
+        side ?: SkSidebarSide;
     }
 
     //------------------------------------------------------------------------------------------------------------------
@@ -79,17 +93,40 @@
     const props = withDefaults(defineProps<SkSidebarComponentProps>(), {
         kind: 'neutral',
         width: '180px',
+        side: 'left',
     });
 
     //------------------------------------------------------------------------------------------------------------------
 
+    const panelCorners = computed<SkPanelCorner[]>(() =>
+    {
+        return props.side === 'right' ? [ 'bottom-left' ] : [ 'bottom-right' ];
+    });
+
+    const panelDecorationCorner = computed<SkPanelCorner>(() =>
+    {
+        return props.side === 'right' ? 'bottom-left' : 'bottom-right';
+    });
+
     const classes = computed(() =>
     {
         return {
             'sk-sidebar': true,
             [`sk-${ props.kind }`]: true,
+            'sk-sidebar-right': props.side === 'right',
         };
     });
+
+    // Bridge custom colors to sidebar item theming
+    const sidebarStyles = computed(() =>
+    {
+        const styles : Record<string, string> = {};
+        if(props.baseColor)
+        {
+            styles['--sk-sidebar-color-base'] = props.baseColor;
+        }
+        return styles;
+    });
 </script>
 
 <!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Sidebar/types.ts

@@ -1,3 +1,5 @@
 import type { ComponentKind } from '@/types';
 
 export type SkSidebarKind = ComponentKind;
+
+export type SkSidebarSide = 'left' | 'right';