区切り線 — アクセシブルな UI コンポーネント

カテゴリ: コンテインメント
トークン: comp.divider
レベル: 基礎

概要

Web: tanrei-divider; schedule
SwiftUI: TanreiDivider; schedule
Jetpack Compose: TanreiDivider; schedule
Flutter: TanreiDivider; schedule
React Native: Divider; schedule

生成元 docs/status/status.json, specs/divider.spec.json

リストとツールバーの中

受信トレイ

アーカイブ

ゴミ箱

使い方

Web と React の例は現在の仕様に沿っています。SwiftUI、Compose、Flutter、React Native は追従待ちで、実線だけを描き、区切り線ごとの長さや太さを受け取らない以前の版の区切り線をまだ提供しています。これらの例は、追従するまでその版のものです。

<tanrei-divider></tanrei-divider>
<tanrei-divider inset="start"></tanrei-divider>

<!-- テキストが 72 px 内側から始まるリストに揃えます。 -->
<tanrei-divider inset="start" inset-length="72"></tanrei-divider>

<!-- クーポンの上の切り取り線と、軽いセクションの区切り。 -->
<tanrei-divider line-style="dashed" line-cap="round"></tanrei-divider>
<tanrei-divider line-style="wavy" amplitude="4" wavelength="24"></tanrei-divider>

<!-- この区切り線だけを太くします。点、線分、波は、太さに対する比率を保ちます。 -->
<tanrei-divider thickness="2"></tanrei-divider>
<tanrei-divider line-style="dotted" line-cap="round" thickness="4"></tanrei-divider>

<!-- ツールバーのグループには意味があるので、区切り線を separator として公開します。 -->
<div role="toolbar" aria-label="書式" style="display: flex">
  <tanrei-button variant="text" label="太字"><span slot="icon">format_bold</span></tanrei-button>
  <tanrei-divider orientation="vertical" decorative="false"></tanrei-divider>
  <tanrei-button variant="text" label="リンクを挿入"><span slot="icon">link</span></tanrei-button>
</div>

<script type="module">
  import '@tanrei/web/components/divider';
</script>

import { Divider } from '@tanrei/react';

<Divider />
<Divider inset="start" insetLength={72} />
<Divider lineStyle="dashed" lineCap="round" />
<Divider lineStyle="wavy" amplitude={4} wavelength={24} />
<Divider lineStyle="dotted" lineCap="round" thickness={4} />
<Divider orientation="vertical" decorative={false} />

import Tanrei

VStack(spacing: 0) {
  inboxRow
  TanreiDivider(inset: .start)
  archiveRow
}

// 向きは囲んでいるスタックから取らず、明示します。
HStack { formattingButtons; TanreiDivider(axis: .vertical, isDecorative: false); insertLinkButton }

import androidx.compose.foundation.gestures.Orientation
import io.github.chnotchy.tanrei.components.TanreiDivider
import io.github.chnotchy.tanrei.components.TanreiDividerInset

Column {
    InboxRow()
    TanreiDivider(inset = TanreiDividerInset.Start)
    ArchiveRow()
}

// 縦の区切り線は行の高さいっぱいに伸びるので、行に高さを与えます。
Row(Modifier.height(IntrinsicSize.Min)) {
    FormattingButtons()
    TanreiDivider(orientation = Orientation.Vertical, decorative = false)
    InsertLinkButton()
}

import 'package:tanrei/tanrei.dart';

Column(
  children: <Widget>[
    inboxRow,
    const TanreiDivider(inset: TanreiDividerInset.start),
    archiveRow,
  ],
);

// IntrinsicHeight で、縦の区切り線に行の高さを与えます。
IntrinsicHeight(
  child: Row(
    children: <Widget>[
      ...formattingButtons,
      const TanreiDivider(axis: Axis.vertical, excludeFromSemantics: false),
      insertLinkButton,
    ],
  ),
);

import { Divider, IconButton } from '@tanrei/react-native';

<Divider />
<Divider inset="start" />

<View style={{ flexDirection: 'row' }}>
  <IconButton accessibilityLabel="太字" onPress={toggleBold}>format_bold</IconButton>
  <Divider orientation="vertical" decorative={false} />
  <IconButton accessibilityLabel="リンクを挿入" onPress={insertLink}>link</IconButton>
</View>

仕様

