agentcss 0.0.0-stage → 0.11.3

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

@@ -0,0 +1 @@
+.drawer-backdrop {position:fixed;inset:0;z-index:var(--z-modal);background:var(--scrim);display:flex;justify-content:flex-end;}.drawer-backdrop[hidden] {display:none;}.drawer {width:min(420px, 92vw);height:100%;display:flex;flex-direction:column;background:var(--surface);border-inline-start:1px solid var(--border-decor);box-shadow:var(--shadow-2);overflow:hidden;}.drawer--left {border-inline-start:0;border-inline-end:1px solid var(--border-decor);}.drawer--top {width:100%;height:min(60vh, 420px);border-inline-start:0;border-bottom:1px solid var(--border-decor);}.drawer--bottom {width:100%;height:min(60vh, 420px);border-inline-start:0;border-top:1px solid var(--border-decor);}.drawer__head {display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4);border-bottom:1px solid var(--border-decor);flex:0 0 auto;}.drawer__title {flex:1 1 auto;margin:0;font-size:var(--fs-lg);font-weight:600;}.drawer__close {flex:0 0 auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:0;border-radius:var(--r-sm);color:var(--text-secondary);font-size:20px;line-height:1;cursor:pointer;}.drawer__close:focus-visible {outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset);}@media (hover:hover) and (pointer:fine) {.drawer__close:hover {background:var(--surface-sunken);}}.drawer__body {flex:1 1 auto;padding:var(--sp-4);overflow-y:auto;-webkit-overflow-scrolling:touch;}.drawer__foot {flex:0 0 auto;display:flex;gap:var(--sp-2);justify-content:flex-end;padding:var(--sp-4);border-top:1px solid var(--border-decor);}@media (prefers-reduced-motion:no-preference) {.drawer--right {animation:drawer-in-right 220ms var(--ease-drawer, ease);}.drawer--left {animation:drawer-in-left 220ms var(--ease-drawer, ease);}.drawer--top {animation:drawer-in-top 220ms var(--ease-drawer, ease);}.drawer--bottom {animation:drawer-in-bottom 220ms var(--ease-drawer, ease);}@keyframes drawer-in-right {from {transform:translateX(16px);opacity:.6;}}@keyframes drawer-in-left {from {transform:translateX(-16px);opacity:.6;}}@keyframes drawer-in-top {from {transform:translateY(-16px);opacity:.6;}}@keyframes drawer-in-bottom {from {transform:translateY(16px);opacity:.6;}}}.drawer[data-state="leaving"] {opacity:0;transition:opacity 160ms var(--ease-out, ease);}

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

