@aiaiai-pt/design-system 0.2.0 → 0.2.2
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/components/Panel.svelte +11 -3
- package/package.json +1 -1
- package/tokens/components.css +2 -0
package/components/Panel.svelte
CHANGED
|
@@ -40,6 +40,8 @@
|
|
|
40
40
|
side = 'right',
|
|
41
41
|
/** @type {boolean} When true, removes backdrop and focus trap. Panel becomes an inline layout element. */
|
|
42
42
|
persistent = false,
|
|
43
|
+
/** @type {boolean} When false, body doesn't scroll — children manage their own overflow. */
|
|
44
|
+
scrollBody = true,
|
|
43
45
|
/** @type {(() => void) | undefined} */
|
|
44
46
|
onclose,
|
|
45
47
|
/** @type {string} */
|
|
@@ -144,7 +146,7 @@
|
|
|
144
146
|
{/if}
|
|
145
147
|
</div>
|
|
146
148
|
|
|
147
|
-
<div class="panel-body">
|
|
149
|
+
<div class="panel-body" class:panel-body-no-scroll={!scrollBody}>
|
|
148
150
|
{#if children}{@render children()}{/if}
|
|
149
151
|
</div>
|
|
150
152
|
</aside>
|
|
@@ -155,7 +157,7 @@
|
|
|
155
157
|
position: fixed;
|
|
156
158
|
inset: 0;
|
|
157
159
|
background: var(--panel-backdrop);
|
|
158
|
-
z-index:
|
|
160
|
+
z-index: var(--panel-z-backdrop);
|
|
159
161
|
animation: fade-in var(--duration-normal) var(--easing-enter);
|
|
160
162
|
}
|
|
161
163
|
|
|
@@ -166,7 +168,7 @@
|
|
|
166
168
|
background: var(--panel-bg);
|
|
167
169
|
box-shadow: var(--panel-shadow);
|
|
168
170
|
border-radius: var(--panel-radius);
|
|
169
|
-
z-index:
|
|
171
|
+
z-index: var(--panel-z-panel);
|
|
170
172
|
display: flex;
|
|
171
173
|
flex-direction: column;
|
|
172
174
|
}
|
|
@@ -261,6 +263,12 @@
|
|
|
261
263
|
padding: var(--panel-padding);
|
|
262
264
|
}
|
|
263
265
|
|
|
266
|
+
.panel-body-no-scroll {
|
|
267
|
+
overflow: hidden;
|
|
268
|
+
display: flex;
|
|
269
|
+
flex-direction: column;
|
|
270
|
+
}
|
|
271
|
+
|
|
264
272
|
@keyframes slide-in-right {
|
|
265
273
|
from {
|
|
266
274
|
transform: translateX(100%);
|
package/package.json
CHANGED
package/tokens/components.css
CHANGED
|
@@ -281,6 +281,8 @@
|
|
|
281
281
|
--panel-backdrop: var(--color-overlay);
|
|
282
282
|
--panel-close-size: 28px;
|
|
283
283
|
--panel-close-icon-size: 16px;
|
|
284
|
+
--panel-z-backdrop: 200;
|
|
285
|
+
--panel-z-panel: 201;
|
|
284
286
|
|
|
285
287
|
/* ═══════════════════════════════════════════════
|
|
286
288
|
STEPPER (wizard / multi-step flow)
|