展示
Separator - 分隔线
一条线，三种粗细——单色页面需要它们；断口本身有话要说时，还能往里放字。
用法
什么时候用它
import { Separator } from '@misoto22/folio'说明
一条线，里面可以有字，也可以没有。
在单色系统里，线承担了本来该由颜色承担的活，所以它有三种粗细而不是一种：行与行之间用细线，块与块之间用边线，报头下面用硬线。按名字挑，能让一个页面不至于漂成五种手调的灰。
关于 label。 “或使用以下方式继续”过去在每个调用处都是两个 Separator 加一个 span；而常见的那种单元素做法——把文字压在一条线上，再用一块背景在线上抠个洞——需要知道自己坐在什么底色上。搞错了，那个缺口就是一张 --stone 卡片上的一块 --paper，读起来像是渲染出了 bug。所以这里干脆没有底色：线画两截，标签左右各一截，中间那段空就是空的。它在任何表面上都是对的，而且不需要谁告诉它自己在哪张表面上。
结构
| 部件 | 说明 |
|---|---|
| 线必填 | 一个 <div>。交叉轴上一像素，主轴上 100%，所以它取的是容器的宽——或者高——除此之外什么都不取。 |
| 墨色必填 | weight 唯一改变的东西：块内用 --rule，块与块之间用 --rule-2，报头下面用 --rule-hard。最重的那一档不是更深的灰，它就是 --ink 本身。 |
| 断口文字 | label，只在横线上有效。它改的是构造，不是样式：那条线被画了两次，文字两侧各一段 aria-hidden 的线，文字本身是 --ink-3-aa 的等宽元数据字，而两段线之间的空隙就是真的空隙。 |
实践建议
推荐
- 竖着的分隔线要给高度。它是 h-full，而面对一个自己没有高度的父元素，这会解析成零——元素渲染出来了，什么位置都不占，读起来像一个没加载出来的组件。
- 当这条线是唯一把两块内容分开、而读屏用户本该听出这两块是不同东西时，传 decorative={false}：正是它把 role="none" 换成 role="separator"，并顺带设上 aria-orientation。
- 用 label，别拿两个 Separator 加一个 span 去拼“或使用以下方式继续”。那两段线是替你画好的，而且它们都不需要知道自己压在什么底色上。
避免
- 别凭眼睛挑 weight。这三档是有次序的，所以两行表格之间的一条 hard 线，是在告诉读者这张表到此为止。
- 别用 className 手调出第四种灰。三档有名字的粗细就是全部，而这些名字之所以存在，是因为只要有一条线是凭感觉选的，一个单色页面就会漂成五条略有差别的线。
- 别把文字压在一条完整的线上、再用一块背景色去凿出个缺口。那种做法必须被告知自己坐在什么底色上，而 --stone 卡片上一道 --paper 的缺口，读起来就是一个渲染 bug。
示例
weights
三档粗细，按它们该被花出去的顺序排开。它们是有次序的、不能互换，所以两行表格之间一道 hard 的线，是在告诉读者这张表到那里就结束了——而 hard 那一档不是更深一点的灰，它就是 --ink 本身。三档有名字的粗细就是全部；第四种靠肉眼在 className 里调出来的灰，正是一张单色页面开始走样的方式。
vertical needs a height
一行元信息，被竖直的线分开。竖直那种形态是 h-full，而对着一个自己没有高度的父元素，它解析出来是零——元素渲染了、不占任何空间，读起来像一个没加载出来的组件。给它一个高度，就像这里，或者给一个会把子元素拉满的行。
announced between sections
那种真的在干活的线。decorative={false} 会把 role="none" 换成 role="separator"，并连带设上 aria-orientation，于是读屏软件听到的是两个彼此分开的区块。只在这条线是分开它们的唯一东西时才拿它——一个把每行之间的细线都播报出来的页面，读出来是一串分隔符。
Installation
One package, and one stylesheet next to it.
Upgrading
Minor versions add exports; they never move one.
words in the rule
断口里的字。label 改的是构造方式，而不是样式：这条线被画了两遍，字的两侧各一段，中间那道缝就是一道真的缝——所以它落在任何底色上都是对的，而且不需要谁告诉它自己落在哪一种上。常见的单元素做法是把文字盖在一条完整的线上，再用一个背景色在线上打个洞，而在一张 --stone 的卡片上，那个洞是 --paper，读起来像一个渲染 bug。只有水平方向，而且 decorative 不再适用，因为那些字是内容。
无障碍
- 默认 role="none"。只是把东西在视觉上分组的线，不应该被念出来。
- 带了 label，字就是内容，两截线是 aria-hidden 的装饰——所以 decorative 不再适用，也不会有谁在这段文字头上再播报一条分隔线。
- 竖线上的 label 会被忽略，而不是被悄悄改画成一条横线：一列一像素宽的东西里，没有任何一个位置适合放字。