agentcss 0.0.0-stage → 0.11.2

package/dist/03-patterns/reveal/reveal.js

@@ -0,0 +1,138 @@
+(function (global) {
+'use strict';
+
+var SELECTOR = '[data-reveal]';
+var GROUP_SELECTOR = '[data-reveal-children]';
+var STAGGER_MS = 40;
+var STAGGER_CAP = 6;
+var THRESHOLD = 0.15;
+var WATCHDOG_MS = 2000;
+var observer = null;
+var watchdog = null;
+
+function each(list, fn) {
+for (var i = 0; i < list.length; i++) { fn(list[i], i); }
+}
+
+function reduced() {
+return !!(global.matchMedia &&
+global.matchMedia('(prefers-reduced-motion: reduce)').matches);
+}
+
+function markDone(el) { el.setAttribute('data-reveal-done', ''); }
+function clearDone(el) { el.removeAttribute('data-reveal-done'); }
+
+function prepareGroups() {
+var groups = document.querySelectorAll(GROUP_SELECTOR);
+each(groups, function (group) {
+var dir = group.getAttribute('data-reveal-children') || 'up';
+var kids = group.children;
+for (var i = 0; i < kids.length; i++) {
+var k = kids[i];
+if (!k.hasAttribute('data-reveal')) {
+k.setAttribute('data-reveal', dir);
+}
+if (!k.hasAttribute('data-reveal-delay')) {
+var step = i < STAGGER_CAP ? i : STAGGER_CAP;
+k.style.setProperty('--reveal-delay', (step * STAGGER_MS) + 'ms');
+}
+}
+});
+}
+
+function revealAll() {
+each(document.querySelectorAll(SELECTOR), markDone);
+}
+
+function inViewport(el) {
+var vh = global.innerHeight || document.documentElement.clientHeight || 0;
+var r = el.getBoundingClientRect();
+return r.bottom > 0 && r.top < vh;
+}
+
+function watchdogSweep() {
+watchdog = null;
+each(document.querySelectorAll(SELECTOR), function (el) {
+if (el.hasAttribute('data-reveal-done')) { return; }
+if (inViewport(el)) { markDone(el); }
+});
+}
+
+function teardown() {
+if (watchdog) { global.clearTimeout(watchdog); watchdog = null; }
+if (observer) { observer.disconnect(); observer = null; }
+each(document.querySelectorAll(SELECTOR), function (el) {
+clearDone(el);
+});
+document.documentElement.removeAttribute('data-reveal-ready');
+}
+
+function enable() {
+var root = document.documentElement;
+if (observer) { return true; }
+
+prepareGroups();
+root.setAttribute('data-reveal-ready', '');
+
+if (!('IntersectionObserver' in global) || reduced()) {
+revealAll();
+return true;
+}
+
+try {
+observer = new global.IntersectionObserver(function (entries) {
+for (var i = 0; i < entries.length; i++) {
+var en = entries[i];
+if (en.isIntersecting) {
+markDone(en.target);
+if (!en.target.hasAttribute('data-reveal-repeat')) {
+observer.unobserve(en.target);
+}
+} else if (en.target.hasAttribute('data-reveal-repeat')) {
+clearDone(en.target);
+}
+}
+}, { threshold: THRESHOLD, rootMargin: '0px 0px -8% 0px' });
+
+each(document.querySelectorAll(SELECTOR), function (el) {
+observer.observe(el);
+});
+} catch (e) {
+if (observer) {
+try { observer.disconnect(); } catch (e2) { observer = null; }
+observer = null;
+}
+revealAll();
+return true;
+}
+
+if (!watchdog) {
+watchdog = global.setTimeout(watchdogSweep, WATCHDOG_MS);
+}
+return true;
+}
+
+function disable() {
+teardown();
+revealAll();
+}
+
+function replay() {
+teardown();
+return enable();
+}
+
+global.Reveal = { enable: enable, disable: disable, replay: replay };
+
+function auto() {
+if (document.documentElement.hasAttribute('data-reveal-auto')) {
+enable();
+}
+}
+
+if (document.readyState === 'loading') {
+document.addEventListener('DOMContentLoaded', auto, false);
+} else {
+auto();
+}
+}(this));

package/dist/03-patterns/states/states.css

