@cahyo-dimas/freeday 1.21.0 → 1.23.0

package/dist/freeday-drawer.js

@@ -16,19 +16,24 @@
     });
   }
 
+  function bindTrigger(btn) {
+    if (btn.dataset.fdyDrawerBound === '1') return;
+    var dialog = document.getElementById(btn.getAttribute('data-fdy-drawer'));
+    if (!dialog) return;
+    initDrawer(dialog);
+    btn.dataset.fdyDrawerBound = '1';
+    btn.addEventListener('click', function () {
+      if (typeof dialog.showModal === 'function') dialog.showModal();
+      else dialog.setAttribute('open', '');
+    });
+  }
+
   function initTriggers(context) {
     var ctx = context || document;
-    Array.prototype.forEach.call(ctx.querySelectorAll('[data-fdy-drawer]'), function (btn) {
-      if (btn.dataset.fdyDrawerBound === '1') return;
-      var dialog = document.getElementById(btn.getAttribute('data-fdy-drawer'));
-      if (!dialog) return;
-      initDrawer(dialog);
-      btn.dataset.fdyDrawerBound = '1';
-      btn.addEventListener('click', function () {
-        if (typeof dialog.showModal === 'function') dialog.showModal();
-        else dialog.setAttribute('open', '');
-      });
-    });
+    /* root included: querySelectorAll never matches its own root, and a framework ref often sits ON the widget. */
+    if (ctx.matches && ctx.matches('[data-fdy-drawer]')) bindTrigger(ctx);
+    if (ctx.matches && ctx.matches('.fdy-drawer')) initDrawer(ctx);
+    Array.prototype.forEach.call(ctx.querySelectorAll('[data-fdy-drawer]'), bindTrigger);
     // Init any drawer dialogs even without a wired trigger (backdrop/close still work).
     Array.prototype.forEach.call(ctx.querySelectorAll('.fdy-drawer'), initDrawer);
   }

package/dist/freeday-form.js

@@ -168,7 +168,10 @@
   }
 
   function initAll(context) {
-    Array.prototype.forEach.call((context || document).querySelectorAll('[data-fdy-validate]'), initForm);
+    var root = context || document;
+    /* root included: querySelectorAll never matches its own root, and a framework ref often sits ON the widget. */
+    if (root.matches && root.matches('[data-fdy-validate]')) initForm(root);
+    Array.prototype.forEach.call(root.querySelectorAll('[data-fdy-validate]'), initForm);
   }
 
   if (document.readyState === 'loading') {

package/dist/freeday-mask.js

@@ -100,6 +100,9 @@
 
   function initAll(context) {
     var root = context || document;
+    /* root included: querySelectorAll never matches its own root, and a framework ref often sits ON the widget. */
+    if (root.matches && root.matches('[data-fdy-mask]')) initMask(root);
+    if (root.matches && root.matches('[data-fdy-password]')) initReveal(root);
     Array.prototype.forEach.call(root.querySelectorAll('[data-fdy-mask]'), initMask);
     Array.prototype.forEach.call(root.querySelectorAll('[data-fdy-password]'), initReveal);
   }

package/dist/freeday-menu.js

@@ -80,7 +80,10 @@
   }
 
   function initAll(ctx) {
-    Array.prototype.forEach.call((ctx || document).querySelectorAll('[data-fdy-menu]'), initMenu);
+    var root = ctx || document;
+    /* root included: querySelectorAll never matches its own root, and a framework ref often sits ON the widget. */
+    if (root.matches && root.matches('[data-fdy-menu]')) initMenu(root);
+    Array.prototype.forEach.call(root.querySelectorAll('[data-fdy-menu]'), initMenu);
   }
 
   if (document.readyState === 'loading') {

package/dist/freeday-rating.js

@@ -37,7 +37,10 @@
   }
 
   function initAll(context) {
-    Array.prototype.forEach.call((context || document).querySelectorAll('[data-fdy-rating]'), initRating);
+    var root = context || document;
+    /* root included: querySelectorAll never matches its own root, and a framework ref often sits ON the widget. */
+    if (root.matches && root.matches('[data-fdy-rating]')) initRating(root);
+    Array.prototype.forEach.call(root.querySelectorAll('[data-fdy-rating]'), initRating);
   }
 
   if (document.readyState === 'loading') {

package/dist/freeday-select.js

@@ -189,11 +189,10 @@
   }
 
   function initAll(context) {
-    var scope = context || document;
-    Array.prototype.forEach.call(
-      scope.querySelectorAll('[data-fdy-combo]'),
-      initCombo
-    );
+    var root = context || document;
+    /* root included: querySelectorAll never matches its own root, and a framework ref often sits ON the widget. */
+    if (root.matches && root.matches('[data-fdy-combo]')) initCombo(root);
+    Array.prototype.forEach.call(root.querySelectorAll('[data-fdy-combo]'), initCombo);
   }
 
   // One global handler closes the open combo on an outside click.

