@cahyo-dimas/freeday 1.20.0 → 1.22.0

package/src/base.css

@@ -14,6 +14,21 @@ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--weight-bol
 a { color: var(--color-primary); }
 :focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-width); border-radius: var(--radius-xs); }
 :where(button, input, select, textarea) { font: inherit; }
+/* Hidden from sight, kept for assistive tech. `clip` hides PAINTING, not LAYOUT: the box still
+ * has a position, and because it is position:absolute its containing block is the nearest
+ * POSITIONED ancestor — with none, the initial containing block (the document itself).
+ *
+ * That matters, because `overflow` only clips a descendant whose containing block is inside the
+ * overflow box. So a hidden span in a horizontally scrolling table (the kit's own recommended way
+ * to name an icon button) parks at its static position — possibly thousands of px to the right —
+ * and drags the whole DOCUMENT sideways: invisible, and immune to `overflow-x:hidden` on every
+ * wrapper. Measured before the fix: 1351px of phantom page scroll from 11 spans.
+ *
+ * The fix is not here — it is on the containers: every clipping/scrolling container in the kit
+ * that holds consumer markup declares `position:relative` so it becomes the containing block for
+ * its own out-of-flow content (see test/css.test.mjs, which will not let a new one skip it).
+ * Note the measurement trap: documentElement.scrollWidth sees it, body.scrollWidth does not —
+ * the honest check is `window.scrollTo(9999, 0)` then reading `window.scrollX`. */
 .fdy-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
 /* Opt-in list reset. base.css is intentionally a *light* reset — it does NOT strip list/paragraph
  * margins (see the kit's own list components, which each reset themselves). If you run a utility

package/src/components/accordion.css

@@ -1,5 +1,9 @@
 /* Freeday — Accordion (native <details>/<summary>, zero-JS) */
-.fdy-accordion{border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface);}
+/* position:relative — containing block for out-of-flow panel content (see base.css). NOT redundant
+   with the panel's reveal animation: that animation gives the panel a transform (which happens to
+   make it a containing block too), but it lives behind prefers-reduced-motion:no-preference — so
+   without this line the escape bug appears ONLY for readers who asked for reduced motion. */
+.fdy-accordion{position:relative;border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface);}
 .fdy-accordion__item + .fdy-accordion__item{border-top:var(--bw) solid var(--color-border);}
 .fdy-accordion__item > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);font-weight:var(--weight-medium);color:var(--color-text);}
 .fdy-accordion__item > summary::-webkit-details-marker{display:none;}

package/src/components/app-shell.css

@@ -24,6 +24,15 @@
 .fdy-app__brand-title{display:block;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-lg);color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .fdy-app__brand-subtitle{display:block;font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .fdy-nav{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:2px;padding:var(--space-3) var(--space-3) var(--space-6);}
+/* Horizontal variant — the SAME nav links laid out as a row, for a top-nav application (one that
+ * puts its primary navigation in `.fdy-appbar` / `.fdy-app__topbar` and has no sidebar). Deliberately
+ * a modifier and not a new block: the item, its states and `aria-current="page"` are unchanged. That
+ * is the point — a navigation link is a link marked `aria-current`, never `aria-selected` (invalid
+ * ARIA on an anchor) and never a tab role, so borrowing `.fdy-tabs` for routes half-adopts a contract
+ * (roving tabindex, a panel per tab) that route links do not honour. position:relative because the
+ * row scrolls; see base.css on why a scroller must be a containing block. */
+.fdy-nav--horizontal{position:relative;flex:0 1 auto;flex-direction:row;align-items:center;gap:var(--space-1);padding:0;min-height:0;overflow-x:auto;}
+.fdy-nav--horizontal .fdy-nav__item{white-space:nowrap;}
 .fdy-nav__item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-muted);text-decoration:none;cursor:pointer;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard);}
 .fdy-nav__item:hover{background:var(--color-surface-2);color:var(--color-text);}
 /* Active indicator stays in the primary ramp so it never clashes with a re-themed accent. */

package/src/components/appbar.css

@@ -10,6 +10,15 @@
 .fdy-appbar__brand svg{display:block;width:1.5rem;height:1.5rem;}
 .fdy-appbar__spacer{flex:1;}
 .fdy-appbar__actions{display:inline-flex;align-items:center;gap:var(--space-1);}
+/* Primary navigation inside the bar: `<nav class="fdy-nav fdy-nav--horizontal">` with
+   `.fdy-nav__item` links (see app-shell.css). The bar ships no link class of its own — a nav link
+   is the same component whether the nav is a sidebar column or a top row. */
 /* Controls on a coloured app bar go on-colour (icons stay legible, hover is a light wash) */
 .fdy-appbar--primary .fdy-btn--ghost{background:transparent;border-color:transparent;color:var(--color-on-primary);box-shadow:none;}
 .fdy-appbar--primary .fdy-btn--ghost:hover{background:color-mix(in srgb,var(--color-on-primary) 16%,transparent);color:var(--color-on-primary);transform:none;}
