descriptions · glass-apple · 灵感来源：Apple HIG 详情视图 / Salesforce record detail（键值成对、标签压小、值给正文）
两列：短字段并排
单列：长值不挤
Description List · 玻璃描述列表 · 描述 / Glass
做一个 Description List（玻璃描述列表）：
- 原生 dl / dt / dd，读屏按标签—值成对播报
- 标签 2xs 大写加字距，值用正文 14px；值是主读对象
- columns=2 只在 sm 以上生效，值 break-words 防长串撑破
- 面板级玻璃材质：半透明底 + 发丝边 + inset，内部不再套卡片
用这些 CSS 变量：--color-text --color-text-muted --color-text-subtle --glass-bg --glass-border --glass-inset --text-2xs
灵感参考：Apple HIG 详情视图 / Salesforce record detail（键值成对、标签压小、值给正文）--color-text --color-text-muted --color-text-subtle --glass-bg --glass-border --glass-inset --text-2xs
（无必缺状态）
/r/descriptions--glass-apple.json
免外壳的 markdown 版：/llms/components/descriptions--glass-apple.mddl / dt / dd，不做 role 模拟；读屏按"标签—值"成对播报columns=2 只是布局，窄屏回落单列；值用 break-words，长邮箱与长链接不撑破面板import { type ReactNode } from 'react';
interface Props {
items: { label: string; value: ReactNode }[];
columns?: 1 | 2;
className?: string;
}
export function GlassAppleDescriptions({ items, columns = 1, className = '' }: Props) {
return (
<dl
className={`
grid gap-x-6 gap-y-4 p-5 rounded-xl
bg-[var(--glass-bg)] border border-[var(--glass-border)] backdrop-blur-xl
shadow-[var(--glass-inset)]
${columns === 2 ? 'sm:grid-cols-2' : ''}
${className}
`}
>
{items.map((item) => (
<div key={item.label} className="min-w-0">
<dt className="text-[length:var(--text-2xs)] uppercase tracking-[0.16em] text-[var(--color-text-subtle)]">
{item.label}
</dt>
<dd className="mt-1 text-sm text-[var(--color-text)] break-words">{item.value}</dd>
</div>
))}
</dl>
);
}
src/components/descriptions/glass-apple/