@skewedaspect/sleekspace-ui 0.8.0 → 0.9.0

package/src/styles/components/_skeleton.scss

@@ -2,19 +2,28 @@
 // Skeleton Component Styles
 //----------------------------------------------------------------------------------------------------------------------
 
-@use '@/styles/mixins/responsive' as *;
+@use '../mixins' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
-// Base Skeleton
+// Skeleton Design Tokens
 //----------------------------------------------------------------------------------------------------------------------
 
-.sk-skeleton
+.sk-skeleton,
+sk-skeleton
 {
     // CSS Variables
     --sk-skeleton-base: oklch(from var(--sk-neutral-base) l c h / 0.12);
     --sk-skeleton-highlight: oklch(from var(--sk-neutral-base) calc(l * 1.3) c h / 0.25);
     --sk-skeleton-bevel: 0.35em;
+}
 
+//----------------------------------------------------------------------------------------------------------------------
+// Base Skeleton
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-skeleton,
+sk-skeleton
+{
     position: relative;
     display: block;
     background: var(--sk-skeleton-base);
@@ -22,67 +31,71 @@
 
     // Default dimensions
     min-height: 1em;
+}
 
-    //------------------------------------------------------------------------------------------------------------------
-    // Shape Variants
-    //------------------------------------------------------------------------------------------------------------------
+//----------------------------------------------------------------------------------------------------------------------
+// Shape Modifiers
+//----------------------------------------------------------------------------------------------------------------------
 
-    // Text variant - beveled corners (top-left and bottom-right) for text lines
-    &.sk-text
-    {
-        --sk-skeleton-bevel: 0.35em;
-        height: 1em;
-        min-width: 2em;
-        clip-path: polygon(
-            var(--sk-skeleton-bevel) 0,
-            100% 0,
-            100% calc(100% - var(--sk-skeleton-bevel)),
-            calc(100% - var(--sk-skeleton-bevel)) 100%,
-            0 100%,
-            0 var(--sk-skeleton-bevel)
-        );
-    }
+// Text variant — beveled corners (top-left and bottom-right) for text lines
+@include single-choice-modifier('skeleton', 'shape', 'text')
+{
+    --sk-skeleton-bevel: 0.35em;
+    height: 1em;
+    min-width: 2em;
+    clip-path: polygon(
+        var(--sk-skeleton-bevel) 0,
+        100% 0,
+        100% calc(100% - var(--sk-skeleton-bevel)),
+        calc(100% - var(--sk-skeleton-bevel)) 100%,
+        0 100%,
+        0 var(--sk-skeleton-bevel)
+    );
+}
 
-    // Circular variant - perfect circle (avatar, icon placeholder)
-    &.sk-circular
-    {
-        border-radius: 50%;
-        aspect-ratio: 1;
-    }
+// Circular variant — perfect circle (avatar, icon placeholder)
+@include single-choice-modifier('skeleton', 'shape', 'circular')
+{
+    border-radius: 50%;
+    aspect-ratio: 1;
+}
 
-    // Square variant - beveled top-left and bottom-right (avatar placeholder)
-    &.sk-square
-    {
-        --sk-skeleton-bevel: var(--sk-radius-lg);
-        aspect-ratio: 1;
-        clip-path: polygon(
-            var(--sk-skeleton-bevel) 0,
-            100% 0,
-            100% calc(100% - var(--sk-skeleton-bevel)),
-            calc(100% - var(--sk-skeleton-bevel)) 100%,
-            0 100%,
-            0 var(--sk-skeleton-bevel)
-        );
-    }
+// Square variant — beveled top-left and bottom-right (avatar placeholder)
+@include single-choice-modifier('skeleton', 'shape', 'square')
+{
+    --sk-skeleton-bevel: var(--sk-radius-lg);
+    aspect-ratio: 1;
+    clip-path: polygon(
+        var(--sk-skeleton-bevel) 0,
+        100% 0,
+        100% calc(100% - var(--sk-skeleton-bevel)),
+        calc(100% - var(--sk-skeleton-bevel)) 100%,
+        0 100%,
+        0 var(--sk-skeleton-bevel)
+    );
+}
 
