@skewedaspect/sleekspace-ui 0.8.1 → 0.9.0

package/src/styles/components/_panel.scss

@@ -3,12 +3,14 @@
 //----------------------------------------------------------------------------------------------------------------------
 
 @use '../theme/variables' as *;
+@use '../mixins/dual-selector' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
 // Panel Design Tokens
 //----------------------------------------------------------------------------------------------------------------------
 
-.sk-panel
+.sk-panel,
+sk-panel
 {
     //------------------------------------------------------------------------------------------------------------------
     // Dimension Tokens
@@ -91,38 +93,12 @@
     --sk-panel-glow: inset 0 0 var(--sk-panel-glow-size) oklch(from var(--sk-panel-color-base) l c h / var(--sk-panel-glow-opacity));
 }
 
-//----------------------------------------------------------------------------------------------------------------------
-// Kind Mixin
-//----------------------------------------------------------------------------------------------------------------------
-
-@mixin panel-kind($kind)
-{
-    &.sk-#{ "" + $kind }
-    {
-        // Override base color tokens for this kind
-        --sk-panel-color-base: var(--sk-#{ $kind }-base);
-        --sk-panel-fg: var(--sk-#{ $kind }-text);
-
-        // Set generic kind color for list markers and other cross-component features
-        --sk-kind-color: var(--sk-#{ $kind }-base);
-
-        // Set dynamic border color
-        --sk-panel-border-color: var(--sk-panel-border-base);
-
-        // Use calculated background and foreground
-        background-color: var(--sk-panel-bg);
-        color: var(--sk-panel-fg);
-
-        // Apply inner glow (works in both modern and fallback browsers)
-        box-shadow: var(--sk-panel-glow);
-    }
-}
-
 //----------------------------------------------------------------------------------------------------------------------
 // Base Panel Styles
 //----------------------------------------------------------------------------------------------------------------------
 
-.sk-panel
+.sk-panel,
+sk-panel
 {
     // Base structure
     display: block;
@@ -146,15 +122,6 @@
         color: var(--sk-kind-color, var(--sk-panel-color-base));
     }
 
-    //------------------------------------------------------------------------------------------------------------------
-    // Corner toggle classes
-    //------------------------------------------------------------------------------------------------------------------
-
-    &.sk-cut-top-left     { --sk-panel-cut-tl: var(--sk-panel-cut-size); }
-    &.sk-cut-top-right    { --sk-panel-cut-tr: var(--sk-panel-cut-size); }
-    &.sk-cut-bottom-right { --sk-panel-cut-br: var(--sk-panel-cut-size); }
-    &.sk-cut-bottom-left  { --sk-panel-cut-bl: var(--sk-panel-cut-size); }
-
     //------------------------------------------------------------------------------------------------------------------
     // Beveled corners (modern path)
     //------------------------------------------------------------------------------------------------------------------
@@ -228,7 +195,7 @@
     }
 
     //------------------------------------------------------------------------------------------------------------------
-    // Corner decoration line
+    // Corner decoration line (base element)
     //------------------------------------------------------------------------------------------------------------------
 
     &::after
@@ -243,84 +210,6 @@
         pointer-events: none;
     }
 
-    // Bottom-right decoration (default)
-    &.sk-decoration-bottom-right::after
-    {
-        right: var(--sk-panel-decoration-offset);
-        bottom: calc(var(--sk-panel-cut-size) / 2 + var(--sk-panel-decoration-offset) - 1px);
-        transform: rotate(135deg);
-    }
-
-    // Top-left decoration (same diagonal as bottom-right)
-    &.sk-decoration-top-left::after
-    {
-        left: var(--sk-panel-decoration-offset);
-        top: calc(var(--sk-panel-cut-size) / 2 + var(--sk-panel-decoration-offset) - 1px);
-        transform: rotate(135deg);
-    }
-
-    // Top-right decoration
-    &.sk-decoration-top-right::after
-    {
-        right: var(--sk-panel-decoration-offset);
-        top: calc(var(--sk-panel-cut-size) / 2 + var(--sk-panel-decoration-offset) - 1px);
-        transform: rotate(45deg);
-    }
-
-    // Bottom-left decoration
-    &.sk-decoration-bottom-left::after
-    {
-        left: var(--sk-panel-decoration-offset);
-        bottom: calc(var(--sk-panel-cut-size) / 2 + var(--sk-panel-decoration-offset) - 1px);
-        transform: rotate(45deg);
-    }
-
-    //------------------------------------------------------------------------------------------------------------------
-    // Size variants (only affects cut size, not padding or dimensions)
-    //------------------------------------------------------------------------------------------------------------------
-
-    &.sk-xs
-    {
-        --sk-panel-cut-size: calc(var(--sk-panel-min-height) * 0.5 / var(--sk-panel-radius-factor));
-    }
-
-    &.sk-sm
-    {
-        --sk-panel-cut-size: calc(var(--sk-panel-min-height) * 0.75 / var(--sk-panel-radius-factor));
-    }
-
-    &.sk-md
-    {
-        --sk-panel-cut-size: calc(var(--sk-panel-min-height) * 1.0 / var(--sk-panel-radius-factor));
-    }
-
-    &.sk-lg
-    {
-        --sk-panel-cut-size: calc(var(--sk-panel-min-height) * 1.5 / var(--sk-panel-radius-factor));
-    }
-
-    &.sk-xl
-    {
-        --sk-panel-cut-size: calc(var(--sk-panel-min-height) * 2.0 / var(--sk-panel-radius-factor));
-    }
-
-    //------------------------------------------------------------------------------------------------------------------
-    // No Border variant
-    //------------------------------------------------------------------------------------------------------------------
-
-    &.sk-no-border
-    {
-        // Remove border and glow but keep the bevel shape
-        --sk-panel-border-width: 0;
-        box-shadow: none;
-
-        // Remove the decoration as well
-        &::after
-        {
-            display: none;
-        }
-    }
-
     //------------------------------------------------------------------------------------------------------------------
     // Scrollable Panel Support
     //------------------------------------------------------------------------------------------------------------------
@@ -378,14 +267,271 @@
             );
         }
     }
