npm - @cahyo-dimas/freeday - Versions diffs - 2.1.0 → 2.2.0 - Mend

@cahyo-dimas/freeday 2.1.0 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/CHANGELOG.md +67 -0
package/COMPONENTS.md +34 -13
package/README.id.md +1 -1
package/README.md +1 -1
package/adapters/blazor/FdyAutocomplete.razor +4 -1
package/adapters/blazor/FdyAutocomplete.razor.cs +26 -0
package/adapters/blazor/FdyCascade.razor +6 -1
package/adapters/blazor/FdyCascade.razor.cs +24 -0
package/adapters/blazor/FdyCombo.razor +1 -0
package/adapters/blazor/FdyCombo.razor.cs +13 -0
package/adapters/blazor/FdyDatepicker.razor +15 -1
package/adapters/blazor/FdyDatepicker.razor.cs +46 -0
package/adapters/react/components/FdyDrawer.tsx +3 -1
package/adapters/react/components/FdyModal.tsx +3 -1
package/adapters/vue/components/FdyDrawer.vue +4 -1
package/adapters/vue/components/FdyModal.vue +4 -1
package/dist/freeday-autocomplete.js +17 -1
package/dist/freeday-cascade.js +53 -3
package/dist/freeday-chart.js +33 -3
package/dist/freeday-datepicker.js +109 -17
package/dist/freeday-select.js +18 -1
package/dist/freeday-table.js +4 -2
package/dist/freeday-timepicker.js +19 -1
package/dist/freeday.js +253 -28
package/docs/getting-started.md +1 -1
package/package.json +2 -2

package/CHANGELOG.md CHANGED Viewed

@@ -9,6 +9,73 @@ benar. Perubahan seperti itu ditulis di bawah `### Changed: BREAKING (types)`
 lama → tipe baru, dan cara menyempitkannya — bukan di bawah `### Added`, betapapun aditifnya dari
 sisi kit.
