@skewedaspect/sleekspace-ui 0.9.0 → 0.10.0

package/src/styles/tokens.scss

@@ -1,268 +1,21 @@
 //----------------------------------------------------------------------------------------------------------------------
 // SleekSpace UI - Tokens Only
 //----------------------------------------------------------------------------------------------------------------------
-// This file provides ONLY CSS custom properties (design tokens) without any component styles.
-// Perfect for Tailwind CSS users who want to use SleekSpace tokens with Tailwind utilities.
+// Pure CSS custom properties (design tokens) — no component styles, no Tailwind syntax. Safe
+// for any consumer that needs the SleekSpace design tokens, including PrinceXML, plain SSGs,
+// and any context that doesn't run a Tailwind toolchain.
 //
-// Usage with Tailwind v4:
+// For Tailwind v4 integration (utilities like `bg-sk-primary`), import `tailwind.css` from
+// this package alongside this file:
 //
 // @import "tailwindcss";
 // @import "@skewedaspect/sleekspace-ui/tokens.css";
+// @import "@skewedaspect/sleekspace-ui/tailwind.css";
 //
-// Then use in your templates:
-//   <div class="bg-sk-primary text-sk-primary-text">SleekSpace + Tailwind!</div>
-//   <div class="bg-sk-purple-50 text-white">Neon purple</div>
-//
-// Or with arbitrary values:
-//   <div class="bg-[var(--sk-primary-base)]">Direct CSS variable</div>
+// Without Tailwind, you can still use the variables directly in arbitrary values:
+//   <div style="background: var(--sk-primary-base)">SleekSpace token</div>
 //----------------------------------------------------------------------------------------------------------------------
 
 @use "tokens/index" as tokens-module;
 
 //----------------------------------------------------------------------------------------------------------------------
