@chayns-ui/layout 0.6.0 → 0.6.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.
Files changed (2) hide show
  1. package/dist/tabs.css +48 -99
  2. package/package.json +3 -3
package/dist/tabs.css CHANGED
@@ -2,141 +2,90 @@
2
2
  .chayns-tabs {
3
3
  display: flex;
4
4
  flex-direction: column;
5
- container-type: inline-size;
6
- inline-size: 100%;
7
- block-size: 100%;
8
5
  min-inline-size: 0;
9
6
  }
10
7
 
11
8
  .chayns-tabs__list {
12
9
  display: flex;
13
- gap: var(--sp-1);
14
- align-items: stretch;
15
- min-inline-size: 0;
16
- overflow-x: auto;
17
- background: transparent;
18
- }
19
-
20
- .chayns-tabs__bar {
21
- display: flex;
22
- align-items: stretch;
23
- block-size: var(--ctrl-h);
10
+ flex-wrap: wrap;
11
+ gap: var(--k8);
12
+ align-items: center;
24
13
  min-inline-size: 0;
25
14
  }
26
15
 
27
- .chayns-tabs__item {
28
- display: inline-flex;
29
- flex: 0 0 auto;
30
- align-items: stretch;
31
- border-radius: var(--k12) var(--k12) 0 0;
32
- overflow: hidden;
33
- }
34
-
35
- .chayns-tabs__tab {
16
+ .chayns-tabs__tab,
17
+ .chayns-tabs__add {
36
18
  display: inline-flex;
37
- flex: 0 0 auto;
38
19
  align-items: center;
39
20
  justify-content: center;
40
- gap: var(--sp-2);
41
- block-size: var(--ctrl-h);
42
- min-block-size: var(--ctrl-h);
43
- min-inline-size: var(--ctrl-h);
44
- padding-block: 0;
45
- padding-inline: var(--sp-3) var(--sp-2);
46
21
  border: 0;
47
- border-radius: 0;
48
- color: var(--on-accent);
49
22
  font: inherit;
50
23
  cursor: pointer;
51
- background: transparent;
52
- }
53
-
54
- .chayns-tabs__item:has(.chayns-tabs__tab--active) {
55
- background: var(--surface);
24
+ transition:
25
+ background 0.2s ease,
26
+ color 0.2s ease,
27
+ box-shadow 0.2s ease,
28
+ transform 0.15s ease;
56
29
  }
57
30
 
58
- .chayns-tabs__item:not(:has(.chayns-tabs__tab--active)) {
59
- background: color-mix(in srgb, var(--surface) 10%, transparent);
31
+ .chayns-tabs__tab {
32
+ gap: var(--k8);
33
+ padding: var(--k8) var(--k15);
34
+ border-radius: 999px;
35
+ background: var(--surface-alt);
36
+ color: var(--text-2);
37
+ font-size: var(--fs-body);
38
+ font-weight: 500;
39
+ line-height: 1.1;
40
+ }
41
+
42
+ .chayns-tabs__tab--active {
43
+ background: var(--accent);
44
+ color: var(--on-accent);
60
45
  }
61
46
 
62
- .chayns-tabs__remove,
63
47
  .chayns-tabs__add {
64
- display: inline-flex;
65
- align-items: center;
66
- justify-content: center;
67
- inline-size: var(--ctrl-h);
68
- block-size: var(--ctrl-h);
69
- min-block-size: var(--ctrl-h);
70
- padding: 0 var(--sp-2);
71
- border: 0;
72
- color: var(--on-accent);
73
- font: inherit;
74
- cursor: pointer;
75
- background: transparent;
48
+ inline-size: var(--k32);
49
+ block-size: var(--k32);
50
+ padding: 0;
51
+ border-radius: 50%;
52
+ background: var(--surface-alt);
53
+ color: var(--accent);
54
+ font-size: var(--fs-meta);
76
55
  }
77
56
 
78
- .chayns-tabs__remove {
79
- inline-size: var(--icon);
80
- padding: 0;
81
- border-radius: 0;
57
+ .chayns-tabs__tab:hover,
58
+ .chayns-tabs__add:hover {
59
+ background: var(--hover);
82
60
  }
83
61
 
84
- .chayns-tabs__add {
85
- flex: 0 0 auto;
86
- border-radius: 0;
87
- color: var(--on-accent);
62
+ .chayns-tabs__tab--active:hover {
63
+ background: var(--accent-hover);
64
+ box-shadow: var(--shadow-btn-hover);
65
+ transform: translateY(-1px);
88
66
  }
89
67
 
90
- .chayns-tabs__item:has(:focus-visible) {
91
- outline: none;
92
- box-shadow: inset 0 0 0 var(--focus-ring-size)
93
- rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-strong));
68
+ .chayns-tabs__tab:active,
69
+ .chayns-tabs__add:active {
70
+ transform: scale(0.97);
94
71
  }
95
72
 
96
73
  .chayns-tabs__tab:focus-visible,
97
- .chayns-tabs__remove:focus-visible,
98
74
  .chayns-tabs__add:focus-visible {
99
- outline: none;
100
- }
101
-
102
- .chayns-tabs__icon {
103
- display: inline-flex;
104
- flex: none;
105
- align-items: center;
106
- justify-content: center;
107
- inline-size: var(--icon);
108
- block-size: var(--icon);
109
- }
110
-
111
- .chayns-tabs__remove .chayns-tabs__icon {
112
- inline-size: var(--fs-meta);
113
- block-size: var(--fs-meta);
114
- font-size: var(--fs-meta);
115
- }
116
-
117
- .chayns-tabs__item:has(.chayns-tabs__tab--active) .chayns-tabs__tab,
118
- .chayns-tabs__item:has(.chayns-tabs__tab--active) .chayns-tabs__remove {
119
- color: var(--accent);
75
+ outline: var(--focus-ring-size) solid rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-strong));
76
+ outline-offset: 2px;
120
77
  }
121
78
 
122
79
  .chayns-tabs__panel {
123
- flex: 1 1 auto;
124
80
  min-inline-size: 0;
125
- min-block-size: 0;
126
- padding: var(--sp-2);
127
- overflow: auto;
128
- background: var(--surface);
81
+ margin-block-start: var(--k12);
129
82
  color: var(--text);
130
83
  }
131
84
 
132
- @container (max-width: 20rem) {
133
- .chayns-tabs__label {
134
- position: absolute;
135
- inline-size: 1px;
136
- block-size: 1px;
137
- overflow: hidden;
138
- clip-path: inset(50%);
139
- white-space: nowrap;
85
+ @media (prefers-reduced-motion: reduce) {
86
+ .chayns-tabs__tab,
87
+ .chayns-tabs__add {
88
+ transition: none;
140
89
  }
141
90
  }
142
91
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-ui/layout",
3
- "version": "0.6.0",
3
+ "version": "0.6.1",
4
4
  "description": "Accessible application layout components for chayns UI",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -28,11 +28,11 @@
28
28
  "./package.json": "./package.json"
29
29
  },
30
30
  "peerDependencies": {
31
- "@chayns-ui/core": ">=0.4.0",
31
+ "@chayns-ui/core": ">=0.4.2",
32
32
  "react": ">=18 <20"
33
33
  },
34
34
  "devDependencies": {
35
- "@chayns-ui/core": "0.4.0"
35
+ "@chayns-ui/core": "0.4.2"
36
36
  },
37
37
  "engines": {
38
38
  "node": ">=18"