@pie-players/pie-players-shared 0.3.65 → 0.3.66
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/dist/types/index.d.ts +6 -0
- package/dist/ui/content-styles.js +19 -1
- package/dist/ui/focus-trap.js +11 -2
- package/package.json +1 -1
package/dist/types/index.d.ts
CHANGED
|
@@ -422,6 +422,12 @@ export type CatalogCardPayload = SignLanguageCardPayload | SpokenAudioCardPayloa
|
|
|
422
422
|
export interface CatalogCard {
|
|
423
423
|
catalog: string;
|
|
424
424
|
language?: string;
|
|
425
|
+
/**
|
|
426
|
+
* Optional presentation policy carried by catalog-backed UI such as an audio
|
|
427
|
+
* transcript. Unknown values remain authored metadata for the capability that
|
|
428
|
+
* understands them; the generic catalog resolver does not reinterpret them.
|
|
429
|
+
*/
|
|
430
|
+
visibility?: string;
|
|
425
431
|
/**
|
|
426
432
|
* The string form of the card's content, for catalog types a string can
|
|
427
433
|
* express: SSML for `spoken`, plain text for `simplified-language`, and so
|
|
@@ -27,6 +27,24 @@ const MARKER_ATTRIBUTE = "data-pie-content-styles";
|
|
|
27
27
|
* that opted out but then shipped nothing.
|
|
28
28
|
*/
|
|
29
29
|
const SENTINEL_PROPERTY = "--pie-content-styles";
|
|
30
|
+
// Svelte's dev-mode custom-element reset expands `all: unset` into individual
|
|
31
|
+
// declarations, including custom properties it has observed elsewhere in the
|
|
32
|
+
// bundle. That can produce `--pie-content-styles: unset` on a scoped selector;
|
|
33
|
+
// it is a reset, not evidence that a host loaded components.css.
|
|
34
|
+
const CSS_WIDE_RESET_VALUES = new Set([
|
|
35
|
+
"inherit",
|
|
36
|
+
"initial",
|
|
37
|
+
"revert",
|
|
38
|
+
"revert-layer",
|
|
39
|
+
"unset",
|
|
40
|
+
]);
|
|
41
|
+
const declaresContentStylesSentinel = (rule) => {
|
|
42
|
+
const value = rule.style
|
|
43
|
+
?.getPropertyValue(SENTINEL_PROPERTY)
|
|
44
|
+
.trim()
|
|
45
|
+
.toLowerCase();
|
|
46
|
+
return Boolean(value && !CSS_WIDE_RESET_VALUES.has(value));
|
|
47
|
+
};
|
|
30
48
|
/** `<html data-pie-content-styles="host">` opts a host out of installation. */
|
|
31
49
|
const OPT_OUT_ATTRIBUTE = "data-pie-content-styles";
|
|
32
50
|
const OPT_OUT_VALUE = "host";
|
|
@@ -118,7 +136,7 @@ const countHostContentStyleSheets = () => {
|
|
|
118
136
|
if (!rules)
|
|
119
137
|
continue;
|
|
120
138
|
for (const rule of Array.from(rules)) {
|
|
121
|
-
if (rule
|
|
139
|
+
if (declaresContentStylesSentinel(rule)) {
|
|
122
140
|
count += 1;
|
|
123
141
|
break;
|
|
124
142
|
}
|
package/dist/ui/focus-trap.js
CHANGED
|
@@ -2,6 +2,13 @@ import { FOCUSABLE_SELECTOR, isProgrammaticFocusTarget, } from "./first-focusabl
|
|
|
2
2
|
function getFocusableElements(container) {
|
|
3
3
|
return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter((el) => isProgrammaticFocusTarget(el));
|
|
4
4
|
}
|
|
5
|
+
function getDeepActiveElement(root) {
|
|
6
|
+
let active = root.activeElement;
|
|
7
|
+
while (active?.shadowRoot?.activeElement) {
|
|
8
|
+
active = active.shadowRoot.activeElement;
|
|
9
|
+
}
|
|
10
|
+
return active;
|
|
11
|
+
}
|
|
5
12
|
function focusInitialTarget(container, initialFocus) {
|
|
6
13
|
try {
|
|
7
14
|
if (initialFocus && container.contains(initialFocus)) {
|
|
@@ -27,7 +34,7 @@ function focusInitialTarget(container, initialFocus) {
|
|
|
27
34
|
*/
|
|
28
35
|
export function createFocusTrap(container, options = {}) {
|
|
29
36
|
const prev = typeof document !== "undefined"
|
|
30
|
-
? document
|
|
37
|
+
? getDeepActiveElement(document)
|
|
31
38
|
: null;
|
|
32
39
|
const wrap = options.wrap ?? true;
|
|
33
40
|
const onKeydown = (event) => {
|
|
@@ -45,7 +52,9 @@ export function createFocusTrap(container, options = {}) {
|
|
|
45
52
|
container.focus?.();
|
|
46
53
|
return;
|
|
47
54
|
}
|
|
48
|
-
const current =
|
|
55
|
+
const current = getDeepActiveElement(container.getRootNode() instanceof ShadowRoot
|
|
56
|
+
? container.getRootNode()
|
|
57
|
+
: document);
|
|
49
58
|
const currentIndex = focusable.indexOf(current || focusable[0]);
|
|
50
59
|
if (event.shiftKey) {
|
|
51
60
|
if (currentIndex <= 0) {
|