package/dist/freeday-slider.js

@@ -21,7 +21,10 @@
   }
 
   function initAll(context) {
-    Array.prototype.forEach.call((context || document).querySelectorAll('[data-fdy-slider]'), initSlider);
+    var root = context || document;
+    /* root included: querySelectorAll never matches its own root, and a framework ref often sits ON the widget. */
+    if (root.matches && root.matches('[data-fdy-slider]')) initSlider(root);
+    Array.prototype.forEach.call(root.querySelectorAll('[data-fdy-slider]'), initSlider);
   }
 
   if (document.readyState === 'loading') {

package/dist/freeday-stepper.js

@@ -77,7 +77,10 @@
   }
 
   function initAll(context) {
-    Array.prototype.forEach.call((context || document).querySelectorAll('[data-fdy-stepper]'), initStepper);
+    var root = context || document;
+    /* root included: querySelectorAll never matches its own root, and a framework ref often sits ON the widget. */
+    if (root.matches && root.matches('[data-fdy-stepper]')) initStepper(root);
+    Array.prototype.forEach.call(root.querySelectorAll('[data-fdy-stepper]'), initStepper);
   }
 
   if (document.readyState === 'loading') {

package/dist/freeday-table.js

@@ -459,10 +459,10 @@
   }
 
   function initAll(context) {
-    Array.prototype.forEach.call(
-      (context || document).querySelectorAll('[data-fdy-table]'),
-      initTable
-    );
+    var root = context || document;
+    /* root included: querySelectorAll never matches its own root, and a framework ref often sits ON the widget. */
+    if (root.matches && root.matches('[data-fdy-table]')) initTable(root);
+    Array.prototype.forEach.call(root.querySelectorAll('[data-fdy-table]'), initTable);
   }
 
   if (document.readyState === 'loading') {

package/dist/freeday-tabs.js

@@ -52,10 +52,10 @@
   }
 
   function initAll(context) {
-    Array.prototype.forEach.call(
-      (context || document).querySelectorAll('[data-fdy-tabs]'),
-      initTabs
-    );
+    var root = context || document;
+    /* root included: querySelectorAll never matches its own root, and a framework ref often sits ON the widget. */
+    if (root.matches && root.matches('[data-fdy-tabs]')) initTabs(root);
+    Array.prototype.forEach.call(root.querySelectorAll('[data-fdy-tabs]'), initTabs);
   }
 
   if (document.readyState === 'loading') {

package/dist/freeday-timepicker.js

@@ -167,7 +167,10 @@
   }
 
   function initAll(context) {
-    Array.prototype.forEach.call((context || document).querySelectorAll('[data-fdy-timepicker]'), initTime);
+    var root = context || document;
+    /* root included: querySelectorAll never matches its own root, and a framework ref often sits ON the widget. */
+    if (root.matches && root.matches('[data-fdy-timepicker]')) initTime(root);
+    Array.prototype.forEach.call(root.querySelectorAll('[data-fdy-timepicker]'), initTime);
   }
 
   if (document.readyState === 'loading') {

package/dist/freeday-tree.js

@@ -81,7 +81,10 @@
   }
 
   function initAll(context) {
-    Array.prototype.forEach.call((context || document).querySelectorAll('[data-fdy-tree]'), initTree);
+    var root = context || document;
+    /* root included: querySelectorAll never matches its own root, and a framework ref often sits ON the widget. */
+    if (root.matches && root.matches('[data-fdy-tree]')) initTree(root);
+    Array.prototype.forEach.call(root.querySelectorAll('[data-fdy-tree]'), initTree);
   }
 
   if (document.readyState === 'loading') {

package/dist/freeday-upload.js

@@ -193,7 +193,10 @@
   }
 
   function initAll(context) {
-    Array.prototype.forEach.call((context || document).querySelectorAll('[data-fdy-dropzone]'), initDropzone);
+    var root = context || document;
+    /* root included: querySelectorAll never matches its own root, and a framework ref often sits ON the widget. */
+    if (root.matches && root.matches('[data-fdy-dropzone]')) initDropzone(root);
+    Array.prototype.forEach.call(root.querySelectorAll('[data-fdy-dropzone]'), initDropzone);
   }
 
   if (document.readyState === 'loading') {

package/dist/freeday.bundle.css

@@ -473,6 +473,15 @@ a { color: var(--color-primary); }
 .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. */
@@ -548,9 +557,18 @@ a { color: var(--color-primary); }
 .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);}
 
 /* Freeday — Autocomplete (text input + filtered suggestion listbox, APG editable combobox).
  * Enhanced by freeday-autocomplete.js. */