+## [2.2.0] - 2026-08-26
+### Added
+- **The raw path can disable, lock and invalidate a picker** (`NEXT-UP.md` #12). `datepicker.css`
+  and `cascade.css` have styled `:disabled`, `[aria-readonly="true"]` and `[aria-invalid="true"]`
+  since they were written, and the enhancers never set any of them — so the states existed only in
+  the stacks that re-implement the control natively (Vue, React), and a **Blazor** app, whose
+  picker *is* the enhancer, could not disable a field at all. Now `data-disabled` /
+  `data-readonly` / `data-invalid` on the seed, plus `data-id` and `data-describedby` so the
+  trigger the enhancer builds can be labelled and described by a form's own markup.
+- **`setState` on four enhancers** — `FreedayDatepicker`, `FreedayCascade`, `FreedayCombo`,
+  `FreedayAutocomplete`: `setState(root, { disabled, readonly, invalid })`. Not decoration: every
+  Blazor wrapper stops rendering once hydrated (`ShouldRender => !Hydrated`), so a parameter that
+  is only *rendered* goes quiet the moment a real form toggles it. The wrappers push through this
+  instead.
+- **The Blazor pickers reach parity** with their Vue and React twins. `FdyDatepicker` goes from 6
+  parameters to 20 (the three states, `Id`, `Describedby`, and the nine calendar navigation
+  labels), `FdyAutocomplete` from 6 to 12, `FdyCascade` from 8 to 13, and `FdyCombo` finally has
+  `Describedby`. Four exemptions remain, each about the platform rather than effort, and each
+  named in `COMPONENTS.md`: `locale` (the enhancer formats through `Intl` from `<html lang>`),
+  `clearable`/`clearLabel` (this path builds no clear button), `ariaLabelledby` (the built trigger
+  is named by `Label`).
+- **`closeLabel` on `FdyModal` and `FdyDrawer`** in Vue and React. Blazor has had `CloseLabel`
+  since it shipped; the other two hard-coded `aria-label="Close"`, so the gap ran in both
+  directions and this is the half nobody had reported yet.
+- **The datepicker's ten labels are overridable**, as `data-fdy-text-prev-month`,
+  `-next-month`, `-prev-year`, `-next-year`, `-prev-years`, `-next-years`, `-choose-month`,
+  `-choose-year`, `-back-to-months`. Month and weekday NAMES still come from `Intl` via the page's
+  `lang`, which is the better hatch; these are the buttons around them.
+### Fixed
+- **A chart series with no label read `Seri 1`.** Indonesian, in a release train whose 2.0.0
+  exists precisely to stop the enhancers mixing languages. It is `Series {n}` now, and
+  overridable. The donut's centre caption (`Total`) was hard-coded in the same file and is
+  overridable too; it is also built as an element rather than assigned through `innerHTML`, since
+  an author-supplied string is not markup.
+- **The table's number-range filter offered `Min` and `Maks`.** Same leftover, same fix:
+  `filterMin` / `filterMax` in the strings table, English by default.
+- **The cascade's own `Select` / `Select…` defaults and the timepicker's `Choose a time`** were
+  literals no host could reach. Both tables now carry them.
+- **A `readonly` autocomplete opened its suggestion list.** The input carries `readonly` natively
+  and the enhancer never read it, so the list dropped over a field nobody could edit.
+### Changed
+- **The hard-coded-string guard (#016) is inverted.** It used to find the line that writes to the
+  DOM and read the literals on it, which cannot see a string passed to a helper —
+  `navButton('‹', 'Previous month', fn)` writes its label inside `navButton`, where the value is a
+  variable. Ten datepicker labels, the timepicker's, the cascade's two, the table's two and the
+  chart's `Seri 1` all hid there, some of them for the whole life of the file. It now reads every
+  literal in every enhancer and asks the opposite question — is this prose, and is it in the
+  `TEXT` table — dropping non-prose by shape (selectors, CSS custom properties, kebab keys,
+  camelCase identifiers, URLs, locale tags) and one short vocabulary of DOM tokens. Verified by
+  reintroducing both blind spots and watching it fail.
+### Added: guards
+- `test/blazor/FdyPickerStateTests.cs`: 7 bUnit tests covering what `dotnet build` cannot see —
+  each parameter reaching the markup the enhancer reads, an absent one leaving no empty attribute
+  behind, and a state change **after** the first render arriving through interop.
+- `browser/picker-states.mjs`: 7 tests in real Chrome with real mouse gestures — a disabled picker
+  that will not open, a readonly one that keeps focus and still refuses, both `aria-invalid` and
+  the `--error` class, `setState` unlocking a picker, and a nav label overridden per element.
+- `test/docs.test.mjs`: the Blazor picker parity guard, Vue's prop surface against the four
+  wrappers, with the four exemptions written out with their reasons rather than a bare list.
+### Notes on the shape of the fix
+- The regression this work caused, and what caught it: naming the new flag `isDisabled` shadowed
+  an **existing** `isDisabled(date)` in the datepicker that decides whether a day falls outside
+  `min`/`max`, so the day grid threw on every render — while the panel still opened and only its
+  cells went missing. Nothing in the node suite noticed; `browser/vanilla.mjs`, which clicks
+  through the calendar in a real browser, failed immediately. The flags are named `state*` now,
+  with the collision written above them.
 ## [2.1.0] - 2026-08-25
 ### Added
 - **`singleRow()`, exported from `@cahyo-dimas/freeday/vue` and `/react`** (#045). `FdyCfl` emits

package/COMPONENTS.md CHANGED Viewed

@@ -456,8 +456,9 @@ Native inputs, styled. `.fdy-check` · `.fdy-radio` · `.fdy-switch` on the wrap
 | `invalid?` | `boolean` | Sets `aria-invalid`; pair it with `describedby` pointing at the error text. |
 | `describedby?` | `string` | Id of the help or error text (`aria-describedby`). |
-Blazor: the same names in `PascalCase`, bound with `@bind-Value` (`Value` / `ValueChanged`),
-with one absence — there is no `Describedby`, so a Blazor combo cannot point at its own error text.
+Blazor: the same names in `PascalCase`, bound with `@bind-Value` (`Value` / `ValueChanged`).
+`FreedayCombo.setState(root, { disabled, readonly, invalid })` pushes a state change onto a combo
+whose host has stopped re-rendering.
 Fully styleable dropdown, APG combobox+listbox. Needs `freeday-select.js`.
@@ -501,9 +502,10 @@ keeps matching after selection. Do not put a glyph in that span.
 | `id?` · `ariaLabel?` · `ariaLabelledby?` · `describedby?` | `string` | Input id; its accessible name as text or as a reference; the help/error text it points at. |
 | `disabled?` · `readonly?` · `invalid?` | `boolean` | `readonly` keeps focus and tab order and shows its value, but the input is not editable and the list will not open. Unlike `disabled` it is not greyed. |
-Blazor takes six of these — `Value` / `ValueChanged`, `Options`, `Placeholder`, `AriaLabel`,
-`EmptyText` — and no state flags or ids. Its wrapper renders a fixed seed element and does not
-splat unmatched attributes, so those are not reachable from a Blazor page at all.
+Blazor carries all of these. The states live on the input natively, and
+`FreedayAutocomplete.setState(root, { disabled, readonly, invalid })` changes them after the first
+render. A `readonly` input no longer opens its suggestion list, which it used to do over a field
+nobody could edit.
 Editable combobox that filters as you type. Needs `freeday-autocomplete.js`.
@@ -528,7 +530,10 @@ Editable combobox that filters as you type. Needs `freeday-autocomplete.js`.
 | `id?` · `ariaLabelledby?` · `describedby?` | `string` | Trigger id; the element that labels it; the help/error text it points at. |
 | `disabled?` · `readonly?` · `invalid?` | `boolean` | As on `<FdyCombo>`. |
-Blazor calls the tree `Nodes`, adds `SubmenuLabel`, and takes neither the state flags nor the ids.
+Raw path: `data-disabled` / `data-readonly` / `data-invalid`, `data-id`, `data-describedby`, and
+`FreedayCascade.setState(root, { disabled, readonly, invalid })` for a host that rendered once.
+Blazor calls the tree `Nodes`, adds `SubmenuLabel`, and carries everything else except
+`ariaLabelledby` — the trigger it builds is named by `Label`.
 Hierarchical drill-down. The data model is a **nested `<ul>`** inside the wrapper: an `<li>` with a
 child `<ul>` is a branch, one without is a leaf. Needs `freeday-cascade.js`.
@@ -675,9 +680,15 @@ a new class.
 The ten label props exist because month and weekday names follow `locale` while the buttons around
 them do not: without these, a Spanish calendar would be navigated by English arrows.
-Blazor's picker is much thinner — `Value` / `ValueChanged`, `Label`, `Placeholder`, `Min`, `Max`
-— and its seed element takes no unmatched attributes, so state flags, ids, `clearable` and every
-label above are unreachable there.
+On the **raw path** these all have hooks now: `data-disabled` / `data-readonly` / `data-invalid`,
+`data-id`, `data-describedby`, and one `data-fdy-text-<key>` per label above
+(`data-fdy-text-prev-month`, …). A host that renders its markup once and cannot re-render it can
+change the three states afterwards with `FreedayDatepicker.setState(root, { disabled, readonly,
+invalid })`.
+Blazor carries the same surface bar four: `locale` (the enhancer formats through `Intl` from the
+page's `<html lang>`), `clearable` and `clearLabel` (this path builds no clear button), and
+`ariaLabelledby` (the trigger it builds is named by `Label`).
 ### Props — `<FdyDateRange>`
@@ -1038,7 +1049,11 @@ pagination. Needs `freeday-table.js`. Wrap the whole thing in `.fdy-datatable` +
   (`data-fdy-text-required`, `data-fdy-text-type`, …), narrower than the per-field
   `data-fdy-msg-<alias>` that still wins. `Freeday.toast()` takes `closeLabel` in its options
   object. `npm test` asserts no enhancer string is written outside its `TEXT` table, so a new one
-  arrives overridable or not at all.
+  arrives overridable or not at all — a claim that was only half true until **2.2.0**, when the
+  guard stopped looking for the line that writes to the DOM and started reading every literal in
+  the file. The old shape could not see a string handed to a helper, which is how ten datepicker
+  labels, the timepicker's, the cascade's two defaults, the table's `Min`/`Maks` filter
+  placeholders and the chart's `Seri 1` all sat outside it.
 **Testing note:** a column's filter button and the dialog it opens deliberately share one
 accessible name (`Filter <column>`), since a dialog named after its trigger is the normal pattern. In a
@@ -1132,6 +1147,10 @@ Pure SVG/CSS, no dependency, re-colours with the theme. Needs `freeday-chart.js`
 - Colour: `data-fdy-color="primary"` or `data-fdy-colors="success,warning,danger"` for semantic token
   names **or** `chart-1`…`chart-8` slots to pin a category's colour. Multi-series defaults to the
   validated categorical palette `--chart-1`…`--chart-8`.
+- **Its two strings are overridable**, and until 2.2.0 neither was: a series with no `label` fell
+  back to `Seri 1` — Indonesian, three months after 2.0.0 turned the enhancers English — and the
+  donut's centre caption was hard-coded. Both take the usual hook now:
+  `data-fdy-text-series="Series {n}"` and `data-fdy-text-total="Total"`.
 - Format: `data-fdy-format="number|percent|currency"`; legend `data-fdy-legend` (`none` to drop);
   axes `data-fdy-axes`
 - Sizing is already set by the kit. Override **these**, never a `height` on the chart root (a
@@ -1328,12 +1347,13 @@ so the same look serves routed sub-navigation built from plain links. See the no
 | `onClose` | `() => void` | React. Vue emits `close`. Fires from Escape, a backdrop click and the ×, all three of which exist only under `dismissible`. |
 | `size?` | `'sm' \| 'md' \| 'lg' \| 'wide'` | Dialog width. |
 | `dismissible?` | `boolean` | Whether Escape, the backdrop and the × can close it. Off means the reader has to take a footer action, which is the point of a blocking confirm. |
+| `closeLabel?` | `string` | Accessible name for the × button. Default `Close`. |
 | `footer?` | `ReactNode` | React. Vue: the `footer` slot. |
 | `children?` | `ReactNode` | React. The body. Vue: the default slot. |
-Blazor binds `@bind-Open` and takes `TitleContent` / `ChildContent` / `FooterContent`, plus two
-things Vue and React do not have: `OnClose` and **`CloseLabel`**. The × in Vue and React is labelled
-`Close` and cannot be renamed.
+Blazor binds `@bind-Open` and takes `TitleContent` / `ChildContent` / `FooterContent`, plus
+`OnClose`. `CloseLabel` used to be Blazor-only, which left the × in Vue and React fixed at `Close`;
+all three stacks carry it now.
 Native `<dialog>`: focus trap, Esc and backdrop come from the browser. Sizes `--sm` `--md` `--lg`
 `--wide`; `--cfl` for the choose-from-list dialog.
@@ -1381,6 +1401,7 @@ The modal's props with `side` in place of `size`; the behaviour notes there appl
 | `onClose` | `() => void` | React. Vue emits `close`. |
 | `side?` | `'left' \| 'right'` | Which edge it slides from. |
 | `dismissible?` | `boolean` | Escape, backdrop and × on or off. |
+| `closeLabel?` | `string` | Accessible name for the × button. Default `Close`. |
 | `footer?` | `ReactNode` | React. Vue: the `footer` slot. |
 | `children?` | `ReactNode` | React. The body. Vue: the default slot. |

package/README.id.md CHANGED Viewed

@@ -5,7 +5,7 @@
 > **Lebih banyak _free day_ buat dev. UI kit-nya sudah siap pakai.**
 [![Live docs](https://img.shields.io/badge/docs-live-2050d8?style=flat-square)](https://cahyo-dimas.github.io/freeday-ui-kit/)
-[![Release](https://img.shields.io/badge/release-v2.1.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v2.1.0)
+[![Release](https://img.shields.io/badge/release-v2.2.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v2.2.0)
 UI KIT yang token-driven & framework-agnostic. Satu sumber kebenaran untuk warna, tipografi,
 spasi, dan komponen. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.

package/README.md CHANGED Viewed

@@ -5,7 +5,7 @@
 > **More free days for devs. The UI kit is ready to use.**
 [![Live docs](https://img.shields.io/badge/docs-live-2050d8?style=flat-square)](https://cahyo-dimas.github.io/freeday-ui-kit/)
-[![Release](https://img.shields.io/badge/release-v2.1.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v2.1.0)
+[![Release](https://img.shields.io/badge/release-v2.2.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v2.2.0)
 A token-driven, framework-agnostic UI kit. One source of truth for color, typography,
 spacing, and components. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.

package/adapters/blazor/FdyAutocomplete.razor CHANGED Viewed

@@ -8,7 +8,10 @@
 <div @ref="Root" data-fdy-autocomplete class="fdy-autocomplete">
     <input class="fdy-input" role="combobox" aria-expanded="false" aria-autocomplete="list"
            aria-controls="@_listId" autocomplete="off" value="@Value"
-           placeholder="@Placeholder" aria-label="@AriaLabel" />
+           placeholder="@Placeholder" aria-label="@AriaLabel"
+           id="@Id" aria-labelledby="@AriaLabelledby" aria-describedby="@Describedby"
+           disabled="@Disabled" readonly="@Readonly"
+           aria-invalid="@(Invalid ? "true" : null)" />
     <ul class="fdy-autocomplete__listbox" id="@_listId" role="listbox" hidden>
         @foreach (string item in Options)
         {

package/adapters/blazor/FdyAutocomplete.razor.cs CHANGED Viewed

@@ -25,8 +25,34 @@ public partial class FdyAutocomplete
     protected override async ValueTask OnHydratedAsync()
         => await SubscribeAsync("fdy-autocomplete-select", nameof(OnSelect));
+    /// <summary>Explicit id for the input.</summary>
+    [Parameter] public string? Id { get; set; }
+    /// <summary>Id of the element that labels the input, when a visible label does the naming.</summary>
+    [Parameter] public string? AriaLabelledby { get; set; }
+    /// <summary>Id of the help or error text the input 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, not editable, and the
+    /// suggestion list will not open.</summary>
+    [Parameter] public bool Readonly { get; set; }
+    /// <summary>Marks the field invalid (<c>aria-invalid</c>).</summary>
+    [Parameter] public bool Invalid { get; set; }
     protected override bool ShouldRender() => !Hydrated;
+    protected override async Task OnParametersSetAsync()
+    {
+        if (!Hydrated) return;
+        await JS.InvokeVoidAsync("FreedayAutocomplete.setState", Root,
+            new { disabled = Disabled, @readonly = Readonly, invalid = Invalid });
+    }
     /// <summary>Invoked by the bridge when the user picks a suggestion.</summary>
     [JSInvokable]
     public async Task OnSelect(SelectDetail detail)

package/adapters/blazor/FdyCascade.razor CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/react/components/FdyDrawer.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/vue/components/FdyDrawer.vue CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/dist/freeday-autocomplete.js CHANGED Viewed

@@ -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-cascade.js CHANGED Viewed

@@ -60,6 +60,8 @@
    * 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'
   };
@@ -89,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');
@@ -205,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;
@@ -260,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'); }
     };
@@ -282,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);
+    }
+  };
 })();