@uncinq/css-components 0.1.0 → 0.2.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 (8) hide show
  1. package/README.md +2 -1
  2. package/css/component/breadcrumb.css +0 -1
  3. package/css/component/{offcanvas.css → drawer.css} +53 -53
  4. package/css/component/dropdown.css +10 -8
  5. package/css/component/nav-title.css +12 -0
  6. package/css/component/nav.css +17 -31
  7. package/css/index.css +2 -1
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -104,6 +104,7 @@ css/
104
104
  breadcrumb.css ← breadcrumb navigation
105
105
  button.css ← button (all variants)
106
106
  card.css ← card container
107
+ drawer.css ← off-canvas panel / drawer
107
108
  dropdown.css ← dropdown menu
108
109
  embed.css ← video / iframe embed wrapper
109
110
  list.css ← styled list
@@ -111,7 +112,7 @@ css/
111
112
  media.css ← media object (image + text)
112
113
  nav.css ← navigation bar
113
114
  nav-accessibility.css ← accessibility skip links / focus helpers
114
- offcanvas.css ← off-canvas panel / drawer
115
+ nav-title.css ← navigation bar title
115
116
  pagination.css ← pagination control
116
117
  ```
117
118
 
package/css/component/breadcrumb.css CHANGED
@@ -7,7 +7,6 @@
7
7
 
8
8
  ol {
9
9
  display: flex;
10
- flex-wrap: wrap;
11
10
  font-size: var(--breadcrumb-font-size);
12
11
  gap: var(--breadcrumb-gap);
13
12
  list-style: none;
package/css/component/{offcanvas.css → drawer.css} RENAMED
@@ -1,24 +1,24 @@
1
- /* components/offcanvas.css */
1
+ /* components/drawer.css */
2
2
  /*
3
- * .offcanvas — slide-in panel, vanilla JS driven.
3
+ * .drawer — slide-in panel, vanilla JS driven.
4
4
  *
5
- * JS (components/offcanvas.js) manages:
5
+ * JS (components/drawer.js) manages:
6
6
  * .showing — panel becoming visible (open transition)
7
7
  * .show — panel fully open
8
8
  * .hiding — panel becoming hidden (close transition)
9
9
  * aria-hidden="true" when closed
10
- * body.offcanvas-open when panel is open
10
+ * body.drawer-open when panel is open
11
11
  *
12
- * Triggers: .js-offcanvas-toggle[data-target="#id"]
13
- * Close: .js-offcanvas-close (inside panel)
12
+ * Triggers: .js-drawer-toggle[data-target="#id"]
13
+ * Close: .js-drawer-close (inside panel)
14
14
  *
15
- * Position variants: .offcanvas-start | .offcanvas-end | .offcanvas-top | .offcanvas-bottom
15
+ * Position variants: .drawer-start | .drawer-end | .drawer-top | .drawer-bottom
16
16
  *
17
17
  * Expected HTML:
18
- * <div id="navigation" class="offcanvas offcanvas-start" role="dialog" aria-modal="true" aria-hidden="true">
18
+ * <div id="navigation" class="drawer drawer-start" role="dialog" aria-modal="true" aria-hidden="true">
19
19
  * <div class="header">
20
20
  * <span class="title">...</span>
21
- * <button class="js-offcanvas-close btn">...</button>
21
+ * <button class="js-drawer-close btn">...</button>
22
22
  * </div>
23
23
  * <div class="content">...</div>
24
24
  * </div>
@@ -27,26 +27,26 @@
27
27
 
28
28
  /* ── Panel ───────────────────────────────────────────────────────── */
29
29
 
30
- .offcanvas {
31
- background-color: var(--offcanvas-color-bg);
32
- bottom: var(--offcanvas-bottom, 0);
33
- box-shadow: var(--offcanvas-shadow);
34
- color: var(--offcanvas-color-text);
30
+ .drawer {
31
+ background-color: var(--drawer-color-bg);
32
+ bottom: var(--drawer-bottom, 0);
33
+ box-shadow: var(--drawer-shadow);
34
+ color: var(--drawer-color-text);
35
35
  display: flex;
36
36
  flex-direction: column;
37
- inset-inline-start: var(--offcanvas-start);
38
- inset-inline-end: var(--offcanvas-end);
37
+ inset-inline-start: var(--drawer-start);
38
+ inset-inline-end: var(--drawer-end);
39
39
  max-width: 100%;
40
40
  overflow: hidden;
41
41
  position: fixed;
42
- top: var(--offcanvas-top, 0);
43
- transform: var(--offcanvas-translate);
44
- transition-duration: var(--offcanvas-transition-duration);
42
+ top: var(--drawer-top, 0);
43
+ transform: var(--drawer-translate);
44
+ transition-duration: var(--drawer-transition-duration);
45
45
  transition-property: transform, visibility;
46
- transition-timing-function: var(--offcanvas-transition-easing);
46
+ transition-timing-function: var(--drawer-transition-easing);
47
47
  visibility: hidden;
48
- width: var(--offcanvas-width);
49
- z-index: var(--offcanvas-z-index);
48
+ width: var(--drawer-width);
49
+ z-index: var(--drawer-z-index);
50
50
 
51
51
  /* Visible during transitions and when open */
52
52
  &.show,
@@ -64,11 +64,11 @@
64
64
 
65
65
  & > .header {
66
66
  align-items: center;
67
- border-bottom: 1px solid var(--offcanvas-color-border);
67
+ border-bottom: 1px solid var(--drawer-color-border);
68
68
  display: flex;
69
69
  flex-shrink: 0;
70
70
  justify-content: space-between;
71
- padding: var(--offcanvas-padding);
71
+ padding: var(--drawer-padding);
72
72
 
73
73
  & .title {
74
74
  font-size: var(--font-size-md);
@@ -82,50 +82,50 @@
82
82
  & > .content {
83
83
  flex-grow: 1;
84
84
  overflow-y: auto;
85
- padding: var(--offcanvas-padding);
85
+ padding: var(--drawer-padding);
86
86
  }
87
87
 
88
88
  /* ── Footer ──────────────────────────────────────────────────────── */
89
89
 
90
90
  & > .footer {
91
91
  flex-shrink: 0;
92
- padding: var(--offcanvas-padding);
92
+ padding: var(--drawer-padding);
93
93
  }
94
94
  }
95
95
 
96
96
  /* ── Position variants ───────────────────────────────────────────── */
97
97
 
98
- .offcanvas-start {
99
- --offcanvas-end: auto;
100
- --offcanvas-start: 0;
101
- --offcanvas-translate: translateX(-100%);
98
+ .drawer-start {
99
+ --drawer-end: auto;
100
+ --drawer-start: 0;
101
+ --drawer-translate: translateX(-100%);
102
102
  }
103
103
 
104
- .offcanvas-end {
105
- --offcanvas-start: auto;
106
- --offcanvas-end: 0;
107
- --offcanvas-translate: translateX(100%);
104
+ .drawer-end {
105
+ --drawer-start: auto;
106
+ --drawer-end: 0;
107
+ --drawer-translate: translateX(100%);
108
108
  }
109
109
 
110
- .offcanvas-top {
111
- --offcanvas-end: 0;
112
- --offcanvas-start: 0;
113
- --offcanvas-top: 0;
114
- --offcanvas-translate: translateY(-100%);
115
- height: var(--offcanvas-height);
110
+ .drawer-top {
111
+ --drawer-end: 0;
112
+ --drawer-start: 0;
113
+ --drawer-top: 0;
114
+ --drawer-translate: translateY(-100%);
115
+ height: var(--drawer-height);
116
116
  }
117
117
 
118
- .offcanvas-bottom {
119
- --offcanvas-end: 0;
120
- --offcanvas-start: 0;
121
- --offcanvas-bottom: 0;
122
- --offcanvas-translate: translateY(100%);
123
- height: var(--offcanvas-height);
118
+ .drawer-bottom {
119
+ --drawer-end: 0;
120
+ --drawer-start: 0;
121
+ --drawer-bottom: 0;
122
+ --drawer-translate: translateY(100%);
123
+ height: var(--drawer-height);
124
124
  }
125
125
 
126
126
  /* ── Responsive variants (static above breakpoint) ──────────────── */
127
127
 
128
- .offcanvas-tablet {
128
+ .drawer-tablet {
129
129
  @media (--tablet) {
130
130
  box-shadow: none;
131
131
  overflow: visible;
@@ -138,7 +138,7 @@
138
138
  }
139
139
  }
140
140
 
141
- .offcanvas-laptop {
141
+ .drawer-laptop {
142
142
  @media (--laptop) {
143
143
  box-shadow: none;
144
144
  overflow: visible;
@@ -153,15 +153,15 @@
153
153
 
154
154
  /* ── Backdrop ────────────────────────────────────────────────────── */
155
155
 
156
- .offcanvas-backdrop {
157
- background-color: var(--offcanvas-backdrop-color);
156
+ .drawer-backdrop {
157
+ background-color: var(--drawer-backdrop-color);
158
158
  inset: 0;
159
159
  position: fixed;
160
- z-index: calc(var(--offcanvas-z-index) - 1);
160
+ z-index: calc(var(--drawer-z-index) - 1);
161
161
 
162
162
  &.fade {
163
163
  opacity: 0;
164
- transition: opacity var(--offcanvas-transition-duration) var(--offcanvas-transition-easing);
164
+ transition: opacity var(--drawer-transition-duration) var(--drawer-transition-easing);
165
165
  }
166
166
 
167
167
  &.show {
@@ -171,7 +171,7 @@
171
171
 
172
172
  /* ── Body scroll lock ────────────────────────────────────────────── */
173
173
 
174
- body.offcanvas-open {
174
+ body.drawer-open {
175
175
  overflow: hidden;
176
176
  }
177
177
  }
package/css/component/dropdown.css CHANGED
@@ -34,9 +34,11 @@
34
34
  .dropdown-toggle {
35
35
  align-items: center;
36
36
  appearance: none;
37
+ background: transparent;
37
38
  border: 0;
38
39
  cursor: pointer;
39
40
  display: inline-flex;
41
+ margin-inline-start: calc(var(--spacing-xs) * -1);
40
42
  padding: var(--spacing-xs);
41
43
 
42
44
  &::before {
@@ -45,18 +47,18 @@
45
47
  position: absolute;
46
48
  }
47
49
 
48
- /* Chevron via CSS — rotate when open */
49
50
  &::after {
50
- border-left: 0.3em solid transparent;
51
- border-right: 0.3em solid transparent;
52
- border-top: 0.3em solid currentColor;
53
- content: "";
54
- display: inline-block;
55
- transition: transform var(--dropdown-transition-duration) var(--dropdown-transition-easing);
51
+ background-color: currentColor;
52
+ content: '';
53
+ flex-shrink: 0;
54
+ height: var(--dropdown-icon-size);
55
+ mask: var(--dropdown-icon) center / var(--dropdown-icon-size) no-repeat;
56
+ transition: rotate var(--dropdown-transition-duration) var(--dropdown-transition-easing);
57
+ width: var(--dropdown-icon-size);
56
58
  }
57
59
 
58
60
  &[aria-expanded="true"]::after {
59
- transform: rotate(180deg);
61
+ rotate: 180deg;
60
62
  }
61
63
  }
62
64
 
package/css/component/nav-title.css ADDED
@@ -0,0 +1,12 @@
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: var(--nav-padding-y) var(--nav-padding-x);
11
+ }
12
+ }
package/css/component/nav.css CHANGED
@@ -2,32 +2,25 @@
2
2
  /*
3
3
  * .nav — base navigation list, vertical by default.
4
4
  *
5
- * Variants:
6
- * .nav-title — bold group heading (not a link)
7
- * .nav-social — icon-only social links
8
- * .nav-language — compact language switcher
9
- *
10
5
  * Structure:
11
- * <nav>
12
- * <ul>
13
- * <li>
14
- * <a href="...">...</a>
15
- * </li>
16
- * </ul>
17
- * </nav>
6
+ * <ul|ol class="nav">
7
+ * <li>
8
+ * <a href="...">...</a>
9
+ * </li>
10
+ * </ul>
18
11
  *
19
12
  * Direction is set by context (e.g. header sets flex-direction: row).
20
13
  */
21
14
  @layer components {
22
15
  .nav {
16
+ &,
23
17
  ul,
24
18
  ol {
25
19
  display: flex;
26
- flex-direction: column;
20
+ flex-direction: var(--nav-direction, column);
27
21
  gap: var(--nav-gap);
28
22
  list-style: none;
29
23
  margin: 0;
30
- padding: 0;
31
24
  }
32
25
 
33
26
  /* ── Nav item ────────────────────────────────────────────────── */
@@ -56,25 +49,18 @@
56
49
  display: block;
57
50
  padding: var(--nav-padding-y) var(--nav-padding-x);
58
51
  }
59
- }
60
52
 
61
- /* ── Nav title ───────────────────────────────────────────────────── */
62
-
63
- .nav-title {
64
- font-size: var(--nav-font-size-title);
65
- font-weight: var(--nav-font-weight-title);
66
- margin: 0;
67
- padding: var(--nav-padding-y) var(--nav-padding-x);
68
- }
53
+ /* ── Item highlighted ───────────────────────────────────────────────────── */
69
54
 
70
- .nav-item-highlighted {
71
- line-height: 1.2;
72
- margin-inline: var(--nav-padding-x);
73
- &:first-child {
74
- margin-inline-start: 0;
75
- }
76
- &:last-child {
77
- margin-inline-end: 0;
55
+ .nav-item-highlighted {
56
+ line-height: 1.2;
57
+ margin-inline: var(--nav-padding-x);
58
+ &:first-child {
59
+ margin-inline-start: 0;
60
+ }
61
+ &:last-child {
62
+ margin-inline-end: 0;
63
+ }
78
64
  }
79
65
  }
80
66
  }
package/css/index.css CHANGED
@@ -5,6 +5,7 @@
5
5
  @import 'component/breadcrumb.css';
6
6
  @import 'component/button.css';
7
7
  @import 'component/card.css';
8
+ @import 'component/drawer.css';
8
9
  @import 'component/dropdown.css';
9
10
  @import 'component/embed.css';
10
11
  @import 'component/list.css';
@@ -12,5 +13,5 @@
12
13
  @import 'component/media.css';
13
14
  @import 'component/nav.css';
14
15
  @import 'component/nav-accessibility.css';
15
- @import 'component/offcanvas.css';
16
+ @import 'component/nav-title.css';
16
17
  @import 'component/pagination.css';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uncinq/css-components",
3
- "version": "0.1.0",
3
+ "version": "0.2.0",
4
4
  "description": "Framework-agnostic CSS component implementations.",
5
5
  "license": "MIT",
6
6
  "repository": {