feat(divider): add divider component

PiperOrigin-RevId: 504300015

divider/_divider.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/divider' show theme;

divider/divider.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {customElement} from 'lit/decorators.js';
+
+import {Divider} from './lib/divider.js';
+import {styles} from './lib/divider-styles.css.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-divider': MdDivider;
+  }
+}
+
+/**
+ * @summary A divider is a thin line that groups content in lists and
+ * containers.
+ *
+ * @description Dividers can reinforce tapability, such as when used to separate
+ * list items or define tappable regions in an accordion.
+ *
+ * @final
+ * @suppress {visibility}
+ */
+@customElement('md-divider')
+export class MdDivider extends Divider {
+  static override styles = [styles];
+}

divider/lib/_divider.scss

@@ -0,0 +1,48 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use '../../sass/theme';
+@use '../../tokens';
+
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme(tokens.md-comp-divider-values(), $tokens);
+  $tokens: theme.create-theme-vars($tokens, 'divider');
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-divider-values();
+  $tokens: theme.create-theme-vars($tokens, 'divider');
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+
+    box-sizing: border-box;
+    color: var(--_color);
+    display: flex;
+    height: var(--_thickness);
+    width: 100%;
+  }
+
+  :host([inset]),
+  :host([inset-start]) {
+    padding-inline-start: 16px;
+  }
+
+  :host([inset]),
+  :host([inset-end]) {
+    padding-inline-end: 16px;
+  }
+
+  :host::before {
+    background: currentColor;
+    content: '';
+    height: 100%;
+    width: 100%;
+  }
+}

divider/lib/divider-styles.scss

@@ -0,0 +1,8 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use './divider';
+
+@include divider.styles;

divider/lib/divider.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {LitElement} from 'lit';
+import {property} from 'lit/decorators.js';
+
+/**
+ * A divider component.
+ */
+export class Divider extends LitElement {
+  /**
+   * Indents the divider with equal padding on both sides.
+   */
+  @property({type: Boolean, reflect: true}) inset = false;
+
+  /**
+   * Indents the divider with padding on the leading side.
+   */
+  @property({type: Boolean, reflect: true, attribute: 'inset-start'})
+  insetStart = false;
+
+  /**
+   * Indents the divider with padding on the trailing side.
+   */
+  @property({type: Boolean, reflect: true, attribute: 'inset-end'})
+  insetEnd = false;
+}