@nordcode/ui 2.0.1 → 2.0.2

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/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ ## 2.0.2 (2025-05-10)
2
+
3
+ ### improvements
4
+
5
+ - increase focus-visible visibility
6
+ - small utility tweaks
7
+
1
8
  ## 2.0.1 (2025-05-04)
2
9
 
3
10
  ### improvements
package/out/bundle.css CHANGED
@@ -328,8 +328,9 @@
328
328
  }
329
329
 
330
330
  :where(:not(:active):focus-visible) {
331
- outline: var(--border-width-medium) solid var(--color-brand-primary-base);
332
- outline-offset: var(--control-spacing-near, .5em);
331
+ outline: 2px solid var(--color-brand-primary-base);
332
+ box-shadow: 0 0 0 2px var(--color-surface-base);
333
+ outline-offset: 2px;
333
334
  }
334
335
 
335
336
  :where(:focus:not(:focus-visible)) {
@@ -377,6 +378,10 @@
377
378
  display: block;
378
379
  }
379
380
 
381
+ :where(svg) {
382
+ flex: none;
383
+ }
384
+
380
385
  :where(img, svg, video) {
381
386
  block-size: auto;
382
387
  max-inline-size: 100%;
@@ -628,7 +633,7 @@
628
633
  cursor: pointer;
629
634
  letter-spacing: var(--tracking-tight);
630
635
  text-decoration: underline;
631
- text-decoration-thickness: from-font;
636
+ text-decoration-thickness: .1em;
632
637
  }
633
638
 
634
639
  :where(a, .nc-link):visited {
@@ -110,8 +110,9 @@
110
110
  }
111
111
 
112
112
  :where(:not(:active):focus-visible) {
113
- outline: var(--border-width-medium) solid var(--color-brand-primary-base);
114
- outline-offset: var(--control-spacing-near, .5em);
113
+ outline: 2px solid var(--color-brand-primary-base);
114
+ box-shadow: 0 0 0 2px var(--color-surface-base);
115
+ outline-offset: 2px;
115
116
  }
116
117
 
117
118
  :where(:focus:not(:focus-visible)) {
@@ -159,6 +160,10 @@
159
160
  display: block;
160
161
  }
161
162
 
163
+ :where(svg) {
164
+ flex: none;
165
+ }
166
+
162
167
  :where(img, svg, video) {
163
168
  block-size: auto;
164
169
  max-inline-size: 100%;
@@ -410,7 +415,7 @@
410
415
  cursor: pointer;
411
416
  letter-spacing: var(--tracking-tight);
412
417
  text-decoration: underline;
413
- text-decoration-thickness: from-font;
418
+ text-decoration-thickness: .1em;
414
419
  }
415
420
 
416
421
  :where(a, .nc-link):visited {
package/out/complete.css CHANGED
@@ -328,8 +328,9 @@
328
328
  }
329
329
 
330
330
  :where(:not(:active):focus-visible) {
331
- outline: var(--border-width-medium) solid var(--color-brand-primary-base);
332
- outline-offset: var(--control-spacing-near, .5em);
331
+ outline: 2px solid var(--color-brand-primary-base);
332
+ box-shadow: 0 0 0 2px var(--color-surface-base);
333
+ outline-offset: 2px;
333
334
  }
334
335
 
335
336
  :where(:focus:not(:focus-visible)) {
@@ -377,6 +378,10 @@
377
378
  display: block;
378
379
  }
379
380
 
381
+ :where(svg) {
382
+ flex: none;
383
+ }
384
+
380
385
  :where(img, svg, video) {
381
386
  block-size: auto;
382
387
  max-inline-size: 100%;
@@ -628,7 +633,7 @@
628
633
  cursor: pointer;
629
634
  letter-spacing: var(--tracking-tight);
630
635
  text-decoration: underline;
631
- text-decoration-thickness: from-font;
636
+ text-decoration-thickness: .1em;
632
637
  }
633
638
 
634
639
  :where(a, .nc-link):visited {
@@ -110,8 +110,9 @@
110
110
  }
111
111
 
112
112
  :where(:not(:active):focus-visible) {
113
- outline: var(--border-width-medium) solid var(--color-brand-primary-base);
114
- outline-offset: var(--control-spacing-near, .5em);
113
+ outline: 2px solid var(--color-brand-primary-base);
114
+ box-shadow: 0 0 0 2px var(--color-surface-base);
115
+ outline-offset: 2px;
115
116
  }
116
117
 
117
118
  :where(:focus:not(:focus-visible)) {
@@ -159,6 +160,10 @@
159
160
  display: block;
160
161
  }
161
162
 
163
+ :where(svg) {
164
+ flex: none;
165
+ }
166
+
162
167
  :where(img, svg, video) {
163
168
  block-size: auto;
164
169
  max-inline-size: 100%;
@@ -410,7 +415,7 @@
410
415
  cursor: pointer;
411
416
  letter-spacing: var(--tracking-tight);
412
417
  text-decoration: underline;
413
- text-decoration-thickness: from-font;
418
+ text-decoration-thickness: .1em;
414
419
  }
415
420
 
416
421
  :where(a, .nc-link):visited {
package/package.json CHANGED
@@ -12,7 +12,7 @@
12
12
  "type": "git",
13
13
  "url": "https://github.com/nordcode-agency/nordcode/tree/main/packages/ui"
14
14
  },
15
- "version": "2.0.1",
15
+ "version": "2.0.2",
16
16
  "publishConfig": {
17
17
  "access": "public"
18
18
  },
@@ -210,7 +210,7 @@
210
210
  font-family: var(--font-family-link);
211
211
  text-decoration: underline;
212
212
  text-underline-offset: var(--control-spacing-nearest, 0.375em);
213
- text-decoration-thickness: from-font;
213
+ text-decoration-thickness: 0.1em;
214
214
  font-weight: var(--font-weight-default);
215
215
  text-decoration-color: currentColor;
216
216
  cursor: pointer;
@@ -27,8 +27,9 @@
27
27
  }
28
28
 
29
29
  :where(:not(:active):focus-visible) {
30
- outline: var(--border-width-medium) solid var(--color-brand-primary-base);
31
- outline-offset: var(--control-spacing-near, 0.5em);
30
+ outline: 2px solid var(--color-brand-primary-base);
31
+ box-shadow: 0 0 0 2px var(--color-surface-base);
32
+ outline-offset: 2px;
32
33
  }
33
34
 
34
35
  :where(:focus:not(:focus-visible)) {
@@ -81,6 +82,10 @@
81
82
  display: block;
82
83
  }
83
84
 
85
+ :where(svg) {
86
+ flex: none;
87
+ }
88
+
84
89
  :where(img, svg, video) {
85
90
  max-inline-size: 100%;
86
91
  block-size: auto;