@uncinq/css-components 1.13.2 → 1.15.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 (7) hide show
  1. package/README.md +5 -2
  2. package/css/components/alert.css +15 -1
  3. package/css/components/btn-toggle-video.css +29 -0
  4. package/css/components/media.css +4 -0
  5. package/css/components/video.css +28 -0
  6. package/css/index.css +2 -0
  7. package/package.json +1 -1
package/README.md CHANGED
@@ -24,14 +24,16 @@ Each component file contains only CSS rules, using the tokens defined in the two
24
24
  Component styles are declared inside `@layer components`, utilities inside `@layer utilities`:
25
25
 
26
26
  ```css
27
- @layer reset, tokens, vendors, base, layouts, components, pages, utilities;
27
+ @layer reset, tokens, libs, vendors, base, layouts, components, pages, utilities;
28
28
  ```
29
29
 
30
30
  This means:
31
31
 
32
32
  - Components never bleed into base or layout styles
33
33
  - Project-level `@layer components` rules always win over these defaults
34
- - Vendors (e.g. Splide) sit below project components but above base
34
+ - Third-party stylesheets (`libs`, e.g. Splide) sit at the bottom, and the CSS
35
+ that overrides them (`vendors`) right above — so a lazily loaded library
36
+ cannot win on source order
35
37
  - Utilities come last, so `.scrollsnap` wins over the grid a component declares for itself
36
38
 
37
39
  ---
@@ -117,6 +119,7 @@ css/
117
119
  nav-accessibility.css ← accessibility skip links / focus helpers
118
120
  nav-title.css ← navigation bar title
119
121
  pagination.css ← pagination control
122
+ video.css ← native video wrapper with its play/pause control
120
123
  utilities/
121
124
  scrollsnap.css ← .scrollsnap[-sm|-md|-lg|-xl] — turns a grid into a snapping carousel
