@skewedaspect/sleekspace-ui 0.8.0 → 0.9.0

package/src/styles/components/_progress.scss

@@ -2,30 +2,17 @@
 // Progress Component Styles
 //----------------------------------------------------------------------------------------------------------------------
 
-@use '@/styles/mixins/cut-border' as *;
-@use '@/styles/mixins/responsive' as *;
+@use '../theme/variables' as *;
+@use '../mixins/cut-border' as *;
+@use '../mixins/dual-selector' as *;
+@use '../mixins/responsive' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
-
-$kinds: (neutral, primary, accent, info, success, warning, danger);
-
-//----------------------------------------------------------------------------------------------------------------------
-// Kind Mixin
+// Progress Design Tokens
 //----------------------------------------------------------------------------------------------------------------------
 
-@mixin progress-kind($kind)
-{
-    &.sk-#{ '' + $kind }
-    {
-        --sk-progress-color-base: var(--sk-#{ $kind }-base);
-    }
-}
-
-//----------------------------------------------------------------------------------------------------------------------
-// Progress Root (Track)
-//----------------------------------------------------------------------------------------------------------------------
-
-.sk-progress
+.sk-progress,
+sk-progress
 {
     // CSS Variables
     --sk-progress-color-base: var(--sk-primary-base);
@@ -33,7 +20,15 @@ $kinds: (neutral, primary, accent, info, success, warning, danger);
     --sk-progress-height: 1rem;
     --sk-progress-bevel: calc(var(--sk-progress-height) * 0.6);
     --sk-progress-slant: calc(var(--sk-progress-height) * 1.5);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Progress Root (Track)
+//----------------------------------------------------------------------------------------------------------------------
 
+.sk-progress,
+sk-progress
+{
     position: relative;
     display: flex;
     align-items: center;
@@ -51,65 +46,70 @@ $kinds: (neutral, primary, accent, info, success, warning, danger);
         oklch(from var(--sk-progress-color-base) l c h / 0.3),
         (top-left bottom-right)
     );
+}
 
-    //------------------------------------------------------------------------------------------------------------------
-    // Size Variants
-    //------------------------------------------------------------------------------------------------------------------
+//----------------------------------------------------------------------------------------------------------------------
+// Kind Variants
+//----------------------------------------------------------------------------------------------------------------------
 
-    // Extra small: full parallelogram slant
-    &.sk-xs
+@each $kind in $kinds
+{
+    @include kind-variant('progress', $kind)
     {
-        --sk-progress-height: 0.5rem;
-
-        // Override cut-border with full slant parallelogram
-        border: none;
-        clip-path: polygon(
-            var(--sk-progress-slant) 0,
-            100% 0,
-            calc(100% - var(--sk-progress-slant)) 100%,
-            0 100%
-        );
-
-        &::before
-        {
-            display: none;
-        }
+        --sk-progress-color-base: var(--sk-#{ $kind }-base);
     }
+}
 
-    &.sk-sm
-    {
-        --sk-progress-height: 0.75rem;
-    }
+//----------------------------------------------------------------------------------------------------------------------
+// Size Variants
+//----------------------------------------------------------------------------------------------------------------------
 
-    &.sk-md
-    {
-        --sk-progress-height: 1rem;
-    }
+@include size-variant('progress', 'xs')
+{
+    --sk-progress-height: 0.5rem;
+
+    // Override cut-border with full slant parallelogram
+    border: none;
+    clip-path: polygon(
+        var(--sk-progress-slant) 0,
+        100% 0,
+        calc(100% - var(--sk-progress-slant)) 100%,
+        0 100%
+    );
 
-    &.sk-lg
+    &::before
     {
-        --sk-progress-height: 1.25rem;
+        display: none;
     }
+}
 
-    &.sk-xl
-    {
-        --sk-progress-height: 1.5rem;
-    }
+@include size-variant('progress', 'sm')
+{
+    --sk-progress-height: 0.75rem;
+}
 
-    //------------------------------------------------------------------------------------------------------------------
-    // Kind Variants
-    //------------------------------------------------------------------------------------------------------------------
+@include size-variant('progress', 'md')
+{
+    --sk-progress-height: 1rem;
+}
 
-    @each $kind in $kinds
-    {
-        @include progress-kind($kind);
-    }
+@include size-variant('progress', 'lg')
+{
+    --sk-progress-height: 1.25rem;
+}
+
+@include size-variant('progress', 'xl')
+{
+    --sk-progress-height: 1.5rem;
+}
 
-    //------------------------------------------------------------------------------------------------------------------
-    // Indeterminate State
-    //------------------------------------------------------------------------------------------------------------------
+//----------------------------------------------------------------------------------------------------------------------
+// Indeterminate State
+//----------------------------------------------------------------------------------------------------------------------
 
-    &.sk-indeterminate .sk-progress-indicator
+@include bool-modifier('progress', 'indeterminate')
+{
+    .sk-progress-indicator
     {
         width: 25%;
         animation: sk-progress-indeterminate 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
@@ -187,7 +187,9 @@ $kinds: (neutral, primary, accent, info, success, warning, danger);
     }
 
     // Extra small size: slanted right edge to match parallelogram
-    .sk-xs &
+    .sk-xs &,
+    .sk-size-xs &,
+    sk-progress[size="xs"] &
     {
         clip-path: polygon(
             0 0,
@@ -239,23 +241,33 @@ $kinds: (neutral, primary, accent, info, success, warning, danger);
 
     // Hide on extra small and small sizes (too small for readable text)
     .sk-xs &,
-    .sk-sm &
+    .sk-size-xs &,
+    sk-progress[size="xs"] &,
+    .sk-sm &,
+    .sk-size-sm &,
+    sk-progress[size="sm"] &
     {
         display: none;
     }
 
     // Scale font size with progress bar size
-    .sk-md &
+    .sk-md &,
+    .sk-size-md &,
+    sk-progress[size="md"] &
     {
         font-size: 0.75rem;
     }
 
-    .sk-lg &
+    .sk-lg &,
+    .sk-size-lg &,
+    sk-progress[size="lg"] &
     {
         font-size: 0.875rem;
     }
 
-    .sk-xl &
+    .sk-xl &,
+    .sk-size-xl &,
+    sk-progress[size="xl"] &
     {
         font-size: 1rem;
     }
@@ -292,3 +304,41 @@ $kinds: (neutral, primary, accent, info, success, warning, danger);
 }
 
 //----------------------------------------------------------------------------------------------------------------------
+// Defaults When Absent
+//----------------------------------------------------------------------------------------------------------------------
+
+// Default size: md — fires when no sk-size-* class is present.
+@include defaults-when-absent('progress', 'sk-size-')
+{
+    --sk-progress-height: 1rem;
+}
+
+// Default kind: primary — explicit :not() chain for zero-specificity default.
+$_progress-kind-not: '';
+@each $kind in $kinds
+{
+    $_progress-kind-not: $_progress-kind-not + ':not(.sk-' + $kind + ')';
+}
+
+.sk-progress:where(#{ $_progress-kind-not })
+{
+    --sk-progress-color-base: var(--sk-primary-base);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Custom-Element API Defaults (attribute-absence path)
+//----------------------------------------------------------------------------------------------------------------------
+
+// Default kind: primary — fires when <sk-progress> has no kind attribute.
+@include defaults-when-no-attr('progress', 'kind')
+{
+    --sk-progress-color-base: var(--sk-primary-base);
+}
+
+// Default size: md — fires when <sk-progress> has no size attribute.
+@include defaults-when-no-attr('progress', 'size')
+{
+    --sk-progress-height: 1rem;
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_radio.scss

@@ -1,4 +1,5 @@
-@use '@/styles/mixins' as *;
+@use '../mixins' as *;
+@use '../theme/variables' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
 // Radio Component Styles
@@ -87,28 +88,41 @@
     transition-duration: var(--sk-transition-duration-base);
 
     // Size variants
-    &.sk-sm
+
+    // Default: md when no sk-size-* class is present (zero-specificity, explicit class wins)
+    &:where(:not([class*="sk-size-"]))
+    {
+        width: 1.25rem;
+        height: 1.25rem;
+        --sk-radio-cut: 0.3rem;
+    }
+
+    &.sk-sm,
+    &.sk-size-sm
     {
         width: 1rem;
         height: 1rem;
         --sk-radio-cut: 0.24rem;
     }
 
-    &.sk-md
+    &.sk-md,
+    &.sk-size-md
     {
         width: 1.25rem;
         height: 1.25rem;
         --sk-radio-cut: 0.3rem;
     }
 
-    &.sk-lg
+    &.sk-lg,
+    &.sk-size-lg
     {
         width: 1.5rem;
         height: 1.5rem;
         --sk-radio-cut: 0.36rem;
     }
 
-    &.sk-xl
+    &.sk-xl,
+    &.sk-size-xl
     {
         width: 1.75rem;
         height: 1.75rem;
@@ -260,3 +274,19 @@
 }
 
 //----------------------------------------------------------------------------------------------------------------------
+// Defaults-when-absent: kind — neutral when no explicit kind class is present.
+//----------------------------------------------------------------------------------------------------------------------
+
+$_radio-kind-not: '';
+@each $kind in $kinds
+{
+    $_radio-kind-not: $_radio-kind-not + ':not(.sk-' + $kind + ')';
+}
+
+.sk-radio:where(#{ $_radio-kind-not })
+{
+    --sk-radio-color-base: var(--sk-neutral-base);
+    --sk-radio-fg: var(--sk-neutral-text);
+}
+
+//----------------------------------------------------------------------------------------------------------------------

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

@@ -26,7 +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;
+    --sk-scroll-area-fade: 1rem;
 
     position: relative;
     overflow: hidden;
@@ -40,21 +40,33 @@ $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`.
+// Applied to the viewport via CSS mask-image so content visibly tapers at the edges where more
+// scrolling is possible. The component sets `--sk-scroll-fade-{top|bottom|left|right}` (0 or 1)
+// based on scroll position, collapsing the fade zone at edges you can't scroll past. Gradient
+// uses smoothstep-ish stops for a gentler fall-off. Distance is tunable via `--sk-scroll-area-fade`.
 //----------------------------------------------------------------------------------------------------------------------
 
 .sk-scroll-area.sk-fade
 {
+    --sk-scroll-fade-top: 0;
+    --sk-scroll-fade-bottom: 0;
+    --sk-scroll-fade-left: 0;
+    --sk-scroll-fade-right: 0;
+
     &.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%
+            rgb(0 0 0 / 0) 0,
+            rgb(0 0 0 / 0.15) calc(var(--sk-scroll-area-fade) * 0.25 * var(--sk-scroll-fade-top)),
+            rgb(0 0 0 / 0.5) calc(var(--sk-scroll-area-fade) * 0.5 * var(--sk-scroll-fade-top)),
+            rgb(0 0 0 / 0.85) calc(var(--sk-scroll-area-fade) * 0.75 * var(--sk-scroll-fade-top)),
+            rgb(0 0 0 / 1) calc(var(--sk-scroll-area-fade) * var(--sk-scroll-fade-top)),
+            rgb(0 0 0 / 1) calc(100% - var(--sk-scroll-area-fade) * var(--sk-scroll-fade-bottom)),
+            rgb(0 0 0 / 0.85) calc(100% - var(--sk-scroll-area-fade) * 0.75 * var(--sk-scroll-fade-bottom)),
+            rgb(0 0 0 / 0.5) calc(100% - var(--sk-scroll-area-fade) * 0.5 * var(--sk-scroll-fade-bottom)),
+            rgb(0 0 0 / 0.15) calc(100% - var(--sk-scroll-area-fade) * 0.25 * var(--sk-scroll-fade-bottom)),
+            rgb(0 0 0 / 0) 100%
         );
     }
 
@@ -62,31 +74,47 @@ $kinds: (neutral, primary, accent, info, success, warning, danger);
     {
         mask-image: linear-gradient(
             to right,
-            transparent 0,
-            black var(--sk-scroll-area-fade),
-            black calc(100% - var(--sk-scroll-area-fade)),
-            transparent 100%
+            rgb(0 0 0 / 0) 0,
+            rgb(0 0 0 / 0.15) calc(var(--sk-scroll-area-fade) * 0.25 * var(--sk-scroll-fade-left)),
+            rgb(0 0 0 / 0.5) calc(var(--sk-scroll-area-fade) * 0.5 * var(--sk-scroll-fade-left)),
+            rgb(0 0 0 / 0.85) calc(var(--sk-scroll-area-fade) * 0.75 * var(--sk-scroll-fade-left)),
+            rgb(0 0 0 / 1) calc(var(--sk-scroll-area-fade) * var(--sk-scroll-fade-left)),
+            rgb(0 0 0 / 1) calc(100% - var(--sk-scroll-area-fade) * var(--sk-scroll-fade-right)),
+            rgb(0 0 0 / 0.85) calc(100% - var(--sk-scroll-area-fade) * 0.75 * var(--sk-scroll-fade-right)),
+            rgb(0 0 0 / 0.5) calc(100% - var(--sk-scroll-area-fade) * 0.5 * var(--sk-scroll-fade-right)),
+            rgb(0 0 0 / 0.15) calc(100% - var(--sk-scroll-area-fade) * 0.25 * var(--sk-scroll-fade-right)),
+            rgb(0 0 0 / 0) 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%
+                rgb(0 0 0 / 0) 0,
+                rgb(0 0 0 / 0.15) calc(var(--sk-scroll-area-fade) * 0.25 * var(--sk-scroll-fade-top)),
+                rgb(0 0 0 / 0.5) calc(var(--sk-scroll-area-fade) * 0.5 * var(--sk-scroll-fade-top)),
+                rgb(0 0 0 / 0.85) calc(var(--sk-scroll-area-fade) * 0.75 * var(--sk-scroll-fade-top)),
+                rgb(0 0 0 / 1) calc(var(--sk-scroll-area-fade) * var(--sk-scroll-fade-top)),
+                rgb(0 0 0 / 1) calc(100% - var(--sk-scroll-area-fade) * var(--sk-scroll-fade-bottom)),
+                rgb(0 0 0 / 0.85) calc(100% - var(--sk-scroll-area-fade) * 0.75 * var(--sk-scroll-fade-bottom)),
+                rgb(0 0 0 / 0.5) calc(100% - var(--sk-scroll-area-fade) * 0.5 * var(--sk-scroll-fade-bottom)),
+                rgb(0 0 0 / 0.15) calc(100% - var(--sk-scroll-area-fade) * 0.25 * var(--sk-scroll-fade-bottom)),
+                rgb(0 0 0 / 0) 100%
             ),
             linear-gradient(
                 to right,
-                transparent 0,
-                black var(--sk-scroll-area-fade),
-                black calc(100% - var(--sk-scroll-area-fade)),
-                transparent 100%
+                rgb(0 0 0 / 0) 0,
+                rgb(0 0 0 / 0.15) calc(var(--sk-scroll-area-fade) * 0.25 * var(--sk-scroll-fade-left)),
+                rgb(0 0 0 / 0.5) calc(var(--sk-scroll-area-fade) * 0.5 * var(--sk-scroll-fade-left)),
+                rgb(0 0 0 / 0.85) calc(var(--sk-scroll-area-fade) * 0.75 * var(--sk-scroll-fade-left)),
+                rgb(0 0 0 / 1) calc(var(--sk-scroll-area-fade) * var(--sk-scroll-fade-left)),
+                rgb(0 0 0 / 1) calc(100% - var(--sk-scroll-area-fade) * var(--sk-scroll-fade-right)),
+                rgb(0 0 0 / 0.85) calc(100% - var(--sk-scroll-area-fade) * 0.75 * var(--sk-scroll-fade-right)),
+                rgb(0 0 0 / 0.5) calc(100% - var(--sk-scroll-area-fade) * 0.5 * var(--sk-scroll-fade-right)),
+                rgb(0 0 0 / 0.15) calc(100% - var(--sk-scroll-area-fade) * 0.25 * var(--sk-scroll-fade-right)),
+                rgb(0 0 0 / 0) 100%
             );
         mask-composite: intersect;
     }

package/src/styles/components/_select.scss

@@ -1,4 +1,5 @@
-@use '@/styles/mixins/cut-border' as *;
+@use '../mixins/cut-border' as *;
+@use '../theme/variables' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
 // Select Component Styles
@@ -14,23 +15,33 @@
     display: inline-flex;
     width: 100%;
 
+    // Default: md when no sk-size-* class is present (zero-specificity, explicit class wins)
+    &:where(:not([class*="sk-size-"]))
+    {
+        --sk-select-cut: 0.5rem;
+    }
+
     // Size variants
-    &.sk-sm
+    &.sk-sm,
+    &.sk-size-sm
     {
         --sk-select-cut: 0.4rem;
     }
 
-    &.sk-md
+    &.sk-md,
+    &.sk-size-md
     {
         --sk-select-cut: 0.5rem;
     }
 
-    &.sk-lg
+    &.sk-lg,
+    &.sk-size-lg
     {
         --sk-select-cut: 0.6rem;
     }
 
-    &.sk-xl
+    &.sk-xl,
+    &.sk-size-xl
     {
         --sk-select-cut: 0.7rem;
     }
@@ -165,28 +176,32 @@
     transition-duration: var(--sk-transition-duration-base);
 
     // Size variants
-    .sk-select.sk-sm &
+    .sk-select.sk-sm &,
+    .sk-select.sk-size-sm &
     {
         height: 2rem;
         padding: 0 var(--sk-space-sm);
         font-size: 0.875rem;
     }
 
-    .sk-select.sk-md &
+    .sk-select.sk-md &,
+    .sk-select.sk-size-md &
     {
         height: 2.5rem;
         padding: 0 var(--sk-space-md);
         font-size: 1rem;
     }
 
-    .sk-select.sk-lg &
+    .sk-select.sk-lg &,
+    .sk-select.sk-size-lg &
     {
         height: 3rem;
         padding: 0 var(--sk-space-md);
         font-size: 1.125rem;
     }
 
-    .sk-select.sk-xl &
+    .sk-select.sk-xl &,
+    .sk-select.sk-size-xl &
     {
         height: 3.5rem;
         padding: 0 var(--sk-space-md);
@@ -439,3 +454,19 @@
 }
 
 //----------------------------------------------------------------------------------------------------------------------
+// Defaults-when-absent: kind — neutral when no explicit kind class is present.
+//----------------------------------------------------------------------------------------------------------------------
+
+$_select-kind-not: '';
+@each $kind in $kinds
+{
+    $_select-kind-not: $_select-kind-not + ':not(.sk-' + $kind + ')';
+}
+
+.sk-select:where(#{ $_select-kind-not })
+{
+    --sk-select-color-base: var(--sk-neutral-base);
+    --sk-select-fg: var(--sk-neutral-text);
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_sidebar.scss

@@ -1,4 +1,3 @@
-
 //----------------------------------------------------------------------------------------------------------------------
 // Sidebar Component Styles
 //----------------------------------------------------------------------------------------------------------------------
@@ -10,7 +9,8 @@
 // Sidebar Container
 //----------------------------------------------------------------------------------------------------------------------
 
-.sk-sidebar
+.sk-sidebar,
+sk-sidebar
 {
     width: var(--sk-sidebar-width, 180px);
     flex-shrink: 0;
@@ -42,37 +42,6 @@
     --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-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
     {
         display: flex;
@@ -81,6 +50,61 @@
     }
 }
 
+//----------------------------------------------------------------------------------------------------------------------
+// Kind Variants
+//----------------------------------------------------------------------------------------------------------------------
+
+@each $kind in $kinds
+{
+    @include kind-variant('sidebar', $kind)
+    {
+        --sk-sidebar-color-base: var(--sk-#{ $kind }-base);
+
+        @if $kind != neutral
+        {
+            --sk-sidebar-item-active-text: var(--sk-sidebar-color-base);
+        }
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Dense Modifier
+//----------------------------------------------------------------------------------------------------------------------
+
+@include bool-modifier('sidebar', 'dense')
+{
+    // Opts out of the coarse-pointer touch-target floor on sidebar items.
+    --sk-sidebar-dense: 1;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Defaults When Absent
+//----------------------------------------------------------------------------------------------------------------------
+
+// Default kind: neutral — explicit :not() chain for zero-specificity default.
+$_sidebar-kind-not: '';
+@each $kind in $kinds
+{
+    $_sidebar-kind-not: $_sidebar-kind-not + ':not(.sk-' + $kind + ')';
+}
+
+.sk-sidebar:where(#{ $_sidebar-kind-not })
+{
+    --sk-sidebar-color-base: var(--sk-neutral-base);
+    --sk-sidebar-item-active-text: var(--sk-neutral-text);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Custom-Element API Defaults (attribute-absence path)
+//----------------------------------------------------------------------------------------------------------------------
+
+// Default kind: neutral — fires when <sk-sidebar> has no kind attribute.
+@include defaults-when-no-attr('sidebar', 'kind')
+{
+    --sk-sidebar-color-base: var(--sk-neutral-base);
+    --sk-sidebar-item-active-text: var(--sk-neutral-text);
+}
+
 //----------------------------------------------------------------------------------------------------------------------
 // Sidebar Section
 //----------------------------------------------------------------------------------------------------------------------
@@ -118,7 +142,8 @@
     display: block;
 
     // Coarse-pointer touch-target floor. Parent .sk-sidebar.sk-dense opts out.
-    .sk-sidebar:not(.sk-dense) &
+    .sk-sidebar:not(.sk-dense) &,
+    sk-sidebar:not([dense]) &
     {
         @include touch
         {