@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
@@ -12,12 +12,6 @@ export const demoFunc = () => html `
12
12
  margin: 0 auto;
13
13
  }
14
14
 
15
- .input-group {
16
- display: flex;
17
- flex-direction: column;
18
- gap: 16px;
19
- }
20
-
21
15
  .payment-group {
22
16
  display: flex;
23
17
  align-items: center;
@@ -29,7 +23,7 @@ export const demoFunc = () => html `
29
23
 
30
24
  <div class="demo-container">
31
25
  <dees-panel .title=${'Basic IBAN Input'} .subtitle=${'International Bank Account Number with automatic formatting'}>
32
- <div class="input-group">
26
+ <dees-form>
33
27
  <dees-input-iban
34
28
  .label=${'Bank Account IBAN'}
35
29
  .infoText=${'Enter your International Bank Account Number'}
@@ -41,27 +35,29 @@ export const demoFunc = () => html `
41
35
  .infoText=${'This IBAN has been verified'}
42
36
  .value=${'DE89370400440532013000'}
43
37
  ></dees-input-iban>
44
- </div>
38
+ </dees-form>
45
39
  </dees-panel>
46
40
 
47
41
  <dees-panel .title=${'Payment Information'} .subtitle=${'IBAN input with horizontal layout for payment forms'}>
48
- <div class="payment-group">
49
- <dees-input-text
50
- .label=${'Account Holder'}
51
- .layoutMode=${'horizontal'}
52
- .value=${'John Doe'}
53
- ></dees-input-text>
54
-
55
- <dees-input-iban
56
- .label=${'IBAN'}
57
- .layoutMode=${'horizontal'}
58
- .value=${'GB82WEST12345698765432'}
59
- ></dees-input-iban>
60
- </div>
42
+ <dees-form>
43
+ <div class="payment-group">
44
+ <dees-input-text
45
+ .label=${'Account Holder'}
46
+ .layoutMode=${'horizontal'}
47
+ .value=${'John Doe'}
48
+ ></dees-input-text>
49
+
50
+ <dees-input-iban
51
+ .label=${'IBAN'}
52
+ .layoutMode=${'horizontal'}
53
+ .value=${'GB82WEST12345698765432'}
54
+ ></dees-input-iban>
55
+ </div>
56
+ </dees-form>
61
57
  </dees-panel>
62
58
 
63
59
  <dees-panel .title=${'Validation & States'} .subtitle=${'Required fields and disabled states'}>
64
- <div class="input-group">
60
+ <dees-form>
65
61
  <dees-input-iban
66
62
  .label=${'Payment Account'}
67
63
  .infoText=${'Required for processing payments'}
@@ -74,7 +70,7 @@ export const demoFunc = () => html `
74
70
  .value=${'FR1420041010050500013M02606'}
75
71
  .disabled=${true}
76
72
  ></dees-input-iban>
77
- </div>
73
+ </dees-form>
78
74
  </dees-panel>
79
75
 
80
76
  <dees-panel .title=${'Bank Transfer Form'} .subtitle=${'Complete form example with IBAN validation'}>
@@ -88,4 +84,4 @@ export const demoFunc = () => html `
88
84
  </div>
89
85
  </dees-demowrapper>
90
86
  `;
91
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC1pYmFuLmRlbW8uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1pbnB1dC9kZWVzLWlucHV0LWliYW4vZGVlcy1pbnB1dC1pYmFuLmRlbW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUV4RCxNQUFNLENBQUMsTUFBTSxRQUFRLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOzs7UUFHMUIsR0FBRyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O09Bc0JKOzs7OzJCQUlvQixrQkFBa0IsY0FBYyw2REFBNkQ7OztxQkFHbkcsbUJBQW1CO3dCQUNoQiw4Q0FBOEM7MkJBQzNDLCtDQUErQzs7OztxQkFJckQsZUFBZTt3QkFDWiw2QkFBNkI7cUJBQ2hDLHdCQUF3Qjs7Ozs7MkJBS2xCLHFCQUFxQixjQUFjLHFEQUFxRDs7O3FCQUc5RixnQkFBZ0I7MEJBQ1gsWUFBWTtxQkFDakIsVUFBVTs7OztxQkFJVixNQUFNOzBCQUNELFlBQVk7cUJBQ2pCLHdCQUF3Qjs7Ozs7MkJBS2xCLHFCQUFxQixjQUFjLHFDQUFxQzs7O3FCQUc5RSxpQkFBaUI7d0JBQ2Qsa0NBQWtDO3dCQUNsQyxJQUFJOzs7O3FCQUlQLGFBQWE7d0JBQ1YsNkJBQTZCO3FCQUNoQyw2QkFBNkI7d0JBQzFCLElBQUk7Ozs7OzJCQUtELG9CQUFvQixjQUFjLDRDQUE0Qzs7b0NBRXJFLGdCQUFnQixjQUFjLElBQUk7b0NBQ2xDLGdCQUFnQixjQUFjLElBQUk7b0NBQ2xDLG9CQUFvQixjQUFjLHFDQUFxQztvQ0FDdkUsUUFBUSxlQUFlLFFBQVEsY0FBYyxJQUFJOzs7OztDQUtwRixDQUFDIn0=
87
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC1pYmFuLmRlbW8uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1pbnB1dC9kZWVzLWlucHV0LWliYW4vZGVlcy1pbnB1dC1pYmFuLmRlbW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUV4RCxNQUFNLENBQUMsTUFBTSxRQUFRLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOzs7UUFHMUIsR0FBRyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7O09BZ0JKOzs7OzJCQUlvQixrQkFBa0IsY0FBYyw2REFBNkQ7OztxQkFHbkcsbUJBQW1CO3dCQUNoQiw4Q0FBOEM7MkJBQzNDLCtDQUErQzs7OztxQkFJckQsZUFBZTt3QkFDWiw2QkFBNkI7cUJBQ2hDLHdCQUF3Qjs7Ozs7MkJBS2xCLHFCQUFxQixjQUFjLHFEQUFxRDs7Ozt1QkFJNUYsZ0JBQWdCOzRCQUNYLFlBQVk7dUJBQ2pCLFVBQVU7Ozs7dUJBSVYsTUFBTTs0QkFDRCxZQUFZO3VCQUNqQix3QkFBd0I7Ozs7OzsyQkFNcEIscUJBQXFCLGNBQWMscUNBQXFDOzs7cUJBRzlFLGlCQUFpQjt3QkFDZCxrQ0FBa0M7d0JBQ2xDLElBQUk7Ozs7cUJBSVAsYUFBYTt3QkFDViw2QkFBNkI7cUJBQ2hDLDZCQUE2Qjt3QkFDMUIsSUFBSTs7Ozs7MkJBS0Qsb0JBQW9CLGNBQWMsNENBQTRDOztvQ0FFckUsZ0JBQWdCLGNBQWMsSUFBSTtvQ0FDbEMsZ0JBQWdCLGNBQWMsSUFBSTtvQ0FDbEMsb0JBQW9CLGNBQWMscUNBQXFDO29DQUN2RSxRQUFRLGVBQWUsUUFBUSxjQUFjLElBQUk7Ozs7O0NBS3BGLENBQUMifQ==
@@ -108,25 +108,27 @@ export const demoFunc = () => html `
108
108
  </dees-panel>
109
109
 
110
110
  <dees-panel .title=${'3. Validation & Constraints'} .subtitle=${'Lists with minimum/maximum items and duplicate prevention'}>
111
- <div class="grid-layout">
112
- <dees-input-list
113
- .label=${'Team Members (Min 2, Max 5)'}
114
- .placeholder=${'Add team member...'}
115
- .minItems=${2}
116
- .maxItems=${5}
117
- .value=${['Alice', 'Bob']}
118
- .required=${true}
119
- .description=${'Add 2-5 team members'}
120
- ></dees-input-list>
121
-
122
- <dees-input-list
123
- .label=${'Unique Tags (No Duplicates)'}
124
- .placeholder=${'Add unique tag...'}
125
- .allowDuplicates=${false}
126
- .value=${['frontend', 'backend', 'database']}
127
- .description=${'Duplicate items are not allowed'}
128
- ></dees-input-list>
129
- </div>
111
+ <dees-form>
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>
131
+ </dees-form>
130
132
  </dees-panel>
131
133
 
132
134
  <dees-panel .title=${'4. Delete Confirmation'} .subtitle=${'Require confirmation before deleting items'}>
@@ -350,4 +352,4 @@ export const demoFunc = () => html `
350
352
  </div>
