@design.estate/dees-catalog 3.76.0 → 3.76.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/dist_bundle/bundle.js +429 -407
  2. package/dist_ts_web/00_commitinfo_data.js +1 -1
  3. package/dist_ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.demo.js +96 -94
  4. package/dist_ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.js +27 -25
  5. package/dist_ts_web/elements/00group-input/dees-input-fileupload/demo.js +36 -36
  6. package/dist_ts_web/elements/00group-input/dees-input-iban/dees-input-iban.demo.js +20 -18
  7. package/dist_ts_web/elements/00group-input/dees-input-list/dees-input-list.demo.js +22 -20
  8. package/dist_ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.demo.js +67 -65
  9. package/dist_ts_web/elements/00group-input/dees-input-phone/dees-input-phone.demo.js +20 -18
  10. package/dist_ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.demo.js +4 -4
  11. package/dist_ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.demo.js +54 -48
  12. package/dist_ts_web/elements/00group-input/dees-input-tags/dees-input-tags.demo.js +21 -19
  13. package/dist_ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.js +37 -35
  14. package/dist_ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.demo.js +35 -33
  15. package/dist_ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.demo.js +19 -19
  16. package/package.json +1 -1
  17. package/ts_web/00_commitinfo_data.ts +1 -1
  18. package/ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.demo.ts +95 -93
  19. package/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.ts +40 -38
  20. package/ts_web/elements/00group-input/dees-input-fileupload/demo.ts +35 -35
  21. package/ts_web/elements/00group-input/dees-input-iban/dees-input-iban.demo.ts +19 -17
  22. package/ts_web/elements/00group-input/dees-input-list/dees-input-list.demo.ts +21 -19
  23. package/ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.demo.ts +66 -64
  24. package/ts_web/elements/00group-input/dees-input-phone/dees-input-phone.demo.ts +19 -17
  25. package/ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.demo.ts +4 -4
  26. package/ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.demo.ts +53 -47
  27. package/ts_web/elements/00group-input/dees-input-tags/dees-input-tags.demo.ts +20 -18
  28. package/ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts +36 -34
  29. package/ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.demo.ts +34 -32
  30. package/ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.demo.ts +18 -18