+}
 
-    //------------------------------------------------------------------------------------------------------------------
-    // Kind variants
-    //------------------------------------------------------------------------------------------------------------------
+//----------------------------------------------------------------------------------------------------------------------
+// Kind Variants
+//----------------------------------------------------------------------------------------------------------------------
 
-    @each $kind in $kinds
+@each $kind in $kinds
+{
+    @include kind-variant('panel', $kind)
     {
-        @include panel-kind($kind);
+        // Override base color tokens for this kind
+        --sk-panel-color-base: var(--sk-#{ $kind }-base);
+        --sk-panel-fg: var(--sk-#{ $kind }-text);
+
+        // Set generic kind color for list markers and other cross-component features
+        --sk-kind-color: var(--sk-#{ $kind }-base);
+
+        // Set dynamic border color
+        --sk-panel-border-color: var(--sk-panel-border-base);
+
+        // Use calculated background and foreground
+        background-color: var(--sk-panel-bg);
+        color: var(--sk-panel-fg);
+
+        // Apply inner glow (works in both modern and fallback browsers)
+        box-shadow: var(--sk-panel-glow);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Size Variants
+//----------------------------------------------------------------------------------------------------------------------
+// Each size emits three selectors via size-variant: .sk-panel.sk-<size>, .sk-panel.sk-size-<size>,
+// and sk-panel[size="<size>"]. The sk-size-* prefixed form is what defaults-when-absent keys on.
+
+$_panel-size-factors: (
+    xs: 0.5,
+    sm: 0.75,
+    md: 1.0,
+    lg: 1.5,
+    xl: 2.0,
+);
+
+@each $size, $factor in $_panel-size-factors
+{
+    @include size-variant('panel', $size)
+    {
+        --sk-panel-cut-size: calc(var(--sk-panel-min-height) * #{ $factor } / var(--sk-panel-radius-factor));
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Corner Cut Modifiers
+//----------------------------------------------------------------------------------------------------------------------
+
+@include list-modifier('panel', 'cut', 'top-left', 'corners')
+{
+    --sk-panel-cut-tl: var(--sk-panel-cut-size);
+}
+
+@include list-modifier('panel', 'cut', 'top-right', 'corners')
+{
+    --sk-panel-cut-tr: var(--sk-panel-cut-size);
+}
+
+@include list-modifier('panel', 'cut', 'bottom-right', 'corners')
+{
+    --sk-panel-cut-br: var(--sk-panel-cut-size);
+}
+
+@include list-modifier('panel', 'cut', 'bottom-left', 'corners')
+{
+    --sk-panel-cut-bl: var(--sk-panel-cut-size);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Decoration Corner Modifiers
+//----------------------------------------------------------------------------------------------------------------------
+
+@include single-choice-modifier('panel', 'decoration', 'bottom-right', 'decoration-corner')
+{
+    &::after
+    {
+        right: var(--sk-panel-decoration-offset);
+        bottom: calc(var(--sk-panel-cut-size) / 2 + var(--sk-panel-decoration-offset) - 1px);
+        transform: rotate(135deg);
+    }
+}
+
+@include single-choice-modifier('panel', 'decoration', 'top-left', 'decoration-corner')
+{
+    &::after
+    {
+        left: var(--sk-panel-decoration-offset);
+        top: calc(var(--sk-panel-cut-size) / 2 + var(--sk-panel-decoration-offset) - 1px);
+        transform: rotate(135deg);
+    }
+}
+
+@include single-choice-modifier('panel', 'decoration', 'top-right', 'decoration-corner')
+{
+    &::after
+    {
+        right: var(--sk-panel-decoration-offset);
+        top: calc(var(--sk-panel-cut-size) / 2 + var(--sk-panel-decoration-offset) - 1px);
+        transform: rotate(45deg);
+    }
+}
+
+@include single-choice-modifier('panel', 'decoration', 'bottom-left', 'decoration-corner')
+{
+    &::after
+    {
+        left: var(--sk-panel-decoration-offset);
+        bottom: calc(var(--sk-panel-cut-size) / 2 + var(--sk-panel-decoration-offset) - 1px);
+        transform: rotate(45deg);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// No Border Modifier
+//----------------------------------------------------------------------------------------------------------------------
+
+@include bool-modifier('panel', 'no-border')
+{
+    // Remove border and glow but keep the bevel shape
+    --sk-panel-border-width: 0;
+    box-shadow: none;
+
+    // Remove the decoration as well
+    &::after
+    {
+        display: none;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// No Decoration Modifier
+//----------------------------------------------------------------------------------------------------------------------
+
+@include bool-modifier('panel', 'no-decoration')
+{
+    &::after
+    {
+        display: none;
+    }
+}
+
+// Per-corner fallback: hide decoration automatically when the targeted corner isn't cut.
+// This is the pure-CSS equivalent of the `decorationCorner not in corners` check in SkPanel.vue.
+
+.sk-panel.sk-decoration-bottom-right:not(.sk-cut-bottom-right)::after,
+sk-panel[decoration-corner="bottom-right"]:not([corners~="bottom-right"])::after
+{
+    display: none;
+}
+
+.sk-panel.sk-decoration-top-left:not(.sk-cut-top-left)::after,
+sk-panel[decoration-corner="top-left"]:not([corners~="top-left"])::after
+{
+    display: none;
+}
+
+.sk-panel.sk-decoration-top-right:not(.sk-cut-top-right)::after,
+sk-panel[decoration-corner="top-right"]:not([corners~="top-right"])::after
+{
+    display: none;
+}
+
+.sk-panel.sk-decoration-bottom-left:not(.sk-cut-bottom-left)::after,
+sk-panel[decoration-corner="bottom-left"]:not([corners~="bottom-left"])::after
+{
+    display: none;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Defaults When Absent
+//----------------------------------------------------------------------------------------------------------------------
+
+// Default size: md — fires when no sk-size-* class is present (zero specificity via :where).
+// Note: Vue emits sk-md (bare), which also matches .sk-panel.sk-md (higher specificity) — so
+// explicit size rules always win. This default only affects bare `.sk-panel` with no size class.
+// Default cut size = md factor (1.0). Keep in sync with $_panel-size-factors's md entry.
+@include defaults-when-absent('panel', 'sk-size-')
+{
+    --sk-panel-cut-size: calc(var(--sk-panel-min-height) * 1.0 / var(--sk-panel-radius-factor));
+}
+
+// Default kind: neutral — can't use [class*="sk-"] because every Sleekspace class starts with
+// "sk-". Instead we build an explicit :not() chain for all kinds from $kinds, wrapped in
+// :where() for zero specificity so any explicit kind class wins.
+$_panel-kind-not: '';
+@each $kind in $kinds
+{
+    $_panel-kind-not: $_panel-kind-not + ':not(.sk-' + $kind + ')';
+}
+
+.sk-panel:where(#{ $_panel-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 cut: bottom-right — fires when no sk-cut-* class is present.
+@include defaults-when-absent('panel', 'sk-cut-')
+{
+    --sk-panel-cut-br: var(--sk-panel-cut-size);
+}
+
+// Default decoration corner = bottom-right. Keep in sync with the bottom-right
+// single-choice-modifier block above.
+@include defaults-when-absent('panel', 'sk-decoration-')
+{
+    &::after
+    {
+        right: var(--sk-panel-decoration-offset);
+        bottom: calc(var(--sk-panel-cut-size) / 2 + var(--sk-panel-decoration-offset) - 1px);
+        transform: rotate(135deg);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Custom-Element API Defaults (attribute-absence path)
+//----------------------------------------------------------------------------------------------------------------------
+// Parallel defaults for <sk-panel> (no class API). Zero-specificity via :where() so any
+// explicit attribute value wins. These mirror the class-API defaults above, but key on
+// the absence of the HTML attribute rather than the absence of a class prefix.
+
+// Default kind: neutral — fires when <sk-panel> has no kind attribute.
+@include defaults-when-no-attr('panel', '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);
+}
+
+// Default size: md — fires when <sk-panel> has no size attribute.
+@include defaults-when-no-attr('panel', 'size')
+{
+    --sk-panel-cut-size: calc(var(--sk-panel-min-height) * 1.0 / var(--sk-panel-radius-factor));
+}
+
+// Default cut: bottom-right — fires when <sk-panel> has no corners attribute.
+@include defaults-when-no-attr('panel', 'corners')
+{
+    --sk-panel-cut-br: var(--sk-panel-cut-size);
+}
+
+// Default decoration corner: bottom-right — fires when <sk-panel> has no decoration-corner attribute.
+@include defaults-when-no-attr('panel', 'decoration-corner')
+{
+    &::after
+    {
+        right: var(--sk-panel-decoration-offset);
+        bottom: calc(var(--sk-panel-cut-size) / 2 + var(--sk-panel-decoration-offset) - 1px);
+        transform: rotate(135deg);
     }
 }