@pie-players/pie-section-player 0.3.68 → 0.3.70
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/README.md +20 -0
- package/dist/pie-section-player.js +15852 -15100
- package/package.json +14 -14
package/README.md
CHANGED
|
@@ -415,6 +415,15 @@ Passage and item cards share a common header row
|
|
|
415
415
|
- When a header fill is provided, header top corners default just inside the
|
|
416
416
|
card radius. Hosts/themes can override them independently via
|
|
417
417
|
`--pie-section-player-card-header-radius`.
|
|
418
|
+
- Under a dark theme the header takes
|
|
419
|
+
`--pie-section-player-card-header-background-dark` instead, falling back to
|
|
420
|
+
`--pie-section-player-card-header-background` when it is unset. That is the
|
|
421
|
+
hook for a host whose brand tint is legible on a light card but not on a dark
|
|
422
|
+
one. "Dark theme" here means the selectors the theme package writes its dark
|
|
423
|
+
tokens under: `[data-theme="dark"]` on an ancestor, or
|
|
424
|
+
`pie-theme[theme="dark"]`. Note the `-dark` suffix means *under a dark theme*
|
|
425
|
+
here, unlike canonical tokens such as `--pie-background-dark`, where it means
|
|
426
|
+
a darker shade.
|
|
418
427
|
- `pie-section-player-passage-card` also bridges
|
|
419
428
|
`--pie-passage-header-background` to `--pie-section-player-card-header-background`,
|
|
420
429
|
so a hosted passage-player custom element (defined outside this package)
|
|
@@ -428,6 +437,7 @@ pie-section-player-passage-card,
|
|
|
428
437
|
pie-section-player-item-card {
|
|
429
438
|
--pie-section-player-card-radius: 8px;
|
|
430
439
|
--pie-section-player-card-header-background: #c9e5e6;
|
|
440
|
+
--pie-section-player-card-header-background-dark: #1f4a4d;
|
|
431
441
|
--pie-section-player-card-header-radius: 7px;
|
|
432
442
|
}
|
|
433
443
|
```
|
|
@@ -436,6 +446,16 @@ When both max-width attributes are set, the with-passage cap resolves to the gre
|
|
|
436
446
|
of the two configured values (after clamp), so with-passage mode never ends up narrower
|
|
437
447
|
than no-passage mode.
|
|
438
448
|
|
|
449
|
+
### Split-pane backdrop
|
|
450
|
+
|
|
451
|
+
The split-pane layout paints a backdrop behind each scrollable pane, under the
|
|
452
|
+
passage and item cards. It reads the canonical `--pie-background-dark`, so it
|
|
453
|
+
follows the active theme and color scheme, and there is no pane-specific hook:
|
|
454
|
+
the backdrop is meant to stay with the theme rather than be styled per pane.
|
|
455
|
+
The rule covers the items pane as well as the passage pane, so it is not driven
|
|
456
|
+
from a passage-header hook. Card fills stay independent via
|
|
457
|
+
`--pie-section-player-card-header-background`.
|
|
458
|
+
|
|
439
459
|
### Content-card tool surfaces
|
|
440
460
|
|
|
441
461
|
Item and passage cards offer two content-scoped host surfaces:
|