feat(dees-button-group): add new button group component with demo and styling

fix(dees-chart-area): improve real-time updates and chart element handling
fix(dees-chart-log): refactor demo to store log element reference
chore: update dependencies in package.json and pnpm-lock.yaml

ts_web/elements/dees-button-group.ts

@@ -0,0 +1,83 @@
+import {
+  DeesElement,
+  css,
+  cssManager,
+  customElement,
+  html,
+  property,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+import { demoFunc } from './dees-button-group.demo.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-button-group': DeesButtonGroup;
+  }
+}
+
+@customElement('dees-button-group')
+export class DeesButtonGroup extends DeesElement {
+  public static demo = demoFunc;
+
+  @property()
+  public label: string = '';
+
+  @property()
+  public direction: 'horizontal' | 'vertical' = 'horizontal';
+
+  constructor() {
+    super();
+    domtools.elementBasic.setup();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: inline-block;
+      }
+
+      .button-group {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        padding: 8px;
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
+        border-radius: 6px;
+      }
+
+      .button-group.vertical {
+        flex-direction: column;
+        align-items: stretch;
+      }
+
+      .label {
+        color: ${cssManager.bdTheme('#666', '#999')};
+        font-size: 12px;
+        font-family: 'Geist Sans', sans-serif;
+        margin-right: 8px;
+        white-space: nowrap;
+      }
+
+      .button-group.vertical .label {
+        margin-right: 0;
+        margin-bottom: 8px;
+      }
+
+      ::slotted(*) {
+        margin: 0 !important;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="button-group ${this.direction}">
+        ${this.label ? html`<span class="label">${this.label}</span>` : ''}
+        <slot></slot>
+      </div>
+    `;
+  }
+}