@skewedaspect/sleekspace-ui 0.7.0 → 0.8.0

package/llms.txt

@@ -0,0 +1,46 @@
+# SleekSpace UI
+> Vue 3 component library with cyberpunk aesthetic
+
+- Docs: https://sleekspace.skewedaspect.com
+- Full reference: https://sleekspace.skewedaspect.com/llms-full.txt
+- Repository: https://gitlab.com/skewedaspect/sleekspace-ui
+- npm: @skewedaspect/sleekspace-ui
+
+## Components
+
+- **SkAccordion** (Layout): A collapsible sections container for organizing content into expandable panels. Supports single or multiple open items with smooth animations. Built on RekaUI's Accordion primitive with full WAI-ARIA support.
+- **SkAlert** (Feedback): A feedback component for displaying informational messages. Each kind renders a corresponding icon (info circle, checkmark, warning triangle, or error cross) alongside the message content. Renders with `role="alert"` for screen reader announcements.
+- **SkAvatar** (Feedback): A user profile avatar component with three fallback levels: image, initials, and a default person icon. Renders as a square with beveled top-left and bottom-right corners.
+- **SkBreadcrumbs** (Navigation): A navigation breadcrumb trail showing the current page location within a hierarchy. Automatically inserts separator characters between items. Renders inside a `<nav>` element with `aria-label="Breadcrumb"` for accessibility.
+- **SkButton** (Forms): A versatile button component with multiple visual variants, sizes, and interactive states. Renders as a `<button>`, `<a>`, or `<router-link>` depending on the props provided.
+- **SkCard** (Layout): A structured content container with optional header, media, content, and footer sections. Built on top of SkPanel, it inherits beveled corners and decorative accents.
+- **SkCheckbox** (Forms): A checkbox component supporting boolean and indeterminate states. Built on RekaUI's Checkbox primitive with beveled corner styling and full keyboard accessibility.
+- **SkCollapsible** (Layout): A single-section disclosure component for showing and hiding content with smooth height animations. Built on RekaUI's Collapsible primitive.
+- **SkDivider** (Layout): A visual separator component for dividing content sections. Renders as an `<hr>` element with support for both horizontal and vertical orientations.
+- **SkDropdown** (Forms): A dropdown menu component with a trigger button and floating menu content. Supports submenus, menu items, and separators. Built on RekaUI's DropdownMenu primitive and uses a portal for rendering.
+- **SkField** (Forms): A form field wrapper that provides label, description, error message, and validation state management. Automatically wires up accessibility attributes between the label, input, and messages.
+- **SkGroup** (Layout): A layout container that arranges child elements with consistent spacing in a horizontal or vertical direction.
+- **SkInput** (Forms): A text input component with validation states, semantic color support, and multiple input types. Automatically inherits kind from a parent SkField when used together.
+- **SkListbox** (Forms): A searchable select component for choosing from a list of predefined options. Features a combobox-style input with a dropdown list of items. Built on RekaUI's Combobox primitive and uses a portal for the dropdown.
+- **SkModal** (Feedback): A dialog overlay component for presenting focused content that requires user attention or interaction. Includes a backdrop, close button, and optional trigger. Built on RekaUI's Dialog primitive and uses a portal.
+- **SkNavBar** (Navigation): A top navigation bar component with three content zones: brand, navigation, and actions. Sticky by default so it stays visible during scroll.
+- **SkNumberInput** (Forms): A numeric input component with increment/decrement stepper buttons. Supports keyboard navigation, min/max bounds, and step increments. Built on RekaUI's NumberField primitive.
+- **SkPage** (Layout): A full-page layout component that provides a structured page skeleton with header, sidebar, content, and footer regions. Designed for application-level layouts with semantic HTML elements.
+- **SkPagination** (Navigation): A pagination control for navigating through pages of content. Automatically calculates page ranges with ellipsis for large page counts.
+- **SkPanel** (Layout): The foundational container component of SleekSpace UI. Provides borders, background colors, beveled corners, and an optional decorative accent line. Serves as the base for SkCard and other container components.
+- **SkPopover** (Feedback): A floating panel positioned relative to a trigger element. Combines tooltip-like positioning with card-like structure, supporting a header with title, body content, footer, and a connecting arrow. Built on RekaUI's Popover primitive and uses a portal.
+- **SkProgress** (Feedback): A progress bar component with both determinate and indeterminate modes. Supports percentage labels and custom colors. Built on RekaUI's Progress primitive.
+- **SkRadio** (Forms): A radio button component for exclusive selection within a group. SkRadio must be used inside SkRadioGroup. Built on RekaUI's RadioGroup primitive.
+- **SkSidebar** (Navigation): A sticky navigation sidebar container with semantic color theming. Composed of SkSidebarSection and SkSidebarItem for structured navigation.
+- **SkSkeleton** (Feedback): A loading placeholder component with animated shimmer or pulse effects. Use to indicate content is being fetched and provide a visual preview of the expected layout.
+- **SkSlider** (Forms): A range slider component for selecting numeric values. Supports single-thumb and multi-thumb (range) modes with horizontal and vertical orientations. Built on RekaUI's Slider primitive.
+- **SkSpinner** (Feedback): An animated loading indicator with three cyberpunk-themed animation variants. Use to communicate ongoing processing or loading.
+- **SkSwitch** (Forms): A toggle switch component for binary on/off choices. Supports dynamic labels that change with state and flexible thumb styling. Built on RekaUI's Switch primitive.
+- **SkTable** (Feedback): A styled HTML table component with striped rows, hover effects, and configurable borders. Wraps standard `<table>` markup with consistent theming.
+- **SkTabs** (Navigation): A tabbed interface for organizing content into switchable panels. Composed of SkTabs, SkTabList, SkTab, SkTabPanels, and SkTabPanel. Built on RekaUI's Tabs primitive.
+- **SkTag** (Feedback): A compact label component for metadata, categories, status indicators, or keywords. Supports removable tags with a close button.
+- **SkTagsInput** (Forms): A multi-value tag input component for entering a list of string values. Type text and press Enter to add tags; use Backspace or the delete button to remove them. Built on RekaUI's TagsInput primitive.
+- **SkTextarea** (Forms): A multiline text input component with validation states and semantic color support. Automatically inherits kind from a parent SkField.
+- **SkTheme** (Theming): A theme provider component that controls the color scheme for all child components. Sets a `data-scheme` attribute that CSS rules use to apply different semantic token values.
+- **SkToast** (Feedback): A notification toast system for showing brief messages that appear and auto-dismiss. Composed of SkToastProvider (wraps your app) and the `useToast` composable (shows toasts from anywhere). Built on RekaUI's Toast primitive.
+- **SkTooltip** (Feedback): A hover-triggered tooltip for displaying brief supplementary information next to a trigger element. Supports standalone and provider modes for coordinated tooltip behavior. Built on RekaUI's Tooltip primitive and uses a portal.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skewedaspect/sleekspace-ui",
-  "version": "0.7.0",
+  "version": "0.8.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",
@@ -15,6 +15,7 @@
     },
     "./style": "./dist/sleekspace-ui.css",
     "./styles/source": "./src/styles/index.scss",
