@cahyo-dimas/freeday 1.40.0 → 1.41.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 Semua perubahan penting dicatat di sini. Format longgar mengikuti
 [Keep a Changelog](https://keepachangelog.com/); tiap versi = git tag.
 
+## [1.41.0] — 2026-08-19
+One note from the account app (IDU_EMATE_ACCT_WEB, #018) — the first raised from that repo.
+### Fixed
+- **`.fdy-input-group` rendered 1px shorter than every control beside it** (#018). The group
+  declares a `1.5px` border and its inner input subtracted `3px` to compensate, so the border box
+  should land on `--control-h`. **At `devicePixelRatio: 1` the engine resolves each 1.5px border to
+  1px**, the compensation over-subtracts, and a search field beside a button measured 39px against
+  40px. At dpr 2 the halves survive and the arithmetic is right — which is why it shipped: it is
+  invisible on a retina display and visible on every 1× monitor.
+  The group now states `height: var(--control-h)` (it is already `border-box`) and the input
+  `height: auto; align-self: stretch`. The group is `align-items: stretch` already, so the input and
+  the addons fill whatever the border leaves — at any border width, any rounding, and under
+  `data-density="compact"` without a second `calc` to keep in step. The defect was not the number;
+  it was compensating in one rule for a value declared in another.
+### Added — guards
+- **Control heights are measured in a real browser** (#018). No stylesheet assertion could have
+  caught this: the CSS reads as correct arithmetic, and the value it is correct about is one the
+  engine rounds. `browser/control-heights.mjs` measures `.fdy-input-group` against `.fdy-btn`,
+  `.fdy-input` and `.fdy-combo` with `getBoundingClientRect`, at both densities. Written **failing
+  first** against 1.40.0 — it reproduced 39 vs 40 before the fix landed.
+- The note's own sweep is recorded: `calc(var(--control-h)` has five uses in `src/`, and the four in
+  `button.css` step a control deliberately by a spacing token. This was the last compensation of its
+  kind.
+
 ## [1.40.0] — 2026-08-19
 One note from the back-office app (IDU_EMATE_APPL_WEB, #017).
 ### Fixed

package/dist/freeday.bundle.css

@@ -1332,10 +1332,15 @@ a { color: var(--color-primary); }
 .fdy-form-grid>.fdy-field--full{grid-column:1/-1;}
 
 /* Freeday — Input group (prefix/suffix addons, e.g. Rp / % / icon) */
-.fdy-input-group{display:flex;align-items:stretch;max-width:22rem;background:var(--color-surface);border:1.5px solid var(--color-control-border);border-radius:var(--radius-md);box-shadow:inset 0 1px 2px rgba(16,14,30,.06);overflow:hidden;transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);}
+.fdy-input-group{display:flex;align-items:stretch;height:var(--control-h);max-width:22rem;background:var(--color-surface);border:1.5px solid var(--color-control-border);border-radius:var(--radius-md);box-shadow:inset 0 1px 2px rgba(16,14,30,.06);overflow:hidden;transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);}
 .fdy-input-group:hover{border-color:var(--color-text-muted);}
 .fdy-input-group:focus-within{border-color:var(--color-primary);box-shadow:inset 0 1px 2px rgba(16,14,30,.04),0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
-.fdy-input-group .fdy-input{flex:1;min-width:0;border:0;background:transparent;box-shadow:none;border-radius:0;height:calc(var(--control-h) - 3px);}
+/* The group owns the height; the input fills whatever the border leaves. It used to subtract 3px
+   for two 1.5px borders, which is arithmetic the engine is free to round: at dpr 1 each border
+   resolves to 1px, so the group rendered 1px short of every control beside it (#018). Stretching
+   is right at any border width, any rounding, and under compact without a second calc to keep in
+   step with --control-h. */
+.fdy-input-group .fdy-input{flex:1;min-width:0;border:0;background:transparent;box-shadow:none;border-radius:0;height:auto;align-self:stretch;}
 .fdy-input-group .fdy-input:focus{box-shadow:none;}
 .fdy-input-group__addon{display:inline-flex;align-items:center;padding:0 var(--space-3);background:var(--color-surface-2);color:var(--color-text-muted);font-size:var(--text-sm);white-space:nowrap;border-right:var(--bw) solid var(--color-border);}
 .fdy-input-group__addon:last-child{border-right:0;border-left:var(--bw) solid var(--color-border);}

package/dist/freeday.css

@@ -949,10 +949,15 @@ a { color: var(--color-primary); }
 .fdy-form-grid>.fdy-field--full{grid-column:1/-1;}
 
 /* Freeday — Input group (prefix/suffix addons, e.g. Rp / % / icon) */
-.fdy-input-group{display:flex;align-items:stretch;max-width:22rem;background:var(--color-surface);border:1.5px solid var(--color-control-border);border-radius:var(--radius-md);box-shadow:inset 0 1px 2px rgba(16,14,30,.06);overflow:hidden;transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);}
+.fdy-input-group{display:flex;align-items:stretch;height:var(--control-h);max-width:22rem;background:var(--color-surface);border:1.5px solid var(--color-control-border);border-radius:var(--radius-md);box-shadow:inset 0 1px 2px rgba(16,14,30,.06);overflow:hidden;transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);}
 .fdy-input-group:hover{border-color:var(--color-text-muted);}
 .fdy-input-group:focus-within{border-color:var(--color-primary);box-shadow:inset 0 1px 2px rgba(16,14,30,.04),0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
-.fdy-input-group .fdy-input{flex:1;min-width:0;border:0;background:transparent;box-shadow:none;border-radius:0;height:calc(var(--control-h) - 3px);}
+/* The group owns the height; the input fills whatever the border leaves. It used to subtract 3px
+   for two 1.5px borders, which is arithmetic the engine is free to round: at dpr 1 each border
+   resolves to 1px, so the group rendered 1px short of every control beside it (#018). Stretching
+   is right at any border width, any rounding, and under compact without a second calc to keep in
+   step with --control-h. */
+.fdy-input-group .fdy-input{flex:1;min-width:0;border:0;background:transparent;box-shadow:none;border-radius:0;height:auto;align-self:stretch;}
 .fdy-input-group .fdy-input:focus{box-shadow:none;}
 .fdy-input-group__addon{display:inline-flex;align-items:center;padding:0 var(--space-3);background:var(--color-surface-2);color:var(--color-text-muted);font-size:var(--text-sm);white-space:nowrap;border-right:var(--bw) solid var(--color-border);}
 .fdy-input-group__addon:last-child{border-right:0;border-left:var(--bw) solid var(--color-border);}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cahyo-dimas/freeday",
-  "version": "1.40.0",
+  "version": "1.41.0",
   "description": "Freeday — token-driven, framework-agnostic UI KIT (design source-of-truth).",
   "type": "module",
   "license": "MIT",
@@ -92,7 +92,7 @@
   "scripts": {
     "build": "node tokens/build.mjs",
     "test": "node --test",
-    "test:browser": "node --test browser/vanilla.mjs browser/adapter.mjs browser/layout.mjs browser/theme.mjs browser/state.mjs browser/root-init.mjs browser/upload-states.mjs browser/number.mjs browser/card-stretch.mjs browser/text-override.mjs",
+    "test:browser": "node --test browser/vanilla.mjs browser/adapter.mjs browser/layout.mjs browser/theme.mjs browser/state.mjs browser/root-init.mjs browser/upload-states.mjs browser/number.mjs browser/card-stretch.mjs browser/text-override.mjs browser/control-heights.mjs",
     "prepack": "node tokens/build.mjs",
     "version": "node tokens/build.mjs && git add dist",
     "typecheck:react": "tsc -p adapters/react/tsconfig.json --noEmit"

package/src/components/input-group.css

@@ -1,8 +1,13 @@
 /* Freeday — Input group (prefix/suffix addons, e.g. Rp / % / icon) */
-.fdy-input-group{display:flex;align-items:stretch;max-width:22rem;background:var(--color-surface);border:1.5px solid var(--color-control-border);border-radius:var(--radius-md);box-shadow:inset 0 1px 2px rgba(16,14,30,.06);overflow:hidden;transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);}
+.fdy-input-group{display:flex;align-items:stretch;height:var(--control-h);max-width:22rem;background:var(--color-surface);border:1.5px solid var(--color-control-border);border-radius:var(--radius-md);box-shadow:inset 0 1px 2px rgba(16,14,30,.06);overflow:hidden;transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);}
 .fdy-input-group:hover{border-color:var(--color-text-muted);}
 .fdy-input-group:focus-within{border-color:var(--color-primary);box-shadow:inset 0 1px 2px rgba(16,14,30,.04),0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
-.fdy-input-group .fdy-input{flex:1;min-width:0;border:0;background:transparent;box-shadow:none;border-radius:0;height:calc(var(--control-h) - 3px);}
+/* The group owns the height; the input fills whatever the border leaves. It used to subtract 3px
+   for two 1.5px borders, which is arithmetic the engine is free to round: at dpr 1 each border
+   resolves to 1px, so the group rendered 1px short of every control beside it (#018). Stretching
+   is right at any border width, any rounding, and under compact without a second calc to keep in
+   step with --control-h. */
+.fdy-input-group .fdy-input{flex:1;min-width:0;border:0;background:transparent;box-shadow:none;border-radius:0;height:auto;align-self:stretch;}
 .fdy-input-group .fdy-input:focus{box-shadow:none;}
 .fdy-input-group__addon{display:inline-flex;align-items:center;padding:0 var(--space-3);background:var(--color-surface-2);color:var(--color-text-muted);font-size:var(--text-sm);white-space:nowrap;border-right:var(--bw) solid var(--color-border);}
 .fdy-input-group__addon:last-child{border-right:0;border-left:var(--bw) solid var(--color-border);}