@quillmark/svelte 0.7.3 → 0.9.0

package/dist/core/theme.css

@@ -280,14 +280,19 @@
 	--_qm-reveal: 500ms cubic-bezier(0.4, 0, 0.2, 1);
 
 	/* ── Geometry ──────────────────────────────────────────────────────────*/
-	/* One stroke width for every edge the chrome draws: a card's, a control's,
-	   and the verticals nested inside it alike. A threshold rather than a
-	   rhythm choice, like the tap floor: a hairline is a hairline at any
-	   `--qm-space`, so it does not derive from a dial. It exists as a rung because
-	   the nesting ladder's whole claim is that a card's edge, a section's vertical
-	   and a subform's are one stroke at three depths, and `check:style`'s
-	   border-width axis can only hold that against a token. */
+	/* One stroke width for every edge the chrome draws and every rule it ranks
+	   with: a card's, a control's, the two closing a card's payload. A threshold
+	   rather than a rhythm choice, like the tap floor: a hairline is a hairline at
+	   any `--qm-space`, so neither derives from a dial. Both exist as rungs because
+	   `check:style`'s border-width axis can only hold a stroke against a token. */
 	--_qm-border-width: 1px;
+	/* Half a step over it, for the verticals alone — a section's, a subform's, a
+	   blockquote's. What a vertical states is depth, and depth is the one thing a
+	   reader has to find in a dense card; the strokes that close a block or rank two
+	   stay at the hairline, so the ladder is what carries the extra weight. Half,
+	   because a whole step reads as a different kind of line rather than the same
+	   one doing more work. */
+	--_qm-vertical-width: 1.5px;
 	--_qm-radius: var(--qm-radius, 8px);
 	/* The interior corner, and half is the relationship rather than the number: a
 	   corner inside a corner reads as nested only while it is visibly tighter, and
@@ -324,17 +329,12 @@
 	--_qm-tail: 40vh;
 	/* WCAG 2.5.8's 24x24 pointer-target floor. A rung rather than a sixth step on
 	   the space scale: it is a threshold the spec fixes, not a rhythm choice, so
-	   it does not move when `--qm-space` does. Both button families read it, so the
+	   it does not move when `--qm-space` does. Every button family reads it, so the
 	   floor is one number instead of one expression per control. */
 	--_qm-tap-min: 24px;
-	/* The reorder/delete glyph. A rung because the card header's
-	   right hang is half the difference between this and the tap floor: the glyph
-	   centres in a target sized by the floor, so what stands between it and the
-	   card's gutter is an arithmetic of the two, and a literal on either side is a
-	   balance that silently breaks when the glyph moves. Sized in CSS rather than
-	   through the icon's `size`, so the hang and the glyph read one number. Scoped to
-	   the control pair: the hint and the format marks take their own sizes, and a
-	   rung claiming to be every glyph would be false at three of them. */
+	/* The chrome glyph: a chip's, and the in-well remove's. Sized in CSS rather than
+	   through the icon's `size`, so a stylesheet beats the SVG presentation attribute
+	   and one rung is the whole of what a control draws. */
 	--_qm-glyph-control: 14px;
 
 	/* ── Type ────────────────────────────────────────────────────────────────

package/dist/visual/ArrayField.svelte

@@ -5,7 +5,7 @@
  by `items.type`: `richtext` / `plaintext` → a prose element
  ({@link ProseValue}), `object` → a summary row that opens onto a subform,
  everything else → a text input. The
- add affordance sits in the label header row (space-between with the field label);
+ add chip sits in the label header row (space-between with the field label);
  {@link Field} skips its own label for array controls and hands this component the
  label track with it.
 
@@ -352,7 +352,7 @@
 		{/if}
 		<button
 			type="button"
-			class="qm-add-el qm-add-affordance qm-tap-floor"
+			class="qm-add-el qm-chip qm-focus-ring qm-tap-floor"
 			bind:this={addEl}
 			onclick={add}>{t.strings.arrayAdd}</button
 		>
@@ -442,10 +442,9 @@
 		gap: var(--_qm-space);
 	}
 	/* The array's first line is the row's label line: this component owns the label
-	 track (Field.svelte), so the header has to measure what a `.qm-field-label-row`
-	 measures or an array shares a row with a scalar and their labels sit apart. The
-	 label is the same component; what had to give was the add affordance's height,
-	 below. */
+	 track (Field.svelte). Arrays never pack (`packable`), so the chip's tap floor is
+	 free to size the header; a caption on this line would have had to match
+	 `.qm-field-label-row`. */
 	.qm-array-header {
 		display: flex;
 		align-items: center;
@@ -584,29 +583,22 @@
 		color: var(--_qm-ink-label);
 		font-style: italic;
 	}
