@cahyo-dimas/freeday 2.0.0 → 2.2.0

package/adapters/blazor/FdyCascade.razor

@@ -11,7 +11,12 @@
      data-placeholder="@Placeholder"
      data-separator="@Separator"
      data-fdy-text-back="@BackLabel"
-     data-fdy-text-submenu="@SubmenuLabel">
+     data-fdy-text-submenu="@SubmenuLabel"
+     data-id="@Id"
+     data-describedby="@Describedby"
+     data-disabled="@(Disabled ? "true" : null)"
+     data-readonly="@(Readonly ? "true" : null)"
+     data-invalid="@(Invalid ? "true" : null)">
     <ul>
         @foreach (FdyCascadeNode node in Nodes)
         {

package/adapters/blazor/FdyCascade.razor.cs

@@ -31,8 +31,32 @@ public partial class FdyCascade
     protected override async ValueTask OnHydratedAsync()
         => await SubscribeAsync("fdy-cascade-change", nameof(OnChange));
 
+    /// <summary>Id for the trigger the enhancer builds, so a form's label can point at it.</summary>
+    [Parameter] public string? Id { get; set; }
+
+    /// <summary>Id of the help or error text the trigger describes itself with.</summary>
+    [Parameter] public string? Describedby { get; set; }
+
+    /// <summary>Greyed and out of the tab order.</summary>
+    [Parameter] public bool Disabled { get; set; }
+
+    /// <summary>Locked/view mode: focusable and showing its value, but it will not open.</summary>
+    [Parameter] public bool Readonly { get; set; }
+
+    /// <summary>Marks the field invalid (<c>aria-invalid</c> + the error styling).</summary>
+    [Parameter] public bool Invalid { get; set; }
+
     protected override bool ShouldRender() => !Hydrated;
 
+    /* Pushed, not re-rendered: the seed's <ul> is consumed and removed by the enhancer, so this
+       component can never render again. */
+    protected override async Task OnParametersSetAsync()
+    {
+        if (!Hydrated) return;
+        await JS.InvokeVoidAsync("FreedayCascade.setState", Root,
+            new { disabled = Disabled, @readonly = Readonly, invalid = Invalid });
+    }
+
     /// <summary>Invoked by the bridge when the user selects a leaf.</summary>
     [JSInvokable]
     public async Task OnChange(ChangeDetail detail)

package/adapters/blazor/FdyCombo.razor

@@ -10,6 +10,7 @@
     <button id="@ButtonId" type="button" class="fdy-combo__button" role="combobox"
             aria-haspopup="listbox" aria-expanded="false"
             aria-labelledby="@AriaLabelledby"
+            aria-describedby="@Describedby"
             aria-invalid="@(Invalid ? "true" : null)"
             aria-readonly="@(Readonly ? "true" : null)"
             disabled="@Disabled">

package/adapters/blazor/FdyCombo.razor.cs

@@ -29,6 +29,10 @@ public partial class FdyCombo<TValue>
 
     [Parameter] public bool Invalid { get; set; }
 
+    /// <summary>Id of the help or error text the combobox describes itself with. Vue and React
+    /// have always had this one; Blazor was the odd stack out.</summary>
+    [Parameter] public string? Describedby { get; set; }
+
     private readonly string _autoId = $"fdy-combo-{Guid.NewGuid():N}";
     private TValue _lastValue = default!;
     private bool _ready;
@@ -66,6 +70,15 @@ public partial class FdyCombo<TValue>
             _lastValue = Value;
             await JS.InvokeVoidAsync("FreedayBlazor.comboSetValue", Root, KeyOf(Value));
         }
+
+        /* The three states need the same treatment for the same reason the value did: this
+           component stops rendering once hydrated, so a page that disables the field afterwards
+           was changing a parameter nothing read. */
+        if (_ready)
+        {
+            await JS.InvokeVoidAsync("FreedayCombo.setState", Root,
+                new { disabled = Disabled, @readonly = Readonly, invalid = Invalid });
+        }
     }
 
     /// <summary>Invoked by the bridge when the user picks an option (enhancer's fdy-change).</summary>

package/adapters/blazor/FdyDatepicker.razor

@@ -10,4 +10,18 @@
      data-label="@Label"
      data-placeholder="@Placeholder"
      data-min="@Min"
