@skewedaspect/sleekspace-ui 0.8.1 → 0.9.0

package/src/styles/components/_toolbar.scss

@@ -2,30 +2,15 @@
 // Toolbar Component Styles
 //----------------------------------------------------------------------------------------------------------------------
 
-@use '@/styles/mixins/cut-border' as *;
-
-$kinds: (neutral, primary, accent, info, success, warning, danger);
-
-//----------------------------------------------------------------------------------------------------------------------
-// Kind Mixin
-//----------------------------------------------------------------------------------------------------------------------
-
-@mixin toolbar-kind($kind)
-{
-    &.sk-#{ '' + $kind }
-    {
-        --sk-toolbar-color-base: var(--sk-#{ $kind }-base);
-        --sk-toolbar-fg: var(--sk-#{ $kind }-text);
-        --sk-toolbar-hover: var(--sk-#{ $kind }-hover);
-        --sk-toolbar-active: var(--sk-#{ $kind }-active);
-    }
-}
+@use '../theme/variables' as *;
+@use '../mixins' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
 // Toolbar Root
 //----------------------------------------------------------------------------------------------------------------------
 
-.sk-toolbar
+.sk-toolbar,
+sk-toolbar
 {
     --sk-toolbar-color-base: var(--sk-neutral-base);
     --sk-toolbar-fg: var(--sk-neutral-text);
@@ -50,11 +35,6 @@ $kinds: (neutral, primary, accent, info, success, warning, danger);
     background: oklch(from var(--sk-toolbar-color-base) l c h / 0.08);
     position: relative;
 
-    &.sk-vertical
-    {
-        flex-direction: column;
-    }
-
     //------------------------------------------------------------------------------------------------------------------
     // Corner Toggle Classes
     //------------------------------------------------------------------------------------------------------------------
@@ -134,17 +114,81 @@ $kinds: (neutral, primary, accent, info, success, warning, danger);
             );
         }
     }
+}
 
-    //------------------------------------------------------------------------------------------------------------------
-    // Kind Variants
-    //------------------------------------------------------------------------------------------------------------------
+//----------------------------------------------------------------------------------------------------------------------
+// Kind Variants
+//----------------------------------------------------------------------------------------------------------------------
 
-    @each $kind in $kinds
+@each $kind in $kinds
+{
+    @include kind-variant('toolbar', $kind)
     {
-        @include toolbar-kind($kind);
+        --sk-toolbar-color-base: var(--sk-#{ $kind }-base);
+        --sk-toolbar-fg: var(--sk-#{ $kind }-text);
+        --sk-toolbar-hover: var(--sk-#{ $kind }-hover);
+        --sk-toolbar-active: var(--sk-#{ $kind }-active);
     }
 }
 
+//----------------------------------------------------------------------------------------------------------------------
+// Orientation Modifier
+//----------------------------------------------------------------------------------------------------------------------
+
+@include single-choice-modifier('toolbar', 'orientation', 'vertical')
+{
+    flex-direction: column;
+}
+
+@include single-choice-modifier('toolbar', 'orientation', 'horizontal')
+{
+    flex-direction: row;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Defaults When Absent
+//----------------------------------------------------------------------------------------------------------------------
+
+// Default kind: neutral — explicit :not() chain for zero-specificity default.
+$_toolbar-kind-not: '';
+@each $kind in $kinds
+{
+    $_toolbar-kind-not: $_toolbar-kind-not + ':not(.sk-' + $kind + ')';
+}
+
+.sk-toolbar:where(#{ $_toolbar-kind-not })
+{
+    --sk-toolbar-color-base: var(--sk-neutral-base);
+    --sk-toolbar-fg: var(--sk-neutral-text);
+    --sk-toolbar-hover: var(--sk-neutral-hover);
+    --sk-toolbar-active: var(--sk-neutral-active);
+}
+
+// Default orientation: horizontal — fires when no sk-orientation-* class is present.
+@include defaults-when-absent('toolbar', 'sk-orientation-')
+{
+    flex-direction: row;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Custom-Element API Defaults (attribute-absence path)
+//----------------------------------------------------------------------------------------------------------------------
+
+// Default kind: neutral — fires when <sk-toolbar> has no kind attribute.
+@include defaults-when-no-attr('toolbar', 'kind')
+{
+    --sk-toolbar-color-base: var(--sk-neutral-base);
+    --sk-toolbar-fg: var(--sk-neutral-text);
+    --sk-toolbar-hover: var(--sk-neutral-hover);
+    --sk-toolbar-active: var(--sk-neutral-active);
+}
+
+// Default orientation: horizontal — fires when <sk-toolbar> has no orientation attribute.
+@include defaults-when-no-attr('toolbar', 'orientation')
+{
+    flex-direction: row;
+}
+
 //----------------------------------------------------------------------------------------------------------------------
 // Toolbar Button
 //----------------------------------------------------------------------------------------------------------------------
@@ -280,19 +324,29 @@ $kinds: (neutral, primary, accent, info, success, warning, danger);
 {
     background: oklch(from var(--sk-toolbar-color-base) l c h / 0.2);
 
-    .sk-toolbar.sk-horizontal > &
+    .sk-toolbar.sk-orientation-horizontal > &,
+    sk-toolbar[orientation=horizontal] > &
     {
         width: 1px;
         align-self: stretch;
         margin: var(--sk-space-xs) var(--sk-space-xxs);
     }
 
-    .sk-toolbar.sk-vertical > &
+    .sk-toolbar.sk-orientation-vertical > &,
+    sk-toolbar[orientation=vertical] > &
     {
         height: 1px;
         align-self: stretch;
         margin: var(--sk-space-xxs) var(--sk-space-xs);
     }
+
+    // Default: horizontal (no orientation class/attribute)
+    .sk-toolbar:where(:not([class*="sk-orientation-"])) > &
+    {
+        width: 1px;
+        align-self: stretch;
+        margin: var(--sk-space-xs) var(--sk-space-xxs);
+    }
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_tooltip.scss

@@ -1,5 +1,166 @@
-@use '@/styles/mixins/cut-border' as *;
-@use '@/styles/mixins/responsive' as *;
+//----------------------------------------------------------------------------------------------------------------------
+// Tooltip Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+@use '../theme/variables' as *;
+@use '../mixins' as *;
+
+//----------------------------------------------------------------------------------------------------------------------
+// Tooltip Design Tokens
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-tooltip,
+sk-tooltip
+{
+    // Color tokens
+    --sk-tooltip-color-base: var(--sk-neutral-base);
+    --sk-tooltip-border-color: transparent;
+
+    // Calculate darkened background like buttons (ghost hover state)
+    --sk-tooltip-bg: color-mix(
+        in oklch,
+        color-mix(in oklch, var(--sk-tooltip-color-base) 75%, transparent 25%),
+        #000 46.25%
+    );
+
+    // Calculate hover-like background
+    --sk-tooltip-bg-hover: color-mix(in oklch, var(--sk-tooltip-bg) 85%, white 15%);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Tooltip Root
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-tooltip,
+sk-tooltip
+{
+    // Cut corners (border controlled by variant)
+    @include cut-border(
+        var(--sk-radius-md),
+        var(--sk-border-width-thin),
+        var(--sk-tooltip-border-color),
+        (top-left top-right bottom-left bottom-right)
+    );
+
+    position: relative;
+    padding: calc(var(--sk-space-md) / 4 + 2px) calc(var(--sk-space-lg) / 4 + 4px);
+    font-size: 0.875rem;
+    line-height: 1.4;
+
+    background: oklch(from var(--sk-tooltip-bg-hover) calc(l * 0.9) c h / 0.95);
+    color: var(--sk-neutral-text);
+    box-shadow:
+        var(--sk-shadow-md),
+        0 0 8px oklch(from var(--sk-tooltip-color-base) l c h / 0.4);
+
+    max-width: 20rem;
+    z-index: var(--sk-z-tooltip);
+
+    // Content animation
+    &[data-state='delayed-open'],
+    &[data-state='instant-open']
+    {
+        animation: sk-tooltip-show var(--sk-transition-duration-fast) ease-out;
+    }
+
+    &[data-state='closed']
+    {
+        animation: sk-tooltip-hide var(--sk-transition-duration-fast) ease-in;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Kind Variants
+//----------------------------------------------------------------------------------------------------------------------
+
+@each $kind in $kinds
+{
+    @include kind-variant('tooltip', $kind)
+    {
+        --sk-tooltip-color-base: var(--sk-#{ $kind }-base);
+        color: var(--sk-#{ $kind }-text);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Variant Variants (solid / outline)
+//----------------------------------------------------------------------------------------------------------------------
+
+@include variant-variant('tooltip', 'solid')
+{
+    // Solid variant is the default — darkened background
+    background: oklch(from var(--sk-tooltip-bg-hover) calc(l * 0.9) c h / 0.95);
+}
+
+@include variant-variant('tooltip', 'outline')
+{
+    // Border uses the color-base variable (works with custom colors)
+    --sk-tooltip-border-color: var(--sk-tooltip-color-base);
+
+    background: oklch(0 0 0 / 0.9);
+    box-shadow:
+        var(--sk-shadow-md),
+        inset 0 0 20px oklch(from var(--sk-tooltip-color-base) l c h / 0.5),
+        0 0 8px oklch(from var(--sk-tooltip-color-base) l c h / 0.4);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Placement Modifiers (single-choice — naive CSS positioning)
+//----------------------------------------------------------------------------------------------------------------------
+
+@include single-choice-modifier('tooltip', 'placement', 'top', 'placement')
+{
+    // Placement is handled by the positioning library (Floating UI / Radix).
+    // This modifier exists so pure-CSS consumers can hint positioning.
+    transform-origin: bottom center;
+}
+
+@include single-choice-modifier('tooltip', 'placement', 'bottom', 'placement')
+{
+    transform-origin: top center;
+}
+
+@include single-choice-modifier('tooltip', 'placement', 'left', 'placement')
+{
+    transform-origin: right center;
+}
+
+@include single-choice-modifier('tooltip', 'placement', 'right', 'placement')
+{
+    transform-origin: left center;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Defaults When Absent
+//----------------------------------------------------------------------------------------------------------------------
+
+// Default kind: neutral
+$_tooltip-kind-not: '';
+@each $kind in $kinds
+{
+    $_tooltip-kind-not: $_tooltip-kind-not + ':not(.sk-' + $kind + ')';
+}
+
+.sk-tooltip:where(#{ $_tooltip-kind-not })
+{
+    --sk-tooltip-color-base: var(--sk-neutral-base);
+    color: var(--sk-neutral-text);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Custom-Element API Defaults (attribute-absence path)
+//----------------------------------------------------------------------------------------------------------------------
+
+// Default kind: neutral
+@include defaults-when-no-attr('tooltip', 'kind')
+{
+    --sk-tooltip-color-base: var(--sk-neutral-base);
+    color: var(--sk-neutral-text);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Tooltip Content (legacy class — kept for Radix/Floating UI compatibility)
+//----------------------------------------------------------------------------------------------------------------------
 
 .sk-tooltip-content
 {
@@ -153,6 +314,8 @@
     }
 }
 
+//----------------------------------------------------------------------------------------------------------------------
+
 .sk-tooltip-arrow
 {
     // Solid variant - match the background
@@ -175,7 +338,10 @@
     margin: 0;
 }
 
+//----------------------------------------------------------------------------------------------------------------------
 // Animations
+//----------------------------------------------------------------------------------------------------------------------
+
 @keyframes sk-tooltip-show
 {
     from
@@ -212,8 +378,11 @@
 
 @include reduced-motion
 {
-    .sk-tooltip-content[data-state]
+    .sk-tooltip-content[data-state],
+    .sk-tooltip[data-state]
     {
         animation: none;
     }
 }
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/mixins/_cut-border.scss

@@ -35,16 +35,30 @@
     $cut-bottom-right: list.index($corners, bottom-right) != null;
     $cut-bottom-left: list.index($corners, bottom-left) != null;
 
+    // Resolve per-corner radii up front — Sass's `if()` function is deprecated, so use `@if`/`@else` and
+    // pass the results through as property values.
+    $top-left-radius: 0;
+    @if $cut-top-left { $top-left-radius: $cut; }
+
+    $top-right-radius: 0;
+    @if $cut-top-right { $top-right-radius: $cut; }
+
+    $bottom-right-radius: 0;
+    @if $cut-bottom-right { $bottom-right-radius: $cut; }
+
+    $bottom-left-radius: 0;
+    @if $cut-bottom-left { $bottom-left-radius: $cut; }
+
     // Modern browsers with corner-shape support
     @supports (corner-shape: bevel)
     {
         border: $border-width solid $border-color;
 
         // Apply border-radius only to specified corners
-        border-top-left-radius: if($cut-top-left, $cut, 0);
-        border-top-right-radius: if($cut-top-right, $cut, 0);
-        border-bottom-right-radius: if($cut-bottom-right, $cut, 0);
-        border-bottom-left-radius: if($cut-bottom-left, $cut, 0);
+        border-top-left-radius: $top-left-radius;
+        border-top-right-radius: $top-right-radius;
+        border-bottom-right-radius: $bottom-right-radius;
+        border-bottom-left-radius: $bottom-left-radius;
 
         corner-shape: bevel;
     }

package/src/styles/mixins/_dual-selector.scss

@@ -0,0 +1,192 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Dual-Selector Mixins
+//
+// Emit class-form + attribute-form selector pairs so components can be authored as
+// `<div class="sk-foo sk-primary">` (Layer 1 class API) or `<sk-foo kind="primary">` (Layer 2
+// custom-element API) with the same compiled rules.
+//
+// Also provides the `defaults-when-absent` helper, which applies a default modifier's rules
+// via `:where(:not([class*="prefix-"]))` — zero-specificity so any explicit class wins — for
+// Bootstrap-style ergonomics where `<div class="sk-foo">` alone renders the default look.
+//----------------------------------------------------------------------------------------------------------------------
+
+//----------------------------------------------------------------------------------------------------------------------
+// Private Helpers
+//----------------------------------------------------------------------------------------------------------------------
+
+// _attr-variant — shared core for kind-variant / size-variant / variant-variant.
+// Emits `.sk-<component>.sk-<value>` and `sk-<component>[<attr>="<value>"]`.
+// Force string coercion via `"" + $value` to suppress CSS color-name interpolation warnings
+// (Sass warns when `yellow` or `red` appear in interpolation as color values, not strings).
+@mixin _attr-variant($component, $attr, $value)
+{
+    $v: "" + $value;
+    .sk-#{ $component }.sk-#{ $v },
+    sk-#{ $component }[#{ $attr }="#{ $v }"]
+    {
+        @content;
+    }
+}
+
+// _attr-valued-modifier — shared core for list-modifier / single-choice-modifier.
+// $operator is the CSS attribute selector operator: '~=' for space-lists, '=' for exclusive.
+// Force string coercion via `"" + $value` to suppress CSS color-name interpolation warnings
+// (Sass warns when `yellow` or `red` appear in interpolation as color values, not strings).
+@mixin _attr-valued-modifier($component, $family, $value, $attr, $operator)
+{
+    $v: "" + $value;
+    $attribute: $family;
+    @if $attr != null { $attribute: $attr; }
+
+    .sk-#{ $component }.sk-#{ $family }-#{ $v },
+    sk-#{ $component }[#{ $attribute }#{ $operator }"#{ $v }"]
+    {
+        @content;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// kind-variant
+//
+// Delegates to `_attr-variant` with attr = 'kind'.
+// Emits `.sk-<component>.sk-<kind>` and `sk-<component>[kind="<kind>"]`.
+//----------------------------------------------------------------------------------------------------------------------
+
+@mixin kind-variant($component, $kind)
+{
+    @include _attr-variant($component, 'kind', $kind)
+    {
+        @content;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// size-variant
+//
+// Delegates to `_attr-variant` with attr = 'size', and additionally emits the `sk-size-<size>`
+// prefixed class. The prefixed form is what `defaults-when-absent` keys on via `[class*="sk-size-"]`
+// — a plain `[class*="sk-"]` would match every class in the library, so sizes need their own
+// distinct prefix.
+//
+// Emits:
+//   .sk-<component>.sk-<size>,
+//   .sk-<component>.sk-size-<size>,
+//   sk-<component>[size="<size>"]
+//----------------------------------------------------------------------------------------------------------------------
+
+@mixin size-variant($component, $size)
+{
+    .sk-#{ $component }.sk-#{ $size },
+    .sk-#{ $component }.sk-size-#{ $size },
+    sk-#{ $component }[size="#{ $size }"]
+    {
+        @content;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// variant-variant
+//
+// Delegates to `_attr-variant` with attr = 'variant'.
+// Emits `.sk-<component>.sk-<variant>` and `sk-<component>[variant="<variant>"]`.
+//----------------------------------------------------------------------------------------------------------------------
+
+@mixin variant-variant($component, $variant)
+{
+    @include _attr-variant($component, 'variant', $variant)
+    {
+        @content;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// bool-modifier
+//
+// Emit `.sk-<component>.sk-<modifier>` and `sk-<component>[<modifier>]` (attribute presence).
+// Use for booleans like `no-border`, `no-decoration`, `dense`, `animated`.
+//----------------------------------------------------------------------------------------------------------------------
+
+@mixin bool-modifier($component, $modifier)
+{
+    .sk-#{ $component }.sk-#{ $modifier },
+    sk-#{ $component }[#{ $modifier }]
+    {
+        @content;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// list-modifier
+//
+// Emit `.sk-<component>.sk-<family>-<value>` and `sk-<component>[<attr>~="<value>"]` for a
+// single value of a space-separated list attribute. Use for `corners` (top-left, top-right, ...)
+// or other multi-value families. Pass `$attr` when the HTML attribute name differs from `$family`.
+//
+// Example: @include list-modifier('panel', 'cut', 'top-left', 'corners') { ... }
+//   →  .sk-panel.sk-cut-top-left, sk-panel[corners~="top-left"] { ... }
+//----------------------------------------------------------------------------------------------------------------------
+
+@mixin list-modifier($component, $family, $value, $attr: null)
+{
+    @include _attr-valued-modifier($component, $family, $value, $attr, '~=')
+    {
+        @content;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// single-choice-modifier
+//
+// Emit `.sk-<component>.sk-<family>-<value>` and `sk-<component>[<attr>="<value>"]` for a
+// single value of an exclusive attribute. Use for `decoration-corner`, `orientation`, etc.
+// Pass `$attr` when the HTML attribute name differs from `$family`.
+//----------------------------------------------------------------------------------------------------------------------
+
+@mixin single-choice-modifier($component, $family, $value, $attr: null)
+{
+    @include _attr-valued-modifier($component, $family, $value, $attr, '=')
+    {
+        @content;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// defaults-when-absent
+//
+// Emit `.sk-<component>:where(:not([class*="<prefix>"]))` — zero-specificity so any explicit
+// class from the family wins. Use to apply default modifier rules when the author hasn't
+// specified any class from the family.
+//
+// Note: this targets the class API (.sk-<component>) only. For the custom-element API, use
+// `defaults-when-no-attr` to key on attribute absence instead.
+//
+// Example: @include defaults-when-absent('panel', 'sk-cut-') { --sk-panel-cut-br: ...; }
+//----------------------------------------------------------------------------------------------------------------------
+
+@mixin defaults-when-absent($component, $prefix)
+{
+    .sk-#{ $component }:where(:not([class*="#{ $prefix }"]))
+    {
+        @content;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// defaults-when-no-attr
+//
+// Emit `sk-<component>:where(:not([<attr>]))` — zero-specificity so any explicit attribute
+// value wins. Use alongside `defaults-when-absent` to apply the same default modifier rules
+// for the custom-element API when no modifier attribute is present.
+//
+// Example: @include defaults-when-no-attr('panel', 'kind') { --sk-panel-color-base: ...; }
+//----------------------------------------------------------------------------------------------------------------------
+
+@mixin defaults-when-no-attr($component, $attr)
+{
+    sk-#{ $component }:where(:not([#{ $attr }]))
+    {
+        @content;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/mixins/_index.scss

@@ -4,5 +4,6 @@
 
 @forward 'cut-border';
 @forward 'responsive';
+@forward 'dual-selector';
 
 //----------------------------------------------------------------------------------------------------------------------