vintage-frames 0.2.0 → 0.2.1

package/custom-elements.json

@@ -1144,7 +1144,7 @@
           ],
           "slots": [
             {
-              "description": "The label, rendered to the right of the box with a 6px gap.",
+              "description": "The label, rendered to the right of the box with a 6px gap. Left empty, the label and its gap collapse: the control is the bare 13×13 box.",
               "name": ""
             }
           ],
@@ -1185,6 +1185,16 @@
               "description": "Value submitted with the form while checked.",
               "attribute": "value"
             },
+            {
+              "kind": "field",
+              "name": "_hasLabel",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether the slot holds non-whitespace content; gates the label row."
+            },
             {
               "kind": "field",
               "name": "valueMissing",
@@ -1241,6 +1251,24 @@
                 "module": "src/toggle-control.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "#onLabelSlotChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "formResetCallback",
@@ -9966,7 +9994,7 @@
           ],
           "slots": [
             {
-              "description": "The label, rendered to the right of the circle with a 6px gap.",
+              "description": "The label, rendered to the right of the circle with a 6px gap. Left empty, the label and its gap collapse: the control is the bare 13×13 circle.",
               "name": ""
             }
           ],
@@ -10016,6 +10044,16 @@
               "default": "false",
               "description": "True while the containing `vf-radio-group` is disabled. Managed by the\ngroup — not intended to be set by consumers."
             },
