@cahyo-dimas/freeday 3.1.0 → 3.3.0

package/adapters/vue/components/FdyCfl.vue

@@ -72,6 +72,14 @@ const props = defineProps<{
   describedby?: string;
   id?: string;
   ariaLabelledby?: string;
+  /** Render the dialog and NO field, for a caller whose trigger is already its own — a chip, a table
+   *  cell, a menu item — opened by ref: `picker.value?.open()`. The raw path has had exactly this
+   *  since the enhancer's `[data-fdy-cfl-open]`; the typed wrappers were a field *plus* a dialog
+   *  with no way in, so a screen that could not spend a 22rem readonly input per trigger had to
+   *  hand-roll the picker (#054). The host generates no box, so it can sit anywhere. `placeholder`,
+   *  `clearable`, `id` and the field's aria props have nothing to name here and are ignored;
+   *  `disabled` and `readonly` still refuse to open. */
+  dialogOnly?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -99,6 +107,7 @@ const loading: Ref<boolean> = ref(false);
 const error: Ref<Error | null> = ref(null);
 const activeIndex: Ref<number> = ref(-1);
 
+const isDialogOnly: ComputedRef<boolean> = computed((): boolean => props.dialogOnly === true);
 const isDisabled: ComputedRef<boolean> = computed((): boolean => props.disabled === true);
 const isReadonly: ComputedRef<boolean> = computed((): boolean => props.readonly === true);
 
@@ -321,6 +330,11 @@ function onClose(): void {
   triggerEl.value?.focus();
 }
 
+/* The dialog is reachable from outside, which is what makes `dialogOnly` usable at all: with no
+   field there is no trigger, and `open()` is the only door. Both guard exactly as the trigger did,
+   so a programmatic open cannot bypass `disabled`/`readonly`. */
+defineExpose({ open: openDialog, close: closeDialog });
+
 function cellText(row: Row, key: keyof Row & string): string {
   const value: unknown = row[key];
   return value === null || value === undefined ? '' : String(value);
@@ -332,45 +346,47 @@ onBeforeUnmount((): void => {
 </script>
 
 <template>
-  <div class="fdy-input-group">
-    <input
-      :id="fieldId"
-      class="fdy-input"
-      type="text"
-      readonly
-      :value="displayValue"
-      :placeholder="placeholder"
-      :aria-labelledby="ariaLabelledby"
-      :aria-invalid="isInvalid ? 'true' : undefined"
-      :aria-describedby="describedby"
-      :disabled="isDisabled"
-    />
-    <button
-      v-if="showClear"
-      type="button"
-      class="fdy-input-group__btn"
-      :aria-label="clearLabelText"
-      @click="clearValue"
-    >
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
-        <path d="M6 6l12 12M18 6L6 18"></path>
-      </svg>
-    </button>
-    <button
-      ref="triggerEl"
-      type="button"
-      class="fdy-input-group__btn"
-      aria-haspopup="dialog"
-      :aria-labelledby="ariaLabelledby"
-      :aria-label="ariaLabelledby ? undefined : (openLabel ?? 'Open search')"
-      :disabled="isDisabled || isReadonly"
-      @click="openDialog"
-    >
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-        <circle cx="11" cy="11" r="7"></circle>
-        <path d="m21 21-4.35-4.35"></path>
-      </svg>
-    </button>
+  <div :class="isDialogOnly ? 'fdy-cfl__host' : 'fdy-input-group'">
+    <template v-if="!isDialogOnly">
+      <input
+        :id="fieldId"
+        class="fdy-input"
+        type="text"
+        readonly
+        :value="displayValue"
+        :placeholder="placeholder"
+        :aria-labelledby="ariaLabelledby"
+        :aria-invalid="isInvalid ? 'true' : undefined"
+        :aria-describedby="describedby"
+        :disabled="isDisabled"
+      />
+      <button
+        v-if="showClear"
+        type="button"
+        class="fdy-input-group__btn"
+        :aria-label="clearLabelText"
+        @click="clearValue"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+          <path d="M6 6l12 12M18 6L6 18"></path>
+        </svg>
+      </button>
+      <button
+        ref="triggerEl"
+        type="button"
+        class="fdy-input-group__btn"
+        aria-haspopup="dialog"
+        :aria-labelledby="ariaLabelledby"
+        :aria-label="ariaLabelledby ? undefined : (openLabel ?? 'Open search')"
+        :disabled="isDisabled || isReadonly"
+        @click="openDialog"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <circle cx="11" cy="11" r="7"></circle>
+          <path d="m21 21-4.35-4.35"></path>
+        </svg>
+      </button>
+    </template>
 
     <dialog ref="dialogEl" class="fdy-modal fdy-modal--cfl" :aria-labelledby="titleId" @close="onClose" @keydown="onKeydown">
       <div class="fdy-modal__header">
@@ -380,7 +396,7 @@ onBeforeUnmount((): void => {
 
       <div class="fdy-modal__body">
         <div class="fdy-cfl__search">
-          <div class="fdy-input-group" style="max-width:none">
+          <div class="fdy-input-group">
             <span class="fdy-input-group__addon fdy-input-group__addon--icon">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                 <circle cx="11" cy="11" r="7"></circle>

package/adapters/vue/components/FdyModal.vue

@@ -16,7 +16,10 @@ import { computed, onMounted, useId, watch, type ComputedRef, type Ref, ref } fr
 const props = withDefaults(defineProps<{
   open: boolean;
   title: string;
-  size?: 'sm' | 'md' | 'lg' | 'wide';
+  /* 'cfl' is the width the choose-from-list dialog uses (46rem). It was reachable from the CSS
+     and from nowhere else until #053: FdyCfl sets the class itself, so the gap only ever showed up
+     when an app built its own dialog at that width and had to hand-write the class. */
+  size?: 'sm' | 'md' | 'lg' | 'wide' | 'cfl';
   dismissible?: boolean;
   /** aria-label for the × button. Default 'Close'. Blazor has had `CloseLabel` since it
    *  shipped; these two hard-coded the string, so a non-English app could not rename it. */

package/dist/freeday.bundle.css

@@ -323,7 +323,7 @@
   --color-surface-raised: var(--color-surface);
   --color-text: var(--slate-100);
   --color-text-muted: var(--slate-400);
-  --color-text-subtle: var(--slate-500);
+  --color-text-subtle: var(--slate-450);
   --color-on-brand: var(--slate-0);
   --color-border: var(--slate-800);
   --color-border-strong: var(--slate-700);
@@ -387,7 +387,7 @@
   --color-surface-raised: var(--color-surface);
   --color-text: var(--slate-100);
   --color-text-muted: var(--slate-400);
-  --color-text-subtle: var(--slate-500);
+  --color-text-subtle: var(--slate-450);
   --color-on-brand: var(--slate-0);
   --color-border: var(--slate-800);
   --color-border-strong: var(--slate-700);
@@ -963,8 +963,15 @@ a { color: var(--color-primary); }
  * > (.fdy-app__topbar, .fdy-app__main)). The __content wrapper gives the sticky
  * topbar a tall containing block so it can travel, a bare grid cell can't. */
 .fdy-app{display:flex;align-items:stretch;min-height:100vh;background:var(--color-surface-2);}
-.fdy-app__sidebar{position:sticky;top:0;align-self:flex-start;height:100vh;overflow:hidden;flex:none;width:15.5rem;box-sizing:border-box;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border-right:var(--bw) solid var(--color-border);display:flex;flex-direction:column;transition:width var(--dur-slow) var(--ease-standard),border-right-width var(--dur-slow) var(--ease-standard);}
-.fdy-app__content{flex:1;min-width:0;display:flex;flex-direction:column;}
+.fdy-app__sidebar{position:sticky;top:0;align-self:flex-start;height:100vh;overflow:hidden;flex:none;width:var(--fdy-app-sidebar-w,15.5rem);box-sizing:border-box;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border-right:var(--bw) solid var(--color-border);display:flex;flex-direction:column;transition:width var(--dur-slow) var(--ease-standard),border-right-width var(--dur-slow) var(--ease-standard);}
+/* `min-height:0` is the height-axis twin of `min-width:0`, and its absence was invisible for as long
+ * as the shell scrolled the PAGE (#055 §2). A consumer that pins the shell to the viewport and
+ * scrolls .fdy-app__main instead hits it immediately: a column flex item's automatic minimum size is
+ * its content, so the scrolling child pushes this box — and the shell — open instead of scrolling.
+ * `flex:none` on the topbar is the same story one line down: it is a flex item in this column, and
+ * a topbar whose content wraps past `min-height` is a topbar that can be squeezed. Both consoles
+ * wrote these two rules independently, in app.css, before the fifth screen. */
+.fdy-app__content{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;}
 /* Brand is a fixed header, same height as the topbar so they align, and only
  * the nav below it scrolls. Bare text (no children) renders as one bold
  * display line via the rules on .fdy-app__brand itself. For a mark + two-line
@@ -1052,7 +1059,7 @@ a { color: var(--color-primary); }
      also apply — it would fight the transform for the same panel. */
   .fdy-app--nav-overlay.fdy-app--nav-collapsed .fdy-app__sidebar{width:16rem;border-right-width:var(--bw);}
 }
-.fdy-app__topbar{position:sticky;top:0;z-index:20;min-height:var(--space-16);display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-8);background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border-bottom:var(--bw) solid var(--color-border);}
+.fdy-app__topbar{position:sticky;top:0;z-index:20;flex:none;min-height:var(--space-16);display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-8);background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border-bottom:var(--bw) solid var(--color-border);}
 .fdy-app__title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-semibold);color:var(--color-text);margin:0 auto 0 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .fdy-app__main{flex:1;padding:var(--space-8);}
 .fdy-skip{position:absolute;left:var(--space-2);top:var(--space-2);background:var(--color-primary);color:var(--color-on-primary);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);z-index:100;transform:translateY(-250%);transition:transform var(--dur-fast) var(--ease-standard);}
@@ -1469,10 +1476,26 @@ a { color: var(--color-primary); }
 
 /* Search bar, single leading-icon field; Enter/typing filters the results. */
 .fdy-cfl__search{flex:none;padding:var(--space-4) var(--space-5);border-bottom:var(--bw) solid var(--color-border-muted);}
+/* The search group spans the bar. Four files wrote this as `style="max-width:none"` — both typed
+   adapters and both docs examples — which is the same missing vocabulary as #055 §1, one class over. */
+.fdy-cfl__search .fdy-input-group{max-width:none;}
+
+/* Field-less host (#054). With `dialogOnly` the typed wrappers render the dialog and no field, for a
+   caller whose trigger is its own — a chip, a table cell, a menu item — which is what the raw path
+   has always had in `[data-fdy-cfl-open]`. `display:contents` so the host generates no box at all:
+   a zero-size div would still be a flex item or a grid cell in whatever laid the trigger out. */
+.fdy-cfl__host{display:contents;}
 
-/* Results, dense rows, sticky header, its own scroll region. */
-.fdy-cfl__results{overflow:auto;max-height:min(24rem,50vh);}
+/* Results, dense rows, sticky header, its own scroll region.
+ *
+ * `container-type: inline-size` makes this box the query container for the stacked layout below.
+ * Safe here and nowhere near free in general: a size container stops contributing intrinsic inline
+ * size, which is what made `.fdy-stats--inline` collapse to three zero tracks in 3.1.0. This box
+ * takes its width from the dialog (`min(46rem, 100vw - …)`, an explicit width) and already scrolls
+ * its own content, so it never sized to the table to begin with. */
+.fdy-cfl__results{container:fdy-cfl / inline-size;overflow:auto;max-height:min(24rem,50vh);}
 .fdy-cfl__results .fdy-table th{position:sticky;top:0;z-index:1;}
+
 .fdy-cfl__row{cursor:pointer;}
 .fdy-cfl__row:hover{background:var(--color-surface-2);}
 .fdy-cfl__row:focus-visible{outline:none;background:var(--color-primary-soft);box-shadow:inset 2px 0 0 var(--color-primary);}
@@ -1490,6 +1513,54 @@ a { color: var(--color-primary); }
 .fdy-cfl__count{font-size:var(--text-sm);color:var(--color-text-muted);}
 .fdy-cfl__actions{display:flex;gap:var(--space-2);}
 
+/* Narrow: the same rows as list items, not table cells (#053).
+ *
+ * A 420px add-on panel gives this dialog ~372px. A three- or four-column master-data table in that
+ * space either squeezes every column below legibility or scrolls on both axes, in a dialog whose
+ * whole job is "search, look, click one". So the first cell becomes the title and the rest become
+ * one detail line under it — the shape a picker takes when it is narrow.
+ *
+ * A CONTAINER query, not a media query: the dialog is not the viewport. The same component is wide
+ * on a desktop page and narrow inside a docked panel, and only the container knows which.
+ *
+ * No ARIA roles come with this, and that is a MEASURED decision rather than an omission. The
+ * received wisdom from the responsive-table era is that `display:block` on a table box drops its
+ * implicit role; explicit `role="table"/"row"/"cell"` were written into all four stacks here on
+ * that belief and then taken out again, because Chrome's own accessibility tree says otherwise:
+ * with the rows at `display:flex`, stripping every `role` attribute leaves
+ * `table → row → cell` intact (Chromium 133; only `rowgroup`, which associates nothing, is lost).
+ * Redundant ARIA is what the kit's own rule calls worse than none, so the guard asserts the
+ * OUTCOME — that a stacked row is still a row in the a11y tree — and stays silent about how.
+ * `browser/cfl-narrow.mjs` is where a future engine that does dissolve them shows up as red.
+ *
+ * Column headers ARE a real loss here, and a deliberate one: `<thead>` is hidden, because a header
+ * row that costs a third of the width buys nothing when each row is labelled by its own title. */
+@container fdy-cfl (max-width: 30rem){
+  .fdy-cfl__results .fdy-table,
+  .fdy-cfl__results .fdy-table tbody{display:block;width:100%;}
+  .fdy-cfl__results .fdy-table thead{display:none;}
+  .fdy-cfl__row{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:var(--bw) solid var(--color-border-muted);}
+  .fdy-cfl__results .fdy-table tbody tr:last-child{border-bottom:0;}
+  .fdy-cfl__row > td{display:block;padding:0;border:0;}
+  /* The title takes the whole first line, which is what pushes every remaining cell onto the second
+     one — no selector has to know how many columns there are, or which of them is last. */
+  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check),
+  .fdy-cfl__row > .fdy-cfl__check + td{font-weight:var(--weight-semibold);color:var(--color-text);}
+  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check){flex:0 0 100%;}
+  /* Multi-select: the checkbox shares line one with the title, so the title claims the rest of it. */
+  .fdy-cfl__row > .fdy-cfl__check + td{flex:1 0 calc(100% - var(--space-6));}
+  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td,
+  .fdy-cfl__row > .fdy-cfl__check + td ~ td{font-size:var(--text-xs);color:var(--color-text-muted);}
+  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td:empty,
+  .fdy-cfl__row > .fdy-cfl__check + td ~ td:empty{display:none;}
+  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td::before,
+  .fdy-cfl__row > .fdy-cfl__check + td ~ td::before{content:"·";margin-right:var(--space-2);color:var(--color-text-subtle);}
+  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) + td::before,
+  .fdy-cfl__row > .fdy-cfl__check + td + td::before{content:none;}
+  /* The checkbox keeps its own line position beside the title rather than above it. */
+  .fdy-cfl__row > .fdy-cfl__check{flex:none;width:auto;align-self:center;}
+}
+
 /* Freeday. Charts (zero-dependency CSS/SVG, rendered by freeday-chart.js).
  * Colour comes from --fdy-chart (a token, set inline by the renderer from data-fdy-color). */
 