@@ -0,0 +1,229 @@
+(function (global) {
+'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 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 FOCUSABLE = [
+'a[href]',
+'button:not([disabled])',
+'input:not([disabled]):not([type="hidden"])',
+'select:not([disabled])',
+'textarea:not([disabled])',
+'[tabindex]:not([tabindex="-1"])',
+].join(',');
+
+var lockCount = 0, savedScroll = 0, inerts = [];
+
+function lockScroll() {
+if (lockCount === 0) {
+savedScroll = window.pageYOffset || 0;
+document.body.style.overflow = 'hidden';
+}
+lockCount++;
+}
+function unlockScroll() {
+lockCount = Math.max(0, lockCount - 1);
+if (lockCount === 0) {
+document.body.style.overflow = '';
+window.scrollTo(0, savedScroll);
+}
+}
+
+function setBackgroundInert(on) {
+if (on) {
+if (inerts.length) return;
+
+Array.prototype.forEach.call(document.body.children, function (n) {
+if (n.hasAttribute && n.hasAttribute('data-drawer-host')) return;
+if (n.tagName === 'SCRIPT' || n.tagName === 'STYLE') return;
+n.inert = true;
+n.setAttribute('aria-hidden', 'true');
+inerts.push(n);
+});
+} else {
+inerts.forEach(function (n) {
+n.inert = false;
+n.removeAttribute('aria-hidden');
+});
+inerts = [];
+}
+}
+
+function open(opt) {
+opt = opt || {};
+var place = opt.place || 'right';
+
+var fr = flFocusReturn({});
+fr.save();
+
+var host = document.createElement('div');
+host.className = 'drawer-backdrop';
+host.setAttribute('data-drawer-host', '');
+if (opt.label) host.setAttribute('aria-label', opt.label);
+
+var d = document.createElement('aside');
+d.className = 'drawer drawer--' + place;
+d.setAttribute('role', 'dialog');
+d.setAttribute('aria-modal', 'true');
+if (!d.id) d.id = 'drawer-' + (new Date()).getTime();
+if (opt.title) d.setAttribute('aria-labelledby', d.id + '-title');
+else d.setAttribute('aria-label', opt.label || '抽屉');
+d.tabIndex = -1;
+
+var head = document.createElement('div');
+head.className = 'drawer__head';
+var h = document.createElement('h2');
+h.className = 'drawer__title';
+h.id = d.id + '-title';
+h.textContent = opt.title || '';
+var closeBtn = document.createElement('button');
+closeBtn.className = 'drawer__close';
+closeBtn.type = 'button';
+closeBtn.setAttribute('aria-label', '关闭');
+closeBtn.textContent = '\u00D7';
+head.appendChild(h);
+head.appendChild(closeBtn);
+
+var body = document.createElement('div');
+body.className = 'drawer__body';
+if (typeof opt.content === 'string') body.innerHTML = opt.content;
+else if (opt.content) body.appendChild(opt.content);
+
+d.appendChild(head);
+d.appendChild(body);
+
+if (opt.actions && opt.actions.length) {
+var foot = document.createElement('div');
+foot.className = 'drawer__foot';
+opt.actions.forEach(function (a) {
+var b = document.createElement('button');
+b.type = 'button';
+b.className = 'btn' + (a.variant ? ' btn--' + a.variant : '');
+b.textContent = a.label;
+b.addEventListener('click', function () {
+if (a.onClick) a.onClick(close);
+if (a.keepOpen !== true) close();
+});
+foot.appendChild(b);
+});
+d.appendChild(foot);
+}
+
+host.appendChild(d);
+document.body.appendChild(host);
+
+setBackgroundInert(true);
+lockScroll();
+
+var f = d.querySelectorAll(FOCUSABLE);
+if (opt.initialFocus) {
+var t = d.querySelector(opt.initialFocus);
+if (t) t.focus();
+else (f[0] || d).focus();
+} else {
+(f[0] || d).focus();
+}
+
+function onKey(e) {
+var k = e.key;
+
+if (k === 'Escape' || k === 'Esc') { e.preventDefault(); close(); return; }
+if (k !== 'Tab') return;
+
+var list = [].slice.call(d.querySelectorAll(FOCUSABLE))
+.filter(function (x) { return x.offsetParent !== null; });
+if (!list.length) { e.preventDefault(); d.focus(); return; }
+var first = list[0], last = list[list.length - 1];
+if (e.shiftKey && (document.activeElement === first || document.activeElement === d)) {
+e.preventDefault(); last.focus();
+} else if (!e.shiftKey && document.activeElement === last) {
+e.preventDefault(); first.focus();
+}
+}
+function onBackdropClick(e) { if (e.target === host) close(); }
+
+d.addEventListener('keydown', onKey);
+host.addEventListener('click', onBackdropClick);
+closeBtn.addEventListener('click', function () { close(); });
+
+var closed = false;
+function close() {
+if (closed) return;
+closed = true;
+d.setAttribute('data-state', 'leaving');
+d.removeEventListener('keydown', onKey);
+host.removeEventListener('click', onBackdropClick);
+setBackgroundInert(false);
+unlockScroll();
+
+var done = false;
+function remove() {
+if (done) return; done = true;
+if (host.parentNode) host.parentNode.removeChild(host);
+}
+d.addEventListener('transitionend', remove, { once: true });
+setTimeout(remove, 320);
+
+fr.restore();
+
+flEmit(d, 'fl-close', null);
+if (opt.onClose) opt.onClose();
+}
+
+return { el: d, close: close };
+}
+
+global.Drawer = { open: open };
+})(window);

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