351
353
  </dees-demowrapper>
352
354
  `;
353
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC1saXN0LmRlbW8uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1pbnB1dC9kZWVzLWlucHV0LWxpc3QvZGVlcy1pbnB1dC1saXN0LmRlbW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUN4RCxPQUFPLHdDQUF3QyxDQUFDO0FBQ2hELE9BQU8sK0NBQStDLENBQUM7QUFDdkQsT0FBTywyQ0FBMkMsQ0FBQztBQUNuRCxPQUFPLHVDQUF1QyxDQUFDO0FBQy9DLE9BQU8seURBQXlELENBQUM7QUFFakUsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7O1FBRzFCLEdBQUcsQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7T0FpRUo7Ozs7MkJBSW9CLHFCQUFxQixjQUFjLG1EQUFtRDs7bUJBRTlGLGVBQWU7eUJBQ1QsMEJBQTBCO21CQUNoQyxDQUFDLE1BQU0sRUFBRSxPQUFPLEVBQUUsTUFBTSxFQUFFLFFBQVEsQ0FBQzt5QkFDN0Isb0RBQW9EOzs7Ozs7OzJCQU9sRCxrQkFBa0IsY0FBYyxnQ0FBZ0M7O21CQUV4RSxlQUFlO3lCQUNULGVBQWU7c0JBQ2xCLElBQUk7bUJBQ1A7SUFDUCxzQkFBc0I7SUFDdEIsa0JBQWtCO0lBQ2xCLHNCQUFzQjtJQUN0QixzQkFBc0I7SUFDdEIsc0JBQXNCO0NBQ3ZCO3lCQUNjLDZDQUE2Qzs7Ozs7OzsyQkFPM0MsNkJBQTZCLGNBQWMsMkRBQTJEOzs7cUJBRzVHLDZCQUE2QjsyQkFDdkIsb0JBQW9CO3dCQUN2QixDQUFDO3dCQUNELENBQUM7cUJBQ0osQ0FBQyxPQUFPLEVBQUUsS0FBSyxDQUFDO3dCQUNiLElBQUk7MkJBQ0Qsc0JBQXNCOzs7O3FCQUk1Qiw2QkFBNkI7MkJBQ3ZCLG1CQUFtQjsrQkFDZixLQUFLO3FCQUNmLENBQUMsVUFBVSxFQUFFLFNBQVMsRUFBRSxVQUFVLENBQUM7MkJBQzdCLGlDQUFpQzs7Ozs7MkJBS2pDLHdCQUF3QixjQUFjLDRDQUE0Qzs7bUJBRTFGLHFCQUFxQjt5QkFDZixzQkFBc0I7MkJBQ3BCLElBQUk7bUJBQ1o7SUFDUCxtQkFBbUI7SUFDbkIsMEJBQTBCO0lBQzFCLHVCQUF1QjtJQUN2QixtQkFBbUI7Q0FDcEI7eUJBQ2MsMkNBQTJDOzs7OzJCQUl6QyxtQkFBbUIsY0FBYyx3QkFBd0I7O21CQUVqRSxpQkFBaUI7bUJBQ2pCLENBQUMsbUJBQW1CLEVBQUUsbUJBQW1CLEVBQUUsbUJBQW1CLENBQUM7c0JBQzVELElBQUk7eUJBQ0QsZ0NBQWdDOzs7OzJCQUk5QixxQkFBcUIsY0FBYywwQ0FBMEM7OztxQkFHbkYsYUFBYTsyQkFDUCxtQkFBbUI7d0JBQ3RCLElBQUk7bUJBQ1QsTUFBTTs7Ozs7dUJBS0YsYUFBYTs2QkFDUCxtQkFBbUI7MEJBQ3RCLElBQUk7MEJBQ0osQ0FBQztxQkFDTixhQUFhOzBCQUNSLElBQUk7dUJBQ1A7SUFDUCxjQUFjO0lBQ2QsYUFBYTtJQUNiLFFBQVE7Q0FDVDs2QkFDYyw0QkFBNEI7Ozs7dUJBSWxDLGNBQWM7NkJBQ1IseUJBQXlCOzBCQUM1QixJQUFJOzBCQUNKLENBQUM7cUJBQ04sY0FBYzswQkFDVCxJQUFJO3VCQUNQO0lBQ1AsdUJBQXVCO0lBQ3ZCLHFCQUFxQjtDQUN0Qjs2QkFDYyxtQ0FBbUM7Ozs7O3FCQUszQyxPQUFPO3lCQUNILFVBQVU7MkJBQ1IsOEJBQThCO21CQUN0QyxPQUFPOzs7b0NBR1UsYUFBYTs7OzsyQkFJdEIscUJBQXFCLGNBQWMsOENBQThDOzs7bUJBR3pGLGtCQUFrQjt5QkFDWixrQkFBa0I7c0JBQ3JCLElBQUk7MkJBQ0MsS0FBSzs2QkFDSCxLQUFLO3NCQUNaLEVBQUU7b0JBQ0osQ0FBQyxDQUFjLEVBQUUsRUFBRTtJQUMzQixNQUFNLE9BQU8sR0FBRyxRQUFRLENBQUMsYUFBYSxDQUFDLFlBQVksQ0FBQyxDQUFDO0lBQ3JELElBQUksT0FBTyxFQUFFLENBQUM7UUFDWixNQUFNLElBQUksR0FBRztZQUNYLEtBQUssRUFBRSxDQUFDLENBQUMsTUFBTSxDQUFDLEtBQUs7WUFDckIsS0FBSyxFQUFFLENBQUMsQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLE1BQU07WUFDNUIsU0FBUyxFQUFFLElBQUksSUFBSSxFQUFFLENBQUMsV0FBVyxFQUFFO1NBQ3BDLENBQUM7UUFDRixPQUFPLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxFQUFFLElBQUksRUFBRSxDQUFDLENBQUMsQ0FBQztJQUN0RCxDQUFDO0FBQ0gsQ0FBQzs7Ozs7Ozs0QkFPaUIsSUFBSSxJQUFJLEVBQUUsQ0FBQyxXQUFXLEVBQUU7Ozs7Ozs7OzsyQkFTekIsMkJBQTJCLGNBQWMsNENBQTRDOzttQkFFN0Ysb0JBQW9CO3lCQUNkLGtCQUFrQjttQkFDeEI7SUFDUCwwQkFBMEI7SUFDMUIsbUNBQW1DO0lBQ25DLHlCQUF5QjtJQUN6QixpQ0FBaUM7SUFDakMsMkJBQTJCO0lBQzNCLHNCQUFzQjtDQUN2QjtzQkFDVyxJQUFJOzJCQUNDLElBQUk7NkJBQ0YsS0FBSztzQkFDWixDQUFDO3NCQUNELEVBQUU7c0JBQ0YsSUFBSTt5QkFDRCxpRUFBaUU7Ozs7MkJBSS9ELG1DQUFtQyxjQUFjLDZEQUE2RDs7OztxQkFJcEgscUJBQXFCOzJCQUNmLGtDQUFrQzswQkFDbkM7SUFDWixFQUFFLE9BQU8sRUFBRSxhQUFhLEVBQUUsT0FBTyxFQUFFLEVBQUUsRUFBRSxFQUFFLENBQUMsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLFVBQVUsRUFBRSxVQUFVLEVBQUUsRUFBRTtJQUN4RixFQUFFLE9BQU8sRUFBRSxhQUFhLEVBQUUsT0FBTyxFQUFFLEVBQUUsRUFBRSxFQUFFLENBQUMsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLFVBQVUsRUFBRSxJQUFJLEVBQUUsRUFBRTtJQUNsRixFQUFFLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxPQUFPLEVBQUUsRUFBRSxFQUFFLEVBQUUsQ0FBQyxFQUFFLElBQUksRUFBRSxpQkFBaUIsRUFBRSxVQUFVLEVBQUUsU0FBUyxFQUFFLEVBQUU7SUFDakcsRUFBRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE9BQU8sRUFBRSxFQUFFLEVBQUUsRUFBRSxDQUFDLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRSxVQUFVLEVBQUUsU0FBUyxFQUFFLEVBQUU7SUFDdkYsRUFBRSxPQUFPLEVBQUUsV0FBVyxFQUFFLE9BQU8sRUFBRSxFQUFFLEVBQUUsRUFBRSxDQUFDLEVBQUUsSUFBSSxFQUFFLGFBQWEsRUFBRSxVQUFVLEVBQUUsU0FBUyxFQUFFLEVBQUU7SUFDeEYsRUFBRSxPQUFPLEVBQUUsY0FBYyxFQUFFLE9BQU8sRUFBRSxFQUFFLEVBQUUsRUFBRSxDQUFDLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBRSxVQUFVLEVBQUUsZ0JBQWdCLEVBQUUsRUFBRTtJQUM3RixFQUFFLE9BQU8sRUFBRSxjQUFjLEVBQUUsT0FBTyxFQUFFLEVBQUUsRUFBRSxFQUFFLENBQUMsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLFVBQVUsRUFBRSxJQUFJLEVBQUUsRUFBRTtJQUNuRixFQUFFLE9BQU8sRUFBRSxhQUFhLEVBQUUsT0FBTyxFQUFFLEVBQUUsRUFBRSxFQUFFLENBQUMsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLFVBQVUsRUFBRSxVQUFVLEVBQUUsRUFBRTtDQUN6RjtxQkFDUSxDQUFDLGFBQWEsRUFBRSxnQkFBZ0IsQ0FBQzt3QkFDOUIsQ0FBQzsyQkFDRSxnRkFBZ0Y7c0JBQ3JGLENBQUMsQ0FBYyxFQUFFLEVBQUU7SUFDM0IsTUFBTSxPQUFPLEdBQUcsUUFBUSxDQUFDLGFBQWEsQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDO0lBQzFELElBQUksT0FBTyxFQUFFLENBQUM7UUFDWixNQUFNLElBQUksR0FBSSxDQUFDLENBQUMsTUFBYyxDQUFDO1FBQy9CLE1BQU0sVUFBVSxHQUFHLElBQUksQ0FBQyxrQkFBa0IsRUFBRSxDQUFDO1FBQzdDLE9BQU8sQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxVQUFVLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDO0lBQzVELENBQUM7QUFDSCxDQUFDOzs7Ozs7Ozs7Ozs7OzJCQWFjLHNCQUFzQixjQUFjLDhDQUE4Qzs7bUJBRTFGLHFCQUFxQjt5QkFDZix5QkFBeUI7d0JBQzFCO0lBQ1osRUFBRSxPQUFPLEVBQUUsWUFBWSxFQUFFLE9BQU8sRUFBRSxFQUFFLFFBQVEsRUFBRSxVQUFVLEVBQUUsRUFBRTtJQUM1RCxFQUFFLE9BQU8sRUFBRSxPQUFPLEVBQUUsT0FBTyxFQUFFLEVBQUUsUUFBUSxFQUFFLFdBQVcsRUFBRSxFQUFFO0lBQ3hELEVBQUUsT0FBTyxFQUFFLFFBQVEsRUFBRSxPQUFPLEVBQUUsRUFBRSxRQUFRLEVBQUUsV0FBVyxFQUFFLEVBQUU7SUFDekQsRUFBRSxPQUFPLEVBQUUsU0FBUyxFQUFFLE9BQU8sRUFBRSxFQUFFLFFBQVEsRUFBRSxXQUFXLEVBQUUsRUFBRTtJQUMxRCxFQUFFLE9BQU8sRUFBRSxTQUFTLEVBQUUsT0FBTyxFQUFFLEVBQUUsUUFBUSxFQUFFLFNBQVMsRUFBRSxFQUFFO0lBQ3hELEVBQUUsT0FBTyxFQUFFLE1BQU0sRUFBRSxPQUFPLEVBQUUsRUFBRSxRQUFRLEVBQUUsU0FBUyxFQUFFLEVBQUU7SUFDckQsRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE9BQU8sRUFBRSxFQUFFLFFBQVEsRUFBRSxRQUFRLEVBQUUsRUFBRTtJQUN0RCxFQUFFLE9BQU8sRUFBRSxZQUFZLEVBQUUsT0FBTyxFQUFFLEVBQUUsUUFBUSxFQUFFLFVBQVUsRUFBRSxFQUFFO0lBQzVELEVBQUUsT0FBTyxFQUFFLFNBQVMsRUFBRSxPQUFPLEVBQUUsRUFBRSxRQUFRLEVBQUUsVUFBVSxFQUFFLEVBQUU7SUFDekQsRUFBRSxPQUFPLEVBQUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxFQUFFLFFBQVEsRUFBRSxVQUFVLEVBQUUsRUFBRTtJQUN2RCxFQUFFLE9BQU8sRUFBRSxZQUFZLEVBQUUsT0FBTyxFQUFFLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxFQUFFO0NBQzNEO3lCQUNjLHlFQUF5RTs7OzsyQkFJdkUsMkJBQTJCLGNBQWMsMkVBQTJFOzttQkFFNUgsTUFBTTt5QkFDQSxrQ0FBa0M7MkJBQ2hDLElBQUk7d0JBQ1A7SUFDWixFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUsT0FBTyxFQUFFLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxFQUFFO0lBQzdDLEVBQUUsT0FBTyxFQUFFLFNBQVMsRUFBRSxPQUFPLEVBQUUsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLEVBQUU7SUFDbEQsRUFBRSxPQUFPLEVBQUUsTUFBTSxFQUFFLE9BQU8sRUFBRSxFQUFFLEtBQUssRUFBRSxPQUFPLEVBQUUsRUFBRTtJQUNoRCxFQUFFLE9BQU8sRUFBRSxVQUFVLEVBQUUsT0FBTyxFQUFFLEVBQUUsS0FBSyxFQUFFLFFBQVEsRUFBRSxFQUFFO0lBQ3JELEVBQUUsT0FBTyxFQUFFLGFBQWEsRUFBRSxPQUFPLEVBQUUsRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFFLEVBQUU7SUFDeEQsRUFBRSxPQUFPLEVBQUUsVUFBVSxFQUFFLE9BQU8sRUFBRSxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsRUFBRTtDQUNuRDttQkFDUSxDQUFDLEtBQUssRUFBRSxlQUFlLEVBQUUsU0FBUyxDQUFDO3lCQUM3QixzR0FBc0c7Ozs7MkJBSXBHLGlCQUFpQixjQUFjLHVDQUF1Qzs7bUJBRTlFLFlBQVk7eUJBQ04scUJBQXFCO21CQUMzQixFQUFFO3lCQUNJLHVDQUF1Qzs7Ozs7Q0FLL0QsQ0FBQyJ9
355
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC1saXN0LmRlbW8uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1pbnB1dC9kZWVzLWlucHV0LWxpc3QvZGVlcy1pbnB1dC1saXN0LmRlbW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUN4RCxPQUFPLHdDQUF3QyxDQUFDO0FBQ2hELE9BQU8sK0NBQStDLENBQUM7QUFDdkQsT0FBTywyQ0FBMkMsQ0FBQztBQUNuRCxPQUFPLHVDQUF1QyxDQUFDO0FBQy9DLE9BQU8seURBQXlELENBQUM7QUFFakUsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7O1FBRzFCLEdBQUcsQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7T0FpRUo7Ozs7MkJBSW9CLHFCQUFxQixjQUFjLG1EQUFtRDs7bUJBRTlGLGVBQWU7eUJBQ1QsMEJBQTBCO21CQUNoQyxDQUFDLE1BQU0sRUFBRSxPQUFPLEVBQUUsTUFBTSxFQUFFLFFBQVEsQ0FBQzt5QkFDN0Isb0RBQW9EOzs7Ozs7OzJCQU9sRCxrQkFBa0IsY0FBYyxnQ0FBZ0M7O21CQUV4RSxlQUFlO3lCQUNULGVBQWU7c0JBQ2xCLElBQUk7bUJBQ1A7SUFDUCxzQkFBc0I7SUFDdEIsa0JBQWtCO0lBQ2xCLHNCQUFzQjtJQUN0QixzQkFBc0I7SUFDdEIsc0JBQXNCO0NBQ3ZCO3lCQUNjLDZDQUE2Qzs7Ozs7OzsyQkFPM0MsNkJBQTZCLGNBQWMsMkRBQTJEOzs7O3VCQUkxRyw2QkFBNkI7NkJBQ3ZCLG9CQUFvQjswQkFDdkIsQ0FBQzswQkFDRCxDQUFDO3VCQUNKLENBQUMsT0FBTyxFQUFFLEtBQUssQ0FBQzswQkFDYixJQUFJOzZC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
@@ -51,81 +51,83 @@ export const demoFunc = () => html `
51
51
  <div class="section">
