v3.43.2

changelog.md

@@ -1,5 +1,37 @@
 # Changelog
 
+## 2026-02-21 - 3.43.2 - fix(dees-chart-log)
+avoid duplicate log entries, optimize incremental updates, enforce maxEntries, and respect filters when writing logs
+
+- Prevent property-bound logEntries from duplicating entries already present in logBuffer by deduplicating on timestamp|message
+- Call updateMetrics() when replaying or appending log entries so metrics stay accurate
+- Skip processing entirely when the incoming logEntries array is unchanged
+- Optimize append-only updates by writing only the new tail entries instead of full re-render
+- Enforce maxEntries when appending to the logBuffer to maintain buffer size
+- Respect filterMode and searchQuery when deciding whether to write appended entries to the terminal
+
+## 2026-02-21 - 3.43.1 - fix(dees-chart-log)
+replay buffered log entries when terminal becomes ready and sync logEntries updates to re-render filtered logs
+
+- Replay entries stored in logBuffer after terminal initialization to avoid losing entries that arrived early
+- Add updated() lifecycle hook to copy logEntries into logBuffer and call reRenderFilteredLogs when terminalReady
+- Call super.updated(changedProperties) to preserve base class behavior
+
+## 2026-02-17 - 3.43.0 - feat(dees-form)
+add layout styles to dees-form and standardize demo input grouping
+
+- Add static CSS to dees-form: default column layout with gap and support for [horizontal-layout] (row wrapping, alignment and gap).
+- Remove inline <style> from dees-form render to centralize styling.
+- Simplify dees-input-base styles by removing host margins and making spacing container-driven.
+- Update multiple demo files to wrap related inputs in a new .input-group container and include .input-group CSS for consistent vertical spacing.
+
+## 2026-02-16 - 3.42.2 - fix(dees-chart-area)
+add ApexAxisChartSeries type to dees-chart-area component to improve typing for ApexCharts series data
+
+- Introduces ApexAxisChartSeries type alias with support for number arrays, [x,y] tuples, and object {x,y,...} series entries
+- Type-only change — no runtime or API behavior modified
+- File changed: ts_web/elements/00group-chart/dees-chart-area/component.ts
+
 ## 2026-02-16 - 3.42.1 - fix(dees-table)
 Guard against undefined action.type in dees-table by using optional chaining and update several dependencies
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.42.1",
+  "version": "3.43.2",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.42.1',
+  version: '3.43.2',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/elements/00group-chart/dees-chart-area/component.ts

@@ -12,6 +12,16 @@ import { chartAreaStyles } from './styles.js';
 import { renderChartArea } from './template.js';
 
 import type ApexCharts from 'apexcharts';
