spoko-design-system 1.34.3 → 1.34.5

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,15 @@
1
+ ## [1.34.5](https://github.com/polo-blue/sds/compare/v1.34.4...v1.34.5) (2026-03-17)
2
+
3
+ ### Bug Fixes
4
+
5
+ * **ProductGallery:** dialog topbar as transparent overlay with hover reveal ([44eb728](https://github.com/polo-blue/sds/commit/44eb728330db7a588992e6de0eb80315b59a0535))
6
+
7
+ ## [1.34.4](https://github.com/polo-blue/sds/compare/v1.34.3...v1.34.4) (2026-03-17)
8
+
9
+ ### Bug Fixes
10
+
11
+ * **ProductGallery:** hide disabled dialog arrows, improve active visibility ([855d016](https://github.com/polo-blue/sds/commit/855d01609c13e17812c4c8f97f49cc29701580fb))
12
+
1
13
  ## [1.34.3](https://github.com/polo-blue/sds/compare/v1.34.2...v1.34.3) (2026-03-17)
2
14
 
3
15
  ### Bug Fixes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "spoko-design-system",
3
- "version": "1.34.3",
3
+ "version": "1.34.5",
4
4
  "type": "module",
5
5
  "private": false,
6
6
  "main": "./index.ts",
@@ -217,13 +217,13 @@ const total = images.length;
217
217
  data-gallery-dialog
218
218
  aria-label="Full-screen image gallery"
219
219
  >
220
- <div class="flex items-center justify-between px-4 py-3 shrink-0">
221
- <span class="text-sm text-neutral-200" data-dialog-counter aria-live="polite" aria-atomic="true">
220
+ <div class="pg-dialog-topbar absolute top-0 left-0 right-0 z-10 flex items-center justify-between px-4 py-3">
221
+ <span class="text-sm text-white/70" data-dialog-counter aria-live="polite" aria-atomic="true">
222
222
  <span data-dialog-current>1</span>/{total}
223
223
  </span>
224
224
  <button
225
225
  type="button"
226
- class="flex items-center justify-center w-10 h-10 border-none bg-transparent text-neutral-400 cursor-pointer hover:text-white transition-colors"
226
+ class="flex items-center justify-center w-10 h-10 border-none bg-transparent text-white/70 cursor-pointer hover:text-white transition-colors"
227
227
  data-dialog-close
228
228
  aria-label="Close gallery"
229
229
  >
@@ -119,18 +119,30 @@
119
119
  border-color: #fff;
120
120
  }
121
121
 
122
+ /* ── Dialog top bar hover reveal ── */
123
+
124
+ .pg-dialog-topbar {
125
+ opacity: 0;
126
+ transition: opacity 0.2s;
127
+ }
128
+
129
+ .pg-dialog:hover .pg-dialog-topbar,
130
+ .pg-dialog:focus-within .pg-dialog-topbar {
131
+ opacity: 1;
132
+ }
133
+
122
134
  /* ── Dialog arrow states ── */
123
135
 
124
136
  .pg-dialog-arrow {
125
- @apply text-white/80 transition-colors;
137
+ @apply text-white/70 transition-colors;
126
138
  }
127
139
 
128
- .pg-dialog-arrow:hover {
140
+ .pg-dialog-arrow:hover:not(:disabled) {
129
141
  @apply text-white bg-white/15;
130
142
  }
131
143
 
132
144
  .pg-dialog-arrow:disabled {
133
- @apply text-white/20 cursor-default bg-transparent;
145
+ @apply hidden;
134
146
  }
135
147
 
136
148
  /* ── Reduced motion ── */