alice.pds.demo.boltless.dev
This repository has no description
web/components: press Button's content, not the button itself
the raised variants moved the whole button down 2px on :active, so a pressed
button nudged its own box and anything laid out against it. the depth now reads
purely from the ::before shadow flip plus the label sinking: the translate moved
onto a wrapper span around the content, driven by active:*:translate-y-0.5.
the wrapper takes gap-[inherit] so the size variants' gap still applies across
the extra level, and geometry is unchanged — the sizes, loading and inset-shadow
stories measure identical button rects before and after.
Signed-off-by: eti <eti@eti.tf>
author
eti
committer
dawn
date
(Jul 31, 2026, 10:57 PM +0300)
commit
402267ce
402267ce15af22bedd90100010ebd613335bf04c
parent
eb6f8b75
eb6f8b75030e2191c032eb5c5f552b73764e31fe
change-id
nvutsvvv
nvutsvvvnuxupvlzmswpspuulmskmstw
+22
-17
+22
-17
web/src/lib/components/ui/Button.svelte
+22
-17
web/src/lib/components/ui/Button.svelte
···
55
55
}
56
56
},
57
57
compoundVariants: [
58
-
// raised variants draw inset depth via a ::before layer.
58
+
// raised variants draw inset depth via a ::before layer. pressing shifts the
59
+
// content wrapper rather than the button itself, so the box stays put.
59
60
{
60
61
variant: "default",
61
62
insetShadow: true,
62
63
class: [
63
64
"relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-l-[max(calc(var(--btn-radius-l)-2px),0px)] before:rounded-r-[max(calc(var(--btn-radius-r)-2px),0px)] before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-subtle)] before:transition-all before:duration-150 before:content-['']",
64
65
"hover:before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-strong-hover)]",
65
-
"active:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_var(--color-shadow-inner-subtle)]",
66
-
"disabled:active:translate-y-0"
66
+
"active:*:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_var(--color-shadow-inner-subtle)]",
67
+
"disabled:active:*:translate-y-0"
67
68
]
68
69
},
69
70
{
···
71
72
insetShadow: true,
72
73
class: [
73
74
"relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-l-[max(calc(var(--btn-radius-l)-2px),0px)] before:rounded-r-[max(calc(var(--btn-radius-r)-2px),0px)] before:shadow-[inset_0_-2px_0_0_var(--color-alpha-dark-25)] before:transition-all before:duration-150 before:content-['']",
74
-
"active:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_var(--color-alpha-dark-50)]",
75
-
"disabled:active:translate-y-0"
75
+
"active:*:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_var(--color-alpha-dark-50)]",
76
+
"disabled:active:*:translate-y-0"
76
77
]
77
78
}
78
79
],
···
134
135
</script>
135
136
136
137
{#snippet content()}
137
-
{#if loading}
138
-
<Spinner class={spinnerSize} />
139
-
{:else}
140
-
{#if Icon && iconSide == "left"}
141
-
<Icon class="{iconSize} shrink-0" aria-hidden="true" />
142
-
{/if}
143
-
{#if children}
144
-
{@render children()}
145
-
{/if}
146
-
{#if Icon && iconSide == "right"}
147
-
<Icon class="{iconSize} shrink-0" aria-hidden="true" />
138
+
<!-- single wrapper so the press animation moves the label/icon, not the button box.
139
+
gap-[inherit] keeps the size variant's gap working across the extra level. -->
140
+
<span class="inline-flex min-w-0 items-center justify-center gap-[inherit]">
141
+
{#if loading}
142
+
<Spinner class={spinnerSize} />
143
+
{:else}
144
+
{#if Icon && iconSide == "left"}
145
+
<Icon class="{iconSize} shrink-0" aria-hidden="true" />
146
+
{/if}
147
+
{#if children}
148
+
{@render children()}
149
+
{/if}
150
+
{#if Icon && iconSide == "right"}
151
+
<Icon class="{iconSize} shrink-0" aria-hidden="true" />
152
+
{/if}
148
153
{/if}
149
-
{/if}
154
+
</span>
150
155
{/snippet}
151
156
152
157
{#if href}