@skewedaspect/sleekspace-ui 0.8.1 → 0.9.0

package/src/styles/components/_navbar.scss

@@ -9,7 +9,8 @@
 // NavBar Design Tokens
 //----------------------------------------------------------------------------------------------------------------------
 
-.sk-navbar
+.sk-navbar,
+sk-navbar
 {
     //------------------------------------------------------------------------------------------------------------------
     // Dimension Tokens
@@ -76,38 +77,12 @@
         oklch(from var(--sk-navbar-color-base) l c h / var(--sk-navbar-glow-opacity));
 }
 
-//----------------------------------------------------------------------------------------------------------------------
-// Kind Mixin
-//----------------------------------------------------------------------------------------------------------------------
-
-@mixin navbar-kind($kind)
-{
-    &.sk-#{ "" + $kind }
-    {
-        // Override base color tokens for this kind
-        --sk-navbar-color-base: var(--sk-#{ $kind }-base);
-        --sk-navbar-fg: var(--sk-#{ $kind }-text);
-
-        // Set generic kind color for list markers and other cross-component features
-        --sk-kind-color: var(--sk-#{ $kind }-base);
-
-        // Set dynamic border color
-        --sk-navbar-border-color: var(--sk-navbar-border-base);
-
-        // Use calculated background and foreground
-        background-color: var(--sk-navbar-bg);
-        color: var(--sk-navbar-fg);
-
-        // Apply inner glow
-        box-shadow: var(--sk-navbar-glow);
-    }
-}
-
 //----------------------------------------------------------------------------------------------------------------------
 // Base NavBar Styles
 //----------------------------------------------------------------------------------------------------------------------
 
-.sk-navbar
+.sk-navbar,
+sk-navbar
 {
     // Base structure
     display: block;
@@ -136,17 +111,6 @@
         $corners: (bottom-left bottom-right)
     );
 
-    //------------------------------------------------------------------------------------------------------------------
-    // Sticky positioning
-    //------------------------------------------------------------------------------------------------------------------
-
-    &.sk-sticky
-    {
-        position: sticky;
-        top: 0;
-        z-index: var(--sk-z-sticky);
-    }
-
     //------------------------------------------------------------------------------------------------------------------
     // Content container
     //------------------------------------------------------------------------------------------------------------------
@@ -260,15 +224,82 @@
         flex-shrink: 0;
         margin-left: auto;
     }
+}
 
-    //------------------------------------------------------------------------------------------------------------------
-    // Kind variants
-    //------------------------------------------------------------------------------------------------------------------
+//----------------------------------------------------------------------------------------------------------------------
+// Kind Variants
+//----------------------------------------------------------------------------------------------------------------------
 
-    @each $kind in $kinds
+@each $kind in $kinds
+{
+    @include kind-variant('navbar', $kind)
     {
-        @include navbar-kind($kind);
+        // Override base color tokens for this kind
+        --sk-navbar-color-base: var(--sk-#{ $kind }-base);
+        --sk-navbar-fg: var(--sk-#{ $kind }-text);
+
+        // Set generic kind color for list markers and other cross-component features
+        --sk-kind-color: var(--sk-#{ $kind }-base);
+
+        // Set dynamic border color
+        --sk-navbar-border-color: var(--sk-navbar-border-base);
+
+        // Use calculated background and foreground
+        background-color: var(--sk-navbar-bg);
+        color: var(--sk-navbar-fg);
+
+        // Apply inner glow
+        box-shadow: var(--sk-navbar-glow);
     }
 }
 
 //----------------------------------------------------------------------------------------------------------------------
+// Sticky Modifier
+//----------------------------------------------------------------------------------------------------------------------
+
+@include bool-modifier('navbar', 'sticky')
+{
+    position: sticky;
+    top: 0;
+    z-index: var(--sk-z-sticky);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Defaults When Absent
+//----------------------------------------------------------------------------------------------------------------------
+
+// Default kind: neutral — explicit :not() chain for zero-specificity default.
+$_navbar-kind-not: '';
+@each $kind in $kinds
+{
+    $_navbar-kind-not: $_navbar-kind-not + ':not(.sk-' + $kind + ')';
+}
+
+.sk-navbar:where(#{ $_navbar-kind-not })
+{
+    --sk-navbar-color-base: var(--sk-neutral-base);
+    --sk-navbar-fg: var(--sk-neutral-text);
+    --sk-kind-color: var(--sk-neutral-base);
+    --sk-navbar-border-color: var(--sk-navbar-border-base);
+    background-color: var(--sk-navbar-bg);
+    color: var(--sk-navbar-fg);
+    box-shadow: var(--sk-navbar-glow);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Custom-Element API Defaults (attribute-absence path)
+//----------------------------------------------------------------------------------------------------------------------
+
+// Default kind: neutral — fires when <sk-navbar> has no kind attribute.
+@include defaults-when-no-attr('navbar', 'kind')
+{
+    --sk-navbar-color-base: var(--sk-neutral-base);
+    --sk-navbar-fg: var(--sk-neutral-text);
+    --sk-kind-color: var(--sk-neutral-base);
+    --sk-navbar-border-color: var(--sk-navbar-border-base);
+    background-color: var(--sk-navbar-bg);
+    color: var(--sk-navbar-fg);
+    box-shadow: var(--sk-navbar-glow);
+}
+
+//----------------------------------------------------------------------------------------------------------------------

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

@@ -1,7 +1,14 @@
-@use '@/styles/mixins/cut-border' as *;
+@use '../mixins/cut-border' as *;
+@use '../theme/variables' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
 // NumberInput Component Styles
+//
+// The wrapper carries a fixed intrinsic height per size variant so that flex/grid parents with
+// `align-items: stretch` (or taller siblings) don't inflate the component and strand the input
+// and stepper buttons in dead space. Internal layout stretches to fill that height: the input
+// field and steppers use `height: 100%`, and the two stepper buttons share the space via
+// `flex: 1`, which also eliminates the 1px mismatch caused by the increment's bottom border.
 //----------------------------------------------------------------------------------------------------------------------
 
 .sk-number-input-wrapper
@@ -10,12 +17,21 @@
     --sk-number-input-color-base: var(--sk-neutral-base);
     --sk-number-input-fg: var(--sk-neutral-text);
 
-    // Corner cut size (scales with size variant)
+    // Size tokens (overridden per size variant below)
+    --sk-number-input-height: 2.5rem;
+    --sk-number-input-padding-x: var(--sk-space-md);
+    --sk-number-input-font-size: 1rem;
+    --sk-number-input-stepper-width: 2rem;
+    --sk-number-input-stepper-icon: 1rem;
     --sk-number-input-cut: 0.5rem;
 
     position: relative;
-    display: inline-flex;
+    display: flex;
     width: 100%;
+    height: var(--sk-number-input-height);
+    flex: 0 0 auto;
+    align-self: center;
+    vertical-align: middle;
 
     // Kind variants
     &.sk-neutral
@@ -110,23 +126,59 @@
     }
 
     // Size variants
-    &.sk-sm
+
+    // Default: md when no sk-size-* class is present (zero-specificity, explicit class wins)
+    &:where(:not([class*="sk-size-"]))
+    {
+        --sk-number-input-height: 2.5rem;
+        --sk-number-input-padding-x: var(--sk-space-md);
+        --sk-number-input-font-size: 1rem;
+        --sk-number-input-stepper-width: 2rem;
+        --sk-number-input-stepper-icon: 1rem;
+        --sk-number-input-cut: 0.5rem;
+    }
+
+    &.sk-sm,
+    &.sk-size-sm
     {
+        --sk-number-input-height: 2rem;
+        --sk-number-input-padding-x: var(--sk-space-sm);
+        --sk-number-input-font-size: 0.875rem;
+        --sk-number-input-stepper-width: 1.5rem;
+        --sk-number-input-stepper-icon: 0.75rem;
         --sk-number-input-cut: 0.4rem;
     }
 
-    &.sk-md
+    &.sk-md,
+    &.sk-size-md
     {
+        --sk-number-input-height: 2.5rem;
+        --sk-number-input-padding-x: var(--sk-space-md);
+        --sk-number-input-font-size: 1rem;
+        --sk-number-input-stepper-width: 2rem;
+        --sk-number-input-stepper-icon: 1rem;
         --sk-number-input-cut: 0.5rem;
     }
 
-    &.sk-lg
+    &.sk-lg,
+    &.sk-size-lg
     {
+        --sk-number-input-height: 3rem;
+        --sk-number-input-padding-x: var(--sk-space-md);
+        --sk-number-input-font-size: 1.125rem;
+        --sk-number-input-stepper-width: 2.25rem;
+        --sk-number-input-stepper-icon: 1.125rem;
         --sk-number-input-cut: 0.6rem;
     }
 
-    &.sk-xl
+    &.sk-xl,
+    &.sk-size-xl
     {
+        --sk-number-input-height: 3.5rem;
+        --sk-number-input-padding-x: var(--sk-space-md);
+        --sk-number-input-font-size: 1.25rem;
+        --sk-number-input-stepper-width: 2.5rem;
+        --sk-number-input-stepper-icon: 1.25rem;
         --sk-number-input-cut: 0.7rem;
     }
 }
@@ -136,8 +188,9 @@
 .sk-number-input
 {
     display: flex;
-    align-items: center;
+    align-items: stretch;
     width: 100%;
+    height: 100%;
     position: relative;
 
     @include cut-border(
@@ -189,6 +242,10 @@
 .sk-number-input-field
 {
     flex: 1;
+    min-width: 0;
+    height: 100%;
+    padding: 0 var(--sk-number-input-padding-x);
+    font-size: var(--sk-number-input-font-size);
     background: transparent;
     border: none;
     color: var(--sk-number-input-fg);
@@ -196,35 +253,6 @@
     outline: none;
     cursor: text;
 
-    // Size variants (match input heights)
-    .sk-number-input-wrapper.sk-sm &
-    {
-        height: 2rem;
-        padding: 0 var(--sk-space-sm);
-        font-size: 0.875rem;
-    }
-
-    .sk-number-input-wrapper.sk-md &
-    {
-        height: 2.5rem;
-        padding: 0 var(--sk-space-md);
-        font-size: 1rem;
-    }
-
-    .sk-number-input-wrapper.sk-lg &
-    {
-        height: 3rem;
-        padding: 0 var(--sk-space-md);
-        font-size: 1.125rem;
-    }
-
-    .sk-number-input-wrapper.sk-xl &
-    {
-        height: 3.5rem;
-        padding: 0 var(--sk-space-md);
-        font-size: 1.25rem;
-    }
-
     &::placeholder
     {
         color: color-mix(in oklch, var(--sk-number-input-fg), transparent 50%);
@@ -242,6 +270,8 @@
 {
     display: flex;
     flex-direction: column;
+    flex: 0 0 var(--sk-number-input-stepper-width);
+    height: 100%;
     border-left: var(--sk-border-width-thin) solid var(--sk-number-input-color-base);
 }
 
@@ -250,6 +280,8 @@
 .sk-number-input-increment,
 .sk-number-input-decrement
 {
+    flex: 1 1 0;
+    min-height: 0;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -261,53 +293,10 @@
     transition-duration: var(--sk-transition-duration-base);
     padding: 0 var(--sk-space-xs);
 
-    // Size variants
-    .sk-number-input-wrapper.sk-sm &
-    {
-        width: 1.5rem;
-        height: 1rem;
-
-        svg
-        {
-            width: 0.75rem;
-            height: 0.75rem;
-        }
-    }
-
-    .sk-number-input-wrapper.sk-md &
-    {
-        width: 2rem;
-        height: 1.25rem;
-
-        svg
-        {
-            width: 1rem;
-            height: 1rem;
-        }
-    }
-
-    .sk-number-input-wrapper.sk-lg &
+    svg
     {
-        width: 2.25rem;
-        height: 1.5rem;
-
-        svg
-        {
-            width: 1.125rem;
-            height: 1.125rem;
-        }
-    }
-
-    .sk-number-input-wrapper.sk-xl &
-    {
-        width: 2.5rem;
-        height: 1.75rem;
-
-        svg
-        {
-            width: 1.25rem;
-            height: 1.25rem;
-        }
+        width: var(--sk-number-input-stepper-icon);
+        height: var(--sk-number-input-stepper-icon);
     }
 
     &:hover:not(:disabled)
@@ -351,3 +340,19 @@
 }
 
 //----------------------------------------------------------------------------------------------------------------------
+// Defaults-when-absent: kind — neutral when no explicit kind class is present on the wrapper.
+//----------------------------------------------------------------------------------------------------------------------
+
+$_number-input-kind-not: '';
+@each $kind in $kinds
+{
+    $_number-input-kind-not: $_number-input-kind-not + ':not(.sk-' + $kind + ')';
+}
+
+.sk-number-input-wrapper:where(#{ $_number-input-kind-not })
+{
+    --sk-number-input-color-base: var(--sk-neutral-base);
+    --sk-number-input-fg: var(--sk-neutral-text);
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_page.scss

@@ -4,7 +4,12 @@
 
 @use '../mixins' as *;
 
-.sk-page
+//----------------------------------------------------------------------------------------------------------------------
+// Page Design Tokens
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-page,
+sk-page
 {
     // CSS Variables
     --sk-page-header-height: auto;
@@ -22,12 +27,15 @@
     // `.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;
-    }
+//----------------------------------------------------------------------------------------------------------------------
+// Base Page Styles
+//----------------------------------------------------------------------------------------------------------------------
 
+.sk-page,
+sk-page
+{
     // 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.
@@ -53,15 +61,6 @@
         z-index: 10;
     }
 
-    &.sk-fixed-header
-    {
-        .sk-page-header
-        {
-            position: sticky;
-            top: 0;
-        }
-    }
-
     //------------------------------------------------------------------------------------------------------------------
     // Subheader (full-width row below header, above the main row)
     //------------------------------------------------------------------------------------------------------------------
@@ -176,15 +175,6 @@
         z-index: 10;
     }
 
-    &.sk-fixed-footer
-    {
-        .sk-page-footer
-        {
-            position: sticky;
-            bottom: 0;
-        }
-    }
-
     //------------------------------------------------------------------------------------------------------------------
     // Drawer (off-canvas). One ruleset serves both sides; positioning differs per class.
     //------------------------------------------------------------------------------------------------------------------
@@ -243,6 +233,62 @@
     }
 }
 
+//----------------------------------------------------------------------------------------------------------------------
+// Flush Modifier (zero gap / full-bleed layout)
+//----------------------------------------------------------------------------------------------------------------------
+
+@include bool-modifier('page', 'flush')
+{
+    --sk-page-gap: 0;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// No-Bounce Modifier (disable rubber-band overscroll on SkPage's scroll containers)
+//----------------------------------------------------------------------------------------------------------------------
+// `overscroll-behavior` is per-scroll-container, not inherited, so we have to hit each
+// scrollable region explicitly. Also applied to the root in case SkPage itself is the
+// scroller (e.g. wrapped in a height-constrained ancestor with overflow on .sk-page).
+// The document-level bounce from scrolling the page itself lives on html/body and is
+// outside SkPage's reach.
+
+@include bool-modifier('page', 'no-bounce')
+{
+    overscroll-behavior: none;
+
+    .sk-page-content,
+    .sk-page-sidebar-body,
+    .sk-page-aside-body
+    {
+        overscroll-behavior: none;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Fixed Header Modifier
+//----------------------------------------------------------------------------------------------------------------------
+
+@include bool-modifier('page', 'fixed-header')
+{
+    .sk-page-header
+    {
+        position: sticky;
+        top: 0;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Fixed Footer Modifier
+//----------------------------------------------------------------------------------------------------------------------
+
+@include bool-modifier('page', 'fixed-footer')
+{
+    .sk-page-footer
+    {
+        position: sticky;
+        bottom: 0;
+    }
+}
+
 //----------------------------------------------------------------------------------------------------------------------
 // Drawer Transitions (left and right slide-in variants)
 //
@@ -304,3 +350,16 @@
 }
 
 //----------------------------------------------------------------------------------------------------------------------
+// Custom-Element API Defaults (attribute-absence path)
+//----------------------------------------------------------------------------------------------------------------------
+// Parallel defaults for <sk-page> (no class API). Zero-specificity via :where() so any
+// explicit attribute value wins. Page has no kind/size families, only boolean modifiers — no
+// defaults-when-absent needed for the class API (booleans are off by default).
+
+// Default flush: off — fires when <sk-page> has no flush attribute.
+@include defaults-when-no-attr('page', 'flush')
+{
+    --sk-page-gap: 1rem;
+}
+
+//----------------------------------------------------------------------------------------------------------------------