52
52
  <div class="section-title">Multi-Option Toggle</div>
53
53
  <div class="section-description">Select from multiple options with a smooth sliding indicator animation.</div>
54
-
55
- <dees-input-multitoggle
56
- .label=${'Display Mode'}
57
- .infoText=${'Choose how content is displayed'}
58
- .description=${'This setting affects how items appear on your dashboard'}
59
- .options=${['List View', 'Grid View', 'Compact']}
60
- .selectedOption=${'Grid View'}
61
- ></dees-input-multitoggle>
62
-
63
- <br><br>
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>
54
+
55
+ <dees-form>
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
+ <dees-input-multitoggle
65
+ .label=${'T-Shirt Size'}
66
+ .infoText=${'Select your preferred size'}
67
+ .options=${['XS', 'S', 'M', 'L', 'XL', 'XXL']}
68
+ .selectedOption=${'M'}
69
+ ></dees-input-multitoggle>
70
+ </dees-form>
71
71
  </div>
72
72
 
73
73
  <div class="section">
74
74
  <div class="section-title">Boolean Toggle</div>
75
75
  <div class="section-description">Simple on/off switches with customizable labels for clearer context.</div>
76
-
77
- <dees-input-multitoggle
78
- .label=${'Notifications'}
79
- .infoText=${'Enable or disable push notifications'}
80
- .type=${'boolean'}
81
- .selectedOption=${'true'}
82
- ></dees-input-multitoggle>
83
-
84
- <br><br>
85
-
86
- <dees-input-multitoggle
87
- .label=${'Theme Mode'}
88
- .infoText=${'Switch between light and dark theme'}
89
- .type=${'boolean'}
90
- .booleanTrueName=${'Dark'}
91
- .booleanFalseName=${'Light'}
92
- .selectedOption=${'Dark'}
93
- ></dees-input-multitoggle>
94
- </div>
95
-
96
- <div class="section">
97
- <div class="section-title">Settings Grid</div>
98
- <div class="section-description">Configuration options arranged in a responsive grid layout.</div>
99
-
100
- <div class="settings-grid">
76
+
77
+ <dees-form>
101
78
  <dees-input-multitoggle
