@design.estate/dees-catalog 3.76.0 → 3.77.0

package/ts_web/elements/00group-input/dees-input-tags/dees-input-tags.demo.ts

@@ -115,24 +115,26 @@ export const demoFunc = () => html`
       </dees-panel>
 
       <dees-panel .title=${'3. Limited Tags'} .subtitle=${'Restrict the number of tags users can add'}>
-        <div class="grid-layout">
-          <dees-input-tags
-            .label=${'Top 3 Skills'}
-            .placeholder=${'Add up to 3 skills...'}
-            .maxTags=${3}
-            .value=${['Design', 'Development']}
-            .description=${'Maximum 3 tags allowed'}
-          ></dees-input-tags>
-          
-          <dees-input-tags
-            .label=${'Categories (Max 5)'}
-            .placeholder=${'Select categories...'}
-            .maxTags=${5}
-            .suggestions=${['Blog', 'Tutorial', 'News', 'Review', 'Guide', 'Case Study', 'Interview']}
-            .value=${['Tutorial', 'Guide']}
-            .description=${'Choose up to 5 categories'}
-          ></dees-input-tags>
-        </div>
+        <dees-form>
+          <div class="grid-layout">
+            <dees-input-tags
+              .label=${'Top 3 Skills'}
+              .placeholder=${'Add up to 3 skills...'}
+              .maxTags=${3}
+              .value=${['Design', 'Development']}
+              .description=${'Maximum 3 tags allowed'}
+            ></dees-input-tags>
+
+            <dees-input-tags
+              .label=${'Categories (Max 5)'}
+              .placeholder=${'Select categories...'}
+              .maxTags=${5}
+              .suggestions=${['Blog', 'Tutorial', 'News', 'Review', 'Guide', 'Case Study', 'Interview']}
+              .value=${['Tutorial', 'Guide']}
+              .description=${'Choose up to 5 categories'}
+            ></dees-input-tags>
+          </div>
+        </dees-form>
       </dees-panel>
 
       <dees-panel .title=${'4. Required & Validation'} .subtitle=${'Tags input with validation requirements'}>

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

@@ -30,12 +30,6 @@ 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;
@@ -89,7 +83,7 @@ export const demoFunc = () => html`
       }
     }}>
       <dees-panel .title=${'Basic Text Inputs'} .subtitle=${'Standard text inputs with labels and descriptions'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-text
             .label=${'Username'}
             .value=${'johndoe'}
@@ -110,7 +104,7 @@ export const demoFunc = () => html`
             .value=${'secret123'}
             .key=${'password'}
           ></dees-input-text>
-        </div>
+        </dees-form>
       </dees-panel>
     </dees-demowrapper>
     
@@ -140,28 +134,30 @@ export const demoFunc = () => html`
       }
     }}>
       <dees-panel .title=${'Horizontal Layout'} .subtitle=${'Multiple inputs arranged horizontally for compact forms'}>
-        <div class="horizontal-group">
-          <dees-input-text 
-            .label=${'First Name'} 
-            .value=${'John'} 
-            .layoutMode=${'horizontal'}
-            .key=${'firstName'}
-          ></dees-input-text>
-          
-          <dees-input-text 
-            .label=${'Last Name'} 
-            .value=${'Doe'} 
-            .layoutMode=${'horizontal'}
-            .key=${'lastName'}
-          ></dees-input-text>
-          
-          <dees-input-text 
-            .label=${'Age'} 
-            .value=${'28'} 
-            .layoutMode=${'horizontal'}
-            .key=${'age'}
-          ></dees-input-text>
-        </div>
+        <dees-form>
+          <div class="horizontal-group">
+            <dees-input-text
+              .label=${'First Name'}
+              .value=${'John'}
+              .layoutMode=${'horizontal'}
+              .key=${'firstName'}
+            ></dees-input-text>
+
+            <dees-input-text
+              .label=${'Last Name'}
+              .value=${'Doe'}
+              .layoutMode=${'horizontal'}
+              .key=${'lastName'}
+            ></dees-input-text>
+
+            <dees-input-text
+              .label=${'Age'}
+              .value=${'28'}
+              .layoutMode=${'horizontal'}
+              .key=${'age'}
+            ></dees-input-text>
+          </div>
+        </dees-form>
       </dees-panel>
     </dees-demowrapper>
     
