From 9431c1643140969e52ca3a065a9ec1c4fb299b3b Mon Sep 17 00:00:00 2001
From: Elizabeth Mitchell <lizmitchell@google.com>
Date: Tue, 24 Jan 2023 09:40:59 -0800
Subject: [PATCH] feat(divider): add divider component

PiperOrigin-RevId: 504300015
---
 divider/_divider.scss           |  6 +++++
 divider/divider.ts              | 31 +++++++++++++++++++++
 divider/lib/_divider.scss       | 48 +++++++++++++++++++++++++++++++++
 divider/lib/divider-styles.scss |  8 ++++++
 divider/lib/divider.ts          | 30 +++++++++++++++++++++
 5 files changed, 123 insertions(+)
 create mode 100644 divider/_divider.scss
 create mode 100644 divider/divider.ts
 create mode 100644 divider/lib/_divider.scss
 create mode 100644 divider/lib/divider-styles.scss
 create mode 100644 divider/lib/divider.ts

diff --git a/divider/_divider.scss b/divider/_divider.scss
new file mode 100644
index 0000000000..9dad94f67d
--- /dev/null
+++ b/divider/_divider.scss
@@ -0,0 +1,6 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/divider' show theme;
diff --git a/divider/divider.ts b/divider/divider.ts
new file mode 100644
index 0000000000..4e4684932c
--- /dev/null
+++ b/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];
+}
diff --git a/divider/lib/_divider.scss b/divider/lib/_divider.scss
new file mode 100644
index 0000000000..09c9e4118a
--- /dev/null
+++ b/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%;
+  }
+}
diff --git a/divider/lib/divider-styles.scss b/divider/lib/divider-styles.scss
new file mode 100644
index 0000000000..f26239b0ce
--- /dev/null
+++ b/divider/lib/divider-styles.scss
@@ -0,0 +1,8 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use './divider';
+
+@include divider.styles;
diff --git a/divider/lib/divider.ts b/divider/lib/divider.ts
new file mode 100644
index 0000000000..a3948a6eca
--- /dev/null
+++ b/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;
+}