@skewedaspect/sleekspace-ui 0.8.0 → 0.9.0

package/src/styles/components/_checkbox.scss

@@ -1,4 +1,5 @@
-@use '@/styles/mixins' as *;
+@use '../mixins' as *;
+@use '../theme/variables' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
 // Checkbox Component Styles
@@ -68,28 +69,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-checkbox-cut: 0.25rem;
+    }
+
+    &.sk-sm,
+    &.sk-size-sm
     {
         width: 1rem;
         height: 1rem;
         --sk-checkbox-cut: 0.2rem;
     }
 
-    &.sk-md
+    &.sk-md,
+    &.sk-size-md
     {
         width: 1.25rem;
         height: 1.25rem;
         --sk-checkbox-cut: 0.25rem;
     }
 
-    &.sk-lg
+    &.sk-lg,
+    &.sk-size-lg
     {
         width: 1.5rem;
         height: 1.5rem;
         --sk-checkbox-cut: 0.3rem;
     }
 
-    &.sk-xl
+    &.sk-xl,
+    &.sk-size-xl
     {
         width: 1.75rem;
         height: 1.75rem;
@@ -238,3 +252,19 @@
 }
 
 //----------------------------------------------------------------------------------------------------------------------
+// Defaults-when-absent: kind — neutral when no explicit kind class is present.
+//----------------------------------------------------------------------------------------------------------------------
+
+$_checkbox-kind-not: '';
+@each $kind in $kinds
+{
+    $_checkbox-kind-not: $_checkbox-kind-not + ':not(.sk-' + $kind + ')';
+}
+
+.sk-checkbox:where(#{ $_checkbox-kind-not })
+{
+    --sk-checkbox-color-base: var(--sk-neutral-base);
+    --sk-checkbox-fg: var(--sk-neutral-text);
+}
+
+//----------------------------------------------------------------------------------------------------------------------

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

@@ -1,4 +1,5 @@
-@use '@/styles/mixins/cut-border' as *;
+@use '../mixins/cut-border' as *;
+@use '../theme/variables' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
 // ColorPicker Component Styles
@@ -16,23 +17,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-color-picker-cut: 0.5rem;
+    }
+
     // Size variants
-    &.sk-sm
+    &.sk-sm,
+    &.sk-size-sm
     {
         --sk-color-picker-cut: 0.4rem;
     }
 
-    &.sk-md
+    &.sk-md,
+    &.sk-size-md
     {
         --sk-color-picker-cut: 0.5rem;
     }
 
-    &.sk-lg
+    &.sk-lg,
+    &.sk-size-lg
     {
         --sk-color-picker-cut: 0.6rem;
     }
 
-    &.sk-xl
+    &.sk-xl,
+    &.sk-size-xl
     {
         --sk-color-picker-cut: 0.7rem;
     }
@@ -195,28 +206,32 @@
     );
 
     // Size variants
-    .sk-color-picker.sk-sm &
+    .sk-color-picker.sk-sm &,
+    .sk-color-picker.sk-size-sm &
     {
         width: 1.25rem;
         height: 1.25rem;
         margin-left: var(--sk-space-sm);
     }
 
-    .sk-color-picker.sk-md &
+    .sk-color-picker.sk-md &,
+    .sk-color-picker.sk-size-md &
     {
         width: 1.5rem;
         height: 1.5rem;
         margin-left: var(--sk-space-md);
     }
 
-    .sk-color-picker.sk-lg &
+    .sk-color-picker.sk-lg &,
+    .sk-color-picker.sk-size-lg &
     {
         width: 1.75rem;
         height: 1.75rem;
         margin-left: var(--sk-space-md);
     }
 