@@ -1979,6 +2050,16 @@ a { color: var(--color-primary); }
 
 /* Freeday. Field & Input */
 .fdy-field{display:flex;flex-direction:column;gap:var(--space-2);max-width:22rem;}
+/* A field marked --full fills whatever contains it (#055 §1). The cap above is for a field standing
+   on its own in a row — a filter bar, a toolbar — and it is right there. But every real form is a
+   single-column flex stack (a settings pane, a login card, a dialog at 420px), and the only release
+   the kit shipped was `.fdy-form-grid > .fdy-field`, which a flex column can never reach:
+   .fdy-form-grid is `repeat(auto-fit,minmax(14rem,1fr))`, which pairs fields up the moment there is
+   room. So a stack had no vocabulary at all and said it on the container instead — 23 times across
+   two consoles, and four times in this kit's OWN reference page as `style="max-width:none"`.
+   Inside .fdy-form-grid this changes nothing (that rule already says it); outside one the modifier
+   finally means what its name says, and the grid keeps `grid-column` as its own concern. */
+.fdy-field--full{max-width:none;}
 /* 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
@@ -2428,9 +2509,24 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-table td>.fdy-input,.fdy-table td>.fdy-textarea,.fdy-table td>.fdy-combo,.fdy-table td>.fdy-input-group,.fdy-table td>.fdy-datepicker,.fdy-table td>.fdy-timepicker{min-width:7rem;}
 
 /* Freeday. Tabs (WAI-ARIA APG) */
