@cahyo-dimas/freeday 3.0.0 → 3.1.0

package/CHANGELOG.md

@@ -9,6 +9,80 @@ benar. Perubahan seperti itu ditulis di bawah `### Changed: BREAKING (types)`
 lama → tipe baru, dan cara menyempitkannya — bukan di bawah `### Added`, betapapun aditifnya dari
 sisi kit.
 
+## [3.1.0] - 2026-08-27
+
+**Dua cacat lebar yang dilaporkan dari layar sungguhan, dan keduanya tak kelihatan di DOM.** Markup-nya
+benar, class-nya benar, kotaknya cuma berhenti lebih awal. Rilis ini juga membuat satu kalimat
+`COMPONENTS.md` jadi benar setelah lama tidak.
+
+### Fixed
+- **Kontrol di dalam `.fdy-field` kini selebar field-nya** (`improvement-notes` #051, dari
+  `IDU_EMATE_APPL_WEB` dan `IDU_EMATE_ACCT_WEB`). `.fdy-input-group`, `.fdy-combo`,
+  `.fdy-autocomplete` dan `.fdy-cascade` masing-masing di-cap `22rem` — cap untuk kontrol yang
+  berdiri sendiri, tanpa field yang bisa memberinya lebar — dan cap itu hanya dilepas **di satu
+  container**, `.fdy-filterbar`, yang menyebut dua dari empatnya. Akibatnya baris `--full` di
+  `.fdy-form-grid` memegang combo 352px di bawah label 600px, sementara `.fdy-input`
+  di sebelahnya (yang tak pernah punya cap) mengisi penuh: satu form terlihat tak sejajar dengan
+  dirinya sendiri. Yang paling mahal justru versi yang dilaporkan pengguna tanpa diminta — *"jarak
+  search ke filter status agak jauh, ya?"* — pada toolbar dengan field `26rem`: kontrolnya 352px,
+  jadi **64px ruang mati ada DI DALAM field**, dan `gap:var(--space-3)` yang ditulis penulisnya
+  terbaca 76px di layar. Tak ada satu pun langkah debug yang wajar bisa melihatnya: gap-nya benar,
+  flex-nya benar.
+  Perbaikannya satu aturan di `input.css`, bukan selector ketiga di samping filterbar, dan bentuknya
+  **sudah ada di kit sejak #017** — `.fdy-field>.fdy-datepicker` melepas cap picker dengan komentar
+  "a picker fills the field *like every other control*". Kalimat itu tidak benar untuk empat kontrol
+  di atas, dan sekarang benar. Cap `22rem` tetap ada **di `.fdy-field`**, jadi field yang tak
+  dilebarkan siapa pun tak berubah sedikit pun.
+  Ikut terangkat, dan tak ada di laporan mana pun: `.fdy-autocomplete` dan `.fdy-cascade` di field
+  `--w-2xl` (25rem) berhenti 48px lebih pendek **di dalam filterbar sendiri** — container yang kit
+  kira sudah beres. Aturan lama di `filterbar.css` dihapus, bukan dibiarkan di samping yang baru:
+  dua aturan yang mengatakan hal sama persis adalah cara filterbar jadi tahu sesuatu yang tak
+  diketahui `input.css`.
+- **`.fdy-pagination` akhirnya benar-benar dikirim** (#050 §2). `COMPONENTS.md` menyuruh konsumen
+  menulis `<nav class="fdy-pagination" data-fdy-table-pagination>`, dan class blok itu **nol match di
+  seluruh paket** — bukan di enhancer, bukan di tiga footer typed. Tak ada yang tampak berbeda,
+  karena blok itu memang tak punya rule (`NEXT-UP` #9), tapi selector konsumen atau asersi e2e pada
+  blok itu **lulus terhadap markup tulisan tangan dan gagal terhadap keluaran kit sendiri**, padahal
+  kedua jalur seharusnya bisa saling menggantikan. Enhancer kini menyetelnya sekali saat init;
+  `FdyTableFooter` Vue/React/Blazor merendernya.
+
+### Added
+- **`.fdy-stats--inline`** — strip KPI yang **memeluk angkanya** alih-alih membentang, untuk yang
+  duduk di samping judul halaman (#050 §1). Ini jawaban atas cacat yang tak bisa diperbaiki dengan
+  dokumentasi saja: `.fdy-stat` membawa `container-type:inline-size` (itu yang memberi `__value`
+  tipe fluidnya), dan **inline-size containment berarti tile tak menyumbang lebar intrinsik sama
+  sekali**. Jadi floor `11rem` bawaan bukan pilihan rasa — ia satu-satunya yang memberi track itu
+  ukuran — dan konsumen yang me-retrack grid ke konten mendapat tiga track nol: tiga label saling
+  menimpa (`COMPAMEMBERSTA…`) dan halaman meluber ke samping. Terukur dari header
+  `IDU_EMATE_ACCT_WEB`: strip 40px, seluruhnya gap. `justify-items` lebih tajam lagi — apa pun
+  selain `stretch` mengecilkan tile ke sumbangan nol itu **walau track-nya sudah benar lebarnya**.
+  `--inline` melepas container-nya, jadi tile-nya berukuran sesuai kontennya sendiri dan `__value`
+  memakai `--text-3xl` datar: track yang seukuran kontennya tak pernah jadi track sempit yang
+  membuat tipe fluid itu ada. Konsumen tak perlu lagi menebak floor sendiri.
+
+### Docs
+- **`COMPONENTS.md` §Stats akhirnya menyebut containment-nya.** `container-type`, `cqw`,
+  `inline-size` dan `contain` nol match di seluruh berkas itu sebelum rilis ini, padahal detail
+  implementasi tipe `__value` itu bocor langsung ke kontrak layout siapa pun yang me-retrack grid-nya.
+  Kini tertulis sebagai batasan: override `grid-template-columns` wajib punya floor eksplisit, dan
+  `justify-items` harus tetap `stretch`.
+- **§Field menyebut cap-nya.** `22rem` dan `max-width` juga nol match di `COMPONENTS.md` sebelum ini,
+  jadi cap maupun pengecualian filterbar-nya hanya bisa ditemukan dengan mengukur form yang sudah
+  dirender. Aturannya sekarang satu kalimat: **beri ukuran pada field, jangan pada kontrolnya.**
+
+### Guarded
+- `test/css.test.mjs`: bentuk CSS-nya — keempat kontrol dilepas di `.fdy-field`, `.fdy-field`
+  mempertahankan cap-nya sendiri, aturan filterbar lama tak boleh kembali, dan `--inline` harus
+  keluar dari container maupun clamp `cqw`-nya.
+- `browser/field-width.mjs` (6 test, Chrome sungguhan): hasilnya — keduanya adalah **outcome layout**
+  yang tak terlihat di stylesheet. Termasuk asersi bahwa gap yang terlihat pembaca sama dengan gap
+  yang ditulis penulisnya, dan tile `--inline` diukur terhadap referensi yang berukuran-konten
+  secara konstruksi, bukan sekadar "bukan nol": tanpa itu, satu track yang masih memegang floor
+  `11rem` lolos karena strip-nya tetap masuk akal.
+- `test/docs.test.mjs`: berkas mana pun yang merender `__element` sebuah blok harus menyebut bloknya.
+  Dicari **secara struktur**, bukan dari daftar empat berkas yang salah — renderer pager kelima
+  adalah yang tak akan diingat siapa pun.
+
 ## [3.0.0] - 2026-08-26
 
 **Kenapa MAJOR padahal rilis ini seluruhnya aditif.** Tak ada satu pun perubahan di bawah yang

package/COMPONENTS.md

@@ -227,7 +227,22 @@ carry the doctrine in markup.
   sits half a label-height low in it, so labelled fields belong in `.fdy-filterbar`
   (`align-items:flex-end`). In a toolbar, hide the label with `.fdy-visually-hidden`.
 - `.fdy-stats` is a KPI grid of `.fdy-stat` (`__label` `__value` `__meta`). Deliberately **not**
-  cards. `.fdy-stats--boxed` for one shared surface with dividers.
+  cards. `.fdy-stats--boxed` for one shared surface with dividers; `.fdy-stats--inline` for a strip
+  that **hugs its numbers** instead of spanning the row, which is what a page header wants.
+- **A `.fdy-stat` in the default grid is size-contained, and that constrains what you may override.**
+  It carries `container-type:inline-size` — that is what gives `__value` its fluid type — and
+  inline-size containment means the tile contributes **no intrinsic width**. Two consequences, and
+  re-tracking the grid hits both at once:
+  - Content-based track sizing cannot work: `auto`, `max-content`, `min-content` and `minmax(0, …)`
+    all resolve to a **zero** track. The default `minmax(11rem, 1fr)` floor is not a style choice,
+    it is the only thing giving these tracks a size, so **any `grid-template-columns` override needs
+    an explicit floor of its own**.
+  - `justify-items` must stay `stretch`. A non-stretched grid item is sized to its (zero)
+    contribution, so `start` collapses the tile to nothing **even when the track is correctly wide**.
+
+  Use `--inline` rather than working around either: it drops the container, so its tiles size to
+  their own content, and its `__value` keeps the flat `--text-3xl`. A hugging track is never the
+  narrow track the fluid type exists for.
 
 ```html
 <div class="fdy-page">
@@ -409,6 +424,13 @@ native control, otherwise a `<div>` + explicitly associated label.
 
 - `.fdy-field` (+ `--full` inside `.fdy-form-grid`; widths `--w-sm` `--w-lg` `--w-xl` `--w-2xl`
   `--w-grow` inside `.fdy-filterbar`)
+- **The field owns the width; the control in it follows.** `.fdy-field` caps at `22rem` so a lone
+  field does not run the width of the page. `.fdy-form-grid` and `.fdy-filterbar` lift that cap, and
+  so does any width you state yourself — and in every one of those cases the control (`.fdy-input`,
+  `.fdy-input-group`, `.fdy-combo`, `.fdy-autocomplete`, `.fdy-cascade`, and the pickers) spans the
+  field. So **size the field, never the control**: styling the control instead leaves the field
+  wider than what is in it, and that dead space is invisible in the DOM — it reads on screen as a
+  gap you did not write.
 - `.fdy-label` (+`--required`) · `.fdy-input` (+`--error`) · `.fdy-textarea` · `.fdy-help` (+`--error`)
 
 **Grouped controls are a `<fieldset>`, not a new block.** Put `.fdy-field` on the fieldset and
@@ -1216,7 +1238,9 @@ and breaks the moment the class changes.
 ## Pagination — `.fdy-pagination`
 The block class on the `<nav>` is a **structural hook only**. It carries no rule of its own; the
 `__list` / `__link` / `__ellipsis` elements do all the styling, and the data table targets
-`data-fdy-table-pagination`. Keep it on the wrapper anyway, for consistency with the rest of the kit.
+`data-fdy-table-pagination`. Keep it on the wrapper anyway, for consistency with the rest of the kit
+— and the kit keeps it too: the enhancer sets it on the element it finds, and all three typed
+footers render it, so a selector or an e2e assertion on the block matches either path.
 
 `<nav class="fdy-pagination" aria-label="Pagination">` → `<ul class="fdy-pagination__list">`;
 each item is a `.fdy-pagination__link` (`<button>` when navigable, `<span aria-current="page">`

package/README.id.md

@@ -5,7 +5,7 @@
 > **Lebih banyak _free day_ buat dev. UI kit-nya sudah siap pakai.**
 
 [![Live docs](https://img.shields.io/badge/docs-live-2050d8?style=flat-square)](https://cahyo-dimas.github.io/freeday-ui-kit/)
-[![Release](https://img.shields.io/badge/release-v3.0.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.0.0)
+[![Release](https://img.shields.io/badge/release-v3.1.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.1.0)
 
 UI KIT yang token-driven & framework-agnostic. Satu sumber kebenaran untuk warna, tipografi,
 spasi, dan komponen. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.

package/README.md

@@ -5,7 +5,7 @@
 > **More free days for devs. The UI kit is ready to use.**
 
 [![Live docs](https://img.shields.io/badge/docs-live-2050d8?style=flat-square)](https://cahyo-dimas.github.io/freeday-ui-kit/)
-[![Release](https://img.shields.io/badge/release-v3.0.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.0.0)
+[![Release](https://img.shields.io/badge/release-v3.1.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.1.0)
 
 A token-driven, framework-agnostic UI kit. One source of truth for color, typography,
 spacing, and components. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.

package/adapters/blazor/FdyTableFooter.razor

@@ -24,7 +24,7 @@
 
         @if (HasPager)
         {
-            <nav aria-label="Pagination">
+            <nav class="fdy-pagination" aria-label="Pagination">
                 <ul class="fdy-pagination__list">
                     <li>
                         <button type="button" class="fdy-pagination__link" aria-label="Previous page"

package/adapters/react/components/FdyTableFooter.tsx

@@ -75,7 +75,7 @@ export function FdyTableFooter(props: FdyTableFooterProps): JSX.Element | null {
       )}
 
       {hasPager && (
-        <nav aria-label="Pagination">
+        <nav className="fdy-pagination" aria-label="Pagination">
           <ul className="fdy-pagination__list">
             <li>
               <button type="button" className="fdy-pagination__link" aria-label="Previous page" disabled={currentPage1 === 1} onClick={(): void => goTo(currentPage1 - 1)}>‹</button>

package/adapters/vue/components/FdyTableFooter.vue

@@ -90,7 +90,7 @@ function onSize(value: string): void {
       />
     </div>
 
-    <nav v-if="hasPager" aria-label="Pagination">
+    <nav v-if="hasPager" class="fdy-pagination" aria-label="Pagination">
       <ul class="fdy-pagination__list">
         <li>
           <button

package/dist/freeday-table.js

@@ -84,6 +84,13 @@
     var countEl = root.querySelector('[data-fdy-table-count]');
     var infoEl = root.querySelector('[data-fdy-table-info]');
     var pagerEl = root.querySelector('[data-fdy-table-pagination]');
+    /* COMPONENTS.md documents the wrapper as <nav class="fdy-pagination" data-fdy-table-pagination>
+       and nothing in the kit ever wrote that class, here or in the three typed footers (#050 §2).
+       It carries no rule (NEXT-UP #9), so nothing rendered differently, but a consumer selector or
+       an e2e assertion on the block passed against hand-written markup and failed against the kit's
+       own output, and the raw and typed paths are supposed to be interchangeable. Set once at init,
+       not per render: the wrapper outlives every pager we build into it. */
+    if (pagerEl) pagerEl.classList.add('fdy-pagination');
     var pageSizeEl = root.querySelector('[data-fdy-table-page-size]');
     var selectAll = root.querySelector('[data-fdy-select-all]');
     var pageSize = parseInt(root.getAttribute('data-page-size'), 10) || 0; // 0 = no pagination

package/dist/freeday.bundle.css

@@ -1242,7 +1242,16 @@ a { color: var(--color-primary); }
 
 /* The caption sits on a solid surface, not on the scrim. A scrim is semi-transparent over unknown
  * content, so text on it has no computable contrast ratio and no gate could ever cover it. On
- * --color-surface it is the same pair the contrast suite already checks. */
+ * --color-surface it is the same pair the contrast suite already checks.
+ *
+ * THIS IS ALSO WHY THIS PANEL DOES NOT JOIN THE GLASS AXIS, and the omission is a decision rather
+ * than an oversight. Every other raised panel reads --color-surface-raised and frosts under
+ * [data-style="glass"]; this one stays opaque. The glass gate asserts its ink against the panel
+ * composited over the PAGE GROUND (--color-surface-2), which is what sits behind a card or a modal.
+ * Behind this one is the scrim, over arbitrary content — the very case that has no computable
+ * ratio. A frosted busy panel would be the one surface in the kit whose caption nothing could
+ * verify, while it is up precisely because the app is doing something the reader must not
+ * interrupt. Left opaque on purpose; do not "fix" it for consistency. */
 .fdy-busy__panel{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-6) var(--space-8);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-lift);max-width:min(20rem,calc(100vw - var(--space-8)));}
 .fdy-busy__mark{display:flex;align-items:center;justify-content:center;min-height:2.5rem;}
 .fdy-busy__caption{margin:0;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text);text-align:center;}
@@ -1670,9 +1679,22 @@ a { color: var(--color-primary); }
    grid track, `container-type:inline-size` on a standalone .fdy-stat would stop it sizing to its
    own content. The unconditional rule above stays as the fallback wherever @container is missing. */
 @supports (container-type:inline-size){
-  .fdy-stats>.fdy-stat{container-type:inline-size;}
-  .fdy-stats>.fdy-stat .fdy-stat__value{font-size:clamp(var(--text-xl),11cqw,var(--text-3xl));}
-}
+  .fdy-stats:not(.fdy-stats--inline)>.fdy-stat{container-type:inline-size;}
+  .fdy-stats:not(.fdy-stats--inline)>.fdy-stat .fdy-stat__value{font-size:clamp(var(--text-xl),11cqw,var(--text-3xl));}
+}
+/* The price of that container, and the reason --inline opts out of it (#050). `container-type`
+   applies inline-size CONTAINMENT: the tile's min-content and max-content contributions are both
+   ZERO. So the 11rem floor above is not a taste choice, it is the only thing giving these tracks a
+   size, and re-tracking the grid on content (`auto`, `max-content`, `minmax(0,…)`) resolves every
+   track to 0. `justify-items` is the sharper edge: anything but the default `stretch` sizes the
+   tile to that zero contribution even when the track is correctly wide, and three labels paint on
+   top of each other. Measured from IDU_EMATE_ACCT_WEB's page header, where a hugging strip came out
+   40px wide, all of it gap.
+   --inline is the shape that header wanted: a strip that hugs its numbers and sits beside a page
+   title, instead of a full-width band whose 11rem floor collapses to one column at 390px. It cannot
+   have both, so it drops the container and keeps the flat --text-3xl the base rule already sets;
+   a track sized to its own content is never the narrow track the clamp exists for. */
+.fdy-stats--inline{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,max-content);}
 .fdy-stats--boxed{background:var(--color-surface);border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);gap:0;}
 .fdy-stats--boxed .fdy-stat{padding:var(--space-5);border-right:var(--bw) solid var(--color-border-muted);}
 .fdy-stats--boxed .fdy-stat:last-child{border-right:0;}
@@ -1878,8 +1900,9 @@ a { color: var(--color-primary); }
 /* Fields are direct children. Drop the standalone field's 22rem cap; default to the
  * medium column width with no unbounded growth (that's what caused the raggedness). */
 .fdy-filterbar>.fdy-field{max-width:none;flex:0 0 auto;width:12rem;}
-/* Controls fill their field's column (drop the standalone input-group/combo caps). */
-.fdy-filterbar>.fdy-field .fdy-input-group,.fdy-filterbar>.fdy-field .fdy-combo{max-width:none;width:100%;}
+/* Controls fill their field's column: released in input.css for every field, not just this one.
+   The rule used to live here, naming the input group and the combo only, which is why an
+   .fdy-autocomplete or an .fdy-cascade in a --w-2xl field still stopped 48px short of it (#051). */
 /* Column-width rhythm, pick one per field so bars across the app line up. */
 .fdy-filterbar>.fdy-field--w-sm{width:9rem;}
 .fdy-filterbar>.fdy-field--w-lg{width:15rem;}
@@ -1956,6 +1979,15 @@ a { color: var(--color-primary); }
 
 /* Freeday. Field & Input */
 .fdy-field{display:flex;flex-direction:column;gap:var(--space-2);max-width:22rem;}
+/* Inside a labelled field, a control fills the field (#051). The 22rem cap those controls carry is
+   for one standing on its own, with no field to take a width from; #017 already released the date
+   and time pickers here for exactly this reason, and its comment claims a picker then fills its
+   field "like every other control". That was not true of these four: a `--full` row in a
+   .fdy-form-grid held a 352px combo under a 600px label, and a 26rem toolbar search field hid 64px
+   of dead space INSIDE itself, so an author who wrote `gap:var(--space-3)` measured 76px on screen.
+   The field's own max-width above is what governs, and it still caps a field nobody has widened, so
+   this changes nothing wherever the cap was already doing its job. */
+.fdy-field>.fdy-input-group,.fdy-field>.fdy-combo,.fdy-field>.fdy-autocomplete,.fdy-field>.fdy-cascade{max-width:none;}
 /* A grouped field is legitimately a <fieldset> (it needs a <legend>), e.g. a radio/checkbox group.
    Neutralise the UA groove border / padding / min-inline-size so it lays out identically to the
    <div> form (min-inline-size:min-content would otherwise block the filterbar column widths). */

package/dist/freeday.css

@@ -364,7 +364,16 @@ a { color: var(--color-primary); }
 
 /* The caption sits on a solid surface, not on the scrim. A scrim is semi-transparent over unknown
  * content, so text on it has no computable contrast ratio and no gate could ever cover it. On
- * --color-surface it is the same pair the contrast suite already checks. */
+ * --color-surface it is the same pair the contrast suite already checks.
+ *
+ * THIS IS ALSO WHY THIS PANEL DOES NOT JOIN THE GLASS AXIS, and the omission is a decision rather
+ * than an oversight. Every other raised panel reads --color-surface-raised and frosts under
+ * [data-style="glass"]; this one stays opaque. The glass gate asserts its ink against the panel
+ * composited over the PAGE GROUND (--color-surface-2), which is what sits behind a card or a modal.
+ * Behind this one is the scrim, over arbitrary content — the very case that has no computable
+ * ratio. A frosted busy panel would be the one surface in the kit whose caption nothing could
+ * verify, while it is up precisely because the app is doing something the reader must not
+ * interrupt. Left opaque on purpose; do not "fix" it for consistency. */
 .fdy-busy__panel{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-6) var(--space-8);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-lift);max-width:min(20rem,calc(100vw - var(--space-8)));}
 .fdy-busy__mark{display:flex;align-items:center;justify-content:center;min-height:2.5rem;}
 .fdy-busy__caption{margin:0;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text);text-align:center;}
@@ -792,9 +801,22 @@ a { color: var(--color-primary); }
    grid track, `container-type:inline-size` on a standalone .fdy-stat would stop it sizing to its
    own content. The unconditional rule above stays as the fallback wherever @container is missing. */
 @supports (container-type:inline-size){
-  .fdy-stats>.fdy-stat{container-type:inline-size;}
-  .fdy-stats>.fdy-stat .fdy-stat__value{font-size:clamp(var(--text-xl),11cqw,var(--text-3xl));}
+  .fdy-stats:not(.fdy-stats--inline)>.fdy-stat{container-type:inline-size;}
+  .fdy-stats:not(.fdy-stats--inline)>.fdy-stat .fdy-stat__value{font-size:clamp(var(--text-xl),11cqw,var(--text-3xl));}
 }
+/* The price of that container, and the reason --inline opts out of it (#050). `container-type`
+   applies inline-size CONTAINMENT: the tile's min-content and max-content contributions are both
+   ZERO. So the 11rem floor above is not a taste choice, it is the only thing giving these tracks a
+   size, and re-tracking the grid on content (`auto`, `max-content`, `minmax(0,…)`) resolves every
+   track to 0. `justify-items` is the sharper edge: anything but the default `stretch` sizes the
+   tile to that zero contribution even when the track is correctly wide, and three labels paint on
+   top of each other. Measured from IDU_EMATE_ACCT_WEB's page header, where a hugging strip came out
+   40px wide, all of it gap.
+   --inline is the shape that header wanted: a strip that hugs its numbers and sits beside a page
+   title, instead of a full-width band whose 11rem floor collapses to one column at 390px. It cannot
+   have both, so it drops the container and keeps the flat --text-3xl the base rule already sets;
+   a track sized to its own content is never the narrow track the clamp exists for. */
+.fdy-stats--inline{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,max-content);}
 .fdy-stats--boxed{background:var(--color-surface);border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);gap:0;}
 .fdy-stats--boxed .fdy-stat{padding:var(--space-5);border-right:var(--bw) solid var(--color-border-muted);}
 .fdy-stats--boxed .fdy-stat:last-child{border-right:0;}
@@ -1000,8 +1022,9 @@ a { color: var(--color-primary); }
 /* Fields are direct children. Drop the standalone field's 22rem cap; default to the
  * medium column width with no unbounded growth (that's what caused the raggedness). */
 .fdy-filterbar>.fdy-field{max-width:none;flex:0 0 auto;width:12rem;}
-/* Controls fill their field's column (drop the standalone input-group/combo caps). */
-.fdy-filterbar>.fdy-field .fdy-input-group,.fdy-filterbar>.fdy-field .fdy-combo{max-width:none;width:100%;}
+/* Controls fill their field's column: released in input.css for every field, not just this one.
+   The rule used to live here, naming the input group and the combo only, which is why an
+   .fdy-autocomplete or an .fdy-cascade in a --w-2xl field still stopped 48px short of it (#051). */
 /* Column-width rhythm, pick one per field so bars across the app line up. */
 .fdy-filterbar>.fdy-field--w-sm{width:9rem;}
 .fdy-filterbar>.fdy-field--w-lg{width:15rem;}
@@ -1078,6 +1101,15 @@ a { color: var(--color-primary); }
 
 /* Freeday. Field & Input */
 .fdy-field{display:flex;flex-direction:column;gap:var(--space-2);max-width:22rem;}
+/* Inside a labelled field, a control fills the field (#051). The 22rem cap those controls carry is
+   for one standing on its own, with no field to take a width from; #017 already released the date
+   and time pickers here for exactly this reason, and its comment claims a picker then fills its
+   field "like every other control". That was not true of these four: a `--full` row in a
+   .fdy-form-grid held a 352px combo under a 600px label, and a 26rem toolbar search field hid 64px
+   of dead space INSIDE itself, so an author who wrote `gap:var(--space-3)` measured 76px on screen.
+   The field's own max-width above is what governs, and it still caps a field nobody has widened, so
+   this changes nothing wherever the cap was already doing its job. */
+.fdy-field>.fdy-input-group,.fdy-field>.fdy-combo,.fdy-field>.fdy-autocomplete,.fdy-field>.fdy-cascade{max-width:none;}
 /* A grouped field is legitimately a <fieldset> (it needs a <legend>), e.g. a radio/checkbox group.
    Neutralise the UA groove border / padding / min-inline-size so it lays out identically to the
    <div> form (min-inline-size:min-content would otherwise block the filterbar column widths). */

package/dist/freeday.js

@@ -3905,6 +3905,13 @@
     var countEl = root.querySelector('[data-fdy-table-count]');
     var infoEl = root.querySelector('[data-fdy-table-info]');
     var pagerEl = root.querySelector('[data-fdy-table-pagination]');
+    /* COMPONENTS.md documents the wrapper as <nav class="fdy-pagination" data-fdy-table-pagination>
+       and nothing in the kit ever wrote that class, here or in the three typed footers (#050 §2).
+       It carries no rule (NEXT-UP #9), so nothing rendered differently, but a consumer selector or
+       an e2e assertion on the block passed against hand-written markup and failed against the kit's
+       own output, and the raw and typed paths are supposed to be interchangeable. Set once at init,
+       not per render: the wrapper outlives every pager we build into it. */
+    if (pagerEl) pagerEl.classList.add('fdy-pagination');
     var pageSizeEl = root.querySelector('[data-fdy-table-page-size]');
     var selectAll = root.querySelector('[data-fdy-select-all]');
     var pageSize = parseInt(root.getAttribute('data-page-size'), 10) || 0; // 0 = no pagination

package/docs/getting-started.md

@@ -191,7 +191,7 @@ live docs also have a copy button per component.
 ```bash
 npm i @cahyo-dimas/freeday
 ```
-Lands in `package.json` as `"@cahyo-dimas/freeday": "^3.0.0"` (public npm package). `dist/` is
+Lands in `package.json` as `"@cahyo-dimas/freeday": "^3.1.0"` (public npm package). `dist/` is
 committed and published → no build step; `npm ci` runs without auth.
 
 ### 2. Import the CSS + enhancers **once** in your entry (`src/main.ts`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cahyo-dimas/freeday",
-  "version": "3.0.0",
+  "version": "3.1.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 --test-concurrency=3 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 browser/cfl-multi.mjs browser/crowding.mjs browser/over-dialog.mjs browser/chart-scale.mjs browser/overlay-stack.mjs browser/chart-a11y.mjs browser/app-shell.mjs browser/picker-states.mjs browser/harness-contract.mjs",
+    "test:browser": "node --test --test-concurrency=3 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 browser/field-width.mjs browser/cfl-multi.mjs browser/crowding.mjs browser/over-dialog.mjs browser/chart-scale.mjs browser/overlay-stack.mjs browser/chart-a11y.mjs browser/app-shell.mjs browser/picker-states.mjs browser/harness-contract.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/busy.css

@@ -21,7 +21,16 @@
 
 /* The caption sits on a solid surface, not on the scrim. A scrim is semi-transparent over unknown
  * content, so text on it has no computable contrast ratio and no gate could ever cover it. On
- * --color-surface it is the same pair the contrast suite already checks. */
+ * --color-surface it is the same pair the contrast suite already checks.
+ *
+ * THIS IS ALSO WHY THIS PANEL DOES NOT JOIN THE GLASS AXIS, and the omission is a decision rather
+ * than an oversight. Every other raised panel reads --color-surface-raised and frosts under
+ * [data-style="glass"]; this one stays opaque. The glass gate asserts its ink against the panel
+ * composited over the PAGE GROUND (--color-surface-2), which is what sits behind a card or a modal.
+ * Behind this one is the scrim, over arbitrary content — the very case that has no computable
+ * ratio. A frosted busy panel would be the one surface in the kit whose caption nothing could
+ * verify, while it is up precisely because the app is doing something the reader must not
+ * interrupt. Left opaque on purpose; do not "fix" it for consistency. */
 .fdy-busy__panel{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-6) var(--space-8);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-lift);max-width:min(20rem,calc(100vw - var(--space-8)));}
 .fdy-busy__mark{display:flex;align-items:center;justify-content:center;min-height:2.5rem;}
 .fdy-busy__caption{margin:0;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text);text-align:center;}

package/src/components/composition.css

@@ -60,9 +60,22 @@
    grid track, `container-type:inline-size` on a standalone .fdy-stat would stop it sizing to its
    own content. The unconditional rule above stays as the fallback wherever @container is missing. */
 @supports (container-type:inline-size){
-  .fdy-stats>.fdy-stat{container-type:inline-size;}
-  .fdy-stats>.fdy-stat .fdy-stat__value{font-size:clamp(var(--text-xl),11cqw,var(--text-3xl));}
+  .fdy-stats:not(.fdy-stats--inline)>.fdy-stat{container-type:inline-size;}
+  .fdy-stats:not(.fdy-stats--inline)>.fdy-stat .fdy-stat__value{font-size:clamp(var(--text-xl),11cqw,var(--text-3xl));}
 }
+/* The price of that container, and the reason --inline opts out of it (#050). `container-type`
+   applies inline-size CONTAINMENT: the tile's min-content and max-content contributions are both
+   ZERO. So the 11rem floor above is not a taste choice, it is the only thing giving these tracks a
+   size, and re-tracking the grid on content (`auto`, `max-content`, `minmax(0,…)`) resolves every
+   track to 0. `justify-items` is the sharper edge: anything but the default `stretch` sizes the
+   tile to that zero contribution even when the track is correctly wide, and three labels paint on
+   top of each other. Measured from IDU_EMATE_ACCT_WEB's page header, where a hugging strip came out
+   40px wide, all of it gap.
+   --inline is the shape that header wanted: a strip that hugs its numbers and sits beside a page
+   title, instead of a full-width band whose 11rem floor collapses to one column at 390px. It cannot
+   have both, so it drops the container and keeps the flat --text-3xl the base rule already sets;
+   a track sized to its own content is never the narrow track the clamp exists for. */
+.fdy-stats--inline{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,max-content);}
 .fdy-stats--boxed{background:var(--color-surface);border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);gap:0;}
 .fdy-stats--boxed .fdy-stat{padding:var(--space-5);border-right:var(--bw) solid var(--color-border-muted);}
 .fdy-stats--boxed .fdy-stat:last-child{border-right:0;}

package/src/components/filterbar.css

@@ -13,8 +13,9 @@
 /* Fields are direct children. Drop the standalone field's 22rem cap; default to the
  * medium column width with no unbounded growth (that's what caused the raggedness). */
 .fdy-filterbar>.fdy-field{max-width:none;flex:0 0 auto;width:12rem;}
-/* Controls fill their field's column (drop the standalone input-group/combo caps). */
-.fdy-filterbar>.fdy-field .fdy-input-group,.fdy-filterbar>.fdy-field .fdy-combo{max-width:none;width:100%;}
+/* Controls fill their field's column: released in input.css for every field, not just this one.
+   The rule used to live here, naming the input group and the combo only, which is why an
+   .fdy-autocomplete or an .fdy-cascade in a --w-2xl field still stopped 48px short of it (#051). */
 /* Column-width rhythm, pick one per field so bars across the app line up. */
 .fdy-filterbar>.fdy-field--w-sm{width:9rem;}
 .fdy-filterbar>.fdy-field--w-lg{width:15rem;}

package/src/components/input.css

@@ -1,5 +1,14 @@
 /* Freeday. Field & Input */
 .fdy-field{display:flex;flex-direction:column;gap:var(--space-2);max-width:22rem;}
+/* Inside a labelled field, a control fills the field (#051). The 22rem cap those controls carry is
+   for one standing on its own, with no field to take a width from; #017 already released the date
+   and time pickers here for exactly this reason, and its comment claims a picker then fills its
+   field "like every other control". That was not true of these four: a `--full` row in a
+   .fdy-form-grid held a 352px combo under a 600px label, and a 26rem toolbar search field hid 64px
+   of dead space INSIDE itself, so an author who wrote `gap:var(--space-3)` measured 76px on screen.
+   The field's own max-width above is what governs, and it still caps a field nobody has widened, so
+   this changes nothing wherever the cap was already doing its job. */
+.fdy-field>.fdy-input-group,.fdy-field>.fdy-combo,.fdy-field>.fdy-autocomplete,.fdy-field>.fdy-cascade{max-width:none;}
 /* A grouped field is legitimately a <fieldset> (it needs a <legend>), e.g. a radio/checkbox group.
    Neutralise the UA groove border / padding / min-inline-size so it lays out identically to the
    <div> form (min-inline-size:min-content would otherwise block the filterbar column widths). */