@@ -0,0 +1 @@
+.dd {position:relative;display:inline-block;}.dd__btn {display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;padding:0 var(--sp-4);background:var(--surface);color:var(--text-primary);border:1px solid var(--border-control);border-radius:var(--r-sm);font:inherit;font-size:var(--fs-sm);cursor:pointer;}.dd__btn:focus-visible {outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset);}.dd__caret {width:0;height:0;border:4px solid transparent;border-top-color:currentColor;transition:transform 140ms var(--ease-out, ease);}.dd__btn[aria-expanded="true"] .dd__caret {transform:rotate(180deg);}.dd__menu {position:absolute;top:calc(100% + var(--sp-1));inset-inline-start:0;z-index:var(--z-raised);min-width:180px;margin:0;padding:var(--sp-1);list-style:none;background:var(--surface-raised);border:1px solid var(--border-decor);border-radius:var(--r-sm);box-shadow:var(--shadow-2, 0 6px 18px rgba(0, 0, 0, .14));}.dd__menu[hidden] {display:none;}.dd__item {display:flex;align-items:center;gap:var(--sp-2);height:44px;box-sizing:border-box;padding:0 var(--sp-3);border-radius:var(--r-xs, 3px);color:var(--text-primary);font-size:var(--fs-sm);cursor:pointer;user-select:none;}.dd__item:focus, .dd__item[data-state="active"] {outline:none;background:var(--accent-soft);color:var(--text-primary);}@media (hover:hover) and (pointer:fine) {.dd__item:hover {background:var(--surface-sunken);}}.dd__item[aria-disabled="true"] {color:var(--text-tertiary);cursor:not-allowed;background:var(--surface-sunken);}.dd__sep {height:1px;margin:var(--sp-1) 0;background:var(--border-decor);list-style:none;}.dd__sep[role="separator"] {display:block;}.dd__check {width:1em;font-weight:700;color:var(--accent);}@media (prefers-reduced-motion:reduce) {.dd__caret {transition:none;}}@media (max-width:30rem) {.dd--end .dd__menu {inset-inline-start:auto;inset-inline-end:0;}}

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

@@ -0,0 +1,365 @@
+(function (global) {
+'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);
+},
+};
+};
+
+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);
+},
+};
+};
+
+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 FOCUSABLE = 'li[role="menuitem"]:not([aria-disabled="true"])';
+
+function itemsOf(menu) {
+return Array.prototype.slice.call(menu.querySelectorAll(FOCUSABLE));
+}
+
+function create(root, opt) {
+opt = opt || {};
+var btn = root.querySelector('[data-dd-btn]') || root.querySelector('button');
+var menu = root.querySelector('[data-dd-menu]');
+if (!btn || !menu) throw new Error('dropdown: 缺少 [data-dd-btn] 或 [data-dd-menu]');
+
+var fr = flFocusReturn({ fallback: btn });
+var active = -1;
+
+menu.setAttribute('role', 'menu');
+if (!menu.getAttribute('aria-label') && !menu.getAttribute('aria-labelledby')) {
+menu.setAttribute('aria-label', opt.label || '菜单');
+}
+Array.prototype.forEach.call(menu.querySelectorAll('li'), function (li) {
+
+if (!li.hasAttribute('data-dd-sep') &&
+String(li.className).indexOf('dd__item') < 0) {
+li.className = li.className ? (li.className + ' dd__item') : 'dd__item';
+}
+if (li.hasAttribute('data-dd-sep')) {
+li.setAttribute('role', 'separator');
+li.setAttribute('aria-hidden', 'true');
+} else if (!li.hasAttribute('role')) {
+li.setAttribute('role', 'menuitem');
+
+li.setAttribute('tabindex', '-1');
+}
+});
+
+function open() {
+
+fr.save();
+menu.hidden = false;
+btn.setAttribute('aria-expanded', 'true');
+active = -1;
+flEmit(root, 'fl-open', null);
+if (opt.onOpen) opt.onOpen();
+}
+
+function close(restoreFocus) {
+
+menu.hidden = true;
+btn.setAttribute('aria-expanded', 'false');
+active = -1;
+if (restoreFocus !== false) fr.restore();
+flEmit(root, 'fl-close', null);
+if (opt.onClose) opt.onClose();
+}
+
+function focusAt(i) {
+var list = itemsOf(menu);
+if (!list.length) return;
+if (i < 0) i = list.length - 1;
+if (i >= list.length) i = 0;
+list.forEach(function (x) { x.removeAttribute('data-state'); });
+list[i].setAttribute('data-state', 'active');
+list[i].focus();
+active = i;
+}
+
+function current() {
+var list = itemsOf(menu);
+return active >= 0 ? list[active] : document.activeElement;
+}
+
+var roving = flRoving({
+container: root,
+items: function () { return itemsOf(menu); },
+axis: 'y',
+tabindex: false,
+onMove: function (i) { focusAt(i); },
+});
+
+if (!menu.id) menu.id = 'dd-menu-' + (new Date()).getTime();
+btn.setAttribute('aria-haspopup', 'true');
+btn.setAttribute('aria-expanded', 'false');
+btn.setAttribute('aria-controls', menu.id);
+
+btn.addEventListener('click', function (e) {
+e.stopPropagation();
+if (menu.hidden) open(); else close();
+});
+
+menu.addEventListener('click', function (e) {
+var li = e.target.closest ? closest(e.target, '[role="menuitem"]') : null;
+if (!li) return;
+e.stopPropagation();
+if (li.getAttribute('aria-disabled') === 'true') return;
+close();
+flEmit(root, 'fl-select',
+{ value: li.getAttribute('data-value') || li.textContent.trim(), item: li });
+if (opt.onSelect) opt.onSelect(li.getAttribute('data-value') || li.textContent.trim(), li);
+});
+
+root.addEventListener('keydown', function (e) {
+var k = e.key;
+
+if (e.target === btn) {
+if (k === 'ArrowDown' || k === 'Enter' || k === ' ' || k === 'Spacebar') {
+e.preventDefault();
+open();
+focusAt(0);
+}
+return;
+}
+
+if (closest(e.target, '[data-dd-menu]') !== menu) return;
+
+if (k === 'Tab') { close(false); return; }
+
+if (k === 'Enter' || k === ' ' || k === 'Spacebar') {
+e.preventDefault();
+var li = current();
+if (li) li.click();
+}
+});
+
+var dismiss = flDismissable({
+escOn: [root],
+inside: [root],
+when: function () { return !menu.hidden; },
+onDismiss: function (e, reason) { close(reason === 'esc'); },
+});
+
+return {
+open: open,
+close: close,
+destroy: function () { roving.destroy(); dismiss.destroy(); menu.hidden = true; },
+};
+}
+
+global.Dropdown = { create: create };
+})(window);

