@skewedaspect/sleekspace-ui 0.6.0 → 0.7.1

package/src/styles/components/_tree-view.scss

@@ -0,0 +1,187 @@
+//----------------------------------------------------------------------------------------------------------------------
+// TreeView Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+@use '@/styles/mixins/cut-border' as *;
+
+$kinds: (neutral, primary, accent, info, success, warning, danger);
+
+//----------------------------------------------------------------------------------------------------------------------
+// Kind Mixin
+//----------------------------------------------------------------------------------------------------------------------
+
+@mixin tree-view-kind($kind)
+{
+    &.sk-#{ '' + $kind }
+    {
+        --sk-tree-color-base: var(--sk-#{ $kind }-base);
+        --sk-tree-fg: var(--sk-#{ $kind }-text);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// TreeView Root
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-tree-view
+{
+    --sk-tree-color-base: var(--sk-neutral-base);
+    --sk-tree-fg: var(--sk-neutral-text);
+    --sk-tree-indent: 1.25rem;
+
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    @each $kind in $kinds
+    {
+        @include tree-view-kind($kind);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// TreeView Item
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-tree-item
+{
+    display: flex;
+    align-items: center;
+    gap: var(--sk-space-xs);
+    padding: var(--sk-space-3xs) var(--sk-space-md) var(--sk-space-3xs) var(--sk-space-xs);
+    color: var(--sk-tree-fg);
+    cursor: pointer;
+    user-select: none;
+    position: relative;
+    font-size: var(--sk-font-size-sm);
+    line-height: 1.5;
+    outline: none;
+
+    transition:
+        background var(--sk-transition-duration-fast) var(--sk-transition-timing-default);
+
+    // Beveled clip-path matching sidebar items (top-left + bottom-right, 10px)
+    &:hover:not([data-disabled])
+    {
+        background: oklch(from var(--sk-tree-color-base) l c h / 0.1);
+        clip-path: polygon(
+            10px 0%,
+            100% 0%,
+            100% calc(100% - 10px),
+            calc(100% - 10px) 100%,
+            0% 100%,
+            0% 10px
+        );
+    }
+
+    &:active:not([data-disabled])
+    {
+        background: oklch(from var(--sk-tree-color-base) l c h / 0.15);
+    }
+
+    &[data-selected]
+    {
+        background: oklch(from var(--sk-tree-color-base) l c h / 0.2);
+        clip-path: polygon(
+            10px 0%,
+            100% 0%,
+            100% calc(100% - 10px),
+            calc(100% - 10px) 100%,
+            0% 100%,
+            0% 10px
+        );
+
+        // Active indicator: 2px L-shape tracing the left edge + top-left bevel
+        &::before
+        {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: var(--sk-tree-color-base);
+            clip-path: polygon(
+                0% 100%,
+                0px 10px,
+                10px 0px,
+                11.41px 1.41px,
+                2px 10.83px,
+                2px 100%
+            );
+        }
+    }
+
+    &[data-selected]:hover:not([data-disabled])
+    {
+        background: oklch(from var(--sk-tree-color-base) l c h / 0.25);
+    }
+
+    &:focus-visible
+    {
+        outline: var(--sk-border-width-base) solid var(--sk-tree-color-base);
+        outline-offset: -1px;
+    }
+
+    &[data-disabled]
+    {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Chevron
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-tree-item-chevron
+{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    color: oklch(from var(--sk-tree-fg) l c h / 0.5);
+    transition: transform var(--sk-transition-duration-fast) var(--sk-transition-timing-default);
+
+    &.sk-expanded
+    {
+        transform: rotate(90deg);
+    }
+}
+
+// Spacer for leaf nodes (keeps text aligned with branches)
+.sk-tree-item-chevron-spacer
+{
+    width: 1rem;
+    flex-shrink: 0;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Slots
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-tree-item-leading
+{
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.sk-tree-item-content
+{
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.sk-tree-item-trailing
+{
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    margin-left: auto;
+    gap: var(--sk-space-3xs);
+}
+
+//----------------------------------------------------------------------------------------------------------------------