-	/* It rests dim and comes up on hover of the field rather than of itself: one trigger
-	 at the head of a row of controls is found by looking at the array, not by grazing its
-	 first line.
-
-	 The box is the label's line box and the target is `.qm-tap-floor`'s (controls.css): a
-	 target-sized box would stand the header 8px taller than the `.qm-field-label-row`
-	 beside it in a shared row and put the two labels on different lines.
-
-	 The label rung in place of the family's body rung, which the family invites: it reads
-	 as one more thing on the label line rather than as a control from the row below. */
+	/* The label line's own type: size, weight and leading are `.qm-field-label`'s, so
+	 the two read as one register. Inner radius: the chip family is the card's, and this
+	 box is a line of type. The chip's tap floor is given back (`.qm-tap-floor`),
+	 and the padding with it, so the drawn box is the line and the target is the floor.
+	 It rests dim and comes up under the pointer; empty, it is the way in. */
 	.qm-add-el {
 		padding: 0 var(--_qm-space);
-		font-size: var(--_qm-text-label);
+		font-weight: var(--_qm-weight-mid);
+		line-height: var(--_qm-leading-tight);
+		border-radius: var(--_qm-radius-inner);
 		opacity: var(--_qm-opacity-idle);
 	}
-	.qm-array:hover .qm-add-el,
+	.qm-add-el:hover,
 	.qm-add-el:focus-visible {
 		opacity: 1;
 	}
-	/* Empty, the rows box is `display: none` and the field is a label and this trigger:
-	   nothing left for it to compete with, and nothing else in the field to act on. So
-	   it rests full-strength there and takes the recede back once it heads a list. A
-	   receded trigger beside no content reads as a caption rather than as a way in. */
 	.qm-array.empty .qm-add-el {
 		opacity: 1;
 	}

package/dist/visual/BooleanField.svelte

@@ -38,7 +38,7 @@
 
 <span class="qm-switch-wrap">
 	<Switch.Root
-		class="qm-switch qm-focus-ring"
+		class="qm-switch qm-focus-ring qm-tap-floor"
 		checked={local.value}
 		{id}
 		aria-label={id ? undefined : label}
@@ -55,6 +55,11 @@
 <style>
 	/* A primitive renders its own element, which a scoped selector cannot reach:
 	 styled through the wrapper with `:global`. */
