agentcss 0.0.0-stage → 0.11.2

package/dist/02-primitives/select/select.js

@@ -0,0 +1,449 @@
+(function (global) {
+'use strict';
+
+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);
+},
+};
+};
+
+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 flTypeahead = function (opts) {
+var opt = opts || {};
+var items = opt.items || function () { return []; };
+var textOf = opt.textOf || function (x) { return String((x && x.textContent) || ''); };
+var usable = opt.usable || function () { return true; };
+var timeout = opt.timeout || 500;
+var onHit = opt.onHit || function () {};
+var buf = '';
+var timer = null;
+var last = -1;
+
+function stop() {
+if (timer) { clearTimeout(timer); timer = null; }
+}
+
+function repeated(s) {
+if (s.length < 2) return false;
+for (var i = 1; i < s.length; i++) {
+if (s.charAt(i) !== s.charAt(0)) return false;
+}
+return true;
+}
+
+function find(needle) {
+var l = items() || [];
+var n = l.length;
+if (!n) return -1;
+for (var k = 0; k < n; k++) {
+var i = (last + 1 + k) % n;
+if (!usable(l[i])) continue;
+if (textOf(l[i]).toLowerCase().indexOf(needle) === 0) return i;
+}
+return -1;
+}
+
+function type(ch) {
+if (!ch) return -1;
+buf += String(ch).toLowerCase();
+stop();
+timer = setTimeout(clear, timeout);
+var needle = repeated(buf) ? buf.charAt(0) : buf;
+var i = find(needle);
+if (i >= 0) {
+last = i;
+onHit(i, (items() || [])[i], buf);
+}
+return i;
+}
+
+function clear() {
+buf = '';
+stop();
+}
+
+return {
+type: type,
+clear: clear,
+buffer: function () { return buf; },
+destroy: function () { stop(); },
+};
+};
+
+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;
+};
+
+function closest(el, sel) {
+if (!el) return null;
+if (el.closest) return el.closest(sel);
+while (el && el.nodeType === 1) {
+if (elMatches(el, sel)) return el;
+el = el.parentElement;
+}
+return null;
+}
+function elMatches(el, sel) {
+var m = sel.match(/^([a-zA-Z][\w-]*)/);
+if (m && el.tagName.toLowerCase() !== m[1].toLowerCase()) return false;
+var cls = sel.match(/\.([\w-]+)/g);
+if (cls) {
+for (var i = 0; i < cls.length; i++) {
+var c = cls[i].slice(1);
+if ((' ' + (el.className || '') + ' ').indexOf(' ' + c + ' ') < 0) return false;
+}
+}
+var id = sel.match(/#([\w-]+)/);
+if (id && el.id !== id[1]) return false;
+var at = sel.match(/\[([\w-]+)(?:=["']?([^\]"']*)["']?)?\]/);
+if (at) {
+var v = el.getAttribute(at[1]);
+if (v === null) return false;
+if (at[2] !== undefined && v !== at[2]) return false;
+}
+return true;
+}
+
+var uid = 0;
+
+function create(root, opt) {
+opt = opt || {};
+var btn = root.querySelector('[data-select-btn]');
+var list = root.querySelector('[data-select-list]');
+if (!btn || !list) throw new Error('Select: 缺少 [data-select-btn] 或 [data-select-list]');
+
+var fr = flFocusReturn({ fallback: btn });
+
+var dismiss = flDismissable({
+escOn: [btn],
+inside: [root],
+when: function () { return !list.hidden; },
+onDismiss: function (ev, reason) {
+close(reason === 'esc');
+}
+});
+if (!list.id) list.id = 'select-list-' + (++uid);
+
+var options = [].slice.call(list.querySelectorAll('[role="option"]'));
+var isMulti = !!opt.multiple;
+var selected = opt.value != null ? String(opt.value) : null;
+var activeIdx = -1;
+
+list.setAttribute('role', 'listbox');
+if (isMulti) list.setAttribute('aria-multiselectable', 'true');
+list.setAttribute('aria-label', opt.label || '选项');
+btn.setAttribute('aria-haspopup', 'listbox');
+btn.setAttribute('aria-expanded', 'false');
+btn.setAttribute('aria-controls', list.id);
+
+options.forEach(function (o, i) {
+o.setAttribute('role', 'option');
+if (!o.id) o.id = list.id + '-o' + i;
+o.setAttribute('aria-selected', 'false');
+if (o.hasAttribute('disabled') || o.getAttribute('aria-disabled') === 'true') {
+o.setAttribute('aria-disabled', 'true');
+}
+o.setAttribute('tabindex', '-1');
+if (o.className.indexOf('select__opt') < 0) {
+o.className = (o.className ? o.className + ' ' : '') + 'select__opt';
+}
+});
+
+function enabled() {
+return options.filter(function (o) { return o.getAttribute('aria-disabled') !== 'true'; });
+}
+
+var typeahead = flTypeahead({
+items: function () { return options; },
+textOf: optText,
+usable: function (o) { return o.getAttribute('aria-disabled') !== 'true'; },
+onHit: function (i) { setActive(i, 1); },
+});
+
+function selectedIdx() {
+for (var i = 0; i < options.length; i++) {
+if (options[i].getAttribute('data-value') === selected) return i;
+}
+return -1;
+}
+function valueText() {
+var i = selectedIdx();
+return i < 0 ? (opt.placeholder || '请选择') : optText(options[i]);
+}
+function optText(o) {
+var t = o.querySelector('.select__opt-text');
+return ((t || o).textContent || '').replace(/[✓\s]/g, '').trim();
+}
+
+function paint() {
+var v = valueText();
+var vEl = btn.querySelector('.select__value');
+if (vEl) {
+vEl.textContent = v;
+vEl.classList.toggle('select__value--placeholder', selectedIdx() < 0);
+}
+options.forEach(function (o) {
+var on = o.getAttribute('data-value') === selected;
+o.setAttribute('aria-selected', on ? 'true' : 'false');
+var ck = o.querySelector('.select__check');
+if (ck) ck.textContent = on ? '✓' : '';
+});
+
+var hidden = root.querySelector('input[type="hidden"]');
+if (hidden) hidden.value = selected == null ? '' : selected;
+flEmit(root, 'fl-change',
+{ value: selected, text: optText(options[selectedIdx()] || options[0]) });
+if (opt.onChange) opt.onChange(selected, optText(options[selectedIdx()] || options[0]));
+}
+
+function setActive(i, dir) {
+if (!options.length) return;
+dir = dir || 1;
+
+var n = options.length;
+var idx = ((i % n) + n) % n;
+for (var k = 0; k < n; k++) {
+if (options[idx].getAttribute('aria-disabled') !== 'true') break;
+idx = ((idx + dir) % n + n) % n;
+}
+activeIdx = idx;
+options.forEach(function (o) { o.removeAttribute('data-state'); });
+options[idx].setAttribute('data-state', 'active');
+
+btn.setAttribute('aria-activedescendant', options[idx].id);
+if (options[idx].scrollIntoView) {
+options[idx].scrollIntoView({ block: 'nearest' });
+}
+}
+
+function activeIndex() {
+if (activeIdx >= 0) return activeIdx;
+var i = selectedIdx();
+if (i >= 0) return i;
+var e2 = enabled();
+return e2.length ? options.indexOf(e2[0]) : 0;
+}
+
+function open() {
+
+fr.save();
+list.hidden = false;
+btn.setAttribute('aria-expanded', 'true');
+
+btn.focus();
+
+setActive(activeIndex());
+flEmit(root, 'fl-open', null);
+if (opt.onOpen) opt.onOpen();
+}
+function close(restoreFocus) {
+list.hidden = true;
+btn.setAttribute('aria-expanded', 'false');
+btn.removeAttribute('aria-activedescendant');
+options.forEach(function (o) { o.removeAttribute('data-state'); });
+activeIdx = -1;
+typeahead.clear();
+
+if (restoreFocus !== false) fr.restore();
+flEmit(root, 'fl-close', null);
+if (opt.onClose) opt.onClose();
+}
+function commit(i) {
+var o = options[i];
+if (!o || o.getAttribute('aria-disabled') === 'true') return;
+if (isMulti) {
+
+selected = o.getAttribute('data-value') === selected ? null : o.getAttribute('data-value');
+} else {
+selected = o.getAttribute('data-value');
+close(true);
+}
+paint();
+}
+
+btn.addEventListener('keydown', function (e) {
+var k = e.key;
+if (k === 'ArrowDown' || k === 'ArrowUp' || k === 'Enter' || k === ' ' ||
+k === 'Spacebar' || (k === 'Alt' && false)) {
+if (k === 'ArrowDown' || k === 'ArrowUp') {
+e.preventDefault();
+if (list.hidden) { open(); return; }
+var dir = k === 'ArrowDown' ? 1 : -1;
+setActive(activeIndex() + dir, dir);
+return;
+}
+e.preventDefault();
+if (list.hidden) open();
+else if (activeIdx >= 0) commit(activeIdx);
+return;
+}
+
+if (k === 'ArrowDown' && e.altKey) { e.preventDefault(); open(); return; }
+
+if (list.hidden && (k === 'Home' || k === 'End')) {
+e.preventDefault(); open();
+if (k === 'Home') setActive(0);
+else setActive(options.length - 1);
+return;
+}
+});
+
+function onListKey(e) {
+var k = e.key;
+if (k === 'ArrowDown') { e.preventDefault(); setActive(activeIndex() + 1, 1); return; }
+if (k === 'ArrowUp')   { e.preventDefault(); setActive(activeIndex() - 1, -1); return; }
+if (k === 'Home')      { e.preventDefault(); setActive(0, 1); return; }
+if (k === 'End')       { e.preventDefault(); setActive(options.length - 1, -1); return; }
+
+if (k === 'Tab') { close(false); return; }
+if (k === 'Enter' || k === ' ' || k === 'Spacebar') {
+e.preventDefault();
+if (activeIdx >= 0) commit(activeIdx);
+return;
+}
+
+if (k.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+e.preventDefault();
+typeahead.type(k);
+}
+}
+
+btn.addEventListener('keydown', function (e) {
+
+if (list.hidden) return;
+var k = e.key;
+
+if (k === 'Escape' || k === 'Esc' || k === 'ArrowDown' || k === 'ArrowUp' ||
+k === 'Home' || k === 'End' || k === 'Enter' || k === ' ' ||
+k === 'Spacebar' || k === 'Tab') {
+
+if (list.hidden) return;
+onListKey(e);
+return;
+}
+if (k.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) onListKey(e);
+});
+
+btn.addEventListener('click', function () {
+if (list.hidden) open(); else close();
+});
+list.addEventListener('click', function (e) {
+var o = e.target.closest ? closest(e.target, '[role="option"]') : null;
+if (!o) return;
+commit(options.indexOf(o));
+});
+
+paint();
+return {
+open: open, close: close,
+get value() { return selected; },
+set value(v) { selected = v == null ? null : String(v); paint(); },
+};
+}
+
+global.Select = { create: create };
+})(window);

