@1001-digital/layers.base 0.0.7 → 0.0.8

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 (9) hide show
  1. package/app/assets/styles/index.css +3 -3
  2. package/app/components/Alert.vue +42 -40
  3. package/app/components/Button.vue +127 -124
  4. package/app/components/Card.vue +42 -38
  5. package/app/components/Dialog.client.vue +112 -110
  6. package/app/components/Form/FormItem.vue +35 -33
  7. package/package.json +1 -1
  8. package/app/app.vue +0 -3
  9. package/app/components/HelloWorld.vue +0 -10
package/app/assets/styles/index.css CHANGED
@@ -1,14 +1,14 @@
1
1
  /*
2
2
  * CSS Layers Order Definition
3
3
  * This establishes the cascade priority:
4
- * reset < base < components < utilities
4
+ * variables, reset < base < components < utilities
5
5
  */
6
- @layer reset, base, components, utilities;
6
+ @layer variables, reset, base, components, utilities;
7
7
 
8
8
  /*
9
9
  * CSS Custom Properties (outside layers for proper cascade)
10
10
  */
11
- @import './variables/index.css';
11
+ @import './variables/index.css' layer(variables);
12
12
 
13
13
  /*
14
14
  * Reset Layer - Modern Normalize
package/app/components/Alert.vue CHANGED
@@ -28,7 +28,7 @@ const dismiss = () => {
28
28
  </script>
29
29
 
30
30
  <style>
31
- @layer components {
31
+ @layer variables {
32
32
  :root {
33
33
  --alert-color: var(--color);
34
34
  --alert-background-color: transparent;
@@ -46,50 +46,52 @@ const dismiss = () => {
46
46
  </style>
47
47
 
48
48
  <style scoped>
49
- .alert {
50
- position: relative;
51
- display: grid;
52
- padding: var(--spacer-sm);
53
- gap: var(--spacer-sm);
54
- border: var(--border);
55
- border-color: var(--alert-border-color);
56
- background-color: var(--alert-background-color);
57
- color: var(--alert-color);
58
- font-family: var(--font-family);
59
- font-size: var(--ui-font-size);
60
- text-transform: var(--ui-text-transform);
61
-
62
- &.info {
63
- border-color: var(--alert-info-border-color);
64
- background-color: var(--alert-info-background-color);
65
- color: var(--alert-info-color);
66
- }
49
+ @layer components {
50
+ .alert {
51
+ position: relative;
52
+ display: grid;
53
+ padding: var(--spacer-sm);
54
+ gap: var(--spacer-sm);
55
+ border: var(--border);
56
+ border-color: var(--alert-border-color);
57
+ background-color: var(--alert-background-color);
58
+ color: var(--alert-color);
59
+ font-family: var(--font-family);
60
+ font-size: var(--ui-font-size);
61
+ text-transform: var(--ui-text-transform);
67
62
 
68
- &.error {
69
- border-color: var(--alert-error-border-color);
70
- background-color: var(--alert-error-background-color);
71
- color: var(--alert-error-color);
72
- }
63
+ &.info {
64
+ border-color: var(--alert-info-border-color);
65
+ background-color: var(--alert-info-background-color);
66
+ color: var(--alert-info-color);
67
+ }
73
68
 
74
- :deep(> h1) {
75
- text-transform: uppercase;
76
- font-weight: bold;
77
- }
69
+ &.error {
70
+ border-color: var(--alert-error-border-color);
71
+ background-color: var(--alert-error-background-color);
72
+ color: var(--alert-error-color);
73
+ }
78
74
 
79
- .close {
80
- display: flex;
81
- align-items: center;
82
- justify-content: center;
83
- position: absolute;
84
- inline-size: var(--size-4);
85
- block-size: var(--size-4);
86
- padding: 0;
87
- inset-block-start: var(--spacer-sm);
88
- inset-inline-end: var(--spacer-sm);
89
- background: none;
75
+ :deep(> h1) {
76
+ text-transform: uppercase;
77
+ font-weight: bold;
78
+ }
90
79
 
91
- &:is(:hover, :active, :focus, .active) {
80
+ .close {
81
+ display: flex;
82
+ align-items: center;
83
+ justify-content: center;
84
+ position: absolute;
85
+ inline-size: var(--size-4);
86
+ block-size: var(--size-4);
87
+ padding: 0;
88
+ inset-block-start: var(--spacer-sm);
89
+ inset-inline-end: var(--spacer-sm);
92
90
  background: none;
91
+
92
+ &:is(:hover, :active, :focus, .active) {
93
+ background: none;
94
+ }
93
95
  }
94
96
  }
95
97
  }
package/app/components/Button.vue CHANGED
@@ -20,7 +20,7 @@ withDefaults(defineProps<{
20
20
  </script>
21
21
 
22
22
  <style>
23
- @layer components {
23
+ @layer variables {
24
24
  :root {
25
25
  --button-border-radius: var(--border-radius);
26
26
  --button-background: var(--background);
@@ -43,175 +43,178 @@ withDefaults(defineProps<{
43
43
  </style>
44
44
 
45
45
  <style scoped>
46
- button,
47
- a.button {
48
- position: relative;
49
- min-inline-size: fit-content;
50
- inline-size: fit-content;
51
- display: inline-flex;
52
- justify-content: center;
53
- align-items: center;
54
- gap: var(--spacer-sm);
55
-
56
- &:not(.unstyled) {
57
- background: var(--button-background);
58
- color: var(--button-color);
59
- padding: var(--ui-padding-block) var(--ui-padding-inline);
60
- border: none;
61
- border-radius: var(--button-border-radius);
62
- box-shadow: var(--border-shadow);
63
- transition:
64
- background var(--speed),
65
- box-shadow var(--speed),
66
- color var(--speed);
67
- }
46
+ @layer components {
68
47
 
69
- >span {
70
- display: flex;
71
- gap: var(--ui-padding-inline);
72
- line-height: var(--ui-line-height);
48
+ button,
49
+ a.button {
50
+ position: relative;
51
+ min-inline-size: fit-content;
52
+ inline-size: fit-content;
53
+ display: inline-flex;
73
54
  justify-content: center;
74
- text-align: center;
75
55
  align-items: center;
76
- inline-size: 100%;
77
- block-size: 100%;
78
- }
79
-
80
- >.icon {
81
- color: var(--button-icon-color);
82
- transition: color var(--speed);
83
- }
84
-
85
- &:has(> .icon:first-child) {
86
- padding-inline-start: calc(var(--ui-padding-inline) - var(--size-1));
87
-
88
- &.small {
89
- padding-inline-start: calc(var(--ui-padding-inline) / 2);
56
+ gap: var(--spacer-sm);
57
+
58
+ &:not(.unstyled) {
59
+ background: var(--button-background);
60
+ color: var(--button-color);
61
+ padding: var(--ui-padding-block) var(--ui-padding-inline);
62
+ border: none;
63
+ border-radius: var(--button-border-radius);
64
+ box-shadow: var(--border-shadow);
65
+ transition:
66
+ background var(--speed),
67
+ box-shadow var(--speed),
68
+ color var(--speed);
90
69
  }
91
- }
92
70
 
93
- &:has(> .icon:first-child:last-child) {
94
- padding: var(--ui-padding-block);
95
- aspect-ratio: 1;
71
+ >span {
72
+ display: flex;
73
+ gap: var(--ui-padding-inline);
74
+ line-height: var(--ui-line-height);
75
+ justify-content: center;
76
+ text-align: center;
77
+ align-items: center;
78
+ inline-size: 100%;
79
+ block-size: 100%;
80
+ }
96
81
 
97
- &.small {
98
- padding: calc(var(--ui-padding-block) / 2);
82
+ >.icon {
83
+ color: var(--button-icon-color);
84
+ transition: color var(--speed);
99
85
  }
100
- }
101
86
 
102
- &.non-interactive,
103
- &[disabled]:not([disabled='false']) {
104
- pointer-events: none;
105
- }
87
+ &:has(> .icon:first-child) {
88
+ padding-inline-start: calc(var(--ui-padding-inline) - var(--size-1));
106
89
 
107
- &[disabled]:not([disabled='false']) {
108
- color: var(--muted);
109
- opacity: 0.5;
110
- }
90
+ &.small {
91
+ padding-inline-start: calc(var(--ui-padding-inline) / 2);
92
+ }
93
+ }
111
94
 
112
- &.small {
113
- padding: calc(var(--ui-padding-block) / 2) calc(var(--ui-padding-inline) / 2);
114
- min-block-size: 0;
95
+ &:has(> .icon:first-child:last-child) {
96
+ padding: var(--ui-padding-block);
97
+ aspect-ratio: 1;
115
98
 
116
- >.icon {
117
- inline-size: var(--size-3);
118
- block-size: var(--size-3);
99
+ &.small {
100
+ padding: calc(var(--ui-padding-block) / 2);
101
+ }
119
102
  }
120
- }
121
103
 
122
- &.link {
123
- box-shadow: none;
124
- background: transparent;
125
- line-height: inherit;
126
- color: var(--color);
127
- padding: 0;
128
-
129
- >.icon {
130
- align-self: center;
131
- block-size: 1em;
132
- inline-size: 1em;
104
+ &.non-interactive,
105
+ &[disabled]:not([disabled='false']) {
106
+ pointer-events: none;
133
107
  }
134
108
 
135
- &.muted {
109
+ &[disabled]:not([disabled='false']) {
136
110
  color: var(--muted);
111
+ opacity: 0.5;
112
+ }
113
+
114
+ &.small {
115
+ padding: calc(var(--ui-padding-block) / 2) calc(var(--ui-padding-inline) / 2);
116
+ min-block-size: 0;
137
117
 
138
118
  >.icon {
139
- color: var(--muted);
119
+ inline-size: var(--size-3);
120
+ block-size: var(--size-3);
140
121
  }
141
122
  }
142
- }
143
123
 
144
- &.inline {
145
- display: inline-flex;
146
- align-self: baseline;
147
- align-items: baseline;
148
- block-size: inherit;
149
- margin: 0 !important;
150
- padding: 0 var(--size-1) !important;
151
- gap: 0.2em;
152
- inline-size: min-content;
153
- }
124
+ &.link {
125
+ box-shadow: none;
126
+ background: transparent;
127
+ line-height: inherit;
128
+ color: var(--color);
129
+ padding: 0;
154
130
 
155
- &.invisible {
156
- position: absolute;
157
- inset-inline-start: -200vw;
158
- opacity: 0;
159
- }
131
+ >.icon {
132
+ align-self: center;
133
+ block-size: 1em;
134
+ inline-size: 1em;
135
+ }
160
136
 
161
- &.danger {
162
- box-shadow: 0 0 0 var(--border-width) var(--error);
163
- color: var(--error) !important;
137
+ &.muted {
138
+ color: var(--muted);
164
139
 
165
- >.icon {
166
- color: var(--error);
140
+ >.icon {
141
+ color: var(--muted);
142
+ }
143
+ }
167
144
  }
168
- }
169
145
 
170
- /* Primary variant */
171
- &.primary {
172
- background: var(--button-primary-background);
173
- box-shadow: 0 0 0 var(--border-width) var(--button-primary-border-color);
174
- color: var(--button-primary-color);
146
+ &.inline {
147
+ display: inline-flex;
148
+ align-self: baseline;
149
+ align-items: baseline;
150
+ block-size: inherit;
151
+ margin: 0 !important;
152
+ padding: 0 var(--size-1) !important;
153
+ gap: 0.2em;
154
+ inline-size: min-content;
155
+ }
175
156
 
176
- >.icon {
177
- color: var(--button-primary-color);
157
+ &.invisible {
158
+ position: absolute;
159
+ inset-inline-start: -200vw;
160
+ opacity: 0;
178
161
  }
179
162
 
180
- &:is(:hover, :active, :focus, .active) {
181
- background: var(--button-primary-background-highlight);
182
- box-shadow: 0 0 0 var(--border-width) var(--button-primary-border-color-highlight);
183
- color: var(--button-primary-color-highlight);
163
+ &.danger {
164
+ box-shadow: 0 0 0 var(--border-width) var(--error);
165
+ color: var(--error) !important;
184
166
 
185
167
  >.icon {
186
- color: var(--button-primary-color-highlight);
168
+ color: var(--error);
187
169
  }
188
170
  }
189
- }
190
171
 
191
- &:is(:hover, :active, :focus, .active) {
192
- background: var(--button-background-highlight);
193
- box-shadow: var(--border-shadow-highlight);
194
- color: var(--button-color-highlight);
172
+ /* Primary variant */
173
+ &.primary {
174
+ background: var(--button-primary-background);
175
+ box-shadow: 0 0 0 var(--border-width) var(--button-primary-border-color);
176
+ color: var(--button-primary-color);
177
+
178
+ >.icon {
179
+ color: var(--button-primary-color);
180
+ }
195
181
 
196
- >.icon {
197
- color: var(--button-icon-color-highlight);
182
+ &:is(:hover, :active, :focus, .active) {
183
+ background: var(--button-primary-background-highlight);
184
+ box-shadow: 0 0 0 var(--border-width) var(--button-primary-border-color-highlight);
185
+ color: var(--button-primary-color-highlight);
186
+
187
+ >.icon {
188
+ color: var(--button-primary-color-highlight);
189
+ }
190
+ }
198
191
  }
199
192
 
200
- &.link {
201
- background: transparent !important;
202
- box-shadow: none;
203
- color: var(--color);
193
+ &:is(:hover, :active, :focus, .active) {
194
+ background: var(--button-background-highlight);
195
+ box-shadow: var(--border-shadow-highlight);
196
+ color: var(--button-color-highlight);
204
197
 
205
198
  >.icon {
206
- color: var(--gray-z-7);
199
+ color: var(--button-icon-color-highlight);
207
200
  }
208
201
 
209
- &.muted {
202
+ &.link {
203
+ background: transparent !important;
204
+ box-shadow: none;
210
205
  color: var(--color);
211
206
 
212
207
  >.icon {
213
208
  color: var(--gray-z-7);
214
209
  }
210
+
211
+ &.muted {
212
+ color: var(--color);
213
+
214
+ >.icon {
215
+ color: var(--gray-z-7);
216
+ }
217
+ }
215
218
  }
216
219
  }
217
220
  }
package/app/components/Card.vue CHANGED
@@ -5,7 +5,7 @@
5
5
  </template>
6
6
 
7
7
  <style>
8
- @layer components {
8
+ @layer variables {
9
9
  :root {
10
10
  --card-border-radius: var(--border-radius);
11
11
  --card-border: var(--border);
@@ -17,57 +17,61 @@
17
17
  </style>
18
18
 
19
19
  <style scoped>
20
- .card {
21
- display: grid;
22
- gap: var(--spacer);
23
- background-color: var(--card-background);
24
- block-size: 100%;
25
- padding: var(--spacer);
26
- transition:
27
- background var(--speed),
28
- border-color var(--speed);
20
+ @layer components {
21
+ .card {
22
+ display: grid;
23
+ gap: var(--spacer);
24
+ background-color: var(--card-background);
25
+ block-size: 100%;
26
+ padding: var(--spacer);
27
+ transition:
28
+ background var(--speed),
29
+ border-color var(--speed);
29
30
 
30
- &:not(.borderless) {
31
- border: var(--card-border);
32
- border-radius: var(--card-border-radius);
31
+ &:not(.borderless) {
32
+ border: var(--card-border);
33
+ border-radius: var(--card-border-radius);
34
+
35
+ &:has(> .card-link) {
36
+
37
+ &:has(> .card-link:hover),
38
+ &:has(> .card-link:focus) {
39
+ border-color: var(--card-border-color-highlight);
40
+ }
41
+ }
42
+ }
43
+
44
+ &.borderless {
45
+ padding: 0;
46
+ }
33
47
 
34
48
  &:has(> .card-link) {
49
+
35
50
  &:has(> .card-link:hover),
36
51
  &:has(> .card-link:focus) {
37
- border-color: var(--card-border-color-highlight);
52
+ background-color: var(--card-background-highlight);
38
53
  }
39
54
  }
40
- }
41
55
 
42
- &.borderless {
43
- padding: 0;
44
- }
56
+ &.static {
57
+ background-color: var(--card-background);
58
+ }
45
59
 
46
- &:has(> .card-link) {
47
- &:has(> .card-link:hover),
48
- &:has(> .card-link:focus) {
60
+ &.highlight {
49
61
  background-color: var(--card-background-highlight);
50
62
  }
51
- }
52
63
 
53
- &.static {
54
- background-color: var(--card-background);
55
- }
64
+ >* {
65
+ inline-size: 100%;
66
+ place-self: center;
56
67
 
57
- &.highlight {
58
- background-color: var(--card-background-highlight);
59
- }
60
-
61
- > * {
62
- inline-size: 100%;
63
- place-self: center;
64
-
65
- &:first-child {
66
- place-self: flex-start;
67
- }
68
+ &:first-child {
69
+ place-self: flex-start;
70
+ }
68
71
 
69
- &:last-child {
70
- place-self: flex-end;
72
+ &:last-child {
73
+ place-self: flex-end;
74
+ }
71
75
  }
72
76
  }
73
77
  }
package/app/components/Dialog.client.vue CHANGED
@@ -88,7 +88,7 @@ watchEffect(() => (open.value ? show() : hide()))
88
88
  </script>
89
89
 
90
90
  <style>
91
- @layer components {
91
+ @layer variables {
92
92
  :root {
93
93
  --dialog-initial-x-offset: 0;
94
94
  --dialog-initial-y-offset: var(--spacer);
@@ -98,136 +98,138 @@ watchEffect(() => (open.value ? show() : hide()))
98
98
  }
99
99
  }
100
100
 
101
- .dialog {
102
- padding: var(--spacer);
103
- padding-block-start: calc(var(--spacer) * 3);
104
- max-inline-size: min(var(--dialog-width, 32rem), calc(100vw - var(--spacer) * 2));
105
- inline-size: 100%;
106
- background: var(--background);
107
- color: var(--color);
108
- border: var(--border);
109
- border-radius: var(--border-radius);
110
- overscroll-behavior: contain;
111
- block-size: 0;
112
- min-block-size: min-content;
113
- max-block-size: 100dvh;
114
- container-type: inline-size;
115
- display: grid;
116
- gap: var(--spacer);
117
-
118
- /* Entry/exit animations */
119
- opacity: 1;
120
- transform: scale(1);
121
- transition:
122
- opacity var(--speed) ease,
123
- transform var(--speed) ease,
124
- overlay var(--speed) ease allow-discrete,
125
- display var(--speed) ease allow-discrete;
126
-
127
- @starting-style {
128
- opacity: 0;
129
- transform: scale(0.95);
130
- }
131
-
132
- /* Exit animation */
133
- &:not([open]):not(:popover-open) {
134
- opacity: 0;
135
- transform: scale(0.95);
136
- }
101
+ @layer components {
102
+ .dialog {
103
+ padding: var(--spacer);
104
+ padding-block-start: calc(var(--spacer) * 3);
105
+ max-inline-size: min(var(--dialog-width, 32rem), calc(100vw - var(--spacer) * 2));
106
+ inline-size: 100%;
107
+ background: var(--background);
108
+ color: var(--color);
109
+ border: var(--border);
110
+ border-radius: var(--border-radius);
111
+ overscroll-behavior: contain;
112
+ block-size: 0;
113
+ min-block-size: min-content;
114
+ max-block-size: 100dvh;
115
+ container-type: inline-size;
116
+ display: grid;
117
+ gap: var(--spacer);
137
118
 
138
- &::backdrop {
139
- background-color: var(--backdrop-background-color);
140
- backdrop-filter: var(--blur);
119
+ /* Entry/exit animations */
120
+ opacity: 1;
121
+ transform: scale(1);
141
122
  transition:
142
- background-color var(--speed) ease,
143
- backdrop-filter var(--speed) ease,
123
+ opacity var(--speed) ease,
124
+ transform var(--speed) ease,
144
125
  overlay var(--speed) ease allow-discrete,
145
126
  display var(--speed) ease allow-discrete;
146
127
 
147
128
  @starting-style {
148
- background-color: transparent;
129
+ opacity: 0;
130
+ transform: scale(0.95);
149
131
  }
150
- }
151
132
 
152
- @media (--md) {
153
- max-block-size: calc(100dvh - var(--spacer) * 2);
154
- }
133
+ /* Exit animation */
134
+ &:not([open]):not(:popover-open) {
135
+ opacity: 0;
136
+ transform: scale(0.95);
137
+ }
155
138
 
156
- &.compat {
157
- position: fixed;
158
- transform: translate(-50%, -50%);
139
+ &::backdrop {
140
+ background-color: var(--backdrop-background-color);
141
+ backdrop-filter: var(--blur);
142
+ transition:
143
+ background-color var(--speed) ease,
144
+ backdrop-filter var(--speed) ease,
145
+ overlay var(--speed) ease allow-discrete,
146
+ display var(--speed) ease allow-discrete;
147
+
148
+ @starting-style {
149
+ background-color: transparent;
150
+ }
151
+ }
159
152
 
160
- &.open {
161
- inset-block-start: 50%;
162
- inset-inline-start: 50%;
163
- z-index: var(--z-index-dialog);
153
+ @media (--md) {
154
+ max-block-size: calc(100dvh - var(--spacer) * 2);
155
+ }
164
156
 
165
- +.overlay {
166
- position: fixed;
167
- inset: 0;
168
- z-index: var(--z-index-overlay);
169
- background: var(--backdrop-background-color);
157
+ &.compat {
158
+ position: fixed;
159
+ transform: translate(-50%, -50%);
160
+
161
+ &.open {
162
+ inset-block-start: 50%;
163
+ inset-inline-start: 50%;
164
+ z-index: var(--z-index-dialog);
165
+
166
+ +.overlay {
167
+ position: fixed;
168
+ inset: 0;
169
+ z-index: var(--z-index-overlay);
170
+ background: var(--backdrop-background-color);
171
+ }
170
172
  }
171
173
  }
172
- }
173
174
 
174
- &:focus {
175
- outline: none;
176
- }
175
+ &:focus {
176
+ outline: none;
177
+ }
177
178
 
178
- >.close {
179
- position: absolute;
180
- inset-block-start: 0;
181
- inset-inline-end: 0;
182
- block-size: calc(var(--spacer) * 2);
183
- inline-size: calc(var(--spacer) * 2);
184
- border-inline-start: var(--border);
185
- border-block-end: var(--border);
186
- display: flex;
187
- align-items: center;
188
- justify-content: center;
189
- padding: 0;
190
- z-index: 10;
191
- background: var(--background);
179
+ >.close {
180
+ position: absolute;
181
+ inset-block-start: 0;
182
+ inset-inline-end: 0;
183
+ block-size: calc(var(--spacer) * 2);
184
+ inline-size: calc(var(--spacer) * 2);
185
+ border-inline-start: var(--border);
186
+ border-block-end: var(--border);
187
+ display: flex;
188
+ align-items: center;
189
+ justify-content: center;
190
+ padding: 0;
191
+ z-index: 10;
192
+ background: var(--background);
193
+
194
+ &:is(:hover, :active, :focus, .active) {
195
+ outline: none;
196
+ }
197
+ }
192
198
 
193
- &:is(:hover, :active, :focus, .active) {
194
- outline: none;
199
+ >h1:first-of-type {
200
+ inline-size: 100%;
201
+ border-block-end: var(--border);
202
+ block-size: calc(var(--spacer) * 2);
203
+ position: absolute;
204
+ inset-block-start: 0;
205
+ inset-inline-start: 0;
206
+ padding: 0 0 0 var(--spacer);
207
+ display: flex;
208
+ align-items: center;
209
+ margin: 0;
210
+ font-family: var(--font-family);
211
+ font-size: var(--ui-font-size);
212
+ text-transform: var(--ui-text-transform);
213
+ background: var(--background);
195
214
  }
196
- }
197
215
 
198
- >h1:first-of-type {
199
- inline-size: 100%;
200
- border-block-end: var(--border);
201
- block-size: calc(var(--spacer) * 2);
202
- position: absolute;
203
- inset-block-start: 0;
204
- inset-inline-start: 0;
205
- padding: 0 0 0 var(--spacer);
206
- display: flex;
207
- align-items: center;
208
- margin: 0;
209
- font-family: var(--font-family);
210
- font-size: var(--ui-font-size);
211
- text-transform: var(--ui-text-transform);
212
- background: var(--background);
213
- }
216
+ >.actions {
217
+ margin-block-start: var(--spacer);
218
+ display: flex;
219
+ gap: var(--spacer);
220
+ justify-content: flex-end;
221
+ }
214
222
 
215
- >.actions {
216
- margin-block-start: var(--spacer);
217
- display: flex;
218
- gap: var(--spacer);
219
- justify-content: flex-end;
223
+ &.large {
224
+ --dialog-width: min(90vw, 64rem);
225
+ }
220
226
  }
221
227
 
222
- &.large {
223
- --dialog-width: min(90vw, 64rem);
228
+ html:has(dialog[open]),
229
+ body:has(dialog[open]),
230
+ html:has(.dialog.open),
231
+ body:has(.dialog.open) {
232
+ overflow: hidden;
224
233
  }
225
234
  }
226
-
227
- html:has(dialog[open]),
228
- body:has(dialog[open]),
229
- html:has(.dialog.open),
230
- body:has(.dialog.open) {
231
- overflow: hidden;
232
- }
233
235
  </style>
package/app/components/Form/FormItem.vue CHANGED
@@ -11,7 +11,7 @@
11
11
  </template>
12
12
 
13
13
  <style>
14
- @layer components {
14
+ @layer variables {
15
15
  :root {
16
16
  --form-item-height: calc(var(--size-4) + var(--ui-padding-block) * 2);
17
17
  --form-item-height-sm: calc(var(--size-4) + var(--ui-padding-block));
@@ -20,43 +20,45 @@
20
20
  </style>
21
21
 
22
22
  <style scoped>
23
- .form-item {
24
- border: var(--border);
25
- border-radius: var(--border-radius);
26
- display: flex;
27
- align-items: center;
28
- background: var(--background);
29
- inline-size: 100%;
30
- max-inline-size: -webkit-fill-available;
23
+ @layer components {
24
+ .form-item {
25
+ border: var(--border);
26
+ border-radius: var(--border-radius);
27
+ display: flex;
28
+ align-items: center;
29
+ background: var(--background);
30
+ inline-size: 100%;
31
+ max-inline-size: -webkit-fill-available;
31
32
 
32
- :deep(input),
33
- :deep(textarea),
34
- :deep(select) {
35
- border: none;
36
- }
33
+ :deep(input),
34
+ :deep(textarea),
35
+ :deep(select) {
36
+ border: none;
37
+ }
37
38
 
38
- &:has(input:hover),
39
- &:has(input:focus) {
40
- background: var(--button-background-highlight);
41
- border-color: var(--button-border-color-highlight);
42
- }
39
+ &:has(input:hover),
40
+ &:has(input:focus) {
41
+ background: var(--button-background-highlight);
42
+ border-color: var(--button-border-color-highlight);
43
+ }
43
44
 
44
- .prefix,
45
- .suffix {
46
- padding: 0 var(--ui-padding-inline);
47
- color: var(--muted);
48
- block-size: 100%;
49
- display: flex;
50
- align-items: center;
51
- justify-content: center;
52
- }
45
+ .prefix,
46
+ .suffix {
47
+ padding: 0 var(--ui-padding-inline);
48
+ color: var(--muted);
49
+ block-size: 100%;
50
+ display: flex;
51
+ align-items: center;
52
+ justify-content: center;
53
+ }
53
54
 
54
- .prefix {
55
- border-inline-end: var(--button-border);
56
- }
55
+ .prefix {
56
+ border-inline-end: var(--button-border);
57
+ }
57
58
 
58
- .suffix {
59
- border-inline-start: var(--button-border);
59
+ .suffix {
60
+ border-inline-start: var(--button-border);
61
+ }
60
62
  }
61
63
  }
62
64
  </style>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@1001-digital/layers.base",
3
3
  "type": "module",
4
- "version": "0.0.7",
4
+ "version": "0.0.8",
5
5
  "main": "./nuxt.config.ts",
6
6
  "devDependencies": {
7
7
  "@iconify-json/lucide": "^1.2.81",
package/app/app.vue DELETED
@@ -1,3 +0,0 @@
1
- <template>
2
- <HelloWorld />
3
- </template>
package/app/components/HelloWorld.vue DELETED
@@ -1,10 +0,0 @@
1
- <script setup lang="ts">
2
- const { myLayer } = useAppConfig()
3
- </script>
4
-
5
- <template>
6
- <div>
7
- <h1>Hello World!</h1>
8
- <pre>{{ myLayer }}</pre>
9
- </div>
10
- </template>