102
- .label=${'Auto-Save'}
79
+ .label=${'Notifications'}
80
+ .infoText=${'Enable or disable push notifications'}
103
81
  .type=${'boolean'}
104
- .booleanTrueName=${'Enabled'}
105
- .booleanFalseName=${'Disabled'}
106
- .selectedOption=${'Enabled'}
82
+ .selectedOption=${'true'}
107
83
  ></dees-input-multitoggle>
108
-
84
+
109
85
  <dees-input-multitoggle
110
- .label=${'Language'}
111
- .options=${['English', 'German', 'French', 'Spanish']}
112
- .selectedOption=${'English'}
113
- ></dees-input-multitoggle>
114
-
115
- <dees-input-multitoggle
116
- .label=${'Quality'}
117
- .options=${['Low', 'Medium', 'High', 'Ultra']}
118
- .selectedOption=${'High'}
119
- ></dees-input-multitoggle>
120
-
121
- <dees-input-multitoggle
122
- .label=${'Privacy'}
86
+ .label=${'Theme Mode'}
87
+ .infoText=${'Switch between light and dark theme'}
123
88
  .type=${'boolean'}
124
- .booleanTrueName=${'Private'}
125
- .booleanFalseName=${'Public'}
126
- .selectedOption=${'Private'}
89
+ .booleanTrueName=${'Dark'}
90
+ .booleanFalseName=${'Light'}
91
+ .selectedOption=${'Dark'}
127
92
  ></dees-input-multitoggle>
