@ -40,6 +40,11 @@
let nest = $state(true)
let nest = $state(true)
let playing = $state(true)
let playing = $state(true)
// `full` (pill/circle) is dimension-capped per element → concentric nesting is impossible there:
// a tall pill can't have a concentric wide-pill child (their radii cap to different values).
// Concentric needs FINITE radii; `full` is for leaf elements (chips · buttons · avatars).
const isFull = $derived(radius === 'full');
const RADII = ['sm', 'md', 'lg', 'xl', 'full'] as const
const RADII = ['sm', 'md', 'lg', 'xl', 'full'] as const
// ── 4 · eventful press ───────────────────────────────────────────────────────
// ── 4 · eventful press ───────────────────────────────────────────────────────
@ -90,8 +95,9 @@
< div
< div
class="player-cover"
class="player-cover"
data-shape={ family }
data-shape={ family }
data-shape-nest={ nest ? '' : undefined }
data-shape-nest={ nest && ! isFull ? '' : undefined }
class:cover-naive={ ! nest }
class:cover-naive={ ! nest && ! isFull }
class:cover-full={ isFull }
>
>
< button class = "player-play" data-shape = { family } onclick= {() => ( playing = ! playing )} >
< button class = "player-play" data-shape = { family } onclick= {() => ( playing = ! playing )} >
{ playing ? '❚❚' : '▶' }
{ playing ? '❚❚' : '▶' }
@ -143,9 +149,15 @@
< / div >
< / div >
< / div >
< / div >
< label class = "ctl ctl-check" >
< label class = "ctl ctl-check" class:ctl-dim = { isFull } >
< input type = "checkbox" bind:checked = { nest } / >
< input type = "checkbox" bind:checked = { nest } disabled= { isFull } />
< span class = "ctl-label" > radios concéntricos { nest ? '' : '· off (la carátula desencaja)' } </ span >
< span class = "ctl-label"
>radios concéntricos { isFull
? '· n/a a full (geometría de hoja)'
: nest
? ''
: '· off (la carátula desencaja)'}< /span
>
< / label >
< / label >
< code class = "panel-code"
< code class = "panel-code"
@ -326,8 +338,8 @@
position: relative;
position: relative;
aspect-ratio: 16 / 10;
aspect-ratio: 16 / 10;
margin: var(--space-2);
margin: var(--space-2);
/* radius comes from [data-shape-nest] (concentric) or .cover-naive — never set here, or the
/* radius comes from [data-shape-nest] (concentric), .cover-naive, or .cover-full — never set
scoped rule would beat the foundation's nest rule and the inset would stop being concentric */
here, or the scoped rule would beat the foundation's nest rule and break the concentric inset */
background:
background:
radial-gradient(60% 80% at 30% 20%, color-mix(in oklab, var(--color-primary-solid) 90%, white), transparent 70%),
radial-gradient(60% 80% at 30% 20%, color-mix(in oklab, var(--color-primary-solid) 90%, white), transparent 70%),
radial-gradient(70% 90% at 80% 90%, #12a594, transparent 70%),
radial-gradient(70% 90% at 80% 90%, #12a594, transparent 70%),
@ -337,6 +349,10 @@
overflow: hidden;
overflow: hidden;
}
}
.cover-naive { border - radius : var ( -- radius - xl ); }
.cover-naive { border - radius : var ( -- radius - xl ); }
/* at `full` the card is a pill (radius caps to half its width); a 16:10 cover would cap to half
its HEIGHT → a horizontal pill that can't be concentric with a vertical-pill parent. Concentric
needs finite radii. So at full the cover stays cleanly rounded (a leaf), never "pill-in-pill". */
.cover-full { border - radius : var ( -- radius - xl ); }
.player-play {
.player-play {
inline-size: 3.25rem;
inline-size: 3.25rem;
aspect-ratio: 1;
aspect-ratio: 1;