@design.estate/dees-catalog 3.42.0 → 3.43.0

package/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>
     

package/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'}>