-     data-max="@Max"></div>
+     data-max="@Max"
+     data-id="@Id"
+     data-describedby="@Describedby"
+     data-disabled="@(Disabled ? "true" : null)"
+     data-readonly="@(Readonly ? "true" : null)"
+     data-invalid="@(Invalid ? "true" : null)"
+     data-fdy-text-prev-month="@PrevMonthLabel"
+     data-fdy-text-next-month="@NextMonthLabel"
+     data-fdy-text-prev-year="@PrevYearLabel"
+     data-fdy-text-next-year="@NextYearLabel"
+     data-fdy-text-prev-years="@PrevYearsLabel"
+     data-fdy-text-next-years="@NextYearsLabel"
+     data-fdy-text-choose-month="@ChooseMonthLabel"
+     data-fdy-text-choose-year="@ChooseYearLabel"
+     data-fdy-text-back-to-months="@BackToMonthsLabel"></div>

package/adapters/blazor/FdyDatepicker.razor.cs

@@ -18,6 +18,42 @@ public partial class FdyDatepicker
     [Parameter] public string? Min { get; set; }
     [Parameter] public string? Max { get; set; }
 
+    /// <summary>Id for the trigger the enhancer builds, so a form's own label can point at it.</summary>
+    [Parameter] public string? Id { get; set; }
+
+    /// <summary>Id of the help or error text the trigger describes itself with.</summary>
+    [Parameter] public string? Describedby { get; set; }
+
+    /// <summary>Greyed and out of the tab order.</summary>
+    [Parameter] public bool Disabled { get; set; }
+
+    /// <summary>Locked/view mode: focusable and showing its date, but the calendar will not open.
+    /// Unlike <see cref="Disabled"/> it keeps tab order and is not greyed.</summary>
+    [Parameter] public bool Readonly { get; set; }
+
+    /// <summary>Marks the field invalid (<c>aria-invalid</c> + the error styling).</summary>
+    [Parameter] public bool Invalid { get; set; }
+
+    /* The calendar's own navigation labels. Month and weekday NAMES follow the page's `lang`
+       through Intl and need nothing here; these are the buttons around them, which until 2.1.1
+       were literals inside the enhancer that no host could reach. Leave one null and the
+       enhancer's English default stands. */
+    [Parameter] public string? PrevMonthLabel { get; set; }
+    [Parameter] public string? NextMonthLabel { get; set; }
+    [Parameter] public string? PrevYearLabel { get; set; }
+    [Parameter] public string? NextYearLabel { get; set; }
+    [Parameter] public string? PrevYearsLabel { get; set; }
+    [Parameter] public string? NextYearsLabel { get; set; }
+
+    /// <summary>The title button that drills into the month grid. <c>{label}</c> is the period shown.</summary>
+    [Parameter] public string? ChooseMonthLabel { get; set; }
+
+    /// <summary>The title button that drills into the year grid. <c>{label}</c> is the period shown.</summary>
+    [Parameter] public string? ChooseYearLabel { get; set; }
+
+    /// <summary>The year grid's title, back to months. <c>{start}</c> and <c>{end}</c> are the page range.</summary>
+    [Parameter] public string? BackToMonthsLabel { get; set; }
+
     protected override ValueTask HydrateAsync() => JS.InvokeVoidAsync("FreedayDatepicker.init", Root);
 
     protected override async ValueTask OnHydratedAsync()
@@ -26,6 +62,16 @@ public partial class FdyDatepicker
     // The enhancer owns the built trigger + calendar; never let Blazor re-render the seed.
     protected override bool ShouldRender() => !Hydrated;
 
+    /* Which is exactly why the three states are pushed rather than re-rendered: the seed above is
+       written once, so a page that disables this field later would otherwise be ignored in
+       silence. */
+    protected override async Task OnParametersSetAsync()
+    {
+        if (!Hydrated) return;
+        await JS.InvokeVoidAsync("FreedayDatepicker.setState", Root,
+            new { disabled = Disabled, @readonly = Readonly, invalid = Invalid });
+    }
+
     /// <summary>Invoked by the bridge when the user picks (or clears) a date.</summary>
     [JSInvokable]
     public async Task OnChange(ChangeDetail detail)

package/adapters/core/cfl-value.d.ts

@@ -0,0 +1,11 @@
+// Types for the choose-from-list value helper (adapters/core/cfl-value.js).
+
+/**
+ * Narrow an `FdyCfl` value to the row a single-select can actually produce.
+ *
+ * `Row[]` is reachable only under `multiple` and `null` only under `clearable`, but the emitted
+ * type cannot say which of those props a given field sets, so every single-select handler has to
+ * prove it. Throws on an array rather than taking its first row: quietly picking one is how a
+ * `multiple` added later goes unnoticed.
+ */
+export declare function singleRow<Row>(value: Row | Row[] | null): Row | null;

