@linhey/rhine-design 0.2.0 → 0.4.0

package/components/components.tsx

@@ -10,35 +10,35 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 export function Button({ variant = 'primary', busy = false, busyLabel = '处理中', disabled, className, children, onClick, type = 'button', ...props }: ButtonProps) {
   return <button {...props} type={type} disabled={disabled} aria-disabled={busy || disabled || undefined}
-    aria-busy={busy || undefined} className={classes('tod-button', `tod-button--${variant}`, className)}
+    aria-busy={busy || undefined} className={classes('rhine-button', `rhine-button--${variant}`, className)}
     onClick={event => { if (busy) { event.preventDefault(); return; } onClick?.(event); }}>
-    <span className={busy ? 'tod-button__ghost' : undefined}>{children}</span>
-    {busy && <span className="tod-button__busy"><span className="tod-spinner" aria-hidden="true" /><span className="tod-sr-only">{busyLabel}</span></span>}
+    <span className={busy ? 'rhine-button__ghost' : undefined}>{children}</span>
+    {busy && <span className="rhine-button__busy"><span className="rhine-spinner" aria-hidden="true" /><span className="rhine-sr-only">{busyLabel}</span></span>}
   </button>;
 }
 export function Badge({ tone = 'neutral', children }: { tone?: Tone; children: ReactNode }) {
-  return <span className={`tod-badge tod-tone-${tone}`}>{children}</span>;
+  return <span className={`rhine-badge rhine-tone-${tone}`}>{children}</span>;
 }
 export function Surface({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
-  return <div {...props} className={classes('tod-surface', className)} />;
+  return <div {...props} className={classes('rhine-surface', className)} />;
 }
 export function SelectionCard({ label, selected, onSelectedChange, disabled = false, children }: {
   label: string; selected: boolean; onSelectedChange: (value: boolean) => void; disabled?: boolean; children: ReactNode;
 }) {
-  return <label className="tod-selection" data-selected={selected} data-disabled={disabled}>
-    <span className="tod-selection__heading"><strong>{label}</strong><input type="checkbox" aria-label={label} checked={selected} disabled={disabled} onChange={event => onSelectedChange(event.target.checked)} /></span>
-    <span className="tod-selection__content">{children}</span>
+  return <label className="rhine-selection" data-selected={selected} data-disabled={disabled}>
+    <span className="rhine-selection__heading"><strong>{label}</strong><input type="checkbox" aria-label={label} checked={selected} disabled={disabled} onChange={event => onSelectedChange(event.target.checked)} /></span>
+    <span className="rhine-selection__content">{children}</span>
   </label>;
 }
 export function TextField({ label, hint, error, id: providedId, className, ...props }: InputHTMLAttributes<HTMLInputElement> & { label: string; hint?: string; error?: string }) {
   const generatedId = useId();
   const id = providedId || generatedId;
   const describedBy = [props['aria-describedby'], hint && `${id}-hint`, error && `${id}-error`].filter(Boolean).join(' ');
-  return <div className={classes('tod-field', className)}>
+  return <div className={classes('rhine-field', className)}>
     <label htmlFor={id}>{label}</label>
     <input {...props} id={id} aria-invalid={error ? true : props['aria-invalid']} aria-describedby={describedBy || undefined} />
-    {hint && <span id={`${id}-hint`} className="tod-field__hint">{hint}</span>}
-    {error && <span id={`${id}-error`} className="tod-field__error" role="alert">{error}</span>}
+    {hint && <span id={`${id}-hint`} className="rhine-field__hint">{hint}</span>}
+    {error && <span id={`${id}-error`} className="rhine-field__error" role="alert">{error}</span>}
   </div>;
 }
 export interface Choice { value: string; label: string; disabled?: boolean }
@@ -46,8 +46,8 @@ export interface TabItem extends Choice { content: ReactNode }
 export function Tabs({ label, items, value, onValueChange }: { label: string; items: TabItem[]; value: string; onValueChange: (value: string) => void }) {
   const id = useId();
   const buttons = useRef<(HTMLButtonElement | null)[]>([]);
-  return <div className="tod-tabs">
-    <div role="tablist" aria-label={label} className="tod-tabs__list" onKeyDown={event => {
+  return <div className="rhine-tabs">
+    <div role="tablist" aria-label={label} className="rhine-tabs__list" onKeyDown={event => {
       if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;
       const available = items.map((item, index) => ({ ...item, index })).filter(item => !item.disabled);
       if (!available.length) return;
@@ -61,36 +61,36 @@ export function Tabs({ label, items, value, onValueChange }: { label: string; it
         aria-selected={value === item.value} tabIndex={value === item.value ? 0 : -1} onClick={() => onValueChange(item.value)}>{item.label}</button>)}
     </div>
     {items.map((item, index) => <div key={item.value} role="tabpanel" id={`${id}-panel-${index}`} aria-labelledby={`${id}-tab-${index}`}
-      hidden={value !== item.value} tabIndex={0} className="tod-tabs__panel">{item.content}</div>)}
+      hidden={value !== item.value} tabIndex={0} className="rhine-tabs__panel">{item.content}</div>)}
   </div>;
 }
 export function SegmentedControl({ label, items, value, onValueChange }: { label: string; items: Choice[]; value: string; onValueChange: (value: string) => void }) {
   const name = useId();
-  return <fieldset className="tod-segmented"><legend className="tod-sr-only">{label}</legend>
-    {items.map(item => <label key={item.value} className="tod-segmented__option">
+  return <fieldset className="rhine-segmented"><legend className="rhine-sr-only">{label}</legend>
+    {items.map(item => <label key={item.value} className="rhine-segmented__option">
       <input type="radio" name={name} value={item.value} checked={value === item.value} disabled={item.disabled} onChange={() => onValueChange(item.value)} />
       <span>{item.label}</span>
     </label>)}
   </fieldset>;
 }
 export function Notice({ tone = 'neutral', title, children, action }: { tone?: Tone; title: string; children?: ReactNode; action?: ReactNode }) {
-  return <div className={`tod-notice tod-tone-${tone}`} role={tone === 'error' ? 'alert' : 'status'}>
-    <div><strong>{title}</strong>{children && <div className="tod-notice__body">{children}</div>}</div>{action}
+  return <div className={`rhine-notice rhine-tone-${tone}`} role={tone === 'error' ? 'alert' : 'status'}>
+    <div><strong>{title}</strong>{children && <div className="rhine-notice__body">{children}</div>}</div>{action}
   </div>;
 }
 export function Progress({ label, value, valueText }: { label: string; value: number | null; valueText?: string }) {
   const determinate = value !== null && Number.isFinite(value);
   const amount = determinate ? Math.max(0, Math.min(100, value)) : null;
-  return <div className="tod-progress">
-    <div className="tod-progress__label"><span>{label}</span><strong>{valueText ?? (amount === null ? '处理中' : `${amount}%`)}</strong></div>
-    <div className="tod-progress__track" role="progressbar" aria-label={label} aria-valuemin={0} aria-valuemax={100}
+  return <div className="rhine-progress">
+    <div className="rhine-progress__label"><span>{label}</span><strong>{valueText ?? (amount === null ? '处理中' : `${amount}%`)}</strong></div>
+    <div className="rhine-progress__track" role="progressbar" aria-label={label} aria-valuemin={0} aria-valuemax={100}
       aria-valuenow={amount ?? undefined} aria-valuetext={valueText ?? (amount === null ? '进度未知' : `${amount}%`)} data-indeterminate={amount === null}>
       <span style={amount === null ? undefined : { transform: `scaleX(${amount / 100})` }} />
     </div>
   </div>;
 }
 export function Skeleton({ label = '正在加载', lines = 3 }: { label?: string; lines?: number }) {
-  return <div className="tod-skeleton" role="status"><span className="tod-sr-only">{label}</span>
+  return <div className="rhine-skeleton" role="status"><span className="rhine-sr-only">{label}</span>
     {Array.from({ length: Math.max(1, Math.min(8, Math.floor(lines) || 1)) }, (_, index) => <span aria-hidden="true" key={index} />)}
   </div>;
 }
@@ -111,7 +111,7 @@ export function Disclosure({ title, children, defaultOpen = false }: { title: st
   }, []);
   useEffect(() => {
     if (!animation.current || !node.current) return;
-    if (parseFloat(getComputedStyle(node.current).getPropertyValue('--tod-duration-notice')) !== 0) return;
+    if (parseFloat(getComputedStyle(node.current).getPropertyValue('--rhine-duration-notice')) !== 0) return;
     animation.current.cancel(); animation.current = null;
     node.current.open = intent.current; setOpen(intent.current);
   });
@@ -130,22 +130,22 @@ export function Disclosure({ title, children, defaultOpen = false }: { title: st
     const reduced = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
     if (reduced || !el.animate) { el.open = expanded; setOpen(expanded); return; }
     const style = getComputedStyle(el);
-    const parsedDuration = parseFloat(style.getPropertyValue('--tod-duration-notice'));
+    const parsedDuration = parseFloat(style.getPropertyValue('--rhine-duration-notice'));
     const duration = Number.isFinite(parsedDuration) ? parsedDuration : 200;
     if (duration === 0) { el.open = expanded; setOpen(expanded); return; }
     const to = expanded ? el.getBoundingClientRect().height : summary.getBoundingClientRect().height + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
-    const next = el.animate([{ height: `${from}px` }, { height: `${to}px` }], { duration, easing: style.getPropertyValue(expanded ? '--tod-ease-standard' : '--tod-ease-exit').trim() || 'ease' });
+    const next = el.animate([{ height: `${from}px` }, { height: `${to}px` }], { duration, easing: style.getPropertyValue(expanded ? '--rhine-ease-standard' : '--rhine-ease-exit').trim() || 'ease' });
     animation.current = next;
     next.onfinish = () => {
       if (animation.current !== next) return;
       el.open = expanded; setOpen(expanded); animation.current = null;
     };
   }
-  return <details ref={node} open={open} data-expanded={open} className="tod-disclosure">
+  return <details ref={node} open={open} data-expanded={open} className="rhine-disclosure">
     <summary onClick={event => { event.preventDefault(); toggle(); }}>{title}<span aria-hidden="true">+</span></summary>
-    <div className="tod-disclosure__content">{children}</div>
+    <div className="rhine-disclosure__content">{children}</div>
   </details>;
 }
 export function EmptyState({ title, description, action }: { title: string; description: string; action?: ReactNode }) {
-  return <div className="tod-empty"><strong>{title}</strong><p>{description}</p>{action}</div>;
+  return <div className="rhine-empty"><strong>{title}</strong><p>{description}</p>{action}</div>;
 }

package/components/index.ts

@@ -1,4 +1,6 @@
 import './styles.css';
+export { StatusTimeline, TimelineLegend } from './StatusTimeline';
+export type { TimelineSegment, TimelineStatus } from './StatusTimeline';
 
 export { Logo } from './Logo';
 export type { LogoProps } from './Logo';
@@ -16,9 +18,13 @@ export { Metric, KeyValue, DataTable, Pagination } from './Data';
 export type { DataColumn, DataTableProps, TableSort } from './Data';
 export { Checkbox, RadioGroup, Switch, Textarea, SearchField, Combobox } from './Forms';
 export type { ComboboxProps } from './Forms';
-export { Dialog, ConfirmDialog, Popover, Menu, Tooltip } from './Overlays';
+export { Dialog, Drawer, ConfirmDialog, Popover, Menu, Tooltip } from './Overlays';
 export type { DialogProps, MenuItem } from './Overlays';
 export { Toast } from './Toast';
+export { SideNav, Breadcrumbs, Steps } from './Navigation';
+export type { NavItem, NavGroup, SideNavProps, BreadcrumbItem, BreadcrumbsProps, StepItem, StepsProps } from './Navigation';
+export { Fieldset, ErrorSummary } from './FormWorkflow';
+export type { FieldsetProps, FieldError, ErrorSummaryProps } from './FormWorkflow';
 
 export { Button, Badge, Surface, SelectionCard, TextField, Tabs, SegmentedControl, Notice, Progress, Skeleton, Disclosure, EmptyState } from './components';
 export type { ButtonProps, Tone, Choice, TabItem } from './components';

package/components/patterns.css

@@ -0,0 +1,39 @@
+.rhine-side-nav__group { margin-top:var(--rhine-space-4); }
+.rhine-side-nav__group:first-child { margin-top:0; }
+.rhine-side-nav__group>p { margin:0 var(--rhine-space-3) var(--rhine-space-2); font-size:var(--rhine-text-caption); line-height:var(--rhine-leading-caption); color:var(--rhine-muted); }
+.rhine-side-nav ul,.rhine-breadcrumbs ol,.rhine-steps { margin:0; padding:0; list-style:none; }
+.rhine-side-nav ul { display:grid; gap:var(--rhine-space-1); }
+.rhine-side-nav a { min-height:44px; padding:var(--rhine-space-2) var(--rhine-space-3); display:flex; align-items:center; gap:var(--rhine-space-3); border-inline-start:2px solid transparent; border-radius:var(--rhine-radius-control); text-decoration:none; font-size:var(--rhine-text-body); line-height:var(--rhine-leading-body); color:var(--rhine-ink); transition:background-color var(--rhine-duration-hover) var(--rhine-ease-standard); overflow-wrap:anywhere; }
+.rhine-side-nav__label { min-width:0; }
+.rhine-side-nav .rhine-icon { flex-shrink:0; color:var(--rhine-muted); }
+.rhine-side-nav a:hover { background:var(--rhine-bg); }
+.rhine-side-nav a[aria-current=page] { background:var(--rhine-selected); border-color:var(--rhine-green); color:var(--rhine-green); font-weight:600; }
+.rhine-side-nav a[aria-current=page] .rhine-icon { color:var(--rhine-green); }
+.rhine-breadcrumbs ol { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; }
+.rhine-breadcrumbs li { display:flex; align-items:center; gap:12px; min-width:0; overflow-wrap:anywhere; font-size:var(--rhine-text-caption); line-height:var(--rhine-leading-caption); color:var(--rhine-muted); }
+.rhine-breadcrumbs a { display:inline-flex; align-items:center; min-height:44px; color:var(--rhine-green); text-underline-offset:3px; }
+.rhine-breadcrumbs [aria-current=page] { color:var(--rhine-ink); font-weight:600; }
+.rhine-breadcrumbs__separator { color:var(--rhine-control); }
+.rhine-steps { display:grid; gap:0; }
+.rhine-steps li { border-inline-start:2px solid var(--rhine-line); }
+.rhine-steps li>div,.rhine-steps button { display:flex; gap:16px; align-items:flex-start; padding:16px; width:100%; text-align:start; color:var(--rhine-muted); }
+.rhine-steps button { border:0; background:none; font:inherit; cursor:pointer; }
+.rhine-steps button:hover { background:var(--rhine-selected); }
+.rhine-steps strong,.rhine-steps small { display:block; overflow-wrap:anywhere; }
+.rhine-steps small { margin-top:4px; font-size:12px; font-weight:400; }
+.rhine-steps__number { flex:0 0 28px; font:14px/24px var(--rhine-mono); }
+.rhine-steps li[data-state=current],.rhine-steps li[data-state=complete] { border-color:var(--rhine-green); }
+.rhine-steps li[data-state=current]>div { background:var(--rhine-selected); color:var(--rhine-green); animation:rhine-pattern-enter var(--rhine-duration-panel) var(--rhine-ease-standard); }
+.rhine-steps li[data-state=error] { border-color:var(--rhine-error); }
+.rhine-steps li[data-state=error]>div { color:var(--rhine-error); background:var(--rhine-error-bg); }
+.rhine-fieldset { min-width:0; margin:0; padding:20px; border:1px solid var(--rhine-line); border-radius:var(--rhine-radius-card); }
+.rhine-fieldset legend { padding:0 8px; font-weight:600; }
+.rhine-fieldset>p { margin:0 0 20px; color:var(--rhine-muted); font-size:12px; }
+.rhine-fieldset__body { display:grid; gap:16px; }
+.rhine-error-summary { padding:20px; border:1px solid var(--rhine-error); border-inline-start:3px solid var(--rhine-error); background:var(--rhine-error-bg); }
+.rhine-error-summary h3 { margin:0 0 8px; font-size:16px; }
+.rhine-error-summary ul { padding-inline-start:20px; margin:0; }
+.rhine-error-summary a { display:inline-block; padding:10px 0; color:var(--rhine-error); text-underline-offset:3px; overflow-wrap:anywhere; }
+.rhine-dialog.rhine-drawer { inset-block:0; inset-inline-end:0; inset-inline-start:auto; width:min(440px,100%); max-height:100dvh; margin:0; transform:none; border-radius:0; animation:rhine-drawer-enter var(--rhine-duration-overlay) var(--rhine-ease-standard); }
+@keyframes rhine-drawer-enter { from { opacity:0; transform:translateX(3px); } to { opacity:1; transform:translateX(0); } }
+@keyframes rhine-pattern-enter { from { opacity:.65; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } }

package/components/styles.css

@@ -1,109 +1,113 @@
 @import './tokens.css';
 @import './typography.css';
 @import './common.css';
+@import './patterns.css';
+@import './timeline.css';
 
-.tod-theme { color:var(--tod-ink); background:var(--tod-bg); font:var(--tod-text-body)/var(--tod-leading-body) var(--tod-font); font-synthesis:none; }
-.tod-theme *, .tod-theme *::before, .tod-theme *::after { box-sizing:border-box; }
-.tod-theme [hidden] { display:none!important; }
-.tod-theme :is(button,input,select,textarea,summary,a,[tabindex]):focus-visible { outline:2px solid var(--tod-green); outline-offset:3px; }
-.tod-sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
-.tod-button { position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; padding:10px 16px; border:1px solid var(--tod-ink); border-radius:var(--tod-radius-control); font:500 14px/22px var(--tod-font); background:var(--tod-ink); color:var(--tod-surface); cursor:pointer; overflow-wrap:anywhere; transition:background-color var(--tod-duration-hover) var(--tod-ease-standard),border-color var(--tod-duration-hover) var(--tod-ease-standard),transform var(--tod-duration-press) var(--tod-ease-standard); }
-.tod-button:hover:not(:disabled):not([aria-disabled=true]) { background:var(--tod-green); border-color:var(--tod-green); }
-.tod-button:active:not(:disabled):not([aria-disabled=true]) { transform:translateY(1px); }
-.tod-button--secondary { background:var(--tod-surface); color:var(--tod-ink); border-color:var(--tod-control); }
-.tod-button--quiet { background:transparent; color:var(--tod-green); border-color:transparent; }
-.tod-button--secondary:hover:not(:disabled):not([aria-disabled=true]),.tod-button--quiet:hover:not(:disabled):not([aria-disabled=true]) { background:var(--tod-selected); }
-.tod-button--danger { background:var(--tod-error); border-color:var(--tod-error); }
-.tod-button--danger:hover:not(:disabled):not([aria-disabled=true]) { background:#81342e; border-color:#81342e; }
-.tod-button:disabled { background:var(--tod-selected); border-color:var(--tod-line); color:var(--tod-muted); cursor:default; }
-.tod-button[aria-busy=true] { cursor:wait; }
-.tod-button__ghost { visibility:hidden; }
-.tod-button__busy { position:absolute; inset:0; display:grid; place-items:center; }
-.tod-spinner { width:18px; height:18px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:tod-spin var(--tod-duration-loading) linear infinite; }
-.tod-tone-neutral { --tod-tone:var(--tod-muted); --tod-tone-bg:var(--tod-selected); }
-.tod-tone-success { --tod-tone:var(--tod-green); --tod-tone-bg:var(--tod-selected); }
-.tod-tone-warning { --tod-tone:var(--tod-warning); --tod-tone-bg:var(--tod-warning-bg); }
-.tod-tone-error { --tod-tone:var(--tod-error); --tod-tone-bg:var(--tod-error-bg); }
-.tod-badge { display:inline-block; padding:2px 8px; border-radius:2px; background:var(--tod-tone-bg); color:var(--tod-tone); font:500 12px/20px var(--tod-font); }
-.tod-surface { padding:24px; border:1px solid var(--tod-line); border-radius:var(--tod-radius-card); background:var(--tod-surface); min-width:0; }
-.tod-selection { display:block; border:1px solid var(--tod-control); background:var(--tod-surface); border-radius:var(--tod-radius-card); padding:20px; cursor:pointer; min-width:0; transition:background-color var(--tod-duration-hover) var(--tod-ease-standard),border-color var(--tod-duration-hover) var(--tod-ease-standard),box-shadow var(--tod-duration-hover) var(--tod-ease-standard); }
-.tod-selection:hover:not([data-disabled=true]) { border-color:var(--tod-green); background:#f4f7ef; }
-.tod-selection[data-selected=true] { border-color:var(--tod-green); background:var(--tod-selected); box-shadow:inset 0 0 0 1px var(--tod-green); }
-.tod-selection[data-disabled=true] { cursor:default; color:var(--tod-muted); background:var(--tod-bg); }
-.tod-selection:focus-within { outline:2px solid var(--tod-green); outline-offset:3px; }
-.tod-selection__heading { display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:16px; overflow-wrap:anywhere; }
-.tod-selection input { width:18px; height:18px; accent-color:var(--tod-green); flex-shrink:0; }
-.tod-selection__content { display:block; margin-top:16px; overflow-wrap:anywhere; }
-.tod-field { display:flex; flex-direction:column; gap:8px; min-width:0; }
-.tod-field>label { font-weight:500; }
-.tod-field input { width:100%; min-width:0; min-height:44px; padding:10px 12px; color:var(--tod-ink); background:var(--tod-surface); border:1px solid var(--tod-control); border-radius:var(--tod-radius-control); font:14px/22px var(--tod-font); transition:border-color var(--tod-duration-hover) var(--tod-ease-standard),background-color var(--tod-duration-hover) var(--tod-ease-standard); }
-.tod-field input::placeholder { color:var(--tod-muted); }
-.tod-field input[aria-invalid=true] { border-color:var(--tod-error); }
-.tod-field input:disabled { background:var(--tod-selected); color:var(--tod-muted); }
-.tod-field__hint,.tod-field__error { font-size:12px; line-height:18px; }
-.tod-field__hint { color:var(--tod-muted); }
-.tod-field__error { color:var(--tod-error); }
-.tod-tabs__list { display:flex; flex-wrap:wrap; gap:24px; border-bottom:1px solid var(--tod-line); }
-.tod-tabs__list button { position:relative; background:none; border:0; padding:12px 0; min-height:44px; color:var(--tod-muted); font:500 14px/22px var(--tod-font); cursor:pointer; transition:color var(--tod-duration-hover) var(--tod-ease-standard); }
-.tod-tabs__list button::after { content:''; position:absolute; bottom:-1px; inset-inline:0; height:2px; background:var(--tod-green); transform:scaleX(0); transform-origin:left; transition:transform var(--tod-duration-panel) var(--tod-ease-standard); }
-.tod-tabs__list button[aria-selected=true] { color:var(--tod-ink); }
-.tod-tabs__list button[aria-selected=true]::after { transform:scaleX(1); }
-.tod-tabs__list button:disabled { color:var(--tod-muted); opacity:.6; cursor:default; }
-.tod-tabs__panel { padding-top:20px; animation:tod-enter var(--tod-duration-panel) var(--tod-ease-standard); }
-.tod-segmented { display:inline-flex; flex-wrap:wrap; gap:3px; padding:3px; border:1px solid var(--tod-control); border-radius:var(--tod-radius-control); margin:0; min-width:0; }
-.tod-segmented__option { position:relative; display:flex; flex:1 0 auto; cursor:pointer; }
-.tod-segmented input { position:absolute; opacity:0; width:1px; height:1px; }
-.tod-segmented__option span { display:flex; justify-content:center; align-items:center; min-height:40px; padding:8px 12px; color:var(--tod-muted); font-size:14px; transition:background-color var(--tod-duration-hover) var(--tod-ease-standard),color var(--tod-duration-hover) var(--tod-ease-standard); }
-.tod-segmented input:checked+span { background:var(--tod-ink); color:var(--tod-surface); }
-.tod-segmented input:focus-visible+span { outline:2px solid var(--tod-green); outline-offset:3px; }
-.tod-segmented input:disabled+span { opacity:.6; cursor:default; }
-.tod-notice { padding:16px; border-left:3px solid var(--tod-tone); background:var(--tod-tone-bg); color:var(--tod-tone); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; animation:tod-enter var(--tod-duration-notice) var(--tod-ease-standard); }
-.tod-notice>div { flex:1 1 200px; min-width:0; overflow-wrap:anywhere; }
-.tod-notice strong { font-size:14px; font-weight:600; }
-.tod-notice__body { margin-top:4px; font-size:12px; line-height:20px; }
-.tod-progress__label { display:flex; justify-content:space-between; gap:12px; font-size:12px; margin-bottom:8px; }
-.tod-progress__label strong { font-variant-numeric:tabular-nums; }
-.tod-progress__track { height:6px; background:var(--tod-line); overflow:hidden; }
-.tod-progress__track>span { display:block; height:100%; background:var(--tod-green); transform-origin:left; transition:transform var(--tod-duration-progress) var(--tod-ease-standard); }
-.tod-progress__track[data-indeterminate=true]>span { width:30%; animation:tod-progress var(--tod-duration-loading) var(--tod-ease-standard) infinite; }
-.tod-skeleton { position:relative; display:flex; flex-direction:column; gap:12px; }
-.tod-skeleton>span[aria-hidden] { display:block; height:16px; background:var(--tod-line); animation:tod-pulse var(--tod-duration-skeleton) ease-in-out infinite; }
-.tod-skeleton>span[aria-hidden]:last-child { width:65%; }
-.tod-disclosure { border-top:1px solid var(--tod-line); border-bottom:1px solid var(--tod-line); overflow:hidden; }
-.tod-disclosure summary { min-height:48px; padding:12px 0; list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; font-weight:500; }
-.tod-disclosure summary::-webkit-details-marker { display:none; }
-.tod-theme .tod-disclosure summary:focus-visible { outline-offset:-3px; }
-.tod-disclosure summary>span { font:20px var(--tod-mono); transition:transform var(--tod-duration-notice) var(--tod-ease-standard); }
-.tod-disclosure[data-expanded=true] summary>span { transform:rotate(45deg); }
-.tod-disclosure__content { padding:4px 0 20px; }
-.tod-empty { padding:32px 24px; text-align:center; border:1px solid var(--tod-line); background:var(--tod-surface); }
-.tod-empty strong { font-size:16px; }.tod-empty p { max-width:400px; margin:8px auto 20px; color:var(--tod-muted); }
-@keyframes tod-spin { to { transform:rotate(360deg); } }
-.tod-logo { display:inline-flex; flex:none; align-items:center; vertical-align:middle; color:var(--tod-green); line-height:1; }
-.tod-logo__symbol { display:block; width:var(--tod-logo-size); height:var(--tod-logo-size); flex:none; fill:currentColor; }
-.tod-logo--icon { width:var(--tod-logo-size); height:var(--tod-logo-size); border-radius:22%; background:var(--tod-bg); }
-.tod-logo[data-theme=dark] { color:var(--tod-bg); }
-.tod-logo--icon[data-theme=dark] { background:var(--tod-green); }
-.tod-logo--lockup { gap:12px; }
-.tod-logo__wordmark { font:600 20px/1 var(--tod-font); letter-spacing:.08em; white-space:nowrap; }
-.tod-logo__plate--left { --tod-logo-x:calc(var(--tod-logo-travel) * -.5); --tod-logo-y:calc(var(--tod-logo-travel) * -.866); }
-.tod-logo__plate--right { --tod-logo-x:calc(var(--tod-logo-travel) * .5); --tod-logo-y:calc(var(--tod-logo-travel) * -.866); }
-.tod-logo__plate--base { --tod-logo-x:0px; --tod-logo-y:var(--tod-logo-travel); }
-.tod-logo[data-animate=true] .tod-logo__plate { animation:tod-logo-enter var(--tod-duration-brand) var(--tod-ease-standard) both; }
-@keyframes tod-logo-enter { from { opacity:0; transform:translate(var(--tod-logo-x),var(--tod-logo-y)); } to { opacity:1; transform:translate(0,0); } }
+.rhine-theme { color:var(--rhine-ink); background:var(--rhine-bg); font:var(--rhine-text-body)/var(--rhine-leading-body) var(--rhine-font); font-synthesis:none; }
+.rhine-theme[data-rhine-theme="rhine"] { color-scheme:light; }
+.rhine-theme *, .rhine-theme *::before, .rhine-theme *::after { box-sizing:border-box; }
+.rhine-theme [hidden] { display:none!important; }
+.rhine-theme :is(button,input,select,textarea,summary,a,[tabindex]):focus-visible { outline:2px solid var(--rhine-green); outline-offset:3px; }
+.rhine-sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
+.rhine-button { position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; padding:10px 16px; border:1px solid var(--rhine-ink); border-radius:var(--rhine-radius-control); font:var(--rhine-weight-label) var(--rhine-text-body)/var(--rhine-leading-body) var(--rhine-font); background:var(--rhine-ink); color:var(--rhine-surface); cursor:pointer; overflow-wrap:anywhere; transition:background-color var(--rhine-duration-hover) var(--rhine-ease-standard),border-color var(--rhine-duration-hover) var(--rhine-ease-standard),transform var(--rhine-duration-press) var(--rhine-ease-standard); }
+.rhine-button:hover:not(:disabled):not([aria-disabled=true]) { background:var(--rhine-green); border-color:var(--rhine-green); }
+.rhine-button:active:not(:disabled):not([aria-disabled=true]) { transform:translateY(1px); }
+.rhine-button--secondary { background:var(--rhine-surface); color:var(--rhine-ink); border-color:var(--rhine-control); }
+.rhine-button--quiet { background:transparent; color:var(--rhine-green); border-color:transparent; }
+.rhine-button--secondary:hover:not(:disabled):not([aria-disabled=true]),.rhine-button--quiet:hover:not(:disabled):not([aria-disabled=true]) { background:var(--rhine-selected); }
+.rhine-button--danger { background:var(--rhine-error); border-color:var(--rhine-error); }
+.rhine-button--danger:hover:not(:disabled):not([aria-disabled=true]) { background:#81342e; border-color:#81342e; }
+.rhine-button:disabled { background:var(--rhine-selected); border-color:var(--rhine-line); color:var(--rhine-muted); cursor:default; }
+.rhine-button[aria-busy=true] { cursor:wait; }
+.rhine-button__ghost { visibility:hidden; }
+.rhine-button__busy { position:absolute; inset:0; display:grid; place-items:center; }
+.rhine-spinner { width:18px; height:18px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:rhine-spin var(--rhine-duration-loading) linear infinite; }
+.rhine-tone-neutral { --rhine-tone:var(--rhine-muted); --rhine-tone-bg:var(--rhine-selected); }
+.rhine-tone-success { --rhine-tone:var(--rhine-green); --rhine-tone-bg:var(--rhine-selected); }
+.rhine-tone-warning { --rhine-tone:var(--rhine-warning); --rhine-tone-bg:var(--rhine-warning-bg); }
+.rhine-tone-error { --rhine-tone:var(--rhine-error); --rhine-tone-bg:var(--rhine-error-bg); }
+.rhine-badge { display:inline-block; padding:2px 8px; border-radius:2px; background:var(--rhine-tone-bg); color:var(--rhine-tone); font:500 12px/20px var(--rhine-font); }
+.rhine-surface { padding:var(--rhine-space-6); border:1px solid var(--rhine-line); border-radius:var(--rhine-radius-card); background:var(--rhine-surface); min-width:0; }
+.rhine-selection { display:block; border:1px solid var(--rhine-control); background:var(--rhine-surface); border-radius:var(--rhine-radius-card); padding:var(--rhine-space-6); cursor:pointer; min-width:0; transition:background-color var(--rhine-duration-hover) var(--rhine-ease-standard),border-color var(--rhine-duration-hover) var(--rhine-ease-standard),box-shadow var(--rhine-duration-hover) var(--rhine-ease-standard); }
+.rhine-selection:hover:not([data-disabled=true]) { border-color:var(--rhine-green); background:#f4f7ef; }
+.rhine-selection[data-selected=true] { border-color:var(--rhine-green); background:var(--rhine-selected); box-shadow:inset 0 0 0 1px var(--rhine-green); }
+.rhine-selection[data-disabled=true] { cursor:default; color:var(--rhine-muted); background:var(--rhine-bg); }
+.rhine-selection:focus-within { outline:2px solid var(--rhine-green); outline-offset:3px; }
+.rhine-selection__heading { display:flex; align-items:center; justify-content:space-between; gap:var(--rhine-space-4); font-size:var(--rhine-text-heading); line-height:var(--rhine-leading-heading); overflow-wrap:anywhere; }
+.rhine-selection__heading>strong { font-weight:var(--rhine-weight-heading); }
+.rhine-selection input { width:18px; height:18px; accent-color:var(--rhine-green); flex-shrink:0; }
+.rhine-selection__content { display:block; margin-top:var(--rhine-space-2); overflow-wrap:anywhere; }
+.rhine-field { display:flex; flex-direction:column; gap:8px; min-width:0; }
+.rhine-field>label { font-weight:500; }
+.rhine-field input { width:100%; min-width:0; min-height:44px; padding:10px 12px; color:var(--rhine-ink); background:var(--rhine-surface); border:1px solid var(--rhine-control); border-radius:var(--rhine-radius-control); font:var(--rhine-text-body)/var(--rhine-leading-body) var(--rhine-font); transition:border-color var(--rhine-duration-hover) var(--rhine-ease-standard),background-color var(--rhine-duration-hover) var(--rhine-ease-standard); }
+.rhine-field input::placeholder { color:var(--rhine-muted); }
+.rhine-field input[aria-invalid=true] { border-color:var(--rhine-error); }
+.rhine-field input:disabled { background:var(--rhine-selected); color:var(--rhine-muted); }
+.rhine-field__hint,.rhine-field__error { font-size:12px; line-height:18px; }
+.rhine-field__hint { color:var(--rhine-muted); }
+.rhine-field__error { color:var(--rhine-error); }
+.rhine-tabs__list { display:flex; flex-wrap:wrap; gap:24px; border-bottom:1px solid var(--rhine-line); }
+.rhine-tabs__list button { position:relative; background:none; border:0; padding:12px 0; min-height:44px; color:var(--rhine-muted); font:var(--rhine-weight-label) var(--rhine-text-body)/var(--rhine-leading-body) var(--rhine-font); cursor:pointer; transition:color var(--rhine-duration-hover) var(--rhine-ease-standard); }
+.rhine-tabs__list button::after { content:''; position:absolute; bottom:-1px; inset-inline:0; height:2px; background:var(--rhine-green); transform:scaleX(0); transform-origin:left; transition:transform var(--rhine-duration-panel) var(--rhine-ease-standard); }
+.rhine-tabs__list button[aria-selected=true] { color:var(--rhine-ink); }
+.rhine-tabs__list button[aria-selected=true]::after { transform:scaleX(1); }
+.rhine-tabs__list button:disabled { color:var(--rhine-muted); opacity:.6; cursor:default; }
+.rhine-tabs__panel { padding-top:20px; animation:rhine-enter var(--rhine-duration-panel) var(--rhine-ease-standard); }
+.rhine-segmented { display:inline-flex; flex-wrap:wrap; gap:3px; padding:3px; border:1px solid var(--rhine-control); border-radius:var(--rhine-radius-control); margin:0; min-width:0; }
+.rhine-segmented__option { position:relative; display:flex; flex:1 0 auto; cursor:pointer; }
+.rhine-segmented input { position:absolute; opacity:0; width:1px; height:1px; }
+.rhine-segmented__option span { display:flex; justify-content:center; align-items:center; min-height:40px; padding:8px 12px; color:var(--rhine-muted); font-size:14px; transition:background-color var(--rhine-duration-hover) var(--rhine-ease-standard),color var(--rhine-duration-hover) var(--rhine-ease-standard); }
+.rhine-segmented input:checked+span { background:var(--rhine-ink); color:var(--rhine-surface); }
+.rhine-segmented input:focus-visible+span { outline:2px solid var(--rhine-green); outline-offset:3px; }
+.rhine-segmented input:disabled+span { opacity:.6; cursor:default; }
+.rhine-notice { padding:16px; border-left:3px solid var(--rhine-tone); background:var(--rhine-tone-bg); color:var(--rhine-tone); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; animation:rhine-enter var(--rhine-duration-notice) var(--rhine-ease-standard); }
+.rhine-notice>div { flex:1 1 200px; min-width:0; overflow-wrap:anywhere; }
+.rhine-notice strong { font-size:14px; font-weight:600; }
+.rhine-notice__body { margin-top:4px; font-size:12px; line-height:20px; }
+.rhine-progress__label { display:flex; justify-content:space-between; gap:var(--rhine-space-3); font-size:var(--rhine-text-caption); line-height:var(--rhine-leading-caption); margin-bottom:var(--rhine-space-2); }
+.rhine-progress__label strong { font-variant-numeric:tabular-nums; }
+.rhine-progress__track { height:6px; background:var(--rhine-line); overflow:hidden; }
+.rhine-progress__track>span { display:block; height:100%; background:var(--rhine-green); transform-origin:left; transition:transform var(--rhine-duration-progress) var(--rhine-ease-standard); }
+.rhine-progress__track[data-indeterminate=true]>span { width:30%; animation:rhine-progress var(--rhine-duration-loading) var(--rhine-ease-standard) infinite; }
+.rhine-skeleton { position:relative; display:flex; flex-direction:column; gap:12px; }
+.rhine-skeleton>span[aria-hidden] { display:block; height:16px; background:var(--rhine-line); animation:rhine-pulse var(--rhine-duration-skeleton) ease-in-out infinite; }
+.rhine-skeleton>span[aria-hidden]:last-child { width:65%; }
+.rhine-disclosure { border-top:1px solid var(--rhine-line); border-bottom:1px solid var(--rhine-line); overflow:hidden; }
+.rhine-disclosure summary { min-height:48px; padding:12px 0; list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; font-weight:500; }
+.rhine-disclosure summary::-webkit-details-marker { display:none; }
+.rhine-theme .rhine-disclosure summary:focus-visible { outline-offset:-3px; }
+.rhine-disclosure summary>span { font:20px var(--rhine-mono); transition:transform var(--rhine-duration-notice) var(--rhine-ease-standard); }
+.rhine-disclosure[data-expanded=true] summary>span { transform:rotate(45deg); }
+.rhine-disclosure__content { padding:4px 0 20px; }
+.rhine-empty { padding:32px 24px; text-align:center; border:1px solid var(--rhine-line); background:var(--rhine-surface); }
+.rhine-empty strong { font-size:16px; }.rhine-empty p { max-width:400px; margin:8px auto 20px; color:var(--rhine-muted); }
+@keyframes rhine-spin { to { transform:rotate(360deg); } }
+.rhine-logo { display:inline-flex; flex:none; align-items:center; vertical-align:middle; color:var(--rhine-green); line-height:1; }
+.rhine-logo__symbol { display:block; width:var(--rhine-logo-size); height:var(--rhine-logo-size); flex:none; fill:currentColor; }
+.rhine-logo--icon { width:var(--rhine-logo-size); height:var(--rhine-logo-size); border-radius:22%; background:var(--rhine-bg); }
+.rhine-logo[data-theme=dark] { color:var(--rhine-bg); }
+.rhine-logo--icon[data-theme=dark] { background:var(--rhine-green); }
+.rhine-logo--lockup { gap:12px; }
+.rhine-logo__wordmark { font:600 20px/1 var(--rhine-font); letter-spacing:.08em; white-space:nowrap; }
+.rhine-logo__plate--left { --rhine-logo-x:calc(var(--rhine-logo-travel) * -.5); --rhine-logo-y:calc(var(--rhine-logo-travel) * -.866); }
+.rhine-logo__plate--right { --rhine-logo-x:calc(var(--rhine-logo-travel) * .5); --rhine-logo-y:calc(var(--rhine-logo-travel) * -.866); }
+.rhine-logo__plate--base { --rhine-logo-x:0px; --rhine-logo-y:var(--rhine-logo-travel); }
+.rhine-logo[data-animate=true] .rhine-logo__plate { animation:rhine-logo-enter var(--rhine-duration-brand) var(--rhine-ease-standard) both; }
+@keyframes rhine-logo-enter { from { opacity:0; transform:translate(var(--rhine-logo-x),var(--rhine-logo-y)); } to { opacity:1; transform:translate(0,0); } }
 @media(prefers-color-scheme:dark) {
-  .tod-logo[data-theme=auto] { color:var(--tod-bg); }
-  .tod-logo--icon[data-theme=auto] { background:var(--tod-green); }
+  .rhine-logo[data-theme=auto] { color:var(--rhine-bg); }
+  .rhine-logo--icon[data-theme=auto] { background:var(--rhine-green); }
 }
-@media(prefers-reduced-motion:reduce) { .tod-logo[data-animate=true] .tod-logo__plate { animation:none; } }
-@keyframes tod-enter { from { opacity:0; transform:translateY(var(--tod-motion-distance)); } to { opacity:1; transform:translateY(0); } }
-@keyframes tod-progress { from { transform:translateX(-100%); } to { transform:translateX(340%); } }
-@keyframes tod-pulse { 50% { opacity:.55; } }
-.tod-theme[data-tod-motion=reduced] { --tod-duration-hover:0ms; --tod-duration-press:0ms; --tod-duration-panel:0ms; --tod-duration-notice:0ms; --tod-duration-progress:0ms; }
-.tod-theme[data-tod-motion=reduced] *, .tod-theme[data-tod-motion=reduced] *::before, .tod-theme[data-tod-motion=reduced] *::after { animation:none!important; transition:none!important; }
-.tod-theme[data-tod-motion=reduced] .tod-button:active { transform:none; }
+@media(prefers-reduced-motion:reduce) { .rhine-logo[data-animate=true] .rhine-logo__plate { animation:none; } }
+@keyframes rhine-enter { from { opacity:0; transform:translateY(var(--rhine-motion-distance)); } to { opacity:1; transform:translateY(0); } }
+@keyframes rhine-progress { from { transform:translateX(-100%); } to { transform:translateX(340%); } }
+@keyframes rhine-pulse { 50% { opacity:.55; } }
+.rhine-theme[data-rhine-motion=reduced] { --rhine-duration-hover:0ms; --rhine-duration-press:0ms; --rhine-duration-panel:0ms; --rhine-duration-notice:0ms; --rhine-duration-progress:0ms; }
+.rhine-theme[data-rhine-motion=reduced] *, .rhine-theme[data-rhine-motion=reduced] *::before, .rhine-theme[data-rhine-motion=reduced] *::after { animation:none!important; transition:none!important; }
+.rhine-theme[data-rhine-motion=reduced] .rhine-button:active { transform:none; }
 @media(prefers-reduced-motion:reduce) {
-  .tod-theme { --tod-duration-hover:0ms; --tod-duration-press:0ms; --tod-duration-panel:0ms; --tod-duration-notice:0ms; --tod-duration-progress:0ms; }
-  .tod-theme *, .tod-theme *::before, .tod-theme *::after { animation:none!important; transition:none!important; }
-  .tod-theme .tod-button:active { transform:none; }
+  .rhine-theme { --rhine-duration-hover:0ms; --rhine-duration-press:0ms; --rhine-duration-panel:0ms; --rhine-duration-notice:0ms; --rhine-duration-progress:0ms; }
+  .rhine-theme *, .rhine-theme *::before, .rhine-theme *::after { animation:none!important; transition:none!important; }
+  .rhine-theme .rhine-button:active { transform:none; }
 }