@cahyo-dimas/freeday 1.39.0 → 1.41.0

package/CHANGELOG.md

@@ -3,6 +3,53 @@
 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
+- **A picker inside a `.fdy-field` now fills it.** `.fdy-field`, `.fdy-combo` and
+  `.fdy-input-group` all cap at 22rem; `.fdy-datepicker` capped at 14rem and `.fdy-timepicker`
+  at 11rem. In a two-column form grid that left a **224px** date box beside a **319px** combo —
+  measured, not eyeballed — and the row read as ragged with no fix available to the consuming
+  app, because the cap sits on the component. `.fdy-field > .fdy-datepicker` / `> .fdy-timepicker`
+  / `> .fdy-daterange` drop the cap; a picker standing on its own keeps its narrower width, which
+  is right for a short value.
+
+### Added — guards
+- **The enhancer string contract is asserted in a real browser** (#016). 1.39.0 moved every
+  user-facing string in **nine** enhancers into a `TEXT` table read through `textOf()`, and only
+  **one of the nine** — upload — had any browser coverage at all. The node guard proves the
+  literals *sit* in the table; it reads the source as text and cannot prove the wiring *runs*, so a
+  `zone` out of scope or a `getAttribute` on a non-element would have thrown at init with all 51
+  node tests still green. `browser/text-override.mjs` initialises table, stepper, mask, carousel,
+  cascade, form and toast on real markup and asserts **both halves**: the documented Indonesian
+  default still renders, and `data-fdy-text-*` wins. The default is a contract too — an enhancer
+  that quietly turned English would be a breaking change wearing a bugfix's clothes.
+  Mutation-tested: making `textOf()` ignore the attribute fails it by name and value.
+
 ## [1.39.0] — 2026-08-19
 The sweep #013 §2 filed and #015 restated: the vanilla enhancers' strings are reachable now.
 ### Added

package/dist/freeday.bundle.css

@@ -1112,6 +1112,12 @@ a { color: var(--color-primary); }
 /* Freeday — Date picker (input-styled trigger + calendar popover).
  * Built by freeday-datepicker.js from an empty [data-fdy-datepicker] wrapper. */
 .fdy-datepicker{position:relative;display:inline-block;width:100%;max-width:14rem;}
+/* Inside a labelled field, a picker fills the field like every other control.
+   The 14rem/11rem caps above suit a picker standing on its own; in a form grid
+   they leave the date box visibly short of the combo beside it — 224px against
+   319px in a two-column layout — and the row reads as ragged. The field's own
+   max-width is what should govern there. */
+.fdy-field>.fdy-datepicker,.fdy-field>.fdy-timepicker,.fdy-field>.fdy-daterange{max-width:none;}
 .fdy-datepicker__trigger{display:inline-flex;align-items:center;gap:var(--space-2);width:100%;height:var(--control-h);padding:0 var(--space-3);text-align:left;cursor:pointer;font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-text);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);transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);}
 .fdy-datepicker__trigger:hover{border-color:var(--color-text-muted);}
 .fdy-datepicker__trigger:focus-visible{outline:none;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);}
@@ -1326,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

@@ -729,6 +729,12 @@ a { color: var(--color-primary); }
 /* Freeday — Date picker (input-styled trigger + calendar popover).
  * Built by freeday-datepicker.js from an empty [data-fdy-datepicker] wrapper. */
 .fdy-datepicker{position:relative;display:inline-block;width:100%;max-width:14rem;}
+/* Inside a labelled field, a picker fills the field like every other control.
+   The 14rem/11rem caps above suit a picker standing on its own; in a form grid
+   they leave the date box visibly short of the combo beside it — 224px against
+   319px in a two-column layout — and the row reads as ragged. The field's own
+   max-width is what should govern there. */
+.fdy-field>.fdy-datepicker,.fdy-field>.fdy-timepicker,.fdy-field>.fdy-daterange{max-width:none;}
 .fdy-datepicker__trigger{display:inline-flex;align-items:center;gap:var(--space-2);width:100%;height:var(--control-h);padding:0 var(--space-3);text-align:left;cursor:pointer;font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-text);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);transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);}
 .fdy-datepicker__trigger:hover{border-color:var(--color-text-muted);}
 .fdy-datepicker__trigger:focus-visible{outline:none;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);}
@@ -943,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.39.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",
+    "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/datepicker.css

@@ -1,6 +1,12 @@
 /* Freeday — Date picker (input-styled trigger + calendar popover).
  * Built by freeday-datepicker.js from an empty [data-fdy-datepicker] wrapper. */
 .fdy-datepicker{position:relative;display:inline-block;width:100%;max-width:14rem;}
+/* Inside a labelled field, a picker fills the field like every other control.
+   The 14rem/11rem caps above suit a picker standing on its own; in a form grid
+   they leave the date box visibly short of the combo beside it — 224px against
+   319px in a two-column layout — and the row reads as ragged. The field's own
+   max-width is what should govern there. */
+.fdy-field>.fdy-datepicker,.fdy-field>.fdy-timepicker,.fdy-field>.fdy-daterange{max-width:none;}
 .fdy-datepicker__trigger{display:inline-flex;align-items:center;gap:var(--space-2);width:100%;height:var(--control-h);padding:0 var(--space-3);text-align:left;cursor:pointer;font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-text);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);transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);}
 .fdy-datepicker__trigger:hover{border-color:var(--color-text-muted);}
 .fdy-datepicker__trigger:focus-visible{outline:none;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);}

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);}