@@ -0,0 +1 @@
+.state {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-8) var(--sp-5);text-align:center;min-height:200px;}.state__icon {flex:none;width:48px;height:48px;margin-bottom:var(--sp-2);display:grid;place-items:center;border-radius:var(--r-pill);background:var(--surface-sunken);color:var(--text-tertiary);}.state__title {margin:0;font-size:var(--fs-md);font-weight:500;line-height:var(--lh-tight);color:var(--text-primary);}.state__desc {margin:0;max-width:42ch;font-size:var(--fs-sm);color:var(--text-secondary);line-height:var(--lh-base);}.state__action {margin-top:var(--sp-3);display:flex;gap:var(--sp-3);flex-wrap:wrap;justify-content:center;}.state--empty .state__icon {background:var(--surface-sunken);color:var(--text-tertiary);}.state--loading {gap:var(--sp-3);}.spinner {width:24px;height:24px;border:2.5px solid var(--border-control);border-top-color:var(--accent);border-radius:50%;animation:spinner-rotate 700ms linear infinite;}@keyframes spinner-rotate {to {transform:rotate(360deg);}}.skeleton {--sk-base:var(--surface-sunken);--sk-hi:var(--border-decor);background:var(--sk-base);border-radius:var(--r-sm);position:relative;overflow:hidden;}.skeleton::after {content:"";position:absolute;inset:0;background:linear-gradient(90deg, transparent 0%, var(--sk-hi) 50%, transparent 100%);transform:translateX(-100%);animation:skeleton-sweep 1.4s ease-in-out infinite;}@keyframes skeleton-sweep {to {transform:translateX(100%);}}.skeleton--text {height:1em;margin-block:0.35em;border-radius:4px;}.skeleton--title {height:1.4em;width:60%;}.skeleton--avatar {width:40px;height:40px;border-radius:var(--r-pill);}.skeleton--block {height:120px;}.skeleton--text:last-child {width:70%;}.state--error .state__icon {background:var(--danger-bg);color:var(--danger);}.state--error .state__title {color:var(--danger);}.state__detail {margin-top:var(--sp-3);font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-tertiary);background:var(--surface-sunken);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);max-width:100%;overflow-x:auto;}@media (prefers-reduced-motion:reduce) {.spinner {animation-duration:1.2s !important;}.skeleton::after {animation:none;transform:none;}}

package/dist/03-patterns/tabs/tabs.css

@@ -0,0 +1 @@
+.tabs {display:flex;flex-direction:column;gap:var(--sp-4);}.tabs--manual .tabs__tab[aria-selected="true"] {color:var(--text-secondary);font-weight:400;}@media (hover:hover) and (pointer:fine) {.tabs--manual .tabs__tab[aria-selected="true"]:hover {color:var(--text-primary);}}.tabs__list {display:flex;gap:var(--sp-1);border-bottom:1px solid var(--border-decor);position:relative;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;}.tabs__list::-webkit-scrollbar {display:none;}.tabs--vertical {flex-direction:row;gap:var(--sp-4);}.tabs--vertical .tabs__list {flex-direction:column;border-bottom:0;border-inline-end:1px solid var(--border-decor);}.tabs__tab {appearance:none;background:none;border:0;margin-bottom:-1px;padding:var(--sp-3) var(--sp-4);font:inherit;font-size:var(--fs-base);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);white-space:nowrap;flex:0 0 auto;}.tabs--vertical .tabs__tab {margin-bottom:0;margin-inline-end:-1px;border-bottom:0;border-inline-end:2px solid transparent;text-align:start;}.tabs__tab[aria-selected="true"] {color:var(--text-primary);font-weight:600;border-bottom-color:var(--accent);}.tabs--vertical .tabs__tab[aria-selected="true"] {border-inline-end-color:var(--accent);}@media (hover:hover) and (pointer:fine) {.tabs__tab:not([aria-disabled="true"]):hover {color:var(--text-primary);background:var(--surface-sunken);}}.tabs__tab[aria-disabled="true"] {color:var(--text-tertiary);cursor:not-allowed;}.tabs__tab:focus-visible {outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-sm) var(--r-sm) 0 0;}.tabs__panel {padding:var(--sp-4) 0;}.tabs__panel[hidden] {display:none;}@media (prefers-reduced-motion:no-preference) {.tabs__panel--enter {animation:tabs-fade var(--dur-base) var(--ease-out);}}@keyframes tabs-fade {from {opacity:0;}to {opacity:1;}}