-    // Rectangular variant - beveled bottom-right corner only (card, image placeholder)
-    &.sk-rectangular
-    {
-        --sk-skeleton-bevel: var(--sk-radius-lg);
-        clip-path: polygon(
-            0 0,
-            100% 0,
-            100% calc(100% - var(--sk-skeleton-bevel)),
-            calc(100% - var(--sk-skeleton-bevel)) 100%,
-            0 100%
-        );
-    }
+// Rectangular variant — beveled bottom-right corner only (card, image placeholder)
+@include single-choice-modifier('skeleton', 'shape', 'rectangular')
+{
+    --sk-skeleton-bevel: var(--sk-radius-lg);
+    clip-path: polygon(
+        0 0,
+        100% 0,
+        100% calc(100% - var(--sk-skeleton-bevel)),
+        calc(100% - var(--sk-skeleton-bevel)) 100%,
+        0 100%
+    );
+}
 
-    //------------------------------------------------------------------------------------------------------------------
-    // Shimmer Animation
-    //------------------------------------------------------------------------------------------------------------------
+//----------------------------------------------------------------------------------------------------------------------
+// Animation Modifiers
+//----------------------------------------------------------------------------------------------------------------------
 
-    &.sk-shimmer::after
+// Shimmer animation — sweeping highlight from left to right
+@include bool-modifier('skeleton', 'shimmer')
+{
+    &::after
     {
         content: '';
         position: absolute;
@@ -95,15 +108,12 @@
         );
         animation: sk-skeleton-shimmer 1.5s ease-in-out infinite;
     }
+}
 
-    //------------------------------------------------------------------------------------------------------------------
-    // Pulse Animation
-    //------------------------------------------------------------------------------------------------------------------
-
-    &.sk-pulse
-    {
-        animation: sk-skeleton-pulse 1.5s ease-in-out infinite;
-    }
+// Pulse animation — opacity fade in/out
+@include bool-modifier('skeleton', 'pulse')
+{
+    animation: sk-skeleton-pulse 1.5s ease-in-out infinite;
 }
 
 //----------------------------------------------------------------------------------------------------------------------
