feat(dees-form): add layout styles to dees-form and standardize demo input grouping

changelog.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 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
 

ts_web/00_commitinfo_data.ts

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

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,6 +69,7 @@ export const demoFunc = () => html`
       }
     }}>
       <dees-panel .title=${'1. Basic Dropdowns'} .subtitle=${'Standard dropdown with search functionality and various options'}>
+        <div class="input-group">
           <dees-input-dropdown
             .label=${'Select Country'}
             .options=${[
@@ -87,6 +94,7 @@ export const demoFunc = () => html`
               { option: 'Guest', key: 'guest' }
             ]}
           ></dees-input-dropdown>
+        </div>
       </dees-panel>
     </dees-demowrapper>
     
@@ -176,6 +184,7 @@ export const demoFunc = () => html`
       }
     }}>
       <dees-panel .title=${'4. States'} .subtitle=${'Different states and configurations'}>
+        <div class="input-group">
           <dees-input-dropdown
             .label=${'Required Field'}
             .required=${true}
@@ -194,6 +203,7 @@ export const demoFunc = () => html`
             ]}
             .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,6 +30,7 @@ export const demoFunc = () => html`
     
     <div class="demo-container">
       <dees-panel .title=${'Basic IBAN Input'} .subtitle=${'International Bank Account Number with automatic formatting'}>
+        <div class="input-group">
           <dees-input-iban
             .label=${'Bank Account IBAN'}
             .description=${'Enter your International Bank Account Number'}
@@ -34,6 +41,7 @@ export const demoFunc = () => html`
             .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,6 +61,7 @@ export const demoFunc = () => html`
       </dees-panel>
       
       <dees-panel .title=${'Validation & States'} .subtitle=${'Required fields and disabled states'}>
+        <div class="input-group">
           <dees-input-iban
             .label=${'Payment Account'}
             .description=${'Required for processing payments'}
@@ -65,6 +74,7 @@ export const demoFunc = () => html`
             .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,6 +30,7 @@ export const demoFunc = () => html`
     
     <div class="demo-container">
       <dees-panel .title=${'Basic Phone Input'} .subtitle=${'Automatic formatting for phone numbers'}>
+        <div class="input-group">
           <dees-input-phone
             .label=${'Phone Number'}
             .description=${'Enter your phone number with country code'}
@@ -36,6 +43,7 @@ export const demoFunc = () => html`
             .required=${true}
             .placeholder=${'+1 (555) 000-0000'}
           ></dees-input-phone>
+        </div>
       </dees-panel>
       
       <dees-panel .title=${'Horizontal Layout'} .subtitle=${'Phone inputs arranged horizontally'}>
@@ -55,6 +63,7 @@ export const demoFunc = () => html`
       </dees-panel>
       
       <dees-panel .title=${'International Numbers'} .subtitle=${'Supports formatting for numbers with country codes'}>
+        <div class="input-group">
           <dees-input-phone
             .label=${'International Contact'}
             .description=${'Automatically formats international numbers'}
@@ -66,6 +75,7 @@ export const demoFunc = () => html`
             .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,6 +66,7 @@ export const demoFunc = () => html`
     
     <div class="demo-container">
       <dees-panel .title=${'Basic Quantity Selector'} .subtitle=${'Simple quantity input with increment/decrement buttons'}>
+        <div class="input-group">
           <dees-input-quantityselector
             .label=${'Quantity'}
             .description=${'Select the desired quantity'}
@@ -71,6 +78,7 @@ export const demoFunc = () => html`
             .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,6 +177,7 @@ export const demoFunc = () => html`
       </dees-panel>
       
       <dees-panel .title=${'Required & Disabled States'} .subtitle=${'Different states for validation and restrictions'}>
+        <div class="input-group">
           <dees-input-quantityselector
             .label=${'Number of Licenses'}
             .description=${'Select how many licenses you need'}
@@ -182,6 +191,7 @@ export const demoFunc = () => html`
             .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,6 +66,7 @@ export const demoFunc = () => html`
       </dees-panel>
       
       <dees-panel .title=${'2. Horizontal Layout'} .subtitle=${'Radio groups with horizontal arrangement'}>
+        <div class="input-group">
           <dees-input-radiogroup
             .label=${'Do you agree with the terms?'}
             .options=${['Yes', 'No', 'Maybe']}
@@ -74,6 +81,7 @@ export const demoFunc = () => html`
             .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,6 +140,7 @@ export const demoFunc = () => html`
       </dees-panel>
       
       <dees-panel .title=${'6. Settings Example'} .subtitle=${'Common patterns in application settings'}>
+        <div class="input-group">
           <dees-input-radiogroup
             .label=${'Theme Preference'}
             .options=${[
@@ -156,6 +165,7 @@ export const demoFunc = () => html`
             .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,6 +89,7 @@ export const demoFunc = () => html`
       }
     }}>
       <dees-panel .title=${'Basic Text Inputs'} .subtitle=${'Standard text inputs with labels and descriptions'}>
+        <div class="input-group">
           <dees-input-text
             .label=${'Username'}
             .value=${'johndoe'}
@@ -102,6 +109,7 @@ export const demoFunc = () => html`
             .value=${'secret123'}
             .key=${'password'}
           ></dees-input-text>
