@skewedaspect/sleekspace-ui 0.5.1 → 0.7.0

package/src/index.ts

@@ -22,12 +22,41 @@ import SkButton, { type SkButtonComponentProps } from './components/Button/SkBut
 import SkCard, { type SkCardComponentProps } from './components/Card/SkCard.vue';
 import SkCheckbox, { type SkCheckboxComponentProps } from './components/Checkbox/SkCheckbox.vue';
 import SkCollapsible, { type SkCollapsibleComponentProps } from './components/Collapsible/SkCollapsible.vue';
+import SkColorPicker, { type SkColorPickerComponentProps } from './components/ColorPicker/SkColorPicker.vue';
+import SkContextMenu, { type SkContextMenuComponentProps } from './components/ContextMenu/SkContextMenu.vue';
+import SkContextMenuCheckboxItem, {
+    type SkContextMenuCheckboxItemComponentProps,
+} from './components/ContextMenu/SkContextMenuCheckboxItem.vue';
+import SkContextMenuItem, {
+    type SkContextMenuItemComponentProps,
+} from './components/ContextMenu/SkContextMenuItem.vue';
+import SkContextMenuLabel from './components/ContextMenu/SkContextMenuLabel.vue';
+import SkContextMenuRadioGroup, {
+    type SkContextMenuRadioGroupComponentProps,
+} from './components/ContextMenu/SkContextMenuRadioGroup.vue';
+import SkContextMenuRadioItem, {
+    type SkContextMenuRadioItemComponentProps,
+} from './components/ContextMenu/SkContextMenuRadioItem.vue';
+import SkContextMenuSeparator from './components/ContextMenu/SkContextMenuSeparator.vue';
+import SkContextMenuSubmenu, {
+    type SkContextMenuSubmenuComponentProps,
+} from './components/ContextMenu/SkContextMenuSubmenu.vue';
 import SkDivider, { type SkDividerComponentProps } from './components/Divider/SkDivider.vue';
 import SkDropdown, { type SkDropdownComponentProps } from './components/Dropdown/SkDropdown.vue';
+import SkDropdownCheckboxItem, {
+    type SkDropdownCheckboxItemComponentProps,
+} from './components/Dropdown/SkDropdownCheckboxItem.vue';
+import SkDropdownMenuLabel from './components/Dropdown/SkDropdownMenuLabel.vue';
 import SkDropdownMenuItem, {
     type SkDropdownMenuItemComponentProps,
 } from './components/Dropdown/SkDropdownMenuItem.vue';
 import SkDropdownMenuSeparator from './components/Dropdown/SkDropdownMenuSeparator.vue';
+import SkDropdownRadioGroup, {
+    type SkDropdownRadioGroupComponentProps,
+} from './components/Dropdown/SkDropdownRadioGroup.vue';
+import SkDropdownRadioItem, {
+    type SkDropdownRadioItemComponentProps,
+} from './components/Dropdown/SkDropdownRadioItem.vue';
 import SkDropdownSubmenu, {
     type SkDropdownSubmenuComponentProps,
 } from './components/Dropdown/SkDropdownSubmenu.vue';
@@ -50,12 +79,19 @@ 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 SkScrollArea, { type SkScrollAreaComponentProps } from './components/ScrollArea/SkScrollArea.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';
 import SkSkeleton, { type SkSkeletonComponentProps } from './components/Skeleton/SkSkeleton.vue';
 import SkSlider, { type SkSliderComponentProps } from './components/Slider/SkSlider.vue';
 import SkSpinner, { type SkSpinnerComponentProps } from './components/Spinner/SkSpinner.vue';
+import SkSplitter, { type SkSplitterComponentProps } from './components/Splitter/SkSplitter.vue';
+import SkSplitterHandle, { type SkSplitterHandleComponentProps } from './components/Splitter/SkSplitterHandle.vue';
+import SkSplitterPanel, { type SkSplitterPanelComponentProps } from './components/Splitter/SkSplitterPanel.vue';
 import SkSwitch, { type SkSwitchComponentProps } from './components/Switch/SkSwitch.vue';
 import SkTable, { type SkTableComponentProps } from './components/Table/SkTable.vue';
 import SkTab, { type SkTabComponentProps } from './components/Tabs/SkTab.vue';
@@ -69,10 +105,23 @@ import SkTextarea, { type SkTextareaComponentProps } from './components/Textarea
 import SkToastProvider, {
     type SkToastProviderComponentProps,
 } from './components/Toast/SkToastProvider.vue';