package/ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.demo.ts CHANGED
@@ -52,81 +52,83 @@ export const demoFunc = () => html`
52
52
  <div class="section">
53
53
  <div class="section-title">Multi-Option Toggle</div>
54
54
  <div class="section-description">Select from multiple options with a smooth sliding indicator animation.</div>
55
-
56
- <dees-input-multitoggle
57
- .label=${'Display Mode'}
58
- .infoText=${'Choose how content is displayed'}
59
- .description=${'This setting affects how items appear on your dashboard'}
60
- .options=${['List View', 'Grid View', 'Compact']}
61
- .selectedOption=${'Grid View'}
62
- ></dees-input-multitoggle>
63
-
64
- <br><br>
65
-
66
- <dees-input-multitoggle
67
- .label=${'T-Shirt Size'}
68
- .infoText=${'Select your preferred size'}
69
- .options=${['XS', 'S', 'M', 'L', 'XL', 'XXL']}
70
- .selectedOption=${'M'}
71
- ></dees-input-multitoggle>
55
+
56
+ <dees-form>
57
+ <dees-input-multitoggle
58
+ .label=${'Display Mode'}
59
+ .infoText=${'Choose how content is displayed'}
60
+ .description=${'This setting affects how items appear on your dashboard'}
61
+ .options=${['List View', 'Grid View', 'Compact']}
62
+ .selectedOption=${'Grid View'}
63
+ ></dees-input-multitoggle>
64
+
65
+ <dees-input-multitoggle
66
+ .label=${'T-Shirt Size'}
67
+ .infoText=${'Select your preferred size'}
68
+ .options=${['XS', 'S', 'M', 'L', 'XL', 'XXL']}
69
+ .selectedOption=${'M'}
70
+ ></dees-input-multitoggle>
71
+ </dees-form>
72
72
  </div>
73
73
 
74
74
  <div class="section">
75
75
  <div class="section-title">Boolean Toggle</div>
76
76
  <div class="section-description">Simple on/off switches with customizable labels for clearer context.</div>
77
-
78
- <dees-input-multitoggle
79
- .label=${'Notifications'}
80
- .infoText=${'Enable or disable push notifications'}
81
- .type=${'boolean'}
82
- .selectedOption=${'true'}
83
- ></dees-input-multitoggle>
84
-
85
- <br><br>
86
-
87
- <dees-input-multitoggle
88
- .label=${'Theme Mode'}
89
- .infoText=${'Switch between light and dark theme'}
90
- .type=${'boolean'}
91
- .booleanTrueName=${'Dark'}
92
- .booleanFalseName=${'Light'}
93
- .selectedOption=${'Dark'}
94
- ></dees-input-multitoggle>
95
- </div>
96
-
97
- <div class="section">
98
- <div class="section-title">Settings Grid</div>
99
- <div class="section-description">Configuration options arranged in a responsive grid layout.</div>
100
-
101
- <div class="settings-grid">
77
+
78
+ <dees-form>
102
79
  <dees-input-multitoggle
103
- .label=${'Auto-Save'}
80
+ .label=${'Notifications'}
81
+ .infoText=${'Enable or disable push notifications'}
104
82
  .type=${'boolean'}
105
- .booleanTrueName=${'Enabled'}
106
- .booleanFalseName=${'Disabled'}
107
- .selectedOption=${'Enabled'}
83
+ .selectedOption=${'true'}
108
84
  ></dees-input-multitoggle>
109
-
110
- <dees-input-multitoggle
111
- .label=${'Language'}
112
- .options=${['English', 'German', 'French', 'Spanish']}
113
- .selectedOption=${'English'}
114
- ></dees-input-multitoggle>
115
-
116
- <dees-input-multitoggle
117
- .label=${'Quality'}
118
- .options=${['Low', 'Medium', 'High', 'Ultra']}
119
- .selectedOption=${'High'}
120
- ></dees-input-multitoggle>
121
-
85
+
122
86
  <dees-input-multitoggle
123
- .label=${'Privacy'}
87
+ .label=${'Theme Mode'}
88
+ .infoText=${'Switch between light and dark theme'}
124
89
  .type=${'boolean'}
125
- .booleanTrueName=${'Private'}
126
- .booleanFalseName=${'Public'}
127
- .selectedOption=${'Private'}
90
+ .booleanTrueName=${'Dark'}
91
+ .booleanFalseName=${'Light'}
92
+ .selectedOption=${'Dark'}
128
93
  ></dees-input-multitoggle>
129
- </div>
94
+ </dees-form>
95
+ </div>
96
+
97
+ <div class="section">
98
+ <div class="section-title">Settings Grid</div>
99
+ <div class="section-description">Configuration options arranged in a responsive grid layout.</div>
100
+
101
+ <dees-form>
102
+ <div class="settings-grid">
103
+ <dees-input-multitoggle
104
+ .label=${'Auto-Save'}
105
+ .type=${'boolean'}
106
+ .booleanTrueName=${'Enabled'}
107
+ .booleanFalseName=${'Disabled'}
108
+ .selectedOption=${'Enabled'}
109
+ ></dees-input-multitoggle>
110
+
111
+ <dees-input-multitoggle
112
+ .label=${'Language'}
113
+ .options=${['English', 'German', 'French', 'Spanish']}
114
+ .selectedOption=${'English'}
115
+ ></dees-input-multitoggle>
116
+
117
+ <dees-input-multitoggle
118
+ .label=${'Quality'}
119
+ .options=${['Low', 'Medium', 'High', 'Ultra']}
120
+ .selectedOption=${'High'}
121
+ ></dees-input-multitoggle>
122
+
123
+ <dees-input-multitoggle
124
+ .label=${'Privacy'}
125
+ .type=${'boolean'}
126
+ .booleanTrueName=${'Private'}
127
+ .booleanFalseName=${'Public'}
128
+ .selectedOption=${'Private'}
129
+ ></dees-input-multitoggle>
130
+ </div>
131
+ </dees-form>
130
132
  </div>
131
133
 
132
134
  <div class="section">
package/ts_web/elements/00group-input/dees-input-phone/dees-input-phone.demo.ts CHANGED
@@ -30,7 +30,7 @@ export const demoFunc = () => html`
30
30
 
31
31
  <div class="demo-container">
32
32
  <dees-panel .title=${'Basic Phone Input'} .subtitle=${'Automatic formatting for phone numbers'}>
33
- <div class="input-group">
33
+ <dees-form>
34
34
  <dees-input-phone
35
35
  .label=${'Phone Number'}
36
36
  .infoText=${'Enter your phone number with country code'}
