@visitwonders/assembly 0.1.0 → 0.2.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 (241) hide show
  1. package/declarations/action/button-group.d.ts +89 -0
  2. package/declarations/action/button-group.d.ts.map +1 -0
  3. package/declarations/action/button.d.ts +4 -0
  4. package/declarations/action/button.d.ts.map +1 -1
  5. package/declarations/action/index.d.ts +1 -0
  6. package/declarations/action/index.d.ts.map +1 -1
  7. package/declarations/components/form/checkbox.d.ts +0 -65
  8. package/declarations/components/form/control.d.ts +0 -36
  9. package/declarations/components/form/error-message.d.ts +0 -22
  10. package/declarations/components/form/field.d.ts +0 -21
  11. package/declarations/components/form/form.d.ts +0 -14
  12. package/declarations/components/form/help-text.d.ts +0 -14
  13. package/declarations/components/form/index.d.ts +0 -15
  14. package/declarations/components/form/input.d.ts +0 -80
  15. package/declarations/components/form/label.d.ts +0 -34
  16. package/declarations/components/form/radio-group.d.ts +0 -43
  17. package/declarations/components/form/radio.d.ts +0 -54
  18. package/declarations/components/form/search-input.d.ts +0 -35
  19. package/declarations/components/form/select.d.ts +0 -36
  20. package/declarations/components/form/test.d.ts +0 -11
  21. package/declarations/components/form/textarea.d.ts +0 -79
  22. package/declarations/components/form/toggle.d.ts +0 -23
  23. package/declarations/components/primitives/grid-item.d.ts +0 -21
  24. package/declarations/components/primitives/grid.d.ts +0 -49
  25. package/declarations/components/primitives/h-stack.d.ts +0 -17
  26. package/declarations/components/primitives/heading.d.ts +0 -52
  27. package/declarations/components/primitives/image.d.ts +0 -24
  28. package/declarations/components/primitives/index.d.ts +0 -8
  29. package/declarations/components/primitives/link.d.ts +0 -16
  30. package/declarations/components/primitives/stack.d.ts +0 -23
  31. package/declarations/components/primitives/text.d.ts +0 -50
  32. package/declarations/components/primitives/v-stack.d.ts +0 -16
  33. package/declarations/components/ui/badge.d.ts +0 -14
  34. package/declarations/components/ui/button.d.ts +0 -32
  35. package/declarations/components/ui/card.d.ts +0 -27
  36. package/declarations/components/ui/description-list.d.ts +0 -22
  37. package/declarations/components/ui/drawer.d.ts +0 -14
  38. package/declarations/components/ui/icon-button.d.ts +0 -21
  39. package/declarations/components/ui/icon.d.ts +0 -21
  40. package/declarations/components/ui/index.d.ts +0 -17
  41. package/declarations/components/ui/modal.d.ts +0 -14
  42. package/declarations/components/ui/page-header.d.ts +0 -16
  43. package/declarations/components/ui/skeleton-card.d.ts +0 -17
  44. package/declarations/components/ui/skeleton-text.d.ts +0 -16
  45. package/declarations/components/ui/skeleton.d.ts +0 -20
  46. package/declarations/components/ui/spinner.d.ts +0 -11
  47. package/declarations/components/ui/tab-nav/index.d.ts +0 -36
  48. package/declarations/components/ui/table/body.d.ts +0 -11
  49. package/declarations/components/ui/table/caption.d.ts +0 -18
  50. package/declarations/components/ui/table/cell.d.ts +0 -31
  51. package/declarations/components/ui/table/footer.d.ts +0 -11
  52. package/declarations/components/ui/table/header-cell.d.ts +0 -35
  53. package/declarations/components/ui/table/header.d.ts +0 -11
  54. package/declarations/components/ui/table/row.d.ts +0 -21
  55. package/declarations/components/ui/table_old.d.ts +0 -29
  56. package/declarations/data/table.d.ts +0 -1
  57. package/declarations/data/table.d.ts.map +1 -1
  58. package/declarations/form/calendar.d.ts +0 -1
  59. package/declarations/form/calendar.d.ts.map +1 -1
  60. package/declarations/form/control.d.ts +5 -1
  61. package/declarations/form/control.d.ts.map +1 -1
  62. package/declarations/form/country-select-field.d.ts +6 -0
  63. package/declarations/form/country-select-field.d.ts.map +1 -1
  64. package/declarations/form/country-select.d.ts +0 -1
  65. package/declarations/form/country-select.d.ts.map +1 -1
  66. package/declarations/form/date-picker-field.d.ts +6 -0
  67. package/declarations/form/date-picker-field.d.ts.map +1 -1
  68. package/declarations/form/date-picker.d.ts +0 -1
  69. package/declarations/form/date-picker.d.ts.map +1 -1
  70. package/declarations/form/date-range-picker-field.d.ts +6 -0
  71. package/declarations/form/date-range-picker-field.d.ts.map +1 -1
  72. package/declarations/form/date-range-picker.d.ts +0 -1
  73. package/declarations/form/date-range-picker.d.ts.map +1 -1
  74. package/declarations/form/fieldset.d.ts +22 -0
  75. package/declarations/form/fieldset.d.ts.map +1 -0
  76. package/declarations/form/form.d.ts +0 -1
  77. package/declarations/form/form.d.ts.map +1 -1
  78. package/declarations/form/index.d.ts +1 -0
  79. package/declarations/form/index.d.ts.map +1 -1
  80. package/declarations/form/label.d.ts +4 -0
  81. package/declarations/form/label.d.ts.map +1 -1
  82. package/declarations/form/listbox.d.ts +0 -1
  83. package/declarations/form/listbox.d.ts.map +1 -1
  84. package/declarations/form/money-field.d.ts +6 -1
  85. package/declarations/form/money-field.d.ts.map +1 -1
  86. package/declarations/form/multi-select.d.ts +0 -1
  87. package/declarations/form/multi-select.d.ts.map +1 -1
  88. package/declarations/form/number-field.d.ts +9 -1
  89. package/declarations/form/number-field.d.ts.map +1 -1
  90. package/declarations/form/select-field.d.ts +4 -1
  91. package/declarations/form/select-field.d.ts.map +1 -1
  92. package/declarations/form/test.d.ts +0 -11
  93. package/declarations/form/text-field.d.ts +9 -0
  94. package/declarations/form/text-field.d.ts.map +1 -1
  95. package/declarations/form/time-picker-field.d.ts +6 -0
  96. package/declarations/form/time-picker-field.d.ts.map +1 -1
  97. package/declarations/form/time-picker.d.ts +0 -1
  98. package/declarations/form/time-picker.d.ts.map +1 -1
  99. package/declarations/form/toggle.d.ts +4 -0
  100. package/declarations/form/toggle.d.ts.map +1 -1
  101. package/declarations/layout/index.d.ts +1 -0
  102. package/declarations/layout/index.d.ts.map +1 -1
  103. package/declarations/layout/panel.d.ts +34 -0
  104. package/declarations/layout/panel.d.ts.map +1 -0
  105. package/declarations/media/icon.d.ts +0 -1
  106. package/declarations/media/icon.d.ts.map +1 -1
  107. package/declarations/media/image.d.ts +1 -1
  108. package/declarations/overlay/blanket.d.ts +0 -1
  109. package/declarations/overlay/blanket.d.ts.map +1 -1
  110. package/declarations/overlay/drawer.d.ts +4 -1
  111. package/declarations/overlay/drawer.d.ts.map +1 -1
  112. package/declarations/overlay/modal.d.ts +0 -1
  113. package/declarations/overlay/modal.d.ts.map +1 -1
  114. package/declarations/overlay/popover.d.ts +0 -1
  115. package/declarations/overlay/popover.d.ts.map +1 -1
  116. package/declarations/overlay/toast.d.ts +0 -1
  117. package/declarations/overlay/toast.d.ts.map +1 -1
  118. package/declarations/overlay/tooltip.d.ts +0 -1
  119. package/declarations/overlay/tooltip.d.ts.map +1 -1
  120. package/declarations/primitives/grid-item.d.ts +0 -21
  121. package/declarations/primitives/grid.d.ts +0 -49
  122. package/declarations/primitives/h-stack.d.ts +0 -17
  123. package/declarations/primitives/heading.d.ts +0 -52
  124. package/declarations/primitives/image.d.ts +0 -24
  125. package/declarations/primitives/index.d.ts +0 -4
  126. package/declarations/primitives/link.d.ts +0 -16
  127. package/declarations/primitives/stack.d.ts +0 -23
  128. package/declarations/primitives/text.d.ts +0 -50
  129. package/declarations/primitives/v-stack.d.ts +0 -16
  130. package/declarations/status/badge.d.ts +0 -1
  131. package/declarations/status/badge.d.ts.map +1 -1
  132. package/declarations/status/skeleton-avatar.d.ts +1 -1
  133. package/declarations/status/skeleton-avatar.d.ts.map +1 -1
  134. package/declarations/status/skeleton-button.d.ts +1 -1
  135. package/declarations/status/skeleton-button.d.ts.map +1 -1
  136. package/declarations/status/skeleton-image.d.ts +1 -1
  137. package/declarations/status/skeleton-image.d.ts.map +1 -1
  138. package/declarations/status/skeleton-text.d.ts +1 -1
  139. package/declarations/status/skeleton-text.d.ts.map +1 -1
  140. package/declarations/status/skeleton.d.ts +1 -1
  141. package/declarations/status/skeleton.d.ts.map +1 -1
  142. package/declarations/status/tag.d.ts +0 -1
  143. package/declarations/status/tag.d.ts.map +1 -1
  144. package/declarations/typography/link.d.ts +0 -16
  145. package/declarations/ui/button.d.ts +0 -50
  146. package/declarations/ui/icon.d.ts +0 -21
  147. package/dist/_app_/action/button-group.js +1 -0
  148. package/dist/_app_/form/fieldset.js +1 -0
  149. package/dist/_app_/layout/panel.js +1 -0
  150. package/dist/action/button-group.css +18 -0
  151. package/dist/action/button-group.js +130 -0
  152. package/dist/action/button-group.js.map +1 -0
  153. package/dist/action/button.css +152 -0
  154. package/dist/action/button.js +1 -1
  155. package/dist/action/index.js +1 -0
  156. package/dist/action/index.js.map +1 -1
  157. package/dist/data/table.css +48 -47
  158. package/dist/data/table.js +1 -1
  159. package/dist/form/checkbox.css +3 -3
  160. package/dist/form/control-css-02e93d930aecac651d5c69dc10a83504.css +36 -0
  161. package/dist/form/control.js +2 -2
  162. package/dist/form/country-select-field.js +1 -1
  163. package/dist/form/country-select-field.js.map +1 -1
  164. package/dist/form/country-select.css +1 -1
  165. package/dist/form/date-picker-field.js +1 -1
  166. package/dist/form/date-picker-field.js.map +1 -1
  167. package/dist/form/date-range-picker-field.js +1 -1
  168. package/dist/form/date-range-picker-field.js.map +1 -1
  169. package/dist/form/field.css +3 -3
  170. package/dist/form/fieldset.css +65 -0
  171. package/dist/form/fieldset.js +20 -0
  172. package/dist/form/fieldset.js.map +1 -0
  173. package/dist/form/help-text.css +1 -1
  174. package/dist/form/index.js +1 -0
  175. package/dist/form/index.js.map +1 -1
  176. package/dist/form/input.css +1 -0
  177. package/dist/form/label.css +15 -1
  178. package/dist/form/label.js +10 -4
  179. package/dist/form/money-field.js +1 -1
  180. package/dist/form/multi-select.css +1 -1
  181. package/dist/form/number-field.css +1 -0
  182. package/dist/form/number-field.js +1 -1
  183. package/dist/form/radio.css +3 -3
  184. package/dist/form/select-field.js +1 -1
  185. package/dist/form/select-field.js.map +1 -1
  186. package/dist/form/select.css +1 -1
  187. package/dist/form/{text-field-css-f60360f3f8aaf4da664eaccd1bcc9f8f.css → text-field-css-754feeb82dbd9fc9afdc1f00dceb13ad.css} +22 -1
  188. package/dist/form/text-field.js +2 -2
  189. package/dist/form/textarea.css +2 -1
  190. package/dist/form/time-picker-field.js +1 -1
  191. package/dist/form/time-picker-field.js.map +1 -1
  192. package/dist/form/toggle.css +27 -1
  193. package/dist/form/toggle.js +4 -1
  194. package/dist/layout/{divider-css-1ba104b9c606cbd1f542b45640fb5f2b.css → divider-css-7e0cc7d350e31172582851c6cb2cf586.css} +2 -2
  195. package/dist/layout/divider.js +1 -1
  196. package/dist/layout/{grid-css-086976eb41686e3714554f56c098d3d5.css → grid-css-c8259b34d7062f44e78f0a2cc139cb44.css} +13 -13
  197. package/dist/layout/grid.js +1 -1
  198. package/dist/layout/index.js +1 -0
  199. package/dist/layout/index.js.map +1 -1
  200. package/dist/layout/panel.css +229 -0
  201. package/dist/layout/panel.js +32 -0
  202. package/dist/layout/panel.js.map +1 -0
  203. package/dist/overlay/blanket.css +12 -11
  204. package/dist/overlay/blanket.js +1 -1
  205. package/dist/overlay/drawer.css +99 -62
  206. package/dist/overlay/drawer.js +7 -4
  207. package/dist/overlay/modal.css +22 -21
  208. package/dist/overlay/modal.js +4 -4
  209. package/dist/overlay/popover.css +30 -29
  210. package/dist/overlay/popover.js +4 -4
  211. package/dist/overlay/toast.css +49 -48
  212. package/dist/overlay/toast.js +2 -2
  213. package/dist/overlay/tooltip.css +38 -37
  214. package/dist/overlay/tooltip.js +2 -2
  215. package/dist/skeleton-shared-BTA5oAjw.js +3 -0
  216. package/dist/skeleton-shared-BTA5oAjw.js.map +1 -0
  217. package/dist/status/badge.css +30 -29
  218. package/dist/status/badge.js +1 -1
  219. package/dist/status/skeleton-avatar.js +1 -1
  220. package/dist/status/skeleton-avatar.js.map +1 -1
  221. package/dist/status/skeleton-button.js +1 -1
  222. package/dist/status/skeleton-button.js.map +1 -1
  223. package/dist/status/skeleton-image.js +1 -1
  224. package/dist/status/skeleton-image.js.map +1 -1
  225. package/dist/status/skeleton-text.js +1 -1
  226. package/dist/status/skeleton-text.js.map +1 -1
  227. package/dist/status/skeleton.js +1 -1
  228. package/dist/status/skeleton.js.map +1 -1
  229. package/dist/status/tag.css +50 -51
  230. package/dist/status/tag.js +1 -1
  231. package/dist/styles/base/typography.css +1 -1
  232. package/dist/styles/primitive/typography.css +10 -7
  233. package/dist/styles/semantic/typography.css +4 -4
  234. package/dist/styles.css +15 -12
  235. package/dist/typography/{heading-css-8850735eabc2efb34f15240b852c99e7.css → heading-css-726c4c3109f2b741657733e1ba103c67.css} +9 -9
  236. package/dist/typography/heading.js +1 -1
  237. package/package.json +22 -18
  238. package/dist/form/control-css-6c81caf37fd813b36033091d5340bc70.css +0 -20
  239. package/dist/skeleton-CL5Pcwrk.js +0 -3
  240. package/dist/skeleton-CL5Pcwrk.js.map +0 -1
  241. /package/dist/status/{skeleton.css → skeleton-shared.css} +0 -0
