components/chart-toolbar.js

class ChartToolbar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          background-color: #1e1e2d;
          padding: 0.5rem;
          border-bottom: 1px solid #2d2d3d;
        }
        .toolbar-container {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .toolbar-group {
          display: flex;
          gap: 0.5rem;
        }
        .tool-btn {
          background: transparent;
          border: none;
          color: #b2b5be;
          padding: 0.5rem;
          border-radius: 0.25rem;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .tool-btn:hover {
          background: #2d2d3d;
          color: #fff;
        }
        .tool-btn.active {
          color: #2962ff;
        }
      </style>
      <div class="toolbar-container">
        <div class="toolbar-group">
          <button class="tool-btn">
            <i data-feather="menu"></i>
          </button>
          <button class="tool-btn active">
            <i data-feather="trending-up"></i>
          </button>
          <button class="tool-btn">
            <i data-feather="bar-chart-2"></i>
          </button>
          <button class="tool-btn">
            <i data-feather="settings"></i>
          </button>
        </div>
        <div class="toolbar-group">
          <button class="tool-btn">
            <i data-feather="download"></i>
          </button>
          <button class="tool-btn">
            <i data-feather="share-2"></i>
          </button>
          <button class="tool-btn">
            <i data-feather="maximize-2"></i>
          </button>
        </div>
      </div>
    `;
  }
}

customElements.define('chart-toolbar', ChartToolbar);