@oscarpalmer/atoms 0.55.0 → 0.56.1
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.
- package/dist/css/a11y.css +2 -2
- package/dist/css/flex.css +62 -54
- package/dist/js/index.js +1 -1
- package/dist/js/timer.js +1 -1
- package/dist/js/timer.mjs +1 -1
- package/package.json +8 -12
- package/src/css/a11y.scss +4 -2
- package/src/css/flex.scss +69 -34
- package/src/css/reset.scss +3 -2
package/dist/css/a11y.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
.visually-hidden {
|
|
1
|
+
:where(.visually-hidden) {
|
|
2
2
|
position: absolute !important;
|
|
3
3
|
}
|
|
4
|
-
.visually-hidden:not(:active):not(:focus):not(:focus-within) {
|
|
4
|
+
:where(.visually-hidden:not(:active):not(:focus):not(:focus-within)) {
|
|
5
5
|
width: 1px !important;
|
|
6
6
|
height: 1px !important;
|
|
7
7
|
padding: 0 !important;
|
package/dist/css/flex.css
CHANGED
|
@@ -1,148 +1,156 @@
|
|
|
1
|
-
.fill {
|
|
1
|
+
:where(.fill) {
|
|
2
2
|
flex: 1;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
|
-
.flow,
|
|
6
|
-
.stack
|
|
5
|
+
:where(.flow, .flow-large, .flow-small, .flow-text,
|
|
6
|
+
.stack,
|
|
7
|
+
.stack-large,
|
|
8
|
+
.stack-small,
|
|
9
|
+
.stack-text) {
|
|
7
10
|
display: flex;
|
|
8
11
|
}
|
|
9
12
|
|
|
10
|
-
.flow {
|
|
13
|
+
:where(.flow, .flow-large, .flow-small, .flow-text) {
|
|
11
14
|
flex-flow: row wrap;
|
|
12
|
-
gap: var(--flow-gap, 1rem);
|
|
13
15
|
align-items: center;
|
|
14
16
|
}
|
|
15
|
-
.flow
|
|
16
|
-
gap:
|
|
17
|
+
:where(.flow) {
|
|
18
|
+
gap: var(--flow-gap, 1rem);
|
|
19
|
+
}
|
|
20
|
+
:where(.flow-large) {
|
|
21
|
+
gap: var(--flow-gap-large, calc(2 * var(--flow-gap, 1rem)));
|
|
17
22
|
}
|
|
18
|
-
.flow-nowrap {
|
|
23
|
+
:where(.flow-nowrap) {
|
|
19
24
|
flex-wrap: nowrap;
|
|
20
25
|
}
|
|
21
|
-
.flow-
|
|
22
|
-
|
|
23
|
-
}
|
|
24
|
-
.flow-small {
|
|
25
|
-
gap: calc(0.5 * var(--flow-gap, 1rem));
|
|
26
|
+
:where(.flow-small) {
|
|
27
|
+
gap: var(--flow-gap-small, calc(0.5 * var(--flow-gap, 1rem)));
|
|
26
28
|
}
|
|
27
|
-
.flow-
|
|
28
|
-
gap:
|
|
29
|
+
:where(.flow-text) {
|
|
30
|
+
gap: var(--flow-gap-text, 1em);
|
|
29
31
|
}
|
|
30
32
|
|
|
31
|
-
.stack {
|
|
33
|
+
:where(.stack, .stack-large, .stack-small, .stack-text) {
|
|
32
34
|
flex-flow: column nowrap;
|
|
35
|
+
}
|
|
36
|
+
:where(.stack) {
|
|
33
37
|
gap: var(--stack-gap, 1rem);
|
|
34
38
|
}
|
|
35
|
-
.stack-large {
|
|
36
|
-
gap: calc(2 * var(--stack-gap, 1rem));
|
|
39
|
+
:where(.stack-large) {
|
|
40
|
+
gap: var(--stack-gap-large, calc(2 * var(--stack-gap, 1rem)));
|
|
41
|
+
}
|
|
42
|
+
:where(.stack-small) {
|
|
43
|
+
gap: var(--stack-gap-small, calc(0.5 * var(--stack-gap, 1rem)));
|
|
37
44
|
}
|
|
38
|
-
.stack-
|
|
39
|
-
|
|
45
|
+
:where(.stack-text) {
|
|
46
|
+
gap: var(--stack-gap-text, 1em);
|
|
40
47
|
}
|
|
41
|
-
|
|
42
|
-
|
|
48
|
+
|
|
49
|
+
:where(.flex-reverse[class^=flow i], .flex-reverse[class*=" flow" i]) {
|
|
50
|
+
flex-direction: row-reverse;
|
|
43
51
|
}
|
|
44
|
-
.stack-
|
|
45
|
-
|
|
52
|
+
:where(.flex-reverse[class^=stack i], .flex-reverse[class*=" stack" i]) {
|
|
53
|
+
flex-direction: column-reverse;
|
|
46
54
|
}
|
|
47
55
|
|
|
48
|
-
.flex-ac-c {
|
|
56
|
+
:where(.flex-ac-c) {
|
|
49
57
|
align-content: center;
|
|
50
58
|
}
|
|
51
|
-
.flex-ac-fe {
|
|
59
|
+
:where(.flex-ac-fe) {
|
|
52
60
|
align-content: flex-end;
|
|
53
61
|
}
|
|
54
|
-
.flex-ac-fs {
|
|
62
|
+
:where(.flex-ac-fs) {
|
|
55
63
|
align-content: flex-start;
|
|
56
64
|
}
|
|
57
|
-
.flex-ac-s {
|
|
65
|
+
:where(.flex-ac-s) {
|
|
58
66
|
align-content: stretch;
|
|
59
67
|
}
|
|
60
68
|
|
|
61
|
-
.flex-ai-c {
|
|
69
|
+
:where(.flex-ai-c) {
|
|
62
70
|
align-items: center;
|
|
63
71
|
}
|
|
64
|
-
.flex-ai-fe {
|
|
72
|
+
:where(.flex-ai-fe) {
|
|
65
73
|
align-items: flex-end;
|
|
66
74
|
}
|
|
67
|
-
.flex-ai-fs {
|
|
75
|
+
:where(.flex-ai-fs) {
|
|
68
76
|
align-items: flex-start;
|
|
69
77
|
}
|
|
70
|
-
.flex-ai-s {
|
|
78
|
+
:where(.flex-ai-s) {
|
|
71
79
|
align-items: stretch;
|
|
72
80
|
}
|
|
73
81
|
|
|
74
|
-
.flex-as-c {
|
|
82
|
+
:where(.flex-as-c) {
|
|
75
83
|
align-self: center;
|
|
76
84
|
}
|
|
77
|
-
.flex-as-fe {
|
|
85
|
+
:where(.flex-as-fe) {
|
|
78
86
|
align-self: flex-end;
|
|
79
87
|
}
|
|
80
|
-
.flex-as-fs {
|
|
88
|
+
:where(.flex-as-fs) {
|
|
81
89
|
align-self: flex-start;
|
|
82
90
|
}
|
|
83
|
-
.flex-as-s {
|
|
91
|
+
:where(.flex-as-s) {
|
|
84
92
|
align-self: stretch;
|
|
85
93
|
}
|
|
86
94
|
|
|
87
|
-
.flex-ac-sa {
|
|
95
|
+
:where(.flex-ac-sa) {
|
|
88
96
|
align-content: space-around;
|
|
89
97
|
}
|
|
90
98
|
|
|
91
|
-
.flex-ac-sb {
|
|
99
|
+
:where(.flex-ac-sb) {
|
|
92
100
|
align-content: space-between;
|
|
93
101
|
}
|
|
94
102
|
|
|
95
|
-
.flex-ac-se {
|
|
103
|
+
:where(.flex-ac-se) {
|
|
96
104
|
align-content: space-evenly;
|
|
97
105
|
}
|
|
98
106
|
|
|
99
|
-
.flex-jc-c {
|
|
107
|
+
:where(.flex-jc-c) {
|
|
100
108
|
justify-content: center;
|
|
101
109
|
}
|
|
102
|
-
.flex-jc-fe {
|
|
110
|
+
:where(.flex-jc-fe) {
|
|
103
111
|
justify-content: flex-end;
|
|
104
112
|
}
|
|
105
|
-
.flex-jc-fs {
|
|
113
|
+
:where(.flex-jc-fs) {
|
|
106
114
|
justify-content: flex-start;
|
|
107
115
|
}
|
|
108
|
-
.flex-jc-s {
|
|
116
|
+
:where(.flex-jc-s) {
|
|
109
117
|
justify-content: stretch;
|
|
110
118
|
}
|
|
111
119
|
|
|
112
|
-
.flex-ji-c {
|
|
120
|
+
:where(.flex-ji-c) {
|
|
113
121
|
justify-items: center;
|
|
114
122
|
}
|
|
115
|
-
.flex-ji-fe {
|
|
123
|
+
:where(.flex-ji-fe) {
|
|
116
124
|
justify-items: flex-end;
|
|
117
125
|
}
|
|
118
|
-
.flex-ji-fs {
|
|
126
|
+
:where(.flex-ji-fs) {
|
|
119
127
|
justify-items: flex-start;
|
|
120
128
|
}
|
|
121
|
-
.flex-ji-s {
|
|
129
|
+
:where(.flex-ji-s) {
|
|
122
130
|
justify-items: stretch;
|
|
123
131
|
}
|
|
124
132
|
|
|
125
|
-
.flex-js-c {
|
|
133
|
+
:where(.flex-js-c) {
|
|
126
134
|
justify-self: center;
|
|
127
135
|
}
|
|
128
|
-
.flex-js-fe {
|
|
136
|
+
:where(.flex-js-fe) {
|
|
129
137
|
justify-self: flex-end;
|
|
130
138
|
}
|
|
131
|
-
.flex-js-fs {
|
|
139
|
+
:where(.flex-js-fs) {
|
|
132
140
|
justify-self: flex-start;
|
|
133
141
|
}
|
|
134
|
-
.flex-js-s {
|
|
142
|
+
:where(.flex-js-s) {
|
|
135
143
|
justify-self: stretch;
|
|
136
144
|
}
|
|
137
145
|
|
|
138
|
-
.flex-jc-sa {
|
|
146
|
+
:where(.flex-jc-sa) {
|
|
139
147
|
justify-content: space-around;
|
|
140
148
|
}
|
|
141
149
|
|
|
142
|
-
.flex-jc-sb {
|
|
150
|
+
:where(.flex-jc-sb) {
|
|
143
151
|
justify-content: space-between;
|
|
144
152
|
}
|
|
145
153
|
|
|
146
|
-
.flex-jc-se {
|
|
154
|
+
:where(.flex-jc-se) {
|
|
147
155
|
justify-content: space-evenly;
|
|
148
156
|
}
|
package/dist/js/index.js
CHANGED
|
@@ -1666,7 +1666,7 @@ class TimerTrace extends Error {
|
|
|
1666
1666
|
}
|
|
1667
1667
|
var activeTimers = new Set;
|
|
1668
1668
|
var hiddenTimers = new Set;
|
|
1669
|
-
var milliseconds =
|
|
1669
|
+
var milliseconds = 1000 / 60;
|
|
1670
1670
|
document.addEventListener("visibilitychange", () => {
|
|
1671
1671
|
if (document.hidden) {
|
|
1672
1672
|
for (const timer2 of activeTimers) {
|
package/dist/js/timer.js
CHANGED
|
@@ -241,7 +241,7 @@ class TimerTrace extends Error {
|
|
|
241
241
|
}
|
|
242
242
|
var activeTimers = new Set;
|
|
243
243
|
var hiddenTimers = new Set;
|
|
244
|
-
var milliseconds =
|
|
244
|
+
var milliseconds = 1000 / 60;
|
|
245
245
|
document.addEventListener("visibilitychange", () => {
|
|
246
246
|
if (document.hidden) {
|
|
247
247
|
for (const timer2 of activeTimers) {
|
package/dist/js/timer.mjs
CHANGED
|
@@ -238,7 +238,7 @@ class TimerTrace extends Error {
|
|
|
238
238
|
}
|
|
239
239
|
var activeTimers = new Set;
|
|
240
240
|
var hiddenTimers = new Set;
|
|
241
|
-
var milliseconds =
|
|
241
|
+
var milliseconds = 1000 / 60;
|
|
242
242
|
document.addEventListener("visibilitychange", () => {
|
|
243
243
|
if (document.hidden) {
|
|
244
244
|
for (const timer2 of activeTimers) {
|
package/package.json
CHANGED
|
@@ -4,16 +4,16 @@
|
|
|
4
4
|
"url": "https://oscarpalmer.se"
|
|
5
5
|
},
|
|
6
6
|
"dependencies": {
|
|
7
|
-
"type-fest": "^4.
|
|
7
|
+
"type-fest": "^4.21.0"
|
|
8
8
|
},
|
|
9
9
|
"description": "Sweet little atomic goodies…",
|
|
10
10
|
"devDependencies": {
|
|
11
|
-
"@biomejs/biome": "^1.8.
|
|
11
|
+
"@biomejs/biome": "^1.8.3",
|
|
12
12
|
"@happy-dom/global-registrator": "^14.12.3",
|
|
13
|
-
"@types/bun": "^1.1.
|
|
14
|
-
"bun": "^1.1.
|
|
15
|
-
"sass": "^1.77.
|
|
16
|
-
"typescript": "^5.5.
|
|
13
|
+
"@types/bun": "^1.1.6",
|
|
14
|
+
"bun": "^1.1.18",
|
|
15
|
+
"sass": "^1.77.8",
|
|
16
|
+
"typescript": "^5.5.3"
|
|
17
17
|
},
|
|
18
18
|
"exports": {
|
|
19
19
|
".": {
|
|
@@ -106,11 +106,7 @@
|
|
|
106
106
|
},
|
|
107
107
|
"./package.json": "./package.json"
|
|
108
108
|
},
|
|
109
|
-
"files": [
|
|
110
|
-
"dist",
|
|
111
|
-
"src",
|
|
112
|
-
"types"
|
|
113
|
-
],
|
|
109
|
+
"files": ["dist", "src", "types"],
|
|
114
110
|
"keywords": [],
|
|
115
111
|
"license": "MIT",
|
|
116
112
|
"main": "./dist/js/index.js",
|
|
@@ -132,5 +128,5 @@
|
|
|
132
128
|
},
|
|
133
129
|
"type": "module",
|
|
134
130
|
"types": "./types/index.d.ts",
|
|
135
|
-
"version": "0.
|
|
131
|
+
"version": "0.56.1"
|
|
136
132
|
}
|
package/src/css/a11y.scss
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
.visually-hidden {
|
|
2
|
-
|
|
2
|
+
:where(&) {
|
|
3
|
+
position: absolute !important;
|
|
4
|
+
}
|
|
3
5
|
|
|
4
|
-
&:not(:active):not(:focus):not(:focus-within) {
|
|
6
|
+
:where(&:not(:active):not(:focus):not(:focus-within)) {
|
|
5
7
|
width: 1px !important;
|
|
6
8
|
height: 1px !important;
|
|
7
9
|
padding: 0 !important;
|
package/src/css/flex.scss
CHANGED
|
@@ -1,78 +1,113 @@
|
|
|
1
|
-
.fill {
|
|
1
|
+
:where(.fill) {
|
|
2
2
|
flex: 1;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
5
|
.flow,
|
|
6
6
|
.stack {
|
|
7
|
-
|
|
7
|
+
:where(&, &-large, &-small, &-text) {
|
|
8
|
+
display: flex;
|
|
9
|
+
}
|
|
8
10
|
}
|
|
9
11
|
|
|
10
12
|
.flow {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
13
|
+
:where(&, &-large, &-small, &-text) {
|
|
14
|
+
flex-flow: row wrap;
|
|
15
|
+
align-items: center;
|
|
16
|
+
}
|
|
14
17
|
|
|
15
|
-
|
|
16
|
-
gap:
|
|
18
|
+
:where(&) {
|
|
19
|
+
gap: var(--flow-gap, 1rem);
|
|
17
20
|
}
|
|
18
21
|
|
|
19
|
-
&-
|
|
20
|
-
|
|
22
|
+
:where(&-large) {
|
|
23
|
+
gap: var(--flow-gap-large, calc(2 * var(--flow-gap, 1rem)));
|
|
21
24
|
}
|
|
22
25
|
|
|
23
|
-
&-
|
|
24
|
-
flex-
|
|
26
|
+
:where(&-nowrap) {
|
|
27
|
+
flex-wrap: nowrap;
|
|
25
28
|
}
|
|
26
29
|
|
|
27
|
-
&-small {
|
|
28
|
-
gap: calc(0.5 * var(--flow-gap, 1rem));
|
|
30
|
+
:where(&-small) {
|
|
31
|
+
gap: var(--flow-gap-small, calc(0.5 * var(--flow-gap, 1rem)));
|
|
29
32
|
}
|
|
30
33
|
|
|
31
|
-
&-
|
|
32
|
-
gap:
|
|
34
|
+
:where(&-text) {
|
|
35
|
+
gap: var(--flow-gap-text, 1em);
|
|
33
36
|
}
|
|
34
37
|
}
|
|
35
38
|
|
|
36
39
|
.stack {
|
|
37
|
-
|
|
38
|
-
|
|
40
|
+
:where(&, &-large, &-small, &-text) {
|
|
41
|
+
flex-flow: column nowrap;
|
|
42
|
+
}
|
|
39
43
|
|
|
40
|
-
|
|
41
|
-
gap:
|
|
44
|
+
:where(&) {
|
|
45
|
+
gap: var(--stack-gap, 1rem);
|
|
42
46
|
}
|
|
43
47
|
|
|
44
|
-
&-
|
|
45
|
-
|
|
48
|
+
:where(&-large) {
|
|
49
|
+
gap: var(--stack-gap-large, calc(2 * var(--stack-gap, 1rem)));
|
|
46
50
|
}
|
|
47
51
|
|
|
48
|
-
&-small {
|
|
49
|
-
gap: calc(0.5 * var(--stack-gap, 1rem));
|
|
52
|
+
:where(&-small) {
|
|
53
|
+
gap: var(--stack-gap-small, calc(0.5 * var(--stack-gap, 1rem)));
|
|
50
54
|
}
|
|
51
55
|
|
|
52
|
-
&-
|
|
53
|
-
gap:
|
|
56
|
+
:where(&-text) {
|
|
57
|
+
gap: var(--stack-gap-text, 1em);
|
|
54
58
|
}
|
|
55
59
|
}
|
|
56
60
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
+
.flex {
|
|
62
|
+
&-reverse {
|
|
63
|
+
:where(&[class^='flow' i], &[class*=' flow' i]) {
|
|
64
|
+
flex-direction: row-reverse;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
:where(&[class^='stack' i], &[class*=' stack' i]) {
|
|
68
|
+
flex-direction: column-reverse;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
$alignmentOrigins: (
|
|
74
|
+
c: 'content',
|
|
75
|
+
i: 'items',
|
|
76
|
+
s: 'self',
|
|
77
|
+
);
|
|
78
|
+
|
|
79
|
+
$alignmentValues: (
|
|
80
|
+
c: 'center',
|
|
81
|
+
fe: 'flex-end',
|
|
82
|
+
fs: 'flex-start',
|
|
83
|
+
s: 'stretch',
|
|
84
|
+
);
|
|
85
|
+
|
|
86
|
+
$justificationValues: (
|
|
87
|
+
sa: 'space-around',
|
|
88
|
+
sb: 'space-between',
|
|
89
|
+
se: 'space-evenly',
|
|
90
|
+
);
|
|
91
|
+
|
|
92
|
+
$types: (
|
|
93
|
+
a: 'align',
|
|
94
|
+
j: 'justify',
|
|
95
|
+
);
|
|
61
96
|
|
|
62
97
|
@each $typeKey, $typeValue in $types {
|
|
63
98
|
@each $alignmentOriginKey, $alignmentOriginValue in $alignmentOrigins {
|
|
64
99
|
.flex-#{$typeKey}#{$alignmentOriginKey} {
|
|
65
100
|
@each $alignmentValueKey, $alignmentValueValue in $alignmentValues {
|
|
66
|
-
&-#{$alignmentValueKey} {
|
|
67
|
-
#{$typeValue}-#{$alignmentOriginValue}: #{$alignmentValueValue}
|
|
101
|
+
:where(&-#{$alignmentValueKey}) {
|
|
102
|
+
#{$typeValue}-#{$alignmentOriginValue}: #{$alignmentValueValue};
|
|
68
103
|
}
|
|
69
104
|
}
|
|
70
105
|
}
|
|
71
106
|
}
|
|
72
107
|
|
|
73
|
-
@each $
|
|
74
|
-
.flex-#{$typeKey}c-#{$
|
|
75
|
-
#{$typeValue}-content: #{$
|
|
108
|
+
@each $justificationKey, $justificationValue in $justificationValues {
|
|
109
|
+
:where(.flex-#{$typeKey}c-#{$justificationKey}) {
|
|
110
|
+
#{$typeValue}-content: #{$justificationValue};
|
|
76
111
|
}
|
|
77
112
|
}
|
|
78
113
|
}
|
package/src/css/reset.scss
CHANGED
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
:where(a) {
|
|
73
73
|
background-color: transparent; // Remove the gray background on active links in IE10 [RS]
|
|
74
74
|
text-decoration-skip-ink: auto;
|
|
75
|
-
text-underline-offset: .125em;
|
|
75
|
+
text-underline-offset: 0.125em;
|
|
76
76
|
}
|
|
77
77
|
|
|
78
78
|
:where(abbr[title]) {
|
|
@@ -200,7 +200,8 @@
|
|
|
200
200
|
-webkit-appearance: none; // Change the inconsistent appearance in all browsers [SE]
|
|
201
201
|
appearance: none; // ditto
|
|
202
202
|
padding-right: 1em; // ditto
|
|
203
|
-
background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E")
|
|
203
|
+
background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E")
|
|
204
|
+
no-repeat right center / 1em; // ditto
|
|
204
205
|
border-radius: 0; // ditto
|
|
205
206
|
}
|
|
206
207
|
|