element for table captions instead of just styled text.",
},
"td-has-header": {
title: "| has header",
axeSummary:
"Ensure each non-empty data cell in large tables (3\xD73+) has one or more headers",
friendlySummary:
"Every data cell in large tables should be associated with at least one header cell.",
},
},
za = {
"aria-roledescription": {
title: "aria-roledescription",
axeSummary:
"Ensure aria-roledescription is only used on elements with an implicit or explicit role",
friendlySummary:
"Only use aria-roledescription on elements that already have a defined role.",
},
},
en = { ...La, ...Fa, ...Ha, ...Ga, ...Ua, ...Ba, ...za },
je = (e) => en[e.id]?.title || e.id,
Ye = (e) => en[e.id]?.friendlySummary || e.description,
B = "storybook/a11y",
Ve = `${B}/panel`,
Wa = "a11y",
ja = `${B}/result`,
Ya = `${B}/request`,
Va = `${B}/running`,
qa = `${B}/error`,
Ka = `${B}/manual`,
Qa = `${B}/select`,
Xa = "writing-tests/accessibility-testing",
Za = `${Xa}#why-are-my-tests-failing-in-different-environments`,
ce = {
RESULT: ja,
REQUEST: Ya,
RUNNING: Va,
ERROR: qa,
MANUAL: Ka,
SELECT: Qa,
},
Ft = "storybook/component-test",
Ja = "storybook/a11y",
er = ["html", "body", "main"],
He = Ct(Ot.light),
Ue = {
[W.VIOLATION]: He.color.negative,
[W.PASS]: He.color.positive,
[W.INCOMPLETION]: He.color.warning,
},
tn = fe({
parameters: {},
results: void 0,
highlighted: !1,
toggleHighlight: () => {},
tab: W.VIOLATION,
handleCopyLink: () => {},
setTab: () => {},
setStatus: () => {},
status: "initial",
error: void 0,
handleManual: () => {},
discrepancy: null,
selectedItems: new Map(),
allExpanded: !1,
toggleOpen: () => {},
handleCollapseAll: () => {},
handleExpandAll: () => {},
handleJumpToElement: () => {},
handleSelectionChange: () => {},
}),
tr = (e) => {
let t = bt("a11y", {}),
[a] = yt() ?? [],
n = Re(),
r = R((y = !1) => (y ? "manual" : "initial"), []),
i = j(() => a?.a11y?.manual ?? !1, [a?.a11y?.manual]),
l = j(() => {
let y = n.getQueryParam("a11ySelection");
return (y && n.setQueryParams({ a11ySelection: "" }), y);
}, [n]),
[c, d] = De(B),
[s, f] = H(() => {
let [y] = l?.split(".") ?? [];
return y && Object.values(W).includes(y) ? y : W.VIOLATION;
}),
[u, p] = H(void 0),
[b, h] = H(r(i)),
[I, v] = H(!!l),
{ storyId: g } = gt(),
A = pt((y) => y[g]?.[Ja]?.value);
G(
() =>
ft("storybook/component-test").onAllStatusChange((y, T) => {
let S = y[g]?.[Ft],
_ = T[g]?.[Ft];
S?.value === "status-value:error" &&
_?.value !== "status-value:error" &&
h("component-test-error");
}),
[g],
);
let Y = R(() => v((y) => !y), []),
[C, D] = H(() => {
let y = new Map();
if (l && /^[a-z]+.[a-z-]+.[0-9]+$/.test(l)) {
let [T, S] = l.split(".");
y.set(`${T}.${S}`, l);
}
return y;
}),
$ = j(
() => c?.[s]?.every((y) => C.has(`${s}.${y.id}`)) ?? !1,
[c, C, s],
),
x = R((y, T, S) => {
y.stopPropagation();
let _ = `${T}.${S.id}`;
D((M) => new Map(M.delete(_) ? M : M.set(_, `${_}.1`)));
}, []),
F = R(() => {
D(new Map());
}, []),
q = R(() => {
D(
(y) =>
new Map(
c?.[s]?.map((T) => {
let S = `${s}.${T.id}`;
return [S, y.get(S) ?? `${S}.1`];
}) ?? [],
),
);
}, [c, s]),
te = R((y) => {
let [T, S] = y.split(".");
D((_) => new Map(_.set(`${T}.${S}`, y)));
}, []),
ne = R((y) => {
(h("error"), p(y));
}, []),
ae = R(
(y, T) => {
g === T &&
(h("ran"),
d(y),
setTimeout(() => {
if ((b === "ran" && h("ready"), C.size === 1)) {
let [S] = C.values();
document
.getElementById(S)
?.scrollIntoView({ behavior: "smooth", block: "center" });
}
}, 900));
},
[d, b, g, C],
),
se = R(
(y, T) => {
let [S, _] = y.split("."),
{ helpUrl: M, nodes: ye } =
c?.[S]?.find((ue) => ue.id === _) || {},
be = M && window.open(M, "_blank", "noopener,noreferrer");
if (ye && !be) {
let ue =
ye.findIndex((ge) =>
T.selectors.some((wn) => wn === String(ge.target)),
) ?? -1;
if (ue !== -1) {
let ge = `${S}.${_}.${ue + 1}`;
(D(new Map([[`${S}.${_}`, ge]])),
setTimeout(() => {
document.getElementById(ge)?.scrollIntoView({
behavior: "smooth",
block: "center",
});
}, 100));
}
}
},
[c],
),
K = R(
({ reporters: y }) => {
let T = y.find((S) => S.type === "a11y");
T && ("error" in T.result ? ne(T.result.error) : ae(T.result, g));
},
[ne, ae, g],
),
it = R(
({ newPhase: y }) => {
(y === "loading" && (d(void 0), h(i ? "manual" : "initial")),
y === "afterEach" && !i && h("running"));
},
[i, d],
),
Q = ht(
{
[ce.RESULT]: ae,
[ce.ERROR]: ne,
[ce.SELECT]: se,
[wt]: () => D(new Map()),
[Pt]: it,
[kt]: K,
[Nt]: () => {
(h("running"), Q(ce.MANUAL, g, t));
},
},
[it, K, se, ne, ae, t, g],
),
Tn = R(() => {
(h("running"), Q(ce.MANUAL, g, t));
}, [Q, t, g]),
_n = R(async (y) => {
let { createCopyToClipboardFunction: T } =
await Promise.resolve().then(() => (Ne(), mt));
await T()(`${window.location.origin}${y}`);
}, []),
Cn = R((y) => Q(Dt, y), [Q]);
(G(() => {
h(r(i));
}, [r, i]),
G(() => {
if ((Q(Fe, `${B}/selected`), Q(Fe, `${B}/others`), !I)) return;
let y = Array.from(C.values()).flatMap((S) => {
let [_, M, ye] = S.split(".");
if (_ !== s) return [];
let be = c?.[_]?.find((ue) => ue.id === M)?.nodes[Number(ye) - 1]
?.target;
return be ? [String(be)] : [];
});
Q(Le, {
id: `${B}/selected`,
priority: 1,
selectors: y,
styles: {
outline: `1px solid color-mix(in srgb, ${Ue[s]}, transparent 30%)`,
backgroundColor: "transparent",
},
hoverStyles: { outlineWidth: "2px" },
focusStyles: { backgroundColor: "transparent" },
menu: c?.[s].map((S) => {
let _ = S.nodes
.flatMap((M) => M.target)
.map(String)
.filter((M) => y.includes(M));
return [
{
id: `${s}.${S.id}:info`,
title: je(S),
description: Ye(S),
selectors: _,
},
{
id: `${s}.${S.id}`,
iconLeft: "info",
iconRight: "shareAlt",
title: "Learn how to resolve this violation",
clickEvent: ce.SELECT,
selectors: _,
},
];
}),
});
let T = c?.[s]
.flatMap((S) => S.nodes.flatMap((_) => _.target).map(String))
.filter((S) => ![...er, ...y].includes(S));
Q(Le, {
id: `${B}/others`,
selectors: T,
styles: {
outline: `1px solid color-mix(in srgb, ${Ue[s]}, transparent 30%)`,
backgroundColor: `color-mix(in srgb, ${Ue[s]}, transparent 60%)`,
},
hoverStyles: { outlineWidth: "2px" },
focusStyles: { backgroundColor: "transparent" },
menu: c?.[s].map((S) => {
let _ = S.nodes
.flatMap((M) => M.target)
.map(String)
.filter((M) => !y.includes(M));
return [
{
id: `${s}.${S.id}:info`,
title: je(S),
description: Ye(S),
selectors: _,
},
{
id: `${s}.${S.id}`,
iconLeft: "info",
iconRight: "shareAlt",
title: "Learn how to resolve this violation",
clickEvent: ce.SELECT,
selectors: _,
},
];
}),
});
}, [Q, I, c, s, C]));
let On = j(() => {
if (!A) return null;
if (A === "status-value:success" && c?.violations.length)
return "cliPassedBrowserFailed";
if (A === "status-value:error" && !c?.violations.length) {
if (b === "ready" || b === "ran") return "browserPassedCliFailed";
if (b === "manual") return "cliFailedButModeManual";
}
return null;
}, [c?.violations.length, b, A]);
return o.createElement(tn.Provider, {
value: {
parameters: t,
results: c,
highlighted: I,
toggleHighlight: Y,
tab: s,
setTab: f,
handleCopyLink: _n,
status: b,
setStatus: h,
error: u,
handleManual: Tn,
discrepancy: On,
selectedItems: C,
toggleOpen: x,
allExpanded: $,
handleCollapseAll: F,
handleExpandAll: q,
handleJumpToElement: Cn,
handleSelectionChange: te,
},
...e,
});
},
nt = () => ve(tn);
function N() {
return (
(N = Object.assign
? Object.assign.bind()
: function (e) {
for (var t = 1; t < arguments.length; t++) {
var a = arguments[t];
for (var n in a)
({}).hasOwnProperty.call(a, n) && (e[n] = a[n]);
}
return e;
}),
N.apply(null, arguments)
);
}
function ee(e, t, { checkForDefaultPrevented: a = !0 } = {}) {
return function (n) {
if ((e?.(n), a === !1 || !n.defaultPrevented)) return t?.(n);
};
}
function at(e, t = []) {
let a = [];
function n(i, l) {
let c = fe(l),
d = a.length;
a = [...a, l];
function s(u) {
let { scope: p, children: b, ...h } = u,
I = p?.[e][d] || c,
v = j(() => h, Object.values(h));
return m(I.Provider, { value: v }, b);
}
function f(u, p) {
let b = p?.[e][d] || c,
h = ve(b);
if (h) return h;
if (l !== void 0) return l;
throw new Error(`\`${u}\` must be used within \`${i}\``);
}
return ((s.displayName = i + "Provider"), [s, f]);
}
let r = () => {
let i = a.map((l) => fe(l));
return function (l) {
let c = l?.[e] || i;
return j(() => ({ [`__scope${e}`]: { ...l, [e]: c } }), [l, c]);
};
};
return ((r.scopeName = e), [n, nr(r, ...t)]);
}
function nr(...e) {
let t = e[0];
if (e.length === 1) return t;
let a = () => {
let n = e.map((r) => ({ useScope: r(), scopeName: r.scopeName }));
return function (r) {
let i = n.reduce((l, { useScope: c, scopeName: d }) => {
let s = c(r)[`__scope${d}`];
return { ...l, ...s };
}, {});
return j(() => ({ [`__scope${t.scopeName}`]: i }), [i]);
};
};
return ((a.scopeName = t.scopeName), a);
}
function ar(e, t) {
typeof e == "function" ? e(t) : e != null && (e.current = t);
}
function nn(...e) {
return (t) => e.forEach((a) => ar(a, t));
}
function Ht(...e) {
return R(nn(...e), e);
}
var qe = L((e, t) => {
let { children: a, ...n } = e,
r = P.toArray(a),
i = r.find(or);
if (i) {
let l = i.props.children,
c = r.map((d) =>
d === i
? P.count(l) > 1
? P.only(null)
: U(l)
? l.props.children
: null
: d,
);
return m(Ke, N({}, n, { ref: t }), U(l) ? V(l, void 0, c) : null);
}
return m(Ke, N({}, n, { ref: t }), a);
});
qe.displayName = "Slot";
var Ke = L((e, t) => {
let { children: a, ...n } = e;
return U(a)
? V(a, { ...lr(n, a.props), ref: t ? nn(t, a.ref) : a.ref })
: P.count(a) > 1
? P.only(null)
: null;
});
Ke.displayName = "SlotClone";
var rr = ({ children: e }) => m(me, null, e);
function or(e) {
return U(e) && e.type === rr;
}
function lr(e, t) {
let a = { ...t };
for (let n in t) {
let r = e[n],
i = t[n];
/^on[A-Z]/.test(n)
? r && i
? (a[n] = (...l) => {
(i(...l), r(...l));
})
: r && (a[n] = r)
: n === "style"
? (a[n] = { ...r, ...i })
: n === "className" && (a[n] = [r, i].filter(Boolean).join(" "));
}
return { ...e, ...a };
}
function ir(e) {
let t = e + "CollectionProvider",
[a, n] = at(t),
[r, i] = a(t, { collectionRef: { current: null }, itemMap: new Map() }),
l = (b) => {
let { scope: h, children: I } = b,
v = o.useRef(null),
g = o.useRef(new Map()).current;
return o.createElement(
r,
{ scope: h, itemMap: g, collectionRef: v },
I,
);
},
c = e + "CollectionSlot",
d = o.forwardRef((b, h) => {
let { scope: I, children: v } = b,
g = i(c, I),
A = Ht(h, g.collectionRef);
return o.createElement(qe, { ref: A }, v);
}),
s = e + "CollectionItemSlot",
f = "data-radix-collection-item",
u = o.forwardRef((b, h) => {
let { scope: I, children: v, ...g } = b,
A = o.useRef(null),
Y = Ht(h, A),
C = i(s, I);
return (
o.useEffect(
() => (
C.itemMap.set(A, { ref: A, ...g }),
() => void C.itemMap.delete(A)
),
),
o.createElement(qe, { [f]: "", ref: Y }, v)
);
});
function p(b) {
let h = i(e + "CollectionConsumer", b);
return o.useCallback(() => {
let I = h.collectionRef.current;
if (!I) return [];
let v = Array.from(I.querySelectorAll(`[${f}]`));
return Array.from(h.itemMap.values()).sort(
(g, A) => v.indexOf(g.ref.current) - v.indexOf(A.ref.current),
);
}, [h.collectionRef, h.itemMap]);
}
return [{ Provider: l, Slot: d, ItemSlot: u }, p, n];
}
function cr(e, t) {
typeof e == "function" ? e(t) : e != null && (e.current = t);
}
function an(...e) {
return (t) => e.forEach((a) => cr(a, t));
}
function sr(...e) {
return R(an(...e), e);
}
var ur = globalThis?.document ? Ee : () => {},
dr = ut || (() => {}),
mr = 0;
function rn(e) {
let [t, a] = H(dr());
return (
ur(() => {
e || a((n) => n ?? String(mr++));
}, [e]),
e || (t ? `radix-${t}` : "")
);
}
var on = L((e, t) => {
let { children: a, ...n } = e,
r = P.toArray(a),
i = r.find(pr);
if (i) {
let l = i.props.children,
c = r.map((d) =>
d === i
? P.count(l) > 1
? P.only(null)
: U(l)
? l.props.children
: null
: d,
);
return m(Qe, N({}, n, { ref: t }), U(l) ? V(l, void 0, c) : null);
}
return m(Qe, N({}, n, { ref: t }), a);
});
on.displayName = "Slot";
var Qe = L((e, t) => {
let { children: a, ...n } = e;
return U(a)
? V(a, { ...hr(n, a.props), ref: t ? an(t, a.ref) : a.ref })
: P.count(a) > 1
? P.only(null)
: null;
});
Qe.displayName = "SlotClone";
var fr = ({ children: e }) => m(me, null, e);
function pr(e) {
return U(e) && e.type === fr;
}
function hr(e, t) {
let a = { ...t };
for (let n in t) {
let r = e[n],
i = t[n];
/^on[A-Z]/.test(n)
? r && i
? (a[n] = (...l) => {
(i(...l), r(...l));
})
: r && (a[n] = r)
: n === "style"
? (a[n] = { ...r, ...i })
: n === "className" && (a[n] = [r, i].filter(Boolean).join(" "));
}
return { ...e, ...a };
}
var yr = [
"a",
"button",
"div",
"form",
"h2",
"h3",
"img",
"input",
"label",
"li",
"nav",
"ol",
"p",
"span",
"svg",
"ul",
],
ln = yr.reduce((e, t) => {
let a = L((n, r) => {
let { asChild: i, ...l } = n,
c = i ? on : t;
return (
G(() => {
window[Symbol.for("radix-ui")] = !0;
}, []),
m(c, N({}, l, { ref: r }))
);
});
return ((a.displayName = `Primitive.${t}`), { ...e, [t]: a });
}, {});
function br(e) {
let t = z(e);
return (
G(() => {
t.current = e;
}),
j(
() =>
(...a) => {
var n;
return (n = t.current) === null || n === void 0
? void 0
: n.call(t, ...a);
},
[],
)
);
}
function cn(e) {
let t = z(e);
return (
G(() => {
t.current = e;
}),
j(
() =>
(...a) => {
var n;
return (n = t.current) === null || n === void 0
? void 0
: n.call(t, ...a);
},
[],
)
);
}
function sn({ prop: e, defaultProp: t, onChange: a = () => {} }) {
let [n, r] = gr({ defaultProp: t, onChange: a }),
i = e !== void 0,
l = i ? e : n,
c = cn(a),
d = R(
(s) => {
if (i) {
let f = typeof s == "function" ? s(e) : s;
f !== e && c(f);
} else r(s);
},
[i, e, r, c],
);
return [l, d];
}
function gr({ defaultProp: e, onChange: t }) {
let a = H(e),
[n] = a,
r = z(n),
i = cn(t);
return (
G(() => {
r.current !== n && (i(n), (r.current = n));
}, [n, r, i]),
a
);
}
var Sr = fe(void 0);
function un(e) {
let t = ve(Sr);
return e || t || "ltr";
}
var Ge = "rovingFocusGroup.onEntryFocus",
vr = { bubbles: !1, cancelable: !0 },
rt = "RovingFocusGroup",
[Xe, dn, Er] = ir(rt),
[Ir, mn] = at(rt, [Er]),
[xr, Rr] = Ir(rt),
Ar = L((e, t) =>
m(
Xe.Provider,
{ scope: e.__scopeRovingFocusGroup },
m(
Xe.Slot,
{ scope: e.__scopeRovingFocusGroup },
m($r, N({}, e, { ref: t })),
),
),
),
$r = L((e, t) => {
let {
__scopeRovingFocusGroup: a,
orientation: n,
loop: r = !1,
dir: i,
currentTabStopId: l,
defaultCurrentTabStopId: c,
onCurrentTabStopIdChange: d,
onEntryFocus: s,
...f
} = e,
u = z(null),
p = sr(t, u),
b = un(i),
[h = null, I] = sn({ prop: l, defaultProp: c, onChange: d }),
[v, g] = H(!1),
A = br(s),
Y = dn(a),
C = z(!1),
[D, $] = H(0);
return (
G(() => {
let x = u.current;
if (x)
return (
x.addEventListener(Ge, A),
() => x.removeEventListener(Ge, A)
);
}, [A]),
m(
xr,
{
scope: a,
orientation: n,
dir: b,
loop: r,
currentTabStopId: h,
onItemFocus: R((x) => I(x), [I]),
onItemShiftTab: R(() => g(!0), []),
onFocusableItemAdd: R(() => $((x) => x + 1), []),
onFocusableItemRemove: R(() => $((x) => x - 1), []),
},
m(
ln.div,
N({ tabIndex: v || D === 0 ? -1 : 0, "data-orientation": n }, f, {
ref: p,
style: { outline: "none", ...e.style },
onMouseDown: ee(e.onMouseDown, () => {
C.current = !0;
}),
onFocus: ee(e.onFocus, (x) => {
let F = !C.current;
if (x.target === x.currentTarget && F && !v) {
let q = new CustomEvent(Ge, vr);
if (
(x.currentTarget.dispatchEvent(q), !q.defaultPrevented)
) {
let te = Y().filter((K) => K.focusable),
ne = te.find((K) => K.active),
ae = te.find((K) => K.id === h),
se = [ne, ae, ...te]
.filter(Boolean)
.map((K) => K.ref.current);
fn(se);
}
}
C.current = !1;
}),
onBlur: ee(e.onBlur, () => g(!1)),
}),
),
)
);
}),
Tr = "RovingFocusGroupItem",
_r = L((e, t) => {
let {
__scopeRovingFocusGroup: a,
focusable: n = !0,
active: r = !1,
tabStopId: i,
...l
} = e,
c = rn(),
d = i || c,
s = Rr(Tr, a),
f = s.currentTabStopId === d,
u = dn(a),
{ onFocusableItemAdd: p, onFocusableItemRemove: b } = s;
return (
G(() => {
if (n) return (p(), () => b());
}, [n, p, b]),
m(
Xe.ItemSlot,
{ scope: a, id: d, focusable: n, active: r },
m(
ln.span,
N(
{ tabIndex: f ? 0 : -1, "data-orientation": s.orientation },
l,
{
ref: t,
onMouseDown: ee(e.onMouseDown, (h) => {
n ? s.onItemFocus(d) : h.preventDefault();
}),
onFocus: ee(e.onFocus, () => s.onItemFocus(d)),
onKeyDown: ee(e.onKeyDown, (h) => {
if (h.key === "Tab" && h.shiftKey) {
s.onItemShiftTab();
return;
}
if (h.target !== h.currentTarget) return;
let I = wr(h, s.orientation, s.dir);
if (I !== void 0) {
h.preventDefault();
let v = u()
.filter((g) => g.focusable)
.map((g) => g.ref.current);
if (I === "last") v.reverse();
else if (I === "prev" || I === "next") {
I === "prev" && v.reverse();
let g = v.indexOf(h.currentTarget);
v = s.loop ? kr(v, g + 1) : v.slice(g + 1);
}
setTimeout(() => fn(v));
}
}),
},
),
),
)
);
}),
Cr = {
ArrowLeft: "prev",
ArrowUp: "prev",
ArrowRight: "next",
ArrowDown: "next",
PageUp: "first",
Home: "first",
PageDown: "last",
End: "last",
};
function Or(e, t) {
return t !== "rtl"
? e
: e === "ArrowLeft"
? "ArrowRight"
: e === "ArrowRight"
? "ArrowLeft"
: e;
}
function wr(e, t, a) {
let n = Or(e.key, a);
if (
!(t === "vertical" && ["ArrowLeft", "ArrowRight"].includes(n)) &&
!(t === "horizontal" && ["ArrowUp", "ArrowDown"].includes(n))
)
return Cr[n];
}
function fn(e) {
let t = document.activeElement;
for (let a of e)
if (a === t || (a.focus(), document.activeElement !== t)) return;
}
function kr(e, t) {
return e.map((a, n) => e[(t + n) % e.length]);
}
var Nr = Ar,
Pr = _r;
function Dr(e, t) {
typeof e == "function" ? e(t) : e != null && (e.current = t);
}
function Mr(...e) {
return (t) => e.forEach((a) => Dr(a, t));
}
function Lr(...e) {
return R(Mr(...e), e);
}
var Ut = globalThis?.document ? Ee : () => {};
function Fr(e, t) {
return dt((a, n) => t[a][n] ?? a, e);
}
var pn = (e) => {
let { present: t, children: a } = e,
n = Hr(t),
r = typeof a == "function" ? a({ present: n.isPresent }) : P.only(a),
i = Lr(n.ref, r.ref);
return typeof a == "function" || n.isPresent ? V(r, { ref: i }) : null;
};
pn.displayName = "Presence";
function Hr(e) {
let [t, a] = H(),
n = z({}),
r = z(e),
i = z("none"),
l = e ? "mounted" : "unmounted",
[c, d] = Fr(l, {
mounted: { UNMOUNT: "unmounted", ANIMATION_OUT: "unmountSuspended" },
unmountSuspended: { MOUNT: "mounted", ANIMATION_END: "unmounted" },
unmounted: { MOUNT: "mounted" },
});
return (
G(() => {
let s = $e(n.current);
i.current = c === "mounted" ? s : "none";
}, [c]),
Ut(() => {
let s = n.current,
f = r.current;
if (f !== e) {
let u = i.current,
p = $e(s);
(e
? d("MOUNT")
: p === "none" || s?.display === "none"
? d("UNMOUNT")
: d(f && u !== p ? "ANIMATION_OUT" : "UNMOUNT"),
(r.current = e));
}
}, [e, d]),
Ut(() => {
if (t) {
let s = (u) => {
let p = $e(n.current).includes(u.animationName);
u.target === t && p && Lt(() => d("ANIMATION_END"));
},
f = (u) => {
u.target === t && (i.current = $e(n.current));
};
return (
t.addEventListener("animationstart", f),
t.addEventListener("animationcancel", s),
t.addEventListener("animationend", s),
() => {
(t.removeEventListener("animationstart", f),
t.removeEventListener("animationcancel", s),
t.removeEventListener("animationend", s));
}
);
} else d("ANIMATION_END");
}, [t, d]),
{
isPresent: ["mounted", "unmountSuspended"].includes(c),
ref: R((s) => {
(s && (n.current = getComputedStyle(s)), a(s));
}, []),
}
);
}
function $e(e) {
return e?.animationName || "none";
}
function Ur(e, t) {
typeof e == "function" ? e(t) : e != null && (e.current = t);
}
function Gr(...e) {
return (t) => e.forEach((a) => Ur(a, t));
}
var hn = L((e, t) => {
let { children: a, ...n } = e,
r = P.toArray(a),
i = r.find(zr);
if (i) {
let l = i.props.children,
c = r.map((d) =>
d === i
? P.count(l) > 1
? P.only(null)
: U(l)
? l.props.children
: null
: d,
);
return m(Ze, N({}, n, { ref: t }), U(l) ? V(l, void 0, c) : null);
}
return m(Ze, N({}, n, { ref: t }), a);
});
hn.displayName = "Slot";
var Ze = L((e, t) => {
let { children: a, ...n } = e;
return U(a)
? V(a, { ...Wr(n, a.props), ref: t ? Gr(t, a.ref) : a.ref })
: P.count(a) > 1
? P.only(null)
: null;
});
Ze.displayName = "SlotClone";
var Br = ({ children: e }) => m(me, null, e);
function zr(e) {
return U(e) && e.type === Br;
}
function Wr(e, t) {
let a = { ...t };
for (let n in t) {
let r = e[n],
i = t[n];
/^on[A-Z]/.test(n)
? r && i
? (a[n] = (...l) => {
(i(...l), r(...l));
})
: r && (a[n] = r)
: n === "style"
? (a[n] = { ...r, ...i })
: n === "className" && (a[n] = [r, i].filter(Boolean).join(" "));
}
return { ...e, ...a };
}
var jr = [
"a",
"button",
"div",
"form",
"h2",
"h3",
"img",
"input",
"label",
"li",
"nav",
"ol",
"p",
"span",
"svg",
"ul",
],
_e = jr.reduce((e, t) => {
let a = L((n, r) => {
let { asChild: i, ...l } = n,
c = i ? hn : t;
return (
G(() => {
window[Symbol.for("radix-ui")] = !0;
}, []),
m(c, N({}, l, { ref: r }))
);
});
return ((a.displayName = `Primitive.${t}`), { ...e, [t]: a });
}, {}),
yn = "Tabs",
[Yr, Gp] = at(yn, [mn]),
bn = mn(),
[Vr, ot] = Yr(yn),
qr = L((e, t) => {
let {
__scopeTabs: a,
value: n,
onValueChange: r,
defaultValue: i,
orientation: l = "horizontal",
dir: c,
activationMode: d = "automatic",
...s
} = e,
f = un(c),
[u, p] = sn({ prop: n, onChange: r, defaultProp: i });
return m(
Vr,
{
scope: a,
baseId: rn(),
value: u,
onValueChange: p,
orientation: l,
dir: f,
activationMode: d,
},
m(_e.div, N({ dir: f, "data-orientation": l }, s, { ref: t })),
);
}),
Kr = "TabsList",
Qr = L((e, t) => {
let { __scopeTabs: a, loop: n = !0, ...r } = e,
i = ot(Kr, a),
l = bn(a);
return m(
Nr,
N({ asChild: !0 }, l, {
orientation: i.orientation,
dir: i.dir,
loop: n,
}),
m(
_e.div,
N({ role: "tablist", "aria-orientation": i.orientation }, r, {
ref: t,
}),
),
);
}),
Xr = "TabsTrigger",
Zr = L((e, t) => {
let { __scopeTabs: a, value: n, disabled: r = !1, ...i } = e,
l = ot(Xr, a),
c = bn(a),
d = gn(l.baseId, n),
s = Sn(l.baseId, n),
f = n === l.value;
return m(
Pr,
N({ asChild: !0 }, c, { focusable: !r, active: f }),
m(
_e.button,
N(
{
type: "button",
role: "tab",
"aria-selected": f,
"aria-controls": s,
"data-state": f ? "active" : "inactive",
"data-disabled": r ? "" : void 0,
disabled: r,
id: d,
},
i,
{
ref: t,
onMouseDown: ee(e.onMouseDown, (u) => {
!r && u.button === 0 && u.ctrlKey === !1
? l.onValueChange(n)
: u.preventDefault();
}),
onKeyDown: ee(e.onKeyDown, (u) => {
[" ", "Enter"].includes(u.key) && l.onValueChange(n);
}),
onFocus: ee(e.onFocus, () => {
let u = l.activationMode !== "manual";
!f && !r && u && l.onValueChange(n);
}),
},
),
),
);
}),
Jr = "TabsContent",
eo = L((e, t) => {
let { __scopeTabs: a, value: n, forceMount: r, children: i, ...l } = e,
c = ot(Jr, a),
d = gn(c.baseId, n),
s = Sn(c.baseId, n),
f = n === c.value,
u = z(f);
return (
G(() => {
let p = requestAnimationFrame(() => (u.current = !1));
return () => cancelAnimationFrame(p);
}, []),
m(pn, { present: r || f }, ({ present: p }) =>
m(
_e.div,
N(
{
"data-state": f ? "active" : "inactive",
"data-orientation": c.orientation,
role: "tabpanel",
"aria-labelledby": d,
hidden: !p,
id: s,
tabIndex: 0,
},
l,
{
ref: t,
style: {
...e.style,
animationDuration: u.current ? "0s" : void 0,
},
},
),
p && i,
),
)
);
});
function gn(e, t) {
return `${e}-trigger-${t}`;
}
function Sn(e, t) {
return `${e}-content-${t}`;
}
var to = qr,
no = Qr,
ao = Zr,
Gt = eo,
Bt = E(we)(
({ theme: e }) => ({ fontSize: e.typography.size.s1 }),
({ language: e }) =>
e === "css" && {
".selector ~ span:nth-last-of-type(-n+3)": { display: "none" },
},
),
ro = E.div({ display: "flex", flexDirection: "column" }),
oo = E.div(({ theme: e }) => ({
display: "block",
color: e.textMutedColor,
fontFamily: e.typography.fonts.mono,
fontSize: e.typography.size.s1,
marginTop: -8,
marginBottom: 12,
"@container (min-width: 800px)": { display: "none" },
})),
lo = E.p({ margin: 0 }),
io = E.div({
display: "flex",
flexDirection: "column",
padding: "0 15px 20px 15px",
gap: 20,
}),
co = E.div({
gap: 15,
"@container (min-width: 800px)": {
display: "grid",
gridTemplateColumns: "50% 50%",
},
}),
zt = E.div(({ theme: e, side: t }) => ({
display: t === "left" ? "flex" : "none",
flexDirection: "column",
gap: 15,
margin: t === "left" ? "15px 0" : 0,
padding: t === "left" ? "0 15px" : 0,
borderLeft: t === "left" ? `1px solid ${e.color.border}` : "none",
"&:focus-visible": {
outline: "none",
borderRadius: 4,
boxShadow: `0 0 0 1px inset ${e.color.secondary}`,
},
"@container (min-width: 800px)": {
display: t === "left" ? "none" : "flex",
},
})),
so = E(re)(({ theme: e }) => ({
fontFamily: e.typography.fonts.mono,
fontWeight: e.typography.weight.regular,
color: e.textMutedColor,
height: 40,
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
display: "block",
width: "100%",
textAlign: "left",
padding: "0 12px",
'&[data-state="active"]': {
color: e.color.secondary,
backgroundColor: e.background.hoverable,
},
})),
uo = E.div({ display: "flex", flexDirection: "column", gap: 10 }),
mo = E.div({ display: "flex", gap: 10 }),
fo = ({ onClick: e }) => {
let [t, a] = H(!1),
n = R(() => {
(e(), a(!0));
let r = setTimeout(() => a(!1), 2e3);
return () => clearTimeout(r);
}, [e]);
return o.createElement(
re,
{ onClick: n },
t ? o.createElement(vt, null) : o.createElement(xt, null),
" ",
t ? "Copied" : "Copy link",
);
},
po = ({
id: e,
item: t,
type: a,
selection: n,
handleSelectionChange: r,
}) =>
o.createElement(
io,
{ id: e },
o.createElement(
ro,
null,
o.createElement(oo, null, t.id),
o.createElement(
lo,
null,
Ye(t),
" ",
o.createElement(
Ie,
{
href: t.helpUrl,
target: "_blank",
rel: "noopener noreferrer",
withArrow: !0,
},
"Learn how to resolve this violation",
),
),
),
o.createElement(
to,
{
defaultValue: n,
orientation: "vertical",
value: n,
onValueChange: r,
asChild: !0,
},
o.createElement(
co,
null,
o.createElement(
no,
{ "aria-label": a },
t.nodes.map((i, l) => {
let c = `${a}.${t.id}.${l + 1}`;
return o.createElement(
me,
{ key: c },
o.createElement(
ao,
{ value: c, asChild: !0 },
o.createElement(
so,
{ variant: "ghost", size: "medium", id: c },
l + 1,
". ",
i.html,
),
),
o.createElement(
Gt,
{ value: c, asChild: !0 },
o.createElement(zt, { side: "left" }, Wt(i)),
),
);
}),
),
t.nodes.map((i, l) => {
let c = `${a}.${t.id}.${l + 1}`;
return o.createElement(
Gt,
{ key: c, value: c, asChild: !0 },
o.createElement(zt, { side: "right" }, Wt(i)),
);
}),
),
),
);
function Wt(e) {
let { handleCopyLink: t, handleJumpToElement: a } = nt(),
{ any: n, all: r, none: i, html: l, target: c } = e,
d = [...n, ...r, ...i];
return o.createElement(
o.Fragment,
null,
o.createElement(
uo,
null,
d.map((s) =>
o.createElement(
"div",
{ key: s.id },
`${s.message}${/(\.|: [^.]+\.*)$/.test(s.message) ? "" : "."}`,
),
),
),
o.createElement(
mo,
null,
o.createElement(
re,
{ onClick: () => a(e.target.toString()) },
o.createElement(Tt, null),
" Jump to element",
),
o.createElement(fo, { onClick: () => t(e.linkPath) }),
),
o.createElement(
Bt,
{ language: "jsx", wrapLongLines: !0 },
`/* element */
${l}`,
),
o.createElement(
Bt,
{ language: "css", wrapLongLines: !0 },
`/* selector */
${c} {}`,
),
);
}
var ho = {
minor: "neutral",
moderate: "warning",
serious: "negative",
critical: "critical",
},
yo = {
minor: "Minor",
moderate: "Moderate",
serious: "Serious",
critical: "Critical",
},
bo = E.div(({ theme: e }) => ({
display: "flex",
flexDirection: "column",
width: "100%",
borderBottom: `1px solid ${e.appBorderColor}`,
containerType: "inline-size",
fontSize: e.typography.size.s2,
})),
go = E(Et)({ transition: "transform 0.1s ease-in-out" }),
So = E.div(({ theme: e }) => ({
display: "flex",
justifyContent: "space-between",
alignItems: "center",
gap: 6,
padding: "6px 10px 6px 15px",
minHeight: 40,
background: "none",
color: "inherit",
textAlign: "left",
cursor: "pointer",
width: "100%",
"&:hover": { color: e.color.secondary },
})),
vo = E.div(({ theme: e }) => ({
display: "flex",
alignItems: "baseline",
flexGrow: 1,
fontSize: e.typography.size.s2,
gap: 8,
})),
Eo = E.div(({ theme: e }) => ({
display: "none",
color: e.textMutedColor,
fontFamily: e.typography.fonts.mono,
fontSize: e.typography.size.s1,
"@container (min-width: 800px)": { display: "block" },
})),
Io = E.div(({ theme: e }) => ({
display: "flex",
alignItems: "center",
justifyContent: "center",
color: e.textMutedColor,
width: 28,
height: 28,
})),
Be = ({
items: e,
empty: t,
type: a,
handleSelectionChange: n,
selectedItems: r,
toggleOpen: i,
}) =>
o.createElement(
o.Fragment,
null,
e && e.length
? e.map((l) => {
let c = `${a}.${l.id}`,
d = `details:${c}`,
s = r.get(c),
f = je(l);
return o.createElement(
bo,
{ key: c },
o.createElement(
So,
{ onClick: (u) => i(u, a, l), "data-active": !!s },
o.createElement(
vo,
null,
o.createElement("strong", null, f),
o.createElement(Eo, null, l.id),
),
l.impact &&
o.createElement(
le,
{ status: a === W.PASS ? "neutral" : ho[l.impact] },
yo[l.impact],
),
o.createElement(Io, null, l.nodes.length),
o.createElement(
ie,
{
onClick: (u) => i(u, a, l),
"aria-label": `${s ? "Collapse" : "Expand"} details for ${f}`,
"aria-expanded": !!s,
"aria-controls": d,
},
o.createElement(go, {
style: { transform: `rotate(${s ? -180 : 0}deg)` },
}),
),
),
s
? o.createElement(po, {
id: d,
item: l,
type: a,
selection: s,
handleSelectionChange: n,
})
: o.createElement("div", { id: d }),
);
})
: o.createElement(Ce, { title: t }),
),
Je = function (e, t) {
return (
(Je =
Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array &&
function (a, n) {
a.__proto__ = n;
}) ||
function (a, n) {
for (var r in n)
Object.prototype.hasOwnProperty.call(n, r) && (a[r] = n[r]);
}),
Je(e, t)
);
};
function xo(e, t) {
if (typeof t != "function" && t !== null)
throw new TypeError(
"Class extends value " + String(t) + " is not a constructor or null",
);
Je(e, t);
function a() {
this.constructor = e;
}
e.prototype =
t === null ? Object.create(t) : ((a.prototype = t.prototype), new a());
}
var et = function () {
return (
(et =
Object.assign ||
function (e) {
for (var t, a = 1, n = arguments.length; a < n; a++) {
t = arguments[a];
for (var r in t)
Object.prototype.hasOwnProperty.call(t, r) && (e[r] = t[r]);
}
return e;
}),
et.apply(this, arguments)
);
};
function Ro(e, t) {
var a = {};
for (var n in e)
Object.prototype.hasOwnProperty.call(e, n) &&
t.indexOf(n) < 0 &&
(a[n] = e[n]);
if (e != null && typeof Object.getOwnPropertySymbols == "function")
for (var r = 0, n = Object.getOwnPropertySymbols(e); r < n.length; r++)
t.indexOf(n[r]) < 0 &&
Object.prototype.propertyIsEnumerable.call(e, n[r]) &&
(a[n[r]] = e[n[r]]);
return a;
}
var Te =
typeof globalThis < "u"
? globalThis
: typeof window < "u" || typeof window < "u"
? window
: typeof self < "u"
? self
: {};
function Ao(e) {
var t = typeof e;
return e != null && (t == "object" || t == "function");
}
var lt = Ao,
$o = typeof Te == "object" && Te && Te.Object === Object && Te,
To = $o,
_o = To,
Co = typeof self == "object" && self && self.Object === Object && self,
Oo = _o || Co || Function("return this")(),
vn = Oo,
wo = vn,
ko = function () {
return wo.Date.now();
},
No = ko,
Po = /\s/;
function Do(e) {
for (var t = e.length; t-- && Po.test(e.charAt(t)); );
return t;
}
var Mo = Do,
Lo = Mo,
Fo = /^\s+/;
function Ho(e) {
return e && e.slice(0, Lo(e) + 1).replace(Fo, "");
}
var Uo = Ho,
Go = vn,
Bo = Go.Symbol,
En = Bo,
jt = En,
In = Object.prototype,
zo = In.hasOwnProperty,
Wo = In.toString,
he = jt ? jt.toStringTag : void 0;
function jo(e) {
var t = zo.call(e, he),
a = e[he];
try {
e[he] = void 0;
var n = !0;
} catch {}
var r = Wo.call(e);
return (n && (t ? (e[he] = a) : delete e[he]), r);
}
var Yo = jo,
Vo = Object.prototype,
qo = Vo.toString;
function Ko(e) {
return qo.call(e);
}
var Qo = Ko,
Yt = En,
Xo = Yo,
Zo = Qo,
Jo = "[object Null]",
el = "[object Undefined]",
Vt = Yt ? Yt.toStringTag : void 0;
function tl(e) {
return e == null
? e === void 0
? el
: Jo
: Vt && Vt in Object(e)
? Xo(e)
: Zo(e);
}
var nl = tl;
function al(e) {
return e != null && typeof e == "object";
}
var rl = al,
ol = nl,
ll = rl,
il = "[object Symbol]";
function cl(e) {
return typeof e == "symbol" || (ll(e) && ol(e) == il);
}
var sl = cl,
ul = Uo,
qt = lt,
dl = sl,
Kt = NaN,
ml = /^[-+]0x[0-9a-f]+$/i,
fl = /^0b[01]+$/i,
pl = /^0o[0-7]+$/i,
hl = parseInt;
function yl(e) {
if (typeof e == "number") return e;
if (dl(e)) return Kt;
if (qt(e)) {
var t = typeof e.valueOf == "function" ? e.valueOf() : e;
e = qt(t) ? t + "" : t;
}
if (typeof e != "string") return e === 0 ? e : +e;
e = ul(e);
var a = fl.test(e);
return a || pl.test(e) ? hl(e.slice(2), a ? 2 : 8) : ml.test(e) ? Kt : +e;
}
var bl = yl,
gl = lt,
ze = No,
Qt = bl,
Sl = "Expected a function",
vl = Math.max,
El = Math.min;
function Il(e, t, a) {
var n,
r,
i,
l,
c,
d,
s = 0,
f = !1,
u = !1,
p = !0;
if (typeof e != "function") throw new TypeError(Sl);
((t = Qt(t) || 0),
gl(a) &&
((f = !!a.leading),
(u = "maxWait" in a),
(i = u ? vl(Qt(a.maxWait) || 0, t) : i),
(p = "trailing" in a ? !!a.trailing : p)));
function b($) {
var x = n,
F = r;
return ((n = r = void 0), (s = $), (l = e.apply(F, x)), l);
}
function h($) {
return ((s = $), (c = setTimeout(g, t)), f ? b($) : l);
}
function I($) {
var x = $ - d,
F = $ - s,
q = t - x;
return u ? El(q, i - F) : q;
}
function v($) {
var x = $ - d,
F = $ - s;
return d === void 0 || x >= t || x < 0 || (u && F >= i);
}
function g() {
var $ = ze();
if (v($)) return A($);
c = setTimeout(g, I($));
}
function A($) {
return ((c = void 0), p && n ? b($) : ((n = r = void 0), l));
}
function Y() {
(c !== void 0 && clearTimeout(c), (s = 0), (n = d = r = c = void 0));
}
function C() {
return c === void 0 ? l : A(ze());
}
function D() {
var $ = ze(),
x = v($);
if (((n = arguments), (r = this), (d = $), x)) {
if (c === void 0) return h(d);
if (u) return (clearTimeout(c), (c = setTimeout(g, t)), b(d));
}
return (c === void 0 && (c = setTimeout(g, t)), l);
}
return ((D.cancel = Y), (D.flush = C), D);
}
var xn = Il,
xl = xn,
Rl = lt,
Al = "Expected a function";
function $l(e, t, a) {
var n = !0,
r = !0;
if (typeof e != "function") throw new TypeError(Al);
return (
Rl(a) &&
((n = "leading" in a ? !!a.leading : n),
(r = "trailing" in a ? !!a.trailing : r)),
xl(e, t, { leading: n, maxWait: t, trailing: r })
);
}
var Tl = $l,
Rn = function (e, t, a, n) {
switch (t) {
case "debounce":
return xn(e, a, n);
case "throttle":
return Tl(e, a, n);
default:
return e;
}
},
tt = function (e) {
return typeof e == "function";
},
oe = function () {
return typeof window > "u";
},
Xt = function (e) {
return e instanceof Element || e instanceof HTMLDocument;
},
An = function (e, t, a, n) {
return function (r) {
var i = r.width,
l = r.height;
t(function (c) {
return (c.width === i && c.height === l) ||
(c.width === i && !n) ||
(c.height === l && !a)
? c
: (e && tt(e) && e(i, l), { width: i, height: l });
});
};
};
(function (e) {
xo(t, e);
function t(a) {
var n = e.call(this, a) || this;
((n.cancelHandler = function () {
n.resizeHandler &&
n.resizeHandler.cancel &&
(n.resizeHandler.cancel(), (n.resizeHandler = null));
}),
(n.attachObserver = function () {
var s = n.props,
f = s.targetRef,
u = s.observerOptions;
if (!oe()) {
f && f.current && (n.targetRef.current = f.current);
var p = n.getElement();
p &&
((n.observableElement && n.observableElement === p) ||
((n.observableElement = p), n.resizeObserver.observe(p, u)));
}
}),
(n.getElement = function () {
var s = n.props,
f = s.querySelector,
u = s.targetDomEl;
if (oe()) return null;
if (f) return document.querySelector(f);
if (u && Xt(u)) return u;
if (n.targetRef && Xt(n.targetRef.current))
return n.targetRef.current;
var p = Mt(n);
if (!p) return null;
var b = n.getRenderType();
switch (b) {
case "renderProp":
return p;
case "childFunction":
return p;
case "child":
return p;
case "childArray":
return p;
default:
return p.parentElement;
}
}),
(n.createResizeHandler = function (s) {
var f = n.props,
u = f.handleWidth,
p = u === void 0 ? !0 : u,
b = f.handleHeight,
h = b === void 0 ? !0 : b,
I = f.onResize;
if (!(!p && !h)) {
var v = An(I, n.setState.bind(n), p, h);
s.forEach(function (g) {
var A = (g && g.contentRect) || {},
Y = A.width,
C = A.height,
D = !n.skipOnMount && !oe();
(D && v({ width: Y, height: C }), (n.skipOnMount = !1));
});
}
}),
(n.getRenderType = function () {
var s = n.props,
f = s.render,
u = s.children;
return tt(f)
? "renderProp"
: tt(u)
? "childFunction"
: U(u)
? "child"
: Array.isArray(u)
? "childArray"
: "parent";
}));
var r = a.skipOnMount,
i = a.refreshMode,
l = a.refreshRate,
c = l === void 0 ? 1e3 : l,
d = a.refreshOptions;
return (
(n.state = { width: void 0, height: void 0 }),
(n.skipOnMount = r),
(n.targetRef = st()),
(n.observableElement = null),
oe() ||
((n.resizeHandler = Rn(n.createResizeHandler, i, c, d)),
(n.resizeObserver = new window.ResizeObserver(n.resizeHandler))),
n
);
}
return (
(t.prototype.componentDidMount = function () {
this.attachObserver();
}),
(t.prototype.componentDidUpdate = function () {
this.attachObserver();
}),
(t.prototype.componentWillUnmount = function () {
oe() ||
((this.observableElement = null),
this.resizeObserver.disconnect(),
this.cancelHandler());
}),
(t.prototype.render = function () {
var a = this.props,
n = a.render,
r = a.children,
i = a.nodeType,
l = i === void 0 ? "div" : i,
c = this.state,
d = c.width,
s = c.height,
f = { width: d, height: s, targetRef: this.targetRef },
u = this.getRenderType(),
p;
switch (u) {
case "renderProp":
return n && n(f);
case "childFunction":
return ((p = r), p(f));
case "child":
if (((p = r), p.type && typeof p.type == "string")) {
f.targetRef;
var b = Ro(f, ["targetRef"]);
return V(p, b);
}
return V(p, f);
case "childArray":
return (
(p = r),
p.map(function (h) {
return !!h && V(h, f);
})
);
default:
return m(l, null);
}
}),
t
);
})(ct);
var _l = oe() ? G : Ee;
function Cl(e) {
e === void 0 && (e = {});
var t = e.skipOnMount,
a = t === void 0 ? !1 : t,
n = e.refreshMode,
r = e.refreshRate,
i = r === void 0 ? 1e3 : r,
l = e.refreshOptions,
c = e.handleWidth,
d = c === void 0 ? !0 : c,
s = e.handleHeight,
f = s === void 0 ? !0 : s,
u = e.targetRef,
p = e.observerOptions,
b = e.onResize,
h = z(a),
I = z(null),
v = u ?? I,
g = z(),
A = H({ width: void 0, height: void 0 }),
Y = A[0],
C = A[1];
return (
_l(
function () {
if (!oe()) {
var D = An(b, C, d, f),
$ = function (F) {
(!d && !f) ||
F.forEach(function (q) {
var te = (q && q.contentRect) || {},
ne = te.width,
ae = te.height,
se = !h.current && !oe();
(se && D({ width: ne, height: ae }), (h.current = !1));
});
};
g.current = Rn($, n, i, l);
var x = new window.ResizeObserver(g.current);
return (
v.current && x.observe(v.current, p),
function () {
x.disconnect();
var F = g.current;
F && F.cancel && F.cancel();
}
);
}
},
[n, i, l, d, f, b, p, v.current],
),
et({ ref: v }, Y)
);
}
var Ol = E.div({ width: "100%", position: "relative", minHeight: "100%" }),
wl = E.button(
({ theme: e }) => ({
textDecoration: "none",
padding: "10px 15px",
cursor: "pointer",
color: e.textMutedColor,
fontWeight: e.typography.weight.bold,
fontSize: e.typography.size.s2 - 1,
lineHeight: 1,
height: 40,
border: "none",
borderBottom: "3px solid transparent",
background: "transparent",
"&:focus": { outline: "0 none", borderColor: e.color.secondary },
}),
({ active: e, theme: t }) =>
e
? {
opacity: 1,
color: t.color.secondary,
borderColor: t.color.secondary,
}
: {},
),
kl = E.div(({ theme: e }) => ({
boxShadow: `${e.appBorderColor} 0 -1px 0 0 inset`,
background: e.background.app,
position: "sticky",
top: 0,
zIndex: 1,
display: "flex",
alignItems: "center",
whiteSpace: "nowrap",
overflow: "auto",
paddingRight: 10,
gap: 6,
scrollbarColor: `${e.barTextColor} ${e.background.app}`,
scrollbarWidth: "thin",
})),
Nl = E.div({}),
Pl = E.div({
display: "flex",
flexBasis: "100%",
justifyContent: "flex-end",
containerType: "inline-size",
minWidth: 96,
gap: 6,
}),
Dl = E(ie)({
"@container (max-width: 193px)": { span: { display: "none" } },
}),
Ml = ({ tabs: e }) => {
let { ref: t } = Cl({
refreshMode: "debounce",
handleHeight: !1,
handleWidth: !0,
}),
{
tab: a,
setTab: n,
toggleHighlight: r,
highlighted: i,
handleManual: l,
allExpanded: c,
handleCollapseAll: d,
handleExpandAll: s,
} = nt(),
f = R(
(u) => {
n(u.currentTarget.getAttribute("data-type"));
},
[n],
);
return m(
Ol,
{ ref: t },
m(
kl,
null,
m(
Nl,
{ role: "tablist" },
e.map((u, p) =>
m(
wl,
{
role: "tab",
key: p,
"data-type": u.type,
"data-active": a === u.type,
"aria-selected": a === u.type,
active: a === u.type,
onClick: f,
},
u.label,
),
),
),
m(
Pl,
null,
m(
de,
{
as: "div",
hasChrome: !1,
placement: "top",
tooltip: m(pe, {
note: "Highlight elements with accessibility violations",
}),
trigger: "hover",
},
m(
Dl,
{ onClick: r, active: i },
i ? m(At, null) : m($t, null),
m("span", null, i ? "Hide highlights" : "Show highlights"),
),
),
m(
de,
{
as: "div",
hasChrome: !1,
placement: "top",
tooltip: m(pe, { note: c ? "Collapse all" : "Expand all" }),
trigger: "hover",
},
m(
ie,
{
onClick: c ? d : s,
"aria-label": c ? "Collapse all" : "Expand all",
},
c ? m(It, null) : m(Rt, null),
),
),
m(
de,
{
as: "div",
hasChrome: !1,
placement: "top",
tooltip: m(pe, { note: "Rerun the accessibility scan" }),
trigger: "hover",
},
m(
ie,
{ onClick: l, "aria-label": "Rerun accessibility scan" },
m(Me, null),
),
),
),
),
m(
Oe,
{ vertical: !0, horizontal: !0 },
e.find((u) => u.type === a)?.panel,
),
);
},
Ll = E.div(({ theme: { color: e, typography: t, background: a } }) => ({
textAlign: "start",
padding: "11px 15px",
fontSize: `${t.size.s2}px`,
fontWeight: t.weight.regular,
lineHeight: "1rem",
background: a.app,
borderBottom: `1px solid ${e.border}`,
color: e.defaultText,
backgroundClip: "padding-box",
position: "relative",
code: {
fontSize: `${t.size.s1 - 1}px`,
color: "inherit",
margin: "0 0.2em",
padding: "0 0.2em",
background: "rgba(255, 255, 255, 0.8)",
borderRadius: "2px",
boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.1)",
},
})),
Fl = ({ discrepancy: e }) => {
let t = Re().getDocsUrl({ subpath: Za, versioned: !0, renderer: !0 }),
a = j(() => {
switch (e) {
case "browserPassedCliFailed":
return "Accessibility checks passed in this browser but failed in the CLI.";
case "cliPassedBrowserFailed":
return "Accessibility checks passed in the CLI but failed in this browser.";
case "cliFailedButModeManual":
return "Accessibility checks failed in the CLI. Run the tests manually to see the results.";
default:
return null;
}
}, [e]);
return a
? o.createElement(
Ll,
null,
a,
" ",
o.createElement(
Ie,
{ href: t, target: "_blank", withArrow: !0 },
"Learn what could cause this",
),
)
: null;
},
Zt = E(Me)(({ theme: e }) => ({
animation: `${e.animation.rotate360} 1s linear infinite;`,
margin: 4,
})),
We = E.div({ display: "flex", alignItems: "center", gap: 6 }),
Jt = E.span(({ theme: e }) => ({
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
textAlign: "center",
fontSize: e.typography.size.s2,
height: "100%",
gap: 24,
div: {
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: 8,
},
p: { margin: 0, color: e.textMutedColor },
code: {
display: "inline-block",
fontSize: e.typography.size.s2 - 1,
backgroundColor: e.background.app,
border: `1px solid ${e.color.border}`,
borderRadius: 4,
padding: "2px 3px",
},
})),
Hl = () => {
let {
parameters: e,
tab: t,
results: a,
status: n,
handleManual: r,
error: i,
discrepancy: l,
handleSelectionChange: c,
selectedItems: d,
toggleOpen: s,
} = nt(),
f = j(() => {
let {
passes: u,
incomplete: p,
violations: b,
} = a ?? { passes: [], incomplete: [], violations: [] };
return [
{
label: o.createElement(
We,
null,
"Violations",
o.createElement(
le,
{
compact: !0,
status: t === "violations" ? "active" : "neutral",
},
b.length,
),
),
panel: o.createElement(Be, {
items: b,
type: W.VIOLATION,
empty: "No accessibility violations found.",
handleSelectionChange: c,
selectedItems: d,
toggleOpen: s,
}),
items: b,
type: W.VIOLATION,
},
{
label: o.createElement(
We,
null,
"Passes",
o.createElement(
le,
{
compact: !0,
status: t === "passes" ? "active" : "neutral",
},
u.length,
),
),
panel: o.createElement(Be, {
items: u,
type: W.PASS,
empty: "No passing accessibility checks found.",
handleSelectionChange: c,
selectedItems: d,
toggleOpen: s,
}),
items: u,
type: W.PASS,
},
{
label: o.createElement(
We,
null,
"Inconclusive",
o.createElement(
le,
{
compact: !0,
status: t === "incomplete" ? "active" : "neutral",
},
p.length,
),
),
panel: o.createElement(Be, {
items: p,
type: W.INCOMPLETION,
empty: "No inconclusive accessibility checks found.",
handleSelectionChange: c,
selectedItems: d,
toggleOpen: s,
}),
items: p,
type: W.INCOMPLETION,
},
];
}, [t, a, c, d, s]);
return e.disable || e.test === "off"
? o.createElement(
Jt,
null,
o.createElement(
"div",
null,
o.createElement(
"strong",
null,
"Accessibility tests are disabled for this story",
),
o.createElement(
"p",
null,
"Update",
" ",
o.createElement(
"code",
null,
e.disable
? "parameters.a11y.disable"
: "parameters.a11y.test",
),
" ",
"to enable accessibility tests.",
),
),
)
: o.createElement(
o.Fragment,
null,
l && o.createElement(Fl, { discrepancy: l }),
n === "ready" || n === "ran"
? o.createElement(Ml, { key: "tabs", tabs: f })
: o.createElement(
Jt,
{ style: { marginTop: l ? "1em" : 0 } },
n === "initial" &&
o.createElement(
"div",
null,
o.createElement(Zt, { size: 12 }),
o.createElement(
"strong",
null,
"Preparing accessibility scan",
),
o.createElement(
"p",
null,
"Please wait while the addon is initializing...",
),
),
n === "manual" &&
o.createElement(
o.Fragment,
null,
o.createElement(
"div",
null,
o.createElement(
"strong",
null,
"Accessibility tests run manually for this story",
),
o.createElement(
"p",
null,
"Results will not show when using the testing module. You can still run accessibility tests manually.",
),
),
o.createElement(
re,
{ size: "medium", onClick: r },
"Run accessibility scan",
),
o.createElement(
"p",
null,
"Update ",
o.createElement("code", null, "globals.a11y.manual"),
" to disable manual mode.",
),
),
n === "running" &&
o.createElement(
"div",
null,
o.createElement(Zt, { size: 12 }),
o.createElement(
"strong",
null,
"Accessibility scan in progress",
),
o.createElement(
"p",
null,
"Please wait while the accessibility scan is running...",
),
),
n === "error" &&
o.createElement(
o.Fragment,
null,
o.createElement(
"div",
null,
o.createElement(
"strong",
null,
"The accessibility scan encountered an error",
),
o.createElement(
"p",
null,
typeof i == "string"
? i
: i instanceof Error
? i.toString()
: JSON.stringify(i, null, 2),
),
),
o.createElement(
re,
{ size: "medium", onClick: r },
"Rerun accessibility scan",
),
),
n === "component-test-error" &&
o.createElement(
o.Fragment,
null,
o.createElement(
"div",
null,
o.createElement(
"strong",
null,
"This story's component tests failed",
),
o.createElement(
"p",
null,
"Automated accessibility tests will not run until this is resolved. You can still test manually.",
),
),
o.createElement(
re,
{ size: "medium", onClick: r },
"Run accessibility scan",
),
),
),
);
},
Ul = (e) =>
m(
"svg",
{ ...e },
m(
"defs",
null,
m(
"filter",
{ id: "protanopia" },
m("feColorMatrix", {
in: "SourceGraphic",
type: "matrix",
values:
"0.567, 0.433, 0, 0, 0 0.558, 0.442, 0, 0, 0 0, 0.242, 0.758, 0, 0 0, 0, 0, 1, 0",
}),
),
m(
"filter",
{ id: "protanomaly" },
m("feColorMatrix", {
in: "SourceGraphic",
type: "matrix",
values:
"0.817, 0.183, 0, 0, 0 0.333, 0.667, 0, 0, 0 0, 0.125, 0.875, 0, 0 0, 0, 0, 1, 0",
}),
),
m(
"filter",
{ id: "deuteranopia" },
m("feColorMatrix", {
in: "SourceGraphic",
type: "matrix",
values:
"0.625, 0.375, 0, 0, 0 0.7, 0.3, 0, 0, 0 0, 0.3, 0.7, 0, 0 0, 0, 0, 1, 0",
}),
),
m(
"filter",
{ id: "deuteranomaly" },
m("feColorMatrix", {
in: "SourceGraphic",
type: "matrix",
values:
"0.8, 0.2, 0, 0, 0 0.258, 0.742, 0, 0, 0 0, 0.142, 0.858, 0, 0 0, 0, 0, 1, 0",
}),
),
m(
"filter",
{ id: "tritanopia" },
m("feColorMatrix", {
in: "SourceGraphic",
type: "matrix",
values:
"0.95, 0.05, 0, 0, 0 0, 0.433, 0.567, 0, 0 0, 0.475, 0.525, 0, 0 0, 0, 0, 1, 0",
}),
),
m(
"filter",
{ id: "tritanomaly" },
m("feColorMatrix", {
in: "SourceGraphic",
type: "matrix",
values:
"0.967, 0.033, 0, 0, 0 0, 0.733, 0.267, 0, 0 0, 0.183, 0.817, 0, 0 0, 0, 0, 1, 0",
}),
),
m(
"filter",
{ id: "achromatopsia" },
m("feColorMatrix", {
in: "SourceGraphic",
type: "matrix",
values:
"0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0, 0, 0, 1, 0",
}),
),
),
),
Gl = "storybook-preview-iframe",
Bl = [
{ name: "blurred vision", percentage: 22.9 },
{ name: "deuteranomaly", percentage: 2.7 },
{ name: "deuteranopia", percentage: 0.56 },
{ name: "protanomaly", percentage: 0.66 },
{ name: "protanopia", percentage: 0.59 },
{ name: "tritanomaly", percentage: 0.01 },
{ name: "tritanopia", percentage: 0.016 },
{ name: "achromatopsia", percentage: 1e-4 },
{ name: "grayscale" },
],
$n = (e) =>
e
? e === "blurred vision"
? "blur(2px)"
: e === "grayscale"
? "grayscale(100%)"
: `url('#${e}')`
: "none",
zl = E.div({ "&, & svg": { position: "absolute", width: 0, height: 0 } }),
Wl = E.span(
{
background:
"linear-gradient(to right, #F44336, #FF9800, #FFEB3B, #8BC34A, #2196F3, #9C27B0)",
borderRadius: "1rem",
display: "block",
height: "1rem",
width: "1rem",
},
({ filter: e }) => ({ filter: $n(e) }),
({ theme: e }) => ({
boxShadow: `${e.appBorderColor} 0 0 0 1px inset`,
}),
),
jl = E.span({ display: "flex", flexDirection: "column" }),
Yl = E.span({ textTransform: "capitalize" }),
Vl = E.span(({ theme: e }) => ({
fontSize: 11,
color: e.textMutedColor,
})),
ql = (e, t) => [
...(e !== null
? [
{
id: "reset",
title: "Reset color filter",
onClick: () => {
t(null);
},
right: void 0,
active: !1,
},
]
: []),
...Bl.map((a) => {
let n =
a.percentage !== void 0 ? `${a.percentage}% of users` : void 0;
return {
id: a.name,
title: o.createElement(
jl,
null,
o.createElement(Yl, null, a.name),
n && o.createElement(Vl, null, n),
),
onClick: () => {
t(a);
},
right: o.createElement(Wl, { filter: a.name }),
active: e === a,
};
}),
],
Kl = () => {
let [e, t] = H(null);
return o.createElement(
o.Fragment,
null,
e &&
o.createElement(_t, {
styles: { [`#${Gl}`]: { filter: $n(e.name) } },
}),
o.createElement(
de,
{
placement: "top",
tooltip: ({ onHide: a }) => {
let n = ql(e, (r) => {
(t(r), a());
});
return o.createElement(ke, { links: n });
},
closeOnOutsideClick: !0,
onDoubleClick: () => t(null),
},
o.createElement(
ie,
{ key: "filter", active: !!e, title: "Vision simulator" },
o.createElement(St, null),
),
),
o.createElement(zl, null, o.createElement(Ul, null)),
);
},
Ql = () => {
let e = Re().getSelectedPanel(),
[t] = De(B),
a = t?.violations?.length || 0,
n = t?.incomplete?.length || 0,
r = a + n;
return o.createElement(
"div",
{ style: { display: "flex", alignItems: "center", gap: 6 } },
o.createElement("span", null, "Accessibility"),
r === 0
? null
: o.createElement(
le,
{ compact: !0, status: e === Ve ? "active" : "neutral" },
r,
),
);
};
xe.register(B, (e) => {
(xe.add(Ve, {
title: "",
type: Pe.TOOL,
match: ({ viewMode: t, tabId: a }) => t === "story" && !a,
render: () => o.createElement(Kl, null),
}),
xe.add(Ve, {
title: Ql,
type: Pe.PANEL,
render: ({ active: t = !0 }) =>
o.createElement(tr, null, t ? o.createElement(Hl, null) : null),
paramKey: Wa,
}));
});
})();
} catch (e) {
console.error(
"[Storybook] One of your manager-entries failed: " + import.meta.url,
e,
);
}
|