@@ -181,7 +177,7 @@ export const demoFunc = () => html`
       }
     }}>
       <dees-panel .title=${'Label Positions'} .subtitle=${'Different label positioning options for various layouts'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-text
             .label=${'Label on Top (Default)'}
             .value=${'Standard layout'}
@@ -195,25 +191,25 @@ export const demoFunc = () => html`
           ></dees-input-text>
 
           <div class="grid-layout">
-          <dees-input-text 
-            .label=${'City'} 
-            .value=${'New York'} 
+          <dees-input-text
+            .label=${'City'}
+            .value=${'New York'}
             .labelPosition=${'left'}
           ></dees-input-text>
-          
+
           <dees-input-text
             .label=${'ZIP Code'}
             .value=${'10001'}
             .labelPosition=${'left'}
           ></dees-input-text>
         </div>
-        </div>
+        </dees-form>
       </dees-panel>
     </dees-demowrapper>
     
     <dees-demowrapper>
       <dees-panel .title=${'Validation & States'} .subtitle=${'Different validation states and input configurations'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-text
             .label=${'Required Field'}
             .required=${true}
@@ -237,7 +233,7 @@ export const demoFunc = () => html`
               return { valid: false, message: 'Please enter a valid email address' };
             }}
           ></dees-input-text>
-        </div>
+        </dees-form>
       </dees-panel>
     </dees-demowrapper>
     
@@ -266,7 +262,7 @@ export const demoFunc = () => html`
       });
     }}>
       <dees-panel .title=${'Advanced Features'} .subtitle=${'Password visibility toggle and other advanced features'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-text
             .label=${'Password with Toggle'}
             .isPasswordBool=${true}
@@ -280,7 +276,7 @@ export const demoFunc = () => html`
             .value=${'sk-1234567890abcdef'}
             .infoText=${'Keep this key secure and never share it'}
           ></dees-input-text>
-        </div>
+        </dees-form>
       </dees-panel>
     </dees-demowrapper>
     

package/ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.demo.ts

@@ -116,7 +116,7 @@ export const demoFunc = () => html`
 
     <div class="demo-container">
       <dees-panel .title=${'Basic Toggle'} .subtitle=${'Simple on/off toggle switch with drag support'}>
-        <div class="toggle-group">
+        <dees-form>
           <dees-input-toggle
             .label=${'Enable feature'}
             .value=${false}
@@ -135,12 +135,12 @@ export const demoFunc = () => html`
             .description=${'This toggle has additional helper text explaining its purpose'}
             .key=${'withDesc'}
           ></dees-input-toggle>
-        </div>
+        </dees-form>
         <p class="drag-hint">Tip: You can drag the toggle knob to switch states</p>
       </dees-panel>
 
       <dees-panel .title=${'Toggle States'} .subtitle=${'Different toggle states and configurations'}>
-        <div class="toggle-group">
+        <dees-form>
           <dees-input-toggle
             .label=${'Default (off)'}
             .value=${false}
@@ -169,42 +169,44 @@ export const demoFunc = () => html`
             .required=${true}
             .description=${'This toggle cannot be turned off'}
           ></dees-input-toggle>
-        </div>
+        </dees-form>
       </dees-panel>
 
       <dees-panel .title=${'Horizontal Layout'} .subtitle=${'Toggles arranged horizontally for compact interfaces'}>
-        <div class="horizontal-toggles">
-          <dees-input-toggle
-            .label=${'WiFi'}
-            .value=${true}
-            .layoutMode=${'horizontal'}
-          ></dees-input-toggle>
+        <dees-form>
+          <div class="horizontal-toggles">
+            <dees-input-toggle
+              .label=${'WiFi'}
+              .value=${true}
+              .layoutMode=${'horizontal'}
+            ></dees-input-toggle>
 
-          <dees-input-toggle
-            .label=${'Bluetooth'}
-            .value=${false}
-            .layoutMode=${'horizontal'}
-          ></dees-input-toggle>
+            <dees-input-toggle
+              .label=${'Bluetooth'}
+              .value=${false}
+              .layoutMode=${'horizontal'}
+            ></dees-input-toggle>
 
-          <dees-input-toggle
-            .label=${'GPS'}
-            .value=${true}
-            .layoutMode=${'horizontal'}
-          ></dees-input-toggle>
+            <dees-input-toggle
+              .label=${'GPS'}
+              .value=${true}
+              .layoutMode=${'horizontal'}
+            ></dees-input-toggle>
 
-          <dees-input-toggle
-            .label=${'NFC'}
-            .value=${false}
-            .layoutMode=${'horizontal'}
-          ></dees-input-toggle>
-        </div>
+            <dees-input-toggle
+              .label=${'NFC'}
+              .value=${false}
+              .layoutMode=${'horizontal'}
+            ></dees-input-toggle>
+          </div>
+        </dees-form>
       </dees-panel>
 
       <dees-panel .title=${'Settings Example'} .subtitle=${'Toggles in a typical settings context'}>
         <div class="settings-section">
           <h4 class="section-title">Notification Settings</h4>
 
-          <div class="toggle-group">
+          <dees-form>
             <dees-input-toggle
               .label=${'Push notifications'}
               .value=${true}
@@ -232,7 +234,7 @@ export const demoFunc = () => html`
               .description=${'Vibrate for notifications'}
               .key=${'vibration'}
             ></dees-input-toggle>
-          </div>
+          </dees-form>
         </div>
       </dees-panel>
 
@@ -243,7 +245,7 @@ export const demoFunc = () => html`
         </div>
 
         <div class="feature-toggles">
-          <div class="toggle-group">
+          <dees-form>
             <dees-input-toggle
               .label=${'Dark Mode'}
               .value=${true}
@@ -273,12 +275,12 @@ export const demoFunc = () => html`
               .value=${false}
               .key=${'beta'}
             ></dees-input-toggle>
-          </div>
+          </dees-form>
         </div>
       </dees-panel>
 
       <dees-panel .title=${'Interactive Example'} .subtitle=${'Toggle to see value changes in real-time'}>
-        <div class="toggle-group">
+        <dees-form>
           <dees-input-toggle
             .label=${'Airplane mode'}
             .value=${false}
@@ -300,7 +302,7 @@ export const demoFunc = () => html`
               }
             }}
           ></dees-input-toggle>
