@design.estate/dees-catalog 3.76.0 → 3.77.0

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 (39) hide show
  1. package/dist_bundle/bundle.js +477 -451
  2. package/dist_ts_web/00_commitinfo_data.js +1 -1
  3. package/dist_ts_web/elements/00group-dataview/dees-table/dees-table.js +28 -3
  4. package/dist_ts_web/elements/00group-dataview/dees-table/styles.js +28 -1
  5. package/dist_ts_web/elements/00group-dataview/dees-table/types.d.ts +15 -0
  6. package/dist_ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.demo.js +96 -94
  7. package/dist_ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.js +27 -31
  8. package/dist_ts_web/elements/00group-input/dees-input-fileupload/demo.js +36 -36
  9. package/dist_ts_web/elements/00group-input/dees-input-iban/dees-input-iban.demo.js +20 -24
  10. package/dist_ts_web/elements/00group-input/dees-input-list/dees-input-list.demo.js +22 -20
  11. package/dist_ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.demo.js +67 -65
  12. package/dist_ts_web/elements/00group-input/dees-input-phone/dees-input-phone.demo.js +20 -24
  13. package/dist_ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.demo.js +5 -11
  14. package/dist_ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.demo.js +54 -54
  15. package/dist_ts_web/elements/00group-input/dees-input-tags/dees-input-tags.demo.js +21 -19
  16. package/dist_ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.js +37 -41
  17. package/dist_ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.demo.js +35 -33
  18. package/dist_ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.demo.js +19 -25
  19. package/dist_watch/bundle.js +442 -449
  20. package/dist_watch/bundle.js.map +2 -2
  21. package/package.json +1 -1
  22. package/readme.md +19 -12
  23. package/ts_web/00_commitinfo_data.ts +1 -1
  24. package/ts_web/elements/00group-dataview/dees-table/dees-table.ts +28 -2
  25. package/ts_web/elements/00group-dataview/dees-table/styles.ts +33 -0
  26. package/ts_web/elements/00group-dataview/dees-table/types.ts +19 -0
  27. package/ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.demo.ts +95 -93
  28. package/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.ts +40 -44
  29. package/ts_web/elements/00group-input/dees-input-fileupload/demo.ts +35 -35
  30. package/ts_web/elements/00group-input/dees-input-iban/dees-input-iban.demo.ts +19 -23
  31. package/ts_web/elements/00group-input/dees-input-list/dees-input-list.demo.ts +21 -19
  32. package/ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.demo.ts +66 -64
  33. package/ts_web/elements/00group-input/dees-input-phone/dees-input-phone.demo.ts +19 -23
  34. package/ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.demo.ts +4 -10
  35. package/ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.demo.ts +53 -53
  36. package/ts_web/elements/00group-input/dees-input-tags/dees-input-tags.demo.ts +20 -18
  37. package/ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts +36 -40
  38. package/ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.demo.ts +34 -32
  39. package/ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.demo.ts +18 -24