@@ -44,27 +44,29 @@ export const demoFunc = () => html`
44
44
  .required=${true}
45
45
  .placeholder=${'+1 (555) 000-0000'}
46
46
  ></dees-input-phone>
47
- </div>
47
+ </dees-form>
48
48
  </dees-panel>
49
49
 
50
50
  <dees-panel .title=${'Horizontal Layout'} .subtitle=${'Phone inputs arranged horizontally'}>
51
- <div class="horizontal-group">
52
- <dees-input-phone
53
- .label=${'Mobile'}
54
- .layoutMode=${'horizontal'}
55
- .value=${'4155551234'}
56
- ></dees-input-phone>
57
-
58
- <dees-input-phone
59
- .label=${'Office'}
60
- .layoutMode=${'horizontal'}
61
- .placeholder=${'+1 (800) 555-0000'}
62
- ></dees-input-phone>
63
- </div>
51
+ <dees-form>
52
+ <div class="horizontal-group">
53
+ <dees-input-phone
54
+ .label=${'Mobile'}
55
+ .layoutMode=${'horizontal'}
56
+ .value=${'4155551234'}
57
+ ></dees-input-phone>
58
+
59
+ <dees-input-phone
60
+ .label=${'Office'}
61
+ .layoutMode=${'horizontal'}
62
+ .placeholder=${'+1 (800) 555-0000'}
63
+ ></dees-input-phone>
64
+ </div>
65
+ </dees-form>
64
66
  </dees-panel>
65
67
 
66
68
  <dees-panel .title=${'International Numbers'} .subtitle=${'Supports formatting for numbers with country codes'}>
67
- <div class="input-group">
69
+ <dees-form>
68
70
  <dees-input-phone
69
71
  .label=${'International Contact'}
70
72
  .infoText=${'Automatically formats international numbers'}
@@ -76,7 +78,7 @@ export const demoFunc = () => html`
76
78
  .value=${'911'}
77
79
  .disabled=${true}
78
80
  ></dees-input-phone>
79
- </div>
81
+ </dees-form>
80
82
  </dees-panel>
81
83
 
82
84
  <dees-panel .title=${'Form Integration'} .subtitle=${'Phone input as part of a contact form'}>
package/ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.demo.ts CHANGED
@@ -66,7 +66,7 @@ export const demoFunc = () => html`
66
66
 
67
67
  <div class="demo-container">
68
68
  <dees-panel .title=${'Basic Quantity Selector'} .subtitle=${'Simple quantity input with increment/decrement buttons'}>
69
- <div class="input-group">
69
+ <dees-form>
70
70
  <dees-input-quantityselector
71
71
  .label=${'Quantity'}
72
72
  .infoText=${'Select the desired quantity'}
@@ -79,7 +79,7 @@ export const demoFunc = () => html`
79
79
  .infoText=${'Adjust the quantity of items'}
80
80
  .value=${3}
81
81
  ></dees-input-quantityselector>
82
- </div>
82
+ </dees-form>
83
83
  </dees-panel>
84
84
 