package/dist/02-primitives/separator/separator.css

@@ -0,0 +1 @@
+.separator {border:0;border-top:1px solid var(--border-decor);margin:var(--sp-6) 0;height:0;}.separator--tight {margin:var(--sp-4) 0;}.separator--label {display:flex;align-items:center;gap:var(--sp-3);border:0;margin:var(--sp-6) 0 var(--sp-3);font-size:var(--fs-xs);font-weight:600;color:var(--text-secondary);}.separator--label::before, .separator--label::after {content:"";flex:1;border-top:1px solid var(--border-control);}.separator--label::after {display:none;}.separator--label.separator--both::after {display:block;}

package/dist/02-primitives/skeleton/skeleton.css

@@ -0,0 +1 @@
+.skeleton {display:block;background:var(--skeleton-bg);border-radius:var(--r-sm);height:var(--skeleton-h, 1em);width:100%;position:relative;overflow:hidden;}.skeleton--text {height:auto;padding-bottom:0.55em;margin-bottom:var(--sp-2);border-radius:var(--r-xs);}.skeleton--block {border-radius:var(--r-md);}.skeleton--circle {border-radius:50%;width:var(--skeleton-size, 40px);height:var(--skeleton-size, 40px);flex:none;}.skeleton--text:last-child {margin-bottom:0;}@media (prefers-reduced-motion:no-preference) {.skeleton::after {content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient( 90deg, transparent 0%, var(--skeleton-shimmer) 50%, transparent 100% );animation:skeleton-sweep var(--skeleton-duration, 1.4s) ease-in-out infinite;}}@keyframes skeleton-sweep {100% {transform:translateX(100%);}}@media (prefers-reduced-motion:reduce) {.skeleton::after {animation:none;opacity:0;}}.skeleton-list {display:flex;flex-direction:column;gap:var(--sp-3);}.skeleton-list__row {display:flex;align-items:center;gap:var(--sp-3);}

