snice 1.14.3 → 2.1.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 (185) hide show
  1. package/bin/templates/base/tsconfig.json +5 -4
  2. package/components/accordion/demo.html +403 -0
  3. package/components/accordion/snice-accordion-item.css +85 -0
  4. package/components/accordion/snice-accordion-item.ts +226 -0
  5. package/components/accordion/snice-accordion.css +31 -0
  6. package/components/accordion/snice-accordion.ts +182 -0
  7. package/components/accordion/snice-accordion.types.ts +32 -0
  8. package/components/alert/demo.html +445 -0
  9. package/components/alert/snice-alert.css +195 -0
  10. package/components/alert/snice-alert.ts +141 -0
  11. package/components/alert/snice-alert.types.ts +12 -0
  12. package/components/avatar/demo.html +598 -0
  13. package/components/avatar/snice-avatar.css +131 -0
  14. package/components/avatar/snice-avatar.ts +136 -0
  15. package/components/avatar/snice-avatar.types.ts +13 -0
  16. package/components/badge/demo.html +523 -0
  17. package/components/badge/snice-badge.css +161 -0
  18. package/components/badge/snice-badge.ts +117 -0
  19. package/components/badge/snice-badge.types.ts +16 -0
  20. package/components/breadcrumbs/demo.html +404 -0
  21. package/components/breadcrumbs/snice-breadcrumbs.css +133 -0
  22. package/components/breadcrumbs/snice-breadcrumbs.ts +191 -0
  23. package/components/breadcrumbs/snice-breadcrumbs.types.ts +26 -0
  24. package/components/breadcrumbs/snice-crumb.ts +26 -0
  25. package/components/button/demo.html +42 -0
  26. package/components/button/snice-button.css +230 -0
  27. package/components/button/snice-button.ts +169 -0
  28. package/components/button/snice-button.types.ts +25 -0
  29. package/components/card/demo.html +525 -0
  30. package/components/card/snice-card.css +140 -0
  31. package/components/card/snice-card.ts +102 -0
  32. package/components/card/snice-card.types.ts +10 -0
  33. package/components/checkbox/demo.html +253 -0
  34. package/components/checkbox/snice-checkbox.css +164 -0
  35. package/components/checkbox/snice-checkbox.ts +223 -0
  36. package/components/checkbox/snice-checkbox.types.ts +22 -0
  37. package/components/chip/demo.html +383 -0
  38. package/components/chip/snice-chip.css +195 -0
  39. package/components/chip/snice-chip.ts +139 -0
  40. package/components/chip/snice-chip.types.ts +15 -0
  41. package/components/date-picker/README.md +233 -0
  42. package/components/date-picker/demo.html +191 -0
  43. package/components/date-picker/snice-date-picker.css +330 -0
  44. package/components/date-picker/snice-date-picker.ts +777 -0
  45. package/components/date-picker/snice-date-picker.types.ts +83 -0
  46. package/components/divider/demo.html +233 -0
  47. package/components/divider/snice-divider.css +155 -0
  48. package/components/divider/snice-divider.ts +69 -0
  49. package/components/divider/snice-divider.types.ts +15 -0
  50. package/components/drawer/demo.html +328 -0
  51. package/components/drawer/snice-drawer.css +476 -0
  52. package/components/drawer/snice-drawer.ts +287 -0
  53. package/components/drawer/snice-drawer.types.ts +17 -0
  54. package/components/global.d.ts +14 -0
  55. package/components/input/demo.html +303 -0
  56. package/components/input/snice-input.css +257 -0
  57. package/components/input/snice-input.ts +442 -0
  58. package/components/input/snice-input.types.ts +59 -0
  59. package/components/input/test.html +77 -0
  60. package/components/layout/README.md +260 -0
  61. package/components/layout/demo.html +538 -0
  62. package/components/layout/snice-layout-blog.css +129 -0
  63. package/components/layout/snice-layout-blog.ts +48 -0
  64. package/components/layout/snice-layout-card.css +104 -0
  65. package/components/layout/snice-layout-card.ts +35 -0
  66. package/components/layout/snice-layout-centered.css +51 -0
  67. package/components/layout/snice-layout-centered.ts +22 -0
  68. package/components/layout/snice-layout-dashboard.css +98 -0
  69. package/components/layout/snice-layout-dashboard.ts +45 -0
  70. package/components/layout/snice-layout-fullscreen.css +72 -0
  71. package/components/layout/snice-layout-fullscreen.ts +34 -0
  72. package/components/layout/snice-layout-landing.css +92 -0
  73. package/components/layout/snice-layout-landing.ts +47 -0
  74. package/components/layout/snice-layout-minimal.css +16 -0
  75. package/components/layout/snice-layout-minimal.ts +19 -0
  76. package/components/layout/snice-layout-sidebar.css +117 -0
  77. package/components/layout/snice-layout-sidebar.ts +48 -0
  78. package/components/layout/snice-layout-split.css +103 -0
  79. package/components/layout/snice-layout-split.ts +29 -0
  80. package/components/layout/snice-layout.css +72 -0
  81. package/components/layout/snice-layout.ts +35 -0
  82. package/components/layout/snice-layout.types.ts +5 -0
  83. package/components/login/demo-auth-controller.ts +185 -0
  84. package/components/login/demo.html +470 -0
  85. package/components/login/snice-login.css +204 -0
  86. package/components/login/snice-login.ts +337 -0
  87. package/components/login/snice-login.types.ts +34 -0
  88. package/components/modal/demo.html +291 -0
  89. package/components/modal/snice-modal.css +203 -0
  90. package/components/modal/snice-modal.ts +233 -0
  91. package/components/modal/snice-modal.types.ts +21 -0
  92. package/components/pagination/demo.html +395 -0
  93. package/components/pagination/snice-pagination.ts +333 -0
  94. package/components/pagination/snice-pagination.types.ts +21 -0
  95. package/components/progress/demo.html +510 -0
  96. package/components/progress/snice-progress.css +267 -0
  97. package/components/progress/snice-progress.ts +247 -0
  98. package/components/progress/snice-progress.types.ts +19 -0
  99. package/components/radio/demo.html +287 -0
  100. package/components/radio/snice-radio.css +171 -0
  101. package/components/radio/snice-radio.ts +218 -0
  102. package/components/radio/snice-radio.types.ts +21 -0
  103. package/components/select/demo.html +511 -0
  104. package/components/select/snice-option.ts +52 -0
  105. package/components/select/snice-option.types.ts +14 -0
  106. package/components/select/snice-select.css +392 -0
  107. package/components/select/snice-select.ts +796 -0
  108. package/components/select/snice-select.types.ts +55 -0
  109. package/components/skeleton/demo.html +514 -0
  110. package/components/skeleton/snice-skeleton.css +109 -0
  111. package/components/skeleton/snice-skeleton.ts +126 -0
  112. package/components/skeleton/snice-skeleton.types.ts +11 -0
  113. package/components/switch/demo.html +284 -0
  114. package/components/switch/snice-switch.css +221 -0
  115. package/components/switch/snice-switch.ts +229 -0
  116. package/components/switch/snice-switch.types.ts +23 -0
  117. package/components/symbols.ts +23 -0
  118. package/components/table/demo-table-controller.ts +100 -0
  119. package/components/table/demo.html +480 -0
  120. package/components/table/snice-cell-boolean.ts +112 -0
  121. package/components/table/snice-cell-date.ts +210 -0
  122. package/components/table/snice-cell-duration.ts +91 -0
  123. package/components/table/snice-cell-filesize.ts +90 -0
  124. package/components/table/snice-cell-number.ts +165 -0
  125. package/components/table/snice-cell-progress.ts +83 -0
  126. package/components/table/snice-cell-rating.ts +82 -0
  127. package/components/table/snice-cell-sparkline.ts +253 -0
  128. package/components/table/snice-cell-text.ts +125 -0
  129. package/components/table/snice-cell.css +296 -0
  130. package/components/table/snice-cell.ts +473 -0
  131. package/components/table/snice-column.ts +353 -0
  132. package/components/table/snice-header.css +243 -0
  133. package/components/table/snice-header.ts +261 -0
  134. package/components/table/snice-progress.ts +66 -0
  135. package/components/table/snice-rating.ts +45 -0
  136. package/components/table/snice-row.css +255 -0
  137. package/components/table/snice-row.ts +331 -0
  138. package/components/table/snice-table.css +241 -0
  139. package/components/table/snice-table.ts +737 -0
  140. package/components/table/snice-table.types.ts +158 -0
  141. package/components/tabs/demo.html +487 -0
  142. package/components/tabs/snice-tab-panel.css +264 -0
  143. package/components/tabs/snice-tab-panel.ts +47 -0
  144. package/components/tabs/snice-tab.css +96 -0
  145. package/components/tabs/snice-tab.ts +65 -0
  146. package/components/tabs/snice-tabs.css +189 -0
  147. package/components/tabs/snice-tabs.ts +332 -0
  148. package/components/tabs/snice-tabs.types.ts +28 -0
  149. package/components/theme/theme.css +234 -0
  150. package/components/toast/demo.html +329 -0
  151. package/components/toast/snice-toast-container.ts +256 -0
  152. package/components/toast/snice-toast.css +213 -0
  153. package/components/toast/snice-toast.ts +276 -0
  154. package/components/toast/snice-toast.types.ts +35 -0
  155. package/components/tooltip/demo.html +350 -0
  156. package/components/tooltip/snice-tooltip-portal.css +79 -0
  157. package/components/tooltip/snice-tooltip.css +117 -0
  158. package/components/tooltip/snice-tooltip.ts +612 -0
  159. package/components/tooltip/snice-tooltip.types.ts +32 -0
  160. package/components/transitions.ts +94 -0
  161. package/components/tsconfig.json +18 -0
  162. package/dist/index.cjs +441 -329
  163. package/dist/index.cjs.map +1 -1
  164. package/dist/index.cjs.min.map +1 -1
  165. package/dist/index.esm.js +441 -329
  166. package/dist/index.esm.js.map +1 -1
  167. package/dist/index.esm.min.js +3 -3
  168. package/dist/index.esm.min.js.map +1 -1
  169. package/dist/index.iife.js +441 -329
  170. package/dist/index.iife.js.map +1 -1
  171. package/dist/index.iife.min.js +3 -3
  172. package/dist/index.iife.min.js.map +1 -1
  173. package/dist/symbols.esm.js +1 -1
  174. package/dist/transitions.esm.js +1 -1
  175. package/dist/types/controller.d.ts +1 -1
  176. package/dist/types/element.d.ts +10 -10
  177. package/dist/types/events.d.ts +2 -2
  178. package/dist/types/index.d.ts +1 -1
  179. package/dist/types/observe.d.ts +1 -1
  180. package/dist/types/request-response.d.ts +2 -3
  181. package/dist/types/router.d.ts +1 -1
  182. package/package.json +9 -3
  183. package/dist/index.cjs.min +0 -15
  184. package/dist/symbols.cjs +0 -103
  185. package/dist/transitions.cjs +0 -219