85
85
  <dees-panel .title=${'Shopping Cart'} .subtitle=${'Modern e-commerce product cards with interactive quantity selectors'} .runAfterRender=${async (elementArg: HTMLElement) => {
@@ -178,7 +178,7 @@ export const demoFunc = () => html`
178
178
  </dees-panel>
179
179
 
180
180
  <dees-panel .title=${'Required & Disabled States'} .subtitle=${'Different states for validation and restrictions'}>
181
- <div class="input-group">
181
+ <dees-form>
182
182
  <dees-input-quantityselector
183
183
  .label=${'Number of Licenses'}
184
184
  .infoText=${'Select how many licenses you need'}
@@ -192,7 +192,7 @@ export const demoFunc = () => html`
192
192
  .disabled=${true}
193
193
  .value=${5}
194
194
  ></dees-input-quantityselector>
195
- </div>
195
+ </dees-form>
196
196
  </dees-panel>
197
197
 
198
198
  <dees-panel .title=${'Order Form'} .subtitle=${'Complete order form with quantity selection'}>
package/ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.demo.ts CHANGED
@@ -48,25 +48,27 @@ export const demoFunc = () => html`
48
48
 
49
49
  <div class="demo-container">
50
50
  <dees-panel .title=${'1. Basic Radio Groups'} .subtitle=${'Simple string options for common use cases'}>
51
- <div class="demo-grid">
52
- <dees-input-radiogroup
53
- .label=${'Subscription Plan'}
54
- .options=${['Basic - $9/month', 'Pro - $29/month', 'Enterprise - $99/month']}
55
- .selectedOption=${'Pro - $29/month'}
56
- .description=${'Choose your subscription tier'}
57
- ></dees-input-radiogroup>
58
-
59
- <dees-input-radiogroup
60
- .label=${'Priority Level'}
61
- .options=${['High', 'Medium', 'Low']}
62
- .selectedOption=${'Medium'}
63
- .required=${true}
64
- ></dees-input-radiogroup>
65
- </div>
51
+ <dees-form>
52
+ <div class="demo-grid">
53
+ <dees-input-radiogroup
54
+ .label=${'Subscription Plan'}
55
+ .options=${['Basic - $9/month', 'Pro - $29/month', 'Enterprise - $99/month']}
56
+ .selectedOption=${'Pro - $29/month'}
57
+ .description=${'Choose your subscription tier'}
58
+ ></dees-input-radiogroup>
59
+
60
+ <dees-input-radiogroup
61
+ .label=${'Priority Level'}
62
+ .options=${['High', 'Medium', 'Low']}
63
+ .selectedOption=${'Medium'}
64
+ .required=${true}
65
+ ></dees-input-radiogroup>
66
+ </div>
67
+ </dees-form>
66
68
  </dees-panel>
67
69
 
68
70
  <dees-panel .title=${'2. Horizontal Layout'} .subtitle=${'Radio groups with horizontal arrangement'}>
69
- <div class="input-group">
71
+ <dees-form>
70
72
  <dees-input-radiogroup
71
73
  .label=${'Do you agree with the terms?'}
72
74
  .options=${['Yes', 'No', 'Maybe']}
@@ -81,7 +83,7 @@ export const demoFunc = () => html`
81
83
  .selectedOption=${'Intermediate'}
82
84
  .description=${'Select your experience level with web development'}
83
85
  ></dees-input-radiogroup>
84
- </div>
86
+ </dees-form>
85
87
  </dees-panel>
86
88
 
87
89
  <dees-panel .title=${'3. Advanced Options'} .subtitle=${'Using object format with keys and payloads'}>
@@ -106,41 +108,45 @@ export const demoFunc = () => html`
106
108
  </dees-panel>
107
109
 
108
110
  <dees-panel .title=${'4. Survey Example'} .subtitle=${'Multiple radio groups for surveys and forms'}>
109
- <div class="demo-grid">
110
- <dees-input-radiogroup
111
- .label=${'How satisfied are you?'}
112
- .options=${['Very Satisfied', 'Satisfied', 'Neutral', 'Dissatisfied', 'Very Dissatisfied']}
113
- .selectedOption=${'Satisfied'}
114
- ></dees-input-radiogroup>
115
-
116
- <dees-input-radiogroup
117
- .label=${'Would you recommend us?'}
118
- .options=${['Definitely', 'Probably', 'Not Sure', 'Probably Not', 'Definitely Not']}
119
- .selectedOption=${'Probably'}
120
- ></dees-input-radiogroup>
121
- </div>
111
+ <dees-form>
112
+ <div class="demo-grid">
113
+ <dees-input-radiogroup
114
+ .label=${'How satisfied are you?'}
115
+ .options=${['Very Satisfied', 'Satisfied', 'Neutral', 'Dissatisfied', 'Very Dissatisfied']}
116
+ .selectedOption=${'Satisfied'}
117
+ ></dees-input-radiogroup>
118
+
119
+ <dees-input-radiogroup
120
+ .label=${'Would you recommend us?'}
121
+ .options=${['Definitely', 'Probably', 'Not Sure', 'Probably Not', 'Definitely Not']}
122
+ .selectedOption=${'Probably'}
123
+ ></dees-input-radiogroup>
124
+ </div>
125
+ </dees-form>
122
126
  </dees-panel>
123
127
 
124
128
  <dees-panel .title=${'5. States & Validation'} .subtitle=${'Different states and validation examples'}>
125
- <div class="demo-grid">
126
- <dees-input-radiogroup
127
- .label=${'Required Selection'}
128
- .options=${['Option A', 'Option B', 'Option C']}
129
- .required=${true}
130
- .description=${'This field is required'}
131
- ></dees-input-radiogroup>
132
-
133
- <dees-input-radiogroup
134
- .label=${'Disabled State'}
135
- .options=${['Disabled Option 1', 'Disabled Option 2', 'Disabled Option 3']}
136
- .selectedOption=${'Disabled Option 2'}
137
- .disabled=${true}
138
- ></dees-input-radiogroup>
139
- </div>
129
+ <dees-form>
130
+ <div class="demo-grid">
131
+ <dees-input-radiogroup
132
+ .label=${'Required Selection'}
133
+ .options=${['Option A', 'Option B', 'Option C']}
134
+ .required=${true}
135
+ .description=${'This field is required'}
136
+ ></dees-input-radiogroup>
137
+
138
+ <dees-input-radiogroup
139
+ .label=${'Disabled State'}
140
+ .options=${['Disabled Option 1', 'Disabled Option 2', 'Disabled Option 3']}
141
+ .selectedOption=${'Disabled Option 2'}
142
+ .disabled=${true}
143
+ ></dees-input-radiogroup>
144
+ </div>
145
+ </dees-form>
140
146
  </dees-panel>
141
147
 
142
148
  <dees-panel .title=${'6. Settings Example'} .subtitle=${'Common patterns in application settings'}>
143
- <div class="input-group">
149
+ <dees-form>
144
150
  <dees-input-radiogroup
145
151
  .label=${'Theme Preference'}
146
152
  .options=${[
@@ -165,7 +171,7 @@ export const demoFunc = () => html`
165
171
  .selectedOption=${'English'}
166
172
  .direction=${'horizontal'}
167
173
  ></dees-input-radiogroup>
168
- </div>
174
+ </dees-form>
169
175
  </dees-panel>
170
176
 
171
177
  <dees-panel .title=${'7. Form Integration'} .subtitle=${'Works seamlessly with dees-form'}>
package/ts_web/elements/00group-input/dees-input-tags/dees-input-tags.demo.ts CHANGED
@@ -115,24 +115,26 @@ export const demoFunc = () => html`
115
115
  </dees-panel>
116
116
 
117
117
  <dees-panel .title=${'3. Limited Tags'} .subtitle=${'Restrict the number of tags users can add'}>
118
- <div class="grid-layout">
119
- <dees-input-tags
120
- .label=${'Top 3 Skills'}
121
- .placeholder=${'Add up to 3 skills...'}
122
- .maxTags=${3}
123
- .value=${['Design', 'Development']}
124
- .description=${'Maximum 3 tags allowed'}
125
- ></dees-input-tags>
126
-
127
- <dees-input-tags
128
- .label=${'Categories (Max 5)'}
129
- .placeholder=${'Select categories...'}
130
- .maxTags=${5}
131
- .suggestions=${['Blog', 'Tutorial', 'News', 'Review', 'Guide', 'Case Study', 'Interview']}
132
- .value=${['Tutorial', 'Guide']}
133
- .description=${'Choose up to 5 categories'}
134
- ></dees-input-tags>
135
- </div>
118
+ <dees-form>
119
+ <div class="grid-layout">
120
+ <dees-input-tags
121
+ .label=${'Top 3 Skills'}
122
+ .placeholder=${'Add up to 3 skills...'}
123
+ .maxTags=${3}
124
+ .value=${['Design', 'Development']}
125
+ .description=${'Maximum 3 tags allowed'}
126
+ ></dees-input-tags>
127
+
128
+ <dees-input-tags
129
+ .label=${'Categories (Max 5)'}
130
+ .placeholder=${'Select categories...'}
131
+ .maxTags=${5}
132
+ .suggestions=${['Blog', 'Tutorial', 'News', 'Review', 'Guide', 'Case Study', 'Interview']}
133
+ .value=${['Tutorial', 'Guide']}
134
+ .description=${'Choose up to 5 categories'}
135
+ ></dees-input-tags>
136
+ </div>
137
+ </dees-form>
136
138
  </dees-panel>
137
139
 
138
140
  <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 CHANGED
@@ -89,7 +89,7 @@ export const demoFunc = () => html`
89
89
  }
90
90
  }}>