+	/* The track is the drawn box and the target is `.qm-tap-floor`'s (controls.css): a
+	 switch is a mark standing in a field's row, so its height is the track's, where WCAG
+	 2.5.8's floor is half again that. The `<label for>` beside it forwards a press but
+	 stands at the label rung, so it is no taller: without the floor no region on the
+	 surface reaches this control at the size every other control on it holds. */
 	.qm-switch-wrap :global(.qm-switch) {
 		display: inline-flex;
 		align-items: center;

package/dist/visual/Card.svelte

@@ -408,33 +408,54 @@
 
 <style>
 	/* An island: the card is the base plane, the column behind it the sunken one, and the
-	 hairline closes it (ARCHITECTURE §Styling). The inset is the same rung as the gap, so
-	 what separates the header from the fields is what separates the fields from the
-	 card's edge. The inline half reads `--_qm-nest` at that same number: this edge is the
-	 nesting ladder's first stroke, and its inset the first step. */
+	 hairline closes it (ARCHITECTURE §Styling). The block half is the same rung as the
+	 gap: the payload stands that far off the card's edge and off the body below it. The
+	 header insets itself to the section-heading column (`.qm-card-header`). The inline
+	 half stands a step tighter than the nesting rung the verticals inside keep: this
+	 edge closes the block rather than nesting one, and the rules it holds run that much
+	 further for it. */
 	.qm-card {
 		border: var(--_qm-border-width) solid var(--_qm-border);
 		border-radius: var(--_qm-radius);
-		padding: var(--_qm-space-3) var(--_qm-nest);
+		padding: var(--_qm-space-3) var(--_qm-space-2);
 		background: var(--_qm-surface);
 		display: flex;
 		flex-direction: column;
 		gap: var(--_qm-space-3);
 	}
+	/* Headerless, the payload faces that edge with nothing between. A field row
+	 leading it stands the edge's own inset off the top, as it does off the side:
+	 this rung plus the section's block padding is the inline inset. A card that
+	 opens on its body keeps the full inset — prose is neither a heading nor a
+	 field row. */
+	.qm-card.qm-main:has(> .qm-card-body > .qm-card-meta:first-child) {
+		padding-top: var(--_qm-space);
+	}
+	/* A section heading leading it: the vertical starts at the content's
+	 top-left, so the top inset is the inline one and the tip is a square
+	 corner of the card. */
+	.qm-card.qm-main:has(> .qm-card-body > .qm-card-meta:first-child > .qm-groups:first-child) {
+		padding-top: var(--_qm-space-2);
+	}
 	.qm-card-header {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 		gap: var(--_qm-space-2);
+		/* The group's vertical plus the rung the chevron stands off it: the title
+		 shares that column. Inline only. The block pull is half the card's block
+		 inset, so the header sits that far off the hairline and the rule. */
+		padding-inline: calc(var(--_qm-space) + var(--_qm-vertical-width));
+		margin-block: calc(-1 * var(--_qm-space-3) / 2);
 	}
-	/* The overhang is the tap target's own centring given back, so the glyphs sit on the
-	 card's gutter rather than the targets around them. It is the fill that crosses the
-	 line, not a box: an icon button rests unboxed and fills only under the pointer. */
 	.qm-card-header-right {
 		display: flex;
 		align-items: center;
 		gap: var(--_qm-space-2);
-		margin-right: calc(-1 * (var(--_qm-tap-min) - var(--_qm-glyph-control)) / 2);
+		/* The overhang is the tap target's own centring given back, so the delete
+		 glyph sits on the header's inset rather than the pad around it. The fill is
+		 what crosses the line. */
+		margin-inline-end: calc(-1 * (var(--_qm-tap-min) - var(--_qm-glyph-control)) / 2);
 	}
 	/* Focus as well as hover, so a caret in any leaf, the title, or a chevron holds the
 	 reveal: hover alone would strand the pair on keyboard and touch. */
@@ -445,7 +466,7 @@
 	/* The rename hit region is the header's free width at full height, so a press
 	 anywhere left of the controls enters the title edit. `align-self: stretch` beats the
 	 header's centring, which is also what keeps the target legal with no padding: WCAG
-	 2.5.8's floor is the row's, which the controls hold at `--_qm-tap-min`. */
+	 2.5.8's floor is the row's, which the chips hold at `--_qm-tap-min`. */
 	.qm-card-rename {
 		flex: 1;
 		min-width: 0;
@@ -504,24 +525,21 @@
 		flex-direction: column;
 		gap: var(--_qm-space-3);
 	}
-	/* Where two sections meet the distance is three of one rung — the cap closing the one
-	 above, this gap, the cap opening the one below — the same whether either side is a
-	 group or the ungrouped block. That total is what the fields inside a section keep
-	 between their rows (`.qm-fields` row-gap), so a section boundary stands no further
-	 apart than a field boundary: what ranks them is the stroke, not the air. */
 	.qm-card-meta,
 	.qm-groups {
 		display: flex;
 		flex-direction: column;
-		gap: var(--_qm-space);
 	}
-	/* One rung in two places: what a rule insets its own edge by, and what a vertical
-	 reaches past the box it is drawn on. `--_qm-nest` is the distance a stroke stands off
-	 the content it holds — the same one the fields keep off the vertical inline — and a
-	 section's box already spends `--_qm-space` of it capping its own ends, so both spend
-	 the difference. That is what squares the corner: the field stands the same rung off
-	 the rule above it as off the vertical beside it. */
+	/* One rung between the payload's two kinds of section, and none inside the accordion:
+	 what stands one disclosure row off the next is the two headers' own block padding and
+	 nothing else, so the rows tile and their targets with them. A run of one-line rows
+	 wants the tighter rhythm — the `--_qm-space-3` the fields keep between their own rows
+	 is calibrated for a label over a well, and reads as a float between two lines of text.
+
+	 `--stroke-reach` is what a box standing a field row off a rule has left to spend: the
+	 rung is `--_qm-nest`, of which its own block padding is already `--_qm-space`. */
 	.qm-card-meta {
+		gap: var(--_qm-space);
 		--stroke-reach: calc(var(--_qm-nest) - var(--_qm-space));
 	}
 	/* The card's two horizontals, and ranking is the one thing a horizontal is for: they
@@ -530,27 +548,35 @@
 	 conditional on what it ranks against: `main` is headerless, and a card with no body
 	 has nothing under the payload to divide it from.
 
-	 The inset is the rule's own, so it goes with it: a card drawing one horizontal insets
-	 that end and not the other. The air outside the pair is the `--_qm-space-3` the card
-	 spends between its blocks. */
+	 Neither insets: a rule is drawn on the edge of the box it faces, and the air is that
+	 box's own. So the section carries what its ink stands off a rule — the inset of the
+	 ink facing it, which is what squares the corner: `--_qm-nest` for a field row,
+	 `--_qm-space` for a heading, each the rung that ink stands off a vertical inline. The
+	 air outside the pair is the `--_qm-space-3` the card spends between its blocks. */
 	.qm-meta-top {
 		border-top: var(--_qm-border-width) solid var(--_qm-border);
-		padding-top: var(--stroke-reach);
 	}
 	.qm-meta-bottom {
 		border-bottom: var(--_qm-border-width) solid var(--_qm-border);
-		padding-bottom: var(--stroke-reach);
 	}
-	/* A section's share of the boundary between sections: one rung at each end, so two of
-	 them stand three of it apart whichever kind they are (above). The accordion spends the
-	 same rung from its header and its panel, where it also caps the vertical those two
-	 edges hold.
+	/* A section's share of the boundary between sections, one rung at each end. The
+	 accordion spends the same rung from its header and its panel, where it also caps the
+	 vertical those two edges hold.
 
-	 No stroke and no inset: fields declaring no `ui.group` are the card's own, at the rank
-	 its body is at, and the card's edge is the only container there is to state. A
-	 vertical here would mark a section a reader has no name for. */
+	 No stroke: a vertical would mark a section a reader has no name for. The start
+	 inset is the heading's — the group's vertical plus the rung the chevron stands
+	 off it — so a top-level field and a section heading share a column. */
 	.qm-section {
 		padding-block: var(--_qm-space);
+		padding-inline-start: calc(var(--_qm-space) + var(--_qm-vertical-width));
+	}
+	/* Where it faces a rule, the rung a heading already stands off one. The fields
+	 sit on the heading column, not the card's edge. */
+	.qm-meta-top > .qm-section:first-child {
+		padding-top: var(--_qm-space-2);
+	}
+	.qm-meta-bottom > .qm-section:last-child {
+		padding-bottom: var(--_qm-space-2);
 	}
 	/* Two query containers, one per kind of section, so capacity follows the width the
 	 fields actually get: a panel's inset makes that narrower than the card. */
@@ -597,47 +623,72 @@
 	 than absent, so a toggle moves no text — and closed, there is nothing under the header
 	 for it to gather.
 
-	 The stroke caps at `--_qm-nest`, at both ends and on every section alike. Its box
-	 already spends `--_qm-space` of that — the header's block padding above, the panel's
-	 below, the rung the ungrouped section spends on its own two ends — so the rest is
-	 grown here and handed straight back as margin: the stroke lengthens, and a section
-	 boundary keeps the three rungs it stood at. What the stroke reaches into is the air of
-	 that boundary, or, where the section is the payload's first or last, exactly the inset
-	 its rule took — so it lands on the rule at a corner with nothing drawn longer for it.
+	 A free end of the stroke caps at `--_qm-space`, the rung the subform's own vertical
+	 caps at (`ObjectField`), grown as padding and handed straight back as margin so the
+	 stroke lengthens and no boundary moves. Above, that is also the rung the header stands
+	 off it, so the top end is the same number whether it caps free or lands on a rule.
 	 One section open at a time, so no two strokes are ever visible to meet in between. */
 	.qm-group {
 		display: flex;
 		flex-direction: column;
-		border-left: var(--_qm-border-width) solid transparent;
-		padding-block: var(--stroke-reach);
-		margin-block: calc(-1 * var(--stroke-reach));
-		transition: border-color var(--_qm-duration-slow) var(--_qm-ease-reverse);
-	}
+		border-left: var(--_qm-vertical-width) solid transparent;
+		padding-bottom: var(--_qm-space);
+		margin-bottom: calc(-1 * var(--_qm-space));
+		transition:
+			border-color var(--_qm-duration-slow) var(--_qm-ease-reverse),
+			padding-bottom var(--_qm-duration-slow) var(--_qm-ease-reverse),
+			margin-bottom var(--_qm-duration-slow) var(--_qm-ease-reverse);
+	}
+	/* Open, the cap is air as well as stroke: a section ending on a field row stands the
+	 longer rung off what follows, and three of `--_qm-space` are what that comes to — the
+	 panel's own, this cap, and the next header's. Shut, a section ends on its header and
+	 stands the header's rung, so there is nothing to cap and the padding is handed back. */
 	.qm-group.qm-open {
 		border-left-color: var(--_qm-border);
+		margin-bottom: 0;
+	}
+	/* The one end that lands on a rule, where the padding is real and the rule is this
+	 box's own bottom edge — so the stroke ends on the rule at every frame of a fold rather
+	 than at the two ends of one, and the fields inside stand `--_qm-nest` off it. Shut,
+	 the box ends on the header's block padding and the rule takes the heading's rung
+	 there, the same one the rule above it takes. */
+	.qm-meta-bottom > .qm-groups:last-child > .qm-group:last-child {
+		padding-bottom: 0;
+		margin-bottom: 0;
+	}
+	.qm-meta-bottom > .qm-groups:last-child > .qm-group:last-child.qm-open {
+		padding-bottom: var(--stroke-reach);
 	}