向きとインセット

線の種類

太さ：区切り線ごとの太さと、太い模様に付けた丸い端

点線と破線は、両端がかならず欠けのない点や線分になります。区切り線は、少なくとも間隔を空けて収まるだけの数を描き、すべての間隔を同じだけ広げます。そのため、長さや向きにかかわらず、両端が同じ見え方になります。波線は円弧をつないだもので、波の数が整数になるよう伸縮させるので、中心線から始まり中心線で終わります。波線の区切り線はほかより高さがあり、振幅の 2 倍に線の太さを足した大きさ、既定では 1 ではなく 5 になります。

点、線分、波の長さは、線の太さから導いたトークンです。太い区切り線を描くデザインシステムでは、同じ見え方のまま模様も大きくなります。thickness は、1 つの区切り線について同じことをします。太さを読むすべての場所でトークンの代わりになり、点、線分、波は太さに対する比率を保ちます。インセットは拡大縮小しません。区切り線ごとのプロパティ（insetLength、thickness、dashLength、gap、amplitude、wavelength）は、プラットフォームの単位でそのまま使い、どのダイヤルでも拡大縮小しません。負の値や有限でない値、0 の thickness、dashLength、wavelength はトークンの値に戻り、デバッグビルドで報告されます。いまの線の種類が描かないプロパティは無視されます。

構成要素

Web パッケージが描くフィクスチャ horizontal の上に描いています。

パーツ	説明
1 `line`	The one line, horizontal or vertical: solid, dotted, dashed or wavy. Its thickness is the system's, or the one given for this divider. It is the whole component: there is no container, and no space around it.

プロパティ

