@cahyo-dimas/freeday 1.43.0 → 1.46.0

package/CHANGELOG.md

@@ -3,6 +3,72 @@
 Semua perubahan penting dicatat di sini. Format longgar mengikuti
 [Keep a Changelog](https://keepachangelog.com/); tiap versi = git tag.
 
+## [1.46.0] — 2026-08-19
+The docs site catches up with the components, and writing it out as a consumer found a defect in
+#016's own contract.
+### Fixed
+- **`data-fdy-text-*` could not be written the way HTML allows** (#023). The keys in each enhancer's
+  `TEXT` table are camelCase, and `textOf` looked up `'data-fdy-text-' + key` — but **HTML lowercases
+  attribute names**, so `data-fdy-text-filterText` becomes `...filtertext` while
+  `data-fdy-text-filter-text`, the spelling anybody would actually reach for, is a DIFFERENT
+  attribute the enhancer never read. It failed silently, which is the only way an override can fail.
+  The key is kebab-cased for the lookup now; the run-together spelling still resolves, so markup
+  written against 1.39.0 keeps working. Nine enhancers.
+  It survived #016's own guard because all seven overrides that guard asserts use **single-word**
+  keys, which have no case to lose — the guard was not wrong, it was unrepresentative. The spec now
+  overrides `filterText`, reached by clicking a column filter open. Mutation-tested.
+### Docs
+- **`docs/index.html` was nine releases behind** — it stated v1.34.0 and demoed none of what landed
+  after it. Brought level with the components, as live demos rather than a feature list, because
+  that is what the rest of the page is:
+  - **New section — Tabel beku.** `.fdy-table--sticky` / `--sticky-head`, `.fdy-table__freeze` +
+    `--fdy-freeze-left`, `.fdy-table-scroll--frozen` + `--fdy-table-frozen-h` (1.35.0, 1.37.0), with
+    a rate matrix you can actually scroll on both axes, and the reason the two axes are separate
+    modifiers.
+  - **New section — Teks enhancer (i18n).** The `data-fdy-text-*` contract (1.39.0), demoed as the
+    same data table rendered entirely in English — the demo that found #023.
+  - **Badge tone scale** `--tone-1`…`--tone-8` (1.44.0), with the distinction the note drew: semantic
+    variants state a judgement, tones distinguish without implying one.
+  - **Date picker** now states the days → months → years drill (1.36.0); **Choose-from-list** states
+    `multiple` for the typed wrappers, not only the enhancer's `data-fdy-cfl-multiple` (1.42.0).
+- Verified in a browser rather than by reading the markup: the i18n demo renders `Showing 1–3 of 5`
+  and a `Previous` pager, and the frozen table computes `border-collapse:separate` with
+  `position:sticky` cells.
+
+## [1.45.0] — 2026-08-19
+Two defects in 1.42.0's multi-select CFL, found by the app that asked for it (IDU_EMATE_APPL_WEB, #022).
+### Fixed
+- **The row tick rendered as the browser's checkbox, not the kit's** (#022), in all three adapters.
+  They shipped `class="fdy-check"` on a bare `<input>`; that class styles a wrapping `<label>` and
+  its `input` DESCENDANT, so on the input itself it applied `inline-flex` and a cursor and nothing
+  else — a raw UA control in the middle of a styled dialog. `COMPONENTS.md` already said which class
+  a bare input in a table takes: `.fdy-checkbox`. Every behavioural assertion in `browser/cfl-multi`
+  passed while it was wrong, because none of them looked at the rendering.
+- **`aria-selected` broke `vue-tsc` in consuming apps** (#022). `String(isPicked(row))` widens to
+  `string`, and Vue types the attribute as `Booleanish` — so a strict app type-checking the kit's own
+  `.vue` source failed on a file it does not own. Now `'true' : 'false'`.
+### Added — guards
+- `browser/cfl-multi.mjs` asserts the tick's computed `appearance` is `none`, which is the tell that
+  the kit painted the box rather than the UA. Mutation-tested.
+
+## [1.44.0] — 2026-08-19
+One note from the back-office app (IDU_EMATE_APPL_WEB, #021).
+### Added
+- **`--tone-1`…`--tone-8` on `.fdy-badge`** — a status vocabulary larger than the semantic palette.
+  `.fdy-avatar--tone-*` and `.fdy-chip--tone-*` already carried the categorical scale; the badge,
+  which is the component that actually renders status, did not. The reporting app's document lists
+  carry **ten distinct statuses in one column** — Draft, Submitted, Approved, Completed, Settled,
+  Closed, Transferred, InDeclaration, Open, Rejected — against five modifiers, so Approved, Closed
+  and Completed came out the same green and Draft, InDeclaration and Transferred the same grey.
+  Semantics still come first: a state that IS good, bad or waiting takes `--success` / `--danger` /
+  `--warning`, and these are for the rest. Same `--tone-*` tokens and the same 18%/50% mix as the
+  other two, so the existing contrast test already measures them.
+### Added — guards
+- `test/css.test.mjs` asserts all eight bind their own token (a gap silently reuses a colour) and
+  that the mix stays identical to the avatar's and the chip's — one contrast test covers the three,
+  so a badge that drifted to its own ratio would be gated by a test measuring something else.
+  `test/contrast.test.mjs` renamed from "avatar tones" to "categorical tones" to say so.
+
 ## [1.43.0] — 2026-08-19
 Three crowding reports from one settlement screen (IDU_EMATE_APPL_WEB, #020). All three measured in
 Chromium rather than read off the CSS — each is a layout outcome, invisible in the stylesheet.

package/COMPONENTS.md

@@ -773,7 +773,9 @@ pagination. Needs `freeday-table.js`. Wrap the whole thing in `.fdy-datatable` +
   wrapper**.
 - **Overriding an enhancer's strings.** Each enhancer keeps its strings in one `TEXT` table and
   reads them through `textOf()`, so any of them can be replaced per element with
-  **`data-fdy-text-<key>`** — no forking, and no rendering the nodes yourself:
+  **`data-fdy-text-<key>`**, the key kebab-cased — no forking, and no rendering the nodes yourself.
+  (HTML lowercases attribute names, so a camelCase key like `filterText` is written
+  `data-fdy-text-filter-text`; the run-together spelling still resolves.):
 
   ```html
   <div data-fdy-table
@@ -1106,6 +1108,12 @@ while it stays a real `<button>`/`<a>` with real keyboard semantics.
 Inline status pill: `--success` `--warning` `--danger` `--info` `--outline`. Never colour-only —
 the text carries the meaning.
 
+`--tone-1`…`--tone-8` for a status vocabulary larger than the semantic palette. Semantics first —
+a state that IS good, bad or waiting takes `--success` / `--danger` / `--warning`; these are for
+the rest, so two states a workflow distinguishes never share a look. Map each status to a FIXED
+tone, never to a hash of the string: a status is a closed set, and a hash reassigns colours the
+moment the set grows.
+
 **Notification badge is the overlay variant**, not a separate component: wrap anything in
 `.fdy-badge-wrap` and add `.fdy-badge-ov` (`--primary` `--danger` `--accent` `--info` `--success`
 `--warning`, `--dot` for a bare dot, `--top-left` / `--bottom-right` / `--bottom-left` to move it).

package/adapters/blazor/FdyCfl.razor

@@ -82,7 +82,7 @@
                                 @if (Multiple)
                                 {
                                     <td class="fdy-cfl__check">
-                                        <input class="fdy-check" type="checkbox" tabindex="-1" checked="@IsPicked(row)" aria-hidden="true" />
+                                        <input class="fdy-checkbox" type="checkbox" tabindex="-1" checked="@IsPicked(row)" aria-hidden="true" />
                                     </td>
                                 }
                                 @foreach (CflColumn<TRow> col in Columns)

package/adapters/react/components/FdyCfl.tsx

@@ -435,7 +435,7 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
                       >
                         {isMultiple ? (
                           <td className="fdy-cfl__check">
-                            <input className="fdy-check" type="checkbox" tabIndex={-1} checked={isPicked(row)} readOnly aria-hidden="true" />
+                            <input className="fdy-checkbox" type="checkbox" tabIndex={-1} checked={isPicked(row)} readOnly aria-hidden="true" />
                           </td>
                         ) : null}
                         {props.columns.map((col: CflColumn<Row>): JSX.Element => (

package/adapters/vue/components/FdyCfl.vue

@@ -426,12 +426,12 @@ onBeforeUnmount((): void => {
                   :key="rowKey(row)"
                   class="fdy-cfl__row"
                   :class="{ 'is-active': i === activeIndex }"
-                  :aria-selected="multiple === true ? String(isPicked(row)) : i === activeIndex ? 'true' : undefined"
+                  :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-check" type="checkbox" tabindex="-1" :checked="isPicked(row)" aria-hidden="true" />
+                    <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>

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. */

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. */

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.43.0",
+  "version": "1.46.0",
   "description": "Freeday — token-driven, framework-agnostic UI KIT (design source-of-truth).",
   "type": "module",
   "license": "MIT",

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. */