-    .sk-color-picker.sk-xl &
+    .sk-color-picker.sk-xl &,
+    .sk-color-picker.sk-size-xl &
     {
         width: 2rem;
         height: 2rem;
@@ -242,28 +257,32 @@
     white-space: nowrap;
 
     // Size variants
-    .sk-color-picker.sk-sm &
+    .sk-color-picker.sk-sm &,
+    .sk-color-picker.sk-size-sm &
     {
         height: 2rem;
         padding: 0 var(--sk-space-xs);
         font-size: 0.8125rem;
     }
 
-    .sk-color-picker.sk-md &
+    .sk-color-picker.sk-md &,
+    .sk-color-picker.sk-size-md &
     {
         height: 2.5rem;
         padding: 0 var(--sk-space-sm);
         font-size: 0.875rem;
     }
 
-    .sk-color-picker.sk-lg &
+    .sk-color-picker.sk-lg &,
+    .sk-color-picker.sk-size-lg &
     {
         height: 3rem;
         padding: 0 var(--sk-space-sm);
         font-size: 1rem;
     }
 
-    .sk-color-picker.sk-xl &
+    .sk-color-picker.sk-xl &,
+    .sk-color-picker.sk-size-xl &
     {
         height: 3.5rem;
         padding: 0 var(--sk-space-sm);
@@ -553,3 +572,19 @@
 }
 
 //----------------------------------------------------------------------------------------------------------------------
+// Defaults-when-absent: kind — neutral when no explicit kind class is present.
+//----------------------------------------------------------------------------------------------------------------------
+
+$_color-picker-kind-not: '';
+@each $kind in $kinds
+{
+    $_color-picker-kind-not: $_color-picker-kind-not + ':not(.sk-' + $kind + ')';
+}
+
+.sk-color-picker:where(#{ $_color-picker-kind-not })
+{
+    --sk-color-picker-color-base: var(--sk-neutral-base);
+    --sk-color-picker-fg: var(--sk-neutral-text);
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_divider.scss

@@ -3,12 +3,14 @@
 //----------------------------------------------------------------------------------------------------------------------
 
 @use '../theme/variables' as *;
+@use '../mixins/dual-selector' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
 // Divider Design Tokens
 //----------------------------------------------------------------------------------------------------------------------
 
-.sk-divider
+.sk-divider,
+sk-divider
 {
     //------------------------------------------------------------------------------------------------------------------
     // Dimension Tokens
@@ -34,26 +36,12 @@
     --sk-divider-border-color: var(--sk-divider-color);
 }
 
-//----------------------------------------------------------------------------------------------------------------------
-// Kind Mixin
-//----------------------------------------------------------------------------------------------------------------------
-
-@mixin divider-kind($kind)
-{
-    &.sk-#{ "" + $kind }
-    {
-        --sk-divider-color: var(--sk-#{ $kind }-base);
-
-        // Set generic kind color for list markers and other cross-component features
-        --sk-kind-color: var(--sk-#{ $kind }-base);
-    }
-}
-
 //----------------------------------------------------------------------------------------------------------------------
 // Base Divider Styles
 //----------------------------------------------------------------------------------------------------------------------
 
-.sk-divider
+.sk-divider,
+sk-divider
 {
     // Reset default hr styles
     border: none;
@@ -71,51 +59,97 @@
     {
         color: var(--sk-kind-color, var(--sk-divider-color));
     }
+}
 
-    //------------------------------------------------------------------------------------------------------------------
-    // Orientation: Horizontal (default)
-    //------------------------------------------------------------------------------------------------------------------
+//----------------------------------------------------------------------------------------------------------------------
+// Kind Variants
+//----------------------------------------------------------------------------------------------------------------------
 
-    &.sk-horizontal
+@each $kind in $kinds
+{
+    @include kind-variant('divider', $kind)
     {
-        width: 100%;
-        height: 0;
-        border-top-width: var(--sk-divider-border-width);
-        margin-top: var(--sk-divider-spacing-vertical);
-        margin-bottom: var(--sk-divider-spacing-vertical);
+        --sk-divider-color: var(--sk-#{ $kind }-base);
+
+        // Set generic kind color for list markers and other cross-component features
+        --sk-kind-color: var(--sk-#{ $kind }-base);
     }
+}
 
-    //------------------------------------------------------------------------------------------------------------------
-    // Orientation: Vertical
-    //------------------------------------------------------------------------------------------------------------------
+//----------------------------------------------------------------------------------------------------------------------
+// Orientation Modifiers
+//----------------------------------------------------------------------------------------------------------------------
 
-    &.sk-vertical
-    {
-        width: 0;
-        height: auto;
-        align-self: stretch;
-        border-left-width: var(--sk-divider-border-width);
-        margin-left: var(--sk-divider-spacing-horizontal);
-        margin-right: var(--sk-divider-spacing-horizontal);
-    }
+@include single-choice-modifier('divider', 'orientation', 'horizontal')
+{
+    width: 100%;
+    height: 0;
+    border-top-width: var(--sk-divider-border-width);
+    margin-top: var(--sk-divider-spacing-vertical);
+    margin-bottom: var(--sk-divider-spacing-vertical);
+}
 
-    //------------------------------------------------------------------------------------------------------------------
-    // Variant: Subtle
-    //------------------------------------------------------------------------------------------------------------------
+@include single-choice-modifier('divider', 'orientation', 'vertical')
+{
+    width: 0;
+    height: auto;
+    align-self: stretch;
+    border-left-width: var(--sk-divider-border-width);
+    margin-left: var(--sk-divider-spacing-horizontal);
+    margin-right: var(--sk-divider-spacing-horizontal);
+}
 
-    &.sk-subtle
-    {
-        opacity: var(--sk-opacity-subtle);
-    }
+//----------------------------------------------------------------------------------------------------------------------
+// Subtle Modifier
+//----------------------------------------------------------------------------------------------------------------------
 
-    //------------------------------------------------------------------------------------------------------------------
-    // Kind variants
-    //------------------------------------------------------------------------------------------------------------------
+@include bool-modifier('divider', 'subtle')
+{
+    opacity: var(--sk-opacity-subtle);
+}
 
-    @each $kind in $kinds
-    {
-        @include divider-kind($kind);
-    }
+//----------------------------------------------------------------------------------------------------------------------
+// Defaults When Absent
+//----------------------------------------------------------------------------------------------------------------------
+
+// Default orientation: horizontal — fires when no sk-orientation-* class is present.
+@include defaults-when-absent('divider', 'sk-orientation-')
+{
+    width: 100%;
+    height: 0;
+    border-top-width: var(--sk-divider-border-width);
+    margin-top: var(--sk-divider-spacing-vertical);
+    margin-bottom: var(--sk-divider-spacing-vertical);
+}
+
+// Default kind: neutral — explicit :not() chain for zero-specificity default.
+$_divider-kind-not: '';
+@each $kind in $kinds
+{
+    $_divider-kind-not: $_divider-kind-not + ':not(.sk-' + $kind + ')';
+}
+
+.sk-divider:where(#{ $_divider-kind-not })
+{
+    --sk-divider-color: var(--sk-neutral-base);
+    --sk-kind-color: var(--sk-neutral-base);
+}
+
+// Default kind for custom-element API — fires when <sk-divider> has no kind attribute.
+@include defaults-when-no-attr('divider', 'kind')
+{
+    --sk-divider-color: var(--sk-neutral-base);
+    --sk-kind-color: var(--sk-neutral-base);
+}
+
+// Default orientation for custom-element API — fires when <sk-divider> has no orientation attribute.
+@include defaults-when-no-attr('divider', 'orientation')
+{
+    width: 100%;
+    height: 0;
+    border-top-width: var(--sk-divider-border-width);
+    margin-top: var(--sk-divider-spacing-vertical);
+    margin-bottom: var(--sk-divider-spacing-vertical);
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_dropdown.scss

@@ -0,0 +1,214 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Dropdown Component Styles
+//
+// Pure-CSS disclosure dropdown built on <details>/<summary>.
+//
+// Usage:
+//   <details class="sk-dropdown sk-primary">
+//     <summary>Actions</summary>
+//     <a href="#">Item 1</a>
+//     <a href="#">Item 2</a>
+//   </details>
+//
+// Limitations:
+//   - No focus trap; keyboard navigation is whatever <details> provides natively.
+//   - No keyboard menu role (not aria-menu). Use a real menu component for that.
+//   - Panel is in normal document flow — it pushes siblings down (no portal overlay).
+//   - No animation beyond what the browser provides for <details>.
+//----------------------------------------------------------------------------------------------------------------------
+
+@use '../mixins/cut-border' as *;
+@use '../theme/variables' as *;
+
+//----------------------------------------------------------------------------------------------------------------------
+// Dropdown Root (<details>)
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-dropdown
+{
+    // Color tokens — kind sets these
+    --sk-dropdown-color-base: var(--sk-neutral-base);
+    --sk-dropdown-fg: var(--sk-neutral-text);
+
+    // Size token
+    --sk-dropdown-cut: 0.5rem;
+
+    position: relative;
+    display: inline-block;
+
+    // Default: md when no sk-size-* class is present (zero-specificity, explicit class wins)
+    &:where(:not([class*="sk-size-"]))
+    {
+        --sk-dropdown-cut: 0.5rem;
+    }
+
+    // Size variants
+    &.sk-sm,
+    &.sk-size-sm
+    {
+        --sk-dropdown-cut: 0.4rem;
+    }
+
+    &.sk-md,
+    &.sk-size-md
+    {
+        --sk-dropdown-cut: 0.5rem;
+    }
+
+    &.sk-lg,
+    &.sk-size-lg
+    {
+        --sk-dropdown-cut: 0.625rem;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Summary Trigger
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-dropdown > summary
+{
+    display: flex;
+    align-items: center;
+    gap: var(--sk-space-xs);
+    padding: var(--sk-space-xs) var(--sk-space-md);
+    cursor: pointer;
+    user-select: none;
+    list-style: none;
+
+    @include cut-border(
+        $cut: var(--sk-dropdown-cut),
+        $border-width: var(--sk-border-width-thin),
+        $border-color: var(--sk-dropdown-color-base),
+        $corners: (top-right)
+    );
+
+    background: color-mix(
+        in oklch,
+        color-mix(in oklch, var(--sk-dropdown-color-base) 75%, transparent 25%),
+        #000 65%
+    );
+    color: var(--sk-dropdown-fg);
+
+    transition-property: background, border-color;
+    transition-duration: var(--sk-transition-duration-base);
+
+    // Hide native disclosure triangle in webkit/blink
+    &::-webkit-details-marker
+    {
+        display: none;
+    }
+
+    &:hover
+    {
+        border-color: color-mix(in oklch, var(--sk-dropdown-color-base), white 20%);
+        background: color-mix(
+            in oklch,
+            color-mix(in oklch, var(--sk-dropdown-color-base) 75%, transparent 25%),
+            #000 50%
+        );
+        transition-duration: var(--sk-transition-duration-fast);
+    }
+
+    &:focus-visible
+    {
+        outline: 2px solid var(--sk-focus-ring-color);
+        outline-offset: 2px;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Open State
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-dropdown[open] > summary
+{
+    border-color: color-mix(in oklch, var(--sk-dropdown-color-base), white 30%);
+    background: color-mix(
+        in oklch,
+        color-mix(in oklch, var(--sk-dropdown-color-base) 75%, transparent 25%),
+        #000 40%
+    );
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Panel (non-summary children)
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-dropdown > :not(summary)
+{
+    display: block;
+    padding: var(--sk-space-xs) var(--sk-space-md);
+    color: var(--sk-dropdown-fg);
+    font-size: 0.875rem;
+    cursor: pointer;
+    user-select: none;
+    text-decoration: none;
+
+    @include cut-border(
+        $cut: var(--sk-dropdown-cut),
+        $border-width: var(--sk-border-width-thin),
+        $border-color: transparent,
+        $corners: (top-left bottom-right)
+    );
+
+    background: color-mix(
+        in oklch,
+        color-mix(in oklch, var(--sk-dropdown-color-base) 95%, transparent 5%),
+        #000 50%
+    );
+
+    transition-property: background, color;
+    transition-duration: var(--sk-transition-duration-base);
+
+    &:hover
+    {
+        background: color-mix(
+            in oklch,
+            color-mix(in oklch, var(--sk-dropdown-color-base), black 30%),
+            transparent 10%
+        );
+        color: var(--sk-dropdown-fg);
+        transition-duration: var(--sk-transition-duration-fast);
+    }
+
+    &:focus-visible
+    {
+        outline: 2px solid var(--sk-focus-ring-color);
+        outline-offset: -2px;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Kind Variants
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-dropdown
+{
+    @each $kind in $semantic-kinds
+    {
+        &.sk-#{ '' + $kind }
+        {
+            --sk-dropdown-color-base: var(--sk-#{ $kind }-base);
+            --sk-dropdown-fg: var(--sk-#{ $kind }-text);
+        }
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Defaults-when-absent: kind — neutral when no explicit kind class is present.
+//----------------------------------------------------------------------------------------------------------------------
+
+$_dropdown-kind-not: '';
+@each $kind in $semantic-kinds
+{
+    $_dropdown-kind-not: $_dropdown-kind-not + ':not(.sk-' + $kind + ')';
+}
+
+.sk-dropdown:where(#{ $_dropdown-kind-not })
+{
+    --sk-dropdown-color-base: var(--sk-neutral-base);
+    --sk-dropdown-fg: var(--sk-neutral-text);
+}
+
+//----------------------------------------------------------------------------------------------------------------------