@skewedaspect/sleekspace-ui 0.8.1 → 0.9.0

package/src/styles/components/_field.scss

@@ -2,41 +2,94 @@
 // Field Component Styles
 //----------------------------------------------------------------------------------------------------------------------
 
-.sk-field
+@use '../theme/variables' as *;
+@use '../mixins' as *;
+
+//----------------------------------------------------------------------------------------------------------------------
+// Field Design Tokens
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-field,
+sk-field
+{
+    --sk-field-gap: var(--sk-space-xs);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Field Root
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-field,
+sk-field
 {
     display: flex;
     flex-direction: column;
-    gap: var(--sk-space-xs);
+    gap: var(--sk-field-gap);
+}
 
-    //------------------------------------------------------------------------------------------------------------------
-    // Label positioning
-    //------------------------------------------------------------------------------------------------------------------
+//----------------------------------------------------------------------------------------------------------------------
+// Label Positioning Modifiers (single-choice)
+//----------------------------------------------------------------------------------------------------------------------
+
+@include single-choice-modifier('field', 'label', 'top', 'label-position')
+{
+    flex-direction: column;
+}
+
+@include single-choice-modifier('field', 'label', 'left', 'label-position')
+{
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--sk-space-md);
+
+    .sk-field-label
+    {
+        flex-shrink: 0;
+        min-width: 120px;
+        padding-top: var(--sk-space-xs);
+    }
 
-    &.sk-label-top
+    .sk-field-input-wrapper
     {
-        flex-direction: column;
+        flex: 1;
     }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Boolean Modifiers
+//----------------------------------------------------------------------------------------------------------------------
 
-    &.sk-label-left
+@include bool-modifier('field', 'has-error')
+{
+    // Anchor property ensures the selector pair is emitted by Sass.
+    --sk-field-error-state: 1;
+
+    .sk-field-label
     {
-        flex-direction: row;
-        align-items: flex-start;
-        gap: var(--sk-space-md);
-
-        .sk-field-label
-        {
-            flex-shrink: 0;
-            min-width: 120px;
-            padding-top: var(--sk-space-xs);
-        }
-
-        .sk-field-input-wrapper
-        {
-            flex: 1;
-        }
+        color: var(--sk-danger-base);
     }
 }
 
+//----------------------------------------------------------------------------------------------------------------------
+// Defaults When Absent
+//----------------------------------------------------------------------------------------------------------------------
+
+// Default label-position: top (column layout)
+@include defaults-when-absent('field', 'sk-label-')
+{
+    flex-direction: column;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Custom-Element API Defaults (attribute-absence path)
+//----------------------------------------------------------------------------------------------------------------------
+
+// Default label-position: top
+@include defaults-when-no-attr('field', 'label-position')
+{
+    flex-direction: column;
+}
+
 //----------------------------------------------------------------------------------------------------------------------
 
 .sk-field-label

package/src/styles/components/_group.scss

@@ -9,129 +9,240 @@
 // Base Group Styles
 //----------------------------------------------------------------------------------------------------------------------
 
-.sk-group
+.sk-group,
+sk-group
 {
     // Base styles
     display: inline-flex;
     align-items: stretch;
 
-    // Horizontal orientation (default)
-    &.sk-horizontal
+    // Ensure grouped items have higher z-index on hover
+    > *:hover,
+    > *:focus-within
     {
-        flex-direction: row;
+        position: relative;
+        z-index: 1;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Orientation Modifiers
+//----------------------------------------------------------------------------------------------------------------------
+
+@include single-choice-modifier('group', 'orientation', 'horizontal')
+{
+    flex-direction: row;
 
-        // Remove gaps between children
-        > *
+    // Remove gaps between children
+    > *
+    {
+        flex-shrink: 0;
+    }
+
+    // Remove left border and corner shape from all but first child
+    > * + *
+    {
+        margin-left: calc(-1 * var(--sk-border-width, 1px));
+    }
+
+    // First child keeps only left corners
+    > *:first-child:not(:only-child)
+    {
+        @supports (corner-shape: bevel)
         {
-            flex-shrink: 0;
+            corner-shape: bevel;
+            border-start-end-radius: 0;
+            border-end-end-radius: 0;
         }
+    }
 
-        // Remove left border and corner shape from all but first child
-        > * + *
+    // Middle children have no beveled corners
+    > *:not(:first-child):not(:last-child)
+    {
+        @supports (corner-shape: bevel)
         {
-            margin-left: calc(-1 * var(--sk-border-width, 1px));
+            corner-shape: initial;
+            border-radius: 0;
         }
 
-        // First child keeps only left corners
-        > *:first-child:not(:only-child)
+        @supports not (corner-shape: bevel)
         {
-            @supports (corner-shape: bevel)
-            {
-                corner-shape: bevel;
-                border-start-end-radius: 0;
-                border-end-end-radius: 0;
-            }
+            border-radius: 0;
         }
+    }
 
-        // Middle children have no beveled corners
-        > *:not(:first-child):not(:last-child)
+    // Last child keeps only right corners
+    > *:last-child:not(:only-child)
+    {
+        @supports (corner-shape: bevel)
         {
-            @supports (corner-shape: bevel)
-            {
-                corner-shape: initial;
-                border-radius: 0;
-            }
+            corner-shape: bevel;
+            border-start-start-radius: 0;
+            border-end-start-radius: 0;
+        }
+    }
+}
+
+@include single-choice-modifier('group', 'orientation', 'vertical')
+{
+    flex-direction: column;
+
+    // Remove gaps between children
+    > *
+    {
+        flex-shrink: 0;
+        width: 100%;
+    }
+
+    // Remove top border from all but first child
+    > * + *
+    {
+        margin-top: calc(-1 * var(--sk-border-width, 1px));
+    }
 
-            @supports not (corner-shape: bevel)
-            {
-                border-radius: 0;
-            }
+    // First child keeps only top corners
+    > *:first-child:not(:only-child)
+    {
+        @supports (corner-shape: bevel)
+        {
+            corner-shape: bevel;
+            border-end-start-radius: 0;
+            border-end-end-radius: 0;
         }
+    }
 
-        // Last child keeps only right corners
-        > *:last-child:not(:only-child)
+    // Middle children have no beveled corners
+    > *:not(:first-child):not(:last-child)
+    {
+        @supports (corner-shape: bevel)
         {
-            @supports (corner-shape: bevel)
-            {
-                corner-shape: bevel;
-                border-start-start-radius: 0;
-                border-end-start-radius: 0;
-            }
+            corner-shape: initial;
+            border-radius: 0;
+        }
+
+        @supports not (corner-shape: bevel)
+        {
+            border-radius: 0;
         }
     }
 
-    // Vertical orientation
-    &.sk-vertical
+    // Last child keeps only bottom corners
+    > *:last-child:not(:only-child)
     {
-        flex-direction: column;
+        @supports (corner-shape: bevel)
+        {
+            corner-shape: bevel;
+            border-start-start-radius: 0;
+            border-start-end-radius: 0;
+        }
+    }
+}
 
-        // Remove gaps between children
-        > *
+//----------------------------------------------------------------------------------------------------------------------
+// Defaults When Absent
+//----------------------------------------------------------------------------------------------------------------------
+
+// Default orientation: horizontal — fires when no sk-orientation-* class is present.
+@include defaults-when-absent('group', 'sk-orientation-')
+{
+    flex-direction: row;
+
+    > *
+    {
+        flex-shrink: 0;
+    }
+
+    > * + *
+    {
+        margin-left: calc(-1 * var(--sk-border-width, 1px));
+    }
+
+    > *:first-child:not(:only-child)
+    {
+        @supports (corner-shape: bevel)
         {
-            flex-shrink: 0;
-            width: 100%;
+            corner-shape: bevel;
+            border-start-end-radius: 0;
+            border-end-end-radius: 0;
         }
+    }
 
-        // Remove top border from all but first child
-        > * + *
+    > *:not(:first-child):not(:last-child)
+    {
+        @supports (corner-shape: bevel)
         {
-            margin-top: calc(-1 * var(--sk-border-width, 1px));
+            corner-shape: initial;
+            border-radius: 0;
         }
 
-        // First child keeps only top corners
-        > *:first-child:not(:only-child)
+        @supports not (corner-shape: bevel)
         {
-            @supports (corner-shape: bevel)
-            {
-                corner-shape: bevel;
-                border-end-start-radius: 0;
-                border-end-end-radius: 0;
-            }
+            border-radius: 0;
         }
+    }
+
+    > *:last-child:not(:only-child)
+    {
+        @supports (corner-shape: bevel)
+        {
+            corner-shape: bevel;
+            border-start-start-radius: 0;
+            border-end-start-radius: 0;
+        }
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Custom-Element API Defaults (attribute-absence path)
+//----------------------------------------------------------------------------------------------------------------------
+
+// Default orientation: horizontal — fires when <sk-group> has no orientation attribute.
+@include defaults-when-no-attr('group', 'orientation')
+{
+    flex-direction: row;
 
-        // Middle children have no beveled corners
-        > *:not(:first-child):not(:last-child)
+    > *
+    {
+        flex-shrink: 0;
+    }
+
+    > * + *
+    {
+        margin-left: calc(-1 * var(--sk-border-width, 1px));
+    }
+
+    > *:first-child:not(:only-child)
+    {
+        @supports (corner-shape: bevel)
         {
-            @supports (corner-shape: bevel)
-            {
-                corner-shape: initial;
-                border-radius: 0;
-            }
+            corner-shape: bevel;
+            border-start-end-radius: 0;
+            border-end-end-radius: 0;
+        }
+    }
 
-            @supports not (corner-shape: bevel)
-            {
-                border-radius: 0;
-            }
+    > *:not(:first-child):not(:last-child)
+    {
+        @supports (corner-shape: bevel)
+        {
+            corner-shape: initial;
+            border-radius: 0;
         }
 
-        // Last child keeps only bottom corners
-        > *:last-child:not(:only-child)
+        @supports not (corner-shape: bevel)
         {
-            @supports (corner-shape: bevel)
-            {
-                corner-shape: bevel;
-                border-start-start-radius: 0;
-                border-start-end-radius: 0;
-            }
+            border-radius: 0;
         }
     }
 
-    // Ensure grouped items have higher z-index on hover
-    > *:hover,
-    > *:focus-within
+    > *:last-child:not(:only-child)
     {
-        position: relative;
-        z-index: 1;
+        @supports (corner-shape: bevel)
+        {
+            corner-shape: bevel;
+            border-start-start-radius: 0;
+            border-end-start-radius: 0;
+        }
     }
 }
 

package/src/styles/components/_index.scss

@@ -16,6 +16,7 @@
     @include meta.load-css('collapsible');
     @include meta.load-css('color-picker');
     @include meta.load-css('divider');
+    @include meta.load-css('dropdown');
     @include meta.load-css('field');
     @include meta.load-css('group');
     @include meta.load-css('input');

package/src/styles/components/_input.scss

@@ -1,4 +1,5 @@
-@use '@/styles/mixins/cut-border' as *;
+@use '../mixins/cut-border' as *;
+@use '../theme/variables' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
 // Input Component Styles
@@ -38,7 +39,18 @@
     transition-duration: var(--sk-transition-duration-base);
 
     // Size variants (match button heights)
-    &.sk-sm
+
+    // Default: md when no sk-size-* class is present (zero-specificity, explicit class wins)
+    &:where(:not([class*="sk-size-"]))
+    {
+        height: 2.5rem;
+        padding: 0 var(--sk-space-md);
+        font-size: 1rem;
+        --sk-input-cut: 0.5rem;
+    }
+
+    &.sk-sm,
+    &.sk-size-sm
     {
         height: 2rem;
         padding: 0 var(--sk-space-sm);
@@ -46,7 +58,8 @@
         --sk-input-cut: 0.4rem;
     }
 
-    &.sk-md
+    &.sk-md,
+    &.sk-size-md
     {
         height: 2.5rem;
         padding: 0 var(--sk-space-md);
@@ -54,7 +67,8 @@
         --sk-input-cut: 0.5rem;
     }
 
-    &.sk-lg
+    &.sk-lg,
+    &.sk-size-lg
     {
         height: 3rem;
         padding: 0 var(--sk-space-md);
@@ -62,7 +76,8 @@
         --sk-input-cut: 0.6rem;
     }
 
-    &.sk-xl
+    &.sk-xl,
+    &.sk-size-xl
     {
         height: 3.5rem;
         padding: 0 var(--sk-space-md);
@@ -204,3 +219,64 @@
 }
 
 //----------------------------------------------------------------------------------------------------------------------
+// type="search" cancel button
+//
+// Native browsers render an ugly default "x" for `input[type="search"]`. Hide it and paint our
+// own via a mask of an X glyph, colored by the kind's base color so it feels native to the rest
+// of the input's visual identity.
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-input[type="search"]
+{
+    // Hide IE/Edge legacy reveal/clear buttons
+    &::-ms-reveal,
+    &::-ms-clear
+    {
+        display: none;
+    }
+
+    // Replace the WebKit/Blink clear button with our own X
+    &::-webkit-search-cancel-button
+    {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 1em;
+        height: 1em;
+        margin-inline-start: var(--sk-space-xs);
+        background-color: var(--sk-input-color-base);
+        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M1.5 1.5 L8.5 8.5 M8.5 1.5 L1.5 8.5' stroke='black' stroke-width='1.8' stroke-linecap='round'/></svg>");
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: contain;
+        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M1.5 1.5 L8.5 8.5 M8.5 1.5 L1.5 8.5' stroke='black' stroke-width='1.8' stroke-linecap='round'/></svg>");
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-position: center;
+        -webkit-mask-size: contain;
+        opacity: 0.7;
+        cursor: pointer;
+        transition: opacity var(--sk-transition-duration-fast) var(--sk-transition-timing-default);
+    }
+
+    &::-webkit-search-cancel-button:hover
+    {
+        opacity: 1;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Defaults-when-absent: kind — neutral when no explicit kind class is present.
+//----------------------------------------------------------------------------------------------------------------------
+
+$_input-kind-not: '';
+@each $kind in $kinds
+{
+    $_input-kind-not: $_input-kind-not + ':not(.sk-' + $kind + ')';
+}
+
+.sk-input:where(#{ $_input-kind-not })
+{
+    --sk-input-color-base: var(--sk-neutral-base);
+    --sk-input-fg: var(--sk-neutral-text);
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_menu.scss

@@ -1,4 +1,4 @@
-@use '@/styles/mixins' as *;
+@use '../mixins' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
 // Shared Menu Styles