vintage-frames 0.2.1 → 0.4.0

package/dist/components/vf-desktop.d.ts

@@ -17,6 +17,20 @@ declare const VfDesktop_base: (new (...args: any[]) => import("../position.js").
  * deactivates the active document window nor greys the palette, exactly as
  * System 7's floating windoids behaved while their application was frontmost.
  *
+ * **Deactivation.** On a real System 7 machine clicking the desktop clicked
+ * the *Finder* — the frontmost application's windows lost their stripes.
+ * {@link clearActive} is that gesture's handler: it clears `active` from
+ * the whole document tier, and **zero active windows is a legal state**,
+ * held until a press or keyboard focus re-enters a document window (or a
+ * new one is slotted, which activates it — opening a window brings its
+ * application forward). The desktop never takes this decision itself: its
+ * furniture is slotted light DOM (an icon layer, say), so only the page
+ * knows which of its children — or which presses on the bare dither — mean
+ * "the Finder", and it routes those through `clearActive()`. Left alone,
+ * the classic always-one-active behavior is unchanged. {@link activeWindow}
+ * reads the current holder, and every change of holder — including to and
+ * from none — fires `vf-activate`.
+ *
  * The desktop is a raster with an explicit size, always: **`width` and
  * `height`**, in system px, the way a WIND resource declared a window's —
  * the host box renders at the declared screen plus `2 × bezel` per axis, a
@@ -41,6 +55,11 @@ declare const VfDesktop_base: (new (...args: any[]) => import("../position.js").
  *   cells (or with `none`).
  *
  * @slot - Default slot: menu bar, windows, anything.
+ * @fires vf-activate - The active document-tier window changed. Detail
+ *   `{ window: HTMLElement | null }` — the new holder, or `null` when the
+ *   document tier deactivated (a {@link clearActive} call, or the active
+ *   window leaving the DOM with none behind it). Fired once per change of
+ *   holder, never for a re-assertion of the same one.
  * @csspart desktop - The dithered screen surface — the whole-system-px
  *   raster (inset by `bezel` when one is set).
  * @cssprop [--vf-desktop=#808080] - base color under the desktop dither —
@@ -108,6 +127,20 @@ export declare class VfDesktop extends VfDesktop_base {
     private _pattern;
     /** Monotonic z-index counter for window stacking. */
     private _zCounter;
+    /**
+     * The active document-tier window, or null when the tier is deactivated
+     * (or empty). The single change-tracked truth behind {@link activeWindow}
+     * and the `vf-activate` event — written only by {@link _setActive}.
+     */
+    private _activeWindow;
+    /**
+     * Whether the document tier was *deliberately* deactivated (a
+     * {@link clearActive} call) — as opposed to `_activeWindow` being null
+     * because nothing has activated yet. Slot changes preserve a deliberate
+     * deactivation instead of promoting a survivor; a newly slotted document
+     * window still activates (opening a window brings its application forward).
+     */
+    private _deactivated;
     /** Whether a one-shot post-upgrade re-normalization is already pending. */
     private _awaitingUpgrade;
     /** Whether a pointer gesture that began on the desktop is still in flight. */
@@ -143,6 +176,18 @@ export declare class VfDesktop extends VfDesktop_base {
      * draggable in the same gesture that raises it.
      */
     bringToFront(win: HTMLElement): void;
+    /** The active document-tier window, or null while the tier is deactivated
+     *  (or has no windows). Utility windows are never the holder. */
+    get activeWindow(): HTMLElement | null;
+    /**
+     * Deactivate the whole document tier — clear `active` from every document
+     * window, leaving none the holder. Pages route "the user clicked the
+     * Finder" presses — on the bare dither, on their own desktop furniture
+     * (an icon layer) — through here; the deactivated state holds until a
+     * document window is pressed, focused, brought to front, or newly
+     * slotted.
+     */
+    clearActive(): void;
     /** The z/active half of a raise, shared by every path. */
     private _restack;
     /** Sync the DOM order now, or at gesture end if a pointer is down. */
@@ -199,9 +244,12 @@ export declare class VfDesktop extends VfDesktop_base {
      */
     private _normalizeAfterUpgrade;
     /** Set `active` on `win` only, clearing it on every other *document-tier*
-     *  window. Utility windows stand outside the invariant: a palette keeps
-     *  whatever `active` state it has (true by default, so its dither and
-     *  widgets stay drawn while document windows trade the highlight). */
+     *  window (`null` clears the whole tier — the deactivated state). Utility
+     *  windows stand outside the invariant: a palette keeps whatever `active`
+     *  state it has (true by default, so its dither and widgets stay drawn
+     *  while document windows trade the highlight). The one write site of
+     *  {@link _activeWindow}, so `vf-activate` fires exactly on a change of
+     *  holder — re-asserting the current holder is silent. */
     private _setActive;
     /**
      * Set a window's `active` state. Prefers the property (the source of truth

package/dist/components/vf-desktop.js

@@ -1,17 +1,18 @@
-import { vfElement as e } from "../define.js";
-import { ScaleController as t, effectiveScale as n, sysLength as r } from "../scale.js";
-import i from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
-import { VfPositioned as a } from "../position.js";
-import { vfBase as o } from "../styles/recipes/host.js";
-import { tileImage as s, tileRaster as c, tileRects as l, tileSpan as u, vfTileSize as d } from "../styles/recipes/tile.js";
-import { TileRasterCache as f, patternOverride as p, tileGrid as m, vfTileGrid as h } from "../tile-grid.js";
-import { GridSnapController as g } from "../grid-snap.js";
-import { DocumentListenersController as _ } from "../document-listeners.js";
-import { SCREEN_CORNER as v, steppedCornerClip as y } from "../pixel-frame.js";
-import { LitElement as b, css as x, html as S, unsafeCSS as C } from "lit";
-import { property as w, queryAssignedElements as T } from "lit/decorators.js";
+import { emit as e } from "../events.js";
+import { vfElement as t } from "../define.js";
+import { ScaleController as n, effectiveScale as r, sysLength as i } from "../scale.js";
+import a from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { VfPositioned as o } from "../position.js";
+import { vfBase as s } from "../styles/recipes/host.js";
+import { tileImage as c, tileRaster as l, tileRects as u, tileSpan as d, vfTileSize as f } from "../styles/recipes/tile.js";
+import { TileRasterCache as p, patternOverride as m, tileGrid as h, vfTileGrid as g } from "../tile-grid.js";
+import { GridSnapController as _ } from "../grid-snap.js";
+import { DocumentListenersController as v } from "../document-listeners.js";
+import { SCREEN_CORNER as y, steppedCornerClip as b } from "../pixel-frame.js";
+import { LitElement as x, css as S, html as C, unsafeCSS as w } from "lit";
+import { property as T, queryAssignedElements as E } from "lit/decorators.js";
 //#region src/components/vf-desktop.ts
-var E = 1e6, D = 512, O = 342, k = 2, A = [
+var D = 1e6, O = 512, k = 342, A = 2, j = [
 	[
 		0,
 		0,
@@ -33,9 +34,9 @@ var E = 1e6, D = 512, O = 342, k = 2, A = [
 		1,
 		"#000000"
 	]
-], j = s(k, k, l(A)), M = c(k, k, A), N = u(k), P = class extends a(b) {
+], M = c(A, A, u(j)), N = l(A, A, j), P = d(A), F = class extends o(x) {
 	constructor(...e) {
-		super(...e), this.width = D, this.height = O, this.bezel = 0, this.scale = new t(this), this.gridSnap = new g(this), this._pattern = "", this.#e = new f(), this._zCounter = 0, this._awaitingUpgrade = !1, this._pointerGesture = !1, this._restoringFocus = !1, this._gestureEnd = new _(this, () => [[
+		super(...e), this.width = O, this.height = k, this.bezel = 0, this.scale = new n(this), this.gridSnap = new _(this), this._pattern = "", this.#e = new p(), this._zCounter = 0, this._activeWindow = null, this._deactivated = !1, this._awaitingUpgrade = !1, this._pointerGesture = !1, this._restoringFocus = !1, this._gestureEnd = new v(this, () => [[
 			document,
 			"pointerup",
 			this._onGestureEnd,
@@ -59,9 +60,9 @@ var E = 1e6, D = 512, O = 342, k = 2, A = [
 	}
 	static {
 		this.styles = [
-			o,
-			h,
-			x`
+			s,
+			g,
+			S`
       :host {
         display: block;
         position: relative;
@@ -110,8 +111,8 @@ var E = 1e6, D = 512, O = 342, k = 2, A = [
            belt-and-braces paint beneath the (opaque) kit fill. Override the
            whole tile via --vf-desktop-pattern — the tile grid renders the
            same token at the same documented geometry. */
-        background-image: var(--vf-desktop-pattern, ${C(j)});
-        ${d(k)}
+        background-image: var(--vf-desktop-pattern, ${w(M)});
+        ${f(A)}
         /* Forced colors: the checker is opaque literal white-and-black (a
            preserved url() tile), which ignores a dark theme entirely. A
            backdrop is decoration, and high-contrast mode is a request for
@@ -148,7 +149,7 @@ var E = 1e6, D = 512, O = 342, k = 2, A = [
       .screen > .vf-tile-grid {
         position: absolute;
         inset: 0;
-        --_vf-tile-image: var(--vf-desktop-pattern, ${C(M)});
+        --_vf-tile-image: var(--vf-desktop-pattern, ${w(N)});
       }
       /* Bezeled, the screen is inset by exactly one bezel width. The host
          is always the declared screen + 2×bezel (written in updated()), so
@@ -175,25 +176,25 @@ var E = 1e6, D = 512, O = 342, k = 2, A = [
       .corner {
         position: absolute;
         top: 0;
-        width: calc(var(--vf-scale, 1) * ${v[0]}px);
-        height: calc(var(--vf-scale, 1) * ${v.length}px);
+        width: calc(var(--vf-scale, 1) * ${y[0]}px);
+        height: calc(var(--vf-scale, 1) * ${y.length}px);
         background: var(--vf-black, #000);
         pointer-events: none;
         z-index: 2147483647;
       }
       .corner.tl {
         left: 0;
-        clip-path: ${C(y(v, "left"))};
+        clip-path: ${w(b(y, "left"))};
       }
       .corner.tr {
         right: 0;
-        clip-path: ${C(y(v, "right"))};
+        clip-path: ${w(b(y, "right"))};
       }
     `
 		];
 	}
 	fitWithin(e, t) {
-		let r = n(this), i = (e) => Math.max(0, Math.floor(e / r + 1e-6) - 2 * this.bezel);
+		let n = r(this), i = (e) => Math.max(0, Math.floor(e / n + 1e-6) - 2 * this.bezel);
 		return this.width = i(e), this.height = i(t), {
 			width: this.width,
 			height: this.height
@@ -212,9 +213,15 @@ var E = 1e6, D = 512, O = 342, k = 2, A = [
 	bringToFront(e) {
 		this._restack(e), this._requestDomSync();
 	}
+	get activeWindow() {
+		return this._activeWindow;
+	}
+	clearActive() {
+		this._deactivated = !0, this._setActive(null);
+	}
 	_restack(e) {
 		let t = this._isUtility(e);
-		e.style.zIndex = String(++this._zCounter + (t ? E : 0)), t || this._setActive(e);
+		e.style.zIndex = String(++this._zCounter + (t ? D : 0)), t || this._setActive(e);
 	}
 	_requestDomSync() {
 		this._pointerGesture || this._syncDomOrder();
@@ -231,20 +238,22 @@ var E = 1e6, D = 512, O = 342, k = 2, A = [
 		let e = this._windows, t = null;
 		for (let n of e) if (!n.style.zIndex) {
 			let e = this._isUtility(n);
-			n.style.zIndex = String(++this._zCounter + (e ? E : 0)), e || (t = n);
+			n.style.zIndex = String(++this._zCounter + (e ? D : 0)), e || (t = n);
 		}
-		let n = t ?? this._topmost(e.filter((e) => !this._isUtility(e)));
-		n && this._setActive(n), customElements.get("vf-window") || this._normalizeAfterUpgrade();
+		let n = e.filter((e) => !this._isUtility(e)), r = this._activeWindow && n.includes(this._activeWindow) ? this._activeWindow : null;
+		this._setActive(t ?? r ?? (this._deactivated ? null : this._topmost(n))), customElements.get("vf-window") || this._normalizeAfterUpgrade();
 	}
 	_normalizeAfterUpgrade() {
 		this._awaitingUpgrade || (this._awaitingUpgrade = !0, customElements.whenDefined("vf-window").then(() => {
 			if (this._awaitingUpgrade = !1, !this.isConnected) return;
-			let e = this._topmost(this._windows.filter((e) => !this._isUtility(e)));
-			e && this._setActive(e);
+			let e = this._windows.filter((e) => !this._isUtility(e)), t = this._activeWindow && e.includes(this._activeWindow) ? this._activeWindow : null;
+			this._setActive(t ?? (this._deactivated ? null : this._topmost(e)));
 		}));
 	}
-	_setActive(e) {
-		for (let t of this._windows) this._isUtility(t) || this._setWindowActive(t, t === e);
+	_setActive(t) {
+		t && (this._deactivated = !1);
+		for (let e of this._windows) this._isUtility(e) || this._setWindowActive(e, e === t);
+		t !== this._activeWindow && (this._activeWindow = t, e(this, "vf-activate", { window: t }));
 	}
 	_setWindowActive(e, t) {
 		if ("active" in e) {
@@ -274,37 +283,37 @@ var E = 1e6, D = 512, O = 342, k = 2, A = [
 		r && n instanceof HTMLElement && n.isConnected && this._deepActiveElement() !== n && (this._restoringFocus = !0, n.focus({ preventScroll: !0 }), this._restoringFocus = !1);
 	}
 	willUpdate(e) {
-		super.willUpdate(e), this._pattern = p(this, "--vf-desktop-pattern");
+		super.willUpdate(e), this._pattern = m(this, "--vf-desktop-pattern");
 	}
 	updated(e) {
-		if (e.has("bezel") && (this.bezel > 0 ? this.style.setProperty("--vf-desktop-bezel", r(this.bezel)) : this.style.removeProperty("--vf-desktop-bezel")), e.has("width") || e.has("height") || e.has("bezel")) {
-			let e = this.width ?? D, t = this.height ?? O;
-			this.style.width = r(e + 2 * this.bezel), this.style.height = r(t + 2 * this.bezel);
+		if (e.has("bezel") && (this.bezel > 0 ? this.style.setProperty("--vf-desktop-bezel", i(this.bezel)) : this.style.removeProperty("--vf-desktop-bezel")), e.has("width") || e.has("height") || e.has("bezel")) {
+			let e = this.width ?? O, t = this.height ?? k;
+			this.style.width = i(e + 2 * this.bezel), this.style.height = i(t + 2 * this.bezel);
 		}
 	}
 	render() {
-		let e = this.width ?? D, t = this.height ?? O, n = Math.ceil(e / N), i = Math.ceil(t / N), a = this._pattern ? S`<div class="vf-tile-grid">
-          ${m({
+		let e = this.width ?? O, t = this.height ?? k, n = Math.ceil(e / P), r = Math.ceil(t / P), a = this._pattern ? C`<div class="vf-tile-grid">
+          ${h({
 			cols: n,
-			rows: i,
-			tile: N
+			rows: r,
+			tile: P
 		})}
-        </div>` : S`<div
+        </div>` : C`<div
           class="vf-tile-raster"
-          style="width:${r(n * N)};height:${r(i * N)};background-image:${this.#e.for(k, k, A, n * N, i * N)}"
+          style="width:${i(n * P)};height:${i(r * P)};background-image:${this.#e.for(A, A, j, n * P, r * P)}"
         ></div>`;
-		return S`
+		return C`
       <div class=${this.bezel > 0 ? "desktop vf-snap bezeled" : "desktop vf-snap"}>
         <div class="screen${this._pattern ? " patterned" : ""}" part="desktop">
           ${a}
           <slot @slotchange=${this._onSlotChange}></slot>
-          ${this.bezel > 0 ? S`<div class="corner tl"></div>
+          ${this.bezel > 0 ? C`<div class="corner tl"></div>
                 <div class="corner tr"></div>` : null}
         </div>
       </div>
     `;
 	}
 };
-i([w({ type: Number })], P.prototype, "width", void 0), i([w({ type: Number })], P.prototype, "height", void 0), i([w({ type: Number })], P.prototype, "bezel", void 0), i([T({ selector: "vf-window" })], P.prototype, "_windows", void 0), P = i([e("vf-desktop")], P);
+a([T({ type: Number })], F.prototype, "width", void 0), a([T({ type: Number })], F.prototype, "height", void 0), a([T({ type: Number })], F.prototype, "bezel", void 0), a([E({ selector: "vf-window" })], F.prototype, "_windows", void 0), F = a([t("vf-desktop")], F);
 //#endregion
-export { P as VfDesktop };
+export { F as VfDesktop };

package/dist/components/vf-icon.d.ts

@@ -71,10 +71,17 @@ declare const VfIcon_base: (new (...args: any[]) => import("../position.js").VfP
  * precisely an image plus its mask — so inverting it flips ink and fill and
  * leaves the surround alone, which is the whole of the classic selected
  * appearance. `filter: invert(1)` reproduces it exactly for 1-bit art. Color
- * art inverts too, into a photographic negative rather than the darkening
- * System 7 gave it; that is the case to revisit if the kit ever grows a
- * selected-state treatment of its own. The label plate inverts to the
- * `--vf-highlight` pair, sharing one selection color with `vf-list-item`.
+ * art would invert into a photographic negative, which was never what
+ * System 7 showed: declare `color` and selection **darkens** the art
+ * instead — Icon Utilities' ttSelected transform, every color blended
+ * halfway toward black (`brightness(0.5)`), whites going gray, the
+ * transparent surround still untouched. The declaration is the consumer's
+ * because the component cannot tell color art from a mask by looking at a
+ * slotted image. It covers whatever the cell shows, the derived open ghost
+ * included, so a color icon has one selected treatment open or closed. The
+ * label plate inverts to the `--vf-highlight` pair either way, sharing one
+ * selection color with `vf-list-item` — the selected name was inverted
+ * whatever the art.
  *
  * ### Open is derived, not shipped
  *
@@ -265,6 +272,14 @@ export declare class VfIcon extends VfIcon_base {
     selectable: boolean;
     /** Whether the icon is selected: the art inverts and the plate goes black. */
     selected: boolean;
+    /**
+     * Declares the slotted art a **color icon**, so selection darkens it — the
+     * ttSelected transform, every color blended halfway toward black — instead
+     * of inverting it into a photographic negative (see the class doc). Yours
+     * to declare because the component cannot tell color art from a 1-bit mask
+     * by looking at a slotted image. The label plate inverts either way.
+     */
+    color: boolean;
     /**
      * The icon's window is on screen, so the art paints as the Finder's open
      * ghost — outline held, interior re-filled with the kit's loose dither —

package/dist/components/vf-icon.js

@@ -1,14 +1,14 @@
-import { vfElement as e } from "../define.js";
-import { ScaleController as t, effectiveScale as n, toSysExact as r } from "../scale.js";
-import i from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
-import { PlacementController as a, VfPositioned as o, warnMovableContract as s } from "../position.js";
-import { vfBodyDecls as c } from "../styles/recipes/body-face.js";
-import { vfBase as l } from "../styles/recipes/host.js";
-import { vfFocusUnderline as u } from "../styles/recipes/focus.js";
-import { GridSnapController as d } from "../grid-snap.js";
-import { DocumentListenersController as f } from "../document-listeners.js";
-import { DragController as p } from "../drag.js";
-import { emit as m } from "../events.js";
+import { emit as e } from "../events.js";
+import { vfElement as t } from "../define.js";
+import { ScaleController as n, effectiveScale as r, toSysExact as i } from "../scale.js";
+import a from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { PlacementController as o, VfPositioned as s, warnMovableContract as c } from "../position.js";
+import { vfBodyDecls as l } from "../styles/recipes/body-face.js";
+import { vfBase as u } from "../styles/recipes/host.js";
+import { vfFocusUnderline as d } from "../styles/recipes/focus.js";
+import { GridSnapController as f } from "../grid-snap.js";
+import { DocumentListenersController as p } from "../document-listeners.js";
+import { DragController as m } from "../drag.js";
 import "../motion.js";
 import { FocusRuleController as h } from "../focus-modality.js";
 import { deriveOpenArt as g } from "../open-art.js";
@@ -18,20 +18,20 @@ import { property as x, state as S } from "lit/decorators.js";
 var C = {
 	large: 32,
 	small: 16
-}, w = 1, T = 8, E = (e, t) => t <= 0 ? Math.max(e, 0) : Math.min(Math.max(e, 0), t), D = class extends o(_) {
-	constructor(...e) {
-		super(...e), this.label = "", this.size = "large", this.selectable = !1, this.selected = !1, this.open = !1, this.movable = !1, this.editable = !1, this.maxlength = 31, this.scale = new t(this), this.gridSnap = new d(this), this.focusRule = new h(this), this._editing = !1, this._draft = "", this.#e = 0, this._ghost = null, this.#t = null, this.#n = this.attachInternals(), this.#i = "", this.#a = "", this.#o = 0, this.#s = -Infinity, this.#c = new f(this, () => [[
+}, w = 1, T = 8, E = (e, t) => t <= 0 ? Math.max(e, 0) : Math.min(Math.max(e, 0), t), D = class extends s(_) {
+	constructor(...t) {
+		super(...t), this.label = "", this.size = "large", this.selectable = !1, this.selected = !1, this.color = !1, this.open = !1, this.movable = !1, this.editable = !1, this.maxlength = 31, this.scale = new n(this), this.gridSnap = new f(this), this.focusRule = new h(this), this._editing = !1, this._draft = "", this.#e = 0, this._ghost = null, this.#t = null, this.#n = this.attachInternals(), this.#i = "", this.#a = "", this.#o = 0, this.#s = -Infinity, this.#c = new p(this, () => [[
 			document,
 			"pointerdown",
 			this.#A,
 			!0
 		]]), this.#l = (e, t, n) => ({
-			x: E(e, n.width - r(this.offsetWidth, this)),
-			y: E(t, n.height - r(this.offsetHeight, this))
-		}), this.#u = new a(this, (e, t, n) => this.#l(e, t, n)), this.#d = {
+			x: E(e, n.width - i(this.offsetWidth, this)),
+			y: E(t, n.height - i(this.offsetHeight, this))
+		}), this.#u = new o(this, (e, t, n) => this.#l(e, t, n)), this.#d = {
 			x: 0,
 			y: 0
-		}, this.#f = new p(this, {
+		}, this.#f = new m(this, {
 			onDragStart: (e) => !this.movable || e.button !== 0 || this._editing ? null : (this.#m(), this.#d = this.#u.seed()),
 			onDrag: (e, t) => {
 				(e !== this.#d.x || t !== this.#d.y) && this.#S(), this.#u.moveTo(e, t);
@@ -45,7 +45,7 @@ var C = {
 			let t = e.composedPath().some((e) => e instanceof HTMLElement && e.classList.contains("label")), n = this.selected, r = e.timeStamp - this.#s < 800;
 			this.#s = e.timeStamp, this.#S(), this.selectable && (e.shiftKey || e.metaKey ? this.#D(!this.selected) : this.#D(!0)), this.editable && t && n && !r && !e.shiftKey && !e.metaKey && this.#x(), this.#T && (this.focus({ preventScroll: !0 }), this.focusRule.suppress()), this.#f.onPointerDown(e);
 		}, this.#k = () => {
-			this._editing || m(this, "vf-open", {});
+			this._editing || e(this, "vf-open", {});
 		}, this.#A = (e) => {
 			e.composedPath().includes(this) || (this.#S(), !(e.shiftKey || e.metaKey) && this.#D(!1));
 		}, this.#j = (e) => {
@@ -62,28 +62,28 @@ var C = {
 			this._draft = t.value;
 		}, this.#P = (e) => {
 			e.key === "Enter" ? (e.preventDefault(), this.commitEditing(), this.focus()) : e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), this.cancelEditing(), this.focus());
-		}, this.#F = (e) => {
-			if (this.#S(), !(this._editing || e.defaultPrevented)) {
-				if ((e.metaKey || e.ctrlKey) && !e.altKey && (e.key.toLowerCase() === "o" || e.key === "ArrowDown")) {
-					e.preventDefault(), m(this, "vf-open", {});
+		}, this.#F = (t) => {
+			if (this.#S(), !(this._editing || t.defaultPrevented)) {
+				if ((t.metaKey || t.ctrlKey) && !t.altKey && (t.key.toLowerCase() === "o" || t.key === "ArrowDown")) {
+					t.preventDefault(), e(this, "vf-open", {});
 					return;
 				}
-				switch (e.key) {
+				switch (t.key) {
 					case "Enter":
 						if (!this.editable) return;
-						e.preventDefault(), this.startEditing();
+						t.preventDefault(), this.startEditing();
 						return;
 					case " ":
 						if (!this.selectable) return;
-						e.preventDefault(), this.focusRule.reveal(), this.#D(!this.selected);
+						t.preventDefault(), this.focusRule.reveal(), this.#D(!this.selected);
 						return;
 					case "ArrowLeft":
 					case "ArrowRight":
 					case "ArrowUp":
 					case "ArrowDown": {
 						if (!this.movable) return;
-						e.preventDefault(), this.focusRule.reveal();
-						let t = e.shiftKey ? T : w, n = e.key === "ArrowLeft" ? -t : e.key === "ArrowRight" ? t : 0, r = e.key === "ArrowUp" ? -t : e.key === "ArrowDown" ? t : 0;
+						t.preventDefault(), this.focusRule.reveal();
+						let e = t.shiftKey ? T : w, n = t.key === "ArrowLeft" ? -e : t.key === "ArrowRight" ? e : 0, r = t.key === "ArrowUp" ? -e : t.key === "ArrowDown" ? e : 0;
 						this.#m();
 						let i = this.#u.seed();
 						this.#u.moveTo(i.x + n, i.y + r);
@@ -93,7 +93,7 @@ var C = {
 		};
 	}
 	static {
-		this.styles = [l, v`
+		this.styles = [u, v`
       :host {
         display: inline-block;
         cursor: var(--vf-cursor, default);
@@ -128,6 +128,13 @@ var C = {
       :host([selected]) .art {
         filter: invert(1);
       }
+      /* A color icon's selection darkens instead — ttSelected, colors
+         blended halfway toward black — since a photographic negative was
+         never what System 7 showed for color art (see the class doc). One
+         treatment for whatever the cell shows, the open ghost included. */
+      :host([selected][color]) .art {
+        filter: brightness(0.5);
+      }
       /* The open ghost replaces the slotted art while there is one — the
          slot stays in the tree (it is where the art loads and re-loads
          from) but paints nothing. Gated on the class, not :host([open]):
@@ -154,7 +161,7 @@ var C = {
         margin-top: calc(var(--vf-scale, 1) * var(--vf-icon-gap, 2px));
       }
       .label {
-        ${c}
+        ${l}
         font-weight: var(--vf-font-weight, 700);
         /* Whole system px, never a ratio — layout contract rule 2. 12, not
            the face's 16px em: the Finder's plate is 12 system px tall, and
@@ -242,7 +249,7 @@ var C = {
            selection paint at this edge, which is the whole reason it has no
            border of its own (see .rename-box). */
         height: calc(var(--vf-scale, 1) * var(--vf-icon-label-height, 12px));
-        ${c}
+        ${l}
         font-weight: var(--vf-font-weight, 700);
         line-height: calc(
           var(--vf-scale, 1) * var(--vf-icon-label-height, 12px)
@@ -285,12 +292,12 @@ var C = {
          as a visible focus (see focus-modality.ts). */
       .caption.focus-rule .label::after {
         --vf-focus-underline-offset: -2px;
-        ${u}
+        ${d}
       }
       /* No name, no plate — the rule falls back to the art cell. */
       .art.focus-rule::after {
         --vf-focus-underline-offset: -2px;
-        ${u}
+        ${d}
       }
       :host(:focus) {
         outline: none;
@@ -327,7 +334,7 @@ var C = {
 	}
 	#p;
 	#m() {
-		this.#p ||= s(this, `vf-icon${this.label ? ` ("${this.label}")` : ""}`, "<vf-icon movable label=\"Read Me\" width=\"64\" top=\"16\" left=\"16\">");
+		this.#p ||= c(this, `vf-icon${this.label ? ` ("${this.label}")` : ""}`, "<vf-icon movable label=\"Read Me\" width=\"64\" top=\"16\" left=\"16\">");
 	}
 	firstUpdated() {
 		document.fonts.ready.then(() => this.#h());
@@ -343,7 +350,7 @@ var C = {
 			let n = document.createRange();
 			n.selectNodeContents(e), t = n.getBoundingClientRect().width, n.detach();
 		}
-		let r = t / n(this) + 2, i = Math.max(2, Math.ceil(r / 2) * 2);
+		let n = t / r(this) + 2, i = Math.max(2, Math.ceil(n / 2) * 2);
 		this.#e = this._editing && t === 0 ? Math.max(i, C[this.size]) : i, e.style.width = this.#g;
 	}
 	get #g() {
@@ -392,18 +399,18 @@ var C = {
 	commitEditing() {
 		if (!this._editing) return;
 		this._editing = !1;
-		let e = this.#a, t = this._draft;
-		if (t.trim() === "") {
-			this._draft = e, t !== e && m(this, "vf-name-rejected", {
-				attempted: t,
-				kept: e,
+		let t = this.#a, n = this._draft;
+		if (n.trim() === "") {
+			this._draft = t, n !== t && e(this, "vf-name-rejected", {
+				attempted: n,
+				kept: t,
 				reason: "empty"
 			});
 			return;
 		}
-		t !== e && (this.label = t, m(this, "vf-change", {
-			label: t,
-			previous: e
+		n !== t && (this.label = n, e(this, "vf-change", {
+			label: n,
+			previous: t
 		}));
 	}
 	cancelEditing() {
@@ -469,39 +476,42 @@ var C = {
 	#E() {
 		this.hasAttribute("tabindex") || (this.#T ? this.tabIndex = 0 : this.removeAttribute("tabindex"));
 	}
-	#D(e) {
-		e !== this.selected && (this.selected = e, m(this, "vf-select", { selected: e }));
+	#D(t) {
+		t !== this.selected && (this.selected = t, e(this, "vf-select", { selected: t }));
 	}
 	#O;
 	#k;
 	#A;
 	#j;
 	#M;
-	#N(e) {
-		m(this, "vf-name-too-long", {
-			attempted: e,
-			accepted: e.slice(0, this.maxlength),
+	#N(t) {
+		e(this, "vf-name-too-long", {
+			attempted: t,
+			accepted: t.slice(0, this.maxlength),
 			limit: this.maxlength
 		});
 	}
 	#P;
 	#F;
 };
-i([x()], D.prototype, "label", void 0), i([x({ reflect: !0 })], D.prototype, "size", void 0), i([x({
+a([x()], D.prototype, "label", void 0), a([x({ reflect: !0 })], D.prototype, "size", void 0), a([x({
+	type: Boolean,
+	reflect: !0
+})], D.prototype, "selectable", void 0), a([x({
 	type: Boolean,
 	reflect: !0
-})], D.prototype, "selectable", void 0), i([x({
+})], D.prototype, "selected", void 0), a([x({
 	type: Boolean,
 	reflect: !0
-})], D.prototype, "selected", void 0), i([x({
+})], D.prototype, "color", void 0), a([x({
 	type: Boolean,
 	reflect: !0
-})], D.prototype, "open", void 0), i([x({
+})], D.prototype, "open", void 0), a([x({
 	type: Boolean,
 	reflect: !0
-})], D.prototype, "movable", void 0), i([x({
+})], D.prototype, "movable", void 0), a([x({
 	type: Boolean,
 	reflect: !0
-})], D.prototype, "editable", void 0), i([x({ type: Number })], D.prototype, "width", void 0), i([x({ type: Number })], D.prototype, "maxlength", void 0), i([S()], D.prototype, "_editing", void 0), i([S()], D.prototype, "_draft", void 0), i([S()], D.prototype, "_ghost", void 0), D = i([e("vf-icon")], D);
+})], D.prototype, "editable", void 0), a([x({ type: Number })], D.prototype, "width", void 0), a([x({ type: Number })], D.prototype, "maxlength", void 0), a([S()], D.prototype, "_editing", void 0), a([S()], D.prototype, "_draft", void 0), a([S()], D.prototype, "_ghost", void 0), D = a([t("vf-icon")], D);
 //#endregion
 export { D as VfIcon };