@cahyo-dimas/freeday 1.41.0 → 1.46.0

package/dist/freeday.js

@@ -219,8 +219,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;
@@ -386,8 +396,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;
@@ -641,8 +661,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;
@@ -2094,8 +2124,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'];
@@ -2294,8 +2329,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;
@@ -2975,8 +3020,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;
@@ -3110,8 +3165,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;
@@ -3892,8 +3957,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;
@@ -4119,8 +4194,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cahyo-dimas/freeday",
-  "version": "1.41.0",
+  "version": "1.46.0",
   "description": "Freeday — token-driven, framework-agnostic UI KIT (design source-of-truth).",
   "type": "module",
   "license": "MIT",
@@ -92,7 +92,7 @@
   "scripts": {
     "build": "node tokens/build.mjs",
     "test": "node --test",
-    "test:browser": "node --test browser/vanilla.mjs browser/adapter.mjs browser/layout.mjs browser/theme.mjs browser/state.mjs browser/root-init.mjs browser/upload-states.mjs browser/number.mjs browser/card-stretch.mjs browser/text-override.mjs browser/control-heights.mjs",
+    "test:browser": "node --test browser/vanilla.mjs browser/adapter.mjs browser/layout.mjs browser/theme.mjs browser/state.mjs browser/root-init.mjs browser/upload-states.mjs browser/number.mjs browser/card-stretch.mjs browser/text-override.mjs browser/control-heights.mjs browser/cfl-multi.mjs browser/crowding.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/badge.css

@@ -6,6 +6,25 @@
 .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. */

package/src/components/composition.css

@@ -51,6 +51,18 @@
 .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;}

package/src/components/file-upload.css

@@ -16,7 +16,12 @@
 .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);}

package/src/components/table.css

@@ -128,3 +128,10 @@
 .fdy-table-bulkbar__count{font-weight:var(--weight-semibold);white-space:nowrap;}
 .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;}