-	/* Symmetric vertical padding at the tightest rung that still clears WCAG 2.5.8's
-	 24×24 floor: the header is the whole row, so adjacent labels share one rhythm with no
-	 dead strip outside the button. Horizontal is the nesting step left and zero right —
-	 left, because the chevron opening the heading starts where the fields under it start,
-	 so everything the section holds stands off its vertical by one rung and the corner the
-	 stroke closes against a rule reads square; right, because the row is the target and an
-	 inset there is target given back. What the glyph gives up by taking the step is the
-	 gutter: at a tighter rung it stands in the clearance itself, with only its own bearing
-	 between ink and stroke, and the rotation swaps which bearing faces which.
+	/* One rung on three sides and zero on the end, the end because the row is the target
+	 and an inset there is target given back. The rung is `--_qm-space` in both axes, and
+	 neither is free: the block padding is the tightest that still clears WCAG 2.5.8's
+	 24×24 floor, and it is the whole air a heading opening the payload keeps under its
+	 rule, which a rule cannot inset past — so the inline inset is that same number or the
+	 corner is square on one axis alone. The heading rides the vertical there, one
+	 nesting step out from the fields under it, which is what states that it holds them.
+	 What the glyph gives up for the step is the gutter: it stands in the clearance itself,
+	 with only its own bearing between ink and stroke, and the rotation swaps which bearing
+	 faces which.
 
 	 `font: inherit` because a UA button inherits no face, then the body rung, one step
 	 over the field labels beneath it: at the label rung the two read as one register and
 	 the accordion stops looking like structure. Size, weight and leading sit after
 	 `font`, a shorthand that carries `line-height`. */
 	.qm-group-header {
+		/* Positioned, and paint is not what it buys: a group's box grows by
+		 `--stroke-reach` at both ends and hands the growth back as margin, so
+		 consecutive boxes overlap in a band at every seam, and a closed group's header
+		 ends inside the next group's box. In flow, the later sibling takes the presses
+		 that land in the band and the bottom of the header is a dead strip; positioned,
+		 the control holds its own box, and the band paints the same either way. */
+		position: relative;
 		display: flex;
 		align-items: center;
 		gap: var(--_qm-space);
 		width: 100%;
 		border: none;
 		background: transparent;
-		padding: var(--_qm-space) 0 var(--_qm-space) var(--_qm-nest);
+		padding: var(--_qm-space) 0 var(--_qm-space) var(--_qm-space);
 		font: inherit;
 		font-size: var(--_qm-text-body);
 		font-weight: var(--_qm-weight-mid);
@@ -672,11 +723,13 @@
 	.qm-group.qm-open .qm-group-panel {
 		grid-template-rows: 1fr;
 	}
-	/* The track is the accordion's only stroke that moves layout, and a reveal's landing
-	 measures its target one flush after asking — where an animating track still reads its
-	 start value. Both panels of the move are inside the group box, so the opening one and
-	 the closing one above it stand still together (`revealLeaf`). */
-	.qm-groups.qm-instant .qm-group-panel {
+	/* What a toggle moves is the panel's track, and the box's own bottom edge where the
+	 last section is the one toggling. A reveal's landing measures its target one flush
+	 after asking — where either, mid-flight, still reads its start value — so nothing
+	 about the accordion animates for it. Both panels of the move are inside the group box,
+	 so the opening one and the closing one above it stand still together (`revealLeaf`). */
+	.qm-groups.qm-instant .qm-group-panel,
+	.qm-groups.qm-instant .qm-group {
 		transition: none;
 	}
 	/* Two boxes because the axes clip differently, and the track is the only thing that

package/dist/visual/CardControls.svelte

@@ -1,12 +1,11 @@
 <!--
   Card controls, composable cards only.
   Right-aligned in the header: a move-up/move-down chevron pair revealed while the
-  pointer or the caret is in the card (each disabled at its edge), then an
-  always-visible delete. Reorder is buttons, not drag (V1). The card scopes that
-  reveal, so its condition lives in the parent's CSS; the pair keeps the narrower
-  guarantee here, that a focused chevron is a visible one. The card also hangs this
-  cluster to land these glyphs on its right gutter, and reads `--_qm-glyph-control`
-  to do it: the size is the stylesheet's below, never an attribute.
+  pointer or the caret is in the card (each disabled at its edge), then delete.
+  Reorder is buttons, not drag (V1). All three are chips (controls.css): fill arrives
+  on hover, and delete rests faded danger, full under the pointer. The card scopes
+  that reveal, so its condition lives in the parent's CSS; the pair keeps the narrower
+  guarantee here, that a focused chevron is a visible one.
 -->
 <script lang="ts">
 	import { wording } from './strings.js';
@@ -31,14 +30,14 @@
 	<div class="qm-card-reorder">
 		<button
 			type="button"
-			class="qm-icon-btn"
+			class="qm-chip qm-focus-ring"
 			title={t.strings.cardMoveUp}
 			disabled={isFirst}
 			onclick={onMoveUp}><Icon name="chevron-up" /></button
 		>
 		<button
 			type="button"
-			class="qm-icon-btn"
+			class="qm-chip qm-focus-ring"
 			title={t.strings.cardMoveDown}
 			disabled={isLast}
 			onclick={onMoveDown}><Icon name="chevron-down" /></button
@@ -46,9 +45,9 @@
 	</div>
 	<button
 		type="button"
-		class="qm-icon-btn qm-card-delete"
+		class="qm-chip qm-card-delete qm-focus-ring"
 		title={t.strings.cardDelete}
-		onclick={onDelete}><Icon name="x" /></button
+		onclick={onDelete}><Icon name="trash-2" /></button
 	>
 </div>
 
@@ -56,20 +55,14 @@
 	.qm-card-controls {
 		display: flex;
 		align-items: center;
-		gap: var(--_qm-space);
-	}
-	/* The glyph rung in CSS rather than through the icon's `size`, because the card
-	 header's right hang is arithmetic over this number and the tap floor: an
-	 attribute set in the script is a second place the size lives, and the balance
-	 breaks silently when the two disagree. A stylesheet beats an SVG presentation
-	 attribute, so the rung wins without the attribute being removed from the icon. */
-	.qm-card-controls :global(svg) {
-		width: var(--_qm-glyph-control);
-		height: var(--_qm-glyph-control);
+		gap: var(--_qm-space-half);
+		/* One compositor layer for the row. Opacity on the pair otherwise snaps
+		   that box off the header's half-pixel, against delete which never leaves
+		   the document paint. */
+		transform: translateZ(0);
 	}
 	.qm-card-reorder {
 		display: flex;
-		gap: var(--_qm-space-half);
 		opacity: 0;
 		transition: opacity var(--_qm-duration-fast) var(--_qm-ease-reverse);
 	}
@@ -80,13 +73,25 @@
 	.qm-card-reorder:focus-within {
 		opacity: 1;
 	}
-	/* Box and disabled state come from `.qm-icon-btn` (controls.css); only the ink
-	 is this component's: the reorder pair recedes to the label tone, delete
-	 carries the danger hue (scoped, so both beat the layered base). */
-	.qm-icon-btn {
-		color: var(--_qm-ink-label);
+	/* Squares: the chip's inline pad is for a label. Width and height are one rung
+	 so the hover fill is a square and the glyph sits in the middle. */
+	.qm-card-controls button {
+		width: var(--_qm-tap-min);
+		height: var(--_qm-tap-min);
+		padding: 0;
 	}
+	/* Hover fill comes from `.qm-chip` (controls.css). Idle recede is on the ink,
+	 not the box: a layer on the chip is two rasters of the same stroke, and the
+	 fill has to stay opaque. Danger mixed to the idle rung; full under the pointer. */
 	.qm-card-delete {
+		color: color-mix(
+			in oklab,
+			var(--_qm-danger) calc(100% * var(--_qm-opacity-idle)),
+			var(--_qm-surface)
+		);
+	}
+	.qm-card-delete:hover,
+	.qm-card-delete:focus-visible {
 		color: var(--_qm-danger);
 	}
 </style>

package/dist/visual/EnumField.svelte

@@ -104,8 +104,8 @@
 			aria-describedby={describedBy}
 			data-ghosted={unset ? '' : undefined}
 		>
-			{shown}
-			<Icon name="chevron-down" size={14} />
+			<span class="qm-select-shown">{shown}</span>
+			<Icon name="chevron-down" class="qm-select-chevron" size={14} />
 		</Select.Trigger>
 		<Select.Portal to={portalTarget}>
 			<Select.Content collisionBoundary={portalTarget ?? []} sideOffset={4}>
@@ -176,6 +176,21 @@
 		text-align: left;
 		cursor: pointer;
 	}
+	/* The value is one line however long it runs, and the glyph beside it keeps its rung:
+	   the box is an inset plus one line box (controls.css), which a value that wraps
+	   stands two lines tall, and a flex glyph with nothing holding it gives its width up
+	   to the text first and is gone by the time the row is tight. The pair is the same
+	   guard the element summary takes over its own title, and `min-width` is the half
+	   that lets the text shrink at all. */
+	.qm-select-shown {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.qm-select-wrap :global(.qm-select-chevron) {
+		flex-shrink: 0;
+	}
 	/* The focus ring rides `.qm-focus-ring` on the trigger (controls.css). */
 	/* Shown-never-written: the closed control reads muted while unset, matching the
 	   ghosted placeholder the text/number controls show. */

package/dist/visual/ObjectField.svelte

@@ -260,7 +260,7 @@
 		display: grid;
 		grid-template-columns: repeat(var(--cols), 1fr);
 		gap: var(--_qm-space-2);
-		border-inline-start: var(--_qm-border-width) solid var(--_qm-border);
+		border-inline-start: var(--_qm-vertical-width) solid var(--_qm-border);
 		padding-inline-start: var(--_qm-nest);
 		padding-block: var(--_qm-space);
 	}