spoko-design-system 1.31.0 → 1.32.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.
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
## [1.32.0](https://github.com/polo-blue/sds/compare/v1.31.0...v1.32.0) (2026-03-17)
|
|
2
|
+
|
|
3
|
+
### Features
|
|
4
|
+
|
|
5
|
+
* **ProductGallery:** use btn-gallery-arrow shortcut for navigation ([4bbb527](https://github.com/polo-blue/sds/commit/4bbb5276d5bbffb4a272254cca333ab44a6a4abc))
|
|
6
|
+
|
|
1
7
|
## [1.31.0](https://github.com/polo-blue/sds/compare/v1.30.1...v1.31.0) (2026-03-17)
|
|
2
8
|
|
|
3
9
|
### Features
|
package/package.json
CHANGED
|
@@ -92,42 +92,32 @@ const total = images.length;
|
|
|
92
92
|
|
|
93
93
|
<button
|
|
94
94
|
type="button"
|
|
95
|
-
class="pg-arrow hidden md:flex absolute top-1/2 left-3 z-10
|
|
95
|
+
class="pg-arrow btn-gallery-arrow hidden md:flex absolute top-1/2 left-3 z-10"
|
|
96
96
|
data-gallery-prev
|
|
97
97
|
data-dir="prev"
|
|
98
98
|
aria-label="Previous image"
|
|
99
99
|
disabled
|
|
100
100
|
>
|
|
101
|
-
<svg
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
stroke="currentColor"
|
|
107
|
-
stroke-width="2.5"
|
|
108
|
-
aria-hidden="true"
|
|
109
|
-
>
|
|
110
|
-
<polyline points="15 18 9 12 15 6" />
|
|
101
|
+
<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
|
|
102
|
+
<path
|
|
103
|
+
fill="currentColor"
|
|
104
|
+
d="M12.707 17.293L8.414 13H18v-2H8.414l4.293-4.293l-1.414-1.414L4.586 12l6.707 6.707z"
|
|
105
|
+
/>
|
|
111
106
|
</svg>
|
|
112
107
|
</button>
|
|
113
108
|
<button
|
|
114
109
|
type="button"
|
|
115
|
-
class="pg-arrow hidden md:flex absolute top-1/2 right-3 z-10
|
|
110
|
+
class="pg-arrow btn-gallery-arrow hidden md:flex absolute top-1/2 right-3 z-10"
|
|
116
111
|
data-gallery-next
|
|
117
112
|
data-dir="next"
|
|
118
113
|
aria-label="Next image"
|
|
119
114
|
disabled={total <= 1}
|
|
120
115
|
>
|
|
121
|
-
<svg
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
stroke="currentColor"
|
|
127
|
-
stroke-width="2.5"
|
|
128
|
-
aria-hidden="true"
|
|
129
|
-
>
|
|
130
|
-
<polyline points="9 6 15 12 9 18" />
|
|
116
|
+
<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
|
|
117
|
+
<path
|
|
118
|
+
fill="currentColor"
|
|
119
|
+
d="m11.293 17.293l1.414 1.414L19.414 12l-6.707-6.707l-1.414 1.414L15.586 11H6v2h9.586z"
|
|
120
|
+
/>
|
|
131
121
|
</svg>
|
|
132
122
|
</button>
|
|
133
123
|
|
|
@@ -30,23 +30,12 @@
|
|
|
30
30
|
scroll-snap-align: center;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
/* ── Arrow hover reveal
|
|
33
|
+
/* ── Arrow positioning + hover reveal ── */
|
|
34
34
|
|
|
35
35
|
.pg-arrow {
|
|
36
36
|
transform: translateY(-50%);
|
|
37
37
|
opacity: 0;
|
|
38
|
-
transition:
|
|
39
|
-
opacity 0.2s,
|
|
40
|
-
background-color 0.2s,
|
|
41
|
-
color 0.2s;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.pg-arrow:disabled {
|
|
45
|
-
@apply cursor-default;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.pg-arrow:hover:not(:disabled) {
|
|
49
|
-
@apply bg-white/90 text-neutral-800;
|
|
38
|
+
transition: opacity 0.2s;
|
|
50
39
|
}
|
|
51
40
|
|
|
52
41
|
.pg-main:hover .pg-arrow:not(:disabled),
|
|
@@ -54,11 +43,6 @@
|
|
|
54
43
|
opacity: 1;
|
|
55
44
|
}
|
|
56
45
|
|
|
57
|
-
.pg-main:hover .pg-arrow:disabled,
|
|
58
|
-
.pg-main:focus-within .pg-arrow:disabled {
|
|
59
|
-
opacity: 0.3;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
46
|
/* ── Thumbnail active state ── */
|
|
63
47
|
|
|
64
48
|
.pg-thumb {
|
|
@@ -42,6 +42,7 @@ export const componentShortcuts = [
|
|
|
42
42
|
['nav-link', 'text-slate-light hover:bg-blue-darker hover:text-white px-3 py-3.5 md:py-2 rounded-full text-sm font-medium'],
|
|
43
43
|
['btn-navigation', `${COLORS.bgWhite} drop-shadow-md rounded-full border ${LAYOUT.flex.center} w-1/2 h-12 bottom-1 z-2 md:(bg-white/90 text-inherit hover:(text-accent-light bg-white))`],
|
|
44
44
|
['btn-navigation__active', 'border border-transparent md:(border-neutral-lighter focus:ring-0) font-medium text-white bg-blue-darker hover:bg-accent-darker focus:ring-2 focus:outline-none focus:ring-blue-300'],
|
|
45
|
+
['btn-gallery-arrow', `${COLORS.bgWhite} bg-white/80 drop-shadow-sm rounded-full border border-neutral-lighter ${LAYOUT.flex.center} w-12 h-12 cursor-pointer text-neutral-600 hover:(text-accent-light bg-white) disabled:(hidden)`],
|
|
45
46
|
|
|
46
47
|
// Carousel
|
|
47
48
|
['carousel-tile', `${LAYOUT.flex.base} w-52 min-w-52 ml-1 lg:ml-1.5`],
|