91
91
  <dees-panel .title=${'Basic Text Inputs'} .subtitle=${'Standard text inputs with labels and descriptions'}>
92
- <div class="input-group">
92
+ <dees-form>
93
93
  <dees-input-text
94
94
  .label=${'Username'}
95
95
  .value=${'johndoe'}
@@ -110,7 +110,7 @@ export const demoFunc = () => html`
110
110
  .value=${'secret123'}
111
111
  .key=${'password'}
112
112
  ></dees-input-text>
113
- </div>
113
+ </dees-form>
114
114
  </dees-panel>
115
115
  </dees-demowrapper>
116
116
 
@@ -140,28 +140,30 @@ export const demoFunc = () => html`
140
140
  }
141
141
  }}>
142
142
  <dees-panel .title=${'Horizontal Layout'} .subtitle=${'Multiple inputs arranged horizontally for compact forms'}>
143
- <div class="horizontal-group">
144
- <dees-input-text
145
- .label=${'First Name'}
146
- .value=${'John'}
147
- .layoutMode=${'horizontal'}
148
- .key=${'firstName'}
149
- ></dees-input-text>
150
-
151
- <dees-input-text
152
- .label=${'Last Name'}
153
- .value=${'Doe'}
154
- .layoutMode=${'horizontal'}
155
- .key=${'lastName'}
156
- ></dees-input-text>
157
-
158
- <dees-input-text
159
- .label=${'Age'}
160
- .value=${'28'}
161
- .layoutMode=${'horizontal'}
162
- .key=${'age'}
163
- ></dees-input-text>
164
- </div>
143
+ <dees-form>
144
+ <div class="horizontal-group">
145
+ <dees-input-text
146
+ .label=${'First Name'}
147
+ .value=${'John'}
148
+ .layoutMode=${'horizontal'}
149
+ .key=${'firstName'}
150
+ ></dees-input-text>
151
+
152
+ <dees-input-text
153
+ .label=${'Last Name'}
154
+ .value=${'Doe'}
155
+ .layoutMode=${'horizontal'}
156
+ .key=${'lastName'}
157
+ ></dees-input-text>
158
+
159
+ <dees-input-text
160
+ .label=${'Age'}
161
+ .value=${'28'}
162
+ .layoutMode=${'horizontal'}
163
+ .key=${'age'}
164
+ ></dees-input-text>
165
+ </div>
166
+ </dees-form>
165
167
  </dees-panel>
