Changes
9 changed files (+39/-33)
-
-
@@ -36,12 +36,12 @@ cursor: not-allowed;text-decoration: line-through; } :host(:is(:state(pending), :--pending, [x--_pending])) { :host(:is(:state(pending), [x--_pending])) { color: transparent; } @media (hover: hover) { :host(:not(:is(:disabled, [aria-disabled="true"], :state(pending), :--pending, [x--_pending])):hover) { :host(:not(:is(:disabled, [aria-disabled="true"], :state(pending), [x--_pending])):hover) { border-color: oklch(var(--color-border) / var(--alpha-border-strong)); } }
-
@@ -53,7 +53,7 @@ oklch(var(--color-focus) / var(--alpha-focus-ring));outline: none; } :host(:enabled:not(:is([aria-disabled="true"], :state(pending), :--pending, [x--_pending])):is(:active, :state(pressed), :--pressed, [x--_pressed])) { :host(:enabled:not(:is([aria-disabled="true"], :state(pending), [x--_pending])):is(:active, :state(pressed), [x--_pressed])) { background-image: linear-gradient( to left top, oklch(100% 0% 0deg / 30%),
-
@@ -76,7 +76,7 @@ border-radius: inherit;text-align: center; } :host(:not(:is(:disabled, [aria-disabled="true"], :state(pending), :--pending, [x--_pending])):is(:active, :state(pressed), :--pressed, [x--_pressed])) :host(:not(:is(:disabled, [aria-disabled="true"], :state(pending), [x--_pending])):is(:active, :state(pressed), [x--_pressed])) .inner { transform: translateY(1px); filter: brightness(0.99);
-
@@ -108,7 +108,7 @@ transform: rotate(360deg);} } :host(:is(:state(pending), :--pending, [x--_pending])) .spinner { :host(:is(:state(pending), [x--_pending])) .spinner { display: block; animation: 1.3s 0s forwards infinite ease-in-out spin; }
-
-
-
@@ -76,7 +76,9 @@this.internals.role = "button"; } connectedCallback() { override connectedCallback() { super.connectedCallback(); // NOTE: 現状属性に影響を与えずに `tabIndex` を変える方法がない。 // 属性を変える操作は DOM に接続してから行わないと DOM のエラー // となるためここで行う必要がある。
-
-
-
@@ -37,5 +37,9 @@ actions.name = "action";actions.classList.add("actions"); body.appendChild(actions); } override connectedCallback(): void { super.connectedCallback(); } }, });
-
-
-
@@ -22,7 +22,7 @@/** * CustomElement を使いやすい I/F にラップする。 * 渡された CustomElement は自動的に `nonUAMixin` が適用され、 * `:is(:state(nonua), :--nonua, [nonua])` でクエリできるようになる。 * `:is(:state(nonua), [x--_nonua])` でクエリできるようになる。 */ export function wrapElement< TagName extends string,
-
@@ -64,13 +64,12 @@ ** 付与するマーカーは以下の通り: * * A) CustomStateSet の `nonua` ステート (Evergreen Browser) * B) CustomStateSet の `--nonua` ステート (Chromium v90 <= x < v125) * C) `x--_nonua` 属性 * B) `x--_nonua` 属性 * * 全てのマーカーに対応するには以下のようなセレクタが必要。 * * ```css * :is(:state(nonua), :--nonua, [nonua]) * :is(:state(nonua), [x--_nonua]) * ``` */ export class YamoriElement extends HTMLElement {
-
@@ -79,29 +78,20 @@setCustomState(name: string): void { const internals = this.internals; if (internals && internals.states) { // https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet#compatibility_with_dashed-ident_syntax try { internals.states.add(name); } catch { internals.states.add(`--${name}`); } } else { this.setAttribute(`--_${name}`, ""); try { internals.states.add(name); } catch { this.setAttribute(`x--_${name}`, ""); } } removeCustomState(name: string): void { const internals = this.internals; if (internals && internals.states) { try { internals.states.delete(name); } catch { internals.states.delete(`--${name}`); } } else { this.removeAttribute(`--_${name}`); try { internals.states.delete(name); } catch { this.removeAttribute(`x--_${name}`); } }
-
@@ -109,7 +99,9 @@ constructor() {super(); this.internals = this.attachInternals(); } connectedCallback() { this.setCustomState("nonua"); } }
-
-
-
@@ -6,7 +6,7 @@ *//* UA スタイルを全部消す */ :where(body, body :not(script, style, svg, svg *, :is([x--_nonua], :--nonua, :state(nonua)))) { :not(script, style, svg, svg *, :is([x--_nonua], :state(nonua)))) { all: unset; box-sizing: border-box; }
-
-
-
@@ -3,7 +3,7 @@ * SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com>* SPDX-License-Identifier: AGPL-3.0-only */ :not(:is(style, script, :state(nonua), :--nonua, [nonua])) { :not(:is(style, script, :state(nonua), [x--_nonua])) { all: unset; box-sizing: border-box; }
-
@@ -15,7 +15,7 @@ padding: var(--space-px-8) var(--space-px-5);padding-bottom: var(--space-px-9); } :host(:is(:state(nodata), :--nodata, [nodata])) { :host(:is(:state(nodata), [x--_nodata])) { display: none; }
-
-
-
@@ -46,6 +46,10 @@ this.#endMarker = document.createComment("");this.#shadow.appendChild(this.#endMarker); this.internals.role = "listitem"; } override connectedCallback(): void { super.connectedCallback(); this.#render(); }
-
-
-
@@ -3,7 +3,7 @@ * SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com>* SPDX-License-Identifier: AGPL-3.0-only */ :not(:is(style, script, :state(nonua), :--nonua, [nonua])) { :not(:is(style, script, :state(nonua), [x--_nonua])) { all: unset; box-sizing: border-box; }
-
-
-
@@ -77,6 +77,12 @@ return null;} } override connectedCallback(): void { super.connectedCallback(); this.#render(); } constructor() { super();
-
@@ -93,8 +99,6 @@ this.#shadow.appendChild(this.#startMarker);this.#endMarker = document.createComment(""); this.#shadow.appendChild(this.#endMarker); this.#render(); } setListResponse(listResponse: ListResponse): void {
-