feat(labs): add toolbar web component suite

labs/gb/components/toolbar/_toolbar-tokens.scss

@@ -0,0 +1,70 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  // LINT.IfChange
+  --button-container-color: var(--md-sys-color-surface-container);
+  --container-color: var(--md-sys-color-surface-container);
+  --container-elevation: var(--md-sys-elevation-shadow-3);
+  --container-leading-space: var(--md-sys-space-100);
+  --container-shape: var(--md-sys-shape-corner-full);
+  --container-spacing: var(--md-sys-space-50);
+  --container-trailing-space: var(--md-sys-space-100);
+  --docked-container-elevation: var(--md-sys-elevation-shadow-0);
+  --docked-container-height: 64px;
+  --docked-container-leading-space: var(--md-sys-space-200);
+  --docked-container-max-spacing: 32px;
+  --docked-container-min-spacing: 4px;
+  --docked-container-shape: var(--md-sys-shape-corner-none);
+  --docked-container-trailing-space: var(--md-sys-space-200);
+  --horizontal-container-height: 64px;
+  --icon-color: var(--md-sys-color-on-surface-variant);
+  --label-text-color: var(--md-sys-color-on-surface-variant);
+  --min-button-size: 40px;
+  --motion-duration: var(--md-sys-motion-duration-short4);
+  --motion-easing: var(--md-sys-motion-easing-emphasized);
+  --selected-button-container-color: var(--md-sys-color-secondary-container);
+  --selected-icon-color: var(--md-sys-color-on-secondary-container);
+  --selected-label-text-color: var(--md-sys-color-on-secondary-container);
+  --separator-color: var(--md-sys-color-outline-variant);
+  --separator-height: 24px;
+  --separator-margin: 4px;
+  --separator-width: 1px;
+  --vertical-container-width: 64px;
+  // LINT.ThenChange(toolbar-element.ts) keep in sync with `@cssprop` jsdoc tags
+}
+
+@mixin standard {
+  --button-container-color: var(--md-sys-color-surface-container);
+  --container-color: var(--md-sys-color-surface-container);
+  --icon-color: var(--md-sys-color-on-surface-variant);
+  --label-text-color: var(--md-sys-color-on-surface-variant);
+  --selected-button-container-color: var(--md-sys-color-secondary-container);
+  --selected-icon-color: var(--md-sys-color-on-secondary-container);
+  --selected-label-text-color: var(--md-sys-color-on-secondary-container);
+}
+
+@mixin vibrant {
+  --button-container-color: var(--md-sys-color-primary-container);
+  --container-color: var(--md-sys-color-primary-container);
+  --icon-color: var(--md-sys-color-on-primary-container);
+  --label-text-color: var(--md-sys-color-on-primary-container);
+  --selected-button-container-color: var(--md-sys-color-surface-container);
+  --selected-icon-color: var(--md-sys-color-on-surface);
+  --selected-label-text-color: var(--md-sys-color-on-surface);
+}
+
+@mixin docked {
+  --container-elevation: var(--docked-container-elevation);
+  --container-leading-space: var(--docked-container-leading-space);
+  --container-shape: var(--docked-container-shape);
+  --container-spacing: clamp(
+    var(--docked-container-min-spacing),
+    4vw,
+    var(--docked-container-max-spacing)
+  );
+  --container-trailing-space: var(--docked-container-trailing-space);
+  --horizontal-container-height: var(--docked-container-height);
+}

labs/gb/components/toolbar/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>>(
+  'Toolbar',
+);
+
+collection.addStories(...materialInitsToStoryInits(stories));
+
+setUpDemo(collection);

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