+
+type ApexAxisChartSeries = {
+  name?: string;
+  type?: string;
+  color?: string;
+  group?: string;
+  hidden?: boolean;
+  zIndex?: number;
+  data: (number | null)[] | { x: any; y: any; [key: string]: any }[] | [number, number | null][] | number[][];
+}[];
 import { DeesServiceLibLoader } from '../../../services/index.js';
 
 declare global {

ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.ts

@@ -385,11 +385,23 @@ export class DeesChartLog extends DeesElement {
     this.domtoolsInstance = await this.domtoolsPromise;
     await this.initializeTerminal();
 
-    // Process any initial log entries
-    if (this.logEntries.length > 0) {
+    // initializeTerminal() already replayed logBuffer (from addLog/updateLog).
+    // Now handle logEntries set via property binding before terminal was ready.
+    if (this.logEntries.length > 0 && this.logBuffer.length === 0) {
+      this.logBuffer = [...this.logEntries];
       for (const entry of this.logEntries) {
+        this.updateMetrics(entry.level);
         this.writeLogEntry(entry);
       }
+    } else if (this.logEntries.length > 0 && this.logBuffer.length > 0) {
+      const bufferSet = new Set(this.logBuffer.map(e => `${e.timestamp}|${e.message}`));
+      for (const entry of this.logEntries) {
+        if (!bufferSet.has(`${entry.timestamp}|${entry.message}`)) {
+          this.logBuffer.push(entry);
+          this.updateMetrics(entry.level);
+          this.writeLogEntry(entry);
+        }
+      }
     }
   }
 
@@ -445,6 +457,58 @@ export class DeesChartLog extends DeesElement {
     this.rateInterval = setInterval(() => this.calculateRate(), 1000);
 
     this.terminalReady = true;
+
+    // Replay any entries that arrived via updateLog()/addLog() before terminal was ready
+    for (const entry of this.logBuffer) {
+      this.writeLogEntry(entry);
+    }
+  }
+
+  public updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('logEntries') && this.terminalReady && this.logEntries.length > 0) {
+      const oldEntries: ILogEntry[] = changedProperties.get('logEntries') || [];
+      const newEntries = this.logEntries;
+
+      // Same content? Skip entirely.
+      if (
+        oldEntries.length === newEntries.length &&
+        oldEntries.length > 0 &&
+        oldEntries[oldEntries.length - 1].timestamp === newEntries[newEntries.length - 1].timestamp &&
+        oldEntries[oldEntries.length - 1].message === newEntries[newEntries.length - 1].message
+      ) {
+        return;
+      }
+
+      // Append-only? Write only the new tail entries incrementally.
+      if (
+        newEntries.length > oldEntries.length &&
+        oldEntries.length > 0 &&
+        oldEntries[oldEntries.length - 1].timestamp === newEntries[oldEntries.length - 1].timestamp &&
+        oldEntries[oldEntries.length - 1].message === newEntries[oldEntries.length - 1].message
+      ) {
+        const tailEntries = newEntries.slice(oldEntries.length);
+        for (const entry of tailEntries) {
+          this.logBuffer.push(entry);
+          this.updateMetrics(entry.level);
+
+          // Enforce maxEntries
+          if (this.logBuffer.length > this.maxEntries) {
+            this.logBuffer.shift();
+          }
+
+          // Respect filter mode
+          if (!this.filterMode || !this.searchQuery || this.entryMatchesFilter(entry)) {
+            this.writeLogEntry(entry);
+          }
+        }
+        return;
+      }
+
+      // Different content — full re-render
+      this.logBuffer = [...newEntries];
+      this.reRenderFilteredLogs();
+    }
   }
 
   private getTerminalTheme() {

ts_web/elements/00group-form/dees-form/dees-form.ts

@@ -1,6 +1,7 @@
 import {
   customElement,
   html,
+  css,
   type TemplateResult,
   DeesElement,
   type CSSResult,
@@ -81,13 +82,25 @@ export class DeesForm extends DeesElement {
   @property({ type: Boolean, reflect: true, attribute: 'horizontal-layout' })
   accessor horizontalLayout: boolean = false;
 
+  public static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+
+      :host([horizontal-layout]) {
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        gap: 16px;
+      }
+    `,
+  ];
+
   public render(): TemplateResult {
     return html`
-      <style>
-        :host {
-          display: contents;
-        }
-      </style>
       <slot></slot>
     `;
   }

ts_web/elements/00group-input/dees-input-base/dees-input-base.ts

@@ -54,37 +54,20 @@ export abstract class DeesInputBase<T = any> extends DeesElement {
         /* CSS Variables for consistent spacing */
         :host {
           --dees-input-spacing-unit: 8px;
-          --dees-input-vertical-gap: calc(var(--dees-input-spacing-unit) * 2); /* 16px */
-          --dees-input-horizontal-gap: calc(var(--dees-input-spacing-unit) * 2); /* 16px */
           --dees-input-label-gap: var(--dees-input-spacing-unit); /* 8px */
         }
 
-        /* Default vertical stacking mode (for forms) */
+        /* Default block display with no margins - spacing is container-driven */
         :host {
           display: block;
           margin: 0;
-          margin-bottom: var(--dees-input-vertical-gap);
-        }
-
-        /* Last child in container should have no bottom margin */
-        :host(:last-child) {
-          margin-bottom: 0;
         }
 
         /* Horizontal layout mode - activated by attribute */
         :host([layout-mode="horizontal"]) {
           display: inline-block;
-          margin: 0;
-          margin-right: var(--dees-input-horizontal-gap);
-          margin-bottom: 0;
         }
 
-        :host([layout-mode="horizontal"]:last-child) {
-          margin-right: 0;
-        }
-
-        /* Auto mode - inherit from parent dees-form if present */
-
         /* Label position variations */
         :host([label-position="left"]) .input-wrapper {
           display: grid;

ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.ts

@@ -31,6 +31,12 @@ export const demoFunc = () => html`
         flex-wrap: wrap;
       }
       
+      .input-group {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+
       .spacer {
         height: 200px;
         display: flex;
@@ -63,30 +69,32 @@ export const demoFunc = () => html`
       }
     }}>
       <dees-panel .title=${'1. Basic Dropdowns'} .subtitle=${'Standard dropdown with search functionality and various options'}>
-        <dees-input-dropdown
-          .label=${'Select Country'}
-          .options=${[
-            { option: 'United States', key: 'us' },
-            { option: 'Canada', key: 'ca' },
-            { option: 'Germany', key: 'de' },
-            { option: 'France', key: 'fr' },
-            { option: 'United Kingdom', key: 'uk' },
-            { option: 'Australia', key: 'au' },
-            { option: 'Japan', key: 'jp' },
-            { option: 'Brazil', key: 'br' }
-          ]}
-          .selectedOption=${{ option: 'United States', key: 'us' }}
-        ></dees-input-dropdown>
-        
-        <dees-input-dropdown
-          .label=${'Select Role'}
-          .options=${[
-            { option: 'Administrator', key: 'admin' },
-            { option: 'Editor', key: 'editor' },
-            { option: 'Viewer', key: 'viewer' },
-            { option: 'Guest', key: 'guest' }
-          ]}
-        ></dees-input-dropdown>
+        <div class="input-group">
+          <dees-input-dropdown
+            .label=${'Select Country'}
+            .options=${[
+              { option: 'United States', key: 'us' },
+              { option: 'Canada', key: 'ca' },
+              { option: 'Germany', key: 'de' },
+              { option: 'France', key: 'fr' },
+              { option: 'United Kingdom', key: 'uk' },
+              { option: 'Australia', key: 'au' },
+              { option: 'Japan', key: 'jp' },
+              { option: 'Brazil', key: 'br' }
+            ]}
+            .selectedOption=${{ option: 'United States', key: 'us' }}
+          ></dees-input-dropdown>
+
+          <dees-input-dropdown
+            .label=${'Select Role'}
+            .options=${[
+              { option: 'Administrator', key: 'admin' },
+              { option: 'Editor', key: 'editor' },
+              { option: 'Viewer', key: 'viewer' },
+              { option: 'Guest', key: 'guest' }
+            ]}
+          ></dees-input-dropdown>
+        </div>
       </dees-panel>
     </dees-demowrapper>
     
@@ -176,24 +184,26 @@ export const demoFunc = () => html`
       }
     }}>
       <dees-panel .title=${'4. States'} .subtitle=${'Different states and configurations'}>
-        <dees-input-dropdown
-          .label=${'Required Field'}
-          .required=${true}
-          .options=${[
-            { option: 'Option A', key: 'a' },
-            { option: 'Option B', key: 'b' },
-            { option: 'Option C', key: 'c' }
-          ]}
-        ></dees-input-dropdown>
-        
-        <dees-input-dropdown
-          .label=${'Disabled Dropdown'}
-          .disabled=${true}
-          .options=${[
-            { option: 'Cannot Select', key: 'disabled' }
-          ]}
-          .selectedOption=${{ option: 'Cannot Select', key: 'disabled' }}
-        ></dees-input-dropdown>
+        <div class="input-group">
+          <dees-input-dropdown
+            .label=${'Required Field'}
+            .required=${true}
+            .options=${[
+              { option: 'Option A', key: 'a' },
+              { option: 'Option B', key: 'b' },
+              { option: 'Option C', key: 'c' }
+            ]}
+          ></dees-input-dropdown>
+
+          <dees-input-dropdown
+            .label=${'Disabled Dropdown'}
+            .disabled=${true}
+            .options=${[
+              { option: 'Cannot Select', key: 'disabled' }
+            ]}
+            .selectedOption=${{ option: 'Cannot Select', key: 'disabled' }}
+          ></dees-input-dropdown>
+        </div>
       </dees-panel>
     </dees-demowrapper>
     

ts_web/elements/00group-input/dees-input-iban/dees-input-iban.demo.ts

@@ -13,6 +13,12 @@ export const demoFunc = () => html`
           margin: 0 auto;
         }
         
+        .input-group {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+        }
+
         .payment-group {
           display: flex;
           align-items: center;
@@ -24,16 +30,18 @@ export const demoFunc = () => html`
     
     <div class="demo-container">
       <dees-panel .title=${'Basic IBAN Input'} .subtitle=${'International Bank Account Number with automatic formatting'}>
-        <dees-input-iban 
-          .label=${'Bank Account IBAN'} 
-          .description=${'Enter your International Bank Account Number'}
-        ></dees-input-iban>
-        
-        <dees-input-iban 
-          .label=${'Verified IBAN'} 
-          .description=${'This IBAN has been verified'}
-          .value=${'DE89370400440532013000'}
-        ></dees-input-iban>
+        <div class="input-group">
+          <dees-input-iban
+            .label=${'Bank Account IBAN'}
+            .description=${'Enter your International Bank Account Number'}
+          ></dees-input-iban>
+
+          <dees-input-iban
+            .label=${'Verified IBAN'}
+            .description=${'This IBAN has been verified'}
+            .value=${'DE89370400440532013000'}
+          ></dees-input-iban>
+        </div>
       </dees-panel>
       
       <dees-panel .title=${'Payment Information'} .subtitle=${'IBAN input with horizontal layout for payment forms'}>
@@ -53,18 +61,20 @@ export const demoFunc = () => html`
       </dees-panel>
       
       <dees-panel .title=${'Validation & States'} .subtitle=${'Required fields and disabled states'}>
-        <dees-input-iban 
-          .label=${'Payment Account'} 
-          .description=${'Required for processing payments'}
-          .required=${true}
-        ></dees-input-iban>
-        
-        <dees-input-iban 
-          .label=${'Locked IBAN'} 
-          .description=${'This IBAN cannot be changed'}
-          .value=${'FR1420041010050500013M02606'}
-          .disabled=${true}
-        ></dees-input-iban>
+        <div class="input-group">
+          <dees-input-iban
+            .label=${'Payment Account'}
+            .description=${'Required for processing payments'}
+            .required=${true}
+          ></dees-input-iban>
+
+          <dees-input-iban
+            .label=${'Locked IBAN'}
+            .description=${'This IBAN cannot be changed'}
+            .value=${'FR1420041010050500013M02606'}
+            .disabled=${true}
+          ></dees-input-iban>
+        </div>
       </dees-panel>
       
       <dees-panel .title=${'Bank Transfer Form'} .subtitle=${'Complete form example with IBAN validation'}>

ts_web/elements/00group-input/dees-input-phone/dees-input-phone.demo.ts

@@ -13,6 +13,12 @@ export const demoFunc = () => html`
           margin: 0 auto;
         }
         