+    "./styles/mixins/responsive": "./src/styles/mixins/_responsive.scss",
     "./tokens.css": "./dist/tokens.css"
   },
   "files": [
@@ -22,16 +23,20 @@
     "src",
     "docs",
     "web-types.json",
+    "llms.txt",
+    "llms-full.txt",
     "README.md",
     "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",
+    "build": "npm run generate:types && vue-docgen-web-types && vite build && npm run build:tokens && npm run copy:docs && npm run generate:llms",
     "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: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"
   },
   "keywords": [
@@ -58,18 +63,18 @@
     "vue": "^3.3.0"
   },
   "devDependencies": {
-    "@types/node": "^24.8.1",
-    "@vitejs/plugin-vue": "^6.0.1",
-    "sass": "^1.83.2",
-    "typescript": "^5.8.3",
-    "vite": "^7.1.10",
-    "vite-plugin-dts": "^4.5.3",
-    "vue": "^3.5.13",
+    "@types/node": "^25.6.0",
+    "@vitejs/plugin-vue": "^6.0.6",
+    "sass": "^1.99.0",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.8",
+    "vite-plugin-dts": "^4.5.4",
+    "vue": "^3.5.32",
     "vue-docgen-web-types": "^0.1.8"
   },
   "dependencies": {
-    "@vuelor/picker": "^0.3.1",
+    "@vuelor/picker": "^1.0.1",
     "modern-normalize": "^3.0.1",
-    "reka-ui": "^2.6.0"
+    "reka-ui": "^2.9.6"
   }
 }

