@cahyo-dimas/freeday 1.48.1 → 1.50.0

package/CHANGELOG.md

@@ -3,6 +3,58 @@
 Semua perubahan penting dicatat di sini. Format longgar mengikuti
 [Keep a Changelog](https://keepachangelog.com/); tiap versi = git tag.
 
+## [1.50.0] — 2026-08-20
+### Fixed
+- **A toast raised from inside a modal was painted behind it** (#027). `.fdy-toast-region` carried
+  `z-index: 200`, which can never win: `.fdy-modal` is a native `<dialog>` opened with `showModal()`
+  and therefore lives in the **top layer**, above the whole z-index universe. An error raised by an
+  action taken inside a dialog was dimmed by that dialog's backdrop and mostly hidden under the
+  dialog — so the reader saw a confirmation still asking a question they had already answered, and
+  no reason why. The region is now `popover="manual"` and `freeday-toast.js` calls `showPopover()`
+  as each toast lands (per toast, not once — the top layer is ordered by when you joined, so a
+  dialog opened after the last toast would otherwise sit above it). Guarded: where `showPopover` is
+  unavailable or throws, the region stays exactly what it was.
+- **A checkbox shrank when its label was long** (#027). `.fdy-check` is an inline-flex row and its
+  box declared a width — but a flex item with a width is still shrinkable, so a label that wrapped
+  to three lines squeezed the box from 18px to 13px while leaving it 18px tall. A group of five
+  rendered three different sizes, none of them square. `flex: none` on `.fdy-check input`,
+  `.fdy-radio input`, the `.fdy-switch` track and the standalone `.fdy-checkbox` — all four are
+  flex children somewhere in the kit.
+### Added — guards
+- **`pixelAt(x, y)` in `browser/harness.mjs`** — a 1×1 `Page.captureScreenshot`, decoded in-process.
+  Stacking above a modal cannot be asserted with `elementFromPoint`: a modal dialog makes the rest
+  of the document inert, so a hit test outside it returns the dialog whatever the paint order is,
+  reporting a working fix as broken. The new guard measures the colour actually composited at the
+  toast's centre. It waits for both fade-ins to finish first — a screenshot taken mid-animation
+  returns a blend of the two elements and flakes in both directions.
+- **Selection controls are asserted square and equal** across a group whose labels run one to three
+  lines, so a box that shrank in both axes cannot pass a width-only comparison. All four controls
+  the fix touched are measured, each in the container it actually ships in: the standalone
+  `.fdy-checkbox` inside `.fdy-filter__check` — the flex row all three typed adapters render in a
+  filter popover and a CFL option list — and the switch track against a switch of its own, since it
+  is the one control that is not square. The first version of this guard held the standalone
+  checkbox in a plain block, where it cannot shrink at all, so removing `flex: none` from the one
+  box every adapter puts on screen left it passing.
+
+## [1.49.0] — 2026-08-20
+### Added
+- **`FdyTableColumn.labelHidden`** (#026). A column of row CONTROLS — an edit button, a row menu —
+  could be named or quiet, not both: `label` renders as bare text in the `<th>`, so a designer who
+  does not want a word above a column of icons was left with an empty header, which assistive tech
+  announces as nothing. With `labelHidden: true` the label renders inside `.fdy-visually-hidden`:
+  the cell looks empty and the column is still named. The label keeps naming the column's filter
+  popover and sort button, so it stays meaningful either way.
+  Contract and ALL THREE typed adapters — Vue, React and Blazor. Each renders its own header, so
+  each spends the flag itself; Blazor takes `LabelHidden` on `FdyTableColumn<TRow>`.
+### Added — guards
+- **The column contract now has to reach all three adapters** (#026). Vue and React consume
+  `table-model.d.ts` and TypeScript keeps them honest, but Blazor RE-DECLARES the column in C# — a
+  hand copy, and the surface that can fall behind silently. A test asserts every contract property
+  exists on Blazor's `FdyTableColumn<TRow>`; coverage, not equality, so it needs no exemption list.
+- **A hidden label is clipped, not dropped** — asserted in a real browser for both JS adapters
+  (`browser/adapter.mjs`), because the claim is about computed geometry: a span carrying the class
+  with no CSS behind it passes any string match and still prints the word.
+
 ## [1.48.1] — 2026-08-20
 ### Fixed
 - **A date column sorted correctly and filtered nothing** (#025). `FdyTable`'s client-mode date

package/COMPONENTS.md

@@ -935,6 +935,13 @@ Every field is optional; it returns the toast element. Classes (rendered for you
 `.fdy-toast-region`, `.fdy-toast` (+`--info` `--success` `--warning` `--danger`) · `__accent`
 `__body` `__title` `__text` `__close`.
 
+**Above modals, and not by z-index.** The region is a `popover` and re-enters the **top layer** as
+each toast lands, because `.fdy-modal` is a native `<dialog>` — see the note under Modal below. If
+a toast of yours is hidden behind something, a bigger `z-index` is not the fix; check whether that
+something is in the top layer too. Where the Popover API is unavailable (before Chrome 114 /
+Safari 17 / Firefox 125) the region falls back to a fixed block at `z-index: 200`, which cannot
+clear an open modal — the message is still announced to a screen reader.
+
 ## Tooltip — `.fdy-tooltip`
 Hover/focus only, never the sole carrier of information. Wrap in `.fdy-tooltip-wrap`; the trigger
 gets `aria-describedby` → the `.fdy-tooltip[role="tooltip"]` `id`.
@@ -1019,7 +1026,13 @@ so the same look serves routed sub-navigation built from plain links — see the
 > **Typed wrapper: `<FdyModal>`** — Vue (`:open` + `@close`) · React (`open` + `onClose`) · Blazor (`@bind-Open`). In those stacks use the wrapper; the markup below is for stacks without an adapter (and is what the wrapper renders).
 
 Native `<dialog>`: focus trap, Esc and backdrop come from the browser. Sizes `--sm` `--md` `--lg`
-`--wide`; `--cfl` for the choose-from-list dialog. Parts `__header` `__title` `__body` `__footer`
+`--wide`; `--cfl` for the choose-from-list dialog.
+
+**It is in the TOP LAYER.** `showModal()` paints the dialog above every stacking context on the
+page, so no `z-index` anywhere can put anything over it — only another top-layer element (a
+`popover`, or another modal) can. It also makes the rest of the document inert, which means
+`elementFromPoint` outside the dialog returns the dialog: do not use a hit test to check what is
+painted on top of a modal, because it will tell you the dialog is, even when it visibly is not. Parts `__header` `__title` `__body` `__footer`
 `__close`. The body scrolls; the footer never clips. `aria-labelledby` → the title's `id`;
 `data-close` on any button that should close it.
 

package/adapters/blazor/FdyTable.razor

@@ -26,11 +26,11 @@
                         <th scope="col" style="@AlignStyle(col)" aria-sort="@AriaSortOf(col)">
                             @if (col.Sortable)
                             {
-                                <button type="button" class="fdy-table__sortbtn" @onclick="() => OnSortClick(col)">@col.Label</button>
+                                <button type="button" class="fdy-table__sortbtn" @onclick="() => OnSortClick(col)"><span class="@(col.LabelHidden ? "fdy-visually-hidden" : null)">@col.Label</span></button>
                             }
                             else
                             {
-                                @col.Label
+                                <span class="@(col.LabelHidden ? "fdy-visually-hidden" : null)">@col.Label</span>
                             }
                             @if (col.Filter is { } ft)
                             {

package/adapters/blazor/TableTypes.cs

@@ -47,6 +47,13 @@ public sealed class FdyTableColumn<TRow>
     /// <summary>Header label.</summary>
     public required string Label { get; init; }
 
+    /// <summary>Render the label for assistive tech only — the header cell looks empty.
+    /// For a column of row CONTROLS (an edit button, a row menu), where a visible heading is noise
+    /// above a column of icons but the column still has to be named: a <c>th</c> with no text is
+    /// announced as nothing, and a reader tabbing the header row cannot tell what it is. The label
+    /// still names the column's filter popover and its sort button, so it must stay meaningful.</summary>
+    public bool LabelHidden { get; init; }
+
     /// <summary>Show a sort toggle in the header.</summary>
     public bool Sortable { get; init; }
 

package/adapters/core/table-model.d.ts

@@ -24,6 +24,16 @@ export interface FdyTableColumn<T> {
   key: string;
   /** Header label. */
   label: string;
+  /**
+   * Render the label for assistive tech only — the header cell looks empty.
+   *
+   * For a column of row CONTROLS (an edit button, a row menu), where a visible
+   * heading is noise above a column of icons but the column still has to be
+   * named: a `<th>` with no text is announced as nothing, and a reader tabbing
+   * the header row cannot tell what it is. The label still names the column's
+   * filter popover and its sort button, so it must stay meaningful.
+   */
+  labelHidden?: boolean;
   /** Show a sort toggle in the header. */
   sortable?: boolean;
   /** Offer a column filter of this type. */

package/adapters/react/components/FdyTable.tsx

@@ -271,9 +271,11 @@ export function FdyTable<Row extends object>(props: FdyTableProps<Row>): JSX.Ele
               {props.columns.map((col: FdyTableColumn<Row>): JSX.Element => (
                 <th key={col.key} scope="col" style={alignStyle(col)} aria-sort={ariaSortOf(col)}>
                   {col.sortable ? (
-                    <button type="button" className="fdy-table__sortbtn" onClick={(): void => onSort(col)}>{col.label}</button>
+                    <button type="button" className="fdy-table__sortbtn" onClick={(): void => onSort(col)}>
+                      <span className={col.labelHidden ? 'fdy-visually-hidden' : undefined}>{col.label}</span>
+                    </button>
                   ) : (
-                    col.label
+                    <span className={col.labelHidden ? 'fdy-visually-hidden' : undefined}>{col.label}</span>
                   )}
                   {col.filter && (
                     <FdyTableFilter

package/adapters/vue/components/FdyTable.vue

@@ -280,8 +280,8 @@ function isExpanded(row: Row): boolean {
                 type="button"
                 class="fdy-table__sortbtn"
                 @click="onSort(col)"
-              >{{ col.label }}</button>
-              <template v-else>{{ col.label }}</template>
+              ><span :class="col.labelHidden ? 'fdy-visually-hidden' : undefined">{{ col.label }}</span></button>
+              <span v-else :class="col.labelHidden ? 'fdy-visually-hidden' : undefined">{{ col.label }}</span>
               <FdyTableFilter
                 v-if="col.filter"
                 :label="col.label"

package/dist/freeday-toast.js

@@ -28,11 +28,39 @@
       region.className = 'fdy-toast-region';
       region.setAttribute('aria-live', 'polite');
       region.setAttribute('aria-atomic', 'false');
+      /* `manual`, not `auto`: an auto popover light-dismisses on an outside click and closes
+         itself the moment another popover opens. A toast is dismissed by its timer or its own
+         close button, by nobody else. */
+      region.setAttribute('popover', 'manual');
       document.body.appendChild(region);
     }
     return region;
   }
 
+  /* Put the region in the TOP LAYER, above any open <dialog>.
+   *
+   * A modal dialog lives in the top layer, where z-index does not reach — so a toast raised by an
+   * action taken inside a modal was painted behind that modal's backdrop, which is where an error
+   * message is least useful. showPopover() joins the same layer, and membership there is ordered by
+   * when you joined: hide-then-show re-joins at the top, so a toast shown while a dialog is open
+   * lands above it rather than under the dialog that was opened after the last toast.
+   *
+   * Guarded twice on purpose. `showPopover` is absent before Chrome 114 / Safari 17 / Firefox 125,
+   * and the call throws if the element is disconnected or already open — in every one of those
+   * cases the region stays an ordinary fixed block at z-index 200, which is what it has always
+   * been. A notification must never be the thing that throws.
+   */
+  function raise(node) {
+    if (!node || typeof node.showPopover !== 'function') return;
+    try {
+      if (node.matches(':popover-open')) node.hidePopover();
+      node.showPopover();
+    } catch (e) {
+      /* Not reachable through the guards above, but a toast is on the error path itself: if
+         raising it fails the message still has to appear, one layer down. */
+    }
+  }
+
   function dismiss(toast) {
     if (typeof toast === 'string') toast = keyed[toast]; // dismiss by key
     if (!toast || toast.dataset.leaving === '1') return;
@@ -110,6 +138,9 @@
       keyed[opts.key] = node;
     }
     region.appendChild(node);
+    // Raised per toast, not once at startup: a dialog opened AFTER the region joined the top layer
+    // would otherwise sit above it, which is the exact case this fixes.
+    raise(region);
 
     var timeout = opts.timeout == null ? 4000 : opts.timeout;
     if (timeout > 0) setTimeout(function () { dismiss(node); }, timeout);

package/dist/freeday.bundle.css

@@ -1579,8 +1579,15 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-rating--sm .fdy-rating__star svg{width:1.1rem;height:1.1rem;}
 
 /* Freeday — Selection controls */
+/* `flex:none` on every box, track and standalone checkbox is load-bearing, not tidiness.
+   `.fdy-check` is an inline-flex row of [box, label], and a flex item with a WIDTH is still
+   shrinkable — so as soon as the label wrapped to a second line the box gave up horizontal space
+   to it and rendered an 18px-tall rectangle 13px wide. Squashed, off-square, and different from
+   every sibling whose label happened to be short: a form of five checkboxes showed three sizes.
+   Nothing in the declarations looked wrong, because the width was never overridden — it was
+   negotiated away. */
 .fdy-check,.fdy-radio,.fdy-switch{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text);cursor:pointer;}
-.fdy-check input,.fdy-radio input{appearance:none;-webkit-appearance:none;width:var(--control-box);height:var(--control-box);margin:0;border:1.5px solid var(--color-control-border);background:var(--color-surface);box-shadow:inset 0 1px 2px var(--color-shadow-inset);cursor:pointer;display:grid;place-content:center;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
+.fdy-check input,.fdy-radio input{appearance:none;-webkit-appearance:none;flex:none;width:var(--control-box);height:var(--control-box);margin:0;border:1.5px solid var(--color-control-border);background:var(--color-surface);box-shadow:inset 0 1px 2px var(--color-shadow-inset);cursor:pointer;display:grid;place-content:center;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
 .fdy-check input{border-radius:var(--radius-sm);}
 .fdy-radio input{border-radius:50%;}
 .fdy-check input::before{content:"";width:.62rem;height:.62rem;transform:scale(0);transition:transform var(--dur-fast) var(--ease-spring);box-shadow:inset 1rem 1rem var(--color-on-primary);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);}
@@ -1590,13 +1597,13 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-check input:focus-visible,.fdy-radio input:focus-visible,.fdy-switch input:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-check input:disabled,.fdy-radio input:disabled,.fdy-switch input:disabled{opacity:.5;cursor:not-allowed;}
 .fdy-check:has(input:disabled),.fdy-radio:has(input:disabled),.fdy-switch:has(input:disabled){cursor:not-allowed;}
-.fdy-switch input{appearance:none;-webkit-appearance:none;position:relative;width:var(--control-switch-w);height:var(--control-switch-h);margin:0;border-radius:var(--radius-full);background:var(--color-control-border);cursor:pointer;transition:background var(--dur-base) var(--ease-standard);}
+.fdy-switch input{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:var(--control-switch-w);height:var(--control-switch-h);margin:0;border-radius:var(--radius-full);background:var(--color-control-border);cursor:pointer;transition:background var(--dur-base) var(--ease-standard);}
 .fdy-switch input::before{content:"";position:absolute;top:2px;left:2px;width:calc(var(--control-switch-h) - 4px);height:calc(var(--control-switch-h) - 4px);border-radius:50%;background:var(--color-switch-thumb);box-shadow:var(--shadow-1);transition:transform var(--dur-base) var(--ease-spring);}
 .fdy-switch input:checked{background:var(--color-primary);}
 .fdy-switch input:checked::before{transform:translateX(calc(var(--control-switch-w) - var(--control-switch-h)));}
 
 /* Standalone checkbox (e.g. table row/select-all) — supports :indeterminate */
-.fdy-checkbox{appearance:none;-webkit-appearance:none;width:var(--control-box);height:var(--control-box);margin:0;border:1.5px solid var(--color-control-border);border-radius:var(--radius-sm);background:var(--color-surface);box-shadow:inset 0 1px 2px var(--color-shadow-inset);cursor:pointer;display:grid;place-content:center;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
+.fdy-checkbox{appearance:none;-webkit-appearance:none;flex:none;width:var(--control-box);height:var(--control-box);margin:0;border:1.5px solid var(--color-control-border);border-radius:var(--radius-sm);background:var(--color-surface);box-shadow:inset 0 1px 2px var(--color-shadow-inset);cursor:pointer;display:grid;place-content:center;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
 .fdy-checkbox::before{content:"";width:.62rem;height:.62rem;transform:scale(0);transition:transform var(--dur-fast) var(--ease-spring);box-shadow:inset 1rem 1rem var(--color-on-primary);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);}
 .fdy-checkbox:checked,.fdy-checkbox:indeterminate{background:var(--color-primary);border-color:var(--color-primary);}
 .fdy-checkbox:checked::before{transform:scale(1);}
@@ -1869,7 +1876,19 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 @media (prefers-reduced-motion:no-preference){.fdy-timepicker__panel:not([hidden]){animation:fdy-combo-in var(--dur-fast) var(--ease-standard);}}
 
 /* Freeday — Toast (transient notification) */
-.fdy-toast-region{position:fixed;z-index:200;bottom:var(--space-5);right:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);width:min(24rem,calc(100vw - var(--space-8)));pointer-events:none;}
+/* The region is a POPOVER, not merely a high z-index.
+   `.fdy-modal` is a native <dialog> opened with showModal(), which puts it in the TOP LAYER — a
+   layer above the whole z-index universe, so no number here could ever beat it. A toast raised by
+   an action taken inside a modal was painted behind that modal's backdrop: dimmed, unreadable, and
+   most of it under the dialog itself. `freeday-toast.js` calls showPopover() as each toast is
+   added, which puts the region in the top layer too, and last-in wins there.
+   Everything after `pointer-events` is undoing the UA's [popover] defaults — it arrives with
+   inset:0, auto margins, a border, padding, a Canvas background and overflow:auto, none of which a
+   toast stack wants. Where showPopover() is unavailable the element is still an ordinary fixed
+   block at z-index 200, which is exactly what it was before. */
+.fdy-toast-region{position:fixed;z-index:200;inset:auto;bottom:var(--space-5);right:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);width:min(24rem,calc(100vw - var(--space-8)));height:auto;max-height:none;margin:0;padding:0;border:0;background:transparent;color:inherit;overflow:visible;pointer-events:none;}
+/* A popover gets a ::backdrop as well; a toast must not dim the page behind it. */
+.fdy-toast-region::backdrop{background:transparent;}
 .fdy-toast{pointer-events:auto;display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--color-inverse-surface);color:var(--color-inverse-text);box-shadow:var(--shadow-3);}
 .fdy-toast__accent{flex:none;width:.25rem;align-self:stretch;border-radius:var(--radius-full);background:var(--color-primary);}
 .fdy-toast--success .fdy-toast__accent{background:var(--color-success);}

package/dist/freeday.css

@@ -1196,8 +1196,15 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-rating--sm .fdy-rating__star svg{width:1.1rem;height:1.1rem;}
 
 /* Freeday — Selection controls */
+/* `flex:none` on every box, track and standalone checkbox is load-bearing, not tidiness.
+   `.fdy-check` is an inline-flex row of [box, label], and a flex item with a WIDTH is still
+   shrinkable — so as soon as the label wrapped to a second line the box gave up horizontal space
+   to it and rendered an 18px-tall rectangle 13px wide. Squashed, off-square, and different from
+   every sibling whose label happened to be short: a form of five checkboxes showed three sizes.
+   Nothing in the declarations looked wrong, because the width was never overridden — it was
+   negotiated away. */
 .fdy-check,.fdy-radio,.fdy-switch{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text);cursor:pointer;}
-.fdy-check input,.fdy-radio input{appearance:none;-webkit-appearance:none;width:var(--control-box);height:var(--control-box);margin:0;border:1.5px solid var(--color-control-border);background:var(--color-surface);box-shadow:inset 0 1px 2px var(--color-shadow-inset);cursor:pointer;display:grid;place-content:center;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
+.fdy-check input,.fdy-radio input{appearance:none;-webkit-appearance:none;flex:none;width:var(--control-box);height:var(--control-box);margin:0;border:1.5px solid var(--color-control-border);background:var(--color-surface);box-shadow:inset 0 1px 2px var(--color-shadow-inset);cursor:pointer;display:grid;place-content:center;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
 .fdy-check input{border-radius:var(--radius-sm);}
 .fdy-radio input{border-radius:50%;}
 .fdy-check input::before{content:"";width:.62rem;height:.62rem;transform:scale(0);transition:transform var(--dur-fast) var(--ease-spring);box-shadow:inset 1rem 1rem var(--color-on-primary);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);}
@@ -1207,13 +1214,13 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-check input:focus-visible,.fdy-radio input:focus-visible,.fdy-switch input:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-check input:disabled,.fdy-radio input:disabled,.fdy-switch input:disabled{opacity:.5;cursor:not-allowed;}
 .fdy-check:has(input:disabled),.fdy-radio:has(input:disabled),.fdy-switch:has(input:disabled){cursor:not-allowed;}
-.fdy-switch input{appearance:none;-webkit-appearance:none;position:relative;width:var(--control-switch-w);height:var(--control-switch-h);margin:0;border-radius:var(--radius-full);background:var(--color-control-border);cursor:pointer;transition:background var(--dur-base) var(--ease-standard);}
+.fdy-switch input{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:var(--control-switch-w);height:var(--control-switch-h);margin:0;border-radius:var(--radius-full);background:var(--color-control-border);cursor:pointer;transition:background var(--dur-base) var(--ease-standard);}
 .fdy-switch input::before{content:"";position:absolute;top:2px;left:2px;width:calc(var(--control-switch-h) - 4px);height:calc(var(--control-switch-h) - 4px);border-radius:50%;background:var(--color-switch-thumb);box-shadow:var(--shadow-1);transition:transform var(--dur-base) var(--ease-spring);}
 .fdy-switch input:checked{background:var(--color-primary);}
 .fdy-switch input:checked::before{transform:translateX(calc(var(--control-switch-w) - var(--control-switch-h)));}
 
 /* Standalone checkbox (e.g. table row/select-all) — supports :indeterminate */
-.fdy-checkbox{appearance:none;-webkit-appearance:none;width:var(--control-box);height:var(--control-box);margin:0;border:1.5px solid var(--color-control-border);border-radius:var(--radius-sm);background:var(--color-surface);box-shadow:inset 0 1px 2px var(--color-shadow-inset);cursor:pointer;display:grid;place-content:center;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
+.fdy-checkbox{appearance:none;-webkit-appearance:none;flex:none;width:var(--control-box);height:var(--control-box);margin:0;border:1.5px solid var(--color-control-border);border-radius:var(--radius-sm);background:var(--color-surface);box-shadow:inset 0 1px 2px var(--color-shadow-inset);cursor:pointer;display:grid;place-content:center;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
 .fdy-checkbox::before{content:"";width:.62rem;height:.62rem;transform:scale(0);transition:transform var(--dur-fast) var(--ease-spring);box-shadow:inset 1rem 1rem var(--color-on-primary);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);}
 .fdy-checkbox:checked,.fdy-checkbox:indeterminate{background:var(--color-primary);border-color:var(--color-primary);}
 .fdy-checkbox:checked::before{transform:scale(1);}
@@ -1486,7 +1493,19 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 @media (prefers-reduced-motion:no-preference){.fdy-timepicker__panel:not([hidden]){animation:fdy-combo-in var(--dur-fast) var(--ease-standard);}}
 
 /* Freeday — Toast (transient notification) */
-.fdy-toast-region{position:fixed;z-index:200;bottom:var(--space-5);right:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);width:min(24rem,calc(100vw - var(--space-8)));pointer-events:none;}
+/* The region is a POPOVER, not merely a high z-index.
+   `.fdy-modal` is a native <dialog> opened with showModal(), which puts it in the TOP LAYER — a
+   layer above the whole z-index universe, so no number here could ever beat it. A toast raised by
+   an action taken inside a modal was painted behind that modal's backdrop: dimmed, unreadable, and
+   most of it under the dialog itself. `freeday-toast.js` calls showPopover() as each toast is
+   added, which puts the region in the top layer too, and last-in wins there.
+   Everything after `pointer-events` is undoing the UA's [popover] defaults — it arrives with
+   inset:0, auto margins, a border, padding, a Canvas background and overflow:auto, none of which a
+   toast stack wants. Where showPopover() is unavailable the element is still an ordinary fixed
+   block at z-index 200, which is exactly what it was before. */
+.fdy-toast-region{position:fixed;z-index:200;inset:auto;bottom:var(--space-5);right:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);width:min(24rem,calc(100vw - var(--space-8)));height:auto;max-height:none;margin:0;padding:0;border:0;background:transparent;color:inherit;overflow:visible;pointer-events:none;}
+/* A popover gets a ::backdrop as well; a toast must not dim the page behind it. */
+.fdy-toast-region::backdrop{background:transparent;}
 .fdy-toast{pointer-events:auto;display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--color-inverse-surface);color:var(--color-inverse-text);box-shadow:var(--shadow-3);}
 .fdy-toast__accent{flex:none;width:.25rem;align-self:stretch;border-radius:var(--radius-full);background:var(--color-primary);}
 .fdy-toast--success .fdy-toast__accent{background:var(--color-success);}

package/dist/freeday.js

@@ -3929,11 +3929,39 @@
       region.className = 'fdy-toast-region';
       region.setAttribute('aria-live', 'polite');
       region.setAttribute('aria-atomic', 'false');
+      /* `manual`, not `auto`: an auto popover light-dismisses on an outside click and closes
+         itself the moment another popover opens. A toast is dismissed by its timer or its own
+         close button, by nobody else. */
+      region.setAttribute('popover', 'manual');
       document.body.appendChild(region);
     }
     return region;
   }
 
+  /* Put the region in the TOP LAYER, above any open <dialog>.
+   *
+   * A modal dialog lives in the top layer, where z-index does not reach — so a toast raised by an
+   * action taken inside a modal was painted behind that modal's backdrop, which is where an error
+   * message is least useful. showPopover() joins the same layer, and membership there is ordered by
+   * when you joined: hide-then-show re-joins at the top, so a toast shown while a dialog is open
+   * lands above it rather than under the dialog that was opened after the last toast.
+   *
+   * Guarded twice on purpose. `showPopover` is absent before Chrome 114 / Safari 17 / Firefox 125,
+   * and the call throws if the element is disconnected or already open — in every one of those
+   * cases the region stays an ordinary fixed block at z-index 200, which is what it has always
+   * been. A notification must never be the thing that throws.
+   */
+  function raise(node) {
+    if (!node || typeof node.showPopover !== 'function') return;
+    try {
+      if (node.matches(':popover-open')) node.hidePopover();
+      node.showPopover();
+    } catch (e) {
+      /* Not reachable through the guards above, but a toast is on the error path itself: if
+         raising it fails the message still has to appear, one layer down. */
+    }
+  }
+
   function dismiss(toast) {
     if (typeof toast === 'string') toast = keyed[toast]; // dismiss by key
     if (!toast || toast.dataset.leaving === '1') return;
@@ -4011,6 +4039,9 @@
       keyed[opts.key] = node;
     }
     region.appendChild(node);
+    // Raised per toast, not once at startup: a dialog opened AFTER the region joined the top layer
+    // would otherwise sit above it, which is the exact case this fixes.
+    raise(region);
 
     var timeout = opts.timeout == null ? 4000 : opts.timeout;
     if (timeout > 0) setTimeout(function () { dismiss(node); }, timeout);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cahyo-dimas/freeday",
-  "version": "1.48.1",
+  "version": "1.50.0",
   "description": "Freeday — token-driven, framework-agnostic UI KIT (design source-of-truth).",
   "type": "module",
   "license": "MIT",
@@ -92,7 +92,7 @@
   "scripts": {
     "build": "node tokens/build.mjs",
     "test": "node --test",
-    "test:browser": "node --test browser/vanilla.mjs browser/adapter.mjs browser/layout.mjs browser/theme.mjs browser/state.mjs browser/root-init.mjs browser/upload-states.mjs browser/number.mjs browser/card-stretch.mjs browser/text-override.mjs browser/control-heights.mjs browser/cfl-multi.mjs browser/crowding.mjs",
+    "test:browser": "node --test browser/vanilla.mjs browser/adapter.mjs browser/layout.mjs browser/theme.mjs browser/state.mjs browser/root-init.mjs browser/upload-states.mjs browser/number.mjs browser/card-stretch.mjs browser/text-override.mjs browser/control-heights.mjs browser/cfl-multi.mjs browser/crowding.mjs browser/over-dialog.mjs",
     "prepack": "node tokens/build.mjs",
     "version": "node tokens/build.mjs && git add dist",
     "typecheck:react": "tsc -p adapters/react/tsconfig.json --noEmit"

package/src/components/selection.css

@@ -1,6 +1,13 @@
 /* Freeday — Selection controls */
+/* `flex:none` on every box, track and standalone checkbox is load-bearing, not tidiness.
+   `.fdy-check` is an inline-flex row of [box, label], and a flex item with a WIDTH is still
+   shrinkable — so as soon as the label wrapped to a second line the box gave up horizontal space
+   to it and rendered an 18px-tall rectangle 13px wide. Squashed, off-square, and different from
+   every sibling whose label happened to be short: a form of five checkboxes showed three sizes.
+   Nothing in the declarations looked wrong, because the width was never overridden — it was
+   negotiated away. */
 .fdy-check,.fdy-radio,.fdy-switch{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text);cursor:pointer;}
-.fdy-check input,.fdy-radio input{appearance:none;-webkit-appearance:none;width:var(--control-box);height:var(--control-box);margin:0;border:1.5px solid var(--color-control-border);background:var(--color-surface);box-shadow:inset 0 1px 2px var(--color-shadow-inset);cursor:pointer;display:grid;place-content:center;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
+.fdy-check input,.fdy-radio input{appearance:none;-webkit-appearance:none;flex:none;width:var(--control-box);height:var(--control-box);margin:0;border:1.5px solid var(--color-control-border);background:var(--color-surface);box-shadow:inset 0 1px 2px var(--color-shadow-inset);cursor:pointer;display:grid;place-content:center;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
 .fdy-check input{border-radius:var(--radius-sm);}
 .fdy-radio input{border-radius:50%;}
 .fdy-check input::before{content:"";width:.62rem;height:.62rem;transform:scale(0);transition:transform var(--dur-fast) var(--ease-spring);box-shadow:inset 1rem 1rem var(--color-on-primary);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);}
@@ -10,13 +17,13 @@
 .fdy-check input:focus-visible,.fdy-radio input:focus-visible,.fdy-switch input:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-check input:disabled,.fdy-radio input:disabled,.fdy-switch input:disabled{opacity:.5;cursor:not-allowed;}
 .fdy-check:has(input:disabled),.fdy-radio:has(input:disabled),.fdy-switch:has(input:disabled){cursor:not-allowed;}
-.fdy-switch input{appearance:none;-webkit-appearance:none;position:relative;width:var(--control-switch-w);height:var(--control-switch-h);margin:0;border-radius:var(--radius-full);background:var(--color-control-border);cursor:pointer;transition:background var(--dur-base) var(--ease-standard);}
+.fdy-switch input{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:var(--control-switch-w);height:var(--control-switch-h);margin:0;border-radius:var(--radius-full);background:var(--color-control-border);cursor:pointer;transition:background var(--dur-base) var(--ease-standard);}
 .fdy-switch input::before{content:"";position:absolute;top:2px;left:2px;width:calc(var(--control-switch-h) - 4px);height:calc(var(--control-switch-h) - 4px);border-radius:50%;background:var(--color-switch-thumb);box-shadow:var(--shadow-1);transition:transform var(--dur-base) var(--ease-spring);}
 .fdy-switch input:checked{background:var(--color-primary);}
 .fdy-switch input:checked::before{transform:translateX(calc(var(--control-switch-w) - var(--control-switch-h)));}
 
 /* Standalone checkbox (e.g. table row/select-all) — supports :indeterminate */
-.fdy-checkbox{appearance:none;-webkit-appearance:none;width:var(--control-box);height:var(--control-box);margin:0;border:1.5px solid var(--color-control-border);border-radius:var(--radius-sm);background:var(--color-surface);box-shadow:inset 0 1px 2px var(--color-shadow-inset);cursor:pointer;display:grid;place-content:center;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
+.fdy-checkbox{appearance:none;-webkit-appearance:none;flex:none;width:var(--control-box);height:var(--control-box);margin:0;border:1.5px solid var(--color-control-border);border-radius:var(--radius-sm);background:var(--color-surface);box-shadow:inset 0 1px 2px var(--color-shadow-inset);cursor:pointer;display:grid;place-content:center;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
 .fdy-checkbox::before{content:"";width:.62rem;height:.62rem;transform:scale(0);transition:transform var(--dur-fast) var(--ease-spring);box-shadow:inset 1rem 1rem var(--color-on-primary);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);}
 .fdy-checkbox:checked,.fdy-checkbox:indeterminate{background:var(--color-primary);border-color:var(--color-primary);}
 .fdy-checkbox:checked::before{transform:scale(1);}

package/src/components/toast.css

@@ -1,5 +1,17 @@
 /* Freeday — Toast (transient notification) */
-.fdy-toast-region{position:fixed;z-index:200;bottom:var(--space-5);right:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);width:min(24rem,calc(100vw - var(--space-8)));pointer-events:none;}
+/* The region is a POPOVER, not merely a high z-index.
+   `.fdy-modal` is a native <dialog> opened with showModal(), which puts it in the TOP LAYER — a
+   layer above the whole z-index universe, so no number here could ever beat it. A toast raised by
+   an action taken inside a modal was painted behind that modal's backdrop: dimmed, unreadable, and
+   most of it under the dialog itself. `freeday-toast.js` calls showPopover() as each toast is
+   added, which puts the region in the top layer too, and last-in wins there.
+   Everything after `pointer-events` is undoing the UA's [popover] defaults — it arrives with
+   inset:0, auto margins, a border, padding, a Canvas background and overflow:auto, none of which a
+   toast stack wants. Where showPopover() is unavailable the element is still an ordinary fixed
+   block at z-index 200, which is exactly what it was before. */
+.fdy-toast-region{position:fixed;z-index:200;inset:auto;bottom:var(--space-5);right:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);width:min(24rem,calc(100vw - var(--space-8)));height:auto;max-height:none;margin:0;padding:0;border:0;background:transparent;color:inherit;overflow:visible;pointer-events:none;}
+/* A popover gets a ::backdrop as well; a toast must not dim the page behind it. */
+.fdy-toast-region::backdrop{background:transparent;}
 .fdy-toast{pointer-events:auto;display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--color-inverse-surface);color:var(--color-inverse-text);box-shadow:var(--shadow-3);}
 .fdy-toast__accent{flex:none;width:.25rem;align-self:stretch;border-radius:var(--radius-full);background:var(--color-primary);}
 .fdy-toast--success .fdy-toast__accent{background:var(--color-success);}