128
- </div>
93
+ </dees-form>
94
+ </div>
95
+
96
+ <div class="section">
97
+ <div class="section-title">Settings Grid</div>
98
+ <div class="section-description">Configuration options arranged in a responsive grid layout.</div>
99
+
100
+ <dees-form>
101
+ <div class="settings-grid">
102
+ <dees-input-multitoggle
103
+ .label=${'Auto-Save'}
104
+ .type=${'boolean'}
105
+ .booleanTrueName=${'Enabled'}
106
+ .booleanFalseName=${'Disabled'}
107
+ .selectedOption=${'Enabled'}
108
+ ></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
+
122
+ <dees-input-multitoggle
123
+ .label=${'Privacy'}
124
+ .type=${'boolean'}
125
+ .booleanTrueName=${'Private'}
126
+ .booleanFalseName=${'Public'}
127
+ .selectedOption=${'Private'}
128
+ ></dees-input-multitoggle>
129
+ </div>
130
+ </dees-form>
129
131
  </div>
130
132
 
131
133
  <div class="section">
@@ -161,4 +163,4 @@ export const demoFunc = () => html `
161
163
  </div>
162
164
  </dees-demowrapper>
163
165
  `;
164
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC1tdWx0aXRvZ2dsZS5kZW1vLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vdHNfd2ViL2VsZW1lbnRzLzAwZ3JvdXAtaW5wdXQvZGVlcy1pbnB1dC1tdWx0aXRvZ2dsZS9kZWVzLWlucHV0LW11bHRpdG9nZ2xlLmRlbW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsVUFBVSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFFcEUsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7O1FBRzFCLEdBQUcsQ0FBQTs7Ozs7O3dCQU1hLFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQzs7Ozs7d0JBS3hDLFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQzs4QkFDbEMsVUFBVSxDQUFDLE9BQU8sQ0FBQyxTQUFTLEVBQUUsU0FBUyxDQUFDOzs7Ozs7Ozs7O21CQVVuRCxVQUFVLENBQUMsT0FBTyxDQUFDLFNBQVMsRUFBRSxTQUFTLENBQUM7Ozs7O21CQUt4QyxVQUFVLENBQUMsT0FBTyxDQUFDLFNBQVMsRUFBRSxTQUFTLENBQUM7Ozs7Ozs7Ozs7Ozs7OztPQWVwRDs7Ozs7Ozs7O21CQVNZLGNBQWM7c0JBQ1gsaUNBQWlDO3lCQUM5Qix5REFBeUQ7cUJBQzdELENBQUMsV0FBVyxFQUFFLFdBQVcsRUFBRSxTQUFTLENBQUM7NEJBQzlCLFdBQVc7Ozs7OzttQkFNcEIsY0FBYztzQkFDWCw0QkFBNEI7cUJBQzdCLENBQUMsSUFBSSxFQUFFLEdBQUcsRUFBRSxHQUFHLEVBQUUsR0FBRyxFQUFFLElBQUksRUFBRSxLQUFLLENBQUM7NEJBQzNCLEdBQUc7Ozs7Ozs7OzttQkFTWixlQUFlO3NCQUNaLHNDQUFzQztrQkFDMUMsU0FBUzs0QkFDQyxNQUFNOzs7Ozs7bUJBTWYsWUFBWTtzQkFDVCxxQ0FBcUM7a0JBQ3pDLFNBQVM7NkJBQ0UsTUFBTTs4QkFDTCxPQUFPOzRCQUNULE1BQU07Ozs7Ozs7Ozs7cUJBVWIsV0FBVztvQkFDWixTQUFTOytCQUNFLFNBQVM7Z0NBQ1IsVUFBVTs4QkFDWixTQUFTOzs7O3FCQUlsQixVQUFVO3VCQUNSLENBQUMsU0FBUyxFQUFFLFFBQVEsRUFBRSxRQUFRLEVBQUUsU0FBUyxDQUFDOzhCQUNuQyxTQUFTOzs7O3FCQUlsQixTQUFTO3VCQUNQLENBQUMsS0FBSyxFQUFFLFFBQVEsRUFBRSxNQUFNLEVBQUUsT0FBTyxDQUFDOzhCQUMzQixNQUFNOzs7O3FCQUlmLFNBQVM7b0JBQ1YsU0FBUzsrQkFDRSxTQUFTO2dDQUNSLFFBQVE7OEJBQ1YsU0FBUzs7Ozs7Ozs7OzttQkFVcEIsY0FBYztzQkFDWCx3QkFBd0I7cUJBQ3pCLENBQUMsTUFBTSxFQUFFLEtBQUssRUFBRSxZQUFZLENBQUM7NEJBQ3RCLFlBQVk7c0JBQ2xCLElBQUk7Ozs7OztvQ0FNVSxjQUFjLGNBQWMsSUFBSTs7cUJBRS9DLFlBQVk7b0JBQ2IsU0FBUzsrQkFDRSxRQUFRO2dDQUNQLFNBQVM7OEJBQ1gsU0FBUzs7O3FCQUdsQixTQUFTO3VCQUNQLENBQUMsS0FBSyxFQUFFLFlBQVksRUFBRSxRQUFRLEVBQUUsYUFBYSxDQUFDOzhCQUN2QyxLQUFLOzs7Ozs7Q0FNbEMsQ0FBQyJ9
166
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC1tdWx0aXRvZ2dsZS5kZW1vLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vdHNfd2ViL2VsZW1lbnRzLzAwZ3JvdXAtaW5wdXQvZGVlcy1pbnB1dC1tdWx0aXRvZ2dsZS9kZWVzLWlucHV0LW11bHRpdG9nZ2xlLmRlbW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsVUFBVSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFFcEUsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7O1FBRzFCLEdBQUcsQ0FBQTs7Ozs7O3dCQU1hLFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQzs7Ozs7d0JBS3hDLFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQzs4QkFDbEMsVUFBVSxDQUFDLE9BQU8sQ0FBQyxTQUFTLEVBQUUsU0FBUyxDQUFDOzs7Ozs7Ozs7O21CQVVuRCxVQUFVLENBQUMsT0FBTyxDQUFDLFNBQVMsRUFBRSxTQUFTLENBQUM7Ozs7O21CQUt4QyxVQUFVLENBQUMsT0FBTyxDQUFDLFNBQVMsRUFBRSxTQUFTLENBQUM7Ozs7Ozs7Ozs7Ozs7OztPQWVwRDs7Ozs7Ozs7OztxQkFVYyxjQUFjO3dCQUNYLGlDQUFpQzsyQkFDOUIseURBQXlEO3VCQUM3RCxDQUFDLFdBQVcsRUFBRSxXQUFXLEVBQUUsU0FBUyxDQUFDOzhCQUM5QixXQUFXOzs7O3FCQUlwQixjQUFjO3dCQUNYLDRCQUE0Qjt1QkFDN0IsQ0FBQyxJQUFJLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxHQUFHLEVBQUUsSUFBSSxFQUFFLEtBQUssQ0FBQzs4QkFDM0IsR0FBRzs7Ozs7Ozs7Ozs7cUJBV1osZUFBZTt3QkFDWixzQ0FBc0M7b0JBQzFDLFNBQVM7OEJBQ0MsTUFBTTs7OztxQkFJZixZQUFZO3dCQUNULHFDQUFxQztvQkFDekMsU0FBUzsrQkFDRSxNQUFNO2dDQUNMLE9BQU87OEJBQ1QsTUFBTTs7Ozs7Ozs7Ozs7O3VCQVliLFdBQVc7c0JBQ1osU0FBUztpQ0FDRSxTQUFTO2tDQUNSLFVBQVU7Z0NBQ1osU0FBUzs7Ozt1QkFJbEIsVUFBVTt5QkFDUixDQUFDLFNBQVMsRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLFNBQVMsQ0FBQztnQ0FDbkMsU0FBUzs7Ozt1QkFJbEIsU0FBUzt5QkFDUCxDQUFDLEtBQUssRUFBRSxRQUFRLEVBQUUsTUFBTSxFQUFFLE9BQU8sQ0FBQztnQ0FDM0IsTUFBTTs7Ozt1QkFJZixTQUFTO3NCQUNWLFNBQVM7aUNBQ0UsU0FBUztrQ0FDUixRQUFRO2dDQUNWLFNBQVM7Ozs7Ozs7Ozs7O21CQVd0QixjQUFjO3NCQUNYLHdCQUF3QjtxQkFDekIsQ0FBQyxNQUFNLEVBQUUsS0FBSyxFQUFFLFlBQVksQ0FBQzs0QkFDdEIsWUFBWTtzQkFDbEIsSUFBSTs7Ozs7O29DQU1VLGNBQWMsY0FBYyxJQUFJOztxQkFFL0MsWUFBWTtvQkFDYixTQUFTOytCQUNFLFFBQVE7Z0NBQ1AsU0FBUzs4QkFDWCxTQUFTOzs7cUJBR2xCLFNBQVM7dUJBQ1AsQ0FBQyxLQUFLLEVBQUUsWUFBWSxFQUFFLFFBQVEsRUFBRSxhQUFhLENBQUM7OEJBQ3ZDLEtBQUs7Ozs7OztDQU1sQyxDQUFDIn0=
@@ -12,12 +12,6 @@ export const demoFunc = () => html `
12
12
  margin: 0 auto;
13
13
  }
14
14
 
15
- .input-group {
16
- display: flex;
17
- flex-direction: column;
18
- gap: 16px;
19
- }
20
-
21
15
  .horizontal-group {
22
16
  display: flex;
23
17
  align-items: center;
@@ -29,7 +23,7 @@ export const demoFunc = () => html `
29
23
 