package/adapters/core/cfl-value.js

@@ -0,0 +1,31 @@
+// Freeday, choose-from-list value narrowing (pure, zero dependencies).
+//
+// `FdyCfl` in Vue and React declares one model type, `Row | Row[] | null`, covering three prop
+// combinations at once: the array is reachable only under `multiple`, the null only under
+// `clearable`. A single-select screen therefore has to narrow a union that its own props make
+// impossible, and the widening arrived across two releases that were additive from the kit's side
+// (1.29.0 `clearable`, 1.42.0 `multiple`) and a broken build from the consumer's. Apps were each
+// inventing the guard differently: a cast that hides the day `clearable` is added, a silent
+// ignore, or a throw. The kit is what knows the invariant, so the guard is written once, here.
+//
+// Blazor needs none of this: multi-select there is a separate `Values` / `ValuesChanged` pair,
+// because a nullable union is not a C# binding shape.
+
+/**
+ * Narrow an `FdyCfl` value to the row a single-select can actually produce.
+ *
+ * @template Row
+ * @param {Row | Row[] | null} value the value the component emitted
+ * @returns {Row | null} the picked row, or null when nothing is picked
+ * @throws {TypeError} when handed an array, which only a `multiple` CFL emits
+ */
+export function singleRow(value) {
+  if (Array.isArray(value)) {
+    throw new TypeError(
+      `singleRow() got an array of ${value.length} row(s). Only an FdyCfl with \`multiple\` emits ` +
+        'one, and a set of rows is not a single selection: read the array directly on that field, ' +
+        'or drop `multiple`.',
+    );
+  }
+  return value == null ? null : value;
+}

package/adapters/react/components/FdyDrawer.tsx

@@ -14,6 +14,8 @@ export interface FdyDrawerProps {
   onClose: () => void;
   side?: 'left' | 'right';
   dismissible?: boolean;
+  /** aria-label for the × button. Default 'Close'. */
+  closeLabel?: string;
   footer?: ReactNode;
   children?: ReactNode;
 }