@@ -146,7 +156,9 @@
 @include reduced-motion
 {
     .sk-skeleton,
+    sk-skeleton,
     .sk-skeleton::after,
+    sk-skeleton::after,
     .sk-skeleton-shimmer::after
     {
         animation: none;
@@ -154,3 +166,37 @@
 }
 
 //----------------------------------------------------------------------------------------------------------------------
+// Defaults When Absent
+//----------------------------------------------------------------------------------------------------------------------
+
+// Default shape: rectangular — fires when no sk-shape-* class is present.
+@include defaults-when-absent('skeleton', 'sk-shape-')
+{
+    --sk-skeleton-bevel: var(--sk-radius-lg);
+    clip-path: polygon(
+        0 0,
+        100% 0,
+        100% calc(100% - var(--sk-skeleton-bevel)),
+        calc(100% - var(--sk-skeleton-bevel)) 100%,
+        0 100%
+    );
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Custom-Element API Defaults (attribute-absence path)
+//----------------------------------------------------------------------------------------------------------------------
+
+// Default shape: rectangular — fires when <sk-skeleton> has no shape attribute.
+@include defaults-when-no-attr('skeleton', 'shape')
+{
+    --sk-skeleton-bevel: var(--sk-radius-lg);
+    clip-path: polygon(
+        0 0,
+        100% 0,
+        100% calc(100% - var(--sk-skeleton-bevel)),
+        calc(100% - var(--sk-skeleton-bevel)) 100%,
+        0 100%
+    );
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_slider.scss

@@ -2,11 +2,8 @@
 // Slider Component Styles
 //----------------------------------------------------------------------------------------------------------------------
 
-@use '@/styles/mixins/cut-border' as *;
-
-//----------------------------------------------------------------------------------------------------------------------
-
-$kinds: (neutral, primary, accent, info, success, warning, danger);
+@use '../mixins/cut-border' as *;
+@use '../theme/variables' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
 // Kind Mixin
@@ -61,31 +58,43 @@ $kinds: (neutral, primary, accent, info, success, warning, danger);
     // Size Variants
     //------------------------------------------------------------------------------------------------------------------
 
-    &.sk-xs
+    // Default: md when no sk-size-* class is present (zero-specificity, explicit class wins)
+    &:where(:not([class*="sk-size-"]))
+    {
+        --sk-slider-track-size: 0.75rem;
+        --sk-slider-thumb-size: 1.25rem;
+    }
+
+    &.sk-xs,
+    &.sk-size-xs
     {
         --sk-slider-track-size: 0.375rem;
         --sk-slider-thumb-size: 0.75rem;
     }
 
-    &.sk-sm
+    &.sk-sm,
+    &.sk-size-sm
     {
         --sk-slider-track-size: 0.5rem;
         --sk-slider-thumb-size: 1rem;
     }
 
-    &.sk-md
+    &.sk-md,
+    &.sk-size-md
     {
         --sk-slider-track-size: 0.75rem;
         --sk-slider-thumb-size: 1.25rem;
     }
 
-    &.sk-lg
+    &.sk-lg,
+    &.sk-size-lg
     {
         --sk-slider-track-size: 1rem;
         --sk-slider-thumb-size: 1.5rem;
     }
 
-    &.sk-xl
+    &.sk-xl,
+    &.sk-size-xl
     {
         --sk-slider-track-size: 1.25rem;
         --sk-slider-thumb-size: 1.75rem;
@@ -261,3 +270,18 @@ $kinds: (neutral, primary, accent, info, success, warning, danger);
 }
 
 //----------------------------------------------------------------------------------------------------------------------
+// Defaults-when-absent: kind — primary when no explicit kind class is present.
+//----------------------------------------------------------------------------------------------------------------------
+
+$_slider-kind-not: '';
+@each $kind in $kinds
+{
+    $_slider-kind-not: $_slider-kind-not + ':not(.sk-' + $kind + ')';
+}
+
+.sk-slider:where(#{ $_slider-kind-not })
+{
+    --sk-slider-color-base: var(--sk-primary-base);
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_spinner.scss

@@ -2,81 +2,81 @@
 // Spinner Component Styles
 //----------------------------------------------------------------------------------------------------------------------
 
-@use '@/styles/mixins/responsive' as *;
-
-$kinds: (neutral, primary, accent, info, success, warning, danger);
+@use '../theme/variables' as *;
+@use '../mixins/dual-selector' as *;
+@use '../mixins/responsive' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
-// Kind Mixin
+// Spinner Design Tokens
 //----------------------------------------------------------------------------------------------------------------------
 
-@mixin spinner-kind($kind)
+.sk-spinner,
+sk-spinner
 {
-    &.sk-#{ '' + $kind }
-    {
-        --sk-spinner-color: var(--sk-#{ $kind }-base);
-    }
+    // CSS Variables
+    --sk-spinner-color: var(--sk-primary-base);
+    --sk-spinner-size: 2rem;
+    --sk-spinner-border-width: var(--sk-border-width-normal);
 }
 
 //----------------------------------------------------------------------------------------------------------------------
 // Spinner Root
 //----------------------------------------------------------------------------------------------------------------------
 
-.sk-spinner
+.sk-spinner,
+sk-spinner
 {
-    // CSS Variables
-    --sk-spinner-color: var(--sk-primary-base);
-    --sk-spinner-size: 2rem;
-    --sk-spinner-border-width: var(--sk-border-width-normal);
-
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: var(--sk-spinner-size);
     height: var(--sk-spinner-size);
+}
 
-    //------------------------------------------------------------------------------------------------------------------
-    // Size Variants
-    //------------------------------------------------------------------------------------------------------------------
+//----------------------------------------------------------------------------------------------------------------------
+// Kind Variants
+//----------------------------------------------------------------------------------------------------------------------
 
-    &.sk-xs
+@each $kind in $kinds
+{
+    @include kind-variant('spinner', $kind)
     {
-        --sk-spinner-size: 1rem;
-        --sk-spinner-border-width: var(--sk-border-width-thin);
+        --sk-spinner-color: var(--sk-#{ $kind }-base);
     }
+}
 
-    &.sk-sm
-    {
-        --sk-spinner-size: 1.5rem;
-        --sk-spinner-border-width: var(--sk-border-width-thin);
-    }
+//----------------------------------------------------------------------------------------------------------------------
+// Size Variants
+//----------------------------------------------------------------------------------------------------------------------
 
-    &.sk-md
-    {
-        --sk-spinner-size: 2rem;
-        --sk-spinner-border-width: var(--sk-border-width-normal);
-    }
+@include size-variant('spinner', 'xs')
+{
+    --sk-spinner-size: 1rem;
+    --sk-spinner-border-width: var(--sk-border-width-thin);
+}
 
-    &.sk-lg
-    {
-        --sk-spinner-size: 2.5rem;
-        --sk-spinner-border-width: var(--sk-border-width-normal);
-    }
+@include size-variant('spinner', 'sm')
+{
+    --sk-spinner-size: 1.5rem;
+    --sk-spinner-border-width: var(--sk-border-width-thin);
+}
 
-    &.sk-xl
-    {
-        --sk-spinner-size: 3rem;
-        --sk-spinner-border-width: var(--sk-border-width-thick);
-    }
+@include size-variant('spinner', 'md')
+{
+    --sk-spinner-size: 2rem;
+    --sk-spinner-border-width: var(--sk-border-width-normal);
+}
 
-    //------------------------------------------------------------------------------------------------------------------
-    // Kind Variants
-    //------------------------------------------------------------------------------------------------------------------
+@include size-variant('spinner', 'lg')
+{
+    --sk-spinner-size: 2.5rem;
+    --sk-spinner-border-width: var(--sk-border-width-normal);
+}
 
-    @each $kind in $kinds
-    {
-        @include spinner-kind($kind);
-    }
+@include size-variant('spinner', 'xl')
+{
+    --sk-spinner-size: 3rem;
+    --sk-spinner-border-width: var(--sk-border-width-thick);
 }
 
 //----------------------------------------------------------------------------------------------------------------------
@@ -287,7 +287,8 @@ $kinds: (neutral, primary, accent, info, success, warning, danger);
 // Folding Variant - Expanding Orbit
 //----------------------------------------------------------------------------------------------------------------------
 
-.sk-crosshair-loader {
+.sk-crosshair-loader
+{
     width: var(--sk-spinner-size);
     aspect-ratio: 1;
     color: var(--sk-spinner-color);
@@ -295,7 +296,8 @@ $kinds: (neutral, primary, accent, info, success, warning, danger);
     background: radial-gradient(calc(var(--sk-spinner-size) * 0.25), currentColor 94%, #0000);
 }
 
-.sk-crosshair-loader:before {
+.sk-crosshair-loader::before
+{
     content: '';
     position: absolute;
     inset: 0;
@@ -309,21 +311,29 @@ $kinds: (neutral, primary, accent, info, success, warning, danger);
     animation: l18 1.5s infinite cubic-bezier(0.3, 1, 0, 1);
 }
 
-@keyframes l18 {
-    0% {
+@keyframes l18
+{
+    0%
+    {
         opacity: 0.3;
     }
-    33% {
+
+    33%
+    {
         inset: calc(var(--sk-spinner-size) * -0.25);
         transform: rotate(0deg);
         opacity: 1;
     }
-    66% {
+
+    66%
+    {
         inset: calc(var(--sk-spinner-size) * -0.25);
         transform: rotate(90deg);
         opacity: 1;
     }
-    100% {
+
+    100%
+    {
         inset: 0;
         transform: rotate(90deg);
         opacity: 0.3;
@@ -337,10 +347,51 @@ $kinds: (neutral, primary, accent, info, success, warning, danger);
 
 @include reduced-motion
 {
-    .sk-spinner *
+    .sk-spinner *,
+    sk-spinner *
     {
         animation-duration: 8s !important;
     }
 }
 
 //----------------------------------------------------------------------------------------------------------------------
+// Defaults When Absent
+//----------------------------------------------------------------------------------------------------------------------
+
+// Default size: md — fires when no sk-size-* class is present.
+@include defaults-when-absent('spinner', 'sk-size-')
+{
+    --sk-spinner-size: 2rem;
+    --sk-spinner-border-width: var(--sk-border-width-normal);
+}
+
+// Default kind: primary — explicit :not() chain for zero-specificity default.
+$_spinner-kind-not: '';
+@each $kind in $kinds
+{
+    $_spinner-kind-not: $_spinner-kind-not + ':not(.sk-' + $kind + ')';
+}
+
+.sk-spinner:where(#{ $_spinner-kind-not })
+{
+    --sk-spinner-color: var(--sk-primary-base);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Custom-Element API Defaults (attribute-absence path)
+//----------------------------------------------------------------------------------------------------------------------
+
+// Default kind: primary — fires when <sk-spinner> has no kind attribute.
+@include defaults-when-no-attr('spinner', 'kind')
+{
+    --sk-spinner-color: var(--sk-primary-base);
+}
+
+// Default size: md — fires when <sk-spinner> has no size attribute.
+@include defaults-when-no-attr('spinner', 'size')
+{
+    --sk-spinner-size: 2rem;
+    --sk-spinner-border-width: var(--sk-border-width-normal);
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_switch.scss

@@ -85,6 +85,25 @@
     --sk-switch-track-border-color: var(--sk-switch-color-base);
 }
 
+//----------------------------------------------------------------------------------------------------------------------
+// Defaults-when-absent: kind — primary when no explicit kind class is present.
+//----------------------------------------------------------------------------------------------------------------------
+
+$_switch-kind-not: '';
+@each $kind in $kinds
+{
+    $_switch-kind-not: $_switch-kind-not + ':not(.sk-' + $kind + ')';
+}
+
+.sk-switch:where(#{ $_switch-kind-not })
+{
+    --sk-switch-color-base: var(--sk-primary-base);
+    --sk-switch-fg: var(--sk-primary-text);
+    --sk-switch-track-border-color: var(--sk-primary-base);
+    --sk-switch-thumb-color: color-mix(in oklch, var(--sk-primary-base), black 20%);
+    --sk-switch-thumb-border-color: color-mix(in oklch, var(--sk-primary-base), black 20%);
+}
+
 //----------------------------------------------------------------------------------------------------------------------
 // Switch Wrapper (contains switch + label)
 //----------------------------------------------------------------------------------------------------------------------
@@ -114,6 +133,13 @@
 
 .sk-switch
 {
+    // Default: md when no sk-size-* class is present (zero-specificity, explicit class wins)
+    &:where(:not([class*="sk-size-"]))
+    {
+        // md is the default; .sk-switch-wrapper:has(.sk-switch:not(.sk-size-*)) will use md tokens
+        --sk-switch-size: md;
+    }
+
     position: relative;
     width: var(--sk-switch-track-width);
     height: var(--sk-switch-track-height);
@@ -277,35 +303,40 @@
 
 .sk-switch-wrapper
 {
-    &:has(.sk-switch.sk-xs)
+    &:has(.sk-switch.sk-xs),
+    &:has(.sk-switch.sk-size-xs)
     {
         --sk-switch-track-width: 24px;
         --sk-switch-track-height: 14px;
         --sk-switch-thumb-size: 8px;
     }
 
-    &:has(.sk-switch.sk-sm)
+    &:has(.sk-switch.sk-sm),
+    &:has(.sk-switch.sk-size-sm)
     {
         --sk-switch-track-width: 28px;
         --sk-switch-track-height: 16px;
         --sk-switch-thumb-size: 8px;
     }
 
-    &:has(.sk-switch.sk-md)
+    &:has(.sk-switch.sk-md),
+    &:has(.sk-switch.sk-size-md)
     {
         --sk-switch-track-width: 36px;
         --sk-switch-track-height: 20px;
         --sk-switch-thumb-size: 12px;
     }
 
-    &:has(.sk-switch.sk-lg)
+    &:has(.sk-switch.sk-lg),
+    &:has(.sk-switch.sk-size-lg)
     {
         --sk-switch-track-width: 44px;
         --sk-switch-track-height: 24px;
         --sk-switch-thumb-size: 16px;
     }
 
-    &:has(.sk-switch.sk-xl)
+    &:has(.sk-switch.sk-xl),
+    &:has(.sk-switch.sk-size-xl)
     {
         --sk-switch-track-width: 52px;
         --sk-switch-track-height: 28px;