-/* position:relative, containing block for out-of-flow content in the tabs (see base.css). */
-.fdy-tabs__list{position:relative;display:flex;gap:var(--space-1);border-bottom:var(--bw) solid var(--color-border);overflow-x:auto;}
-.fdy-tabs__tab{appearance:none;border:0;background:transparent;cursor:pointer;white-space:nowrap;font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-muted);padding:var(--space-3) var(--space-4);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
+/* position:relative, containing block for out-of-flow content in the tabs (see base.css).
+ *
+ * The strip's own line is an INSET SHADOW, not a border, and the tab carries no negative margin
+ * (#052). The pair those two replace — `border-bottom` here plus `margin-bottom:-1px` on the tab,
+ * to lift the active tab's 2px underline onto the strip's 1px line so the two read as one — was
+ * broken by the `overflow-x:auto` beside it, in two ways at once:
+ *   1. CSS Overflow §3 gives no way to scroll one axis alone: `overflow-y` computes from `visible`
+ *      to `auto` because the other axis is not visible, so the 1px the tab hangs below the content
+ *      box became a real scrollport. Measured 47 client / 48 scroll, `scrollTop` settling at 1 —
+ *      invisible in a screenshot, and a trackpad gesture over the strip is eaten by it.
+ *   2. A scroll container clips its descendants to the padding box, so the pixel the negative
+ *      margin pushed out was clipped away and the strip's own line painted in its place: the
+ *      active underline rendered ONE pixel of primary, never the two it asks for.
+ * An inset shadow paints on the box, not on the scrolled content, so the line stays put while the
+ * tabs scroll sideways, and the tab's own border-bottom paints over it — same look, no overflow.
+ * To hide the line, override `box-shadow`, not `border-bottom` (guarded in browser/tabs-strip.mjs). */
+.fdy-tabs__list{position:relative;display:flex;gap:var(--space-1);box-shadow:inset 0 calc(var(--bw) * -1) 0 var(--color-border);overflow-x:auto;}
+.fdy-tabs__tab{appearance:none;border:0;background:transparent;cursor:pointer;white-space:nowrap;font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-muted);padding:var(--space-3) var(--space-4);border-bottom:2px solid transparent;transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
 .fdy-tabs__tab:hover{color:var(--color-text);}
 .fdy-tabs__tab:disabled,.fdy-tabs__tab[aria-disabled="true"]{opacity:.5;cursor:not-allowed;color:var(--color-text-muted);}
 .fdy-tabs__tab:disabled:hover,.fdy-tabs__tab[aria-disabled="true"]:hover{color:var(--color-text-muted);}