122
125
  ```
package/css/components/alert.css CHANGED
@@ -25,7 +25,11 @@
25
25
  color: var(--alert-color-text);
26
26
  display: flex;
27
27
  font-weight: var(--font-weight-semibold);
28
- gap: var(--alert-gap);
28
+ gap: var(--spacing-xs);
29
+ }
30
+
31
+ * {
32
+ margin-block: 0;
29
33
  }
30
34
 
31
35
  &:has(.icon:first-child):not(:has(.alert-heading)) {
@@ -37,42 +41,52 @@
37
41
  /* Variants */
38
42
  .alert-brand {
39
43
  --alert-color-background: var(--color-brand-muted);
44
+ --alert-color-border: var(--color-brand-strong);
40
45
  --alert-color-text: var(--color-brand-strong);
41
46
  }
42
47
  .alert-danger {
43
48
  --alert-color-background: var(--color-danger-muted);
49
+ --alert-color-border: var(--color-danger-strong);
44
50
  --alert-color-text: var(--color-danger-strong);
45
51
  }
46
52
  .alert-dark {
47
53
  --alert-color-background: var(--color-dark-muted);
54
+ --alert-color-border: var(--color-dark-strong);
48
55
  --alert-color-text: var(--color-dark-strong);
49
56
  }
50
57
  .alert-info {
51
58
  --alert-color-background: var(--color-info-muted);
59
+ --alert-color-border: var(--color-info-strong);
52
60
  --alert-color-text: var(--color-info-strong);
53
61
  }
54
62
  .alert-light {
55
63
  --alert-color-background: var(--color-light-muted);
64
+ --alert-color-border: var(--color-light-strong);
56
65
  --alert-color-text: var(--color-light-strong);
57
66
  }
58
67
  .alert-neutral {
59
68
  --alert-color-background: var(--color-neutral-muted);
69
+ --alert-color-border: var(--color-neutral-strong);
60
70
  --alert-color-text: var(--color-neutral-strong);
61
71
  }
62
72
  .alert-primary {
63
73
  --alert-color-background: var(--color-brand-muted);
74
+ --alert-color-border: var(--color-brand-strong);
64
75
  --alert-color-text: var(--color-brand-strong);
65
76
  }
66
77
  .alert-secondary {
67
78
  --alert-color-background: var(--color-neutral-muted);
79
+ --alert-color-border: var(--color-neutral-strong);
68
80
  --alert-color-text: var(--color-neutral-strong);
69
81
  }
70
82
  .alert-success {
71
83
  --alert-color-background: var(--color-success-muted);
84
+ --alert-color-border: var(--color-success-strong);
72
85
  --alert-color-text: var(--color-success-strong);
73
86
  }
74
87
  .alert-warning {
75
88
  --alert-color-background: var(--color-warning-muted);
89
+ --alert-color-border: var(--color-warning-strong);
76
90
  --alert-color-text: var(--color-warning-strong);
77
91
  }
78
92
  }
package/css/components/btn-toggle-video.css ADDED
@@ -0,0 +1,29 @@
1
+ /* components/btn-toggle-video.css */
2
+ /*
3
+ * .btn-toggle-video — play/pause control overlaid on a video that autoplays
4
+ * without the native controls (WCAG). It stays transparent so the video shows
5
+ * through it, and the `.is-playing` state, set by the script driving the
6
+ * video, decides which of the two icons is displayed. The .video wrapper
7
+ * places it — see video.css.
8
+ *
9
+ * Structure:
10
+ * button.btn.btn-toggle-video[.is-playing]
11
+ * .icon-pause
12
+ * .icon-play
13
+ */
14
+ @layer components {
15
+ .btn-toggle-video {
16
+ --btn-color-background: transparent;
17
+ --btn-color-background-hover: transparent;
18
+ --btn-color-border: transparent;
19
+ --btn-color-border-hover: transparent;
20
+
21
+ &:not(.is-playing) .icon-pause {
22
+ display: none;
23
+ }
24
+
25
+ &.is-playing .icon-play {
26
+ display: none;
27
+ }
28
+ }
29
+ }
package/css/components/media.css CHANGED
@@ -11,6 +11,10 @@
11
11
  background-color: var(--media-color-background);
12
12
  overflow: hidden;
13
13
 
14
+ .video {
15
+ height: 100%;
16
+ }
17
+
14
18
  picture {
15
19
  display: block;
16
20
  }
package/css/components/video.css ADDED
@@ -0,0 +1,28 @@
1
+ /* components/video.css */
2
+ /*
3
+ * .video — wrapper for a native video, with an optional control overlaid on it
4
+ * when the video autoplays without the native ones (WCAG).
5
+ * Inside a .media the wrapper is stretched to fill it — see media.css.
6
+ *
7
+ * Structure:
8
+ * div.video
9
+ * video
10
+ * button.btn.btn-toggle-video
11
+ */
12
+ @layer components {
13
+ .video {
14
+ position: relative;
15
+
16
+ video {
17
+ aspect-ratio: var(--video-ratio, var(--ratio-video));
18
+ width: 100%;
19
+ }
20
+
21
+ .btn-toggle-video {
22
+ inset-block-end: 0;
23
+ inset-inline-end: 0;
24
+ position: absolute;
25
+ z-index: 10;
26
+ }
27
+ }
28
+ }
package/css/index.css CHANGED
@@ -10,6 +10,7 @@
10
10
  @import 'components/btn-search.css';
11
11
  @import 'components/btn-share.css';
12
12
  @import 'components/btn-toc.css';
13
+ @import 'components/btn-toggle-video.css';
13
14
  @import 'components/card.css';
14
15
  @import 'components/drawer.css';
15
16
  @import 'components/dropdown.css';
@@ -26,6 +27,7 @@
26
27
  @import 'components/pagination.css';
27
28
  @import 'components/panel.css';
28
29
  @import 'components/surtitle.css';
30
+ @import 'components/video.css';
29
31
 
30
32
  /* Utilities — @layer utilities, last layer */
31
33
  @import 'utilities/scrollsnap.css';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uncinq/css-components",
3
- "version": "1.13.2",
3
+ "version": "1.15.0",
4
4
  "description": "Framework-agnostic CSS component implementations.",
5
5
  "license": "MIT",
6
6
  "repository": {