166
168
  </dees-demowrapper>
167
169
 
@@ -181,7 +183,7 @@ export const demoFunc = () => html`
181
183
  }
182
184
  }}>
183
185
  <dees-panel .title=${'Label Positions'} .subtitle=${'Different label positioning options for various layouts'}>
184
- <div class="input-group">
186
+ <dees-form>
185
187
  <dees-input-text
186
188
  .label=${'Label on Top (Default)'}
187
189
  .value=${'Standard layout'}
@@ -195,25 +197,25 @@ export const demoFunc = () => html`
195
197
  ></dees-input-text>
196
198
 
197
199
  <div class="grid-layout">
198
- <dees-input-text
199
- .label=${'City'}
200
- .value=${'New York'}
200
+ <dees-input-text
201
+ .label=${'City'}
202
+ .value=${'New York'}
201
203
  .labelPosition=${'left'}
202
204
  ></dees-input-text>
203
-
205
+
204
206
  <dees-input-text
205
207
  .label=${'ZIP Code'}
206
208
  .value=${'10001'}
207
209
  .labelPosition=${'left'}
208
210
  ></dees-input-text>
209
211
  </div>
210
- </div>
212
+ </dees-form>
211
213
  </dees-panel>
212
214
  </dees-demowrapper>
213
215
 
214
216
  <dees-demowrapper>
215
217
  <dees-panel .title=${'Validation & States'} .subtitle=${'Different validation states and input configurations'}>
216
- <div class="input-group">
218
+ <dees-form>
217
219
  <dees-input-text
218
220
  .label=${'Required Field'}
219
221
  .required=${true}
@@ -237,7 +239,7 @@ export const demoFunc = () => html`
237
239
  return { valid: false, message: 'Please enter a valid email address' };
238
240
  }}
239
241
  ></dees-input-text>
240
- </div>
242
+ </dees-form>
241
243
  </dees-panel>
242
244
  </dees-demowrapper>
243
245
 
@@ -266,7 +268,7 @@ export const demoFunc = () => html`
266
268
  });
267
269
  }}>
268
270
  <dees-panel .title=${'Advanced Features'} .subtitle=${'Password visibility toggle and other advanced features'}>
269
- <div class="input-group">
271
+ <dees-form>
270
272
  <dees-input-text
271
273
  .label=${'Password with Toggle'}
272
274
  .isPasswordBool=${true}
@@ -280,7 +282,7 @@ export const demoFunc = () => html`
280
282
  .value=${'sk-1234567890abcdef'}
281
283
  .infoText=${'Keep this key secure and never share it'}
282
284
  ></dees-input-text>
283
- </div>
285
+ </dees-form>
284
286
  </dees-panel>
285
287
  </dees-demowrapper>
286
288