+        </div>
       </dees-panel>
     </dees-demowrapper>
     
@@ -172,6 +180,7 @@ export const demoFunc = () => html`
       }
     }}>
       <dees-panel .title=${'Label Positions'} .subtitle=${'Different label positioning options for various layouts'}>
+        <div class="input-group">
           <dees-input-text
             .label=${'Label on Top (Default)'}
             .value=${'Standard layout'}
@@ -197,6 +206,7 @@ export const demoFunc = () => html`
             .labelPosition=${'left'}
           ></dees-input-text>
         </div>
+        </div>
       </dees-panel>
     </dees-demowrapper>
     
@@ -234,6 +244,7 @@ export const demoFunc = () => html`
       }
     }}>
       <dees-panel .title=${'Validation & States'} .subtitle=${'Different validation states and input configurations'}>
+        <div class="input-group">
           <dees-input-text
             .label=${'Required Field'}
             .required=${true}
@@ -252,6 +263,7 @@ export const demoFunc = () => html`
             .validationText=${'Please enter a valid email address'}
             .validationState=${'invalid'}
           ></dees-input-text>
+        </div>
       </dees-panel>
     </dees-demowrapper>
     
@@ -279,6 +291,7 @@ export const demoFunc = () => html`
       });
     }}>
       <dees-panel .title=${'Advanced Features'} .subtitle=${'Password visibility toggle and other advanced features'}>
+        <div class="input-group">
           <dees-input-text
             .label=${'Password with Toggle'}
             .isPasswordBool=${true}
@@ -292,6 +305,7 @@ export const demoFunc = () => html`
             .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,6 +45,7 @@ export const demoFunc = () => html`
     
     <div class="demo-container">
       <dees-panel .title=${'Basic Type List'} .subtitle=${'Add and remove items from a list'}>
+        <div class="input-group">
           <dees-input-typelist
             .label=${'Tags'}
             .description=${'Add tags by typing and pressing Enter'}
@@ -50,9 +57,11 @@ export const demoFunc = () => html`
             .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'}>
+        <div class="input-group">
           <dees-input-typelist
             .label=${'Your Skills'}
             .description=${'List your professional skills'}
@@ -72,9 +81,11 @@ 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'}>
+        <div class="input-group">
           <dees-input-typelist
             .label=${'Project Dependencies'}
             .description=${'List all required npm packages'}
@@ -88,6 +99,7 @@ export const demoFunc = () => html`
             .disabled=${true}
             .value=${['system', 'protected', 'readonly']}
           ></dees-input-typelist>
+        </div>
       </dees-panel>
       
       <dees-panel .title=${'Article Publishing Form'} .subtitle=${'Complete form with tag management'}>