vielle.dev
this repo has no description
use popover
i havent tested this outside of firefox its prolly fine tho lmfao
+23
-18
src/components/astral/Powers.astro
+23
-18
src/components/astral/Powers.astro
···
38
38
type powerId,
39
39
powers,
40
40
} from "../../consts/astral";
41
-
import Powers, { type powerObj } from "../../lib/powers";
41
+
import Powers, { type powerObject } from "../../lib/powers";
42
42
43
43
class HTMLPowerElement extends HTMLElement {
44
44
#internals = this.attachInternals();
···
51
51
Powers.subscribe(this.handleState.bind(this));
52
52
}
53
53
54
-
handleState(value: Readonly<powerObj>) {
54
+
handleState(value: Readonly<powerObject>) {
55
55
let button: Element | null | undefined =
56
-
this.shadowRoot?.querySelector("dialog button");
56
+
this.shadowRoot?.querySelector("#info button");
57
57
if (!(button instanceof HTMLButtonElement)) button = undefined;
58
58
59
59
this.#internals.states.clear();
···
104
104
}
105
105
106
106
connectedCallback() {
107
-
const button = this.shadowRoot?.querySelector("dialog button");
107
+
const button = this.shadowRoot?.querySelector("#info button");
108
108
if (!(button instanceof HTMLButtonElement))
109
-
throw "`dialog button` could not be selected";
109
+
throw "`#info button` could not be selected";
110
110
111
111
button.addEventListener("click", () => {
112
112
if (
···
166
166
disabled={immutable}
167
167
>
168
168
<template shadowrootmode="open">
169
-
<button commandfor="info" command="show-modal">
169
+
<button commandfor="info" command="toggle-popover">
170
170
<slot is:inline name="img" />
171
171
</button>
172
172
173
-
<dialog id="info" closedby="any">
173
+
<section id="info" popover>
174
174
<h2><slot is:inline name="title" /></h2>
175
175
<button
176
176
id="mode"
···
191
191
<span data-val="dependency">Dependency</span>
192
192
</button>
193
193
<slot is:inline name="body" />
194
-
</dialog>
194
+
</section>
195
195
196
196
<section>
197
197
<slot is:inline />
···
232
232
}
233
233
234
234
/* dialog popup styles */
235
-
dialog {
235
+
#info {
236
236
width: min(60ch, calc(100vw - 10ch));
237
-
margin: auto;
237
+
/* position-anchor: --tree-node; */
238
+
position-area: bottom span-right;
239
+
position-try:
240
+
bottom span-left,
241
+
top span-right,
242
+
top span-left;
238
243
239
244
background-color: color-mix(
240
245
in oklab,
···
244
249
border: var(--outline-size) solid var(--outline);
245
250
border-radius: 10px;
246
251
247
-
&:open {
252
+
&:popover-open {
248
253
display: grid;
249
254
}
250
255
grid-template: auto auto auto / 1fr auto;
···
280
285
}
281
286
}
282
287
283
-
:host(:state(selected)) dialog button [data-val="unselect"] {
288
+
:host(:state(selected)) #info button [data-val="unselect"] {
284
289
opacity: 1;
285
290
}
286
-
:host(:state(locked)) dialog button [data-val="locked"] {
291
+
:host(:state(locked)) #info button [data-val="locked"] {
287
292
opacity: 1;
288
293
}
289
-
:host(:state(avaliable)) dialog button [data-val="select"] {
294
+
:host(:state(avaliable)) #info button [data-val="select"] {
290
295
opacity: 1;
291
296
}
292
-
:host(:state(no-parent)) dialog button [data-val="no-parent"] {
297
+
:host(:state(no-parent)) #info button [data-val="no-parent"] {
293
298
opacity: 1;
294
299
}
295
-
:host(:state(no-points)) dialog button [data-val="no-points"] {
300
+
:host(:state(no-points)) #info button [data-val="no-points"] {
296
301
opacity: 1;
297
302
}
298
-
:host(:state(dependency)) dialog button {
303
+
:host(:state(dependency)) #info button {
299
304
[data-val="unselect"] {
300
305
opacity: 0;
301
306
}
···
387
392
}
388
393
}
389
394
390
-
section {
395
+
section:not([popover]) {
391
396
container-type: size;
392
397
display: flex;
393
398
flex-direction: row;