package/dist/freeday.css

@@ -85,8 +85,15 @@ a { color: var(--color-primary); }
  * > (.fdy-app__topbar, .fdy-app__main)). The __content wrapper gives the sticky
  * topbar a tall containing block so it can travel, a bare grid cell can't. */
 .fdy-app{display:flex;align-items:stretch;min-height:100vh;background:var(--color-surface-2);}
-.fdy-app__sidebar{position:sticky;top:0;align-self:flex-start;height:100vh;overflow:hidden;flex:none;width:15.5rem;box-sizing:border-box;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border-right:var(--bw) solid var(--color-border);display:flex;flex-direction:column;transition:width var(--dur-slow) var(--ease-standard),border-right-width var(--dur-slow) var(--ease-standard);}
-.fdy-app__content{flex:1;min-width:0;display:flex;flex-direction:column;}
+.fdy-app__sidebar{position:sticky;top:0;align-self:flex-start;height:100vh;overflow:hidden;flex:none;width:var(--fdy-app-sidebar-w,15.5rem);box-sizing:border-box;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border-right:var(--bw) solid var(--color-border);display:flex;flex-direction:column;transition:width var(--dur-slow) var(--ease-standard),border-right-width var(--dur-slow) var(--ease-standard);}
+/* `min-height:0` is the height-axis twin of `min-width:0`, and its absence was invisible for as long
+ * as the shell scrolled the PAGE (#055 §2). A consumer that pins the shell to the viewport and
+ * scrolls .fdy-app__main instead hits it immediately: a column flex item's automatic minimum size is
+ * its content, so the scrolling child pushes this box — and the shell — open instead of scrolling.
+ * `flex:none` on the topbar is the same story one line down: it is a flex item in this column, and
+ * a topbar whose content wraps past `min-height` is a topbar that can be squeezed. Both consoles
+ * wrote these two rules independently, in app.css, before the fifth screen. */
+.fdy-app__content{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;}
 /* Brand is a fixed header, same height as the topbar so they align, and only
  * the nav below it scrolls. Bare text (no children) renders as one bold
  * display line via the rules on .fdy-app__brand itself. For a mark + two-line
@@ -174,7 +181,7 @@ a { color: var(--color-primary); }
      also apply — it would fight the transform for the same panel. */
   .fdy-app--nav-overlay.fdy-app--nav-collapsed .fdy-app__sidebar{width:16rem;border-right-width:var(--bw);}
 }
