@cahyo-dimas/freeday 3.5.0 → 3.6.0

package/src/components/description-list.css

@@ -1,6 +1,16 @@
 /* Freeday. Description list (key-value detail view) */
 .fdy-dl{display:grid;grid-template-columns:auto 1fr;gap:var(--space-2) var(--space-5);margin:0;}
 .fdy-dl dt{color:var(--color-text-muted);font-size:var(--text-sm);}
-.fdy-dl dd{margin:0;color:var(--color-text);font-size:var(--text-sm);font-weight:var(--weight-medium);}
+/* overflow-wrap: an email, an order code or a 13-digit phone number is one unbreakable token, and
+   without it the value prints over whatever sits beside it (#066). */
+.fdy-dl dd{margin:0;min-width:0;color:var(--color-text);font-size:var(--text-sm);font-weight:var(--weight-medium);overflow-wrap:anywhere;}
 .fdy-dl--rows{grid-template-columns:1fr;gap:var(--space-1);}
 .fdy-dl--rows dt{margin-top:var(--space-2);}
+/* Facts grid (#066): each pair a <div> (allowed inside <dl>), caption above value, as many columns
+   as the list's OWN width holds, never more than three. Sized by the element rather than the
+   window, so a grid in a narrow side rail stays one column with no modifier: a window breakpoint
+   gave a rail two columns of about 110px. min(100%, …) keeps a single column from overflowing a
+   rail narrower than the column floor. */
+.fdy-dl--grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,max(var(--fdy-dl-col-min,14rem),calc((100% - 2 * var(--space-6)) / 3))),1fr));gap:var(--space-5) var(--space-6);}
+.fdy-dl--grid > div{min-width:0;}
+.fdy-dl--grid dd{margin-top:var(--space-1);}

package/src/components/selection.css

@@ -21,6 +21,12 @@
 .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)));}
+/* State hint (#068): one line saying what the CURRENT state means, never "on means X, off means Y",
+   which leaves the reader to work out which half applies. The control's aria-describedby points at
+   the .fdy-help WRAPPING both lines: a hidden child of a referenced node is skipped, so a screen
+   reader hears only the line on screen. Point it at the two children and both are read. */
+.fdy-field:has(:is(.fdy-switch,.fdy-check) input:checked) [data-fdy-when="off"],
+.fdy-field:not(:has(:is(.fdy-switch,.fdy-check) input:checked)) [data-fdy-when="on"]{display:none;}
 
 /* Standalone checkbox (e.g. table row/select-all), supports :indeterminate */
 .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);}

package/src/components/states.css

@@ -6,3 +6,10 @@
 .fdy-state__text{font-size:var(--text-sm);color:var(--color-text-muted);max-width:24rem;line-height:var(--leading-normal);}
 .fdy-state__actions{margin-top:var(--space-2);display:flex;gap:var(--space-2);flex-wrap:wrap;justify-content:center;}
 .fdy-state--danger .fdy-state__icon{color:var(--color-danger-strong);}
+/* Compact (#069): the same state inside a small card, one line of icon and text instead of a
+   page-sized block. Danger matters most here: a widget that renders zero for a failed request
+   reads as "nothing to do", the opposite of what happened. */
+.fdy-state--compact{flex-direction:row;align-items:flex-start;text-align:left;gap:var(--space-2);padding:var(--space-2) 0;}
+.fdy-state--compact .fdy-state__icon{width:1rem;height:1rem;flex:none;}
+.fdy-state--compact .fdy-state__text{font-size:var(--text-xs);max-width:none;}
+.fdy-state--compact .fdy-state__actions{margin:0 0 0 auto;}

package/src/components/table.css

@@ -15,8 +15,17 @@
    itself, for the same reason: hover paints the full step, so the two must not be the same colour.
    Exposed as a Tier-3 token through the var() FALLBACK, never as a declaration — a custom property
    set here would outrank a host's own :root override. */
-.fdy-table--striped tbody tr:nth-child(even){background:var(--fdy-table-stripe,color-mix(in srgb,var(--color-surface-2) 55%,var(--color-surface)));}
-.fdy-table tbody tr:hover{background:var(--color-surface-2);}
+/* The resting colour is also published as --_fdy-row-rest, so a row that must not answer the
+   pointer can hover back to exactly what it was (see --hover-actionable). */
+.fdy-table--striped tbody tr:nth-child(even){--_fdy-row-rest:var(--fdy-table-stripe,color-mix(in srgb,var(--color-surface-2) 55%,var(--color-surface)));background:var(--_fdy-row-rest);}
+.fdy-table tbody tr:hover{background:var(--_fdy-row-hover,var(--color-surface-2));}
+/* Opt-in (#064): only a row that DOES something answers the pointer. A tint on a row with no click
+   handler promises a target that is not there: people click the row, nothing happens, and the
+   button they had to aim at was elsewhere in it. Striping, not hover, is what keeps the eye on a
+   line. The inert row's hover resolves to its own resting colour, so a stripe survives it; a frozen
+   cell falls back to its opaque surface, because it scrolls over its neighbours. */
+.fdy-table--hover-actionable tbody tr:not(.fdy-table__row--activatable){--_fdy-row-hover:var(--_fdy-row-rest,transparent);}
+.fdy-table--hover-actionable tbody tr:not(.fdy-table__row--activatable) td.fdy-table__freeze{--_fdy-row-hover:var(--_fdy-row-rest,var(--color-surface));}
 /* Monospace data, ids, codes, IPs, timestamps. Alignment-neutral so it works in any cell
    or inline (`<span class="fdy-mono">`), not just numeric columns. */
 .fdy-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
@@ -25,8 +34,8 @@
 .fdy-table__num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--font-mono);}
 /* Loading / empty state cell (FdyTable spans it across all columns). */
 .fdy-table__state{text-align:center;color:var(--color-text-muted);padding:var(--space-6) var(--space-4);}
-/* Activatable row (FdyTable rowActivatable): pointer + keyboard focus ring. The hover tint already
-   comes from the base `.fdy-table tbody tr:hover` rule, so this only adds the affordance + focus. */
+/* Activatable row (FdyTable rowActivatable): pointer + keyboard focus ring. The hover tint comes from
+   the base `.fdy-table tbody tr:hover` rule, which --hover-actionable keeps for these rows only. */
 .fdy-table__row--activatable{cursor:pointer;}
 .fdy-table__row--activatable:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;}
 /* Expandable detail row (FdyTable row-detail slot): a muted panel under its row, no hover tint. */
@@ -86,7 +95,7 @@
    (0,4,3) and beat the hover rule below. At (0,3,3) it ties, and the later rule wins, so a hovered
    row still bands unbroken across the freeze line. */
 .fdy-table--striped tbody tr:nth-child(even) td.fdy-table__freeze{background:var(--fdy-table-stripe,color-mix(in srgb,var(--color-surface-2) 55%,var(--color-surface)));}
-.fdy-table--sticky tbody tr:hover td.fdy-table__freeze{background:var(--color-surface-2);}
+.fdy-table--sticky tbody tr:hover td.fdy-table__freeze{background:var(--_fdy-row-hover,var(--color-surface-2));}
 /* A frozen header cell is stuck on both axes wherever the head is frozen too, so
    it has to outrank both. */
 .fdy-table--sticky thead .fdy-table__freeze{z-index:3;}