-        </div>
+        </dees-form>
 
         <div class="interactive-section">
           <div id="airplane-output" class="output-text">Airplane mode: OFF</div>

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

@@ -13,12 +13,6 @@ export const demoFunc = () => html`
           margin: 0 auto;
         }
         
-        .input-group {
-          display: flex;
-          flex-direction: column;
-          gap: 16px;
-        }
-
         .horizontal-group {
           display: flex;
           gap: 24px;
@@ -45,7 +39,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-form>
           <dees-input-typelist
             .label=${'Tags'}
             .infoText=${'Add tags by typing and pressing Enter'}
@@ -58,11 +52,11 @@ export const demoFunc = () => html`
             .infoText=${'Add email addresses of team members'}
             .value=${['alice@example.com', 'bob@example.com']}
           ></dees-input-typelist>
-        </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'Skills & Keywords'} .subtitle=${'Manage lists of skills and keywords'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-typelist
             .label=${'Your Skills'}
             .infoText=${'List your professional skills'}
@@ -70,23 +64,23 @@ export const demoFunc = () => html`
           ></dees-input-typelist>
 
           <div class="horizontal-group">
-          <dees-input-typelist
-            .label=${'Categories'}
-            .layoutMode=${'horizontal'}
-            .value=${['Technology', 'Design', 'Business']}
-          ></dees-input-typelist>
-          
-          <dees-input-typelist
-            .label=${'Keywords'}
-            .layoutMode=${'horizontal'}
-            .value=${['innovation', 'startup', 'growth']}
-          ></dees-input-typelist>
-        </div>
-        </div>
+            <dees-input-typelist
+              .label=${'Categories'}
+              .layoutMode=${'horizontal'}
+              .value=${['Technology', 'Design', 'Business']}
+            ></dees-input-typelist>
+
+            <dees-input-typelist
+              .label=${'Keywords'}
+              .layoutMode=${'horizontal'}
+              .value=${['innovation', 'startup', 'growth']}
+            ></dees-input-typelist>
+          </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'Required & Disabled States'} .subtitle=${'Different input states for validation'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-typelist
             .label=${'Project Dependencies'}
             .infoText=${'List all required npm packages'}
@@ -100,7 +94,7 @@ export const demoFunc = () => html`
             .disabled=${true}
             .value=${['system', 'protected', 'readonly']}
           ></dees-input-typelist>
-        </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'Article Publishing Form'} .subtitle=${'Complete form with tag management'}>