+import SkToolbar, { type SkToolbarComponentProps } from './components/Toolbar/SkToolbar.vue';
+import SkToolbarButton, {
+    type SkToolbarButtonComponentProps,
+} from './components/Toolbar/SkToolbarButton.vue';
+import SkToolbarSeparator from './components/Toolbar/SkToolbarSeparator.vue';
+import SkToolbarToggleGroup, {
+    type SkToolbarToggleGroupComponentProps,
+} from './components/Toolbar/SkToolbarToggleGroup.vue';
+import SkToolbarToggleItem, {
+    type SkToolbarToggleItemComponentProps,
+} from './components/Toolbar/SkToolbarToggleItem.vue';
 import SkTooltip, { type SkTooltipComponentProps } from './components/Tooltip/SkTooltip.vue';
 import SkTooltipProvider, {
     type SkTooltipProviderProps,
 } from './components/Tooltip/SkTooltipProvider.vue';
+import SkTreeItem, { type SkTreeItemComponentProps } from './components/TreeView/SkTreeItem.vue';
+import SkTreeView, { type SkTreeViewComponentProps } from './components/TreeView/SkTreeView.vue';
 import SkTheme from './components/Theme/SkTheme.vue';
 
 //----------------------------------------------------------------------------------------------------------------------
@@ -93,6 +142,8 @@ export * from './components/Button/types';
 export * from './components/Card/types';
 export * from './components/Checkbox/types';
 export * from './components/Collapsible/types';
+export * from './components/ColorPicker/types';
+export * from './components/ContextMenu/types';
 export * from './components/Divider/types';
 export * from './components/Dropdown/types';
 export * from './components/Field/types';
@@ -108,10 +159,13 @@ export * from './components/Panel/types';
 export * from './components/Popover/types';
 export * from './components/Progress/types';
 export * from './components/Radio/types';
+export * from './components/ScrollArea/types';
+export * from './components/Select/types';
 export * from './components/Sidebar/types';
 export * from './components/Skeleton/types';
 export * from './components/Slider/types';
 export * from './components/Spinner/types';
+export * from './components/Splitter/types';
 export * from './components/Switch/types';
 export * from './components/Table/types';
 export * from './components/Tabs/types';
@@ -119,7 +173,9 @@ export * from './components/Tag/types';
 export * from './components/TagsInput/types';
 export * from './components/Textarea/types';
 export * from './components/Toast/types';
+export * from './components/Toolbar/types';
 export * from './components/Tooltip/types';
+export * from './components/TreeView/types';
 export * from './components/Theme/types';
 
 //----------------------------------------------------------------------------------------------------------------------
@@ -144,10 +200,23 @@ export { SkButton, type SkButtonComponentProps };
 export { SkCard, type SkCardComponentProps };
 export { SkCheckbox, type SkCheckboxComponentProps };
 export { SkCollapsible, type SkCollapsibleComponentProps };
+export { SkColorPicker, type SkColorPickerComponentProps };
+export { SkContextMenu, type SkContextMenuComponentProps };
+export { SkContextMenuCheckboxItem, type SkContextMenuCheckboxItemComponentProps };
+export { SkContextMenuItem, type SkContextMenuItemComponentProps };
+export { SkContextMenuLabel };
+export { SkContextMenuRadioGroup, type SkContextMenuRadioGroupComponentProps };
+export { SkContextMenuRadioItem, type SkContextMenuRadioItemComponentProps };
+export { SkContextMenuSeparator };
+export { SkContextMenuSubmenu, type SkContextMenuSubmenuComponentProps };
 export { SkDivider, type SkDividerComponentProps };
 export { SkDropdown, type SkDropdownComponentProps };
+export { SkDropdownCheckboxItem, type SkDropdownCheckboxItemComponentProps };
+export { SkDropdownMenuLabel };
 export { SkDropdownMenuItem, type SkDropdownMenuItemComponentProps };
 export { SkDropdownMenuSeparator };
+export { SkDropdownRadioGroup, type SkDropdownRadioGroupComponentProps };
+export { SkDropdownRadioItem, type SkDropdownRadioItemComponentProps };
 export { SkDropdownSubmenu, type SkDropdownSubmenuComponentProps };
 export { SkField, type SkFieldComponentProps };
 export { SkGroup, type SkGroupComponentProps };
@@ -166,12 +235,19 @@ export { SkPopover, type SkPopoverComponentProps };
 export { SkProgress, type SkProgressComponentProps };
 export { SkRadio, type SkRadioComponentProps };
 export { SkRadioGroup, type SkRadioGroupComponentProps };
+export { SkScrollArea, type SkScrollAreaComponentProps };
+export { SkSelect, type SkSelectComponentProps };
+export { SkSelectItem, type SkSelectItemComponentProps };
+export { SkSelectSeparator };
 export { SkSidebar, type SkSidebarComponentProps };
 export { SkSidebarItem, type SkSidebarItemComponentProps };
 export { SkSidebarSection, type SkSidebarSectionComponentProps };
 export { SkSkeleton, type SkSkeletonComponentProps };
 export { SkSlider, type SkSliderComponentProps };
 export { SkSpinner, type SkSpinnerComponentProps };
