chore: add toolbar example as a pattern (story only)

examples/web-components/toolbar/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "carbon-web-components-icon-button-example",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Sample project for getting started with the Web Components from Carbon.",
+  "license": "Apache-2",
+  "main": "index.html",
+  "scripts": {
+    "build": "vite build",
+    "clean": "rimraf node_modules dist .cache",
+    "dev": "vite"
+  },
+  "dependencies": {
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
+  },
+  "devDependencies": {
+    "vite": "5.2.13",
+    "rimraf": "^3.0.2"
+  }
+}

examples/web-components/toolbar/src/index.js

@@ -0,0 +1,83 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import '@carbon/web-components/es/components/stack/index.js';
+import '@carbon/web-components/es/components/icon-button/index.js';
+import '@carbon/web-components/es/components/dropdown/index.js';
+import '@carbon/web-components/es/components/overflow-menu/index.js';
+
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('.toolbar cds-dropdown').forEach((component) => {
+    if (component.shadowRoot) {
+      const style = document.createElement('style');
+      style.textContent = `
+        .cds--list-box {
+          border-block-end: none !important;
+        }
+      `;
+      component.shadowRoot.appendChild(style);
+    }
+  });
+});
+
+// roving keyboard navigation utility
+/**
+ * Initializes roving tabindex for keyboard navigation within a container.
+ * @param {HTMLElement} container - The container element containing the buttons.
+ */
+function initRovingTabIndex(container) {
+  const buttons = Array.from(container.children).flatMap((el) =>
+    Array.from(el.children)
+  );
+  if (buttons.length === 0) return;
+
+  buttons.forEach((btn, index) =>
+    btn.setAttribute('tabindex', index === 0 ? '0' : '-1')
+  );
+
+  /**
+   * Updates the active index for keyboard navigation and sets focus on the corresponding button.
+   * @param {number} newIndex - The index of the button to be activated.
+   */
+  function updateActiveIndex(newIndex) {
+    buttons.forEach((btn, i) =>
+      btn.setAttribute('tabindex', i === newIndex ? '0' : '-1')
+    );
+    buttons[newIndex].focus();
+  }
+
+  container.addEventListener('keydown', (event) => {
+    const currentIndex = buttons.findIndex(
+      (btn) => btn.getAttribute('tabindex') === '0'
+    );
+
+    let newIndex = currentIndex;
+    if (event.key === 'ArrowRight') {
+      newIndex = (currentIndex + 1) % buttons.length;
+    } else if (event.key === 'ArrowLeft') {
+      newIndex = (currentIndex - 1 + buttons.length) % buttons.length;
+    } else {
+      return;
+    }
+
+    updateActiveIndex(newIndex);
+    event.preventDefault();
+  });
+
+  container.addEventListener('click', (event) => {
+    const clickedIndex = buttons.indexOf(event.target);
+    if (clickedIndex !== -1) {
+      updateActiveIndex(clickedIndex);
+    }
+  });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('.toolbar').forEach(initRovingTabIndex);
+});

examples/web-components/toolbar/src/styles.scss

@@ -0,0 +1,64 @@
+//
+// Copyright IBM Corp. 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+// :root {
+//   @include theme.theme(themes.$g100); // change this to check all themes
+// }
+.toolbar {
+  display: inline-flex;
+  background: var(--cds-layer);
+
+  svg {
+    pointer-events: none;
+  }
+
+  &[orientation='vertical'] {
+    max-inline-size: 2.5rem;
+  }
+}
+
+.toolbar-group {
+  flex-direction: row;
+  border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
+  border-inline-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
+
+  &[orientation='vertical'] {
+    border-inline-end: none;
+    max-inline-size: 2.5rem;
+
+    &:last-child {
+      border-block-end: none;
+    }
+  }
+
+  &:last-child {
+    border-inline-end: none;
+  }
+}
+
+// css for adding caret through class name
+.toolbar-button-caret {
+  position: relative;
+
+  &::before {
+    position: absolute;
+    background: linear-gradient(
+      to right bottom,
+      transparent 50%,
+      var(--cds-icon-primary, #161616) 50%
+    );
+    block-size: calc(0.125rem + 0.25rem);
+    content: '';
+    inline-size: calc(0.125rem + 0.25rem);
+    inset-block-end: 0.175rem;
+    inset-inline-end: 0.175rem;
+  }
+}

examples/web-components/toolbar/vite.config.js

@@ -0,0 +1,20 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { resolve } from 'path';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, 'index.html'),
+      },
+    },
+  },
+});