package/ts_web/elements/00group-input/dees-input-fileupload/demo.ts CHANGED
@@ -55,41 +55,43 @@ export const demoFunc = () => html`
55
55
  .title=${'Modern file uploader'}
56
56
  .subtitle=${'Shadcn-inspired layout with drag & drop, previews and validation'}
57
57
  >
58
- <div class="demo-grid demo-grid--two">
59
- <div class="demo-stack">
60
- <dees-input-fileupload
61
- .label=${'Attachments'}
62
- .infoText=${'Upload supporting documents for your request'}
63
- .description=${'Accepted formats: images, PDF, and ZIP archives up to 10MB'}
64
- .accept=${'image/*,.pdf,.zip'}
65
- .maxSize=${10 * 1024 * 1024}
66
- ></dees-input-fileupload>
67
-
68
- <dees-input-fileupload
69
- .label=${'Brand assets'}
70
- .infoText=${'Upload high-resolution imagery (JPG/PNG)'}
71
- .accept=${'image/jpeg,image/png'}
72
- .multiple=${false}
73
- .maxSize=${5 * 1024 * 1024}
74
- .buttonText=${'Select cover image'}
75
- ></dees-input-fileupload>
76
- </div>
58
+ <dees-form>
59
+ <div class="demo-grid demo-grid--two">
60
+ <div class="demo-stack">
61
+ <dees-input-fileupload
62
+ .label=${'Attachments'}
63
+ .infoText=${'Upload supporting documents for your request'}
64
+ .description=${'Accepted formats: images, PDF, and ZIP archives up to 10MB'}
65
+ .accept=${'image/*,.pdf,.zip'}
66
+ .maxSize=${10 * 1024 * 1024}
67
+ ></dees-input-fileupload>
68
+
69
+ <dees-input-fileupload
70
+ .label=${'Brand assets'}
71
+ .infoText=${'Upload high-resolution imagery (JPG/PNG)'}
72
+ .accept=${'image/jpeg,image/png'}
73
+ .multiple=${false}
74
+ .maxSize=${5 * 1024 * 1024}
75
+ .buttonText=${'Select cover image'}
76
+ ></dees-input-fileupload>
77
+ </div>
77
78
 
78
- <div class="demo-stack">
79
- <dees-input-fileupload
80
- .label=${'Audio uploads'}
81
- .infoText=${'Share podcast drafts (MP3/WAV, max 25MB each)'}
82
- .accept=${'audio/*'}
83
- .maxSize=${25 * 1024 * 1024}
84
- ></dees-input-fileupload>
85
-
86
- <dees-input-fileupload
87
- .label=${'Disabled example'}
88
- .infoText=${'Uploader is disabled while moderation is pending'}
89
- .disabled=${true}
90
- ></dees-input-fileupload>
79
+ <div class="demo-stack">
80
+ <dees-input-fileupload
81
+ .label=${'Audio uploads'}
82
+ .infoText=${'Share podcast drafts (MP3/WAV, max 25MB each)'}
83
+ .accept=${'audio/*'}
84
+ .maxSize=${25 * 1024 * 1024}
85
+ ></dees-input-fileupload>
86
+
87
+ <dees-input-fileupload
88
+ .label=${'Disabled example'}
89
+ .infoText=${'Uploader is disabled while moderation is pending'}
90
+ .disabled=${true}
91
+ ></dees-input-fileupload>
92
+ </div>
91
93
  </div>
92
- </div>
94
+ </dees-form>
93
95
  </dees-panel>
94
96
 
95
97
  <dees-panel
@@ -98,7 +100,6 @@ export const demoFunc = () => html`
98
100
  >
99
101
  <div class="demo-grid">
100
102
  <dees-form>
101
- <div class="demo-stack">
102
103
  <dees-input-text
103
104
  .label=${'Project name'}
104
105
  .infoText=${'How should we refer to this project internally?'}
@@ -140,7 +141,6 @@ export const demoFunc = () => html`
140
141
  ></dees-input-text>
141
142
 
142
143
  <dees-form-submit .text=${'Submit briefing'}></dees-form-submit>
143
- </div>
144
144
  </dees-form>
145
145
 
146
146
  <div class="demo-note">
package/ts_web/elements/00group-input/dees-input-iban/dees-input-iban.demo.ts CHANGED
@@ -13,12 +13,6 @@ export const demoFunc = () => html`
13
13
  margin: 0 auto;
14
14
  }
15
15
 