@@ -568,6 +586,11 @@ a { color: var(--color-primary); }
 /* Freeday — Avatar */
 .fdy-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.5rem;height:2.5rem;border-radius:var(--radius-full);background:var(--color-primary-soft);color:var(--color-primary-strong);font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--text-sm);line-height:1;overflow:hidden;user-select:none;}
 .fdy-avatar img{width:100%;height:100%;object-fit:cover;}
+/* --xs exists for an avatar INSIDE a control: `.fdy-btn--sm` is exactly 2rem tall, which is also
+   `--sm`'s size, so a small avatar in a small button fills it edge to edge and the ghost border
+   crosses the circle. 1.5rem leaves the same ~4px breathing room the kit's controls give their
+   icons. Uses `--text-xs` (the smallest type token the kit has — there is no `2xs`). */
+.fdy-avatar--xs{width:1.5rem;height:1.5rem;font-size:var(--text-xs);}
 .fdy-avatar--sm{width:2rem;height:2rem;font-size:var(--text-xs);}
 .fdy-avatar--lg{width:3.5rem;height:3.5rem;font-size:var(--text-lg);}
 .fdy-avatar-group{display:inline-flex;}
@@ -653,6 +676,14 @@ a { color: var(--color-primary); }
 .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);}
@@ -661,6 +692,7 @@ a { color: var(--color-primary); }
 .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);}
@@ -673,6 +705,11 @@ a { color: var(--color-primary); }
 .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;}
@@ -1425,7 +1462,12 @@ fieldset.fdy-field>legend{padding:0;float:none;}
 .fdy-step.is-active::before,.fdy-step.is-complete::before{background:var(--color-primary);}
 .fdy-step__btn{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:0 var(--space-2);background:none;border:0;font:inherit;color:inherit;cursor:pointer;max-width:100%;}
 .fdy-step__btn:disabled{cursor:default;}
-.fdy-step__marker{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;flex:none;border-radius:var(--radius-full);background:var(--color-surface);border:2px solid var(--color-border-strong);color:var(--color-text-muted);font-size:var(--text-sm);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;}
+/* The marker carries the lift itself, NOT `__btn`. The connector above is position:absolute with
+   z-index:0, and a positioned box paints after in-flow inline content in the same stacking context —
+   so a marker that is merely inline (an indicator-only stepper with no `__btn`) gets painted THROUGH
+   by the connector line. Lifting the part that must always exist makes that assembly impossible;
+   `__btn`'s own z-index stays, harmlessly, for the navigable case. */
+.fdy-step__marker{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;flex:none;border-radius:var(--radius-full);background:var(--color-surface);border:2px solid var(--color-border-strong);color:var(--color-text-muted);font-size:var(--text-sm);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;}
 .fdy-step__marker svg{display:block;width:1rem;height:1rem;}
 .fdy-step.is-active .fdy-step__marker{border-color:var(--color-primary);background:var(--color-primary-soft);color:var(--color-primary-strong);}
 .fdy-step.is-complete .fdy-step__marker{border-color:var(--color-primary);background:var(--color-primary);color:var(--color-on-primary);}