+        .input-group {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+        }
+
         .horizontal-group {
           display: flex;
           align-items: center;
@@ -24,18 +30,20 @@ export const demoFunc = () => html`
     
     <div class="demo-container">
       <dees-panel .title=${'Basic Phone Input'} .subtitle=${'Automatic formatting for phone numbers'}>
-        <dees-input-phone 
-          .label=${'Phone Number'} 
-          .description=${'Enter your phone number with country code'}
-          .value=${'5551234567'}
-        ></dees-input-phone>
-        
-        <dees-input-phone 
-          .label=${'Contact Phone'} 
-          .description=${'Required for account verification'}
-          .required=${true}
-          .placeholder=${'+1 (555) 000-0000'}
-        ></dees-input-phone>
+        <div class="input-group">
+          <dees-input-phone
+            .label=${'Phone Number'}
+            .description=${'Enter your phone number with country code'}
+            .value=${'5551234567'}
+          ></dees-input-phone>
+
+          <dees-input-phone
+            .label=${'Contact Phone'}
+            .description=${'Required for account verification'}
+            .required=${true}
+            .placeholder=${'+1 (555) 000-0000'}
+          ></dees-input-phone>
+        </div>
       </dees-panel>
       
       <dees-panel .title=${'Horizontal Layout'} .subtitle=${'Phone inputs arranged horizontally'}>
@@ -55,17 +63,19 @@ export const demoFunc = () => html`
       </dees-panel>
       
       <dees-panel .title=${'International Numbers'} .subtitle=${'Supports formatting for numbers with country codes'}>
-        <dees-input-phone 
-          .label=${'International Contact'} 
-          .description=${'Automatically formats international numbers'}
-          .value=${'441234567890'}
-        ></dees-input-phone>
-        
-        <dees-input-phone 
-          .label=${'Emergency Contact'} 
-          .value=${'911'}
-          .disabled=${true}
-        ></dees-input-phone>
+        <div class="input-group">
+          <dees-input-phone
+            .label=${'International Contact'}
+            .description=${'Automatically formats international numbers'}
+            .value=${'441234567890'}
+          ></dees-input-phone>
+
+          <dees-input-phone
+            .label=${'Emergency Contact'}
+            .value=${'911'}
+            .disabled=${true}
+          ></dees-input-phone>
+        </div>
       </dees-panel>
       
       <dees-panel .title=${'Form Integration'} .subtitle=${'Phone input as part of a contact form'}>

ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.demo.ts

@@ -14,6 +14,12 @@ export const demoFunc = () => html`
           margin: 0 auto;
         }
         
+        .input-group {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+        }
+
         .shopping-grid {
           display: grid;
           grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
@@ -60,17 +66,19 @@ export const demoFunc = () => html`
     
     <div class="demo-container">
       <dees-panel .title=${'Basic Quantity Selector'} .subtitle=${'Simple quantity input with increment/decrement buttons'}>
-        <dees-input-quantityselector
-          .label=${'Quantity'}
-          .description=${'Select the desired quantity'}
-          .value=${1}
-        ></dees-input-quantityselector>
-        
-        <dees-input-quantityselector
-          .label=${'Items in Cart'}
-          .description=${'Adjust the quantity of items'}
-          .value=${3}
-        ></dees-input-quantityselector>
+        <div class="input-group">
+          <dees-input-quantityselector
+            .label=${'Quantity'}
+            .description=${'Select the desired quantity'}
+            .value=${1}
+          ></dees-input-quantityselector>
+
+          <dees-input-quantityselector
+            .label=${'Items in Cart'}
+            .description=${'Adjust the quantity of items'}
+            .value=${3}
+          ></dees-input-quantityselector>
+        </div>
       </dees-panel>
       
       <dees-panel .title=${'Shopping Cart'} .subtitle=${'Modern e-commerce product cards with interactive quantity selectors'} .runAfterRender=${async (elementArg: HTMLElement) => {
@@ -169,19 +177,21 @@ export const demoFunc = () => html`
       </dees-panel>
       
       <dees-panel .title=${'Required & Disabled States'} .subtitle=${'Different states for validation and restrictions'}>
-        <dees-input-quantityselector
-          .label=${'Number of Licenses'}
-          .description=${'Select how many licenses you need'}
-          .required=${true}
-          .value=${1}
-        ></dees-input-quantityselector>
-        
-        <dees-input-quantityselector
-          .label=${'Fixed Quantity'}
-          .description=${'This quantity cannot be changed'}
-          .disabled=${true}
-          .value=${5}
-        ></dees-input-quantityselector>
+        <div class="input-group">
+          <dees-input-quantityselector
+            .label=${'Number of Licenses'}
+            .description=${'Select how many licenses you need'}
+            .required=${true}
+            .value=${1}
+          ></dees-input-quantityselector>
+
+          <dees-input-quantityselector
+            .label=${'Fixed Quantity'}
+            .description=${'This quantity cannot be changed'}
+            .disabled=${true}
+            .value=${5}
+          ></dees-input-quantityselector>
+        </div>
       </dees-panel>
       
       <dees-panel .title=${'Order Form'} .subtitle=${'Complete order form with quantity selection'}>

ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.demo.ts

@@ -23,6 +23,12 @@ export const demoFunc = () => html`
           margin-bottom: 0;
         }
         
+        .input-group {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+        }
+
         .demo-grid {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -60,20 +66,22 @@ export const demoFunc = () => html`
       </dees-panel>
       
       <dees-panel .title=${'2. Horizontal Layout'} .subtitle=${'Radio groups with horizontal arrangement'}>
-        <dees-input-radiogroup
-          .label=${'Do you agree with the terms?'}
-          .options=${['Yes', 'No', 'Maybe']}
-          .direction=${'horizontal'}
-          .selectedOption=${'Yes'}
-        ></dees-input-radiogroup>
-        
-        <dees-input-radiogroup
-          .label=${'Experience Level'}
-          .options=${['Beginner', 'Intermediate', 'Expert']}
-          .direction=${'horizontal'}
-          .selectedOption=${'Intermediate'}
-          .description=${'Select your experience level with web development'}
-        ></dees-input-radiogroup>
+        <div class="input-group">
+          <dees-input-radiogroup
+            .label=${'Do you agree with the terms?'}
+            .options=${['Yes', 'No', 'Maybe']}
+            .direction=${'horizontal'}
+            .selectedOption=${'Yes'}
+          ></dees-input-radiogroup>
+
+          <dees-input-radiogroup
+            .label=${'Experience Level'}
+            .options=${['Beginner', 'Intermediate', 'Expert']}
+            .direction=${'horizontal'}
+            .selectedOption=${'Intermediate'}
+            .description=${'Select your experience level with web development'}
+          ></dees-input-radiogroup>
+        </div>
       </dees-panel>
       
       <dees-panel .title=${'3. Advanced Options'} .subtitle=${'Using object format with keys and payloads'}>
@@ -132,30 +140,32 @@ export const demoFunc = () => html`
       </dees-panel>
       
       <dees-panel .title=${'6. Settings Example'} .subtitle=${'Common patterns in application settings'}>
-        <dees-input-radiogroup
-          .label=${'Theme Preference'}
-          .options=${[
-            { option: 'Light Theme', key: 'light', payload: 'light' },
-            { option: 'Dark Theme', key: 'dark', payload: 'dark' },
-            { option: 'System Default', key: 'system', payload: 'auto' }
-          ]}
-          .selectedOption=${'dark'}
-          .description=${'Choose how the application should appear'}
-        ></dees-input-radiogroup>
-        
-        <dees-input-radiogroup
-          .label=${'Notification Frequency'}
-          .options=${['All Notifications', 'Important Only', 'None']}
-          .selectedOption=${'Important Only'}
-          .description=${'Control how often you receive notifications'}
-        ></dees-input-radiogroup>
-        
-        <dees-input-radiogroup
-          .label=${'Language'}
-          .options=${['English', 'German', 'French', 'Spanish', 'Japanese']}
-          .selectedOption=${'English'}
-          .direction=${'horizontal'}
-        ></dees-input-radiogroup>
+        <div class="input-group">
+          <dees-input-radiogroup
+            .label=${'Theme Preference'}
+            .options=${[
+              { option: 'Light Theme', key: 'light', payload: 'light' },
+              { option: 'Dark Theme', key: 'dark', payload: 'dark' },
+              { option: 'System Default', key: 'system', payload: 'auto' }
+            ]}
+            .selectedOption=${'dark'}
+            .description=${'Choose how the application should appear'}
+          ></dees-input-radiogroup>
+
+          <dees-input-radiogroup
+            .label=${'Notification Frequency'}
+            .options=${['All Notifications', 'Important Only', 'None']}
+            .selectedOption=${'Important Only'}
+            .description=${'Control how often you receive notifications'}
+          ></dees-input-radiogroup>
+
+          <dees-input-radiogroup
+            .label=${'Language'}
+            .options=${['English', 'German', 'French', 'Spanish', 'Japanese']}
+            .selectedOption=${'English'}
+            .direction=${'horizontal'}
+          ></dees-input-radiogroup>
+        </div>
       </dees-panel>
       
       <dees-panel .title=${'7. Form Integration'} .subtitle=${'Works seamlessly with dees-form'}>

ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts

@@ -30,6 +30,12 @@ export const demoFunc = () => html`
         flex-wrap: wrap;
       }
       
+      .input-group {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+
       .grid-layout {
         display: grid;
         grid-template-columns: 1fr 1fr;
@@ -83,25 +89,27 @@ export const demoFunc = () => html`
       }
     }}>
       <dees-panel .title=${'Basic Text Inputs'} .subtitle=${'Standard text inputs with labels and descriptions'}>