package/dist/03-patterns/tabs/tabs.js

@@ -0,0 +1,242 @@
+(function () {
+'use strict';
+
+var flEmit = function (el, name, detail) {
+if (!el || !el.dispatchEvent) return null;
+var type = name.indexOf('fl-') === 0 ? name : 'fl-' + name;
+var ev = null;
+
+if (typeof window.CustomEvent === 'function') {
+try {
+ev = new window.CustomEvent(type, {
+detail: detail || null, bubbles: true, cancelable: false
+});
+} catch (e) { ev = null; }
+}
+if (!ev) {
+try {
+ev = document.createEvent('CustomEvent');
+ev.initCustomEvent(type, true, false, detail || null);
+} catch (e2) { return null; }
+}
+el.dispatchEvent(ev);
+return ev;
+};
+
+var flRoving = function (opts) {
+var opt = opts || {};
+var container = opt.container;
+var all = opt.items || function () { return []; };
+var movable = opt.movable || all;
+var nodeOf = opt.nodeOf || function (x) { return x; };
+var axis = opt.axis || 'x';
+var loop = opt.loop !== false;
+var homeEnd = opt.homeEnd !== false;
+
+var roveTab = opt.tabindex !== false;
+var onMove = opt.onMove || function () {};
+
+function rove(target) {
+if (!roveTab) return target;
+var l = all() || [];
+for (var i = 0; i < l.length; i++) {
+var n = nodeOf(l[i]);
+if (!n || !n.setAttribute) continue;
+n.setAttribute('tabindex', n === target ? '0' : '-1');
+}
+return target;
+}
+
+function step(i, d) {
+var n = (movable() || []).length;
+if (!n) return -1;
+if (loop) return ((i + d) % n + n) % n;
+var t = i + d;
+return (t < 0 || t >= n) ? -1 : t;
+}
+
+function indexOfNode(node) {
+var l = movable() || [];
+for (var i = 0; i < l.length; i++) {
+if (nodeOf(l[i]) === node) return i;
+}
+return -1;
+}
+
+function onKey(e) {
+var l = movable() || [];
+if (!l.length) return;
+var i = indexOfNode(e.target);
+if (i < 0) return;
+var k = e.key;
+var next = -1;
+var reason = 'step';
+
+if (axis === 'y') {
+if (k === 'ArrowDown') next = step(i, 1);
+else if (k === 'ArrowUp') next = step(i, -1);
+} else {
+if (k === 'ArrowRight') next = step(i, 1);
+else if (k === 'ArrowLeft') next = step(i, -1);
+}
+if (homeEnd && k === 'Home') { next = 0; reason = 'home'; }
+else if (homeEnd && k === 'End') { next = l.length - 1; reason = 'end'; }
+
+if (next < 0 || next >= l.length) return;
+
+if (e.preventDefault) e.preventDefault();
+if (e.stopPropagation) e.stopPropagation();
+onMove(next, l[next], reason);
+}
+
+if (container) container.addEventListener('keydown', onKey);
+
+return {
+rove: rove,
+step: step,
+indexOf: indexOfNode,
+destroy: function () {
+if (container) container.removeEventListener('keydown', onKey);
+},
+};
+};
+
+function toArray(x) { return Array.prototype.slice.call(x); }
+
+function closest(el, sel) {
+while (el && el.nodeType === 1) {
+if (matches(el, sel)) return el;
+el = el.parentNode;
+}
+return null;
+}
+
+function matches(el, sel) {
+var fn = el.matches || el.msMatchesSelector || el.webkitMatchesSelector;
+return fn ? fn.call(el, sel) : false;
+}
+
+function filter(list, fn, self) {
+var out = [];
+for (var i = 0; i < list.length; i++) {
+if (fn.call(self, list[i], i, list)) out.push(list[i]);
+}
+return out;
+}
+
+function Tabs(root, opts) {
+this.root = root;
+this.opts = opts || {};
+this.list = root.querySelector('[role="tablist"]');
+if (!this.list) return;
+this.tabs = toArray(this.list.querySelectorAll('[role="tab"]'));
+this.panels = toArray(root.querySelectorAll('[role="tabpanel"]'));
+this.vertical = this.list.getAttribute('aria-orientation') === 'vertical';
+
+this.manual = root.classList.contains('tabs--manual');
+
+var self = this;
+this.roving = flRoving({
+container: this.list,
+items: function () { return self.tabs; },
+movable: function () { return self.focusables(); },
+axis: this.vertical ? 'y' : 'x',
+onMove: function (i, tab) {
+if (self.manual) { self.rove(tab); tab.focus(); }
+else self.select(tab, true);
+},
+});
+this.bind();
+}
+
+Tabs.prototype.enabled = function (tab) {
+return tab.getAttribute('aria-disabled') !== 'true';
+};
+
+Tabs.prototype.focusables = function () {
+return filter(this.tabs, this.enabled, this);
+};
+
+Tabs.prototype.rove = function (target) {
+if (!this.roving) return;
+this.roving.rove(target);
+};
+Tabs.prototype.select = function (tab, focusIt) {
+if (!this.enabled(tab)) return;
+for (var i = 0; i < this.tabs.length; i++) {
+var on = this.tabs[i] === tab;
+this.tabs[i].setAttribute('aria-selected', on ? 'true' : 'false');
+
+var pid = this.tabs[i].getAttribute('aria-controls');
+var panel = pid ? document.getElementById(pid) : null;
+if (!panel) {
+
+panel = this.panels[i] || null;
+}
+if (panel) {
+if (on) {
+panel.removeAttribute('hidden');
+panel.classList.add('tabs__panel--enter');
+} else {
+panel.setAttribute('hidden', '');
+panel.classList.remove('tabs__panel--enter');
+}
+}
+}
+this.active = tab;
+this.rove(tab);
+if (focusIt) tab.focus();
+flEmit(this.root, 'fl-change',
+{ value: tab.getAttribute('data-value') || tab.id, tab: tab });
+if (typeof this.opts.onChange === 'function') {
+this.opts.onChange(tab.getAttribute('data-value') || tab.id, tab);
+}
+};
+
+Tabs.prototype.bind = function () {
+var self = this;
+
+var initial = null;
+for (var i = 0; i < this.tabs.length; i++) {
+if (this.tabs[i].getAttribute('aria-selected') === 'true') {
+initial = this.tabs[i];
+break;
+}
+}
+this.select(initial || this.tabs[0], false);
+
+this.list.addEventListener('click', function (e) {
+var tab = closest(e.target, '[role="tab"]');
+if (!tab || !self.list.contains(tab)) return;
+if (!self.enabled(tab)) return;
+self.select(tab, false);
+});
+
+this.list.addEventListener('keydown', function (e) {
+var tab = closest(e.target, '[role="tab"]');
+if (!tab) return;
+var k = e.key;
+
+if (k !== 'Enter' && k !== ' ' && k !== 'Spacebar') return;
+if (self.manual) {
+e.preventDefault();
+self.select(tab, false);
+}
+});
+};
+
+window.Tabs = Tabs;
+
+function init() {
+var nodes = document.querySelectorAll('[data-tabs]');
+for (var i = 0; i < nodes.length; i++) {
+nodes[i].tabsInstance = new Tabs(nodes[i], {});
+}
+}
+
+if (document.readyState === 'loading') {
+document.addEventListener('DOMContentLoaded', init);
+} else {
+init();
+}
+})();

