@skewedaspect/sleekspace-ui 0.8.0 → 0.9.0

package/src/styles/components/_alert.scss

@@ -4,12 +4,14 @@
 
 @use '../theme/variables' as *;
 @use '../mixins' as *;
+@use '../mixins/dual-selector' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
 // Alert Design Tokens
 //----------------------------------------------------------------------------------------------------------------------
 
-.sk-alert
+.sk-alert,
+sk-alert
 {
     //------------------------------------------------------------------------------------------------------------------
     // Dimension Tokens
@@ -85,41 +87,12 @@
         oklch(from var(--sk-alert-color-base) l c h / var(--sk-alert-glow-opacity));
 }
 
-//----------------------------------------------------------------------------------------------------------------------
-// Kind Mixin
-//----------------------------------------------------------------------------------------------------------------------
-
-@mixin alert-kind($kind)
-{
-    &.sk-#{ "" + $kind }
-    {
-        // Override base color tokens for this kind
-        --sk-alert-color-base: var(--sk-#{ $kind }-base);
-
-        // Set generic kind color for list markers and other cross-component features
-        --sk-kind-color: var(--sk-#{ $kind }-base);
-
-        // Set dynamic border color
-        --sk-alert-border-color: var(--sk-alert-border-base);
-
-        // Use calculated background and foreground
-        background-color: var(--sk-alert-bg);
-        color: var(--sk-alert-fg);
-        border-color: var(--sk-alert-border-color);
-
-        // Non-subtle variants get the dark foreground color
-        &:not(.sk-subtle)
-        {
-            --sk-alert-fg: var(--sk-#{ $kind }-text);
-        }
-    }
-}
-
 //----------------------------------------------------------------------------------------------------------------------
 // Base Alert Styles
 //----------------------------------------------------------------------------------------------------------------------
 
-.sk-alert
+.sk-alert,
+sk-alert
 {
     // Base structure
     position: relative;
@@ -186,10 +159,10 @@
     }
 
     //------------------------------------------------------------------------------------------------------------------
-    // Non-subtle (prominent) variant - applied when NOT subtle
+    // Non-subtle (prominent) variant — applied when NOT subtle
     //------------------------------------------------------------------------------------------------------------------
 
-    &:not(.sk-subtle)
+    &:not(.sk-subtle):not([subtle])
     {
         --sk-alert-padding: 1rem;
         --sk-alert-icon-size: 1.5rem;
@@ -204,15 +177,85 @@
         // Apply inner glow
         box-shadow: var(--sk-alert-glow);
     }
+}
 
-    //------------------------------------------------------------------------------------------------------------------
-    // Kind variants
-    //------------------------------------------------------------------------------------------------------------------
+//----------------------------------------------------------------------------------------------------------------------
+// Kind Variants
+//----------------------------------------------------------------------------------------------------------------------
 
-    @each $kind in $kinds
+@each $kind in $kinds
+{
+    @include kind-variant('alert', $kind)
     {
-        @include alert-kind($kind);
+        // Override base color tokens for this kind
+        --sk-alert-color-base: var(--sk-#{ $kind }-base);
+
+        // Set generic kind color for list markers and other cross-component features
+        --sk-kind-color: var(--sk-#{ $kind }-base);
+
+        // Set dynamic border color
+        --sk-alert-border-color: var(--sk-alert-border-base);
+
+        // Use calculated background and foreground
+        background-color: var(--sk-alert-bg);
+        color: var(--sk-alert-fg);
+        border-color: var(--sk-alert-border-color);
+
+        // Non-subtle variants get the dark foreground color (for contrast on solid bg)
+        &:not(.sk-subtle):not([subtle])
+        {
+            --sk-alert-fg: var(--sk-#{ $kind }-text);
+        }
     }
 }
 
 //----------------------------------------------------------------------------------------------------------------------
+// Subtle Modifier
+//----------------------------------------------------------------------------------------------------------------------
+// Emits .sk-alert.sk-subtle and sk-alert[subtle] for Layer 2 custom-element API support.
+// Subtle alerts use reduced opacity background and the base color as text (already the default).
+// The selector pair is emitted here so sk-alert[subtle] resolves consistently with .sk-subtle.
+
+@include bool-modifier('alert', 'subtle')
+{
+    // Subtle uses the semi-transparent background (already the default via --sk-alert-bg).
+    // Explicitly set to ensure this wins over any non-subtle rules at the same specificity.
+    --sk-alert-bg: oklch(from var(--sk-alert-bg-solid) l c h / var(--sk-alert-subtle-opacity));
+    --sk-alert-fg: var(--sk-alert-color-base);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Defaults When Absent
+//----------------------------------------------------------------------------------------------------------------------
+
+// Default kind: info — alert defaults to 'info' kind per Vue component props.
+// Can't use [class*="sk-"] because every Sleekspace class starts with "sk-".
+// Use explicit :not() chain for each kind, wrapped in :where() for zero specificity.
+$_alert-kind-not: '';
+@each $kind in $kinds
+{
+    $_alert-kind-not: $_alert-kind-not + ':not(.sk-' + $kind + ')';
+}
+
+.sk-alert:where(#{ $_alert-kind-not })
+{
+    --sk-alert-color-base: var(--sk-info-base);
+    --sk-kind-color: var(--sk-info-base);
+    --sk-alert-border-color: var(--sk-alert-border-base);
+    background-color: var(--sk-alert-bg);
+    color: var(--sk-alert-fg);
+    border-color: var(--sk-alert-border-color);
+}
+
+// Default kind for custom-element API — fires when <sk-alert> has no kind attribute.
+@include defaults-when-no-attr('alert', 'kind')
+{
+    --sk-alert-color-base: var(--sk-info-base);
+    --sk-kind-color: var(--sk-info-base);
+    --sk-alert-border-color: var(--sk-alert-border-base);
+    background-color: var(--sk-alert-bg);
+    color: var(--sk-alert-fg);
+    border-color: var(--sk-alert-border-color);
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_avatar.scss

@@ -2,37 +2,30 @@
 // Avatar Component Styles
 //----------------------------------------------------------------------------------------------------------------------
 
-@use '@/styles/mixins/cut-border' as *;
+@use '../theme/variables' as *;
+@use '../mixins' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
-
-$kinds: (neutral, primary, accent, info, success, warning, danger);
-
-//----------------------------------------------------------------------------------------------------------------------
-// Kind Mixin
+// Avatar Design Tokens
 //----------------------------------------------------------------------------------------------------------------------
 
-@mixin avatar-kind($kind)
+.sk-avatar,
+sk-avatar
 {
-    &.sk-#{ '' + $kind }
-    {
-        --sk-avatar-color-base: var(--sk-#{ $kind }-base);
-        --sk-avatar-fg: var(--sk-#{ $kind }-text);
-    }
+    // CSS Variables
+    --sk-avatar-color-base: var(--sk-neutral-base);
+    --sk-avatar-fg: var(--sk-neutral-text);
+    --sk-avatar-size: 2.5rem;
+    --sk-avatar-bevel: calc(var(--sk-avatar-size) * 0.25);
 }
 
 //----------------------------------------------------------------------------------------------------------------------
 // Avatar Root
 //----------------------------------------------------------------------------------------------------------------------
 
-.sk-avatar
+.sk-avatar,
+sk-avatar
 {
-    // CSS Variables
-    --sk-avatar-color-base: var(--sk-neutral-base);
-    --sk-avatar-fg: var(--sk-neutral-text);
-    --sk-avatar-size: 2.5rem;
-    --sk-avatar-bevel: calc(var(--sk-avatar-size) * 0.25);
-
     position: relative;
     display: inline-flex;
     align-items: center;
@@ -55,44 +48,106 @@ $kinds: (neutral, primary, accent, info, success, warning, danger);
 
     // Prevent image from overflowing the beveled corners
     overflow: hidden;
+}
 
-    //------------------------------------------------------------------------------------------------------------------
-    // Size Variants
-    //------------------------------------------------------------------------------------------------------------------
+//----------------------------------------------------------------------------------------------------------------------
+// Kind Variants
+//----------------------------------------------------------------------------------------------------------------------
 
-    &.sk-xs
+@each $kind in $kinds
+{
+    @include kind-variant('avatar', $kind)
     {
-        --sk-avatar-size: 1.5rem;
+        --sk-avatar-color-base: var(--sk-#{ $kind }-base);
+        --sk-avatar-fg: var(--sk-#{ $kind }-text);
     }
+}
 
-    &.sk-sm
-    {
-        --sk-avatar-size: 2rem;
-    }
+//----------------------------------------------------------------------------------------------------------------------
+// Size Variants
+//----------------------------------------------------------------------------------------------------------------------
 
-    &.sk-md
-    {
-        --sk-avatar-size: 2.5rem;
-    }
+@include size-variant('avatar', 'xs')
+{
+    --sk-avatar-size: 1.5rem;
+}
 
-    &.sk-lg
-    {
-        --sk-avatar-size: 3rem;
-    }
+@include size-variant('avatar', 'sm')
+{
+    --sk-avatar-size: 2rem;
+}
 
-    &.sk-xl
-    {
-        --sk-avatar-size: 4rem;
-    }
+@include size-variant('avatar', 'md')
+{
+    --sk-avatar-size: 2.5rem;
+}
 
-    //------------------------------------------------------------------------------------------------------------------
-    // Kind Variants
-    //------------------------------------------------------------------------------------------------------------------
+@include size-variant('avatar', 'lg')
+{
+    --sk-avatar-size: 3rem;
+}
 
-    @each $kind in $kinds
-    {
-        @include avatar-kind($kind);
-    }
+@include size-variant('avatar', 'xl')
+{
+    --sk-avatar-size: 4rem;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Shape Modifier (single-choice)
+//----------------------------------------------------------------------------------------------------------------------
+
+@include single-choice-modifier('avatar', 'shape', 'circle', 'shape')
+{
+    border-radius: 50%;
+
+    // Override cut-border with a round shape
+    clip-path: circle(50%);
+}
+
+@include single-choice-modifier('avatar', 'shape', 'square', 'shape')
+{
+    --sk-avatar-bevel: 0px;
+    border-radius: 0;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Defaults When Absent
+//----------------------------------------------------------------------------------------------------------------------
+
+// Default kind: neutral
+$_avatar-kind-not: '';
+@each $kind in $kinds
+{
+    $_avatar-kind-not: $_avatar-kind-not + ':not(.sk-' + $kind + ')';
+}
+
+.sk-avatar:where(#{ $_avatar-kind-not })
+{
+    --sk-avatar-color-base: var(--sk-neutral-base);
+    --sk-avatar-fg: var(--sk-neutral-text);
+}
+
+// Default size: md
+@include defaults-when-absent('avatar', 'sk-size-')
+{
+    --sk-avatar-size: 2.5rem;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Custom-Element API Defaults (attribute-absence path)
+//----------------------------------------------------------------------------------------------------------------------
+
+// Default kind: neutral
+@include defaults-when-no-attr('avatar', 'kind')
+{
+    --sk-avatar-color-base: var(--sk-neutral-base);
+    --sk-avatar-fg: var(--sk-neutral-text);
+}
+
+// Default size: md
+@include defaults-when-no-attr('avatar', 'size')
+{
+    --sk-avatar-size: 2.5rem;
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_breadcrumbs.scss

@@ -1,59 +1,61 @@
 //----------------------------------------------------------------------------------------------------------------------
-// Breadcrumbs Styles
+// Breadcrumbs Component Styles
 //----------------------------------------------------------------------------------------------------------------------
 
-@use '@/styles/mixins' as *;
+@use '../theme/variables' as *;
+@use '../mixins' as *;
 
+//----------------------------------------------------------------------------------------------------------------------
+// Breadcrumbs Root
 //----------------------------------------------------------------------------------------------------------------------
 
-.sk-breadcrumbs
+.sk-breadcrumbs,
+sk-breadcrumbs
 {
     // Color tokens - Default to neutral
     --sk-breadcrumbs-color-base: var(--sk-neutral-base);
     --sk-breadcrumbs-fg: var(--sk-neutral-text);
+}
 
-    // Semantic kind variants
-    &.sk-neutral
-    {
-        --sk-breadcrumbs-color-base: var(--sk-neutral-base);
-        --sk-breadcrumbs-fg: var(--sk-neutral-text);
-    }
+//----------------------------------------------------------------------------------------------------------------------
+// Kind Variants
+//----------------------------------------------------------------------------------------------------------------------
 
-    &.sk-primary
+@each $kind in $semantic-kinds
+{
+    @include kind-variant('breadcrumbs', $kind)
     {
-        --sk-breadcrumbs-color-base: var(--sk-primary-base);
-        --sk-breadcrumbs-fg: var(--sk-primary-text);
+        --sk-breadcrumbs-color-base: var(--sk-#{ $kind }-base);
+        --sk-breadcrumbs-fg: var(--sk-#{ $kind }-text);
     }
+}
 
-    &.sk-accent
-    {
-        --sk-breadcrumbs-color-base: var(--sk-accent-base);
-        --sk-breadcrumbs-fg: var(--sk-accent-text);
-    }
+//----------------------------------------------------------------------------------------------------------------------
+// Defaults When Absent
+//----------------------------------------------------------------------------------------------------------------------
 
-    &.sk-info
-    {
-        --sk-breadcrumbs-color-base: var(--sk-info-base);
-        --sk-breadcrumbs-fg: var(--sk-info-text);
-    }
+// Default kind: neutral — explicit :not() chain for zero-specificity default.
+$_breadcrumbs-kind-not: '';
+@each $kind in $semantic-kinds
+{
+    $_breadcrumbs-kind-not: $_breadcrumbs-kind-not + ':not(.sk-' + $kind + ')';
+}
 
-    &.sk-success
-    {
-        --sk-breadcrumbs-color-base: var(--sk-success-base);
-        --sk-breadcrumbs-fg: var(--sk-success-text);
-    }
+.sk-breadcrumbs:where(#{ $_breadcrumbs-kind-not })
+{
+    --sk-breadcrumbs-color-base: var(--sk-neutral-base);
+    --sk-breadcrumbs-fg: var(--sk-neutral-text);
+}
 
-    &.sk-warning
-    {
-        --sk-breadcrumbs-color-base: var(--sk-warning-base);
-        --sk-breadcrumbs-fg: var(--sk-warning-text);
-    }
+//----------------------------------------------------------------------------------------------------------------------
+// Custom-Element API Defaults (attribute-absence path)
+//----------------------------------------------------------------------------------------------------------------------
 
-    &.sk-danger
-    {
-        --sk-breadcrumbs-color-base: var(--sk-danger-base);
-        --sk-breadcrumbs-fg: var(--sk-danger-text);
-    }
+// Default kind: neutral — fires when <sk-breadcrumbs> has no kind attribute.
+@include defaults-when-no-attr('breadcrumbs', 'kind')
+{
+    --sk-breadcrumbs-color-base: var(--sk-neutral-base);
+    --sk-breadcrumbs-fg: var(--sk-neutral-text);
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_button.scss

@@ -444,7 +444,17 @@
     // Size variants -- set chrome sizing vars; .sk-button-chrome consumes them below.
     //------------------------------------------------------------------------------------------------------------------
 
-    &.sk-xs
+    // Default: md when no sk-size-* class is present (zero-specificity, explicit class wins)
+    &:where(:not([class*="sk-size-"]))
+    {
+        --sk-button-current-height: calc(var(--sk-button-height-base) * var(--sk-button-scale-md));
+        --sk-button-current-padding-x: var(--sk-button-padding-base);
+        --sk-button-current-font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-md));
+        --sk-button-current-cut-size: calc(var(--sk-button-current-height) / var(--sk-button-radius-factor));
+    }
+
+    &.sk-xs,
+    &.sk-size-xs
     {
         --sk-button-current-height: calc(var(--sk-button-height-base) * var(--sk-button-scale-xs));
         --sk-button-current-padding-x: var(--sk-button-padding-xs);
@@ -452,7 +462,8 @@
         --sk-button-current-cut-size: calc(var(--sk-button-current-height) / var(--sk-button-radius-factor));
     }
 
-    &.sk-sm
+    &.sk-sm,
+    &.sk-size-sm
     {
         --sk-button-current-height: calc(var(--sk-button-height-base) * var(--sk-button-scale-sm));
         --sk-button-current-padding-x: var(--sk-button-padding-base);
@@ -460,7 +471,8 @@
         --sk-button-current-cut-size: calc(var(--sk-button-current-height) / var(--sk-button-radius-factor));
     }
 
-    &.sk-md
+    &.sk-md,
+    &.sk-size-md
     {
         --sk-button-current-height: calc(var(--sk-button-height-base) * var(--sk-button-scale-md));
         --sk-button-current-padding-x: var(--sk-button-padding-base);
@@ -468,7 +480,8 @@
         --sk-button-current-cut-size: calc(var(--sk-button-current-height) / var(--sk-button-radius-factor));
     }
 
-    &.sk-lg
+    &.sk-lg,
+    &.sk-size-lg
     {
         --sk-button-current-height: calc(var(--sk-button-height-base) * var(--sk-button-scale-lg));
         --sk-button-current-padding-x: var(--sk-button-padding-base);
@@ -476,7 +489,8 @@
         --sk-button-current-cut-size: calc(var(--sk-button-current-height) / var(--sk-button-radius-factor));
     }
 
-    &.sk-xl
+    &.sk-xl,
+    &.sk-size-xl
     {
         --sk-button-current-height: calc(var(--sk-button-height-base) * var(--sk-button-scale-xl));
         --sk-button-current-padding-x: var(--sk-button-padding-xl);
@@ -727,6 +741,45 @@
             font-size: 1.25em;
         }
     }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Defaults-when-absent: variant — solid when no explicit variant class present
+    //------------------------------------------------------------------------------------------------------------------
+
+    &:where(:not(.sk-solid):not(.sk-outline):not(.sk-subtle):not(.sk-ghost):not(.sk-link))
+    {
+        @each $kind in $kinds
+        {
+            @include button-solid-kind($kind);
+        }
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Defaults-when-absent: kind — neutral when no explicit kind class is present.
+// Can't use [class*="sk-"] because every Sleekspace class starts with "sk-".
+// Instead build an explicit :not() chain for all kinds from $kinds, wrapped in :where() so any
+// explicit kind class wins (zero specificity).
+//----------------------------------------------------------------------------------------------------------------------
+
+$_button-kind-not: '';
+@each $kind in $kinds
+{
+    $_button-kind-not: $_button-kind-not + ':not(.sk-' + $kind + ')';
+}
+
+.sk-button:where(#{ $_button-kind-not })
+{
+    --sk-button-color-base: var(--sk-neutral-base);
+    --sk-button-text: var(--sk-neutral-text);
+    --sk-kind-color: var(--sk-neutral-base);
+    --sk-button-border-color: var(--sk-button-border-base);
+
+    .sk-button-chrome
+    {
+        background-color: var(--sk-button-bg);
+        color: var(--sk-button-text);
+    }
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_card.scss

@@ -3,12 +3,14 @@
 //----------------------------------------------------------------------------------------------------------------------
 
 @use '../theme/variables' as *;
+@use '../mixins/dual-selector' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
 // Card Design Tokens
 //----------------------------------------------------------------------------------------------------------------------
 
-.sk-card
+.sk-card,
+sk-card
 {
     /// Padding for card sections
     --sk-card-padding: 1rem;
@@ -111,7 +113,12 @@
         min-height: 0; // Allow flex item to shrink below content size for scrolling
 
         // Scrollable content uses .sk-panel-scroll-content class from panel
-        // which provides overflow, margin-bottom, and scrollbar styling
+        // which provides overflow, margin-bottom, and scrollbar styling.
+        // Drop the bottom padding so the scroll fade can meet the footer/edge cleanly.
+        &.sk-panel-scroll-content
+        {
+            padding-bottom: 0;
+        }
     }
 
     //------------------------------------------------------------------------------------------------------------------
@@ -175,3 +182,58 @@
 }
 
 //----------------------------------------------------------------------------------------------------------------------
+// Kind Variants
+//----------------------------------------------------------------------------------------------------------------------
+// Card inherits its color system from Panel (it renders AS a panel). These selectors exist to
+// support the Layer 2 custom-element API (`<sk-card kind="primary">`) and ensure kind-specific
+// panel tokens are set when the card element carries the kind attribute directly.
+
+@each $kind in $kinds
+{
+    @include kind-variant('card', $kind)
+    {
+        --sk-panel-color-base: var(--sk-#{ $kind }-base);
+        --sk-panel-fg: var(--sk-#{ $kind }-text);
+        --sk-kind-color: var(--sk-#{ $kind }-base);
+        --sk-panel-border-color: var(--sk-panel-border-base);
+        background-color: var(--sk-panel-bg);
+        color: var(--sk-panel-fg);
+        box-shadow: var(--sk-panel-glow);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Defaults When Absent
+//----------------------------------------------------------------------------------------------------------------------
+
+// Default kind: neutral — zero-specificity :not() chain so any explicit kind class wins.
+$_card-kind-not: '';
+@each $kind in $kinds
+{
+    $_card-kind-not: $_card-kind-not + ':not(.sk-' + $kind + ')';
+}
+
+.sk-card:where(#{ $_card-kind-not })
+{
+    --sk-panel-color-base: var(--sk-neutral-base);
+    --sk-panel-fg: var(--sk-neutral-text);
+    --sk-kind-color: var(--sk-neutral-base);
+    --sk-panel-border-color: var(--sk-panel-border-base);
+    background-color: var(--sk-panel-bg);
+    color: var(--sk-panel-fg);
+    box-shadow: var(--sk-panel-glow);
+}
+
+// Default kind for custom-element API — fires when <sk-card> has no kind attribute.
+@include defaults-when-no-attr('card', 'kind')
+{
+    --sk-panel-color-base: var(--sk-neutral-base);
+    --sk-panel-fg: var(--sk-neutral-text);
+    --sk-kind-color: var(--sk-neutral-base);
+    --sk-panel-border-color: var(--sk-panel-border-base);
+    background-color: var(--sk-panel-bg);
+    color: var(--sk-panel-fg);
+    box-shadow: var(--sk-panel-glow);
+}
+
+//----------------------------------------------------------------------------------------------------------------------