@@ -47,7 +49,7 @@ export function FdyDrawer(props: FdyDrawerProps): JSX.Element {
       <div className="fdy-drawer__header">
         <h3 id={titleId} className="fdy-drawer__title">{props.title}</h3>
         {dismissible && (
-          <button className="fdy-drawer__close" type="button" aria-label="Close" onClick={props.onClose}>&times;</button>
+          <button className="fdy-drawer__close" type="button" aria-label={props.closeLabel ?? 'Close'} onClick={props.onClose}>&times;</button>
         )}
       </div>
 

package/adapters/react/components/FdyModal.tsx

@@ -15,6 +15,8 @@ export interface FdyModalProps {
   onClose: () => void;
   size?: 'sm' | 'md' | 'lg' | 'wide';
   dismissible?: boolean;
+  /** aria-label for the × button. Default 'Close'. */
+  closeLabel?: string;
   footer?: ReactNode;
   children?: ReactNode;
 }
@@ -51,7 +53,7 @@ export function FdyModal(props: FdyModalProps): JSX.Element {
       <div className="fdy-modal__header">
         <h3 id={titleId} className="fdy-modal__title">{props.title}</h3>
         {dismissible && (
-          <button className="fdy-modal__close" type="button" aria-label="Close" onClick={props.onClose}>&times;</button>
+          <button className="fdy-modal__close" type="button" aria-label={props.closeLabel ?? 'Close'} onClick={props.onClose}>&times;</button>
         )}
       </div>
 

package/adapters/react/index.d.ts

@@ -34,6 +34,9 @@ export { FdyDateRange, type FdyDateRangeProps, type DateRangeValue } from './com
 export { FdyAutocomplete, type FdyAutocompleteProps } from './components/FdyAutocomplete';
 export { FdyCascade, type FdyCascadeProps, type CascadeNode } from './components/FdyCascade';
 export { FdyCfl, type FdyCflProps, type CflColumn, type CflPage } from './components/FdyCfl';
+/** Narrow `FdyCfl`'s `Row | Row[] | null` to the `Row | null` a single-select can produce; throws
+ *  on the array only a `multiple` field emits. */
+export { singleRow } from '../core/cfl-value';
 export { FdyChart, type FdyChartProps, type FdyChartSeries } from './components/FdyChart';
 export { FdyTable, type FdyTableProps } from './components/FdyTable';
 /** The table's own footer, standalone, for a responsive list whose table is hidden at some

package/adapters/react/index.js

@@ -6,6 +6,7 @@ export { FdyDateRange } from './components/FdyDateRange.tsx';
 export { FdyAutocomplete } from './components/FdyAutocomplete.tsx';
 export { FdyCascade } from './components/FdyCascade.tsx';
 export { FdyCfl } from './components/FdyCfl.tsx';
+export { singleRow } from '../core/cfl-value.js';
 export { FdyChart } from './components/FdyChart.tsx';
 export { FdyTable } from './components/FdyTable.tsx';
 export { FdyTableFooter } from './components/FdyTableFooter.tsx';

package/adapters/vue/components/FdyDrawer.vue

@@ -16,6 +16,9 @@ const props = withDefaults(defineProps<{
   title: string;
   side?: 'left' | 'right';
   dismissible?: boolean;
+  /** aria-label for the × button. Default 'Close'. Blazor has had `CloseLabel` since it
+   *  shipped; these two hard-coded the string, so a non-English app could not rename it. */
+  closeLabel?: string;
 }>(), { dismissible: true });
 
 const emit = defineEmits<{
@@ -58,7 +61,7 @@ function onClick(e: MouseEvent): void {
       <h3 :id="titleId" class="fdy-drawer__title">
         <slot name="title">{{ title }}</slot>
       </h3>
-      <button v-if="dismissible" class="fdy-drawer__close" type="button" aria-label="Close" @click="$emit('close')">&times;</button>
+      <button v-if="dismissible" class="fdy-drawer__close" type="button" :aria-label="closeLabel ?? 'Close'" @click="$emit('close')">&times;</button>
     </div>
 
     <div class="fdy-drawer__body">

package/adapters/vue/components/FdyModal.vue

@@ -18,6 +18,9 @@ const props = withDefaults(defineProps<{
   title: string;
   size?: 'sm' | 'md' | 'lg' | 'wide';
   dismissible?: boolean;
+  /** aria-label for the × button. Default 'Close'. Blazor has had `CloseLabel` since it
+   *  shipped; these two hard-coded the string, so a non-English app could not rename it. */
+  closeLabel?: string;
 }>(), { dismissible: true });
 
 const emit = defineEmits<{
@@ -65,7 +68,7 @@ function onClick(e: MouseEvent): void {
       <h3 :id="titleId" class="fdy-modal__title">
         <slot name="title">{{ title }}</slot>
       </h3>
-      <button v-if="dismissible" class="fdy-modal__close" type="button" aria-label="Close" @click="$emit('close')">&times;</button>
+      <button v-if="dismissible" class="fdy-modal__close" type="button" :aria-label="closeLabel ?? 'Close'" @click="$emit('close')">&times;</button>
     </div>
 
     <div class="fdy-modal__body">

package/adapters/vue/index.d.ts

@@ -33,6 +33,9 @@ export { default as FdyAutocomplete } from './components/FdyAutocomplete.vue';
 export { default as FdyCascade } from './components/FdyCascade.vue';
 export type { CascadeNode } from './components/FdyCascade.vue';
 export { default as FdyCfl } from './components/FdyCfl.vue';
+/** Narrow `FdyCfl`'s `Row | Row[] | null` to the `Row | null` a single-select can produce; throws
+ *  on the array only a `multiple` field emits. */
+export { singleRow } from '../core/cfl-value';
 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

package/adapters/vue/index.js

@@ -6,6 +6,7 @@ export { default as FdyDateRange } from './components/FdyDateRange.vue';
 export { default as FdyAutocomplete } from './components/FdyAutocomplete.vue';
 export { default as FdyCascade } from './components/FdyCascade.vue';
 export { default as FdyCfl } from './components/FdyCfl.vue';
+export { singleRow } from '../core/cfl-value.js';
 export { default as FdyChart } from './components/FdyChart.vue';
 export { default as FdyTable } from './components/FdyTable.vue';
 export { default as FdyTableFooter } from './components/FdyTableFooter.vue';

package/dist/freeday-autocomplete.js

@@ -40,6 +40,9 @@
     var _pop = null;
     function popCtl() { if (_pop === null && window.FreedayPopover) _pop = window.FreedayPopover.attach(listbox, input); return _pop; }
     function open() {
+      /* The input carries these natively; a disabled one fires nothing, but a READONLY one still
+         takes focus and clicks, and the list used to open over a field nobody can edit. */
+      if (input.readOnly || input.disabled) return;
       if (!listbox.hidden) return;
       var p = popCtl(); if (p) p.show(); else listbox.hidden = false;
       input.setAttribute('aria-expanded', 'true');
@@ -134,5 +137,18 @@
     initAll();
   }
 
-  window.FreedayAutocomplete = { init: initAutocomplete, initAll: initAll };
+  /* Same contract as the combo's: the states live on the input natively, and a host that stops
+     re-rendering after hydration needs a way to change them afterwards. */
+  function setState(root, state) {
+    var input = root ? root.querySelector('input') : null;
+    if (!input || !state) return;
+    if (state.disabled != null) input.disabled = !!state.disabled;
+    if (state.readonly != null) input.readOnly = !!state.readonly;
+    if (state.invalid != null) {
+      if (state.invalid) input.setAttribute('aria-invalid', 'true');
+      else input.removeAttribute('aria-invalid');
+    }
+  }
+
+  window.FreedayAutocomplete = { init: initAutocomplete, initAll: initAll, setState: setState };
 })();

package/dist/freeday-carousel.js

@@ -18,10 +18,11 @@
   '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
-   * 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. */
+  /* User-facing strings. English by default since 2.0.0, documented and deliberate for the raw
+   * enhancer path, and every one overridable per element with `data-fdy-text-<key>`, so a host
+   * that speaks another language (an Indonesian 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} of {total}',
     slide: 'Slide {n}'

package/dist/freeday-cascade.js

@@ -54,11 +54,14 @@
   }
 
 
-  /* 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. */
+  /* User-facing strings. English by default since 2.0.0, documented and deliberate for the raw
+   * enhancer path, and every one overridable per element with `data-fdy-text-<key>`, so a host
+   * that speaks another language (an Indonesian 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 = {
+    label: 'Select',
+    placeholder: 'Select…',
     back: 'Back one level',
     submenu: '{label}, submenu'
   };
@@ -88,8 +91,8 @@
     var root = sourceUl ? parse(sourceUl) : [];
     if (sourceUl) sourceUl.remove();
 
-    var label = wrap.getAttribute('data-label') || 'Select';
-    var placeholder = wrap.getAttribute('data-placeholder') || 'Select…';
+    var label = wrap.getAttribute('data-label') || textOf(wrap, 'label');
+    var placeholder = wrap.getAttribute('data-placeholder') || textOf(wrap, 'placeholder');
     var sep = wrap.getAttribute('data-separator') || ' / ';
 
     var trigger = document.createElement('button');
@@ -204,7 +207,44 @@
 
     var _pop = null;
     function popCtl() { if (_pop === null && window.FreedayPopover) _pop = window.FreedayPopover.attach(panel, trigger); return _pop; }
+
+    /* The three field states the CSS has always styled (`:disabled`, `[aria-readonly="true"]`,
+       `[aria-invalid="true"]`) and this enhancer never set, so only the stacks that re-implement
+       the control natively had them. Read from the seed at init and settable afterwards, because
+       a host that renders once — every Blazor wrapper does, `ShouldRender => false` — cannot
+       express a later change any other way. */
+    function flagOf(name) {
+      var v = wrap.getAttribute('data-' + name);
+      return v != null && v !== 'false';
+    }
+    /* Named `state*` to match the datepicker, where `is*` collided with an older function. */
+    var stateDisabled = flagOf('disabled');
+    var stateReadonly = flagOf('readonly');
+    var stateInvalid = flagOf('invalid');
+    /* `data-id` and `data-describedby`: the trigger this enhancer BUILDS is the element a form
+       has to point its label and its error text at, and the raw path had no way to say so. */
+    if (wrap.getAttribute('data-id')) trigger.id = wrap.getAttribute('data-id');
+    if (wrap.getAttribute('data-describedby')) trigger.setAttribute('aria-describedby', wrap.getAttribute('data-describedby'));
+
+    function applyState() {
+      trigger.disabled = stateDisabled;
+      if (stateReadonly) trigger.setAttribute('aria-readonly', 'true');
+      else trigger.removeAttribute('aria-readonly');
+      if (stateInvalid) trigger.setAttribute('aria-invalid', 'true');
+      else trigger.removeAttribute('aria-invalid');
+      wrap.classList.toggle('fdy-cascade--error', stateInvalid);
+      if ((stateDisabled || stateReadonly) && !panel.hidden) close(false);
+    }
+    function setState(next) {
+      if (!next) return;
+      if (next.disabled != null) stateDisabled = !!next.disabled;
+      if (next.readonly != null) stateReadonly = !!next.readonly;
+      if (next.invalid != null) stateInvalid = !!next.invalid;
+      applyState();
+    }
+
     function open() {
+      if (stateDisabled || stateReadonly) return;
       if (!panel.hidden) return;
       // Re-open at the selected leaf's level for quick re-selection.
       var trail = selectedValue ? pathTo(root, selectedValue, []) : null;
@@ -259,8 +299,11 @@
       valueSpan.classList.add('fdy-cascade__value--placeholder');
     }
 
+    applyState();
+
     var api = {
       wrap: wrap,
+      setState: setState,
       getValue: function () { return selectedValue; },
       clear: function () { selectedValue = ''; valueSpan.textContent = placeholder; valueSpan.classList.add('fdy-cascade__value--placeholder'); }
     };
@@ -281,5 +324,13 @@
     initAll();
   }
 
-  window.FreedayCascade = { init: initCascade, initAll: initAll };
+  window.FreedayCascade = {
+    init: initCascade,
+    initAll: initAll,
+    /* Same reason as the datepicker's: a seed rendered once still has to be lockable later. */
+    setState: function (root, state) {
+      var api = root && root._fdyCascade ? root._fdyCascade : null;
+      if (api && api.setState) api.setState(state);
+    }
+  };
 })();

