@skewedaspect/sleekspace-ui 0.7.0 → 0.8.0

package/src/styles/components/_progress.scss

@@ -3,6 +3,7 @@
 //----------------------------------------------------------------------------------------------------------------------
 
 @use '@/styles/mixins/cut-border' as *;
+@use '@/styles/mixins/responsive' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
 
@@ -278,3 +279,16 @@ $kinds: (neutral, primary, accent, info, success, warning, danger);
 }
 
 //----------------------------------------------------------------------------------------------------------------------
+// Reduced motion: indeterminate progress still communicates "working", just slower. A fully
+// static bar would read as "stopped" or broken.
+//----------------------------------------------------------------------------------------------------------------------
+
+@include reduced-motion
+{
+    .sk-progress-indicator-indeterminate
+    {
+        animation-duration: 8s;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_radio.scss

@@ -1,4 +1,4 @@
-@use '@/styles/mixins/cut-border' as *;
+@use '@/styles/mixins' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
 // Radio Component Styles
@@ -29,6 +29,11 @@
     gap: var(--sk-space-xs);
     cursor: pointer;
 
+    @include touch
+    {
+        min-height: 44px;
+    }
+
     &.sk-disabled
     {
         cursor: not-allowed;
@@ -47,6 +52,7 @@
     // Corner cut size (scales with size variant)
     --sk-radio-cut: 0.3rem;
 
+    position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -230,6 +236,7 @@
 
 .sk-radio-indicator
 {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;

package/src/styles/components/_scroll-area.scss

@@ -26,6 +26,7 @@ $kinds: (neutral, primary, accent, info, success, warning, danger);
     --sk-scroll-area-thumb-color: var(--sk-scroll-area-color-base);
     --sk-scroll-area-track-color: oklch(from var(--sk-neutral-base) l c h / 0.08);
     --sk-scroll-area-size: 0.5rem;
+    --sk-scroll-area-fade: 1.5rem;
 
     position: relative;
     overflow: hidden;
@@ -36,6 +37,61 @@ $kinds: (neutral, primary, accent, info, success, warning, danger);
     }
 }
 
+//----------------------------------------------------------------------------------------------------------------------
+// Edge fade
+//
+// Applied to the viewport via CSS mask-image so the content visibly tapers at the edges where
+// scrolling is possible. Always-on (not scroll-position aware) -- keeps the pattern pure-CSS
+// and avoids layout shift. Width is tunable via `--sk-scroll-area-fade`.
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-scroll-area.sk-fade
+{
+    &.sk-vertical .sk-scroll-area-viewport
+    {
+        mask-image: linear-gradient(
+            to bottom,
+            transparent 0,
+            black var(--sk-scroll-area-fade),
+            black calc(100% - var(--sk-scroll-area-fade)),
+            transparent 100%
+        );
+    }
+
+    &.sk-horizontal .sk-scroll-area-viewport
+    {
+        mask-image: linear-gradient(
+            to right,
+            transparent 0,
+            black var(--sk-scroll-area-fade),
+            black calc(100% - var(--sk-scroll-area-fade)),
+            transparent 100%
+        );
+    }
+
+    &.sk-both .sk-scroll-area-viewport
+    {
+        // Two masks composited with `intersect` so only the center (opaque on both axes) is
+        // fully opaque; the remaining three edges fade.
+        mask-image:
+            linear-gradient(
+                to bottom,
+                transparent 0,
+                black var(--sk-scroll-area-fade),
+                black calc(100% - var(--sk-scroll-area-fade)),
+                transparent 100%
+            ),
+            linear-gradient(
+                to right,
+                transparent 0,
+                black var(--sk-scroll-area-fade),
+                black calc(100% - var(--sk-scroll-area-fade)),
+                transparent 100%
+            );
+        mask-composite: intersect;
+    }
+}
+
 //----------------------------------------------------------------------------------------------------------------------
 // ScrollArea Viewport
 //----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_select.scss

@@ -132,6 +132,7 @@
 
 .sk-select-trigger
 {
+    position: relative;
     display: flex;
     align-items: center;
     gap: var(--sk-space-sm);
@@ -253,7 +254,7 @@
     max-height: 20rem;
     overflow: auto;
     padding: var(--sk-space-xs);
-    z-index: 1000;
+    z-index: var(--sk-z-dropdown);
 
     @include cut-border(
         $cut: 0.625rem,
@@ -368,6 +369,7 @@
 
 .sk-select-item
 {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: space-between;

package/src/styles/components/_sidebar.scss

@@ -15,6 +15,18 @@
     width: var(--sk-sidebar-width, 180px);
     flex-shrink: 0;
 
+    // Stretch the internal panel to fill whatever height the parent gives us. In a page shell
+    // the sidebar column is usually a flex item sized to the page height; the chrome should
+    // reach top-to-bottom rather than collapsing around its intrinsic content.
+    display: flex;
+    flex-direction: column;
+
+    .sk-sidebar-panel
+    {
+        flex: 1 1 auto;
+        min-height: 0;
+    }
+
     // Item theming -- uses same darkened color derivation as button system.
     // --sk-sidebar-color-base is overridden per kind below; bg/hover/active derive automatically.
     --sk-sidebar-color-base: var(--sk-neutral-base);
@@ -25,15 +37,41 @@
     );
     --sk-sidebar-item-hover-bg: color-mix(in oklch, var(--sk-sidebar-item-bg) 85%, white 15%);
     --sk-sidebar-item-hover-text: color-mix(in oklch, var(--sk-sidebar-color-base), white 30%);
-    --sk-sidebar-item-active-text: color-mix(in oklch, var(--sk-sidebar-color-base), white 50%);
-    --sk-sidebar-item-active-bg: var(--sk-sidebar-item-bg);
+    // Neutral's base is low-chroma, so base-as-text goes invisible on the dark bg.
+    // Default to neutral-text; chromatic kinds override back to their base below.
+    --sk-sidebar-item-active-text: var(--sk-neutral-text);
+    --sk-sidebar-item-active-bg: color-mix(in oklch, var(--sk-sidebar-item-bg) 92%, white 8%);
 
-    &.sk-primary { --sk-sidebar-color-base: var(--sk-primary-base); }
-    &.sk-accent { --sk-sidebar-color-base: var(--sk-accent-base); }
-    &.sk-info { --sk-sidebar-color-base: var(--sk-info-base); }
-    &.sk-success { --sk-sidebar-color-base: var(--sk-success-base); }
-    &.sk-warning { --sk-sidebar-color-base: var(--sk-warning-base); }
-    &.sk-danger { --sk-sidebar-color-base: var(--sk-danger-base); }
+    &.sk-primary
+    {
+        --sk-sidebar-color-base: var(--sk-primary-base);
+        --sk-sidebar-item-active-text: var(--sk-sidebar-color-base);
+    }
+    &.sk-accent
+    {
+        --sk-sidebar-color-base: var(--sk-accent-base);
+        --sk-sidebar-item-active-text: var(--sk-sidebar-color-base);
+    }
+    &.sk-info
+    {
+        --sk-sidebar-color-base: var(--sk-info-base);
+        --sk-sidebar-item-active-text: var(--sk-sidebar-color-base);
+    }
+    &.sk-success
+    {
+        --sk-sidebar-color-base: var(--sk-success-base);
+        --sk-sidebar-item-active-text: var(--sk-sidebar-color-base);
+    }
+    &.sk-warning
+    {
+        --sk-sidebar-color-base: var(--sk-warning-base);
+        --sk-sidebar-item-active-text: var(--sk-sidebar-color-base);
+    }
+    &.sk-danger
+    {
+        --sk-sidebar-color-base: var(--sk-danger-base);
+        --sk-sidebar-item-active-text: var(--sk-sidebar-color-base);
+    }
 
     .sk-sidebar-nav
     {
@@ -79,6 +117,17 @@
     cursor: pointer;
     display: block;
 
+    // Coarse-pointer touch-target floor. Parent .sk-sidebar.sk-dense opts out.
+    .sk-sidebar:not(.sk-dense) &
+    {
+        @include touch
+        {
+            min-height: 44px;
+            display: flex;
+            align-items: center;
+        }
+    }
+
     &:hover
     {
         background: var(--sk-sidebar-item-hover-bg);
@@ -99,16 +148,8 @@
         background: var(--sk-sidebar-item-active-bg);
         color: var(--sk-sidebar-item-active-text);
         font-weight: 600;
-        clip-path: polygon(
-            10px 0%,
-            100% 0%,
-            100% calc(100% - 10px),
-            calc(100% - 10px) 100%,
-            0% 100%,
-            0% 10px
-        );
 
-        // Active indicator: 2px L-shape tracing the left edge + top-left bevel
+        // Active indicator: 2px vertical bar on the left edge
         &::before
         {
             content: '';
@@ -116,14 +157,24 @@
             inset: 0;
             background: var(--sk-sidebar-color-base);
             clip-path: polygon(
-                0% 100%,
-                0px 10px,
-                10px 0px,
-                11.41px 1.41px,
-                2px 10.83px,
-                2px 100%
+                0% 0%,
+                2px 0%,
+                2px 100%,
+                0% 100%
             );
         }
+
+        // Hovering an active item: keep square corners, lighten bg and indicator
+        &:hover
+        {
+            background: var(--sk-sidebar-item-hover-bg);
+            clip-path: none;
+
+            &::before
+            {
+                background: var(--sk-sidebar-item-hover-text);
+            }
+        }
     }
 
     // Mirrored for right-side placement
@@ -144,24 +195,13 @@
         &.sk-active,
         &.router-link-active
         {
-            clip-path: polygon(
-                0% 0%,
-                calc(100% - 10px) 0%,
-                100% 10px,
-                100% 100%,
-                10px 100%,
-                0% calc(100% - 10px)
-            );
-
             &::before
             {
                 clip-path: polygon(
-                    100% 100%,
-                    100% 10px,
-                    calc(100% - 10px) 0px,
-                    calc(100% - 11.41px) 1.41px,
-                    calc(100% - 2px) 10.83px,
-                    calc(100% - 2px) 100%
+                    100% 0%,
+                    calc(100% - 2px) 0%,
+                    calc(100% - 2px) 100%,
+                    100% 100%
                 );
             }
         }

package/src/styles/components/_skeleton.scss

@@ -2,6 +2,8 @@
 // Skeleton Component Styles
 //----------------------------------------------------------------------------------------------------------------------
 
+@use '@/styles/mixins/responsive' as *;
+
 //----------------------------------------------------------------------------------------------------------------------
 // Base Skeleton
 //----------------------------------------------------------------------------------------------------------------------
@@ -136,3 +138,19 @@
 }
 
 //----------------------------------------------------------------------------------------------------------------------
+// Reduced motion: skeletons are decorative placeholders -- stop the shimmer/pulse entirely so
+// users who opt out of motion don't get an infinite loop in their peripheral vision. Content
+// still reads as "something loading" via the muted background color.
+//----------------------------------------------------------------------------------------------------------------------
+
+@include reduced-motion
+{
+    .sk-skeleton,
+    .sk-skeleton::after,
+    .sk-skeleton-shimmer::after
+    {
+        animation: none;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_slider.scss

@@ -126,7 +126,7 @@ $kinds: (neutral, primary, accent, info, success, warning, danger);
     flex-grow: 1;
     background: var(--sk-slider-track-bg);
 
-    .sk-horizontal &
+    .sk-slider.sk-horizontal &
     {
         height: var(--sk-slider-track-size);
         width: 100%;
@@ -140,7 +140,7 @@ $kinds: (neutral, primary, accent, info, success, warning, danger);
         );
     }
 
-    .sk-vertical &
+    .sk-slider.sk-vertical &
     {
         width: var(--sk-slider-track-size);
         height: 100%;
@@ -172,7 +172,7 @@ $kinds: (neutral, primary, accent, info, success, warning, danger);
         oklch(from var(--sk-slider-color-base) calc(l * 0.85) c h / 0.2)
     );
 
-    .sk-horizontal &
+    .sk-slider.sk-horizontal &
     {
         height: 100%;
 
@@ -185,7 +185,7 @@ $kinds: (neutral, primary, accent, info, success, warning, danger);
         );
     }
 
-    .sk-vertical &
+    .sk-slider.sk-vertical &
     {
         width: 100%;
 
@@ -205,6 +205,7 @@ $kinds: (neutral, primary, accent, info, success, warning, danger);
 
 .sk-slider-thumb
 {
+    position: relative;
     display: block;
     width: var(--sk-slider-thumb-size);
     height: var(--sk-slider-thumb-size);

package/src/styles/components/_spinner.scss

@@ -2,6 +2,8 @@
 // Spinner Component Styles
 //----------------------------------------------------------------------------------------------------------------------
 
+@use '@/styles/mixins/responsive' as *;
+
 $kinds: (neutral, primary, accent, info, success, warning, danger);
 
 //----------------------------------------------------------------------------------------------------------------------
@@ -329,3 +331,16 @@ $kinds: (neutral, primary, accent, info, success, warning, danger);
 }
 
 //----------------------------------------------------------------------------------------------------------------------
+// Reduced motion: spinners still communicate "loading", but we slow the animation dramatically
+// (5x) so the motion is less intrusive. Stopping entirely would make the spinner look frozen.
+//----------------------------------------------------------------------------------------------------------------------
+
+@include reduced-motion
+{
+    .sk-spinner *
+    {
+        animation-duration: 8s !important;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_switch.scss

@@ -96,6 +96,11 @@
     gap: var(--sk-switch-label-gap);
     cursor: pointer;
 
+    @include touch
+    {
+        min-height: 44px;
+    }
+
     // Disable cursor when switch is disabled
     &:has(.sk-switch:disabled)
     {

package/src/styles/components/_table.scss

@@ -47,6 +47,7 @@
     --sk-table-border-color: color-mix(in oklch, var(--sk-neutral-base), black 20%);
     --sk-table-corner-cut: 1rem;
 
+    position: relative;
     overflow-x: auto;
 
     // Cut top-right corner with neutral border (opaque, like solid buttons)

package/src/styles/components/_tabs.scss

@@ -3,6 +3,7 @@
 //----------------------------------------------------------------------------------------------------------------------
 
 @use '../theme/variables' as *;
+@use '../mixins' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
 // Tabs Design Tokens
@@ -268,6 +269,11 @@
     border: none;
     border-radius: 0; // Override any RekaUI defaults
     cursor: pointer;
+
+    @include touch
+    {
+        min-height: 44px;
+    }
     transition:
         color var(--sk-tab-transition-duration) var(--sk-tab-transition-easing),
         background-color var(--sk-tab-transition-duration) var(--sk-tab-transition-easing),

package/src/styles/components/_tag.scss

@@ -191,6 +191,8 @@
 .sk-tag
 {
     // Base styles
+    // position: relative anchors the cut-border fallback's ::before (Safari, Firefox — no corner-shape).
+    position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;

package/src/styles/components/_tags-input.scss

@@ -135,6 +135,7 @@
 
 .sk-tags-input-container
 {
+    position: relative;
     display: flex;
     flex-wrap: wrap;
     align-items: center;

package/src/styles/components/_textarea.scss

@@ -13,6 +13,7 @@
     // Corner cut size (scales with size variant)
     --sk-textarea-cut: 0.5rem;
 
+    position: relative;
     display: block;
     width: 100%;
     font-family: var(--sk-font-family-base);

package/src/styles/components/_toast.scss

@@ -12,7 +12,7 @@
 {
     // Base styles - fixed positioning for floating viewport
     position: fixed;
-    z-index: 100;
+    z-index: var(--sk-z-toast);
     display: flex;
     flex-direction: column;
     gap: var(--sk-space-sm);
@@ -107,6 +107,7 @@
     // Base Styles
     //------------------------------------------------------------------------------------------------------------------
 
+    position: relative;
     display: flex;
     align-items: center;
     gap: var(--sk-toast-gap);
@@ -329,3 +330,17 @@
 }
 
 //----------------------------------------------------------------------------------------------------------------------
+// Reduced motion: drop the slide-from-edge so toasts appear and dismiss in place.
+//----------------------------------------------------------------------------------------------------------------------
+
+@include reduced-motion
+{
+    .sk-toast-root[data-state='open'],
+    .sk-toast-root[data-state='closed'],
+    .sk-toast-root[data-swipe='end']
+    {
+        animation: none;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_toolbar.scss

@@ -151,6 +151,7 @@ $kinds: (neutral, primary, accent, info, success, warning, danger);
 
 .sk-toolbar-button
 {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -214,6 +215,7 @@ $kinds: (neutral, primary, accent, info, success, warning, danger);
 
 .sk-toolbar-toggle-item
 {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;

package/src/styles/components/_tooltip.scss

@@ -1,4 +1,5 @@
 @use '@/styles/mixins/cut-border' as *;
+@use '@/styles/mixins/responsive' as *;
 
 .sk-tooltip-content
 {
@@ -36,7 +37,7 @@
         0 0 8px oklch(from var(--sk-tooltip-color-base) l c h / 0.4);
 
     max-width: 20rem;
-    z-index: 60;
+    z-index: var(--sk-z-tooltip);
 
     // Content animation
     &[data-state='delayed-open'],
@@ -204,3 +205,15 @@
         transform: scale(0.95);
     }
 }
+
+//----------------------------------------------------------------------------------------------------------------------
+// Reduced motion: skip the scale-in so the tooltip appears in place.
+//----------------------------------------------------------------------------------------------------------------------
+
+@include reduced-motion
+{
+    .sk-tooltip-content[data-state]
+    {
+        animation: none;
+    }
+}

package/src/styles/components/_tree-view.scss

@@ -2,7 +2,7 @@
 // TreeView Component Styles
 //----------------------------------------------------------------------------------------------------------------------
 
-@use '@/styles/mixins/cut-border' as *;
+@use '@/styles/mixins' as *;
 
 $kinds: (neutral, primary, accent, info, success, warning, danger);
 
@@ -57,6 +57,11 @@ $kinds: (neutral, primary, accent, info, success, warning, danger);
     line-height: 1.5;
     outline: none;
 
+    @include touch
+    {
+        min-height: 44px;
+    }
+
     transition:
         background var(--sk-transition-duration-fast) var(--sk-transition-timing-default);
 

package/src/styles/mixins/_index.scss

@@ -3,5 +3,6 @@
 //----------------------------------------------------------------------------------------------------------------------
 
 @forward 'cut-border';
+@forward 'responsive';
 
 //----------------------------------------------------------------------------------------------------------------------