@skewedaspect/sleekspace-ui 0.7.1 → 0.8.0

package/src/styles/components/_checkbox.scss

@@ -1,4 +1,4 @@
-@use '@/styles/mixins/cut-border' as *;
+@use '@/styles/mixins' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
 // Checkbox Component Styles
@@ -11,6 +11,13 @@
     gap: var(--sk-space-xs);
     cursor: pointer;
 
+    // Coarse-pointer touch-target floor on the label+box wrapper.
+    // The checkbox itself stays small; the whole label becomes the tap area.
+    @include touch
+    {
+        min-height: 44px;
+    }
+
     &.sk-disabled
     {
         cursor: not-allowed;
@@ -29,6 +36,7 @@
     // Corner cut size (scales with size variant)
     --sk-checkbox-cut: 0.25rem;
 
+    position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;

package/src/styles/components/_collapsible.scss

@@ -1,4 +1,5 @@
 @use '@/styles/mixins/cut-border' as *;
+@use '@/styles/mixins/responsive' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
 // Collapsible Component Styles
@@ -107,6 +108,7 @@
         #000 46.25%
     );
 
+    position: relative;
     padding: var(--sk-space-md) var(--sk-space-lg);
     width: 100%;
 
@@ -156,3 +158,16 @@
 }
 
 //----------------------------------------------------------------------------------------------------------------------