package/dist/03-patterns/tooltip/tooltip.css

@@ -0,0 +1 @@
+.tooltip {position:absolute;z-index:var(--z-raised);max-width:260px;padding:var(--sp-2) var(--sp-3);background:var(--tooltip-bg);color:var(--tooltip-fg);font-size:var(--fs-xs);line-height:1.5;border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px var(--tooltip-border), var(--shadow-2);user-select:none;opacity:0;visibility:hidden;transition:opacity 120ms var(--ease-out, ease);pointer-events:none;}.tooltip[data-state="open"] {opacity:1;visibility:visible;}.tooltip::after {content:"";position:absolute;border:5px solid transparent;}.tooltip--top::after {top:100%;inset-inline-start:50%;margin-inline-start:-5px;border-top-color:var(--tooltip-bg);}.tooltip--bottom::after {bottom:100%;inset-inline-start:50%;margin-inline-start:-5px;border-bottom-color:var(--tooltip-bg);}.tooltip--inset-inline-start::after {inset-inline-start:100%;top:50%;margin-top:-5px;border-inline-start-color:var(--tooltip-bg);}.tooltip--inset-inline-end::after {inset-inline-end:100%;top:50%;margin-top:-5px;border-inline-end-color:var(--tooltip-bg);}@media (prefers-reduced-motion:reduce) {.tooltip {transition:none;}}@media (hover:hover) and (pointer:fine) {[data-tooltip]:hover + .tooltip, [data-tooltip]:focus-visible + .tooltip {opacity:1;visibility:visible;}}