package/components/date-picker/demo.html ADDED
@@ -0,0 +1,191 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Date Picker Test</title>
7
+ <link rel="stylesheet" href="../theme/theme.css">
8
+ <style>
9
+ body {
10
+ font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
11
+ padding: var(--snice-spacing-xl, 2rem);
12
+ background: var(--snice-color-background, #f9fafb);
13
+ color: var(--snice-color-text, #374151);
14
+ }
15
+
16
+ .container {
17
+ max-width: 600px;
18
+ margin: 0 auto;
19
+ background: var(--snice-color-background-element, white);
20
+ padding: var(--snice-spacing-xl, 2rem);
21
+ border-radius: var(--snice-border-radius-lg, 8px);
22
+ box-shadow: var(--snice-shadow-sm, 0 1px 3px rgba(0,0,0,0.1));
23
+ }
24
+
25
+ .test-section {
26
+ margin-bottom: var(--snice-spacing-xl, 2rem);
27
+ padding: var(--snice-spacing-lg, 1.5rem);
28
+ border: 1px solid var(--snice-color-border, #e5e7eb);
29
+ border-radius: var(--snice-border-radius-lg, 6px);
30
+ background: var(--snice-color-background-secondary, #f9fafb);
31
+ }
32
+
33
+ .test-section h3 {
34
+ margin: 0 0 var(--snice-spacing-md, 1rem) 0;
35
+ color: var(--snice-color-text, #374151);
36
+ font-weight: var(--snice-font-weight-semibold, 600);
37
+ }
38
+
39
+ .form-grid {
40
+ display: grid;
41
+ gap: var(--snice-spacing-md, 1rem);
42
+ }
43
+
44
+ .form-row {
45
+ display: grid;
46
+ grid-template-columns: 1fr 1fr;
47
+ gap: var(--snice-spacing-md, 1rem);
48
+ }
49
+
50
+ @media (max-width: 640px) {
51
+ .form-row {
52
+ grid-template-columns: 1fr;
53
+ }
54
+ }
55
+ </style>
56
+ </head>
57
+ <body>
58
+ <div class="container">
59
+ <h1>Snice Date Picker Component Test</h1>
60
+
61
+ <div class="test-section">
62
+ <h3>Basic Date Picker</h3>
63
+ <div class="form-grid">
64
+ <snice-date-picker
65
+ label="Select Date"
66
+ placeholder="Choose a date"
67
+ clearable>
68
+ </snice-date-picker>
69
+ </div>
70
+ </div>
71
+
72
+ <div class="test-section">
73
+ <h3>Different Formats</h3>
74
+ <div class="form-grid">
75
+ <snice-date-picker
76
+ label="US Format (MM/DD/YYYY)"
77
+ format="mm/dd/yyyy">
78
+ </snice-date-picker>
79
+
80
+ <snice-date-picker
81
+ label="European Format (DD/MM/YYYY)"
82
+ format="dd/mm/yyyy">
83
+ </snice-date-picker>
84
+
85
+ <snice-date-picker
86
+ label="ISO Format (YYYY-MM-DD)"
87
+ format="yyyy-mm-dd">
88
+ </snice-date-picker>
89
+
90
+ <snice-date-picker
91
+ label="Long Format (Month DD, YYYY)"
92
+ format="mmmm dd, yyyy">
93
+ </snice-date-picker>
94
+ </div>
95
+ </div>
96
+
97
+ <div class="test-section">
98
+ <h3>Sizes and Variants</h3>
99
+ <div class="form-grid">
100
+ <div class="form-row">
101
+ <snice-date-picker
102
+ label="Small Outlined"
103
+ size="small"
104
+ variant="outlined">
105
+ </snice-date-picker>
106
+
107
+ <snice-date-picker
108
+ label="Medium Filled"
109
+ size="medium"
110
+ variant="filled">
111
+ </snice-date-picker>
112
+ </div>
113
+
114
+ <div class="form-row">
115
+ <snice-date-picker
116
+ label="Large Underlined"
117
+ size="large"
118
+ variant="underlined">
119
+ </snice-date-picker>
120
+ </div>
121
+ </div>
122
+ </div>
123
+
124
+ <div class="test-section">
125
+ <h3>With Constraints</h3>
126
+ <div class="form-grid">
127
+ <snice-date-picker
128
+ label="Date Range (This Month Only)"
129
+ min="2024-12-01"
130
+ max="2024-12-31"
131
+ helper-text="Only dates in December 2024 are allowed">
132
+ </snice-date-picker>
133
+ </div>
134
+ </div>
135
+
136
+ <div class="test-section">
137
+ <h3>States</h3>
138
+ <div class="form-grid">
139
+ <div class="form-row">
140
+ <snice-date-picker
141
+ label="Required Field"
142
+ required
143
+ helper-text="This field is required">
144
+ </snice-date-picker>
145
+
146
+ <snice-date-picker
147
+ label="With Error"
148
+ invalid
149
+ error-text="Please select a valid date">
150
+ </snice-date-picker>
151
+ </div>
152
+
153
+ <div class="form-row">
154
+ <snice-date-picker
155
+ label="Disabled"
156
+ disabled
157
+ value="2024-12-25">
158
+ </snice-date-picker>
159
+
160
+ <snice-date-picker
161
+ label="Read Only"
162
+ readonly
163
+ value="2024-12-25">
164
+ </snice-date-picker>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </div>
169
+
170
+ <script type="module">
171
+ import './snice-date-picker.ts';
172
+
173
+ // Event listeners for component interaction
174
+ document.addEventListener('@snice/datepicker-change', (e) => {
175
+ // Handle date changes
176
+ });
177
+
178
+ document.addEventListener('@snice/datepicker-select', (e) => {
179
+ // Handle date selection
180
+ });
181
+
182
+ document.addEventListener('@snice/datepicker-open', (e) => {
183
+ // Handle calendar open
184
+ });
185
+
186
+ document.addEventListener('@snice/datepicker-close', (e) => {
187
+ // Handle calendar close
188
+ });
189
+ </script>
190
+ </body>
191
+ </html>
package/components/date-picker/snice-date-picker.css ADDED
@@ -0,0 +1,330 @@
1
+ /* Date Picker Component Styles */
2
+ :host {
3
+ display: block;
4
+ position: relative;
5
+ font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
6
+ font-size: var(--snice-font-size-sm, 14px);
7
+ line-height: var(--snice-line-height-normal, 1.4);
8
+ min-height: 40px;
9
+ }
10
+
11
+ /* Wrapper */
12
+ .date-picker-wrapper {
13
+ display: flex;
14
+ flex-direction: column;
15
+ gap: 0.5rem;
16
+ }
17
+
18
+ /* Label */
19
+ .label {
20
+ font-weight: var(--snice-font-weight-medium, 500);
21
+ color: var(--snice-color-text, #374151);
22
+ margin-bottom: var(--snice-spacing-2xs, 0.25rem);
23
+ }
24
+
25
+ .label--required::after {
26
+ content: '*';
27
+ color: var(--snice-color-danger, #ef4444);
28
+ margin-left: var(--snice-spacing-2xs, 0.25rem);
29
+ }
30
+
31
+ /* Input Container */
32
+ .input-container {
33
+ position: relative;
34
+ display: flex;
35
+ align-items: center;
36
+ }
37
+
38
+ /* Input Styles */
39
+ .input {
40
+ width: 100%;
41
+ border: 1px solid var(--snice-color-border, #d1d5db);
42
+ border-radius: var(--snice-border-radius-lg, 6px);
43
+ padding: var(--snice-spacing-xs, 0.5rem) 3rem var(--snice-spacing-xs, 0.5rem) var(--snice-spacing-sm, 0.75rem);
44
+ font-size: inherit;
45
+ line-height: var(--snice-line-height-normal, 1.5);
46
+ background: var(--snice-color-background, white);
47
+ color: var(--snice-color-text, #374151);
48
+ transition: border-color var(--snice-transition-fast, 0.15s) ease, box-shadow var(--snice-transition-fast, 0.15s) ease;
49
+ }
50
+
51
+ .input:focus {
52
+ outline: none;
53
+ border-color: var(--snice-color-border-focus, #2563eb);
54
+ box-shadow: 0 0 0 var(--snice-focus-ring-width, 3px) var(--snice-focus-ring-color, rgba(37, 99, 235, 0.1));
55
+ }
56
+
57
+ .input--small {
58
+ padding: 0.375rem 2.75rem 0.375rem 0.625rem;
59
+ font-size: 0.875rem;
60
+ }
61
+
62
+ .input--large {
63
+ padding: 0.75rem 3.5rem 0.75rem 1rem;
64
+ font-size: 1rem;
65
+ }
66
+
67
+ .input--filled {
68
+ background: var(--snice-color-background-secondary, #f9fafb);
69
+ border: 1px solid transparent;
70
+ }
71
+
72
+ .input--underlined {
73
+ border: none;
74
+ border-bottom: 1px solid #d1d5db;
75
+ border-radius: 0;
76
+ background: transparent;
77
+ padding-left: 0;
78
+ }
79
+
80
+ .input--invalid {
81
+ border-color: #ef4444;
82
+ }
83
+
84
+ .input--invalid:focus {
85
+ border-color: #ef4444;
86
+ box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
87
+ }
88
+
89
+ .input:disabled {
90
+ background: var(--snice-color-background-secondary, #f9fafb);
91
+ color: var(--snice-color-text-tertiary, #9ca3af);
92
+ cursor: not-allowed;
93
+ }
94
+
95
+ .input:not(:disabled):not([readonly]) {
96
+ cursor: pointer;
97
+ }
98
+
99
+ /* Button Styles */
100
+ .calendar-toggle,
101
+ .clear-button {
102
+ position: absolute;
103
+ right: 0.5rem;
104
+ padding: 0.25rem /* 4px */;
105
+ border: none;
106
+ background: transparent;
107
+ color: #6b7280;
108
+ cursor: pointer;
109
+ border-radius: 4px;
110
+ transition: color 0.15s ease, background-color 0.15s ease;
111
+ }
112
+
113
+ .calendar-toggle {
114
+ right: 0.5rem;
115
+ }
116
+
117
+ .clear-button {
118
+ right: 2.5rem;
119
+ }
120
+
121
+ .calendar-toggle:hover,
122
+ .clear-button:hover {
123
+ color: #374151;
124
+ background: #f3f4f6;
125
+ }
126
+
127
+ .calendar-toggle:disabled,
128
+ .clear-button:disabled {
129
+ opacity: 0.5;
130
+ cursor: not-allowed;
131
+ }
132
+
133
+ /* Calendar Popup */
134
+ .calendar {
135
+ position: absolute;
136
+ top: 100%;
137
+ left: 0;
138
+ right: 0;
139
+ z-index: var(--snice-z-index-dropdown, 1000);
140
+ background: var(--snice-color-background-element, rgb(252, 251, 249));
141
+ border: 1px solid var(--snice-color-border, #d1d5db);
142
+ border-radius: var(--snice-border-radius-lg, 8px);
143
+ box-shadow: var(--snice-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
144
+ margin-top: var(--snice-spacing-3xs, 0.125rem);
145
+ padding: var(--snice-spacing-md, 1rem);
146
+ min-width: 280px;
147
+ }
148
+
149
+ .calendar[hidden] {
150
+ display: none;
151
+ }
152
+
153
+ /* Calendar Header */
154
+ .calendar-header {
155
+ display: flex;
156
+ align-items: center;
157
+ justify-content: space-between;
158
+ margin-bottom: 1rem;
159
+ }
160
+
161
+ .calendar-title {
162
+ flex: 1;
163
+ text-align: center;
164
+ }
165
+
166
+ .month-button {
167
+ background: none;
168
+ border: none;
169
+ font-size: var(--snice-font-size-md, 1rem);
170
+ font-weight: var(--snice-font-weight-semibold, 600);
171
+ color: var(--snice-color-text, #374151);
172
+ cursor: pointer;
173
+ padding: var(--snice-spacing-2xs, 0.25rem) var(--snice-spacing-xs, 0.5rem);
174
+ border-radius: var(--snice-border-radius-md, 4px);
175
+ transition: background-color var(--snice-transition-fast, 0.15s) ease;
176
+ }
177
+
178
+ .month-button:hover {
179
+ background: var(--snice-color-background-tertiary, #f3f4f6);
180
+ }
181
+
182
+ .nav-button {
183
+ background: none;
184
+ border: none;
185
+ padding: 0.5rem;
186
+ cursor: pointer;
187
+ color: #6b7280;
188
+ border-radius: 4px;
189
+ transition: color 0.15s ease, background-color 0.15s ease;
190
+ }
191
+
192
+ .nav-button:hover {
193
+ color: #374151;
194
+ background: #f3f4f6;
195
+ }
196
+
197
+ /* Calendar Grid */
198
+ .calendar-weekdays {
199
+ display: grid;
200
+ grid-template-columns: repeat(7, 1fr);
201
+ gap: 0.25rem /* 4px */;
202
+ margin-bottom: 0.5rem;
203
+ }
204
+
205
+ .weekday {
206
+ text-align: center;
207
+ font-size: 0.75rem;
208
+ font-weight: 600;
209
+ color: #6b7280;
210
+ padding: 0.5rem 0.25rem;
211
+ }
212
+
213
+ .calendar-days {
214
+ display: grid;
215
+ grid-template-columns: repeat(7, 1fr);
216
+ gap: 0.25rem /* 4px */;
217
+ }
218
+
219
+ .day {
220
+ width: 32px;
221
+ height: 32px;
222
+ border: none;
223
+ background: none;
224
+ cursor: pointer;
225
+ border-radius: var(--snice-border-radius-md, 4px);
226
+ font-size: var(--snice-font-size-sm, 0.875rem);
227
+ color: var(--snice-color-text, #374151);
228
+ transition: background-color var(--snice-transition-fast, 0.15s) ease, color var(--snice-transition-fast, 0.15s) ease;
229
+ display: flex;
230
+ align-items: center;
231
+ justify-content: center;
232
+ }
233
+
234
+ .day:hover:not(.day--disabled) {
235
+ background: var(--snice-color-background-tertiary, #f3f4f6);
236
+ }
237
+
238
+ .day--today {
239
+ background: var(--snice-color-primary-light, #dbeafe);
240
+ color: var(--snice-color-primary, #2563eb);
241
+ font-weight: var(--snice-font-weight-semibold, 600);
242
+ }
243
+
244
+ .day--selected {
245
+ background: var(--snice-color-primary, #2563eb);
246
+ color: var(--snice-color-text-inverse, white);
247
+ font-weight: var(--snice-font-weight-semibold, 600);
248
+ }
249
+
250
+ .day--disabled {
251
+ color: #d1d5db;
252
+ cursor: not-allowed;
253
+ }
254
+
255
+ .day--empty {
256
+ cursor: default;
257
+ }
258
+
259
+ /* Calendar Footer */
260
+ .calendar-footer {
261
+ margin-top: 1rem;
262
+ padding-top: 1rem;
263
+ border-top: 1px solid #f3f4f6;
264
+ display: flex;
265
+ justify-content: center;
266
+ }
267
+
268
+ .today-button {
269
+ background: none;
270
+ border: 1px solid #d1d5db;
271
+ padding: 0.5rem 1rem;
272
+ font-size: 0.875rem;
273
+ color: #374151;
274
+ cursor: pointer;
275
+ border-radius: 4px;
276
+ transition: background-color 0.15s ease, border-color 0.15s ease;
277
+ }
278
+
279
+ .today-button:hover {
280
+ background: #f9fafb;
281
+ border-color: #9ca3af;
282
+ }
283
+
284
+ /* Helper/Error Text */
285
+ .helper-text,
286
+ .error-text {
287
+ font-size: var(--snice-font-size-sm, 0.875rem);
288
+ margin-top: var(--snice-spacing-2xs, 0.25rem);
289
+ }
290
+
291
+ .helper-text {
292
+ color: var(--snice-color-text-secondary, #6b7280);
293
+ }
294
+
295
+ .error-text {
296
+ color: var(--snice-color-danger, #ef4444);
297
+ }
298
+
299
+ /* Size variants */
300
+ :host([size="small"]) .calendar {
301
+ min-width: 240px;
302
+ padding: 0.75rem;
303
+ }
304
+
305
+ :host([size="small"]) .day {
306
+ width: 28px;
307
+ height: 28px;
308
+ font-size: 0.8125rem;
309
+ }
310
+
311
+ :host([size="large"]) .calendar {
312
+ min-width: 320px;
313
+ padding: 1.25rem;
314
+ }
315
+
316
+ :host([size="large"]) .day {
317
+ width: 36px;
318
+ height: 36px;
319
+ font-size: 0.9375rem;
320
+ }
321
+
322
+ /* Responsive */
323
+ @media (max-width: 640px) {
324
+ .calendar {
325
+ left: 50%;
326
+ right: auto;
327
+ transform: translateX(-50%);
328
+ min-width: 280px;
329
+ }
330
+ }