+            {
+              "kind": "field",
+              "name": "_hasLabel",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether the slot holds non-whitespace content; gates the label row."
+            },
             {
               "kind": "field",
               "name": "internals",
@@ -10067,6 +10105,24 @@
                 "module": "src/toggle-control.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "#onLabelSlotChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "activate",

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

@@ -12,6 +12,8 @@ declare const VfCheckbox_base: (new (...args: any[]) => import("../position.js")
  * click and Space.
  *
  * @slot - The label, rendered to the right of the box with a 6px gap.
+ *   Left empty, the label and its gap collapse: the control is the bare
+ *   13×13 box.
  * @csspart box - The 13×13 checkbox square.
  * @csspart label - The label wrapper around the slot.
  * @fires vf-change - When toggled by user interaction. `detail: { checked: boolean }`.
@@ -22,6 +24,7 @@ declare const VfCheckbox_base: (new (...args: any[]) => import("../position.js")
  *   form delegation and framework bindings hear it.
  */
 export declare class VfCheckbox extends VfCheckbox_base {
+    #private;
     static styles: import("lit").CSSResult[];
     /** Whether the checkbox is checked. */
     checked: boolean;
@@ -29,6 +32,8 @@ export declare class VfCheckbox extends VfCheckbox_base {
     name: string;
     /** Value submitted with the form while checked. */
     value: string;
+    /** Whether the slot holds non-whitespace content; gates the label row. */
+    private _hasLabel;
     /** `required` on a checkbox means it must be checked, as on a native one. */
     protected get valueMissing(): boolean;
     /** The message a native `<input type="checkbox" required>` reports. */

package/dist/components/vf-checkbox.js

@@ -10,10 +10,10 @@ import { CHECKBOX_X as l, glyphSvg as u } from "../glyphs.js";
 import { VfFormControl as d } from "../form-control.js";
 import { VfToggleControl as f } from "../toggle-control.js";
 import { css as p, html as m } from "lit";
-import { property as h } from "lit/decorators.js";
-import { classMap as g } from "lit/directives/class-map.js";
+import { property as h, state as g } from "lit/decorators.js";
+import { classMap as _ } from "lit/directives/class-map.js";
 //#region src/components/vf-checkbox.ts
-var _ = class extends n(f(d)) {
+var v = class extends n(f(d)) {
 	static {
 		this.styles = [
 			i,
@@ -80,7 +80,7 @@ var _ = class extends n(f(d)) {
 		return "Please check this box if you want to proceed.";
 	}
 	constructor() {
-		super(), this.checked = !1, this.name = "", this.value = "on", this.internals.role = "checkbox";
+		super(), this.checked = !1, this.name = "", this.value = "on", this._hasLabel = !1, this.internals.role = "checkbox";
 	}
 	connectedCallback() {
 		super.connectedCallback(), this.latchFormDefault(this.checked);
@@ -95,7 +95,7 @@ var _ = class extends n(f(d)) {
 		let e = this.isDisabled;
 		return m`
       <span
-        class=${g({
+        class=${_({
 			box: !0,
 			dim: e,
 			"vf-snap": !0
@@ -105,15 +105,23 @@ var _ = class extends n(f(d)) {
       >
         ${u(l, "check")}
       </span>
-      <span class=${g({
+      <span
+        class=${_({
 			label: !0,
 			dim: e,
+			empty: !this._hasLabel,
 			"vf-snap": !0
-		})} part="label">
-        <slot></slot>
+		})}
+        part="label"
+      >
+        <slot @slotchange=${this.#e}></slot>
       </span>
     `;
 	}
+	#e(e) {
+		let t = e.target;
+		this._hasLabel = t.assignedNodes({ flatten: !0 }).some((e) => e.nodeType === Node.ELEMENT_NODE || !!e.textContent?.trim());
+	}
 	updated(e) {
 		super.updated(e), (e.has("checked") || e.has("value") || this.disabledChanged(e)) && this.syncFormValue(this.checked ? this.value : null);
 	}
@@ -130,6 +138,6 @@ var _ = class extends n(f(d)) {
 t([h({
 	type: Boolean,
 	reflect: !0
-})], _.prototype, "checked", void 0), t([h({ reflect: !0 })], _.prototype, "name", void 0), t([h()], _.prototype, "value", void 0), _ = t([e("vf-checkbox")], _);
+})], v.prototype, "checked", void 0), t([h({ reflect: !0 })], v.prototype, "name", void 0), t([h()], v.prototype, "value", void 0), t([g()], v.prototype, "_hasLabel", void 0), v = t([e("vf-checkbox")], v);
 //#endregion
-export { _ as VfCheckbox };
+export { v as VfCheckbox };

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

@@ -13,11 +13,14 @@ declare const VfRadio_base: (new (...args: any[]) => import("../position.js").Vf
  * unselects its siblings.
  *
  * @slot - The label, rendered to the right of the circle with a 6px gap.
+ *   Left empty, the label and its gap collapse: the control is the bare
+ *   13×13 circle.
  * @csspart circle - The 13×13 radio circle.
  * @csspart label - The label wrapper around the slot.
  * @fires vf-change - When selected by user interaction. `detail: { value: string }`.
  */
 export declare class VfRadio extends VfRadio_base {
+    #private;
     static styles: import("lit").CSSResult[];
     /** Whether this radio is selected. Managed by the containing group. */
     checked: boolean;
@@ -30,6 +33,8 @@ export declare class VfRadio extends VfRadio_base {
      * group — not intended to be set by consumers.
      */
     groupDisabled: boolean;
+    /** Whether the slot holds non-whitespace content; gates the label row. */
+    private _hasLabel;
     private readonly internals;
     constructor();
     /**

package/dist/components/vf-radio.js

@@ -9,10 +9,10 @@ import { emit as s } from "../events.js";
 import { RADIO_DOT as c, RADIO_FACE as l, RADIO_RING as u, RADIO_RING_PRESSED as d } from "../glyphs.js";
 import { VfToggleControl as f } from "../toggle-control.js";
 import { LitElement as p, css as m, html as h } from "lit";
-import { property as g } from "lit/decorators.js";
-import { classMap as _ } from "lit/directives/class-map.js";
+import { property as g, state as _ } from "lit/decorators.js";
+import { classMap as v } from "lit/directives/class-map.js";
 //#region src/components/vf-radio.ts
-var v = class extends n(f(p)) {
+var y = class extends n(f(p)) {
 	static {
 		this.styles = [
 			i,
@@ -82,7 +82,7 @@ var v = class extends n(f(p)) {
 		];
 	}
 	constructor() {
-		super(), this.checked = !1, this.disabled = !1, this.value = "", this.groupDisabled = !1, this.internals = this.attachInternals(), this.internals.role = "radio";
+		super(), this.checked = !1, this.disabled = !1, this.value = "", this.groupDisabled = !1, this._hasLabel = !1, this.internals = this.attachInternals(), this.internals.role = "radio";
 	}
 	get toggleInternals() {
 		return this.internals;
@@ -97,7 +97,7 @@ var v = class extends n(f(p)) {
 		let e = this.toggleDisabled;
 		return h`
       <span
-        class=${_({
+        class=${v({
 			circle: !0,
 			dim: e,
 			"vf-snap": !0
@@ -112,14 +112,19 @@ var v = class extends n(f(p)) {
           <path class="dot" d=${c.d}></path>
         </svg>
       </span>
-      <span class=${_({
+      <span class=${v({
 			label: !0,
-			dim: e
+			dim: e,
+			empty: !this._hasLabel
 		})} part="label">
-        <slot></slot>
+        <slot @slotchange=${this.#e}></slot>
       </span>
     `;
 	}
+	#e(e) {
+		let t = e.target;
+		this._hasLabel = t.assignedNodes({ flatten: !0 }).some((e) => e.nodeType === Node.ELEMENT_NODE || !!e.textContent?.trim());
+	}
 	activate() {
 		this.checked || (this.externallyCoordinated || (this.checked = !0), this.focus(), s(this, "vf-change", { value: this.value }));
 	}
@@ -127,9 +132,9 @@ var v = class extends n(f(p)) {
 t([g({
 	type: Boolean,
 	reflect: !0
-})], v.prototype, "checked", void 0), t([g({
+})], y.prototype, "checked", void 0), t([g({
 	type: Boolean,
 	reflect: !0
-})], v.prototype, "disabled", void 0), t([g()], v.prototype, "value", void 0), t([g({ attribute: !1 })], v.prototype, "groupDisabled", void 0), v = t([e("vf-radio")], v);
+})], y.prototype, "disabled", void 0), t([g()], y.prototype, "value", void 0), t([g({ attribute: !1 })], y.prototype, "groupDisabled", void 0), t([_()], y.prototype, "_hasLabel", void 0), y = t([e("vf-radio")], y);
 //#endregion
-export { v as VfRadio };
+export { y as VfRadio };

package/dist/styles/recipes/toggle.js

@@ -27,6 +27,14 @@ var t = e`
   :host(:focus-visible) {
     outline: none;
   }
+  /* An empty slot still generates the label flex item, and the host gap with
+     it — a bare (label-less) control would carry 6px of phantom trailing
+     width. Each control marks the wrapper from its slotchange; display: none
+     removes the item from the gap math. The slot stays in the DOM so content
+     added later still assigns and re-fires slotchange. */
+  .label.empty {
+    display: none;
+  }
   /* Disabled dims the label only; the box/circle glyphs stay solid black. */
   .label.dim {
     color: var(--vf-disabled, #c0c0c0);

package/editor/vscode.html-custom-data.json

@@ -112,7 +112,7 @@
     },
     {
       "name": "vf-checkbox",
-      "description": "The classic System 7 checkbox: a 13×13 white square with a 1px black\nborder whose checked state is the corner-to-corner ✕ glyph — the pixel-exact\ncross traced from the Classic Macintosh UI Kit sprite. The border \"thickens\"\nwhile pressed, exactly like the original control.\n\nForm-associated: submits `value` under `name` when checked (like a native\ncheckbox) and restores its initial checked state on form reset. Toggles on\nclick and Space.\n---\n\n\n### **Events:**\n - **vf-change** - When toggled by user interaction. `detail: { checked: boolean }`.\n- **input** - Native event, dispatched from the host per user toggle (with `change`, the pair a native checkbox fires). A programmatic `checked` set fires nothing, as on a native checkbox.\n- **change** - Native event, dispatched from the host per user toggle so form delegation and framework bindings hear it.\n\n### **Slots:**\n - _default_ - The label, rendered to the right of the box with a 6px gap.\n\n### **CSS Parts:**\n - **box** - The 13×13 checkbox square.\n- **label** - The label wrapper around the slot.",
+      "description": "The classic System 7 checkbox: a 13×13 white square with a 1px black\nborder whose checked state is the corner-to-corner ✕ glyph — the pixel-exact\ncross traced from the Classic Macintosh UI Kit sprite. The border \"thickens\"\nwhile pressed, exactly like the original control.\n\nForm-associated: submits `value` under `name` when checked (like a native\ncheckbox) and restores its initial checked state on form reset. Toggles on\nclick and Space.\n---\n\n\n### **Events:**\n - **vf-change** - When toggled by user interaction. `detail: { checked: boolean }`.\n- **input** - Native event, dispatched from the host per user toggle (with `change`, the pair a native checkbox fires). A programmatic `checked` set fires nothing, as on a native checkbox.\n- **change** - Native event, dispatched from the host per user toggle so form delegation and framework bindings hear it.\n\n### **Slots:**\n - _default_ - The label, rendered to the right of the box with a 6px gap. Left empty, the label and its gap collapse: the control is the bare 13×13 box.\n\n### **CSS Parts:**\n - **box** - The 13×13 checkbox square.\n- **label** - The label wrapper around the slot.",
       "attributes": [
         {
           "name": "checked",
@@ -865,7 +865,7 @@
     },
     {
       "name": "vf-radio",
-      "description": "A single System 7 radio button: a 13×13 white circle with the pixel-exact\n1-bit ring and centered dot traced from the Classic Macintosh UI Kit sprite\n(replacing the anti-aliased `border-radius` rendering). The ring thickens\nwhile pressed, exactly like the original control.\n\nRadios are meant to live inside a `vf-radio-group`, which owns selection\nstate, the form value and the roving tabindex. A `vf-radio` is NOT itself\nform-associated. Clicking (or pressing Space on) an unselected radio\ndispatches `vf-change`; the containing group listens, selects it and\nunselects its siblings.\n---\n\n\n### **Events:**\n - **vf-change** - When selected by user interaction. `detail: { value: string }`.\n\n### **Slots:**\n - _default_ - The label, rendered to the right of the circle with a 6px gap.\n\n### **CSS Parts:**\n - **circle** - The 13×13 radio circle.\n- **label** - The label wrapper around the slot.",
+      "description": "A single System 7 radio button: a 13×13 white circle with the pixel-exact\n1-bit ring and centered dot traced from the Classic Macintosh UI Kit sprite\n(replacing the anti-aliased `border-radius` rendering). The ring thickens\nwhile pressed, exactly like the original control.\n\nRadios are meant to live inside a `vf-radio-group`, which owns selection\nstate, the form value and the roving tabindex. A `vf-radio` is NOT itself\nform-associated. Clicking (or pressing Space on) an unselected radio\ndispatches `vf-change`; the containing group listens, selects it and\nunselects its siblings.\n---\n\n\n### **Events:**\n - **vf-change** - When selected by user interaction. `detail: { value: string }`.\n\n### **Slots:**\n - _default_ - The label, rendered to the right of the circle with a 6px gap. Left empty, the label and its gap collapse: the control is the bare 13×13 circle.\n\n### **CSS Parts:**\n - **circle** - The 13×13 radio circle.\n- **label** - The label wrapper around the slot.",
       "attributes": [
         {
           "name": "checked",

package/editor/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "vintage-frames",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -242,7 +242,7 @@
         },
         {
           "name": "vf-checkbox",
-          "description": "The classic System 7 checkbox: a 13×13 white square with a 1px black\nborder whose checked state is the corner-to-corner ✕ glyph — the pixel-exact\ncross traced from the Classic Macintosh UI Kit sprite. The border \"thickens\"\nwhile pressed, exactly like the original control.\n\nForm-associated: submits `value` under `name` when checked (like a native\ncheckbox) and restores its initial checked state on form reset. Toggles on\nclick and Space.\n---\n\n\n### **Events:**\n - **vf-change** - When toggled by user interaction. `detail: { checked: boolean }`.\n- **input** - Native event, dispatched from the host per user toggle (with `change`, the pair a native checkbox fires). A programmatic `checked` set fires nothing, as on a native checkbox.\n- **change** - Native event, dispatched from the host per user toggle so form delegation and framework bindings hear it.\n\n### **Slots:**\n - _default_ - The label, rendered to the right of the box with a 6px gap.\n\n### **CSS Parts:**\n - **box** - The 13×13 checkbox square.\n- **label** - The label wrapper around the slot.",
+          "description": "The classic System 7 checkbox: a 13×13 white square with a 1px black\nborder whose checked state is the corner-to-corner ✕ glyph — the pixel-exact\ncross traced from the Classic Macintosh UI Kit sprite. The border \"thickens\"\nwhile pressed, exactly like the original control.\n\nForm-associated: submits `value` under `name` when checked (like a native\ncheckbox) and restores its initial checked state on form reset. Toggles on\nclick and Space.\n---\n\n\n### **Events:**\n - **vf-change** - When toggled by user interaction. `detail: { checked: boolean }`.\n- **input** - Native event, dispatched from the host per user toggle (with `change`, the pair a native checkbox fires). A programmatic `checked` set fires nothing, as on a native checkbox.\n- **change** - Native event, dispatched from the host per user toggle so form delegation and framework bindings hear it.\n\n### **Slots:**\n - _default_ - The label, rendered to the right of the box with a 6px gap. Left empty, the label and its gap collapse: the control is the bare 13×13 box.\n\n### **CSS Parts:**\n - **box** - The 13×13 checkbox square.\n- **label** - The label wrapper around the slot.",
           "doc-url": "",
           "attributes": [
             {
@@ -284,7 +284,7 @@
           "slots": [
             {
               "name": "",
-              "description": "The label, rendered to the right of the box with a 6px gap."
+              "description": "The label, rendered to the right of the box with a 6px gap. Left empty, the label and its gap collapse: the control is the bare 13×13 box."
             }
           ],
           "events": [
@@ -2066,7 +2066,7 @@
         },
         {
           "name": "vf-radio",
-          "description": "A single System 7 radio button: a 13×13 white circle with the pixel-exact\n1-bit ring and centered dot traced from the Classic Macintosh UI Kit sprite\n(replacing the anti-aliased `border-radius` rendering). The ring thickens\nwhile pressed, exactly like the original control.\n\nRadios are meant to live inside a `vf-radio-group`, which owns selection\nstate, the form value and the roving tabindex. A `vf-radio` is NOT itself\nform-associated. Clicking (or pressing Space on) an unselected radio\ndispatches `vf-change`; the containing group listens, selects it and\nunselects its siblings.\n---\n\n\n### **Events:**\n - **vf-change** - When selected by user interaction. `detail: { value: string }`.\n\n### **Slots:**\n - _default_ - The label, rendered to the right of the circle with a 6px gap.\n\n### **CSS Parts:**\n - **circle** - The 13×13 radio circle.\n- **label** - The label wrapper around the slot.",
+          "description": "A single System 7 radio button: a 13×13 white circle with the pixel-exact\n1-bit ring and centered dot traced from the Classic Macintosh UI Kit sprite\n(replacing the anti-aliased `border-radius` rendering). The ring thickens\nwhile pressed, exactly like the original control.\n\nRadios are meant to live inside a `vf-radio-group`, which owns selection\nstate, the form value and the roving tabindex. A `vf-radio` is NOT itself\nform-associated. Clicking (or pressing Space on) an unselected radio\ndispatches `vf-change`; the containing group listens, selects it and\nunselects its siblings.\n---\n\n\n### **Events:**\n - **vf-change** - When selected by user interaction. `detail: { value: string }`.\n\n### **Slots:**\n - _default_ - The label, rendered to the right of the circle with a 6px gap. Left empty, the label and its gap collapse: the control is the bare 13×13 circle.\n\n### **CSS Parts:**\n - **circle** - The 13×13 radio circle.\n- **label** - The label wrapper around the slot.",
           "doc-url": "",
           "attributes": [
             {
@@ -2098,7 +2098,7 @@
           "slots": [
             {
               "name": "",
-              "description": "The label, rendered to the right of the circle with a 6px gap."
+              "description": "The label, rendered to the right of the circle with a 6px gap. Left empty, the label and its gap collapse: the control is the bare 13×13 circle."
             }
           ],
           "events": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vintage-frames",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Lit web components that emulate the look and feel of classic Mac OS System 7",
   "type": "module",
   "license": "MIT",