@@ -1518,7 +1560,13 @@ fieldset.fdy-field>legend{padding:0;float:none;}
 .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;}

package/dist/freeday.css

@@ -103,6 +103,15 @@ a { color: var(--color-primary); }
 .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. */
@@ -178,9 +187,18 @@ a { color: var(--color-primary); }
 .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);}
 
 /* Freeday — Autocomplete (text input + filtered suggestion listbox, APG editable combobox).
  * Enhanced by freeday-autocomplete.js. */
@@ -198,6 +216,11 @@ a { color: var(--color-primary); }
 /* Freeday — Avatar */
 .fdy-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.5rem;height:2.5rem;border-radius:var(--radius-full);background:var(--color-primary-soft);color:var(--color-primary-strong);font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--text-sm);line-height:1;overflow:hidden;user-select:none;}
 .fdy-avatar img{width:100%;height:100%;object-fit:cover;}
+/* --xs exists for an avatar INSIDE a control: `.fdy-btn--sm` is exactly 2rem tall, which is also
+   `--sm`'s size, so a small avatar in a small button fills it edge to edge and the ghost border
+   crosses the circle. 1.5rem leaves the same ~4px breathing room the kit's controls give their
+   icons. Uses `--text-xs` (the smallest type token the kit has — there is no `2xs`). */
+.fdy-avatar--xs{width:1.5rem;height:1.5rem;font-size:var(--text-xs);}
 .fdy-avatar--sm{width:2rem;height:2rem;font-size:var(--text-xs);}
 .fdy-avatar--lg{width:3.5rem;height:3.5rem;font-size:var(--text-lg);}
 .fdy-avatar-group{display:inline-flex;}
@@ -283,6 +306,14 @@ a { color: var(--color-primary); }
 .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);}
@@ -291,6 +322,7 @@ a { color: var(--color-primary); }
 .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);}
@@ -303,6 +335,11 @@ a { color: var(--color-primary); }
 .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;}
@@ -1055,7 +1092,12 @@ fieldset.fdy-field>legend{padding:0;float:none;}
 .fdy-step.is-active::before,.fdy-step.is-complete::before{background:var(--color-primary);}
 .fdy-step__btn{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:0 var(--space-2);background:none;border:0;font:inherit;color:inherit;cursor:pointer;max-width:100%;}
 .fdy-step__btn:disabled{cursor:default;}
-.fdy-step__marker{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;flex:none;border-radius:var(--radius-full);background:var(--color-surface);border:2px solid var(--color-border-strong);color:var(--color-text-muted);font-size:var(--text-sm);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;}
+/* The marker carries the lift itself, NOT `__btn`. The connector above is position:absolute with
+   z-index:0, and a positioned box paints after in-flow inline content in the same stacking context —
+   so a marker that is merely inline (an indicator-only stepper with no `__btn`) gets painted THROUGH
+   by the connector line. Lifting the part that must always exist makes that assembly impossible;
+   `__btn`'s own z-index stays, harmlessly, for the navigable case. */
+.fdy-step__marker{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;flex:none;border-radius:var(--radius-full);background:var(--color-surface);border:2px solid var(--color-border-strong);color:var(--color-text-muted);font-size:var(--text-sm);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;}
 .fdy-step__marker svg{display:block;width:1rem;height:1rem;}
 .fdy-step.is-active .fdy-step__marker{border-color:var(--color-primary);background:var(--color-primary-soft);color:var(--color-primary-strong);}
 .fdy-step.is-complete .fdy-step__marker{border-color:var(--color-primary);background:var(--color-primary);color:var(--color-on-primary);}
@@ -1148,7 +1190,13 @@ fieldset.fdy-field>legend{padding:0;float:none;}
 .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;}