package/dist/02-primitives/switch/switch.css

@@ -0,0 +1 @@
+.switch {position:relative;display:inline-flex;align-items:center;gap:var(--sp-3);cursor:pointer;min-height:44px;min-width:44px;}.switch__input {position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;z-index:1;}.switch__track {position:relative;flex:0 0 auto;--sw-h:24px;--sw-inset:1px;--sw-pad:1px;--sw-gap:var(--sw-pad);--sw-thumb:calc(var(--sw-h) - var(--sw-inset) * 2 - var(--sw-pad) * 2);box-sizing:border-box;width:calc(var(--sw-h) * 1.75);height:var(--sw-h);border-radius:var(--r-pill);background:var(--surface-sunken);border:1px solid var(--border-decor);transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);}.switch__thumb {position:absolute;top:var(--sw-gap);inset-inline-start:var(--sw-gap);width:var(--sw-thumb);height:var(--sw-thumb);border-radius:50%;background:var(--surface);border:0;box-shadow:0 1px 2px rgba(0, 0, 0, .28);transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);}.switch__input:checked ~ .switch__track {background:var(--switch-on, var(--accent));border-color:var(--switch-on, var(--accent));}.switch__input:checked ~ .switch__track .switch__thumb {transform:translateX(calc(var(--sw-h) * 1.75 - var(--sw-inset) * 2 - var(--sw-pad) * 2 - (var(--sw-h) - var(--sw-inset) * 2 - var(--sw-pad) * 2)));border-color:var(--accent);}.switch__input {outline:none;}.switch__input:focus-visible ~ .switch__track {outline:2px solid var(--accent);outline-offset:2px;}.switch__input:disabled ~ .switch__track {background:var(--surface-sunken);border-color:var(--border-decor);cursor:not-allowed;}.switch__input:disabled ~ .switch__track .switch__thumb {background:var(--surface);border-color:var(--border-decor);box-shadow:none;}.switch__input:disabled ~ .switch__label {color:var(--text-tertiary);cursor:not-allowed;}.switch__label {cursor:pointer;user-select:none;}.switch__label--sr {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}@media (hover:hover) and (pointer:fine) {.switch:not(.switch--disabled):hover .switch__track {border-color:var(--accent-hover);}}.switch--lg .switch__track {--sw-h:28px;width:48px;height:28px;}.switch--lg .switch__thumb {width:22px;height:22px;}.switch--lg .switch__input:checked ~ .switch__track .switch__thumb {transform:translateX(calc(var(--sw-h) * 1.75 - var(--sw-inset) * 2 - var(--sw-pad) * 2 - (var(--sw-h) - var(--sw-inset) * 2 - var(--sw-pad) * 2)));}

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