+// Reduced motion: content snaps open/closed instead of sliding.
+//----------------------------------------------------------------------------------------------------------------------
+
+@include reduced-motion
+{
+    .sk-collapsible-content[data-state='open'],
+    .sk-collapsible-content[data-state='closed']
+    {
+        animation: none;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_color-picker.scss

@@ -184,6 +184,7 @@
 
 .sk-color-picker-swatch
 {
+    position: relative;
     flex-shrink: 0;
 
     @include cut-border(
@@ -304,11 +305,12 @@
     --sk-panel-color-base: var(--sk-neutral-base);
     --sk-panel-fg: var(--sk-neutral-text);
 
+    position: relative;
     display: flex;
     flex-direction: column;
     gap: var(--sk-space-sm);
     padding: var(--sk-space-md);
-    z-index: 1000;
+    z-index: var(--sk-z-popover);
     width: 17rem;
 
     @include cut-border(
@@ -482,6 +484,7 @@
 
 .sk-color-picker-format-btn
 {
+    position: relative;
     flex: 1;
     padding: var(--sk-space-3xs) var(--sk-space-xs);
     font-size: 0.6875rem;

package/src/styles/components/_input.scss

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

package/src/styles/components/_listbox.scss

@@ -1,4 +1,4 @@
-@use '@/styles/mixins/cut-border' as *;
+@use '@/styles/mixins' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
 // Listbox Component Styles
@@ -263,7 +263,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,
@@ -378,6 +378,7 @@
 
 .sk-listbox-item
 {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -389,6 +390,11 @@
     outline: none;
     user-select: none;
 
+    @include touch
+    {
+        min-height: 44px;
+    }
+
     @include cut-border(
         $cut: 0.5rem,
         $border-width: var(--sk-border-width-thin),

package/src/styles/components/_menu.scss

@@ -1,4 +1,4 @@
-@use '@/styles/mixins/cut-border' as *;
+@use '@/styles/mixins' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
 // Shared Menu Styles
@@ -12,9 +12,10 @@
     --sk-menu-color-base: var(--sk-neutral-base);
     --sk-menu-fg: var(--sk-neutral-text);
 
+    position: relative;
     min-width: 12rem;
     padding: var(--sk-space-xs);
-    z-index: 1000;
+    z-index: var(--sk-z-dropdown);
 
     @include cut-border(
         $cut: 0.625rem,
@@ -133,6 +134,7 @@
 
 .sk-menu-item
 {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -144,6 +146,11 @@
     outline: none;
     user-select: none;
 
+    @include touch
+    {
+        min-height: 44px;
+    }
+
     @include cut-border(
         $cut: 0.5rem,
         $border-width: var(--sk-border-width-thin),

package/src/styles/components/_modal.scss

@@ -110,7 +110,7 @@
     position: fixed;
     inset: 0;
     background: oklch(0 0 0 / 0.75);
-    z-index: 50;
+    z-index: var(--sk-z-modal-scrim);
     backdrop-filter: blur(2px);
 
     // Overlay animation
@@ -143,7 +143,7 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    z-index: 51;
+    z-index: var(--sk-z-modal);
 
     display: flex;
     flex-direction: column;
@@ -327,3 +327,19 @@
 }
 
 //----------------------------------------------------------------------------------------------------------------------
+// Reduced motion: collapse the entry/exit animations so the modal appears in place instead of
+// zooming + translating.
+//----------------------------------------------------------------------------------------------------------------------
+
+@include reduced-motion
+{
+    .sk-modal-overlay[data-state='open'],
+    .sk-modal-overlay[data-state='closed'],
+    .sk-modal-content[data-state='open'],
+    .sk-modal-content[data-state='closed']
+    {
+        animation: none;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_navbar.scss

@@ -144,7 +144,7 @@
     {
         position: sticky;
         top: 0;
-        z-index: 100;
+        z-index: var(--sk-z-sticky);
     }
 
     //------------------------------------------------------------------------------------------------------------------
@@ -153,15 +153,29 @@
 
     .sk-navbar-content
     {
+        // No justify-content: leading + brand flow from the left, nav fills the middle when present,
+        // and .sk-navbar-actions uses margin-left: auto to pin itself right regardless of which other
+        // slots are filled. Avoids space-between splaying brand to the far edge when only leading is
+        // also present.
         display: flex;
         align-items: center;
-        justify-content: space-between;
-        gap: 2rem;
+        gap: 1rem;
         padding: var(--sk-navbar-padding-y) var(--sk-navbar-padding-x);
         max-width: 1920px;
         margin: 0 auto;
     }
 
+    //------------------------------------------------------------------------------------------------------------------
+    // Leading section (far-left, before brand; typically the sidebar toggle)
+    //------------------------------------------------------------------------------------------------------------------
+
+    .sk-navbar-leading
+    {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+    }
+
     //------------------------------------------------------------------------------------------------------------------
     // Brand section
     //------------------------------------------------------------------------------------------------------------------
@@ -172,7 +186,7 @@
         align-items: center;
         flex-shrink: 0;
 
-        // Brand link styling
+        // Brand link styling -- inherits navbar foreground so the kind drives it.
         a
         {
             text-decoration: none;
@@ -180,7 +194,7 @@
 
             &:hover h1
             {
-                color: var(--sk-primary-base);
+                color: var(--sk-navbar-color-base);
             }
         }
 
@@ -189,7 +203,7 @@
             margin: 0;
             font-size: 1.5rem;
             font-weight: 600;
-            color: var(--sk-primary-base);
+            color: inherit;
             transition: color var(--sk-transition-fast);
         }
     }
@@ -238,11 +252,13 @@
 
     .sk-navbar-actions
     {
+        // margin-left: auto pins actions to the right whether or not the nav slot is filled.
         display: flex;
         align-items: center;
         justify-content: flex-end;
         gap: 1rem;
         flex-shrink: 0;
+        margin-left: auto;
     }
 
     //------------------------------------------------------------------------------------------------------------------

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

@@ -340,6 +340,7 @@
 
 .sk-number-input-increment
 {
+    position: relative;
     border-bottom: var(--sk-border-width-thin) solid var(--sk-number-input-color-base);
 
     // Match the parent's top-right corner cut

package/src/styles/components/_page.scss

@@ -2,16 +2,44 @@
 // Page Component Styles
 //----------------------------------------------------------------------------------------------------------------------
 
+@use '../mixins' as *;
+
 .sk-page
 {
     // CSS Variables
     --sk-page-header-height: auto;
     --sk-page-footer-height: auto;
     --sk-page-sidebar-width: 16rem;
+    --sk-page-aside-width: 16rem;
+    // Retained for backwards compatibility; prefer `--sk-z-drawer` / `--sk-z-drawer-scrim`.
+    --sk-page-drawer-z-index: var(--sk-z-drawer);
+
+    // Minimum page height. Default fills the viewport; embedded demos inside fixed-height
+    // containers should override this to `100%` so SkPage respects its parent.
+    --sk-page-min-height: 100vh;
+
+    // Breathing room between the main row and the surrounding header/footer/edges/sidebar.
+    // `.sk-page-main` applies this as padding; the center content fills it without adding its own.
+    // Use the `flush` prop (or override `--sk-page-gap: 0`) for a full-bleed layout.
+    --sk-page-gap: 1rem;
+
+    &.sk-flush
+    {
+        --sk-page-gap: 0;
+    }
 
+    // position: relative so drawers (absolute) are bounded by the page, not the viewport. In
+    // full-viewport usage this naturally covers the screen; in embedded usage (e.g. docs demos)
+    // the drawer stays inside the page container.
+    //
+    // isolation: isolate creates a new stacking context so an embedded SkPage's sticky header
+    // can't punch through an enclosing SkPage's header (same z-index, DOM order would otherwise
+    // make the inner one win on overlap).
+    position: relative;
+    isolation: isolate;
     display: flex;
     flex-direction: column;
-    min-height: 100vh;
+    min-height: var(--sk-page-min-height);
     background: var(--sk-surface-base);
     color: var(--sk-text-primary);
 
@@ -35,44 +63,107 @@
     }
 
     //------------------------------------------------------------------------------------------------------------------
-    // Main (Sidebar + Content)
+    // Subheader (full-width row below header, above the main row)
+    //------------------------------------------------------------------------------------------------------------------
+
+    .sk-page-subheader
+    {
+        flex-shrink: 0;
+        z-index: 9;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Main row: sidebar + center column + aside
     //------------------------------------------------------------------------------------------------------------------
 
     .sk-page-main
     {
         display: flex;
         flex: 1;
-        min-height: 0; // Allow flex item to shrink below content size
+        min-height: 0;
+        padding: var(--sk-page-gap);
+        gap: var(--sk-page-gap);
     }
 
     //------------------------------------------------------------------------------------------------------------------
-    // Sidebar
+    // Persistent Sidebar (inline). Header and footer are pinned; body scrolls.
     //------------------------------------------------------------------------------------------------------------------
 
     .sk-page-sidebar
     {
         flex-shrink: 0;
-        width: var(--sk-page-sidebar-width);
-        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
     }
 
-    &.sk-sidebar-right
+    //------------------------------------------------------------------------------------------------------------------
+    // Center column: main-header + content + main-footer. Content scrolls, the other two are pinned.
+    //------------------------------------------------------------------------------------------------------------------
+
+    .sk-page-center
     {
-        .sk-page-main
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+
+        .sk-page-main-header,
+        .sk-page-main-footer
         {
-            flex-direction: row-reverse;
+            flex-shrink: 0;
         }
     }
 
+    .sk-page-content
+    {
+        flex: 1;
+        min-height: 0;
+        overflow-y: auto;
+    }
+
     //------------------------------------------------------------------------------------------------------------------
-    // Content
+    // Persistent Aside (inline, right side). Mirrors the sidebar's structure.
     //------------------------------------------------------------------------------------------------------------------
 
-    .sk-page-content
+    .sk-page-aside
+    {
+        flex-shrink: 0;
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Panel (sidebar/aside) header+body+footer layout — applied to both persistent and drawer variants
+    //------------------------------------------------------------------------------------------------------------------
+
+    .sk-page-sidebar-header,
+    .sk-page-sidebar-footer,
+    .sk-page-aside-header,
+    .sk-page-aside-footer
+    {
+        flex-shrink: 0;
+    }
+
+    .sk-page-sidebar-body,
+    .sk-page-aside-body
     {
         flex: 1;
-        min-width: 0; // Prevent content from overflowing
+        min-height: 0;
         overflow-y: auto;
+
+        // Stretch the slotted chrome (e.g. SkSidebar) so it fills the body vertically instead of
+        // ending at its intrinsic content height -- otherwise the drawer shows a transparent dead
+        // zone below the sidebar with the backdrop bleeding through.
+        display: flex;
+        flex-direction: column;
+
+        > *
+        {
+            flex: 1;
+            min-height: 0;
+        }
     }
 
     //------------------------------------------------------------------------------------------------------------------
@@ -93,6 +184,123 @@
             bottom: 0;
         }
     }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Drawer (off-canvas). One ruleset serves both sides; positioning differs per class.
+    //------------------------------------------------------------------------------------------------------------------
+
+    .sk-page-drawer
+    {
+        // `position: fixed` anchors the drawer to the viewport so it stays put while the user
+        // scrolls the page. Without this the drawer inherits the full (content-tall) height of
+        // SkPage, so on long pages the background ends up scrolling instead of the drawer body.
+        // Fixed + dvh caps keep the drawer viewport-sized so its own body (overflow-y: auto)
+        // handles any long nav internally. Wrap embedded usages in `contain: paint` if you need
+        // the drawer trapped to a specific ancestor (see the docs-site demo wrappers).
+        //
+        // Pointer-events stay `auto` across the drawer so wheel + touch scroll work inside the
+        // body. Dismiss-on-empty-space is handled via a click handler in SkPage.vue that closes
+        // the drawer when the click target wasn't an interactive element; empty padding inside
+        // the slotted content still dismisses cleanly without wrecking scroll.
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        max-height: 100dvh;
+        width: var(--sk-page-sidebar-width);
+        max-width: calc(100vw - 3rem);
+        z-index: var(--sk-z-drawer);
+        background: transparent;
+        display: flex;
+        flex-direction: column;
+
+        &.sk-page-drawer-left
+        {
+            left: 0;
+        }
+
+        &.sk-page-drawer-right
+        {
+            right: 0;
+            width: var(--sk-page-aside-width);
+        }
+
+        &:focus
+        {
+            outline: none;
+        }
+    }
+
+    .sk-page-drawer-backdrop
+    {
+        // Fixed (viewport-anchored) to match the drawer: the dim + blur covers the whole screen
+        // regardless of page scroll, and the backdrop doesn't stretch to match a content-tall
+        // SkPage.
+        position: fixed;
+        inset: 0;
+        z-index: var(--sk-z-drawer-scrim);
+        background: oklch(0 0 0 / 0.6);
+        backdrop-filter: blur(2px);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Drawer Transitions (left and right slide-in variants)
+//
+// Reduced motion: collapses both enter and leave to zero-duration, so the drawer still appears/
+// disappears, it just doesn't slide or fade.
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-page-drawer-left-enter-active,
+.sk-page-drawer-left-leave-active,
+.sk-page-drawer-right-enter-active,
+.sk-page-drawer-right-leave-active
+{
+    transition: transform var(--sk-transition-duration-normal) var(--sk-transition-easing);
+}
+
+.sk-page-drawer-left-enter-from,
+.sk-page-drawer-left-leave-to
+{
+    transform: translateX(-100%);
+}
+
+.sk-page-drawer-right-enter-from,
+.sk-page-drawer-right-leave-to
+{
+    transform: translateX(100%);
+}
+
+.sk-page-drawer-backdrop-enter-active,
+.sk-page-drawer-backdrop-leave-active
+{
+    transition: opacity var(--sk-transition-duration-normal) var(--sk-transition-easing);
+}
+
+.sk-page-drawer-backdrop-enter-from,
+.sk-page-drawer-backdrop-leave-to
+{
+    opacity: 0;
+}
+
+@include reduced-motion
+{
+    .sk-page-drawer-left-enter-active,
+    .sk-page-drawer-left-leave-active,
+    .sk-page-drawer-right-enter-active,
+    .sk-page-drawer-right-leave-active,
+    .sk-page-drawer-backdrop-enter-active,
+    .sk-page-drawer-backdrop-leave-active
+    {
+        transition: none;
+    }
+
+    .sk-page-drawer-left-enter-from,
+    .sk-page-drawer-left-leave-to,
+    .sk-page-drawer-right-enter-from,
+    .sk-page-drawer-right-leave-to
+    {
+        transform: none;
+    }
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_pagination.scss

@@ -4,7 +4,7 @@
 // Follows button styling patterns with size system and variants.
 //----------------------------------------------------------------------------------------------------------------------
 
-@use '../mixins/cut-border' as *;
+@use '../mixins' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
 
@@ -137,6 +137,7 @@
         $corners: (top-left, bottom-right)
     );
 
+    position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -151,6 +152,14 @@
     cursor: pointer;
     user-select: none;
 
+    // Coarse-pointer touch-target floor. Pagination buttons are compact by default;
+    // on touch devices, grow to 44px minimum so they're actually tappable.
+    @include touch
+    {
+        min-width: 44px;
+        min-height: 44px;
+    }
+
     transition:
         color var(--sk-pagination-transition-duration) var(--sk-pagination-transition-easing),
         background-color var(--sk-pagination-transition-duration) var(--sk-pagination-transition-easing),

package/src/styles/components/_panel.scss

@@ -325,9 +325,14 @@
     // Scrollable Panel Support
     //------------------------------------------------------------------------------------------------------------------
     // When a panel contains scrollable content, use a .sk-panel-scroll-content wrapper
-    // This ensures the border/decoration stay fixed while content scrolls internally
-
-    &:has(.sk-panel-scroll-content)
+    // This ensures the border/decoration stay fixed while content scrolls internally.
+    //
+    // Important: scope to DIRECT children only. Otherwise an outer panel containing a nested
+    // panel-with-scroll-content (e.g. SkSidebar's internal panel rendered inside a docs-site
+    // DemoShowcase panel) would spuriously flip to `display: flex` and kill margin collapse,
+    // causing layout shifts when the nested content mounts/unmounts.
+
+    &:has(> .sk-panel-scroll-content)
     {
         padding: 0;
         display: flex;

package/src/styles/components/_popover.scss

@@ -2,7 +2,7 @@
 // Popover Component Styles
 //----------------------------------------------------------------------------------------------------------------------
 
-@use '@/styles/mixins/cut-border' as *;
+@use '../mixins' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
 // Popover Content
@@ -42,7 +42,7 @@
 
     max-width: 24rem;
     min-width: 12rem;
-    z-index: 60;
+    z-index: var(--sk-z-popover);
 
     // Animation states
     &[data-state='open']
@@ -256,3 +256,16 @@
 }
 
 //----------------------------------------------------------------------------------------------------------------------
+// Reduced motion: skip the scale-in, popover appears/disappears in place.
+//----------------------------------------------------------------------------------------------------------------------
+
+@include reduced-motion
+{
+    .sk-popover-content[data-state='open'],
+    .sk-popover-content[data-state='closed']
+    {
+        animation: none;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------