+export { SkSplitter, type SkSplitterComponentProps };
+export { SkSplitterHandle, type SkSplitterHandleComponentProps };
+export { SkSplitterPanel, type SkSplitterPanelComponentProps };
 export { SkSwitch, type SkSwitchComponentProps };
 export { SkTab, type SkTabComponentProps };
 export { SkTabList, type SkTabListComponentProps };
@@ -183,8 +259,15 @@ export { SkTag, type SkTagComponentProps };
 export { SkTagsInput, type SkTagsInputComponentProps };
 export { SkTextarea, type SkTextareaComponentProps };
 export { SkToastProvider, type SkToastProviderComponentProps };
+export { SkToolbar, type SkToolbarComponentProps };
+export { SkToolbarButton, type SkToolbarButtonComponentProps };
+export { SkToolbarSeparator };
+export { SkToolbarToggleGroup, type SkToolbarToggleGroupComponentProps };
+export { SkToolbarToggleItem, type SkToolbarToggleItemComponentProps };
 export { SkTooltip, type SkTooltipComponentProps };
 export { SkTooltipProvider, type SkTooltipProviderProps };
+export { SkTreeItem, type SkTreeItemComponentProps };
+export { SkTreeView, type SkTreeViewComponentProps };
 export { SkTheme, type SkThemeComponentProps };
 
 //----------------------------------------------------------------------------------------------------------------------
@@ -207,10 +290,23 @@ const SleekSpaceUI : Plugin = {
         app.component('SkCard', SkCard);
         app.component('SkCheckbox', SkCheckbox);
         app.component('SkCollapsible', SkCollapsible);
+        app.component('SkColorPicker', SkColorPicker);
+        app.component('SkContextMenu', SkContextMenu);
+        app.component('SkContextMenuCheckboxItem', SkContextMenuCheckboxItem);
+        app.component('SkContextMenuItem', SkContextMenuItem);
+        app.component('SkContextMenuLabel', SkContextMenuLabel);
+        app.component('SkContextMenuRadioGroup', SkContextMenuRadioGroup);
+        app.component('SkContextMenuRadioItem', SkContextMenuRadioItem);
+        app.component('SkContextMenuSeparator', SkContextMenuSeparator);
+        app.component('SkContextMenuSubmenu', SkContextMenuSubmenu);
         app.component('SkDivider', SkDivider);
         app.component('SkDropdown', SkDropdown);
+        app.component('SkDropdownCheckboxItem', SkDropdownCheckboxItem);
+        app.component('SkDropdownMenuLabel', SkDropdownMenuLabel);
         app.component('SkDropdownMenuItem', SkDropdownMenuItem);
         app.component('SkDropdownMenuSeparator', SkDropdownMenuSeparator);
+        app.component('SkDropdownRadioGroup', SkDropdownRadioGroup);
+        app.component('SkDropdownRadioItem', SkDropdownRadioItem);
         app.component('SkDropdownSubmenu', SkDropdownSubmenu);
         app.component('SkField', SkField);
         app.component('SkGroup', SkGroup);
@@ -229,12 +325,19 @@ const SleekSpaceUI : Plugin = {
         app.component('SkProgress', SkProgress);
         app.component('SkRadio', SkRadio);
         app.component('SkRadioGroup', SkRadioGroup);
+        app.component('SkScrollArea', SkScrollArea);
+        app.component('SkSelect', SkSelect);
+        app.component('SkSelectItem', SkSelectItem);
+        app.component('SkSelectSeparator', SkSelectSeparator);
         app.component('SkSidebar', SkSidebar);
         app.component('SkSidebarItem', SkSidebarItem);
         app.component('SkSidebarSection', SkSidebarSection);
         app.component('SkSkeleton', SkSkeleton);
         app.component('SkSlider', SkSlider);
         app.component('SkSpinner', SkSpinner);
+        app.component('SkSplitter', SkSplitter);
+        app.component('SkSplitterHandle', SkSplitterHandle);
+        app.component('SkSplitterPanel', SkSplitterPanel);
         app.component('SkSwitch', SkSwitch);
         app.component('SkTab', SkTab);
         app.component('SkTabList', SkTabList);
@@ -246,8 +349,15 @@ const SleekSpaceUI : Plugin = {
         app.component('SkTagsInput', SkTagsInput);
         app.component('SkTextarea', SkTextarea);
         app.component('SkToastProvider', SkToastProvider);
+        app.component('SkToolbar', SkToolbar);
+        app.component('SkToolbarButton', SkToolbarButton);
+        app.component('SkToolbarSeparator', SkToolbarSeparator);
+        app.component('SkToolbarToggleGroup', SkToolbarToggleGroup);
+        app.component('SkToolbarToggleItem', SkToolbarToggleItem);
         app.component('SkTooltip', SkTooltip);
         app.component('SkTooltipProvider', SkTooltipProvider);
+        app.component('SkTreeItem', SkTreeItem);
+        app.component('SkTreeView', SkTreeView);
         app.component('SkTheme', SkTheme);
     },
 };

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