@webority/theme 0.24.0 → 0.26.0

package/scss/wui/_tree.scss

@@ -0,0 +1,124 @@
+// ── Tree view ──
+// AppTreeView / <app-tree-view> / <wui-tree>: a hierarchy in the WAI-ARIA tree pattern. The element
+// draws the markup and keeps the state on ARIA attributes (aria-expanded on an item,
+// aria-selected / aria-checked for the selection), which are the state hooks below. Each row is
+// indented by --wui-tree-level (set by the element), so the nesting needs no per-depth rule.
+// Every colour is a theme token, so dark mode follows the token flip with no rules of its own.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+wui-tree {
+    display: block;
+}
+
+.wui-tree,
+.wui-tree-group {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.wui-tree-item {
+    outline: none;
+}
+
+.wui-tree-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 36px;
+    padding: 4px 8px;
+    padding-inline-start: calc(8px + var(--wui-tree-level, 0) * 20px);
+    border-radius: var(--radius-sm);
+    color: var(--color-text);
+    cursor: pointer;
+    user-select: none;
+}
+.wui-tree-row:hover {
+    background: var(--color-bg-muted);
+}
+.wui-tree-row.wui-tree-row-selected {
+    background: var(--color-primary-soft);
+    color: var(--color-primary);
+}
+.wui-tree-item[aria-disabled="true"] > .wui-tree-row {
+    color: var(--color-text-subtle);
+    cursor: not-allowed;
+}
+.wui-tree-item[aria-disabled="true"] > .wui-tree-row:hover {
+    background: transparent;
+}
+// The item holds the focus, but it also holds its subtree, so the ring goes on its own row.
+.wui-tree-item:focus-visible > .wui-tree-row {
+    outline: 2px solid var(--color-primary);
+    outline-offset: -2px;
+}
+.wui-tree-row-error .wui-tree-label {
+    color: var(--color-danger);
+}
+
+.wui-tree-toggle {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    color: var(--color-text-muted);
+}
+.wui-tree-toggle .wui-icon {
+    transition: transform 0.15s ease;
+}
+.wui-tree-item[aria-expanded="true"] > .wui-tree-row .wui-tree-toggle .wui-icon {
+    transform: rotate(90deg);
+}
+
+.wui-tree-check {
+    flex: 0 0 auto;
+    margin: 0;
+}
+
+.wui-tree-icon {
+    display: inline-flex;
+    flex: 0 0 auto;
+    color: var(--color-text-muted);
+}
+.wui-tree-row-selected .wui-tree-icon {
+    color: inherit;
+}
+
+.wui-tree-label {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.wui-tree-badge {
+    flex: 0 0 auto;
+}
+
+.wui-tree-spinner {
+    flex: 0 0 auto;
+    width: 14px;
+    height: 14px;
+    border: 2px solid var(--color-border-strong);
+    border-top-color: var(--color-primary);
+    border-radius: 50%;
+    animation: wui-tree-spin 0.7s linear infinite;
+}
+@keyframes wui-tree-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .wui-tree-toggle .wui-icon {
+        transition: none;
+    }
+    .wui-tree-spinner {
+        animation-duration: 2s;
+    }
+}