@cahyo-dimas/freeday 1.53.0 → 2.0.0

package/adapters/vue/components/FdyTableFooter.vue

@@ -8,19 +8,19 @@ import FdyCombo from './FdyCombo.vue';
  * The band under a table: what you are looking at, how much of it you see, where you are.
  *
  * `FdyTable` renders this itself, so most screens never import it. It is exported for the one shape
- * that cannot use the table's own — a RESPONSIVE list, where a `.fdy-datatable` at `lg` and a
+ * that cannot use the table's own, a RESPONSIVE list, where a `.fdy-datatable` at `lg` and a
  * `.fdy-list` below it are two renderings of ONE page of rows. A footer inside the table is inside
  * the half that is hidden on a phone, so those screens need to render it once, outside both
  * (improvement notes #005 and #008, from IDU_EMATE_APPL_WEB).
  *
- * It owns nothing. `page` in, `update:page` out — the same contract as the table's server mode, so a
+ * It owns nothing. `page` in, `update:page` out, the same contract as the table's server mode, so a
  * screen already wired for that switches by moving the prop.
  */
 const props = defineProps<{
   /** The page being shown. `size` drives the range AND the rows-per-page control's value. */
   page: FdyPageState;
   /**
-   * Offer a rows-per-page control. Omit for none — the footer is then range + pager, exactly as
+   * Offer a rows-per-page control. Omit for none; the footer is then range + pager, exactly as
    * before. Picking a size emits `update:page` carrying the new `size` and the index that still
    * holds the row you were looking at.
    */
@@ -29,7 +29,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{ 'update:page': [page: FdyPageState] }>();
 
-/* The combo is labelled by the visible word beside it — a `<label for>` cannot reach inside a
+/* The combo is labelled by the visible word beside it, a `<label for>` cannot reach inside a
  * component, and an aria-label would leave that word unattached to anything. */
 const sizeLabelId: string = `fdy-rows-${useId()}`;
 
@@ -54,7 +54,7 @@ const sizes: ComputedRef<readonly number[]> = computed((): readonly number[] =>
 const sizeOptions: ComputedRef<Array<{ value: string; label: string }>> = computed(() =>
   sizes.value.map((size: number) => ({ value: String(size), label: String(size) })),
 );
-/* One page and no size control means there is nothing here to say — the table has always withheld
+/* One page and no size control means there is nothing here to say, the table has always withheld
  * the whole band in that case, and this is where that decision now lives. */
 const visible: ComputedRef<boolean> = computed((): boolean => hasPager.value || sizes.value.length > 0);
 

package/adapters/vue/index.d.ts

@@ -14,7 +14,7 @@ export declare function useFreeday(rootRef?: Ref<HTMLElement | null>): UseFreeda
 
 /**
  * Anchor a dropdown panel to its trigger in the top layer, so it escapes any ancestor overflow clip
- * — `.fdy-card` is `overflow:hidden`, so a panel positioned inside one is otherwise cut at the card's
+ *, `.fdy-card` is `overflow:hidden`, so a panel positioned inside one is otherwise cut at the card's
  * edge. The panel element must carry `popover="manual"`. This is the plumbing every kit dropdown
  * uses; it is exported so a control the kit does not ship can behave like one that it does, instead
  * of each app re-implementing it from the description.
@@ -35,11 +35,12 @@ export type { CascadeNode } from './components/FdyCascade.vue';
 export { default as FdyCfl } from './components/FdyCfl.vue';
 export { default as FdyChart } from './components/FdyChart.vue';
 export { default as FdyTable } from './components/FdyTable.vue';
-/** The table's own footer, standalone — for a responsive list whose table is hidden at some
+/** The table's own footer, standalone, for a responsive list whose table is hidden at some
  *  breakpoints and so cannot host it. */
 export { default as FdyTableFooter } from './components/FdyTableFooter.vue';
 export { default as FdyModal } from './components/FdyModal.vue';
 export { default as FdyDrawer } from './components/FdyDrawer.vue';
+export { default as FdyAppShell } from './components/FdyAppShell.vue';
 
 /** Controlled data-table types (shared, framework-agnostic core). */
 export type {

package/adapters/vue/index.js

@@ -11,3 +11,4 @@ export { default as FdyTable } from './components/FdyTable.vue';
 export { default as FdyTableFooter } from './components/FdyTableFooter.vue';
 export { default as FdyModal } from './components/FdyModal.vue';
 export { default as FdyDrawer } from './components/FdyDrawer.vue';
+export { default as FdyAppShell } from './components/FdyAppShell.vue';

package/adapters/vue/useFreeday.js

@@ -1,4 +1,4 @@
-/* Freeday — Vue 3 adapter (thin). The enhancers stay the source of truth; this
+/* Freeday. Vue 3 adapter (thin). The enhancers stay the source of truth; this
  * composable just re-runs every registered window.Freeday*.initAll() over a
  * subtree after Vue renders it, so [data-fdy-*] markup rendered by Vue gets
  * enhanced (and re-enhanced after updates). Enhancers are idempotent, so the
@@ -10,12 +10,12 @@
  *   useFreeday(root);            // scopes init to this component's subtree
  *   // <div ref="root"> ...[data-fdy-*] markup... </div>
  *
- * The ref may also sit ON the widget itself — <div ref="root" data-fdy-menu> — which is what you
+ * The ref may also sit ON the widget itself, <div ref="root" data-fdy-menu>, which is what you
  * write when the component's root element IS the widget. initAll() matches its own root as
  * well as descendants, so both shapes work. (Before 1.23.0 only the wrapping shape did, and
  * the other failed silently: querySelectorAll never matches its root.)
  *
- * Events come straight through as native bubbling CustomEvents — bind them with
+ * Events come straight through as native bubbling CustomEvents, bind them with
  * plain v-on (e.g. @fdy-cascade-change) and read event.detail. See index.d.ts
  * for the detail types.
  */

package/dist/asset.d.ts

@@ -1,6 +1,6 @@
-// Shared type stub for every export imported purely for its side effects — the CSS
+// Shared type stub for every export imported purely for its side effects: the CSS
 // bundles (`./css`, `./css/components`, `./tokens`) and the individual enhancer scripts
 // (`./enhancers/*`). TypeScript only needs the `types` condition to *resolve* the module;
-// there is no value surface to describe. (The root `.` import is different — it augments
-// window.Freeday — so it points at ./freeday.d.ts instead.)
+// there is no value surface to describe. (The root `.` import is different, since it augments
+// window.Freeday, so it points at ./freeday.d.ts instead.)
 export {};

package/dist/freeday-app-shell.js

@@ -1,20 +1,25 @@
-/* Freeday — app shell enhancer (optional, zero-dependency).
+/* Freeday, app shell enhancer (optional, zero-dependency).
  * Opt in with <div class="fdy-app" data-fdy-app>; the markup is otherwise unchanged.
  *
  * The shell has always shipped the state classes and no behaviour, which left every consumer to
- * assemble the toggle, Escape, focus trap, focus restore and `inert` themselves — and the two
+ * assemble the toggle, Escape, focus trap, focus restore and `inert` themselves, and the two
  * hand-rolled copies in this repo's own docs already disagreed about which of those exist. Below
  * 721px the sidebar is an OVERLAY (app-shell.css: position:fixed + translateX(-100%)), so it needs
  * the same treatment a modal drawer gets; at or above 721px it is a column that merely collapses.
  *
  * One rule covers both a hidden nav and a hidden page:
  *   - `__sidebar` is inert whenever the nav is NOT visible. Off-canvas and collapsed panels stay in
- *     the tab order otherwise — translateX(-100%) and width:0 hide a thing from the eye, not from
+ *     the tab order otherwise, translateX(-100%) and width:0 hide a thing from the eye, not from
  *     the keyboard, which is how a nav nobody can see still swallows Tab.
  *   - `__content` is inert only while the nav is an OPEN OVERLAY, so Tab cannot wander behind the
  *     backdrop.
  *
- * Emits nothing; the classes are the state. FreedayAppShell.init(root) for late-mounted markup.
+ * Emits a bubbling `fdy-app-nav` CustomEvent (detail {visible}) whenever the nav's visibility
+ * changes, and takes `FreedayAppShell.setVisible(root, visible)` from outside. Those two exist for
+ * the same reason the other enhancers have them: a host that keeps its own state, the Blazor
+ * wrapper binding @bind-NavOpen, an app persisting the collapsed preference, has to be able to
+ * hear the change and to drive it, without owning the behaviour twice.
+ * FreedayAppShell.init(root) for late-mounted markup.
  */
 (function () {
   'use strict';
@@ -26,7 +31,7 @@
     + ' textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 
   /* getClientRects(), not offsetParent: an overlay sidebar is position:fixed, and a fixed element
-     reports no offsetParent at all — filtering on it would call every nav item invisible. */
+     reports no offsetParent at all, filtering on it would call every nav item invisible. */
   function focusables(root) {
     return Array.prototype.filter.call(root.querySelectorAll(FOCUSABLE), function (el) {
       return el.getClientRects().length > 0;
@@ -51,18 +56,25 @@
 
     var mqWide = window.matchMedia(WIDE);
     var restoreTo = null;
+    var lastVisible = null;
 
     function isOverlayOpen() { return app.classList.contains('fdy-app--nav-open'); }
     function isCollapsed() { return app.classList.contains('fdy-app--nav-collapsed'); }
     function navVisible() { return mqWide.matches ? !isCollapsed() : isOverlayOpen(); }
 
-    /* aria-expanded answers "is the nav showing?" in BOTH modes — the two state classes are the
+    /* aria-expanded answers "is the nav showing?" in BOTH modes, the two state classes are the
        kit's business, not the reader's. */
     function sync() {
       var visible = navVisible();
       toggle.setAttribute('aria-expanded', String(visible));
       setInert(sidebar, !visible);
       setInert(content, !mqWide.matches && visible);
+      /* Announce only real changes. The first sync() runs at init to describe the state the markup
+         arrived in, which is not something a host asked for and must not look like one. */
+      if (lastVisible !== null && visible !== lastVisible) {
+        app.dispatchEvent(new CustomEvent('fdy-app-nav', { bubbles: true, detail: { visible: visible } }));
+      }
+      lastVisible = visible;
     }
 
     function open() {
@@ -79,7 +91,7 @@
       }
     }
 
-    /* restoreFocus is false when the viewport closed it rather than the user — a resize must not
+    /* restoreFocus is false when the viewport closed it rather than the user, a resize must not
        yank focus out from under whatever the reader was doing. */
     function close(restoreFocus) {
       if (!isOverlayOpen()) return;
@@ -106,7 +118,7 @@
 
     if (backdrop) backdrop.addEventListener('click', function () { close(); });
 
-    /* Following a link inside an overlay nav means "take me there" — leaving the panel open over
+    /* Following a link inside an overlay nav means "take me there", leaving the panel open over
        the page you just asked for is the one thing every hand-rolled copy in this repo disagreed on. */
     sidebar.addEventListener('click', function (e) {
       if (!isOverlayOpen()) return;
@@ -147,6 +159,23 @@
     });
 
     sync();
+
+    /* The same handle the other enhancers expose (`_fdyCombo` and friends): a host that binds its
+       own state needs to drive this without reaching for the class names the kit reserves. */
+    app._fdyAppShell = {
+      isVisible: navVisible,
+      setVisible: function (visible) {
+        if (visible === navVisible()) return;
+        if (mqWide.matches) {
+          app.classList.toggle('fdy-app--nav-collapsed', !visible);
+          sync();
+        } else if (visible) {
+          open();
+        } else {
+          close();
+        }
+      },
+    };
   }
 
   function initShells(context) {
@@ -163,5 +192,16 @@
     initShells();
   }
 
-  window.FreedayAppShell = { init: initShells, initAll: initShells };
+  window.FreedayAppShell = {
+    init: initShells,
+    initAll: initShells,
+    /* Both take the shell root. A missing or un-initialised root is a no-op rather than a throw:
+       a host may race the enhancer on first render, and a crash there is worse than a late sync. */
+    setVisible: function (root, visible) {
+      if (root && root._fdyAppShell) root._fdyAppShell.setVisible(visible === true);
+    },
+    isVisible: function (root) {
+      return !!(root && root._fdyAppShell && root._fdyAppShell.isVisible());
+    },
+  };
 })();

package/dist/freeday-autocomplete.js

@@ -1,7 +1,7 @@
-/* Freeday — autocomplete enhancer (optional, zero-dependency).
+/* Freeday, autocomplete enhancer (optional, zero-dependency).
  * Editable combobox (WAI-ARIA APG): a text input filters a role="listbox" of role="option"
  * items as you type; select fills the input. Auto-inits [data-fdy-autocomplete]. Options are
- * static markup filtered client-side — in an app, fetch/filter server-side and re-render options.
+ * static markup filtered client-side, in an app, fetch/filter server-side and re-render options.
  *
  * Markup: <div data-fdy-autocomplete class="fdy-autocomplete">
  *   <input class="fdy-input" role="combobox" aria-expanded="false" aria-autocomplete="list"

package/dist/freeday-breakpoint.js

@@ -1,4 +1,4 @@
-/* Freeday — breakpoint provider (optional, zero-dependency).
+/* Freeday, breakpoint provider (optional, zero-dependency).
  * The MudBreakpointProvider equivalent for JS consumers: stamps the current breakpoint on
  * <html data-breakpoint="xs|sm|md|lg|xl"> and emits a bubbling "fdy-breakpoint-change"
  * CustomEvent (detail {breakpoint}) whenever it changes. Also fills any element with

package/dist/freeday-carousel.js

@@ -1,4 +1,4 @@
-/* Freeday — carousel enhancer (optional, zero-dependency).
+/* Freeday, carousel enhancer (optional, zero-dependency).
  * Scroll-snap slider with prev/next arrows, generated dot indicators, keyboard (←/→),
  * and optional autoplay (data-fdy-autoplay="4000", pauses on hover/focus). Auto-inits
  * [data-fdy-carousel].
@@ -18,16 +18,16 @@
   'use strict';
 
 
-  /* User-facing strings. Indonesian by default — documented and deliberate for the raw enhancer
-   * path — and every one overridable per element, so a host that speaks another language (the
+  /* User-facing strings. Indonesian by default, documented and deliberate for the raw enhancer
+   * path, and every one overridable per element, so a host that speaks another language (the
    * Blazor adapters, an English app on the raw path) supplies its own without forking this file.
    * Keeping them in ONE table is also what lets a guard prove none is hard-coded further down. */
   var TEXT = {
-    position: '{n} dari {total}',
+    position: '{n} of {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,
+     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. */

package/dist/freeday-cascade.js

@@ -1,4 +1,4 @@
-/* Freeday — cascade select enhancer (optional, zero-dependency).
+/* Freeday, cascade select enhancer (optional, zero-dependency).
  * Turns a [data-fdy-cascade] wrapper into a hierarchical drill-down picker. The
  * data model is a hidden nested <ul> inside the wrapper: a <li> with a child <ul>
  * is a branch (drills in), a <li> without is a leaf (selects). Each <li> carries
@@ -54,16 +54,16 @@
   }
 
 
-  /* User-facing strings. Indonesian by default — documented and deliberate for the raw enhancer
-   * path — and every one overridable per element, so a host that speaks another language (the
+  /* User-facing strings. Indonesian by default, documented and deliberate for the raw enhancer
+   * path, and every one overridable per element, so a host that speaks another language (the
    * Blazor adapters, an English app on the raw path) supplies its own without forking this file.
    * Keeping them in ONE table is also what lets a guard prove none is hard-coded further down. */
   var TEXT = {
-    back: 'Kembali satu tingkat',
+    back: 'Back one level',
     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,
+     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. */
@@ -88,8 +88,8 @@
     var root = sourceUl ? parse(sourceUl) : [];
     if (sourceUl) sourceUl.remove();
 
-    var label = wrap.getAttribute('data-label') || 'Pilih';
-    var placeholder = wrap.getAttribute('data-placeholder') || 'Pilih…';
+    var label = wrap.getAttribute('data-label') || 'Select';
+    var placeholder = wrap.getAttribute('data-placeholder') || 'Select…';
     var sep = wrap.getAttribute('data-separator') || ' / ';
 
     var trigger = document.createElement('button');

package/dist/freeday-cfl.js

@@ -1,21 +1,21 @@
-/* Freeday — choose-from-list enhancer (optional, zero-dependency).
+/* Freeday, choose-from-list enhancer (optional, zero-dependency).
  * Wires a searchable master-data picker dialog to read-only fields.
  * Progressive enhancement over a native <dialog>; in a framework app, drive the
  * dialog as a controlled component (fetchPage callback + server cache), not a store.
  *
  * Markup contract (see docs):
- *  - Field group:  [data-fdy-cfl="<dialogId>"] — usually a `.fdy-input-group` holding a
+ *  - Field group:  [data-fdy-cfl="<dialogId>"], usually a `.fdy-input-group` holding a
  *      read-only `.fdy-input` and a trigger `<button class="fdy-input-group__btn">`.
  *      Optional `data-fdy-cfl-display="<key>"` picks which row dataset key fills the input
  *      (default "value"); optional `data-fdy-cfl-summary="{n} dipilih"` formats the multi label.
- *  - Standalone opener:  [data-fdy-cfl-open="<dialogId>"] — opens the dialog with no bound field.
+ *  - Standalone opener:  [data-fdy-cfl-open="<dialogId>"], opens the dialog with no bound field.
  *  - Dialog:  <dialog id="<dialogId>" class="fdy-modal fdy-modal--cfl"> containing
  *      a `[data-fdy-cfl-search]` input, `.fdy-cfl__row` <tr> rows carrying `data-*` fields,
  *      a `[data-fdy-cfl-empty]` element, and (multi only) `[data-fdy-cfl-multiple]` on the
  *      dialog plus `[data-fdy-cfl-count]` and `[data-fdy-cfl-confirm]` in the footer.
  *
  * Emits a bubbling "fdy-cfl-select" CustomEvent on the field group (or the dialog when
- * opened standalone): detail {row} for single-select, {rows} for multi-select — each a plain
+ * opened standalone): detail {row} for single-select, {rows} for multi-select, each a plain
  * object copy of the row's dataset. Consumers fill sibling fields (code → name) from it.
  */
 (function () {
@@ -34,15 +34,15 @@
   }
 
 
-  /* User-facing strings. Indonesian by default — documented and deliberate for the raw enhancer
-   * path — and every one overridable per element, so a host that speaks another language (the
+  /* User-facing strings. Indonesian by default, documented and deliberate for the raw enhancer
+   * path, and every one overridable per element, so a host that speaks another language (the
    * Blazor adapters, an English app on the raw path) supplies its own without forking this file.
    * Keeping them in ONE table is also what lets a guard prove none is hard-coded further down. */
   var TEXT = {
-    selected: '{n} dipilih'
+    selected: '{n} selected'
   };
   /* 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,
+     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. */
@@ -103,7 +103,7 @@
       var input = activeGroup.querySelector('.fdy-input');
       if (input) {
         if (detail.rows) {
-          var tpl = activeGroup.getAttribute('data-fdy-cfl-summary') || '{n} dipilih';
+          var tpl = activeGroup.getAttribute('data-fdy-cfl-summary') || '{n} selected';
           input.value = detail.rows.length ? tpl.replace('{n}', String(detail.rows.length)) : '';
         } else {
           var key = activeGroup.getAttribute('data-fdy-cfl-display') || 'value';

package/dist/freeday-chart.js

@@ -1,4 +1,4 @@
-/* Freeday — chart renderer (optional, zero-dependency, no external chart lib).
+/* Freeday, chart renderer (optional, zero-dependency, no external chart lib).
  * Renders sparkline / bar / line / area / donut into an element from data attributes.
  * Auto-inits [data-fdy-chart] once; call FreedayChart.update(el) to re-render after the
  * data attributes change (used by the freeday/vue <FdyChart> wrapper for reactive data).
@@ -6,14 +6,14 @@
  * Single-series colour (sparkline / simple bar / single line) via data-fdy-color references a
  * semantic token by name (primary, accent, success, warning, danger, info). Multi-series
  * defaults draw from the validated categorical --chart-1..8 palette in fixed order (never
- * cycled, 8-series cap); pass data-fdy-colors to override — a name is a semantic token
+ * cycled, 8-series cap); pass data-fdy-colors to override, a name is a semantic token
  * (var(--color-<name>)) OR a slot "chart-1".."chart-8" (var(--chart-N)) to pin a series to the
  * validated palette. Both data-fdy-color and data-fdy-colors accept the chart-N form.
  * Cartesian charts (line/area, multi-series/stacked bar) draw themed axes from --chart-grid /
  * --chart-tick and format ticks + tooltips via data-fdy-format (number|percent|currency). Their
  * viewBox is sized to the measured plot (1 user unit = 1 CSS pixel) and repainted from a
  * ResizeObserver, so axis type stays in real pixels and is set in CSS via --fdy-chart-tick-size.
- * Charts are an enhancement — put a table/text fallback inside the element and it will be
+ * Charts are an enhancement, put a table/text fallback inside the element and it will be
  * replaced on render; give the element role="img" + aria-label.
  *
  *  Sparkline: <span data-fdy-chart="sparkline" data-values="4,6,5,8,7,10" data-fdy-color="primary">
@@ -50,7 +50,7 @@
     return v ? v.split(',').map(function (s) { return s.trim(); }) : [];
   }
   // role="img" is Children Presentational per ARIA, so the docs used to say a chart's rendered
-  // legend, bar values and donut centre are not exposed. No browser actually prunes that subtree —
+  // legend, bar values and donut centre are not exposed. No browser actually prunes that subtree,
   // measured in Chrome's AX tree, every one of those nodes is live and unignored; what saves the
   // advice is only that AT treats a NAMED role="img" as a leaf and does not descend. So the kit
   // hides them itself, and the author's aria-label really is the whole text alternative.
@@ -225,7 +225,7 @@
     // Lay the chrome out first so the plot can be measured, then size the viewBox to it in CSS
     // pixels: one user unit is one pixel, so font-size / r / stroke-width mean what they say at
     // every container width. (A fixed 320x180 viewBox stretched by CSS multiplied every declared
-    // size by plotWidth/320 instead — a 9px axis label rendered ~39px on a 1728px viewport.)
+    // size by plotWidth/320 instead, a 9px axis label rendered ~39px on a 1728px viewport.)
     var legendMode = el.getAttribute('data-fdy-legend') || 'auto';
     var showLegend = legendMode !== 'none' && (series.length >= 2 || legendMode === 'always');
     el.classList.add('fdy-chart-xy');
@@ -246,7 +246,7 @@
     el.appendChild(plot);
 
     // Measured while empty: .fdy-chart-xy__plot carries its own width / aspect-ratio / min-height,
-    // so the box is already final. A detached or display:none chart measures 0 — fall back to the
+    // so the box is already final. A detached or display:none chart measures 0, fall back to the
     // legacy box and let the ResizeObserver repaint it once it is actually laid out.
     var box = plot.getBoundingClientRect();
     var W = Math.round(box.width) || 320, H = Math.round(box.height) || 180;
@@ -290,7 +290,7 @@
 
     // x category labels with autoskip. Labels are author-supplied, so estimate the widest one instead
     // of assuming a fixed 40px slot; keep every step-th plus the last, then drop any kept label that
-    // would collide with the one before it — including the forced last one (a fraction-of-a-slot
+    // would collide with the one before it, including the forced last one (a fraction-of-a-slot
     // overlap happens when n-1 lands next to the last kept multiple of step, e.g. n=24 at most widths).
     var widest = 0;
     for (var wi = 0; wi < n; wi++) widest = Math.max(widest, String(labels[wi] || ('#' + (wi + 1))).length * charW);
@@ -301,7 +301,7 @@
     for (var xi = 0; xi < n; xi++) {
       if (xi % step === 0 || xi === n - 1) kept.push(xi);
     }
-    // The last label is worth forcing, but not on top of its neighbour — drop the penultimate one.
+    // The last label is worth forcing, but not on top of its neighbour, drop the penultimate one.
     if (kept.length >= 2 && xPos(kept[kept.length - 1]) - xPos(kept[kept.length - 2]) < minGap) {
       kept.splice(kept.length - 2, 1);
     }
@@ -434,17 +434,17 @@
       var li = document.createElement('li');
       var sw = document.createElement('span'); sw.className = 'fdy-chart__swatch'; sw.style.background = colorAt(i);
       li.appendChild(sw);
-      li.appendChild(document.createTextNode((labels[i] || ('#' + (i + 1))) + ' — ' + Math.round((v / total) * 100) + '%'));
+      li.appendChild(document.createTextNode((labels[i] || ('#' + (i + 1))) + ' · ' + Math.round((v / total) * 100) + '%'));
       legend.appendChild(li);
     });
     el.appendChild(ring);
-    // Honour data-fdy-legend for the donut too — a caller may supply its own richer legend. 'auto'
+    // Honour data-fdy-legend for the donut too, a caller may supply its own richer legend. 'auto'
     // keeps today's behaviour (a donut is unreadable without labels, so it shows); 'none' suppresses it.
     if ((el.getAttribute('data-fdy-legend') || 'auto') !== 'none') el.appendChild(legend);
     ensureImg(el);
   }
 
-  // Full (re-)render from current data attributes. Idempotent — safe to call repeatedly.
+  // Full (re-)render from current data attributes. Idempotent, safe to call repeatedly.
   function renderChart(el) {
     var type = el.getAttribute('data-fdy-chart');
     if (type === 'sparkline') renderSparkline(el);

package/dist/freeday-chip.js

@@ -1,9 +1,9 @@
-/* Freeday — chip enhancer (optional, zero-dependency).
+/* Freeday, chip enhancer (optional, zero-dependency).
  * Two behaviours, both progressive enhancement:
  *
- * 1. Removable chips — any .fdy-chip__remove button removes its chip and emits a
+ * 1. Removable chips, any .fdy-chip__remove button removes its chip and emits a
  *    bubbling "fdy-chip-remove" (detail {value}).
- * 2. Choice / filter groups — a [data-fdy-chips] container of interactive chips
+ * 2. Choice / filter groups, a [data-fdy-chips] container of interactive chips
  *    (.fdy-chip--choice / .fdy-chip--filter, each a <button>) toggles aria-pressed
  *    on click. Add data-single for one-at-a-time (radio-like) selection; filter
  *    chips get a leading check when pressed. Emits "fdy-chip-change" on the group

package/dist/freeday-datepicker.js

@@ -1,6 +1,6 @@
-/* Freeday — date picker enhancer (optional, zero-dependency).
+/* Freeday, date picker enhancer (optional, zero-dependency).
  * Builds an input-styled trigger + calendar popover from an empty wrapper.
- * Locale comes from <html lang> (via Intl) — month/weekday/value formatting is not hardcoded.
+ * Locale comes from <html lang> (via Intl), month/weekday/value formatting is not hardcoded.
  *
  * Markup contract:
  *  - Single:  <div data-fdy-datepicker data-value="2026-07-21" data-label="Tanggal unggah"
@@ -19,7 +19,11 @@
 (function () {
   'use strict';
 
-  var LOCALE = document.documentElement.getAttribute('lang') || 'id';
+  /* The page's own `lang` wins, which is the better escape hatch than any attribute the kit
+     could invent: an Indonesian app writes <html lang="id"> and gets Indonesian month and
+     weekday names back automatically. The FALLBACK follows the kit's default language, or a
+     page without `lang` would read English labels around Indonesian month names. */
+  var LOCALE = document.documentElement.getAttribute('lang') || 'en';
   var uidSeq = 0;
   function uid(p) { uidSeq += 1; return p + '-' + uidSeq; }
   function pad(n) { return n < 10 ? '0' + n : '' + n; }
@@ -66,10 +70,10 @@
     var view = startOfDay(selected || new Date());
     view = new Date(view.getFullYear(), view.getMonth(), 1);
     var focusDate = null;
-    /* 'days' | 'months' — the calendar drills one level up rather than growing furniture beside the
+    /* 'days' | 'months', the calendar drills one level up rather than growing furniture beside the
        title. Before this, the only pointer route to another month was one click per month: from
        August 2026 to March 2022 is fifty-three of them. Shift+PageUp already jumped a year, but a
-       shortcut nobody can see is not an affordance — the repo's own test helper clicked "previous
+       shortcut nobody can see is not an affordance, the repo's own test helper clicked "previous
        month" twenty-four times to reach a date two years back. */
     var mode = 'days';
     var focusMonth = null;
@@ -268,7 +272,7 @@
     var YEARS_PER_PAGE = 12;
     function yearPageStart(y) { return Math.floor(y / YEARS_PER_PAGE) * YEARS_PER_PAGE; }
 
-    /* A year is only unreachable when EVERY month in it falls outside min/max — the same rule
+    /* A year is only unreachable when EVERY month in it falls outside min/max, the same rule
        monthDisabled applies one level down, for the same reason: a bound that sits inside the year
        disables neither end. */
     function yearDisabled(y) {
@@ -513,7 +517,7 @@
       var f = fromApi.getValue();
       var t = toApi.getValue();
       toApi.setMin(f || null);   // end can't precede start (one-directional, per Foundation)
-      fromApi.setRange(f, t);     // start stays free — picking a later start clears the end below
+      fromApi.setRange(f, t);     // start stays free, picking a later start clears the end below
       toApi.setRange(f, t);
     }
     fromEl.addEventListener('fdy-datepicker-change', function () {

package/dist/freeday-datetime.js

@@ -1,6 +1,6 @@
-/* Freeday — datetime picker composer (optional, zero-dependency).
+/* Freeday, datetime picker composer (optional, zero-dependency).
  * Combines a child date picker and time picker into one value. It does not build
- * anything itself — freeday-datepicker.js and freeday-timepicker.js enhance the
+ * anything itself, freeday-datepicker.js and freeday-timepicker.js enhance the
  * children; this only listens for their change events and emits a single combined
  * "fdy-datetime-change" (detail {date, time, value}). value is "YYYY-MM-DDTHH:MM"
  * when both parts are set, else "". Icon variants are controlled per child picker
@@ -10,7 +10,7 @@
  *   <div data-fdy-datepicker data-value="2026-07-21"></div>
  *   <div data-fdy-timepicker data-value="14:30"></div></div>
  * State: add data-fdy-disabled or data-fdy-invalid on the wrapper to reflect it onto both
- * child triggers as one control (read-only is adapter-only — a vanilla datetime is interactive).
+ * child triggers as one control (read-only is adapter-only, a vanilla datetime is interactive).
  */
 (function () {
   'use strict';
@@ -25,7 +25,7 @@
     if (!dp || !tp) return;
 
     // Reflect one wrapper-level state onto BOTH child triggers so a datetime reads as a single
-    // disabled/invalid control. Deferred with setTimeout(0) — NOT a microtask: the timepicker
+    // disabled/invalid control. Deferred with setTimeout(0). NOT a microtask: the timepicker
     // enhancer registers its DOMContentLoaded init AFTER this composer, and microtasks drain
     // *between* listeners (so a microtask would run before the timepicker trigger exists). A
     // macrotask waits until the whole init pass is done and both triggers are built. (readonly is
@@ -56,7 +56,7 @@
       }));
     }
 
-    // Listen for the children's bubbling change events (order-independent — no need
+    // Listen for the children's bubbling change events (order-independent, no need
     // for the child enhancers to have run before this composer).
     wrap.addEventListener('fdy-datepicker-change', function (e) { date = e.detail.value; emit(); });
     wrap.addEventListener('fdy-time-select', function (e) { time = e.detail.value; emit(); });

package/dist/freeday-drawer.js

@@ -1,4 +1,4 @@
-/* Freeday — drawer enhancer (optional, zero-dependency).
+/* Freeday, drawer enhancer (optional, zero-dependency).
  * A trigger [data-fdy-drawer="drawerId"] opens the <dialog class="fdy-drawer" id="drawerId">
  * as a modal side panel (native showModal gives focus-trap, Esc, and return-focus). Clicking
  * the backdrop or any [data-close] inside closes it.

package/dist/freeday-form.js

@@ -1,4 +1,4 @@
-/* Freeday — form validation enhancer (optional, zero-dependency).
+/* Freeday, form validation enhancer (optional, zero-dependency).
  * Wires the native Constraint Validation API to accessible inline errors on any
  * [data-fdy-validate] <form>. Native-first: constraints come from the standard
  * markup attributes (required, type, pattern, min/max, minlength/maxlength, step);
@@ -38,24 +38,24 @@
     badInput: 'type',
     customError: 'mismatch'
   };
-  /* User-facing strings. Indonesian by default — documented and deliberate for the raw enhancer
-   * path — and overridable at three levels, narrowest first: `data-fdy-msg-<alias>` on the field,
+  /* User-facing strings. Indonesian by default, documented and deliberate for the raw enhancer
+   * path, and overridable at three levels, narrowest first: `data-fdy-msg-<alias>` on the field,
    * `data-fdy-msg` on the field, then `data-fdy-text-<alias>` on the FORM. The form level is what
    * a host in another language needs: it sets nine messages once instead of on every input.
    * Keeping them in ONE table is also what lets a guard prove none is hard-coded further down. */
   var TEXT = {
-    required: 'Wajib diisi.',
-    type: 'Format tidak valid.',
-    pattern: 'Format tidak sesuai.',
-    minlength: 'Terlalu pendek.',
-    maxlength: 'Terlalu panjang.',
-    min: 'Nilai terlalu kecil.',
-    max: 'Nilai terlalu besar.',
-    step: 'Nilai tidak sesuai kelipatan.',
-    mismatch: 'Nilai tidak cocok.',
-    invalid: 'Tidak valid.'
+    required: 'Required.',
+    type: 'Invalid format.',
+    pattern: 'Doesn’t match the required format.',
+    minlength: 'Too short.',
+    maxlength: 'Too long.',
+    min: 'Too small.',
+    max: 'Too large.',
+    step: 'Not a valid step.',
+    mismatch: 'Values don’t match.',
+    invalid: 'Invalid.'
   };
-  /* Kebab-cased for the lookup — see the note in the other enhancers: HTML lowercases attribute
+  /* 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) {