-        <dees-input-text 
-          .label=${'Username'} 
-          .value=${'johndoe'}
-          .key=${'username'}
-        ></dees-input-text>
-        
-        <dees-input-text 
-          .label=${'Email Address'} 
-          .value=${'john@example.com'} 
-          .description=${'We will never share your email with anyone'}
-          .key=${'email'}
-        ></dees-input-text>
-        
-        <dees-input-text 
-          .label=${'Password'} 
-          .isPasswordBool=${true} 
-          .value=${'secret123'}
-          .key=${'password'}
-        ></dees-input-text>
+        <div class="input-group">
+          <dees-input-text
+            .label=${'Username'}
+            .value=${'johndoe'}
+            .key=${'username'}
+          ></dees-input-text>
+
+          <dees-input-text
+            .label=${'Email Address'}
+            .value=${'john@example.com'}
+            .description=${'We will never share your email with anyone'}
+            .key=${'email'}
+          ></dees-input-text>
+
+          <dees-input-text
+            .label=${'Password'}
+            .isPasswordBool=${true}
+            .value=${'secret123'}
+            .key=${'password'}
+          ></dees-input-text>
+        </div>
       </dees-panel>
     </dees-demowrapper>
     
@@ -172,31 +180,33 @@ export const demoFunc = () => html`
       }
     }}>
       <dees-panel .title=${'Label Positions'} .subtitle=${'Different label positioning options for various layouts'}>
-        <dees-input-text 
-          .label=${'Label on Top (Default)'} 
-          .value=${'Standard layout'} 
-          .labelPosition=${'top'}
-        ></dees-input-text>
-        
-        <dees-input-text 
-          .label=${'Label on Left'} 
-          .value=${'Inline label'} 
-          .labelPosition=${'left'}
-        ></dees-input-text>
-        
-        <div class="grid-layout">
+        <div class="input-group">
+          <dees-input-text
+            .label=${'Label on Top (Default)'}
+            .value=${'Standard layout'}
+            .labelPosition=${'top'}
+          ></dees-input-text>
+
+          <dees-input-text
+            .label=${'Label on Left'}
+            .value=${'Inline label'}
+            .labelPosition=${'left'}
+          ></dees-input-text>
+
+          <div class="grid-layout">
           <dees-input-text 
             .label=${'City'} 
             .value=${'New York'} 
             .labelPosition=${'left'}
           ></dees-input-text>
           
-          <dees-input-text 
-            .label=${'ZIP Code'} 
-            .value=${'10001'} 
+          <dees-input-text
+            .label=${'ZIP Code'}
+            .value=${'10001'}
             .labelPosition=${'left'}
           ></dees-input-text>
         </div>
+        </div>
       </dees-panel>
     </dees-demowrapper>
     
@@ -234,24 +244,26 @@ export const demoFunc = () => html`
       }
     }}>
       <dees-panel .title=${'Validation & States'} .subtitle=${'Different validation states and input configurations'}>
