@cahyo-dimas/freeday 1.41.0 → 1.46.0

package/adapters/vue/components/FdyCfl.vue

@@ -23,7 +23,10 @@ interface CflPage {
 }
 
 const props = defineProps<{
-  modelValue: Row | null;
+  /** Single: `Row | null`. With `multiple`, an array — `Row[] | null`, where null and [] both mean
+   *  nothing picked. The enhancer has had `data-fdy-cfl-multiple` all along; this is the typed
+   *  wrappers catching up (#019). */
+  modelValue: Row | Row[] | null;
   fetchPage: (query: string, page: number) => Promise<CflPage>;
   columns: ReadonlyArray<CflColumn>;
   display: (row: Row) => string;
@@ -46,6 +49,16 @@ const props = defineProps<{
   closeLabel?: string;
   /** aria-label for the button that opens the picker. Default 'Open search'. */
   openLabel?: string;
+  /** Tick rows and commit them together, instead of committing the row that was clicked. The kit's
+   *  own enhancer offers this (`data-fdy-cfl-multiple`); a screen that gathers six expense claims
+   *  onto one document wants one dialog, not six. */
+  multiple?: boolean;
+  /** Footer label while picking, `{n}` replaced by the tick count. Default '{n} selected'. */
+  selectedText?: string;
+  /** The multi-select commit button. Default 'Confirm'. */
+  confirmText?: string;
+  /** Footer hint in single mode. Default 'Click a row to choose it'. */
+  hintText?: string;
   placeholder?: string;
   disabled?: boolean;
   /** Locked/view mode: shows the picked value (focusable, copyable), but the search dialog can't be opened. Unlike `disabled`, it keeps tab order and isn't greyed. */
@@ -62,8 +75,8 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  'update:modelValue': [value: Row | null];
-  change: [value: Row | null];
+  'update:modelValue': [value: Row | Row[] | null];
+  change: [value: Row | Row[] | null];
 }>();
 
 const baseId: string = useId();
@@ -91,13 +104,20 @@ const isReadonly: ComputedRef<boolean> = computed((): boolean => props.readonly
 
 const showClear: ComputedRef<boolean> = computed(
   (): boolean =>
-    props.clearable === true && props.modelValue != null && isDisabled.value === false && isReadonly.value === false,
+    props.clearable === true && currentRows.value.length > 0 && isDisabled.value === false && isReadonly.value === false,
 );
 const clearLabelText: ComputedRef<string> = computed((): string => props.clearLabel ?? 'Clear selection');
 const isInvalid: ComputedRef<boolean> = computed((): boolean => props.invalid === true);
-const displayValue: ComputedRef<string> = computed((): string =>
-  props.modelValue !== null ? props.display(props.modelValue) : '',
+/* `display()` takes one row, so in multi the field states HOW MANY — naming one of six would be a
+   lie, and naming all six does not fit a control that is 22rem wide. */
+const currentRows: ComputedRef<Row[]> = computed((): Row[] =>
+  Array.isArray(props.modelValue) ? props.modelValue : props.modelValue !== null ? [props.modelValue as Row] : [],
 );
+const selectedTextFor = (n: number): string => (props.selectedText ?? '{n} selected').replace('{n}', String(n));
+const displayValue: ComputedRef<string> = computed((): string => {
+  if (props.multiple === true) return currentRows.value.length === 0 ? '' : selectedTextFor(currentRows.value.length);
+  return props.modelValue !== null ? props.display(props.modelValue as Row) : '';
+});
 // The results <table> (owner of `resultsId`) only renders in the rows branch, so gate the
 // search input's aria refs on rows existing — otherwise they'd dangle during loading/empty/error.
 const hasRows: ComputedRef<boolean> = computed((): boolean => rows.value.length > 0);
@@ -181,6 +201,37 @@ function setActive(index: number): void {
   });
 }
 
+/* The ticks live here, not in `modelValue`, because a multi dialog is only committed at Confirm:
+   closing it must leave the caller's value exactly as it was. Seeded from `modelValue` on open. */
+const picked: Ref<Row[]> = ref([]) as Ref<Row[]>;
+
+const pickedKeys: ComputedRef<Set<string>> = computed(
+  (): Set<string> => new Set(picked.value.map((r: Row): string => props.rowKey(r)))
+);
+
+function isPicked(row: Row): boolean {
+  return pickedKeys.value.has(props.rowKey(row));
+}
+
+function togglePick(row: Row): void {
+  const key: string = props.rowKey(row);
+  const at: number = picked.value.findIndex((r: Row): boolean => props.rowKey(r) === key);
+  if (at === -1) picked.value = [...picked.value, row];
+  else picked.value = picked.value.filter((_: Row, i: number): boolean => i !== at);
+}
+
+/* A click means "tick this" in multi and "this is my answer" in single — the whole difference. */
+function onRowClick(row: Row): void {
+  if (props.multiple === true) togglePick(row);
+  else commit(row);
+}
+
+function confirmPicks(): void {
+  emit('update:modelValue', picked.value);
+  emit('change', picked.value);
+  closeDialog();
+}
+
 function commit(row: Row | null): void {
   emit('update:modelValue', row);
   emit('change', row);
@@ -190,6 +241,7 @@ function commit(row: Row | null): void {
 /* Unsetting is not "picking nothing" — it must not open or close the dialog, and it must leave focus
    on a control that still exists, so focus returns to the trigger beside it. */
 function clearValue(): void {
+  picked.value = [];
   emit('update:modelValue', null);
   emit('change', null);
   triggerEl.value?.focus();
@@ -221,7 +273,7 @@ function onKeydown(e: KeyboardEvent): void {
       const row: Row | undefined = activeIndex.value >= 0 ? rows.value[activeIndex.value] : undefined;
       if (row !== undefined) {
         e.preventDefault();
-        commit(row);
+        onRowClick(row);
       }
       break;
     }
@@ -244,6 +296,8 @@ function openDialog(): void {
   hasMore.value = false;
   error.value = null;
   activeIndex.value = -1;
+  /* Re-seeded per open, so Cancel really is a cancel: the ticks start as whatever the caller holds. */
+  picked.value = props.multiple === true ? [...currentRows.value] : [];
   dialogEl.value?.showModal();
   void nextTick((): void => searchEl.value?.focus());
   void loadPage(0, false);
@@ -361,6 +415,7 @@ onBeforeUnmount((): void => {
             <table :id="resultsId" class="fdy-table" aria-label="Search results">
               <thead>
                 <tr>
+                  <th v-if="multiple === true" scope="col"><span class="fdy-visually-hidden">{{ selectedTextFor(picked.length) }}</span></th>
                   <th v-for="col in columns" :key="col.key" scope="col">{{ col.label }}</th>
                 </tr>
               </thead>
@@ -370,10 +425,14 @@ onBeforeUnmount((): void => {
                   :id="rowId(i)"
                   :key="rowKey(row)"
                   class="fdy-cfl__row"
-                  :aria-selected="i === activeIndex ? 'true' : undefined"
-                  @click="commit(row)"
+                  :class="{ 'is-active': i === activeIndex }"
+                  :aria-selected="multiple === true ? (isPicked(row) ? 'true' : 'false') : i === activeIndex ? 'true' : undefined"
+                  @click="onRowClick(row)"
                   @mousemove="setActive(i)"
                 >
+                  <td v-if="multiple === true" class="fdy-cfl__check">
+                    <input class="fdy-checkbox" type="checkbox" tabindex="-1" :checked="isPicked(row)" aria-hidden="true" />
+                  </td>
                   <td v-for="col in columns" :key="col.key">{{ cellText(row, col.key) }}</td>
                 </tr>
               </tbody>
@@ -381,7 +440,7 @@ onBeforeUnmount((): void => {
 
             <div v-if="error !== null" class="fdy-cfl__empty" role="alert" style="padding:var(--space-4) var(--space-5)">
               <p style="margin:0 0 var(--space-3)">{{ error.message }}</p>
-              <button class="fdy-btn fdy-btn--sm" type="button" @click="retry">Coba lagi</button>
+              <button class="fdy-btn fdy-btn--sm" type="button" @click="retry">{{ retryText ?? 'Try again' }}</button>
             </div>
             <div v-else-if="hasMore" style="padding:var(--space-3) var(--space-4);text-align:center">
               <button class="fdy-btn fdy-btn--ghost fdy-btn--sm" type="button" :disabled="loading" @click="loadMore">
@@ -393,9 +452,12 @@ onBeforeUnmount((): void => {
       </div>
 
       <div class="fdy-modal__footer">
-        <span class="fdy-cfl__count">Click a row to choose it</span>
+        <span class="fdy-cfl__count" aria-live="polite">
+          {{ multiple === true ? selectedTextFor(picked.length) : (hintText ?? 'Click a row to choose it') }}
+        </span>
         <div class="fdy-cfl__actions">
           <button class="fdy-btn fdy-btn--ghost" type="button" @click="closeDialog">{{ closeLabel ?? 'Close' }}</button>
+          <button v-if="multiple === true" class="fdy-btn" type="button" @click="confirmPicks">{{ confirmText ?? 'Confirm' }}</button>
         </div>
       </div>
     </dialog>

package/dist/freeday-carousel.js

@@ -26,8 +26,18 @@
     position: '{n} dari {total}',
     slide: 'Slide {n}'
   };
+  /* HTML lowercases attribute names, so a camelCase key like `filterText` can only ever be written
+     as `data-fdy-text-filtertext` — while the kebab form anybody would reach for,
+     `data-fdy-text-filter-text`, becomes a DIFFERENT attribute the enhancer never reads, and the
+     override fails silently. So the key is kebab-cased for the lookup; the run-together spelling
+     still resolves, for markup written against 1.39.0. */
+  function textAttr(root, key) {
+    if (!root || !root.getAttribute) return null;
+    var kebab = root.getAttribute('data-fdy-text-' + key.replace(/[A-Z]/g, function (c) { return '-' + c.toLowerCase(); }));
+    return kebab != null && kebab !== '' ? kebab : root.getAttribute('data-fdy-text-' + key);
+  }
   function textOf(root, key, vars) {
-    var custom = root && root.getAttribute ? root.getAttribute('data-fdy-text-' + key) : null;
+    var custom = textAttr(root, key);
     var s = custom != null && custom !== '' ? custom : TEXT[key];
     if (vars) for (var k in vars) if (Object.prototype.hasOwnProperty.call(vars, k)) s = s.split('{' + k + '}').join(vars[k]);
     return s;

package/dist/freeday-cascade.js

@@ -62,8 +62,18 @@
     back: 'Kembali satu tingkat',
     submenu: '{label}, submenu'
   };
+  /* HTML lowercases attribute names, so a camelCase key like `filterText` can only ever be written
+     as `data-fdy-text-filtertext` — while the kebab form anybody would reach for,
+     `data-fdy-text-filter-text`, becomes a DIFFERENT attribute the enhancer never reads, and the
+     override fails silently. So the key is kebab-cased for the lookup; the run-together spelling
+     still resolves, for markup written against 1.39.0. */
+  function textAttr(root, key) {
+    if (!root || !root.getAttribute) return null;
+    var kebab = root.getAttribute('data-fdy-text-' + key.replace(/[A-Z]/g, function (c) { return '-' + c.toLowerCase(); }));
+    return kebab != null && kebab !== '' ? kebab : root.getAttribute('data-fdy-text-' + key);
+  }
   function textOf(root, key, vars) {
-    var custom = root && root.getAttribute ? root.getAttribute('data-fdy-text-' + key) : null;
+    var custom = textAttr(root, key);
     var s = custom != null && custom !== '' ? custom : TEXT[key];
     if (vars) for (var k in vars) if (Object.prototype.hasOwnProperty.call(vars, k)) s = s.split('{' + k + '}').join(vars[k]);
     return s;

package/dist/freeday-cfl.js

@@ -41,8 +41,18 @@
   var TEXT = {
     selected: '{n} dipilih'
   };
+  /* HTML lowercases attribute names, so a camelCase key like `filterText` can only ever be written
+     as `data-fdy-text-filtertext` — while the kebab form anybody would reach for,
+     `data-fdy-text-filter-text`, becomes a DIFFERENT attribute the enhancer never reads, and the
+     override fails silently. So the key is kebab-cased for the lookup; the run-together spelling
+     still resolves, for markup written against 1.39.0. */
+  function textAttr(root, key) {
+    if (!root || !root.getAttribute) return null;
+    var kebab = root.getAttribute('data-fdy-text-' + key.replace(/[A-Z]/g, function (c) { return '-' + c.toLowerCase(); }));
+    return kebab != null && kebab !== '' ? kebab : root.getAttribute('data-fdy-text-' + key);
+  }
   function textOf(root, key, vars) {
-    var custom = root && root.getAttribute ? root.getAttribute('data-fdy-text-' + key) : null;
+    var custom = textAttr(root, key);
     var s = custom != null && custom !== '' ? custom : TEXT[key];
     if (vars) for (var k in vars) if (Object.prototype.hasOwnProperty.call(vars, k)) s = s.split('{' + k + '}').join(vars[k]);
     return s;

package/dist/freeday-form.js

@@ -55,8 +55,13 @@
     mismatch: 'Nilai tidak cocok.',
     invalid: 'Tidak valid.'
   };
+  /* Kebab-cased for the lookup — see the note in the other enhancers: HTML lowercases attribute
+     names, so `data-fdy-text-filter-text` and `data-fdy-text-filtertext` are different attributes
+     and only one of them is what an author would write. */
   function textOf(root, key) {
-    var custom = root && root.getAttribute ? root.getAttribute('data-fdy-text-' + key) : null;
+    if (!root || !root.getAttribute) return TEXT[key];
+    var kebab = root.getAttribute('data-fdy-text-' + key.replace(/[A-Z]/g, function (c) { return '-' + c.toLowerCase(); }));
+    var custom = kebab != null && kebab !== '' ? kebab : root.getAttribute('data-fdy-text-' + key);
     return custom != null && custom !== '' ? custom : TEXT[key];
   }
   var VALIDITY_KEYS = ['valueMissing', 'typeMismatch', 'patternMismatch', 'tooShort', 'tooLong', 'rangeUnderflow', 'rangeOverflow', 'stepMismatch', 'badInput'];

package/dist/freeday-mask.js

@@ -59,8 +59,18 @@
     show: 'Tampilkan kata sandi',
     hide: 'Sembunyikan kata sandi'
   };
+  /* HTML lowercases attribute names, so a camelCase key like `filterText` can only ever be written
+     as `data-fdy-text-filtertext` — while the kebab form anybody would reach for,
+     `data-fdy-text-filter-text`, becomes a DIFFERENT attribute the enhancer never reads, and the
+     override fails silently. So the key is kebab-cased for the lookup; the run-together spelling
+     still resolves, for markup written against 1.39.0. */
+  function textAttr(root, key) {
+    if (!root || !root.getAttribute) return null;
+    var kebab = root.getAttribute('data-fdy-text-' + key.replace(/[A-Z]/g, function (c) { return '-' + c.toLowerCase(); }));
+    return kebab != null && kebab !== '' ? kebab : root.getAttribute('data-fdy-text-' + key);
+  }
   function textOf(root, key, vars) {
-    var custom = root && root.getAttribute ? root.getAttribute('data-fdy-text-' + key) : null;
+    var custom = textAttr(root, key);
     var s = custom != null && custom !== '' ? custom : TEXT[key];
     if (vars) for (var k in vars) if (Object.prototype.hasOwnProperty.call(vars, k)) s = s.split('{' + k + '}').join(vars[k]);
     return s;

package/dist/freeday-stepper.js

@@ -27,8 +27,18 @@
     done: 'Selesai',
     next: 'Lanjut'
   };
+  /* HTML lowercases attribute names, so a camelCase key like `filterText` can only ever be written
+     as `data-fdy-text-filtertext` — while the kebab form anybody would reach for,
+     `data-fdy-text-filter-text`, becomes a DIFFERENT attribute the enhancer never reads, and the
+     override fails silently. So the key is kebab-cased for the lookup; the run-together spelling
+     still resolves, for markup written against 1.39.0. */
+  function textAttr(root, key) {
+    if (!root || !root.getAttribute) return null;
+    var kebab = root.getAttribute('data-fdy-text-' + key.replace(/[A-Z]/g, function (c) { return '-' + c.toLowerCase(); }));
+    return kebab != null && kebab !== '' ? kebab : root.getAttribute('data-fdy-text-' + key);
+  }
   function textOf(root, key, vars) {
-    var custom = root && root.getAttribute ? root.getAttribute('data-fdy-text-' + key) : null;
+    var custom = textAttr(root, key);
     var s = custom != null && custom !== '' ? custom : TEXT[key];
     if (vars) for (var k in vars) if (Object.prototype.hasOwnProperty.call(vars, k)) s = s.split('{' + k + '}').join(vars[k]);
     return s;

package/dist/freeday-table.js

@@ -52,8 +52,18 @@
     rows: '{n} baris',
     info: 'Menampilkan {from}–{to} dari {total}'
   };
+  /* HTML lowercases attribute names, so a camelCase key like `filterText` can only ever be written
+     as `data-fdy-text-filtertext` — while the kebab form anybody would reach for,
+     `data-fdy-text-filter-text`, becomes a DIFFERENT attribute the enhancer never reads, and the
+     override fails silently. So the key is kebab-cased for the lookup; the run-together spelling
+     still resolves, for markup written against 1.39.0. */
+  function textAttr(root, key) {
+    if (!root || !root.getAttribute) return null;
+    var kebab = root.getAttribute('data-fdy-text-' + key.replace(/[A-Z]/g, function (c) { return '-' + c.toLowerCase(); }));
+    return kebab != null && kebab !== '' ? kebab : root.getAttribute('data-fdy-text-' + key);
+  }
   function textOf(root, key, vars) {
-    var custom = root && root.getAttribute ? root.getAttribute('data-fdy-text-' + key) : null;
+    var custom = textAttr(root, key);
     var s = custom != null && custom !== '' ? custom : TEXT[key];
     if (vars) for (var k in vars) if (Object.prototype.hasOwnProperty.call(vars, k)) s = s.split('{' + k + '}').join(vars[k]);
     return s;

package/dist/freeday-toast.js

@@ -56,8 +56,18 @@
   var TEXT = {
     close: 'Tutup'
   };
+  /* HTML lowercases attribute names, so a camelCase key like `filterText` can only ever be written
+     as `data-fdy-text-filtertext` — while the kebab form anybody would reach for,
+     `data-fdy-text-filter-text`, becomes a DIFFERENT attribute the enhancer never reads, and the
+     override fails silently. So the key is kebab-cased for the lookup; the run-together spelling
+     still resolves, for markup written against 1.39.0. */
+  function textAttr(root, key) {
+    if (!root || !root.getAttribute) return null;
+    var kebab = root.getAttribute('data-fdy-text-' + key.replace(/[A-Z]/g, function (c) { return '-' + c.toLowerCase(); }));
+    return kebab != null && kebab !== '' ? kebab : root.getAttribute('data-fdy-text-' + key);
+  }
   function textOf(root, key, vars) {
-    var custom = root && root.getAttribute ? root.getAttribute('data-fdy-text-' + key) : null;
+    var custom = textAttr(root, key);
     var s = custom != null && custom !== '' ? custom : TEXT[key];
     if (vars) for (var k in vars) if (Object.prototype.hasOwnProperty.call(vars, k)) s = s.split('{' + k + '}').join(vars[k]);
     return s;

package/dist/freeday-upload.js

@@ -64,8 +64,18 @@
     badType: 'Tipe berkas tidak didukung.',
     tooBig: 'Ukuran melebihi batas ({max}).'
   };
+  /* HTML lowercases attribute names, so a camelCase key like `filterText` can only ever be written
+     as `data-fdy-text-filtertext` — while the kebab form anybody would reach for,
+     `data-fdy-text-filter-text`, becomes a DIFFERENT attribute the enhancer never reads, and the
+     override fails silently. So the key is kebab-cased for the lookup; the run-together spelling
+     still resolves, for markup written against 1.39.0. */
+  function textAttr(root, key) {
+    if (!root || !root.getAttribute) return null;
+    var kebab = root.getAttribute('data-fdy-text-' + key.replace(/[A-Z]/g, function (c) { return '-' + c.toLowerCase(); }));
+    return kebab != null && kebab !== '' ? kebab : root.getAttribute('data-fdy-text-' + key);
+  }
   function textOf(root, key, vars) {
-    var custom = root && root.getAttribute ? root.getAttribute('data-fdy-text-' + key) : null;
+    var custom = textAttr(root, key);
     var s = custom != null && custom !== '' ? custom : TEXT[key];
     if (vars) for (var k in vars) if (Object.prototype.hasOwnProperty.call(vars, k)) s = s.split('{' + k + '}').join(vars[k]);
     return s;

package/dist/freeday.bundle.css

@@ -635,6 +635,25 @@ a { color: var(--color-primary); }
 .fdy-badge--info{color:var(--color-info-strong);background:var(--color-info-soft);border-color:color-mix(in srgb,var(--color-info) 26%,transparent);}
 .fdy-badge--outline{background:transparent;border-color:var(--color-border-strong);color:var(--color-text-muted);box-shadow:none;}
 
+/* Categorical tone badges — a status vocabulary larger than the semantic palette, from the
+ * general --tone-1..8 tokens. Same validated AA formula as .fdy-avatar--tone-* and
+ * .fdy-chip--tone-* (text >=4.5:1 both themes, gated by test/contrast.test.mjs).
+ *
+ * Semantics come first: a state that IS good, bad or waiting takes --success / --danger /
+ * --warning. These are for the rest — the states a workflow distinguishes but a palette of five
+ * cannot. A back-office document list carrying Draft, Submitted, Approved, Completed, Settled,
+ * Closed, Transferred, InDeclaration, Open and Rejected in ONE column collapsed to three colours,
+ * which is the report this shipped for. */
+.fdy-badge--tone-1,.fdy-badge--tone-2,.fdy-badge--tone-3,.fdy-badge--tone-4,.fdy-badge--tone-5,.fdy-badge--tone-6,.fdy-badge--tone-7,.fdy-badge--tone-8{background:color-mix(in srgb,var(--_fdy-badge-tone) 18%,var(--color-surface));color:color-mix(in srgb,var(--_fdy-badge-tone) 50%,var(--color-text));border-color:color-mix(in srgb,var(--_fdy-badge-tone) 26%,transparent);}
+.fdy-badge--tone-1{--_fdy-badge-tone:var(--tone-1);}
+.fdy-badge--tone-2{--_fdy-badge-tone:var(--tone-2);}
+.fdy-badge--tone-3{--_fdy-badge-tone:var(--tone-3);}
+.fdy-badge--tone-4{--_fdy-badge-tone:var(--tone-4);}
+.fdy-badge--tone-5{--_fdy-badge-tone:var(--tone-5);}
+.fdy-badge--tone-6{--_fdy-badge-tone:var(--tone-6);}
+.fdy-badge--tone-7{--_fdy-badge-tone:var(--tone-7);}
+.fdy-badge--tone-8{--_fdy-badge-tone:var(--tone-8);}
+
 /* Overlay badge — anchors a small count/dot/icon badge to a corner of any element
  * (icon, button, text). Wrap the content in .fdy-badge-wrap; add .fdy-badge-ov as a
  * sibling. Default is a solid neutral pill; colour + dot + position via modifiers. */
@@ -1089,6 +1108,18 @@ a { color: var(--color-primary); }
 .fdy-stat__value{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tighter);line-height:1;color:var(--color-text);font-variant-numeric:tabular-nums;}
 .fdy-stat__value small{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text-muted);}
 .fdy-stat__meta{font-size:var(--text-sm);color:var(--color-text-muted);display:flex;align-items:center;gap:var(--space-2);}
+/* A stat value is display type sized for a COUNT — "1,284" — and a back office puts money in it.
+   "IDR 300,000.00" needs 224px at --text-3xl and the grid's own track is 11rem, so it wrapped
+   between the currency and the number: two lines of 31px where the design says one. Measured, not
+   guessed (#020).
+   The value shrinks only when its own column is too narrow to hold it, so a wide dashboard keeps
+   exactly the type it has today. Scoped to a stat INSIDE .fdy-stats, where the width comes from the
+   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--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;}
@@ -1256,7 +1287,12 @@ a { color: var(--color-primary); }
 .fdy-dropzone__text{display:flex;flex-direction:column;gap:var(--space-1);}
 
 /* File rows (list of added/uploaded/rejected files) */
-.fdy-filelist{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-3);}
+/* Symmetric on purpose. The list carried margin-top and nothing below, so whatever follows it —
+   an "Add files" button, in every upload UI there is — sat flush against the last row: measured
+   0px. A block that claims space on one side only is not spacing, it is a lean. */
+.fdy-filelist{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-3);margin-bottom:var(--space-3);}
+/* Nothing after it, nothing to separate from — so the room is not spent. */
+.fdy-filelist:last-child{margin-bottom:0;}
 /* Side-by-side rows on wide screens (reflow to one column when narrow). */
 .fdy-filelist--grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));}
 .fdy-file{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border:var(--bw) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);}
@@ -1768,6 +1804,13 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-table-bulkbar__spacer{flex:1;}
 .fdy-table-bulkbar__actions{display:flex;gap:var(--space-2);}
 
+/* Controls inside a data row. `.fdy-input` and friends are width:100%, which in an auto-layout
+   table means they contribute NO intrinsic width — the column shrinks to whatever the header text
+   needs and the control collapses with it. A NOTE column ends up a box too narrow to read what you
+   typed into it. The floor is per-control rather than on the column, because the table does not
+   know which of its columns hold controls. */
+.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;}

package/dist/freeday.css

@@ -252,6 +252,25 @@ a { color: var(--color-primary); }
 .fdy-badge--info{color:var(--color-info-strong);background:var(--color-info-soft);border-color:color-mix(in srgb,var(--color-info) 26%,transparent);}
 .fdy-badge--outline{background:transparent;border-color:var(--color-border-strong);color:var(--color-text-muted);box-shadow:none;}
 
+/* Categorical tone badges — a status vocabulary larger than the semantic palette, from the
+ * general --tone-1..8 tokens. Same validated AA formula as .fdy-avatar--tone-* and
+ * .fdy-chip--tone-* (text >=4.5:1 both themes, gated by test/contrast.test.mjs).
+ *
+ * Semantics come first: a state that IS good, bad or waiting takes --success / --danger /
+ * --warning. These are for the rest — the states a workflow distinguishes but a palette of five
+ * cannot. A back-office document list carrying Draft, Submitted, Approved, Completed, Settled,
+ * Closed, Transferred, InDeclaration, Open and Rejected in ONE column collapsed to three colours,
+ * which is the report this shipped for. */
+.fdy-badge--tone-1,.fdy-badge--tone-2,.fdy-badge--tone-3,.fdy-badge--tone-4,.fdy-badge--tone-5,.fdy-badge--tone-6,.fdy-badge--tone-7,.fdy-badge--tone-8{background:color-mix(in srgb,var(--_fdy-badge-tone) 18%,var(--color-surface));color:color-mix(in srgb,var(--_fdy-badge-tone) 50%,var(--color-text));border-color:color-mix(in srgb,var(--_fdy-badge-tone) 26%,transparent);}
+.fdy-badge--tone-1{--_fdy-badge-tone:var(--tone-1);}
+.fdy-badge--tone-2{--_fdy-badge-tone:var(--tone-2);}
+.fdy-badge--tone-3{--_fdy-badge-tone:var(--tone-3);}
+.fdy-badge--tone-4{--_fdy-badge-tone:var(--tone-4);}
+.fdy-badge--tone-5{--_fdy-badge-tone:var(--tone-5);}
+.fdy-badge--tone-6{--_fdy-badge-tone:var(--tone-6);}
+.fdy-badge--tone-7{--_fdy-badge-tone:var(--tone-7);}
+.fdy-badge--tone-8{--_fdy-badge-tone:var(--tone-8);}
+
 /* Overlay badge — anchors a small count/dot/icon badge to a corner of any element
  * (icon, button, text). Wrap the content in .fdy-badge-wrap; add .fdy-badge-ov as a
  * sibling. Default is a solid neutral pill; colour + dot + position via modifiers. */
@@ -706,6 +725,18 @@ a { color: var(--color-primary); }
 .fdy-stat__value{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tighter);line-height:1;color:var(--color-text);font-variant-numeric:tabular-nums;}
 .fdy-stat__value small{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text-muted);}
 .fdy-stat__meta{font-size:var(--text-sm);color:var(--color-text-muted);display:flex;align-items:center;gap:var(--space-2);}
+/* A stat value is display type sized for a COUNT — "1,284" — and a back office puts money in it.
+   "IDR 300,000.00" needs 224px at --text-3xl and the grid's own track is 11rem, so it wrapped
+   between the currency and the number: two lines of 31px where the design says one. Measured, not
+   guessed (#020).
+   The value shrinks only when its own column is too narrow to hold it, so a wide dashboard keeps
+   exactly the type it has today. Scoped to a stat INSIDE .fdy-stats, where the width comes from the
+   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--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;}
@@ -873,7 +904,12 @@ a { color: var(--color-primary); }
 .fdy-dropzone__text{display:flex;flex-direction:column;gap:var(--space-1);}
 
 /* File rows (list of added/uploaded/rejected files) */
-.fdy-filelist{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-3);}
+/* Symmetric on purpose. The list carried margin-top and nothing below, so whatever follows it —
+   an "Add files" button, in every upload UI there is — sat flush against the last row: measured
+   0px. A block that claims space on one side only is not spacing, it is a lean. */
+.fdy-filelist{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-3);margin-bottom:var(--space-3);}
+/* Nothing after it, nothing to separate from — so the room is not spent. */
+.fdy-filelist:last-child{margin-bottom:0;}
 /* Side-by-side rows on wide screens (reflow to one column when narrow). */
 .fdy-filelist--grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));}
 .fdy-file{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border:var(--bw) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);}
@@ -1385,6 +1421,13 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-table-bulkbar__spacer{flex:1;}
 .fdy-table-bulkbar__actions{display:flex;gap:var(--space-2);}
 
+/* Controls inside a data row. `.fdy-input` and friends are width:100%, which in an auto-layout
+   table means they contribute NO intrinsic width — the column shrinks to whatever the header text
+   needs and the control collapses with it. A NOTE column ends up a box too narrow to read what you
+   typed into it. The floor is per-control rather than on the column, because the table does not
+   know which of its columns hold controls. */
+.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;}