@design.estate/dees-catalog 3.42.2 → 3.43.0

package/dist_bundle/bundle.js

@@ -94121,37 +94121,20 @@ var DeesInputBase = class extends (_a12 = DeesElement, _layoutMode_dec = [n5({ t
         /* 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;
@@ -98082,6 +98065,12 @@ var demoFunc12 = () => b2`
         flex-wrap: wrap;
       }
       
+      .input-group {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+
       .grid-layout {
         display: grid;
         grid-template-columns: 1fr 1fr;
@@ -98130,25 +98119,27 @@ var demoFunc12 = () => b2`
   }
 }}>
       <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>
     
@@ -98208,31 +98199,33 @@ var demoFunc12 = () => b2`
   }
 }}>
       <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>
     
@@ -98263,24 +98256,26 @@ var demoFunc12 = () => b2`
   }
 }}>
       <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>
     
@@ -98303,19 +98298,21 @@ var demoFunc12 = () => b2`
   });
 }}>
       <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>
     
@@ -99257,6 +99254,12 @@ var demoFunc14 = () => b2`
           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));
@@ -99303,17 +99306,19 @@ var demoFunc14 = () => b2`
     
     <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) => {
@@ -99405,19 +99410,21 @@ var demoFunc14 = () => b2`
       </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"}>
@@ -99650,6 +99657,12 @@ var demoFunc15 = () => b2`
           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));
@@ -99687,20 +99700,22 @@ var demoFunc15 = () => b2`
       </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"}>
@@ -99759,30 +99774,32 @@ var demoFunc15 = () => b2`
       </dees-panel>
       
       <dees-panel .title=${"6. Settings Example"} .subtitle=${"Common patterns in application settings"}>
-        <dees-input-radiogroup
-          .label=${"Theme Preference"}
-          .options=${[
+        <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>
+            .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"}>
@@ -100348,6 +100365,12 @@ var demoFunc17 = () => b2`
         flex-wrap: wrap;
       }
       
+      .input-group {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+
       .spacer {
         height: 200px;
         display: flex;
@@ -100375,9 +100398,10 @@ var demoFunc17 = () => b2`
   }
 }}>
       <dees-panel .title=${"1. Basic Dropdowns"} .subtitle=${"Standard dropdown with search functionality and various options"}>
-        <dees-input-dropdown
-          .label=${"Select Country"}
-          .options=${[
+        <div class="input-group">
+          <dees-input-dropdown
+            .label=${"Select Country"}
+            .options=${[
   { option: "United States", key: "us" },
   { option: "Canada", key: "ca" },
   { option: "Germany", key: "de" },
@@ -100387,18 +100411,19 @@ var demoFunc17 = () => b2`
   { option: "Japan", key: "jp" },
   { option: "Brazil", key: "br" }
 ]}
-          .selectedOption=${{ option: "United States", key: "us" }}
-        ></dees-input-dropdown>
-        
-        <dees-input-dropdown
-          .label=${"Select Role"}
-          .options=${[
+            .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>
+          ></dees-input-dropdown>
+        </div>
       </dees-panel>
     </dees-demowrapper>
     
@@ -100480,24 +100505,26 @@ var demoFunc17 = () => b2`
   }
 }}>
       <dees-panel .title=${"4. States"} .subtitle=${"Different states and configurations"}>
-        <dees-input-dropdown
-          .label=${"Required Field"}
-          .required=${true}
-          .options=${[
+        <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=${[
+          ></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>
+            .selectedOption=${{ option: "Cannot Select", key: "disabled" }}
+          ></dees-input-dropdown>
+        </div>
       </dees-panel>
     </dees-demowrapper>
     
@@ -103427,6 +103454,12 @@ var demoFunc19 = () => b2`
           margin: 0 auto;
         }
         
+        .input-group {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+        }
+
         .payment-group {
           display: flex;
           align-items: center;
@@ -103438,16 +103471,18 @@ var demoFunc19 = () => b2`
     
     <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"}>
@@ -103467,18 +103502,20 @@ var demoFunc19 = () => b2`
       </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"}>
@@ -103982,6 +104019,12 @@ var demoFunc21 = () => b2`
           margin: 0 auto;
         }
         
+        .input-group {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+        }
+
         .horizontal-group {
           display: flex;
           align-items: center;
@@ -103993,18 +104036,20 @@ var demoFunc21 = () => b2`
     
     <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"}>
@@ -104024,17 +104069,19 @@ var demoFunc21 = () => b2`
       </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"}>
@@ -104794,6 +104841,12 @@ var demoFunc23 = () => b2`
           margin: 0 auto;
         }
         
+        .input-group {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+        }
+
         .horizontal-group {
           display: flex;
           gap: 24px;
@@ -104820,27 +104873,30 @@ var demoFunc23 = () => b2`
     
     <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"}
@@ -104853,22 +104909,25 @@ var demoFunc23 = () => b2`
             .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"}>
@@ -107501,11 +107560,6 @@ var DeesForm = class extends (_a32 = DeesElement, _horizontalLayout_dec = [n5({
   }
   render() {
     return b2`
-      <style>
-        :host {
-          display: contents;
-        }
-      </style>
       <slot></slot>
     `;
   }
@@ -107663,6 +107717,22 @@ __decorateElement(_init30, 4, "horizontalLayout", _horizontalLayout_dec, DeesFor
 DeesForm = __decorateElement(_init30, 0, "DeesForm", _DeesForm_decorators, DeesForm);
 __publicField(DeesForm, "demo", demoFunc25);
 __publicField(DeesForm, "demoGroups", ["Form"]);
+__publicField(DeesForm, "styles", [
+  i`
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+
+      :host([horizontal-layout]) {
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        gap: 16px;
+      }
+    `
+]);
 __runInitializers(_init30, 1, DeesForm);
 
 // ts_web/elements/00group-button/dees-button/dees-button.demo.ts
@@ -147998,7 +148068,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var 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."
 };
 export {
@@ -148243,4 +148313,4 @@ ibantools/jsnext/ibantools.js:
    * @preferred
    *)
 */
-//# sourceMappingURL=bundle-1771262220474.js.map
+//# sourceMappingURL=bundle-1771349705003.js.map