New version. Add Material UI implementation with theme customization, about dialog, and news system

components-wiki/divider.md

@@ -0,0 +1,140 @@
+# Divider
+
+<!--*
+# Document freshness: For more information, see go/fresh-source.
+freshness: { owner: 'lizmitchell' reviewed: '2025-05-20' }
+tag: 'docType:reference'
+*-->
+
+<!-- go/md-divider -->
+
+<!-- [TOC] -->
+
+A [divider](https://m3.material.io/components/divider)<!-- {.external} --> is a thin line
+that groups content in lists and containers.
+
+Dividers can reinforce tapability, such as when used to separate list items or
+define tappable regions in an accordion.
+
+![Screenshot of five stacked dividers](images/divider/hero.webp "Dividers separating items in a list.")
+
+*   [Design article](https://m3.material.io/components/divider) <!-- {.external} -->
+*   [API Documentation](#api)
+*   [Source code](https://github.com/material-components/material-web/tree/main/divider)
+    <!-- {.external} -->
+
+## Usage
+
+Use full width dividers to separate larger sections of unrelated content.
+
+![A full width divider separating two paragraphs of "Lorem ipsum"](images/divider/usage.webp "Full width divider example")
+
+```html
+<section>
+  <p>Lorem ipsum...</p>
+  <md-divider></md-divider>
+  <p>Lorem ipsum...</p>
+</section>
+```
+
+### Inset dividers
+
+Use inset dividers to separate related content within a section.
+
+![A list of design system names separated by an inset divider](images/divider/usage-inset.webp "Inset divider example")
+
+```html
+<section>
+  <p>Material 2</p>
+  <md-divider inset></md-divider>
+  <p>Material 3</p>
+</section>
+```
+
+Inset dividers are equally indented from both sides of the screen by default.
+Use `inset-start` or `inset-end` to change this.
+
+![A list of design system names separated by a leading inset divider](images/divider/usage-inset-start.webp "Leading inset divider example")
+
+```html
+<section>
+  <p>Material 2</p>
+  <md-divider inset-start></md-divider>
+  <p>Material 3</p>
+</section>
+```
+
+## Accessibility
+
+Dividers are decorative by default and not announced by assistive technology.
+
+Add a
+[`role="separator"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role)<!-- {.external} -->
+attribute to non-decorative dividers that should be announced.
+
+```html
+<ul>
+  <li>Item one</li>
+  <md-divider inset></md-divider>
+  <li>Item two</li>
+  <md-divider role="separator"></md-divider>
+  <li>Item three</li>
+  <md-divider inset></md-divider>
+  <li>Item four</li>
+</ul>
+```
+
+## Theming
+
+Divider supports [theming](../theming/README.md) and can be customized with CSS
+custom property tokens.
+
+### Tokens
+
+Token                    | Default value
+------------------------ | --------------------------------
+`--md-divider-color`     | `--md-sys-color-outline-variant`
+`--md-divider-thickness` | `1px`
+
+*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-divider.scss)
+    <!-- {.external} -->
+
+### Example
+
+![A customized divider with a different color and thickness](images/divider/theming.webp "Divider theming example.")
+
+```html
+<style>
+:root {
+  --md-sys-color-outline-variant: #BEC9C8;
+  --md-divider-thickness: 2px;
+}
+</style>
+
+<section>
+  <p>Lorem ipsum...</p>
+  <md-divider></md-divider>
+  <p>Lorem ipsum...</p>
+</section>
+```
+
+<!-- auto-generated API docs start -->
+
+## API
+
+
+### MdDivider <code>&lt;md-divider&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `inset` | `inset` | `boolean` | `false` | Indents the divider with equal padding on both sides. |
+| `insetStart` | `inset-start` | `boolean` | `false` | Indents the divider with padding on the leading side. |
+| `insetEnd` | `inset-end` | `boolean` | `false` | Indents the divider with padding on the trailing side. |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+<!-- auto-generated API docs end -->