+/* Nav links on a coloured bar: full on-colour ink in every state (a dimmed variant would trade away
+   the contrast the bar's own token pair guarantees). The current page is carried by the background
+   wash plus the semibold weight the base rule already applies — and by `aria-current` itself. */
+.fdy-appbar--primary .fdy-nav__item{color:var(--color-on-primary);}
+.fdy-appbar--primary .fdy-nav__item:hover{background:color-mix(in srgb,var(--color-on-primary) 16%,transparent);color:var(--color-on-primary);}
+.fdy-appbar--primary .fdy-nav__item[aria-current="page"]{background:color-mix(in srgb,var(--color-on-primary) 24%,transparent);color:var(--color-on-primary);}

package/src/components/button.css

@@ -10,6 +10,14 @@
 .fdy-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px -2px color-mix(in srgb,var(--color-primary) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.26);}
 .fdy-btn:active{transform:translateY(1px);box-shadow:0 1px 4px -1px color-mix(in srgb,var(--color-primary) 46%,transparent);}
 .fdy-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}
+/* Pressed / toggle. `aria-pressed` is already the right attribute for a toggle button, so this adds
+   no class and no new markup contract — and it is what makes .fdy-btn-group a complete segmented
+   control: the group joins the borders, this says which segment you are on. Each fill variant
+   defines its OWN pressed look below; a single shared rule cannot work, because a gradient is a
+   background-IMAGE and would blank the ghost variant's background-color. Solid: invert the gradient
+   and sink the shadow inward, so a held button reads as depressed, not merely primary-coloured. */
+.fdy-btn[aria-pressed="true"]{background:linear-gradient(180deg,color-mix(in srgb,#000 12%,var(--color-primary)),var(--color-primary));box-shadow:inset 0 2px 6px color-mix(in srgb,#000 22%,transparent);}
+.fdy-btn[aria-pressed="true"]:hover{transform:none;box-shadow:inset 0 2px 6px color-mix(in srgb,#000 22%,transparent);}
 
 .fdy-btn--ghost{background:var(--color-surface);color:var(--color-primary-strong);border-color:var(--color-border-strong);box-shadow:var(--shadow-1);}
 .fdy-btn--ghost:hover{transform:none;background:var(--color-primary-soft);border-color:var(--color-primary-border);box-shadow:var(--shadow-1);}
@@ -18,6 +26,7 @@
 .fdy-btn--danger{background:linear-gradient(180deg,var(--color-danger-btn),color-mix(in srgb,#000 12%,var(--color-danger-btn)));color:var(--color-on-danger);box-shadow:0 2px 9px -1px color-mix(in srgb,var(--color-danger-btn) 46%,transparent),inset 0 1px 0 rgba(255,255,255,.22);}
 .fdy-btn--danger:hover{transform:translateY(-1px);box-shadow:0 6px 18px -2px color-mix(in srgb,var(--color-danger-btn) 54%,transparent),inset 0 1px 0 rgba(255,255,255,.22);}
 .fdy-btn--danger:active{transform:translateY(1px);}
+.fdy-btn--danger[aria-pressed="true"]{background:linear-gradient(180deg,color-mix(in srgb,#000 14%,var(--color-danger-btn)),var(--color-danger-btn));box-shadow:inset 0 2px 6px color-mix(in srgb,#000 24%,transparent);}
 
 .fdy-btn--sm{height:calc(var(--control-h) - var(--space-2));padding:0 var(--space-3);font-size:var(--text-xs);border-radius:var(--radius-sm);}
 .fdy-btn--lg{height:calc(var(--control-h) + var(--space-2));padding:0 var(--space-6);font-size:var(--text-base);border-radius:var(--radius-lg);}
@@ -30,6 +39,11 @@
 .fdy-btn--text{background:none;color:var(--color-primary-strong);border-color:transparent;box-shadow:none;}
 .fdy-btn--text:hover{transform:none;background:var(--color-primary-soft);box-shadow:none;}
 .fdy-btn--text:active{transform:translateY(1px);box-shadow:none;}
+/* Ghost/text pressed: the kit's selected-surface pair (soft fill + strong ink) — the same pairing
+   .fdy-nav__item uses for the current page, and one the AA contrast gate already covers. This is
+   the realistic segmented control: a row of --ghost buttons with exactly one aria-pressed. */
+.fdy-btn--ghost[aria-pressed="true"],.fdy-btn--text[aria-pressed="true"]{background:var(--color-primary-soft);color:var(--color-primary-strong);border-color:var(--color-primary-border);box-shadow:none;}
+.fdy-btn--ghost[aria-pressed="true"]:hover,.fdy-btn--text[aria-pressed="true"]:hover{background:var(--color-primary-soft);transform:none;box-shadow:none;}
 
 /* Icon-only — square; combine with --ghost/--text/--sm/--lg. Requires aria-label. */
 .fdy-btn--icon{width:var(--control-h);padding:0;}

package/src/components/card.css

@@ -1,5 +1,7 @@
 /* Freeday — Card */
-.fdy-card{background:var(--color-surface);border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lift);transition:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard);}
+/* position:relative — containing block for out-of-flow card content (see base.css); it also gives
+   consumers the anchor a corner ribbon/badge needs. */
+.fdy-card{position:relative;background:var(--color-surface);border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lift);transition:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard);}
 .fdy-card--elevated{box-shadow:var(--shadow-lift-hover);}
 .fdy-card--interactive{cursor:pointer;}
 .fdy-card--interactive:hover{box-shadow:var(--shadow-lift-hover);transform:translateY(-3px);}
@@ -10,6 +12,10 @@
  * announced — reset the UA button box. Note: it does NOT reset background/border, because
  * .fdy-card already sets its own surface + border (resetting them here would strip the card). */
 .fdy-card--button{display:block;width:100%;text-align:inherit;color:inherit;appearance:none;-webkit-appearance:none;}
+/* Disabled card-as-control — same contract as .fdy-list__row--button: dim + not-allowed, and the
+   --interactive lift is withdrawn so a refusing control stops answering the pointer. */
+.fdy-card--button:disabled,.fdy-card--button[aria-disabled="true"],.fdy-card--interactive[aria-disabled="true"]{opacity:.5;cursor:not-allowed;}
+.fdy-card--interactive:disabled:hover,.fdy-card--interactive[aria-disabled="true"]:hover{box-shadow:var(--shadow-lift);transform:none;}
 .fdy-card__body{padding:var(--space-5);}
 .fdy-card__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--color-text);margin:0 0 var(--space-1);}
 .fdy-card__desc{font-size:var(--text-sm);color:var(--color-text-muted);margin:0;line-height:var(--leading-normal);}

package/src/components/carousel.css

@@ -1,6 +1,9 @@
 /* Freeday — Carousel (scroll-snap track + arrows + dots). Enhanced by freeday-carousel.js. */
 .fdy-carousel{position:relative;}
-.fdy-carousel__viewport{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;border-radius:var(--radius-lg);scrollbar-width:none;-ms-overflow-style:none;}
+/* position:relative — the arrows are positioned against .fdy-carousel (the parent), so this only
+   catches out-of-flow content inside the SLIDES, which would otherwise escape the viewport
+   entirely and scroll the page by one slide-offset per slide (see base.css). */
+.fdy-carousel__viewport{position:relative;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;border-radius:var(--radius-lg);scrollbar-width:none;-ms-overflow-style:none;}
 .fdy-carousel__viewport::-webkit-scrollbar{display:none;}
 .fdy-carousel__slide{flex:0 0 100%;min-width:0;scroll-snap-align:center;}
 .fdy-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:0;border-radius:var(--radius-full);background:color-mix(in srgb,var(--color-surface) 86%,transparent);color:var(--color-text);box-shadow:var(--shadow-2);cursor:pointer;transition:background var(--dur-fast) var(--ease-standard);}

package/src/components/list.css

@@ -8,7 +8,8 @@
  *
  * Not to be confused with .fdy-list-reset (base.css), which only strips UA bullets/indent.
  * Works on <ul>/<ol> (list-style is reset here) or on plain <div>s. */
-.fdy-list{list-style:none;margin:0;padding:0;background:var(--color-surface);border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;}
+/* position:relative — containing block for out-of-flow row content (see base.css). */
+.fdy-list{position:relative;list-style:none;margin:0;padding:0;background:var(--color-surface);border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;}
 .fdy-list__row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);min-width:0;}
 /* Divider between rows. Two shapes are supported and both are load-bearing: rows as direct children
  * of the list, and rows wrapped in <li> (the semantic shape, where the ADJACENT siblings are the
@@ -21,6 +22,12 @@
 .fdy-list__row--button:hover,.fdy-list__row--interactive:hover{background:var(--color-surface-2);}
 .fdy-list__row--button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-primary);}
 .fdy-list__row--interactive{cursor:pointer;}
+/* Disabled row. The reset above adopts the UA button box, but not its disabled state — so a row
+   disabled mid-flight (a redirect in progress, say) kept lighting up and kept a pointer cursor:
+   a control answering the pointer while refusing input. Same contract as every other disabled
+   control in the kit (dim + not-allowed), hover withdrawn, both the native and the aria- form. */
+.fdy-list__row--button:disabled,.fdy-list__row--button[aria-disabled="true"],.fdy-list__row--interactive[aria-disabled="true"]{opacity:.5;cursor:not-allowed;}
+.fdy-list__row--button:disabled:hover,.fdy-list__row--button[aria-disabled="true"]:hover,.fdy-list__row--interactive[aria-disabled="true"]:hover{background:none;}
 /* Row internals: a title/meta stack that truncates, and a trailing slot pinned right. */
 .fdy-list__main{display:flex;flex-direction:column;gap:var(--space-1);min-width:0;flex:1;}
 .fdy-list__title{font-weight:var(--weight-medium);color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

package/src/components/table.css

@@ -1,5 +1,8 @@
 /* Freeday — Table */
-.fdy-table-wrap{overflow-x:auto;border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);background:var(--color-surface);}
+/* position:relative on every scroller/clipper — it makes the box the containing block for its own
+   absolutely positioned content (.fdy-visually-hidden above all), which `overflow` alone does NOT
+   clip. Without it a hidden label in a wide table scrolls the whole page. See base.css. */
+.fdy-table-wrap{position:relative;overflow-x:auto;border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);background:var(--color-surface);}
 .fdy-table{width:100%;border-collapse:collapse;font-size:var(--text-sm);}
 .fdy-table caption{text-align:left;padding:var(--space-3) var(--space-4);font-weight:var(--weight-semibold);color:var(--color-text);}
 .fdy-table th{text-align:left;padding:var(--space-3) var(--space-4);font-size:var(--text-xs);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--color-text-muted);background:var(--color-surface-2);border-bottom:var(--bw) solid var(--color-border);white-space:nowrap;}