package/dist/freeday-cfl.js

@@ -34,10 +34,11 @@
   }
 
 
-  /* 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. */
+  /* User-facing strings. English by default since 2.0.0, documented and deliberate for the raw
+   * enhancer path, and every one overridable per element with `data-fdy-text-<key>`, so a host
+   * that speaks another language (an Indonesian 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} selected'
   };

package/dist/freeday-chart.js

@@ -29,6 +29,28 @@
 
   var NS = 'http://www.w3.org/2000/svg';
 
+  /* User-facing strings. Two of them, and both shipped wrong until 2.2.0: the legend's fallback
+   * label read `Seri 1` — Indonesian, three months after 2.0.0 turned every enhancer English —
+   * and the donut's centre caption was hard-coded, so no host could rename it. Neither was
+   * reachable by the guards: one goes into the DOM through `createTextNode`, the other through
+   * `innerHTML`, and both guards look for `textContent` / `setAttribute`. Overridable per element
+   * with `data-fdy-text-<key>`, like every other enhancer. */
+  var TEXT = {
+    series: 'Series {n}',
+    total: 'Total'
+  };
+  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 = 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;
+  }
+
   // Categorical chart palette: 8 validated fixed-order slots (--chart-1..8). Series index i
   // (0-based) -> slot i+1; series beyond the 8-slot cap reuse --chart-8 (never cycled).
   function chartSlotVar(i) { return 'var(--chart-' + (i < 8 ? i + 1 : 8) + ')'; }