-.fdy-app__topbar{position:sticky;top:0;z-index:20;min-height:var(--space-16);display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-8);background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border-bottom:var(--bw) solid var(--color-border);}
+.fdy-app__topbar{position:sticky;top:0;z-index:20;flex:none;min-height:var(--space-16);display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-8);background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border-bottom:var(--bw) solid var(--color-border);}
 .fdy-app__title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-semibold);color:var(--color-text);margin:0 auto 0 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .fdy-app__main{flex:1;padding:var(--space-8);}
 .fdy-skip{position:absolute;left:var(--space-2);top:var(--space-2);background:var(--color-primary);color:var(--color-on-primary);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);z-index:100;transform:translateY(-250%);transition:transform var(--dur-fast) var(--ease-standard);}
@@ -591,10 +598,26 @@ a { color: var(--color-primary); }
 
 /* Search bar, single leading-icon field; Enter/typing filters the results. */
 .fdy-cfl__search{flex:none;padding:var(--space-4) var(--space-5);border-bottom:var(--bw) solid var(--color-border-muted);}
+/* The search group spans the bar. Four files wrote this as `style="max-width:none"` — both typed
+   adapters and both docs examples — which is the same missing vocabulary as #055 §1, one class over. */
+.fdy-cfl__search .fdy-input-group{max-width:none;}
 
