/
focus-ring.js
25 lines (21 loc) · 1.22 KB
/
focus-ring.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { expect, test } from 'vitest';
import { setup } from "./_helpers.js";
setup();
test("focus ring", async (t) => {
const classes = [
"focusable",
"peer-focus:focusable",
"group-focus:focusable",
"focus-within:focusable",
"focusable-inset",
];
const { css } = await t.uno.generate(classes);
expect(css).toMatchInlineSnapshot(`
"/* layer: default */
.focus-within\\\\:focusable:focus-within{outline:2px solid var(--w-color-focused);outline-offset:var(--w-outline-offset, 1px);}
.focusable:focus,.focusable:focus-visible{outline:2px solid var(--w-color-focused);outline-offset:var(--w-outline-offset, 1px);}.focusable:not(:focus-visible){outline:none;}
.group:focus .group-focus\\\\:focusable,.group:focus-visible .group-focus\\\\:focusable{outline:2px solid var(--w-color-focused);outline-offset:var(--w-outline-offset, 1px);}.group:not(:focus-visible) .group-focus\\\\:focusable{outline:none;}
.peer:focus~.peer-focus\\\\:focusable,.peer:focus-visible~.peer-focus\\\\:focusable{outline:2px solid var(--w-color-focused);outline-offset:var(--w-outline-offset, 1px);}.peer:not(:focus-visible)~.peer-focus\\\\:focusable{outline:none;}
.focusable-inset{--w-outline-offset:-3px;}"
`);
});