@uncinq/css-components 0.4.0 → 1.0.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 (32) hide show
  1. package/css/components/alert.css +67 -0
  2. package/css/components/badge.css +63 -0
  3. package/css/components/banner.css +54 -0
  4. package/css/{component → components}/breadcrumb.css +3 -3
  5. package/css/{component → components}/btn-close.css +4 -4
  6. package/css/{component → components}/btn-filter.css +3 -3
  7. package/css/{component → components}/btn-menu.css +5 -5
  8. package/css/components/btn-search.css +22 -0
  9. package/css/components/btn-share.css +22 -0
  10. package/css/{component → components}/btn-toc.css +6 -6
  11. package/css/{component → components}/button.css +36 -36
  12. package/css/{component → components}/card.css +9 -9
  13. package/css/{component → components}/drawer.css +1 -1
  14. package/css/{component → components}/dropdown.css +6 -6
  15. package/css/{component → components}/list.css +1 -1
  16. package/css/{component → components}/map.css +1 -1
  17. package/css/{component → components}/media.css +2 -2
  18. package/css/{component → components}/nav-accessibility.css +3 -3
  19. package/css/components/nav-title.css +13 -0
  20. package/css/{component → components}/nav.css +5 -5
  21. package/css/{component → components}/pagination.css +4 -4
  22. package/css/index.css +24 -24
  23. package/package.json +2 -2
  24. package/css/component/alert.css +0 -43
  25. package/css/component/badge.css +0 -63
  26. package/css/component/banner.css +0 -30
  27. package/css/component/btn-search.css +0 -22
  28. package/css/component/btn-share.css +0 -22
  29. package/css/component/nav-title.css +0 -13
  30. /package/css/{component → components}/embed.css +0 -0
  31. /package/css/{component → components}/form.css +0 -0
  32. /package/css/{component → components}/items.css +0 -0
package/css/components/alert.css ADDED
@@ -0,0 +1,67 @@
1
+ /* components/alert.css */
2
+ @layer components {
3
+ .alert {
4
+ --color-link-default: var(--alert-color-text);
5
+ background-color: var(--alert-color-background);
6
+ border: var(--alert-border-width) var(--alert-border-style) var(--alert-color-border);
7
+ border-radius: var(--alert-border-radius);
8
+ color: var(--alert-color-text);
9
+ display: flex;
10
+ flex-direction: column;
11
+ font-size: var(--alert-font-size);
12
+ gap: var(--alert-gap);
13
+ margin: var(--alert-margin);
14
+ padding: var(--alert-padding);
15
+
16
+ > * {
17
+ margin: 0;
18
+ }
19
+
20
+ .alert-heading {
21
+ align-items: center;
22
+ color: var(--alert-color-text);
23
+ display: flex;
24
+ font-weight: var(--font-weight-semibold);
25
+ gap: var(--alert-gap);
26
+ }
27
+
28
+ &:has(.icon:first-child):not(:has(.alert-heading)) {
29
+ flex-direction: row;
30
+ align-items: flex-start;
31
+ }
32
+ }
33
+
34
+ /* Variants */
35
+ .alert-danger {
36
+ --alert-color-background: var(--color-danger-muted);
37
+ --alert-color-text: var(--color-danger-strong);
38
+ }
39
+ .alert-dark {
40
+ --alert-color-background: var(--color-dark-muted);
41
+ --alert-color-text: var(--color-dark-strong);
42
+ }
43
+ .alert-info {
44
+ --alert-color-background: var(--color-info-muted);
45
+ --alert-color-text: var(--color-info-strong);
46
+ }
47
+ .alert-light {
48
+ --alert-color-background: var(--color-light-muted);
49
+ --alert-color-text: var(--color-light-strong);
50
+ }
51
+ .alert-primary {
52
+ --alert-color-background: var(--color-primary-muted);
53
+ --alert-color-text: var(--color-primary-strong);
54
+ }
55
+ .alert-secondary {
56
+ --alert-color-background: var(--color-secondary-muted);
57
+ --alert-color-text: var(--color-secondary-strong);
58
+ }
59
+ .alert-success {
60
+ --alert-color-background: var(--color-success-muted);
61
+ --alert-color-text: var(--color-success-strong);
62
+ }
63
+ .alert-warning {
64
+ --alert-color-background: var(--color-warning-muted);
65
+ --alert-color-text: var(--color-warning-strong);
66
+ }
67
+ }
package/css/components/badge.css ADDED
@@ -0,0 +1,63 @@
1
+ /* components/badge.css */
2
+ @layer components {
3
+ .badge {
4
+ background-color: var(--badge-color-background);
5
+ border: var(--badge-border-width) var(--badge-border-style) var(--badge-color-border);
6
+ border-radius: var(--badge-border-radius);
7
+ color: var(--badge-color-text);
8
+ display: inline-flex;
9
+ font-size: var(--badge-font-size);
10
+ font-weight: var(--badge-font-weight);
11
+ padding: var(--badge-padding-block) var(--badge-padding-inline);
12
+ text-decoration: none;
13
+ }
14
+
15
+ @media (hover: hover) and (pointer: fine) {
16
+ a.badge:hover {
17
+ background-color: var(--badge-color-background-hover, var(--badge-color-background));
18
+ color: var(--badge-color-text-hover, var(--badge-color-text));
19
+ }
20
+ }
21
+
22
+ /* Variants */
23
+ .badge-danger {
24
+ --badge-color-background: var(--color-danger);
25
+ --badge-color-background-hover: var(--color-danger-strong);
26
+ --badge-color-text: var(--color-text-on-danger);
27
+ }
28
+ .badge-dark {
29
+ --badge-color-background: var(--color-dark);
30
+ --badge-color-background-hover: var(--color-dark-strong);
31
+ --badge-color-text: var(--color-text-on-dark);
32
+ }
33
+ .badge-info {
34
+ --badge-color-background: var(--color-info);
35
+ --badge-color-background-hover: var(--color-info-strong);
36
+ --badge-color-text: var(--color-text-on-info);
37
+ }
38
+ .badge-light {
39
+ --badge-color-background: var(--color-light);
40
+ --badge-color-background-hover: var(--color-light-strong);
41
+ --badge-color-text: var(--color-text-on-light);
42
+ }
43
+ .badge-primary {
44
+ --badge-color-background: var(--color-primary);
45
+ --badge-color-background-hover: var(--color-primary-strong);
46
+ --badge-color-text: var(--color-text-on-primary);
47
+ }
48
+ .badge-secondary {
49
+ --badge-color-background: var(--color-secondary);
50
+ --badge-color-background-hover: var(--color-secondary-strong);
51
+ --badge-color-text: var(--color-text-on-secondary);
52
+ }
53
+ .badge-success {
54
+ --badge-color-background: var(--color-success);
55
+ --badge-color-background-hover: var(--color-success-strong);
56
+ --badge-color-text: var(--color-text-on-success);
57
+ }
58
+ .badge-warning {
59
+ --badge-color-background: var(--color-warning);
60
+ --badge-color-background-hover: var(--color-warning-strong);
61
+ --badge-color-text: var(--color-text-on-warning);
62
+ }
63
+ }
package/css/components/banner.css ADDED
@@ -0,0 +1,54 @@
1
+ /* components/banner.css */
2
+ @layer components {
3
+ .banner {
4
+ --color-link: var(--alert-color-text);
5
+ background-color: var(--alert-color-background);
6
+ border-radius: var(--alert-border-radius);
7
+ color: var(--alert-color-text);
8
+ display: flex;
9
+ flex-direction: column;
10
+ font-size: var(--alert-font-size);
11
+ gap: var(--alert-gap);
12
+ padding: var(--alert-padding);
13
+ padding-inline: 0;
14
+ text-align: center;
15
+
16
+ p {
17
+ margin: 0 auto;
18
+ }
19
+ }
20
+
21
+ /* Variants */
22
+ .banner-danger {
23
+ --alert-color-background: var(--color-danger-muted);
24
+ --alert-color-text: var(--color-danger-strong);
25
+ }
26
+ .banner-dark {
27
+ --alert-color-background: var(--color-dark-muted);
28
+ --alert-color-text: var(--color-dark-strong);
29
+ }
30
+ .banner-info {
31
+ --alert-color-background: var(--color-info-muted);
32
+ --alert-color-text: var(--color-info-strong);
33
+ }
34
+ .banner-light {
35
+ --alert-color-background: var(--color-light-muted);
36
+ --alert-color-text: var(--color-light-strong);
37
+ }
38
+ .banner-primary {
39
+ --alert-color-background: var(--color-primary-muted);
40
+ --alert-color-text: var(--color-primary-strong);
41
+ }
42
+ .banner-secondary {
43
+ --alert-color-background: var(--color-secondary-muted);
44
+ --alert-color-text: var(--color-secondary-strong);
45
+ }
46
+ .banner-success {
47
+ --alert-color-background: var(--color-success-muted);
48
+ --alert-color-text: var(--color-success-strong);
49
+ }
50
+ .banner-warning {
51
+ --alert-color-background: var(--color-warning-muted);
52
+ --alert-color-text: var(--color-warning-strong);
53
+ }
54
+ }
package/css/{component → components}/breadcrumb.css RENAMED
@@ -1,9 +1,9 @@
1
1
  /* components/breadcrumb.css */