-        <dees-input-text 
-          .label=${'Required Field'} 
-          .required=${true}
-          .key=${'requiredField'}
-        ></dees-input-text>
-        
-        <dees-input-text 
-          .label=${'Disabled Field'} 
-          .value=${'Cannot edit this'} 
-          .disabled=${true}
-        ></dees-input-text>
-        
-        <dees-input-text 
-          .label=${'Field with Error'} 
-          .value=${'invalid@'} 
-          .validationText=${'Please enter a valid email address'}
-          .validationState=${'invalid'}
-        ></dees-input-text>
+        <div class="input-group">
+          <dees-input-text
+            .label=${'Required Field'}
+            .required=${true}
+            .key=${'requiredField'}
+          ></dees-input-text>
+
+          <dees-input-text
+            .label=${'Disabled Field'}
+            .value=${'Cannot edit this'}
+            .disabled=${true}
+          ></dees-input-text>
+
+          <dees-input-text
+            .label=${'Field with Error'}
+            .value=${'invalid@'}
+            .validationText=${'Please enter a valid email address'}
+            .validationState=${'invalid'}
+          ></dees-input-text>
+        </div>
       </dees-panel>
     </dees-demowrapper>
     
@@ -279,19 +291,21 @@ export const demoFunc = () => html`
       });
     }}>
       <dees-panel .title=${'Advanced Features'} .subtitle=${'Password visibility toggle and other advanced features'}>
-        <dees-input-text 
-          .label=${'Password with Toggle'} 
-          .isPasswordBool=${true}
-          .value=${'mySecurePassword123'}
-          .description=${'Click the eye icon to show/hide password'}
-        ></dees-input-text>
-        
-        <dees-input-text 
-          .label=${'API Key'} 
-          .isPasswordBool=${true}
-          .value=${'sk-1234567890abcdef'}
-          .description=${'Keep this key secure and never share it'}
-        ></dees-input-text>
+        <div class="input-group">
+          <dees-input-text
+            .label=${'Password with Toggle'}
+            .isPasswordBool=${true}
+            .value=${'mySecurePassword123'}
+            .description=${'Click the eye icon to show/hide password'}
+          ></dees-input-text>
+
+          <dees-input-text
+            .label=${'API Key'}
+            .isPasswordBool=${true}
+            .value=${'sk-1234567890abcdef'}
+            .description=${'Keep this key secure and never share it'}
+          ></dees-input-text>
+        </div>
       </dees-panel>
     </dees-demowrapper>
     

ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.demo.ts

@@ -13,6 +13,12 @@ export const demoFunc = () => html`
           margin: 0 auto;
         }
         
