@skewedaspect/sleekspace-ui 0.5.0 → 0.6.0

package/src/components/Theme/types.ts

@@ -2,12 +2,29 @@
 // Theme Component Types
 //----------------------------------------------------------------------------------------------------------------------
 
+/**
+ * Registry of available theme names. Augment this interface to register custom themes:
+ *
+ * ```ts
+ * declare module '@skewedaspect/sleekspace-ui' {
+ *     interface SkThemeNameMap {
+ *         ocean : true;
+ *         midnight : true;
+ *     }
+ * }
+ * ```
+ */
+export interface SkThemeNameMap
+{
+    greyscale : true;
+    colorful : true;
+}
+
 /**
  * Available theme names that control the overall color scheme of the application.
- * - 'greyscale': A monochromatic theme with neutral grays and subtle accents
- * - 'colorful': A vibrant theme with saturated colors and stronger contrasts
+ * Derived from {@link SkThemeNameMap} — augment that interface to add custom themes.
  */
-export type SkThemeName = 'greyscale' | 'colorful';
+export type SkThemeName = keyof SkThemeNameMap;
 
 //----------------------------------------------------------------------------------------------------------------------
 

package/src/global.d.ts

@@ -49,6 +49,8 @@ declare module '@vue/runtime-core' {
         SkProgress: DefineComponent<import('./components/Progress/SkProgress.vue').SkProgressComponentProps>;
         SkRadio: DefineComponent<import('./components/Radio/SkRadio.vue').SkRadioComponentProps>;
         SkRadioGroup: DefineComponent<import('./components/Radio/SkRadioGroup.vue').SkRadioGroupComponentProps>;
+        SkSelect: DefineComponent<import('./components/Select/SkSelect.vue').SkSelectComponentProps>;
+        SkSelectItem: DefineComponent<import('./components/Select/SkSelectItem.vue').SkSelectItemComponentProps>;
         SkSidebar: DefineComponent<import('./components/Sidebar/SkSidebar.vue').SkSidebarComponentProps>;
         SkSidebarItem: DefineComponent<import('./components/Sidebar/SkSidebarItem.vue').SkSidebarItemComponentProps>;
         SkSidebarSection: DefineComponent<import('./components/Sidebar/SkSidebarSection.vue').SkSidebarSectionComponentProps>;

package/src/index.ts

@@ -50,6 +50,9 @@ import SkPopover, { type SkPopoverComponentProps } from './components/Popover/Sk
 import SkProgress, { type SkProgressComponentProps } from './components/Progress/SkProgress.vue';
 import SkRadio, { type SkRadioComponentProps } from './components/Radio/SkRadio.vue';
 import SkRadioGroup, { type SkRadioGroupComponentProps } from './components/Radio/SkRadioGroup.vue';
+import SkSelect, { type SkSelectComponentProps } from './components/Select/SkSelect.vue';
+import SkSelectItem, { type SkSelectItemComponentProps } from './components/Select/SkSelectItem.vue';
+import SkSelectSeparator from './components/Select/SkSelectSeparator.vue';
 import SkSidebar, { type SkSidebarComponentProps } from './components/Sidebar/SkSidebar.vue';
 import SkSidebarItem, { type SkSidebarItemComponentProps } from './components/Sidebar/SkSidebarItem.vue';
 import SkSidebarSection, { type SkSidebarSectionComponentProps } from './components/Sidebar/SkSidebarSection.vue';
@@ -108,6 +111,7 @@ export * from './components/Panel/types';
 export * from './components/Popover/types';
 export * from './components/Progress/types';
 export * from './components/Radio/types';
+export * from './components/Select/types';
 export * from './components/Sidebar/types';
 export * from './components/Skeleton/types';
 export * from './components/Slider/types';
@@ -166,6 +170,9 @@ export { SkPopover, type SkPopoverComponentProps };
 export { SkProgress, type SkProgressComponentProps };
 export { SkRadio, type SkRadioComponentProps };
 export { SkRadioGroup, type SkRadioGroupComponentProps };
+export { SkSelect, type SkSelectComponentProps };
+export { SkSelectItem, type SkSelectItemComponentProps };
+export { SkSelectSeparator };
 export { SkSidebar, type SkSidebarComponentProps };
 export { SkSidebarItem, type SkSidebarItemComponentProps };
 export { SkSidebarSection, type SkSidebarSectionComponentProps };
@@ -229,6 +236,9 @@ const SleekSpaceUI : Plugin = {
         app.component('SkProgress', SkProgress);
         app.component('SkRadio', SkRadio);
         app.component('SkRadioGroup', SkRadioGroup);
+        app.component('SkSelect', SkSelect);
+        app.component('SkSelectItem', SkSelectItem);
+        app.component('SkSelectSeparator', SkSelectSeparator);
         app.component('SkSidebar', SkSidebar);
         app.component('SkSidebarItem', SkSidebarItem);
         app.component('SkSidebarSection', SkSidebarSection);

package/src/styles/components/_button.scss

@@ -103,10 +103,10 @@
     --sk-button-outline-bg: rgba(5, 5, 5, 0.15);
 
     /// Subtle variant background opacity (references global foundation token)
-    --sk-button-subtle-opacity: var(--sk-opacity-subtle);
+    --sk-button-subtle-opacity: 0.35;
 
     /// Subtle variant hover background opacity (references global foundation token)
-    --sk-button-subtle-opacity-hover: var(--sk-opacity-subtle-hover);
+    --sk-button-subtle-opacity-hover: 0.65;
 
     /// Subtle variant border opacity (references global foundation token)
     --sk-button-subtle-border-opacity: var(--sk-opacity-subtle-border);
@@ -260,10 +260,9 @@
 
         &:hover:not(:disabled)
         {
-            --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
             --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
 
-            background-color: oklch(from var(--sk-button-bg) l c h / var(--sk-button-subtle-opacity-hover));
+            background-color: var(--sk-button-bg-hover);
         }
 
         &:active:not(:disabled)
@@ -534,6 +533,12 @@
             @include button-subtle-kind($kind);
         }
 
+        &:disabled,
+        &.sk-loading
+        {
+            background-color: oklch(from var(--sk-button-bg) l c h / 0.45);
+        }
+
         // Special case: neutral text and border are lighter (halfway to white) for better differentiation
         &.sk-neutral
         {
@@ -624,20 +629,51 @@
 
     &.sk-pressed
     {
-        &.sk-outline,
-        &.sk-ghost
+        &.sk-solid
         {
-            background-color: oklch(from var(--sk-button-bg) l c h / var(--sk-button-subtle-opacity));
+            --sk-button-border-color: var(--sk-button-border-hover);
+            background-color: var(--sk-button-bg-hover);
+            color: var(--sk-button-text);
+
+            &:hover:not(:disabled)
+            {
+                --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
+                background-color: color-mix(in oklch, var(--sk-button-bg) 70%, white 30%);
+            }
         }
 
-        &.sk-solid
+        &.sk-outline
         {
-            background-color: var(--sk-button-bg-active);
+            --sk-button-border-color: var(--sk-button-border-hover);
+            background-color: var(--sk-button-bg);
+            color: var(--sk-button-text);
         }
 
         &.sk-subtle
         {
+            --sk-button-border-color: transparent;
             background-color: var(--sk-button-bg);
+            color: var(--sk-button-text);
+
+            &:hover:not(:disabled)
+            {
+                --sk-button-border-color: transparent;
+                --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
+                background-color: var(--sk-button-bg-hover);
+            }
+        }
+
+        &.sk-ghost
+        {
+            --sk-button-border-color: color-mix(in oklch, var(--sk-button-border-base) 50%, transparent 50%);
+            border-color: color-mix(in oklch, var(--sk-button-border-base) 50%, transparent 50%);
+            background-color: var(--sk-button-outline-bg);
+            color: var(--sk-button-text);
+        }
+
+        &.sk-link
+        {
+            color: var(--sk-button-text);
         }
     }
 

package/src/styles/components/_card.scss

@@ -3,7 +3,6 @@
 //----------------------------------------------------------------------------------------------------------------------
 
 @use '../theme/variables' as *;
-@use '../mixins' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
 // Card Design Tokens
@@ -42,10 +41,34 @@
 
     .sk-card-header
     {
+        // Header cut is reduced by margin to align with panel bevel
+        --sk-card-header-cut-tl: calc(var(--sk-panel-cut-tl) - 2px);
+        --sk-card-header-cut-tr: calc(var(--sk-panel-cut-tr) - 2px);
+
         padding: var(--sk-card-header-padding-vertical) var(--sk-card-padding);
-        //border-bottom: var(--sk-border-width-thin) solid oklch(from currentColor l c h / 0.3);
         background-color: oklch(from currentColor l c h / 0.2);
         margin: 2px;
+
+        // Beveled top corners (modern path)
+        @supports (corner-shape: bevel)
+        {
+            border-top-left-radius: max(0px, var(--sk-card-header-cut-tl));
+            border-top-right-radius: max(0px, var(--sk-card-header-cut-tr));
+            corner-shape: bevel;
+        }
+
+        // Beveled top corners (clip-path fallback)
+        @supports not (corner-shape: bevel)
+        {
+            clip-path: polygon(
+                max(0px, var(--sk-card-header-cut-tl)) 0,
+                calc(100% - max(0px, var(--sk-card-header-cut-tr))) 0,
+                100% max(0px, var(--sk-card-header-cut-tr)),
+                100% 100%,
+                0 100%,
+                0 max(0px, var(--sk-card-header-cut-tl))
+            );
+        }
     }
 
     .sk-card-title
@@ -100,13 +123,26 @@
         padding: var(--sk-card-footer-padding-vertical) var(--sk-card-padding);
         background-color: oklch(from currentColor l c h / 0.05);
 
-        // Apply cut-border mixin for beveled corner (bottom-right only)
-        @include cut-border(
-            $cut: var(--sk-panel-cut-size),
-            $border-width: 0,
-            $border-color: tranparent,
-            $corners: (bottom-right)
-        );
+        // Beveled bottom corners (modern path)
+        @supports (corner-shape: bevel)
+        {
+            border-bottom-right-radius: var(--sk-panel-cut-br);
+            border-bottom-left-radius: var(--sk-panel-cut-bl);
+            corner-shape: bevel;
+        }
+
+        // Beveled bottom corners (clip-path fallback)
+        @supports not (corner-shape: bevel)
+        {
+            clip-path: polygon(
+                0 0,
+                100% 0,
+                100% calc(100% - var(--sk-panel-cut-br)),
+                calc(100% - var(--sk-panel-cut-br)) 100%,
+                var(--sk-panel-cut-bl) 100%,
+                0 calc(100% - var(--sk-panel-cut-bl))
+            );
+        }
 
         border-top: var(--sk-border-width-thin) solid oklch(from currentColor l c h / 0.1);
     }

package/src/styles/components/_index.scss

@@ -29,6 +29,7 @@
     @include meta.load-css('popover');
     @include meta.load-css('progress');
     @include meta.load-css('radio');
+    @include meta.load-css('select');
     @include meta.load-css('sidebar');
     @include meta.load-css('skeleton');
     @include meta.load-css('slider');

package/src/styles/components/_listbox.scss

@@ -12,6 +12,7 @@
 
     position: relative;
     display: inline-flex;
+    width: 100%;
 
     // Size variants
     &.sk-sm

package/src/styles/components/_panel.scss

@@ -3,7 +3,6 @@
 //----------------------------------------------------------------------------------------------------------------------
 
 @use '../theme/variables' as *;
-@use '../mixins' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
 // Panel Design Tokens
@@ -27,6 +26,12 @@
     /// Default cut size for md panels (height / factor)
     --sk-panel-cut-size: calc(var(--sk-panel-min-height) / var(--sk-panel-radius-factor));
 
+    /// Per-corner cut sizes (toggled on by .sk-cut-* classes)
+    --sk-panel-cut-tl: 0px;
+    --sk-panel-cut-tr: 0px;
+    --sk-panel-cut-br: 0px;
+    --sk-panel-cut-bl: 0px;
+
     //------------------------------------------------------------------------------------------------------------------
     // Border Tokens
     //------------------------------------------------------------------------------------------------------------------
@@ -141,13 +146,86 @@
         color: var(--sk-kind-color, var(--sk-panel-color-base));
     }
 
