feat(labs): add divider utility class component

PiperOrigin-RevId: 897885920

Author: asyncliz

labs/gb/components/divider/_divider-tokens.scss

@@ -0,0 +1,9 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  --color: var(--md-sys-color-outline-variant);
+  --thickness: 1px;
+}

labs/gb/components/divider/demo/demo.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './material-collection.js';
+import './index.js';
+
+import {
+  KnobTypesToKnobs,
+  MaterialCollection,
+  materialInitsToStoryInits,
+  setUpDemo,
+} from './material-collection.js';
+
+import {stories, StoryKnobs} from './stories.js';
+
+const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
+  'Divider',
+);
+
+collection.addStories(...materialInitsToStoryInits(stories));
+
+setUpDemo(collection);

labs/gb/components/divider/demo/stories.ts

@@ -0,0 +1,77 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import '@material/web/labs/gb/components/divider/md-divider.js';
+
+import {MaterialStoryInit} from './material-collection.js';
+import {divider} from '@material/web/labs/gb/components/divider/divider.js';
+import {styles as dividerStyles} from '@material/web/labs/gb/components/divider/divider.cssresult.js';
+import {adoptStyles} from '@material/web/labs/gb/styles/adopt-styles.js';
+import {styles as m3Styles} from '@material/web/labs/gb/styles/m3.cssresult.js';
+import {css, html} from 'lit';
+
+/** Knob types for divider stories. */
+export interface StoryKnobs {}
+
+adoptStyles(document, [m3Styles]);
+
+const styles = css`
+  .column,
+  .row {
+    display: flex;
+    gap: 8px;
+    margin: 16px;
+  }
+  .column {
+    flex-direction: column;
+  }
+  .row {
+    flex-direction: row;
+  }
+`;
+
+const playground: MaterialStoryInit<StoryKnobs> = {
+  name: 'Playground',
+  styles,
+  render(knobs) {
+    return html`
+      <div class="column">
+        <div>Vertical</div>
+        <md-divider></md-divider>
+        <div>Items</div>
+      </div>
+
+      <div class="row">
+        <div>Horizontal</div>
+        <md-divider vertical></md-divider>
+        <div>Items</div>
+      </div>
+    `;
+  },
+};
+
+const directive: MaterialStoryInit<StoryKnobs> = {
+  name: 'Directive',
+  styles: [styles, dividerStyles],
+  render(knobs) {
+    return html`
+      <div class="column">
+        <div>Vertical</div>
+        <hr class="${divider()}" />
+        <div>Items</div>
+      </div>
+
+      <div class="row">
+        <div>Horizontal</div>
+        <hr class="${divider({vertical: true})}" />
+        <div>Items</div>
+      </div>
+    `;
+  },
+};
+
+/** Divider stories. */
+export const stories = [playground, directive];

labs/gb/components/divider/divider.scss

@@ -0,0 +1,31 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'divider-tokens';
+// go/keep-sorted end
+
+@layer md.sys;
+@layer md.comp.divider {
+  .divider {
+    & {
+      @include divider-tokens.root;
+
+      box-sizing: border-box;
+      border: none;
+      margin: unset; // Remove <hr> margins
+    }
+
+    &:not(.divider-vertical) {
+      border-bottom: var(--thickness) solid var(--color);
+      width: 100%;
+    }
+
+    &.divider-vertical {
+      border-inline-end: var(--thickness) solid var(--color);
+      min-height: 100%;
+    }
+  }
+}

labs/gb/components/divider/divider.ts

@@ -0,0 +1,72 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {Directive, directive} from 'lit/directive.js';
+import {classMap, type ClassInfo} from 'lit/directives/class-map.js';
+
+/** Divider classes. */
+export const DIVIDER_CLASSES = {
+  divider: 'divider',
+  dividerVertical: 'divider-vertical',
+} as const;
+
+/** The state provided to the `dividerClasses()` function. */
+export interface DividerClassesState {
+  /** Whether the divider is vertical. */
+  vertical?: boolean;
+}
+
+/**
+ * Returns the divider classes to apply to an element based on the given state.
+ *
+ * @param state The state of the divider.
+ * @return An object of class names and truthy values if they apply.
+ */
+export function dividerClasses({
+  vertical = false,
+}: DividerClassesState = {}): ClassInfo {
+  return {
+    [DIVIDER_CLASSES.divider]: true,
+    [DIVIDER_CLASSES.dividerVertical]: vertical,
+  };
+}
+
+/** The state provided to the `divider()` directive. */
+export interface DividerDirectiveState extends DividerClassesState {
+  /** Additional classes to apply to the element. */
+  classes?: ClassInfo;
+}
+
+class DividerDirective extends Directive {
+  render(state: DividerDirectiveState = {}) {
+    return classMap({
+      ...(state.classes || {}),
+      ...dividerClasses(state),
+    });
+  }
+}
+
+/**
+ * A Lit directive that adds divider styling to its element.
+ *
+ * @example
+ * ```ts
+ * html`
+ *   <div class="flex flex-col">
+ *     <div>Vertical</div>
+ *     <hr class="${divider()}">
+ *     <div>Items</div>
+ *   </div>
+ *
+ *   <div class="flex flex-row">
+ *     <div>Horizontal</div>
+ *     <hr class="${divider({vertical: true})}">
+ *     <div>Items</div>
+ *   </div>
+ * `;
+ * ```
+ */
+export const divider = directive(DividerDirective);

labs/gb/components/divider/md-divider.ts

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {css, CSSResultOrNative, html, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+import dividerStyles from './divider.css' with {type: 'css'}; // github-only
+// import {styles as dividerStyles} from './divider.cssresult.js'; // google3-only
+
+import {divider} from './divider.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    /** A Material Design divider component. */
+    'md-divider': Divider;
+  }
+}
+
+/**
+ * A Material Design divider component.
+ */
+@customElement('md-divider')
+export class Divider extends LitElement {
+  static override styles: CSSResultOrNative[] = [
+    dividerStyles,
+    css`
+      :host {
+        display: flex;
+      }
+      .divider {
+        flex: 1;
+      }
+      :host(:not([vertical])) {
+        width: 100%;
+      }
+      :host([vertical]) {
+        min-height: 100%;
+      }
+    `,
+  ];
+
+  /**
+   * Whether or not the divider is vertical.
+   */
+  @property({type: Boolean, reflect: true}) vertical = false;
+
+  protected override render() {
+    return html`<div part="divider" class="${divider(this)}"></div>`;
+  }
+}