@@ -0,0 +1,114 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import '@material/web/labs/gb/components/toolbar/md-gb-toolbar.js';
+import '@material/web/labs/gb/styles/icon/md-gb-icon.js';
+
+import {MaterialStoryInit} from './material-collection.js';
+import {
+  type ToolbarColor,
+  type ToolbarOrientation,
+} from '@material/web/labs/gb/components/toolbar/toolbar.js';
+import {adoptStyles} from '@material/web/labs/gb/styles/adopt-styles.js';
+import {styles as m3Styles} from '@material/web/labs/gb/styles/m3.css' with {type: 'css'}; // github-only
+// import {styles as m3Styles} from '@material/web/labs/gb/styles/m3.cssresult.js'; // google3-only
+import {css, html, nothing} from 'lit';
+
+/** Knob types for toolbar stories. */
+export interface StoryKnobs {
+  color?: ToolbarColor;
+  orientation?: ToolbarOrientation;
+  docked: boolean;
+}
+
+adoptStyles(document, [
+  m3Styles,
+  css`
+    :root {
+      --md-icon-font: 'Material Symbols Outlined';
+    }
+  `,
+]);
+
+const playground: MaterialStoryInit<StoryKnobs> = {
+  name: 'Playground',
+  render(knobs) {
+    return html`
+      <md-gb-toolbar
+        color=${knobs.color || nothing}
+        orientation=${knobs.orientation || nothing}
+        ?docked=${knobs.docked}>
+        <md-gb-toolbar-icon-button
+          icon="format_align_left"
+          aria-label="Align Left"></md-gb-toolbar-icon-button>
+        <md-gb-toolbar-icon-button
+          icon="format_align_center"
+          aria-label="Align Center"></md-gb-toolbar-icon-button>
+        <md-gb-toolbar-icon-button
+          icon="format_align_right"
+          aria-label="Align Right"></md-gb-toolbar-icon-button>
+        <md-gb-toolbar-separator></md-gb-toolbar-separator>
+        <md-gb-toolbar-icon-button
+          icon="format_bold"
+          aria-label="Bold"></md-gb-toolbar-icon-button>
+        <md-gb-toolbar-button
+          icon="palette"
+          label="Color"></md-gb-toolbar-button>
+      </md-gb-toolbar>
+    `;
+  },
+};
+
+const vibrant: MaterialStoryInit<StoryKnobs> = {
+  name: 'Vibrant',
+  render(knobs) {
+    return html`
+      <md-gb-toolbar
+        color="vibrant"
+        orientation=${knobs.orientation || nothing}
+        ?docked=${knobs.docked}>
+        <md-gb-toolbar-icon-button
+          icon="undo"
+          aria-label="Undo"></md-gb-toolbar-icon-button>
+        <md-gb-toolbar-icon-button
+          icon="redo"
+          aria-label="Redo"></md-gb-toolbar-icon-button>
+        <md-gb-toolbar-separator></md-gb-toolbar-separator>
+        <md-gb-toolbar-icon-button
+          icon="share"
+          aria-label="Share"></md-gb-toolbar-icon-button>
+      </md-gb-toolbar>
+    `;
+  },
+};
+
+const docked: MaterialStoryInit<StoryKnobs> = {
+  name: 'Docked',
+  render(knobs) {
+    return html`
+      <md-gb-toolbar
+        color=${knobs.color || nothing}
+        orientation=${knobs.orientation || nothing}
+        docked>
+        <md-gb-toolbar-icon-button
+          icon="home"
+          aria-label="Home"></md-gb-toolbar-icon-button>
+        <md-gb-toolbar-icon-button
+          icon="search"
+          aria-label="Search"></md-gb-toolbar-icon-button>
+        <md-gb-toolbar-icon-button
+          icon="notifications"
+          aria-label="Notifications"></md-gb-toolbar-icon-button>
+        <md-gb-toolbar-icon-button
+          icon="settings"
+          aria-label="Settings"></md-gb-toolbar-icon-button>
+      </md-gb-toolbar>
+    `;
+  },
+};
+
+/** Toolbar stories. */
+export const stories = [playground, vibrant, docked];

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

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  ToolbarButtonElement,
+  ToolbarIconButtonElement,
+} from './toolbar-button-element.js';
+import {ToolbarElement} from './toolbar-element.js';
+import {ToolbarSeparatorElement} from './toolbar-separator-element.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    /** A Material Design gBreeze toolbar container custom element. */
+    'md-gb-toolbar': ToolbarElement;
+    /** A Material Design gBreeze toolbar button custom element. */
+    'md-gb-toolbar-button': ToolbarButtonElement;
+    /** A Material Design gBreeze toolbar icon button custom element. */
+    'md-gb-toolbar-icon-button': ToolbarIconButtonElement;
+    /** A Material Design gBreeze toolbar separator custom element. */
+    'md-gb-toolbar-separator': ToolbarSeparatorElement;
+  }
+}
+
+customElements.define('md-gb-toolbar', ToolbarElement);
+customElements.define('md-gb-toolbar-button', ToolbarButtonElement);
+customElements.define('md-gb-toolbar-icon-button', ToolbarIconButtonElement);
+customElements.define('md-gb-toolbar-separator', ToolbarSeparatorElement);
+
+export {
+  ToolbarElement as MdGbToolbar,
+  ToolbarButtonElement as MdGbToolbarButton,
+  ToolbarIconButtonElement as MdGbToolbarIconButton,
+  ToolbarSeparatorElement as MdGbToolbarSeparator,
+  ToolbarElement as Toolbar,
+  ToolbarButtonElement as ToolbarButton,
+  ToolbarIconButtonElement as ToolbarIconButton,
+  ToolbarSeparatorElement as ToolbarSeparator,
+};