16
- .input-group {
17
- display: flex;
18
- flex-direction: column;
19
- gap: 16px;
20
- }
21
-
22
16
  .payment-group {
23
17
  display: flex;
24
18
  align-items: center;
@@ -30,7 +24,7 @@ export const demoFunc = () => html`
30
24
 
31
25
  <div class="demo-container">
32
26
  <dees-panel .title=${'Basic IBAN Input'} .subtitle=${'International Bank Account Number with automatic formatting'}>
33
- <div class="input-group">
27
+ <dees-form>
34
28
  <dees-input-iban
35
29
  .label=${'Bank Account IBAN'}
36
30
  .infoText=${'Enter your International Bank Account Number'}
@@ -42,27 +36,29 @@ export const demoFunc = () => html`
42
36
  .infoText=${'This IBAN has been verified'}
43
37
  .value=${'DE89370400440532013000'}
44
38
  ></dees-input-iban>
45
- </div>
39
+ </dees-form>
46
40
  </dees-panel>
47
41
 
48
42
  <dees-panel .title=${'Payment Information'} .subtitle=${'IBAN input with horizontal layout for payment forms'}>
49
- <div class="payment-group">
50
- <dees-input-text
51
- .label=${'Account Holder'}
52
- .layoutMode=${'horizontal'}
53
- .value=${'John Doe'}
54
- ></dees-input-text>
55
-
56
- <dees-input-iban
57
- .label=${'IBAN'}
58
- .layoutMode=${'horizontal'}
59
- .value=${'GB82WEST12345698765432'}
60
- ></dees-input-iban>
61
- </div>
43
+ <dees-form>
44
+ <div class="payment-group">
45
+ <dees-input-text
46
+ .label=${'Account Holder'}
47
+ .layoutMode=${'horizontal'}
48
+ .value=${'John Doe'}
49
+ ></dees-input-text>
50
+
51
+ <dees-input-iban
52
+ .label=${'IBAN'}
53
+ .layoutMode=${'horizontal'}
54
+ .value=${'GB82WEST12345698765432'}
55
+ ></dees-input-iban>
56
+ </div>
57
+ </dees-form>
62
58
  </dees-panel>
63
59
 
64
60
  <dees-panel .title=${'Validation & States'} .subtitle=${'Required fields and disabled states'}>
65
- <div class="input-group">
61
+ <dees-form>
66
62
  <dees-input-iban
67
63
  .label=${'Payment Account'}
68
64
  .infoText=${'Required for processing payments'}
@@ -75,7 +71,7 @@ export const demoFunc = () => html`
75
71
  .value=${'FR1420041010050500013M02606'}
76
72
  .disabled=${true}
77
73
  ></dees-input-iban>
78
- </div>
74
+ </dees-form>
79
75
  </dees-panel>
80
76
 
81
77
  <dees-panel .title=${'Bank Transfer Form'} .subtitle=${'Complete form example with IBAN validation'}>
package/ts_web/elements/00group-input/dees-input-list/dees-input-list.demo.ts CHANGED
@@ -109,25 +109,27 @@ export const demoFunc = () => html`
109
109
  </dees-panel>
110
110
 
111
111
  <dees-panel .title=${'3. Validation & Constraints'} .subtitle=${'Lists with minimum/maximum items and duplicate prevention'}>
112
- <div class="grid-layout">
113
- <dees-input-list
114
- .label=${'Team Members (Min 2, Max 5)'}
115
- .placeholder=${'Add team member...'}
116
- .minItems=${2}
117
- .maxItems=${5}
118
- .value=${['Alice', 'Bob']}
119
- .required=${true}
120
- .description=${'Add 2-5 team members'}
121
- ></dees-input-list>
122
-
123
- <dees-input-list
124
- .label=${'Unique Tags (No Duplicates)'}
125
- .placeholder=${'Add unique tag...'}
126
- .allowDuplicates=${false}
127
- .value=${['frontend', 'backend', 'database']}
128
- .description=${'Duplicate items are not allowed'}
129
- ></dees-input-list>
130
- </div>
112
+ <dees-form>
113
+ <div class="grid-layout">
114
+ <dees-input-list
115
+ .label=${'Team Members (Min 2, Max 5)'}
116
+ .placeholder=${'Add team member...'}
117
+ .minItems=${2}
118
+ .maxItems=${5}
119
+ .value=${['Alice', 'Bob']}
120
+ .required=${true}
121
+ .description=${'Add 2-5 team members'}
122
+ ></dees-input-list>
123
+
124
+ <dees-input-list
125
+ .label=${'Unique Tags (No Duplicates)'}
126
+ .placeholder=${'Add unique tag...'}
127
+ .allowDuplicates=${false}
128
+ .value=${['frontend', 'backend', 'database']}
129
+ .description=${'Duplicate items are not allowed'}
130
+ ></dees-input-list>
131
+ </div>
132
+ </dees-form>
131
133
  </dees-panel>
132
134
 
133
135
  <dees-panel .title=${'4. Delete Confirmation'} .subtitle=${'Require confirmation before deleting items'}>
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
@@ -13,12 +13,6 @@ export const demoFunc = () => html`
13
13
  margin: 0 auto;
14
14
  }
15
15
 
16
- .input-group {
17
- display: flex;
18
- flex-direction: column;
19
- gap: 16px;
20
- }
21
-
22
16
  .horizontal-group {
23
17
  display: flex;
24
18
  align-items: center;
@@ -30,7 +24,7 @@ export const demoFunc = () => html`
30
24
 
31
25
  <div class="demo-container">
32
26
  <dees-panel .title=${'Basic Phone Input'} .subtitle=${'Automatic formatting for phone numbers'}>
33
- <div class="input-group">
27
+ <dees-form>
34
28
  <dees-input-phone
35
29
  .label=${'Phone Number'}
36
30
  .infoText=${'Enter your phone number with country code'}
@@ -44,27 +38,29 @@ export const demoFunc = () => html`
44
38
  .required=${true}
45
39
  .placeholder=${'+1 (555) 000-0000'}
46
40
  ></dees-input-phone>
47
- </div>
41
+ </dees-form>
48
42
  </dees-panel>
49
43
 
50
44
  <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>
45
+ <dees-form>
46
+ <div class="horizontal-group">
47
+ <dees-input-phone
48
+ .label=${'Mobile'}
49
+ .layoutMode=${'horizontal'}
50
+ .value=${'4155551234'}
51
+ ></dees-input-phone>
52
+
53
+ <dees-input-phone
54
+ .label=${'Office'}
55
+ .layoutMode=${'horizontal'}
56
+ .placeholder=${'+1 (800) 555-0000'}
57
+ ></dees-input-phone>
58
+ </div>
59
+ </dees-form>
64
60
  </dees-panel>
65
61
 
66
62
  <dees-panel .title=${'International Numbers'} .subtitle=${'Supports formatting for numbers with country codes'}>
67
- <div class="input-group">
63
+ <dees-form>
68
64
  <dees-input-phone
69
65
  .label=${'International Contact'}
70
66
  .infoText=${'Automatically formats international numbers'}
@@ -76,7 +72,7 @@ export const demoFunc = () => html`
76
72
  .value=${'911'}
77
73
  .disabled=${true}
78
74
  ></dees-input-phone>
79
- </div>
75
+ </dees-form>
80
76
  </dees-panel>
81
77
 
82
78
  <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
@@ -14,12 +14,6 @@ export const demoFunc = () => html`
14
14
  margin: 0 auto;
15
15
  }
16
16
 
17
- .input-group {
18
- display: flex;
19
- flex-direction: column;
20
- gap: 16px;
21
- }
22
-
23
17
  .shopping-grid {
24
18
  display: grid;
25
19
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
@@ -66,7 +60,7 @@ export const demoFunc = () => html`
66
60
 
67
61
  <div class="demo-container">
68
62
  <dees-panel .title=${'Basic Quantity Selector'} .subtitle=${'Simple quantity input with increment/decrement buttons'}>
69
- <div class="input-group">
63
+ <dees-form>
70
64
  <dees-input-quantityselector
71
65
  .label=${'Quantity'}
72
66
  .infoText=${'Select the desired quantity'}
@@ -79,7 +73,7 @@ export const demoFunc = () => html`
79
73
  .infoText=${'Adjust the quantity of items'}
80
74
  .value=${3}
81
75
  ></dees-input-quantityselector>
82
- </div>
76
+ </dees-form>
83
77
  </dees-panel>
84
78
 
85
79
  <dees-panel .title=${'Shopping Cart'} .subtitle=${'Modern e-commerce product cards with interactive quantity selectors'} .runAfterRender=${async (elementArg: HTMLElement) => {
@@ -178,7 +172,7 @@ export const demoFunc = () => html`
178
172
  </dees-panel>
179
173
 
180
174
  <dees-panel .title=${'Required & Disabled States'} .subtitle=${'Different states for validation and restrictions'}>
181
- <div class="input-group">
175
+ <dees-form>
182
176
  <dees-input-quantityselector
183
177
  .label=${'Number of Licenses'}
184
178
  .infoText=${'Select how many licenses you need'}
@@ -192,7 +186,7 @@ export const demoFunc = () => html`
192
186
  .disabled=${true}
193
187
  .value=${5}
194
188
  ></dees-input-quantityselector>
195
- </div>
189
+ </dees-form>
196
190
  </dees-panel>
197
191
 
198
192
  <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
@@ -23,12 +23,6 @@ export const demoFunc = () => html`
23
23
  margin-bottom: 0;
24
24
  }