-/* Results, dense rows, sticky header, its own scroll region. */
-.fdy-cfl__results{overflow:auto;max-height:min(24rem,50vh);}
+/* Field-less host (#054). With `dialogOnly` the typed wrappers render the dialog and no field, for a
+   caller whose trigger is its own — a chip, a table cell, a menu item — which is what the raw path
+   has always had in `[data-fdy-cfl-open]`. `display:contents` so the host generates no box at all:
+   a zero-size div would still be a flex item or a grid cell in whatever laid the trigger out. */
+.fdy-cfl__host{display:contents;}
+
+/* Results, dense rows, sticky header, its own scroll region.
+ *
+ * `container-type: inline-size` makes this box the query container for the stacked layout below.
+ * Safe here and nowhere near free in general: a size container stops contributing intrinsic inline
+ * size, which is what made `.fdy-stats--inline` collapse to three zero tracks in 3.1.0. This box
+ * takes its width from the dialog (`min(46rem, 100vw - …)`, an explicit width) and already scrolls
+ * its own content, so it never sized to the table to begin with. */
+.fdy-cfl__results{container:fdy-cfl / inline-size;overflow:auto;max-height:min(24rem,50vh);}
 .fdy-cfl__results .fdy-table th{position:sticky;top:0;z-index:1;}
+
 .fdy-cfl__row{cursor:pointer;}
 .fdy-cfl__row:hover{background:var(--color-surface-2);}
 .fdy-cfl__row:focus-visible{outline:none;background:var(--color-primary-soft);box-shadow:inset 2px 0 0 var(--color-primary);}
@@ -612,6 +635,54 @@ a { color: var(--color-primary); }
 .fdy-cfl__count{font-size:var(--text-sm);color:var(--color-text-muted);}
 .fdy-cfl__actions{display:flex;gap:var(--space-2);}
 
+/* Narrow: the same rows as list items, not table cells (#053).
+ *
+ * A 420px add-on panel gives this dialog ~372px. A three- or four-column master-data table in that
+ * space either squeezes every column below legibility or scrolls on both axes, in a dialog whose
+ * whole job is "search, look, click one". So the first cell becomes the title and the rest become
+ * one detail line under it — the shape a picker takes when it is narrow.
+ *
+ * A CONTAINER query, not a media query: the dialog is not the viewport. The same component is wide
+ * on a desktop page and narrow inside a docked panel, and only the container knows which.
+ *
+ * No ARIA roles come with this, and that is a MEASURED decision rather than an omission. The
+ * received wisdom from the responsive-table era is that `display:block` on a table box drops its
+ * implicit role; explicit `role="table"/"row"/"cell"` were written into all four stacks here on
+ * that belief and then taken out again, because Chrome's own accessibility tree says otherwise:
+ * with the rows at `display:flex`, stripping every `role` attribute leaves
+ * `table → row → cell` intact (Chromium 133; only `rowgroup`, which associates nothing, is lost).
+ * Redundant ARIA is what the kit's own rule calls worse than none, so the guard asserts the
+ * OUTCOME — that a stacked row is still a row in the a11y tree — and stays silent about how.
+ * `browser/cfl-narrow.mjs` is where a future engine that does dissolve them shows up as red.
+ *
+ * Column headers ARE a real loss here, and a deliberate one: `<thead>` is hidden, because a header
+ * row that costs a third of the width buys nothing when each row is labelled by its own title. */
+@container fdy-cfl (max-width: 30rem){
+  .fdy-cfl__results .fdy-table,
+  .fdy-cfl__results .fdy-table tbody{display:block;width:100%;}
+  .fdy-cfl__results .fdy-table thead{display:none;}
+  .fdy-cfl__row{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:var(--bw) solid var(--color-border-muted);}
+  .fdy-cfl__results .fdy-table tbody tr:last-child{border-bottom:0;}
+  .fdy-cfl__row > td{display:block;padding:0;border:0;}
+  /* The title takes the whole first line, which is what pushes every remaining cell onto the second
+     one — no selector has to know how many columns there are, or which of them is last. */
+  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check),
+  .fdy-cfl__row > .fdy-cfl__check + td{font-weight:var(--weight-semibold);color:var(--color-text);}
+  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check){flex:0 0 100%;}
+  /* Multi-select: the checkbox shares line one with the title, so the title claims the rest of it. */
+  .fdy-cfl__row > .fdy-cfl__check + td{flex:1 0 calc(100% - var(--space-6));}
+  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td,
+  .fdy-cfl__row > .fdy-cfl__check + td ~ td{font-size:var(--text-xs);color:var(--color-text-muted);}
+  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td:empty,
+  .fdy-cfl__row > .fdy-cfl__check + td ~ td:empty{display:none;}
+  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td::before,
+  .fdy-cfl__row > .fdy-cfl__check + td ~ td::before{content:"·";margin-right:var(--space-2);color:var(--color-text-subtle);}
+  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) + td::before,
+  .fdy-cfl__row > .fdy-cfl__check + td + td::before{content:none;}
+  /* The checkbox keeps its own line position beside the title rather than above it. */
+  .fdy-cfl__row > .fdy-cfl__check{flex:none;width:auto;align-self:center;}
+}
+
 /* Freeday. Charts (zero-dependency CSS/SVG, rendered by freeday-chart.js).
  * Colour comes from --fdy-chart (a token, set inline by the renderer from data-fdy-color). */
 