package/dist/03-patterns/tooltip/tooltip.js

@@ -0,0 +1,213 @@
+(function (global) {
+
+var flFocusReturn = function (opts) {
+var opt = opts || {};
+var saved = null;
+
+return {
+save: function () {
+var a = document.activeElement;
+saved = (a && a !== document.body && a.focus) ? a : null;
+return saved;
+},
+
+restore: function () {
+var target = saved;
+
+if (!target || !document.contains(target)) target = opt.fallback || null;
+if (!target) { saved = null; return false; }
+try {
+target.focus();
+} catch (e) {
+saved = null;
+return false;
+}
+var ok = document.activeElement === target;
+saved = null;
+return ok;
+},
+
+target: function () { return saved; },
+clear: function () { saved = null; },
+};
+};
+
+var flDismissable = function (opts) {
+var opt = opts || {};
+var escOn = opt.escOn || [];
+var inside = opt.inside || [];
+var when = opt.when || function () { return true; };
+var onDismiss = opt.onDismiss || function () {};
+
+var shared = window.__flDismiss || (window.__flDismiss = { stack: [], bound: false });
+
+function isInside(node) {
+if (!node) return false;
+for (var i = 0; i < inside.length; i++) {
+var el = inside[i];
+if (!el || !el.contains) continue;
+if (el === node || el.contains(node)) return true;
+}
+return false;
+}
+
+function onKey(e) {
+if (!when()) return;
+var k = e.key;
+if (k !== 'Escape' && k !== 'Esc' && e.keyCode !== 27) return;
+
+var closed = onDismiss(e, 'esc');
+if (closed === false) return;
+if (e.preventDefault) e.preventDefault();
+if (e.stopPropagation) e.stopPropagation();
+}
+
+function onDocClick(e) {
+var top = null;
+for (var i = shared.stack.length - 1; i >= 0; i--) {
+if (shared.stack[i].when()) { top = shared.stack[i]; break; }
+}
+if (!top || top.isInside(e.target)) return;
+top.onDismiss(e, 'outside');
+}
+
+var rec = { when: when, isInside: isInside, onDismiss: onDismiss };
+
+for (var j = 0; j < escOn.length; j++) {
+if (escOn[j]) escOn[j].addEventListener('keydown', onKey);
+}
+shared.stack.push(rec);
+if (!shared.bound) {
+shared.bound = true;
+document.addEventListener('click', onDocClick, true);
+}
+
+return {
+destroy: function () {
+for (var j = 0; j < escOn.length; j++) {
+if (escOn[j]) escOn[j].removeEventListener('keydown', onKey);
+}
+var k = shared.stack.indexOf(rec);
+if (k >= 0) shared.stack.splice(k, 1);
+},
+};
+};
+
+'use strict';
+
+var uid = 0;
+
+function ensureStyle() {
+if (document.getElementById('tooltip-css')) return;
+
+}
+
+function ensureLiveRegion() {
+var id = 'tooltip-live';
+var r = document.getElementById(id);
+if (r) return r;
+r = document.createElement('div');
+r.id = id;
+r.setAttribute('role', 'tooltip');
+
+r.setAttribute('aria-live', 'polite');
+r.setAttribute('aria-atomic', 'true');
+
+r.setAttribute('aria-label', '组件提示');
+r.style.cssText =
+'position:absolute;width:1px;height:1px;padding:0;margin:-1px;'+
+'overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0';
+document.body.appendChild(r);
+return r;
+}
+
+var CLS = {
+top: 'top', bottom: 'bottom',
+start: 'inset-inline-start', end: 'inset-inline-end',
+};
+
+function resolve(el, place) {
+var p = place || 'bottom';
+if (p === 'top' || p === 'bottom' || p === 'start' || p === 'end') return p;
+if (p !== 'left' && p !== 'right') return 'bottom';
+var rtl = getComputedStyle(el).direction === 'rtl';
+if (p === 'left') return rtl ? 'end' : 'start';
+return rtl ? 'start' : 'end';
+}
+
+function attach(el, text, place) {
+
+var fr = flFocusReturn({ fallback: el });
+if (!el || !text) return;
+ensureStyle();
+
+var pos = resolve(el, place);
+var id = 'tt' + (++uid);
+var tip = document.createElement('div');
+tip.id = id;
+tip.className = 'tooltip tooltip--' + CLS[pos];
+tip.setAttribute('role', 'tooltip');
+tip.textContent = text;
+
+var live = ensureLiveRegion();
+
+function show() {
+
+fr.save();
+
+tip.style.visibility = 'hidden';
+tip.style.display = 'block';
+if (!tip.parentNode) document.body.appendChild(tip);
+
+var b = el.getBoundingClientRect();
+var t = tip.getBoundingClientRect();
+if (pos === 'top') {
+tip.style.top = (b.top - t.height) + window.pageYOffset + 'px';
+tip.style.left = (b.left + b.width / 2 - t.width / 2) + window.pageXOffset + 'px';
+} else if (pos === 'start' || pos === 'end') {
+var rtl = getComputedStyle(el).direction === 'rtl';
+
+var x = (pos === 'start')
+? (rtl ? b.right : b.left - t.width)
+: (rtl ? b.left - t.width : b.right);
+tip.style.left = x + window.pageXOffset + 'px';
+tip.style.top = (b.top + b.height / 2 - t.height / 2) + window.pageYOffset + 'px';
+} else {
+tip.style.top = (b.bottom + window.pageYOffset) + 'px';
+tip.style.left = (b.left + b.width / 2 - t.width / 2) + window.pageXOffset + 'px';
+}
+tip.style.visibility = '';
+tip.setAttribute('data-state', 'open');
+live.textContent = text;
+}
+
+function hide() {
+tip.removeAttribute('data-state');
+live.textContent = '';
+}
+
+el.addEventListener('focus', show);
+el.addEventListener('blur', hide);
+
+el.addEventListener('click', function (e) {
+e.stopPropagation();
+if (tip.getAttribute('data-state') === 'open') hide(); else show();
+});
+
+var dismiss = flDismissable({
+escOn: [el],
+inside: [el, tip],
+when: function () { return tip.getAttribute('data-state') === 'open'; },
+onDismiss: function (ev, reason) {
+hide();
+if (reason === 'esc') fr.restore();
+}
+});
+
+var cur = el.getAttribute('aria-describedby');
+el.setAttribute('aria-describedby', cur ? (cur + ' ' + id) : id);
+el.setAttribute('data-tooltip', text);
+}
+
+global.Tooltip = { attach: attach };
+})(window);