@@ -0,0 +1 @@
+:root {--acc-h:0px;--acc-locked-h:auto;}.accordion {--acc-dur:var(--dur-base, 240ms);--acc-ease:var(--ease-out, cubic-bezier(0.2, 0, 0, 1));border:1px solid var(--border-decor);border-radius:var(--r-md);background:var(--surface);overflow:visible;}.accordion--flush {border:0;background:transparent;}.accordion__item {border-bottom:1px solid var(--border-decor);overflow:hidden;}.accordion__item:last-child {border-bottom:0;}.accordion__heading {margin:0;font-size:inherit;font-weight:inherit;}.accordion__trigger {display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:44px;padding:var(--sp-3) var(--sp-4);font:inherit;font-size:var(--fs-base);font-weight:500;text-align:start;color:var(--text-primary);background:transparent;border:0;cursor:pointer;transition:background var(--dur-fast) var(--ease-out);}.accordion__trigger:focus-visible {outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-sm);}@media (hover:hover) and (pointer:fine) {.accordion__trigger:not([aria-disabled="true"]):hover {background:var(--surface-sunken);}}.accordion__trigger[aria-disabled="true"] {color:var(--text-tertiary);cursor:not-allowed;}.accordion__trigger[aria-expanded="true"] {background:var(--surface-sunken);}.accordion__label {flex:1 1 auto;min-width:0;}.accordion__hint {display:block;font-size:var(--fs-xs);font-weight:400;color:var(--text-secondary);margin-top:2px;}.accordion__marker {flex:0 0 auto;width:8px;height:8px;border-inline-end:2px solid var(--text-tertiary);border-bottom:2px solid var(--text-tertiary);transform:rotate(45deg) translate(-1px, -1px);transition:transform var(--acc-dur) var(--acc-ease);}.accordion__trigger[aria-expanded="true"] .accordion__marker {transform:rotate(-135deg) translate(-2px, -2px);}@media (forced-colors:active) {.accordion__marker {border-color:currentColor;}}.accordion__panel {display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--acc-dur) var(--acc-ease);}.accordion__panel[data-state="open"] {grid-template-rows:1fr;}.accordion__panel[style*="--acc-h"] {transition:grid-template-rows var(--acc-dur) var(--acc-ease), max-height var(--acc-dur) var(--acc-ease);max-height:var(--acc-h, 0px);}.accordion__panel[style*="--acc-h"][data-state="closed"] {max-height:0;}.accordion__panel[hidden] {display:none !important;}.accordion__panel-inner {min-height:0;overflow:hidden;padding:0 var(--sp-4);}.accordion__trigger[aria-expanded="true"] + .accordion__panel .accordion__panel-inner {padding-top:var(--sp-1);padding-bottom:var(--sp-4);}.accordion__panel[data-state="closed"] {pointer-events:none;}.accordion__panel[data-state="open"] {pointer-events:auto;}.accordion__panel[hidden] {visibility:hidden;}.accordion__panel-inner.cols-auto {display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:var(--sp-3);}.accordion__panel-inner.cols-2, .accordion__panel-inner.cols-3 {display:grid;gap:var(--sp-3);grid-template-columns:1fr;}@media (min-width:720px) {.accordion__panel-inner.cols-2 {grid-template-columns:repeat(2, 1fr);}.accordion__panel-inner.cols-3 {grid-template-columns:repeat(3, 1fr);}}.acc-table {width:100%;border-collapse:collapse;font-size:var(--fs-sm);display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}@media (min-width:600px) {.acc-table {display:table;}}.acc-table caption {position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}.acc-table th, .acc-table td {padding:var(--sp-2) var(--sp-3);text-align:start;border-bottom:1px solid var(--border-decor);white-space:nowrap;}.acc-table th {font-size:var(--fs-xs);font-weight:500;color:var(--text-secondary);position:sticky;inset-inline-start:0;background:var(--surface);z-index:1;}.acc-table td {color:var(--text-primary);}.acc-table .num {text-align:end;font-family:var(--mono);font-variant-numeric:tabular-nums;}.acc-table .up {color:var(--danger);}.acc-table .down {color:var(--success);}.acc-table tbody tr:last-child td {border-bottom:0;}@media (hover:hover) and (pointer:fine) {.acc-table tbody tr:hover td {background:var(--surface-sunken);}}@media (prefers-reduced-motion:reduce) {.accordion__panel, .accordion__marker, .accordion__trigger {transition:none;}}

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