30
24
  <div class="demo-container">
31
25
  <dees-panel .title=${'Basic Phone Input'} .subtitle=${'Automatic formatting for phone numbers'}>
32
- <div class="input-group">
26
+ <dees-form>
33
27
  <dees-input-phone
34
28
  .label=${'Phone Number'}
35
29
  .infoText=${'Enter your phone number with country code'}
@@ -43,27 +37,29 @@ export const demoFunc = () => html `
43
37
  .required=${true}
44
38
  .placeholder=${'+1 (555) 000-0000'}
45
39
  ></dees-input-phone>
46
- </div>
40
+ </dees-form>
47
41
  </dees-panel>
48
42
 
49
43
  <dees-panel .title=${'Horizontal Layout'} .subtitle=${'Phone inputs arranged horizontally'}>
50
- <div class="horizontal-group">
51
- <dees-input-phone
52
- .label=${'Mobile'}
53
- .layoutMode=${'horizontal'}
54
- .value=${'4155551234'}
55
- ></dees-input-phone>
56
-
57
- <dees-input-phone
58
- .label=${'Office'}
59
- .layoutMode=${'horizontal'}
60
- .placeholder=${'+1 (800) 555-0000'}
61
- ></dees-input-phone>
62
- </div>
44
+ <dees-form>
45
+ <div class="horizontal-group">
46
+ <dees-input-phone
47
+ .label=${'Mobile'}
48
+ .layoutMode=${'horizontal'}
49
+ .value=${'4155551234'}
50
+ ></dees-input-phone>
51
+
52
+ <dees-input-phone
53
+ .label=${'Office'}
54
+ .layoutMode=${'horizontal'}
55
+ .placeholder=${'+1 (800) 555-0000'}
56
+ ></dees-input-phone>
57
+ </div>
58
+ </dees-form>
63
59
  </dees-panel>
64
60
 
65
61
  <dees-panel .title=${'International Numbers'} .subtitle=${'Supports formatting for numbers with country codes'}>
66
- <div class="input-group">
62
+ <dees-form>
67
63
  <dees-input-phone
68
64
  .label=${'International Contact'}
69
65
  .infoText=${'Automatically formats international numbers'}
@@ -75,7 +71,7 @@ export const demoFunc = () => html `
75
71
  .value=${'911'}