25
25
 
26
- .input-group {
27
- display: flex;
28
- flex-direction: column;
29
- gap: 16px;
30
- }
31
-
32
26
  .demo-grid {
33
27
  display: grid;
34
28
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -48,25 +42,27 @@ export const demoFunc = () => html`
48
42
 
49
43
  <div class="demo-container">
50
44
  <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>
45
+ <dees-form>
46
+ <div class="demo-grid">
47
+ <dees-input-radiogroup
48
+ .label=${'Subscription Plan'}
49
+ .options=${['Basic - $9/month', 'Pro - $29/month', 'Enterprise - $99/month']}
50
+ .selectedOption=${'Pro - $29/month'}
51
+ .description=${'Choose your subscription tier'}
52
+ ></dees-input-radiogroup>
53
+
54
+ <dees-input-radiogroup
55
+ .label=${'Priority Level'}
56
+ .options=${['High', 'Medium', 'Low']}
57
+ .selectedOption=${'Medium'}
58
+ .required=${true}
59
+ ></dees-input-radiogroup>
60
+ </div>
61
+ </dees-form>
66
62
  </dees-panel>
67
63
 
68
64
  <dees-panel .title=${'2. Horizontal Layout'} .subtitle=${'Radio groups with horizontal arrangement'}>
69
- <div class="input-group">
65
+ <dees-form>
70
66
  <dees-input-radiogroup
71
67
  .label=${'Do you agree with the terms?'}
72
68
  .options=${['Yes', 'No', 'Maybe']}
@@ -81,7 +77,7 @@ export const demoFunc = () => html`
81
77
  .selectedOption=${'Intermediate'}
82
78
  .description=${'Select your experience level with web development'}
83
79
  ></dees-input-radiogroup>
84
- </div>
80
+ </dees-form>
85
81
  </dees-panel>
86
82
 
87
83
  <dees-panel .title=${'3. Advanced Options'} .subtitle=${'Using object format with keys and payloads'}>
@@ -106,41 +102,45 @@ export const demoFunc = () => html`
106
102
  </dees-panel>
107
103
 
108
104
  <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>
105
+ <dees-form>
106
+ <div class="demo-grid">
107
+ <dees-input-radiogroup
108
+ .label=${'How satisfied are you?'}
109
+ .options=${['Very Satisfied', 'Satisfied', 'Neutral', 'Dissatisfied', 'Very Dissatisfied']}
110
+ .selectedOption=${'Satisfied'}
111
+ ></dees-input-radiogroup>
112
+
113
+ <dees-input-radiogroup
114
+ .label=${'Would you recommend us?'}
115
+ .options=${['Definitely', 'Probably', 'Not Sure', 'Probably Not', 'Definitely Not']}
116
+ .selectedOption=${'Probably'}
117
+ ></dees-input-radiogroup>
118
+ </div>
119
+ </dees-form>
122
120
  </dees-panel>
123
121
 
124
122
  <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>
123
+ <dees-form>
124
+ <div class="demo-grid">
125
+ <dees-input-radiogroup
126
+ .label=${'Required Selection'}
127
+ .options=${['Option A', 'Option B', 'Option C']}
128
+ .required=${true}
129
+ .description=${'This field is required'}
130
+ ></dees-input-radiogroup>
131
+
132
+ <dees-input-radiogroup
133
+ .label=${'Disabled State'}
134
+ .options=${['Disabled Option 1', 'Disabled Option 2', 'Disabled Option 3']}
135
+ .selectedOption=${'Disabled Option 2'}
136
+ .disabled=${true}
137
+ ></dees-input-radiogroup>
138
+ </div>
139
+ </dees-form>
140
140
  </dees-panel>
141
141
 
142
142
  <dees-panel .title=${'6. Settings Example'} .subtitle=${'Common patterns in application settings'}>
143
- <div class="input-group">
143
+ <dees-form>
144
144
  <dees-input-radiogroup
145
145
  .label=${'Theme Preference'}
146
146
  .options=${[
@@ -165,7 +165,7 @@ export const demoFunc = () => html`
165
165
  .selectedOption=${'English'}
166
166
  .direction=${'horizontal'}
167
167
  ></dees-input-radiogroup>
168
- </div>
168
+ </dees-form>
169
169
  </dees-panel>
170
170
 
171
171
  <dees-panel .title=${'7. Form Integration'} .subtitle=${'Works seamlessly with dees-form'}>