@@ -0,0 +1,219 @@
+(function () {
+'use strict';
+
+var uid = 0;
+'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;
+};
+
+function toArray(x) { return Array.prototype.slice.call(x); }
+
+var raf = (typeof window.requestAnimationFrame === 'function')
+? window.requestAnimationFrame.bind(window)
+: function (fn) { return setTimeout(fn, 16); };
+
+function once(el, ev, fn) {
+function handler(e) {
+if (e && e.target !== el) return;
+el.removeEventListener(ev, handler, true);
+fn(e);
+}
+el.addEventListener(ev, handler, true);
+}
+
+function closest(el, sel) {
+while (el && el.nodeType === 1) {
+var fn = el.matches || el.msMatchesSelector || el.webkitMatchesSelector;
+if (fn && fn.call(el, sel)) return el;
+el = el.parentNode;
+}
+return null;
+}
+
+function Accordion(root, opts) {
+this.root = root;
+this.opts = opts || {};
+this.items = toArray(root.querySelectorAll('.accordion__item'));
+if (!this.items.length) return;
+
+this.single = !root.hasAttribute('data-accordion-multi')
+&& !root.classList.contains('accordion--multi');
+
+this.useRegion = !root.classList.contains('accordion--many') &&
+this.items.length <= 6;
+
+this.dur = this.reduced() ? 0 : 90;
+
+this.init();
+this.bind();
+}
+
+Accordion.prototype.triggers = function () {
+return this.items.map(function (it) {
+return it.querySelector('.accordion__trigger');
+});
+};
+
+Accordion.prototype.panels = function () {
+return this.items.map(function (it) {
+return it.querySelector('.accordion__panel');
+});
+};
+
+Accordion.prototype.init = function () {
+
+var seq = ++uid;
+for (var i = 0; i < this.items.length; i++) {
+var it = this.items[i];
+var btn = it.querySelector('.accordion__trigger');
+var panel = it.querySelector('.accordion__panel');
+if (!btn || !panel) continue;
+
+if (!panel.id) panel.id = 'acc-panel-' + seq + '-' + (i + 1);
+if (!btn.id) btn.id = 'acc-btn-' + seq + '-' + (i + 1);
+
+btn.setAttribute('aria-controls', panel.id);
+
+panel.setAttribute('aria-labelledby', btn.id);
+
+if (this.useRegion) panel.setAttribute('role', 'region');
+
+var isOpen = btn.getAttribute('aria-expanded') === 'true';
+panel.setAttribute('data-state', isOpen ? 'open' : 'closed');
+if (!isOpen) panel.setAttribute('hidden', '');
+else panel.removeAttribute('hidden');
+}
+};
+
+Accordion.prototype.reduced = function () {
+return typeof window.matchMedia === 'function' &&
+window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+};
+
+Accordion.prototype.lock = function () {};
+
+Accordion.prototype.unlock = function () {};
+
+Accordion.prototype.set = function (item, open) {
+var btn = item.querySelector('.accordion__trigger');
+var panel = item.querySelector('.accordion__panel');
+if (!btn || !panel) return;
+if (btn.getAttribute('aria-disabled') === 'true') return;
+
+var self = this;
+btn.setAttribute('aria-expanded', open ? 'true' : 'false');
+
+if (open) {
+
+panel.removeAttribute('hidden');
+panel.style.visibility = '';
+panel.setAttribute('data-state', 'open');
+} else {
+
+if (self.reduced()) {
+panel.setAttribute('data-state', 'closed');
+panel.setAttribute('hidden', '');
+panel.style.visibility = '';
+} else {
+var inner = panel.querySelector('.accordion__panel-inner');
+
+var h = inner ? inner.getBoundingClientRect().height : 0;
+panel.style.setProperty('--acc-h', h + 'px');
+
+raf(function () {
+panel.setAttribute('data-state', 'closed');
+
+var settle = function () {
+if (panel.getAttribute('data-state') === 'closed') {
+panel.setAttribute('hidden', '');
+panel.style.removeProperty('--acc-h');
+}
+};
+once(panel, 'transitionend', settle);
+
+setTimeout(settle, 400);
+});
+}
+}
+
+flEmit(this.root, 'fl-change', { value: btn.id, open: open, item: btn });
+if (typeof this.opts.onChange === 'function') {
+this.opts.onChange(btn, open);
+}
+};
+
+Accordion.prototype.toggle = function (item) {
+var opening = item.querySelector('.accordion__trigger')
+.getAttribute('aria-expanded') !== 'true';
+if (this.single && opening) {
+
+var self = this;
+toArray(this.items).forEach(function (it) {
+if (it !== item) self.set(it, false);
+});
+}
+this.set(item, opening);
+};
+
+Accordion.prototype.itemOf = function (btn) {
+var el = btn;
+while (el && el !== this.root) {
+if (el.className &&
+(' ' + el.className + ' ').indexOf(' accordion__item ') > -1) {
+return el;
+}
+el = el.parentNode;
+}
+return null;
+};
+
+Accordion.prototype.bind = function () {
+var self = this;
+
+this.root.style.setProperty('--acc-dur', this.dur + 'ms');
+
+this.root.addEventListener('click', function (e) {
+var btn = closest(e.target, '.accordion__trigger');
+if (!btn || !self.root.contains(btn)) return;
+if (btn.getAttribute('aria-disabled') === 'true') return;
+var item = self.itemOf(btn);
+if (item) self.toggle(item);
+});
+
+};
+
+window.Accordion = Accordion;
+
+function init() {
+var nodes = document.querySelectorAll('[data-accordion]');
+for (var i = 0; i < nodes.length; i++) {
+nodes[i].accordionInstance = new Accordion(nodes[i]);
+}
+}
+
+if (document.readyState === 'loading') {
+document.addEventListener('DOMContentLoaded', init);
+} else {
+init();
+}
+})();

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

