@stonecrop/aform 0.34.0 → 0.35.0

package/dist/assets/index.css

@@ -1,54 +1,57 @@
 
-.aform_checkbox[data-v-ca06741d] {
+.aform_checkbox[data-v-f28e7db6] {
 	cursor: pointer;
 	width: auto;
 	margin-top: 0;
 	display: block;
 }
-.aform_checkbox[data-v-ca06741d]:checked {
+.aform_checkbox[data-v-f28e7db6]:checked {
 	accent-color: var(--sc-primary-color);
-	border: 1px solid black;
+	border: 1px solid var(--sc-input-active-border-color);
 }
-.aform_checkbox-container[data-v-ca06741d] {
+.aform_checkbox-container[data-v-f28e7db6] {
 	width: 100%;
 	display: inline-block;
 	text-align: left;
 }
-.aform_checkbox-container input[data-v-ca06741d] {
+.aform_checkbox-container input[data-v-f28e7db6] {
 	width: auto;
 }
-.aform_checkbox-container:hover + .aform_field-label[data-v-ca06741d] {
+.aform_form-element:has(> .aform_checkbox-container:hover) > .aform_field-label[data-v-f28e7db6] {
 	color: var(--sc-input-active-label-color);
 }
 
-.aform_form-link-wrapper[data-v-91a761d0] {
+.aform_form-link-wrapper[data-v-07d20e9b] {
 	position: relative;
 }
-.input-group[data-v-91a761d0] {
+.input-group[data-v-07d20e9b] {
 	display: flex;
 	align-items: stretch;
 }
-.aform_input-field[data-v-91a761d0] {
+.aform_input-field[data-v-07d20e9b] {
 	flex: 1;
 	min-width: 0;
 }
-.aform_form-element--embedded[data-v-91a761d0] {
+
+/* No top padding: the shared rule reserves it for a floating label, which embedded mode never renders. */
+.aform_form-element--embedded[data-v-07d20e9b] {
 	min-width: 0;
 	flex-grow: 0;
+	padding-top: 0;
 }
 
-/* Embedded mode: the host component's own container supplies the border, so this input
-   goes borderless and inherits the host's padding scale instead of the standalone default. */
-.aform_input-field--embedded[data-v-91a761d0] {
+/* Embedded mode: the host component's own container supplies the border, so this input goes
+   borderless. Its vertical padding stays the standalone field's, so its text lines up with the host's. */
+.aform_input-field--embedded[data-v-07d20e9b] {
 	outline: none;
 	background: transparent;
-	padding: 0.5ch 1ch;
+	padding: 0.5rem 1ch;
 }
 
 /* Only in embedded mode is the trigger deliberately narrower than its options (e.g. a currency
    symbol box): let the dropdown grow past it rather than truncate. Standalone pickers keep the
    dropdown flush with the input, so a long display text can't overhang a narrow form column. */
-.aform_form-element--embedded .autocomplete-results[data-v-91a761d0] {
+.aform_form-element--embedded .autocomplete-results[data-v-07d20e9b] {
 	min-width: 100%;
 	width: max-content;
 }
@@ -56,21 +59,51 @@
 /* Give the button the same outline as the input, then slide it 2px left so the outlines
    overlap exactly at the join: input right outline sits at (input_right - 1px),
    button left outline also sits at (button_left + 1px) = (input_right - 2px + 1px) = same pixel. */
-.aform_form-btn[data-v-91a761d0] {
+.aform_form-btn[data-v-07d20e9b] {
 	appearance: none;
 	border: none;
 	outline: 1px solid var(--sc-input-border-color);
 	outline-offset: -1px;
 	margin-left: -2px;
 	background: var(--sc-input-field-background);
-	padding: 0 0.75rem;
+	padding: 0.5rem 0.75rem;
 	cursor: pointer;
+	display: block;
+	font-size: 1rem;
+	line-height: normal;
+	font-family: var(--sc-font-family);
+	color: var(--sc-cell-text-color);
+}
+
+/* Drawn rather than a text glyph, but set on the text's baseline at capital height: text sits
+   above its box's centre, so an icon centred in the box reads low beside the input's text. */
+.aform_form-btn-icon[data-v-07d20e9b] {
+	height: 0.716em;
+	width: auto;
+	vertical-align: baseline;
+	overflow: visible;
+	fill: none;
+	stroke: currentColor;
+	stroke-width: 1.5;
+	stroke-linecap: round;
+	stroke-linejoin: round;
 }
-.aform_form-btn[data-v-91a761d0]:focus,
-.input-group:focus-within .aform_form-btn[data-v-91a761d0] {
+
+/* The glyph stays as the button's spoken name, hidden from sight. */
+.aform_form-btn-name[data-v-07d20e9b] {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+}
+.aform_form-btn[data-v-07d20e9b]:focus,
+.input-group:focus-within .aform_form-btn[data-v-07d20e9b] {
 	outline-color: var(--sc-input-active-border-color);
 }
-.autocomplete-results[data-v-91a761d0] {
+.autocomplete-results[data-v-07d20e9b] {
 	position: absolute;
 	width: 100%;
 	z-index: 100;
@@ -79,47 +112,48 @@
 	list-style: none;
 	border: 1px solid var(--sc-input-active-border-color);
 	border-top: none;
-	border-radius: 0 0 0.25rem 0.25rem;
-	background: #fff;
+	border-radius: 0 0 var(--sc-border-radius) var(--sc-border-radius);
+	background: var(--sc-overlay-background);
 }
-.autocomplete-result[data-v-91a761d0] {
+.autocomplete-result[data-v-07d20e9b] {
 	padding: 4px 6px;
 	cursor: pointer;
-	border-bottom: 0.5px solid lightgray;
+	border-bottom: 0.5px solid var(--sc-input-border-color);
 }
-.autocomplete-result.is-active[data-v-91a761d0],
-.autocomplete-result[data-v-91a761d0]:hover {
+.autocomplete-result.is-active[data-v-07d20e9b],
+.autocomplete-result[data-v-07d20e9b]:hover {
 	background-color: var(--sc-row-color-zebra-light);
 	color: var(--sc-input-active-border-color);
 }
 
-.acurrency__row[data-v-77852830] {
+.acurrency__row[data-v-f61b058f] {
 	display: flex;
 	gap: 1ch;
 }
-.acurrency__row--base[data-v-77852830] {
+.acurrency__row--base[data-v-f61b058f] {
 	margin-top: 1.5rem;
 }
-.acurrency__field[data-v-77852830] {
+.acurrency__field[data-v-f61b058f] {
 	position: relative;
 	flex: 1;
 	min-width: 0;
 }
-.acurrency__group[data-v-77852830] {
+.acurrency__group[data-v-f61b058f] {
 	display: flex;
 	align-items: stretch;
 	width: 100%;
+	background: var(--sc-input-field-background);
 	border: 1px solid var(--sc-input-border-color);
-	border-radius: 0.25rem;
+	border-radius: var(--sc-border-radius);
 }
-.acurrency__group[data-v-77852830]:focus-within {
+.acurrency__group[data-v-f61b058f]:focus-within {
 	border-color: var(--sc-input-active-border-color);
 }
 
 /* Wraps just the amount input so its floating label (`left: 10px` of the nearest
    `position: relative` ancestor, per .aform_field-label) anchors above the amount box
    specifically, not the group's outer left edge — which is now the currency prefix. */
-.acurrency__amount-wrap[data-v-77852830] {
+.acurrency__amount-wrap[data-v-f61b058f] {
 	position: relative;
 	flex: 1;
 	min-width: 0;
@@ -127,23 +161,31 @@
 
 /* The amount label ("Total") is the primary label for the whole merged group — bumped up
    slightly from the shared .aform_field-label size so it reads as the group's main label. */
-.acurrency__amount-wrap .aform_field-label[data-v-77852830] {
+.acurrency__amount-wrap .aform_field-label[data-v-f61b058f] {
 	font-size: 0.85rem;
 }
-.acurrency__amount[data-v-77852830] {
+
+/* The label names the whole group, so focus on the currency picker darkens it too. */
+.acurrency__group:focus-within .acurrency__amount-wrap > .aform_field-label[data-v-f61b058f] {
+	color: var(--sc-input-active-label-color);
+}
+.acurrency__amount[data-v-f61b058f] {
 	width: 100%;
 	box-sizing: border-box;
 	border: none;
 	outline: none;
-	padding: 0.5ch 1ch;
+	padding: 0.5rem 1ch;
+	font-size: 1rem;
+	font-family: var(--sc-font-family);
+	color: var(--sc-cell-text-color);
 	background: transparent;
-	border-radius: 0 0.25rem 0.25rem 0;
+	border-radius: 0 var(--sc-border-radius) var(--sc-border-radius) 0;
 	text-align: right;
 	appearance: textfield;
 	-moz-appearance: textfield;
 }
-.acurrency__amount[data-v-77852830]::-webkit-outer-spin-button,
-.acurrency__amount[data-v-77852830]::-webkit-inner-spin-button {
+.acurrency__amount[data-v-f61b058f]::-webkit-outer-spin-button,
+.acurrency__amount[data-v-f61b058f]::-webkit-inner-spin-button {
 	appearance: none;
 	-webkit-appearance: none;
 	margin: 0;
@@ -154,47 +196,47 @@
    picked, not the full name), tinted background, left-rounded to match the group's own
    corner so the tint doesn't overhang the border. The dropdown itself isn't bound by this
    width — see AFormLink's .autocomplete-results — so search results still show full names. */
-.acurrency__currency[data-v-77852830] {
+.acurrency__currency[data-v-f61b058f] {
 	position: relative;
 	flex: 0 0 auto;
 	min-width: 4.5rem;
-	background: var(--sc-gray-5);
+	background: var(--sc-input-addon-background);
 	border-right: 1px solid var(--sc-input-border-color);
-	border-radius: 0.25rem 0 0 0.25rem;
+	border-radius: var(--sc-border-radius) 0 0 var(--sc-border-radius);
 }
-.acurrency__base-field[data-v-77852830] {
+.acurrency__base-field[data-v-f61b058f] {
 	width: 100%;
 	box-sizing: border-box;
 	font-size: 1rem;
-	padding: 0.5ch 1ch;
+	padding: 0.5rem 1ch;
 	border: 1px solid var(--sc-input-border-color);
-	border-radius: 0.25rem;
+	border-radius: var(--sc-border-radius);
 	outline: none;
 	appearance: textfield;
 	-moz-appearance: textfield;
 }
-.acurrency__base-field[data-v-77852830]:disabled {
+.acurrency__base-field[data-v-f61b058f]:disabled {
 	color: var(--sc-gray-50);
 }
 
 /* Base Amount and Exchange Rate are read-only — the number spinner offers nothing here. */
-.acurrency__base-field[data-v-77852830]::-webkit-outer-spin-button,
-.acurrency__base-field[data-v-77852830]::-webkit-inner-spin-button {
+.acurrency__base-field[data-v-f61b058f]::-webkit-outer-spin-button,
+.acurrency__base-field[data-v-f61b058f]::-webkit-inner-spin-button {
 	appearance: none;
 	-webkit-appearance: none;
 	margin: 0;
 }
 
-.adatepicker[data-v-ef698187],
-.adatepicker table[data-v-ef698187],
-.adatepicker tr[data-v-ef698187],
-.adatepicker td[data-v-ef698187],
-.adatepicker th[data-v-ef698187] {
+.adatepicker[data-v-e22e44d1],
+.adatepicker table[data-v-e22e44d1],
+.adatepicker tr[data-v-e22e44d1],
+.adatepicker td[data-v-e22e44d1],
+.adatepicker th[data-v-e22e44d1] {
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	user-select: none;
 }
-.adatepicker[data-v-ef698187] {
+.adatepicker[data-v-e22e44d1] {
 	font-size: var(--sc-table-font-size);
 	display: inline-table;
 	color: var(--sc-cell-text-color);
@@ -203,24 +245,24 @@
 	margin-bottom: 10px;
 	/* width: calc(100% - 4px); */
 }
-.adatepicker tr[data-v-ef698187] {
+.adatepicker tr[data-v-e22e44d1] {
 	height: 1.15rem;
 	height: 1.15rem;
 	text-align: center;
 	vertical-align: middle;
 }
-.adatepicker td[data-v-ef698187] {
+.adatepicker td[data-v-e22e44d1] {
 	border: 2px solid transparent;
 	outline: 2px solid transparent;
 	min-width: 3ch;
 	max-width: 3ch;
 	cursor: pointer;
 }
-.adatepicker td.date-cell[data-v-ef698187]:hover {
+.adatepicker td.date-cell[data-v-e22e44d1]:hover {
 	background: var(--sc-gray-10);
 }
-.adatepicker td[data-v-ef698187]:focus,
-.adatepicker td[data-v-ef698187]:focus-within {
+.adatepicker td[data-v-e22e44d1]:focus,
+.adatepicker td[data-v-e22e44d1]:focus-within {
 	/* outline: 1px dashed black; */
 	box-shadow: none;
 	overflow: hidden;
@@ -228,51 +270,51 @@
 	max-height: 1.15em;
 	overflow: hidden;
 }
-.adatepicker .selectedDate[data-v-ef698187],
-.adatepicker .startDate[data-v-ef698187],
-.adatepicker .endDate[data-v-ef698187] {
+.adatepicker .selectedDate[data-v-e22e44d1],
+.adatepicker .startDate[data-v-e22e44d1],
+.adatepicker .endDate[data-v-e22e44d1] {
 	/* outline: 1px solid black; */
 	background: var(--sc-gray-20);
 	font-weight: bolder;
 }
-.adatepicker .startDate[data-v-ef698187] {
+.adatepicker .startDate[data-v-e22e44d1] {
 	/* border-radius: 5px 0px 0px 5px; */
 	border-left: 1px solid var(--sc-gray-50);
 	background: var(--sc-gray-20) !important;
 }
-.adatepicker .endDate[data-v-ef698187] {
+.adatepicker .endDate[data-v-e22e44d1] {
 	border-right: 1px solid var(--sc-gray-50);
 	/* border-radius: 0px 5px 5px 0px; */
 	background: var(--sc-gray-20) !important;
 }
-.adatepicker .withinRange[data-v-ef698187] {
+.adatepicker .withinRange[data-v-e22e44d1] {
 	background: var(--sc-gray-5);
 }
-.adatepicker .todaysDate[data-v-ef698187] {
+.adatepicker .todaysDate[data-v-e22e44d1] {
 	font-weight: bolder;
 	/* text-decoration: underline; */
-	color: black;
+	color: var(--sc-cell-text-color);
 }
-.days-header > td[data-v-ef698187] {
+.days-header > td[data-v-e22e44d1] {
 	font-weight: bold;
 }
-.prev-date[data-v-ef698187] {
+.prev-date[data-v-e22e44d1] {
 	color: var(--sc-gray-20);
 }
-.adatepicker .date-input[data-v-ef698187] {
+.adatepicker .date-input[data-v-e22e44d1] {
 	display: flex;
 	width: 100%;
 	gap: 5px;
 	align-items: center;
 }
-.adatepicker .date-input > input[data-v-ef698187] {
+.adatepicker .date-input > input[data-v-e22e44d1] {
 	width: 50%;
 	padding: 2px;
 }
 
 /* Keep the field error in-flow below the calendar. The shared .aform_error is absolutely
    positioned against a .aform_form-element anchor, which this grid component does not use. */
-p.aform_error[data-v-ef698187] {
+p.aform_error[data-v-e22e44d1] {
 	position: static;
 	display: block;
 	color: var(--sc-brand-danger);
@@ -280,72 +322,76 @@ p.aform_error[data-v-ef698187] {
 	margin: 0.25rem 0 0;
 }
 
-.adate_time[data-v-95ad0aa4] {
+.adate_time[data-v-3a6e48db] {
 	width: auto;
 	padding: 10px;
 	box-sizing: border-box;
 	font-size: 1rem;
-	background: var(--sc-gray-10);
+	background: var(--sc-input-field-background);
 }
-.adate_time_fields[data-v-95ad0aa4] {
+.adate_time_fields[data-v-3a6e48db] {
 	display: flex;
 	align-items: stretch;
 	gap: 5px;
 	justify-content: flex-start;
 }
-.adate_time_fields > input[data-v-95ad0aa4] {
-	min-width: 30px;
-	padding: 2px;
+.adate_time_fields > input[data-v-3a6e48db] {
+	width: 2.5rem;
+	min-width: 2.5rem;
+	flex: 0 0 auto;
+	padding: 0.25rem 0.15rem;
 	text-align: center;
-	display: inline-block;
-	flex-basis: 0;
+	background: var(--sc-input-field-background);
+	border: 1px solid var(--sc-input-border-color);
+	color: var(--sc-cell-text-color);
+	border-radius: var(--sc-border-radius);
+}
+.adate_time_fields > input[data-v-3a6e48db]:focus,
+.meridiem-selector[data-v-3a6e48db]:focus {
+	outline: 1px solid var(--sc-input-active-border-color);
+	outline-offset: -1px;
 }
-.meridiem-selector[data-v-95ad0aa4] {
+.meridiem-selector[data-v-3a6e48db] {
+	flex: 0 0 auto;
+	width: auto;
+	min-width: 5.5rem;
+	margin-left: 6px;
+	padding: 0.25rem 1.75rem 0.25rem 0.5rem;
 	cursor: pointer;
-	display: inline-block;
-	flex-basis: 0;
-	padding: 5px;
 	user-select: none;
+	background: var(--sc-input-field-background);
+	border: 1px solid var(--sc-input-border-color);
+	color: var(--sc-cell-text-color);
+	border-radius: var(--sc-border-radius);
+	font-size: 1rem;
 }
-.meridiem-selector[data-v-95ad0aa4]:focus {
-	outline: 2px solid black;
-	outline-offset: -2px;
-}
-.adate_time_segment[data-v-95ad0aa4] {
+.adate_time_segment[data-v-3a6e48db] {
 	display: flex;
 	flex-direction: column;
 	width: 40px;
 }
-.colon[data-v-95ad0aa4] {
+.colon[data-v-3a6e48db] {
 	display: flex;
 	align-items: normal;
 }
-.aform_form-btn[data-v-95ad0aa4] {
+.aform_form-btn[data-v-3a6e48db] {
 	cursor: pointer;
 }
-.aform-select[data-v-95ad0aa4] {
-	border-radius: 0px;
-	border: 1px solid rgb(118, 118, 118);
-	font-size: 1rem;
-	padding: 0rem;
-	margin: 0;
-	border-radius: 0;
+.aform-select[data-v-3a6e48db] {
 	box-sizing: border-box;
 	min-height: auto;
-	position: relative;
-	color: var(--sc-cell-text-color);
-}
-.meridiem-selector[data-v-95ad0aa4] {
-	margin-left: 6px;
 }
 
-.adate-selection[data-v-36e737ea] {
+.adate-selection[data-v-48e71f28] {
 	display: inline-block;
-	border: 1px solid var(--sc-gray-80);
+	width: max-content;
+	max-width: 100%;
+	box-sizing: border-box;
+	border: 1px solid var(--sc-input-border-color);
 	padding: 10px;
-	background: var(--sc-form-background);
+	background: var(--sc-input-field-background);
 }
-.adate-selection__end-label[data-v-36e737ea] {
+.adate-selection__end-label[data-v-48e71f28] {
 	font-size: 0.8em;
 	font-weight: bold;
 	color: var(--sc-input-active-label-color);
@@ -353,25 +399,28 @@ p.aform_error[data-v-ef698187] {
 	margin-bottom: 2px;
 	padding-left: 2px;
 }
-.empty[data-v-36e737ea] {
-	color: #ccc;
+.empty[data-v-48e71f28] {
+	color: var(--sc-input-label-color);
 	padding: 10px;
 	text-align: center;
-	border: 1px solid #ccc;
+	border: 1px solid var(--sc-input-border-color);
 }
 
-.adate-picker[data-v-5de3fe7a] {
+.adate-picker[data-v-e1403ea0] {
 	position: absolute;
 	top: 100%;
 	left: 0;
-	z-index: 1000;
+	width: max-content;
+	max-width: 100%;
+	box-sizing: border-box;
+	z-index: 100;
 	margin-top: 0.25rem;
 }
 
-.autocomplete[data-v-4206fcf7] {
+.autocomplete[data-v-2275075e] {
 	position: relative;
 }
-.autocomplete-results[data-v-4206fcf7] {
+.autocomplete-results[data-v-2275075e] {
 	position: absolute;
 	left: 0;
 	right: 0;
@@ -380,19 +429,19 @@ p.aform_error[data-v-ef698187] {
 	margin: 0;
 	color: var(--sc-input-active-border-color);
 	border: 1px solid var(--sc-input-active-border-color);
-	border-radius: 0;
+	border-radius: 0 0 var(--sc-border-radius) var(--sc-border-radius);
 	border-top: none;
-	background-color: var(--sc-input-field-background);
+	background-color: var(--sc-overlay-background);
 	list-style: none;
 }
-.autocomplete-result[data-v-4206fcf7] {
+.autocomplete-result[data-v-2275075e] {
 	text-align: left;
 	padding: 4px 6px;
 	cursor: pointer;
-	border-bottom: 0.5px solid lightgray;
+	border-bottom: 0.5px solid var(--sc-input-border-color);
 }
-.autocomplete-result.is-active[data-v-4206fcf7],
-.autocomplete-result[data-v-4206fcf7]:hover {
+.autocomplete-result.is-active[data-v-2275075e],
+.autocomplete-result[data-v-2275075e]:hover {
 	background-color: var(--sc-row-color-zebra-light);
 	color: var(--sc-input-active-border-color);
 }
@@ -461,15 +510,15 @@ p.aform_error[data-v-ef698187] {
 	--sc-badge-accent: var(--sc-badge-brand-accent);
 }
 
-.aform_segmented-control--xs.aform_form-element[data-v-23f09651] {
+.aform_segmented-control--xs.aform_form-element[data-v-8b740fd8] {
 	min-width: 0;
 	padding-top: 0;
 	max-width: none;
 }
-.aform_segmented-control--xs[data-v-23f09651]:not(:has(.aform_segmented-sr-label)) {
+.aform_segmented-control--xs[data-v-8b740fd8]:not(:has(.aform_segmented-sr-label)) {
 	padding-top: 0.5rem;
 }
-.aform_segmented-sr-label[data-v-23f09651] {
+.aform_segmented-sr-label[data-v-8b740fd8] {
 	position: absolute;
 	width: 1px;
 	height: 1px;
@@ -480,7 +529,7 @@ p.aform_error[data-v-ef698187] {
 	white-space: nowrap;
 	border: 0;
 }
-.aform_segmented-track[data-v-23f09651] {
+.aform_segmented-track[data-v-8b740fd8] {
 	display: inline-flex;
 	flex-wrap: wrap;
 	align-items: stretch;
@@ -493,18 +542,18 @@ p.aform_error[data-v-ef698187] {
 	outline-offset: -1px;
 	border-radius: 0;
 	box-sizing: border-box;
-	background: var(--sc-input-field-disabled-background);
+	background: var(--sc-input-addon-background);
 	font-family: var(--sc-font-family);
 }
-.aform_segmented-control--xs .aform_segmented-track[data-v-23f09651] {
+.aform_segmented-control--xs .aform_segmented-track[data-v-8b740fd8] {
 	min-height: 1.5rem;
 	font-size: 0.875rem;
 }
-.aform_segmented-control--equal .aform_segmented-track[data-v-23f09651] {
+.aform_segmented-control--equal .aform_segmented-track[data-v-8b740fd8] {
 	display: flex;
 	width: 100%;
 }
-.aform_segmented-segment[data-v-23f09651] {
+.aform_segmented-segment[data-v-8b740fd8] {
 	position: relative;
 	display: inline-flex;
 	align-items: center;
@@ -523,15 +572,15 @@ p.aform_error[data-v-ef698187] {
 	user-select: none;
 	box-sizing: border-box;
 }
-.aform_segmented-control--sm .aform_segmented-segment[data-v-23f09651] {
+.aform_segmented-control--sm .aform_segmented-segment[data-v-8b740fd8] {
 	min-height: 1.75rem;
 	padding: 0.125rem 0.75rem;
 	font-size: var(--sc-font-size);
 }
-.aform_segmented-control--equal .aform_segmented-segment[data-v-23f09651] {
+.aform_segmented-control--equal .aform_segmented-segment[data-v-8b740fd8] {
 	flex: 1 1 0;
 }
-.aform_segmented-input[data-v-23f09651] {
+.aform_segmented-input[data-v-8b740fd8] {
 	position: absolute;
 	inline-size: 1px;
 	block-size: 1px;
@@ -542,114 +591,120 @@ p.aform_error[data-v-ef698187] {
 	white-space: nowrap;
 	border: 0;
 }
-.aform_segmented-label[data-v-23f09651] {
+.aform_segmented-label[data-v-8b740fd8] {
 	pointer-events: none;
 }
-.aform_segmented-segment[data-v-23f09651]:not(.aform_segmented-segment--badge):has(.aform_segmented-input:checked) {
-	background: var(--sc-input-field-background);
+.aform_segmented-segment[data-v-8b740fd8]:not(.aform_segmented-segment--badge):has(.aform_segmented-input:checked) {
+	background: var(--sc-form-background);
 	color: var(--sc-cell-text-color);
 	font-weight: 500;
 }
-.aform_segmented-segment--badge[data-v-23f09651]:has(.aform_segmented-input:checked) {
+.aform_segmented-segment--badge[data-v-8b740fd8]:has(.aform_segmented-input:checked) {
 	font-weight: 500;
 }
-.aform_segmented-segment--badge:has(.aform_segmented-input:checked).aform_segmented-segment--neutral[data-v-23f09651] {
+.aform_segmented-segment--badge:has(.aform_segmented-input:checked).aform_segmented-segment--neutral[data-v-8b740fd8] {
 	background: var(--sc-badge-neutral-bg);
 	color: var(--sc-badge-neutral-text);
 }
-.aform_segmented-segment--badge:has(.aform_segmented-input:checked).aform_segmented-segment--success[data-v-23f09651] {
+.aform_segmented-segment--badge:has(.aform_segmented-input:checked).aform_segmented-segment--success[data-v-8b740fd8] {
 	background: var(--sc-badge-success-bg);
 	color: var(--sc-badge-success-text);
 }
-.aform_segmented-segment--badge:has(.aform_segmented-input:checked).aform_segmented-segment--warning[data-v-23f09651] {
+.aform_segmented-segment--badge:has(.aform_segmented-input:checked).aform_segmented-segment--warning[data-v-8b740fd8] {
 	background: var(--sc-badge-warning-bg);
 	color: var(--sc-badge-warning-text);
 }
-.aform_segmented-segment--badge:has(.aform_segmented-input:checked).aform_segmented-segment--danger[data-v-23f09651] {
+.aform_segmented-segment--badge:has(.aform_segmented-input:checked).aform_segmented-segment--danger[data-v-8b740fd8] {
 	background: var(--sc-badge-danger-bg);
 	color: var(--sc-badge-danger-text);
 }
-.aform_segmented-segment--badge:has(.aform_segmented-input:checked).aform_segmented-segment--brand[data-v-23f09651] {
+.aform_segmented-segment--badge:has(.aform_segmented-input:checked).aform_segmented-segment--brand[data-v-8b740fd8] {
 	background: var(--sc-badge-brand-bg);
 	color: var(--sc-badge-brand-text);
 }
-.aform_segmented-segment--badge:has(.aform_segmented-input:checked)[style*='--sc-badge-bg'][data-v-23f09651] {
+.aform_segmented-segment--badge:has(.aform_segmented-input:checked)[style*='--sc-badge-bg'][data-v-8b740fd8] {
 	background: var(--sc-badge-bg);
 	color: var(--sc-badge-text);
 }
-.aform_segmented-segment[data-v-23f09651]:has(.aform_segmented-input:focus-visible) {
+.aform_segmented-segment[data-v-8b740fd8]:has(.aform_segmented-input:focus-visible) {
 	outline: 1px solid var(--sc-input-active-border-color);
 	outline-offset: -1px;
 }
-.aform_segmented-segment[data-v-23f09651]:hover:has(.aform_segmented-input:not(:disabled):not(:checked)) {
-	background: color-mix(in srgb, var(--sc-input-field-background) 50%, transparent);
+.aform_segmented-segment[data-v-8b740fd8]:hover:has(.aform_segmented-input:not(:disabled):not(:checked)) {
+	background: color-mix(in srgb, var(--sc-form-background) 50%, transparent);
 }
-.aform_segmented-segment[data-v-23f09651]:has(.aform_segmented-input:disabled) {
+.aform_segmented-segment[data-v-8b740fd8]:has(.aform_segmented-input:disabled) {
 	cursor: not-allowed;
 	opacity: 0.5;
 }
-.aform_segmented-track[data-v-23f09651]:has(.aform_segmented-input:focus-visible) {
+.aform_segmented-track[data-v-8b740fd8]:has(.aform_segmented-input:focus-visible) {
 	outline-color: var(--sc-input-active-border-color);
 }
-.aform_segmented-display-badge[data-v-23f09651] {
+.aform_segmented-display-badge[data-v-8b740fd8] {
 	display: block;
 	padding: 0.5rem;
 	min-height: 2rem;
 	box-sizing: border-box;
 }
 @media (prefers-reduced-motion: no-preference) {
-.aform_segmented-segment[data-v-23f09651] {
+.aform_segmented-segment[data-v-8b740fd8] {
 		transition:
 			background-color 0.1s ease-out,
 			color 0.1s ease-out;
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.aform_segmented-segment[data-v-23f09651] {
+.aform_segmented-segment[data-v-8b740fd8] {
 		transition: none;
 }
 }
 
-.adatetime-picker[data-v-b0fa488b] {
+.adatetime-picker[data-v-427253ba] {
 	position: absolute;
 	top: 100%;
 	left: 0;
-	z-index: 1000;
+	width: max-content;
+	max-width: 100%;
+	box-sizing: border-box;
+	z-index: 100;
 	margin-top: 0.25rem;
 }
 
-.aduration[data-v-43788a3d] {
+.aduration[data-v-64f6240e] {
 	position: relative;
-	min-width: 40ch;
-	width: 100%;
+	width: max-content;
+	max-width: 100%;
 }
-.aduration__summary[data-v-43788a3d] {
+.aduration__summary[data-v-64f6240e] {
 	display: flex;
 	gap: 6px;
 	align-items: baseline;
 	margin-top: 6px;
 	font-size: 0.9em;
 }
-.aduration__label[data-v-43788a3d] {
+.aduration__label[data-v-64f6240e] {
 	font-weight: bold;
 	color: var(--sc-input-active-label-color);
 }
-.aduration__value[data-v-43788a3d] {
+.aduration__value[data-v-64f6240e] {
 	color: var(--sc-cell-text-color);
 }
-.aduration__ms[data-v-43788a3d] {
+.aduration__ms[data-v-64f6240e] {
 	color: var(--sc-gray-50);
 	font-size: 0.85em;
 }
-.aduration__footer[data-v-43788a3d] {
+.aduration__footer[data-v-64f6240e] {
 	margin-top: 8px;
 }
 
-.adaterange-picker[data-v-f8dad4d3] {
+.adaterange-picker[data-v-b7560709] {
 	position: absolute;
 	top: 100%;
 	left: 0;
-	z-index: 1000;
+	width: max-content;
+	max-width: 100%;
+	box-sizing: border-box;
+	z-index: 100;
 	margin-top: 0.25rem;
 }
 
@@ -659,12 +714,13 @@ p.aform_error[data-v-ef698187] {
 	border: none;
 }
 .aform_form-element {
-	padding: 0;
+	padding: var(--sc-form-label-offset) 0 0;
 	margin: 0;
 	position: relative;
 	box-sizing: border-box;
 	flex-grow: 1;
 	min-width: 20ch;
+	max-width: var(--sc-form-field-max-width);
 	/* margin-bottom: 1rem; */
 }
 .aform__grid--full {
@@ -672,6 +728,7 @@ p.aform_error[data-v-ef698187] {
 	width: 100%;
 }
 .aform_input-field {
+	border: none;
 	outline: 1px solid var(--sc-input-border-color);
 	outline-offset: -1px;
 	font-size: 1rem;
@@ -696,23 +753,27 @@ p.aform_error[data-v-ef698187] {
 	color: var(--sc-cell-text-color);
 	word-break: break-word;
 }
-.aform_input-field:focus + .aform_field-label {
+
+/* A label darkens while anything beside it holds focus, wherever it sits in its field's markup. */
+:focus-within > .aform_field-label {
 	color: var(--sc-input-active-label-color);
 }
 .aform_field-label {
 	color: var(--sc-input-label-color);
 	display: inline-block;
 	position: absolute;
+	user-select: none;
 	padding: 0 0.25rem;
 	margin: 0rem;
 	z-index: 1;
 	font-size: 0.7rem;
 	font-weight: 300;
 	letter-spacing: 0.05rem;
-	background: linear-gradient(var(--sc-form-background) 50%, var(--sc-input-field-background) 50%);
+	/* The form colour masks the field's top border behind the text; below it the field shows
+	   through. Never paint a colour there: it can match only one of the surfaces a field shows. */
+	background: linear-gradient(var(--sc-form-background) calc(50% + 1px), transparent calc(50% + 1px));
 	width: auto;
 	box-sizing: border-box;
-	background: white;
 	margin: 0;
 	grid-row: 1;
 	top: 0;
@@ -721,18 +782,13 @@ p.aform_error[data-v-ef698187] {
 	line-height: 0;
 	transform: translateY(-50%);
 }
+.aform_form-element > .aform_field-label {
+	top: var(--sc-form-label-offset);
+}
 .aform_input-field:disabled,
 .aform_checkbox-container:has(.aform_checkbox:disabled) {
 	background: var(--sc-input-field-disabled-background);
 }
-.aform_input-field:disabled + .aform_field-label,
-.aform_checkbox-container:has(.aform_checkbox:disabled) + .aform_field-label {
-	background: linear-gradient(var(--sc-form-background) 50%, var(--sc-input-field-disabled-background) 50%);
-}
-.aform_input-field:disabled ~ p.aform_error,
-.aform_checkbox-container:has(.aform_checkbox:disabled) ~ p.aform_error {
-	background: linear-gradient(var(--sc-form-background) 50%, var(--sc-input-field-disabled-background) 50%);
-}
 .aform_field-label::after {
 	margin: 0;
 	padding: 0;
@@ -744,7 +800,8 @@ p.aform_error {
 	/* v-show toggles visibility per field; base display must be visible (was stuck at `none`,
 	   which overrode v-show and left every field error dormant). */
 	display: inline-block;
-	background: linear-gradient(var(--sc-form-background) 50%, var(--sc-input-field-background) 50%);
+	/* Straddles the border like .aform_field-label, and paints the same way. */
+	background: linear-gradient(var(--sc-form-background) calc(50% + 1px), transparent calc(50% + 1px));
 	padding: 0 0.25rem;
 	margin: 0rem;
 	width: auto;
@@ -752,45 +809,51 @@ p.aform_error {
 	font-size: 0.7rem;
 	position: absolute;
 	right: 0;
-	top: 0;
+	top: var(--sc-form-label-offset);
 	line-height: 0;
-	background: white;
 	padding: 0.25rem;
 	transform: translate(-1rem, -50%);
 	margin: 0;
 }
 
-.aform[data-v-713aca93] {
+.aform[data-v-dbfe4358] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 1rem;
 	padding: 1rem;
+	background: var(--sc-form-background);
 	border: 1px solid var(--sc-form-border);
 	border-left: 4px solid var(--sc-form-border);
 	margin-bottom: 1rem;
 	max-width: 100%;
 }
 @media screen and (max-width: 400px) {
-.aform[data-v-713aca93] {
+.aform[data-v-dbfe4358] {
 		flex-direction: column;
 }
 }
 
 /* Nested form section */
-.aform-nested-section[data-v-713aca93] {
+.aform-nested-section[data-v-dbfe4358] {
 	width: 100%;
 	padding: 0.5rem 0;
 }
-.aform-nested-label[data-v-713aca93] {
+.aform-nested-label[data-v-dbfe4358] {
 	font-size: 0.9rem;
 	font-weight: 600;
 	margin: 0 0 0.5rem 0;
 	color: var(--sc-input-label-color);
 }
-.aform-nested-section .aform[data-v-713aca93] {
+.aform-nested-section .aform[data-v-dbfe4358] {
 	border-left-width: 2px;
 	margin-left: 0.5rem;
 }
+.aform-table-expansion[data-v-dbfe4358] {
+	margin-bottom: 0;
+	border: none;
+	border-left: none;
+	padding: 0;
+}
 
 .collapse-button[data-v-6f1c1b45] {
 	width: 2ch;
@@ -839,111 +902,122 @@ legend[data-v-162e7317] {
 	float: right;
 }
 
-.aform_file-attach[data-v-8eefd179] {
-	padding: 1rem;
+.aform_file-attach[data-v-79ce33a7] {
+	padding: 0.5rem;
 	display: flex;
 	flex-wrap: wrap;
-	gap: 1rem;
+	gap: 0.5rem;
 	flex-direction: row;
-	justify-content: center;
+	justify-content: flex-start;
 	align-items: center;
+	box-sizing: border-box;
 	border: 1px dashed var(--sc-input-border-color);
 	width: 100%;
 }
 @media screen and (max-width: 400px) {
-.aform_file-attach > .aform_form-btn[data-v-8eefd179] {
+.aform_file-attach > .aform_form-btn[data-v-79ce33a7] {
 		width: 100%;
 }
 }
 .aform_file-attach-feedback {
-&[data-v-8eefd179] {
+&[data-v-79ce33a7] {
 	color: var(--sc-input-label-color);
 	width: 100%;
 	padding: 0.5rem;
 	text-align: center;
 	align-self: center;
 	}
-& > li[data-v-8eefd179] {
+& > li[data-v-79ce33a7] {
 		list-style: none;
 		font-style: italic;
 }
-& > p[data-v-8eefd179] {
+& > p[data-v-79ce33a7] {
 		margin-top: 0;
 }
 }
-.aform_form-btn[data-v-8eefd179] {
-	padding: 0.5rem 2rem;
+.aform_form-btn[data-v-79ce33a7] {
+	padding: 0 1rem;
 	width: auto;
+	font-size: 1rem;
+	line-height: 1;
 	border: 1px solid var(--sc-input-border-color);
 	color: var(--sc-input-label-color);
 	cursor: pointer;
-	background-color: white;
+	background-color: var(--sc-btn-color);
 }
-.aform_form-btn[data-v-8eefd179]:disabled {
+.aform_form-btn[data-v-79ce33a7]:disabled {
 	background-color: var(--sc-gray-5);
 }
 
-.aquantity__row[data-v-f16b20ca] {
+.aquantity__row[data-v-a904c817] {
 	display: flex;
 	gap: 1ch;
 }
-.aquantity__row--stock[data-v-f16b20ca] {
+.aquantity__row--stock[data-v-a904c817] {
 	margin-top: 1.5rem;
 }
-.aquantity__field[data-v-f16b20ca] {
+.aquantity__field[data-v-a904c817] {
 	position: relative;
 	flex: 1;
 	min-width: 0;
 }
-.aquantity__group[data-v-f16b20ca] {
+.aquantity__group[data-v-a904c817] {
+	position: relative;
 	display: flex;
 	align-items: stretch;
 	width: 100%;
+	background: var(--sc-input-field-background);
 	border: 1px solid var(--sc-input-border-color);
-	border-radius: 0.25rem;
+	border-radius: var(--sc-border-radius);
 }
-.aquantity__group[data-v-f16b20ca]:focus-within {
+.aquantity__group[data-v-a904c817]:focus-within {
 	border-color: var(--sc-input-active-border-color);
 }
-.aquantity__qty[data-v-f16b20ca] {
+.aquantity__qty[data-v-a904c817] {
 	flex: 1;
 	min-width: 0;
 	border: none;
 	outline: none;
-	padding: 0.5ch 1ch;
+	padding: 0.5rem 1ch;
+	font-size: 1rem;
+	font-family: var(--sc-font-family);
+	color: var(--sc-cell-text-color);
 	background: transparent;
-	border-radius: 0.25rem 0 0 0.25rem;
+	border-radius: var(--sc-border-radius) 0 0 var(--sc-border-radius);
 	appearance: textfield;
 	-moz-appearance: textfield;
 }
-.aquantity__qty[data-v-f16b20ca]::-webkit-outer-spin-button,
-.aquantity__qty[data-v-f16b20ca]::-webkit-inner-spin-button {
+.aquantity__qty[data-v-a904c817]::-webkit-outer-spin-button,
+.aquantity__qty[data-v-a904c817]::-webkit-inner-spin-button {
 	appearance: none;
 	-webkit-appearance: none;
 	margin: 0;
 }
-.aquantity__uom[data-v-f16b20ca] {
+.aquantity__uom[data-v-a904c817] {
 	position: relative;
 	flex: 0 0 auto;
 	border-left: 1px solid var(--sc-input-border-color);
 }
-.aquantity__uom-toggle[data-v-f16b20ca] {
+.aquantity__uom-toggle[data-v-a904c817] {
 	display: flex;
 	align-items: center;
 	gap: 0.75ch;
 	height: 100%;
 	padding: 0.5ch 1ch;
-	background: var(--sc-gray-5);
+	font-size: 1rem;
+	font-family: var(--sc-font-family);
+	color: var(--sc-cell-text-color);
+	background: var(--sc-input-addon-background);
 	border: none;
-	border-radius: 0 0.25rem 0.25rem 0;
+	border-radius: 0 var(--sc-border-radius) var(--sc-border-radius) 0;
 	white-space: nowrap;
 	cursor: pointer;
 }
-.aquantity__uom-toggle[data-v-f16b20ca]:disabled {
+.aquantity__uom-toggle[data-v-a904c817]:disabled {
 	cursor: not-allowed;
 	color: var(--sc-gray-50);
 }
-.aquantity__caret[data-v-f16b20ca] {
+.aquantity__caret[data-v-a904c817] {
 	display: inline-block;
 	width: 0;
 	height: 0;
@@ -951,7 +1025,7 @@ legend[data-v-162e7317] {
 	border-right: 0.3em solid transparent;
 	border-top: 0.3em solid currentColor;
 }
-.aquantity__uom-menu[data-v-f16b20ca] {
+.aquantity__uom-menu[data-v-a904c817] {
 	position: absolute;
 	top: 100%;
 	right: 0;
@@ -962,40 +1036,40 @@ legend[data-v-162e7317] {
 	list-style: none;
 	background: var(--sc-input-field-background);
 	border: 1px solid var(--sc-input-active-border-color);
-	border-radius: 0.25rem;
+	border-radius: var(--sc-border-radius);
 }
-.aquantity__uom-option[data-v-f16b20ca] {
+.aquantity__uom-option[data-v-a904c817] {
 	padding: 0.4ch 1ch;
 	white-space: nowrap;
 	cursor: pointer;
 }
-.aquantity__uom-option.is-active[data-v-f16b20ca],
-.aquantity__uom-option[data-v-f16b20ca]:hover {
+.aquantity__uom-option.is-active[data-v-a904c817],
+.aquantity__uom-option[data-v-a904c817]:hover {
 	background-color: var(--sc-row-color-zebra-light);
 }
-.aquantity__stock-field[data-v-f16b20ca] {
+.aquantity__stock-field[data-v-a904c817] {
 	width: 100%;
 	font-size: 1rem;
-	padding: 0.5ch 1ch;
+	padding: 0.5rem 1ch;
 	border: 1px solid var(--sc-input-border-color);
-	border-radius: 0.25rem;
+	border-radius: var(--sc-border-radius);
 	outline: none;
 }
-.aquantity__stock-field[data-v-f16b20ca]:disabled {
+.aquantity__stock-field[data-v-a904c817]:disabled {
 	color: var(--sc-gray-50);
 }
 
-.aform_textbox[data-v-2a9c793b] {
+.aform_textbox[data-v-19e611fa] {
 	resize: vertical;
 	line-height: 1.5;
 	min-height: 4rem;
 	font-family: inherit;
 }
-.aform_textbox-display[data-v-2a9c793b] {
+.aform_textbox-display[data-v-19e611fa] {
 	white-space: pre-wrap;
 }
 
-.login-container[data-v-2c0f0634] {
+.login-container[data-v-555c3224] {
 	width: 100%;
 	position: relative;
 	display: flex;
@@ -1003,8 +1077,9 @@ legend[data-v-162e7317] {
 	align-items: center;
 	justify-content: center;
 	font-family: var(--sc-font-family);
+	background: var(--sc-form-background);
 }
-.account-container[data-v-2c0f0634] {
+.account-container[data-v-555c3224] {
 	width: 100%;
 	margin-left: auto;
 	margin-top: 0.5rem;
@@ -1013,46 +1088,35 @@ legend[data-v-162e7317] {
 	flex-direction: column;
 	justify-content: center;
 }
-.account-header[data-v-2c0f0634] {
+.account-header[data-v-555c3224] {
 	display: flex;
 	flex-direction: column;
 	text-align: center;
 	margin-top: 0.5rem;
 }
-#account-title[data-v-2c0f0634] {
+#account-title[data-v-555c3224] {
 	font-size: 1.5rem;
 	line-height: 2rem;
 	font-weight: 600;
 	letter-spacing: -0.025em;
 	margin: 0;
 }
-#account-subtitle[data-v-2c0f0634] {
+#account-subtitle[data-v-555c3224] {
 	font-size: 0.875rem;
 	line-height: 1.25rem;
 	margin: 1rem;
 }
-.login-form-container[data-v-2c0f0634] {
+.login-form-container[data-v-555c3224] {
 	display: grid;
 	gap: 0.5rem;
 }
-.login-form-element[data-v-2c0f0634] {
+.login-form-element[data-v-555c3224] {
 	display: grid;
 	margin: 0.5rem 0;
 	position: relative;
 }
-.login-field {
-&[data-v-2c0f0634] {
-	padding: 0.5rem 0.25rem 0.25rem 0.5rem;
-	outline: 1px solid transparent;
-	border: 1px solid var(--sc-input-border-color);
-	border-radius: 0.25rem;
-	}
-&[data-v-2c0f0634]:focus {
-		border: 1px solid black;
-}
-}
 .btn {
-&[data-v-2c0f0634] {
+&[data-v-555c3224] {
 	background-color: var(--sc-btn-color);
 	color: var(--sc-btn-label-color);
 	border: 1px solid var(--sc-btn-border);
@@ -1061,18 +1125,18 @@ legend[data-v-162e7317] {
 	position: relative;
 	cursor: pointer;
 	}
-&[data-v-2c0f0634]:hover {
+&[data-v-555c3224]:hover {
 		background-color: var(--sc-btn-hover);
 }
-&[data-v-2c0f0634]:disabled {
+&[data-v-555c3224]:disabled {
 		background-color: var(--sc-input-field-disabled-background);
 }
 }
-.disabled[data-v-2c0f0634] {
+.disabled[data-v-555c3224] {
 	opacity: 0.5;
 }
-.loading-icon[data-v-2c0f0634] {
-	animation: spin-2c0f0634 1s linear infinite forwards;
+.loading-icon[data-v-555c3224] {
+	animation: spin-555c3224 1s linear infinite forwards;
 	display: inline-block;
 	margin-right: 0.2rem;
 	line-height: 0;
@@ -1082,7 +1146,7 @@ legend[data-v-162e7317] {
 }
 
 /* ANIMATION */
-@keyframes spin-2c0f0634 {
+@keyframes spin-555c3224 {
 from {
 		transform: rotate(0deg);
 }