@@ -1101,6 +1172,16 @@ a { color: var(--color-primary); }
 
 /* Freeday. Field & Input */
 .fdy-field{display:flex;flex-direction:column;gap:var(--space-2);max-width:22rem;}
+/* A field marked --full fills whatever contains it (#055 §1). The cap above is for a field standing
+   on its own in a row — a filter bar, a toolbar — and it is right there. But every real form is a
+   single-column flex stack (a settings pane, a login card, a dialog at 420px), and the only release
+   the kit shipped was `.fdy-form-grid > .fdy-field`, which a flex column can never reach:
+   .fdy-form-grid is `repeat(auto-fit,minmax(14rem,1fr))`, which pairs fields up the moment there is
+   room. So a stack had no vocabulary at all and said it on the container instead — 23 times across
+   two consoles, and four times in this kit's OWN reference page as `style="max-width:none"`.
+   Inside .fdy-form-grid this changes nothing (that rule already says it); outside one the modifier
+   finally means what its name says, and the grid keeps `grid-column` as its own concern. */
+.fdy-field--full{max-width:none;}
 /* 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
@@ -1550,9 +1631,24 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-table td>.fdy-input,.fdy-table td>.fdy-textarea,.fdy-table td>.fdy-combo,.fdy-table td>.fdy-input-group,.fdy-table td>.fdy-datepicker,.fdy-table td>.fdy-timepicker{min-width:7rem;}
 
 /* Freeday. Tabs (WAI-ARIA APG) */
-/* position:relative, containing block for out-of-flow content in the tabs (see base.css). */
-.fdy-tabs__list{position:relative;display:flex;gap:var(--space-1);border-bottom:var(--bw) solid var(--color-border);overflow-x:auto;}
-.fdy-tabs__tab{appearance:none;border:0;background:transparent;cursor:pointer;white-space:nowrap;font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-muted);padding:var(--space-3) var(--space-4);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
+/* position:relative, containing block for out-of-flow content in the tabs (see base.css).
+ *
+ * The strip's own line is an INSET SHADOW, not a border, and the tab carries no negative margin
+ * (#052). The pair those two replace — `border-bottom` here plus `margin-bottom:-1px` on the tab,
+ * to lift the active tab's 2px underline onto the strip's 1px line so the two read as one — was
+ * broken by the `overflow-x:auto` beside it, in two ways at once:
+ *   1. CSS Overflow §3 gives no way to scroll one axis alone: `overflow-y` computes from `visible`
+ *      to `auto` because the other axis is not visible, so the 1px the tab hangs below the content
+ *      box became a real scrollport. Measured 47 client / 48 scroll, `scrollTop` settling at 1 —
+ *      invisible in a screenshot, and a trackpad gesture over the strip is eaten by it.
+ *   2. A scroll container clips its descendants to the padding box, so the pixel the negative
+ *      margin pushed out was clipped away and the strip's own line painted in its place: the
+ *      active underline rendered ONE pixel of primary, never the two it asks for.
+ * An inset shadow paints on the box, not on the scrolled content, so the line stays put while the
+ * tabs scroll sideways, and the tab's own border-bottom paints over it — same look, no overflow.
+ * To hide the line, override `box-shadow`, not `border-bottom` (guarded in browser/tabs-strip.mjs). */
+.fdy-tabs__list{position:relative;display:flex;gap:var(--space-1);box-shadow:inset 0 calc(var(--bw) * -1) 0 var(--color-border);overflow-x:auto;}
+.fdy-tabs__tab{appearance:none;border:0;background:transparent;cursor:pointer;white-space:nowrap;font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-muted);padding:var(--space-3) var(--space-4);border-bottom:2px solid transparent;transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
 .fdy-tabs__tab:hover{color:var(--color-text);}
 .fdy-tabs__tab:disabled,.fdy-tabs__tab[aria-disabled="true"]{opacity:.5;cursor:not-allowed;color:var(--color-text-muted);}
 .fdy-tabs__tab:disabled:hover,.fdy-tabs__tab[aria-disabled="true"]:hover{color:var(--color-text-muted);}

package/dist/freeday.tokens.css

@@ -322,7 +322,7 @@
   --color-surface-raised: var(--color-surface);
   --color-text: var(--slate-100);
   --color-text-muted: var(--slate-400);
-  --color-text-subtle: var(--slate-500);
+  --color-text-subtle: var(--slate-450);
   --color-on-brand: var(--slate-0);
   --color-border: var(--slate-800);
   --color-border-strong: var(--slate-700);
@@ -386,7 +386,7 @@
   --color-surface-raised: var(--color-surface);
   --color-text: var(--slate-100);
   --color-text-muted: var(--slate-400);
