vintage-frames 0.3.0 → 0.5.0

package/dist/components/vf-dialog.js

@@ -4,23 +4,23 @@ import r from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js
 import { vfDisplayDecls as i } from "../styles/recipes/display-face.js";
 import { vfBase as a } from "../styles/recipes/host.js";
 import { vfStripes as o } from "../styles/recipes/pattern.js";
-import { vfChromeFrame as s, vfModalFrame as c } from "../styles/recipes/surface.js";
-import { vfTitleBar as l, vfWindowWidgets as u } from "../styles/recipes/title-bar.js";
-import { vfFocus as d, vfFocusRing as f } from "../styles/recipes/focus.js";
-import { vfScrollRail as p } from "../styles/recipes/scroll-rail.js";
-import { DragController as m } from "../drag.js";
-import { TitleCenterController as h, chromeTitleBar as g, closeBox as _, widgetLabel as v } from "../chrome.js";
-import { ScrollStateController as y } from "../scroll-state.js";
-import { ScrollRailController as b, renderScrollRail as x } from "../scroll-rail.js";
-import { VfModalDialog as S, modalDialogStyles as C } from "../modal-dialog.js";
+import { vfModalFrame as s } from "../styles/recipes/surface.js";
+import { vfTitleBar as c, vfWindowWidgets as l } from "../styles/recipes/title-bar.js";
+import { vfFocus as u, vfFocusRing as d } from "../styles/recipes/focus.js";
+import { vfScrollRail as f } from "../styles/recipes/scroll-rail.js";
+import { DragController as p } from "../drag.js";
+import { TitleCenterController as m, chromeTitleBar as h, closeBox as g, widgetLabel as _ } from "../chrome.js";
+import { ScrollStateController as v } from "../scroll-state.js";
+import { ScrollRailController as y, renderScrollRail as b } from "../scroll-rail.js";
+import { VfModalDialog as x, modalDialogStyles as S } from "../modal-dialog.js";
 import "./vf-button-group.js";
-import { css as w, html as T, nothing as E } from "lit";
-import { property as D, query as O, state as k } from "lit/decorators.js";
-import { styleMap as A } from "lit/directives/style-map.js";
+import { css as C, html as w, nothing as T } from "lit";
+import { property as E, query as D, state as O } from "lit/decorators.js";
+import { styleMap as k } from "lit/directives/style-map.js";
 //#region src/components/vf-dialog.ts