@@ -36,7 +39,7 @@
 
 /* Data-table shell (toolbar + scroll + footer stay put while the table scrolls) */
 .fdy-datatable{border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);background:var(--color-surface);overflow:hidden;}
-.fdy-table-scroll{overflow-x:auto;}
+.fdy-table-scroll{position:relative;overflow-x:auto;}
 .fdy-table-toolbar{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;padding:var(--space-3) var(--space-4);border-bottom:var(--bw) solid var(--color-border);}
 .fdy-table-toolbar__search{max-width:18rem;}
 .fdy-table-toolbar__spacer{flex:1;}

package/src/components/tabs.css

@@ -1,10 +1,17 @@
 /* Freeday — Tabs (WAI-ARIA APG) */
-.fdy-tabs__list{display:flex;gap:var(--space-1);border-bottom:var(--bw) solid var(--color-border);overflow-x:auto;}
+/* position:relative — containing block for out-of-flow content in the tabs (see base.css). */
+.fdy-tabs__list{position:relative;display:flex;gap:var(--space-1);border-bottom:var(--bw) solid var(--color-border);overflow-x:auto;}
 .fdy-tabs__tab{appearance:none;border:0;background:transparent;cursor:pointer;white-space:nowrap;font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-muted);padding:var(--space-3) var(--space-4);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
 .fdy-tabs__tab:hover{color:var(--color-text);}
 .fdy-tabs__tab:disabled,.fdy-tabs__tab[aria-disabled="true"]{opacity:.5;cursor:not-allowed;color:var(--color-text-muted);}
 .fdy-tabs__tab:disabled:hover,.fdy-tabs__tab[aria-disabled="true"]:hover{color:var(--color-text-muted);}
-.fdy-tabs__tab[aria-selected="true"]{color:var(--color-primary-strong);border-bottom-color:var(--color-primary);}
+/* `aria-current="page"` is honoured alongside `aria-selected="true"` so the tab look can be used for
+   ROUTE-driven sub-navigation (/settings/profile · /settings/billing), where the tabs are real links.
+   A link cannot be `aria-selected` — that is invalid ARIA on an anchor; `aria-current` is the only
+   correct marker, and it is what a router sets. Use `.fdy-tabs` + `freeday-tabs.js` (roving tabindex,
+   a panel per tab) for in-page tabs; use these classes on plain links for routed ones, and
+   `.fdy-nav--horizontal` for an application's PRIMARY navigation. */
+.fdy-tabs__tab[aria-selected="true"],.fdy-tabs__tab[aria-current="page"]{color:var(--color-primary-strong);border-bottom-color:var(--color-primary);}
 .fdy-tabs__tab:focus-visible{outline:none;border-radius:var(--radius-sm);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-tabs__panel{padding:var(--space-5) 0;}
 .fdy-tabs__panel[hidden]{display:none;}