+        .input-group {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+        }
+
         .horizontal-group {
           display: flex;
           gap: 24px;
@@ -39,27 +45,30 @@ export const demoFunc = () => html`
     
     <div class="demo-container">
       <dees-panel .title=${'Basic Type List'} .subtitle=${'Add and remove items from a list'}>
-        <dees-input-typelist
-          .label=${'Tags'}
-          .description=${'Add tags by typing and pressing Enter'}
-          .value=${['javascript', 'typescript', 'web-components']}
-        ></dees-input-typelist>
-        
-        <dees-input-typelist
-          .label=${'Team Members'}
-          .description=${'Add email addresses of team members'}
-          .value=${['alice@example.com', 'bob@example.com']}
-        ></dees-input-typelist>
+        <div class="input-group">
+          <dees-input-typelist
+            .label=${'Tags'}
+            .description=${'Add tags by typing and pressing Enter'}
+            .value=${['javascript', 'typescript', 'web-components']}
+          ></dees-input-typelist>
+
+          <dees-input-typelist
+            .label=${'Team Members'}
+            .description=${'Add email addresses of team members'}
+            .value=${['alice@example.com', 'bob@example.com']}
+          ></dees-input-typelist>
+        </div>
       </dees-panel>
       
       <dees-panel .title=${'Skills & Keywords'} .subtitle=${'Manage lists of skills and keywords'}>
-        <dees-input-typelist
-          .label=${'Your Skills'}
-          .description=${'List your professional skills'}
-          .value=${['HTML', 'CSS', 'JavaScript', 'Node.js', 'React']}
-        ></dees-input-typelist>
-        
-        <div class="horizontal-group">
+        <div class="input-group">
+          <dees-input-typelist
+            .label=${'Your Skills'}
+            .description=${'List your professional skills'}
+            .value=${['HTML', 'CSS', 'JavaScript', 'Node.js', 'React']}
+          ></dees-input-typelist>
+
+          <div class="horizontal-group">
           <dees-input-typelist
             .label=${'Categories'}
             .layoutMode=${'horizontal'}
@@ -72,22 +81,25 @@ export const demoFunc = () => html`
             .value=${['innovation', 'startup', 'growth']}
           ></dees-input-typelist>
         </div>
+        </div>
       </dees-panel>
       
       <dees-panel .title=${'Required & Disabled States'} .subtitle=${'Different input states for validation'}>
-        <dees-input-typelist
-          .label=${'Project Dependencies'}
-          .description=${'List all required npm packages'}
-          .required=${true}
-          .value=${['@design.estate/dees-element', '@design.estate/dees-domtools']}
-        ></dees-input-typelist>
-        
-        <dees-input-typelist
-          .label=${'System Tags'}
-          .description=${'These tags are managed by the system'}
-          .disabled=${true}
-          .value=${['system', 'protected', 'readonly']}
-        ></dees-input-typelist>
+        <div class="input-group">
+          <dees-input-typelist
+            .label=${'Project Dependencies'}
+            .description=${'List all required npm packages'}
+            .required=${true}
+            .value=${['@design.estate/dees-element', '@design.estate/dees-domtools']}
+          ></dees-input-typelist>
+
+          <dees-input-typelist
+            .label=${'System Tags'}
+            .description=${'These tags are managed by the system'}
+            .disabled=${true}
+            .value=${['system', 'protected', 'readonly']}
+          ></dees-input-typelist>
+        </div>
       </dees-panel>
       
       <dees-panel .title=${'Article Publishing Form'} .subtitle=${'Complete form with tag management'}>