-// Tailwind v4 Theme Integration
-//----------------------------------------------------------------------------------------------------------------------
-// Map SleekSpace CSS variables to Tailwind's @theme system for standard utilities
-//----------------------------------------------------------------------------------------------------------------------
-
-@theme inline {
-  /* Semantic Colors (theme-aware - change based on SkTheme) */
-  /* Each semantic color gets a full shade range using oklch lightness modifications */
-
-  /* Neutral */
-  --color-sk-neutral: var(--sk-neutral-base);
-  --color-sk-neutral-text: var(--sk-neutral-text);
-  --color-sk-neutral-5: oklch(from var(--sk-neutral-base) 0.95 c h);
-  --color-sk-neutral-10: oklch(from var(--sk-neutral-base) 0.90 c h);
-  --color-sk-neutral-20: oklch(from var(--sk-neutral-base) 0.85 c h);
-  --color-sk-neutral-30: oklch(from var(--sk-neutral-base) 0.80 c h);
-  --color-sk-neutral-40: oklch(from var(--sk-neutral-base) 0.75 c h);
-  --color-sk-neutral-50: var(--sk-neutral-base);
-  --color-sk-neutral-60: oklch(from var(--sk-neutral-base) calc(l * 0.85) c h);
-  --color-sk-neutral-70: oklch(from var(--sk-neutral-base) calc(l * 0.70) c h);
-  --color-sk-neutral-80: oklch(from var(--sk-neutral-base) calc(l * 0.55) c h);
-  --color-sk-neutral-90: oklch(from var(--sk-neutral-base) calc(l * 0.40) c h);
-  --color-sk-neutral-95: oklch(from var(--sk-neutral-base) calc(l * 0.25) c h);
-
-  /* Primary */
-  --color-sk-primary: var(--sk-primary-base);
-  --color-sk-primary-text: var(--sk-primary-text);
-  --color-sk-primary-5: oklch(from var(--sk-primary-base) 0.95 c h);
-  --color-sk-primary-10: oklch(from var(--sk-primary-base) 0.90 c h);
-  --color-sk-primary-20: oklch(from var(--sk-primary-base) 0.85 c h);
-  --color-sk-primary-30: oklch(from var(--sk-primary-base) 0.80 c h);
-  --color-sk-primary-40: oklch(from var(--sk-primary-base) 0.75 c h);
-  --color-sk-primary-50: var(--sk-primary-base);
-  --color-sk-primary-60: oklch(from var(--sk-primary-base) calc(l * 0.85) c h);
-  --color-sk-primary-70: oklch(from var(--sk-primary-base) calc(l * 0.70) c h);
-  --color-sk-primary-80: oklch(from var(--sk-primary-base) calc(l * 0.55) c h);
-  --color-sk-primary-90: oklch(from var(--sk-primary-base) calc(l * 0.40) c h);
-  --color-sk-primary-95: oklch(from var(--sk-primary-base) calc(l * 0.25) c h);
-
-  /* Accent */
-  --color-sk-accent: var(--sk-accent-base);
-  --color-sk-accent-text: var(--sk-accent-text);
-  --color-sk-accent-5: oklch(from var(--sk-accent-base) 0.95 c h);
-  --color-sk-accent-10: oklch(from var(--sk-accent-base) 0.90 c h);
-  --color-sk-accent-20: oklch(from var(--sk-accent-base) 0.85 c h);
-  --color-sk-accent-30: oklch(from var(--sk-accent-base) 0.80 c h);
-  --color-sk-accent-40: oklch(from var(--sk-accent-base) 0.75 c h);
-  --color-sk-accent-50: var(--sk-accent-base);
-  --color-sk-accent-60: oklch(from var(--sk-accent-base) calc(l * 0.85) c h);
-  --color-sk-accent-70: oklch(from var(--sk-accent-base) calc(l * 0.70) c h);
-  --color-sk-accent-80: oklch(from var(--sk-accent-base) calc(l * 0.55) c h);
-  --color-sk-accent-90: oklch(from var(--sk-accent-base) calc(l * 0.40) c h);
-  --color-sk-accent-95: oklch(from var(--sk-accent-base) calc(l * 0.25) c h);
-
-  /* Info */
-  --color-sk-info: var(--sk-info-base);
-  --color-sk-info-text: var(--sk-info-text);
-  --color-sk-info-5: oklch(from var(--sk-info-base) 0.95 c h);
-  --color-sk-info-10: oklch(from var(--sk-info-base) 0.90 c h);
-  --color-sk-info-20: oklch(from var(--sk-info-base) 0.85 c h);
-  --color-sk-info-30: oklch(from var(--sk-info-base) 0.80 c h);
-  --color-sk-info-40: oklch(from var(--sk-info-base) 0.75 c h);
-  --color-sk-info-50: var(--sk-info-base);
-  --color-sk-info-60: oklch(from var(--sk-info-base) calc(l * 0.85) c h);
-  --color-sk-info-70: oklch(from var(--sk-info-base) calc(l * 0.70) c h);
-  --color-sk-info-80: oklch(from var(--sk-info-base) calc(l * 0.55) c h);
-  --color-sk-info-90: oklch(from var(--sk-info-base) calc(l * 0.40) c h);
-  --color-sk-info-95: oklch(from var(--sk-info-base) calc(l * 0.25) c h);
-
-  /* Success */
-  --color-sk-success: var(--sk-success-base);
-  --color-sk-success-text: var(--sk-success-text);
-  --color-sk-success-5: oklch(from var(--sk-success-base) 0.95 c h);
-  --color-sk-success-10: oklch(from var(--sk-success-base) 0.90 c h);
-  --color-sk-success-20: oklch(from var(--sk-success-base) 0.85 c h);
-  --color-sk-success-30: oklch(from var(--sk-success-base) 0.80 c h);
-  --color-sk-success-40: oklch(from var(--sk-success-base) 0.75 c h);
-  --color-sk-success-50: var(--sk-success-base);
-  --color-sk-success-60: oklch(from var(--sk-success-base) calc(l * 0.85) c h);
-  --color-sk-success-70: oklch(from var(--sk-success-base) calc(l * 0.70) c h);
-  --color-sk-success-80: oklch(from var(--sk-success-base) calc(l * 0.55) c h);
-  --color-sk-success-90: oklch(from var(--sk-success-base) calc(l * 0.40) c h);
-  --color-sk-success-95: oklch(from var(--sk-success-base) calc(l * 0.25) c h);
-
-  /* Warning */
-  --color-sk-warning: var(--sk-warning-base);
-  --color-sk-warning-text: var(--sk-warning-text);
-  --color-sk-warning-5: oklch(from var(--sk-warning-base) 0.95 c h);
-  --color-sk-warning-10: oklch(from var(--sk-warning-base) 0.90 c h);
-  --color-sk-warning-20: oklch(from var(--sk-warning-base) 0.85 c h);
-  --color-sk-warning-30: oklch(from var(--sk-warning-base) 0.80 c h);
-  --color-sk-warning-40: oklch(from var(--sk-warning-base) 0.75 c h);
-  --color-sk-warning-50: var(--sk-warning-base);
-  --color-sk-warning-60: oklch(from var(--sk-warning-base) calc(l * 0.85) c h);
-  --color-sk-warning-70: oklch(from var(--sk-warning-base) calc(l * 0.70) c h);
-  --color-sk-warning-80: oklch(from var(--sk-warning-base) calc(l * 0.55) c h);
-  --color-sk-warning-90: oklch(from var(--sk-warning-base) calc(l * 0.40) c h);
-  --color-sk-warning-95: oklch(from var(--sk-warning-base) calc(l * 0.25) c h);
-
-  /* Danger */
-  --color-sk-danger: var(--sk-danger-base);
-  --color-sk-danger-text: var(--sk-danger-text);
-  --color-sk-danger-5: oklch(from var(--sk-danger-base) 0.95 c h);
-  --color-sk-danger-10: oklch(from var(--sk-danger-base) 0.90 c h);
-  --color-sk-danger-20: oklch(from var(--sk-danger-base) 0.85 c h);
-  --color-sk-danger-30: oklch(from var(--sk-danger-base) 0.80 c h);
-  --color-sk-danger-40: oklch(from var(--sk-danger-base) 0.75 c h);
-  --color-sk-danger-50: var(--sk-danger-base);
-  --color-sk-danger-60: oklch(from var(--sk-danger-base) calc(l * 0.85) c h);
-  --color-sk-danger-70: oklch(from var(--sk-danger-base) calc(l * 0.70) c h);
-  --color-sk-danger-80: oklch(from var(--sk-danger-base) calc(l * 0.55) c h);
-  --color-sk-danger-90: oklch(from var(--sk-danger-base) calc(l * 0.40) c h);
-  --color-sk-danger-95: oklch(from var(--sk-danger-base) calc(l * 0.25) c h);
-
-  /* Color Palette - Gray */
-  --color-sk-gray-5: var(--sk-color-gray-05);
-  --color-sk-gray-10: var(--sk-color-gray-10);
-  --color-sk-gray-20: var(--sk-color-gray-20);
-  --color-sk-gray-30: var(--sk-color-gray-30);
-  --color-sk-gray-40: var(--sk-color-gray-40);
-  --color-sk-gray-50: var(--sk-color-gray-50);
-  --color-sk-gray-60: var(--sk-color-gray-60);
-  --color-sk-gray-70: var(--sk-color-gray-70);
-  --color-sk-gray-80: var(--sk-color-gray-80);
-  --color-sk-gray-90: var(--sk-color-gray-90);
-  --color-sk-gray-95: var(--sk-color-gray-95);
-
-  /* Color Palette - Blue */
-  --color-sk-blue-5: var(--sk-color-blue-05);
-  --color-sk-blue-10: var(--sk-color-blue-10);
-  --color-sk-blue-20: var(--sk-color-blue-20);
-  --color-sk-blue-30: var(--sk-color-blue-30);
-  --color-sk-blue-40: var(--sk-color-blue-40);
-  --color-sk-blue-50: var(--sk-color-blue-50);
-  --color-sk-blue-60: var(--sk-color-blue-60);
-  --color-sk-blue-70: var(--sk-color-blue-70);
-  --color-sk-blue-80: var(--sk-color-blue-80);
-  --color-sk-blue-90: var(--sk-color-blue-90);
-  --color-sk-blue-95: var(--sk-color-blue-95);
-
-  /* Color Palette - Red */
-  --color-sk-red-5: var(--sk-color-red-05);
-  --color-sk-red-10: var(--sk-color-red-10);
-  --color-sk-red-20: var(--sk-color-red-20);
-  --color-sk-red-30: var(--sk-color-red-30);
-  --color-sk-red-40: var(--sk-color-red-40);
-  --color-sk-red-50: var(--sk-color-red-50);
-  --color-sk-red-60: var(--sk-color-red-60);
-  --color-sk-red-70: var(--sk-color-red-70);
-  --color-sk-red-80: var(--sk-color-red-80);
-  --color-sk-red-90: var(--sk-color-red-90);
-  --color-sk-red-95: var(--sk-color-red-95);
-
-  /* Color Palette - Orange */
-  --color-sk-orange-5: var(--sk-color-orange-05);
-  --color-sk-orange-10: var(--sk-color-orange-10);
-  --color-sk-orange-20: var(--sk-color-orange-20);
-  --color-sk-orange-30: var(--sk-color-orange-30);
-  --color-sk-orange-40: var(--sk-color-orange-40);
-  --color-sk-orange-50: var(--sk-color-orange-50);
-  --color-sk-orange-60: var(--sk-color-orange-60);
-  --color-sk-orange-70: var(--sk-color-orange-70);
-  --color-sk-orange-80: var(--sk-color-orange-80);
-  --color-sk-orange-90: var(--sk-color-orange-90);
-  --color-sk-orange-95: var(--sk-color-orange-95);
-
-  /* Color Palette - Yellow */
-  --color-sk-yellow-5: var(--sk-color-yellow-05);
-  --color-sk-yellow-10: var(--sk-color-yellow-10);
-  --color-sk-yellow-20: var(--sk-color-yellow-20);
-  --color-sk-yellow-30: var(--sk-color-yellow-30);
-  --color-sk-yellow-40: var(--sk-color-yellow-40);
-  --color-sk-yellow-50: var(--sk-color-yellow-50);
-  --color-sk-yellow-60: var(--sk-color-yellow-60);
-  --color-sk-yellow-70: var(--sk-color-yellow-70);
-  --color-sk-yellow-80: var(--sk-color-yellow-80);
-  --color-sk-yellow-90: var(--sk-color-yellow-90);
-  --color-sk-yellow-95: var(--sk-color-yellow-95);
-
-  /* Color Palette - Green */
-  --color-sk-green-5: var(--sk-color-green-05);
-  --color-sk-green-10: var(--sk-color-green-10);
-  --color-sk-green-20: var(--sk-color-green-20);
-  --color-sk-green-30: var(--sk-color-green-30);
-  --color-sk-green-40: var(--sk-color-green-40);
-  --color-sk-green-50: var(--sk-color-green-50);
-  --color-sk-green-60: var(--sk-color-green-60);
-  --color-sk-green-70: var(--sk-color-green-70);
-  --color-sk-green-80: var(--sk-color-green-80);
-  --color-sk-green-90: var(--sk-color-green-90);
-  --color-sk-green-95: var(--sk-color-green-95);
-
-  /* Color Palette - Mint */
-  --color-sk-mint-5: var(--sk-color-mint-05);
-  --color-sk-mint-10: var(--sk-color-mint-10);
-  --color-sk-mint-20: var(--sk-color-mint-20);
-  --color-sk-mint-30: var(--sk-color-mint-30);
-  --color-sk-mint-40: var(--sk-color-mint-40);
-  --color-sk-mint-50: var(--sk-color-mint-50);
-  --color-sk-mint-60: var(--sk-color-mint-60);
-  --color-sk-mint-70: var(--sk-color-mint-70);
-  --color-sk-mint-80: var(--sk-color-mint-80);
-  --color-sk-mint-90: var(--sk-color-mint-90);
-  --color-sk-mint-95: var(--sk-color-mint-95);
-
-  /* Color Palette - Cyan */
-  --color-sk-cyan-5: var(--sk-color-cyan-05);
-  --color-sk-cyan-10: var(--sk-color-cyan-10);
-  --color-sk-cyan-20: var(--sk-color-cyan-20);
-  --color-sk-cyan-30: var(--sk-color-cyan-30);
-  --color-sk-cyan-40: var(--sk-color-cyan-40);
-  --color-sk-cyan-50: var(--sk-color-cyan-50);
-  --color-sk-cyan-60: var(--sk-color-cyan-60);
-  --color-sk-cyan-70: var(--sk-color-cyan-70);
-  --color-sk-cyan-80: var(--sk-color-cyan-80);
-  --color-sk-cyan-90: var(--sk-color-cyan-90);
-  --color-sk-cyan-95: var(--sk-color-cyan-95);
-
-  /* Color Palette - Purple */
-  --color-sk-purple-5: var(--sk-color-purple-05);
-  --color-sk-purple-10: var(--sk-color-purple-10);
-  --color-sk-purple-20: var(--sk-color-purple-20);
-  --color-sk-purple-30: var(--sk-color-purple-30);
-  --color-sk-purple-40: var(--sk-color-purple-40);
-  --color-sk-purple-50: var(--sk-color-purple-50);
-  --color-sk-purple-60: var(--sk-color-purple-60);
-  --color-sk-purple-70: var(--sk-color-purple-70);
-  --color-sk-purple-80: var(--sk-color-purple-80);
-  --color-sk-purple-90: var(--sk-color-purple-90);
-  --color-sk-purple-95: var(--sk-color-purple-95);
-
-  /* Color Palette - Pink */
-  --color-sk-pink-5: var(--sk-color-pink-05);
-  --color-sk-pink-10: var(--sk-color-pink-10);
-  --color-sk-pink-20: var(--sk-color-pink-20);
-  --color-sk-pink-30: var(--sk-color-pink-30);
-  --color-sk-pink-40: var(--sk-color-pink-40);
-  --color-sk-pink-50: var(--sk-color-pink-50);
-  --color-sk-pink-60: var(--sk-color-pink-60);
-  --color-sk-pink-70: var(--sk-color-pink-70);
-  --color-sk-pink-80: var(--sk-color-pink-80);
-  --color-sk-pink-90: var(--sk-color-pink-90);
-  --color-sk-pink-95: var(--sk-color-pink-95);
-}
-
-//----------------------------------------------------------------------------------------------------------------------