package/dist/03-patterns/tree/tree.css

@@ -0,0 +1 @@
+.tree {font-size:var(--fs-sm);color:var(--text-primary);outline:none;}.tree ul {margin:0;padding:0;list-style:none;}.tree__item {position:relative;}.tree__node {display:flex;align-items:center;gap:var(--sp-2);min-height:32px;padding:0 var(--sp-2);border-radius:var(--r-xs);cursor:pointer;user-select:none;}.tree__node:focus-visible {outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:calc(-1 * var(--focus-ring-width));}@media (hover:hover) and (pointer:fine) {.tree__node:hover {background:var(--surface-sunken);}}.tree__node[aria-selected="true"] {background:var(--accent-soft);color:var(--text-primary);font-weight:500;}.tree__marker {flex:0 0 auto;width:1em;font-size:.8em;color:var(--text-tertiary);text-align:center;}.tree__item[aria-expanded="true"] > .tree__node .tree__marker::before {content:"\25BC";}.tree__item[aria-expanded="false"] > .tree__node .tree__marker::before {content:"\25B6";}.tree__item:not([aria-expanded]) > .tree__node .tree__marker::before {content:"\00B7";}.tree ul ul {padding-inline-start:var(--sp-5);border-inline-start:1px solid var(--border-decor);margin-inline-start:var(--sp-4);}.tree__label {flex:1 1 auto;}.tree__count {flex:0 0 auto;padding:0 var(--sp-1);font-size:var(--fs-xs);font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--text-tertiary);background:var(--surface-sunken);border-radius:var(--r-pill);}@media (prefers-reduced-motion:reduce) {.tree__marker {transition:none;}}