@@ -237,7 +259,7 @@
         var li = document.createElement('li');
         var sw = document.createElement('span'); sw.className = 'fdy-chart__swatch'; sw.style.background = colorFor(si);
         li.appendChild(sw);
-        li.appendChild(document.createTextNode(s.label || ('Seri ' + (si + 1))));
+        li.appendChild(document.createTextNode(s.label || textOf(el, 'series', { n: si + 1 })));
         legend.appendChild(li);
       });
       el.appendChild(legend);
@@ -411,8 +433,16 @@
     ring.style.background = 'conic-gradient(' + stops.join(',') + ')';
     var center = document.createElement('div'); center.className = 'fdy-donut__center';
     var centerLabel = el.getAttribute('data-fdy-center');
-    center.innerHTML = centerLabel ? '<b></b>' : '<b></b><span>Total</span>';
-    center.querySelector('b').textContent = centerLabel != null ? centerLabel : String(total);
+    var centerValue = document.createElement('b');
+    centerValue.textContent = centerLabel != null ? centerLabel : String(total);
+    center.appendChild(centerValue);
+    /* Built rather than assigned as innerHTML: the caption is overridable now, and an author's
+       string is not markup. */
+    if (!centerLabel) {
+      var centerCaption = document.createElement('span');
+      centerCaption.textContent = textOf(el, 'total');
+      center.appendChild(centerCaption);
+    }
     ring.appendChild(center);
     var svg = svgEl('svg');
     svg.setAttribute('class', 'fdy-donut__hit');