-var j = class extends S {
+var A = class extends x {
 	constructor(...e) {
-		super(...e), this._drag = new m(this, {
+		super(...e), this._drag = new p(this, {
 			onDragStart: (e) => {
 				if (e.button !== 0 || e.composedPath().some((e) => e instanceof HTMLElement && e.classList.contains("box"))) return null;
 				let r = this._dialog;
@@ -36,34 +36,32 @@ var j = class extends S {
 				};
 			},
 			onDrag: (e, t) => this.placeAt(e, t)
-		}), this._titleCenter = new h(this), this.heading = "", this.label = "", this.closable = !1, this._hasButtons = !1, this._scrollable = !1, this._scrollState = new y(this, () => this._content, void 0, (e) => {
+		}), this._titleCenter = new m(this), this.heading = "", this.label = "", this.closable = !1, this._hasButtons = !1, this._scrollable = !1, this._scrollState = new v(this, () => this._content, void 0, (e) => {
 			this._scrollable = e.y;
-		}), this._rail = new b(this, { getScroll: () => this._content });
+		}), this._rail = new y(this, { getScroll: () => this._content });
 	}
 	static {
 		this.styles = [
 			a,
 			o,
-			d,
+			u,
 			s,
 			c,
 			l,
-			u,
-			p,
-			C,
-			w`
+			f,
+			S,
+			C`
       :host {
         display: contents;
       }
       /* A declared height lands on the <dialog> (dialogSize), so the frame has
-         to be told to fill it — vfChromeFrame is skin only. Both chromes are
-         full-height flex columns for the same reason vf-window's is: the body
+         to be told to fill it — vfModalFrame is skin only. The frame is a
+         full-height flex column for the same reason vf-window's is: the body
          takes the slack the title bar doesn't. The frame is the flex child of
          the <dialog> itself (modalDialogStyles), not a height: 100% block —
          a percentage can't resolve against the undeclared-height dialog that
          only the UA's dialog:modal max-height caps, and that spill was
          exactly how a tall modal used to strand its buttons off-screen. */
-      .vf-frame,
       .vf-modal-frame {
         display: flex;
         flex-direction: column;
@@ -182,7 +180,7 @@ var j = class extends S {
          treatment as vf-scroll-area's viewport. */
       .content:focus-visible {
         --vf-focus-offset: -2px;
-        ${f}
+        ${d}
       }
       /* The plain frame's heading: centered chrome type at the top of the
          body, the way dBoxProc dialogs drew their title in content (see
@@ -214,21 +212,21 @@ var j = class extends S {
 		this.close();
 	}
 	render() {
-		let e = !this.label && this.heading !== "", t = this.frame === "plain", n = T`
+		let e = !this.label && this.heading !== "", t = this.frame === "plain", n = w`
       <div class="body" part="body">
         <div class="content-wrap">
           <div
             class="content vf-scroll"
             part="content"
-            tabindex=${this._scrollable ? "0" : E}
-            role=${this._scrollable ? "group" : E}
+            tabindex=${this._scrollable ? "0" : T}
+            role=${this._scrollable ? "group" : T}
           >
-            ${t && this.heading !== "" ? T`<span class="plain-heading" part="title" id="title"
+            ${t && this.heading !== "" ? w`<span class="plain-heading" part="title" id="title"
                   >${this.heading}</span
-                >` : E}
+                >` : T}
             <slot @slotchange=${this._onBodySlotChange}></slot>
           </div>
-          ${x(this._rail, "vertical")}
+          ${b(this._rail, "vertical")}
           <div class="scroll-frame" aria-hidden="true"></div>
         </div>
         <div class="footer ${this._hasButtons ? "" : "empty"}" part="footer">
@@ -241,29 +239,23 @@ var j = class extends S {
         </div>
       </div>
     `;
-		return T`
+		return w`
       <dialog
-        style=${A(this.dialogSize)}
-        aria-labelledby=${e ? "title" : E}
-        aria-label=${e ? E : this.label || "Dialog"}
+        style=${k(this.dialogSize)}
+        aria-labelledby=${e ? "title" : T}
+        aria-label=${e ? T : this.label || "Dialog"}
         @cancel=${this._onNativeCancel}
         @close=${this._onNativeClose}
       >
-        ${t ? T`
-              <div class="vf-modal-frame" part="frame">
-                <div class="vf-modal-frame-inner">${n}</div>
-              </div>
-            ` : T`
-              <div class="vf-frame" part="frame">
-                ${g(this._drag, T`
-                    ${this.closable ? _(v("Close", this.heading), this._onCloseClick) : E}
-                    <span class="vf-title" part="title" id="title"
-                      >${this.heading}</span
-                    >
-                  `)}
-                ${n}
-              </div>
-            `}
+        <div class="vf-modal-frame" part="frame">
+          ${t ? T : h(this._drag, w`
+                  ${this.closable ? g(_("Close", this.heading), this._onCloseClick) : T}
+                  <span class="vf-title" part="title" id="title"
+                    >${this.heading}</span
+                  >
+                `)}
+          <div class="vf-modal-frame-inner">${n}</div>
+        </div>
       </dialog>
     `;
 	}
@@ -272,9 +264,9 @@ var j = class extends S {
 		this._hasButtons = t.assignedElements().length > 0;
 	}
 };
-r([D()], j.prototype, "heading", void 0), r([D()], j.prototype, "label", void 0), r([D({
+r([E()], A.prototype, "heading", void 0), r([E()], A.prototype, "label", void 0), r([E({
 	type: Boolean,
 	reflect: !0
-})], j.prototype, "closable", void 0), r([D({ reflect: !0 })], j.prototype, "frame", void 0), r([k()], j.prototype, "_hasButtons", void 0), r([O(".content")], j.prototype, "_content", void 0), r([k()], j.prototype, "_scrollable", void 0), j = r([e("vf-dialog")], j);
+})], A.prototype, "closable", void 0), r([E({ reflect: !0 })], A.prototype, "frame", void 0), r([O()], A.prototype, "_hasButtons", void 0), r([D(".content")], A.prototype, "_content", void 0), r([O()], A.prototype, "_scrollable", void 0), A = r([e("vf-dialog")], A);
 //#endregion
-export { j as VfDialog };
+export { A as VfDialog };

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.color = !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);
@@ -161,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
@@ -249,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)
@@ -292,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;
@@ -334,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());
@@ -350,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() {
@@ -399,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() {
@@ -476,42 +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), i([x({
+})], D.prototype, "selectable", void 0), a([x({
 	type: Boolean,
 	reflect: !0
-})], D.prototype, "selected", void 0), i([x({
+})], D.prototype, "selected", void 0), a([x({
 	type: Boolean,
 	reflect: !0
-})], D.prototype, "color", 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 };

package/dist/components/vf-list-item.js

@@ -1,16 +1,16 @@
-import { vfElement as e } from "../define.js";
-import { ScaleController as t } from "../scale.js";
-import n from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
-import { VfPositioned as r } from "../position.js";
-import { vfBase as i } from "../styles/recipes/host.js";
-import { vfFocusRing as a } from "../styles/recipes/focus.js";
-import { emit as o } from "../events.js";
+import { emit as e } from "../events.js";
+import { vfElement as t } from "../define.js";
+import { ScaleController as n } from "../scale.js";
+import r from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { VfPositioned as i } from "../position.js";
+import { vfBase as a } from "../styles/recipes/host.js";
+import { vfFocusRing as o } from "../styles/recipes/focus.js";
 import { LitElement as s, css as c, html as l } from "lit";
 import { property as u } from "lit/decorators.js";
 //#region src/components/vf-list-item.ts
-var d = class extends r(s) {
+var d = class extends i(s) {
 	static {
-		this.styles = [i, c`
+		this.styles = [a, c`
       :host {
         display: flex;
         align-items: center;
@@ -48,7 +48,7 @@ var d = class extends r(s) {
          across selected rows while Space still acts on it. */
       :host(:focus) {
         --vf-focus-offset: -1px;
-        ${a}
+        ${o}
       }
       :host([selected]) {
         background: var(--vf-highlight, #000);
@@ -75,25 +75,25 @@ var d = class extends r(s) {
 	}
 	#e;
 	constructor() {
-		super(), this.scale = new t(this), this.value = "", this.selected = !1, this.disabled = !1, this.listDisabled = !1, this.#e = this.attachInternals(), this.#e.role = "option";
+		super(), this.scale = new n(this), this.value = "", this.selected = !1, this.disabled = !1, this.listDisabled = !1, this.#e = this.attachInternals(), this.#e.role = "option";
 	}
 	connectedCallback() {
 		super.connectedCallback(), this.hasAttribute("tabindex") || (this.tabIndex = -1);
 	}
-	updated(e) {
-		e.has("selected") && (this.#e.ariaSelected = this.selected ? "true" : "false"), (e.has("disabled") || e.has("listDisabled")) && (this.#e.ariaDisabled = this.disabled || this.listDisabled ? "true" : null), e.has("disabled") && e.get("disabled") !== void 0 && o(this, "vf-list-item-disabled-change", { item: this }, { composed: !1 });
+	updated(t) {
+		t.has("selected") && (this.#e.ariaSelected = this.selected ? "true" : "false"), (t.has("disabled") || t.has("listDisabled")) && (this.#e.ariaDisabled = this.disabled || this.listDisabled ? "true" : null), t.has("disabled") && t.get("disabled") !== void 0 && e(this, "vf-list-item-disabled-change", { item: this }, { composed: !1 });
 	}
 	render() {
 		return l`<slot name="icon"></slot
       ><span class="text" part="text"><slot></slot></span>`;
 	}
 };
-n([u()], d.prototype, "value", void 0), n([u({
+r([u()], d.prototype, "value", void 0), r([u({
 	type: Boolean,
 	reflect: !0
-})], d.prototype, "selected", void 0), n([u({
+})], d.prototype, "selected", void 0), r([u({
 	type: Boolean,
 	reflect: !0
-})], d.prototype, "disabled", void 0), n([u({ attribute: !1 })], d.prototype, "listDisabled", void 0), d = n([e("vf-list-item")], d);
+})], d.prototype, "disabled", void 0), r([u({ attribute: !1 })], d.prototype, "listDisabled", void 0), d = r([t("vf-list-item")], d);
 //#endregion
 export { d as VfListItem };

package/dist/components/vf-list.js

@@ -1,23 +1,23 @@
-import { vfElement as e } from "../define.js";
-import { ScaleController as t } from "../scale.js";
-import n from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
-import { VfPositioned as r } from "../position.js";
-import { vfBase as i } from "../styles/recipes/host.js";
-import { vfFocusRing as a } from "../styles/recipes/focus.js";
-import { vfScrollRail as o } from "../styles/recipes/scroll-rail.js";
-import { GridSnapController as s } from "../grid-snap.js";
-import { emit as c } from "../events.js";
+import { emit as e } from "../events.js";
+import { vfElement as t } from "../define.js";
+import { ScaleController as n } from "../scale.js";
+import r from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { VfPositioned as i } from "../position.js";
+import { vfBase as a } from "../styles/recipes/host.js";
+import { vfFocusRing as o } from "../styles/recipes/focus.js";
+import { vfScrollRail as s } from "../styles/recipes/scroll-rail.js";
+import { GridSnapController as c } from "../grid-snap.js";
 import { ScrollStateController as l } from "../scroll-state.js";
 import { ScrollRailController as u, renderScrollRail as d } from "../scroll-rail.js";
 import { TypeAheadBuffer as f } from "../type-ahead.js";
 import { LitElement as p, css as m, html as h, nothing as g } from "lit";
 import { property as _, query as v, queryAssignedElements as y, state as b } from "lit/decorators.js";
 //#region src/components/vf-list.ts
-var x = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), S = class extends r(p) {
+var x = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), S = class extends i(p) {
 	static {
 		this.styles = [
-			i,
-			o,
+			a,
+			s,
 			m`
       :host {
         display: block;
@@ -66,7 +66,7 @@ var x = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), S = cl
          render()); the ring keeps that stop visible, inset to stay in-box. */
       .list:focus-visible {
         --vf-focus-offset: -2px;
-        ${a}
+        ${o}
       }
     `
 		];
@@ -77,7 +77,7 @@ var x = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), S = cl
 	#r;
 	#i;
 	constructor() {
-		super(), this.scale = new t(this), this.gridSnap = new s(this), this.scrollState = new l(this, () => this.viewport, () => this.content, (e) => {
+		super(), this.scale = new n(this), this.gridSnap = new c(this), this.scrollState = new l(this, () => this.viewport, () => this.content, (e) => {
 			this._scrollable = e.x || e.y;
 		}), this.rail = new u(this, {
 			getScroll: () => this.viewport,
@@ -192,15 +192,15 @@ var x = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), S = cl
 			this.#s(e, !1);
 		}
 	}
-	#s(e, t) {
-		let n = this._items, r = this.multiple ? e : e.slice(0, 1), i = n.filter((e) => e.selected).map((e) => e.value);
-		for (let e of n) e.selected = r.includes(e.value) && !e.disabled;
-		let a = n.filter((e) => e.selected).map((e) => e.value);
-		this.#r = [...a];
-		let o = a[0] ?? "";
-		this.value !== o && (this.value = o), x(this.values, a) || (this.values = a), this.#c(), t && !x(i, a) && c(this, "vf-change", {
+	#s(t, n) {
+		let r = this._items, i = this.multiple ? t : t.slice(0, 1), a = r.filter((e) => e.selected).map((e) => e.value);
+		for (let e of r) e.selected = i.includes(e.value) && !e.disabled;
+		let o = r.filter((e) => e.selected).map((e) => e.value);
+		this.#r = [...o];
+		let s = o[0] ?? "";
+		this.value !== s && (this.value = s), x(this.values, o) || (this.values = o), this.#c(), n && !x(a, o) && e(this, "vf-change", {
 			value: this.value,
-			values: [...a]
+			values: [...o]
 		});
 	}
 	#c() {
@@ -242,15 +242,15 @@ var x = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), S = cl
 		!t || t.disabled || (t.focus(), t.scrollIntoView({ block: "nearest" }));
 	}
 };
-n([v(".list")], S.prototype, "viewport", void 0), n([v(".list-content")], S.prototype, "content", void 0), n([b()], S.prototype, "_scrollable", void 0), n([_({
+r([v(".list")], S.prototype, "viewport", void 0), r([v(".list-content")], S.prototype, "content", void 0), r([b()], S.prototype, "_scrollable", void 0), r([_({
 	type: Boolean,
 	reflect: !0
-})], S.prototype, "multiple", void 0), n([_()], S.prototype, "value", void 0), n([_({ attribute: !1 })], S.prototype, "values", void 0), n([_({
+})], S.prototype, "multiple", void 0), r([_()], S.prototype, "value", void 0), r([_({ attribute: !1 })], S.prototype, "values", void 0), r([_({
 	type: Boolean,
 	reflect: !0
-})], S.prototype, "disabled", void 0), n([_()], S.prototype, "label", void 0), n([y({
+})], S.prototype, "disabled", void 0), r([_()], S.prototype, "label", void 0), r([y({
 	selector: "vf-list-item",
 	flatten: !0
-})], S.prototype, "_items", void 0), S = n([e("vf-list")], S);
+})], S.prototype, "_items", void 0), S = r([t("vf-list")], S);
 //#endregion
 export { S as VfList };