-    // Apply cut-border mixin for beveled corner (bottom-right only)
-    @include cut-border(
-        $cut: var(--sk-panel-cut-size),
-        $border-width: var(--sk-panel-border-width),
-        $border-color: var(--sk-panel-border-color),
-        $corners: (bottom-right)
-    );
+    //------------------------------------------------------------------------------------------------------------------
+    // Corner toggle classes
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-cut-top-left     { --sk-panel-cut-tl: var(--sk-panel-cut-size); }
+    &.sk-cut-top-right    { --sk-panel-cut-tr: var(--sk-panel-cut-size); }
+    &.sk-cut-bottom-right { --sk-panel-cut-br: var(--sk-panel-cut-size); }
+    &.sk-cut-bottom-left  { --sk-panel-cut-bl: var(--sk-panel-cut-size); }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Beveled corners (modern path)
+    //------------------------------------------------------------------------------------------------------------------
+
+    @supports (corner-shape: bevel)
+    {
+        border: var(--sk-panel-border-width) solid var(--sk-panel-border-color);
+        border-top-left-radius: var(--sk-panel-cut-tl);
+        border-top-right-radius: var(--sk-panel-cut-tr);
+        border-bottom-right-radius: var(--sk-panel-cut-br);
+        border-bottom-left-radius: var(--sk-panel-cut-bl);
+        corner-shape: bevel;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Beveled corners (clip-path fallback)
+    //------------------------------------------------------------------------------------------------------------------
+
+    @supports not (corner-shape: bevel)
+    {
+        border: none;
+
+        // 8-point polygon; when a corner var is 0px its two points collapse into the corner
+        clip-path: polygon(
+            var(--sk-panel-cut-tl) 0,
+            calc(100% - var(--sk-panel-cut-tr)) 0,
+            100% var(--sk-panel-cut-tr),
+            100% calc(100% - var(--sk-panel-cut-br)),
+            calc(100% - var(--sk-panel-cut-br)) 100%,
+            var(--sk-panel-cut-bl) 100%,
+            0 calc(100% - var(--sk-panel-cut-bl)),
+            0 var(--sk-panel-cut-tl)
+        );
+
+        // ::before draws the border via double-polygon clip-path
+        &::before
+        {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: var(--sk-panel-border-color);
+            z-index: -1;
+
+            clip-path: polygon(
+                // Outer ring (clockwise)
+                var(--sk-panel-cut-tl) 0,
+                calc(100% - var(--sk-panel-cut-tr)) 0,
+                100% var(--sk-panel-cut-tr),
+                100% calc(100% - var(--sk-panel-cut-br)),
+                calc(100% - var(--sk-panel-cut-br)) 100%,
+                var(--sk-panel-cut-bl) 100%,
+                0 calc(100% - var(--sk-panel-cut-bl)),
+                0 var(--sk-panel-cut-tl),
+                var(--sk-panel-cut-tl) 0,
+
+                // Inner ring (counter-clockwise)
+                calc(var(--sk-panel-cut-tl) + var(--sk-panel-border-width)) var(--sk-panel-border-width),
+                var(--sk-panel-border-width) calc(var(--sk-panel-cut-tl) + var(--sk-panel-border-width)),
+                var(--sk-panel-border-width) calc(100% - var(--sk-panel-cut-bl) - var(--sk-panel-border-width)),
+                calc(var(--sk-panel-cut-bl) + var(--sk-panel-border-width)) calc(100% - var(--sk-panel-border-width)),
+                calc(100% - var(--sk-panel-cut-br) - var(--sk-panel-border-width)) calc(100% - var(--sk-panel-border-width)),
+                calc(100% - var(--sk-panel-border-width)) calc(100% - var(--sk-panel-cut-br) - var(--sk-panel-border-width)),
+                calc(100% - var(--sk-panel-border-width)) calc(var(--sk-panel-cut-tr) + var(--sk-panel-border-width)),
+                calc(100% - var(--sk-panel-cut-tr) - var(--sk-panel-border-width)) var(--sk-panel-border-width),
+                calc(var(--sk-panel-cut-tl) + var(--sk-panel-border-width)) var(--sk-panel-border-width)
+            );
+        }
+    }
 
     //------------------------------------------------------------------------------------------------------------------
     // Corner decoration line
@@ -161,11 +239,40 @@
         height: 2px;
         background: var(--sk-panel-border-base);
         border-radius: 1px;
+        transform-origin: center;
+        pointer-events: none;
+    }
+
+    // Bottom-right decoration (default)
+    &.sk-decoration-bottom-right::after
+    {
         right: var(--sk-panel-decoration-offset);
         bottom: calc(var(--sk-panel-cut-size) / 2 + var(--sk-panel-decoration-offset) - 1px);
         transform: rotate(135deg);
-        transform-origin: center;
-        pointer-events: none;
+    }
+
+    // Top-left decoration (same diagonal as bottom-right)
+    &.sk-decoration-top-left::after
+    {
+        left: var(--sk-panel-decoration-offset);
+        top: calc(var(--sk-panel-cut-size) / 2 + var(--sk-panel-decoration-offset) - 1px);
+        transform: rotate(135deg);
+    }
+
+    // Top-right decoration
+    &.sk-decoration-top-right::after
+    {
+        right: var(--sk-panel-decoration-offset);
+        top: calc(var(--sk-panel-cut-size) / 2 + var(--sk-panel-decoration-offset) - 1px);
+        transform: rotate(45deg);
+    }
+
+    // Bottom-left decoration
+    &.sk-decoration-bottom-left::after
+    {
+        left: var(--sk-panel-decoration-offset);
+        bottom: calc(var(--sk-panel-cut-size) / 2 + var(--sk-panel-decoration-offset) - 1px);
+        transform: rotate(45deg);
     }
 
     //------------------------------------------------------------------------------------------------------------------
@@ -203,9 +310,8 @@
 
     &.sk-no-border
     {
-        // Remove all border styling
+        // Remove border and glow but keep the bevel shape
         --sk-panel-border-width: 0;
-        --sk-panel-cut-size: 0;
         box-shadow: none;
 
         // Remove the decoration as well
@@ -231,7 +337,7 @@
     .sk-panel-scroll-content
     {
         padding: var(--sk-panel-padding);
-        margin-bottom: calc(var(--sk-panel-cut-size) + var(--sk-panel-decoration-offset));
+        margin-bottom: calc(max(var(--sk-panel-cut-br), var(--sk-panel-cut-bl)) + var(--sk-panel-decoration-offset));
         overflow-y: auto;
         overflow-x: hidden;
         flex: 1;