@@ -1,8 +1,9 @@
1
+ /* src/status/tag.css */
1
2
  /* ===================================
2
3
  * Tag Component
3
4
  * =================================== */
4
5
 
5
- .tag {
6
+ .tag_e873402ac {
6
7
  /* Layout */
7
8
  position: relative;
8
9
  display: inline-flex;
@@ -29,7 +30,7 @@
29
30
  * Tag Content (inner interactive/static element)
30
31
  * =================================== */
31
32
 
32
- .tag-content {
33
+ .tag-content_e873402ac {
33
34
  /* Reset */
34
35
  appearance: none;
35
36
  border: none;
@@ -47,13 +48,11 @@
47
48
  }
48
49
 
49
50
  /* Interactive content */
50
- button.tag-content,
51
- a.tag-content {
51
+ button.e873402ac.tag-content_e873402ac,a.e873402ac.tag-content_e873402ac {
52
52
  cursor: pointer;
53
53
  }
54
54
 
55
- button.tag-content:focus-visible,
56
- a.tag-content:focus-visible {
55
+ button.e873402ac.tag-content_e873402ac:focus-visible,a.e873402ac.tag-content_e873402ac:focus-visible {
57
56
  outline: none;
58
57
  box-shadow: inset 0 0 0 2px var(--color-focus-ring-halo);
59
58
  }
@@ -62,56 +61,56 @@ a.tag-content:focus-visible {
62
61
  * Sizes
63
62
  * =================================== */
64
63
 
65
- .tag[data-size="sm"] {
64
+ .tag_e873402ac[data-size="sm"] {
66
65
  height: var(--spacing-5);
67
66
  font-size: var(--font-size-xs);
68
67
  }
69
68
 
70
- .tag[data-size="sm"] .tag-content {
69
+ .tag_e873402ac[data-size="sm"] .tag-content_e873402ac {
71
70
  padding: 0 var(--spacing-2);
72
71
  }
73
72
 
74
- .tag[data-size="md"] {
73
+ .tag_e873402ac[data-size="md"] {
75
74
  height: var(--spacing-6);
76
75
  font-size: var(--font-size-sm);
77
76
  }
78
77
 
79
- .tag[data-size="md"] .tag-content {
78
+ .tag_e873402ac[data-size="md"] .tag-content_e873402ac {
80
79
  padding: 0 var(--spacing-2-5);
81
80
  }
82
81
 
83
- .tag[data-size="lg"] {
82
+ .tag_e873402ac[data-size="lg"] {
84
83
  height: var(--spacing-7);
85
84
  font-size: var(--font-size-sm);
86
85
  }
87
86
 
88
- .tag[data-size="lg"] .tag-content {
87
+ .tag_e873402ac[data-size="lg"] .tag-content_e873402ac {
89
88
  padding: 0 var(--spacing-3);
90
89
  }
91
90
 
92
91
  /* Adjust padding when has accent bar */
93
- .tag[data-has-accent="true"][data-size="sm"] .tag-content {
92
+ .tag_e873402ac[data-has-accent="true"][data-size="sm"] .tag-content_e873402ac {
94
93
  padding-left: var(--spacing-2);
95
94
  }
96
95
 
97
- .tag[data-has-accent="true"][data-size="md"] .tag-content {
96
+ .tag_e873402ac[data-has-accent="true"][data-size="md"] .tag-content_e873402ac {
98
97
  padding-left: var(--spacing-2-5);
99
98
  }
100
99
 
101
- .tag[data-has-accent="true"][data-size="lg"] .tag-content {
100
+ .tag_e873402ac[data-has-accent="true"][data-size="lg"] .tag-content_e873402ac {
102
101
  padding-left: var(--spacing-3);
103
102
  }
104
103
 
105
104
  /* Adjust padding when removable */
106
- .tag[data-removable="true"][data-size="sm"] .tag-content {
105
+ .tag_e873402ac[data-removable="true"][data-size="sm"] .tag-content_e873402ac {
107
106
  padding-right: var(--spacing-1);
108
107
  }
109
108
 
110
- .tag[data-removable="true"][data-size="md"] .tag-content {
109
+ .tag_e873402ac[data-removable="true"][data-size="md"] .tag-content_e873402ac {
111
110
  padding-right: var(--spacing-1);
112
111
  }
113
112
 
114
- .tag[data-removable="true"][data-size="lg"] .tag-content {
113
+ .tag_e873402ac[data-removable="true"][data-size="lg"] .tag-content_e873402ac {
115
114
  padding-right: var(--spacing-1-5);
116
115
  }
117
116
 
@@ -120,139 +119,139 @@ a.tag-content:focus-visible {
120
119
  * =================================== */
121
120
 
122
121
  /* Neutral */
123
- .tag[data-tone="neutral"] {
122
+ .tag_e873402ac[data-tone="neutral"] {
124
123
  background: var(--color-bg-neutral-subtle);
125
124
  color: var(--color-text);
126
125
  }
127
126
 
128
- .tag[data-tone="neutral"][data-interactive="true"]:hover:not(
127
+ .tag_e873402ac[data-tone="neutral"][data-interactive="true"]:hover:not(
129
128
  [data-disabled="true"]
130
129
  ) {
131
130
  background: var(--color-bg-neutral-subtle-hover);
132
131
  }
133
132
 
134
- .tag[data-tone="neutral"][data-interactive="true"]:active:not(
133
+ .tag_e873402ac[data-tone="neutral"][data-interactive="true"]:active:not(
135
134
  [data-disabled="true"]
136
135
  ) {
137
136
  background: var(--color-bg-neutral-subtle-active);
138
137
  }
139
138
 
140
- .tag[data-tone="neutral"][data-selected="true"] {
139
+ .tag_e873402ac[data-tone="neutral"][data-selected="true"] {
141
140
  background: var(--color-bg-fill-neutral);
142
141
  color: var(--color-text-on-neutral);
143
142
  }
144
143
 
145
144
  /* Primary */
146
- .tag[data-tone="primary"] {
145
+ .tag_e873402ac[data-tone="primary"] {
147
146
  background: var(--color-bg-primary-subtle);
148
147
  color: var(--color-text-primary);
149
148
  }
150
149
 
151
- .tag[data-tone="primary"][data-interactive="true"]:hover:not(
150
+ .tag_e873402ac[data-tone="primary"][data-interactive="true"]:hover:not(
152
151
  [data-disabled="true"]
153
152
  ) {
154
153
  background: var(--color-bg-primary-subtle-hover);
155
154
  }
156
155
 
157
- .tag[data-tone="primary"][data-interactive="true"]:active:not(
156
+ .tag_e873402ac[data-tone="primary"][data-interactive="true"]:active:not(
158
157
  [data-disabled="true"]
159
158
  ) {
160
159
  background: var(--color-bg-primary-subtle-active);
161
160
  }
162
161
 
163
- .tag[data-tone="primary"][data-selected="true"] {
162
+ .tag_e873402ac[data-tone="primary"][data-selected="true"] {
164
163
  background: var(--color-bg-fill-primary);
165
164
  color: var(--color-text-on-primary);
166
165
  }
167
166
 
168
167
  /* Success */
169
- .tag[data-tone="success"] {
168
+ .tag_e873402ac[data-tone="success"] {
170
169
  background: var(--color-bg-success-subtle);
171
170
  color: var(--color-text-success);
172
171
  }
173
172
 
174
- .tag[data-tone="success"][data-interactive="true"]:hover:not(
173
+ .tag_e873402ac[data-tone="success"][data-interactive="true"]:hover:not(
175
174
  [data-disabled="true"]
176
175
  ) {
177
176
  background: var(--color-bg-success-subtle-hover);
178
177
  }
179
178
 
180
- .tag[data-tone="success"][data-interactive="true"]:active:not(
179
+ .tag_e873402ac[data-tone="success"][data-interactive="true"]:active:not(
181
180
  [data-disabled="true"]
182
181
  ) {
183
182
  background: var(--color-bg-success-subtle-active);
184
183
  }
185
184
 
186
- .tag[data-tone="success"][data-selected="true"] {
185
+ .tag_e873402ac[data-tone="success"][data-selected="true"] {
187
186
  background: var(--color-bg-fill-success);
188
187
  color: var(--color-text-on-success);
189
188
  }
190
189
 
191
190
  /* Warning */
192
- .tag[data-tone="warning"] {
191
+ .tag_e873402ac[data-tone="warning"] {
193
192
  background: var(--color-bg-warning-subtle);
194
193
  color: var(--color-text-warning);
195
194
  }
196
195
 
197
- .tag[data-tone="warning"][data-interactive="true"]:hover:not(
196
+ .tag_e873402ac[data-tone="warning"][data-interactive="true"]:hover:not(
198
197
  [data-disabled="true"]
199
198
  ) {
200
199
  background: var(--color-bg-warning-subtle-hover);
201
200
  }
202
201
 
203
- .tag[data-tone="warning"][data-interactive="true"]:active:not(
202
+ .tag_e873402ac[data-tone="warning"][data-interactive="true"]:active:not(
204
203
  [data-disabled="true"]
205
204
  ) {
206
205
  background: var(--color-bg-warning-subtle-active);
207
206
  }
208
207
 
209
- .tag[data-tone="warning"][data-selected="true"] {
208
+ .tag_e873402ac[data-tone="warning"][data-selected="true"] {
210
209
  background: var(--color-bg-fill-warning);
211
210
  color: var(--color-text-on-warning);
212
211
  }
213
212
 
214
213
  /* Critical */
215
- .tag[data-tone="critical"] {
214
+ .tag_e873402ac[data-tone="critical"] {
216
215
  background: var(--color-bg-critical-subtle);
217
216
  color: var(--color-text-critical);
218
217
  }
219
218
 
220
- .tag[data-tone="critical"][data-interactive="true"]:hover:not(
219
+ .tag_e873402ac[data-tone="critical"][data-interactive="true"]:hover:not(
221
220
  [data-disabled="true"]
222
221
  ) {
223
222
  background: var(--color-bg-critical-subtle-hover);
224
223
  }
225
224
 
226
- .tag[data-tone="critical"][data-interactive="true"]:active:not(
225
+ .tag_e873402ac[data-tone="critical"][data-interactive="true"]:active:not(
227
226
  [data-disabled="true"]
228
227
  ) {
229
228
  background: var(--color-bg-critical-subtle-active);
230
229
  }
231
230
 
232
- .tag[data-tone="critical"][data-selected="true"] {
231
+ .tag_e873402ac[data-tone="critical"][data-selected="true"] {
233
232
  background: var(--color-bg-fill-critical);
234
233
  color: var(--color-text-on-critical);
235
234
  }
236
235
 
237
236
  /* Info */
238
- .tag[data-tone="info"] {
237
+ .tag_e873402ac[data-tone="info"] {
239
238
  background: var(--color-bg-info-subtle);
240
239
  color: var(--color-text-info);
241
240
  }
242
241
 
243
- .tag[data-tone="info"][data-interactive="true"]:hover:not(
242
+ .tag_e873402ac[data-tone="info"][data-interactive="true"]:hover:not(
244
243
  [data-disabled="true"]
245
244
  ) {
246
245
  background: var(--color-bg-info-subtle-hover);
247
246
  }
248
247
 
249
- .tag[data-tone="info"][data-interactive="true"]:active:not(
248
+ .tag_e873402ac[data-tone="info"][data-interactive="true"]:active:not(
250
249
  [data-disabled="true"]
251
250
  ) {
252
251
  background: var(--color-bg-info-subtle-active);
253
252
  }
254
253
 
255
- .tag[data-tone="info"][data-selected="true"] {
254
+ .tag_e873402ac[data-tone="info"][data-selected="true"] {
256
255
  background: var(--color-bg-fill-info);
257
256
  color: var(--color-text-on-info);
258
257
  }
@@ -262,7 +261,7 @@ a.tag-content:focus-visible {
262
261
  * =================================== */
263
262
 
264
263
  /* Disabled */
265
- .tag[data-disabled="true"] {
264
+ .tag_e873402ac[data-disabled="true"] {
266
265
  opacity: 0.5;
267
266
  cursor: not-allowed;
268
267
  pointer-events: none;
@@ -272,13 +271,13 @@ a.tag-content:focus-visible {
272
271
  * Inner Elements
273
272
  * =================================== */
274
273
 
275
- .tag-icon {
274
+ .tag-icon_e873402ac {
276
275
  display: inline-flex;
277
276
  align-items: center;
278
277
  flex-shrink: 0;
279
278
  }
280
279
 
281
- .tag-label {
280
+ .tag-label_e873402ac {
282
281
  flex: 1 1 auto;
283
282
  min-width: 0;
284
283
  overflow: hidden;
@@ -286,7 +285,7 @@ a.tag-content:focus-visible {
286
285
  }
287
286
 
288
287
  /* Accent bar */
289
- .tag-accent {
288
+ .tag-accent_e873402ac {
290
289
  position: absolute;
291
290
  left: 0;
292
291
  top: 0;
@@ -297,7 +296,7 @@ a.tag-content:focus-visible {
297
296
  }
298
297
 
299
298
  /* Remove button */
300
- .tag-remove {
299
+ .tag-remove_e873402ac {
301
300
  /* Reset */
302
301
  appearance: none;
303
302
  border: none;
@@ -330,23 +329,23 @@ a.tag-content:focus-visible {
330
329
  background-color 0.15s ease;
331
330
  }
332
331
 
333
- .tag-remove:hover:not(:disabled) {
332
+ .tag-remove_e873402ac:hover:not(:disabled) {
334
333
  opacity: 1;
335
334
  background: rgba(0, 0, 0, 0.1);
336
335
  }
337
336
 
338
- .tag-remove:focus-visible {
337
+ .tag-remove_e873402ac:focus-visible {
339
338
  outline: none;
340
339
  opacity: 1;
341
340
  box-shadow: 0 0 0 2px var(--color-focus-ring-halo);
342
341
  }
343
342
 
344
- .tag-remove:disabled {
343
+ .tag-remove_e873402ac:disabled {
345
344
  cursor: not-allowed;
346
345
  pointer-events: none;
347
346
  }
348
347
 
349
348
  /* Selected state remove button styling */
350
- .tag[data-selected="true"] .tag-remove:hover:not(:disabled) {
349
+ .tag_e873402ac[data-selected="true"] .tag-remove_e873402ac:hover:not(:disabled) {
351
350
  background: rgba(255, 255, 255, 0.2);
352
351
  }
@@ -66,7 +66,7 @@ class Tag extends Component {
66
66
  }
67
67
  };
68
68
  static {
69
- setComponentTemplate(precompileTemplate("<span class=\"tag\" style={{this.accentStyle}} data-tone={{this.tone}} data-size={{this.size}} data-selected={{if @selected \"true\"}} data-disabled={{if @disabled \"true\"}} data-has-accent={{if @color \"true\"}} data-removable={{if @onRemove \"true\"}} data-interactive={{if this.isInteractive \"true\"}} data-test-tag ...attributes>\n {{#if this.isValidHexColor}}\n <span class=\"tag-accent\" data-test-tag-accent></span>\n {{/if}}\n\n {{#if this.isLink}}\n <a class=\"tag-content\" href={{@href}} tabindex={{if @disabled \"-1\"}} data-test-tag-link {{on \"click\" this.handleClick}} {{on \"keydown\" this.handleKeyDown}}>\n {{#if @icon}}\n <span class=\"tag-icon\" data-test-tag-icon><Icon @icon={{@icon}} @size={{this.iconSize}} /></span>\n {{/if}}\n <span class=\"tag-label\" data-test-tag-label>{{yield}}</span>\n </a>\n {{else if this.isInteractive}}\n <button type=\"button\" class=\"tag-content\" disabled={{@disabled}} aria-pressed={{this.ariaPressed}} data-test-tag-button {{on \"click\" this.handleClick}} {{on \"keydown\" this.handleKeyDown}}>\n {{#if @icon}}\n <span class=\"tag-icon\" data-test-tag-icon><Icon @icon={{@icon}} @size={{this.iconSize}} /></span>\n {{/if}}\n <span class=\"tag-label\" data-test-tag-label>{{yield}}</span>\n </button>\n {{else}}\n <span class=\"tag-content\" tabindex={{if @onRemove \"0\"}} data-test-tag-content {{on \"keydown\" this.handleKeyDown}}>\n {{#if @icon}}\n <span class=\"tag-icon\" data-test-tag-icon><Icon @icon={{@icon}} @size={{this.iconSize}} /></span>\n {{/if}}\n <span class=\"tag-label\" data-test-tag-label>{{yield}}</span>\n </span>\n {{/if}}\n\n {{#if @onRemove}}\n <button type=\"button\" class=\"tag-remove\" aria-label={{this.removeLabel}} disabled={{@disabled}} data-test-tag-remove {{on \"click\" this.handleRemove}}>\n <Icon @icon={{X}} @size={{this.iconSize}} />\n </button>\n {{/if}}\n</span>", {
69
+ setComponentTemplate(precompileTemplate("<span class=\"tag_e873402ac\" style={{this.accentStyle}} data-tone={{this.tone}} data-size={{this.size}} data-selected={{if @selected \"true\"}} data-disabled={{if @disabled \"true\"}} data-has-accent={{if @color \"true\"}} data-removable={{if @onRemove \"true\"}} data-interactive={{if this.isInteractive \"true\"}} data-test-tag ...attributes>\n {{#if this.isValidHexColor}}\n <span class=\"tag-accent_e873402ac\" data-test-tag-accent></span>\n {{/if}}\n\n {{#if this.isLink}}\n <a class=\"tag-content_e873402ac e873402ac\" href={{@href}} tabindex={{if @disabled \"-1\"}} data-test-tag-link {{on \"click\" this.handleClick}} {{on \"keydown\" this.handleKeyDown}}>\n {{#if @icon}}\n <span class=\"tag-icon_e873402ac\" data-test-tag-icon><Icon @icon={{@icon}} @size={{this.iconSize}} /></span>\n {{/if}}\n <span class=\"tag-label_e873402ac\" data-test-tag-label>{{yield}}</span>\n </a>\n {{else if this.isInteractive}}\n <button type=\"button\" class=\"tag-content_e873402ac e873402ac\" disabled={{@disabled}} aria-pressed={{this.ariaPressed}} data-test-tag-button {{on \"click\" this.handleClick}} {{on \"keydown\" this.handleKeyDown}}>\n {{#if @icon}}\n <span class=\"tag-icon_e873402ac\" data-test-tag-icon><Icon @icon={{@icon}} @size={{this.iconSize}} /></span>\n {{/if}}\n <span class=\"tag-label_e873402ac\" data-test-tag-label>{{yield}}</span>\n </button>\n {{else}}\n <span class=\"tag-content_e873402ac\" tabindex={{if @onRemove \"0\"}} data-test-tag-content {{on \"keydown\" this.handleKeyDown}}>\n {{#if @icon}}\n <span class=\"tag-icon_e873402ac\" data-test-tag-icon><Icon @icon={{@icon}} @size={{this.iconSize}} /></span>\n {{/if}}\n <span class=\"tag-label_e873402ac\" data-test-tag-label>{{yield}}</span>\n </span>\n {{/if}}\n\n {{#if @onRemove}}\n <button type=\"button\" class=\"tag-remove_e873402ac e873402ac\" aria-label={{this.removeLabel}} disabled={{@disabled}} data-test-tag-remove {{on \"click\" this.handleRemove}}>\n <Icon @icon={{X}} @size={{this.iconSize}} />\n </button>\n {{/if}}\n</span>", {
70
70
  strictMode: true,
71
71
  scope: () => ({
72
72
  on,
@@ -43,5 +43,5 @@ body {
43
43
  font-family: var(--font-family-sans);
44
44
  font-size: var(--font-size-13);
45
45
  font-weight: var(--font-weight-400);
46
- line-height: var(--line-height-1-5);
46
+ line-height: var(--line-height-normal);
47
47
  }
@@ -27,13 +27,16 @@
27
27
  --font-weight-600: 600;
28
28
  --font-weight-700: 700;
29
29
 
30
- /* Line Heights - Ratio scale */
31
- --line-height-1: 1;
32
- --line-height-1-25: 1.25;
33
- --line-height-1-375: 1.375;
34
- --line-height-1-5: 1.5;
35
- --line-height-1-625: 1.625;
36
- --line-height-2: 2;
30
+ /* Line Heights - Absolute scale (4px grid-aligned) */
31
+ --line-height-none: 1;
32
+ --line-height-16: 1rem; /* 16px */
33
+ --line-height-20: 1.25rem; /* 20px */
34
+ --line-height-24: 1.5rem; /* 24px */
35
+ --line-height-28: 1.75rem; /* 28px */
36
+ --line-height-32: 2rem; /* 32px */
37
+ --line-height-36: 2.25rem; /* 36px */
38
+ --line-height-40: 2.5rem; /* 40px */
39
+ --line-height-44: 2.75rem; /* 44px */
37
40
 
38
41
  /* Letter Spacing */
39
42
  --letter-spacing-tight: -0.05em;
@@ -20,10 +20,10 @@
20
20
  --font-weight-semibold: var(--font-weight-600);
21
21
  --font-weight-bold: var(--font-weight-700);
22
22
 
23
- /* Line Height */
24
- --line-height-tight: var(--line-height-1-25);
25
- --line-height-normal: var(--line-height-1-5);
26
- --line-height-relaxed: var(--line-height-1-625);
23
+ /* Line Height - Grid-aligned for body text sizes (11-14px) */
24
+ --line-height-tight: var(--line-height-16); /* 16px */
25
+ --line-height-normal: var(--line-height-20); /* 20px */
26
+ --line-height-relaxed: var(--line-height-24); /* 24px */
27
27
 
28
28
  /* Letter Spacing */
29
29
  --letter-spacing-tight: -0.025em;
package/dist/styles.css CHANGED
@@ -172,13 +172,16 @@
172
172
  --font-weight-600: 600;
173
173
  --font-weight-700: 700;
174
174
 
175
- /* Line Heights - Ratio scale */
176
- --line-height-1: 1;
177
- --line-height-1-25: 1.25;
178
- --line-height-1-375: 1.375;
179
- --line-height-1-5: 1.5;
180
- --line-height-1-625: 1.625;
181
- --line-height-2: 2;
175
+ /* Line Heights - Absolute scale (4px grid-aligned) */
176
+ --line-height-none: 1;
177
+ --line-height-16: 1rem; /* 16px */
178
+ --line-height-20: 1.25rem; /* 20px */
179
+ --line-height-24: 1.5rem; /* 24px */
180
+ --line-height-28: 1.75rem; /* 28px */
181
+ --line-height-32: 2rem; /* 32px */
182
+ --line-height-36: 2.25rem; /* 36px */
183
+ --line-height-40: 2.5rem; /* 40px */
184
+ --line-height-44: 2.75rem; /* 44px */
182
185
 
183
186
  /* Letter Spacing */
184
187
  --letter-spacing-tight: -0.05em;
@@ -484,10 +487,10 @@
484
487
  --font-weight-semibold: var(--font-weight-600);
485
488
  --font-weight-bold: var(--font-weight-700);
486
489
 
487
- /* Line Height */
488
- --line-height-tight: var(--line-height-1-25);
489
- --line-height-normal: var(--line-height-1-5);
490
- --line-height-relaxed: var(--line-height-1-625);
490
+ /* Line Height - Grid-aligned for body text sizes (11-14px) */
491
+ --line-height-tight: var(--line-height-16); /* 16px */
492
+ --line-height-normal: var(--line-height-20); /* 20px */
493
+ --line-height-relaxed: var(--line-height-24); /* 24px */
491
494
 
492
495
  /* Letter Spacing */
493
496
  --letter-spacing-tight: -0.025em;
@@ -646,7 +649,7 @@ body {
646
649
  font-family: var(--font-family-sans);
647
650
  font-size: var(--font-size-13);
648
651
  font-weight: var(--font-weight-400);
649
- line-height: var(--line-height-1-5);
652
+ line-height: var(--line-height-normal);
650
653
  }
651
654
 
652
655
  /* Animations */
@@ -1,4 +1,4 @@
1
- /* <inline>/src/typography/heading-css-8850735eabc2efb34f15240b852c99e7.css */
1
+ /* <inline>/src/typography/heading-css-726c4c3109f2b741657733e1ba103c67.css */
2
2
 
3
3
  .heading_e24a71ed2 {
4
4
  margin: 0;
@@ -7,35 +7,35 @@
7
7
  /* Size */
8
8
  .heading_e24a71ed2[data-size="sm"] {
9
9
  font-size: var(--font-size-sm);
10
- line-height: var(--line-height-tight);
10
+ line-height: var(--line-height-16);
11
11
  }
12
12
  .heading_e24a71ed2[data-size="md"] {
13
13
  font-size: var(--font-size-md);
14
- line-height: var(--line-height-tight);
14
+ line-height: var(--line-height-16);
15
15
  }
16
16
  .heading_e24a71ed2[data-size="lg"] {
17
17
  font-size: var(--font-size-lg);
18
- line-height: var(--line-height-tight);
18
+ line-height: var(--line-height-20);
19
19
  }
20
20
  .heading_e24a71ed2[data-size="xl"] {
21
21
  font-size: var(--font-size-xl);
22
- line-height: var(--line-height-tight);
22
+ line-height: var(--line-height-20);
23
23
  }
24
24
  .heading_e24a71ed2[data-size="2xl"] {
25
25
  font-size: var(--font-size-2xl);
26
- line-height: var(--line-height-tight);
26
+ line-height: var(--line-height-24);
27
27
  }
28
28
  .heading_e24a71ed2[data-size="3xl"] {
29
29
  font-size: var(--font-size-3xl);
30
- line-height: var(--line-height-tight);
30
+ line-height: var(--line-height-24);
31
31
  }
32
32
  .heading_e24a71ed2[data-size="4xl"] {
33
33
  font-size: var(--font-size-4xl);
34
- line-height: var(--line-height-tight);
34
+ line-height: var(--line-height-28);
35
35
  }
36
36
  .heading_e24a71ed2[data-size="5xl"] {
37
37
  font-size: var(--font-size-5xl);
38
- line-height: var(--line-height-tight);
38
+ line-height: var(--line-height-36);
39
39
  }
40
40
 
41
41
  /* Weight */
@@ -1,4 +1,4 @@
1
- import "./heading-css-8850735eabc2efb34f15240b852c99e7.css"
1
+ import "./heading-css-726c4c3109f2b741657733e1ba103c67.css"
2
2
  import Component from '@glimmer/component';
3
3
  import { element } from 'ember-element-helper';
4
4
  import { precompileTemplate } from '@ember/template-compilation';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@visitwonders/assembly",
3
- "version": "0.1.0",
3
+ "version": "0.2.0",
4
4
  "description": "The default blueprint for Embroider v2 addons.",
5
5
  "keywords": [
6
6
  "ember-addon"
@@ -77,6 +77,21 @@
77
77
  "declarations",
78
78
  "dist"
79
79
  ],
80
+ "scripts": {
81
+ "build": "rollup --config",
82
+ "format": "prettier . --cache --write",
83
+ "lint": "concurrently \"pnpm:lint:*(!fix)\" --names \"lint:\" --prefixColors auto",
84
+ "lint:fix": "concurrently \"pnpm:lint:*:fix\" --names \"fix:\" --prefixColors auto && pnpm run format",
85
+ "lint:format": "prettier . --cache --check",
86
+ "lint:hbs": "ember-template-lint . --no-error-on-unmatched-pattern",
87
+ "lint:hbs:fix": "ember-template-lint . --fix --no-error-on-unmatched-pattern",
88
+ "lint:js": "eslint . --cache",
89
+ "lint:js:fix": "eslint . --fix",
90
+ "lint:types": "glint",
91
+ "prepack": "rollup --config",
92
+ "start": "rollup --config --watch",
93
+ "test": "echo 'A v2 addon does not have tests, run tests in showcase'"
94
+ },
80
95
  "dependencies": {
81
96
  "@embroider/addon-shim": "^1.8.9",
82
97
  "@floating-ui/dom": "^1.6.13",
@@ -137,12 +152,13 @@
137
152
  "type": "addon",
138
153
  "main": "addon-main.cjs",
139
154
  "app-js": {
155
+ "./action/button-group.js": "./dist/_app_/action/button-group.js",
140
156
  "./action/button.js": "./dist/_app_/action/button.js",
141
157
  "./action/link.js": "./dist/_app_/action/link.js",
142
158
  "./data/table.js": "./dist/_app_/data/table.js",
143
159
  "./form/calendar.js": "./dist/_app_/form/calendar.js",
144
- "./form/checkbox.js": "./dist/_app_/form/checkbox.js",
145
160
  "./form/checkbox-group.js": "./dist/_app_/form/checkbox-group.js",
161
+ "./form/checkbox.js": "./dist/_app_/form/checkbox.js",
146
162
  "./form/control.js": "./dist/_app_/form/control.js",
147
163
  "./form/country-data.js": "./dist/_app_/form/country-data.js",
148
164
  "./form/country-select-field.js": "./dist/_app_/form/country-select-field.js",
@@ -153,6 +169,7 @@
153
169
  "./form/date-range-picker.js": "./dist/_app_/form/date-range-picker.js",
154
170
  "./form/error-message.js": "./dist/_app_/form/error-message.js",
155
171
  "./form/field.js": "./dist/_app_/form/field.js",
172
+ "./form/fieldset.js": "./dist/_app_/form/fieldset.js",
156
173
  "./form/form.js": "./dist/_app_/form/form.js",
157
174
  "./form/help-text.js": "./dist/_app_/form/help-text.js",
158
175
  "./form/input.js": "./dist/_app_/form/input.js",
@@ -172,13 +189,14 @@
172
189
  "./form/textarea.js": "./dist/_app_/form/textarea.js",
173
190
  "./form/time-picker-field.js": "./dist/_app_/form/time-picker-field.js",
174
191
  "./form/time-picker.js": "./dist/_app_/form/time-picker.js",
175
- "./form/toggle.js": "./dist/_app_/form/toggle.js",
176
192
  "./form/toggle-field.js": "./dist/_app_/form/toggle-field.js",
177
193
  "./form/toggle-group.js": "./dist/_app_/form/toggle-group.js",
194
+ "./form/toggle.js": "./dist/_app_/form/toggle.js",
178
195
  "./layout/divider.js": "./dist/_app_/layout/divider.js",
179
196
  "./layout/grid-item.js": "./dist/_app_/layout/grid-item.js",
180
197
  "./layout/grid.js": "./dist/_app_/layout/grid.js",
181
198
  "./layout/h-stack.js": "./dist/_app_/layout/h-stack.js",
199
+ "./layout/panel.js": "./dist/_app_/layout/panel.js",
182
200
  "./layout/stack.js": "./dist/_app_/layout/stack.js",
183
201
  "./layout/v-stack.js": "./dist/_app_/layout/v-stack.js",
184
202
  "./media/icon.js": "./dist/_app_/media/icon.js",
@@ -200,19 +218,5 @@
200
218
  "./typography/heading.js": "./dist/_app_/typography/heading.js",
201
219
  "./typography/text.js": "./dist/_app_/typography/text.js"
202
220
  }
203
- },
204
- "scripts": {
205
- "build": "rollup --config",
206
- "format": "prettier . --cache --write",
207
- "lint": "concurrently \"pnpm:lint:*(!fix)\" --names \"lint:\" --prefixColors auto",
208
- "lint:fix": "concurrently \"pnpm:lint:*:fix\" --names \"fix:\" --prefixColors auto && pnpm run format",
209
- "lint:format": "prettier . --cache --check",
210
- "lint:hbs": "ember-template-lint . --no-error-on-unmatched-pattern",
211
- "lint:hbs:fix": "ember-template-lint . --fix --no-error-on-unmatched-pattern",
212
- "lint:js": "eslint . --cache",
213
- "lint:js:fix": "eslint . --fix",
214
- "lint:types": "glint",
215
- "start": "rollup --config --watch",
216
- "test": "echo 'A v2 addon does not have tests, run tests in showcase'"
217
221
  }
218
- }
222
+ }
@@ -1,20 +0,0 @@
1
- /* <inline>/src/form/control-css-6c81caf37fd813b36033091d5340bc70.css */
2
-
3
- .assembly-control_e529e8199 {
4
- display: flex;
5
- flex-direction: column;
6
- gap: var(--spacing-2);
7
- width: 100%;
8
- }
9
-
10
- .assembly-control_e529e8199[data-orientation="horizontal"] {
11
- flex-direction: row;
12
- align-items: flex-start;
13
- gap: var(--spacing-6);
14
- }
15
-
16
- .assembly-control_e529e8199[data-orientation="horizontal"] .label {
17
- flex-shrink: 0;
18
- min-width: 120px;
19
- padding-top: var(--spacing-2);
20
- }
@@ -1,3 +0,0 @@
1
- import "./status/skeleton.css"
2
- ;
3
- //# sourceMappingURL=skeleton-CL5Pcwrk.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"skeleton-CL5Pcwrk.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}