package/dist/03-patterns/form-validation/form-validation.css

@@ -0,0 +1 @@
+.form {display:flex;flex-direction:column;gap:var(--sp-5);}.form__row {display:flex;flex-direction:column;gap:var(--sp-5);}.form__actions {display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap;padding-top:var(--sp-2);border-top:1px solid var(--border-decor);}.form__summary {display:inline-flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);max-width:100%;padding:var(--sp-3) var(--sp-4);background:var(--danger-bg);border-radius:var(--r-sm);font-size:var(--fs-sm);line-height:1.5;}.form__summary::before {content:"!";display:inline-grid;place-items:center;width:16px;height:16px;margin-inline-end:var(--sp-2);border-radius:50%;background:var(--danger);color:var(--text-on-accent);font-size:11px;font-weight:700;line-height:1;}.form__summary-title {margin:0;font-size:var(--fs-sm);font-weight:500;color:var(--danger);display:flex;align-items:center;gap:var(--sp-2);}.form__summary-link + .form__summary-link {margin-inline-start:var(--sp-1);}.form__summary-link {display:inline-block;color:var(--danger);font-size:var(--fs-sm);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;}@media (hover:hover) and (pointer:fine) {.form__summary-link:hover {color:var(--text-primary);}}.form__summary-link:focus-visible {outline:2px solid var(--danger);outline-offset:2px;border-radius:2px;}.field__error {display:none;}.field[data-dirty] .field__error {display:flex;}.form--has-summary .field__error:not(:empty) {display:flex;}.field__error:empty {display:none;}.field__error::before {content:"!";display:inline-grid;place-items:center;flex:none;width:14px;height:14px;margin-inline-end:var(--sp-1);border-radius:50%;background:var(--danger);color:var(--text-on-accent);font-size:10px;font-weight:700;line-height:1;}.form__notice {padding:var(--sp-4) var(--sp-5);background:var(--success-bg);border-radius:var(--r-sm);font-size:var(--fs-sm);color:var(--text-primary);}.field--checking .field__input::after {content:"";}.field__checking-hint {display:flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-xs);color:var(--text-tertiary);}.field__checking-hint::before {content:"";width:12px;height:12px;border:2px solid var(--border-control);border-top-color:var(--accent);border-radius:50%;animation:form-spin 700ms linear infinite;}@keyframes form-spin {to {transform:rotate(360deg);}}@media (prefers-reduced-motion:reduce) {.field__checking-hint::before {animation-duration:1.2s !important;}}