package/src/types/corners.ts

@@ -0,0 +1,10 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Shared Corner Type
+//
+// Used by any component that supports per-corner bevel control (SkPanel, SkInputGroup, and the
+// runtime-controllable form components SkInput / SkButton / SkSelect / SkNumberInput).
+//----------------------------------------------------------------------------------------------------------------------
+
+export type SkCorner = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/utils/slots.test.ts

@@ -0,0 +1,89 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Slot Utilities Tests
+//----------------------------------------------------------------------------------------------------------------------
+
+import { describe, expect, it } from 'vitest';
+import { defineComponent, h, useSlots } from 'vue';
+import { mount } from '@vue/test-utils';
+
+import { hasSlotContent } from './slots';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('hasSlotContent', () =>
+{
+    it('returns false when the slot is undefined', () =>
+    {
+        expect(hasSlotContent(undefined)).toBe(false);
+    });
+
+    it('returns true for a slot that renders text content', () =>
+    {
+        const Probe = defineComponent({
+            setup()
+            {
+                const slots = useSlots();
+                return () => h('div', { 'data-has': hasSlotContent(slots.default) ? 'yes' : 'no' });
+            },
+        });
+
+        const wrapper = mount(Probe, {
+            slots: { default: () => 'hello' },
+        });
+
+        expect(wrapper.attributes('data-has')).toBe('yes');
+    });
+
+    it('returns false for a slot that only renders comments', () =>
+    {
+        const Probe = defineComponent({
+            setup()
+            {
+                const slots = useSlots();
+                return () => h('div', { 'data-has': hasSlotContent(slots.default) ? 'yes' : 'no' });
+            },
+        });
+
+        const wrapper = mount(Probe, {
+            slots: { default: '<!-- nothing -->' },
+        });
+
+        expect(wrapper.attributes('data-has')).toBe('no');
+    });
+
+    it('does not throw when a scoped slot destructures props and is called without props', () =>
+    {
+        // Reproduces the SkModal bug: consumer writes `<template #footer="{ close }">` and
+        // hasSlotContent invokes the slot with no args. Vue compiles destructuring like
+        // `(slotProps) => { const { close } = slotProps; ... }`, which throws if slotProps
+        // is undefined.
+
+        const Consumer = defineComponent({
+            components: {
+                Probe: defineComponent({
+                    setup()
+                    {
+                        const slots = useSlots();
+                        return () => h('div', {
+                            'data-has-footer': hasSlotContent(slots.footer) ? 'yes' : 'no',
+                        });
+                    },
+                }),
+            },
+            template: `
+                <Probe>
+                    <template #footer="{ close }">
+                        <button @click="close">Close</button>
+                    </template>
+                </Probe>
+            `,
+        });
+
+        expect(() => mount(Consumer)).not.toThrow();
+
+        const wrapper = mount(Consumer);
+        expect(wrapper.attributes('data-has-footer')).toBe('yes');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/utils/slots.ts

@@ -0,0 +1,80 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Slot Utilities
+//
+// Helpers for inspecting Vue slot content. The common case: a component renders a wrapper div (or gates a
+// fallback) based on whether a slot was passed. Checking `slots.foo` truthy only tells you a slot *function*
+// exists; it doesn't tell you whether calling it produces anything. A slot whose content resolves to only
+// comments, whitespace text, or a falsy `v-if` still evaluates truthy but renders nothing, which leaves
+// behind empty wrappers that pick up gap/padding and distort layout.
+//----------------------------------------------------------------------------------------------------------------------
+
+import { Comment, Fragment, Text, type VNode } from 'vue';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+// Accepts any slot-shaped callable. Covers both `Slot` (from useSlots) and the narrower
+// `(props) => unknown` signatures that `defineSlots<...>()` produces for typed slots.
+type SlotLike = (...args : any[]) => unknown;
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export function hasRenderableContent(vnodes : VNode[]) : boolean
+{
+    return vnodes.some((vnode) =>
+    {
+        if(vnode.type === Comment) { return false; }
+
+        if(vnode.type === Text)
+        {
+            return typeof vnode.children === 'string' && vnode.children.trim().length > 0;
+        }
+
+        if(vnode.type === Fragment && Array.isArray(vnode.children))
+        {
+            return hasRenderableContent(vnode.children as VNode[]);
+        }
+
+        return true;
+    });
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export function hasSlotContent(slot : SlotLike | undefined, props ?: Record<string, unknown>) : boolean
+{
+    if(!slot) { return false; }
+
+    // Pass an object (not undefined) so scoped slots that destructure their props -- e.g.
+    // `<template #footer="{ close }">` -- don't throw "Cannot destructure property of undefined"
+    // during the content probe. Callers can still pass real props to drive `v-if` decisions
+    // inside the slot.
+    return hasRenderableContent(slot(props ?? {}) as VNode[]);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export function filterRenderableVNodes(vnodes : VNode[]) : VNode[]
+{
+    return vnodes.flatMap((vnode) =>
+    {
+        if(vnode.type === Comment) { return []; }
+
+        if(vnode.type === Text)
+        {
+            if(typeof vnode.children === 'string' && vnode.children.trim().length > 0)
+            {
+                return [ vnode ];
+            }
+            return [];
+        }
+
+        if(vnode.type === Fragment && Array.isArray(vnode.children))
+        {
+            return filterRenderableVNodes(vnode.children as VNode[]);
+        }
+
+        return [ vnode ];
+    });
+}
+
+//----------------------------------------------------------------------------------------------------------------------