2
2
  @layer components {
3
3
  .breadcrumb-wrapper {
4
- border-bottom: var(--breadcrumb-border);
5
- border-top: var(--breadcrumb-border);
6
- padding-block: var(--breadcrumb-padding);
4
+ border-block-end: var(--breadcrumb-border-width) var(--breadcrumb-border-style) var(--breadcrumb-color-border);
5
+ border-block-start: var(--breadcrumb-border-width) var(--breadcrumb-border-style) var(--breadcrumb-color-border);
6
+ padding-block: var(--breadcrumb-padding-block);
7
7
 
8
8
  ol {
9
9
  display: flex;
package/css/{component → components}/btn-close.css RENAMED
@@ -1,10 +1,10 @@
1
- /* component/btn-close.css */
1
+ /* components/btn-close.css */
2
2
  /* Close button */
3
3
  @layer components {
4
4
  .btn-close {
5
5
  align-items: center;
6
6
  appearance: none;
7
- background-color: var(--btn-close-color-bg, var(--btn-control-color-bg));
7
+ background-color: var(--btn-close-color-background, var(--btn-control-color-background));
8
8
  border: var(--btn-close-border-width, var(--btn-border-width)) var(--btn-close-border-style, var(--btn-border-style)) var(--btn-close-color-border, var(--btn-control-color-border));
9
9
  border-radius: var(--btn-close-border-radius, var(--btn-border-radius));
10
10
  color: var(--btn-close-color-text, var(--btn-control-color-text));
@@ -13,7 +13,7 @@
13
13
  font-size: var(--btn-close-font-size, var(--btn-font-size));
14
14
  font-weight: var(--btn-close-font-weight, var(--btn-font-weight));
15
15
  gap: var(--btn-close-gap, var(--btn-gap));
16
- padding: var(--btn-close-padding-y, var(--btn-padding-y)) var(--btn-close-padding-x, var(--btn-padding-x));
16
+ padding: var(--btn-close-padding-block, var(--btn-padding-block)) var(--btn-close-padding-inline, var(--btn-padding-inline));
17
17
  text-decoration-color: var(--btn-close-color-text-decoration, var(--btn-color-text-decoration));
18
18
  text-decoration-line: var(--btn-text-decoration-line);
19
19
  text-decoration-thickness: var(--text-decoration-thickness);
@@ -31,7 +31,7 @@
31
31
 
32
32
  @media (hover: hover) and (pointer: fine) {
33
33
  &:hover {
34
- background-color: var(--btn-close-color-bg-hover, var(--btn-control-color-bg-hover));
34
+ background-color: var(--btn-close-color-background-hover, var(--btn-control-color-background-hover));
35
35
  color: var(--btn-close-color-text-hover, var(--btn-control-color-text-hover));
36
36
  text-decoration-color: var(--btn-close-color-text-decoration-hover, var(--btn-color-text-decoration-hover));
37
37
  }
package/css/{component → components}/btn-filter.css RENAMED
@@ -1,10 +1,10 @@
1
- /* component/btn-filter.css */
1
+ /* components/btn-filter.css */
2
2
  /* Filters toggle button — requires .btn base class */
3
3
  @layer components {
4
4
  .btn-filter {
5
5
  /* Scope --btn-color-* to control values, allow per-button overrides */
6
- --btn-color-bg: var(--btn-filter-color-bg, var(--btn-control-color-bg));
7
- --btn-color-bg-hover: var(--btn-filter-color-bg-hover, var(--btn-control-color-bg-hover));
6
+ --btn-color-background: var(--btn-filter-color-background, var(--btn-control-color-background));
7
+ --btn-color-background-hover: var(--btn-filter-color-background-hover, var(--btn-control-color-background-hover));
8
8
  --btn-color-border: var(--btn-filter-color-border, var(--btn-control-color-border));
9
9
  --btn-color-border-hover: var(--btn-filter-color-border-hover, var(--btn-control-color-border-hover));
10
10
  --btn-color-text: var(--btn-filter-color-text, var(--btn-control-color-text));
package/css/{component → components}/btn-menu.css RENAMED
@@ -1,10 +1,10 @@
1
- /* component/btn-menu.css */
1
+ /* components/btn-menu.css */
2
2
  /* Menu toggle button */
3
3
  @layer components {
4
4
  .btn-menu {
5
5
  align-items: center;
6
6
  appearance: none;
7
- background-color: var(--btn-menu-color-bg, var(--btn-control-color-bg));
7
+ background-color: var(--btn-menu-color-background, var(--btn-control-color-background));
8
8
  border: var(--btn-menu-border-width, var(--btn-border-width)) var(--btn-menu-border-style, var(--btn-border-style)) var(--btn-menu-color-border, var(--btn-control-color-border));
9
9
  border-radius: var(--btn-menu-border-radius, var(--btn-border-radius));
10
10
  color: var(--btn-menu-color-text, var(--btn-control-color-text));
@@ -13,8 +13,8 @@
13
13
  font-size: var(--btn-menu-font-size, var(--btn-font-size));
14
14
  font-weight: var(--btn-menu-font-weight, var(--btn-font-weight));
15
15
  gap: var(--btn-menu-gap, var(--btn-gap));
16
- padding-block: var(--btn-menu-padding-y, var(--btn-padding-y));
17
- padding-inline: var(--btn-menu-padding-x, var(--btn-padding-x));
16
+ padding-block: var(--btn-menu-padding-block, var(--btn-padding-block));
17
+ padding-inline: var(--btn-menu-padding-inline, var(--btn-padding-inline));
18
18
  text-decoration-color: var(--btn-menu-color-text-decoration, var(--btn-color-text-decoration));
19
19
  text-decoration-line: var(--btn-text-decoration-line);
20
20
  text-decoration-thickness: var(--text-decoration-thickness);
@@ -32,7 +32,7 @@
32
32
 
33
33
  @media (hover: hover) and (pointer: fine) {
34
34
  &:hover {
35
- background-color: var(--btn-menu-color-bg-hover, var(--btn-control-color-bg-hover));
35
+ background-color: var(--btn-menu-color-background-hover, var(--btn-control-color-background-hover));
36
36
  color: var(--btn-menu-color-text-hover, var(--btn-control-color-text-hover));
37
37
  text-decoration-color: var(--btn-menu-color-text-decoration-hover, var(--btn-color-text-decoration-hover));
38
38
  }
package/css/components/btn-search.css ADDED
@@ -0,0 +1,22 @@
1
+ /* components/btn-search.css */
2
+ /* Search button — requires .btn base class */
3
+ @layer components {
4
+ .btn-search {
5
+ /* Scope --btn-color-* to control values, allow per-button overrides */
6
+ --btn-color-background: var(--btn-search-color-background, var(--btn-control-color-background));
7
+ --btn-color-background-hover: var(--btn-search-color-background-hover, var(--btn-control-color-background-hover));
8
+ --btn-color-border: var(--btn-search-color-border, var(--btn-control-color-border));
9
+ --btn-color-border-hover: var(--btn-search-color-border-hover, var(--btn-control-color-border-hover));
10
+ --btn-color-text: var(--btn-search-color-text, var(--btn-control-color-text));
11
+ --btn-color-text-hover: var(--btn-search-color-text-hover, var(--btn-control-color-text-hover));
12
+
13
+ &::before {
14
+ background-color: currentColor;
15
+ content: '';
16
+ flex-shrink: 0;
17
+ height: var(--icon-size);
18
+ mask: var(--icon-search) center / var(--icon-size) no-repeat;
19
+ width: var(--icon-size);
20
+ }
21
+ }
22
+ }
package/css/components/btn-share.css ADDED
@@ -0,0 +1,22 @@
1
+ /* components/btn-share.css */
2
+ /* Share button — requires .btn base class */
3
+ @layer components {
4
+ .btn-share {
5
+ /* Scope --btn-color-* to control values, allow per-button overrides */
6
+ --btn-color-background: var(--btn-share-color-background, var(--btn-control-color-background));
7
+ --btn-color-background-hover: var(--btn-share-color-background-hover, var(--btn-control-color-background-hover));
8
+ --btn-color-border: var(--btn-share-color-border, var(--btn-control-color-border));
9
+ --btn-color-border-hover: var(--btn-share-color-border-hover, var(--btn-control-color-border-hover));
10
+ --btn-color-text: var(--btn-share-color-text, var(--btn-control-color-text));
11
+ --btn-color-text-hover: var(--btn-share-color-text-hover, var(--btn-control-color-text-hover));
12
+
13
+ &::before {
14
+ background-color: currentColor;
15
+ content: '';
16
+ flex-shrink: 0;
17
+ height: var(--icon-size);
18
+ mask: var(--icon-share) center / var(--icon-size) no-repeat;
19
+ width: var(--icon-size);
20
+ }
21
+ }
22
+ }
package/css/{component → components}/btn-toc.css RENAMED
@@ -1,14 +1,14 @@
1
- /* component/btn-toc.css */
1
+ /* components/btn-toc.css */
2
2
  /* Table of contents toggle button — requires .btn base class */
3
3
  @layer components {
4
4
  .btn-toc {
5
5
  /* Scope --btn-color-* to control values, allow per-button overrides */
6
- --btn-color-bg: var(--btn-toc-color-bg, var(--btn-control-color-bg));
7
- --btn-color-bg-hover: var(--btn-toc-color-bg-hover, var(--btn-control-color-bg-hover));
8
- --btn-color-border: var(--btn-toc-color-border, var(--btn-control-color-border));
6
+ --btn-color-background: var(--btn-toc-color-background, var(--btn-control-color-background));
7
+ --btn-color-background-hover: var(--btn-toc-color-background-hover, var(--btn-control-color-background-hover));
8
+ --btn-color-border: var(--btn-toc-color-border, var(--btn-control-color-border));
9
9
  --btn-color-border-hover: var(--btn-toc-color-border-hover, var(--btn-control-color-border-hover));
10
- --btn-color-text: var(--btn-toc-color-text, var(--btn-control-color-text));
11
- --btn-color-text-hover: var(--btn-toc-color-text-hover, var(--btn-control-color-text-hover));
10
+ --btn-color-text: var(--btn-toc-color-text, var(--btn-control-color-text));
11
+ --btn-color-text-hover: var(--btn-toc-color-text-hover, var(--btn-control-color-text-hover));
12
12
 
13
13
  &::before {
14
14
  background-color: currentColor;
package/css/{component → components}/button.css RENAMED
@@ -3,7 +3,7 @@
3
3
  .btn {
4
4
  align-items: center;
5
5
  appearance: none;
6
- background-color: var(--btn-color-bg);
6
+ background-color: var(--btn-color-background);
7
7
  border: var(--btn-border-width) var(--btn-border-style) var(--btn-color-border);
8
8
  border-radius: var(--btn-border-radius);
9
9
  box-shadow: var(--btn-shadow);
@@ -14,8 +14,8 @@
14
14
  font-weight: var(--btn-font-weight);
15
15
  gap: var(--btn-gap);
16
16
  justify-content: center;
17
- padding-block: var(--btn-padding-y);
18
- padding-inline: var(--btn-padding-x);
17
+ padding-block: var(--btn-padding-block);
18
+ padding-inline: var(--btn-padding-inline);
19
19
  text-decoration-color: var(--btn-color-text-decoration);
20
20
  text-decoration-line: var(--btn-text-decoration-line);
21
21
  text-decoration-thickness: var(--text-decoration-thickness);
@@ -35,7 +35,7 @@
35
35
 
36
36
  @media (hover: hover) and (pointer: fine) {
37
37
  &:hover {
38
- background-color: var(--btn-color-bg-hover);
38
+ background-color: var(--btn-color-background-hover);
39
39
  border-color: var(--btn-color-border-hover);
40
40
  box-shadow: var(--btn-shadow-hover);
41
41
  color: var(--btn-color-text-hover);
@@ -50,8 +50,8 @@
50
50
 
51
51
  /* Variants */
52
52
  .btn-control {
53
- --btn-color-bg: var(--btn-control-color-bg);
54
- --btn-color-bg-hover: var(--btn-control-color-bg-hover);
53
+ --btn-color-background: var(--btn-control-color-background);
54
+ --btn-color-background-hover: var(--btn-control-color-background-hover);
55
55
  --btn-color-border: var(--btn-control-color-border);
56
56
  --btn-color-border-hover: var(--btn-control-color-border-hover);
57
57
  --btn-color-text: var(--btn-control-color-text);
@@ -59,24 +59,24 @@
59
59
  }
60
60
 
61
61
  .btn-danger {
62
- --btn-color-bg: var(--color-danger);
63
- --btn-color-bg-hover: var(--color-danger-strong);
62
+ --btn-color-background: var(--color-danger);
63
+ --btn-color-background-hover: var(--color-danger-strong);
64
64
  --btn-color-border: var(--color-danger);
65
65
  --btn-color-border-hover: var(--color-danger-strong);
66
66
  --btn-color-text: var(--color-text-on-danger);
67
67
  }
68
68
 
69
69
  .btn-dark {
70
- --btn-color-bg: var(--color-dark);
71
- --btn-color-bg-hover: var(--color-dark-strong);
70
+ --btn-color-background: var(--color-dark);
71
+ --btn-color-background-hover: var(--color-dark-strong);
72
72
  --btn-color-border: var(--color-dark);
73
73
  --btn-color-border-hover: var(--color-dark-strong);
74
74
  --btn-color-text: var(--color-text-on-dark);
75
75
  }
76
76
 
77
77
  .btn-ghost {
78
- --btn-color-bg: transparent;
79
- --btn-color-bg-hover: transparent;
78
+ --btn-color-background: transparent;
79
+ --btn-color-background-hover: transparent;
80
80
  --btn-color-border: transparent;
81
81
  --btn-color-border-hover: transparent;
82
82
  --btn-color-text: var(--color-text);
@@ -84,24 +84,24 @@
84
84
  }
85
85
 
86
86
  .btn-info {
87
- --btn-color-bg: var(--color-info);
88
- --btn-color-bg-hover: var(--color-info-strong);
87
+ --btn-color-background: var(--color-info);
88
+ --btn-color-background-hover: var(--color-info-strong);
89
89
  --btn-color-border: var(--color-info);
90
90
  --btn-color-border-hover: var(--color-info-strong);
91
91
  --btn-color-text: var(--color-text-on-info);
92
92
  }
93
93
 
94
94
  .btn-light {
95
- --btn-color-bg: var(--color-light);
96
- --btn-color-bg-hover: var(--color-light-strong);
95
+ --btn-color-background: var(--color-light);
96
+ --btn-color-background-hover: var(--color-light-strong);
97
97
  --btn-color-border: var(--color-light);
98
98
  --btn-color-border-hover: var(--color-light-strong);
99
99
  --btn-color-text: var(--color-text-on-light);
100
100
  }
101
101
 
102
102
  .btn-link {
103
- --btn-color-bg: transparent;
104
- --btn-color-bg-hover: transparent;
103
+ --btn-color-background: transparent;
104
+ --btn-color-background-hover: transparent;
105
105
  --btn-color-border: transparent;
106
106
  --btn-color-border-hover: transparent;
107
107
  --btn-color-text: var(--color-text);
@@ -116,32 +116,32 @@
116
116
  }
117
117
 
118
118
  .btn-primary {
119
- --btn-color-bg: var(--color-brand);
120
- --btn-color-bg-hover: var(--color-brand-strong);
119
+ --btn-color-background: var(--color-brand);
120
+ --btn-color-background-hover: var(--color-brand-strong);
121
121
  --btn-color-border: var(--color-brand);
122
122
  --btn-color-border-hover: var(--color-brand-strong);
123
123
  --btn-color-text: var(--color-text-on-brand);
124
124
  }
125
125
 
126
126
  .btn-secondary {
127
- --btn-color-bg: var(--color-secondary);
128
- --btn-color-bg-hover: var(--color-secondary-strong);
127
+ --btn-color-background: var(--color-secondary);
128
+ --btn-color-background-hover: var(--color-secondary-strong);
129
129
  --btn-color-border: var(--color-secondary);
130
130
  --btn-color-border-hover: var(--color-secondary-strong);
131
131
  --btn-color-text: var(--color-text-on-secondary);
132
132
  }
133
133
 
134
134
  .btn-success {
135
- --btn-color-bg: var(--color-success);
136
- --btn-color-bg-hover: var(--color-success-strong);
135
+ --btn-color-background: var(--color-success);
136
+ --btn-color-background-hover: var(--color-success-strong);
137
137
  --btn-color-border: var(--color-success);
138
138
  --btn-color-border-hover: var(--color-success-strong);
139
139
  --btn-color-text: var(--color-text-on-success);
140
140
  }
141
141
 
142
142
  .btn-warning {
143
- --btn-color-bg: var(--color-warning);
144
- --btn-color-bg-hover: var(--color-warning-strong);
143
+ --btn-color-background: var(--color-warning);
144
+ --btn-color-background-hover: var(--color-warning-strong);
145
145
  --btn-color-border: var(--color-warning);
146
146
  --btn-color-border-hover: var(--color-warning-strong);
147
147
  --btn-color-text: var(--color-text-on-warning);
@@ -150,31 +150,31 @@
150
150
  /* Sizes */
151
151
  .btn-xs {
152
152
  --btn-font-size: var(--font-size-xs);
153
- --btn-padding-x: var(--spacing-xs);
154
- --btn-padding-y: var(--spacing-xs);
153
+ --btn-padding-inline: var(--spacing-xs);
154
+ --btn-padding-block: var(--spacing-xs);
155
155
  }
156
156
 
157
157
  .btn-sm {
158
158
  --btn-font-size: var(--font-size-sm);
159
- --btn-padding-x: var(--spacing-sm);
160
- --btn-padding-y: var(--spacing-sm);
159
+ --btn-padding-inline: var(--spacing-sm);
160
+ --btn-padding-block: var(--spacing-sm);
161
161
  }
162
162
 
163
163
  .btn-md {
164
164
  --btn-font-size: var(--font-size-md);
165
- --btn-padding-x: var(--spacing-md);
166
- --btn-padding-y: var(--spacing-md);
165
+ --btn-padding-inline: var(--spacing-md);
166
+ --btn-padding-block: var(--spacing-md);
167
167
  }
168
168
 
169
169
  .btn-lg {
170
170
  --btn-font-size: var(--font-size-lg);
171
- --btn-padding-x: var(--spacing-lg);
172
- --btn-padding-y: var(--spacing-lg);
171
+ --btn-padding-inline: var(--spacing-lg);
172
+ --btn-padding-block: var(--spacing-lg);
173
173
  }
174
174
 
175
175
  .btn-xl {
176
176
  --btn-font-size: var(--font-size-xl);
177
- --btn-padding-x: var(--spacing-xl);
178
- --btn-padding-y: var(--spacing-xl);
177
+ --btn-padding-inline: var(--spacing-xl);
178
+ --btn-padding-block: var(--spacing-xl);
179
179
  }
180
180
  }
package/css/{component → components}/card.css RENAMED
@@ -16,8 +16,8 @@
16
16
  */
17
17
  @layer components {
18
18
  .card {
19
- background-color: var(--card-color-bg);
20
- border: var(--card-border);
19
+ background-color: var(--card-color-background);
20
+ border: var(--card-border-width) var(--card-border-style) var(--card-color-border);
21
21
  border-radius: var(--card-border-radius);
22
22
  box-shadow: var(--card-shadow);
23
23
  color: var(--card-color-text);
@@ -30,8 +30,8 @@
30
30
  flex-direction: column;
31
31
  flex: 1;
32
32
  gap: var(--card-gap);
33
- padding-block: var(--card-padding-y);
34
- padding-inline: var(--card-padding-x);
33
+ padding-block: var(--card-padding-block);
34
+ padding-inline: var(--card-padding-inline);
35
35
  text-decoration: none;
36
36
 
37
37
  > * {
@@ -51,10 +51,10 @@
51
51
  }
52
52
 
53
53
  .name {
54
- color: var(--card-color-title);
55
- font-size: var(--card-font-size-title);
56
- font-weight: var(--card-font-weight-title);
57
- line-height: var(--card-line-height-title);
54
+ color: var(--card-title-color);
55
+ font-size: var(--card-title-font-size);
56
+ font-weight: var(--card-title-font-weight);
57
+ line-height: var(--card-title-line-height);
58
58
  }
59
59
 
60
60
  .description {
@@ -63,7 +63,7 @@
63
63
 
64
64
  .media {
65
65
  --media-ratio: var(--card-media-ratio);
66
- --media-color-bg: var(--card-media-color-bg);
66
+ --media-color-background: var(--card-media-color-background);
67
67
  order: var(--card-media-order, -1);
68
68
  }
69
69
 
package/css/{component → components}/drawer.css RENAMED
@@ -28,7 +28,7 @@
28
28
  /* ── Panel ───────────────────────────────────────────────────────── */
29
29
 
30
30
  .drawer {
31
- background-color: var(--drawer-color-bg);
31
+ background-color: var(--drawer-color-background);
32
32
  bottom: var(--drawer-bottom, 0);
33
33
  box-shadow: var(--drawer-shadow);
34
34
  color: var(--drawer-color-text);
package/css/{component → components}/dropdown.css RENAMED
@@ -70,7 +70,7 @@
70
70
  /* ── Menu panel ──────────────────────────────────────────────────── */
71
71
 
72
72
  .dropdown-menu {
73
- background-color: var(--dropdown-color-bg);
73
+ background-color: var(--dropdown-color-background);
74
74
  border: var(--dropdown-border-width) var(--dropdown-border-style) var(--dropdown-color-border);
75
75
  border-radius: var(--dropdown-border-radius);
76
76
  box-shadow: var(--dropdown-shadow);
@@ -113,14 +113,14 @@
113
113
  color: var(--dropdown-color-text);
114
114
  font-size: var(--dropdown-item-font-size);
115
115
  display: block;
116
- padding-block: var(--dropdown-item-padding-y);
117
- padding-inline: var(--dropdown-item-padding-x);
116
+ padding-block: var(--dropdown-item-padding-block);
117
+ padding-inline: var(--dropdown-item-padding-inline);
118
118
  text-decoration: none;
119
119
  white-space: nowrap;
120
120
 
121
121
  @media (hover: hover) and (pointer: fine) {
122
122
  &:hover {
123
- background-color: var(--dropdown-item-color-bg-hover);
123
+ background-color: var(--dropdown-item-color-background-hover);
124
124
  }
125
125
  }
126
126
  }
@@ -130,7 +130,7 @@
130
130
  /* ── Alignment variants ──────────────────────────────────────────── */
131
131
 
132
132
  .dropdown-menu-end {
133
- left: auto;
134
- right: 0;
133
+ inset-inline-start: auto;
134
+ inset-inline-end: 0;
135
135
  }
136
136
  }
package/css/{component → components}/list.css RENAMED
@@ -12,7 +12,7 @@
12
12
  .list {
13
13
  p {
14
14
  font-weight: var(--list-label-font-weight);
15
- margin-block-end: var(--list-label-margin-bottom);
15
+ margin-block: var(--list-label-margin-block);
16
16
  }
17
17
 
18
18
  &,
package/css/{component → components}/map.css RENAMED
@@ -8,7 +8,7 @@
8
8
  @layer components {
9
9
  .map {
10
10
  aspect-ratio: var(--map-ratio);
11
- background-color: var(--map-color-bg);
11
+ background-color: var(--map-color-background);
12
12
  margin-block: var(--map-margin-block);
13
13
  overflow: hidden;
14
14
 
package/css/{component → components}/media.css RENAMED
@@ -8,7 +8,7 @@
8
8
 
9
9
  .media {
10
10
  aspect-ratio: var(--media-ratio);
11
- background-color: var(--media-color-bg);
11
+ background-color: var(--media-color-background);
12
12
  overflow: hidden;
13
13
 
14
14
  picture,
@@ -34,7 +34,7 @@
34
34
 
35
35
  .media-icon {
36
36
  --media-ratio: none;
37
- --media-color-bg: transparent;
37
+ --media-color-background: transparent;
38
38
  }
39
39
 
40
40
  }
package/css/{component → components}/nav-accessibility.css RENAMED
@@ -16,7 +16,7 @@
16
16
  .nav-accessibility {
17
17
  flex-direction: row;
18
18
  font-size: var(--font-size-xs);
19
- left: 0;
19
+ inset-inline-start: 0;
20
20
  overflow: hidden;
21
21
  position: absolute;
22
22
  transform: translateY(-100%);
@@ -31,10 +31,10 @@
31
31
  }
32
32
 
33
33
  a {
34
- background: var(--color-bg);
34
+ background: var(--color-background);
35
35
  &:focus {
36
36
  background: var(--color-text);
37
- color: var(--color-bg);
37
+ color: var(--color-background);
38
38
  outline: none;
39
39
  }
40
40
  }
package/css/components/nav-title.css ADDED
@@ -0,0 +1,13 @@
1
+ /* components/nav-title.css */
2
+ /*
3
+ * .nav-title — navigation title.
4
+ */
5
+ @layer components {
6
+ .nav-title {
7
+ font-size: var(--nav-title-font-size);
8
+ font-weight: var(--nav-title-font-weight);
9
+ margin: 0;
10
+ padding-block: var(--nav-padding-block);
11
+ padding-inline: var(--nav-padding-inline);
12
+ }
13
+ }
package/css/{component → components}/nav.css RENAMED
@@ -30,8 +30,8 @@
30
30
  /* ── Nav item ────────────────────────────────────────────────── */
31
31
 
32
32
  li {
33
- margin-block: var(--nav-margin-y, 0);
34
- margin-inline: var(--nav-margin-x, 0);
33
+ margin-block: var(--nav-margin-block, 0);
34
+ margin-inline: var(--nav-margin-inline, 0);
35
35
  position: relative;
36
36
  }
37
37
 
@@ -39,7 +39,7 @@
39
39
 
40
40
  a {
41
41
  display: block;
42
- padding: var(--nav-padding-y) var(--nav-padding-x);
42
+ padding: var(--nav-padding-block) var(--nav-padding-inline);
43
43
  }
44
44
 
45
45
  a:not(.btn) {
@@ -53,14 +53,14 @@
53
53
  li > span {
54
54
  color: var(--nav-color-text);
55
55
  display: block;
56
- padding: var(--nav-padding-y) var(--nav-padding-x);
56
+ padding: var(--nav-padding-block) var(--nav-padding-inline);
57
57
  }
58
58
 
59
59
  /* ── Item highlighted ───────────────────────────────────────────────────── */
60
60
 
61
61
  .nav-item-highlighted {
62
62
  line-height: var(--line-height-snug);
63
- margin-inline: var(--nav-padding-x);
63
+ margin-inline: var(--nav-padding-inline);
64
64
  }
65
65
  }
66
66
  }
package/css/{component → components}/pagination.css RENAMED
@@ -30,27 +30,27 @@
30
30
 
31
31
  a {
32
32
  align-items: center;
33
- background-color: var(--pagination-item-color-bg);
33
+ background-color: var(--pagination-item-color-background);
34
34
  border-radius: var(--pagination-item-border-radius);
35
35
  color: var(--pagination-item-color-text);
36
36
  display: flex;
37
37
  font-size: var(--pagination-item-font-size);
38
38
  font-weight: var(--pagination-item-font-weight);
39
- height: var(--pagination-item-size);
40
39
  justify-content: center;
40
+ min-height: var(--pagination-item-size);
41
41
  min-width: var(--pagination-item-size);
42
42
  padding-inline: var(--spacing-2xs);
43
43
  text-decoration: none;
44
44
 
45
45
  &:hover {
46
- background-color: var(--pagination-item-color-bg-hover);
46
+ background-color: var(--pagination-item-color-background-hover);
47
47
  color: var(--pagination-item-color-text-hover);
48
48
  }
49
49
  }
50
50
 
51
51
  /* Active page */
52
52
  .active a {
53
- --pagination-item-color-bg: var(--pagination-item-color-bg-active);
53
+ --pagination-item-color-background: var(--pagination-item-color-background-active);
54
54
  --pagination-item-color-text: var(--pagination-item-color-text-active);
55
55
  cursor: default;
56
56
  pointer-events: none;
package/css/index.css CHANGED
@@ -1,25 +1,25 @@
1
1
  /* css/index.css */
2
- @import 'component/alert.css';
3
- @import 'component/badge.css';
4
- @import 'component/banner.css';
5
- @import 'component/breadcrumb.css';
6
- @import 'component/button.css';
7
- @import 'component/btn-close.css';
8
- @import 'component/btn-filter.css';
9
- @import 'component/btn-menu.css';
10
- @import 'component/btn-search.css';
11
- @import 'component/btn-share.css';
12
- @import 'component/btn-toc.css';
13
- @import 'component/card.css';
14
- @import 'component/drawer.css';
15
- @import 'component/dropdown.css';
16
- @import 'component/embed.css';
17
- @import 'component/form.css';
18
- @import 'component/items.css';
19
- @import 'component/list.css';
20
- @import 'component/map.css';
21
- @import 'component/media.css';
22
- @import 'component/nav.css';
23
- @import 'component/nav-accessibility.css';
24
- @import 'component/nav-title.css';
25
- @import 'component/pagination.css';
2
+ @import 'components/alert.css';
3
+ @import 'components/badge.css';
4
+ @import 'components/banner.css';
5
+ @import 'components/breadcrumb.css';
6
+ @import 'components/button.css';
7
+ @import 'components/btn-close.css';
8
+ @import 'components/btn-filter.css';
9
+ @import 'components/btn-menu.css';
10
+ @import 'components/btn-search.css';
11
+ @import 'components/btn-share.css';
12
+ @import 'components/btn-toc.css';
13
+ @import 'components/card.css';
14
+ @import 'components/drawer.css';
15
+ @import 'components/dropdown.css';
16
+ @import 'components/embed.css';
17
+ @import 'components/form.css';
18
+ @import 'components/items.css';
19
+ @import 'components/list.css';
20
+ @import 'components/map.css';
21
+ @import 'components/media.css';
22
+ @import 'components/nav.css';
23
+ @import 'components/nav-accessibility.css';
24
+ @import 'components/nav-title.css';
25
+ @import 'components/pagination.css';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uncinq/css-components",
3
- "version": "0.4.0",
3
+ "version": "1.0.0",
4
4
  "description": "Framework-agnostic CSS component implementations.",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -24,7 +24,7 @@
24
24
  "exports": {
25
25
  ".": "./css/index.css",
26
26
  "./css/index.css": "./css/index.css",
27
- "./css/component/*": "./css/component/*"
27
+ "./css/components/*": "./css/components/*"
28
28
  },
29
29
  "style": "./css/index.css",
30
30
  "peerDependencies": {
package/css/component/alert.css DELETED
@@ -1,43 +0,0 @@
1
- /* components/alert.css */
2
- @layer components {
3
- .alert {
4
- --color-link: var(--alert-color-text);
5
- background-color: var(--alert-color-bg);
6
- border: var(--alert-border);
7
- border-radius: var(--alert-border-radius);
8
- color: var(--alert-color-text);
9
- display: flex;
10
- flex-direction: column;
11
- font-size: var(--alert-font-size);
12
- gap: var(--alert-gap);
13
- margin: var(--alert-margin);
14
- padding: var(--alert-padding);
15
-
16
- > * {
17
- margin: 0;
18
- }
19
-
20
- .alert-heading {
21
- align-items: center;
22
- color: var(--alert-color-text);
23
- display: flex;
24
- font-weight: var(--font-weight-semibold);
25
- gap: var(--alert-gap);
26
- }
27
-
28
- &:has(.icon:first-child):not(:has(.alert-heading)) {
29
- flex-direction: row;
30
- align-items: flex-start;
31
- }
32
- }
33
-
34
- /* Variants */
35
- .alert-danger { --alert-color-bg: var(--color-danger-muted); --alert-color-text: var(--color-danger-strong); }
36
- .alert-dark { --alert-color-bg: var(--color-dark-muted); --alert-color-text: var(--color-dark-strong); }
37
- .alert-info { --alert-color-bg: var(--color-info-muted); --alert-color-text: var(--color-info-strong); }
38
- .alert-light { --alert-color-bg: var(--color-light-muted); --alert-color-text: var(--color-light-strong); }
39
- .alert-primary { --alert-color-bg: var(--color-primary-muted); --alert-color-text: var(--color-primary-strong); }
40
- .alert-secondary { --alert-color-bg: var(--color-secondary-muted); --alert-color-text: var(--color-secondary-strong); }
41
- .alert-success { --alert-color-bg: var(--color-success-muted); --alert-color-text: var(--color-success-strong); }
42
- .alert-warning { --alert-color-bg: var(--color-warning-muted); --alert-color-text: var(--color-warning-strong); }
43
- }
package/css/component/badge.css DELETED
@@ -1,63 +0,0 @@
1
- /* components/badge.css */
2
- @layer components {
3
- .badge {
4
- background-color: var(--badge-color-bg);
5
- border: var(--badge-border-width) var(--badge-border-style) var(--badge-color-border);
6
- border-radius: var(--badge-border-radius);
7
- color: var(--badge-color-text);
8
- display: inline-flex;
9
- font-size: var(--badge-font-size);
10
- font-weight: var(--badge-font-weight);
11
- padding: var(--badge-padding-y) var(--badge-padding-x);
12
- text-decoration: none;
13
- }
14
-
15
- @media (hover: hover) and (pointer: fine) {
16
- a.badge:hover {
17
- background-color: var(--badge-color-bg-hover, var(--badge-color-bg));
18
- color: var(--badge-color-text-hover, var(--badge-color-text));
19
- }
20
- }
21
-
22
- /* Variants */
23
- .badge-danger {
24
- --badge-color-bg: var(--color-danger);
25
- --badge-color-bg-hover: var(--color-danger-strong);
26
- --badge-color-text: var(--color-text-on-danger);
27
- }
28
- .badge-dark {
29
- --badge-color-bg: var(--color-dark);
30
- --badge-color-bg-hover: var(--color-dark-strong);
31
- --badge-color-text: var(--color-text-on-dark);
32
- }
33
- .badge-info {
34
- --badge-color-bg: var(--color-info);
35
- --badge-color-bg-hover: var(--color-info-strong);
36
- --badge-color-text: var(--color-text-on-info);
37
- }
38
- .badge-light {
39
- --badge-color-bg: var(--color-light);
40
- --badge-color-bg-hover: var(--color-light-strong);
41
- --badge-color-text: var(--color-text-on-light);
42
- }
43
- .badge-primary {
44
- --badge-color-bg: var(--color-primary);
45
- --badge-color-bg-hover: var(--color-primary-strong);
46
- --badge-color-text: var(--color-text-on-primary);
47
- }
48
- .badge-secondary {
49
- --badge-color-bg: var(--color-secondary);
50
- --badge-color-bg-hover: var(--color-secondary-strong);
51
- --badge-color-text: var(--color-text-on-secondary);
52
- }
53
- .badge-success {
54
- --badge-color-bg: var(--color-success);
55
- --badge-color-bg-hover: var(--color-success-strong);
56
- --badge-color-text: var(--color-text-on-success);
57
- }
58
- .badge-warning {
59
- --badge-color-bg: var(--color-warning);
60
- --badge-color-bg-hover: var(--color-warning-strong);
61
- --badge-color-text: var(--color-text-on-warning);
62
- }
63
- }
package/css/component/banner.css DELETED
@@ -1,30 +0,0 @@
1
- /* components/banner.css */
2
- @layer components {
3
- .banner {
4
- --color-link: var(--alert-color-text);
5
- background-color: var(--alert-color-bg);
6
- border-radius: var(--alert-border-radius);
7
- color: var(--alert-color-text);
8
- display: flex;
9
- flex-direction: column;
10
- font-size: var(--alert-font-size);
11
- gap: var(--alert-gap);
12
- padding: var(--alert-padding);
13
- padding-inline: 0;
14
- text-align: center;
15
-
16
- p {
17
- margin: 0 auto;
18
- }
19
- }
20
-
21
- /* Variants */
22
- .banner-danger { --alert-color-bg: var(--color-danger-muted); --alert-color-text: var(--color-danger-strong); }
23
- .banner-dark { --alert-color-bg: var(--color-dark-muted); --alert-color-text: var(--color-dark-strong); }
24
- .banner-info { --alert-color-bg: var(--color-info-muted); --alert-color-text: var(--color-info-strong); }
25
- .banner-light { --alert-color-bg: var(--color-light-muted); --alert-color-text: var(--color-light-strong); }
26
- .banner-primary { --alert-color-bg: var(--color-primary-muted); --alert-color-text: var(--color-primary-strong); }
27
- .banner-secondary { --alert-color-bg: var(--color-secondary-muted); --alert-color-text: var(--color-secondary-strong); }
28
- .banner-success { --alert-color-bg: var(--color-success-muted); --alert-color-text: var(--color-success-strong); }
29
- .banner-warning { --alert-color-bg: var(--color-warning-muted); --alert-color-text: var(--color-warning-strong); }
30
- }
package/css/component/btn-search.css DELETED
@@ -1,22 +0,0 @@
1
- /* component/btn-search.css */
2
- /* Search button — requires .btn base class */
3
- @layer components {
4
- .btn-search {
5
- /* Scope --btn-color-* to control values, allow per-button overrides */
6
- --btn-color-bg: var(--btn-search-color-bg, var(--btn-control-color-bg));
7
- --btn-color-bg-hover: var(--btn-search-color-bg-hover, var(--btn-control-color-bg-hover));
8
- --btn-color-border: var(--btn-search-color-border, var(--btn-control-color-border));
9
- --btn-color-border-hover: var(--btn-search-color-border-hover, var(--btn-control-color-border-hover));
10
- --btn-color-text: var(--btn-search-color-text, var(--btn-control-color-text));
11
- --btn-color-text-hover: var(--btn-search-color-text-hover, var(--btn-control-color-text-hover));
12
-
13
- &::before {
14
- background-color: currentColor;
15
- content: '';
16
- flex-shrink: 0;
17
- height: var(--icon-size);
18
- mask: var(--icon-search) center / var(--icon-size) no-repeat;
19
- width: var(--icon-size);
20
- }
21
- }
22
- }
package/css/component/btn-share.css DELETED
@@ -1,22 +0,0 @@
1
- /* component/btn-share.css */
2
- /* Share button — requires .btn base class */
3
- @layer components {
4
- .btn-share {
5
- /* Scope --btn-color-* to control values, allow per-button overrides */
6
- --btn-color-bg: var(--btn-share-color-bg, var(--btn-control-color-bg));
7
- --btn-color-bg-hover: var(--btn-share-color-bg-hover, var(--btn-control-color-bg-hover));
8
- --btn-color-border: var(--btn-share-color-border, var(--btn-control-color-border));
9
- --btn-color-border-hover: var(--btn-share-color-border-hover, var(--btn-control-color-border-hover));
10
- --btn-color-text: var(--btn-share-color-text, var(--btn-control-color-text));
11
- --btn-color-text-hover: var(--btn-share-color-text-hover, var(--btn-control-color-text-hover));
12
-
13
- &::before {
14
- background-color: currentColor;
15
- content: '';
16
- flex-shrink: 0;
17
- height: var(--icon-size);
18
- mask: var(--icon-share) center / var(--icon-size) no-repeat;
19
- width: var(--icon-size);
20
- }
21
- }
22
- }
package/css/component/nav-title.css DELETED
@@ -1,13 +0,0 @@
1
- /* components/nav-title.css */
2
- /*
3
- * .nav-title — navigation title.
4
- */
5
- @layer components {
6
- .nav-title {
7
- font-size: var(--nav-font-size-title);
8
- font-weight: var(--nav-font-weight-title);
9
- margin: 0;
10
- padding-block: var(--nav-padding-y);
11
- padding-inline: var(--nav-padding-x);
12
- }
13
- }
/package/css/{component → components}/embed.css RENAMED
File without changes
/package/css/{component → components}/form.css RENAMED
File without changes
/package/css/{component → components}/items.css RENAMED
File without changes