@@ -0,0 +1 @@
+.prose {max-width:var(--measure-prose);color:var(--text-primary);}.prose > * + * {margin-top:var(--sp-4);}.prose > h1, .prose > h2, .prose > h3, .prose > h4, .prose > h5, .prose > h6 {font-family:var(--sans);font-weight:500;line-height:var(--lh-tight);letter-spacing:-0.008em;margin:var(--sp-7) 0 0;}.prose > h1 {font-size:var(--fs-2xl);margin-top:0;}.prose > h2 {font-size:var(--fs-lg);padding-top:var(--sp-5);border-top:2px solid var(--accent);max-width:92%;}.prose > h3 {font-size:var(--fs-md);}.prose > h4, .prose > h5, .prose > h6 {font-size:var(--fs-base);color:var(--text-secondary);}.prose > p {margin:0;line-height:1.75;}.prose > code, .prose > li > code, .prose > td > code, .prose > th > code {font-family:var(--mono);font-size:0.88em;background:var(--surface-sunken);border:1px solid var(--border-decor);border-radius:3px;padding:0.05em 0.3em;}.prose > pre > code, .prose > pre {font-family:inherit;font-size:inherit;background:none;border:none;padding:0;border-radius:0;}.prose > ul, .prose > ol {padding-inline-start:1.5em;margin:0;}.prose > ul {list-style:disc;}.prose > ol {list-style:decimal;}.prose li + li {margin-top:var(--sp-2);}.prose li > ul, .prose li > ol {margin-top:var(--sp-2);}.prose li > ul {list-style:circle;}.prose > blockquote {margin:var(--sp-5) 0;padding:0 0 0 var(--sp-4);border-inline-start:3px solid var(--accent);}.prose > blockquote > p {color:var(--text-secondary);font-size:var(--fs-md);line-height:1.6;}.prose > blockquote > blockquote {margin:var(--sp-3) 0;}.prose > pre {margin:0;padding:var(--sp-4);background:var(--surface-sunken);border-inline-start:3px solid var(--border-decor-str);border-radius:0 var(--r-sm) var(--r-sm) 0;overflow-x:auto;font-family:var(--mono);font-size:var(--fs-xs);line-height:1.6;tab-size:4;-webkit-overflow-scrolling:touch;}.prose > pre:not([class]) {border-inline-start-color:var(--border-decor);}.prose > table {width:100%;border-collapse:collapse;table-layout:auto;font-size:var(--fs-sm);}.prose > table th, .prose > table td {text-align:start;padding:var(--sp-2) var(--sp-4) var(--sp-2) 0;border-bottom:1px solid var(--border-decor);vertical-align:top;}.prose > table th {font-weight:500;font-size:var(--fs-xs);color:var(--text-secondary);}.prose > table tbody tr:last-child td {border-bottom:1px solid var(--border-decor-str);}.prose > hr {margin:var(--sp-7) 0;border:0;border-top:1px solid var(--border-decor);height:0;}.prose > img {max-width:100%;height:auto;display:block;border-radius:var(--r-sm);}.prose a {color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;}@media (hover:hover) and (pointer:fine) {.prose a:hover {color:var(--text-primary);}}.prose a:focus-visible {outline:2px solid var(--accent);outline-offset:2px;}.prose > a[target="_blank"]::after {content:" ↗";font-size:0.8em;vertical-align:0.1em;}.prose > del, .prose > s, .prose > li > del, .prose > li > s {color:var(--text-tertiary);}.prose .task-list-item {list-style:none;margin-inline-start:-1.5em;}.prose .task-list-item input[type="checkbox"] {margin-inline-end:var(--sp-2);vertical-align:middle;}.prose .task-list-item input[disabled] {accent-color:var(--accent);}.prose :focus-visible {outline:2px solid var(--accent);outline-offset:2px;}.prose a:visited {color:var(--accent);text-decoration:underline;text-underline-offset:2px;}