package/src/components/Button/SkButton.vue

@@ -15,19 +15,21 @@
         :aria-busy="loading ? 'true' : undefined"
         role="button"
     >
-        <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">
-                <slot name="leading" />
-            </span>
-            <span v-if="$slots.icon" class="sk-button-icon sk-button-icon-only">
-                <slot name="icon" />
-            </span>
-            <span v-if="$slots.default" class="sk-button-text">
-                <slot />
-            </span>
-            <span v-if="$slots.trailing" class="sk-button-icon sk-button-icon-trailing">
-                <slot name="trailing" />
+        <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">
+                    <slot name="leading" />
+                </span>
+                <span v-if="$slots.icon" class="sk-button-icon sk-button-icon-only">
+                    <slot name="icon" />
+                </span>
+                <span v-if="$slots.default" class="sk-button-text">
+                    <slot />
+                </span>
+                <span v-if="$slots.trailing" class="sk-button-icon sk-button-icon-trailing">
+                    <slot name="trailing" />
+                </span>
             </span>
         </span>
     </component>
@@ -130,6 +132,14 @@
          */
         pressed ?: boolean;
 
+        /**
+         * Opts out of the coarse-pointer touch-target floor (44px minimum on touch devices).
+         * Use for tight toolbars, data tables, or other contexts where a compact size is preferable
+         * to the default touch-friendly floor. On fine-pointer devices (mouse) this has no effect.
+         * @default false
+         */
+        dense ?: boolean;
+
         /**
          * URL for the button to navigate to. When provided, the button renders as an `<a>` element
          * instead of a `<button>`. Use for external links or simple navigation that doesn't require
@@ -157,6 +167,7 @@
         disabled: false,
         loading: false,
         pressed: false,
+        dense: false,
         href: undefined,
         to: undefined,
     });
@@ -197,6 +208,7 @@
             [`sk-${ props.size }`]: true,
             'sk-loading': props.loading,
             'sk-pressed': props.pressed,
+            'sk-dense': props.dense,
             'sk-icon-only': isIconOnly,
         };
     });

package/src/components/NavBar/SkNavBar.vue

@@ -5,6 +5,10 @@
 <template>
     <nav :class="classes" :style="customColorStyles">
         <div class="sk-navbar-content">
+            <div v-if="slots.leading" class="sk-navbar-leading">
+                <slot name="leading" />
+            </div>
+
             <div v-if="slots.brand" class="sk-navbar-brand">
                 <slot name="brand" />
             </div>
@@ -44,6 +48,8 @@
      * </SkNavBar>
      * ```
      *
+     * @slot leading - Far-left area, rendered before the brand. Canonical placement for a
+     *                  sidebar-drawer toggle (SkPageSidebarToggle). Empty by default.
      * @slot brand - Left-aligned area for your logo, site name, or brand identity. Typically contains an
      *               image or text link to the homepage.
      * @slot default - Center area for main navigation items. Place navigation buttons, links, or menu
@@ -52,10 +58,11 @@
      *                 Ideal for login buttons, shopping carts, or profile dropdowns.
      */
 
-    import { computed, toRef, useSlots } from 'vue';
+    import { computed, provide, toRef, useSlots } from 'vue';
     import type { SkNavBarKind } from './types';
     import type { ComponentCustomColors } from '@/types';
     import { useCustomColors } from '@/composables/useCustomColors';
+    import { NAVBAR_KIND_KEY } from './context';
 
     //------------------------------------------------------------------------------------------------------------------
 
@@ -85,6 +92,10 @@
         sticky: true,
     });
 
+    // 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.
+    provide(NAVBAR_KIND_KEY, toRef(() => props.kind));
+
     //------------------------------------------------------------------------------------------------------------------
 
     const slots = useSlots();

package/src/components/NavBar/context.ts

@@ -0,0 +1,16 @@
+//----------------------------------------------------------------------------------------------------------------------
+// NavBar Context
+//
+// Injection key for descendants (e.g. SkPageSidebarToggle) that want to inherit the surrounding
+// navbar's kind without the user wiring it manually.
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { InjectionKey, Ref } from 'vue';
+
+import type { SkNavBarKind } from './types';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export const NAVBAR_KIND_KEY : InjectionKey<Ref<SkNavBarKind>> = Symbol('sk-navbar-kind');
+
+//----------------------------------------------------------------------------------------------------------------------