-  --color-text-subtle: var(--slate-500);
+  --color-text-subtle: var(--slate-450);
   --color-on-brand: var(--slate-0);
   --color-border: var(--slate-800);
   --color-border-strong: var(--slate-700);

package/docs/agent-onboarding.md

@@ -132,6 +132,12 @@ Recent additions most likely to replace something an app hand-rolled (all detail
 | `selectable` + `selectedKeys` on `FdyTable` | a checkbox column bolted beside a controlled table, with its own bulk bar |
 | `fdy-step-before-change` | a wizard whose Next cannot be stopped while the server is still deciding |
 | `.fdy-table--striped` | a `:nth-child` rule of your own that turns out to be the same colour as hover |
+| `FdyCfl` in a narrow surface | a hand-rolled card picker, because the kit's was a table — it stacks itself under a 30rem container, no prop to pass |
+| `size="cfl"` on `FdyModal` | writing `.fdy-modal--cfl` by hand to reach the 46rem width |
+| `dialogOnly` + `open()` on `FdyCfl` | a hand-rolled picker, because the trigger is a chip or a table cell and not a 22rem field |
+| `.fdy-field--full` | `max-width: none` on the form container, once per form, because the fields are a flex column and not a `.fdy-form-grid` |
+| `.fdy-nav--flat` | undoing the caret, the pointer cursor and the group divider yourself, on a sidebar whose group labels never collapse |
+| `--fdy-app-sidebar-w` | overriding `width` on `.fdy-app__sidebar`, which is also the rule that animates the collapse |
 
 ## 3. Starting a new screen
 

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.1.0"` (public npm package). `dist/` is
+Lands in `package.json` as `"@cahyo-dimas/freeday": "^3.3.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.1.0",
+  "version": "3.3.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/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",
+    "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/cfl-dialog-only.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/tabs-strip.mjs browser/cfl-narrow.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/app-shell.css

@@ -6,8 +6,15 @@
  * > (.fdy-app__topbar, .fdy-app__main)). The __content wrapper gives the sticky
  * topbar a tall containing block so it can travel, a bare grid cell can't. */
 .fdy-app{display:flex;align-items:stretch;min-height:100vh;background:var(--color-surface-2);}
-.fdy-app__sidebar{position:sticky;top:0;align-self:flex-start;height:100vh;overflow:hidden;flex:none;width:15.5rem;box-sizing:border-box;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border-right:var(--bw) solid var(--color-border);display:flex;flex-direction:column;transition:width var(--dur-slow) var(--ease-standard),border-right-width var(--dur-slow) var(--ease-standard);}
-.fdy-app__content{flex:1;min-width:0;display:flex;flex-direction:column;}
+.fdy-app__sidebar{position:sticky;top:0;align-self:flex-start;height:100vh;overflow:hidden;flex:none;width:var(--fdy-app-sidebar-w,15.5rem);box-sizing:border-box;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border-right:var(--bw) solid var(--color-border);display:flex;flex-direction:column;transition:width var(--dur-slow) var(--ease-standard),border-right-width var(--dur-slow) var(--ease-standard);}
+/* `min-height:0` is the height-axis twin of `min-width:0`, and its absence was invisible for as long
+ * as the shell scrolled the PAGE (#055 §2). A consumer that pins the shell to the viewport and
+ * scrolls .fdy-app__main instead hits it immediately: a column flex item's automatic minimum size is
+ * its content, so the scrolling child pushes this box — and the shell — open instead of scrolling.
+ * `flex:none` on the topbar is the same story one line down: it is a flex item in this column, and
+ * a topbar whose content wraps past `min-height` is a topbar that can be squeezed. Both consoles
+ * wrote these two rules independently, in app.css, before the fifth screen. */
+.fdy-app__content{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;}
 /* Brand is a fixed header, same height as the topbar so they align, and only
  * the nav below it scrolls. Bare text (no children) renders as one bold
  * display line via the rules on .fdy-app__brand itself. For a mark + two-line
@@ -95,7 +102,7 @@
      also apply — it would fight the transform for the same panel. */
   .fdy-app--nav-overlay.fdy-app--nav-collapsed .fdy-app__sidebar{width:16rem;border-right-width:var(--bw);}
 }
-.fdy-app__topbar{position:sticky;top:0;z-index:20;min-height:var(--space-16);display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-8);background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border-bottom:var(--bw) solid var(--color-border);}
+.fdy-app__topbar{position:sticky;top:0;z-index:20;flex:none;min-height:var(--space-16);display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-8);background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border-bottom:var(--bw) solid var(--color-border);}
 .fdy-app__title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-semibold);color:var(--color-text);margin:0 auto 0 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .fdy-app__main{flex:1;padding:var(--space-8);}
 .fdy-skip{position:absolute;left:var(--space-2);top:var(--space-2);background:var(--color-primary);color:var(--color-on-primary);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);z-index:100;transform:translateY(-250%);transition:transform var(--dur-fast) var(--ease-standard);}