プロパティ	型	既定値	説明
`orientation`	`horizontal` \| `vertical`	`"horizontal"`	Horizontal separates stacked content and spans the container's width; vertical separates content in a row and spans its height.
`inset`	`none` \| `start` \| `both`	`"none"`	Shortens the line to align with content: none spans the full length, start leaves the inset at the start (to line up with an inset list's text), both leaves it at both ends (a middle divider).
`insetLength`	`number`	`null`	The length of the inset for this divider, in the platform's unit (CSS px, pt, dp, logical pixels); null takes comp.divider.line.inset. Used only while inset is start or both: set it to line the divider up with content whose inset differs from the rest of the product's lists.
`thickness`	`number`	`null`	How thick this divider's line is, in the platform's unit (CSS px, pt, dp, logical pixels); null takes comp.divider.line.thickness. Set it where one divider of a product carries more weight than the rest (the line under a page's header, a break between two sections of a long form); a product whose every divider is heavier changes the token in its layer instead.
`lineStyle`	`solid` \| `dotted` \| `dashed` \| `wavy`	`"solid"`	How the line is drawn: solid, a row of dots, a row of dashes, or a wave. Most dividers are solid; the others mark a different kind of boundary in the same product (a tear line, the edge of something provisional, a light section break).
`lineCap`	`butt` \| `round`	`"butt"`	How the line's ends, and every dot's and dash's ends, are drawn: butt ends square at the length, round ends in a half-disc inside it (round dots, rounded dashes). The difference shows only on a line thicker than a hairline.
`dashLength`	`number`	`null`	The length of one dash of a dashed line, in the platform's unit; null takes comp.divider.line.dash.length. Ignored by the other styles.
`gap`	`number`	`null`	The least space between two dots of a dotted line or two dashes of a dashed line, in the platform's unit; null takes comp.divider.line.dot.gap or comp.divider.line.dash.gap. Ignored by solid and wavy.
`amplitude`	`number`	`null`	How far a wavy line's crests lie from its midline, in the platform's unit; null takes comp.divider.line.wave.amplitude. Ignored by the other styles.
`wavelength`	`number`	`null`	The length of one wave of a wavy line, a crest and a trough, in the platform's unit; null takes comp.divider.line.wave.wavelength. Ignored by the other styles.
`decorative`	`boolean`	`true`	Hides the divider from assistive technology. Set it to false only when the grouping is meaningful (a toolbar's or a menu's groups): the divider is then exposed as a separator.

状態

振る舞い

EARS 記法による要件です。各プラットフォームの実装は、この ID に対応するテストで検証されます。要件の原文は仕様ファイルのものをそのまま掲載しています。

ID	要件
`DIV-1`	THE divider SHALL draw one line of comp.divider.line.thickness, or of thickness while that is not null (DIV-16), in comp.divider.line.color, in the style lineStyle names (DIV-9 to DIV-12), along the full inline size of its container when orientation is horizontal, and along the full block size of its container when orientation is vertical.
`DIV-2`	THE divider SHALL take exactly comp.divider.line.thickness on its cross axis, or, WHERE lineStyle is wavy, twice its amplitude (DIV-12) plus comp.divider.line.thickness, whatever its length; it SHALL add no margin or padding of its own, and the space on either side of the line belongs to the layout that places it.
`DIV-3`	WHERE inset is start THE divider SHALL shorten the line by insetLength, or by comp.divider.line.inset while insetLength is null, at its start (the inline-start of a horizontal divider, the top of a vertical one), and WHERE inset is both it SHALL shorten the line by that length at each end; the inset stretch SHALL draw nothing, the style of DIV-9 to DIV-12 SHALL be laid out over the stretch that remains, and where the insets leave no length the divider SHALL draw nothing.
`DIV-4`	WHERE the layout direction is right-to-left THE divider SHALL apply the start inset of a horizontal divider at its right end and SHALL start a horizontal wavy line at its right end, mirroring it; a vertical divider's inset and wave SHALL NOT change with the direction.
`DIV-5`	WHILE decorative is true THE divider SHALL be hidden from assistive technology and SHALL NOT be focusable.
`DIV-6`	WHILE decorative is false THE divider SHALL expose the separator role and its orientation to assistive technology, SHALL have no accessible name of its own, and SHALL NOT be focusable.
`DIV-7`	WHEN orientation, inset, lineStyle or lineCap names a value that the divider does not define THE divider SHALL render with the default value, and in debug builds report the unknown value.
`DIV-8`	THE divider SHALL draw its line at least one device pixel thick; WHERE lineStyle is solid, dotted or dashed it SHALL align the line's two edges across its axis to the device pixel grid, so that the line is never spread over two partial rows or columns of pixels, and WHERE lineStyle is wavy it SHALL draw the curve antialiased.
`DIV-9`	WHERE lineStyle is solid THE divider SHALL draw the line as one unbroken stroke over the whole drawn stretch.
`DIV-10`	WHERE lineStyle is dotted THE divider SHALL draw a row of dots, each comp.divider.line.thickness long and comp.divider.line.thickness across, separated by at least gap, or comp.divider.line.dot.gap while gap is null; it SHALL draw as many dots as fit the drawn stretch with that gap between them, the first at the stretch's start and the last at its end, and SHALL widen every gap by the same amount to make them meet those ends; WHERE only one dot fits it SHALL draw that dot at the stretch's center.
`DIV-11`	WHERE lineStyle is dashed THE divider SHALL draw a row of dashes, each dashLength long (comp.divider.line.dash.length while dashLength is null, and never shorter than comp.divider.line.thickness) and comp.divider.line.thickness across, separated by at least gap, or comp.divider.line.dash.gap while gap is null; it SHALL draw as many dashes as fit the drawn stretch with that gap between them, the first at the stretch's start and the last at its end, and SHALL widen every gap by the same amount to make them meet those ends; WHERE only one dash fits it SHALL draw one dash, no longer than the stretch, at the stretch's center.
`DIV-12`	WHERE lineStyle is wavy THE divider SHALL stroke a wave about the midline of its cross axis at comp.divider.line.thickness, made of circular arcs that each span half a wavelength and alternate from one side of the midline to the other, meeting on the midline without a corner; the wavelength is wavelength, or comp.divider.line.wave.wavelength while wavelength is null, stretched or shrunk so that a whole number of waves (at least one, the nearest number) fills the drawn stretch; each arc's crest SHALL lie amplitude, or comp.divider.line.wave.amplitude while amplitude is null, from the midline to the stroke's center, but never more than a quarter of the stretched wavelength (a half circle); the wave SHALL start and end on the midline, and its first arc SHALL rise toward the top of a horizontal divider and toward the left of a vertical one.
`DIV-13`	WHERE lineCap is round THE divider SHALL end the solid line, every dot, every dash and the wave in half-discs of diameter comp.divider.line.thickness that lie inside the lengths DIV-9 to DIV-12 give them, so that a dot is a disc and no rounded end reaches into an inset or past the container; the wave's rounded ends SHALL be drawn at its first and last points, laid out over the drawn stretch shortened by half comp.divider.line.thickness at each end. WHERE lineCap is butt every end SHALL be square and flush with those lengths.
`DIV-14`	WHEN thickness, insetLength, dashLength, gap, amplitude or wavelength is null THE divider SHALL use the token that prop names; IF one of them is not a finite number, or is negative, or thickness, dashLength or wavelength is 0, THE divider SHALL use that token instead and in debug builds report the value; a value it uses SHALL be used as given, in the platform's unit, and not scaled by any dial; a prop the current lineStyle does not draw SHALL be ignored and not reported.
`DIV-15`	THE divider SHALL take its layout direction from where it is used — the direction of the nearest ancestor that sets one, and the platform's own where none does — and SHALL have no direction setting of its own; WHEN that direction changes while the divider is shown THE divider SHALL draw itself for the new direction at once, without a motion of its own, keeping what it shows and its state.
`DIV-16`	WHILE thickness is not null THE divider SHALL use it wherever DIV-1, DIV-2 and DIV-10 to DIV-13 name comp.divider.line.thickness — the line's extent across its axis, the side of a dot, the width of a dash and its least length, the wave's stroke, the diameter of a round cap and the divider's own size across its axis — and SHALL scale each pattern length it takes from a token rather than from a prop (comp.divider.line.dot.gap, comp.divider.line.dash.length, comp.divider.line.dash.gap, comp.divider.line.wave.amplitude and comp.divider.line.wave.wavelength) by thickness divided by comp.divider.line.thickness, so that a thicker divider keeps the pattern's proportions, as a layer that thickens the line keeps them; a pattern length given by a prop SHALL be used as given. DIV-8 holds for it: a thickness below one device pixel is drawn one device pixel thick. The thickness changes nothing that assistive technology is told, and comp.divider.line.inset and insetLength are not scaled.

プラットフォーム別の名前対応

パリティは API が同一であることを意味しません。同じ契約を、各プラットフォームの流儀で表現します。

仕様	Web	SwiftUI	Jetpack Compose	Flutter	React Native
コンポーネント	`tanrei-divider`	`TanreiDivider`	`TanreiDivider`	`TanreiDivider`	`Divider`
`orientation` · プロパティ	`orientation`	`axis`	`orientation`	`axis`	`orientation`
`inset` · プロパティ	`inset`	`inset`	`inset`	`inset`	`inset`
`insetLength` · プロパティ	`insetLength`	`insetLength`	`insetLength`	`insetLength`	`insetLength`
`thickness` · プロパティ	`thickness`	`thickness`	`thickness`	`thickness`	`thickness`
`lineStyle` · プロパティ	`lineStyle`	`lineStyle`	`lineStyle`	`lineStyle`	`lineStyle`
`lineCap` · プロパティ	`lineCap`	`lineCap`	`cap`	`strokeCap`	`lineCap`
`dashLength` · プロパティ	`dashLength`	`dashLength`	`dashLength`	`dashLength`	`dashLength`
`gap` · プロパティ	`gap`	`gap`	`gap`	`gap`	`gap`
`amplitude` · プロパティ	`amplitude`	`amplitude`	`amplitude`	`amplitude`	`amplitude`
`wavelength` · プロパティ	`wavelength`	`wavelength`	`wavelength`	`wavelength`	`wavelength`
`decorative` · プロパティ	`decorative`	`isDecorative`	`decorative`	`excludeFromSemantics`	`decorative`
備考	Not an `<hr>`: an hr is horizontal only and always a separator. The host takes `role="separator"` and `aria-orientation` when `decorative` is false (set to false by `decorative="false"` or the property), and `aria-hidden="true"` otherwise. Attributes are `line-style`, `line-cap`, `inset-length`, `dash-length`, `gap`, `amplitude` and `wavelength`; the lengths are numbers of CSS px. A solid line stays a border (DIV-8). A dotted or dashed line is not `border-style: dotted \| dashed`, whose dash lengths and spacing each engine chooses and which has no round cap: it is drawn from the tokens (for example a mask repeated with `mask-repeat: space` over a box one gap longer than the line, which places whole dashes at both ends and widens the gaps as DIV-10 and DIV-11 say). A wavy line cannot be a border at all: it is an SVG path of arcs in the shadow root, measured on resize (DIV-12). In forced-colors mode every style is drawn in the system's text color, as the border is.	SwiftUI's own `Divider` takes its axis from the enclosing stack; `TanreiDivider(axis: .horizontal)` states it (default `.horizontal`) so a divider looks the same wherever it is placed and its snapshot is deterministic. `isDecorative: false` adds the separator semantics SwiftUI's `Divider` does not have. Ships the previous revision (solid only). Owes DIV-1 to DIV-4, DIV-7 and DIV-8 as revised, and DIV-9 to DIV-14: `lineStyle`, `lineCap: CGLineCap` (`.butt`, `.round`) and the lengths as `CGFloat?`, drawn as a `Path` stroked with `StrokeStyle(lineWidth:lineCap:dash:)` (arcs with `addArc`).	One composable with `orientation: Orientation` (foundation's `Orientation.Horizontal` / `.Vertical`, as `Modifier.scrollable` takes it) instead of Material's two composables `HorizontalDivider` and `VerticalDivider`. Ships the previous revision (solid only). Owes DIV-1 to DIV-4, DIV-7 and DIV-8 as revised, and DIV-9 to DIV-14: `lineStyle`, `cap: StrokeCap` (`StrokeCap.Butt`, `StrokeCap.Round`, as `Stroke` names it) and the lengths as `Dp?`, drawn on a `Canvas` with `PathEffect.dashPathEffect` for dots and dashes and `Path.arcTo` for the wave.	One widget with `axis: Axis` instead of Flutter's `Divider` and `VerticalDivider`. `inset` is an enum resolved from comp.divider.line.inset, not Flutter's `indent` / `endIndent` lengths; `insetLength` replaces that length for one divider at both ends it applies to. `excludeFromSemantics` (as `Image` and `GestureDetector` name it) has the same polarity as `decorative` and defaults to true. Ships the previous revision (solid only). Owes DIV-1 to DIV-4, DIV-7 and DIV-8 as revised, and DIV-9 to DIV-14: `lineStyle`, `strokeCap: StrokeCap` (`StrokeCap.butt`, `StrokeCap.round`, as `Paint` names it) and the lengths as `double?`, drawn by a `CustomPainter`; `dart:ui` has no dash effect, so each dot and dash is its own segment, and the wave is `Path.arcToPoint`.	Decorative: `accessible={false}` and `importantForAccessibility="no-hide-descendants"`. Not decorative: `role="separator"`; how far iOS and Android announce it (neither has a native separator trait) is for the package's README to state. Ships the previous revision (solid only). Owes DIV-1 to DIV-4, DIV-7 and DIV-8 as revised, and DIV-9 to DIV-14, drawn with views only (the package takes no SVG): not `borderStyle: 'dotted' \| 'dashed'`, whose spacing is the OS's and which has no length or cap; each dot and dash is a view (a round cap is its corner radius), and the wave is the package's `Arc` primitive, one arc per half wave, which is why DIV-12 builds the wave from circular arcs.

トークン

トークン	参照先	解決値（ライト）
`--tanrei-comp-divider-line-color`	`sys.color.outline-variant`	#000000 · 8%
`--tanrei-comp-divider-line-dash-gap`	—	4px
`--tanrei-comp-divider-line-dash-length`	—	4px
`--tanrei-comp-divider-line-dot-gap`	—	2px
`--tanrei-comp-divider-line-inset`	`sys.space.space200`	16px
`--tanrei-comp-divider-line-thickness`	`sys.border.hairline`	1px
`--tanrei-comp-divider-line-wave-amplitude`	—	2px
`--tanrei-comp-divider-line-wave-wavelength`	—	16px

フィクスチャ

基準となる描画パターンです。全プラットフォームが同じ ID でスナップショットを撮り、結果を比較できるようにしています。

horizontal

{}

horizontal-inset-start

inset: start

horizontal-inset-both

inset: both

horizontal-inset-start-length

inset: start insetLength: 72

vertical

orientation: vertical

vertical-inset-start

orientation: vertical inset: start

vertical-inset-both

orientation: vertical inset: both

horizontal-separator

decorative: false

horizontal-dotted

lineStyle: dotted

horizontal-dotted-round

lineStyle: dotted lineCap: round

horizontal-dashed

lineStyle: dashed

horizontal-dashed-round

lineStyle: dashed lineCap: round

horizontal-dashed-custom

lineStyle: dashed dashLength: 12 gap: 6

horizontal-inset-both-dashed

inset: both lineStyle: dashed

horizontal-wavy

lineStyle: wavy

horizontal-wavy-custom

lineStyle: wavy amplitude: 4 wavelength: 24

vertical-dotted

orientation: vertical lineStyle: dotted

vertical-wavy

orientation: vertical lineStyle: wavy

horizontal-thick

thickness: 2

vertical-thick

orientation: vertical thickness: 2

horizontal-dotted-round-thick

thickness: 4 lineStyle: dotted lineCap: round

生成元 specs/divider.spec.json, tokens/comp/divider.tokens.json, design/tokens/

ガイドライン

使う場面

余白だけでは境界がはっきりしない場所に使います。密度の高いリストの行と行の間、設定画面のセクションの間、ツールバーのアクションのグループの間などです。グループ間の余白やサーフェスの違いですでに境目が分かるなら、線は引きません。線の少ないレイアウトのほうが、目で追いやすくなります。

1 つの細い線

区切り線の線は、デザインシステムの細い線です。色は sys.color.outline-variant、太さは細い線の幅です。既定のシステムでは、目に入るほかの細い線も同じ色です。アウトラインのボタンの縁、チップの枠線、メニューのグループの間の線、ナビゲーションバーやナビゲーションドロワーの端、リストの行の下の線がそうです。それぞれが自分のトークンを持ったまま、既定のシステムが同じ 1 つの値を与えているので、画面にある線は 1 種類に見えます。利用者側で置く区切り線も、それらに合わせるための色を持つ必要はありません。

コンポーネントが自分のパーツを分ける場所

自分のパーツを自分で分けるコンポーネントがあり、そこには区切り線を足しません。

メニューは、グループとその隣にあるものを分けます。
つながったボタングループとメニュー付きボタンは、自分の 2 つの部分を分けます。
ナビゲーションドロワーは、divider を付けたセクションの前に区切り線を描きます。
リストの行は、自分の下の線を、テキストの開始位置から描きます（divider）。

1 つのコンポーネントの中で隣り合うパーツをどう見分けるかは、デザインシステム全体で 1 つの選択です。接するところに線を引くか（既定）、余白を空けるかです。コンポーネントは自分のトークンで、個々のインスタンスは separation プロパティで、システムの選択から外れられます。separation を持つのは、メニュー、ボタングループ、メニュー付きボタン、プログレスインジケーターです。余白で分けるとき、これらのコンポーネントは線をまったく描きません。そこに手で足した区切り線は、残る唯一の線になり、まわりと合わなくなります。

区切り線のコンポーネント自体は、この選択に含まれません。自分のコンテンツの間に置いた <tanrei-divider> は、いつも線です。

インセットの選び方

インセット	用途
None	コンテナ全体にわたる境界。セクションの間や、ヘッダーの下。
Start	行の先頭にアイコンやアバターがあるリストの、行と行の間。線がテキストの位置から始まるので、先頭の列がひと続きに見えます。
Both	コンテナの境界には見せたくない、グループ内の区切り（ミドルディバイダー）。

insetLength を設定するのは、プロダクトのほかのリストとインセットが違うコンテンツに揃える区切り線だけです。inset がインセットを取る側に効き、inset が none の間は何もしません。

線の種類の選び方

線の種類	用途
Solid	ほとんどの区切り線。既定値です。
Dashed	同じプロダクトの中で種類の違う境界。クーポンの上の切り取り線や、仮の内容の端など。
Dotted	実線より軽い区切り。長さの 3 分の 1 ほどしか覆わないので、同じ色でも薄く見えます。
Wavy	まわりの実線とは種類の違う境界として見せたいセクションの区切り。ほかの種類より、線と直交する方向に場所を取ります。

丸い端（lineCap="round"）にすると、点は円に、線分は角の丸い棒になり、実線や波線の両端も丸くなります。丸い端は線の長さの内側に収まるので、インセットはずれません。既定の細い線では丸い端は見えません。自分の thickness を持つ区切り線と、太い線を描くデザインシステム向けです。

推奨

区切り線の周りの余白は、レイアウト側で取ります（スタックの間隔やリストの gap）。区切り線自体は余白を持たないので、間隔が二重になることはありません。
リストやカードでは、装飾（既定値）のままにします。行の始まりと終わりは、行そのものが伝えています。
decorative を false にするのは、グループ分けそのものに意味がある場所だけです。ツールバーやメニューのグループなどです。
1 種類の境界には、プロダクト全体で 1 つの線の種類を使います。そうすれば、破線はいつも同じ意味になります。

非推奨

すべての要素の間に線を引かない。まず余白で区切り、それで足りない所にだけ区切り線を使います。
コンテナの枠線や輪郭として使わない。区切り線にはコンテナも形もありません。
意味を持たせるために太くしたり色を付けたりしない。thickness は、見えるだけの太さが要る模様や、まわりの太い線に合わせる線のためのものです。区切り線の色はコントラスト比の対象外です。区切られた内容は、線がなくても理解できなければならないからです。
メニューのグループの間やリストの行の間など、自分のパーツを自分で分けるコンポーネントの中に区切り線を足さない。そのコンポーネント自身のプロパティを使います。
スクロールする枠の端に、その先にまだ続きがあることを示すために区切り線を置かない。その端はスクロールエリアが、先に内容があるあいだだけ、デザインシステムが選んだ形で示します。
線の種類だけに意味を持たせない。破線が「ここで切り取る」ことを表すなら、テキストでもそう伝えます。
見出しの代わりにしない。2 つのフォームの間の「── または ──」は、2 本の区切り線とラベルの組み合わせで、意味を伝えるのはラベルです。

アクセシビリティ

ロール: separator
ラベル付け: A divider has no accessible name. Decorative (the default), it is not in the accessibility tree; otherwise it is a separator whose orientation is exposed, and the groups on either side carry their own names.
最小ターゲット: 見た目のサイズが小さくても、ヒット領域は最小ターゲットサイズを満たします。 minimum 32px · pointer 44px · spacing 8px · touch 48px

キーボード操作

キー	動作

備考

Not interactive: a divider has no hit area, so the minimum target holds without extending anything. It never receives focus, even when it is exposed as a separator (a focusable separator is a splitter, which is a different component).
The line is decorative for contrast purposes: comp.divider.line.color is not held to 3:1, because the content it separates must be understandable without it. A dotted or dashed line covers less of its length and reads fainter than a solid one in the same color; that is accepted for the same reason. In the default system the line is sys.color.outline-variant, the one hairline color every line of the system shares, between 1.19:1 and 3.83:1 against the surface roles depending on the scheme: visible, and never the only thing that tells two groups apart.
The line's style carries nothing to assistive technology: a dotted, dashed or wavy divider that is not decorative is the same separator as a solid one. A product that gives a style a meaning (a tear line, a provisional section) states that meaning in text.
Text size does not change the line: it is not text.

生成元 specs/divider.spec.json, tokens/sys/measure.tokens.json

コンポーネントが担うこと

装飾（既定値）のときは、すべてのプラットフォームで支援技術から隠れます。
装飾でないときは、Web では向きを持つ separator として公開します。Apple のプラットフォーム、Android、Flutter には separator のロールがないため、名前のない要素としてアクセシビリティツリーに残り、各プラットフォームで伝えられる範囲のことを伝えます。
フォーカスを受けず、入力も受け取りません。両側のコントロールの操作を妨げることはありません。
線は少なくとも 1 デバイスピクセルの太さです。実線、点線、破線は線と直交する方向をピクセルグリッドに揃えて描くので、にじみません。波線はアンチエイリアスをかけて描きます。
線の種類は支援技術には伝わりません。装飾でない点線、破線、波線の区切り線は、実線と同じ separator です。
Web の強制カラーモードでは、どの線の種類もシステムのテキスト色で描き直されます。

利用者側で行うこと

線の種類に持たせた意味（切り取り線など）は、テキストで伝えます。支援技術は線の種類を伝えず、点線や破線は実線より薄く見えます。
グループ分けに意味があるときは、それぞれのグループに名前を付けます。separator には名前がないので、グループが何なのかは伝えられません。
ページの構造を区切り線に担わせない。構造を伝えるのは見出しとランドマークで、線は目に見えるだけです。

ソースコードと Issue（GitHub）