76
72
  .disabled=${true}
77
73
  ></dees-input-phone>
78
- </div>
74
+ </dees-form>
79
75
  </dees-panel>
80
76
 
81
77
  <dees-panel .title=${'Form Integration'} .subtitle=${'Phone input as part of a contact form'}>
@@ -88,4 +84,4 @@ export const demoFunc = () => html `
88
84
  </div>
89
85
  </dees-demowrapper>
90
86
  `;
91
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC1waG9uZS5kZW1vLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vdHNfd2ViL2VsZW1lbnRzLzAwZ3JvdXAtaW5wdXQvZGVlcy1pbnB1dC1waG9uZS9kZWVzLWlucHV0LXBob25lLmRlbW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUV4RCxNQUFNLENBQUMsTUFBTSxRQUFRLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOzs7UUFHMUIsR0FBRyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O09Bc0JKOzs7OzJCQUlvQixtQkFBbUIsY0FBYyx3Q0FBd0M7OztxQkFHL0UsY0FBYzt3QkFDWCwyQ0FBMkM7MkJBQ3hDLGdEQUFnRDtxQkFDdEQsWUFBWTs7OztxQkFJWixlQUFlO3dCQUNaLG1DQUFtQzt3QkFDbkMsSUFBSTsyQkFDRCxtQkFBbUI7Ozs7OzJCQUtuQixtQkFBbUIsY0FBYyxvQ0FBb0M7OztxQkFHM0UsUUFBUTswQkFDSCxZQUFZO3FCQUNqQixZQUFZOzs7O3FCQUlaLFFBQVE7MEJBQ0gsWUFBWTsyQkFDWCxtQkFBbUI7Ozs7OzJCQUtuQix1QkFBdUIsY0FBYyxvREFBb0Q7OztxQkFHL0YsdUJBQXVCO3dCQUNwQiw2Q0FBNkM7cUJBQ2hELGNBQWM7Ozs7cUJBSWQsbUJBQW1CO3FCQUNuQixLQUFLO3dCQUNGLElBQUk7Ozs7OzJCQUtELGtCQUFrQixjQUFjLHVDQUF1Qzs7b0NBRTlELFdBQVcsY0FBYyxJQUFJO3FDQUM1QixjQUFjLGNBQWMsSUFBSTtvQ0FDakMsT0FBTyxlQUFlLE9BQU87Ozs7O0NBS2hFLENBQUMifQ==
87
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC1waG9uZS5kZW1vLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vdHNfd2ViL2VsZW1lbnRzLzAwZ3JvdXAtaW5wdXQvZGVlcy1pbnB1dC1waG9uZS9kZWVzLWlucHV0LXBob25lLmRlbW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUV4RCxNQUFNLENBQUMsTUFBTSxRQUFRLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOzs7UUFHMUIsR0FBRyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7O09BZ0JKOzs7OzJCQUlvQixtQkFBbUIsY0FBYyx3Q0FBd0M7OztxQkFHL0UsY0FBYzt3QkFDWCwyQ0FBMkM7MkJBQ3hDLGdEQUFnRDtxQkFDdEQsWUFBWTs7OztxQkFJWixlQUFlO3dCQUNaLG1DQUFtQzt3QkFDbkMsSUFBSTsyQkFDRCxtQkFBbUI7Ozs7OzJCQUtuQixtQkFBbUIsY0FBYyxvQ0FBb0M7Ozs7dUJBSXpFLFFBQVE7NEJBQ0gsWUFBWTt1QkFDakIsWUFBWTs7Ozt1QkFJWixRQUFROzRCQUNILFlBQVk7NkJBQ1gsbUJBQW1COzs7Ozs7MkJBTXJCLHVCQUF1QixjQUFjLG9EQUFvRDs7O3FCQUcvRix1QkFBdUI7d0JBQ3BCLDZDQUE2QztxQkFDaEQsY0FBYzs7OztxQkFJZCxtQkFBbUI7cUJBQ25CLEtBQUs7d0JBQ0YsSUFBSTs7Ozs7MkJBS0Qsa0JBQWtCLGNBQWMsdUNBQXVDOztvQ0FFOUQsV0FBVyxjQUFjLElBQUk7cUNBQzVCLGNBQWMsY0FBYyxJQUFJO29DQUNqQyxPQUFPLGVBQWUsT0FBTzs7Ozs7Q0FLaEUsQ0FBQyJ9
@@ -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
  .shopping-grid {
23
17
  display: grid;
24
18
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
@@ -65,7 +59,7 @@ export const demoFunc = () => html `
65
59
 
66
60
  <div class="demo-container">
67
61
  <dees-panel .title=${'Basic Quantity Selector'} .subtitle=${'Simple quantity input with increment/decrement buttons'}>
68
- <div class="input-group">
62
+ <dees-form>
69
63
  <dees-input-quantityselector
70
64
  .label=${'Quantity'}
71
65
  .infoText=${'Select the desired quantity'}
@@ -78,7 +72,7 @@ export const demoFunc = () => html `
78
72
  .infoText=${'Adjust the quantity of items'}
79
73
  .value=${3}
80
74
  ></dees-input-quantityselector>
81
- </div>
75
+ </dees-form>
82
76
  </dees-panel>
83
77
 
84
78
  <dees-panel .title=${'Shopping Cart'} .subtitle=${'Modern e-commerce product cards with interactive quantity selectors'} .runAfterRender=${async (elementArg) => {
@@ -172,7 +166,7 @@ export const demoFunc = () => html `
172
166
  </dees-panel>
173
167
 
174
168
  <dees-panel .title=${'Required & Disabled States'} .subtitle=${'Different states for validation and restrictions'}>
175
- <div class="input-group">
169
+ <dees-form>
176
170
  <dees-input-quantityselector
177
171
  .label=${'Number of Licenses'}
178
172
  .infoText=${'Select how many licenses you need'}
@@ -186,7 +180,7 @@ export const demoFunc = () => html `
186
180
  .disabled=${true}
187
181
  .value=${5}
188
182
  ></dees-input-quantityselector>
189
- </div>
183
+ </dees-form>
190
184
  </dees-panel>
191
185
 
192
186
  <dees-panel .title=${'Order Form'} .subtitle=${'Complete order form with quantity selection'}>
@@ -211,4 +205,4 @@ export const demoFunc = () => html `
211
205
  </div>
212
206
  </dees-demowrapper>
213
207
  `;
214
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC1xdWFudGl0eXNlbGVjdG9yLmRlbW8uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1pbnB1dC9kZWVzLWlucHV0LXF1YW50aXR5c2VsZWN0b3IvZGVlcy1pbnB1dC1xdWFudGl0eXNlbGVjdG9yLmRlbW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsVUFBVSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDcEUsT0FBTyw2RUFBNkUsQ0FBQztBQUVyRixNQUFNLENBQUMsTUFBTSxRQUFRLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOzs7UUFHMUIsR0FBRyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O3dCQXlCYSxVQUFVLENBQUMsT0FBTyxDQUFDLG9CQUFvQixFQUFFLHNCQUFzQixDQUFDOzhCQUMxRCxVQUFVLENBQUMsT0FBTyxDQUFDLHdCQUF3QixFQUFFLHNCQUFzQixDQUFDOzs7Ozs7OzttQkFRL0UsVUFBVSxDQUFDLE9BQU8sQ0FBQyxjQUFjLEVBQUUsZUFBZSxDQUFDOzs7Ozs7Ozs7bUJBU25ELFVBQVUsQ0FBQyxPQUFPLENBQUMsc0JBQXNCLEVBQUUsd0JBQXdCLENBQUM7Ozs7Ozs7OztrQ0FTckQsVUFBVSxDQUFDLE9BQU8sQ0FBQyxpQkFBaUIsRUFBRSxpQkFBaUIsQ0FBQzs7O21CQUd2RSxVQUFVLENBQUMsT0FBTyxDQUFDLGNBQWMsRUFBRSxlQUFlLENBQUM7O09BRS9EOzs7OzJCQUlvQix5QkFBeUIsY0FBYyx3REFBd0Q7OztxQkFHckcsVUFBVTt3QkFDUCw2QkFBNkI7MkJBQzFCLGtDQUFrQztxQkFDeEMsQ0FBQzs7OztxQkFJRCxlQUFlO3dCQUNaLDhCQUE4QjtxQkFDakMsQ0FBQzs7Ozs7MkJBS0ssZUFBZSxjQUFjLHFFQUFxRSxvQkFBb0IsS0FBSyxFQUFFLFVBQXVC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
208
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC1xdWFudGl0eXNlbGVjdG9yLmRlbW8uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1pbnB1dC9kZWVzLWlucHV0LXF1YW50aXR5c2VsZWN0b3IvZGVlcy1pbnB1dC1xdWFudGl0eXNlbGVjdG9yLmRlbW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsVUFBVSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDcEUsT0FBTyw2RUFBNkUsQ0FBQztBQUVyRixNQUFNLENBQUMsTUFBTSxRQUFRLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOzs7UUFHMUIsR0FBRyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7O3dCQW1CYSxVQUFVLENBQUMsT0FBTyxDQUFDLG9CQUFvQixFQUFFLHNCQUFzQixDQUFDOzhCQUMxRCxVQUFVLENBQUMsT0FBTyxDQUFDLHdCQUF3QixFQUFFLHNCQUFzQixDQUFDOzs7Ozs7OzttQkFRL0UsVUFBVSxDQUFDLE9BQU8sQ0FBQyxjQUFjLEVBQUUsZUFBZSxDQUFDOzs7Ozs7Ozs7bUJBU25ELFVBQVUsQ0FBQyxPQUFPLENBQUMsc0JBQXNCLEVBQUUsd0JBQXdCLENBQUM7Ozs7Ozs7OztrQ0FTckQsVUFBVSxDQUFDLE9BQU8sQ0FBQyxpQkFBaUIsRUFBRSxpQkFBaUIsQ0FBQzs7O21CQUd2RSxVQUFVLENBQUMsT0FBTyxDQUFDLGNBQWMsRUFBRSxlQUFlLENBQUM7O09BRS9EOzs7OzJCQUlvQix5QkFBeUIsY0FBYyx3REFBd0Q7OztxQkFHckcsVUFBVTt3QkFDUCw2QkFBNkI7MkJBQzFCLGtDQUFrQztxQkFDeEMsQ0FBQzs7OztxQkFJRCxlQUFlO3dCQUNaLDhCQUE4QjtxQkFDakMsQ0FBQzs7Ozs7MkJBS0ssZUFBZSxjQUFjLHFFQUFxRSxvQkFBb0IsS0FBSyxFQUFFLFVBQXVCLEVBQUUs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